CGSGView Class
Represent the scene of the application. It encapsulates the scene graph itself and several methods to track mouse and touch events, ...
Constructor
Item Index
Methods
- _canStartDragSelection
- _clickOnScene
- _dblClickOnScene
- _detectResizeMode
- _dispatchClick
- _doDragSelect
- _getDeltaOnMove
- _moveOnScene
- _upAndClick
- _upAndDblClick
- _updateDblBuffer
- _updateFramerate
- _updateFramerateContainer
- _updateSelection
- _upOnScene
- deleteSelected
- deselectAll
- invalidateTheme
- invalidateTransformation
- onKeyDownHandler
- onKeyUpHandler
- onMouseDblClick
- onMouseDown
- onMouseMove
- onMouseOutHandler
- onMouseUp
- onTouchEnd
- onTouchMove
- onTouchStart
- render
- setCanvasDimension
- setDisplayRatio
- showFPS
- startPlaying
- stopPlaying
Properties
- _frameContainer Handler to the HTML Element displaying the FPS
- _isRunning
- _keyDownedCtrl
- _listCursors List of the names for the cursor when overring a handlebox
- _mousePos
- _selectedNode The current last selected node
- _timerDblTouch
- allowMultiSelect
- cgsgGlobalRenderingTimer
- dblTouchDelay
- dragSelectAlpha
- dragSelectFillColor
- dragSelectStrokeColor
- dragSelectStrokeWidth
- onRenderEnd
- onRenderStart
- onSceneAverageFtpChanged
- onSceneClickEnd
- onSceneClickStart
- onSceneDblClickEnd
- onSceneDblClickStart
Methods
_canStartDragSelection
-
e
This method indicates if, according to the current state of the scene, a drag selection could starts. Called when a touchStart event triggered. Could be overridden to specify different behaviour.
Parameters:
-
eEventthe event
Returns:
true if drag selection could starts, false otherwise
_clickOnScene
-
e -
pickNode
Click on the scene
_dblClickOnScene
-
event -
mustPickNode
Returns:
the node that was double-clicked
_detectResizeMode
-
mousePosition
Detects if the mouse if over the handle box of a selected node.
Parameters:
-
mousePositionCGSGPositionthe cursor position
Returns:
true if we resize, false otherwise
_dispatchClick
-
event
Dispatch a 'click' event and for any selected node which is clickable and and only if 'this._isDblClick' == false.
Parameters:
-
eventCGSGEventthe event to dispatch
_doDragSelect
()
protected
Select the nodes under the drag select rectangle
_moveOnScene
-
e
Parameters:
-
eEventMouseEvent or TouchEvent
_upAndClick
-
event
Creates the custom event by calling _upOnScene and then call _clickOnScene.
Parameters:
-
eventEventthe event
_upAndDblClick
-
event
Creates the custom event by calling _upOnScene and then call _dblClickOnScene.
Parameters:
-
eventEventthe event
_updateDblBuffer
()
private
_updateFramerate
()
private
Update the current framerate
_updateFramerateContainer
()
private
Update the innerHTML of the HTMLElement passed as parameter of the "showFPS" function
_updateSelection
-
e
Updates the current selection according to the given event.
Parameters:
-
eEventthe event
_upOnScene
-
event
Parameters:
-
eventEventMouseEvent or TouchEvent
Returns:
a structure indicating is the node has been moved or resize
deleteSelected
()
Remove the nodes selected in the scene graph
deselectAll
-
excludedArray
Deselect all nodes
Parameters:
-
excludedArrayArrayCGSGNodes not to deselect
invalidateTheme
()
Inform the SceneGraph that all nodes must be updated with the current theme
invalidateTransformation
()
public
Inform the SceneGraph that a new render is needed
onMouseDblClick
-
event
mouse double click Event handler function
Parameters:
-
eventMouseEvent
onMouseDown
-
e
click mouse Event handler function
Parameters:
-
eMouseEventevent
onMouseMove
-
e
mouse move Event handler function
Parameters:
-
eMouseEventevent
onMouseOutHandler
-
e
Detects when the mouse leaves the canvas.
Parameters:
-
eMouseEventthe event
onMouseUp
-
event
mouse up Event handler function
Parameters:
-
eventMouseEvent
onTouchEnd
-
event
touch up Event handler function
Parameters:
-
eventEvent
onTouchMove
-
event
touch move Event handler function
Parameters:
-
eventEvent
onTouchStart
-
e
touch down Event handler function
Parameters:
-
eEventevent
render
()
protected
the main rendering loop
setCanvasDimension
-
d
Change the dimension of the canvas. Does not really change the dimension of the rendering canvas container, but is used by the different computations
Parameters:
-
dCGSGDimensionnewDimension
setDisplayRatio
-
ratio
Set the new value for the display ratio. The display ratio is used to resize all the elements on the graph to be adapted to the screen, depending on the reference screen size. You can compute the ratio like this: x = canvas.width/reference.width ; y = canvas.height/reference.height
Parameters:
-
ratioCGSGScalea CGSGScale value
showFPS
-
elt
Parameters:
-
eltHTMLElementan HTML element to receive the FPS. Can be null if you want to remove the framerate
startPlaying
()
public
Call this to start the update of the scene
stopPlaying
()
public
Call this to stop the rendering (and so animation) update
Properties
_selectedNode The current last selected node
Null
private
dblTouchDelay
Number
The delay between 2 touches to be considered as a dbl touch event. To remove the double touch, just set it to 0
Default: CGSG_DEFAULT_DBLTOUCH_DELAY
onRenderEnd
Function
Callback on end rendering event
Default: null
Example:
this.onRenderEnd = function () { //... }
onRenderStart
Function
Callback on start rendering event
Default: null
Example:
this.onSceneClickStart = function () { //... }
onSceneAverageFtpChanged
Function
Callback on frame average changed event.
Default: null
Example:
this.onSceneAverageFtsChanged = function (event) { event.fps; // The average FPS }
onSceneClickEnd
Function
Callback on click up on scene event
Default: null
Example:
this.onSceneClickEnd = function (event) { event.position; //Array of CGSGPosition event.event; //Event }
onSceneClickStart
Function
Callback on click down on scene event.
Default: null
Example:
this.onSceneClickStart = function (event) { event.position; //Array of CGSGPosition event.event; //Event }
onSceneDblClickEnd
Function
Callback on double click up on scene event
Default: null
Example:
this.onSceneDblClickEnd = function (event) { event.position; //Array of CGSGPosition event.event; //Event }
onSceneDblClickStart
Function
Callback on double click start on scene event
Default: null
Example:
this.onSceneDblClickStart = function (event) { event.position; //Array of CGSGPosition event.event; //Event }