jvs-ppt-ui 0.0.16 → 0.0.18

package/src/components/canvas/elements/CanvasGroupElement.vue

@@ -1,213 +1,214 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import CanvasTextElement from './CanvasTextElement.vue'
-import CanvasShapeElement from './CanvasShapeElement.vue'
-import CanvasLineElement from './CanvasLineElement.vue'
-import CanvasImageElement from './CanvasImageElement.vue'
-import SvgChart from '../../SvgChart.vue'
-import { getElementImageSrc, hasElementFill, hasElementBorder, getElementDropShadowFilter } from '../../../utils/canvas/elementStyles'
-
-const props = defineProps<{
-  element: any
-  activeSlide?: any
-  croppingElementId?: string | null
-  selectedElementIds?: string[]
-  selectedElementId?: string | null
-  isEditingText?: boolean
-  themeRecipe?: any
-  getTextStrokeStyle?: (el: any) => string
-  getElementTextShadow?: (el: any) => string
-  getRenderedContent?: (el: any) => string
-  // 直接父盒子的像素尺寸（顶层时为幻灯片逻辑尺寸），用于解析本组 % 样式，
-  // 再下传给子元素解析它们的 % 宽高。与 PresentationGroupChild 的
-  // parentW/parentH 锚同一思路：渲染期没有可查的 DOM 地图时用数据链解析。
-  parentWidthPx?: number
-  parentHeightPx?: number
-}>()
-
-function resolvePx(val: any, parentPx: number | undefined): number {
-  if (val === undefined || val === null || val === '' || val === 'auto') return NaN
-  if (typeof val === 'number') return val
-  const s = String(val).trim()
-  if (s.endsWith('%')) {
-    const pct = parseFloat(s)
-    const p = Number(parentPx)
-    if (!isNaN(pct) && isFinite(p) && p > 0) return (pct / 100) * p
-    return NaN
-  }
-  const n = parseFloat(s)
-  return isNaN(n) ? NaN : n
-}
-
-// 本组盒子自身的像素尺寸：px 样式直接用，% 样式相对父盒解析。
-const selfWidthPx = computed(() => {
-  const resolved = resolvePx((props.element as any)?.style?.width, props.parentWidthPx)
-  if (isFinite(resolved) && resolved > 0) return resolved
-  const p = Number(props.parentWidthPx)
-  return isFinite(p) && p > 0 ? p : NaN
-})
-
-const selfHeightPx = computed(() => {
-  const resolved = resolvePx((props.element as any)?.style?.height, props.parentHeightPx)
-  if (isFinite(resolved) && resolved > 0) return resolved
-  const p = Number(props.parentHeightPx)
-  return isFinite(p) && p > 0 ? p : NaN
-})
-
-const emit = defineEmits<{
-  (e: 'childMouseDown', ev: MouseEvent, child: any, parent: any): void
-  (e: 'childClick', ev: MouseEvent, child: any, parent: any): void
-  (e: 'childDblClick', ev: MouseEvent, child: any, parent: any): void
-  (e: 'childContextMenu', ev: MouseEvent, child: any, parent: any): void
-  (e: 'textFocus', child: any): void
-  (e: 'textBlur', ev: FocusEvent, child: any): void
-  (e: 'textInput', ev: Event, child: any): void
-  (e: 'textKeyDown', ev: KeyboardEvent, child: any): void
-  (e: 'textMouseMove', ev: MouseEvent, child: any): void
-  (e: 'textMouseLeave', ev: MouseEvent, child: any): void
-  (e: 'startEditing', id: string, ev?: MouseEvent): void
-  (e: 'formulaDblClick', child: any): void
-  (e: 'tableDblClick', ev: MouseEvent, child: any): void
-}>()
-
-function sortGroupElements(elements: any[]) {
-  if (!elements || !Array.isArray(elements)) return []
-  return [...elements].sort((a: any, b: any) => {
-    const orderA = a.order !== undefined ? a.order : (parseFloat(a.style?.zIndex) || 0)
-    const orderB = b.order !== undefined ? b.order : (parseFloat(b.style?.zIndex) || 0)
-    return orderA - orderB
-  })
-}
-</script>
-
-<template>
-  <div class="group-container-wrapper" style="width: 100%; height: 100%; position: relative; overflow: visible; pointer-events: none;">
-    <div
-      v-for="child in sortGroupElements(element.elements || [])"
-      :key="child.id"
-      :id="`canvas-el-${child.id}`"
-      class="group-child-item"
-      :style="{
-        position: 'absolute',
-        left: child.style?.left,
-        top: child.style?.top,
-        width: child.style?.width,
-        height: (child.type === 'text' && (child.autoFit?.type === 'shape' || child.style?.height === 'auto') && !child.content?.includes('<table') && !child.latex && child.style?.writingMode !== 'vertical-rl' && child.style?.writingMode !== 'vertical-lr') ? 'auto' : (child.style?.height || (child.height ? `${child.height}px` : 'auto')),
-        minHeight: (child.type === 'text' && !child.content?.includes('<table') && !child.latex) ? child.style?.height : undefined,
-        transform: `rotate(${child.style?.rotate || 0}deg) scale(${child.type !== 'text' && child.type !== 'line' && ((child.style as any)?.flipH || child.flipH || child.isFlipH) ? -1 : 1}, ${child.type !== 'text' && child.type !== 'line' && ((child.style as any)?.flipV || child.flipV || child.isFlipV) ? -1 : 1})`,
-        opacity: child.style?.opacity !== undefined ? child.style.opacity : 1,
-        filter: getElementDropShadowFilter(child),
-        pointerEvents: child.type === 'group' ? 'none' : (((child.type === 'shape' || !child.type) && !hasElementFill(child) && !hasElementBorder(child)) ? 'none' : 'auto')
-      }"
-      @mousedown.stop="emit('childMouseDown', $event, child, element)"
-      @click.stop="emit('childClick', $event, child, element)"
-      @dblclick.stop="emit('childDblClick', $event, child, element)"
-      @contextmenu.stop.prevent="emit('childContextMenu', $event, child, element)"
-    >
-      <!-- Child Text -->
-      <template v-if="child.type === 'text'">
-        <CanvasTextElement
-          :element="child"
-          :active-slide="activeSlide"
-          :is-selected="selectedElementId === child.id"
-          :is-editing-text="isEditingText"
-          :selected-element-id="selectedElementId"
-          :theme-recipe="themeRecipe"
-          :rendered-content="getRenderedContent ? getRenderedContent(child) : child.content"
-          :get-text-stroke-style="getTextStrokeStyle"
-          :get-element-text-shadow="getElementTextShadow"
-          @focusin="emit('textFocus', child)"
-          @focusout="emit('textBlur', $event, child)"
-          @input="emit('textInput', $event, child)"
-          @keydown="emit('textKeyDown', $event, child)"
-          @mousemove="emit('textMouseMove', $event, child)"
-          @mouseleave="emit('textMouseLeave', $event, child)"
-          @dblclick="emit('startEditing', child.id)"
-          @formula-dbl-click="emit('formulaDblClick', child)"
-          @table-dbl-click="emit('tableDblClick', $event, child)"
-        />
-      </template>
-
-      <!-- Child Shape -->
-      <template v-else-if="child.type === 'shape'">
-        <CanvasShapeElement
-          :element="child"
-          :active-slide="activeSlide"
-          :is-selected="selectedElementId === child.id"
-          :is-editing-text="isEditingText"
-          :selected-element-id="selectedElementId"
-          :theme-recipe="themeRecipe"
-          :parent-width-px="selfWidthPx"
-          :parent-height-px="selfHeightPx"
-          :get-text-stroke-style="getTextStrokeStyle"
-          :get-element-text-shadow="getElementTextShadow"
-          @text-focus="emit('textFocus', child)"
-          @text-blur="emit('textBlur', $event, child)"
-          @text-input="emit('textInput', $event, child)"
-          @text-key-down="emit('textKeyDown', $event, child)"
-          @start-editing="(ev) => emit('startEditing', child.id, ev)"
-        />
-      </template>
-
-      <!-- Child Line -->
-      <template v-else-if="child.type === 'line'">
-        <CanvasLineElement :element="child" :all-elements="element.elements" />
-      </template>
-
-      <!-- Child Image -->
-      <template
-        v-else-if="child.type === 'image' || child.type === 'pic' || child.type === 'picture' || (child.type !== 'text' && child.type !== 'line' && child.type !== 'shape' && child.type !== 'group' && child.type !== 'chart' && Boolean(getElementImageSrc(child)))">
-        <CanvasImageElement :element="child" :cropping-element-id="croppingElementId" />
-      </template>
-
-      <!-- Child Chart -->
-      <template v-else-if="child.type === 'chart'">
-        <div style="width: 100%; height: 100%; overflow: visible; box-sizing: border-box;" :style="{
-          backgroundColor: child.style?.fill || 'transparent',
-          borderWidth: child.style?.borderWidth || '0px',
-          borderStyle: child.style?.borderStyle || 'solid',
-          borderColor: child.style?.borderColor || 'transparent',
-          borderRadius: child.style?.borderRadius || '0px',
-          boxShadow: child.style?.boxShadow || 'none'
-        }">
-          <SvgChart :element="child" />
-        </div>
-      </template>
-
-      <!-- Nested Group -->
-      <template v-else-if="child.type === 'group'">
-        <CanvasGroupElement
-          :element="child"
-          :active-slide="activeSlide"
-          :cropping-element-id="croppingElementId"
-          :parent-width-px="selfWidthPx"
-          :parent-height-px="selfHeightPx"
-          :selected-element-ids="selectedElementIds"
-          :selected-element-id="selectedElementId"
-          :is-editing-text="isEditingText"
-          :theme-recipe="themeRecipe"
-          :get-text-stroke-style="getTextStrokeStyle"
-          :get-element-text-shadow="getElementTextShadow"
-          :get-rendered-content="getRenderedContent"
-          @child-mouse-down="(ev, c, p) => emit('childMouseDown', ev, c, p)"
-          @child-click="(ev, c, p) => emit('childClick', ev, c, p)"
-          @child-dbl-click="(ev, c, p) => emit('childDblClick', ev, c, p)"
-          @child-context-menu="(ev, c, p) => emit('childContextMenu', ev, c, p)"
-          @text-focus="(c) => emit('textFocus', c)"
-          @text-blur="(ev, c) => emit('textBlur', ev, c)"
-          @text-input="(ev, c) => emit('textInput', ev, c)"
-          @text-key-down="(ev, c) => emit('textKeyDown', ev, c)"
-          @text-mouse-move="(ev, c) => emit('textMouseMove', ev, c)"
-          @text-mouse-leave="(ev, c) => emit('textMouseLeave', ev, c)"
-          @start-editing="(id, ev) => emit('startEditing', id, ev)"
-        />
-      </template>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.group-child-item {
-  box-sizing: border-box;
-}
-</style>
+<script setup lang="ts">
+import { computed } from 'vue'
+import CanvasTextElement from './CanvasTextElement.vue'
+import CanvasShapeElement from './CanvasShapeElement.vue'
+import CanvasLineElement from './CanvasLineElement.vue'
+import CanvasImageElement from './CanvasImageElement.vue'
+import SvgChart from '../../SvgChart.vue'
+import { getElementImageSrc, hasElementFill, hasElementBorder, getElementDropShadowFilter, isImagePlaceholder } from '../../../utils/canvas/elementStyles'
+
+const props = defineProps<{
+  element: any
+  activeSlide?: any
+  croppingElementId?: string | null
+  selectedElementIds?: string[]
+  selectedElementId?: string | null
+  isEditingText?: boolean
+  themeRecipe?: any
+  getTextStrokeStyle?: (el: any) => string
+  getElementTextShadow?: (el: any) => string
+  getRenderedContent?: (el: any) => string
+  // 直接父盒子的像素尺寸（顶层时为幻灯片逻辑尺寸），用于解析本组 % 样式，
+  // 再下传给子元素解析它们的 % 宽高。与 PresentationGroupChild 的
+  // parentW/parentH 锚同一思路：渲染期没有可查的 DOM 地图时用数据链解析。
+  parentWidthPx?: number
+  parentHeightPx?: number
+}>()
+
+function resolvePx(val: any, parentPx: number | undefined): number {
+  if (val === undefined || val === null || val === '' || val === 'auto') return NaN
+  if (typeof val === 'number') return val
+  const s = String(val).trim()
+  if (s.endsWith('%')) {
+    const pct = parseFloat(s)
+    const p = Number(parentPx)
+    if (!isNaN(pct) && isFinite(p) && p > 0) return (pct / 100) * p
+    return NaN
+  }
+  const n = parseFloat(s)
+  return isNaN(n) ? NaN : n
+}
+
+// 本组盒子自身的像素尺寸：px 样式直接用，% 样式相对父盒解析。
+const selfWidthPx = computed(() => {
+  const resolved = resolvePx((props.element as any)?.style?.width, props.parentWidthPx)
+  if (isFinite(resolved) && resolved > 0) return resolved
+  const p = Number(props.parentWidthPx)
+  return isFinite(p) && p > 0 ? p : NaN
+})
+
+const selfHeightPx = computed(() => {
+  const resolved = resolvePx((props.element as any)?.style?.height, props.parentHeightPx)
+  if (isFinite(resolved) && resolved > 0) return resolved
+  const p = Number(props.parentHeightPx)
+  return isFinite(p) && p > 0 ? p : NaN
+})
+
+const emit = defineEmits<{
+  (e: 'childMouseDown', ev: MouseEvent, child: any, parent: any): void
+  (e: 'childClick', ev: MouseEvent, child: any, parent: any): void
+  (e: 'childDblClick', ev: MouseEvent, child: any, parent: any): void
+  (e: 'childContextMenu', ev: MouseEvent, child: any, parent: any): void
+  (e: 'textFocus', child: any): void
+  (e: 'textBlur', ev: FocusEvent, child: any): void
+  (e: 'textInput', ev: Event, child: any): void
+  (e: 'textKeyDown', ev: KeyboardEvent, child: any): void
+  (e: 'textMouseMove', ev: MouseEvent, child: any): void
+  (e: 'textMouseLeave', ev: MouseEvent, child: any): void
+  (e: 'startEditing', id: string, ev?: MouseEvent): void
+  (e: 'formulaDblClick', child: any): void
+  (e: 'tableDblClick', ev: MouseEvent, child: any): void
+}>()
+
+function sortGroupElements(elements: any[]) {
+  if (!elements || !Array.isArray(elements)) return []
+  return [...elements].sort((a: any, b: any) => {
+    const orderA = a.order !== undefined ? a.order : (parseFloat(a.style?.zIndex) || 0)
+    const orderB = b.order !== undefined ? b.order : (parseFloat(b.style?.zIndex) || 0)
+    return orderA - orderB
+  })
+}
+</script>
+
+<template>
+  <div class="group-container-wrapper" style="width: 100%; height: 100%; position: relative; overflow: visible; pointer-events: none;">
+    <div
+      v-for="child in sortGroupElements(element.elements || [])"
+      :key="child.id"
+      :id="`canvas-el-${child.id}`"
+      class="group-child-item"
+      :style="{
+        position: 'absolute',
+        left: child.style?.left,
+        top: child.style?.top,
+        width: child.style?.width,
+        height: (child.type === 'text' && (child.autoFit?.type === 'shape' || child.style?.height === 'auto') && !child.content?.includes('<table') && !child.latex && child.style?.writingMode !== 'vertical-rl' && child.style?.writingMode !== 'vertical-lr') ? 'auto' : (child.style?.height || (child.height ? `${child.height}px` : 'auto')),
+        minHeight: (child.type === 'text' && !child.content?.includes('<table') && !child.latex) ? child.style?.height : undefined,
+        transform: `rotate(${child.style?.rotate || 0}deg) scale(${child.type !== 'text' && child.type !== 'line' && ((child.style as any)?.flipH || child.flipH || child.isFlipH) ? -1 : 1}, ${child.type !== 'text' && child.type !== 'line' && ((child.style as any)?.flipV || child.flipV || child.isFlipV) ? -1 : 1})`,
+        opacity: child.style?.opacity !== undefined ? child.style.opacity : 1,
+        filter: getElementDropShadowFilter(child),
+        pointerEvents: child.type === 'group' ? 'none' : (((child.type === 'shape' || !child.type) && !hasElementFill(child) && !hasElementBorder(child)) ? 'none' : 'auto')
+      }"
+      @mousedown.stop="emit('childMouseDown', $event, child, element)"
+      @click.stop="emit('childClick', $event, child, element)"
+      @dblclick.stop="emit('childDblClick', $event, child, element)"
+      @contextmenu.stop.prevent="emit('childContextMenu', $event, child, element)"
+    >
+      <!-- Child Text -->
+      <template v-if="child.type === 'text'">
+        <CanvasTextElement
+          :element="child"
+          :active-slide="activeSlide"
+          :is-selected="selectedElementId === child.id"
+          :is-editing-text="isEditingText"
+          :selected-element-id="selectedElementId"
+          :theme-recipe="themeRecipe"
+          :rendered-content="getRenderedContent ? getRenderedContent(child) : child.content"
+          :get-text-stroke-style="getTextStrokeStyle"
+          :get-element-text-shadow="getElementTextShadow"
+          @focusin="emit('textFocus', child)"
+          @focusout="emit('textBlur', $event, child)"
+          @input="emit('textInput', $event, child)"
+          @keydown="emit('textKeyDown', $event, child)"
+          @mousemove="emit('textMouseMove', $event, child)"
+          @mouseleave="emit('textMouseLeave', $event, child)"
+          @dblclick="emit('startEditing', child.id)"
+          @formula-dbl-click="emit('formulaDblClick', child)"
+          @table-dbl-click="emit('tableDblClick', $event, child)"
+        />
+      </template>
+
+      <!-- Child Shape -->
+      <template v-else-if="child.type === 'shape'">
+        <CanvasShapeElement
+          :element="child"
+          :active-slide="activeSlide"
+          :is-selected="selectedElementId === child.id"
+          :is-editing-text="isEditingText"
+          :selected-element-id="selectedElementId"
+          :theme-recipe="themeRecipe"
+          :parent-width-px="selfWidthPx"
+          :parent-height-px="selfHeightPx"
+          :get-text-stroke-style="getTextStrokeStyle"
+          :get-element-text-shadow="getElementTextShadow"
+          :is-image-placeholder="isImagePlaceholder"
+          @text-focus="emit('textFocus', child)"
+          @text-blur="emit('textBlur', $event, child)"
+          @text-input="emit('textInput', $event, child)"
+          @text-key-down="emit('textKeyDown', $event, child)"
+          @start-editing="(ev) => emit('startEditing', child.id, ev)"
+        />
+      </template>
+
+      <!-- Child Line -->
+      <template v-else-if="child.type === 'line'">
+        <CanvasLineElement :element="child" :all-elements="element.elements" />
+      </template>
+
+      <!-- Child Image -->
+      <template
+        v-else-if="child.type === 'image' || child.type === 'pic' || child.type === 'picture' || (child.type !== 'text' && child.type !== 'line' && child.type !== 'shape' && child.type !== 'group' && child.type !== 'chart' && Boolean(getElementImageSrc(child)))">
+        <CanvasImageElement :element="child" :cropping-element-id="croppingElementId" />
+      </template>
+
+      <!-- Child Chart -->
+      <template v-else-if="child.type === 'chart'">
+        <div style="width: 100%; height: 100%; overflow: visible; box-sizing: border-box;" :style="{
+          backgroundColor: child.style?.fill || 'transparent',
+          borderWidth: child.style?.borderWidth || '0px',
+          borderStyle: child.style?.borderStyle || 'solid',
+          borderColor: child.style?.borderColor || 'transparent',
+          borderRadius: child.style?.borderRadius || '0px',
+          boxShadow: child.style?.boxShadow || 'none'
+        }">
+          <SvgChart :element="child" />
+        </div>
+      </template>
+
+      <!-- Nested Group -->
+      <template v-else-if="child.type === 'group'">
+        <CanvasGroupElement
+          :element="child"
+          :active-slide="activeSlide"
+          :cropping-element-id="croppingElementId"
+          :parent-width-px="selfWidthPx"
+          :parent-height-px="selfHeightPx"
+          :selected-element-ids="selectedElementIds"
+          :selected-element-id="selectedElementId"
+          :is-editing-text="isEditingText"
+          :theme-recipe="themeRecipe"
+          :get-text-stroke-style="getTextStrokeStyle"
+          :get-element-text-shadow="getElementTextShadow"
+          :get-rendered-content="getRenderedContent"
+          @child-mouse-down="(ev, c, p) => emit('childMouseDown', ev, c, p)"
+          @child-click="(ev, c, p) => emit('childClick', ev, c, p)"
+          @child-dbl-click="(ev, c, p) => emit('childDblClick', ev, c, p)"
+          @child-context-menu="(ev, c, p) => emit('childContextMenu', ev, c, p)"
+          @text-focus="(c) => emit('textFocus', c)"
+          @text-blur="(ev, c) => emit('textBlur', ev, c)"
+          @text-input="(ev, c) => emit('textInput', ev, c)"
+          @text-key-down="(ev, c) => emit('textKeyDown', ev, c)"
+          @text-mouse-move="(ev, c) => emit('textMouseMove', ev, c)"
+          @text-mouse-leave="(ev, c) => emit('textMouseLeave', ev, c)"
+          @start-editing="(id, ev) => emit('startEditing', id, ev)"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.group-child-item {
+  box-sizing: border-box;
+}
+</style>