refactor(core): 重构项目中 basic shape 组件，修复功能 bug、完善类型定义

 - rename formateAnchorConnectValidateData - formatAnchorConnectValidateData
 - rename  setHoverON -> setHoverOn, setHoverOFF -> setHoverOff
 - 修复 Text 文本节点，文本不在节点中间的显示 bug，通过设置 dominantBaseline: central 解决
 - TextNode getBackground 中 rectAttr 设置 y: y-1, 移除该设置

Author: boyongjiong

examples/engine-browser-examples/src/index.css

@@ -173,6 +173,7 @@ form[action$='destroy'] button {
 
 #sidebar .nav-title {
   font-weight: bold;
+  padding: 0 0.5rem;
 }
 
 #search-spinner {
@@ -233,7 +234,7 @@ i {
   gap: 1rem;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 0 0.5rem 0.2rem;
+  padding: 0.5rem;
   overflow: hidden;
   color: inherit;
 

examples/engine-browser-examples/src/pages/graph/index.less

@@ -9,6 +9,11 @@
     outline: none;
   }
 
+  .dnd-item {
+    cursor: grab;
+    user-select: none;
+  }
+
   .rect {
     width: 50px;
     height: 50px;

examples/engine-browser-examples/src/pages/graph/index.tsx

@@ -10,7 +10,7 @@ import { animation, connection } from './edges'
 import GraphConfigData = LogicFlow.GraphConfigData
 import './index.less'
 
-const config: Partial<LogicFlow.Options> = {
+const defaultConfig: Partial<LogicFlow.Options> = {
   isSilentMode: false,
   stopScrollGraph: true,
   stopZoomGraph: true,
@@ -38,7 +38,7 @@ const config: Partial<LogicFlow.Options> = {
     },
     text: {
       color: '#b85450',
-      fontSize: 12,
+      fontSize: 14,
     },
   },
 }
@@ -131,7 +131,7 @@ export default function BasicNode() {
   useEffect(() => {
     if (!lfRef.current) {
       const lf = new LogicFlow({
-        ...config,
+        ...defaultConfig,
         container: containerRef.current as HTMLElement,
         // hideAnchors: true,
         // width: 1200,
@@ -175,15 +175,18 @@ export default function BasicNode() {
         background: {
           color: '#FFFFFF',
         },
-        grid: true,
+        // grid: true,
+        grid: {
+          size: 20,
+        },
         edgeTextDraggable: true,
         edgeType: 'bezier',
-        style: {
-          inputText: {
-            background: 'black',
-            color: 'white',
-          },
-        },
+        // style: {
+        //   inputText: {
+        //     background: 'black',
+        //     color: 'white',
+        //   },
+        // },
         // 全局自定义id
         // edgeGenerator: (sourceNode, targetNode, currentEdge) => {
         //   // 起始节点类型 rect 时使用 自定义的边 custom-edge
@@ -306,19 +309,19 @@ export default function BasicNode() {
   const handleDragRect = () => {
     lfRef?.current?.dnd.startDrag({
       type: 'rect',
-      text: 'xxxxx',
+      text: 'rect',
     })
   }
   const handleDragCircle = () => {
     lfRef?.current?.dnd.startDrag({
       type: 'circle',
-      r: 25,
+      text: 'circle',
     })
   }
   const handleDragText = () => {
     lfRef?.current?.dnd.startDrag({
       type: 'text',
-      text: '文本',
+      text: '文本节点',
     })
   }
 
@@ -458,9 +461,9 @@ export default function BasicNode() {
         节点面板
       </Divider>
       <Flex wrap="wrap" gap="small" justify="center" align="center">
-        <div className="rect" onMouseDown={handleDragRect} />
-        <div className="circle" onMouseDown={handleDragCircle} />
-        <div className="text" onMouseDown={handleDragText}>
+        <div className="rect dnd-item" onMouseDown={handleDragRect} />
+        <div className="circle dnd-item" onMouseDown={handleDragCircle} />
+        <div className="text dnd-item" onMouseDown={handleDragText}>
           文本
         </div>
       </Flex>

examples/engine-browser-examples/src/routes/root.tsx

@@ -4,14 +4,14 @@ export default function Root() {
   return (
     <>
       <div id="sidebar">
-        <h1>LogicFlow & Engine Demos</h1>
+        <h1>LogicFlow Demos</h1>
         <div>
           {/* TODO: 完成路由检索功能 */}
           <form id="search-form" role="search">
             <input
               id="q"
               aria-label="Search contacts"
-              placeholder="Press Enter for Search"
+              placeholder="Press Enter to Search"
               type="search"
               name="q"
             />
@@ -21,17 +21,17 @@ export default function Root() {
         </div>
         <nav>
           <ul>
-            <div className="nav-title">Graph</div>
+            <div className="nav-title">LogicFlow</div>
             <li>
-              <a href={`/graph/get-started`}>Get Started</a>
+              <a href={`/graph/get-started`}>Graph</a>
             </li>
             <div className="nav-title">Extension</div>
             <li>
               <a href={`/extension/bpmn`}>BPMN</a>
             </li>
             <div className="nav-title">Engine</div>
             <li>
-              <a href={`/engine/get-started`}>Start Engine</a>
+              <a href={`/engine/get-started`}>Get Started</a>
               <a href={`/engine/recorder`}>Recorder</a>
             </li>
           </ul>

packages/core/src/LogicFlow.tsx

@@ -1566,6 +1566,8 @@ export namespace LogicFlow {
     radius?: number
     rx?: number
     ry?: number
+    width?: number
+    height?: number
     path?: string
     [key: string]: unknown
   }

packages/core/src/index.ts

@@ -16,6 +16,6 @@ export * from './options'
 export * from './keyboard'
 export { ElementState, ModelType, ElementType, EventType } from './constant'
 
-export { formateAnchorConnectValidateData } from './util/node'
+export { formatAnchorConnectValidateData } from './util/node'
 
 export default LogicFlow

packages/core/src/model/node/CircleNodeModel.ts

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

packages/core/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,
+  }
+}

packages/core/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,26 +445,45 @@ 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,
   rowsLength,
   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) => {
@@ -472,13 +492,14 @@ export const getHtmlTextHeight = ({
       dom.appendChild(rowDom)
     })
   } else {
-    dom.textContent = rows[0]
+    dom.textContent = `${rows[0]}`
   }
   document.body.appendChild(dom)
   const height = dom.clientHeight
   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') {

packages/core/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 } =

packages/core/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>

packages/core/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 } =