236 lines
6.9 KiB
JavaScript
236 lines
6.9 KiB
JavaScript
import {action, observable, computed, makeObservable} from 'mobx';
|
|
|
|
export class storeShapeSettings {
|
|
constructor() {
|
|
makeObservable(this, {
|
|
fillColor: observable,
|
|
borderColorView: observable,
|
|
setFillColor: action,
|
|
getFillColor: action,
|
|
setBorderColor: action,
|
|
initBorderColorView: action
|
|
});
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
// Fill Color
|
|
|
|
fillColor = undefined;
|
|
|
|
setFillColor (color) {
|
|
this.fillColor = color;
|
|
}
|
|
|
|
getFillColor (shapeObject) {
|
|
let fill = shapeObject.asc_getFill();
|
|
const fillType = fill.asc_getType();
|
|
let color = 'transparent';
|
|
|
|
if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
|
|
fill = fill.get_fill();
|
|
const sdkColor = fill.asc_getColor();
|
|
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
|
|
|
|
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)];
|
|
}
|
|
}
|
|
}
|
|
} |