How can I dynamically translate the position of ths dim in a GoJS diagram?

Question

i have a code that generate a diagram and links btw them, also he calculate the length between the edge of the diagrams like in the image we have 2 lengths 2 images linked in a diagram

the code base is

 Step4Component.myDiagram.linkTemplateMap.add("Dimensioning",
        $(DimensioningLink, {

                reshapable: true, resegmentable: true, curve: go.Link.Link, adjusting: go.Link.Stretch,
                contextMenu: partContextMenu
            },
            
            new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
            new go.Binding("toSpot", "toSpot", go.Spot.parse),
            new go.Binding("direction"),
            new go.Binding("extension"),
            new go.Binding("inset"),

            // new go.Binding("points").ofModel(),
            $(go.Shape, {stroke: "gray"},
                new go.Binding("stroke", "color")),
            $(go.Shape, {fromArrow: "BackwardOpenTriangle", segmentIndex: 2, stroke: "gray"},
                new go.Binding("stroke", "color")),
            $(go.Shape, {toArrow: "OpenTriangle", segmentIndex: -3, stroke: "gray"},
                new go.Binding("stroke", "color")),
            $(go.TextBlock,
                // leave some space around larger-than-normal text
                {
                    isMultiline: false,
                    editable: false,
                    segmentOffset: new go.Point(NaN, 0),
                    segmentIndex: 2,
                    segmentFraction: 0.5,
                    segmentOrientation: go.Link.OrientUpright,
                    alignmentFocus: go.Spot.Bottom,
                    stroke: "gray",
                    font: "8pt sans-serif",
                    textEdited: function (textBlock, previousText, currentText) {
                        if (currentText.length == 0 || isNaN(currentText)) {
                            textBlock.text = previousText;
                        }
                    }

                },
                // the TextBlock.text comes from the Node.data.key property
                new go.Binding("text", "length").makeTwoWay()),

            $(go.TextBlock,
                // leave some space around larger-than-normal text
                {
                    visible: false
                },
                // the TextBlock.text comes from the Node.data.key property
                new go.Binding("text", "lead").makeTwoWay())
        ));

    Step4Component.myDiagram.linkTemplateMap.add("identification",
        // if the BalloonLink class has been loaded from the Extensions directory, use it
        $(go.Link,
            $(go.Shape,  // the Shape.geometry will be computed to surround the comment node and
                // point all the way to the commented node
                {stroke: "black", strokeWidth: 1, fill: "lightyellow"})
        ));

    Step4Component.myDiagram.nodeTemplateMap.add("identification", $(go.Node, "Spot",
        $(go.Shape, "Circle",
            {name: "SEATSHAPE", desiredSize: new go.Size(20, 20), fill: "white", stroke: "black", strokeWidth: 1},
            new go.Binding("fill")),
        $(go.TextBlock,
            {font: "10pt Verdana, sans-serif"},
            new go.Binding("text"),
            new go.Binding("angle", "angle", function (n) {
                return -n;
            })),
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
    ));

    // Link templates
    Step4Component.myDiagram.linkTemplateMap.add("linking",
        $(go.Link,  // defined below
            {
                corner: 100,
                routing: go.Link.Orthogonal,  // may be either Orthogonal or AvoidsNodes
                curve: go.Link.None,
                reshapable: true, resegmentable: true,
                layerName: "Background",
                click: function (e, obj) {
                          // Extract the lead and cableType values from your link data
                    let inspector = new Inspector("details", Step4Component.myDiagram,
                        {
                            includesOwnProperties: false,
                            inspectSelection: false,
                            properties: {
                                lead: {show: Inspector.showIfLink},
                                fromPort: {readOnly: true, show: Inspector.showIfLink},
                                toPort: {readOnly: true, show: Inspector.showIfLink},
                                length: {type: "number", show: Inspector.showIfLink},
                                cableType: {type: "select", choices: Sketch.cables, show: Inspector.showIfLink},
                                }
                            });
                           
                            inspector.inspectObject(obj)
                },
                
            },
            
            // make sure links come in from the proper direction and go out appropriately
            new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
            new go.Binding("toSpot", "toSpot", go.Spot.parse),
            new go.Binding("points").makeTwoWay(),
            // mark each Shape to get the link geometry with isPanelMain: true
            $(go.Shape, {isPanelMain: true, stroke: "black", strokeWidth: 20},
                // get the default stroke color from the fromNode
                new go.Binding("stroke", "fromNode", function (n) {
                    return go.Brush.lighten("black");
                }).ofObject(),
                // but use the link's data.color if it is set
                new go.Binding("stroke", "color", colorFunc)),
            $(go.Shape, {isPanelMain: true, stroke: "white", strokeWidth: 17, name: "PIPE"}),

i want to be able to change the length drawn in L1 by using a cursor, but i only went up or down, i can't drage it left or right