htmlDragDrop Sample to have more node data

How can i have different types of nodes from different HTML buttons,

myDiagram.nodeTemplateMap.add(

  "", // default category

  $(

    go.Node,

    "Auto",

    {

      locationSpot: go.Spot.Center,

    },

   

    {

      rotatable: true,

      rotateObjectName: "SHAPE",

      // isShadowed: true,

      // shadowOffset: new go.Point(2, 2),

      // shadowBlur: 8,

      // selectionAdorned: false,

    },

    //remember to remove the blue line decoration on selection

    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(

      go.Point.stringify

    ),

    $(

      go.Panel,

      "Verticle",

      { margin: 0 },

      $(

        go.Picture,

        {

          source: "", name: "SHAPE",

        },

        new go.Binding("source", "source").makeTwoWay()

      )

    ),

    $(

      go.Shape,

      "Ellipse",

      {

        strokeWidth: 2,

        fill: "green",

        name: "SHAPE",

        // click: printKey,

      }, //changing name for testing resize feature.

      new go.Binding("figure", "figure"),

      new go.Binding("fill", "fill"),

      new go.Binding("stroke", "stroke"),

      new go.Binding("name", "name"),

      new go.Binding("strokeWidth", "strokeWidth"),

      new go.Binding("height", "height"),

      new go.Binding("width", "width"),

      new go.Binding("source", "source").makeTwoWay(),

      new go.Binding("key", "figure", (fig) => {

        if (fig === "circle" || fig === "rectangle" || fig === "square") {

          console.log(fig);

          current_selection = uuidv4();

          return current_selection;

        }

      })

    ),

    $(

      go.TextBlock,

      {

        margin: 2,

        // maxSize: new go.Size(200, NaN),

        // wrap: go.TextBlock.WrapFit,

        // textAlign: "center",

        editable: true,

        font: "bold 10.5pt Inter, sans-serif",

        name: "TEXT",

        background: "Transparemt",

        width: 35,

        overflow: go.TextBlock.OverflowEllipsis,

        maxLines: 1,

        editable: true,

      },

      new go.Binding("text", "text").makeTwoWay(),

      new go.Binding("textAlign", "textAlign"),

      new go.Binding("overflow", "textareaOverflow"),

      new go.Binding("wrap", "wrap"),

      new go.Binding("font", "textareaFont"),

      new go.Binding("background", "background"),

      new go.Binding("alignment", "TextAlignment"),

      new go.Binding("margin", "Textmargin"),

      new go.Binding("width", "textareaWidth"),

      new go.Binding("maxLines", "textareaMaxLines")

    )

  )

);

if (div === myDiagram.div) {

      var can = event.target;

      var pixelratio = myDiagram.computePixelRatio();

      if (!(can instanceof HTMLCanvasElement)) return;

      var bbox = can.getBoundingClientRect();

      var bbw = bbox.width;

      if (bbw === 0) bbw = 0.001;

      var bbh = bbox.height;

      if (bbh === 0) bbh = 0.001;

      var mx =

        event.clientX -

        bbox.left * (can.width / pixelratio / bbw) -

        dragged.offsetX;

      console.log(mx);

      var my =

        event.clientY -

        bbox.top * (can.height / pixelratio / bbh) -

        dragged.offsetY;

      console.log(my);

      var point = myDiagram.transformViewToDoc(new go.Point(mx, my));

      console.log(point);

      myDiagram.startTransaction("new node");

      myDiagram.model.addNodeData({

        location: point,

        // text: event.dataTransfer.getData('text'),

        fill: "Transparent",

        stroke: "Transparent",

        width: 24,

        height: 24,

        figure: "square",

        source: event.dataTransfer.getData("source"),

        resizable: false,

        rotatable: true,

        selectionAdorned: true,

      });

      myDiagram.commitTransaction("new node");

    }

I do not understand the question. It seems to me that one HTML button could call Model.addNodeData with a data object that has one set of properties/values, and the other button could call it with a different object with different properties/values.

In particular the category property could refer to different template names.

lets say for example:
< div class=“draggable” " draggable=“true”> Pizza </ div >
< div class=“draggable” " draggable=“true”> Burger </ div >
are two html btn with event listners as following

document.addEventListener(

  "dragstart",

  (event) => {

    if (event.target.className !== "draggable") return;

    // Some data must be set to allow drag

    event.dataTransfer.setData("text", event.target.textContent);

    event.dataTransfer.setData("source", event.target.textContent);

    // store a reference to the dragged element and the offset of the mouse from the center of the element

    dragged = event.target;

    console.log("Dragged");

    dragged.offsetX = event.offsetX - dragged.clientWidth / 2;

    dragged.offsetY = event.offsetY - dragged.clientHeight / 2;

    // Objects during drag will have a red border

    event.target.style.border = "2px solid red";

  },

  false

); 

now the div event listner
div.addEventListener(

  "drop",

  (event) => {

    // prevent default action

    // (open as link for some elements in some browsers)

    event.preventDefault();

    // Dragging onto a Diagram

    if (div === myDiagram.div) {

      var can = event.target;

      var pixelratio = myDiagram.computePixelRatio();

      // if the target is not the canvas, we may have trouble, so just quit:

      if (!(can instanceof HTMLCanvasElement)) return;

      var bbox = can.getBoundingClientRect();

      var bbw = bbox.width;

      if (bbw === 0) bbw = 0.001;

      var bbh = bbox.height;

      if (bbh === 0) bbh = 0.001;

      var mx =

        event.clientX -

        bbox.left * (can.width / pixelratio / bbw) -

        dragged.offsetX;

      console.log(mx);

      var my =

        event.clientY -

        bbox.top * (can.height / pixelratio / bbh) -

        dragged.offsetY;

      console.log(my);

      var point = myDiagram.transformViewToDoc(new go.Point(mx, my));

      console.log(point);

      myDiagram.startTransaction("new node");

      myDiagram.model.addNodeData({

        location: point,

        text: "...",

        textAlign: "center",

        wrap: go.TextBlock.WrapFit,

        // text: event.dataTransfer.getData('text'),

        fill: "Transparent",

        stroke: "Transparent",

        width: 24,

        height: 24,

        figure: "circle",

        source: event.dataTransfer.getData("source"),

        resizable: false,

        rotatable: true,

        selectionAdorned: true,

      });

      myDiagram.commitTransaction("new node");

      // remove dragged element from its old location

      // if (remove.checked) dragged.parentNode.removeChild(dragged);

    }

    // If we were using drag data, we could get it here, ie:

    // var data = event.dataTransfer.getData('text');

  },

  false

);

will only allow to add one similar node for both btns, but what if i want to have separate node for separate btn. I want the new nodes to be created as “Pizza Node” & “Burger Node” so that i can have different properties in myDiagram.model.addNodeData({});

At the source you could save additional properties on the dataTransfer object that you could read at the drop to elaborate/customize/extend the node data object that you add to the model. Or you could look at more details of the dragged element, if that element is available.

I was able to achieve with changing class names and triggering dataTransfer object inside if else statement. It worked, Thanks Walter!