adtec-core-package 3.0.0 → 3.0.1

package/src/components/editor-main/src/extensions/image/node-view.vue

@@ -0,0 +1,592 @@
+<template>
+  <node-view-wrapper
+    ref="containerRef"
+    class="umo-node-view"
+    :class="{
+      'umo-floating-node': attrs.draggable,
+      'is-inline-image': attrs.inline,
+    }"
+    :style="nodeStyle"
+    @dblclick="openImageViewer"
+    @click.capture="onSelectImage"
+  >
+    <div
+      class="umo-node-container umo-node-image"
+      :class="{
+        'is-loading': attrs.src && isLoading,
+        'is-error': attrs.src && error,
+        'umo-hover-shadow': !options.document?.readOnly,
+        'umo-select-outline': !attrs.draggable && isImageSelected,
+      }"
+    >
+      <div
+        v-if="attrs.src && isLoading"
+        class="loading"
+        :style="{ height: `${attrs.height}px` }"
+      >
+        <icon name="loading" class="loading-icon" />
+        {{ t('node.image.loading') }}
+      </div>
+      <div
+        v-else-if="attrs.src && error"
+        class="error"
+        :style="{ height: `${attrs.height}px` }"
+      >
+        <icon name="image-failed" class="error-icon" />
+        {{ t('node.image.error') }}
+      </div>
+      <div
+        v-else-if="isReadOnly"
+        class="umo-image-readonly"
+        :style="readonlyImageStyle"
+      >
+        <img
+          ref="imageRef"
+          :src="attrs.src"
+          :class="{ 'not-equal-proportion': !attrs.equalProportion }"
+          :style="readonlyImgTransform"
+          loading="lazy"
+          @load="onLoadReadonly"
+        />
+      </div>
+      <image-resizer
+        v-else
+        ref="dragRef"
+        :class="{ 'is-draggable': attrs.draggable }"
+        :style="{
+          cursor:
+            attrs.draggable && !options.document?.readOnly
+              ? 'move'
+              : 'default !important',
+        }"
+        :selected="isImageSelected"
+        :rotatable="false"
+        :disabled="isReadOnly"
+        :angle="attrs.angle"
+        :width="Number(attrs.width)"
+        :height="Number(attrs.height)"
+        :left="Number(attrs.left)"
+        :top="Number(attrs.top)"
+        :min-width="14"
+        :min-height="14"
+        :max-width="maxWidth"
+        :max-height="maxHeight"
+        :z-index="10"
+        :equal-proportion="attrs.equalProportion"
+        :scale-ratio="pageScaleRatio"
+        @rotate="onRotate"
+        @resize="onResize"
+        @drag-end="onDragEnd"
+        @mousedown="onMousedown"
+        @focus="onImageFocus"
+      >
+        <img
+          ref="imageRef"
+          :src="attrs.src"
+          :class="{ 'not-equal-proportion': !attrs.equalProportion }"
+          :style="{
+            width: '100%',
+            height: attrs.equalProportion ? '100%' : 'auto',
+            objectFit: attrs.equalProportion ? 'contain' : undefined,
+            transform:
+              attrs.flipX || attrs.flipY
+                ? `rotateX(${attrs.flipX ? '180' : '0'}deg) rotateY(${attrs.flipY ? '180' : '0'}deg)`
+                : 'none',
+          }"
+          :data-id="attrs.id"
+          :data-preview="attrs.previewType"
+          loading="lazy"
+          @load="onLoad"
+        />
+        <div v-if="showUploadProgress" class="uploading">
+          <span></span>
+        </div>
+      </image-resizer>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { t } from '../../composables/i18n.js';
+import { computed as _computed, ref as _ref } from 'vue';
+
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import ImageResizer from './image-resizer.vue'
+
+import { shortId } from '../../utils/short-id'
+
+import { updateAttributesWithoutHistory } from '../file'
+
+
+import { inject, ref, nextTick, watch, onBeforeUnmount, onMounted, computed } from 'vue';
+import { useImage, onClickOutside } from '@vueuse/core';
+const container = inject('container')
+const editor = inject('editor')
+const page = inject('page')
+const uploadFileMap = inject('uploadFileMap')
+const imageViewer = inject('imageViewer')
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const { updateAttributes } = props
+const options = inject('options')
+const pageScaleRatio = computed(() => (page?.value?.zoomLevel || 100) / 100)
+/** 以 TipTap isEditable 为准；options.document.readOnly 可能与 useStorage 脱节 */
+const isReadOnly = computed(() => editor.value?.isEditable === false)
+/** 仅在实际走 uploadFileMap 上传队列时显示进度条（原 attrs.file 不存在，条件恒 true 会卡死） */
+const showUploadProgress = computed(
+  () =>
+    !isReadOnly.value &&
+    attrs.value.uploaded === false &&
+    Boolean(attrs.value.id) &&
+    uploadFileMap.value.has(attrs.value.id),
+)
+const { isLoading, error } = useImage({ src: attrs.value.src })
+
+const containerRef = ref(null)
+const imageRef = _ref(null)
+/** TipTap props.selected 偶发不同步；用 selection 兜底，确保角点渲染 */
+const selectionTick = ref(0)
+
+function resolveNodePos() {
+  try {
+    const pos = props.getPos()
+    return typeof pos === 'number' ? pos : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function isNodeInSelection() {
+  const ed = editor.value
+  const pos = resolveNodePos()
+  if (!ed || pos === undefined) return false
+  const { from, to } = ed.state.selection
+  return from <= pos && to >= pos + props.node.nodeSize
+}
+
+const isImageSelected = computed(() => {
+  selectionTick.value
+  return props.selected || isNodeInSelection()
+})
+let maxWidth = _ref(0)
+let maxHeight = _ref(0)
+
+function onSelectImage() {
+  const pos = resolveNodePos()
+  if (pos !== undefined) {
+    editor.value?.commands.setNodeSelection(pos)
+  }
+}
+
+function patchNodeAttrs(attrsPatch, { history = false } = {}) {
+  if (history) {
+    props.updateAttributes(attrsPatch)
+    return
+  }
+  const pos = resolveNodePos()
+  if (pos !== undefined && editor.value) {
+    updateAttributesWithoutHistory(editor.value, attrsPatch, pos)
+    return
+  }
+  props.updateAttributes(attrsPatch)
+}
+
+const lastResizeSize = ref(null)
+
+function onImageFocus() {
+  onSelectImage()
+}
+
+onMounted(() => {
+  const ed = editor.value
+  if (!ed) return
+  const onSelectionUpdate = () => {
+    selectionTick.value += 1
+  }
+  ed.on('selectionUpdate', onSelectionUpdate)
+  onBeforeUnmount(() => {
+    ed.off('selectionUpdate', onSelectionUpdate)
+  })
+})
+
+const nodeStyle = _computed(() => {
+  const { nodeAlign, margin } = attrs.value
+  const marginTop =
+    margin?.top && margin?.top !== '' ? `${margin.top}px` : undefined
+  const marginBottom =
+    margin?.bottom && margin?.bottom !== '' ? `${margin.bottom}px` : undefined
+  return {
+    justifyContent: nodeAlign,
+    marginTop,
+    marginBottom,
+    zIndex: isImageSelected.value ? 100 : attrs.value.draggable ? 95 : 0,
+  }
+})
+
+const readonlyImgTransform = _computed(() => ({
+  transform:
+    attrs.value.flipX || attrs.value.flipY
+      ? `rotateX(${attrs.value.flipX ? '180' : '0'}deg) rotateY(${attrs.value.flipY ? '180' : '0'}deg)`
+      : 'none',
+}))
+
+const readonlyImageStyle = _computed(() => {
+  const style = {}
+  if (attrs.value.width) style.width = `${attrs.value.width}px`
+  if (attrs.value.height) style.height = `${attrs.value.height}px`
+  if (attrs.value.angle) style.transform = `rotate(${attrs.value.angle}deg)`
+  return style
+})
+
+function onLoadReadonly() {
+  // 只读展示不写入 node attrs，避免触发 NodeView 更新链
+}
+
+const uploadImage = async () => {
+  if (isReadOnly.value) return
+  if (attrs.value.uploaded) return
+  if (!attrs.value.id || !uploadFileMap.value.has(attrs.value.id)) {
+    patchNodeAttrs({ uploaded: true })
+    return
+  }
+  try {
+    const file = uploadFileMap.value.get(attrs.value.id)
+    const result = await options.value?.onFileUpload?.(file)
+    const { id, url } = result
+    patchNodeAttrs({ id, src: url, uploaded: true })
+    uploadFileMap.value.delete(attrs.value.id)
+  } catch (error) {
+    uploadFileMap.value.delete(attrs.value.id)
+    patchNodeAttrs({ uploaded: true })
+    useMessage('error', {
+      attach: container,
+      content: error.message,
+    })
+  }
+}
+const onLoad = async () => {
+  if (isReadOnly.value) return
+  // updateAttributes({ error: false })
+  const { clientWidth = 1, clientHeight = 1 } = imageRef.value
+  const ratio = clientWidth / clientHeight
+  maxWidth.value = containerRef.value?.$el.clientWidth
+  maxHeight.value = maxWidth.value / ratio
+  if (attrs.value.width === null) {
+    updateAttributes({ width: maxWidth.value })
+  }
+  if ([null, 'auto', 0].includes(attrs.value.height)) {
+    await nextTick()
+    const rect = imageRef.value?.getBoundingClientRect()
+    updateAttributes({ height: Number(rect.height?.toFixed(2)) })
+  }
+}
+
+const onRotate = ({ angle }) => {
+  updateAttributes({ angle })
+}
+const onResize = ({ width, height }) => {
+  const next = {
+    width: Number(Number(width).toFixed(2)),
+    height: Number(Number(height).toFixed(2)),
+  }
+  lastResizeSize.value = next
+  patchNodeAttrs(next)
+}
+
+const dragRef = _ref(null)
+
+const onDragEnd = ({ width, height } = {}) => {
+  const finalWidth = Number(
+    (width ?? lastResizeSize.value?.width ?? attrs.value.width ?? 0).toFixed(2),
+  )
+  const finalHeight = Number(
+    (height ?? lastResizeSize.value?.height ?? attrs.value.height ?? 0).toFixed(2),
+  )
+
+  if (finalWidth > 0 && finalHeight > 0) {
+    props.updateAttributes({ width: finalWidth, height: finalHeight })
+    // attrs 回写偶发晚于 UI 一帧；与 image-resizer commitSize 双保险
+    nextTick(() => {
+      if (
+        Math.abs(Number(attrs.value.width) - finalWidth) >= 1 ||
+        Math.abs(Number(attrs.value.height) - finalHeight) >= 1
+      ) {
+        props.updateAttributes({ width: finalWidth, height: finalHeight })
+      }
+    })
+  }
+  lastResizeSize.value = null
+
+  if (!attrs.value.draggable) {
+    setTimeout(() => {
+      dragRef.value.$el.style.left = 0
+      dragRef.value.$el.style.top = 0
+    }, 100)
+  }
+}
+
+let isMousedown = _ref(false)
+const onMousedown = (e) => {
+  containerRef.value?.$el.click()
+  if (!attrs.value.draggable) {
+    return
+  }
+  isMousedown.value = true
+
+  const downX = e.clientX
+  const downY = e.clientY
+
+  const elRect = dragRef.value.$el.getBoundingClientRect()
+  const mouseX = downX - elRect.left
+  const mouseY = downY - elRect.top
+
+  const onMousemove = (e) => {
+    const left = e.clientX - mouseX
+    const top = e.clientY - mouseY
+    updateAttributes({ left, top })
+  }
+  const onMouseup = (_e) => {
+    isMousedown.value = false
+    document.removeEventListener('mousemove', onMousemove)
+    document.removeEventListener('mouseup', onMouseup)
+  }
+  document.addEventListener('mousemove', onMousemove)
+  document.addEventListener('mouseup', onMouseup)
+}
+
+onClickOutside(containerRef, () => {
+  if (isImageSelected.value) {
+    editor.value?.commands.focus()
+  }
+})
+
+const openImageViewer = async () => {
+  if (attrs.value.previewType === null) {
+    return
+  }
+  const id = shortId(10)
+  if (attrs.value.id === null) {
+    patchNodeAttrs({ id })
+  }
+  await nextTick()
+  imageViewer.value.visible = true
+  imageViewer.value.current = attrs.value.id
+}
+
+watch(
+  () => attrs.value.draggable,
+  (draggable) => {
+    if (isReadOnly.value) return
+    if (!draggable) {
+      updateAttributes({ left: null, top: null })
+    }
+  },
+)
+
+watch(
+  () => attrs.value.equalProportion,
+  async (equalProportion) => {
+    if (isReadOnly.value) return
+    await nextTick()
+    const width = imageRef.value?.offsetWidth
+    const height = imageRef.value?.offsetHeight
+    updateAttributes({ width, height })
+    maxHeight.value = equalProportion ? maxWidth.value / (width / height) : 0
+  },
+)
+watch(
+  () => attrs.value.src,
+  async (src) => {
+    if (isReadOnly.value) return
+    if (attrs.value.uploaded !== false) return
+
+    // 已写入 HTML 的 base64 图片无需再走上传队列
+    if (src?.startsWith('data:image') && !uploadFileMap.value.has(attrs.value.id)) {
+      patchNodeAttrs({ uploaded: true })
+      return
+    }
+
+    if (src?.startsWith('data:image') && uploadFileMap.value.has(attrs.value.id)) {
+      await nextTick()
+      uploadImage()
+      return
+    }
+
+    if (uploadFileMap.value.has(attrs.value.id)) {
+      await nextTick()
+      uploadImage()
+    }
+  },
+  { immediate: true },
+)
+watch(
+  () => error.value,
+  (err) => {
+    if (isReadOnly.value) return
+    patchNodeAttrs({ error: err?.type ? err.type === 'error' : false })
+  },
+)
+
+watch(isReadOnly, async (readOnly) => {
+  if (readOnly || !attrs.value.src || !imageRef.value) return
+  if (attrs.value.width && attrs.value.height) return
+  await nextTick()
+  await onLoad()
+})
+
+onBeforeUnmount(() => {
+  setTimeout(() => {
+    if (editor.value.isDestroyed) return
+    options.value.onFileDelete(attrs.value.id, attrs.value.src, `image:${attrs.value.type}`)
+  }, 500)
+})
+</script>
+
+<style lang="less">
+.umo-node-view {
+  &.is-inline-image {
+    display: inline-block !important;
+    padding: 2px 6px;
+    img {
+      max-width: 100% !important;
+      max-height: 100% !important;
+    }
+  }
+  .umo-node-image {
+    max-width: 100%;
+    width: auto;
+    position: relative;
+    z-index: 20;
+    overflow: visible;
+    &.is-loading,
+    &.is-error {
+      outline: none !important;
+      box-shadow: none !important;
+    }
+    .es-drager {
+      &.is-draggable {
+        position: absolute;
+      }
+      &:not(.is-draggable) {
+        position: relative;
+        max-width: 100%;
+        max-height: 100%;
+      }
+      &.selected,
+      &.is-resizing {
+        max-width: none !important;
+        max-height: none !important;
+      }
+      &.selected {
+        .es-drager-dot {
+          display: block;
+          pointer-events: auto;
+        }
+        .es-drager-rotate {
+          display: flex;
+          pointer-events: auto;
+        }
+      }
+    }
+    img {
+      display: block;
+      max-width: 100%;
+      width: 100%;
+      &.not-equal-proportion {
+        height: 100%;
+      }
+    }
+
+    .umo-image-readonly {
+      position: relative;
+      max-width: 100%;
+      img {
+        display: block;
+        max-width: 100%;
+        width: 100%;
+      }
+    }
+
+    .loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #999;
+      font-size: 12px;
+      gap: 10px;
+
+      .loading-icon {
+        color: var(--umo-primary-color);
+        font-size: 22px;
+        animation: turn 1s linear infinite;
+      }
+    }
+
+    .error {
+      width: 100%;
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      color: #999;
+      font-size: 12px;
+      min-height: 120px;
+
+      .error-icon {
+        font-size: 72px;
+        margin: -8px 0 -2px;
+      }
+    }
+
+    .uploading {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.1);
+      pointer-events: none;
+
+      span {
+        display: block;
+        position: absolute;
+        background: rgba(0, 0, 0, 0.2);
+        height: 4px;
+        border-radius: 2px;
+        top: 50%;
+        left: 20%;
+        right: 20%;
+        transform: translateY(-50%);
+        overflow: hidden;
+
+        &:after {
+          content: '';
+          display: block;
+          height: 100%;
+          background-color: var(--umo-primary-color);
+          animation: progress 1s linear infinite;
+        }
+      }
+    }
+  }
+}
+
+@keyframes turn {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes progress {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+</style>