Migrating from Vue 2 to Vue 3

[Alexander Bondarew | Fenêtre bv]

Hi

I'm migrating Diagram from Vue 2 to Vue 3, diagram is loaded from JSON definition.

Html shapes, are not drawn in diagram area in Vue 3, they are invisible, on click the square border is shown, no console errors, how can I resolve this?
Injected modules: 

Diagram.Inject(UndoRedo);

Diagram.Inject(PrintAndExport);

Diagram.Inject(DataBinding);

Diagram.Inject(Snapping);

Also I'm using Options API

[Gobinath Dhamotharan]

Hi,

We were unable to replicate the issue on our end. In Vue2, we rendered HTML shapes in the diagram, saved it as JSON, and successfully loaded the JSON in Vue3 with proper rendering. If you encounter any challenges, please share the JSON or provide a sample for further validation. Refer the sample and video.

Sample

Vue-3

https://stackblitz.com/edit/3jouxc-vutbzj?file=src%2FApp.vue

Vue-2

Regards,
Gobinath

Attachment: Video_and_sample_da49237c.zip

[Alexander Bondarew | Fenêtre bv]

Hi, Gobinath

I pasted my json into your sample
https://stackblitz.com/edit/3jouxc-eoex1s?file=src%2FApp.vue

and my html nodes are not rendered

[Gobinath Dhamotharan]

Hi,

We reviewed the shared JSON file, extracting the HTML content from it and rendering it within the initial node. Subsequently, we saved this modified JSON and successfully loaded it into the Vue3 sample. However, it appears that the JSON you provided differs from the one obtained using the saveDiagram method. Could you kindly provide additional details regarding any post-processing steps you are undertaking after invoking the saveDiagram method? Alternatively, you may modify the sample to include the relevant modifications for further validation.

Sample

https://stackblitz.com/edit/3jouxc-hj1g5k?file=src%2FApp.vue

Regards,
Gobinath

[Alexander Bondarew | Fenêtre bv]

I create some instance of diagram.

Once it created I programmatically paste "Start" node via method:

async createStartNode(templateId: number, versionId: number) {

        //300 : 30

        let node: NodeModel = {

            id: `System${versionId}`,

            // @ts-ignore

            width: 228,

            // @ts-ignore

            height: this.settings.defaultNodeHeight,

            // @ts-ignore

            shape: {

                type: "HTML", content: `

            <div class="start-node shadow-node">

            <div class="text-center">

              Start

            </div>

            </div>`

            },

            // @ts-ignore

            addInfo: { customData: { tasktemplate: { id: templateId }, title: `Start point ${versionId}`, nodeType: "System" } }

        }

        if (this.diagramInstance.nodes.length == 0) {

            // @ts-ignore

            let startX = this.diagramInstance.scrollSettings.viewPortWidth / 2;

            // @ts-ignore

            let startY = this.diagramInstance.scrollSettings.viewPortHeight / 2;

            // @ts-ignore

            node.offsetY = startY - 200;

            node.offsetX = startX - 50;

            this.diagramInstance.add(node);

            // @ts-ignore

            this.lastNode = this.diagramInstance.nodes[0];

        }

        else {

            // @ts-ignore

            node.offsetY = this.diagramInstance.nodes[0].offsetY - this.settings.defaultNodeVerticalOffset;

            node.offsetX = this.diagramInstance.nodes[0].offsetX;

            this.diagramInstance.add(node);

            // @ts-ignore

            let transition = this.getTransitionModel(templateId, this.diagramInstance.nodes[0].addInfo.customData.tasktemplate.id, this.currentTemplateId);

            // @ts-ignore

            transition = await this.createTransition(transition);

            if (transition.id != 0) {

                // @ts-ignore

                await this.createConnector(node.id, this.diagramInstance.nodes[0].id, transition);

            }

        }

        // @ts-ignore

        let annotation = this.getAnnotationModel("Start");

        //Method to add labels at run time

        // @ts-ignore

        this.diagramInstance.addLabels(node, annotation);

        // @ts-ignore

this.diagramDefinitionJson = this.diagramInstance.saveDiagram();

    }

this.diagramdefinitionJson is saved to database, so next time, when diagram opened it loads json

Other nodes I drag from Symbol palette(see screenshot below "Task templates") and they are also invisible.

I noticed, that inner html is empty which is not ok, cause I have method "getNodeDefaults" which pastes html content inside shape, once node is dropped into diagram area



Also in diagram I use constraints, does that make affect?

[Gobinath Dhamotharan]

Hi,

Could you please provide more details on where you are saving and loading the JSON data in Vue2 or Vue3? Additionally, we'd appreciate a working video demonstrating how you render and load nodes. Also, please confirm that you are saving and loading the diagram in the same application. If same application, before saving, please check whether the node renders properly with html  content in the diagram after drag and drop from the palette.

While we understand that you have successfully rendered HTML shapes in the palette and drag-and-dropped them into the diagram without issues, it's important to address the concern that the symbol palette is not affected during the loading process.

To help us replicate the issue at our end, please modify the sample below. Ensure that the modified code includes relevant details about JSON saving and loading in your Vue application. Refer the sample and video below.

Sample

https://stackblitz.com/edit/jsgzvs?file=src%2FApp.vue

Regards,
Gobinath

Attachment: Video_b9b808e9.zip

[Alexander Bondarew | Fenêtre bv]

Hi Gobinath

I managed to fix issue at my end, the problem was that when I dropped node, I updated it's html according to user input data, on update there were hidden symbols, which broke html node rendering.
Wondering why it worked in Vue 2.

Anyways thanks for support.

[Preethi Rajakandham]

You're welcome. 

We are happy to hear that you have found a solution on your end. Please let us know if you require any further assistance on this, we will be happy to assist you. 

Regards,

Preethi R