@nasser-sw/fabric 7.0.0-beta1

package/debug/konva/src/Core.ts

@@ -0,0 +1,5 @@
+// enter file of limited Konva version with only core functions
+export { Konva } from './_CoreInternals.ts';
+import { Konva } from './_CoreInternals.ts';
+
+export default Konva;

package/debug/konva/src/DragAndDrop.ts

@@ -0,0 +1,173 @@
+import type { Container } from './Container.ts';
+import { Konva } from './Global.ts';
+import type { Node } from './Node.ts';
+import type { Vector2d } from './types.ts';
+import { Util } from './Util.ts';
+
+export const DD = {
+  get isDragging() {
+    let flag = false;
+    DD._dragElements.forEach((elem) => {
+      if (elem.dragStatus === 'dragging') {
+        flag = true;
+      }
+    });
+    return flag;
+  },
+  justDragged: false,
+  get node() {
+    // return first dragging node
+    let node: Node | undefined;
+    DD._dragElements.forEach((elem) => {
+      node = elem.node;
+    });
+    return node;
+  },
+  _dragElements: new Map<
+    number,
+    {
+      node: Node;
+      startPointerPos: Vector2d;
+      offset: Vector2d;
+      pointerId?: number;
+      // when we just put pointer down on a node
+      // it will create drag element
+      dragStatus: 'ready' | 'dragging' | 'stopped';
+      // dragStarted: boolean;
+      // isDragging: boolean;
+      // dragStopped: boolean;
+    }
+  >(),
+
+  // methods
+  _drag(evt) {
+    const nodesToFireEvents: Array<Node> = [];
+    DD._dragElements.forEach((elem, key) => {
+      const { node } = elem;
+      // we need to find pointer relative to that node
+      const stage = node.getStage()!;
+      stage.setPointersPositions(evt);
+
+      // it is possible that user call startDrag without any event
+      // it that case we need to detect first movable pointer and attach it into the node
+      if (elem.pointerId === undefined) {
+        elem.pointerId = Util._getFirstPointerId(evt);
+      }
+      const pos = stage._changedPointerPositions.find(
+        (pos) => pos.id === elem.pointerId
+      );
+
+      // not related pointer
+      if (!pos) {
+        return;
+      }
+      if (elem.dragStatus !== 'dragging') {
+        const dragDistance = node.dragDistance();
+        const distance = Math.max(
+          Math.abs(pos.x - elem.startPointerPos.x),
+          Math.abs(pos.y - elem.startPointerPos.y)
+        );
+        if (distance < dragDistance) {
+          return;
+        }
+        node.startDrag({ evt });
+        // a user can stop dragging inside `dragstart`
+        if (!node.isDragging()) {
+          return;
+        }
+      }
+      node._setDragPosition(evt, elem);
+      nodesToFireEvents.push(node);
+    });
+    // call dragmove only after ALL positions are changed
+    nodesToFireEvents.forEach((node) => {
+      node.fire(
+        'dragmove',
+        {
+          type: 'dragmove',
+          target: node,
+          evt: evt,
+        },
+        true
+      );
+    });
+  },
+
+  // dragBefore and dragAfter allows us to set correct order of events
+  // setup all in dragbefore, and stop dragging only after pointerup triggered.
+  _endDragBefore(evt?) {
+    const drawNodes: Array<Container> = [];
+    DD._dragElements.forEach((elem) => {
+      const { node } = elem;
+      // we need to find pointer relative to that node
+      const stage = node.getStage()!;
+      if (evt) {
+        stage.setPointersPositions(evt);
+      }
+
+      const pos = stage._changedPointerPositions.find(
+        (pos) => pos.id === elem.pointerId
+      );
+
+      // that pointer is not related
+      if (!pos) {
+        return;
+      }
+
+      if (elem.dragStatus === 'dragging' || elem.dragStatus === 'stopped') {
+        // if a node is stopped manually we still need to reset events:
+        DD.justDragged = true;
+        Konva._mouseListenClick = false;
+        Konva._touchListenClick = false;
+        Konva._pointerListenClick = false;
+        elem.dragStatus = 'stopped';
+      }
+
+      const drawNode =
+        elem.node.getLayer() ||
+        ((elem.node instanceof Konva['Stage'] && elem.node) as any);
+
+      if (drawNode && drawNodes.indexOf(drawNode) === -1) {
+        drawNodes.push(drawNode);
+      }
+    });
+    // draw in a sync way
+    // because mousemove event may trigger BEFORE batch draw is called
+    // but as we have not hit canvas updated yet, it will trigger incorrect mouseover/mouseout events
+    drawNodes.forEach((drawNode) => {
+      drawNode.draw();
+    });
+  },
+  _endDragAfter(evt) {
+    DD._dragElements.forEach((elem, key) => {
+      if (elem.dragStatus === 'stopped') {
+        elem.node.fire(
+          'dragend',
+          {
+            type: 'dragend',
+            target: elem.node,
+            evt: evt,
+          },
+          true
+        );
+      }
+      if (elem.dragStatus !== 'dragging') {
+        DD._dragElements.delete(key);
+      }
+    });
+  },
+};
+
+if (Konva.isBrowser) {
+  window.addEventListener('mouseup', DD._endDragBefore, true);
+  window.addEventListener('touchend', DD._endDragBefore, true);
+  // add touchcancel to fix this: https://github.com/konvajs/konva/issues/1843
+  window.addEventListener('touchcancel', DD._endDragBefore, true);
+
+  window.addEventListener('mousemove', DD._drag);
+  window.addEventListener('touchmove', DD._drag);
+
+  window.addEventListener('mouseup', DD._endDragAfter, false);
+  window.addEventListener('touchend', DD._endDragAfter, false);
+  window.addEventListener('touchcancel', DD._endDragAfter, false);
+}

package/debug/konva/src/Factory.ts

@@ -0,0 +1,246 @@
+import type { Node } from './Node.ts';
+import type { GetSet } from './types.ts';
+import { Util } from './Util.ts';
+import { getComponentValidator } from './Validators.ts';
+
+const GET = 'get';
+const SET = 'set';
+
+/**
+ * Enforces that a type is a string.
+ */
+type EnforceString<T> = T extends string ? T : never;
+
+/**
+ * Represents a class.
+ */
+type Constructor = abstract new (...args: any) => any;
+
+/**
+ * An attribute of an instance of the provided class. Attributes names be strings.
+ */
+type Attr<T extends Constructor> = EnforceString<keyof InstanceType<T>>;
+
+/**
+ * A function that is called after a setter is called.
+ */
+type AfterFunc<T extends Constructor> = (this: InstanceType<T>) => void;
+
+/**
+ * Extracts the type of a GetSet.
+ */
+type ExtractGetSet<T> = T extends GetSet<infer U, any> ? U : never;
+
+/**
+ * Extracts the type of a GetSet class attribute.
+ */
+type Value<T extends Constructor, U extends Attr<T>> = ExtractGetSet<
+  InstanceType<T>[U]
+>;
+
+/**
+ * A function that validates a value.
+ */
+type ValidatorFunc<T> = (val: ExtractGetSet<T>, attr: string) => T;
+
+/**
+ * Extracts the "components" (keys) of a GetSet value. The value must be an object.
+ */
+type ExtractComponents<T extends Constructor, U extends Attr<T>> =
+  Value<T, U> extends Record<string, any>
+    ? EnforceString<keyof Value<T, U>>[]
+    : never;
+
+export const Factory = {
+  addGetterSetter<T extends Constructor, U extends Attr<T>>(
+    constructor: T,
+    attr: U,
+    def?: Value<T, U>,
+    validator?: ValidatorFunc<Value<T, U>>,
+    after?: AfterFunc<T>
+  ): void {
+    Factory.addGetter(constructor, attr, def);
+    Factory.addSetter(constructor, attr, validator, after);
+    Factory.addOverloadedGetterSetter(constructor, attr);
+  },
+  addGetter<T extends Constructor, U extends Attr<T>>(
+    constructor: T,
+    attr: U,
+    def?: Value<T, U>
+  ) {
+    const method = GET + Util._capitalize(attr);
+
+    constructor.prototype[method] =
+      constructor.prototype[method] ||
+      function (this: Node) {
+        const val = this.attrs[attr];
+        return val === undefined ? def : val;
+      };
+  },
+
+  addSetter<T extends Constructor, U extends Attr<T>>(
+    constructor: T,
+    attr: U,
+    validator?: ValidatorFunc<Value<T, U>>,
+    after?: AfterFunc<T>
+  ) {
+    const method = SET + Util._capitalize(attr);
+
+    if (!constructor.prototype[method]) {
+      Factory.overWriteSetter(constructor, attr, validator, after);
+    }
+  },
+
+  overWriteSetter<T extends Constructor, U extends Attr<T>>(
+    constructor: T,
+    attr: U,
+    validator?: ValidatorFunc<Value<T, U>>,
+    after?: AfterFunc<T>
+  ) {
+    const method = SET + Util._capitalize(attr);
+    constructor.prototype[method] = function (val) {
+      if (validator && val !== undefined && val !== null) {
+        val = validator.call(this, val, attr);
+      }
+
+      this._setAttr(attr, val);
+
+      if (after) {
+        after.call(this);
+      }
+
+      return this;
+    };
+  },
+
+  addComponentsGetterSetter<T extends Constructor, U extends Attr<T>>(
+    constructor: T,
+    attr: U,
+    components: ExtractComponents<T, U>,
+    validator?: ValidatorFunc<Value<T, U>>,
+    after?: AfterFunc<T>
+  ) {
+    const len = components.length,
+      capitalize = Util._capitalize,
+      getter = GET + capitalize(attr),
+      setter = SET + capitalize(attr);
+
+    // getter
+    constructor.prototype[getter] = function () {
+      const ret: Record<string, any> = {};
+
+      for (let n = 0; n < len; n++) {
+        const component = components[n];
+        ret[component] = this.getAttr(attr + capitalize(component));
+      }
+
+      return ret;
+    };
+
+    const basicValidator = getComponentValidator(components);
+
+    // setter
+    constructor.prototype[setter] = function (val) {
+      const oldVal = this.attrs[attr];
+
+      if (validator) {
+        val = validator.call(this, val, attr);
+      }
+
+      if (basicValidator) {
+        basicValidator.call(this, val, attr);
+      }
+
+      for (const key in val) {
+        if (!val.hasOwnProperty(key)) {
+          continue;
+        }
+        this._setAttr(attr + capitalize(key), val[key]);
+      }
+      if (!val) {
+        components.forEach((component) => {
+          this._setAttr(attr + capitalize(component), undefined);
+        });
+      }
+
+      this._fireChangeEvent(attr, oldVal, val);
+
+      if (after) {
+        after.call(this);
+      }
+
+      return this;
+    };
+
+    Factory.addOverloadedGetterSetter(constructor, attr);
+  },
+  addOverloadedGetterSetter<T extends Constructor, U extends Attr<T>>(
+    constructor: T,
+    attr: U
+  ) {
+    const capitalizedAttr = Util._capitalize(attr),
+      setter = SET + capitalizedAttr,
+      getter = GET + capitalizedAttr;
+
+    constructor.prototype[attr] = function () {
+      // setting
+      if (arguments.length) {
+        this[setter](arguments[0]);
+        return this;
+      }
+      // getting
+      return this[getter]();
+    };
+  },
+  addDeprecatedGetterSetter<T extends Constructor, U extends Attr<T>>(
+    constructor: T,
+    attr: U,
+    def: Value<T, U>,
+    validator: ValidatorFunc<Value<T, U>>
+  ) {
+    Util.error('Adding deprecated ' + attr);
+
+    const method = GET + Util._capitalize(attr);
+
+    const message =
+      attr +
+      ' property is deprecated and will be removed soon. Look at Konva change log for more information.';
+    constructor.prototype[method] = function () {
+      Util.error(message);
+      const val = this.attrs[attr];
+      return val === undefined ? def : val;
+    };
+    Factory.addSetter(constructor, attr, validator, function () {
+      Util.error(message);
+    });
+    Factory.addOverloadedGetterSetter(constructor, attr);
+  },
+  backCompat<T extends Constructor>(
+    constructor: T,
+    methods: Record<string, string>
+  ) {
+    Util.each(methods, function (oldMethodName, newMethodName) {
+      const method = constructor.prototype[newMethodName];
+      const oldGetter = GET + Util._capitalize(oldMethodName);
+      const oldSetter = SET + Util._capitalize(oldMethodName);
+
+      function deprecated(this: Node) {
+        method.apply(this, arguments);
+        Util.error(
+          '"' +
+            oldMethodName +
+            '" method is deprecated and will be removed soon. Use ""' +
+            newMethodName +
+            '" instead.'
+        );
+      }
+
+      constructor.prototype[oldMethodName] = deprecated;
+      constructor.prototype[oldGetter] = deprecated;
+      constructor.prototype[oldSetter] = deprecated;
+    });
+  },
+  afterSetFilter(this: Node): void {
+    this._filterUpToDate = false;
+  },
+};

package/debug/konva/src/FastLayer.ts

@@ -0,0 +1,29 @@
+import { Util } from './Util.ts';
+import { Layer } from './Layer.ts';
+import { _registerNode } from './Global.ts';
+
+/**
+ * FastLayer constructor. **DEPRECATED!** Please use `Konva.Layer({ listening: false})` instead. Layers are tied to their own canvas element and are used
+ * to contain shapes only.  If you don't need node nesting, mouse and touch interactions,
+ * or event pub/sub, you should use FastLayer instead of Layer to create your layers.
+ * It renders about 2x faster than normal layers.
+ *
+ * @constructor
+ * @memberof Konva
+ * @augments Konva.Layer
+ @@containerParams
+ * @example
+ * var layer = new Konva.FastLayer();
+ */
+export class FastLayer extends Layer {
+  constructor(attrs) {
+    super(attrs);
+    this.listening(false);
+    Util.warn(
+      'Konva.Fast layer is deprecated. Please use "new Konva.Layer({ listening: false })" instead.'
+    );
+  }
+}
+
+FastLayer.prototype.nodeType = 'FastLayer';
+_registerNode(FastLayer);

package/debug/konva/src/Global.ts

@@ -0,0 +1,210 @@
+/*
+ * Konva JavaScript Framework v@@version
+ * http://konvajs.org/
+ * Licensed under the MIT
+ * Date: @@date
+ *
+ * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
+ * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
+ *
+ * @license
+ */
+const PI_OVER_180 = Math.PI / 180;
+/**
+ * @namespace Konva
+ */
+
+function detectBrowser() {
+  return (
+    typeof window !== 'undefined' &&
+    // browser case
+    ({}.toString.call(window) === '[object Window]' ||
+      // electron case
+      {}.toString.call(window) === '[object global]')
+  );
+}
+
+declare const WorkerGlobalScope: any;
+
+export const glob: any =
+  typeof global !== 'undefined'
+    ? global
+    : typeof window !== 'undefined'
+      ? window
+      : typeof WorkerGlobalScope !== 'undefined'
+        ? self
+        : {};
+
+export const Konva = {
+  _global: glob,
+  version: '@@version',
+  isBrowser: detectBrowser(),
+  isUnminified: /param/.test(function (param: any) {}.toString()),
+  dblClickWindow: 400,
+  getAngle(angle: number) {
+    return Konva.angleDeg ? angle * PI_OVER_180 : angle;
+  },
+  enableTrace: false,
+  pointerEventsEnabled: true,
+  /**
+   * Should Konva automatically update canvas on any changes. Default is true.
+   * @property autoDrawEnabled
+   * @default true
+   * @name autoDrawEnabled
+   * @memberof Konva
+   * @example
+   * Konva.autoDrawEnabled = true;
+   */
+  autoDrawEnabled: true,
+  /**
+   * Should we enable hit detection while dragging? For performance reasons, by default it is false.
+   * But on some rare cases you want to see hit graph and check intersections. Just set it to true.
+   * @property hitOnDragEnabled
+   * @default false
+   * @name hitOnDragEnabled
+   * @memberof Konva
+   * @example
+   * Konva.hitOnDragEnabled = true;
+   */
+  hitOnDragEnabled: false,
+  /**
+   * Should we capture touch events and bind them to the touchstart target? That is how it works on DOM elements.
+   * The case: we touchstart on div1, then touchmove out of that element into another element div2.
+   * DOM will continue trigger touchmove events on div1 (not div2). Because events are "captured" into initial target.
+   * By default Konva do not do that and will trigger touchmove on another element, while pointer is moving.
+   * @property capturePointerEventsEnabled
+   * @default false
+   * @name capturePointerEventsEnabled
+   * @memberof Konva
+   * @example
+   * Konva.capturePointerEventsEnabled = true;
+   */
+  capturePointerEventsEnabled: false,
+
+  _mouseListenClick: false,
+  _touchListenClick: false,
+  _pointerListenClick: false,
+  _mouseInDblClickWindow: false,
+  _touchInDblClickWindow: false,
+  _pointerInDblClickWindow: false,
+  _mouseDblClickPointerId: null,
+  _touchDblClickPointerId: null,
+  _pointerDblClickPointerId: null,
+  _renderBackend: 'web', // web, node-canvas, skia-canvas
+  /**
+   * Use legacy text rendering. with "middle" baseline by default.
+   * @property legacyTextRendering
+   * @default false
+   * @name legacyTextRendering
+   * @memberof Konva
+   * @example
+   * Konva.legacyTextRendering = true;
+   */
+  legacyTextRendering: false,
+
+  /**
+   * Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.
+   * But you may override such property, if you want to use your value. Set this value before any components initializations.
+   * @property pixelRatio
+   * @default undefined
+   * @name pixelRatio
+   * @memberof Konva
+   * @example
+   * // before any Konva code:
+   * Konva.pixelRatio = 1;
+   */
+  pixelRatio: (typeof window !== 'undefined' && window.devicePixelRatio) || 1,
+
+  /**
+   * Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point,
+   * only then start dragging. Default is 3px.
+   * @property dragDistance
+   * @default 0
+   * @memberof Konva
+   * @example
+   * Konva.dragDistance = 10;
+   */
+  dragDistance: 3,
+  /**
+   * Use degree values for angle properties. You may set this property to false if you want to use radian values.
+   * @property angleDeg
+   * @default true
+   * @memberof Konva
+   * @example
+   * node.rotation(45); // 45 degrees
+   * Konva.angleDeg = false;
+   * node.rotation(Math.PI / 2); // PI/2 radian
+   */
+  angleDeg: true,
+  /**
+   * Show different warnings about errors or wrong API usage
+   * @property showWarnings
+   * @default true
+   * @memberof Konva
+   * @example
+   * Konva.showWarnings = false;
+   */
+  showWarnings: true,
+
+  /**
+   * Configure what mouse buttons can be used for drag and drop.
+   * Default value is [0] - only left mouse button.
+   * @property dragButtons
+   * @default true
+   * @memberof Konva
+   * @example
+   * // enable left and right mouse buttons
+   * Konva.dragButtons = [0, 2];
+   */
+  dragButtons: [0, 1],
+
+  /**
+   * returns whether or not drag and drop is currently active
+   * @method
+   * @memberof Konva
+   */
+  isDragging(): boolean {
+    return Konva['DD'].isDragging;
+  },
+  isTransforming(): boolean {
+    return Konva['Transformer']?.isTransforming() ?? false;
+  },
+  /**
+   * returns whether or not a drag and drop operation is ready, but may
+   *  not necessarily have started
+   * @method
+   * @memberof Konva
+   */
+  isDragReady() {
+    return !!Konva['DD'].node;
+  },
+  /**
+   * Should Konva release canvas elements on destroy. Default is true.
+   * Useful to avoid memory leak issues in Safari on macOS/iOS.
+   * @property releaseCanvasOnDestroy
+   * @default true
+   * @name releaseCanvasOnDestroy
+   * @memberof Konva
+   * @example
+   * Konva.releaseCanvasOnDestroy = true;
+   */
+  releaseCanvasOnDestroy: true,
+  // user agent
+  document: glob.document,
+  // insert Konva into global namespace (window)
+  // it is required for npm packages
+  _injectGlobal(Konva) {
+    if (typeof glob.Konva !== 'undefined') {
+      console.error(
+        'Severa Konva instances detected. It is not recommended to use multiple Konva instances in the same environment.'
+      );
+    }
+    glob.Konva = Konva;
+  },
+};
+
+export const _registerNode = (NodeClass: any) => {
+  Konva[NodeClass.prototype.getClassName()] = NodeClass;
+};
+
+Konva._injectGlobal(Konva);

package/debug/konva/src/Group.ts

@@ -0,0 +1,31 @@
+import { Util } from './Util.ts';
+import type { ContainerConfig } from './Container.ts';
+import { Container } from './Container.ts';
+import { _registerNode } from './Global.ts';
+import type { Node } from './Node.ts';
+import type { Shape } from './Shape.ts';
+
+export interface GroupConfig extends ContainerConfig {}
+
+/**
+ * Group constructor.  Groups are used to contain shapes or other groups.
+ * @constructor
+ * @memberof Konva
+ * @augments Konva.Container
+ * @param {Object} config
+ * @@nodeParams
+ * @@containerParams
+ * @example
+ * var group = new Konva.Group();
+ */
+export class Group extends Container<Group | Shape> {
+  _validateAdd(child: Node) {
+    const type = child.getType();
+    if (type !== 'Group' && type !== 'Shape') {
+      Util.throw('You may only add groups and shapes to groups.');
+    }
+  }
+}
+
+Group.prototype.nodeType = 'Group';
+_registerNode(Group);