jvs-ppt-ui 0.0.10 → 0.0.12

package/src/components/CanvasArea.vue

@@ -66,7 +66,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 +205,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 +406,8 @@ const {
   getOverlayWidth: (el: any) => getOverlayWidth(el),
   getOverlayHeight: (el: any) => getOverlayHeight(el),
   selectedElementWidth,
-  selectedElementHeight
+  selectedElementHeight,
+  isReadonly
 })
 
 const getSelectedCellCount = () => selectedCellCount.value
@@ -1509,7 +1511,8 @@ const { handleGlobalKeyDown } = useCanvasShortcuts({
   getElementPixels: (el: any) => getElementPixels(el),
   shapeFormatPainter,
   notify,
-  addHistorySnapshot
+  addHistorySnapshot,
+  isReadonly
 })
 
 watch(fitTrigger, () => {
@@ -2397,6 +2400,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 +2559,12 @@ function handleCanvasMouseDown(e: MouseEvent) {
     return
   }
 
+  if (isReadonly.value) {
+    selectedElementId.value = null
+    selectedElementIds.value = []
+    return
+  }
+
   if (shapeFormatPainter.value) {
     shapeFormatPainter.value = null
     return
@@ -3256,7 +3266,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 +3588,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 +3620,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 +3665,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 +3778,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 +3992,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 +4057,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 +4091,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 +4115,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)
@@ -4495,6 +4515,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 +7842,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">
@@ -8025,14 +8046,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,
+                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(${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})`,
                 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 +8145,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 +8175,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 +8487,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 +8657,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 +8718,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 +8881,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 +8955,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"