Linear mode bug fixes (#8054)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8054-Linear-mode-bug-fixes-2e86d73d365081ed8d75d6e2af679f6c)
by [Unito](https://www.unito.io)

src/renderer/extensions/linearMode/LinearControls.vue

@@ -23,6 +23,7 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 
 const commandStore = useCommandStore()
 const executionStore = useExecutionStore()
@@ -55,13 +56,16 @@ function nodeToNodeData(node: LGraphNode) {
       ? undefined
       : {
           iconClass: 'icon-[lucide--image]',
-          label: t('linearMode.dragAndDropImage')
+          label: t('linearMode.dragAndDropImage'),
+          onClick: () => node.widgets?.[1]?.callback?.(undefined)
         }
   const nodeData = extractVueNodeData(node)
   for (const widget of nodeData.widgets ?? []) widget.slotMetadata = undefined
 
   return {
     ...nodeData,
+    //note lastNodeErrors uses exeuctionid, node.id is execution for root
+    hasErrors: !!executionStore.lastNodeErrors?.[node.id],
 
     dropIndicator,
     onDragDrop: node.onDragDrop,
@@ -69,13 +73,18 @@ function nodeToNodeData(node: LGraphNode) {
   }
 }
 const partitionedNodes = computed(() => {
-  return partition(
+  const parts = partition(
     graphNodes.value
       .filter((node) => node.mode === 0 && node.widgets?.length)
       .map(nodeToNodeData)
       .reverse(),
     (node) => ['MarkdownNote', 'Note'].includes(node.type)
   )
+  for (const noteNode of parts[0]) {
+    for (const widget of noteNode.widgets ?? [])
+      widget.options = { ...widget.options, read_only: true }
+  }
+  return parts
 })
 
 const batchCountWidget: SimplifiedWidget<number> = {
@@ -165,7 +174,7 @@ defineExpose({ runButtonClick })
       <Popover
         v-if="partitionedNodes[0].length"
         align="start"
-        class="overflow-y-auto overflow-x-clip max-h-(--reka-popover-content-available-height)"
+        class="overflow-y-auto overflow-x-clip max-h-(--reka-popover-content-available-height) z-100"
         :reference="notesTo"
         side="left"
         :to="notesTo"
@@ -217,7 +226,13 @@ defineExpose({ runButtonClick })
           >
             <NodeWidgets
               :node-data
-              class="py-3 gap-y-4 **:[.col-span-2]:grid-cols-1 text-sm **:[.p-floatlabel]:h-35 rounded-lg"
+              :class="
+                cn(
+                  'py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg',
+                  nodeData.hasErrors &&
+                    'ring-2 ring-inset ring-node-stroke-error'
+                )
+              "
               :style="{ background: applyLightThemeColor(nodeData.bgcolor) }"
             />
           </DropZone>

src/renderer/extensions/linearMode/LinearPreview.vue

@@ -2,7 +2,6 @@
 import { computed } from 'vue'
 
 import { downloadFile } from '@/base/common/downloadUtil'
-import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { d, t } from '@/i18n'
@@ -12,6 +11,7 @@ import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { extractWorkflowFromAsset } from '@/platform/workflow/utils/workflowExtractionUtil'
 import ImagePreview from '@/renderer/extensions/linearMode/ImagePreview.vue'
+import Preview3d from '@/renderer/extensions/linearMode/Preview3d.vue'
 import VideoPreview from '@/renderer/extensions/linearMode/VideoPreview.vue'
 import {
   getMediaType,
@@ -172,7 +172,7 @@ async function rerun(e: Event) {
     class="w-full max-w-128 m-auto my-12 overflow-y-auto"
     v-text="selectedOutput!.url"
   />
-  <Load3dViewerContent
+  <Preview3d
     v-else-if="getMediaType(selectedOutput) === '3d'"
     :model-url="selectedOutput!.url"
   />

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -277,6 +277,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
                   'border-2'
               )
             "
+            @click="selectedIndex = [index, key]"
           >
             <i
               :class="

src/renderer/extensions/linearMode/Preview3d.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useTemplateRef, watch } from 'vue'
+
+import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
+import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
+
+const { modelUrl } = defineProps<{
+  modelUrl: string
+}>()
+
+const containerRef = useTemplateRef('containerRef')
+
+const viewer = useLoad3dViewer()
+
+watch([containerRef, () => modelUrl], async () => {
+  if (!containerRef.value || !modelUrl) return
+
+  await viewer.initializeStandaloneViewer(containerRef.value, modelUrl)
+})
+
+//TODO: refactor to add control buttons
+</script>
+<template>
+  <div
+    ref="containerRef"
+    class="relative w-full h-full"
+    @mouseenter="viewer.handleMouseEnter"
+    @mouseleave="viewer.handleMouseLeave"
+    @resize="viewer.handleResize"
+  >
+    <div class="pointer-events-none absolute top-0 left-0 size-full">
+      <AnimationControls
+        v-if="viewer.animations.value && viewer.animations.value.length > 0"
+        v-model:animations="viewer.animations.value"
+        v-model:playing="viewer.playing.value"
+        v-model:selected-speed="viewer.selectedSpeed.value"
+        v-model:selected-animation="viewer.selectedAnimation.value"
+        v-model:animation-progress="viewer.animationProgress.value"
+        v-model:animation-duration="viewer.animationDuration.value"
+        @seek="viewer.handleSeek"
+      />
+    </div>
+  </div>
+</template>