杂

src/configs/texts.ts

@@ -1,8 +1,8 @@
 export const FontSizeLibs = [
-  9, 10, 11,
-  12, 14, 16, 18, 20, 22, 24, 28, 32,
-  36, 40, 44, 48, 54, 60, 66, 72, 76,
-  80, 88, 96, 104, 112, 120,
+  '9', '10', '11',
+  '12', '14', '16', '18', '20', '22', '24', '28', '32',
+  '36', '40', '44', '48', '54', '60', '66', '72', '76',
+  '80', '88', '96', '104', '112', '120',
 ]
 // 行高
 export const LineHeightLibs = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]

src/views/Editor/CanvasCenter/index.vue

@@ -11,20 +11,28 @@
 
 <script lang="ts" setup>
 import {storeToRefs} from 'pinia'
-import {onMounted, onUnmounted} from 'vue'
+import {computed, onMounted, onUnmounted, ref} from 'vue'
 import {useFabricStore, useMainStore, useTemplatesStore, useUserStore} from '@/store'
 import {useRouter} from 'vue-router'
 import {unzip} from "@/utils/crypto"
 import {getDesignTemplateEdit, getPreViewTemplate, getTemplateData, newDesignOrder, tmpSaveUserDesign, updateDesignTemplate} from '@/api/template'
 import {contextMenus} from '@/configs/contextMenu'
-import {initEditor} from '@/views/Canvas/useCanvas'
+import useCanvas, {initEditor} from '@/views/Canvas/useCanvas'
 import {initPixi} from '@/views/Canvas/usePixi'
 import {ElMessage, ElLoading} from 'element-plus'
 import useCanvasHotkey from '@/hooks/useCanvasHotkey'
 import useCanvasExport from "@/hooks/useCanvasExport";
+import {WorkSpaceElement} from "@/types/canvas";
+import {propertiesToInclude, WorkSpaceDrawType} from "@/configs/canvas";
+import {Pattern} from "fabric";
+import {MaxSize, MinSize, TransparentFill} from "@/configs/background";
+import {mm2px, px2mm} from "@/utils/image";
+
 
 const fabricStore = useFabricStore()
 const mainStore = useMainStore()
+const {sizeMode, unitMode} = storeToRefs(mainStore);
+const {clip, safe, zoom, opacity} = storeToRefs(fabricStore);
 const router = useRouter()
 const templatesStore = useTemplatesStore()
 const userStore = useUserStore()
@@ -192,7 +200,20 @@ onMounted(async () => {
       const message = JSON.parse(event.data);
 
       if (message.msgType == "loadTemplate") {
-        getPreviewTemplateDetail(query.template, message.data, uuid.value)
+        // getPreviewTemplateDetail(query.template, message.data, outerSessionId)
+        // 这个地方有未知原因,重新加载模板后会让canvas渲染停止,用别的方法该参数吧
+
+        // const formData = ref({
+        //   backgroundWidth: 2000.0,
+        //   backgroundHeight: 400.0,
+        //   backgroundColor: "rgba(255,0,0,1)",
+        //   objects: "",
+        // });
+        const color = message.data.backgroundColor
+        const width = mm2px(message.data.backgroundWidth) * zoom.value
+        const height = mm2px(message.data.backgroundHeight) * zoom.value
+        updateBackground({color: color, fill: color})
+        changeTemplateSize(width, height)
       } else if (message.msgType == "submitOrder") {
         //提交当前设计
         // const svgData: string[] = []
@@ -232,6 +253,111 @@ onUnmounted(() => {
   window.removeEventListener('paste', pasteListener as any)
 })
 
+//以下是loadTemplate需要的东西,当前已放弃后台渲染,直接纯前端操作了
+const {currentTemplate} = storeToRefs(templatesStore);
+const background = computed(() => {
+  if (!currentTemplate.value) {
+    return {
+      fillType: 0,
+      fill: TransparentFill,
+      backgroundColor: "#fff",
+    } as WorkSpaceElement;
+  }
+  if (!currentTemplate.value.workSpace) {
+    return {
+      fillType: 0,
+      fill: TransparentFill,
+      backgroundColor: "#fff",
+    } as WorkSpaceElement;
+  }
+  return currentTemplate.value.workSpace;
+});
+// 设置背景
+const updateBackground = (props: Partial<WorkSpaceElement>) => {
+  const [canvas] = useCanvas();
+  const workSpaceDraw = canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
+  if (!workSpaceDraw) return;
+  workSpaceDraw.set({...props});
+  if (props.fill instanceof Pattern) {
+    props.fill = props.fill.toObject() as Pattern
+  }
+  templatesStore.updateWorkSpace({workSpace: {...background.value, ...props}});
+  const workProps = workSpaceDraw.toObject(propertiesToInclude as any[]);
+  templatesStore.updateElement({id: workSpaceDraw.id, props: {...workProps, ...props}});
+  canvas.renderAll();
+};
+
+const templateWidth = computed(() => {
+  const workWidth = currentTemplate.value.width / currentTemplate.value.zoom;
+  return unitMode.value === 0 ? px2mm(workWidth) : workWidth;
+});
+const templateHeight = computed(() => {
+  const workHeight = currentTemplate.value.height / currentTemplate.value.zoom;
+  return unitMode.value === 0 ? px2mm(workHeight) : workHeight;
+});
+const canvasWidth = ref<number>(templateWidth.value);
+const canvasHeight = ref<number>(templateHeight.value);
+// 固定宽高
+const isFixed = ref(false);
+// 获取画布尺寸
+const getCanvasSize = () => {
+  let width =
+      unitMode.value === 0 ? mm2px(canvasWidth.value) : canvasWidth.value;
+  let height =
+      unitMode.value === 0 ? mm2px(canvasHeight.value) : canvasHeight.value;
+  width = width * zoom.value;
+  height = height * zoom.value;
+  return {width, height};
+};
+
+// 修改画布宽度
+const changeTemplateSize = (width, height) => {
+  const [canvas] = useCanvas();
+  const workSpaceDraw = canvas
+      .getObjects()
+      .filter((item) => item.id === WorkSpaceDrawType)[0];
+  if (!workSpaceDraw) return;
+  const ratio = currentTemplate.value.height / currentTemplate.value.width;
+  // let {width, height} = getCanvasSize();
+  if (width / zoom.value < mm2px(MinSize)) {
+    ElMessage({
+      message: t("style.minimumSizeLimit") + MinSize,
+      type: "warning",
+    });
+    width = mm2px(MinSize) * zoom.value;
+  }
+  if (width / zoom.value > mm2px(MaxSize)) {
+    ElMessage({
+      message: t("style.maximumSizeLimit") + MaxSize,
+      type: "warning",
+    });
+    width = mm2px(MaxSize) * zoom.value;
+  }
+  if (height / zoom.value < mm2px(MinSize)) {
+    ElMessage({
+      message: t("style.minimumSizeLimit") + MinSize,
+      type: "warning",
+    });
+    height = mm2px(MinSize) * zoom.value;
+  }
+  if (height / zoom.value > mm2px(MaxSize)) {
+    ElMessage({
+      message: t("style.maximumSizeLimit") + MaxSize,
+      type: "warning",
+    });
+    height = mm2px(MaxSize) * zoom.value;
+  }
+  // width = isFixed.value ? height / ratio : width;
+  // height = isFixed.value ? width * ratio : height;
+  workSpaceDraw.set({width: width / zoom.value, height: height / zoom.value});
+  templatesStore.setSize(width, height, zoom.value);
+  sizeMode.value = 2;
+  canvas.renderAll();
+  // resetCanvas()
+  // addHistorySnapshot();
+};
+
+
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/computer.vue

@@ -13,13 +13,13 @@
       <div :class="runMode == 1 ? 'layout-content-center-design': 'layout-content-center-show'">
         <CanvasHeader v-show="runMode == 1"
                       class="center-header relative flex justify-between py-[10px] text-[14px] select-none h-[39px]"/>
-        <CanvasCenter class="center-body"/>
+        <CanvasCenter ref="center" class="center-body"/>
         <!-- <CanvasFooter class="center-footer h-[40px] relative leading-1.5 flex justify-between" /> -->
         <CanvasAffix v-show="runMode == 1" class="center-affix"/>
         <!--        <CanvasICP />-->
       </div>
       <CanvasRight v-show="runMode == 1" class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
-      <FrontEditorPool v-if="loadFrontEditorPool" class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
+      <FrontEditorPool ref="frontEditor" v-if="loadFrontEditorPool" class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
       <CanvasDom v-show="runMode == 1" class="absolute -z-[200] -left-[300px]"/>
     </div>
     <!--    <CanvasTour v-show="runMode == 1"/>-->
@@ -56,6 +56,14 @@ const {getSVGDataEx, getSVGData} = useCanvasExport()
 
 const loadFrontEditorPool = ref(false)
 
+const center = ref()
+const frontEditor = ref()
+
+const handleBeforeUnload = (event) => {
+  // 不执行任何阻止关闭的操作
+  // 不调用 event.preventDefault() 或不设置 returnValue
+};
+
 onMounted(() => {
   const query = router.currentRoute.value.query
   if (query.runMode) {
@@ -128,12 +136,32 @@ onMounted(() => {
      */
     //延迟加载
     setTimeout(() => {
-      loadFrontEditorPool.value = true;
-    }, 250)
-
+      checkLoaded()
+    }, 200)
   }
   mainStore.getFonts();
+
+  window.addEventListener('beforeunload', handleBeforeUnload);
+})
+
+onUnmounted(() => {
+  window.removeEventListener('beforeunload', handleBeforeUnload);
 })
+
+const checkLoaded = () => {
+  if (center.value) {
+    loadFrontEditorPool.value = true;
+  }
+
+  if (center.value && frontEditor.value) {
+    //给父页面发送onLoaded消息,表示已经加载完毕了
+    const closeMsg = {
+      msgType: 'onLoaded'
+    }
+    window.parent.postMessage(JSON.stringify(closeMsg), '*');
+  } else
+    setTimeout(checkLoaded, 200)
+}
 </script>
 
 <style lang="scss" scoped>