From fc13e828534a6814d8e1cccc95832cf6dfb2ac89 Mon Sep 17 00:00:00 2001
From: zxc <1171051090@qq.com>
Date: Tue, 3 Sep 2024 22:51:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AF=BC=E5=85=A5pptx=E5=8D=95=E4=BD=8D?=
 =?UTF-8?q?=E6=8D=A2=E7=AE=97=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useImport.ts                        | 29 ++++++++++---------
 src/store/main.ts                             |  4 +++
 .../Editor/Canvas/hooks/useViewportSize.ts    |  1 +
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/hooks/useImport.ts b/src/hooks/useImport.ts
index 719bfdcc..e0a9569b 100644
--- a/src/hooks/useImport.ts
+++ b/src/hooks/useImport.ts
@@ -31,7 +31,8 @@ export default () => {
   const slidesStore = useSlidesStore()
   const { theme } = storeToRefs(useSlidesStore())
 
-  const { viewportSize } = storeToRefs(useMainStore())
+  const mainStore = useMainStore()
+  const { viewportSize } = storeToRefs(mainStore)
 
   const { addSlidesFromData } = useAddSlidesOrElements()
   const { isEmptySlide } = useSlideHandler()
@@ -107,9 +108,10 @@ export default () => {
     reader.onload = async e => {
       const json = await parse(e.target!.result as ArrayBuffer)
 
-      const ratioForPt2Px = 96 / 72
+      const ratio = 96 / 72
       const width = json.size.width
-      const ratio = viewportSize.value / width
+
+      mainStore.setViewportSize(width * ratio)
 
       const slides: Slide[] = []
       for (const item of json.slides) {
@@ -173,7 +175,7 @@ export default () => {
                 rotate: el.rotate,
                 defaultFontName: theme.value.fontName,
                 defaultColor: theme.value.fontColor,
-                content: convertFontSizePtToPx(el.content, ratioForPt2Px),
+                content: convertFontSizePtToPx(el.content, ratio),
                 lineHeight: 1,
                 outline: {
                   color: el.borderColor,
@@ -185,9 +187,9 @@ export default () => {
               }
               if (el.shadow) {
                 textEl.shadow = {
-                  h: el.shadow.h * ratioForPt2Px,
-                  v: el.shadow.v * ratioForPt2Px,
-                  blur: el.shadow.blur * ratioForPt2Px,
+                  h: el.shadow.h * ratio,
+                  v: el.shadow.v * ratio,
+                  blur: el.shadow.blur * ratio,
                   color: el.shadow.color,
                 }
               }
@@ -269,7 +271,7 @@ export default () => {
                     style: el.borderType === 'solid' ? 'solid' : 'dashed',
                   },
                   text: {
-                    content: convertFontSizePtToPx(el.content, ratioForPt2Px),
+                    content: convertFontSizePtToPx(el.content, ratio),
                     defaultFontName: theme.value.fontName,
                     defaultColor: theme.value.fontColor,
                     align: vAlignMap[el.vAlign] || 'middle',
@@ -279,9 +281,9 @@ export default () => {
                 }
                 if (el.shadow) {
                   element.shadow = {
-                    h: el.shadow.h * ratioForPt2Px,
-                    v: el.shadow.v * ratioForPt2Px,
-                    blur: el.shadow.blur * ratioForPt2Px,
+                    h: el.shadow.h * ratio,
+                    v: el.shadow.v * ratio,
+                    blur: el.shadow.blur * ratio,
                     color: el.shadow.color,
                   }
                 }
@@ -331,7 +333,7 @@ export default () => {
                   const align = p?.style.textAlign || 'left'
 
                   const span = textDiv.querySelector('span')
-                  const fontsize = span?.style.fontSize ? (parseInt(span?.style.fontSize) * ratioForPt2Px).toFixed(1) + 'px' : ''
+                  const fontsize = span?.style.fontSize ? (parseInt(span?.style.fontSize) * ratio).toFixed(1) + 'px' : ''
                   const fontname = span?.style.fontFamily || ''
                   const color = span?.style.color || cellData.fontColor
 
@@ -455,8 +457,7 @@ export default () => {
         parseElements(item.elements)
         slides.push(slide)
       }
-      if (isEmptySlide.value) slidesStore.setSlides(slides)
-      else addSlidesFromData(slides)
+      slidesStore.setSlides(slides)
       exporting.value = false
     }
     reader.readAsArrayBuffer(file)
diff --git a/src/store/main.ts b/src/store/main.ts
index c9b17485..38f157d4 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -117,6 +117,10 @@ export const useMainStore = defineStore('main', {
       this.canvasPercentage = percentage
     },
   
+    setViewportSize(size: number) {
+      this.viewportSize = size
+    },
+  
     setCanvasScale(scale: number) {
       this.canvasScale = scale
     },
diff --git a/src/views/Editor/Canvas/hooks/useViewportSize.ts b/src/views/Editor/Canvas/hooks/useViewportSize.ts
index 2da6fd0f..ec919eea 100644
--- a/src/views/Editor/Canvas/hooks/useViewportSize.ts
+++ b/src/views/Editor/Canvas/hooks/useViewportSize.ts
@@ -63,6 +63,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
   // 可视区域缩放或比例变化时，重置/更新可视区域的位置
   watch(canvasPercentage, setViewportPosition)
   watch(viewportRatio, initViewportPosition)
+  watch(viewportSize, initViewportPosition)
 
   // 画布拖拽状态改变（复原）时，重置可视区域的位置
   watch(canvasDragged, () => {