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");
}