evomeme 0.1.9 → 0.1.10-beta.13

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

@@ -0,0 +1,544 @@
+import { getFeature } from '../core/feature-registry.js'
+import { discardFeatureState } from '../core/feature-state.js'
+import { state } from '../core/state.js'
+import { clampCanvasScale } from './camera.js'
+import { findCanvasNodeElement, setCanvasNodePosition } from '../elements/base.js'
+import {
+  moveCanvasElements,
+  resizeCanvasElements,
+  shouldIgnoreCanvasElementPointer,
+} from '../elements/drag.js'
+
+export function createCanvasInteractions({
+  applyCamera,
+  clearSelection,
+  createGeneratorDialog,
+  deleteCanvasItems,
+  elements,
+  generatorDialogDragOffsetY,
+  hideCtxMenu,
+  interaction,
+  isSelected,
+  renderCanvas,
+  renderChrome,
+  requestDependencyEdgeUpdate,
+  saveLayout,
+  setSelection,
+  shouldDeferExternalSync,
+  showCanvasCtxMenu,
+  syncExternalChanges,
+  syncSelectionClass,
+  widths,
+}) {
+  const els = elements
+  const { defaultNode: DEFAULT_W } = widths
+  const GENERATOR_DIALOG_DRAG_OFFSET_Y = generatorDialogDragOffsetY
+
+  let generatorToolPointerDrag = null
+  
+  const CLICK_SLOP = 4
+  
+  function clientToWorld(clientX, clientY) {
+    const rect = els.viewport.getBoundingClientRect()
+    const cam = state.camera
+    return {
+      x: (clientX - rect.left - cam.x) / cam.scale,
+      y: (clientY - rect.top - cam.y) / cam.scale,
+    }
+  }
+  
+  function isClientPointInsideViewport(clientX, clientY) {
+    const rect = els.viewport.getBoundingClientRect()
+    return (
+      clientX >= rect.left &&
+      clientX <= rect.right &&
+      clientY >= rect.top &&
+      clientY <= rect.bottom
+    )
+  }
+  
+  function resetGeneratorToolPointerDrag() {
+    const drag = generatorToolPointerDrag
+    if (!drag) return
+    try {
+      if (drag.button.hasPointerCapture?.(drag.pointerId)) {
+        drag.button.releasePointerCapture(drag.pointerId)
+      }
+    } catch {
+      /* ignore */
+    }
+    drag.button.classList.remove('is-dragging')
+    drag.button.removeAttribute('aria-grabbed')
+    generatorToolPointerDrag = null
+    interaction.mode = null
+    if (state.externalSyncPending && !shouldDeferExternalSync()) {
+      setTimeout(() => syncExternalChanges(), 0)
+    }
+  }
+  
+  function updateGeneratorToolPointerDrag(event) {
+    const drag = generatorToolPointerDrag
+    if (!drag || event.pointerId !== drag.pointerId) return
+    event.preventDefault()
+    event.stopPropagation()
+    const item = state.layoutItems.find((candidate) => candidate.id === drag.id)
+    if (!item) return
+    const position = clientToWorld(event.clientX, event.clientY)
+    setCanvasNodePosition(
+      findNodeEl(drag.id),
+      item,
+      position.x - drag.width / 2,
+      position.y - GENERATOR_DIALOG_DRAG_OFFSET_Y,
+    )
+    requestDependencyEdgeUpdate()
+  }
+  
+  function finishGeneratorToolPointerDrag(event, { cancelled = false } = {}) {
+    const drag = generatorToolPointerDrag
+    if (!drag || event.pointerId !== drag.pointerId) return
+    event.preventDefault()
+    event.stopPropagation()
+    updateGeneratorToolPointerDrag(event)
+    const keepDialog =
+      !cancelled && isClientPointInsideViewport(event.clientX, event.clientY)
+    if (!keepDialog) {
+      const removed = state.layoutItems.find((item) => item.id === drag.id)
+      if (removed && getFeature(removed)) discardFeatureState(removed)
+      state.layoutItems = state.layoutItems.filter((item) => item.id !== drag.id)
+      state.selectedIds = drag.previousSelection
+      renderCanvas({ changedIds: [drag.id] })
+      renderChrome()
+    }
+    resetGeneratorToolPointerDrag()
+    if (keepDialog) saveLayout(state.layoutItems)
+  }
+  
+  function bindGeneratorToolPointerDrag(button, kind) {
+    button.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0 || !state.project || generatorToolPointerDrag) return
+      event.preventDefault()
+      event.stopPropagation()
+      hideCtxMenu()
+      const previousSelection = new Set(state.selectedIds)
+      const position = clientToWorld(event.clientX, event.clientY)
+      let item
+      try { item = createGeneratorDialog(kind, position) }
+      catch (error) {
+        interaction.mode = null
+        state.error = String(error?.message || error)
+        state.selectedIds = previousSelection
+        renderChrome()
+        return
+      }
+      generatorToolPointerDrag = {
+        id: item.id,
+        kind,
+        width: item.width,
+        pointerId: event.pointerId,
+        button,
+        previousSelection,
+      }
+      interaction.mode = 'generator-tool-drag'
+      button.classList.add('is-dragging')
+      button.setAttribute('aria-grabbed', 'true')
+      button.setPointerCapture?.(event.pointerId)
+    })
+  }
+  
+  for (const button of document.querySelectorAll('button[data-feature]')) bindGeneratorToolPointerDrag(button, button.dataset.feature)
+  window.addEventListener('pointermove', updateGeneratorToolPointerDrag, true)
+  window.addEventListener('pointerup', (event) => finishGeneratorToolPointerDrag(event), true)
+  window.addEventListener(
+    'pointercancel',
+    (event) => finishGeneratorToolPointerDrag(event, { cancelled: true }),
+    true,
+  )
+  
+  function findNodeEl(id) {
+    return findCanvasNodeElement(els.world, id)
+  }
+  
+  /** 始终从 layoutItems / DOM 读当前位置，避免闭包里的 node.x 过期导致抓取漂移 */
+  function getNodePosition(id, fallback) {
+    const item = state.layoutItems.find((it) => it.id === id)
+    if (item && Number.isFinite(item.x) && Number.isFinite(item.y)) {
+      return { x: item.x, y: item.y, item }
+    }
+    const el = findNodeEl(id)
+    if (el) {
+      return {
+        x: Number.parseFloat(el.style.left) || fallback?.x || 0,
+        y: Number.parseFloat(el.style.top) || fallback?.y || 0,
+        item: null,
+      }
+    }
+    return { x: fallback?.x || 0, y: fallback?.y || 0, item: null }
+  }
+  
+  function ensureLayoutItem(node) {
+    const position = getNodePosition(node.id, node)
+    if (position.item) return position
+    const item = { ...node, x: position.x, y: position.y, width: node.width || DEFAULT_W, height: node.height ?? null }
+    state.layoutItems.push(item)
+    return { ...position, item }
+  }
+
+  function hideMarquee() {
+    if (!els.marquee) return
+    els.marquee.hidden = true
+    els.marquee.style.width = '0'
+    els.marquee.style.height = '0'
+  }
+  
+  function updateMarquee(x0, y0, x1, y1) {
+    const rect = els.viewport.getBoundingClientRect()
+    const left = Math.min(x0, x1) - rect.left
+    const top = Math.min(y0, y1) - rect.top
+    const width = Math.abs(x1 - x0)
+    const height = Math.abs(y1 - y0)
+    els.marquee.hidden = false
+    els.marquee.style.left = `${left}px`
+    els.marquee.style.top = `${top}px`
+    els.marquee.style.width = `${width}px`
+    els.marquee.style.height = `${height}px`
+  }
+  
+  function rectsIntersect(a, b) {
+    return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top
+  }
+  
+  function idsInClientRect(box) {
+    const ids = []
+    for (const el of els.world.querySelectorAll('.canvas-node')) {
+      const r = el.getBoundingClientRect()
+      if (rectsIntersect(r, box)) ids.push(el.dataset.id)
+    }
+    return ids
+  }
+  
+  function startPan(e) {
+    interaction.mode = 'pan'
+    interaction.pan = {
+      startX: e.clientX,
+      startY: e.clientY,
+      camX: state.camera.x,
+      camY: state.camera.y,
+    }
+    els.viewport.classList.add('is-panning')
+    els.viewport.setPointerCapture?.(e.pointerId)
+  }
+  
+  function startMoveSelection(e) {
+    const ids = [...state.selectedIds]
+    if (!ids.length) return
+    const world = clientToWorld(e.clientX, e.clientY)
+    const origins = new Map()
+    for (const id of ids) {
+      const node =
+        state.layoutItems.find((it) => it.id === id) ||
+        state.images.find((img) => img.id === id) ||
+        { id }
+      const pos = ensureLayoutItem({
+        ...node,
+        id,
+        width: node.width || DEFAULT_W,
+      })
+      origins.set(id, { x: pos.x, y: pos.y })
+    }
+    interaction.mode = 'move'
+    interaction.move = {
+      ids,
+      origins,
+      startWorld: world,
+    }
+    els.viewport.classList.add('is-panning')
+    els.viewport.setPointerCapture?.(e.pointerId)
+  }
+  
+  function startMarquee(e) {
+    interaction.mode = 'marquee'
+    interaction.marquee = {
+      x0: e.clientX,
+      y0: e.clientY,
+      additive: e.ctrlKey || e.metaKey,
+    }
+    updateMarquee(e.clientX, e.clientY, e.clientX, e.clientY)
+    els.viewport.setPointerCapture?.(e.pointerId)
+  }
+  
+  function onNodePointerDown(e, node) {
+    if (shouldIgnoreCanvasElementPointer(e)) return
+    if (e.button === 2) return
+  
+    // 中键：即使点在元素上也是平移画布
+    if (e.button === 1) {
+      e.preventDefault()
+
+      e.stopPropagation()
+      hideCtxMenu()
+      startPan(e)
+      return
+    }
+  
+    if (e.button !== 0) return
+    e.stopPropagation()
+    hideCtxMenu()
+  
+    const additive = e.ctrlKey || e.metaKey
+    // Ctrl/⌘+左键：只做多选切换，不拖动
+    if (additive) {
+      interaction.mode = 'click'
+      interaction.click = {
+        id: node.id,
+        additive: true,
+        startX: e.clientX,
+        startY: e.clientY,
+      }
+      els.viewport.setPointerCapture?.(e.pointerId)
+      return
+    }
+  
+    const alreadySelected = isSelected(node.id)
+    if (!alreadySelected) {
+      setSelection([node.id])
+      syncSelectionClass()
+      renderChrome()
+    }
+  
+    // 左键：按下后可点击选中，拖过阈值则移动全部选中项
+    interaction.mode = 'pending-move'
+    interaction.click = {
+      id: node.id,
+      additive: false,
+      alreadySelected,
+      startX: e.clientX,
+      startY: e.clientY,
+    }
+    els.viewport.setPointerCapture?.(e.pointerId)
+  }
+  
+  els.viewport.addEventListener(
+    'wheel',
+    (e) => {
+      e.preventDefault()
+      const rect = els.viewport.getBoundingClientRect()
+      const mx = e.clientX - rect.left
+      const my = e.clientY - rect.top
+      const factor = e.deltaY > 0 ? 0.92 : 1.08
+      const cam = state.camera
+      const nextScale = clampCanvasScale(cam.scale * factor)
+      const wx = (mx - cam.x) / cam.scale
+      const wy = (my - cam.y) / cam.scale
+      state.camera = {
+        scale: nextScale,
+        x: mx - wx * nextScale,
+        y: my - wy * nextScale,
+      }
+      applyCamera()
+    },
+    { passive: false },
+  )
+  
+  els.viewport.addEventListener('pointerdown', (e) => {
+    if (interaction.htmlDrag) return
+  
+    if (e.button === 1) {
+      e.preventDefault()
+      hideCtxMenu()
+      startPan(e)
+      return
+    }
+  
+    if (e.button !== 0) return
+    const onEmpty =
+      e.target === els.viewport ||
+      e.target === els.world ||
+      e.target === els.marquee
+    if (!onEmpty) return
+    hideCtxMenu()
+    startMarquee(e)
+  })
+  
+  els.viewport.addEventListener('mousedown', (e) => {
+    if (e.button === 1) e.preventDefault()
+  })
+  
+  els.viewport.addEventListener('auxclick', (e) => {
+    if (e.button === 1) e.preventDefault()
+  })
+  
+  els.viewport.addEventListener('pointermove', (e) => {
+    if (interaction.mode === 'pan' && interaction.pan) {
+      state.camera = {
+        ...state.camera,
+        x: interaction.pan.camX + (e.clientX - interaction.pan.startX),
+        y: interaction.pan.camY + (e.clientY - interaction.pan.startY),
+      }
+      applyCamera()
+      return
+    }
+  
+    if (interaction.mode === 'pending-move' && interaction.click) {
+      const { startX, startY } = interaction.click
+      if (Math.hypot(e.clientX - startX, e.clientY - startY) > CLICK_SLOP) {
+        interaction.click = null
+        startMoveSelection(e)
+      }
+      return
+    }
+  
+    if (interaction.mode === 'move' && interaction.move && !interaction.htmlDrag) {
+      const world = clientToWorld(e.clientX, e.clientY)
+      moveCanvasElements(interaction.move, world, findNodeEl)
+      requestDependencyEdgeUpdate()
+      return
+    }
+  
+    if (interaction.mode === 'resize' && interaction.resize) {
+      const resize = interaction.resize
+      if (resize.pointerId !== e.pointerId) return
+      const world = clientToWorld(e.clientX, e.clientY)
+      resizeCanvasElements(resize, world, findNodeEl)
+      requestDependencyEdgeUpdate()
+      return
+    }
+  
+    if (interaction.mode === 'marquee' && interaction.marquee) {
+      updateMarquee(
+        interaction.marquee.x0,
+        interaction.marquee.y0,
+        e.clientX,
+        e.clientY,
+      )
+    }
+  })
+  
+  function endPointer(e) {
+    const mode = interaction.mode
+  
+    if (mode === 'move' || mode === 'resize') {
+      saveLayout(state.layoutItems)
+    }
+  
+    if (mode === 'click' && interaction.click) {
+      const { id, additive, startX, startY } = interaction.click
+      const moved =
+        Math.hypot(e.clientX - startX, e.clientY - startY) > CLICK_SLOP
+      if (!moved) {
+        setSelection([id], { toggle: additive, additive: false })
+        syncSelectionClass()
+        renderChrome()
+      }
+    }
+  
+    // 左键点在已多选元素上且未拖动：收窄为只选中该项
+    if (mode === 'pending-move' && interaction.click) {
+      const { id, alreadySelected, startX, startY } = interaction.click
+      const moved =
+        Math.hypot(e.clientX - startX, e.clientY - startY) > CLICK_SLOP
+      if (!moved && alreadySelected && state.selectedIds.size > 1) {
+        setSelection([id])
+        syncSelectionClass()
+        renderChrome()
+      }
+    }
+  
+    if (mode === 'marquee' && interaction.marquee) {
+      const { x0, y0, additive } = interaction.marquee
+      const x1 = e.clientX
+      const y1 = e.clientY
+      const moved = Math.hypot(x1 - x0, y1 - y0) > CLICK_SLOP
+      if (moved) {
+        const box = {
+          left: Math.min(x0, x1),
+          top: Math.min(y0, y1),
+          right: Math.max(x0, x1),
+          bottom: Math.max(y0, y1),
+        }
+        const ids = idsInClientRect(box)
+        setSelection(ids, { additive })
+      } else if (!additive) {
+        clearSelection()
+      }
+      syncSelectionClass()
+      renderChrome()
+      hideMarquee()
+    }
+  
+    if (e?.pointerId != null) {
+      try {
+        els.viewport.releasePointerCapture?.(e.pointerId)
+      } catch {
+        /* ignore */
+      }
+    }
+  
+    els.viewport.classList.remove('is-panning')
+    els.viewport.classList.remove('is-resizing')
+    delete els.viewport.dataset.resizeCorner
+    interaction.mode = null
+    interaction.pan = null
+    interaction.marquee = null
+    interaction.move = null
+    interaction.resize = null
+    interaction.click = null
+  }
+  
+  els.viewport.addEventListener('pointerup', endPointer)
+  els.viewport.addEventListener('pointercancel', endPointer)
+  els.viewport.addEventListener('contextmenu', (e) => {
+    if (e.target === els.viewport || e.target === els.world) {
+      e.preventDefault()
+      showCanvasCtxMenu(e.clientX, e.clientY)
+    }
+  })
+  
+  window.addEventListener('keydown', async (e) => {
+    const tag = e.target?.tagName
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || e.target?.isContentEditable) return
+    if (e.key === 'Delete' && state.selectedIds.size) {
+      e.preventDefault()
+      hideCtxMenu()
+      await deleteCanvasItems([...state.selectedIds], { confirm: false })
+      return
+    }
+    if (e.key === 'Escape') {
+      hideCtxMenu()
+      // 弹窗只允许点关闭/取消按钮退出，Esc 不关
+      if (
+        !els.imageCanvasSizeModal.hidden ||
+        !els.seamEliminationModal.hidden ||
+        !els.interactiveEditModal.hidden ||
+        !els.layerDecompositionModal.hidden ||
+        !els.smartSplitModal.hidden ||
+        !els.manualSplitModal.hidden ||
+        !els.frameExtractModal.hidden ||
+        !els.framePreviewModal.hidden ||
+        !els.frameEditorSplitModal.hidden ||
+        !els.videoCycleModal.hidden
+      ) {
+        return
+      }
+      if (state.selectedIds.size) {
+        clearSelection()
+        syncSelectionClass()
+        renderChrome()
+      }
+    }
+  })
+  window.addEventListener('click', (e) => {
+    if (!els.ctxMenu.contains(e.target)) hideCtxMenu()
+  })
+  
+  els.inspectorClose.addEventListener('click', () => {
+    clearSelection()
+    syncSelectionClass()
+    renderChrome()
+  })
+
+  return {
+    clientToWorld,
+    findNodeEl,
+    onNodePointerDown,
+  }
+}

package/dist/canvas-public/canvas/panel-resize.js

@@ -0,0 +1,5 @@
+// Compatibility entry point. Canvas element resizing is owned by elements/resize.js.
+export {
+  createCanvasElementResize,
+  createCanvasElementResize as createCanvasPanelResize,
+} from '../elements/resize.js'