How to allow element from Palette to be resizable in the diagram?

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

You haven’t set Part.rotatable and maybe related properties, either.

You might want to read https://gojs.net/latest/intro/tools.html#ResizingTool and the following section about the RotatingTool.

You need to decide which object you really want the user to resize or rotate.

Thanks a lot !!
Really love Go.js its an amazing tool for developers!!