How to limit overflow of node

GoJS
1

I have customised example at (Limited Group Resizing) and tried to modify my code according to the example for the node instead of group. Below is the code:

const partPadding = new go.Margin(1);
export class LimitedPartResizingTool extends go.ResizingTool {
  _lastOK = new go.Rect(); // in document coordinates

  computeMinSize() {
    const minSize = super.computeMinSize();
    const { part } = this.adornedObject;

    if (part instanceof go.Part) {
      this._lastOK = this.adornedObject.getDocumentBounds();

      let bnds = part.getDocumentBounds();
      if (!bnds.isReal()) {
        bnds = new go.Rect(this._lastOK.position, minSize);
      } else {
        bnds.addMargin(partPadding);
        bnds.unionPoint(this.oppositePoint);
      }
      return new go.Size(
        Math.max(minSize.width, bnds.width),
        Math.max(minSize.height, bnds.height),
      );
    }
    return minSize;
  }

  _checkIntersections(r) {
    const results = this.diagram.findObjectsIn(
      r,
      (obj) => obj.part,
      (p) => p,
      true,
    );
    return results.count > 0;
  }

  computeResize(newPoint, spot, min, max, cell, reshape) {
    const newRect = super.computeResize(newPoint, spot, min, max, cell, reshape);
    const { part } = this.adornedObject;
    if (part instanceof go.Part) {
      const tl = this.adornedObject.getDocumentPoint(newRect.position);
      const br = this.adornedObject.getDocumentPoint(new go.Point(newRect.right, newRect.bottom));
      const rrect = new go.Rect(tl, br).inflate(1, 1);
      if (this._checkIntersections(rrect)) {
        return this._lastOK; // too big! use last safe bounds
      }
      this._lastOK = newRect.copy(); // remember for future use
    }
    return newRect;
  }

  resize(newr) {
    const { part } = this.adornedObject;
    if (part instanceof go.Part) {
      const obj = this.adornedObject;
      obj.desiredSize = newr.size;
      part.ensureBounds();
      const pt = this.adornedObject.getDocumentPoint(this.handle.alignment.opposite());
      part.location = part.location.copy().subtract(pt).add(this.oppositePoint);
    } else {
      super.resize(newr);
    }
  }
}

I have updated some parts against group templates. @walter can help me identify issue within code. When trying to resize it’s not limiting overlapping while resize.

2

That sample only deals with the resizing of a Group. Are you asking about limiting the resizing of a regular Node?

The Single Page sample, A Single Page Diagram, demonstrates a customization of the ResizingTool to limit how far a resizing may go.

3

Yes limiting the resizing of regular Node. So i want to restrict the overlapping of node on resizing, the same functionality that is in (Limited Group Resizing as we resize group in this sample it doesn’t allow overlapping same thing i am trying to achieve for node.

4

I have updated that sample, Limited Group Resizing, so that the custom ResizingTool that limits the resizing of Groups also limits the resizing of regular Nodes, assuming that the resizing of such Nodes is resizing the whole Node.

There are two such limitations – one is to avoid overlapping other nodes other than the node’s containingGroup. The other is to avoid extending beyond the limits of the group minus some margin.

There are a bunch of choices that one must make whenever implementing anything. If I did not make the same choices as what you need in your app, you will need to adapt the code.

5

Thank you @walter , the changes and choices you made are exactly the same what I am trying to implement. Thank you so much. This helps and works.