123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499 |
- "use strict";
- define( [ "module", "vwf/view", "jquery", "vwf/utility", "vwf/utility/color" ],
- function( module, view, $, utility, color ) {
- var self;
- var stageContainer;
- var stageWidth = 800;
- var stageHeight = 600;
- function processEvent( e, node, propagate ) {
- var returnData = { eventData: undefined, eventNodeData: undefined };
- if ( !propagate ) {
-
-
- e.evt.stopPropagation && e.evt.stopPropagation();
- }
- var eventPosition;
- var isTouchEvent = ( e.evt instanceof TouchEvent );
- if ( isTouchEvent ) {
- eventPosition = e.evt.changedTouches[ 0 ];
- } else {
- eventPosition = e.evt;
- }
- var stage = node && node.stage;
- returnData.eventData = [ convertBrowserEventDataToVwf( eventPosition, stage ) ];
- var eventDataElement = returnData.eventData[ 0 ];
- eventDataElement.button = e.evt.button;
- eventDataElement.timeStamp = e.evt.timeStamp;
- eventDataElement.shiftKey = e.evt.shiftKey;
- eventDataElement.ctrlKey = e.evt.ctrlKey;
- eventDataElement.altKey = e.evt.altKey;
- eventDataElement.metaKey = e.evt.metaKey;
- if ( isTouchEvent ) {
- returnData.eventData[ 0 ].touches = [];
- for ( var i = 0; i < e.evt.touches.length; i++ ) {
- returnData.eventData[ 0 ].touches[ i ] = convertBrowserEventDataToVwf(
- e.evt.touches[ i ],
- stage
- );
- }
- }
- if ( propagate ) {
- var stageId = stage && stage.getId();
- var pointerPickID = e.targetNode ? e.targetNode.getId() : stageId;
- returnData.eventNodeData = { "": [ {
- pickID: pointerPickID,
- } ] };
- if ( self && self.state.nodes[ pointerPickID ] ) {
- var childID = pointerPickID;
- var child = self.state.nodes[ childID ];
- var parentID = child.parentID;
- var parent = self.state.nodes[ child.parentID ];
- while ( child ) {
- returnData.eventNodeData[ childID ] = [ {
- pickID: pointerPickID,
- } ];
- childID = parentID;
- child = self.state.nodes[ childID ];
- parentID = child ? child.parentID : undefined;
- parent = parentID ? self.state.nodes[ child.parentID ] : undefined;
- }
- }
- }
- return returnData;
- }
- function convertBrowserEventDataToVwf( browserEventData, stage ) {
- var vwfEventData = {
- "location": [ browserEventData.x, browserEventData.y ],
- "stageRelative": [ browserEventData.pageX, browserEventData.pageY ],
- "client": [ browserEventData.clientX, browserEventData.clientY ],
- "screen": [ browserEventData.screenX, browserEventData.screenY ],
- "layer": [ browserEventData.layerX, browserEventData.layerY ],
- "page": [ browserEventData.pageX, browserEventData.pageY ],
- "offset": [ browserEventData.offsetX, browserEventData.offsetY ],
- "movement": [ browserEventData.webkitMovementX, browserEventData.webkitMovementY ]
- };
- if ( stage ) {
- vwfEventData.stage = [ stage.x(), stage.y() ];
- vwfEventData.stageRelative = [
- ( browserEventData.pageX - stage.x() ) / stage.scaleX(),
- ( browserEventData.pageY - stage.y() ) / stage.scaleY()
- ];
- }
- return vwfEventData;
- }
- function attachMouseEvents( node ) {
- var mouseDown = false;
- node.kineticObj.on( "mousemove", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'pointerMove', eData.eventData );
- } );
- node.kineticObj.on( "mouseout", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'pointerOut', eData.eventData );
- } );
- node.kineticObj.on( "mouseenter", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'pointerEnter', eData.eventData );
- } );
- node.kineticObj.on( "mouseleave", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'pointerLeave', eData.eventData );
- } );
- node.kineticObj.on( "mousedown", function( evt ) {
- var eData = processEvent( evt, node, false );
- mouseDown = true;
- self.kernel.fireEvent( node.ID, 'pointerDown', eData.eventData );
- } );
- node.kineticObj.on( "mouseup", function( evt ) {
- var eData = processEvent( evt, node, false );
- mouseDown = false;
- self.kernel.fireEvent( node.ID, 'pointerUp', eData.eventData );
- if ( node.kineticObj.mouseDragging ) {
- self.kernel.fireEvent( node.ID, 'dragEnd', eData.eventData );
- node.kineticObj.mouseDragging = false;
- }
- } );
- node.kineticObj.on( "click", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'pointerClick', eData.eventData );
- } );
- node.kineticObj.on( "dblclick", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'pointerDoubleClick', eData.eventData );
- } );
- node.kineticObj.on( "dragstart", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'dragStart', eData.eventData );
- node.kineticObj.mouseDragging = true;
- } );
- node.kineticObj.on( "dragmove", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'dragMove', eData.eventData );
- } );
- }
- function attachTouchEvents( node ) {
- var TOUCH_EVENT = true;
- node.kineticObj.on( "touchstart", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'touchStart', eData.eventData );
- } );
- node.kineticObj.on( "touchmove", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'touchMove', eData.eventData );
- } );
- node.kineticObj.on( "touchend", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'touchEnd', eData.eventData );
- } );
- node.kineticObj.on( "tap", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'tap', eData.eventData );
- } );
- node.kineticObj.on( "dbltap", function( evt ) {
- var eData = processEvent( evt, node, false );
- self.kernel.fireEvent( node.ID, 'doubleTap', eData.eventData );
- } );
- }
- return view.load( module, {
- initialize: function( options ) {
-
- self = this;
- this.arguments = Array.prototype.slice.call( arguments );
- this.options = options || {};
- if ( window && window.innerWidth ) {
- stageWidth = window.innerWidth - 20;
- }
- if ( window && window.innerHeight ) {
- stageHeight = window.innerHeight - 20;
- }
- stageContainer = this.options.container || 'vwf-root';
- stageWidth = this.options.width || stageWidth;
- stageHeight = this.options.height || stageHeight;
- },
- createdNode: function( nodeID, childID, childExtendsID, childImplementsIDs,
- childSource, childType, childIndex, childName, callback ) {
-
- var node = this.state.nodes[ childID ];
-
-
-
- if ( !node ) {
- return;
- }
- var protos = node.prototypes;
- if ( self.state.isKineticClass( protos, [ "kinetic", "stage", "vwf" ] ) ) {
-
- var stage = this.state.stage = node.kineticObj;
-
- }
-
- },
- initializedNode: function( nodeID, childID, childExtendsID, childImplementsIDs,
- childSource, childType, childIndex, childName, callback ) {
-
- var node = this.state.nodes[ childID ];
-
-
-
- if ( !node ) {
-
-
- return;
- }
- if ( node.kineticObj ) {
-
- vwf_view.kernel.getProperty( childID, "supportMouseEvents" );
- vwf_view.kernel.getProperty( childID, "supportTouchEvents" );
- }
- },
-
-
-
-
-
-
-
-
-
-
-
-
-
- satProperty: function( nodeID, propertyName, propertyValue ) {
-
- var node = this.state.nodes[ nodeID ];
-
- if ( !( node && node.kineticObj ) ) {
- return;
- }
- var kineticObj = node.kineticObj;
- switch ( propertyName ) {
- case "supportMouseEvents":
- if ( propertyValue === true ) {
- attachMouseEvents( node );
- }
- break;
-
- case "supportTouchEvents":
- if ( propertyValue === true ) {
- attachTouchEvents( node );
- }
- break;
-
- case "enableEvents":
- var mouseDown = false;
- var touch = false;
- var mouseDownTime = null;
- var mouseDownId = undefined;
- var touchId = undefined;
- var timer = new Date();
- var protos = node.prototypes;
- if ( self.state.isKineticClass( protos, [ "kinetic", "stage", "vwf" ] ) ) {
- var stage = kineticObj;
- var TOUCH_EVENT = true;
-
-
-
-
-
-
-
- if ( Boolean( propertyValue ) ) {
-
- stage.on( 'contentMousedown', function( evt ) {
- var node = evt.targetNode;
- mouseDownId = ( node !== undefined ) ? node.getId() : stage.getId();
- mouseDown = true;
- mouseDownTime = timer.getTime();
- var eData = processEvent( evt, self.state.nodes[ mouseDownId ], true );
- self.kernel.dispatchEvent( mouseDownId, 'pointerDown', eData.eventData, eData.eventNodeData );
- });
- stage.on( 'contentMousemove', function( evt ) {
- var node = evt.targetNode;
-
- var eData = processEvent( evt, self.state.nodes[ mouseDownId ], true );
- self.kernel.dispatchEvent( mouseDownId ? mouseDownId : stage.getId(), 'pointerMove', eData.eventData, eData.eventNodeData );
- });
- stage.on( 'contentMouseup', function( evt ) {
- var node = evt.targetNode;
- mouseDown = false;
- var eData = processEvent( evt, self.state.nodes[ mouseDownId ], true );
- if ( timer.getTime() - mouseDownTime < 700.0 ) {
- self.kernel.dispatchEvent( mouseDownId, 'pointerClick', eData.eventData, eData.eventNodeData );
- }
- self.kernel.dispatchEvent( mouseDownId ? mouseDownId : stage.getId(), 'pointerUp', eData.eventData, eData.eventNodeData );
- mouseDownTime = null;
- mouseDownId = null;
- } );
-
- } else {
-
- stage.off( 'contentMousedown' );
- stage.off( 'contentMousemove' );
- stage.off( 'contentMouseup' );
-
-
-
-
- }
- }
- break;
- case "scale":
- if ( !node.uniqueInView ) {
- kineticObj.scale( {
- "x": kineticObj.modelScaleX,
- "y": kineticObj.modelScaleY
- } );
- }
- break;
- case "scaleX":
- if ( !node.uniqueInView ) {
- kineticObj.scaleX( kineticObj.modelScaleX );
- }
- break;
- case "scaleY":
- if ( !node.uniqueInView ) {
- kineticObj.scaleY( kineticObj.modelScaleY );
- }
- break;
- }
- },
- gotProperty: function( nodeID, propertyName, propertyValue ) {
-
- var node = this.state.nodes[ nodeID ];
- var eventsAdded = false;
-
- if ( !( node && node.kineticObj ) ) {
- return eventsAdded;
- }
- switch ( propertyName ) {
- case "supportMouseEvents":
- if ( ( propertyValue === true ) && ( !node.hasMouseEvents ) ) {
- attachMouseEvents( node );
- node.hasMouseEvents = true;
- eventsAdded = node.hasMouseEvents;
- }
- break;
-
- case "supportTouchEvents":
- if ( ( propertyValue === true ) && ( !node.hasTouchEvents ) ) {
- attachTouchEvents( node );
- node.hasTouchEvents = true;
- eventsAdded = node.hasTouchEvents;
- }
- break;
- default:
- break;
- }
- return eventsAdded;
- },
- firedEvent: function( nodeID, eventName ) {
- if ( eventName == "draggingFromView" ) {
- var clientThatSatProperty = self.kernel.client();
- var me = self.kernel.moniker();
-
- if ( clientThatSatProperty == me ) {
-
-
-
-
- var node = this.state.nodes[ nodeID ];
- node.viewIgnoreNextPositionUpdate = true;
- }
- }
- },
- ticked: function( vwfTime ) {
- var nodeIDs = Object.keys( this.state.nodes );
- for ( var i = 0; i < nodeIDs.length; i++ ) {
- var nodeID = nodeIDs[ i ];
- var node = this.state.nodes[ nodeID ];
-
-
- if ( node.kineticObj.draggable() && !node.uniqueInView ) {
- var kineticX = node.kineticObj.x();
- var kineticY = node.kineticObj.y();
-
-
- if ( ( node.kineticObj.modelX !== kineticX ) ||
- ( node.kineticObj.modelY !== kineticY ) ) {
-
-
-
-
- vwf_view.kernel.fireEvent( nodeID, "draggingFromView" );
- vwf_view.kernel.setProperty( nodeID, "position", [ kineticX, kineticY ] );
- }
- }
- }
- for ( var id in self.state.stages ){
- renderScene( self.state.stages[ id ] );
- }
-
- }
-
-
- } );
- function renderScene( stage ) {
-
- if ( stage !== undefined ) {
- stage.batchDraw();
- }
- }
- });
|