define([ 'html!./template', 'css!./styles', 'js/generator', 'js/client', 'js/renderer', 'js/input', 'ui/factory', 'js/events' ], function ( template, styles, generator, client, renderer, input, uiFactory, events ) { return { tpl: template, postRender: function () { this.onEvent('onTreeLoaded', this.events.onTreeLoaded.bind(this)); this.onEvent('onNew', this.events.onNew.bind(this)); this.onEvent('onDeleteNode', this.events.onDeleteNode.bind(this)); this.onEvent('onSelectNode', this.events.onSelectNode.bind(this)); this.on('.btnAdd', 'click', this.actions.add.bind(this)); this.on('.btnRename', 'click', this.events.onClickRename.bind(this)); this.on('.btnRemove', 'click', this.events.onClickRemove.bind(this)); }, addGroup: function (groupName) { var el = $('
' + groupName + '
') .appendTo(this.find('.list')) .attr('group', groupName); el.on('click', this.events.onClickGroup.bind(this)); }, actions: { add: function () { var selected = generator.nodes.filter(n => n.selected); var groupName = 'group-' + this.find('.list .item').length; selected.forEach(function (s) { if (!s.group) s.group = []; s.group.push(groupName) }); this.addGroup(groupName); }, rename: function (newName) { var el = this.find('.list .active').eq(0); if (!el) return; var oldName = el.attr('group'); el .html(newName) .attr('group', newName); generator.nodes .filter(n => ((n.group) && (n.group.indexOf(oldName) > -1))) .forEach(function (n) { var group = n.group; group.spliceWhere(g => (g == oldName)); group.push(newName); }); }, remove: function (group) { generator.nodes.forEach(function (g) { if ((g.group) && (g.group.indexOf(group) > -1)) { g.group.spliceWhere(g => (g == group)); if (g.group.length == 0) delete g.group; } }); this.find('.item[group="' + group + '"]').remove(); } }, events: { onNew: function () { this.find('.list').empty(); }, onDeleteNode: function (node) { if ((!node.group) || (node.group.length == 0)) return; node.group.forEach(function (g) { var hasSiblings = generator.nodes.some(n => ((n.group) && (n.group.indexOf(g) > -1))) if (!hasSiblings) this.find('.item[group="' + g + '"]').remove(); }, this); }, onClickRename: function (e) { uiFactory.build('renameGroup', { onDone: this.events.onRenameGroupBuilt.bind(this) }); }, onRenameGroupBuilt: function () { var oldName = null; var el = this.find('.list .active').eq(0); if (el) oldName = el.attr('group'); events.emit('onRenameGroup', oldName, this.actions.rename.bind(this)); }, onClickRemove: function (e) { var el = this.find('.list .active').eq(0); if (!el) return; el.remove(); var groupName = el.attr('group'); generator.nodes .filter(n => ((n.group) && (n.group.indexOf(groupName) > -1))) .forEach(function (n) { n.group.spliceWhere(g => (g == groupName)); }); }, onTreeLoaded: function (tree) { var container = this.find('.list').empty(); var groups = []; tree.nodes .filter(n => !!n.group) .sort(function (a, b) { if (a.group < b.group) return -1; else if (b.group < a.group) return 1; }) .forEach(function (n) { n.group.forEach(function (g) { if (groups.indexOf(g) > -1) return; this.addGroup(g); groups.push(g); }, this); }, this); }, onClickGroup: function (e) { var group = $(e.currentTarget).attr('group'); var pos = { x: 0, y: 0 }; var nodes = generator.nodes .filter(function (n) { if ((!n.group) || (n.group.indexOf(group) == -1)) return false; pos.x += n.pos.x; pos.y += n.pos.y; return true; }); pos.x /= nodes.length; pos.y /= nodes.length; generator.callAction('selectNode', nodes); if (input.isKeyDown('shift')) { renderer.center({ pos: pos }); } renderer.makeDirty(); }, onSelectNode: function (nodes) { this.find('.list .active').removeClass('active'); var selectedGroup = null; nodes.forEach(function (n) { (n.group || []).forEach(function (g) { var list = generator.nodes.filter(a => ((a.group) && (a.group.indexOf(g) > -1))); var check = nodes.filter(a => ((a.group) && (a.group.indexOf(g) > -1))); if (list.length == check.length) selectedGroup = g; }); }); if (selectedGroup) this.find('.list .item[group="' + selectedGroup + '"]').addClass('active'); } } } });