visjs / vis-timeline

📅 Create a fully customizable, interactive timelines and 2d-graphs with items and ranges.
https://visjs.github.io/vis-timeline/
Other
1.74k stars 302 forks source link

Timeline constructor throws error when using option `verticalScroll:true` #1805

Open 0cnLaroche opened 1 month ago

0cnLaroche commented 1 month ago

The Timeline constructor is throwing an error when I use the verticalScroll option to true. Error is Cannot read properties of null (reading 'left') while trying to read this.dom.left internally. As a work around, if I set the this.options.verticalScroll to true after initialization, it works fine.

Here is my code and options to reproduce.


import {
  Timeline as VisTimeline,
  TimelineOptions,
} from "vis-timeline";

const DEFAULT_TIMELINE_OPTIONS: TimelineOptions = {
  align: "center",
  groupHeightMode: "fitItems",
  autoResize: true,
  clickToUse: false,
  editable: true,
  groupEditable: false,
  stack: true,
  type: "range",
  zoomable: false,
  showCurrentTime: false,
  horizontalScroll: true,
  orientation: {
    axis: "top",
  },
  margin: {
    item: 20,
    axis: 20,
  },
  start: moment().startOf("month").startOf("week").isoWeekday(1).toDate(),
  verticalScroll: true, // Crashes when true 
};

class Timeline extends React.Component<Props, {}> {
  timeline!: Readonly<VisTimeline>;
  items: DataSetDataItem;
  groups: DataSetDataGroup;
  options: TimelineOptions;

  timelineRef = React.createRef<HTMLDivElement>();

  constructor(props: Props) {
    super(props);

    this.items = new DataSet(props.items);
    this.groups = new DataSet(props.groups);
    this.options = { ...DEFAULT_TIMELINE_OPTIONS, ...props.options };
  }

  componentDidMount(): void {
    if (this.timelineRef.current) {
      this.timeline = new VisTimeline(
        this.timelineRef.current,
        this.items,
        this.groups,
        this.options,
      );
    }
  }
// ...
}