Spacing factor: 1.0

Click in the diagram and then try zooming in and out of the diagram by using control-mouse-wheel. If you don't want to hold down the control key, click the mouse wheel button in the diagram to toggle between mouse wheel events zooming instead of scrolling.

This diagram uses a custom CommandHandler to replace the standard zooming behavior. The CommandHandler.decreaseZoom, CommandHandler.increaseZoom, and CommandHandler.resetZoom commands no longer change the Diagram.scale. Instead they change the effective Part.location for all of the Nodes by changing the value of the conversion function that is getting the location from the "loc" property on the node data.

As the value of SpacingCommandHandler.space changes, all of the Bindings on "loc" are re-evaluated, causing the nodes to get new locations. The value of the "loc" data property remains unchanged by the Binding. However the TwoWay Binding does cause the "loc" data property to be modified when the user drags a node.

The conversion functions also depend on the SpacingCommandHandler.isYSpaced property, which can be toggled by the checkbox. When false the conversion functions do not space along the Y axis, but only along the X axis.

Because the conversion functions are dependent on the particular Diagram, and because the node template depends on the conversion functions, the template cannot be used by other Diagrams.

The SpacingCommandHandler.space property is duplicated on the Model.modelData object, both so that the information is saved in the model as well as to support undo/redo.


GoJS Features in this sample