refactor: remove editorRef

crazysnowboy · Mar 4, 2024 · 1ef3a8d · 1ef3a8d
1 parent ff47437
commit 1ef3a8d
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 101 deletions.
diff --git a/src/editor/index.tsx b/src/editor/index.tsx
@@ -150,11 +150,7 @@ export default class Editor {
   }
 
   private _initEvents () {
-    const { sketchEventHandler } = this._options;
     this.canvas.on('mouse:down', (opt) => {
-      if (!this._pan.enable) {
-        sketchEventHandler?.clickHandler?.(opt);
-      }
       const evt = opt.e;
       if (this._pan.enable) {
         this._pan = {
@@ -201,7 +197,6 @@ export default class Editor {
       this.canvas.requestRenderAll();
     });
     this.canvas.on('mouse:up', (opt) => {
-      sketchEventHandler?.mouseupHandler?.(opt);
       // on mouse up we want to recalculate new interaction
       // for all objects, so we call setViewportTransform
       if (this._pan.enable) {
@@ -212,17 +207,6 @@ export default class Editor {
     });
     this.canvas.on('mouse:wheel', this._scrollSketch.bind(this));
 
-    this.canvas.on('object:rotating', sketchEventHandler?.rotateHandler);
-
-    this.canvas.on('selection:created', (opt) => { sketchEventHandler?.selectionHandler(opt); });
-    this.canvas.on('selection:updated', (opt) => { sketchEventHandler?.selectionHandler(opt); });
-    this.canvas.on('selection:cleared', (opt) => { sketchEventHandler?.selectionHandler(opt); });
-
-    this.canvas.on('fabritor:clone', sketchEventHandler?.cloneHandler);
-    this.canvas.on('fabritor:del', sketchEventHandler?.delHandler);
-    this.canvas.on('fabritor:group', sketchEventHandler?.groupHandler);
-    this.canvas.on('fabritor:ungroup', sketchEventHandler?.groupHandler);
-
     this.canvas.on('mouse:dblclick', (opt) => {
       const { target, subTargets } = opt;
       const subTarget = subTargets?.[0];
@@ -234,7 +218,6 @@ export default class Editor {
           this.canvas.discardActiveObject();
           this.canvas.setActiveObject(subTarget);
           this.canvas.requestRenderAll();
-          sketchEventHandler?.dblObjectHandler?.(subTarget, opt);
         }
       }
     });
@@ -309,6 +292,10 @@ export default class Editor {
     return this._pan.enable;
   }
 
+  public getIfPanEnable () {
+    return this._pan.enable;
+  }
+
   public fireCustomModifiedEvent (data: any = null) {
     this.canvas.fire('fabritor:object:modified', data);
   }

diff --git a/src/fabritor/components/ObjectRotateAngleTip/index.tsx b/src/fabritor/components/ObjectRotateAngleTip/index.tsx
@@ -0,0 +1,57 @@
+import { GloablStateContext } from '@/context';
+import { useState, useContext, useEffect } from 'react';
+
+function ObjectRotateAngleTip () {
+  const [pos, setPos] = useState({ left: 0, top: 0 });
+  const [content, setContent] = useState('');
+  const [open, setOpen] = useState(false);
+  const { editor } = useContext(GloablStateContext);
+
+  const rotateHandler = (opt) => {
+    const { target, e } = opt;
+    setPos({
+      left: e.pageX + 16,
+      top: e.pageY
+    });
+    setContent(`${Math.round(target.angle)}°`);
+    setOpen(true);
+  }
+
+  const mouseupHandler = () => {
+    setOpen(false);
+  }
+
+  useEffect(() => {
+    if (editor) {
+      editor.canvas.on('object:rotating', rotateHandler);
+      editor.canvas.on('mouse:up', mouseupHandler);
+    }
+  }, [editor]);
+
+  return (
+    <div
+      style={{
+        fontSize: 12,
+        position: 'fixed',
+        zIndex: 9999,
+        width: 'max-content',
+        display: open ? 'block' : 'none',
+        ...pos
+      }}
+    >
+      <div
+        style={{
+          padding: '6px 6px',
+          color: '#fff',
+          backgroundColor: 'rgba(0, 0, 0, 0.85)',
+          borderRadius: 6
+        }}
+        role="tooltip"
+      >
+        {content}
+      </div>
+    </div>
+  )
+}
+
+export default ObjectRotateAngleTip;
diff --git a/src/fabritor/components/ToolTip/index.tsx b/src/fabritor/components/ToolTip/index.tsx
diff --git a/src/fabritor/index.tsx b/src/fabritor/index.tsx
@@ -7,7 +7,7 @@ import Editor from '@/editor';
 import { GloablStateContext } from '@/context';
 import ContextMenu from './components/ContextMenu';
 import { SKETCH_ID } from '@/utils/constants';
-import ToolTip from './components/ToolTip';
+import ObjectRotateAngleTip from './components/ObjectRotateAngleTip';
 import Export from './UI/header/Export';
 
 import '../font.css';
@@ -31,24 +31,24 @@ const contentStyle: React.CSSProperties = {
 export default function Fabritor () {
   const canvasEl = useRef<HTMLCanvasElement>(null);
   const workspaceEl = useRef<HTMLDivElement>(null);
-  const editorRef = useRef<Editor | null>(null);
   const [editor, setEditor] = useState<Editor | null>(null);
   const [activeObject, setActiveObject] = useState<fabric.Object | null | undefined>(null);
   const [isReady, setReady] = useState(false);
   const [fxType, setFxType] = useState('');
   const contextMenuRef = useRef<any>(null);
-  const rotateAngleTipRef = useRef<any>(null);
 
   const clickHandler = (opt) => {
     const { target } = opt;
+    if (editor.getIfPanEnable()) return;
+
     if (!target) {
       contextMenuRef.current?.hide();
       return;
     }
 
     if (opt.button === 3) { // 右键
       if (target.id !== SKETCH_ID) {
-        editorRef.current.canvas.setActiveObject(target);
+        editor.canvas.setActiveObject(target);
       }
       setTimeout(() => {
         contextMenuRef.current?.show();
@@ -59,53 +59,52 @@ export default function Fabritor () {
   }
 
   const selectionHandler = (opt) => {
-    const { selected } = opt;
+    const { selected, sketch } = opt;
     if (selected && selected.length) {
-      const selection = editorRef.current.canvas.getActiveObject();
+      const selection = editor.canvas.getActiveObject();
       setActiveObject(selection);
     } else {
       // @ts-ignore
-      setActiveObject(editorRef.current.sketch);
+      setActiveObject(sketch);
     }
   }
+
+  const initEvent = () => {
+    editor.canvas.on('selection:created', selectionHandler);
+    editor.canvas.on('selection:updated', selectionHandler);
+    editor.canvas.on('selection:cleared', selectionHandler);
 
-  const rotateHandler = (opt) => {
-    const { target, e } = opt;
-    rotateAngleTipRef.current.show({
-      left: e.pageX + 16,
-      top: e.pageY
-    }, `${Math.round(target.angle)}°`);
+    editor.canvas.on('mouse:down', clickHandler);
   }
 
-  const mouseupHandler = () => {
-    rotateAngleTipRef.current.close();
+  const initEditor = async () => {
+    const _editor = new Editor({
+      canvasEl: canvasEl.current,
+      workspaceEl: workspaceEl.current,
+      sketchEventHandler: {
+        groupHandler: () => { setActiveObject(_editor.canvas.getActiveObject()) }
+      }
+    });
+
+    await _editor.init();
+
+    setEditor(_editor);
+    setReady(true);
+    setActiveObject(_editor.sketch);
   }
 
   useEffect(() => {
-    setTimeout(async () => {
-      const _editor = new Editor({
-        canvasEl: canvasEl.current,
-        workspaceEl: workspaceEl.current,
-        sketchEventHandler: {
-          clickHandler,
-          mouseupHandler,
-          selectionHandler,
-          rotateHandler,
-          groupHandler: () => { setActiveObject(_editor.canvas.getActiveObject()) }
-        }
-      });
-
-      await _editor.init();
-      editorRef.current = _editor;
-      setEditor(_editor);
-      setReady(true);
-      setActiveObject(_editor.sketch);
-    }, 300);
+    if (editor) {
+      initEvent();
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    initEditor();
 
     return () => {
       if (editor) {
-        editorRef.current.destroy();
-        editorRef.current = null;
+        editor.destroy();
       }
     }
   }, []);
@@ -124,7 +123,7 @@ export default function Fabritor () {
     >
       <Layout style={{ height: '100%' }} className="fabritor-layout">
         <Spin spinning={!isReady} fullscreen />
-        <ToolTip ref={rotateAngleTipRef} />
+        <ObjectRotateAngleTip />
         <Export />
         <Layout>
           <Panel />