@nasser-sw/fabric 7.0.0-beta1

package/src/canvas/CanvasOptions.ts

@@ -0,0 +1,278 @@
+import type { ModifierKey, TOptionalModifierKey } from '../EventTypeDefs';
+import type { TOptions } from '../typedefs';
+import type { StaticCanvasOptions } from './StaticCanvasOptions';
+
+export interface CanvasTransformOptions {
+  /**
+   * When true, objects can be transformed by one side (unproportionately)
+   * when dragged on the corners that normally would not do that.
+   * @type Boolean
+   * @since fabric 4.0 // changed name and default value
+   */
+  uniformScaling: boolean;
+
+  /**
+   * Indicates which key switches uniform scaling.
+   * values: 'altKey', 'shiftKey', 'ctrlKey'.
+   * If `null` or 'none' or any other string that is not a modifier key
+   * feature is disabled.
+   * totally wrong named. this sounds like `uniform scaling`
+   * if Canvas.uniformScaling is true, pressing this will set it to false
+   * and viceversa.
+   * @since 1.6.2
+   * @type ModifierKey
+   */
+  uniScaleKey: TOptionalModifierKey;
+
+  /**
+   * When true, objects use center point as the origin of scale transformation.
+   * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
+   * @since 1.3.4
+   * @type Boolean
+   */
+  centeredScaling: boolean;
+
+  /**
+   * When true, objects use center point as the origin of rotate transformation.
+   * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
+   * @since 1.3.4
+   * @type Boolean
+   */
+  centeredRotation: boolean;
+
+  /**
+   * Indicates which key enable centered Transform
+   * values: 'altKey', 'shiftKey', 'ctrlKey'.
+   * If `null` or 'none' or any other string that is not a modifier key
+   * feature is disabled feature disabled.
+   * @since 1.6.2
+   * @type ModifierKey
+   */
+  centeredKey: TOptionalModifierKey;
+
+  /**
+   * Indicates which key enable alternate action on corner
+   * values: 'altKey', 'shiftKey', 'ctrlKey'.
+   * If `null` or 'none' or any other string that is not a modifier key
+   * feature is disabled feature disabled.
+   * @since 1.6.2
+   * @type ModifierKey
+   */
+  altActionKey: TOptionalModifierKey;
+}
+
+export interface CanvasSelectionOptions {
+  /**
+   * Indicates whether group selection should be enabled
+   * @type Boolean
+   */
+  selection: boolean;
+
+  /**
+   * Indicates which key or keys enable multiple click selection
+   * Pass value as a string or array of strings
+   * values: 'altKey', 'shiftKey', 'ctrlKey'.
+   * If `null` or empty or containing any other string that is not a modifier key
+   * feature is disabled.
+   * @since 1.6.2
+   * @type ModifierKey|ModifierKey[]
+   */
+  selectionKey: TOptionalModifierKey | ModifierKey[];
+
+  /**
+   * Indicates which key enable alternative selection
+   * in case of a target overlapping with active object and we don't want to loose the
+   * active selection, we can press this modifier key and continue selecting the current
+   * selected object also when is covered by another or many valid targets for selection.
+   * values: 'altKey', 'shiftKey', 'ctrlKey'.
+   * For a series of reason that come from the general expectations on how
+   * things should work, this feature works only for preserveObjectStacking true.
+   * If `null` or 'none' or any other string that is not a modifier key
+   * feature is disabled.
+   * @since 1.6.5
+   * @type null|ModifierKey
+   */
+  altSelectionKey: TOptionalModifierKey;
+
+  /**
+   * Color of selection
+   * @type String
+   */
+  selectionColor: string;
+
+  /**
+   * Default dash array pattern
+   * If not empty the selection border is dashed
+   * @type Array
+   */
+  selectionDashArray: number[];
+
+  /**
+   * Color of the border of selection (usually slightly darker than color of selection itself)
+   * @type String
+   */
+  selectionBorderColor: string;
+
+  /**
+   * Width of a line used in object/group selection
+   * @type Number
+   */
+  selectionLineWidth: number;
+
+  /**
+   * Select only shapes that are fully contained in the dragged selection rectangle.
+   * @type Boolean
+   */
+  selectionFullyContained: boolean;
+}
+
+export interface CanvasCursorOptions {
+  /**
+   * Default cursor value used when hovering over an object on canvas
+   * @type CSSStyleDeclaration['cursor']
+   * @default move
+   */
+  hoverCursor: CSSStyleDeclaration['cursor'];
+
+  /**
+   * Default cursor value used when moving an object on canvas
+   * @type CSSStyleDeclaration['cursor']
+   * @default move
+   */
+  moveCursor: CSSStyleDeclaration['cursor'];
+
+  /**
+   * Default cursor value used for the entire canvas
+   * @type String
+   * @default default
+   */
+  defaultCursor: CSSStyleDeclaration['cursor'];
+
+  /**
+   * Cursor value used during free drawing
+   * @type String
+   * @default crosshair
+   */
+  freeDrawingCursor: CSSStyleDeclaration['cursor'];
+
+  /**
+   * Cursor value used for disabled elements ( corners with disabled action )
+   * @type String
+   * @since 2.0.0
+   * @default not-allowed
+   */
+  notAllowedCursor: CSSStyleDeclaration['cursor'];
+}
+
+export interface TargetFindOptions {
+  /**
+   * When true, object detection happens on per-pixel basis rather than on per-bounding-box
+   * @type Boolean
+   */
+  perPixelTargetFind: boolean;
+
+  /**
+   * Number of pixels around target pixel to tolerate (consider active) during object detection
+   * @type Number
+   */
+  targetFindTolerance: number;
+
+  /**
+   * When true, target detection is skipped. Target detection will return always undefined.
+   * click selection won't work anymore, events will fire with no targets.
+   * if something is selected before setting it to true, it will be deselected at the first click.
+   * area selection will still work. check the `selection` property too.
+   * if you deactivate both, you should look into staticCanvas.
+   * @type Boolean
+   */
+  skipTargetFind: boolean;
+}
+
+export interface CanvasEventsOptions {
+  /**
+   * Indicates if the right click on canvas can output the context menu or not
+   * @type Boolean
+   * @since 1.6.5
+   */
+  stopContextMenu: boolean;
+
+  /**
+   * Indicates if the canvas can fire right click events
+   * @type Boolean
+   * @since 1.6.5
+   */
+  fireRightClick: boolean;
+
+  /**
+   * Indicates if the canvas can fire middle click events
+   * @type Boolean
+   * @since 1.7.8
+   */
+  fireMiddleClick: boolean;
+
+  /**
+   * When the option is enabled, PointerEvent is used instead of TPointerEvent.
+   * @type Boolean
+   */
+  enablePointerEvents: boolean;
+}
+
+export interface CanvasOptions
+  extends StaticCanvasOptions,
+    CanvasTransformOptions,
+    CanvasSelectionOptions,
+    CanvasCursorOptions,
+    TargetFindOptions,
+    CanvasEventsOptions {
+  /**
+   * Default element class that's given to wrapper (div) element of canvas
+   * @type String
+   * @deprecated customize {@link CanvasDOMManager} instead or access {@link elements} directly
+   */
+  containerClass: string;
+
+  /**
+   * Indicates whether objects should remain in current stack position when selected.
+   * When false objects are brought to top and rendered as part of the selection group
+   * @type Boolean
+   * @default true
+   */
+  preserveObjectStacking: boolean;
+}
+
+export type TCanvasOptions = TOptions<CanvasOptions>;
+
+export const canvasDefaults: TOptions<CanvasOptions> = {
+  uniformScaling: true,
+  uniScaleKey: 'shiftKey',
+  centeredScaling: false,
+  centeredRotation: false,
+  centeredKey: 'altKey',
+  altActionKey: 'shiftKey',
+
+  selection: true,
+  selectionKey: 'shiftKey',
+  selectionColor: 'rgba(100, 100, 255, 0.3)',
+  selectionDashArray: [],
+  selectionBorderColor: 'rgba(255, 255, 255, 0.3)',
+  selectionLineWidth: 1,
+  selectionFullyContained: false,
+
+  hoverCursor: 'move',
+  moveCursor: 'move',
+  defaultCursor: 'default',
+  freeDrawingCursor: 'crosshair',
+  notAllowedCursor: 'not-allowed',
+
+  perPixelTargetFind: false,
+  targetFindTolerance: 0,
+  skipTargetFind: false,
+
+  stopContextMenu: false,
+  fireRightClick: false,
+  fireMiddleClick: false,
+  enablePointerEvents: false,
+
+  containerClass: 'canvas-container',
+  preserveObjectStacking: true,
+};

package/src/canvas/DOMManagers/CanvasDOMManager.ts

@@ -0,0 +1,129 @@
+import { getEnv, getFabricDocument } from '../../env';
+import type { TSize } from '../../typedefs';
+import { createCanvasElement } from '../../util/misc/dom';
+import { setStyle } from '../../util/internals/dom_style';
+import type { CSSDimensions } from './util';
+import { makeElementUnselectable, setCSSDimensions } from './util';
+import type { CanvasItem } from './StaticCanvasDOMManager';
+import { StaticCanvasDOMManager } from './StaticCanvasDOMManager';
+import { setCanvasDimensions } from './util';
+import { NONE } from '../../constants';
+
+export class CanvasDOMManager extends StaticCanvasDOMManager {
+  upper: CanvasItem;
+  container: HTMLDivElement;
+
+  constructor(
+    arg0?: string | HTMLCanvasElement,
+    {
+      allowTouchScrolling = false,
+      containerClass = '',
+    }: {
+      allowTouchScrolling?: boolean;
+      /**
+       * @deprecated here only for backward compatibility
+       */
+      containerClass?: string;
+    } = {},
+  ) {
+    super(arg0);
+    const { el: lowerCanvasEl } = this.lower;
+    const upperCanvasEl = this.createUpperCanvas();
+    this.upper = { el: upperCanvasEl, ctx: upperCanvasEl.getContext('2d')! };
+    this.applyCanvasStyle(lowerCanvasEl, {
+      allowTouchScrolling,
+    });
+    this.applyCanvasStyle(upperCanvasEl, {
+      allowTouchScrolling,
+      styles: {
+        position: 'absolute',
+        left: '0',
+        top: '0',
+      },
+    });
+    const container = this.createContainerElement();
+    container.classList.add(containerClass);
+    if (lowerCanvasEl.parentNode) {
+      lowerCanvasEl.parentNode.replaceChild(container, lowerCanvasEl);
+    }
+    container.append(lowerCanvasEl, upperCanvasEl);
+    this.container = container;
+  }
+
+  protected createUpperCanvas() {
+    const { el: lowerCanvasEl } = this.lower;
+    const el = createCanvasElement();
+    // we assign the same classname of the lowerCanvas
+    el.className = lowerCanvasEl.className;
+    // but then we remove the lower-canvas specific className
+    el.classList.remove('lower-canvas');
+    // we add the specific upper-canvas class
+    el.classList.add('upper-canvas');
+    el.setAttribute('data-fabric', 'top');
+    el.style.cssText = lowerCanvasEl.style.cssText;
+    el.setAttribute('draggable', 'true');
+    return el;
+  }
+
+  protected createContainerElement() {
+    const container = getFabricDocument().createElement('div');
+    container.setAttribute('data-fabric', 'wrapper');
+    setStyle(container, {
+      position: 'relative',
+    });
+    makeElementUnselectable(container);
+    return container;
+  }
+
+  /**
+   * @private
+   * @param {HTMLCanvasElement} element canvas element to apply styles on
+   */
+  protected applyCanvasStyle(
+    element: HTMLCanvasElement,
+    options: {
+      allowTouchScrolling?: boolean;
+      styles?: Record<string, string>;
+    },
+  ) {
+    const { styles, allowTouchScrolling } = options;
+    setStyle(element, {
+      ...styles,
+      'touch-action': allowTouchScrolling ? 'manipulation' : NONE,
+    });
+    makeElementUnselectable(element);
+  }
+
+  setDimensions(size: TSize, retinaScaling: number) {
+    super.setDimensions(size, retinaScaling);
+    const { el, ctx } = this.upper;
+    setCanvasDimensions(el, ctx, size, retinaScaling);
+  }
+
+  setCSSDimensions(size: Partial<CSSDimensions>): void {
+    super.setCSSDimensions(size);
+    setCSSDimensions(this.upper.el, size);
+    setCSSDimensions(this.container, size);
+  }
+
+  cleanupDOM(size: TSize) {
+    const container = this.container,
+      { el: lowerCanvasEl } = this.lower,
+      { el: upperCanvasEl } = this.upper;
+    super.cleanupDOM(size);
+    container.removeChild(upperCanvasEl);
+    container.removeChild(lowerCanvasEl);
+    if (container.parentNode) {
+      container.parentNode.replaceChild(lowerCanvasEl, container);
+    }
+  }
+
+  dispose() {
+    super.dispose();
+    getEnv().dispose(this.upper.el);
+    // @ts-expect-error disposing
+    delete this.upper;
+    // @ts-expect-error disposing
+    delete this.container;
+  }
+}

package/src/canvas/DOMManagers/StaticCanvasDOMManager.ts

@@ -0,0 +1,80 @@
+import { getEnv, getFabricDocument } from '../../env';
+import type { TSize } from '../../typedefs';
+import type { CSSDimensions } from './util';
+import { setCSSDimensions, getElementOffset } from './util';
+import { createCanvasElement, isHTMLCanvas } from '../../util/misc/dom';
+import { setCanvasDimensions } from './util';
+import { FabricError } from '../../util/internals/console';
+
+export type CanvasItem = {
+  el: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D;
+};
+
+export class StaticCanvasDOMManager {
+  /**
+   * Keeps a copy of the canvas style before setting retina scaling and other potions
+   * in order to return it to original state on dispose
+   * @type string
+   */
+  private _originalCanvasStyle?: string;
+
+  lower: CanvasItem;
+
+  constructor(arg0?: string | HTMLCanvasElement) {
+    const el = this.createLowerCanvas(arg0);
+    this.lower = { el, ctx: el.getContext('2d')! };
+  }
+
+  protected createLowerCanvas(arg0?: HTMLCanvasElement | string) {
+    // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node
+    const el = isHTMLCanvas(arg0)
+      ? arg0
+      : (arg0 &&
+          (getFabricDocument().getElementById(arg0) as HTMLCanvasElement)) ||
+        createCanvasElement();
+    if (el.hasAttribute('data-fabric')) {
+      throw new FabricError(
+        'Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?',
+      );
+    }
+    this._originalCanvasStyle = el.style.cssText;
+    el.setAttribute('data-fabric', 'main');
+    el.classList.add('lower-canvas');
+    return el;
+  }
+
+  cleanupDOM({ width, height }: TSize) {
+    const { el } = this.lower;
+    // restore canvas style and attributes
+    el.classList.remove('lower-canvas');
+    el.removeAttribute('data-fabric');
+    // restore canvas size to original size in case retina scaling was applied
+    el.setAttribute('width', `${width}`);
+    el.setAttribute('height', `${height}`);
+    el.style.cssText = this._originalCanvasStyle || '';
+    this._originalCanvasStyle = undefined;
+  }
+
+  setDimensions(size: TSize, retinaScaling: number) {
+    const { el, ctx } = this.lower;
+    setCanvasDimensions(el, ctx, size, retinaScaling);
+  }
+
+  setCSSDimensions(size: Partial<CSSDimensions>) {
+    setCSSDimensions(this.lower.el, size);
+  }
+
+  /**
+   * Calculates canvas element offset relative to the document
+   */
+  calcOffset() {
+    return getElementOffset(this.lower.el);
+  }
+
+  dispose() {
+    getEnv().dispose(this.lower.el);
+    // @ts-expect-error disposing
+    delete this.lower;
+  }
+}

package/src/canvas/DOMManagers/util.spec.ts

@@ -0,0 +1,28 @@
+import { makeElementUnselectable } from './util';
+import { getFabricDocument } from '../../env';
+import { NONE } from '../../constants';
+
+import { describe, expect, it } from 'vitest';
+
+describe('DOMManagers utils', () => {
+  describe('makeElementUnselectable', () => {
+    it('makes element not selectable', () => {
+      const el = getFabricDocument().createElement('p');
+      el.appendChild(getFabricDocument().createTextNode('foo'));
+      const returnedEl = makeElementUnselectable(el);
+      expect(returnedEl).toBe(el);
+      expect(el.style.userSelect).toBe(NONE);
+    });
+    it('replace onselectstart if exists', () => {
+      const el = getFabricDocument().createElement('p');
+      el.appendChild(getFabricDocument().createTextNode('foo'));
+      el.onselectstart = () => 'fail';
+      expect(el.onselectstart({} as Event)).toBe('fail');
+      makeElementUnselectable(el);
+      expect(el.onselectstart).toBeTruthy();
+      if (el.onselectstart) {
+        expect(el.onselectstart({} as Event)).toBe(false);
+      }
+    });
+  });
+});

package/src/canvas/DOMManagers/util.ts

@@ -0,0 +1,85 @@
+import { NONE } from '../../constants';
+import type { TSize } from '../../typedefs';
+import {
+  getDocumentFromElement,
+  getWindowFromElement,
+  getScrollLeftTop,
+} from '../../util/dom_misc';
+
+export const setCanvasDimensions = (
+  el: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+  { width, height }: TSize,
+  retinaScaling = 1,
+) => {
+  el.width = width;
+  el.height = height;
+  if (retinaScaling > 1) {
+    el.setAttribute('width', (width * retinaScaling).toString());
+    el.setAttribute('height', (height * retinaScaling).toString());
+    ctx.scale(retinaScaling, retinaScaling);
+  }
+};
+
+export type CSSDimensions = {
+  width: number | string;
+  height: number | string;
+};
+
+export const setCSSDimensions = (
+  el: HTMLElement,
+  { width, height }: Partial<CSSDimensions>,
+) => {
+  width && (el.style.width = typeof width === 'number' ? `${width}px` : width);
+  height &&
+    (el.style.height = typeof height === 'number' ? `${height}px` : height);
+};
+
+/**
+ * Returns offset for a given element
+ * @param {HTMLElement} element Element to get offset for
+ * @return {Object} Object with "left" and "top" properties
+ */
+export function getElementOffset(element: HTMLElement) {
+  const doc = element && getDocumentFromElement(element),
+    offset = { left: 0, top: 0 };
+
+  if (!doc) {
+    return offset;
+  }
+  const elemStyle: CSSStyleDeclaration =
+    getWindowFromElement(element)?.getComputedStyle(element, null) ||
+    ({} as CSSStyleDeclaration);
+  offset.left += parseInt(elemStyle.borderLeftWidth, 10) || 0;
+  offset.top += parseInt(elemStyle.borderTopWidth, 10) || 0;
+  offset.left += parseInt(elemStyle.paddingLeft, 10) || 0;
+  offset.top += parseInt(elemStyle.paddingTop, 10) || 0;
+
+  let box = { left: 0, top: 0 };
+
+  const docElem = doc.documentElement;
+  if (typeof element.getBoundingClientRect !== 'undefined') {
+    box = element.getBoundingClientRect();
+  }
+
+  const scrollLeftTop = getScrollLeftTop(element);
+
+  return {
+    left:
+      box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,
+    top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top,
+  };
+}
+
+/**
+ * Makes element unselectable
+ * @param {HTMLElement} element Element to make unselectable
+ * @return {HTMLElement} Element that was passed in
+ */
+export function makeElementUnselectable(element: HTMLElement) {
+  if (typeof element.onselectstart !== 'undefined') {
+    element.onselectstart = () => false;
+  }
+  element.style.userSelect = NONE;
+  return element;
+}