jvs-ppt-ui 0.0.11 → 0.0.14

package/package.json

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

package/src/App.vue

@@ -47,7 +47,7 @@ async function handleCustomUpload(fileOrBlob: File | Blob, context: UploadResour
   <!-- :custom-upload="handleCustomUpload" -->
   <PptEditor ref="editorRef" :custom-upload="handleCustomUpload" :enable-mcp="true" :enable-ai="true"
     ai-api-url="/jvs-dam/api/ppt/ai-replace" :enable-material="true"
-    material-tree-api-url="/jvs-dam/api/dam/material/tree" material-page-api-url="/jvs-dam/api/dam/material/page"
-    material-api-url="/jvs-dam/api/dam/material/tree" material-save-api-url="/jvs-dam/api/dam/material/save"
+    material-api-url="/jvs-dam/stock/search" material-page-api-url="/jvs-dam/stock/search"
+    material-save-api-url="/jvs-dam/api/dam/material/save"
     @save="handleSave" @ready="handleReady" />
 </template>

package/src/components/CanvasArea.vue

@@ -18,6 +18,7 @@ import CanvasGroupElement from './canvas/elements/CanvasGroupElement.vue'
 import CanvasSymbolPanel from './canvas/panels/CanvasSymbolPanel.vue'
 import CanvasSearchPanel from './canvas/panels/CanvasSearchPanel.vue'
 import CanvasSelectionPanel from './canvas/panels/CanvasSelectionPanel.vue'
+import { isTextContainingElement } from '../utils/groupFlip'
 
 import { useCanvasTable, cleanTableDOMForSaving } from '../composables/canvas/useCanvasTable'
 import { useCanvasAlignment } from '../composables/canvas/useCanvasAlignment'
@@ -66,7 +67,7 @@ const {
   globalThemeColor, globalFontColor, globalFontFamily, globalBgColor, getActiveSlideThemeRecipe, croppingElementId,
   isMasterEditingView, slideMasters, activeMasterId, activeLayoutId, activeLayout, sortSlideElements,
   selectedSlideIndexes, isMouseOverSlideList, selectAllSlides, deleteSelectedSlides, copySelectedSlides, cutSelectedSlides, duplicateSelectedSlides, duplicateSelectedElements,
-  getEffectiveMasterElementsForSlide, getEffectiveSlideBackground, uploadResource
+  getEffectiveMasterElementsForSlide, getEffectiveSlideBackground, uploadResource, isReadonly
 } = useSlides()
 const activeTab = activeTabRaw as any
 
@@ -205,7 +206,8 @@ const {
   applyTextStyleToHtml: (html: string, style: Record<string, any>) => applyTextStyleToHtml(html, style),
   renderLatexToSvg: (latex: string) => renderLatexToSvg(latex),
   sanitizeNbspInHtml: (html: string) => sanitizeNbspInHtml(html),
-  updateTextFontScale: (el: any) => updateTextFontScale(el)
+  updateTextFontScale: (el: any) => updateTextFontScale(el),
+  isReadonly
 })
 const lastMouseDownTarget = ref<HTMLElement | null>(null)
 
@@ -405,7 +407,8 @@ const {
   getOverlayWidth: (el: any) => getOverlayWidth(el),
   getOverlayHeight: (el: any) => getOverlayHeight(el),
   selectedElementWidth,
-  selectedElementHeight
+  selectedElementHeight,
+  isReadonly
 })
 
 const getSelectedCellCount = () => selectedCellCount.value
@@ -1509,7 +1512,8 @@ const { handleGlobalKeyDown } = useCanvasShortcuts({
   getElementPixels: (el: any) => getElementPixels(el),
   shapeFormatPainter,
   notify,
-  addHistorySnapshot
+  addHistorySnapshot,
+  isReadonly
 })
 
 watch(fitTrigger, () => {
@@ -2397,6 +2401,7 @@ function getLineConfigFromContent(content: string) {
 }
 
 function handleCanvasDblClick(e: MouseEvent) {
+  if (isReadonly.value) return
   // 1. 如果事件目标本身或其父级就在某元素内
   const target = e.target as HTMLElement
   const closestElDom = target?.closest?.('.canvas-element, [id^="canvas-el-"]') as HTMLElement | null
@@ -2555,6 +2560,12 @@ function handleCanvasMouseDown(e: MouseEvent) {
     return
   }
 
+  if (isReadonly.value) {
+    selectedElementId.value = null
+    selectedElementIds.value = []
+    return
+  }
+
   if (shapeFormatPainter.value) {
     shapeFormatPainter.value = null
     return
@@ -3256,7 +3267,7 @@ let lineControlPointStartX = 0
 let lineControlPointStartY = 0
 
 function startDragLineControlPoint(e: MouseEvent, el: any, type: string) {
-  if (el.locked) return
+  if (isReadonly.value || el.locked) return
   e.stopPropagation()
   e.preventDefault()
 
@@ -3578,6 +3589,10 @@ function handleElementMouseDown(e: MouseEvent, el: any) {
 
   e.stopPropagation()
 
+  if (isReadonly.value) {
+    return
+  }
+
   if (shapeFormatPainter.value) {
     if (shapeFormatPainter.value.mode === 'text-range') {
       return
@@ -3606,6 +3621,7 @@ function handleElementMouseDown(e: MouseEvent, el: any) {
 }
 
 function handleBorderMouseDown(e: MouseEvent, el: any) {
+  if (isReadonly.value) return
   if (e.button !== 0) return
   if (isLockedMasterElement(el) || el.locked) {
     return
@@ -3650,6 +3666,7 @@ function handleBorderMouseDown(e: MouseEvent, el: any) {
 }
 
 function handleElementDblClick(e: MouseEvent, el: any) {
+  if (isReadonly.value) return
   let target = el
   if (selectedElementIds.value.length > 0 && !selectedElementIds.value.includes(el.id)) {
     const activeSelectedEl = findSelectedElementUnderPoint(e.clientX, e.clientY)
@@ -3762,6 +3779,7 @@ function handleChildDragKeyUp(e: KeyboardEvent) {
 }
 
 function startChildDrag(e: MouseEvent, child: any, parentGroup: any) {
+  if (isReadonly.value) return
   const childContainerEl = document.getElementById(`editable-${child.id}`)
   const childCanvasElDom = document.getElementById(`canvas-el-${child.id}`)
   const isChildClickInside = (childContainerEl && (childContainerEl === e.target || childContainerEl.contains(e.target as Node))) ||
@@ -3975,6 +3993,7 @@ function handleChildMouseDown(e: MouseEvent, child: any, parentGroup: any) {
     checkAndExitEditText(undefined, true)
   }
   e.stopPropagation()
+  if (isReadonly.value) return
 
   if (shapeFormatPainter.value) {
     if (shapeFormatPainter.value.mode === 'text-range') {
@@ -4039,7 +4058,7 @@ function handleChildMouseDown(e: MouseEvent, child: any, parentGroup: any) {
 }
 
 function handleChildClick(e: MouseEvent, child: any, parentGroup: any) {
-  if (activeTool.value) return
+  if (isReadonly.value || activeTool.value) return
   if (isLockedMasterElement(child)) return
   e.stopPropagation()
   if (dragOccurred) {
@@ -4073,6 +4092,7 @@ function handleChildClick(e: MouseEvent, child: any, parentGroup: any) {
 }
 
 function handleChildDblClick(e: MouseEvent, child: any, parentGroup: any) {
+  if (isReadonly.value) return
   e.stopPropagation()
   if (isLockedMasterElement(child)) return
   // 已在编辑该子元素时的双击 = 原生选词，保持选区不重进编辑
@@ -4096,6 +4116,7 @@ function handleChildDblClick(e: MouseEvent, child: any, parentGroup: any) {
 }
 
 function handleElementClick(e: MouseEvent, elId: string) {
+  if (isReadonly.value) return
   if (activeTool.value) return
   if (elId) {
     const targetEl = activeSlide.value?.elements.find(x => x.id === elId)
@@ -4385,7 +4406,7 @@ function getOverlayStyle(el: any) {
       width: `${w}px`,
       height: `${h}px`,
       zIndex: isSelectedActive ? 300 : 100,
-      transform: `rotate(${((parentPixels.rotate || 0) + (el.style?.rotate || 0))}deg) scale(${el.type !== 'text' && el.type !== 'line' && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${el.type !== 'text' && el.type !== 'line' && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
+      transform: `rotate(${((parentPixels.rotate || 0) + (el.style?.rotate || 0))}deg) scale(${!isTextContainingElement(el) && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${!isTextContainingElement(el) && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
       pointerEvents: 'none' as const,
       boxSizing: 'border-box' as const,
       '--handle-scale': +(100 / (zoomRatio.value || 100)).toFixed(4)
@@ -4399,7 +4420,7 @@ function getOverlayStyle(el: any) {
     width: getOverlayWidth(el),
     height: getOverlayHeight(el),
     zIndex: isSelectedActive ? 300 : 100,
-    transform: el.type === 'line' ? 'none' : `rotate(${el.style.rotate || 0}deg) scale(${el.type !== 'text' && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${el.type !== 'text' && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
+    transform: el.type === 'line' ? 'none' : `rotate(${el.style.rotate || 0}deg) scale(${!isTextContainingElement(el) && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${!isTextContainingElement(el) && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
     pointerEvents: 'none' as const,
     boxSizing: 'border-box' as const,
     '--handle-scale': +(100 / (zoomRatio.value || 100)).toFixed(4)
@@ -4495,6 +4516,7 @@ function handleTextMouseLeave(_e: MouseEvent, el: any) {
 }
 
 function startDrag(e: MouseEvent, el: any) {
+  if (isReadonly.value) return
   const target = e.target as HTMLElement
   const container = document.getElementById(`editable-${el.id}`)
   const canvasElDom = document.getElementById(`canvas-el-${el.id}`)
@@ -7821,7 +7843,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
               </defs>
             </svg>
             <!-- Smart Guides & Corner Decorations -->
-            <CanvasSmartGuides :alignment-lines="alignmentLines" :active-slide-id="activeSlide?.id" />
+            <CanvasSmartGuides v-if="!isReadonly" :alignment-lines="alignmentLines" :active-slide-id="activeSlide?.id" />
 
             <!-- Ctrl Drag Copy Origin Replica (原元素在原地 100% 完整原样真实呈现，杜绝空虚高亮块) -->
             <template v-if="ctrlDragReplicas.length > 0">
@@ -7836,7 +7858,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                   width: (replica.el.type === 'text' && !isMasterOrPlaceholder(replica.el) && (replica.el.autoFit?.type === 'shape' || replica.el.style?.width === 'auto') && !replica.el.content?.includes('<table') && !replica.el.latex && (replica.el.style?.writingMode === 'vertical-rl' || replica.el.style?.writingMode === 'vertical-lr')) ? 'auto' : (replica.el.style?.width || (replica.el.width ? `${replica.el.width}px` : 'auto')),
                   height: (replica.el.type === 'text' && !isMasterOrPlaceholder(replica.el) && (replica.el.autoFit?.type === 'shape' || replica.el.style?.height === 'auto') && !replica.el.content?.includes('<table') && !replica.el.latex && replica.el.style?.writingMode !== 'vertical-rl' && replica.el.style?.writingMode !== 'vertical-lr') ? 'auto' : (replica.el.style?.height || (replica.el.height ? `${replica.el.height}px` : 'auto')),
                   zIndex: 2,
-                  transform: replica.el.type === 'line' ? 'none' : `rotate(${replica.el.style?.rotate || replica.el.rotate || 0}deg) scale(${replica.el.type !== 'text' && ((replica.el.style as any)?.flipH || replica.el.flipH || replica.el.isFlipH) ? -1 : 1}, ${replica.el.type !== 'text' && ((replica.el.style as any)?.flipV || replica.el.flipV || replica.el.isFlipV) ? -1 : 1})`,
+                  transform: replica.el.type === 'line' ? 'none' : `rotate(${replica.el.style?.rotate || replica.el.rotate || 0}deg) scale(${!isTextContainingElement(replica.el) && ((replica.el.style as any)?.flipH || replica.el.flipH || replica.el.isFlipH) ? -1 : 1}, ${!isTextContainingElement(replica.el) && ((replica.el.style as any)?.flipV || replica.el.flipV || replica.el.isFlipV) ? -1 : 1})`,
                   opacity: (replica.el.style as any)?.opacity !== undefined ? (replica.el.style as any)?.opacity : 1,
                   filter: getElementDropShadowFilter(replica.el),
                   pointerEvents: 'none'
@@ -7926,7 +7948,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                 width: el.style?.width || (el.width !== undefined ? `${el.width}px` : 'auto'),
                 height: el.style?.height || (el.height !== undefined ? `${el.height}px` : 'auto'),
                 zIndex: 1,
-                transform: `rotate(${el.style?.rotate || el.rotate || 0}deg) scale(${el.type !== 'text' && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${el.type !== 'text' && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
+                transform: `rotate(${el.style?.rotate || el.rotate || 0}deg) scale(${!isTextContainingElement(el) && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${!isTextContainingElement(el) && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
                 opacity: el.style?.opacity !== undefined ? el.style.opacity : 1,
                 pointerEvents: 'none'
               }">
@@ -8025,14 +8047,14 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                 width: (el.type === 'text' && !isMasterOrPlaceholder(el) && (el.autoFit?.type === 'shape' || el.style?.width === 'auto') && !el.content?.includes('<table') && !el.latex && (el.style?.writingMode === 'vertical-rl' || el.style?.writingMode === 'vertical-lr')) ? 'auto' : (el.style?.width || 'auto'),
                 height: (el.type === 'text' && !isMasterOrPlaceholder(el) && (el.autoFit?.type === 'shape' || el.style?.height === 'auto') && !el.content?.includes('<table') && !el.latex && el.style?.writingMode !== 'vertical-rl' && el.style?.writingMode !== 'vertical-lr') ? 'auto' : (el.style?.height || (el.height ? `${el.height}px` : 'auto')),
                 zIndex: 3,
-                cursor: (isEditingText && (selectedElementId === el.id || editingElementId === el.id) && (el.type === 'text' || el.type === 'shape') && !el.latex && !el.content?.includes('<table')) ? 'text' : undefined,
-                transform: el.type === 'line' ? 'none' : `rotate(${el.style?.rotate || 0}deg) scale(${el.type !== 'text' && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${el.type !== 'text' && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
+                cursor: isReadonly ? 'default' : ((isEditingText && (selectedElementId === el.id || editingElementId === el.id) && (el.type === 'text' || el.type === 'shape') && !el.latex && !el.content?.includes('<table')) ? 'text' : undefined),
+                transform: el.type === 'line' ? 'none' : `rotate(${el.style?.rotate || 0}deg) scale(${!isTextContainingElement(el) && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${!isTextContainingElement(el) && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
                 opacity: (el.style as any)?.opacity !== undefined ? (el.style as any)?.opacity : 1,
                 filter: getElementDropShadowFilter(el),
                 pointerEvents: (isDragging || isCanvasDragging) ? 'none' : ((isDraggingLine && el.id === selectedElementId) ? 'none' : (isLockedMasterElement(el) ? 'none' : (el.type === 'group' ? 'none' : (el.type === 'line' ? 'none' : (((el.type === 'shape' || !el.type) && !hasElementFill(el) && !hasElementBorder(el) && !isImagePlaceholder(el)) ? 'none' : 'auto')))))
               }" @mousedown="handleElementMouseDown($event, el)" @click="handleElementClick($event, el.id)"
               @contextmenu.stop.prevent="handleElementContextMenu($event, el)"
-              @dblclick.stop="handleElementDblClick($event, el)"
+              @dblclick.stop="isReadonly ? null : handleElementDblClick($event, el)"
               @mouseenter="!(isDragging || isCanvasDragging) && (hoveredElementId = el.id)"
               @mouseleave="!(isDragging || isCanvasDragging) && (hoveredElementId = (hoveredElementId === el.id ? null : hoveredElementId))">
 
@@ -8124,7 +8146,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                     @focusout="handleTextBlur($event, el)"
                     @input="handleInput($event, el)"
                     @keydown="handleTextKeyDown($event, el)"
-                    @dblclick="el.latex ? handleFormulaDblClick(el) : (el.content.includes('<table') ? handleTableDblClick($event, el) : startEditingTextElement(el.id, $event))"
+                    @dblclick="isReadonly ? null : (el.latex ? handleFormulaDblClick(el) : (el.content.includes('<table') ? handleTableDblClick($event, el) : startEditingTextElement(el.id, $event)))"
                     @mousemove="handleTextMouseMove($event, el)"
                     @mouseleave="handleTextMouseLeave($event, el)"
                     @table-dbl-click="handleTableDblClick($event, el)"
@@ -8154,7 +8176,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                     @text-key-down="handleTextKeyDown($event, el)"
                     @mousemove="handleTextMouseMove($event, el)"
                     @mouseleave="handleTextMouseLeave($event, el)"
-                    @dblclick="startEditingShapeText(el, $event)"
+                    @dblclick="isReadonly ? null : startEditingShapeText(el, $event)"
                     @start-editing="(ev) => startEditingShapeText(el, ev)"
                     @placeholder-upload="(id) => triggerPlaceholderImageUpload(id)"
                   />
@@ -8466,7 +8488,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
             </div>
 
             <!-- Global Selection Overlay (renders on top of all canvas elements to avoid masking) -->
-            <div v-for="selEl in selectedElements" :key="selEl.id" class="global-selection-overlay" :class="{
+            <div v-for="selEl in (isReadonly ? [] : selectedElements)" :key="selEl.id" class="global-selection-overlay" :class="{
               'line-selection': selEl.type === 'line',
               'locked-selection': selEl.locked,
               'table-selection': selEl.type === 'text' && selEl.content && selEl.content.includes('<table'),
@@ -8636,7 +8658,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
               </template>
 
               <!-- Draggable border overlay to facilitate dragging and state switching (available in both editing & selected states) -->
-              <div v-if="selEl.type !== 'line' && !selEl.locked && croppingElementId !== selEl.id && selectedElementIds.includes(selEl.id)"
+              <div v-if="!isReadonly && selEl.type !== 'line' && !selEl.locked && croppingElementId !== selEl.id && selectedElementIds.includes(selEl.id)"
                 class="text-edit-drag-helper"
                 style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 200;"
                 @contextmenu.stop.prevent="handleElementContextMenu($event, selEl)"
@@ -8697,7 +8719,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
 
               <!-- Transform, Resize, Line Endpoints & Crop Handles -->
               <CanvasTransformHandles
-                v-if="selectedElementIds.includes(selEl.id)"
+                v-if="!isReadonly && selectedElementIds.includes(selEl.id)"
                 :element="selEl"
                 :selected-element-id="selectedElementId"
                 :selected-element-ids="selectedElementIds"
@@ -8860,7 +8882,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
 
           <!-- Floating Quick Toolbar (No rotation, rendered as sibling of main-slide inside slide-zoom-container) -->
           <CanvasQuickToolbar
-            v-if="!isDragging && !isResizing && !isRotating && !isDraggingLine"
+            v-if="!isReadonly && !isDragging && !isResizing && !isRotating && !isDraggingLine"
             :selected-element="selectedElement"
             :selected-element-ids="selectedElementIds"
             :is-dragging="isDragging"
@@ -8934,11 +8956,12 @@ async function handleGlobalPaste(e: ClipboardEvent) {
 
     <!-- Footer Notes -->
     <div class="canvas-footer">
-      <input class="canvas-footer-notes" v-model="activeSlide.notes" placeholder="点击输入演讲者备注" />
+      <input class="canvas-footer-notes" :readonly="isReadonly" v-model="activeSlide.notes" :placeholder="isReadonly ? '演讲者备注' : '点击输入演讲者备注'" />
     </div>
 
     <!-- Custom Context Menu Component -->
     <CanvasContextMenu
+      v-if="!isReadonly"
       v-model:visible="showContextMenu"
       :position="contextMenuPos"
       :type="contextMenuType"