Show:

CGSGNodeCircle Class

Extends CGSGNode
Module: Node

A CGSGNodeCircle represent a basic circle. By default, the pickNodeMethod used to detect the node under the mice is CGSGPickNodeMethod.GHOST. If you don't need precision on detection on your circles, just change the property to pickNodeMethod.REGION.

Constructor

CGSGNodeCircle
(
  • centerX
  • centerY
  • radius
)
Parameters:

Methods

_clearContext
(
  • context
  • canvasWidth
  • canvasHeight
)
private

Wipes the canvas context

Parameters:
_computeResizedRadius () private
addChild
(
  • newNode
)

Add a new nodes into this one, at the end of the list

Parameters:
  • newNode CGSGNode

    the nodes to add as a child

addChildAt
(
  • newNode
  • index
)

Add a new nodes at a particular index in the list of children. If the index is too large, the nodes will be inserted at the end of the list

Parameters:
  • newNode CGSGNode

    the nodes to insert as a child

  • index Number

    the position of the new child in the list

afterRender
(
  • context
)
protected

Must be called after a render

Parameters:
  • context CanvasRenderingContext2D

    the context into render the nodes

afterRenderGhost
(
  • context
)
protected

Must be called before begin to render

Parameters:
  • context CanvasRenderingContext2D

    the context into render the nodes

beforeRender
(
  • context
)
protected

Must be called before to start the rendering of the nodes

Parameters:
  • context CanvasRenderingContext2D

    the context into render the nodes

beforeRenderGhost
(
  • context
)
protected

Must be called before begin to render the nodes in GHOST mode

Parameters:
  • context CanvasRenderingContext2D

    the context into render the nodes

computeAbsoluteMatrix
(
  • recursive
)
public

Compute the absolute position, rotation and scale in the canvas container

Parameters:
  • recursive Boolean

    if !== false, compute recursively

copy () CGSGNodeCircle

Inherited from CGSGNode but overwritten in src\node\class.node.circle.js:219

Returns:
CGSGNodeCircle: a copy of this node
detachChild
(
  • childNode
)

Detach the nodes without delete it. So it's not a child anymore

Parameters:
detachChildAt
(
  • index
)

Detach the nodes in index 'index' without delete it. So it's not a child anymore

Parameters:
detectSelection
(
  • mousePosition
  • ghostContext
  • absoluteScale
)
protected

return this if this nodes is under the mice cursor Can be overrided by inherited klass to optimize this perform. This default function used the ghost rendering method

Parameters:
  • mousePosition CGSGPosition

    A CGSGPosition object

  • ghostContext CanvasRenderingContext2D
  • absoluteScale CGSGScale
detectSelectionInRegion
(
  • region
  • ghostContext
  • absoluteScale
)
protected

return this if this nodes is under the region Can be overrided by inherited klass to optimize this perform. This default function used the ghost rendering method

Parameters:
  • region CGSGRegion

    The region to check

  • ghostContext CanvasRenderingContext2D
  • absoluteScale CGSGScale
evalSet
(
  • attribute
  • value
)

Execute/Eval the script passed in parameter in "this" scope. Used to set new value to an attribute of a node

Parameters:
  • attribute String

    The attribute to be changed

  • value

    The new value for the attribute

Example:

node.evalSet("position.y", 12);

free ()

free memory taken by this object and it's children. The 'userData' property won't be freed

getAbsoluteBottom () Number
Returns:
getAbsoluteHeight () Number
Returns:
getAbsoluteLeft () Number
Returns:
getAbsolutePosition () CGSGPosition public
Returns:
CGSGPosition: the absolute positions of this node
getAbsoluteRegion () CGSGRegion public

return the absolute region of this node

Returns:
getAbsoluteRight () Number
Returns:
getAbsoluteRotation () CGSGRotation public
Returns:
CGSGRotation: the absolute rotation of this node
getAbsoluteScale () CGSGScale public
Returns:
CGSGScale: the absolute scale of this node
getAbsoluteTop () Number
Returns:
getAbsoluteWidth () Number
Returns:
getHeight () Number
Returns:
getListOfCollidingBrothers
(
  • threshold
)
Array public
Parameters:
  • threshold Number

    space between the 2 nodes before considering they are colliding

Returns:
Array: a Array of nodes this one is colliding with (can be empty)
getRegion () CGSGRegion public

return the relative region of this node

Returns:
getWidth () Number
Returns:
isALeaf ()

Return true if this nodes has no child

isColliding
(
  • node
  • threshold
)
Boolean public

Test if this node is colliding the node in parameter. Don't forget to add nodes to CGSGCollisionManager.

Parameters:
  • node CGSGNode

    a CGSGNode

  • threshold Number

    space between the 2 nodes before considering they are colliding (in mode region)

Returns:
Boolean: true if the 2 nodes are colliding. They are colliding if the distance between them is minus than the threshold parameter
isCollidingABrother
(
  • threshold
)
Boolean public
Parameters:
  • threshold Number

    space between the 2 nodes before considering they are colliding

Returns:
Boolean: true if this node is colliding one of the other children of its parent node
pickNode
(
  • mousePosition
  • absoluteScale
  • ghostContext
  • recursively
  • condition
)
public

Check if this nodes is under the cursor position.

Parameters:
  • mousePosition CGSGPosition

    position of the mouse on the canvas

  • absoluteScale CGSGScale

    a CGSGScale absolute relativeScale of all parents

  • ghostContext CanvasRenderingContext2D

    a copy of the canvas context

  • recursively Boolean

    if false, don't traverse the children of this nodes

  • condition Function

    Condition to be picked ie: "color=='yellow'" or "classType=='CGSGNodeImage' && this.globalAlpha>0.5"

pickNodes
(
  • region
  • absoluteScale
  • ghostContext
  • recursively
  • condition
)
public

Return all nodes (Array) in the given region

Parameters:
  • region CGSGRegion

    of the canvas to check

  • absoluteScale CGSGScale

    a CGSGScale absolute relativeScale of all parents

  • ghostContext CanvasRenderingContext2D

    a copy of the canvas context

  • recursively Boolean

    if false, don't traverse the children of this nodes

  • condition Function

    Condition to be picked ie: "color=='yellow'" or "classType=='CGSGNodeImage' && this.globalAlpha>0.5"

removeAll ()

remove all children, delete them and reset the current parameters

removeChild
(
  • node
  • searchRecursively
)
Boolean

Remove the child passed in parameter and delete it

Parameters:
  • node CGSGNode

    the nodes to remove

  • searchRecursively Boolean

    if true, search the nodes on all the tree from this nodes

Returns:
Boolean: true if the child was correctly removed or false if the nodes was not found.
render
(
  • context
)
protected

Inherited from CGSGNode but overwritten in src\node\class.node.circle.js:118

Custom rendering

Parameters:
  • context CanvasRenderingContext2D

    the context into render the node

renderGhost
(
  • ghostContext
)

Inherited from CGSGNode but overwritten in src\node\class.node.circle.js:193

Parameters:
  • ghostContext CanvasRenderingContext2D

    the context into render the node

renderSelected
(
  • context
)
protected

Render the selection box and handle boxes around the bounding box of this node when selected

Parameters:
  • context CanvasRenderingContext2D

    the context into render the node

resizeBy
(
  • widthFactor
  • heightFactor
)

Multiply current dimension by these new ones

Parameters:
resizeTBy
(
  • widthFactor
  • heightFactor
)

Multiply current dimension by these new ones

Parameters:
resizeTo
(
  • newWidth
  • newHeight
)

Inherited from CGSGNode but overwritten in src\node\class.node.circle.js:145

Replace current dimension by these new ones and compute new radius

Parameters:
resizeWith
(
  • width
  • height
)

Inherited from CGSGNode but overwritten in src\node\class.node.circle.js:169

Increase/decrease current dimension with adding values

Parameters:
rotateBy
(
  • rotateFactor
  • computeAbsoluteValue
)

Multiply this relativeScale factor by the current relative relativeScale

Parameters:
  • rotateFactor Number
  • computeAbsoluteValue Boolean

    (default: true)

rotateTo
(
  • newAngle
  • computeAbsoluteValue
)

Replace current relative relativeRotation by this new oneScale

Parameters:
rotateWith
(
  • angle
  • computeAbsoluteValue
)

Add this angle to the current relative relativeRotation

Parameters:
scaleBy
(
  • scaleFactorX
  • scaleFactorY
  • computeAbsoluteValue
)

Multiply this relativeScale factor by the current relative relativeScale

Parameters:
scaleTo
(
  • scaleX
  • scaleY
  • computeAbsoluteValue
)

Replace current relative relativeScale by this new one

Parameters:
scaleWith
(
  • x
  • y
  • computeAbsoluteValue
)

Add to the current relative Scale

Parameters:
setCenter
(
  • center
)

Set the new center and compute new position of the circle

Parameters:
setRadius
(
  • radius
)

Set the new radius and compute new dimension of the circle

Parameters:
setRegionConstraint
(
  • region
)
public

Set the region inside which one this node ca be placed an can move

Parameters:
  • region CGSGRegion

    a CGSGRegion relatively to this parent region. Can be null.

setSelected
(
  • isSelected
)

Mark this nodes as selected

Parameters:
translateBy
(
  • x
  • y
  • computeAbsoluteValue
)

Add new coordinate to the current relative one

Parameters:
translateTo
(
  • newRelativeX
  • newRelativeY
  • computeAbsoluteValue
)

Replace current relative position by this new one

Parameters:
translateWith
(
  • x
  • y
  • computeAbsoluteValue
)

Add new coordinate to the current relative one

Parameters:

Properties

_absolutePosition CGSGPosition private

Absolute position of this nodes on the canvas container. Generated value. Don't modify it manually Never use it to move the node, use translateBy/translateWith/translateTo instead

_absoluteRotation CGSGRotation private

Absolute rotation of this nodes on the canvas container. Generated value. Don't modify it manually Never use it to rotate or resize the node, use rotateBy/rotateWith/rotateTo instead

_absoluteScale CGSGScale private

Absolute scale of this nodes on the canvas container. Generated value. Don't modify it manually Never use it to scale the node, use scaleBy/scaleWith/scaleTo instead

_id Number private

ID for the node. Should be filled by the developer. The framework will never use it.

_isDrag Boolean private
_parentNode CGSGNode private

parent of this node

children Array

List of the children (empty if this nodes is a leaf)

classType String

Inherited from CGSGNode but overwritten in src\node\class.node.circle.js:87

color String

Color to fill the circle

Default: "#444444"

dimension CGSGDimension

Dimension of this nodes on the canvas container Never use it to resize the node, use resizeBy/resizeWith/resizeTo instead

Default: CGSGDimension(0, 0)

globalAlpha Number

Level of transparency of the node.

Default: 1.0

isClickable Boolean

selection attributes If true, this node is clickable and so will be checked by the pickNode function

Default: true

isCollisionManaged Boolean

Indicate if this node is managed by the collision manager

isDraggable Boolean

If true, the node can be dragged by the user

Default: false

isMouseOver Boolean

Updated by the scene itself. Don't update it manually. True if the mice is over the node, false otherwise

isMoving Boolean

Updated by the scene itself. Don't update it manually. True if the node is being moved manually, false otherwise

isProportionalResize Boolean

If true, the node will be proportionally resized

isResizable Boolean

If true, this node can be resized by the user. In that case, the dimension property will be affected, not the scale one.

Default: false

isResizing Boolean

Updated by the scene itself. Don't update it manually. True if the node is being resized manually, false otherwise

isSelected Boolean

Indicate whether this node is selected or not. Use CGSGScene::scenegraph.selectNode(nodeToSelect) to select a node

Default: false

isTraversable Boolean

true if this node is traversable (recursively) (ie : by the picknode, a traverser, ...)

isVisible Boolean

Indicate if the node is visible (and so selectable) or not

Default: true

lineColor String

Color to stroke the circle

Default: "#222222"

lineWidth Number

Width of the line that stroke the circle. Let 0 if you don't want to stroke the circle.

Default: 0

name String

The name of this nodes. Should be unique, but no control is done.

Default: ""

needToKeepAbsoluteMatrix Boolean

If true, the absolute matrix will be recomputed after each movement (and so in animation). Set it to false to gain performance if you don't need to keep trace of absolute position (no need to collision, picknode, ...)

Default: true

onClick Function

Callback on mouse or touch click

Default: null

Example:

this.onClick = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onDblClick Function

Callback on mouse or touch double click

Default: null

Example:

this.onDblClick = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onDeselect Function

Callback on deselect this node

Default: null

Example:

this.onDeselect = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onDrag Function

Callback on drag this node

Default: null

Example:

this.onDrag = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onDragEnd Function

Callback on end of drag this node

Default: null

Example:

this.onDragEnd = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onMouseEnter Function

Callback on mouse enter on the node

Default: null

Example:

this.onMouseEnter = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onMouseOut Function

Callback on mouse out

Default: null

Example:

this.onMouseOut = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onMouseOver Function

Callback on mouse over the node

Default: null

Example:

this.onMouseOver = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onMouseUp Function

Callback on mouse up

Default: null

Example:

this.onMouseUp = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onResize Function

Callback on resize this node

Default: null

Example:

this.onResize = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onResizeEnd Function

Callback on end resize this node

Default: null

Example:

this.onResizeEnd = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

onSelect Function

Callback on select this node

Default: null

Example:

this.onSelect = function (event) { event.node; //CGSGNode event.position; //Array of CGSGPosition event.event; //Event }

pickNodeMethod CGSGPickNodeMethod

Define the method the detection (or "pick") method will be used for this node. Possible values CGSGPickNodeMethod.REGION and CGSGPickNodeMethod.GHOST.

  • REGION : the detection returns true if the mouse cursor is inside the bounding box of the node
  • GHOST : the detection will use the "renderGhost" method of the node to achieve a more accurate detection

Default: CGSGPickNodeMethod.REGION

position CGSGPosition

Relative position of this nodes on the canvas container, relatively to the position of its parent node. Never use it to move the node, use translateBy/translateWith/translateTo instead

Default: CGSGPosition(0, 0)

radius Number private
regionConstraint Null

The constraint region when moving the node

Default: null

resizeHandles Array

The 8 handleboxes that will be the resize handles the resize handles will be in this order: 0 1 2 3 4 5 6 7

rotation CGSGRotation

Relative rotation of this nodes on the canvas container, relatively to the rotation of its parent node. Never use it to rotate or resize the node, use rotateBy/rotateWith/rotateTo instead

Default: CGSGRotation(0)

rotationCenter CGSGPosition

Pivot point to apply a rotation. The point is a value between [0, 0] and [1, 1]. [0, 0] is the top left corner of the bounding box and [1, 1] the bottom right corner.

Default: null

scale CGSGScale

Relative scale of this nodes on the canvas container, relatively to the scale of its parent node. Never use it to scale or resize the node, use scaleBy/scaleWith/scaleTo instead

Default: CGSGScale(1, 1)

selectionHandleColor String

Color for the handle boxes around this node when selected

Default: "#9068FF""

selectionHandleSize Number

Color for the handle boxes around this node when selected

Default: 6

selectionLineColor String

Color for the line around this node when selected

Default: "#FF6890"

selectionLineWidth Number

Width for the line around this node when selected

Default: 2

userdata

can be fulfilled by the developer to put in whatever he needs

Default: null