Javascript API
interfaces
Arrow

Interface: Arrow

View is a base class for all other visual components. All View-derived components have the following properties, methods, and events in addition to their own.

Hierarchy

Properties

Draggable

Optional Draggable: DraggableEffect

Inherited from

View.Draggable


Follow

Optional Follow: FollowEffect

Inherited from

View.Follow


Glow

Optional Glow: GlowEffect

Inherited from

View.Glow


LookAt

Optional LookAt: LookAtEffect

Inherited from

View.LookAt


Physics

Optional Physics: PhysicsEffect

Inherited from

View.Physics


Shadow

Optional Shadow: ShadowEffect

Inherited from

View.Shadow


Transform

Optional Transform: TransformEffect

Inherited from

View.Transform


arrowHeight

arrowHeight: number

Arrow height

Default

'square'

arrowWidth

arrowWidth: number

Arrow width

Default

6

backgroundColor

backgroundColor: undefined | string

The background color of the component.

Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)). An undefined background color is transparent.

Example

// Set the background color of the view to a translucent red.
view.backgroundColor = 'rgba(255, 0, 0, 50%)'

Inherited from

View.backgroundColor


color

color: undefined | string

The foreground or text color of the component.

Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)). An undefined foreground color is inherited from one of the component's ancestors.

Example

// Set the foreground color of the view to red.
view.color = 'red';

Inherited from

View.color


componentType

Readonly componentType: string

The component's type. E.g. "View", "Text", "Button", "Page", etc.

Inherited from

View.componentType


dashArray

dashArray: string

Stroke dash array. A list of comma and/or white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. Read more (opens in a new tab)


endArrow

endArrow: boolean

Is there an end arrow?

Default

true

height

height: number

The height of the component.

Inherited from

View.height


id

Readonly id: number

Every Component is assigned a unique numerical id that cannot be changed. Components can be looked up by id using the get function.

Inherited from

View.id


name

name: undefined | string

Every Component can have a user-assigned name. It can be anything and is not guaranteed to be unique. Components can be looked up by name using the get function.

Inherited from

View.name


opacity

opacity: number

The component's opacity, or level of transparency.

1 is fully opaque (not transparent at all), 0.5 is 50% see-through, and 0 is completely transparent.

Inherited from

View.opacity


page

Readonly page: undefined | Page

The Page that this component is a child of, if any.

Inherited from

View.page


parent

Readonly parent: undefined | View

When added to a Container (or a Page, which is a Container), the Container is assigned to the parent property.

Inherited from

View.parent


rotation

rotation: number

The component's rotation, in degrees.

Inherited from

View.rotation


scale

scale: number

The component's scale multiplier.

Inherited from

View.scale


startArrow

startArrow: boolean

Is there a start arrow?

Default

true

strokeWidth

strokeWidth: number

Stroke width.

Default

5

style

style: Partial (opens in a new tab)<CSSStyleDeclaration (opens in a new tab)>

Low-level access to the component's CSS property.

Inherited from

View.style


tabIndex

tabIndex: undefined | number

Control if or how the component is focused when the tab key is pressed.

0 - The component should be focusable in sequential keyboard navigation, after any positive tabIndex values. a positive value - Should be focusable in sequential keyboard navigation, with the order defined by the value. -1 - Should not be focusable in sequential keyboard navigation, but could be focused programmatically. undefined - the browser decides whether the component is focusable.

Default

undefined

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex (opens in a new tab)

Inherited from

View.tabIndex


visible

visible: boolean

The component's visibility.

true is visible, false is invisible

Inherited from

View.visible


width

width: number

The width of the component.

Inherited from

View.width


x

x: number

The component's x coordinate.

Inherited from

View.x


y

y: number

The component's y coordinate.

Inherited from

View.y

Methods

addEffect

addEffect(effect): void

Add an effect to the component.

Parameters

NameType
effectstring

Returns

void

Inherited from

View.addEffect


clone

clone(): Arrow

Create an exact duplicate of a component.

The clone must be added to a container with appendChild to be visible.

Returns

Arrow

Example

const clone = view.clone();
clone.x = 100;
clone.y = 100;
view.page.appendChild(clone);

Overrides

View.clone


focus

focus(options?): void

Parameters

NameType
options?FocusOptions

Returns

void

Inherited from

View.focus


hasPointerCapture

hasPointerCapture(pointerId): boolean

Parameters

NameType
pointerIdnumber

Returns

boolean

Inherited from

View.hasPointerCapture


localPointFromClient

localPointFromClient(x, y): Object

Convert a client viewport position to a position suitable for a View. Useful for converting mouse or touch positions.

Parameters

NameTypeDescription
xnumberThe x position in the client viewport.
ynumberThe y position in the client viewport.

Returns

Object

an object with x and y properties.

NameType
xnumber
ynumber

Example

let dragging = false;
let pointerOffset;
this.on("pointerdown", (event) => {
  this.setPointerCapture(event.pointerId);
  // note: objects are positioned within their parent's coordinate system
  const point = this.parent.localPointFromClient(event.clientX, event.clientY)
  pointerOffset = { x: point.x - this.x, y: point.y - this.y };
  dragging = true;
});
 
this.on("pointermove", (ev) => {
if (!dragging)
    return;
  // note: objects are positioned within their parent's coordinate system
  const point = this.parent.localPointFromClient(ev.clientX, ev.clientY);
  this.x = point.x - pointerOffset.x;
  this.y = point.y - pointerOffset.y;
});
 
this.on("pointerup", (event) => {
  this.releasePointerCapture(event.pointerId);
  dragging = false;
});

Inherited from

View.localPointFromClient


on

on<K>(type, listener, options?): () => void

Add an event listener to the component.

Type parameters

NameType
Kextends keyof EventHandlersEventMap

Parameters

NameType
typeK
listener(event: EventHandlersEventMap[K]) => any
options?EventListenerOptions

Returns

fn

Returns a function that removes the event listener.

▸ (): void

Add an event listener to the component.

Returns

void

Returns a function that removes the event listener.

Inherited from

View.on


releasePointerCapture

releasePointerCapture(pointerId): void

Parameters

NameType
pointerIdnumber

Returns

void

Inherited from

View.releasePointerCapture


remove

remove(): void

Remove the component from its parent.

Returns

void

Example

view.remove();

Inherited from

View.remove


removeEffect

removeEffect(effect): void

Remove an effect to the component.

Parameters

NameType
effectstring

Returns

void

Inherited from

View.removeEffect


setPointerCapture

setPointerCapture(pointerId): void

Parameters

NameType
pointerIdnumber

Returns

void

Inherited from

View.setPointerCapture