vlite3 1.4.31 → 1.4.32

package/components/PanZoomViewport/PanZoomViewport.vue2.js

@@ -0,0 +1,536 @@
+import { defineComponent as Tt, shallowRef as y, computed as p, onMounted as At, nextTick as N, onBeforeUnmount as Mt, watch as W, openBlock as Rt, createElementBlock as Wt, normalizeStyle as Ve, createElementVNode as Bt, normalizeClass as Ot, renderSlot as It } from "vue";
+const Ct = ["tabindex", "aria-label", "aria-keyshortcuts"], Le = 160, _e = 16, Yt = /* @__PURE__ */ Tt({
+  __name: "PanZoomViewport",
+  props: {
+    modelValue: { default: () => ({ scale: 1, x: 0, y: 0 }) },
+    contentWidth: {},
+    contentHeight: {},
+    minScale: { default: 0.1 },
+    maxScale: { default: 4 },
+    zoomStep: { default: 0.2 },
+    wheelZoomSpeed: { default: 2e-3 },
+    keyboardPanStep: { default: 40 },
+    fitPadding: { default: 24 },
+    fitMode: { default: "contain" },
+    fitAlignX: { default: "center" },
+    fitAlignY: { default: "center" },
+    initialFit: { type: Boolean, default: !1 },
+    autoFitOnResize: { type: Boolean, default: !1 },
+    zoomEnabled: { type: Boolean, default: !0 },
+    zoomInEnabled: { type: Boolean, default: !0 },
+    zoomOutEnabled: { type: Boolean, default: !0 },
+    panEnabled: { type: Boolean, default: !0 },
+    pointerPanEnabled: { type: Boolean, default: !0 },
+    wheelPanEnabled: { type: Boolean, default: !0 },
+    keyboardPanEnabled: { type: Boolean, default: !0 },
+    horizontalPanEnabled: { type: Boolean, default: !0 },
+    verticalPanEnabled: { type: Boolean, default: !0 },
+    panOnWheel: { type: Boolean, default: !0 },
+    wheelZoomMode: { default: "modifier" },
+    panOnPrimaryDrag: { type: Boolean, default: !1 },
+    keyboard: { type: Boolean, default: !0 },
+    disabled: { type: Boolean, default: !1 },
+    ariaLabel: { default: "Pan and zoom viewport" },
+    contentClass: { default: "" }
+  },
+  emits: ["update:modelValue", "change", "update:viewportSize", "update:contentSize", "update:ready", "pan-start", "pan-end", "zoom-availability-change"],
+  setup(K, { expose: $e, emit: qe }) {
+    const Ke = { scale: 1, x: 0, y: 0 }, Ae = { width: 0, height: 0 }, a = K, b = qe, s = y(null), B = y(null), v = y({ ...Ae }), w = y({ ...Ae }), M = y(!1), O = y(!1), I = y(!1);
+    let C = null, U = null, j = /* @__PURE__ */ new WeakMap(), m = 0, F = 0, Z = 0, x = null, le = "external", ie = "auto", G = !1, re = !1, S = null, ce = 0, se = 0, E = !1, ue = null, Q = null, de = !1, fe = {}, he = {}, H = null;
+    const Ue = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, g = (e, t) => typeof e == "number" && Number.isFinite(e) ? e : t, z = (e, t) => {
+      const n = g(e, t);
+      return n > 0 ? n : t;
+    }, Y = y({
+      padding: Math.max(0, g(a.fitPadding, 24)),
+      alignX: a.fitAlignX,
+      alignY: a.fitAlignY
+    }), f = p(
+      () => a.panEnabled && a.horizontalPanEnabled
+    ), h = p(
+      () => a.panEnabled && a.verticalPanEnabled
+    ), ve = p(
+      () => f.value || h.value
+    ), D = p(
+      () => a.pointerPanEnabled && ve.value
+    ), me = p(() => {
+      const e = z(a.minScale, 0.1), t = z(a.maxScale, 4);
+      return {
+        min: e,
+        max: Math.max(e, t)
+      };
+    }), pe = (e) => Number(e.toFixed(4)), V = (e, t, n) => {
+      const o = me.value, l = o.min <= 1 && o.max >= 1 ? 1 : o.min, i = (T, A) => {
+        const Pe = g(T, A);
+        return pe(Math.min(o.max, Math.max(o.min, Pe)));
+      }, r = i(t, l), d = i(e, r);
+      return n && (!a.zoomEnabled || d > r && !a.zoomInEnabled || d < r && !a.zoomOutEnabled) ? r : d;
+    }, X = (e, t = 1, n = !1) => ({
+      scale: V(e?.scale, t, n),
+      x: f.value ? pe(g(e?.x, 0)) : 0,
+      y: h.value ? pe(g(e?.y, 0)) : 0
+    }), L = (e, t) => e.scale === t.scale && e.x === t.x && e.y === t.y, ge = (e, t) => e.width === t.width && e.height === t.height, Me = (e, t) => {
+      const n = Object.keys(e);
+      return n.length !== Object.keys(t).length ? !1 : n.every((o) => e[o] === t[o]);
+    }, u = y(
+      X(a.modelValue, 1, !1)
+    );
+    let c = u.value;
+    const J = (e = u.value, t = E) => {
+      const n = B.value;
+      n && (ue === n && Q && L(Q, e) && de === t || (n.style.transform = `translate3d(${e.x}px, ${e.y}px, 0) scale(${e.scale})`, n.style.transition = t ? `transform ${Le}ms ease-out` : "none", ue = n, Q = e, de = t));
+    }, Re = p(() => V(
+      me.value.max,
+      u.value.scale,
+      !0
+    ) > u.value.scale), We = p(() => V(
+      me.value.min,
+      u.value.scale,
+      !0
+    ) < u.value.scale), _ = p(() => ({
+      canZoomIn: Re.value,
+      canZoomOut: We.value
+    })), Be = (e) => typeof window > "u" || typeof window.requestAnimationFrame != "function" ? (e(0), 0) : window.requestAnimationFrame(e), $ = (e) => {
+      !e || typeof window > "u" || window.cancelAnimationFrame(e);
+    }, ye = /(auto|scroll|overlay)/, be = (e) => {
+      if (typeof window > "u") return null;
+      let t = s.value?.parentElement ?? null;
+      for (; t; ) {
+        const n = window.getComputedStyle(t), o = e === "x" ? n.overflowX : n.overflowY;
+        if (ye.test(o)) return t;
+        t = t.parentElement;
+      }
+      return null;
+    }, P = (e) => (e === "x" ? !f.value : !h.value) ? be(e) ?? s.value : s.value, ee = (e) => {
+      const t = e.getBoundingClientRect(), n = e.offsetWidth > 0 ? t.width / e.offsetWidth : 1, o = e.offsetHeight > 0 ? t.height / e.offsetHeight : 1;
+      return {
+        x: Number.isFinite(n) && n > 1e-3 ? n : 1,
+        y: Number.isFinite(o) && o > 1e-3 ? o : 1
+      };
+    }, je = (e, t) => {
+      const n = ++Z;
+      N(() => {
+        if (n !== Z) return;
+        const o = s.value;
+        if (!o) return;
+        const l = o.getBoundingClientRect(), i = q();
+        if (e.horizontalScrollElement) {
+          const r = l.left + (oe("x", t) + e.contentX * t) * i.x, d = ee(e.horizontalScrollElement);
+          e.horizontalScrollElement.scrollLeft += (r - e.clientX) / d.x;
+        }
+        if (e.verticalScrollElement) {
+          const r = l.top + (oe("y", t) + e.contentY * t) * i.y, d = ee(e.verticalScrollElement);
+          e.verticalScrollElement.scrollTop += (r - e.clientY) / d.y;
+        }
+      });
+    }, Ge = (e) => {
+      x && (clearTimeout(x), x = null), E = e === "smooth" && !Ue && M.value, E && (x = setTimeout(() => {
+        E = !1, x = null, J(u.value, !1);
+      }, Le));
+    }, we = (e, t, n, o = !0) => {
+      const l = X(e, u.value.scale, !1);
+      c = l, G = !1;
+      const i = u.value, r = t === "wheel" || t === "zoom" ? H : null;
+      if (H = null, L(i, l)) {
+        J(l, E);
+        return;
+      }
+      if (Ge(n), u.value = l, J(l, E), r && i.scale !== l.scale && je(r, l.scale), (!f.value || !h.value) && i.scale !== l.scale && N(() => k("content")), !o) return;
+      const d = { ...l };
+      b("update:modelValue", d), b("change", d, { source: t });
+    }, Qe = () => {
+      $(m), m = 0, we(
+        c,
+        le,
+        ie
+      );
+    }, R = (e, t, n = "auto", o = !0) => {
+      t !== "wheel" && t !== "zoom" && (H = null, Z += 1), c = X(
+        e,
+        c.scale,
+        o
+      ), le = t, ie = n, G = o, !m && (m = Be(() => {
+        m = 0, we(
+          c,
+          le,
+          ie
+        );
+      }));
+    }, q = () => {
+      const e = s.value;
+      if (!e) return { x: 1, y: 1 };
+      const t = e.getBoundingClientRect(), n = e.offsetWidth > 0 ? t.width / e.offsetWidth : 1, o = e.offsetHeight > 0 ? t.height / e.offsetHeight : 1;
+      return {
+        x: Number.isFinite(n) && n > 1e-3 ? n : 1,
+        y: Number.isFinite(o) && o > 1e-3 ? o : 1
+      };
+    }, Je = (e) => {
+      const t = s.value;
+      if (!t) return { x: 0, y: 0 };
+      if (e && e !== "center" && e.coordinateSpace === "client")
+        return { x: e.x, y: e.y };
+      const n = t.getBoundingClientRect(), o = q();
+      if (e && e !== "center")
+        return {
+          x: n.left + e.x * o.x,
+          y: n.top + e.y * o.y
+        };
+      const l = P("x") ?? t, i = P("y") ?? t, r = l.getBoundingClientRect(), d = i.getBoundingClientRect(), T = ee(l), A = ee(i);
+      return {
+        x: r.left + (l.clientLeft + l.clientWidth / 2) * T.x,
+        y: d.top + (i.clientTop + i.clientHeight / 2) * A.y
+      };
+    }, et = (e) => {
+      const t = s.value;
+      if (!t) return { x: 0, y: 0 };
+      const n = t.getBoundingClientRect(), o = q();
+      return {
+        x: (e.x - n.left) / o.x,
+        y: (e.y - n.top) / o.y
+      };
+    }, tt = (e) => {
+      const t = B.value;
+      if (!t) return null;
+      const n = f.value ? null : be("x"), o = h.value ? null : be("y");
+      if (!n && !o) return null;
+      const l = t.getBoundingClientRect(), i = q(), r = z(u.value.scale, 1);
+      return {
+        clientX: e.x,
+        clientY: e.y,
+        contentX: (e.x - l.left) / (r * i.x),
+        contentY: (e.y - l.top) / (r * i.y),
+        horizontalScrollElement: n,
+        verticalScrollElement: o
+      };
+    }, te = (e, t = {}, n) => {
+      const o = c, l = V(e, o.scale, !0);
+      if (l === o.scale) return;
+      const i = Je(t.anchor), r = et(i), d = (r.x - o.x) / o.scale, T = (r.y - o.y) / o.scale;
+      H = tt(i), R({
+        scale: l,
+        x: f.value ? r.x - d * l : 0,
+        y: h.value ? r.y - T * l : 0
+      }, n, t.behavior);
+    }, nt = (e, t = {}) => {
+      te(e, t, "zoom");
+    }, Oe = p(() => 1 + z(a.zoomStep, 0.2)), Ie = (e = {}) => {
+      te(c.scale * Oe.value, e, "zoom");
+    }, Ce = (e = {}) => {
+      te(c.scale / Oe.value, e, "zoom");
+    }, ot = (e, t = {}) => {
+      R(e, "external", t.behavior);
+    }, ne = (e, t, n, o) => {
+      if (!a.panEnabled) return;
+      let l = f.value ? g(e, 0) : 0, i = h.value ? g(t, 0) : 0;
+      if (n.coordinateSpace === "client") {
+        const r = q();
+        l /= r.x, i /= r.y;
+      }
+      l === 0 && i === 0 || R({
+        ...c,
+        x: c.x + l,
+        y: c.y + i
+      }, o, n.behavior);
+    }, at = (e, t, n = {}) => {
+      ne(e, t, n, "pan");
+    }, He = (e = {}) => {
+      R({ ...Ke }, "reset", e.behavior);
+    }, xe = () => {
+      const e = s.value, t = B.value;
+      if (!e || !t) return;
+      const n = P("x"), o = P("y"), l = {
+        width: n?.clientWidth ?? e.clientWidth,
+        height: o?.clientHeight ?? e.clientHeight
+      }, i = {
+        width: z(a.contentWidth, Math.max(t.offsetWidth, t.scrollWidth)),
+        height: z(a.contentHeight, Math.max(t.offsetHeight, t.scrollHeight))
+      };
+      ge(v.value, l) || (v.value = l, b("update:viewportSize", { ...l })), ge(w.value, i) || (w.value = i, b("update:contentSize", { ...i }));
+    }, Se = (e, t, n, o) => o === "start" ? n : o === "end" ? e - n - t : (e - t) / 2, Ee = (e) => Math.min(
+      Math.max(0, g(e, 0)),
+      Math.max(
+        0,
+        Math.min(v.value.width, v.value.height) / 2 - 0.5
+      )
+    );
+    function oe(e, t) {
+      const n = e === "x" ? v.value.width : v.value.height, o = (e === "x" ? w.value.width : w.value.height) * t, l = Ee(Y.value.padding);
+      return o + l * 2 >= n ? l : Se(
+        n,
+        o,
+        l,
+        e === "x" ? Y.value.alignX : Y.value.alignY
+      );
+    }
+    const ze = (e = {}) => {
+      xe();
+      const t = v.value, n = w.value, o = e.mode ?? a.fitMode, l = t.width > 0 && n.width > 0, i = t.height > 0 && n.height > 0;
+      if (o === "width" && !l || o === "height" && !i || o === "contain" && (!l || !i)) return !1;
+      const r = Math.max(0, g(e.padding, a.fitPadding)), d = e.alignX ?? a.fitAlignX, T = e.alignY ?? a.fitAlignY;
+      Y.value = { padding: r, alignX: d, alignY: T };
+      const A = Ee(r), Pe = Math.max(1, t.width - A * 2), St = Math.max(1, t.height - A * 2), Ze = l ? Pe / n.width : Number.POSITIVE_INFINITY, De = i ? St / n.height : Number.POSITIVE_INFINITY, Et = o === "width" ? Ze : o === "height" ? De : Math.min(Ze, De), Te = V(Et, c.scale, !0), zt = n.width * Te, Pt = n.height * Te;
+      return R({
+        scale: Te,
+        x: f.value ? Se(t.width, zt, A, d) : 0,
+        y: h.value ? Se(t.height, Pt, A, T) : 0
+      }, "fit", e.behavior), !0;
+    }, lt = () => {
+      M.value || (M.value = !0, b("update:ready", !0));
+    }, k = (e) => {
+      e === "viewport" && (re = !0), !F && (F = Be(() => {
+        F = 0;
+        const t = re && a.autoFitOnResize && M.value;
+        re = !1, xe(), t && ze({ behavior: "auto" });
+      }));
+    }, it = (e) => {
+      if (e.deltaMode === 1)
+        return { x: e.deltaX * _e, y: e.deltaY * _e };
+      if (e.deltaMode === 2) {
+        const t = P("x")?.getBoundingClientRect(), n = P("y")?.getBoundingClientRect();
+        return {
+          x: e.deltaX * (t?.width ?? 1),
+          y: e.deltaY * (n?.height ?? 1)
+        };
+      }
+      return { x: e.deltaX, y: e.deltaY };
+    }, rt = (e, t, n) => {
+      const o = window.getComputedStyle(e), l = ye.test(o.overflowX) && e.scrollWidth > e.clientWidth && (t < 0 && e.scrollLeft > 0 || t > 0 && e.scrollLeft + e.clientWidth < e.scrollWidth - 1), i = ye.test(o.overflowY) && e.scrollHeight > e.clientHeight && (n < 0 && e.scrollTop > 0 || n > 0 && e.scrollTop + e.clientHeight < e.scrollHeight - 1);
+      return l || i;
+    }, ct = (e, t, n) => {
+      const o = s.value;
+      let l = e instanceof HTMLElement ? e : null;
+      for (; l && l !== o; ) {
+        if (rt(l, t, n)) return !0;
+        l = l.parentElement;
+      }
+      return !1;
+    }, st = (e) => e instanceof Element && !!e.closest('input, textarea, select, [contenteditable="true"], [data-pan-zoom-ignore]'), Ye = (e) => e instanceof Element && !!e.closest(
+      'a[href], button, input, textarea, select, option, label, summary, [contenteditable="true"], [role="button"], [role="link"], [data-pan-zoom-ignore]'
+    ), Xe = (e) => {
+      if (a.disabled) return;
+      const t = it(e), n = e.ctrlKey || e.metaKey;
+      if (a.zoomEnabled && (a.wheelZoomMode === "always" || a.wheelZoomMode === "modifier" && n)) {
+        if (!e.cancelable) return;
+        e.preventDefault();
+        const l = t.y || t.x;
+        if (l === 0) return;
+        const i = z(a.wheelZoomSpeed, 2e-3), r = c.scale * Math.exp(-l * i);
+        te(r, {
+          anchor: { x: e.clientX, y: e.clientY, coordinateSpace: "client" },
+          behavior: "auto"
+        }, "wheel");
+        return;
+      }
+      !a.panEnabled || !a.wheelPanEnabled || !a.panOnWheel || n || t.x === 0 && t.y === 0 || t.x !== 0 && !f.value || t.y !== 0 && !h.value || st(e.target) && e.target === document.activeElement || ct(e.target, t.x, t.y) || e.cancelable && (e.preventDefault(), ne(-t.x, -t.y, {
+        coordinateSpace: "client",
+        behavior: "auto"
+      }, "wheel"));
+    }, ut = (e) => {
+      if (a.disabled || !D.value || S !== null) return;
+      const t = e.button === 1, n = e.button === 0 && I.value, o = e.button === 0 && a.panOnPrimaryDrag && !Ye(e.target);
+      !t && !n && !o || (e.preventDefault(), S = e.pointerId, ce = e.clientX, se = e.clientY, O.value = !0, s.value?.focus({ preventScroll: !0 }), s.value?.setPointerCapture(e.pointerId), b("pan-start"));
+    }, dt = (e) => {
+      if (e.pointerId !== S) return;
+      e.cancelable && e.preventDefault();
+      const t = e.clientX - ce, n = e.clientY - se;
+      ce = e.clientX, se = e.clientY, ne(t, n, {
+        coordinateSpace: "client",
+        behavior: "auto"
+      }, "pointer");
+    }, ae = (e) => {
+      if (S === null || e && e.pointerId !== S) return;
+      const t = S;
+      S = null, s.value?.hasPointerCapture(t) && s.value.releasePointerCapture(t), O.value && b("pan-end"), O.value = !1;
+    }, ft = (e) => {
+      if (a.disabled || !a.keyboard || Ye(e.target)) return;
+      const t = e.ctrlKey || e.metaKey;
+      if (e.key === " ") {
+        if (!D.value) return;
+        e.preventDefault(), I.value = !0;
+        return;
+      }
+      if (t && (e.key === "+" || e.key === "=")) {
+        if (!a.zoomEnabled) return;
+        e.preventDefault(), Ie({ behavior: "auto" });
+        return;
+      }
+      if (t && (e.key === "-" || e.key === "_")) {
+        if (!a.zoomEnabled) return;
+        e.preventDefault(), Ce({ behavior: "auto" });
+        return;
+      }
+      if (t && e.key === "0") {
+        if (!a.zoomEnabled && !ve.value) return;
+        e.preventDefault(), He({ behavior: "auto" });
+        return;
+      }
+      if (!a.keyboardPanEnabled || !ve.value) return;
+      const n = z(a.keyboardPanStep, 40), l = {
+        ArrowLeft: [n, 0],
+        ArrowRight: [-n, 0],
+        ArrowUp: [0, n],
+        ArrowDown: [0, -n]
+      }[e.key];
+      l && (l[0] !== 0 && !f.value || l[1] !== 0 && !h.value || (e.preventDefault(), ne(l[0], l[1], { behavior: "auto" }, "keyboard")));
+    }, ht = (e) => {
+      e.key === " " && (I.value = !1);
+    }, vt = () => {
+      I.value = !1;
+    }, mt = () => _.value.canZoomIn, pt = () => _.value.canZoomOut, ke = () => {
+      b("zoom-availability-change", { ..._.value });
+    }, gt = () => s.value?.focus({ preventScroll: !0 }), yt = () => s.value, Ne = (e) => {
+      const t = e === "x" ? a.contentWidth : a.contentHeight;
+      return typeof t == "number" && Number.isFinite(t) && t > 0 ? t : e === "x" ? w.value.width : w.value.height;
+    }, bt = p(() => {
+      if (!a.keyboard || a.disabled) return;
+      const e = [];
+      return a.zoomEnabled && e.push("Control++", "Meta++", "Control+-", "Meta+-", "Control+0", "Meta+0"), a.keyboardPanEnabled && f.value && e.push("ArrowLeft", "ArrowRight"), a.keyboardPanEnabled && h.value && e.push("ArrowUp", "ArrowDown"), e.length > 0 ? e.join(" ") : void 0;
+    }), wt = p(() => {
+      const e = typeof a.contentWidth == "number" && Number.isFinite(a.contentWidth) && a.contentWidth > 0 ? a.contentWidth : null, t = typeof a.contentHeight == "number" && Number.isFinite(a.contentHeight) && a.contentHeight > 0 ? a.contentHeight : null, n = {
+        width: e ? `${e}px` : "max-content",
+        minWidth: e || !f.value ? void 0 : "100%",
+        height: t ? `${t}px` : void 0,
+        left: f.value ? "0px" : `${oe("x", u.value.scale)}px`,
+        top: h.value ? "0px" : `${oe("y", u.value.scale)}px`,
+        visibility: M.value ? "visible" : "hidden"
+      };
+      return Me(fe, n) ? fe : (fe = n, n);
+    }), xt = p(() => {
+      const e = u.value.scale, t = Ee(Y.value.padding), n = Ne("x") * e + t * 2, o = Ne("y") * e + t * 2, l = n <= v.value.width + 0.5 ? v.value.width : n, i = o <= v.value.height + 0.5 ? v.value.height : o, r = {
+        width: f.value ? "100%" : `${l}px`,
+        minWidth: "100%",
+        height: h.value ? "100%" : `${i}px`,
+        minHeight: "100%",
+        overflowX: f.value ? "hidden" : "visible",
+        overflowY: h.value ? "hidden" : "visible",
+        cursor: D.value ? O.value ? "grabbing" : I.value ? "grab" : void 0 : void 0,
+        touchAction: D.value && a.panOnPrimaryDrag ? "none" : "manipulation"
+      };
+      return Me(he, r) ? he : (he = r, r);
+    }), Fe = () => {
+      if (!C) return;
+      C.disconnect(), j = /* @__PURE__ */ new WeakMap();
+      const e = /* @__PURE__ */ new Set(), t = P("x"), n = P("y");
+      t && e.add(t), n && e.add(n), e.forEach((o) => {
+        j.set(o, {
+          width: o.offsetWidth,
+          height: o.offsetHeight
+        }), C?.observe(o);
+      });
+    };
+    return At(async () => {
+      s.value?.addEventListener("wheel", Xe, { passive: !1 }), typeof ResizeObserver < "u" && (C = new ResizeObserver((e) => {
+        let t = !1;
+        e.forEach((n) => {
+          if (!(n.target instanceof HTMLElement)) return;
+          const o = j.get(n.target), l = {
+            width: n.target.offsetWidth,
+            height: n.target.offsetHeight
+          };
+          o && !ge(o, l) && (t = !0), j.set(n.target, l);
+        }), k(t ? "viewport" : "content");
+      }), U = new ResizeObserver(() => k("content")), B.value && U.observe(B.value)), await N(), Fe(), xe(), a.initialFit && (ze({ behavior: "auto" }), Qe()), J(u.value, E), lt(), ke();
+    }), Mt(() => {
+      s.value?.removeEventListener("wheel", Xe), C?.disconnect(), U?.disconnect(), C = null, U = null, $(m), $(F), m = 0, F = 0, Z += 1, x && clearTimeout(x), x = null, E = !1, H = null, ue = null, Q = null, de = !1, S = null, O.value = !1;
+    }), W(
+      () => [a.modelValue?.scale, a.modelValue?.x, a.modelValue?.y],
+      () => {
+        const e = X(a.modelValue, c.scale, !1);
+        L(e, c) || ($(m), m = 0, we(e, "external", "auto", !1));
+      }
+    ), W(
+      () => [a.minScale, a.maxScale],
+      () => {
+        const e = X(c, c.scale, !1);
+        L(e, c) || R(e, "external", "auto", !1);
+      }
+    ), W(
+      () => [a.zoomEnabled, a.zoomInEnabled, a.zoomOutEnabled],
+      () => {
+        !m || !G || c.scale === u.value.scale || ($(m), m = 0, c = u.value, G = !1, H = null, Z += 1);
+      }
+    ), W(
+      () => [
+        a.panEnabled,
+        a.pointerPanEnabled,
+        a.horizontalPanEnabled,
+        a.verticalPanEnabled,
+        a.disabled
+      ],
+      () => {
+        (!D.value || a.disabled) && (I.value = !1, ae());
+        const e = X(c, c.scale, !1);
+        L(e, c) || R(e, "external", "auto"), N(() => {
+          Fe(), k("content");
+        });
+      }
+    ), W(
+      () => [a.fitPadding, a.fitAlignX, a.fitAlignY],
+      ([e, t, n]) => {
+        Y.value = {
+          padding: Math.max(0, g(e, 24)),
+          alignX: t,
+          alignY: n
+        }, N(() => k("content"));
+      }
+    ), W(
+      () => [a.contentWidth, a.contentHeight],
+      () => {
+        N(() => k("content"));
+      }
+    ), W(
+      [Re, We],
+      () => {
+        M.value && ke();
+      }
+    ), $e({
+      zoomIn: Ie,
+      zoomOut: Ce,
+      setScale: nt,
+      setTransform: ot,
+      panBy: at,
+      reset: He,
+      fitToContent: ze,
+      canZoomIn: mt,
+      canZoomOut: pt,
+      focus: gt,
+      getViewportElement: yt
+    }), (e, t) => (Rt(), Wt("div", {
+      ref_key: "viewportRef",
+      ref: s,
+      class: "vlite-pan-zoom-viewport",
+      style: Ve(xt.value),
+      tabindex: K.disabled ? -1 : 0,
+      role: "region",
+      "aria-label": K.ariaLabel,
+      "aria-keyshortcuts": bt.value,
+      onPointerdown: ut,
+      onPointermove: dt,
+      onPointerup: ae,
+      onPointercancel: ae,
+      onLostpointercapture: ae,
+      onKeydown: ft,
+      onKeyup: ht,
+      onBlur: vt
+    }, [
+      Bt("div", {
+        ref_key: "contentRef",
+        ref: B,
+        class: Ot(["vlite-pan-zoom-viewport-content", K.contentClass]),
+        style: Ve(wt.value)
+      }, [
+        It(e.$slots, "default", {
+          transform: u.value,
+          viewportSize: v.value,
+          contentSize: w.value,
+          ready: M.value,
+          panning: O.value,
+          canZoomIn: _.value.canZoomIn,
+          canZoomOut: _.value.canZoomOut
+        }, void 0, !0)
+      ], 6)
+    ], 44, Ct));
+  }
+});
+export {
+  Yt as default
+};

package/components/PanZoomViewport/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PanZoomViewport } from './PanZoomViewport.vue';
+export type { PanZoomViewportActionOptions, PanZoomViewportAlignment, PanZoomViewportBehavior, PanZoomViewportChangeMeta, PanZoomViewportChangeSource, PanZoomViewportCoordinateSpace, PanZoomViewportExposed, PanZoomViewportFitMode, PanZoomViewportFitOptions, PanZoomViewportPanOptions, PanZoomViewportPoint, PanZoomViewportProps, PanZoomViewportSize, PanZoomViewportSlotScope, PanZoomViewportTransform, PanZoomViewportWheelZoomMode, PanZoomViewportZoomAvailability, PanZoomViewportZoomOptions, } from './types';

package/components/PanZoomViewport/types.d.ts

@@ -0,0 +1,121 @@
+/** A complete viewport transform in the viewport's local CSS pixel space. */
+export interface PanZoomViewportTransform {
+    scale: number;
+    x: number;
+    y: number;
+}
+/** Unscaled geometry reported by the viewport and slotted content. */
+export interface PanZoomViewportSize {
+    width: number;
+    height: number;
+}
+export type PanZoomViewportFitMode = 'contain' | 'width' | 'height';
+export type PanZoomViewportAlignment = 'start' | 'center' | 'end';
+export type PanZoomViewportBehavior = 'auto' | 'smooth';
+export type PanZoomViewportCoordinateSpace = 'local' | 'client';
+export type PanZoomViewportWheelZoomMode = 'modifier' | 'always' | 'disabled';
+export type PanZoomViewportChangeSource = 'external' | 'fit' | 'keyboard' | 'pan' | 'pointer' | 'reset' | 'wheel' | 'zoom';
+export interface PanZoomViewportPoint {
+    x: number;
+    y: number;
+    coordinateSpace?: PanZoomViewportCoordinateSpace;
+}
+export interface PanZoomViewportActionOptions {
+    behavior?: PanZoomViewportBehavior;
+}
+export interface PanZoomViewportZoomOptions extends PanZoomViewportActionOptions {
+    /** Defaults to the visual center of the viewport. */
+    anchor?: 'center' | PanZoomViewportPoint;
+}
+export interface PanZoomViewportPanOptions extends PanZoomViewportActionOptions {
+    /** `client` deltas are normalized through any ancestor CSS transforms. */
+    coordinateSpace?: PanZoomViewportCoordinateSpace;
+}
+export interface PanZoomViewportFitOptions extends PanZoomViewportActionOptions {
+    mode?: PanZoomViewportFitMode;
+    padding?: number;
+    alignX?: PanZoomViewportAlignment;
+    alignY?: PanZoomViewportAlignment;
+}
+export interface PanZoomViewportChangeMeta {
+    source: PanZoomViewportChangeSource;
+}
+export interface PanZoomViewportZoomAvailability {
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+}
+export interface PanZoomViewportProps {
+    /** Reactive transform. Omit it to use the component as an uncontrolled viewport. */
+    modelValue?: PanZoomViewportTransform;
+    /** Optional fixed, unscaled content width. Natural content width is used when omitted. */
+    contentWidth?: number;
+    /** Optional fixed, unscaled content height. Natural content height is used when omitted. */
+    contentHeight?: number;
+    minScale?: number;
+    maxScale?: number;
+    /** Multiplicative step used by zoom-in and zoom-out controls. */
+    zoomStep?: number;
+    /** Exponential wheel sensitivity. Smaller values zoom more slowly. */
+    wheelZoomSpeed?: number;
+    /** Local CSS pixels moved by each arrow-key press. */
+    keyboardPanStep?: number;
+    /** Default inset used by fit-to-content. */
+    fitPadding?: number;
+    fitMode?: PanZoomViewportFitMode;
+    fitAlignX?: PanZoomViewportAlignment;
+    fitAlignY?: PanZoomViewportAlignment;
+    /** Fit once after the initial content measurement without animating. */
+    initialFit?: boolean;
+    /** Re-apply the configured fit when the viewport itself resizes. */
+    autoFitOnResize?: boolean;
+    /** Enable wheel, keyboard, and controller-driven zoom interactions. */
+    zoomEnabled?: boolean;
+    /** Enable requests that increase scale, subject to the maximum bound. */
+    zoomInEnabled?: boolean;
+    /** Enable requests that decrease scale, subject to the minimum bound. */
+    zoomOutEnabled?: boolean;
+    /** Master switch for all component-owned transform translation. */
+    panEnabled?: boolean;
+    /** Enable Space-, middle-button-, and configured primary-button drag panning. */
+    pointerPanEnabled?: boolean;
+    /** Enable component-owned translation from ordinary wheel/trackpad input. */
+    wheelPanEnabled?: boolean;
+    /** Enable component-owned translation from arrow-key input. */
+    keyboardPanEnabled?: boolean;
+    /** Enable component-owned horizontal transform translation. */
+    horizontalPanEnabled?: boolean;
+    /** Enable component-owned vertical transform translation. */
+    verticalPanEnabled?: boolean;
+    /** Pan on ordinary wheel/two-finger trackpad input. */
+    panOnWheel?: boolean;
+    /** Modifier-only matches Figma-style Ctrl/Command + wheel and trackpad pinch. */
+    wheelZoomMode?: PanZoomViewportWheelZoomMode;
+    /** Allow direct primary-button/touch drag in addition to Space-drag and middle-drag. */
+    panOnPrimaryDrag?: boolean;
+    keyboard?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    contentClass?: string;
+}
+export interface PanZoomViewportSlotScope {
+    transform: PanZoomViewportTransform;
+    viewportSize: PanZoomViewportSize;
+    contentSize: PanZoomViewportSize;
+    ready: boolean;
+    panning: boolean;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+}
+export interface PanZoomViewportExposed {
+    zoomIn: (options?: PanZoomViewportZoomOptions) => void;
+    zoomOut: (options?: PanZoomViewportZoomOptions) => void;
+    setScale: (scale: number, options?: PanZoomViewportZoomOptions) => void;
+    setTransform: (transform: PanZoomViewportTransform, options?: PanZoomViewportActionOptions) => void;
+    panBy: (deltaX: number, deltaY: number, options?: PanZoomViewportPanOptions) => void;
+    reset: (options?: PanZoomViewportActionOptions) => void;
+    fitToContent: (options?: PanZoomViewportFitOptions) => boolean;
+    canZoomIn: () => boolean;
+    canZoomOut: () => boolean;
+    focus: () => void;
+    getViewportElement: () => HTMLElement | null;
+}

package/components/ScaleGenerator/ScaleGenerator.vue.d.ts

@@ -6,6 +6,7 @@ declare function __VLS_template(): {
             scale: number;
             containerWidth: number;
             targetWidth: number;
+            ready: boolean;
         }): any;
     };
     refs: {
@@ -18,9 +19,11 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<ScaleGeneratorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:scale": (value: number) => any;
     "update:containerWidth": (value: number) => any;
+    "update:ready": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<ScaleGeneratorProps> & Readonly<{
     "onUpdate:scale"?: (value: number) => any;
     "onUpdate:containerWidth"?: (value: number) => any;
+    "onUpdate:ready"?: (value: boolean) => any;
 }>, {
     maxWidth: number;
     contentClass: string;