@logicflow/core 2.0.11 → 2.0.12

package/src/view/Graph.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentType } from 'preact/compat'
+import { Component, ComponentType, createRef } from 'preact/compat'
 import { map, throttle } from 'lodash-es'
 import {
   CanvasOverlay,
@@ -38,6 +38,10 @@ type ContainerStyle = {
 
 @observer
 class Graph extends Component<IGraphProps> {
+  canvasOverlayRef = createRef<CanvasOverlay>()
+  getCanvasOverlay = () => {
+    return this.canvasOverlayRef.current
+  }
   private handleResize = () => {
     const { graphModel, options } = this.props
     const { width, height, isContainerWidth, isContainerHeight } = graphModel
@@ -109,7 +113,11 @@ class Graph extends Component<IGraphProps> {
     return (
       <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
         {/* 元素层 */}
-        <CanvasOverlay graphModel={graphModel} dnd={dnd}>
+        <CanvasOverlay
+          ref={this.canvasOverlayRef}
+          graphModel={graphModel}
+          dnd={dnd}
+        >
           <g className="lf-base">
             {map(graphModel.sortElements, (nodeModel) =>
               this.getComponent(nodeModel, graphModel),
@@ -128,7 +136,11 @@ class Graph extends Component<IGraphProps> {
           )}
         </ModificationOverlay>
         {/* 工具层：插件 */}
-        <ToolOverlay graphModel={graphModel} tool={tool} />
+        <ToolOverlay
+          graphModel={graphModel}
+          tool={tool}
+          getCanvasOverlay={this.getCanvasOverlay}
+        />
         {/* 画布背景 */}
         {background && <BackgroundOverlay background={background} />}
         {/* 画布网格 */}

package/src/view/overlay/ToolOverlay.tsx

@@ -1,5 +1,5 @@
 import { createElement as h, Component } from 'preact/compat'
-import { OutlineOverlay } from '.'
+import { CanvasOverlay, OutlineOverlay } from '.'
 import { observer } from '../..'
 import LogicFlow from '../../LogicFlow'
 import { GraphModel } from '../../model'
@@ -8,6 +8,7 @@ import { Tool } from '../../tool'
 type IProps = {
   graphModel: GraphModel
   tool: Tool
+  getCanvasOverlay: () => CanvasOverlay | null
 }
 
 @observer
@@ -52,10 +53,24 @@ export class ToolOverlay extends Component<IProps> {
     lf.components = [] // 保证extension组件的render只执行一次
   }
 
+  zoomHandler = (e: WheelEvent) => {
+    // TODO 是否应该使用 dispatchEvent 来触发事件
+    this.props.getCanvasOverlay()?.zoomHandler(e)
+  }
+
   render() {
     const { graphModel } = this.props
     return (
-      <div className="lf-tool-overlay" id={`ToolOverlay_${graphModel.flowId}`}>
+      <div
+        className="lf-tool-overlay"
+        id={`ToolOverlay_${graphModel.flowId}`}
+        /*
+         * 默认情况下该容器设置了 pointer-events: none，不会触发这些事件
+         * 只会在容器取消 pointer-events: none 后触发，用于缩放、滚动画布等操作
+         * 目前只在 selection-select 插件中使用。为了能在元素内部进行框选，在开启选区后会关闭事件透传。需要手动触发事件
+         */
+        onWheel={this.zoomHandler}
+      >
         {this.getTools()}
       </div>
     )