process-analytics / bpmn-visualization-js

A TypeScript library for visualizing process execution data on BPMN diagrams
https://process-analytics.github.io/bpmn-visualization-js/
Apache License 2.0
224 stars 31 forks source link

[BUG] Artifact and other icons do not appear when rendered using vite #3059

Closed gerardoBPATassat closed 7 months ago

gerardoBPATassat commented 7 months ago

Describe the bug

I have a bpmn diagram with different icons for artifacts and data stores. Here's an example.

image

When I visualize this using the vite.js example in the examples repo I get this.

image

Here is the code I used to generate using vite

import './style.css';
// this is simple example of the BPMN diagram, loaded as string. The '?.raw' extension support is provided by Vite.
// for other load methods, see https://github.com/process-analytics/bpmn-visualization-examples
import * as diagrams from '../../diagrams';
import { BpmnVisualization, FitType, getVersion, mxgraph } from 'bpmn-visualization';

for (const [index, diagram] of Object.entries(diagrams)) {

    const link = document.createElement('a');
    link.textContent = `Load diagram: ${index}`;
    link.href = '#';
    link.addEventListener('click', (event) => {
        event.preventDefault();
        //document.body.innerHTML = '';
        const bpmnVisualization = new BpmnVisualization({
            container: "bpmn-container",
        });

        // Load the BPMN diagram when the hyperlink is clicked
        bpmnVisualization.load(diagram, { fit: { type: FitType.Center, margin: 10}});
        // Clear the body, excluding the container
        const elementsToClear = document.body.querySelectorAll('a');
        elementsToClear.forEach(element => element.remove());   
        // Create a hyperlink to go back to the main page

        const backLink = document.createElement('a');
        backLink.textContent = 'Go Back to Main Page';
        backLink.href = '#';
        backLink.addEventListener('click', (event) => {
            event.preventDefault();
            location.reload();
        });
        event.preventDefault();
        // Add the back hyperlink to the page
        document.body.appendChild(backLink);

    });
    // Add the hyperlink to the page
    document.body.appendChild(link);
    // Add a newline after the hyperlink
    const br = document.createElement('br');
    document.body.appendChild(br);
};

To Reproduce

Steps to reproduce the behavior: 1) npm start 2) navigate to page

BPMN diagram that reproduces the problem:

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots or videos to help explain your problem.

Environment

Additional context

Add any other context about the problem here.

gerardoBPATassat commented 7 months ago

This duplicates [FEAT] #2916 so I'll close.