feat: 🎸 remove elements(fake remove)

src/elements/link.ts

@@ -19,6 +19,8 @@ class Link extends Element {
     public $_source: Node
     public $_target: Node
 
+    public $_valid = 1
+
     private $_elementReservedKeys = new Set(['source', 'target', 'style'])
 
     public constructor(core, linkData: interfaces.LinkData) {
@@ -127,6 +129,15 @@ class Link extends Element {
             target: this.$_target
         }
     }
+
+    /**
+     * set valid flag for link
+     * @param value
+     */
+    public $_setValid(value: boolean) {
+        this.$_valid = value ? 1 : 0
+        this.$_core.$_renderer.linkManager.changeAttribute(this, 'valid')
+    }
 }
 
 export default Link

src/elements/node.ts

@@ -36,6 +36,8 @@ class Node extends Element {
         y: 0
     }
 
+    public $_valid = 1
+
     public $_dragstartCallbackSet: Set<(e: any) => void> = new Set()
     public $_draggingCallbackSet: Set<(e: any) => void> = new Set()
     public $_dragendCallbackSet: Set<(e: any) => void> = new Set()
@@ -182,6 +184,15 @@ class Node extends Element {
         return this.$_position
     }
 
+    /**
+     * set valid flag for node
+     * @param value
+     */
+    public $_setValid(value: boolean) {
+        this.$_valid = value ? 1 : 0
+        this.$_core.$_renderer.nodeManager.changeAttribute(this, 'valid')
+    }
+
     /**
      * set the id of this node.
      * it is only used for constructor

src/index.ts

@@ -121,6 +121,42 @@ export default class NetV {
         return this.addLinks([linkData])[0]
     }
 
+    /**
+     * remove given node
+     * fake remove, mark as invalid
+     * @param node
+     */
+    public removeNode(node: Node) {
+        node.$_setValid(false)
+        const links = node.neighborLinks()
+        links.forEach((l) => l.$_setValid(false))
+    }
+
+    /**
+     * remove given link
+     * @param link
+     */
+    public removeLink(link: Link) {
+        link.$_setValid(false)
+    }
+
+    /**
+     * remove given nodes
+     * fake remove, mark as invalid
+     * @param nodes
+     */
+    public removeNodes(nodes: Node[]) {
+        nodes.forEach((n) => this.removeNode(n))
+    }
+
+    /**
+     * remove given links
+     * @param links
+     */
+    public removeLinks(links: Link[]) {
+        links.forEach((l) => l.$_setValid(false))
+    }
+
     /**
      * @description initialize and add an array of nodes.
      * @param {interfaces.NodeData[]} nodesData: a data array of nodes tobe added

src/renderer/elements/render-element.ts

@@ -334,6 +334,10 @@ export class RenderElementManager {
             const style = link.$_style as interfaces.LinkStyle
 
             map = {
+                valid: {
+                    name: 'in_valid',
+                    value: [link.$_valid]
+                },
                 source: {
                     name: 'in_source',
                     value: [link.$_source.$_position.x, link.$_source.$_position.y]
@@ -373,6 +377,10 @@ export class RenderElementManager {
             const style = node.$_style as interfaces.NodeStyle
 
             map = {
+                valid: {
+                    name: 'in_valid',
+                    value: [node.$_valid]
+                },
                 position: {
                     name: 'in_position',
                     value: [node.$_position.x, node.$_position.y]

src/renderer/shaders/link-shader.ts

@@ -3,6 +3,7 @@ import { Shader } from '../utils'
 const vertex = new Shader()
 vertex.inputs = {
     inVertexPos: 'vec3',
+    in_valid: 'float',
     in_shape: 'float',
     in_source: 'vec2',
     in_target: 'vec2',
@@ -12,6 +13,7 @@ vertex.inputs = {
     in_strokeColor: 'vec4'
 }
 vertex.outputs = {
+    valid: 'float',
     shape: 'float',
     strokeColor: 'vec4',
     strokeWidth: 'float',
@@ -28,6 +30,7 @@ vertex.uniforms = {
 }
 vertex.main = [
     `void main(void) {`,
+    `    valid = in_valid;`,
     `    strokeColor = in_strokeColor;`,
     `    strokeWidth = in_strokeWidth;`,
     `    shape = in_shape;`,
@@ -127,6 +130,9 @@ fragment.methods = [
 
 fragment.main = [
     `void main(void) {`,
+    `  if (valid == 0.0) {`,
+    `    discard;`,
+    `  }`,
     `  if (shape == 0.) {`,
     `    // line`,
     `    fragmentColor = vec4(strokeColor.rgb * strokeColor.a, strokeColor.a);`,

src/renderer/shaders/node-shader.ts

@@ -3,6 +3,7 @@ import { Shader } from '../utils'
 const vertex = new Shader()
 vertex.inputs = {
     inVertexPos: 'vec3',
+    in_valid: 'float',
     in_shape: 'float',
     in_position: 'vec2',
     in_offset: 'vec2',
@@ -18,6 +19,7 @@ vertex.inputs = {
     in_strokeColor: 'vec4'
 }
 vertex.outputs = {
+    valid: 'float',
     position: 'vec2',
     shape: 'float',
     size: 'vec2', // width & height
@@ -66,6 +68,7 @@ vertex.methods = [
 ]
 vertex.main = [
     `void main(void) {`,
+    `   valid = in_valid;`,
     `   r = in_r;`,
     `   size = in_size;`,
     `   float width = size.x;`,
@@ -331,6 +334,9 @@ fragment.methods = [
 ]
 fragment.main = [
     `void main(void) {`,
+    `    if (valid == 0.0) {`,
+    `       discard;`,
+    `    }`,
     `    if (shape == 0.0) {`,
     `        // circle shape`,
     `        // border check, using 0.5(center of smoothstep)`,