fix: layer editor UX and review follow-ups

Author: jtydhr88

src/locales/en/main.json

@@ -1290,6 +1290,7 @@
     "title": "Compositor",
     "webglUnavailable": "WebGL is unavailable - the canvas cannot render",
     "loadFailed": "Failed to load layers",
+    "needsTwoImages": "The layer editor needs at least two output images",
     "layersFailedToLoad": "One layer failed to load | {count} layers failed to load",
     "selectTool": "Select",
     "handTool": "Hand",

src/renderer/extensions/compositor/components/WidgetCompositor.test.ts

@@ -0,0 +1,83 @@
+import { render, screen } from '@testing-library/vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { toNodeId } from '@/types/nodeId'
+
+import {
+  clearCompositorLayers,
+  setCompositorLayers
+} from '../composables/useCompositorLayers'
+import WidgetCompositor from './WidgetCompositor.vue'
+
+const { getNodeById } = vi.hoisted(() => ({
+  getNodeById: vi.fn<() => unknown>(() => undefined)
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: { canvas: { graph: { getNodeById } } }
+}))
+vi.mock('@/stores/nodeOutputStore', () => ({
+  useNodeOutputStore: () => ({
+    getNodeImageUrls: () => undefined,
+    nodeOutputs: {},
+    nodePreviewImages: {}
+  })
+}))
+vi.mock(
+  '@/renderer/extensions/compositor/composables/useCompositorEditor',
+  () => ({
+    useCompositorEditor: () => ({ openCompositorEditor: vi.fn() })
+  })
+)
+vi.mock(
+  '@/renderer/extensions/compositor/composables/useCompositorPsdDownload',
+  () => ({
+    useCompositorPsdDownload: () => ({
+      exporting: ref(false),
+      downloadPsd: vi.fn()
+    })
+  })
+)
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key })
+}))
+
+const nodeId = toNodeId(9)
+const graphNode = { id: nodeId, graph: null } as unknown as LGraphNode
+
+function renderWidget() {
+  return render(WidgetCompositor, {
+    props: { nodeId },
+    global: { stubs: { Button: { template: '<button v-bind="$attrs" />' } } }
+  })
+}
+
+describe('WidgetCompositor', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    clearCompositorLayers(graphNode)
+    getNodeById.mockReturnValue(undefined)
+  })
+
+  it('renders the empty state when the node is not in the graph (search preview)', () => {
+    renderWidget()
+
+    expect(screen.getByTestId('compositor-empty')).toBeTruthy()
+    const open = screen.getByTestId('compositor-open-button')
+    expect(open.hasAttribute('disabled')).toBe(true)
+  })
+
+  it('enables opening once the graph node exists with cached layers', () => {
+    getNodeById.mockReturnValue(graphNode)
+    setCompositorLayers(graphNode, [
+      { filename: 'a.png', subfolder: '', type: 'temp' }
+    ])
+
+    renderWidget()
+
+    const open = screen.getByTestId('compositor-open-button')
+    expect(open.hasAttribute('disabled')).toBe(false)
+  })
+})

src/renderer/extensions/compositor/components/WidgetCompositor.vue

@@ -93,7 +93,7 @@ const outputUrl = ref<string | null>(null)
 
 const litegraphNode = computed(() => {
   if (!nodeId || !app.canvas.graph) return null
-  return app.canvas.graph.getNodeById(nodeId)
+  return app.canvas.graph.getNodeById(nodeId) ?? null
 })
 
 function updateOutputUrl(): void {
@@ -125,7 +125,7 @@ const dimensionsLabel = computed(() =>
 
 const canOpen = computed(() => {
   const node = litegraphNode.value
-  return node !== null && hasCompositorLayers(node)
+  return !!node && hasCompositorLayers(node)
 })
 
 function onPreviewLoad(event: Event): void {

src/renderer/extensions/layerEditor/components/LayerEditorCanvas.vue

@@ -3,7 +3,7 @@
     ref="viewportRef"
     tabindex="0"
     data-testid="layer-editor-viewport"
-    class="relative min-h-0 min-w-0 flex-1 touch-none overflow-hidden bg-base-background outline-none"
+    class="focus-visible:ring-ring relative min-h-0 min-w-0 flex-1 touch-none overflow-hidden bg-base-background outline-none focus-visible:ring-1"
     :style="{ cursor: viewportCursor }"
     @pointerdown="session.onPointerDown"
     @pointermove="session.onPointerMove"
@@ -67,7 +67,9 @@ const checkerboardStyle = {
 }
 
 let firstLayout = true
-useResizeObserver(viewportRef, () => {
+useResizeObserver(viewportRef, (entries) => {
+  const rect = entries[0]?.contentRect
+  if (!rect?.width || !rect?.height) return
   if (firstLayout) {
     firstLayout = false
     session.fitView()

src/renderer/extensions/layerEditor/components/LayerPanel.vue

@@ -12,9 +12,14 @@
       <div
         v-for="node in rows"
         :key="node.id"
-        :class="rowClass(isRowSelected(node.id))"
+        :class="cn(rowClass(isRowSelected(node.id)), dropHintClass(node.id))"
         data-testid="layer-panel-row"
+        :draggable="renamingId !== node.id"
         @click="onRowClick(node.id, $event)"
+        @dragstart="onRowDragStart(node.id, $event)"
+        @dragover="onRowDragOver(node.id, $event)"
+        @drop="onRowDrop(node.id, $event)"
+        @dragend="endDrag"
       >
         <button
           :class="eyeButtonClass(node.visible)"
@@ -34,7 +39,7 @@
           <input
             v-if="renamingId === node.id"
             :ref="focusInput"
-            class="min-w-0 rounded-sm border border-border-default bg-base-background px-1 text-xs text-base-foreground"
+            class="min-w-0 rounded-sm border border-border-default bg-base-background px-1 text-xs text-base-foreground select-text"
             :value="node.name"
             @blur="commitRename(node.id, $event)"
             @keydown.enter="commitRename(node.id, $event)"
@@ -115,6 +120,11 @@ import { computed, ref, watch } from 'vue'
 import type { ComponentPublicInstance } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { LayerDropPos } from '@/renderer/extensions/layerEditor/composables/layerPanelDnd'
+import {
+  dropPositionFor,
+  reorderDropIndex
+} from '@/renderer/extensions/layerEditor/composables/layerPanelDnd'
 import { DEFAULT_BACKGROUND_COLOR } from '@/renderer/extensions/layerEditor/composables/useLayerEditorSession'
 import type { LayerEditorSession } from '@/renderer/extensions/layerEditor/composables/useLayerEditorSession'
 import type {
@@ -167,7 +177,7 @@ function isRowSelected(id: string): boolean {
 
 function rowClass(selected: boolean, extra?: string): string {
   return cn(
-    'group flex cursor-pointer items-center gap-2 border-border-default px-2 py-1.5',
+    'group flex cursor-pointer items-center gap-2 border-border-default px-2 py-1.5 select-none',
     'hover:bg-secondary-background-hover',
     selected && 'bg-secondary-background-selected',
     extra
@@ -188,6 +198,60 @@ function eyeIconClass(visible: boolean): string {
   )
 }
 
+const dragId = ref<string | null>(null)
+const dropHint = ref<{ id: string; pos: LayerDropPos } | null>(null)
+
+function endDrag(): void {
+  dragId.value = null
+  dropHint.value = null
+}
+
+function dropHintClass(id: string): string {
+  const hint = dropHint.value
+  if (hint?.id !== id) return 'relative'
+  return cn(
+    'relative',
+    hint.pos === 'above'
+      ? "before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-base-foreground before:content-['']"
+      : "after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-base-foreground after:content-['']"
+  )
+}
+
+function onRowDragStart(id: string, e: DragEvent): void {
+  dragId.value = id
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', id)
+  }
+}
+
+function onRowDragOver(id: string, e: DragEvent): void {
+  if (!dragId.value || dragId.value === id) return
+  e.preventDefault()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+  const ratio = rect.height > 0 ? (e.clientY - rect.top) / rect.height : 0.5
+  const pos = dropPositionFor(ratio)
+  if (dropHint.value?.id !== id || dropHint.value?.pos !== pos)
+    dropHint.value = { id, pos }
+}
+
+function onRowDrop(id: string, e: DragEvent): void {
+  e.preventDefault()
+  const dragged = dragId.value
+  const hint = dropHint.value
+  if (dragged && hint?.id === id) {
+    const toIndex = reorderDropIndex(
+      imageLayers.value.map((n) => n.id),
+      id,
+      hint.pos,
+      backgroundLayer.value ? 1 : 0
+    )
+    if (toIndex !== null) session.moveLayerTo(dragged, toIndex)
+  }
+  endDrag()
+}
+
 function onRowClick(id: string, e: MouseEvent): void {
   if (e.ctrlKey || e.metaKey || e.shiftKey) {
     const current = selectedNodeIds.value

src/renderer/extensions/layerEditor/components/LayerPropertiesPanel.vue

@@ -345,7 +345,7 @@ function onOpacity(percent: number): void {
 }
 
 function isBlendFn(value: unknown): value is BlendFn {
-  return typeof value === 'string' && value in LAYER_MODES
+  return typeof value === 'string' && Object.hasOwn(LAYER_MODES, value)
 }
 
 function onBlendChange(value: AcceptableValue): void {

src/renderer/extensions/layerEditor/components/PropertyNumberField.test.ts

@@ -0,0 +1,34 @@
+import userEvent from '@testing-library/user-event'
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import PropertyNumberField from './PropertyNumberField.vue'
+
+async function commitValue(value: string) {
+  const input = screen.getByLabelText<HTMLInputElement>('X')
+  await userEvent.clear(input)
+  if (value !== '') await userEvent.type(input, value)
+  await userEvent.tab()
+  return input
+}
+
+function renderField() {
+  return render(PropertyNumberField, {
+    props: { label: 'X', value: 40, min: 0, max: 100 }
+  })
+}
+
+describe('PropertyNumberField', () => {
+  it('commits a clamped value on change', async () => {
+    const { emitted } = renderField()
+    await commitValue('250')
+    expect(emitted('commit')).toEqual([[100]])
+  })
+
+  it('reverts an emptied field instead of committing 0', async () => {
+    const { emitted } = renderField()
+    const input = await commitValue('')
+    expect(emitted('commit')).toBeUndefined()
+    expect(input.value).toBe('40')
+  })
+})

src/renderer/extensions/layerEditor/components/PropertyNumberField.vue

@@ -46,7 +46,9 @@ watch(
 )
 
 function onChange(): void {
-  const next = Number(draft.value)
+  const raw = draft.value
+  const next =
+    typeof raw === 'string' && raw.trim() === '' ? Number.NaN : Number(raw)
   if (Number.isFinite(next)) {
     const low = min ?? -Infinity
     const high = max ?? Infinity

src/renderer/extensions/layerEditor/composables/layerPanelDnd.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+
+import { dropPositionFor, reorderDropIndex } from './layerPanelDnd'
+
+describe('dropPositionFor', () => {
+  it('splits the row at the midpoint', () => {
+    expect(dropPositionFor(0.2)).toBe('above')
+    expect(dropPositionFor(0.8)).toBe('below')
+    expect(dropPositionFor(0.5)).toBe('below')
+  })
+})
+
+describe('reorderDropIndex', () => {
+  const ids = ['a', 'b', 'c']
+
+  it('above a layer lands directly over it in z-order', () => {
+    expect(reorderDropIndex(ids, 'b', 'above', 0)).toBe(2)
+  })
+
+  it('below a layer lands directly under it', () => {
+    expect(reorderDropIndex(ids, 'b', 'below', 0)).toBe(1)
+  })
+
+  it('offsets past a background layer', () => {
+    expect(reorderDropIndex(ids, 'a', 'below', 1)).toBe(1)
+    expect(reorderDropIndex(ids, 'c', 'above', 1)).toBe(4)
+  })
+
+  it('returns null for an unknown target', () => {
+    expect(reorderDropIndex(ids, 'x', 'above', 0)).toBeNull()
+  })
+})

src/renderer/extensions/layerEditor/composables/layerPanelDnd.ts

@@ -0,0 +1,16 @@
+export type LayerDropPos = 'above' | 'below'
+
+export function dropPositionFor(ratio: number): LayerDropPos {
+  return ratio < 0.5 ? 'above' : 'below'
+}
+
+export function reorderDropIndex(
+  bottomUpIds: readonly string[],
+  targetId: string,
+  pos: LayerDropPos,
+  offset: number
+): number | null {
+  const index = bottomUpIds.indexOf(targetId)
+  if (index === -1) return null
+  return offset + (pos === 'above' ? index + 1 : index)
+}