Browse Source

fixed self referencing node edge selection bug per #168

css_transitions
Alex de Mulder 10 years ago
parent
commit
7378bbc867
5 changed files with 1734 additions and 1790 deletions
  1. +128
    -55
      dist/vis.css
  2. +1537
    -1688
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +12
    -11
      dist/vis.min.js
  5. +56
    -35
      src/graph/Edge.js

+ 128
- 55
dist/vis.css View File

@ -2,34 +2,76 @@
} }
.vis.timeline.rootpanel {
.vis.timeline.root {
position: relative; position: relative;
border: 1px solid #bfbfbf;
overflow: hidden; overflow: hidden;
padding: 0;
margin: 0;
border: 1px solid #bfbfbf;
box-sizing: border-box; box-sizing: border-box;
/* FIXME: there is an issue with the height of the items when panel height is animated
-webkit-transition: height 4s ease-in-out;
transition: height 4s ease-in-out;
/**/
} }
.vis.timeline .vpanel {
.vis.timeline .vispanel {
position: absolute; position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .vpanel.side {
border-right: 1px solid #bfbfbf;
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border: 1px #bfbfbf;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right {
border-top-style: solid;
border-bottom-style: solid;
overflow: hidden;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border-left-style: solid;
border-right-style: solid;
}
.vis.timeline .background {
overflow: hidden;
}
.vis.timeline .vispanel > .content {
position: relative;
}
.vis.timeline .vispanel .shadow {
position: absolute;
width: 100%;
height: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
/* TODO: find a nice way to ensure shadows are drawn on top of items
z-index: 1;
*/
} }
.vis.timeline .vpanel.side.hidden {
display: none;
.vis.timeline .vispanel .shadow.top {
top: -1px;
left: 0;
} }
.vis.timeline .vispanel .shadow.bottom {
bottom: -1px;
left: 0;
}
.vis.timeline .labelset { .vis.timeline .labelset {
position: relative; position: relative;
@ -50,14 +92,12 @@
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline.top .labelset .vlabel {
border-top: 1px solid #bfbfbf;
border-bottom: none;
.vis.timeline .labelset .vlabel {
border-bottom: 1px solid #bfbfbf;
} }
.vis.timeline.bottom .labelset .vlabel {
border-top: none;
border-bottom: 1px solid #bfbfbf;
.vis.timeline .labelset .vlabel:last-child {
border-bottom: none;
} }
.vis.timeline .labelset .vlabel .inner { .vis.timeline .labelset .vlabel .inner {
@ -65,6 +105,10 @@
padding: 5px; padding: 5px;
} }
.vis.timeline .labelset .vlabel .inner.hidden {
padding: 0;
}
.vis.timeline .itemset { .vis.timeline .itemset {
position: relative; position: relative;
@ -72,38 +116,37 @@
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
/* FIXME: get transition working for rootpanel and itemset
-webkit-transition: height 4s ease-in-out;
transition: height 4s ease-in-out;
/**/
} }
.vis.timeline .background {
.vis.timeline .itemset .background,
.vis.timeline .itemset .foreground {
position: absolute;
width: 100%;
height: 100%;
} }
.vis.timeline .foreground {
.vis.timeline .itemset.foreground {
overflow: hidden;
} }
.vis.timeline .axis { .vis.timeline .axis {
overflow: visible;
position: absolute;
width: 100%;
height: 0;
left: 1px;
z-index: 1;
} }
.vis.timeline .group { .vis.timeline .group {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #bfbfbf;
} }
.vis.timeline.top .group {
border-top: 1px solid #bfbfbf;
.vis.timeline .group:last-child {
border-bottom: none; border-bottom: none;
} }
.vis.timeline.bottom .group {
border-top: none;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .item { .vis.timeline .item {
position: absolute; position: absolute;
@ -113,11 +156,6 @@
background-color: #D5DDF6; background-color: #D5DDF6;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
/* TODO: enable css transitions
-webkit-transition: top .4s ease-in-out, bottom .4s ease-in-out;
transition: top .4s ease-in-out, bottom .4s ease-in-out;
/**/
} }
.vis.timeline .item.selected { .vis.timeline .item.selected {
@ -126,7 +164,7 @@
z-index: 999; z-index: 999;
} }
.vis.timeline.editable .item.selected {
.vis.timeline .editable .item.selected {
cursor: move; cursor: move;
} }
@ -176,11 +214,6 @@
width: 0; width: 0;
border-left-width: 1px; border-left-width: 1px;
border-left-style: solid; border-left-style: solid;
/* TODO: enable css transitions
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
/**/
} }
.vis.timeline .item .content { .vis.timeline .item .content {
@ -223,7 +256,22 @@
} }
.vis.timeline .timeaxis { .vis.timeline .timeaxis {
position: relative;
overflow: hidden;
}
.vis.timeline .timeaxis.foreground {
top: 0;
left: 0;
width: 100%;
}
.vis.timeline .timeaxis.background {
position: absolute; position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
.vis.timeline .timeaxis .text { .vis.timeline .timeaxis .text {
@ -248,14 +296,6 @@
border-right: 1px solid; border-right: 1px solid;
} }
.vis.timeline .timeaxis .grid.horizontal {
position: absolute;
left: 0;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .timeaxis .grid.minor { .vis.timeline .timeaxis .grid.minor {
border-color: #e5e5e5; border-color: #e5e5e5;
} }
@ -267,14 +307,47 @@
.vis.timeline .currenttime { .vis.timeline .currenttime {
background-color: #FF7F6E; background-color: #FF7F6E;
width: 2px; width: 2px;
z-index: 9;
z-index: 1;
} }
.vis.timeline .customtime { .vis.timeline .customtime {
background-color: #6E94FF; background-color: #6E94FF;
width: 2px; width: 2px;
cursor: move; cursor: move;
z-index: 9;
z-index: 1;
}
.vis.timeline.root {
/*
-webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out;
*/
}
.vis.timeline .vispanel {
/*
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
*/
}
.vis.timeline .axis {
/*
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
*/
}
/* TODO: get animation working nicely
.vis.timeline .item {
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
}
.vis.timeline .item.line {
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
} }
/**/
div.graph-manipulationDiv { div.graph-manipulationDiv {
border-width:0px; border-width:0px;
border-bottom: 1px; border-bottom: 1px;

+ 1537
- 1688
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 12
- 11
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 56
- 35
src/graph/Edge.js View File

@ -721,44 +721,65 @@ Edge.prototype._drawArrow = function(ctx) {
* @private * @private
*/ */
Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
if (this.smooth == true) {
var minDistance = 1e9;
var i,t,x,y,dx,dy;
for (i = 0; i < 10; i++) {
t = 0.1*i;
x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*this.via.x + Math.pow(t,2)*x2;
y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*this.via.y + Math.pow(t,2)*y2;
dx = Math.abs(x3-x);
dy = Math.abs(y3-y);
minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
}
return minDistance
}
else {
var px = x2-x1,
py = y2-y1,
something = px*px + py*py,
u = ((x3 - x1) * px + (y3 - y1) * py) / something;
if (u > 1) {
u = 1;
}
else if (u < 0) {
u = 0;
if (this.from != this.to) {
if (this.smooth == true) {
var minDistance = 1e9;
var i,t,x,y,dx,dy;
for (i = 0; i < 10; i++) {
t = 0.1*i;
x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*this.via.x + Math.pow(t,2)*x2;
y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*this.via.y + Math.pow(t,2)*y2;
dx = Math.abs(x3-x);
dy = Math.abs(y3-y);
minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
}
return minDistance
} }
else {
var px = x2-x1,
py = y2-y1,
something = px*px + py*py,
u = ((x3 - x1) * px + (y3 - y1) * py) / something;
if (u > 1) {
u = 1;
}
else if (u < 0) {
u = 0;
}
var x = x1 + u * px,
y = y1 + u * py,
dx = x - x3,
dy = y - y3;
var x = x1 + u * px,
y = y1 + u * py,
dx = x - x3,
dy = y - y3;
//# Note: If the actual distance does not matter,
//# if you only want to compare what this function
//# returns to other results of this function, you
//# can just return the squared distance instead
//# (i.e. remove the sqrt) to gain a little performance
//# Note: If the actual distance does not matter,
//# if you only want to compare what this function
//# returns to other results of this function, you
//# can just return the squared distance instead
//# (i.e. remove the sqrt) to gain a little performance
return Math.sqrt(dx*dx + dy*dy);
return Math.sqrt(dx*dx + dy*dy);
}
}
else {
var x, y, dx, dy;
var radius = this.length / 4;
var node = this.from;
if (!node.width) {
node.resize(ctx);
}
if (node.width > node.height) {
x = node.x + node.width / 2;
y = node.y - radius;
}
else {
x = node.x + radius;
y = node.y - node.height / 2;
}
dx = x - x3;
dy = y - y3;
return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
} }
}; };
@ -787,4 +808,4 @@ Edge.prototype.positionBezierNode = function() {
this.via.x = 0.5 * (this.from.x + this.to.x); this.via.x = 0.5 * (this.from.x + this.to.x);
this.via.y = 0.5 * (this.from.y + this.to.y); this.via.y = 0.5 * (this.from.y + this.to.y);
} }
};
};

Loading…
Cancel
Save