From 1ef3a8d5fde68aebe44e0e92344782497f7b7566 Mon Sep 17 00:00:00 2001 From: Sleepy Zone Date: Mon, 4 Mar 2024 09:46:11 +0000 Subject: [PATCH] refactor: remove editorRef --- src/editor/index.tsx | 21 +----- .../components/ObjectRotateAngleTip/index.tsx | 57 +++++++++++++++ src/fabritor/components/ToolTip/index.tsx | 47 ------------ src/fabritor/index.tsx | 73 +++++++++---------- 4 files changed, 97 insertions(+), 101 deletions(-) create mode 100644 src/fabritor/components/ObjectRotateAngleTip/index.tsx delete mode 100644 src/fabritor/components/ToolTip/index.tsx diff --git a/src/editor/index.tsx b/src/editor/index.tsx index 68dc8c9..f702e00 100644 --- 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 new file mode 100644 index 0000000..f244da2 --- /dev/null +++ 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 ( +
+
+ {content} +
+
+ ) +} + +export default ObjectRotateAngleTip; diff --git a/src/fabritor/components/ToolTip/index.tsx b/src/fabritor/components/ToolTip/index.tsx deleted file mode 100644 index 4cca906..0000000 --- a/src/fabritor/components/ToolTip/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useImperativeHandle, forwardRef, useState } from 'react'; - -function ToolTip (props, ref) { - const [pos, setPos] = useState({ x: 0, y: 0 }); - const [content, setContent] = useState(''); - const [open, setOpen] = useState(false); - - useImperativeHandle(ref, () => { - return { - show (_pos, _content) { - setOpen(true); - setPos(_pos); - setContent(_content); - }, - close () { - setOpen(false); - } - } - }); - - return ( -
-
- {content} -
-
- ) -} - -export default forwardRef(ToolTip); diff --git a/src/fabritor/index.tsx b/src/fabritor/index.tsx index b1779b2..9307522 100644 --- 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,16 +31,16 @@ const contentStyle: React.CSSProperties = { export default function Fabritor () { const canvasEl = useRef(null); const workspaceEl = useRef(null); - const editorRef = useRef(null); const [editor, setEditor] = useState(null); const [activeObject, setActiveObject] = useState(null); const [isReady, setReady] = useState(false); const [fxType, setFxType] = useState(''); const contextMenuRef = useRef(null); - const rotateAngleTipRef = useRef(null); const clickHandler = (opt) => { const { target } = opt; + if (editor.getIfPanEnable()) return; + if (!target) { contextMenuRef.current?.hide(); return; @@ -48,7 +48,7 @@ export default function Fabritor () { 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 () { > - +