Skip to content

Commit

Permalink
the-graph-editor: Move default menus out of Polymer element
Browse files Browse the repository at this point in the history
  • Loading branch information
jonnor committed Jan 6, 2017
1 parent 62b67fd commit 0f258ca
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 163 deletions.
1 change: 1 addition & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,6 @@ g.TheGraph.thumb = require('./the-graph-thumb/the-graph-thumb.js');
g.TheGraph.nav = require('./the-graph-nav/the-graph-nav.js');
g.TheGraph.autolayout = require('./the-graph/the-graph-autolayout.js');
g.TheGraph.library = require('./the-graph/the-graph-library.js');
g.TheGraph.editor = require('./the-graph-editor/the-graph-editor.js');

module.exports = g.TheGraph;
164 changes: 1 addition & 163 deletions the-graph-editor/the-graph-editor.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,169 +44,7 @@
forceSelection: false,
created: function () {
this.pan = [0,0];
var pasteAction = function (graph, itemKey, item) {
var pasted = TheGraph.Clipboard.paste(graph);
this.selectedNodes = pasted.nodes;
this.selectedEdges = [];
}.bind(this);
var pasteMenu = {
icon: "paste",
iconLabel: "paste",
action: pasteAction
};
// Default context menu defs

var nodeActions = {
delete: function (graph, itemKey, item) {
graph.removeNode(itemKey);
// Remove selection
var newSelection = [];
for (var i=0, len=this.selectedNodes.length; i<len; i++){
var selected = this.selectedNodes[i];
if (selected !== item) {
newSelection.push(selected);
}
}
this.selectedNodes = newSelection;
}.bind(this),
copy: function (graph, itemKey, item) {
TheGraph.Clipboard.copy(graph, [itemKey]);
}
}, edgeActions = {
delete: function (graph, itemKey, item) {
graph.removeEdge(item.from.node, item.from.port, item.to.node, item.to.port);
// Remove selection
var newSelection = [];
for (var i=0, len=this.selectedEdges.length; i<len; i++){
var selected = this.selectedEdges[i];
if (selected !== item) {
newSelection.push(selected);
}
}
this.selectedEdges = newSelection;
}.bind(this)
};
this.menus = {
main: {
icon: "sitemap",
e4: pasteMenu
},
edge: {
actions: edgeActions,
icon: "long-arrow-right",
s4: {
icon: "trash-o",
iconLabel: "delete",
action: edgeActions.delete
}
},
node: {
actions: nodeActions,
s4: {
icon: "trash-o",
iconLabel: "delete",
action: nodeActions.delete
},
w4: {
icon: "copy",
iconLabel: "copy",
action: nodeActions.copy
}
},
nodeInport: {
w4: {
icon: "sign-in",
iconLabel: "export",
action: function (graph, itemKey, item) {
var pub = item.port;
if (pub === 'start') {
pub = 'start1';
}
if (pub === 'graph') {
pub = 'graph1';
}
var count = 0;
// Make sure public is unique
while (graph.inports[pub]) {
count++;
pub = item.port + count;
}
var priNode = graph.getNode(item.process);
var metadata = {x:priNode.metadata.x-144, y:priNode.metadata.y};
graph.addInport(pub, item.process, item.port, metadata);
}
}
},
nodeOutport: {
e4: {
icon: "sign-out",
iconLabel: "export",
action: function (graph, itemKey, item) {
var pub = item.port;
var count = 0;
// Make sure public is unique
while (graph.outports[pub]) {
count++;
pub = item.port + count;
}
var priNode = graph.getNode(item.process);
var metadata = {x:priNode.metadata.x+144, y:priNode.metadata.y};
graph.addOutport(pub, item.process, item.port, metadata);
}
}
},
graphInport: {
icon: "sign-in",
iconColor: 2,
n4: {
label: "inport"
},
s4: {
icon: "trash-o",
iconLabel: "delete",
action: function (graph, itemKey, item) {
graph.removeInport(itemKey);
}
}
},
graphOutport: {
icon: "sign-out",
iconColor: 5,
n4: {
label: "outport"
},
s4: {
icon: "trash-o",
iconLabel: "delete",
action: function (graph, itemKey, item) {
graph.removeOutport(itemKey);
}
}
},
group: {
icon: "th",
s4: {
icon: "trash-o",
iconLabel: "ungroup",
action: function (graph, itemKey, item) {
graph.removeGroup(itemKey);
}
},
// TODO copy group?
e4: pasteMenu
},
selection: {
icon: "th",
w4: {
icon: "copy",
iconLabel: "copy",
action: function (graph, itemKey, item) {
TheGraph.Clipboard.copy(graph, item.nodes);
}
},
e4: pasteMenu
}
};
this.menus = TheGraph.editor.getDefaultMenus(this);
},
ready: function () {},
attached: function () {
Expand Down
175 changes: 175 additions & 0 deletions the-graph-editor/the-graph-editor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@

// Returns a new datastructure to prevent accidental sharing between diffent editor instances
function getDefaultMenus(editor) {

// FIXME: provide a proper interface for actions to manipulate section, remove @editor
var pasteAction = function (graph, itemKey, item) {
var pasted = TheGraph.Clipboard.paste(graph);
this.selectedNodes = pasted.nodes;
this.selectedEdges = [];
}.bind(editor);
var pasteMenu = {
icon: "paste",
iconLabel: "paste",
action: pasteAction
};
// Default context menu defs

var nodeActions = {
delete: function (graph, itemKey, item) {
graph.removeNode(itemKey);
// Remove selection
var newSelection = [];
for (var i=0, len=this.selectedNodes.length; i<len; i++){
var selected = this.selectedNodes[i];
if (selected !== item) {
newSelection.push(selected);
}
}
this.selectedNodes = newSelection;
}.bind(editor),
copy: function (graph, itemKey, item) {
TheGraph.Clipboard.copy(graph, [itemKey]);
}
}, edgeActions = {
delete: function (graph, itemKey, item) {
graph.removeEdge(item.from.node, item.from.port, item.to.node, item.to.port);
// Remove selection
var newSelection = [];
for (var i=0, len=this.selectedEdges.length; i<len; i++){
var selected = this.selectedEdges[i];
if (selected !== item) {
newSelection.push(selected);
}
}
this.selectedEdges = newSelection;
}.bind(this)
};

var menus = {
main: {
icon: "sitemap",
e4: pasteMenu
},
edge: {
actions: edgeActions,
icon: "long-arrow-right",
s4: {
icon: "trash-o",
iconLabel: "delete",
action: edgeActions.delete
}
},
node: {
actions: nodeActions,
s4: {
icon: "trash-o",
iconLabel: "delete",
action: nodeActions.delete
},
w4: {
icon: "copy",
iconLabel: "copy",
action: nodeActions.copy
}
},
nodeInport: {
w4: {
icon: "sign-in",
iconLabel: "export",
action: function (graph, itemKey, item) {
var pub = item.port;
if (pub === 'start') {
pub = 'start1';
}
if (pub === 'graph') {
pub = 'graph1';
}
var count = 0;
// Make sure public is unique
while (graph.inports[pub]) {
count++;
pub = item.port + count;
}
var priNode = graph.getNode(item.process);
var metadata = {x:priNode.metadata.x-144, y:priNode.metadata.y};
graph.addInport(pub, item.process, item.port, metadata);
}
}
},
nodeOutport: {
e4: {
icon: "sign-out",
iconLabel: "export",
action: function (graph, itemKey, item) {
var pub = item.port;
var count = 0;
// Make sure public is unique
while (graph.outports[pub]) {
count++;
pub = item.port + count;
}
var priNode = graph.getNode(item.process);
var metadata = {x:priNode.metadata.x+144, y:priNode.metadata.y};
graph.addOutport(pub, item.process, item.port, metadata);
}
}
},
graphInport: {
icon: "sign-in",
iconColor: 2,
n4: {
label: "inport"
},
s4: {
icon: "trash-o",
iconLabel: "delete",
action: function (graph, itemKey, item) {
graph.removeInport(itemKey);
}
}
},
graphOutport: {
icon: "sign-out",
iconColor: 5,
n4: {
label: "outport"
},
s4: {
icon: "trash-o",
iconLabel: "delete",
action: function (graph, itemKey, item) {
graph.removeOutport(itemKey);
}
}
},
group: {
icon: "th",
s4: {
icon: "trash-o",
iconLabel: "ungroup",
action: function (graph, itemKey, item) {
graph.removeGroup(itemKey);
}
},
// TODO copy group?
e4: pasteMenu
},
selection: {
icon: "th",
w4: {
icon: "copy",
iconLabel: "copy",
action: function (graph, itemKey, item) {
TheGraph.Clipboard.copy(graph, item.nodes);
}
},
e4: pasteMenu
}
};
return menus;
}

module.exports = {
getDefaultMenus: getDefaultMenus,
};

0 comments on commit 0f258ca

Please sign in to comment.