DragCreatingTool for Circles (Problem with Bounding Rectangle)

When using the DragCreatingTool we noticed that the bounding rectangle for the circle shape does not remain tangent with the circle. Any suggestions on how to resolve this issue.

You could modify or override DragCreatingTool.computeBoxBounds to return a square if you know that the user is creating something that must have equal width and height.

That is a good idea. I will try it. Thanks

I extended the computeBoxBounds to create a square bounding box for any Shape that requires a square bounding box.

Here is the updated function if you would like to add it to your code base.

Thanks for pointing me in the right direction:


* This just returns a {@link Rect} stretching from the mouse-down point to the current mouse point.
* <p/>
* This method may be overridden.
* @this {DragCreatingTool}
* @return {Rect} a {@link Rect} in document coordinates.
DragCreatingTool.prototype.computeBoxBounds = function() {
    var diagram = this.diagram;
    if (diagram === null) return new go.Rect(0, 0, 0, 0);
    var start = diagram.firstInput.documentPoint;
    var squareBoundingBox = false;
    var latest = diagram.lastInput.documentPoint;

    //Save Latest Point to variable so we don't incur any side effects on the diagram as a result of recomputing
    //for square bounding boxes
    var newPoint = new go.Point(latest.x, latest.y);

    var arch = this.archetypeNodeData;

    // If the type of node being created requires a square bounding box (i.e. a Circle) then the archetypeNodeData should 
    //define the squareBoundingBox property as a boolean and set that property value to 'true'
    if (arch !== null) {
        squareBoundingBox = (typeof arch.squareBoundingBox !== 'boolean') ? false : arch.squareBoundingBox;

    //Logic to transform a rectangle bounding box to a square.  The algorithm determines the minimum between (width and length)
    //And then provides a new stopping point coordinate so that the resulting bounding box is a square.
    if (squareBoundingBox) {
        const length = Math.abs(latest.x - start.x); //X
        const width = Math.abs(latest.y - start.y); //Y
        const x1 = start.x;
        const y1 = start.y;
        const x2 = latest.x;
        const y2 = latest.y;
        var newX2 = 0.0;
        var newY2 = 0.0;
        if (length > width) { //truncate length to match width
            if (x1 > x2) {
                newX2 = x1 - width;
            else {
                newX2 = x1 + width;
            newPoint.x = newX2;
        else if (width > length) { //truncate width to match length

            if (y1 > y2) {
                newY2 = y1 - length;
            else {
                newY2 = y1 + length;
            newPoint.y = newY2;
    return new go.Rect(start, newPoint);