@logicflow/core 2.0.0-beta.2 → 2.0.0-beta.3

package/src/model/edge/BaseEdgeModel.ts

@@ -1,4 +1,4 @@
-import { assign, cloneDeep, find } from 'lodash-es'
+import { assign, cloneDeep, find, isUndefined } from 'lodash-es'
 import { action, computed, observable, toJS } from 'mobx'
 import { BaseNodeModel, GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
@@ -20,6 +20,7 @@ import {
 import Point = LogicFlow.Point
 import EdgeData = LogicFlow.EdgeData
 import EdgeConfig = LogicFlow.EdgeConfig
+import TextConfig = LogicFlow.TextConfig
 
 export interface IBaseEdgeModel extends Model.BaseModel {
   /**
@@ -56,7 +57,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   @observable startPoint!: Point
   @observable endPoint!: Point
 
-  @observable text = {
+  @observable text: Required<TextConfig> = {
     value: '',
     x: 0,
     y: 0,
@@ -431,8 +432,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
 
   /**
    * 设置边的属性，会触发重新渲染
-   * @param key 属性名
-   * @param val 属性值
+   * @param properties 要更新的 properties，会做合并
    */
   @action
   setProperties(properties: Record<string, any>): void {
@@ -497,28 +497,38 @@ export class BaseEdgeModel implements IBaseEdgeModel {
    * 内部方法，处理初始化文本格式
    */
   @action formatText(data: EdgeConfig) {
-    // 暂时处理，只传入text的情况
     const { x, y } = this.textPosition
-    if (!data.text || typeof data.text === 'string') {
-      this.text = {
-        value: data.text || '',
-        x,
-        y,
-        draggable: this.text.draggable,
-        editable: this.text.editable,
-      }
-      return
+    const { text } = data
+    let textConfig: Required<TextConfig> = {
+      value: '',
+      x,
+      y,
+      draggable: false,
+      editable: true,
     }
 
-    if (Object.prototype.toString.call(data.text) === '[object Object]') {
-      this.text = {
-        x: data.text.x || x,
-        y: data.text.y || y,
-        value: data.text.value || '',
-        draggable: this.text.draggable,
-        editable: this.text.editable,
+    if (text) {
+      if (typeof text === 'string') {
+        textConfig = {
+          ...textConfig,
+          value: text,
+        }
+      } else {
+        textConfig = {
+          ...textConfig,
+          x: text.x ?? x,
+          y: text.y ?? y,
+          value: text.value ?? '',
+        }
+        if (!isUndefined(text.draggable)) {
+          textConfig.draggable = text.draggable
+        }
+        if (!isUndefined(text.editable)) {
+          textConfig.editable = text.editable
+        }
       }
     }
+    this.text = textConfig
   }
 
   /**

package/src/model/node/BaseNodeModel.ts

@@ -1,5 +1,5 @@
 import { action, computed, isObservable, observable, toJS } from 'mobx'
-import { assign, cloneDeep, has, isNil, mapKeys } from 'lodash-es'
+import { assign, cloneDeep, has, isNil, isUndefined, mapKeys } from 'lodash-es'
 import { GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
 import {
@@ -186,6 +186,7 @@ export class BaseNodeModel implements IBaseNodeModel {
     }
 
     this.formatText(data)
+    // 在下面又将 NodeConfig 中的数据赋值给了 this，应该会触发 setAttributes，确认是否符合预期
     assign(this, pickNodeConfig(data)) // TODO: 确认 constructor 中赋值 properties 是否必要
     const { overlapMode } = this.graphModel
     if (overlapMode === OverlapMode.INCREASE) {
@@ -219,27 +220,34 @@ export class BaseNodeModel implements IBaseNodeModel {
    * 始化文本属性
    */
   private formatText(data: NodeConfig): void {
-    if (!data.text) {
-      data.text = {
-        value: '',
-        x: data.x,
-        y: data.y,
-        draggable: false,
-        editable: true,
-      }
-    } else {
-      if (typeof data.text === 'string') {
-        data.text = {
-          value: data.text,
-          x: data.x,
-          y: data.y,
-          draggable: false,
-          editable: true,
-        }
+    const { x, y, text } = data
+    let textConfig: TextConfig = {
+      value: '',
+      x,
+      y,
+      draggable: false,
+      editable: true,
+    }
+    if (text) {
+      if (typeof text === 'string') {
+        textConfig.value = text
       } else {
-        data.text.editable = data.text.editable ?? true
+        textConfig = {
+          ...textConfig,
+          x: text.x ?? x,
+          y: text.y ?? y,
+          value: text.value ?? '',
+        }
+        if (!isUndefined(text.draggable)) {
+          textConfig.draggable = text.draggable
+        }
+        if (!isUndefined(text.editable)) {
+          textConfig.draggable = text.draggable
+        }
       }
     }
+
+    data.text = textConfig
   }
 
   /**

package/src/model/node/CircleNodeModel.ts

@@ -54,11 +54,11 @@ export class CircleNodeModel extends BaseNodeModel {
         theme: { circle },
       },
     } = this
-    const { style: customStyle } = this.properties
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
-      ...(customStyle ?? {}),
       ...cloneDeep(circle),
+      ...cloneDeep(customStyle),
     }
   }
 

package/src/model/node/DiamondNodeModel.ts

@@ -53,9 +53,11 @@ export class DiamondNodeModel extends BaseNodeModel {
         theme: { diamond },
       },
     } = this
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(diamond),
+      ...cloneDeep(customStyle),
     }
   }
 

package/src/model/node/EllipseNodeModel.ts

@@ -51,9 +51,11 @@ export class EllipseNodeModel extends BaseNodeModel {
         theme: { ellipse },
       },
     } = this
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(ellipse),
+      ...cloneDeep(customStyle),
     }
   }
 

package/src/model/node/HtmlNodeModel.ts

@@ -7,7 +7,7 @@ import { observable } from 'mobx'
 import LogicFlow from '../../LogicFlow'
 import GraphModel from '../GraphModel'
 
-export type IHtmlNodeModel = {
+export type IHtmlNodeProperties = {
   width?: number
   height?: number
   style?: LogicFlow.CommonTheme
@@ -18,7 +18,7 @@ export type IHtmlNodeModel = {
 
 export class HtmlNodeModel extends BaseNodeModel {
   modelType = ModelType.HTML_NODE
-  @observable properties: IHtmlNodeModel = {}
+  @observable properties: IHtmlNodeProperties = {}
 
   constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
     super(data, graphModel)

package/src/model/node/PolygonNodeModel.ts

@@ -66,11 +66,11 @@ export class PolygonNodeModel extends BaseNodeModel {
         theme: { polygon },
       },
     } = this
-    const { style: customStyle } = this.properties
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(polygon),
-      ...(cloneDeep(customStyle) || {}),
+      ...cloneDeep(customStyle),
     }
   }
 

package/src/model/node/RectNodeModel.ts

@@ -8,6 +8,7 @@ import { ModelType } from '../../constant'
 export type IRectNodeModel = {
   width?: number
   height?: number
+  radius?: number
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.CommonTheme
 
@@ -21,17 +22,21 @@ export class RectNodeModel extends BaseNodeModel {
 
   constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
 
+    // TODO：类字段初始化会覆盖 super、setAttributes 中设置的属性
+    this.properties = data.properties || {}
+    // TODO: bug here, 上面更新 properties 会触发 setAttributes，下面再主动调用，会导致触发两次
     this.setAttributes()
   }
 
   setAttributes() {
     super.setAttributes()
 
-    const { width, height } = this.properties
+    const { width, height, radius } = this.properties
     if (width) this.width = width
     if (height) this.height = height
+    // 矩形特有
+    if (radius) this.radius = radius
   }
 
   getDefaultAnchor() {
@@ -47,9 +52,11 @@ export class RectNodeModel extends BaseNodeModel {
   getNodeStyle() {
     const style = super.getNodeStyle()
     const { rect } = this.graphModel.theme
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(rect),
+      ...cloneDeep(customStyle),
     }
   }
 }

package/src/options.ts

@@ -111,22 +111,13 @@ export namespace Options {
   export function get(options: Partial<Manual>) {
     const { ...others } = options
     const container = options.container
-    if (container != null) {
-      if (options.width == null) {
-        others.width = container.clientWidth
-      }
-      if (options.height == null) {
-        others.height = container.clientHeight
-      }
-    } else {
+    if (!container) {
       throw new Error(
         'Ensure the container of LogicFlow is specified and valid.',
       )
     }
 
-    const result = assign({}, defaults, others) as Options.Definition
-
-    return result
+    return assign({}, defaults, others) as Options.Definition
   }
 }
 

package/src/tool/tool.ts

@@ -3,8 +3,8 @@ import { VNode } from 'preact'
 import TextEdit from './TextEditTool'
 import MultipleSelect from './MultipleSelectTool'
 import LogicFlow from '../LogicFlow'
-import { GraphModel, BaseEdgeModel, BaseNodeModel } from '../model'
 import { ElementState, EventType } from '../constant'
+import { GraphModel, BaseEdgeModel, BaseNodeModel } from '../model'
 
 export type IToolProps = {
   textEditElement?: BaseNodeModel | BaseEdgeModel

package/src/util/edge.ts

@@ -1,4 +1,4 @@
-import { pick } from 'lodash-es'
+import { forEach, pick } from 'lodash-es'
 import { getNodeBBox, isInNode, distance, sampleCubic } from '.'
 import LogicFlow from '../LogicFlow'
 import { Options } from '../options'
@@ -1032,3 +1032,28 @@ export function createEdgeGenerator(
     return Object.assign({ type: result }, currentEdge)
   }
 }
+
+// 获取 Svg 标签文案高度，自动换行
+export type IGetSvgTextSizeParams = {
+  rows: string[]
+  rowsLength: number
+  fontSize: number
+}
+export const getSvgTextSize = ({
+  rows,
+  rowsLength,
+  fontSize,
+}: IGetSvgTextSizeParams): LogicFlow.RectSize => {
+  let longestBytes = 0
+  forEach(rows, (row) => {
+    const rowBytesLength = getBytesLength(row)
+    longestBytes = rowBytesLength > longestBytes ? rowBytesLength : longestBytes
+  })
+
+  // 背景框宽度，最长一行字节数/2 * fontsize + 2
+  // 背景框宽度， 行数 * fontsize + 2
+  return {
+    width: Math.ceil(longestBytes / 2) * fontSize + fontSize / 4,
+    height: rowsLength * (fontSize + 2) + fontSize / 4,
+  }
+}

package/src/util/node.ts

@@ -1,4 +1,5 @@
 import { pick } from 'lodash-es'
+import { createElement as h } from 'preact/compat'
 import { getBytesLength } from './edge'
 import LogicFlow from '../LogicFlow'
 import {
@@ -444,7 +445,26 @@ export const getNodeAnchorPosition = (
   }
 }
 
-// 获取文案高度，自动换行，利用dom计算高度
+/*********************************************************
+ * Text 节点文本相关工具函数
+ ********************************************************/
+// Text 相关节点工具函数
+// TODO: 获取文案高度，设置自动换行，利用 dom 计算高度
+// function getTextHeight(text: string, font: string): number {
+//   const span = document.createElement('span');
+//   span.textContent = text;
+//   span.style.font = font;
+
+//   const range = document.createRange();
+//   range.selectNodeContents(span);
+
+//   const rect = range.getBoundingClientRect();
+//   const height = rect.height;
+
+//   return height;
+// }
+
+// 获取文案高度，自动换行，利用 dom 计算高度
 export const getHtmlTextHeight = ({
   rows,
   style,
@@ -452,18 +472,18 @@ export const getHtmlTextHeight = ({
   className,
 }: {
   rows: string[]
-  style: any // TODO: 完善类型
+  style: h.JSX.CSSProperties
   rowsLength: number
   className: string
 }) => {
   const dom = document.createElement('div')
-  dom.style.fontSize = style.fontSize
-  dom.style.width = style.width
   dom.className = className
-  dom.style.lineHeight = style.lineHeight
-  dom.style.padding = style.padding
+  dom.style.fontSize = `${style.fontSize}`
+  dom.style.width = `${style.width}`
+  dom.style.lineHeight = `${style.lineHeight}`
+  dom.style.padding = `${style.padding}`
   if (style.fontFamily) {
-    dom.style.fontFamily = style.fontFamily
+    dom.style.fontFamily = `${style.fontFamily}`
   }
   if (rowsLength > 1) {
     rows.forEach((row) => {
@@ -479,6 +499,7 @@ export const getHtmlTextHeight = ({
   document.body.removeChild(dom)
   return height
 }
+
 // 获取文案高度，自动换行，利用dom计算高度
 export const getSvgTextWidthHeight = ({
   rows,
@@ -506,7 +527,7 @@ export const getSvgTextWidthHeight = ({
 /**
  * @description 格式化边校验信息
  */
-export const formateAnchorConnectValidateData = (
+export const formatAnchorConnectValidateData = (
   data: Model.ConnectRuleResult,
 ) => {
   if (typeof data !== 'object') {

package/src/view/Anchor.tsx

@@ -6,7 +6,7 @@ import { ElementState, EventType } from '../constant'
 import { GraphModel, BaseNodeModel, Model } from '../model'
 import {
   StepDrag,
-  formateAnchorConnectValidateData,
+  formatAnchorConnectValidateData,
   targetNodeInfo,
   distance,
   cancelRaf,
@@ -29,7 +29,7 @@ interface IProps {
   anchorIndex: number
   graphModel: GraphModel
   nodeModel: BaseNodeModel
-  setHoverOFF: (e: MouseEvent) => void
+  setHoverOff: (e: MouseEvent) => void
 }
 
 interface IState {
@@ -326,11 +326,11 @@ class Anchor extends Component<IProps, IState> {
         )
         this.sourceRuleResults.set(
           targetInfoId,
-          formateAnchorConnectValidateData(sourceRuleResult),
+          formatAnchorConnectValidateData(sourceRuleResult),
         )
         this.targetRuleResults.set(
           targetInfoId,
-          formateAnchorConnectValidateData(targetRuleResult),
+          formatAnchorConnectValidateData(targetRuleResult),
         )
       }
       const { isAllPass: isSourcePass } =

package/src/view/Control.tsx

@@ -304,6 +304,7 @@ export class ResizeControl extends Component<
 
   // 由于将拖拽放大缩小改成丝滑模式，这个时候需要再拖拽结束的时候，将节点的位置更新到 grid 上。
   onDragEnd = () => {
+    // TODO: 确认下面该代码是否还需要（应该是默认让节点拖拽以 gridSize 为步长移动）
     // const { gridSize = 1 } = this.graphModel
     // const x = gridSize * Math.round(this.nodeModel.x / gridSize)
     // const y = gridSize * Math.round(this.nodeModel.y / gridSize)
@@ -319,14 +320,16 @@ export class ResizeControl extends Component<
 
   render(): h.JSX.Element {
     const { x, y, direction, model } = this.props
-    const style = model.getResizeControlStyle()
+    const { width, height, ...restStyle } = model.getResizeControlStyle()
     return (
       <g className={`lf-resize-control lf-resize-control-${direction}`}>
         <Rect
           className="lf-resize-control-content"
           x={x}
           y={y}
-          {...style}
+          width={width ?? 7}
+          height={height ?? 7}
+          {...restStyle}
           onMouseDown={this.dragHandler.handleMouseDown}
         />
       </g>

package/src/view/Graph.tsx

@@ -1,5 +1,5 @@
 import { Component, ComponentType } from 'preact/compat'
-import { map } from 'lodash-es'
+import { map, throttle } from 'lodash-es'
 import {
   CanvasOverlay,
   ToolOverlay,
@@ -37,6 +37,18 @@ type ContainerStyle = {
 
 @observer
 class Graph extends Component<IGraphProps> {
+  handleResize = () => {
+    this.props.graphModel.resize()
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', throttle(this.handleResize, 200))
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', throttle(this.handleResize, 200))
+  }
+
   getComponent(
     model: BaseEdgeModel | BaseNodeModel,
     graphModel: GraphModel,
@@ -73,7 +85,7 @@ class Graph extends Component<IGraphProps> {
     const { adjustEdge } = editConfigModel
 
     return (
-      <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
+      <div className="lf-graph" flow-id={graphModel.flowId}>
         <CanvasOverlay graphModel={graphModel} dnd={dnd}>
           <g className="lf-base">
             {map(graphModel.sortElements, (nodeModel) =>

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'
@@ -394,11 +394,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

@@ -307,24 +307,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)
   }
   /**
@@ -471,9 +471,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

@@ -106,7 +106,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
             anchorIndex={index}
             nodeModel={model}
             graphModel={graphModel}
-            setHoverOFF={this.setHoverOFF}
+            setHoverOff={this.setHoverOff}
           />
         )
       })
@@ -395,7 +395,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
   }
   // 为什么将hover状态放到model中？
   // 因为自定义节点的时候，可能会基于hover状态自定义不同的样式。
-  setHoverON = (ev: MouseEvent) => {
+  setHoverOn = (ev: MouseEvent) => {
     const { model, graphModel } = this.props
     if (model.isHovered) return
     const nodeData = model.getData()
@@ -405,7 +405,7 @@ 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()
     if (!model.isHovered) return
@@ -417,7 +417,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
   }
   onMouseOut = (ev: MouseEvent) => {
     if (isIe) {
-      this.setHoverOFF(ev)
+      this.setHoverOff(ev)
     }
   }
 
@@ -476,9 +476,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/TextNode.tsx

@@ -18,7 +18,7 @@ export class TextNode extends BaseNode<ITextNodeProps> {
     const rectAttr = {
       ...style.background,
       x,
-      y: y - 1,
+      y,
       width,
       height,
     }