Options
All
  • Public
  • Public/Protected
  • All
Menu

This class exposes the high level functionality of our library. Elements can created and related together

By default input elements are added to a SVG "controls" group and visual elements are added to the "background" group. This ensures that controls will alwaysbe focusable, despite the order in which elements are created.

Hierarchy

  • SVG
    • Interactive

Implements

Index

Constructors

constructor

  • new Interactive(value: string | HTMLElement, options?: InteractiveOptions): Interactive
  • Constructs a new interactive object and appends it into the DOM. If the provided argument is an HTMLElement appends the interactive within that element. If the provided a value is a string, appends the interactive within the HTML element with the corresponding ID. If no element is found throws an error.

    Parameters

    • value: string | HTMLElement
    • Default value options: InteractiveOptions = {}

    Returns Interactive

Properties

background

background: Group

The background is where everything that is not a primary control is drawn.

classList

classList: DOMTokenList

Class attribute for the root element.

container

container: HTMLElement

The container element for this interactive.

input

input: Group

The input groups sits on top of the background group and ensures that input elements will always visually appear above background elements.

root

root: SVGSVGElement

style

style: CSSStyleDeclaration

Style for the root element.

update

update: function

The update function describes how this element should update itself

Type declaration

    • (): void
    • Returns void

Static controller

controller: Controller = new Controller()

The controller manages the dependencies between elements. Every element is added to this controller upon creation.

Static count

count: number = 0

This number uniquely identifes elements

Static disable

disable: boolean = false

Allows for the events attatched to elements to be disabled.

Accessors

border

border:

If set to true, draws a minimal border around the interactive.

height

height:

Sets the height of this interactive area. Returns the height of this interactive area.

id

id:

Returns the unique generated identifier associated with this element.

maxX

maxX:

Returns the maximum x-coordinate of this interactive.

maxY

maxY:

Returns the maximum y-coordinate of this interactive.

minX

minX:

Returns the minimum x-coordinate of this interactive.

minY

minY:

Returns the minimum y-coordinate of this interactive.

originX

originX:

Sets the x coordinate of the origin. Returns the value of the x-coordinate of the origin.

originY

originY:

Sets the y coordinate of the origin. Returns the value of the x-coordinate of the origin.

viewBox

viewBox:

width

width:

Sets the width of this interactive area. Returns the width of this interactive area.

window

window:

If set to true, styles the interactive to float on top of the background. This feature is good for interactives where elements can be dragged out of the bounds of the container element.

x

x:

y

y:

Methods

a

  • a(href: string): A
  • Constructs and appends an 'a' (link) element within this element.

    Parameters

    • href: string

    Returns A

addDependency

appendChild

  • appendChild<T>(child: T): T
  • Appends the element within the interactive. If the element is an "input" element, places the element in the input group so that visually the element is always placed above other graphical elements.

    Type parameters

    Parameters

    • child: T

    Returns T

button

  • button(x: number, y: number, label: string): Button
  • Creates a checkbox input at the position (x,y) within this interactive.

    Parameters

    • x: number
    • y: number
    • label: string

    Returns Button

checkBox

  • checkBox(x: number, y: number, label: string, value: boolean): CheckBox
  • Creates a checkbox input at the position (x,y) within this interactive.

    Parameters

    • x: number
    • y: number
    • label: string
    • value: boolean

    Returns CheckBox

circle

  • circle(cx: number, cy: number, r: number): Circle
  • Parameters

    • cx: number
    • cy: number
    • r: number

    Returns Circle

clear

  • clear(): void
  • Removes all child elements from this element.

    Returns void

clipPath

  • Constructs and appends a 'clipPath' element within this element.

    Returns ClipPath

contains

  • contains(element: Element): boolean
  • Returns true if this element contains the argument element.

    Parameters

    Returns boolean

control

  • control(x: number, y: number): Control
  • Creates a control point within this interactive at the position (x,y).

    Parameters

    • x: number
    • y: number

    Returns Control

controlCircle

  • controlCircle(x: number, y: number): Control
  • Creates a control point within this interactive at the position (x,y).

    Parameters

    • x: number
    • y: number

    Returns Control

defs

  • defs(): Defs
  • Returns Defs

description

dropdownControl

  • dropdownControl(x: number, y: number, optionLabels: string[], defaultIndex: number): DropdownControl
  • Creates a dropdown input at the position (x,y) within this interactive.

    Parameters

    • x: number
    • y: number
    • optionLabels: string[]
    • defaultIndex: number

    Returns DropdownControl

edge

  • edge(nodeFrom: Node, nodeTo: Node, directed: boolean): Edge
  • Creates an edge connecting two nodes within this interactive.

    Parameters

    • nodeFrom: Node
    • nodeTo: Node
    • directed: boolean

    Returns Edge

ellipse

  • ellipse(cx: number, cy: number, rx: number, ry: number): Ellipse
  • Parameters

    • cx: number
    • cy: number
    • rx: number
    • ry: number

    Returns Ellipse

getAttribute

getBoundingBox

  • getBoundingBox(): SVGRect
  • Returns the bounding box of this element. Note, this is different from the getBoundingClientRect method since the bounding box is affected by the current viewPort.

    If this element's root is not a SVGGraphics element as is the case for the marker, title, and more element, then null is returned instead of a DOMRect.

    Returns SVGRect

graph

  • Creates a graph element within this interactive

    Parameters

    Returns Graph

group

hoverBox

  • Parameters

    • str: string

    Returns HoverBox

icon

  • icon(x: number, y: number, width: number, height: number, name: string, options?: object): Icon
  • Creates an icon at the position (x,y) with the provided dimensions.

    Parameters

    • x: number
    • y: number
    • width: number
    • height: number
    • name: string
    • Default value options: object = {}

    Returns Icon

interactive

  • interactive(x: number, y: number, options?: InteractiveOptions): Interactive
  • Creates a nested interactive within this interactive

    Parameters

    • x: number
    • y: number
    • Default value options: InteractiveOptions = {}

    Returns Interactive

line

  • line(x1: number, y1: number, x2: number, y2: number): Line
  • Parameters

    • x1: number
    • y1: number
    • x2: number
    • y2: number

    Returns Line

loadSVG

  • loadSVG(url: string): Promise<Group>
  • Parameters

    • url: string

    Returns Promise<Group>

map

  • Creates a graph element within this interactive

    Parameters

    • externalData: GeoJSON
    • Default value featureName: string = null
    • Default value options: MapOptions = {}

    Returns Map

marker

  • marker(refX: number, refY: number, width: number, height: number): Marker
  • Constructs and appends a 'marker' element within this element.

    Parameters

    • refX: number
    • refY: number
    • width: number
    • height: number

    Returns Marker

metadata

node

  • node(x: number, y: number, rx: number, ry: number, contents: string): Node
  • Creates a node within this interactive.

    Parameters

    • x: number
    • y: number
    • rx: number
    • ry: number
    • contents: string

    Returns Node

path

  • path(d: string): Path
  • Parameters

    • d: string

    Returns Path

plot

  • Creates a plot within this interactive at the position (x,y).

    Parameters

    • fn: function
        • (x: number): number
        • Parameters

          • x: number

          Returns number

    • options: PlotOptions

    Returns Plot

polygon

  • Parameters

    • points: string

    Returns Polygon

prependChild

  • prependChild<T>(child: T): T

radioControl

  • radioControl(x: number, y: number, labels: string[], index?: number): RadioControl
  • Creates a checkbox input at the position (x,y) within this interactive.

    Parameters

    • x: number
    • y: number
    • labels: string[]
    • Default value index: number = 0

    Returns RadioControl

rectangle

  • rectangle(x: number, y: number, width: number, height: number): Rectangle
  • Parameters

    • x: number
    • y: number
    • width: number
    • height: number

    Returns Rectangle

remove

  • remove(): void

script

  • Constructs and appends a 'script' element within this element.

    Returns Script

scrubber

  • Creates a scrubber with a play and pause button at the position (x,y).

    Parameters

    Returns Scrubber

setAttribute

setViewBox

  • setViewBox(x: number, y: number, width: number, height: number): void
  • Parameters

    • x: number
    • y: number
    • width: number
    • height: number

    Returns void

slider

  • Creates a slider input within this interactive

    Parameters

    Returns Slider

svg

  • svg(x: number, y: number, width: number, height: number): SVG
  • Parameters

    • x: number
    • y: number
    • width: number
    • height: number

    Returns SVG

symbol

text

  • text(x: number, y: number, str: string): Text
  • Parameters

    • x: number
    • y: number
    • str: string

    Returns Text

title

updateDependents

  • updateDependents(): void

use

  • use(x: number, y: number, width: number, height: number): Use
  • Parameters

    • x: number
    • y: number
    • width: number
    • height: number

    Returns Use

Static SVG

  • SVG(idOrElement: string | HTMLElement, x?: number, y?: number, width?: number, height?: number): SVG
  • Constructs and returns a SVG object within the DOM. If the provided argument is an HTMLElement appends the interactive within that element. If the provided a value is a string, appends the interactive within the HTML element with the corresponding ID. If no element is found throws an error.

    Parameters

    • idOrElement: string | HTMLElement
    • Optional x: number
    • Optional y: number
    • Optional width: number
    • Optional height: number

    Returns SVG

Static clear

  • clear(disable?: boolean): void
  • Clears the static data structures holding elements and resets the count.

    Parameters

    • Default value disable: boolean = false

    Returns void

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc