diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditShape.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditShape.jsx index fd1ce1407..a7b42a95d 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditShape.jsx +++ b/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 ( ) } } -export default EditShapeController; \ No newline at end of file +export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController)); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/shapeSettings.js b/apps/presentationeditor/mobile/src/store/shapeSettings.js index 07279085b..d119dd7da 100644 --- a/apps/presentationeditor/mobile/src/store/shapeSettings.js +++ b/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; diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index 5e2b466a7..35933ce37 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/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 } ]; diff --git a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx index d35c04c4b..91fd0a451 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx +++ b/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 ( - - + : + + } + - - @@ -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 ( @@ -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 ( @@ -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( + + + + + ) +}; + +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 ( + + + + +
{_t.textSize}
+
+ {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}} + onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} + > +
+
+ {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} +
+ + + + + + + ) +}; + 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 ( + + + + + + + + ) +}; + +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 ( + + + + + ) +}; + 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 } \ No newline at end of file