Skip to content

Node Creation from External Object

Dragging object from within the browser

Common Canvas can be extended to allow an object from the browser page to be dragged onto the canvas to initiate the creation of a node on the canvas. To do this the application should set the object that is to be dragged onto 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. This can be set 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 being dragged 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, the editActionHandler() callback method will be called with a parameter which is an object that contains the fields 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. Inside the editActionHandler() method the application can use the CanvasController API to create a node and add it 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 the editActionHandler(data) callback 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"
    }
The application can examine the dataTransfer object to see what object was dragged onto the canvas and then take appropriate action.

If the application decides a new node should appear on the canvas as a result of the object being dropped it 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 the editActionHandler callback 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: The application can optionally instruct Common Canvas to display a graphic over the canvas as the external object is being dragged over it. To do this, specify the enableDropZoneOnExternalDrag configuration parameter.

Additionally, the application can specify what is displayed when the external object is being dragged over it, by specifying the dropZoneCanvasContent config property.