Object intersection with line Show both dimesions

How can we show dimesion when two object for e.g. when line and rectangle are intersecting show dimesion as shown in below image

The Floorplanner extension currently only supports Dimension Links on walls, which are updated with the function updateWallDimensions(), defined in Floorplan.js here: GoJS/Floorplan.js at master · NorthwoodsSoftware/GoJS · GitHub

The behavior you’re seeking to implement could be difficult to achieve. My first instinct is to modify the walls iteration in updateWallDimensions(). Inside this iteration, beneath this loop (at line 508)

wall.memberParts.iterator.each(function (wallPart) {
if (wallPart.isSelected) {
var endpoints = getWallPartEndpoints(wallPart);

you must:

  1. Find all objects intersecting the wall (probably with calls to Diagram.findObjectsIn
    Then, for each object intersecting the wall:
  2. Find the two farthest points on it that cross the wall (the way you do this may depend on a number of things, including Shape geometries, rotation angle…)
  3. Add these two points into the Array wallPartEndpoints

This should give you the behavior you require, though please note I have not tested it myself.

Please let me know if you need further clarification on anything.

Thank you for quick response.

The code does not enter the loop at line 498(Floorplan.js) for the furniture palette object but it does enter if i dragged an object from wallparts Palette . Can you help me out what i have to do here so that i can make changes mention by you ?

// create array of selected wall endpoints and selected wallPart endpoints along the wall that represent measured stretches
walls.iterator.each(function (wall) {
var startpoint = wall.data.startpoint;
var endpoint = wall.data.endpoint;
var firstWallPt = ((startpoint.x + startpoint.y) <= (endpoint.x + endpoint.y)) ? startpoint : endpoint;
var lastWallPt = ((startpoint.x + startpoint.y) > (endpoint.x + endpoint.y)) ? startpoint : endpoint;

As stated before, what you are trying to do will require a lot of work, so please bear with this long response.

updateWallDimensions() does not do anything unless there is a wall, door, or window in the Diagram.selection. There are many instances when it fires, so it is difficult to enumerate them all here, but a search through the .js files that define Floorplan (listed here) will help you find these instances.

Call updateWallDimensions() when you want it to fire to fit your requirements (probably when a furniture node is selected, dragged, resized, etc). In order to see the dimensions of any wall when this happens, the wall will need to be selected – this behavior must be added at the beginning of updateWallDimensions() by finding walls intersecting furniture nodes in the current Diagram.selection and adding them to the Diagram.selection.

Of course, this will only make updateWallDimensions() fire when a furniture node is dragged, resized, or whatever else you tell it to do. You will see the dimensions for walls intersecting the furniture nodes in your Diagram.selection, but you will not have the behavior you want until you add the code I suggested in my first response.

I understand this is a lot to process, so let me know if anything specific is unclear. If you still are having trouble on Monday, I may be able to make a small example when I’m in the office.

Thanks Ryanj for your reponse.
I will try what you have stated above.
It will be great if you can make some example.

I’ve been playing with these ideas this morning – this should give you a pretty good starting point.

First, add a call to updateWallDimensions() in Floorplan.js at around line 243, inside the toolManager.draggingTool.doMouseMove override, so that your function looks like

this.toolManager.draggingTool.doMouseMove = function () {
        if (this.diagram.lastInput.shift) {
            this.isGridSnapEnabled = false;
        } else this.isGridSnapEnabled = this.diagram.model.modelData.preferences.gridSnap;

This will ensure updateWallDimensions() is called when a furniture node is dragged.

Then add some code to updateWallDimensions itself.

  • In the selection iteration (starting at around line 458), if the selection member is a furniture node, add all intersecting walls (with the same angle as the furniture node, +/- 180 degrees)
// furniture node / multi purpose node
        else {
            // get walls touching 'part'
                function(x) { var p = x.part; return (p.category === "WallGroup") ? p : null},
                function(w) {
                    var furnitureAngle = part.rotateObject.angle;
                    var wallAngle = w.rotateObject.angle;
                    if (furnitureAngle === wallAngle || Math.abs(furnitureAngle - wallAngle) === 180) {                    
                        return true; 
  • In the “walls” iteration (starting around line 493), after the wall.memberParts iteration (but before the wallPartEndpoints.sort call), add the leftmost and rightmost Points of the SHAPE element of all intersecting furniture nodes, projected onto the line segment created by the wall, into the wallPartEndpoints array.
// add points where furniture intersects with wall to wallPartEndpoints
        var intersectingFurniture = new go.Set(go.Node);
            function(x) { 
                var p = x.part; 
                if (p instanceof go.Node && p.category === "" || p.category === "MultiPurposeNode" && p !== undefined) {
                    return p;
            function(n) { 
                if (n !== undefined) {
                    return n.isSelected;
                } return false;
            // get two farthest endpoints for furniture
            var point1 = f.findObject("SHAPE").getDocumentPoint(go.Spot.Left);
            point1.projectOntoLineSegmentPoint(wall.data.startpoint, wall.data.endpoint);
            var point2 = f.findObject("SHAPE").getDocumentPoint(go.Spot.Right);
            point2.projectOntoLineSegmentPoint(wall.data.startpoint, wall.data.endpoint);

You can see the entire modified Floorplan.js file here (note that link will expire in 24 hours).

This will give you your desired behavior, though please note the angle of the furniture nodes must be the same as or +/- 180 degrees the angle of the wall(s) it is intersecting, otherwise no dimension links will appear. There may be some cleanup you will have to do to this code, depending on your specific requirements. Implementing what I suggested exactly will give you results like this:

Thank you very much Ryanj.
It worked for me. :)