react-design-editor 0.0.50 → 0.0.52

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.
Files changed (100) hide show
  1. package/dist/react-design-editor.js +7739 -7114
  2. package/dist/react-design-editor.min.js +1 -1
  3. package/dist/react-design-editor.min.js.LICENSE.txt +2 -0
  4. package/lib/Canvas.d.ts +18 -18
  5. package/lib/Canvas.js +172 -172
  6. package/lib/CanvasObject.d.ts +10 -10
  7. package/lib/CanvasObject.js +96 -96
  8. package/lib/constants/code.d.ts +19 -19
  9. package/lib/constants/code.js +22 -22
  10. package/lib/constants/defaults.d.ts +38 -38
  11. package/lib/constants/defaults.js +69 -69
  12. package/lib/constants/index.d.ts +3 -3
  13. package/lib/constants/index.js +26 -26
  14. package/lib/handlers/AlignmentHandler.d.ts +18 -18
  15. package/lib/handlers/AlignmentHandler.js +58 -58
  16. package/lib/handlers/AnimationHandler.d.ts +50 -50
  17. package/lib/handlers/AnimationHandler.js +346 -346
  18. package/lib/handlers/ChartHandler.d.ts +8 -8
  19. package/lib/handlers/ChartHandler.js +8 -8
  20. package/lib/handlers/ContextmenuHandler.d.ts +28 -28
  21. package/lib/handlers/ContextmenuHandler.js +65 -65
  22. package/lib/handlers/CropHandler.d.ts +43 -43
  23. package/lib/handlers/CropHandler.js +261 -261
  24. package/lib/handlers/CustomHandler.d.ts +7 -7
  25. package/lib/handlers/CustomHandler.js +10 -10
  26. package/lib/handlers/DrawingHandler.d.ts +28 -28
  27. package/lib/handlers/DrawingHandler.js +318 -318
  28. package/lib/handlers/ElementHandler.d.ts +80 -80
  29. package/lib/handlers/ElementHandler.js +154 -154
  30. package/lib/handlers/EventHandler.d.ts +170 -170
  31. package/lib/handlers/EventHandler.js +880 -880
  32. package/lib/handlers/FiberHandler.d.ts +6 -6
  33. package/lib/handlers/FiberHandler.js +23 -23
  34. package/lib/handlers/GridHandler.d.ts +19 -19
  35. package/lib/handlers/GridHandler.js +77 -77
  36. package/lib/handlers/GuidelineHandler.d.ts +61 -61
  37. package/lib/handlers/GuidelineHandler.js +315 -315
  38. package/lib/handlers/Handler.d.ts +618 -618
  39. package/lib/handlers/Handler.js +1645 -1645
  40. package/lib/handlers/ImageHandler.d.ts +307 -307
  41. package/lib/handlers/ImageHandler.js +528 -528
  42. package/lib/handlers/InteractionHandler.d.ts +45 -45
  43. package/lib/handlers/InteractionHandler.js +168 -164
  44. package/lib/handlers/LinkHandler.d.ts +115 -115
  45. package/lib/handlers/LinkHandler.js +247 -247
  46. package/lib/handlers/NodeHandler.d.ts +50 -50
  47. package/lib/handlers/NodeHandler.js +274 -274
  48. package/lib/handlers/PortHandler.d.ts +22 -22
  49. package/lib/handlers/PortHandler.js +179 -179
  50. package/lib/handlers/ShortcutHandler.d.ts +119 -119
  51. package/lib/handlers/ShortcutHandler.js +151 -151
  52. package/lib/handlers/TooltipHandler.d.ts +33 -33
  53. package/lib/handlers/TooltipHandler.js +91 -91
  54. package/lib/handlers/TransactionHandler.d.ts +59 -59
  55. package/lib/handlers/TransactionHandler.js +137 -137
  56. package/lib/handlers/WorkareaHandler.d.ts +43 -43
  57. package/lib/handlers/WorkareaHandler.js +354 -354
  58. package/lib/handlers/ZoomHandler.d.ts +48 -48
  59. package/lib/handlers/ZoomHandler.js +143 -143
  60. package/lib/handlers/index.d.ts +23 -23
  61. package/lib/handlers/index.js +48 -48
  62. package/lib/index.d.ts +6 -6
  63. package/lib/index.js +20 -20
  64. package/lib/objects/Arrow.d.ts +2 -2
  65. package/lib/objects/Arrow.js +40 -40
  66. package/lib/objects/Chart.d.ts +10 -10
  67. package/lib/objects/Chart.js +117 -117
  68. package/lib/objects/CirclePort.d.ts +2 -2
  69. package/lib/objects/CirclePort.js +28 -28
  70. package/lib/objects/Cube.d.ts +5 -5
  71. package/lib/objects/Cube.js +71 -71
  72. package/lib/objects/CurvedLink.d.ts +2 -2
  73. package/lib/objects/CurvedLink.js +51 -51
  74. package/lib/objects/Element.d.ts +13 -13
  75. package/lib/objects/Element.js +77 -77
  76. package/lib/objects/Gif.d.ts +3 -3
  77. package/lib/objects/Gif.js +41 -41
  78. package/lib/objects/Iframe.d.ts +9 -9
  79. package/lib/objects/Iframe.js +63 -63
  80. package/lib/objects/Line.d.ts +2 -2
  81. package/lib/objects/Line.js +24 -24
  82. package/lib/objects/Link.d.ts +15 -15
  83. package/lib/objects/Link.js +107 -107
  84. package/lib/objects/Node.d.ts +59 -59
  85. package/lib/objects/Node.js +271 -271
  86. package/lib/objects/OrthogonalLink.d.ts +2 -2
  87. package/lib/objects/OrthogonalLink.js +54 -54
  88. package/lib/objects/Port.d.ts +12 -12
  89. package/lib/objects/Port.js +28 -28
  90. package/lib/objects/Svg.d.ts +12 -12
  91. package/lib/objects/Svg.js +93 -93
  92. package/lib/objects/Video.d.ts +14 -14
  93. package/lib/objects/Video.js +113 -113
  94. package/lib/objects/index.d.ts +15 -15
  95. package/lib/objects/index.js +32 -32
  96. package/lib/utils/ObjectUtil.d.ts +408 -408
  97. package/lib/utils/ObjectUtil.js +13 -13
  98. package/lib/utils/index.d.ts +1 -1
  99. package/lib/utils/index.js +13 -13
  100. package/package.json +1 -1
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;