Integration between Che and diagram drawing library JointJS

Hi.

I am trying to build a simple graphic modelling editor integrated with Che, and in order to do that, I am using JavaScript libraries and integrating them as shown in the sample che-sample-plugin-embedjs-ide (exposed in Che documentation) or in this EMF plugin implemented by EclipseSource.

The library selected to do that was JointJS a JS library with an easy way to draw several kind of diagrams (in particular I am focused in UML diagrams). So, I have built a small Che extension that draws a static UML diagram through an action (as in the sample che-sample-plugin-embedjs-ide). Code of this extension is attached.

But when doing the integration with Che, I am finding issues. The diagram is not drawn and an error indicating that a basic object is not defined is raised.

JointJS (version 1.0.3) depends on other 3 JavaScript libraries:

• jQuery(version 2.2.4)
• Backbone(version 1.3.3)
• Lodash(version 3.10.1)

In the code supplied, JS dependencies are included in the same JavaScript file (to ease its loading with GWT). As shown in the Expected behavior section, they work fine.

My main idea with this issue is to discard “easy” things that perhaps I am missing…

Reproduction Steps:

1. Compile Che 5.0.0-M7 assembly with the attached extension added
2. Start Che as a native server (as documented here)
3. Create a new workspace with a sample project or start an available one.
4. When the workspace is started, right-click over any project and click on the new option Graphic modeling editor located in the menu.
5. The diagram should be drawn

Expected behavior:

An UML diagram is drawn. An example of this behavior can be watched in:

• Running the HTML page testUML.html contained in the folder src/main/resources/com/nopsar/che/extension/jointeditor/public
• Using GoJS instead of JointJS. To do that: 1.Replace the value of the constant JS_RESOURCE in Java interface JavaScriptResource by the commented value 2.In the Java class JointEditorViewOverlay, replace the JavaScript invocation for JointJS by the one for GoJS (available in the comment located above class definition). The result can be seen in the attached snapshot

Observed behavior:

Nothing is drawn and following error can be seen in browser logs:

joint is not defined from drawUMLJointInChe@http://127.17.0.1:8080/_app/jointjs.full.js:39324:7
_.Xl@_app-0.js:903:353
vya/a.onload<@_app-0.js:174:253
Kv/<@_app-0.js:6701:249

The error indicates that the basic object of JointJS library is not defined. Typically, this suggests that some dependency is missing but as shown in the HTML page testUML.html pointed above, the Javascript provided apparently is working fine.

Che version: 5.0.0-M7
OS and version: Ubuntu 16.04 (Linux kernel 4.4.0-57-generic) Docker version: 1.12.5 Che install: Native server from Eclipse Che version 5.0.0-M7 compilation (as explained here)

Additional information:

• Problem started happening recently, didn’t happen in an older version of Che: No
• Problem can be reliably reproduced, doesn’t happen randomly: Yes

Attachments

• Code of the extension tested in a tar.gz file, including JavaScript libraries (they are not compressed) located in the folder src/main/resources/com/nopsar/che/extension/jointeditor/public
• Snapshot of a successful usage of the extension using GoJS

Thank you very much for your help, Best Regards, Alberto.

che-graphic-editor-extension.tar.gz

[vitaliy-guliy]

Hi @alortsoc I have built your che-graphic-editor-extension and played with it. I got the same error

joint is not defined from drawUMLJointInChe@http://127.17.0.1:8080/_app/jointjs.full.js

Considering jointjs.full.js works properly in testUML.html and there are no errors in browser console when injecting jointjs.full.js I tried to add an empty iframe to the bottom panel and inject the script in frame directly. The result you can see at the screenshot.

It looks like your script doesn’t want to work with IDE javascipt, so it is can not be loaded in the main frame. Now I’m still playing with your extension. There is a little problem with accessing javascript in iframe from the parent frame. I will solve this problem and give you the result.

[19yak]

Hi @vitaliy-guliy , I tried to integrate the extension che-graphic-editor-extension.tar.gz. I notice that javascript libraries are not loaded in my browser.

log file : :8080/app/jointjs.full.js:39336 joint is not defined from ReferenceError: joint is not defined at drawUMLJointInChe (http://localhost:8080/_app/jointjs.full.js:39334:15) at und..mm (_app-0.js:5976:355) at HTMLScriptElement.eval (_app-0.js:179:255) at HTMLScriptElement.eval (_app-0.js:6975:251) app-0.js:505 Tue Mar 21 13:55:33 GMT+100 2017 com.google.gwt.logging.client.LogConfiguration SEVERE: (ReferenceError) : joint is not definedcom.google.gwt.core.client.JavaScriptException: (ReferenceError) : joint is not defined at Unknown..qm(_app-0.js) at Unknown.by(_app-0.js) at Unknown.eval(_app-0.js)

_.Cn @ _app-0.js:505