How to add icons to LinkReshapingTool corner bassed on horizantal,vertical,none and all

GoJS
1

in the above image i need to add the one image for horizontal reshaping, one foe vertical reshaping and one more for all direction reshaping am facing problems to set the image for particular reshaping edge please help me anyone to solve it.

2

The LinkReshapingTool already sets the GraphObject.cursor appropriately on each reshaping handle of the Adornment. Are you wanting to change the appearance of each reshaping handle to have either four arrows or two arrows up/down or two arrows left/right all the time? That is, not depending on mouse-over effects to change the cursor?

3

I want to add 3 images like horizontal reshaping,vertical and then four direction images where cross curser is coming.
But this images Shuld display when I select the link not on mouse hover .

4

I want to add the different images to different handles

5 
  function ArrowHandlesLinkReshapingTool() {
    go.LinkReshapingTool.call(this);
  }
  go.Diagram.inherit(ArrowHandlesLinkReshapingTool, go.LinkReshapingTool);

 ArrowHandlesLinkReshapingTool.prototype.setHandleGeometry = function(h, geostr) {
    h.stroke = "blue";
    h.background = "transparent";
    h.desiredSize = new go.Size(NaN, NaN);
    h.geometryString = geostr;
  }

  ArrowHandlesLinkReshapingTool.prototype.makeAdornment = function(pathshape) {
    // add all normal handles first
    var adornment = go.LinkReshapingTool.prototype.makeAdornment.call(this, pathshape);
    // change Shape.geometry for each handle according to its GraphObject.cursor value
    var it = adornment.elements;
    while (it.next()) {
      var h = it.value;
      switch (h.cursor) {
        case "move":
          this.setHandleGeometry(h, "M4 0 L4 8 M2.5 1.5 L4 0 5.5 1.5 M2.5 6.5 L4 8 5.5 6.5 M0 4 L8 4 M1.5 2.5 L0 4 1.5 5.5 M6.5 2.5 L8 4 6.5 5.5");
          break;
        case "n-resize":
        case "s-resize":
        case "ns-resize":
        case "row-resize":
          this.setHandleGeometry(h, "M4 0 L4 8 M2 2 L4 0 6 2 M2 6 L4 8 6 6");
          break;
        case "w-resize":
        case "e-resize":
        case "ew-resize":
        case "col-resize":
          this.setHandleGeometry(h, "M0 4 L8 4 M2 2 L0 4 2 6 M6 2 L8 4 6 6");
          break;
      }
    }
    return adornment;
  };

Install by replacing the standard LinkReshapingTool:

  $(go.Diagram, "myDiagramDiv",
    { . . .,
      linkReshapingTool: new ArrowHandlesLinkReshapingTool(),
      . . .
    })

Here are the results, zoomed in for more detail:

Of course you can customize the geometry path strings and stroke and any other properties of the Shape if you want different appearances for those reshape handles.

6

Thank you
Is there any chances of adding .svg images
Instead of this geometry shapes?
I need to add the images here

7

Set LinkReshapingTool.handleArchetype to a Picture, or whatever else that you want. Read more about SVG Pictures at GoJS Pictures -- Northwoods Software.

But note that if you change it to not be a Shape, the code I gave you above won’t work any more, since it assumes the handles are Shapes.

8

Yes I tried LinkReshapingTool.handleArchetype
If I set here it will apply for all the places same image
I can’t differentiate and add different images in place of horizontal, vertical and all direction place ,
Is there any possibility of using setreshapeBehevior()
Passing options like All,Horizontal and Vertical

9

Adapt the code that I gave you, above.

10

Ok then,
how to add different .svg or .png files here