Skip to content

Commit 89b7903

Browse files
committed
Add ScrollableGroups
1 parent 49f4459 commit 89b7903

File tree

1 file changed

+51
-0
lines changed

1 file changed

+51
-0
lines changed

reference/scenegraph.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ function myCommand(selection) {
6363
* [Group](#Group)
6464
* [SymbolInstance](#SymbolInstance)
6565
* [RepeatGrid](#RepeatGrid)
66+
* [ScrollableGroup](#ScrollableGroup)
6667
* [LinkedGraphic](#LinkedGraphic)
6768
* [RootNode](#RootNode)
6869

@@ -2195,6 +2196,56 @@ You can call this API from either of _two different edit contexts_:
21952196

21962197
* * *
21972198

2199+
<a name="ScrollableGroup"></a>
2200+
2201+
## ScrollableGroup
2202+
**Since:** XD 30
2203+
**Kind**: class
2204+
**Extends**: [<code>SceneNode</code>](#SceneNode)
2205+
2206+
ScrollableGroup nodes are content that users can interactively scroll around. Content is viewed through a {@link viewport},
2207+
with everything else clipped. If a ScrollableGroup is set to only scroll on one axis, on the other axis the viewport is
2208+
automatically sized to exactly fit the bounds of the content so nothing is clipped.
2209+
2210+
The scroll distance range is defined by a _scrollable area_ rectangle which is the union of the viewport and the bounds of all
2211+
the content. This can include some blank space, if the content is initially positioned not filling the entire viewport.
2212+
2213+
* [ScrollableGroup](#ScrollableGroup)
2214+
* [.scrollingType](#ScrollableGroup-scrollingType) : <code>string</code>
2215+
* [.viewport](#ScrollableGroup-viewport) : <code>{! {viewportWidth: number, offsetX: number} | {viewportHeight: number, offsetY: number} |
2216+
{viewportWidth: number, offsetX: number, viewportHeight: number, offsetY: number} }</code>
2217+
2218+
* * *
2219+
2220+
<a name="ScrollableGroup-scrollingType"></a>
2221+
2222+
### repeatGrid.scrollingType : <code>string</code>
2223+
The type of scrolling: one of ScrollableGroup.VERTICAL, HORIZONTAL and PANNING.
2224+
PANNING enables scrolling on both axes.
2225+
2226+
**Kind**: instance property of [<code>ScrollableGroup</code>](#ScrollableGroup)
2227+
2228+
* * *
2229+
2230+
<a name="ScrollableGroup-viewport"></a>
2231+
2232+
### ScrollableGroup.viewport : <code>string</code>
2233+
The viewport is a rectangle whose bounds are defined explicitly on scrolling axes and fit automatically to the
2234+
content on non-scrolling axes:
2235+
* On a scrolling axis, the bounds are specified in {@link core/coordinate-spaces-and-units.md local coordinates}
2236+
using the `viewport` values specified here.
2237+
* On a non-scrolling axis, the bounds are automatically calculated to exactly fit the content (just like the blue
2238+
selection rectangle seen when you select a plain Group).
2239+
2240+
For example, if scrollingType == VERTICAL, the top of the viewport is `viewport.offsetY` in the ScrollableGroup's
2241+
local coordinates, the bottom of the viewport is `viewport.offsetY + viewport.viewportHeight` in local coordinates,
2242+
and horizontally there is no viewport clipping -- the entire current {@link localBounds} range is visible. The
2243+
`viewport` object will only contain `offsetY` and `viewportHeight` properties in this case.
2244+
2245+
**Kind**: instance property of [<code>ScrollableGroup</code>](#ScrollableGroup)
2246+
2247+
* * *
2248+
21982249
<a name="LinkedGraphic"></a>
21992250

22002251
## LinkedGraphic

0 commit comments

Comments
 (0)