@arronqzy/react-view 1.0.3 → 1.0.5

package/dist/styles.css

@@ -584,10 +584,6 @@ video {
   pointer-events: none;
 }
 
-.visible {
-  visibility: visible;
-}
-
 .collapse {
   visibility: collapse;
 }
@@ -767,10 +763,6 @@ video {
   margin-top: 0.25rem;
 }
 
-.mt-1\.5 {
-  margin-top: 0.375rem;
-}
-
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -890,6 +882,10 @@ video {
   height: 100%;
 }
 
+.max-h-28 {
+  max-height: 7rem;
+}
+
 .max-h-44 {
   max-height: 11rem;
 }
@@ -1030,14 +1026,14 @@ video {
   max-width: 200px;
 }
 
-.max-w-\[260px\] {
-  max-width: 260px;
-}
-
 .max-w-\[360px\] {
   max-width: 360px;
 }
 
+.max-w-\[380px\] {
+  max-width: 380px;
+}
+
 .max-w-\[420px\] {
   max-width: 420px;
 }
@@ -1278,10 +1274,18 @@ video {
   white-space: nowrap;
 }
 
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .break-words {
   overflow-wrap: break-word;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2010,6 +2014,10 @@ video {
   color: hsl(var(--foreground));
 }
 
+.text-foreground\/80 {
+  color: hsl(var(--foreground) / 0.8);
+}
+
 .text-foreground\/90 {
   color: hsl(var(--foreground) / 0.9);
 }
@@ -2311,34 +2319,48 @@ video {
 
 .rv-moveable-layer {
   --moveable-color: #1990ff;
+  z-index: 9999 !important;
 }
 
-.rv-moveable-layer .moveable-control {
-  width: 14px !important;
-  height: 14px !important;
-  margin-top: -7px !important;
-  margin-left: -7px !important;
-  border-radius: 50% !important;
-  box-sizing: border-box !important;
-  border: 2px solid hsl(var(--background)) !important;
-  background: #1990ff !important;
+.rv-moveable-layer.moveable-group,
+.rv-moveable-layer .moveable-group,
+.rv-moveable-layer.moveable-control-box,
+.rv-moveable-layer .moveable-control-box {
+  z-index: 1 !important;
+}
+
+.rv-moveable-layer .moveable-line {
+  --moveable-color: #1990ff;
   background: var(--moveable-color) !important;
 }
 
+/* 组选/单边控制线：厚度由 moveable zoom 补偿，保持屏幕 1px */
+
 .rv-moveable-layer .moveable-line.moveable-direction {
-  width: 1px !important;
-  height: 1px !important;
-  margin: 0 !important;
+  background: var(--moveable-color) !important;
 }
 
-.rv-moveable-layer .moveable-line {
-  --moveable-color: #1990ff;
+.rv-moveable-layer .moveable-group .moveable-control-box,
+.rv-moveable-layer.moveable-group .moveable-control-box {
+  z-index: 2 !important;
 }
 
 .rv-moveable-layer .moveable-around-control {
   background: transparent !important;
 }
 
+.rv-moveable-layer .moveable-control {
+  width: 14px !important;
+  height: 14px !important;
+  margin-top: -7px !important;
+  margin-left: -7px !important;
+  border-radius: 50% !important;
+  box-sizing: border-box !important;
+  border: 2px solid hsl(var(--background)) !important;
+  background: #1990ff !important;
+  background: var(--moveable-color) !important;
+}
+
 .hover\:border-border:hover {
   border-color: hsl(var(--border));
 }
@@ -2575,10 +2597,18 @@ video {
   width: 0.5rem;
 }
 
+.\[\&_\.moveable-area\]\:pointer-events-auto .moveable-area {
+  pointer-events: auto;
+}
+
 .\[\&_\.moveable-control-box\]\:pointer-events-auto .moveable-control-box {
   pointer-events: auto;
 }
 
+.\[\&_\.moveable-group\]\:pointer-events-auto .moveable-group {
+  pointer-events: auto;
+}
+
 .\[\&_\.scope-field--highlight\]\:rounded-md .scope-field--highlight {
   border-radius: calc(var(--radius) - 2px);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "files": [
     "src",
     "dist",
@@ -16,7 +16,6 @@
   "dependencies": {
     "@scena/react-ruler": "^0.19.0",
     "react-infinite-viewer": "^0.28.1",
-    "react-zoom-pan-pinch": "^4.0.3",
     "react-moveable": "^0.56.0",
     "react-selecto": "^1.26.3",
     "rxjs": "^7.8.2",
@@ -26,10 +25,10 @@
     "infinite-viewer": "^0.29.1",
     "echarts": "^6.0.0",
     "uuid": "^13.0.0",
-    "@arronqzy/ui": "1.0.0",
-    "@arronqzy/blueprint-dsl": "1.0.1",
-    "@arronqzy/react-blueprint": "1.0.1",
-    "@arronqzy/rx-store": "1.0.1"
+    "@arronqzy/ui": "1.0.2",
+    "@arronqzy/blueprint-dsl": "1.0.3",
+    "@arronqzy/react-blueprint": "1.0.3",
+    "@arronqzy/rx-store": "1.0.2"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -39,7 +38,7 @@
     "typescript": "^5.5.4",
     "@arronqzy/eslint-config": "0.0.0",
     "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/tailwind": "1.0.1"
+    "@arronqzy/tailwind": "1.0.2"
   },
   "scripts": {
     "lint": "eslint \"src/**/*.{ts,tsx}\"",

package/readme.md

@@ -1,17 +1,75 @@
 # @arronqzy/react-view
 
-## Tailwind 使用方式
+Abuilder 的**视图编辑器** React 包，提供可视化画布、图层、物料、在线预览与工作区管理能力。
 
-本包内已内置 Tailwind 配置，并提供可直接引入的样式产物：
+## 功能概览
 
-- 生成样式：`pnpm -C packages/react-view build:css`
-- 使用样式：在你的应用入口中引入
+- **无限画布**：平移、缩放、标尺、框选与 Moveable 拖拽/缩放/旋转
+- **图层系统**：多图层、映射图层、主图层、锁定与合并
+- **物料节点**：图表（ECharts）、文本、图片、音视频、几何、网格、引用节点等
+- **Scope 模版**：节点属性支持 `{scope.xxx}` 表达式与解析预览
+- **工作区**：IndexedDB 持久化、多项目切换、同步与在线预览
+- **蓝图联动**：与 `@arronqzy/react-blueprint` 分屏编辑，运行时 Scope 回写视图
+
+## 安装
+
+```bash
+pnpm add @arronqzy/react-view
+```
+
+依赖 React 19，并需引入样式：
 
 ```ts
 import "@arronqzy/react-view/styles.css";
 ```
 
-如果你希望由应用侧的 Tailwind 来扫描本包源码（不引入上面的 `styles.css`），请把本包路径加入应用的 `content` 配置，例如：
+## 使用
+
+### 完整编辑器面板
+
+```tsx
+import { ReactViewPanel } from "@arronqzy/react-view";
+import "@arronqzy/react-view/styles.css";
+
+export function Editor() {
+  return <ReactViewPanel className="h-screen" initialZoom={1} />;
+}
+```
+
+### 在线预览
+
+```tsx
+import { ReactViewOnlinePreview } from "@arronqzy/react-view";
+
+<ReactViewOnlinePreview projectId="your-project-id" />
+```
+
+URL 参数解析：
+
+```ts
+import { parseOnlinePreviewSearchParams } from "@arronqzy/react-view";
+
+const params = parseOnlinePreviewSearchParams("?preview=online&projectId=xxx");
+```
+
+## 核心导出
+
+| 导出 | 说明 |
+|------|------|
+| `ReactViewPanel` | 主编辑面板（画布 + 配置侧栏 + 蓝图分屏） |
+| `ReactViewOnlinePreview` | 只读在线预览页 |
+| `parseOnlinePreviewSearchParams` | 解析预览 URL 参数 |
+| `createView` / `createAction` 等 | 视图 DSL 与指令扩展（`src/core`） |
+
+## 样式与 Tailwind
+
+本包内置 Tailwind 配置，构建产物为 `dist/styles.css`：
+
+```bash
+pnpm -C packages/react-view build:css
+```
+
+若由应用侧 Tailwind 扫描源码，请将本包加入 `content`：
 
 ```ts
 content: [
@@ -19,3 +77,14 @@ content: [
   "./node_modules/@arronqzy/react-view/src/**/*.{ts,tsx}",
 ]
 ```
+
+## 依赖关系
+
+- `@arronqzy/ui` — 基础 UI 组件
+- `@arronqzy/rx-store` — 画布状态与历史
+- `@arronqzy/react-blueprint` — 蓝图编辑与执行
+- `@arronqzy/blueprint-dsl` — 蓝图运行时
+
+## 许可证
+
+MIT

package/src/panel/ReactViewPanel.tsx

@@ -57,6 +57,7 @@ import {
 import { resolvePanelElementScope } from "./utils/scope-template";
 import { PANEL_MESSAGES } from "./constants/messages";
 import { PANEL_Z_INDEX } from "./constants/zIndex";
+import { useRafThrottledScroll } from "./hooks/useRafThrottledScroll";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -111,6 +112,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
   toast,
+  useTheme,
 } from "@arronqzy/ui";
 
 function IconPlus() {
@@ -304,6 +306,7 @@ function shouldClearSelectionOnBlank(target: HTMLElement | null) {
   if (
     target.closest(".rv-selectable") ||
     target.closest(".moveable-control-box") ||
+    target.closest(".moveable-group") ||
     target.closest(".moveable-line") ||
     target.closest(".moveable-control") ||
     target.closest(".moveable-direction")
@@ -333,6 +336,7 @@ export type ReactViewPanelProps = {
 export function ReactViewPanel({ initialZoom = 1, className }: ReactViewPanelProps) {
   const THEME_STORAGE_KEY = "panel:theme";
   const TITLE_ICON_STORAGE_KEY = "panel:titleIconDataUrl";
+  const { setTheme } = useTheme();
   const themedScrollbarClass =
     "scrollbar-thin [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-muted/40 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/80 [&::-webkit-scrollbar-thumb]:hover:bg-border";
   const {
@@ -396,7 +400,9 @@ export function ReactViewPanel({ initialZoom = 1, className }: ReactViewPanelPro
       return { x: rounded, y: rounded };
     });
   }, []);
-  const [scroll, setScroll] = useState({ left: 0, top: 0 });
+  const { scroll, scrollRef: scrollPosRef, onScrollChange: onViewportScrollChange } =
+    useRafThrottledScroll();
+  const viewportSyncRef = useRef<(() => void) | null>(null);
 
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [selectedTargets, setSelectedTargets] = useState<HTMLElement[]>([]);
@@ -487,7 +493,9 @@ export function ReactViewPanel({ initialZoom = 1, className }: ReactViewPanelPro
   const applyTheme = useCallback((checked: boolean) => {
     const root = document.documentElement;
     root.classList.toggle("dark", checked);
+    root.classList.toggle("light", !checked);
     root.dataset.theme = checked ? "dark" : "light";
+    setTheme(checked ? "dark" : "light");
     try {
       // panel 独立持久化键，避免与宿主应用的通用 theme 键互相覆盖
       localStorage.setItem(THEME_STORAGE_KEY, checked ? "dark" : "light");
@@ -497,7 +505,7 @@ export function ReactViewPanel({ initialZoom = 1, className }: ReactViewPanelPro
       // ignore storage errors
     }
     setIsDark(checked);
-  }, [THEME_STORAGE_KEY]);
+  }, [THEME_STORAGE_KEY, setTheme]);
 
   useEffect(() => {
     const root = document.documentElement;
@@ -2369,6 +2377,7 @@ export function ReactViewPanel({ initialZoom = 1, className }: ReactViewPanelPro
                     const nodeIdFromElement = nodeEl?.dataset.elementId ?? null;
                     const onMoveable =
                       !!target?.closest(".moveable-control-box") ||
+                      !!target?.closest(".moveable-group") ||
                       !!target?.closest(".moveable-line") ||
                       !!target?.closest(".moveable-control") ||
                       !!target?.closest(".moveable-direction");
@@ -2394,8 +2403,9 @@ export function ReactViewPanel({ initialZoom = 1, className }: ReactViewPanelPro
                     ref={syncScrollRef}
                     zoom={zoom}
                     onZoomChange={setZoom}
-                    onScrollChange={setScroll}
+                    onScrollChange={onViewportScrollChange}
                     canvasRef={syncCanvasRef}
+                    viewportSyncRef={viewportSyncRef}
                     viewportOverlay={
                       <MoveableLayer
                         zoomX={zoom.x}
@@ -2405,8 +2415,8 @@ export function ReactViewPanel({ initialZoom = 1, className }: ReactViewPanelPro
                         selectedTargets={selectedTargets}
                         elementsById={byId}
                         updateElement={updateElement}
-                        refreshToken={`${historyCursor}|${scroll.left}|${scroll.top}|${zoom.x}|${zoom.y}`}
-                        viewportScroll={scroll}
+                        refreshToken={historyCursor}
+                        viewportSyncRef={viewportSyncRef}
                       />
                     }
                     onCanvasMouseDownCapture={(e) => {
@@ -2599,10 +2609,10 @@ export function ReactViewPanel({ initialZoom = 1, className }: ReactViewPanelPro
                               const centerX = rect.left + rect.width / 2;
                               const centerY = rect.top + rect.height / 2;
                               targetX =
-                                (centerX - rect.left + scroll.left) /
+                                (centerX - rect.left + scrollPosRef.current.left) /
                                 Math.max(0.0001, zoom.x);
                               targetY =
-                                (centerY - rect.top + scroll.top) /
+                                (centerY - rect.top + scrollPosRef.current.top) /
                                 Math.max(0.0001, zoom.y);
                             }
                             duplicateElement(

package/src/panel/components/ConfigHintIcon.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@arronqzy/ui";
+
+export type ConfigHintIconProps = {
+  label?: string;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+
+export function ConfigHintIcon({
+  label = "说明",
+  children,
+  className,
+  contentClassName,
+}: ConfigHintIconProps) {
+  return (
+    <TooltipProvider delayDuration={120}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className={
+              className ??
+              "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border text-[10px] leading-none text-muted-foreground hover:bg-accent/50"
+            }
+            aria-label={`${label}说明`}
+          >
+            ?
+          </button>
+        </TooltipTrigger>
+        <TooltipContent
+          side="top"
+          className={`z-[10120] max-w-[360px] text-[11px] leading-5 ${contentClassName ?? ""}`}
+        >
+          {children}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/panel/components/ElementsLayer.tsx

@@ -607,8 +607,6 @@ function ChartNodeContent({
     window.addEventListener(PREVIEW_LAYOUT_EVENT, onLayout);
     const obs = new ResizeObserver(onLayout);
     obs.observe(host);
-    const parent = host.parentElement;
-    if (parent) obs.observe(parent);
     return () => {
       window.removeEventListener(PREVIEW_LAYOUT_EVENT, onLayout);
       obs.disconnect();
@@ -792,7 +790,7 @@ function ReferenceNodeContent({
   );
 }
 
-export function ElementsLayer({
+export const ElementsLayer = React.memo(function ElementsLayer({
   elements,
   allElements,
   selectedIds,
@@ -887,5 +885,5 @@ export function ElementsLayer({
       })}
     </>
   );
-}
+});
 

package/src/panel/components/MoveableLayer.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import Moveable from "react-moveable";
 
@@ -41,8 +41,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 +155,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,7 +175,7 @@ export function MoveableLayer({
   elementsById,
   updateElement,
   refreshToken,
-  viewportScroll,
+  viewportSyncRef,
 }: MoveableLayerProps) {
   const moveableRef = useRef<any>(null);
   const targets = useMemo(() => {
@@ -210,15 +221,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 +279,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 +293,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 +435,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;
 
@@ -453,11 +461,15 @@ export function MoveableLayer({
     ) : 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 +481,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
@@ -798,6 +811,6 @@ export function MoveableLayer({
     </>
   );
 
-  return createPortal(layer, canvasContainer);
+  return canvasContainer ? createPortal(layer, canvasContainer) : null;
 }