jvs-ppt-ui 0.0.8 → 0.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jvs-ppt-ui",
   "private": false,
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "main": "./dist/lib/jvs-ppt-ui.umd.js",
   "module": "./dist/lib/jvs-ppt-ui.es.js",

package/src/components/CanvasArea.vue

@@ -3086,6 +3086,9 @@ function stopCreationDrag() {
     }
 
     activeSlide.value.elements.push(createdElement)
+    if (createdElement.type === 'line' && (createdElement.startConnection || createdElement.endConnection)) {
+      syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, [createdElement.id])
+    }
     selectedElementId.value = createdElement.id
     selectedElementIds.value = [createdElement.id]
     justCreatedElement = true
@@ -4575,14 +4578,37 @@ function startDrag(e: MouseEvent, el: any) {
     : selectedEls
 
   // 检查是否有连线需要同步，避免无连线时每帧循环
-  const selIds = new Set(selectedElementIds.value)
-  hasConnectionsToSync = (activeSlide.value?.elements || []).some((it: any) =>
-    it && it.type === 'line' && (
-      selIds.has(it.id) ||
-      (it.startConnection && selIds.has(it.startConnection.id)) ||
-      (it.endConnection && selIds.has(it.endConnection.id))
-    )
-  )
+  const selIds = new Set<string>(selectedElementIds.value)
+  if (Array.isArray(targetIds)) targetIds.forEach(id => selIds.add(id))
+  dragTargetEls.forEach((item: any) => {
+    if (item?.id) selIds.add(item.id)
+    if (item?.type === 'group' && Array.isArray(item.elements)) {
+      const addChildren = (children: any[]) => {
+        children.forEach(ch => {
+          if (ch?.id) selIds.add(ch.id)
+          if (ch?.type === 'group' && Array.isArray(ch.elements)) addChildren(ch.elements)
+        })
+      }
+      addChildren(item.elements)
+    }
+  })
+  const checkHasConnection = (elements: any[]): boolean => {
+    for (const it of elements) {
+      if (!it) continue
+      if (it.type === 'line' && (
+        selIds.has(it.id) ||
+        (it.startConnection && selIds.has(it.startConnection.id)) ||
+        (it.endConnection && selIds.has(it.endConnection.id))
+      )) {
+        return true
+      }
+      if (it.type === 'group' && Array.isArray(it.elements)) {
+        if (checkHasConnection(it.elements)) return true
+      }
+    }
+    return false
+  }
+  hasConnectionsToSync = checkHasConnection(activeSlide.value?.elements || [])
 
   // Record drag states
   dragStates = dragTargetEls.map((item: any) => {
@@ -7920,8 +7946,12 @@ async function handleGlobalPaste(e: ClipboardEvent) {
               v-show="el.visible !== false"
               v-memo="[
                 (isDragging || isCanvasDragging)
-                  ? (selectedElementIds.includes(el.id) ? `${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}` : 'frozen')
-                  : `${el.id}_${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}_${selectedElementIds.includes(el.id)}_${selectedElementId === el.id}_${isEditingText}_${activeTab}_${activeSlideVersion}`
+                  ? (selectedElementIds.includes(el.id)
+                      ? `${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}`
+                      : (el.type === 'line'
+                          ? `${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.start?.join(',')}_${el.end?.join(',')}_${el.broken?.join(',')}_${el.broken2?.join(',')}_${el.curve?.join(',')}`
+                          : 'frozen'))
+                  : `${el.id}_${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}_${el.type === 'line' ? `${el.start?.join(',')}_${el.end?.join(',')}_${el.broken?.join(',')}_${el.broken2?.join(',')}_${el.curve?.join(',')}_` : ''}${selectedElementIds.includes(el.id)}_${selectedElementId === el.id}_${isEditingText}_${activeTab}_${activeSlideVersion}`
               ]"
               :class="{
                 selected: selectedElementIds.includes(el.id),

package/src/components/Header.vue

@@ -7189,12 +7189,16 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
     reader.readAsArrayBuffer(file)
   }
 
-  const props = defineProps<{
+  const props = withDefaults(defineProps<{
     slotProps?: any
-  }>()
+    showMenu?: boolean
+  }>(), {
+    showMenu: true
+  })
 
   const headerContext = computed(() => ({
     ...(props.slotProps || {}),
+    showMenu: props.showMenu,
     presentationTitle: presentationTitle.value,
     isEditingTitle: isEditingTitle.value,
     startEditingTitle,
@@ -7232,7 +7236,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
 
       <!-- 外部左侧主体插槽 (默认呈现内置菜单和标题) -->
       <slot name="left" v-bind="headerContext">
-        <el-popover ref="menuPopoverRef" placement="bottom-start" :width="320" trigger="click"
+        <el-popover v-if="showMenu" ref="menuPopoverRef" placement="bottom-start" :width="320" trigger="click"
         popper-style="padding: 0; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border: 1px solid #e2e8f0; background: #fff; overflow: hidden;">
         <template #reference>
           <button class="btn-icon" style="padding: 4px; color: var(--text-primary); flex-shrink: 0;" data-tooltip="菜单">
@@ -7401,7 +7405,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
     </div>
 
     <!-- Center Section: Integrated Top Toolbar -->
-    <div class="header-center-tools" :style="{ justifyContent: isMasterEditingView ? 'flex-start' : 'center' }" style="flex: 1; display: flex; align-items: center; overflow: hidden; min-width: 0; position: relative; z-index: 10; margin: 0 8px;">
+    <div class="header-center-tools" :style="{ justifyContent: isMasterEditingView ? 'flex-start' : 'center' }" style="flex: 1; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; min-width: 0; position: relative; z-index: 10; margin: 0 8px; scrollbar-width: none; -ms-overflow-style: none;">
       <!-- 外部中间工具栏插槽 (默认呈现内置 Toolbar，支持前置/后置插槽扩展或整栏替换) -->
       <slot name="center" v-bind="headerContext">
         <slot name="toolbar" v-bind="headerContext">
@@ -7826,4 +7830,8 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
   font-weight: 500;
   font-family: inherit;
 }
+
+.header-center-tools::-webkit-scrollbar {
+  display: none;
+}
 </style>

package/src/components/PptEditor.vue

@@ -33,6 +33,7 @@ const props = withDefaults(defineProps<PptEditorProps>(), {
   modelValue: null,
   readonly: false,
   showHeader: true,
+  showMenu: true,
   showSidebarLeft: true,
   showSidebarRight: true,
   enableMcp: false,
@@ -895,6 +896,12 @@ const headerSlotContext = computed(() => ({
 // 对外通过 ref 暴露所有方法
 defineExpose(editorApi)
 
+const computedShowMenu = computed(() => {
+  if (props.showMenu !== undefined) return props.showMenu
+  if (props.config?.showMenu !== undefined) return props.config.showMenu
+  return true
+})
+
 onMounted(async () => {
   // 触发 ready 事件
   emit('ready', editorApi)
@@ -928,7 +935,7 @@ onMounted(async () => {
   <div class="app-container jvs-ppt-editor-root" :class="{ 'is-readonly': readonly }">
     <!-- Main top Navigation bar (支持完整 header 插槽替换或精细区域插槽定制) -->
     <slot name="header" v-bind="headerSlotContext">
-      <Header ref="headerRef" v-show="showHeader" :slot-props="headerSlotContext">
+      <Header ref="headerRef" v-show="showHeader" :show-menu="computedShowMenu" :slot-props="headerSlotContext">
         <!-- 左侧前置 (Logo、返回按钮等) -->
         <template v-if="slots['header-left-prefix']" #left-prefix="sp">
           <slot name="header-left-prefix" v-bind="sp"></slot>

package/src/components/Toolbar.vue

@@ -1301,7 +1301,8 @@ function cancelInsertMedia() {
 .toolbar-ops-group {
   display: flex;
   align-items: center;
-  gap: 26px;
+  gap: clamp(10px, 1.6vw, 24px);
+  flex-shrink: 0;
 }
 
 .toolbar-v-divider {

package/src/composables/canvas/useCanvasTransform.ts

@@ -1,5 +1,6 @@
 import { ref, nextTick, type Ref } from 'vue'
 import { SHAPE_PATH_FORMULAS } from '../../utils/pptxShapes'
+import { syncSlideConnections } from '../../utils/line'
 
 export interface ResizeState {
   el: any
@@ -412,6 +413,9 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
         }
       }
     }
+    if (activeSlide.value && activeSlide.value.elements) {
+      syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, selectedElementIds.value)
+    }
   }
 
   function stopResize() {
@@ -539,6 +543,9 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
       newAngle = (newAngle % 360 + 360) % 360
       state.el.style.rotate = Math.round(newAngle)
     }
+    if (activeSlide.value && activeSlide.value.elements) {
+      syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, selectedElementIds.value)
+    }
   }
 
   function stopRotate() {
@@ -1031,6 +1038,9 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
         parentGroup.elements[idx] = { ...curEl, path: newPath, content: newPath }
       }
     }
+    if (activeSlide.value && activeSlide.value.elements) {
+      syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, selectedElementIds.value)
+    }
   }
 
   function stopDragKeypoint() {
@@ -1249,6 +1259,9 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     currentElement.value = null
     window.removeEventListener('mousemove', handleDragLinePoint)
     window.removeEventListener('mouseup', stopDragLinePoint)
+    if (activeSlide.value && activeSlide.value.elements) {
+      syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, selectedElementIds.value)
+    }
     pauseHistory.value = false
     addHistorySnapshot()
   }

package/src/composables/useSlides.ts

@@ -2568,6 +2568,18 @@ function markAllPagesDirty() {
   for (let i = 0; i < slides.value.length; i++) dirtyPageIndexes.add(i)
 }
 
+// 递归释放元素（含组合内子元素）的 blob: URL，防止导入替换后组内媒体泄漏
+function revokeElementBlobUrls(el: any) {
+  if (!el) return
+  if (Array.isArray(el.elements)) {
+    for (const child of el.elements) revokeElementBlobUrls(child)
+  }
+  const src = el.src || el.content
+  if (typeof src === 'string' && src.startsWith('blob:')) {
+    try { URL.revokeObjectURL(src) } catch (e) {}
+  }
+}
+
 function revokeSlideBlobUrls(slideList: any[]) {
   if (!slideList || !Array.isArray(slideList)) return
   for (const slide of slideList) {
@@ -2585,11 +2597,7 @@ function revokeSlideBlobUrls(slideList: any[]) {
     }
     if (slide.elements && Array.isArray(slide.elements)) {
       for (const el of slide.elements) {
-        if (!el) continue
-        const src = el.src || el.content
-        if (typeof src === 'string' && src.startsWith('blob:')) {
-          try { URL.revokeObjectURL(src) } catch (e) {}
-        }
+        revokeElementBlobUrls(el)
       }
     }
   }

package/src/types/index.ts

@@ -92,6 +92,8 @@ export type CustomUploadHandler = (
 export interface PptEditorConfig {
   /** 演示文稿初始标题 */
   title?: string
+  /** 是否显示左上角主菜单按钮（导入/导出/快捷键等弹窗菜单），默认为 true */
+  showMenu?: boolean
   /** 是否启用 AI PPT 智能生成与一键美化功能。未配置或为 false 时不显示一键美化功能 */
   enableAi?: boolean
   /** AI 一键美化请求接口地址。如果未配置或未开启，则不显示一键美化功能 */
@@ -138,6 +140,8 @@ export interface PptEditorProps {
   readonly?: boolean
   /** 是否显示顶部导航与工具栏 */
   showHeader?: boolean
+  /** 是否显示左上角主菜单按钮（导入/导出/快捷键等弹窗菜单），默认为 true */
+  showMenu?: boolean
   /** 是否显示左侧缩略图导航栏 */
   showSidebarLeft?: boolean
   /** 是否显示右侧属性面板 */