evomeme 0.1.7 → 0.1.9-beta.14

package/dist/canvas-public/assets/presets/catalog.json

@@ -0,0 +1,47 @@
+{
+  "version": 1,
+  "categories": [
+    {
+      "id": "tiles",
+      "label": "地块",
+      "enabled": true,
+      "items": [
+        { "id": "tiles/A_01_CaoDi.png", "name": "草地", "file": "A_01_CaoDi.png" },
+        { "id": "tiles/A_02_ShaMo.png", "name": "沙漠", "file": "A_02_ShaMo.png" },
+        { "id": "tiles/A_03_TianKong.png", "name": "天空", "file": "A_03_TianKong.png" },
+        { "id": "tiles/A_04_ShuiBo.png", "name": "水波", "file": "A_04_ShuiBo.png" },
+        { "id": "tiles/A_05_HaiMian.png", "name": "海面", "file": "A_05_HaiMian.png" },
+        { "id": "tiles/A_06_MuDiBan.png", "name": "木地板", "file": "A_06_MuDiBan.png" },
+        { "id": "tiles/A_07_ShiZhuan.png", "name": "石砖", "file": "A_07_ShiZhuan.png" },
+        { "id": "tiles/A_08_AnRongYan.png", "name": "暗熔岩", "file": "A_08_AnRongYan.png" },
+        { "id": "tiles/A_09_QingTaiShi.png", "name": "青苔石", "file": "A_09_QingTaiShi.png" },
+        { "id": "tiles/A_10_ShenHai.png", "name": "深海", "file": "A_10_ShenHai.png" },
+        { "id": "tiles/A_11_HuiYanShi.png", "name": "灰岩石", "file": "A_11_HuiYanShi.png" },
+        { "id": "tiles/A_12_HongTu.png", "name": "红土", "file": "A_12_HongTu.png" },
+        { "id": "tiles/A_13_GengDi.png", "name": "耕地", "file": "A_13_GengDi.png" },
+        { "id": "tiles/A_14_HuoShanYan.png", "name": "火山岩", "file": "A_14_HuoShanYan.png" },
+        { "id": "tiles/A_15_NiTu.png", "name": "泥土", "file": "A_15_NiTu.png" },
+        { "id": "tiles/A_16_HuangSha.png", "name": "黄沙", "file": "A_16_HuangSha.png" },
+        { "id": "tiles/A_17_CongLin.png", "name": "丛林", "file": "A_17_CongLin.png" },
+        { "id": "tiles/A_18_ZiYanShi.png", "name": "紫岩石", "file": "A_18_ZiYanShi.png" },
+        { "id": "tiles/A_19_MoGuTu.png", "name": "蘑菇土", "file": "A_19_MoGuTu.png" },
+        { "id": "tiles/A_20_HuaDian.png", "name": "花甸", "file": "A_20_HuaDian.png" },
+        { "id": "tiles/A_21_HaiLang.png", "name": "海浪", "file": "A_21_HaiLang.png" },
+        { "id": "tiles/A_22_GanTu.png", "name": "干土", "file": "A_22_GanTu.png" },
+        { "id": "tiles/A_23_QingTaiShiBan.png", "name": "青苔石板", "file": "A_23_QingTaiShiBan.png" },
+        { "id": "tiles/A_24_XingKong.png", "name": "星空", "file": "A_24_XingKong.png" },
+        { "id": "tiles/A_25_MoFaFuWen.png", "name": "魔法符文", "file": "A_25_MoFaFuWen.png" },
+        { "id": "tiles/A_26_ShiTuYeDi.png", "name": "湿土野地", "file": "A_26_ShiTuYeDi.png" },
+        { "id": "tiles/A_27_LanZhuan.png", "name": "蓝砖", "file": "A_27_LanZhuan.png" },
+        { "id": "tiles/A_28_HongZhuan.png", "name": "红砖", "file": "A_28_HongZhuan.png" },
+        { "id": "tiles/A_29_YueQiu.png", "name": "月球", "file": "A_29_YueQiu.png" },
+        { "id": "tiles/A_30_JinShuGe.png", "name": "金属格", "file": "A_30_JinShuGe.png" },
+        { "id": "tiles/A_31_JinShuJingGai.png", "name": "金属井盖", "file": "A_31_JinShuJingGai.png" },
+        { "id": "tiles/A_32_ShuZiChuang.png", "name": "数字窗", "file": "A_32_ShuZiChuang.png" }
+      ]
+    },
+    { "id": "characters", "label": "角色", "enabled": false, "items": [] },
+    { "id": "props", "label": "道具", "enabled": false, "items": [] },
+    { "id": "backgrounds", "label": "背景", "enabled": false, "items": [] }
+  ]
+}

package/dist/canvas-public/color-key-worker.js

@@ -0,0 +1,280 @@
+let sourceBitmap = null
+let previewSource = null
+let previewLab = null
+let previewWidth = 0
+let previewHeight = 0
+const linearChannel = new Float32Array(256)
+
+for (let value = 0; value < linearChannel.length; value += 1) {
+  const channel = value / 255
+  linearChannel[value] = channel <= 0.04045
+    ? channel / 12.92
+    : ((channel + 0.055) / 1.055) ** 2.4
+}
+
+self.addEventListener('message', async (event) => {
+  const message = event.data || {}
+  try {
+    if (message.type === 'init') {
+      const response = await fetch(String(message.url || ''))
+      if (!response.ok) throw new Error(`图片载入失败：${response.status}`)
+      sourceBitmap?.close?.()
+      sourceBitmap = await createImageBitmap(await response.blob())
+      if (message.purpose !== 'exact') {
+        const scale = Math.min(1, 900 / Math.max(sourceBitmap.width, sourceBitmap.height))
+        previewWidth = Math.max(1, Math.round(sourceBitmap.width * scale))
+        previewHeight = Math.max(1, Math.round(sourceBitmap.height * scale))
+        const canvas = new OffscreenCanvas(previewWidth, previewHeight)
+        const context = canvas.getContext('2d', { willReadFrequently: true })
+        context.drawImage(sourceBitmap, 0, 0, previewWidth, previewHeight)
+        previewSource = context.getImageData(0, 0, previewWidth, previewHeight)
+        previewLab = prepareOklab(previewSource.data)
+      }
+      self.postMessage({
+        type: 'ready',
+        width: sourceBitmap.width,
+        height: sourceBitmap.height,
+      })
+      return
+    }
+
+    if (!sourceBitmap) throw new Error('颜色剔除 Worker 尚未初始化')
+    const color = normalizeColor(message.color)
+    const strength = normalizeStrength(message.strength)
+    if (message.type === 'preview') {
+      if (!previewSource || !previewLab) throw new Error('颜色剔除预览尚未初始化')
+      const pixels = applyColorKeyPixels(
+        previewSource.data,
+        color,
+        strength,
+        previewWidth,
+        previewHeight,
+        previewLab,
+        message.contiguousOnly === true,
+        message.despill === true,
+      )
+      const canvas = new OffscreenCanvas(previewWidth, previewHeight)
+      canvas.getContext('2d').putImageData(new ImageData(pixels, previewWidth, previewHeight), 0, 0)
+      const bitmap = canvas.transferToImageBitmap()
+      self.postMessage({ type: 'preview', requestId: message.requestId, bitmap }, [bitmap])
+      return
+    }
+
+    if (message.type === 'exact') {
+      const width = sourceBitmap.width
+      const height = sourceBitmap.height
+      const canvas = new OffscreenCanvas(width, height)
+      const context = canvas.getContext('2d', { willReadFrequently: true })
+      context.drawImage(sourceBitmap, 0, 0)
+      const source = context.getImageData(0, 0, width, height)
+      const pixels = applyColorKeyPixels(
+        source.data,
+        color,
+        strength,
+        width,
+        height,
+        null,
+        message.contiguousOnly === true,
+        message.despill === true,
+      )
+      context.putImageData(new ImageData(pixels, width, height), 0, 0)
+      const blob = await canvas.convertToBlob({ type: 'image/png' })
+      self.postMessage({
+        type: 'exact',
+        requestId: message.requestId,
+        blob,
+        width,
+        height,
+      })
+    }
+  } catch (error) {
+    self.postMessage({
+      type: 'error',
+      requestId: message.requestId,
+      message: String(error?.message || error),
+    })
+  }
+})
+
+function prepareOklab(source) {
+  const lab = new Float32Array((source.length / 4) * 3)
+  for (let offset = 0, labOffset = 0; offset < source.length; offset += 4, labOffset += 3) {
+    if (source[offset + 3] === 0) continue
+    const value = rgbToOklab(source[offset], source[offset + 1], source[offset + 2])
+    lab[labOffset] = value.l
+    lab[labOffset + 1] = value.a
+    lab[labOffset + 2] = value.b
+  }
+  return lab
+}
+
+function applyColorKeyPixels(
+  source,
+  color,
+  strength,
+  width,
+  height,
+  preparedLab = null,
+  contiguousOnly = false,
+  despill = false,
+) {
+  const pixels = new Uint8ClampedArray(source)
+  const target = parseHex(color)
+  const targetLab = rgbToOklab(target.red, target.green, target.blue)
+  const targetLinear = {
+    red: srgbByteToLinear(target.red),
+    green: srgbByteToLinear(target.green),
+    blue: srgbByteToLinear(target.blue),
+  }
+  const core = 0.006 + (strength / 100) * 0.19
+  const feather = 0.018 + (strength / 100) * 0.035
+  const spillFeather = feather * 2.6
+  const distances = new Float32Array(pixels.length / 4)
+
+  for (let offset = 0, labOffset = 0, index = 0; offset < pixels.length; offset += 4, labOffset += 3, index += 1) {
+    if (pixels[offset + 3] === 0) continue
+    let lightness
+    let greenRed
+    let blueYellow
+    if (preparedLab) {
+      lightness = preparedLab[labOffset]
+      greenRed = preparedLab[labOffset + 1]
+      blueYellow = preparedLab[labOffset + 2]
+    } else {
+      const lab = rgbToOklab(pixels[offset], pixels[offset + 1], pixels[offset + 2])
+      lightness = lab.l
+      greenRed = lab.a
+      blueYellow = lab.b
+    }
+    const lightnessDelta = lightness - targetLab.l
+    const greenRedDelta = greenRed - targetLab.a
+    const blueYellowDelta = blueYellow - targetLab.b
+    distances[index] = Math.sqrt(
+      lightnessDelta * lightnessDelta +
+      greenRedDelta * greenRedDelta +
+      blueYellowDelta * blueYellowDelta,
+    )
+  }
+  const connected = contiguousOnly
+    ? boundaryConnectedMask(distances, pixels, width, height, core + feather)
+    : null
+
+  for (let offset = 0, index = 0; offset < pixels.length; offset += 4, index += 1) {
+    const originalAlpha = pixels[offset + 3]
+    if (originalAlpha === 0 || (connected && connected[index] === 0)) continue
+    const distance = distances[index]
+    const unit = Math.max(0, Math.min(1, (distance - core) / feather))
+    const remaining = unit * unit * (3 - 2 * unit)
+    const spillUnit = Math.max(0, Math.min(1, (distance - core) / spillFeather))
+    const spillRemaining = spillUnit * spillUnit * (3 - 2 * spillUnit)
+    const outputAlpha = Math.round(originalAlpha * remaining)
+    pixels[offset + 3] = outputAlpha
+    if (outputAlpha === 0) {
+      pixels[offset] = 0
+      pixels[offset + 1] = 0
+      pixels[offset + 2] = 0
+    } else if (despill) {
+      // Alpha feathering alone leaves the outer antialiased pixels fully opaque,
+      // even though their RGB still contains some of the keyed background. Extend
+      // color decontamination beyond the transparency band without changing alpha.
+      const alphaContamination = 1 - remaining
+      const outerContamination = Math.min(0.45, (1 - spillRemaining) * 0.45)
+      const contamination = Math.min(0.96, Math.max(alphaContamination, outerContamination))
+      if (contamination <= 0.001) continue
+      const foregroundShare = 1 - contamination
+      pixels[offset] = linearToSrgbByte(
+        (srgbByteToLinear(pixels[offset]) - contamination * targetLinear.red) / foregroundShare,
+      )
+      pixels[offset + 1] = linearToSrgbByte(
+        (srgbByteToLinear(pixels[offset + 1]) - contamination * targetLinear.green) / foregroundShare,
+      )
+      pixels[offset + 2] = linearToSrgbByte(
+        (srgbByteToLinear(pixels[offset + 2]) - contamination * targetLinear.blue) / foregroundShare,
+      )
+    }
+  }
+  return pixels
+}
+
+function boundaryConnectedMask(distances, pixels, width, height, threshold) {
+  const count = width * height
+  const connected = new Uint8Array(count)
+  const queue = new Int32Array(count)
+  let head = 0
+  let tail = 0
+  const enqueue = (index) => {
+    if (
+      connected[index] !== 0 ||
+      pixels[index * 4 + 3] === 0 ||
+      distances[index] >= threshold
+    ) return
+    connected[index] = 1
+    queue[tail++] = index
+  }
+  for (let x = 0; x < width; x += 1) {
+    enqueue(x)
+    if (height > 1) enqueue((height - 1) * width + x)
+  }
+  for (let y = 1; y < height - 1; y += 1) {
+    enqueue(y * width)
+    if (width > 1) enqueue(y * width + width - 1)
+  }
+  while (head < tail) {
+    const index = queue[head++]
+    const x = index % width
+    const y = Math.floor(index / width)
+    if (x > 0) enqueue(index - 1)
+    if (x + 1 < width) enqueue(index + 1)
+    if (y > 0) enqueue(index - width)
+    if (y + 1 < height) enqueue(index + width)
+  }
+  return connected
+}
+
+function normalizeColor(value) {
+  const color = String(value || '').toLowerCase()
+  if (!/^#[0-9a-f]{6}$/.test(color)) throw new Error('颜色格式无效')
+  return color
+}
+
+function normalizeStrength(value) {
+  const strength = Number(value)
+  if (!Number.isFinite(strength) || strength < 0 || strength > 100) {
+    throw new Error('强度需为 0–100')
+  }
+  return strength
+}
+
+function parseHex(color) {
+  return {
+    red: Number.parseInt(color.slice(1, 3), 16),
+    green: Number.parseInt(color.slice(3, 5), 16),
+    blue: Number.parseInt(color.slice(5, 7), 16),
+  }
+}
+
+function srgbByteToLinear(value) {
+  return linearChannel[value]
+}
+
+function linearToSrgbByte(value) {
+  const channel = Math.max(0, Math.min(1, value))
+  const srgb = channel <= 0.0031308
+    ? channel * 12.92
+    : 1.055 * channel ** (1 / 2.4) - 0.055
+  return Math.round(Math.max(0, Math.min(1, srgb)) * 255)
+}
+
+function rgbToOklab(red, green, blue) {
+  const r = srgbByteToLinear(red)
+  const g = srgbByteToLinear(green)
+  const b = srgbByteToLinear(blue)
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)
+  return {
+    l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+  }
+}

package/dist/canvas-public/image-canvas-size-editor.js

@@ -0,0 +1,254 @@
+/**
+ * 图片画布尺寸编辑器：负责预览原图、拖动四条边缘，并把宽高输入转换为裁切/透明扩边参数。
+ */
+
+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('无法读取待编辑图片'))
+      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) {
+    this.widthInput.disabled = busy
+    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`
+    this.widthInput.value = String(output.width)
+    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
+  }
+}