Show:

CGSGSceneGraph Class

Extends Object
Defined in: src\class.scenegraph.js:26
Module: Scene

Represent the scene graph it self. It encapsulates the root node and list of timelines for animations

Constructor

CGSGSceneGraph
(
  • canvas
  • context
)

Defined in src\class.scenegraph.js:26

Parameters:
  • canvas HTMLElement

    a handler to the canvas HTML element

  • context CanvasRenderingContext2D

    context to render on

Methods

addAnimationKey
(
  • node
  • attribute
  • frame
  • value
  • method
  • precompute
)

Defined in src\class.scenegraph.js:350

Add a key

Parameters:
  • node CGSGNode

    handler to the nodes to animate

  • attribute String

    String representing the attribute to animate ("position.y", "rotation.angle", "fill", ...)

  • frame Number

    the date for the key

  • value Number

    value for the attribute at the frame

  • method String

    animation method. Must be 'linear' for now

  • precompute Boolean

    Set to true if you want to precompute the animations steps

Example:

this.sceneGraph.addAnimation(imgNode, "position.x", 2000, 200, "linear", true);

addNode
(
  • node
  • parent
)

Defined in src\class.scenegraph.js:330

Add a nodes on the scene. If the root does not already exist, this nodes will be used as root

Parameters:
  • node CGSGNode

    the nodes to add

  • parent CGSGNode

    the parent nodes of the new one. If it's null, the root will be used as nodes.

animate
(
  • node
  • attribute
  • duration
  • from
  • to
  • method
  • delay
  • precompute
)

Defined in src\class.scenegraph.js:376

Animate an attribute of a nodes

Parameters:
  • node CGSGNode

    Handler to the nodes to animate

  • attribute String

    String representing the attribute to animate ("position.y", "rotation.angle", "fill", ...)

  • duration Number

    Duration of the animation, in frame

  • from Number

    Start value

  • to Number

    End value

  • method String

    Animation method. Must be 'linear' for now

  • delay Number

    Delay before start the animation, in frames

  • precompute Boolean

    Set to true if you want to precompute the animations steps

Example:

this.sceneGraph.animate(imgNode, "position.x", 700, 0, 200, "linear", 0, true);

deselectAll
(
  • excludedArray
)

Defined in src\class.scenegraph.js:236

Mark all nodes as not selected

Parameters:
  • excludedArray Array

    CGSGNodes to not deselect

deselectNode
(
  • nodeToDeselect
)

Defined in src\class.scenegraph.js:225

Mark the nodes as not selected

Parameters:
getTimeline
(
  • node
  • attribute
)
CGSGTimeline

Defined in src\class.scenegraph.js:416

Return the timeline corresponding with the nodes and attribute. Create it if does not exists yet

Parameters:
  • node CGSGNode

    Handle to the nodes

  • attribute String

    String. the attribute name

Returns:
CGSGTimeline:
initializeGhost
(
  • width
  • height
)
private

Defined in src\class.scenegraph.js:99

Initialize the ghost rendering, used by the PickNode function

Parameters:
  • width Number

    The width for the canvas. Must be the same as the rendering canvas

  • height Number

    The height for the canvas. Must be the same as the rendering canvas

pickNode
(
  • mousePosition
  • condition
)
CGSGNode

Defined in src\class.scenegraph.js:254

Recursively traverse the nodes and return the one who is under the mouse coordinates

Parameters:
Returns:
CGSGNode:
Example:

this.scenegraph.picknode(mousePosition, 'position.x > 100');
this.scenegraph.picknode(mousePosition, 'position.x > 100 && this.position.y > 100');

pickNodes
(
  • region
  • condition
)
Array

Defined in src\class.scenegraph.js:284

Recursively traverse the nodes and return the ones who are under the mouse coordinates

Parameters:
Returns:
Array:
Example:

this.scenegraph.picknodes(region, 'position.x > 100');
this.scenegraph.picknodes(region, 'position.x > 100 && this.position.y > 100');

removeNode
(
  • node
)
Boolean

Defined in src\class.scenegraph.js:314

Remove the child nodes passed in parameter, from the root nodes

Parameters:
Returns:
Boolean: true if the nodes was found and removed
render () public

Defined in src\class.scenegraph.js:113

Render the SceneGraph

selectNode
(
  • nodeToSelect
)

Defined in src\class.scenegraph.js:211

Mark the nodes as selected so the select marker (also called selectedHandlers) will be shown and the SceneGraph will manage the moving and resizing of the selected objects.

Parameters:
  • nodeToSelect Object

    The CGSGNode to be selected

setCanvasDimension
(
  • newDimension
)

Defined in src\class.scenegraph.js:200

Change the dimension of the canvas. Does not really change the dimension of the rendering canvas container, but is used for different computations

Parameters:
stillHaveAnimation () Boolean

Defined in src\class.scenegraph.js:396

Returns:
Boolean: true if there are still animation key after the current frame

Properties

_listTimelines Array private

Defined in src\class.scenegraph.js:74

List of the timelines for the animations. A timeline consists of a list of animation keys for 1 attribute of the nodes

_nextNodeID Number private

Defined in src\class.scenegraph.js:66

context CanvasRenderingContext2D

Defined in src\class.scenegraph.js:50

ghostCanvas HTMLElement

Defined in src\class.scenegraph.js:85

Initialize a ghost canvas used to determine which nodes are selected by the user

root CGSGNode

Defined in src\class.scenegraph.js:43

Root node of the graph

selectedNodes Array

Defined in src\class.scenegraph.js:60

The nodes currently selected by the user