@nasser-sw/fabric 7.0.0-beta1

package/debug/konva/src/Shape.ts

@@ -0,0 +1,2081 @@
+import { Konva } from './Global.ts';
+import { Transform, Util } from './Util.ts';
+import { Factory } from './Factory.ts';
+import type { NodeConfig } from './Node.ts';
+import { Node } from './Node.ts';
+import {
+  getNumberValidator,
+  getNumberOrAutoValidator,
+  getStringValidator,
+  getBooleanValidator,
+  getStringOrGradientValidator,
+} from './Validators.ts';
+
+import type { Context, SceneContext } from './Context.ts';
+import { _registerNode } from './Global.ts';
+import * as PointerEvents from './PointerEvents.ts';
+
+import type { GetSet, Vector2d } from './types.ts';
+import type { HitCanvas, SceneCanvas } from './Canvas.ts';
+
+// hack from here https://stackoverflow.com/questions/52667959/what-is-the-purpose-of-bivariancehack-in-typescript-types/52668133#52668133
+export type ShapeConfigHandler<TTarget> = {
+  bivarianceHack(ctx: Context, shape: TTarget): void;
+}['bivarianceHack'];
+
+export type LineJoin = 'round' | 'bevel' | 'miter';
+export type LineCap = 'butt' | 'round' | 'square';
+
+export interface ShapeConfig extends NodeConfig {
+  fill?: string | CanvasGradient;
+  fillPatternImage?: HTMLImageElement;
+  fillPatternX?: number;
+  fillPatternY?: number;
+  fillPatternOffset?: Vector2d;
+  fillPatternOffsetX?: number;
+  fillPatternOffsetY?: number;
+  fillPatternScale?: Vector2d;
+  fillPatternScaleX?: number;
+  fillPatternScaleY?: number;
+  fillPatternRotation?: number;
+  fillPatternRepeat?: string;
+  fillLinearGradientStartPoint?: Vector2d;
+  fillLinearGradientStartPointX?: number;
+  fillLinearGradientStartPointY?: number;
+  fillLinearGradientEndPoint?: Vector2d;
+  fillLinearGradientEndPointX?: number;
+  fillLinearGradientEndPointY?: number;
+  fillLinearGradientColorStops?: Array<number | string>;
+  fillRadialGradientStartPoint?: Vector2d;
+  fillRadialGradientStartPointX?: number;
+  fillRadialGradientStartPointY?: number;
+  fillRadialGradientEndPoint?: Vector2d;
+  fillRadialGradientEndPointX?: number;
+  fillRadialGradientEndPointY?: number;
+  fillRadialGradientStartRadius?: number;
+  fillRadialGradientEndRadius?: number;
+  fillRadialGradientColorStops?: Array<number | string>;
+  fillEnabled?: boolean;
+  fillPriority?: string;
+  fillRule?: CanvasFillRule;
+  stroke?: string | CanvasGradient;
+  strokeWidth?: number;
+  fillAfterStrokeEnabled?: boolean;
+  hitStrokeWidth?: number | string;
+  strokeScaleEnabled?: boolean;
+  strokeHitEnabled?: boolean;
+  strokeEnabled?: boolean;
+  lineJoin?: LineJoin;
+  lineCap?: LineCap;
+  miterLimit?: number;
+  sceneFunc?: (con: Context, shape: Shape) => void;
+  hitFunc?: (con: Context, shape: Shape) => void;
+  shadowColor?: string;
+  shadowBlur?: number;
+  shadowOffset?: Vector2d;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+  shadowOpacity?: number;
+  shadowEnabled?: boolean;
+  shadowForStrokeEnabled?: boolean;
+  dash?: number[];
+  dashOffset?: number;
+  dashEnabled?: boolean;
+  perfectDrawEnabled?: boolean;
+}
+
+export interface ShapeGetClientRectConfig {
+  skipTransform?: boolean;
+  skipShadow?: boolean;
+  skipStroke?: boolean;
+  relativeTo?: Node;
+}
+
+export type FillFuncOutput =
+  | void
+  | [Path2D | CanvasFillRule]
+  | [Path2D, CanvasFillRule];
+
+const HAS_SHADOW = 'hasShadow';
+const SHADOW_RGBA = 'shadowRGBA';
+const patternImage = 'patternImage';
+const linearGradient = 'linearGradient';
+const radialGradient = 'radialGradient';
+
+let dummyContext: CanvasRenderingContext2D;
+function getDummyContext(): CanvasRenderingContext2D {
+  if (dummyContext) {
+    return dummyContext;
+  }
+  dummyContext = Util.createCanvasElement().getContext('2d')!;
+  return dummyContext;
+}
+
+export const shapes: { [key: string]: Shape } = {};
+
+// TODO: idea - use only "remove" (or destroy method)
+// how? on add, check that every inner shape has reference in konva store with color
+// on remove - clear that reference
+// the approach is good. But what if we want to cache the shape before we add it into the stage
+// what color to use for hit test?
+
+function _fillFunc(this: Node, context) {
+  const fillRule = this.attrs.fillRule;
+  if (fillRule) {
+    context.fill(fillRule);
+  } else {
+    context.fill();
+  }
+}
+function _strokeFunc(context) {
+  context.stroke();
+}
+function _fillFuncHit(this: Node, context) {
+  const fillRule = this.attrs.fillRule;
+  if (fillRule) {
+    context.fill(fillRule);
+  } else {
+    context.fill();
+  }
+}
+function _strokeFuncHit(context) {
+  context.stroke();
+}
+
+function _clearHasShadowCache(this: Node) {
+  this._clearCache(HAS_SHADOW);
+}
+
+function _clearGetShadowRGBACache(this: Node) {
+  this._clearCache(SHADOW_RGBA);
+}
+
+function _clearFillPatternCache(this: Node) {
+  this._clearCache(patternImage);
+}
+
+function _clearLinearGradientCache(this: Node) {
+  this._clearCache(linearGradient);
+}
+
+function _clearRadialGradientCache(this: Node) {
+  this._clearCache(radialGradient);
+}
+
+/**
+ * Shape constructor.  Shapes are primitive objects such as rectangles,
+ *  circles, text, lines, etc.
+ * @constructor
+ * @memberof Konva
+ * @augments Konva.Node
+ * @param {Object} config
+ * @@shapeParams
+ * @@nodeParams
+ * @example
+ * var customShape = new Konva.Shape({
+ *   x: 5,
+ *   y: 10,
+ *   fill: 'red',
+ *   // a Konva.Canvas renderer is passed into the sceneFunc function
+ *   sceneFunc (context, shape) {
+ *     context.beginPath();
+ *     context.moveTo(200, 50);
+ *     context.lineTo(420, 80);
+ *     context.quadraticCurveTo(300, 100, 260, 170);
+ *     context.closePath();
+ *     // Konva specific method
+ *     context.fillStrokeShape(shape);
+ *   }
+ *});
+ */
+export class Shape<
+  Config extends ShapeConfig = ShapeConfig,
+> extends Node<Config> {
+  _centroid: boolean;
+  colorKey: string;
+
+  _fillFunc: (ctx: Context) => FillFuncOutput;
+  _strokeFunc: (ctx: Context) => void;
+  _fillFuncHit: (ctx: Context) => void;
+  _strokeFuncHit: (ctx: Context) => void;
+
+  constructor(config?: Config) {
+    super(config);
+    // set colorKey
+    let key: string;
+
+    while (true) {
+      key = Util.getRandomColor();
+      if (key && !(key in shapes)) {
+        break;
+      }
+    }
+
+    this.colorKey = key;
+    shapes[key] = this;
+  }
+
+  /**
+   * @deprecated
+   */
+  getContext() {
+    Util.warn('shape.getContext() method is deprecated. Please do not use it.');
+    return this.getLayer()!.getContext();
+  }
+  /**
+   * @deprecated
+   */
+  getCanvas() {
+    Util.warn('shape.getCanvas() method is deprecated. Please do not use it.');
+    return this.getLayer()!.getCanvas();
+  }
+
+  getSceneFunc() {
+    return this.attrs.sceneFunc || this['_sceneFunc'];
+  }
+
+  getHitFunc() {
+    return this.attrs.hitFunc || this['_hitFunc'];
+  }
+  /**
+   * returns whether or not a shadow will be rendered
+   * @method
+   * @name Konva.Shape#hasShadow
+   * @returns {Boolean}
+   */
+  hasShadow() {
+    return this._getCache(HAS_SHADOW, this._hasShadow);
+  }
+  _hasShadow() {
+    return (
+      this.shadowEnabled() &&
+      this.shadowOpacity() !== 0 &&
+      !!(
+        this.shadowColor() ||
+        this.shadowBlur() ||
+        this.shadowOffsetX() ||
+        this.shadowOffsetY()
+      )
+    );
+  }
+  _getFillPattern() {
+    return this._getCache(patternImage, this.__getFillPattern);
+  }
+  __getFillPattern() {
+    if (this.fillPatternImage()) {
+      const ctx = getDummyContext();
+      const pattern = ctx.createPattern(
+        this.fillPatternImage(),
+        this.fillPatternRepeat() || 'repeat'
+      );
+      if (pattern && pattern.setTransform) {
+        const tr = new Transform();
+
+        tr.translate(this.fillPatternX(), this.fillPatternY());
+        tr.rotate(Konva.getAngle(this.fillPatternRotation()));
+        tr.scale(this.fillPatternScaleX(), this.fillPatternScaleY());
+        tr.translate(
+          -1 * this.fillPatternOffsetX(),
+          -1 * this.fillPatternOffsetY()
+        );
+
+        const m = tr.getMatrix();
+
+        const matrix =
+          typeof DOMMatrix === 'undefined'
+            ? {
+                a: m[0], // Horizontal scaling. A value of 1 results in no scaling.
+                b: m[1], // Vertical skewing.
+                c: m[2], // Horizontal skewing.
+                d: m[3],
+                e: m[4], // Horizontal translation (moving).
+                f: m[5], // Vertical translation (moving).
+              }
+            : new DOMMatrix(m);
+
+        pattern.setTransform(matrix);
+      }
+      return pattern;
+    }
+  }
+  _getLinearGradient() {
+    return this._getCache(linearGradient, this.__getLinearGradient);
+  }
+  __getLinearGradient() {
+    const colorStops = this.fillLinearGradientColorStops();
+    if (colorStops) {
+      const ctx = getDummyContext();
+
+      const start = this.fillLinearGradientStartPoint();
+      const end = this.fillLinearGradientEndPoint();
+      const grd = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
+
+      // build color stops
+      for (let n = 0; n < colorStops.length; n += 2) {
+        grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
+      }
+      return grd;
+    }
+  }
+
+  _getRadialGradient() {
+    return this._getCache(radialGradient, this.__getRadialGradient);
+  }
+  __getRadialGradient() {
+    const colorStops = this.fillRadialGradientColorStops();
+    if (colorStops) {
+      const ctx = getDummyContext();
+
+      const start = this.fillRadialGradientStartPoint();
+      const end = this.fillRadialGradientEndPoint();
+      const grd = ctx.createRadialGradient(
+        start.x,
+        start.y,
+        this.fillRadialGradientStartRadius(),
+        end.x,
+        end.y,
+        this.fillRadialGradientEndRadius()
+      );
+
+      // build color stops
+      for (let n = 0; n < colorStops.length; n += 2) {
+        grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
+      }
+      return grd;
+    }
+  }
+  getShadowRGBA() {
+    return this._getCache(SHADOW_RGBA, this._getShadowRGBA);
+  }
+  _getShadowRGBA() {
+    if (!this.hasShadow()) {
+      return;
+    }
+    const rgba = Util.colorToRGBA(this.shadowColor());
+    if (rgba) {
+      return (
+        'rgba(' +
+        rgba.r +
+        ',' +
+        rgba.g +
+        ',' +
+        rgba.b +
+        ',' +
+        rgba.a * (this.shadowOpacity() || 1) +
+        ')'
+      );
+    }
+  }
+  /**
+   * returns whether or not the shape will be filled
+   * @method
+   * @name Konva.Shape#hasFill
+   * @returns {Boolean}
+   */
+  hasFill() {
+    return this._calculate(
+      'hasFill',
+      [
+        'fillEnabled',
+        'fill',
+        'fillPatternImage',
+        'fillLinearGradientColorStops',
+        'fillRadialGradientColorStops',
+      ],
+      () => {
+        return (
+          this.fillEnabled() &&
+          !!(
+            this.fill() ||
+            this.fillPatternImage() ||
+            this.fillLinearGradientColorStops() ||
+            this.fillRadialGradientColorStops()
+          )
+        );
+      }
+    );
+  }
+  /**
+   * returns whether or not the shape will be stroked
+   * @method
+   * @name Konva.Shape#hasStroke
+   * @returns {Boolean}
+   */
+  hasStroke() {
+    return this._calculate(
+      'hasStroke',
+      [
+        'strokeEnabled',
+        'strokeWidth',
+        'stroke',
+        'strokeLinearGradientColorStops',
+      ],
+      () => {
+        return (
+          this.strokeEnabled() &&
+          this.strokeWidth() &&
+          !!(this.stroke() || this.strokeLinearGradientColorStops())
+          // this.getStrokeRadialGradientColorStops()
+        );
+      }
+    );
+    // return (
+    //   this.strokeEnabled() &&
+    //   this.strokeWidth() &&
+    //   !!(this.stroke() || this.strokeLinearGradientColorStops())
+    //   // this.getStrokeRadialGradientColorStops()
+    // );
+  }
+  hasHitStroke() {
+    const width = this.hitStrokeWidth();
+
+    // on auto just check by stroke
+    if (width === 'auto') {
+      return this.hasStroke();
+    }
+
+    // we should enable hit stroke if stroke is enabled
+    // and we have some value from width
+    return this.strokeEnabled() && !!width;
+  }
+  /**
+   * determines if point is in the shape, regardless if other shapes are on top of it.  Note: because
+   *  this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times
+   *  consecutively.  Please use the {@link Konva.Stage#getIntersection} method if at all possible
+   *  because it performs much better
+   * @method
+   * @name Konva.Shape#intersects
+   * @param {Object} point
+   * @param {Number} point.x
+   * @param {Number} point.y
+   * @returns {Boolean}
+   */
+  intersects(point: Vector2d) {
+    const stage = this.getStage();
+    if (!stage) {
+      return false;
+    }
+    const bufferHitCanvas = stage.bufferHitCanvas;
+
+    bufferHitCanvas.getContext().clear();
+    this.drawHit(bufferHitCanvas, undefined, true);
+    const p = bufferHitCanvas.context.getImageData(
+      Math.round(point.x),
+      Math.round(point.y),
+      1,
+      1
+    ).data;
+    return p[3] > 0;
+  }
+
+  destroy() {
+    Node.prototype.destroy.call(this);
+    delete shapes[this.colorKey];
+    delete (this as any).colorKey;
+    return this;
+  }
+  // why do we need buffer canvas?
+  // it give better result when a shape has
+  // stroke with fill and with some opacity
+  _useBufferCanvas(forceFill?: boolean): boolean {
+    // image and sprite still has "fill" as image
+    // so they use that method with forced fill
+    // it probably will be simpler, then copy/paste the code
+
+    // force skip buffer canvas
+    const perfectDrawEnabled = this.attrs.perfectDrawEnabled ?? true;
+    if (!perfectDrawEnabled) {
+      return false;
+    }
+    const hasFill = forceFill || this.hasFill();
+    const hasStroke = this.hasStroke();
+    const isTransparent = this.getAbsoluteOpacity() !== 1;
+
+    if (hasFill && hasStroke && isTransparent) {
+      return true;
+    }
+
+    const hasShadow = this.hasShadow();
+    const strokeForShadow = this.shadowForStrokeEnabled();
+    if (hasFill && hasStroke && hasShadow && strokeForShadow) {
+      return true;
+    }
+    return false;
+  }
+  setStrokeHitEnabled(val: number) {
+    Util.warn(
+      'strokeHitEnabled property is deprecated. Please use hitStrokeWidth instead.'
+    );
+    if (val) {
+      this.hitStrokeWidth('auto');
+    } else {
+      this.hitStrokeWidth(0);
+    }
+  }
+  getStrokeHitEnabled() {
+    if (this.hitStrokeWidth() === 0) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  /**
+   * return self rectangle (x, y, width, height) of shape.
+   * This method are not taken into account transformation and styles.
+   * @method
+   * @name Konva.Shape#getSelfRect
+   * @returns {Object} rect with {x, y, width, height} properties
+   * @example
+   *
+   * rect.getSelfRect();  // return {x:0, y:0, width:rect.width(), height:rect.height()}
+   * circle.getSelfRect();  // return {x: - circle.width() / 2, y: - circle.height() / 2, width:circle.width(), height:circle.height()}
+   *
+   */
+  getSelfRect() {
+    const size = this.size();
+    return {
+      x: this._centroid ? -size.width / 2 : 0,
+      y: this._centroid ? -size.height / 2 : 0,
+      width: size.width,
+      height: size.height,
+    };
+  }
+  getClientRect(config: ShapeGetClientRectConfig = {}) {
+    // if we have a cached parent, it will use cached transform matrix
+    // but we don't want to that
+    let hasCachedParent = false;
+    let parent = this.getParent();
+    while (parent) {
+      if (parent.isCached()) {
+        hasCachedParent = true;
+        break;
+      }
+      parent = parent.getParent();
+    }
+    const skipTransform = config.skipTransform;
+
+    // force relative to stage if we have a cached parent
+    const relativeTo =
+      config.relativeTo || (hasCachedParent && this.getStage()) || undefined;
+
+    const fillRect = this.getSelfRect();
+
+    const applyStroke = !config.skipStroke && this.hasStroke();
+    const strokeWidth: number = (applyStroke && this.strokeWidth()) || 0;
+
+    const fillAndStrokeWidth = fillRect.width + strokeWidth;
+    const fillAndStrokeHeight = fillRect.height + strokeWidth;
+
+    const applyShadow = !config.skipShadow && this.hasShadow();
+    const shadowOffsetX = applyShadow ? this.shadowOffsetX() : 0;
+    const shadowOffsetY = applyShadow ? this.shadowOffsetY() : 0;
+
+    const preWidth = fillAndStrokeWidth + Math.abs(shadowOffsetX);
+    const preHeight = fillAndStrokeHeight + Math.abs(shadowOffsetY);
+
+    const blurRadius = (applyShadow && this.shadowBlur()) || 0;
+
+    const width = preWidth + blurRadius * 2;
+    const height = preHeight + blurRadius * 2;
+
+    const rect = {
+      width: width,
+      height: height,
+      x:
+        -(strokeWidth / 2 + blurRadius) +
+        Math.min(shadowOffsetX, 0) +
+        fillRect.x,
+      y:
+        -(strokeWidth / 2 + blurRadius) +
+        Math.min(shadowOffsetY, 0) +
+        fillRect.y,
+    };
+    if (!skipTransform) {
+      return this._transformedRect(rect, relativeTo);
+    }
+    return rect;
+  }
+  drawScene(can?: SceneCanvas, top?: Node, bufferCanvas?: SceneCanvas) {
+    // basically there are 3 drawing modes
+    // 1 - simple drawing when nothing is cached.
+    // 2 - when we are caching current
+    // 3 - when node is cached and we need to draw it into layer
+
+    const layer = this.getLayer();
+    const canvas = can || layer!.getCanvas(),
+      context = canvas.getContext() as SceneContext,
+      cachedCanvas = this._getCanvasCache(),
+      drawFunc = this.getSceneFunc(),
+      hasShadow = this.hasShadow();
+    let stage;
+
+    const skipBuffer = false;
+    const cachingSelf = top === this;
+
+    if (!this.isVisible() && !cachingSelf) {
+      return this;
+    }
+    // if node is cached we just need to draw from cache
+    if (cachedCanvas) {
+      context.save();
+
+      const m = this.getAbsoluteTransform(top).getMatrix();
+      context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+      this._drawCachedSceneCanvas(context);
+      context.restore();
+      return this;
+    }
+
+    if (!drawFunc) {
+      return this;
+    }
+
+    context.save();
+    // if buffer canvas is needed
+    if (this._useBufferCanvas() && !skipBuffer) {
+      stage = this.getStage();
+      const bc = bufferCanvas || stage.bufferCanvas;
+      const bufferContext = bc.getContext();
+      bufferContext.clear();
+      bufferContext.save();
+      bufferContext._applyLineJoin(this);
+      bufferContext._applyMiterLimit(this);
+      // layer might be undefined if we are using cache before adding to layer
+      const o = this.getAbsoluteTransform(top).getMatrix();
+      bufferContext.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
+
+      // Apply CSS filters to buffer context if not cached
+      // we skip filters in non cache use cases for now
+      // if (!cachingSelf && filters?.length > 0) {
+      //   bufferContext._applyCSSFilters(this);
+      // }
+
+      drawFunc.call(this, bufferContext, this);
+      bufferContext.restore();
+
+      const ratio = bc.pixelRatio;
+
+      if (hasShadow) {
+        context._applyShadow(this);
+      }
+      context._applyOpacity(this);
+      context._applyGlobalCompositeOperation(this);
+      context.drawImage(
+        bc._canvas,
+        bc.x || 0,
+        bc.y || 0,
+        bc.width / ratio,
+        bc.height / ratio
+      );
+    } else {
+      context._applyLineJoin(this);
+      context._applyMiterLimit(this);
+
+      if (!cachingSelf) {
+        const o = this.getAbsoluteTransform(top).getMatrix();
+        context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
+        context._applyOpacity(this);
+        context._applyGlobalCompositeOperation(this);
+
+        // Apply CSS filters to main context if not cached
+        // if (filters?.length) {
+        //   context._applyCSSFilters(this);
+        // }
+      }
+
+      if (hasShadow) {
+        context._applyShadow(this);
+      }
+
+      drawFunc.call(this, context, this);
+    }
+    context.restore();
+    return this;
+  }
+  drawHit(can?: HitCanvas, top?: Node, skipDragCheck = false) {
+    if (!this.shouldDrawHit(top, skipDragCheck)) {
+      return this;
+    }
+
+    const layer = this.getLayer(),
+      canvas = can || layer!.hitCanvas,
+      context = canvas && canvas.getContext(),
+      drawFunc = this.hitFunc() || this.sceneFunc(),
+      cachedCanvas = this._getCanvasCache(),
+      cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
+
+    if (!this.colorKey) {
+      Util.warn(
+        'Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. If you want to reuse shape you should call remove() instead of destroy()'
+      );
+    }
+
+    if (cachedHitCanvas) {
+      context.save();
+
+      const m = this.getAbsoluteTransform(top).getMatrix();
+      context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+
+      this._drawCachedHitCanvas(context);
+      context.restore();
+      return this;
+    }
+    if (!drawFunc) {
+      return this;
+    }
+    context.save();
+    context._applyLineJoin(this);
+    context._applyMiterLimit(this);
+
+    const selfCache = this === top;
+    if (!selfCache) {
+      const o = this.getAbsoluteTransform(top).getMatrix();
+      context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
+    }
+    drawFunc.call(this, context, this);
+    context.restore();
+    return this;
+  }
+  /**
+   * draw hit graph using the cached scene canvas
+   * @method
+   * @name Konva.Shape#drawHitFromCache
+   * @param {Integer} alphaThreshold alpha channel threshold that determines whether or not
+   *  a pixel should be drawn onto the hit graph.  Must be a value between 0 and 255.
+   *  The default is 0
+   * @returns {Konva.Shape}
+   * @example
+   * shape.cache();
+   * shape.drawHitFromCache();
+   */
+  drawHitFromCache(alphaThreshold = 0) {
+    const cachedCanvas = this._getCanvasCache(),
+      sceneCanvas = this._getCachedSceneCanvas(),
+      hitCanvas = cachedCanvas.hit,
+      hitContext = hitCanvas.getContext(),
+      hitWidth = hitCanvas.getWidth(),
+      hitHeight = hitCanvas.getHeight();
+
+    hitContext.clear();
+    hitContext.drawImage(sceneCanvas._canvas, 0, 0, hitWidth, hitHeight);
+
+    try {
+      const hitImageData = hitContext.getImageData(0, 0, hitWidth, hitHeight);
+      const hitData = hitImageData.data;
+      const len = hitData.length;
+      const rgbColorKey = Util._hexToRgb(this.colorKey);
+
+      // replace non transparent pixels with color key
+      for (let i = 0; i < len; i += 4) {
+        const alpha = hitData[i + 3];
+        if (alpha > alphaThreshold) {
+          hitData[i] = rgbColorKey.r;
+          hitData[i + 1] = rgbColorKey.g;
+          hitData[i + 2] = rgbColorKey.b;
+          hitData[i + 3] = 255;
+        } else {
+          hitData[i + 3] = 0;
+        }
+      }
+      hitContext.putImageData(hitImageData, 0, 0);
+    } catch (e: any) {
+      Util.error(
+        'Unable to draw hit graph from cached scene canvas. ' + e.message
+      );
+    }
+
+    return this;
+  }
+
+  hasPointerCapture(pointerId: number): boolean {
+    return PointerEvents.hasPointerCapture(pointerId, this);
+  }
+
+  setPointerCapture(pointerId: number) {
+    PointerEvents.setPointerCapture(pointerId, this);
+  }
+
+  releaseCapture(pointerId: number) {
+    PointerEvents.releaseCapture(pointerId, this);
+  }
+
+  draggable: GetSet<boolean, this>;
+  embossBlend: GetSet<boolean, this>;
+
+  dash: GetSet<number[], this>;
+  dashEnabled: GetSet<boolean, this>;
+  dashOffset: GetSet<number, this>;
+  fill: GetSet<string | CanvasGradient, this>;
+  fillEnabled: GetSet<boolean, this>;
+  fillLinearGradientColorStops: GetSet<Array<number | string>, this>;
+  fillLinearGradientStartPoint: GetSet<Vector2d, this>;
+  fillLinearGradientStartPointX: GetSet<number, this>;
+  fillLinearGradientStartPointY: GetSet<number, this>;
+  fillLinearGradientEndPoint: GetSet<Vector2d, this>;
+  fillLinearGradientEndPointX: GetSet<number, this>;
+  fillLinearGradientEndPointY: GetSet<number, this>;
+  fillLinearRadialStartPoint: GetSet<Vector2d, this>;
+  fillLinearRadialStartPointX: GetSet<number, this>;
+  fillLinearRadialStartPointY: GetSet<number, this>;
+  fillLinearRadialEndPoint: GetSet<Vector2d, this>;
+  fillLinearRadialEndPointX: GetSet<number, this>;
+  fillLinearRadialEndPointY: GetSet<number, this>;
+  fillPatternImage: GetSet<HTMLImageElement | HTMLCanvasElement, this>;
+  fillRadialGradientStartRadius: GetSet<number, this>;
+  fillRadialGradientEndRadius: GetSet<number, this>;
+  fillRadialGradientColorStops: GetSet<Array<number | string>, this>;
+  fillRadialGradientStartPoint: GetSet<Vector2d, this>;
+  fillRadialGradientStartPointX: GetSet<number, this>;
+  fillRadialGradientStartPointY: GetSet<number, this>;
+  fillRadialGradientEndPoint: GetSet<Vector2d, this>;
+  fillRadialGradientEndPointX: GetSet<number, this>;
+  fillRadialGradientEndPointY: GetSet<number, this>;
+  fillPatternOffset: GetSet<Vector2d, this>;
+  fillPatternOffsetX: GetSet<number, this>;
+  fillPatternOffsetY: GetSet<number, this>;
+  fillPatternRepeat: GetSet<string, this>;
+  fillPatternRotation: GetSet<number, this>;
+  fillPatternScale: GetSet<Vector2d, this>;
+  fillPatternScaleX: GetSet<number, this>;
+  fillPatternScaleY: GetSet<number, this>;
+  fillPatternX: GetSet<number, this>;
+  fillPatternY: GetSet<number, this>;
+  fillPriority: GetSet<string, this>;
+  hitFunc: GetSet<ShapeConfigHandler<this>, this>;
+  lineCap: GetSet<LineCap, this>;
+  lineJoin: GetSet<LineJoin, this>;
+  miterLimit: GetSet<number, this>;
+  perfectDrawEnabled: GetSet<boolean, this>;
+  sceneFunc: GetSet<ShapeConfigHandler<this>, this>;
+  shadowColor: GetSet<string, this>;
+  shadowEnabled: GetSet<boolean, this>;
+  shadowForStrokeEnabled: GetSet<boolean, this>;
+  shadowOffset: GetSet<Vector2d, this>;
+  shadowOffsetX: GetSet<number, this>;
+  shadowOffsetY: GetSet<number, this>;
+  shadowOpacity: GetSet<number, this>;
+  shadowBlur: GetSet<number, this>;
+  stroke: GetSet<string | CanvasGradient, this>;
+  strokeEnabled: GetSet<boolean, this>;
+  fillAfterStrokeEnabled: GetSet<boolean, this>;
+  strokeScaleEnabled: GetSet<boolean, this>;
+  strokeHitEnabled: GetSet<boolean, this>;
+  strokeWidth: GetSet<number, this>;
+  hitStrokeWidth: GetSet<number | 'auto', this>;
+  strokeLinearGradientStartPoint: GetSet<Vector2d, this>;
+  strokeLinearGradientEndPoint: GetSet<Vector2d, this>;
+  strokeLinearGradientColorStops: GetSet<Array<number | string>, this>;
+  strokeLinearGradientStartPointX: GetSet<number, this>;
+  strokeLinearGradientStartPointY: GetSet<number, this>;
+  strokeLinearGradientEndPointX: GetSet<number, this>;
+  strokeLinearGradientEndPointY: GetSet<number, this>;
+  fillRule: GetSet<CanvasFillRule, this>;
+}
+
+Shape.prototype._fillFunc = _fillFunc;
+Shape.prototype._strokeFunc = _strokeFunc;
+Shape.prototype._fillFuncHit = _fillFuncHit;
+Shape.prototype._strokeFuncHit = _strokeFuncHit;
+
+Shape.prototype._centroid = false;
+Shape.prototype.nodeType = 'Shape';
+_registerNode(Shape);
+
+Shape.prototype.eventListeners = {};
+Shape.prototype.on.call(
+  Shape.prototype,
+  'shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva',
+  _clearHasShadowCache
+);
+
+Shape.prototype.on.call(
+  Shape.prototype,
+  'shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva',
+  _clearGetShadowRGBACache
+);
+
+Shape.prototype.on.call(
+  Shape.prototype,
+  'fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva fillPatternOffsetXChange.konva fillPatternOffsetYChange.konva fillPatternXChange.konva fillPatternYChange.konva fillPatternRotationChange.konva',
+  _clearFillPatternCache
+);
+
+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,
+  getStringOrGradientValidator()
+);
+
+/**
+ * get/set stroke color
+ * @name Konva.Shape#stroke
+ * @method
+ * @param {String} color
+ * @returns {String}
+ * @example
+ * // get stroke color
+ * var stroke = shape.stroke();
+ *
+ * // set stroke color with color string
+ * shape.stroke('green');
+ *
+ * // set stroke color with hex
+ * shape.stroke('#00ff00');
+ *
+ * // set stroke color with rgb
+ * shape.stroke('rgb(0,255,0)');
+ *
+ * // set stroke color with rgba and make it 50% opaque
+ * shape.stroke('rgba(0,255,0,0.5');
+ */
+
+Factory.addGetterSetter(Shape, 'strokeWidth', 2, getNumberValidator());
+
+/**
+ * get/set stroke width
+ * @name Konva.Shape#strokeWidth
+ * @method
+ * @param {Number} strokeWidth
+ * @returns {Number}
+ * @example
+ * // get stroke width
+ * var strokeWidth = shape.strokeWidth();
+ *
+ * // set stroke width
+ * shape.strokeWidth(10);
+ */
+
+Factory.addGetterSetter(Shape, 'fillAfterStrokeEnabled', false);
+
+/**
+ * get/set fillAfterStrokeEnabled property. By default Konva is drawing filling first, then stroke on top of the fill.
+ * In rare situations you may want a different behavior. When you have a stroke first then fill on top of it.
+ * Especially useful for Text objects.
+ * Default is false.
+ * @name Konva.Shape#fillAfterStrokeEnabled
+ * @method
+ * @param {Boolean} fillAfterStrokeEnabled
+ * @returns {Boolean}
+ * @example
+ * // get stroke width
+ * var fillAfterStrokeEnabled = shape.fillAfterStrokeEnabled();
+ *
+ * // set stroke width
+ * shape.fillAfterStrokeEnabled(true);
+ */
+
+Factory.addGetterSetter(
+  Shape,
+  'hitStrokeWidth',
+  'auto',
+  getNumberOrAutoValidator()
+);
+
+/**
+ * get/set stroke width for hit detection. Default value is "auto", it means it will be equals to strokeWidth
+ * @name Konva.Shape#hitStrokeWidth
+ * @method
+ * @param {Number} hitStrokeWidth
+ * @returns {Number}
+ * @example
+ * // get stroke width
+ * var hitStrokeWidth = shape.hitStrokeWidth();
+ *
+ * // set hit stroke width
+ * shape.hitStrokeWidth(20);
+ * // set hit stroke width always equals to scene stroke width
+ * shape.hitStrokeWidth('auto');
+ */
+
+Factory.addGetterSetter(Shape, 'strokeHitEnabled', true, getBooleanValidator());
+
+/**
+ * **deprecated, use hitStrokeWidth instead!** get/set strokeHitEnabled property. Useful for performance optimization.
+ * You may set `shape.strokeHitEnabled(false)`. In this case stroke will be no draw on hit canvas, so hit area
+ * of shape will be decreased (by lineWidth / 2). Remember that non closed line with `strokeHitEnabled = false`
+ * will be not drawn on hit canvas, that is mean line will no trigger pointer events (like mouseover)
+ * Default value is true.
+ * @name Konva.Shape#strokeHitEnabled
+ * @method
+ * @param {Boolean} strokeHitEnabled
+ * @returns {Boolean}
+ * @example
+ * // get strokeHitEnabled
+ * var strokeHitEnabled = shape.strokeHitEnabled();
+ *
+ * // set strokeHitEnabled
+ * shape.strokeHitEnabled();
+ */
+
+Factory.addGetterSetter(
+  Shape,
+  'perfectDrawEnabled',
+  true,
+  getBooleanValidator()
+);
+
+/**
+ * get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to false to improve performance.
+ * See http://konvajs.org/docs/performance/Disable_Perfect_Draw.html for more information.
+ * Default value is true
+ * @name Konva.Shape#perfectDrawEnabled
+ * @method
+ * @param {Boolean} perfectDrawEnabled
+ * @returns {Boolean}
+ * @example
+ * // get perfectDrawEnabled
+ * var perfectDrawEnabled = shape.perfectDrawEnabled();
+ *
+ * // set perfectDrawEnabled
+ * shape.perfectDrawEnabled();
+ */
+
+Factory.addGetterSetter(
+  Shape,
+  'shadowForStrokeEnabled',
+  true,
+  getBooleanValidator()
+);
+
+/**
+ * get/set shadowForStrokeEnabled. Useful for performance optimization.
+ * You may set `shape.shadowForStrokeEnabled(false)`. In this case stroke will no effect shadow.
+ * Remember if you set `shadowForStrokeEnabled = false` for non closed line - that line will have no shadow!.
+ * Default value is true
+ * @name Konva.Shape#shadowForStrokeEnabled
+ * @method
+ * @param {Boolean} shadowForStrokeEnabled
+ * @returns {Boolean}
+ * @example
+ * // get shadowForStrokeEnabled
+ * var shadowForStrokeEnabled = shape.shadowForStrokeEnabled();
+ *
+ * // set shadowForStrokeEnabled
+ * shape.shadowForStrokeEnabled();
+ */
+
+Factory.addGetterSetter(Shape, 'lineJoin');
+
+/**
+ * get/set line join.  Can be miter, round, or bevel.  The
+ *  default is miter
+ * @name Konva.Shape#lineJoin
+ * @method
+ * @param {String} lineJoin
+ * @returns {String}
+ * @example
+ * // get line join
+ * var lineJoin = shape.lineJoin();
+ *
+ * // set line join
+ * shape.lineJoin('round');
+ */
+
+Factory.addGetterSetter(Shape, 'lineCap');
+
+/**
+ * get/set line cap.  Can be butt, round, or square
+ * @name Konva.Shape#lineCap
+ * @method
+ * @param {String} lineCap
+ * @returns {String}
+ * @example
+ * // get line cap
+ * var lineCap = shape.lineCap();
+ *
+ * // set line cap
+ * shape.lineCap('round');
+ */
+
+Factory.addGetterSetter(Shape, 'miterLimit');
+
+/**
+ * get/set miterLimit.
+ * @name Konva.Shape#miterLimit
+ * @method
+ * @param {Number} miterLimit
+ * @returns {Number}
+ * @example
+ * // get miter limit
+ * var miterLimit = shape.miterLimit();
+ *
+ * // set miter limit
+ * shape.miterLimit(10);
+ */
+
+Factory.addGetterSetter(Shape, 'sceneFunc');
+
+/**
+ * get/set scene draw function. That function is used to draw the shape on a canvas.
+ * Also that function will be used to draw hit area of the shape, in case if hitFunc is not defined.
+ * @name Konva.Shape#sceneFunc
+ * @method
+ * @param {Function} drawFunc drawing function
+ * @returns {Function}
+ * @example
+ * // get scene draw function
+ * var sceneFunc = shape.sceneFunc();
+ *
+ * // set scene draw function
+ * shape.sceneFunc(function(context, shape) {
+ *   context.beginPath();
+ *   context.rect(0, 0, shape.width(), shape.height());
+ *   context.closePath();
+ *   // important Konva method that fill and stroke shape from its properties
+ *   // like stroke and fill
+ *   context.fillStrokeShape(shape);
+ * });
+ */
+
+Factory.addGetterSetter(Shape, 'hitFunc');
+
+/**
+ * get/set hit draw function. That function is used to draw custom hit area of a shape.
+ * @name Konva.Shape#hitFunc
+ * @method
+ * @param {Function} drawFunc drawing function
+ * @returns {Function}
+ * @example
+ * // get hit draw function
+ * var hitFunc = shape.hitFunc();
+ *
+ * // set hit draw function
+ * shape.hitFunc(function(context) {
+ *   context.beginPath();
+ *   context.rect(0, 0, shape.width(), shape.height());
+ *   context.closePath();
+ *   // important Konva method that fill and stroke shape from its properties
+ *   context.fillStrokeShape(shape);
+ * });
+ */
+
+Factory.addGetterSetter(Shape, 'dash');
+
+/**
+ * get/set dash array for stroke.
+ * @name Konva.Shape#dash
+ * @method
+ * @param {Array} dash
+ * @returns {Array}
+ * @example
+ *  // apply dashed stroke that is 10px long and 5 pixels apart
+ *  line.dash([10, 5]);
+ *  // apply dashed stroke that is made up of alternating dashed
+ *  // lines that are 10px long and 20px apart, and dots that have
+ *  // a radius of 5px and are 20px apart
+ *  line.dash([10, 20, 0.001, 20]);
+ */
+
+Factory.addGetterSetter(Shape, 'dashOffset', 0, getNumberValidator());
+
+/**
+ * get/set dash offset for stroke.
+ * @name Konva.Shape#dash
+ * @method
+ * @param {Number} dash offset
+ * @returns {Number}
+ * @example
+ *  // apply dashed stroke that is 10px long and 5 pixels apart with an offset of 5px
+ *  line.dash([10, 5]);
+ *  line.dashOffset(5);
+ */
+
+Factory.addGetterSetter(Shape, 'shadowColor', undefined, getStringValidator());
+
+/**
+ * get/set shadow color
+ * @name Konva.Shape#shadowColor
+ * @method
+ * @param {String} color
+ * @returns {String}
+ * @example
+ * // get shadow color
+ * var shadow = shape.shadowColor();
+ *
+ * // set shadow color with color string
+ * shape.shadowColor('green');
+ *
+ * // set shadow color with hex
+ * shape.shadowColor('#00ff00');
+ *
+ * // set shadow color with rgb
+ * shape.shadowColor('rgb(0,255,0)');
+ *
+ * // set shadow color with rgba and make it 50% opaque
+ * shape.shadowColor('rgba(0,255,0,0.5');
+ */
+
+Factory.addGetterSetter(Shape, 'shadowBlur', 0, getNumberValidator());
+
+/**
+ * get/set shadow blur
+ * @name Konva.Shape#shadowBlur
+ * @method
+ * @param {Number} blur
+ * @returns {Number}
+ * @example
+ * // get shadow blur
+ * var shadowBlur = shape.shadowBlur();
+ *
+ * // set shadow blur
+ * shape.shadowBlur(10);
+ */
+
+Factory.addGetterSetter(Shape, 'shadowOpacity', 1, getNumberValidator());
+
+/**
+ * get/set shadow opacity.  must be a value between 0 and 1
+ * @name Konva.Shape#shadowOpacity
+ * @method
+ * @param {Number} opacity
+ * @returns {Number}
+ * @example
+ * // get shadow opacity
+ * var shadowOpacity = shape.shadowOpacity();
+ *
+ * // set shadow opacity
+ * shape.shadowOpacity(0.5);
+ */
+
+Factory.addComponentsGetterSetter(Shape, 'shadowOffset', ['x', 'y']);
+
+/**
+ * get/set shadow offset
+ * @name Konva.Shape#shadowOffset
+ * @method
+ * @param {Object} offset
+ * @param {Number} offset.x
+ * @param {Number} offset.y
+ * @returns {Object}
+ * @example
+ * // get shadow offset
+ * var shadowOffset = shape.shadowOffset();
+ *
+ * // set shadow offset
+ * shape.shadowOffset({
+ *   x: 20,
+ *   y: 10
+ * });
+ */
+
+Factory.addGetterSetter(Shape, 'shadowOffsetX', 0, getNumberValidator());
+
+/**
+ * get/set shadow offset x
+ * @name Konva.Shape#shadowOffsetX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get shadow offset x
+ * var shadowOffsetX = shape.shadowOffsetX();
+ *
+ * // set shadow offset x
+ * shape.shadowOffsetX(5);
+ */
+
+Factory.addGetterSetter(Shape, 'shadowOffsetY', 0, getNumberValidator());
+
+/**
+ * get/set shadow offset y
+ * @name Konva.Shape#shadowOffsetY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get shadow offset y
+ * var shadowOffsetY = shape.shadowOffsetY();
+ *
+ * // set shadow offset y
+ * shape.shadowOffsetY(5);
+ */
+
+Factory.addGetterSetter(Shape, 'fillPatternImage');
+
+/**
+ * get/set fill pattern image
+ * @name Konva.Shape#fillPatternImage
+ * @method
+ * @param {Image} image object
+ * @returns {Image}
+ * @example
+ * // get fill pattern image
+ * var fillPatternImage = shape.fillPatternImage();
+ *
+ * // set fill pattern image
+ * var imageObj = new Image();
+ * imageObj.onload = function() {
+ *   shape.fillPatternImage(imageObj);
+ * };
+ * imageObj.src = 'path/to/image/jpg';
+ */
+
+Factory.addGetterSetter(
+  Shape,
+  'fill',
+  undefined,
+  getStringOrGradientValidator()
+);
+
+/**
+ * get/set fill color
+ * @name Konva.Shape#fill
+ * @method
+ * @param {String} color
+ * @returns {String}
+ * @example
+ * // get fill color
+ * var fill = shape.fill();
+ *
+ * // set fill color with color string
+ * shape.fill('green');
+ *
+ * // set fill color with hex
+ * shape.fill('#00ff00');
+ *
+ * // set fill color with rgb
+ * shape.fill('rgb(0,255,0)');
+ *
+ * // set fill color with rgba and make it 50% opaque
+ * shape.fill('rgba(0,255,0,0.5');
+ *
+ * // shape without fill
+ * shape.fill(null);
+ */
+
+Factory.addGetterSetter(Shape, 'fillPatternX', 0, getNumberValidator());
+
+/**
+ * get/set fill pattern x
+ * @name Konva.Shape#fillPatternX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get fill pattern x
+ * var fillPatternX = shape.fillPatternX();
+ * // set fill pattern x
+ * shape.fillPatternX(20);
+ */
+
+Factory.addGetterSetter(Shape, 'fillPatternY', 0, getNumberValidator());
+
+/**
+ * get/set fill pattern y
+ * @name Konva.Shape#fillPatternY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get fill pattern y
+ * var fillPatternY = shape.fillPatternY();
+ * // set fill pattern y
+ * shape.fillPatternY(20);
+ */
+
+Factory.addGetterSetter(Shape, 'fillLinearGradientColorStops');
+
+/**
+ * get/set fill linear gradient color stops
+ * @name Konva.Shape#fillLinearGradientColorStops
+ * @method
+ * @param {Array} colorStops
+ * @returns {Array} colorStops
+ * @example
+ * // get fill linear gradient color stops
+ * var colorStops = shape.fillLinearGradientColorStops();
+ *
+ * // create a linear gradient that starts with red, changes to blue
+ * // halfway through, and then changes to green
+ * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
+ */
+
+Factory.addGetterSetter(Shape, 'strokeLinearGradientColorStops');
+
+/**
+ * get/set stroke linear gradient color stops
+ * @name Konva.Shape#strokeLinearGradientColorStops
+ * @method
+ * @param {Array} colorStops
+ * @returns {Array} colorStops
+ * @example
+ * // get stroke linear gradient color stops
+ * var colorStops = shape.strokeLinearGradientColorStops();
+ *
+ * // create a linear gradient that starts with red, changes to blue
+ * // halfway through, and then changes to green
+ * shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);
+ */
+
+Factory.addGetterSetter(Shape, 'fillRadialGradientStartRadius', 0);
+
+/**
+ * get/set fill radial gradient start radius
+ * @name Konva.Shape#fillRadialGradientStartRadius
+ * @method
+ * @param {Number} radius
+ * @returns {Number}
+ * @example
+ * // get radial gradient start radius
+ * var startRadius = shape.fillRadialGradientStartRadius();
+ *
+ * // set radial gradient start radius
+ * shape.fillRadialGradientStartRadius(0);
+ */
+
+Factory.addGetterSetter(Shape, 'fillRadialGradientEndRadius', 0);
+
+/**
+ * get/set fill radial gradient end radius
+ * @name Konva.Shape#fillRadialGradientEndRadius
+ * @method
+ * @param {Number} radius
+ * @returns {Number}
+ * @example
+ * // get radial gradient end radius
+ * var endRadius = shape.fillRadialGradientEndRadius();
+ *
+ * // set radial gradient end radius
+ * shape.fillRadialGradientEndRadius(100);
+ */
+
+Factory.addGetterSetter(Shape, 'fillRadialGradientColorStops');
+
+/**
+ * get/set fill radial gradient color stops
+ * @name Konva.Shape#fillRadialGradientColorStops
+ * @method
+ * @param {Number} colorStops
+ * @returns {Array}
+ * @example
+ * // get fill radial gradient color stops
+ * var colorStops = shape.fillRadialGradientColorStops();
+ *
+ * // create a radial gradient that starts with red, changes to blue
+ * // halfway through, and then changes to green
+ * shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
+ */
+
+Factory.addGetterSetter(Shape, 'fillPatternRepeat', 'repeat');
+
+/**
+ * get/set fill pattern repeat.  Can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'.  The default is 'repeat'
+ * @name Konva.Shape#fillPatternRepeat
+ * @method
+ * @param {String} repeat
+ * @returns {String}
+ * @example
+ * // get fill pattern repeat
+ * var repeat = shape.fillPatternRepeat();
+ *
+ * // repeat pattern in x direction only
+ * shape.fillPatternRepeat('repeat-x');
+ *
+ * // do not repeat the pattern
+ * shape.fillPatternRepeat('no-repeat');
+ */
+
+Factory.addGetterSetter(Shape, 'fillEnabled', true);
+
+/**
+ * get/set fill enabled flag
+ * @name Konva.Shape#fillEnabled
+ * @method
+ * @param {Boolean} enabled
+ * @returns {Boolean}
+ * @example
+ * // get fill enabled flag
+ * var fillEnabled = shape.fillEnabled();
+ *
+ * // disable fill
+ * shape.fillEnabled(false);
+ *
+ * // enable fill
+ * shape.fillEnabled(true);
+ */
+
+Factory.addGetterSetter(Shape, 'strokeEnabled', true);
+
+/**
+ * get/set stroke enabled flag
+ * @name Konva.Shape#strokeEnabled
+ * @method
+ * @param {Boolean} enabled
+ * @returns {Boolean}
+ * @example
+ * // get stroke enabled flag
+ * var strokeEnabled = shape.strokeEnabled();
+ *
+ * // disable stroke
+ * shape.strokeEnabled(false);
+ *
+ * // enable stroke
+ * shape.strokeEnabled(true);
+ */
+
+Factory.addGetterSetter(Shape, 'shadowEnabled', true);
+
+/**
+ * get/set shadow enabled flag
+ * @name Konva.Shape#shadowEnabled
+ * @method
+ * @param {Boolean} enabled
+ * @returns {Boolean}
+ * @example
+ * // get shadow enabled flag
+ * var shadowEnabled = shape.shadowEnabled();
+ *
+ * // disable shadow
+ * shape.shadowEnabled(false);
+ *
+ * // enable shadow
+ * shape.shadowEnabled(true);
+ */
+
+Factory.addGetterSetter(Shape, 'dashEnabled', true);
+
+/**
+ * get/set dash enabled flag
+ * @name Konva.Shape#dashEnabled
+ * @method
+ * @param {Boolean} enabled
+ * @returns {Boolean}
+ * @example
+ * // get dash enabled flag
+ * var dashEnabled = shape.dashEnabled();
+ *
+ * // disable dash
+ * shape.dashEnabled(false);
+ *
+ * // enable dash
+ * shape.dashEnabled(true);
+ */
+
+Factory.addGetterSetter(Shape, 'strokeScaleEnabled', true);
+
+/**
+ * get/set strokeScale enabled flag
+ * @name Konva.Shape#strokeScaleEnabled
+ * @method
+ * @param {Boolean} enabled
+ * @returns {Boolean}
+ * @example
+ * // get stroke scale enabled flag
+ * var strokeScaleEnabled = shape.strokeScaleEnabled();
+ *
+ * // disable stroke scale
+ * shape.strokeScaleEnabled(false);
+ *
+ * // enable stroke scale
+ * shape.strokeScaleEnabled(true);
+ */
+
+Factory.addGetterSetter(Shape, 'fillPriority', 'color');
+
+/**
+ * get/set fill priority.  can be color, pattern, linear-gradient, or radial-gradient.  The default is color.
+ *   This is handy if you want to toggle between different fill types.
+ * @name Konva.Shape#fillPriority
+ * @method
+ * @param {String} priority
+ * @returns {String}
+ * @example
+ * // get fill priority
+ * var fillPriority = shape.fillPriority();
+ *
+ * // set fill priority
+ * shape.fillPriority('linear-gradient');
+ */
+
+Factory.addComponentsGetterSetter(Shape, 'fillPatternOffset', ['x', 'y']);
+
+/**
+ * get/set fill pattern offset
+ * @name Konva.Shape#fillPatternOffset
+ * @method
+ * @param {Object} offset
+ * @param {Number} offset.x
+ * @param {Number} offset.y
+ * @returns {Object}
+ * @example
+ * // get fill pattern offset
+ * var patternOffset = shape.fillPatternOffset();
+ *
+ * // set fill pattern offset
+ * shape.fillPatternOffset({
+ *   x: 20,
+ *   y: 10
+ * });
+ */
+
+Factory.addGetterSetter(Shape, 'fillPatternOffsetX', 0, getNumberValidator());
+
+/**
+ * get/set fill pattern offset x
+ * @name Konva.Shape#fillPatternOffsetX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get fill pattern offset x
+ * var patternOffsetX = shape.fillPatternOffsetX();
+ *
+ * // set fill pattern offset x
+ * shape.fillPatternOffsetX(20);
+ */
+
+Factory.addGetterSetter(Shape, 'fillPatternOffsetY', 0, getNumberValidator());
+
+/**
+ * get/set fill pattern offset y
+ * @name Konva.Shape#fillPatternOffsetY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get fill pattern offset y
+ * var patternOffsetY = shape.fillPatternOffsetY();
+ *
+ * // set fill pattern offset y
+ * shape.fillPatternOffsetY(10);
+ */
+
+Factory.addComponentsGetterSetter(Shape, 'fillPatternScale', ['x', 'y']);
+
+/**
+ * get/set fill pattern scale
+ * @name Konva.Shape#fillPatternScale
+ * @method
+ * @param {Object} scale
+ * @param {Number} scale.x
+ * @param {Number} scale.y
+ * @returns {Object}
+ * @example
+ * // get fill pattern scale
+ * var patternScale = shape.fillPatternScale();
+ *
+ * // set fill pattern scale
+ * shape.fillPatternScale({
+ *   x: 2,
+ *   y: 2
+ * });
+ */
+
+Factory.addGetterSetter(Shape, 'fillPatternScaleX', 1, getNumberValidator());
+
+/**
+ * get/set fill pattern scale x
+ * @name Konva.Shape#fillPatternScaleX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get fill pattern scale x
+ * var patternScaleX = shape.fillPatternScaleX();
+ *
+ * // set fill pattern scale x
+ * shape.fillPatternScaleX(2);
+ */
+
+Factory.addGetterSetter(Shape, 'fillPatternScaleY', 1, getNumberValidator());
+
+/**
+ * get/set fill pattern scale y
+ * @name Konva.Shape#fillPatternScaleY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get fill pattern scale y
+ * var patternScaleY = shape.fillPatternScaleY();
+ *
+ * // set fill pattern scale y
+ * shape.fillPatternScaleY(2);
+ */
+
+Factory.addComponentsGetterSetter(Shape, 'fillLinearGradientStartPoint', [
+  'x',
+  'y',
+]);
+
+/**
+ * get/set fill linear gradient start point
+ * @name Konva.Shape#fillLinearGradientStartPoint
+ * @method
+ * @param {Object} startPoint
+ * @param {Number} startPoint.x
+ * @param {Number} startPoint.y
+ * @returns {Object}
+ * @example
+ * // get fill linear gradient start point
+ * var startPoint = shape.fillLinearGradientStartPoint();
+ *
+ * // set fill linear gradient start point
+ * shape.fillLinearGradientStartPoint({
+ *   x: 20,
+ *   y: 10
+ * });
+ */
+
+Factory.addComponentsGetterSetter(Shape, 'strokeLinearGradientStartPoint', [
+  'x',
+  'y',
+]);
+
+/**
+ * get/set stroke linear gradient start point
+ * @name Konva.Shape#strokeLinearGradientStartPoint
+ * @method
+ * @param {Object} startPoint
+ * @param {Number} startPoint.x
+ * @param {Number} startPoint.y
+ * @returns {Object}
+ * @example
+ * // get stroke linear gradient start point
+ * var startPoint = shape.strokeLinearGradientStartPoint();
+ *
+ * // set stroke linear gradient start point
+ * shape.strokeLinearGradientStartPoint({
+ *   x: 20,
+ *   y: 10
+ * });
+ */
+
+Factory.addGetterSetter(Shape, 'fillLinearGradientStartPointX', 0);
+
+/**
+ * get/set fill linear gradient start point x
+ * @name Konva.Shape#fillLinearGradientStartPointX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get fill linear gradient start point x
+ * var startPointX = shape.fillLinearGradientStartPointX();
+ *
+ * // set fill linear gradient start point x
+ * shape.fillLinearGradientStartPointX(20);
+ */
+
+Factory.addGetterSetter(Shape, 'strokeLinearGradientStartPointX', 0);
+
+/**
+ * get/set stroke linear gradient start point x
+ * @name Konva.Shape#linearLinearGradientStartPointX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get stroke linear gradient start point x
+ * var startPointX = shape.strokeLinearGradientStartPointX();
+ *
+ * // set stroke linear gradient start point x
+ * shape.strokeLinearGradientStartPointX(20);
+ */
+
+Factory.addGetterSetter(Shape, 'fillLinearGradientStartPointY', 0);
+
+/**
+ * get/set fill linear gradient start point y
+ * @name Konva.Shape#fillLinearGradientStartPointY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get fill linear gradient start point y
+ * var startPointY = shape.fillLinearGradientStartPointY();
+ *
+ * // set fill linear gradient start point y
+ * shape.fillLinearGradientStartPointY(20);
+ */
+
+Factory.addGetterSetter(Shape, 'strokeLinearGradientStartPointY', 0);
+/**
+ * get/set stroke linear gradient start point y
+ * @name Konva.Shape#strokeLinearGradientStartPointY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get stroke linear gradient start point y
+ * var startPointY = shape.strokeLinearGradientStartPointY();
+ *
+ * // set stroke linear gradient start point y
+ * shape.strokeLinearGradientStartPointY(20);
+ */
+
+Factory.addComponentsGetterSetter(Shape, 'fillLinearGradientEndPoint', [
+  'x',
+  'y',
+]);
+
+/**
+ * get/set fill linear gradient end point
+ * @name Konva.Shape#fillLinearGradientEndPoint
+ * @method
+ * @param {Object} endPoint
+ * @param {Number} endPoint.x
+ * @param {Number} endPoint.y
+ * @returns {Object}
+ * @example
+ * // get fill linear gradient end point
+ * var endPoint = shape.fillLinearGradientEndPoint();
+ *
+ * // set fill linear gradient end point
+ * shape.fillLinearGradientEndPoint({
+ *   x: 20,
+ *   y: 10
+ * });
+ */
+
+Factory.addComponentsGetterSetter(Shape, 'strokeLinearGradientEndPoint', [
+  'x',
+  'y',
+]);
+
+/**
+ * get/set stroke linear gradient end point
+ * @name Konva.Shape#strokeLinearGradientEndPoint
+ * @method
+ * @param {Object} endPoint
+ * @param {Number} endPoint.x
+ * @param {Number} endPoint.y
+ * @returns {Object}
+ * @example
+ * // get stroke linear gradient end point
+ * var endPoint = shape.strokeLinearGradientEndPoint();
+ *
+ * // set stroke linear gradient end point
+ * shape.strokeLinearGradientEndPoint({
+ *   x: 20,
+ *   y: 10
+ * });
+ */
+
+Factory.addGetterSetter(Shape, 'fillLinearGradientEndPointX', 0);
+/**
+ * get/set fill linear gradient end point x
+ * @name Konva.Shape#fillLinearGradientEndPointX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get fill linear gradient end point x
+ * var endPointX = shape.fillLinearGradientEndPointX();
+ *
+ * // set fill linear gradient end point x
+ * shape.fillLinearGradientEndPointX(20);
+ */
+
+Factory.addGetterSetter(Shape, 'strokeLinearGradientEndPointX', 0);
+/**
+ * get/set fill linear gradient end point x
+ * @name Konva.Shape#strokeLinearGradientEndPointX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get stroke linear gradient end point x
+ * var endPointX = shape.strokeLinearGradientEndPointX();
+ *
+ * // set stroke linear gradient end point x
+ * shape.strokeLinearGradientEndPointX(20);
+ */
+
+Factory.addGetterSetter(Shape, 'fillLinearGradientEndPointY', 0);
+/**
+ * get/set fill linear gradient end point y
+ * @name Konva.Shape#fillLinearGradientEndPointY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get fill linear gradient end point y
+ * var endPointY = shape.fillLinearGradientEndPointY();
+ *
+ * // set fill linear gradient end point y
+ * shape.fillLinearGradientEndPointY(20);
+ */
+
+Factory.addGetterSetter(Shape, 'strokeLinearGradientEndPointY', 0);
+/**
+ * get/set stroke linear gradient end point y
+ * @name Konva.Shape#strokeLinearGradientEndPointY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get stroke linear gradient end point y
+ * var endPointY = shape.strokeLinearGradientEndPointY();
+ *
+ * // set stroke linear gradient end point y
+ * shape.strokeLinearGradientEndPointY(20);
+ */
+
+Factory.addComponentsGetterSetter(Shape, 'fillRadialGradientStartPoint', [
+  'x',
+  'y',
+]);
+
+/**
+ * get/set fill radial gradient start point
+ * @name Konva.Shape#fillRadialGradientStartPoint
+ * @method
+ * @param {Object} startPoint
+ * @param {Number} startPoint.x
+ * @param {Number} startPoint.y
+ * @returns {Object}
+ * @example
+ * // get fill radial gradient start point
+ * var startPoint = shape.fillRadialGradientStartPoint();
+ *
+ * // set fill radial gradient start point
+ * shape.fillRadialGradientStartPoint({
+ *   x: 20,
+ *   y: 10
+ * });
+ */
+
+Factory.addGetterSetter(Shape, 'fillRadialGradientStartPointX', 0);
+/**
+ * get/set fill radial gradient start point x
+ * @name Konva.Shape#fillRadialGradientStartPointX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get fill radial gradient start point x
+ * var startPointX = shape.fillRadialGradientStartPointX();
+ *
+ * // set fill radial gradient start point x
+ * shape.fillRadialGradientStartPointX(20);
+ */
+
+Factory.addGetterSetter(Shape, 'fillRadialGradientStartPointY', 0);
+/**
+ * get/set fill radial gradient start point y
+ * @name Konva.Shape#fillRadialGradientStartPointY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get fill radial gradient start point y
+ * var startPointY = shape.fillRadialGradientStartPointY();
+ *
+ * // set fill radial gradient start point y
+ * shape.fillRadialGradientStartPointY(20);
+ */
+
+Factory.addComponentsGetterSetter(Shape, 'fillRadialGradientEndPoint', [
+  'x',
+  'y',
+]);
+
+/**
+ * get/set fill radial gradient end point
+ * @name Konva.Shape#fillRadialGradientEndPoint
+ * @method
+ * @param {Object} endPoint
+ * @param {Number} endPoint.x
+ * @param {Number} endPoint.y
+ * @returns {Object}
+ * @example
+ * // get fill radial gradient end point
+ * var endPoint = shape.fillRadialGradientEndPoint();
+ *
+ * // set fill radial gradient end point
+ * shape.fillRadialGradientEndPoint({
+ *   x: 20,
+ *   y: 10
+ * });
+ */
+
+Factory.addGetterSetter(Shape, 'fillRadialGradientEndPointX', 0);
+/**
+ * get/set fill radial gradient end point x
+ * @name Konva.Shape#fillRadialGradientEndPointX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get fill radial gradient end point x
+ * var endPointX = shape.fillRadialGradientEndPointX();
+ *
+ * // set fill radial gradient end point x
+ * shape.fillRadialGradientEndPointX(20);
+ */
+
+Factory.addGetterSetter(Shape, 'fillRadialGradientEndPointY', 0);
+/**
+ * get/set fill radial gradient end point y
+ * @name Konva.Shape#fillRadialGradientEndPointY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get fill radial gradient end point y
+ * var endPointY = shape.fillRadialGradientEndPointY();
+ *
+ * // set fill radial gradient end point y
+ * shape.fillRadialGradientEndPointY(20);
+ */
+
+Factory.addGetterSetter(Shape, 'fillPatternRotation', 0);
+
+/**
+ * get/set fill pattern rotation in degrees
+ * @name Konva.Shape#fillPatternRotation
+ * @method
+ * @param {Number} rotation
+ * @returns {Konva.Shape}
+ * @example
+ * // get fill pattern rotation
+ * var patternRotation = shape.fillPatternRotation();
+ *
+ * // set fill pattern rotation
+ * shape.fillPatternRotation(20);
+ */
+
+Factory.addGetterSetter(Shape, 'fillRule', undefined, getStringValidator());
+
+/**
+ * get/set fill rule
+ * @name Konva.Shape#fillRule
+ * @method
+ * @param {CanvasFillRule} rotation
+ * @returns {Konva.Shape}
+ * @example
+ * // get fill rule
+ * var fillRule = shape.fillRule();
+ *
+ * // set fill rule
+ * shape.fillRule('evenodd');
+ */
+
+Factory.backCompat(Shape, {
+  dashArray: 'dash',
+  getDashArray: 'getDash',
+  setDashArray: 'getDash',
+
+  drawFunc: 'sceneFunc',
+  getDrawFunc: 'getSceneFunc',
+  setDrawFunc: 'setSceneFunc',
+
+  drawHitFunc: 'hitFunc',
+  getDrawHitFunc: 'getHitFunc',
+  setDrawHitFunc: 'setHitFunc',
+});