Skip to content

Node Creation from External Object

Dragging object from within the browser

Common Canvas supports the ability for an object from the your browser page to be dragged onto the canvas to initiate the creation of a node on the canvas. To do this you need to set the object you want to drag into the canvas to be draggable:

    <div
      draggable="true"
      onDragStart={this.onDragStart}
      onDragOver={this.onDragOver}>
      ....
      ....
    </div>
and then specify the on drag behavior like this 
    onDragStart(ev) {
       const evData = {
          operation: "addToCanvas",
          data: {
             editType: "createExternalNode",
             field1: "field_val_1",
             field2: "field_val_2"
             ....
             ....
          }
       };
       ev.dataTransfer.setData("text", JSON.stringify(evData));
    }
where

  • operation - is always set to “addToCanvas”
  • data - is the object that will be passed to the editActionHandler callback
  • editType - this is the type of editing operation. You can set it to anything except any of the reserved settings which are: ‘createNode’, ‘createNodeOnLink’, ‘createAutoNode’ and ‘createFromExternalObject’.
  • fields - an optional number of fields can be provided that describe the object you are dragging onto the canvas. For example, if it is a data object the fields might describe the data source details.

After the object has been dropped on the canvas your editActionHandler() callback method will be called with a parameter data object that contains the fields you specified in data in the drag data along with three additional fields, called pipelineId, offsetX and offsetY, containing the x,y co-ordinates of where the drop occurred. In your editActionHandler() method you can use the CanvasController API to add a node to the pipeline flow and get Common Canvas to display it.

Dragging object from the desktop or another application

If an object from the desktop or another application is dropped on the canvas your editActionHandler(data) method will be called with the data parameter set to an object like this: 

    {
       dataTransfer: <The event data from the drag operation>,
       editType: "createFromExternalObject",
       editSource: "canvas",
       offsetX: 200,
       offsetY: 100,
       pipelineId: "1234-5678"
    }
Your code can examine the dataTransfer object to see what object was dragged onto the canvas and then take appropriate action.

If you want a new node to appear on the canvas as a result of the object being dropped your code will need to create that node at the point where the drop occurred, using the Canvas Controller API. Here is some sample code that will

  • create a new node template based on the “variablefile” node in the palette data
  • set the label of the node to be created to the name of the file being dropped
  • create a new node on the canvas at the offsetX, offsetY position
  • the command will be added to the command-stack so the user can click undo to undo the addition of the node

data is the parameter passed into your editActionHandler method. 

    if (data.editType === "createFromExternalObject") {
        const nodeTemplate = canvasController.getPaletteNode("variablefile");
        if (nodeTemplate) {
            const convertedTemplate = canvasController.convertNodeTemplate(nodeTemplate);
            convertedTemplate.label = data.dataTransfer.files[0].name;
            const action = {
                editType: "createNode",
                nodeTemplate: convertedTemplate,
                pipelineId: data.pipelineId,
                offsetX: data.offsetX,
                offsetY: data.offsetY
            };
            canvasController.editActionHandler(action);
    }

Tip: You can optionally instruct Common Canvas to display a graphic over the canvas as the external object is being dragged over it. To do this you need to specify the enableDropZoneOnExternalDrag configuration parameter.