[DE mobile] Added border size, border color, opacity into edit shape settings

apps/documenteditor/mobile/locale/en.json

@@ -179,7 +179,9 @@
     "textBackground": "Background",
     "textFill": "Fill",
     "textBorder": "Border",
-    "textEffects": "Effects"
+    "textEffects": "Effects",
+    "textColor": "Color",
+    "textOpacity": "Opacity"
   },
   "Add": {
     "textTable": "Table",

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

@@ -9,8 +9,11 @@ class EditShapeController extends Component {
     constructor (props) {
         super(props);
         this.onWrapType = this.onWrapType.bind(this);
+        this.onBorderSize = this.onBorderSize.bind(this);
+        this.onBorderColor = this.onBorderColor.bind(this);
 
         this.props.storeShapeSettings.setFillColor(undefined);
+        this.props.storeShapeSettings.setBorderColor(undefined);
     }
 
     onRemoveShape () {
@@ -124,6 +127,65 @@ class EditShapeController extends Component {
         api.ImgApply(image);
     }
 
+    onBorderSize (value) {
+        const api = Common.EditorApi.get();
+
+        const image = new Asc.asc_CImgProperty();
+        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);
+        image.put_ShapeProperties(shape);
+
+        api.ImgApply(image);
+        this.props.storeShapeSettings.initBorderColorView(this.props.storeFocusObjects.shapeObject); // when select STROKE_NONE or change from STROKE_NONE to STROKE_COLOR
+    }
+
+    onBorderColor (color) {
+        const api = Common.EditorApi.get();
+        const currentShape = this.props.storeFocusObjects.shapeObject.get_ShapeProperties();
+        if (currentShape && currentShape.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
+            const image = new Asc.asc_CImgProperty();
+            const shape = new Asc.asc_CShapeProperty();
+            const stroke = new Asc.asc_CStroke();
+            if (currentShape.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(currentShape.get_stroke().get_width());
+                stroke.asc_putPrstDash(currentShape.get_stroke().asc_getPrstDash());
+            }
+            shape.put_stroke(stroke);
+            image.put_ShapeProperties(shape);
+            api.ImgApply(image);
+        }
+    }
+
+    onOpacity (value) {
+        const api = Common.EditorApi.get();
+        const properties = new Asc.asc_CImgProperty();
+        const fill = new Asc.asc_CShapeFill();
+        const shape = new Asc.asc_CShapeProperty();
+        fill.put_transparent(parseInt(value * 2.55));
+        shape.put_fill(fill);
+        properties.put_ShapeProperties(shape);
+        api.ImgApply(properties);
+    }
+
     render () {
         return (
             <EditShape onRemoveShape={this.onRemoveShape}
@@ -135,6 +197,9 @@ class EditShapeController extends Component {
                        onReorder={this.onReorder}
                        onReplace={this.onReplace}
                        onFillColor={this.onFillColor}
+                       onBorderSize={this.onBorderSize}
+                       onBorderColor={this.onBorderColor}
+                       onOpacity={this.onOpacity}
             />
         )
     }

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

@@ -214,4 +214,52 @@ export class storeShapeSettings {
         return color;
     }
 
+    // Border size and color
+    @observable borderColorView;
+    setBorderColor (color) {
+        this.borderColorView = color;
+    }
+    initBorderColorView (shapeObject) {
+        const stroke = shapeObject.get_ShapeProperties().get_stroke();
+        let color = 'transparent';
+        if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
+            const sdkColor = stroke.get_color();
+            if (sdkColor) {
+                if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                    color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
+                }
+                else {
+                    color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
+                }
+            }
+        }
+        this.borderColorView = color;
+        return color;
+    }
+    borderSizeTransform () {
+        const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
+
+        return {
+            sizeByIndex: function (index) {
+                if (index < 1) return _sizes[0];
+                if (index > _sizes.length - 1) return _sizes[_sizes.length - 1];
+                return _sizes[index];
+            },
+
+            indexSizeByValue: function (value) {
+                let index = 0;
+                _sizes.forEach((size, idx) => {
+                    if (Math.abs(size - value) < 0.25) {
+                        index = idx;
+                    }
+                });
+                return index;
+            },
+
+            sizeByValue: function (value) {
+                return _sizes[this.indexSizeByValue(value)];
+            }
+        }
+    }
+
 }

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

@@ -16,7 +16,7 @@ import EditHeaderController from "../../controller/edit/EditHeader";
 
 import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
 import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
-import {PageShapeStyle, PageShapeCustomFillColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
+import {PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
 import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable";
 import {PageChartWrap, PageChartReorder} from "./EditChart";
@@ -81,6 +81,14 @@ const routes = [
         path: '/edit-shape-custom-fill-color/',
         component: PageShapeCustomFillColor,
     },
+    {
+        path: '/edit-shape-border-color/',
+        component: PageShapeBorderColor,
+    },
+    {
+        path: '/edit-shape-custom-border-color/',
+        component: PageShapeCustomBorderColor,
+    },
     {
         path: '/edit-shape-wrap/',
         component: PageWrap,

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

@@ -26,7 +26,7 @@ const PageCustomFillColor = props => {
     )
 };
 
-const FillTab = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(props => {
+const PaletteFill = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
     const storeShapeSettings = props.storeShapeSettings;
@@ -60,9 +60,85 @@ const FillTab = inject("storeFocusObjects", "storeShapeSettings", "storePalette"
     )
 }));
 
+const PageCustomBorderColor = props => {
+    const { t } = useTranslation();
+    const _t = t('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 PageBorderColor = props => {
+    const { t } = useTranslation();
+    const _t = t('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 PageStyle = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
+    const storeShapeSettings = props.storeShapeSettings;
+    const shapeObject = props.storeFocusObjects.shapeObject;
+    const stroke = shapeObject.get_ShapeProperties().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;
+
+    // Init opacity
+    const transparent = shapeObject.get_ShapeProperties().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}>
@@ -74,13 +150,47 @@ const PageStyle = props => {
             </Navbar>
             <Tabs animated>
                 <Tab key={"de-tab-shape-fill"} id={"edit-shape-fill"} className="page-content" tabActive={true}>
-                    <FillTab onFillColor={props.onFillColor}/>
+                    <PaletteFill onFillColor={props.onFillColor}/>
                 </Tab>
                 <Tab key={"de-tab-shape-border"} id={"edit-shape-border"} className="page-content">
-                    border
+                    <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>
                 </Tab>
                 <Tab key={"de-tab-shape-effects"} id={"edit-shape-effects"} className="page-content">
-                    effects
+                    <List>
+                        <ListItem>
+                            <div slot="root-start" className='inner-range-title'>{_t.textOpacity}</div>
+                            <div slot='inner' style={{width: '100%'}}>
+                                <Range min={0} max={100} step={1} value={stateOpacity}
+                                       onRangeChange={(value) => {setOpacity(value)}}
+                                       onRangeChanged={(value) => {props.onOpacity(value)}}
+                                ></Range>
+                            </div>
+                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                                {stateOpacity + ' %'}
+                            </div>
+                        </ListItem>
+                    </List>
                 </Tab>
             </Tabs>
         </Page>
@@ -246,7 +356,10 @@ const EditShape = props => {
         <Fragment>
             <List>
                 <ListItem title={_t.textStyle} link='/edit-shape-style/' routeProps={{
-                    onFillColor: props.onFillColor
+                    onFillColor: props.onFillColor,
+                    onBorderSize: props.onBorderSize,
+                    onBorderColor: props.onBorderColor,
+                    onOpacity: props.onOpacity
                 }}></ListItem>
                 <ListItem title={_t.textWrap} link='/edit-shape-wrap/' routeProps={{
                     onWrapType: props.onWrapType,
@@ -270,8 +383,10 @@ const EditShape = props => {
 };
 
 const EditShapeContainer = inject("storeFocusObjects")(observer(EditShape));
-const PageShapeStyle = inject("storeFocusObjects")(observer(PageStyle));
+const PageShapeStyle = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyle));
 const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor));
+const PageShapeBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageBorderColor));
+const PageShapeCustomBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageCustomBorderColor));
 const PageWrapContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(PageWrap));
 const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
 const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
@@ -279,6 +394,8 @@ const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
 export {EditShapeContainer as EditShape,
         PageShapeStyle,
         PageShapeCustomFillColor,
+        PageShapeBorderColor,
+        PageShapeCustomBorderColor,
         PageWrapContainer as PageWrap,
         PageReplaceContainer as PageReplace,
         PageReorderContainer as PageReorder}