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

package/debug/konva-master/src/shapes/Circle.ts

@@ -0,0 +1,76 @@
+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 CircleConfig extends ShapeConfig {
+  radius?: number;
+}
+
+/**
+ * Circle constructor
+ * @constructor
+ * @memberof Konva
+ * @augments Konva.Shape
+ * @param {Object} config
+ * @param {Number} config.radius
+ * @@shapeParams
+ * @@nodeParams
+ * @example
+ * // create circle
+ * var circle = new Konva.Circle({
+ *   radius: 40,
+ *   fill: 'red',
+ *   stroke: 'black',
+ *   strokeWidth: 5
+ * });
+ */
+export class Circle extends Shape<CircleConfig> {
+  _sceneFunc(context: Context) {
+    context.beginPath();
+    context.arc(0, 0, this.attrs.radius || 0, 0, Math.PI * 2, false);
+    context.closePath();
+    context.fillStrokeShape(this);
+  }
+  getWidth() {
+    return this.radius() * 2;
+  }
+  getHeight() {
+    return this.radius() * 2;
+  }
+  setWidth(width: number) {
+    if (this.radius() !== width / 2) {
+      this.radius(width / 2);
+    }
+  }
+  setHeight(height: number) {
+    if (this.radius() !== height / 2) {
+      this.radius(height / 2);
+    }
+  }
+
+  radius: GetSet<number, this>;
+}
+
+Circle.prototype._centroid = true;
+Circle.prototype.className = 'Circle';
+Circle.prototype._attrsAffectingSize = ['radius'];
+_registerNode(Circle);
+
+/**
+ * get/set radius
+ * @name Konva.Circle#radius
+ * @method
+ * @param {Number} radius
+ * @returns {Number}
+ * @example
+ * // get radius
+ * var radius = circle.radius();
+ *
+ * // set radius
+ * circle.radius(10);
+ */
+Factory.addGetterSetter(Circle, 'radius', 0, getNumberValidator());

package/debug/konva-master/src/shapes/Ellipse.ts

@@ -0,0 +1,121 @@
+import { Factory } from '../Factory.ts';
+import type { ShapeConfig } from '../Shape.ts';
+import { Shape } from '../Shape.ts';
+import { getNumberValidator } from '../Validators.ts';
+import { _registerNode } from '../Global.ts';
+import type { Context } from '../Context.ts';
+
+import type { GetSet, Vector2d } from '../types.ts';
+
+export interface EllipseConfig extends ShapeConfig {
+  radiusX: number;
+  radiusY: number;
+}
+
+/**
+ * Ellipse constructor
+ * @constructor
+ * @memberof Konva
+ * @augments Konva.Shape
+ * @param {Object} config
+ * @param {Object} config.radius defines x and y radius
+ * @@shapeParams
+ * @@nodeParams
+ * @example
+ * var ellipse = new Konva.Ellipse({
+ *   radius : {
+ *     x : 50,
+ *     y : 50
+ *   },
+ *   fill: 'red'
+ * });
+ */
+export class Ellipse extends Shape<EllipseConfig> {
+  _sceneFunc(context: Context) {
+    const rx = this.radiusX(),
+      ry = this.radiusY();
+
+    context.beginPath();
+    context.save();
+    if (rx !== ry) {
+      context.scale(1, ry / rx);
+    }
+    context.arc(0, 0, rx, 0, Math.PI * 2, false);
+    context.restore();
+    context.closePath();
+    context.fillStrokeShape(this);
+  }
+  getWidth() {
+    return this.radiusX() * 2;
+  }
+  getHeight() {
+    return this.radiusY() * 2;
+  }
+  setWidth(width: number) {
+    this.radiusX(width / 2);
+  }
+  setHeight(height: number) {
+    this.radiusY(height / 2);
+  }
+
+  radius: GetSet<Vector2d, this>;
+  radiusX: GetSet<number, this>;
+  radiusY: GetSet<number, this>;
+}
+
+Ellipse.prototype.className = 'Ellipse';
+Ellipse.prototype._centroid = true;
+Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
+_registerNode(Ellipse);
+
+// add getters setters
+Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);
+
+/**
+ * get/set radius
+ * @name Konva.Ellipse#radius
+ * @method
+ * @param {Object} radius
+ * @param {Number} radius.x
+ * @param {Number} radius.y
+ * @returns {Object}
+ * @example
+ * // get radius
+ * var radius = ellipse.radius();
+ *
+ * // set radius
+ * ellipse.radius({
+ *   x: 200,
+ *   y: 100
+ * });
+ */
+
+Factory.addGetterSetter(Ellipse, 'radiusX', 0, getNumberValidator());
+/**
+ * get/set radius x
+ * @name Konva.Ellipse#radiusX
+ * @method
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get radius x
+ * var radiusX = ellipse.radiusX();
+ *
+ * // set radius x
+ * ellipse.radiusX(200);
+ */
+
+Factory.addGetterSetter(Ellipse, 'radiusY', 0, getNumberValidator());
+/**
+ * get/set radius y
+ * @name Konva.Ellipse#radiusY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get radius y
+ * var radiusY = ellipse.radiusY();
+ *
+ * // set radius y
+ * ellipse.radiusY(200);
+ */

package/debug/konva-master/src/shapes/Image.ts

@@ -0,0 +1,319 @@
+import { Util } from '../Util.ts';
+import { Factory } from '../Factory.ts';
+import type { ShapeConfig } from '../Shape.ts';
+import { Shape } from '../Shape.ts';
+import { _registerNode } from '../Global.ts';
+import {
+  getNumberOrArrayOfNumbersValidator,
+  getNumberValidator,
+} from '../Validators.ts';
+
+import type { GetSet, IRect } from '../types.ts';
+import type { Context } from '../Context.ts';
+
+export interface ImageConfig extends ShapeConfig {
+  image: CanvasImageSource | undefined;
+  crop?: IRect;
+  cornerRadius?: number | number[];
+}
+
+/**
+ * Image constructor
+ * @constructor
+ * @memberof Konva
+ * @augments Konva.Shape
+ * @param {Object} config
+ * @param {Image} config.image
+ * @param {Object} [config.crop]
+ * @@shapeParams
+ * @@nodeParams
+ * @example
+ * var imageObj = new Image();
+ * imageObj.onload = function() {
+ *   var image = new Konva.Image({
+ *     x: 200,
+ *     y: 50,
+ *     image: imageObj,
+ *     width: 100,
+ *     height: 100
+ *   });
+ * };
+ * imageObj.src = '/path/to/image.jpg'
+ */
+export class Image extends Shape<ImageConfig> {
+  private _loadListener: () => void;
+
+  constructor(attrs: ImageConfig) {
+    super(attrs);
+    this._loadListener = () => {
+      this._requestDraw();
+    };
+
+    this.on('imageChange.konva', (props: any) => {
+      this._removeImageLoad(props.oldVal);
+      this._setImageLoad();
+    });
+
+    this._setImageLoad();
+  }
+  _setImageLoad() {
+    const image = this.image() as any;
+    // check is image is already loaded
+    if (image && image.complete) {
+      return;
+    }
+    // check is video is already loaded
+    if (image && image.readyState === 4) {
+      return;
+    }
+    if (image && image['addEventListener']) {
+      image['addEventListener']('load', this._loadListener);
+    }
+  }
+  _removeImageLoad(image: any) {
+    if (image && image['removeEventListener']) {
+      image['removeEventListener']('load', this._loadListener);
+    }
+  }
+  destroy() {
+    this._removeImageLoad(this.image());
+    super.destroy();
+    return this;
+  }
+  _useBufferCanvas() {
+    const hasCornerRadius = !!this.cornerRadius();
+    const hasShadow = this.hasShadow();
+    if (hasCornerRadius && hasShadow) {
+      return true;
+    }
+    return super._useBufferCanvas(true);
+  }
+  _sceneFunc(context: Context) {
+    const width = this.getWidth();
+    const height = this.getHeight();
+    const cornerRadius = this.cornerRadius();
+    const image = this.attrs.image;
+    let params;
+
+    if (image) {
+      const cropWidth = this.attrs.cropWidth;
+      const cropHeight = this.attrs.cropHeight;
+      if (cropWidth && cropHeight) {
+        params = [
+          image,
+          this.cropX(),
+          this.cropY(),
+          cropWidth,
+          cropHeight,
+          0,
+          0,
+          width,
+          height,
+        ];
+      } else {
+        params = [image, 0, 0, width, height];
+      }
+    }
+
+    if (this.hasFill() || this.hasStroke() || cornerRadius) {
+      context.beginPath();
+      cornerRadius
+        ? Util.drawRoundedRectPath(context, width, height, cornerRadius)
+        : context.rect(0, 0, width, height);
+      context.closePath();
+      context.fillStrokeShape(this);
+    }
+
+    if (image) {
+      if (cornerRadius) {
+        context.clip();
+      }
+      context.drawImage.apply(context, params);
+    }
+    // If you need to draw later, you need to execute save/restore
+  }
+  _hitFunc(context: Context) {
+    const width = this.width(),
+      height = this.height(),
+      cornerRadius = this.cornerRadius();
+
+    context.beginPath();
+    if (!cornerRadius) {
+      context.rect(0, 0, width, height);
+    } else {
+      Util.drawRoundedRectPath(context, width, height, cornerRadius);
+    }
+    context.closePath();
+    context.fillStrokeShape(this);
+  }
+  getWidth() {
+    return this.attrs.width ?? (this.image() as any)?.width;
+  }
+  getHeight() {
+    return this.attrs.height ?? (this.image() as any)?.height;
+  }
+
+  /**
+   * load image from given url and create `Konva.Image` instance
+   * @method
+   * @memberof Konva.Image
+   * @param {String} url image source
+   * @param {Function} callback with Konva.Image instance as first argument
+   * @param {Function} onError optional error handler
+   * @example
+   *  Konva.Image.fromURL(imageURL, function(image){
+   *    // image is Konva.Image instance
+   *    layer.add(image);
+   *  });
+   */
+  static fromURL(
+    url: string,
+    callback: (img: Image) => void,
+    onError: OnErrorEventHandler = null
+  ) {
+    const img = Util.createImageElement();
+    img.onload = function () {
+      const image = new Image({
+        image: img,
+      });
+      callback(image);
+    };
+    img.onerror = onError;
+    img.crossOrigin = 'Anonymous';
+    img.src = url;
+  }
+
+  image: GetSet<CanvasImageSource | undefined, this>;
+  crop: GetSet<IRect, this>;
+  cropX: GetSet<number, this>;
+  cropY: GetSet<number, this>;
+  cropWidth: GetSet<number, this>;
+  cropHeight: GetSet<number, this>;
+  cornerRadius: GetSet<number | number[], this>;
+}
+
+Image.prototype.className = 'Image';
+_registerNode(Image);
+
+/**
+ * get/set corner radius
+ * @method
+ * @name Konva.Image#cornerRadius
+ * @param {Number} cornerRadius
+ * @returns {Number}
+ * @example
+ * // get corner radius
+ * var cornerRadius = image.cornerRadius();
+ *
+ * // set corner radius
+ * image.cornerRadius(10);
+ *
+ * // set different corner radius values
+ * // top-left, top-right, bottom-right, bottom-left
+ * image.cornerRadius([0, 10, 20, 30]);
+ */
+Factory.addGetterSetter(
+  Image,
+  'cornerRadius',
+  0,
+  getNumberOrArrayOfNumbersValidator(4)
+);
+
+/**
+ * get/set image source. It can be image, canvas or video element
+ * @name Konva.Image#image
+ * @method
+ * @param {Object} image source
+ * @returns {Object}
+ * @example
+ * // get value
+ * var image = shape.image();
+ *
+ * // set value
+ * shape.image(img);
+ */
+Factory.addGetterSetter(Image, 'image');
+
+Factory.addComponentsGetterSetter(Image, 'crop', ['x', 'y', 'width', 'height']);
+/**
+ * get/set crop
+ * @method
+ * @name Konva.Image#crop
+ * @param {Object} crop
+ * @param {Number} crop.x
+ * @param {Number} crop.y
+ * @param {Number} crop.width
+ * @param {Number} crop.height
+ * @returns {Object}
+ * @example
+ * // get crop
+ * var crop = image.crop();
+ *
+ * // set crop
+ * image.crop({
+ *   x: 20,
+ *   y: 20,
+ *   width: 20,
+ *   height: 20
+ * });
+ */
+
+Factory.addGetterSetter(Image, 'cropX', 0, getNumberValidator());
+/**
+ * get/set crop x
+ * @method
+ * @name Konva.Image#cropX
+ * @param {Number} x
+ * @returns {Number}
+ * @example
+ * // get crop x
+ * var cropX = image.cropX();
+ *
+ * // set crop x
+ * image.cropX(20);
+ */
+
+Factory.addGetterSetter(Image, 'cropY', 0, getNumberValidator());
+/**
+ * get/set crop y
+ * @name Konva.Image#cropY
+ * @method
+ * @param {Number} y
+ * @returns {Number}
+ * @example
+ * // get crop y
+ * var cropY = image.cropY();
+ *
+ * // set crop y
+ * image.cropY(20);
+ */
+
+Factory.addGetterSetter(Image, 'cropWidth', 0, getNumberValidator());
+/**
+ * get/set crop width
+ * @name Konva.Image#cropWidth
+ * @method
+ * @param {Number} width
+ * @returns {Number}
+ * @example
+ * // get crop width
+ * var cropWidth = image.cropWidth();
+ *
+ * // set crop width
+ * image.cropWidth(20);
+ */
+
+Factory.addGetterSetter(Image, 'cropHeight', 0, getNumberValidator());
+/**
+ * get/set crop height
+ * @name Konva.Image#cropHeight
+ * @method
+ * @param {Number} height
+ * @returns {Number}
+ * @example
+ * // get crop height
+ * var cropHeight = image.cropHeight();
+ *
+ * // set crop height
+ * image.cropHeight(20);
+ */