javascriptgojs

How do I get the points of the edge of a Shape or Geometry with GoJS?


I have a working tool that creates custom shapes in my diagram using the PolygonDrawingTool extension. I would like to automatically populate those shapes with smaller squares. My plan is to iterate over points in the larger shape and use geometry.containsPoint() to create a square if and only if each of its corners is contained by the shape. However, in order to iterate over the points in my larger shape, I need a defined area to check, preferably the maximum and minimum x and y points of the larger shape. I cannot find a way to get these max and min points from the shape or its geometry.

Things like spot1, spot2, and shape.naturalBounds seem like they would be helpful, but don't return a (x,y) position like I am looking for. For instance, this code that I tried:

//handle seating population
if (confirm("Populate this shape with chairs?") == true){
    boundaryRect = shape.naturalBounds;
    maxX = boundaryRect.x;
    maxY = boundaryRect.y;
    width = boundaryRect.width;
    height = boundaryRect.height;
    console.log(maxX);
    console.log(maxY);
    console.log(width);
    console.log(height);
}

Gives me 0,0 as the top left point. Obviously, the shapes that I am making do not actually start at the origin, and so this is not useful.

Here is my shape adding function fyi:

//New function for adding shapes at a specific x,y
function addNode(nodeType, color, text= " ", xcord, ycord, size){
    var node = new go.Node("Auto")
        .add(new go.Shape(nodeType, {
            width: size,
            height: size,
            fill: color,
            strokewidth: 3
        }))
        .add(new go.TextBlock(text, {
            margin: 5
        }))
    node.location = new go.Point(xcord, ycord);
    diagram.add(node);
}

I am sure there must be an easier way to do this. How can I get the x,y positions of the outer edges of my shape?


Solution

  • Given a Shape, you can look at its Shape.geometry to see what points it has. Since you seem to be using a PolygonDrawingTool, I'll assume you don't need to worry about curves, and that the Geometry will always be of type Path.

    function pointsFromShape(shape) {
      let arr = [];
      shape.geometry.figures.each(fig => {
        arr.push(new go.Point(fig.startX, fig.startY));
        fig.segments.each(seg => arr.push(new go.Point(seg.endX, seg.endY)));
      });
      return arr;
    }
    

    Remember that the points will be in local coordinates -- i.e. before any transforms are applied to the Shape or to its containing Panels. If you want to transform a Point to document coordinates, call GraphObject.getDocumentPoint.