Permalink
Browse files

Fix navigation bug in demo app.

  • Loading branch information...
1 parent 2dc32f9 commit aaceb37e1f5d8be9e3115004612715eab816ed29 @fhoehl committed Oct 10, 2012
Showing with 53 additions and 53 deletions.
  1. +1 −6 demos/app.html
  2. +2 −3 demos/css/app.css
  3. +3 −2 demos/css/nodal.css
  4. +17 −13 demos/js/app.js
  5. +7 −8 demos/js/nodal.js
  6. +3 −2 dist/nodal.css
  7. +7 −8 dist/nodal.js
  8. +2 −2 dist/nodal.min.css
  9. +4 −1 lib/css/nodal.less
  10. +7 −8 lib/view.js
View
@@ -37,12 +37,7 @@
</div>
</div>
- <div class="container-fluid">
- <div class="row-fluid">
- <div id="nodal-editor" class="nodal-graph"></div>
- </div>
- </div>
-
+ <div id="nodal-editor" class="nodal-graph"></div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
View
@@ -1,5 +1,4 @@
body {
- background: #f7f5f5;
- padding-top: 60px;
- padding-bottom: 40px;
+ background: #d7d5d5;
+ padding-top: 40px;
}
View
@@ -1,11 +1,12 @@
.nodal-graph {
- position: relative;
- overflow: hidden;
+ position: relative;
+ overflow: hidden;
}
.vertices {
width: 100%;
height: 100%;
position: absolute;
+ margin: 10px;
}
.links {
top: 0;
View
@@ -148,27 +148,31 @@ App.ui.handlers.documentMouseDownMoveHandler = function(event) {
deltaY = - App.ui.originY + uy,
canvasEl = document.getElementById("nodal-editor"),
mX = parseFloat(canvasEl.style.width, 10),
- nX= Math.max(100, (mX + deltaX / canvasEl.offsetWidth)),
+ nX= Math.max(window.innerWidth, (mX + deltaX / canvasEl.offsetWidth)),
mY = parseFloat(canvasEl.style.height, 10),
- nY = Math.max(100, (mY + deltaY / canvasEl.offsetHeight));
+ nY = Math.max(window.innerHeight, (mY + deltaY / canvasEl.offsetHeight));
+
+ var nnX = mX + deltaX / canvasEl.offsetWidth,
+ nnY = mY + deltaY / canvasEl.offsetHeight;
console.log(mY, deltaY, canvasEl.offsetHeight);
- canvasEl.style.width = nX + "%";
- canvasEl.style.height = nY + "%";
+ canvasEl.style.width = nnX + "px";
+ canvasEl.style.height = nnY + "px";
window.scroll(window.scrollX + deltaX, window.scrollY + deltaY);
};
App.ui.handlers.documentMouseDownHandler = function(event) {
- console.log(event.target, event.currentTarget);
- event.preventDefault();
- event.stopPropagation();
- event.target.style.cursor = "move";
- document.addEventListener("mouseup", App.ui.handlers.documentMouseUpHandler, false);
- App.ui.originX = event.clientX;
- App.ui.originY = event.clientY;
- App.ui.targetEl.addEventListener("mousemove", App.ui.handlers.documentMouseDownMoveHandler, true);
+ if (event.target, event.currentTarget) {
+ event.preventDefault();
+ event.stopPropagation();
+ event.target.style.cursor = "move";
+ document.addEventListener("mouseup", App.ui.handlers.documentMouseUpHandler, false);
+ App.ui.originX = event.clientX;
+ App.ui.originY = event.clientY;
+ App.ui.targetEl.addEventListener("mousemove", App.ui.handlers.documentMouseDownMoveHandler, true);
+ }
};
App.ui.handlers.documentMouseUpHandler = function(event) {
@@ -190,6 +194,6 @@ App.ui.handlers.register = function() {
window.addEventListener("resize", resizeHandler, false);
resizeHandler();
- //targetEl.addEventListener("mousedown", App.ui.handlers.documentMouseDownHandler, true);
+ targetEl.addEventListener("mousedown", App.ui.handlers.documentMouseDownHandler, false);
};
View
@@ -427,7 +427,6 @@ nodal.view.VertexView = move.Object({
},
startDrag: function(event) {
- console.log(event.target, event.currentTarget, event.target.parentNode);
if (!event.target.classList.contains("label")) {
return;
}
@@ -454,8 +453,8 @@ nodal.view.VertexView = move.Object({
var x = event.clientX + window.scrollX,
y = event.clientY + window.scrollY;
- this.el.style.left = (this.elStartLeft + x - this.cursorStartX) + "px";
- this.el.style.top = (this.elStartTop + y - this.cursorStartY) + "px";
+ this.el.style.left = Math.max(0, (this.elStartLeft + x - this.cursorStartX)) + "px";
+ this.el.style.top = Math.max(0, (this.elStartTop + y - this.cursorStartY)) + "px";
event.preventDefault();
event.stopPropagation();
@@ -602,11 +601,11 @@ nodal.view.GraphView = move.Object({
var v = event.vertex;
this.linksViews.forEach(function(linkView) {
if (linkView.src == v || linkView.dst == v) {
- var x1 = $(linkView.srcAnchorEl).offset().left + 12,
- y1 = $(linkView.srcAnchorEl).offset().top + 12,
- x2 = $(linkView.dstAnchorEl).offset().left + 12,
- y2 = $(linkView.dstAnchorEl).offset().top + 12;
-
+ var x1 = $(linkView.srcAnchorEl).offset().left + 12 - $("#nodal-editor").offset().left,
+ y1 = $(linkView.srcAnchorEl).offset().top + 12 - $("#nodal-editor").offset().top,
+ x2 = $(linkView.dstAnchorEl).offset().left + 12 - $("#nodal-editor").offset().left,
+ y2 = $(linkView.dstAnchorEl).offset().top + 12 - $("#nodal-editor").offset().top;
+
linkView.render(x1, y1, x2, y2);
}
}, this);
View
@@ -1,11 +1,12 @@
.nodal-graph {
- position: relative;
- overflow: hidden;
+ position: relative;
+ overflow: hidden;
}
.vertices {
width: 100%;
height: 100%;
position: absolute;
+ margin: 10px;
}
.links {
top: 0;
View
@@ -427,7 +427,6 @@ nodal.view.VertexView = move.Object({
},
startDrag: function(event) {
- console.log(event.target, event.currentTarget, event.target.parentNode);
if (!event.target.classList.contains("label")) {
return;
}
@@ -454,8 +453,8 @@ nodal.view.VertexView = move.Object({
var x = event.clientX + window.scrollX,
y = event.clientY + window.scrollY;
- this.el.style.left = (this.elStartLeft + x - this.cursorStartX) + "px";
- this.el.style.top = (this.elStartTop + y - this.cursorStartY) + "px";
+ this.el.style.left = Math.max(0, (this.elStartLeft + x - this.cursorStartX)) + "px";
+ this.el.style.top = Math.max(0, (this.elStartTop + y - this.cursorStartY)) + "px";
event.preventDefault();
event.stopPropagation();
@@ -602,11 +601,11 @@ nodal.view.GraphView = move.Object({
var v = event.vertex;
this.linksViews.forEach(function(linkView) {
if (linkView.src == v || linkView.dst == v) {
- var x1 = $(linkView.srcAnchorEl).offset().left + 12,
- y1 = $(linkView.srcAnchorEl).offset().top + 12,
- x2 = $(linkView.dstAnchorEl).offset().left + 12,
- y2 = $(linkView.dstAnchorEl).offset().top + 12;
-
+ var x1 = $(linkView.srcAnchorEl).offset().left + 12 - $("#nodal-editor").offset().left,
+ y1 = $(linkView.srcAnchorEl).offset().top + 12 - $("#nodal-editor").offset().top,
+ x2 = $(linkView.dstAnchorEl).offset().left + 12 - $("#nodal-editor").offset().left,
+ y2 = $(linkView.dstAnchorEl).offset().top + 12 - $("#nodal-editor").offset().top;
+
linkView.render(x1, y1, x2, y2);
}
}, this);
View
@@ -1,5 +1,5 @@
-
-.vertices{width:100%;height:100%;position:absolute;}
+.nodal-graph{position:relative;overflow:hidden;}
+.vertices{width:100%;height:100%;position:absolute;margin:10px;}
.links{top:0;left:0;width:100%;height:100%;position:absolute;z-index:-1;pointer-events:none;}
.vertex{background:white;border-radius:5px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);display:inline-block;position:absolute;}
.vertex .content{border-radius:5px;margin:0 6px 0 6px;min-width:10em;overflow:hidden;padding:1em 1.25em 1.25em 1.25em;position:relative;z-index:1;}
View
@@ -1,10 +1,13 @@
-.graph {
+.nodal-graph {
+ position: relative;
+ overflow: hidden;
}
.vertices {
width: 100%;
height: 100%;
position: absolute;
+ margin: 10px;
}
.links {
View
@@ -137,7 +137,6 @@ nodal.view.VertexView = move.Object({
},
startDrag: function(event) {
- console.log(event.target, event.currentTarget, event.target.parentNode);
if (!event.target.classList.contains("label")) {
return;
}
@@ -164,8 +163,8 @@ nodal.view.VertexView = move.Object({
var x = event.clientX + window.scrollX,
y = event.clientY + window.scrollY;
- this.el.style.left = (this.elStartLeft + x - this.cursorStartX) + "px";
- this.el.style.top = (this.elStartTop + y - this.cursorStartY) + "px";
+ this.el.style.left = Math.max(0, (this.elStartLeft + x - this.cursorStartX)) + "px";
+ this.el.style.top = Math.max(0, (this.elStartTop + y - this.cursorStartY)) + "px";
event.preventDefault();
event.stopPropagation();
@@ -312,11 +311,11 @@ nodal.view.GraphView = move.Object({
var v = event.vertex;
this.linksViews.forEach(function(linkView) {
if (linkView.src == v || linkView.dst == v) {
- var x1 = $(linkView.srcAnchorEl).offset().left + 12,
- y1 = $(linkView.srcAnchorEl).offset().top + 12,
- x2 = $(linkView.dstAnchorEl).offset().left + 12,
- y2 = $(linkView.dstAnchorEl).offset().top + 12;
-
+ var x1 = $(linkView.srcAnchorEl).offset().left + 12 - $("#nodal-editor").offset().left,
+ y1 = $(linkView.srcAnchorEl).offset().top + 12 - $("#nodal-editor").offset().top,
+ x2 = $(linkView.dstAnchorEl).offset().left + 12 - $("#nodal-editor").offset().left,
+ y2 = $(linkView.dstAnchorEl).offset().top + 12 - $("#nodal-editor").offset().top;
+
linkView.render(x1, y1, x2, y2);
}
}, this);

0 comments on commit aaceb37

Please sign in to comment.