We have a diagram that is bigger than the canvas it is displayed in. So when we first draw it we use zoomToFit() to make it fill the canvas area. Now the user wants to zoom the diagram. We have allowZoom set to true and are using the Mousewheel zoom feature. We want the user to be able to zoom into the diagram (making it bigger) but we want to restrict the zoom out to only be as far as the diagram was originally shown. I tried setting the minScale attribute on the diagram to the current scale of the diagram after calling zoomToFit() but I seem to always get a minScale is not in range error. So I must be doing something wrong. Anyone have an idea on how to do this?
In a case that produces the range error, what value are you setting it to?
A little more info:
For various reasons we do a two pass render. Essentially we run through this code twice:
this.diagram.startTransaction('generateGraph');
this.diagram.contentAlignment = go.Spot.Center;
this.diagram.model.nodeDataArray = nodes;
this.diagram.model.linkDataArray = links;
this.diagram.zoomToFit();
SIIUtils.log("Current Scale: "+ this.diagram.scale);
SIIUtils.log("Current Min Scale: "+ this.diagram.minScale);
var currentScale = this.diagram.scale;
this.diagram.minScale = currentScale;
The first pass is an attempt to clear the diagram, so we set the nodes and links arrays on the diagram to empty arrays and then run through this code. The output of the log statements is as follows:
Current Scale: 1
Current Min Scale: 0.0001
This matches how I am reading the documentation. This has a side effect of setting the minScale of the diagram to 1.
On the second pass (which is the actual drawing of the diagram we want to show) we set the nodes and links array appropriately and run through this code again. The output is this:
Current Scale: 1
Current Min Scale: 1
Uncaught Error: Diagram.minScale is not in the range > 0: 1
Additionally what rendering we can see shows that the diagram is being drawn at a scale of 1 and the shrinkToFit is not being honored (presumably because the minScale of the diagram is now set to 1).
I tried to reset the minScale to 0.0001 right before this code gets ran but in that case I get this error:
Uncaught Error: Diagram.minScale is not in the range > 0: 0.0001
So it looks like I obviously don’t understand how this is supposed to work. Any guidance would be helpful.
No, the problem is that the Diagram.minScale (and Diagram.maxScale) property setters are incorrectly signalling an out-of-range error when the new value is equal to the old value. We’ll fix this for version 1.4.12, which should come out on Monday.
Sorry about confusing you. The error was mine.
But I’m thinking that perhaps you don’t want to set Diagram.minScale anyway. I believe it would be better to override CommandHandler.canDecreaseScale. If the current scale * factor is less than the saved scale after the last zoomToFit(), return false. Otherwise return the result of calling the base method (CommandHandler.prototype.canDecreaseScale).
FYI, here’s the standard definition of CommandHandler.canDecreaseScale:
CommandHandler.prototype.canDecreaseZoom = function(factor) {
if (factor === undefined) factor = 1.0 / this.zoomFactor;
var diagram = this.diagram;
if (diagram === null) return false;
if (diagram.autoScale !== go.Diagram.None) return false;
var newscale = diagram.scale * factor;
if (newscale < diagram.minScale || newscale > diagram.maxScale) return false;
return diagram.allowZoom;
};