### Local Development Setup for Draw2D

Source: https://github.com/freegroup/draw2d/blob/master/README.md

Instructions for setting up and running Draw2D locally. This involves using Node Version Manager (nvm) to select a specific Node.js version, installing dependencies with npm, and starting the development server.

```shell
nvm use v14.15.0

npm install
DIR=/examples yarn dev

```

--------------------------------

### Initialize draw2d Canvas and Add Elements on DOM Load

Source: https://github.com/freegroup/draw2d/blob/master/jsdoc/public/examples/connection_drop/index.html

This script initializes a draw2d canvas once the DOM is fully loaded. It includes commented-out examples for installing edit policies like DragConnectionCreatePolicy and a custom interceptor policy. It then demonstrates adding 'Start' and 'End' nodes to the canvas, creating a connection between them using the previously defined `createConnection` function, and adding a 'PostIt' note. This snippet is crucial for setting up the drawing environment.

```javascript
var canvas = null;
document.addEventListener("DOMContentLoaded",function () {
 // Everything is loaded - core and application. Now can create the
 // application
 // canvas = new draw2d.Canvas("gfx_holder");
 // Install a special policy into the canvas to use my own implementation of connection
 // if we drag&drop a port
 // canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
 //  createConnection: createConnection
 // }));
 // This is the key!! The interceptor allows that a figure is droppable to a
 // connection
 // canvas.installEditPolicy(new MyInterceptorPolicy());
 // Create two standard nodes for "start" and "end" and link
 // this figures with a standard Connector
 // var start = new draw2d.shape.node.Start({x:130,y:130,width:60,height:60});
 // var end = new draw2d.shape.node.End({x:450,y:250});
 // canvas.add(start);
 // canvas.add(end);
 // Add a connection via API calls between Start and Stop
 // var connection =createConnection(start.getOutputPort(0),end.getInputPort(0));
 // canvas.add(connection);
 // Add my implemention of a "Between" figure for the smart insert feature
 // inspect the "Between.onDrop" method for more details
 // canvas.add( new BetweenFigure({x:250,y:340}));
 ////////////////////////////////////////////////////////////////////
 // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
 ////////////////////////////////////////////////////////////////////
 var msg = new draw2d.shape.note.PostIt({
  text:"Drag&Drop the orange box onto the connector.\nThe orange box will be injected into the Connection.\n \nSmart - right?"
 });
 canvas.add(msg, 20,20);
});
```

--------------------------------

### Initialize draw2d Canvas and Add Nodes

Source: https://github.com/freegroup/draw2d/blob/master/jsdoc/public/examples/connection_labeledit_inplace/index.html

This snippet shows the basic setup for draw2d. It initializes a canvas within a specific HTML element and adds two nodes, a Start node and an End node, to the canvas. It requires the draw2d library and an HTML element with the id 'gfx_holder'.

```javascript
var canvas = null;
document.addEventListener("DOMContentLoaded",function () {
  // create the paint area. The id in the constructor must be
  // an existing DIV
  canvas = new draw2d.Canvas("gfx_holder");

  // create and add two Node which contains Ports (In and OUT)
  var start = new draw2d.shape.node.Start({x:50, y:450});
  var end = new draw2d.shape.node.End({x:230, y:150});

  canvas.add( start);
  canvas.add( end);

  // Create a Connection and connect he Start and End node
  // var c = new LabelConnection({ source:start.getOutputPort(0), target:end.getInputPort(0) });
  // canvas.add(c);

  ////////////////////////////////////////////////////////////////////
  // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
  ////////////////////////////////////////////////////////////////////
  canvas.add( new draw2d.shape.note.PostIt({text:"DoubleClick on the label to edit the text.", x:20, y:20}));
});
```

--------------------------------

### Initialize Draw2D Canvas and Add Elements

Source: https://github.com/freegroup/draw2d/blob/master/jsdoc/public/examples/connection_angle/index.html

Sets up the draw2d canvas upon DOMContentLoaded, installs a connection creation policy, adds start and end nodes, creates a connection between them, and adds a post-it note. It utilizes draw2d.Canvas, draw2d.policy.connection.DragConnectionCreatePolicy, draw2d.shape.node.Start, draw2d.shape.node.End, and draw2d.shape.note.PostIt.

```javascript
document.addEventListener("DOMContentLoaded",function () {
  var canvas = new draw2d.Canvas("gfx_holder");
  canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
    createConnection: createConnection
  }));
  var start = new draw2d.shape.node.Start({x:50, y:250});
  var end = new draw2d.shape.node.End({x:430, y:150});
  canvas.add( start);
  canvas.add( end);
  var c = createConnection();
  c.setSource(start.getOutputPort(0));
  c.setTarget(end.getInputPort(0));
  canvas.add(c);
  var msg = new draw2d.shape.note.PostIt({text:"Move the start or destination figure to update the label.\nThe label is always readable and isn't upside down in any cases."});
  canvas.add(msg, 20,20);
});
```

--------------------------------

### Initialize Draw2d Canvas and Add Shapes

Source: https://github.com/freegroup/draw2d/blob/master/examples/connection_locator/index.html

Sets up a draw2d canvas on DOMContentLoaded, adding multiple 'Start' and 'End' nodes. It then creates and adds a connection between a 'Start' and an 'End' node, and also adds a 'PostIt' note shape to the canvas.

```javascript
document.addEventListener("DOMContentLoaded",function () {
  // Create the paint area. The id in the constructor must be
  // an existing DIV
  var canvas = new draw2d.Canvas("gfx_holder");
  var start;
  var end;
  canvas.add( new draw2d.shape.node.Start(), 50,150);
  canvas.add( start= new draw2d.shape.node.Start(), 50,250);
  canvas.add( new draw2d.shape.node.Start(), 50,350);
  canvas.add( new draw2d.shape.node.Start(), 50,450);
  canvas.add( end = new draw2d.shape.node.End(), 300,150);
  canvas.add( new draw2d.shape.node.End(), 300,250);
  canvas.add( new draw2d.shape.node.End(), 300,350);
  canvas.add( new draw2d.shape.node.End(), 300,450);
  // Create a Connection and connect the Start and End node
  // var c = createStandardConnection(new draw2d.layout.locator.ParallelMidpointLocator());
  // c.setSource(start.getOutputPort(0));
  // c.setTarget(end.getInputPort(0));
  // canvas.add(c);
  ////////////////////////////////////////////////////////////////////
  // THIS IS ONLY FOR THE ARROW AND THE POST-IT
  ////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({text:"Drag&Drop the blue box and notice the label.\nIt sticks always in the middle of the connector.\nCreate new a connection to choose the kind of locator."});
  canvas.add(msg, 20,20);
  /* canvas.installEditPolicy( 
   new draw2d.policy.connection.DragConnectionCreatePolicy({
    createConnection: createConnection
   })
  );*/
 });
```

--------------------------------

### Initialize draw2d Canvas and Policies (JavaScript)

Source: https://github.com/freegroup/draw2d/blob/master/jsdoc/public/examples/connection_with_contextmenu/index.html

This snippet demonstrates how to initialize a draw2d canvas within an existing HTML div, install editing policies for decoration and connection creation, and add basic shapes like start and end nodes. It assumes the existence of a 'gfx_holder' div and a custom 'MyConnection' class.

```javascript
document.addEventListener("DOMContentLoaded",function () {
  // create the paint area. The id in the constructor must be
  // an existing DIV
  var canvas = new draw2d.Canvas("gfx_holder");

  canvas.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());
  canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
    createConnection: function(){
      return new MyConnection();
    }
  }));

  // create and add two Node which contains Ports (In and OUT)
  var start = new draw2d.shape.node.Start({x:50, y:450});
  var end = new draw2d.shape.node.End({x:230, y:150});

  canvas.add( start);
  canvas.add( end);

  // Create a Connection and connect he Start and End node
  // var c = new MyConnection({ source:start.getOutputPort(0), target:end.getInputPort(0) });
  canvas.add(c);

  ////////////////////////////////////////////////////////////////////
  // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
  ////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({text:"Use the context menu of the connection\nto change the color or delete the connection."
  });
  canvas.add(msg, 20,20);

  $("body").scrollTop(0)
    .scrollLeft(0);
});
```

--------------------------------

### Initialize Draw2d Canvas and Add Elements (JavaScript)

Source: https://github.com/freegroup/draw2d/blob/master/docs/examples/connection_with_contextmenu/index.html

This snippet initializes a draw2d canvas within a div, installs edit policies for decoration and connection creation, adds start and end nodes, and creates a connection between them. It also adds a Post-it note for user guidance. Dependencies include the draw2d library and potentially jQuery for DOM manipulation.

```javascript
document.addEventListener("DOMContentLoaded",function () {
  // create the paint area. The id in the constructor must be
  // an existing DIV
  var canvas = new draw2d.Canvas("gfx_holder");

  canvas.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());
  canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
    createConnection: function(){
      return new MyConnection();
    }
  }));

  // create and add two Node which contains Ports (In and OUT)
  var start = new draw2d.shape.node.Start({x:50, y:450});
  var end = new draw2d.shape.node.End({x:230, y:150});
  canvas.add( start);
  canvas.add( end);

  // Create a Connection and connect he Start and End node
  // var c = new MyConnection({ source:start.getOutputPort(0), target:end.getInputPort(0) });
  canvas.add(c);

  /////////////////////////////////////////////////////////////////////
  // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
  /////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({text:"Use the context menu of the connection\nto change the color or delete the connection."});
  canvas.add(msg, 20,20);

  $("body").scrollTop(0)
  .scrollLeft(0);
});
```

--------------------------------

### Initialize draw2d Canvas and Add Figures

Source: https://github.com/freegroup/draw2d/blob/master/docs/examples/connection_drop/index.html

This code initializes a draw2d.Canvas instance once the DOM is fully loaded. It demonstrates adding 'Start' and 'End' nodes, creating a connection between them using the createConnection function, and adding a 'PostIt' note. It also shows commented-out examples of installing edit policies for drag-and-drop connections and custom interceptors.

```javascript
var canvas = null;
document.addEventListener("DOMContentLoaded",function () {
  // Everything is loaded - core and application. Now can create the
  // application
  // canvas = new draw2d.Canvas("gfx_holder");
  // Install a special policy into the canvas to use my own implementation of connection
  // if we drag&drop a port
  // canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
  //   createConnection: createConnection
  // }));
  // This is the key!! The interceptor allows that a figure is droppable to a
  // connection
  // canvas.installEditPolicy(new MyInterceptorPolicy());
  // Create two standard nodes for "start" and "end" and link
  // this figures with a standard Connector
  // var start = new draw2d.shape.node.Start({x:130,y:130,width:60,height:60});
  // var end = new draw2d.shape.node.End({x:450,y:250});
  // canvas.add(start);
  // canvas.add(end);
  // Add a connection via API calls between Start and Stop
  // var connection =createConnection(start.getOutputPort(0),end.getInputPort(0));
  // canvas.add(connection);
  // Add my implemention of a "Between" figure for the smart insert feature
  // inspect the "Between.onDrop" method for more details
  // canvas.add( new BetweenFigure({x:250,y:340}));
  /////////////////////////////////////////////////////////////////////
  // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
  /////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({
    text:"Drag&Drop the orange box onto the connector.\nThe orange box will be injected into the Connection.\n \nSmart - right?"
  });
  canvas.add(msg, 20,20);
});
```

--------------------------------

### Initialize draw2d Canvas and Add Nodes (JavaScript)

Source: https://github.com/freegroup/draw2d/blob/master/jsdoc/public/examples/connection_dotted/index.html

Initializes a draw2d canvas on the 'gfx_holder' element, installs decoration and connection policies, and adds 'Start' and 'End' nodes. The connection policy is customized to create dashed connections.

```javascript
var endNode = null;
document.addEventListener("DOMContentLoaded",function () {
  // create the paint area. The id in the constructor must be
  // an existing DIV
  var canvas = new draw2d.Canvas("gfx_holder");
  canvas.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());

  // Override the default connection type. This is used during drag&drop operations of ports.
  canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
    createConnection: function() {
      // return my special kind of connection
      var con = new draw2d.Connection({
        "dasharray":"- ",
        "stroke":3
      });
      return con;
    }
  }));

  // create and add two Node which contains Ports (In and OUT)
  var start = new draw2d.shape.node.Start({x:50, y:250});
  var endNode= new draw2d.shape.node.End({x:230, y:150});
  canvas.add( start);
  canvas.add( endNode);

  /////////////////////////////////////////////////////////////////////
  // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
  /////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({text:"connect two ports to se a dotted line as connection."});
  canvas.add(msg, 20,20);
  $("body").scrollTop(0)
    .scrollLeft(0);
});
```

--------------------------------

### Initialize draw2d Canvas and Configure Policies (JavaScript)

Source: https://github.com/freegroup/draw2d/blob/master/docs/examples/composite_jailhouse/index.html

Sets up a draw2d canvas instance, installs editing policies for decoration and keyboard interaction, and configures a custom policy for creating and routing connections. It also demonstrates loading a JSON document into the canvas.

```javascript
// just for debugging var canvas = null; var oval =null; var circle =null; var rect =null; // end debug variables document.addEventListener("DOMContentLoaded",function () {
// create the canvas for the user interaction
// canvas = new draw2d.Canvas("gfx\_holder");
cvs = new draw2d.Canvas("gfx_holder");
cvs.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());
cvs.installEditPolicy(new draw2d.policy.canvas.ExtendedKeyboardPolicy());

// install a custom connection create policy
// var router = new draw2d.layout.connection.InteractiveManhattanConnectionRouter();
cvs.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
    createConnection:function(){
        return new draw2d.Connection({
            radius:3,
            stroke:2,
            color: "#129CE4",
            outlineStroke:1,
            outlineColor:"#ffffff",
            router: router
        });
    }
})
);

// unmarshal the JSON document into the canvas
// (load)
var reader = new draw2d.io.json.Reader();
reader.unmarshal(cvs, jsonDocument);

var msg = new draw2d.shape.note.PostIt({
    text: "Example extension of a Jailhouse group with the feature expand/collapse\nDrag&Drop elements on the blue group, connect them and expand/collapse the group to see the effect"
});
cvs.add(msg, 20,20);
});
```

--------------------------------

### Initialize and Configure draw2d Canvas

Source: https://github.com/freegroup/draw2d/blob/master/jsdoc/public/examples/galerie_shape_basic/index.html

Initializes a draw2d canvas and installs essential edit policies for user interaction, such as decoration fading and snapping to a grid. This is the foundational step for using draw2d.

```javascript
document.addEventListener("DOMContentLoaded",function () {
 // create the canvas for the user interaction
 // canvas = new draw2d.Canvas("gfx_holder");
 canvas.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());
 canvas.installEditPolicy(new draw2d.policy.canvas.SnapToGridEditPolicy())
});
```

--------------------------------

### Initialize draw2d Canvas with Grid Policies

Source: https://github.com/freegroup/draw2d/blob/master/examples/buildin_zoom/index.html

This JavaScript code initializes a draw2d canvas and applies several edit policies to enable grid snapping and display. It ensures the DOM is ready before creating the application instance and installing the policies.

```javascript
document.addEventListener("DOMContentLoaded",function () {
  // Everything is loaded - core and application. Now can create the
  // application
  // var app = new example.Application();

  // 10 = Grid size
  // true = consider zoom and resize the grid
  app.view.installEditPolicy(new draw2d.policy.canvas.ShowGridEditPolicy());
  app.view.installEditPolicy(new draw2d.policy.canvas.SnapToGeometryEditPolicy());
  app.view.installEditPolicy(new draw2d.policy.canvas.SnapToInBetweenEditPolicy());
  app.view.installEditPolicy(new draw2d.policy.canvas.SnapToCenterEditPolicy());

  ////////////////////////////////////////////////////////////////////
  // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
  ////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({text: "A canvas has per default a mouse wheel zoom support.\nPress 'SHIFT' and the mouse wheel to zoom in/out."});
  app.view.add(msg, 20,20);
});
```

--------------------------------

### Initialize and Configure Draw2d Canvas

Source: https://github.com/freegroup/draw2d/blob/master/docs/examples/galerie_shape_basic/index.html

This snippet initializes a draw2d canvas and installs essential edit policies for user interaction, such as fading decorations and snapping to a grid. It sets up the environment for drawing and manipulating shapes on the canvas.

```javascript
document.addEventListener("DOMContentLoaded",function () {
  // create the canvas for the user interaction
  canvas = new draw2d.Canvas("gfx\_holder");
  canvas.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());
  canvas.installEditPolicy(new draw2d.policy.canvas.SnapToGridEditPolicy())
});
```

--------------------------------

### Initialize draw2d Canvas and Add Shapes

Source: https://github.com/freegroup/draw2d/blob/master/examples/connection_decoration/index.html

This snippet demonstrates the basic setup of a draw2d canvas within an HTML document. It waits for the DOM to be fully loaded before creating the canvas and adding Start and End nodes, along with a connection between them. Dependencies include the draw2d library and potentially jQuery for DOM manipulation. Inputs are the canvas ID and node positions. Outputs are drawn shapes on the canvas.

```javascript
var canvas = null;
document.addEventListener("DOMContentLoaded",function () {
  // Create the paint area.
  // The id in the constructor must be an existing DIV
  canvas = new draw2d.Canvas("gfx_holder");

  // create and add two nodes which contains Ports (In and OUT)
  var start = new draw2d.shape.node.Start({x:50, y:250});
  var end = new draw2d.shape.node.End({x:430, y:150});

  // ...add it to the canvas
  canvas.add( start);
  canvas.add( end);

  // Create a Connection and connect the Start and End node
  var c = new draw2d.Connection({
    sourceDecorator: new draw2d.decoration.connection.BarDecorator(),
    targetDecorator: new draw2d.decoration.connection.DiamondDecorator(),
    source: start.getOutputPort(0),
    target:end.getInputPort(0)
  });

  // and finally add the connection to the canvas
  canvas.add(c);
  c.toFront();

  // Add another source/target/connection combination with
  // another connection router
  // create and add two nodes which contains Ports (In and OUT)
  start = new draw2d.shape.node.Start({x:50, y:450});
  end = new draw2d.shape.node.End({x:430, y:350});

  canvas.add( start);
  canvas.add( end);

  c = new draw2d.Connection({
    router:new draw2d.layout.connection.DirectRouter(),
    sourceDecorator: new draw2d.decoration.connection.BarDecorator(),
    targetDecorator: new draw2d.decoration.connection.DiamondDecorator(),
    source: start.getOutputPort(0),
    target:end.getInputPort(0)
  });

  // override the color of the target decorator
  c.getTargetDecorator().setColor('#FF0000')
  canvas.add(c);

  /////////////////////////////////////////////////////////////////////
  // THIS IS ONLY FOR THE ARROW AND THE POST-IT
  /////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({text:"Add to the standard connector some endpoint decorations."
  });
  canvas.add(msg, 20,20);
  $("body").scrollTop(0)
  .scrollLeft(0);
});
```

--------------------------------

### Initialize and Configure draw2d Canvas and Shapes

Source: https://github.com/freegroup/draw2d/blob/master/docs/examples/buildin_bridge/index.html

This snippet sets up the draw2d canvas, installs grid and decoration policies, and defines a custom connection creation function. It then instantiates and adds several analog shapes (OpAmp, ResistorBridge, VoltageSupply, Fulcrum) to the canvas and connects them.

```javascript
var router = new draw2d.layout.connection.CircuitConnectionRouter();
router.abortRoutingOnFirstVertexNode=false;

var createConnection=function(sourcePort, targetPort){
  var c = new draw2d.Connection({
    outlineColor:"#ffffff",
    outlineStroke:1,
    color:"#000000",
    router: router,
    stroke:1,
    radius:2
  });
  if(sourcePort) {
    c.setSource(sourcePort);
    c.setTarget(targetPort);
  }
  return c;
};

document.addEventListener("DOMContentLoaded",function () {
  // create the canvas for the user interaction
  var canvas = new draw2d.Canvas("gfx_holder");
  canvas.installEditPolicy(new draw2d.policy.canvas.ShowGridEditPolicy());
  canvas.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());

  // install a Connection create policy which matches to a "circuit like"
  // connections
  canvas.installEditPolicy( new draw2d.policy.connection.ComposedConnectionCreatePolicy( [
    // create a connection via Drag&Drop of ports
    new draw2d.policy.connection.DragConnectionCreatePolicy({ createConnection:createConnection }),
    // or via click and point
    new draw2d.policy.connection.OrthogonalConnectionCreatePolicy({ createConnection:createConnection })
  ]));

  var amp =new draw2d.shape.analog.OpAmp();
  canvas.add(amp,90,50);

  var bridge=new draw2d.shape.analog.ResistorBridge()
  canvas.add(bridge,90,150);

  var voltage=new draw2d.shape.analog.VoltageSupplyHorizontal();
  canvas.add(voltage,230,110);

  var voltage2 = new draw2d.shape.analog.VoltageSupplyVertical();
  canvas.add(voltage2,20,350);
  canvas.add(new draw2d.shape.basic.Label({text:"draw2d.shape.analog.VoltageSupplyVertical"}),200,355);

  var resistor = new draw2d.shape.analog.ResistorVertical();
  canvas.add(resistor,50,450);
  canvas.add(new draw2d.shape.basic.Label({text:"draw2d.shape.analog.ResistorVertical"}),200,455);

  var fulcrum = new draw2d.shape.node.Fulcrum();
  canvas.add(fulcrum,280,270);

  // Create a Connection and connect the Start and End node
  // add the connection to the canvas as well
  canvas.add(createConnection(amp.getInputPort(0),bridge.getHybridPort(2)));
  canvas.add(createConnection(voltage.getHybridPort(0),bridge.getHybridPort(1)));
  canvas.add(createConnection(voltage2.getHybridPort(1),voltage.getHybridPort(0)));
  canvas.add(createConnection(fulcrum.getHybridPort(0),amp.getOutputPort(0)));

  canvas.getCommandStack().notifyListeners(null, draw2d.command.CommandStack.POST_EXECUTE);
});
```

--------------------------------

### Initialize draw2d Canvas and Add Nodes/Connections

Source: https://github.com/freegroup/draw2d/blob/master/docs/examples/connection_decoration/index.html

This JavaScript code initializes a draw2d canvas, creates 'Start' and 'End' nodes, and adds them to the canvas. It then creates connections between these nodes, demonstrating default routing and custom decorators. Finally, it adds a 'PostIt' note to the canvas.

```javascript
var canvas = null;
document.addEventListener("DOMContentLoaded",function () {
  // Create the paint area.
  canvas = new draw2d.Canvas("gfx_holder");

  // create and add two nodes which contains Ports (In and OUT)
  var start = new draw2d.shape.node.Start({x:50, y:250});
  var end = new draw2d.shape.node.End({x:430, y:150});

  // add it to the canvas
  canvas.add( start);
  canvas.add( end);

  // Create a Connection and connect the Start and End node
  var c = new draw2d.Connection({
    sourceDecorator: new draw2d.decoration.connection.BarDecorator(),
    targetDecorator: new draw2d.decoration.connection.DiamondDecorator(),
    source: start.getOutputPort(0),
    target:end.getInputPort(0)
  });

  // and finally add the connection to the canvas
  canvas.add(c);
  c.toFront();

  // Add another source/target/connection combination with
  // another connection router
  // create and add two nodes which contains Ports (In and OUT)
  start = new draw2d.shape.node.Start({x:50, y:450});
  end = new draw2d.shape.node.End({x:430, y:350});

  canvas.add( start);
  canvas.add( end);

  c = new draw2d.Connection({
    router:new draw2d.layout.connection.DirectRouter(),
    sourceDecorator: new draw2d.decoration.connection.BarDecorator(),
    targetDecorator: new draw2d.decoration.connection.DiamondDecorator(),
    source: start.getOutputPort(0),
    target:end.getInputPort(0)
  });

  // override the color of the target decorator
  c.getTargetDecorator().setColor('#FF0000')
  canvas.add(c);

  ////////////////////////////////////////////////////////////////////
  // THIS IS ONLY FOR THE ARROW AND THE POST-IT
  ////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({text:"Add to the standard connector some endpoint decorations."
  });
  canvas.add(msg, 20,20);

  $("body").scrollTop(0)
      .scrollLeft(0);
});
```

--------------------------------

### Initialize draw2d Canvas and Install Policies

Source: https://github.com/freegroup/draw2d/blob/master/jsdoc/public/examples/interaction_toFront/index.html

Initializes a new draw2d canvas within the 'gfx_holder' element and installs several edit policies. These policies enable extended keyboard operations (like undo), define how new connections are created with custom routing and appearance, and allow for basic click event handling on canvas figures. Dependencies include the draw2d library.

```javascript
var canvas;
document.addEventListener("DOMContentLoaded",function () {
    canvas = new draw2d.Canvas("gfx_holder");

    // extended keyboard policy for CTRL+Z undo operation
    // canvas.installEditPolicy( new draw2d.policy.canvas.ExtendedKeyboardPolicy());

    // ConnectionCreatePolicy to use my special kind of connections
    // canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
    //     createConnection: function(){
    //         var conn= new draw2d.Connection();
    //         conn.setRouter(new draw2d.layout.connection.InteractiveManhattanConnectionRouter());
    //         conn.setOutlineStroke(1);
    //         conn.setOutlineColor("#303030");
    //         conn.setStroke(2);
    //         conn.setColor('#00A8F0');
    //         conn.setRadius(5);
    //         return conn;
    //     }
    // }));

    // add a very simple CnavasPolicy just to catch the onClick method
    // canvas.installEditPolicy( new draw2d.policy.canvas.CanvasPolicy({
    //     onClick: function(figure){
    //         if(figure!=null)
    //             figure.toFront();
    //     }
    // }));

    // unmarshal the JSON document into the canvas // (load)
    var reader = new draw2d.io.json.Reader();
    reader.unmarshal(canvas, jsonDocument);

    ////////////////////////////////////////////////////////////////////
    // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
    ////////////////////////////////////////////////////////////////////
    var msg = new draw2d.shape.note.PostIt({text:"Click on one shape to change the z-order of the element."});
    canvas.add(msg, 20,20);
});
```

--------------------------------

### Initialize draw2d Canvas and Add Elements

Source: https://github.com/freegroup/draw2d/blob/master/examples/connection_drop/index.html

This code snippet initializes a draw2d.Canvas on DOMContentLoaded, installs an edit policy for creating connections via drag-and-drop, and adds 'Start' and 'End' nodes along with a connection between them. It also demonstrates adding a custom 'BetweenFigure' and a 'PostIt' note to the canvas.

```javascript
var canvas = null;
document.addEventListener("DOMContentLoaded",function () {
  // Everything is loaded - core and application. Now can create the
  // application
  // canvas = new draw2d.Canvas("gfx_holder");
  // Install a special policy into the canvas to use my own implementation of connection
  // if we drag&drop a port
  // canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
  //   createConnection: createConnection
  // }));
  // This is the key!! The interceptor allows that a figure is droppable to a
  // connection
  // canvas.installEditPolicy(new MyInterceptorPolicy());
  // Create two standard nodes for "start" and "end" and link
  // this figures with a standard Connector
  // var start = new draw2d.shape.node.Start({x:130,y:130,width:60,height:60});
  // var end = new draw2d.shape.node.End({x:450,y:250});
  // canvas.add(start);
  // canvas.add(end);
  // Add a connection via API calls between Start and Stop
  // var connection =createConnection(start.getOutputPort(0),end.getInputPort(0));
  // canvas.add(connection);
  // Add my implemention of a "Between" figure for the smart insert feature
  // inspect the "Between.onDrop" method for more details
  // canvas.add( new BetweenFigure({x:250,y:340}));
  // /////////////////////////////////////////////////////////////////////
  // // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN //
  // /////////////////////////////////////////////////////////////////////
  // var msg = new draw2d.shape.note.PostIt({
  //   text:"Drag&Drop the orange box onto the connector.\nThe orange box will be injected into the Connection.\n \nSmart - right?"
  // });
  // canvas.add(msg, 20,20);
});
```

--------------------------------

### draw2d Canvas Initialization and Shape Creation (JavaScript)

Source: https://github.com/freegroup/draw2d/blob/master/jsdoc/public/examples/connection_rubberband/index.html

This snippet initializes a draw2d canvas, installs an edit policy for connection creation, and adds two rectangles with hybrid ports. It demonstrates how to create basic shapes, position them, assign background colors, and attach ports for connections. The `DragConnectionCreatePolicy` is used to enable interactive connection drawing.

```javascript
document.addEventListener("DOMContentLoaded",function () {
 var canvas = new draw2d.Canvas("gfx_holder");
 canvas.setScrollArea($(window));
 canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
  createConnection: createConnection
 }));

 var rect1 = new draw2d.shape.basic.Rectangle({
  x:350,
  y:50,
  width:120,
  height:50,
  bgColor:'#3366FF'
 });
 var rect2 = new draw2d.shape.basic.Rectangle({
  x:50,
  y:150,
  width:120,
  height:50,
  bgColor:'#3366FF'
 });

 rect1.createPort("hybrid", new draw2d.layout.locator.LeftLocator(rect1));
 canvas.add(rect1);
 rect2.createPort("hybrid", new draw2d.layout.locator.RightLocator(rect2));
 canvas.add(rect2);

 var c =createConnection(rect1.getHybridPort(0), rect2.getHybridPort(0));
 canvas.add(c);

 var msg = new draw2d.shape.note.PostIt({
  text:"Move the blue box arround to see the rubber band effect of the connection."
 });
 canvas.add(msg, 20,20);
});
```

--------------------------------

### Initialize draw2d Canvas and Add Shapes (JavaScript)

Source: https://github.com/freegroup/draw2d/blob/master/examples/port_non_grow/index.html

This snippet initializes a draw2d canvas within a 'gfx_holder' element and adds several shapes, including start and end points of different types, and a PostIt note with instructional text. It requires the draw2d library to be included.

```JavaScript
document.addEventListener("DOMContentLoaded", function () {
  var canvas = new draw2d.Canvas("gfx_holder");
  canvas.add(new StartTypA(), 100, 100);
  canvas.add(new EndTypA(), 500, 100);
  canvas.add(new StartTypB(), 100, 300);
  canvas.add(new EndTypB(), 500, 300);

  // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
  var msg = new draw2d.shape.note.PostIt({
    text: "Only ports in the same 'semanticGroup' can be connected.\nDrag&Drop a 'red' port and try to connect them to a 'green' one.",
    x: 20,
    y: 20
  });
  canvas.add(msg);
});
```

--------------------------------

### Initialize draw2d Canvas and Edit Policies

Source: https://github.com/freegroup/draw2d/blob/master/docs/examples/connection_dotted/index.html

This snippet demonstrates the initialization of a draw2d canvas within a DOMContentLoaded event. It installs a decoration policy for visual feedback and a connection creation policy to customize the appearance of new connections. Dependencies include the draw2d library and potentially jQuery for DOM manipulation.

```javascript
document.addEventListener("DOMContentLoaded",function () {
  // create the paint area. The id in the constructor must be
  // an existing DIV
  var canvas = new draw2d.Canvas("gfx_holder");
  canvas.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());

  // Override the default connection type. This is used during drag&drop operations of ports.
  canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
    createConnection: function() {
      // return my special kind of connection
      var con = new draw2d.Connection({
        "dasharray":"- ",
        "stroke":3
      });
      return con;
    }
  }));

  // create and add two Node which contains Ports (In and OUT)
  var start = new draw2d.shape.node.Start({x:50, y:250});
  var endNode= new draw2d.shape.node.End({x:230, y:150});
  canvas.add( start);
  canvas.add( endNode);

  ////////////////////////////////////////////////////////////////////
  // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
  ////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({text:"connect two ports to se a dotted line as connection."});
  canvas.add(msg, 20,20);
  $("body").scrollTop(0)
      .scrollLeft(0);
});
```

--------------------------------

### Initialize draw2d Canvas and Editing Policies (JavaScript)

Source: https://github.com/freegroup/draw2d/blob/master/examples/connection_dotted/index.html

This snippet shows the initialization of a draw2d canvas within a specific HTML element, installation of editing policies for visual feedback (FadeoutDecorationPolicy), and configuration for custom connection creation during drag-and-drop operations. It requires the draw2d library and jQuery.

```javascript
document.addEventListener("DOMContentLoaded",function () {
  // create the paint area. The id in the constructor must be
  // an existing DIV
  var canvas = new draw2d.Canvas("gfx_holder");
  canvas.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());

  // Override the default connection type. This is used during drag&drop operations of ports.
  canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
    createConnection: function() {
      // return my special kind of connection
      var con = new draw2d.Connection({
        "dasharray":"- ",
        "stroke":3
      });
      return con;
    }
  }));

  // create and add two Node which contains Ports (In and OUT)
  var start = new draw2d.shape.node.Start({x:50, y:250});
  var endNode= new draw2d.shape.node.End({x:230, y:150});
  canvas.add( start);
  canvas.add( endNode);

  /////////////////////////////////////////////////////////////////////
  // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
  /////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({text:"connect two ports to se a dotted line as connection."});
  canvas.add(msg, 20,20);
  $("body").scrollTop(0)
    .scrollLeft(0);
});
```

--------------------------------

### Initialize draw2d Canvas and Add Figures (JavaScript)

Source: https://github.com/freegroup/draw2d/blob/master/jsdoc/public/examples/policy_selectionmenu/index.html

This snippet shows the basic setup for a draw2d canvas. It initializes the canvas, creates two custom figures ('start' and 'end'), and adds them to specific coordinates on the canvas. It also adds a 'PostIt' note figure for user interaction prompts. Dependencies include the draw2d library.

```javascript
var textFigure = null;
var canvas = null;
document.addEventListener("DOMContentLoaded",function () {
 canvas = new draw2d.Canvas("gfx_holder");
 let start = new CustomFigure();
 let end = new CustomFigure();
 canvas.add( start, 50,250);
 canvas.add( end, 630,250);
 var msg = new draw2d.shape.note.PostIt({
  text:"Show a figure flyout menu if an element is selected.\nSelect an shape and press the 'delete' icon."
 });
 canvas.add(msg, 20,20);
});
```

--------------------------------

### Initialize draw2d Canvas and Add Shapes

Source: https://github.com/freegroup/draw2d/blob/master/docs/examples/connection_locator/index.html

This event listener initializes a draw2d canvas on the 'gfx_holder' div and populates it with Start and End nodes. It also demonstrates creating a connection between a Start and an End node and adding a PostIt note to the canvas. Dependencies include the draw2d library and potentially jQuery.

```javascript
document.addEventListener("DOMContentLoaded",function () {
  // Create the paint area. The id in the constructor must be
  // an existing DIV
  var canvas = new draw2d.Canvas("gfx_holder");
  var start;
  var end;
  canvas.add( new draw2d.shape.node.Start(), 50,150);
  canvas.add( start= new draw2d.shape.node.Start(), 50,250);
  canvas.add( new draw2d.shape.node.Start(), 50,350);
  canvas.add( new draw2d.shape.node.Start(), 50,450);
  canvas.add( end = new draw2d.shape.node.End(), 300,150);
  canvas.add( new draw2d.shape.node.End(), 300,250);
  canvas.add( new draw2d.shape.node.End(), 300,350);
  canvas.add( new draw2d.shape.node.End(), 300,450);

  // Create a Connection and connect the Start and End node
  // var c = createStandardConnection(new draw2d.layout.locator.ParallelMidpointLocator());
  // c.setSource(start.getOutputPort(0));
  // c.setTarget(end.getInputPort(0));
  // canvas.add(c);

  /////////////////////////////////////////////////////////////////////
  // THIS IS ONLY FOR THE ARROW AND THE POST-IT
  /////////////////////////////////////////////////////////////////////
  var msg = new draw2d.shape.note.PostIt({text:"Drag&Drop the blue box and notice the label.\nIt sticks always in the middle of the connector.\nCreate new a connection to choose the kind of locator."
  });
  canvas.add(msg, 20,20);

  /* canvas.installEditPolicy( 
   new draw2d.policy.connection.DragConnectionCreatePolicy({
    createConnection: createConnection 
   })
  );*/
});
```

--------------------------------

### Initialize and Configure draw2d Canvas and Connection Router

Source: https://github.com/freegroup/draw2d/blob/master/examples/buildin_bridge/index.html

This snippet initializes a draw2d canvas with grid and decoration policies. It also sets up a CircuitConnectionRouter for creating circuit-like connections between nodes. Dependencies include the draw2d library.

```javascript
var router = new draw2d.layout.connection.CircuitConnectionRouter();
router.abortRoutingOnFirstVertexNode = false;

var createConnection = function(sourcePort, targetPort) {
    var c = new draw2d.Connection({
        outlineColor: "#ffffff",
        outlineStroke: 1,
        color: "#000000",
        router: router,
        stroke: 1,
        radius: 2
    });
    if (sourcePort) {
        c.setSource(sourcePort);
        c.setTarget(targetPort);
    }
    return c;
};

document.addEventListener("DOMContentLoaded", function() {
    var canvas = new draw2d.Canvas("gfx_holder");
    canvas.installEditPolicy(new draw2d.policy.canvas.ShowGridEditPolicy());
    canvas.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());

    // Example of installing a connection create policy (commented out in original)
    /*
    canvas.installEditPolicy( new draw2d.policy.connection.ComposedConnectionCreatePolicy([
        new draw2d.policy.connection.DragConnectionCreatePolicy({ createConnection: createConnection }),
        new draw2d.policy.connection.OrthogonalConnectionCreatePolicy({ createConnection: createConnection })
    ]));
    */
});
```

--------------------------------

### Initialize and Populate draw2d Canvases (JavaScript)

Source: https://github.com/freegroup/draw2d/blob/master/jsdoc/public/examples/canvas_drag_drop/index.html

This JavaScript code initializes two draw2d canvases, installs editing policies for interaction and decoration, and adds various shapes and a note to the first canvas. It also adds shapes to the second canvas, demonstrating a multi-canvas setup.

```javascript
var canvas1 = null; 
var canvas2 = null;

document.addEventListener("DOMContentLoaded",function () {
    // create the canvas for the user interaction
    // canvas1 = new draw2d.Canvas("gfx_holder1");
    canvas1.installEditPolicy(new CopyInterceptorPolicy());
    canvas1.paper.canvas.style.position="relative";
    canvas1.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());
    canvas1.add(new draw2d.shape.basic.Circle({diameter: 80, x: 50, y: 150}));
    canvas1.add(new draw2d.shape.basic.Rectangle({width: 80, height: 40, x: 50, y: 300, keepAspectRatio: true}));
    canvas1.add(new draw2d.shape.basic.Diamond({width: 40, height: 60, x: 50, y: 450}));
    canvas1.add(new draw2d.shape.node.Start({x:50, y:250}));
    canvas1.add(new draw2d.shape.node.End({x:230, y:150}));

    ////////////////////////////////////////////////////////////////////
    // JUST ADD SOME DOCU ELEMENTS ON THE SCREEN
    ////////////////////////////////////////////////////////////////////
    var msg = new draw2d.shape.note.PostIt({text: "Press SHIFT key before drag&drop to copy a figure.\nYou can drop them on the second canvas as well."});
    canvas1.add(msg, 20,20);

    // create the canvas for the user interaction
    // canvas2 = new draw2d.Canvas("gfx_holder2");
    canvas2.installEditPolicy(new CopyInterceptorPolicy());
    canvas2.paper.canvas.style.position="relative";
    canvas2.installEditPolicy(new draw2d.policy.canvas.FadeoutDecorationPolicy());
    canvas2.add(new draw2d.shape.basic.Circle({diameter: 80, x: 50, y: 150}));
    canvas2.add(new draw2d.shape.basic.Rectangle({width: 80, height: 40, x: 50, y: 300, keepAspectRatio: true}));
    canvas2.add(new draw2d.shape.basic.Diamond({width: 40, height: 60, x: 50, y: 450}));
});
```

--------------------------------

### Initialize and Load draw2d Application

Source: https://github.com/freegroup/draw2d/blob/master/docs/examples/connection_router/index.html

Initializes the draw2d application and loads a JSON document. It optionally displays a JSON serialization panel and sets up an event listener for canvas changes.

```javascript
var showJSON = false;
var app;

document.addEventListener("DOMContentLoaded", function() {
  app = new example.Application();
  app.load(jsonDocument);

  if (showJSON === true) {
    // display the JSON document in the preview DIV
    // displayJSON(app.view);

    // add an event listener to the Canvas for change notifications.
    // We just dump the current canvas document into the DIV
    app.view.getCommandStack().addEventListener(function(e) {
      if (e.isPostChangeEvent()) {
        displayJSON(app.view);
      }
    });
  }
});
```

--------------------------------

### Create Draw2d Connection with Context Menu

Source: https://github.com/freegroup/draw2d/blob/master/examples/connection_locator/index.html

Function to create a draw2d connection, dynamically generating a context menu to allow the user to select a connection locator. It appends the menu to the body, positions it, and handles click events to create the connection with the chosen locator.

```javascript
var createConnection=function(sourcePort, targetPort, callback, dropTarget){
  // get the coordinate of the drop target element to place the context menu in a propper
  // way
  // var pos = dropTarget.getAbsolutePosition();
  var context = $('<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">'+ 
    '<li><a data-locator="draw2d.layout.locator.ParallelMidpointLocator" tabindex="-1" href="#">Parallel Label</a></li>'+ 
    '<li><a data-locator="draw2d.layout.locator.ManhattanMidpointLocator" tabindex="-1" href="#">Horizontal Label</a></li>'+ 
  '</ul>');
  $("body").append(context);
  context.show()
    .css({left:pos.x, top:pos.y}) 
    .find("a").on("click", function(){
      context.remove();
      var locator = eval("new "+$(this).data("locator")+"()");
      var connection = createStandardConnection(locator);
      callback(connection);
    });
};
```