evomeme 0.1.9 → 0.1.10-beta.13

package/dist/canvas-public/features/editing/color-key.js

@@ -0,0 +1,471 @@
+import {
+  ensureFeatureState,
+  peekFeatureState,
+  notifyFeatureState,
+} from '../../core/feature-state.js'
+import { t, translateWorkerError } from '../../language/index.js'
+import { api } from '../../core/api.js'
+import { state } from '../../core/state.js'
+import { el } from '../../ui/controls.js'
+
+export default {
+  styles: `.ui-image-preview canvas { cursor: crosshair; }`,
+  render: (ui) =>
+    ui.stack(
+      ui.view(),
+      ui.row(ui.field('color'), ui.field('strength')),
+      ui.field('contiguousOnly'),
+      ui.field('despill'),
+    ),
+  menu: [{ group: 'cutout', accepts: ['image'] }],
+  id: 'color-key',
+  title: 'features.editing.colorKey.text009',
+  storage: 'colorKey',
+  node: {
+    type: 'color_key_editor',
+    width: 360,
+    minWidth: 300,
+    minHeight: 360,
+    generationInput: true,
+    classNames: ['is-interactive-ui', 'is-color-key-editor'],
+  },
+  fields: [
+    {
+      path: 'color',
+      type: 'color',
+      default: '#ffffff',
+      label: 'features.editing.colorKey.text013',
+    },
+    {
+      path: 'strength',
+      type: 'integer',
+      default: 80,
+      min: 0,
+      max: 100,
+      label: 'features.editing.colorKey.text014',
+    },
+    {
+      path: 'contiguousOnly',
+      type: 'boolean',
+      default: false,
+      label: 'features.editing.colorKey.text015',
+    },
+    {
+      path: 'despill',
+      type: 'boolean',
+      default: false,
+      label: 'features.editing.colorKey.text016',
+    },
+  ],
+  runtimeDefaults: () => ({
+    previewToken: null,
+    previewUrl: '',
+    previewPending: false,
+    previewError: '',
+    previewSequence: 0,
+    previewTimer: null,
+    previewWorker: null,
+    previewWorkerReady: false,
+    previewWorkerBusy: false,
+    previewQueued: false,
+    exactWorker: null,
+    resultBlob: null,
+    sourcePixels: null,
+    sourceWidth: 0,
+    sourceHeight: 0,
+  }),
+  setup: createColorKeyTool,
+  submitLabel: 'features.editing.colorKey.text002',
+  ready: (p) => Boolean(p.resultBlob) && !p.previewPending,
+}
+
+function createColorKeyTool(context) {
+  const { findNodeEl, imageUrl, saveLayout } = context
+
+  function workerErrorText(message) {
+    if (message?.messageKey === 'workers.imageLoadFailed') {
+      return `${t('workers.imageLoadFailed')}${message.messageVariables?.status ?? ''}`
+    }
+    return translateWorkerError(message)
+  }
+
+  function colorKeyByteToHex(value) {
+    return Math.max(0, Math.min(255, Math.round(value)))
+      .toString(16)
+      .padStart(2, '0')
+  }
+
+  function updateColorKeyEditorUi(editorId) {
+    notifyFeatureState(editorId)
+    const ds = peekFeatureState(editorId)
+    const node = findNodeEl(editorId)
+    if (!ds || !node) return
+    const status = node.querySelector('[data-role="ui-preview-status"]')
+    const loading = node.querySelector('[data-role="color-key-loading"]')
+    if (loading) loading.hidden = !ds.previewPending && !ds.busy
+    if (status) {
+      status.hidden = !ds.previewError
+      status.classList.toggle('is-error', Boolean(ds.previewError))
+      status.textContent = ds.previewError || ''
+    }
+  }
+
+  function paintColorKeySource(editorId, canvas) {
+    const ds = peekFeatureState(editorId)
+    if (!ds?.sourcePixels || !canvas?.isConnected) return
+    canvas.width = ds.sourceWidth
+    canvas.height = ds.sourceHeight
+    canvas
+      .getContext('2d')
+      .putImageData(
+        new ImageData(new Uint8ClampedArray(ds.sourcePixels), ds.sourceWidth, ds.sourceHeight),
+        0,
+        0,
+      )
+  }
+
+  function loadColorKeyExactPreview(editorId, previewUrl) {
+    const ds = peekFeatureState(editorId)
+    const canvas = findNodeEl(editorId)?.querySelector('[data-role="color-key-preview"]')
+    if (!ds || !canvas || !previewUrl) return
+    const image = new Image()
+    image.crossOrigin = 'anonymous'
+    image.onload = () => {
+      if (!canvas.isConnected || peekFeatureState(editorId)?.previewUrl !== previewUrl) return
+      const scale = Math.min(1, 900 / Math.max(image.naturalWidth, image.naturalHeight))
+      canvas.width = Math.max(1, Math.round(image.naturalWidth * scale))
+      canvas.height = Math.max(1, Math.round(image.naturalHeight * scale))
+      const context = canvas.getContext('2d')
+      context.clearRect(0, 0, canvas.width, canvas.height)
+      context.drawImage(image, 0, 0, canvas.width, canvas.height)
+      ds.previewPending = false
+      updateColorKeyEditorUi(editorId)
+    }
+    image.onerror = () => {
+      const current = peekFeatureState(editorId)
+      if (!current || current.previewUrl !== previewUrl) return
+      current.previewPending = false
+      current.previewToken = null
+      current.previewError = t('features.editing.colorKey.text003')
+      updateColorKeyEditorUi(editorId)
+    }
+    image.src = previewUrl
+  }
+
+  function loadColorKeySourcePreview(editorId, sourceId) {
+    const ds = peekFeatureState(editorId)
+    const canvas = findNodeEl(editorId)?.querySelector('[data-role="color-key-preview"]')
+    if (!ds || !canvas) return
+    if (ds.sourcePixels && ds.sourceWidth > 0 && ds.sourceHeight > 0) {
+      if (ds.previewUrl && !ds.previewPending) loadColorKeyExactPreview(editorId, ds.previewUrl)
+      else paintColorKeySource(editorId, canvas)
+      return
+    }
+    const image = new Image()
+    image.crossOrigin = 'anonymous'
+    image.onload = () => {
+      const current = peekFeatureState(editorId)
+      const currentCanvas = findNodeEl(editorId)?.querySelector('[data-role="color-key-preview"]')
+      if (!current || !currentCanvas) return
+      const scale = Math.min(1, 900 / Math.max(image.naturalWidth, image.naturalHeight))
+      const width = Math.max(1, Math.round(image.naturalWidth * scale))
+      const height = Math.max(1, Math.round(image.naturalHeight * scale))
+      const buffer = document.createElement('canvas')
+      buffer.width = width
+      buffer.height = height
+      const context = buffer.getContext('2d', { willReadFrequently: true })
+      context.drawImage(image, 0, 0, width, height)
+      current.sourcePixels = context.getImageData(0, 0, width, height).data
+      current.sourceWidth = width
+      current.sourceHeight = height
+      if (current.previewUrl && !current.previewPending) {
+        loadColorKeyExactPreview(editorId, current.previewUrl)
+      } else {
+        paintColorKeySource(editorId, currentCanvas)
+      }
+    }
+    image.onerror = () => {
+      ds.previewError = t('features.editing.colorKey.text004')
+      updateColorKeyEditorUi(editorId)
+    }
+    image.src = imageUrl(sourceId)
+  }
+
+  function scheduleColorKeyLayoutSave(editorId) {
+    const ds = peekFeatureState(editorId)
+    if (!ds) return
+    clearTimeout(ds.layoutSaveTimer)
+    ds.layoutSaveTimer = setTimeout(() => {
+      ds.layoutSaveTimer = null
+      saveLayout(state.layoutItems).catch((error) =>
+        console.warn('save color key settings failed', error),
+      )
+    }, 220)
+  }
+
+  function ensureColorKeyPreviewWorker(editorId, sourceId) {
+    const ds = peekFeatureState(editorId)
+    if (!ds || ds.previewWorker) return
+    const worker = new Worker('/workers/color-key-worker.js')
+    ds.previewWorker = worker
+    ds.previewWorkerReady = false
+    worker.addEventListener('message', (event) => {
+      const current = peekFeatureState(editorId)
+      if (!current || current.previewWorker !== worker) {
+        event.data?.bitmap?.close?.()
+        return
+      }
+      const message = event.data || {}
+      if (message.type === 'ready') {
+        current.previewWorkerReady = true
+        requestColorKeyWorkerPreview(editorId)
+        return
+      }
+      if (message.type === 'preview') {
+        current.previewWorkerBusy = false
+        const exactResultIsVisible = Boolean(
+          current.resultBlob && current.previewToken === `browser-${current.previewSequence}`,
+        )
+        // The preview worker processes one request at a time. While the slider is
+        // moving, show each completed frame instead of discarding it merely because
+        // a newer value is already queued. This keeps the image updating throughout
+        // the drag and remains ordered; once the exact result is visible, an older
+        // low-resolution frame must not overwrite it.
+        if (message.bitmap && !exactResultIsVisible) {
+          const canvas = findNodeEl(editorId)?.querySelector('[data-role="color-key-preview"]')
+          if (canvas) {
+            canvas.width = message.bitmap.width
+            canvas.height = message.bitmap.height
+            const context = canvas.getContext('2d')
+            context.clearRect(0, 0, canvas.width, canvas.height)
+            context.drawImage(message.bitmap, 0, 0)
+          }
+        }
+        message.bitmap?.close?.()
+        if (current.previewQueued) requestColorKeyWorkerPreview(editorId)
+        return
+      }
+      if (message.type === 'error') {
+        current.previewWorkerBusy = false
+        current.previewError = `${t('features.editing.colorKey.text005')}${workerErrorText(message)}`
+        updateColorKeyEditorUi(editorId)
+      }
+    })
+    worker.addEventListener('error', () => {
+      const current = peekFeatureState(editorId)
+      if (!current || current.previewWorker !== worker) return
+      current.previewWorkerBusy = false
+      current.previewError = t('features.editing.colorKey.text006')
+      updateColorKeyEditorUi(editorId)
+    })
+    worker.postMessage({ type: 'init', purpose: 'preview', url: imageUrl(sourceId) })
+  }
+
+  function requestColorKeyWorkerPreview(editorId) {
+    const ds = peekFeatureState(editorId)
+    const item = state.layoutItems.find((candidate) => candidate.id === editorId)
+    if (!ds || !item?.sourceId) return
+    ensureColorKeyPreviewWorker(editorId, item.sourceId)
+    if (!ds.previewWorkerReady || ds.previewWorkerBusy) {
+      ds.previewQueued = true
+      return
+    }
+    ds.previewQueued = false
+    ds.previewWorkerBusy = true
+    ds.previewWorker.postMessage({
+      type: 'preview',
+      requestId: ds.previewSequence,
+      color: ds.color,
+      strength: ds.strength,
+      contiguousOnly: ds.contiguousOnly,
+      despill: ds.despill,
+    })
+  }
+
+  function startColorKeyExactWorker(editorId, sourceId, sequence) {
+    const ds = peekFeatureState(editorId)
+    if (!ds || ds.previewSequence !== sequence) return
+    ds.exactWorker?.terminate()
+    const worker = new Worker('/workers/color-key-worker.js')
+    ds.exactWorker = worker
+    worker.addEventListener('message', (event) => {
+      const current = peekFeatureState(editorId)
+      if (!current || current.exactWorker !== worker || current.previewSequence !== sequence) return
+      const message = event.data || {}
+      if (message.type === 'ready') {
+        worker.postMessage({
+          type: 'exact',
+          requestId: sequence,
+          color: current.color,
+          strength: current.strength,
+          contiguousOnly: current.contiguousOnly,
+          despill: current.despill,
+        })
+        return
+      }
+      if (message.type === 'exact' && message.requestId === sequence && message.blob) {
+        worker.terminate()
+        current.exactWorker = null
+        if (current.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(current.previewUrl)
+        current.resultBlob = message.blob
+        current.previewToken = `browser-${sequence}`
+        current.previewUrl = URL.createObjectURL(message.blob)
+        current.previewError = ''
+        updateColorKeyEditorUi(editorId)
+        loadColorKeyExactPreview(editorId, current.previewUrl)
+        return
+      }
+      if (message.type === 'error') {
+        worker.terminate()
+        current.exactWorker = null
+        current.previewPending = false
+        current.previewToken = null
+        current.resultBlob = null
+        current.previewError = `${t('features.editing.colorKey.text005')}${workerErrorText(message)}`
+        updateColorKeyEditorUi(editorId)
+      }
+    })
+    worker.addEventListener('error', () => {
+      const current = peekFeatureState(editorId)
+      if (!current || current.exactWorker !== worker || current.previewSequence !== sequence) return
+      worker.terminate()
+      current.exactWorker = null
+      current.previewPending = false
+      current.previewToken = null
+      current.resultBlob = null
+      current.previewError = t('features.editing.colorKey.text006')
+      updateColorKeyEditorUi(editorId)
+    })
+    worker.postMessage({ type: 'init', purpose: 'exact', url: imageUrl(sourceId) })
+  }
+
+  function scheduleColorKeyExactPreview(editorId, delay = 140) {
+    const ds = peekFeatureState(editorId)
+    const item = state.layoutItems.find((candidate) => candidate.id === editorId)
+    if (!ds || !item?.sourceId) return
+    clearTimeout(ds.previewTimer)
+    ds.exactWorker?.terminate()
+    ds.exactWorker = null
+    ds.previewSequence += 1
+    const sequence = ds.previewSequence
+    ds.previewToken = null
+    if (ds.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(ds.previewUrl)
+    ds.previewUrl = ''
+    ds.resultBlob = null
+    ds.previewPending = true
+    ds.previewError = ''
+    requestColorKeyWorkerPreview(editorId)
+    updateColorKeyEditorUi(editorId)
+    ds.previewTimer = setTimeout(() => {
+      ds.previewTimer = null
+      startColorKeyExactWorker(editorId, item.sourceId, sequence)
+    }, delay)
+  }
+
+  function changeColorKeySettings(editorId, patch) {
+    const ds = peekFeatureState(editorId)
+    if (!ds || ds.busy) return
+    if (patch.color && /^#[0-9a-f]{6}$/i.test(patch.color)) ds.color = patch.color.toLowerCase()
+    if (patch.strength != null)
+      ds.strength = Math.max(0, Math.min(100, Number(patch.strength) || 0))
+    if ('contiguousOnly' in patch) ds.contiguousOnly = patch.contiguousOnly === true
+    if ('despill' in patch) ds.despill = patch.despill === true
+    ds.previewToken = null
+    ds.previewPending = true
+    ds.previewError = ''
+    scheduleColorKeyExactPreview(editorId)
+    scheduleColorKeyLayoutSave(editorId)
+    updateColorKeyEditorUi(editorId)
+  }
+
+  function disposeColorKeyEditorState(ds) {
+    if (!ds) return
+    clearTimeout(ds.previewTimer)
+    clearTimeout(ds.layoutSaveTimer)
+    ds.previewWorker?.terminate()
+    ds.exactWorker?.terminate()
+    if (ds.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(ds.previewUrl)
+  }
+
+  function task(item, ds) {
+    const blob = ds.resultBlob
+    return {
+      wait: {
+        name: t('features.editing.colorKey.text007'),
+        width: item.width,
+        height: item.height,
+        references: [{ id: item.sourceId, role: 'source' }],
+      },
+      request: (operationId) => {
+        const query = new URLSearchParams({
+          source_id: item.sourceId,
+          color: ds.color,
+          strength: String(ds.strength),
+          contiguous_only: String(ds.contiguousOnly === true),
+          despill: String(ds.despill === true),
+          client_operation_id: operationId,
+        })
+        return api(`/api/color-key/apply-browser?${query}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'image/png' },
+          body: blob,
+        })
+      },
+    }
+  }
+
+  function mountColorKeyEditorNode(container, node) {
+    const ds = ensureFeatureState(node)
+    container.classList.add('is-color-key-editor')
+    const previewStage = el('div', 'ui-image-preview')
+    const canvas = document.createElement('canvas')
+    canvas.dataset.role = 'color-key-preview'
+    canvas.title = t('features.editing.colorKey.text011')
+    canvas.addEventListener('click', (event) => {
+      if (!ds.sourcePixels || ds.busy) return
+      const rect = canvas.getBoundingClientRect()
+      const x = Math.max(
+        0,
+        Math.min(
+          ds.sourceWidth - 1,
+          Math.floor(((event.clientX - rect.left) * ds.sourceWidth) / rect.width),
+        ),
+      )
+      const y = Math.max(
+        0,
+        Math.min(
+          ds.sourceHeight - 1,
+          Math.floor(((event.clientY - rect.top) * ds.sourceHeight) / rect.height),
+        ),
+      )
+      const offset = (y * ds.sourceWidth + x) * 4
+      const color = `#${colorKeyByteToHex(ds.sourcePixels[offset])}${colorKeyByteToHex(ds.sourcePixels[offset + 1])}${colorKeyByteToHex(ds.sourcePixels[offset + 2])}`
+      changeColorKeySettings(node.id, { color })
+    })
+    const loading = el('div', 'ui-image-preview-loading')
+    loading.dataset.role = 'color-key-loading'
+    loading.hidden = !ds.previewPending && !ds.busy
+    loading.setAttribute('aria-label', t('features.editing.colorKey.text012'))
+    loading.appendChild(el('span', 'ui-image-preview-spinner'))
+    previewStage.append(canvas, loading)
+
+    const status = el('p', 'ui-preview-status')
+    status.dataset.role = 'ui-preview-status'
+    status.hidden = true
+
+    previewStage.addEventListener('pointerdown', (event) => event.stopPropagation())
+    container.append(previewStage, status)
+    requestAnimationFrame(() => {
+      loadColorKeySourcePreview(node.id, node.sourceId)
+      if (!ds.previewToken && !ds.previewPending) scheduleColorKeyExactPreview(node.id, 0)
+      updateColorKeyEditorUi(node.id)
+    })
+  }
+
+  return {
+    mountView: mountColorKeyEditorNode,
+    parametersChanged: (id) => changeColorKeySettings(id, {}),
+    task,
+    dispose: (id) => disposeColorKeyEditorState(peekFeatureState(id)),
+  }
+}

package/dist/canvas-public/features/editing/cutout.js

@@ -0,0 +1,20 @@
+import { t } from '../../language/index.js'
+
+export default {
+  id: 'cutout',
+  title: 'html.text052',
+  action: true,
+  menu: [{ group: 'cutout', title: 'html.text052', accepts: ['image'] }],
+  task(_params, _services, source) {
+    return {
+      endpoint: '/api/cutout',
+      body: { id: source.id },
+      wait: {
+        name: t('features.editing.imageProcessing.text014'),
+        width: source.width,
+        height: source.height,
+        references: [{ id: source.id, role: 'source' }],
+      },
+    }
+  },
+}