Hey,
I am new to Gojs and was trying to create an application that allows the user to drag and drop images from a palette. I wishing that the images dropped on the diagram could be resizable and can be rotated. How could I implement it?
Really thankful for the help.
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
padding: 20, // extra space when scrolled all the way
grid: $(go.Panel, "Grid", // a simple 10x10 grid
$(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
$(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 })
),
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
minSize: new go.Size(40, 40),
resizable: true, resizeCellSize: new go.Size(20, 20)
},
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Shape, "Circle",
{
fill: "white", stroke: "gray", strokeWidth: 2,
portId: "", fromLinkable: true, toLinkable: true,
fromLinkableDuplicates: true, toLinkableDuplicates: true,
fromLinkableSelfNode: true, toLinkableSelfNode: true
},
new go.Binding("stroke", "color"),
new go.Binding("figure")),
$(go.TextBlock,
{
margin: new go.Margin(5, 5, 3, 5), font: "10pt sans-serif",
minSize: new go.Size(16, 16), maxSize: new go.Size(120, NaN),
textAlign: "center", editable: true
},
new go.Binding("text").makeTwoWay()),
$(go.Picture,
{width:50,height:50},
new go.Binding("source"))
);
myPalette2 = $(go.Palette,"myPaletteDiv2",
{
nodeTemplate:myDiagram.nodeTemplate,
contentAlignment:go.Spot.Center,
layout:
$(go.GridLayout,{
wrappingColumn:1,cellSize:new go.Size(2,2)
})
});
myPalette2.model.nodeDataArray = [
{source:"1.png"},
{source:"2.png"},
{source:"3.png"},
];
The element although is resizable but the image size remains constant . How can allow the image to resize too