feat(timeline): Implement new options 'horizontalScrollKey' (#1670, #1323) and 'horizontalScrollInvert' (#1595)

[LukasWillin]

Commit

feat: Implement new options 'horizontalScrollKey' (#1670, #1323) and 'horizontalScrollInvert' (#1595) to allow for both vertical and horizontal scrolling & invert the horizontal scroll direction.

Feature Changes

modified:   docs/timeline/index.html                        | Add documentation for options 'horizontalScrollKey' and 'horizontalScrollInvert'.
modified:   examples/timeline/other/horizontalScroll.html   | Add new options 'horizontalScrollKey' and 'horizontalScrollInvert' to horizontal scroll example.
modified:   lib/timeline/Core.js                            | Implement new options to allow for both vertical and horizontal scrolling & invert the horizontal scroll direction.
modified:   lib/timeline/optionsTimeline.js                 | Add options 'horizontalScrollKey' and 'horizontalScrollInvert'.
modified:   types/index.d.ts                                | Add type definitions for options 'horizontalScrollKey' and 'horizontalScrollInvert'.

Lint Changes

• Fix eslint errors such as missing doc comments or faulty syntax where necessary.
• Fix eslint error no-prototype-builtins
• Fix eslint-disable-line comments being on the wrong line to suppress the stated rule.

Example

See the horizontalScroll example: examples/timeline/other/horizontalScroll.html

var options = {
  horizontalScroll: true,
  horizontalScrollKey: 'shiftKey', /* If you want to enable both vertical and horizontal scrolling, uncomment this and  the line below. */
  verticalScroll: true, /* Uncomment this line with the line above to allow for both scroll-axis. */
  horizontalScrollInvert: true, /* Invert the horizontal scroll direction by uncommenting this line. */
  zoomKey: 'ctrlKey',
};

[cornzz]

This is exactly what we also need, thanks a lot @LukasWillin! @mojoaxel / @yotamberk could you merge this so we dont have to create our own fork of vis-timeline with this change? The changes look good to me...

[mojoaxel]

could you merge this so we dont have to create our own fork of vis-timeline with this change?

I just got a budget to maintain vis-timeline for 2025 :tada: It might take some weeks or even month but I plan to make a big new release with a lot of fixes this year!

[LukasWillin]

If you guys have any other inputs, let me know. Thank you both!

[mojoaxel]

Wow! Thanks! I hope I (or someone else) can review and merge this soon.

[mojoaxel]

I just got a budget to maintain vis-timeline for 2025 :tada:

Sadly this budget got killed yesterday 😭

I still hope I'll find some time to look at all these cool merge requests. Maybe it's also time to find new maintainers for this project!?

[LukasWillin]

Sadly this budget got killed yesterday 😭

I still hope I'll find some time to look at all these cool merge requests. Maybe it's also time to find new maintainers for this project!?

If there is anything I can help you guys with, let me know

[LukasWillin]

@mojoaxel @Thomaash If I updated the branch to be in sync again with master branch, would you consider merging it? I am in no rush. I would just like to have certainty before I invest the time 😄

[Thomaash]

Hi @LukasWillin

Yes, absolutely. Thank you for your effort.

Just one thing I'd like to ask, don't mix multiple things in the same PR (it makes the whole process difficult to manage and time consuming). Splitting it into small individual PRs would be ideal (at least into linting and horizontal scroll PRs). Thanks.

[LukasWillin]

Thank you @Thomaash !

I will create a lint-change PR first. Then Rebase this PR on master once it's through and remove everything that doesn't concern scrolling. I will also seperate it into 2 commits. One for the actual implementation and one for documentation and examples. I will most likely get to it on Tuesday.

Let me know if there is anything else you'd like.

[LukasWillin]

Until then I will convert the PR to a draft

[LukasWillin]

@Thomaash

Just got to work today. Got held up with some other technical issues in other projects.

Now I am having issues with lint-staged. You have a lot of unused parameters in your code-base (no problem with that per-se), however, during lint-staged it errors with no-unused-vars rule, and I am unable to suppress it. I tried to disable the rule both per line, next-line in the entire file and globally to no avail (the 2 latter are a big nono anyway, but I just wanted to try and see what happens).

Running npx eslint --fix separately poses no issues.

Do you have any experience with that? I am unable to commit otherwise.

[LukasWillin]

I think I figured it out. Your prettier --write and eslint --fix are clashing with each other.

1. Running two writing commands concurrently may lead to race conditions as stated in documentation of lint-staged. https://github.com/lint-staged/lint-staged?tab=readme-ov-file#task-concurrency
2. Running prettier --write before eslint --fix triggers error no-unused-vars

Changing the lint-staged configuration in package.json to the following fixes the issue. Would that be acceptable for you?

  "lint-staged": {
    "*.{css,html,json,md,yml,yaml}": "prettier --write",
    "*.{js,ts}": ["eslint --fix", "prettier --write"],
    ".*.{css,html,json,md,yml,yaml}": "prettier --write",
    ".*.{js,ts}": ["eslint --fix", "prettier --write"]
  },

[LukasWillin]

Lint Change PR https://github.com/visjs/vis-timeline/pull/1889

[LukasWillin]

@Thomaash And here we finally are (again) 😝Feature PR for bidirectional scrolling as promised.

Let me know if you need any additional changes

[vis-bot]

:tada: This PR is included in version 8.3.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[LukasWillin]

Thank you for merging! Much appreciated. I recon you can close these issues now:

• #1670
• #1323
• #1595