feat(): Add scrollbars to extensions

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- feat(): Add scrollbars to extensions [#10371](https://github.com/fabricjs/fabric.js/discussions/10371)
 - fix(): BREAKING Fix text positioning [#10803](https://github.com/fabricjs/fabric.js/pull/10803)
 - fix(AligningGuidelines): Guidelines features updates [#10120] (https://github.com/fabricjs/fabric.js/pull/10120)
 - chore(deps-dev): bump inquirer from 12.9.6 to 12.10.0 [#10789](https://github.com/fabricjs/fabric.js/pull/10789)

e2e/tests/scrollbars/index.spec.ts

@@ -0,0 +1,28 @@
+import { expect, test } from '../../fixtures/base';
+
+test('Scrollbars', async ({ page, canvasUtil }) => {
+  await test.step('zoom canvas', async () => {
+    await canvasUtil.executeInBrowser((canvas) => {
+      canvas.setZoom(2);
+    });
+    expect(await canvasUtil.screenshot()).toMatchSnapshot({
+      name: 'zoom-double.png',
+    });
+    await canvasUtil.executeInBrowser((canvas) => {
+      canvas.setZoom(0.5);
+    });
+    expect(await canvasUtil.screenshot()).toMatchSnapshot({
+      name: 'zoom-half.png',
+    });
+  });
+
+  await test.step('pan canvas', async () => {
+    await canvasUtil.executeInBrowser((canvas) => {
+      canvas.setZoom(1);
+      canvas.absolutePan(new window.fabric.Point(100, 100));
+    });
+    expect(await canvasUtil.screenshot()).toMatchSnapshot({
+      name: 'pan100.png',
+    });
+  });
+});

e2e/tests/scrollbars/index.ts

@@ -0,0 +1,37 @@
+/**
+ * Runs in the **BROWSER**
+ * Imports are defined in 'e2e/imports.ts'
+ */
+
+import { Rect } from 'fabric';
+import { Scrollbars } from 'fabric/extensions';
+import { beforeAll } from '../test';
+
+beforeAll(async (canvas) => {
+  canvas.setDimensions({ width: 400, height: 150 });
+  const rect1 = new Rect({
+    originX: 'center',
+    originY: 'center',
+    left: 100,
+    top: 100,
+    width: 100,
+    height: 100,
+    fill: 'green',
+  });
+
+  const rect2 = new Rect({
+    originX: 'center',
+    originY: 'center',
+    left: 200,
+    top: 200,
+    width: 50,
+    height: 50,
+    fill: 'yellow',
+  });
+
+  new Scrollbars(canvas);
+
+  canvas.add(rect1, rect2);
+
+  return { rect1, rect2 };
+});

extensions/index.ts

@@ -1,6 +1,10 @@
 export { AligningGuidelines } from './aligning_guidelines';
 export type * from './aligning_guidelines/typedefs';
 
+export { Scrollbars } from './scrollbars';
+export { makeMouseWheel } from './scrollbars/util';
+export type * from './scrollbars/typedefs';
+
 export {
   originUpdaterWrapper,
   installOriginWrapperUpdater,

extensions/scrollbars/README.md

@@ -0,0 +1,42 @@
+# Scrollbars
+
+Add scrollbars to the infinite canvas. The scrollbars will be hidden when all graphics fit within the visible area.
+
+## How to use it
+
+```ts
+import { Scrollbars, makeMouseWheel } from 'fabric/extensions';
+
+const config = {
+  /** Scrollbar fill color */
+  fill = 'rgba(0,0,0,.3)';
+  /** Scrollbar stroke color */
+  stroke = 'rgba(255,255,255,.3)';
+  /** Scrollbar line width */
+  lineWidth = 1;
+  /** Hide horizontal scrollbar */
+  hideX = false;
+  /** Hide vertical scrollbar */
+  hideY = false;
+  /** Scrollbar minimum width */
+  scrollbarMinWidth = 40;
+  /** Scrollbar size */
+  scrollbarSize = 5;
+  /** Scrollbar distance from the boundary */
+  scrollSpace = 4;
+  /** Scrollbar expansion size, the distance from which the user can effectively slide the scrollbar */
+  padding = 4;
+};
+
+// You have the option to implement custom canvas zooming or use the plugin's built-in solution.
+const mousewheel = makeMouseWheel(canvas);
+canvas.on("mouse:wheel", mousewheel);
+// canvas.off("mouse:wheel", mousewheel);
+
+const scrollbars = new Scrollbars(myCanvas, options);
+
+// in order to disable scrollbars later:
+
+scrollbars.dispose();
+
+```