Browse Source

Fixed an overflow issue with the dots of BoxItems

v3_develop
jos 10 years ago
parent
commit
29b4e31b31
7 changed files with 4294 additions and 4276 deletions
  1. +2
    -1
      dist/vis.css
  2. +4279
    -4261
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +6
    -7
      lib/timeline/component/ItemSet.js
  5. +2
    -1
      lib/timeline/component/css/itemset.css
  6. +2
    -2
      lib/timeline/component/item/BoxItem.js
  7. +2
    -3
      test/timeline_groups.html

+ 2
- 1
dist/vis.css View File

@ -143,8 +143,9 @@
.vis.timeline .axis { .vis.timeline .axis {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 0;
left: 0; left: 0;
top: 0;
overflow: hidden;
} }
.vis.timeline .foreground .group { .vis.timeline .foreground .group {

+ 4279
- 4261
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


+ 6
- 7
lib/timeline/component/ItemSet.js View File

@ -476,6 +476,10 @@ ItemSet.prototype.redraw = function() {
frame = this.dom.frame, frame = this.dom.frame,
editable = options.editable.updateTime || options.editable.updateGroup; editable = options.editable.updateTime || options.editable.updateGroup;
// recalculate absolute position (before redrawing groups)
this.props.top = this.body.domProps.top.height + this.body.domProps.border.top;
this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;
// update class name // update class name
frame.className = 'itemset' + (editable ? ' editable' : ''); frame.className = 'itemset' + (editable ? ' editable' : '');
@ -515,17 +519,12 @@ ItemSet.prototype.redraw = function() {
// update frame height // update frame height
frame.style.height = asSize(height); frame.style.height = asSize(height);
// calculate actual size and position
this.props.top = frame.offsetTop;
this.props.left = frame.offsetLeft;
// calculate actual size
this.props.width = frame.offsetWidth; this.props.width = frame.offsetWidth;
this.props.height = height; this.props.height = height;
// reposition axis // reposition axis
this.dom.axis.style.top = asSize((orientation == 'top') ?
(this.body.domProps.top.height + this.body.domProps.border.top) :
(this.body.domProps.top.height + this.body.domProps.centerContainer.height));
this.dom.axis.style.left = '0';
this.dom.axis.style.height = this.body.domProps.background.height + 'px';
// check if this component is resized // check if this component is resized
resized = this._isResized() || resized; resized = this._isResized() || resized;

+ 2
- 1
lib/timeline/component/css/itemset.css View File

@ -17,8 +17,9 @@
.vis.timeline .axis { .vis.timeline .axis {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 0;
left: 0; left: 0;
top: 0;
overflow: hidden;
} }
.vis.timeline .foreground .group { .vis.timeline .foreground .group {

+ 2
- 2
lib/timeline/component/item/BoxItem.js View File

@ -206,6 +206,7 @@ BoxItem.prototype.repositionY = function() {
line.style.top = '0'; line.style.top = '0';
line.style.height = (this.parent.top + this.top + 1) + 'px'; line.style.height = (this.parent.top + this.top + 1) + 'px';
line.style.bottom = ''; line.style.bottom = '';
dot.style.top = (this.parent.itemSet.props.top -this.props.dot.height / 2) + 'px';
} }
else { // orientation 'bottom' else { // orientation 'bottom'
var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty
@ -214,9 +215,8 @@ BoxItem.prototype.repositionY = function() {
box.style.top = (this.parent.height - this.top - this.height || 0) + 'px'; box.style.top = (this.parent.height - this.top - this.height || 0) + 'px';
line.style.top = (itemSetHeight - lineHeight) + 'px'; line.style.top = (itemSetHeight - lineHeight) + 'px';
line.style.bottom = '0'; line.style.bottom = '0';
dot.style.top = (itemSetHeight - this.props.dot.height / 2) + 'px';
} }
dot.style.top = (-this.props.dot.height / 2) + 'px';
}; };
module.exports = BoxItem; module.exports = BoxItem;

+ 2
- 3
test/timeline_groups.html View File

@ -15,9 +15,6 @@
} }
</style> </style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment.min.js"></script>
<script src="../dist/vis.js"></script> <script src="../dist/vis.js"></script>
<link href="../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
</head> </head>
@ -43,6 +40,8 @@
<div id="visualization"></div> <div id="visualization"></div>
<script> <script>
var moment = vis.moment;
var now = moment().minutes(0).seconds(0).milliseconds(0); var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3; var groupCount = 3;
var itemCount = 20; var itemCount = 20;

Loading…
Cancel
Save