@arronqzy/react-view 1.0.3 → 1.0.7

package/src/panel/components/MoveableLayer.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 import { createPortal } from "react-dom";
 import Moveable from "react-moveable";
 
@@ -41,8 +42,8 @@ export type MoveableLayerProps = {
   ) => void;
   /** 画布平移/缩放等视口变化时递增或变化，用于触发控制框重算 */
   refreshToken?: number | string;
-  /** InfiniteViewer 虚拟滚动位置（无原生 scroll 事件） */
-  viewportScroll?: { left: number; top: number };
+  /** 平移后立即同步控制框（由 PanelCanvas 写入，绕过 React scroll 节流） */
+  viewportSyncRef?: React.MutableRefObject<(() => void) | null>;
 };
 
 function getGridSlotLayout(grid: PanelElement) {
@@ -155,6 +156,17 @@ function isDescendantGrid(
   return false;
 }
 
+function readLiveCanvasScale(
+  canvasContainer: HTMLElement | null,
+  fallback: number
+): number {
+  if (!canvasContainer) return fallback;
+  const raw = canvasContainer.dataset.canvasScale;
+  if (!raw) return fallback;
+  const parsed = Number(raw);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+
 export function MoveableLayer({
   zoomX,
   zoomY,
@@ -164,8 +176,10 @@ export function MoveableLayer({
   elementsById,
   updateElement,
   refreshToken,
-  viewportScroll,
+  viewportSyncRef,
 }: MoveableLayerProps) {
+  const { t } = useI18n();
+
   const moveableRef = useRef<any>(null);
   const targets = useMemo(() => {
     const validTargets = selectedTargets.filter(
@@ -210,15 +224,13 @@ export function MoveableLayer({
     [getId, movableTargets]
   );
   const moveableRenderKey = useMemo(() => movableIds.join(","), [movableIds]);
-  const canvasScale = useMemo(
+  const propCanvasScale = useMemo(
     () => uniformViewportZoom({ x: zoomX, y: zoomY }),
     [zoomX, zoomY]
   );
-  /** 控制框在 scale 画布内渲染，用倒数保持屏幕像素尺寸 */
-  const moveableControlZoom = useMemo(
-    () => 1 / Math.max(0.0001, canvasScale),
-    [canvasScale]
-  );
+  const canvasScale = readLiveCanvasScale(canvasContainer, propCanvasScale);
+  /** 在 scale 画布内渲染，用倒数补偿，保证锚点/边线屏幕像素恒定 */
+  const moveableControlZoom = 1 / Math.max(0.0001, canvasScale);
   const pointerRoot = dragContainer ?? canvasContainer;
   const resolveSingleEventId = useCallback(
     (target: HTMLElement | undefined | null) => {
@@ -270,9 +282,10 @@ export function MoveableLayer({
   const [lockBadgeScreen, setLockBadgeScreen] = useState<{ x: number; y: number } | null>(
     null
   );
-  useEffect(() => {
+  const syncRafRef = useRef<number | null>(null);
+  const syncLockBadge = useCallback(() => {
     const id = lockedSelected[0];
-    if (!id || !canvasContainer) {
+    if (!id || !pointerRoot) {
       setLockBadgeScreen(null);
       return;
     }
@@ -283,33 +296,37 @@ export function MoveableLayer({
       setLockBadgeScreen(null);
       return;
     }
-    const sync = () => {
-      const rect = target.getBoundingClientRect();
-      const rootRect = canvasContainer.getBoundingClientRect();
-      setLockBadgeScreen({
-        x: rect.left - rootRect.left,
-        y: rect.top - rootRect.top,
-      });
-    };
-    sync();
-    const ro = new ResizeObserver(sync);
-    ro.observe(target);
-    ro.observe(canvasContainer);
-    canvasContainer.addEventListener("scroll", sync, { passive: true });
+    const rect = target.getBoundingClientRect();
+    const rootRect = pointerRoot.getBoundingClientRect();
+    setLockBadgeScreen({
+      x: rect.left - rootRect.left,
+      y: rect.top - rootRect.top,
+    });
+  }, [lockedSelected, pointerRoot, selectedTargets]);
+
+  const scheduleViewportSync = useCallback(() => {
+    if (syncRafRef.current != null) return;
+    syncRafRef.current = requestAnimationFrame(() => {
+      syncRafRef.current = null;
+      moveableRef.current?.updateRect?.();
+      syncLockBadge();
+    });
+  }, [syncLockBadge]);
+
+  useEffect(() => {
+    if (!viewportSyncRef) return;
+    viewportSyncRef.current = scheduleViewportSync;
     return () => {
-      ro.disconnect();
-      canvasContainer.removeEventListener("scroll", sync);
+      viewportSyncRef.current = null;
     };
-  }, [canvasContainer, lockedSelected, selectedTargets, viewportScroll, zoomX, zoomY]);
+  }, [scheduleViewportSync, viewportSyncRef]);
 
-  const updateRectNextFrame = useCallback(() => {
-    // InfiniteViewer 用 transform 平移，需等视口与节点布局提交后再 updateRect
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        moveableRef.current?.updateRect?.();
-      });
-    });
-  }, []);
+  useLayoutEffect(() => {
+    moveableRef.current?.updateRect?.();
+    syncLockBadge();
+  }, [canvasScale, syncLockBadge]);
+
+  const updateRectNextFrame = scheduleViewportSync;
   const getGridDirectChildren = useCallback(
     (gridId: string) => {
       const result: PanelElement[] = [];
@@ -421,22 +438,16 @@ export function MoveableLayer({
   useEffect(() => {
     if (!targets) return;
     updateRectNextFrame();
-  }, [targets, updateRectNextFrame]);
-
-  useEffect(() => {
-    if (!targets) return;
-    updateRectNextFrame();
-  }, [refreshToken, targets, updateRectNextFrame]);
+  }, [moveableRenderKey, refreshToken, targets, updateRectNextFrame]);
 
-  useEffect(() => {
-    if (!targets) return;
-    updateRectNextFrame();
-  }, [targets, updateRectNextFrame, viewportScroll?.left, viewportScroll?.top]);
-
-  useEffect(() => {
-    if (!targets) return;
-    updateRectNextFrame();
-  }, [targets, updateRectNextFrame, zoomX, zoomY]);
+  useEffect(
+    () => () => {
+      if (syncRafRef.current != null) {
+        cancelAnimationFrame(syncRafRef.current);
+      }
+    },
+    []
+  );
 
   if (!canvasContainer) return null;
 
@@ -445,19 +456,22 @@ export function MoveableLayer({
       <div
         className="pointer-events-none absolute z-[80] inline-flex select-none items-center gap-1 rounded border border-border bg-background/95 px-1.5 py-0.5 text-[11px] text-foreground shadow-sm"
         style={{ left: lockBadgeScreen.x + 6, top: lockBadgeScreen.y - 22 }}
-        title="节点已锁定"
-      >
+        title={t("panel.config.nodeLockedTitle")}>
         <LockGlyph />
-        <span>已锁定</span>
+        <span>{t("panel.config.nodeLockedBadge")}</span>
       </div>
     ) : null;
 
   if (!targets) {
-    return lockBadgeOnly ? createPortal(lockBadgeOnly, canvasContainer) : null;
+    return lockBadgeOnly && pointerRoot
+      ? createPortal(lockBadgeOnly, pointerRoot)
+      : null;
   }
 
   if (!movableTargets) {
-    return lockBadgeOnly ? createPortal(lockBadgeOnly, canvasContainer) : null;
+    return lockBadgeOnly && pointerRoot
+      ? createPortal(lockBadgeOnly, pointerRoot)
+      : null;
   }
 
   const layer = (
@@ -469,9 +483,10 @@ export function MoveableLayer({
       target={movableTargets as unknown as HTMLElement[]}
       rootContainer={canvasContainer}
       container={canvasContainer}
-      dragContainer={pointerRoot ?? canvasContainer}
+      dragContainer={pointerRoot}
       className="rv-moveable-layer"
       zoom={moveableControlZoom}
+      hideChildMoveableDefaultLines={false}
       // 允许在控制框内部区域拖动（不必必须点到某个节点本体）
       dragArea
       draggable
@@ -789,15 +804,14 @@ export function MoveableLayer({
         <div
           className="pointer-events-none absolute z-[80] inline-flex select-none items-center gap-1 rounded border border-border bg-background/95 px-1.5 py-0.5 text-[11px] text-foreground shadow-sm"
           style={{ left: lockBadgeScreen.x + 6, top: lockBadgeScreen.y - 22 }}
-          title="部分节点已锁定，已自动排除"
-        >
+          title={t("panel.config.lockedExcludedTitle")}>
           <LockGlyph />
-          <span>锁定节点已排除</span>
+          <span>{t("panel.config.lockedExcludedBadge")}</span>
         </div>
       ) : null}
     </>
   );
 
-  return createPortal(layer, canvasContainer);
+  return canvasContainer ? createPortal(layer, canvasContainer) : null;
 }
 

package/src/panel/components/PanelCanvas.tsx

@@ -1,6 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import InfiniteViewer from "react-infinite-viewer";
-import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 
 import {
   clampViewportZoom,
@@ -23,6 +22,8 @@ export type PanelCanvasProps = {
   onDropMaterial?: (payload: { materialId: string; x: number; y: number }) => void;
   /** 渲染在 InfiniteViewer 内、画布 scale 层之外（如 Moveable 控制框） */
   viewportOverlay?: React.ReactNode;
+  /** 平移等视口变换后同步 Moveable 控制框（绕过 React scroll 节流） */
+  viewportSyncRef?: React.MutableRefObject<(() => void) | null>;
 };
 
 export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
@@ -40,12 +41,12 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
       onCanvasContextMenuCapture,
       onDropMaterial,
       viewportOverlay,
+      viewportSyncRef,
     },
     scrollRef
   ) => {
   const viewportRef = useRef<HTMLDivElement | null>(null);
   const viewerRef = useRef<any>(null);
-  const transformRef = useRef<any>(null);
   const canvasElRef = useRef<HTMLDivElement | null>(null);
   const syncingZoomRef = useRef(false);
   const didAutoCenterRef = useRef(false);
@@ -76,6 +77,14 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
     height: number;
   } | null>(null);
 
+  const applyCanvasTransform = useCallback((scale: number) => {
+    const el = canvasElRef.current;
+    if (!el) return;
+    el.style.transform = `scale(${scale})`;
+    el.style.transformOrigin = "0 0";
+    el.dataset.canvasScale = String(scale);
+  }, []);
+
   const commitScroll = useCallback(
     (left: number, top: number) => {
       const next = { left, top };
@@ -85,6 +94,10 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
     [onScrollChange]
   );
 
+  const notifyViewportSync = useCallback(() => {
+    viewportSyncRef?.current?.();
+  }, [viewportSyncRef]);
+
   useEffect(() => {
     zoomRef.current = zoom;
   }, [zoom]);
@@ -155,8 +168,6 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
     if (!el) return;
 
     const onWheelZoom = (e: WheelEvent) => {
-      const api = transformRef.current;
-      if (!api) return;
       const viewer = viewerRef.current as any;
       if (!viewer) return;
       const target = e.target as HTMLElement | null;
@@ -189,10 +200,12 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
       const worldY = (pointerY + currentScrollTop) / Math.max(0.0001, zy);
       const nextScrollLeft = worldX * nextZoom.x - pointerX;
       const nextScrollTop = worldY * nextZoom.y - pointerY;
+      const nextScale = uniformViewportZoom(nextZoom);
 
       syncingZoomRef.current = true;
+      zoomRef.current = nextZoom;
+      applyCanvasTransform(nextScale);
       viewer.scrollTo(nextScrollLeft, nextScrollTop);
-      commitScroll(nextScrollLeft, nextScrollTop);
       const { width: vw, height: vh } = viewportSizeRef.current;
       resizeLayoutAnchorRef.current = {
         viewportWidth: vw,
@@ -208,25 +221,22 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
         zoomX: nextZoom.x,
         zoomY: nextZoom.y,
       };
-      zoomRef.current = nextZoom;
       onZoomChange({
         x: Number(nextZoom.x.toFixed(4)),
         y: Number(nextZoom.y.toFixed(4)),
       });
-      requestAnimationFrame(() => {
-        syncingZoomRef.current = false;
-      });
     };
 
     el.addEventListener("wheel", onWheelZoom, { passive: false, capture: true });
     return () => {
       el.removeEventListener("wheel", onWheelZoom, true);
     };
-  }, [commitScroll, onZoomChange, viewport.width, viewport.height]);
+  }, [applyCanvasTransform, onZoomChange, viewport.width, viewport.height]);
 
   const applyViewportResizeZoom = useCallback(
     (w: number, h: number) => {
       if (w < 8 || h < 8) return;
+      if (syncingZoomRef.current) return;
 
       const viewer = viewerRef.current as {
         scrollTo?: (x: number, y: number) => void;
@@ -285,8 +295,9 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
       const nextZoom = { x: nextZoomValue, y: nextZoomValue };
 
       syncingZoomRef.current = true;
+      zoomRef.current = nextZoom;
+      applyCanvasTransform(nextZoomValue);
       viewer.scrollTo?.(nextScrollLeft, nextScrollTop);
-      commitScroll(nextScrollLeft, nextScrollTop);
       resizeLayoutAnchorRef.current = {
         viewportWidth: w,
         viewportHeight: h,
@@ -301,16 +312,12 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
         zoomX: nextZoomValue,
         zoomY: nextZoomValue,
       };
-      zoomRef.current = nextZoom;
       onZoomChange({
         x: Number(nextZoomValue.toFixed(4)),
         y: Number(nextZoomValue.toFixed(4)),
       });
-      requestAnimationFrame(() => {
-        syncingZoomRef.current = false;
-      });
     },
-    [commitScroll, onZoomChange]
+    [applyCanvasTransform, onZoomChange]
   );
 
   const syncViewportElement = useCallback(
@@ -326,11 +333,14 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
   const syncCanvasElement = useCallback(
     (el: HTMLDivElement | null) => {
       canvasElRef.current = el;
+      if (el) {
+        applyCanvasTransform(uniformViewportZoom(zoomRef.current));
+      }
       if (!canvasRef) return;
       if (typeof canvasRef === "function") canvasRef(el);
       else (canvasRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
     },
-    [canvasRef]
+    [applyCanvasTransform, canvasRef]
   );
 
   useEffect(() => {
@@ -465,15 +475,9 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
         const nextLeft = panRef.current.startLeft - dx;
         const nextTop = panRef.current.startTop - dy;
         viewer.scrollTo(nextLeft, nextTop);
-        const left =
-          typeof viewer.getScrollLeft === "function"
-            ? viewer.getScrollLeft()
-            : nextLeft;
-        const top =
-          typeof viewer.getScrollTop === "function"
-            ? viewer.getScrollTop()
-            : nextTop;
-        commitScroll(left, top);
+        lastScrollRef.current = { left: nextLeft, top: nextTop };
+        onScrollChange?.({ left: nextLeft, top: nextTop });
+        notifyViewportSync();
       };
 
       const up = (ev: MouseEvent) => {
@@ -498,7 +502,7 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
       el.removeEventListener("contextmenu", onContextMenu, true);
       el.removeEventListener("mousedown", onMouseDown, true);
     };
-  }, [clearWindowPanListeners, commitScroll]);
+  }, [clearWindowPanListeners, commitScroll, notifyViewportSync, onScrollChange]);
 
   const resolvedContentSize = useMemo(() => {
     if (contentSize) return contentSize;
@@ -511,6 +515,35 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
 
   const canvasScale = useMemo(() => uniformViewportZoom(zoom), [zoom.x, zoom.y]);
 
+  const reconcileCanvasTransform = useCallback(() => {
+    const scale = syncingZoomRef.current
+      ? uniformViewportZoom(zoomRef.current)
+      : uniformViewportZoom(zoom);
+    applyCanvasTransform(scale);
+  }, [applyCanvasTransform, zoom.x, zoom.y]);
+
+  useLayoutEffect(() => {
+    reconcileCanvasTransform();
+  }, [canvasScale, reconcileCanvasTransform]);
+
+  useEffect(() => {
+    if (
+      Math.abs(zoom.x - zoomRef.current.x) < 0.0001 &&
+      Math.abs(zoom.y - zoomRef.current.y) < 0.0001
+    ) {
+      syncingZoomRef.current = false;
+    }
+  }, [zoom.x, zoom.y]);
+
+  const worldStyle = useMemo<React.CSSProperties>(
+    () => ({
+      width: resolvedContentSize.width,
+      height: resolvedContentSize.height,
+      position: "relative",
+    }),
+    [resolvedContentSize.height, resolvedContentSize.width]
+  );
+
   const style = useMemo<React.CSSProperties>(
     () => ({
       width: resolvedContentSize.width,
@@ -518,10 +551,9 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
       minWidth: "100%",
       minHeight: "100%",
       position: "relative",
-      transform: `scale(${canvasScale})`,
       transformOrigin: "0 0",
     }),
-    [canvasScale, resolvedContentSize.height, resolvedContentSize.width]
+    [resolvedContentSize.height, resolvedContentSize.width]
   );
 
   const hasMaterialPayload = useCallback((types: ArrayLike<string> | null | undefined) => {
@@ -613,44 +645,29 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
         const next = { left: e.scrollLeft ?? 0, top: e.scrollTop ?? 0 };
         lastScrollRef.current = next;
         onScrollChange?.(next);
+        if (!syncingZoomRef.current) {
+          notifyViewportSync();
+        }
       }}
     >
-      <TransformWrapper
-        ref={transformRef}
-        initialScale={1}
-        minScale={1}
-        maxScale={1}
-        centerOnInit={false}
-        limitToBounds={false}
-        panning={{ disabled: true }}
-        doubleClick={{ disabled: true }}
-        pinch={{ disabled: true }}
-        wheel={{ step: 0.008, disabled: true, wheelDisabled: true }}
-        centerZoomedOut={false}
-      >
-        <TransformComponent
-          // 始终占满操作容器，但不在这一层裁切放大后的内容
-          wrapperStyle={{ width: "100%", height: "100%", overflow: "visible" }}
-          contentStyle={{ width: "100%", height: "100%", overflow: "visible" }}
+      <div style={worldStyle}>
+        <div
+          ref={syncCanvasElement}
+          data-panel-canvas
+          style={style}
+          className="h-full w-full"
+          onMouseDownCapture={onCanvasMouseDownCapture}
+          onClickCapture={onCanvasClickCapture}
+          onContextMenuCapture={onCanvasContextMenuCapture}
         >
-          <div
-            ref={syncCanvasElement}
-            data-panel-canvas
-            style={style}
-            className=""
-            onMouseDownCapture={onCanvasMouseDownCapture}
-            onClickCapture={onCanvasClickCapture}
-            onContextMenuCapture={onCanvasContextMenuCapture}
-          >
-            {children}
-            {viewportOverlay ? (
-              <div className="rv-viewport-overlay pointer-events-none absolute inset-0 z-[70] overflow-visible [&_.moveable-control-box]:pointer-events-auto">
-                {viewportOverlay}
-              </div>
-            ) : null}
+          {children}
+        </div>
+        {viewportOverlay ? (
+          <div className="rv-viewport-overlay pointer-events-none absolute inset-0 z-[70] overflow-visible [&_.moveable-control-box]:pointer-events-auto [&_.moveable-group]:pointer-events-auto [&_.moveable-area]:pointer-events-auto">
+            {viewportOverlay}
           </div>
-        </TransformComponent>
-      </TransformWrapper>
+        ) : null}
+      </div>
     </InfiniteViewer>
   );
 }