Open allmonday opened 1 month ago
I hack this effect by setting orientation in each items like
[{ id: 22, group: 1, content: "g-2. .... ggggggggg", start: "2023-01-07", orientation: "bottom", }, { id: 3, group: 2, content: "g-3. .... gggggg", start: "2023-01-11", orientation: "top", }, { id: 4, group: 2, content: "g-4. .... gggggg", start: "2023-01-12", orientation: "top", }]
and read it in BoxItem.repositionY
repositionY() { let orientation = this.data.orientation; // const scoped = this.options.scoped; const scoped = true; const lineStyle = this.dom.line.style; // orientation = Math.random() > 0.5 ? 'top': 'bottom' if (orientation == "top") { // console.log(this.parent.height) // console.log(this.height) let lineHeight = 0; if (scoped) { lineHeight = this.top + 1; } else { lineHeight = this.parent.top + this.top + 1; } this.boxY = this.top || 0; lineStyle.height = `${lineHeight}px`; lineStyle.bottom = ""; lineStyle.top = "0"; if (scoped) { this.lineY = this.parent.top; } else { this.lineY = undefined; } } else { // orientation 'bottom' or 'both' const itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty // total height let lineHeight = 0; if (scoped) { lineHeight = this.top; } else { lineHeight = itemSetHeight - this.parent.top - this.parent.height + this.top; } // console.dir({ // id: this.id, // item: itemSetHeight, // pt: this.parent.top, // ph: this.parent.height, // top: this.top, // result: lineHeight, // result2: itemSetHeight - this.parent.top - this.parent.height + this.top // }) this.boxY = this.parent.height - this.top - (this.height || 0); lineStyle.height = `${lineHeight}px`; lineStyle.top = ""; lineStyle.bottom = "0"; if (scoped) { this.lineY = -(itemSetHeight - this.parent.height - this.parent.top); } else { this.lineY = undefined; } } this.dotY = -this.props.dot.height / 2; this.repositionXY(); }
I think the layout requirement of bi-direction with time axis in the center it real useful.
my implementation is a mess, I hope group can support params:
and it will be much elegant.
thanks.
and read it in BoxItem.repositionY
I think the layout requirement of bi-direction with time axis in the center it real useful.![image](https://github.com/visjs/vis-timeline/assets/2917822/d9eb7276-d368-48bb-8a3d-9040d4e289f3)
my implementation is a mess, I hope group can support params:
and it will be much elegant.
thanks.