define(["sugar-web/env", "webL10n"], function (env, webL10n) { var connectedPeople = {}; var xoLogo = ']>'; var language; window.addEventListener('localized', function(e) { if (e.language != language) { setTimeout(function() { webL10n.language.code = language; }, 50); } }); env.getEnvironment(function(err, environment) { var defaultLanguage = (typeof chrome != 'undefined' && chrome.app && chrome.app.runtime) ? chrome.i18n.getUILanguage() : navigator.language; language = environment.user ? environment.user.language : defaultLanguage; webL10n.language.code = language; }); function generateXOLogoWithColor(color) { var coloredLogo = xoLogo; coloredLogo = coloredLogo.replace("#010101", color.stroke) coloredLogo = coloredLogo.replace("#FFFFFF", color.fill) return "data:image/svg+xml;base64," + btoa(coloredLogo); } function displayConnectedPeopleHtml() { var presenceUsersDiv = document.getElementById("presence-users"); var html = "
" presenceUsersDiv.innerHTML = html } function displayConnectedPeople(users) { var presenceUsersDiv = document.getElementById("presence-users"); if (!users || !presenceUsersDiv) { return; } connectedPeople = {}; PaintApp.data.presence.listSharedActivityUsers(PaintApp.data.presence.getSharedInfo().id, function(usersConnected) { connectedPeople = {}; for (var i = 0; i < usersConnected.length; i++) { var userConnected = usersConnected[i]; connectedPeople[userConnected.networkId] = userConnected; } displayConnectedPeopleHtml(); }); } /* Function to handle user enter/exit */ function onSharedActivityUserChanged(msg) { var userName = msg.user.name.replace('<', '<').replace('>', '>'); var html = "" if (msg.move === 1) { PaintApp.libs.humane.log(html + webL10n.get("PlayerJoin",{user: userName})) } if (msg.move === -1) { PaintApp.libs.humane.log(html + webL10n.get("PlayerLeave",{user: userName})) } PaintApp.data.presence.listSharedActivities(function(activities) { for (var i = 0; i < activities.length; i++) { if (activities[i].id === PaintApp.data.presence.getSharedInfo().id) { displayConnectedPeople(activities[i].users); } } }); } function sendMessage(content) { var sharedId = window.top.sugar.environment.sharedId; if (!sharedId) { sharedId = PaintApp.data.presence.getSharedInfo().id } PaintApp.data.presence.sendMessage(sharedId, { user: PaintApp.data.presence.getUserInfo(), content: content }); } /* Enabling an activity to be shared with the presenceObject */ function shareActivity() { var activity = PaintApp.libs.activity; PaintApp.data.presence = activity.getPresenceObject(function(error, presence) { // Unable to join if (error) { console.log("error"); return; } PaintApp.data.isShared = true; // Store settings userSettings = presence.getUserInfo(); console.log("connected"); // Not found, create a new shared activity if (!window.top.sugar.environment.sharedId) { presence.createSharedActivity('org.olpcfrance.PaintActivity', function(groupId) {}); } // Show a disconnected message when the WebSocket is closed. presence.onConnectionClosed(function(event) { console.log(event); console.log("Connection closed"); }); // Display connection changed presence.onSharedActivityUserChanged(function(msg) { onSharedActivityUserChanged(msg); }); // Handle messages received presence.onDataReceived(PaintApp.collaboration.onDataReceived); if (!PaintApp.data.isHost) { var lookForOtherUsersInterval = setInterval(function() { if (!PaintApp.data.presence.sharedInfo.users) { return; } displayConnectedPeople(); if (!PaintApp.data.requestedData) { PaintApp.data.requestedData = true; sendMessage({ action: "entranceToDataURLRequest " + PaintApp.data.presence.sharedInfo.users[0] }) } clearInterval(lookForOtherUsersInterval) }, 500); } }); } function compress(data) { if (PaintApp.data.isCompressEnabled) { return PaintApp.libs.lzstring.compressToUTF16(data); } return data; } function decompress(data) { if (PaintApp.data.isCompressEnabled) { return PaintApp.libs.lzstring.decompressFromUTF16(data); } return data; } function handlePath(msg) { ctx = PaintApp.elements.canvas.getContext('2d'); ctx.beginPath(); ctx.strokeStyle = msg.content.data.strokeStyle; ctx.lineCap = msg.content.data.lineCap; ctx.lineWidth = msg.content.data.lineWidth; ctx.moveTo(msg.content.data.from.x, msg.content.data.from.y); ctx.lineTo(msg.content.data.to.x, msg.content.data.to.y); ctx.stroke(); } function handleText(msg) { ctx = PaintApp.elements.canvas.getContext('2d'); ctx.font = msg.content.data.font; ctx.fillStyle = msg.content.data.fillStyle; ctx.textAlign = msg.content.data.textAlign; ctx.fillText(msg.content.data.text, msg.content.data.left, msg.content.data.top); } function handleDrawImage(msg) { ctx = PaintApp.elements.canvas.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, msg.content.data.left, msg.content.data.top, msg.content.data.width, msg.content.data.height); }; img.src = msg.content.data.src; } function handleDrawStamp(msg) { var platform = 'webkit'; var isFirefox = typeof InstallTrigger !== 'undefined'; if (isFirefox) { platform = 'gecko'; } ctx = PaintApp.elements.canvas.getContext('2d'); var stampURL = msg.content.data.stampBase.replace('{platform}', platform); var url = window.location.href.split('/'); url.pop(); url = url.join('/') + '/' + stampURL; var request = new XMLHttpRequest(); request.open('GET', url, true); request.onload = function(e) { if (request.status === 200 || request.status === 0) { var stamp = PaintApp.modes.Stamp.changeColors(request.responseText, msg.content.data.color.fill, msg.content.data.color.stroke); var img = new Image(); img.onload = function() { ctx.drawImage(img, msg.content.data.left, msg.content.data.top, msg.content.data.width, msg.content.data.height); }; img.src = 'data:image/svg+xml;base64,' + btoa(stamp); } }; request.send(null); } function handleEntranceToDataURL(msg) { PaintApp.data.entranceToDataURL = true; PaintApp.clearCanvas(); img = new Image(); img.onload = function() { PaintApp.elements.canvas.getContext('2d').drawImage(img, 0, 0, msg.content.data.width, msg.content.data.height); }; img.src = decompress(msg.content.data.src); } function handleToDataURL(msg) { PaintApp.clearCanvas(); img = new Image(); img.onload = function() { PaintApp.elements.canvas.getContext('2d').drawImage(img, 0, 0, msg.content.data.width, msg.content.data.height); }; img.src = decompress(msg.content.data.src); } function handleClearCanvas(msg) { PaintApp.clearCanvas(); } function handleSaveCanvas(msg) { if (PaintApp.data.isHost) { PaintApp.saveCanvas(); } } function handleEntranceToDataURLRequest(msg) { try { PaintApp.data.presence.sendMessage(PaintApp.data.presence.getSharedInfo().id, { user: PaintApp.data.presence.getUserInfo(), content: { action: 'entranceToDataURL', data: { width: PaintApp.elements.canvas.width / window.devicePixelRatio, height: PaintApp.elements.canvas.height / window.devicePixelRatio, src: compress(PaintApp.elements.canvas.toDataURL()) } } }); } catch (e) {} } /* Handle data reception in shared activity */ function onDataReceived(msg) { /* Ignore messages coming from ourselves */ if (PaintApp.data.presence.getUserInfo().networkId === msg.user.networkId) { return; } PaintApp.tmp = msg; var userName = msg.user.name.replace('<', '<').replace('>', '>'); var me = 'entranceToDataURLRequest ' + PaintApp.data.presence.getUserInfo().networkId switch (msg.content.action) { /* Request to draw points/line */ case 'path': handlePath(msg) break; /* Request to draw text */ case 'text': handleText(msg) break; /* Request to draw image */ case 'drawImage': handleDrawImage(msg) break; /* Request to draw stamp */ case 'drawStamp': handleDrawStamp(msg) break; case me: handleEntranceToDataURLRequest(msg) break; /* When entering inside the collaboration mode this message will be used to get the current paint */ case 'entranceToDataURL': handleEntranceToDataURL(msg) break; /* Request to redraw the canvas */ case 'toDataURL': handleToDataURL(msg) break; /* Request to clear the canvas */ case 'clearCanvas': handleClearCanvas(msg) break; /* Request to save the canvas */ case 'saveCanvas': handleSaveCanvas(msg) break; } } return { onDataReceived: onDataReceived, compress: compress, decompress: decompress, shareActivity: shareActivity, sendMessage: sendMessage, displayConnectedPeople: displayConnectedPeople } })