string and fill properties validation can accept CanvasGradient as valid value. close #965

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+### not released:
+
+* `string` and `fill` properties validation can accept `CanvasGradient` as valid value
+
 ## 7.0.6
 
 * Better performance for stage dragging

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v7.0.6
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Fri Aug 21 2020
+   * Date: Wed Aug 26 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -1288,6 +1288,21 @@
           };
       }
   }
+  function getStringOrGradientValidator() {
+      if (Konva.isUnminified) {
+          return function (val, attr) {
+              var isString = Util._isString(val);
+              var isGradient = Object.prototype.toString.call(val) === '[object CanvasGradient]';
+              if (!(isString || isGradient)) {
+                  Util.warn(_formatValue(val) +
+                      ' is a not valid value for "' +
+                      attr +
+                      '" attribute. The value should be a string or a native gradient.');
+              }
+              return val;
+          };
+      }
+  }
   function getNumberArrayValidator() {
       if (Konva.isUnminified) {
           return function (val, attr) {
@@ -7379,7 +7394,7 @@
   Shape.prototype.on.call(Shape.prototype, 'fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva', _clearLinearGradientCache);
   Shape.prototype.on.call(Shape.prototype, 'fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva', _clearRadialGradientCache);
   // add getters and setters
-  Factory.addGetterSetter(Shape, 'stroke', undefined, getStringValidator());
+  Factory.addGetterSetter(Shape, 'stroke', undefined, getStringOrGradientValidator());
   /**
    * get/set stroke color
    * @name Konva.Shape#stroke
@@ -7697,7 +7712,7 @@
    * };
    * imageObj.src = 'path/to/image/jpg';
    */
-  Factory.addGetterSetter(Shape, 'fill', undefined, getStringValidator());
+  Factory.addGetterSetter(Shape, 'fill', undefined, getStringOrGradientValidator());
   /**
    * get/set fill color
    * @name Konva.Shape#fill
@@ -18258,8 +18273,8 @@
           RGBA: RGBA,
           Sepia: Sepia,
           Solarize: Solarize,
-          Threshold: Threshold
-      }
+          Threshold: Threshold,
+      },
   });
 
   // main entry for umd build for rollup

src/Shape.ts

@@ -6,6 +6,7 @@ import {
   getNumberOrAutoValidator,
   getStringValidator,
   getBooleanValidator,
+  getStringOrGradientValidator,
 } from './Validators';
 
 import { Context, SceneContext } from './Context';
@@ -849,7 +850,12 @@ Shape.prototype.on.call(
 );
 
 // add getters and setters
-Factory.addGetterSetter(Shape, 'stroke', undefined, getStringValidator());
+Factory.addGetterSetter(
+  Shape,
+  'stroke',
+  undefined,
+  getStringOrGradientValidator()
+);
 
 /**
  * get/set stroke color
@@ -1220,7 +1226,12 @@ Factory.addGetterSetter(Shape, 'fillPatternImage');
  * imageObj.src = 'path/to/image/jpg';
  */
 
-Factory.addGetterSetter(Shape, 'fill', undefined, getStringValidator());
+Factory.addGetterSetter(
+  Shape,
+  'fill',
+  undefined,
+  getStringOrGradientValidator()
+);
 
 /**
  * get/set fill color

src/Validators.ts

@@ -66,6 +66,7 @@ export function getNumberOrAutoValidator() {
     };
   }
 }
+
 export function getStringValidator() {
   if (Konva.isUnminified) {
     return function (val: any, attr: string) {
@@ -81,6 +82,26 @@ export function getStringValidator() {
     };
   }
 }
+
+export function getStringOrGradientValidator() {
+  if (Konva.isUnminified) {
+    return function (val: any, attr: string) {
+      const isString = Util._isString(val);
+      const isGradient =
+        Object.prototype.toString.call(val) === '[object CanvasGradient]';
+      if (!(isString || isGradient)) {
+        Util.warn(
+          _formatValue(val) +
+            ' is a not valid value for "' +
+            attr +
+            '" attribute. The value should be a string or a native gradient.'
+        );
+      }
+      return val;
+    };
+  }
+}
+
 export function getFunctionValidator() {
   if (Konva.isUnminified) {
     return function (val: any, attr: string) {

src/_FullInternals.ts

@@ -84,6 +84,6 @@ export const Konva = Core.Util._assign(Core, {
     RGBA,
     Sepia,
     Solarize,
-    Threshold
-  }
+    Threshold,
+  },
 });

test/unit/Shape-test.js

@@ -2066,4 +2066,46 @@ suite('Shape', function () {
     var shape = layer.getIntersection({ x: 50, y: 70 });
     assert.equal(shape, line);
   });
+
+  test('validation on stroke should accept gradients', function () {
+    var callCount = 0;
+    var oldWarn = Konva.Util.warn;
+    Konva.Util.warn = function () {
+      callCount += 1;
+    };
+
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+
+    var gradient = ctx.createLinearGradient(0, 75, 100, 75);
+    gradient.addColorStop(0.0, 'rgba(255,255,255,1)');
+    gradient.addColorStop(1 / 6, 'rgba(255,255,255,0.8)');
+    gradient.addColorStop(2 / 6, 'rgba(255,255,255,0.6)');
+    gradient.addColorStop(3 / 6, 'rgba(255,255,255,0.4)');
+    gradient.addColorStop(4 / 6, 'rgba(255,255,255,0.3)');
+    gradient.addColorStop(5 / 6, 'rgba(255,255,255,0.2)');
+    gradient.addColorStop(1.0, 'rgba(255,255,255, 0)');
+
+    var star = new Konva.Star({
+      x: 200,
+      y: 100,
+      numPoints: 5,
+      innerRadius: 40,
+      outerRadius: 70,
+
+      stroke: gradient,
+      strokeWidth: 5,
+      draggable: true,
+    });
+    layer.add(star);
+
+    layer.draw();
+
+    assert.equal(callCount, 0);
+    Konva.Util.warn = oldWarn;
+  });
 });