@nasser-sw/fabric 7.0.1-beta3 → 7.0.1-beta5

package/debug/konva/src/shapes/Rect.ts

@@ -1,79 +0,0 @@
-import { Factory } from '../Factory.ts';
-import type { ShapeConfig } from '../Shape.ts';
-import { Shape } from '../Shape.ts';
-import { _registerNode } from '../Global.ts';
-
-import { Util } from '../Util.ts';
-import type { GetSet } from '../types.ts';
-import type { Context } from '../Context.ts';
-import { getNumberOrArrayOfNumbersValidator } from '../Validators.ts';
-
-export interface RectConfig extends ShapeConfig {
-  cornerRadius?: number | number[];
-}
-
-/**
- * Rect constructor
- * @constructor
- * @memberof Konva
- * @augments Konva.Shape
- * @param {Object} config
- * @param {Number} [config.cornerRadius]
- * @@shapeParams
- * @@nodeParams
- * @example
- * var rect = new Konva.Rect({
- *   width: 100,
- *   height: 50,
- *   fill: 'red',
- *   stroke: 'black',
- *   strokeWidth: 5
- * });
- */
-export class Rect extends Shape<RectConfig> {
-  _sceneFunc(context: Context) {
-    const cornerRadius = this.cornerRadius(),
-      width = this.width(),
-      height = this.height();
-
-    context.beginPath();
-
-    if (!cornerRadius) {
-      // simple rect - don't bother doing all that complicated maths stuff.
-      context.rect(0, 0, width, height);
-    } else {
-      Util.drawRoundedRectPath(context, width, height, cornerRadius);
-    }
-    context.closePath();
-    context.fillStrokeShape(this);
-  }
-
-  cornerRadius: GetSet<number | number[], this>;
-}
-
-Rect.prototype.className = 'Rect';
-_registerNode(Rect);
-
-/**
- * get/set corner radius
- * @method
- * @name Konva.Rect#cornerRadius
- * @param {Number} cornerRadius
- * @returns {Number}
- * @example
- * // get corner radius
- * var cornerRadius = rect.cornerRadius();
- *
- * // set corner radius
- * rect.cornerRadius(10);
- *
- * // set different corner radius values
- * // top-left, top-right, bottom-right, bottom-left
- * rect.cornerRadius([0, 10, 20, 30]);
- */
-Factory.addGetterSetter(
-  Rect,
-  'cornerRadius',
-  0,
-  getNumberOrArrayOfNumbersValidator(4)
-);

package/debug/konva/src/shapes/RegularPolygon.ts

@@ -1,167 +0,0 @@
-import { Factory } from '../Factory.ts';
-import type { ShapeConfig } from '../Shape.ts';
-import { Shape } from '../Shape.ts';
-import type { GetSet, Vector2d } from '../types.ts';
-import {
-  getNumberOrArrayOfNumbersValidator,
-  getNumberValidator,
-} from '../Validators.ts';
-import { _registerNode } from '../Global.ts';
-import type { Context } from '../Context.ts';
-import { Util } from '../Util.ts';
-
-export interface RegularPolygonConfig extends ShapeConfig {
-  sides: number;
-  radius: number;
-  cornerRadius?: number | number[];
-}
-/**
- * RegularPolygon constructor. Examples include triangles, squares, pentagons, hexagons, etc.
- * @constructor
- * @memberof Konva
- * @augments Konva.Shape
- * @param {Object} config
- * @param {Number} [config.cornerRadius]
- * @param {Number} config.sides
- * @param {Number} config.radius
- * @@shapeParams
- * @@nodeParams
- * @example
- * var hexagon = new Konva.RegularPolygon({
- *   x: 100,
- *   y: 200,
- *   sides: 6,
- *   radius: 70,
- *   fill: 'red',
- *   stroke: 'black',
- *   strokeWidth: 4
- * });
- */
-export class RegularPolygon extends Shape<RegularPolygonConfig> {
-  _sceneFunc(context: Context) {
-    const points = this._getPoints(),
-      radius = this.radius(),
-      sides = this.sides(),
-      cornerRadius = this.cornerRadius();
-
-    context.beginPath();
-
-    if (!cornerRadius) {
-      context.moveTo(points[0].x, points[0].y);
-      for (let n = 1; n < points.length; n++) {
-        context.lineTo(points[n].x, points[n].y);
-      }
-    } else {
-      Util.drawRoundedPolygonPath(context, points, sides, radius, cornerRadius);
-    }
-
-    context.closePath();
-    context.fillStrokeShape(this);
-  }
-  _getPoints() {
-    const sides = this.attrs.sides as number;
-    const radius = this.attrs.radius || 0;
-    const points: Vector2d[] = [];
-    for (let n = 0; n < sides; n++) {
-      points.push({
-        x: radius * Math.sin((n * 2 * Math.PI) / sides),
-        y: -1 * radius * Math.cos((n * 2 * Math.PI) / sides),
-      });
-    }
-    return points;
-  }
-  getSelfRect() {
-    const points = this._getPoints();
-
-    let minX = points[0].x;
-    let maxX = points[0].y;
-    let minY = points[0].x;
-    let maxY = points[0].y;
-    points.forEach((point) => {
-      minX = Math.min(minX, point.x);
-      maxX = Math.max(maxX, point.x);
-      minY = Math.min(minY, point.y);
-      maxY = Math.max(maxY, point.y);
-    });
-    return {
-      x: minX,
-      y: minY,
-      width: maxX - minX,
-      height: maxY - minY,
-    };
-  }
-  getWidth() {
-    return this.radius() * 2;
-  }
-  getHeight() {
-    return this.radius() * 2;
-  }
-  setWidth(width: number) {
-    this.radius(width / 2);
-  }
-  setHeight(height: number) {
-    this.radius(height / 2);
-  }
-
-  radius: GetSet<number, this>;
-  sides: GetSet<number, this>;
-  cornerRadius: GetSet<number | number[], this>;
-}
-
-RegularPolygon.prototype.className = 'RegularPolygon';
-RegularPolygon.prototype._centroid = true;
-RegularPolygon.prototype._attrsAffectingSize = ['radius'];
-_registerNode(RegularPolygon);
-
-/**
- * get/set radius
- * @method
- * @name Konva.RegularPolygon#radius
- * @param {Number} radius
- * @returns {Number}
- * @example
- * // get radius
- * var radius = shape.radius();
- *
- * // set radius
- * shape.radius(10);
- */
-Factory.addGetterSetter(RegularPolygon, 'radius', 0, getNumberValidator());
-
-/**
- * get/set sides
- * @method
- * @name Konva.RegularPolygon#sides
- * @param {Number} sides
- * @returns {Number}
- * @example
- * // get sides
- * var sides = shape.sides();
- *
- * // set sides
- * shape.sides(10);
- */
-Factory.addGetterSetter(RegularPolygon, 'sides', 0, getNumberValidator());
-
-/**
- * get/set corner radius
- * @method
- * @name Konva.RegularPolygon#cornerRadius
- * @param {Number} cornerRadius
- * @returns {Number}
- * @example
- * // get corner radius
- * var cornerRadius = poly.cornerRadius();
- *
- * // set corner radius
- * poly.cornerRadius(10);
- *
- * // set different corner radius values (pentagon)
- * poly.cornerRadius([0, 10, 20, 30, 40]);
- */
-Factory.addGetterSetter(
-  RegularPolygon,
-  'cornerRadius',
-  0,
-  getNumberOrArrayOfNumbersValidator(4)
-);

package/debug/konva/src/shapes/Ring.ts

@@ -1,94 +0,0 @@
-import { Factory } from '../Factory.ts';
-import type { ShapeConfig } from '../Shape.ts';
-import { Shape } from '../Shape.ts';
-import type { GetSet } from '../types.ts';
-import { getNumberValidator } from '../Validators.ts';
-import { _registerNode } from '../Global.ts';
-import type { Context } from '../Context.ts';
-
-export interface RingConfig extends ShapeConfig {
-  innerRadius: number;
-  outerRadius: number;
-}
-
-const PIx2 = Math.PI * 2;
-/**
- * Ring constructor
- * @constructor
- * @augments Konva.Shape
- * @memberof Konva
- * @param {Object} config
- * @param {Number} config.innerRadius
- * @param {Number} config.outerRadius
- * @@shapeParams
- * @@nodeParams
- * @example
- * var ring = new Konva.Ring({
- *   innerRadius: 40,
- *   outerRadius: 80,
- *   fill: 'red',
- *   stroke: 'black',
- *   strokeWidth: 5
- * });
- */
-export class Ring extends Shape<RingConfig> {
-  _sceneFunc(context: Context) {
-    context.beginPath();
-    context.arc(0, 0, this.innerRadius(), 0, PIx2, false);
-    context.moveTo(this.outerRadius(), 0);
-    context.arc(0, 0, this.outerRadius(), PIx2, 0, true);
-    context.closePath();
-    context.fillStrokeShape(this);
-  }
-  getWidth() {
-    return this.outerRadius() * 2;
-  }
-  getHeight() {
-    return this.outerRadius() * 2;
-  }
-  setWidth(width: number) {
-    this.outerRadius(width / 2);
-  }
-  setHeight(height: number) {
-    this.outerRadius(height / 2);
-  }
-
-  outerRadius: GetSet<number, this>;
-  innerRadius: GetSet<number, this>;
-}
-
-Ring.prototype.className = 'Ring';
-Ring.prototype._centroid = true;
-Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
-_registerNode(Ring);
-
-/**
- * get/set innerRadius
- * @method
- * @name Konva.Ring#innerRadius
- * @param {Number} innerRadius
- * @returns {Number}
- * @example
- * // get inner radius
- * var innerRadius = ring.innerRadius();
- *
- * // set inner radius
- * ring.innerRadius(20);
- */
-
-Factory.addGetterSetter(Ring, 'innerRadius', 0, getNumberValidator());
-
-/**
- * get/set outerRadius
- * @name Konva.Ring#outerRadius
- * @method
- * @param {Number} outerRadius
- * @returns {Number}
- * @example
- * // get outer radius
- * var outerRadius = ring.outerRadius();
- *
- * // set outer radius
- * ring.outerRadius(20);
- */
-Factory.addGetterSetter(Ring, 'outerRadius', 0, getNumberValidator());

package/debug/konva/src/shapes/Sprite.ts

@@ -1,370 +0,0 @@
-import { Factory } from '../Factory.ts';
-import type { Context } from '../Context.ts';
-import type { ShapeConfig } from '../Shape.ts';
-import { Shape } from '../Shape.ts';
-import { Animation } from '../Animation.ts';
-import { getNumberValidator } from '../Validators.ts';
-import { _registerNode } from '../Global.ts';
-
-import type { GetSet } from '../types.ts';
-
-export interface SpriteConfig extends ShapeConfig {
-  animation: string;
-  animations: any;
-  frameIndex?: number;
-  image: HTMLImageElement;
-  frameRate?: number;
-}
-
-/**
- * Sprite constructor
- * @constructor
- * @memberof Konva
- * @augments Konva.Shape
- * @param {Object} config
- * @param {String} config.animation animation key
- * @param {Object} config.animations animation map
- * @param {Integer} [config.frameIndex] animation frame index
- * @param {Image} config.image image object
- * @param {Integer} [config.frameRate] animation frame rate
- * @@shapeParams
- * @@nodeParams
- * @example
- * var imageObj = new Image();
- * imageObj.onload = function() {
- *   var sprite = new Konva.Sprite({
- *     x: 200,
- *     y: 100,
- *     image: imageObj,
- *     animation: 'standing',
- *     animations: {
- *       standing: [
- *         // x, y, width, height (6 frames)
- *         0, 0, 49, 109,
- *         52, 0, 49, 109,
- *         105, 0, 49, 109,
- *         158, 0, 49, 109,
- *         210, 0, 49, 109,
- *         262, 0, 49, 109
- *       ],
- *       kicking: [
- *         // x, y, width, height (6 frames)
- *         0, 109, 45, 98,
- *         45, 109, 45, 98,
- *         95, 109, 63, 98,
- *         156, 109, 70, 98,
- *         229, 109, 60, 98,
- *         287, 109, 41, 98
- *       ]
- *     },
- *     frameRate: 7,
- *     frameIndex: 0
- *   });
- * };
- * imageObj.src = '/path/to/image.jpg'
- */
-export class Sprite extends Shape<SpriteConfig> {
-  _updated = true;
-  anim: Animation;
-  interval: any;
-  constructor(config: SpriteConfig) {
-    super(config);
-    this.anim = new Animation(() => {
-      // if we don't need to redraw layer we should return false
-      const updated = this._updated;
-      this._updated = false;
-      return updated;
-    });
-    this.on('animationChange.konva', function () {
-      // reset index when animation changes
-      this.frameIndex(0);
-    });
-    this.on('frameIndexChange.konva', function () {
-      this._updated = true;
-    });
-    // smooth change for frameRate
-    this.on('frameRateChange.konva', function () {
-      if (!this.anim.isRunning()) {
-        return;
-      }
-      clearInterval(this.interval);
-      this._setInterval();
-    });
-  }
-
-  _sceneFunc(context: Context) {
-    const anim = this.animation(),
-      index = this.frameIndex(),
-      ix4 = index * 4,
-      set = this.animations()[anim],
-      offsets = this.frameOffsets(),
-      x = set[ix4 + 0],
-      y = set[ix4 + 1],
-      width = set[ix4 + 2],
-      height = set[ix4 + 3],
-      image = this.image();
-
-    if (this.hasFill() || this.hasStroke()) {
-      context.beginPath();
-      context.rect(0, 0, width, height);
-      context.closePath();
-      context.fillStrokeShape(this);
-    }
-
-    if (image) {
-      if (offsets) {
-        const offset = offsets[anim],
-          ix2 = index * 2;
-        context.drawImage(
-          image,
-          x,
-          y,
-          width,
-          height,
-          offset[ix2 + 0],
-          offset[ix2 + 1],
-          width,
-          height
-        );
-      } else {
-        context.drawImage(image, x, y, width, height, 0, 0, width, height);
-      }
-    }
-  }
-  _hitFunc(context: Context) {
-    const anim = this.animation(),
-      index = this.frameIndex(),
-      ix4 = index * 4,
-      set = this.animations()[anim],
-      offsets = this.frameOffsets(),
-      width = set[ix4 + 2],
-      height = set[ix4 + 3];
-
-    context.beginPath();
-    if (offsets) {
-      const offset = offsets[anim];
-      const ix2 = index * 2;
-      context.rect(offset[ix2 + 0], offset[ix2 + 1], width, height);
-    } else {
-      context.rect(0, 0, width, height);
-    }
-    context.closePath();
-    context.fillShape(this);
-  }
-
-  _useBufferCanvas() {
-    return super._useBufferCanvas(true);
-  }
-
-  _setInterval() {
-    const that = this;
-    this.interval = setInterval(function () {
-      that._updateIndex();
-    }, 1000 / this.frameRate());
-  }
-  /**
-   * start sprite animation
-   * @method
-   * @name Konva.Sprite#start
-   */
-  start() {
-    if (this.isRunning()) {
-      return;
-    }
-    const layer = this.getLayer();
-
-    /*
-     * animation object has no executable function because
-     *  the updates are done with a fixed FPS with the setInterval
-     *  below.  The anim object only needs the layer reference for
-     *  redraw
-     */
-    this.anim.setLayers(layer);
-    this._setInterval();
-    this.anim.start();
-  }
-  /**
-   * stop sprite animation
-   * @method
-   * @name Konva.Sprite#stop
-   */
-  stop() {
-    this.anim.stop();
-    clearInterval(this.interval);
-  }
-  /**
-   * determine if animation of sprite is running or not.  returns true or false
-   * @method
-   * @name Konva.Sprite#isRunning
-   * @returns {Boolean}
-   */
-  isRunning() {
-    return this.anim.isRunning();
-  }
-  _updateIndex() {
-    const index = this.frameIndex(),
-      animation = this.animation(),
-      animations = this.animations(),
-      anim = animations[animation],
-      len = anim.length / 4;
-
-    if (index < len - 1) {
-      this.frameIndex(index + 1);
-    } else {
-      this.frameIndex(0);
-    }
-  }
-
-  frameIndex: GetSet<number, this>;
-  animation: GetSet<string, this>;
-  image: GetSet<CanvasImageSource, this>;
-  animations: GetSet<any, this>;
-  frameOffsets: GetSet<any, this>;
-  frameRate: GetSet<number, this>;
-}
-
-Sprite.prototype.className = 'Sprite';
-_registerNode(Sprite);
-
-// add getters setters
-Factory.addGetterSetter(Sprite, 'animation');
-
-/**
- * get/set animation key
- * @name Konva.Sprite#animation
- * @method
- * @param {String} anim animation key
- * @returns {String}
- * @example
- * // get animation key
- * var animation = sprite.animation();
- *
- * // set animation key
- * sprite.animation('kicking');
- */
-
-Factory.addGetterSetter(Sprite, 'animations');
-
-/**
- * get/set animations map
- * @name Konva.Sprite#animations
- * @method
- * @param {Object} animations
- * @returns {Object}
- * @example
- * // get animations map
- * var animations = sprite.animations();
- *
- * // set animations map
- * sprite.animations({
- *   standing: [
- *     // x, y, width, height (6 frames)
- *     0, 0, 49, 109,
- *     52, 0, 49, 109,
- *     105, 0, 49, 109,
- *     158, 0, 49, 109,
- *     210, 0, 49, 109,
- *     262, 0, 49, 109
- *   ],
- *   kicking: [
- *     // x, y, width, height (6 frames)
- *     0, 109, 45, 98,
- *     45, 109, 45, 98,
- *     95, 109, 63, 98,
- *     156, 109, 70, 98,
- *     229, 109, 60, 98,
- *     287, 109, 41, 98
- *   ]
- * });
- */
-
-Factory.addGetterSetter(Sprite, 'frameOffsets');
-
-/**
- * get/set offsets map
- * @name Konva.Sprite#offsets
- * @method
- * @param {Object} offsets
- * @returns {Object}
- * @example
- * // get offsets map
- * var offsets = sprite.offsets();
- *
- * // set offsets map
- * sprite.offsets({
- *   standing: [
- *     // x, y (6 frames)
- *     0, 0,
- *     0, 0,
- *     5, 0,
- *     0, 0,
- *     0, 3,
- *     2, 0
- *   ],
- *   kicking: [
- *     // x, y (6 frames)
- *     0, 5,
- *     5, 0,
- *     10, 0,
- *     0, 0,
- *     2, 1,
- *     0, 0
- *   ]
- * });
- */
-
-Factory.addGetterSetter(Sprite, 'image');
-
-/**
- * get/set image
- * @name Konva.Sprite#image
- * @method
- * @param {Image} image
- * @returns {Image}
- * @example
- * // get image
- * var image = sprite.image();
- *
- * // set image
- * sprite.image(imageObj);
- */
-
-Factory.addGetterSetter(Sprite, 'frameIndex', 0, getNumberValidator());
-
-/**
- * set/set animation frame index
- * @name Konva.Sprite#frameIndex
- * @method
- * @param {Integer} frameIndex
- * @returns {Integer}
- * @example
- * // get animation frame index
- * var frameIndex = sprite.frameIndex();
- *
- * // set animation frame index
- * sprite.frameIndex(3);
- */
-
-Factory.addGetterSetter(Sprite, 'frameRate', 17, getNumberValidator());
-
-/**
- * get/set frame rate in frames per second.  Increase this number to make the sprite
- *  animation run faster, and decrease the number to make the sprite animation run slower
- *  The default is 17 frames per second
- * @name Konva.Sprite#frameRate
- * @method
- * @param {Integer} frameRate
- * @returns {Integer}
- * @example
- * // get frame rate
- * var frameRate = sprite.frameRate();
- *
- * // set frame rate to 2 frames per second
- * sprite.frameRate(2);
- */
-
-Factory.backCompat(Sprite, {
-  index: 'frameIndex',
-  getIndex: 'getFrameIndex',
-  setIndex: 'setFrameIndex',
-});