marquee-selection 0.0.11

package/dist/index.d.ts

@@ -0,0 +1,215 @@
+/**
+ * InfiniteCanvas
+ *
+ * 在指定 HTML 容器内启用双指缩放与双指平移（触摸手势）。
+ * 会将容器现有子节点搬运到一个内部 content 容器中，并对该 content 施加 CSS 变换。
+ */
+type InfiniteCanvasOptions = {
+    container: HTMLElement;
+    initialScale?: number;
+    minScale?: number;
+    maxScale?: number;
+    initialTranslate?: {
+        x: number;
+        y: number;
+    };
+    clampOverflowHidden?: boolean;
+    contentClassName?: string;
+    autoFit?: boolean | {
+        mode?: "contain" | "width" | "height" | "cover";
+        alignX?: "left" | "center" | "right";
+        alignY?: "top" | "center" | "bottom";
+        padding?: number;
+    };
+    autoRefitOnResize?: boolean;
+    onReady?: (content: HTMLDivElement) => void;
+    onTransform?: (state: {
+        scale: number;
+        x: number;
+        y: number;
+        content: HTMLDivElement;
+    }) => void;
+    onTransformStart?: (state: {
+        scale: number;
+        x: number;
+        y: number;
+        content: HTMLDivElement;
+    }) => void;
+    onTransformEnd?: (state: {
+        scale: number;
+        x: number;
+        y: number;
+        content: HTMLDivElement;
+    }) => void;
+};
+declare class InfiniteCanvas {
+    private container;
+    private content;
+    private scale;
+    private tx;
+    private ty;
+    private minScale;
+    private maxScale;
+    private destroyed;
+    private onTransformCb?;
+    private onTransformStartCb?;
+    private onTransformEndCb?;
+    private transforming;
+    private transformEndTimer;
+    private refitTimer;
+    private autoFitPreset;
+    private resizeObserver?;
+    private resizeHandler?;
+    private hitLayer;
+    private gesture;
+    private inContainerGesture;
+    private onWindowTouchStart?;
+    private onWindowTouchMove?;
+    private onWindowTouchEnd?;
+    private onWindowWheel?;
+    constructor(options: InfiniteCanvasOptions);
+    destroy(): void;
+    getTransform(): {
+        scale: number;
+        x: number;
+        y: number;
+    };
+    setTransform(t: {
+        scale?: number;
+        x?: number;
+        y?: number;
+    }): void;
+    reset(): void;
+    private clampScale;
+    private normalizeFitParams;
+    computeFitTransform(params?: {
+        mode?: "contain" | "width" | "height" | "cover";
+        alignX?: "left" | "center" | "right";
+        alignY?: "top" | "center" | "bottom";
+        padding?: number;
+    }): {
+        scale: number;
+        x: number;
+        y: number;
+    } | null;
+    fitToView(params?: {
+        mode?: "contain" | "width" | "height" | "cover";
+        alignX?: "left" | "center" | "right";
+        alignY?: "top" | "center" | "bottom";
+        padding?: number;
+    }): void;
+    private _noop;
+    private _isPointInContainer;
+    private _windowTouchStart;
+    private _windowTouchMove;
+    private _windowTouchEnd;
+    private _windowWheel;
+    private applyTransform;
+    private getTouches;
+    private midpoint;
+    private distance;
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
+    private onWheel;
+    private onGesture;
+}
+
+type MarqueeSelectionOptions = {
+    container: HTMLElement;
+    selectable?: string;
+    exclude?: string | string[];
+    selectionMode?: "intersects" | "contains" | "center";
+    minOverlapRatio?: number;
+    overlapMetric?: "element" | "iou";
+    selectedClass?: string;
+    onChange?: (payload: {
+        type: "single";
+        selected: Element[];
+    } | {
+        type: "groups";
+        groups: Element[][];
+        flat: Element[];
+    }) => void;
+    preventAncestorSelection?: boolean;
+    conflictStrategy?: "none" | "leaf" | "best";
+    multi?: boolean;
+    combineMode?: "replace" | "add" | "subtract" | "toggle" | "auto";
+    groupMode?: boolean;
+    groupOverlayClass?: string;
+    groupColor?: string;
+    groupRandomColor?: boolean;
+    groupColorPalette?: string[];
+    hoverHighlight?: boolean;
+    hoverClass?: string;
+    onSelectionEnd?: (snapshot: MarqueeSelectionSnapshot) => void;
+    quickGroupOnDblClick?: boolean;
+    quickGroupSelector?: string;
+    allowIntersectionSelection?: boolean;
+    allowContainmentSelection?: boolean;
+    allowUnionSelection?: boolean;
+    toolbarButtons?: Array<{
+        label: string;
+        title?: string;
+        className?: string;
+        onClick?: (ctx: {
+            index: number;
+            group: Element[];
+            controller: MarqueeSelectionController;
+            getSnapshot: () => MarqueeSelectionSnapshot;
+            refresh: () => void;
+            mouseX?: number;
+            mouseY?: number;
+            anchorRect?: DOMRect;
+            anchorEl?: HTMLElement;
+            overlayEl?: HTMLElement;
+        }) => void;
+    }>;
+};
+type MarqueeSelectionSnapshot = {
+    type: "single";
+    selected: Element[];
+} | {
+    type: "groups";
+    groups: Element[][];
+    flat: Element[];
+    hidden: boolean[];
+    groupRects: ({
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null)[];
+    groupNesting: {
+        parents: (number | null)[];
+        children: number[][];
+        roots: number[];
+    };
+};
+type MarqueeSelectionController = {
+    destroy: () => void;
+    getGroups: () => Element[][];
+    clearGroups: () => void;
+    removeGroup: (index: number) => boolean;
+    addGroup: (elements: Element[]) => boolean;
+    setGroupVisibility: (index: number, hidden: boolean) => boolean;
+    toggleGroupVisibility: (index: number) => boolean;
+    getSelectionResult: () => MarqueeSelectionSnapshot;
+    refresh: () => void;
+    hideOverlays: () => void;
+    showAndRefreshOverlays: () => void;
+    onSelectionEnd: (handler: (snapshot: MarqueeSelectionSnapshot) => void) => () => void;
+    waitForSelectionEnd: () => Promise<MarqueeSelectionSnapshot>;
+    getGroupNesting: () => {
+        parents: (number | null)[];
+        children: number[][];
+        roots: number[];
+    } | null;
+};
+/**
+ * 启用容器内矩形拖拽圈选
+ */
+declare function marqueeSelection(options: MarqueeSelectionOptions): MarqueeSelectionController;
+
+export { InfiniteCanvas, marqueeSelection };
+export type { InfiniteCanvasOptions, MarqueeSelectionOptions };

package/dist/infinite-canvas.es.js

@@ -0,0 +1,475 @@
+class G {
+  constructor(t) {
+    this.scale = 1, this.tx = 0, this.ty = 0, this.destroyed = !1, this.transforming = !1, this.transformEndTimer = null, this.refitTimer = null, this.autoFitPreset = null, this.gesture = null, this.inContainerGesture = !1;
+    const {
+      container: e,
+      initialScale: i = 1,
+      minScale: n = 0.2,
+      maxScale: s = 6,
+      initialTranslate: r = { x: 0, y: 0 },
+      clampOverflowHidden: h = !0,
+      contentClassName: o,
+      autoFit: a,
+      autoRefitOnResize: f = !1,
+      onReady: y,
+      onTransform: p,
+      onTransformStart: w,
+      onTransformEnd: x
+    } = t;
+    if (!e) throw new Error("InfiniteCanvas: container is required");
+    this.container = e, this.scale = i, this.tx = r.x, this.ty = r.y, this.minScale = Math.min(n, s), this.maxScale = Math.max(n, s), this.onTransformCb = p, this.onTransformStartCb = w, this.onTransformEndCb = x;
+    const c = document.createElement("div");
+    c.style.position = "relative", c.style.transformOrigin = "0 0", c.style.willChange = "transform", o && (c.className = o);
+    const T = [];
+    for (; e.firstChild; )
+      T.push(e.firstChild), e.removeChild(e.firstChild);
+    if (T.forEach((d) => c.appendChild(d)), e.appendChild(c), this.content = c, e.style.touchAction = "none", e.style.overscrollBehavior = e.style.overscrollBehavior || "none", h && (e.style.overflow || (e.style.overflow = "hidden")), a) {
+      const d = this.normalizeFitParams(a), l = this.computeFitTransform(d);
+      l && (this.scale = this.clampScale(l.scale), this.tx = l.x, this.ty = l.y, this.autoFitPreset = d);
+    }
+    if (this.applyTransform(), this.autoFitPreset && f) {
+      const d = () => {
+        this.refitTimer && clearTimeout(this.refitTimer), this.refitTimer = setTimeout(() => {
+          this.fitToView(this.autoFitPreset || void 0);
+        }, 100);
+      };
+      try {
+        this.resizeObserver = new ResizeObserver(() => d()), this.resizeObserver.observe(this.container);
+      } catch {
+      }
+      this.resizeHandler = d, window.addEventListener("resize", this.resizeHandler);
+    }
+    this.onTouchStart = this.onTouchStart.bind(this), this.onTouchMove = this.onTouchMove.bind(this), this.onTouchEnd = this.onTouchEnd.bind(this), this.onWheel = this.onWheel.bind(this), this.onGesture = this.onGesture.bind(this), this.onWindowTouchStart = this._windowTouchStart.bind(this), this.onWindowTouchMove = this._windowTouchMove.bind(this), this.onWindowTouchEnd = this._windowTouchEnd.bind(this), this.onWindowWheel = this._windowWheel.bind(this);
+    try {
+      getComputedStyle(e).position === "static" && (e.style.position = "relative");
+    } catch {
+    }
+    if (window.addEventListener(
+      "touchstart",
+      this.onWindowTouchStart,
+      {
+        passive: !1,
+        capture: !0
+      }
+    ), window.addEventListener(
+      "touchmove",
+      this.onWindowTouchMove,
+      {
+        passive: !1,
+        capture: !0
+      }
+    ), window.addEventListener(
+      "touchend",
+      this.onWindowTouchEnd,
+      {
+        passive: !1,
+        capture: !0
+      }
+    ), window.addEventListener(
+      "touchcancel",
+      this.onWindowTouchEnd,
+      {
+        passive: !1,
+        capture: !0
+      }
+    ), window.addEventListener(
+      "wheel",
+      this.onWindowWheel,
+      {
+        passive: !1,
+        capture: !0
+      }
+    ), window.addEventListener(
+      "gesturestart",
+      this.onGesture,
+      { passive: !1, capture: !0 }
+    ), window.addEventListener(
+      "gesturechange",
+      this.onGesture,
+      { passive: !1, capture: !0 }
+    ), window.addEventListener(
+      "gestureend",
+      this.onGesture,
+      { passive: !1, capture: !0 }
+    ), typeof y == "function")
+      try {
+        y(this.content);
+      } catch {
+      }
+  }
+  // 对外 API
+  destroy() {
+    if (!this.destroyed) {
+      if (this.destroyed = !0, this.container, window.removeEventListener(
+        "touchstart",
+        this.onWindowTouchStart,
+        !0
+      ), window.removeEventListener(
+        "touchmove",
+        this.onWindowTouchMove,
+        !0
+      ), window.removeEventListener(
+        "touchend",
+        this.onWindowTouchEnd,
+        !0
+      ), window.removeEventListener(
+        "touchcancel",
+        this.onWindowTouchEnd,
+        !0
+      ), window.removeEventListener(
+        "wheel",
+        this.onWindowWheel,
+        !0
+      ), window.removeEventListener(
+        "gesturestart",
+        this.onGesture,
+        !0
+      ), window.removeEventListener(
+        "gesturechange",
+        this.onGesture,
+        !0
+      ), window.removeEventListener(
+        "gestureend",
+        this.onGesture,
+        !0
+      ), this.resizeObserver) {
+        try {
+          this.resizeObserver.disconnect();
+        } catch {
+        }
+        this.resizeObserver = void 0;
+      }
+      this.resizeHandler && (window.removeEventListener("resize", this.resizeHandler), this.resizeHandler = void 0);
+    }
+  }
+  getTransform() {
+    return { scale: this.scale, x: this.tx, y: this.ty };
+  }
+  setTransform(t) {
+    typeof t.scale == "number" && (this.scale = this.clampScale(t.scale)), typeof t.x == "number" && (this.tx = t.x), typeof t.y == "number" && (this.ty = t.y), this.applyTransform();
+  }
+  reset() {
+    this.scale = 1, this.tx = 0, this.ty = 0, this.applyTransform();
+  }
+  // 内部工具
+  clampScale(t) {
+    return Math.min(this.maxScale, Math.max(this.minScale, t));
+  }
+  normalizeFitParams(t) {
+    const e = typeof t == "object" ? t : {
+      mode: "contain",
+      alignX: "center",
+      alignY: "center",
+      padding: 0
+    };
+    return {
+      mode: e.mode || "contain",
+      alignX: e.alignX || "center",
+      alignY: e.alignY || "center",
+      padding: Math.max(0, e.padding ?? 0)
+    };
+  }
+  // 计算使内容按给定策略适配到容器可见区域的变换（不应用）
+  computeFitTransform(t) {
+    const e = this.container, i = this.content, n = Math.max(0, e.clientWidth), s = Math.max(0, e.clientHeight);
+    if (n === 0 || s === 0) return null;
+    const r = i.getBoundingClientRect(), h = this.scale || 1;
+    let o = Number.POSITIVE_INFINITY, a = Number.POSITIVE_INFINITY, f = Number.NEGATIVE_INFINITY, y = Number.NEGATIVE_INFINITY;
+    const p = Array.from(i.querySelectorAll("*"));
+    for (const g of p) {
+      const m = g.getBoundingClientRect();
+      if (m.width <= 0 || m.height <= 0) continue;
+      const W = (m.left - r.left) / h, I = (m.top - r.top) / h, Y = (m.right - r.left) / h, F = (m.bottom - r.top) / h;
+      W < o && (o = W), I < a && (a = I), Y > f && (f = Y), F > y && (y = F);
+    }
+    if (!isFinite(o) || !isFinite(a) || !isFinite(f) || !isFinite(y)) {
+      const g = Math.max(
+        i.scrollWidth,
+        i.offsetWidth,
+        i.clientWidth
+      ), m = Math.max(
+        i.scrollHeight,
+        i.offsetHeight,
+        i.clientHeight
+      );
+      if (g === 0 || m === 0) return null;
+      o = 0, a = 0, f = g, y = m;
+    }
+    const w = Math.max(0, f - o), x = Math.max(0, y - a), c = (t == null ? void 0 : t.mode) ?? "contain", T = (t == null ? void 0 : t.alignX) ?? "center", d = (t == null ? void 0 : t.alignY) ?? "center", l = Math.max(0, (t == null ? void 0 : t.padding) ?? 0), L = Math.max(0, n - l * 2), X = Math.max(0, s - l * 2), v = L / w, E = X / x;
+    let u = 1;
+    c === "width" ? u = v : c === "height" ? u = E : c === "cover" ? u = Math.max(v, E) : u = Math.min(v, E), u = this.clampScale(u);
+    const S = w * u, M = x * u;
+    let b = l, C = l;
+    T === "center" ? b = Math.round((n - S) / 2) : T === "right" && (b = Math.round(n - S - l)), d === "center" ? C = Math.round((s - M) / 2) : d === "bottom" && (C = Math.round(s - M - l));
+    const _ = b - Math.round(o * u), z = C - Math.round(a * u);
+    return { scale: u, x: _, y: z };
+  }
+  // 应用适配（基于 computeFitTransform 计算结果）
+  fitToView(t) {
+    const e = this.normalizeFitParams(t || { mode: "contain" }), i = this.computeFitTransform(e);
+    i && (this.scale = this.clampScale(i.scale), this.tx = i.x, this.ty = i.y, this.autoFitPreset = e, this.applyTransform());
+  }
+  // 仅用于移除 window.resize 监听占位（便于彻底清理）
+  _noop() {
+  }
+  // 命中检测：点是否在容器可见区域内
+  _isPointInContainer(t, e) {
+    const i = this.container.getBoundingClientRect();
+    return t >= i.left && t <= i.right && e >= i.top && e <= i.bottom;
+  }
+  // 窗口级触摸/滚轮捕获：仅当命中容器时转发
+  _windowTouchStart(t) {
+    if (t.touches.length === 0) return;
+    let e = !1;
+    for (let i = 0; i < t.touches.length; i++) {
+      const n = t.touches.item ? t.touches.item(i) : t.touches[i];
+      if (n && this._isPointInContainer(n.clientX, n.clientY)) {
+        e = !0;
+        break;
+      }
+    }
+    e && this.onTouchStart(t);
+  }
+  _windowTouchMove(t) {
+    if (t.touches.length === 0) return;
+    let e = !1;
+    for (let i = 0; i < t.touches.length; i++) {
+      const n = t.touches.item ? t.touches.item(i) : t.touches[i];
+      if (n && this._isPointInContainer(n.clientX, n.clientY)) {
+        e = !0;
+        break;
+      }
+    }
+    e && this.onTouchMove(t);
+  }
+  _windowTouchEnd(t) {
+    const e = t.changedTouches;
+    if (e && e.length > 0) {
+      const i = e.item ? e.item(0) : e[0];
+      if (i && !this._isPointInContainer(i.clientX, i.clientY)) return;
+    }
+    this.onTouchEnd(t);
+  }
+  _windowWheel(t) {
+    this._isPointInContainer(t.clientX, t.clientY) && this.onWheel(t);
+  }
+  applyTransform() {
+    if (this.content.style.transform = `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})`, this.onTransformCb)
+      try {
+        this.onTransformCb({
+          scale: this.scale,
+          x: this.tx,
+          y: this.ty,
+          content: this.content
+        });
+      } catch {
+      }
+    try {
+      const t = new CustomEvent("infiniteCanvas:transform", {
+        detail: {
+          scale: this.scale,
+          x: this.tx,
+          y: this.ty,
+          content: this.content
+        },
+        bubbles: !0
+      });
+      this.container.dispatchEvent(t);
+    } catch {
+    }
+    this.transforming && (this.transformEndTimer && clearTimeout(this.transformEndTimer), this.transformEndTimer = setTimeout(() => {
+      this.transforming = !1;
+      try {
+        const t = new CustomEvent("infiniteCanvas:transformEnd", {
+          detail: {
+            scale: this.scale,
+            x: this.tx,
+            y: this.ty,
+            content: this.content
+          },
+          bubbles: !0
+        });
+        this.container.dispatchEvent(t);
+      } catch {
+      }
+      if (this.onTransformEndCb)
+        try {
+          this.onTransformEndCb({
+            scale: this.scale,
+            x: this.tx,
+            y: this.ty,
+            content: this.content
+          });
+        } catch {
+        }
+    }, 120));
+  }
+  getTouches(t) {
+    const e = t.touches, i = [];
+    for (let n = 0; n < e.length; n++) {
+      const s = e.item ? e.item(n) : e[n];
+      s && i.push({ x: s.clientX, y: s.clientY });
+    }
+    return i;
+  }
+  midpoint(t, e) {
+    return { x: (t.x + e.x) / 2, y: (t.y + e.y) / 2 };
+  }
+  distance(t, e) {
+    const i = t.x - e.x, n = t.y - e.y;
+    return Math.hypot(i, n);
+  }
+  onTouchStart(t) {
+    if (t.touches.length >= 2) {
+      if (t.preventDefault(), this.inContainerGesture = !0, !this.transforming) {
+        this.transforming = !0;
+        try {
+          const a = new CustomEvent("infiniteCanvas:transformStart", {
+            detail: {
+              scale: this.scale,
+              x: this.tx,
+              y: this.ty,
+              content: this.content
+            },
+            bubbles: !0
+          });
+          this.container.dispatchEvent(a);
+        } catch {
+        }
+        if (this.onTransformStartCb)
+          try {
+            this.onTransformStartCb({
+              scale: this.scale,
+              x: this.tx,
+              y: this.ty,
+              content: this.content
+            });
+          } catch {
+          }
+      }
+      const e = this.getTouches(t);
+      if (e.length < 2) return;
+      const i = e[0], n = e[1], s = this.midpoint(i, n), r = this.distance(i, n), h = (s.x - this.tx) / this.scale, o = (s.y - this.ty) / this.scale;
+      this.gesture = {
+        startMid: s,
+        startDist: Math.max(1, r),
+        startScale: this.scale,
+        startTx: this.tx,
+        startTy: this.ty,
+        worldAtMid: { x: h, y: o }
+      };
+    }
+  }
+  onTouchMove(t) {
+    if (!this.gesture) {
+      t.touches.length >= 2 && this.onTouchStart(t);
+      return;
+    }
+    if (t.touches.length < 2) return;
+    t.preventDefault();
+    const e = this.getTouches(t);
+    if (e.length < 2) return;
+    const i = e[0], n = e[1], s = this.midpoint(i, n), r = this.distance(i, n), h = this.gesture, o = this.clampScale(h.startScale * (r / h.startDist)), a = s.x - o * h.worldAtMid.x, f = s.y - o * h.worldAtMid.y;
+    this.scale = o, this.tx = a, this.ty = f, this.applyTransform();
+  }
+  onTouchEnd(t) {
+    if (t.touches.length < 2 && (this.gesture = null, this.inContainerGesture = !1, this.transforming)) {
+      this.transforming = !1, this.transformEndTimer && (clearTimeout(this.transformEndTimer), this.transformEndTimer = null);
+      try {
+        const e = new CustomEvent("infiniteCanvas:transformEnd", {
+          detail: {
+            scale: this.scale,
+            x: this.tx,
+            y: this.ty,
+            content: this.content
+          },
+          bubbles: !0
+        });
+        this.container.dispatchEvent(e);
+      } catch {
+      }
+      if (this.onTransformEndCb)
+        try {
+          this.onTransformEndCb({
+            scale: this.scale,
+            x: this.tx,
+            y: this.ty,
+            content: this.content
+          });
+        } catch {
+        }
+    }
+  }
+  // 轨迹板/鼠标：两指滚动 => 平移；Ctrl/⌘ + 滚轮 => 缩放（Chrome/Edge）
+  onWheel(t) {
+    if (this.container.contains(t.target)) {
+      if (t.ctrlKey) {
+        if (t.preventDefault(), !this.transforming) {
+          this.transforming = !0;
+          try {
+            const r = new CustomEvent("infiniteCanvas:transformStart", {
+              detail: {
+                scale: this.scale,
+                x: this.tx,
+                y: this.ty,
+                content: this.content
+              },
+              bubbles: !0
+            });
+            this.container.dispatchEvent(r);
+          } catch {
+          }
+          if (this.onTransformStartCb)
+            try {
+              this.onTransformStartCb({
+                scale: this.scale,
+                x: this.tx,
+                y: this.ty,
+                content: this.content
+              });
+            } catch {
+            }
+        }
+        const e = (t.clientX - this.tx) / this.scale, i = (t.clientY - this.ty) / this.scale, n = Math.exp(-t.deltaY * 2e-3), s = this.clampScale(this.scale * n);
+        this.tx = t.clientX - s * e, this.ty = t.clientY - s * i, this.scale = s, this.applyTransform();
+        return;
+      }
+      if (t.preventDefault(), !this.transforming) {
+        this.transforming = !0;
+        try {
+          const e = new CustomEvent("infiniteCanvas:transformStart", {
+            detail: {
+              scale: this.scale,
+              x: this.tx,
+              y: this.ty,
+              content: this.content
+            },
+            bubbles: !0
+          });
+          this.container.dispatchEvent(e);
+        } catch {
+        }
+        if (this.onTransformStartCb)
+          try {
+            this.onTransformStartCb({
+              scale: this.scale,
+              x: this.tx,
+              y: this.ty,
+              content: this.content
+            });
+          } catch {
+          }
+      }
+      this.tx -= t.deltaX, this.ty -= t.deltaY, this.applyTransform();
+    }
+  }
+  // iOS Safari 的非标准手势事件：阻止页面级缩放
+  onGesture(t) {
+    const e = t.target;
+    (!!(e && this.container.contains(e)) || this.inContainerGesture) && typeof t.preventDefault == "function" && t.preventDefault();
+  }
+}
+export {
+  G as InfiniteCanvas
+};
+//# sourceMappingURL=infinite-canvas.es.js.map