title: Make spots on shapes by clicking on the shape in GOJS
body: <p>I am using GOJS and I want to make a spot whenever I click on the shape .The spot should appear exactly on the position where I clicked on the shape.Can I do that?
  here is my code i added the spots or ports hardcoded</p>
  
  <pre><code>function makePort(name, spot, output, input) {
        return GO(go.Shape, "Circle",
                 {
                    fill: "grey",  
                    stroke: null,
                    desiredSize: new go.Size(10, 10),
                    alignment: spot, 
                    alignmentFocus: spot,  
                    portId: name, 
                    fromSpot: spot, toSpot: spot,  
                    fromLinkable: output, toLinkable: input,  
                    cursor: "pointer"  
                 });
      }
   myDiagram.nodeTemplate =
       GO(go.Node, "Spot",
       {
  
         selectionAdorned: false,  // don't show the standard selection handle
         resizable: true, resizeObjectName: "SHAPE",  // user can resize the Shape
          rotatable: true, rotateObjectName: "SHAPE",  // user can rotate the Shape
                                                       // without rotating the label
          layoutConditions: go.Part.LayoutStandard &amp; ~go.Part.LayoutNodeSized
        },
        new go.Binding("location", "loc").makeTwoWay(),  // TwoWay Binding // Binds diagram and model location with eachother 
        a = GO(go.Shape,
          {
            click:click1,
            name: "SHAPE",
            width: 70, height: 70,
            stroke: "#000000",
            fill: "transparent",
            //angle: 45,
            strokeWidth: 1
          },
          new go.Binding("figure","fig"),
          new go.Binding("name_shape", "key"),
         new go.Binding("angle", "ang").makeTwoWay(),  // Binds diagram and model angle with eachother 
          // new go.Binding("desiredSize", "size").makeTwoWay(), // Binds diagram and model size with eachother 
          new go.Binding("geometryString", "geometry").makeTwoWay()),// Binds diagram and model geometry string with eachother 
        // GO(go.Shape,"Circle",  // the "A" port
        //       { width: 20, height: 20, portId: "A",stroke:null,toSpot: go.Spot.Left}),
        /*GO(go.Panel, "Vertical",
          GO(go.TextBlock,
            new go.Binding("text", "fig")),
          GO(go.TextBlock, { stroke: "blue" },
            new go.Binding("text", "parameter1", function(p1) { return p1; }).ofObject("SHAPE"))
        )*/
         // GO(go.Shape,  // the "A" port
         //      { width: 6, height: 6, portId: "A" }),
  
        // four small named ports, one on each side:
          makePort("T", go.Spot.Top, false, true),
          makePort("L", go.Spot.Left, true, true),
          makePort("TL", go.Spot.TopLeft, true, true),
          makePort("BL", go.Spot.BottomLeft, true, true),
          makePort("R", go.Spot.Right, true, true),
          makePort("TR", go.Spot.TopRight, true, true),
          makePort("BR", go.Spot.BottomRight, true, true),
          makePort("B", go.Spot.Bottom, true, true),
          makePort("C",go.Spot.Center,true,true),
  
          { // handle mouse enter/leave events to show/hide the ports
            mouseEnter: function(e, node) { showSmallPorts(node, true); },
            mouseLeave: function(e, node) { showSmallPorts(node, false); }
          }
      );
  
       function showSmallPorts(node, show) {
        node.ports.each(function(port) {
          if (port.portId !== "") {  // don't change the default port, which is the big shape
            port.fill = show ? "rgba(0,0,0,.3)" : null;
          }
        });
  </code></pre>