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

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,
     }

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} />
 }
 

package/src/view/shape/Rect.tsx

@@ -1,23 +1,26 @@
-import LogicFlow from '../../LogicFlow'
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+import LogicFlow from '../..'
 
-import Point = LogicFlow.Point
-import RectSize = LogicFlow.RectSize
-
-type IRectProps = {
+export type IRectProps = {
+  x: number
+  y: number
+  width: number
+  height: number
   className?: string
-  radius?: number
-} & Point &
-  RectSize
+  radius?: LogicFlow.NumberOrPercent
+  [key: string]: any
+}
 
-export function Rect(props: IRectProps) {
-  const { x, y, width, height, className, radius } = props
+export function Rect(props: IRectProps): h.JSX.Element {
+  const { x, y, width, height, className, strokeWidth, radius = 0 } = props
 
   const leftTopX = x - width / 2
   const leftTopY = y - height / 2
   const attrs: Record<string, any> = {}
-  Object.entries(props).forEach(([k, v]) => {
-    const valueType = typeof v
-    if (valueType !== 'object') {
+  attrs['stroke-width'] = strokeWidth
+  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
+    if (typeof v !== 'object') {
       attrs[k] = v
     }
   })
@@ -25,20 +28,17 @@ export function Rect(props: IRectProps) {
   if (className) {
     attrs.className = `lf-basic-shape ${className}`
   } else {
-    attrs.className = 'lf-shape'
+    attrs.className = 'lf-basic-shape'
   }
+
   if (radius) {
     attrs.rx = radius
     attrs.ry = radius
   }
   attrs.x = leftTopX
   attrs.y = leftTopY
-  return <rect {...attrs} />
-}
 
-Rect.defaultProps = {
-  className: '',
-  radius: '',
+  return <rect {...attrs} />
 }
 
 export default Rect