---
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. rect
2. circle
3.
ellipse
4.
polygon
5. `diamond`
6. text
7. `html`
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.
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
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
h("circle", {
...style,
r,
cx: x,
cy: y,
})
```
```tsx
const { x, y, rx, ry } = this.props.model;
// svg dom
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
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 rx, 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 iconfont.co.uk 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 viewBox
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.