@logicflow/core 2.0.0-beta.6 → 2.0.0-beta.8

package/src/view/node/BaseNode.tsx

@@ -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
 
@@ -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}
@@ -217,7 +233,6 @@ 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,
@@ -305,6 +320,11 @@ 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
@@ -404,7 +424,6 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
     }
   }
 
-  // 为什么将hover状态放到model中？
   // 因为自定义节点的时候，可能会基于hover状态自定义不同的样式。
   setHoverOn = (ev: MouseEvent) => {
     const { model, graphModel } = this.props
@@ -429,12 +448,6 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
     })
   }
 
-  onMouseOut = (ev: MouseEvent) => {
-    if (isIe) {
-      this.setHoverOff(ev)
-    }
-  }
-
   /**
    *  @overridable 支持重写, 节点置顶，可以被某些不需要置顶的节点重写，如group节点。
    */

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

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()

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({

package/src/view/text/BaseText.tsx

@@ -79,7 +79,7 @@ export class BaseText<
       editConfigModel: { nodeTextDraggable },
     } = graphModel
 
-    if (draggable || nodeTextDraggable) {
+    if (draggable ?? nodeTextDraggable) {
       this.stepperDrag.model = model
       this.stepperDrag.handleMouseDown(e)
     }