@arronqzy/vue-view 0.1.4 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -23,10 +23,11 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.5",
-    "@arronqzy/vue-blueprint": "0.1.3",
-    "@arronqzy/view-table": "0.1.3",
-    "@arronqzy/i18n": "0.1.3",
+    "@arronqzy/blueprint-dsl": "1.0.7",
+    "@arronqzy/i18n": "0.1.6",
+    "@arronqzy/view-scene3d": "0.1.1",
+    "@arronqzy/view-table": "0.1.4",
+    "@arronqzy/vue-blueprint": "0.1.5",
     "@arronqzy/vue-rx-store": "0.1.2",
     "@arronqzy/rx-store": "1.0.4"
   },

package/src/panel/VueViewOnlinePreview.vue

@@ -8,8 +8,11 @@ import {
   listBlueprintLibrary,
   useBlueprintPageLifecycle,
   type BlueprintLibraryListItem,
+  resolveRunnableNodeType,
+  resolveViewElementIds,
 } from "@arronqzy/vue-blueprint";
 import type { LibraryBlueprintResolver, PageLifecyclePhase } from "@arronqzy/blueprint-dsl";
+import { collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE } from "@arronqzy/blueprint-dsl";
 import type { State } from "@arronqzy/rx-store";
 import ElementsLayer from "./components/ElementsLayer.vue";
 import {
@@ -31,6 +34,7 @@ import {
   parsePanelLayers,
   resolvePreviewLayerElements,
 } from "./utils/panelStateIO";
+import { applyPreviewSceneFill, readOutputScale } from "./utils/outputScale";
 
 const { t, locale } = useI18n();
 
@@ -49,6 +53,8 @@ const blueprintLibraryItems = ref<BlueprintLibraryListItem[]>([]);
 const layoutRevision = ref(0);
 const layoutReady = ref(false);
 const sceneRef = ref<HTMLDivElement | null>(null);
+const outputScale = ref(readOutputScale());
+const fillScale = ref({ scaleX: 1, scaleY: 1 });
 
 const layers = computed(() => (panelState.value ? parsePanelLayers(panelState.value) : []));
 const activeLayerId = computed(() =>
@@ -146,24 +152,30 @@ const scopedLayerElements = computed(() => {
 const sceneBounds = computed(() => computePanelSceneBounds(scopedLayerElements.value));
 
 const displayElements = computed(() =>
-  scopedLayerElements.value.map((el) => ({
-    ...el,
-    x: el.x - sceneBounds.value.minX,
-    y: el.y - sceneBounds.value.minY,
-  }))
+  scopedLayerElements.value.map((el) => {
+    const x = el.x - sceneBounds.value.minX;
+    const y = el.y - sceneBounds.value.minY;
+    if (outputScale.value) return { ...el, x, y };
+    return {
+      ...el,
+      x: x * fillScale.value.scaleX,
+      y: y * fillScale.value.scaleY,
+      width: el.width * fillScale.value.scaleX,
+      height: el.height * fillScale.value.scaleY,
+    };
+  })
 );
 
 function applySceneFit() {
-  const scene = sceneRef.value;
-  if (!scene) return;
-  const vw = window.innerWidth || 1;
-  const vh = window.innerHeight || 1;
-  const sw = Math.max(1, sceneBounds.value.width);
-  const sh = Math.max(1, sceneBounds.value.height);
-  const scaleX = vw / sw;
-  const scaleY = vh / sh;
-  if (!Number.isFinite(scaleX) || !Number.isFinite(scaleY)) return;
-  scene.style.transform = `scale(${scaleX}, ${scaleY})`;
+  const enabled = readOutputScale();
+  outputScale.value = enabled;
+  const fill = applyPreviewSceneFill(
+    sceneRef.value,
+    sceneBounds.value.width,
+    sceneBounds.value.height,
+    enabled
+  );
+  fillScale.value = { scaleX: fill.scaleX, scaleY: fill.scaleY };
   layoutRevision.value += 1;
   notifyPreviewLayoutChanged();
 }
@@ -195,7 +207,7 @@ const lifecycleReady = computed(
   () => Boolean(panelState.value && layerElements.value.length > 0 && layoutReady.value)
 );
 
-const { triggerBlueprintNode } = useBlueprintPageLifecycle({
+const { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases } = useBlueprintPageLifecycle({
   graph: blueprintGraph,
   active: ref(true),
   enabled: lifecycleReady,
@@ -211,6 +223,22 @@ const { triggerBlueprintNode } = useBlueprintPageLifecycle({
   onViewScopeUpdate: handleViewScopeUpdate,
 });
 
+const boundViewEventTypes = computed(() =>
+  collectArmedViewEventBindings(
+    blueprintGraph.value.document.nodes.map((node) => ({
+      id: node.id,
+      nodeType: resolveRunnableNodeType(node),
+      lifecyclePhase: node.lifecyclePhase,
+      viewElementIds: resolveViewElementIds(node),
+      eventConfig: node.eventConfig,
+    })),
+    blueprintGraph.value.document.edges,
+    EVENT_NODE_TYPE,
+    LIFECYCLE_NODE_TYPE,
+    firedLifecyclePhases.value
+  )
+);
+
 onMounted(() => {
   const onResize = () => applySceneFit();
   window.addEventListener("resize", onResize);
@@ -231,8 +259,9 @@ function noopSelect() {}
 
   <div
     v-else-if="!panelState"
-    class="flex min-h-screen w-full items-center justify-center bg-white text-sm text-gray-600"
+    class="flex min-h-screen w-full flex-col items-center justify-center gap-3 bg-white text-sm text-gray-600"
   >
+    <div class="h-9 w-9 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700" />
     {{ t("panel.workspace.previewLoading") }}
   </div>
 
@@ -258,9 +287,10 @@ function noopSelect() {}
         id="preview-scene"
         class="relative shrink-0 origin-top-left"
         :style="{
-          width: `${sceneBounds.width}px`,
-          height: `${sceneBounds.height}px`,
+          width: `${outputScale ? sceneBounds.width : sceneBounds.width * fillScale.scaleX}px`,
+          height: `${outputScale ? sceneBounds.height : sceneBounds.height * fillScale.scaleY}px`,
           transformOrigin: 'left top',
+          transform: outputScale ? `scale(${fillScale.scaleX}, ${fillScale.scaleY})` : 'none',
         }"
       >
         <ElementsLayer
@@ -276,6 +306,12 @@ function noopSelect() {}
               void triggerBlueprintNode(payload.blueprintNodeId, payload);
             }
           "
+          :bound-view-event-types="boundViewEventTypes"
+          :on-view-ui-event="
+            (payload) => {
+              void emitViewEvent(payload);
+            }
+          "
           @select-ids="noopSelect"
         />
       </div>

package/src/panel/VueViewPanel.vue

@@ -24,8 +24,10 @@ import {
   type BlueprintGraphNode,
   type BlueprintLibraryListItem,
   type BlueprintMetaDraft,
+  resolveRunnableNodeType,
+  resolveViewElementIds,
 } from "@arronqzy/vue-blueprint";
-import type { LibraryBlueprintResolver } from "@arronqzy/blueprint-dsl";
+import { collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE, type LibraryBlueprintResolver } from "@arronqzy/blueprint-dsl";
 import {
   Button,
   Checkbox,
@@ -65,6 +67,8 @@ import {
 import { useRafThrottledScroll } from "./hooks/useRafThrottledScroll";
 import { useI18n } from "@arronqzy/i18n/vue";
 import { getPanelMessages } from "./constants/messages";
+import BusyOverlay from "./components/BusyOverlay.vue";
+import { assertFileSize, parseJsonText, runBusyTask } from "./utils/async-work";
 import "../tailwind.css";
 
 const { t, locale, setLocale } = useI18n();
@@ -400,7 +404,7 @@ const workspaceProjects = useWorkspaceProjects({
   onProjectApplied: handleWorkspaceProjectApplied,
 });
 
-const { triggerBlueprintNode } = useBlueprintPageLifecycle({
+const { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases } = useBlueprintPageLifecycle({
   graph: blueprintGraph,
   active: blueprintOpen,
   bootKey: computed(() => workspaceProjects.activeProjectId.value ?? undefined),
@@ -412,6 +416,22 @@ const { triggerBlueprintNode } = useBlueprintPageLifecycle({
   onViewScopeUpdate: handleViewScopeUpdate,
 });
 
+const boundViewEventTypes = computed(() =>
+  collectArmedViewEventBindings(
+    blueprintGraph.value.document.nodes.map((node) => ({
+      id: node.id,
+      nodeType: resolveRunnableNodeType(node),
+      lifecyclePhase: node.lifecyclePhase,
+      viewElementIds: resolveViewElementIds(node),
+      eventConfig: node.eventConfig,
+    })),
+    blueprintGraph.value.document.edges,
+    EVENT_NODE_TYPE,
+    LIFECYCLE_NODE_TYPE,
+    firedLifecyclePhases.value
+  )
+);
+
 const blueprintNodeOptions = computed(() =>
   blueprintGraph.value.document.nodes.map((node) => ({
     id: node.id,
@@ -419,19 +439,21 @@ const blueprintNodeOptions = computed(() =>
   }))
 );
 async function loadBlueprintFromLibrary(id: string) {
-  const record = await getBlueprintLibraryRecord(id);
-  if (!record) {
-    message.error(panelMessages().blueprintNotFound);
-    void refreshBlueprintLibrary();
-    return;
-  }
-  blueprintGraph.value = BlueprintGraph.fromDocument(record.document);
-  blueprintMeta.value = { name: record.name, remark: record.remark ?? "" };
-  activeBlueprintLibraryId.value = record.id;
-  blueprintSyncedDocument.value = record.document;
-  selectedBlueprintNodeId.value = null;
-  configFocus.value = "blueprint";
-  blueprintOpen.value = true;
+  await runBusyTask(t("common.loadingBlueprint"), async () => {
+    const record = await getBlueprintLibraryRecord(id);
+    if (!record) {
+      message.error(panelMessages().blueprintNotFound);
+      void refreshBlueprintLibrary();
+      return;
+    }
+    blueprintGraph.value = BlueprintGraph.fromDocument(record.document);
+    blueprintMeta.value = { name: record.name, remark: record.remark ?? "" };
+    activeBlueprintLibraryId.value = record.id;
+    blueprintSyncedDocument.value = record.document;
+    selectedBlueprintNodeId.value = null;
+    configFocus.value = "blueprint";
+    blueprintOpen.value = true;
+  });
 }
 
 function snapshotWorkspaceBlueprint() {
@@ -462,74 +484,97 @@ async function handleSelectBlueprintLibraryItem(id: string) {
 }
 
 async function syncBlueprintToLibrary() {
-  if (!activeBlueprintLibraryId.value) return;
-  const record = await getBlueprintLibraryRecord(activeBlueprintLibraryId.value);
-  if (!record) return;
-  await putBlueprintLibraryRecord({
-    ...record,
-    document: blueprintGraph.value.document,
-    name: blueprintMeta.value.name,
-    remark: blueprintMeta.value.remark,
+  const libraryId = activeBlueprintLibraryId.value;
+  if (!libraryId) return;
+  await runBusyTask(t("common.syncingBlueprint"), async () => {
+    const record = await getBlueprintLibraryRecord(libraryId);
+    if (!record) return;
+    await putBlueprintLibraryRecord({
+      ...record,
+      document: blueprintGraph.value.document,
+      name: blueprintMeta.value.name,
+      remark: blueprintMeta.value.remark,
+    });
+    blueprintSyncedDocument.value = blueprintGraph.value.document;
+    message.success(panelMessages().blueprintSyncedToLibrary);
+    await refreshBlueprintLibrary();
   });
-  blueprintSyncedDocument.value = blueprintGraph.value.document;
-  message.success(panelMessages().blueprintSyncedToLibrary);
-  await refreshBlueprintLibrary();
 }
 
 async function saveBlueprintToLibrary(meta: BlueprintMetaDraft) {
-  const id = activeBlueprintLibraryId.value ?? createLibraryBlueprintId();
-  const record = buildLibraryRecord({
-    id,
-    document: blueprintGraph.value.document,
-    meta,
-    source: "saved",
+  await runBusyTask(t("common.savingBlueprint"), async () => {
+    const id = activeBlueprintLibraryId.value ?? createLibraryBlueprintId();
+    const record = buildLibraryRecord({
+      id,
+      document: blueprintGraph.value.document,
+      meta,
+      source: "saved",
+    });
+    await putBlueprintLibraryRecord(record);
+    activeBlueprintLibraryId.value = id;
+    blueprintSyncedDocument.value = blueprintGraph.value.document;
+    blueprintMeta.value = meta;
+    await refreshBlueprintLibrary();
+    message.success(panelMessages().blueprintSavedToLibrary);
   });
-  await putBlueprintLibraryRecord(record);
-  activeBlueprintLibraryId.value = id;
-  blueprintSyncedDocument.value = blueprintGraph.value.document;
-  blueprintMeta.value = meta;
-  await refreshBlueprintLibrary();
-  message.success(panelMessages().blueprintSavedToLibrary);
 }
 
 function handleExport() {
-  const data = exportPanelData();
-  const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  const safeName = (productName.value.trim() || "panel")
-    .replace(/[\\/:*?"<>|]/g, "-")
-    .replace(/\s+/g, "-");
-  a.download = `${safeName}-${Date.now()}.json`;
-  a.click();
-  URL.revokeObjectURL(url);
+  void runBusyTask(t("common.exportingPanel"), async () => {
+    const data = exportPanelData();
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    const safeName = (productName.value.trim() || "panel")
+      .replace(/[\\/:*?"<>|]/g, "-")
+      .replace(/\s+/g, "-");
+    a.download = `${safeName}-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  });
 }
 
 async function handleImportFile(file: File) {
-  const text = await file.text();
-  const parsed = JSON.parse(text) as State;
-  const ok = importPanelData(parsed);
-  if (!ok) window.alert(panelMessages().importInvalidFormat);
-  else selectedIds.value = [];
+  try {
+    await runBusyTask(t("common.importingPanel"), async () => {
+      assertFileSize(file, "json");
+      const text = await file.text();
+      const parsed = await parseJsonText<State>(text);
+      const ok = importPanelData(parsed);
+      if (!ok) window.alert(panelMessages().importInvalidFormat);
+      else selectedIds.value = [];
+    });
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : panelMessages().importInvalidFormat);
+  }
 }
 
 function openBlueprintExport() {
-  downloadBlueprintExport(
-    buildBlueprintExportPayload(blueprintGraph.value.document, blueprintMeta.value)
-  );
-  message.success(panelMessages().blueprintExported);
+  void runBusyTask(t("common.exportingPanel"), async () => {
+    downloadBlueprintExport(
+      buildBlueprintExportPayload(blueprintGraph.value.document, blueprintMeta.value)
+    );
+    message.success(panelMessages().blueprintExported);
+  });
 }
 
 async function handleBlueprintImportFile(file: File) {
-  const text = await file.text();
-  const payload = parseBlueprintImportFile(JSON.parse(text) as unknown);
-  const record = libraryRecordFromImport(payload);
-  await putBlueprintLibraryRecord(record);
-  await refreshBlueprintLibrary();
-  if (!activeBlueprintLibraryId.value) snapshotWorkspaceBlueprint();
-  await loadBlueprintFromLibrary(record.id);
-  message.success(panelMessages().blueprintImported);
+  try {
+    await runBusyTask(t("common.importingBlueprint"), async () => {
+      assertFileSize(file, "json");
+      const text = await file.text();
+      const payload = parseBlueprintImportFile(await parseJsonText(text));
+      const record = libraryRecordFromImport(payload);
+      await putBlueprintLibraryRecord(record);
+      await refreshBlueprintLibrary();
+      if (!activeBlueprintLibraryId.value) snapshotWorkspaceBlueprint();
+      await loadBlueprintFromLibrary(record.id);
+      message.success(panelMessages().blueprintImported);
+    });
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : panelMessages().importInvalidFormat);
+  }
 }
 
 async function handleWorkspaceCreateProject() {
@@ -539,6 +584,7 @@ async function handleWorkspaceCreateProject() {
 
 async function handleWorkspaceOpenProject(id: string) {
   try {
+    stopAllClockSchedules();
     clearViewElementScopes();
     await workspaceProjects.handleOpenProject(id);
     selectedIds.value = [];
@@ -662,6 +708,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         :active-project-id="workspaceProjects.activeProjectId.value"
         :active-project-name="workspaceProjects.activeProjectName.value"
         :dirty="workspaceProjects.dirty.value"
+        :previewing-project-ids="workspaceProjects.previewingProjectIds.value"
         @create-project="handleWorkspaceCreateProject"
         @open-project="handleWorkspaceOpenProject"
         @sync-project="handleWorkspaceSyncProject"
@@ -763,6 +810,12 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
                     void triggerBlueprintNode(payload.blueprintNodeId, payload);
                   }
                 "
+                :bound-view-event-types="boundViewEventTypes"
+                :on-view-ui-event="
+                  (payload) => {
+                    void emitViewEvent(payload);
+                  }
+                "
                 @select-ids="selectIds"
               />
               <SelectLayer
@@ -863,6 +916,9 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
           :on-exclude-selected-node="excludeSelectedNode"
           :on-adjust-node-z-order="adjustNodeZOrder"
           :selected-blueprint-node="selectedBlueprintNode"
+          :blueprint-graph-nodes="blueprintGraph.document.nodes"
+          :blueprint-graph-edges="blueprintGraph.document.edges"
+          :blueprint-trace-entries="blueprintDebugSession.entries.value"
           :allow-false-signal-propagation="blueprintGraph.document.allowFalseSignalPropagation"
           :blueprint-library-options="blueprintLibraryOptions"
           :blueprint-node-options="blueprintNodeOptions"
@@ -873,6 +929,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
       </Layout.Sider>
     </Layout>
 
+    <BusyOverlay />
     <input ref="importInputRef" type="file" accept="application/json" class="hidden" @change="async (e) => { const f = (e.target as HTMLInputElement).files?.[0]; (e.target as HTMLInputElement).value = ''; if (f) await handleImportFile(f); }" />
     <input ref="blueprintImportInputRef" type="file" accept="application/json" class="hidden" @change="async (e) => { const f = (e.target as HTMLInputElement).files?.[0]; (e.target as HTMLInputElement).value = ''; if (f) await handleBlueprintImportFile(f); }" />
 

package/src/panel/components/BusyOverlay.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
+import { busyOverlayMessage } from "../utils/async-work";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="busyOverlayMessage"
+      class="fixed inset-0 flex flex-col items-center justify-center gap-3 bg-black/45 px-6"
+      style="z-index: 40000"
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+    >
+      <div class="h-9 w-9 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+      <div class="max-w-sm text-center text-sm text-white">
+        {{ busyOverlayMessage || t("common.loading") }}
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/panel/components/ConfigHintIcon.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "@arronqzy/i18n/vue";
 import { Tooltip } from "ant-design-vue";
 
-const { t, locale } = useI18n();
-withDefaults(
-  defineProps<{
-    label?: string;
-    contentClass?: string;
-    buttonClass?: string;
-  }>(),
-  { label: t("common.hint") }
-);
+const { t } = useI18n();
+const props = defineProps<{
+  label?: string;
+  contentClass?: string;
+  buttonClass?: string;
+}>();
+
+const resolvedLabel = computed(() => props.label || t("common.hint"));
 </script>
 
 <template>
@@ -28,7 +28,7 @@ withDefaults(
         buttonClass ??
         '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="t('common.hintAria', { label })"
+      :aria-label="t('common.hintAria', { label: resolvedLabel })"
     >
       ?
     </button>

package/src/panel/components/ElementsLayer.vue

@@ -15,7 +15,17 @@ import {
   VideoNodeContent,
 } from "./elementsLayerNodes";
 import TableNodeContent from "./table/TableNodeContent.vue";
+import Scene3dNodeContent from "@arronqzy/view-scene3d/vue";
+import { mergeScene3dConfig } from "@arronqzy/view-scene3d";
 import type { TableCellActionHandler } from "./table/TableNodeContent.vue";
+import { comparePanelElementsPaintOrder } from "../utils/gridPlacement";
+import {
+  createViewEventSignal,
+  snapshotDomEvent,
+  snapshotViewEventNode,
+  type ViewEventSignal,
+  type ViewEventType,
+} from "@arronqzy/blueprint-dsl";
 
 const props = withDefaults(
   defineProps<{
@@ -31,6 +41,8 @@ const props = withDefaults(
     previewMode?: boolean;
     previewLayoutKey?: number;
     onTableCellAction?: TableCellActionHandler;
+    boundViewEventTypes?: ReadonlyMap<string, ReadonlySet<ViewEventType>>;
+    onViewUiEvent?: (payload: ViewEventSignal) => void;
   }>(),
   { layerLocked: false, previewMode: false }
 );
@@ -104,6 +116,17 @@ const NodeContent = defineComponent({
       if (el.materialType === "geometry") {
         return h(GeometryNodeContent, { element: el });
       }
+      if (el.materialType === "scene3d") {
+        return h(Scene3dNodeContent, {
+          config: el.scene3d,
+          previewMode: p.previewMode,
+          selected: p.selected,
+          onUpdateConfig: (patch) =>
+            p.updateElement(el.id, {
+              scene3d: mergeScene3dConfig({ ...el.scene3d, ...patch }),
+            }),
+        });
+      }
       if (el.materialType === "image") {
         return h(ImageNodeContent, { element: el });
       }
@@ -119,14 +142,11 @@ const NodeContent = defineComponent({
   },
 });
 
-const sortedElements = computed(() =>
-  [...props.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);
-  })
-);
+const sortedElements = computed(() => {
+  const byId = new Map<string, PanelElement>();
+  for (const el of props.allElements) byId.set(el.id, el);
+  return [...props.elements].sort((a, b) => comparePanelElementsPaintOrder(a, b, byId));
+});
 
 function onSelect(id: string, event: MouseEvent) {
   if (props.previewMode) return;
@@ -141,6 +161,23 @@ function onSelect(id: string, event: MouseEvent) {
   }
   emit("selectIds", [id]);
 }
+
+function emitViewUiEvent(el: PanelElement, eventType: ViewEventType, event: MouseEvent) {
+  if (!props.onViewUiEvent) return;
+  if (!props.boundViewEventTypes?.get(el.id)?.has(eventType)) return;
+  props.onViewUiEvent(
+    createViewEventSignal({
+      eventType,
+      event: snapshotDomEvent(event),
+      node: snapshotViewEventNode(el),
+    })
+  );
+}
+
+function hasViewEvent(el: PanelElement) {
+  const types = props.boundViewEventTypes?.get(el.id);
+  return Boolean(types && types.size > 0 && props.onViewUiEvent);
+}
 </script>
 
 <template>
@@ -151,6 +188,7 @@ function onSelect(id: string, event: MouseEvent) {
       'absolute select-none',
       previewMode ? '' : 'rv-selectable',
       !previewMode && selectedIds.includes(el.id) ? 'ring-2 ring-blue-500/90 ring-offset-0' : '',
+      hasViewEvent(el) ? 'cursor-pointer' : '',
     ]"
     :data-element-id="el.id"
     :style="{
@@ -165,6 +203,11 @@ function onSelect(id: string, event: MouseEvent) {
       ...getNodeVisualStyle(el),
     }"
     @mousedown="onSelect(el.id, $event)"
+    @click="emitViewUiEvent(el, 'click', $event)"
+    @dblclick="emitViewUiEvent(el, 'dblclick', $event)"
+    @contextmenu="emitViewUiEvent(el, 'contextmenu', $event)"
+    @mouseenter="emitViewUiEvent(el, 'mouseenter', $event)"
+    @mouseleave="emitViewUiEvent(el, 'mouseleave', $event)"
   >
     <NodeContent
       :element="el"

package/src/panel/components/MaterialPreview.vue

@@ -106,6 +106,14 @@ const common =
       <polygon points="50,36 54,42 50,48 42,48 38,42 42,36" class="fill-primary/70" />
     </svg>
   </div>
+  <div v-else-if="id === 'scene3d'" :class="common">
+    <svg viewBox="0 0 80 60" class="h-full w-full">
+      <polygon points="40,8 62,22 62,44 40,56 18,44 18,22" class="fill-primary/20 stroke-primary/80" stroke-width="1.5" />
+      <polygon points="40,8 62,22 40,32 18,22" class="fill-primary/45" />
+      <polygon points="40,32 62,22 62,44 40,56" class="fill-primary/30" />
+      <polygon points="40,32 18,22 18,44 40,56" class="fill-primary/55" />
+    </svg>
+  </div>
   <div v-else-if="id === 'reference'" :class="common">
     <div class="absolute inset-2 rounded-md border border-dashed border-primary/70 bg-primary/10" />
     <div class="absolute inset-0 flex items-center justify-center text-[10px] text-primary/80">