allow reset component attributes via overloader

src/Factory.ts

@@ -44,7 +44,13 @@ export const Factory = {
       return this;
     };
   },
-  addComponentsGetterSetter(constructor, attr, components, validator?, after?) {
+  addComponentsGetterSetter(
+    constructor,
+    attr: string,
+    components: Array<string>,
+    validator?: Function,
+    after?: Function
+  ) {
     var len = components.length,
       capitalize = Util._capitalize,
       getter = GET + capitalize(attr),
@@ -85,6 +91,11 @@ export const Factory = {
         }
         this._setAttr(attr + capitalize(key), val[key]);
       }
+      if (!val) {
+        components.forEach((component) => {
+          this._setAttr(attr + capitalize(component), undefined);
+        });
+      }
 
       this._fireChangeEvent(attr, oldVal, val);
 

src/Node.ts

@@ -2021,41 +2021,40 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     quality?: number;
     callback?: (img: HTMLImageElement) => void;
   }) {
-    return new Promise((resolve, reject)=>{
+    return new Promise((resolve, reject) => {
-      try{
+      try {
         const callback = config?.callback;
-        if (callback)
+        if (callback) delete config.callback;
-          delete config.callback;
         Util._urlToImage(this.toDataURL(config as any), function (img) {
           resolve(img);
           callback?.(img);
         });
-      }catch(err){
+      } catch (err) {
         reject(err);
       }
     });
   }
   /**
-    * Converts node into a blob.  Since the toBlob method is asynchronous,
+   * Converts node into a blob.  Since the toBlob method is asynchronous,
-    *  the resulting blob can only be retrieved from the config callback
+   *  the resulting blob can only be retrieved from the config callback
-    *  or the returned Promise.
+   *  or the returned Promise.
-    * @method
+   * @method
-    * @name Konva.Node#toBlob
+   * @name Konva.Node#toBlob
-    * @param {Object} config
+   * @param {Object} config
-    * @param {Function} [config.callback] function executed when the composite has completed
+   * @param {Function} [config.callback] function executed when the composite has completed
-    * @param {Number} [config.x] x position of canvas section
+   * @param {Number} [config.x] x position of canvas section
-    * @param {Number} [config.y] y position of canvas section
+   * @param {Number} [config.y] y position of canvas section
-    * @param {Number} [config.width] width of canvas section
+   * @param {Number} [config.width] width of canvas section
-    * @param {Number} [config.height] height of canvas section
+   * @param {Number} [config.height] height of canvas section
-    * @param {Number} [config.pixelRatio] pixelRatio of output canvas. Default is 1.
+   * @param {Number} [config.pixelRatio] pixelRatio of output canvas. Default is 1.
-    * You can use that property to increase quality of the image, for example for super hight quality exports
+   * You can use that property to increase quality of the image, for example for super hight quality exports
-    * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
+   * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
-    * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+   * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
-    * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
+   * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
-    * @example
+   * @example
-    * var blob = await node.toBlob({});
+   * var blob = await node.toBlob({});
-    * @returns {Promise<Blob>}
+   * @returns {Promise<Blob>}
-    */
+   */
   toBlob(config?: {
     x?: number;
     y?: number;
@@ -2065,17 +2064,16 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     mimeType?: string;
     quality?: number;
     callback?: (blob: Blob) => void;
-  }){
+  }) {
-    return new Promise((resolve, reject)=>{
+    return new Promise((resolve, reject) => {
-      try{
+      try {
         const callback = config?.callback;
-        if (callback)
+        if (callback) delete config.callback;
-          delete config.callback;
+        this.toCanvas(config).toBlob((blob) => {
-        this.toCanvas(config).toBlob(blob => {
           resolve(blob);
           callback?.(blob);
         });
-      } catch(err){
+      } catch (err) {
         reject(err);
       }
     });
@@ -2615,7 +2613,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   rotation: GetSet<number, this>;
   zIndex: GetSet<number, this>;
 
-  scale: GetSet<Vector2d, this>;
+  scale: GetSet<Vector2d | undefined, this>;
   scaleX: GetSet<number, this>;
   scaleY: GetSet<number, this>;
   skew: GetSet<Vector2d, this>;

src/Validators.ts

@@ -146,7 +146,7 @@ export function getNumberArrayValidator() {
       // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#description
       const TypedArray = Int8Array ? Object.getPrototypeOf(Int8Array) : null;
       if (TypedArray && val instanceof TypedArray) {
-        return val
+        return val;
       }
       if (!Util._isArray(val)) {
         Util.warn(
@@ -191,6 +191,10 @@ export function getBooleanValidator() {
 export function getComponentValidator(components: any) {
   if (Konva.isUnminified) {
     return function (val: any, attr: string) {
+      // ignore validation on undefined value, because it will reset to defalt
+      if (val === undefined || val === null) {
+        return val;
+      }
       if (!Util.isObject(val)) {
         Util.warn(
           _formatValue(val) +

test/unit/Node-test.ts

@@ -3274,6 +3274,25 @@ describe('Node', function () {
     assert.equal(circle.size().height, 11);
   });
 
+  it('overloaders reset', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var circle = new Konva.Circle({
+      radius: 70,
+      fill: 'green',
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    circle.scale({ x: 2, y: 2 });
+
+    circle.scale(undefined);
+
+    assert.equal(circle.scaleX(), 1);
+    assert.equal(circle.scaleY(), 1);
+  });
+
   it('cache shape', function () {
     var stage = addStage();
     var layer = new Konva.Layer();