Make ZoomOptions.requireCtrl default to false to zoom without holding Ctrl i.e. like on a map

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
   * Allow to select multiple elements with `Selection` with touch when `CanvasApi.pointerMode` is `selection`;
   * Allow to establish new links with `SelectionActionEstablishLink` on touchscreen;
   * Allow to move link source or target with `LinkActionMoveEndpoint` on touchscreen;
+  * Make `ZoomOptions.requireCtrl` default to `false` to zoom without holding `Ctrl` i.e. like on a map.
   * Enable `showPointerModeToggle` on `ZoomControl` by default (can be disabled by passing `false`).
 - **[💥Breaking]** Extend and make optional built-in property editing form support:
   * Extract property editor inputs into separate entry point `@reactodia/workspace/forms` to be able to use external forms implementation without always bundling the built-in one;

src/diagram/canvasApi.ts

@@ -413,10 +413,10 @@ export interface ZoomOptions {
      * with the mouse wheel.
      *
      * If `true`, the mouse wheel will be used to scroll viewport
-     * horizontally or vertically if `Shift` is held;
+     * horizontally (or vertically if `Shift` is held);
      * otherwise the wheel action will be inverted.
      *
-     * @default true
+     * @default false
      */
     requireCtrl?: boolean;
 }

src/diagram/canvasArea.tsx

@@ -471,6 +471,7 @@ class CanvasController implements CanvasApi {
         return this.isEventFromCellLayer(e) && target instanceof Node && (
             this.paper.root === target ||
             this.paper.pane === target ||
+            this.paper.pane?.firstChild === target ||
             (
                 !hasScrollableParent(target, this.linkLayer.current) &&
                 !hasScrollableParent(target, this.labelLayer.current) &&
@@ -512,6 +513,7 @@ class CanvasController implements CanvasApi {
         return target instanceof Node && Boolean(
             this.paper.root === target ||
             this.paper.pane === target ||
+            this.paper.pane?.firstChild === target ||
             this.linkLayer.current?.contains(target) ||
             this.labelLayer.current?.contains(target) ||
             this.elementLayer.current?.contains(target)
@@ -676,7 +678,7 @@ function zoomOptionsWithDefaults(zoomOptions: ZoomOptions = {}): Required<ZoomOp
         maxFit: zoomOptions.maxFit ?? 1,
         step: zoomOptions.step ?? 0.1,
         fitPadding: zoomOptions.fitPadding ?? 20,
-        requireCtrl: zoomOptions.requireCtrl ?? true,
+        requireCtrl: zoomOptions.requireCtrl ?? false,
     };
 }