@leafer-in/viewport 1.8.0 → 1.9.1
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/viewport.cjs +189 -156
- package/dist/viewport.esm.js +183 -155
- package/dist/viewport.esm.min.js +1 -1
- package/dist/viewport.esm.min.js.map +1 -1
- package/dist/viewport.js +158 -171
- package/dist/viewport.min.cjs +1 -1
- package/dist/viewport.min.cjs.map +1 -1
- package/dist/viewport.min.js +1 -1
- package/dist/viewport.min.js.map +1 -1
- package/package.json +4 -4
- package/src/interaction/Dragger.ts +4 -4
package/dist/viewport.js
CHANGED
|
@@ -1,56 +1,59 @@
|
|
|
1
1
|
this.LeaferIN = this.LeaferIN || {};
|
|
2
|
-
this.LeaferIN.viewport = (function (exports, core) {
|
|
3
|
-
'use strict';
|
|
4
2
|
|
|
3
|
+
this.LeaferIN.viewport = function(exports, core) {
|
|
4
|
+
"use strict";
|
|
5
5
|
function addViewport(leafer, mergeConfig, custom) {
|
|
6
6
|
addViewportConfig(leafer.parentApp ? leafer.parentApp : leafer, mergeConfig);
|
|
7
|
-
if (leafer.isApp || custom)
|
|
8
|
-
|
|
9
|
-
leafer.__eventIds.push(leafer.on_(core.MoveEvent.BEFORE_MOVE, (e) => {
|
|
7
|
+
if (leafer.isApp || custom) return;
|
|
8
|
+
leafer.__eventIds.push(leafer.on_(core.MoveEvent.BEFORE_MOVE, e => {
|
|
10
9
|
leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
|
|
11
|
-
}), leafer.on_(core.ZoomEvent.BEFORE_ZOOM,
|
|
12
|
-
const { zoomLayer
|
|
10
|
+
}), leafer.on_(core.ZoomEvent.BEFORE_ZOOM, e => {
|
|
11
|
+
const {zoomLayer: zoomLayer} = leafer;
|
|
13
12
|
const changeScale = leafer.getValidScale(e.scale);
|
|
14
|
-
if (changeScale !== 1)
|
|
15
|
-
zoomLayer.scaleOfWorld(e, changeScale);
|
|
13
|
+
if (changeScale !== 1) zoomLayer.scaleOfWorld(e, changeScale);
|
|
16
14
|
}));
|
|
17
15
|
}
|
|
18
16
|
function addViewportConfig(leafer, mergeConfig) {
|
|
19
17
|
const viewportConfig = {
|
|
20
|
-
wheel: {
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
wheel: {
|
|
19
|
+
preventDefault: true
|
|
20
|
+
},
|
|
21
|
+
touch: {
|
|
22
|
+
preventDefault: true
|
|
23
|
+
},
|
|
24
|
+
pointer: {
|
|
25
|
+
preventDefaultMenu: true
|
|
26
|
+
}
|
|
23
27
|
};
|
|
24
|
-
if (mergeConfig)
|
|
25
|
-
core.DataHelper.assign(viewportConfig, mergeConfig);
|
|
28
|
+
if (mergeConfig) core.DataHelper.assign(viewportConfig, mergeConfig);
|
|
26
29
|
core.DataHelper.assign(leafer.config, viewportConfig, leafer.userConfig);
|
|
27
30
|
}
|
|
28
|
-
|
|
29
31
|
function custom(leafer) {
|
|
30
32
|
addViewport(leafer, null, true);
|
|
31
33
|
}
|
|
32
|
-
|
|
33
34
|
function design(leafer) {
|
|
34
35
|
addViewport(leafer, {
|
|
35
36
|
zoom: {
|
|
36
|
-
min:
|
|
37
|
+
min: .01,
|
|
37
38
|
max: 256
|
|
38
39
|
},
|
|
39
40
|
move: {
|
|
40
41
|
holdSpaceKey: true,
|
|
41
|
-
holdMiddleKey: true
|
|
42
|
+
holdMiddleKey: true
|
|
42
43
|
}
|
|
43
44
|
});
|
|
44
45
|
}
|
|
45
|
-
|
|
46
46
|
function document(leafer) {
|
|
47
47
|
addViewport(leafer, {
|
|
48
|
-
zoom: {
|
|
49
|
-
|
|
48
|
+
zoom: {
|
|
49
|
+
min: 1
|
|
50
|
+
},
|
|
51
|
+
move: {
|
|
52
|
+
scroll: "limit"
|
|
53
|
+
}
|
|
50
54
|
});
|
|
51
55
|
}
|
|
52
|
-
|
|
53
|
-
const debug = core.Debug.get('LeaferTypeCreator');
|
|
56
|
+
const debug = core.Debug.get("LeaferTypeCreator");
|
|
54
57
|
const LeaferTypeCreator = {
|
|
55
58
|
list: {},
|
|
56
59
|
register(name, fn) {
|
|
@@ -62,78 +65,84 @@ this.LeaferIN.viewport = (function (exports, core) {
|
|
|
62
65
|
fn && fn(leafer);
|
|
63
66
|
}
|
|
64
67
|
};
|
|
65
|
-
const { list, register } = LeaferTypeCreator;
|
|
66
|
-
register(
|
|
67
|
-
register(
|
|
68
|
-
register(
|
|
69
|
-
register(
|
|
70
|
-
|
|
68
|
+
const {list: list, register: register} = LeaferTypeCreator;
|
|
69
|
+
register("viewport", addViewport);
|
|
70
|
+
register("custom", custom);
|
|
71
|
+
register("design", design);
|
|
72
|
+
register("document", document);
|
|
71
73
|
const MultiTouchHelper = {
|
|
72
74
|
getData(list) {
|
|
73
75
|
const a = list[0], b = list[1];
|
|
74
76
|
const lastCenter = core.PointHelper.getCenter(a.from, b.from);
|
|
75
77
|
const center = core.PointHelper.getCenter(a.to, b.to);
|
|
76
|
-
const move = {
|
|
78
|
+
const move = {
|
|
79
|
+
x: center.x - lastCenter.x,
|
|
80
|
+
y: center.y - lastCenter.y
|
|
81
|
+
};
|
|
77
82
|
const lastDistance = core.PointHelper.getDistance(a.from, b.from);
|
|
78
83
|
const distance = core.PointHelper.getDistance(a.to, b.to);
|
|
79
84
|
const scale = distance / lastDistance;
|
|
80
85
|
const rotation = core.PointHelper.getRotation(a.from, b.from, a.to, b.to);
|
|
81
|
-
return {
|
|
86
|
+
return {
|
|
87
|
+
move: move,
|
|
88
|
+
scale: scale,
|
|
89
|
+
rotation: rotation,
|
|
90
|
+
center: center
|
|
91
|
+
};
|
|
82
92
|
}
|
|
83
93
|
};
|
|
84
|
-
|
|
85
94
|
const WheelEventHelper = {
|
|
86
95
|
getMove(event, config) {
|
|
87
|
-
let { moveSpeed
|
|
88
|
-
let { deltaX, deltaY } = event;
|
|
96
|
+
let {moveSpeed: moveSpeed} = config;
|
|
97
|
+
let {deltaX: deltaX, deltaY: deltaY} = event;
|
|
89
98
|
if (event.shiftKey && !deltaX) {
|
|
90
99
|
deltaX = deltaY;
|
|
91
100
|
deltaY = 0;
|
|
92
101
|
}
|
|
93
|
-
if (deltaX > 50)
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
102
|
+
if (deltaX > 50) deltaX = Math.max(50, deltaX / 3);
|
|
103
|
+
if (deltaY > 50) deltaY = Math.max(50, deltaY / 3);
|
|
104
|
+
return {
|
|
105
|
+
x: -deltaX * moveSpeed * 2,
|
|
106
|
+
y: -deltaY * moveSpeed * 2
|
|
107
|
+
};
|
|
98
108
|
},
|
|
99
109
|
getScale(event, config) {
|
|
100
110
|
let zoom;
|
|
101
111
|
let scale = 1;
|
|
102
|
-
let { zoomMode, zoomSpeed } = config;
|
|
112
|
+
let {zoomMode: zoomMode, zoomSpeed: zoomSpeed} = config;
|
|
103
113
|
const delta = event.deltaY || event.deltaX;
|
|
104
114
|
if (zoomMode) {
|
|
105
|
-
zoom =
|
|
106
|
-
if (event.shiftKey || event.metaKey || event.ctrlKey)
|
|
107
|
-
|
|
108
|
-
}
|
|
109
|
-
else {
|
|
115
|
+
zoom = zoomMode === "mouse" ? true : !event.deltaX && (core.Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta);
|
|
116
|
+
if (event.shiftKey || event.metaKey || event.ctrlKey) zoom = true;
|
|
117
|
+
} else {
|
|
110
118
|
zoom = !event.shiftKey && (event.metaKey || event.ctrlKey);
|
|
111
119
|
}
|
|
112
120
|
if (zoom) {
|
|
113
121
|
zoomSpeed = core.MathHelper.within(zoomSpeed, 0, 1);
|
|
114
122
|
const min = event.deltaY ? config.delta.y : config.delta.x;
|
|
115
123
|
scale = 1 - delta / (min * 4) * zoomSpeed;
|
|
116
|
-
if (scale <
|
|
117
|
-
|
|
118
|
-
if (scale >= 1.5)
|
|
119
|
-
scale = 1.5;
|
|
124
|
+
if (scale < .5) scale = .5;
|
|
125
|
+
if (scale >= 1.5) scale = 1.5;
|
|
120
126
|
}
|
|
121
127
|
return scale;
|
|
122
128
|
}
|
|
123
129
|
};
|
|
124
|
-
|
|
125
130
|
class Transformer {
|
|
126
|
-
get transforming() {
|
|
131
|
+
get transforming() {
|
|
132
|
+
return !!(this.moveData || this.zoomData || this.rotateData);
|
|
133
|
+
}
|
|
127
134
|
constructor(interaction) {
|
|
128
135
|
this.interaction = interaction;
|
|
129
136
|
}
|
|
130
137
|
move(data) {
|
|
131
|
-
const { interaction
|
|
132
|
-
if (!data.moveType)
|
|
133
|
-
data.moveType = 'move';
|
|
138
|
+
const {interaction: interaction} = this;
|
|
139
|
+
if (!data.moveType) data.moveType = "move";
|
|
134
140
|
if (!this.moveData) {
|
|
135
141
|
this.setPath(data);
|
|
136
|
-
this.moveData = Object.assign(Object.assign({}, data), {
|
|
142
|
+
this.moveData = Object.assign(Object.assign({}, data), {
|
|
143
|
+
moveX: 0,
|
|
144
|
+
moveY: 0
|
|
145
|
+
});
|
|
137
146
|
interaction.emit(core.MoveEvent.START, this.moveData);
|
|
138
147
|
}
|
|
139
148
|
data.path = this.moveData.path;
|
|
@@ -142,10 +151,12 @@ this.LeaferIN.viewport = (function (exports, core) {
|
|
|
142
151
|
this.transformEndWait();
|
|
143
152
|
}
|
|
144
153
|
zoom(data) {
|
|
145
|
-
const { interaction
|
|
154
|
+
const {interaction: interaction} = this;
|
|
146
155
|
if (!this.zoomData) {
|
|
147
156
|
this.setPath(data);
|
|
148
|
-
this.zoomData = Object.assign(Object.assign({}, data), {
|
|
157
|
+
this.zoomData = Object.assign(Object.assign({}, data), {
|
|
158
|
+
scale: 1
|
|
159
|
+
});
|
|
149
160
|
interaction.emit(core.ZoomEvent.START, this.zoomData);
|
|
150
161
|
}
|
|
151
162
|
data.path = this.zoomData.path;
|
|
@@ -154,10 +165,12 @@ this.LeaferIN.viewport = (function (exports, core) {
|
|
|
154
165
|
this.transformEndWait();
|
|
155
166
|
}
|
|
156
167
|
rotate(data) {
|
|
157
|
-
const { interaction
|
|
168
|
+
const {interaction: interaction} = this;
|
|
158
169
|
if (!this.rotateData) {
|
|
159
170
|
this.setPath(data);
|
|
160
|
-
this.rotateData = Object.assign(Object.assign({}, data), {
|
|
171
|
+
this.rotateData = Object.assign(Object.assign({}, data), {
|
|
172
|
+
rotation: 0
|
|
173
|
+
});
|
|
161
174
|
interaction.emit(core.RotateEvent.START, this.rotateData);
|
|
162
175
|
}
|
|
163
176
|
data.path = this.rotateData.path;
|
|
@@ -166,8 +179,8 @@ this.LeaferIN.viewport = (function (exports, core) {
|
|
|
166
179
|
this.transformEndWait();
|
|
167
180
|
}
|
|
168
181
|
setPath(data) {
|
|
169
|
-
const { interaction
|
|
170
|
-
const { path
|
|
182
|
+
const {interaction: interaction} = this;
|
|
183
|
+
const {path: path} = interaction.selector.getByPoint(data, interaction.hitRadius);
|
|
171
184
|
data.path = path;
|
|
172
185
|
interaction.cancelHover();
|
|
173
186
|
}
|
|
@@ -178,13 +191,10 @@ this.LeaferIN.viewport = (function (exports, core) {
|
|
|
178
191
|
}, this.interaction.p.transformTime);
|
|
179
192
|
}
|
|
180
193
|
transformEnd() {
|
|
181
|
-
const { interaction, moveData, zoomData, rotateData } = this;
|
|
182
|
-
if (moveData)
|
|
183
|
-
|
|
184
|
-
if (
|
|
185
|
-
interaction.emit(core.ZoomEvent.END, zoomData);
|
|
186
|
-
if (rotateData)
|
|
187
|
-
interaction.emit(core.RotateEvent.END, rotateData);
|
|
194
|
+
const {interaction: interaction, moveData: moveData, zoomData: zoomData, rotateData: rotateData} = this;
|
|
195
|
+
if (moveData) interaction.emit(core.MoveEvent.END, moveData);
|
|
196
|
+
if (zoomData) interaction.emit(core.ZoomEvent.END, zoomData);
|
|
197
|
+
if (rotateData) interaction.emit(core.RotateEvent.END, rotateData);
|
|
188
198
|
this.reset();
|
|
189
199
|
}
|
|
190
200
|
reset() {
|
|
@@ -194,105 +204,85 @@ this.LeaferIN.viewport = (function (exports, core) {
|
|
|
194
204
|
this.reset();
|
|
195
205
|
}
|
|
196
206
|
}
|
|
197
|
-
|
|
198
207
|
const leafer = core.Leafer.prototype;
|
|
199
|
-
const bounds = new core.Bounds
|
|
200
|
-
leafer.initType = function
|
|
208
|
+
const bounds = new core.Bounds;
|
|
209
|
+
leafer.initType = function(type) {
|
|
201
210
|
LeaferTypeCreator.run(type, this);
|
|
202
211
|
};
|
|
203
|
-
leafer.getValidMove = function
|
|
204
|
-
const { scroll, disabled } = this.app.config.move;
|
|
212
|
+
leafer.getValidMove = function(moveX, moveY) {
|
|
213
|
+
const {scroll: scroll, disabled: disabled} = this.app.config.move;
|
|
205
214
|
if (scroll) {
|
|
206
|
-
const type = scroll === true ?
|
|
207
|
-
if (type.includes(
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
else
|
|
212
|
-
Math.abs(moveX) > Math.abs(moveY) ? moveY = 0 : moveX = 0;
|
|
213
|
-
if (type.includes('limit')) {
|
|
214
|
-
const { x, y, width, height } = bounds.set(this.__world).addPoint(this.zoomLayer);
|
|
215
|
+
const type = scroll === true ? "" : scroll;
|
|
216
|
+
if (type.includes("x")) moveX = moveX || moveY, moveY = 0; else if (type.includes("y")) moveY = moveY || moveX,
|
|
217
|
+
moveX = 0; else Math.abs(moveX) > Math.abs(moveY) ? moveY = 0 : moveX = 0;
|
|
218
|
+
if (type.includes("limit")) {
|
|
219
|
+
const {x: x, y: y, width: width, height: height} = bounds.set(this.__world).addPoint(this.zoomLayer);
|
|
215
220
|
const right = x + width - this.width, bottom = y + height - this.height;
|
|
216
|
-
if (x >= 0 && right <= 0)
|
|
217
|
-
moveX =
|
|
218
|
-
else if (moveX
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
}
|
|
222
|
-
else if (moveX < 0 && right + moveX < 0)
|
|
223
|
-
moveX = -right;
|
|
224
|
-
if (y >= 0 && bottom <= 0)
|
|
225
|
-
moveY = 0;
|
|
226
|
-
else if (moveY > 0) {
|
|
227
|
-
if (y + moveY > 0)
|
|
228
|
-
moveY = -y;
|
|
229
|
-
}
|
|
230
|
-
else if (moveY < 0 && bottom + moveY < 0)
|
|
231
|
-
moveY = -bottom;
|
|
221
|
+
if (x >= 0 && right <= 0) moveX = 0; else if (moveX > 0) {
|
|
222
|
+
if (x + moveX > 0) moveX = -x;
|
|
223
|
+
} else if (moveX < 0 && right + moveX < 0) moveX = -right;
|
|
224
|
+
if (y >= 0 && bottom <= 0) moveY = 0; else if (moveY > 0) {
|
|
225
|
+
if (y + moveY > 0) moveY = -y;
|
|
226
|
+
} else if (moveY < 0 && bottom + moveY < 0) moveY = -bottom;
|
|
232
227
|
}
|
|
233
228
|
}
|
|
234
|
-
return {
|
|
229
|
+
return {
|
|
230
|
+
x: disabled ? 0 : moveX,
|
|
231
|
+
y: disabled ? 0 : moveY
|
|
232
|
+
};
|
|
235
233
|
};
|
|
236
|
-
leafer.getValidScale = function
|
|
237
|
-
const { scaleX
|
|
238
|
-
if (min && absScale < min)
|
|
239
|
-
changeScale = min / scaleX;
|
|
240
|
-
else if (max && absScale > max)
|
|
241
|
-
changeScale = max / scaleX;
|
|
234
|
+
leafer.getValidScale = function(changeScale) {
|
|
235
|
+
const {scaleX: scaleX} = this.zoomLayer.__, {min: min, max: max, disabled: disabled} = this.app.config.zoom, absScale = Math.abs(scaleX * changeScale);
|
|
236
|
+
if (min && absScale < min) changeScale = min / scaleX; else if (max && absScale > max) changeScale = max / scaleX;
|
|
242
237
|
return disabled ? 1 : changeScale;
|
|
243
238
|
};
|
|
244
|
-
|
|
245
239
|
function getMoveEventData(move, event) {
|
|
246
|
-
return Object.assign(Object.assign({}, event), {
|
|
240
|
+
return Object.assign(Object.assign({}, event), {
|
|
241
|
+
moveX: move.x,
|
|
242
|
+
moveY: move.y
|
|
243
|
+
});
|
|
247
244
|
}
|
|
248
245
|
function getRotateEventData(rotation, event) {
|
|
249
|
-
return Object.assign(Object.assign({}, event), {
|
|
246
|
+
return Object.assign(Object.assign({}, event), {
|
|
247
|
+
rotation: rotation
|
|
248
|
+
});
|
|
250
249
|
}
|
|
251
250
|
function getZoomEventData(scale, event) {
|
|
252
|
-
return Object.assign(Object.assign({}, event), {
|
|
251
|
+
return Object.assign(Object.assign({}, event), {
|
|
252
|
+
scale: scale
|
|
253
|
+
});
|
|
253
254
|
}
|
|
254
255
|
const interaction = core.InteractionBase.prototype;
|
|
255
|
-
interaction.createTransformer = function
|
|
256
|
+
interaction.createTransformer = function() {
|
|
256
257
|
this.transformer = new Transformer(this);
|
|
257
258
|
};
|
|
258
|
-
interaction.move = function
|
|
259
|
+
interaction.move = function(data) {
|
|
259
260
|
this.transformer.move(data);
|
|
260
261
|
};
|
|
261
|
-
interaction.zoom = function
|
|
262
|
+
interaction.zoom = function(data) {
|
|
262
263
|
this.transformer.zoom(data);
|
|
263
264
|
};
|
|
264
|
-
interaction.rotate = function
|
|
265
|
+
interaction.rotate = function(data) {
|
|
265
266
|
this.transformer.rotate(data);
|
|
266
267
|
};
|
|
267
|
-
interaction.transformEnd = function
|
|
268
|
+
interaction.transformEnd = function() {
|
|
268
269
|
this.transformer.transformEnd();
|
|
269
270
|
};
|
|
270
|
-
interaction.wheel = function
|
|
271
|
-
const { wheel, pointer } = this.config, { posDeltaSpeed, negDeltaSpeed } = wheel;
|
|
272
|
-
if (wheel.disabled)
|
|
273
|
-
|
|
274
|
-
if (data.
|
|
275
|
-
posDeltaSpeed && (data.deltaX *= posDeltaSpeed);
|
|
276
|
-
else
|
|
277
|
-
negDeltaSpeed && (data.deltaX *= negDeltaSpeed);
|
|
278
|
-
if (data.deltaY > 0)
|
|
279
|
-
posDeltaSpeed && (data.deltaY *= posDeltaSpeed);
|
|
280
|
-
else
|
|
281
|
-
negDeltaSpeed && (data.deltaY *= negDeltaSpeed);
|
|
271
|
+
interaction.wheel = function(data) {
|
|
272
|
+
const {wheel: wheel, pointer: pointer} = this.config, {posDeltaSpeed: posDeltaSpeed, negDeltaSpeed: negDeltaSpeed} = wheel;
|
|
273
|
+
if (wheel.disabled) return;
|
|
274
|
+
if (data.deltaX > 0) posDeltaSpeed && (data.deltaX *= posDeltaSpeed); else negDeltaSpeed && (data.deltaX *= negDeltaSpeed);
|
|
275
|
+
if (data.deltaY > 0) posDeltaSpeed && (data.deltaY *= posDeltaSpeed); else negDeltaSpeed && (data.deltaY *= negDeltaSpeed);
|
|
282
276
|
const scale = wheel.getScale ? wheel.getScale(data, wheel) : WheelEventHelper.getScale(data, wheel);
|
|
283
|
-
if (scale !== 1)
|
|
284
|
-
this.zoom(getZoomEventData(scale, data));
|
|
285
|
-
else {
|
|
277
|
+
if (scale !== 1) this.zoom(getZoomEventData(scale, data)); else {
|
|
286
278
|
const move = wheel.getMove ? wheel.getMove(data, wheel) : WheelEventHelper.getMove(data, wheel);
|
|
287
|
-
if (pointer.snap)
|
|
288
|
-
core.PointHelper.round(move);
|
|
279
|
+
if (pointer.snap) core.PointHelper.round(move);
|
|
289
280
|
this.move(getMoveEventData(move, data));
|
|
290
281
|
}
|
|
291
282
|
};
|
|
292
|
-
interaction.multiTouch = function
|
|
293
|
-
if (this.config.multiTouch.disabled)
|
|
294
|
-
|
|
295
|
-
const { move, rotation, scale, center } = MultiTouchHelper.getData(list);
|
|
283
|
+
interaction.multiTouch = function(data, list) {
|
|
284
|
+
if (this.config.multiTouch.disabled) return;
|
|
285
|
+
const {move: move, rotation: rotation, scale: scale, center: center} = MultiTouchHelper.getData(list);
|
|
296
286
|
Object.assign(data, center);
|
|
297
287
|
data.multiTouch = true;
|
|
298
288
|
this.pointerWaitCancel();
|
|
@@ -300,76 +290,73 @@ this.LeaferIN.viewport = (function (exports, core) {
|
|
|
300
290
|
this.zoom(getZoomEventData(scale, data));
|
|
301
291
|
this.move(getMoveEventData(move, data));
|
|
302
292
|
};
|
|
303
|
-
|
|
304
293
|
const dragger = core.Dragger.prototype;
|
|
305
|
-
const { abs
|
|
306
|
-
dragger.checkDragEndAnimate = function
|
|
307
|
-
const { moveX, moveY } = this.dragData;
|
|
308
|
-
const absMoveX = abs(moveX), absMoveY = abs(moveY), minMove = speed ? 1 :
|
|
309
|
-
const dragAnimate = this.
|
|
294
|
+
const {abs: abs} = Math;
|
|
295
|
+
dragger.checkDragEndAnimate = function(data, speed) {
|
|
296
|
+
const {moveX: moveX, moveY: moveY} = this.dragData;
|
|
297
|
+
const absMoveX = abs(moveX), absMoveY = abs(moveY), minMove = speed ? 1 : .1;
|
|
298
|
+
const dragAnimate = this.canAnimate && this.moving && (absMoveX > minMove || absMoveY > minMove) && this.interaction.m.dragAnimate;
|
|
310
299
|
if (dragAnimate) {
|
|
311
|
-
const inertia = data.pointerType ===
|
|
312
|
-
speed = speed ?
|
|
313
|
-
if (absMoveX * speed > maxMove)
|
|
314
|
-
speed = maxMove / absMoveX;
|
|
315
|
-
else if (absMoveY * speed > maxMove)
|
|
316
|
-
speed = maxMove / absMoveY;
|
|
300
|
+
const inertia = data.pointerType === "touch" ? 3 : 1, maxMove = 70;
|
|
301
|
+
speed = speed ? core.isNumber(dragAnimate) ? dragAnimate : .95 : inertia;
|
|
302
|
+
if (absMoveX * speed > maxMove) speed = maxMove / absMoveX; else if (absMoveY * speed > maxMove) speed = maxMove / absMoveY;
|
|
317
303
|
data = Object.assign({}, data);
|
|
318
304
|
core.PointHelper.move(data, moveX * speed, moveY * speed);
|
|
319
305
|
this.drag(data);
|
|
320
|
-
this.animate(() => {
|
|
306
|
+
this.animate(() => {
|
|
307
|
+
this.dragEnd(data, 1);
|
|
308
|
+
});
|
|
321
309
|
}
|
|
322
310
|
return dragAnimate;
|
|
323
311
|
};
|
|
324
|
-
dragger.animate = function
|
|
312
|
+
dragger.animate = function(func, off) {
|
|
325
313
|
const animateWait = func || this.animateWait;
|
|
326
|
-
if (animateWait)
|
|
327
|
-
this.interaction.target.nextRender(animateWait, null, off);
|
|
314
|
+
if (animateWait) this.interaction.target.nextRender(animateWait, null, off);
|
|
328
315
|
this.animateWait = func;
|
|
329
316
|
};
|
|
330
|
-
dragger.checkDragOut = function
|
|
331
|
-
const { interaction
|
|
317
|
+
dragger.checkDragOut = function(data) {
|
|
318
|
+
const {interaction: interaction} = this;
|
|
332
319
|
this.autoMoveCancel();
|
|
333
|
-
if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data))
|
|
334
|
-
this.autoMoveOnDragOut(data);
|
|
320
|
+
if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data)) this.autoMoveOnDragOut(data);
|
|
335
321
|
};
|
|
336
|
-
dragger.autoMoveOnDragOut = function
|
|
337
|
-
const { interaction, downData, canDragOut } = this;
|
|
338
|
-
const { autoDistance, dragOut } = interaction.m;
|
|
339
|
-
if (!dragOut || !canDragOut || !autoDistance)
|
|
340
|
-
return;
|
|
322
|
+
dragger.autoMoveOnDragOut = function(data) {
|
|
323
|
+
const {interaction: interaction, downData: downData, canDragOut: canDragOut} = this;
|
|
324
|
+
const {autoDistance: autoDistance, dragOut: dragOut} = interaction.m;
|
|
325
|
+
if (!dragOut || !canDragOut || !autoDistance) return;
|
|
341
326
|
const bounds = interaction.shrinkCanvasBounds;
|
|
342
|
-
const { x, y } = bounds;
|
|
327
|
+
const {x: x, y: y} = bounds;
|
|
343
328
|
const right = core.BoundsHelper.maxX(bounds);
|
|
344
329
|
const bottom = core.BoundsHelper.maxY(bounds);
|
|
345
|
-
const moveX = data.x < x ? autoDistance :
|
|
346
|
-
const moveY = data.y < y ? autoDistance :
|
|
330
|
+
const moveX = data.x < x ? autoDistance : right < data.x ? -autoDistance : 0;
|
|
331
|
+
const moveY = data.y < y ? autoDistance : bottom < data.y ? -autoDistance : 0;
|
|
347
332
|
let totalX = 0, totalY = 0;
|
|
348
333
|
this.autoMoveTimer = setInterval(() => {
|
|
349
334
|
totalX += moveX;
|
|
350
335
|
totalY += moveY;
|
|
351
336
|
core.PointHelper.move(downData, moveX, moveY);
|
|
352
337
|
core.PointHelper.move(this.dragData, moveX, moveY);
|
|
353
|
-
interaction.move(Object.assign(Object.assign({}, data), {
|
|
338
|
+
interaction.move(Object.assign(Object.assign({}, data), {
|
|
339
|
+
moveX: moveX,
|
|
340
|
+
moveY: moveY,
|
|
341
|
+
totalX: totalX,
|
|
342
|
+
totalY: totalY,
|
|
343
|
+
moveType: "drag"
|
|
344
|
+
}));
|
|
354
345
|
interaction.pointerMoveReal(data);
|
|
355
346
|
}, 10);
|
|
356
347
|
};
|
|
357
|
-
dragger.autoMoveCancel = function
|
|
348
|
+
dragger.autoMoveCancel = function() {
|
|
358
349
|
if (this.autoMoveTimer) {
|
|
359
350
|
clearInterval(this.autoMoveTimer);
|
|
360
351
|
this.autoMoveTimer = 0;
|
|
361
352
|
}
|
|
362
353
|
};
|
|
363
|
-
|
|
364
|
-
core.Plugin.add('viewport');
|
|
365
|
-
|
|
354
|
+
core.Plugin.add("viewport");
|
|
366
355
|
exports.LeaferTypeCreator = LeaferTypeCreator;
|
|
367
356
|
exports.MultiTouchHelper = MultiTouchHelper;
|
|
368
357
|
exports.Transformer = Transformer;
|
|
369
358
|
exports.WheelEventHelper = WheelEventHelper;
|
|
370
359
|
exports.addViewport = addViewport;
|
|
371
360
|
exports.addViewportConfig = addViewportConfig;
|
|
372
|
-
|
|
373
361
|
return exports;
|
|
374
|
-
|
|
375
|
-
})({}, LeaferUI);
|
|
362
|
+
}({}, LeaferUI);
|
package/dist/viewport.min.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var t=require("@leafer-ui/core");function e(e,a,i){o(e.parentApp?e.parentApp:e,a),e.isApp||i||e.__eventIds.push(e.on_(t.MoveEvent.BEFORE_MOVE,
|
|
1
|
+
"use strict";var t=require("@leafer-ui/core");function e(e,a,i){o(e.parentApp?e.parentApp:e,a),e.isApp||i||e.__eventIds.push(e.on_(t.MoveEvent.BEFORE_MOVE,t=>{e.zoomLayer.move(e.getValidMove(t.moveX,t.moveY))}),e.on_(t.ZoomEvent.BEFORE_ZOOM,t=>{const{zoomLayer:o}=e,a=e.getValidScale(t.scale);1!==a&&o.scaleOfWorld(t,a)}))}function o(e,o){const a={wheel:{preventDefault:!0},touch:{preventDefault:!0},pointer:{preventDefaultMenu:!0}};o&&t.DataHelper.assign(a,o),t.DataHelper.assign(e.config,a,e.userConfig)}const a=t.Debug.get("LeaferTypeCreator"),i={list:{},register(t,e){n[t]&&a.repeat(t),n[t]=e},run(t,e){const o=n[t];o&&o(e)}},{list:n,register:s}=i;s("viewport",e),s("custom",function(t){e(t,null,!0)}),s("design",function(t){e(t,{zoom:{min:.01,max:256},move:{holdSpaceKey:!0,holdMiddleKey:!0}})}),s("document",function(t){e(t,{zoom:{min:1},move:{scroll:"limit"}})});const r={getData(e){const o=e[0],a=e[1],i=t.PointHelper.getCenter(o.from,a.from),n=t.PointHelper.getCenter(o.to,a.to),s={x:n.x-i.x,y:n.y-i.y},r=t.PointHelper.getDistance(o.from,a.from);return{move:s,scale:t.PointHelper.getDistance(o.to,a.to)/r,rotation:t.PointHelper.getRotation(o.from,a.from,o.to,a.to),center:n}}},c={getMove(t,e){let{moveSpeed:o}=e,{deltaX:a,deltaY:i}=t;return t.shiftKey&&!a&&(a=i,i=0),a>50&&(a=Math.max(50,a/3)),i>50&&(i=Math.max(50,i/3)),{x:-a*o*2,y:-i*o*2}},getScale(e,o){let a,i=1,{zoomMode:n,zoomSpeed:s}=o;const r=e.deltaY||e.deltaX;if(n?(a="mouse"===n||!e.deltaX&&(t.Platform.intWheelDeltaY?Math.abs(r)>17:Math.ceil(r)!==r),(e.shiftKey||e.metaKey||e.ctrlKey)&&(a=!0)):a=!e.shiftKey&&(e.metaKey||e.ctrlKey),a){s=t.MathHelper.within(s,0,1);i=1-r/(4*(e.deltaY?o.delta.y:o.delta.x))*s,i<.5&&(i=.5),i>=1.5&&(i=1.5)}return i}};class m{get transforming(){return!!(this.moveData||this.zoomData||this.rotateData)}constructor(t){this.interaction=t}move(e){const{interaction:o}=this;e.moveType||(e.moveType="move"),this.moveData||(this.setPath(e),this.moveData=Object.assign(Object.assign({},e),{moveX:0,moveY:0}),o.emit(t.MoveEvent.START,this.moveData)),e.path=this.moveData.path,o.emit(t.MoveEvent.BEFORE_MOVE,e),o.emit(t.MoveEvent.MOVE,e),this.transformEndWait()}zoom(e){const{interaction:o}=this;this.zoomData||(this.setPath(e),this.zoomData=Object.assign(Object.assign({},e),{scale:1}),o.emit(t.ZoomEvent.START,this.zoomData)),e.path=this.zoomData.path,o.emit(t.ZoomEvent.BEFORE_ZOOM,e),o.emit(t.ZoomEvent.ZOOM,e),this.transformEndWait()}rotate(e){const{interaction:o}=this;this.rotateData||(this.setPath(e),this.rotateData=Object.assign(Object.assign({},e),{rotation:0}),o.emit(t.RotateEvent.START,this.rotateData)),e.path=this.rotateData.path,o.emit(t.RotateEvent.BEFORE_ROTATE,e),o.emit(t.RotateEvent.ROTATE,e),this.transformEndWait()}setPath(t){const{interaction:e}=this,{path:o}=e.selector.getByPoint(t,e.hitRadius);t.path=o,e.cancelHover()}transformEndWait(){clearTimeout(this.transformTimer),this.transformTimer=setTimeout(()=>{this.transformEnd()},this.interaction.p.transformTime)}transformEnd(){const{interaction:e,moveData:o,zoomData:a,rotateData:i}=this;o&&e.emit(t.MoveEvent.END,o),a&&e.emit(t.ZoomEvent.END,a),i&&e.emit(t.RotateEvent.END,i),this.reset()}reset(){this.zoomData=this.moveData=this.rotateData=null}destroy(){this.reset()}}const h=t.Leafer.prototype,l=new t.Bounds;function u(t,e){return Object.assign(Object.assign({},e),{moveX:t.x,moveY:t.y})}function v(t,e){return Object.assign(Object.assign({},e),{scale:t})}h.initType=function(t){i.run(t,this)},h.getValidMove=function(t,e){const{scroll:o,disabled:a}=this.app.config.move;if(o){const a=!0===o?"":o;if(a.includes("x")?(t=t||e,e=0):a.includes("y")?(e=e||t,t=0):Math.abs(t)>Math.abs(e)?e=0:t=0,a.includes("limit")){const{x:o,y:a,width:i,height:n}=l.set(this.__world).addPoint(this.zoomLayer),s=o+i-this.width,r=a+n-this.height;o>=0&&s<=0?t=0:t>0?o+t>0&&(t=-o):t<0&&s+t<0&&(t=-s),a>=0&&r<=0?e=0:e>0?a+e>0&&(e=-a):e<0&&r+e<0&&(e=-r)}}return{x:a?0:t,y:a?0:e}},h.getValidScale=function(t){const{scaleX:e}=this.zoomLayer.__,{min:o,max:a,disabled:i}=this.app.config.zoom,n=Math.abs(e*t);return o&&n<o?t=o/e:a&&n>a&&(t=a/e),i?1:t};const d=t.InteractionBase.prototype;d.createTransformer=function(){this.transformer=new m(this)},d.move=function(t){this.transformer.move(t)},d.zoom=function(t){this.transformer.zoom(t)},d.rotate=function(t){this.transformer.rotate(t)},d.transformEnd=function(){this.transformer.transformEnd()},d.wheel=function(e){const{wheel:o,pointer:a}=this.config,{posDeltaSpeed:i,negDeltaSpeed:n}=o;if(o.disabled)return;e.deltaX>0?i&&(e.deltaX*=i):n&&(e.deltaX*=n),e.deltaY>0?i&&(e.deltaY*=i):n&&(e.deltaY*=n);const s=o.getScale?o.getScale(e,o):c.getScale(e,o);if(1!==s)this.zoom(v(s,e));else{const i=o.getMove?o.getMove(e,o):c.getMove(e,o);a.snap&&t.PointHelper.round(i),this.move(u(i,e))}},d.multiTouch=function(t,e){if(this.config.multiTouch.disabled)return;const{move:o,rotation:a,scale:i,center:n}=r.getData(e);Object.assign(t,n),t.multiTouch=!0,this.pointerWaitCancel(),this.rotate(function(t,e){return Object.assign(Object.assign({},e),{rotation:t})}(a,t)),this.zoom(v(i,t)),this.move(u(o,t))};const p=t.Dragger.prototype,{abs:f}=Math;p.checkDragEndAnimate=function(e,o){const{moveX:a,moveY:i}=this.dragData,n=f(a),s=f(i),r=o?1:.1,c=this.canAnimate&&this.moving&&(n>r||s>r)&&this.interaction.m.dragAnimate;if(c){const r="touch"===e.pointerType?3:1,m=70;n*(o=o?t.isNumber(c)?c:.95:r)>m?o=m/n:s*o>m&&(o=m/s),e=Object.assign({},e),t.PointHelper.move(e,a*o,i*o),this.drag(e),this.animate(()=>{this.dragEnd(e,1)})}return c},p.animate=function(t,e){const o=t||this.animateWait;o&&this.interaction.target.nextRender(o,null,e),this.animateWait=t},p.checkDragOut=function(t){const{interaction:e}=this;this.autoMoveCancel(),this.dragging&&!e.shrinkCanvasBounds.hitPoint(t)&&this.autoMoveOnDragOut(t)},p.autoMoveOnDragOut=function(e){const{interaction:o,downData:a,canDragOut:i}=this,{autoDistance:n,dragOut:s}=o.m;if(!s||!i||!n)return;const r=o.shrinkCanvasBounds,{x:c,y:m}=r,h=t.BoundsHelper.maxX(r),l=t.BoundsHelper.maxY(r),u=e.x<c?n:h<e.x?-n:0,v=e.y<m?n:l<e.y?-n:0;let d=0,p=0;this.autoMoveTimer=setInterval(()=>{d+=u,p+=v,t.PointHelper.move(a,u,v),t.PointHelper.move(this.dragData,u,v),o.move(Object.assign(Object.assign({},e),{moveX:u,moveY:v,totalX:d,totalY:p,moveType:"drag"})),o.pointerMoveReal(e)},10)},p.autoMoveCancel=function(){this.autoMoveTimer&&(clearInterval(this.autoMoveTimer),this.autoMoveTimer=0)},t.Plugin.add("viewport"),exports.LeaferTypeCreator=i,exports.MultiTouchHelper=r,exports.Transformer=m,exports.WheelEventHelper=c,exports.addViewport=e,exports.addViewportConfig=o;
|
|
2
2
|
//# sourceMappingURL=viewport.min.cjs.map
|