diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 95788f791..daaa12d5f 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -27,7 +27,47 @@ "Edit" : { "textSelectObjectToEdit": "Select object to edit", "textSettings": "Settings", - "textCell": "Cell" + "textCell": "Cell", + "textReplace": "Replace", + "textReorder": "Reorder", + "textAlign": "Align", + "textRemoveShape": "Remove Shape", + "textStyle": "Style", + "textShape": "Shape", + "textBack": "Back", + "textFill": "Fill", + "textBorder": "Border", + "textEffects": "Effects", + "textAddCustomColor": "Add Custom Color", + "textCustomColor": "Custom Color", + "textOpacity": "Opacity", + "textSize": "Size", + "textColor": "Color", + "textBringToForeground": "Bring to Foreground", + "textSendToBackground": "Send to Background", + "textMoveForward": "Move Forward", + "textMoveBackward": "Move Backward", + "textImage": "Image", + "textFromLibrary": "Picture from Library", + "textFromURL": "Picture from URL", + "textLinkSettings": "Link Settings", + "textAddress": "Address", + "textImageURL": "Image URL", + "textReplaceImage": "Replace Image", + "textActualSize": "Actual Size", + "textRemoveImage": "Remove Image", + "textEmptyImgUrl": "You need to specify image URL.", + "textNotUrl": "This field should be a URL in the format \"http://www.example.com\"", + "notcriticalErrorTitle": "Warning", + "textPictureFromLibrary": "Picture from Library", + "textPictureFromURL": "Picture from URL" + } + }, + "Common": { + "ThemeColorPalette": { + "textThemeColors": "Theme Colors", + "textStandartColors": "Standard Colors", + "textCustomColors": "Custom Colors" } } } diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-01.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-01.svg new file mode 100644 index 000000000..f30e89ff4 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-01.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-02.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-02.svg new file mode 100644 index 000000000..fd506c86b --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-02.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-03.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-03.svg new file mode 100644 index 000000000..7984b2565 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-03.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-04.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-04.svg new file mode 100644 index 000000000..6a937f4a7 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-04.svg @@ -0,0 +1,13 @@ + + + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-05.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-05.svg new file mode 100644 index 000000000..c1054f48a --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-05.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-06.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-06.svg new file mode 100644 index 000000000..93d269cd7 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-06.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-07.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-07.svg new file mode 100644 index 000000000..82115ebfb --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-07.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-08.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-08.svg new file mode 100644 index 000000000..03958dc88 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-08.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-09.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-09.svg new file mode 100644 index 000000000..52e30d5be --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-09.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-10.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-10.svg new file mode 100644 index 000000000..8f2429a06 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-10.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-11.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-11.svg new file mode 100644 index 000000000..83f0c5b5b --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-11.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-12.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-12.svg new file mode 100644 index 000000000..7cf881ded --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-12.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-13.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-13.svg new file mode 100644 index 000000000..61f13cf04 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-13.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-14.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-14.svg new file mode 100644 index 000000000..d8ed459fc --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-14.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-15.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-15.svg new file mode 100644 index 000000000..43d8a23ca --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-15.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-16.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-16.svg new file mode 100644 index 000000000..ac0f8f423 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-16.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-17.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-17.svg new file mode 100644 index 000000000..9f3114a97 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-17.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-18.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-18.svg new file mode 100644 index 000000000..6f28ba9fa --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-18.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-19.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-19.svg new file mode 100644 index 000000000..4a17eef30 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-19.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-20.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-20.svg new file mode 100644 index 000000000..d666ff1a4 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-20.svg @@ -0,0 +1,13 @@ + + + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-21.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-21.svg new file mode 100644 index 000000000..3855a202a --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-21.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-22.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-22.svg new file mode 100644 index 000000000..31790910e --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-22.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-23.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-23.svg new file mode 100644 index 000000000..c09bd7e35 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-23.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-24.svg b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-24.svg new file mode 100644 index 000000000..4222dbbf3 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/img/shapes/shape-24.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index 43cbd32b2..b8ae6412f 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx @@ -205,11 +205,16 @@ class MainController extends Component { me.api.asc_registerCallback('asc_onEndAction', me._onLongActionEnd.bind(me)); const storeFocusObjects = this.props.storeFocusObjects; - this.api.asc_registerCallback('asc_onFocusObject', objects => { - storeFocusObjects.resetFocusObjects(objects); - }); + this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => { + // console.log(cellInfo); storeFocusObjects.resetCellInfo(cellInfo); + let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps(); + storeFocusObjects.resetFocusObjects(selectedObjects); + }); + + this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => { + Common.Utils.ThemeColor.setColors(colors, standart_colors); }); } diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditImage.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditImage.jsx new file mode 100644 index 000000000..446dc647d --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditImage.jsx @@ -0,0 +1,91 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {observer, inject} from "mobx-react"; + +import { EditImage } from '../../view/edit/EditImage'; + +class EditImageController extends Component { + constructor (props) { + super(props); + this.onRemoveImage = this.onRemoveImage.bind(this); + this.onReplaceByFile = this.onReplaceByFile.bind(this); + this.onReplaceByUrl = this.onReplaceByUrl.bind(this); + } + + onReorder(type) { + const api = Common.EditorApi.get(); + let ascType; + + switch(type) { + case 'all-up': + ascType = Asc.c_oAscDrawingLayerType.BringToFront; + break; + case 'all-down': + ascType = Asc.c_oAscDrawingLayerType.SendToBack; + break; + case 'move-up': + ascType = Asc.c_oAscDrawingLayerType.BringForward; + break; + case 'move-down': + ascType = Asc.c_oAscDrawingLayerType.SendBackward; + break; + } + + api.asc_setSelectedDrawingObjectLayer(ascType); + } + + closeModal() { + if (Device.phone) { + f7.sheet.close('#edit-sheet', true); + } else { + f7.popover.close('#edit-popover'); + } + }; + + onDefaultSize() { + const api = Common.EditorApi.get(); + let imgsize = api.asc_getOriginalImageSize(), + properties = new Asc.asc_CImgProperty(); + + properties.put_Width(imgsize.get_ImageWidth()); + properties.put_Height(imgsize.get_ImageHeight()); + properties.put_ResetCrop(true); + api.asc_setGraphicObjectProps(properties); + } + + onRemoveImage() { + const api = Common.EditorApi.get(); + api.asc_Remove(); + this.closeModal(); + } + + onReplaceByFile() { + const api = Common.EditorApi.get(); + api.asc_changeImageFromFile(); + this.closeModal(); + } + + onReplaceByUrl(value) { + const api = Common.EditorApi.get(); + const image = new Asc.asc_CImgProperty(); + image.asc_putImageUrl(value); + api.asc_setGraphicObjectProps(image); + this.closeModal(); + } + + + render () { + return ( + + ) + } +} + +export default EditImageController; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditShape.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditShape.jsx new file mode 100644 index 000000000..7280a0731 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditShape.jsx @@ -0,0 +1,164 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {observer, inject} from "mobx-react"; + +import { EditShape } from '../../view/edit/EditShape'; + +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) { + const api = Common.EditorApi.get(); + api.asc_changeShapeType(type); + } + + onReorder(type) { + const api = Common.EditorApi.get(); + let ascType; + + switch(type) { + case 'all-up': + ascType = Asc.c_oAscDrawingLayerType.BringToFront; + break; + case 'all-down': + ascType = Asc.c_oAscDrawingLayerType.SendToBack; + break; + case 'move-up': + ascType = Asc.c_oAscDrawingLayerType.BringForward; + break; + case 'move-down': + ascType = Asc.c_oAscDrawingLayerType.SendBackward; + break; + } + + api.asc_setSelectedDrawingObjectLayer(ascType); + } + + closeModal() { + if (Device.phone) { + f7.sheet.close('#edit-sheet', true); + } else { + f7.popover.close('#edit-popover'); + } + }; + + onRemoveShape() { + const api = Common.EditorApi.get(); + api.asc_Remove(); + this.closeModal(); + } + + onFillColor(color) { + const api = Common.EditorApi.get(); + + let shape = new Asc.asc_CShapeProperty(), + image = new Asc.asc_CImgProperty(), + 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.asc_putFill(fill); + image.asc_putShapeProperties(shape); + + api.asc_setGraphicObjectProps(image); + } + + onBorderColor(color) { + const api = Common.EditorApi.get(); + const _shapeObject = this.props.storeFocusObjects.shapeObject.get_ShapeProperties(); + + if (_shapeObject && _shapeObject.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) { + let shape = new Asc.asc_CShapeProperty(), + image = new Asc.asc_CImgProperty(), + 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); + image.asc_putShapeProperties(shape); + + api.asc_setGraphicObjectProps(image); + } + } + + onBorderSize(value) { + const api = Common.EditorApi.get(); + const shape = new Asc.asc_CShapeProperty(); + const stroke = new Asc.asc_CStroke(); + const image = new Asc.asc_CImgProperty(); + + 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.asc_putShapeProperties(shape); + + api.asc_setGraphicObjectProps(image); + + this.props.storeShapeSettings.initBorderColorView(this.props.storeFocusObjects.shapeObject.get_ShapeProperties()); + } + + onOpacity(value) { + const api = Common.EditorApi.get(); + + let fill = new Asc.asc_CShapeFill(), + properties = new Asc.asc_CImgProperty(), + shape = new Asc.asc_CShapeProperty(); + + fill.asc_putTransparent(parseInt(value * 2.55)); + shape.asc_putFill(fill); + properties.put_ShapeProperties(shape); + + api.asc_setGraphicObjectProps(properties); + } + + + render () { + return ( + + ) + } +} + +export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController)); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js index 5d87693d9..0805e1468 100644 --- a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js +++ b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js @@ -81,6 +81,7 @@ export class storeFocusObjects { isChart = true; } else { isShape = true; + } } else if (elValue.asc_getChartProperties()) { isChart = true; @@ -133,6 +134,39 @@ export class storeFocusObjects { return _selections; } + @computed get shapeObject() { + const shapes = []; + console.log(this._focusObjects); + for (let object of this._focusObjects) { + if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { + if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) { + console.log(object); + shapes.push(object); + } + } + } + if (shapes.length > 0) { + const object = shapes[shapes.length - 1]; // get top + return object.get_ObjectValue(); + } else { + return undefined; + } + } - + @computed get imageObject() { + const images = []; + console.log(this._focusObjects); + for (let object of this._focusObjects) { + if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { + console.log(object); + images.push(object); + } + } + if (images.length > 0) { + const object = images[images.length - 1]; // get top + return object.get_ObjectValue(); + } else { + return undefined; + } + } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index ef2da85f6..7b3378a5b 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js @@ -4,9 +4,10 @@ import {storeFocusObjects} from "./focusObjects"; import {storeUsers} from '../../../../common/mobile/lib/store/users'; import {storeWorksheets} from './sheets'; import {storeFunctions} from './functions'; +import {storePalette} from "./palette"; // import {storeTextSettings} from "./textSettings"; // import {storeParagraphSettings} from "./paragraphSettings"; -// import {storeShapeSettings} from "./shapeSettings"; +import {storeShapeSettings} from "./shapeSettings"; // import {storeImageSettings} from "./imageSettings"; // import {storeTableSettings} from "./tableSettings"; import {storeChartSettings} from "./chartSettings"; @@ -19,8 +20,9 @@ export const stores = { storeFunctions: new storeFunctions(), // storeTextSettings: new storeTextSettings(), // storeParagraphSettings: new storeParagraphSettings(), - // storeShapeSettings: new storeShapeSettings(), + storeShapeSettings: new storeShapeSettings(), storeChartSettings: new storeChartSettings(), + storePalette: new storePalette() // storeImageSettings: new storeImageSettings(), // storeTableSettings: new storeTableSettings() }; diff --git a/apps/spreadsheeteditor/mobile/src/store/palette.js b/apps/spreadsheeteditor/mobile/src/store/palette.js new file mode 100644 index 000000000..01ec9aa24 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/palette.js @@ -0,0 +1,9 @@ +import {action, observable} from 'mobx'; + +export class storePalette { + @observable customColors = []; + + @action changeCustomColors (colors) { + this.customColors = colors; + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js b/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js new file mode 100644 index 000000000..7a4ea1929 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js @@ -0,0 +1,224 @@ +import {action, observable, computed} from 'mobx'; + +export class storeShapeSettings { + + getStyleGroups () { + const styles = [ + { + title: 'Text', + thumb: 'shape-01.svg', + type: 'textRect' + }, + { + title: 'Line', + thumb: 'shape-02.svg', + type: 'line' + }, + { + title: 'Line with arrow', + thumb: 'shape-03.svg', + type: 'lineWithArrow' + }, + { + title: 'Line with two arrows', + thumb: 'shape-04.svg', + type: 'lineWithTwoArrows' + }, + { + title: 'Rect', + thumb: 'shape-05.svg', + type: 'rect' + }, + { + title: 'Hexagon', + thumb: 'shape-06.svg', + type: 'hexagon' + }, + { + title: 'Round rect', + thumb: 'shape-07.svg', + type: 'roundRect' + }, + { + title: 'Ellipse', + thumb: 'shape-08.svg', + type: 'ellipse' + }, + { + title: 'Triangle', + thumb: 'shape-09.svg', + type: 'triangle' + }, + { + title: 'Triangle', + thumb: 'shape-10.svg', + type: 'rtTriangle' + }, + { + title: 'Trapezoid', + thumb: 'shape-11.svg', + type: 'trapezoid' + }, + { + title: 'Diamond', + thumb: 'shape-12.svg', + type: 'diamond' + }, + { + title: 'Right arrow', + thumb: 'shape-13.svg', + type: 'rightArrow' + }, + { + title: 'Left-right arrow', + thumb: 'shape-14.svg', + type: 'leftRightArrow' + }, + { + title: 'Left arrow callout', + thumb: 'shape-15.svg', + type: 'leftArrow' + }, + { + title: 'Right arrow callout', + thumb: 'shape-16.svg', + type: 'bentUpArrow' + }, + { + title: 'Flow chart off page connector', + thumb: 'shape-17.svg', + type: 'flowChartOffpageConnector' + }, + { + title: 'Heart', + thumb: 'shape-18.svg', + type: 'heart' + }, + { + title: 'Math minus', + thumb: 'shape-19.svg', + type: 'mathMinus' + }, + { + title: 'Math plus', + thumb: 'shape-20.svg', + type: 'mathPlus' + }, + { + title: 'Parallelogram', + thumb: 'shape-21.svg', + type: 'parallelogram' + }, + { + title: 'Wedge rect callout', + thumb: 'shape-22.svg', + type: 'wedgeRectCallout' + }, + { + title: 'Wedge ellipse callout', + thumb: 'shape-23.svg', + type: 'wedgeEllipseCallout' + }, + { + title: 'Cloud callout', + thumb: 'shape-24.svg', + type: 'cloudCallout' + } + ]; + const groups = []; + let i = 0; + for (let row=0; row _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)]; + } + } + } + +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 3ed9651ef..ef26b37ab 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -6,8 +6,60 @@ import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import EditCellController from "../../controller/edit/EditCell"; +import EditShapeController from "../../controller/edit/EditShape"; +import EditImageController from "../../controller/edit/EditImage"; + +import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; +import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; const routes = [ + + // Shape + + { + path: '/edit-style-shape/', + component: PageShapeStyle + }, + { + path: '/edit-style-shape-no-fill/', + component: PageShapeStyleNoFill + }, + { + path: '/edit-replace-shape/', + component: PageReplaceContainer + }, + { + path: '/edit-reorder-shape', + component: PageReorderContainer + }, + { + path: '/edit-shape-border-color/', + component: PageShapeBorderColor + }, + { + path: '/edit-shape-custom-border-color/', + component: PageShapeCustomBorderColor + }, + { + path: '/edit-shape-custom-fill-color/', + component: PageShapeCustomFillColor + }, + + // Image + + { + path: '/edit-replace-image/', + component: PageImageReplace + }, + { + path: '/edit-reorder-image/', + component: PageImageReorder + }, + { + path: '/edit-image-link/', + component: PageLinkSettings + } + ]; const EmptyEditLayout = () => { @@ -68,7 +120,7 @@ const EditTabs = props => { const _t = t('View.Edit', {returnObjects: true}); const store = props.storeFocusObjects; - const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.settings : store.selections); + const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections); let editors = []; if (settings.length < 1) { editors.push({ @@ -83,6 +135,20 @@ const EditTabs = props => { component: }) } + if (settings.indexOf('shape') > -1) { + editors.push({ + caption: _t.textShape, + id: 'edit-shape', + component: + }) + } + if (settings.indexOf('image') > -1) { + editors.push({ + caption: _t.textImage, + id: 'edit-image', + component: + }) + } } return ( diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx new file mode 100644 index 000000000..0eba7e656 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx @@ -0,0 +1,124 @@ +import React, {Fragment, useState} from 'react'; +import {observer, inject} from "mobx-react"; +import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs, ListInput, ListButton} from 'framework7-react'; +import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; + +const EditImage = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + + + + {_t.textActualSize} + {_t.textRemoveImage} + + + ) +}; + +const PageReorder = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + {props.onReorder('all-up')}} className='no-indicator'> + + + {props.onReorder('all-down')}} className='no-indicator'> + + + {props.onReorder('move-up')}} className='no-indicator'> + + + {props.onReorder('move-down')}} className='no-indicator'> + + + + + ) +}; + + +const PageReplace = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + {props.onReplaceByFile()}}> + + + + + + + + ) +}; + +const PageLinkSettings = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [stateValue, setValue] = useState(''); + + const onReplace = () => { + if (stateValue.trim().length > 0) { + if ((/((^https?)|(^ftp)):\/\/.+/i.test(stateValue))) { + props.onReplaceByUrl(stateValue.trim()); + } else { + f7.dialog.alert(_t.textNotUrl, _t.notcriticalErrorTitle); + } + } else { + f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle); + } + }; + return ( + + + {_t.textAddress} + + {setValue(event.target.value)}} + > + + + + {onReplace()}}> + + + ) +}; + +const EditImageContainer = inject("storeFocusObjects")(observer(EditImage)); +const PageReplaceContainer = inject("storeFocusObjects")(observer(PageReplace)); +const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder)); +const PageLinkSettingsContainer = inject("storeFocusObjects")(observer(PageLinkSettings)); + +export { + EditImageContainer as EditImage, + PageReplaceContainer as PageImageReplace, + PageReorderContainer as PageImageReorder, + PageLinkSettingsContainer as PageLinkSettings +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx new file mode 100644 index 000000000..48272c221 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx @@ -0,0 +1,372 @@ +import React, {Fragment, useState} from 'react'; +import {observer, inject} from "mobx-react"; +import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs} from 'framework7-react'; +import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; + +const EditShape = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeFocusObjects = props.storeFocusObjects; + // const selections = storeFocusObjects.selections; + // console.log(selections); + const shapeObject = storeFocusObjects.shapeObject; + console.log(shapeObject); + const canFill = shapeObject.get_ShapeProperties().asc_getCanFill(); + + return ( + + + {canFill ? + + : + + } + + + + + {_t.textRemoveShape} + + + ) +}; + +const PaletteFill = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeShapeSettings = props.storeShapeSettings; + const shapeObject = props.storeFocusObjects.shapeObject.get_ShapeProperties(); + 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 ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onFillColor(newColor); + storeShapeSettings.setFillColor(newColor); + } else { + props.onFillColor(color); + storeShapeSettings.setFillColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-shape-custom-fill-color/'); + } + }; + + return ( + + + + + + + ) +})); + +const PageStyle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeShapeSettings = props.storeShapeSettings; + const shapeObject = props.storeFocusObjects.shapeObject.get_ShapeProperties(); + 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; + + // 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 ( + + +
+ {_t.textFill} + {_t.textBorder} + {_t.textEffects} +
+ + + + + + + + +
{_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)} +
+ + + + + + + + + +
{_t.textOpacity}
+
+ {setOpacity(value)}} + onRangeChanged={(value) => {props.onOpacity(value)}} + > +
+
+ {stateOpacity + ' %'} +
+ + + + + + ) +}; + +const PageCustomFillColor = props => { + const { t } = useTranslation(); + const _t = t('View.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.get_ShapeProperties(); + 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}); + const storeShapeSettings = props.storeShapeSettings; + let shapes = storeShapeSettings.getStyleGroups(); + shapes.splice(0, 1); // Remove line shapes + + return ( + + + {shapes.map((row, indexRow) => { + return ( +
    + {row.map((shape, index) => { + return ( +
  • {props.onReplace(shape.type)}}> +
    +
    +
    • + ) + })} +
+ ) + })} + + ) +}; + +const PageReorder = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + {props.onReorder('all-up')}} className='no-indicator'> + + + {props.onReorder('all-down')}} className='no-indicator'> + + + {props.onReorder('move-up')}} className='no-indicator'> + + + {props.onReorder('move-down')}} className='no-indicator'> + + + + + ) +}; + +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 PageShapeBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageBorderColor)); +const PageShapeCustomBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageCustomBorderColor)); + +export { + EditShapeContainer as EditShape, + PageShapeStyle, + PageShapeStyleNoFill, + PageReplaceContainer, + PageReorderContainer, + PageShapeBorderColor, + PageShapeCustomBorderColor, + PageShapeCustomFillColor +} \ No newline at end of file