I don’t want to zoom in selection handler on any shape, but want to zoom object itself when performing zoom on diagram.
How can I achieve the same.
Are you asking how to keep selection Adornments and the various Tool Adornments drawn at the same size even while the user zooms in or out? So, for example, when the user zooms out a lot, all selected nodes (and links) should have Adornments that basically cover most of the area of each node, because the handles of each Adornment are drawn at normal scale and therefore dwarf the node itself?
If so, I don’t think there is an easy way to achieve that. We will investigate this later today. Basically each Adornment needs to set the scale of each of its handles to 1/diagram.scale.
Here is a DiagramEvent listener that seems to work for all of the standard Selection and Tool Adornments, if I understood you correctly. This is in an initialization of Diagram:
"viewportBoundsChanged": function(e) {
var viewb = e.diagram.viewportBounds;
var sc = e.diagram.scale;
e.diagram.nodes.each(function(n) {
n.adornments.each(function(a) {
if (!n.actualBounds.intersectsRect(viewb)) return; // optimization
if (a.category === "Selection") {
var shape = a.elt(0);
if (shape instanceof go.Shape) shape.strokeWidth = 3 / sc;
} else {
a.elements.each(function(o) {
if (!(o instanceof go.Placeholder)) o.scale = 1 / sc;
})
}
})
})
e.diagram.links.each(function(l) {
if (!l.actualBounds.intersectsRect(viewb)) return; // optimization
l.adornments.each(function(a) {
if (a.category === "Selection") {
var shape = a.findMainElement();
if (shape instanceof go.Shape) shape.strokeWidth = 3 / sc;
} else {
a.elements.each(function(o) { o.scale = 1 / sc; })
}
})
})
},
There is are 2 issues I am still facing with this solution :
- Rotate handler distance is becoming far from shape.
- When I am de-selecting and selecting it’s again, handlers are becoming large as it was heppening previously.
How can I overcome these issues
For #2 one also needs to update the scale or strokeWidth of the SelectionAdornmentTemplates and tool handle archetypes.
function updateHandles(diagram) {
var viewb = diagram.viewportBounds;
var sc = diagram.scale;
diagram.groupSelectionAdornmentTemplate.elt(0).strokeWidth = 3 / sc;
diagram.linkSelectionAdornmentTemplate.findMainElement().strokeWidth = 3 / sc;
diagram.nodeSelectionAdornmentTemplate.elt(0).strokeWidth = 3 / sc;
diagram.toolManager.linkReshapingTool.handleArchetype.scale = 1 / sc;
diagram.toolManager.linkReshapingTool.midHandleArchetype.scale = 1 / sc;
diagram.toolManager.relinkingTool.fromHandleArchetype.scale = 1 / sc;
diagram.toolManager.relinkingTool.toHandleArchetype.scale = 1 / sc;
diagram.toolManager.resizingTool.handleArchetype.scale = 1 / sc;
diagram.toolManager.rotatingTool.handleArchetype.scale = 1 / sc;
diagram.nodes.each(function (n) {
n.adornments.each(function (a) {
if (!n.actualBounds.intersectsRect(viewb)) return; // optimization
if (a.category === "Selection") {
var shape = a.elt(0);
if (shape instanceof go.Shape) shape.strokeWidth = 3 / sc;
} else {
a.elements.each(function (o) {
if (!(o instanceof go.Placeholder)) o.scale = 1 / sc;
})
}
})
})
diagram.links.each(function (l) {
if (!l.actualBounds.intersectsRect(viewb)) return; // optimization
l.adornments.each(function (a) {
if (a.category === "Selection") {
var shape = a.findMainElement();
if (shape instanceof go.Shape) shape.strokeWidth = 3 / sc;
} else {
a.elements.each(function (o) { o.scale = 1 / sc; })
}
})
})
}
and the DiagramEvent listener is:
"viewportBoundsChanged": function(e) { updateHandles(e.diagram); },
For #1, if you want to change the distance of the rotate handle from the Part.rotationObject, you’ll need to override RotatingTool.updateAdornments. It’s easiest to call the base method and then adjust the position of the RotatingTool.handle. There’s an example of this as the TopRotatingTool, defined in the Draggable Link sample. That custom tool moves the rotate handle to be above the node rather than to the right of it, but you can do whatever you like.