jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

fix stacking bug in rtl and css for rtl

codeClimate
Yotam Berkowitz 8 years ago
parent
60d81a81e4
commit
eb445d6d84
14 changed files with 116 additions and 71 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -0
      dist/vis.css
  2. +48
    -33
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +3
    -2
      lib/timeline/Core.js
  5. +16
    -8
      lib/timeline/Stack.js
  6. +20
    -9
      lib/timeline/Timeline.js
  7. +1
    -1
      lib/timeline/component/DataAxis.js
  8. +2
    -3
      lib/timeline/component/Group.js
  9. +0
    -5
      lib/timeline/component/ItemSet.js
  10. +6
    -3
      lib/timeline/component/TimeAxis.js
  11. +5
    -0
      lib/timeline/component/css/timeaxis.css
  12. +1
    -1
      lib/timeline/component/item/BoxItem.js
  13. +8
    -4
      lib/timeline/component/item/PointItem.js
  14. +0
    -1
      lib/timeline/component/item/RangeItem.js

+ 5
- 0
dist/vis.css View File

@ -637,6 +637,11 @@ input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
border-left: 1px solid;
}
.vis-time-axis .vis-grid.vis-vertical-rtl {
position: absolute;
border-right: 1px solid;
}
.vis-time-axis .vis-grid.vis-minor {
border-color: #e5e5e5;
}

+ 48
- 33
dist/vis.js View File

@ -11057,18 +11057,23 @@ return /******/ (function(modules) { // webpackBootstrap
var start = getStart(item);
var end = getEnd(item);
console.log(start, end);
console.log(this.options);
var left = start - (item.getWidthLeft() + 10) * factor;
var right = end + (item.getWidthRight() + 10) * factor;
if (this.options.rtl) {
var startSide = start - (item.getWidthRight() + 10) * factor;
var endSide = end + (item.getWidthLeft() + 10) * factor;
} else {
var startSide = start - (item.getWidthLeft() + 10) * factor;
var endSide = end + (item.getWidthRight() + 10) * factor;
}
if (left < min) {
min = left;
if (startSide < min) {
min = startSide;
minItem = item;
}
if (right > max) {
max = right;
if (endSide > max) {
max = endSide;
maxItem = item;
}
}.bind(_this));
@ -11079,8 +11084,13 @@ return /******/ (function(modules) { // webpackBootstrap
delta = _this.props.center.width - lhs - rhs; // px
if (delta > 0) {
min = getStart(minItem) - lhs * interval / delta; // ms
max = getEnd(maxItem) + rhs * interval / delta; // ms
if (_this.options.rtl) {
min = getStart(minItem) - rhs * interval / delta; // ms
max = getEnd(maxItem) + lhs * interval / delta; // ms
} else {
min = getStart(minItem) - lhs * interval / delta; // ms
max = getEnd(maxItem) + rhs * interval / delta; // ms
}
}
}
})();
@ -17357,6 +17367,8 @@ return /******/ (function(modules) { // webpackBootstrap
var contentContainer = this.dom.leftContainer;
this.dom.leftContainer = this.dom.rightContainer;
this.dom.rightContainer = contentContainer;
this.dom.container.style.direction = "rtl";
this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical-rtl';
}
this.options.orientation = { item: undefined, axis: undefined };
@ -17657,7 +17669,7 @@ return /******/ (function(modules) { // webpackBootstrap
var interval = range.max - range.min;
var min = new Date(range.min.valueOf() - interval * 0.01);
var max = new Date(range.max.valueOf() + interval * 0.01);
console.log(min, max);
var animation = options && options.animation !== undefined ? options.animation : true;
this.range.setRange(min, max, animation);
};
@ -19327,7 +19339,6 @@ return /******/ (function(modules) { // webpackBootstrap
ItemSet.prototype._onTouch = function (event) {
// store the touched item, used in _onDragStart
this.touchParams.item = this.itemFromTarget(event);
console.log(event.target.dragLeftItem, event.target.dragRightItem);
this.touchParams.dragLeftItem = event.target.dragLeftItem || false;
this.touchParams.dragRightItem = event.target.dragRightItem || false;
this.touchParams.itemProps = null;
@ -19478,7 +19489,6 @@ return /******/ (function(modules) { // webpackBootstrap
*/
ItemSet.prototype._onDrag = function (event) {
if (this.touchParams.itemProps) {
console.log("Ddddddddddddd");
event.stopPropagation();
var me = this;
@ -19526,12 +19536,10 @@ return /******/ (function(modules) { // webpackBootstrap
}
var updateTimeAllowed = me.options.editable.updateTime || props.item.editable === true;
console.log(props);
if (updateTimeAllowed) {
if (props.dragLeft) {
// drag left side of a range item
if (this.options.rtl) {
console.log("moving left");
if (itemData.end != undefined) {
var initialEnd = util.convert(props.data.end, 'Date');
var end = new Date(initialEnd.valueOf() + offset);
@ -19547,7 +19555,6 @@ return /******/ (function(modules) { // webpackBootstrap
}
}
} else if (props.dragRight) {
console.log("moving right");
// drag right side of a range item
if (this.options.rtl) {
if (itemData.start != undefined) {
@ -21078,8 +21085,8 @@ return /******/ (function(modules) { // webpackBootstrap
this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
} else {
// no custom order function, lazy stacking
this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
if (this.itemSet.options.stack) {
// TODO: ugly way to access options...
stack.stack(this.visibleItems, margin, restack);
@ -21095,10 +21102,9 @@ return /******/ (function(modules) { // webpackBootstrap
// calculate actual size and position
var foreground = this.dom.foreground;
this.top = foreground.offsetTop;
this.left = foreground.offsetLeft;
this.right = foreground.offsetLeft;
this.width = foreground.offsetWidth;
resized = util.updateProperty(this, 'height', height) || resized;
// recalculate size of label
resized = util.updateProperty(this.props.label, 'width', this.dom.inner.clientWidth) || resized;
resized = util.updateProperty(this.props.label, 'height', this.dom.inner.clientHeight) || resized;
@ -21538,7 +21544,6 @@ return /******/ (function(modules) { // webpackBootstrap
*/
exports.stack = function (items, margin, force) {
var i, iMax;
if (force) {
// reset top position of all items
for (i = 0, iMax = items.length; i < iMax; i++) {
@ -21559,7 +21564,7 @@ return /******/ (function(modules) { // webpackBootstrap
var collidingItem = null;
for (var j = 0, jj = items.length; j < jj; j++) {
var other = items[j];
if (other.top !== null && other !== item && other.stack && exports.collision(item, other, margin.item)) {
if (other.top !== null && other !== item && other.stack && exports.collision(item, other, margin.item, other.options.rtl)) {
collidingItem = other;
break;
}
@ -21612,8 +21617,14 @@ return /******/ (function(modules) { // webpackBootstrap
* minimum required margin.
* @return {boolean} true if a and b collide, else false
*/
exports.collision = function (a, b, margin) {
return a.left - margin.horizontal + EPSILON < b.left + b.width && a.left + a.width + margin.horizontal - EPSILON > b.left && a.top - margin.vertical + EPSILON < b.top + b.height && a.top + a.height + margin.vertical - EPSILON > b.top;
exports.collision = function (a, b, margin, rtl) {
var isCollision = null;
if (rtl) {
isCollision = a.right - margin.horizontal + EPSILON < b.right + b.width && a.right + a.width + margin.horizontal - EPSILON > b.right && a.top - margin.vertical + EPSILON < b.top + b.height && a.top + a.height + margin.vertical - EPSILON > b.top;
} else {
a.left - margin.horizontal + EPSILON < b.left + b.width && a.left + a.width + margin.horizontal - EPSILON > b.left && a.top - margin.vertical + EPSILON < b.top + b.height && a.top + a.height + margin.vertical - EPSILON > b.top;
}
return isCollision;
};
/***/ },
@ -21674,7 +21685,6 @@ return /******/ (function(modules) { // webpackBootstrap
* Repaint the item
*/
RangeItem.prototype.redraw = function () {
console.log("kkkkkkkkkkkkkkkkkkkkk");
var dom = this.dom;
if (!dom) {
// create DOM
@ -22521,7 +22531,7 @@ return /******/ (function(modules) { // webpackBootstrap
// reposition box, line, and dot
this.dom.box.style.right = this.right + 'px';
this.dom.line.style.right = start - this.props.line.width / 2 + 'px';
this.dom.line.style.right = start - this.props.line.width + 'px';
this.dom.dot.style.right = start - this.props.dot.width / 2 + 'px';
} else {
this.left = start - this.width / 2;
@ -22608,7 +22618,8 @@ return /******/ (function(modules) { // webpackBootstrap
},
content: {
height: 0,
marginLeft: 0
marginLeft: 0,
marginRight: 0
}
};
this.options = options;
@ -22701,7 +22712,11 @@ return /******/ (function(modules) { // webpackBootstrap
this.props.content.height = dom.content.offsetHeight;
// resize contents
dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
if (this.options.rtl) {
dom.content.style.marginRight = 2 * this.props.dot.width + 'px';
} else {
dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
}
//dom.content.style.marginRight = ... + 'px'; // TODO: margin right
// recalculate size
@ -22772,7 +22787,6 @@ return /******/ (function(modules) { // webpackBootstrap
PointItem.prototype.repositionY = function () {
var orientation = this.options.orientation.item;
var point = this.dom.point;
if (orientation == 'top') {
point.style.top = this.top + 'px';
} else {
@ -22793,7 +22807,7 @@ return /******/ (function(modules) { // webpackBootstrap
* @return {number}
*/
PointItem.prototype.getWidthRight = function () {
return this.width - this.props.dot.width;
return this.props.dot.width;
};
module.exports = PointItem;
@ -23339,6 +23353,7 @@ return /******/ (function(modules) { // webpackBootstrap
TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) {
// reuse redundant label
var label = this.dom.redundant.minorTexts.shift();
if (!label) {
// create new label
var content = document.createTextNode('');
@ -23430,13 +23445,13 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.options.rtl) {
line.style.left = "";
line.style.right = x - props.minorLineWidth / 2 + 'px';
line.className = 'vis-grid vis-vertical-rtl vis-minor ' + className;
} else {
line.style.left = x - props.minorLineWidth / 2 + 'px';
line.className = 'vis-grid vis-vertical vis-minor ' + className;
};
line.style.width = width + 'px';
line.className = 'vis-grid vis-vertical vis-minor ' + className;
return line;
};
@ -23469,15 +23484,15 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.options.rtl) {
line.style.left = "";
line.style.right = x - props.majorLineWidth / 2 + 'px';
line.className = 'vis-grid vis-vertical-rtl vis-major ' + className;
} else {
line.style.left = x - props.majorLineWidth / 2 + 'px';
line.className = 'vis-grid vis-vertical vis-major ' + className;
}
line.style.height = props.majorLineHeight + 'px';
line.style.width = width + 'px';
line.className = 'vis-grid vis-vertical vis-major ' + className;
return line;
};
@ -26162,7 +26177,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.hidden = false;
if (!this.dom.frame.parentNode) {
if (this.options.rtl) {
this.body.dom.right.appendChild(this.dom.frame);
this.body.dom.left.appendChild(this.dom.frame);
} else {
this.body.dom.left.appendChild(this.dom.frame);
}

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


+ 3
- 2
lib/timeline/Core.js View File

@ -232,7 +232,8 @@ Core.prototype.setOptions = function (options) {
var contentContainer = this.dom.leftContainer;
this.dom.leftContainer = this.dom.rightContainer;
this.dom.rightContainer = contentContainer;
}
this.dom.container.style.direction = "rtl";
this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical-rtl'; }
this.options.orientation = {item:undefined,axis:undefined};
if ('orientation' in options) {
@ -536,7 +537,7 @@ Core.prototype.fit = function(options) {
var interval = range.max - range.min;
var min = new Date(range.min.valueOf() - interval * 0.01);
var max = new Date(range.max.valueOf() + interval * 0.01);
console.log(min, max);
var animation = (options && options.animation !== undefined) ? options.animation : true;
this.range.setRange(min, max, animation);
};

+ 16
- 8
lib/timeline/Stack.js View File

@ -37,8 +37,7 @@ exports.orderByEnd = function(items) {
* items having a top===null will be re-stacked
*/
exports.stack = function(items, margin, force) {
var i, iMax;
var i, iMax;
if (force) {
// reset top position of all items
for (i = 0, iMax = items.length; i < iMax; i++) {
@ -59,7 +58,7 @@ exports.stack = function(items, margin, force) {
var collidingItem = null;
for (var j = 0, jj = items.length; j < jj; j++) {
var other = items[j];
if (other.top !== null && other !== item && other.stack && exports.collision(item, other, margin.item)) {
if (other.top !== null && other !== item && other.stack && exports.collision(item, other, margin.item, other.options.rtl)) {
collidingItem = other;
break;
}
@ -114,9 +113,18 @@ exports.nostack = function(items, margin, subgroups) {
* minimum required margin.
* @return {boolean} true if a and b collide, else false
*/
exports.collision = function(a, b, margin) {
return ((a.left - margin.horizontal + EPSILON) < (b.left + b.width) &&
(a.left + a.width + margin.horizontal - EPSILON) > b.left &&
(a.top - margin.vertical + EPSILON) < (b.top + b.height) &&
(a.top + a.height + margin.vertical - EPSILON) > b.top);
exports.collision = function(a, b, margin, rtl) {
var isCollision = null;
if (rtl) {
isCollision = ((a.right - margin.horizontal + EPSILON) < (b.right + b.width) &&
(a.right + a.width + margin.horizontal - EPSILON) > b.right &&
(a.top - margin.vertical + EPSILON) < (b.top + b.height) &&
(a.top + a.height + margin.vertical - EPSILON) > b.top);
} else {
((a.left - margin.horizontal + EPSILON) < (b.left + b.width) &&
(a.left + a.width + margin.horizontal - EPSILON) > b.left &&
(a.top - margin.vertical + EPSILON) < (b.top + b.height) &&
(a.top + a.height + margin.vertical - EPSILON) > b.top);
}
return isCollision;
};

+ 20
- 9
lib/timeline/Timeline.js View File

@ -415,18 +415,24 @@ Timeline.prototype.getItemRange = function () {
var start = getStart(item);
var end = getEnd(item);
console.log(start, end)
console.log(this.options);
var left = start - (item.getWidthLeft() + 10) * factor;
var right = end + (item.getWidthRight() + 10) * factor;
if (this.options.rtl) {
var startSide = start - (item.getWidthRight() + 10) * factor;
var endSide = end + (item.getWidthLeft() + 10) * factor;
} else {
var startSide = start - (item.getWidthLeft() + 10) * factor;
var endSide = end + (item.getWidthRight() + 10) * factor;
}
if (left < min) {
min = left;
if (startSide < min) {
min = startSide;
minItem = item;
}
if (right > max) {
max = right;
if (endSide > max) {
max = endSide;
maxItem = item;
}
}.bind(this));
@ -437,8 +443,13 @@ Timeline.prototype.getItemRange = function () {
var delta = this.props.center.width - lhs - rhs; // px
if (delta > 0) {
min = getStart(minItem) - lhs * interval / delta; // ms
max = getEnd(maxItem) + rhs * interval / delta; // ms
if (this.options.rtl) {
min = getStart(minItem) - rhs * interval / delta; // ms
max = getEnd(maxItem) + lhs * interval / delta; // ms
} else {
min = getStart(minItem) - lhs * interval / delta; // ms
max = getEnd(maxItem) + rhs * interval / delta; // ms
}
}
}
}

+ 1
- 1
lib/timeline/component/DataAxis.js View File

@ -213,7 +213,7 @@ DataAxis.prototype.show = function() {
this.hidden = false;
if (!this.dom.frame.parentNode) {
if (this.options.rtl) {
this.body.dom.right.appendChild(this.dom.frame);
this.body.dom.left.appendChild(this.dom.frame);
}
else {
this.body.dom.left.appendChild(this.dom.frame);

+ 2
- 3
lib/timeline/component/Group.js View File

@ -209,8 +209,8 @@ Group.prototype.redraw = function(range, margin, restack) {
}
else {
// no custom order function, lazy stacking
this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
if (this.itemSet.options.stack) { // TODO: ugly way to access options...
stack.stack(this.visibleItems, margin, restack);
}
@ -225,10 +225,9 @@ Group.prototype.redraw = function(range, margin, restack) {
// calculate actual size and position
var foreground = this.dom.foreground;
this.top = foreground.offsetTop;
this.left = foreground.offsetLeft;
this.right = foreground.offsetLeft;
this.width = foreground.offsetWidth;
resized = util.updateProperty(this, 'height', height) || resized;
// recalculate size of label
resized = util.updateProperty(this.props.label, 'width', this.dom.inner.clientWidth) || resized;
resized = util.updateProperty(this.props.label, 'height', this.dom.inner.clientHeight) || resized;

+ 0
- 5
lib/timeline/component/ItemSet.js View File

@ -1167,7 +1167,6 @@ ItemSet.prototype._constructByEndArray = function(array) {
ItemSet.prototype._onTouch = function (event) {
// store the touched item, used in _onDragStart
this.touchParams.item = this.itemFromTarget(event);
console.log(event.target.dragLeftItem, event.target.dragRightItem);
this.touchParams.dragLeftItem = event.target.dragLeftItem || false;
this.touchParams.dragRightItem = event.target.dragRightItem || false;
this.touchParams.itemProps = null;
@ -1325,7 +1324,6 @@ ItemSet.prototype._onDragStartAddItem = function (event) {
*/
ItemSet.prototype._onDrag = function (event) {
if (this.touchParams.itemProps) {
console.log("Ddddddddddddd");
event.stopPropagation();
var me = this;
@ -1374,12 +1372,10 @@ ItemSet.prototype._onDrag = function (event) {
var updateTimeAllowed = me.options.editable.updateTime ||
props.item.editable === true;
console.log(props);
if (updateTimeAllowed) {
if (props.dragLeft) {
// drag left side of a range item
if (this.options.rtl) {
console.log("moving left");
if (itemData.end != undefined) {
var initialEnd = util.convert(props.data.end, 'Date');
var end = new Date(initialEnd.valueOf() + offset);
@ -1396,7 +1392,6 @@ ItemSet.prototype._onDrag = function (event) {
}
}
else if (props.dragRight) {
console.log("moving right");
// drag right side of a range item
if (this.options.rtl) {
if (itemData.start != undefined) {

+ 6
- 3
lib/timeline/component/TimeAxis.js View File

@ -323,6 +323,7 @@ TimeAxis.prototype._repaintLabels = function () {
TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) {
// reuse redundant label
var label = this.dom.redundant.minorTexts.shift();
if (!label) {
// create new label
var content = document.createTextNode('');
@ -415,12 +416,14 @@ TimeAxis.prototype._repaintMinorLine = function (x, width, orientation, classNam
if (this.options.rtl) {
line.style.left = "";
line.style.right = (x - props.minorLineWidth / 2) + 'px';
line.className = 'vis-grid vis-vertical-rtl vis-minor ' + className;
} else {
line.style.left = (x - props.minorLineWidth / 2) + 'px';
line.className = 'vis-grid vis-vertical vis-minor ' + className;
};
line.style.width = width + 'px';
line.className = 'vis-grid vis-vertical vis-minor ' + className;
return line;
};
@ -455,15 +458,15 @@ TimeAxis.prototype._repaintMajorLine = function (x, width, orientation, classNam
if (this.options.rtl) {
line.style.left = "";
line.style.right = (x - props.majorLineWidth / 2) + 'px';
line.className = 'vis-grid vis-vertical-rtl vis-major ' + className;
} else {
line.style.left = (x - props.majorLineWidth / 2) + 'px';
line.className = 'vis-grid vis-vertical vis-major ' + className;
}
line.style.height = props.majorLineHeight + 'px';
line.style.width = width + 'px';
line.className = 'vis-grid vis-vertical vis-major ' + className;
return line;
};

+ 5
- 0
lib/timeline/component/css/timeaxis.css View File

@ -41,6 +41,11 @@
border-left: 1px solid;
}
.vis-time-axis .vis-grid.vis-vertical-rtl {
position: absolute;
border-right: 1px solid;
}
.vis-time-axis .vis-grid.vis-minor {
border-color: #e5e5e5;
}

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

@ -211,7 +211,7 @@ BoxItem.prototype.repositionX = function() {
// reposition box, line, and dot
this.dom.box.style.right = this.right + 'px';
this.dom.line.style.right = (start - this.props.line.width / 2) + 'px';
this.dom.line.style.right = (start - this.props.line.width) + 'px';
this.dom.dot.style.right = (start - this.props.dot.width / 2) + 'px';
} else {
this.left = start - this.width / 2;

+ 8
- 4
lib/timeline/component/item/PointItem.js View File

@ -19,7 +19,8 @@ function PointItem (data, conversion, options) {
},
content: {
height: 0,
marginLeft: 0
marginLeft: 0,
marginRight: 0
}
};
this.options = options;
@ -117,7 +118,11 @@ PointItem.prototype.redraw = function() {
this.props.content.height = dom.content.offsetHeight;
// resize contents
dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
if (this.options.rtl) {
dom.content.style.marginRight = 2 * this.props.dot.width + 'px';
} else {
dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
}
//dom.content.style.marginRight = ... + 'px'; // TODO: margin right
// recalculate size
@ -188,7 +193,6 @@ PointItem.prototype.repositionX = function() {
PointItem.prototype.repositionY = function() {
var orientation = this.options.orientation.item;
var point = this.dom.point;
if (orientation == 'top') {
point.style.top = this.top + 'px';
}
@ -210,7 +214,7 @@ PointItem.prototype.getWidthLeft = function () {
* @return {number}
*/
PointItem.prototype.getWidthRight = function () {
return this.width - this.props.dot.width;
return this.props.dot.width;
};
module.exports = PointItem;

+ 0
- 1
lib/timeline/component/item/RangeItem.js View File

@ -50,7 +50,6 @@ RangeItem.prototype.isVisible = function(range) {
* Repaint the item
*/
RangeItem.prototype.redraw = function() {
console.log("kkkkkkkkkkkkkkkkkkkkk");
var dom = this.dom;
if (!dom) {
// create DOM

Write Preview
Loading…
Cancel
Save