GoJS for desktop applications?

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.

Thanks!

We are not familiar with Electron. Could you provide more details on what you have tried, including the configuration?

Here are the steps I went through.

First, I the latest 5.x version of Node.js

The on the command line:

mkdir grid_ui
cd grid_ui
npm init
npm install bower --save
node_modules.bin\bower install gojs --save
npm install electron-prebuilt --save

At this point, I basically followed the tutorial provided here:
http://electron.atom.io/docs/v0.36.0/tutorial/quick-start/

Except that I replaced the “index.html” with “PortShifting.html” in the file main.js, and added these two files:

https://raw.githubusercontent.com/NorthwoodsSoftware/GoJS/master/extensions/PortShiftingTool.js

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.

Thanks,
John

OK, I figured out how to create Electron apps.

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.

Hi,

Are there any examples of code using GoJS and electron together for a desktop app? I have something I want to make that is sorta like Visio.

Take a look here: