fabric/src/canvas/StaticCanvas.fixtures.ts

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

import { VERSION as version } from '../constants';
import { type FabricImage } from '../shapes/Image';
import { isJSDOM } from '../../vitest.extend';
import TEST_IMAGE_GIF from '../../test/fixtures/test_image.gif';

export const CANVAS_SVG =
  '<?xml version="1.0" encoding="UTF-8" standalone="no" ?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
  '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">\n<desc>Created with Fabric.js ' +
  version +
  '</desc>\n<defs>\n</defs>\n</svg>';

export const CANVAS_SVG_VIEWBOX =
  '<?xml version="1.0" encoding="UTF-8" standalone="no" ?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
  '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200" viewBox="100 100 300 300" xml:space="preserve">\n<desc>Created with Fabric.js ' +
  version +
  '</desc>\n<defs>\n</defs>\n</svg>';

export const RECT_JSON = {
  version: version,
  objects: [
    {
      type: 'Rect',
      version: version,
      originX: 'center',
      originY: 'center',
      left: 0,
      top: 0,
      width: 10,
      height: 10,
      fill: 'rgb(0,0,0)',
      stroke: null,
      strokeWidth: 1,
      strokeDashArray: null,
      strokeLineCap: 'butt',
      strokeDashOffset: 0,
      strokeLineJoin: 'miter',
      strokeUniform: false,
      strokeMiterLimit: 4,
      scaleX: 1,
      scaleY: 1,
      angle: 0,
      flipX: false,
      flipY: false,
      opacity: 1,
      shadow: null,
      visible: true,
      backgroundColor: '',
      fillRule: 'nonzero',
      paintFirst: 'fill',
      globalCompositeOperation: 'source-over',
      skewX: 0,
      skewY: 0,
      rx: 0,
      ry: 0,
    },
  ],
  background: '#ff5555',
  overlay: 'rgba(0,0,0,0.2)',
};

export const PATH_DATALESS_JSON = {
  version: version,
  objects: [
    {
      type: 'Path',
      version: version,
      originX: 'center',
      originY: 'center',
      left: 200,
      top: 200,
      width: 200,
      height: 200,
      fill: 'rgb(0,0,0)',
      stroke: null,
      strokeWidth: 1,
      strokeDashArray: null,
      strokeLineCap: 'butt',
      strokeDashOffset: 0,
      strokeLineJoin: 'miter',
      strokeUniform: false,
      strokeMiterLimit: 4,
      scaleX: 1,
      scaleY: 1,
      angle: 0,
      flipX: false,
      flipY: false,
      opacity: 1,
      shadow: null,
      visible: true,
      backgroundColor: '',
      fillRule: 'nonzero',
      paintFirst: 'fill',
      globalCompositeOperation: 'source-over',
      skewX: 0,
      skewY: 0,
      sourcePath: 'http://example.com/',
    },
  ],
};

export const PATH_JSON = {
  version: version,
  objects: [
    {
      type: 'path',
      version: version,
      originX: 'center',
      originY: 'center',
      left: 268,
      top: 266,
      width: 51,
      height: 49,
      fill: 'rgb(0,0,0)',
      stroke: null,
      strokeWidth: 1,
      scaleX: 1,
      scaleY: 1,
      angle: 0,
      flipX: false,
      flipY: false,
      opacity: 1,
      path: [
        ['M', 18.511, 13.99],
        ['c', 0, 0, -2.269, -4.487, -12.643, 4.411],
        ['c', 0, 0, 4.824, -14.161, 19.222, -9.059],
        ['l', 0.379, -2.1],
        ['c', -0.759, -0.405, -1.375, -1.139, -1.645, -2.117],
        ['c', -0.531, -1.864, 0.371, -3.854, 1.999, -4.453],
        ['c', 0.312, -0.118, 0.633, -0.169, 0.953, -0.169],
        ['c', 1.299, 0, 2.514, 0.953, 2.936, 2.455],
        ['c', 0.522, 1.864, -0.372, 3.854, -1.999, 4.453],
        ['c', -0.229, 0.084, -0.464, 0.127, -0.692, 0.152],
        ['l', -0.379, 2.37],
        ['c', 1.146, 0.625, 2.024, 1.569, 2.674, 2.758],
        ['c', 3.213, 2.514, 8.561, 4.184, 11.774, -8.232],
        ['c', 0, 0, 0.86, 16.059, -12.424, 14.533],
        ['c', 0.008, 2.859, 0.615, 5.364, -0.076, 8.224],
        ['c', 8.679, 3.146, 15.376, 14.389, 17.897, 18.168],
        ['l', 2.497, -2.151],
        ['l', 1.206, 1.839],
        ['l', -3.889, 3.458],
        ['C', 46.286, 48.503, 31.036, 32.225, 22.72, 35.81],
        ['c', -1.307, 2.851, -3.56, 6.891, -7.481, 8.848],
        ['c', -4.689, 2.336, -9.084, -0.802, -11.277, -2.868],
        ['l', -1.948, 3.104],
        ['l', -1.628, -1.333],
        ['l', 3.138, -4.689],
        ['c', 0.025, 0, 9, 1.932, 9, 1.932],
        ['c', 0.877, -9.979, 2.893, -12.905, 4.942, -15.621],
        ['C', 17.878, 21.775, 18.713, 17.397, 18.511, 13.99],
        ['z'],
      ],
    },
  ],
  background: '#ff5555',
  overlay: 'rgba(0,0,0,0.2)',
};

export const PATH_WITHOUT_DEFAULTS_JSON = {
  version: version,
  objects: [
    {
      type: 'path',
      version: version,
      left: 268,
      top: 266,
      width: 51,
      height: 49,
      path: [
        ['M', 18.511, 13.99],
        ['c', 0, 0, -2.269, -4.487, -12.643, 4.411],
        ['c', 0, 0, 4.824, -14.161, 19.222, -9.059],
        ['l', 0.379, -2.1],
        ['c', -0.759, -0.405, -1.375, -1.139, -1.645, -2.117],
        ['c', -0.531, -1.864, 0.371, -3.854, 1.999, -4.453],
        ['c', 0.312, -0.118, 0.633, -0.169, 0.953, -0.169],
        ['c', 1.299, 0, 2.514, 0.953, 2.936, 2.455],
        ['c', 0.522, 1.864, -0.372, 3.854, -1.999, 4.453],
        ['c', -0.229, 0.084, -0.464, 0.127, -0.692, 0.152],
        ['l', -0.379, 2.37],
        ['c', 1.146, 0.625, 2.024, 1.569, 2.674, 2.758],
        ['c', 3.213, 2.514, 8.561, 4.184, 11.774, -8.232],
        ['c', 0, 0, 0.86, 16.059, -12.424, 14.533],
        ['c', 0.008, 2.859, 0.615, 5.364, -0.076, 8.224],
        ['c', 8.679, 3.146, 15.376, 14.389, 17.897, 18.168],
        ['l', 2.497, -2.151],
        ['l', 1.206, 1.839],
        ['l', -3.889, 3.458],
        ['C', 46.286, 48.503, 31.036, 32.225, 22.72, 35.81],
        ['c', -1.307, 2.851, -3.56, 6.891, -7.481, 8.848],
        ['c', -4.689, 2.336, -9.084, -0.802, -11.277, -2.868],
        ['l', -1.948, 3.104],
        ['l', -1.628, -1.333],
        ['l', 3.138, -4.689],
        ['c', 0.025, 0, 9, 1.932, 9, 1.932],
        ['c', 0.877, -9.979, 2.893, -12.905, 4.942, -15.621],
        ['C', 17.878, 21.775, 18.713, 17.397, 18.511, 13.99],
        ['z'],
      ],
    },
  ],
  background: '#ff5555',
  overlay: 'rgba(0,0,0,0.2)',
};

export const RECT_JSON_WITH_PADDING = {
  version: version,
  objects: [
    {
      type: 'Rect',
      version: version,
      originX: 'center',
      originY: 'center',
      left: 0,
      top: 0,
      width: 10,
      height: 20,
      fill: 'rgb(0,0,0)',
      stroke: null,
      strokeWidth: 1,
      strokeDashArray: null,
      strokeLineCap: 'butt',
      strokeDashOffset: 0,
      strokeLineJoin: 'miter',
      strokeUniform: false,
      strokeMiterLimit: 4,
      scaleX: 1,
      scaleY: 1,
      angle: 0,
      flipX: false,
      flipY: false,
      opacity: 1,
      shadow: null,
      visible: true,
      backgroundColor: '',
      fillRule: 'nonzero',
      paintFirst: 'fill',
      globalCompositeOperation: 'source-over',
      skewX: 0,
      skewY: 0,
      rx: 0,
      ry: 0,
      padding: 123,
      foo: 'bar',
    },
  ],
};

export const IMG_SRC = isJSDOM() ? 'test_image.gif' : TEST_IMAGE_GIF;
export const IMG_WIDTH = 276;
export const IMG_HEIGHT = 110;

export const REFERENCE_IMG_OBJECT: Partial<
  FabricImage & { version: string; src: string; crossOrigin: null }
> = {
  version: version,
  type: 'Image',
  originX: 'center',
  originY: 'center',
  left: IMG_WIDTH / 2,
  top: IMG_HEIGHT / 2,
  width: IMG_WIDTH, // node-canvas doesn't seem to allow setting width/height on image objects
  height: IMG_HEIGHT, // or does it now?
  fill: 'rgb(0,0,0)',
  stroke: null,
  strokeWidth: 0,
  strokeDashArray: null,
  strokeDashOffset: 0,
  strokeLineCap: 'butt',
  strokeLineJoin: 'miter',
  strokeMiterLimit: 4,
  scaleX: 1,
  scaleY: 1,
  angle: 0,
  flipX: false,
  flipY: false,
  opacity: 1,
  src: IMG_SRC,
  shadow: null,
  visible: true,
  backgroundColor: '',
  filters: [],
  fillRule: 'nonzero',
  paintFirst: 'fill',
  globalCompositeOperation: 'source-over',
  crossOrigin: null,
  skewX: 0,
  skewY: 0,
  cropX: 0,
  cropY: 0,
  strokeUniform: false,
};