Permalink
Browse files

Fix for navigation in demo.

* Add a friction when panning in the canvas.
* Fix issue whith mouse events in node ui.
  • Loading branch information...
1 parent aaceb37 commit be77d6ad498b8699947442e07152f4ae4d1915d0 @fhoehl committed Oct 10, 2012
Showing with 57 additions and 41 deletions.
  1. +0 −2 demos/css/nodal.css
  2. +11 −10 demos/js/app.js
  3. +15 −8 demos/js/nodal.js
  4. +0 −2 dist/nodal.css
  5. +15 −8 dist/nodal.js
  6. +1 −1 dist/nodal.min.css
  7. +0 −2 lib/css/nodal.less
  8. +15 −8 lib/view.js
View
2 demos/css/nodal.css
@@ -3,8 +3,6 @@
overflow: hidden;
}
.vertices {
- width: 100%;
- height: 100%;
position: absolute;
margin: 10px;
}
View
21 demos/js/app.js
@@ -144,27 +144,28 @@ App.ui.handlers = {};
App.ui.handlers.documentMouseDownMoveHandler = function(event) {
var ux = event.clientX,
uy = event.clientY,
- deltaX = - App.ui.originX + ux,
- deltaY = - App.ui.originY + uy,
+ friction = 0.02;
+ deltaX = (- App.ui.originX + ux) * friction,
+ deltaY = (- App.ui.originY + uy) * friction,
canvasEl = document.getElementById("nodal-editor"),
mX = parseFloat(canvasEl.style.width, 10),
- nX= Math.max(window.innerWidth, (mX + deltaX / canvasEl.offsetWidth)),
+ nX= Math.max(window.innerWidth, (mX + deltaX)),
mY = parseFloat(canvasEl.style.height, 10),
- nY = Math.max(window.innerHeight, (mY + deltaY / canvasEl.offsetHeight));
+ nY = Math.max(window.innerHeight, (mY + deltaY));
- var nnX = mX + deltaX / canvasEl.offsetWidth,
- nnY = mY + deltaY / canvasEl.offsetHeight;
+ var nnX = mX + deltaX,
+ nnY = mY + deltaY;
console.log(mY, deltaY, canvasEl.offsetHeight);
- canvasEl.style.width = nnX + "px";
- canvasEl.style.height = nnY + "px";
+ canvasEl.style.width = nX + "px";
+ canvasEl.style.height = nY + "px";
window.scroll(window.scrollX + deltaX, window.scrollY + deltaY);
};
App.ui.handlers.documentMouseDownHandler = function(event) {
- if (event.target, event.currentTarget) {
+ if (event.target == event.currentTarget) {
event.preventDefault();
event.stopPropagation();
event.target.style.cursor = "move";
@@ -194,6 +195,6 @@ App.ui.handlers.register = function() {
window.addEventListener("resize", resizeHandler, false);
resizeHandler();
- targetEl.addEventListener("mousedown", App.ui.handlers.documentMouseDownHandler, false);
+ targetEl.addEventListener("mousedown", App.ui.handlers.documentMouseDownHandler);
};
View
23 demos/js/nodal.js
@@ -322,7 +322,7 @@ nodal.view.VertexView = move.Object({
title.className = "label";
title.appendChild(document.createTextNode(model.props.name));
- title.addEventListener("mousedown", this.startDrag.bind(this), true);
+ title.addEventListener("mousedown", this.startDrag.bind(this));
content.appendChild(title);
@@ -343,8 +343,10 @@ nodal.view.VertexView = move.Object({
$(":input[nd-output]", ui.parent()).each(function(index, element) {
var outputIndex = element.getAttribute("nd-output");
- $(element).on("change", function(event) {
-
+ element.addEventListener("change", function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
//Updating the model.
cls.model.outSockets[outputIndex].data = $(element).val();
@@ -362,7 +364,10 @@ nodal.view.VertexView = move.Object({
$(":input[nd-prop]", ui.parent()).each(function(index, element) {
var propName = element.getAttribute("nd-prop");
- $(element).on("change", function(event) {
+ element.addEventListener("change", function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
cls.model.props[propName] = event.target.value;
cls.trigger("node-prop-change", {
@@ -430,6 +435,8 @@ nodal.view.VertexView = move.Object({
if (!event.target.classList.contains("label")) {
return;
}
+
+ event.stopPropagation();
var x = event.clientX + window.scrollX,
y = event.clientY + window.scrollY;
@@ -620,10 +627,10 @@ nodal.view.GraphView = move.Object({
}
var srcAnchorEl = $(event.srcAnchorEl),
- x1 = srcAnchorEl.offset().left + 12,
- y1 = srcAnchorEl.offset().top + 12,
- x2 = event.mouseEvent.clientX + window.scrollX,
- y2 = event.mouseEvent.clientY + window.scrollY;
+ x1 = srcAnchorEl.offset().left + 12 - $("#nodal-editor").offset().left,
+ y1 = srcAnchorEl.offset().top + 12 - $("#nodal-editor").offset().top,
+ x2 = event.mouseEvent.clientX + window.scrollX - $("#nodal-editor").offset().left,
+ y2 = event.mouseEvent.clientY + window.scrollY - $("#nodal-editor").offset().top;
this.anchorDragEdgeEl.setAttributeNS(null, "x1", x1);
this.anchorDragEdgeEl.setAttributeNS(null, "y1", y1);
View
2 dist/nodal.css
@@ -3,8 +3,6 @@
overflow: hidden;
}
.vertices {
- width: 100%;
- height: 100%;
position: absolute;
margin: 10px;
}
View
23 dist/nodal.js
@@ -322,7 +322,7 @@ nodal.view.VertexView = move.Object({
title.className = "label";
title.appendChild(document.createTextNode(model.props.name));
- title.addEventListener("mousedown", this.startDrag.bind(this), true);
+ title.addEventListener("mousedown", this.startDrag.bind(this));
content.appendChild(title);
@@ -343,8 +343,10 @@ nodal.view.VertexView = move.Object({
$(":input[nd-output]", ui.parent()).each(function(index, element) {
var outputIndex = element.getAttribute("nd-output");
- $(element).on("change", function(event) {
-
+ element.addEventListener("change", function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
//Updating the model.
cls.model.outSockets[outputIndex].data = $(element).val();
@@ -362,7 +364,10 @@ nodal.view.VertexView = move.Object({
$(":input[nd-prop]", ui.parent()).each(function(index, element) {
var propName = element.getAttribute("nd-prop");
- $(element).on("change", function(event) {
+ element.addEventListener("change", function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
cls.model.props[propName] = event.target.value;
cls.trigger("node-prop-change", {
@@ -430,6 +435,8 @@ nodal.view.VertexView = move.Object({
if (!event.target.classList.contains("label")) {
return;
}
+
+ event.stopPropagation();
var x = event.clientX + window.scrollX,
y = event.clientY + window.scrollY;
@@ -620,10 +627,10 @@ nodal.view.GraphView = move.Object({
}
var srcAnchorEl = $(event.srcAnchorEl),
- x1 = srcAnchorEl.offset().left + 12,
- y1 = srcAnchorEl.offset().top + 12,
- x2 = event.mouseEvent.clientX + window.scrollX,
- y2 = event.mouseEvent.clientY + window.scrollY;
+ x1 = srcAnchorEl.offset().left + 12 - $("#nodal-editor").offset().left,
+ y1 = srcAnchorEl.offset().top + 12 - $("#nodal-editor").offset().top,
+ x2 = event.mouseEvent.clientX + window.scrollX - $("#nodal-editor").offset().left,
+ y2 = event.mouseEvent.clientY + window.scrollY - $("#nodal-editor").offset().top;
this.anchorDragEdgeEl.setAttributeNS(null, "x1", x1);
this.anchorDragEdgeEl.setAttributeNS(null, "y1", y1);
View
2 dist/nodal.min.css
@@ -1,5 +1,5 @@
.nodal-graph{position:relative;overflow:hidden;}
-.vertices{width:100%;height:100%;position:absolute;margin:10px;}
+.vertices{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
2 lib/css/nodal.less
@@ -4,8 +4,6 @@
}
.vertices {
- width: 100%;
- height: 100%;
position: absolute;
margin: 10px;
}
View
23 lib/view.js
@@ -32,7 +32,7 @@ nodal.view.VertexView = move.Object({
title.className = "label";
title.appendChild(document.createTextNode(model.props.name));
- title.addEventListener("mousedown", this.startDrag.bind(this), true);
+ title.addEventListener("mousedown", this.startDrag.bind(this));
content.appendChild(title);
@@ -53,8 +53,10 @@ nodal.view.VertexView = move.Object({
$(":input[nd-output]", ui.parent()).each(function(index, element) {
var outputIndex = element.getAttribute("nd-output");
- $(element).on("change", function(event) {
-
+ element.addEventListener("change", function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
//Updating the model.
cls.model.outSockets[outputIndex].data = $(element).val();
@@ -72,7 +74,10 @@ nodal.view.VertexView = move.Object({
$(":input[nd-prop]", ui.parent()).each(function(index, element) {
var propName = element.getAttribute("nd-prop");
- $(element).on("change", function(event) {
+ element.addEventListener("change", function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
cls.model.props[propName] = event.target.value;
cls.trigger("node-prop-change", {
@@ -140,6 +145,8 @@ nodal.view.VertexView = move.Object({
if (!event.target.classList.contains("label")) {
return;
}
+
+ event.stopPropagation();
var x = event.clientX + window.scrollX,
y = event.clientY + window.scrollY;
@@ -330,10 +337,10 @@ nodal.view.GraphView = move.Object({
}
var srcAnchorEl = $(event.srcAnchorEl),
- x1 = srcAnchorEl.offset().left + 12,
- y1 = srcAnchorEl.offset().top + 12,
- x2 = event.mouseEvent.clientX + window.scrollX,
- y2 = event.mouseEvent.clientY + window.scrollY;
+ x1 = srcAnchorEl.offset().left + 12 - $("#nodal-editor").offset().left,
+ y1 = srcAnchorEl.offset().top + 12 - $("#nodal-editor").offset().top,
+ x2 = event.mouseEvent.clientX + window.scrollX - $("#nodal-editor").offset().left,
+ y2 = event.mouseEvent.clientY + window.scrollY - $("#nodal-editor").offset().top;
this.anchorDragEdgeEl.setAttributeNS(null, "x1", x1);
this.anchorDragEdgeEl.setAttributeNS(null, "y1", y1);

0 comments on commit be77d6a

Please sign in to comment.