jointjs with svelte

[globalflea]

Hi,

Pretty new to both svelte, sveltekit and jointjs.  how can i use jointjs in svelte/sveltekit?  Is there an example?

Thanks

[James Williams]

Hi,

We currently don't have a tutorial with Svelte, but we plan on making one in the future. You can get some ideas of project setup for other JS frameworks from our tutorials here:
https://resources.jointjs.com/tutorial

Regarding Svelte, you can follow step number 2 to setup a project here using degit:
https://svelte.dev/blog/the-easiest-way-to-get-started

Then you would npm i jointjs afterwards.

In the main App.svelte file, you could copy the following as the <script> and <main> tag:

<script>
    import { onMount } from 'svelte';
    import { dia, shapes } from 'jointjs';


    onMount(async () => {
        var namespace = shapes;

        var graph = new dia.Graph({}, { cellNamespace: namespace });

        var paper = new dia.Paper({
            el: document.getElementById('app'),
            model: graph,
            width: 600,
            height: 100,
            gridSize: 1,
            cellViewNamespace: namespace
        });

        var rect = new shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Hello',
                fill: 'white'
            }
        });
        rect.addTo(graph);

        var rect2 = rect.clone();
        rect2.translate(300, 0);
        rect2.attr('label/text', 'World!');
        rect2.addTo(graph);

        var link = new shapes.standard.Link();
        link.source(rect);
        link.target(rect2);
        link.addTo(graph);
    });

</script>

<main id="app">

</main>

It follows the tutorial here:
https://resources.jointjs.com/tutorial/hello-world

It is very basic, but should be enough to get you started. We hope to include some information on Sveltekit in our tutorial too.

Thanks,

James

[globalflea]

hi,

I actually got it working and was trying to port the BPMN app from Rappid over to svelte and it crashed with

"dia.ElementView: markup required"

the source line that was associated with this was stencil.load(...).  

I pretty much cut and paste the bpmn.js and other codes into svelte equivalent.  Any clue on how i can troubleshoot this issue?

BTW, i checked that the copy-paste also had "cellnamespace: joint.shapes" for both Graph and Paper 

Thanks 

[James Williams]

Hi,

If you are using imports in your Svelte components like the following, then the namespace should be just shapes, not joint.shapes.

import { dia, shapes } from 'jointjs';

var namespace = shapes;

var graph = new dia.Graph({}, { cellNamespace: namespace });

var paper = new dia.Paper({

            cellViewNamespace: namespace
  });

You might need to remove 'joint' from a few other places if you have copy & pasted everything.

Thanks,

James

[globalflea]

hi,

i did:

import * as joint from 'jointjs';

this works to import and allow use of the 'joint' namespace, so it was not the course my error.

In fact, the app sort of works (messy layout) if i comment out the `stencil.load(...)`.  specifically i could load and view the example bpmn 

but the moment i uncomment the `stencil.load(...)` i hit the "dia.ElementView: markup required" error

Thanks, any other ideas?

[James Williams]

Could you try the following after your import, to make the joint variable available globally?

import * as joint from 'jointjs';
window.joint = joint;

This error is most likely related to the namespaces, so that's what I would focus on in the structure of the Svelte app.

If the above doesn't help, you can send the code, or make it available online somewhere, and I can take a look.

Thanks,

James

[globalflea]

Hi,

Miracles! it worked.

But i put it inside the onMount() instead.

Can you kindly explain why this was needed? 

Thanks & Regards

[James Williams]

Hi,

if there is no joint variable available globally, you need to pass the namespace explicitly to the graph and paper.

In your Svelte app, I imagine their was an assumption that joint was available globally, so add window.joint = joint; fixed the issue.

More than likely your app couldn't find the shapes on the default namespace for shapes, joint.shapes.

Thanks

[globalflea]

Thanks for the explanation

[globalflea]

Hi,

Managed to port the bpmn editor app to svelte components (as far as i can break things up).  

Tried to move the various bits of styles into each component, but it seems it was pretty complex.  

It also resulted in behaviour issues - like scrollbar not working properly when zoomed out etc.

In the end, i resorted to just importing the rappid.css and bpmn.css in the app.html and it looked and worked the same.  

It would have been good if i could move the various css bits to the 'style' tag of each component though.

Are there more documentation on the following:

- BPMN - e.g. how to export the BPMN definitions? How to traverse the workflow definitions?

- Is there more design documents available to describe all the dependencies?  

- Or some documentation on how jointjs handles drawing, refresh, etc? 

Thanks & Regards

[James Williams]

Hi,

Styles in Svelte components are scoped by default. CSS rules placed within a <style> tag will only be available in that component.

I imagine this could be the source of some problems. The rappid.css needs to be available globally.

If you want to use global styles in a <style> tag, Svelte provides a pseudo-selector :global for this purpose. It would be used like the following:

<style>
    :global(svg) {
        fill: orange
    }
</style>

Other solutions are imports like you did, or in SvelteKit,  you can import global.css in your src/routes/__layout.svelte. This will make it available on all pages
in your SvelteKit app.

Our documentation for BPMN can be found here:
https://resources.jointjs.com/docs/rappid/v3.5/shapes.bpmn.html
https://resources.jointjs.com/docs/rappid/v3.5/shapes.bpmn2.html

In our existing Business Processes (BPMN) demo, there is functionality which allows you to open definitions in JSON. You could certainly get some
inspiration from this, or manipulate it for export how you would like. http://bpmn.org/ provides some general guidelines.

If you take a look at our documentation or tutorials, you will find lot of useful information about dependencies, and behavior of JointJS.

There is lots of information about the Graph & Paper. The graph is the model, and the paper will listen for changes in it. The changes will be automatically reflected in the view.

https://resources.jointjs.com/tutorial

Thanks,

James