[PE mobile] Make Shape Settings
This commit is contained in:
SergeyEzhin
parent
032c1d9dda
commit
80a874ad21
|
|
@ -130,6 +130,8 @@
|
|||
"textSec": "s",
|
||||
"textAddCustomColor": "Add Custom Color",
|
||||
"textFill": "Fill",
|
||||
"textBorder": "Border",
|
||||
"textEffects": "Effects",
|
||||
"textCustomColor": "Custom Color",
|
||||
"textDuplicateSlide": "Duplicate Slide",
|
||||
"textDeleteSlide": "Delete Slide",
|
||||
|
|
@ -154,7 +156,25 @@
|
|||
"textDistanceFromText": "Distance From Text",
|
||||
"textBefore": "Before",
|
||||
"textAfter": "After",
|
||||
"textFontColors": "Font Colors"
|
||||
"textFontColors": "Font Colors",
|
||||
"textReplace": "Replace",
|
||||
"textReorder": "Reorder",
|
||||
"textAlign": "Align",
|
||||
"textRemoveShape": "Remove Shape",
|
||||
"textColor": "Color",
|
||||
"textOpacity": "Opacity",
|
||||
"textBringToForeground": "Bring to Foreground",
|
||||
"textSendToBackground": "Send to Background",
|
||||
"textMoveForward": "Move Forward",
|
||||
"textMoveBackward": "Move Backward",
|
||||
"textAlignLeft": "Align Left",
|
||||
"textAlignCenter": "Align Center",
|
||||
"textAlignRight": "Align Right",
|
||||
"textAlignTop": "Align Top",
|
||||
"textAlignMiddle": "Align Middle",
|
||||
"textAlignBottom": "Align Bottom",
|
||||
"textDistributeHorizontally": "Distribute Horizontally",
|
||||
"textDistributeVertically": "Distribute Vertically"
|
||||
}
|
||||
},
|
||||
"Common": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
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);
|
||||
}
|
||||
|
||||
onReplace(type) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.ChangeShapeType(type);
|
||||
}
|
||||
|
||||
onReorder(type) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
switch(type) {
|
||||
case 'all-up':
|
||||
api.shapes_bringToFront();
|
||||
break;
|
||||
case 'all-down':
|
||||
api.shapes_bringToBack();
|
||||
break;
|
||||
case 'move-up':
|
||||
api.shapes_bringForward();
|
||||
break;
|
||||
case 'move-down':
|
||||
api.shapes_bringBackward();
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
onAlign(type) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
switch(type) {
|
||||
case 'align-left':
|
||||
api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_LEFT);
|
||||
break;
|
||||
case 'align-center':
|
||||
api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_CENTER);
|
||||
break;
|
||||
case 'align-right':
|
||||
api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_RIGHT);
|
||||
break;
|
||||
case 'align-top':
|
||||
api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_TOP);
|
||||
break;
|
||||
case 'align-middle':
|
||||
api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_MIDDLE);
|
||||
break;
|
||||
case 'align-bottom':
|
||||
api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_BOTTOM);
|
||||
break;
|
||||
case 'distrib-hor':
|
||||
api.DistributeHorizontally();
|
||||
break;
|
||||
case 'distrib-vert':
|
||||
api.DistributeVertically();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditShape
|
||||
onReplace={this.onReplace}
|
||||
onReorder={this.onReorder}
|
||||
onAlign={this.onAlign}
|
||||
onRemoveShape={this.onRemoveShape}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default EditShapeController;
|
||||
|
|
@ -82,4 +82,19 @@ export class storeFocusObjects {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
@computed get shapeObject() {
|
||||
const shapes = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Shape) {
|
||||
shapes.push(object);
|
||||
}
|
||||
}
|
||||
if (shapes.length > 0) {
|
||||
const object = shapes[shapes.length - 1]; // get top
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ import {storePresentationSettings} from './presentationSettings';
|
|||
import { storePalette } from './palette';
|
||||
import { storeSlideSettings } from './slideSettings';
|
||||
import { storeTextSettings } from './textSettings';
|
||||
import { storeShapeSettings } from './shapeSettings';
|
||||
// import {storeTextSettings} from "./textSettings";
|
||||
// import {storeParagraphSettings} from "./paragraphSettings";
|
||||
// import {storeShapeSettings} from "./shapeSettings";
|
||||
|
|
@ -26,7 +27,8 @@ export const stores = {
|
|||
storePresentationSettings: new storePresentationSettings(),
|
||||
storeSlideSettings: new storeSlideSettings(),
|
||||
storePalette: new storePalette(),
|
||||
storeTextSettings: new storeTextSettings()
|
||||
storeTextSettings: new storeTextSettings(),
|
||||
storeShapeSettings: new storeShapeSettings()
|
||||
// storeTextSettings: new storeTextSettings(),
|
||||
// storeParagraphSettings: new storeParagraphSettings(),
|
||||
// storeShapeSettings: new storeShapeSettings(),
|
||||
|
|
|
|||
278
apps/presentationeditor/mobile/src/store/shapeSettings.js
Normal file
278
apps/presentationeditor/mobile/src/store/shapeSettings.js
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
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<Math.floor(styles.length/4); row++) {
|
||||
const group = [];
|
||||
for (let cell=0; cell<4; cell++) {
|
||||
group.push(styles[i]);
|
||||
i++;
|
||||
}
|
||||
groups.push(group);
|
||||
}
|
||||
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;
|
||||
|
||||
setFillColor (color) {
|
||||
this.fillColor = color;
|
||||
}
|
||||
|
||||
getFillColor (shapeObject) {
|
||||
let fill = shapeObject.get_fill();
|
||||
const fillType = fill.get_type();
|
||||
let color = 'transparent';
|
||||
|
||||
if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
|
||||
fill = fill.get_fill();
|
||||
const sdkColor = fill.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.fillColor = color;
|
||||
return color;
|
||||
}
|
||||
|
||||
// Border size and color
|
||||
|
||||
@observable borderColorView;
|
||||
|
||||
setBorderColor (color) {
|
||||
this.borderColorView = color;
|
||||
}
|
||||
|
||||
initBorderColorView (shapeObject) {
|
||||
const stroke = shapeObject.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)];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -7,8 +7,10 @@ import {Device} from '../../../../../common/mobile/utils/device';
|
|||
|
||||
import EditSlideController from "../../controller/edit/EditSlide";
|
||||
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 EditShapeController from "../../controller/edit/EditShape";
|
||||
//import EditImageController from "../../controller/edit/EditImage";
|
||||
//import EditTableController from "../../controller/edit/EditTable";
|
||||
|
|
@ -71,7 +73,24 @@ const routes = [
|
|||
{
|
||||
path: '/edit-text-line-spacing/',
|
||||
component: PageTextLineSpacing
|
||||
},
|
||||
{
|
||||
path: '/style-shape/',
|
||||
component: PageShapeStyle
|
||||
},
|
||||
{
|
||||
path: '/replace-shape/',
|
||||
component: PageReplaceContainer
|
||||
},
|
||||
{
|
||||
path: '/reorder-shape',
|
||||
component: PageReorderContainer
|
||||
},
|
||||
{
|
||||
path: '/align-shape/',
|
||||
component: PageAlignContainer
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
const EmptyEditLayout = () => {
|
||||
|
|
@ -152,6 +171,13 @@ const EditTabs = props => {
|
|||
component: <EditTextController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('shape') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textShape,
|
||||
id: 'edit-shape',
|
||||
component: <EditShapeController />
|
||||
})
|
||||
}
|
||||
/*if (settings.indexOf('table') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textTable,
|
||||
|
|
@ -159,13 +185,6 @@ const EditTabs = props => {
|
|||
component: <EditTableController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('shape') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textShape,
|
||||
id: 'edit-shape',
|
||||
component: <EditShapeController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textImage,
|
||||
|
|
|
|||
256
apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
Normal file
256
apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
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});
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
<ListItem title={_t.textStyle} link="/style-shape/"></ListItem>
|
||||
<ListItem title={_t.textReplace} link="/replace-shape/" routeProps={{
|
||||
onReplace: props.onReplace
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textReorder} link="/reorder-shape/" routeProps={{
|
||||
onReorder: props.onReorder
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textAlign} link="/align-shape/" routeProps={{
|
||||
onAlign: props.onAlign
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
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;
|
||||
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 (
|
||||
<Fragment>
|
||||
<ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
|
||||
<List>
|
||||
<ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-fill-color/'} routeProps={{
|
||||
onFillColor: props.onFillColor
|
||||
}}></ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
}));
|
||||
|
||||
const PageStyle = 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;
|
||||
|
||||
// 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}>
|
||||
<div className='tab-buttons tabbar'>
|
||||
<Link key={"de-link-shape-fill"} tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
|
||||
<Link key={"de-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
|
||||
<Link key={"de-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
|
||||
</div>
|
||||
</Navbar>
|
||||
<Tabs animated>
|
||||
<Tab key={"de-tab-shape-fill"} id={"edit-shape-fill"} className="page-content no-padding-top" tabActive={true}>
|
||||
<PaletteFill onFillColor={props.onFillColor}/>
|
||||
</Tab>
|
||||
<Tab key={"de-tab-shape-border"} id={"edit-shape-border"} className="page-content no-padding-top">
|
||||
<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 no-padding-top">
|
||||
<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>
|
||||
)
|
||||
};
|
||||
|
||||
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 (
|
||||
<Page className="shapes">
|
||||
<Navbar title={_t.textReplace} backLink={_t.textBack} />
|
||||
{shapes.map((row, indexRow) => {
|
||||
return (
|
||||
<ul className="row" key={'shape-row-' + indexRow}>
|
||||
{row.map((shape, index) => {
|
||||
return (
|
||||
<li key={'shape-' + indexRow + '-' + index} onClick={() => {props.onReplace(shape.type)}}>
|
||||
<div className="thumb"
|
||||
style={{WebkitMaskImage: `url('resources/img/shapes/${shape.thumb}')`}}>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageReorder = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textReorder} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-foreground"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-background"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-forward"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-backward"></Icon>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageAlign = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textAlign} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-left"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAlignCenter} link='#' onClick={() => {props.onAlign('align-center')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-center"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAlignRight} link='#' onClick={() => {props.onAlign('align-right')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-right"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAlignTop} link='#' onClick={() => {props.onAlign('align-top')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-top"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAlignMiddle} link='#' onClick={() => {props.onAlign('align-middle')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-middle"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAlignBottom} link='#' onClick={() => {props.onAlign('align-bottom')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-bottom"></Icon>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textDistributeHorizontally} link='#' onClick={() => {props.onAlign('distrib-hor')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-horizontal"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textDistributeVertically} link='#' onClick={() => {props.onAlign('distrib-vert')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-vertical"></Icon>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
const EditShapeContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(EditShape));
|
||||
const PageShapeStyle = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyle));
|
||||
const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
|
||||
const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
|
||||
const PageAlignContainer = inject("storeFocusObjects")(observer(PageAlign));
|
||||
|
||||
export {
|
||||
EditShapeContainer as EditShape,
|
||||
PageShapeStyle,
|
||||
PageReplaceContainer,
|
||||
PageReorderContainer,
|
||||
PageAlignContainer
|
||||
}
|
||||
Loading…
Reference in a new issue