Resize handles are too small when zoomed out

Thanks for your response. I have taken any shapes or image for re-sizing shapes (reducing shape big size to very small at the maximum level). after the shape look very thin (like line ) and click out side area (diagram area) then shape is not appear in the diagram area.
the resize click areas on the border to be impossible to click on to resize again, unless you zoom very far in.

please advise me on this.

The easiest change you can make would be to use larger resize handles in the Resize Adornment. Set ResizingTool | GoJS API. Its documentation provides an example.

You can see how the built-in one is defined at http://gojs.net/latest/extensions/Templates.js – look at the setupResizingToolHandles function.

I can’t tell what you are doing.

Have you seen Absolute positioning within the viewport ? That is probably more strictly controlled than you want, but it gives you an idea of what is possible.

Thanks for your advise. at-least tell how print positive value in diagram ruler area. now it is starting -550 to 500 (x-axis) in attached screen shot. y axis also printed minus value to plus sign value. it is graduated panel value only

if i print start from 0 to postive value then my border will be placed in top left position. please find my code.

var gradScaleHoriz = $$(go.Node, “Graduated”, new go.Binding(“zOrder”), { zOrder: 0 }, { copyable: false }, { deletable: false }, { movable: false }, { layerName: “Background” },
{
// graduatedMin: 0, graduatedMax: 3000,
graduatedTickBase: 0, graduatedTickUnit: 10,
pickable: false,
//layerName: “Foreground”,
isInDocumentBounds: false, isAnimated: false
},
$$(go.Shape, { geometryString: “M0 0 H400”, strokeWidth: 2 }),
$$(go.Shape, {
geometryString: “M0 0 V3”, interval: 1,
// stroke: “dodgerblue”,
strokeWidth: 2
}),
$$(go.Shape, {
geometryString: “M0 0 V10”, interval: 5,
// stroke: “dodgerblue”,
strokeWidth: 2
}),
$$(go.TextBlock,
{
font: “10px sans-serif”,
interval: 5,
alignmentFocus: go.Spot.TopLeft,
segmentOffset: new go.Point(0, 7)

}
)
);

var gradScaleVert = $$(go.Node, “Graduated”, new go.Binding(“zOrder”), { zOrder: 0 }, { copyable: false }, { deletable: false }, { movable: false }, { layerName: “Background” },
{
// graduatedMin: 0, graduatedMax: 3000,
graduatedTickBase: 0, graduatedTickUnit: 10,
pickable: false,
//layerName: “Foreground”,
isInDocumentBounds: false, isAnimated: false
},
$$(go.Shape, { geometryString: “M0 0 V400”, strokeWidth: 2 }),
$$(go.Shape, {
geometryString: “M0 0 V3”,
//stroke: “dodgerblue”,
strokeWidth: 2, interval: 1,
alignmentFocus: go.Spot.Bottom
}),
$$(go.Shape, {
geometryString: “M0 0 V10”,
//stroke: “dodgerblue”,
strokeWidth: 2, interval: 5,
alignmentFocus: go.Spot.Bottom
}),
$$(go.TextBlock,
{
font: “10px sans-serif”,
segmentOrientation: go.Link.OrientOpposite,
interval: 5,
alignmentFocus: go.Spot.BottomLeft,
segmentOffset: new go.Point(0, -7)
}
)
);

    var gradBorderIndicatorTopRight =
     $$(go.Part, "Graduated", new go.Binding("zOrder"), { zOrder: 0 }, { copyable: false }, { deletable: false },
      //   { location: new go.Point(1024, 576) },
      //$$(go.Shape, { fill: "white" }),
     {
         pickable: false,
         // layerName: "Background",
         //visible: false,
         isInDocumentBounds: false, isAnimated: false,
         //locationSpot: go.Spot.TopRight
         // segmentOrientation: go.Link.OrientOpposite,
     });
    $$(go.Shape, { geometryString: "M0 0 H200", strokeWidth: 2, stroke: "Green" }),
   $$(go.Shape, { geometryString: "M0 0 V10", graduatedStart: 0.8, graduatedEnd: .95, strokeWidth: 2, stroke: "Green", alignmentFocus: go.Spot.Top })
   

     gradBorderIndicatorTopLeft =

$$(go.Part, “Graduated”, new go.Binding(“zOrder”), { zOrder: 0 }, { copyable: false }, { deletable: false },
{ location: new go.Point(0, 0) },
$$(go.Shape, { fill: “white” }, { width: systemWidth }, { height: systemHeight }, { alignmentFocus: go.Spot.TopLeft }),
{
pickable: false,
//width: systemWidth,
//height:systemHeight,
// layerName: “Background”,
//visible: false,
isInDocumentBounds: false, isAnimated: false,
//locationSpot: go.Spot.TopRight
// segmentOrientation: go.Link.OrientOpposite,
});

function setupScalesAndIndicators() {
var vb = wiDiagram.viewportBounds;
wiDiagram.startTransaction(“add scales”);
updateScales();
// Add each node to the diagram
wiDiagram.add(gradScaleHoriz);
wiDiagram.add(gradScaleVert);
//wiDiagram.add(gradIndicatorHoriz);
//wiDiagram.add(gradIndicatorVert);
wiDiagram.add(gradBorderIndicatorTopLeft);
//wiDiagram.add(gradBorderIndicatorTopRight);
//wiDiagram.add(gradBorderIndicatorBottomLeft);
//wiDiagram.add(gradBorderIndicatorBottomRight);
wiDiagram.commitTransaction(“add scales”);

        showIndicators();
    };

    function updateScales() {
        var vb = wiDiagram.viewportBounds;
        // vb.x = 0; vb.y = 0;
        wiDiagram.startTransaction("update scales");
        // Update properties of horizontal scale to reflect viewport
        gradScaleHoriz.location = new go.Point(vb.x, vb.y);
        gradScaleHoriz.graduatedMin = vb.x;
        gradScaleHoriz.graduatedMax = vb.x + vb.width;
        gradScaleHoriz.elt(0).width = vb.width;
        // Update properties of vertical scale to reflect viewport
        gradScaleVert.location = new go.Point(vb.x, vb.y);
        gradScaleVert.graduatedMin = vb.y;
        gradScaleVert.graduatedMax = vb.y + vb.height;
        gradScaleVert.elt(0).height = vb.height;
        wiDiagram.commitTransaction("update scales");
    };

Your updateScales function is updating those two graduated scales to reflect the viewport’s bounds, Diagram.viewportBounds.

Have you tried initializing your Diagram with initialPosition: new go.Point(-10, -10) or something like that? Please read GoJS Initial Viewport -- Northwoods Software for explanations and more options.

3 posts were split to a new topic: Can’t reshape circular Shape