修复图层的显示隐藏

Author: more-strive

src/components/FileUpload/index.vue

@@ -17,22 +17,20 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import { UploadFilled } from '@element-plus/icons-vue'
-import { getImageDataURL, getImageText } from '@/utils/image'
-import { ElMessage, genFileId, UploadInstance, UploadProps, UploadRawFile } from "element-plus"
 import { uploadFile } from '@/api/file'
-import { useTemplatesStore } from '@/store'
-import { loadSVGFromString } from 'fabric'
-import { ElementNames } from '@/types/elements'
-import { WorkSpaceDrawData, propertiesToInclude } from '@/configs/canvas'
-import { Image, Object as FabricObject } from 'fabric'
-import { Template } from "@/types/canvas"
-import { nanoid } from 'nanoid'
+import { propertiesToInclude, WorkSpaceDrawData } from '@/configs/canvas'
 import useCanvasScale from '@/hooks/useCanvasScale'
 import useHandleCreate from '@/hooks/useHandleCreate'
 import useHandleTemplate from '@/hooks/useHandleTemplate'
+import { useTemplatesStore } from '@/store'
+import { Template } from "@/types/canvas"
+import { getImageDataURL, getImageText } from '@/utils/image'
 import useCanvas from '@/views/Canvas/useCanvas'
+import { UploadFilled } from '@element-plus/icons-vue'
+import { genFileId, UploadInstance, UploadProps, UploadRawFile } from "element-plus"
+import { Object as FabricObject, Image, loadSVGFromString } from 'fabric'
+import { nanoid } from 'nanoid'
+import { ref, watch } from 'vue'
 
 
 const templatesStore = useTemplatesStore()
@@ -153,15 +151,15 @@ const uploadHandle = async (option: any) => {
 
 const setImageMask = (image: Image) => {
   if (!image.mask) return
-  const [ pixi ] = usePixi()
-  pixi.postMessage({
-    id: image.id,
-    type: "mask", 
-    src: image.getSrc(),
-    mask: JSON.stringify(image.mask), 
-    width: image.width, 
-    height: image.height
-  });
+  // const [ pixi ] = usePixi()
+  // pixi.postMessage({
+  //   id: image.id,
+  //   type: "mask", 
+  //   src: image.getSrc(),
+  //   mask: JSON.stringify(image.mask), 
+  //   width: image.width, 
+  //   height: image.height
+  // });
 }
 
 const handleExceed: UploadProps['onExceed'] = (files: File[]) => {

src/hooks/useHandleElement.ts

@@ -1,17 +1,16 @@
-import { Object as FabricObject, Group, Path } from 'fabric'
-import { nanoid } from "nanoid"
-import { storeToRefs } from "pinia"
-import { KEYS } from '@/configs/hotkey'
-import { ElementNames } from "@/types/elements"
 import { propertiesToInclude, WorkSpaceCommonType } from "@/configs/canvas"
+import { KEYS } from '@/configs/hotkey'
 import { useFabricStore, useMainStore, useTemplatesStore } from "@/store"
-import { TextboxElement, CanvasElement, GroupElement } from "@/types/canvas"
+import { CanvasElement, GroupElement, TextboxElement } from "@/types/canvas"
+import { ElementNames } from "@/types/elements"
 import { clipperPath } from '@/utils/clipper'
+import useCanvas from "@/views/Canvas/useCanvas"
 import { useActiveElement } from '@vueuse/core'
 import { ElMessageBox } from "element-plus"
-import useCanvas from "@/views/Canvas/useCanvas"
+import { FabricObject, Group, Path } from 'fabric'
+import { nanoid } from "nanoid"
+import { storeToRefs } from "pinia"
 import useCanvasZindex from "./useCanvasZindex"
-import { copyText } from '@/utils/clipboard'
 
 export default () => {
   const templatesStore = useTemplatesStore()
@@ -292,13 +291,13 @@ export default () => {
     canvas.renderAll()
   }
 
-  const visibleElement = (eid: string, visible: boolean) => {
+  const visibleElement = (eid: string) => {
     const [ canvas ] = useCanvas()
     const element = queryElement(eid)
     if (!element) return
     canvas.discardActiveObject()
-    canvas.renderAll()
-    templatesStore.modifedElement(element, {visible})
+    canvas.requestRenderAll()
+    templatesStore.modifedElement(element, {visible: !element.visible})
   }
 
   const showElement = (eid: string) => {
@@ -365,9 +364,9 @@ export default () => {
   const checkElement = (eid: string) => {
     const [ canvas ] = useCanvas()
     const element = queryElement(eid) as FabricObject
-    element.isSelected = true
+    // element.isSelected = true
     canvas.renderAll()
-    templatesStore.modifedElement()
+    // templatesStore.modifedElement()
     // const elements = canvas.getObjects().filter(item => !WorkSpaceCommonType.includes((item as CanvasElement).id)) as FabricObject[]
     // isChecked.value = queryTextboxChecked(elements)
   }

src/types/auto-imports.d.ts

@@ -65,6 +65,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/views/Editor/CanvasRight/LayerStylePanel/components/LayerDraggableCom.vue

@@ -9,18 +9,18 @@
       >
       <div class="element-info">
 
-        <IconPreviewOpen class="common-icon" v-if="element.visible" @click.stop="visibleElement(element.id, false)"/>
-        <IconPreviewClose class="common-icon" v-else @click.stop="visibleElement(element.id, true)"/>
+        <IconPreviewOpen class="common-icon" v-if="element.visible" @click.stop="visibleElement(element.id)"/>
+        <IconPreviewClose class="common-icon" v-else @click.stop="visibleElement(element.id)"/>
         <span class="common-span" v-if="props.index"/>
         <div v-if="element.type.toLowerCase() === ElementNames.GROUP">
           <IconDownOne v-if="(element as Group).isShow" class="common-icon text-[20px]" @click.stop="showElement(element.id)"/>
           <IconRightOne v-else class="common-icon text-[20px]" @click.stop="showElement(element.id)"/>
         </div>
         <div class="element-type">{{ element.type }}</div>
-        <i class="icon-font iconfont icon-mask" v-if="(element as Image).mask" @click.stop="maskElement(element.id)"/>
+        <i class="icon-font iconfont icon-mask" v-if="(element as FabricImage).mask" @click.stop="maskElement(element.id)"/>
         <span class="icon-span" v-else/>
-        <div class="mask-image" v-if="(element as Image).mask">
-          <img :src="(element as Image).mask?.src" alt="">
+        <div class="mask-image" v-if="(element as FabricImage).mask">
+          <img :src="(element as FabricImage).mask?.src" alt="">
         </div>
         <div class="element-text" v-if="element.type === ElementNames.TEXTBOX || element.type === ElementNames.TEXT">{{ (element as TextboxElement).text }}</div>
         <div class="element-layer">
@@ -40,13 +40,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
-import { CanvasElement, TextboxElement, ImageElement } from '@/types/canvas'
-import { ElementNames } from '@/types/elements'
+import useHandleElement from "@/hooks/useHandleElement"
 import { useMainStore, useTemplatesStore } from '@/store'
+import { TextboxElement } from '@/types/canvas'
+import { ElementNames } from '@/types/elements'
+import { FabricImage, FabricObject, Group } from 'fabric'
 import { storeToRefs } from 'pinia'
-import { Group, Object as FabricObject, Image } from 'fabric'
-import useHandleElement from "@/hooks/useHandleElement"
+import { computed, PropType } from 'vue'
 
 const { 
   selectElement,