From e22381e37d9c737e4420af5b9f32f77a3a0639de Mon Sep 17 00:00:00 2001
From: David Evans
code
: Alternative way of specifying code, instead of using a separate argument.container
: DOM node to append the diagram to (defaults to null).themes
: List of themes to make available to the diagram (defaults to globally registered themes).namespace
: Each diagram on a page must have a unique namespace. By default a unique namespace is generated, but if you want something specific, enter it here.code
: Alternative way of specifying code, instead of using a
+separate argument.container
: DOM node to append the diagram to (defaults to
+null).themes
: List of themes to make available to the diagram
+(defaults to globally registered themes).namespace
: Each diagram on a page must have a unique namespace.
+By default a unique namespace is generated, but if you want something specific,
+enter it here.interactive
: If true
, will automatically call
+addInteractivity
when constructing the diagram.+ begin A, B + if bored + A -> +B + -B --> A + end + if still bored + A -> +B + -B --> A + end ++
+diagram.addInteractivity(); ++ +
+Makes the rendered diagram interactive. Currently this means adding a click +listener to any groups which causes them to collapse / expand. Try clicking on +the example to the right. +
+ +The example here has CSS styling applied:
+ ++.region.collapsed, +.region.expanded { + cursor: pointer; + user-select: none; +} + +.region.collapsed:hover .outline, +.region.expanded:hover .outline { + fill: rgba(255, 128, 0, 0.5); +} ++ +
It is also possible to enable interactivity using a HTML attribute:
+ ++<pre class="sequence-diagram" data-sd-interactive> + A -> +B + if something + -B --> A + end +</pre> ++
@@ -608,6 +667,87 @@ example: }+
+diagram.setCollapsed(line, collapsed, options); +diagram.setCollapsed(line, collapsed); ++ +
+Marks the given line as collapsed or non-collapsed. If an element defined at +that line can be collapsed, it will be modified during the next render. Returns +true if a change occurred, or false if the line already had the requested state. +
+line
can also be an array of lines.
+By default, calling this method will trigger an automatic render (unless called
+as a no-op). This can be disabled by passing {render: false}
in the
+options argument.
+
+collapsed = diagram.isCollapsed(line); ++ +
+Returns true if the given line is marked as collapsed, regardless of whether +that line being collapsed has a meaningful impact on the rendered document. +
+ ++diagram.collapse(line, options); +diagram.collapse(line); ++ +
+Shorthand for .setCollapsed(line, true, options)
.
+
+diagram.expand(line, options); +diagram.expand(line); ++ +
+Shorthand for .setCollapsed(line, false, options)
.
+
+diagram.toggleCollapsed(line, options); +diagram.toggleCollapsed(line); ++ +
+Toggles the given line’s collapsed status by calling
+.setCollapsed
.
+
+diagram.expandAll(options); +diagram.expandAll(); ++ +
+Marks all lines as non-collapsed. Returns true if a change occurred, or false +if all lines were already non-collapsed. +
+
+By default, calling this method will trigger an automatic render (unless called
+as a no-op). This can be disabled by passing {render: false}
in the
+options argument.
+
@@ -623,9 +763,13 @@ Registers an event listener. The available events are: diagram.
click
: called when the user clicks on a region of the
diagram.dblclick
: called when the user double-clicks on a region of the
+diagram.render
: called when the diagram finishes rendering. Receives
+the sequence diagram object as an argument.mouseover
and click
are invoked with a single
-parameter: the element. This object contains:
All mouse events are invoked with a single parameter: the element. This +object contains:
ln
: the line number of the source code which defined the
element.