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

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

package/src/view/overlay/ToolOverlay.tsx

@@ -35,7 +35,7 @@ export class ToolOverlay extends Component<IProps> {
       h(t, {
         textEditElement,
         graphModel,
-        logicFlow: tool.instance,
+        lf: tool.instance,
       }),
     )
     tool.components = components

package/src/view/shape/Circle.tsx

@@ -1,26 +1,40 @@
-export function Circle(props) {
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+import { LogicFlow } from '../..'
+
+export type ICircleProps = {
+  x?: number
+  y?: number
+  r?: number
+  className?: string
+} & LogicFlow.CommonTheme
+
+export function Circle(props: ICircleProps): h.JSX.Element {
   const { x = 0, y = 0, r = 4, className } = props
-  const attrs: Record<string, any> = {
+
+  const attrs: ICircleProps = {
     cx: x,
     cy: y,
     r,
     fill: 'transparent',
     fillOpacity: 1,
-    strokeWidth: '1',
+    strokeWidth: 1,
     stroke: '#000',
     strokeOpacity: 1,
   }
-  Object.entries(props).forEach(([k, v]) => {
-    const valueType = typeof v
-    if (valueType !== 'object') {
+
+  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
+    if (typeof v !== 'object') {
       attrs[k] = v
     }
   })
+
   if (className) {
     attrs.className = `lf-basic-shape ${className}`
   } else {
-    attrs.className = 'lf-shape'
+    attrs.className = `lf-basic-shape`
   }
+
   return <circle {...attrs} />
 }
 

package/src/view/shape/Ellipse.tsx

@@ -1,5 +1,18 @@
-export function Ellipse(props) {
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+import { LogicFlow } from '../..'
+
+export type IEllipseProps = {
+  x?: number
+  y?: number
+  rx?: number
+  ry?: number
+  className?: string
+} & LogicFlow.CommonTheme
+
+export function Ellipse(props: IEllipseProps): h.JSX.Element {
   const { x = 0, y = 0, rx = 4, ry = 4, className } = props
+
   const attrs: Record<string, any> = {
     cx: x,
     cy: y,
@@ -7,21 +20,22 @@ export function Ellipse(props) {
     ry,
     fill: 'transparent',
     fillOpacity: 1,
-    strokeWidth: '1',
+    strokeWidth: 1,
     stroke: '#000',
     strokeOpacity: 1,
   }
-  Object.entries(props).forEach(([k, v]) => {
-    const valueType = typeof v
-    if (valueType !== 'object') {
+  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
+    if (typeof v !== 'object') {
       attrs[k] = v
     }
   })
+
   if (className) {
     attrs.className = `lf-basic-shape ${className}`
   } else {
-    attrs.className = 'lf-shape'
+    attrs.className = `lf-basic-shape`
   }
+
   return <ellipse {...attrs} />
 }
 

package/src/view/shape/Line.tsx

@@ -1,23 +1,38 @@
-export function Line(props) {
-  const attrs = {
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+
+export type ILineProps = {
+  id?: string
+  tabindex?: number
+  x1?: number
+  y1?: number
+  x2?: number
+  y2?: number
+  stroke?: string // Color
+  className?: string
+  style?: h.JSX.CSSProperties
+  [key: string]: any
+}
+
+export function Line(props: ILineProps): h.JSX.Element {
+  const attrs: ILineProps = {
     // default
     x1: 10,
     y1: 10,
     x2: 20,
     y2: 20,
     stroke: 'black',
-    // ...props,
+    // ...props
   }
-  Object.entries(props).forEach(([k, v]) => {
+
+  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
     if (k === 'style') {
       attrs[k] = v
-    } else {
-      const valueType = typeof v
-      if (valueType !== 'object') {
-        attrs[k] = v
-      }
+    } else if (typeof v !== 'object') {
+      attrs[k] = v
     }
   })
+
   return <line {...attrs} />
 }
 

package/src/view/shape/Path.tsx

@@ -1,18 +1,21 @@
-type IProps = {
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+
+export type IPathProps = {
   d: string
   [key: string]: any
 }
 
-export function Path(props: IProps) {
-  const attrs = {
+export function Path(props: IPathProps): h.JSX.Element {
+  const attrs: Record<string, any> = {
     d: '',
   }
-  Object.entries(props).forEach(([k, v]) => {
-    const valueType = typeof v
-    if (k === 'style' || valueType !== 'object') {
+  forEach(toPairs(props), ([k, v]: [key: string, v: any]) => {
+    if (k === 'style' || typeof v !== 'object') {
       attrs[k] = v
     }
   })
+
   return <path {...attrs} />
 }
 

package/src/view/shape/Polygon.tsx

@@ -1,14 +1,16 @@
-import LogicFlow from '../../LogicFlow'
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+import { LogicFlow } from '../..'
 
-// TODO: 定义基础图形的类型
 export type IPolygonProps = {
   points: LogicFlow.PointTuple[]
+  x?: number
+  y?: number
   className?: string
-  [key: string]: any
 }
 
-export function Polygon(props: IPolygonProps) {
-  const { points, className } = props
+export function Polygon(props: IPolygonProps): h.JSX.Element {
+  const { points = [], className } = props
   const attrs: Record<string, any> = {
     fill: 'transparent',
     fillOpacity: 1,
@@ -17,16 +19,17 @@ export function Polygon(props: IPolygonProps) {
     strokeOpacity: 1,
     points: '',
   }
-  Object.entries(props).forEach(([k, v]) => {
-    const valueType = typeof v
-    if (valueType !== 'object') {
+
+  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
+    if (typeof v !== 'object') {
       attrs[k] = v
     }
   })
+
   if (className) {
-    attrs.className = `lf-basic-shape ${className}`
+    attrs.classNmae = `lf-basic-shape ${className}`
   } else {
-    attrs.className = 'lf-shape'
+    attrs.className = 'lf-basic-shape'
   }
   attrs.points = points.map((point) => point.join(',')).join(' ')
 

package/src/view/shape/Polyline.tsx

@@ -1,18 +1,30 @@
-export function Polyline(props) {
-  const attrs = {
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+
+export type IPolylineProps = {
+  points: string
+  pathLength?: number | 'none'
+  className?: string
+}
+
+export function Polyline(props: IPolylineProps): h.JSX.Element {
+  const { className } = props
+  const attrs: Record<string, unknown> = {
     points: '',
     fill: 'none',
   }
-  Object.entries(props).forEach(([k, v]) => {
+
+  forEach(toPairs(props), ([k, v]: [k: string, v: unknown]) => {
     if (k === 'style') {
       attrs[k] = v
-    } else {
-      const valueType = typeof v
-      if (valueType !== 'object') {
-        attrs[k] = v
-      }
+    } else if (typeof v !== 'object') {
+      attrs[k] = v
     }
   })
+  if (className) {
+    attrs.className = `${className}`
+  }
+
   return <polyline {...attrs} />
 }