This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
Optional init: Partial<DrawCommandHandler>Gets or sets the arrow key behavior. Possible values are "move", "select", "scroll", "tree", "none", and "default".
The default value is "move". Set this property to "default" in order to make use of the additional commands in this class without affecting the arrow key behaviors.
Note that this functionality is different from the focus navigation behavior of the CommandHandler that was added in version 3.1 and enabled by the CommandHandler.isFocusEnabled property. In this DrawCommandHandler the arrow keys for the "move", "select" or "tree" behaviors depend on and modify the Diagram.selection. The built-in focus navigation is completely independent of the selection mechanism.
Gets or sets a function that is used to set Diagram.model. It can do more things before and/or after the actual setting of Diagram.model.
The default value is null. Setting this property does not raise any events.
If non-null, the function is called by loadLocalFile.
Gets or sets an HTMLElement so that the user can load a file saved by saveLocalFile by drag-and-dropping it on this element.
By default the value is null -- there is no such element. Setting this property does not raise any events or modify the DOM, but does add or remove listeners, including a "drop" listener that actually calls loadLocalFile and Diagram.focus.
If you want to support drag-and-drop loading of files, you will need to add the element to your page and set this property.
Gets or sets an HTMLInputElement so that the user can load a file saved by saveLocalFile by using the browser's file picker user interface.
By default the value is null -- there is no such input element. Setting this property does not raise any events or modify the DOM, but does add or remove a "change" listener that actually calls loadLocalFile and Diagram.focus.
If you want to support the user's picking of a file to load,
you will need to add an <input type="file"> element to your page and set this property.
It is moderately common to have this input element be hidden and invoke the input file picker by programmatically
calling click() on the element.
Gets or sets the default file type for locally saved files. The default value is "gojs". Setting this property does not raise any events.
Gets or sets the offset at which each repeated pasteSelection puts the new copied parts from the clipboard.
This controls whether or not the user can invoke the alignLeft, alignRight, alignTop, alignBottom, alignCenterX, alignCenterY commands.
This returns true: if the diagram is not go.Diagram.isReadOnly, if the model is not go.Model.isReadOnly, and if there are at least two selected go.Parts.
This controls whether or not the user can invoke the rotate command.
This returns true: if the diagram is not go.Diagram.isReadOnly, if the model is not go.Model.isReadOnly, and if there is at least one selected go.Part.
This predicate controls whether or not the user can invoke the saveLocalFile command.
true, by default
OverridecopyOverridedoThis implements custom behaviors for arrow key keyboard events. Set arrowKeyBehavior to "select", "move" (the default), "scroll" (the standard behavior), or "none" to affect the behavior when the user types an arrow key. Set that property to "default" in order to make use of the additional commands in this class without affecting the arrow key behaviors.
Note that this functionality is different from the focus navigation behavior of the CommandHandler that was added in version 3.1 and enabled by the CommandHandler.isFocusEnabled property. In this DrawCommandHandler the arrow keys for the "move", "select" or "tree" behaviors depend on and modify the Diagram.selection. The built-in focus navigation is completely independent of the selection mechanism.
This method loads a text file that the user chooses or drops that holds this diagram's model as JSON-formatted text, normally saved via saveLocalFile.
This calls Model.fromJson. This is called by the "change" event of the localFileInput element (if present) or the "drop" event of the localFileDropElement (if present).
The file type of the File.name must match the localFileType, or it must not have a file type.
a File instance from which to read the JSON-formatted text
Optional loader: ((diagram: Diagram, model: Model, name: string) => void)an optional function that sets Diagram.model, perhaps modifying the model first, and perhaps doing other updates after assigning the given Model to the given Diagram.
OverridepasteChange the z-ordering of selected parts to pull them forward, in front of all other parts in their respective layers. All unselected parts in each layer with a selected Part with a non-numeric go.Part.zOrder will get a zOrder of zero.
Change the z-ordering of selected parts to push them backward, behind of all other parts in their respective layers. All unselected parts in each layer with a selected Part with a non-numeric go.Part.zOrder will get a zOrder of zero.
Change the angle of the parts connected with the given part. This is in the command handler so it can be easily accessed for the purpose of creating commands that change the rotation of a part.
the positive (clockwise) or negative (counter-clockwise) change in the rotation angle of each Part, in degrees.
This command downloads a text file that holds this diagram's model as JSON-formatted text.
This calls Model.toJson.
Optional options: { an optional file name (defaults to Model.name.localFileType) and an optional MIME type (defaults to "application/text")
Optional mimetype?: stringOptional name?: stringPosition each selected non-Link horizontally so that each distance between them is the same, given the total width of the area occupied by them. Their Y positions are not modified. It tries to maintain the same ordering of selected Parts by their X position.
Note that if there is not enough room, the spacing might be negative -- the Parts might overlap.
Position each selected non-Link vertically so that each distance between them is the same, given the total height of the area occupied by them. Their X positions are not modified. It tries to maintain the same ordering of selected Parts by their Y position.
Note that if there is not enough room, the spacing might be negative -- the Parts might overlap.
This CommandHandler class allows the user to position selected Parts in a diagram relative to the first part selected, in addition to overriding the doKeyDown method of the CommandHandler for handling the arrow keys in additional manners.
Typical usage:
or:
If you want to experiment with this extension, try the Drawing Commands sample.
New in version 3.1 this adds a command to save the model as a text file in the user's local file system, typically in their Downloads folder, saveLocalFile. And it adds a method for loading a File: loadLocalFile.
There are two optional properties that can be used for calling loadLocalFile: localFileInput and localFileDropElement. The former may be a file type HTMLInputElement that you have on your page; the latter may be an HTMLElement, or even the whole document.body, where the user may drag-and-drop a saved file.
The default file type for files is controlled by localFileType.