X shape from figures

GoJS
1

How do i make the X shape icon smaller in this gateway via below code
(I tried to change the height and width from the below code but shape gets distorted)

image

/**
 * Function creates a shape of X inside the exclusive
 */
export const getXShape = (): void => {
  go.Shape.defineFigureGenerator(
    "XShape",
    (shape: go.Shape, width: number, height: number) => {
      return new go.Geometry().add(
        new go.PathFigure(0, height, false)
          .add(new go.PathSegment(go.PathSegment.Line, height, 0))
          .add(new go.PathSegment(go.PathSegment.Move, 0, 0))
          .add(new go.PathSegment(go.PathSegment.Line, width, height))
      );
    }
  );
};

i want to achieve little smaller X shape as per below diagram
image

2

How are you defining the Shape and its Panel?

3 
  public getTemplate(
    diagram: go.Diagram,
    contextMenu: go.Adornment | go.HTMLInfo
  ): go.Node {
    const $ = go.GraphObject.make;
    return $(
      go.Node,
      "Spot",
      {
        shadowColor: "rgb(0,0,0,0.2)",
        shadowBlur: 6,
        shadowOffset: new go.Point(0, 2),
        isShadowed: true,
        contextMenu,
        zOrder: 1,
      },
      new go.Binding("location", "position", parseNodeLocation).makeTwoWay(
        convertNodeLocationPoint
      ),
      {
        locationSpot: go.Spot.TopLeft,
      },
      new go.Binding("isSelected", "isSelected").makeTwoWay(),
      $(
        go.Shape,
        "Diamond", // outer diamond
        {
          fill: GRAPH_CONFIG.SHAPE_COLORS.whiteColor,
          name: GRAPH_CONFIG.ERROR_BLOCK_NAME.SHAPE_BLOCK,
          strokeWidth: 3,
          shadowVisible: true,
          desiredSize: new go.Size(55, 55),
        },
        new go.Binding("figure", "shape"),
      ),
      $(
        go.Shape,
        "Diamond", // inner diamond
        {
          name: GRAPH_CONFIG.ERROR_BLOCK_NAME.SHAPE_BLOCK,
          stroke: null,
          desiredSize: new go.Size(40, 40),
        },
        new go.Binding("figure", "shape"),
      ),
      $(
        go.Shape,
        "XShape", // inner x shape
        {
          strokeWidth: 3,
          desiredSize: new go.Size(20, 20),
          shadowVisible: true,
        },
        new go.Binding("figure", "shape"),
      ),
    );
  }
4

I’ll try your node template soon.

But I do notice that you do not need to define your XShape figure – just use “XLine”, which is built-in.

5

yes I used XLine but was not able to change the size of the cross icon that’s why used this shape code.

6

I used your template with the built-in “XLine” figure and changed the size to be 14x14, and it looked fine to me.

7

can u share the code.

u mean u used,

$(
        go.Shape,
        "XLine", 
        {
          strokeWidth: 3,
          desiredSize: new go.Size(14, 14),
          shadowVisible: true,
        },
        new go.Binding("figure", "shape"),
      ),
    );

something like this