evomeme 0.1.9 → 0.1.10-beta.13

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

@@ -0,0 +1,532 @@
+import { t, errorT } from '../../language/index.js'
+import {
+  ensureFeatureState,
+  notifyFeatureState,
+  subscribeFeatureState,
+} from '../../core/feature-state.js'
+import { el } from '../../ui/controls.js'
+
+export default {
+  styles: `
+.image-canvas-size-stage {
+  position: relative;
+  width: 100%;
+  height: 340px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background-color: #0d1117;
+  background-image:
+    linear-gradient(45deg, rgba(255, 255, 255, 0.055) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(255, 255, 255, 0.055) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.055) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.055) 75%);
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+  background-size: 16px 16px;
+  touch-action: none;
+}
+
+.image-canvas-size-stage canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.image-canvas-size-frame {
+  position: absolute;
+  border: 2px solid var(--accent);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.72), 0 0 14px rgba(61, 214, 198, 0.2);
+  pointer-events: none;
+}
+
+.image-canvas-size-edge {
+  position: absolute;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  pointer-events: auto;
+}
+
+.image-canvas-size-edge::after {
+  position: absolute;
+  content: '';
+  border-radius: 999px;
+  background: var(--accent);
+}
+
+.image-canvas-size-edge.is-top,
+.image-canvas-size-edge.is-bottom {
+  left: -8px;
+  width: calc(100% + 16px);
+  height: 16px;
+  cursor: ns-resize;
+}
+
+.image-canvas-size-edge.is-top { top: -9px; }
+.image-canvas-size-edge.is-bottom { bottom: -9px; }
+
+.image-canvas-size-edge.is-top::after,
+.image-canvas-size-edge.is-bottom::after {
+  top: 7px;
+  left: 50%;
+  width: 44px;
+  height: 3px;
+  transform: translateX(-50%);
+}
+
+.image-canvas-size-edge.is-left,
+.image-canvas-size-edge.is-right {
+  top: -8px;
+  width: 16px;
+  height: calc(100% + 16px);
+  cursor: ew-resize;
+}
+
+.image-canvas-size-edge.is-left { left: -9px; }
+.image-canvas-size-edge.is-right { right: -9px; }
+
+.image-canvas-size-edge.is-left::after,
+.image-canvas-size-edge.is-right::after {
+  top: 50%;
+  left: 7px;
+  width: 3px;
+  height: 44px;
+  transform: translateY(-50%);
+}
+
+.image-canvas-size-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.image-canvas-size-fields .seq-field {
+  grid-template-columns: auto minmax(80px, 1fr) auto;
+}
+`,
+  render: (ui) => ui.stack(ui.view(), ui.row(ui.field('width'), ui.field('height'))),
+  id: 'image-canvas-size',
+  title: 'html.text048',
+  storage: 'parameters',
+  menu: [{ title: 'html.text048', accepts: ['image'] }],
+  node: {
+    type: 'feature_dialog',
+    width: 680,
+    minWidth: 380,
+    minHeight: 420,
+    generationInput: true,
+    classNames: ['is-interactive-ui'],
+  },
+  fields: [
+    {
+      path: 'width',
+      type: 'integer',
+      default: 1,
+      min: 1,
+      max: 16384,
+      required: true,
+      label: 'html.text103',
+    },
+    {
+      path: 'height',
+      type: 'integer',
+      default: 1,
+      min: 1,
+      max: 16384,
+      required: true,
+      label: 'html.text104',
+    },
+    { path: 'edges', type: 'hidden', default: { left: 0, right: 0, top: 0, bottom: 0 } },
+  ],
+  runtimeDefaults: () => ({ ready: false, sourceWidth: 0, sourceHeight: 0 }),
+  changed(p, path) {
+    if (
+      !p.ready ||
+      !['width', 'height'].includes(path) ||
+      !Number.isInteger(p[path]) ||
+      p[path] < 1
+    )
+      return
+    const horizontal = path === 'width'
+    const delta = p[path] - (horizontal ? p.sourceWidth : p.sourceHeight)
+    const before = Math.floor(delta / 2)
+    p.edges[horizontal ? 'left' : 'top'] = before
+    p.edges[horizontal ? 'right' : 'bottom'] = delta - before
+  },
+  ready: (p) =>
+    p.ready && p.width * p.height <= 67108864 && Object.values(p.edges).some((n) => n !== 0),
+  submitLabel: 'html.text072',
+  setup(services) {
+    return {
+      mountView(host, item) {
+        const p = ensureFeatureState(item)
+        const stage = el('div', 'image-canvas-size-stage'),
+          canvas = el('canvas'),
+          frame = el('div', 'image-canvas-size-frame')
+        for (const [edge, label] of [
+          ['top', 'html.text015'],
+          ['right', 'html.text016'],
+          ['bottom', 'html.text017'],
+          ['left', 'html.text018'],
+        ]) {
+          const handle = el('button', 'image-canvas-size-edge is-' + edge)
+          handle.type = 'button'
+          handle.dataset.edge = edge
+          handle.setAttribute('aria-label', t(label))
+          frame.append(handle)
+        }
+        stage.append(canvas, frame)
+        const reset = el('button', 'ghost-btn', t('html.text070'))
+        reset.type = 'button'
+        host.append(stage, reset)
+        let initializing = true,
+          disposed = false,
+          syncing = false
+        const editor = new ImageCanvasSizeEditor({
+          stage,
+          canvas,
+          frame,
+          onChange(value) {
+            if (initializing || syncing || disposed) return
+            p.width = value.width
+            p.height = value.height
+            p.edges = { left: value.left, top: value.top, right: value.right, bottom: value.bottom }
+            syncing = true
+            notifyFeatureState(item.id)
+            syncing = false
+            services.saveLayout().catch((error) => {
+              p.messages.push({ error: String(error.message || error) })
+              notifyFeatureState(item.id)
+            })
+          },
+        })
+        const sync = () => {
+          if (!p.ready || syncing) return
+          editor.setBusy(p.busy)
+          reset.disabled = p.busy
+          editor.edges = { ...p.edges }
+          const size = editor.getValue()
+          const changed = p.width !== size.width || p.height !== size.height
+          p.width = size.width
+          p.height = size.height
+          editor.render()
+          if (changed) {
+            syncing = true
+            notifyFeatureState(item.id)
+            syncing = false
+          }
+        }
+        const unsubscribe = subscribeFeatureState(item.id, sync)
+        reset.addEventListener('click', () => editor.reset())
+        editor
+          .load(services.imageUrl(item.sourceId))
+          .then(() => {
+            if (disposed) return
+            editor.edges = { ...p.edges }
+            const size = editor.getValue()
+            p.width = size.width
+            p.height = size.height
+            p.sourceWidth = editor.sourceWidth
+            p.sourceHeight = editor.sourceHeight
+            initializing = false
+            p.ready = true
+            editor.render()
+            notifyFeatureState(item.id)
+          })
+          .catch((error) => {
+            if (!disposed) {
+              p.messages.push({ error: String(error.message || error) })
+              notifyFeatureState(item.id)
+            }
+          })
+        return () => {
+          disposed = true
+          p.ready = false
+          unsubscribe()
+          editor.dispose()
+        }
+      },
+    }
+  },
+  task(p, _services, item) {
+    return {
+      endpoint: '/api/image-canvas-size',
+      body: { id: item.sourceId, ...p.edges },
+      wait: { name: t('features.editing.imageProcessing.text003'), references: [item.sourceId] },
+    }
+  },
+}
+
+/**
+ * 图片画布尺寸编辑器：负责预览原图、拖动四条边缘，并把宽高输入转换为裁切/透明扩边参数。
+ */
+
+const MAX_SIDE = 16_384
+const MAX_PIXELS = 67_108_864
+const PREVIEW_PADDING = 52
+
+export class ImageCanvasSizeEditor {
+  constructor({ stage, canvas, frame, widthInput, heightInput, onChange }) {
+    this.stage = stage
+    this.canvas = canvas
+    this.frame = frame
+    this.widthInput = widthInput
+    this.heightInput = heightInput
+    this.onChange = onChange
+    this.image = null
+    this.sourceWidth = 0
+    this.sourceHeight = 0
+    this.edges = { left: 0, top: 0, right: 0, bottom: 0 }
+    this.view = null
+    this.drag = null
+    this.abortController = new AbortController()
+    this.resizeObserver = new ResizeObserver(() => this.render())
+    this.resizeObserver.observe(stage)
+    this.bindEvents()
+  }
+
+  bindEvents() {
+    const signal = this.abortController.signal
+    this.widthInput?.addEventListener('change', () => this.applyWidth(), { signal })
+    this.heightInput?.addEventListener('change', () => this.applyHeight(), { signal })
+    for (const handle of this.frame.querySelectorAll('[data-edge]')) {
+      handle.addEventListener(
+        'pointerdown',
+        (event) => this.startDrag(event, handle.dataset.edge),
+        { signal },
+      )
+    }
+    window.addEventListener('pointermove', (event) => this.moveDrag(event), { signal })
+    window.addEventListener('pointerup', (event) => this.endDrag(event), { signal })
+    window.addEventListener('pointercancel', (event) => this.endDrag(event), { signal })
+  }
+
+  async load(url) {
+    const image = new Image()
+    await new Promise((resolve, reject) => {
+      image.onload = resolve
+      image.onerror = () => reject(new Error(errorT('features.editing.imageCanvasSizeEditor.text001')))
+      image.src = url
+    })
+    this.image = image
+    this.sourceWidth = image.naturalWidth
+    this.sourceHeight = image.naturalHeight
+    this.reset()
+    return { width: this.sourceWidth, height: this.sourceHeight }
+  }
+
+  reset() {
+    this.edges = { left: 0, top: 0, right: 0, bottom: 0 }
+    this.render()
+    this.emitChange()
+  }
+
+  getValue() {
+    return {
+      ...this.edges,
+      sourceWidth: this.sourceWidth,
+      sourceHeight: this.sourceHeight,
+      width: this.sourceWidth + this.edges.left + this.edges.right,
+      height: this.sourceHeight + this.edges.top + this.edges.bottom,
+    }
+  }
+
+  isValid() {
+    const value = this.getValue()
+    return (
+      value.width >= 1 &&
+      value.height >= 1 &&
+      value.width <= MAX_SIDE &&
+      value.height <= MAX_SIDE &&
+      value.width * value.height <= MAX_PIXELS
+    )
+  }
+
+  setBusy(busy) {
+    if (this.widthInput) this.widthInput.disabled = busy
+    if (this.heightInput) this.heightInput.disabled = busy
+    for (const handle of this.frame.querySelectorAll('[data-edge]')) handle.disabled = busy
+  }
+
+  applyWidth() {
+    const width = Math.round(Number(this.widthInput.value))
+    if (!Number.isSafeInteger(width) || width < 1 || width > MAX_SIDE) {
+      this.render()
+      this.emitChange()
+      return
+    }
+    const difference = width - this.sourceWidth
+    this.edges.left = Math.floor(difference / 2)
+    this.edges.right = difference - this.edges.left
+    this.render()
+    this.emitChange()
+  }
+
+  applyHeight() {
+    const height = Math.round(Number(this.heightInput.value))
+    if (!Number.isSafeInteger(height) || height < 1 || height > MAX_SIDE) {
+      this.render()
+      this.emitChange()
+      return
+    }
+    const difference = height - this.sourceHeight
+    this.edges.top = Math.floor(difference / 2)
+    this.edges.bottom = difference - this.edges.top
+    this.render()
+    this.emitChange()
+  }
+
+  startDrag(event, edge) {
+    if (event.button !== 0 || !this.image || !['left', 'top', 'right', 'bottom'].includes(edge))
+      return
+    event.preventDefault()
+    event.stopPropagation()
+    const rect = this.stage.getBoundingClientRect()
+    this.drag = {
+      edge,
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startValue: this.edges[edge],
+      cssScaleX: rect.width / Math.max(1, this.stage.clientWidth),
+      cssScaleY: rect.height / Math.max(1, this.stage.clientHeight),
+      view: this.view,
+    }
+    event.currentTarget.setPointerCapture?.(event.pointerId)
+  }
+
+  moveDrag(event) {
+    const drag = this.drag
+    if (!drag || drag.pointerId !== event.pointerId || !drag.view) return
+    event.preventDefault()
+    const horizontal = drag.edge === 'left' || drag.edge === 'right'
+    const screenDelta = horizontal
+      ? (event.clientX - drag.startClientX) / Math.max(0.001, drag.cssScaleX)
+      : (event.clientY - drag.startClientY) / Math.max(0.001, drag.cssScaleY)
+    const pixelDelta = Math.round(screenDelta / Math.max(0.0001, drag.view.scale))
+    const direction = drag.edge === 'left' || drag.edge === 'top' ? -1 : 1
+    this.edges[drag.edge] = this.clampEdge(drag.edge, drag.startValue + pixelDelta * direction)
+    this.render(drag.view)
+    this.emitChange()
+  }
+
+  endDrag(event) {
+    if (!this.drag || this.drag.pointerId !== event.pointerId) return
+    this.drag = null
+    this.render()
+    this.emitChange()
+  }
+
+  clampEdge(edge, value) {
+    const rounded = Math.round(value)
+    if (edge === 'left' || edge === 'right') {
+      const other = edge === 'left' ? this.edges.right : this.edges.left
+      return Math.max(
+        1 - this.sourceWidth - other,
+        Math.min(MAX_SIDE - this.sourceWidth - other, rounded),
+      )
+    }
+    const other = edge === 'top' ? this.edges.bottom : this.edges.top
+    return Math.max(
+      1 - this.sourceHeight - other,
+      Math.min(MAX_SIDE - this.sourceHeight - other, rounded),
+    )
+  }
+
+  calculateView(width, height) {
+    const output = this.getValue()
+    const minX = Math.min(0, -this.edges.left)
+    const minY = Math.min(0, -this.edges.top)
+    const maxX = Math.max(this.sourceWidth, this.sourceWidth + this.edges.right)
+    const maxY = Math.max(this.sourceHeight, this.sourceHeight + this.edges.bottom)
+    const contentWidth = Math.max(1, maxX - minX)
+    const contentHeight = Math.max(1, maxY - minY)
+    const scale = Math.max(
+      0.0001,
+      Math.min(
+        (width - PREVIEW_PADDING * 2) / contentWidth,
+        (height - PREVIEW_PADDING * 2) / contentHeight,
+      ),
+    )
+    const contentLeft = (width - contentWidth * scale) / 2
+    const contentTop = (height - contentHeight * scale) / 2
+    const sourceX = contentLeft - minX * scale
+    const sourceY = contentTop - minY * scale
+    return {
+      scale,
+      sourceX,
+      sourceY,
+      outputX: sourceX - this.edges.left * scale,
+      outputY: sourceY - this.edges.top * scale,
+      outputWidth: output.width * scale,
+      outputHeight: output.height * scale,
+    }
+  }
+
+  render(fixedView = null) {
+    if (!this.image || !this.sourceWidth || !this.sourceHeight) return
+    const width = Math.max(1, this.stage.clientWidth)
+    const height = Math.max(1, this.stage.clientHeight)
+    const ratio = Math.min(2, window.devicePixelRatio || 1)
+    this.canvas.width = Math.round(width * ratio)
+    this.canvas.height = Math.round(height * ratio)
+    const context = this.canvas.getContext('2d')
+    context.setTransform(ratio, 0, 0, ratio, 0, 0)
+    context.clearRect(0, 0, width, height)
+    context.imageSmoothingEnabled = false
+    const baseView = fixedView || this.calculateView(width, height)
+    const output = this.getValue()
+    const view = {
+      ...baseView,
+      outputX: baseView.sourceX - this.edges.left * baseView.scale,
+      outputY: baseView.sourceY - this.edges.top * baseView.scale,
+      outputWidth: output.width * baseView.scale,
+      outputHeight: output.height * baseView.scale,
+    }
+    this.view = view
+
+    context.save()
+    context.beginPath()
+    context.rect(view.outputX, view.outputY, view.outputWidth, view.outputHeight)
+    context.clip()
+    context.drawImage(
+      this.image,
+      view.sourceX,
+      view.sourceY,
+      this.sourceWidth * view.scale,
+      this.sourceHeight * view.scale,
+    )
+    context.restore()
+
+    context.save()
+    context.setLineDash([5, 4])
+    context.strokeStyle = 'rgba(255, 255, 255, 0.38)'
+    context.lineWidth = 1
+    context.strokeRect(
+      Math.round(view.sourceX) + 0.5,
+      Math.round(view.sourceY) + 0.5,
+      Math.round(this.sourceWidth * view.scale),
+      Math.round(this.sourceHeight * view.scale),
+    )
+    context.restore()
+
+    this.frame.style.left = `${view.outputX}px`
+    this.frame.style.top = `${view.outputY}px`
+    this.frame.style.width = `${Math.max(1, view.outputWidth)}px`
+    this.frame.style.height = `${Math.max(1, view.outputHeight)}px`
+    if (this.widthInput) this.widthInput.value = String(output.width)
+    if (this.heightInput) this.heightInput.value = String(output.height)
+  }
+
+  emitChange() {
+    this.onChange?.(this.getValue(), this.isValid())
+  }
+
+  dispose() {
+    this.drag = null
+    this.resizeObserver.disconnect()
+    this.abortController.abort()
+    this.image = null
+  }
+}