[PE mobile] Added Shape Settings
This commit is contained in:
parent
80a874ad21
commit
67da881df0
|
@ -9,6 +9,11 @@ class EditShapeController extends Component {
|
|||
constructor (props) {
|
||||
super(props);
|
||||
this.onRemoveShape = this.onRemoveShape.bind(this);
|
||||
this.onBorderSize = this.onBorderSize.bind(this);
|
||||
this.onBorderColor = this.onBorderColor.bind(this);
|
||||
|
||||
this.props.storeShapeSettings.setFillColor(undefined);
|
||||
this.props.storeShapeSettings.setBorderColor(undefined);
|
||||
}
|
||||
|
||||
onReplace(type) {
|
||||
|
@ -81,6 +86,83 @@ class EditShapeController extends Component {
|
|||
this.closeModal();
|
||||
}
|
||||
|
||||
onFillColor(color) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
let shape = new Asc.asc_CShapeProperty(),
|
||||
fill = new Asc.asc_CShapeFill();
|
||||
|
||||
if (color == 'transparent') {
|
||||
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
|
||||
fill.put_fill(null);
|
||||
} else {
|
||||
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
|
||||
fill.put_fill(new Asc.asc_CFillSolid());
|
||||
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
|
||||
}
|
||||
|
||||
shape.put_fill(fill);
|
||||
api.ShapeApply(shape);
|
||||
}
|
||||
|
||||
onBorderColor(color) {
|
||||
const api = Common.EditorApi.get();
|
||||
const _shapeObject = this.props.storeFocusObjects.shapeObject;
|
||||
|
||||
if (_shapeObject && _shapeObject.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
|
||||
let shape = new Asc.asc_CShapeProperty(),
|
||||
stroke = new Asc.asc_CStroke();
|
||||
|
||||
if (_shapeObject.get_stroke().get_width() < 0.01) {
|
||||
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
|
||||
} else {
|
||||
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
|
||||
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color));
|
||||
stroke.put_width(_shapeObject.get_stroke().get_width());
|
||||
stroke.asc_putPrstDash(_shapeObject.get_stroke().asc_getPrstDash());
|
||||
}
|
||||
|
||||
shape.put_stroke(stroke);
|
||||
api.ShapeApply(shape);
|
||||
}
|
||||
}
|
||||
|
||||
onBorderSize(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
const shape = new Asc.asc_CShapeProperty();
|
||||
const stroke = new Asc.asc_CStroke();
|
||||
|
||||
const _borderColor = this.props.storeShapeSettings.borderColorView;
|
||||
|
||||
if (value < 0.01) {
|
||||
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
|
||||
} else {
|
||||
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
|
||||
if (_borderColor == 'transparent')
|
||||
stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29}));
|
||||
else
|
||||
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor)));
|
||||
stroke.put_width(value * 25.4 / 72.0);
|
||||
}
|
||||
|
||||
shape.put_stroke(stroke);
|
||||
api.ShapeApply(shape);
|
||||
|
||||
this.props.storeShapeSettings.initBorderColorView(this.props.storeFocusObjects.shapeObject);
|
||||
}
|
||||
|
||||
onOpacity(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
let fill = new Asc.asc_CShapeFill(),
|
||||
shape = new Asc.asc_CShapeProperty();
|
||||
|
||||
fill.put_transparent(parseInt(value * 2.55));
|
||||
shape.put_fill(fill);
|
||||
api.ShapeApply(shape);
|
||||
}
|
||||
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditShape
|
||||
|
@ -88,9 +170,13 @@ class EditShapeController extends Component {
|
|||
onReorder={this.onReorder}
|
||||
onAlign={this.onAlign}
|
||||
onRemoveShape={this.onRemoveShape}
|
||||
onFillColor={this.onFillColor}
|
||||
onBorderColor={this.onBorderColor}
|
||||
onBorderSize={this.onBorderSize}
|
||||
onOpacity={this.onOpacity}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default EditShapeController;
|
||||
export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController));
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
||||
];
|
||||
|
|
|
@ -8,18 +8,31 @@ import {Device} from '../../../../../common/mobile/utils/device';
|
|||
const EditShape = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const canFill = props.storeFocusObjects.shapeObject.get_CanFill();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
<ListItem title={_t.textStyle} link="/style-shape/"></ListItem>
|
||||
<ListItem title={_t.textReplace} link="/replace-shape/" routeProps={{
|
||||
{canFill ?
|
||||
<ListItem title={_t.textStyle} link="/edit-style-shape/" routeProps={{
|
||||
onFillColor: props.onFillColor,
|
||||
onBorderSize: props.onBorderSize,
|
||||
onBorderColor: props.onBorderColor,
|
||||
onOpacity: props.onOpacity
|
||||
}}></ListItem>
|
||||
:
|
||||
<ListItem title={_t.textStyle} link="/edit-style-shape-no-fill/" routeProps={{
|
||||
onBorderSize: props.onBorderSize,
|
||||
onBorderColor: props.onBorderColor
|
||||
}}></ListItem>
|
||||
}
|
||||
<ListItem title={_t.textReplace} link="/edit-replace-shape/" routeProps={{
|
||||
onReplace: props.onReplace
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textReorder} link="/reorder-shape/" routeProps={{
|
||||
<ListItem title={_t.textReorder} link="/edit-reorder-shape/" routeProps={{
|
||||
onReorder: props.onReorder
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textAlign} link="/align-shape/" routeProps={{
|
||||
<ListItem title={_t.textAlign} link="/edit-align-shape/" routeProps={{
|
||||
onAlign: props.onAlign
|
||||
}}></ListItem>
|
||||
</List>
|
||||
|
@ -37,6 +50,7 @@ const PaletteFill = inject("storeFocusObjects", "storeShapeSettings", "storePale
|
|||
const shapeObject = props.storeFocusObjects.shapeObject;
|
||||
const curFillColor = storeShapeSettings.fillColor ? storeShapeSettings.fillColor : storeShapeSettings.getFillColor(shapeObject);
|
||||
const customColors = props.storePalette.customColors;
|
||||
|
||||
const changeColor = (color, effectId, effectValue) => {
|
||||
if (color !== 'empty') {
|
||||
if (effectId !==undefined ) {
|
||||
|
@ -52,6 +66,7 @@ const PaletteFill = inject("storeFocusObjects", "storeShapeSettings", "storePale
|
|||
props.f7router.navigate('/edit-shape-custom-fill-color/');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
|
||||
|
@ -69,10 +84,10 @@ const PageStyle = props => {
|
|||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeShapeSettings = props.storeShapeSettings;
|
||||
const shapeObject = props.storeFocusObjects.shapeObject;
|
||||
|
||||
const stroke = shapeObject.get_stroke();
|
||||
|
||||
|
||||
// Init border size
|
||||
|
||||
const borderSizeTransform = storeShapeSettings.borderSizeTransform();
|
||||
const borderSize = stroke.get_width() * 72.0 / 25.4;
|
||||
const borderType = stroke.get_type();
|
||||
|
@ -80,16 +95,18 @@ const PageStyle = props => {
|
|||
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
|
||||
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
|
||||
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
|
||||
|
||||
|
||||
// Init border color
|
||||
|
||||
const borderColor = !storeShapeSettings.borderColorView ? storeShapeSettings.initBorderColorView(shapeObject) : storeShapeSettings.borderColorView;
|
||||
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
|
||||
|
||||
|
||||
// Init opacity
|
||||
|
||||
const transparent = shapeObject.get_fill().asc_getTransparent();
|
||||
const opacity = transparent !== null && transparent !== undefined ? transparent / 2.55 : 100;
|
||||
const [stateOpacity, setOpacity] = useState(Math.round(opacity));
|
||||
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar backLink={_t.textBack}>
|
||||
|
@ -148,6 +165,81 @@ const PageStyle = props => {
|
|||
)
|
||||
};
|
||||
|
||||
const PageCustomFillColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
let fillColor = props.storeShapeSettings.fillColor;
|
||||
|
||||
if (typeof fillColor === 'object') {
|
||||
fillColor = fillColor.color;
|
||||
}
|
||||
|
||||
const onAddNewColor = (colors, color) => {
|
||||
props.storePalette.changeCustomColors(colors);
|
||||
props.onFillColor(color);
|
||||
props.storeShapeSettings.setFillColor(color);
|
||||
props.f7router.back();
|
||||
};
|
||||
|
||||
return(
|
||||
<Page>
|
||||
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageStyleNoFill = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeShapeSettings = props.storeShapeSettings;
|
||||
const shapeObject = props.storeFocusObjects.shapeObject;
|
||||
const stroke = shapeObject.get_stroke();
|
||||
|
||||
// Init border size
|
||||
|
||||
const borderSizeTransform = storeShapeSettings.borderSizeTransform();
|
||||
const borderSize = stroke.get_width() * 72.0 / 25.4;
|
||||
const borderType = stroke.get_type();
|
||||
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
|
||||
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
|
||||
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
|
||||
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
|
||||
|
||||
// Init border color
|
||||
|
||||
const borderColor = !storeShapeSettings.borderColorView ? storeShapeSettings.initBorderColorView(shapeObject) : storeShapeSettings.borderColorView;
|
||||
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar backLink={_t.textBack} title={_t.textBorder}></Navbar>
|
||||
<List>
|
||||
<ListItem>
|
||||
<div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
|
||||
<div slot='inner' style={{width: '100%'}}>
|
||||
<Range min="0" max="7" step="1" value={stateBorderSize}
|
||||
onRangeChange={(value) => {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}}
|
||||
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
|
||||
></Range>
|
||||
</div>
|
||||
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
||||
</div>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textColor} link='/edit-shape-border-color/' routeProps={{
|
||||
onBorderColor: props.onBorderColor
|
||||
}}>
|
||||
<span className="color-preview"
|
||||
slot="after"
|
||||
style={{ background: displayBorderColor}}
|
||||
></span>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageReplace = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
@ -241,16 +333,79 @@ const PageAlign = props => {
|
|||
)
|
||||
}
|
||||
|
||||
const PageBorderColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const borderColor = props.storeShapeSettings.borderColorView;
|
||||
const customColors = props.storePalette.customColors;
|
||||
|
||||
const changeColor = (color, effectId, effectValue) => {
|
||||
if (color !== 'empty') {
|
||||
if (effectId !==undefined ) {
|
||||
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
|
||||
props.onBorderColor(newColor);
|
||||
props.storeShapeSettings.setBorderColor(newColor);
|
||||
} else {
|
||||
props.onBorderColor(color);
|
||||
props.storeShapeSettings.setBorderColor(color);
|
||||
}
|
||||
} else {
|
||||
// open custom color menu
|
||||
props.f7router.navigate('/edit-shape-custom-border-color/');
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textColor} backLink={_t.textBack} />
|
||||
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
|
||||
<List>
|
||||
<ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-border-color/'} routeProps={{
|
||||
onBorderColor: props.onBorderColor
|
||||
}}></ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageCustomBorderColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
let borderColor = props.storeShapeSettings.borderColorView;
|
||||
if (typeof borderColor === 'object') {
|
||||
borderColor = borderColor.color;
|
||||
}
|
||||
const onAddNewColor = (colors, color) => {
|
||||
props.storePalette.changeCustomColors(colors);
|
||||
props.onBorderColor(color);
|
||||
props.storeShapeSettings.setBorderColor(color);
|
||||
props.f7router.back();
|
||||
};
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const EditShapeContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(EditShape));
|
||||
const PageShapeStyle = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyle));
|
||||
const PageShapeStyleNoFill = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyleNoFill));
|
||||
const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor));
|
||||
const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
|
||||
const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
|
||||
const PageAlignContainer = inject("storeFocusObjects")(observer(PageAlign));
|
||||
const PageShapeBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageBorderColor));
|
||||
const PageShapeCustomBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageCustomBorderColor));
|
||||
|
||||
export {
|
||||
EditShapeContainer as EditShape,
|
||||
PageShapeStyle,
|
||||
PageShapeStyleNoFill,
|
||||
PageReplaceContainer,
|
||||
PageReorderContainer,
|
||||
PageAlignContainer
|
||||
PageAlignContainer,
|
||||
PageShapeBorderColor,
|
||||
PageShapeCustomBorderColor,
|
||||
PageShapeCustomFillColor
|
||||
}
|
Loading…
Reference in a new issue