You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
717 lines
22 KiB
717 lines
22 KiB
define(["sugar-web/activity/activity","sugar-web/datastore","notepalette","zoompalette","sugar-web/graphics/presencepalette","humane","tutorial","sugar-web/env"], function (activity,datastore,notepalette,zoompalette,presencepalette,humane,tutorial,env) {
|
|
var defaultColor = '#FFF29F';
|
|
var isShared = false;
|
|
var isHost = false;
|
|
var network = null;
|
|
var connectedPeople = {};
|
|
var xoLogo = '<?xml version="1.0" ?><!DOCTYPE svg PUBLIC \'-//W3C//DTD SVG 1.1//EN\' \'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\' [<!ENTITY stroke_color "#010101"><!ENTITY fill_color "#FFFFFF">]><svg enable-background="new 0 0 55 55" height="55px" version="1.1" viewBox="0 0 55 55" width="55px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g display="block" id="stock-xo_1_"><path d="M33.233,35.1l10.102,10.1c0.752,0.75,1.217,1.783,1.217,2.932 c0,2.287-1.855,4.143-4.146,4.143c-1.145,0-2.178-0.463-2.932-1.211L27.372,40.961l-10.1,10.1c-0.75,0.75-1.787,1.211-2.934,1.211 c-2.284,0-4.143-1.854-4.143-4.141c0-1.146,0.465-2.184,1.212-2.934l10.104-10.102L11.409,24.995 c-0.747-0.748-1.212-1.785-1.212-2.93c0-2.289,1.854-4.146,4.146-4.146c1.143,0,2.18,0.465,2.93,1.214l10.099,10.102l10.102-10.103 c0.754-0.749,1.787-1.214,2.934-1.214c2.289,0,4.146,1.856,4.146,4.145c0,1.146-0.467,2.18-1.217,2.932L33.233,35.1z" fill="&fill_color;" stroke="&stroke_color;" stroke-width="3.5"/><circle cx="27.371" cy="10.849" fill="&fill_color;" r="8.122" stroke="&stroke_color;" stroke-width="3.5"/></g></svg>';
|
|
|
|
// Manipulate the DOM only when it is ready.
|
|
requirejs(['domReady!'], function (doc) {
|
|
|
|
// Initialize the activity.
|
|
activity.setup();
|
|
|
|
// Handle toolbar mode switch
|
|
var currentMode = 0;
|
|
var nodetextButton = document.getElementById("nodetext-button");
|
|
var removeButton = document.getElementById("delete-button");
|
|
var switchMode = function(newMode) {
|
|
currentMode = newMode;
|
|
nodetextButton.classList.remove('active');
|
|
removeButton.classList.remove('active');
|
|
saveAndFinishEdit();
|
|
if (newMode == 0) nodetextButton.classList.add('active');
|
|
else if (newMode == 1) removeButton.classList.add('active');
|
|
if (lastSelected != null) {
|
|
unselectAllNode();
|
|
lastSelected = null;
|
|
}
|
|
}
|
|
nodetextButton.addEventListener('click', function () { switchMode(0); }, true);
|
|
removeButton.addEventListener('click', function () { switchMode(1); }, true);
|
|
var colorButton = document.getElementById("color-button");
|
|
colorPalette = new notepalette.NotePalette(colorButton);
|
|
colorPalette.setColor('rgb(255, 242, 159)');
|
|
colorPalette.addEventListener('colorChange', function(e) {
|
|
if (isSelectedNode(lastSelected)) {
|
|
pushState({
|
|
redo: {action:"update", id:lastSelected.id(), color: e.detail.color},
|
|
undo: {action:"update", id:lastSelected.id(), color: lastSelected.data('background-color')}
|
|
});
|
|
lastSelected.style('background-color', e.detail.color);
|
|
lastSelected.data('background-color', e.detail.color);
|
|
}
|
|
textValue.style.backgroundColor = e.detail.color;
|
|
defaultColor = e.detail.color;
|
|
});
|
|
var zoomButton = document.getElementById("zoom-button");
|
|
zoomPalette = new zoompalette.zoomPalette(zoomButton);
|
|
zoomPalette.addEventListener('pop', function(e) {
|
|
});
|
|
zoomPalette.addEventListener('zoom', function(e) {
|
|
var action = e.detail.zoom;
|
|
var currentZoom = cy.zoom();
|
|
var zoomStep = 0.25;
|
|
if (action == 0) {
|
|
if (currentZoom != cy.minZoom() && currentZoom-zoomStep > cy.minZoom()) cy.zoom(currentZoom-zoomStep);
|
|
} else if (action == 1) {
|
|
if (currentZoom != cy.maxZoom()) cy.zoom(currentZoom+zoomStep);
|
|
} else if (action == 2) {
|
|
cy.fit();
|
|
} else if (action == 3) {
|
|
cy.center();
|
|
}
|
|
});
|
|
var pngButton = document.getElementById("png-button");
|
|
pngButton.addEventListener('click', function(e) {
|
|
var inputData = cy.png();
|
|
var mimetype = inputData.split(";")[0].split(":")[1];
|
|
var type = mimetype.split("/")[0];
|
|
var metadata = {
|
|
mimetype: mimetype,
|
|
title: type.charAt(0).toUpperCase() + type.slice(1) + " Shared Notes",
|
|
activity: "org.olpcfrance.MediaViewerActivity",
|
|
timestamp: new Date().getTime(),
|
|
creation_time: new Date().getTime(),
|
|
file_size: 0
|
|
};
|
|
datastore.create(metadata, function() {
|
|
console.log("export done.")
|
|
}, inputData);
|
|
});
|
|
var networkButton = document.getElementById("network-button");
|
|
var presence = new presencepalette.PresencePalette(networkButton, undefined);
|
|
|
|
// Handle graph save/world
|
|
var stopButton = document.getElementById("stop-button");
|
|
stopButton.addEventListener('click', function (event) {
|
|
console.log("writing...");
|
|
saveGraph(function (error) {
|
|
if (error === null) {
|
|
console.log("write done.");
|
|
}
|
|
else {
|
|
console.log("write failed.");
|
|
}
|
|
});
|
|
});
|
|
|
|
// --- Node and edge handling functions
|
|
var defaultFontFamily = "Arial";
|
|
var defaultFontSize = 16;
|
|
var lastSelected = null;
|
|
var defaultText = "<Your content>";
|
|
var textValue = document.getElementById("textvalue");
|
|
var draggedPosition = null;
|
|
textValue.addEventListener('click', function (event) {
|
|
saveAndFinishEdit();
|
|
});
|
|
|
|
// Create a new node with text and position
|
|
var createNode = function(id, text, position, color) {
|
|
cy.add({
|
|
group: 'nodes',
|
|
nodes: [
|
|
{
|
|
data: {
|
|
id: id,
|
|
'content': text,
|
|
'color': 'rgb(0, 0, 0)',
|
|
'background-color': color
|
|
},
|
|
position: {
|
|
x: position.x,
|
|
y: position.y
|
|
}
|
|
}
|
|
]
|
|
});
|
|
var newnode = cy.getElementById(id);
|
|
newnode.style({
|
|
'content': text,
|
|
'background-color': color
|
|
});
|
|
newnode.addClass('standard-node');
|
|
return newnode;
|
|
}
|
|
|
|
// Update node text and change size
|
|
var updateNodeText = function(node, text) {
|
|
if (node == null) return;
|
|
var previous = node.data('content');
|
|
if (text === undefined) text = node.style()['content'];
|
|
else node.data('content', text);
|
|
node.style({
|
|
'content': text
|
|
});
|
|
if (previous != text) {
|
|
pushState({
|
|
redo: {action:"update", id:node.id(), text: text},
|
|
undo: {action:"update", id:node.id(), text: previous}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Test if node is selected
|
|
var isSelectedNode = function(node) {
|
|
if (node == null) return false;
|
|
return node.style()['border-style'] == 'dashed';
|
|
}
|
|
|
|
// Set node as selected
|
|
var selectNode = function(node) {
|
|
if (node == null) return;
|
|
node.style({
|
|
'border-color': 'black',
|
|
'border-style': 'dashed',
|
|
'border-width': '4px'
|
|
});
|
|
}
|
|
|
|
// Set node as unselected
|
|
var unselectNode = function(node) {
|
|
if (node == null) return;
|
|
node.style({
|
|
'border-color': 'darkgray',
|
|
'border-style': 'solid',
|
|
'border-width': '1px'
|
|
});
|
|
}
|
|
|
|
// Unselect all node
|
|
var unselectAllNode = function() {
|
|
var nodes = cy.collection("node");
|
|
for (var i = 0 ; i < nodes.length ; i++) {
|
|
unselectNode(nodes[i]);
|
|
}
|
|
}
|
|
|
|
// Delete node, linked edges are removed too
|
|
var deleteNode = function(node) {
|
|
if (node == null) return;
|
|
cy.remove(node);
|
|
}
|
|
|
|
// --- Utility functions
|
|
|
|
// Show edit field
|
|
var showEditField = function(node) {
|
|
var position = node.renderedPosition();
|
|
var zoom = cy.zoom();
|
|
textValue.value = node.data('content');
|
|
textValue.style.visibility = "visible";
|
|
textValue.style.backgroundColor = node.style().backgroundColor;
|
|
var delta = 100 * zoom - 200 * zoom;
|
|
textValue.style.left = (position.x + delta) + "px";
|
|
textValue.style.top = (55 + position.y + delta) + "px";
|
|
textValue.style.width = 190 * zoom + "px";
|
|
textValue.style.height = 190 * zoom + "px";
|
|
if (textValue.value == defaultText)
|
|
textValue.setSelectionRange(0, textValue.value.length);
|
|
else
|
|
textValue.setSelectionRange(textValue.value.length, textValue.value.length);
|
|
textValue.focus();
|
|
}
|
|
|
|
// Hide edit field
|
|
var hideEditField = function() {
|
|
textvalue.style.visibility = "hidden";
|
|
}
|
|
|
|
var saveAndFinishEdit = function() {
|
|
if (lastSelected != null && isSelectedNode(lastSelected)) {
|
|
updateNodeText(lastSelected, textValue.value);
|
|
hideEditField();
|
|
unselectNode(lastSelected);
|
|
}
|
|
}
|
|
|
|
// Get center of drawing zone
|
|
var getCenter = function() {
|
|
var canvas = document.getElementById("canvas");
|
|
var center = {x: canvas.clientWidth/2, y: canvas.clientHeight/2};
|
|
return center;
|
|
}
|
|
|
|
// Generate a new id
|
|
var newId = function() {
|
|
var s = [];
|
|
var hexDigits = "0123456789abcdef";
|
|
for (var i = 0; i < 36; i++) {
|
|
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
|
}
|
|
s[14] = "4";
|
|
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
|
|
s[8] = s[13] = s[18] = s[23] = "-";
|
|
|
|
var uuid = s.join("");
|
|
return uuid;
|
|
}
|
|
|
|
// Handle an update command from history or from the network
|
|
var doAction = function(command) {
|
|
if (command.action === undefined) return;
|
|
else if (command.action == 'create') {
|
|
// Create a new node
|
|
createNode(command.id, command.text, command.position, command.color);
|
|
} else if (command.action == 'delete') {
|
|
// Get the node
|
|
var node = cy.getElementById(command.id);
|
|
if (node == null) return;
|
|
|
|
// Delete it
|
|
cy.remove(node);
|
|
} else if (command.action == 'update') {
|
|
// Get the node
|
|
var node = cy.getElementById(command.id);
|
|
if (node == null) return;
|
|
|
|
// Update it
|
|
if (command.text !== undefined) {
|
|
node.data('content', command.text);
|
|
node.style({'content': command.text});
|
|
}
|
|
if (command.color !== undefined) {
|
|
node.data('background-color', command.color);
|
|
node.style({'background-color': command.color});
|
|
}
|
|
if (command.position !== undefined) {
|
|
node.position({
|
|
x: command.position.x,
|
|
y: command.position.y
|
|
});
|
|
}
|
|
}
|
|
}
|
|
// Load graph from datastore
|
|
var initGraph = function(graph) {
|
|
if (graph == null)
|
|
return;
|
|
cy.remove("node");
|
|
lastSelected = null;
|
|
for(var i = 0 ; i < graph.length ; i++) {
|
|
doAction(graph[i]);
|
|
}
|
|
hideEditField();
|
|
reinitState();
|
|
}
|
|
var loadGraph = function() {
|
|
var datastoreObject = activity.getDatastoreObject();
|
|
datastoreObject.loadAsText(function (error, metadata, data) {
|
|
initGraph(data);
|
|
});
|
|
}
|
|
|
|
// Save graph to datastore, generate command to rebuild each node
|
|
var getGraph = function() {
|
|
var commands = [];
|
|
var nodes = cy.elements("node");
|
|
for(var i = 0; i < nodes.length ; i++) {
|
|
var node = nodes[i];
|
|
commands.push({
|
|
action:"create", id:node.id(), text: node.data("content"), position: {x: node.position().x, y: node.position().y}, color: node.data("background-color")
|
|
});
|
|
}
|
|
return commands;
|
|
}
|
|
var saveGraph = function(callback) {
|
|
var datastoreObject = activity.getDatastoreObject();
|
|
var commands = getGraph();
|
|
datastoreObject.setDataAsText(commands);
|
|
datastoreObject.save(callback);
|
|
}
|
|
|
|
// Do/Undo handling
|
|
var stateHistory = [];
|
|
var stateIndex = 0;
|
|
var maxHistory = 30;
|
|
var undoButton = document.getElementById("undo-button");
|
|
undoButton.addEventListener('click', function () { saveAndFinishEdit(); undoState(); }, true);
|
|
var redoButton = document.getElementById("redo-button");
|
|
redoButton.addEventListener('click', function () { saveAndFinishEdit(); redoState(); }, true);
|
|
|
|
var reinitState = function() {
|
|
stateHistory = [];
|
|
stateIndex = 0;
|
|
}
|
|
|
|
var pushState = function(state, fromNetwork) {
|
|
if (stateIndex < stateHistory.length - 1) {
|
|
var stateCopy = [];
|
|
for (var i = 0 ; i < stateIndex + 1; i++)
|
|
stateCopy.push(stateHistory[i]);
|
|
stateHistory = stateCopy;
|
|
}
|
|
var stateLength = stateHistory.length - 1;
|
|
var currentState = state;
|
|
if (stateLength < maxHistory) stateHistory.push(currentState);
|
|
else {
|
|
for (var i = 0 ; i < stateLength ; i++) {
|
|
stateHistory[i] = stateHistory[i+1];
|
|
}
|
|
stateHistory[stateHistory.length-1] = currentState;
|
|
}
|
|
stateIndex = stateHistory.length - 1;
|
|
if (isShared && !fromNetwork) {
|
|
sendMessage({
|
|
action: 'updateBoard',
|
|
data: state
|
|
});
|
|
}
|
|
updateStateButtons();
|
|
}
|
|
|
|
var undoState = function(fromNetwork) {
|
|
if (stateHistory.length < 1 || stateIndex < 0) return;
|
|
var undo = stateHistory[stateIndex--].undo;
|
|
doAction(undo);
|
|
if (isShared && !fromNetwork) {
|
|
sendMessage({
|
|
action: 'undoBoard'
|
|
});
|
|
}
|
|
updateStateButtons();
|
|
}
|
|
|
|
var redoState = function(fromNetwork) {
|
|
if (stateIndex+1 >= stateHistory.length) return;
|
|
var redo = stateHistory[++stateIndex].redo;
|
|
doAction(redo);
|
|
if (isShared && !fromNetwork) {
|
|
sendMessage({
|
|
action: 'redoBoard'
|
|
});
|
|
}
|
|
updateStateButtons();
|
|
}
|
|
|
|
var updateStateButtons = function() {
|
|
var stateLength = stateHistory.length;
|
|
undoButton.disabled = (stateHistory.length < 1 || stateIndex < 0);
|
|
redoButton.disabled = (stateIndex+1 >= stateLength);
|
|
}
|
|
|
|
// Users network list functions
|
|
var generateXOLogoWithColor = function(color) {
|
|
var coloredLogo = xoLogo;
|
|
coloredLogo = coloredLogo.replace("#010101", color.stroke)
|
|
coloredLogo = coloredLogo.replace("#FFFFFF", color.fill)
|
|
return "data:image/svg+xml;base64," + btoa(coloredLogo);
|
|
}
|
|
var displayConnectedPeopleHtml = function() {
|
|
var presenceUsersDiv = document.getElementById("presence-users");
|
|
var html = "<hr><ul style='list-style: none; padding:0;'>"
|
|
for (var key in connectedPeople) {
|
|
html += "<li><img style='height:30px;' src='" + generateXOLogoWithColor(connectedPeople[key].colorvalue) + "'>" + connectedPeople[key].name + "</li>"
|
|
}
|
|
html += "</ul>"
|
|
presenceUsersDiv.innerHTML = html
|
|
}
|
|
var displayConnectedPeople = function(users) {
|
|
var presenceUsersDiv = document.getElementById("presence-users");
|
|
if (!users || !presenceUsersDiv) {
|
|
return;
|
|
}
|
|
network.listSharedActivityUsers(network.getSharedInfo().id, function(usersConnected) {
|
|
connectedPeople = {};
|
|
for (var i = 0; i < usersConnected.length; i++) {
|
|
var userConnected = usersConnected[i];
|
|
connectedPeople[userConnected.networkId] = userConnected;
|
|
}
|
|
displayConnectedPeopleHtml();
|
|
});
|
|
}
|
|
|
|
// Handle activity sharing
|
|
var shareActivity = function() {
|
|
network = activity.getPresenceObject(function(error, network) {
|
|
// Unable to join
|
|
if (error) {
|
|
console.log("error");
|
|
return;
|
|
}
|
|
isShared = true;
|
|
|
|
// Store settings
|
|
userSettings = network.getUserInfo();
|
|
console.log("connected");
|
|
|
|
// Not found, create a new shared activity
|
|
if (!window.top.sugar.environment.sharedId) {
|
|
isHost = true;
|
|
network.createSharedActivity('org.olpcfrance.sharednotes', function(groupId) {});
|
|
}
|
|
|
|
// Show a disconnected message when the WebSocket is closed.
|
|
network.onConnectionClosed(function(event) {
|
|
console.log(event);
|
|
console.log("Connection closed");
|
|
});
|
|
|
|
// Display connection changed
|
|
network.onSharedActivityUserChanged(function(msg) {
|
|
onNetworkUserChanged(msg);
|
|
});
|
|
|
|
// Handle messages received
|
|
network.onDataReceived(onNetworkDataReceived);
|
|
});
|
|
}
|
|
|
|
var sendMessage = function(content) {
|
|
try {
|
|
network.sendMessage(network.getSharedInfo().id, {
|
|
user: network.getUserInfo(),
|
|
content: content
|
|
});
|
|
} catch (e) {}
|
|
}
|
|
|
|
var onNetworkDataReceived = function(msg) {
|
|
// Ignore messages coming from ourselves
|
|
if (network.getUserInfo().networkId === msg.user.networkId) {
|
|
return;
|
|
}
|
|
switch (msg.content.action) {
|
|
case 'initialBoard':
|
|
// Receive initial board from the host
|
|
initGraph(msg.content.data);
|
|
break;
|
|
|
|
case 'updateBoard':
|
|
// Board change received
|
|
doAction(msg.content.data.redo);
|
|
pushState(msg.content.data, true);
|
|
break
|
|
|
|
case 'undoBoard':
|
|
// Undo board
|
|
undoState(true);
|
|
break;
|
|
|
|
case 'redoBoard':
|
|
// Redo board
|
|
redoState(true);
|
|
break;
|
|
}
|
|
}
|
|
var onNetworkUserChanged = function(msg) {
|
|
var userName = msg.user.name.replace('<', '<').replace('>', '>');
|
|
var html = "<img style='height:30px;' src='" + generateXOLogoWithColor(msg.user.colorvalue) + "'>";
|
|
if (msg.move === 1) {
|
|
humane.log(html + l10n_s.get("PlayerJoin",{user: userName}));
|
|
if (isHost) {
|
|
sendMessage({
|
|
action: 'initialBoard',
|
|
data: getGraph()
|
|
});
|
|
}
|
|
} else if (msg.move === -1) {
|
|
humane.log(html + l10n_s.get("PlayerLeave",{user: userName}));
|
|
}
|
|
network.listSharedActivities(function(activities) {
|
|
for (var i = 0; i < activities.length; i++) {
|
|
if (activities[i].id === network.getSharedInfo().id) {
|
|
displayConnectedPeople(activities[i].users);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle presence palette
|
|
presence.addEventListener('shared', function() {
|
|
presence.popDown();
|
|
shareActivity();
|
|
});
|
|
if (window.top && window.top.sugar && window.top.sugar.environment && window.top.sugar.environment.sharedId) {
|
|
shareActivity();
|
|
presence.setShared(true);
|
|
}
|
|
|
|
// Handle help
|
|
var helpButton = document.getElementById("help-button");
|
|
tutorial.setElement("activity", document.getElementById("activity-button"));
|
|
tutorial.setElement("title", document.getElementById("title"));
|
|
tutorial.setElement("network", networkButton);
|
|
tutorial.setElement("help", helpButton);
|
|
tutorial.setElement("shared", document.getElementById("shared-button"));
|
|
tutorial.setElement("png", pngButton);
|
|
tutorial.setElement("zoom", zoomButton);
|
|
tutorial.setElement("color", colorButton);
|
|
tutorial.setElement("add", nodetextButton);
|
|
tutorial.setElement("remove", removeButton);
|
|
tutorial.setElement("undo", document.getElementById("undo-button"));
|
|
tutorial.setElement("redo", document.getElementById("redo-button"));
|
|
tutorial.setElement("stop", stopButton);
|
|
tutorial.setElement("node", document.getElementById('canvas'));
|
|
helpButton.addEventListener('click', function (event) {
|
|
tutorial.start();
|
|
});
|
|
env.getEnvironment(function(err, environment) {
|
|
// Initial tutorial coming from home view
|
|
if (environment.help) {
|
|
setTimeout(function() {
|
|
tutorial.start(tutorial.tourInit);
|
|
}, 500);
|
|
}
|
|
});
|
|
|
|
// Handle localization
|
|
window.addEventListener('localized', function() {
|
|
env.getEnvironment(function(err, environment) {
|
|
var defaultLanguage = (typeof chrome != 'undefined' && chrome.app && chrome.app.runtime) ? chrome.i18n.getUILanguage() : navigator.language;
|
|
var language = environment.user ? environment.user.language : defaultLanguage;
|
|
if (l10n_s.language.code != language) {
|
|
l10n_s.language.code = language;
|
|
};
|
|
var oldDefaultText = defaultText;
|
|
defaultText = l10n_s.get("YourNewIdea");
|
|
nodetextButton.title = l10n_s.get("nodetextTitle");
|
|
removeButton.title = l10n_s.get("removeButtonTitle");
|
|
undoButton.title = l10n_s.get("undoButtonTitle");
|
|
redoButton.title = l10n_s.get("redoButtonTitle");
|
|
zoomButton.title = l10n_s.get("zoomButtonTitle");
|
|
pngButton.title = l10n_s.get("pngButtonTitle");
|
|
networkButton.title = l10n_s.get("networkButtonTitle");
|
|
helpButton.title = l10n_s.get("helpButtonTitle");
|
|
if (cy) {
|
|
var nodes = cy.elements("node");
|
|
for(var i = 0; i < nodes.length ; i++) {
|
|
var node = nodes[i];
|
|
if (node.data('content') == oldDefaultText) {
|
|
node.data('content', defaultText);
|
|
node.style({'content': defaultText});
|
|
}
|
|
}
|
|
if (textValue && textValue.value == oldDefaultText) {
|
|
textValue.value = defaultText;
|
|
if (lastSelected) {
|
|
showEditField(lastSelected);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}, false);
|
|
|
|
// --- Cytoscape handling
|
|
|
|
// Initialize board
|
|
cy = cytoscape({
|
|
container: document.getElementById('cy'),
|
|
|
|
ready: function() {
|
|
// Create first node and select id
|
|
cy = this;
|
|
var firstNode = createNode(newId(), defaultText, getCenter(), defaultColor);
|
|
pushState({
|
|
redo: {action:"create", id:firstNode.id(), text: firstNode.data("content"), position: {x: firstNode.position().x, y: firstNode.position().y}, color: defaultColor},
|
|
undo: {action:"delete", id:firstNode.id()}
|
|
});
|
|
firstNode.select();
|
|
selectNode(firstNode);
|
|
showEditField(firstNode);
|
|
lastSelected = firstNode;
|
|
|
|
// Load world
|
|
loadGraph();
|
|
},
|
|
|
|
style: [
|
|
{
|
|
selector: '.standard-node',
|
|
css: {
|
|
'width': '200px',
|
|
'height': '200px',
|
|
'text-valign': 'center',
|
|
'text-halign': 'center',
|
|
'border-color': 'darkgray',
|
|
'border-width': '1px',
|
|
'background-color': defaultColor,
|
|
'text-wrap': 'wrap',
|
|
'text-max-width': '200px',
|
|
'shadow-color': 'black',
|
|
'shadow-offset-x': '4px',
|
|
'shadow-offset-y': '4px',
|
|
'shadow-opacity': '0.5',
|
|
'shape': 'rectangle'
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// Event: a node is selected
|
|
cy.on('tap', 'node', function() {
|
|
if (currentMode == 1) {
|
|
pushState({
|
|
redo: {action:"delete", id:this.id()},
|
|
undo: {action:"create", id:this.id(), text: this.data("content"), position: {x: this.position().x, y: this.position().y}, color: defaultColor}
|
|
});
|
|
deleteNode(this);
|
|
if (lastSelected == this) lastSelected = null;
|
|
return;
|
|
} else {
|
|
if (!isSelectedNode(this)) {
|
|
if (lastSelected != null) {
|
|
updateNodeText(lastSelected, textValue.value);
|
|
unselectNode(lastSelected);
|
|
}
|
|
selectNode(this);
|
|
showEditField(this);
|
|
}
|
|
lastSelected = this;
|
|
}
|
|
});
|
|
|
|
// Event: a node is unselected
|
|
cy.on('unselect', 'node', function() {
|
|
saveAndFinishEdit();
|
|
unselectNode(this);
|
|
});
|
|
|
|
// Event: tap on the board
|
|
cy.on('tap', function(e){
|
|
if (e.cyTarget === cy) {
|
|
if (currentMode == 0) {
|
|
var newNode = createNode(newId(), defaultText, e.cyPosition, defaultColor);
|
|
pushState({
|
|
redo: {action:"create", id:newNode.id(), text: newNode.data("content"), position: {x: newNode.position().x, y: newNode.position().y}, color: defaultColor},
|
|
undo: {action:"delete", id:newNode.id()}
|
|
});
|
|
newNode.select();
|
|
selectNode(newNode);
|
|
showEditField(newNode);
|
|
lastSelected = newNode;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Event: elements moved
|
|
cy.on('drag', 'node', function(e) {
|
|
saveAndFinishEdit();
|
|
if (draggedPosition == null) {
|
|
draggedPosition = {x: this.position().x, y: this.position().y};
|
|
}
|
|
});
|
|
|
|
cy.on('free', 'node', function(e) {
|
|
if (draggedPosition != null && (this.position().x != draggedPosition.x || this.position().y != draggedPosition.y)) {
|
|
pushState({
|
|
redo: {action:"update", id:this.id(), position: {x: this.position().x, y: this.position().y}},
|
|
undo: {action:"update", id:this.id(), position: {x: draggedPosition.x, y: draggedPosition.y}}
|
|
});
|
|
}
|
|
draggedPosition = null;
|
|
});
|
|
|
|
// Event: zoom
|
|
cy.on('zoom', function() {
|
|
saveAndFinishEdit();
|
|
});
|
|
|
|
// Event: move
|
|
cy.on('pan', function() {
|
|
saveAndFinishEdit();
|
|
});
|
|
});
|
|
});
|