Skip to main content

Controls

This component provides a set of controls for a surface - such operations as zoom to extents, undo/redo, clear, etc. The operations that are available can be specified on the controls element, and you can also add your own buttons.

Usage​

You need to declare an element to host the controls component:

<!doctype html>
<html>
  <head>
	<link rel="stylesheet" href="node_modules/@visuallyjs/browser-ui/css/visuallyjs.css">
  </head>
  <body>
    <div id="myContainer">
        <div id="controls"></div>
    </div>
  </body>
</html>
import {createSurface, ControlsComponent} from "@visuallyjs/browser-ui"

const renderOptions = {
   view: {
     nodes: {
       default: {
         template: `<div>{{id}}</div>`
       }
     }
  }
}

const data = {
    nodes: [
        {id: "1", left: 50, top: 50}
    ]
}

const surface = createSurface(document.getElementById("myContainer"), renderOptions)
new ControlsComponent(document.getElementById("controls"), surface, {... })

Class Definition​

ControlsComponent

Simple component offering management of pan/zoom, lasso, undo/redo, and a few other features.

constructor ControlsComponent(container:BrowserElement, ui:BrowserUI, options:ControlsComponentOptions)

Constructor Options​

ControlsComponentOptions
Options for the controls component.
NameTypeDescription
buttons?ControlsComponentButtonsOptional extra buttons to add to the controls component.
clear?booleanWhether or not to show the clear button, defaults to true.
clearMessage?stringOptional message to show the user when prompting them to confirm they want to clear the dataset
orientation?"row" | "column"Optional orientation for the controls. Defaults to 'row'.
undoRedo?booleanWhether or not to show undo/redo buttons, defaults to true
zoom?booleanWhether or not to show zoom in/zoom out buttons. Defaults to false when the UI's zoom method is "wheel", and defaults to true when the UI's zoom method is "click".
zoomToExtents?booleanWhether or not to show the zoom to extents button, defaults to true