Skip to content

Commit

Permalink
select pasted nodes flowhub#167
Browse files Browse the repository at this point in the history
  • Loading branch information
@forresto
forresto committed Sep 18, 2014
1 parent 4e92692 commit 49e5dd8
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 54 deletions.
47 changes: 23 additions & 24 deletions the-graph-editor/the-graph-editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,29 +43,30 @@
displaySelectionGroup: true,
forceSelection: false,
created: function () {
// Default pan
this.pan = [0,0];
var pasteAction = function (graph, itemKey, item) {
var pasted = TheGraph.Clipboard.paste(graph);
console.log(pasted);
this.selectedNodes = pasted.nodes;
}.bind(this);
var pasteMenu = {
icon: "paste",
iconLabel: "paste",
action: pasteAction
};
// Default context menu defs
this.menus = {
main: {
icon: "long-arrow-right",
iconLabel: "main",
e4: {
icon: "paste",
iconLabel: "paste",
action: function (graph, itemKey, item) {
TheGraph.Clipboard.paste(graph);
}
}

icon: "sitemap",
e4: pasteMenu
},
edge: {
icon: "long-arrow-right",
s4: {
icon: "trash-o",
iconLabel: "delete",
action: function (graph, itemKey, item) {
graph.removeEdge( item.from.node, item.from.port, item.to.node, item.to.port );
graph.removeEdge(item.from.node, item.from.port, item.to.node, item.to.port);
}
}
},
Expand All @@ -74,15 +75,14 @@
icon: "trash-o",
iconLabel: "delete",
action: function (graph, itemKey, item) {
graph.removeNode( itemKey );
graph.removeNode(itemKey);
}
},
w4: {
icon: "copy",
iconLabel: "copy",
action: function (graph,itemKey,item) {
//TODO actually the node needs to be cloned so we can support Cut/Paste
TheGraph.Clipboard.copy(graph,[itemKey]);
action: function (graph, itemKey, item) {
TheGraph.Clipboard.copy(graph, [itemKey]);
}
}
},
Expand Down Expand Up @@ -164,21 +164,20 @@
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) {
//TODO actually the node needs to be cloned so we can support Cut/Paste

TheGraph.Clipboard.copy(graph,item.nodes);
action: function (graph, itemKey, item) {
TheGraph.Clipboard.copy(graph, item.nodes);
}
}

},
e4: pasteMenu
}
};
},
Expand Down
36 changes: 17 additions & 19 deletions the-graph/the-graph-app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,26 +365,24 @@
}.bind(this), 500);
},
onShowContext: function (event) {
event.preventDefault();
event.stopPropagation();
if (event.preventTap) { event.preventTap(); }

// Get mouse position
var x = event.x || event.clientX || 0;
var y = event.y || event.clientY || 0;

// App.showContext
this.showContext({
element: this,
type: "main",
x: x,
y: y,
graph: this.props.graph,
itemKey: (this.props.export ? this.props.exportKey : this.props.key),
item: (this.props.export ? this.props.export : this.props.node)
});
console.log("Context Menu");
event.preventDefault();
event.stopPropagation();
if (event.preventTap) { event.preventTap(); }

// Get mouse position
var x = event.x || event.clientX || 0;
var y = event.y || event.clientY || 0;

// App.showContext
this.showContext({
element: this,
type: "main",
x: x,
y: y,
graph: this.props.graph,
itemKey: 'graph',
item: this.props.graph
});
},
keyDown: function (event) {
// HACK metaKey global for taps https://github.com/Polymer/PointerGestures/issues/29
Expand Down
18 changes: 10 additions & 8 deletions the-graph/the-graph-clipboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
//Duplicate all the nodes before putting them in clipboard
//this will make this work also with cut/Paste and once we
//decide if/how we will implement cross-document copy&paste will work there too
clipboardContent = {nodes:[],edges:[]};
clipboardContent = {nodes:[], edges:[]};
var map = {};
var i, len;
for (i = 0, len = keys.length; i < len; i++) {
Expand All @@ -50,30 +50,32 @@

TheGraph.Clipboard.paste = function (graph) {
var map = {};
var pasted = {nodes:[], edges:[]};
var i, len;
for (i = 0, len = clipboardContent.nodes.length; i < len; i++) {
var node = clipboardContent.nodes[i];
var meta = cloneObject(node.metadata);
meta.x += 10;
meta.y += 10;
meta.x += 36;
meta.y += 36;
var newNode = graph.addNode(makeNewId(node.component), node.component, meta);
map[node.id] = newNode.id;
pasted.nodes.push(newNode);
}
for (i = 0, len = clipboardContent.edges.length; i < len; i++) {
var edge = clipboardContent.edges[i];
var fromNode = edge.from.node;
var toNode = edge.to.node;
var newEdgeMeta = cloneObject(edge.metadata);
var newEdge;
if (edge.from.hasOwnProperty('index') || edge.to.hasOwnProperty('index')) {
// One or both ports are addressable
var fromIndex = edge.from.index || null;
var toIndex = edge.to.index || null;
graph.addEdgeIndex(map[fromNode], edge.from.port, fromIndex, map[toNode], edge.to.port, toIndex, newEdgeMeta);
newEdge = graph.addEdgeIndex(map[edge.from.node], edge.from.port, fromIndex, map[edge.to.node], edge.to.port, toIndex, newEdgeMeta);
} else {
graph.addEdge(map[fromNode], edge.from.port, map[toNode], edge.to.port, newEdgeMeta);
newEdge = graph.addEdge(map[edge.from.node], edge.from.port, map[edge.to.node], edge.to.port, newEdgeMeta);
}
pasted.edges.push(newEdge);
}

return pasted;
};

})(this);
4 changes: 4 additions & 0 deletions the-graph/the-graph-edge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,10 @@
// Don't show native context menu
event.preventDefault();

// Don't tap graph on hold event
event.stopPropagation();
if (event.preventTap) { event.preventTap(); }

// Get mouse position
var x = event.x || event.clientX || 0;
var y = event.y || event.clientY || 0;
Expand Down
11 changes: 8 additions & 3 deletions the-graph/the-graph-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,11 +175,16 @@
}
}, false);
},
getPosition: function () {
return {
x: this.props.x !== undefined ? this.props.x : this.props.options.x || 0,
y: this.props.y !== undefined ? this.props.y : this.props.options.y || 0
}
},
render: function() {
var menu = this.props.menu;
var options = this.props.options;
var x = this.props.x !== undefined ? this.props.x : options.x;
var y = this.props.y !== undefined ? this.props.y : options.y;
var position = this.getPosition();

var circleXOptions = TheGraph.merge(TheGraph.config.menu.circleXPath, {});
var outlineCircleOptions = TheGraph.merge(TheGraph.config.menu.outlineCircle, {r: this.radius });
Expand Down Expand Up @@ -228,7 +233,7 @@
}

var containerOptions = {
transform: "translate("+x+","+y+")",
transform: "translate("+position.x+","+position.y+")",
children: children
};

Expand Down

0 comments on commit 49e5dd8

Please sign in to comment.