evomeme 0.1.9 → 0.1.10

package/dist/canvas-public/features/frame-editor/frame-editing.js

@@ -0,0 +1,755 @@
+import { frameSheetPreviewMeta } from '../../elements/image.js'
+import { ensureFeatureState, subscribeFeatureState } from '../../core/feature-state.js'
+import { t } from '../../language/index.js'
+import { state } from '../../core/state.js'
+import { normalizeFrameEditor, frameEditorParentIds } from './frame-model.js'
+
+export default {
+  styles: `
+.canvas-node.is-frame-editor {
+  overflow: hidden;
+  border-color: rgba(61, 214, 198, 0.28);
+  background: linear-gradient(165deg, rgba(28, 34, 42, 0.98), rgba(16, 19, 24, 0.98));
+}
+
+.canvas-node.is-frame-editor.is-manual-size {
+  display: flex;
+  flex-direction: column;
+}
+
+.canvas-node.is-frame-editor.is-manual-size .frame-editor-workspace {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.canvas-node.is-frame-editor.is-manual-size .frame-editor-grid-scroll {
+  min-height: 0;
+  max-height: none;
+}
+
+.frame-editor-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
+  cursor: grab;
+}
+
+.frame-editor-head span {
+  color: var(--muted);
+  font-size: 11px;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.frame-editor-toolbar,
+.frame-editor-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+}
+
+.frame-editor-toolbar label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.frame-editor-toolbar .frame-editor-fps-field {
+  margin-left: auto;
+}
+
+.frame-editor-toolbar input {
+  width: 76px;
+  padding: 6px 7px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: rgba(10, 12, 16, 0.72);
+  color: var(--text);
+}
+
+.frame-editor-toolbar .frame-editor-dimension-field input {
+  width: 58px;
+}
+
+.frame-editor-workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 250px;
+  min-height: 300px;
+  border-block: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(7, 9, 12, 0.42);
+}
+
+.frame-editor-grid-scroll {
+  max-height: 380px;
+  min-height: 300px;
+  display: flex;
+  padding: 16px;
+  overflow: auto;
+}
+
+.frame-editor-grid {
+  display: grid;
+  gap: 7px;
+  width: max-content;
+  min-width: max-content;
+  margin: auto;
+}
+
+.frame-editor-preview {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  padding: 16px;
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(11, 14, 18, 0.48);
+}
+
+.frame-editor-preview-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.frame-editor-preview-head strong {
+  font-size: 12px;
+}
+
+.frame-editor-preview-head span,
+.frame-editor-preview-hint {
+  color: var(--muted);
+  font-size: 10px;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.frame-editor-preview-viewport {
+  display: flex;
+  min-height: 220px;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.frame-editor-preview-stage {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.13);
+  border-radius: 10px;
+  background:
+    linear-gradient(45deg, #262c35 25%, transparent 25%),
+    linear-gradient(-45deg, #262c35 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #262c35 75%),
+    linear-gradient(-45deg, transparent 75%, #262c35 75%);
+  background-color: #171b21;
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+}
+
+.frame-editor-preview-frame {
+  background: transparent;
+}
+
+.frame-editor-preview-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.frame-editor-preview-hint {
+  margin-top: 12px;
+  text-align: center;
+}
+
+body.is-ref-dragging .frame-editor-grid {
+  outline: 1px dashed rgba(61, 214, 198, 0.65);
+  outline-offset: 5px;
+}
+
+.frame-editor-cell {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.frame-editor-cell.has-frame {
+  cursor: grab;
+}
+
+.frame-editor-cell.is-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-style: dashed;
+}
+
+.frame-editor-cell.is-drop {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px rgba(61, 214, 198, 0.48);
+}
+
+.frame-editor-cell.is-dragging {
+  opacity: 0.4;
+}
+
+.frame-editor-thumb {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background:
+    linear-gradient(45deg, #262c35 25%, transparent 25%),
+    linear-gradient(-45deg, #262c35 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #262c35 75%),
+    linear-gradient(-45deg, transparent 75%, #262c35 75%);
+  background-size: 12px 12px;
+  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
+}
+
+.frame-editor-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+.frame-editor-thumb.is-source-cell img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  max-width: none;
+  max-height: none;
+  object-fit: fill;
+  transform-origin: top left;
+}
+
+.frame-editor-order {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  min-width: 17px;
+  height: 17px;
+  padding-inline: 3px;
+  border-radius: 5px;
+  background: rgba(7, 9, 12, 0.8);
+  color: var(--text);
+  font-size: 9px;
+  line-height: 17px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.frame-editor-remove {
+  position: absolute;
+  right: 3px;
+  top: 3px;
+  width: 19px;
+  height: 19px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 5px;
+  background: rgba(7, 9, 12, 0.82);
+  color: var(--muted);
+  line-height: 16px;
+  cursor: pointer;
+}
+
+.frame-editor-remove:hover {
+  border-color: rgba(255, 107, 122, 0.55);
+  color: var(--danger);
+}
+
+.frame-editor-empty-label {
+  color: rgba(255, 255, 255, 0.28);
+  font-size: 10px;
+  pointer-events: none;
+}
+
+.frame-editor-hint {
+  min-height: 16px;
+  margin: 9px 12px 0;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.frame-editor-hint.is-error {
+  color: var(--danger);
+}
+
+.frame-editor-footer {
+  justify-content: flex-end;
+}
+`,
+  render: (ui) =>
+    ui.stack(ui.view(), ui.row(ui.field('rows'), ui.field('columns'), ui.field('fps'))),
+  id: 'frame-editor',
+  title: 'features.frameEditor.frameEditing.text010',
+  inline: true,
+  node: {
+    type: 'frame_editor',
+    width: 780,
+    minWidth: 520,
+    minHeight: 360,
+    generationInput: true,
+    classNames: ['is-interactive-ui', 'is-frame-editor'],
+  },
+  fields: [
+    { path: 'sourceId', type: 'hidden', default: '' },
+    { path: 'sourceRows', type: 'hidden', default: 1 },
+    { path: 'sourceColumns', type: 'hidden', default: 1 },
+    { path: 'frames', type: 'hidden', default: [] },
+    {
+      path: 'rows',
+      type: 'integer',
+      default: 2,
+      min: 1,
+      max: 64,
+      required: true,
+      label: 'common.rows',
+    },
+    {
+      path: 'columns',
+      type: 'integer',
+      default: 2,
+      min: 1,
+      max: 64,
+      required: true,
+      label: 'common.columns',
+    },
+    {
+      path: 'fps',
+      type: 'number',
+      default: 8,
+      min: 0.000001,
+      step: 'any',
+      required: true,
+      label: 'common.framesPerSecond',
+    },
+  ],
+  setup: createFrameEditingTool,
+  dependencies: (item) => frameEditorParentIds(item),
+  changed(p, field) {
+    if (
+      ['rows', 'columns'].includes(field) &&
+      Number.isInteger(p.rows) &&
+      Number.isInteger(p.columns) &&
+      p.rows > 0 &&
+      p.columns > 0
+    )
+      p.frames = p.frames.slice(0, p.rows * p.columns)
+  },
+  validate: (p) =>
+    p.frames.length >= 2 && p.rows * p.columns >= 2
+      ? ''
+      : t('features.frameEditor.frameEditing.text008'),
+  submitLabel: 'features.frameEditor.frameEditing.text020',
+  task(p, _services, item) {
+    const editor = normalizeFrameEditor(p)
+    return {
+      endpoint: '/api/frame-sheet/edit',
+      wait: {
+        name: t('features.frameEditor.frameEditing.text009'),
+        width: item.width,
+        height: item.height,
+        references: frameEditorParentIds(item),
+      },
+      body: {
+        source_id: editor.sourceId,
+        source_rows: editor.sourceRows,
+        source_columns: editor.sourceColumns,
+        rows: editor.rows,
+        columns: editor.columns,
+        fps: editor.fps,
+        frames: editor.frames.map((frame) =>
+          frame.kind === 'source_cell'
+            ? { kind: 'source_cell', index: frame.index }
+            : { kind: 'asset', asset_id: frame.assetId },
+        ),
+      },
+    }
+  },
+}
+
+export const frameEditorCreation = {
+  render: (ui) => ui.row(ui.field('rows'), ui.field('columns')),
+  id: 'frame-sheet-edit',
+  title: 'features.frameEditor.frameEditingDialogs.text014',
+  storage: 'parameters',
+  node: {
+    type: 'feature_dialog',
+    width: 320,
+    minWidth: 280,
+    minHeight: 220,
+    generationInput: true,
+    classNames: ['is-interactive-ui'],
+  },
+  menu: [{ group: 'frame-sheet', title: 'html.text062', accepts: ['image'] }],
+  fields: [
+    {
+      path: 'rows',
+      type: 'integer',
+      default: 2,
+      min: 1,
+      max: 64,
+      required: true,
+      label: 'common.rows',
+    },
+    {
+      path: 'columns',
+      type: 'integer',
+      default: 2,
+      min: 1,
+      max: 64,
+      required: true,
+      label: 'common.columns',
+    },
+    { path: 'fps', type: 'hidden', default: 8 },
+    { path: 'frameCount', type: 'hidden', default: 0 },
+    { path: 'previewRows', type: 'hidden', default: 0 },
+    { path: 'previewColumns', type: 'hidden', default: 0 },
+  ],
+  prefill(source) {
+    const preview = frameSheetPreviewMeta(source)
+    return preview
+      ? {
+          rows: preview.rows,
+          columns: preview.columns,
+          fps: preview.fps,
+          frameCount: preview.frameCount,
+          previewRows: preview.rows,
+          previewColumns: preview.columns,
+        }
+      : {}
+  },
+  submitLabel: 'html.text072',
+  async execute(p, item, services) {
+    const count =
+      p.rows === p.previewRows && p.columns === p.previewColumns ? p.frameCount : p.rows * p.columns
+    await services.replaceWithFeature(item, 'frame-editor', {
+      sourceId: item.sourceId,
+      sourceRows: p.rows,
+      sourceColumns: p.columns,
+      rows: p.rows,
+      columns: p.columns,
+      fps: p.fps,
+      frames: Array.from({ length: count }, (_, index) => ({ kind: 'source_cell', index })),
+    })
+  },
+}
+
+function createFrameEditingTool(context) {
+  const {
+    clearRefDragHighlight,
+    hasActiveOperations,
+    imageUrl,
+    interaction,
+    renderCanvas,
+    renderCanvasItem,
+    renderChrome,
+    saveLayout,
+    setSelection,
+    syncSelectionClass,
+  } = context
+
+  function frameEditorLayoutItem(editorId) {
+    const item = state.layoutItems.find((candidate) => candidate.id === editorId)
+    return item?.type === 'frame_editor' ? item : null
+  }
+
+  async function commitFrameEditorChange(editorId) {
+    await saveLayout()
+    renderCanvasItem(editorId)
+    renderChrome()
+    setSelection([editorId])
+    syncSelectionClass()
+  }
+
+  function fitFrameEditorPreviewStage(preview, editor) {
+    const source = new Image()
+    source.onload = () => {
+      if (!source.naturalWidth || !source.naturalHeight) return
+      const ratio =
+        (source.naturalWidth * editor.sourceRows) / (source.naturalHeight * editor.sourceColumns)
+      if (!Number.isFinite(ratio) || ratio <= 0) return
+      preview.style.aspectRatio = String(ratio)
+      preview.style.width = `${Math.min(1, ratio) * 100}%`
+    }
+    source.src = imageUrl(editor.sourceId)
+  }
+
+  async function deleteFrameEditorFrame(editorId, frameIndex) {
+    const item = frameEditorLayoutItem(editorId)
+    const editor = normalizeFrameEditor(item)
+    if (!item || !editor || frameIndex < 0 || frameIndex >= editor.frames.length) return
+    item.frames = editor.frames.filter((_, index) => index !== frameIndex)
+    item.error = null
+    await commitFrameEditorChange(editorId)
+  }
+
+  async function dropOnFrameEditor(editorId, targetIndex, dataTransfer) {
+    const item = frameEditorLayoutItem(editorId)
+    const editor = normalizeFrameEditor(item)
+    if (!item || !editor) return
+
+    const internalRaw = dataTransfer.getData('application/x-frame-editor-frame')
+    if (internalRaw) {
+      try {
+        const internal = JSON.parse(internalRaw)
+        const fromIndex = Number(internal.index)
+        if (
+          internal.editorId !== editorId ||
+          !Number.isInteger(fromIndex) ||
+          fromIndex < 0 ||
+          fromIndex >= editor.frames.length
+        )
+          return
+        const frames = [...editor.frames]
+        if (targetIndex >= frames.length) {
+          const [moved] = frames.splice(fromIndex, 1)
+          frames.push(moved)
+        } else if (targetIndex !== fromIndex) {
+          const targetFrame = frames[targetIndex]
+          frames[targetIndex] = frames[fromIndex]
+          frames[fromIndex] = targetFrame
+        }
+        item.frames = frames
+        item.error = null
+        await commitFrameEditorChange(editorId)
+      } catch {
+        /* ignore malformed internal drag data */
+      }
+      return
+    }
+
+    let raw = dataTransfer.getData('application/x-canvas-image')
+    if (!raw) {
+      const id = dataTransfer.getData('text/plain')
+      if (id && id.includes('/')) raw = JSON.stringify({ id })
+    }
+    if (!raw) return
+    try {
+      const reference = JSON.parse(raw)
+      const assetId = String(reference.id || '').trim()
+      const image = state.images.find((candidate) => candidate.id === assetId)
+      if (!image || image.kind !== 'image') {
+        item.error = t('features.frameEditor.frameEditing.text005')
+        renderCanvasItem(editorId)
+        return
+      }
+      if (editor.frames.length >= editor.rows * editor.columns) {
+        if (editor.rows < 64) item.rows = editor.rows + 1
+        else if (editor.columns < 64) item.columns = editor.columns + 1
+        else {
+          item.error = t('features.frameEditor.frameEditing.text006')
+          renderCanvasItem(editorId)
+          return
+        }
+      }
+      const frames = [...editor.frames]
+      frames.splice(Math.min(targetIndex, frames.length), 0, { kind: 'asset', assetId })
+      item.frames = frames
+      item.error = null
+      await commitFrameEditorChange(editorId)
+    } catch {
+      item.error = t('features.frameEditor.frameEditing.text007')
+      renderCanvasItem(editorId)
+    }
+  }
+
+  function mountFrameEditorNode(container, node) {
+    const editor = normalizeFrameEditor(node)
+    if (!editor) return
+    container.classList.add('is-frame-editor')
+
+    const scroll = document.createElement('div')
+    scroll.className = 'frame-editor-grid-scroll frame-editor-interactive'
+    const grid = document.createElement('div')
+    grid.className = 'frame-editor-grid'
+    grid.dataset.accept = 'image'
+    grid.style.gridTemplateColumns = `repeat(${editor.columns}, 72px)`
+    const capacity = editor.rows * editor.columns
+    for (let index = 0; index < capacity; index += 1) {
+      const cell = document.createElement('div')
+      const frame = editor.frames[index]
+      cell.className = `frame-editor-cell${frame ? ' has-frame' : ' is-empty'}`
+      cell.dataset.index = String(index)
+      cell.addEventListener('dragover', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        event.dataTransfer.dropEffect = Array.from(event.dataTransfer.types).includes(
+          'application/x-frame-editor-frame',
+        )
+          ? 'move'
+          : 'copy'
+        cell.classList.add('is-drop')
+      })
+      cell.addEventListener('dragleave', () => cell.classList.remove('is-drop'))
+      cell.addEventListener('drop', async (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        interaction.htmlDrag = false
+        clearRefDragHighlight()
+        await dropOnFrameEditor(node.id, index, event.dataTransfer)
+      })
+      if (frame) {
+        cell.draggable = !ensureFeatureState(node).busy
+        cell.appendChild(frameEditorThumbnail(editor, frame, imageUrl))
+        const order = document.createElement('span')
+        order.className = 'frame-editor-order'
+        order.textContent = String(index + 1)
+        const remove = document.createElement('button')
+        remove.type = 'button'
+        remove.className = 'frame-editor-remove'
+        remove.textContent = '×'
+        remove.title = t('features.frameEditor.frameEditing.text014')
+        remove.disabled = ensureFeatureState(node).busy
+        remove.addEventListener('click', (event) => {
+          event.stopPropagation()
+          deleteFrameEditorFrame(node.id, index)
+        })
+        cell.append(order, remove)
+        cell.addEventListener('dragstart', (event) => {
+          event.stopPropagation()
+          event.dataTransfer.setData(
+            'application/x-frame-editor-frame',
+            JSON.stringify({ editorId: node.id, index }),
+          )
+          event.dataTransfer.effectAllowed = 'move'
+          interaction.htmlDrag = true
+          cell.classList.add('is-dragging')
+        })
+        cell.addEventListener('dragend', () => {
+          interaction.htmlDrag = false
+          cell.classList.remove('is-dragging')
+        })
+      } else {
+        const empty = document.createElement('span')
+        empty.className = 'frame-editor-empty-label'
+        empty.textContent = t('features.frameEditor.frameEditing.text015')
+        cell.appendChild(empty)
+      }
+      grid.appendChild(cell)
+    }
+    scroll.appendChild(grid)
+
+    const workspace = document.createElement('div')
+    workspace.className = 'frame-editor-workspace frame-editor-interactive'
+    const previewPanel = document.createElement('aside')
+    previewPanel.className = 'frame-editor-preview'
+    const previewHead = document.createElement('div')
+    previewHead.className = 'frame-editor-preview-head'
+    const previewTitle = document.createElement('strong')
+    previewTitle.textContent = t('features.frameEditor.frameEditing.text016')
+    const previewCounter = document.createElement('span')
+    previewCounter.dataset.role = 'frame-editor-preview-counter'
+    previewHead.append(previewTitle, previewCounter)
+    const previewViewport = document.createElement('div')
+    previewViewport.className = 'frame-editor-preview-viewport'
+    const previewStage = document.createElement('div')
+    previewStage.className = 'frame-editor-preview-stage'
+    previewStage.dataset.editorId = node.id
+    previewViewport.appendChild(previewStage)
+    const previewHint = document.createElement('span')
+    previewHint.className = 'frame-editor-preview-hint'
+    previewHint.textContent = t('features.frameEditor.frameEditing.text017')
+    previewPanel.append(previewHead, previewViewport, previewHint)
+    workspace.append(scroll, previewPanel)
+
+    const play = state.frameSheetPlayback[node.id] || { index: 0, acc: 0 }
+    if (editor.frames.length) play.index %= editor.frames.length
+    else play.index = 0
+    state.frameSheetPlayback[node.id] = play
+    applyFrameEditorPreviewFrame(previewStage, editor, play.index, imageUrl)
+    fitFrameEditorPreviewStage(previewStage, editor)
+
+    const hint = document.createElement('p')
+    hint.className = `frame-editor-hint${node.error ? ' is-error' : ''}`
+    hint.textContent = node.error || t('features.frameEditor.frameEditing.text018')
+
+    workspace.addEventListener('pointerdown', (event) => event.stopPropagation())
+    container.append(workspace, hint)
+  }
+
+  return {
+    mountView(host, item) {
+      const content = document.createElement('div')
+      host.append(content)
+      let signature = ''
+      const update = () => {
+        const current = ensureFeatureState(item)
+        const next = JSON.stringify([
+          current.rows,
+          current.columns,
+          current.fps,
+          current.frames,
+          current.busy,
+        ])
+        if (signature === next) return
+        signature = next
+        content.replaceChildren()
+        mountFrameEditorNode(content, current)
+      }
+      update()
+      return subscribeFeatureState(item.id, update)
+    },
+    applyFrameEditorPreviewFrame,
+    mountFrameEditorNode,
+  }
+}
+export function frameEditorThumbnail(editor, frame, imageUrl) {
+  const preview = document.createElement('div')
+  preview.className = 'frame-editor-thumb'
+  const image = document.createElement('img')
+  image.alt = t('features.frameEditor.frameEditing.text001')
+  image.draggable = false
+  if (frame.kind === 'source_cell') {
+    preview.classList.add('is-source-cell')
+    image.src = imageUrl(editor.sourceId)
+    image.style.width = `${editor.sourceColumns * 100}%`
+    image.style.height = `${editor.sourceRows * 100}%`
+    const row = Math.floor(frame.index / editor.sourceColumns)
+    const column = frame.index % editor.sourceColumns
+    image.style.transform = `translate(${(-100 * column) / editor.sourceColumns}%, ${(-100 * row) / editor.sourceRows}%)`
+  } else {
+    image.src = imageUrl(frame.assetId)
+  }
+  preview.appendChild(image)
+  return preview
+}
+
+export function applyFrameEditorPreviewFrame(preview, editor, index, imageUrl) {
+  if (!preview) return
+  const frameCount = editor.frames.length
+  const counter = preview
+    .closest('.frame-editor-preview')
+    ?.querySelector('[data-role="frame-editor-preview-counter"]')
+  if (!frameCount) {
+    const empty = document.createElement('span')
+    empty.className = 'frame-editor-preview-empty'
+    empty.textContent = t('features.frameEditor.frameEditing.text002')
+    preview.replaceChildren(empty)
+    if (counter) counter.textContent = '0 / 0'
+    return
+  }
+
+  const frameIndex = Math.max(0, index % frameCount)
+  const frame = frameEditorThumbnail(editor, editor.frames[frameIndex], imageUrl)
+  frame.classList.add('frame-editor-preview-frame')
+  preview.replaceChildren(frame)
+  if (counter) counter.textContent = `${frameIndex + 1} / ${frameCount}`
+}