Skip to content

Commit

Permalink
dragpan starting to work #129
Browse files Browse the repository at this point in the history
  • Loading branch information
@forresto
forresto committed Sep 12, 2013
1 parent ce70530 commit 0ac3904
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 41 deletions.
10 changes: 8 additions & 2 deletions iframework.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,15 +54,21 @@ button,

.graph {
background: #EEE url(img/meemoo-bg-graph.png) scroll repeat;
background-attachment: local;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
overflow: hidden;
border-right: 1px dotted #666;
}
.dragpan {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.edges {
z-index: 1;
}
Expand Down
20 changes: 14 additions & 6 deletions src/edge-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ $(function(){
if (this.model.Target) {
this.model.Target.parentNode.on("change:x change:y", this.redraw, this);
}

// Listen for pan
this.listenTo(this.model.parentGraph, "change:pan", this.redraw);
}
},
render: function () {
Expand Down Expand Up @@ -101,12 +104,17 @@ $(function(){
calcPositions: function () {
if (this.model) {
// Connected edge
var sourceName = this.model.get("source")[1];
var targetName = this.model.get("target")[1];
this.positions.fromX = this.model.Source.view.portOffsetLeft('out', sourceName);
this.positions.fromY = this.model.Source.view.portOffsetTop('out', sourceName);
this.positions.toX = this.model.Target.view.portOffsetLeft('in', targetName);
this.positions.toY = this.model.Target.view.portOffsetTop('in', targetName);
// var sourceName = this.model.get("source")[1];
// var targetName = this.model.get("target")[1];
var from = this.model.Source.view.portOffset();
var to = this.model.Target.view.portOffset();

console.log(from,to);

this.positions.fromX = from[0];
this.positions.fromY = from[1];
this.positions.toX = to[0];
this.positions.toY = to[1];
}
},
svgX: function () {
Expand Down
62 changes: 41 additions & 21 deletions src/graph-view.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
$(function(){

var template =
'<div class="edges">'+
'<svg class="edgesSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"></svg>'+
'<div class="dragpan">'+
'<div class="edges">'+
'<svg class="edgesSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"></svg>'+
'</div>'+
'<div class="nodes" />'+
'</div>'+
'<div class="nodes" />'+
'<div class="iframework-graph-nav" style="display:none;">'+
'<button class="show-parent-graph">back to parent graph</button>'+
'</div>';
Expand All @@ -18,8 +20,9 @@ $(function(){
"dragenter": "ignoreDrag",
"dragover": "ignoreDrag",
"drop": "drop",
"selectablestart": "selectableStart",
"selectablestop": "selectableStop",
"dragstart .dragpan": "dragStart",
"drag .dragpan": "drag",
"dragstop .dragpan": "dragStop",
"click .show-parent-graph": "showParentGraph"
},
unhidden: false,
Expand All @@ -45,15 +48,15 @@ $(function(){
accept: ".addnode, .canvas, .meemoo-plugin-images-thumbnail"
});

// Thanks Stu Cox http://stackoverflow.com/a/14578826/592125
var supportsTouch = 'ontouchstart' in document;
if (!supportsTouch) {
// Selectable messes up scroll on touch devices
this.$el.selectable({
filter: ".module",
delay: 20
this.$(".dragpan")
.css({
transform: "translate3d(0,0,0)"
})
.draggable({
helper: function(){
return $("<div>");
}
});
}

this.resizeEdgeSVG();

Expand Down Expand Up @@ -116,6 +119,7 @@ $(function(){
reader.readAsText(file);
}
}
return;
}

// Drop images or mods from libraries
Expand Down Expand Up @@ -212,14 +216,6 @@ $(function(){
svg.setAttribute("height", Math.round(height));
}
}, 100),
selectableStart: function () {
// Add a mask so that iframes don't steal mouse
this.maskFrames();
},
selectableStop: function (event) {
// Remove iframe masks
this.unmaskFrames();
},
selectAll: function () {
this.$(".module").addClass("ui-selected");
},
Expand Down Expand Up @@ -329,6 +325,30 @@ $(function(){
edge.view.redraw();
}
}, this);
},
dragStartPan: null,
dragStart: function(event, ui){
this.dragStartPan = this.model.get("pan");
},
drag: function(event, ui){
if (!this.dragStartPan) {return;}
var x = ui.offset.left;
var y = ui.offset.top;
this.$(".dragpan")
.css({
transform: "translate3d("+x+"px,"+y+"px,0)"
});
},
dragStop: function(event, ui){
if (!this.dragStartPan) {return;}
this.$(".dragpan")
.css({
transform: "translate3d(0,0,0)"
});
var x = this.dragStartPan[0] + ui.offset.left;
var y = this.dragStartPan[1] + ui.offset.top;
this.model.set("pan", [x,y]);
this.dragStartPan = null;
}

});
Expand Down
3 changes: 2 additions & 1 deletion src/graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ $(function(){
url: ""
},
nodes: [],
edges: []
edges: [],
pan: [0,0]
},
usedIds: [],
edgeCount: 0,
Expand Down
41 changes: 31 additions & 10 deletions src/node-box-view.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
$(function(){

var template =
'<div class="module" style="left:<%= get("x")-10 %>px;top:<%= get("y")-30 %>px;width:<%= get("w")+20 %>px;height:<%= get("h")+40 %>px;" >'+
'<div class="module" style="left:<%= get("x") %>px;top:<%= get("y") %>px;width:<%= get("w") %>px;height:<%= get("h") %>px;" >'+
'<div class="outer"></div>'+
'<div class="ports ports-in"></div>'+
'<div class="ports ports-out"></div>'+
Expand Down Expand Up @@ -68,6 +68,8 @@ $(function(){
// Disable selection for better drag+drop
this.$("h1").disableSelection();

this.listenTo(this.model.parentGraph, "change:pan", this.bumpPosition);

// Bring newest to top
this.mousedown();

Expand Down Expand Up @@ -103,6 +105,9 @@ $(function(){
_alsoDrag: [],
_dragDelta: {},
dragStart: function(event, ui){
// Don't drag graph
event.stopPropagation();

if (event.target !== this.$(".module")[0]) { return; }

// Add a mask so that iframes don't steal mouse
Expand Down Expand Up @@ -139,6 +144,9 @@ $(function(){
});
},
drag: function(event, ui){
// Don't drag graph
event.stopPropagation();

if (event.target !== this.$(".module")[0]) { return; }

// Drag other helpers
Expand All @@ -161,10 +169,15 @@ $(function(){
}
},
dragStop: function(event, ui){
// Don't drag graph
event.stopPropagation();

if (event.target !== this.$(".module")[0]) { return; }

var x = parseInt(ui.position.left, 10);
var y = parseInt(ui.position.top, 10);
console.log(ui);
var delta = [ui.position.left - ui.originalPosition.left, ui.position.top - ui.originalPosition.top];
var x = delta[0] + this.model.get("x");
var y = delta[1] + this.model.get("y");
this.moveToPosition(x,y);
// Also drag
if (this._alsoDrag.length) {
Expand All @@ -173,7 +186,9 @@ $(function(){
var helper = el.data("ui-draggable-alsodrag-helper");
var node = el.data("iframework-node-view");
// Move other node
node.moveToPosition(parseInt(helper.css("left"), 10), parseInt(helper.css("top"), 10));
var x = delta[0] + node.model.get("x");
var y = delta[1] + node.model.get("y");
node.moveToPosition(x, y);
// Remove helper
helper.remove();
el.data("ui-draggable-alsodrag-initial", null);
Expand All @@ -186,14 +201,20 @@ $(function(){
this.model.parentGraph.view.unmaskFrames();
},
moveToPosition: function(x, y){
this.model.set({
x: x,
y: y
});
this.bumpPosition();
},
bumpPosition: function(){
var pan = this.model.parentGraph.get("pan");
var x = pan[0] + this.model.get("x");
var y = pan[1] + this.model.get("y");
this.$(".module").css({
left: x,
top: y
});
this.model.set({
x: x + 10,
y: y + 30
});
},
resizestart: function (event, ui) {
// Add a mask so that iframes don't steal mouse
Expand All @@ -209,8 +230,8 @@ $(function(){
var newW = ui.size.width;
var newH = ui.size.height;
this.model.set({
w: newW - 20,
h: newH - 40
w: newW,
h: newH
});
if (this.Native) {
this.Native.resize(newW,newH);
Expand Down
16 changes: 15 additions & 1 deletion src/nodes/image-triangle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,28 @@

$(function(){


var template =
'<div class="control-points" style="position:absolute; top:0px; left:0px; z-index:2;" >'+
'<div title="top-left" class="control-point tl c0" data-handle="0" ></div>'+
'<div title="bottom-left" class="control-point bl c1" data-handle="1" ></div>'+
'<div title="bottom-right" class="control-point br c2" data-handle="2" ></div>'+
'</div>';

Iframework.NativeNodes["image-triangle"] = Iframework.NativeNodes["image"].extend({

info: {
title: "triangle",
description: "draw a triangle"
},
events: {
"dragstart .control-point": "startMove",
"drag .control-point": "move",
"dragstop .control-point": "stopMove"
},
initializeModule: function(){

this.canvas.style.maxWidth = "auto";
this.$(".control-point").draggable();
},
inputmatte: function (image) {
this._matte = image;
Expand Down
17 changes: 17 additions & 0 deletions src/port-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,23 @@ $(function(){
// Don't bubble
event.stopPropagation();
},
portOffset: function(){
var pan = this.model.parentNode.parentGraph.get("pan");
var index = this.$el.index();
// Node position
var x = pan[0] + this.model.parentNode.get("x");
var y = pan[1] + this.model.parentNode.get("y");
// Port position
if (this.model.isIn) {
x -= 70;
y += 9 + index*18;
} else {
var length = this.$el.siblings().length;
x += this.model.parentNode.get("w") + 70;
y += this.model.parentNode.get("h") - 9 - (length-index)*18;
}
return [x,y];
},
portOffsetLeft: function () {
var holeoffset = this.$('.hole').offset();
if (holeoffset) {
Expand Down

0 comments on commit 0ac3904

Please sign in to comment.