gistfile1.js

define('workflow/workflowdesigner/diagram',
    [
        'base/panel',
        'lib/go-debug',
        'lib/jquery-ui.min'
    ],
    function (Panel, gojs) {
        return Panel.extend({

            init: function (element, options) {
                this.base(element, options);
                this.setmyDiagram();
                this.makeDroppable();
            }, // /*--init

            g: go.GraphObject.make,

            setmyDiagram: function () {
                var g = this.g;

                this.myDiagram = g(go.Diagram, "myDiagram", {
                    allowDrop: true,
                    initialPosition: new go.Point(0, 0),
                    "draggingTool.dragsLink": true,
                    "undoManager.isEnabled": true,
                    "linkingTool.isEnabled": false
                });

                this.myDiagram.nodeTemplate =
                    g(go.Node, "Auto",
                        new go.Binding("location", "loc", go.Point.parse),
                        g(go.Shape, "Square",
                          {
                              fill: "red",
                              portId: "",
                              fromLinkable: true, toLinkable: true,
                              fromLinkableDuplicates: true, toLinkableDuplicates: true,
                              fromLinkableSelfNode: true, toLinkableSelfNode: true
                          }
                          ),
                        g(go.TextBlock,
                          { margin: 5 },
                          new go.Binding("text", "text").makeTwoWay()));

                this.myDiagram.linkTemplate =
                  g(go.Link,
                    new go.Binding("location", "loc", go.Point.parse),
                    new go.Binding("points").makeTwoWay(),
                    {
                        relinkableFrom: true,
                        relinkableTo: true
                    },
                    g(go.Shape, // the from end arrowhead
                        {
                            strokeWidth: 3
                        },
                        new go.Binding('stroke', 'color')
                        ),
                    g(go.Shape, // the from end arrowhead
                        {
                            toArrow: "Standard"
                        })
                    );

            }, // /*--setmyDiagram

            makeDroppable: function () {
                var myDiagram = this.myDiagram;

                $(this.element).droppable({
                    accept: ".palette-item",
                    activeClass: "ui-state-highlight",
                    drop: function (event, ui) {
                        var elt = ui.draggable.first();
                        var text = elt.context.textContent;
                        var x = ui.offset.left - myDiagram.div.offsetLeft;
                        var y = ui.offset.top - myDiagram.div.offsetTop;
                        var p = new go.Point(x, y);
                        var q = myDiagram.transformViewToDoc(p);
                        var model = myDiagram.model;
                        model.startTransaction("drop");

                        if ((ui.draggable).data("type") === 'link') {
                            model.addLinkData(
                                {
                                    color: 'orange',
                                    points: new go.List(go.Point).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]),
                                    loc: go.Point.stringify(q)
                                });
                        } else {
                            model.addNodeData({
                                text: text,
                                loc: go.Point.stringify(q)
                            });
                        };

                        model.commitTransaction("drop");
                    } // /*--drop
                }); // /*--droppable
            } // /*--makeDroppable      

        });
    });