feat(extensions/scrollbars): add makeMouseWheel

Author: zhe-he

extensions/index.ts

@@ -2,6 +2,7 @@ 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 {

extensions/scrollbars/README.md

@@ -5,7 +5,7 @@ Add scrollbars to the infinite canvas. The scrollbars will be hidden when all gr
 ## How to use it
 
 ```ts
-import { Scrollbars } from 'fabric/extensions';
+import { Scrollbars, makeMouseWheel } from 'fabric/extensions';
 
 const config = {
   /** Scrollbar fill color */
@@ -28,9 +28,15 @@ const config = {
   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();
+
 ```

extensions/scrollbars/typedefs.ts

@@ -28,3 +28,16 @@ export type ScrollbarProps = {
 export type ScrollbarXProps = Pick<ScrollbarProps, 'left' | 'right'>;
 
 export type ScrollbarYProps = Pick<ScrollbarProps, 'top' | 'bottom'>;
+
+export type MakeMouseWheelProps = {
+  /** Minimum zoom size */
+  min: number;
+  /** Maximum zoom size */
+  max: number;
+  /** Touchpad Zoom Speed default to 0.99 */
+  tSpeed: number;
+  /** Mouse Wheel Zoom Speed default to 0.998 */
+  mSpeed: number;
+  /** Canvas panning speed defaults to 1 */
+  pSpeed: number;
+};

extensions/scrollbars/util.ts

@@ -0,0 +1,38 @@
+import type { TPointerEventInfo, Canvas, TMat2D } from 'fabric';
+import type { MakeMouseWheelProps } from './typedefs';
+
+export const makeMouseWheel =
+  (canvas: Canvas, props: Partial<MakeMouseWheelProps> = {}) =>
+  (options: TPointerEventInfo<WheelEvent>) => {
+    const e = options.e;
+    if (e.target == canvas.upperCanvasEl) e.preventDefault();
+    const { min, max, tSpeed = 0.99, mSpeed = 0.998, pSpeed = 1 } = props;
+
+    /** Is it touchpad zoom? */
+    const isTouchScale = Math.floor(e.deltaY) != Math.ceil(e.deltaY);
+    // Touchpad zooming, Mac's touchpad automatically sets e.ctrlKey to true
+    if (e.ctrlKey || e.metaKey) {
+      // Mouse and touchpad speed separate
+      const speed = isTouchScale ? tSpeed : mSpeed;
+      let zoom = canvas.getZoom();
+      zoom *= speed ** e.deltaY;
+      if (max != undefined && zoom > max) zoom = max;
+      if (min != undefined && zoom < min) zoom = min;
+
+      canvas.zoomToPoint(options.viewportPoint, zoom);
+      canvas.requestRenderAll();
+      return;
+    }
+
+    const vpt = canvas.viewportTransform.slice(0) as TMat2D;
+    let { deltaX, deltaY } = e;
+    // Hold down Shift and scroll the mouse to indicate horizontal scrolling
+    if (e.shiftKey && deltaX == 0) {
+      deltaX = deltaY;
+      deltaY = 0;
+    }
+    vpt[4] -= deltaX * pSpeed;
+    vpt[5] -= deltaY * pSpeed;
+    canvas.setViewportTransform(vpt);
+    canvas.requestRenderAll();
+  };