Import Issue

[vivianspencer]

I'm having trouble getting the import function to work

Currently I'm exporting the data and saving to a database so it can be loaded again when visiting the diagram.

The diagram is successfully loading the exported data if I use

this.editor.drawflow = JSON.parse(this.campaign.canvas);

But gives me an error if I use:

this.editor.import(JSON.parse(this.campaign.canvas));

The error is:

vue.runtime.esm.js:1897 TypeError: Cannot set property 'innerHTML' of null at i.clear (drawflow.min.js:1) at import (drawflow.min.js:1) at VueComponent.mounted (Canvas.vue:174) at invokeWithErrorHandling (vue.runtime.esm.js:1863) at callHook (vue.runtime.esm.js:4235) at Object.insert (vue.runtime.esm.js:3158) at invokeInsertHook (vue.runtime.esm.js:6390) at VueComponent.patch [as patch] (vue.runtime.esm.js:6609) at VueComponent.Vue._update (vue.runtime.esm.js:3963) at VueComponent.updateComponent (vue.runtime.esm.js:4081)

I'd like to use the import function so I can utilise the import event if possible.

[jerosoler]

Hello @vivianspencer

Try:

var exportvalue = null;
exportvalue = editor.export();
editor.import(exportvalue);

Does this give you an error?

I see you are using Vue. Are you using registered nodes? Are you loading them before importing?

Jero

[vivianspencer]

Hi @jerosoler thanks for responding so quick, much appreciated

Yes I've tried that code snippet, I get the same error on import.

I can confirm I'm using Vue with registered nodes, and I'm loading them before the import

This is the code from mounted()

mounted () {
    const element = document.getElementById('canvas');
    this.editor = new DrawFlow(element, Vue);
    this.editor.force_first_input = true;
    this.editor.reroute = true;

    this.editor.registerNode('canvas_node', CanvasNode);
    this.editor.registerNode('canvas_operator', CanvasOperator);

    if (this.canvasData) {
        // this.editor.drawflow = JSON.parse(this.campaign.canvas);
        this.editor.import(JSON.parse(this.campaign.canvas));
    }

    this.editor.start();

    bus.$on('getData', (id) =>  {
        const dataNode = this.editor.getNodeFromId(id.slice(5)).data;
        bus.$emit('SendData', {id, dataNode})
    });

    bus.$on('saveData', (id, name) =>  {
        let nodeId = id.slice(5);
        this.editor.drawflow.drawflow.Home.data[nodeId].data.name = name;
    });

    bus.$on('refreshNode', (id) =>  {
        this.editor.updateConnectionNodes(id);
    });

    this.editor.editor_mode = this.editorMode = 'edit';
}

[jerosoler]

Try adding the start before.

this.editor.start();

if (this.canvasData) {
        // this.editor.drawflow = JSON.parse(this.campaign.canvas);
        this.editor.import(JSON.parse(this.campaign.canvas));
}

[vivianspencer]

@jerosoler You are an absolute legend mate, that worked :)

Thanks for the help, much appreciated.