react-design-editor 0.0.33 → 0.0.37
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/README.md +37 -33
- package/dist/react-design-editor.js +20849 -11309
- package/dist/react-design-editor.min.js +1 -1
- package/dist/react-design-editor.min.js.LICENSE.txt +3 -10
- package/package.json +35 -31
- package/lib/Canvas.d.ts +0 -32
- package/lib/Canvas.js +0 -162
- package/lib/CanvasObject.d.ts +0 -10
- package/lib/CanvasObject.js +0 -96
- package/lib/constants/defaults.d.ts +0 -37
- package/lib/constants/defaults.js +0 -68
- package/lib/constants/index.d.ts +0 -2
- package/lib/constants/index.js +0 -24
- package/lib/handlers/AlignmentHandler.d.ts +0 -18
- package/lib/handlers/AlignmentHandler.js +0 -58
- package/lib/handlers/AnimationHandler.d.ts +0 -50
- package/lib/handlers/AnimationHandler.js +0 -320
- package/lib/handlers/ChartHandler.d.ts +0 -8
- package/lib/handlers/ChartHandler.js +0 -8
- package/lib/handlers/ContextmenuHandler.d.ts +0 -28
- package/lib/handlers/ContextmenuHandler.js +0 -65
- package/lib/handlers/CropHandler.d.ts +0 -43
- package/lib/handlers/CropHandler.js +0 -261
- package/lib/handlers/DrawingHandler.d.ts +0 -28
- package/lib/handlers/DrawingHandler.js +0 -318
- package/lib/handlers/ElementHandler.d.ts +0 -80
- package/lib/handlers/ElementHandler.js +0 -154
- package/lib/handlers/EventHandler.d.ts +0 -170
- package/lib/handlers/EventHandler.js +0 -877
- package/lib/handlers/GridHandler.d.ts +0 -19
- package/lib/handlers/GridHandler.js +0 -77
- package/lib/handlers/GuidelineHandler.d.ts +0 -61
- package/lib/handlers/GuidelineHandler.js +0 -314
- package/lib/handlers/Handler.d.ts +0 -603
- package/lib/handlers/Handler.js +0 -1612
- package/lib/handlers/ImageHandler.d.ts +0 -307
- package/lib/handlers/ImageHandler.js +0 -529
- package/lib/handlers/InteractionHandler.d.ts +0 -45
- package/lib/handlers/InteractionHandler.js +0 -159
- package/lib/handlers/LinkHandler.d.ts +0 -115
- package/lib/handlers/LinkHandler.js +0 -247
- package/lib/handlers/NodeHandler.d.ts +0 -50
- package/lib/handlers/NodeHandler.js +0 -274
- package/lib/handlers/PortHandler.d.ts +0 -22
- package/lib/handlers/PortHandler.js +0 -179
- package/lib/handlers/ShortcutHandler.d.ts +0 -119
- package/lib/handlers/ShortcutHandler.js +0 -150
- package/lib/handlers/TooltipHandler.d.ts +0 -33
- package/lib/handlers/TooltipHandler.js +0 -91
- package/lib/handlers/TransactionHandler.d.ts +0 -59
- package/lib/handlers/TransactionHandler.js +0 -139
- package/lib/handlers/WorkareaHandler.d.ts +0 -43
- package/lib/handlers/WorkareaHandler.js +0 -354
- package/lib/handlers/ZoomHandler.d.ts +0 -48
- package/lib/handlers/ZoomHandler.js +0 -143
- package/lib/handlers/index.d.ts +0 -21
- package/lib/handlers/index.js +0 -44
- package/lib/index.d.ts +0 -5
- package/lib/index.js +0 -19
- package/lib/objects/Arrow.d.ts +0 -2
- package/lib/objects/Arrow.js +0 -39
- package/lib/objects/Chart.d.ts +0 -10
- package/lib/objects/Chart.js +0 -123
- package/lib/objects/CirclePort.d.ts +0 -2
- package/lib/objects/CirclePort.js +0 -28
- package/lib/objects/Cube.d.ts +0 -5
- package/lib/objects/Cube.js +0 -71
- package/lib/objects/CurvedLink.d.ts +0 -2
- package/lib/objects/CurvedLink.js +0 -49
- package/lib/objects/Element.d.ts +0 -13
- package/lib/objects/Element.js +0 -83
- package/lib/objects/Gif.d.ts +0 -3
- package/lib/objects/Gif.js +0 -38
- package/lib/objects/Iframe.d.ts +0 -9
- package/lib/objects/Iframe.js +0 -69
- package/lib/objects/Line.d.ts +0 -2
- package/lib/objects/Line.js +0 -24
- package/lib/objects/Link.d.ts +0 -15
- package/lib/objects/Link.js +0 -104
- package/lib/objects/Node.d.ts +0 -59
- package/lib/objects/Node.js +0 -271
- package/lib/objects/OrthogonalLink.d.ts +0 -2
- package/lib/objects/OrthogonalLink.js +0 -52
- package/lib/objects/Port.d.ts +0 -12
- package/lib/objects/Port.js +0 -28
- package/lib/objects/Svg.d.ts +0 -8
- package/lib/objects/Svg.js +0 -59
- package/lib/objects/Video.d.ts +0 -14
- package/lib/objects/Video.js +0 -119
- package/lib/objects/index.d.ts +0 -15
- package/lib/objects/index.js +0 -32
- package/lib/utils/ObjectUtil.d.ts +0 -400
- package/lib/utils/ObjectUtil.js +0 -13
- package/lib/utils/index.d.ts +0 -1
- package/lib/utils/index.js +0 -13
|
@@ -1,354 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const fabric_1 = require("fabric");
|
|
4
|
-
class WorkareaHandler {
|
|
5
|
-
constructor(handler) {
|
|
6
|
-
/**
|
|
7
|
-
* Set the layout on workarea
|
|
8
|
-
* @param {WorkareaLayout} layout
|
|
9
|
-
* @returns
|
|
10
|
-
*/
|
|
11
|
-
this.setLayout = (layout) => {
|
|
12
|
-
this.handler.workarea.set('layout', layout);
|
|
13
|
-
const { _element, isElement, workareaWidth, workareaHeight } = this.handler.workarea;
|
|
14
|
-
const { canvas } = this.handler;
|
|
15
|
-
let scaleX = 1;
|
|
16
|
-
let scaleY = 1;
|
|
17
|
-
const isFixed = layout === 'fixed';
|
|
18
|
-
const isResponsive = layout === 'responsive';
|
|
19
|
-
const isFullscreen = layout === 'fullscreen';
|
|
20
|
-
if (isElement) {
|
|
21
|
-
if (isFixed) {
|
|
22
|
-
scaleX = workareaWidth / _element.width;
|
|
23
|
-
scaleY = workareaHeight / _element.height;
|
|
24
|
-
}
|
|
25
|
-
else if (isResponsive) {
|
|
26
|
-
const scales = this.calculateScale();
|
|
27
|
-
scaleX = scales.scaleX;
|
|
28
|
-
scaleY = scales.scaleY;
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
scaleX = canvas.getWidth() / _element.width;
|
|
32
|
-
scaleY = canvas.getHeight() / _element.height;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
this.handler.getObjects().forEach(obj => {
|
|
36
|
-
const { id, player } = obj;
|
|
37
|
-
if (id !== 'workarea') {
|
|
38
|
-
const objScaleX = !isFullscreen ? 1 : scaleX;
|
|
39
|
-
const objScaleY = !isFullscreen ? 1 : scaleY;
|
|
40
|
-
const objWidth = obj.width * objScaleX * canvas.getZoom();
|
|
41
|
-
const objHeight = obj.height * objScaleY * canvas.getZoom();
|
|
42
|
-
const el = this.handler.elementHandler.findById(obj.id);
|
|
43
|
-
this.handler.elementHandler.setSize(el, obj);
|
|
44
|
-
if (player) {
|
|
45
|
-
player.setPlayerSize(objWidth, objHeight);
|
|
46
|
-
}
|
|
47
|
-
obj.set({
|
|
48
|
-
scaleX: !isFullscreen ? 1 : objScaleX,
|
|
49
|
-
scaleY: !isFullscreen ? 1 : objScaleY,
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
if (isResponsive) {
|
|
54
|
-
const center = canvas.getCenter();
|
|
55
|
-
if (isElement) {
|
|
56
|
-
this.handler.workarea.set({
|
|
57
|
-
scaleX: 1,
|
|
58
|
-
scaleY: 1,
|
|
59
|
-
});
|
|
60
|
-
this.handler.zoomHandler.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), scaleX);
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
this.handler.workarea.set({
|
|
64
|
-
width: workareaWidth,
|
|
65
|
-
height: workareaHeight,
|
|
66
|
-
});
|
|
67
|
-
scaleX = canvas.getWidth() / workareaWidth;
|
|
68
|
-
scaleY = canvas.getHeight() / workareaHeight;
|
|
69
|
-
if (workareaHeight >= workareaWidth) {
|
|
70
|
-
scaleX = scaleY;
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
scaleY = scaleX;
|
|
74
|
-
}
|
|
75
|
-
this.handler.zoomHandler.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), scaleX);
|
|
76
|
-
}
|
|
77
|
-
canvas.centerObject(this.handler.workarea);
|
|
78
|
-
canvas.renderAll();
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
if (isElement) {
|
|
82
|
-
this.handler.workarea.set({
|
|
83
|
-
width: _element.width,
|
|
84
|
-
height: _element.height,
|
|
85
|
-
scaleX,
|
|
86
|
-
scaleY,
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
const width = isFixed ? workareaWidth : this.handler.canvas.getWidth();
|
|
91
|
-
const height = isFixed ? workareaHeight : this.handler.canvas.getHeight();
|
|
92
|
-
this.handler.workarea.set({
|
|
93
|
-
width,
|
|
94
|
-
height,
|
|
95
|
-
backgroundColor: 'rgba(255, 255, 255, 1)',
|
|
96
|
-
});
|
|
97
|
-
this.handler.canvas.renderAll();
|
|
98
|
-
if (isFixed) {
|
|
99
|
-
canvas.centerObject(this.handler.workarea);
|
|
100
|
-
}
|
|
101
|
-
else {
|
|
102
|
-
this.handler.workarea.set({
|
|
103
|
-
left: 0,
|
|
104
|
-
top: 0,
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
canvas.centerObject(this.handler.workarea);
|
|
109
|
-
const center = canvas.getCenter();
|
|
110
|
-
canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
|
|
111
|
-
this.handler.zoomHandler.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), 1);
|
|
112
|
-
canvas.renderAll();
|
|
113
|
-
};
|
|
114
|
-
/**
|
|
115
|
-
* Set the responsive image on Workarea
|
|
116
|
-
* @param {string | File} [source]
|
|
117
|
-
* @param {boolean} [loaded]
|
|
118
|
-
* @returns
|
|
119
|
-
*/
|
|
120
|
-
this.setResponsiveImage = async (source, loaded) => {
|
|
121
|
-
const imageFromUrl = async (src = '') => {
|
|
122
|
-
return new Promise(resolve => {
|
|
123
|
-
fabric_1.fabric.Image.fromURL(src, (img) => {
|
|
124
|
-
const { canvas, workarea, editable } = this.handler;
|
|
125
|
-
const { workareaWidth, workareaHeight } = workarea;
|
|
126
|
-
const { scaleX, scaleY } = this.calculateScale(img);
|
|
127
|
-
if (img._element) {
|
|
128
|
-
workarea.set({
|
|
129
|
-
...img,
|
|
130
|
-
isElement: true,
|
|
131
|
-
selectable: false,
|
|
132
|
-
});
|
|
133
|
-
}
|
|
134
|
-
else {
|
|
135
|
-
const image = new Image(workareaWidth, workareaHeight);
|
|
136
|
-
workarea.setElement(image);
|
|
137
|
-
workarea.set({
|
|
138
|
-
isElement: false,
|
|
139
|
-
selectable: false,
|
|
140
|
-
width: workareaWidth,
|
|
141
|
-
height: workareaHeight,
|
|
142
|
-
});
|
|
143
|
-
}
|
|
144
|
-
if (editable && !loaded) {
|
|
145
|
-
canvas.getObjects().forEach(obj => {
|
|
146
|
-
const { id, player } = obj;
|
|
147
|
-
if (id !== 'workarea') {
|
|
148
|
-
const objWidth = obj.width * scaleX;
|
|
149
|
-
const objHeight = obj.height * scaleY;
|
|
150
|
-
const el = this.handler.elementHandler.findById(id);
|
|
151
|
-
this.handler.elementHandler.setScaleOrAngle(el, obj);
|
|
152
|
-
this.handler.elementHandler.setSize(el, obj);
|
|
153
|
-
if (player) {
|
|
154
|
-
player.setPlayerSize(objWidth, objHeight);
|
|
155
|
-
}
|
|
156
|
-
obj.set({
|
|
157
|
-
scaleX: 1,
|
|
158
|
-
scaleY: 1,
|
|
159
|
-
});
|
|
160
|
-
obj.setCoords();
|
|
161
|
-
}
|
|
162
|
-
});
|
|
163
|
-
}
|
|
164
|
-
// 파일이 없을 경우 Canvas의 nextWidth, nextHeight 값이 변경되기 전 상태에서 zoomToFit이 동작함
|
|
165
|
-
// 정상 동작 resize event logic => zoomToFit
|
|
166
|
-
// 현재 동작 zoomToFit -> resize event logic
|
|
167
|
-
this.handler.zoomHandler.zoomToFit();
|
|
168
|
-
canvas.centerObject(workarea);
|
|
169
|
-
resolve(workarea);
|
|
170
|
-
});
|
|
171
|
-
});
|
|
172
|
-
};
|
|
173
|
-
const { workarea } = this.handler;
|
|
174
|
-
if (!source) {
|
|
175
|
-
workarea.set({
|
|
176
|
-
src: null,
|
|
177
|
-
file: null,
|
|
178
|
-
});
|
|
179
|
-
return imageFromUrl(source);
|
|
180
|
-
}
|
|
181
|
-
if (source instanceof File) {
|
|
182
|
-
return new Promise(resolve => {
|
|
183
|
-
const reader = new FileReader();
|
|
184
|
-
reader.onload = () => {
|
|
185
|
-
workarea.set({
|
|
186
|
-
file: source,
|
|
187
|
-
});
|
|
188
|
-
imageFromUrl(reader.result).then(resolve);
|
|
189
|
-
};
|
|
190
|
-
reader.readAsDataURL(source);
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
else {
|
|
194
|
-
workarea.set({
|
|
195
|
-
src: source,
|
|
196
|
-
});
|
|
197
|
-
return imageFromUrl(source);
|
|
198
|
-
}
|
|
199
|
-
};
|
|
200
|
-
/**
|
|
201
|
-
* Set the image on Workarea
|
|
202
|
-
* @param {string | File} source
|
|
203
|
-
* @param {boolean} [loaded=false]
|
|
204
|
-
* @returns
|
|
205
|
-
*/
|
|
206
|
-
this.setImage = async (source, loaded = false) => {
|
|
207
|
-
const { canvas, workarea, editable } = this.handler;
|
|
208
|
-
if (workarea.layout === 'responsive') {
|
|
209
|
-
return this.setResponsiveImage(source, loaded);
|
|
210
|
-
}
|
|
211
|
-
const imageFromUrl = async (src) => {
|
|
212
|
-
return new Promise(resolve => {
|
|
213
|
-
fabric_1.fabric.Image.fromURL(src, (img) => {
|
|
214
|
-
let width = canvas.getWidth();
|
|
215
|
-
let height = canvas.getHeight();
|
|
216
|
-
if (workarea.layout === 'fixed') {
|
|
217
|
-
width = workarea.width * workarea.scaleX;
|
|
218
|
-
height = workarea.height * workarea.scaleY;
|
|
219
|
-
}
|
|
220
|
-
let scaleX = 1;
|
|
221
|
-
let scaleY = 1;
|
|
222
|
-
if (img._element) {
|
|
223
|
-
scaleX = width / img.width;
|
|
224
|
-
scaleY = height / img.height;
|
|
225
|
-
img.set({
|
|
226
|
-
originX: 'left',
|
|
227
|
-
originY: 'top',
|
|
228
|
-
scaleX,
|
|
229
|
-
scaleY,
|
|
230
|
-
});
|
|
231
|
-
workarea.set({
|
|
232
|
-
...img,
|
|
233
|
-
isElement: true,
|
|
234
|
-
selectable: false,
|
|
235
|
-
});
|
|
236
|
-
}
|
|
237
|
-
else {
|
|
238
|
-
workarea.setElement(new Image());
|
|
239
|
-
workarea.set({
|
|
240
|
-
width,
|
|
241
|
-
height,
|
|
242
|
-
scaleX,
|
|
243
|
-
scaleY,
|
|
244
|
-
isElement: false,
|
|
245
|
-
selectable: false,
|
|
246
|
-
});
|
|
247
|
-
}
|
|
248
|
-
canvas.centerObject(workarea);
|
|
249
|
-
if (editable && !loaded) {
|
|
250
|
-
const { layout } = workarea;
|
|
251
|
-
canvas.getObjects().forEach(obj => {
|
|
252
|
-
const { id, player } = obj;
|
|
253
|
-
if (id !== 'workarea') {
|
|
254
|
-
scaleX = layout === 'fullscreen' ? scaleX : obj.scaleX;
|
|
255
|
-
scaleY = layout === 'fullscreen' ? scaleY : obj.scaleY;
|
|
256
|
-
const el = this.handler.elementHandler.findById(id);
|
|
257
|
-
this.handler.elementHandler.setSize(el, obj);
|
|
258
|
-
if (player) {
|
|
259
|
-
const objWidth = obj.width * scaleX;
|
|
260
|
-
const objHeight = obj.height * scaleY;
|
|
261
|
-
player.setPlayerSize(objWidth, objHeight);
|
|
262
|
-
}
|
|
263
|
-
obj.set({
|
|
264
|
-
scaleX,
|
|
265
|
-
scaleY,
|
|
266
|
-
});
|
|
267
|
-
obj.setCoords();
|
|
268
|
-
}
|
|
269
|
-
});
|
|
270
|
-
}
|
|
271
|
-
const center = canvas.getCenter();
|
|
272
|
-
const zoom = loaded || workarea.layout === 'fullscreen' ? 1 : this.handler.canvas.getZoom();
|
|
273
|
-
canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
|
|
274
|
-
this.handler.zoomHandler.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), zoom);
|
|
275
|
-
canvas.renderAll();
|
|
276
|
-
resolve(workarea);
|
|
277
|
-
});
|
|
278
|
-
});
|
|
279
|
-
};
|
|
280
|
-
if (!source) {
|
|
281
|
-
workarea.set({
|
|
282
|
-
src: null,
|
|
283
|
-
file: null,
|
|
284
|
-
});
|
|
285
|
-
return imageFromUrl(source);
|
|
286
|
-
}
|
|
287
|
-
if (source instanceof File) {
|
|
288
|
-
return new Promise(resolve => {
|
|
289
|
-
const reader = new FileReader();
|
|
290
|
-
reader.onload = () => {
|
|
291
|
-
workarea.set({
|
|
292
|
-
file: source,
|
|
293
|
-
});
|
|
294
|
-
imageFromUrl(reader.result).then(resolve);
|
|
295
|
-
};
|
|
296
|
-
reader.readAsDataURL(source);
|
|
297
|
-
});
|
|
298
|
-
}
|
|
299
|
-
else {
|
|
300
|
-
workarea.set({
|
|
301
|
-
src: source,
|
|
302
|
-
});
|
|
303
|
-
return imageFromUrl(source);
|
|
304
|
-
}
|
|
305
|
-
};
|
|
306
|
-
/**
|
|
307
|
-
* Calculate scale to the image
|
|
308
|
-
*
|
|
309
|
-
* @param {FabricImage} [image]
|
|
310
|
-
* @returns
|
|
311
|
-
*/
|
|
312
|
-
this.calculateScale = (image) => {
|
|
313
|
-
const { canvas, workarea } = this.handler;
|
|
314
|
-
const { workareaWidth, workareaHeight } = workarea;
|
|
315
|
-
const { _element } = image || workarea;
|
|
316
|
-
const width = _element?.width || workareaWidth;
|
|
317
|
-
const height = _element?.height || workareaHeight;
|
|
318
|
-
let scaleX = canvas.getWidth() / width;
|
|
319
|
-
let scaleY = canvas.getHeight() / height;
|
|
320
|
-
if (height >= width) {
|
|
321
|
-
scaleX = scaleY;
|
|
322
|
-
if (canvas.getWidth() < width * scaleX) {
|
|
323
|
-
scaleX = scaleX * (canvas.getWidth() / (width * scaleX));
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
else {
|
|
327
|
-
scaleY = scaleX;
|
|
328
|
-
if (canvas.getHeight() < height * scaleX) {
|
|
329
|
-
scaleX = scaleX * (canvas.getHeight() / (height * scaleX));
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
return { scaleX, scaleY };
|
|
333
|
-
};
|
|
334
|
-
this.handler = handler;
|
|
335
|
-
this.initialize();
|
|
336
|
-
}
|
|
337
|
-
/**
|
|
338
|
-
* Initialize workarea
|
|
339
|
-
*
|
|
340
|
-
* @author salgum1114
|
|
341
|
-
*/
|
|
342
|
-
initialize() {
|
|
343
|
-
const { workareaOption } = this.handler;
|
|
344
|
-
const image = new Image(workareaOption.width, workareaOption.height);
|
|
345
|
-
image.width = workareaOption.width;
|
|
346
|
-
image.height = workareaOption.height;
|
|
347
|
-
this.handler.workarea = new fabric_1.fabric.Image(image, workareaOption);
|
|
348
|
-
this.handler.canvas.add(this.handler.workarea);
|
|
349
|
-
this.handler.objects = this.handler.getObjects();
|
|
350
|
-
this.handler.canvas.centerObject(this.handler.workarea);
|
|
351
|
-
this.handler.canvas.renderAll();
|
|
352
|
-
}
|
|
353
|
-
}
|
|
354
|
-
exports.default = WorkareaHandler;
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { fabric } from 'fabric';
|
|
2
|
-
import Handler from './Handler';
|
|
3
|
-
import { FabricObject } from '../utils';
|
|
4
|
-
declare class ZoomHandler {
|
|
5
|
-
handler?: Handler;
|
|
6
|
-
constructor(handler: Handler);
|
|
7
|
-
/**
|
|
8
|
-
* Zoom to point
|
|
9
|
-
*
|
|
10
|
-
* @param {fabric.Point} point
|
|
11
|
-
* @param {number} zoom ex) 0 ~ 1. Not percentage value.
|
|
12
|
-
*/
|
|
13
|
-
zoomToPoint: (point: fabric.Point, zoom: number) => void;
|
|
14
|
-
/**
|
|
15
|
-
* Zoom one to one
|
|
16
|
-
*
|
|
17
|
-
*/
|
|
18
|
-
zoomOneToOne: () => void;
|
|
19
|
-
/**
|
|
20
|
-
* Zoom to fit
|
|
21
|
-
*
|
|
22
|
-
*/
|
|
23
|
-
zoomToFit: () => void;
|
|
24
|
-
/**
|
|
25
|
-
* Zoom in
|
|
26
|
-
*
|
|
27
|
-
*/
|
|
28
|
-
zoomIn: () => void;
|
|
29
|
-
/**
|
|
30
|
-
* Zoom out
|
|
31
|
-
*
|
|
32
|
-
*/
|
|
33
|
-
zoomOut: () => void;
|
|
34
|
-
/**
|
|
35
|
-
* Zoom to center with object
|
|
36
|
-
*
|
|
37
|
-
* @param {FabricObject} target If zoomFit true, rescaled canvas zoom.
|
|
38
|
-
*/
|
|
39
|
-
zoomToCenterWithObject: (target: FabricObject, zoomFit?: boolean) => void;
|
|
40
|
-
/**
|
|
41
|
-
* Zoom to center with objects
|
|
42
|
-
*
|
|
43
|
-
* @param {boolean} [zoomFit] If zoomFit true, rescaled canvas zoom.
|
|
44
|
-
* @returns
|
|
45
|
-
*/
|
|
46
|
-
zoomToCenter: (zoomFit?: boolean) => void;
|
|
47
|
-
}
|
|
48
|
-
export default ZoomHandler;
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const fabric_1 = require("fabric");
|
|
4
|
-
class ZoomHandler {
|
|
5
|
-
constructor(handler) {
|
|
6
|
-
/**
|
|
7
|
-
* Zoom to point
|
|
8
|
-
*
|
|
9
|
-
* @param {fabric.Point} point
|
|
10
|
-
* @param {number} zoom ex) 0 ~ 1. Not percentage value.
|
|
11
|
-
*/
|
|
12
|
-
this.zoomToPoint = (point, zoom) => {
|
|
13
|
-
const { minZoom, maxZoom } = this.handler;
|
|
14
|
-
let zoomRatio = zoom;
|
|
15
|
-
if (zoom <= minZoom / 100) {
|
|
16
|
-
zoomRatio = minZoom / 100;
|
|
17
|
-
}
|
|
18
|
-
else if (zoom >= maxZoom / 100) {
|
|
19
|
-
zoomRatio = maxZoom / 100;
|
|
20
|
-
}
|
|
21
|
-
this.handler.canvas.zoomToPoint(point, zoomRatio);
|
|
22
|
-
this.handler.getObjects().forEach(obj => {
|
|
23
|
-
if (obj.superType === 'element') {
|
|
24
|
-
const { id, width, height, player } = obj;
|
|
25
|
-
const el = this.handler.elementHandler.findById(id);
|
|
26
|
-
// update the element
|
|
27
|
-
this.handler.elementHandler.setScaleOrAngle(el, obj);
|
|
28
|
-
this.handler.elementHandler.setSize(el, obj);
|
|
29
|
-
this.handler.elementHandler.setPosition(el, obj);
|
|
30
|
-
if (player) {
|
|
31
|
-
player.setPlayerSize(width, height);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
if (this.handler.onZoom) {
|
|
36
|
-
this.handler.onZoom(zoomRatio);
|
|
37
|
-
}
|
|
38
|
-
this.handler.canvas.requestRenderAll();
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* Zoom one to one
|
|
42
|
-
*
|
|
43
|
-
*/
|
|
44
|
-
this.zoomOneToOne = () => {
|
|
45
|
-
const center = this.handler.canvas.getCenter();
|
|
46
|
-
this.handler.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
|
|
47
|
-
this.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), 1);
|
|
48
|
-
};
|
|
49
|
-
/**
|
|
50
|
-
* Zoom to fit
|
|
51
|
-
*
|
|
52
|
-
*/
|
|
53
|
-
this.zoomToFit = () => {
|
|
54
|
-
let scaleX = this.handler.canvas.getWidth() / this.handler.workarea.width;
|
|
55
|
-
const scaleY = this.handler.canvas.getHeight() / this.handler.workarea.height;
|
|
56
|
-
if (this.handler.workarea.height >= this.handler.workarea.width) {
|
|
57
|
-
scaleX = scaleY;
|
|
58
|
-
if (this.handler.canvas.getWidth() < this.handler.workarea.width * scaleX) {
|
|
59
|
-
scaleX = scaleX * (this.handler.canvas.getWidth() / (this.handler.workarea.width * scaleX));
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
if (this.handler.canvas.getHeight() < this.handler.workarea.height * scaleX) {
|
|
64
|
-
scaleX = scaleX * (this.handler.canvas.getHeight() / (this.handler.workarea.height * scaleX));
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
const center = this.handler.canvas.getCenter();
|
|
68
|
-
this.handler.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
|
|
69
|
-
this.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), scaleX);
|
|
70
|
-
};
|
|
71
|
-
/**
|
|
72
|
-
* Zoom in
|
|
73
|
-
*
|
|
74
|
-
*/
|
|
75
|
-
this.zoomIn = () => {
|
|
76
|
-
let zoomRatio = this.handler.canvas.getZoom();
|
|
77
|
-
zoomRatio += 0.05;
|
|
78
|
-
const center = this.handler.canvas.getCenter();
|
|
79
|
-
this.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), zoomRatio);
|
|
80
|
-
};
|
|
81
|
-
/**
|
|
82
|
-
* Zoom out
|
|
83
|
-
*
|
|
84
|
-
*/
|
|
85
|
-
this.zoomOut = () => {
|
|
86
|
-
let zoomRatio = this.handler.canvas.getZoom();
|
|
87
|
-
zoomRatio -= 0.05;
|
|
88
|
-
const center = this.handler.canvas.getCenter();
|
|
89
|
-
this.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), zoomRatio);
|
|
90
|
-
};
|
|
91
|
-
/**
|
|
92
|
-
* Zoom to center with object
|
|
93
|
-
*
|
|
94
|
-
* @param {FabricObject} target If zoomFit true, rescaled canvas zoom.
|
|
95
|
-
*/
|
|
96
|
-
this.zoomToCenterWithObject = (target, zoomFit) => {
|
|
97
|
-
const { left: canvasLeft, top: canvasTop } = this.handler.canvas.getCenter();
|
|
98
|
-
const { left, top, width, height } = target;
|
|
99
|
-
const diffTop = canvasTop - (top + height / 2);
|
|
100
|
-
const diffLeft = canvasLeft - (left + width / 2);
|
|
101
|
-
if (zoomFit) {
|
|
102
|
-
let scaleX;
|
|
103
|
-
let scaleY;
|
|
104
|
-
scaleX = this.handler.canvas.getWidth() / width;
|
|
105
|
-
scaleY = this.handler.canvas.getHeight() / height;
|
|
106
|
-
if (height > width) {
|
|
107
|
-
scaleX = scaleY;
|
|
108
|
-
if (this.handler.canvas.getWidth() < width * scaleX) {
|
|
109
|
-
scaleX = scaleX * (this.handler.canvas.getWidth() / (width * scaleX));
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
else {
|
|
113
|
-
scaleY = scaleX;
|
|
114
|
-
if (this.handler.canvas.getHeight() < height * scaleX) {
|
|
115
|
-
scaleX = scaleX * (this.handler.canvas.getHeight() / (height * scaleX));
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
this.handler.canvas.setViewportTransform([1, 0, 0, 1, diffLeft, diffTop]);
|
|
119
|
-
this.zoomToPoint(new fabric_1.fabric.Point(canvasLeft, canvasTop), scaleX);
|
|
120
|
-
}
|
|
121
|
-
else {
|
|
122
|
-
const zoom = this.handler.canvas.getZoom();
|
|
123
|
-
this.handler.canvas.setViewportTransform([1, 0, 0, 1, diffLeft, diffTop]);
|
|
124
|
-
this.zoomToPoint(new fabric_1.fabric.Point(canvasLeft, canvasTop), zoom);
|
|
125
|
-
}
|
|
126
|
-
};
|
|
127
|
-
/**
|
|
128
|
-
* Zoom to center with objects
|
|
129
|
-
*
|
|
130
|
-
* @param {boolean} [zoomFit] If zoomFit true, rescaled canvas zoom.
|
|
131
|
-
* @returns
|
|
132
|
-
*/
|
|
133
|
-
this.zoomToCenter = (zoomFit) => {
|
|
134
|
-
const activeObject = this.handler.canvas.getActiveObject();
|
|
135
|
-
if (!activeObject) {
|
|
136
|
-
return;
|
|
137
|
-
}
|
|
138
|
-
this.zoomToCenterWithObject(activeObject, zoomFit);
|
|
139
|
-
};
|
|
140
|
-
this.handler = handler;
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
exports.default = ZoomHandler;
|
package/lib/handlers/index.d.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export { default as Handler } from './Handler';
|
|
2
|
-
export { default as ImageHandler } from './ImageHandler';
|
|
3
|
-
export { default as ChartHandler } from './ChartHandler';
|
|
4
|
-
export { default as ElementHandler } from './ElementHandler';
|
|
5
|
-
export { default as CropHandler } from './CropHandler';
|
|
6
|
-
export { default as AnimationHandler } from './AnimationHandler';
|
|
7
|
-
export { default as ContextmenuHandler } from './ContextmenuHandler';
|
|
8
|
-
export { default as TooltipHandler } from './TooltipHandler';
|
|
9
|
-
export { default as TransactionHandler } from './TransactionHandler';
|
|
10
|
-
export { default as ZoomHandler } from './ZoomHandler';
|
|
11
|
-
export { default as WorkareaHandler } from './WorkareaHandler';
|
|
12
|
-
export { default as InteractionHandler } from './InteractionHandler';
|
|
13
|
-
export { default as GridHandler } from './GridHandler';
|
|
14
|
-
export { default as PortHandler } from './PortHandler';
|
|
15
|
-
export { default as LinkHandler } from './LinkHandler';
|
|
16
|
-
export { default as NodeHandler } from './NodeHandler';
|
|
17
|
-
export { default as AlignmentHandler } from './AlignmentHandler';
|
|
18
|
-
export { default as GuidelineHandler } from './GuidelineHandler';
|
|
19
|
-
export { default as EventHandler } from './EventHandler';
|
|
20
|
-
export { default as DrawingHandler } from './DrawingHandler';
|
|
21
|
-
export { default as ShortcutHandler } from './ShortcutHandler';
|
package/lib/handlers/index.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
var Handler_1 = require("./Handler");
|
|
4
|
-
Object.defineProperty(exports, "Handler", { enumerable: true, get: function () { return Handler_1.default; } });
|
|
5
|
-
var ImageHandler_1 = require("./ImageHandler");
|
|
6
|
-
Object.defineProperty(exports, "ImageHandler", { enumerable: true, get: function () { return ImageHandler_1.default; } });
|
|
7
|
-
var ChartHandler_1 = require("./ChartHandler");
|
|
8
|
-
Object.defineProperty(exports, "ChartHandler", { enumerable: true, get: function () { return ChartHandler_1.default; } });
|
|
9
|
-
var ElementHandler_1 = require("./ElementHandler");
|
|
10
|
-
Object.defineProperty(exports, "ElementHandler", { enumerable: true, get: function () { return ElementHandler_1.default; } });
|
|
11
|
-
var CropHandler_1 = require("./CropHandler");
|
|
12
|
-
Object.defineProperty(exports, "CropHandler", { enumerable: true, get: function () { return CropHandler_1.default; } });
|
|
13
|
-
var AnimationHandler_1 = require("./AnimationHandler");
|
|
14
|
-
Object.defineProperty(exports, "AnimationHandler", { enumerable: true, get: function () { return AnimationHandler_1.default; } });
|
|
15
|
-
var ContextmenuHandler_1 = require("./ContextmenuHandler");
|
|
16
|
-
Object.defineProperty(exports, "ContextmenuHandler", { enumerable: true, get: function () { return ContextmenuHandler_1.default; } });
|
|
17
|
-
var TooltipHandler_1 = require("./TooltipHandler");
|
|
18
|
-
Object.defineProperty(exports, "TooltipHandler", { enumerable: true, get: function () { return TooltipHandler_1.default; } });
|
|
19
|
-
var TransactionHandler_1 = require("./TransactionHandler");
|
|
20
|
-
Object.defineProperty(exports, "TransactionHandler", { enumerable: true, get: function () { return TransactionHandler_1.default; } });
|
|
21
|
-
var ZoomHandler_1 = require("./ZoomHandler");
|
|
22
|
-
Object.defineProperty(exports, "ZoomHandler", { enumerable: true, get: function () { return ZoomHandler_1.default; } });
|
|
23
|
-
var WorkareaHandler_1 = require("./WorkareaHandler");
|
|
24
|
-
Object.defineProperty(exports, "WorkareaHandler", { enumerable: true, get: function () { return WorkareaHandler_1.default; } });
|
|
25
|
-
var InteractionHandler_1 = require("./InteractionHandler");
|
|
26
|
-
Object.defineProperty(exports, "InteractionHandler", { enumerable: true, get: function () { return InteractionHandler_1.default; } });
|
|
27
|
-
var GridHandler_1 = require("./GridHandler");
|
|
28
|
-
Object.defineProperty(exports, "GridHandler", { enumerable: true, get: function () { return GridHandler_1.default; } });
|
|
29
|
-
var PortHandler_1 = require("./PortHandler");
|
|
30
|
-
Object.defineProperty(exports, "PortHandler", { enumerable: true, get: function () { return PortHandler_1.default; } });
|
|
31
|
-
var LinkHandler_1 = require("./LinkHandler");
|
|
32
|
-
Object.defineProperty(exports, "LinkHandler", { enumerable: true, get: function () { return LinkHandler_1.default; } });
|
|
33
|
-
var NodeHandler_1 = require("./NodeHandler");
|
|
34
|
-
Object.defineProperty(exports, "NodeHandler", { enumerable: true, get: function () { return NodeHandler_1.default; } });
|
|
35
|
-
var AlignmentHandler_1 = require("./AlignmentHandler");
|
|
36
|
-
Object.defineProperty(exports, "AlignmentHandler", { enumerable: true, get: function () { return AlignmentHandler_1.default; } });
|
|
37
|
-
var GuidelineHandler_1 = require("./GuidelineHandler");
|
|
38
|
-
Object.defineProperty(exports, "GuidelineHandler", { enumerable: true, get: function () { return GuidelineHandler_1.default; } });
|
|
39
|
-
var EventHandler_1 = require("./EventHandler");
|
|
40
|
-
Object.defineProperty(exports, "EventHandler", { enumerable: true, get: function () { return EventHandler_1.default; } });
|
|
41
|
-
var DrawingHandler_1 = require("./DrawingHandler");
|
|
42
|
-
Object.defineProperty(exports, "DrawingHandler", { enumerable: true, get: function () { return DrawingHandler_1.default; } });
|
|
43
|
-
var ShortcutHandler_1 = require("./ShortcutHandler");
|
|
44
|
-
Object.defineProperty(exports, "ShortcutHandler", { enumerable: true, get: function () { return ShortcutHandler_1.default; } });
|
package/lib/index.d.ts
DELETED
package/lib/index.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
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 __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
var Canvas_1 = require("./Canvas");
|
|
14
|
-
Object.defineProperty(exports, "Canvas", { enumerable: true, get: function () { return Canvas_1.default; } });
|
|
15
|
-
var CanvasObject_1 = require("./CanvasObject");
|
|
16
|
-
Object.defineProperty(exports, "CanvasObject", { enumerable: true, get: function () { return CanvasObject_1.default; } });
|
|
17
|
-
__exportStar(require("./handlers"), exports);
|
|
18
|
-
__exportStar(require("./utils"), exports);
|
|
19
|
-
__exportStar(require("./objects"), exports);
|
package/lib/objects/Arrow.d.ts
DELETED