Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE mobile] Added Shape Settings

Browse source
This commit is contained in:
SergeyEzhin 2021-01-22 20:38:21 +03:00
parent 80a874ad21
commit 67da881df0
4 changed files with 273 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
apps/presentationeditor/mobile/src/controller/edit/EditShape.jsx
View file

@ -9,6 +9,11 @@ class EditShapeController extends Component {
constructor (props) {
super(props);
this.onRemoveShape = this.onRemoveShape.bind(this);
this.onBorderSize = this.onBorderSize.bind(this);
this.onBorderColor = this.onBorderColor.bind(this);
this.props.storeShapeSettings.setFillColor(undefined);
this.props.storeShapeSettings.setBorderColor(undefined);
}
onReplace(type) {
@ -81,6 +86,83 @@ class EditShapeController extends Component {
this.closeModal();
}
onFillColor(color) {
const api = Common.EditorApi.get();
let shape = new Asc.asc_CShapeProperty(),
fill = new Asc.asc_CShapeFill();
if (color == 'transparent') {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
fill.put_fill(null);
} else {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
fill.put_fill(new Asc.asc_CFillSolid());
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
}
shape.put_fill(fill);
api.ShapeApply(shape);
}
onBorderColor(color) {
const api = Common.EditorApi.get();
const _shapeObject = this.props.storeFocusObjects.shapeObject;
if (_shapeObject && _shapeObject.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
let shape = new Asc.asc_CShapeProperty(),
stroke = new Asc.asc_CStroke();
if (_shapeObject.get_stroke().get_width() < 0.01) {
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
} else {
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color));
stroke.put_width(_shapeObject.get_stroke().get_width());
stroke.asc_putPrstDash(_shapeObject.get_stroke().asc_getPrstDash());
}
shape.put_stroke(stroke);
api.ShapeApply(shape);
}
}
onBorderSize(value) {
const api = Common.EditorApi.get();
const shape = new Asc.asc_CShapeProperty();
const stroke = new Asc.asc_CStroke();
const _borderColor = this.props.storeShapeSettings.borderColorView;
if (value < 0.01) {
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
} else {
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
if (_borderColor == 'transparent')
stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29}));
else
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor)));
stroke.put_width(value * 25.4 / 72.0);
}
shape.put_stroke(stroke);
api.ShapeApply(shape);
this.props.storeShapeSettings.initBorderColorView(this.props.storeFocusObjects.shapeObject);
}
onOpacity(value) {
const api = Common.EditorApi.get();
let fill = new Asc.asc_CShapeFill(),
shape = new Asc.asc_CShapeProperty();
fill.put_transparent(parseInt(value * 2.55));
shape.put_fill(fill);
api.ShapeApply(shape);
}
render () {
return (
<EditShape
@ -88,9 +170,13 @@ class EditShapeController extends Component {
onReorder={this.onReorder}
onAlign={this.onAlign}
onRemoveShape={this.onRemoveShape}
onFillColor={this.onFillColor}
onBorderColor={this.onBorderColor}
onBorderSize={this.onBorderSize}
onOpacity={this.onOpacity}
/>
)
}
}
export default EditShapeController;
export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController));

54
apps/presentationeditor/mobile/src/store/shapeSettings.js
View file

@ -138,60 +138,6 @@ export class storeShapeSettings {
return groups;
}
wrapTypesTransform () {
const map = [
{ ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline },
{ ui:'square', sdk: Asc.c_oAscWrapStyle2.Square },
{ ui:'tight', sdk: Asc.c_oAscWrapStyle2.Tight },
{ ui:'through', sdk: Asc.c_oAscWrapStyle2.Through },
{ ui:'top-bottom', sdk: Asc.c_oAscWrapStyle2.TopAndBottom },
{ ui:'behind', sdk: Asc.c_oAscWrapStyle2.Behind },
{ ui:'infront', sdk: Asc.c_oAscWrapStyle2.InFront }
];
return {
sdkToUi: function(type) {
let record = map.filter(function(obj) {
return obj.sdk === type;
})[0];
return record ? record.ui : '';
},
uiToSdk: function(type) {
let record = map.filter(function(obj) {
return obj.ui === type;
})[0];
return record ? record.sdk : 0;
}
}
}
getWrapType (shapeObject) {
const wrapping = shapeObject.get_WrappingStyle();
const shapeWrapType = this.wrapTypesTransform().sdkToUi(wrapping);
return shapeWrapType;
}
transformToSdkWrapType (value) {
const sdkType = this.wrapTypesTransform().uiToSdk(value);
return sdkType;
}
getAlign (shapeObject) {
return shapeObject.get_PositionH().get_Align();
}
getMoveText (shapeObject) {
return shapeObject.get_PositionV().get_RelativeFrom() == Asc.c_oAscRelativeFromV.Paragraph;
}
getOverlap (shapeObject) {
return shapeObject.get_AllowOverlap();
}
getWrapDistance (shapeObject) {
return shapeObject.get_Paddings().get_Top();
}
// Fill Color
@observable fillColor = undefined;

26
apps/presentationeditor/mobile/src/view/edit/Edit.jsx
View file

@ -10,7 +10,7 @@ import EditTextController from "../../controller/edit/EditText";
import EditShapeController from "../../controller/edit/EditShape";
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText';
import { PageShapeStyle, PageReplaceContainer, PageReorderContainer, PageAlignContainer } from './EditShape';
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
//import EditShapeController from "../../controller/edit/EditShape";
//import EditImageController from "../../controller/edit/EditImage";
//import EditTableController from "../../controller/edit/EditTable";
@ -75,20 +75,36 @@ const routes = [
component: PageTextLineSpacing
},
{
path: '/style-shape/',
path: '/edit-style-shape/',
component: PageShapeStyle
},
{
path: '/replace-shape/',
path: '/edit-style-shape-no-fill/',
component: PageShapeStyleNoFill
},
{
path: '/edit-replace-shape/',
component: PageReplaceContainer
},
{
path: '/reorder-shape',
path: '/edit-reorder-shape',
component: PageReorderContainer
},
{
path: '/align-shape/',
path: '/edit-align-shape/',
component: PageAlignContainer
},
{
path: '/edit-shape-border-color/',
component: PageShapeBorderColor
},
{
path: '/edit-shape-custom-border-color/',
component: PageShapeCustomBorderColor
},
{
path: '/edit-shape-custom-fill-color/',
component: PageShapeCustomFillColor
}
];

175
apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
View file

@ -8,18 +8,31 @@ import {Device} from '../../../../../common/mobile/utils/device';
const EditShape = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const canFill = props.storeFocusObjects.shapeObject.get_CanFill();
return (
<Fragment>
<List>
<ListItem title={_t.textStyle} link="/style-shape/"></ListItem>
<ListItem title={_t.textReplace} link="/replace-shape/" routeProps={{
{canFill ?
<ListItem title={_t.textStyle} link="/edit-style-shape/" routeProps={{
onFillColor: props.onFillColor,
onBorderSize: props.onBorderSize,
onBorderColor: props.onBorderColor,
onOpacity: props.onOpacity
}}></ListItem>
:
<ListItem title={_t.textStyle} link="/edit-style-shape-no-fill/" routeProps={{
onBorderSize: props.onBorderSize,
onBorderColor: props.onBorderColor
}}></ListItem>
}
<ListItem title={_t.textReplace} link="/edit-replace-shape/" routeProps={{
onReplace: props.onReplace
}}></ListItem>
<ListItem title={_t.textReorder} link="/reorder-shape/" routeProps={{
<ListItem title={_t.textReorder} link="/edit-reorder-shape/" routeProps={{
onReorder: props.onReorder
}}></ListItem>
<ListItem title={_t.textAlign} link="/align-shape/" routeProps={{
<ListItem title={_t.textAlign} link="/edit-align-shape/" routeProps={{
onAlign: props.onAlign
}}></ListItem>
</List>
@ -37,6 +50,7 @@ const PaletteFill = inject("storeFocusObjects", "storeShapeSettings", "storePale
const shapeObject = props.storeFocusObjects.shapeObject;
const curFillColor = storeShapeSettings.fillColor ? storeShapeSettings.fillColor : storeShapeSettings.getFillColor(shapeObject);
const customColors = props.storePalette.customColors;
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
@ -52,6 +66,7 @@ const PaletteFill = inject("storeFocusObjects", "storeShapeSettings", "storePale
props.f7router.navigate('/edit-shape-custom-fill-color/');
}
};
return (
<Fragment>
<ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
@ -69,10 +84,10 @@ const PageStyle = props => {
const _t = t('View.Edit', {returnObjects: true});
const storeShapeSettings = props.storeShapeSettings;
const shapeObject = props.storeFocusObjects.shapeObject;
const stroke = shapeObject.get_stroke();
// Init border size
const borderSizeTransform = storeShapeSettings.borderSizeTransform();
const borderSize = stroke.get_width() * 72.0 / 25.4;
const borderType = stroke.get_type();
@ -80,16 +95,18 @@ const PageStyle = props => {
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
// Init border color
const borderColor = !storeShapeSettings.borderColorView ? storeShapeSettings.initBorderColorView(shapeObject) : storeShapeSettings.borderColorView;
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
// Init opacity
const transparent = shapeObject.get_fill().asc_getTransparent();
const opacity = transparent !== null && transparent !== undefined ? transparent / 2.55 : 100;
const [stateOpacity, setOpacity] = useState(Math.round(opacity));
return (
<Page>
<Navbar backLink={_t.textBack}>
@ -148,6 +165,81 @@ const PageStyle = props => {
)
};
const PageCustomFillColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
let fillColor = props.storeShapeSettings.fillColor;
if (typeof fillColor === 'object') {
fillColor = fillColor.color;
}
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onFillColor(color);
props.storeShapeSettings.setFillColor(color);
props.f7router.back();
};
return(
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
const PageStyleNoFill = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeShapeSettings = props.storeShapeSettings;
const shapeObject = props.storeFocusObjects.shapeObject;
const stroke = shapeObject.get_stroke();
// Init border size
const borderSizeTransform = storeShapeSettings.borderSizeTransform();
const borderSize = stroke.get_width() * 72.0 / 25.4;
const borderType = stroke.get_type();
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
// Init border color
const borderColor = !storeShapeSettings.borderColorView ? storeShapeSettings.initBorderColorView(shapeObject) : storeShapeSettings.borderColorView;
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textBorder}></Navbar>
<List>
<ListItem>
<div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
<div slot='inner' style={{width: '100%'}}>
<Range min="0" max="7" step="1" value={stateBorderSize}
onRangeChange={(value) => {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}}
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div>
</ListItem>
<ListItem title={_t.textColor} link='/edit-shape-border-color/' routeProps={{
onBorderColor: props.onBorderColor
}}>
<span className="color-preview"
slot="after"
style={{ background: displayBorderColor}}
></span>
</ListItem>
</List>
</Page>
)
};
const PageReplace = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
@ -241,16 +333,79 @@ const PageAlign = props => {
)
}
const PageBorderColor = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const borderColor = props.storeShapeSettings.borderColorView;
const customColors = props.storePalette.customColors;
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
props.onBorderColor(newColor);
props.storeShapeSettings.setBorderColor(newColor);
} else {
props.onBorderColor(color);
props.storeShapeSettings.setBorderColor(color);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-shape-custom-border-color/');
}
};
return (
<Page>
<Navbar title={_t.textColor} backLink={_t.textBack} />
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-border-color/'} routeProps={{
onBorderColor: props.onBorderColor
}}></ListItem>
</List>
</Page>
)
};
const PageCustomBorderColor = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
let borderColor = props.storeShapeSettings.borderColorView;
if (typeof borderColor === 'object') {
borderColor = borderColor.color;
}
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onBorderColor(color);
props.storeShapeSettings.setBorderColor(color);
props.f7router.back();
};
return (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
const EditShapeContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(EditShape));
const PageShapeStyle = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyle));
const PageShapeStyleNoFill = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyleNoFill));
const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor));
const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
const PageAlignContainer = inject("storeFocusObjects")(observer(PageAlign));
const PageShapeBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageBorderColor));
const PageShapeCustomBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageCustomBorderColor));
export {
EditShapeContainer as EditShape,
PageShapeStyle,
PageShapeStyleNoFill,
PageReplaceContainer,
PageReorderContainer,
PageAlignContainer
PageAlignContainer,
PageShapeBorderColor,
PageShapeCustomBorderColor,
PageShapeCustomFillColor
}