Integrating JointJS into an OutSystems page

[MarloweMich]

Introduction

Issues with Integration: The nodes formed from the data given in sample-graphs.js does not show up. The "halo" as defined in halo.js does not show up visibly and cannot be interacted with, though all the widgets surrounding the node show up in the DOM elements (just not interactable). Explanation of process below:

Steps to reproduce

Using trial version for a proof of concept to make a process flow map within an OutSystems app.
Using the JavaScript version of Kitchen Sink demo app (external scripts in OutSystems are vanilla JS).
Imported all the various scripts listed on the index html within the demo app as required scripts on the OutSystems page in this order:

<!-- JointJS+ package: -->
<script src="../../../build/package/joint-plus.js"></script>

<!-- Directed Graph package: -->
<script src="./node_modules/@dagrejs/graphlib/dist/graphlib.core.js"></script>
<script src="./node_modules/@dagrejs/dagre/dist/dagre.js"></script>
<script src="./node_modules/@joint/layout-directed-graph/dist/DirectedGraph.js"></script>

<!-- Application files: -->
<script src="js/config/halo.js"></script>
<script src="js/config/selection.js"></script>
<script src="js/config/inspector.js"></script>
<script src="js/config/stencil.js"></script>
<script src="js/config/toolbar.js"></script>
<script src="js/config/sample-graphs.js"></script>
<script src="js/views/main.js"></script>
<script src="js/views/theme-picker.js"></script>
<script src="js/shapes/elements.js"></script>
<script src="js/shapes/links.js"></script>
<script src="js/shapes/navigator.js"></script>
<script src="js/index.js"></script>

Loaded the various CSS files into the style sheet for the page:
style.css
style.dark.css
style.material.css
style.modern.css
theme-picker.css
joint-plus.css

With all the scripts imported started giving an error on loading of the page "Debugger already running". The scripts somehow triggered OutSystems JavaScript debugger several times. Combined all the scripts into one giant JS file and loaded that as a required script. Screen showed up. Only two issues is that halo.js and sample-graphs.js do not seem to trigger, as the nodes are not created from the sample JSON as it does when I run the demo locally with npm start nor does the halo show up.

Any ideas or similar experiences?

Restrictions & Constraints

no limitations I know of

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

As for the sample graph in the Kitchen Sink application, it is loaded on load event. The load event was most likely fired before the OutSystems component loaded.

// Waiting for all the fonts to load before we render the default canvas content.
window.addEventListener('load', () => {
    app.graph.fromJSON(JSON.parse(App.config.sampleGraphs.emergencyProcedure));
});

You can try to load it synchronously for instance.

---

What about Selection or FreeTransform? Do they show up?

[kumilingus]

Do all themes miss the halo icons?

[MarloweMich]

Yes, all themes miss them. I just noticed .joint-halo.joint-theme-modern .handle.remove or .joint-halo.joint-theme-modern .handle.{handler-type} is not being added to the correct element. Looking into that currently

[kumilingus]

Hi @MarloweMich, any luck with this?

[MarloweMich]

Yes, I figured it out. Thank you.
Because OutSystems struggles with importing npm applications, you basically have to bring all scripts as a whole into the OutSystems page, then it takes some trial and error to make the overlaying JS and CSS coming from OutSystems friendly with the joint.js scripts and stylings

[kumilingus]

Okay, great! Thanks for the info.