---
nav: Guide
group:
title: Intermediate
order: 2
title: Node
order: 0
toc: content
---
## Connection rules
At some point, we may need to control how edges are connected, for example, the start node can't be
connected by other nodes, the end node can't be connected to other nodes, the user node must be
followed by a judgement node, etc. To achieve this effect, we need to set the following two
attributes for the node.
- `sourceRules` - check rules when the node is used as the start node (source) of an edge
- `targetRules` - check rules for when the node is the target of an edge.
Take a square for example, at the edge we want its next node to be only a circle node, then we
should add a check rule for `square` as a `source` node.
```tsx | pure
import { RectNode, RectNodeModel } from '@logicflow/core'
class SquareModel extends RectNodeModel {
initNodeData(data) {
super.initNodeData(data)
const circleOnlyAsTarget = {
message: 'The next node of a square node can only be a round node',
validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
return targetNode.type === 'circle'
},
}
this.sourceRules.push(circleOnlyAsTarget)
}
}
```
In the above example, we added a checking rule to the `sourceRules` property of `model`, which is an
object for which we need to provide the `message` and `validate` properties.
The `message` attribute is the error message that is thrown when the check rule is not satisfied,
and `validate` is the callback function that is passed in to check the rule. The `validate` method
takes two arguments, the source and the target of the edge, and we can decide whether to pass
the check based on the information in the arguments, and its return value is a boolean.
:::warning
When we do an edge operation on the panel, LogicFlow checks each rule and will only connect if **all
** of them pass.
:::
When edging, LogicFlow throws the event `connection:not-allowed` externally if a custom rule is not
passed after the mouse is released (the `validate` method returns `false`).
```tsx | pure
lf.on('connection:not-allowed', (msg) => {
console.log(msg)
});
```
Here is an example to show the connection state by **setting the style of the node in different
states** 👇.
In the node model, there is a state attribute, when the node connection rule check does not pass,
the value of the state attribute is 5. We can use this attribute to realize the effect of the hint
that the connection is a node.
code expansion
```tsx | pure
import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
import { createApp, ref, h } from 'vue';
import VueNode from './VueNode.vue';
class VueHtmlNode extends HtmlNode {
constructor(props) {
super(props)
this.isMounted = false
this.r = h(VueNode, {
properties: props.model.getProperties(),
text: props.model.inputData,
})
this.app = createApp({
render: () => this.r
})
}
setHtml(rootEl) {
if (!this.isMounted) {
this.isMounted = true
const node = document.createElement('div')
rootEl.appendChild(node)
this.app.mount(node)
} else {
this.r.component.props.properties = this.props.model.getProperties()
}
}
}
class VueHtmlNodeModel extends HtmlNodeModel {
setAttributes() {
this.width = 300;
this.height = 100;
this.text.editable = false;
this.inputData = this.text.value
}
getOutlineStyle() {
const style = super.getOutlineStyle();
style.stroke = 'none';
style.hover.stroke = 'none';
return style;
}
}
export default {
type: 'vue-html',
model: VueHtmlNodeModel,
view: VueHtmlNode
}
```
## External Communication
When there is a need for a custom node to interact with the outside world, such as clicking a button
on a custom HTML node that triggers an external method, you can use LogicFlow's custom event
mechanism to do so.
```tsx | pure
// view.js
class VueHtmlNode extends HtmlNode {
constructor(props) {
super(props);
this.isMounted = false;
this.r = h(VueNode, {
properties: props.model.getProperties(),
text: props.model.inputData,
onBtnClick: (i) => {
props.graphModel.eventCenter.emit("custom:onBtnClick", i);
},
});
this.app = createApp({
render: () => this.r,
});
}
setHtml(rootEl) {
if (!this.isMounted) {
this.isMounted = true;
const node = document.createElement("div");
rootEl.appendChild(node);
this.app.mount(node);
} else {
this.r.component.props.properties = this.props.model.getProperties();
}
}
getText() {
return null;
}
}
// flow.js
const lf = new LogicFlow();
lf.render();
lf.on("custom:onBtnClick", () => {});
```
:::success{title=tip}
If a scheme is expected to be passed externally for use in a custom node. Since `lf` instances are
not directly accessible in the custom node, binding a method directly to lf is not supported. But
the custom node has access to the model object of the entire graph, `graphModel`, so it is possible
to bind this method to `graphModel`. In addition, `lf` has basically all the built-in methods
in `graphModel`, so you can just use `graphModel` to get the flowchart related data when developing
a custom node.
:::
## Updates
HTML nodes currently trigger node updates by modifying properties.
```tsx | pure
class CustomComponent extends Component {
// ...
shouldUpdate() {
if (this.preProperties && this.preProperties === this.currentProperties) return
this.preProperties = this.currentProperties
return true
}
componentDidMount() {
if (this.shouldUpdate()) {
this.setHtml(this.rootEl)
}
}
componentDidUpdate() {
if (this.shouldUpdate()) {
this.setHtml(this.rootEl)
}
}
//..
}
```
If you expect changes to other content to trigger node updates, you can override shouldUpdate
（related issue. [#1208](https://github.com/didi/LogicFlow/issues/1208)）
```tsx | pure
class CustomComponent extends Component {
shouldUpdate() {
if (this.preProperties &&
this.preProperties === this.currentProperties &&
this.preText === this.props.model.text.value
) {
return
}
this.preProperties = this.currentProperties
this.preText = this.props.model.text.value
return true;
}
}
```