@nasser-sw/fabric 7.0.1-beta8 → 7.0.1-beta9

package/debug/konva-master/src/Layer.ts

@@ -0,0 +1,546 @@
+import { Util } from './Util.ts';
+import type { ContainerConfig } from './Container.ts';
+import { Container } from './Container.ts';
+import { Node } from './Node.ts';
+import { Factory } from './Factory.ts';
+import { SceneCanvas, HitCanvas } from './Canvas.ts';
+import type { Stage } from './Stage.ts';
+import { getBooleanValidator } from './Validators.ts';
+
+import type { GetSet, Vector2d } from './types.ts';
+import type { Group } from './Group.ts';
+import type { Shape } from './Shape.ts';
+import { shapes } from './Shape.ts';
+import { _registerNode } from './Global.ts';
+
+export interface LayerConfig extends ContainerConfig {
+  clearBeforeDraw?: boolean;
+  hitGraphEnabled?: boolean;
+  imageSmoothingEnabled?: boolean;
+}
+
+// constants
+const HASH = '#',
+  BEFORE_DRAW = 'beforeDraw',
+  DRAW = 'draw',
+  /*
+   * 2 - 3 - 4
+   * |       |
+   * 1 - 0   5
+   *         |
+   * 8 - 7 - 6
+   */
+  INTERSECTION_OFFSETS = [
+    { x: 0, y: 0 }, // 0
+    { x: -1, y: -1 }, // 2
+    { x: 1, y: -1 }, // 4
+    { x: 1, y: 1 }, // 6
+    { x: -1, y: 1 }, // 8
+  ],
+  INTERSECTION_OFFSETS_LEN = INTERSECTION_OFFSETS.length;
+
+/**
+ * Layer constructor.  Layers are tied to their own canvas element and are used
+ * to contain groups or shapes.
+ * @constructor
+ * @memberof Konva
+ * @augments Konva.Container
+ * @param {Object} config
+ * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
+ * to clear the canvas before each layer draw.  The default value is true.
+ * @@nodeParams
+ * @@containerParams
+ * @example
+ * var layer = new Konva.Layer();
+ * stage.add(layer);
+ * // now you can add shapes, groups into the layer
+ */
+
+export class Layer extends Container<Group | Shape> {
+  canvas = new SceneCanvas();
+  hitCanvas = new HitCanvas({
+    pixelRatio: 1,
+  });
+
+  _waitingForDraw = false;
+
+  constructor(config?: LayerConfig) {
+    super(config);
+    this.on('visibleChange.konva', this._checkVisibility);
+    this._checkVisibility();
+
+    this.on('imageSmoothingEnabledChange.konva', this._setSmoothEnabled);
+    this._setSmoothEnabled();
+  }
+  // for nodejs?
+  createPNGStream() {
+    const c = this.canvas._canvas as any;
+    return c.createPNGStream();
+  }
+  /**
+   * get layer canvas wrapper
+   * @method
+   * @name Konva.Layer#getCanvas
+   */
+  getCanvas() {
+    return this.canvas;
+  }
+  /**
+   * get native canvas element
+   * @method
+   * @name Konva.Layer#getNativeCanvasElement
+   */
+  getNativeCanvasElement() {
+    return this.canvas._canvas;
+  }
+  /**
+   * get layer hit canvas
+   * @method
+   * @name Konva.Layer#getHitCanvas
+   */
+  getHitCanvas() {
+    return this.hitCanvas;
+  }
+  /**
+   * get layer canvas context
+   * @method
+   * @name Konva.Layer#getContext
+   */
+  getContext() {
+    return this.getCanvas().getContext();
+  }
+  // TODO: deprecate this method
+  clear(bounds?) {
+    this.getContext().clear(bounds);
+    this.getHitCanvas().getContext().clear(bounds);
+    return this;
+  }
+  // extend Node.prototype.setZIndex
+  setZIndex(index: number) {
+    super.setZIndex(index);
+    const stage = this.getStage();
+    if (stage && stage.content) {
+      stage.content.removeChild(this.getNativeCanvasElement());
+
+      if (index < stage.children.length - 1) {
+        stage.content.insertBefore(
+          this.getNativeCanvasElement(),
+          stage.children[index + 1].getCanvas()._canvas
+        );
+      } else {
+        stage.content.appendChild(this.getNativeCanvasElement());
+      }
+    }
+    return this;
+  }
+  moveToTop() {
+    Node.prototype.moveToTop.call(this);
+    const stage = this.getStage();
+    if (stage && stage.content) {
+      stage.content.removeChild(this.getNativeCanvasElement());
+      stage.content.appendChild(this.getNativeCanvasElement());
+    }
+    return true;
+  }
+  moveUp() {
+    const moved = Node.prototype.moveUp.call(this);
+    if (!moved) {
+      return false;
+    }
+    const stage = this.getStage();
+    if (!stage || !stage.content) {
+      return false;
+    }
+    stage.content.removeChild(this.getNativeCanvasElement());
+
+    if (this.index < stage.children.length - 1) {
+      stage.content.insertBefore(
+        this.getNativeCanvasElement(),
+        stage.children[this.index + 1].getCanvas()._canvas
+      );
+    } else {
+      stage.content.appendChild(this.getNativeCanvasElement());
+    }
+    return true;
+  }
+  // extend Node.prototype.moveDown
+  moveDown() {
+    if (Node.prototype.moveDown.call(this)) {
+      const stage = this.getStage();
+      if (stage) {
+        const children = stage.children;
+        if (stage.content) {
+          stage.content.removeChild(this.getNativeCanvasElement());
+          stage.content.insertBefore(
+            this.getNativeCanvasElement(),
+            children[this.index + 1].getCanvas()._canvas
+          );
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+  // extend Node.prototype.moveToBottom
+  moveToBottom() {
+    if (Node.prototype.moveToBottom.call(this)) {
+      const stage = this.getStage();
+      if (stage) {
+        const children = stage.children;
+        if (stage.content) {
+          stage.content.removeChild(this.getNativeCanvasElement());
+          stage.content.insertBefore(
+            this.getNativeCanvasElement(),
+            children[1].getCanvas()._canvas
+          );
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+  getLayer() {
+    return this;
+  }
+  remove() {
+    const _canvas = this.getNativeCanvasElement();
+
+    Node.prototype.remove.call(this);
+
+    if (_canvas && _canvas.parentNode && Util._isInDocument(_canvas)) {
+      _canvas.parentNode.removeChild(_canvas);
+    }
+    return this;
+  }
+  getStage() {
+    return this.parent as Stage;
+  }
+  setSize({ width, height }) {
+    this.canvas.setSize(width, height);
+    this.hitCanvas.setSize(width, height);
+    this._setSmoothEnabled();
+    return this;
+  }
+  _validateAdd(child) {
+    const type = child.getType();
+    if (type !== 'Group' && type !== 'Shape') {
+      Util.throw('You may only add groups and shapes to a layer.');
+    }
+  }
+  _toKonvaCanvas(config) {
+    config = config || {};
+    config.width = config.width || this.getWidth();
+    config.height = config.height || this.getHeight();
+    config.x = config.x !== undefined ? config.x : this.x();
+    config.y = config.y !== undefined ? config.y : this.y();
+
+    return Node.prototype._toKonvaCanvas.call(this, config);
+  }
+
+  _checkVisibility() {
+    const visible = this.visible();
+    if (visible) {
+      this.canvas._canvas.style.display = 'block';
+    } else {
+      this.canvas._canvas.style.display = 'none';
+    }
+  }
+
+  _setSmoothEnabled() {
+    this.getContext()._context.imageSmoothingEnabled =
+      this.imageSmoothingEnabled();
+  }
+  /**
+   * get/set width of layer. getter return width of stage. setter doing nothing.
+   * if you want change width use `stage.width(value);`
+   * @name Konva.Layer#width
+   * @method
+   * @returns {Number}
+   * @example
+   * var width = layer.width();
+   */
+  getWidth() {
+    if (this.parent) {
+      return this.parent.width();
+    }
+  }
+  setWidth() {
+    Util.warn(
+      'Can not change width of layer. Use "stage.width(value)" function instead.'
+    );
+  }
+  /**
+   * get/set height of layer.getter return height of stage. setter doing nothing.
+   * if you want change height use `stage.height(value);`
+   * @name Konva.Layer#height
+   * @method
+   * @returns {Number}
+   * @example
+   * var height = layer.height();
+   */
+  getHeight() {
+    if (this.parent) {
+      return this.parent.height();
+    }
+  }
+  setHeight() {
+    Util.warn(
+      'Can not change height of layer. Use "stage.height(value)" function instead.'
+    );
+  }
+
+  /**
+   * batch draw. this function will not do immediate draw
+   * but it will schedule drawing to next tick (requestAnimFrame)
+   * @method
+   * @name Konva.Layer#batchDraw
+   * @return {Konva.Layer} this
+   */
+  batchDraw() {
+    if (!this._waitingForDraw) {
+      this._waitingForDraw = true;
+      Util.requestAnimFrame(() => {
+        this.draw();
+        this._waitingForDraw = false;
+      });
+    }
+    return this;
+  }
+
+  /**
+   * get visible intersection shape. This is the preferred
+   * method for determining if a point intersects a shape or not
+   * also you may pass optional selector parameter to return ancestor of intersected shape
+   * nodes with listening set to false will not be detected
+   * @method
+   * @name Konva.Layer#getIntersection
+   * @param {Object} pos
+   * @param {Number} pos.x
+   * @param {Number} pos.y
+   * @returns {Konva.Node}
+   * @example
+   * var shape = layer.getIntersection({x: 50, y: 50});
+   */
+  getIntersection(pos: Vector2d) {
+    if (!this.isListening() || !this.isVisible()) {
+      return null;
+    }
+    // in some cases antialiased area may be bigger than 1px
+    // it is possible if we will cache node, then scale it a lot
+    let spiralSearchDistance = 1;
+    let continueSearch = false;
+    while (true) {
+      for (let i = 0; i < INTERSECTION_OFFSETS_LEN; i++) {
+        const intersectionOffset = INTERSECTION_OFFSETS[i];
+        const obj = this._getIntersection({
+          x: pos.x + intersectionOffset.x * spiralSearchDistance,
+          y: pos.y + intersectionOffset.y * spiralSearchDistance,
+        });
+        const shape = obj.shape;
+        if (shape) {
+          return shape;
+        }
+        // we should continue search if we found antialiased pixel
+        // that means our node somewhere very close
+        continueSearch = !!obj.antialiased;
+        // stop search if found empty pixel
+        if (!obj.antialiased) {
+          break;
+        }
+      }
+      // if no shape, and no antialiased pixel, we should end searching
+      if (continueSearch) {
+        spiralSearchDistance += 1;
+      } else {
+        return null;
+      }
+    }
+  }
+  _getIntersection(pos: Vector2d): { shape?: Shape; antialiased?: boolean } {
+    const ratio = this.hitCanvas.pixelRatio;
+    const p = this.hitCanvas.context.getImageData(
+      Math.round(pos.x * ratio),
+      Math.round(pos.y * ratio),
+      1,
+      1
+    ).data;
+    const p3 = p[3];
+
+    // fully opaque pixel
+    if (p3 === 255) {
+      const colorKey = Util._rgbToHex(p[0], p[1], p[2]);
+      const shape = shapes[HASH + colorKey];
+      if (shape) {
+        return {
+          shape: shape,
+        };
+      }
+      return {
+        antialiased: true,
+      };
+    } else if (p3 > 0) {
+      // antialiased pixel
+      return {
+        antialiased: true,
+      };
+    }
+    // empty pixel
+    return {};
+  }
+  drawScene(can?: SceneCanvas, top?: Node, bufferCanvas?: SceneCanvas) {
+    const layer = this.getLayer(),
+      canvas = can || (layer && layer.getCanvas());
+
+    this._fire(BEFORE_DRAW, {
+      node: this,
+    });
+
+    if (this.clearBeforeDraw()) {
+      canvas.getContext().clear();
+    }
+
+    Container.prototype.drawScene.call(this, canvas, top, bufferCanvas);
+
+    this._fire(DRAW, {
+      node: this,
+    });
+
+    return this;
+  }
+  drawHit(can?: HitCanvas, top?: Node) {
+    const layer = this.getLayer(),
+      canvas = can || (layer && layer.hitCanvas);
+
+    if (layer && layer.clearBeforeDraw()) {
+      layer.getHitCanvas().getContext().clear();
+    }
+
+    Container.prototype.drawHit.call(this, canvas, top);
+    return this;
+  }
+  /**
+   * enable hit graph. **DEPRECATED!** Use `layer.listening(true)` instead.
+   * @name Konva.Layer#enableHitGraph
+   * @method
+   * @returns {Layer}
+   */
+  enableHitGraph() {
+    this.hitGraphEnabled(true);
+    return this;
+  }
+  /**
+   * disable hit graph. **DEPRECATED!** Use `layer.listening(false)` instead.
+   * @name Konva.Layer#disableHitGraph
+   * @method
+   * @returns {Layer}
+   */
+  disableHitGraph() {
+    this.hitGraphEnabled(false);
+    return this;
+  }
+
+  setHitGraphEnabled(val) {
+    Util.warn(
+      'hitGraphEnabled method is deprecated. Please use layer.listening() instead.'
+    );
+    this.listening(val);
+  }
+
+  getHitGraphEnabled(val) {
+    Util.warn(
+      'hitGraphEnabled method is deprecated. Please use layer.listening() instead.'
+    );
+    return this.listening();
+  }
+
+  /**
+   * Show or hide hit canvas over the stage. May be useful for debugging custom hitFunc
+   * @name Konva.Layer#toggleHitCanvas
+   * @method
+   */
+  toggleHitCanvas() {
+    if (!this.parent || !this.parent['content']) {
+      return;
+    }
+    const parent = this.parent as any;
+    const added = !!this.hitCanvas._canvas.parentNode;
+    if (added) {
+      parent.content.removeChild(this.hitCanvas._canvas);
+    } else {
+      parent.content.appendChild(this.hitCanvas._canvas);
+    }
+  }
+
+  destroy(): this {
+    Util.releaseCanvas(
+      this.getNativeCanvasElement(),
+      this.getHitCanvas()._canvas
+    );
+    return super.destroy();
+  }
+
+  hitGraphEnabled: GetSet<boolean, this>;
+
+  clearBeforeDraw: GetSet<boolean, this>;
+  imageSmoothingEnabled: GetSet<boolean, this>;
+}
+
+Layer.prototype.nodeType = 'Layer';
+_registerNode(Layer);
+
+/**
+ * get/set imageSmoothingEnabled flag
+ * For more info see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
+ * @name Konva.Layer#imageSmoothingEnabled
+ * @method
+ * @param {Boolean} imageSmoothingEnabled
+ * @returns {Boolean}
+ * @example
+ * // get imageSmoothingEnabled flag
+ * var imageSmoothingEnabled = layer.imageSmoothingEnabled();
+ *
+ * layer.imageSmoothingEnabled(false);
+ *
+ * layer.imageSmoothingEnabled(true);
+ */
+Factory.addGetterSetter(Layer, 'imageSmoothingEnabled', true);
+
+/**
+ * get/set clearBeforeDraw flag which determines if the layer is cleared or not
+ *  before drawing
+ * @name Konva.Layer#clearBeforeDraw
+ * @method
+ * @param {Boolean} clearBeforeDraw
+ * @returns {Boolean}
+ * @example
+ * // get clearBeforeDraw flag
+ * var clearBeforeDraw = layer.clearBeforeDraw();
+ *
+ * // disable clear before draw
+ * layer.clearBeforeDraw(false);
+ *
+ * // enable clear before draw
+ * layer.clearBeforeDraw(true);
+ */
+Factory.addGetterSetter(Layer, 'clearBeforeDraw', true);
+
+Factory.addGetterSetter(Layer, 'hitGraphEnabled', true, getBooleanValidator());
+/**
+ * get/set hitGraphEnabled flag.  **DEPRECATED!** Use `layer.listening(false)` instead.
+ *  Disabling the hit graph will greatly increase
+ *  draw performance because the hit graph will not be redrawn each time the layer is
+ *  drawn.  This, however, also disables mouse/touch event detection
+ * @name Konva.Layer#hitGraphEnabled
+ * @method
+ * @param {Boolean} enabled
+ * @returns {Boolean}
+ * @example
+ * // get hitGraphEnabled flag
+ * var hitGraphEnabled = layer.hitGraphEnabled();
+ *
+ * // disable hit graph
+ * layer.hitGraphEnabled(false);
+ *
+ * // enable hit graph
+ * layer.hitGraphEnabled(true);
+ */