[PE mobile] Added Shape Settings

apps/presentationeditor/mobile/src/controller/edit/EditShape.jsx

@@ -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));

apps/presentationeditor/mobile/src/store/shapeSettings.js

@@ -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;

apps/presentationeditor/mobile/src/view/edit/Edit.jsx

@@ -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
     }
 
 ];

apps/presentationeditor/mobile/src/view/edit/EditShape.jsx

@@ -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>
+                {canFill ?
-                <ListItem title={_t.textReplace} link="/replace-shape/" routeProps={{
+                    <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
 }