fabric 7.4.0 → 7.5.0-beta.1

package/src/parser/percent.ts

@@ -1,31 +0,0 @@
-import { ifNaN } from '../util/internals/ifNaN';
-import { capValue } from '../util/misc/capValue';
-
-/**
- * Will loosely accept as percent numbers that are not like
- * 3.4a%. This function does not check for the correctness of a percentage
- * but it checks that values that are in theory correct are or arent percentages
- */
-export function isPercent(value: string | null) {
-  // /%$/ Matches strings that end with a percent sign (%)
-  return value && /%$/.test(value) && Number.isFinite(parseFloat(value));
-}
-
-/**
- * Parse a percentage value in an svg.
- * @param value
- * @param fallback in case of not possible to parse the number
- * @returns ∈ [0, 1]
- */
-export function parsePercent(
-  value: string | number | null | undefined,
-  valueIfNaN?: number,
-): number {
-  const parsed =
-    typeof value === 'number'
-      ? value
-      : typeof value === 'string'
-        ? parseFloat(value) / (isPercent(value) ? 100 : 1)
-        : NaN;
-  return capValue(0, ifNaN(parsed, valueIfNaN), 1);
-}

package/src/parser/recursivelyParseGradientsXlink.ts

@@ -1,40 +0,0 @@
-const gradientsAttrs = [
-  'gradientTransform',
-  'x1',
-  'x2',
-  'y1',
-  'y2',
-  'gradientUnits',
-  'cx',
-  'cy',
-  'r',
-  'fx',
-  'fy',
-];
-const xlinkAttr = 'xlink:href';
-
-export function recursivelyParseGradientsXlink(
-  doc: Document,
-  gradient: Element,
-) {
-  const xLink = gradient.getAttribute(xlinkAttr)?.slice(1) || '',
-    referencedGradient = doc.getElementById(xLink);
-  if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) {
-    recursivelyParseGradientsXlink(doc, referencedGradient as Element);
-  }
-  if (referencedGradient) {
-    gradientsAttrs.forEach((attr) => {
-      const value = referencedGradient.getAttribute(attr);
-      if (!gradient.hasAttribute(attr) && value) {
-        gradient.setAttribute(attr, value);
-      }
-    });
-    if (!gradient.children.length) {
-      const referenceClone = referencedGradient.cloneNode(true);
-      while (referenceClone.firstChild) {
-        gradient.appendChild(referenceClone.firstChild);
-      }
-    }
-  }
-  gradient.removeAttribute(xlinkAttr);
-}

package/src/parser/selectorMatches.ts

@@ -1,26 +0,0 @@
-export function selectorMatches(
-  element: HTMLElement | SVGElement,
-  selector: string,
-) {
-  const nodeName = element.nodeName;
-  const classNames = element.getAttribute('class');
-  const id = element.getAttribute('id');
-  const azAz = '(?![a-zA-Z\\-]+)';
-  let matcher;
-  // i check if a selector matches slicing away part from it.
-  // if i get empty string i should match
-  matcher = new RegExp('^' + nodeName, 'i');
-  selector = selector.replace(matcher, '');
-  if (id && selector.length) {
-    matcher = new RegExp('#' + id + azAz, 'i');
-    selector = selector.replace(matcher, '');
-  }
-  if (classNames && selector.length) {
-    const splitClassNames = classNames.split(' ');
-    for (let i = splitClassNames.length; i--; ) {
-      matcher = new RegExp('\\.' + splitClassNames[i] + azAz, 'i');
-      selector = selector.replace(matcher, '');
-    }
-  }
-  return selector.length === 0;
-}

package/src/parser/setStrokeFillOpacity.ts

@@ -1,41 +0,0 @@
-import { Color } from '../color/Color';
-import { toFixed } from '../util/misc/toFixed';
-import { FabricObject } from '../shapes/Object/FabricObject';
-
-const colorAttributesMap = {
-  stroke: 'strokeOpacity',
-  fill: 'fillOpacity',
-};
-
-/**
- * @private
- * @param {Object} attributes Array of attributes to parse
- */
-
-export function setStrokeFillOpacity(
-  attributes: Record<string, any>,
-): Record<string, any> {
-  const defaults = FabricObject.getDefaults();
-  Object.entries(colorAttributesMap).forEach(([attr, colorAttr]) => {
-    if (
-      typeof attributes[colorAttr] === 'undefined' ||
-      attributes[attr] === ''
-    ) {
-      return;
-    }
-    if (typeof attributes[attr] === 'undefined') {
-      if (!defaults[attr]) {
-        return;
-      }
-      attributes[attr] = defaults[attr];
-    }
-    if (attributes[attr].indexOf('url(') === 0) {
-      return;
-    }
-    const color = new Color(attributes[attr]);
-    attributes[attr] = color
-      .setAlpha(toFixed(color.getAlpha() * attributes[colorAttr], 2))
-      .toRgba();
-  });
-  return attributes;
-}

package/src/parser/typedefs.ts

@@ -1,15 +0,0 @@
-import type { FabricObject } from '../shapes/Object/FabricObject';
-
-export type SVGParsingOutput = {
-  objects: (FabricObject | null)[];
-  options: Record<string, any>;
-  elements: Element[];
-  allElements: Element[];
-};
-
-export type TSvgReviverCallback = (
-  element: Element,
-  fabricObject: FabricObject,
-) => void;
-
-export type CSSRules = Record<string, Record<string, string>>;

package/src/shapes/ActiveSelection.spec.ts

@@ -1,374 +0,0 @@
-import { FitContentLayout } from '../LayoutManager';
-import { Canvas } from '../canvas/Canvas';
-import { ActiveSelection } from './ActiveSelection';
-import { Group } from './Group';
-import { FabricObject } from './Object/FabricObject';
-
-import { afterEach, describe, expect, it, test, vi } from 'vitest';
-import { Rect } from './Rect';
-import { version } from '../../package.json';
-import { makeRects } from '../../test/utils';
-
-describe('ActiveSelection', () => {
-  const canvas = new Canvas(undefined, {
-    enableRetinaScaling: false,
-    width: 600,
-    height: 600,
-  });
-
-  afterEach(() => {
-    canvas.clear();
-    canvas.backgroundColor = Canvas.getDefaults().backgroundColor;
-    canvas.calcOffset();
-  });
-
-  it('constructor', function () {
-    const group = makeAsWith2Objects();
-
-    expect(group).toBeTruthy();
-    expect(
-      group,
-      'should be instance of fabric.ActiveSelection',
-    ).toBeInstanceOf(ActiveSelection);
-    expect(group.item(0).parent, 'parent ref is undefined').toBeUndefined();
-  });
-
-  it('toString', () => {
-    const group = makeAsWith2Objects();
-    expect(group.toString(), 'should return proper representation').toBe(
-      '#<ActiveSelection: (2)>',
-    );
-  });
-
-  it('toObject', () => {
-    const group = makeAsWith2Objects();
-    expect(group.toObject).toBeTypeOf('function');
-
-    const clone = group.toObject();
-    const expectedObject = {
-      version: version,
-      type: 'ActiveSelection',
-      originX: 'center',
-      originY: 'center',
-      left: 90,
-      top: 130,
-      width: 80,
-      height: 60,
-      fill: 'rgb(0,0,0)',
-      // layout: 'fit-content',
-      stroke: null,
-      strokeWidth: 0,
-      strokeDashArray: null,
-      strokeLineCap: 'butt',
-      strokeDashOffset: 0,
-      strokeLineJoin: 'miter',
-      strokeMiterLimit: 4,
-      scaleX: 1,
-      scaleY: 1,
-      shadow: null,
-      subTargetCheck: false,
-      interactive: false,
-      visible: true,
-      backgroundColor: '',
-      angle: 0,
-      flipX: false,
-      flipY: false,
-      opacity: 1,
-      fillRule: 'nonzero',
-      paintFirst: 'fill',
-      globalCompositeOperation: 'source-over',
-      skewX: 0,
-      skewY: 0,
-      strokeUniform: false,
-      objects: clone.objects,
-      layoutManager: {
-        type: 'layoutManager',
-        strategy: 'fit-content',
-      },
-    };
-
-    expect(clone).toEqual(expectedObject);
-
-    expect(group, 'should produce different object').not.toBe(clone);
-    expect(
-      group.getObjects(),
-      'should produce different object array',
-    ).not.toBe(clone.objects);
-    expect(
-      group.getObjects()[0],
-      'should produce different objects in array',
-    ).not.toBe(clone.objects[0]);
-  });
-
-  it('toObject without default values', () => {
-    const group = makeAsWith2Objects();
-    group.includeDefaultValues = false;
-
-    const clone = group.toObject();
-    const objects = [
-      {
-        version: version,
-        type: 'Rect',
-        left: 25,
-        top: -25,
-        width: 30,
-        height: 10,
-        strokeWidth: 0,
-      },
-      {
-        version: version,
-        type: 'Rect',
-        left: -35,
-        top: 10,
-        width: 10,
-        height: 40,
-        strokeWidth: 0,
-      },
-    ];
-    const expectedObject = {
-      version: version,
-      type: 'ActiveSelection',
-      left: 90,
-      top: 130,
-      width: 80,
-      height: 60,
-      objects: objects,
-    };
-
-    expect(clone).toEqual(expectedObject);
-  });
-
-  it('_renderControls', () => {
-    expect(ActiveSelection.prototype._renderControls).toBeTypeOf('function');
-  });
-
-  test('fromObject', async () => {
-    const group = makeAsWith2ObjectsWithOpacity();
-
-    expect(ActiveSelection.fromObject).toBeTypeOf('function');
-    const groupObject = group.toObject();
-
-    const newGroupFromObject = await ActiveSelection.fromObject(groupObject);
-    const objectFromOldGroup = group.toObject();
-    const objectFromNewGroup = newGroupFromObject.toObject();
-
-    expect(newGroupFromObject).toBeInstanceOf(ActiveSelection);
-
-    expect(objectFromOldGroup.objects[0]).toEqual(
-      objectFromNewGroup.objects[0],
-    );
-    expect(objectFromOldGroup.objects[1]).toEqual(
-      objectFromNewGroup.objects[1],
-    );
-
-    expect(objectFromOldGroup).toEqual(objectFromNewGroup);
-  });
-
-  it('ActiveSelection shouldCache', () => {
-    const rect1 = new Rect({
-      top: 1,
-      left: 1,
-      width: 2,
-      height: 2,
-      strokeWidth: 0,
-      fill: 'red',
-      opacity: 1,
-      objectCaching: true,
-    });
-    const rect2 = new Rect({
-      top: 5,
-      left: 5,
-      width: 2,
-      height: 2,
-      strokeWidth: 0,
-      fill: 'red',
-      opacity: 1,
-      objectCaching: true,
-    });
-    const group = new ActiveSelection([rect1, rect2], { objectCaching: true });
-
-    expect(group.shouldCache(), 'Active selection do not cache').toBe(false);
-  });
-
-  it('canvas property propagation', () => {
-    const g2 = makeAsWith4Objects();
-
-    canvas.add(g2);
-    expect(g2.canvas).toBe(canvas);
-    expect(g2._objects[3].canvas).toBe(canvas);
-  });
-
-  it('should set the layoutManager in the constructor', () => {
-    const activeSelection = new ActiveSelection();
-    expect(activeSelection.layoutManager).toBeDefined();
-    expect(activeSelection.layoutManager?.strategy).toBeInstanceOf(
-      FitContentLayout,
-    );
-  });
-
-  it('deselect removes all objects', () => {
-    const selection = new ActiveSelection([], {
-      left: 200,
-      top: 100,
-      angle: 45,
-    });
-    const spy = vi.spyOn(selection, 'removeAll');
-    selection.onDeselect();
-    expect(spy).toHaveBeenCalled();
-    expect(selection).toMatchObject({
-      left: 200,
-      top: 100,
-      angle: 45,
-      scaleX: 1,
-      scaleY: 1,
-      skewX: 0,
-      skewY: 0,
-      flipX: false,
-      flipY: false,
-      _objects: [],
-    });
-    selection.add(new FabricObject({ left: 50, top: 50, strokeWidth: 0 }));
-    const { x, y } = selection.item(0).getCenterPoint();
-    expect({ x: Math.round(x), y: Math.round(y) }).toEqual({ x: 50, y: 50 });
-  });
-
-  it('should not set coords in the constructor', () => {
-    const spy = vi.spyOn(ActiveSelection.prototype, 'setCoords');
-    new ActiveSelection([
-      new FabricObject({
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100,
-      }),
-    ]);
-    expect(spy).not.toHaveBeenCalled();
-  });
-
-  it('`setActiveObject` should update the active selection ref on canvas if it changed', () => {
-    const canvas = new Canvas();
-    const obj1 = new FabricObject();
-    const obj2 = new FabricObject();
-    canvas.add(obj1, obj2);
-    const activeSelection = new ActiveSelection([obj1, obj2]);
-    const spy = vi.spyOn(activeSelection, 'setCoords');
-    canvas.setActiveObject(activeSelection);
-    expect(canvas.getActiveObject()).toBe(activeSelection);
-    expect(canvas.getActiveObjects()).toEqual([obj1, obj2]);
-    expect(spy).toHaveBeenCalled();
-    expect(activeSelection.canvas).toBe(canvas);
-
-    spy.mockClear();
-    canvas.setActiveObject(activeSelection);
-    expect(spy).not.toHaveBeenCalled();
-  });
-
-  test('adding and removing an object belonging to a group', () => {
-    const object = new FabricObject();
-    const group = new Group([object]);
-    const activeSelection = new ActiveSelection();
-
-    const eventsSpy = vi.spyOn(object, 'fire');
-    const removeSpy = vi.spyOn(group, 'remove');
-    const exitSpy = vi.spyOn(group, '_exitGroup');
-    const enterSpy = vi.spyOn(activeSelection, 'enterGroup');
-
-    expect(object.group).toBe(group);
-    expect(object.parent).toBe(group);
-    expect(object.canvas).toBeUndefined();
-
-    activeSelection.add(object);
-    expect(object.group).toBe(activeSelection);
-    expect(object.parent).toBe(group);
-    expect(removeSpy).not.toBeCalled();
-    expect(exitSpy).toBeCalledWith(object);
-    expect(enterSpy).toBeCalledWith(object, true);
-    expect(eventsSpy).toHaveBeenNthCalledWith(1, 'added', {
-      target: activeSelection,
-    });
-
-    activeSelection.remove(object);
-    expect(eventsSpy).toHaveBeenNthCalledWith(2, 'removed', {
-      target: activeSelection,
-    });
-    expect(object.group).toBe(group);
-    expect(object.parent).toBe(group);
-  });
-
-  test('transferring an object between active selections', () => {
-    const object = new FabricObject();
-    const group = new Group([object]);
-    const activeSelection1 = new ActiveSelection([object]);
-    const activeSelection2 = new ActiveSelection();
-    expect(object.group).toBe(activeSelection1);
-    expect(object.parent).toBe(group);
-
-    const eventsSpy = vi.spyOn(object, 'fire');
-    const removeSpy = vi.spyOn(activeSelection1, 'remove');
-
-    Object.entries({
-      object,
-      group,
-      activeSelection1,
-      activeSelection2,
-    }).forEach(([key, obj]) => vi.spyOn(obj, 'toJSON').mockReturnValue(key));
-
-    activeSelection2.add(object);
-    expect(object.group).toBe(activeSelection2);
-    expect(object.parent).toBe(group);
-    expect(removeSpy).toBeCalledWith(object);
-    expect(eventsSpy).toHaveBeenNthCalledWith(1, 'removed', {
-      target: activeSelection1,
-    });
-    expect(eventsSpy).toHaveBeenNthCalledWith(2, 'added', {
-      target: activeSelection2,
-    });
-
-    activeSelection2.removeAll();
-    expect(object.group).toBe(group);
-    expect(object.parent).toBe(group);
-    expect(eventsSpy).toHaveBeenNthCalledWith(3, 'removed', {
-      target: activeSelection2,
-    });
-    expect(eventsSpy).toBeCalledTimes(3);
-  });
-
-  it('should block descendants from entering selection', () => {
-    const object = new FabricObject();
-    const group = new Group([object]);
-    const activeSelection = new ActiveSelection([group]);
-    const spy = vi.spyOn(activeSelection, 'canEnterGroup');
-    activeSelection.add(object);
-    expect(activeSelection.getObjects()).toEqual([group]);
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveNthReturnedWith(1, false);
-  });
-
-  it('should block ancestors from entering selection', () => {
-    const object = new FabricObject();
-    const group = new Group([object]);
-    const activeSelection = new ActiveSelection([object]);
-    const spy = vi.spyOn(activeSelection, 'canEnterGroup');
-    activeSelection.add(group);
-    expect(activeSelection.getObjects()).toEqual([object]);
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveNthReturnedWith(1, false);
-  });
-});
-
-function makeAsWith2Objects() {
-  return new ActiveSelection(makeRects(2, { strokeWidth: 0 }), {
-    strokeWidth: 0,
-  });
-}
-
-function makeAsWith4Objects() {
-  return new ActiveSelection(makeRects(4));
-}
-
-function makeAsWith2ObjectsWithOpacity() {
-  const [rect1, rect2] = makeRects(2, { strokeWidth: 0 });
-  rect1.opacity = 0.5;
-  rect2.opacity = 0.8;
-  return new ActiveSelection([rect1, rect2], { strokeWidth: 0 });
-}