Support group level orientation

[allmonday]

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:

• scoped: make sure the line stay inside group
• orientation

and it will be much elegant.

thanks.