Skip to main content

SurfaceComponent

Provides a component that manages a Surface. You can configure three sets of options on this component:

  1. renderOptions - these are options that control the behaviour of the surface canvas
  2. viewOptions - these are mappings of node/group types to behaviour and components, and edge types to behaviour
  3. modelOptions - Options that govern how the underlying data model operates. If you don't provide these, the Surface component uses defaults (which is fine for the majority of applications)
@Component({
  selector:"app-my-canvas",
  template:`<vjs-surface [renderOptions]="renderOptions"
  [viewOptions]="viewOptions"
  [modelOptions]="modelOptions"/>`
})
export class MyCanvas {

  renderOptions = { ... }
  viewOptions = { ... }
  modelOptions = { ... }
}

Type Parameters​

RO​

RO extends AngularRenderOptions = AngularRenderOptions

Implements​

  • AfterViewInit
  • OnDestroy

Methods​

exportData()​

exportData(options): SurfaceSaveData

Export the dataset only

Parameters​

options​

ExportOptions

Returns​

SurfaceSaveData

Class Member​

save()​

save(options): void

Save the dataset and the surface's current pan/zoom, as well as any inspector context, via POST to a URL.

Parameters​

options​

SaveOptions

Options for the save operation

Returns​

void

Class Member​

Properties​

data​

data: InputSignal<Record<string, any>>

Optional data to load after the view has been initialised. This input is a signal, and will reload the dataset if changed.

Input​

dataType?​

optional dataType: string

ID of the format that data or the data retrieved from url is expected to be in. Defaults to JSON_DATATYPE.

Input​

inputModel?​

optional inputModel: BrowserUIModel

Optional preconfigured model to use for this Surface. You don't normally need to provide this; the component will create a model from the options you pass in (or with blank options by default) otherwise.

model​

model: BrowserUIModel

The underlying model.

Class Member​

modelOptions?​

optional modelOptions: ModelOptions

Optional parameters for the underlying model instance. These will be used only if the model instance with the given ID has not yet been created somewhere else in the app.

Input​

renderOptions?​

optional renderOptions: AngularRenderOptions

Options for the underlying surface widget.

Input​

surface​

surface: Surface

The Surface from the UI core package that this component manages.

Class Member​

url​

url: InputSignal<string>

Optional url from which to load data after the view has been initialised. This input is a signal, and will reload the dataset if changed.

Input​

vertexEvent​

vertexEvent: EventEmitter<{ component: ComponentRef<any>; event: string; payload: any; vertex: Vertex; }>

Output event emitter, for proxying events from vertex components.

Output​

viewOptions?​

optional viewOptions: AngularViewOptions

Options for the view - mappings of components and behaviour to model object types.

Input​