update

src/hooks/useImport.ts

@@ -1185,7 +1185,8 @@ export default () => {
                 defaultFontName: theme.value.fontName,
                 defaultColor: theme.value.fontColor,
                 content: convertFontSizePtToPx(el.content, ratio),
-                lineHeight: 1,
+                style: getStyle(convertFontSizePtToPx(el.content, ratio)),
+                lineHeight: 1.5,
                 outline: {
                   color: el.borderColor,
                   width: +(el.borderWidth * ratio).toFixed(2),
@@ -1245,7 +1246,7 @@ export default () => {
                   range: [[0, 0], [100, 100]],
                 };
               }
-
+/*
               // 如果 src 是 base64，触发上传
               if (el.src && typeof el.src === 'string' && el.src.startsWith('data:')) {
                 const uploadTask = (async () => {
@@ -1260,7 +1261,7 @@ export default () => {
                 })();
                 uploadTasks.push(uploadTask);
               }
-
+*/
               slide.elements.push(element);
             }
             else if (el.type === 'math') {
@@ -1275,7 +1276,7 @@ export default () => {
                 fixedRatio: true,
                 rotate: 0,
               }
-              
+              /*
               // 如果 src 是 base64，触发上传
               if (el.src && typeof el.src === 'string' && el.src.startsWith('data:')) {
                 const uploadTask = (async () => {
@@ -1290,6 +1291,7 @@ export default () => {
                 })();
                 uploadTasks.push(uploadTask);
               }
+              */
 
               slide.elements.push(element)
 
@@ -1414,7 +1416,7 @@ export default () => {
                   },
                   text: {
                     content: convertFontSizePtToPx(el.content, ratio),
-                    style: getStyle(el.content),
+                    style: getStyle(convertFontSizePtToPx(el.content, ratio)),
                     defaultFontName: theme.value.fontName,
                     defaultColor: theme.value.fontColor,
                     align: vAlignMap[el.vAlign] || 'middle',
@@ -1434,12 +1436,13 @@ export default () => {
 
                 if (shape) {
                   element.path = shape.path;
+                  //const { maxX, maxY } = getSvgPathRange(el.path);
                   element.viewBox = shape.viewBox;
-
+                  //element.viewBox = [originWidth || maxX, originHeight || maxY];
                   if (shape.pathFormula) {
                     element.pathFormula = shape.pathFormula;
                     element.viewBox = [el.width, el.height];
-
+                    //element.viewBox = [poriginWidth || originWidth || maxX, poriginHeight || originHeight || maxY];  
                     const pathFormula = SHAPE_PATH_FORMULAS[shape.pathFormula];
                     if ('editable' in pathFormula && pathFormula.editable) {
                       element.path = pathFormula.formula(el.width, el.height, pathFormula.defaultValue);
@@ -1448,12 +1451,14 @@ export default () => {
                       element.path = pathFormula.formula(el.width, el.height);
                     }
                   }
-                } else if (el.path && el.path.indexOf('NaN') === -1) {
+                }
+                else if (el.path && el.path.indexOf('NaN') === -1) {
                   const { maxX, maxY } = getSvgPathRange(el.path);
                   element.path = el.path;
-
-                  element.viewBox = [poriginWidth|| originWidth || maxX, poriginHeight || originHeight || maxY];
-                  //element.viewBox = [originWidth, originHeight];
+                  element.viewBox = poriginWidth? [maxX, maxY]: [originWidth, originHeight];
+                  //element.viewBox = [originWidth || maxX, originHeight || maxY];  
+                  //element.viewBox = originWidth? [(originWidth/(poriginWidth||1)), (originHeight/(poriginHeight||1))] : [maxX, maxY];
+                  //element.viewBox = [poriginWidth || maxX, poriginHeight || maxY];
                 }
 
                 if (el.shapType === 'custom') {
@@ -1466,7 +1471,10 @@ export default () => {
                     element.path = el.path!;
                   }
                   const { maxX, maxY } = getSvgPathRange(element.path);
-                  element.viewBox = [poriginWidth||maxX || originWidth, poriginHeight||maxY || originHeight];
+                  element.viewBox = [maxX, maxY];
+                  //element.viewBox = [originWidth || maxX, originHeight || maxY];  
+                  //element.viewBox = [poriginWidth || originWidth || maxX, poriginHeight || originHeight || maxY];  
+                  //element.viewBox = [poriginWidth || originWidth || maxX, poriginHeight || originHeight || maxY];  
                   //element.viewBox = [Math.max(maxX, originWidth), Math.max(maxY, originHeight)];
                   //element.viewBox = [originWidth, originHeight];
                 }
@@ -1663,7 +1671,7 @@ export default () => {
               if (el.isFlipV) elements = flipGroupElements(elements, 'x');
 
               // 递归解析子元素（注意：子元素的上传任务会加入同一个 uploadTasks 数组）
-              await parseElements(elements, pelements || el);
+              await parseElements(elements, el);
             }
 
             // ---------- 图表组合（SmartArt）----------
@@ -1673,7 +1681,7 @@ export default () => {
                 left: _el.left + originLeft,
                 top: _el.top + originTop,
               }));
-              await parseElements(elements);
+              await parseElements(elements, el);
             }
           }
         };

src/types/slides.ts

@@ -185,6 +185,7 @@ export interface PPTTextElement extends PPTBaseElement {
   paragraphSpace?: number
   vertical?: boolean
   textType?: TextType
+  style?: string
 }
 
 

src/utils/prosemirror/schema/marks.ts

@@ -10,7 +10,7 @@ const subscript: MarkSpec = {
       getAttrs: value => value === 'sub' && null
     },
   ],
-  toDOM: () => ['sub', { style: 'vertical-align: baseline;' },  0],
+  toDOM: () => ['sub',  0],
 }
 
 const superscript: MarkSpec = {

src/views/components/element/ShapeElement/index.vue

@@ -68,7 +68,6 @@
         </svg>
 
         <div class="shape-text" :style="text.style" :class="[text.align, { 'editable': editable || text.content }]">
-          <div>
             <ProsemirrorEditor
               ref="prosemirrorEditorRef"
               v-if="editable || text.content"
@@ -81,7 +80,7 @@
               @blur="checkEmptyText()"
               @mousedown="$event => handleSelectElement($event, false)"
             />
-          </div>
+
         </div>
       </div>
     </div>
@@ -231,6 +230,8 @@ const startEdit = () => {
   }
 }
 .shape-text {
+  width:100%;
+  height:100%;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -255,7 +256,6 @@ const startEdit = () => {
     top: 50%;
     -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
-    padding: 15%
   }
   &.bottom {
     justify-content: flex-end;

src/views/components/element/TextElement/index.vue

@@ -27,9 +27,7 @@
           color: elementInfo.defaultColor,
           fontFamily: elementInfo.defaultFontName,
           writingMode: elementInfo.vertical ? 'vertical-rl' : 'horizontal-tb',
-          display: 'flex',
-          alignItems: 'center',
-          overflow: hidden,
+
         }"
         v-contextmenu="contextmenus"
         @mousedown="$event => handleSelectElement($event)"
@@ -40,19 +38,21 @@
           :height="elementInfo.height"
           :outline="elementInfo.outline"
         />
-        <ProsemirrorEditor
-          class="text"
-          :elementId="elementInfo.id"
-          :defaultColor="elementInfo.defaultColor"
-          :defaultFontName="elementInfo.defaultFontName"
-          :editable="!elementInfo.lock"
-          :value="elementInfo.content"
-          :style="{
-            '--paragraphSpace': `${elementInfo.paragraphSpace === undefined ? 5 : elementInfo.paragraphSpace}px`,
-          }"
-          @update="({ value, ignore }) => updateContent(value, ignore)"
-          @mousedown="$event => handleSelectElement($event, false)"
-        />
+        <div class="shape-text" :style="elementInfo.style" :class="[elementInfo.align, { 'editable': editable || elementInfo.content }]">
+          <ProsemirrorEditor
+            class="text"
+            :elementId="elementInfo.id"
+            :defaultColor="elementInfo.defaultColor"
+            :defaultFontName="elementInfo.defaultFontName"
+            :editable="!elementInfo.lock"
+            :value="elementInfo.content"
+            :style="{
+              '--paragraphSpace': `${elementInfo.paragraphSpace === undefined ? 5 : elementInfo.paragraphSpace}px`,
+            }"
+            @update="({ value, ignore }) => updateContent(value, ignore)"
+            @mousedown="$event => handleSelectElement($event, false)"
+          />
+        </div>
 
         <!-- 当字号过大且行高较小时，会出现文字高度溢出的情况，导致拖拽区域无法被选中，因此添加了以下节点避免该情况 -->
         <div class="drag-handler top"></div>
@@ -220,4 +220,36 @@ watch(isHandleElement, () => {
     bottom: 0;
   }
 }
+
+.shape-text {
+  width:100%;
+  height:100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  word-break: break-word;
+  pointer-events: none;
+
+  &.editable {
+    pointer-events: all;
+  }
+
+  &.top {
+    justify-content: flex-start;
+  }
+  &.middle {
+    justify-content: center;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+  }
+  &.bottom {
+    justify-content: flex-end;
+  }
+}
 </style>