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
Unified 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; 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 { .vis-time-axis .vis-grid.vis-minor {
border-color: #e5e5e5; border-color: #e5e5e5;
} }

+ 48
- 33
dist/vis.js View File

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

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

@ -41,6 +41,11 @@
border-left: 1px solid; 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 { .vis-time-axis .vis-grid.vis-minor {
border-color: #e5e5e5; 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 // reposition box, line, and dot
this.dom.box.style.right = this.right + 'px'; 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'; this.dom.dot.style.right = (start - this.props.dot.width / 2) + 'px';
} else { } else {
this.left = start - this.width / 2; 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: { content: {
height: 0, height: 0,
marginLeft: 0
marginLeft: 0,
marginRight: 0
} }
}; };
this.options = options; this.options = options;
@ -117,7 +118,11 @@ PointItem.prototype.redraw = function() {
this.props.content.height = dom.content.offsetHeight; this.props.content.height = dom.content.offsetHeight;
// resize contents // 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 //dom.content.style.marginRight = ... + 'px'; // TODO: margin right
// recalculate size // recalculate size
@ -188,7 +193,6 @@ PointItem.prototype.repositionX = function() {
PointItem.prototype.repositionY = function() { PointItem.prototype.repositionY = function() {
var orientation = this.options.orientation.item; var orientation = this.options.orientation.item;
var point = this.dom.point; var point = this.dom.point;
if (orientation == 'top') { if (orientation == 'top') {
point.style.top = this.top + 'px'; point.style.top = this.top + 'px';
} }
@ -210,7 +214,7 @@ PointItem.prototype.getWidthLeft = function () {
* @return {number} * @return {number}
*/ */
PointItem.prototype.getWidthRight = function () { PointItem.prototype.getWidthRight = function () {
return this.width - this.props.dot.width;
return this.props.dot.width;
}; };
module.exports = PointItem; 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 * Repaint the item
*/ */
RangeItem.prototype.redraw = function() { RangeItem.prototype.redraw = function() {
console.log("kkkkkkkkkkkkkkkkkkkkk");
var dom = this.dom; var dom = this.dom;
if (!dom) { if (!dom) {
// create DOM // create DOM

Write Preview
Loading…
Cancel
Save