@prefecthq/graphs 1.0.7 → 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.
Files changed (48) hide show
  1. package/LICENSE +201 -0
  2. package/dist/assets/nodeLayout.worker-ba54e168.js.map +1 -0
  3. package/dist/graphs.mjs +3 -4
  4. package/dist/graphs.umd.js +578 -63
  5. package/dist/graphs.umd.js.map +1 -1
  6. package/dist/index-aba921f4.mjs +19945 -0
  7. package/dist/index-aba921f4.mjs.map +1 -0
  8. package/dist/types/demo/App.vue.d.ts +1 -43
  9. package/dist/types/demo/components/ComponentPage.vue.d.ts +18 -85
  10. package/dist/types/demo/components/ContextSidebar.vue.d.ts +1 -43
  11. package/dist/types/demo/components/HashLink.vue.d.ts +11 -54
  12. package/dist/types/demo/components/ResizableSection.vue.d.ts +8 -47
  13. package/dist/types/demo/sections/Data.vue.d.ts +1 -43
  14. package/dist/types/demo/sections/Home.vue.d.ts +1 -43
  15. package/dist/types/demo/sections/components/FlowRunTimelineDemo.vue.d.ts +1 -43
  16. package/dist/types/demo/sections/components/TimescaleTable.vue.d.ts +16 -67
  17. package/dist/types/demo/utilities/timescaleData.d.ts +2 -2
  18. package/dist/types/src/FlowRunTimeline.vue.d.ts +30 -122
  19. package/dist/types/src/containers/guide.d.ts +28 -0
  20. package/dist/types/src/containers/guides.d.ts +26 -0
  21. package/dist/types/src/index.d.ts +1 -0
  22. package/dist/types/src/models/FlowRunTimeline.d.ts +16 -28
  23. package/dist/types/src/pixiFunctions/bitmapFonts.d.ts +1 -1
  24. package/dist/types/src/pixiFunctions/index.d.ts +1 -2
  25. package/dist/types/src/pixiFunctions/nodeSprites.d.ts +2 -2
  26. package/dist/types/src/pixiFunctions/subNodesToggle.d.ts +3 -2
  27. package/dist/types/src/pixiFunctions/timeScale.d.ts +2 -0
  28. package/dist/types/src/pixiFunctions/timelineEdge.d.ts +2 -2
  29. package/dist/types/src/pixiFunctions/timelineNode.d.ts +8 -7
  30. package/dist/types/src/pixiFunctions/timelineNodes.d.ts +8 -10
  31. package/dist/types/src/pixiFunctions/timelinePlayhead.d.ts +4 -19
  32. package/dist/types/src/types/index.d.ts +1 -0
  33. package/dist/types/src/types/timeline.d.ts +11 -0
  34. package/dist/types/src/utilities/index.d.ts +2 -1
  35. package/dist/types/src/utilities/time.d.ts +13 -10
  36. package/dist/types/src/utilities/viewport.d.ts +3 -0
  37. package/dist/types/src/utilities/zIndex.d.ts +5 -0
  38. package/dist/types/src/workers/layouts/nearestNeighbor.d.ts +10 -0
  39. package/dist/types/src/workers/layouts/waterfall.d.ts +3 -0
  40. package/dist/{viewport.es-a4ca92c6.mjs → viewport.es-73ad6f79.mjs} +706 -2
  41. package/dist/{viewport.es-a4ca92c6.mjs.map → viewport.es-73ad6f79.mjs.map} +1 -1
  42. package/package.json +11 -11
  43. package/dist/assets/nodeLayout.worker-30c2c715.js.map +0 -1
  44. package/dist/index-0669fb1d.mjs +0 -17267
  45. package/dist/index-0669fb1d.mjs.map +0 -1
  46. package/dist/types/src/pixiFunctions/timelineGuide.d.ts +0 -20
  47. package/dist/types/src/pixiFunctions/timelineGuides.d.ts +0 -33
  48. package/dist/types/src/pixiFunctions/timelineScale.d.ts +0 -7
@@ -1,32 +1,53 @@
1
- import { P as c, R as b, T as C, C as P } from "./index-0669fb1d.mjs";
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-a4ca92c6.mjs.map
2237
+ //# sourceMappingURL=viewport.es-73ad6f79.mjs.map