The constructor produces a CommandHandler with the default key bindings.
Optional
init: Partial<CommandHandler>Gets or sets a data object that is copied by groupSelection when creating a new Group.
The default value is null. If you set this to an Object, be sure that GraphLinksModel.isGroupForNodeData is true for that object. Setting this property does not raise any events.
Gets or sets whether copySelection should also copy Links that connect with selected Nodes. The default value is true. Setting this property does not raise any events.
The DraggingTool.copiesEffectiveCollection property serves a similar role for the DraggingTool when the user holds down the control key to modify the drag into a copy operation.
Gets or sets whether copySelection and copyToClipboard copy the node data property whose value is the containing group data's key.
Set this property to true if you want a copy/paste of a node to automatically have the new node be a member of the original group. Caution: this only has an effect if the Diagram's Diagram.model is a GraphLinksModel.
The default value is false.
Gets or sets whether copySelection and copyToClipboard copy the node data property whose value is the tree-parent node data's key.
Set this property to true if you want a copy/paste of a node to automatically have the new node be a tree-child of the original tree-parent node. Caution: this only has an effect if the Diagram's Diagram.model is a TreeModel.
The default value is false.
Gets or sets whether copySelection should also copy subtrees. The default value is false. Setting this property does not raise any events.
The DraggingTool.dragsTree property serves a similar role for the DraggingTool for both moving and copying operations.
Gets or sets whether deleteSelection should also delete links that are connected to nodes that are deleted. The default value is true. Setting this property does not raise any events.
Gets or sets whether deleteSelection should also delete subtrees. The default value is false. Setting this property does not raise any events.
Readonly
diagramThis read-only property returns the Diagram that is using this CommandHandler, after Diagram.commandHandler has been set to this object.
Gets or sets the GraphObject that has focus for this CommandHandler; the value may be null. Changing the focus automatically cancels any running Tool and sets isVirtualPointerDown to false. Whichever GraphObject has focus automatically gets the focusBox Adornment.
The initial value is null. This can only be set, and thus focus navigation mode can only be started, when isFocusEnabled is true. Any new focus GraphObject must be in the same Diagram as this CommandHandler.
This property is different than the Diagram.focus method, which requests DOM keyboard event focus.
Gets or sets the Adornment used to show the current GraphObject that has focus.
This defaults to two Shapes surrounding the focus object: a lime (or darkcyan if Part.isSelected) border and a dotted magenta border. Here is how the default focusBox is defined:
// in the "Tool" Layer so that it's in front of all regular Adornments
new Adornment('Auto', { layerName: 'Tool', pickable: false, selectable: false })
.add(
new Panel('Spot')
.add(
new Shape({
name: 'SHAPE', fill: null, stroke: 'lime', strokeWidth: 4
})
.bindObject('stroke', 'adornedPart', part => part.isSelected ? 'darkcyan' : 'lime'),
new Shape({
name: 'SHAPE2', stretch: Stretch.Fill, fill: null,
stroke: 'magenta', strokeWidth: 4, strokeDashArray: [4, 4]
})
),
new Placeholder({ padding: 4 })
);
This definition may change in any version.
Gets or sets a function to be called as the focus changes to a different GraphObject or to null. The default value for this property is null -- no function is called when the focus has changed.
When this is null, the CommandHandler uses its own live element to update screen readers.
Gets or sets whether the arrow/Enter
/Escape
/Space
/ContextMenu
keys are used for doing focus navigation.
The default value is false. This must be set to true in order for the user to be able to use keyboard navigation. When set to false, the focus is also set to null.
Gets or sets whether the virtual pointer has the primary mouse button held down or not.
Note that this state is maintained even when the virtualPointerBox is not visible because
the user has let go of the Shift
key.
The initial value is false -- as if the mouse button is not being held down. This can only be set when isVirtualPointerEnabled is true.
Gets or sets whether the Shift
key shows a virtual pointer (virtualPointerBox)
causing the arrow keys and Enter
to produce simulated mouse InputEvents.
The default value is false. This must be set to true in order for the user to be able to use the virtual pointer.
Gets or sets whether the zoomToFit command ever restores the previous Diagram scale and position. When this property is false, this command always calls Diagram.zoomToFit.
The default value is false. Setting this property does not raise any events.
Gets or sets the id
of the HTML element used to hold the description of the current focus
and possibly other state information.
The default value is the empty string. Note that the element must be in the same DOM as the diagram. Element id reference scope
If you do not provide your own HTML element by id
nor your own your own focusChanged event handler,
this will create and use one automatically.
However we suggest that you implement your own live element so that you can control its appearance and behavior.
Gets or sets the predicate that determines whether or not a node may become a member of a group. This predicate is called in addition to any existing group's Group.memberValidation predicate. The default predicate is null, which is equivalent to simply returning true. The predicate may be called passing null as the first argument (the Group) -- this asks whether it is OK to make the second argument (the Part, but not a Link) a top-level Part of the diagram.
For a more general discussion of validation, see Introduction to Validation.
The function, if supplied, must not have any side-effects.
Gets or sets where the clipboard is stored.
The value must be one of: "memory", "sessionStorage", "localStorage", or "systemClipboard".
If this value is not "memory", the value of window[this.storageLocation]
is expected to implement the Storage
interface.
The default value is "memory".
Gets or sets the 'Tool' layer Part used to indicate the current location of the virtual pointer. Its Part.location will be positioned exactly where the InputEvents happen.
The default box has some magenta lines looking like a target. In addition there is a thick dark-cyan circle that is shown when isVirtualPointerDown is true. Also, there is a visual indication of which mouse button is held down for future simulated mouse events, there is a visual indication of which keyboard modifiers those future simulated mouse events will have, and a visual indication of whether a future simulated mouse-up event is one-time double-click event.
Here is how the default virtual pointer box is defined:
new Part({
layerName: 'Tool', isInDocumentBounds: false, // avoid modifying documentBounds
locationObjectName: 'CIRCLE', locationSpot: Spot.Center,
pickable: false, selectable: false
})
.add(
new Shape('Circle', {
isGeometryPositioned: true, width: 30, height: 30,
fill: null, stroke: 'darkcyan', strokeWidth: 6, visible: false
})
.bind('visible', 'down'),
new Shape({ isGeometryPositioned: true, geometryString: 'M15 0L15 30', stroke: 'magenta' }),
new Shape({ isGeometryPositioned: true, geometryString: 'M0 15L30 15', stroke: 'magenta' }),
new Shape('Circle', { name: 'CIRCLE',
isGeometryPositioned: true, width: 20, height: 20,
fill: null, stroke: 'magenta', position: new Point(5, 5)
}),
new Shape({
isGeometryPositioned: true, geometry: CommandHandler._LeftButtonGeo,
fill: null, stroke: 'cyan', strokeWidth: 4
})
.bind('geometry', 'button', CommandHandler._showButton),
new TextBlock({ position: new Point(12, 0), font: 'bold 10pt sans-serif' })
.bind('text', 'clickCount', c => c > 1 ? c.toString() : ''),
new TextBlock({ position: new Point(0, 16) })
.bind('text', 'modifiers', CommandHandler._showModifiers)
)
This definition may change in any version.
Gets or sets a function that is called when the virtualPointerBox is replaced or modified.
Note that some of the state of the virtual pointer is stored in the Panel.data of the box Part.
Gets or sets the location of the virtual pointer, the virtualPointerBox Part.
Changing this property results in InputEvents and calls to doMouseMove
.
The initial value is (NaN, NaN).
Gets or sets the amount by which decreaseZoom and increaseZoom change the Diagram.scale.
The default value is 1.05 (5%). The value must be a number larger than 1.0. Setting this property does not raise any events.
Virtual
addMake sure all of the unnested Parts in the given collection are removed from any containing Groups.
This sets Part.containingGroup to null on each Part that is not a member of another Part in the argument collection. If the check argument to this method is supplied and true, this will call isValidMember on each part, passing null as the first argument.
This functionality is similar to ungroupSelection, except that this is not a command (there is no transaction and this does not raise a DiagramEvent) and the parts are necessarily becoming top-level parts (whereas ungrouping would add them to the Group containing the Group being ungrouped).
This function is typically called in a Diagram.mouseDrop event handler in order to remove the selected Parts from whatever Group they had been in.
If you want to add Parts to be members of a Group, call Group.addMembers. If you want to remove Parts completely from a Diagram, call Diagram.removeParts.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
a collection of Parts.
Optional
check: booleanwhether to call isValidMember to confirm that changing the Part to be a top-level Part is valid.
true if all non-Links were changed to be top-level Parts in this Diagram; false if some Parts or Nodes were not able to be added.
Virtual
canThis predicate controls whether the user can collapse expanded Groups.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
group: Groupif supplied, ignore the selection and consider collapsing this particular Group.
Virtual
canThis predicate controls whether the user can collapse expanded subtrees of Nodes.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
node: Nodeif supplied, ignore the selection and consider collapsing this particular Node.
Virtual
canThis predicate controls whether or not the user can invoke the copySelection command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
This returns true: if Diagram.allowCopy is true, if Diagram.allowClipboard is true, and if there are some selected Parts.
Virtual
canThis predicate controls whether or not the user can invoke the cutSelection command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
This returns true: if the diagram is not Diagram.isReadOnly, if Diagram.allowCopy is true, if Diagram.allowDelete is true, if Diagram.allowClipboard is true, and if there are some selected Parts.
Virtual
canThis predicate controls whether or not the user can invoke the decreaseZoom command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
factor: numberThis defaults to 1/zoomFactor. The value should be less than one and greater than zero.
This returns true if Diagram.allowZoom is true and if the new scale is within the range of Diagram.minScale and Diagram.maxScale.
Virtual
canThis predicate controls whether or not the user can invoke the deleteSelection command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
This returns true: if the diagram is not Diagram.isReadOnly, if Diagram.allowDelete is true, and if there are some selected Parts.
Virtual
canThis predicate controls whether or not the user can invoke the downloadSvg command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
options: SvgRendererOptions & { an optional Object that satisfies the SvgRendererOptions interface and may also have an optional "name" property for the name of the downloaded file
true, by default
Virtual
canThis predicate controls whether or not the user can invoke the editTextBlock command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
This returns true: if the diagram is not Diagram.isReadOnly, if Diagram.allowTextEdit is true, if there is a ToolManager.textEditingTool, and if there is any selected Part for which Part.canEdit is true.
Virtual
canThis predicate controls whether the user can expand collapsed Groups.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
group: Groupif supplied, ignore the selection and consider expanding this particular Group.
Virtual
canThis predicate controls whether the user can expand collapsed subtrees of Nodes.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
node: Nodeif supplied, ignore the selection and consider expanding this particular Node.
Virtual
canThis predicate controls whether or not the user can invoke the groupSelection command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
This returns true: if the archetypeGroupData is not null, if the diagram is not Diagram.isReadOnly, if Diagram.allowInsert is true, if Diagram.allowGroup is true, if Diagram.model is a GraphLinksModel, and if there is any selected Part that can be Part.canGrouped.
Virtual
canThis predicate controls whether or not the user can invoke the increaseZoom command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
factor: numberThis defaults to zoomFactor. The value should be greater than one.
This returns true if Diagram.allowZoom is true and if the new scale is within the range of Diagram.minScale and Diagram.maxScale.
Virtual
canThis predicate controls whether or not the user can invoke the pasteSelection command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
pos: PointPoint at which to center the newly pasted parts; if not present the parts would not be moved.
This returns true: if the diagram is not Diagram.isReadOnly, if Diagram.allowInsert is true, if Diagram.allowClipboard is true, and if the clipboard has parts in it.
Virtual
canThis predicate controls whether or not the user can invoke the redo command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
This returns true: if the diagram is not Diagram.isReadOnly, if Diagram.allowUndo is true, and if the UndoManager.canRedo predicate returns true.
Virtual
canThis predicate controls whether or not the user can invoke the resetZoom command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
newscale: numberThis defaults to Diagram.defaultScale, which is normally 1.0. The value should be greater than zero.
This returns true if Diagram.allowZoom is true. and if the new scale is within the range of Diagram.minScale and Diagram.maxScale.
Virtual
canThis predicate controls whether or not the user can invoke the scrollToPart command. This returns false if there is no argument Part and there are no selected Parts.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
part: PartThis defaults to the first selected Part of Diagram.selection
This returns true if Diagram.allowHorizontalScroll and Diagram.allowVerticalScroll are true.
Virtual
canThis predicate controls whether or not the user can invoke the selectAll command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
This returns true if Diagram.allowSelect is true.
Virtual
canThis predicate controls whether or not the user can invoke the showContextMenu command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
obj: Diagram | GraphObjecta GraphObject or Diagram with a contextMenu defined. If none is given, this method will use the first selected object, or else the Diagram.
Virtual
canThis predicate controls whether the user may stop the current tool. This just returns true.
This method may be overridden, but probably should not be overridden. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
true.
Virtual
canThis predicate controls whether or not the user can invoke the undo command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
This returns true: if the diagram is not Diagram.isReadOnly, if Diagram.allowUndo is true, and if the UndoManager.canUndo predicate returns true.
Virtual
canThis predicate controls whether or not the user can invoke the ungroupSelection command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
group: Groupif supplied, ignore the selection and consider ungrouping this particular Group.
This returns true: if the diagram is not Diagram.isReadOnly, if Diagram.allowDelete is true, if Diagram.allowUngroup is true, if Diagram.model is a GraphLinksModel, and if there are any selected Groups that are Group.ungroupable.
Virtual
canThis predicate controls whether or not the user can invoke the zoomToFit command.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. This method must not have any side-effects. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
rect: Rectan optional Rect in document bounds that is the intended new viewport bounds.
This returns true if Diagram.allowZoom is true.
Virtual
collapseThis command collapses all expanded selected Groups. This operation is performed within a "Collapse SubGraph" transaction. Just before the end of the transaction this raises the "SubGraphCollapsed" DiagramEvent, with a collection of collapsed Groups as the subject. This currently has no default keyboard shortcut.
This calls Group.collapseSubGraph to perform the collapse, which will set Group.isSubGraphExpanded to false. You may want to save the collapsed/expanded state to the model by using a TwoWay Binding on the "isSubGraphExpanded" property of your Groups, and perhaps also on the Group.wasSubGraphExpanded property.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
group: Groupif supplied, ignore the selection and collapse this particular Group.
Virtual
collapseThis command collapses all expanded selected Nodes. This operation is performed within a "Collapse Tree" transaction. Just before the end of the transaction this raises the "TreeCollapsed" DiagramEvent, with a collection of collapsed Nodes as the subject. This currently has no default keyboard shortcut.
This calls Node.collapseTree to perform the collapse, which will set Node.isTreeExpanded to false. You may want to save the collapsed/expanded state to the model by using a TwoWay Binding on the "isTreeExpanded" property of your Nodes, and perhaps also on the Node.wasTreeExpanded property.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
node: Nodeif supplied, ignore the selection and collapse this particular Node subtree.
Virtual
computeFind the actual collection of nodes and links to be moved or copied, given an initial collection. This includes links that connected at both ends to nodes being moved or copied, members of Groups, and if DraggingTool.dragsTree is true, this includes nodes and links that are "tree" descendants from selected nodes.
Note that this does not return a simple collection of Parts, but a go.Map associating a chosen Part with an Object holding its original location Points as the value of the "point" property.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
options: DraggingOptionsPotential options for the collection computation. If not specified, this uses the DraggingTool's drag options.
a Map mapping Parts to DraggingInfo Objects that have a "point" property remembering the original location of that Part.
Virtual
copyThis command copies the currently selected parts, Diagram.selection, from the Diagram into the clipboard.
This is normally invoked by the Ctrl-C
keyboard shortcut.
This makes a copy of the current selection by calling copyToClipboard. This also raises the "ClipboardChanged" diagram event.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Virtual
copyMake a copy of the given collection of Parts and stores it in a static variable acting as the clipboard.
The clipboard is initially null. It can hold a collection of copied Parts. It also remembers the Model.dataFormat of the diagram from which the parts were copied.
This calls Diagram.copyParts in order to make a copy of the Parts for the clipboard. The values of copiesParentKey and copiesGroupKey affect whether a copied node data remembers its tree parent node (if in a TreeModel) or its containing group (if in a GraphLinksModel).
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Virtual
cutThis command executes a copySelection followed by a deleteSelection.
This is normally invoked by the Ctrl-X
keyboard shortcut.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Virtual
decreaseThis command decreases the Diagram.scale by a given factor.
This is normally invoked by the Ctrl--
and Numpad--
keyboard shortcuts.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
factor: numberThis defaults to 1/zoomFactor. The value should be less than one and greater than zero.
Virtual
deleteThis command deletes the currently selected parts from the diagram.
This is normally invoked by the Del
keyboard shortcut.
This will first start a "Delete" transaction, then raise the "SelectionDeleting" DiagramEvent, call Diagram.removeParts on a perhaps extended collection of selected Parts, raise the "SelectionDeleted" diagram event, and finally commit the transaction.
Because this command changes the selection, this method also raises the "ChangingSelection" and "ChangedSelection" diagram events. Changes are performed within a transaction, but the selection events are raised outside the transaction.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Virtual
describeThis produces the default description string for a GraphObject that is the new focus.
This will need to be replaced or overridden for internationalization purposes if you have not specified an event handler for focusChanged. Internally this is only called when focusChanged is null.
the previous value for focus, might be null or the same value oas NEWOBJ
the new value for focus, might be null or the same value as OLDOBJ
a generic string describing the NEWOBJ, to be read by a screen reader
Virtual
doThis is called by tools to handle keyboard commands. For most commands, this calls the "can..." predicate; if that returns true it calls the command method. If GoJS handles a key-down event as a keyboard command, the underlying event will not bubble.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
There is an example custom CommandHandler in the extensions directory: DrawCommandHandler.js, which implements additional behaviors for the arrow keys by overriding this method. For additional discussion, please read the Introduction page on Commands.
Starting in 3.0.7, this uses the value of InputEvent.commandKey.
Virtual
doThis is called by tools to handle keyboard commands.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Virtual
downloadThis command downloads an SVG file that holds a rendering of this diagram.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
options: SvgRendererOptions & { an optional Object that satisfies the SvgRendererOptions interface and may also have an optional "name" property for the name of the downloaded file; if "name" is not supplied, the downloaded file name will be the Model.name if it is not an empty string, with an "svg" file type.
Virtual
editThis command starts in-place editing of a TextBlock in the selected Part.
This is normally invoked by the F2
keyboard shortcut.
This starts the TextEditingTool to have the user enter or modify the text string and finally set the TextBlock.text. You may want to save the new string to the model by using a TwoWay Binding on the "text" property of your TextBlock.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Virtual
expandThis command expands all collapsed selected Groups. This operation is performed within an "Expand SubGraph" transaction. Just before the end of the transaction this raises the "SubGraphExpanded" DiagramEvent, with a collection of expanded Groups as the subject. This currently has no default keyboard shortcut.
This calls Group.expandSubGraph to perform the collapse, which will set Group.isSubGraphExpanded to true. You may want to save the collapsed/expanded state to the model by using a TwoWay Binding on the "isSubGraphExpanded" property of your Groups, and perhaps also on the Group.wasSubGraphExpanded property.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
group: Groupif supplied, ignore the selection and expand this particular Group.
Virtual
expandThis command expands all collapsed selected Nodes. This operation is performed within an "Expand Tree" transaction. Just before the end of the transaction this raises the "TreeExpanded" DiagramEvent, with a collection of expanded Nodes as the subject. This currently has no default keyboard shortcut.
This calls Node.expandTree to perform the expand, which will set Node.isTreeExpanded to true. You may want to save the collapsed/expanded state to the model by using a TwoWay Binding on the "isTreeExpanded" property of your Nodes, and perhaps also on the Node.wasTreeExpanded property.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
node: Nodeif supplied, ignore the selection and collapse this particular Node subtree.
Virtual
groupThis command adds a copy of archetypeGroupData to the diagram's model
to create a new Group and then adds the selected Parts to that new group.
This is normally invoked by the Ctrl-G
keyboard shortcut.
This creates a new Group by adding a copy of the archetypeGroupData to the model. Each of the selected parts for which Part.canGroup is true and for which isValidMember is true is made a member of that new group. If all of the selected groupable parts were members of a pre-existing group, the new group also becomes a member of that pre-existing group, if isValidMember is true for that existing group with the new group. The new group becomes the only selected part. This raises the "SelectionGrouped" diagram event. This method also raises the "ChangingSelection" and "ChangedSelection" diagram events. Changes are performed in a "Group" transaction, but the selection events are raised outside the transaction.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Virtual
increaseThis command increases the Diagram.scale by a given factor.
This is normally invoked by the Ctrl-+
and Numpad-+
keyboard shortcuts.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
factor: numberThis defaults to zoomFactor. The value should be greater than one.
Virtual
isThis predicate is called to determine whether a Node may be added as a member of a Group. This always checks to make sure no group might become a member of itself, either directly or indirectly. If the Group has a Group.memberValidation predicate and if it returns false, this method returns false. If this CommandHandler has a memberValidation predicate and if it returns false, this method returns false. Otherwise this will return true.
For a more general discussion of validation, see Introduction to Validation.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
true if OK to add the node to the group.
Virtual
pasteIf the clipboard holds a collection of Parts, and if the Model.dataFormat matches that stored in the clipboard, this makes a copy of the clipboard's parts and adds the copies to this Diagram.
This calls Diagram.copyParts in order to make a copy of the Parts in the clipboard and add them to this diagram.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
a collection of the newly pasted Parts, or an empty Set if there was no data in the clipboard.
Virtual
pasteThis command copies the contents of the clipboard into this diagram and makes those new parts the new selection.
This is normally invoked by the Ctrl-V
keyboard shortcut.
This calls pasteFromClipboard to add copies of Parts into this diagram, and then selects all of the newly created parts. This also raises the "ClipboardPasted" diagram event. This method raises the "ChangingSelection" and "ChangedSelection" diagram events. Changes are performed in a transaction, but the selection events are raised outside the transaction.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
pos: PointPoint at which to center the newly pasted parts; if not present the parts are not moved.
Virtual
redoThis command calls UndoManager.redo.
This is normally invoked by the Ctrl-Y
keyboard shortcut.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Virtual
resetThis command sets the Diagram.scale to a new scale value, by default 1.
This is normally invoked by the Ctrl-0
keyboard shortcut.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
newscale: numberThis defaults to Diagram.defaultScale, which is normally 1.0. The value should be greater than zero.
Virtual
scrollThis command scrolls the diagram to make a highlighted or selected Part visible in the viewport. Call this command repeatedly to cycle through the Diagram.highlighteds collection, if there are any Parts in that collection, or else in the Diagram.selection collection, scrolling to each one in turn by calling Diagram.centerRect.
This method animates to the scrolled part, and Diagram.scrollToRect does not.
This is normally invoked by the Space
keyboard shortcut.
If there is no argument and there is no highlighted or selected Part, this command does nothing.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
part: PartThis defaults to the first highlighted Part of Diagram.highlighteds, or, if there are no highlighted Parts, the first selected Part.
Virtual
selectThis command selects all of the selectable Parts in the diagram by setting Part.isSelected to true on each one.
This is normally invoked by the Ctrl-A
keyboard shortcut.
This method raises the "ChangingSelection" and "ChangedSelection" diagram events. This ignores all parts in temporary layers.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Virtual
showThis command opens the context menu for a selected Part or given GraphObject, or else for the whole Diagram.
This is normally invoked by the Menu
keyboard shortcut.
The given GraphObject must have a GraphObject.contextMenu defined in order to show anything.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
obj: Diagram | GraphObjecta GraphObject or Diagram with a contextMenu defined. If none is given, this method will use the first selected object, or else the Diagram. The method will simulate a right-button click at the middle of the GraphObject or, if a Diagram, at the current mouse position if it is in the viewport.
Virtual
stopThis command hides any visible tooltip, clears the selection, and cancels the operation of the current tool.
This is typically called when the user presses Escape
.
If the current tool is a ToolManager and a tooltip is visible, this hides the tooltip and returns. If the current tool is a ToolManager and no tooltip is visible, this clears the diagram's selection, and then calls Tool.doCancel on the current tool.
Virtual
undoThis command calls UndoManager.undo.
This is normally invoked by the Ctrl-Z
keyboard shortcut.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Virtual
ungroupThis command removes selected groups from the diagram without removing their members from the diagram.
This is normally invoked by the Ctrl-Shift-G
keyboard shortcut.
For the given group, or if not supplied, each selected Group that is Group.ungroupable, expand the subgraph and change all of its member parts to be members of the group that the selected group node is in. (If the selected group is a top-level node, i.e. not a member of any group node, its members become top-level parts too.) All of those selected groups are deleted. All of the reparented member parts are selected.
This raises the "SelectionUngrouped" diagram event. This method also raises the "ChangingSelection" and "ChangedSelection" diagram events. Changes are performed in an "Ungroup" transaction, but the selection events are raised outside the transaction.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
group: Groupif supplied, ignore the selection and consider ungrouping this particular Group.
Virtual
zoomThis command changes the Diagram.scale so that the Diagram.documentBounds fits within the viewport.
If isZoomToFitRestoreEnabled is true and this command had been called before without any other zooming since then,
the original Diagram scale and position are restored.
This is normally invoked by the Shift-Z
keyboard shortcut.
If you provide a Rect argument, it will change the Diagram scale and position to match, calling Diagram.zoomToRect. Otherwise it calls Diagram.zoomToFit in order to fit the document bounds in the viewport.
This animates zooming, unless animation has been disabled. Diagram.zoomToFit and Diagram.zoomToRect do not animate.
This method may be overridden, but you should consider calling this base method in order to get all of its functionality. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Optional
rect: Recta Rect in document bounds that is the intended new viewport bounds. If this is provided, the command will call Diagram.zoomToRect, otherwise it will call Diagram.zoomToFit.
The Diagram.commandHandler implements various commands such as CommandHandler.deleteSelection or CommandHandler.redo. The CommandHandler includes keyboard event handling to interpret key presses as commands.
CommandHandlers cannot be shared amongst multiple Diagrams.
You may define a CommandHandler subclass and override methods. However you must seriously consider calling the base method in order to get its default behavior. There may be situations where not calling the base method may cause subtle bugs, but that depends on the method. Please read the Introduction page on Extensions for how to override methods and how to call a base method.
There is an example custom CommandHandler in the extensions directory: DrawCommandHandler.js, which provides alignment commands and additional behaviors for the arrow keys.
For additional discussion, please read the Introduction page on Commands.
Keyboard Shortcuts
The CommandHandler implements the following command bindings for keyboard input in doKeyDown:
Del
orBackspace
invokes deleteSelectionCtrl-X
orShift-Del
invokes cutSelectionCtrl-C
orCtrl-Insert
invokes copySelectionCtrl-V
orShift-Insert
invokes pasteSelectionCtrl-A
invokes selectAllCtrl-Z
orAlt-Backspace
invokes undoCtrl-Y
orCtrl-Shift-Z
orAlt-Shift-Backspace
invokes redoUp
orDown
orLeft
orRight
(arrow key) calls Diagram.scrollPageUp
orPageDown
calls Diagram.scrollHome
orEnd
calls Diagram.scrollSpace
invokes scrollToPartCtrl-- (minus) or Numpad--
invokes decreaseZoomCtrl-+ (plus) or Numpad-+
invokes increaseZoomCtrl-0
invokes resetZoomShift-Z
invokes zoomToFit; repeat to return to the original scale and positionCtrl-G
invokes groupSelectionCtrl-Shift-G
invokes ungroupSelectionF2
invokes editTextBlockMenu Key
or Shift-F10 or Ctrl-Shift-\ invokes showContextMenuEsc
invokes stopCommandOn a Mac the Command key is used as the modifier instead of the Control key. The Command key is called the "Meta" modifier in JavaScript HTML DOM.
On touch devices there is a default context menu that shows many commonly-used commands when you hold a finger down on the diagram.
Keyboard Controlled Focus Navigation and Virtual Pointer
The CommandHandler also supports a way to use the keyboard instead of the mouse or finger to focus on a node or a link or on a button or port within a node or a link, and to act on it or to change focus to a nearby or related node or link or button or port. This focus navigation mechanism is independent of the diagram's selection and highlight mechanisms, although it does make it easy to select or deselect a focused node or link. Focus is shown using a single Adornment, the focusBox, that is added to the GraphObject that has focus.It also supports a virtual pointer to allow keyboard events to produce mouse events for invoking and controlling tools. The virtual pointer is shown as a single Part, the virtualPointerBox, in the 'Tool' Layer when the
Shift
key is held down, andShift
-arrow keys move it around.Enable this functionality in any Diagram by
Ctrl-Alt-Enter
. That command actually toggles whether or not the focus navigation and virtual pointer system are enabled. When isFocusEnabled and isVirtualPointerEnabled are false (the default) there is no difference in behavior from earlier version libraries, except for the addition of thisCtrl-Alt-Enter
command to toggle those two properties on and off.Focus Navigation
The focus navigation mode handles arrow keys and the `Enter`, `Escape`, `Space`, and `ContextMenu` keys to allow the user to change which GraphObject has focus and to perform operations on what has focus. The focus is completely independent of the Diagram.selection and Diagram.highlighteds collections and mechanisms. All other keyboard commands should operate normally. For example, the `Delete` key will always operate on the selection, not on the focus.When the focus object changes, the function value of the focusChanged property, if provided, is called.
Virtual Pointer
When the user holds down the `Shift` key, it goes into virtual pointer mode, where the virtualPointerBox shows where the virtual pointer is, and `Shift`-arrow keys move that virtualPointerBox around. Moving the virtualPointerBox results in mouse-move InputEvents. Also holding down the `Ctrl` modifier when typing arrow keys offers finer positioning at one document unit per keystroke. `Shift-Enter` toggles whether the virtual pointer is 'down' or 'up', also shown in the virtualPointerBox with a thick dark-cyan circle indicating 'down', and results in mouse-down or mouse-up InputEvents.The
Shift-Numpad
keys from 1 to 9, excluding 5, also shift the virtual pointer around.Basically, type
Shift-Enter
to do the mouse-down, typeShift-arrow
keys to move the virtual pointer around, and finally typeShift-Enter
again to do the mouse-up. Note thatShift
does not need to be held down the whole time during what would be a mouse-down/moves/up sequence. This allows almost any mouse Tool to run, except ones that involve timing which can be hard to control. Changing the current focus object automatically cancels any Tool running due to the virtual pointer mechanism, which helps with the times that the user forgets to do the secondShift-Enter
for the mouse-up effect.Shift-Space
changes the focus to be the Part at the current virtual virtualPointerLocation.Because
Shift
andCtrl
are used to control the virtual pointer, there is no natural way to specify modifiers during virtual mouse events, such as control-drag-and-drop in order to copy the selection. Nor is there a reasonable way to specify which button to use for mouse-down or mouse-up events, nor to control whether it's a single click or a double click. So there are additional commands to control those aspects of future simulated mouse input events:When the virtual pointer is modified by one of the above keyboard commands, the function value of the virtualPointerChanged property, if provided, is called.
General Policies
The `Ctrl` and `Meta` modifier keys are interchangeable for all built-in command keyboard shortcuts. Use whatever works well on your keyboard. But note that not all Tools are that way. For example, the `Ctrl` modifier when using the DraggingTool is replaced by the `Alt` modifier on macOS.The
Tab
,Caps Lock
,Insert
, andScroll Lock
keys are not used for either focus navigation or virtual pointer control. Tabbing normally changes the HTML element that has keyboard focus, and that behavior is unmodified while the diagram has keyboard focus.Note that nearly all of the regular keyboard-shortcut commands are unaffected by focus navigation. This includes the common commands: delete, cut, copy, paste, selectAll, undo, redo, *Zoom, group, ungroup, editTextBlock. However the arrow keys do not scroll, and the
ContextMenu
key works on the focus, not on the selection, unless there is no focus object.