Scrollable Lists

The ListManagerPlugin is used to manage lists within groups in VisuallyJS, and is great for applications such as data mappers. It handles the visibility and connection management of nodes within a scrollable list, ensuring that connections remain visible or are hidden appropriately as list items are scrolled out of view. In this canvas, try scrolling the groups - you'll see the edges scroll with their vertices, until one or both of the vertices is scrolled out of the view, at which point the edge is proxied onto the group element.

Configuration

To tell VisuallyJS to configure a list, you must add the data-vjs-list="true" attribute to the element you wish to act as the list container.

Groups and CSS

It is important to note that the setup must be a Group, not a node. CSS plays a critical part in the correct functioning of a list:

1. The Group must have an element with the data-vjs-group-content attribute.
2. This content element must have a max-size and overflow: auto. (Without the max-size the list will just be drawn as big as it needs to be)

.my-list-container {
    max-height: 200px;
    overflow: auto;
}

Setup

Configuration is in two parts.

Register the plugin

Firstly, you need to register the plugin in your render options:

import { SurfaceComponent } from "@visuallyjs/browser-ui-react"

import { ListManagerPlugin } from "@visuallyjs/browser-ui"

export default function MyComponent() {

  const renderOptions = {
  plugins: [
    ListManagerPlugin.type
  ]
}
  return <SurfaceComponent renderOptions={renderOptions}/>
}

Configure UI

How you configure

Behaviors

The ListManagerPlugin supports two main behaviors when a node is scrolled out of view:

Proxy (Default)

The default behavior is "proxy". When an item is scrolled out of view, any edges connected to it are "proxied" to the edge of the list container. This keeps the connection visible and indicates that it is connected to something currently off-screen within the list.

Hide

In the "hide" behavior, edges connected to an item are simply hidden when that item is scrolled out of view.

You can configure the behavior globally in the plugin options:

plugins:[
    {
        type:ListManagerPlugin.type,
        options: {
            behavior: "hide"
        }
    }
]

Or you can override it on a per-list basis using the data-vjs-list-behavior attribute:

<div data-vjs-list="true" data-vjs-list-behavior="hide">
    ...
</div>

Options

ListManagerPluginOptions

Options for the list manager plugin.

Name	Type	Description
behavior?	"hide" | "proxy"	Whether to proxy edges that are scrolled out of view, or to hide them. Possible values are "proxy" or "hide". Defaults to "proxy".