You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
463 lines
25 KiB
463 lines
25 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS Events -- Northwoods Software</title>
|
|
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
|
|
<script src="../release/go.js"></script>
|
|
<script src="goIntro.js"></script>
|
|
</head>
|
|
<body onload="goIntro()">
|
|
<div id="container" class="container-fluid">
|
|
<div id="content">
|
|
|
|
<h1>Events</h1>
|
|
<p>
|
|
There are three basic kinds of events that <b>GoJS</b> deals with:
|
|
<a>DiagramEvent</a>s, <a>InputEvent</a>s, and <a>ChangedEvent</a>s.
|
|
This page discusses the first two; see <a href="changedEvents.html">Changed Events</a> for the last kind of event.
|
|
</p>
|
|
|
|
<h2 id="DiagramEvents">Diagram Events</h2>
|
|
<p>
|
|
<a>DiagramEvent</a>s represent general user-initiated changes to a diagram.
|
|
You can register one or more diagram event handlers by calling <a>Diagram.addDiagramListener</a>.
|
|
You can also register a diagram event handler in <a>Diagram</a> initialization when calling <a>GraphObject,make</a>.
|
|
Each kind of diagram event is distinguished by its name.
|
|
</p>
|
|
<p>
|
|
Currently defined diagram event names include:
|
|
</p>
|
|
<ul>
|
|
<li id="AnimationStarting" onclick="window.location.hash = '#AnimationStarting'">
|
|
"<b>AnimationStarting</b>", an animation is about to start;
|
|
do not modify the diagram or its model in the event listener.
|
|
</li>
|
|
<li id="AnimationFinished" onclick="window.location.hash = '#AnimationFinished'">
|
|
"<b>AnimationFinished</b>", an animation just completed;
|
|
do not modify the diagram or its model in the event listener.
|
|
</li>
|
|
<li id="BackgroundSingleClicked" onclick="window.location.hash = '#BackgroundSingleClicked'">
|
|
"<b>BackgroundSingleClicked</b>", when a mouse left-button single-click happened in the background of the Diagram, not on a Part;
|
|
if you make any changes, start and commit your own transaction.
|
|
</li>
|
|
<li id="BackgroundDoubleClicked" onclick="window.location.hash = '#BackgroundDoubleClicked'">
|
|
"<b>BackgroundDoubleClicked</b>", when a mouse left-button double-click happened in the background of the Diagram, not on a Part;
|
|
if you make any changes, start and commit your own transaction.
|
|
</li>
|
|
<li id="BackgroundContextClicked" onclick="window.location.hash = '#BackgroundContextClicked'">
|
|
"<b>BackgroundContextClicked</b>", when a mouse right-button single-click happened in the background of the Diagram, not on a Part;
|
|
if you make any changes, start and commit your own transaction.
|
|
</li>
|
|
<li id="ChangingSelection" onclick="window.location.hash = '#ChangingSelection'">
|
|
"<b>ChangingSelection</b>", an operation is about to change the <a>Diagram.selection</a> collection,
|
|
which is also the value of the <a>DiagramEvent.subject</a>;
|
|
do not make any changes to the selection or the diagram or the model in the event listener;
|
|
note that just setting <a>Part.isSelected</a> will not raise this event, but tools and commands will.
|
|
</li>
|
|
<li id="ChangedSelection" onclick="window.location.hash = '#ChangedSelection'">
|
|
"<b>ChangedSelection</b>", an operation has just changed the <a>Diagram.selection</a> collection,
|
|
which is also the value of the <a>DiagramEvent.subject</a>;
|
|
do not make any changes to the selection or the diagram or the model in the event listener;
|
|
note that just setting <a>Part.isSelected</a> will not raise this event, but tools and commands will.
|
|
</li>
|
|
<li id="ClipboardChanged" onclick="window.location.hash = '#ClipboardChanged'">
|
|
"<b>ClipboardChanged</b>", Parts have been copied to the clipboard by <a>CommandHandler.copySelection</a>;
|
|
the <a>DiagramEvent.subject</a> is the collection of Parts;
|
|
if you make any changes, start and commit your own transaction.
|
|
</li>
|
|
<li id="ClipboardPasted" onclick="window.location.hash = '#ClipboardPasted'">
|
|
"<b>ClipboardPasted</b>", Parts have been copied from the clipboard into the Diagram by <a>CommandHandler.pasteSelection</a>;
|
|
the <a>DiagramEvent.subject</a> is the <a>Diagram.selection</a>,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="DocumentBoundsChanged" onclick="window.location.hash = '#DocumentBoundsChanged'">
|
|
"<b>DocumentBoundsChanged</b>", the area of the diagram's Parts, <a>Diagram.documentBounds</a>, has changed;
|
|
the <a>DiagramEvent.parameter</a> is the old Rect.
|
|
</li>
|
|
<li id="ExternalObjectsDropped" onclick="window.location.hash = '#ExternalObjectsDropped'">
|
|
"<b>ExternalObjectsDropped</b>", Parts have been copied into the Diagram by drag-and-drop from outside of the Diagram;
|
|
the <a>DiagramEvent.subject</a> is the set of Parts that were dropped (which is also the <a>Diagram.selection</a>),
|
|
the <a>DiagramEvent.parameter</a> is the source Diagram,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="GainedFocus" onclick="window.location.hash = '#GainedFocus'">
|
|
"<b>GainedFocus</b>", the diagram has gained keyboard focus, such as after a call to <a>Diagram.focus</a>.
|
|
</li>
|
|
<li id="InitialLayoutCompleted" onclick="window.location.hash = '#InitialLayoutCompleted'">
|
|
"<b>InitialLayoutCompleted</b>", the whole diagram layout has updated for the first time since a major change to the Diagram,
|
|
such as replacing the Model;
|
|
if you make any changes, you do not need to perform a transaction.
|
|
</li>
|
|
<li id="LayoutCompleted" onclick="window.location.hash = '#LayoutCompleted'">
|
|
"<b>LayoutCompleted</b>", the whole diagram layout has just been updated;
|
|
if you make any changes, you do not need to perform a transaction.
|
|
</li>
|
|
<li id="LinkDrawn" onclick="window.location.hash = '#LinkDrawn'">
|
|
"<b>LinkDrawn</b>", the user has just created a new Link using <a>LinkingTool</a>;
|
|
the <a>DiagramEvent.subject</a> is the new Link,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction..
|
|
</li>
|
|
<li id="LinkRelinked" onclick="window.location.hash = '#LinkRelinked'">
|
|
"<b>LinkRelinked</b>", the user has just reconnected an existing Link using <a>RelinkingTool</a> or <a>DraggingTool</a>;
|
|
the <a>DiagramEvent.subject</a> is the modified Link,
|
|
the <a>DiagramEvent.parameter</a> is the GraphObject port that the link was disconnected from,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction..
|
|
</li>
|
|
<li id="LinkReshaped" onclick="window.location.hash = '#LinkReshaped'">
|
|
"<b>LinkReshaped</b>", the user has just rerouted an existing Link using <a>LinkReshapingTool</a>;
|
|
the <a>DiagramEvent.subject</a> is the modified Link,
|
|
the <a>DiagramEvent.parameter</a> is the List of Points of the link's original route,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction..
|
|
</li>
|
|
<li id="LostFocus" onclick="window.location.hash = '#LostFocus'">
|
|
"<b>LostFocus</b>", the diagram has lost keyboard focus ("blur").
|
|
</li>
|
|
<li id="Modified" onclick="window.location.hash = '#Modified'">
|
|
"<b>Modified</b>", the <a>Diagram.isModified</a> property has been set to a new value --
|
|
useful for marking a window as having been modified since the last save;
|
|
do not modify the Diagram or its Model in the event listener.
|
|
</li>
|
|
<li id="ObjectSingleClicked" onclick="window.location.hash = '#ObjectSingleClicked'">
|
|
"<b>ObjectSingleClicked</b>", a click that occurred on a GraphObject;
|
|
the <a>DiagramEvent.subject</a> is the GraphObject;
|
|
if you make any changes, start and commit your own transaction.
|
|
</li>
|
|
<li id="ObjectDoubleClicked" onclick="window.location.hash = '#ObjectDoubleClicked'">
|
|
"<b>ObjectDoubleClicked</b>", a double-click that occurred on a GraphObject;
|
|
the <a>DiagramEvent.subject</a> is the GraphObject;
|
|
if you make any changes, start and commit your own transaction.
|
|
</li>
|
|
<li id="ObjectContextClicked" onclick="window.location.hash = '#ObjectContextClicked'">
|
|
"<b>ObjectContextClicked</b>", a context-click that occurred on a GraphObject;
|
|
the <a>DiagramEvent.subject</a> is the GraphObject;
|
|
if you make any changes, start and commit your own transaction.
|
|
</li>
|
|
<li id="PartCreated" onclick="window.location.hash = '#PartCreated'">
|
|
"<b>PartCreated</b>", the user inserted a new Part by <a>ClickCreatingTool</a>;
|
|
the <a>DiagramEvent.subject</a> is the new Part,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="PartResized" onclick="window.location.hash = '#PartResized'">
|
|
"<b>PartResized</b>", the user has changed the size of a GraphObject by <a>ResizingTool</a>;
|
|
the <a>DiagramEvent.subject</a> is the GraphObject,
|
|
the <a>DiagramEvent.parameter</a> is the original Size,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="PartRotated" onclick="window.location.hash = '#PartRotated'">
|
|
"<b>PartRotated</b>", the user has changed the angle of a GraphObject by <a>RotatingTool</a>;
|
|
the <a>DiagramEvent.subject</a> is the GraphObject,
|
|
the <a>DiagramEvent.parameter</a> is the original angle in degrees,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="SelectionMoved" onclick="window.location.hash = '#SelectionMoved'">
|
|
"<b>SelectionMoved</b>", the user has moved selected Parts by <a>DraggingTool</a>;
|
|
the <a>DiagramEvent.subject</a> is a Set of the moved Parts,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="SelectionCopied" onclick="window.location.hash = '#SelectionCopied'">
|
|
"<b>SelectionCopied</b>", the user has copied selected Parts by <a>DraggingTool</a>;
|
|
the <a>DiagramEvent.subject</a> is Set of the newly copied Parts,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="SelectionDeleting" onclick="window.location.hash = '#SelectionDeleting'">
|
|
"<b>SelectionDeleting</b>", the user is about to delete selected Parts by <a>CommandHandler.deleteSelection</a>;
|
|
the <a>DiagramEvent.subject</a> is the <a>Diagram.selection</a> collection of Parts to be deleted,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="SelectionDeleted" onclick="window.location.hash = '#SelectionDeleted'">
|
|
"<b>SelectionDeleted</b>", the user has deleted selected Parts by <a>CommandHandler.deleteSelection</a>;
|
|
the <a>DiagramEvent.subject</a> is the collection of Parts that were deleted,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="SelectionGrouped" onclick="window.location.hash = '#SelectionGrouped'">
|
|
"<b>SelectionGrouped</b>", the user has made a new Group out of the selected Parts by <a>CommandHandler.groupSelection</a>;
|
|
the <a>DiagramEvent.subject</a> is the new Group,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="SelectionUngrouped" onclick="window.location.hash = '#SelectionUngrouped'">
|
|
"<b>SelectionUngrouped</b>", the user has removed a selected Group but kept its members by <a>CommandHandler.ungroupSelection</a>;
|
|
the <a>DiagramEvent.subject</a> is the collection of Groups that were ungrouped,
|
|
the <a>DiagramEvent.parameter</a> is the collection of former member Parts that were ungrouped,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="SubGraphCollapsed" onclick="window.location.hash = '#SubGraphCollapsed'">
|
|
"<b>SubGraphCollapsed</b>", the user has collapsed selected Groups by <a>CommandHandler.collapseSubGraph</a>;
|
|
the <a>DiagramEvent.subject</a> is the collection of Groups that were collapsed,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="SubGraphExpanded" onclick="window.location.hash = '#SubGraphExpanded'">
|
|
"<b>SubGraphExpanded</b>", the user has expanded selected Groups by <a>CommandHandler.expandSubGraph</a>;
|
|
the <a>DiagramEvent.subject</a> is the collection of Groups that were expanded,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="TextEdited" onclick="window.location.hash = '#TextEdited'">
|
|
"<b>TextEdited</b>", the user has changed the string value of a TextBlock by <a>TextEditingTool</a>;
|
|
the <a>DiagramEvent.subject</a> is the edited TextBlock,
|
|
the <a>DiagramEvent.parameter</a> is the original string,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="TreeCollapsed" onclick="window.location.hash = '#TreeCollapsed'">
|
|
"<b>TreeCollapsed</b>", the user has collapsed selected Nodes with subtrees by <a>CommandHandler.collapseTree</a>;
|
|
the <a>DiagramEvent.subject</a> is the collection of Nodes that were collapsed,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="TreeExpanded" onclick="window.location.hash = '#TreeExpanded'">
|
|
"<b>TreeExpanded</b>", the user has expanded selected Nodes with subtrees by <a>CommandHandler.expandTree</a>;
|
|
the <a>DiagramEvent.subject</a> is the collection of Nodes that were expanded,
|
|
and this is called within a transaction, so that you do not have to start and commit your own transaction.
|
|
</li>
|
|
<li id="ViewportBoundsChanged" onclick="window.location.hash = '#ViewportBoundsChanged'">
|
|
"<b>ViewportBoundsChanged</b>", the visible area of the Diagram, <a>Diagram.viewportBounds</a>, has changed;
|
|
the <a>DiagramEvent.subject</a> is an object whose "scale" property is the old <a>Diagram.scale</a> value,
|
|
whose "position" property is the old <a>Diagram.position</a> value,
|
|
and whose "bounds" property is the old <a>Diagram.viewportBounds</a> value;
|
|
the <a>DiagramEvent.parameter</a> is also the old viewportBounds Rect.
|
|
Do not modify the Diagram position or scale (i.e. the viewport bounds) in the listener.
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
DiagramEvents do not necessarily correspond to mouse events or keyboard events or touch events.
|
|
Nor do they necessarily correspond to changes to the diagram's model --
|
|
for tracking such changes, use <a>Model.addChangedListener</a> or <a>Diagram.addModelChangedListener</a>.
|
|
DiagramEvents only occur because the user did something, perhaps indirectly.
|
|
</p>
|
|
<p>
|
|
<p>
|
|
In addition to the DiagramEvent listeners there are also circumstances where detecting such changes is common
|
|
enough to warrant having properties that are event handlers.
|
|
Because these events do not necessarily correspond to any particular input or diagram event,
|
|
these event handlers have custom arguments that are specific to the situation.
|
|
</p>
|
|
<p>
|
|
One very common such event property is <a>GraphObject.click</a>, which if non-null is a function that is called
|
|
whenever the user clicks on that object.
|
|
This is most commonly used to specify behavior for "Button"s, but it and the other "click" event properties,
|
|
"doubleClick" and "contextClick", can be useful on any GraphObject.
|
|
</p>
|
|
<p>
|
|
Another common event property is <a>Part.selectionChanged</a>,
|
|
which (if non-null) is called whenever <a>Part.isSelected</a> changes.
|
|
In this case the event hander function is passed a single argument, the Part.
|
|
There is no need for additional arguments because the function can check the current value of <a>Part.isSelected</a> to decide what to do.
|
|
</p>
|
|
</p>
|
|
<p>
|
|
Model <a>ChangedEvent</a>s are more complete and reliable than depending on <a>DiagramEvent</a>s.
|
|
For example, the "LinkDrawn" DiagramEvent is not raised when code adds a link to a diagram.
|
|
That DiagramEvent is only raised when the user draws a new link using the <a>LinkingTool</a>.
|
|
Furthermore the link has not yet been routed, so <a>Link.points</a> will not have been computed.
|
|
In fact, creating a new link may invalidate a <a>Layout</a>, so all of the nodes may be moved in the near future.
|
|
</p>
|
|
|
|
<p class="box bg-danger">
|
|
Sometimes you want to update a database as the user makes changes to a diagram.
|
|
Usually you will want to implement a <a>Model</a> <a>ChangedEvent</a> listener,
|
|
by calling <a>Model.addChangedListener</a> or <a>Diagram.addModelChangedListener</a>,
|
|
that notices the changes to the model and decides what to record in the database.
|
|
See the discussion of <a href="changedEvents.html">Changed Events</a> and the <a href="../samples/UpdateDemo.html">Update Demo</a>.
|
|
</p>
|
|
|
|
<p>
|
|
This example demonstrates handling several diagram events: <b>"ObjectSingleClicked"</b>,
|
|
<b>"BackgroundDoubleClicked"</b>, and <b>"ClipboardPasted"</b>.
|
|
</p>
|
|
<pre class="lang-js" id="diagramEvents">
|
|
function showMessage(s) {
|
|
document.getElementById("diagramEventsMsg").textContent = s;
|
|
}
|
|
|
|
diagram.addDiagramListener("ObjectSingleClicked",
|
|
function(e) {
|
|
var part = e.subject.part;
|
|
if (!(part instanceof go.Link)) showMessage("Clicked on " + part.data.key);
|
|
});
|
|
|
|
diagram.addDiagramListener("BackgroundDoubleClicked",
|
|
function(e) { showMessage("Double-clicked at " + e.diagram.lastInput.documentPoint); });
|
|
|
|
diagram.addDiagramListener("ClipboardPasted",
|
|
function(e) { showMessage("Pasted " + e.diagram.selection.count + " parts"); });
|
|
|
|
var nodeDataArray = [
|
|
{ key: "Alpha" },
|
|
{ key: "Beta", group: "Omega" },
|
|
{ key: "Gamma", group: "Omega" },
|
|
{ key: "Omega", isGroup: true },
|
|
{ key: "Delta" }
|
|
];
|
|
var linkDataArray = [
|
|
{ from: "Alpha", to: "Beta" }, // from outside the Group to inside it
|
|
{ from: "Beta", to: "Gamma" }, // this link is a member of the Group
|
|
{ from: "Omega", to: "Delta" } // from the Group to a Node
|
|
];
|
|
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
|
|
</pre>
|
|
<script>goCode("diagramEvents", 600, 200)</script>
|
|
<span id="diagramEventsMsg" style="color: red">(message)</span>
|
|
|
|
|
|
<h2 id="InputEvents">Input Events</h2>
|
|
<p>
|
|
When a low-level HTML DOM event occurs, <b>GoJS</b> canonicalizes the keyboard/mouse/touch event information
|
|
into a new <a>InputEvent</a> that can be passed to various event-handling methods and saved for later examination.
|
|
</p>
|
|
<p>
|
|
An InputEvent keeps the <a>InputEvent.key</a> for keyboard events,
|
|
the <a>InputEvent.button</a> for mouse events,
|
|
the <a>InputEvent.viewPoint</a> for mouse and touch events,
|
|
and <a>InputEvent.modifiers</a> for keyboard and mouse events.
|
|
</p>
|
|
<p>
|
|
The diagram's event handlers also record the <a>InputEvent.documentPoint</a>,
|
|
which is the <a>InputEvent.viewPoint</a> in document coordinates at the time of the mouse event,
|
|
and the <a>InputEvent.timestamp</a>, which records the time that the event occurred in milliseconds.
|
|
</p>
|
|
<p>
|
|
The InputEvent class also provides many handy properties for particular kinds of events.
|
|
Examples include <a>InputEvent.control</a> (if the control key had been pressed) and
|
|
<a>InputEvent.left</a> (if the left/primary mouse button was pressed).
|
|
</p>
|
|
<p>
|
|
Some tools find the "current" <a>GraphObject</a> at the mouse point.
|
|
This is remembered as the <a>InputEvent.targetObject</a>.
|
|
</p>
|
|
|
|
<h2 id="HigherLevelInputEvents">Higher-level input events</h2>
|
|
<p>
|
|
Some tools detect a sequence of input events to compose somewhat more abstract user events.
|
|
Examples include "click" (mouse-down-and-up very close to each other) and "hover" (motionless mouse for some time).
|
|
The tools will call an event handler (if there is any) for the current <a>GraphObject</a> at the mouse point.
|
|
The event handler is held as the value of a property on the object.
|
|
It then also "bubbles" the event up the chain of <a>GraphObject.panel</a>s until it ends with a <a>Part</a>.
|
|
This allows a "click" event handler to be declared on a <a>Panel</a> and have it apply even if the click actually happens on an element deep inside the panel.
|
|
If there is no object at the mouse point, the event occurs on the diagram.
|
|
</p>
|
|
<p>
|
|
Click-like event properties include <a>GraphObject.click</a>, <a>GraphObject.doubleClick</a>, and <a>GraphObject.contextClick</a>.
|
|
They also occur when there is no GraphObject -- the event happened in the diagram's background:
|
|
<a>Diagram.click</a>, <a>Diagram.doubleClick</a>, and <a>Diagram.contextClick</a>.
|
|
These are all properties that you can set to a function that is the event handler.
|
|
These events are caused by both mouse events and touch events.
|
|
</p>
|
|
<p>
|
|
Mouse-over-like event properties include <a>GraphObject.mouseEnter</a>, <a>GraphObject.mouseOver</a>, and <a>GraphObject.mouseLeave</a>.
|
|
But only <a>Diagram.mouseOver</a> applies to the diagram.
|
|
</p>
|
|
<p>
|
|
Hover-like event properties include <a>GraphObject.mouseHover</a> and <a>GraphObject.mouseHold</a>.
|
|
The equivalent diagram properties are <a>Diagram.mouseHover</a> and <a>Diagram.mouseHold</a>.
|
|
</p>
|
|
<p>
|
|
There are also event properties for dragging operations: <a>GraphObject.mouseDragEnter</a>, <a>GraphObject.mouseDragLeave</a>, and <a>GraphObject.mouseDrop</a>.
|
|
These apply to stationary objects, not the objects being dragged.
|
|
And they also occur when dragging by touch events, not just mouse events.
|
|
</p>
|
|
|
|
<p>
|
|
This example demonstrates handling three higher-level input events:
|
|
clicking on nodes and entering/leaving groups.
|
|
</p>
|
|
<pre class="lang-js" id="inputEvents">
|
|
function showMessage(s) {
|
|
document.getElementById("inputEventsMsg").textContent = s;
|
|
}
|
|
|
|
diagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
$(go.Shape, "Ellipse", { fill: "white" }),
|
|
$(go.TextBlock,
|
|
new go.Binding("text", "key")),
|
|
{ click: function(e, obj) { showMessage("Clicked on " + obj.part.data.key); } }
|
|
);
|
|
|
|
diagram.groupTemplate =
|
|
$(go.Group, "Vertical",
|
|
$(go.TextBlock,
|
|
{ alignment: go.Spot.Left, font: "Bold 12pt Sans-Serif" },
|
|
new go.Binding("text", "key")),
|
|
$(go.Panel, "Auto",
|
|
$(go.Shape, "RoundedRectangle",
|
|
{ name: "SHAPE",
|
|
parameter1: 14,
|
|
fill: "rgba(128,128,128,0.33)" }),
|
|
$(go.Placeholder, { padding: 5 })
|
|
),
|
|
{ mouseEnter: function(e, obj, prev) { // change group's background brush
|
|
var shape = obj.part.findObject("SHAPE");
|
|
if (shape) shape.fill = "red";
|
|
},
|
|
mouseLeave: function(e, obj, next) { // restore to original brush
|
|
var shape = obj.part.findObject("SHAPE");
|
|
if (shape) shape.fill = "rgba(128,128,128,0.33)";
|
|
} });
|
|
|
|
var nodeDataArray = [
|
|
{ key: "Alpha" },
|
|
{ key: "Beta", group: "Omega" },
|
|
{ key: "Gamma", group: "Omega" },
|
|
{ key: "Omega", isGroup: true },
|
|
{ key: "Delta" }
|
|
];
|
|
var linkDataArray = [
|
|
{ from: "Alpha", to: "Beta" }, // from outside the Group to inside it
|
|
{ from: "Beta", to: "Gamma" }, // this link is a member of the Group
|
|
{ from: "Omega", to: "Delta" } // from the Group to a Node
|
|
];
|
|
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
|
|
</pre>
|
|
<script>goCode("inputEvents", 600, 200)</script>
|
|
<span id="inputEventsMsg" style="color: red">(message)</span>
|
|
|
|
|
|
<h2 id="ClickingAndSelecting">Clicking and Selecting</h2>
|
|
<p>
|
|
This example demonstrates both the "click" and the "selectionChanged" events:
|
|
</p>
|
|
<pre class="lang-js" id="changeMethods">
|
|
function showMessage(s) {
|
|
document.getElementById("changeMethodsMsg").textContent = s;
|
|
}
|
|
|
|
diagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
{ selectionAdorned: false },
|
|
$(go.Shape, "Ellipse", { fill: "white" }),
|
|
$(go.TextBlock,
|
|
new go.Binding("text", "key")),
|
|
{
|
|
click: function(e, obj) { showMessage("Clicked on " + obj.part.data.key); },
|
|
selectionChanged: function(part) {
|
|
var shape = part.elt(0);
|
|
shape.fill = part.isSelected ? "red" : "white";
|
|
}
|
|
}
|
|
);
|
|
|
|
var nodeDataArray = [
|
|
{ key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }
|
|
];
|
|
var linkDataArray = [
|
|
{ from: "Alpha", to: "Beta" },
|
|
{ from: "Beta", to: "Gamma" }
|
|
];
|
|
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
|
|
</pre>
|
|
<script>goCode("changeMethods", 600, 200)</script>
|
|
<span id="changeMethodsMsg" style="color: red">(message)</span>
|
|
<p>
|
|
Try Ctrl-A to select everything.
|
|
Note the distinction between the <a>GraphObject.click</a> event property and the <a>Part.selectionChanged</a> event property.
|
|
Both are methods that get called when something has happened to the node.
|
|
The <a>GraphObject.click</a> occurs when the user clicks on the node, which happens to select the node.
|
|
But the <a>Part.selectionChanged</a> occurs even when there is no click event or even any mouse event --
|
|
it was due to a property change to the node.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|