Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
gerardoBPATassat opened this issue Mar 22, 2024 · 1 comment
Closed
Labels
bug Something isn't working duplicate This issue or pull request already exists

Comments

@gerardoBPATassat
Copy link

gerardoBPATassat commented Mar 22, 2024

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

  • Desktop or mobile: Desktop
  • OS and version: MacOS 14.4 (23E214)
  • Browser and version: Chrome
  • Node/npm version (if applicable): latest
  • Used frameworks (if applicable): vite

Additional context

Add any other context about the problem here.

@gerardoBPATassat gerardoBPATassat added the bug Something isn't working label Mar 22, 2024
@gerardoBPATassat
Copy link
Author

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

@tbouffard tbouffard added the duplicate This issue or pull request already exists label Mar 22, 2024
@tbouffard tbouffard closed this as not planned Won't fix, can't repro, duplicate, stale Mar 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants