@jamesyong42/infinite-canvas 1.0.0 → 1.2.0

package/dist/index.js

@@ -1,602 +0,0 @@
-import { GridRenderer, SelectionRenderer, WorldBounds, Widget, WidgetSlot, SelectionOverlaySlot, EngineProvider, ContainerRefProvider, useWidgetResolver, WebGLWidgetLayer, DEAD_ZONE_TOUCH_PX, CursorResource, NavigationStackResource, isR3FWidget, WidgetResolverProvider, useComponent, WidgetData, WidgetBreakpoint, Children, useTag, Selected, useLayoutEngine } from './chunk-Z6JQQOWL.js';
-export { Active, BreakpointConfigResource, CameraResource, Children, CommandBuffer, Container, CursorHint, CursorResource, DEFAULT_GRID_CONFIG, DEFAULT_SELECTION_CONFIG, Draggable, HandleSet, Hitbox, InteractionRole, Locked, MoveCommand, NavigationStackResource, Parent, Resizable, ResizeCommand, Selectable, Selected, SetComponentCommand, Transform2D, ViewportResource, Visible, Widget, WidgetBreakpoint, WidgetData, WidgetResolverProvider, WorldBounds, ZIndex, ZoomConfigResource, clamp, createArchetypeRegistry, createLayoutEngine, createWidgetRegistry, intersectsAABB, isR3FWidget, pointInAABB, screenToWorld, useCamera, useComponent, useContainerRef, useLayoutEngine, useQuery, useResource, useTag, useTaggedEntities, useWidgetResolver, worldBoundsToAABB, worldToScreen } from './chunk-Z6JQQOWL.js';
-import React, { useRef, useEffect, useImperativeHandle, useState, useCallback, useLayoutEffect, useMemo } from 'react';
-import { Vector2 } from 'three';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function WidgetProvider({ engine, children }) {
-  const resolver = useCallback(
-    (_entityId, widgetType) => {
-      const def = engine.getWidget(widgetType);
-      if (!def) return null;
-      if (isR3FWidget(def)) {
-        return { surface: "webgl", component: def.component };
-      }
-      return { surface: "dom", component: def.component };
-    },
-    [engine]
-  );
-  return /* @__PURE__ */ jsx(WidgetResolverProvider, { value: resolver, children });
-}
-var InfiniteCanvas = React.forwardRef(
-  function InfiniteCanvas2({
-    engine,
-    grid,
-    selection,
-    onSelectionChange,
-    onCameraChange,
-    onNavigationChange,
-    className,
-    style,
-    children
-  }, ref) {
-    const containerRef = useRef(null);
-    const onSelectionChangeRef = useRef(onSelectionChange);
-    const onCameraChangeRef = useRef(onCameraChange);
-    const onNavigationChangeRef = useRef(onNavigationChange);
-    useEffect(() => {
-      onSelectionChangeRef.current = onSelectionChange;
-    }, [onSelectionChange]);
-    useEffect(() => {
-      onCameraChangeRef.current = onCameraChange;
-    }, [onCameraChange]);
-    useEffect(() => {
-      onNavigationChangeRef.current = onNavigationChange;
-    }, [onNavigationChange]);
-    useImperativeHandle(
-      ref,
-      () => ({
-        panTo: (x, y) => {
-          engine.panTo(x, y);
-          engine.markDirty();
-        },
-        zoomTo: (zoom) => {
-          engine.zoomTo(zoom);
-          engine.markDirty();
-        },
-        zoomToFit: (padding) => {
-          engine.zoomToFit(void 0, padding);
-          engine.markDirty();
-        },
-        undo: () => {
-          engine.undo();
-          engine.markDirty();
-        },
-        redo: () => {
-          engine.redo();
-          engine.markDirty();
-        },
-        getEngine: () => engine
-      }),
-      [engine]
-    );
-    const webglCanvasRef = useRef(null);
-    const gridRendererRef = useRef(null);
-    const selectionRendererRef = useRef(null);
-    const cameraLayerRef = useRef(null);
-    const slotRefs = useRef(/* @__PURE__ */ new Map());
-    const [visibleEntities, setVisibleEntities] = useState([]);
-    const registerSlotRef = useCallback((entityId, el) => {
-      if (el) {
-        slotRefs.current.set(entityId, el);
-      } else {
-        slotRefs.current.delete(entityId);
-      }
-    }, []);
-    useLayoutEffect(() => {
-      const container = containerRef.current;
-      const canvas = webglCanvasRef.current;
-      if (!container || !canvas) return;
-      const gridEnabled = grid !== false;
-      let gridInst = null;
-      if (gridEnabled) {
-        gridInst = new GridRenderer(canvas);
-        gridRendererRef.current = gridInst;
-      }
-      const selInst = new SelectionRenderer();
-      selectionRendererRef.current = selInst;
-      const updateSize = () => {
-        const rect = container.getBoundingClientRect();
-        const dpr = window.devicePixelRatio;
-        engine.setViewport(rect.width, rect.height, dpr);
-        canvas.style.width = `${rect.width}px`;
-        canvas.style.height = `${rect.height}px`;
-        if (gridInst) {
-          gridInst.setSize(rect.width, rect.height, dpr);
-        }
-        selInst.setSize(new Vector2(rect.width * dpr, rect.height * dpr), dpr);
-      };
-      updateSize();
-      const observer = new ResizeObserver(updateSize);
-      observer.observe(container);
-      return () => {
-        observer.disconnect();
-        if (gridInst) {
-          gridInst.dispose();
-          gridRendererRef.current = null;
-        }
-        selInst.dispose();
-        selectionRendererRef.current = null;
-      };
-    }, [engine, grid]);
-    useEffect(() => {
-      const gridR = gridRendererRef.current;
-      if (gridR && grid !== false) {
-        const isDark = document.documentElement.classList.contains("dark");
-        gridR.setConfig({
-          dotColor: isDark ? [1, 1, 1] : [0, 0, 0],
-          dotAlpha: isDark ? 0.12 : 0.18,
-          ...grid
-        });
-      }
-      const selR = selectionRendererRef.current;
-      if (selR && selection) {
-        selR.setConfig(selection);
-      }
-      engine.markDirty();
-    }, [engine, grid, selection]);
-    useEffect(() => {
-      const container = containerRef.current;
-      if (!container) return;
-      const onWheel = (e) => {
-        e.preventDefault();
-        if (e.ctrlKey || e.metaKey) {
-          const rect = container.getBoundingClientRect();
-          engine.zoomAtPoint(e.clientX - rect.left, e.clientY - rect.top, -e.deltaY * 0.01);
-        } else {
-          engine.panBy(-e.deltaX, -e.deltaY);
-        }
-      };
-      container.addEventListener("wheel", onWheel, { passive: false });
-      return () => container.removeEventListener("wheel", onWheel);
-    }, [engine]);
-    useEffect(() => {
-      const container = containerRef.current;
-      if (!container) return;
-      let gesture = { type: "idle" };
-      let lastTapTime = 0;
-      let lastTapX = 0;
-      let lastTapY = 0;
-      const DOUBLE_TAP_MS = 300;
-      const DOUBLE_TAP_DIST = 30;
-      function isOnWidget(target) {
-        let el = target;
-        while (el && el !== container) {
-          if (el.hasAttribute("data-widget-slot")) return true;
-          el = el.parentElement;
-        }
-        return false;
-      }
-      function isInteractive(target) {
-        const el = target;
-        if (!el) return false;
-        const tag = el.tagName;
-        return tag === "INPUT" || tag === "TEXTAREA" || tag === "BUTTON" || tag === "SELECT" || el.isContentEditable || el.closest("button") !== null;
-      }
-      function getRect() {
-        return container?.getBoundingClientRect() ?? new DOMRect();
-      }
-      function touchDist(t1, t2) {
-        const dx = t1.clientX - t2.clientX;
-        const dy = t1.clientY - t2.clientY;
-        return Math.sqrt(dx * dx + dy * dy);
-      }
-      function touchCenter(t1, t2, rect) {
-        return {
-          x: (t1.clientX + t2.clientX) / 2 - rect.left,
-          y: (t1.clientY + t2.clientY) / 2 - rect.top
-        };
-      }
-      function cancelEngineGesture() {
-        if (gesture.type === "pending-entity" || gesture.type === "entity-dragging") {
-          engine.handlePointerUp();
-        }
-      }
-      const noMods = { shift: false, ctrl: false, alt: false, meta: false };
-      function onTouchStart(e) {
-        const rect = getRect();
-        const touches = e.touches;
-        if (touches.length >= 2) {
-          e.preventDefault();
-          cancelEngineGesture();
-          const dist = touchDist(touches[0], touches[1]);
-          const center = touchCenter(touches[0], touches[1], rect);
-          gesture = { type: "pinching", lastDist: dist, lastCx: center.x, lastCy: center.y };
-          return;
-        }
-        const touch = touches[0];
-        const x = touch.clientX - rect.left;
-        const y = touch.clientY - rect.top;
-        if (isInteractive(e.target)) return;
-        e.preventDefault();
-        const now = Date.now();
-        if (now - lastTapTime < DOUBLE_TAP_MS && Math.abs(x - lastTapX) < DOUBLE_TAP_DIST && Math.abs(y - lastTapY) < DOUBLE_TAP_DIST) {
-          lastTapTime = 0;
-          const directive = engine.handlePointerDown(x, y, 0, noMods);
-          try {
-            if (directive.action === "passthrough-track-drag") {
-              const selected = engine.getSelectedEntities();
-              if (selected.length === 1) {
-                engine.enterContainer(selected[0]);
-              }
-            } else {
-              const camera = engine.getCamera();
-              const target = camera.zoom < 0.9 ? 1 : camera.zoom < 1.8 ? 2 : 1;
-              engine.zoomAtPoint(x, y, (target - camera.zoom) / camera.zoom);
-            }
-          } finally {
-            engine.handlePointerUp();
-            engine.markDirty();
-          }
-          gesture = { type: "idle" };
-          return;
-        }
-        if (isOnWidget(e.target)) {
-          engine.handlePointerDown(x, y, 0, noMods);
-          gesture = { type: "pending-entity", x, y, time: now };
-        } else {
-          gesture = { type: "pending-pan", x, y, time: now };
-        }
-      }
-      function onTouchMove(e) {
-        e.preventDefault();
-        const rect = getRect();
-        const touches = e.touches;
-        if (gesture.type === "pinching" && touches.length >= 2) {
-          const dist = touchDist(touches[0], touches[1]);
-          const center = touchCenter(touches[0], touches[1], rect);
-          const scale = dist / gesture.lastDist;
-          engine.zoomAtPoint(center.x, center.y, scale - 1);
-          engine.panBy(center.x - gesture.lastCx, center.y - gesture.lastCy);
-          gesture.lastDist = dist;
-          gesture.lastCx = center.x;
-          gesture.lastCy = center.y;
-          return;
-        }
-        if (touches.length >= 2) {
-          cancelEngineGesture();
-          const dist = touchDist(touches[0], touches[1]);
-          const center = touchCenter(touches[0], touches[1], rect);
-          gesture = { type: "pinching", lastDist: dist, lastCx: center.x, lastCy: center.y };
-          return;
-        }
-        if (touches.length < 1) return;
-        const touch = touches[0];
-        const x = touch.clientX - rect.left;
-        const y = touch.clientY - rect.top;
-        if (gesture.type === "pending-pan") {
-          if (Math.abs(x - gesture.x) > DEAD_ZONE_TOUCH_PX || Math.abs(y - gesture.y) > DEAD_ZONE_TOUCH_PX) {
-            gesture = { type: "panning", lastX: x, lastY: y };
-          }
-          return;
-        }
-        if (gesture.type === "panning") {
-          engine.panBy(x - gesture.lastX, y - gesture.lastY);
-          gesture.lastX = x;
-          gesture.lastY = y;
-          return;
-        }
-        if (gesture.type === "pending-entity" || gesture.type === "entity-dragging") {
-          engine.handlePointerMove(x, y, noMods);
-          if (gesture.type === "pending-entity") {
-            if (Math.abs(x - gesture.x) > DEAD_ZONE_TOUCH_PX || Math.abs(y - gesture.y) > DEAD_ZONE_TOUCH_PX) {
-              gesture = { type: "entity-dragging" };
-            }
-          }
-        }
-      }
-      function onTouchEnd(e) {
-        e.preventDefault();
-        const remaining = e.touches.length;
-        const rect = getRect();
-        if (gesture.type === "pinching") {
-          if (remaining === 1) {
-            const t = e.touches[0];
-            gesture = {
-              type: "panning",
-              lastX: t.clientX - rect.left,
-              lastY: t.clientY - rect.top
-            };
-          } else if (remaining === 0) {
-            gesture = { type: "idle" };
-          }
-          return;
-        }
-        if (remaining > 0) return;
-        if (gesture.type === "pending-pan") {
-          engine.handlePointerDown(gesture.x, gesture.y, 0, noMods);
-          engine.handlePointerUp();
-          engine.markDirty();
-          lastTapTime = Date.now();
-          lastTapX = gesture.x;
-          lastTapY = gesture.y;
-        }
-        if (gesture.type === "pending-entity") {
-          engine.handlePointerUp();
-          engine.markDirty();
-          lastTapTime = Date.now();
-          lastTapX = gesture.x;
-          lastTapY = gesture.y;
-        }
-        if (gesture.type === "entity-dragging") {
-          engine.handlePointerUp();
-          engine.markDirty();
-        }
-        gesture = { type: "idle" };
-      }
-      function onTouchCancel(_e) {
-        gesture = { type: "idle" };
-        engine.handlePointerCancel();
-      }
-      container.addEventListener("touchstart", onTouchStart, { passive: false });
-      container.addEventListener("touchmove", onTouchMove, { passive: false });
-      container.addEventListener("touchend", onTouchEnd, { passive: false });
-      container.addEventListener("touchcancel", onTouchCancel, { passive: true });
-      return () => {
-        container.removeEventListener("touchstart", onTouchStart);
-        container.removeEventListener("touchmove", onTouchMove);
-        container.removeEventListener("touchend", onTouchEnd);
-        container.removeEventListener("touchcancel", onTouchCancel);
-      };
-    }, [engine]);
-    const onCanvasPointerDown = useCallback(
-      (e) => {
-        const target = e.target;
-        if (target?.closest("button, input, textarea, select, [contenteditable]")) return;
-        const rect = containerRef.current?.getBoundingClientRect();
-        if (!rect) return;
-        const directive = engine.handlePointerDown(
-          e.clientX - rect.left,
-          e.clientY - rect.top,
-          e.button,
-          {
-            shift: e.shiftKey,
-            ctrl: e.ctrlKey,
-            alt: e.altKey,
-            meta: e.metaKey
-          }
-        );
-        if (directive.action === "capture-resize" || directive.action === "passthrough-track-drag") {
-          containerRef.current?.setPointerCapture(e.pointerId);
-        }
-        if (directive.action === "capture-resize") e.preventDefault();
-      },
-      [engine]
-    );
-    const onCanvasPointerMove = useCallback(
-      (e) => {
-        const target = e.target;
-        if (target.closest?.("[data-widget-slot]") && target !== containerRef.current) {
-          return;
-        }
-        const rect = containerRef.current?.getBoundingClientRect();
-        if (!rect) return;
-        engine.handlePointerMove(e.clientX - rect.left, e.clientY - rect.top, {
-          shift: e.shiftKey,
-          ctrl: e.ctrlKey,
-          alt: e.altKey,
-          meta: e.metaKey
-        });
-      },
-      [engine]
-    );
-    const onCanvasPointerUp = useCallback(
-      (e) => {
-        if (containerRef.current?.hasPointerCapture(e.pointerId)) {
-          containerRef.current.releasePointerCapture(e.pointerId);
-        }
-        engine.handlePointerUp();
-      },
-      [engine]
-    );
-    useEffect(() => {
-      let rafId;
-      let running = true;
-      function loop() {
-        if (!running) return;
-        const didTick = engine.flushIfDirty();
-        if (didTick) {
-          const camera2 = engine.getCamera();
-          const changes = engine.getFrameChanges();
-          if (cameraLayerRef.current) {
-            cameraLayerRef.current.style.transform = `scale(${camera2.zoom}) translate(${-camera2.x}px, ${-camera2.y}px)`;
-          }
-          const cursor = engine.world.getResource(CursorResource).cursor;
-          if (containerRef.current && containerRef.current.style.cursor !== cursor) {
-            containerRef.current.style.cursor = cursor;
-          }
-          if (gridRendererRef.current) {
-            gridRendererRef.current.render(camera2.x, camera2.y, camera2.zoom);
-          }
-          if (selectionRendererRef.current && gridRendererRef.current) {
-            const selected = engine.getSelectedEntities();
-            const selBounds = [];
-            for (const id of selected) {
-              const wb = engine.get(id, WorldBounds);
-              if (wb)
-                selBounds.push({
-                  x: wb.worldX,
-                  y: wb.worldY,
-                  width: wb.worldWidth,
-                  height: wb.worldHeight
-                });
-            }
-            const hovId = engine.getHoveredEntity();
-            let hovBounds = null;
-            if (hovId !== null) {
-              const wb = engine.get(hovId, WorldBounds);
-              if (wb)
-                hovBounds = {
-                  x: wb.worldX,
-                  y: wb.worldY,
-                  width: wb.worldWidth,
-                  height: wb.worldHeight
-                };
-            }
-            selectionRendererRef.current.render(
-              gridRendererRef.current.getWebGLRenderer(),
-              camera2.x,
-              camera2.y,
-              camera2.zoom,
-              selBounds,
-              hovBounds,
-              engine.getSnapGuides(),
-              engine.getEqualSpacing()
-            );
-          }
-          for (const entityId of changes.positionsChanged) {
-            const el = slotRefs.current.get(entityId);
-            if (!el) continue;
-            const wb = engine.get(entityId, WorldBounds);
-            if (!wb) continue;
-            el.style.transform = `translate(${wb.worldX}px, ${wb.worldY}px)`;
-            el.style.width = `${wb.worldWidth}px`;
-            el.style.height = `${wb.worldHeight}px`;
-          }
-          if (changes.entered.length > 0 || changes.exited.length > 0) {
-            const visible2 = engine.getVisibleEntities();
-            setVisibleEntities(visible2.map((v) => v.entityId));
-          }
-          if (changes.selectionChanged && onSelectionChangeRef.current) {
-            onSelectionChangeRef.current(engine.getSelectedEntities());
-          }
-          if (changes.cameraChanged && onCameraChangeRef.current) {
-            onCameraChangeRef.current({ x: camera2.x, y: camera2.y, zoom: camera2.zoom });
-          }
-          if (changes.navigationChanged && onNavigationChangeRef.current) {
-            const navStack = engine.world.getResource(NavigationStackResource);
-            const depth = navStack.frames.length - 1;
-            const containerId = navStack.frames[navStack.frames.length - 1].containerId;
-            onNavigationChangeRef.current(depth, containerId);
-          }
-        }
-        rafId = requestAnimationFrame(loop);
-      }
-      engine.tick();
-      const visible = engine.getVisibleEntities();
-      setVisibleEntities(visible.map((v) => v.entityId));
-      const camera = engine.getCamera();
-      if (cameraLayerRef.current) {
-        cameraLayerRef.current.style.transform = `scale(${camera.zoom}) translate(${-camera.x}px, ${-camera.y}px)`;
-      }
-      if (gridRendererRef.current) {
-        gridRendererRef.current.render(camera.x, camera.y, camera.zoom);
-      }
-      for (const v of visible) {
-        const el = slotRefs.current.get(v.entityId);
-        if (!el) continue;
-        el.style.transform = `translate(${v.worldX}px, ${v.worldY}px)`;
-        el.style.width = `${v.worldWidth}px`;
-        el.style.height = `${v.worldHeight}px`;
-      }
-      rafId = requestAnimationFrame(loop);
-      return () => {
-        running = false;
-        cancelAnimationFrame(rafId);
-      };
-    }, [engine]);
-    useLayoutEffect(() => {
-      for (const entityId of visibleEntities) {
-        const el = slotRefs.current.get(entityId);
-        if (!el) continue;
-        const wb = engine.get(entityId, WorldBounds);
-        if (!wb) continue;
-        el.style.transform = `translate(${wb.worldX}px, ${wb.worldY}px)`;
-        el.style.width = `${wb.worldWidth}px`;
-        el.style.height = `${wb.worldHeight}px`;
-      }
-    }, [visibleEntities, engine]);
-    const { domEntities, webglEntities } = useMemo(() => {
-      const dom = [];
-      const webgl = [];
-      for (const id of visibleEntities) {
-        const w = engine.get(id, Widget);
-        if (w?.surface === "webgl") {
-          webgl.push(id);
-        } else {
-          dom.push(id);
-        }
-      }
-      return { domEntities: dom, webglEntities: webgl };
-    }, [visibleEntities, engine]);
-    const canvasContent = /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: containerRef,
-        className: `relative overflow-hidden ${className ?? ""}`,
-        style: {
-          ...style,
-          touchAction: "none",
-          backgroundColor: "var(--canvas-bg, #fafafa)"
-        },
-        onPointerDown: onCanvasPointerDown,
-        onPointerMove: onCanvasPointerMove,
-        onPointerUp: onCanvasPointerUp,
-        children: [
-          /* @__PURE__ */ jsx("canvas", { ref: webglCanvasRef, className: "absolute inset-0 pointer-events-none" }),
-          webglEntities.length > 0 && /* @__PURE__ */ jsx(WebGLWidgetBridge, { engine, entities: webglEntities }),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none" }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: cameraLayerRef,
-              className: "absolute left-0 top-0 origin-top-left will-change-transform",
-              children: [
-                domEntities.map((entityId) => /* @__PURE__ */ jsx(WidgetSlot, { entityId, slotRef: registerSlotRef }, entityId)),
-                webglEntities.map((entityId) => /* @__PURE__ */ jsx(SelectionOverlaySlot, { entityId, slotRef: registerSlotRef }, entityId))
-              ]
-            }
-          ),
-          children
-        ]
-      }
-    );
-    return /* @__PURE__ */ jsx(EngineProvider, { value: engine, children: /* @__PURE__ */ jsx(ContainerRefProvider, { value: containerRef, children: /* @__PURE__ */ jsx(WidgetProvider, { engine, children: canvasContent }) }) });
-  }
-);
-function WebGLWidgetBridge({ engine, entities }) {
-  const resolver = useWidgetResolver();
-  const resolve = useCallback(
-    (entityId) => {
-      if (!resolver) return null;
-      const w = engine.get(entityId, Widget);
-      return resolver(entityId, w?.type ?? "");
-    },
-    [resolver, engine]
-  );
-  if (!resolver) return null;
-  return /* @__PURE__ */ jsx(WebGLWidgetLayer, { engine, entities, resolve });
-}
-function useWidgetData(entityId) {
-  const comp = useComponent(entityId, WidgetData);
-  return comp?.data ?? {};
-}
-function useBreakpoint(entityId) {
-  const comp = useComponent(entityId, WidgetBreakpoint);
-  return comp?.current ?? "normal";
-}
-function useChildren(entityId) {
-  const comp = useComponent(entityId, Children);
-  return comp?.ids ?? [];
-}
-function useIsSelected(entityId) {
-  return useTag(entityId, Selected);
-}
-function useUpdateWidget(entityId) {
-  const engine = useLayoutEngine();
-  return useCallback(
-    (patch) => {
-      const existing = engine.get(entityId, WidgetData);
-      if (existing) {
-        engine.set(entityId, WidgetData, {
-          data: { ...existing.data, ...patch }
-        });
-      }
-    },
-    [engine, entityId]
-  );
-}
-
-export { InfiniteCanvas, WidgetProvider, useBreakpoint, useChildren, useIsSelected, useUpdateWidget, useWidgetData };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map