Skip to content

Commit

Permalink
Merge pull request #333 from virtual-world-framework/branch/kinetic-t…
Browse files Browse the repository at this point in the history 
…ouch

Branch/kinetic touch
  • Loading branch information
@scottnc27603
scottnc27603 committed Sep 2, 2014
2 parents 8eb6666 + fa1ee07 commit 36ceba7
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 105 deletions.
56 changes: 40 additions & 16 deletions support/client/lib/vwf/model/kineticjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/utility/color" ], function(
"type": childType,
"name": childName,
"prototypes": undefined,
"kineticObj": undefined
"kineticObj": undefined,
"stage": undefined
};
},
isKineticClass: function( prototypes, classIDArray ) {
Expand Down Expand Up @@ -137,16 +138,8 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/utility/color" ], function(
// kinetic container
// (if a kinteticObj is created asynchronously ... like an Image, it will be
// undefined here, but will be added to its parent in the appropriate callback)
if ( node.kineticObj ) {
if ( this.state.nodes[ nodeID ] !== undefined ) {
var parent = this.state.nodes[ nodeID ];
if ( parent.kineticObj && isContainerDefinition( parent.prototypes ) ) {

//console.info( "Adding child: " + childID + " to " + nodeID );
parent.kineticObj.add( node.kineticObj );
}
}
}
addNodeToHierarchy( node );

}

},
Expand Down Expand Up @@ -2039,16 +2032,13 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/utility/color" ], function(
node.kineticObj = new Kinetic.Image( {
image: imageObj,
} );
var parent = self.state.nodes[ node.parentID ];
if ( parent && parent.kineticObj && isContainerDefinition( parent.prototypes ) ) {
parent.kineticObj.add( node.kineticObj );
}
addNodeToHierarchy( node );
};
imageObj.src = node.source;
} else if ( self.state.isKineticClass( protos, [ "kinetic", "layer", "vwf" ] ) ) {
kineticObj = new Kinetic.Layer( config || {} );
} else if ( self.state.isKineticClass( protos, [ "kinetic", "line", "vwf" ] ) ) {
kineticObj = new Kinetic.Line( config || {} );
kineticObj = new Kinetic.Line( config || { "points": [] } );
} else if ( self.state.isKineticClass( protos, [ "kinetic", "path", "vwf" ] ) ) {
kineticObj = new Kinetic.Path( config || {} );
} else if ( self.state.isKineticClass( protos, [ "kinetic", "rect", "vwf" ] ) ) {
Expand Down Expand Up @@ -2102,6 +2092,40 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/utility/color" ], function(
return kineticObj;
}

function findStage( kineticObj ) {

var stage = undefined
var parent = kineticObj;
while ( parent !== undefined && stage === undefined ) {
if ( parent.nodeType === "Stage" ) {
stage = parent;
}
parent = parent.parent;
}
return stage;

}

function addNodeToHierarchy( node ) {

if ( node.kineticObj ) {
if ( self.state.nodes[ node.parentID ] !== undefined ) {
var parent = self.state.nodes[ node.parentID ];
if ( parent.kineticObj && isContainerDefinition( parent.prototypes ) ) {

if ( parent.children === undefined ) {
parent.children = [];
}
parent.children.push( node.ID );
//console.info( "Adding child: " + childID + " to " + nodeID );
parent.kineticObj.add( node.kineticObj );
}
}
node.stage = findStage( node.kineticObj );
}

}

function isStageDefinition( prototypes ) {
var found = false;
if ( prototypes ) {
Expand Down
46 changes: 26 additions & 20 deletions support/client/lib/vwf/view/kineticjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ define( [ "module", "vwf/view", "jquery", "vwf/utility", "vwf/utility/color" ],
var stageWidth = 800;
var stageHeight = 600;

var processEvent = function( e, isTouchEvent, propagate ) {
var processEvent = function( e, node, isTouchEvent, propagate ) {
var returnData = { eventData: undefined, eventNodeData: undefined };

if ( !propagate ) {
Expand All @@ -26,6 +26,7 @@ define( [ "module", "vwf/view", "jquery", "vwf/utility", "vwf/utility/color" ],
"button": e.evt.button,
"timeStamp": e.evt.timeStamp,
"location": [ eventPosition.x, eventPosition.y ],
"stage": [ 0, 0 ],
"client": [ eventPosition.clientX, eventPosition.clientY ],
"screen": [ eventPosition.screenX, eventPosition.screenY ],
"layer": [ eventPosition.layerX, eventPosition.layerY ],
Expand All @@ -38,6 +39,10 @@ define( [ "module", "vwf/view", "jquery", "vwf/utility", "vwf/utility/color" ],
"metaKey": e.evt.metaKey
} ];

if ( node && node.stage ) {
returnData.eventData.stage = [ node.stage.x, node.stage.y ];
}

if ( propagate ) {

var pointerPickID = e.targetNode ? e.targetNode.getId() : stage.getId();
Expand Down Expand Up @@ -132,98 +137,98 @@ define( [ "module", "vwf/view", "jquery", "vwf/utility", "vwf/utility/color" ],
var TOUCH_EVENT = true;

node.kineticObj.on( "mousemove", function( evt ) {
var eData = processEvent( evt, !TOUCH_EVENT, false );
var eData = processEvent( evt, node, !TOUCH_EVENT, false );
//self.kernel.dispatchEvent( node.ID, 'pointerMove', eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'pointerMove', eData.eventData );
} );

node.kineticObj.on( "mouseout", function( evt ) {
var eData = processEvent( evt, !TOUCH_EVENT, false );
var eData = processEvent( evt, node, !TOUCH_EVENT, false );
self.kernel.fireEvent( node.ID, 'pointerOut', eData.eventData );
} );

node.kineticObj.on( "mouseenter", function( evt ) {
var eData = processEvent( evt, !TOUCH_EVENT, false );
var eData = processEvent( evt, node, !TOUCH_EVENT, false );
//self.kernel.dispatchEvent( node.ID, 'pointerEnter', eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'pointerOut', eData.eventData );
} );

node.kineticObj.on( "mouseleave", function( evt ) {
var eData = processEvent( evt, !TOUCH_EVENT, false );
var eData = processEvent( evt, node, !TOUCH_EVENT, false );
// self.kernel.dispatchEvent( node.ID, 'pointerLeave', eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'pointerLeave', eData.eventData );
} );

node.kineticObj.on( "mousedown", function( evt ) {
var eData = processEvent( evt, !TOUCH_EVENT, false );
var eData = processEvent( evt, node, !TOUCH_EVENT, false );
mouseDown = true;
//self.kernel.dispatchEvent( node.ID, 'pointerDown', eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'pointerDown', eData.eventData );
} );

node.kineticObj.on( "mouseup", function( evt ) {
var eData = processEvent( evt, !TOUCH_EVENT, false );
var eData = processEvent( evt, node, !TOUCH_EVENT, false );
mouseDown = false;
//self.kernel.dispatchEvent( node.ID, 'pointerUp', eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'pointerUp', eData.eventData );
} );

node.kineticObj.on( "click", function( evt ) {
var eData = processEvent( evt, !TOUCH_EVENT, false );
var eData = processEvent( evt, node, !TOUCH_EVENT, false );
//self.kernel.dispatchEvent( node.ID, 'pointerClick', eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'pointerClick', eData.eventData );
} );

node.kineticObj.on( "dblclick", function( evt ) {
var eData = processEvent( evt, !TOUCH_EVENT, false );
var eData = processEvent( evt, node, !TOUCH_EVENT, false );
//self.kernel.dispatchEvent( node.ID, 'pointerDoubleClick', eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'pointerDoubleClick', eData.eventData );
} );

node.kineticObj.on( "touchstart", function( evt ) {
var eData = processEvent( evt, TOUCH_EVENT, false );
var eData = processEvent( evt, node, TOUCH_EVENT, false );
//self.kernel.dispatchEvent( node.ID, "touchStart", eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'touchStart', eData.eventData );
} );

node.kineticObj.on( "touchmove", function( evt ) {
var eData = processEvent( evt, TOUCH_EVENT, false );
var eData = processEvent( evt, node, TOUCH_EVENT, false );
//self.kernel.dispatchEvent( node.ID, "touchMove", eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'touchMove', eData.eventData );
} );

node.kineticObj.on( "touchend", function( evt ) {
var eData = processEvent( evt, TOUCH_EVENT, false );
var eData = processEvent( evt, node, TOUCH_EVENT, false );
//self.kernel.dispatchEvent( node.ID, "touchEnd", eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'touchEnd', eData.eventData );
} );

node.kineticObj.on( "tap", function( evt ) {
var eData = processEvent( evt, TOUCH_EVENT, false );
var eData = processEvent( evt, node, TOUCH_EVENT, false );
//self.kernel.dispatchEvent( node.ID, "tap", eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'tap', eData.eventData );
} );

node.kineticObj.on( "dbltap", function( evt ) {
var eData = processEvent( evt, TOUCH_EVENT, node );
var eData = processEvent( evt, node, TOUCH_EVENT, node );
//self.kernel.dispatchEvent( node.ID, "dragStart", eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'dragStart', eData.eventData );
} );

node.kineticObj.on( "dragstart", function( evt ) {
var eData = processEvent( evt, undefined, false );
var eData = processEvent( evt, node, undefined, false );
//self.kernel.dispatchEvent( node.ID, "dragStart", eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'dragStart', eData.eventData );
} );

node.kineticObj.on( "dragmove", function( evt ) {
var eData = processEvent( evt, undefined, false );
var eData = processEvent( evt, node, undefined, false );
//self.kernel.dispatchEvent( node.ID, "dragMove", eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'dragMove', eData.eventData );
} );

node.kineticObj.on( "dragend", function( evt ) {
var eData = processEvent( evt, undefined, false );
var eData = processEvent( evt, node, undefined, false );
//self.kernel.dispatchEvent( node.ID, "dragEnd", eData.eventData, eData.eventNodeData );
self.kernel.fireEvent( node.ID, 'dragEnd', eData.eventData );
} );
Expand Down Expand Up @@ -272,6 +277,7 @@ define( [ "module", "vwf/view", "jquery", "vwf/utility", "vwf/utility/color" ],
if ( self.state.isKineticClass( protos, [ "kinetic", "stage", "vwf" ] ) ) {

var stage = node.kineticObj;
var TOUCH_EVENT = true;

// these are the events for the global space, ie the stage
// we did originally implement the mouse events this way
Expand All @@ -289,15 +295,15 @@ define( [ "module", "vwf/view", "jquery", "vwf/utility", "vwf/utility/color" ],
mouseDownId = ( node !== undefined ) ? node.getId() : stage.getId();
mouseDown = true;
mouseDownTime = timer.getTime();
var eData = processEvent( evt, true ); // false might be more corret here
var eData = processEvent( evt, self.state.nodes[ mouseDownId ], !TOUCH_EVENT, true ); // false might be more corret here

self.kernel.dispatchEvent( mouseDownId, 'pointerDown', eData.eventData, eData.eventNodeData );
});

stage.on( 'contentMousemove', function( evt ) {
var node = evt.targetNode;

var eData = processEvent( evt, true ); // false might be more corret here
var eData = processEvent( evt, self.state.nodes[ mouseDownId ], !TOUCH_EVENT, true ); // false might be more corret here

self.kernel.dispatchEvent( mouseDownId ? mouseDownId : stage.getId(), 'pointerMove', eData.eventData, eData.eventNodeData );
});
Expand All @@ -306,7 +312,7 @@ define( [ "module", "vwf/view", "jquery", "vwf/utility", "vwf/utility/color" ],
var node = evt.targetNode;
mouseDown = false;

var eData = processEvent( evt, true ); // false might be more corret here
var eData = processEvent( evt, self.state.nodes[ mouseDownId ], !TOUCH_EVENT, true ); // false might be more corret here
if ( timer.getTime() - mouseDownTime < 700.0 ) {
self.kernel.dispatchEvent( mouseDownId, 'pointerClick', eData.eventData, eData.eventNodeData );
}
Expand Down
Loading

0 comments on commit 36ceba7

Please sign in to comment.