@logicflow/core 2.2.1 → 2.2.2

package/dist/docs/tutorial/basic/node.en.md

@@ -0,0 +1,358 @@
+---
+nav: Guide
+group:
+  title: Basics
+  order: 1
+title: Node
+order: 1
+toc: content
+---
+
+LogicFlow has built-in some basic nodes, and developers can, in practical application scenarios,
+define nodes that fit their business logic based on these basic nodes.
+
+## Understanding Basic Nodes
+
+LogicFlow is a flowchart editing framework based on SVG. Therefore, our nodes and connections are
+basic SVG shapes. Modifying the style of LogicFlow nodes is essentially modifying the SVG basic
+shapes. There are seven types of basic nodes built into LogicFlow, namely:
+
+1. <a href="https://developer.mozilla.org/en/docs/Web/SVG/Element/rect" target="_blank">rect</a>
+2. <a href="https://developer.mozilla.org/en/docs/Web/SVG/Element/circle" target="_blank">circle</a>
+3. <a href="https://developer.mozilla.org/en/docs/Web/SVG/Element/ellipse" target="_blank">
+   ellipse</a>
+4. <a href="https://developer.mozilla.org/en/docs/Web/SVG/Element/polygon"    target="_blank">
+   polygon</a>
+5. `diamond`
+6. <a href="https://developer.mozilla.org/en/docs/Web/SVG/Element/text" target="_blank">text</a>
+7. `html`
+
+<code id="node-shapes" src="../../../src/tutorial/basic/node/shapes"></code>
+
+The basic nodes in LogicFlow are relatively simple, but in business scenarios, there may be various
+requirements for the appearance of nodes. LogicFlow provides a powerful custom node feature that
+supports developers in creating various custom nodes. The following is an introduction to custom
+nodes based on inheritance.
+
+## Custom nodes
+
+LogicFlow implements custom nodes and edges based on inheritance. Developers can inherit the
+built-in nodes of LogicFlow and then use
+object-oriented <a href="https://baike.baidu.com/item/%E9%87%8D%E5%86%99/9355942?fr=aladdin" target="_blanl">overriding</a> 
+mechanisms. By overriding methods related to node styles, developers can achieve the effect of
+customizing node styles.
+
+![logicflow-1.0-2.png](../../../public/logicflow-8-7.jpg)
+
+:::warning
+LogicFlow recommends that in practical application scenarios, all nodes use custom nodes, and the
+node types are defined with names that align with the project's business meaning, rather than using
+shapes like circles or rectangles that only represent appearance.
+:::
+
+### Node `model` and `view`
+
+`model`: Data layer containing various styles (such as borders, colors), shapes (dimensions, vertex
+positions), and business properties of nodes.
+
+`view`: View layer controlling the final rendering effects of nodes. By modifying the `model`,
+custom nodes can be created, while more complex SVG elements can be customized on the `view`.
+
+LogicFlow is based on the MVVM pattern. When customizing a node, we can redefine its `model`
+and `view`. This involves overriding methods in the `model` to obtain style-related information and
+overriding `getShape` in the `view` to define complex node appearances.
+
+Here's an example of customizing a node by inheriting and overriding the `model`. Customizing nodes
+can be achieved using different approaches 😊.
+
+<code id="node-custom" src="../../../src/tutorial/basic/node/custom"></code>
+
+[lf.register](../../api/logicflow-instance/register.en.md#register): Register custom nodes. After registration,
+custom nodes can be used.
+
+:::info
+
+LogicFlow in order to develop the development experience and now front-end popular development
+experience alignment, but also in order to better understand the code level, so that more people can
+participate in, we based on preact, mobx to MVVM mode development. If you are familiar with react
+development, you can directly read our source code, you can find the whole project to read the
+difficulty, and you develop your own project is about the same. **We welcome you to join us.**
+
+:::
+
+There are 7 kinds of base nodes in LogicFlow, you can choose any one of them to inherit when you
+customize the node, and then take a name that meets your business meaning. Take the scalable node
+provided in @logicflow/extension as an example: LogicFlow base node does not support node scaling,
+so LogicFlow encapsulates the logic of node scaling based on the base node in the extension package,
+and then releases it. So LogicFlow encapsulates the logic of node scaling based on the base node in
+the extension package and releases it.
+
+```tsx | pure
+import { RectResize } from "@logicflow/extension";
+
+class CustomNodeModel extends RectResize.model {
+}
+
+class CustomNode extends RectResize.view {
+}
+```
+
+### Customizing node `model`
+
+LogicFlow categorizes custom node appearance into two ways: `custom node style attribute`
+and `custom node shape attribute`. For more details on how to define them,
+see [NodeModelApi](../../api/runtime-model/nodeModel.en.md)。
+
+#### 1. style attributes
+
+In LogicFlow, the appearance attributes represent the control of the node's `border`, `color`, and
+other appearance-oriented attributes. These properties can be controlled directly
+through [theme-configuration](../../api/logicflow-instance/theme.en.md). Customizing node styles can be seen as
+redefining the theme based on the current node type.
+
+For example, if all `rect` nodes in the theme have their border color defined as red `stroke: red`,
+then you can redefine `UserTask` to have a blue `stroke: blue` border when customizing the
+node `UserTask`. For more granular node style control,
+see [API Style Attributes](../../api/runtime-model/nodeModel.en.md#style-attributes).
+
+```tsx | pure
+class UserTaskModel extends RectNodeModel {
+  getNodeStyle() {
+    const style = super.getNodeStyle();
+    style.stroke = 'blue';
+    return style;
+  }
+}
+```
+
+#### 2. Shape attributes
+
+In LogicFlow, shape properties refer to attributes that control the final appearance of nodes, such
+as `width` and `height` for dimensions, `radius` for rounded rectangles, `r` for circles (radius),
+and `points` for polygons (vertices). These properties are crucial as LogicFlow calculates anchor
+points for nodes and start/end points for connections based on them. Customizing shape properties
+requires modification within the `setAttributes` method or `initNodeData` method.
+
+LogicFlow has some shape attributes specific to each base node.
+See [API Shape Attributes](../../api/runtime-model/nodeModel.en.md#shape-attributes) for details.
+
+```tsx | pure
+class customRectModel extends RectNodeModel {
+  initNodeData(data) {
+    super.initNodeData(data);
+    this.width = 200;
+    this.height = 80;
+  }
+
+  // or
+  setAttributes() {
+    this.width = 200;
+    this.height = 80;
+  }
+}
+```
+
+:::warning
+
+If you don't set the shape attribute in `model`, but directly define the shape attribute such as
+width and height of the generated graphic directly in `view`, the anchor position and outline size
+will be incorrect. Also, the position of the connecting lines may be misplaced.
+
+:::
+
+#### 3. Customizing node styles based on properties attributes
+
+In the previous LogicFlow example, it was mentioned that both nodes and edges in the `graph data`
+retain a properties field. This field allows developers not only to modify elements' `styles`
+and `shapes`, but also to store their own `business` attributes. Therefore, when customizing node
+styles, developers can use properties from
+the [properties](../../api/runtime-model/nodeModel.en.md#data-properties) to control how nodes display different
+styles.
+
+<code id="custom-rect" src="../../../src/tutorial/basic/node/properties"></code>
+
+:::info
+
+If you don't understand why `this.properties` prints out as a Proxy object, you can't see the
+properties. Please check the <a href="https://github.com/didi/LogicFlow/issues/530" target="_blank">issue</a>, Printing a Proxy
+object using `{ ...this.properties }`.
+
+:::
+
+### Customizing node `view`
+
+LogicFlow can define the basic shape, style and other attributes of a node when customizing the
+node's `model`. However, when you need a more complex node, you can use the custom node `view`
+provided by LogicFlow.
+
+The following is an example of a node `view`. Click `node1` several times to try it out.
+
+<code id="node-custom-view" src="../../../src/tutorial/basic/node/custom-view"></code>
+
+Here the `h function` is used for the return of `Shape`. The `h` method is a rendering function
+exposed by LogicFlow, and its usage is the same as `react` and `vue`'
+s <a href="https://v2.vuejs.org/v2/guide/render-function#createElement-Arguments" target="_blank">createElement</a> .
+But here we need to create `SVG` tags, so some basic knowledge of SVG is required.
+
+To give a few simple examples.
+
+```tsx | pure
+h(nodeName, attributes, [...children])
+
+// <text x="100" y="100">Text content</text>
+h('text', { x: 100, y: 100 }, ['Text content'])
+
+/**
+ * <g>
+ *   <rect x="100" y="100" stroke="#000000" strokeDasharray="3 3"></rect>
+ *   <text x="100" y="100">Text content</text>
+ * </g>
+ */
+
+h('g', {}, [
+  h('rect', { x: 100, y: 100, stroke: "#000000", strokeDasharray: "3 3" }),
+  h('text', { x: 100, y: 100 }, ['Text content'])
+])
+```
+
+#### The `getShape` method
+
+This method defines the final rendered shape, and LogicFlow internally inserts its return into the
+svg DOM. Developers do not necessarily need to override this method, but should only use it if they
+want to change the svg DOM of the final rendered shape. In the example above, the final rendered svg
+DOM of the `rect` node is just a rectangle. But when we want to add an icon to it, we need to change
+the svg DOM of the final rendered graphic, which is done by overriding `getShape`.
+
+LogicFlow defines the appearance of a node in three ways, namely **theme**, **custom node model**, *
+*custom node view**. These three approaches are prioritized
+as `theme < custom node mod < custom node view`.Their differences：
+
+- Theme: defines common styles for all nodes of this base type, e.g. defines border color, width,
+  etc. for all `rect` nodes.
+- Custom node model: Defines the data for this registered type of node, storing and managing
+  attributes such as style, shape, and business-related information of the node.
+- Custom node view: Defines the `SVG DOM` for this registered type of node, visualizing the data
+  from the `model` based on its attributes, rendering the information into a graphical form visible
+  to the user.
+
+:::warning
+Although `custom node view` has the highest priority and the most complete function, theoretically
+we can realize any effect we want through `custom node view`, but there are still some limitations
+in this way.<br>
+
+1. The shape attributes of the final graphic generated by the `custom node view` must be the same as
+   the shape attributes in the `model`, because the anchor points and borders of the nodes are
+   generated based on the `width` and `height` of the node's model.<br>
+2. `Custom node view` must be consistent with the inherited base shape, not `rect` which is
+   inherited, but the final shape returned by getShape will be round. This is because LogicFlow will
+   base on the base graph for adjusting the lines on the nodes, generating anchor points, and so on.
+   :::
+
+#### Some thoughts 🤔️
+
+##### 1. Why the `x`,`y` of `rect` is not `x`,`y` directly from `model`?
+
+In all the base nodes of LogicFlow, `x`,`y` inside `model` are uniformly representing the center
+point. However, the `getShape` method gives us a way to generate the svg dom directly, and in the
+svg, there is a difference in controlling the position of the shape:
+
+- `rect`: the position of the shape is represented by `x`, `y`, but it is represented by the
+  coordinates of the top left corner of the shape. So generally the upper-left corner coordinates
+  are calculated by centering and subtracting half the width and height of the node.
+
+```tsx | pure
+const { x, y, width, height, radius } = this.props.model;
+// svg dom <rect x="100" y="100" width="100" height="80">
+h("rect", {
+  ...style,
+  x: x - width / 2,
+  y: y - height / 2,
+  rx: radius, // Notice it's rx and not radius.
+  ry: radius,
+  width,
+  height
+})
+```
+
+- `circle` and `ellipse`: indicate the position of the figure by `cx`, `cy`, meaning the coordinates
+  of the center point.
+
+```tsx | pure
+const { x, y, r } = this.props.model;
+// svg dom <circle cx="100", cy="100", r="20">
+h("circle", {
+  ...style,
+  r,
+  cx: x,
+  cy: y,
+})
+```
+
+```tsx
+const { x, y, rx, ry } = this.props.model;
+// svg dom <ellipse cx="100", cy="100", rx="20" ry="10">
+h("ellipse", {
+  ...style,
+  cx: x,
+  cy: y,
+  rx,
+  ry
+})
+```
+
+- `polygon`: All vertex coordinates already contain positions
+
+```tsx | pure
+const { x, y, points } = this.props.model;
+const pointStr = points.map((point) => {
+  return `${point[0] + x}, ${point[1] + y}`
+}).join(" ");
+// svg dom <polygon points="100,10 250,150 200,110" >
+h("polygon", {
+  ...style,
+  points: pointStr,
+})
+```
+
+:::info{title=Customize the view of the rectangle with the radius setting.}
+In `model`, `radius` is the shape attribute of the rectangle node. But when customizing `view`, you
+need to note that svg doesn't use `radius` to set the rounded corners of the rectangle,
+but <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx" target="_blank">rx</a>, ry. So when
+customizing `view`'s rectangle, you need to assign the value of `radius` in the model to `rx`
+and `ry`. you need to assign `radius` to `rx` and `ry` in the model when customizing the rectangle
+of `view`, otherwise the rounded corners won't take effect.
+:::
+
+##### 2. How does props work?
+
+LogicFlow is developed based on `preact`, when we customize the node view, we can get the data
+passed from the parent component through `this.props`. The `this.props` object contains two
+properties, they are.
+
+- `model`: represents the model of the custom node
+- [graphModel](../../api/runtime-model/graphModel.en.md): the model for the entire graph of logicflow
+
+##### 3. How to get the path of an icon?
+
+Generally, for icons we can look for the UI or go to <a href="https://www.iconfont.cn/?lang=en-us" target="_blank">iconfont.co.uk</a> to
+get a file in svg format. Then open it as text in IDE and format it to see the code. The code is
+usually an outermost svg tag with one or more paths inside. at this point, we can just use the `h`
+method mentioned earlier to implement the code in the svg file.
+
+The svg tag typically includes the following attributes:
+
+- `viewBox`: The <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox" target="_blank">viewBox</a>
+  attribute allows a given set of graphic stretches to be specified to fit a particular container
+  element. It is generally sufficient to copy the value of the `viewBox` attribute from the svg tag.
+- `width` and `height`: This doesn't need to use the `width` and `height` on the svg tag, just write
+  the width and height you expect.
+
+The path tag attribute:
+
+- `d`: This attribute defines a path. You can copy the svg code directly, you don't need to worry
+  about the meaning of d.
+- `fill`: fill color of the path, generally consistent with the node's border color, but can also be
+  customized according to business needs.
+
+This chapter introduces the basic nodes here, if there are more needs for the node please move to
+the [advanced-node](../advanced/node.en.md) to view.

package/dist/docs/tutorial/basic/node.zh.md

@@ -0,0 +1,318 @@
+---
+nav: 指南
+group:
+  title: 基础
+  order: 1
+title: 节点
+order: 1
+toc: content
+---
+
+本页从内置节点出发，介绍如何定义符合业务语义的自定义节点。更复杂的连接规则、锚点和框架节点方案，会在 [进阶节点](../advanced/node.zh.md) 中继续展开。
+
+::::info{title=阅读提示}
+- 适合已经跑通过 [快速上手](../get-started.zh.md) 和 [实例与图数据](class.zh.md) 的读者
+- 前置知识：知道 `graphData`、`render` 和基础节点类型
+- 本页不展开连接规则、锚点、React/Vue 节点方案，这些内容请继续阅读 [进阶节点](../advanced/node.zh.md)
+- 相关 API：[`nodeModel`](../../api/runtime-model/nodeModel.zh.md)、[`graphModel`](../../api/runtime-model/graphModel.zh.md)、[`主题`](../../api/logicflow-instance/theme.zh.md)
+::::
+
+LogicFlow 内置了一些基础节点，开发者在实际应用场景中，可以基于这些基础节点，定义符合自己业务逻辑的节点。
+
+## 认识基础节点
+
+LogicFlow是基于svg做的流程图编辑框架，所以我们的节点和连线都是svg基本形状，对LogicFlow节点样式的修改，也就是对svg基本形状的修改。LogicFlow内部存在7种基础节点，分别为：
+
+1. 矩形 --- <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/rect" target="_blank">rect</a>
+2. 圆形 --- <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/circle" target="_blank">circle</a>
+3. 椭圆 --- <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/ellipse" target="_blank">ellipse</a>
+4. 多边形 --- <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/polygon" target="_blank">polygon</a>
+5. 菱形 --- `diamond`（基于 <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/polygon" target="_blank">polygon</a>）
+6. 文本 --- <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/text" target="_blank">text</a>
+7. HTML --- `html`
+
+<code id="node-shapes" src="../../../src/tutorial/basic/node/shapes"></code>
+
+LogicFlow的基础节点是比较简单的，但是在业务中对节点外观要求可能有各种情况。LogicFlow提供了非常强大的自定义节点功能，可以支持开发者自定义各种节点。下面是基于继承的自定义节点介绍。
+
+## 自定义节点
+
+LogicFlow是基于继承来实现自定义节点、边。开发者可以继承LogicFlow内置的节点，然后利用面向对象的机制<a href="https://baike.baidu.com/item/%E9%87%8D%E5%86%99/9355942?fr=aladdin" target="_blank">
+重写</a>
+
+![logicflow-1.0-2.png](../../../public/logicflow-8-7.jpg)
+
+:::warning{title=注意}
+LogicFlow推荐在实际应用场景中，所有的节点都使用自定义节点，将节点的type定义为符合项目业务意义的名称。而不是使用圆形、矩形这种仅表示外观的节点。
+:::
+
+### 节点`model`和`view`
+
+`model`: 数据层，包含节点各种样式（边框、颜色）、形状（宽高、顶点位置）、业务属性等。
+
+`view`: 视图层，控制节点的最终渲染效果，通过改变`model`就可以满足自定义节点，同时可以在`view`
+上定制更加复杂的`svg`元素。
+
+LogicFlow基于MVVM模式实现的，在自定义一个节点的时候，我们可以重新定义节点的`model`和`view`
+，通过重写定义在`model`上获取样式相关的方法和重写`view`上的`getShape`来定义复杂的节点外观。
+
+这是一个基于继承内置节点并重写`model`的自定义节点例子👇，节点自定义采用了不同的方式实现😊。
+
+<code id="node-custom" src="../../../src/tutorial/basic/node/custom"></code>
+
+[lf.register](../../api/logicflow-instance/register.zh.md#register)：注册自定义节点，注册后才能使用自定义节点。
+
+:::info{title=提示}
+
+LogicFlow为了开发的时候将开发体验和现在前端流行的开发体验对齐，也为了在代码层面更好的理解，让更多的人可以参与进来，我们基于preact、mobx以MVVM模式进行开发。如果大家熟悉react开发的话，可以直接阅读我们的源码，你们可以发现整个项目阅读起来难度和你自己开发的项目差不多。
+**我们欢迎大家一起参与进来。**
+
+:::
+
+LogicFlow 内部存在 7 种基础节点, 自定义节点的时候可以基于需要选择任意一种来继承,
+然后取一个符合自己业务意义的名字。以@logicflow/extension中提供的可缩放节点为例：LogicFlow
+基础节点不支持节点缩放，于是 LogicFlow
+在extension包中，基于基础节点，封装了对节点缩放的逻辑，然后发布出去。这样开发者可以直接基于extension中的可缩放节点进行自定义。
+
+```tsx | pure
+import { RectResize } from "@logicflow/extension";
+class CustomNodeModel extends RectResize.model {}
+class CustomNode extends RectResize.view {}
+```
+
+### 自定义节点`model`
+
+LogicFlow把自定义节点外观分为了`自定义节点样式属性`和`自定义节点形状属性`
+两种方式。更多详细定义方法，请查看[NodeModel](../../api/runtime-model/nodeModel.zh.md)。
+
+#### 1. 样式属性
+
+在LogicFlow中，外观属性表示控制着节点`边框`、`颜色`
+这类偏外观的属性。这些属性是可以直接通过[主题配置](../../api/logicflow-instance/theme.zh.md)
+来控制。自定义节点样式可以看做在主题的基础上基于当前节点的类型进行再次定义。
+
+例如：在主题中对所有`rect`节点都定义其边框颜色为红色`stroke: red`，那么可以在自定义节点`UserTask`
+的时候，重新定义`UserTask`边框为蓝色`stroke: blue`
+。更细粒度的节点样式控制方法，详情见[API 样式属性](../../api/runtime-model/nodeModel.zh.md#样式属性)。
+
+```tsx | pure
+class UserTaskModel extends RectNodeModel {
+  getNodeStyle() {
+    const style = super.getNodeStyle();
+    style.stroke = 'blue';
+    return style;
+  }
+}
+```
+
+#### 2. 形状属性
+
+在 LogicFlow 中，形状属性表示节点的宽 `width`、高 `height`，矩形的圆角 `radius`、圆形的半径 `r`、
+多边形的顶点`points`
+等这些控制着节点最终形状的属性。因为LogicFlow在计算节点的锚点、连线的起点终点的时候，会基于形状属性进行计算。对于形状属性的自定义，需要在`setAttributes`
+方法或`initNodeData`方法中进行。
+
+LogicFlow对于不同的基础节点，存在一些各基础节点自己特有的形状属性。详情见[API 形状属性](../../api/runtime-model/nodeModel.zh.md#形状属性)。
+
+```tsx | pure
+class customRectModel extends RectNodeModel {
+  initNodeData(data) {
+    super.initNodeData(data);
+    this.width = 200;
+    this.height = 80;
+    this.radius = 20; // 矩形特有
+  }
+  // or
+  setAttributes() {
+    this.width = 200;
+    this.height = 80;
+    this.radius = 20; // 矩形特有
+  }
+}
+```
+
+:::warning{title=注意}
+
+如果不在`model`中设置形状属性，而是直接在`view`
+中直接定义生成图形的宽高这种形状属性，会出现锚点位置、outline大小不正确的情况。同时，连线的位置也可能会出现错乱。
+
+:::
+
+#### 3. 基于properties属性自定义节点样式
+
+在上一节LogicFlow的实例中的`图数据`
+里提到，不论是节点还是边，LogicFlow都保留了properties字段，不仅可以修改元素的`样式`、`形状`
+属性，可以用于给开发者存放自己的`业务`
+属性。所以在自定义节点样式的时候，可以基于 [properties](../../api/runtime-model/nodeModel.zh.md#数据属性) 
+中的属性来控制节点显示不同的样式。
+
+<code id="custom-rect" src="../../../src/tutorial/basic/node/properties"></code>
+
+:::info{title=提示}
+
+如果不了解为什么`this.properties`打印出来是一个Proxy对象,
+无法看到属性。请查看 <a href="https://github.com/didi/LogicFlow/issues/530" target="_blank">issue</a> ,
+可以使用`{ ...this.properties }`打印Proxy对象。
+
+:::
+
+### 自定义节点`view`
+
+LogicFlow在自定义节点的`model`
+时,可以定义节点的基础形状、样式等属性。但是当开发者需要一个更加复杂的节点时，可以使用LogicFlow提供的自定义节点`view`
+的方式：重写`getShape`方法。
+
+下面这个例子就是关于节点`view`的设置，多次点击`节点1`试试呢～
+
+<code id="node-custom-view" src="../../../src/tutorial/basic/node/custom-view"></code>
+
+这里对于`getShape`的方法返回用到了`h函数`。`h`函数是 LogicFlow 对外暴露的渲染函数，其用法与 `react`、`vue`
+的 <a href="https://v2.cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0" target="_blank">createElement</a>
+一致。但是这里我们需要创建的是 `svg` 标签，所以需要有一定的 `svg` 基础知识。
+
+如果你希望直接使用 React/Vue 组件渲染节点，建议优先阅读进阶教程中的
+[React 节点](../advanced/react.zh.md) 和 [Vue 节点](../advanced/vue.zh.md)。
+
+举几个简单的例子:
+
+```tsx | pure
+h(nodeName, attributes, [...children])
+
+// <text x="100" y="100">文本内容</text>
+h('text', { x: 100, y: 100 }, ['文本内容'])
+
+/**
+ * <g>
+ *   <rect x="100" y="100" stroke="#000000" strokeDasharray="3 3"></rect>
+ *   <text x="100" y="100">文本内容</text>
+ * </g>
+ */
+
+h('g',{}, [
+  h('rect', { x: 100, y: 100, stroke: "#000000", strokeDasharray: "3 3"}),
+  h('text', { x: 100, y: 100 }, ['文本内容'])
+])
+```
+
+#### `getShape`方法
+
+此方法作用就是定义最终渲染的图形, LogicFlow内部会将其返回的内容插入到svg
+DOM上。开发者不是一定需要重写此方法，只有在期望改变最终渲染图形svg
+DOM的时候才使用此方法。以上面是例子来说，`rect`节点最终渲染的svg
+DOM只是一个矩形。但是当我们想要在上面加一个图标的时候，那边必定需要修改到最终渲染图形的svg
+DOM了，这个时候就需要通过重写`getShape`来实现了。
+
+LogicFlow定义一个节点的外观有三种方式，分别为**主题**、**自定义节点model**、**自定义节点view**
+。这三种方式优先级为`主题 < 自定义节点model < 自定义节点view`。他们的差异是：
+
+- 主题：定义所有此基础类型节点的通用样式，例如定义所有`rect`节点的边框颜色、宽度等。
+- 自定义节点model：定义此注册类型节点的数据，存储和管理该节点样式、形状、业务等数据属性信息。
+- 自定义节点view: 定义此注册类型节点`svg dom`，基于 `model` 的属性可视化呈现，将 `model`
+  中的数据渲染成用户可以看到的图形化形式。
+
+:::warning{title=注意}
+虽然`自定义节点view`优先级最高，功能也最完善，理论上我们可以完全通过`自定义节点view`
+实现任何我们想要的效果，但是此方式还是存在一些限制。<br>
+
+1. `自定义节点view`最终生成的图形的形状属性必须和`model`
+   中形状属性的一致，因为节点的锚点、外边框都是基于节点model中的`width`和`height`生成。<br>
+2. `自定义节点view`最终生成的图形整体轮廓必须和继承的基础图形一致，不能继承`rect`
+   而在getShape的时候返回的最终图形轮廓变成了`circle`。因为LogicFlow对于节点上的连线调整、锚点生成等会基于基础图形进行计算。
+   :::
+
+#### 一些思考🤔️
+
+##### 1. 为什么`rect`的`x`,`y`不是直接从`model`中获取的`x`, `y`?
+
+在LogicFlow所有的基础节点中，`model`里面的`x`,`y`都是统一表示元素中心点坐标。`getShape`方法给我们提供直接生成svg
+dom的方式，但在svg中, 不同元素类型`x`,`y`表示的坐标位置不同：
+
+- `rect`: 通过`x`, `y`表示图形的位置，但是表示的是图形左上角坐标。 所以一般通过中心点，然后减去节点的宽高的一半计算出左上角坐标。
+
+```tsx | pure
+const { x, y, width, height, radius } = this.props.model
+// svg dom <rect x="100" y="100" width="100" height="80">
+h('rect', {
+  ...style,
+  x: x - width / 2,
+  y: y - height / 2,
+  rx: radius, // 注意这里是rx属性而不是radius
+  ry: radius,
+  width,
+  height,
+})
+```
+
+- `circle`和`ellipse`: 通过`cx`, `cy`表示图形的位置，含义为中心点的坐标，这里就不需要改变。
+
+```tsx | pure
+const { x, y, r } = this.props.model;
+// svg dom <circle cx="100", cy="100", r="20">
+h("circle", {
+  ...style,
+  r, // 半径保持不变
+  cx: x,
+  cy: y,
+})
+```
+
+```tsx | pure
+// 椭圆
+const { x, y, rx, ry } = this.props.model
+// svg dom <ellipse cx="100", cy="100", rx="20" ry="10">
+h('ellipse', {
+  ...style,
+  cx: x,
+  cy: y,
+  rx,
+  ry,
+})
+```
+
+- `polygon`: 所有的顶点坐标已包含位置。
+
+```tsx | pure
+const { x, y, points } = this.props.model
+const pointStr = points.map((point) => {
+  return `${point[0] + x}, ${point[1] + y}`
+}).join(' ')
+// svg dom <polygon points="100,10 250,150 200,110" >
+h('polygon', {
+  ...style,
+  points: pointStr,
+})
+```
+
+:::info{title=自定义矩形的view时radius设置}
+在`model`中，`radius`是矩形节点的形状属性。但是在自定义`view`
+时需要注意，svg里面设置矩形的圆角并不是用`radius`
+，而是使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/rx" target="_blank">rx</a> , ry。所以在自定义`view`
+的矩形时，需要将model中`radius`的赋值给`rx`和`ry`，否则圆角将不生效。
+:::
+
+##### 2. props怎么用？
+
+LogicFlow是基于`preact`开发的，我们自定义节点view的时候，可以通过`this.props`
+获取父组件传递过来的数据。`this.props`对象包含两个属性，分别为:
+
+- `model`: 表示自定义节点的model
+- [graphModel](../../api/runtime-model/graphModel.zh.md): 表示logicflow整个图的model
+
+##### 3. 图标的path如何获取？
+
+一般情况下，图标我们可以找UI或者去 <a href="https://www.iconfont.cn/" target="_blank">iconfont.cn</a> 
+获得一个svg格式的文件。然后再IDE中以文本的方式打开，然后格式化，就可以看到代码。代码中一般是最外层一个svg标签，里面是一个或者多个path。这个时候，我们使用前面提到的`h`
+方法来实现svg文件中的代码即可。
+
+svg标签一般包括如下属性：
+
+- `viewBox`: <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox" target="_blank">viewBox</a>
+  属性允许指定一个给定的一组图形伸展以适应特定的容器元素。一般把svg标签上的`viewBox`属性值复制过来就行。
+- `width`和`height`: 这个不需要使用svg标签上的`width`和`height`, 直接写成你期望的宽高就行。
+
+path标签属性：
+
+- `d`: 该属性定义了一个路径。直接复制svg代码过来即可, 不需要去关系d具体内容表示的含义。
+- `fill`: 路径的填充颜色, 一般和节点的边框颜色一致，但是也可以按照业务需求自定义。
+
+本章基础节点就介绍到这里，如果有对节点更多需求请移步至[进阶-节点](../advanced/node.zh.md)进行查看。