@arronqzy/react-view 1.0.12 → 1.0.14

package/src/panel/components/ElementsLayer.tsx

@@ -5,6 +5,17 @@ import type { PanelElement } from "../types";
 import { buildChartOption, CHART_TYPES } from "../utils/chartOptionBuilder";
 import { PREVIEW_LAYOUT_EVENT } from "../utils/panelStateIO";
 import { TableNodeContent, type TableCellActionHandler } from "./table/TableNodeContent";
+import { comparePanelElementsPaintOrder } from "../utils/gridPlacement";
+import { cssTextLineHeight, cssTextAlignStyle } from "../utils/panelElementDefaults";
+import { mergeScene3dConfig } from "@arronqzy/view-scene3d";
+import { Scene3dNodeContent } from "@arronqzy/view-scene3d/react";
+import {
+  createViewEventSignal,
+  snapshotDomEvent,
+  snapshotViewEventNode,
+  type ViewEventSignal,
+  type ViewEventType,
+} from "@arronqzy/blueprint-dsl";
 
 export type ElementsLayerProps = {
   elements: PanelElement[];
@@ -22,6 +33,8 @@ export type ElementsLayerProps = {
   /** 预览布局变更时递增，用于触发图表/画布重绘 */
   previewLayoutKey?: number;
   onTableCellAction?: TableCellActionHandler;
+  boundViewEventTypes?: ReadonlyMap<string, ReadonlySet<ViewEventType>>;
+  onViewUiEvent?: (payload: ViewEventSignal) => void;
 };
 
 function TextNodeContent({
@@ -41,8 +54,8 @@ function TextNodeContent({
     fontSize: element.textFontSize ? `${element.textFontSize}px` : undefined,
     fontWeight: element.textFontWeight || undefined,
     color: element.textColor || undefined,
-    lineHeight: element.textLineHeight ? String(element.textLineHeight) : undefined,
-    textAlign: element.textAlign ?? "left",
+    lineHeight: cssTextLineHeight(element.textLineHeight),
+    ...cssTextAlignStyle(element.textAlign),
   };
 
   useEffect(() => {
@@ -56,7 +69,8 @@ function TextNodeContent({
   return (
     <div
       ref={ref}
-      className="h-full w-full overflow-auto break-words p-2 text-sm leading-relaxed outline-none"
+      data-panel-user-text=""
+      className="h-full w-full overflow-auto break-words p-2 outline-none"
       style={textStyle}
       contentEditable={editable}
       suppressContentEditableWarning
@@ -99,34 +113,23 @@ function GridNodeContent({
     });
     return set;
   }, [allElements, cols, element.id, element.layerId, rows]);
-  const occupiedBlocks = useMemo(() => {
-    return allElements
-      .filter(
-        (el) =>
-          el.parentGridId === element.id &&
-          el.layerId === element.layerId &&
-          el.gridSlotIndex !== undefined
-      )
-      .map((el) => {
-        const start = Math.max(0, Math.floor(el.gridSlotIndex ?? 0));
-        const baseRow = Math.floor(start / cols);
-        const baseCol = start % cols;
-        const rowSpan = Math.max(1, Math.min(rows - baseRow, Math.floor(el.gridRowSpan ?? 1)));
-        const colSpan = Math.max(1, Math.min(cols - baseCol, Math.floor(el.gridColSpan ?? 1)));
-        return {
-          id: el.id,
-          rowStart: baseRow + 1,
-          rowEnd: baseRow + rowSpan + 1,
-          colStart: baseCol + 1,
-          colEnd: baseCol + colSpan + 1,
-        };
-      });
-  }, [allElements, cols, element.id, element.layerId, rows]);
   if (previewMode) {
     return <div className="relative h-full w-full" />;
   }
+  const total = rows * cols;
+  const emptyCount = total - occupied.size;
   return (
-    <div className="relative h-full w-full">
+    <div
+      className="pointer-events-none relative h-full w-full overflow-hidden rounded-md"
+      style={
+        emptyCount > 0
+          ? {
+              border: "2px dashed rgba(14, 165, 233, 0.7)",
+              background: "rgba(14, 165, 233, 0.08)",
+            }
+          : undefined
+      }
+    >
       <div
         className="h-full w-full"
         style={{
@@ -138,41 +141,41 @@ function GridNodeContent({
           boxSizing: "border-box",
         }}
       >
-        {Array.from({ length: rows * cols }).map((_, idx) => (
-          <div
-            key={idx}
-            className={[
-              "rounded border border-dashed",
-              occupied.has(idx)
-                ? "border-primary/70 bg-primary/10"
-                : "border-border/60 bg-muted/20",
-            ].join(" ")}
-            title={occupied.has(idx) ? t("panel.config.slotOccupied", { n: idx + 1 }) : t("panel.config.slotEmpty", { n: idx + 1 })}
-          />
-        ))}
-      </div>
-      <div
-        className="pointer-events-none absolute inset-0"
-        style={{
-          display: "grid",
-          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
-          gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
-          gap: `${gap}px`,
-          padding: `${padding}px`,
-          boxSizing: "border-box",
-        }}
-      >
-        {occupiedBlocks.map((block) => (
-          <div
-            key={block.id}
-            className="rounded border border-primary/70 bg-primary/20"
-            style={{
-              gridColumn: `${block.colStart} / ${block.colEnd}`,
-              gridRow: `${block.rowStart} / ${block.rowEnd}`,
-            }}
-          />
-        ))}
+        {Array.from({ length: total }).map((_, idx) => {
+          const filled = occupied.has(idx);
+          return (
+            <div
+              key={idx}
+              className={
+                filled
+                  ? "pointer-events-none"
+                  : "pointer-events-auto flex flex-col items-center justify-center gap-0.5 rounded-md text-[11px] font-semibold"
+              }
+              style={
+                filled
+                  ? undefined
+                  : {
+                      border: "2px dashed rgba(2, 132, 199, 0.85)",
+                      background: "rgba(186, 230, 253, 0.72)",
+                      color: "rgba(3, 105, 161, 0.95)",
+                    }
+              }
+              title={
+                filled
+                  ? t("panel.config.slotOccupied", { n: idx + 1 })
+                  : t("panel.config.slotEmpty", { n: idx + 1 })
+              }
+            >
+              {filled ? null : <span>{idx + 1}</span>}
+            </div>
+          );
+        })}
       </div>
+      {occupied.size === 0 ? (
+        <div className="pointer-events-none absolute bottom-1.5 left-0 right-0 text-center text-[11px] font-medium text-sky-800/90">
+          {t("panel.config.gridDropHint")}
+        </div>
+      ) : null}
     </div>
   );
 }
@@ -789,6 +792,8 @@ function ReferenceNodeContent({
                 />
               ) : node.materialType === "geometry" ? (
                 <GeometryNodeContent element={node} />
+              ) : node.materialType === "scene3d" ? (
+                <Scene3dNodeContent config={node.scene3d} previewMode />
               ) : node.materialType === "table" ? (
                 <TableNodeContent element={node} interactive={false} />
               ) : (
@@ -812,19 +817,34 @@ export const ElementsLayer = React.memo(function ElementsLayer({
   previewMode = false,
   previewLayoutKey,
   onTableCellAction,
+  boundViewEventTypes,
+  onViewUiEvent,
 }: ElementsLayerProps) {
+  const emitViewUiEvent = useCallback(
+    (el: PanelElement, eventType: ViewEventType, domEvent: React.MouseEvent | MouseEvent) => {
+      if (!onViewUiEvent) return;
+      if (!boundViewEventTypes?.get(el.id)?.has(eventType)) return;
+      onViewUiEvent(
+        createViewEventSignal({
+          eventType,
+          event: snapshotDomEvent(domEvent),
+          node: snapshotViewEventNode(el),
+        })
+      );
+    },
+    [boundViewEventTypes, onViewUiEvent]
+  );
   const sortedElements = useMemo(() => {
-    return [...elements].sort((a, b) => {
-      const za = a.zIndex ?? 1;
-      const zb = b.zIndex ?? 1;
-      if (za !== zb) return za - zb;
-      return a.id.localeCompare(b.id);
-    });
-  }, [elements]);
+    const byId = new Map<string, PanelElement>();
+    for (const el of allElements) byId.set(el.id, el);
+    return [...elements].sort((a, b) => comparePanelElementsPaintOrder(a, b, byId));
+  }, [allElements, elements]);
   return (
     <>
       {sortedElements.map((el) => {
         const isSelected = selectedIds.includes(el.id);
+        const boundTypes = boundViewEventTypes?.get(el.id);
+        const hasViewEvent = Boolean(boundTypes && boundTypes.size > 0 && onViewUiEvent);
         return (
           <div
             key={el.id}
@@ -832,10 +852,16 @@ export const ElementsLayer = React.memo(function ElementsLayer({
               "absolute select-none",
               previewMode ? "" : "rv-selectable",
               !previewMode && isSelected ? "ring-2 ring-blue-500/90 ring-offset-0" : "",
+              hasViewEvent ? "cursor-pointer" : "",
             ].join(" ")}
             data-element-id={el.id}
             onMouseDown={(e) => {
               if (previewMode) return;
+              const target = e.target as HTMLElement | null;
+              if (target?.closest("[data-scene3d-orbit-active='true']")) {
+                e.stopPropagation();
+                return;
+              }
               if (e.button !== 0) return;
               // 单击选中（与 Selecto 的框选互补）
               if (e.shiftKey) {
@@ -848,6 +874,11 @@ export const ElementsLayer = React.memo(function ElementsLayer({
                 onSelectIds([el.id]);
               }
             }}
+            onClick={(e) => emitViewUiEvent(el, "click", e)}
+            onDoubleClick={(e) => emitViewUiEvent(el, "dblclick", e)}
+            onContextMenu={(e) => emitViewUiEvent(el, "contextmenu", e)}
+            onMouseEnter={(e) => emitViewUiEvent(el, "mouseenter", e)}
+            onMouseLeave={(e) => emitViewUiEvent(el, "mouseleave", e)}
             style={{
               left: el.x,
               top: el.y,
@@ -888,6 +919,17 @@ export const ElementsLayer = React.memo(function ElementsLayer({
               <VideoNodeContent element={el} selected={isSelected} />
             ) : el.materialType === "geometry" ? (
               <GeometryNodeContent element={el} />
+            ) : el.materialType === "scene3d" ? (
+              <Scene3dNodeContent
+                config={el.scene3d}
+                previewMode={previewMode}
+                selected={isSelected}
+                updateConfig={(patch) =>
+                  updateElement(el.id, {
+                    scene3d: mergeScene3dConfig({ ...el.scene3d, ...patch }),
+                  })
+                }
+              />
             ) : el.materialType === "image" ? (
               <ImageNodeContent element={el} />
             ) : el.materialType === "table" ? (

package/src/panel/components/MaterialSidebar.tsx

@@ -68,6 +68,7 @@ const MATERIAL_LABEL_KEYS: Record<string, string> = {
   audio: "panel.material.audio",
   reference: "panel.material.reference",
   geometry: "panel.material.geometry",
+  scene3d: "panel.material.scene3d",
   table: "panel.material.table",
 };
 
@@ -298,6 +299,19 @@ function MaterialPreview({ id }: { id: string }) {
     );
   }
 
+  if (id === "scene3d") {
+    return (
+      <div className={common}>
+        <svg viewBox="0 0 80 60" className="h-full w-full">
+          <polygon points="40,8 62,22 62,44 40,56 18,44 18,22" className="fill-primary/20 stroke-primary/80" strokeWidth="1.5" />
+          <polygon points="40,8 62,22 40,32 18,22" className="fill-primary/45" />
+          <polygon points="40,32 62,22 62,44 40,56" className="fill-primary/30" />
+          <polygon points="40,32 18,22 18,44 40,56" className="fill-primary/55" />
+        </svg>
+      </div>
+    );
+  }
+
   if (id === "reference") {
     return (
       <div className={common}>
@@ -387,6 +401,7 @@ function getDefaultCategories(t: (key: string) => string): MaterialCategory[] {
         { id: "text", title: t("panel.material.text") },
         { id: "table", title: t("panel.material.table") },
         { id: "geometry", title: t("panel.material.geometry") },
+        { id: "scene3d", title: t("panel.material.scene3d") },
         { id: "grid", title: t("panel.material.grid") },
         { id: "image", title: t("panel.material.image") },
         { id: "reference", title: t("panel.material.reference") },

package/src/panel/components/MoveableLayer.tsx

@@ -497,6 +497,10 @@ export function MoveableLayer({
       throttleResize={0}
       throttleRotate={0}
       onDragStart={(e: any) => {
+        if ((e.target as HTMLElement | null)?.closest("[data-scene3d-orbit-active='true']")) {
+          e.stop?.();
+          return;
+        }
         const id = resolveSingleEventId(e.target as HTMLElement | null);
         if (!id) return;
         const data = elementsById.get(id);
@@ -528,6 +532,10 @@ export function MoveableLayer({
         e.target.style.top = `${sy + ty}px`;
       }}
       onDragGroupStart={(e: any) => {
+        if ((e.target as HTMLElement | null)?.closest("[data-scene3d-orbit-active='true']")) {
+          e.stop?.();
+          return;
+        }
         e.events.forEach((ev: any) => {
           const id = ev.target ? getId(ev.target) : null;
           if (!id) return;

package/src/panel/components/PanelCanvas.tsx

@@ -172,6 +172,7 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
       if (!viewer) return;
       const target = e.target as HTMLElement | null;
       if (
+        target?.closest("[data-scene3d-orbit-active='true']") ||
         target?.closest("input, textarea, select, [contenteditable='true']") ||
         target?.closest("[role='dialog']")
       ) {
@@ -448,6 +449,8 @@ export const PanelCanvas = React.forwardRef<HTMLDivElement, PanelCanvasProps>(
       }
     };
     const onMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (target?.closest("[data-scene3d-orbit-active='true']")) return;
       // 右键 或 mac 上 ctrl+左键
       const isRightLike = e.button === 2 || (e.button === 0 && e.ctrlKey);
       if (!isRightLike) return;