[backport cloud/1.37] linear v2: Simple Mode

packages/design-system/src/css/style.css

@@ -247,6 +247,7 @@
   --inverted-background-hover: var(--color-charcoal-600);
   --warning-background: var(--color-gold-400);
   --warning-background-hover: var(--color-gold-500);
+  --success-background: var(--color-jade-600);
   --border-default: var(--color-smoke-600);
   --border-subtle: var(--color-smoke-400);
   --muted-background: var(--color-smoke-700);
@@ -372,6 +373,7 @@
   --inverted-background-hover: var(--color-smoke-200);
   --warning-background: var(--color-gold-600);
   --warning-background-hover: var(--color-gold-500);
+  --success-background: var(--color-jade-600);
   --border-default: var(--color-charcoal-200);
   --border-subtle: var(--color-charcoal-300);
   --muted-background: var(--color-charcoal-100);
@@ -516,6 +518,7 @@
   --color-inverted-background-hover: var(--inverted-background-hover);
   --color-warning-background: var(--warning-background);
   --color-warning-background-hover: var(--warning-background-hover);
+  --color-success-background: var(--success-background);
   --color-border-default: var(--border-default);
   --color-border-subtle: var(--border-subtle);
   --color-muted-background: var(--muted-background);

src/components/sidebar/ModeToggle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { t } from '@/i18n'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+const canvasStore = useCanvasStore()
+</script>
+<template>
+  <div class="p-1 bg-secondary-background rounded-lg w-10">
+    <Button
+      size="icon"
+      :title="t('linearMode.linearMode')"
+      :variant="canvasStore.linearMode ? 'inverted' : 'secondary'"
+      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+    >
+      <i class="icon-[lucide--panels-top-left]" />
+    </Button>
+    <Button
+      size="icon"
+      :title="t('linearMode.graphMode')"
+      :variant="canvasStore.linearMode ? 'secondary' : 'inverted'"
+      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+    >
+      <i class="icon-[comfy--workflow]" />
+    </Button>
+  </div>
+</template>

src/components/sidebar/SideToolbar.vue

@@ -44,22 +44,25 @@
         <SidebarBottomPanelToggleButton :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
+        <ModeToggle v-if="showLinearToggle" />
       </div>
     </div>
     <HelpCenterPopups :is-small="isSmall" />
   </nav>
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver } from '@vueuse/core'
+import { useResizeObserver, whenever } from '@vueuse/core'
 import { debounce } from 'es-toolkit/compat'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import HelpCenterPopups from '@/components/helpcenter/HelpCenterPopups.vue'
 import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
+import ModeToggle from '@/components/sidebar/ModeToggle.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -84,6 +87,12 @@ const sideToolbarRef = ref<HTMLElement>()
 const topToolbarRef = ref<HTMLElement>()
 const bottomToolbarRef = ref<HTMLElement>()
 
+const showLinearToggle = ref(useFeatureFlags().flags.linearToggleEnabled)
+whenever(
+  () => canvasStore.linearMode,
+  () => (showLinearToggle.value = true)
+)
+
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -1,6 +1,7 @@
 <template>
   <SidebarTabTemplate
     :title="$t('sideToolbar.workflows')"
+    v-bind="$attrs"
     class="workflows-sidebar-tab"
   >
     <template #tool-buttons>

src/components/topbar/WorkflowTab.vue

@@ -16,6 +16,10 @@
     >
       <i class="pi pi-bars" />
     </Button>
+    <i
+      v-else-if="workflowOption.workflow.activeState?.extra?.linearMode"
+      class="icon-[lucide--panels-top-left] bg-primary-background"
+    />
     <span class="workflow-label inline-block max-w-[150px] truncate text-sm">
       {{ workflowOption.workflow.filename }}
     </span>

src/components/ui/Popover.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  PopoverArrow,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger
+} from 'reka-ui'
+
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps<{
+  entries?: { label: string; action?: () => void; icon?: string }[][]
+  icon?: string
+  to?: string | HTMLElement
+}>()
+</script>
+
+<template>
+  <PopoverRoot v-slot="{ close }">
+    <PopoverTrigger as-child>
+      <slot name="button">
+        <Button size="icon">
+          <i :class="icon ?? 'icon-[lucide--ellipsis]'" />
+        </Button>
+      </slot>
+    </PopoverTrigger>
+    <PopoverPortal :to>
+      <PopoverContent
+        side="bottom"
+        :side-offset="5"
+        :collision-padding="10"
+        v-bind="$attrs"
+        class="rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+      >
+        <slot>
+          <div class="flex flex-col p-1">
+            <section
+              v-for="(entryGroup, index) in entries ?? []"
+              :key="index"
+              class="flex flex-col border-b-2 last:border-none border-border-subtle"
+            >
+              <div
+                v-for="{ label, action, icon } in entryGroup"
+                :key="label"
+                :class="
+                  cn(
+                    'flex flex-row gap-4 p-2 rounded-sm my-1',
+                    action &&
+                      'cursor-pointer hover:bg-secondary-background-hover'
+                  )
+                "
+                @click="
+                  () => {
+                    if (!action) return
+                    action()
+                    close()
+                  }
+                "
+              >
+                <i v-if="icon" :class="icon" />
+                {{ label }}
+              </div>
+            </section>
+          </div>
+        </slot>
+        <PopoverArrow class="fill-base-background stroke-border-subtle" />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

src/components/ui/TypeformPopoverButton.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { whenever } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+import Popover from '@/components/ui/Popover.vue'
+import Button from '@/components/ui/button/Button.vue'
+
+defineProps<{
+  dataTfWidget: string
+}>()
+
+const feedbackRef = useTemplateRef('feedbackRef')
+
+whenever(feedbackRef, () => {
+  const scriptEl = document.createElement('script')
+  scriptEl.src = '//embed.typeform.com/next/embed.js'
+  feedbackRef.value?.appendChild(scriptEl)
+})
+</script>
+<template>
+  <Popover>
+    <template #button>
+      <Button variant="inverted" class="rounded-full size-12">
+        <i class="icon-[lucide--circle-question-mark] size-6" />
+      </Button>
+    </template>
+    <div ref="feedbackRef" data-tf-auto-resize :data-tf-widget />
+  </Popover>
+</template>

src/components/ui/ZoomPane.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+
+const zoomPane = useTemplateRef('zoomPane')
+
+const zoom = ref(1.0)
+const panX = ref(0.0)
+const panY = ref(0.0)
+
+function handleWheel(e: WheelEvent) {
+  const zoomPaneEl = zoomPane.value
+  if (!zoomPaneEl) return
+
+  zoom.value -= e.deltaY
+  const { x, y, width, height } = zoomPaneEl.getBoundingClientRect()
+  const offsetX = e.clientX - x - width / 2
+  const offsetY = e.clientY - y - height / 2
+  const scaler = 1.1 ** (e.deltaY / -30)
+
+  panY.value = panY.value * scaler - offsetY * (scaler - 1)
+  panX.value = panX.value * scaler - offsetX * (scaler - 1)
+}
+
+let dragging = false
+function handleDown(e: PointerEvent) {
+  if (e.button !== 0) return
+
+  const zoomPaneEl = zoomPane.value
+  if (!zoomPaneEl) return
+  zoomPaneEl.parentElement?.focus()
+
+  zoomPaneEl.setPointerCapture(e.pointerId)
+  dragging = true
+}
+function handleMove(e: PointerEvent) {
+  if (!dragging) return
+  panX.value += e.movementX
+  panY.value += e.movementY
+}
+
+const transform = computed(() => {
+  const scale = 1.1 ** (zoom.value / 30)
+  const matrix = [scale, 0, 0, scale, panX.value, panY.value]
+  return `matrix(${matrix.join(',')})`
+})
+</script>
+<template>
+  <div
+    ref="zoomPane"
+    class="contain-size flex place-content-center"
+    @wheel="handleWheel"
+    @pointerdown.prevent="handleDown"
+    @pointermove="handleMove"
+    @pointerup="dragging = false"
+    @pointercancel="dragging = false"
+  >
+    <slot :style="{ transform }" />
+  </div>
+</template>