更新创建元素事件

more-strive · Jun 19, 2024 · ed2545d · ed2545d
1 parent 45b28d0
commit ed2545d
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 36 deletions.
diff --git a/src/hooks/useHandleCreate.ts b/src/hooks/useHandleCreate.ts
@@ -33,15 +33,15 @@ export default () => {
   const { rightState, systemFonts } = storeToRefs(mainStore);
 
   const renderCanvas = (element: any) => {
-    const [canvas] = useCanvas();
+    const [ canvas ] = useCanvas();
 	  // canvas.viewportCenterObject(element); 
     // canvas.add(element);
     // canvas.setActiveObject(element);
     // rightState.value = RightStates.ELEMENT_STYLE;
     // setZindex(canvas);
     // canvas.renderAll();
     canvas.tree.findOne(`#${CanvasTypes.WorkSpaceDrawType}`).add(element)
-    // templatesStore.modifedElement();
+    templatesStore.modifedElement();
   };
 
   const createTextElement = (fontSize: number, textStyle = "transverse", textHollow = false, textValue = t("default.textValue")) => {

diff --git a/src/logic/Canvas/useCanvas.ts b/src/logic/Canvas/useCanvas.ts
@@ -1,13 +1,9 @@
 
 import { watch } from 'vue'
 import { storeToRefs } from 'pinia'
-import { Leafer, App, Rect, Frame, Text, defineKey, UI } from 'leafer-ui'
+import { Leafer, App, Rect, Frame, Text, ChildEvent, UI, PropertyEvent } from 'leafer-ui'
 import { useElementBounding } from '@vueuse/core'
-import { isMobile } from '@/utils/common'
-import { FabricCanvas } from '@/app/fabricCanvas'
 import { useTemplatesStore, useLeaferStore } from '@/store'
-import useCommon from './useCommon'
-import useHammer from './useHammer'
 import { Editor } from '@leafer-in/editor'
 import { CanvasTypes } from '@/enums'
 import '@leafer-in/view'
@@ -57,7 +53,7 @@ const initCanvas = () => {
 }
 
 // 初始化模板
-const initTemplate = async () => {
+const initTemplate = () => {
   if (!app) return
   const templatesStore = useTemplatesStore()
   const { currentTemplate } = storeToRefs(templatesStore)
@@ -66,13 +62,29 @@ const initTemplate = async () => {
   setCanvasTransform()
 }
 
-export const initEditor = async () => {
+const initEvent = () => {
+  if (!app) return
+  const templatesStore = useTemplatesStore()
+  const workspace = app.tree.findOne(`#${CanvasTypes.WorkSpaceDrawType}`)
+  if (!workspace) return
+  workspace.on(ChildEvent.ADD, function (e: ChildEvent) { 
+    console.log('add:', e) // changed list
+    templatesStore.modifedElement()
+  })
+  workspace.on(PropertyEvent.CHANGE, (e: PropertyEvent) => { 
+    console.log('change:', e) // changed list
+    templatesStore.modifedElement()
+  })
+}
+
+export const initEditor = () => {
   const leaferStore = useLeaferStore()
   const { wrapperRef } = storeToRefs(leaferStore)
 
   initCanvas()
   initConf()
   initTemplate()
+  initEvent()
   const { width, height } = useElementBounding(wrapperRef.value)
   watch([width, height], () => {
     setCanvasTransform()

diff --git a/src/store/modules/template.ts b/src/store/modules/template.ts
@@ -6,6 +6,8 @@ import { WorkSpaceDrawType, propertiesToInclude } from '@/configs/canvas'
 import { useMainStore } from './main'
 import { ElementNames } from '@/types/elements'
 import { ElLoading } from 'element-plus'
+import { CanvasTypes } from '@/enums'
+import { UI } from 'leafer-ui'
 import useCanvasScale from '@/hooks/useCanvasScale'
 import useCanvas from '@/logic/Canvas/useCanvas'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -43,12 +45,12 @@ export const useTemplatesStore = defineStore('Templates', {
 
     currentTemplateWidth(state) {
       const currentTemplate = state.templates[state.templateIndex]
-      return currentTemplate.width / currentTemplate.zoom
+      return currentTemplate.width
     },
 
     currentTemplateHeight(state) {
       const currentTemplate = state.templates[state.templateIndex]
-      return currentTemplate.height / currentTemplate.zoom
+      return currentTemplate.height
     },
 
     currentTemplateElement(state) {
@@ -62,33 +64,21 @@ export const useTemplatesStore = defineStore('Templates', {
   actions: {
     async renderTemplate() {
       const [ canvas ] = useCanvas()
-      const { initCommon } = useCommon()
-      const { setCanvasSize } = useCanvasScale()
-      await canvas.loadFromJSON(this.currentTemplate)
-      this.setObjectFilter(this.currentTemplate.objects as CanvasElement[])
-      setCanvasSize()
-      initCommon()
+      const frame = UI.one(this.currentTemplate)
+      canvas.tree.add(frame)
     },
 
     async renderElement() {
       const [ canvas ] = useCanvas()
-      const { initCommon } = useCommon()
-      const { setCanvasSize } = useCanvasScale()
-      const mainStore = useMainStore()
-      canvas.discardActiveObject()
-      mainStore.setCanvasObject(undefined)
-      await canvas.loadFromJSON(this.currentTemplate)
-      setCanvasSize()
-      initCommon()
+      const frame = UI.one(this.currentTemplate)
+      canvas.tree.add(frame)
     },
 
     modifedElement() {
       const [ canvas ] = useCanvas()
       const { addHistorySnapshot } = useHistorySnapshot()
-      const canvasTemplate = canvas.toObject(propertiesToInclude)
-      this.templates[this.templateIndex].objects = canvasTemplate.objects
-      this.templates[this.templateIndex].background = canvasTemplate.background
-      this.templates[this.templateIndex].backgroundImage = canvasTemplate.backgroundImage
+      const result = canvas.tree.findOne(`#${CanvasTypes.WorkSpaceDrawType}`).toJSON() as Template
+      this.templates[this.templateIndex] = result
       addHistorySnapshot()
     },
 

diff --git a/src/types/canvas.ts b/src/types/canvas.ts
@@ -29,16 +29,14 @@ export interface GradientElement extends Gradient<'linear' | 'radial'> {
 
 
 export interface Template {
+  tag: string
+  fill: string
   id: string
-  version: string
-  workSpace: WorkSpaceElement
-  background?: string
-  backgroundImage?: SerializedImageProps
-  zoom: number
+  x: number
+  y: number
   width: number
   height: number
-  clip: number,
-  objects: SerializedObjectProps[]
+  children: any[]
 }
 
 export interface WorkSpaceElement {