CGSGNodeSliderHandle Class
A CGSGNodeSliderHandle represent a slider handle
Constructor
Item Index
Methods
- _applyShadow
- _clearContext
- _createPanel
- _preCompute
- addChild
- addChildAt
- addClass
- afterRender
- afterRenderGhost
- beforeRender
- beforeRenderGhost
- computeAbsoluteMatrix
- copy
- detachChild
- detachChildAt
- detectSelection
- detectSelectionInRegion
- doRender
- doRenderGhost
- evalSet
- free
- getAbsBottom
- getAbsHeight
- getAbsLeft
- getAbsolutePosition
- getAbsoluteRegion
- getAbsoluteRotation
- getAbsoluteScale
- getAbsRight
- getAbsTop
- getAbsWidth
- getCenter
- getCompleteDimension
- getCompletePosition
- getCompleteRegion
- getHeight
- getListOfCollidingBrothers
- getMinAbsoluteLeft
- getMinAbsoluteTop
- getMostAbsoluteRight
- getParentSlider
- getRegion
- getWidth
- invalidate
- invalidateTheme
- isALeaf
- isColliding
- isCollidingABrother
- moveLocalZIndex
- onSlide
- pickNode
- pickNodes
- removeAll
- removeChild
- removeClass
- render
- render
- renderBoundingBox
- renderGhost
- resizeTBy
- resizeTo
- resizeWith
- rotateBy
- rotateTo
- rotateWith
- scaleBy
- scaleTo
- scaleWith
- set
- setClass
- setClassBBox
- setLocalZIndex
- setPrecomputed
- setRegionConstraint
- setSelected
- translateBy
- translateTo
- translateWith
Properties
- _absPos
- _absRot
- _absSca
- _attributes
- _id
- _isDimensionChanged
- _isDrag
- _parentNode
- bkgcolors
- borderRadius
- children
- classType
- cornerRadius
- detectSelectionThreshold
- dimension
- globalAlpha
- handleColor
- handles
- handleSize
- isClickable
- isCollisionManaged
- isDraggable
- isMouseOver
- isMoving
- isProportionalResize
- isProportionalResizeOnly
- isResizable
- isResizing
- isSelected
- isTraversable
- isVisible
- lineColor
- lineWidth
- name
- needToKeepAbsoluteMatrix
- onAfterRender
- onAfterRenderStart
- onBeforeRender
- onChildRemove
- onClick
- onDblClick
- onDeselect
- onDrag
- onDragEnd
- onMouseEnter
- onMouseOut
- onMouseOver
- onMouseUp
- onResize
- onResizeEnd
- onSelect
- onTranslate
- pickNodeMethod
- position
- regionConstraint
- rotation
- rotationCenter
- scale
- selectionLineColor
- selectionLineWidth
- shadowBlur
- shadowColor
- shadowOffsetX
- shadowOffsetY
- textColor
- textSize
- userData
Methods
_applyShadow
-
c
Parameters:
-
c
CanvasRenderingContext2D
_clearContext
-
c
-
w
-
h
Wipes the canvas context
_createPanel
()
private
Create the panel graph that drw the attributes
_preCompute
()
private
addChild
-
newNode
Add a new nodes into this one, at the end of the list
Parameters:
-
newNode
CGSGNodethe 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
addClass
-
cls
Add CSS class for this node (not for bounding box, use 'setClassBBox' instead). CSS class must define attributes used by this node.
Parameters:
-
cls
String
afterRender
-
c
-
t
Must be called after a render
Parameters:
-
c
CanvasRenderingContext2DThe context into render the nodes
-
t
BooleanisThemeInvalidated true if you need to reload theme for children of this node
afterRenderGhost
-
c
Must be called before begin to render
Parameters:
-
c
CanvasRenderingContext2Dcontext the context into render the nodes
beforeRender
-
c
Must be called before to start the rendering of the nodes
Parameters:
-
c
CanvasRenderingContext2Dcontext the context into render the nodes
beforeRenderGhost
-
c
Must be called before begin to render the nodes in GHOST mode
Parameters:
-
c
CanvasRenderingContext2Dcontext the context into render the nodes
computeAbsoluteMatrix
-
recursive
Compute the absolute position, rotation and scale in the canvas container
Parameters:
-
recursive
Booleanif !== false, compute recursively
copy
()
CGSGNodeLogger
Returns:
a copy of this node
detachChild
-
childNode
Detach the nodes without delete it. So it's not a child anymore
Parameters:
-
childNode
CGSGNode
detachChildAt
-
i
Detach the nodes in index 'index' without delete it. So it's not a child anymore
Parameters:
-
i
Numberindex
detectSelection
-
pos
-
c
-
s
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:
-
pos
CGSGPositionmousePosition A CGSGPosition object
-
c
CanvasRenderingContext2Dghost Context
-
s
CGSGScaleabsoluteScale
detectSelectionInRegion
-
rg
-
c
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:
-
rg
CGSGRegionregion The region to check
-
c
CanvasRenderingContext2DghostContext
doRender
-
c
-
t
internal method of the framework that encapsulate all the work aroud the rendering method
Parameters:
-
c
CanvasRenderingContext2Dcontext
-
t
BooleanisThemeInvalidated
doRenderGhost
-
c
internal method of the framework that encapsulate all the work around the ghost rendering method
Parameters:
-
c
CanvasRenderingContext2Dghost Context
evalSet
-
a
-
v
Execute/Eval the script passed in parameter in "this" scope. Used to set new value to an attribute of a node
Parameters:
-
a
Stringattribute The attribute to be changed
-
v
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
getAbsBottom
()
Number
Returns the bottom border's position with the highest value between this node and its children.
Returns:
getAbsolutePosition
-
recursive
Parameters:
-
recursive
Booleanflag indicating if computation should be recusive or not
Returns:
the absolute positions of this node
getAbsoluteRotation
-
recursive
Parameters:
-
recursive
Booleanflag indicating if computation should be recusive or not
Returns:
the absolute rotation of this node
getAbsoluteScale
-
recursive
Parameters:
-
recursive
Booleanflag indicating if computation should be recusive or not
Returns:
the absolute scale of this node
getCompleteDimension
()
CGSGDimension
protected
Returns a position which represents the highest dimension covered between this node and its children too.
Returns:
getCompletePosition
()
CGSGPosition
protected
Returns a position which represents the lowest position covered between this node and its children too.
Returns:
getCompleteRegion
()
CGSGRegion
protected
Returns a region which represents the total surface covered by this node and its children too.
Returns:
getListOfCollidingBrothers
-
threshold
Parameters:
-
threshold
Numberspace between the 2 nodes before considering they are colliding
Returns:
a Array of nodes this one is colliding with (can be empty)
getMinAbsoluteLeft
()
Number
Returns the x position with the lowest value between this node and its children.
Returns:
getMinAbsoluteTop
()
Number
Returns the y position with the lowest value between this node and its children.
Returns:
getMostAbsoluteRight
()
Number
Returns the right border's position with the highest value between this node and its children.
Returns:
invalidate
()
Force the redraw of the node if it's precomputed
invalidateTheme
()
Reload theme (colors, ...) from loaded CSS file To be overrided
isALeaf
()
Return true if this nodes has no child
isColliding
-
node
-
threshold
Test if this node is colliding the node in parameter. Don't forget to add nodes to CGSGCollisionManager.
Parameters:
Returns:
true if the 2 nodes are colliding. They are colliding if the distance between them is minus than the threshold parameter
isCollidingABrother
-
threshold
Parameters:
-
threshold
Numberspace between the 2 nodes before considering they are colliding
Returns:
true if this node is colliding one of the other children of its parent node
onSlide
()
protected
Restrain movement to x axis
pickNode
-
pos
-
absSca
-
c
-
recursively
-
condition
Check if this nodes is under the cursor position.
Parameters:
-
pos
CGSGPositionmousePosition position of the mouse on the canvas
-
absSca
CGSGScaleabsoluteScale a CGSGScale absolute relativeScale of all parents
-
c
CanvasRenderingContext2DghostContext a copy of the canvas context
-
recursively
Booleanif false, don't traverse the children of this nodes
-
condition
FunctionCondition to be picked ie: "color=='yellow'" or "classType=='CGSGNodeImage' && this.globalAlpha>0.5"
pickNodes
-
region
-
absoluteScale
-
ghostContext
-
recursively
-
condition
Return all nodes (Array) in the given region
Parameters:
-
region
CGSGRegionof the canvas to check
-
absoluteScale
CGSGScalea CGSGScale absolute relativeScale of all parents
-
ghostContext
CanvasRenderingContext2Da copy of the canvas context
-
recursively
Booleanif false, don't traverse the children of this nodes
-
condition
FunctionCondition 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
Remove the child passed in parameter and delete it
Parameters:
Returns:
true if the child was correctly removed or false if the nodes was not found.
removeClass
-
cls
remove CSS class for this node (not for bounding box, use 'setClassBBox' instead).
Parameters:
-
cls
String
render
-
c
Default handle rendering (A rounded square with some "volume" effect)
Parameters:
-
c
CanvasRenderingContext2Dcontext the context into render the node
render
-
context
Custom rendering
Parameters:
-
context
CanvasRenderingContext2Dthe context into render the node
renderBoundingBox
-
c
Render the selection box and handle boxes around the bounding box of this node when selected
Parameters:
-
c
CanvasRenderingContext2Dcontext the context into render the node
renderGhost
-
ghostCtx
Empty ghost rendering function. Render here your custom nodes with a single color (CGSG.ghostColor). This will be used by the SceneGraph to know if the mouse cursor is over this nodes.
Parameters:
-
ghostCtx
CanvasRenderingContext2DThe context for the ghost rendering
resizeWith
-
w
-
h
Increase/decrease current dimension with adding values
rotateBy
-
af
-
computeAbsoluteValue
Multiply this relativeScale factor by the current relative relativeScale
rotateTo
-
a
-
computeAbsoluteValue
Replace current relative relativeRotation by this new oneScale
rotateWith
-
a
-
computeAbsoluteValue
Add this angle to the current relative relativeRotation
scaleBy
-
sfx
-
sfy
-
computeAbsoluteValue
Multiply this relativeScale factor by the current relative relativeScale
scaleTo
-
sx
-
sy
-
computeAbsoluteValue
Replace current relative relativeScale by this new one
scaleWith
-
x
-
y
-
computeAbsoluteValue
Add to the current relative Scale
set
-
name
-
value
Set a new couple name/value to render onto the logger. If an attribute already exists with that name, just update the value
setClass
-
cls
Set CSS class for this node (not for bounding box, use 'setClassBBox' instead). CSS class must define attributes used by this node.
Parameters:
-
cls
String
setClassBBox
-
cls
Set CSS class for the bounding box of this node (not for node itself, use 'setClass' instead). CSS class must define attributes used by BBox.
Parameters:
-
cls
String
setPrecomputed
-
p
Use this method to make the node precomputed or not. If it's precomputed, it won't be redraw every frame, but only when the "invalidate" method is called.
Parameters:
-
p
BooleanisPrecomputed
setRegionConstraint
-
region
Set the region inside which one this node ca be placed an can move
Parameters:
-
region
CGSGRegiona CGSGRegion relatively to this parent region. Can be null.
translateBy
-
x
-
y
-
computeAbsoluteValue
Add new coordinate to the current relative one
translateTo
-
x
-
y
-
computeAbsoluteValue
Replace current relative position by this new one
Properties
_absPos
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
_absRot
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
_absSca
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.
_isDimensionChanged
Unknown
private
Set to true if dimension of the node is not the original one anymore
Default: false
bkgcolors
Array
Array of colors to fill the background of the node. Will be overrided with CSS content. CGSGNode extensions should (but not mandatory) use this attribute
CSS managed.
borderRadius
Number
Corner radius. Used by only few official nodes and maybe by some community's nodes.
CSS managed.
Default: 0
detectSelectionThreshold
Number
Threshold applied when detecting selection. Defalt value is picked from CGSG.globalDetectSelectionThreshold. Value could be changed after.
Example:
var n = new CGSGNode(10, 10); n.detectSelectionThreshold = 10; // node will be picked in an area [0, 0, 30, 30] (x, y, w, h)
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)
handles
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
isClickable
Boolean
selection attributes If true, this node is clickable and so will be checked by the pickNode function
Default: true
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
isProportionalResizeOnly
Boolean
Set to true if the node can't be resized only in height or width
Default: false
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 CGSGView::scenegraph.selectNode(nodeToSelect) to select a node
Default: false
isTraversable
Boolean
true if this node is traversable (recursively) (ie : by the picknode, a traverser, ...)
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
onChildRemove
Function
Callback on when a child is removed
Default: null
Example:
this.onDeselect = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onClick
Function
Callback on mouse or touch click
Default: null
Example:
this.onClick = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onDblClick
Function
Callback on mouse or touch double click
Default: null
Example:
this.onDblClick = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onDeselect
Function
Callback on deselect this node
Default: null
Example:
this.onDeselect = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onDrag
Function
Callback on drag this node
Default: null
Example:
this.onDrag = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onDragEnd
Function
Callback on end of drag this node
Default: null
Example:
this.onDragEnd = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onMouseEnter
Function
Callback on mouse enter on the node
Default: null
Example:
this.onMouseEnter = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onMouseOut
Function
Callback on mouse out
Default: null
Example:
this.onMouseOut = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onMouseOver
Function
Callback on mouse over the node
Default: null
Example:
this.onMouseOver = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onMouseUp
Function
Callback on mouse up
Default: null
Example:
this.onMouseUp = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onResize
Function
Callback on resize this node
Default: null
Example:
this.onResize = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onResizeEnd
Function
Callback on end resize this node
Default: null
Example:
this.onResizeEnd = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //Event }
onSelect
Function
Callback on select this node
Default: null
Example:
this.onSelect = function (event) { event.data.node; //CGSGNode event.data.position; //Array of CGSGPosition event.data.nativeEvent; //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)
regionConstraint
Null
The constraint region when moving the node
Default: null
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)
userData
can be fulfilled by the developer to put in whatever he needs
Default: {} Empty object