React-diagrams: Clear canvas ?

[PikkaPikkachu]

Hi,

I was wondering as to how I could clear the entire canvas through code? Is there a function for that?

Thanks.

[jackietieu]

Don't know if there's one function to clear the entire canvas, maybe someone can chime in. For now, check out the source code for DiagramModel.ts. You can find all of the links/nodes and remove all of them iteratively. You would also have to remove any listeners on the DiagramModel by setting it to null if desired.

    removeLink(link: LinkModel | string) {
        link = this.getLink(link);
        delete this.links[link.getID()];
        this.iterateListeners((listener, event) => {
            if (listener.linksUpdated) {
                listener.linksUpdated({ ...event, link: link as LinkModel, isCreated: false });
            }
        });
    }

    removeNode(node: NodeModel | string) {
        node = this.getNode(node);
        delete this.nodes[node.getID()];
        this.iterateListeners((listener, event) => {
            if (listener.nodesUpdated) {
                listener.nodesUpdated({ ...event, node: node as NodeModel, isCreated: false });
            }
        });
    }

    getLinks(): { [s: string]: LinkModel } {
        return this.links;
    }

    getNodes(): { [s: string]: NodeModel } {
        return this.nodes;
    }

[dylanvorster]

What you would do, is pass a new Model in to the engine.

https://github.com/projectstorm/react-diagrams/blob/2df09edb7e5716a68884ed6d68faa78068003f52/src/DiagramEngine.ts#L149

https://github.com/projectstorm/react-diagrams/blob/2df09edb7e5716a68884ed6d68faa78068003f52/src/DiagramEngine.ts#L60