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.
- 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
|
@@ -1,48 +1,48 @@
|
|
|
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
|
+
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 +1,143 @@
|
|
|
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;
|
|
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
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
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';
|
|
22
|
-
export { default as FiberHandler } from './FiberHandler';
|
|
23
|
-
export { default as CustomHandler } from './CustomHandler';
|
|
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';
|
|
22
|
+
export { default as FiberHandler } from './FiberHandler';
|
|
23
|
+
export { default as CustomHandler } from './CustomHandler';
|
package/lib/handlers/index.js
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
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; } });
|
|
45
|
-
var FiberHandler_1 = require("./FiberHandler");
|
|
46
|
-
Object.defineProperty(exports, "FiberHandler", { enumerable: true, get: function () { return FiberHandler_1.default; } });
|
|
47
|
-
var CustomHandler_1 = require("./CustomHandler");
|
|
48
|
-
Object.defineProperty(exports, "CustomHandler", { enumerable: true, get: function () { return CustomHandler_1.default; } });
|
|
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; } });
|
|
45
|
+
var FiberHandler_1 = require("./FiberHandler");
|
|
46
|
+
Object.defineProperty(exports, "FiberHandler", { enumerable: true, get: function () { return FiberHandler_1.default; } });
|
|
47
|
+
var CustomHandler_1 = require("./CustomHandler");
|
|
48
|
+
Object.defineProperty(exports, "CustomHandler", { enumerable: true, get: function () { return CustomHandler_1.default; } });
|
package/lib/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export * from './Canvas';
|
|
2
|
-
export { default as Canvas } from './Canvas';
|
|
3
|
-
export { default as CanvasObject } from './CanvasObject';
|
|
4
|
-
export * from './handlers';
|
|
5
|
-
export * from './objects';
|
|
6
|
-
export * from './utils';
|
|
1
|
+
export * from './Canvas';
|
|
2
|
+
export { default as Canvas } from './Canvas';
|
|
3
|
+
export { default as CanvasObject } from './CanvasObject';
|
|
4
|
+
export * from './handlers';
|
|
5
|
+
export * from './objects';
|
|
6
|
+
export * from './utils';
|
package/lib/index.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
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
|
-
__exportStar(require("./Canvas"), exports);
|
|
14
|
-
var Canvas_1 = require("./Canvas");
|
|
15
|
-
Object.defineProperty(exports, "Canvas", { enumerable: true, get: function () { return Canvas_1.default; } });
|
|
16
|
-
var CanvasObject_1 = require("./CanvasObject");
|
|
17
|
-
Object.defineProperty(exports, "CanvasObject", { enumerable: true, get: function () { return CanvasObject_1.default; } });
|
|
18
|
-
__exportStar(require("./handlers"), exports);
|
|
19
|
-
__exportStar(require("./objects"), exports);
|
|
20
|
-
__exportStar(require("./utils"), exports);
|
|
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
|
+
__exportStar(require("./Canvas"), exports);
|
|
14
|
+
var Canvas_1 = require("./Canvas");
|
|
15
|
+
Object.defineProperty(exports, "Canvas", { enumerable: true, get: function () { return Canvas_1.default; } });
|
|
16
|
+
var CanvasObject_1 = require("./CanvasObject");
|
|
17
|
+
Object.defineProperty(exports, "CanvasObject", { enumerable: true, get: function () { return CanvasObject_1.default; } });
|
|
18
|
+
__exportStar(require("./handlers"), exports);
|
|
19
|
+
__exportStar(require("./objects"), exports);
|
|
20
|
+
__exportStar(require("./utils"), exports);
|
package/lib/objects/Arrow.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const Arrow: any;
|
|
2
|
-
export default Arrow;
|
|
1
|
+
declare const Arrow: any;
|
|
2
|
+
export default Arrow;
|