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