diff --git a/manuscript.md b/manuscript.md index cc14c1d..4427482 100644 --- a/manuscript.md +++ b/manuscript.md @@ -542,6 +542,33 @@ wget "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Bismillah_Callig pubsEngine also implemented this mechanism on GNUplot scripts using `.gnuplot` class. +## GoJS Diagrams + +For more flexibility, you may include a diagram script based on [GoJS](https://gojs.net/latest/samples/). +This feature enable us to create a very complex diagrams. +The merit of this input is comparable with the inclusion of Haskell's `Diagrams`, with lower learning curve for those who already have some familiarity with imperative language, especially `javaScript` (`node.js`). + +Figure \ref{fig:goJS} shows the output of `GoJS` diagrams provided by following code. + +``` +~~~{.gojs #fig:goJS src=script/goJSmodel.js file=goJSImage} +This is GoJS image text that would be shown as a caption. +~~~ +``` + +~~~{.gojs .show #fig:goJS src=script/goJSmodel.js file=goJSImage} +This is GoJS image text that would be shown as a caption. +~~~ + +Please be aware of some requirements to create this model. +Under the hood, pubsEngine loads puppeteer and pdfkit. +GoJS is provided by the module object `go`. +The variable `$` represents `go.GraphObject.make`. +Diagram name should be named as `myDiagram`. +By the end of the process, pubsEngine will only compile diagram that represented by `myDiagram`. +If the diagram happens to be very complex and composed of several diagrams, +please be aware that all diagrams should be under `myDiagram`. + ## Subprocess delegation ~~~{.delegate .multimarkdown #tbl:delegate} diff --git a/script/goJSmodel.js b/script/goJSmodel.js new file mode 100644 index 0000000..d59fb23 --- /dev/null +++ b/script/goJSmodel.js @@ -0,0 +1,33 @@ +var myDiagram = $(go.Diagram, "myDiagramDiv", + { + "animationManager.isEnabled": false, + "undoManager.isEnabled": true // enable undo & redo + }); + + // define a simple Node template + myDiagram.nodeTemplate = + $(go.Node, "Auto", // the Shape will go around the TextBlock + $(go.Shape, "RoundedRectangle", { strokeWidth: 0 }, + // Shape.fill is bound to Node.data.color + new go.Binding("fill", "color")), + $(go.TextBlock, + { margin: 8 }, // some room around the text + // TextBlock.text is bound to Node.data.key + new go.Binding("text", "key")) + ); + + // create the model data that will be represented by Nodes and Links + myDiagram.model = new go.GraphLinksModel( + [ + { key: "Alpha", color: "lightblue" }, + { key: "Beta", color: "orange" }, + { key: "Gamma", color: "lightgreen" }, + { key: "Delta", color: "pink" } + ], + [ + { from: "Alpha", to: "Beta" }, + { from: "Alpha", to: "Gamma" }, + { from: "Beta", to: "Beta" }, + { from: "Gamma", to: "Delta" }, + { from: "Delta", to: "Alpha" } + ]);