@arronqzy/react-view 0.0.1

package/src/panel/utils/updateElementDraft.ts

@@ -0,0 +1,221 @@
+import type { Node, State } from "../../../../rx-store/src/types";
+import type { PanelElement } from "../types";
+import { getGridChildSpanRect, getGridSlotLayout } from "./gridPlacement";
+import {
+  canonicalMappingFamilyRootId,
+  concreteGridParentIdForLayer,
+  logicalGridParentIdFromConcrete,
+} from "./mappingLayerOps";
+import { isPanelElementNode } from "./panelElementNodes";
+
+/** 防止同源合并把「映射层上的网格 id」泄露到其它图层，保证节点树 parentGridId 只指向本图层网格 */
+function fixCrossLayerParentGrid(
+  merged: PanelElement,
+  propsBefore: PanelElement,
+  byId: Map<string, PanelElement>,
+  allFlat: PanelElement[]
+): void {
+  const layerId = propsBefore.layerId;
+  const pg = merged.parentGridId;
+  if (!pg) return;
+
+  const parentNode = byId.get(pg);
+  const validHere =
+    !!parentNode &&
+    parentNode.materialType === "grid" &&
+    parentNode.layerId === layerId;
+
+  if (validHere) return;
+
+  const logical =
+    logicalGridParentIdFromConcrete(pg, byId) ??
+    (propsBefore.parentGridId !== undefined
+      ? logicalGridParentIdFromConcrete(propsBefore.parentGridId, byId)
+      : undefined);
+
+  if (logical !== undefined) {
+    const cp = concreteGridParentIdForLayer(logical, layerId, allFlat);
+    const gridEl = cp ? byId.get(cp) : undefined;
+    if (gridEl?.materialType === "grid") {
+      merged.parentGridId = cp;
+      const spanRect = getGridChildSpanRect(
+        gridEl,
+        merged.gridSlotIndex ?? 0,
+        merged.gridColSpan ?? 1,
+        merged.gridRowSpan ?? 1
+      );
+      merged.gridSlotIndex = spanRect.index;
+      merged.gridColSpan = spanRect.colSpan;
+      merged.gridRowSpan = spanRect.rowSpan;
+      merged.x = spanRect.x;
+      merged.y = spanRect.y;
+      merged.width = spanRect.width;
+      merged.height = spanRect.height;
+      return;
+    }
+  }
+
+  merged.parentGridId = propsBefore.parentGridId;
+  merged.gridSlotIndex = propsBefore.gridSlotIndex;
+  merged.gridColSpan = propsBefore.gridColSpan;
+  merged.gridRowSpan = propsBefore.gridRowSpan;
+  merged.x = propsBefore.x;
+  merged.y = propsBefore.y;
+  merged.width = propsBefore.width;
+  merged.height = propsBefore.height;
+}
+
+/** 同源映射：外层网格布局改动时，同源簇内每张网格实例一并 reflow 其子节点几何 */
+export function applyGridLayoutPatchAcrossMappingFamily(
+  draft: State,
+  logicalGridSourceId: string,
+  patch: Partial<PanelElement>
+): void {
+  const nodes = draft.root.children ?? [];
+  const byIdPre = new Map<string, PanelElement>();
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    const p = n.props as PanelElement;
+    byIdPre.set(p.id, p);
+  });
+  const gridTargets = nodes.filter((n) => {
+    if (!isPanelElementNode(n) || !n.props) return false;
+    const p = n.props as PanelElement;
+    if (p.materialType !== "grid") return false;
+    return canonicalMappingFamilyRootId(byIdPre, p.id) === logicalGridSourceId;
+  });
+  if (gridTargets.length === 0) return;
+  const byParent = new Map<string, PanelElement[]>();
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    const p = n.props as PanelElement;
+    if (!p.parentGridId) return;
+    const list = byParent.get(p.parentGridId) ?? [];
+    list.push(p);
+    byParent.set(p.parentGridId, list);
+  });
+  const byIdNode = new Map<string, Node>();
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    byIdNode.set((n.props as PanelElement).id, n);
+  });
+  const reflowGridDescendants = (grid: PanelElement) => {
+    const { slots } = getGridSlotLayout(grid);
+    if (slots.length === 0) return;
+    const directChildren = byParent.get(grid.id) ?? [];
+    directChildren.forEach((child) => {
+      const slotIndex =
+        child.gridSlotIndex !== undefined ? Math.max(0, Math.floor(child.gridSlotIndex)) : 0;
+      const spanRect = getGridChildSpanRect(
+        grid,
+        slotIndex % slots.length,
+        child.gridColSpan ?? 1,
+        child.gridRowSpan ?? 1
+      );
+      child.gridSlotIndex = spanRect.index;
+      child.gridColSpan = spanRect.colSpan;
+      child.gridRowSpan = spanRect.rowSpan;
+      child.x = spanRect.x;
+      child.y = spanRect.y;
+      child.width = spanRect.width;
+      child.height = spanRect.height;
+      const childNode = byIdNode.get(child.id);
+      if (childNode) childNode.props = child;
+      if (child.materialType === "grid") {
+        reflowGridDescendants(child);
+      }
+    });
+  };
+  gridTargets.forEach((targetNode) => {
+    if (!targetNode.props) return;
+    const nextGrid = {
+      ...(targetNode.props as PanelElement),
+      ...patch,
+    } as PanelElement;
+    targetNode.props = nextGrid;
+    reflowGridDescendants(nextGrid);
+  });
+}
+
+/** 同源节点簇在非网格独占分支下的批量合并（含跨图层 parentGridId remap） */
+export function applyMappingFamilySyncPatch(
+  draft: State,
+  syncSourceId: string,
+  syncPatch: Partial<PanelElement>,
+  patch: Partial<PanelElement>
+): void {
+  const nodes = draft.root.children ?? [];
+  const byId = new Map<string, PanelElement>();
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    const p = n.props as PanelElement;
+    byId.set(p.id, p);
+  });
+  const allFlat = [...byId.values()];
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    const props = n.props as PanelElement;
+    const sameFamily = canonicalMappingFamilyRootId(byId, props.id) === syncSourceId;
+    if (!sameFamily) return;
+
+    const merged = { ...props, ...syncPatch } as PanelElement;
+
+    if ("parentGridId" in patch && patch.parentGridId === undefined) {
+      merged.parentGridId = undefined;
+      merged.gridSlotIndex = undefined;
+      n.props = merged;
+      byId.set(merged.id, merged);
+      return;
+    }
+
+    const logicalParent =
+      patch.parentGridId !== undefined
+        ? logicalGridParentIdFromConcrete(patch.parentGridId, byId)
+        : props.parentGridId !== undefined
+          ? logicalGridParentIdFromConcrete(props.parentGridId, byId)
+          : undefined;
+
+    const touchesGridPlacement =
+      ("parentGridId" in patch && patch.parentGridId !== undefined) ||
+      "gridSlotIndex" in patch ||
+      "gridColSpan" in patch ||
+      "gridRowSpan" in patch;
+
+    if (touchesGridPlacement && logicalParent !== undefined) {
+      const concreteParent = concreteGridParentIdForLayer(logicalParent, props.layerId, allFlat);
+      if (concreteParent) {
+        const parentEl = byId.get(concreteParent);
+        if (parentEl?.materialType === "grid") {
+          merged.parentGridId = concreteParent;
+          const spanRect = getGridChildSpanRect(
+            parentEl,
+            merged.gridSlotIndex ?? 0,
+            merged.gridColSpan ?? 1,
+            merged.gridRowSpan ?? 1
+          );
+          merged.gridSlotIndex = spanRect.index;
+          merged.gridColSpan = spanRect.colSpan;
+          merged.gridRowSpan = spanRect.rowSpan;
+          merged.x = spanRect.x;
+          merged.y = spanRect.y;
+          merged.width = spanRect.width;
+          merged.height = spanRect.height;
+        }
+      } else {
+        merged.parentGridId = props.parentGridId;
+        merged.gridSlotIndex = props.gridSlotIndex;
+        merged.gridColSpan = props.gridColSpan;
+        merged.gridRowSpan = props.gridRowSpan;
+        merged.x = props.x;
+        merged.y = props.y;
+        merged.width = props.width;
+        merged.height = props.height;
+      }
+    }
+
+    fixCrossLayerParentGrid(merged, props, byId, allFlat);
+
+    n.props = merged;
+    byId.set(merged.id, merged);
+  });
+}

package/src/panel/viewportZoom.ts

@@ -0,0 +1,26 @@
+export type ViewportZoom = {
+  x: number;
+  y: number;
+};
+
+export function uniformViewportZoom(zoom: ViewportZoom): number {
+  return Math.min(zoom.x, zoom.y);
+}
+
+export function clampViewportZoom(value: number): number {
+  return Math.min(4, Math.max(0.25, value));
+}
+
+export function clampViewportZoomXY(zoom: ViewportZoom): ViewportZoom {
+  return { x: clampViewportZoom(zoom.x), y: clampViewportZoom(zoom.y) };
+}
+
+export function scaleViewportZoom(
+  zoom: ViewportZoom,
+  factor: number
+): ViewportZoom {
+  return clampViewportZoomXY({
+    x: zoom.x * factor,
+    y: zoom.y * factor,
+  });
+}

package/src/tailwind.css

@@ -0,0 +1,58 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Global themed scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) hsl(var(--muted) / 0.4);
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: hsl(var(--muted) / 0.4);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 9999px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--foreground) / 0.45);
+}
+
+/* Moveable：仅角点控制柄固定屏幕像素；勿作用于 moveable-direction 边线 */
+.rv-moveable-layer {
+  --moveable-color: #1990ff;
+}
+
+.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;
+}
+
+.rv-moveable-layer .moveable-line.moveable-direction {
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+}
+
+.rv-moveable-layer .moveable-line {
+  --moveable-color: #1990ff;
+}
+
+.rv-moveable-layer .moveable-around-control {
+  background: transparent !important;
+}

package/src/types/react-infinite-viewer.d.ts

@@ -0,0 +1,39 @@
+declare module "react-infinite-viewer" {
+  import * as React from "react";
+
+  export type InfiniteViewerOnScroll = {
+    scrollLeft: number;
+    scrollTop: number;
+    zoomX: number;
+    zoomY: number;
+  };
+
+  export type InfiniteViewerOnDragStart = {
+    inputEvent?: any;
+    target?: Element;
+    stop?: () => void;
+  };
+
+  export type InfiniteViewerProps = React.PropsWithChildren<{
+    className?: string;
+    margin?: number;
+    threshold?: number;
+    rangeX?: number[];
+    rangeY?: number[];
+    useMouseDrag?: boolean;
+    useWheelScroll?: boolean;
+    preventWheelClick?: boolean;
+    displayVerticalScroll?: boolean;
+    displayHorizontalScroll?: boolean;
+    onScroll?: (e: InfiniteViewerOnScroll) => void;
+    onDragStart?: (e: InfiniteViewerOnDragStart) => boolean | void;
+    onDragEnd?: (e: any) => void;
+  }>;
+
+  const InfiniteViewer: React.ForwardRefExoticComponent<
+    InfiniteViewerProps & React.RefAttributes<any>
+  >;
+
+  export default InfiniteViewer;
+}
+

package/tailwind.config.ts

@@ -0,0 +1,7 @@
+import preset from "../tailwind/src/preset";
+
+export default {
+  presets: [preset],
+  content: ["./src/**/*.{ts,tsx}"],
+};
+

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@arronqzy/typescript-config/react-library.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@arronqzy/blueprint-dsl": ["../blueprint-dsl/src/index.ts"],
+      "@arronqzy/react-blueprint": ["../react-blueprint/index.ts"],
+      "@arronqzy/ui": ["../ui/index.ts"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules"]
+}