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,80 +1,80 @@
1
- import { fabric } from 'fabric';
2
- import Handler from './Handler';
3
- import { VideoObject } from '../objects/Video';
4
- import { ChartObject } from '../objects/Chart';
5
- import { IframeObject } from '../objects/Iframe';
6
- import { ElementObject } from '../objects/Element';
7
- export declare type ElementType = 'container' | 'script' | 'style';
8
- export declare type ElementObjectType = VideoObject | ChartObject | IframeObject | ElementObject;
9
- export interface ElementCode {
10
- html?: string;
11
- css?: string;
12
- js?: string;
13
- }
14
- declare class ElementHandler {
15
- handler?: Handler;
16
- constructor(handler: Handler);
17
- /**
18
- * Set element by id
19
- * @param {string} id
20
- * @param {*} source
21
- * @returns {void}
22
- */
23
- setById: (id: string, source: any) => void;
24
- /**
25
- * Set element
26
- * @param {ElementObjectType} obj
27
- * @param {*} source
28
- */
29
- set: (obj: ElementObjectType, source: any) => void;
30
- /**
31
- * Find element by id with type
32
- * @param {string} id
33
- * @param {ElementType} [type='container']
34
- * @returns
35
- */
36
- findById: (id: string, type?: ElementType) => HTMLElement;
37
- /**
38
- * Remove element
39
- * @param {HTMLElement} el
40
- * @returns
41
- */
42
- remove: (el: HTMLElement) => void;
43
- /**
44
- * Remove element by id
45
- * @param {string} id
46
- */
47
- removeById: (id: string) => void;
48
- /**
49
- * Remove element by ids
50
- * @param {string[]} ids
51
- */
52
- removeByIds: (ids: string[]) => void;
53
- /**
54
- * Set position
55
- * @param {HTMLElement} el
56
- * @param {number} left
57
- * @param {number} top
58
- * @returns
59
- */
60
- setPosition: (el: HTMLElement, obj: fabric.Object) => void;
61
- setPositionByOrigin: (el: HTMLElement, obj: fabric.Object, left: number, top: number) => void;
62
- /**
63
- * Set size
64
- * @param {HTMLElement} el
65
- * @param {number} width
66
- * @param {number} height
67
- * @returns
68
- */
69
- setSize: (el: HTMLElement, obj: fabric.Object) => void;
70
- /**
71
- * Set scale or angle
72
- * @param {HTMLElement} el
73
- * @param {number} scaleX
74
- * @param {number} scaleY
75
- * @param {number} angle
76
- * @returns
77
- */
78
- setScaleOrAngle: (el: HTMLElement, obj: fabric.Object) => void;
79
- }
80
- export default ElementHandler;
1
+ import { fabric } from 'fabric';
2
+ import Handler from './Handler';
3
+ import { VideoObject } from '../objects/Video';
4
+ import { ChartObject } from '../objects/Chart';
5
+ import { IframeObject } from '../objects/Iframe';
6
+ import { ElementObject } from '../objects/Element';
7
+ export declare type ElementType = 'container' | 'script' | 'style';
8
+ export declare type ElementObjectType = VideoObject | ChartObject | IframeObject | ElementObject;
9
+ export interface ElementCode {
10
+ html?: string;
11
+ css?: string;
12
+ js?: string;
13
+ }
14
+ declare class ElementHandler {
15
+ handler?: Handler;
16
+ constructor(handler: Handler);
17
+ /**
18
+ * Set element by id
19
+ * @param {string} id
20
+ * @param {*} source
21
+ * @returns {void}
22
+ */
23
+ setById: (id: string, source: any) => void;
24
+ /**
25
+ * Set element
26
+ * @param {ElementObjectType} obj
27
+ * @param {*} source
28
+ */
29
+ set: (obj: ElementObjectType, source: any) => void;
30
+ /**
31
+ * Find element by id with type
32
+ * @param {string} id
33
+ * @param {ElementType} [type='container']
34
+ * @returns
35
+ */
36
+ findById: (id: string, type?: ElementType) => HTMLElement;
37
+ /**
38
+ * Remove element
39
+ * @param {HTMLElement} el
40
+ * @returns
41
+ */
42
+ remove: (el: HTMLElement) => void;
43
+ /**
44
+ * Remove element by id
45
+ * @param {string} id
46
+ */
47
+ removeById: (id: string) => void;
48
+ /**
49
+ * Remove element by ids
50
+ * @param {string[]} ids
51
+ */
52
+ removeByIds: (ids: string[]) => void;
53
+ /**
54
+ * Set position
55
+ * @param {HTMLElement} el
56
+ * @param {number} left
57
+ * @param {number} top
58
+ * @returns
59
+ */
60
+ setPosition: (el: HTMLElement, obj: fabric.Object) => void;
61
+ setPositionByOrigin: (el: HTMLElement, obj: fabric.Object, left: number, top: number) => void;
62
+ /**
63
+ * Set size
64
+ * @param {HTMLElement} el
65
+ * @param {number} width
66
+ * @param {number} height
67
+ * @returns
68
+ */
69
+ setSize: (el: HTMLElement, obj: fabric.Object) => void;
70
+ /**
71
+ * Set scale or angle
72
+ * @param {HTMLElement} el
73
+ * @param {number} scaleX
74
+ * @param {number} scaleY
75
+ * @param {number} angle
76
+ * @returns
77
+ */
78
+ setScaleOrAngle: (el: HTMLElement, obj: fabric.Object) => void;
79
+ }
80
+ export default ElementHandler;
@@ -1,154 +1,154 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- class ElementHandler {
4
- constructor(handler) {
5
- /**
6
- * Set element by id
7
- * @param {string} id
8
- * @param {*} source
9
- * @returns {void}
10
- */
11
- this.setById = (id, source) => {
12
- const obj = this.handler.findById(id);
13
- if (!obj) {
14
- return;
15
- }
16
- this.set(obj, source);
17
- };
18
- /**
19
- * Set element
20
- * @param {ElementObjectType} obj
21
- * @param {*} source
22
- */
23
- this.set = (obj, source) => {
24
- obj.setSource(source);
25
- };
26
- /**
27
- * Find element by id with type
28
- * @param {string} id
29
- * @param {ElementType} [type='container']
30
- * @returns
31
- */
32
- this.findById = (id, type = 'container') => {
33
- return document.getElementById(`${id}_${type}`);
34
- };
35
- /**
36
- * Remove element
37
- * @param {HTMLElement} el
38
- * @returns
39
- */
40
- this.remove = (el) => {
41
- if (!el) {
42
- return;
43
- }
44
- this.handler.container.removeChild(el);
45
- };
46
- /**
47
- * Remove element by id
48
- * @param {string} id
49
- */
50
- this.removeById = (id) => {
51
- const el = this.findById(id);
52
- const scriptEl = this.findById(id, 'script');
53
- const styleEl = this.findById(id, 'style');
54
- if (el) {
55
- if (el.remove) {
56
- el.remove();
57
- }
58
- else {
59
- this.remove(el);
60
- }
61
- }
62
- if (scriptEl) {
63
- if (scriptEl.remove) {
64
- scriptEl.remove();
65
- }
66
- else {
67
- document.head.removeChild(scriptEl);
68
- }
69
- }
70
- if (styleEl) {
71
- if (styleEl.remove) {
72
- styleEl.remove();
73
- }
74
- else {
75
- document.head.removeChild(styleEl);
76
- }
77
- }
78
- };
79
- /**
80
- * Remove element by ids
81
- * @param {string[]} ids
82
- */
83
- this.removeByIds = (ids) => {
84
- ids.forEach(id => {
85
- this.removeById(id);
86
- });
87
- };
88
- /**
89
- * Set position
90
- * @param {HTMLElement} el
91
- * @param {number} left
92
- * @param {number} top
93
- * @returns
94
- */
95
- this.setPosition = (el, obj) => {
96
- if (!el) {
97
- return;
98
- }
99
- obj.setCoords();
100
- const zoom = this.handler.canvas.getZoom();
101
- const { scaleX, scaleY, width, height } = obj;
102
- const { left, top } = obj.getBoundingRect(false);
103
- const padLeft = ((width * scaleX * zoom) - width) / 2;
104
- const padTop = ((height * scaleY * zoom) - height) / 2;
105
- el.style.left = `${left + padLeft}px`;
106
- el.style.top = `${top + padTop}px`;
107
- };
108
- this.setPositionByOrigin = (el, obj, left, top) => {
109
- if (!el) {
110
- return;
111
- }
112
- obj.setCoords();
113
- const zoom = this.handler.canvas.getZoom();
114
- const { scaleX, scaleY, width, height } = obj;
115
- const padLeft = ((width * scaleX * zoom) - width) / 2;
116
- const padTop = ((height * scaleY * zoom) - height) / 2;
117
- el.style.left = `${left + padLeft}px`;
118
- el.style.top = `${top + padTop}px`;
119
- };
120
- /**
121
- * Set size
122
- * @param {HTMLElement} el
123
- * @param {number} width
124
- * @param {number} height
125
- * @returns
126
- */
127
- this.setSize = (el, obj) => {
128
- if (!el) {
129
- return;
130
- }
131
- const { width, height } = obj;
132
- el.style.width = `${width}px`;
133
- el.style.height = `${height}px`;
134
- };
135
- /**
136
- * Set scale or angle
137
- * @param {HTMLElement} el
138
- * @param {number} scaleX
139
- * @param {number} scaleY
140
- * @param {number} angle
141
- * @returns
142
- */
143
- this.setScaleOrAngle = (el, obj) => {
144
- if (!el) {
145
- return;
146
- }
147
- const zoom = this.handler.canvas.getZoom();
148
- const { scaleX, scaleY, angle } = obj;
149
- el.style.transform = `rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom})`;
150
- };
151
- this.handler = handler;
152
- }
153
- }
154
- exports.default = ElementHandler;
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ class ElementHandler {
4
+ constructor(handler) {
5
+ /**
6
+ * Set element by id
7
+ * @param {string} id
8
+ * @param {*} source
9
+ * @returns {void}
10
+ */
11
+ this.setById = (id, source) => {
12
+ const obj = this.handler.findById(id);
13
+ if (!obj) {
14
+ return;
15
+ }
16
+ this.set(obj, source);
17
+ };
18
+ /**
19
+ * Set element
20
+ * @param {ElementObjectType} obj
21
+ * @param {*} source
22
+ */
23
+ this.set = (obj, source) => {
24
+ obj.setSource(source);
25
+ };
26
+ /**
27
+ * Find element by id with type
28
+ * @param {string} id
29
+ * @param {ElementType} [type='container']
30
+ * @returns
31
+ */
32
+ this.findById = (id, type = 'container') => {
33
+ return document.getElementById(`${id}_${type}`);
34
+ };
35
+ /**
36
+ * Remove element
37
+ * @param {HTMLElement} el
38
+ * @returns
39
+ */
40
+ this.remove = (el) => {
41
+ if (!el) {
42
+ return;
43
+ }
44
+ this.handler.container.removeChild(el);
45
+ };
46
+ /**
47
+ * Remove element by id
48
+ * @param {string} id
49
+ */
50
+ this.removeById = (id) => {
51
+ const el = this.findById(id);
52
+ const scriptEl = this.findById(id, 'script');
53
+ const styleEl = this.findById(id, 'style');
54
+ if (el) {
55
+ if (el.remove) {
56
+ el.remove();
57
+ }
58
+ else {
59
+ this.remove(el);
60
+ }
61
+ }
62
+ if (scriptEl) {
63
+ if (scriptEl.remove) {
64
+ scriptEl.remove();
65
+ }
66
+ else {
67
+ document.head.removeChild(scriptEl);
68
+ }
69
+ }
70
+ if (styleEl) {
71
+ if (styleEl.remove) {
72
+ styleEl.remove();
73
+ }
74
+ else {
75
+ document.head.removeChild(styleEl);
76
+ }
77
+ }
78
+ };
79
+ /**
80
+ * Remove element by ids
81
+ * @param {string[]} ids
82
+ */
83
+ this.removeByIds = (ids) => {
84
+ ids.forEach(id => {
85
+ this.removeById(id);
86
+ });
87
+ };
88
+ /**
89
+ * Set position
90
+ * @param {HTMLElement} el
91
+ * @param {number} left
92
+ * @param {number} top
93
+ * @returns
94
+ */
95
+ this.setPosition = (el, obj) => {
96
+ if (!el) {
97
+ return;
98
+ }
99
+ obj.setCoords();
100
+ const zoom = this.handler.canvas.getZoom();
101
+ const { scaleX, scaleY, width, height } = obj;
102
+ const { left, top } = obj.getBoundingRect(false);
103
+ const padLeft = ((width * scaleX * zoom) - width) / 2;
104
+ const padTop = ((height * scaleY * zoom) - height) / 2;
105
+ el.style.left = `${left + padLeft}px`;
106
+ el.style.top = `${top + padTop}px`;
107
+ };
108
+ this.setPositionByOrigin = (el, obj, left, top) => {
109
+ if (!el) {
110
+ return;
111
+ }
112
+ obj.setCoords();
113
+ const zoom = this.handler.canvas.getZoom();
114
+ const { scaleX, scaleY, width, height } = obj;
115
+ const padLeft = ((width * scaleX * zoom) - width) / 2;
116
+ const padTop = ((height * scaleY * zoom) - height) / 2;
117
+ el.style.left = `${left + padLeft}px`;
118
+ el.style.top = `${top + padTop}px`;
119
+ };
120
+ /**
121
+ * Set size
122
+ * @param {HTMLElement} el
123
+ * @param {number} width
124
+ * @param {number} height
125
+ * @returns
126
+ */
127
+ this.setSize = (el, obj) => {
128
+ if (!el) {
129
+ return;
130
+ }
131
+ const { width, height } = obj;
132
+ el.style.width = `${width}px`;
133
+ el.style.height = `${height}px`;
134
+ };
135
+ /**
136
+ * Set scale or angle
137
+ * @param {HTMLElement} el
138
+ * @param {number} scaleX
139
+ * @param {number} scaleY
140
+ * @param {number} angle
141
+ * @returns
142
+ */
143
+ this.setScaleOrAngle = (el, obj) => {
144
+ if (!el) {
145
+ return;
146
+ }
147
+ const zoom = this.handler.canvas.getZoom();
148
+ const { scaleX, scaleY, angle } = obj;
149
+ el.style.transform = `rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom})`;
150
+ };
151
+ this.handler = handler;
152
+ }
153
+ }
154
+ exports.default = ElementHandler;