react-design-editor 0.0.50 → 0.0.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-design-editor.js +7739 -7114
- package/dist/react-design-editor.min.js +1 -1
- package/dist/react-design-editor.min.js.LICENSE.txt +2 -0
- package/lib/Canvas.d.ts +18 -18
- package/lib/Canvas.js +172 -172
- package/lib/CanvasObject.d.ts +10 -10
- package/lib/CanvasObject.js +96 -96
- package/lib/constants/code.d.ts +19 -19
- package/lib/constants/code.js +22 -22
- package/lib/constants/defaults.d.ts +38 -38
- package/lib/constants/defaults.js +69 -69
- package/lib/constants/index.d.ts +3 -3
- package/lib/constants/index.js +26 -26
- package/lib/handlers/AlignmentHandler.d.ts +18 -18
- package/lib/handlers/AlignmentHandler.js +58 -58
- package/lib/handlers/AnimationHandler.d.ts +50 -50
- package/lib/handlers/AnimationHandler.js +346 -346
- package/lib/handlers/ChartHandler.d.ts +8 -8
- package/lib/handlers/ChartHandler.js +8 -8
- package/lib/handlers/ContextmenuHandler.d.ts +28 -28
- package/lib/handlers/ContextmenuHandler.js +65 -65
- package/lib/handlers/CropHandler.d.ts +43 -43
- package/lib/handlers/CropHandler.js +261 -261
- package/lib/handlers/CustomHandler.d.ts +7 -7
- package/lib/handlers/CustomHandler.js +10 -10
- package/lib/handlers/DrawingHandler.d.ts +28 -28
- package/lib/handlers/DrawingHandler.js +318 -318
- package/lib/handlers/ElementHandler.d.ts +80 -80
- package/lib/handlers/ElementHandler.js +154 -154
- package/lib/handlers/EventHandler.d.ts +170 -170
- package/lib/handlers/EventHandler.js +880 -880
- package/lib/handlers/FiberHandler.d.ts +6 -6
- package/lib/handlers/FiberHandler.js +23 -23
- package/lib/handlers/GridHandler.d.ts +19 -19
- package/lib/handlers/GridHandler.js +77 -77
- package/lib/handlers/GuidelineHandler.d.ts +61 -61
- package/lib/handlers/GuidelineHandler.js +315 -315
- package/lib/handlers/Handler.d.ts +618 -618
- package/lib/handlers/Handler.js +1645 -1645
- package/lib/handlers/ImageHandler.d.ts +307 -307
- package/lib/handlers/ImageHandler.js +528 -528
- package/lib/handlers/InteractionHandler.d.ts +45 -45
- package/lib/handlers/InteractionHandler.js +168 -164
- package/lib/handlers/LinkHandler.d.ts +115 -115
- package/lib/handlers/LinkHandler.js +247 -247
- package/lib/handlers/NodeHandler.d.ts +50 -50
- package/lib/handlers/NodeHandler.js +274 -274
- package/lib/handlers/PortHandler.d.ts +22 -22
- package/lib/handlers/PortHandler.js +179 -179
- package/lib/handlers/ShortcutHandler.d.ts +119 -119
- package/lib/handlers/ShortcutHandler.js +151 -151
- package/lib/handlers/TooltipHandler.d.ts +33 -33
- package/lib/handlers/TooltipHandler.js +91 -91
- package/lib/handlers/TransactionHandler.d.ts +59 -59
- package/lib/handlers/TransactionHandler.js +137 -137
- package/lib/handlers/WorkareaHandler.d.ts +43 -43
- package/lib/handlers/WorkareaHandler.js +354 -354
- package/lib/handlers/ZoomHandler.d.ts +48 -48
- package/lib/handlers/ZoomHandler.js +143 -143
- package/lib/handlers/index.d.ts +23 -23
- package/lib/handlers/index.js +48 -48
- package/lib/index.d.ts +6 -6
- package/lib/index.js +20 -20
- package/lib/objects/Arrow.d.ts +2 -2
- package/lib/objects/Arrow.js +40 -40
- package/lib/objects/Chart.d.ts +10 -10
- package/lib/objects/Chart.js +117 -117
- package/lib/objects/CirclePort.d.ts +2 -2
- package/lib/objects/CirclePort.js +28 -28
- package/lib/objects/Cube.d.ts +5 -5
- package/lib/objects/Cube.js +71 -71
- package/lib/objects/CurvedLink.d.ts +2 -2
- package/lib/objects/CurvedLink.js +51 -51
- package/lib/objects/Element.d.ts +13 -13
- package/lib/objects/Element.js +77 -77
- package/lib/objects/Gif.d.ts +3 -3
- package/lib/objects/Gif.js +41 -41
- package/lib/objects/Iframe.d.ts +9 -9
- package/lib/objects/Iframe.js +63 -63
- package/lib/objects/Line.d.ts +2 -2
- package/lib/objects/Line.js +24 -24
- package/lib/objects/Link.d.ts +15 -15
- package/lib/objects/Link.js +107 -107
- package/lib/objects/Node.d.ts +59 -59
- package/lib/objects/Node.js +271 -271
- package/lib/objects/OrthogonalLink.d.ts +2 -2
- package/lib/objects/OrthogonalLink.js +54 -54
- package/lib/objects/Port.d.ts +12 -12
- package/lib/objects/Port.js +28 -28
- package/lib/objects/Svg.d.ts +12 -12
- package/lib/objects/Svg.js +93 -93
- package/lib/objects/Video.d.ts +14 -14
- package/lib/objects/Video.js +113 -113
- package/lib/objects/index.d.ts +15 -15
- package/lib/objects/index.js +32 -32
- package/lib/utils/ObjectUtil.d.ts +408 -408
- package/lib/utils/ObjectUtil.js +13 -13
- package/lib/utils/index.d.ts +1 -1
- package/lib/utils/index.js +13 -13
- package/package.json +1 -1
package/lib/objects/Arrow.js
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const fabric_1 = require("fabric");
|
|
4
|
-
const Arrow = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
|
|
5
|
-
type: 'arrow',
|
|
6
|
-
superType: 'drawing',
|
|
7
|
-
initialize(points, options) {
|
|
8
|
-
if (!points) {
|
|
9
|
-
const { x1, x2, y1, y2 } = options;
|
|
10
|
-
points = [x1, y1, x2, y2];
|
|
11
|
-
}
|
|
12
|
-
options = options || {};
|
|
13
|
-
this.callSuper('initialize', points, options);
|
|
14
|
-
},
|
|
15
|
-
_render(ctx) {
|
|
16
|
-
this.callSuper('_render', ctx);
|
|
17
|
-
ctx.save();
|
|
18
|
-
const xDiff = this.x2 - this.x1;
|
|
19
|
-
const yDiff = this.y2 - this.y1;
|
|
20
|
-
const angle = Math.atan2(yDiff, xDiff);
|
|
21
|
-
ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
|
|
22
|
-
ctx.rotate(angle);
|
|
23
|
-
ctx.beginPath();
|
|
24
|
-
// Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
|
|
25
|
-
ctx.moveTo(5, 0);
|
|
26
|
-
ctx.lineTo(-5, 5);
|
|
27
|
-
ctx.lineTo(-5, -5);
|
|
28
|
-
ctx.closePath();
|
|
29
|
-
ctx.fillStyle = this.stroke;
|
|
30
|
-
ctx.fill();
|
|
31
|
-
ctx.restore();
|
|
32
|
-
},
|
|
33
|
-
});
|
|
34
|
-
Arrow.fromObject = (options, callback) => {
|
|
35
|
-
const { x1, x2, y1, y2 } = options;
|
|
36
|
-
return callback(new Arrow([x1, y1, x2, y2], options));
|
|
37
|
-
};
|
|
38
|
-
// @ts-ignore
|
|
39
|
-
window.fabric.Arrow = Arrow;
|
|
40
|
-
exports.default = Arrow;
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const fabric_1 = require("fabric");
|
|
4
|
+
const Arrow = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
|
|
5
|
+
type: 'arrow',
|
|
6
|
+
superType: 'drawing',
|
|
7
|
+
initialize(points, options) {
|
|
8
|
+
if (!points) {
|
|
9
|
+
const { x1, x2, y1, y2 } = options;
|
|
10
|
+
points = [x1, y1, x2, y2];
|
|
11
|
+
}
|
|
12
|
+
options = options || {};
|
|
13
|
+
this.callSuper('initialize', points, options);
|
|
14
|
+
},
|
|
15
|
+
_render(ctx) {
|
|
16
|
+
this.callSuper('_render', ctx);
|
|
17
|
+
ctx.save();
|
|
18
|
+
const xDiff = this.x2 - this.x1;
|
|
19
|
+
const yDiff = this.y2 - this.y1;
|
|
20
|
+
const angle = Math.atan2(yDiff, xDiff);
|
|
21
|
+
ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
|
|
22
|
+
ctx.rotate(angle);
|
|
23
|
+
ctx.beginPath();
|
|
24
|
+
// Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
|
|
25
|
+
ctx.moveTo(5, 0);
|
|
26
|
+
ctx.lineTo(-5, 5);
|
|
27
|
+
ctx.lineTo(-5, -5);
|
|
28
|
+
ctx.closePath();
|
|
29
|
+
ctx.fillStyle = this.stroke;
|
|
30
|
+
ctx.fill();
|
|
31
|
+
ctx.restore();
|
|
32
|
+
},
|
|
33
|
+
});
|
|
34
|
+
Arrow.fromObject = (options, callback) => {
|
|
35
|
+
const { x1, x2, y1, y2 } = options;
|
|
36
|
+
return callback(new Arrow([x1, y1, x2, y2], options));
|
|
37
|
+
};
|
|
38
|
+
// @ts-ignore
|
|
39
|
+
window.fabric.Arrow = Arrow;
|
|
40
|
+
exports.default = Arrow;
|
package/lib/objects/Chart.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import * as echarts from 'echarts';
|
|
2
|
-
import { FabricElement } from '../utils';
|
|
3
|
-
export interface ChartObject extends FabricElement {
|
|
4
|
-
setSource: (source: echarts.EChartOption) => void;
|
|
5
|
-
setChartOption: (chartOption: echarts.EChartOption) => void;
|
|
6
|
-
chartOption: echarts.EChartOption;
|
|
7
|
-
instance: echarts.ECharts;
|
|
8
|
-
}
|
|
9
|
-
declare const Chart: any;
|
|
10
|
-
export default Chart;
|
|
1
|
+
import * as echarts from 'echarts';
|
|
2
|
+
import { FabricElement } from '../utils';
|
|
3
|
+
export interface ChartObject extends FabricElement {
|
|
4
|
+
setSource: (source: echarts.EChartOption) => void;
|
|
5
|
+
setChartOption: (chartOption: echarts.EChartOption) => void;
|
|
6
|
+
chartOption: echarts.EChartOption;
|
|
7
|
+
instance: echarts.ECharts;
|
|
8
|
+
}
|
|
9
|
+
declare const Chart: any;
|
|
10
|
+
export default Chart;
|
package/lib/objects/Chart.js
CHANGED
|
@@ -1,106 +1,106 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
-
}) : function(o, v) {
|
|
12
|
-
o["default"] = v;
|
|
13
|
-
});
|
|
14
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
-
if (mod && mod.__esModule) return mod;
|
|
16
|
-
var result = {};
|
|
17
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
-
__setModuleDefault(result, mod);
|
|
19
|
-
return result;
|
|
20
|
-
};
|
|
21
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
const echarts = __importStar(require("echarts"));
|
|
23
|
-
const fabric_1 = require("fabric");
|
|
24
|
-
const utils_1 = require("../utils");
|
|
25
|
-
const Chart = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
|
|
26
|
-
type: 'chart',
|
|
27
|
-
superType: 'element',
|
|
28
|
-
hasRotatingPoint: false,
|
|
29
|
-
initialize(chartOption, options) {
|
|
30
|
-
options = options || {};
|
|
31
|
-
this.callSuper('initialize', options);
|
|
32
|
-
this.set({
|
|
33
|
-
chartOption,
|
|
34
|
-
fill: 'rgba(255, 255, 255, 0)',
|
|
35
|
-
stroke: 'rgba(255, 255, 255, 0)',
|
|
36
|
-
});
|
|
37
|
-
},
|
|
38
|
-
setSource(source) {
|
|
39
|
-
if (typeof source === 'string') {
|
|
40
|
-
this.setChartOptionStr(source);
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
this.setChartOption(source);
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
setChartOptionStr(chartOptionStr) {
|
|
47
|
-
this.set({
|
|
48
|
-
chartOptionStr,
|
|
49
|
-
});
|
|
50
|
-
},
|
|
51
|
-
setChartOption(chartOption) {
|
|
52
|
-
this.set({
|
|
53
|
-
chartOption,
|
|
54
|
-
});
|
|
55
|
-
this.distroyChart();
|
|
56
|
-
this.createChart(chartOption);
|
|
57
|
-
},
|
|
58
|
-
createChart(chartOption) {
|
|
59
|
-
this.instance = echarts.init(this.element);
|
|
60
|
-
if (!chartOption) {
|
|
61
|
-
this.instance.setOption({
|
|
62
|
-
xAxis: {},
|
|
63
|
-
yAxis: {},
|
|
64
|
-
series: [
|
|
65
|
-
{
|
|
66
|
-
type: 'line',
|
|
67
|
-
data: [
|
|
68
|
-
[0, 1],
|
|
69
|
-
[1, 2],
|
|
70
|
-
[2, 3],
|
|
71
|
-
[3, 4],
|
|
72
|
-
],
|
|
73
|
-
},
|
|
74
|
-
],
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
else {
|
|
78
|
-
this.instance.setOption(chartOption);
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
distroyChart() {
|
|
82
|
-
if (this.instance) {
|
|
83
|
-
this.instance.dispose();
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
toObject(propertiesToInclude) {
|
|
87
|
-
return utils_1.toObject(this, propertiesToInclude, {
|
|
88
|
-
chartOption: this.get('chartOption'),
|
|
89
|
-
container: this.get('container'),
|
|
90
|
-
editable: this.get('editable'),
|
|
91
|
-
});
|
|
92
|
-
},
|
|
93
|
-
_render(ctx) {
|
|
94
|
-
this.callSuper('_render', ctx);
|
|
95
|
-
if (!this.instance) {
|
|
96
|
-
const { id, scaleX, scaleY, width, height, angle, editable, chartOption } = this;
|
|
97
|
-
const zoom = this.canvas.getZoom();
|
|
98
|
-
const left = this.calcCoords().tl.x;
|
|
99
|
-
const top = this.calcCoords().tl.y;
|
|
100
|
-
const padLeft = (width * scaleX * zoom - width) / 2;
|
|
101
|
-
const padTop = (height * scaleY * zoom - height) / 2;
|
|
102
|
-
this.element = fabric_1.fabric.util.makeElement('div', {
|
|
103
|
-
id: `${id}_container`,
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
+
const echarts = __importStar(require("echarts"));
|
|
23
|
+
const fabric_1 = require("fabric");
|
|
24
|
+
const utils_1 = require("../utils");
|
|
25
|
+
const Chart = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
|
|
26
|
+
type: 'chart',
|
|
27
|
+
superType: 'element',
|
|
28
|
+
hasRotatingPoint: false,
|
|
29
|
+
initialize(chartOption, options) {
|
|
30
|
+
options = options || {};
|
|
31
|
+
this.callSuper('initialize', options);
|
|
32
|
+
this.set({
|
|
33
|
+
chartOption,
|
|
34
|
+
fill: 'rgba(255, 255, 255, 0)',
|
|
35
|
+
stroke: 'rgba(255, 255, 255, 0)',
|
|
36
|
+
});
|
|
37
|
+
},
|
|
38
|
+
setSource(source) {
|
|
39
|
+
if (typeof source === 'string') {
|
|
40
|
+
this.setChartOptionStr(source);
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
this.setChartOption(source);
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
setChartOptionStr(chartOptionStr) {
|
|
47
|
+
this.set({
|
|
48
|
+
chartOptionStr,
|
|
49
|
+
});
|
|
50
|
+
},
|
|
51
|
+
setChartOption(chartOption) {
|
|
52
|
+
this.set({
|
|
53
|
+
chartOption,
|
|
54
|
+
});
|
|
55
|
+
this.distroyChart();
|
|
56
|
+
this.createChart(chartOption);
|
|
57
|
+
},
|
|
58
|
+
createChart(chartOption) {
|
|
59
|
+
this.instance = echarts.init(this.element);
|
|
60
|
+
if (!chartOption) {
|
|
61
|
+
this.instance.setOption({
|
|
62
|
+
xAxis: {},
|
|
63
|
+
yAxis: {},
|
|
64
|
+
series: [
|
|
65
|
+
{
|
|
66
|
+
type: 'line',
|
|
67
|
+
data: [
|
|
68
|
+
[0, 1],
|
|
69
|
+
[1, 2],
|
|
70
|
+
[2, 3],
|
|
71
|
+
[3, 4],
|
|
72
|
+
],
|
|
73
|
+
},
|
|
74
|
+
],
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
this.instance.setOption(chartOption);
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
distroyChart() {
|
|
82
|
+
if (this.instance) {
|
|
83
|
+
this.instance.dispose();
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
toObject(propertiesToInclude) {
|
|
87
|
+
return utils_1.toObject(this, propertiesToInclude, {
|
|
88
|
+
chartOption: this.get('chartOption'),
|
|
89
|
+
container: this.get('container'),
|
|
90
|
+
editable: this.get('editable'),
|
|
91
|
+
});
|
|
92
|
+
},
|
|
93
|
+
_render(ctx) {
|
|
94
|
+
this.callSuper('_render', ctx);
|
|
95
|
+
if (!this.instance) {
|
|
96
|
+
const { id, scaleX, scaleY, width, height, angle, editable, chartOption } = this;
|
|
97
|
+
const zoom = this.canvas.getZoom();
|
|
98
|
+
const left = this.calcCoords().tl.x;
|
|
99
|
+
const top = this.calcCoords().tl.y;
|
|
100
|
+
const padLeft = (width * scaleX * zoom - width) / 2;
|
|
101
|
+
const padTop = (height * scaleY * zoom - height) / 2;
|
|
102
|
+
this.element = fabric_1.fabric.util.makeElement('div', {
|
|
103
|
+
id: `${id}_container`,
|
|
104
104
|
style: `transform: rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom});
|
|
105
105
|
width: ${width}px;
|
|
106
106
|
height: ${height}px;
|
|
@@ -108,17 +108,17 @@ const Chart = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
|
|
|
108
108
|
top: ${top + padTop}px;
|
|
109
109
|
position: absolute;
|
|
110
110
|
user-select: ${editable ? 'none' : 'auto'};
|
|
111
|
-
pointer-events: ${editable ? 'none' : 'auto'};`,
|
|
112
|
-
});
|
|
113
|
-
this.createChart(chartOption);
|
|
114
|
-
const container = document.getElementById(this.container);
|
|
115
|
-
container.appendChild(this.element);
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
});
|
|
119
|
-
Chart.fromObject = (options, callback) => {
|
|
120
|
-
return callback(new Chart(options.chartOption, options));
|
|
121
|
-
};
|
|
122
|
-
// @ts-ignore
|
|
123
|
-
window.fabric.Chart = Chart;
|
|
124
|
-
exports.default = Chart;
|
|
111
|
+
pointer-events: ${editable ? 'none' : 'auto'};`,
|
|
112
|
+
});
|
|
113
|
+
this.createChart(chartOption);
|
|
114
|
+
const container = document.getElementById(this.container);
|
|
115
|
+
container.appendChild(this.element);
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
});
|
|
119
|
+
Chart.fromObject = (options, callback) => {
|
|
120
|
+
return callback(new Chart(options.chartOption, options));
|
|
121
|
+
};
|
|
122
|
+
// @ts-ignore
|
|
123
|
+
window.fabric.Chart = Chart;
|
|
124
|
+
exports.default = Chart;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const CirclePort: any;
|
|
2
|
-
export default CirclePort;
|
|
1
|
+
declare const CirclePort: any;
|
|
2
|
+
export default CirclePort;
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const fabric_1 = require("fabric");
|
|
4
|
-
const CirclePort = fabric_1.fabric.util.createClass(fabric_1.fabric.Circle, {
|
|
5
|
-
type: 'port',
|
|
6
|
-
superType: 'port',
|
|
7
|
-
initialize(options) {
|
|
8
|
-
options = options || {};
|
|
9
|
-
this.callSuper('initialize', options);
|
|
10
|
-
},
|
|
11
|
-
toObject() {
|
|
12
|
-
return fabric_1.fabric.util.object.extend(this.callSuper('toObject'), {
|
|
13
|
-
id: this.get('id'),
|
|
14
|
-
superType: this.get('superType'),
|
|
15
|
-
enabled: this.get('enabled'),
|
|
16
|
-
nodeId: this.get('nodeId'),
|
|
17
|
-
});
|
|
18
|
-
},
|
|
19
|
-
_render(ctx) {
|
|
20
|
-
this.callSuper('_render', ctx);
|
|
21
|
-
},
|
|
22
|
-
});
|
|
23
|
-
CirclePort.fromObject = (options, callback) => {
|
|
24
|
-
return callback(new CirclePort(options));
|
|
25
|
-
};
|
|
26
|
-
// @ts-ignore
|
|
27
|
-
window.fabric.CirclePort = CirclePort;
|
|
28
|
-
exports.default = CirclePort;
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const fabric_1 = require("fabric");
|
|
4
|
+
const CirclePort = fabric_1.fabric.util.createClass(fabric_1.fabric.Circle, {
|
|
5
|
+
type: 'port',
|
|
6
|
+
superType: 'port',
|
|
7
|
+
initialize(options) {
|
|
8
|
+
options = options || {};
|
|
9
|
+
this.callSuper('initialize', options);
|
|
10
|
+
},
|
|
11
|
+
toObject() {
|
|
12
|
+
return fabric_1.fabric.util.object.extend(this.callSuper('toObject'), {
|
|
13
|
+
id: this.get('id'),
|
|
14
|
+
superType: this.get('superType'),
|
|
15
|
+
enabled: this.get('enabled'),
|
|
16
|
+
nodeId: this.get('nodeId'),
|
|
17
|
+
});
|
|
18
|
+
},
|
|
19
|
+
_render(ctx) {
|
|
20
|
+
this.callSuper('_render', ctx);
|
|
21
|
+
},
|
|
22
|
+
});
|
|
23
|
+
CirclePort.fromObject = (options, callback) => {
|
|
24
|
+
return callback(new CirclePort(options));
|
|
25
|
+
};
|
|
26
|
+
// @ts-ignore
|
|
27
|
+
window.fabric.CirclePort = CirclePort;
|
|
28
|
+
exports.default = CirclePort;
|
package/lib/objects/Cube.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FabricObject } from '../utils';
|
|
2
|
-
export interface CubeObject extends FabricObject {
|
|
3
|
-
}
|
|
4
|
-
declare const Cube: any;
|
|
5
|
-
export default Cube;
|
|
1
|
+
import { FabricObject } from '../utils';
|
|
2
|
+
export interface CubeObject extends FabricObject {
|
|
3
|
+
}
|
|
4
|
+
declare const Cube: any;
|
|
5
|
+
export default Cube;
|
package/lib/objects/Cube.js
CHANGED
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const fabric_1 = require("fabric");
|
|
4
|
-
const Cube = fabric_1.fabric.util.createClass(fabric_1.fabric.Object, {
|
|
5
|
-
type: 'cube',
|
|
6
|
-
superType: 'shape',
|
|
7
|
-
initialize(options) {
|
|
8
|
-
options = options || {};
|
|
9
|
-
this.callSuper('initialize', options);
|
|
10
|
-
},
|
|
11
|
-
shadeColor(color, percent) {
|
|
12
|
-
color = color.substr(1);
|
|
13
|
-
const num = parseInt(color, 16);
|
|
14
|
-
const amt = Math.round(2.55 * percent);
|
|
15
|
-
const R = (num >> 16) + amt;
|
|
16
|
-
const G = ((num >> 8) & 0x00ff) + amt;
|
|
17
|
-
const B = (num & 0x0000ff) + amt;
|
|
18
|
-
return ('#' +
|
|
19
|
-
(0x1000000 +
|
|
20
|
-
(R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
|
|
21
|
-
(G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
|
|
22
|
-
(B < 255 ? (B < 1 ? 0 : B) : 255))
|
|
23
|
-
.toString(16)
|
|
24
|
-
.slice(1));
|
|
25
|
-
},
|
|
26
|
-
_render(ctx) {
|
|
27
|
-
const { width, height, fill } = this;
|
|
28
|
-
const wx = width / 2;
|
|
29
|
-
const wy = width / 2;
|
|
30
|
-
const h = height / 2;
|
|
31
|
-
const x = 0;
|
|
32
|
-
const y = wy;
|
|
33
|
-
ctx.beginPath();
|
|
34
|
-
ctx.moveTo(x, y);
|
|
35
|
-
ctx.lineTo(x - wx, y - wx * 0.5);
|
|
36
|
-
ctx.lineTo(x - wx, y - h - wx * 0.5);
|
|
37
|
-
ctx.lineTo(x, y - h * 1);
|
|
38
|
-
ctx.closePath();
|
|
39
|
-
ctx.fillStyle = this.shadeColor(fill, -10);
|
|
40
|
-
ctx.strokeStyle = fill;
|
|
41
|
-
ctx.stroke();
|
|
42
|
-
ctx.fill();
|
|
43
|
-
ctx.beginPath();
|
|
44
|
-
ctx.moveTo(x, y);
|
|
45
|
-
ctx.lineTo(x + wy, y - wy * 0.5);
|
|
46
|
-
ctx.lineTo(x + wy, y - h - wy * 0.5);
|
|
47
|
-
ctx.lineTo(x, y - h * 1);
|
|
48
|
-
ctx.closePath();
|
|
49
|
-
ctx.fillStyle = this.shadeColor(fill, 10);
|
|
50
|
-
ctx.strokeStyle = this.shadeColor(fill, 50);
|
|
51
|
-
ctx.stroke();
|
|
52
|
-
ctx.fill();
|
|
53
|
-
ctx.beginPath();
|
|
54
|
-
ctx.moveTo(x, y - h);
|
|
55
|
-
ctx.lineTo(x - wx, y - h - wx * 0.5);
|
|
56
|
-
ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));
|
|
57
|
-
ctx.lineTo(x + wy, y - h - wy * 0.5);
|
|
58
|
-
ctx.closePath();
|
|
59
|
-
ctx.fillStyle = this.shadeColor(fill, 20);
|
|
60
|
-
ctx.strokeStyle = this.shadeColor(fill, 60);
|
|
61
|
-
ctx.stroke();
|
|
62
|
-
ctx.fill();
|
|
63
|
-
ctx.restore();
|
|
64
|
-
},
|
|
65
|
-
});
|
|
66
|
-
Cube.fromObject = (options, callback) => {
|
|
67
|
-
return callback(new Cube(options));
|
|
68
|
-
};
|
|
69
|
-
// @ts-ignore
|
|
70
|
-
window.fabric.Cube = Cube;
|
|
71
|
-
exports.default = Cube;
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const fabric_1 = require("fabric");
|
|
4
|
+
const Cube = fabric_1.fabric.util.createClass(fabric_1.fabric.Object, {
|
|
5
|
+
type: 'cube',
|
|
6
|
+
superType: 'shape',
|
|
7
|
+
initialize(options) {
|
|
8
|
+
options = options || {};
|
|
9
|
+
this.callSuper('initialize', options);
|
|
10
|
+
},
|
|
11
|
+
shadeColor(color, percent) {
|
|
12
|
+
color = color.substr(1);
|
|
13
|
+
const num = parseInt(color, 16);
|
|
14
|
+
const amt = Math.round(2.55 * percent);
|
|
15
|
+
const R = (num >> 16) + amt;
|
|
16
|
+
const G = ((num >> 8) & 0x00ff) + amt;
|
|
17
|
+
const B = (num & 0x0000ff) + amt;
|
|
18
|
+
return ('#' +
|
|
19
|
+
(0x1000000 +
|
|
20
|
+
(R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
|
|
21
|
+
(G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
|
|
22
|
+
(B < 255 ? (B < 1 ? 0 : B) : 255))
|
|
23
|
+
.toString(16)
|
|
24
|
+
.slice(1));
|
|
25
|
+
},
|
|
26
|
+
_render(ctx) {
|
|
27
|
+
const { width, height, fill } = this;
|
|
28
|
+
const wx = width / 2;
|
|
29
|
+
const wy = width / 2;
|
|
30
|
+
const h = height / 2;
|
|
31
|
+
const x = 0;
|
|
32
|
+
const y = wy;
|
|
33
|
+
ctx.beginPath();
|
|
34
|
+
ctx.moveTo(x, y);
|
|
35
|
+
ctx.lineTo(x - wx, y - wx * 0.5);
|
|
36
|
+
ctx.lineTo(x - wx, y - h - wx * 0.5);
|
|
37
|
+
ctx.lineTo(x, y - h * 1);
|
|
38
|
+
ctx.closePath();
|
|
39
|
+
ctx.fillStyle = this.shadeColor(fill, -10);
|
|
40
|
+
ctx.strokeStyle = fill;
|
|
41
|
+
ctx.stroke();
|
|
42
|
+
ctx.fill();
|
|
43
|
+
ctx.beginPath();
|
|
44
|
+
ctx.moveTo(x, y);
|
|
45
|
+
ctx.lineTo(x + wy, y - wy * 0.5);
|
|
46
|
+
ctx.lineTo(x + wy, y - h - wy * 0.5);
|
|
47
|
+
ctx.lineTo(x, y - h * 1);
|
|
48
|
+
ctx.closePath();
|
|
49
|
+
ctx.fillStyle = this.shadeColor(fill, 10);
|
|
50
|
+
ctx.strokeStyle = this.shadeColor(fill, 50);
|
|
51
|
+
ctx.stroke();
|
|
52
|
+
ctx.fill();
|
|
53
|
+
ctx.beginPath();
|
|
54
|
+
ctx.moveTo(x, y - h);
|
|
55
|
+
ctx.lineTo(x - wx, y - h - wx * 0.5);
|
|
56
|
+
ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));
|
|
57
|
+
ctx.lineTo(x + wy, y - h - wy * 0.5);
|
|
58
|
+
ctx.closePath();
|
|
59
|
+
ctx.fillStyle = this.shadeColor(fill, 20);
|
|
60
|
+
ctx.strokeStyle = this.shadeColor(fill, 60);
|
|
61
|
+
ctx.stroke();
|
|
62
|
+
ctx.fill();
|
|
63
|
+
ctx.restore();
|
|
64
|
+
},
|
|
65
|
+
});
|
|
66
|
+
Cube.fromObject = (options, callback) => {
|
|
67
|
+
return callback(new Cube(options));
|
|
68
|
+
};
|
|
69
|
+
// @ts-ignore
|
|
70
|
+
window.fabric.Cube = Cube;
|
|
71
|
+
exports.default = Cube;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const CurvedLink: any;
|
|
2
|
-
export default CurvedLink;
|
|
1
|
+
declare const CurvedLink: any;
|
|
2
|
+
export default CurvedLink;
|