@logicflow/core 2.0.0 → 2.0.1

package/src/view/Graph.tsx

@@ -38,12 +38,13 @@ type ContainerStyle = {
 
 @observer
 class Graph extends Component<IGraphProps> {
-  handleResize = () => {
+  private handleResize = () => {
     this.props.graphModel.resize()
   }
+  private throttleResize = () => throttle(this.handleResize, 200)
 
   componentDidMount() {
-    window.addEventListener('resize', throttle(this.handleResize, 200))
+    window.addEventListener('resize', this.throttleResize)
   }
 
   componentDidUpdate() {
@@ -52,7 +53,7 @@ class Graph extends Component<IGraphProps> {
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', throttle(this.handleResize, 200))
+    window.removeEventListener('resize', this.throttleResize)
   }
 
   getComponent(
@@ -91,6 +92,7 @@ class Graph extends Component<IGraphProps> {
     const { adjustEdge } = editConfigModel
     return (
       <div className="lf-graph" flow-id={graphModel.flowId}>
+        {/* 元素层 */}
         <CanvasOverlay graphModel={graphModel} dnd={dnd}>
           <g className="lf-base">
             {map(graphModel.sortElements, (nodeModel) =>
@@ -99,6 +101,7 @@ class Graph extends Component<IGraphProps> {
           </g>
           {fakeNode ? this.getComponent(fakeNode, graphModel) : ''}
         </CanvasOverlay>
+        {/* 虚线边框 */}
         <ModificationOverlay graphModel={graphModel}>
           <OutlineOverlay graphModel={graphModel} />
           {adjustEdge ? <BezierAdjustOverlay graphModel={graphModel} /> : ''}
@@ -108,10 +111,12 @@ class Graph extends Component<IGraphProps> {
             ''
           )}
         </ModificationOverlay>
+        {/* 工具层：插件 */}
         <ToolOverlay graphModel={graphModel} tool={tool} />
         {options.background && (
           <BackgroundOverlay background={options.background} />
         )}
+        {/* 画布网格 */}
         {grid && <Grid {...grid} graphModel={graphModel} />}
       </div>
     )