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,6 +1,6 @@
1
- import CustomHandler from './CustomHandler';
2
- declare class FiberHandler extends CustomHandler {
3
- protected initialze(): void;
4
- private mousedown;
5
- }
6
- export default FiberHandler;
1
+ import CustomHandler from './CustomHandler';
2
+ declare class FiberHandler extends CustomHandler {
3
+ protected initialze(): void;
4
+ private mousedown;
5
+ }
6
+ export default FiberHandler;
@@ -1,23 +1,23 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const CustomHandler_1 = __importDefault(require("./CustomHandler"));
7
- class FiberHandler extends CustomHandler_1.default {
8
- initialze() {
9
- this.handler.canvas.on('mouse:down', this.mousedown);
10
- }
11
- mousedown(opt) {
12
- const { subTargets } = opt;
13
- if (subTargets.length) {
14
- const target = subTargets[0];
15
- console.log(target);
16
- if (target.type === 'container') {
17
- }
18
- else if (target.type === 'coreContainer') {
19
- }
20
- }
21
- }
22
- }
23
- exports.default = FiberHandler;
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const CustomHandler_1 = __importDefault(require("./CustomHandler"));
7
+ class FiberHandler extends CustomHandler_1.default {
8
+ initialze() {
9
+ this.handler.canvas.on('mouse:down', this.mousedown);
10
+ }
11
+ mousedown(opt) {
12
+ const { subTargets } = opt;
13
+ if (subTargets.length) {
14
+ const target = subTargets[0];
15
+ console.log(target);
16
+ if (target.type === 'container') {
17
+ }
18
+ else if (target.type === 'coreContainer') {
19
+ }
20
+ }
21
+ }
22
+ }
23
+ exports.default = FiberHandler;
@@ -1,19 +1,19 @@
1
- import { fabric } from 'fabric';
2
- import Handler from './Handler';
3
- import { FabricObject } from '../utils';
4
- declare class GridHandler {
5
- handler?: Handler;
6
- constructor(handler: Handler);
7
- /**
8
- * Init grid
9
- *
10
- */
11
- initialize: () => void;
12
- /**
13
- * Set coords in grid
14
- * @param {(FabricObject | fabric.ActiveSelection)} target
15
- * @returns
16
- */
17
- setCoords: (target: FabricObject | fabric.ActiveSelection) => void;
18
- }
19
- export default GridHandler;
1
+ import { fabric } from 'fabric';
2
+ import Handler from './Handler';
3
+ import { FabricObject } from '../utils';
4
+ declare class GridHandler {
5
+ handler?: Handler;
6
+ constructor(handler: Handler);
7
+ /**
8
+ * Init grid
9
+ *
10
+ */
11
+ initialize: () => void;
12
+ /**
13
+ * Set coords in grid
14
+ * @param {(FabricObject | fabric.ActiveSelection)} target
15
+ * @returns
16
+ */
17
+ setCoords: (target: FabricObject | fabric.ActiveSelection) => void;
18
+ }
19
+ export default GridHandler;
@@ -1,77 +1,77 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const fabric_1 = require("fabric");
4
- class GridHandler {
5
- constructor(handler) {
6
- /**
7
- * Init grid
8
- *
9
- */
10
- this.initialize = () => {
11
- const { grid, lineColor, borderColor, enabled } = this.handler.gridOption;
12
- if (enabled && grid) {
13
- const width = 5000;
14
- const gridLength = width / grid;
15
- const lineOptions = {
16
- stroke: lineColor,
17
- selectable: false,
18
- evented: false,
19
- id: 'grid',
20
- };
21
- for (let i = 0; i < gridLength; i++) {
22
- const distance = i * grid;
23
- const fhorizontal = new fabric_1.fabric.Line([distance, -width, distance, width], lineOptions);
24
- const shorizontal = new fabric_1.fabric.Line([distance - width, -width, distance - width, width], lineOptions);
25
- this.handler.canvas.add(fhorizontal);
26
- this.handler.canvas.add(shorizontal);
27
- const fvertical = new fabric_1.fabric.Line([-width, distance - width, width, distance - width], lineOptions);
28
- const svertical = new fabric_1.fabric.Line([-width, distance, width, distance], lineOptions);
29
- this.handler.canvas.add(fvertical);
30
- this.handler.canvas.add(svertical);
31
- if (i % 5 === 0) {
32
- fhorizontal.set({ stroke: borderColor });
33
- shorizontal.set({ stroke: borderColor });
34
- fvertical.set({ stroke: borderColor });
35
- svertical.set({ stroke: borderColor });
36
- }
37
- }
38
- }
39
- };
40
- /**
41
- * Set coords in grid
42
- * @param {(FabricObject | fabric.ActiveSelection)} target
43
- * @returns
44
- */
45
- this.setCoords = (target) => {
46
- const { gridOption: { enabled, grid, snapToGrid }, } = this.handler;
47
- if (enabled && grid && snapToGrid) {
48
- if (target.type === 'activeSelection') {
49
- const activeSelection = target;
50
- activeSelection.set({
51
- left: Math.round(target.left / grid) * grid,
52
- top: Math.round(target.top / grid) * grid,
53
- });
54
- activeSelection.setCoords();
55
- activeSelection.getObjects().forEach((obj) => {
56
- if (obj.superType === 'node') {
57
- const left = target.left + obj.left + target.width / 2;
58
- const top = target.top + obj.top + target.height / 2;
59
- this.handler.portHandler.setCoords({ ...obj, left, top });
60
- }
61
- });
62
- return;
63
- }
64
- const obj = target;
65
- obj.set({
66
- left: Math.round(target.left / grid) * grid,
67
- top: Math.round(target.top / grid) * grid,
68
- });
69
- target.setCoords();
70
- this.handler.portHandler.setCoords(target);
71
- }
72
- };
73
- this.handler = handler;
74
- this.initialize();
75
- }
76
- }
77
- exports.default = GridHandler;
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const fabric_1 = require("fabric");
4
+ class GridHandler {
5
+ constructor(handler) {
6
+ /**
7
+ * Init grid
8
+ *
9
+ */
10
+ this.initialize = () => {
11
+ const { grid, lineColor, borderColor, enabled } = this.handler.gridOption;
12
+ if (enabled && grid) {
13
+ const width = 5000;
14
+ const gridLength = width / grid;
15
+ const lineOptions = {
16
+ stroke: lineColor,
17
+ selectable: false,
18
+ evented: false,
19
+ id: 'grid',
20
+ };
21
+ for (let i = 0; i < gridLength; i++) {
22
+ const distance = i * grid;
23
+ const fhorizontal = new fabric_1.fabric.Line([distance, -width, distance, width], lineOptions);
24
+ const shorizontal = new fabric_1.fabric.Line([distance - width, -width, distance - width, width], lineOptions);
25
+ this.handler.canvas.add(fhorizontal);
26
+ this.handler.canvas.add(shorizontal);
27
+ const fvertical = new fabric_1.fabric.Line([-width, distance - width, width, distance - width], lineOptions);
28
+ const svertical = new fabric_1.fabric.Line([-width, distance, width, distance], lineOptions);
29
+ this.handler.canvas.add(fvertical);
30
+ this.handler.canvas.add(svertical);
31
+ if (i % 5 === 0) {
32
+ fhorizontal.set({ stroke: borderColor });
33
+ shorizontal.set({ stroke: borderColor });
34
+ fvertical.set({ stroke: borderColor });
35
+ svertical.set({ stroke: borderColor });
36
+ }
37
+ }
38
+ }
39
+ };
40
+ /**
41
+ * Set coords in grid
42
+ * @param {(FabricObject | fabric.ActiveSelection)} target
43
+ * @returns
44
+ */
45
+ this.setCoords = (target) => {
46
+ const { gridOption: { enabled, grid, snapToGrid }, } = this.handler;
47
+ if (enabled && grid && snapToGrid) {
48
+ if (target.type === 'activeSelection') {
49
+ const activeSelection = target;
50
+ activeSelection.set({
51
+ left: Math.round(target.left / grid) * grid,
52
+ top: Math.round(target.top / grid) * grid,
53
+ });
54
+ activeSelection.setCoords();
55
+ activeSelection.getObjects().forEach((obj) => {
56
+ if (obj.superType === 'node') {
57
+ const left = target.left + obj.left + target.width / 2;
58
+ const top = target.top + obj.top + target.height / 2;
59
+ this.handler.portHandler.setCoords({ ...obj, left, top });
60
+ }
61
+ });
62
+ return;
63
+ }
64
+ const obj = target;
65
+ obj.set({
66
+ left: Math.round(target.left / grid) * grid,
67
+ top: Math.round(target.top / grid) * grid,
68
+ });
69
+ target.setCoords();
70
+ this.handler.portHandler.setCoords(target);
71
+ }
72
+ };
73
+ this.handler = handler;
74
+ this.initialize();
75
+ }
76
+ }
77
+ exports.default = GridHandler;
@@ -1,61 +1,61 @@
1
- import { FabricEvent, FabricObject } from '../utils';
2
- import Handler from './Handler';
3
- declare class GuidelineHandler {
4
- handler: Handler;
5
- verticalLines: {
6
- x?: number;
7
- y1?: number;
8
- y2?: number;
9
- }[];
10
- horizontalLines: {
11
- y?: number;
12
- x1?: number;
13
- x2?: number;
14
- }[];
15
- ctx: CanvasRenderingContext2D;
16
- viewportTransform: number[];
17
- aligningLineOffset: number;
18
- aligningLineMargin: number;
19
- aligningLineWidth: number;
20
- aligningLineColor: string;
21
- zoom: number;
22
- constructor(handler: Handler);
23
- /**
24
- * Initialize guideline handler
25
- *
26
- */
27
- initialize(): void;
28
- /**
29
- * Destroy guideline handler
30
- *
31
- * @author salgum1114
32
- */
33
- destroy(): void;
34
- /**
35
- * Before the render
36
- *
37
- * @param {FabricEvent} _opt
38
- */
39
- beforeRender: (_opt: FabricEvent) => void;
40
- /**
41
- * After the render
42
- *
43
- * @param {FabricEvent} _opt
44
- */
45
- afterRender: (_opt: FabricEvent) => void;
46
- drawVerticalLine: (coords: {
47
- x?: number;
48
- y1?: number;
49
- y2?: number;
50
- }) => void;
51
- drawHorizontalLine: (coords: {
52
- y?: number;
53
- x1?: number;
54
- x2?: number;
55
- }) => void;
56
- drawLine: (x1: number, y1: number, x2: number, y2: number) => void;
57
- isInRange: (v1: number, v2: number) => boolean;
58
- movingGuidelines: (target: FabricObject) => void;
59
- scalingGuidelines: (_target: FabricObject) => void;
60
- }
61
- export default GuidelineHandler;
1
+ import { FabricEvent, FabricObject } from '../utils';
2
+ import Handler from './Handler';
3
+ declare class GuidelineHandler {
4
+ handler: Handler;
5
+ verticalLines: {
6
+ x?: number;
7
+ y1?: number;
8
+ y2?: number;
9
+ }[];
10
+ horizontalLines: {
11
+ y?: number;
12
+ x1?: number;
13
+ x2?: number;
14
+ }[];
15
+ ctx: CanvasRenderingContext2D;
16
+ viewportTransform: number[];
17
+ aligningLineOffset: number;
18
+ aligningLineMargin: number;
19
+ aligningLineWidth: number;
20
+ aligningLineColor: string;
21
+ zoom: number;
22
+ constructor(handler: Handler);
23
+ /**
24
+ * Initialize guideline handler
25
+ *
26
+ */
27
+ initialize(): void;
28
+ /**
29
+ * Destroy guideline handler
30
+ *
31
+ * @author salgum1114
32
+ */
33
+ destroy(): void;
34
+ /**
35
+ * Before the render
36
+ *
37
+ * @param {FabricEvent} _opt
38
+ */
39
+ beforeRender: (_opt: FabricEvent) => void;
40
+ /**
41
+ * After the render
42
+ *
43
+ * @param {FabricEvent} _opt
44
+ */
45
+ afterRender: (_opt: FabricEvent) => void;
46
+ drawVerticalLine: (coords: {
47
+ x?: number;
48
+ y1?: number;
49
+ y2?: number;
50
+ }) => void;
51
+ drawHorizontalLine: (coords: {
52
+ y?: number;
53
+ x1?: number;
54
+ x2?: number;
55
+ }) => void;
56
+ drawLine: (x1: number, y1: number, x2: number, y2: number) => void;
57
+ isInRange: (v1: number, v2: number) => boolean;
58
+ movingGuidelines: (target: FabricObject) => void;
59
+ scalingGuidelines: (_target: FabricObject) => void;
60
+ }
61
+ export default GuidelineHandler;