Fix(StaticCanvas): Restrict and correct setDimensions typings. (#9618)

fabricjs · Jan 29, 2024 · 624f48e · 624f48e
1 parent b38c6ca
commit 624f48e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(StaticCanvas): StaticCanvas setDimensions typings [#9618](https://github.com/fabricjs/fabric.js/pull/9618)
 - refactor(): Align gradient with class registry usage, part of #9144 [#9627](https://github.com/fabricjs/fabric.js/pull/9627)
 - refactor(): Align shadow with class registry, part of #9144 [#9626](https://github.com/fabricjs/fabric.js/pull/9626)
 - cd() Surface the minified build as standard when importing. [#9624](https://github.com/fabricjs/fabric.js/pull/9624)

diff --git a/src/canvas/DOMManagers/util.ts b/src/canvas/DOMManagers/util.ts
@@ -31,8 +31,8 @@ export function allowTouchScrolling(element: HTMLElement, allow: boolean) {
 }
 
 export type CSSDimensions = {
-  width: number | `${number}${string}`;
-  height: number | `${number}${string}`;
+  width: number | string;
+  height: number | string;
 };
 
 export const setCSSDimensions = (

diff --git a/src/canvas/StaticCanvas.ts b/src/canvas/StaticCanvas.ts
@@ -45,10 +45,19 @@ import { staticCanvasDefaults } from './StaticCanvasOptions';
 import { log, FabricError } from '../util/internals/console';
 import { getDevicePixelRatio } from '../env';
 
-export type TCanvasSizeOptions = {
-  backstoreOnly?: boolean;
-  cssOnly?: boolean;
-};
+/**
+ * Having both options in TCanvasSizeOptions set to true transform the call in a calcOffset
+ * Better try to restrict with types to avoid confusion.
+ */
+export type TCanvasSizeOptions =
+  | {
+      backstoreOnly?: true;
+      cssOnly?: false;
+    }
+  | {
+      backstoreOnly?: false;
+      cssOnly?: true;
+    };
 
 export type TSVGExportOptions = {
   suppressPreamble?: boolean;
@@ -271,19 +280,35 @@ export class StaticCanvas<
    * @param {Boolean}       [options.cssOnly=false]       Set the given dimensions only as css dimensions
    * @deprecated will be removed in 7.0
    */
-  setWidth(value: number, options: TCanvasSizeOptions = {}) {
+  setWidth(
+    value: TSize['width'],
+    options?: { backstoreOnly?: true; cssOnly?: false }
+  ): void;
+  setWidth(
+    value: CSSDimensions['width'],
+    options?: { cssOnly?: true; backstoreOnly?: false }
+  ): void;
+  setWidth(value: number, options?: never) {
     return this.setDimensions({ width: value }, options);
   }
 
-  /**
+  /**s
    * Sets height of this canvas instance
    * @param {Number|String} value                         Value to set height to
    * @param {Object}        [options]                     Options object
    * @param {Boolean}       [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions
    * @param {Boolean}       [options.cssOnly=false]       Set the given dimensions only as css dimensions
    * @deprecated will be removed in 7.0
    */
-  setHeight(value: number, options: TCanvasSizeOptions = {}) {
+  setHeight(
+    value: TSize['height'],
+    options?: { backstoreOnly?: true; cssOnly?: false }
+  ): void;
+  setHeight(
+    value: CSSDimensions['height'],
+    options?: { cssOnly?: true; backstoreOnly?: false }
+  ): void;
+  setHeight(value: CSSDimensions['height'], options?: never) {
     return this.setDimensions({ height: value }, options);
   }
 
@@ -322,15 +347,21 @@ export class StaticCanvas<
    * @param {Boolean}       [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions
    * @param {Boolean}       [options.cssOnly=false]       Set the given dimensions only as css dimensions
    */
+  setDimensions(
+    dimensions: Partial<CSSDimensions>,
+    options?: { cssOnly?: true; backstoreOnly?: false }
+  ): void;
   setDimensions(
     dimensions: Partial<TSize>,
-    { cssOnly = false, backstoreOnly = false }: TCanvasSizeOptions = {}
+    options?: { backstoreOnly?: true; cssOnly?: false }
+  ): void;
+  setDimensions(dimensions: Partial<TSize>, options?: never): void;
+  setDimensions(
+    dimensions: Partial<TSize | CSSDimensions>,
+    options?: TCanvasSizeOptions
   ) {
-    this._setDimensionsImpl(dimensions, {
-      cssOnly,
-      backstoreOnly,
-    });
-    if (!cssOnly) {
+    this._setDimensionsImpl(dimensions, options);
+    if (options && !options.cssOnly) {
       this.requestRenderAll();
     }
   }