@prefecthq/prefect-ui-library 1.6.48 → 2.0.0

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