Hey Everyone,
I have some bigger and some very small shapes in a palette and also applied a initialScale
on this palette to make bigger shapes small.So the small shape are more smaller due to this scale.I was wondering if i can see the zoom-in version of these shapes on hovering.
Thanks
var customDynamicPallete = GO(
go.Palette, "customShapesDiv"+index, {
"initialScale":0.3,
"layout.spacing": new go.Size(50, 50),
"toolManager.hoverDelay": 200 // how quickly tooltips are shown
// allowDrop:true
}
);
Yes, you can temporarily set the Node.scale to a value slightly larger than 1.0, either in a hover event or (I think) more likely in GraphObject.mouseEnter and GraphObject.mouseLeave event handlers.
The Flow Chart sample, Flowchart, already has those two mouseEnter and mouseLeave event handlers defined in order to highlight the ports when the mouse is over a port. So you could extend the functionality as follows:
function showPorts(node, show) {
var diagram = node.diagram;
if (!diagram) return;
if (diagram instanceof go.Palette) {
node.scale = (show ? 1.25 : 1.0);
return;
}
if (diagram.isReadOnly || !diagram.allowLink) return;
. . .
Note that the mouseEnter and mouseLeave events are established in a function that is applied to all(?) of the node templates.
But you’ll notice in the Palette that there is a re-layout each time as a node changes size. It is possible to disable that by setting Part.layoutCondition appropriately, but in this case it’s easiest to modify the Palette.layout as follows:
myPalette =
$(go.Palette, "myPaletteDiv", // must name or refer to the DIV HTML element
{
layout: $(go.GridLayout, { isOngoing: false }),
. . .