jvs-ppt-ui 0.0.16 → 0.0.17

package/src/components/SidebarRight.vue

@@ -465,12 +465,15 @@ function applyTextStyleToHtml(html: string, styles: any) {
     paragraphs.forEach(applyTextStyles)
   }
 
-  // 综合处理字体与样式覆盖：如果指定了 fontFamily，清理/更新所有块级和内联节点的原有硬编码字体
-  if (styles.fontFamily) {
+  // 综合处理字体与样式覆盖：如果指定了 fontFamily 或 fontSize，清理/更新所有块级和内联节点的原有硬编码值
+  if (styles.fontFamily || styles.fontSize) {
     div.querySelectorAll('p, div, li, h1, h2, h3, h4, h5, h6, span, b, strong, i, em, a').forEach((elem: any) => {
-      if (elem.style && elem.style.fontFamily) {
+      if (styles.fontFamily && elem.style && elem.style.fontFamily) {
         elem.style.fontFamily = styles.fontFamily
       }
+      if (styles.fontSize && elem.style && elem.style.fontSize) {
+        elem.style.fontSize = styles.fontSize
+      }
     })
   }
 
@@ -571,11 +574,12 @@ function setStyleVal(prop: string, val: any) {
           }
         }
 
-        if (prop === 'fontFamily') {
+        if (prop === 'fontFamily' || prop === 'fontSize') {
           const container = document.getElementById(`editable-${el.id}`)
           if (container) {
-            container.style.fontFamily = val
-            container.innerHTML = applyTextStyleToHtml(container.innerHTML, { fontFamily: val })
+            if (prop === 'fontFamily') container.style.fontFamily = val
+            else container.style.fontSize = val
+            container.innerHTML = applyTextStyleToHtml(container.innerHTML, { [prop]: val })
             if (el.type === 'shape') {
               el.text = container.innerHTML
             } else {

package/src/components/TemplateGallery.vue

@@ -11,6 +11,7 @@ import {
   VideoPlay
 } from '@element-plus/icons-vue'
 import { useSlides, DEFAULT_MATERIAL_PAGE_API_URL } from '../composables/useSlides'
+import { isImagePlaceholder } from '../utils/canvas/elementStyles'
 
 const {
   addElement,
@@ -20,7 +21,12 @@ const {
   materialPageApiUrl,
   materialHeaders,
   activeTab,
-  materialPopoverVisible
+  materialPopoverVisible,
+  activeSlide,
+  selectedElementId,
+  placeholderMaterialTargetId,
+  resolveActivePlaceholderTargetId,
+  replacePlaceholderElement
 } = useSlides()
 
 export interface MaterialItem {
@@ -682,7 +688,7 @@ function formatMaterialTitle(title?: string, fallback = '素材', maxLen = 12):
   return text.length > maxLen ? `${text.slice(0, maxLen)}...` : text
 }
 
-// 点击素材卡片插入画布（区分视频与图片/矢量/插画）
+// 点击素材卡片插入画布（区分视频与图片/矢量/插画，若当前处于图片占位符替换状态则优先替换占位符）
 function handleSelectMaterial(meta: MaterialItem) {
   const isVid = isVideoMaterial(meta)
   const targetUrl = meta.sourceUrl || meta.url || meta.downloadUrl || meta.previewUrl
@@ -692,9 +698,36 @@ function handleSelectMaterial(meta: MaterialItem) {
     return
   }
 
-  let initialDimensions: { width?: number; height?: number } | undefined = undefined
   const rawW = meta.originalWidth || meta.width
   const rawH = meta.originalHeight || meta.height
+
+  const currentSelectedEl = selectedElementId?.value
+    ? activeSlide?.value?.elements?.find((el: any) => el.id === selectedElementId.value)
+    : null
+
+  const explicitTargetId =
+    placeholderMaterialTargetId?.value ||
+    (typeof window !== 'undefined' ? (window as any).__jvsPlaceholderTargetId : null)
+
+  const targetPlaceholderId =
+    (resolveActivePlaceholderTargetId ? resolveActivePlaceholderTargetId() : null) ||
+    (explicitTargetId && (!currentSelectedEl || currentSelectedEl.id === explicitTargetId)
+      ? explicitTargetId
+      : (currentSelectedEl && isImagePlaceholder(currentSelectedEl) ? currentSelectedEl.id : null))
+
+  if (targetPlaceholderId && replacePlaceholderElement) {
+    const replaced = replacePlaceholderElement(targetPlaceholderId, targetUrl, {
+      isVideo: isVid,
+      width: Number(rawW) || undefined,
+      height: Number(rawH) || undefined,
+      notifyMessage: isVid
+        ? `已使用视频 "${formatMaterialTitle(meta.title, '高清视频', 12)}" 替换占位符`
+        : `已使用素材 "${formatMaterialTitle(meta.title, '图片', 12)}" 替换占位符图片`
+    })
+    if (replaced) return
+  }
+
+  let initialDimensions: { width?: number; height?: number } | undefined = undefined
   if (rawW && rawH && rawW > 0 && rawH > 0) {
     const maxWidth = 480
     const maxHeight = 360

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>