@arronqzy/react-view 1.0.39 → 1.0.40

package/src/panel/components/PanelRulers.tsx

@@ -1,26 +1,63 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import Ruler from "@scena/react-ruler";
 import { PANEL_Z_INDEX } from "../constants/zIndex";
 
-const RULER_WORLD_UNIT = 100;
 const RULER_SEGMENT = 10;
+/** 主刻度标签在屏幕上的目标间距（px），过密/过疏时动态调 unit */
+const RULER_TARGET_MAJOR_PX = 78;
+/** @scena/react-ruler 内部把刻度文字原点写死为 17px，厚度必须大于该值才看得见数字 */
+const SCENA_TEXT_ORIGIN = 17;
 
 export type PanelRulersProps = {
   zoomX: number;
   zoomY: number;
   scrollLeft: number;
   scrollTop: number;
+  /** 固定厚度；省略时按编辑区尺寸动态计算 */
   size?: number;
 };
 
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+/** 1/2/5 × 10^n 好看步长 */
+function niceNumber(raw: number): number {
+  if (!Number.isFinite(raw) || raw <= 0) return 1;
+  const exp = Math.floor(Math.log10(raw));
+  const frac = raw / 10 ** exp;
+  const niceFrac = frac <= 1 ? 1 : frac <= 2 ? 2 : frac <= 5 ? 5 : 10;
+  return niceFrac * 10 ** exp;
+}
+
+/**
+ * 按缩放动态主刻度单位：屏幕上主刻度间距 roughly 恒定，
+ * 缩小 → unit 变大（标签变少），放大 → unit 变小（标签变密）。
+ */
+export function resolveRulerUnit(zoom: number): number {
+  const z = Math.max(zoom, 0.0001);
+  return Math.max(1, niceNumber(RULER_TARGET_MAJOR_PX / z));
+}
+
+/** 按画布可视区域动态计算刻度尺厚度（保证刻度数字可读） */
+export function resolveRulerSize(width: number, height: number): number {
+  const edge = Math.min(width || 0, height || 0);
+  if (edge <= 0) return 22;
+  // 下限 24：文字带与刻度带分离，避免数字压住刻度线
+  return Math.round(clamp(edge * 0.032, 24, 30));
+}
+
 export function PanelRulers({
   zoomX,
   zoomY,
   scrollLeft,
   scrollTop,
-  size = 32,
+  size: sizeProp,
 }: PanelRulersProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [autoSize, setAutoSize] = useState(22);
   const [isDark, setIsDark] = useState(false);
+
   useEffect(() => {
     const root = document.documentElement;
     const update = () => setIsDark(root.classList.contains("dark"));
@@ -30,60 +67,150 @@ export function PanelRulers({
     return () => observer.disconnect();
   }, []);
 
-  const rulerScrollLeft = scrollLeft + size;
-  const rulerScrollTop = scrollTop + size;
+  useEffect(() => {
+    if (typeof sizeProp === "number") return;
+    const el = rootRef.current;
+    if (!el) return;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      setAutoSize(resolveRulerSize(rect.width, rect.height));
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [sizeProp]);
 
-  const horizontalProps = useMemo(
-    () => ({
-      zoom: zoomX,
-      unit: RULER_WORLD_UNIT,
-      segment: RULER_SEGMENT,
-      backgroundColor: isDark ? "rgba(15,23,42,0.98)" : "rgba(255,255,255,0.98)",
-      lineColor: isDark ? "rgba(226,232,240,0.4)" : "rgba(15,23,42,0.22)",
-      textColor: isDark ? "rgba(248,250,252,0.95)" : "rgba(15,23,42,0.75)",
-      font: "10px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
-      longLineSize: 8,
-      shortLineSize: 4,
-    }),
-    [isDark, zoomX]
-  );
+  const size = typeof sizeProp === "number" ? sizeProp : autoSize;
+  const s = `${size}px`;
+  const fontPx = Math.max(10, Math.min(11, Math.round(size * 0.38)));
+  const bg = isDark ? "rgba(15,23,42,0.98)" : "rgba(255,255,255,0.98)";
+  const lineColor = isDark ? "rgba(226,232,240,0.85)" : "rgba(15,23,42,0.55)";
+  const textColor = isDark ? "#f8fafc" : "#0f172a";
+  const seam = isDark ? "rgba(226,232,240,0.45)" : "rgba(15,23,42,0.28)";
 
-  const verticalProps = useMemo(
+  // 刻度线只占内侧约 30%，数字在外侧，互不遮挡
+  const longLineSize = Math.max(4, Math.min(Math.round(size * 0.3), size - fontPx - 4));
+  const shortLineSize = Math.max(2, Math.round(longLineSize * 0.55));
+  // @scena 文字原点写死 17px
+  // end(顶/左): baseline=bottom，目标底边 ≈ fontPx+1
+  // start(底/右): baseline=top，目标顶边 ≈ size-fontPx-2
+  // 横向 offset=[沿尺, 厚度]；纵向 offset=[厚度, 沿尺]
+  const textBandEnd = fontPx + 1 - (size - SCENA_TEXT_ORIGIN);
+  const textBandStart = size - fontPx - 2 - SCENA_TEXT_ORIGIN;
+  const textOffsetHEnd: [number, number] = [3, textBandEnd];
+  const textOffsetHStart: [number, number] = [3, textBandStart];
+  const textOffsetVEnd: [number, number] = [textBandEnd, 3];
+  const textOffsetVStart: [number, number] = [textBandStart, 3];
+
+  const rulerScrollLeft = scrollLeft + size * (1 - 1 / Math.max(zoomX, 0.0001));
+  const rulerScrollTop = scrollTop + size * (1 - 1 / Math.max(zoomY, 0.0001));
+  const unitX = useMemo(() => resolveRulerUnit(zoomX), [zoomX]);
+  const unitY = useMemo(() => resolveRulerUnit(zoomY), [zoomY]);
+
+  const sharedPaint = useMemo(
     () => ({
-      zoom: zoomY,
-      unit: RULER_WORLD_UNIT,
       segment: RULER_SEGMENT,
-      backgroundColor: isDark ? "rgba(15,23,42,0.98)" : "rgba(255,255,255,0.98)",
-      lineColor: isDark ? "rgba(226,232,240,0.4)" : "rgba(15,23,42,0.22)",
-      textColor: isDark ? "rgba(248,250,252,0.95)" : "rgba(15,23,42,0.75)",
-      font: "10px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
-      longLineSize: 8,
-      shortLineSize: 4,
+      backgroundColor: bg,
+      lineColor,
+      textColor,
+      font: `500 ${fontPx}px system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial`,
+      longLineSize,
+      shortLineSize,
+      mainLineSize: longLineSize + 2,
     }),
-    [isDark, zoomY]
+    [bg, fontPx, lineColor, longLineSize, shortLineSize, textColor]
   );
 
+  const clipTop = `polygon(0 0, 100% 0, calc(100% - ${s}) 100%, ${s} 100%)`;
+  const clipBottom = `polygon(${s} 0, calc(100% - ${s}) 0, 100% 100%, 0 100%)`;
+  const clipLeft = `polygon(0 0, 100% ${s}, 100% calc(100% - ${s}), 0 100%)`;
+  const clipRight = `polygon(0 ${s}, 100% 0, 100% 100%, 0 calc(100% - ${s}))`;
+
   return (
     <div
+      ref={rootRef}
       className="pointer-events-none absolute inset-0 isolate"
-      style={{ ["--rv-ruler-size" as string]: `${size}px`, zIndex: PANEL_Z_INDEX.ruler }}
+      style={{ ["--rv-ruler-size" as string]: s, zIndex: PANEL_Z_INDEX.ruler }}
     >
-      <div className="absolute left-[var(--rv-ruler-size)] right-[var(--rv-ruler-size)] top-0 h-[var(--rv-ruler-size)] overflow-visible">
-        <Ruler type="horizontal" {...horizontalProps} scrollPos={rulerScrollLeft} />
+      {/* 顶：刻度朝下(end)，数字在上半区 */}
+      <div
+        className="absolute inset-x-0 top-0 overflow-hidden"
+        style={{ height: s, clipPath: clipTop, backgroundColor: bg }}
+      >
+        <Ruler
+          key={`h-end-${unitX}`}
+          type="horizontal"
+          {...sharedPaint}
+          unit={unitX}
+          zoom={zoomX}
+          direction="end"
+          textOffset={textOffsetHEnd}
+          scrollPos={rulerScrollLeft}
+        />
       </div>
-      <div className="absolute left-0 top-[var(--rv-ruler-size)] bottom-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] overflow-visible">
-        <Ruler type="vertical" {...verticalProps} scrollPos={rulerScrollTop} />
+      {/* 左：刻度朝右(end)，数字在左半区 */}
+      <div
+        className="absolute inset-y-0 left-0 overflow-hidden"
+        style={{ width: s, clipPath: clipLeft, backgroundColor: bg }}
+      >
+        <Ruler
+          key={`v-end-${unitY}`}
+          type="vertical"
+          {...sharedPaint}
+          unit={unitY}
+          zoom={zoomY}
+          direction="end"
+          textOffset={textOffsetVEnd}
+          scrollPos={rulerScrollTop}
+        />
       </div>
-      <div className="absolute left-[var(--rv-ruler-size)] right-[var(--rv-ruler-size)] bottom-0 h-[var(--rv-ruler-size)] overflow-visible">
-        <Ruler type="horizontal" {...horizontalProps} scrollPos={rulerScrollLeft} />
+      {/* 底：刻度朝上(start)，数字在下半区 */}
+      <div
+        className="absolute inset-x-0 bottom-0 overflow-hidden"
+        style={{ height: s, clipPath: clipBottom, backgroundColor: bg }}
+      >
+        <Ruler
+          key={`h-start-${unitX}`}
+          type="horizontal"
+          {...sharedPaint}
+          unit={unitX}
+          zoom={zoomX}
+          direction="start"
+          textOffset={textOffsetHStart}
+          scrollPos={rulerScrollLeft}
+        />
       </div>
-      <div className="absolute right-0 top-[var(--rv-ruler-size)] bottom-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] overflow-visible">
-        <Ruler type="vertical" {...verticalProps} scrollPos={rulerScrollTop} />
+      {/* 右：刻度朝左(start)，数字在右半区 */}
+      <div
+        className="absolute inset-y-0 right-0 overflow-hidden"
+        style={{ width: s, clipPath: clipRight, backgroundColor: bg }}
+      >
+        <Ruler
+          key={`v-start-${unitY}`}
+          type="vertical"
+          {...sharedPaint}
+          unit={unitY}
+          zoom={zoomY}
+          direction="start"
+          textOffset={textOffsetVStart}
+          scrollPos={rulerScrollTop}
+        />
       </div>
-      <div className="absolute left-0 top-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-b border-r border-border bg-background" />
-      <div className="absolute right-0 top-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-b border-l border-border bg-background" />
-      <div className="absolute left-0 bottom-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-r border-t border-border bg-background" />
-      <div className="absolute right-0 bottom-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-l border-t border-border bg-background" />
+
+      {/* 四角斜缝：SVG 明确画外角→内角 */}
+      <svg aria-hidden className="pointer-events-none absolute left-0 top-0" width={size} height={size} style={{ zIndex: 1 }}>
+        <line x1={0} y1={0} x2={size} y2={size} stroke={seam} strokeWidth={1} />
+      </svg>
+      <svg aria-hidden className="pointer-events-none absolute right-0 top-0" width={size} height={size} style={{ zIndex: 1 }}>
+        <line x1={size} y1={0} x2={0} y2={size} stroke={seam} strokeWidth={1} />
+      </svg>
+      <svg aria-hidden className="pointer-events-none absolute bottom-0 left-0" width={size} height={size} style={{ zIndex: 1 }}>
+        <line x1={0} y1={size} x2={size} y2={0} stroke={seam} strokeWidth={1} />
+      </svg>
+      <svg aria-hidden className="pointer-events-none absolute bottom-0 right-0" width={size} height={size} style={{ zIndex: 1 }}>
+        <line x1={size} y1={size} x2={0} y2={0} stroke={seam} strokeWidth={1} />
+      </svg>
     </div>
   );
 }

package/src/panel/components/SelectLayer.tsx

@@ -44,8 +44,8 @@ export function SelectLayer({
 
   return (
     <Selecto
-      // container 可以是 transform 过的画布；rootContainer 必须是未 transform 的真实坐标系容器
-      container={container}
+      // 框选层挂在未 scale 的视口上，避免选区宽高被画布 transform 放大、线宽视觉变粗
+      container={dragRoot}
       rootContainer={dragRoot}
       // 选择框渲染到 body，避免受滚动/缩放影响产生偏移
       portalContainer={overlayContainer}

package/src/panel/components/WorkspaceProjectNav.tsx

@@ -74,7 +74,7 @@ export function WorkspaceProjectNav({
 
   return (
     <>
-      <div className="flex items-center gap-1.5 border-l border-border pl-2">
+      <div className="flex items-center gap-1.5 border-l border-border/60 pl-2.5">
         <TooltipProvider delayDuration={150}>
           <Tooltip>
             <TooltipTrigger asChild>

package/src/panel/icons.tsx

@@ -158,3 +158,120 @@ export function IconImage() {
     </svg>
   );
 }
+
+export function IconFolder() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" />
+    </svg>
+  );
+}
+
+export function IconGrid() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="3" y="3" width="7" height="7" rx="1" />
+      <rect x="14" y="3" width="7" height="7" rx="1" />
+      <rect x="3" y="14" width="7" height="7" rx="1" />
+      <rect x="14" y="14" width="7" height="7" rx="1" />
+    </svg>
+  );
+}
+
+export function IconTree() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M12 4v8" />
+      <path d="M6 20v-4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4" />
+      <circle cx="12" cy="4" r="2" />
+      <circle cx="6" cy="20" r="2" />
+      <circle cx="18" cy="20" r="2" />
+    </svg>
+  );
+}
+
+export function IconSearch() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-3.5-3.5" />
+    </svg>
+  );
+}
+
+export function IconStar({ filled }: { filled?: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className="h-3.5 w-3.5"
+      fill={filled ? "currentColor" : "none"}
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      <path d="m12 3 2.7 5.5 6 .9-4.4 4.3 1 6L12 16.8 6.7 19.7l1-6L3.3 9.4l6-.9L12 3Z" />
+    </svg>
+  );
+}
+
+export function IconEyeOff() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M3 3l18 18" />
+      <path d="M10.6 10.6a2 2 0 0 0 2.8 2.8" />
+      <path d="M9.9 5.1A10.6 10.6 0 0 1 12 5c5 0 9.3 3.1 11 7-.5 1.2-1.2 2.3-2.1 3.2" />
+      <path d="M6.1 6.1C4.2 7.3 2.7 9 1.9 11c1.7 3.9 6 7 10.1 7 1.4 0 2.7-.3 3.9-.7" />
+    </svg>
+  );
+}
+
+/** 仅看引用子树 */
+export function IconRefFilter({ active }: { active?: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className="h-3.5 w-3.5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={active ? 2.2 : 2}
+    >
+      <path d="M4 5h16l-5.5 6.5V18l-5 2.5v-9L4 5Z" fill={active ? "currentColor" : "none"} fillOpacity={active ? 0.2 : 0} />
+      <circle cx="16.5" cy="16.5" r="2.2" />
+      <path d="M14.8 15.2 12 12.5" />
+    </svg>
+  );
+}
+
+export function IconBlueprint({ active }: { active?: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className="h-3.5 w-3.5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={active ? 2.2 : 2}
+    >
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <circle cx="8" cy="10" r="1.5" fill={active ? "currentColor" : "none"} />
+      <circle cx="16" cy="10" r="1.5" fill={active ? "currentColor" : "none"} />
+      <circle cx="12" cy="16" r="1.5" fill={active ? "currentColor" : "none"} />
+      <path d="M9.2 10.8 10.8 14.2M14.8 10.8 13.2 14.2" />
+    </svg>
+  );
+}
+
+export function IconSun() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2.5M12 19.5V22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M2 12h2.5M19.5 12H22M4.93 19.07 6.7 17.3M17.3 6.7l1.77-1.77" />
+    </svg>
+  );
+}
+
+export function IconMoon() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3c0 .66.08 1.3.22 1.92A7 7 0 0 0 19.08 12c.62.14 1.26.22 1.92.22Z" />
+    </svg>
+  );
+}

package/src/tailwind.css

@@ -26,6 +26,70 @@
   background: hsl(var(--foreground) / 0.45);
 }
 
+/*
+ * 物料侧栏：容器查询写在源 CSS 里（JIT 的 @[Npx] 经常未进 dist）
+ * 窄：单列、卡片最多 112px；宽：auto-fill 换行，单卡约 88–104px
+ */
+.rv-material-sidebar {
+  container-type: inline-size;
+  container-name: rv-material;
+}
+
+.rv-material-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: stretch;
+  gap: 0.375rem;
+}
+
+.rv-material-card {
+  width: 100%;
+  max-width: 112px;
+  justify-self: center;
+}
+
+@container rv-material (min-width: 200px) {
+  .rv-material-grid {
+    grid-template-columns: repeat(auto-fill, minmax(88px, 104px));
+  }
+
+  .rv-material-card {
+    max-width: none;
+    justify-self: stretch;
+  }
+}
+
+/*
+ * 配置侧栏：窄时多列表单改单列，避免挤成一团
+ */
+.scope-config-sidebar {
+  container-type: inline-size;
+  container-name: rv-config;
+}
+
+@container rv-config (max-width: 260px) {
+  .scope-config-sidebar .grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+
+  .scope-config-sidebar .grid > * {
+    min-width: 0;
+  }
+}
+
+/*
+ * 节点选中描边：用倒数抵消画布 scale，屏幕上始终约 2px（勿用 ring/border，会随缩放变粗）
+ */
+.rv-node-selected {
+  box-shadow: 0 0 0 calc(2px / var(--rv-canvas-scale, 1)) rgb(59 130 246 / 0.9);
+}
+
+/* Selecto 框选：渲染在 body，线宽保持屏幕 1px */
+.selecto-selection {
+  border-width: 1px !important;
+  box-sizing: border-box !important;
+}
+
 /*
  * Moveable 控制框：
  * - 根节点必须高于画布元素 zIndex（节点默认 ≥1），否则多选组框线会被节点盖住，只剩锚点可见
@@ -65,14 +129,11 @@
   background: transparent !important;
 }
 
+/* 锚点尺寸交给 Moveable 的 scale(zoom) 补偿，勿写死 px 覆盖，否则放大后会偏粗 */
 .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;
+  border-color: hsl(var(--background)) !important;
   background: #1990ff !important;
   background: var(--moveable-color) !important;
   z-index: 10 !important;