@logicflow/core 2.0.0-beta.0 → 2.0.0-beta.10

package/src/view/edge/AdjustPoint.tsx

@@ -4,7 +4,7 @@ import { GraphModel, BaseNodeModel, BaseEdgeModel, Model } from '../../model'
 import {
   IDragParams,
   StepDrag,
-  formateAnchorConnectValidateData,
+  formatAnchorConnectValidateData,
   targetNodeInfo,
   NodeContaint,
 } from '../../util'
@@ -125,54 +125,40 @@ export class AdjustPoint extends Component<IProps, IState> {
     )
     // 如果一定的坐标能够找到目标节点，预结算当前节点与目标节点的路径进行展示
     if (info && info.node && this.isAllowAdjust(info).pass) {
-      let params: {
-        startPoint: Point
-        endPoint: Point
-        sourceNode: BaseNodeModel
-        targetNode: BaseNodeModel
-      }
       const { startPoint, endPoint, sourceNode, targetNode } = edgeModel
-      if (type === AdjustType.SOURCE) {
-        params = {
-          startPoint: {
-            x: info.anchor.x,
-            y: info.anchor.y,
-          },
-          endPoint: {
-            x: endPoint.x,
-            y: endPoint.y,
-          },
-          sourceNode: info.node,
-          targetNode,
-        }
-      } else if (type === AdjustType.TARGET) {
-        params = {
-          startPoint: {
-            x: startPoint.x,
-            y: startPoint.y,
-          },
-          endPoint: {
-            x: info.anchor.x,
-            y: info.anchor.y,
-          },
-          sourceNode,
-          targetNode: info.node,
-        }
-      }
-      edgeModel.updateAfterAdjustStartAndEnd(params!)
-    } else if (type === AdjustType.SOURCE) {
-      // 如果没有找到目标节点，更显起终点为当前坐标
-      edgeModel.updateStartPoint({
-        x,
-        y,
-      })
-    } else if (type === AdjustType.TARGET) {
-      edgeModel.updateEndPoint({
-        x,
-        y,
-      })
+      const params =
+        type === AdjustType.SOURCE
+          ? {
+              startPoint: {
+                x: info.anchor.x,
+                y: info.anchor.y,
+              },
+              endPoint: {
+                x: endPoint.x,
+                y: endPoint.y,
+              },
+              sourceNode: info.node,
+              targetNode,
+            }
+          : {
+              startPoint: {
+                x: startPoint.x,
+                y: startPoint.y,
+              },
+              endPoint: {
+                x: info.anchor.x,
+                y: info.anchor.y,
+              },
+              sourceNode,
+              targetNode: info.node,
+            }
+      edgeModel.updateAfterAdjustStartAndEnd(params)
+    } else {
+      // 如果没有找到目标节点，更新起终点为当前坐标
+      type === AdjustType.SOURCE
+        ? edgeModel.updateStartPoint({ x, y })
+        : edgeModel.updateEndPoint({ x, y })
     }
-
     if (edgeModel.text.value && editConfigModel.adjustEdge) {
       edgeModel.setText(
         Object.assign({}, edgeModel.text, edgeModel.textPosition),
@@ -394,11 +380,11 @@ export class AdjustPoint extends Component<IProps, IState> {
       )
       this.sourceRuleResults.set(
         targetInfoId,
-        formateAnchorConnectValidateData(sourceRuleResult),
+        formatAnchorConnectValidateData(sourceRuleResult),
       )
       this.targetRuleResults.set(
         targetInfoId,
-        formateAnchorConnectValidateData(targetRuleResult),
+        formatAnchorConnectValidateData(targetRuleResult),
       )
     }
     const { isAllPass: isSourcePass, msg: sourceMsg } =

package/src/view/edge/BaseEdge.tsx

@@ -3,7 +3,7 @@ import { Circle } from '../shape'
 import { LineText } from '../text'
 import LogicFlow from '../../LogicFlow'
 import { GraphModel, BaseEdgeModel, PolylineEdgeModel } from '../../model'
-import { ElementState, EventType, ModelType } from '../../constant'
+import { ElementState, EventType, ModelType, TextMode } from '../../constant'
 import {
   isMultipleSelect,
   getClosestPointOfPolyline,
@@ -56,24 +56,31 @@ export abstract class BaseEdge<P extends IProps> extends Component<
    */
   getText(): h.JSX.Element | null {
     const { model, graphModel } = this.props
-    // 文本被编辑的时候，显示编辑框，不显示文本。
-    if (model.state === ElementState.TEXT_EDIT) {
-      return null
-    }
-    let draggable = false
     const { editConfigModel } = graphModel
-    if (model.text.draggable || editConfigModel.edgeTextDraggable) {
-      draggable = true
+
+    // 当 边文本模式非 TEXT 时，不显示文本
+    if (editConfigModel.edgeTextMode !== TextMode.TEXT) return null
+    // 文本被编辑的时候，显示编辑框，不显示文本。
+    if (model.state === ElementState.TEXT_EDIT) return null
+
+    if (model.text) {
+      let draggable = false
+      if (editConfigModel.edgeTextDraggable && model.text.draggable) {
+        draggable = true
+      }
+      return (
+        <LineText
+          ref={this.textRef}
+          editable={
+            editConfigModel.edgeTextEdit && (model.text.editable ?? true)
+          }
+          model={model}
+          graphModel={graphModel}
+          draggable={draggable}
+        />
+      )
     }
-    return (
-      <LineText
-        ref={this.textRef}
-        editable={editConfigModel.edgeTextEdit && model.text.editable}
-        model={model}
-        graphModel={graphModel}
-        draggable={draggable}
-      />
-    )
+    return null
   }
 
   /**
@@ -240,24 +247,36 @@ export abstract class BaseEdge<P extends IProps> extends Component<
    */
   private getAdjustPoints() {
     const { model, graphModel } = this.props
+    const {
+      editConfigModel: {
+        adjustEdgeStartAndEnd,
+        adjustEdgeStart,
+        adjustEdgeEnd,
+      },
+    } = graphModel
     const start = model.getAdjustStart()
     const end = model.getAdjustEnd()
+
     return (
       <g>
-        <AdjustPoint
-          type={AdjustType.SOURCE}
-          {...start}
-          getAdjustPointShape={this.getAdjustPointShape}
-          edgeModel={model}
-          graphModel={graphModel}
-        />
-        <AdjustPoint
-          type={AdjustType.TARGET}
-          {...end}
-          getAdjustPointShape={this.getAdjustPointShape}
-          edgeModel={model}
-          graphModel={graphModel}
-        />
+        {adjustEdgeStartAndEnd && adjustEdgeStart && (
+          <AdjustPoint
+            type={AdjustType.SOURCE}
+            {...start}
+            getAdjustPointShape={this.getAdjustPointShape}
+            edgeModel={model}
+            graphModel={graphModel}
+          />
+        )}
+        {adjustEdgeStartAndEnd && adjustEdgeEnd && (
+          <AdjustPoint
+            type={AdjustType.TARGET}
+            {...end}
+            getAdjustPointShape={this.getAdjustPointShape}
+            edgeModel={model}
+            graphModel={graphModel}
+          />
+        )}
       </g>
     )
   }
@@ -307,24 +326,24 @@ export abstract class BaseEdge<P extends IProps> extends Component<
   /**
    * 不支持重写，如果想要基于hover状态设置不同的样式，请在model中使用isHovered属性。
    */
-  setHoverON = (ev: MouseEvent) => {
+  setHoverOn = (ev: MouseEvent) => {
     // ! hover多次触发, onMouseOver + onMouseEnter
     const {
       model: { isHovered },
     } = this.props
     if (isHovered) return
-    this.textRef && this.textRef.current && this.textRef.current.setHoverON()
+    this.textRef && this.textRef.current && this.textRef.current.setHoverOn()
     this.handleHover(true, ev)
   }
   /**
    * 不支持重写，如果想要基于hover状态设置不同的样式，请在model中使用isHovered属性。
    */
-  setHoverOFF = (ev: MouseEvent) => {
+  setHoverOff = (ev: MouseEvent) => {
     const {
       model: { isHovered },
     } = this.props
     if (!isHovered) return
-    this.textRef && this.textRef.current && this.textRef.current.setHoverOFF()
+    this.textRef && this.textRef.current && this.textRef.current.setHoverOff()
     this.handleHover(false, ev)
   }
   /**
@@ -385,15 +404,17 @@ export abstract class BaseEdge<P extends IProps> extends Component<
     })
     if (isDoubleClick) {
       const { editConfigModel, textEditElement } = graphModel
+      const { id, text, modelType } = model
       // 当前边正在编辑，需要先重置状态才能变更文本框位置
-      if (textEditElement && textEditElement.id === model.id) {
-        graphModel.setElementStateById(model.id, ElementState.DEFAULT)
+      if (textEditElement && textEditElement.id === id) {
+        graphModel.setElementStateById(id, ElementState.DEFAULT)
       }
       // 边文案可编辑状态，才可以进行文案编辑
-      if (editConfigModel.edgeTextEdit && model.text.editable) {
-        graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT)
+      if (editConfigModel.edgeTextEdit && text.editable) {
+        model.setSelected(false)
+        graphModel.setElementStateById(id, ElementState.TEXT_EDIT)
       }
-      if (model.modelType === ModelType.POLYLINE_EDGE) {
+      if (modelType === ModelType.POLYLINE_EDGE) {
         const polylineEdgeModel = model as PolylineEdgeModel
         const {
           canvasOverlayPosition: { x, y },
@@ -401,14 +422,13 @@ export abstract class BaseEdge<P extends IProps> extends Component<
           x: e.x,
           y: e.y,
         })
-        const crossPoint = getClosestPointOfPolyline(
+        polylineEdgeModel.dbClickPosition = getClosestPointOfPolyline(
           {
             x,
             y,
           },
           polylineEdgeModel.points,
         )
-        polylineEdgeModel.dbClickPosition = crossPoint
       }
       graphModel.eventCenter.emit(EventType.EDGE_DBCLICK, {
         data: edgeData,
@@ -471,9 +491,9 @@ export abstract class BaseEdge<P extends IProps> extends Component<
           onMouseDown={this.handleMouseDown}
           onMouseUp={this.handleMouseUp}
           onContextMenu={this.handleContextMenu}
-          onMouseOver={this.setHoverON}
-          onMouseEnter={this.setHoverON}
-          onMouseLeave={this.setHoverOFF}
+          onMouseOver={this.setHoverOn}
+          onMouseEnter={this.setHoverOn}
+          onMouseLeave={this.setHoverOff}
         >
           {this.getShape()}
           {this.getAppend()}

package/src/view/node/BaseNode.tsx

@@ -5,7 +5,7 @@ import Anchor from '../Anchor'
 import { BaseText } from '../text'
 import LogicFlow from '../../LogicFlow'
 import { GraphModel, BaseNodeModel, Model } from '../../model'
-import { ElementState, EventType } from '../../constant'
+import { ElementState, EventType, TextMode } from '../../constant'
 import {
   StepDrag,
   snapToGrid,
@@ -29,7 +29,10 @@ type IState = {
   isDragging?: boolean
 }
 
-export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
+export abstract class BaseNode<P extends IProps = IProps> extends Component<
+  P,
+  IState
+> {
   static isObserved: boolean = false
   static extendsKey?: string
 
@@ -106,7 +109,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
             anchorIndex={index}
             nodeModel={model}
             graphModel={graphModel}
-            setHoverOFF={this.setHoverOFF}
+            setHoverOff={this.setHoverOff}
           />
         )
       })
@@ -116,9 +119,16 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
 
   getRotateControl() {
     const { model, graphModel } = this.props
-    const { isSelected, isHitable, enableRotate, isHovered } = model
+    const {
+      editConfigModel: { isSilentMode, allowRotate },
+    } = graphModel
+    const { isSelected, isHitable, rotatable, isHovered } = model
+
+    // 合并全局 allResize 和节点自身的 resizable 配置，以节点配置高于全局配置
+    const canRotate = allowRotate && rotatable // 全局开关 > 节点配置
+
     const style = model.getRotateControlStyle()
-    if (isHitable && (isSelected || isHovered) && enableRotate) {
+    if (!isSilentMode && isHitable && (isSelected || isHovered) && canRotate) {
       return (
         <RotateControlPoint
           graphModel={graphModel}
@@ -132,9 +142,15 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
 
   getResizeControl(): h.JSX.Element | null {
     const { model, graphModel } = this.props
-    const { isSelected, isHitable, enableResize, isHovered } = model
+    const {
+      editConfigModel: { isSilentMode, allowResize },
+    } = graphModel
+    const { isSelected, isHitable, resizable, isHovered } = model
+
+    // 合并全局 allResize 和节点自身的 resizable 配置，以节点配置高于全局配置
+    const canResize = allowResize && resizable // 全局开关 > 节点配置
     const style = model.getResizeControlStyle()
-    if (isHitable && (isSelected || isHovered) && enableResize) {
+    if (!isSilentMode && isHitable && (isSelected || isHovered) && canResize) {
       return (
         <ResizeControlGroup
           style={style}
@@ -148,14 +164,16 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
 
   getText(): h.JSX.Element | null {
     const { model, graphModel } = this.props
+    const { editConfigModel } = graphModel
+
+    // 当 节点文本模式非 TEXT 时，不显示文本
+    if (editConfigModel.nodeTextMode !== TextMode.TEXT) return null
     // 文本被编辑的时候，显示编辑框，不显示文本。
-    if (model.state === ElementState.TEXT_EDIT) {
-      return null
-    }
+    if (model.state === ElementState.TEXT_EDIT) return null
+
     if (model.text) {
-      const { editConfigModel } = graphModel
       let draggable = false
-      if (model.text.draggable || editConfigModel.nodeTextDraggable) {
+      if (editConfigModel.nodeTextDraggable && model.text.draggable) {
         draggable = true
       }
       return (
@@ -189,7 +207,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
         break
     }
     if (isDragging) {
-      className += ' lf-isDragging'
+      className += ' lf-dragging'
     }
     if (isSelected) {
       className += ' lf-node-selected'
@@ -212,9 +230,9 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
       }
     }
   }
+
   onDragging = ({ event }: IDragParams) => {
     const { model, graphModel } = this.props
-    // const { isDragging } = model;
     const {
       editConfigModel: { stopMoveGraph, autoExpand },
       transformModel,
@@ -294,6 +312,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
       graphModel.moveNodes(moveNodes, x - model.x, y - model.y)
     }
   }
+
   onDragEnd = () => {
     if (this.t) {
       cancelRaf(this.t)
@@ -301,10 +320,17 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
     const { model } = this.props
     model.isDragging = false
   }
+  onMouseOut = (ev: MouseEvent) => {
+    if (isIe) {
+      this.setHoverOff(ev)
+    }
+  }
+
   handleMouseUp = () => {
     const { model } = this.props
     this.mouseUpDrag = model.isDragging
   }
+
   handleClick = (e: MouseEvent) => {
     // 节点拖拽进画布之后，不触发click事件相关emit
     // 点拖拽进画布没有触发mousedown事件，没有startTime，用这个值做区分
@@ -350,9 +376,11 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
 
     // 不是双击的，默认都是单击
     if (isDoubleClick) {
-      if (editConfigModel.nodeTextEdit && model.text.editable) {
-        model.setSelected(false)
-        graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT)
+      if (editConfigModel.nodeTextEdit) {
+        if (model.text.editable) {
+          model.setSelected(false)
+          graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT)
+        }
       }
       graphModel.eventCenter.emit(EventType.NODE_DBCLICK, eventOptions)
     } else {
@@ -360,6 +388,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
       graphModel.eventCenter.emit(EventType.NODE_CLICK, eventOptions)
     }
   }
+
   handleContextMenu = (ev: MouseEvent) => {
     ev.preventDefault()
     const { model, graphModel } = this.props
@@ -385,6 +414,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
     })
     this.toFront()
   }
+
   handleMouseDown = (ev: MouseEvent) => {
     const { model, graphModel } = this.props
     this.startTime = new Date().getTime()
@@ -393,9 +423,9 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
       this.stepDrag && this.stepDrag.handleMouseDown(ev)
     }
   }
-  // 为什么将hover状态放到model中？
+
   // 因为自定义节点的时候，可能会基于hover状态自定义不同的样式。
-  setHoverON = (ev: MouseEvent) => {
+  setHoverOn = (ev: MouseEvent) => {
     const { model, graphModel } = this.props
     if (model.isHovered) return
     const nodeData = model.getData()
@@ -405,9 +435,11 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
       e: ev,
     })
   }
-  setHoverOFF = (ev: MouseEvent) => {
+
+  setHoverOff = (ev: MouseEvent) => {
     const { model, graphModel } = this.props
     const nodeData = model.getData()
+    // 文本focus时，关联的元素也需要高亮，所以元素失焦时还要判断下是否有文本处于focus状态
     if (!model.isHovered) return
     model.setHovered(false)
     graphModel.eventCenter.emit(EventType.NODE_MOUSELEAVE, {
@@ -415,11 +447,6 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
       e: ev,
     })
   }
-  onMouseOut = (ev: MouseEvent) => {
-    if (isIe) {
-      this.setHoverOFF(ev)
-    }
-  }
 
   /**
    *  @overridable 支持重写, 节点置顶，可以被某些不需要置顶的节点重写，如group节点。
@@ -476,9 +503,9 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
           onMouseDown={this.handleMouseDown}
           onMouseUp={this.handleMouseUp}
           onClick={this.handleClick}
-          onMouseEnter={this.setHoverON}
-          onMouseOver={this.setHoverON}
-          onMouseLeave={this.setHoverOFF}
+          onMouseEnter={this.setHoverOn}
+          onMouseOver={this.setHoverOn}
+          onMouseLeave={this.setHoverOff}
           onMouseOut={this.onMouseOut}
           onContextMenu={this.handleContextMenu}
           {...restAttributes}

package/src/view/node/CircleNode.tsx

@@ -7,7 +7,9 @@ export type ICircleNodeProps = {
   graphModel: GraphModel
 }
 
-export class CircleNode extends BaseNode<ICircleNodeProps> {
+export class CircleNode<
+  P extends ICircleNodeProps = ICircleNodeProps,
+> extends BaseNode<P> {
   getShape() {
     const { model } = this.props
     const { x, y, r } = model

package/src/view/node/DiamondNode.tsx

@@ -7,7 +7,9 @@ export type IDiamondNodeProps = {
   graphModel: GraphModel
 }
 
-export class DiamondNode extends BaseNode<IDiamondNodeProps> {
+export class DiamondNode<
+  P extends IDiamondNodeProps = IDiamondNodeProps,
+> extends BaseNode<P> {
   getShape() {
     const { model } = this.props
     const style = model.getNodeStyle()

package/src/view/node/EllipseNode.tsx

@@ -7,7 +7,9 @@ export type IEllipseNodeProps = {
   graphModel: GraphModel
 }
 
-export class EllipseNode extends BaseNode<IEllipseNodeProps> {
+export class EllipseNode<
+  P extends IEllipseNodeProps = IEllipseNodeProps,
+> extends BaseNode<P> {
   getShape() {
     const { model } = this.props
     const style = model.getNodeStyle()

package/src/view/node/HtmlNode.tsx

@@ -7,7 +7,9 @@ export type IHtmlNodeProps = {
   graphModel: GraphModel
 }
 
-export class HtmlNode extends BaseNode<IHtmlNodeProps> {
+export class HtmlNode<
+  P extends IHtmlNodeProps = IHtmlNodeProps,
+> extends BaseNode<P> {
   ref = createRef()
   currentProperties?: string
   preProperties?: string
@@ -52,14 +54,14 @@ export class HtmlNode extends BaseNode<IHtmlNodeProps> {
   }
 
   componentDidMount() {
-    console.log('HtmlNode --->>> componentDidMount - 初始化内容')
+    // console.log('HtmlNode --->>> componentDidMount - 初始化内容')
     if (this.shouldUpdate() && this.rootEl) {
       this.setHtml(this.rootEl)
     }
   }
 
   componentDidUpdate() {
-    console.log('HtmlNode --->>> componentDidUpdate - 更新节点内容')
+    // console.log('HtmlNode --->>> componentDidUpdate - 更新节点内容')
     // DONE: 将 componentDidMount 和 componentDidUpdate 区分开，如果写在一次，渲染 React 组件会重复初始化，消耗过多资源
     // 为了保证历史兼容性，先将默认 HTML 节点的 setHtml 和 confirmUpdate 保持一直，用户可通过自定义的方式重新定义
     if (this.shouldUpdate() && this.rootEl) {

package/src/view/node/PolygonNode.tsx

@@ -7,7 +7,9 @@ export type IPolygonNodeProps = {
   graphModel: GraphModel
 }
 
-export class PolygonNode extends BaseNode<IPolygonNodeProps> {
+export class PolygonNode<
+  P extends IPolygonNodeProps = IPolygonNodeProps,
+> extends BaseNode<P> {
   getShape() {
     const { model } = this.props
     const { x, y, width, height, points } = model as PolygonNodeModel

package/src/view/node/RectNode.tsx

@@ -8,7 +8,9 @@ export type IRectNodeProps = {
   graphModel: GraphModel
 }
 
-export class RectNode extends BaseNode<IRectNodeProps> {
+export class RectNode<
+  P extends IRectNodeProps = IRectNodeProps,
+> extends BaseNode<P> {
   getShape(): h.JSX.Element | null {
     const { model } = this.props
     const style = model.getNodeStyle()

package/src/view/node/TextNode.tsx

@@ -7,7 +7,9 @@ export type ITextNodeProps = {
   graphModel: GraphModel
 }
 
-export class TextNode extends BaseNode<ITextNodeProps> {
+export class TextNode<
+  P extends ITextNodeProps = ITextNodeProps,
+> extends BaseNode<P> {
   getBackground() {
     const { model } = this.props
     const style = model.getTextStyle()
@@ -18,7 +20,7 @@ export class TextNode extends BaseNode<ITextNodeProps> {
     const rectAttr = {
       ...style.background,
       x,
-      y: y - 1,
+      y,
       width,
       height,
     }

package/src/view/overlay/CanvasOverlay.tsx

@@ -33,7 +33,7 @@ export class CanvasOverlay extends Component<IProps, IState> {
       eventCenter,
       model: undefined,
     })
-    // 当ctrl键被按住的时候，可以放大缩小。
+    // 当 ctrl、cmd 键被按住的时候，可以放大缩小。
     this.state = {
       isDragging: false,
     }
@@ -65,8 +65,8 @@ export class CanvasOverlay extends Component<IProps, IState> {
       graphModel,
     } = this.props
     const { deltaX: eX, deltaY: eY } = ev
-    // 如果没有禁止滚动移动画布, 并且当前触发的时候ctrl键没有按住, 那么移动画布
-    if (!editConfigModel.stopScrollGraph && ev.ctrlKey !== true) {
+    // 如果没有禁止滚动移动画布, 并且当前触发的时候ctrl键、cmd键没有按住, 那么移动画布
+    if (!editConfigModel.stopScrollGraph && !ev.ctrlKey && !ev.metaKey) {
       ev.preventDefault()
       this.stepScrollX += eX
       this.stepScrollY += eY
@@ -84,7 +84,7 @@ export class CanvasOverlay extends Component<IProps, IState> {
       }
       return
     }
-    // 如果没有禁止缩放画布，那么进行缩放. 在禁止缩放画布后，按住ctrl键也不能缩放了。
+    // 如果没有禁止缩放画布，那么进行缩放. 在禁止缩放画布后，按住 ctrl、cmd 键也不能缩放了。
     if (!editConfigModel.stopZoomGraph) {
       ev.preventDefault()
       const position = graphModel.getPointByClient({
@@ -123,6 +123,7 @@ export class CanvasOverlay extends Component<IProps, IState> {
       })
     }
   }
+  // 鼠标、触摸板 按下
   mouseDownHandler = (ev: MouseEvent) => {
     const {
       graphModel: {