evomeme 0.1.9 → 0.1.10-beta.13

package/dist/canvas-public/canvas/renderer.js

@@ -0,0 +1,297 @@
+import { getFeature } from '../core/feature-registry.js'
+import { disposeFeatureForms } from '../ui/feature-form.js'
+import { state } from '../core/state.js'
+import {
+  bindCanvasNodeInteractions,
+  createCanvasNodeElement,
+  updateCanvasNodeGeometry,
+} from '../elements/base.js'
+import {
+  createDependencyEdge,
+  createDependencyLayer,
+  dependencyCurve,
+  dependencyNodeBox as measureDependencyNodeBox,
+  updateDependencyEdgeGeometry as updateElementDependencyEdgeGeometry,
+} from '../elements/connections.js'
+import { resolveDependencyParentIds } from './dependencies.js'
+import { canvasElementKind } from '../elements/registry.js'
+import { mountImageElement } from '../elements/image.js'
+import { mountLoadingElement } from '../elements/loading.js'
+import { mountMapElement } from '../elements/map.js'
+import { mountUiElement } from '../elements/ui.js'
+import { mountVideoElement } from '../elements/video.js'
+import {
+  disposeTileMapView,
+  disposeTileMapViews,
+  resizeTileMapView,
+} from '../map/tile-map-editor.js'
+import { isTileMapItem } from '../map/model.js'
+
+export function createCanvasController({
+  mountFeature,
+  pruneFeatures,
+  appendCanvasPanelResizeHandle,
+  appendMediaResizeHandles,
+  applyCamera,
+  applyImageDisplaySize,
+  buildNodes,
+  clearRefDragHighlight,
+  dependencyEffectsMaxEdges,
+  dependencyEffectsMaxScale,
+  elements,
+  findNodeEl,
+  getSelectedItem,
+  imageName,
+  imageUrl,
+  interaction,
+  isSelected,
+  onNodePointerDown,
+  renderChrome,
+  renderInspector,
+  saveLayout,
+  setRefDragHighlight,
+  setSelection,
+  showCtxMenu,
+  syncSelectionClass,
+  defaultNodeWidth,
+}) {
+  const els = elements
+  const DEFAULT_W = defaultNodeWidth
+  const DEPENDENCY_EFFECTS_MAX_EDGES = dependencyEffectsMaxEdges
+  const DEPENDENCY_EFFECTS_MAX_SCALE = dependencyEffectsMaxScale
+  const dependencyParentIds = resolveDependencyParentIds
+
+  function updateDependencyEffectsMode() {
+    const edgeCount =
+      els.world.querySelector('.dependency-edges')?.childElementCount || 0
+    const reduceEffects =
+      state.camera.scale >= DEPENDENCY_EFFECTS_MAX_SCALE ||
+      edgeCount >= DEPENDENCY_EFFECTS_MAX_EDGES
+    els.viewport.classList.toggle('is-dependency-effects-reduced', reduceEffects)
+  }
+  
+  function resolveVisibleDependencyId(parentId, visibleIds) {
+    return visibleIds.has(parentId) ? parentId : null
+  }
+  
+  function dependencyNodeBox(id) {
+    const element = findNodeEl(id)
+    if (!element) return null
+    const item = state.layoutItems.find((candidate) => candidate.id === id)
+    return measureDependencyNodeBox(element, item, DEFAULT_W)
+  }
+  
+  function renderDependencyEdges(layer, nodes = buildNodes()) {
+    const edgeRoot = layer?.querySelector('.dependency-edges')
+    if (!edgeRoot) return
+    edgeRoot.replaceChildren()
+    const visibleIds = new Set(nodes.map((node) => node.id))
+  
+    for (const target of nodes) {
+      const parentIds = dependencyParentIds(target)
+        .map((parentId) => resolveVisibleDependencyId(parentId, visibleIds))
+        .filter((parentId, index, list) => parentId && parentId !== target.id && list.indexOf(parentId) === index)
+      const targetBox = dependencyNodeBox(target.id)
+      if (!targetBox) continue
+  
+      parentIds.forEach((parentId, index) => {
+        const sourceBox = dependencyNodeBox(parentId)
+        if (!sourceBox) return
+        const fanOffset = (index - (parentIds.length - 1) / 2) * 12
+        const d = dependencyCurve(sourceBox, targetBox, fanOffset)
+        const active = isSelected(parentId) || isSelected(target.id)
+        edgeRoot.appendChild(createDependencyEdge({
+          sourceId: parentId,
+          targetId: target.id,
+          fanOffset,
+          path: d,
+          active,
+          title: `${imageName(parentId)} → ${target.name || imageName(target.id)}`,
+        }))
+      })
+    }
+    updateDependencyEffectsMode()
+  }
+  
+  function updateDependencyEdgeGeometry(layer) {
+    updateElementDependencyEdgeGeometry(layer, dependencyNodeBox)
+  }
+  
+  let dependencyEdgeFrame = 0
+  let dependencyEdgeGeometryFrame = 0
+  
+  function requestDependencyEdgeUpdate() {
+    if (dependencyEdgeFrame) return
+    dependencyEdgeFrame = requestAnimationFrame(() => {
+      dependencyEdgeFrame = 0
+      const layer = els.world.querySelector('.dependency-layer')
+      if (layer) renderDependencyEdges(layer, buildNodes())
+    })
+  }
+  
+  function requestDependencyEdgeGeometryUpdate() {
+    if (dependencyEdgeGeometryFrame) return
+    dependencyEdgeGeometryFrame = requestAnimationFrame(() => {
+      dependencyEdgeGeometryFrame = 0
+      const layer = els.world.querySelector('.dependency-layer')
+      if (layer) updateDependencyEdgeGeometry(layer)
+    })
+  }
+
+  function refreshCanvasNodeGeometry(element, node, index) {
+    updateCanvasNodeGeometry(element, node, index, isSelected(node.id))
+    if (isTileMapItem(node)) resizeTileMapView(node.id)
+  }
+  
+  
+  function appendCanvasNodeElement(element, node) {
+    bindCanvasNodeInteractions(element, node, {
+      onPointerDown: onNodePointerDown,
+      onContextMenu: (event, item) => {
+        event.preventDefault()
+        event.stopPropagation()
+        if (!isSelected(item.id)) setSelection([item.id])
+        state.ctxTargetId = item.id
+        syncSelectionClass()
+        renderChrome()
+        showCtxMenu(event.clientX, event.clientY, item)
+      },
+    })
+    els.world.appendChild(element)
+  }
+  
+  function renderCanvas({ changedIds = null } = {}) {
+    const nodes = buildNodes()
+    const alive = new Set(nodes.map((n) => n.id))
+    const changed = Array.isArray(changedIds)
+      ? new Set(changedIds.filter(Boolean))
+      : null
+    state.selectedIds = new Set([...state.selectedIds].filter((id) => alive.has(id)))
+    for (const id of Object.keys(state.frameSheetPlayback)) {
+      if (!alive.has(id)) delete state.frameSheetPlayback[id]
+    }
+    for (const id of Object.keys(state.scrollImagePlayback)) {
+      if (!alive.has(id)) delete state.scrollImagePlayback[id]
+    }
+    pruneFeatures(alive)
+
+    let dependencyLayer
+    if (!changed) {
+      disposeTileMapViews()
+      disposeFeatureForms(els.world)
+      els.world.innerHTML = ''
+      dependencyLayer = createDependencyLayer()
+      els.world.appendChild(dependencyLayer)
+    } else {
+      for (const id of changed) {
+        disposeFeatureForms(findNodeEl(id))
+        findNodeEl(id)?.remove()
+        disposeTileMapView(id)
+      }
+      for (const element of els.world.querySelectorAll(':scope > .canvas-node[data-id]')) {
+        if (alive.has(element.dataset.id)) continue
+        disposeTileMapView(element.dataset.id)
+        disposeFeatureForms(element)
+        element.remove()
+      }
+      dependencyLayer = els.world.querySelector(':scope > .dependency-layer')
+      if (!dependencyLayer) {
+        dependencyLayer = createDependencyLayer()
+        els.world.prepend(dependencyLayer)
+      }
+    }
+    for (let index = 0; index < nodes.length; index += 1) {
+      const node = nodes[index]
+      const existingElement = changed && !changed.has(node.id) ? findNodeEl(node.id) : null
+      if (existingElement) {
+        // Moving/resizing a node must not recreate its image, video or editor DOM.
+        refreshCanvasNodeGeometry(existingElement, node, index)
+        continue
+      }
+      const el = createCanvasNodeElement(node, index, isSelected(node.id))
+  
+      const elementKind = canvasElementKind(node)
+      if (
+        elementKind === 'ui' && mountUiElement(el, node, {
+          mountFeature: getFeature(node) ? mountFeature : null,
+          appendResizeHandle: appendCanvasPanelResizeHandle,
+        })
+      ) {
+        appendCanvasNodeElement(el, node)
+        continue
+      }
+  
+      if (elementKind === 'map') {
+        mountMapElement(el, node, {
+          appendResizeHandle: appendCanvasPanelResizeHandle,
+          imageUrl,
+          isSelected,
+          renderChrome,
+          saveLayout,
+          setSelection,
+          syncSelectionClass,
+        })
+        appendCanvasNodeElement(el, node)
+        continue
+      }
+  
+      if (elementKind === 'loading') {
+        mountLoadingElement(el, node)
+        appendCanvasNodeElement(el, node)
+        continue
+      }
+  
+      if (elementKind === 'video') {
+        mountVideoElement(el, node, {
+          appendResizeHandles: appendMediaResizeHandles,
+          clearRefDragHighlight,
+          interaction,
+          requestDependencyEdgeUpdate,
+          setRefDragHighlight,
+        })
+        appendCanvasNodeElement(el, node)
+        continue
+      }
+  
+      mountImageElement(el, node, {
+        appendResizeHandles: appendMediaResizeHandles,
+        applyImageDisplaySize,
+        clearRefDragHighlight,
+        imageName,
+        imageUrl,
+        interaction,
+        renderInspector,
+        requestDependencyEdgeUpdate,
+        setRefDragHighlight,
+      })
+      appendCanvasNodeElement(el, node)
+    }
+    if (changed) syncSelectionClass()
+    renderDependencyEdges(dependencyLayer, nodes)
+    applyCamera()
+    if (state.selectedIds.size === 1) {
+      const selectedItem = getSelectedItem([...state.selectedIds][0])
+      if (isTileMapItem(selectedItem)) renderInspector()
+    }
+  }
+  
+  function renderCanvasPreservingStableNodes(changedIds = []) {
+    renderCanvas({ changedIds })
+  }
+  
+  function renderCanvasItem(id) {
+    renderCanvas({ changedIds: [id] })
+  }
+
+  return {
+    createDependencyLayer,
+    dependencyParentIds,
+    renderCanvas,
+    renderCanvasItem,
+    renderCanvasPreservingStableNodes,
+    renderDependencyEdges,
+    requestDependencyEdgeGeometryUpdate,
+    requestDependencyEdgeUpdate,
+    updateDependencyEffectsMode,
+  }
+}

package/dist/canvas-public/canvas/selection.js

@@ -0,0 +1,62 @@
+import { state } from '../core/state.js'
+
+export function createSelectionController({
+  canvasNodeZIndex,
+  requestDependencyEdgeUpdate,
+  world,
+}) {
+  function primarySelectedId() {
+    if (!state.selectedIds.size) return null
+    if (state.selectedIds.has(state.ctxTargetId)) return state.ctxTargetId
+    return [...state.selectedIds][0]
+  }
+
+  function setSelection(ids, { additive = false, toggle = false } = {}) {
+    if (toggle && ids.length === 1) {
+      const next = new Set(state.selectedIds)
+      const id = ids[0]
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      state.selectedIds = next
+      return
+    }
+    if (additive) {
+      const next = new Set(state.selectedIds)
+      for (const id of ids) {
+        if (id) next.add(id)
+      }
+      state.selectedIds = next
+      return
+    }
+    state.selectedIds = new Set(ids.filter(Boolean))
+  }
+
+  function clearSelection() {
+    state.selectedIds = new Set()
+  }
+
+  function isSelected(id) {
+    return state.selectedIds.has(id)
+  }
+
+  function syncSelectionClass() {
+    const nodes = [...world.querySelectorAll('.canvas-node')]
+    nodes.forEach((element, index) => {
+      const selected = isSelected(element.dataset.id)
+      const item = state.layoutItems.find((candidate) => candidate.id === element.dataset.id)
+      element.classList.toggle('is-selected', selected)
+      element.style.zIndex = String(canvasNodeZIndex(item, index, selected))
+    })
+    requestDependencyEdgeUpdate()
+  }
+
+  return {
+    clearSelection,
+    isSelected,
+    primarySelectedId,
+    setSelection,
+    syncSelectionClass,
+  }
+}
+
+

package/dist/canvas-public/canvas/serialization.js

@@ -0,0 +1,118 @@
+import { isUiElement } from '../elements/registry.js'
+import { t } from '../language/index.js'
+import { normalizeFramePreviewConfig, normalizeScrollPreviewConfig } from '../elements/image.js'
+import { isPending, isVideoItem } from '../elements/types.js'
+import { isTileMapItem, serializeTileMapItem } from '../map/model.js'
+
+export function createLayoutSerializer({
+  featureController,
+  imageName,
+  imageUrl,
+  normalizeGenMeta,
+  normalizeOrigin,
+  widths,
+}) {
+  const DEFAULT_W = widths.defaultNode
+
+  function attachSerializableMeta(out, item) {
+    if (typeof item.name === 'string' && item.name) out.name = item.name
+    if (item.manualSize === true) out.manualSize = true
+    const gen = normalizeGenMeta(item.gen)
+    if (gen) out.gen = gen
+    const origin = normalizeOrigin(item.origin)
+    if (origin) out.origin = origin
+    // Provenance is joined from the task database when reading, never edited as layout.
+    const framePreview = normalizeFramePreviewConfig(item.framePreview)
+    if (framePreview) out.framePreview = framePreview
+    const scrollPreview = normalizeScrollPreviewConfig(item.scrollPreview)
+    if (scrollPreview) out.scrollPreview = scrollPreview
+    if (item.layer && typeof item.layer === 'object' && !Array.isArray(item.layer)) {
+      out.layer = item.layer
+    }
+    if (item.smartSplit && typeof item.smartSplit === 'object' && !Array.isArray(item.smartSplit)) {
+      out.smartSplit = item.smartSplit
+    }
+    return out
+  }
+  
+  function attachCanvasIdentity(out, item) {
+    const assetId = item.assetId || (String(item.id || '').startsWith('assets/') ? item.id : '')
+    const operationId = item.operationId || (
+      isPending(item) || String(item.id || '').startsWith('job_') || String(item.id || '').startsWith('pending_')
+        ? item.id
+        : ''
+    )
+    out.nodeId = item.nodeId || (operationId
+      ? `node:${operationId}`
+      : assetId
+        ? `node:${assetId}`
+        : `node:${item.id}`)
+    if (assetId) out.assetId = assetId
+    if (operationId) out.operationId = operationId
+    return out
+  }
+  
+  function serializeLayoutItem(item) {
+    if (isUiElement(item)) return featureController().serialize(item)
+    if (isTileMapItem(item)) return serializeTileMapItem(item)
+    if (isPending(item)) {
+      return {
+        id: item.id,
+        type: 'pending',
+        name: item.name || t("canvas.serialization.text011"),
+        taskId: item.taskId,
+        taskStatus: item.taskStatus,
+        x: item.x,
+        y: item.y,
+        width: item.width || DEFAULT_W,
+        height: item.height ?? null,
+        prompt: item.prompt || '',
+        size: item.size || '',
+        model: item.model || '',
+        media: item.media || 'image',
+        ratio: item.ratio || '',
+        error: item.error || null,
+        references: (item.references || item._refs || [])
+          .filter((reference) => reference?.id)
+          .map((reference) => ({
+            id: reference.id,
+            name: reference.name || undefined,
+            url: reference.url || undefined,
+            role: reference.role || undefined,
+            kind: reference.kind || undefined,
+          })),
+        ...(item.inputUiSnapshot ? { inputUiSnapshot: item.inputUiSnapshot } : {}),
+      }
+    }
+    if (isVideoItem(item) || String(item.id || '').startsWith('videos/')) {
+      return attachSerializableMeta(
+        {
+          id: item.id,
+          type: 'video',
+          x: item.x,
+          y: item.y,
+          width: item.width || 280,
+          height: item.height ?? null,
+        },
+        item,
+      )
+    }
+    return attachSerializableMeta(
+      {
+        id: item.id,
+        x: item.x,
+        y: item.y,
+        width: item.width || DEFAULT_W,
+        height: item.height ?? null,
+      },
+      item,
+    )
+  }
+  
+
+  return {
+    attachCanvasIdentity,
+    serializeLayoutItem,
+  }
+}
+

package/dist/canvas-public/canvas/sync.js

@@ -0,0 +1,202 @@
+import { restoreFeatureState } from '../core/feature-state.js'
+import { api } from '../core/api.js'
+import { state } from '../core/state.js'
+import { isGenerationInputUi, isPending } from '../elements/types.js'
+
+export function createCanvasSyncController(context) {
+  const {
+    interaction,
+    layout,
+    markGenerationInputIdle,
+    mergeLayout,
+    renderCanvas,
+    renderChrome,
+    renderProjectChrome,
+    setSelection,
+  } = context
+  let eventSource = null
+
+  async function fetchCanvasSnapshot() {
+    try {
+      return await api('/api/snapshot')
+    } catch {
+      const [imagesData, layoutData] = await Promise.all([
+        api('/api/images'),
+        api('/api/layout'),
+      ])
+      return {
+        images: imagesData.images || [],
+        items: layoutData.items || [],
+        version: layoutData.version,
+        revision: layoutData.revision,
+      }
+    }
+  }
+
+  function applyCanvasSnapshot(snapshot, force = false) {
+    if (
+      layout.status().pendingSaveCount > 0 ||
+      interaction.mode ||
+      Number(snapshot.revision) < state.layoutRevision
+    ) {
+      state.externalSyncPending = true
+      return false
+    }
+    const nextImages = snapshot.images || []
+    const nextItems = mergeLayout(nextImages, snapshot.items || [])
+    for (const item of nextItems) restoreFeatureState(item)
+    layout.setSubmittedItems(nextItems)
+    for (const [operationId, recovery] of state.pendingUiRecoveries.entries()) {
+      if (nextItems.some((item) => !isPending(item) && item.operationId === operationId)) {
+        if (recovery.retainUntilSettled) continue
+        state.pendingUiRecoveries.delete(operationId)
+        continue
+      }
+      const stillPending = nextItems.some(
+        (item) => isPending(item) && (item.id === operationId || item.operationId === operationId),
+      )
+      const restoredInput = nextItems.find((item) => item.id === recovery.snapshot?.id)
+      if (!stillPending && isGenerationInputUi(restoredInput)) {
+        markGenerationInputIdle(restoredInput)
+        state.pendingUiRecoveries.delete(operationId)
+        if (state.selectedIds.has(operationId)) setSelection([restoredInput.id])
+      }
+    }
+    layout.acceptRevision(snapshot.revision)
+    if (!force && layout.canvasDataEqual([state.images, state.layoutItems], [nextImages, nextItems])) {
+      return false
+    }
+    const previousItemsById = new Map(state.layoutItems.map((item) => [item.id, item]))
+    const nextItemsById = new Map(nextItems.map((item) => [item.id, item]))
+    const changedIds = new Set()
+    for (const [id, item] of nextItemsById) {
+      const previous = previousItemsById.get(id)
+      if (!previous || !layout.canvasDataEqual(layout.canvasNodeContent(previous), layout.canvasNodeContent(item))) {
+        changedIds.add(id)
+      }
+    }
+    for (const id of previousItemsById.keys()) {
+      if (!nextItemsById.has(id)) changedIds.add(id)
+    }
+    state.images = nextImages
+    state.layoutItems = nextItems
+    renderCanvas({ changedIds: [...changedIds] })
+    renderChrome()
+    return true
+  }
+
+  function ensureCanvasEventStream() {
+    if (eventSource || !state.meta?.event_stream || typeof EventSource === 'undefined') return
+    eventSource = new EventSource(state.meta.event_stream)
+    eventSource.addEventListener('canvas-change', () => requestExternalSync())
+    eventSource.addEventListener('open', () => requestExternalSync())
+    // Reconcile on reconnect even if an OS file notification was missed.
+    eventSource.addEventListener('error', () => {
+      setTimeout(() => {
+        if (state.project) requestExternalSync()
+      }, 2000)
+    })
+  }
+
+  function hasEditableFocus() {
+    const active = document.activeElement
+    return Boolean(
+      active &&
+        active !== document.body &&
+        active !== document.documentElement &&
+        active.matches?.('input, textarea, select, [contenteditable="true"]'),
+    )
+  }
+
+  function shouldDeferExternalSync() {
+    return Boolean(
+      !state.project ||
+        state.refreshing ||
+        state.deleting ||
+        interaction.mode ||
+        document.hidden ||
+        hasEditableFocus() ||
+        layout.status().pendingSaveCount > 0,
+    )
+  }
+
+  async function syncExternalChanges() {
+    if (shouldDeferExternalSync()) {
+      state.externalSyncPending = true
+      return
+    }
+    state.refreshing = true
+    state.externalSyncPending = false
+    const { sequence, epoch } = layout.status()
+    try {
+      const snapshot = await fetchCanvasSnapshot()
+      const currentLayout = layout.status()
+      if (
+        hasEditableFocus() ||
+        interaction.mode ||
+        currentLayout.pendingSaveCount > 0 ||
+        sequence !== currentLayout.sequence ||
+        epoch !== currentLayout.epoch
+      ) {
+        state.externalSyncPending = true
+        return
+      }
+      applyCanvasSnapshot(snapshot)
+    } catch (error) {
+      console.warn('素材后台同步失败', error)
+    } finally {
+      state.refreshing = false
+      if (state.externalSyncPending && !shouldDeferExternalSync()) {
+        setTimeout(() => syncExternalChanges(), 0)
+      }
+    }
+  }
+
+  function requestExternalSync() {
+    state.externalSyncPending = true
+    syncExternalChanges()
+  }
+
+  async function reload() {
+    if (!state.project || state.refreshing) return
+    state.refreshing = true
+    const { sequence, epoch } = layout.status()
+    try {
+      const [meta, snapshot] = await Promise.all([
+        api('/api/meta'),
+        fetchCanvasSnapshot(),
+      ])
+      const currentLayout = layout.status()
+      if (
+        sequence !== currentLayout.sequence ||
+        epoch !== currentLayout.epoch ||
+        currentLayout.pendingSaveCount > 0
+      ) {
+        state.externalSyncPending = true
+        return
+      }
+      state.meta = meta
+      if (meta.project) state.project = meta.project
+      renderProjectChrome()
+      applyCanvasSnapshot(snapshot, true)
+      ensureCanvasEventStream()
+    } finally {
+      state.refreshing = false
+      if (state.externalSyncPending && !shouldDeferExternalSync()) {
+        setTimeout(() => syncExternalChanges(), 0)
+      }
+    }
+  }
+
+  return {
+    applyCanvasSnapshot,
+    ensureCanvasEventStream,
+    fetchCanvasSnapshot,
+    reload,
+    requestExternalSync,
+    shouldDeferExternalSync,
+    syncExternalChanges,
+  }
+}
+
+