@number10/phaserjsx 0.2.0 → 0.3.1

package/dist/{TransformOriginView-BDM6GE2F.cjs → TransformOriginView-KcTgaYRi.cjs}

@@ -6644,10 +6644,6 @@ function resolveCalcOperand(operand, parentSize, viewportSize) {
     }
     if (operand.type === "percent") {
       if (parentSize === void 0) {
-        DebugLogger.warn(
-          "Size",
-          "Cannot resolve percentage in calc() without parent size. Using 0."
-        );
         return 0;
       }
       return parentSize * operand.value / 100;
@@ -7055,6 +7051,9 @@ class GestureManager {
       this.activePointerDown = null;
     }
     this.hoveredContainers.delete(container);
+    for (const hitContainers of this.activeContainersForMove.values()) {
+      hitContainers.delete(container);
+    }
   }
   /**
    * Check if a container is registered
@@ -11250,9 +11249,9 @@ class MountRegistry {
    * @param rootNode - Root game object
    * @returns Registry ID for this mount
    */
-  register(parent, type, props, rootNode) {
+  register(parent, type, props, rootNode, vnode) {
     const id = this.nextId++;
-    this.entries.set(id, { id, parent, type, props, rootNode });
+    this.entries.set(id, { id, parent, type, props, rootNode, vnode });
     DebugLogger.log("vdom", `Registered mount ${id}`);
     return id;
   }
@@ -11267,6 +11266,14 @@ class MountRegistry {
       this.entries.delete(id);
     }
   }
+  /**
+   * Get a specific mount entry by registry ID
+   * @param id - Registry ID
+   * @returns Mount entry or undefined if not found
+   */
+  getEntry(id) {
+    return this.entries.get(id);
+  }
   /**
    * Get all active mount entries
    * @returns Array of mount entries
@@ -11344,7 +11351,9 @@ function remountAll() {
         rootNode.__mountRootId = generateMountRootId();
       }
       entry.rootNode = rootNode;
+      entry.vnode = vnode;
       rootNode.__registryId = entry.id;
+      rootNode.__rootVNode = vnode;
       console.log("[REMOUNT] Successfully remounted entry", entry.id);
     } catch (error) {
       console.error("[REMOUNT] Failed to remount entry", entry.id, error);
@@ -12024,9 +12033,36 @@ function mountJSX(parentOrScene, type, props = { width: 0, height: 0 }) {
   if (rootNode instanceof Phaser$1.GameObjects.Container) {
     rootNode.__mountRootId = generateMountRootId();
   }
-  const registryId = mountRegistry.register(parentOrScene, type, props, rootNode);
+  rootNode.__rootVNode = vnode;
+  const registryId = mountRegistry.register(parentOrScene, type, props, rootNode, vnode);
   rootNode.__registryId = registryId;
-  return rootNode;
+  const handle = rootNode;
+  handle.unmount = () => unmountJSX(handle);
+  return handle;
+}
+function unmountJSX(target) {
+  const scene = target instanceof Phaser$1.Scene ? target : target.scene;
+  const targetWithVNode = target;
+  const sceneWithVNode = scene;
+  const rootVNode = targetWithVNode.__rootVNode ?? sceneWithVNode?.__rootVNode;
+  if (rootVNode) {
+    unmount(rootVNode);
+    if (targetWithVNode.__rootVNode === rootVNode) {
+      delete targetWithVNode.__rootVNode;
+    }
+    if (sceneWithVNode?.__rootVNode === rootVNode) {
+      delete sceneWithVNode.__rootVNode;
+    }
+    return;
+  }
+  if (targetWithVNode.__registryId !== void 0) {
+    const entry = mountRegistry.getEntry(targetWithVNode.__registryId);
+    if (entry?.vnode) {
+      unmount(entry.vnode);
+      return;
+    }
+  }
+  DebugLogger.log("vdom", "unmountJSX called but no root VNode found on target");
 }
 const vdom = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -12035,7 +12071,8 @@ const vdom = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   mountJSX,
   patchVNode,
   remountAll,
-  unmount
+  unmount,
+  unmountJSX
 }, Symbol.toStringTag, { value: "Module" }));
 function getCurrent() {
   return _currentCtx;
@@ -13998,6 +14035,8 @@ function Portal(props) {
   const depth = props.depth ?? 1e3;
   const scene = useScene();
   const blockEvents = props.blockEvents ?? true;
+  const mountedNodesRef = useRef([]);
+  const previousChildrenRef = useRef([]);
   useEffect(() => {
     const portalContainer = portalRegistry.register(
       portalId,
@@ -14013,14 +14052,18 @@ function Portal(props) {
       blockerContainer.setDepth(-1);
     }
     const children = Array.isArray(props.children) ? props.children : [props.children];
+    const mountedNodes = [];
     for (const child of children) {
       if (child) {
         const mountedNode = mount(portalContainer, child);
         if (mountedNode) {
           portalContainer.add(mountedNode);
+          mountedNodes.push(mountedNode);
         }
       }
     }
+    mountedNodesRef.current = mountedNodes;
+    previousChildrenRef.current = children;
     const gestureManager = getGestureManager(scene);
     if (blockEvents && blockerContainer) {
       const blocker = blockerContainer;
@@ -14067,7 +14110,31 @@ function Portal(props) {
       }
       portalRegistry.unregister(portalId);
     };
-  }, [portalId, depth, scene, props.children, blockEvents]);
+  }, [portalId, depth, scene, blockEvents]);
+  useEffect(() => {
+    const portal = portalRegistry.get(portalId);
+    if (!portal) return;
+    const portalContainer = portal.container;
+    const newChildren = Array.isArray(props.children) ? props.children : [props.children];
+    const oldChildren = previousChildrenRef.current;
+    const maxLen = Math.max(oldChildren.length, newChildren.length);
+    for (let i = 0; i < maxLen; i++) {
+      const oldChild = oldChildren[i];
+      const newChild = newChildren[i];
+      if (oldChild && newChild) {
+        patchVNode(portalContainer, oldChild, newChild);
+      } else if (!oldChild && newChild) {
+        const mountedNode = mount(portalContainer, newChild);
+        if (mountedNode) {
+          portalContainer.add(mountedNode);
+          mountedNodesRef.current.push(mountedNode);
+        }
+      } else if (oldChild && !newChild) {
+        unmount(oldChild);
+      }
+    }
+    previousChildrenRef.current = newChildren;
+  }, [props.children, portalId]);
   return null;
 }
 function Modal(props) {
@@ -14154,19 +14221,7 @@ function Modal(props) {
       view.setVisible(false);
       backdrop.setVisible(false);
     }
-  }, [
-    backdropAnimation,
-    closeDurationMs,
-    isVisible,
-    openDurationMs,
-    props.onClosed,
-    props.onOpen,
-    props.onRequestClose,
-    props.show,
-    stopBackdropEffects,
-    stopViewEffects,
-    viewAnimation
-  ]);
+  }, [props.show]);
   useEffect(() => {
     if (!closeOnEscape || !props.show) return;
     const handleKeyDown = (e) => {
@@ -15472,11 +15527,22 @@ function calculateSliderSize(size) {
   return { border, outer, dimension };
 }
 function ScrollSlider(props) {
-  const { direction, scrollPosition, viewportSize, contentSize, onScroll } = props;
+  const {
+    direction,
+    scrollPosition,
+    viewportSize,
+    contentSize,
+    onScroll,
+    momentum = true,
+    onMomentumEnd
+  } = props;
   const { props: themed } = getThemedProps("ScrollSlider", void 0, {});
   const sliderRef = useRef(null);
   const isDraggingRef = useRef(false);
   const trackContainerRef = useRef(null);
+  const velocityRef = useRef(0);
+  const lastTimeRef = useRef(0);
+  const tweenRef = useRef(null);
   const isVertical = direction === "vertical";
   const { border, outer, dimension } = calculateSliderSize(props.size);
   const containerWithLayout = trackContainerRef.current;
@@ -15492,18 +15558,60 @@ function ScrollSlider(props) {
     data.stopPropagation();
     if (data.state === "start") {
       isDraggingRef.current = true;
+      velocityRef.current = 0;
+      lastTimeRef.current = Date.now();
+      if (tweenRef.current) {
+        tweenRef.current.stop();
+        tweenRef.current = null;
+      }
       return;
     }
     if (data.state === "end") {
       isDraggingRef.current = false;
+      if (momentum && Math.abs(velocityRef.current) > 0.1) {
+        startMomentum(scrollPosition);
+      } else if (onMomentumEnd) {
+        onMomentumEnd();
+      }
       return;
     }
     if (!isDraggingRef.current) return;
     const delta = isVertical ? data.dy ?? 0 : data.dx ?? 0;
+    const now = Date.now();
+    const deltaTime = now - lastTimeRef.current;
+    if (deltaTime > 0) {
+      velocityRef.current = delta / deltaTime * 1e3;
+      lastTimeRef.current = now;
+    }
     const newThumbPos = Math.max(0, Math.min(thumbRange, thumbPosition + delta));
     const newScrollPos = thumbRange > 0 ? newThumbPos / thumbRange * maxScroll : 0;
     onScroll(newScrollPos);
   };
+  const startMomentum = (startPos) => {
+    if (!sliderRef.current?.scene) return;
+    const scene = sliderRef.current.scene;
+    const duration = Math.min(1e3, Math.max(200, Math.abs(velocityRef.current)));
+    const targetScrollPos = Math.max(
+      0,
+      Math.min(maxScroll, startPos + velocityRef.current * (duration / 1e3))
+    );
+    tweenRef.current = scene.tweens.add({
+      targets: { pos: startPos },
+      pos: targetScrollPos,
+      duration,
+      ease: "Quad.easeOut",
+      onUpdate: (tween) => {
+        const target = tween.targets[0];
+        onScroll(target.pos);
+      },
+      onComplete: () => {
+        tweenRef.current = null;
+        if (onMomentumEnd) {
+          onMomentumEnd();
+        }
+      }
+    });
+  };
   const handleBackgroundTouch = (data) => {
     data.stopPropagation();
     const localPos = isVertical ? data.localY ?? 0 : data.localX ?? 0;
@@ -15569,13 +15677,23 @@ function ScrollView(props) {
     showVerticalSlider = "auto",
     showHorizontalSlider = "auto",
     scroll: initialScroll,
-    onScrollInfoChange
+    onScrollInfoChange,
+    snap = false,
+    snapAlignment = "start",
+    snapThreshold = 20,
+    momentum = true
   } = props;
   const [scroll, setScroll] = useState(initialScroll ?? { dx: 0, dy: 0 });
+  const scrollRef = useRef(scroll);
   const contentRef = useRef(null);
   const viewportRef = useRef(null);
   const [contentHeight, setContentHeight] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
+  const [velocity, setVelocity] = useState({ vx: 0, vy: 0 });
+  const [lastTime, setLastTime] = useState(0);
+  const tweenRef = useRef(null);
+  const wheelSnapTimeoutRef = useRef(null);
+  const WHEEL_SNAP_DELAY = 200;
   const { outer: sliderSize } = calculateSliderSize(props.sliderSize);
   const viewportHeight = viewportRef.current?.height ?? 0;
   const viewportWidth = viewportRef.current?.width ?? 0;
@@ -15588,9 +15706,24 @@ function ScrollView(props) {
   const showHorizontalSliderActual = showHorizontalSlider === true || needsHorizontalScroll && showHorizontalSlider === "auto";
   const maxScrollY = Math.max(0, effectiveContentHeight - viewportHeight);
   const maxScrollX = Math.max(0, effectiveContentWidth - viewportWidth);
+  const updateScroll = (value) => {
+    setScroll((prev) => {
+      const next = typeof value === "function" ? value(prev) : value;
+      scrollRef.current = next;
+      return next;
+    });
+  };
+  const stopActiveTween = () => {
+    if (tweenRef.current) {
+      tweenRef.current.stop();
+      tweenRef.current = null;
+    }
+  };
+  const resolvedSnapThreshold = typeof snap === "object" && "positions" in snap ? snap.threshold ?? snapThreshold : snapThreshold;
+  const effectiveSnapThreshold = resolvedSnapThreshold === void 0 || resolvedSnapThreshold < 0 ? Infinity : resolvedSnapThreshold;
   useEffect(() => {
     if (initialScroll) {
-      setScroll(initialScroll);
+      updateScroll(initialScroll);
     }
   }, [initialScroll]);
   useEffect(() => {
@@ -15645,27 +15778,168 @@ function ScrollView(props) {
     const maxScrollX2 = Math.max(0, contentWidth2 - viewportWidth2);
     const newScrollY = Math.max(0, Math.min(maxScrollY2, scroll.dy - deltaY));
     const newScrollX = Math.max(0, Math.min(maxScrollX2, scroll.dx - deltaX));
-    setScroll({ dx: newScrollX, dy: newScrollY });
+    updateScroll({ dx: newScrollX, dy: newScrollY });
+  };
+  const startMomentum = () => {
+    if (!contentRef.current?.scene) return;
+    const scene = contentRef.current.scene;
+    const duration = Math.min(1e3, Math.max(200, Math.abs(velocity.vx) + Math.abs(velocity.vy)));
+    const currentScroll = scrollRef.current;
+    const baseTargetDx = Math.max(
+      0,
+      Math.min(maxScrollX, currentScroll.dx - velocity.vx * (duration / 1e3))
+    );
+    const baseTargetDy = Math.max(
+      0,
+      Math.min(maxScrollY, currentScroll.dy - velocity.vy * (duration / 1e3))
+    );
+    const snappedTarget = snap ? calculateSnapDestination(baseTargetDx, baseTargetDy) : null;
+    stopActiveTween();
+    tweenRef.current = scene.tweens.add({
+      targets: { dx: currentScroll.dx, dy: currentScroll.dy },
+      dx: snappedTarget?.dx ?? baseTargetDx,
+      dy: snappedTarget?.dy ?? baseTargetDy,
+      duration,
+      ease: "Quad.easeOut",
+      onUpdate: (tween) => {
+        const target = tween.targets[0];
+        updateScroll({ dx: target.dx, dy: target.dy });
+      },
+      onComplete: () => {
+        tweenRef.current = null;
+      }
+    });
+  };
+  const getSnapTargets = () => {
+    const viewportHeightCurrent = viewportRef.current?.height ?? viewportHeight;
+    const viewportWidthCurrent = viewportRef.current?.width ?? viewportWidth;
+    if (typeof snap === "object" && "positions" in snap) {
+      const sorted = [...snap.positions].sort((a, b) => a - b);
+      const inferredSizeY = sorted.length > 1 ? Math.max(0, (sorted[1] ?? 0) - (sorted[0] ?? 0)) : viewportHeightCurrent || 0;
+      const inferredSizeX = sorted.length > 1 ? Math.max(0, (sorted[1] ?? 0) - (sorted[0] ?? 0)) : viewportWidthCurrent || 0;
+      const targetsX = sorted.map((position, index) => {
+        const next = sorted[index + 1];
+        const size = next !== void 0 ? Math.max(0, next - position) : inferredSizeX > 0 ? inferredSizeX : viewportWidthCurrent || 0;
+        return { position, size };
+      });
+      const targetsY = sorted.map((position, index) => {
+        const next = sorted[index + 1];
+        const size = next !== void 0 ? Math.max(0, next - position) : inferredSizeY > 0 ? inferredSizeY : viewportHeightCurrent || 0;
+        return { position, size };
+      });
+      return { x: targetsX, y: targetsY };
+    }
+    return { x: [], y: [] };
+  };
+  const findNearestSnap = (current, targets, viewportSize, maxScroll) => {
+    if (targets.length === 0) return current;
+    let nearest = current;
+    let minDistance = Infinity;
+    for (const { position, size } of targets) {
+      let adjustedPos = position;
+      if (snapAlignment === "center") {
+        adjustedPos = position + size / 2 - viewportSize / 2;
+      } else if (snapAlignment === "end") {
+        adjustedPos = position + size - viewportSize;
+      }
+      adjustedPos = Math.max(0, Math.min(maxScroll, adjustedPos));
+      const distance = Math.abs(current - adjustedPos);
+      if (distance < minDistance && distance <= effectiveSnapThreshold) {
+        minDistance = distance;
+        nearest = adjustedPos;
+      } else if (distance < minDistance && effectiveSnapThreshold === Infinity) {
+        minDistance = distance;
+        nearest = adjustedPos;
+      }
+    }
+    return nearest;
+  };
+  const calculateSnapDestination = (baseDx, baseDy) => {
+    const { x: xTargets, y: yTargets } = getSnapTargets();
+    const viewportHeightLocal = viewportRef.current?.height ?? 0;
+    const viewportWidthLocal = viewportRef.current?.width ?? 0;
+    const targetDx = findNearestSnap(baseDx, xTargets, viewportWidthLocal, maxScrollX);
+    const targetDy = findNearestSnap(baseDy, yTargets, viewportHeightLocal, maxScrollY);
+    return { dx: targetDx, dy: targetDy };
+  };
+  const applySnap = () => {
+    if (!contentRef.current?.scene || !snap) return;
+    const currentScroll = scrollRef.current;
+    const { dx: targetDx, dy: targetDy } = calculateSnapDestination(
+      currentScroll.dx,
+      currentScroll.dy
+    );
+    if (targetDx === currentScroll.dx && targetDy === currentScroll.dy) return;
+    const scene = contentRef.current.scene;
+    stopActiveTween();
+    tweenRef.current = scene.tweens.add({
+      targets: { dx: currentScroll.dx, dy: currentScroll.dy },
+      dx: targetDx,
+      dy: targetDy,
+      duration: 250,
+      ease: "Quad.easeOut",
+      onUpdate: (tween) => {
+        const target = tween.targets[0];
+        updateScroll({ dx: target.dx, dy: target.dy });
+      },
+      onComplete: () => {
+        tweenRef.current = null;
+      }
+    });
   };
   const handleVerticalScroll = (scrollPos) => {
     const clampedScrollPos = Math.max(0, Math.min(maxScrollY, scrollPos));
-    setScroll((prev) => ({ ...prev, dy: clampedScrollPos }));
+    updateScroll((prev) => ({ ...prev, dy: clampedScrollPos }));
   };
   const handleHorizontalScroll = (scrollPos) => {
     const clampedScrollPos = Math.max(0, Math.min(maxScrollX, scrollPos));
-    setScroll((prev) => ({ ...prev, dx: clampedScrollPos }));
+    updateScroll((prev) => ({ ...prev, dx: clampedScrollPos }));
+  };
+  const handleSliderMomentumEnd = () => {
+    if (snap) {
+      applySnap();
+    }
   };
   const handleTouchMove = (data) => {
-    if (data.state === "end") return;
+    if (data.state === "end") {
+      if (momentum && (Math.abs(velocity.vx) > 0.1 || Math.abs(velocity.vy) > 0.1)) {
+        startMomentum();
+      } else if (snap) {
+        applySnap();
+      }
+      return;
+    }
+    if (data.state === "start") {
+      stopActiveTween();
+      setVelocity({ vx: 0, vy: 0 });
+      setLastTime(Date.now());
+      data.stopPropagation();
+      return;
+    }
     data.stopPropagation();
     const deltaX = data.dx ?? 0;
     const deltaY = data.dy ?? 0;
+    const now = Date.now();
+    const deltaTime = now - lastTime;
+    if (deltaTime > 0) {
+      const newVx = deltaX / deltaTime * 1e3;
+      const newVy = deltaY / deltaTime * 1e3;
+      setVelocity({ vx: newVx, vy: newVy });
+      setLastTime(now);
+    }
     calc(deltaX, deltaY);
   };
   const handleWheel = (data) => {
     data.stopPropagation();
     data.preventDefault();
+    stopActiveTween();
     calc(-data.deltaX, -data.deltaY);
+    if (snap) {
+      if (wheelSnapTimeoutRef.current) {
+        clearTimeout(wheelSnapTimeoutRef.current);
+      }
+      wheelSnapTimeoutRef.current = setTimeout(() => applySnap(), WHEEL_SNAP_DELAY);
+    }
   };
   const redraw = useRedraw();
   const [visible, setVisible] = useState(false);
@@ -15675,6 +15949,10 @@ function ScrollView(props) {
     return () => {
       clearTimeout(timer1);
       clearTimeout(timer2);
+      if (wheelSnapTimeoutRef.current) {
+        clearTimeout(wheelSnapTimeoutRef.current);
+      }
+      stopActiveTween();
     };
   }, [showVerticalSliderActual, showHorizontalSliderActual]);
   return /* @__PURE__ */ jsxRuntime.jsx(View, { visible, children: /* @__PURE__ */ jsxRuntime.jsxs(View, { direction: "row", width: "100%", height: "100%", gap: 0, padding: 0, children: [
@@ -15731,7 +16009,9 @@ function ScrollView(props) {
           scrollPosition: scroll.dx,
           viewportSize: viewportWidth,
           contentSize: contentWidth,
-          onScroll: handleHorizontalScroll
+          onScroll: handleHorizontalScroll,
+          momentum,
+          onMomentumEnd: handleSliderMomentumEnd
         }
       ) })
     ] }),
@@ -15744,7 +16024,9 @@ function ScrollView(props) {
           scrollPosition: scroll.dy,
           viewportSize: viewportHeight,
           contentSize: effectiveContentHeight,
-          onScroll: handleVerticalScroll
+          onScroll: handleVerticalScroll,
+          momentum,
+          onMomentumEnd: handleSliderMomentumEnd
         }
       ) }),
       showHorizontalSliderActual && // Placeholder corner for potential icon - matches slider dimensions
@@ -17198,6 +17480,7 @@ exports.themeRegistry = themeRegistry;
 exports.tileSpriteCreator = tileSpriteCreator;
 exports.tileSpritePatcher = tileSpritePatcher;
 exports.unmount = unmount;
+exports.unmountJSX = unmountJSX;
 exports.unwrapSignal = unwrapSignal;
 exports.useCallback = useCallback;
 exports.useEffect = useEffect;
@@ -17219,4 +17502,4 @@ exports.viewCreator = viewCreator;
 exports.viewPatcher = viewPatcher;
 exports.viewportRegistry = viewportRegistry;
 exports.withHooks = withHooks;
-//# sourceMappingURL=TransformOriginView-BDM6GE2F.cjs.map
+//# sourceMappingURL=TransformOriginView-KcTgaYRi.cjs.map