I need to develop an application that allows users to generate drag-and-drop style diagrams. It appears that GoJS might be a possible solution. However, I’d like to develop this application as a desktop solution (where you can read/write files, etc). I was hoping that GoJS in conjunction with Node.JS and Electron (http://electron.atom.io/) might be a possibility.
Has anybody done this? Are there examples available? I tried making an application using the GoJS examples, but I keep getting the error “Uncaught ReferenceError: go is not defined”. If I load up the same content as a simple web page (with Edge) it works fine. It seems like the Node.JS scoping behavior might behave different from what GoJS expects.
In PortShifting.html, I modified the header a bit:
Removed goSample.css and goSample.js
Changed go.js to bower_components\gojs\release\go.js.
In package.json, I changed the “main” to be “main.js” instead of “index.js”.
When I run the program:
node_modules.bin\electron .
a window pops up. In the debugger, the Console says:
Uncaught ReferenceError: go is not defined
PortShifting.html:15 Uncaught ReferenceError: go is not defined
However, if I run the page in a regular browser:
start PortShifting.html
it works fine. Any ideas on why Node.js/Electron is breaking things? It appears to be a scoping issue. This appears to be a very powerful diagramming tool, and would be really powerful for local applications.
First, you need to write your code in the Node/CommonJS manner. So PortShiftingTool.js needs to end with:
module.exports = PortShiftingTool; // for use in CommonJS environment
Second, there seems to be a bug in Electron where the value of window.module is a different object than the value of module. Very odd. Anyway, we have updated the GoJS library to work around that problem. So you need to get the latest version, at least 1.5.17.
Third, you should change the HTML file so that you do not use the script src="..." elements, but call require instead:
<meta charset="UTF-8">
<script id="code">
var red = "orangered";
var green = "forestgreen";
var go; // the "go" namespace is used outside of init(), below
function init() {
go = require("./bower_components/gojs/release/go-debug.js"); // requires >= 1.5.16
var PortShiftingTool = require("./PortShiftingTool.js"); // requires module.exports assignment at end
var $ = go.GraphObject.make; // for conciseness in defining templates
. . .
Then executing:
node_modules/.bin/electron .
runs the enhanced Logic Circuit sample well.
Note that it seems necessary to only call require after the page has been loaded. I’m not sure why there are initialization problems if you try to load the GoJS library very early.