Resizeable shape misalignment and shape getting distorted

GoJS
1

I have this NOTE shape from bpmn shapes, when Im trying to make it resizable, the shapes is getting distorted. Following is the code for the shape.

Image before resizable
image
Image after resizing
image

export class TextAnnotationShape {
  constructor() {
    this.leftCShape();
  }
  getTemplate = (contextMenu: go.Adornment | go.HTMLInfo) => {
    const $ = go.GraphObject.make;
    return $(
      go.Node,
      "Spot",
      {
        contextMenu,
        resizable: true,
        linkValidation: GRAPH_CONFIG.LINK_VALIDATIONS.TEXT_ANNOTATION,
        dragComputation: avoidNodeOverlap,
      },
      new go.Binding("location"),
      $(
        go.Panel,
        "Auto", { padding: 2, },
        $(go.Shape, "Annotation", // A left bracket shape
          {
            cursor: "pointer",
            strokeWidth: 4,
            stroke: "gray",
            fill: "transparent",
          }
        ),
        $(go.Shape, "Rectangle",
          {
            fill: "#fff",
            stroke: "#000",
            strokeWidth: 1,
            width: 155,
            height: 60,
            shadowVisible: true,
          },
          new go.Binding("figure", "shape"),
          new go.Binding("stroke", "isSelected", function (
            sel,
            shape: go.Shape
          ) {
            return sel ? "#2A7DE1" : "#fff";
          }).ofObject()
        ),
        $(go.TextBlock,
          {
            alignment: go.Spot.Left,
            margin: new go.Margin(0, 0, 0, 10),
            stroke: "#060322",
            font: "normal 10px sans-serif",
            editable: true,
            isActionable: true,
            isMultiline: true,
            width: 120,
            textValidation: GRAPH_CONFIG.TEXT_VALIDATIONS.TEXT_ANNOTATION,
            textEdited: GRAPH_CONFIG.TEXT_EDITED.TEXT_ANNOTATION,
          },
          new go.Binding("text", "name").makeTwoWay()
        )
      ),
      ...GRAPH_CONFIG.ENTITY_PORTS.TEXT_ANNOTATION,
      GRAPH_CONFIG.REMOVE_DEFAULT_BORDER
    );
  };

  leftCShape = () => {
    go.Shape.defineFigureGenerator("Annotation", function (shape, w, h) {
      const len = Math.min(w, 10);
      return new go.Geometry().add(
        new go.PathFigure(len, 0)
          .add(new go.PathSegment(go.PathSegment.Line, 0, 0))
          .add(new go.PathSegment(go.PathSegment.Line, 0, h))
          .add(new go.PathSegment(go.PathSegment.Line, len, h))
      );
    });
  };
}

What should be done so that it remains same shape as before only the height and width changes
Note: Ratio can be same.

2

There is probably more than one way to get you the effect that you want. I don’t know exactly what the requirements are. Here is one way:

$(go.Node,"Spot",
  {
    //contextMenu
    resizable: true, resizeObjectName: "BODY",
    selectionObjectName: "BODY"
    //linkValidation: GRAPH_CONFIG.LINK_VALIDATIONS.TEXT_ANNOTATION,
    //dragComputation: avoidNodeOverlap,
  },
  new go.Binding("location"),
  $(go.Panel, "Spot",
    $(go.Panel, "Auto",
      { name: "BODY", padding: 2,
        width: 155, height: 60 },
      new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
      $(go.Shape, "Rectangle",
        { stretch: go.GraphObject.Fill,
          fill: "#fff",
          stroke: "#000",
          strokeWidth: 1,
          // width: 155,
          // height: 60,
          shadowVisible: true,
        },
        new go.Binding("figure", "shape"),
        new go.Binding("stroke", "isSelected", (sel, shape) => sel ? "#2A7DE1" : "#fff").ofObject()
      ),
      $(go.TextBlock,
        {
          alignment: go.Spot.Left,
          margin: new go.Margin(0, 0, 0, 10),
          stroke: "#060322",
          font: "normal 10px sans-serif",
          editable: true,
          //isActionable: true,
          isMultiline: true,
          // width: 120,
          //textValidation: GRAPH_CONFIG.TEXT_VALIDATIONS.TEXT_ANNOTATION,
          //textEdited: GRAPH_CONFIG.TEXT_EDITED.TEXT_ANNOTATION,
        },
        new go.Binding("text").makeTwoWay()
      )
    ),
    $(go.Shape, "Annotation", // A left bracket shape
      {
        alignment: go.Spot.Left, alignmentFocus: go.Spot.Left,
        stretch: go.GraphObject.Vertical,
        cursor: "pointer",
        strokeWidth: 4,
        stroke: "gray",
        fill: "transparent",
      }
    )
  ),
  //...GRAPH_CONFIG.ENTITY_PORTS.TEXT_ANNOTATION,
  //GRAPH_CONFIG.REMOVE_DEFAULT_BORDER
);