Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SVGSpace

A Space for SVG elements

Hierarchy

Index

Constructors

constructor

  • new SVGSpace(elem: string | Element, callback?: Function): SVGSpace
  • Create a SVGSpace which represents a Space for SVG elements

    example

    new SVGSpace( "#myElementID" )

    Parameters

    • elem: string | Element

      Specify an element by its "id" attribute as string, or by the element object itself. An element can be an existing <svg>, or a <div> container in which a new <svg> will be created. If left empty, a <div id="pt_container"><svg id="pt" /></div> will be added to DOM. Use css to customize its appearance if needed.

    • Optional callback: Function

      an optional callback function(boundingBox, spaceElement) to be called when canvas is appended and ready. Alternatively, a "ready" event will also be fired from the <svg> element when it's appended, which can be traced with spaceInstance.canvas.addEventListener("ready")

    Returns SVGSpace

Properties

Protected _autoResize

_autoResize: boolean = true

Protected _bgcolor

_bgcolor: string = "#999"

Protected _canvas

_canvas: HTMLElement | SVGElement

Protected _container

_container: Element

Protected _css

_css: object

Type declaration

Protected _ctx

_ctx: any

Protected _dragged

_dragged: boolean = false

Protected _hasMouse

_hasMouse: boolean = false

Protected _hasTouch

_hasTouch: boolean = false

Protected _isReady

_isReady: boolean = false

Protected _playing

_playing: boolean = false

Protected _pointer

_pointer: Pt = new Pt()

Protected _pressed

_pressed: boolean = false

Protected bound

bound: Bound = new Bound()

id

id: string = "svgspace"

Protected playerCount

playerCount: number = 0

Protected players

players: ISpacePlayers

Accessors

autoResize

  • get autoResize(): boolean
  • set autoResize(auto: boolean): void
  • Set whether the canvas element should resize when its container is resized.

    Returns boolean

  • Set whether the canvas element should resize when its container is resized.

    Parameters

    • auto: boolean

      a boolean value indicating if auto size is set

    Returns void

background

  • get background(): string
  • set background(bg: string): void
  • Set a background color on the container element

    Returns string

  • Set a background color on the container element

    Parameters

    • bg: string

      background color as hex or rgba string

    Returns void

center

  • get center(): Pt

customRendering

  • get customRendering(): function
  • set customRendering(f: function): void
  • Set a custom rendering function(graphics_context, canvas_space) if needed

    Returns function

      • (context: any, self: Space): null
      • Parameters

        • context: any
        • self: Space

        Returns null

  • Set a custom rendering function(graphics_context, canvas_space) if needed

    Parameters

    • f: function
        • (context: any, self: Space): null
        • Parameters

          • context: any
          • self: Space

          Returns null

    Returns void

element

  • get element(): Element

height

  • get height(): number

innerBound

  • get innerBound(): Bound

isPlaying

  • get isPlaying(): boolean
  • Get a boolean to indicate whether the animation is playing

    Returns boolean

outerBound

  • get outerBound(): Bound

parent

  • get parent(): Element
  • Get the parent DOM element that contains this DOM element

    Returns Element

pointer

  • get pointer(): Pt

ready

  • get ready(): boolean

size

  • get size(): Pt

width

  • get width(): number

Methods

Protected _mouseAction

  • _mouseAction(type: string, evt: MouseEvent | TouchEvent): void
  • Go through all the players and call its action callback function

    Parameters

    • type: string

      an UIPointerActions constant or string: "up", "down", "move", "drag", "drop", "over", and "out"

    • evt: MouseEvent | TouchEvent

      mouse or touch event

    Returns void

Protected _mouseDown

  • _mouseDown(evt: MouseEvent | TouchEvent): boolean

Protected _mouseMove

  • _mouseMove(evt: MouseEvent | TouchEvent): boolean

Protected _mouseOut

  • _mouseOut(evt: MouseEvent | TouchEvent): boolean

Protected _mouseOver

  • _mouseOver(evt: MouseEvent | TouchEvent): boolean

Protected _mouseUp

  • _mouseUp(evt: MouseEvent | TouchEvent): boolean

Protected _resizeHandler

  • _resizeHandler(evt: Event): void

Protected _touchMove

  • _touchMove(evt: TouchEvent): boolean

add

  • Add an IPlayer to this space. An IPlayer can define the following callback functions:

    • animate( time, ftime, space )
    • start(bound, space)
    • resize( size, event )
    • action( type, x, y, event ) Subclasses of Space may define other callback functions.

    Parameters

    Returns this

bindCanvas

  • bindCanvas(evt: string, callback: EventListener): void
  • Bind event listener in canvas element. You can also use bindMouse or bindTouch to bind mouse or touch events conveniently.

    Parameters

    • evt: string

      an event string such as "mousedown"

    • callback: EventListener

      callback function for this event

    Returns void

bindMouse

  • bindMouse(_bind?: boolean): this
  • A convenient method to bind (or unbind) all mouse events in canvas element. All "players" added to this space that implements an action callback property will receive mouse event callbacks. The types of mouse actions are defined by UIPointerActions constants: "up", "down", "move", "drag", "drop", "over", and "out". See Space's add() function for more details.

    see

    Space's [add`](./space.space.html#add) function

    Parameters

    • Default value _bind: boolean = true

      a boolean value to bind mouse events if set to true. If false, all mouse events will be unbound. Default is true.

    Returns this

bindTouch

  • bindTouch(_bind?: boolean): this
  • A convenient method to bind (or unbind) all touch events in canvas element. All "players" added to this space that implements an action callback property will receive mouse event callbacks. The types of mouse actions are: "up", "down", "move", "drag", "drop", "over", and "out".

    see

    Space's [add`](./space.space.html#add) function

    Parameters

    • Default value _bind: boolean = true

      a boolean value to bind touch events if set to true. If false, all mouse events will be unbound. Default is true.

    Returns this

clear

  • clear(bg?: string): this
  • Clear the element's contents, and ptionally set a new backgrounc color. Overrides Space's clear function.

    Parameters

    • Optional bg: string

      Optionally specify a custom background color in hex or rgba string, or "transparent". If not defined, it will use its bgcolor property as background color to clear the canvas.

    Returns this

getForm

pause

  • pause(toggle?: boolean): this
  • Pause the animation

    Parameters

    • Default value toggle: boolean = false

      a boolean value to set if this function call should be a toggle (between pause and resume)

    Returns this

play

  • play(time?: number): this
  • Main play loop. This implements window.requestAnimationFrame and calls it recursively. Override this play() function to implemenet your own animation loop.

    Parameters

    • Default value time: number = 0

      current time

    Returns this

Protected playItems

  • playItems(time: number): void
  • Main animate function. This calls all the items to perform

    Parameters

    • time: number

      current time

    Returns void

playOnce

  • playOnce(duration?: number): this
  • Play animation loop, and then stop after duration time has passed.

    Parameters

    • Default value duration: number = 5000

      a value in millisecond to specify a time period to play before stopping, or -1 to play forever

    Returns this

refresh

  • refresh(b: boolean): this
  • Set whether the rendering should be repainted on each frame

    Parameters

    • b: boolean

      a boolean value to set whether to repaint each frame

    Returns this

remove

removeAll

  • removeAll(): this

Protected render

  • render(context: any): this
  • Custom rendering

    Parameters

    • context: any

      rendering context

    Returns this

replay

  • replay(): void
  • Replay the animation after stop(). This resets the end-time counter. You may also use pause() and resume() for temporary pause.

    Returns void

resize

  • resize(b: Bound, evt?: Event): this
  • This overrides Space's resize function. It's used as a callback function for window's resize event and not usually called directly. You can keep track of resize events with resize: (bound ,evt) callback in your player objects (See Space's add() function).

    Parameters

    • b: Bound

      a Bound object to resize to

    • Optional evt: Event

      Optionally pass a resize event

    Returns this

resume

  • resume(): this

setup

  • setup(opt: object): this
  • Set up various options for DOMSpace. The opt parameter is an object with the following fields. This is usually set during instantiation, eg new DOMSpace(...).setup( { opt } )

    example

    space.setup({ bgcolor: "#f00", resize: true })

    Parameters

    • opt: object

      an object with optional settings, as follows.

      • Optional bgcolor?: string

        a hex or rgba string to set initial background color of the canvas, or use false or "transparent" to set a transparent background. You may also change it later with clear()

      • Optional resize?: boolean

        a boolean to set whether <canvas> size should auto resize to match its container's size. You can also set it manually with autoSize()

    Returns this

stop

  • stop(t?: number): this
  • Specify when the animation should stop: immediately, after a time period, or never stops.

    Parameters

    • Default value t: number = 0

      a value in millisecond to specify a time period to play before stopping, or -1 to play forever, or 0 to end immediately. Default is 0 which will stop the animation immediately.

    Returns this

style

  • style(key: string, val: string, update?: boolean): this
  • Add or update a style definition, and optionally update that style in the Element

    Parameters

    • key: string

      style name

    • val: string

      style value

    • Default value update: boolean = false

      a boolean to update the element's style immediately if set to true. Default is false.

    Returns this

styles

  • styles(styles: object, update?: boolean): this
  • Add of update a list of style definitions, and optionally update those styles in the Element

    Parameters

    • styles: object

      a key-value objects of style definitions

    • Default value update: boolean = false

      a boolean to update the element's style immediately if set to true. Default is false.

    Returns this

    this

touchesToPoints

  • A convenient method to convert the touch points in a touch event to an array of Pt.

    Parameters

    • evt: TouchEvent

      a touch event which contains touches, changedTouches, and targetTouches list

    • Default value which: TouchPointsKey = "touches"

      a string to select a touches list: "touches", "changedTouches", or "targetTouches". Default is "touches"

    Returns Pt[]

    an array of Pt, whose origin position (0,0) is offset to the top-left of this space

unbindCanvas

  • unbindCanvas(evt: string, callback: EventListener): void
  • Unbind a callback from the event listener

    Parameters

    • evt: string

      an event string such as "mousedown"

    • callback: EventListener

      callback function to unbind

    Returns void

Static createElement

  • createElement(elem?: string, id: string, appendTo?: Element): Element
  • Helper function to create a DOM element

    Parameters

    • Default value elem: string = "div"

      element tag name

    • id: string

      element id attribute

    • Optional appendTo: Element

      Optional, if specified, the created element will be appended to this element

    Returns Element

Static getInlineStyles

  • getInlineStyles(data: object): string
  • A static helper function to compose an inline style string from a object of styles

    exmaple

    DOMSpace.getInlineStyles( {width: "100px", "font-size": "10px"} ); // returns "width: 100px; font-size: 10px"

    Parameters

    • data: object

      an object with key-value pairs

    Returns string

Static setAttr

  • setAttr(elem: Element, data: object): Element
  • A static helper function to add or update Element attributes

    Parameters

    • elem: Element

      Element to update

    • data: object

      an object with key-value pairs

    Returns Element

    this DOM element

Static svgElement

  • svgElement(parent: Element, name: string, id?: string): SVGElement
  • A static function to add a svg element inside a node. Usually you don't need to use this directly. See methods in SVGForm instead.

    Parameters

    • parent: Element

      the parent element, or null to use current <svg> as parent.

    • name: string

      a string of element name, such as rect or circle

    • Optional id: string

      id attribute of the new element

    Returns SVGElement

Object literals

Protected _time

_time: object

diff

diff: number = 0

end

end: number = -1

prev

prev: number = 0

Generated using TypeDoc