evomeme 0.1.9 → 0.1.10-beta.13

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

@@ -0,0 +1,190 @@
+import { disposeFeatureForms } from '../ui/feature-form.js'
+import { t } from '../language/index.js'
+import { state } from '../core/state.js'
+import { getFeature } from '../core/feature-registry.js'
+import { isPending, isVideoItem } from '../elements/types.js'
+import { pendingStateLabel } from '../elements/loading.js'
+import { supportsCanvasInspector } from '../elements/registry.js'
+import { isTileMapItem, tileMapSummary } from '../map/model.js'
+import { mountTileMapInspector } from '../map/inspector.js'
+import { appendKv, createInspectorBlock, el } from './controls.js'
+
+export function createInspector(context) {
+  const {
+    appendImageEditBlock,
+    appendImageSourceBlock,
+    appendVideoSourceBlock,
+    ensureImageDims,
+    ensureVideoMeta,
+    formatDims,
+    formatVideoDuration,
+    formatVideoResolution,
+    getSelectedItem,
+    imageName,
+    imageSourceLabel,
+    imageUrl,
+    inspector,
+    inspectorBody,
+    inspectorTitle,
+    mediaFileType,
+    renderChrome,
+    renderUiInspector,
+    setSelection,
+    syncSelectionClass,
+  } = context
+
+  function renderInspectorImage(id) {
+    const name = imageName(id)
+    const layoutItem = state.layoutItems.find((it) => it.id === id)
+    const item = layoutItem || { id }
+    const section = el('div', 'insp-section insp-image-info')
+    inspectorTitle.textContent = t("inspector.inspector.text001")
+    ensureImageDims(id)
+  
+    const previewBlock = createInspectorBlock(t("inspector.inspector.text002"))
+    const previewFrame = el('div', 'insp-preview-frame')
+    const preview = el('img', 'insp-preview')
+    preview.src = imageUrl(id)
+    preview.alt = name
+    previewFrame.appendChild(preview)
+    previewBlock.appendChild(previewFrame)
+    section.appendChild(previewBlock)
+  
+    const basicBlock = createInspectorBlock(t("inspector.inspector.text003"))
+    appendKv(basicBlock, [
+      [t("inspector.inspector.text004"), name],
+      [t("inspector.inspector.text005"), formatDims(id)],
+      [t("inspector.inspector.text006"), mediaFileType(id)],
+    ])
+    section.appendChild(basicBlock)
+  
+    appendImageSourceBlock(section, item)
+    appendImageEditBlock(section, item)
+    inspectorBody.appendChild(section)
+  }
+  
+  function renderInspectorMulti(ids) {
+    inspectorTitle.textContent = `${t("inspector.inspector.text007")}${ids.length}${t("inspector.inspector.text007.part1")}`
+    const list = el('div', 'insp-list')
+    for (const id of ids) {
+      const item = getSelectedItem(id)
+      const btn = el('button', 'insp-list-item')
+      btn.type = 'button'
+      const name = el('div', 'name')
+      const meta = el('div', 'meta')
+      if (isTileMapItem(item)) {
+        const summary = tileMapSummary(item)
+        name.textContent = item.name || t("inspector.inspector.text008")
+        meta.textContent = `${t("inspector.inspector.text009")}${summary.dimensions}${t("inspector.inspector.text009.part1")}${summary.paintedCells}${t("inspector.inspector.text009.part2")}`
+      } else if (getFeature(item)) {
+        const definition = getFeature(item)
+        name.textContent = item.name || t(definition.title)
+        meta.textContent = t(definition.title)
+      } else if (isPending(item)) {
+        name.textContent = item.name || t("inspector.inspector.text036")
+        meta.textContent = item.taskStatus ? pendingStateLabel(item) : item.error
+          ? t("inspector.inspector.text037")
+          : item.media === 'video'
+            ? `${t("inspector.inspector.text038")}${item.ratio || ''}`
+            : `${t("inspector.inspector.text039")}${item.size || ''}`
+      } else if (isVideoItem(item)) {
+        name.textContent = imageName(id)
+        meta.textContent = t("inspector.inspector.text040")
+      } else {
+        ensureImageDims(id)
+        name.textContent = imageName(id)
+        meta.textContent = `${t("inspector.inspector.text041")}${formatDims(id)}${t("inspector.inspector.text041.part1")}${imageSourceLabel(id)}`
+      }
+      btn.append(name, meta)
+      btn.addEventListener('click', () => {
+        setSelection([id])
+        syncSelectionClass()
+        renderChrome()
+      })
+      list.appendChild(btn)
+    }
+    inspectorBody.appendChild(list)
+  }
+  
+  function renderInspector() {
+    const ids = [...state.selectedIds]
+    const selectedItems = ids.map((id) => getSelectedItem(id))
+    const singleItem = ids.length === 1 ? selectedItems[0] : null
+    if (!ids.length || selectedItems.some((item) => item && !supportsCanvasInspector(item))) {
+      inspector.hidden = true
+      disposeFeatureForms(inspectorBody)
+    inspectorBody.innerHTML = ''
+      return
+    }
+  
+    inspector.hidden = false
+    disposeFeatureForms(inspectorBody)
+    inspectorBody.innerHTML = ''
+  
+    if (ids.length > 1) {
+      renderInspectorMulti(ids)
+      return
+    }
+  
+    const id = ids[0]
+    const item = singleItem
+    if (isTileMapItem(item)) {
+      inspectorTitle.textContent = t("inspector.inspector.text008")
+      if (!mountTileMapInspector(inspectorBody, item)) {
+        const hint = el('p', 'insp-hint')
+        hint.textContent = t("inspector.inspector.text042")
+        inspectorBody.appendChild(hint)
+      }
+      return
+    }
+    if (renderUiInspector(item)) return
+  
+    if (isPending(item)) {
+      inspectorTitle.textContent = item.media === 'video' ? t("inspector.inspector.text043") : t("inspector.inspector.text036")
+      const section = el('div', 'insp-section')
+      appendKv(section, [
+        [t("inspector.inspector.text044"), pendingStateLabel(item)],
+        [t("inspector.inspector.text045"), item.model || '—'],
+        [t("inspector.inspector.text046"), item.size || item.ratio || '—'],
+        [t("inspector.inspector.text047"), item.prompt || '—'],
+      ])
+      inspectorBody.appendChild(section)
+      return
+    }
+  
+    if (isVideoItem(item)) {
+      inspectorTitle.textContent = t("inspector.inspector.text040")
+      const section = el('div', 'insp-section insp-video-info')
+      ensureVideoMeta(id)
+  
+      const previewBlock = createInspectorBlock(t("inspector.inspector.text002"), { collapseKey: t("inspector.inspector.text048") })
+      const previewFrame = el('div', 'insp-preview-frame')
+      const preview = el('video', 'insp-preview')
+      preview.src = imageUrl(id)
+      preview.muted = true
+      preview.loop = true
+      preview.autoplay = true
+      preview.playsInline = true
+      preview.controls = true
+      previewFrame.appendChild(preview)
+      previewBlock.appendChild(previewFrame)
+      section.appendChild(previewBlock)
+  
+      const basicBlock = createInspectorBlock(t("inspector.inspector.text003"), { collapseKey: t("inspector.inspector.text049") })
+      appendKv(basicBlock, [
+        [t("inspector.inspector.text004"), imageName(id)],
+        [t("inspector.inspector.text050"), formatVideoDuration(id)],
+        [t("inspector.inspector.text051"), formatVideoResolution(id, item)],
+        [t("inspector.inspector.text006"), mediaFileType(id)],
+      ])
+      section.appendChild(basicBlock)
+      appendVideoSourceBlock(section, item)
+      inspectorBody.appendChild(section)
+      return
+    }
+  
+    renderInspectorImage(id)
+  }
+
+  return { renderInspector }
+}