Skip to content

Commit

Permalink
Resolved issue aullman#12: Added Undo Redo Events to Whiteboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@sumansaurabh
sumansaurabh committed Aug 22, 2015
1 parent 24e626a commit b23b20c
Showing 1 changed file with 100 additions and 9 deletions.
109 changes: 100 additions & 9 deletions opentok-whiteboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ var OpenTokWhiteboard = angular.module('opentok-whiteboard', ['opentok'])

'<input type="button" ng-click="capture()" class="OT_capture" value="{{captureText}}"></input>' +

'<input type="button" ng-click="undo()" class="OT_capture" value="Undo"></input>' +

'<input type="button" ng-click="redo()" class="OT_capture" value="Redo"></input>' +

'<input type="button" ng-click="clear()" class="OT_clear" value="Clear"></input>',

link: function (scope, element, attrs) {
Expand All @@ -33,6 +37,10 @@ var OpenTokWhiteboard = angular.module('opentok-whiteboard', ['opentok'])
input = element.context.querySelector("input"),
client = {dragging:false},
ctx,
start = 0, //Grabs the end position of each stroke
count = 0, //Grabs the total count of each continuous stroke
undoStack = [], //Stores the value of start and count for each continuous stroke
redoStack = [], //When undo pops, data is sent to redoStack
drawHistory = [],
drawHistoryReceivedFrom,
drawHistoryReceived,
Expand Down Expand Up @@ -60,8 +68,15 @@ var OpenTokWhiteboard = angular.module('opentok-whiteboard', ['opentok'])

// Restore the transform
ctx.restore();
drawHistory = [];
};

var clearStack = function () {
drawHistory = [];
undoStack = [];
redoStack = [];
start = 0;
count = 0;
}

scope.changeColor = function (color) {
scope.color = color['background-color'];
Expand Down Expand Up @@ -96,12 +111,52 @@ var OpenTokWhiteboard = angular.module('opentok-whiteboard', ['opentok'])
}
};

scope.undo = function () {
if (!undoStack.length)
return;
var undodata = undoStack.pop();
undoWhiteBoard(undodata);
redoStack.push(undodata);
sendUpdate('otWhiteboard_undo', undodata);
};

var undoWhiteBoard = function (data) {
for (i = data.start - data.count; i < data.start; i++) {
drawHistory[i].show = 0;
}
clearCanvas();
drawHistory.forEach(function (update) {
draw(update);
});
};

scope.redo = function () {
if (!redoStack.length)
return;
var redodata = redoStack.pop();
redoWhiteBoard(redodata);
undoStack.push(redodata);
sendUpdate('otWhiteboard_redo', redodata);
};

var redoWhiteBoard = function (data) {
for (i = data.start - data.count; i < data.start; i++) {
drawHistory[i].show = 1;
}
clearCanvas();
drawHistory.forEach(function (update) {
draw(update);
});
};

var draw = function (update) {
if (!ctx) {
ctx = canvas.getContext("2d");
ctx.lineCap = "round";
ctx.fillStyle = "solid";
}
if (!update.show)
return;
if(update.mode=="pen"){
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = update.color;
Expand All @@ -119,13 +174,12 @@ var OpenTokWhiteboard = angular.module('opentok-whiteboard', ['opentok'])
ctx.lineTo(update.toX, update.toY);
ctx.stroke();
}

drawHistory.push(update);
};

var drawUpdates = function (updates) {
updates.forEach(function (update) {
draw(update);
drawHistory.push(update);
});
};

Expand All @@ -150,22 +204,31 @@ var OpenTokWhiteboard = angular.module('opentok-whiteboard', ['opentok'])
};

var updateTimeout;
var sendUpdate = function (update) {
var sendUpdate = function (type, update) {
if (OTSession.session) {
batchUpdates.push(update);
if (!updateTimeout) {
updateTimeout = setTimeout(function () {
batchSignal('otWhiteboard_update', batchUpdates);
batchSignal(type, batchUpdates);
batchUpdates = [];
updateTimeout = null;
}, 100);
}
}
};

angular.element(canvas).on('mousedown mousemove mouseup mouseout touchstart touchmove touchend',
angular.element(document).on('keyup', function (event) {
if (event.ctrlKey) {
if (event.keyCode === 90)
scope.undo();
if (event.keyCode === 89)
scope.redo();
}
});

angular.element(canvas).on('mousedown mousemove mouseup mouseout touchstart touchmove touchend touchcancel',
function (event) {
if (event.type === 'mousemove' && !client.dragging) {
if ((event.type === 'mousemove'|| event.type === 'touchmove') && !client.dragging) {
// Ignore mouse move Events if we're not dragging
return;
}
Expand Down Expand Up @@ -208,19 +271,31 @@ var OpenTokWhiteboard = angular.module('opentok-whiteboard', ['opentok'])
toY: y,
mode: mode,
color: scope.color,
lineWidth: scope.lineWidth
lineWidth: scope.lineWidth,
show: 1
};
count++;
redoStack = [];
draw(update);
drawHistory.push(update);
client.lastX = x;
client.lastY = y;
sendUpdate(update);
sendUpdate('otWhiteboard_update', update);
}
break;
case 'touchcancel':
case 'mouseup':
case 'touchend':
case 'mouseout':
client.dragging = false;
if (count) {
start = drawHistory.length;
undoStack.push({
start: start,
count: count
});
count = 0;
}
}
});

Expand All @@ -232,6 +307,22 @@ var OpenTokWhiteboard = angular.module('opentok-whiteboard', ['opentok'])
scope.$emit('otWhiteboardUpdate');
}
},
'signal:otWhiteboard_undo': function (event) {
if (event.from.connectionId !== OTSession.session.connection.connectionId) {
JSON.parse(event.data).forEach(function (data) {
undoWhiteBoard(data);
});
scope.$emit('otWhiteboardUpdate');
}
},
'signal:otWhiteboard_redo': function (event) {
if (event.from.connectionId !== OTSession.session.connection.connectionId) {
JSON.parse(event.data).forEach(function (data) {
redoWhiteBoard(data);
});
scope.$emit('otWhiteboardUpdate');
}
},
'signal:otWhiteboard_history': function (event) {
// We will receive these from everyone in the room, only listen to the first
// person. Also the data is chunked together so we need all of that person's
Expand Down

0 comments on commit b23b20c

Please sign in to comment.