@prefecthq/prefect-ui-library 2.0.3 → 2.0.5
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/{index-45e04e59.mjs → index-71009ec6.mjs} +20735 -23482
- package/dist/index-71009ec6.mjs.map +1 -0
- package/dist/prefect-ui-library.mjs +1 -1
- package/dist/prefect-ui-library.umd.js +78 -593
- package/dist/prefect-ui-library.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/demo/services/mockWorkspaceFlowRunsApi.d.ts +2 -2
- package/dist/types/src/components/FlowRunCreateForm.vue.d.ts +6 -0
- package/dist/types/src/components/FlowRunsAccordion.vue.d.ts +9 -0
- package/dist/types/src/maps/flowRunTimeline.d.ts +4 -0
- package/dist/types/src/maps/index.d.ts +1 -0
- package/dist/types/src/services/Mapper.d.ts +1 -0
- package/dist/types/src/services/WorkspaceFlowRunsApi.d.ts +3 -3
- package/dist/types/src/utilities/timeline.d.ts +0 -3
- package/dist/{viewport.es-f8e518db-2ef8f059.mjs → viewport.es-88169ec4-146d955f.mjs} +20 -724
- package/dist/viewport.es-88169ec4-146d955f.mjs.map +1 -0
- package/package.json +2 -2
- package/dist/index-45e04e59.mjs.map +0 -1
- package/dist/viewport.es-f8e518db-2ef8f059.mjs.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { X as O,
|
|
1
|
+
import { X as O, c as k, J as b, f as c } from "./index-71009ec6.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
import "@prefecthq/vue-charts";
|
|
4
4
|
import "@prefecthq/prefect-design";
|
|
@@ -6,53 +6,32 @@ import "@prefecthq/vue-compositions";
|
|
|
6
6
|
import "vee-validate";
|
|
7
7
|
import "vue-router";
|
|
8
8
|
class d {
|
|
9
|
-
/** The viewport to which this plugin is attached. */
|
|
10
|
-
/**
|
|
11
|
-
* Flags whether this plugin has been "paused".
|
|
12
|
-
*
|
|
13
|
-
* @see Plugin#pause
|
|
14
|
-
* @see Plugin#resume
|
|
15
|
-
*/
|
|
16
|
-
/** @param {Viewport} parent */
|
|
17
9
|
constructor(t) {
|
|
18
10
|
this.parent = t, this.paused = !1;
|
|
19
11
|
}
|
|
20
|
-
/** Called when plugin is removed */
|
|
21
12
|
destroy() {
|
|
22
13
|
}
|
|
23
|
-
/** Handler for pointerdown PIXI event */
|
|
24
14
|
down(t) {
|
|
25
15
|
return !1;
|
|
26
16
|
}
|
|
27
|
-
/** Handler for pointermove PIXI event */
|
|
28
17
|
move(t) {
|
|
29
18
|
return !1;
|
|
30
19
|
}
|
|
31
|
-
/** Handler for pointerup PIXI event */
|
|
32
20
|
up(t) {
|
|
33
21
|
return !1;
|
|
34
22
|
}
|
|
35
|
-
/** Handler for wheel event on div */
|
|
36
23
|
wheel(t) {
|
|
37
24
|
return !1;
|
|
38
25
|
}
|
|
39
|
-
/**
|
|
40
|
-
* Called on each tick
|
|
41
|
-
* @param {number} elapsed time in millisecond since last update
|
|
42
|
-
*/
|
|
43
26
|
update(t) {
|
|
44
27
|
}
|
|
45
|
-
/** Called when the viewport is resized */
|
|
46
28
|
resize() {
|
|
47
29
|
}
|
|
48
|
-
/** Called when the viewport is manually moved */
|
|
49
30
|
reset() {
|
|
50
31
|
}
|
|
51
|
-
/** Pause the plugin */
|
|
52
32
|
pause() {
|
|
53
33
|
this.paused = !0;
|
|
54
34
|
}
|
|
55
|
-
/** Un-pause the plugin */
|
|
56
35
|
resume() {
|
|
57
36
|
this.paused = !1;
|
|
58
37
|
}
|
|
@@ -192,61 +171,33 @@ const X = {
|
|
|
192
171
|
time: 1e3
|
|
193
172
|
};
|
|
194
173
|
class u extends d {
|
|
195
|
-
/** The starting x-coordinate of the viewport. */
|
|
196
|
-
/** The starting y-coordinate of the viewport. */
|
|
197
|
-
/** The change in the x-coordinate of the viewport through the animation.*/
|
|
198
|
-
/** The change in the y-coordinate of the viewport through the animation. */
|
|
199
|
-
/** Marks whether the center of the viewport is preserved in the animation. */
|
|
200
|
-
/** The starting viewport width. */
|
|
201
174
|
__init() {
|
|
202
175
|
this.startWidth = null;
|
|
203
176
|
}
|
|
204
|
-
/** The starting viewport height. */
|
|
205
177
|
__init2() {
|
|
206
178
|
this.startHeight = null;
|
|
207
179
|
}
|
|
208
|
-
/** The change in the viewport's width through the animation. */
|
|
209
180
|
__init3() {
|
|
210
181
|
this.deltaWidth = null;
|
|
211
182
|
}
|
|
212
|
-
/** The change in the viewport's height through the animation. */
|
|
213
183
|
__init4() {
|
|
214
184
|
this.deltaHeight = null;
|
|
215
185
|
}
|
|
216
|
-
/** The viewport's width post-animation. */
|
|
217
186
|
__init5() {
|
|
218
187
|
this.width = null;
|
|
219
188
|
}
|
|
220
|
-
/** The viewport's height post-animation. */
|
|
221
189
|
__init6() {
|
|
222
190
|
this.height = null;
|
|
223
191
|
}
|
|
224
|
-
/** The time since the animation started. */
|
|
225
192
|
__init7() {
|
|
226
193
|
this.time = 0;
|
|
227
194
|
}
|
|
228
|
-
/**
|
|
229
|
-
* This is called by {@link Viewport.animate}.
|
|
230
|
-
*
|
|
231
|
-
* @param parent
|
|
232
|
-
* @param options
|
|
233
|
-
*/
|
|
234
195
|
constructor(t, e = {}) {
|
|
235
196
|
super(t), u.prototype.__init.call(this), u.prototype.__init2.call(this), u.prototype.__init3.call(this), u.prototype.__init4.call(this), u.prototype.__init5.call(this), u.prototype.__init6.call(this), u.prototype.__init7.call(this), this.options = Object.assign({}, X, e), this.options.ease = H(this.options.ease), this.setupPosition(), this.setupZoom(), this.time = 0;
|
|
236
197
|
}
|
|
237
|
-
/**
|
|
238
|
-
* Setup `startX`, `startY`, `deltaX`, `deltaY`, `keepCenter`.
|
|
239
|
-
*
|
|
240
|
-
* This is called during construction.
|
|
241
|
-
*/
|
|
242
198
|
setupPosition() {
|
|
243
199
|
typeof this.options.position < "u" ? (this.startX = this.parent.center.x, this.startY = this.parent.center.y, this.deltaX = this.options.position.x - this.parent.center.x, this.deltaY = this.options.position.y - this.parent.center.y, this.keepCenter = !1) : this.keepCenter = !0;
|
|
244
200
|
}
|
|
245
|
-
/**
|
|
246
|
-
* Setup `startWidth, `startHeight`, `deltaWidth, `deltaHeight, `width`, `height`.
|
|
247
|
-
*
|
|
248
|
-
* This is called during construction.
|
|
249
|
-
*/
|
|
250
201
|
setupZoom() {
|
|
251
202
|
this.width = null, this.height = null, typeof this.options.scale < "u" ? this.width = this.parent.screenWidth / this.options.scale : typeof this.options.scaleX < "u" || typeof this.options.scaleY < "u" ? (typeof this.options.scaleX < "u" && (this.width = this.parent.screenWidth / this.options.scaleX), typeof this.options.scaleY < "u" && (this.height = this.parent.screenHeight / this.options.scaleY)) : (typeof this.options.width < "u" && (this.width = this.options.width), typeof this.options.height < "u" && (this.height = this.options.height)), this.width !== null && (this.startWidth = this.parent.screenWidthInWorldPixels, this.deltaWidth = this.width - this.startWidth), this.height !== null && (this.startHeight = this.parent.screenHeightInWorldPixels, this.deltaHeight = this.height - this.startHeight);
|
|
252
203
|
}
|
|
@@ -309,19 +260,6 @@ const Y = {
|
|
|
309
260
|
bounceBox: null
|
|
310
261
|
};
|
|
311
262
|
class _ extends d {
|
|
312
|
-
/** The options passed to initialize this plugin, cannot be modified again. */
|
|
313
|
-
/** Holds whether to bounce from left side. */
|
|
314
|
-
/** Holds whether to bounce from top side. */
|
|
315
|
-
/** Holds whether to bounce from right side. */
|
|
316
|
-
/** Holds whether to bounce from bottom side. */
|
|
317
|
-
/** Direction of underflow along x-axis. */
|
|
318
|
-
/** Direction of underflow along y-axis. */
|
|
319
|
-
/** Easing */
|
|
320
|
-
/** Bounce state along x-axis */
|
|
321
|
-
/** Bounce state along y-axis */
|
|
322
|
-
/**
|
|
323
|
-
* This is called by {@link Viewport.bounce}.
|
|
324
|
-
*/
|
|
325
263
|
constructor(t, e = {}) {
|
|
326
264
|
super(t), this.options = Object.assign({}, Y, e), this.ease = H(this.options.ease, "easeInOutSine"), this.options.sides ? this.options.sides === "all" ? this.top = this.bottom = this.left = this.right = !0 : this.options.sides === "horizontal" ? (this.right = this.left = !0, this.top = this.bottom = !1) : this.options.sides === "vertical" ? (this.left = this.right = !1, this.top = this.bottom = !0) : (this.top = this.options.sides.indexOf("top") !== -1, this.bottom = this.options.sides.indexOf("bottom") !== -1, this.left = this.options.sides.indexOf("left") !== -1, this.right = this.options.sides.indexOf("right") !== -1) : this.left = this.top = this.right = this.bottom = !1;
|
|
327
265
|
const n = this.options.underflow.toLowerCase();
|
|
@@ -348,7 +286,6 @@ class _ extends d {
|
|
|
348
286
|
}
|
|
349
287
|
}
|
|
350
288
|
}
|
|
351
|
-
/** @internal */
|
|
352
289
|
calcUnderflowX() {
|
|
353
290
|
let t;
|
|
354
291
|
switch (this.underflowX) {
|
|
@@ -363,7 +300,6 @@ class _ extends d {
|
|
|
363
300
|
}
|
|
364
301
|
return t;
|
|
365
302
|
}
|
|
366
|
-
/** @internal */
|
|
367
303
|
calcUnderflowY() {
|
|
368
304
|
let t;
|
|
369
305
|
switch (this.underflowY) {
|
|
@@ -441,11 +377,6 @@ const A = {
|
|
|
441
377
|
underflow: "center"
|
|
442
378
|
};
|
|
443
379
|
class D extends d {
|
|
444
|
-
/** Options used to initialize this plugin, cannot be modified later. */
|
|
445
|
-
/** Last state of viewport */
|
|
446
|
-
/**
|
|
447
|
-
* This is called by {@link Viewport.clamp}.
|
|
448
|
-
*/
|
|
449
380
|
constructor(t, e = {}) {
|
|
450
381
|
super(t), this.options = Object.assign({}, A, e), this.options.direction && (this.options.left = this.options.direction === "x" || this.options.direction === "all" ? !0 : null, this.options.right = this.options.direction === "x" || this.options.direction === "all" ? !0 : null, this.options.top = this.options.direction === "y" || this.options.direction === "all" ? !0 : null, this.options.bottom = this.options.direction === "y" || this.options.direction === "all" ? !0 : null), this.parseUnderflow(), this.last = { x: null, y: null, scaleX: null, scaleY: null }, this.update();
|
|
451
382
|
}
|
|
@@ -509,16 +440,12 @@ const T = {
|
|
|
509
440
|
maxScale: null
|
|
510
441
|
};
|
|
511
442
|
class L extends d {
|
|
512
|
-
/**
|
|
513
|
-
* This is called by {@link Viewport.clampZoom}.
|
|
514
|
-
*/
|
|
515
443
|
constructor(t, e = {}) {
|
|
516
444
|
super(t), this.options = Object.assign({}, T, e), this.clamp();
|
|
517
445
|
}
|
|
518
446
|
resize() {
|
|
519
447
|
this.clamp();
|
|
520
448
|
}
|
|
521
|
-
/** Clamp the viewport scale zoom) */
|
|
522
449
|
clamp() {
|
|
523
450
|
if (!this.paused) {
|
|
524
451
|
if (this.options.minWidth || this.options.minHeight || this.options.maxWidth || this.options.maxHeight) {
|
|
@@ -568,32 +495,6 @@ const E = {
|
|
|
568
495
|
minSpeed: 0.01
|
|
569
496
|
}, m = 16;
|
|
570
497
|
class V extends d {
|
|
571
|
-
/** Options used to initialize this plugin. */
|
|
572
|
-
/**
|
|
573
|
-
* x-component of the velocity of viewport provided by this plugin, at the current time.
|
|
574
|
-
*
|
|
575
|
-
* This is measured in px/frame, where a frame is normalized to 16 milliseconds.
|
|
576
|
-
*/
|
|
577
|
-
/**
|
|
578
|
-
* y-component of the velocity of the viewport provided by this plugin, at the current time.
|
|
579
|
-
*
|
|
580
|
-
* This is measured in px/frame, where a frame is normalized to 16 milliseconds.
|
|
581
|
-
*/
|
|
582
|
-
/**
|
|
583
|
-
* The decay factor for the x-component of the viewport.
|
|
584
|
-
*
|
|
585
|
-
* The viewport's velocity decreased by this amount each 16 milliseconds.
|
|
586
|
-
*/
|
|
587
|
-
/**
|
|
588
|
-
* The decay factor for the y-component of the viewport.
|
|
589
|
-
*
|
|
590
|
-
* The viewport's velocity decreased by this amount each 16 milliseconds.
|
|
591
|
-
*/
|
|
592
|
-
/** Saved list of recent viewport position snapshots, to estimate velocity. */
|
|
593
|
-
/** The time since the user released panning of the viewport. */
|
|
594
|
-
/**
|
|
595
|
-
* This is called by {@link Viewport.decelerate}.
|
|
596
|
-
*/
|
|
597
498
|
constructor(t, e = {}) {
|
|
598
499
|
super(t), this.options = Object.assign({}, E, e), this.saved = [], this.timeSinceRelease = 0, this.reset(), this.parent.on("moved", (n) => this.moved(n));
|
|
599
500
|
}
|
|
@@ -609,7 +510,6 @@ class V extends d {
|
|
|
609
510
|
const t = this.parent.input.count();
|
|
610
511
|
return (t === 1 || t > 1 && !this.parent.plugins.get("pinch", !0)) && (this.saved.push({ x: this.parent.x, y: this.parent.y, time: performance.now() }), this.saved.length > 60 && this.saved.splice(0, 30)), !1;
|
|
611
512
|
}
|
|
612
|
-
/** Listener to viewport's "moved" event. */
|
|
613
513
|
moved(t) {
|
|
614
514
|
if (this.saved.length) {
|
|
615
515
|
const e = this.saved[this.saved.length - 1];
|
|
@@ -628,13 +528,6 @@ class V extends d {
|
|
|
628
528
|
}
|
|
629
529
|
return !1;
|
|
630
530
|
}
|
|
631
|
-
/**
|
|
632
|
-
* Manually activate deceleration, starting from the (x, y) velocity components passed in the options.
|
|
633
|
-
*
|
|
634
|
-
* @param {object} options
|
|
635
|
-
* @param {number} [options.x] - Specify x-component of initial velocity.
|
|
636
|
-
* @param {number} [options.y] - Specify y-component of initial velocity.
|
|
637
|
-
*/
|
|
638
531
|
activate(t) {
|
|
639
532
|
t = t || {}, typeof t.x < "u" && (this.x = t.x, this.percentChangeX = this.options.friction), typeof t.y < "u" && (this.y = t.y, this.percentChangeY = this.options.friction);
|
|
640
533
|
}
|
|
@@ -672,32 +565,12 @@ const B = {
|
|
|
672
565
|
wheelSwapAxes: !1
|
|
673
566
|
};
|
|
674
567
|
class M extends d {
|
|
675
|
-
/** Options used to initialize this plugin, cannot be modified later. */
|
|
676
|
-
/** Flags when viewport is moving. */
|
|
677
|
-
/** Factor to apply from {@link IDecelerateOptions}'s reverse. */
|
|
678
|
-
/** Holds whether dragging is enabled along the x-axis. */
|
|
679
|
-
/** Holds whether dragging is enabled along the y-axis. */
|
|
680
|
-
/** Flags whether the keys required to drag are pressed currently. */
|
|
681
|
-
/** Holds whether the left, center, and right buttons are required to pan. */
|
|
682
|
-
/** Underflow factor along x-axis */
|
|
683
|
-
/** Underflow factor along y-axis */
|
|
684
|
-
/** Last pointer position while panning. */
|
|
685
|
-
/** The ID of the pointer currently panning the viewport. */
|
|
686
|
-
/** Array of event-handlers for window */
|
|
687
568
|
__init() {
|
|
688
569
|
this.windowEventHandlers = new Array();
|
|
689
570
|
}
|
|
690
|
-
/**
|
|
691
|
-
* This is called by {@link Viewport.drag}.
|
|
692
|
-
*/
|
|
693
571
|
constructor(t, e = {}) {
|
|
694
572
|
super(t), M.prototype.__init.call(this), this.options = Object.assign({}, B, e), this.moved = !1, this.reverse = this.options.reverse ? 1 : -1, this.xDirection = !this.options.direction || this.options.direction === "all" || this.options.direction === "x", this.yDirection = !this.options.direction || this.options.direction === "all" || this.options.direction === "y", this.keyIsPressed = !1, this.parseUnderflow(), this.mouseButtons(this.options.mouseButtons), this.options.keyToPress && this.handleKeyPresses(this.options.keyToPress);
|
|
695
573
|
}
|
|
696
|
-
/**
|
|
697
|
-
* Handles keypress events and set the keyIsPressed boolean accordingly
|
|
698
|
-
*
|
|
699
|
-
* @param {array} codes - key codes that can be used to trigger drag event
|
|
700
|
-
*/
|
|
701
574
|
handleKeyPresses(t) {
|
|
702
575
|
const e = (i) => {
|
|
703
576
|
t.includes(i.code) && (this.keyIsPressed = !0);
|
|
@@ -714,10 +587,6 @@ class M extends d {
|
|
|
714
587
|
window.removeEventListener(t, e);
|
|
715
588
|
});
|
|
716
589
|
}
|
|
717
|
-
/**
|
|
718
|
-
* initialize mousebuttons array
|
|
719
|
-
* @param {string} buttons
|
|
720
|
-
*/
|
|
721
590
|
mouseButtons(t) {
|
|
722
591
|
!t || t === "all" ? this.mouse = [!0, !0, !0] : this.mouse = [
|
|
723
592
|
t.indexOf("left") !== -1,
|
|
@@ -729,18 +598,10 @@ class M extends d {
|
|
|
729
598
|
const t = this.options.underflow.toLowerCase();
|
|
730
599
|
t === "center" ? (this.underflowX = 0, this.underflowY = 0) : (t.includes("left") ? this.underflowX = -1 : t.includes("right") ? this.underflowX = 1 : this.underflowX = 0, t.includes("top") ? this.underflowY = -1 : t.includes("bottom") ? this.underflowY = 1 : this.underflowY = 0);
|
|
731
600
|
}
|
|
732
|
-
/**
|
|
733
|
-
* @param {PIXI.InteractionEvent} event
|
|
734
|
-
* @returns {boolean}
|
|
735
|
-
*/
|
|
736
601
|
checkButtons(t) {
|
|
737
602
|
const e = t.data.pointerType === "mouse", n = this.parent.input.count();
|
|
738
603
|
return !!((n === 1 || n > 1 && !this.parent.plugins.get("pinch", !0)) && (!e || this.mouse[t.data.button]));
|
|
739
604
|
}
|
|
740
|
-
/**
|
|
741
|
-
* @param {PIXI.InteractionEvent} event
|
|
742
|
-
* @returns {boolean}
|
|
743
|
-
*/
|
|
744
605
|
checkKeyPress(t) {
|
|
745
606
|
return !this.options.keyToPress || this.keyIsPressed || this.options.ignoreKeyToPressOnTouch && t.data.pointerType === "touch";
|
|
746
607
|
}
|
|
@@ -842,16 +703,6 @@ const U = {
|
|
|
842
703
|
radius: null
|
|
843
704
|
};
|
|
844
705
|
class j extends d {
|
|
845
|
-
/** The options used to initialize this plugin. */
|
|
846
|
-
/** The target this plugin will make the viewport follow. */
|
|
847
|
-
/** The velocity provided the viewport by following, at the current time. */
|
|
848
|
-
/**
|
|
849
|
-
* This is called by {@link Viewport.follow}.
|
|
850
|
-
*
|
|
851
|
-
* @param parent
|
|
852
|
-
* @param target - target to follow
|
|
853
|
-
* @param options
|
|
854
|
-
*/
|
|
855
706
|
constructor(t, e, n = {}) {
|
|
856
707
|
super(t), this.target = e, this.options = Object.assign({}, U, n), this.velocity = { x: 0, y: 0 };
|
|
857
708
|
}
|
|
@@ -891,7 +742,7 @@ class j extends d {
|
|
|
891
742
|
this.parent.moveCenter(n, i), this.parent.emit("moved", { viewport: this.parent, type: "follow" });
|
|
892
743
|
}
|
|
893
744
|
}
|
|
894
|
-
const
|
|
745
|
+
const Z = {
|
|
895
746
|
radius: null,
|
|
896
747
|
distance: null,
|
|
897
748
|
top: null,
|
|
@@ -904,19 +755,9 @@ const K = {
|
|
|
904
755
|
linear: !1,
|
|
905
756
|
allowButtons: !1
|
|
906
757
|
};
|
|
907
|
-
class
|
|
908
|
-
/** Options used to initialize this plugin, cannot be modified later. */
|
|
909
|
-
/** Factor from reverse option. */
|
|
910
|
-
/** Radius squared */
|
|
911
|
-
/** Scroll region size on the left side. */
|
|
912
|
-
/** Scroll region size on the top size. */
|
|
913
|
-
/** Scroll region size on the right side. */
|
|
914
|
-
/** Scroll region size on the bottom side. */
|
|
915
|
-
/**
|
|
916
|
-
* This is called by {@link Viewport.mouseEdges}.
|
|
917
|
-
*/
|
|
758
|
+
class q extends d {
|
|
918
759
|
constructor(t, e = {}) {
|
|
919
|
-
super(t), this.options = Object.assign({},
|
|
760
|
+
super(t), this.options = Object.assign({}, Z, e), this.reverse = this.options.reverse ? 1 : -1, this.radiusSquared = typeof this.options.radius == "number" ? Math.pow(this.options.radius, 2) : null, this.resize();
|
|
920
761
|
}
|
|
921
762
|
resize() {
|
|
922
763
|
const t = this.options.distance;
|
|
@@ -958,7 +799,7 @@ class Z extends d {
|
|
|
958
799
|
}
|
|
959
800
|
}
|
|
960
801
|
}
|
|
961
|
-
const
|
|
802
|
+
const F = {
|
|
962
803
|
noDrag: !1,
|
|
963
804
|
percent: 1,
|
|
964
805
|
center: null,
|
|
@@ -966,23 +807,17 @@ const q = {
|
|
|
966
807
|
axis: "all"
|
|
967
808
|
};
|
|
968
809
|
class y extends d {
|
|
969
|
-
/** Options used to initialize this plugin. */
|
|
970
|
-
/** Flags whether this plugin is active, i.e. a pointer is down on the viewport. */
|
|
971
810
|
__init() {
|
|
972
811
|
this.active = !1;
|
|
973
812
|
}
|
|
974
|
-
/** Flags whether the viewport is being pinched. */
|
|
975
813
|
__init2() {
|
|
976
814
|
this.pinching = !1;
|
|
977
815
|
}
|
|
978
816
|
__init3() {
|
|
979
817
|
this.moved = !1;
|
|
980
818
|
}
|
|
981
|
-
/**
|
|
982
|
-
* This is called by {@link Viewport.pinch}.
|
|
983
|
-
*/
|
|
984
819
|
constructor(t, e = {}) {
|
|
985
|
-
super(t), y.prototype.__init.call(this), y.prototype.__init2.call(this), y.prototype.__init3.call(this), this.options = Object.assign({},
|
|
820
|
+
super(t), y.prototype.__init.call(this), y.prototype.__init2.call(this), y.prototype.__init3.call(this), this.options = Object.assign({}, F, e);
|
|
986
821
|
}
|
|
987
822
|
down() {
|
|
988
823
|
return this.parent.input.count() >= 2 ? (this.active = !0, !0) : !1;
|
|
@@ -1031,7 +866,7 @@ class y extends d {
|
|
|
1031
866
|
return this.pinching && this.parent.input.touches.length <= 1 ? (this.active = !1, this.lastCenter = null, this.pinching = !1, this.moved = !1, this.parent.emit("pinch-end", this.parent), !0) : !1;
|
|
1032
867
|
}
|
|
1033
868
|
}
|
|
1034
|
-
const
|
|
869
|
+
const K = {
|
|
1035
870
|
topLeft: !1,
|
|
1036
871
|
friction: 0.8,
|
|
1037
872
|
time: 1e3,
|
|
@@ -1042,11 +877,8 @@ const F = {
|
|
|
1042
877
|
forceStart: !1
|
|
1043
878
|
};
|
|
1044
879
|
class Q extends d {
|
|
1045
|
-
/**
|
|
1046
|
-
* This is called by {@link Viewport.snap}.
|
|
1047
|
-
*/
|
|
1048
880
|
constructor(t, e, n, i = {}) {
|
|
1049
|
-
super(t), this.options = Object.assign({},
|
|
881
|
+
super(t), this.options = Object.assign({}, K, i), this.ease = H(i.ease, "easeInOutSine"), this.x = e, this.y = n, this.options.forceStart && this.snapStart();
|
|
1050
882
|
}
|
|
1051
883
|
snapStart() {
|
|
1052
884
|
this.percent = 0, this.snapping = { time: 0 };
|
|
@@ -1099,9 +931,6 @@ const R = {
|
|
|
1099
931
|
noMove: !1
|
|
1100
932
|
};
|
|
1101
933
|
class G extends d {
|
|
1102
|
-
/**
|
|
1103
|
-
* This is called by {@link Viewport.snapZoom}.
|
|
1104
|
-
*/
|
|
1105
934
|
constructor(t, e = {}) {
|
|
1106
935
|
super(t), this.options = Object.assign({}, R, e), this.ease = H(this.options.ease), this.xIndependent = !1, this.yIndependent = !1, this.xScale = 0, this.yScale = 0, this.options.width > 0 && (this.xScale = t.screenWidth / this.options.width, this.xIndependent = !0), this.options.height > 0 && (this.yScale = t.screenHeight / this.options.height, this.yIndependent = !0), this.xScale = this.xIndependent ? this.xScale : this.yScale, this.yScale = this.yIndependent ? this.yScale : this.xScale, this.options.time === 0 ? (t.container.scale.x = this.xScale, t.container.scale.y = this.yScale, this.options.removeOnComplete && this.parent.plugins.remove("snap-zoom")) : e.forceStart && this.createSnapping();
|
|
1107
936
|
}
|
|
@@ -1146,7 +975,7 @@ class G extends d {
|
|
|
1146
975
|
this.snapping = null, super.resume();
|
|
1147
976
|
}
|
|
1148
977
|
}
|
|
1149
|
-
const
|
|
978
|
+
const J = {
|
|
1150
979
|
percent: 0.1,
|
|
1151
980
|
smooth: !1,
|
|
1152
981
|
interrupt: !0,
|
|
@@ -1158,19 +987,10 @@ const N = {
|
|
|
1158
987
|
trackpadPinch: !1,
|
|
1159
988
|
wheelZoom: !0
|
|
1160
989
|
};
|
|
1161
|
-
class
|
|
1162
|
-
/** Flags whether the keys required to zoom are pressed currently. */
|
|
1163
|
-
/**
|
|
1164
|
-
* This is called by {@link Viewport.wheel}.
|
|
1165
|
-
*/
|
|
990
|
+
class N extends d {
|
|
1166
991
|
constructor(t, e = {}) {
|
|
1167
|
-
super(t), this.options = Object.assign({},
|
|
992
|
+
super(t), this.options = Object.assign({}, J, e), this.keyIsPressed = !1, this.options.keyToPress && this.handleKeyPresses(this.options.keyToPress);
|
|
1168
993
|
}
|
|
1169
|
-
/**
|
|
1170
|
-
* Handles keypress events and set the keyIsPressed boolean accordingly
|
|
1171
|
-
*
|
|
1172
|
-
* @param {array} codes - key codes that can be used to trigger zoom event
|
|
1173
|
-
*/
|
|
1174
994
|
handleKeyPresses(t) {
|
|
1175
995
|
window.addEventListener("keydown", (e) => {
|
|
1176
996
|
t.includes(e.code) && (this.keyIsPressed = !0);
|
|
@@ -1258,12 +1078,10 @@ class $ extends d {
|
|
|
1258
1078
|
return !this.parent.options.passiveWheel;
|
|
1259
1079
|
}
|
|
1260
1080
|
}
|
|
1261
|
-
class
|
|
1262
|
-
/** List of active touches on viewport */
|
|
1081
|
+
class $ {
|
|
1263
1082
|
constructor(t) {
|
|
1264
1083
|
this.viewport = t, this.touches = [], this.addListeners();
|
|
1265
1084
|
}
|
|
1266
|
-
/** Add input listeners */
|
|
1267
1085
|
addListeners() {
|
|
1268
1086
|
this.viewport.interactive = !0, this.viewport.forceHitArea || (this.viewport.hitArea = new b(0, 0, this.viewport.worldWidth, this.viewport.worldHeight)), this.viewport.on("pointerdown", this.down, this), this.viewport.on("pointermove", this.move, this), this.viewport.on("pointerup", this.up, this), this.viewport.on("pointerupoutside", this.up, this), this.viewport.on("pointercancel", this.up, this), this.viewport.on("pointerout", this.up, this), this.wheelFunction = (t) => this.handleWheel(t), this.viewport.options.divWheel.addEventListener(
|
|
1269
1087
|
"wheel",
|
|
@@ -1271,18 +1089,9 @@ class J {
|
|
|
1271
1089
|
{ passive: this.viewport.options.passiveWheel }
|
|
1272
1090
|
), this.isMouseDown = !1;
|
|
1273
1091
|
}
|
|
1274
|
-
/**
|
|
1275
|
-
* Removes all event listeners from viewport
|
|
1276
|
-
* (useful for cleanup of wheel when removing viewport)
|
|
1277
|
-
*/
|
|
1278
1092
|
destroy() {
|
|
1279
1093
|
this.viewport.options.divWheel.removeEventListener("wheel", this.wheelFunction);
|
|
1280
1094
|
}
|
|
1281
|
-
/**
|
|
1282
|
-
* handle down events for viewport
|
|
1283
|
-
*
|
|
1284
|
-
* @param {PIXI.InteractionEvent} event
|
|
1285
|
-
*/
|
|
1286
1095
|
down(t) {
|
|
1287
1096
|
if (!(this.viewport.pause || !this.viewport.worldVisible)) {
|
|
1288
1097
|
if (t.data.pointerType === "mouse" ? this.isMouseDown = !0 : this.get(t.data.pointerId) || this.touches.push({ id: t.data.pointerId, last: null }), this.count() === 1) {
|
|
@@ -1294,18 +1103,12 @@ class J {
|
|
|
1294
1103
|
this.viewport.plugins.down(t) && this.viewport.options.stopPropagation && t.stopPropagation();
|
|
1295
1104
|
}
|
|
1296
1105
|
}
|
|
1297
|
-
/** Clears all pointer events */
|
|
1298
1106
|
clear() {
|
|
1299
1107
|
this.isMouseDown = !1, this.touches = [], this.last = null;
|
|
1300
1108
|
}
|
|
1301
|
-
/**
|
|
1302
|
-
* @param {number} change
|
|
1303
|
-
* @returns whether change exceeds threshold
|
|
1304
|
-
*/
|
|
1305
1109
|
checkThreshold(t) {
|
|
1306
1110
|
return Math.abs(t) >= this.viewport.threshold;
|
|
1307
1111
|
}
|
|
1308
|
-
/** Handle move events for viewport */
|
|
1309
1112
|
move(t) {
|
|
1310
1113
|
if (this.viewport.pause || !this.viewport.worldVisible)
|
|
1311
1114
|
return;
|
|
@@ -1316,7 +1119,6 @@ class J {
|
|
|
1316
1119
|
}
|
|
1317
1120
|
e && this.viewport.options.stopPropagation && t.stopPropagation();
|
|
1318
1121
|
}
|
|
1319
|
-
/** Handle up events for viewport */
|
|
1320
1122
|
up(t) {
|
|
1321
1123
|
if (this.viewport.pause || !this.viewport.worldVisible)
|
|
1322
1124
|
return;
|
|
@@ -1329,7 +1131,6 @@ class J {
|
|
|
1329
1131
|
viewport: this
|
|
1330
1132
|
}), this.clickedAvailable = !1), e && this.viewport.options.stopPropagation && t.stopPropagation();
|
|
1331
1133
|
}
|
|
1332
|
-
/** Gets pointer position if this.interaction is set */
|
|
1333
1134
|
getPointerPosition(t) {
|
|
1334
1135
|
const e = new c();
|
|
1335
1136
|
if (this.viewport.options.interaction)
|
|
@@ -1341,7 +1142,6 @@ class J {
|
|
|
1341
1142
|
e.x = t.clientX, e.y = t.clientY;
|
|
1342
1143
|
return e;
|
|
1343
1144
|
}
|
|
1344
|
-
/** Handle wheel events */
|
|
1345
1145
|
handleWheel(t) {
|
|
1346
1146
|
if (this.viewport.pause || !this.viewport.worldVisible || this.viewport.options.interaction && this.viewport.options.interaction.interactionDOMElement !== t.target)
|
|
1347
1147
|
return;
|
|
@@ -1351,14 +1151,12 @@ class J {
|
|
|
1351
1151
|
pause() {
|
|
1352
1152
|
this.touches = [], this.isMouseDown = !1;
|
|
1353
1153
|
}
|
|
1354
|
-
/** Get touch by id */
|
|
1355
1154
|
get(t) {
|
|
1356
1155
|
for (const e of this.touches)
|
|
1357
1156
|
if (e.id === t)
|
|
1358
1157
|
return e;
|
|
1359
1158
|
return null;
|
|
1360
1159
|
}
|
|
1361
|
-
/** Remove touch by number */
|
|
1362
1160
|
remove(t) {
|
|
1363
1161
|
for (let e = 0; e < this.touches.length; e++)
|
|
1364
1162
|
if (this.touches[e].id === t) {
|
|
@@ -1366,9 +1164,6 @@ class J {
|
|
|
1366
1164
|
return;
|
|
1367
1165
|
}
|
|
1368
1166
|
}
|
|
1369
|
-
/**
|
|
1370
|
-
* @returns {number} count of mouse/touch pointers that are down on the viewport
|
|
1371
|
-
*/
|
|
1372
1167
|
count() {
|
|
1373
1168
|
return (this.isMouseDown ? 1 : 0) + this.touches.length;
|
|
1374
1169
|
}
|
|
@@ -1398,150 +1193,67 @@ const w = [
|
|
|
1398
1193
|
"clamp"
|
|
1399
1194
|
];
|
|
1400
1195
|
class tt {
|
|
1401
|
-
/** Maps mounted plugins by their type */
|
|
1402
|
-
/**
|
|
1403
|
-
* List of plugins mounted
|
|
1404
|
-
*
|
|
1405
|
-
* This list is kept sorted by the internal priority of plugins (hard-coded).
|
|
1406
|
-
*/
|
|
1407
|
-
/** The viewport using the plugins managed by `this`. */
|
|
1408
|
-
/** This is called by {@link Viewport} to initialize the {@link Viewport.plugins plugins}. */
|
|
1409
1196
|
constructor(t) {
|
|
1410
1197
|
this.viewport = t, this.list = [], this.plugins = {};
|
|
1411
1198
|
}
|
|
1412
|
-
/**
|
|
1413
|
-
* Inserts a named plugin or a user plugin into the viewport
|
|
1414
|
-
* default plugin order: 'drag', 'pinch', 'wheel', 'follow', 'mouse-edges', 'decelerate', 'bounce',
|
|
1415
|
-
* 'snap-zoom', 'clamp-zoom', 'snap', 'clamp'
|
|
1416
|
-
*
|
|
1417
|
-
* @param {string} name of plugin
|
|
1418
|
-
* @param {Plugin} plugin - instantiated Plugin class
|
|
1419
|
-
* @param {number} index to insert userPlugin (otherwise inserts it at the end)
|
|
1420
|
-
*/
|
|
1421
1199
|
add(t, e, n = w.length) {
|
|
1422
1200
|
const i = this.plugins[t];
|
|
1423
1201
|
i && i.destroy(), this.plugins[t] = e;
|
|
1424
1202
|
const s = w.indexOf(t);
|
|
1425
1203
|
s !== -1 && w.splice(s, 1), w.splice(n, 0, t), this.sort();
|
|
1426
1204
|
}
|
|
1427
|
-
/**
|
|
1428
|
-
* Get plugin
|
|
1429
|
-
*
|
|
1430
|
-
* @param {string} name of plugin
|
|
1431
|
-
* @param {boolean} [ignorePaused] return null if plugin is paused
|
|
1432
|
-
*/
|
|
1433
1205
|
get(t, e) {
|
|
1434
1206
|
return e && W([this, "access", (n) => n.plugins, "access", (n) => n[t], "optionalAccess", (n) => n.paused]) ? null : this.plugins[t];
|
|
1435
1207
|
}
|
|
1436
|
-
/**
|
|
1437
|
-
* Update all active plugins
|
|
1438
|
-
*
|
|
1439
|
-
* @internal
|
|
1440
|
-
* @ignore
|
|
1441
|
-
* @param {number} elapsed type in milliseconds since last update
|
|
1442
|
-
*/
|
|
1443
1208
|
update(t) {
|
|
1444
1209
|
for (const e of this.list)
|
|
1445
1210
|
e.update(t);
|
|
1446
1211
|
}
|
|
1447
|
-
/**
|
|
1448
|
-
* Resize all active plugins
|
|
1449
|
-
*
|
|
1450
|
-
* @internal
|
|
1451
|
-
* @ignore
|
|
1452
|
-
*/
|
|
1453
1212
|
resize() {
|
|
1454
1213
|
for (const t of this.list)
|
|
1455
1214
|
t.resize();
|
|
1456
1215
|
}
|
|
1457
|
-
/** Clamps and resets bounce and decelerate (as needed) after manually moving viewport */
|
|
1458
1216
|
reset() {
|
|
1459
1217
|
for (const t of this.list)
|
|
1460
1218
|
t.reset();
|
|
1461
1219
|
}
|
|
1462
|
-
/** removes all installed plugins */
|
|
1463
1220
|
removeAll() {
|
|
1464
1221
|
this.list.forEach((t) => {
|
|
1465
1222
|
t.destroy();
|
|
1466
1223
|
}), this.plugins = {}, this.sort();
|
|
1467
1224
|
}
|
|
1468
|
-
/**
|
|
1469
|
-
* Removes installed plugin
|
|
1470
|
-
*
|
|
1471
|
-
* @param {string} name of plugin (e.g., 'drag', 'pinch')
|
|
1472
|
-
*/
|
|
1473
1225
|
remove(t) {
|
|
1474
1226
|
this.plugins[t] && (W([this, "access", (e) => e.plugins, "access", (e) => e[t], "optionalAccess", (e) => e.destroy, "call", (e) => e()]), delete this.plugins[t], this.viewport.emit(`${t}-remove`), this.sort());
|
|
1475
1227
|
}
|
|
1476
|
-
/**
|
|
1477
|
-
* Pause plugin
|
|
1478
|
-
*
|
|
1479
|
-
* @param {string} name of plugin (e.g., 'drag', 'pinch')
|
|
1480
|
-
*/
|
|
1481
1228
|
pause(t) {
|
|
1482
1229
|
W([this, "access", (e) => e.plugins, "access", (e) => e[t], "optionalAccess", (e) => e.pause, "call", (e) => e()]);
|
|
1483
1230
|
}
|
|
1484
|
-
/**
|
|
1485
|
-
* Resume plugin
|
|
1486
|
-
*
|
|
1487
|
-
* @param {string} name of plugin (e.g., 'drag', 'pinch')
|
|
1488
|
-
*/
|
|
1489
1231
|
resume(t) {
|
|
1490
1232
|
W([this, "access", (e) => e.plugins, "access", (e) => e[t], "optionalAccess", (e) => e.resume, "call", (e) => e()]);
|
|
1491
1233
|
}
|
|
1492
|
-
/**
|
|
1493
|
-
* Sort plugins according to PLUGIN_ORDER
|
|
1494
|
-
*
|
|
1495
|
-
* @internal
|
|
1496
|
-
* @ignore
|
|
1497
|
-
*/
|
|
1498
1234
|
sort() {
|
|
1499
1235
|
this.list = [];
|
|
1500
1236
|
for (const t of w)
|
|
1501
1237
|
this.plugins[t] && this.list.push(this.plugins[t]);
|
|
1502
1238
|
}
|
|
1503
|
-
/**
|
|
1504
|
-
* Handle down for all plugins
|
|
1505
|
-
*
|
|
1506
|
-
* @internal
|
|
1507
|
-
* @ignore
|
|
1508
|
-
*/
|
|
1509
1239
|
down(t) {
|
|
1510
1240
|
let e = !1;
|
|
1511
1241
|
for (const n of this.list)
|
|
1512
1242
|
n.down(t) && (e = !0);
|
|
1513
1243
|
return e;
|
|
1514
1244
|
}
|
|
1515
|
-
/**
|
|
1516
|
-
* Handle move for all plugins
|
|
1517
|
-
*
|
|
1518
|
-
* @internal
|
|
1519
|
-
* @ignore
|
|
1520
|
-
*/
|
|
1521
1245
|
move(t) {
|
|
1522
1246
|
let e = !1;
|
|
1523
1247
|
for (const n of this.viewport.plugins.list)
|
|
1524
1248
|
n.move(t) && (e = !0);
|
|
1525
1249
|
return e;
|
|
1526
1250
|
}
|
|
1527
|
-
/**
|
|
1528
|
-
* Handle up for all plugins
|
|
1529
|
-
*
|
|
1530
|
-
* @internal
|
|
1531
|
-
* @ignore
|
|
1532
|
-
*/
|
|
1533
1251
|
up(t) {
|
|
1534
1252
|
let e = !1;
|
|
1535
1253
|
for (const n of this.list)
|
|
1536
1254
|
n.up(t) && (e = !0);
|
|
1537
1255
|
return e;
|
|
1538
1256
|
}
|
|
1539
|
-
/**
|
|
1540
|
-
* Handle wheel event for all plugins
|
|
1541
|
-
*
|
|
1542
|
-
* @internal
|
|
1543
|
-
* @ignore
|
|
1544
|
-
*/
|
|
1545
1257
|
wheel(t) {
|
|
1546
1258
|
let e = !1;
|
|
1547
1259
|
for (const n of this.list)
|
|
@@ -1564,54 +1276,20 @@ const et = {
|
|
|
1564
1276
|
ticker: O.shared
|
|
1565
1277
|
};
|
|
1566
1278
|
class C extends k {
|
|
1567
|
-
/** Flags whether the viewport is being panned */
|
|
1568
|
-
/** Number of pixels to move to trigger an input event (e.g., drag, pinch) or disable a clicked event */
|
|
1569
|
-
/** Use this to add user plugins or access existing plugins (e.g., to pause, resume, or remove them) */
|
|
1570
|
-
/** Flags whether the viewport zoom is being changed. */
|
|
1571
|
-
/** The options passed when creating this viewport, merged with the default values */
|
|
1572
1279
|
__init() {
|
|
1573
1280
|
this._disableOnContextMenu = (t) => t.preventDefault();
|
|
1574
1281
|
}
|
|
1575
|
-
/**
|
|
1576
|
-
* @param {IViewportOptions} ViewportOptions
|
|
1577
|
-
* @param {number} [options.screenWidth=window.innerWidth]
|
|
1578
|
-
* @param {number} [options.screenHeight=window.innerHeight]
|
|
1579
|
-
* @param {number} [options.worldWidth=this.width]
|
|
1580
|
-
* @param {number} [options.worldHeight=this.height]
|
|
1581
|
-
* @param {number} [options.threshold=5] number of pixels to move to trigger an input event (e.g., drag, pinch)
|
|
1582
|
-
* or disable a clicked event
|
|
1583
|
-
* @param {boolean} [options.passiveWheel=true] whether the 'wheel' event is set to passive (note: if false,
|
|
1584
|
-
* e.preventDefault() will be called when wheel is used over the viewport)
|
|
1585
|
-
* @param {boolean} [options.stopPropagation=false] whether to stopPropagation of events that impact the viewport
|
|
1586
|
-
* (except wheel events, see options.passiveWheel)
|
|
1587
|
-
* @param {HitArea} [options.forceHitArea] change the default hitArea from world size to a new value
|
|
1588
|
-
* @param {boolean} [options.noTicker] set this if you want to manually call update() function on each frame
|
|
1589
|
-
* @param {PIXI.Ticker} [options.ticker=PIXI.Ticker.shared] use this PIXI.ticker for updates
|
|
1590
|
-
* @param {PIXI.InteractionManager} [options.interaction=null] InteractionManager, available from instantiated
|
|
1591
|
-
* WebGLRenderer/CanvasRenderer.plugins.interaction - used to calculate pointer position relative to canvas
|
|
1592
|
-
* location on screen
|
|
1593
|
-
* @param {HTMLElement} [options.divWheel=document.body] div to attach the wheel event
|
|
1594
|
-
* @param {boolean} [options.disableOnContextMenu] remove oncontextmenu=() => {} from the divWheel element
|
|
1595
|
-
*/
|
|
1596
1282
|
constructor(t = {}) {
|
|
1597
1283
|
super(), C.prototype.__init.call(this), this.options = Object.assign(
|
|
1598
1284
|
{},
|
|
1599
1285
|
{ divWheel: document.body },
|
|
1600
1286
|
et,
|
|
1601
1287
|
t
|
|
1602
|
-
), this.screenWidth = this.options.screenWidth, this.screenHeight = this.options.screenHeight, this._worldWidth = this.options.worldWidth, this._worldHeight = this.options.worldHeight, this.forceHitArea = this.options.forceHitArea, this.threshold = this.options.threshold, this.options.divWheel = this.options.divWheel || document.body, this.options.disableOnContextMenu && this.options.divWheel.addEventListener("contextmenu", this._disableOnContextMenu), this.options.noTicker || (this.tickerFunction = () => this.update(this.options.ticker.elapsedMS), this.options.ticker.add(this.tickerFunction)), this.input = new
|
|
1288
|
+
), this.screenWidth = this.options.screenWidth, this.screenHeight = this.options.screenHeight, this._worldWidth = this.options.worldWidth, this._worldHeight = this.options.worldHeight, this.forceHitArea = this.options.forceHitArea, this.threshold = this.options.threshold, this.options.divWheel = this.options.divWheel || document.body, this.options.disableOnContextMenu && this.options.divWheel.addEventListener("contextmenu", this._disableOnContextMenu), this.options.noTicker || (this.tickerFunction = () => this.update(this.options.ticker.elapsedMS), this.options.ticker.add(this.tickerFunction)), this.input = new $(this), this.plugins = new tt(this);
|
|
1603
1289
|
}
|
|
1604
|
-
/** Overrides PIXI.Container's destroy to also remove the 'wheel' and PIXI.Ticker listeners */
|
|
1605
1290
|
destroy(t) {
|
|
1606
1291
|
!this.options.noTicker && this.tickerFunction && this.options.ticker.remove(this.tickerFunction), this.options.disableOnContextMenu && this.options.divWheel.removeEventListener("contextmenu", this._disableOnContextMenu), this.input.destroy(), super.destroy(t);
|
|
1607
1292
|
}
|
|
1608
|
-
/**
|
|
1609
|
-
* Update viewport on each frame.
|
|
1610
|
-
*
|
|
1611
|
-
* By default, you do not need to call this unless you set `options.noTicker=true`.
|
|
1612
|
-
*
|
|
1613
|
-
* @param {number} elapsed time in milliseconds since last update
|
|
1614
|
-
*/
|
|
1615
1293
|
update(t) {
|
|
1616
1294
|
this.pause || (this.plugins.update(t), this.lastViewport && (this.lastViewport.x !== this.x || this.lastViewport.y !== this.y ? this.moving = !0 : this.moving && (this.emit("moved-end", this), this.moving = !1), this.lastViewport.scaleX !== this.scale.x || this.lastViewport.scaleY !== this.scale.y ? this.zooming = !0 : this.zooming && (this.emit("zoomed-end", this), this.zooming = !1)), this.forceHitArea || (this._hitAreaDefault = new b(this.left, this.top, this.worldScreenWidth, this.worldScreenHeight), this.hitArea = this._hitAreaDefault), this._dirty = this._dirty || !this.lastViewport || this.lastViewport.x !== this.x || this.lastViewport.y !== this.y || this.lastViewport.scaleX !== this.scale.x || this.lastViewport.scaleY !== this.scale.y, this.lastViewport = {
|
|
1617
1295
|
x: this.x,
|
|
@@ -1620,71 +1298,42 @@ class C extends k {
|
|
|
1620
1298
|
scaleY: this.scale.y
|
|
1621
1299
|
}, this.emit("frame-end", this));
|
|
1622
1300
|
}
|
|
1623
|
-
/**
|
|
1624
|
-
* Use this to set screen and world sizes, needed for pinch/wheel/clamp/bounce.
|
|
1625
|
-
* @param {number} screenWidth=window.innerWidth
|
|
1626
|
-
* @param {number} screenHeight=window.innerHeight
|
|
1627
|
-
* @param {number} [worldWidth]
|
|
1628
|
-
* @param {number} [worldHeight]
|
|
1629
|
-
*/
|
|
1630
1301
|
resize(t = window.innerWidth, e = window.innerHeight, n, i) {
|
|
1631
1302
|
this.screenWidth = t, this.screenHeight = e, typeof n < "u" && (this._worldWidth = n), typeof i < "u" && (this._worldHeight = i), this.plugins.resize(), this.dirty = !0;
|
|
1632
1303
|
}
|
|
1633
|
-
/** World width, in pixels */
|
|
1634
1304
|
get worldWidth() {
|
|
1635
1305
|
return this._worldWidth ? this._worldWidth : this.width / this.scale.x;
|
|
1636
1306
|
}
|
|
1637
1307
|
set worldWidth(t) {
|
|
1638
1308
|
this._worldWidth = t, this.plugins.resize();
|
|
1639
1309
|
}
|
|
1640
|
-
/** World height, in pixels */
|
|
1641
1310
|
get worldHeight() {
|
|
1642
1311
|
return this._worldHeight ? this._worldHeight : this.height / this.scale.y;
|
|
1643
1312
|
}
|
|
1644
1313
|
set worldHeight(t) {
|
|
1645
1314
|
this._worldHeight = t, this.plugins.resize();
|
|
1646
1315
|
}
|
|
1647
|
-
/** Get visible world bounds of viewport */
|
|
1648
1316
|
getVisibleBounds() {
|
|
1649
1317
|
return new b(this.left, this.top, this.worldScreenWidth, this.worldScreenHeight);
|
|
1650
1318
|
}
|
|
1651
|
-
/** Change coordinates from screen to world */
|
|
1652
|
-
/**
|
|
1653
|
-
* Changes coordinate from screen to world
|
|
1654
|
-
* @param {number|PIXI.Point} x
|
|
1655
|
-
* @param {number} y
|
|
1656
|
-
* @returns {PIXI.Point}
|
|
1657
|
-
*/
|
|
1658
1319
|
toWorld(t, e) {
|
|
1659
1320
|
return arguments.length === 2 ? this.toLocal(new c(t, e)) : this.toLocal(t);
|
|
1660
1321
|
}
|
|
1661
|
-
/** Change coordinates from world to screen */
|
|
1662
|
-
/**
|
|
1663
|
-
* Changes coordinate from world to screen
|
|
1664
|
-
* @param {number|PIXI.Point} x
|
|
1665
|
-
* @param {number} y
|
|
1666
|
-
* @returns {PIXI.Point}
|
|
1667
|
-
*/
|
|
1668
1322
|
toScreen(t, e) {
|
|
1669
1323
|
return arguments.length === 2 ? this.toGlobal(new c(t, e)) : this.toGlobal(t);
|
|
1670
1324
|
}
|
|
1671
|
-
/** Screen width in world coordinates */
|
|
1672
1325
|
get worldScreenWidth() {
|
|
1673
1326
|
return this.screenWidth / this.scale.x;
|
|
1674
1327
|
}
|
|
1675
|
-
/** Screen height in world coordinates */
|
|
1676
1328
|
get worldScreenHeight() {
|
|
1677
1329
|
return this.screenHeight / this.scale.y;
|
|
1678
1330
|
}
|
|
1679
|
-
/** World width in screen coordinates */
|
|
1680
1331
|
get screenWorldWidth() {
|
|
1681
1332
|
return this.worldWidth * this.scale.x;
|
|
1682
1333
|
}
|
|
1683
|
-
/** World height in screen coordinates */
|
|
1684
1334
|
get screenWorldHeight() {
|
|
1685
1335
|
return this.worldHeight * this.scale.y;
|
|
1686
1336
|
}
|
|
1687
|
-
/** Center of screen in world coordinates */
|
|
1688
1337
|
get center() {
|
|
1689
1338
|
return new c(
|
|
1690
1339
|
this.worldScreenWidth / 2 - this.x / this.scale.x,
|
|
@@ -1694,205 +1343,87 @@ class C extends k {
|
|
|
1694
1343
|
set center(t) {
|
|
1695
1344
|
this.moveCenter(t);
|
|
1696
1345
|
}
|
|
1697
|
-
/**
|
|
1698
|
-
* Move center of viewport to (x, y)
|
|
1699
|
-
* @param {number|PIXI.Point} x
|
|
1700
|
-
* @param {number} [y]
|
|
1701
|
-
* @return {Viewport}
|
|
1702
|
-
*/
|
|
1703
1346
|
moveCenter(...t) {
|
|
1704
1347
|
let e, n;
|
|
1705
1348
|
typeof t[0] == "number" ? (e = t[0], n = t[1]) : (e = t[0].x, n = t[0].y);
|
|
1706
1349
|
const i = (this.worldScreenWidth / 2 - e) * this.scale.x, s = (this.worldScreenHeight / 2 - n) * this.scale.y;
|
|
1707
1350
|
return (this.x !== i || this.y !== s) && (this.position.set(i, s), this.plugins.reset(), this.dirty = !0), this;
|
|
1708
1351
|
}
|
|
1709
|
-
/** Top-left corner of Viewport */
|
|
1710
1352
|
get corner() {
|
|
1711
1353
|
return new c(-this.x / this.scale.x, -this.y / this.scale.y);
|
|
1712
1354
|
}
|
|
1713
1355
|
set corner(t) {
|
|
1714
1356
|
this.moveCorner(t);
|
|
1715
1357
|
}
|
|
1716
|
-
/** Move Viewport's top-left corner; also clamps and resets decelerate and bounce (as needed) */
|
|
1717
|
-
/**
|
|
1718
|
-
* MoveCorner
|
|
1719
|
-
* @param {number|PIXI.Point} x
|
|
1720
|
-
* @param {number} [y]
|
|
1721
|
-
* @returns {Viewport}
|
|
1722
|
-
*/
|
|
1723
1358
|
moveCorner(...t) {
|
|
1724
1359
|
let e, n;
|
|
1725
1360
|
return t.length === 1 ? (e = -t[0].x * this.scale.x, n = -t[0].y * this.scale.y) : (e = -t[0] * this.scale.x, n = -t[1] * this.scale.y), (e !== this.x || n !== this.y) && (this.position.set(e, n), this.plugins.reset(), this.dirty = !0), this;
|
|
1726
1361
|
}
|
|
1727
|
-
/** Get how many world pixels fit in screen's width */
|
|
1728
1362
|
get screenWidthInWorldPixels() {
|
|
1729
1363
|
return this.screenWidth / this.scale.x;
|
|
1730
1364
|
}
|
|
1731
|
-
/** Get how many world pixels fit on screen's height */
|
|
1732
1365
|
get screenHeightInWorldPixels() {
|
|
1733
1366
|
return this.screenHeight / this.scale.y;
|
|
1734
1367
|
}
|
|
1735
|
-
/**
|
|
1736
|
-
* Find the scale value that fits a world width on the screen
|
|
1737
|
-
* does not change the viewport (use fit... to change)
|
|
1738
|
-
*
|
|
1739
|
-
* @param width - Width in world pixels
|
|
1740
|
-
* @return - scale
|
|
1741
|
-
*/
|
|
1742
1368
|
findFitWidth(t) {
|
|
1743
1369
|
return this.screenWidth / t;
|
|
1744
1370
|
}
|
|
1745
|
-
/**
|
|
1746
|
-
* Finds the scale value that fits a world height on the screens
|
|
1747
|
-
* does not change the viewport (use fit... to change)
|
|
1748
|
-
*
|
|
1749
|
-
* @param height - Height in world pixels
|
|
1750
|
-
* @return - scale
|
|
1751
|
-
*/
|
|
1752
1371
|
findFitHeight(t) {
|
|
1753
1372
|
return this.screenHeight / t;
|
|
1754
1373
|
}
|
|
1755
|
-
/**
|
|
1756
|
-
* Finds the scale value that fits the smaller of a world width and world height on the screen
|
|
1757
|
-
* does not change the viewport (use fit... to change)
|
|
1758
|
-
*
|
|
1759
|
-
* @param {number} width in world pixels
|
|
1760
|
-
* @param {number} height in world pixels
|
|
1761
|
-
* @returns {number} scale
|
|
1762
|
-
*/
|
|
1763
1374
|
findFit(t, e) {
|
|
1764
1375
|
const n = this.screenWidth / t, i = this.screenHeight / e;
|
|
1765
1376
|
return Math.min(n, i);
|
|
1766
1377
|
}
|
|
1767
|
-
/**
|
|
1768
|
-
* Finds the scale value that fits the larger of a world width and world height on the screen
|
|
1769
|
-
* does not change the viewport (use fit... to change)
|
|
1770
|
-
*
|
|
1771
|
-
* @param {number} width in world pixels
|
|
1772
|
-
* @param {number} height in world pixels
|
|
1773
|
-
* @returns {number} scale
|
|
1774
|
-
*/
|
|
1775
1378
|
findCover(t, e) {
|
|
1776
1379
|
const n = this.screenWidth / t, i = this.screenHeight / e;
|
|
1777
1380
|
return Math.max(n, i);
|
|
1778
1381
|
}
|
|
1779
|
-
/**
|
|
1780
|
-
* Change zoom so the width fits in the viewport
|
|
1781
|
-
*
|
|
1782
|
-
* @param width - width in world coordinates
|
|
1783
|
-
* @param center - maintain the same center
|
|
1784
|
-
* @param scaleY - whether to set scaleY=scaleX
|
|
1785
|
-
* @param noClamp - whether to disable clamp-zoom
|
|
1786
|
-
* @returns {Viewport} this
|
|
1787
|
-
*/
|
|
1788
1382
|
fitWidth(t = this.worldWidth, e, n = !0, i) {
|
|
1789
1383
|
let s;
|
|
1790
1384
|
e && (s = this.center), this.scale.x = this.screenWidth / t, n && (this.scale.y = this.scale.x);
|
|
1791
1385
|
const h = this.plugins.get("clamp-zoom", !0);
|
|
1792
1386
|
return !i && h && h.clamp(), e && s && this.moveCenter(s), this;
|
|
1793
1387
|
}
|
|
1794
|
-
/**
|
|
1795
|
-
* Change zoom so the height fits in the viewport
|
|
1796
|
-
*
|
|
1797
|
-
* @param {number} [height=this.worldHeight] in world coordinates
|
|
1798
|
-
* @param {boolean} [center] maintain the same center of the screen after zoom
|
|
1799
|
-
* @param {boolean} [scaleX=true] whether to set scaleX = scaleY
|
|
1800
|
-
* @param {boolean} [noClamp] whether to disable clamp-zoom
|
|
1801
|
-
* @returns {Viewport} this
|
|
1802
|
-
*/
|
|
1803
1388
|
fitHeight(t = this.worldHeight, e, n = !0, i) {
|
|
1804
1389
|
let s;
|
|
1805
1390
|
e && (s = this.center), this.scale.y = this.screenHeight / t, n && (this.scale.x = this.scale.y);
|
|
1806
1391
|
const h = this.plugins.get("clamp-zoom", !0);
|
|
1807
1392
|
return !i && h && h.clamp(), e && s && this.moveCenter(s), this;
|
|
1808
1393
|
}
|
|
1809
|
-
/**
|
|
1810
|
-
* Change zoom so it fits the entire world in the viewport
|
|
1811
|
-
*
|
|
1812
|
-
* @param {boolean} center maintain the same center of the screen after zoom
|
|
1813
|
-
* @returns {Viewport} this
|
|
1814
|
-
*/
|
|
1815
1394
|
fitWorld(t) {
|
|
1816
1395
|
let e;
|
|
1817
1396
|
t && (e = this.center), this.scale.x = this.screenWidth / this.worldWidth, this.scale.y = this.screenHeight / this.worldHeight, this.scale.x < this.scale.y ? this.scale.y = this.scale.x : this.scale.x = this.scale.y;
|
|
1818
1397
|
const n = this.plugins.get("clamp-zoom", !0);
|
|
1819
1398
|
return n && n.clamp(), t && e && this.moveCenter(e), this;
|
|
1820
1399
|
}
|
|
1821
|
-
/**
|
|
1822
|
-
* Change zoom so it fits the size or the entire world in the viewport
|
|
1823
|
-
*
|
|
1824
|
-
* @param {boolean} [center] maintain the same center of the screen after zoom
|
|
1825
|
-
* @param {number} [width=this.worldWidth] desired width
|
|
1826
|
-
* @param {number} [height=this.worldHeight] desired height
|
|
1827
|
-
* @returns {Viewport} this
|
|
1828
|
-
*/
|
|
1829
1400
|
fit(t, e = this.worldWidth, n = this.worldHeight) {
|
|
1830
1401
|
let i;
|
|
1831
1402
|
t && (i = this.center), this.scale.x = this.screenWidth / e, this.scale.y = this.screenHeight / n, this.scale.x < this.scale.y ? this.scale.y = this.scale.x : this.scale.x = this.scale.y;
|
|
1832
1403
|
const s = this.plugins.get("clamp-zoom", !0);
|
|
1833
1404
|
return s && s.clamp(), t && i && this.moveCenter(i), this;
|
|
1834
1405
|
}
|
|
1835
|
-
/**
|
|
1836
|
-
* Zoom viewport to specific value.
|
|
1837
|
-
*
|
|
1838
|
-
* @param {number} scale value (e.g., 1 would be 100%, 0.25 would be 25%)
|
|
1839
|
-
* @param {boolean} [center] maintain the same center of the screen after zoom
|
|
1840
|
-
* @return {Viewport} this
|
|
1841
|
-
*/
|
|
1842
1406
|
setZoom(t, e) {
|
|
1843
1407
|
let n;
|
|
1844
1408
|
e && (n = this.center), this.scale.set(t);
|
|
1845
1409
|
const i = this.plugins.get("clamp-zoom", !0);
|
|
1846
1410
|
return i && i.clamp(), e && n && this.moveCenter(n), this;
|
|
1847
1411
|
}
|
|
1848
|
-
/**
|
|
1849
|
-
* Zoom viewport by a certain percent (in both x and y direction).
|
|
1850
|
-
*
|
|
1851
|
-
* @param {number} percent change (e.g., 0.25 would increase a starting scale of 1.0 to 1.25)
|
|
1852
|
-
* @param {boolean} [center] maintain the same center of the screen after zoom
|
|
1853
|
-
* @return {Viewport} this
|
|
1854
|
-
*/
|
|
1855
1412
|
zoomPercent(t, e) {
|
|
1856
1413
|
return this.setZoom(this.scale.x + this.scale.x * t, e);
|
|
1857
1414
|
}
|
|
1858
|
-
/**
|
|
1859
|
-
* Zoom viewport by increasing/decreasing width by a certain number of pixels.
|
|
1860
|
-
*
|
|
1861
|
-
* @param {number} change in pixels
|
|
1862
|
-
* @param {boolean} [center] maintain the same center of the screen after zoom
|
|
1863
|
-
* @return {Viewport} this
|
|
1864
|
-
*/
|
|
1865
1415
|
zoom(t, e) {
|
|
1866
1416
|
return this.fitWidth(t + this.worldScreenWidth, e), this;
|
|
1867
1417
|
}
|
|
1868
|
-
/** Changes scale of viewport and maintains center of viewport */
|
|
1869
1418
|
get scaled() {
|
|
1870
1419
|
return this.scale.x;
|
|
1871
1420
|
}
|
|
1872
1421
|
set scaled(t) {
|
|
1873
1422
|
this.setZoom(t, !0);
|
|
1874
1423
|
}
|
|
1875
|
-
/**
|
|
1876
|
-
* Returns zoom to the desired scale
|
|
1877
|
-
*
|
|
1878
|
-
* @param {ISnapZoomOptions} options
|
|
1879
|
-
* @param {number} [options.width=0] - the desired width to snap (to maintain aspect ratio, choose width or height)
|
|
1880
|
-
* @param {number} [options.height=0] - the desired height to snap (to maintain aspect ratio, choose width or height)
|
|
1881
|
-
* @param {number} [options.time=1000] - time for snapping in ms
|
|
1882
|
-
* @param {(string|function)} [options.ease=easeInOutSine] ease function or name (see http://easings.net/
|
|
1883
|
-
* for supported names)
|
|
1884
|
-
* @param {PIXI.Point} [options.center] - place this point at center during zoom instead of center of the viewport
|
|
1885
|
-
* @param {boolean} [options.interrupt=true] - pause snapping with any user input on the viewport
|
|
1886
|
-
* @param {boolean} [options.removeOnComplete] - removes this plugin after snapping is complete
|
|
1887
|
-
* @param {boolean} [options.removeOnInterrupt] - removes this plugin if interrupted by any user input
|
|
1888
|
-
* @param {boolean} [options.forceStart] - starts the snap immediately regardless of whether the viewport is at the
|
|
1889
|
-
* desired zoom
|
|
1890
|
-
* @param {boolean} [options.noMove] - zoom but do not move
|
|
1891
|
-
*/
|
|
1892
1424
|
snapZoom(t) {
|
|
1893
1425
|
return this.plugins.add("snap-zoom", new G(this, t)), this;
|
|
1894
1426
|
}
|
|
1895
|
-
/** Is container out of world bounds */
|
|
1896
1427
|
OOB() {
|
|
1897
1428
|
return {
|
|
1898
1429
|
left: this.left < 0,
|
|
@@ -1905,316 +1436,81 @@ class C extends k {
|
|
|
1905
1436
|
)
|
|
1906
1437
|
};
|
|
1907
1438
|
}
|
|
1908
|
-
/** World coordinates of the right edge of the screen */
|
|
1909
1439
|
get right() {
|
|
1910
1440
|
return -this.x / this.scale.x + this.worldScreenWidth;
|
|
1911
1441
|
}
|
|
1912
1442
|
set right(t) {
|
|
1913
1443
|
this.x = -t * this.scale.x + this.screenWidth, this.plugins.reset();
|
|
1914
1444
|
}
|
|
1915
|
-
/** World coordinates of the left edge of the screen */
|
|
1916
1445
|
get left() {
|
|
1917
1446
|
return -this.x / this.scale.x;
|
|
1918
1447
|
}
|
|
1919
1448
|
set left(t) {
|
|
1920
1449
|
this.x = -t * this.scale.x, this.plugins.reset();
|
|
1921
1450
|
}
|
|
1922
|
-
/** World coordinates of the top edge of the screen */
|
|
1923
1451
|
get top() {
|
|
1924
1452
|
return -this.y / this.scale.y;
|
|
1925
1453
|
}
|
|
1926
1454
|
set top(t) {
|
|
1927
1455
|
this.y = -t * this.scale.y, this.plugins.reset();
|
|
1928
1456
|
}
|
|
1929
|
-
/** World coordinates of the bottom edge of the screen */
|
|
1930
1457
|
get bottom() {
|
|
1931
1458
|
return -this.y / this.scale.y + this.worldScreenHeight;
|
|
1932
1459
|
}
|
|
1933
1460
|
set bottom(t) {
|
|
1934
1461
|
this.y = -t * this.scale.y + this.screenHeight, this.plugins.reset();
|
|
1935
1462
|
}
|
|
1936
|
-
/**
|
|
1937
|
-
* Determines whether the viewport is dirty (i.e., needs to be rendered to the screen because of a change)
|
|
1938
|
-
*/
|
|
1939
1463
|
get dirty() {
|
|
1940
1464
|
return !!this._dirty;
|
|
1941
1465
|
}
|
|
1942
1466
|
set dirty(t) {
|
|
1943
1467
|
this._dirty = t;
|
|
1944
1468
|
}
|
|
1945
|
-
/**
|
|
1946
|
-
* Permanently changes the Viewport's hitArea
|
|
1947
|
-
*
|
|
1948
|
-
* NOTE: if not set then hitArea = PIXI.Rectangle(Viewport.left, Viewport.top, Viewport.worldScreenWidth,
|
|
1949
|
-
* Viewport.worldScreenHeight)
|
|
1950
|
-
*/
|
|
1951
1469
|
get forceHitArea() {
|
|
1952
1470
|
return this._forceHitArea;
|
|
1953
1471
|
}
|
|
1954
1472
|
set forceHitArea(t) {
|
|
1955
1473
|
t ? (this._forceHitArea = t, this.hitArea = t) : (this._forceHitArea = null, this.hitArea = new b(0, 0, this.worldWidth, this.worldHeight));
|
|
1956
1474
|
}
|
|
1957
|
-
/**
|
|
1958
|
-
* Enable one-finger touch to drag
|
|
1959
|
-
*
|
|
1960
|
-
* NOTE: if you expect users to use right-click dragging, you should enable `viewport.options.disableOnContextMenu`
|
|
1961
|
-
* to avoid the context menu popping up on each right-click drag.
|
|
1962
|
-
*
|
|
1963
|
-
* @param {IDragOptions} [options]
|
|
1964
|
-
* @param {string} [options.direction=all] direction to drag
|
|
1965
|
-
* @param {boolean} [options.pressDrag=true] whether click to drag is active
|
|
1966
|
-
* @param {boolean} [options.wheel=true] use wheel to scroll in direction (unless wheel plugin is active)
|
|
1967
|
-
* @param {number} [options.wheelScroll=1] number of pixels to scroll with each wheel spin
|
|
1968
|
-
* @param {boolean} [options.reverse] reverse the direction of the wheel scroll
|
|
1969
|
-
* @param {(boolean|string)} [options.clampWheel=false] clamp wheel(to avoid weird bounce with mouse wheel)
|
|
1970
|
-
* @param {string} [options.underflow=center] where to place world if too small for screen
|
|
1971
|
-
* @param {number} [options.factor=1] factor to multiply drag to increase the speed of movement
|
|
1972
|
-
* @param {string} [options.mouseButtons=all] changes which mouse buttons trigger drag, use: 'all', 'left',
|
|
1973
|
-
* 'right' 'middle', or some combination, like, 'middle-right'; you may want to set
|
|
1974
|
-
* viewport.options.disableOnContextMenu if you want to use right-click dragging
|
|
1975
|
-
* @param {string[]} [options.keyToPress=null] - array containing
|
|
1976
|
-
* {@link key|https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code} codes of keys that can be
|
|
1977
|
-
* pressed for the drag to be triggered, e.g.: ['ShiftLeft', 'ShiftRight'}.
|
|
1978
|
-
* @param {boolean} [options.ignoreKeyToPressOnTouch=false] - ignore keyToPress for touch events
|
|
1979
|
-
* @param {number} [options.lineHeight=20] - scaling factor for non-DOM_DELTA_PIXEL scrolling events
|
|
1980
|
-
* @returns {Viewport} this
|
|
1981
|
-
*/
|
|
1982
1475
|
drag(t) {
|
|
1983
1476
|
return this.plugins.add("drag", new M(this, t)), this;
|
|
1984
1477
|
}
|
|
1985
|
-
/**
|
|
1986
|
-
* Clamp to world boundaries or other provided boundaries
|
|
1987
|
-
* There are three ways to clamp:
|
|
1988
|
-
* 1. direction: 'all' = the world is clamped to its world boundaries, ie, you cannot drag any part of offscreen
|
|
1989
|
-
* direction: 'x' | 'y' = only the x or y direction is clamped to its world boundary
|
|
1990
|
-
* 2. left, right, top, bottom = true | number = the world is clamped to the world's pixel location for each side;
|
|
1991
|
-
* if any of these are set to true, then the location is set to the boundary
|
|
1992
|
-
* [0, viewport.worldWidth/viewport.worldHeight], eg: to allow the world to be completely dragged offscreen,
|
|
1993
|
-
* set [-viewport.worldWidth, -viewport.worldHeight, viewport.worldWidth * 2, viewport.worldHeight * 2]
|
|
1994
|
-
*
|
|
1995
|
-
* Underflow determines what happens when the world is smaller than the viewport
|
|
1996
|
-
* 1. none = the world is clamped but there is no special behavior
|
|
1997
|
-
* 2. center = the world is centered on the viewport
|
|
1998
|
-
* 3. combination of top/bottom/center and left/right/center (case insensitive) = the world is stuck to the
|
|
1999
|
-
* appropriate boundaries
|
|
2000
|
-
*
|
|
2001
|
-
* NOTES:
|
|
2002
|
-
* clamp is disabled if called with no options; use { direction: 'all' } for all edge clamping
|
|
2003
|
-
* screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly
|
|
2004
|
-
*
|
|
2005
|
-
* @param {object} [options]
|
|
2006
|
-
* @param {(number|boolean)} [options.left=false] - clamp left; true = 0
|
|
2007
|
-
* @param {(number|boolean)} [options.right=false] - clamp right; true = viewport.worldWidth
|
|
2008
|
-
* @param {(number|boolean)} [options.top=false] - clamp top; true = 0
|
|
2009
|
-
* @param {(number|boolean)} [options.bottom=false] - clamp bottom; true = viewport.worldHeight
|
|
2010
|
-
* @param {string} [direction] - (all, x, or y) using clamps of [0, viewport.worldWidth/viewport.worldHeight];
|
|
2011
|
-
* replaces left/right/top/bottom if set
|
|
2012
|
-
* @param {string} [underflow=center] - where to place world if too small for screen (e.g., top-right, center,
|
|
2013
|
-
* none, bottomLeft) * @returns {Viewport} this
|
|
2014
|
-
*/
|
|
2015
1478
|
clamp(t) {
|
|
2016
1479
|
return this.plugins.add("clamp", new D(this, t)), this;
|
|
2017
1480
|
}
|
|
2018
|
-
/**
|
|
2019
|
-
* Decelerate after a move
|
|
2020
|
-
*
|
|
2021
|
-
* NOTE: this fires 'moved' event during deceleration
|
|
2022
|
-
*
|
|
2023
|
-
* @param {IDecelerateOptions} [options]
|
|
2024
|
-
* @param {number} [options.friction=0.95] - percent to decelerate after movement
|
|
2025
|
-
* @param {number} [options.bounce=0.8] - percent to decelerate when past boundaries (only applicable when
|
|
2026
|
-
* viewport.bounce() is active)
|
|
2027
|
-
* @param {number} [options.minSpeed=0.01] - minimum velocity before stopping/reversing acceleration
|
|
2028
|
-
* @return {Viewport} this
|
|
2029
|
-
*/
|
|
2030
1481
|
decelerate(t) {
|
|
2031
1482
|
return this.plugins.add("decelerate", new V(this, t)), this;
|
|
2032
1483
|
}
|
|
2033
|
-
/**
|
|
2034
|
-
* Bounce on borders
|
|
2035
|
-
* NOTES:
|
|
2036
|
-
* screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly
|
|
2037
|
-
* fires 'moved', 'bounce-x-start', 'bounce-y-start', 'bounce-x-end', and 'bounce-y-end' events
|
|
2038
|
-
* @param {object} [options]
|
|
2039
|
-
* @param {string} [options.sides=all] - all, horizontal, vertical, or combination of top, bottom, right, left
|
|
2040
|
-
* (e.g., 'top-bottom-right')
|
|
2041
|
-
* @param {number} [options.friction=0.5] - friction to apply to decelerate if active
|
|
2042
|
-
* @param {number} [options.time=150] - time in ms to finish bounce
|
|
2043
|
-
* @param {object} [options.bounceBox] - use this bounceBox instead of (0, 0, viewport.worldWidth, viewport.worldHeight)
|
|
2044
|
-
* @param {number} [options.bounceBox.x=0]
|
|
2045
|
-
* @param {number} [options.bounceBox.y=0]
|
|
2046
|
-
* @param {number} [options.bounceBox.width=viewport.worldWidth]
|
|
2047
|
-
* @param {number} [options.bounceBox.height=viewport.worldHeight]
|
|
2048
|
-
* @param {string|function} [options.ease=easeInOutSine] - ease function or name
|
|
2049
|
-
* (see http://easings.net/ for supported names)
|
|
2050
|
-
* @param {string} [options.underflow=center] - (top/bottom/center and left/right/center, or center)
|
|
2051
|
-
* where to place world if too small for screen
|
|
2052
|
-
* @return {Viewport} this
|
|
2053
|
-
*/
|
|
2054
1484
|
bounce(t) {
|
|
2055
1485
|
return this.plugins.add("bounce", new _(this, t)), this;
|
|
2056
1486
|
}
|
|
2057
|
-
/**
|
|
2058
|
-
* Enable pinch to zoom and two-finger touch to drag
|
|
2059
|
-
*
|
|
2060
|
-
* @param {PinchOptions} [options]
|
|
2061
|
-
* @param {boolean} [options.noDrag] - disable two-finger dragging
|
|
2062
|
-
* @param {number} [options.percent=1] - percent to modify pinch speed
|
|
2063
|
-
* @param {number} [options.factor=1] - factor to multiply two-finger drag to increase the speed of movement
|
|
2064
|
-
* @param {PIXI.Point} [options.center] - place this point at center during zoom instead of center of two fingers
|
|
2065
|
-
* @param {('all'|'x'|'y')} [options.axis=all] - axis to zoom
|
|
2066
|
-
* @return {Viewport} this
|
|
2067
|
-
*/
|
|
2068
1487
|
pinch(t) {
|
|
2069
1488
|
return this.plugins.add("pinch", new y(this, t)), this;
|
|
2070
1489
|
}
|
|
2071
|
-
/**
|
|
2072
|
-
* Snap to a point
|
|
2073
|
-
*
|
|
2074
|
-
* @param {number} x
|
|
2075
|
-
* @param {number} y
|
|
2076
|
-
* @param {ISnapOptions} [options]
|
|
2077
|
-
* @param {boolean} [options.topLeft] - snap to the top-left of viewport instead of center
|
|
2078
|
-
* @param {number} [options.friction=0.8] - friction/frame to apply if decelerate is active
|
|
2079
|
-
* @param {number} [options.time=1000] - time in ms to snap
|
|
2080
|
-
* @param {string|function} [options.ease=easeInOutSine] - ease function or name (see http://easings.net/
|
|
2081
|
-
* for supported names)
|
|
2082
|
-
* @param {boolean} [options.interrupt=true] - pause snapping with any user input on the viewport
|
|
2083
|
-
* @param {boolean} [options.removeOnComplete] - removes this plugin after snapping is complete
|
|
2084
|
-
* @param {boolean} [options.removeOnInterrupt] - removes this plugin if interrupted by any user input
|
|
2085
|
-
* @param {boolean} [options.forceStart] - starts the snap immediately regardless of whether the viewport is at
|
|
2086
|
-
* the desired location
|
|
2087
|
-
* @return {Viewport} this
|
|
2088
|
-
*/
|
|
2089
1490
|
snap(t, e, n) {
|
|
2090
1491
|
return this.plugins.add("snap", new Q(this, t, e, n)), this;
|
|
2091
1492
|
}
|
|
2092
|
-
/**
|
|
2093
|
-
* Follow a target
|
|
2094
|
-
*
|
|
2095
|
-
* NOTES:
|
|
2096
|
-
* uses the (x, y) as the center to follow; for PIXI.Sprite to work properly, use sprite.anchor.set(0.5)
|
|
2097
|
-
* options.acceleration is not perfect as it doesn't know the velocity of the target. It adds acceleration
|
|
2098
|
-
* to the start of movement and deceleration to the end of movement when the target is stopped.
|
|
2099
|
-
* To cancel the follow, use: `viewport.plugins.remove('follow')`
|
|
2100
|
-
*
|
|
2101
|
-
* @fires 'moved' event
|
|
2102
|
-
*
|
|
2103
|
-
* @param {PIXI.DisplayObject} target to follow
|
|
2104
|
-
* @param {IFollowOptions} [options]
|
|
2105
|
-
* @param {number} [options.speed=0] - to follow in pixels/frame (0=teleport to location)
|
|
2106
|
-
* @param {number} [options.acceleration] - set acceleration to accelerate and decelerate at this rate; speed
|
|
2107
|
-
* cannot be 0 to use acceleration
|
|
2108
|
-
* @param {number} [options.radius] - radius (in world coordinates) of center circle where movement is allowed
|
|
2109
|
-
* without moving the viewport * @returns {Viewport} this
|
|
2110
|
-
* @returns {Viewport} this
|
|
2111
|
-
*/
|
|
2112
1493
|
follow(t, e) {
|
|
2113
1494
|
return this.plugins.add("follow", new j(this, t, e)), this;
|
|
2114
1495
|
}
|
|
2115
|
-
/**
|
|
2116
|
-
* Zoom using mouse wheel
|
|
2117
|
-
*
|
|
2118
|
-
* NOTE: the default event listener for 'wheel' event is document.body. Use `Viewport.options.divWheel` to
|
|
2119
|
-
* change this default
|
|
2120
|
-
*
|
|
2121
|
-
* @param {IWheelOptions} [options]
|
|
2122
|
-
* @param {number} [options.percent=0.1] - percent to scroll with each spin
|
|
2123
|
-
* @param {number} [options.smooth] - smooth the zooming by providing the number of frames to zoom between wheel spins
|
|
2124
|
-
* @param {boolean} [options.interrupt=true] - stop smoothing with any user input on the viewport
|
|
2125
|
-
* @param {boolean} [options.reverse] - reverse the direction of the scroll
|
|
2126
|
-
* @param {PIXI.Point} [options.center] - place this point at center during zoom instead of current mouse position
|
|
2127
|
-
* @param {number} [options.lineHeight=20] - scaling factor for non-DOM_DELTA_PIXEL scrolling events
|
|
2128
|
-
* @param {('all'|'x'|'y')} [options.axis=all] - axis to zoom
|
|
2129
|
-
* @return {Viewport} this
|
|
2130
|
-
*/
|
|
2131
1496
|
wheel(t) {
|
|
2132
|
-
return this.plugins.add("wheel", new
|
|
2133
|
-
}
|
|
2134
|
-
/**
|
|
2135
|
-
* Animate the position and/or scale of the viewport
|
|
2136
|
-
* To set the zoom level, use: (1) scale, (2) scaleX and scaleY, or (3) width and/or height
|
|
2137
|
-
* @param {object} options
|
|
2138
|
-
* @param {number} [options.time=1000] - time to animate
|
|
2139
|
-
* @param {PIXI.Point} [options.position=viewport.center] - position to move viewport
|
|
2140
|
-
* @param {number} [options.width] - desired viewport width in world pixels (use instead of scale;
|
|
2141
|
-
* aspect ratio is maintained if height is not provided)
|
|
2142
|
-
* @param {number} [options.height] - desired viewport height in world pixels (use instead of scale;
|
|
2143
|
-
* aspect ratio is maintained if width is not provided)
|
|
2144
|
-
* @param {number} [options.scale] - scale to change zoom (scale.x = scale.y)
|
|
2145
|
-
* @param {number} [options.scaleX] - independently change zoom in x-direction
|
|
2146
|
-
* @param {number} [options.scaleY] - independently change zoom in y-direction
|
|
2147
|
-
* @param {(function|string)} [options.ease=linear] - easing function to use
|
|
2148
|
-
* @param {function} [options.callbackOnComplete]
|
|
2149
|
-
* @param {boolean} [options.removeOnInterrupt] removes this plugin if interrupted by any user input
|
|
2150
|
-
* @returns {Viewport} this
|
|
2151
|
-
*/
|
|
1497
|
+
return this.plugins.add("wheel", new N(this, t)), this;
|
|
1498
|
+
}
|
|
2152
1499
|
animate(t) {
|
|
2153
1500
|
return this.plugins.add("animate", new u(this, t)), this;
|
|
2154
1501
|
}
|
|
2155
|
-
/**
|
|
2156
|
-
* Enable clamping of zoom to constraints
|
|
2157
|
-
*
|
|
2158
|
-
* The minWidth/Height settings are how small the world can get (as it would appear on the screen)
|
|
2159
|
-
* before clamping. The maxWidth/maxHeight is how larger the world can scale (as it would appear on
|
|
2160
|
-
* the screen) before clamping.
|
|
2161
|
-
*
|
|
2162
|
-
* For example, if you have a world size of 1000 x 1000 and a screen size of 100 x 100, if you set
|
|
2163
|
-
* minWidth/Height = 100 then the world will not be able to zoom smaller than the screen size (ie,
|
|
2164
|
-
* zooming out so it appears smaller than the screen). Similarly, if you set maxWidth/Height = 100
|
|
2165
|
-
* the world will not be able to zoom larger than the screen size (ie, zooming in so it appears
|
|
2166
|
-
* larger than the screen).
|
|
2167
|
-
*
|
|
2168
|
-
* @param {object} [options]
|
|
2169
|
-
* @param {number} [options.minWidth] - minimum width
|
|
2170
|
-
* @param {number} [options.minHeight] - minimum height
|
|
2171
|
-
* @param {number} [options.maxWidth] - maximum width
|
|
2172
|
-
* @param {number} [options.maxHeight] - maximum height
|
|
2173
|
-
* @param {number} [options.minScale] - minimum scale
|
|
2174
|
-
* @param {number} [options.maxScale] - minimum scale
|
|
2175
|
-
* @return {Viewport} this
|
|
2176
|
-
*/
|
|
2177
1502
|
clampZoom(t) {
|
|
2178
1503
|
return this.plugins.add("clamp-zoom", new L(this, t)), this;
|
|
2179
1504
|
}
|
|
2180
|
-
/**
|
|
2181
|
-
* Scroll viewport when mouse hovers near one of the edges or radius-distance from center of screen.
|
|
2182
|
-
*
|
|
2183
|
-
* NOTES: fires 'moved' event; there's a known bug where the mouseEdges does not work properly with "windowed" viewports
|
|
2184
|
-
*
|
|
2185
|
-
* @param {IMouseEdgesOptions} [options]
|
|
2186
|
-
* @param {number} [options.radius] - distance from center of screen in screen pixels
|
|
2187
|
-
* @param {number} [options.distance] - distance from all sides in screen pixels
|
|
2188
|
-
* @param {number} [options.top] - alternatively, set top distance (leave unset for no top scroll)
|
|
2189
|
-
* @param {number} [options.bottom] - alternatively, set bottom distance (leave unset for no top scroll)
|
|
2190
|
-
* @param {number} [options.left] - alternatively, set left distance (leave unset for no top scroll)
|
|
2191
|
-
* @param {number} [options.right] - alternatively, set right distance (leave unset for no top scroll)
|
|
2192
|
-
* @param {number} [options.speed=8] - speed in pixels/frame to scroll viewport
|
|
2193
|
-
* @param {boolean} [options.reverse] - reverse direction of scroll
|
|
2194
|
-
* @param {boolean} [options.noDecelerate] - don't use decelerate plugin even if it's installed
|
|
2195
|
-
* @param {boolean} [options.linear] - if using radius, use linear movement (+/- 1, +/- 1) instead of angled
|
|
2196
|
-
* movement (Math.cos(angle from center), Math.sin(angle from center))
|
|
2197
|
-
* @param {boolean} [options.allowButtons] allows plugin to continue working even when there's a mousedown event
|
|
2198
|
-
*/
|
|
2199
1505
|
mouseEdges(t) {
|
|
2200
|
-
return this.plugins.add("mouse-edges", new
|
|
1506
|
+
return this.plugins.add("mouse-edges", new q(this, t)), this;
|
|
2201
1507
|
}
|
|
2202
|
-
/** Pause viewport (including animation updates such as decelerate) */
|
|
2203
1508
|
get pause() {
|
|
2204
1509
|
return !!this._pause;
|
|
2205
1510
|
}
|
|
2206
1511
|
set pause(t) {
|
|
2207
1512
|
this._pause = t, this.lastViewport = null, this.moving = !1, this.zooming = !1, t && this.input.pause();
|
|
2208
1513
|
}
|
|
2209
|
-
/**
|
|
2210
|
-
* Move the viewport so the bounding box is visible
|
|
2211
|
-
*
|
|
2212
|
-
* @param x - left
|
|
2213
|
-
* @param y - top
|
|
2214
|
-
* @param width
|
|
2215
|
-
* @param height
|
|
2216
|
-
* @param resizeToFit - Resize the viewport so the box fits within the viewport
|
|
2217
|
-
*/
|
|
2218
1514
|
ensureVisible(t, e, n, i, s) {
|
|
2219
1515
|
s && (n > this.worldScreenWidth || i > this.worldScreenHeight) && (this.fit(!0, n, i), this.emit("zoomed", { viewport: this, type: "ensureVisible" }));
|
|
2220
1516
|
let h = !1;
|
|
@@ -2229,14 +1525,14 @@ export {
|
|
|
2229
1525
|
V as Decelerate,
|
|
2230
1526
|
M as Drag,
|
|
2231
1527
|
j as Follow,
|
|
2232
|
-
|
|
2233
|
-
|
|
1528
|
+
$ as InputManager,
|
|
1529
|
+
q as MouseEdges,
|
|
2234
1530
|
y as Pinch,
|
|
2235
1531
|
d as Plugin,
|
|
2236
1532
|
tt as PluginManager,
|
|
2237
1533
|
Q as Snap,
|
|
2238
1534
|
G as SnapZoom,
|
|
2239
1535
|
C as Viewport,
|
|
2240
|
-
|
|
1536
|
+
N as Wheel
|
|
2241
1537
|
};
|
|
2242
|
-
//# sourceMappingURL=viewport.es-
|
|
1538
|
+
//# sourceMappingURL=viewport.es-88169ec4-146d955f.mjs.map
|