@nasser-sw/fabric 7.0.0-beta1

package/debug/konva/src/Node.ts

@@ -0,0 +1,3477 @@
+import type { Canvas } from './Canvas.ts';
+import { HitCanvas, SceneCanvas } from './Canvas.ts';
+import type { Container } from './Container.ts';
+import type { Context } from './Context.ts';
+import { isCSSFiltersSupported } from './Context.ts';
+import { DD } from './DragAndDrop.ts';
+import { Factory } from './Factory.ts';
+import { Konva } from './Global.ts';
+import type { Layer } from './Layer.ts';
+import type { Shape } from './Shape.ts';
+import type { Stage } from './Stage.ts';
+import type { GetSet, IRect, Vector2d } from './types.ts';
+import { Transform, Util } from './Util.ts';
+import {
+  getBooleanValidator,
+  getNumberValidator,
+  getStringValidator,
+} from './Validators.ts';
+
+export type FilterFunction = (this: Node, imageData: ImageData) => void;
+export type Filter = FilterFunction | string;
+type Filters = Array<FilterFunction | string>;
+
+// CSS filter parser for fallback to function filters
+function parseCSSFilters(cssFilter: string): FilterFunction {
+  // Parse common CSS filter functions and map to Konva filters
+  const filterRegex = /(\w+)\(([^)]+)\)/g;
+  let match;
+
+  while ((match = filterRegex.exec(cssFilter)) !== null) {
+    const [, filterName, filterValue] = match;
+
+    switch (filterName) {
+      case 'blur': {
+        const blurRadius = parseFloat(filterValue.replace('px', ''));
+        return function (imageData) {
+          // CSS blur uses standard deviation, Stack Blur uses radius
+          // Empirical testing shows CSS blur needs ~0.5 scaling for visual match
+          (this as any).blurRadius(blurRadius * 0.5);
+          // Access filters through dynamic import to avoid circular dependency
+          const KonvaFilters = (Konva as any).Filters;
+          if (KonvaFilters && KonvaFilters.Blur) {
+            KonvaFilters.Blur.call(this, imageData);
+          }
+        };
+      }
+
+      case 'brightness': {
+        const brightness = filterValue.includes('%')
+          ? parseFloat(filterValue) / 100
+          : parseFloat(filterValue);
+        return function (imageData) {
+          (this as any).brightness(brightness); // CSS uses multiplier
+          const KonvaFilters = (Konva as any).Filters;
+          if (KonvaFilters && KonvaFilters.Brightness) {
+            KonvaFilters.Brightness.call(this, imageData);
+          }
+        };
+      }
+      case 'contrast': {
+        const contrast = parseFloat(filterValue);
+        return function (imageData) {
+          // Convert CSS contrast to Konva parameter using square root conversion
+          // to account for Konva's quadratic scaling: Math.pow((param + 100) / 100, 2)
+          const konvaContrast = 100 * (Math.sqrt(contrast) - 1);
+          (this as any).contrast(konvaContrast);
+          const KonvaFilters = (Konva as any).Filters;
+          if (KonvaFilters && KonvaFilters.Contrast) {
+            KonvaFilters.Contrast.call(this, imageData);
+          }
+        };
+      }
+      case 'grayscale': {
+        return function (imageData) {
+          const KonvaFilters = (Konva as any).Filters;
+          if (KonvaFilters && KonvaFilters.Grayscale) {
+            KonvaFilters.Grayscale.call(this, imageData);
+          }
+        };
+      }
+      case 'sepia': {
+        return function (imageData) {
+          const KonvaFilters = (Konva as any).Filters;
+          if (KonvaFilters && KonvaFilters.Sepia) {
+            KonvaFilters.Sepia.call(this, imageData);
+          }
+        };
+      }
+      case 'invert': {
+        return function (imageData) {
+          const KonvaFilters = (Konva as any).Filters;
+          if (KonvaFilters && KonvaFilters.Invert) {
+            KonvaFilters.Invert.call(this, imageData);
+          }
+        };
+      }
+      default:
+        Util.warn(
+          `CSS filter "${filterName}" is not supported in fallback mode. Consider using function filters for better compatibility.`
+        );
+        break;
+    }
+  }
+
+  return () => {};
+}
+
+type globalCompositeOperationType =
+  | ''
+  | 'source-over'
+  | 'source-in'
+  | 'source-out'
+  | 'source-atop'
+  | 'destination-over'
+  | 'destination-in'
+  | 'destination-out'
+  | 'destination-atop'
+  | 'lighter'
+  | 'copy'
+  | 'xor'
+  | 'multiply'
+  | 'screen'
+  | 'overlay'
+  | 'darken'
+  | 'lighten'
+  | 'color-dodge'
+  | 'color-burn'
+  | 'hard-light'
+  | 'soft-light'
+  | 'difference'
+  | 'exclusion'
+  | 'hue'
+  | 'saturation'
+  | 'color'
+  | 'luminosity';
+
+export interface NodeConfig {
+  // allow any custom attribute
+  [index: string]: any;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  visible?: boolean;
+  listening?: boolean;
+  id?: string;
+  name?: string;
+  opacity?: number;
+  scale?: Vector2d;
+  scaleX?: number;
+  skewX?: number;
+  skewY?: number;
+  scaleY?: number;
+  rotation?: number;
+  rotationDeg?: number;
+  offset?: Vector2d;
+  offsetX?: number;
+  offsetY?: number;
+  draggable?: boolean;
+  dragDistance?: number;
+  dragBoundFunc?: (this: Node, pos: Vector2d) => Vector2d;
+  preventDefault?: boolean;
+  globalCompositeOperation?: globalCompositeOperationType;
+  filters?: Filters;
+}
+
+// CONSTANTS
+const ABSOLUTE_OPACITY = 'absoluteOpacity',
+  ALL_LISTENERS = 'allEventListeners',
+  ABSOLUTE_TRANSFORM = 'absoluteTransform',
+  ABSOLUTE_SCALE = 'absoluteScale',
+  CANVAS = 'canvas',
+  CHANGE = 'Change',
+  CHILDREN = 'children',
+  KONVA = 'konva',
+  LISTENING = 'listening',
+  MOUSEENTER = 'mouseenter',
+  MOUSELEAVE = 'mouseleave',
+  POINTERENTER = 'pointerenter',
+  POINTERLEAVE = 'pointerleave',
+  TOUCHENTER = 'touchenter',
+  TOUCHLEAVE = 'touchleave',
+  NAME = 'name',
+  SET = 'set',
+  SHAPE = 'Shape',
+  SPACE = ' ',
+  STAGE = 'stage',
+  TRANSFORM = 'transform',
+  UPPER_STAGE = 'Stage',
+  VISIBLE = 'visible',
+  TRANSFORM_CHANGE_STR = [
+    'xChange.konva',
+    'yChange.konva',
+    'scaleXChange.konva',
+    'scaleYChange.konva',
+    'skewXChange.konva',
+    'skewYChange.konva',
+    'rotationChange.konva',
+    'offsetXChange.konva',
+    'offsetYChange.konva',
+    'transformsEnabledChange.konva',
+  ].join(SPACE);
+
+let idCounter = 1;
+
+// create all the events here
+type NodeEventMap = GlobalEventHandlersEventMap & {
+  [index: string]: any;
+};
+
+export interface KonvaEventObject<EventType, This = Node> {
+  type: string;
+  target: Shape | Stage;
+  evt: EventType;
+  pointerId: number;
+  currentTarget: This;
+  cancelBubble: boolean;
+  child?: Node;
+}
+
+export type KonvaEventListener<This, EventType> = (
+  this: This,
+  ev: KonvaEventObject<EventType, This>
+) => void;
+
+/**
+ * Node constructor. Nodes are entities that can be transformed, layered,
+ * and have bound events. The stage, layers, groups, and shapes all extend Node.
+ * @constructor
+ * @memberof Konva
+ * @param {Object} config
+ * @@nodeParams
+ */
+export abstract class Node<Config extends NodeConfig = NodeConfig> {
+  _id = idCounter++;
+  eventListeners: {
+    [index: string]: Array<{ name: string; handler: Function }>;
+  } = {};
+  attrs: any = {};
+  index = 0;
+  _allEventListeners: null | Array<Function> = null;
+  parent: Container | null = null;
+  _cache: Map<string, any> = new Map<string, any>();
+  _attachedDepsListeners: Map<string, boolean> = new Map<string, boolean>();
+  _lastPos: Vector2d | null = null;
+  _attrsAffectingSize!: string[];
+  _batchingTransformChange = false;
+  _needClearTransformCache = false;
+
+  _filterUpToDate = false;
+  _isUnderCache = false;
+  nodeType!: string;
+  className!: string;
+
+  _dragEventId: number | null = null;
+  _shouldFireChangeEvents = false;
+
+  constructor(config?: Config) {
+    // on initial set attrs wi don't need to fire change events
+    // because nobody is listening to them yet
+    this.setAttrs(config);
+    this._shouldFireChangeEvents = true;
+
+    // all change event listeners are attached to the prototype
+  }
+
+  hasChildren() {
+    return false;
+  }
+
+  _clearCache(attr?: string) {
+    // if we want to clear transform cache
+    // we don't really need to remove it from the cache
+    // but instead mark as "dirty"
+    // so we don't need to create a new instance next time
+    if (
+      (attr === TRANSFORM || attr === ABSOLUTE_TRANSFORM) &&
+      this._cache.get(attr)
+    ) {
+      (this._cache.get(attr) as Transform).dirty = true;
+    } else if (attr) {
+      this._cache.delete(attr);
+    } else {
+      this._cache.clear();
+    }
+  }
+  _getCache(attr: string, privateGetter: Function) {
+    let cache = this._cache.get(attr);
+
+    // for transform the cache can be NOT empty
+    // but we still need to recalculate it if it is dirty
+    const isTransform = attr === TRANSFORM || attr === ABSOLUTE_TRANSFORM;
+    const invalid =
+      cache === undefined || (isTransform && cache.dirty === true);
+
+    // if not cached, we need to set it using the private getter method.
+    if (invalid) {
+      cache = privateGetter.call(this);
+      this._cache.set(attr, cache);
+    }
+
+    return cache;
+  }
+
+  _calculate(name: string, deps: Array<string>, getter: Function) {
+    // if we are trying to calculate function for the first time
+    // we need to attach listeners for change events
+    if (!this._attachedDepsListeners.get(name)) {
+      const depsString = deps.map((dep) => dep + 'Change.konva').join(SPACE);
+      this.on(depsString, () => {
+        this._clearCache(name);
+      });
+      this._attachedDepsListeners.set(name, true);
+    }
+    // just use cache function
+    return this._getCache(name, getter);
+  }
+
+  _getCanvasCache() {
+    return this._cache.get(CANVAS);
+  }
+  /*
+   * when the logic for a cached result depends on ancestor propagation, use this
+   * method to clear self and children cache
+   */
+  _clearSelfAndDescendantCache(attr?: string) {
+    this._clearCache(attr);
+    // trigger clear cache, so transformer can use it
+    if (attr === ABSOLUTE_TRANSFORM) {
+      this.fire('absoluteTransformChange');
+    }
+  }
+  /**
+   * clear cached canvas
+   * @method
+   * @name Konva.Node#clearCache
+   * @returns {Konva.Node}
+   * @example
+   * node.clearCache();
+   */
+  clearCache() {
+    if (this._cache.has(CANVAS)) {
+      const { scene, filter, hit, buffer } = this._cache.get(CANVAS);
+      Util.releaseCanvas(scene, filter, hit, buffer);
+      this._cache.delete(CANVAS);
+    }
+
+    this._clearSelfAndDescendantCache();
+    this._requestDraw();
+    return this;
+  }
+  /**
+   *  cache node to improve drawing performance, apply filters, or create more accurate
+   *  hit regions. For all basic shapes size of cache canvas will be automatically detected.
+   *  If you need to cache your custom `Konva.Shape` instance you have to pass shape's bounding box
+   *  properties. Look at [https://konvajs.org/docs/performance/Shape_Caching.html](https://konvajs.org/docs/performance/Shape_Caching.html) for more information.
+   * @method
+   * @name Konva.Node#cache
+   * @param {Object} [config]
+   * @param {Number} [config.x]
+   * @param {Number} [config.y]
+   * @param {Number} [config.width]
+   * @param {Number} [config.height]
+   * @param {Number} [config.offset]  increase canvas size by `offset` pixel in all directions.
+   * @param {Boolean} [config.drawBorder] when set to true, a red border will be drawn around the cached
+   *  region for debugging purposes
+   * @param {Number} [config.pixelRatio] change quality (or pixel ratio) of cached image. pixelRatio = 2 will produce 2x sized cache.
+   * @param {Boolean} [config.imageSmoothingEnabled] control imageSmoothingEnabled property of created canvas for cache
+   * @param {Number} [config.hitCanvasPixelRatio] change quality (or pixel ratio) of cached hit canvas.
+   * @returns {Konva.Node}
+   * @example
+   * // cache a shape with the x,y position of the bounding box at the center and
+   * // the width and height of the bounding box equal to the width and height of
+   * // the shape obtained from shape.width() and shape.height()
+   * image.cache();
+   *
+   * // cache a node and define the bounding box position and size
+   * node.cache({
+   *   x: -30,
+   *   y: -30,
+   *   width: 100,
+   *   height: 200
+   * });
+   *
+   * // cache a node and draw a red border around the bounding box
+   * // for debugging purposes
+   * node.cache({
+   *   x: -30,
+   *   y: -30,
+   *   width: 100,
+   *   height: 200,
+   *   offset : 10,
+   *   drawBorder: true
+   * });
+   */
+  cache(config?: {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    drawBorder?: boolean;
+    offset?: number;
+    pixelRatio?: number;
+    imageSmoothingEnabled?: boolean;
+    hitCanvasPixelRatio?: number;
+  }) {
+    const conf = config || {};
+    let rect = {} as IRect;
+
+    // don't call getClientRect if we have all attributes
+    // it means call it only if have one undefined
+    if (
+      conf.x === undefined ||
+      conf.y === undefined ||
+      conf.width === undefined ||
+      conf.height === undefined
+    ) {
+      rect = this.getClientRect({
+        skipTransform: true,
+        relativeTo: this.getParent() || undefined,
+      });
+    }
+    let width = Math.ceil(conf.width || rect.width),
+      height = Math.ceil(conf.height || rect.height),
+      pixelRatio = conf.pixelRatio,
+      x = conf.x === undefined ? Math.floor(rect.x) : conf.x,
+      y = conf.y === undefined ? Math.floor(rect.y) : conf.y,
+      offset = conf.offset || 0,
+      drawBorder = conf.drawBorder || false,
+      hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
+
+    if (!width || !height) {
+      Util.error(
+        'Can not cache the node. Width or height of the node equals 0. Caching is skipped.'
+      );
+      return;
+    }
+
+    // because using Math.floor on x, y position may shift drawing
+    // to avoid shift we need to increase size
+    // but we better to avoid it, for better filters flows
+    const extraPaddingX = Math.abs(Math.round(rect.x) - x) > 0.5 ? 1 : 0;
+    const extraPaddingY = Math.abs(Math.round(rect.y) - y) > 0.5 ? 1 : 0;
+    width += offset * 2 + extraPaddingX;
+    height += offset * 2 + extraPaddingY;
+
+    x -= offset;
+    y -= offset;
+
+    // if (Math.floor(x) < x) {
+    //   x = Math.floor(x);
+    //   // width += 1;
+    // }
+    // if (Math.floor(y) < y) {
+    //   y = Math.floor(y);
+    //   // height += 1;
+    // }
+
+    // console.log({ x, y, width, height }, rect);
+
+    const cachedSceneCanvas = new SceneCanvas({
+        pixelRatio: pixelRatio,
+        width: width,
+        height: height,
+      }),
+      cachedFilterCanvas = new SceneCanvas({
+        pixelRatio: pixelRatio,
+        width: 0,
+        height: 0,
+        willReadFrequently: true,
+      }),
+      cachedHitCanvas = new HitCanvas({
+        pixelRatio: hitCanvasPixelRatio,
+        width: width,
+        height: height,
+      }),
+      sceneContext = cachedSceneCanvas.getContext(),
+      hitContext = cachedHitCanvas.getContext();
+
+    const bufferCanvas = new SceneCanvas({
+        // width and height already multiplied by pixelRatio
+        // so we need to revert that
+        // also increase size by x nd y offset to make sure content fits canvas
+        width:
+          cachedSceneCanvas.width / cachedSceneCanvas.pixelRatio + Math.abs(x),
+        height:
+          cachedSceneCanvas.height / cachedSceneCanvas.pixelRatio + Math.abs(y),
+        pixelRatio: cachedSceneCanvas.pixelRatio,
+      }),
+      bufferContext = bufferCanvas.getContext();
+
+    cachedHitCanvas.isCache = true;
+    cachedSceneCanvas.isCache = true;
+
+    this._cache.delete(CANVAS);
+    this._filterUpToDate = false;
+
+    if (conf.imageSmoothingEnabled === false) {
+      cachedSceneCanvas.getContext()._context.imageSmoothingEnabled = false;
+      cachedFilterCanvas.getContext()._context.imageSmoothingEnabled = false;
+    }
+
+    sceneContext.save();
+    hitContext.save();
+    bufferContext.save();
+
+    sceneContext.translate(-x, -y);
+    hitContext.translate(-x, -y);
+    bufferContext.translate(-x, -y);
+    // hard-code offset to make sure content fits canvas
+    // @ts-ignore
+    bufferCanvas.x = x;
+    // @ts-ignore
+    bufferCanvas.y = y;
+
+    // extra flag to skip on getAbsolute opacity calc
+    this._isUnderCache = true;
+    this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
+    this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
+
+    this.drawScene(cachedSceneCanvas, this, bufferCanvas);
+    this.drawHit(cachedHitCanvas, this);
+    this._isUnderCache = false;
+
+    sceneContext.restore();
+    hitContext.restore();
+
+    // this will draw a red border around the cached box for
+    // debugging purposes
+    if (drawBorder) {
+      sceneContext.save();
+      sceneContext.beginPath();
+      sceneContext.rect(0, 0, width, height);
+      sceneContext.closePath();
+      sceneContext.setAttr('strokeStyle', 'red');
+      sceneContext.setAttr('lineWidth', 5);
+      sceneContext.stroke();
+      sceneContext.restore();
+    }
+
+    this._cache.set(CANVAS, {
+      scene: cachedSceneCanvas,
+      filter: cachedFilterCanvas,
+      hit: cachedHitCanvas,
+      buffer: bufferCanvas,
+      x: x,
+      y: y,
+    });
+
+    this._requestDraw();
+
+    return this;
+  }
+
+  /**
+   * determine if node is currently cached
+   * @method
+   * @name Konva.Node#isCached
+   * @returns {Boolean}
+   */
+  isCached() {
+    return this._cache.has(CANVAS);
+  }
+
+  abstract drawScene(canvas?: Canvas, top?: Node, bufferCanvas?: Canvas): void;
+  abstract drawHit(canvas?: Canvas, top?: Node): void;
+  /**
+   * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
+   * The purpose of the method is similar to getBoundingClientRect API of the DOM.
+   * @method
+   * @name Konva.Node#getClientRect
+   * @param {Object} config
+   * @param {Boolean} [config.skipTransform] should we apply transform to node for calculating rect?
+   * @param {Boolean} [config.skipShadow] should we apply shadow to the node for calculating bound box?
+   * @param {Boolean} [config.skipStroke] should we apply stroke to the node for calculating bound box?
+   * @param {Object} [config.relativeTo] calculate client rect relative to one of the parents
+   * @returns {Object} rect with {x, y, width, height} properties
+   * @example
+   * var rect = new Konva.Rect({
+   *      width : 100,
+   *      height : 100,
+   *      x : 50,
+   *      y : 50,
+   *      strokeWidth : 4,
+   *      stroke : 'black',
+   *      offsetX : 50,
+   *      scaleY : 2
+   * });
+   *
+   * // get client rect without think off transformations (position, rotation, scale, offset, etc)
+   * rect.getClientRect({ skipTransform: true});
+   * // returns {
+   * //     x : -2,   // two pixels for stroke / 2
+   * //     y : -2,
+   * //     width : 104, // increased by 4 for stroke
+   * //     height : 104
+   * //}
+   *
+   * // get client rect with transformation applied
+   * rect.getClientRect();
+   * // returns Object {x: -2, y: 46, width: 104, height: 208}
+   */
+  getClientRect(config?: {
+    skipTransform?: boolean;
+    skipShadow?: boolean;
+    skipStroke?: boolean;
+    relativeTo?: Container;
+  }): { x: number; y: number; width: number; height: number } {
+    // abstract method
+    // redefine in Container and Shape
+    throw new Error('abstract "getClientRect" method call');
+  }
+  _transformedRect(rect: IRect, top?: Node | null) {
+    const points = [
+      { x: rect.x, y: rect.y },
+      { x: rect.x + rect.width, y: rect.y },
+      { x: rect.x + rect.width, y: rect.y + rect.height },
+      { x: rect.x, y: rect.y + rect.height },
+    ];
+    let minX: number = Infinity,
+      minY: number = Infinity,
+      maxX: number = -Infinity,
+      maxY: number = -Infinity;
+    const trans = this.getAbsoluteTransform(top);
+    points.forEach(function (point) {
+      const transformed = trans.point(point);
+      if (minX === undefined) {
+        minX = maxX = transformed.x;
+        minY = maxY = transformed.y;
+      }
+      minX = Math.min(minX, transformed.x);
+      minY = Math.min(minY, transformed.y);
+      maxX = Math.max(maxX, transformed.x);
+      maxY = Math.max(maxY, transformed.y);
+    });
+    return {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY,
+    };
+  }
+  _drawCachedSceneCanvas(context: Context) {
+    context.save();
+    context._applyOpacity(this);
+    context._applyGlobalCompositeOperation(this);
+
+    const canvasCache = this._getCanvasCache();
+    context.translate(canvasCache.x, canvasCache.y);
+
+    const cacheCanvas = this._getCachedSceneCanvas();
+    const ratio = cacheCanvas.pixelRatio;
+
+    context.drawImage(
+      cacheCanvas._canvas,
+      0,
+      0,
+      cacheCanvas.width / ratio,
+      cacheCanvas.height / ratio
+    );
+    context.restore();
+  }
+  _drawCachedHitCanvas(context: Context) {
+    const canvasCache = this._getCanvasCache(),
+      hitCanvas = canvasCache.hit;
+    context.save();
+    context.translate(canvasCache.x, canvasCache.y);
+    context.drawImage(
+      hitCanvas._canvas,
+      0,
+      0,
+      hitCanvas.width / hitCanvas.pixelRatio,
+      hitCanvas.height / hitCanvas.pixelRatio
+    );
+    context.restore();
+  }
+  _getCachedSceneCanvas() {
+    let filters = this.filters(),
+      cachedCanvas = this._getCanvasCache(),
+      sceneCanvas = cachedCanvas.scene as Canvas,
+      filterCanvas = cachedCanvas.filter as Canvas,
+      filterContext = filterCanvas.getContext(),
+      len,
+      imageData,
+      n,
+      filter;
+
+    if (!filters || filters.length === 0) {
+      return sceneCanvas;
+    }
+
+    if (this._filterUpToDate) {
+      return filterCanvas;
+    }
+
+    let useNativeOnly = true;
+    for (let i = 0; i < filters.length; i++) {
+      const fallbackRequired =
+        typeof filters[i] === 'string' && !isCSSFiltersSupported();
+      if (fallbackRequired) {
+        // Util.warn(
+        //   `CSS filter "${filters[i]}" is not supported in native mode.`
+        // );
+      }
+      if (typeof filters[i] !== 'string' || !isCSSFiltersSupported()) {
+        useNativeOnly = false;
+        break;
+      }
+    }
+
+    const ratio = sceneCanvas.pixelRatio;
+    filterCanvas.setSize(
+      sceneCanvas.width / sceneCanvas.pixelRatio,
+      sceneCanvas.height / sceneCanvas.pixelRatio
+    );
+    if (useNativeOnly) {
+      const finalFilter = (filters as unknown as string[]).join(' ');
+      filterContext.save();
+      filterContext.setAttr('filter', finalFilter);
+      filterContext.drawImage(
+        sceneCanvas._canvas,
+        0,
+        0,
+        sceneCanvas.getWidth() / ratio,
+        sceneCanvas.getHeight() / ratio
+      );
+      filterContext.restore();
+      this._filterUpToDate = true;
+      return filterCanvas;
+    }
+
+    try {
+      len = filters.length;
+      filterContext.clear();
+
+      // copy cached canvas onto filter context
+      filterContext.drawImage(
+        sceneCanvas._canvas,
+        0,
+        0,
+        sceneCanvas.getWidth() / ratio,
+        sceneCanvas.getHeight() / ratio
+      );
+      imageData = filterContext.getImageData(
+        0,
+        0,
+        filterCanvas.getWidth(),
+        filterCanvas.getHeight()
+      );
+
+      // apply filters to filter context
+      for (n = 0; n < len; n++) {
+        filter = filters[n];
+        if (typeof filter === 'string') {
+          filter = parseCSSFilters(filter);
+        }
+        filter.call(this, imageData);
+        filterContext.putImageData(imageData, 0, 0);
+      }
+    } catch (e: any) {
+      Util.error(
+        'Unable to apply filter. ' +
+          e.message +
+          ' This post my help you https://konvajs.org/docs/posts/Tainted_Canvas.html.'
+      );
+    }
+
+    this._filterUpToDate = true;
+
+    return filterCanvas;
+  }
+  /**
+   * bind events to the node. KonvaJS supports mouseover, mousemove,
+   *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove,
+   *  touchend, tap, dbltap, dragstart, dragmove, and dragend events.
+   *  Pass in a string of events delimited by a space to bind multiple events at once
+   *  such as 'mousedown mouseup mousemove'. Include a namespace to bind an
+   *  event by name such as 'click.foobar'.
+   * @method
+   * @name Konva.Node#on
+   * @param {String} evtStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'
+   * @param {Function} handler The handler function. The first argument of that function is event object. Event object has `target` as main target of the event, `currentTarget` as current node listener and `evt` as native browser event.
+   * @returns {Konva.Node}
+   * @example
+   * // add click listener
+   * node.on('click', function() {
+   *   console.log('you clicked me!');
+   * });
+   *
+   * // get the target node
+   * node.on('click', function(evt) {
+   *   console.log(evt.target);
+   * });
+   *
+   * // stop event propagation
+   * node.on('click', function(evt) {
+   *   evt.cancelBubble = true;
+   * });
+   *
+   * // bind multiple listeners
+   * node.on('click touchstart', function() {
+   *   console.log('you clicked/touched me!');
+   * });
+   *
+   * // namespace listener
+   * node.on('click.foo', function() {
+   *   console.log('you clicked/touched me!');
+   * });
+   *
+   * // get the event type
+   * node.on('click tap', function(evt) {
+   *   var eventType = evt.type;
+   * });
+   *
+   * // get native event object
+   * node.on('click tap', function(evt) {
+   *   var nativeEvent = evt.evt;
+   * });
+   *
+   * // for change events, get the old and new val
+   * node.on('xChange', function(evt) {
+   *   var oldVal = evt.oldVal;
+   *   var newVal = evt.newVal;
+   * });
+   *
+   * // get event targets
+   * // with event delegations
+   * layer.on('click', 'Group', function(evt) {
+   *   var shape = evt.target;
+   *   var group = evt.currentTarget;
+   * });
+   */
+  on<K extends keyof NodeEventMap>(
+    evtStr: K,
+    handler: KonvaEventListener<this, NodeEventMap[K]>
+  ) {
+    if (this._cache) {
+      this._cache.delete(ALL_LISTENERS);
+    }
+
+    if (arguments.length === 3) {
+      return this._delegate.apply(this, arguments as any);
+    }
+    const events = (evtStr as string).split(SPACE);
+
+    /*
+     * loop through types and attach event listeners to
+     * each one.  eg. 'click mouseover.namespace mouseout'
+     * will create three event bindings
+     */
+    for (let n = 0; n < events.length; n++) {
+      const event = events[n];
+      const parts = event.split('.');
+      const baseEvent = parts[0];
+      const name = parts[1] || '';
+
+      // create events array if it doesn't exist
+      if (!this.eventListeners[baseEvent]) {
+        this.eventListeners[baseEvent] = [];
+      }
+
+      this.eventListeners[baseEvent].push({ name, handler });
+    }
+
+    return this;
+  }
+  /**
+   * remove event bindings from the node. Pass in a string of
+   *  event types delimmited by a space to remove multiple event
+   *  bindings at once such as 'mousedown mouseup mousemove'.
+   *  include a namespace to remove an event binding by name
+   *  such as 'click.foobar'. If you only give a name like '.foobar',
+   *  all events in that namespace will be removed.
+   * @method
+   * @name Konva.Node#off
+   * @param {String} evtStr e.g. 'click', 'mousedown touchstart', '.foobar'
+   * @returns {Konva.Node}
+   * @example
+   * // remove listener
+   * node.off('click');
+   *
+   * // remove multiple listeners
+   * node.off('click touchstart');
+   *
+   * // remove listener by name
+   * node.off('click.foo');
+   */
+  off(evtStr?: string, callback?: Function) {
+    let events = (evtStr || '').split(SPACE),
+      len = events.length,
+      n,
+      t,
+      event,
+      parts,
+      baseEvent,
+      name;
+
+    this._cache && this._cache.delete(ALL_LISTENERS);
+
+    if (!evtStr) {
+      // remove all events
+      for (t in this.eventListeners) {
+        this._off(t);
+      }
+    }
+    for (n = 0; n < len; n++) {
+      event = events[n];
+      parts = event.split('.');
+      baseEvent = parts[0];
+      name = parts[1];
+
+      if (baseEvent) {
+        if (this.eventListeners[baseEvent]) {
+          this._off(baseEvent, name, callback);
+        }
+      } else {
+        for (t in this.eventListeners) {
+          this._off(t, name, callback);
+        }
+      }
+    }
+    return this;
+  }
+  // some event aliases for third party integration like HammerJS
+  dispatchEvent(evt: any) {
+    const e = {
+      target: this,
+      type: evt.type,
+      evt: evt,
+    };
+    this.fire(evt.type, e);
+    return this;
+  }
+  addEventListener(type: string, handler: (e: Event) => void) {
+    // we have to pass native event to handler
+    this.on(type, function (evt) {
+      handler.call(this, evt.evt);
+    });
+    return this;
+  }
+  removeEventListener(type: string) {
+    this.off(type);
+    return this;
+  }
+  // like node.on
+  _delegate(event: string, selector: string, handler: (e: Event) => void) {
+    const stopNode = this;
+    this.on(event, function (evt) {
+      const targets = evt.target.findAncestors(selector, true, stopNode);
+      for (let i = 0; i < targets.length; i++) {
+        evt = Util.cloneObject(evt);
+        evt.currentTarget = targets[i] as any;
+        handler.call(targets[i], evt as any);
+      }
+    });
+  }
+  /**
+   * remove a node from parent, but don't destroy. You can reuse the node later.
+   * @method
+   * @name Konva.Node#remove
+   * @returns {Konva.Node}
+   * @example
+   * node.remove();
+   */
+  remove() {
+    if (this.isDragging()) {
+      this.stopDrag();
+    }
+    // we can have drag element but that is not dragged yet
+    // so just clear it
+    DD._dragElements.delete(this._id);
+    this._remove();
+    return this;
+  }
+  _clearCaches() {
+    this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+    this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
+    this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
+    this._clearSelfAndDescendantCache(STAGE);
+    this._clearSelfAndDescendantCache(VISIBLE);
+    this._clearSelfAndDescendantCache(LISTENING);
+  }
+  _remove() {
+    // every cached attr that is calculated via node tree
+    // traversal must be cleared when removing a node
+    this._clearCaches();
+
+    const parent = this.getParent();
+
+    if (parent && parent.children) {
+      parent.children.splice(this.index, 1);
+      parent._setChildrenIndices();
+      this.parent = null;
+    }
+  }
+  /**
+   * remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
+   * If the node is a container (Group, Stage or Layer) it will destroy all children too.
+   * @method
+   * @name Konva.Node#destroy
+   * @example
+   * node.destroy();
+   */
+  destroy() {
+    this.remove();
+    this.clearCache();
+    return this;
+  }
+  /**
+   * get attr
+   * @method
+   * @name Konva.Node#getAttr
+   * @param {String} attr
+   * @returns {Integer|String|Object|Array}
+   * @example
+   * var x = node.getAttr('x');
+   */
+  getAttr<T>(attr: string) {
+    const method = 'get' + Util._capitalize(attr);
+    if (Util._isFunction((this as any)[method])) {
+      return (this as any)[method]();
+    }
+    // otherwise get directly
+    return this.attrs[attr] as T | undefined;
+  }
+  /**
+   * get ancestors
+   * @method
+   * @name Konva.Node#getAncestors
+   * @returns {Array}
+   * @example
+   * shape.getAncestors().forEach(function(node) {
+   *   console.log(node.id());
+   * })
+   */
+  getAncestors() {
+    let parent = this.getParent(),
+      ancestors: Array<Node> = [];
+
+    while (parent) {
+      ancestors.push(parent);
+      parent = parent.getParent();
+    }
+
+    return ancestors;
+  }
+  /**
+   * get attrs object literal
+   * @method
+   * @name Konva.Node#getAttrs
+   * @returns {Object}
+   */
+  getAttrs() {
+    return (this.attrs || {}) as Config & Record<string, any>;
+  }
+  /**
+   * set multiple attrs at once using an object literal
+   * @method
+   * @name Konva.Node#setAttrs
+   * @param {Object} config object containing key value pairs
+   * @returns {Konva.Node}
+   * @example
+   * node.setAttrs({
+   *   x: 5,
+   *   fill: 'red'
+   * });
+   */
+  setAttrs(config: any) {
+    this._batchTransformChanges(() => {
+      let key, method;
+      if (!config) {
+        return this;
+      }
+      for (key in config) {
+        if (key === CHILDREN) {
+          continue;
+        }
+        method = SET + Util._capitalize(key);
+        // use setter if available
+        if (Util._isFunction(this[method])) {
+          this[method](config[key]);
+        } else {
+          // otherwise set directly
+          this._setAttr(key, config[key]);
+        }
+      }
+    });
+
+    return this;
+  }
+  /**
+   * determine if node is listening for events by taking into account ancestors.
+   *
+   * Parent    | Self      | isListening
+   * listening | listening |
+   * ----------+-----------+------------
+   * T         | T         | T
+   * T         | F         | F
+   * F         | T         | F
+   * F         | F         | F
+   *
+   * @method
+   * @name Konva.Node#isListening
+   * @returns {Boolean}
+   */
+  isListening() {
+    return this._getCache(LISTENING, this._isListening);
+  }
+  _isListening(relativeTo?: Node): boolean {
+    const listening = this.listening();
+    if (!listening) {
+      return false;
+    }
+    const parent = this.getParent();
+    if (parent && parent !== relativeTo && this !== relativeTo) {
+      return parent._isListening(relativeTo);
+    } else {
+      return true;
+    }
+  }
+  /**
+   * determine if node is visible by taking into account ancestors.
+   *
+   * Parent    | Self      | isVisible
+   * visible   | visible   |
+   * ----------+-----------+------------
+   * T         | T         | T
+   * T         | F         | F
+   * F         | T         | F
+   * F         | F         | F
+   * @method
+   * @name Konva.Node#isVisible
+   * @returns {Boolean}
+   */
+  isVisible() {
+    return this._getCache(VISIBLE, this._isVisible);
+  }
+  _isVisible(relativeTo?: Node): boolean {
+    const visible = this.visible();
+    if (!visible) {
+      return false;
+    }
+    const parent = this.getParent();
+    if (parent && parent !== relativeTo && this !== relativeTo) {
+      return parent._isVisible(relativeTo);
+    } else {
+      return true;
+    }
+  }
+  shouldDrawHit(top?: Node, skipDragCheck = false) {
+    if (top) {
+      return this._isVisible(top) && this._isListening(top);
+    }
+    const layer = this.getLayer();
+
+    let layerUnderDrag = false;
+    DD._dragElements.forEach((elem) => {
+      if (elem.dragStatus !== 'dragging') {
+        return;
+      } else if (elem.node.nodeType === 'Stage') {
+        layerUnderDrag = true;
+      } else if (elem.node.getLayer() === layer) {
+        layerUnderDrag = true;
+      }
+    });
+
+    const dragSkip =
+      !skipDragCheck &&
+      !Konva.hitOnDragEnabled &&
+      (layerUnderDrag || Konva.isTransforming());
+    return this.isListening() && this.isVisible() && !dragSkip;
+  }
+
+  /**
+   * show node. set visible = true
+   * @method
+   * @name Konva.Node#show
+   * @returns {Konva.Node}
+   */
+  show() {
+    this.visible(true);
+    return this;
+  }
+  /**
+   * hide node.  Hidden nodes are no longer detectable
+   * @method
+   * @name Konva.Node#hide
+   * @returns {Konva.Node}
+   */
+  hide() {
+    this.visible(false);
+    return this;
+  }
+  getZIndex() {
+    return this.index || 0;
+  }
+  /**
+   * get absolute z-index which takes into account sibling
+   *  and ancestor indices
+   * @method
+   * @name Konva.Node#getAbsoluteZIndex
+   * @returns {Integer}
+   */
+  getAbsoluteZIndex() {
+    let depth = this.getDepth(),
+      that = this,
+      index = 0,
+      nodes,
+      len,
+      n,
+      child;
+
+    function addChildren(children) {
+      nodes = [];
+      len = children.length;
+      for (n = 0; n < len; n++) {
+        child = children[n];
+        index++;
+
+        if (child.nodeType !== SHAPE) {
+          nodes = nodes.concat(child.getChildren().slice());
+        }
+
+        if (child._id === that._id) {
+          n = len;
+        }
+      }
+
+      if (nodes.length > 0 && nodes[0].getDepth() <= depth) {
+        addChildren(nodes);
+      }
+    }
+    const stage = this.getStage();
+    if (that.nodeType !== UPPER_STAGE && stage) {
+      addChildren(stage.getChildren());
+    }
+
+    return index;
+  }
+  /**
+   * get node depth in node tree.  Returns an integer.
+   *  e.g. Stage depth will always be 0.  Layers will always be 1.  Groups and Shapes will always
+   *  be >= 2
+   * @method
+   * @name Konva.Node#getDepth
+   * @returns {Integer}
+   */
+  getDepth() {
+    let depth = 0,
+      parent = this.parent;
+
+    while (parent) {
+      depth++;
+      parent = parent.parent;
+    }
+    return depth;
+  }
+
+  // sometimes we do several attributes changes
+  // like node.position(pos)
+  // for performance reasons, lets batch transform reset
+  // so it work faster
+  _batchTransformChanges(func) {
+    this._batchingTransformChange = true;
+    func();
+    this._batchingTransformChange = false;
+    if (this._needClearTransformCache) {
+      this._clearCache(TRANSFORM);
+      this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+    }
+    this._needClearTransformCache = false;
+  }
+
+  setPosition(pos: Vector2d) {
+    this._batchTransformChanges(() => {
+      this.x(pos.x);
+      this.y(pos.y);
+    });
+    return this;
+  }
+  getPosition() {
+    return {
+      x: this.x(),
+      y: this.y(),
+    };
+  }
+  /**
+   * get position of first pointer (like mouse or first touch) relative to local coordinates of current node
+   * @method
+   * @name Konva.Node#getRelativePointerPosition
+   * @returns {Konva.Node}
+   * @example
+   *
+   * // let's think we have a rectangle at position x = 10, y = 10
+   * // now we clicked at x = 15, y = 15 of the stage
+   * // if you want to know position of the click, related to the rectangle you can use
+   * rect.getRelativePointerPosition();
+   */
+  getRelativePointerPosition() {
+    const stage = this.getStage();
+    if (!stage) {
+      return null;
+    }
+    // get pointer (say mouse or touch) position
+    const pos = stage.getPointerPosition();
+    if (!pos) {
+      return null;
+    }
+    const transform = this.getAbsoluteTransform().copy();
+    // to detect relative position we need to invert transform
+    transform.invert();
+    // now we can find relative point
+    return transform.point(pos);
+  }
+  /**
+   * get absolute position of a node. That function can be used to calculate absolute position, but relative to any ancestor
+   * @method
+   * @name Konva.Node#getAbsolutePosition
+   * @param {Object} Ancestor optional ancestor node
+   * @returns {Konva.Node}
+   * @example
+   *
+   * // returns absolute position relative to top-left corner of canvas
+   * node.getAbsolutePosition();
+   *
+   * // calculate absolute position of node, inside stage
+   * // so stage transforms are ignored
+   * node.getAbsolutePosition(stage)
+   */
+  getAbsolutePosition(top?: Node) {
+    let haveCachedParent = false;
+    let parent = this.parent;
+    while (parent) {
+      if (parent.isCached()) {
+        haveCachedParent = true;
+        break;
+      }
+      parent = parent.parent;
+    }
+    if (haveCachedParent && !top) {
+      // make fake top element
+      // "true" is not a node, but it will just allow skip all caching
+      top = true as any;
+    }
+    const absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(),
+      absoluteTransform = new Transform(),
+      offset = this.offset();
+
+    // clone the matrix array
+    absoluteTransform.m = absoluteMatrix.slice();
+    absoluteTransform.translate(offset.x, offset.y);
+
+    return absoluteTransform.getTranslation();
+  }
+  setAbsolutePosition(pos: Vector2d) {
+    const { x, y, ...origTrans } = this._clearTransform();
+
+    // don't clear translation
+    this.attrs.x = x;
+    this.attrs.y = y;
+
+    // important, use non cached value
+    this._clearCache(TRANSFORM);
+    const it = this._getAbsoluteTransform().copy();
+
+    it.invert();
+    it.translate(pos.x, pos.y);
+    pos = {
+      x: this.attrs.x + it.getTranslation().x,
+      y: this.attrs.y + it.getTranslation().y,
+    };
+    this._setTransform(origTrans);
+    this.setPosition({ x: pos.x, y: pos.y });
+    this._clearCache(TRANSFORM);
+    this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+
+    return this;
+  }
+  _setTransform(trans) {
+    let key;
+
+    for (key in trans) {
+      this.attrs[key] = trans[key];
+    }
+    // this._clearCache(TRANSFORM);
+    // this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+  }
+  _clearTransform() {
+    const trans = {
+      x: this.x(),
+      y: this.y(),
+      rotation: this.rotation(),
+      scaleX: this.scaleX(),
+      scaleY: this.scaleY(),
+      offsetX: this.offsetX(),
+      offsetY: this.offsetY(),
+      skewX: this.skewX(),
+      skewY: this.skewY(),
+    };
+
+    this.attrs.x = 0;
+    this.attrs.y = 0;
+    this.attrs.rotation = 0;
+    this.attrs.scaleX = 1;
+    this.attrs.scaleY = 1;
+    this.attrs.offsetX = 0;
+    this.attrs.offsetY = 0;
+    this.attrs.skewX = 0;
+    this.attrs.skewY = 0;
+
+    // return original transform
+    return trans;
+  }
+  /**
+   * move node by an amount relative to its current position
+   * @method
+   * @name Konva.Node#move
+   * @param {Object} change
+   * @param {Number} change.x
+   * @param {Number} change.y
+   * @returns {Konva.Node}
+   * @example
+   * // move node in x direction by 1px and y direction by 2px
+   * node.move({
+   *   x: 1,
+   *   y: 2
+   * });
+   */
+  move(change: Vector2d) {
+    let changeX = change.x,
+      changeY = change.y,
+      x = this.x(),
+      y = this.y();
+
+    if (changeX !== undefined) {
+      x += changeX;
+    }
+
+    if (changeY !== undefined) {
+      y += changeY;
+    }
+
+    this.setPosition({ x: x, y: y });
+    return this;
+  }
+  _eachAncestorReverse(func, top) {
+    let family: Array<Node> = [],
+      parent = this.getParent(),
+      len,
+      n;
+
+    // if top node is defined, and this node is top node,
+    // there's no need to build a family tree.  just execute
+    // func with this because it will be the only node
+    if (top && top._id === this._id) {
+      // func(this);
+      return;
+    }
+
+    family.unshift(this);
+
+    while (parent && (!top || parent._id !== top._id)) {
+      family.unshift(parent);
+      parent = parent.parent;
+    }
+
+    len = family.length;
+    for (n = 0; n < len; n++) {
+      func(family[n]);
+    }
+  }
+  /**
+   * rotate node by an amount in degrees relative to its current rotation
+   * @method
+   * @name Konva.Node#rotate
+   * @param {Number} theta
+   * @returns {Konva.Node}
+   */
+  rotate(theta: number) {
+    this.rotation(this.rotation() + theta);
+    return this;
+  }
+  /**
+   * move node to the top of its siblings
+   * @method
+   * @name Konva.Node#moveToTop
+   * @returns {Boolean}
+   */
+  moveToTop() {
+    if (!this.parent) {
+      Util.warn('Node has no parent. moveToTop function is ignored.');
+      return false;
+    }
+    const index = this.index,
+      len = this.parent.getChildren().length;
+    if (index < len - 1) {
+      this.parent.children.splice(index, 1);
+      this.parent.children.push(this);
+      this.parent._setChildrenIndices();
+      return true;
+    }
+    return false;
+  }
+  /**
+   * move node up
+   * @method
+   * @name Konva.Node#moveUp
+   * @returns {Boolean} flag is moved or not
+   */
+  moveUp() {
+    if (!this.parent) {
+      Util.warn('Node has no parent. moveUp function is ignored.');
+      return false;
+    }
+    const index = this.index,
+      len = this.parent.getChildren().length;
+    if (index < len - 1) {
+      this.parent.children.splice(index, 1);
+      this.parent.children.splice(index + 1, 0, this);
+      this.parent._setChildrenIndices();
+      return true;
+    }
+    return false;
+  }
+  /**
+   * move node down
+   * @method
+   * @name Konva.Node#moveDown
+   * @returns {Boolean}
+   */
+  moveDown() {
+    if (!this.parent) {
+      Util.warn('Node has no parent. moveDown function is ignored.');
+      return false;
+    }
+    const index = this.index;
+    if (index > 0) {
+      this.parent.children.splice(index, 1);
+      this.parent.children.splice(index - 1, 0, this);
+      this.parent._setChildrenIndices();
+      return true;
+    }
+    return false;
+  }
+  /**
+   * move node to the bottom of its siblings
+   * @method
+   * @name Konva.Node#moveToBottom
+   * @returns {Boolean}
+   */
+  moveToBottom() {
+    if (!this.parent) {
+      Util.warn('Node has no parent. moveToBottom function is ignored.');
+      return false;
+    }
+    const index = this.index;
+    if (index > 0) {
+      this.parent.children.splice(index, 1);
+      this.parent.children.unshift(this);
+      this.parent._setChildrenIndices();
+      return true;
+    }
+    return false;
+  }
+  setZIndex(zIndex) {
+    if (!this.parent) {
+      Util.warn('Node has no parent. zIndex parameter is ignored.');
+      return this;
+    }
+    if (zIndex < 0 || zIndex >= this.parent.children.length) {
+      Util.warn(
+        'Unexpected value ' +
+          zIndex +
+          ' for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to ' +
+          (this.parent.children.length - 1) +
+          '.'
+      );
+    }
+    const index = this.index;
+    this.parent.children.splice(index, 1);
+    this.parent.children.splice(zIndex, 0, this);
+    this.parent._setChildrenIndices();
+    return this;
+  }
+  /**
+   * get absolute opacity
+   * @method
+   * @name Konva.Node#getAbsoluteOpacity
+   * @returns {Number}
+   */
+  getAbsoluteOpacity() {
+    return this._getCache(ABSOLUTE_OPACITY, this._getAbsoluteOpacity);
+  }
+  _getAbsoluteOpacity() {
+    let absOpacity = this.opacity();
+    const parent = this.getParent();
+    if (parent && !parent._isUnderCache) {
+      absOpacity *= parent.getAbsoluteOpacity();
+    }
+    return absOpacity;
+  }
+  /**
+   * move node to another container
+   * @method
+   * @name Konva.Node#moveTo
+   * @param {Container} newContainer
+   * @returns {Konva.Node}
+   * @example
+   * // move node from current layer into layer2
+   * node.moveTo(layer2);
+   */
+  moveTo(newContainer: any) {
+    // do nothing if new container is already parent
+    if (this.getParent() !== newContainer) {
+      this._remove();
+      newContainer.add(this);
+    }
+    return this;
+  }
+  /**
+   * convert Node into an object for serialization.  Returns an object.
+   * @method
+   * @name Konva.Node#toObject
+   * @returns {Object}
+   */
+  toObject() {
+    let attrs = this.getAttrs() as any,
+      key,
+      val,
+      getter,
+      defaultValue,
+      nonPlainObject;
+
+    const obj: {
+      attrs: Config & Record<string, any>;
+      className: string;
+      children?: Array<any>;
+    } = {
+      attrs: {} as Config & Record<string, any>,
+      className: this.getClassName(),
+    };
+
+    for (key in attrs) {
+      val = attrs[key];
+      // if value is object and object is not plain
+      // like class instance, we should skip it and to not include
+      nonPlainObject =
+        Util.isObject(val) && !Util._isPlainObject(val) && !Util._isArray(val);
+      if (nonPlainObject) {
+        continue;
+      }
+      getter = typeof this[key] === 'function' && this[key];
+      // remove attr value so that we can extract the default value from the getter
+      delete attrs[key];
+      defaultValue = getter ? getter.call(this) : null;
+      // restore attr value
+      attrs[key] = val;
+      if (defaultValue !== val) {
+        (obj.attrs as any)[key] = val;
+      }
+    }
+
+    return Util._prepareToStringify(obj) as typeof obj;
+  }
+  /**
+   * convert Node into a JSON string.  Returns a JSON string.
+   * @method
+   * @name Konva.Node#toJSON
+   * @returns {String}
+   */
+  toJSON() {
+    return JSON.stringify(this.toObject());
+  }
+  /**
+   * get parent container
+   * @method
+   * @name Konva.Node#getParent
+   * @returns {Konva.Node}
+   */
+  getParent() {
+    return this.parent;
+  }
+  /**
+   * get all ancestors (parent then parent of the parent, etc) of the node
+   * @method
+   * @name Konva.Node#findAncestors
+   * @param {String} selector selector for search
+   * @param {Boolean} [includeSelf] show we think that node is ancestro itself?
+   * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)
+   * @returns {Array} [ancestors]
+   * @example
+   * // get one of the parent group
+   * var parentGroups = node.findAncestors('Group');
+   */
+  findAncestors(
+    selector: string | Function,
+    includeSelf?: boolean,
+    stopNode?: Node
+  ) {
+    const res: Array<Node> = [];
+
+    if (includeSelf && this._isMatch(selector)) {
+      res.push(this);
+    }
+    let ancestor = this.parent;
+    while (ancestor) {
+      if (ancestor === stopNode) {
+        return res;
+      }
+      if (ancestor._isMatch(selector)) {
+        res.push(ancestor);
+      }
+      ancestor = ancestor.parent;
+    }
+    return res;
+  }
+  isAncestorOf(node: Node) {
+    return false;
+  }
+  /**
+   * get ancestor (parent or parent of the parent, etc) of the node that match passed selector
+   * @method
+   * @name Konva.Node#findAncestor
+   * @param {String} selector selector for search
+   * @param {Boolean} [includeSelf] show we think that node is ancestro itself?
+   * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)
+   * @returns {Konva.Node} ancestor
+   * @example
+   * // get one of the parent group
+   * var group = node.findAncestors('.mygroup');
+   */
+  findAncestor(
+    selector: string | Function,
+    includeSelf?: boolean,
+    stopNode?: Container
+  ) {
+    return this.findAncestors(selector, includeSelf, stopNode)[0];
+  }
+  // is current node match passed selector?
+  _isMatch(selector: string | Function) {
+    if (!selector) {
+      return false;
+    }
+    if (typeof selector === 'function') {
+      return selector(this);
+    }
+    let selectorArr = selector.replace(/ /g, '').split(','),
+      len = selectorArr.length,
+      n,
+      sel;
+
+    for (n = 0; n < len; n++) {
+      sel = selectorArr[n];
+      if (!Util.isValidSelector(sel)) {
+        Util.warn(
+          'Selector "' +
+            sel +
+            '" is invalid. Allowed selectors examples are "#foo", ".bar" or "Group".'
+        );
+        Util.warn(
+          'If you have a custom shape with such className, please change it to start with upper letter like "Triangle".'
+        );
+        Util.warn('Konva is awesome, right?');
+      }
+      // id selector
+      if (sel.charAt(0) === '#') {
+        if (this.id() === sel.slice(1)) {
+          return true;
+        }
+      } else if (sel.charAt(0) === '.') {
+        // name selector
+        if (this.hasName(sel.slice(1))) {
+          return true;
+        }
+      } else if (this.className === sel || this.nodeType === sel) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * get layer ancestor
+   * @method
+   * @name Konva.Node#getLayer
+   * @returns {Konva.Layer}
+   */
+  getLayer(): Layer | null {
+    const parent = this.getParent();
+    return parent ? parent.getLayer() : null;
+  }
+  /**
+   * get stage ancestor
+   * @method
+   * @name Konva.Node#getStage
+   * @returns {Konva.Stage}
+   */
+  getStage(): Stage | null {
+    return this._getCache(STAGE, this._getStage);
+  }
+
+  _getStage() {
+    const parent = this.getParent();
+    if (parent) {
+      return parent.getStage();
+    } else {
+      return null;
+    }
+  }
+  /**
+   * fire event
+   * @method
+   * @name Konva.Node#fire
+   * @param {String} eventType event type.  can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent
+   * @param {Event} [evt] event object
+   * @param {Boolean} [bubble] setting the value to false, or leaving it undefined, will result in the event
+   *  not bubbling.  Setting the value to true will result in the event bubbling.
+   * @returns {Konva.Node}
+   * @example
+   * // manually fire click event
+   * node.fire('click');
+   *
+   * // fire custom event
+   * node.fire('foo');
+   *
+   * // fire custom event with custom event object
+   * node.fire('foo', {
+   *   bar: 10
+   * });
+   *
+   * // fire click event that bubbles
+   * node.fire('click', null, true);
+   */
+  fire(eventType: string, evt: any = {}, bubble?: boolean) {
+    evt.target = evt.target || this;
+    // bubble
+    if (bubble) {
+      this._fireAndBubble(eventType, evt);
+    } else {
+      // no bubble
+      this._fire(eventType, evt);
+    }
+    return this;
+  }
+  /**
+   * get absolute transform of the node which takes into
+   *  account its ancestor transforms
+   * @method
+   * @name Konva.Node#getAbsoluteTransform
+   * @returns {Konva.Transform}
+   */
+  getAbsoluteTransform(top?: Node | null) {
+    // if using an argument, we can't cache the result.
+    if (top) {
+      return this._getAbsoluteTransform(top);
+    } else {
+      // if no argument, we can cache the result
+      return this._getCache(
+        ABSOLUTE_TRANSFORM,
+        this._getAbsoluteTransform
+      ) as Transform;
+    }
+  }
+  _getAbsoluteTransform(top?: Node) {
+    let at: Transform;
+    // we we need position relative to an ancestor, we will iterate for all
+    if (top) {
+      at = new Transform();
+      // start with stage and traverse downwards to self
+      this._eachAncestorReverse(function (node: Node) {
+        const transformsEnabled = node.transformsEnabled();
+
+        if (transformsEnabled === 'all') {
+          at.multiply(node.getTransform());
+        } else if (transformsEnabled === 'position') {
+          at.translate(node.x() - node.offsetX(), node.y() - node.offsetY());
+        }
+      }, top);
+      return at;
+    } else {
+      // try to use a cached value
+      at = this._cache.get(ABSOLUTE_TRANSFORM) || new Transform();
+      if (this.parent) {
+        // transform will be cached
+        this.parent.getAbsoluteTransform().copyInto(at);
+      } else {
+        at.reset();
+      }
+      const transformsEnabled = this.transformsEnabled();
+      if (transformsEnabled === 'all') {
+        at.multiply(this.getTransform());
+      } else if (transformsEnabled === 'position') {
+        // use "attrs" directly, because it is a bit faster
+        const x = this.attrs.x || 0;
+        const y = this.attrs.y || 0;
+        const offsetX = this.attrs.offsetX || 0;
+        const offsetY = this.attrs.offsetY || 0;
+
+        at.translate(x - offsetX, y - offsetY);
+      }
+      at.dirty = false;
+      return at;
+    }
+  }
+  /**
+   * get absolute scale of the node which takes into
+   *  account its ancestor scales
+   * @method
+   * @name Konva.Node#getAbsoluteScale
+   * @returns {Object}
+   * @example
+   * // get absolute scale x
+   * var scaleX = node.getAbsoluteScale().x;
+   */
+  getAbsoluteScale(top?: Node) {
+    // do not cache this calculations,
+    // because it use cache transform
+    // this is special logic for caching with some shapes with shadow
+    let parent: Node | null = this;
+    while (parent) {
+      if (parent._isUnderCache) {
+        top = parent;
+      }
+      parent = parent.getParent();
+    }
+
+    const transform = this.getAbsoluteTransform(top);
+    const attrs = transform.decompose();
+
+    return {
+      x: attrs.scaleX,
+      y: attrs.scaleY,
+    };
+  }
+  /**
+   * get absolute rotation of the node which takes into
+   *  account its ancestor rotations
+   * @method
+   * @name Konva.Node#getAbsoluteRotation
+   * @returns {Number}
+   * @example
+   * // get absolute rotation
+   * var rotation = node.getAbsoluteRotation();
+   */
+  getAbsoluteRotation() {
+    // var parent: Node = this;
+    // var rotation = 0;
+
+    // while (parent) {
+    //   rotation += parent.rotation();
+    //   parent = parent.getParent();
+    // }
+    // return rotation;
+    return this.getAbsoluteTransform().decompose().rotation;
+  }
+  /**
+   * get transform of the node
+   * @method
+   * @name Konva.Node#getTransform
+   * @returns {Konva.Transform}
+   */
+  getTransform() {
+    return this._getCache(TRANSFORM, this._getTransform) as Transform;
+  }
+  _getTransform(): Transform {
+    const m: Transform = this._cache.get(TRANSFORM) || new Transform();
+    m.reset();
+
+    // I was trying to use attributes directly here
+    // but it doesn't work for Transformer well
+    // because it overwrite x,y getters
+    const x = this.x(),
+      y = this.y(),
+      rotation = Konva.getAngle(this.rotation()),
+      scaleX = this.attrs.scaleX ?? 1,
+      scaleY = this.attrs.scaleY ?? 1,
+      skewX = this.attrs.skewX || 0,
+      skewY = this.attrs.skewY || 0,
+      offsetX = this.attrs.offsetX || 0,
+      offsetY = this.attrs.offsetY || 0;
+
+    if (x !== 0 || y !== 0) {
+      m.translate(x, y);
+    }
+    if (rotation !== 0) {
+      m.rotate(rotation);
+    }
+    if (skewX !== 0 || skewY !== 0) {
+      m.skew(skewX, skewY);
+    }
+    if (scaleX !== 1 || scaleY !== 1) {
+      m.scale(scaleX, scaleY);
+    }
+    if (offsetX !== 0 || offsetY !== 0) {
+      m.translate(-1 * offsetX, -1 * offsetY);
+    }
+
+    m.dirty = false;
+
+    return m;
+  }
+  /**
+   * clone node.  Returns a new Node instance with identical attributes.  You can also override
+   *  the node properties with an object literal, enabling you to use an existing node as a template
+   *  for another node
+   * @method
+   * @name Konva.Node#clone
+   * @param {Object} obj override attrs
+   * @returns {Konva.Node}
+   * @example
+   * // simple clone
+   * var clone = node.clone();
+   *
+   * // clone a node and override the x position
+   * var clone = rect.clone({
+   *   x: 5
+   * });
+   */
+  clone(obj?: any) {
+    // instantiate new node
+    let attrs = Util.cloneObject(this.attrs),
+      key,
+      allListeners,
+      len,
+      n,
+      listener;
+    // apply attr overrides
+    for (key in obj) {
+      attrs[key] = obj[key];
+    }
+
+    const node = new (this.constructor as any)(attrs);
+    // copy over listeners
+    for (key in this.eventListeners) {
+      allListeners = this.eventListeners[key];
+      len = allListeners.length;
+      for (n = 0; n < len; n++) {
+        listener = allListeners[n];
+        /*
+         * don't include konva namespaced listeners because
+         *  these are generated by the constructors
+         */
+        if (listener.name.indexOf(KONVA) < 0) {
+          // if listeners array doesn't exist, then create it
+          if (!node.eventListeners[key]) {
+            node.eventListeners[key] = [];
+          }
+          node.eventListeners[key].push(listener);
+        }
+      }
+    }
+    return node;
+  }
+  _toKonvaCanvas(config) {
+    config = config || {};
+
+    const box = this.getClientRect();
+
+    const stage = this.getStage(),
+      x = config.x !== undefined ? config.x : Math.floor(box.x),
+      y = config.y !== undefined ? config.y : Math.floor(box.y),
+      pixelRatio = config.pixelRatio || 1,
+      canvas = new SceneCanvas({
+        width:
+          config.width || Math.ceil(box.width) || (stage ? stage.width() : 0),
+        height:
+          config.height ||
+          Math.ceil(box.height) ||
+          (stage ? stage.height() : 0),
+        pixelRatio: pixelRatio,
+      }),
+      context = canvas.getContext();
+
+    const bufferCanvas = new SceneCanvas({
+      // width and height already multiplied by pixelRatio
+      // so we need to revert that
+      // also increase size by x nd y offset to make sure content fits canvas
+      width: canvas.width / canvas.pixelRatio + Math.abs(x),
+      height: canvas.height / canvas.pixelRatio + Math.abs(y),
+      pixelRatio: canvas.pixelRatio,
+    });
+
+    if (config.imageSmoothingEnabled === false) {
+      context._context.imageSmoothingEnabled = false;
+    }
+    context.save();
+
+    if (x || y) {
+      context.translate(-1 * x, -1 * y);
+    }
+
+    this.drawScene(canvas, undefined, bufferCanvas);
+    context.restore();
+
+    return canvas;
+  }
+  /**
+   * converts node into an canvas element.
+   * @method
+   * @name Konva.Node#toCanvas
+   * @param {Object} config
+   * @param {Function} config.callback function executed when the composite has completed
+   * @param {Number} [config.x] x position of canvas section
+   * @param {Number} [config.y] y position of canvas section
+   * @param {Number} [config.width] width of canvas section
+   * @param {Number} [config.height] height of canvas section
+   * @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
+   * 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.
+   * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
+   * @example
+   * var canvas = node.toCanvas();
+   */
+  toCanvas(config?) {
+    return this._toKonvaCanvas(config)._canvas;
+  }
+  /**
+   * Creates a composite data URL (base64 string). If MIME type is not
+   * specified, then "image/png" will result. For "image/jpeg", specify a quality
+   * level as quality (range 0.0 - 1.0)
+   * @method
+   * @name Konva.Node#toDataURL
+   * @param {Object} config
+   * @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
+   *  "image/png" is the default
+   * @param {Number} [config.x] x position of canvas section
+   * @param {Number} [config.y] y position of canvas section
+   * @param {Number} [config.width] width of canvas section
+   * @param {Number} [config.height] height of canvas section
+   * @param {Number} [config.quality] jpeg quality.  If using an "image/jpeg" mimeType,
+   *  you can specify the quality from 0 to 1, where 0 is very poor quality and 1
+   *  is very high quality
+   * @param {Number} [config.pixelRatio] pixelRatio of output image url. Default is 1.
+   * 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.
+   * 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
+   * @returns {String}
+   */
+  toDataURL(config?: {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    pixelRatio?: number;
+    mimeType?: string;
+    quality?: number;
+    callback?: (str: string) => void;
+  }) {
+    config = config || {};
+    const mimeType = config.mimeType || null,
+      quality = config.quality || null;
+    const url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);
+    if (config.callback) {
+      config.callback(url);
+    }
+    return url;
+  }
+  /**
+   * converts node into an image.  Since the toImage
+   *  method is asynchronous, the resulting image can only be retrieved from the config callback
+   *  or the returned Promise.  toImage is most commonly used
+   *  to cache complex drawings as an image so that they don't have to constantly be redrawn
+   * @method
+   * @name Konva.Node#toImage
+   * @param {Object} config
+   * @param {Function} [config.callback] function executed when the composite has completed
+   * @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
+   *  "image/png" is the default
+   * @param {Number} [config.x] x position of canvas section
+   * @param {Number} [config.y] y position of canvas section
+   * @param {Number} [config.width] width of canvas section
+   * @param {Number} [config.height] height of canvas section
+   * @param {Number} [config.quality] jpeg quality.  If using an "image/jpeg" mimeType,
+   *  you can specify the quality from 0 to 1, where 0 is very poor quality and 1
+   *  is very high quality
+   * @param {Number} [config.pixelRatio] pixelRatio of output image. Default is 1.
+   * 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.
+   * 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
+   * @return {Promise<Image>}
+   * @example
+   * var image = node.toImage({
+   *   callback(img) {
+   *     // do stuff with img
+   *   }
+   * });
+   */
+  toImage(config?: {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    pixelRatio?: number;
+    mimeType?: string;
+    quality?: number;
+    callback?: (img: HTMLImageElement) => void;
+  }) {
+    return new Promise<HTMLImageElement>((resolve, reject) => {
+      try {
+        const callback = config?.callback;
+        if (callback) delete config.callback;
+        Util._urlToImage(this.toDataURL(config as any), function (img) {
+          resolve(img);
+          callback?.(img);
+        });
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+  /**
+   * Converts node into a blob.  Since the toBlob method is asynchronous,
+   *  the resulting blob can only be retrieved from the config callback
+   *  or the returned Promise.
+   * @method
+   * @name Konva.Node#toBlob
+   * @param {Object} config
+   * @param {Function} [config.callback] function executed when the composite has completed
+   * @param {Number} [config.x] x position of canvas section
+   * @param {Number} [config.y] y position of canvas section
+   * @param {Number} [config.width] width of canvas section
+   * @param {Number} [config.height] height of canvas section
+   * @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
+   * 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.
+   * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
+   * @example
+   * var blob = await node.toBlob({});
+   * @returns {Promise<Blob>}
+   */
+  toBlob(config?: {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    pixelRatio?: number;
+    mimeType?: string;
+    quality?: number;
+    callback?: (blob: Blob | null) => void;
+  }) {
+    return new Promise((resolve, reject) => {
+      try {
+        const callback = config?.callback;
+        if (callback) delete config.callback;
+        this.toCanvas(config).toBlob(
+          (blob) => {
+            resolve(blob);
+            callback?.(blob);
+          },
+          config?.mimeType,
+          config?.quality
+        );
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+  setSize(size) {
+    this.width(size.width);
+    this.height(size.height);
+    return this;
+  }
+  getSize() {
+    return {
+      width: this.width(),
+      height: this.height(),
+    };
+  }
+  /**
+   * get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.
+   * @method
+   * @name Konva.Node#getClassName
+   * @returns {String}
+   */
+  getClassName() {
+    return this.className || this.nodeType;
+  }
+  /**
+   * get the node type, which may return Stage, Layer, Group, or Shape
+   * @method
+   * @name Konva.Node#getType
+   * @returns {String}
+   */
+  getType() {
+    return this.nodeType;
+  }
+  getDragDistance(): number {
+    // compare with undefined because we need to track 0 value
+    if (this.attrs.dragDistance !== undefined) {
+      return this.attrs.dragDistance;
+    } else if (this.parent) {
+      return this.parent.getDragDistance();
+    } else {
+      return Konva.dragDistance;
+    }
+  }
+  _off(type, name?, callback?) {
+    let evtListeners = this.eventListeners[type],
+      i,
+      evtName,
+      handler;
+
+    for (i = 0; i < evtListeners.length; i++) {
+      evtName = evtListeners[i].name;
+      handler = evtListeners[i].handler;
+
+      // the following two conditions must be true in order to remove a handler:
+      // 1) the current event name cannot be konva unless the event name is konva
+      //    this enables developers to force remove a konva specific listener for whatever reason
+      // 2) an event name is not specified, or if one is specified, it matches the current event name
+      if (
+        (evtName !== 'konva' || name === 'konva') &&
+        (!name || evtName === name) &&
+        (!callback || callback === handler)
+      ) {
+        evtListeners.splice(i, 1);
+        if (evtListeners.length === 0) {
+          delete this.eventListeners[type];
+          break;
+        }
+        i--;
+      }
+    }
+  }
+  _fireChangeEvent(attr, oldVal, newVal) {
+    this._fire(attr + CHANGE, {
+      oldVal: oldVal,
+      newVal: newVal,
+    });
+  }
+  /**
+   * add name to node
+   * @method
+   * @name Konva.Node#addName
+   * @param {String} name
+   * @returns {Konva.Node}
+   * @example
+   * node.name('red');
+   * node.addName('selected');
+   * node.name(); // return 'red selected'
+   */
+  addName(name: string) {
+    if (!this.hasName(name)) {
+      const oldName = this.name();
+      const newName = oldName ? oldName + ' ' + name : name;
+      this.name(newName);
+    }
+    return this;
+  }
+  /**
+   * check is node has name
+   * @method
+   * @name Konva.Node#hasName
+   * @param {String} name
+   * @returns {Boolean}
+   * @example
+   * node.name('red');
+   * node.hasName('red');   // return true
+   * node.hasName('selected'); // return false
+   * node.hasName(''); // return false
+   */
+  hasName(name) {
+    if (!name) {
+      return false;
+    }
+    const fullName = this.name();
+    if (!fullName) {
+      return false;
+    }
+    // if name is '' the "names" will be [''], so I added extra check above
+    const names = (fullName || '').split(/\s/g);
+    return names.indexOf(name) !== -1;
+  }
+  /**
+   * remove name from node
+   * @method
+   * @name Konva.Node#removeName
+   * @param {String} name
+   * @returns {Konva.Node}
+   * @example
+   * node.name('red selected');
+   * node.removeName('selected');
+   * node.hasName('selected'); // return false
+   * node.name(); // return 'red'
+   */
+  removeName(name) {
+    const names = (this.name() || '').split(/\s/g);
+    const index = names.indexOf(name);
+    if (index !== -1) {
+      names.splice(index, 1);
+      this.name(names.join(' '));
+    }
+    return this;
+  }
+  /**
+   * set attr
+   * @method
+   * @name Konva.Node#setAttr
+   * @param {String} attr
+   * @param {*} val
+   * @returns {Konva.Node}
+   * @example
+   * node.setAttr('x', 5);
+   */
+  setAttr(attr: string, val) {
+    const func = this[SET + Util._capitalize(attr)];
+
+    if (Util._isFunction(func)) {
+      func.call(this, val);
+    } else {
+      // otherwise set directly
+      this._setAttr(attr, val);
+    }
+    return this;
+  }
+  _requestDraw() {
+    if (Konva.autoDrawEnabled) {
+      const drawNode = this.getLayer() || this.getStage();
+      drawNode?.batchDraw();
+    }
+  }
+  _setAttr(key: string, val) {
+    const oldVal = this.attrs[key];
+    if (oldVal === val && !Util.isObject(val)) {
+      return;
+    }
+    if (val === undefined || val === null) {
+      delete this.attrs[key];
+    } else {
+      this.attrs[key] = val;
+    }
+    if (this._shouldFireChangeEvents) {
+      this._fireChangeEvent(key, oldVal, val);
+    }
+    this._requestDraw();
+  }
+  _setComponentAttr(key, component, val) {
+    let oldVal;
+    if (val !== undefined) {
+      oldVal = this.attrs[key];
+
+      if (!oldVal) {
+        // set value to default value using getAttr
+        this.attrs[key] = this.getAttr(key);
+      }
+
+      this.attrs[key][component] = val;
+      this._fireChangeEvent(key, oldVal, val);
+    }
+  }
+  _fireAndBubble(eventType, evt, compareShape?) {
+    if (evt && this.nodeType === SHAPE) {
+      evt.target = this;
+    }
+
+    const nonBubbling = [
+      MOUSEENTER,
+      MOUSELEAVE,
+      POINTERENTER,
+      POINTERLEAVE,
+      TOUCHENTER,
+      TOUCHLEAVE,
+    ];
+
+    const shouldStop =
+      nonBubbling.indexOf(eventType) !== -1 &&
+      ((compareShape &&
+        (this === compareShape ||
+          (this.isAncestorOf && this.isAncestorOf(compareShape)))) ||
+        (this.nodeType === 'Stage' && !compareShape));
+
+    if (!shouldStop) {
+      this._fire(eventType, evt);
+
+      // simulate event bubbling
+      const stopBubble =
+        nonBubbling.indexOf(eventType) !== -1 &&
+        compareShape &&
+        compareShape.isAncestorOf &&
+        compareShape.isAncestorOf(this) &&
+        !compareShape.isAncestorOf(this.parent);
+      if (
+        ((evt && !evt.cancelBubble) || !evt) &&
+        this.parent &&
+        this.parent.isListening() &&
+        !stopBubble
+      ) {
+        if (compareShape && compareShape.parent) {
+          this._fireAndBubble.call(this.parent, eventType, evt, compareShape);
+        } else {
+          this._fireAndBubble.call(this.parent, eventType, evt);
+        }
+      }
+    }
+  }
+
+  _getProtoListeners(eventType) {
+    const allListeners = this._cache.get(ALL_LISTENERS) ?? {};
+    let events = allListeners?.[eventType];
+    if (events === undefined) {
+      //recalculate cache
+      events = [];
+      let obj = Object.getPrototypeOf(this);
+      while (obj) {
+        const hierarchyEvents = obj.eventListeners?.[eventType] ?? [];
+        events.push(...hierarchyEvents);
+        obj = Object.getPrototypeOf(obj);
+      }
+      // update cache
+      allListeners[eventType] = events;
+      this._cache.set(ALL_LISTENERS, allListeners);
+    }
+
+    return events;
+  }
+  _fire(eventType, evt) {
+    evt = evt || {};
+    evt.currentTarget = this;
+    evt.type = eventType;
+
+    const topListeners = this._getProtoListeners(eventType);
+    if (topListeners) {
+      for (let i = 0; i < topListeners.length; i++) {
+        topListeners[i].handler.call(this, evt);
+      }
+    }
+
+    // it is important to iterate over self listeners without cache
+    // because events can be added/removed while firing
+    const selfListeners = this.eventListeners[eventType];
+    if (selfListeners) {
+      for (let i = 0; i < selfListeners.length; i++) {
+        selfListeners[i].handler.call(this, evt);
+      }
+    }
+  }
+  /**
+   * draw both scene and hit graphs.  If the node being drawn is the stage, all of the layers will be cleared and redrawn
+   * @method
+   * @name Konva.Node#draw
+   * @returns {Konva.Node}
+   */
+  draw() {
+    this.drawScene();
+    this.drawHit();
+    return this;
+  }
+
+  // drag & drop
+  _createDragElement(evt) {
+    const pointerId = evt ? evt.pointerId : undefined;
+    const stage = this.getStage();
+    const ap = this.getAbsolutePosition();
+    if (!stage) {
+      return;
+    }
+    const pos =
+      stage._getPointerById(pointerId) ||
+      stage._changedPointerPositions[0] ||
+      ap;
+    DD._dragElements.set(this._id, {
+      node: this,
+      startPointerPos: pos,
+      offset: {
+        x: pos.x - ap.x,
+        y: pos.y - ap.y,
+      },
+      dragStatus: 'ready',
+      pointerId,
+    });
+  }
+
+  /**
+   * initiate drag and drop.
+   * @method
+   * @name Konva.Node#startDrag
+   */
+  startDrag(evt?: any, bubbleEvent = true) {
+    if (!DD._dragElements.has(this._id)) {
+      this._createDragElement(evt);
+    }
+
+    const elem = DD._dragElements.get(this._id)!;
+    elem.dragStatus = 'dragging';
+    this.fire(
+      'dragstart',
+      {
+        type: 'dragstart',
+        target: this,
+        evt: evt && evt.evt,
+      },
+      bubbleEvent
+    );
+  }
+
+  _setDragPosition(evt, elem) {
+    // const pointers = this.getStage().getPointersPositions();
+    // const pos = pointers.find(p => p.id === this._dragEventId);
+    const pos = this.getStage()!._getPointerById(elem.pointerId);
+
+    if (!pos) {
+      return;
+    }
+    let newNodePos = {
+      x: pos.x - elem.offset.x,
+      y: pos.y - elem.offset.y,
+    };
+
+    const dbf = this.dragBoundFunc();
+    if (dbf !== undefined) {
+      const bounded = dbf.call(this, newNodePos, evt);
+      if (!bounded) {
+        Util.warn(
+          'dragBoundFunc did not return any value. That is unexpected behavior. You must return new absolute position from dragBoundFunc.'
+        );
+      } else {
+        newNodePos = bounded;
+      }
+    }
+
+    if (
+      !this._lastPos ||
+      this._lastPos.x !== newNodePos.x ||
+      this._lastPos.y !== newNodePos.y
+    ) {
+      this.setAbsolutePosition(newNodePos);
+      this._requestDraw();
+    }
+
+    this._lastPos = newNodePos;
+  }
+
+  /**
+   * stop drag and drop
+   * @method
+   * @name Konva.Node#stopDrag
+   */
+  stopDrag(evt?) {
+    const elem = DD._dragElements.get(this._id);
+    if (elem) {
+      elem.dragStatus = 'stopped';
+    }
+    DD._endDragBefore(evt);
+    DD._endDragAfter(evt);
+  }
+
+  setDraggable(draggable) {
+    this._setAttr('draggable', draggable);
+    this._dragChange();
+  }
+
+  /**
+   * determine if node is currently in drag and drop mode
+   * @method
+   * @name Konva.Node#isDragging
+   */
+  isDragging() {
+    const elem = DD._dragElements.get(this._id);
+    return elem ? elem.dragStatus === 'dragging' : false;
+  }
+
+  _listenDrag() {
+    this._dragCleanup();
+
+    this.on('mousedown.konva touchstart.konva', function (evt) {
+      const shouldCheckButton = evt.evt['button'] !== undefined;
+      const canDrag =
+        !shouldCheckButton || Konva.dragButtons.indexOf(evt.evt['button']) >= 0;
+      if (!canDrag) {
+        return;
+      }
+      if (this.isDragging()) {
+        return;
+      }
+
+      let hasDraggingChild = false;
+      DD._dragElements.forEach((elem) => {
+        if (this.isAncestorOf(elem.node)) {
+          hasDraggingChild = true;
+        }
+      });
+      // nested drag can be started
+      // in that case we don't need to start new drag
+      if (!hasDraggingChild) {
+        this._createDragElement(evt);
+      }
+    });
+  }
+
+  _dragChange() {
+    if (this.attrs.draggable) {
+      this._listenDrag();
+    } else {
+      // remove event listeners
+      this._dragCleanup();
+
+      /*
+       * force drag and drop to end
+       * if this node is currently in
+       * drag and drop mode
+       */
+      const stage = this.getStage();
+      if (!stage) {
+        return;
+      }
+      const dragElement = DD._dragElements.get(this._id);
+      const isDragging = dragElement && dragElement.dragStatus === 'dragging';
+      const isReady = dragElement && dragElement.dragStatus === 'ready';
+
+      if (isDragging) {
+        this.stopDrag();
+      } else if (isReady) {
+        DD._dragElements.delete(this._id);
+      }
+    }
+  }
+
+  _dragCleanup() {
+    this.off('mousedown.konva');
+    this.off('touchstart.konva');
+  }
+
+  /**
+   * determine if node (at least partially) is currently in user-visible area
+   * @method
+   * @param {(Number | Object)} margin optional margin in pixels
+   * @param {Number} margin.x
+   * @param {Number} margin.y
+   * @returns {Boolean}
+   * @name Konva.Node#isClientRectOnScreen
+   * @example
+   * // get index
+   * // default calculations
+   * var isOnScreen = node.isClientRectOnScreen()
+   * // increase object size (or screen size) for cases when objects close to the screen still need to be marked as "visible"
+   * var isOnScreen = node.isClientRectOnScreen({ x: stage.width(), y: stage.height() })
+   */
+  isClientRectOnScreen(
+    margin: { x: number; y: number } = { x: 0, y: 0 }
+  ): boolean {
+    const stage = this.getStage();
+    if (!stage) {
+      return false;
+    }
+    const screenRect = {
+      x: -margin.x,
+      y: -margin.y,
+      width: stage.width() + 2 * margin.x,
+      height: stage.height() + 2 * margin.y,
+    };
+    return Util.haveIntersection(screenRect, this.getClientRect());
+  }
+
+  // @ts-ignore:
+  preventDefault: GetSet<boolean, this>;
+
+  // from filters
+  blue: GetSet<number, this>;
+  brightness: GetSet<number, this>;
+  contrast: GetSet<number, this>;
+  blurRadius: GetSet<number, this>;
+  luminance: GetSet<number, this>;
+  green: GetSet<number, this>;
+  alpha: GetSet<number, this>;
+  hue: GetSet<number, this>;
+  kaleidoscopeAngle: GetSet<number, this>;
+  kaleidoscopePower: GetSet<number, this>;
+  levels: GetSet<number, this>;
+  noise: GetSet<number, this>;
+  pixelSize: GetSet<number, this>;
+  red: GetSet<number, this>;
+  saturation: GetSet<number, this>;
+  threshold: GetSet<number, this>;
+  value: GetSet<number, this>;
+
+  dragBoundFunc: GetSet<
+    (this: Node, pos: Vector2d, event: any) => Vector2d,
+    this
+  >;
+  draggable: GetSet<boolean, this>;
+  dragDistance: GetSet<number, this>;
+  embossBlend: GetSet<boolean, this>;
+  embossDirection: GetSet<string, this>;
+  embossStrength: GetSet<number, this>;
+  embossWhiteLevel: GetSet<number, this>;
+  enhance: GetSet<number, this>;
+  filters: GetSet<Filters, this>;
+  position: GetSet<Vector2d, this>;
+  absolutePosition: GetSet<Vector2d, this>;
+  size: GetSet<{ width: number; height: number }, this>;
+
+  id: GetSet<string, this>;
+
+  listening: GetSet<boolean, this>;
+  name: GetSet<string, this>;
+  offset: GetSet<Vector2d, this>;
+  offsetX: GetSet<number, this>;
+  offsetY: GetSet<number, this>;
+  opacity: GetSet<number, this>;
+
+  rotation: GetSet<number, this>;
+  zIndex: GetSet<number, this>;
+
+  scale: GetSet<Vector2d, this>;
+  scaleX: GetSet<number, this>;
+  scaleY: GetSet<number, this>;
+  skew: GetSet<Vector2d, this>;
+  skewX: GetSet<number, this>;
+  skewY: GetSet<number, this>;
+
+  to: (params: AnimTo) => void;
+
+  transformsEnabled: GetSet<string, this>;
+
+  visible: GetSet<boolean, this>;
+  width: GetSet<number, this>;
+  height: GetSet<number, this>;
+
+  x: GetSet<number, this>;
+  y: GetSet<number, this>;
+  globalCompositeOperation: GetSet<globalCompositeOperationType, this>;
+
+  /**
+   * create node with JSON string or an Object.  De-serializtion does not generate custom
+   *  shape drawing functions, images, or event handlers (this would make the
+   *  serialized object huge).  If your app uses custom shapes, images, and
+   *  event handlers (it probably does), then you need to select the appropriate
+   *  shapes after loading the stage and set these properties via on(), setSceneFunc(),
+   *  and setImage() methods
+   * @method
+   * @memberof Konva.Node
+   * @param {String|Object} json string or object
+   * @param {Element} [container] optional container dom element used only if you're
+   *  creating a stage node
+   */
+  static create(data, container?) {
+    if (Util._isString(data)) {
+      data = JSON.parse(data);
+    }
+    return this._createNode(data, container);
+  }
+
+  static _createNode(obj, container?) {
+    let className = Node.prototype.getClassName.call(obj),
+      children = obj.children,
+      no,
+      len,
+      n;
+
+    // if container was passed in, add it to attrs
+    if (container) {
+      obj.attrs.container = container;
+    }
+
+    if (!Konva[className]) {
+      Util.warn(
+        'Can not find a node with class name "' +
+          className +
+          '". Fallback to "Shape".'
+      );
+      className = 'Shape';
+    }
+
+    const Class = Konva[className];
+
+    no = new Class(obj.attrs);
+    if (children) {
+      len = children.length;
+      for (n = 0; n < len; n++) {
+        no.add(Node._createNode(children[n]));
+      }
+    }
+
+    return no;
+  }
+}
+
+interface AnimTo extends NodeConfig {
+  onFinish?: Function;
+  onUpdate?: Function;
+  duration?: number;
+}
+
+Node.prototype.nodeType = 'Node';
+Node.prototype._attrsAffectingSize = [];
+
+// attache events listeners once into prototype
+// that way we don't spend too much time on making an new instance
+Node.prototype.eventListeners = {};
+Node.prototype.on.call(Node.prototype, TRANSFORM_CHANGE_STR, function () {
+  if (this._batchingTransformChange) {
+    this._needClearTransformCache = true;
+    return;
+  }
+  this._clearCache(TRANSFORM);
+  this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+});
+
+Node.prototype.on.call(Node.prototype, 'visibleChange.konva', function () {
+  this._clearSelfAndDescendantCache(VISIBLE);
+});
+Node.prototype.on.call(Node.prototype, 'listeningChange.konva', function () {
+  this._clearSelfAndDescendantCache(LISTENING);
+});
+Node.prototype.on.call(Node.prototype, 'opacityChange.konva', function () {
+  this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
+});
+
+const addGetterSetter = Factory.addGetterSetter;
+
+/**
+ * get/set zIndex relative to the node's siblings who share the same parent.
+ * Please remember that zIndex is not absolute (like in CSS). It is relative to parent element only.
+ * @name Konva.Node#zIndex
+ * @method
+ * @param {Number} index
+ * @returns {Number}
+ * @example
+ * // get index
+ * var index = node.zIndex();
+ *
+ * // set index
+ * node.zIndex(2);
+ */
+addGetterSetter(Node, 'zIndex');
+
+/**
+ * get/set node absolute position
+ * @name Konva.Node#absolutePosition
+ * @method
+ * @param {Object} pos
+ * @param {Number} pos.x
+ * @param {Number} pos.y
+ * @returns {Object}
+ * @example
+ * // get position
+ * var position = node.absolutePosition();
+ *
+ * // set position
+ * node.absolutePosition({
+ *   x: 5,
+ *   y: 10
+ * });
+ */
+addGetterSetter(Node, 'absolutePosition');
+
+addGetterSetter(Node, 'position');
+/**
+ * get/set node position relative to parent
+ * @name Konva.Node#position
+ * @method
+ * @param {Object} pos
+ * @param {Number} pos.x
+ * @param {Number} pos.y
+ * @returns {Object}
+ * @example
+ * // get position
+ * var position = node.position();
+ *
+ * // set position
+ * node.position({
+ *   x: 5,
+ *   y: 10
+ * });
+ */
+
+addGetterSetter(Node, 'x', 0, getNumberValidator());
+
+/**
+ * get/set x position
+ * @name Konva.Node#x
+ * @method
+ * @param {Number} x
+ * @returns {Object}
+ * @example
+ * // get x
+ * var x = node.x();
+ *
+ * // set x
+ * node.x(5);
+ */
+
+addGetterSetter(Node, 'y', 0, getNumberValidator());
+
+/**
+ * get/set y position
+ * @name Konva.Node#y
+ * @method
+ * @param {Number} y
+ * @returns {Integer}
+ * @example
+ * // get y
+ * var y = node.y();
+ *
+ * // set y
+ * node.y(5);
+ */
+
+addGetterSetter(
+  Node,
+  'globalCompositeOperation',
+  'source-over',
+  getStringValidator()
+);
+
+/**
+ * get/set globalCompositeOperation of a node. globalCompositeOperation DOESN'T affect hit graph of nodes. So they are still trigger to events as they have default "source-over" globalCompositeOperation.
+ * @name Konva.Node#globalCompositeOperation
+ * @method
+ * @param {String} type
+ * @returns {String}
+ * @example
+ * // get globalCompositeOperation
+ * var globalCompositeOperation = shape.globalCompositeOperation();
+ *
+ * // set globalCompositeOperation
+ * shape.globalCompositeOperation('source-in');
+ */
+addGetterSetter(Node, 'opacity', 1, getNumberValidator());
+
+/**
+ * get/set opacity.  Opacity values range from 0 to 1.
+ *  A node with an opacity of 0 is fully transparent, and a node
+ *  with an opacity of 1 is fully opaque
+ * @name Konva.Node#opacity
+ * @method
+ * @param {Object} opacity
+ * @returns {Number}
+ * @example
+ * // get opacity
+ * var opacity = node.opacity();
+ *
+ * // set opacity
+ * node.opacity(0.5);
+ */
+
+addGetterSetter(Node, 'name', '', getStringValidator());
+
+/**
+ * get/set name.
+ * @name Konva.Node#name
+ * @method
+ * @param {String} name
+ * @returns {String}
+ * @example
+ * // get name
+ * var name = node.name();
+ *
+ * // set name
+ * node.name('foo');
+ *
+ * // also node may have multiple names (as css classes)
+ * node.name('foo bar');
+ */
+
+addGetterSetter(Node, 'id', '', getStringValidator());
+
+/**
+ * get/set id. Id is global for whole page.
+ * @name Konva.Node#id
+ * @method
+ * @param {String} id
+ * @returns {String}
+ * @example
+ * // get id
+ * var name = node.id();
+ *
+ * // set id
+ * node.id('foo');
+ */
+
+addGetterSetter(Node, 'rotation', 0, getNumberValidator());
+
+/**
+ * get/set rotation in degrees
+ * @name Konva.Node#rotation
+ * @method
+ * @param {Number} rotation
+ * @returns {Number}
+ * @example
+ * // get rotation in degrees
+ * var rotation = node.rotation();
+ *
+ * // set rotation in degrees
+ * node.rotation(45);
+ */
+
+Factory.addComponentsGetterSetter(Node, 'scale', ['x', 'y']);
+
+/**
+ * get/set scale
+ * @name Konva.Node#scale
+ * @param {Object} scale
+ * @param {Number} scale.x
+ * @param {Number} scale.y
+ * @method
+ * @returns {Object}
+ * @example
+ * // get scale
+ * var scale = node.scale();
+ *
+ * // set scale
+ * shape.scale({
+ *   x: 2,
+ *   y: 3
+ * });
+ */
+
+addGetterSetter(Node, 'scaleX', 1, getNumberValidator());
+
+/**
+ * get/set scale x
+ * @name Konva.Node#scaleX
+ * @param {Number} x
+ * @method
+ * @returns {Number}
+ * @example
+ * // get scale x
+ * var scaleX = node.scaleX();
+ *
+ * // set scale x
+ * node.scaleX(2);
+ */
+
+addGetterSetter(Node, 'scaleY', 1, getNumberValidator());
+
+/**
+ * get/set scale y
+ * @name Konva.Node#scaleY
+ * @param {Number} y
+ * @method
+ * @returns {Number}
+ * @example
+ * // get scale y
+ * var scaleY = node.scaleY();
+ *
+ * // set scale y
+ * node.scaleY(2);
+ */
+
+Factory.addComponentsGetterSetter(Node, 'skew', ['x', 'y']);
+
+/**
+ * get/set skew
+ * @name Konva.Node#skew
+ * @param {Object} skew
+ * @param {Number} skew.x
+ * @param {Number} skew.y
+ * @method
+ * @returns {Object}
+ * @example
+ * // get skew
+ * var skew = node.skew();
+ *
+ * // set skew
+ * node.skew({
+ *   x: 20,
+ *   y: 10
+ * });
+ */
+
+addGetterSetter(Node, 'skewX', 0, getNumberValidator());
+
+/**
+ * get/set skew x
+ * @name Konva.Node#skewX
+ * @param {Number} x
+ * @method
+ * @returns {Number}
+ * @example
+ * // get skew x
+ * var skewX = node.skewX();
+ *
+ * // set skew x
+ * node.skewX(3);
+ */
+
+addGetterSetter(Node, 'skewY', 0, getNumberValidator());
+
+/**
+ * get/set skew y
+ * @name Konva.Node#skewY
+ * @param {Number} y
+ * @method
+ * @returns {Number}
+ * @example
+ * // get skew y
+ * var skewY = node.skewY();
+ *
+ * // set skew y
+ * node.skewY(3);
+ */
+
+Factory.addComponentsGetterSetter(Node, 'offset', ['x', 'y']);
+
+/**
+ * get/set offset.  Offsets the default position and rotation point
+ * @method
+ * @param {Object} offset
+ * @param {Number} offset.x
+ * @param {Number} offset.y
+ * @returns {Object}
+ * @example
+ * // get offset
+ * var offset = node.offset();
+ *
+ * // set offset
+ * node.offset({
+ *   x: 20,
+ *   y: 10
+ * });
+ */
+
+addGetterSetter(Node, 'offsetX', 0, getNumberValidator());
+
+/**
+ * get/set offset x
+ * @name Konva.Node#offsetX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get offset x
+ * var offsetX = node.offsetX();
+ *
+ * // set offset x
+ * node.offsetX(3);
+ */
+
+addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
+
+/**
+ * get/set offset y
+ * @name Konva.Node#offsetY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get offset y
+ * var offsetY = node.offsetY();
+ *
+ * // set offset y
+ * node.offsetY(3);
+ */
+
+addGetterSetter(Node, 'dragDistance', undefined, getNumberValidator());
+
+/**
+ * get/set drag distance
+ * @name Konva.Node#dragDistance
+ * @method
+ * @param {Number} distance
+ * @returns {Number}
+ * @example
+ * // get drag distance
+ * var dragDistance = node.dragDistance();
+ *
+ * // set distance
+ * // node starts dragging only if pointer moved more then 3 pixels
+ * node.dragDistance(3);
+ * // or set globally
+ * Konva.dragDistance = 3;
+ */
+
+addGetterSetter(Node, 'width', 0, getNumberValidator());
+/**
+ * get/set width
+ * @name Konva.Node#width
+ * @method
+ * @param {Number} width
+ * @returns {Number}
+ * @example
+ * // get width
+ * var width = node.width();
+ *
+ * // set width
+ * node.width(100);
+ */
+
+addGetterSetter(Node, 'height', 0, getNumberValidator());
+/**
+ * get/set height
+ * @name Konva.Node#height
+ * @method
+ * @param {Number} height
+ * @returns {Number}
+ * @example
+ * // get height
+ * var height = node.height();
+ *
+ * // set height
+ * node.height(100);
+ */
+
+addGetterSetter(Node, 'listening', true, getBooleanValidator());
+/**
+ * get/set listening attr.  If you need to determine if a node is listening or not
+ *   by taking into account its parents, use the isListening() method
+ *   nodes with listening set to false will not be detected in hit graph
+ *   so they will be ignored in container.getIntersection() method
+ * @name Konva.Node#listening
+ * @method
+ * @param {Boolean} listening Can be true, or false.  The default is true.
+ * @returns {Boolean}
+ * @example
+ * // get listening attr
+ * var listening = node.listening();
+ *
+ * // stop listening for events, remove node and all its children from hit graph
+ * node.listening(false);
+ *
+ * // listen to events according to the parent
+ * node.listening(true);
+ */
+
+/**
+ * get/set preventDefault
+ * By default all shapes will prevent default behavior
+ * of a browser on a pointer move or tap.
+ * that will prevent native scrolling when you are trying to drag&drop a node
+ * but sometimes you may need to enable default actions
+ * in that case you can set the property to false
+ * @name Konva.Node#preventDefault
+ * @method
+ * @param {Boolean} preventDefault
+ * @returns {Boolean}
+ * @example
+ * // get preventDefault
+ * var shouldPrevent = shape.preventDefault();
+ *
+ * // set preventDefault
+ * shape.preventDefault(false);
+ */
+
+addGetterSetter(Node, 'preventDefault', true, getBooleanValidator());
+
+addGetterSetter(Node, 'filters', undefined, function (this: Node, val) {
+  this._filterUpToDate = false;
+  return val;
+});
+/**
+ * get/set filters. Supports function filters, CSS filter strings, or mixed arrays.
+ * CSS filters are applied using native browser performance when possible, function filters use ImageData manipulation.
+ * CSS filters automatically fall back to function filters in unsupported browsers.
+ * @name Konva.Node#filters
+ * @method
+ * @param {Array} filters array of filter functions and/or CSS filter strings
+ * @returns {Array}
+ * @example
+ * // get filters
+ * var filters = node.filters();
+ *
+ * // set CSS filters only (no caching required, uses native performance)
+ * node.filters(['blur(5px)', 'brightness(1.2)', 'contrast(1.5)']);
+ *
+ * // set function filters only (caching required)
+ * node.cache();
+ * node.filters([Konva.Filters.Blur, Konva.Filters.Sepia, Konva.Filters.Invert]);
+ *
+ * // mix CSS and function filters (caching required, uses fallback strategy)
+ * node.cache();
+ * node.filters([
+ *   'blur(3px)',           // CSS filter
+ *   Konva.Filters.Invert,  // function filter
+ *   'brightness(1.5)'      // CSS filter
+ * ]);
+ */
+
+addGetterSetter(Node, 'visible', true, getBooleanValidator());
+/**
+ * get/set visible attr.  Can be true, or false.  The default is true.
+ *   If you need to determine if a node is visible or not
+ *   by taking into account its parents, use the isVisible() method
+ * @name Konva.Node#visible
+ * @method
+ * @param {Boolean} visible
+ * @returns {Boolean}
+ * @example
+ * // get visible attr
+ * var visible = node.visible();
+ *
+ * // make invisible
+ * node.visible(false);
+ *
+ * // make visible (according to the parent)
+ * node.visible(true);
+ *
+ */
+
+addGetterSetter(Node, 'transformsEnabled', 'all', getStringValidator());
+
+/**
+ * get/set transforms that are enabled.  Can be "all", "none", or "position".  The default
+ *  is "all"
+ * @name Konva.Node#transformsEnabled
+ * @method
+ * @param {String} enabled
+ * @returns {String}
+ * @example
+ * // enable position transform only to improve draw performance
+ * node.transformsEnabled('position');
+ *
+ * // enable all transforms
+ * node.transformsEnabled('all');
+ */
+
+/**
+ * get/set node size
+ * @name Konva.Node#size
+ * @method
+ * @param {Object} size
+ * @param {Number} size.width
+ * @param {Number} size.height
+ * @returns {Object}
+ * @example
+ * // get node size
+ * var size = node.size();
+ * var width = size.width;
+ * var height = size.height;
+ *
+ * // set size
+ * node.size({
+ *   width: 100,
+ *   height: 200
+ * });
+ */
+addGetterSetter(Node, 'size');
+
+/**
+ * get/set drag bound function.  This is used to override the default
+ *  drag and drop position.
+ * @name Konva.Node#dragBoundFunc
+ * @method
+ * @param {Function} dragBoundFunc
+ * @returns {Function}
+ * @example
+ * // get drag bound function
+ * var dragBoundFunc = node.dragBoundFunc();
+ *
+ * // create vertical drag and drop
+ * node.dragBoundFunc(function(pos){
+ *   // important pos - is absolute position of the node
+ *   // you should return absolute position too
+ *   return {
+ *     x: this.absolutePosition().x,
+ *     y: pos.y
+ *   };
+ * });
+ */
+addGetterSetter(Node, 'dragBoundFunc');
+
+/**
+ * get/set draggable flag
+ * @name Konva.Node#draggable
+ * @method
+ * @param {Boolean} draggable
+ * @returns {Boolean}
+ * @example
+ * // get draggable flag
+ * var draggable = node.draggable();
+ *
+ * // enable drag and drop
+ * node.draggable(true);
+ *
+ * // disable drag and drop
+ * node.draggable(false);
+ */
+addGetterSetter(Node, 'draggable', false, getBooleanValidator());
+
+Factory.backCompat(Node, {
+  rotateDeg: 'rotate',
+  setRotationDeg: 'setRotation',
+  getRotationDeg: 'getRotation',
+});