406 lines
14 KiB
JavaScript
406 lines
14 KiB
JavaScript
import React, {Component} from 'react';
|
|
import { f7 } from 'framework7-react';
|
|
import {Device} from '../../../../../common/mobile/utils/device';
|
|
import {observer, inject} from "mobx-react";
|
|
|
|
import { EditChart } from '../../view/edit/EditChart';
|
|
|
|
class EditChartController extends Component {
|
|
constructor (props) {
|
|
super(props);
|
|
this.onRemoveChart = this.onRemoveChart.bind(this);
|
|
this.onType = this.onType.bind(this);
|
|
this.onStyle = this.onStyle.bind(this);
|
|
this.onBorderColor = this.onBorderColor.bind(this);
|
|
this.onBorderSize = this.onBorderSize.bind(this);
|
|
this.onVerAxisMinValue = this.onVerAxisMinValue.bind(this);
|
|
this.onVerAxisMaxValue = this.onVerAxisMaxValue.bind(this);
|
|
this.onVerAxisCrossType = this.onVerAxisCrossType.bind(this);
|
|
this.onVerAxisCrossValue = this.onVerAxisCrossValue.bind(this);
|
|
this.onVerAxisDisplayUnits = this.onVerAxisDisplayUnits.bind(this);
|
|
this.onVerAxisReverse = this.onVerAxisReverse.bind(this);
|
|
this.onVerAxisTickMajor = this.onVerAxisTickMajor.bind(this);
|
|
this.onVerAxisTickMinor = this.onVerAxisTickMinor.bind(this);
|
|
this.onVerAxisLabelPos = this.onVerAxisLabelPos.bind(this);
|
|
this.onHorAxisCrossType = this.onHorAxisCrossType.bind(this);
|
|
this.onHorAxisCrossValue = this.onHorAxisCrossValue.bind(this);
|
|
this.onHorAxisPos = this.onHorAxisPos.bind(this);
|
|
this.onHorAxisReverse = this.onHorAxisReverse.bind(this);
|
|
this.onHorAxisTickMajor = this.onHorAxisTickMajor.bind(this);
|
|
this.onHorAxisTickMinor = this.onHorAxisTickMinor.bind(this);
|
|
this.onHorAxisLabelPos = this.onHorAxisLabelPos.bind(this);
|
|
|
|
const type = props.storeFocusObjects.chartObject.get_ChartProperties().getType();
|
|
if (type==Asc.c_oAscChartTypeSettings.comboBarLine ||
|
|
type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
|
|
type==Asc.c_oAscChartTypeSettings.comboAreaBar ||
|
|
type==Asc.c_oAscChartTypeSettings.comboCustom) {
|
|
props.storeChartSettings.clearChartStyles();
|
|
} else {
|
|
const api = Common.EditorApi.get();
|
|
props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(type));
|
|
}
|
|
}
|
|
|
|
closeModal() {
|
|
if (Device.phone) {
|
|
f7.sheet.close('#edit-sheet', true);
|
|
} else {
|
|
f7.popover.close('#edit-popover');
|
|
}
|
|
};
|
|
|
|
onRemoveChart() {
|
|
const api = Common.EditorApi.get();
|
|
api.asc_Remove();
|
|
this.closeModal();
|
|
}
|
|
|
|
onStyle(type) {
|
|
const api = Common.EditorApi.get();
|
|
let image = new Asc.asc_CImgProperty(),
|
|
chart = this.props.storeFocusObjects.chartObject.get_ChartProperties();
|
|
|
|
chart.putStyle(type);
|
|
image.put_ChartProperties(chart);
|
|
|
|
api.asc_setGraphicObjectProps(image);
|
|
|
|
}
|
|
|
|
onType(type) {
|
|
const api = Common.EditorApi.get();
|
|
let image = new Asc.asc_CImgProperty(),
|
|
chart = this.props.storeFocusObjects.chartObject.get_ChartProperties();
|
|
|
|
chart.changeType(type);
|
|
image.put_ChartProperties(chart);
|
|
|
|
api.asc_setGraphicObjectProps(image);
|
|
|
|
// Force update styles
|
|
this.props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(chart.getType()));
|
|
|
|
// me.updateAxisProps(type);
|
|
}
|
|
|
|
onFillColor(color) {
|
|
const api = Common.EditorApi.get();
|
|
let image = new Asc.asc_CImgProperty(),
|
|
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);
|
|
image.put_ShapeProperties(shape);
|
|
|
|
api.asc_setGraphicObjectProps(image);
|
|
}
|
|
|
|
onBorderColor(color) {
|
|
const api = Common.EditorApi.get();
|
|
const currentShape = this.props.storeFocusObjects.shapeObject.get_ShapeProperties();
|
|
let image = new Asc.asc_CImgProperty(),
|
|
shape = new Asc.asc_CShapeProperty(),
|
|
stroke = new Asc.asc_CStroke();
|
|
|
|
if(currentShape && currentShape.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
|
|
|
|
if (currentShape.get_stroke().get_width() < 0.01) {
|
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
|
|
} else {
|
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
|
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color));
|
|
stroke.put_width(currentShape.get_stroke().get_width());
|
|
stroke.asc_putPrstDash(currentShape.get_stroke().asc_getPrstDash());
|
|
}
|
|
|
|
shape.put_stroke(stroke);
|
|
image.put_ShapeProperties(shape);
|
|
|
|
api.asc_setGraphicObjectProps(image);
|
|
}
|
|
}
|
|
|
|
onBorderSize(value) {
|
|
const api = Common.EditorApi.get();
|
|
const image = new Asc.asc_CImgProperty();
|
|
const shape = new Asc.asc_CShapeProperty();
|
|
const stroke = new Asc.asc_CStroke();
|
|
|
|
const _borderColor = this.props.storeChartSettings.borderColor;
|
|
|
|
if (value < 0.01) {
|
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
|
|
} else {
|
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
|
|
if (_borderColor == 'transparent')
|
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29}));
|
|
else
|
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor)));
|
|
stroke.put_width(value * 25.4 / 72.0);
|
|
}
|
|
|
|
shape.put_stroke(stroke);
|
|
image.put_ShapeProperties(shape);
|
|
|
|
api.asc_setGraphicObjectProps(image);
|
|
this.props.storeChartSettings.initBorderColor(this.props.storeFocusObjects.shapeObject.get_ShapeProperties()); // when select STROKE_NONE or change from STROKE_NONE to STROKE_COLOR
|
|
}
|
|
|
|
onReorder(type) {
|
|
const api = Common.EditorApi.get();
|
|
let ascType;
|
|
|
|
if (type == 'all-up') {
|
|
ascType = Asc.c_oAscDrawingLayerType.BringToFront;
|
|
} else if (type == 'all-down') {
|
|
ascType = Asc.c_oAscDrawingLayerType.SendToBack;
|
|
} else if (type == 'move-up') {
|
|
ascType = Asc.c_oAscDrawingLayerType.BringForward;
|
|
} else {
|
|
ascType = Asc.c_oAscDrawingLayerType.SendBackward;
|
|
}
|
|
|
|
api.asc_setSelectedDrawingObjectLayer(ascType);
|
|
}
|
|
|
|
setLayoutProperty(propertyMethod, value) {
|
|
const api = Common.EditorApi.get();
|
|
let chartObject = api.asc_getChartObject();
|
|
|
|
if (chartObject && value) {
|
|
|
|
chartObject[propertyMethod](+value);
|
|
|
|
if ("putDataLabelsPos" == propertyMethod && +value != 0) {
|
|
chartObject["putShowVal"](true);
|
|
}
|
|
|
|
api.asc_editChartDrawingObject(chartObject);
|
|
}
|
|
}
|
|
|
|
getVerticalAxisProp() {
|
|
const api = Common.EditorApi.get();
|
|
let chartObject = api.asc_getChartObject(),
|
|
verAxisProps = chartObject.getVertAxisProps();
|
|
|
|
return (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartObject.getHorAxisProps();
|
|
}
|
|
|
|
setVerticalAxisProp(axisProps) {
|
|
const api = Common.EditorApi.get();
|
|
let chartObject = api.asc_getChartObject(),
|
|
verAxisProps = chartObject.getVertAxisProps();
|
|
|
|
if (chartObject) {
|
|
chartObject[(verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? 'putVertAxisProps' : 'putHorAxisProps'](axisProps);
|
|
api.asc_editChartDrawingObject(chartObject);
|
|
}
|
|
}
|
|
|
|
onVerAxisMinValue(value) {
|
|
let axisProps = this.getVerticalAxisProp(),
|
|
axisRule = !value ? Asc.c_oAscValAxisRule.auto : Asc.c_oAscValAxisRule.fixed;
|
|
|
|
axisProps.putMinValRule(axisRule);
|
|
|
|
if (axisRule == Asc.c_oAscValAxisRule.fixed) {
|
|
axisProps.putMinVal(+value);
|
|
}
|
|
|
|
this.setVerticalAxisProp(axisProps);
|
|
}
|
|
|
|
onVerAxisMaxValue(value) {
|
|
let axisProps = this.getVerticalAxisProp(),
|
|
axisRule = !value ? Asc.c_oAscValAxisRule.auto : Asc.c_oAscValAxisRule.fixed;
|
|
|
|
axisProps.putMaxValRule(axisRule);
|
|
|
|
if (axisRule == Asc.c_oAscValAxisRule.fixed) {
|
|
axisProps.putMaxVal(+value);
|
|
}
|
|
|
|
this.setVerticalAxisProp(axisProps);
|
|
}
|
|
|
|
onVerAxisCrossType(value) {
|
|
let axisProps = this.getVerticalAxisProp();
|
|
|
|
axisProps.putCrossesRule(+value);
|
|
|
|
this.setVerticalAxisProp(axisProps);
|
|
}
|
|
|
|
onVerAxisCrossValue(value) {
|
|
let axisProps = this.getVerticalAxisProp();
|
|
|
|
axisProps.putCrossesRule(Asc.c_oAscCrossesRule.value);
|
|
axisProps.putCrosses(+value);
|
|
|
|
this.setVerticalAxisProp(axisProps);
|
|
}
|
|
|
|
onVerAxisDisplayUnits(value) {
|
|
let axisProps = this.getVerticalAxisProp();
|
|
|
|
axisProps.putDispUnitsRule(+value);
|
|
|
|
this.setVerticalAxisProp(axisProps);
|
|
}
|
|
|
|
onVerAxisReverse(value) {
|
|
let axisProps = this.getVerticalAxisProp();
|
|
|
|
axisProps.putInvertValOrder(value);
|
|
|
|
this.setVerticalAxisProp(axisProps);
|
|
}
|
|
|
|
onVerAxisTickMajor(value) {
|
|
let axisProps = this.getVerticalAxisProp();
|
|
|
|
axisProps.putMajorTickMark(+value);
|
|
|
|
this.setVerticalAxisProp(axisProps);
|
|
}
|
|
|
|
onVerAxisTickMinor(value) {
|
|
let axisProps = this.getVerticalAxisProp();
|
|
|
|
axisProps.putMinorTickMark(+value);
|
|
|
|
this.setVerticalAxisProp(axisProps);
|
|
}
|
|
|
|
onVerAxisLabelPos(value) {
|
|
let axisProps = this.getVerticalAxisProp();
|
|
|
|
axisProps.putTickLabelsPos(+value);
|
|
|
|
this.setVerticalAxisProp(axisProps);
|
|
}
|
|
|
|
// Horizontal
|
|
|
|
getHorizontalAxisProp() {
|
|
const api = Common.EditorApi.get();
|
|
let chartObject = api.asc_getChartObject(),
|
|
verHorProps = chartObject.getHorAxisProps();
|
|
|
|
return (verHorProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartObject.getVertAxisProps() : verHorProps;
|
|
}
|
|
|
|
setHorizontalAxisProp(axisProps) {
|
|
const api = Common.EditorApi.get();
|
|
let chartObject = api.asc_getChartObject(),
|
|
verAxisProps = chartObject.getHorAxisProps();
|
|
|
|
if (chartObject) {
|
|
chartObject[(verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? 'putVertAxisProps' : 'putHorAxisProps'](axisProps);
|
|
api.asc_editChartDrawingObject(chartObject);
|
|
}
|
|
}
|
|
|
|
onHorAxisCrossType(value) {
|
|
let axisProps = this.getHorizontalAxisProp();
|
|
|
|
axisProps.putCrossesRule(+value);
|
|
|
|
this.setHorizontalAxisProp(axisProps);
|
|
}
|
|
|
|
onHorAxisCrossValue(value) {
|
|
let axisProps = this.getHorizontalAxisProp();
|
|
|
|
axisProps.putCrossesRule(Asc.c_oAscCrossesRule.value);
|
|
axisProps.putCrosses(+value);
|
|
|
|
this.setHorizontalAxisProp(axisProps);
|
|
}
|
|
|
|
onHorAxisPos(value) {
|
|
let axisProps = this.getHorizontalAxisProp();
|
|
|
|
axisProps.putLabelsPosition(+value);
|
|
|
|
this.setHorizontalAxisProp(axisProps);
|
|
}
|
|
|
|
onHorAxisReverse(value) {
|
|
let axisProps = this.getHorizontalAxisProp();
|
|
|
|
axisProps.putInvertCatOrder(value);
|
|
|
|
this.setHorizontalAxisProp(axisProps);
|
|
}
|
|
|
|
onHorAxisTickMajor(value) {
|
|
let axisProps = this.getHorizontalAxisProp();
|
|
|
|
axisProps.putMajorTickMark(+value);
|
|
|
|
this.setHorizontalAxisProp(axisProps);
|
|
}
|
|
|
|
onHorAxisTickMinor(value) {
|
|
let axisProps = this.getHorizontalAxisProp();
|
|
|
|
axisProps.putMinorTickMark(+value);
|
|
|
|
this.setHorizontalAxisProp(axisProps);
|
|
}
|
|
|
|
onHorAxisLabelPos(value) {
|
|
let axisProps = this.getHorizontalAxisProp();
|
|
|
|
axisProps.putTickLabelsPos(+value);
|
|
|
|
this.setHorizontalAxisProp(axisProps);
|
|
}
|
|
|
|
render () {
|
|
return (
|
|
<EditChart
|
|
onReorder={this.onReorder}
|
|
onBorderSize={this.onBorderSize}
|
|
onBorderColor={this.onBorderColor}
|
|
onFillColor={this.onFillColor}
|
|
onType={this.onType}
|
|
onStyle={this.onStyle}
|
|
onRemoveChart={this.onRemoveChart}
|
|
setLayoutProperty={this.setLayoutProperty}
|
|
onVerAxisMinValue={this.onVerAxisMinValue}
|
|
onVerAxisMaxValue={this.onVerAxisMaxValue}
|
|
onVerAxisCrossType={this.onVerAxisCrossType}
|
|
onVerAxisCrossValue={this.onVerAxisCrossValue}
|
|
onVerAxisDisplayUnits={this.onVerAxisDisplayUnits}
|
|
onVerAxisReverse={this.onVerAxisReverse}
|
|
onVerAxisTickMajor={this.onVerAxisTickMajor}
|
|
onVerAxisTickMinor={this.onVerAxisTickMinor}
|
|
onVerAxisLabelPos={this.onVerAxisLabelPos}
|
|
getHorizontalAxisProp={this.getHorizontalAxisProp}
|
|
setHorizontalAxisProp={this.setHorizontalAxisProp}
|
|
onHorAxisCrossType={this.onHorAxisCrossType}
|
|
onHorAxisCrossValue={this.onHorAxisCrossValue}
|
|
onHorAxisPos={this.onHorAxisPos}
|
|
onHorAxisReverse={this.onHorAxisReverse}
|
|
onHorAxisTickMajor={this.onHorAxisTickMajor}
|
|
onHorAxisTickMinor={this.onHorAxisTickMinor}
|
|
onHorAxisLabelPos={this.onHorAxisLabelPos}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default inject("storeChartSettings", "storeFocusObjects")(observer(EditChartController)); |