更新上传pdf加载样式

src/components/FileUpload/index.vue

@@ -20,14 +20,12 @@
 import { computed, ref, watch } from 'vue'
 import { UploadFilled } from '@element-plus/icons-vue'
 import { ElMessage, genFileId, UploadInstance, UploadProps, UploadRawFile } from "element-plus"
-import { storeToRefs } from 'pinia'
-import { loadSVGFromString } from 'fabric'
 import { uploadFile } from '@/api/file'
 import { useTemplatesStore } from '@/store'
-import useCanvas from '@/views/Canvas/useCanvas'
+import useCanvasScale from '@/hooks/useCanvasScale'
 
 const templatesStore = useTemplatesStore()
-
+const { setCanvasTransform } = useCanvasScale()
 const dialogVisible = ref(false)
 const fileAccept = ref('.pdf,.psd,.cdr,.svg,.jpg,.jpeg,.png')
 const uploadRef = ref<UploadInstance>()
@@ -58,7 +56,8 @@ const uploadHandle = async (option: any) => {
   if (res && res.data.code === 200) {
     const template = res.data.data
     if (!template) return
-    templatesStore.addTemplate(template)
+    await templatesStore.addTemplate(template)
+    setCanvasTransform()
     emit('close')
   }
 }

src/types/elements.ts

@@ -3,6 +3,7 @@ import { ImageHit } from "@/api/image/types"
 export const enum ElementNames {
   TEXTBOX = 'textbox',
   TEXT = 'text',
+  ITEXT = 'i-text',
   IMAGE = 'image',
   CROPIMAGE = 'cropimage',
   MASK = 'mask',

src/views/Editor/CanvasRight/ElementStylePanel/ImageStylePanel.vue

@@ -79,6 +79,7 @@ import { ImageElement } from '@/types/canvas'
 import { ratioClipOptions } from '@/configs/images'
 import { getImageDataURL } from '@/utils/image'
 import { propertiesToInclude } from '@/configs/canvas'
+import { Image } from 'fabric'
 import ElementPosition from '../Components/ElementPosition.vue'
 import ElementOutline from '../Components/ElementOutline.vue'
 import ElementShadow from '../Components/ElementShadow.vue'
@@ -91,7 +92,7 @@ const mainStore = useMainStore()
 const templatesStore = useTemplatesStore()
 const [ canvas ] = useCanvas()
 const { canvasObject } = storeToRefs(mainStore)
-const handleElement = computed(() => canvasObject.value as ImageElement)
+const handleElement = computed(() => canvasObject.value as Image)
 
 
 // 打开自由裁剪
@@ -147,7 +148,6 @@ const replaceImage = (files: FileList) => {
   getImageDataURL(imageFile).then(dataURL => {
     const props = { src: dataURL }
     handleElement.value.setSrc(dataURL)
-    // @ts-ignore
     templatesStore.updateElement({ id: handleElement.value.id, props })
   })
   

src/views/Editor/CanvasRight/ElementStylePanel/index.vue

@@ -22,6 +22,7 @@ import GroupStylePanel from './GroupStylePanel.vue'
 const panelMap = {
   [ElementNames.TEXTBOX]: TextboxStylePanel,
   [ElementNames.TEXT]: TextboxStylePanel,
+  [ElementNames.ITEXT]: TextboxStylePanel,
   [ElementNames.IMAGE]: ImageStylePanel,
   [ElementNames.CROPIMAGE]: ImageStylePanel,
   [ElementNames.PATH]: PathStylePanel,
@@ -39,6 +40,7 @@ const { canvasObject } = storeToRefs(useMainStore())
 
 const currentPanelComponent = computed(() => {
   if (!canvasObject.value) return null
+  console.log('canvasObject:', canvasObject.value.name)
   const canvasType = canvasObject.value.name ? canvasObject.value.name : canvasObject.value.type
   return panelMap[canvasType.toLowerCase() as ElementNames.TEXT]
 })

src/views/Editor/CanvasThumb/ThumbnailTemplate.vue

@@ -14,9 +14,10 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, PropType, ref, watch } from 'vue'
-import { StaticCanvas } from 'fabric'
+import { StaticCanvas, Group } from 'fabric'
 import { Template, CanvasElement } from '@/types/canvas'
 import { WorkSpaceThumbType, WorkSpaceDrawType } from '@/configs/canvas'
+import { el } from 'element-plus/es/locale';
 
 const props = defineProps({
   template: {
@@ -66,11 +67,20 @@ const setThumbnailElement = async () => {
   })
   thumbCanvas.value.setZoom(thumbZoom)
   const thumbViewportTransform = thumbCanvas.value.viewportTransform
+  const objects = thumbCanvas.value.getObjects().filter(ele => !WorkSpaceThumbType.includes(ele.id))
+  const boundingBox = Group.prototype.getObjectsBoundingBox(objects)
+  let left = 0, top = 0
   if (thumbWorkSpaceDraw) {
-    thumbViewportTransform[4] = -thumbWorkSpaceDraw.left * thumbZoom
-    thumbViewportTransform[5] = -thumbWorkSpaceDraw.top * thumbZoom
-    thumbCanvas.value.setViewportTransform(thumbViewportTransform)
+    left = thumbWorkSpaceDraw.left
+    top = thumbWorkSpaceDraw.top
   }
+  else if (boundingBox) {
+    left = boundingBox.centerX - boundingBox.width / 2
+    top = boundingBox.centerY - boundingBox.height / 2
+  }
+  thumbViewportTransform[4] = -left * thumbZoom
+  thumbViewportTransform[5] = -top * thumbZoom
+  thumbCanvas.value.setViewportTransform(thumbViewportTransform)
   thumbCanvas.value.renderAll()
 }
 </script>