CGSGNodeWebview Class
Constructor
Item Index
Methods
- _applyShadow
- _clearContext
- _createLiveContainer
- _createPreviewContainer
- _initLiveContainer
- _initPreviewContainer
- _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
- getCurrentMode
- getHeight
- getListOfCollidingBrothers
- getMinAbsoluteLeft
- getMinAbsoluteTop
- getMostAbsoluteRight
- getRegion
- getURL
- getWidth
- invalidate
- invalidateTheme
- isALeaf
- isColliding
- isCollidingABrother
- moveLocalZIndex
- pickNode
- pickNodes
- removeAll
- removeChild
- removeClass
- render
- render Custom rendering
- renderBoundingBox
- renderGhost
- resizeTBy
- resizeTo
- resizeWith
- rotateBy
- rotateTo
- rotateWith
- scaleBy
- scaleTo
- scaleWith
- setClass
- setClassBBox
- setLocalZIndex
- setPrecomputed
- setPreviewURL
- setRegionConstraint
- setSelected
- setURL
- switchMode
- translateBy
- translateTo
- translateWith
- updateCssRegion
Properties
- _absPos
- _absRot
- _absSca
- _htmlElement
- _id
- _isDimensionChanged
- _isDrag
- _parentNode
- _previewContainer
- _previewURL
- _url
- bkgcolors
- borderRadius
- children
- classType
- 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
- threshold
- userData
Methods
_applyShadow
-
c
Parameters:
-
cCanvasRenderingContext2D
_clearContext
-
c -
w -
h
Wipes the canvas context
_createLiveContainer
()
private
Create an IFRAME tag in the _liveContainer property
_createPreviewContainer
()
private
Create the CGSGNodeImage to contain the preview
_initLiveContainer
()
private
Initialize and add the live container to the HTML body
_initPreviewContainer
()
private
Initialize and add the CGSGNodeImage
_preCompute
()
private
addChild
-
newNode
Add a new nodes into this one, at the end of the list
Parameters:
-
newNodeCGSGNodethe 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:
-
clsString
afterRender
-
c -
t
Must be called after a render
Parameters:
-
cCanvasRenderingContext2DThe context into render the nodes
-
tBooleanisThemeInvalidated true if you need to reload theme for children of this node
afterRenderGhost
-
c
Must be called before begin to render
Parameters:
-
cCanvasRenderingContext2Dcontext the context into render the nodes
beforeRender
-
c
Must be called before to start the rendering of the nodes
Parameters:
-
cCanvasRenderingContext2Dcontext the context into render the nodes
beforeRenderGhost
-
c
Must be called before begin to render the nodes in GHOST mode
Parameters:
-
cCanvasRenderingContext2Dcontext the context into render the nodes
computeAbsoluteMatrix
-
recursive
Compute the absolute position, rotation and scale in the canvas container
Parameters:
-
recursiveBooleanif !== false, compute recursively
detachChild
-
childNode
Detach the nodes without delete it. So it's not a child anymore
Parameters:
-
childNodeCGSGNode
detachChildAt
-
i
Detach the nodes in index 'index' without delete it. So it's not a child anymore
Parameters:
-
iNumberindex
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:
-
posCGSGPositionmousePosition A CGSGPosition object
-
cCanvasRenderingContext2Dghost Context
-
sCGSGScaleabsoluteScale
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:
-
rgCGSGRegionregion The region to check
-
cCanvasRenderingContext2DghostContext
doRender
-
c -
t
internal method of the framework that encapsulate all the work aroud the rendering method
Parameters:
-
cCanvasRenderingContext2Dcontext
-
tBooleanisThemeInvalidated
doRenderGhost
-
c
internal method of the framework that encapsulate all the work around the ghost rendering method
Parameters:
-
cCanvasRenderingContext2Dghost 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:
-
aStringattribute The attribute to be changed
-
vvalue The new value for the attribute
Example:
node.evalSet("position.y", 12);
free
()
Free the memory taken by this node
getAbsBottom
()
Number
Returns the bottom border's position with the highest value between this node and its children.
Returns:
getAbsolutePosition
-
recursive
Parameters:
-
recursiveBooleanflag indicating if computation should be recusive or not
Returns:
the absolute positions of this node
getAbsoluteRotation
-
recursive
Parameters:
-
recursiveBooleanflag indicating if computation should be recusive or not
Returns:
the absolute rotation of this node
getAbsoluteScale
-
recursive
Parameters:
-
recursiveBooleanflag 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:
-
thresholdNumberspace 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:
-
thresholdNumberspace 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
pickNode
-
pos -
absSca -
c -
recursively -
condition
Check if this nodes is under the cursor position.
Parameters:
-
posCGSGPositionmousePosition position of the mouse on the canvas
-
absScaCGSGScaleabsoluteScale a CGSGScale absolute relativeScale of all parents
-
cCanvasRenderingContext2DghostContext a copy of the canvas context
-
recursivelyBooleanif false, don't traverse the children of this nodes
-
conditionFunctionCondition 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:
-
regionCGSGRegionof the canvas to check
-
absoluteScaleCGSGScalea CGSGScale absolute relativeScale of all parents
-
ghostContextCanvasRenderingContext2Da copy of the canvas context
-
recursivelyBooleanif false, don't traverse the children of this nodes
-
conditionFunctionCondition 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:
-
clsString
render
-
context
Empty rendering function. Must be overrided by the inherited classes
Parameters:
-
contextCanvasRenderingContext2Dthe context into render the node
render
Custom rendering
()
protected
renderBoundingBox
-
c
Render the selection box and handle boxes around the bounding box of this node when selected
Parameters:
-
cCanvasRenderingContext2Dcontext 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:
-
ghostCtxCanvasRenderingContext2DThe 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
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:
-
clsString
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:
-
clsString
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:
-
pBooleanisPrecomputed
setPreviewURL
-
imageURL
Set the URL of the image for the preview mode (CGSGWEBVIEWMODE.PREVIEW)
Parameters:
-
imageURLString
setRegionConstraint
-
region
Set the region inside which one this node ca be placed an can move
Parameters:
-
regionCGSGRegiona CGSGRegion relatively to this parent region. Can be null.
switchMode
-
mode
Switch between rendering mode
Parameters:
-
modeNumbera CGSGWEBVIEWMODE enum : LIVE or PREVIEW
translateBy
-
x -
y -
computeAbsoluteValue
Add new coordinate to the current relative one
translateTo
-
x -
y -
computeAbsoluteValue
Replace current relative position by this new one
translateWith
-
x -
y -
computeAbsoluteValue
Add new coordinate to the current relative one
updateCssRegion
()
Updates the styles of the wrapped DOM element to change its position and size inside the scene.
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, ...)
lineColor
String
Color to stroke the node. Will be overrided with CSS content CGSGNode extensions should (but not mandatory) use this attribute as the stroke color for their node
CSS managed.
lineWidth
Number
Width of the line that stroke the node. Will be overrided with CSS content. CGSGNode extensions should (but not mandatory) use this attribute as the strokeWidth for their node Let 0 if you don't want to stroke the node.
CSS managed.
Default: 0
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