diff --git a/.gitignore b/.gitignore index 3cc3aae3..d3549f2a 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,4 @@ storage.db *.sublime-workspace *.css !helpers/item-tooltip/styles.css -!helpers/passives/styles.css +!helpers/passives/*.css diff --git a/helpers/passives/client/js/client.js b/helpers/passives/client/js/client.js index c4604882..e8d57c8f 100644 --- a/helpers/passives/client/js/client.js +++ b/helpers/passives/client/js/client.js @@ -15,14 +15,16 @@ define([ this.socket.on('connect', this.onConnected.bind(this, onReady)); }, - load: function (callback) { + load: function (fileName, callback) { this.socket.emit('request', { + fileName: fileName, action: 'load' }, callback); }, - save: function (data, callback) { + save: function (fileName, data, callback) { this.socket.emit('request', { + fileName: fileName, action: 'save', data: data }, callback); diff --git a/helpers/passives/client/js/generator.js b/helpers/passives/client/js/generator.js index f8d8e497..4d386f12 100644 --- a/helpers/passives/client/js/generator.js +++ b/helpers/passives/client/js/generator.js @@ -15,11 +15,6 @@ define([ init: function () { events.on('onAreaSelect', this.events.onAreaSelect.bind(this)); - - /*this.actions.addNode.call(this, { - x: 100, - y: 100 - });*/ }, findNode: function (x, y) { @@ -51,11 +46,15 @@ define([ return selected; }, + serialize: function () { + return JSON.stringify({ + nodes: this.nodes, + links: this.links + }); + }, + actions: { - load: function () { - client.load(this.actions.onLoad.bind(this)); - }, - onLoad: function (data) { + load: function (data) { this.nodes = data.nodes; this.links = data.links.map(function (l) { l.from = this.nodes.find(n => (n.id == l.from.id)); @@ -65,15 +64,6 @@ define([ }, this); }, - save: function () { - var res = JSON.stringify({ - nodes: this.nodes, - links: this.links - }); - - client.save(res); - }, - selectNode: function (options) { if ( ( diff --git a/helpers/passives/client/js/main.js b/helpers/passives/client/js/main.js index 696969bd..6b8b9b1e 100644 --- a/helpers/passives/client/js/main.js +++ b/helpers/passives/client/js/main.js @@ -37,7 +37,7 @@ define([ events.on('onMouseWheel', this.events.onMouseWheel.bind(this)); events.on('onKeyDown', this.events.onKeyDown.bind(this)); - uiFactory.build('nodeInfo'); + uiFactory.build('loadSave'); renderer.center(generator.nodes[0]); this.render(); @@ -102,9 +102,7 @@ define([ onKeyDown: function (key) { var action = ({ - d: 'deleteNode', - l: 'load', - s: 'save' + d: 'deleteNode' })[key]; if (!action) return; diff --git a/helpers/passives/client/js/tplNode.js b/helpers/passives/client/js/tplNode.js index 9bf698db..a8208b4a 100644 --- a/helpers/passives/client/js/tplNode.js +++ b/helpers/passives/client/js/tplNode.js @@ -4,7 +4,6 @@ define([ ) { return { - id: 0, color: 0, size: 0, pos: { @@ -14,7 +13,7 @@ define([ build: function (options) { var res = $.extend(true, {}, this, { - id: this.id++, + id: options.id, pos: { x: options.x, y: options.y diff --git a/helpers/passives/client/ui/templates/loadSave/loadSave.js b/helpers/passives/client/ui/templates/loadSave/loadSave.js new file mode 100644 index 00000000..bf622f89 --- /dev/null +++ b/helpers/passives/client/ui/templates/loadSave/loadSave.js @@ -0,0 +1,33 @@ +define([ + 'html!./template', + 'css!./styles', + 'js/generator', + 'js/client' +], function ( + template, + styles, + generator, + client +) { + return { + tpl: template, + + postRender: function () { + this.on('.btnLoad', 'click', this.events.onLoad.bind(this)); + this.on('.btnSave', 'click', this.events.onSave.bind(this)); + }, + + events: { + onLoad: function () { + var fileName = this.val('.fileName'); + client.load(fileName, generator.actions.load.bind(generator)); + }, + + onSave: function () { + var fileName = this.val('.fileName'); + var data = generator.serialize(); + client.save(fileName, data, generator.actions.load.bind(generator)); + } + } + } +}); diff --git a/helpers/passives/client/ui/templates/loadSave/template.html b/helpers/passives/client/ui/templates/loadSave/template.html new file mode 100644 index 00000000..af477acf --- /dev/null +++ b/helpers/passives/client/ui/templates/loadSave/template.html @@ -0,0 +1,10 @@ +
+
+
Load/Save
+
+
+ +
Load
+
Save
+
+
diff --git a/helpers/passives/client/ui/templates/nodeInfo/nodeInfo.js b/helpers/passives/client/ui/templates/nodeInfo/nodeInfo.js deleted file mode 100644 index aa3056b9..00000000 --- a/helpers/passives/client/ui/templates/nodeInfo/nodeInfo.js +++ /dev/null @@ -1,13 +0,0 @@ -define([ - 'html!./template' -], function ( - template -) { - return { - tpl: template, - - postRender: function () { - - } - } -}); diff --git a/helpers/passives/client/ui/templates/nodeInfo/template.html b/helpers/passives/client/ui/templates/nodeInfo/template.html deleted file mode 100644 index d457ea36..00000000 --- a/helpers/passives/client/ui/templates/nodeInfo/template.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
-
Node Info
-
-
- -
-
diff --git a/helpers/passives/server/index.js b/helpers/passives/server/index.js index 0944e128..61f28be7 100644 --- a/helpers/passives/server/index.js +++ b/helpers/passives/server/index.js @@ -32,10 +32,10 @@ var mod = { onRequest: function (socket, msg, callback) { if (msg.action == 'load') { - var res = JSON.parse(fs.readFileSync('save.json')); + var res = JSON.parse(fs.readFileSync(msg.fileName + '.json')); callback(res); } else if (msg.action == 'save') - fs.writeFileSync('save.json', msg.data); + fs.writeFileSync(msg.fileName + '.json', msg.data); if (callback) callback(); diff --git a/helpers/passives/server/save.json b/helpers/passives/server/save.json deleted file mode 100644 index db39272d..00000000 --- a/helpers/passives/server/save.json +++ /dev/null @@ -1,1297 +0,0 @@ -{ - "nodes": [{ - "id": 0, - "color": 3, - "size": 2, - "pos": { - "x": 28, - "y": 15 - }, - "selected": false - }, { - "id": 1, - "color": 0, - "size": 0, - "pos": { - "x": 28, - "y": 13 - }, - "selected": false - }, { - "id": 2, - "color": 0, - "size": 0, - "pos": { - "x": 26, - "y": 13 - }, - "selected": false - }, { - "id": 3, - "color": 0, - "size": 0, - "pos": { - "x": 24, - "y": 13 - }, - "selected": false - }, { - "id": 4, - "color": 0, - "size": 0, - "pos": { - "x": 28, - "y": 17 - }, - "selected": false - }, { - "id": 5, - "color": 0, - "size": 0, - "pos": { - "x": 30, - "y": 17 - }, - "selected": false - }, { - "id": 6, - "color": 0, - "size": 0, - "pos": { - "x": 32, - "y": 17 - }, - "selected": false - }, { - "id": 7, - "color": 0, - "size": 0, - "pos": { - "x": 24, - "y": 11 - }, - "selected": false - }, { - "id": 8, - "color": 0, - "size": 0, - "pos": { - "x": 27, - "y": 11 - }, - "selected": false - }, { - "id": 9, - "color": 0, - "size": 0, - "pos": { - "x": 20, - "y": 11 - }, - "selected": false - }, { - "id": 10, - "color": 0, - "size": 0, - "pos": { - "x": 24, - "y": 7 - }, - "selected": false - }, { - "id": 11, - "color": 1, - "size": 1, - "pos": { - "x": 22, - "y": 9 - }, - "selected": false - }, { - "id": 12, - "color": 0, - "size": 0, - "pos": { - "x": 21, - "y": 6 - }, - "selected": false - }, { - "id": 13, - "color": 0, - "size": 0, - "pos": { - "x": 19, - "y": 8 - }, - "selected": false - }, { - "id": 14, - "color": 0, - "size": 0, - "pos": { - "x": 18, - "y": 5 - }, - "selected": false - }, { - "id": 15, - "color": 0, - "size": 0, - "pos": { - "x": 20, - "y": 19 - }, - "selected": false - }, { - "id": 16, - "color": 0, - "size": 0, - "pos": { - "x": 36, - "y": 11 - }, - "selected": false - }, { - "id": 17, - "color": 3, - "size": 1, - "pos": { - "x": 22, - "y": 16 - }, - "selected": false - }, { - "id": 18, - "color": 3, - "size": 1, - "pos": { - "x": 34, - "y": 14 - }, - "selected": false - }, { - "id": 19, - "color": 0, - "size": 0, - "pos": { - "x": 36, - "y": 19 - }, - "selected": false - }, { - "id": 20, - "color": 2, - "size": 1, - "pos": { - "x": 20, - "y": 23 - }, - "selected": false - }, { - "id": 21, - "color": 2, - "size": 1, - "pos": { - "x": 36, - "y": 7 - }, - "selected": false - }, { - "id": 22, - "color": 0, - "size": 0, - "pos": { - "x": 23, - "y": 23 - }, - "selected": false - }, { - "id": 23, - "color": 0, - "size": 0, - "pos": { - "x": 33, - "y": 7 - }, - "selected": false - }, { - "id": 24, - "color": 0, - "size": 0, - "pos": { - "x": 17, - "y": 19 - }, - "selected": false - }, { - "id": 25, - "color": 0, - "size": 0, - "pos": { - "x": 14, - "y": 19 - }, - "selected": false - }, { - "id": 26, - "color": 0, - "size": 0, - "pos": { - "x": 14, - "y": 21 - }, - "selected": false - }, { - "id": 27, - "color": 0, - "size": 0, - "pos": { - "x": 14, - "y": 23 - }, - "selected": false - }, { - "id": 29, - "color": 0, - "size": 0, - "pos": { - "x": 42, - "y": 7 - }, - "selected": false - }, { - "id": 31, - "color": 0, - "size": 0, - "pos": { - "x": 39, - "y": 11 - }, - "selected": false - }, { - "id": 32, - "color": 0, - "size": 0, - "pos": { - "x": 42, - "y": 11 - }, - "selected": false - }, { - "id": 33, - "color": 0, - "size": 0, - "pos": { - "x": 42, - "y": 9 - }, - "selected": false - }, { - "id": 34, - "color": 0, - "size": 0, - "pos": { - "x": 26, - "y": 21 - }, - "selected": false - }, { - "id": 35, - "color": 0, - "size": 0, - "pos": { - "x": 29, - "y": 19 - }, - "selected": false - }, { - "id": 36, - "color": 0, - "size": 0, - "pos": { - "x": 30, - "y": 9 - }, - "selected": false - }, { - "id": 37, - "color": 0, - "size": 0, - "pos": { - "x": 32, - "y": 19 - }, - "selected": false - }, { - "id": 40, - "color": 0, - "size": 0, - "pos": { - "x": 32, - "y": 23 - }, - "selected": false - }, { - "id": 41, - "color": 1, - "size": 1, - "pos": { - "x": 34, - "y": 21 - }, - "selected": false - }, { - "id": 42, - "color": 0, - "size": 0, - "pos": { - "x": 38, - "y": 25 - }, - "selected": false - }, { - "id": 43, - "color": 0, - "size": 0, - "pos": { - "x": 37, - "y": 22 - }, - "selected": false - }, { - "id": 44, - "color": 0, - "size": 0, - "pos": { - "x": 35, - "y": 24 - }, - "selected": false - }], - "links": [{ - "from": { - "id": 0, - "color": 3, - "size": 2, - "pos": { - "x": 28, - "y": 15 - }, - "selected": false - }, - "to": { - "id": 1, - "color": 0, - "size": 0, - "pos": { - "x": 28, - "y": 13 - }, - "selected": false - } - }, { - "from": { - "id": 1, - "color": 0, - "size": 0, - "pos": { - "x": 28, - "y": 13 - }, - "selected": false - }, - "to": { - "id": 2, - "color": 0, - "size": 0, - "pos": { - "x": 26, - "y": 13 - }, - "selected": false - } - }, { - "from": { - "id": 2, - "color": 0, - "size": 0, - "pos": { - "x": 26, - "y": 13 - }, - "selected": false - }, - "to": { - "id": 3, - "color": 0, - "size": 0, - "pos": { - "x": 24, - "y": 13 - }, - "selected": false - } - }, { - "from": { - "id": 0, - "color": 3, - "size": 2, - "pos": { - "x": 28, - "y": 15 - }, - "selected": false - }, - "to": { - "id": 4, - "color": 0, - "size": 0, - "pos": { - "x": 28, - "y": 17 - }, - "selected": false - } - }, { - "from": { - "id": 4, - "color": 0, - "size": 0, - "pos": { - "x": 28, - "y": 17 - }, - "selected": false - }, - "to": { - "id": 5, - "color": 0, - "size": 0, - "pos": { - "x": 30, - "y": 17 - }, - "selected": false - } - }, { - "from": { - "id": 5, - "color": 0, - "size": 0, - "pos": { - "x": 30, - "y": 17 - }, - "selected": false - }, - "to": { - "id": 6, - "color": 0, - "size": 0, - "pos": { - "x": 32, - "y": 17 - }, - "selected": false - } - }, { - "from": { - "id": 8, - "color": 0, - "size": 0, - "pos": { - "x": 27, - "y": 11 - }, - "selected": false - }, - "to": { - "id": 7, - "color": 0, - "size": 0, - "pos": { - "x": 24, - "y": 11 - }, - "selected": false - } - }, { - "from": { - "id": 7, - "color": 0, - "size": 0, - "pos": { - "x": 24, - "y": 11 - }, - "selected": false - }, - "to": { - "id": 10, - "color": 0, - "size": 0, - "pos": { - "x": 24, - "y": 7 - }, - "selected": false - } - }, { - "from": { - "id": 10, - "color": 0, - "size": 0, - "pos": { - "x": 24, - "y": 7 - }, - "selected": false - }, - "to": { - "id": 12, - "color": 0, - "size": 0, - "pos": { - "x": 21, - "y": 6 - }, - "selected": false - } - }, { - "from": { - "id": 12, - "color": 0, - "size": 0, - "pos": { - "x": 21, - "y": 6 - }, - "selected": false - }, - "to": { - "id": 14, - "color": 0, - "size": 0, - "pos": { - "x": 18, - "y": 5 - }, - "selected": false - } - }, { - "from": { - "id": 14, - "color": 0, - "size": 0, - "pos": { - "x": 18, - "y": 5 - }, - "selected": false - }, - "to": { - "id": 13, - "color": 0, - "size": 0, - "pos": { - "x": 19, - "y": 8 - }, - "selected": false - } - }, { - "from": { - "id": 13, - "color": 0, - "size": 0, - "pos": { - "x": 19, - "y": 8 - }, - "selected": false - }, - "to": { - "id": 9, - "color": 0, - "size": 0, - "pos": { - "x": 20, - "y": 11 - }, - "selected": false - } - }, { - "from": { - "id": 9, - "color": 0, - "size": 0, - "pos": { - "x": 20, - "y": 11 - }, - "selected": false - }, - "to": { - "id": 7, - "color": 0, - "size": 0, - "pos": { - "x": 24, - "y": 11 - }, - "selected": false - } - }, { - "from": { - "id": 14, - "color": 0, - "size": 0, - "pos": { - "x": 18, - "y": 5 - }, - "selected": false - }, - "to": { - "id": 11, - "color": 1, - "size": 1, - "pos": { - "x": 22, - "y": 9 - }, - "selected": false - } - }, { - "from": { - "id": 16, - "color": 0, - "size": 0, - "pos": { - "x": 36, - "y": 11 - }, - "selected": false - }, - "to": { - "id": 0, - "color": 3, - "size": 2, - "pos": { - "x": 28, - "y": 15 - }, - "selected": false - } - }, { - "from": { - "id": 0, - "color": 3, - "size": 2, - "pos": { - "x": 28, - "y": 15 - }, - "selected": false - }, - "to": { - "id": 15, - "color": 0, - "size": 0, - "pos": { - "x": 20, - "y": 19 - }, - "selected": false - } - }, { - "from": { - "id": 15, - "color": 0, - "size": 0, - "pos": { - "x": 20, - "y": 19 - }, - "selected": false - }, - "to": { - "id": 9, - "color": 0, - "size": 0, - "pos": { - "x": 20, - "y": 11 - }, - "selected": false - } - }, { - "from": { - "id": 17, - "color": 3, - "size": 1, - "pos": { - "x": 22, - "y": 16 - }, - "selected": false - }, - "to": { - "id": 3, - "color": 0, - "size": 0, - "pos": { - "x": 24, - "y": 13 - }, - "selected": false - } - }, { - "from": { - "id": 18, - "color": 3, - "size": 1, - "pos": { - "x": 34, - "y": 14 - }, - "selected": false - }, - "to": { - "id": 6, - "color": 0, - "size": 0, - "pos": { - "x": 32, - "y": 17 - }, - "selected": false - } - }, { - "from": { - "id": 16, - "color": 0, - "size": 0, - "pos": { - "x": 36, - "y": 11 - }, - "selected": false - }, - "to": { - "id": 19, - "color": 0, - "size": 0, - "pos": { - "x": 36, - "y": 19 - }, - "selected": false - } - }, { - "from": { - "id": 21, - "color": 2, - "size": 1, - "pos": { - "x": 36, - "y": 7 - }, - "selected": false - }, - "to": { - "id": 16, - "color": 0, - "size": 0, - "pos": { - "x": 36, - "y": 11 - }, - "selected": false - } - }, { - "from": { - "id": 20, - "color": 2, - "size": 1, - "pos": { - "x": 20, - "y": 23 - }, - "selected": false - }, - "to": { - "id": 15, - "color": 0, - "size": 0, - "pos": { - "x": 20, - "y": 19 - }, - "selected": false - } - }, { - "from": { - "id": 16, - "color": 0, - "size": 0, - "pos": { - "x": 36, - "y": 11 - }, - "selected": false - }, - "to": { - "id": 31, - "color": 0, - "size": 0, - "pos": { - "x": 39, - "y": 11 - }, - "selected": false - } - }, { - "from": { - "id": 31, - "color": 0, - "size": 0, - "pos": { - "x": 39, - "y": 11 - }, - "selected": false - }, - "to": { - "id": 32, - "color": 0, - "size": 0, - "pos": { - "x": 42, - "y": 11 - }, - "selected": false - } - }, { - "from": { - "id": 32, - "color": 0, - "size": 0, - "pos": { - "x": 42, - "y": 11 - }, - "selected": false - }, - "to": { - "id": 33, - "color": 0, - "size": 0, - "pos": { - "x": 42, - "y": 9 - }, - "selected": false - } - }, { - "from": { - "id": 33, - "color": 0, - "size": 0, - "pos": { - "x": 42, - "y": 9 - }, - "selected": false - }, - "to": { - "id": 29, - "color": 0, - "size": 0, - "pos": { - "x": 42, - "y": 7 - }, - "selected": false - } - }, { - "from": { - "id": 21, - "color": 2, - "size": 1, - "pos": { - "x": 36, - "y": 7 - }, - "selected": false - }, - "to": { - "id": 23, - "color": 0, - "size": 0, - "pos": { - "x": 33, - "y": 7 - }, - "selected": false - } - }, { - "from": { - "id": 15, - "color": 0, - "size": 0, - "pos": { - "x": 20, - "y": 19 - }, - "selected": false - }, - "to": { - "id": 24, - "color": 0, - "size": 0, - "pos": { - "x": 17, - "y": 19 - }, - "selected": false - } - }, { - "from": { - "id": 24, - "color": 0, - "size": 0, - "pos": { - "x": 17, - "y": 19 - }, - "selected": false - }, - "to": { - "id": 25, - "color": 0, - "size": 0, - "pos": { - "x": 14, - "y": 19 - }, - "selected": false - } - }, { - "from": { - "id": 25, - "color": 0, - "size": 0, - "pos": { - "x": 14, - "y": 19 - }, - "selected": false - }, - "to": { - "id": 26, - "color": 0, - "size": 0, - "pos": { - "x": 14, - "y": 21 - }, - "selected": false - } - }, { - "from": { - "id": 26, - "color": 0, - "size": 0, - "pos": { - "x": 14, - "y": 21 - }, - "selected": false - }, - "to": { - "id": 27, - "color": 0, - "size": 0, - "pos": { - "x": 14, - "y": 23 - }, - "selected": false - } - }, { - "from": { - "id": 20, - "color": 2, - "size": 1, - "pos": { - "x": 20, - "y": 23 - }, - "selected": false - }, - "to": { - "id": 22, - "color": 0, - "size": 0, - "pos": { - "x": 23, - "y": 23 - }, - "selected": false - } - }, { - "from": { - "id": 23, - "color": 0, - "size": 0, - "pos": { - "x": 33, - "y": 7 - }, - "selected": false - }, - "to": { - "id": 36, - "color": 0, - "size": 0, - "pos": { - "x": 30, - "y": 9 - }, - "selected": false - } - }, { - "from": { - "id": 36, - "color": 0, - "size": 0, - "pos": { - "x": 30, - "y": 9 - }, - "selected": false - }, - "to": { - "id": 8, - "color": 0, - "size": 0, - "pos": { - "x": 27, - "y": 11 - }, - "selected": false - } - }, { - "from": { - "id": 22, - "color": 0, - "size": 0, - "pos": { - "x": 23, - "y": 23 - }, - "selected": false - }, - "to": { - "id": 34, - "color": 0, - "size": 0, - "pos": { - "x": 26, - "y": 21 - }, - "selected": false - } - }, { - "from": { - "id": 34, - "color": 0, - "size": 0, - "pos": { - "x": 26, - "y": 21 - }, - "selected": false - }, - "to": { - "id": 35, - "color": 0, - "size": 0, - "pos": { - "x": 29, - "y": 19 - }, - "selected": false - } - }, { - "from": { - "id": 37, - "color": 0, - "size": 0, - "pos": { - "x": 32, - "y": 19 - }, - "selected": false - }, - "to": { - "id": 35, - "color": 0, - "size": 0, - "pos": { - "x": 29, - "y": 19 - }, - "selected": false - } - }, { - "from": { - "id": 37, - "color": 0, - "size": 0, - "pos": { - "x": 32, - "y": 19 - }, - "selected": false - }, - "to": { - "id": 19, - "color": 0, - "size": 0, - "pos": { - "x": 36, - "y": 19 - }, - "selected": false - } - }, { - "from": { - "id": 37, - "color": 0, - "size": 0, - "pos": { - "x": 32, - "y": 19 - }, - "selected": false - }, - "to": { - "id": 40, - "color": 0, - "size": 0, - "pos": { - "x": 32, - "y": 23 - }, - "selected": false - } - }, { - "from": { - "id": 40, - "color": 0, - "size": 0, - "pos": { - "x": 32, - "y": 23 - }, - "selected": false - }, - "to": { - "id": 44, - "color": 0, - "size": 0, - "pos": { - "x": 35, - "y": 24 - }, - "selected": false - } - }, { - "from": { - "id": 44, - "color": 0, - "size": 0, - "pos": { - "x": 35, - "y": 24 - }, - "selected": false - }, - "to": { - "id": 42, - "color": 0, - "size": 0, - "pos": { - "x": 38, - "y": 25 - }, - "selected": false - } - }, { - "from": { - "id": 42, - "color": 0, - "size": 0, - "pos": { - "x": 38, - "y": 25 - }, - "selected": false - }, - "to": { - "id": 43, - "color": 0, - "size": 0, - "pos": { - "x": 37, - "y": 22 - }, - "selected": false - } - }, { - "from": { - "id": 43, - "color": 0, - "size": 0, - "pos": { - "x": 37, - "y": 22 - }, - "selected": false - }, - "to": { - "id": 19, - "color": 0, - "size": 0, - "pos": { - "x": 36, - "y": 19 - }, - "selected": false - } - }, { - "from": { - "id": 41, - "color": 1, - "size": 1, - "pos": { - "x": 34, - "y": 21 - }, - "selected": false - }, - "to": { - "id": 42, - "color": 0, - "size": 0, - "pos": { - "x": 38, - "y": 25 - }, - "selected": false - } - }] -}