fabric 6.2.0 → 6.3.0

package/extensions/aligning_guidelines/util/draw.ts

@@ -0,0 +1,74 @@
+import type { Canvas } from 'fabric';
+import { Point } from 'fabric';
+import type { HorizontalLine, VerticalLine } from '../typedefs';
+import { aligningLineConfig } from '../constant';
+
+function drawLine(canvas: Canvas, origin: Point, target: Point) {
+  const { width, color } = aligningLineConfig;
+  const ctx = canvas.getSelectionContext();
+  const viewportTransform = canvas.viewportTransform;
+  const zoom = canvas.getZoom();
+  ctx.save();
+  ctx.transform(...viewportTransform);
+  ctx.lineWidth = width / zoom;
+  ctx.strokeStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(origin.x, origin.y);
+  ctx.lineTo(target.x, target.y);
+  ctx.stroke();
+  drawX(ctx, zoom, origin);
+  drawX(ctx, zoom, target);
+  ctx.restore();
+}
+
+const xSize = 2.4;
+function drawX(ctx: CanvasRenderingContext2D, zoom: number, point: Point) {
+  const size = xSize / zoom;
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.beginPath();
+  ctx.moveTo(-size, -size);
+  ctx.lineTo(size, size);
+  ctx.moveTo(size, -size);
+  ctx.lineTo(-size, size);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawPoint(canvas: Canvas, arr: Point[]) {
+  const { width, color } = aligningLineConfig;
+  const ctx = canvas.getSelectionContext();
+  const viewportTransform = canvas.viewportTransform;
+  const zoom = canvas.getZoom();
+  ctx.save();
+  ctx.transform(...viewportTransform);
+  ctx.lineWidth = width / zoom;
+  ctx.strokeStyle = color;
+  for (const item of arr) drawX(ctx, zoom, item);
+  ctx.restore();
+}
+export function drawPointList(
+  canvas: Canvas,
+  list: Array<VerticalLine | HorizontalLine>,
+) {
+  const arr = list.map((item) => {
+    const isVertical = 'y2' in item;
+    const x = isVertical ? item.x : item.x1;
+    const y = isVertical ? item.y1 : item.y;
+    return new Point(x, y);
+  });
+  drawPoint(canvas, arr);
+}
+
+export function drawVerticalLine(canvas: Canvas, coords: VerticalLine) {
+  const x = coords.x;
+  const origin = new Point(x, coords.y1);
+  const target = new Point(x, coords.y2);
+  drawLine(canvas, origin, target);
+}
+
+export function drawHorizontalLine(canvas: Canvas, coords: HorizontalLine) {
+  const y = coords.y;
+  const origin = new Point(coords.x1, y);
+  const target = new Point(coords.x2, y);
+  drawLine(canvas, origin, target);
+}

package/extensions/aligning_guidelines/util/get-objects-by-target.ts

@@ -0,0 +1,45 @@
+import type { FabricObject } from 'fabric';
+import { ActiveSelection, Group } from 'fabric';
+
+export function getObjectsByTarget(target: FabricObject) {
+  const objects = new Set<FabricObject>();
+  const canvas = target.canvas;
+  if (!canvas) return objects;
+  const children =
+    target instanceof ActiveSelection ? target.getObjects() : [target];
+
+  canvas.forEachObject((o) => {
+    if (!o.isOnScreen()) return;
+    if (!o.visible) return;
+    if (o.constructor == Group) {
+      collectObjectsByGroup(objects, o);
+      return;
+    }
+    objects.add(o);
+  });
+
+  deleteObjectsByList(objects, children);
+  return objects;
+}
+
+function deleteObjectsByList(objects: Set<FabricObject>, list: FabricObject[]) {
+  for (const target of list) {
+    if (target.constructor == Group) {
+      deleteObjectsByList(objects, (target as Group).getObjects());
+    } else {
+      objects.delete(target);
+    }
+  }
+}
+
+function collectObjectsByGroup(objects: Set<FabricObject>, g: Group) {
+  const children = g.getObjects();
+  for (const child of children) {
+    if (!child.visible) continue;
+    if (child.constructor == Group) {
+      collectObjectsByGroup(objects, child);
+      continue;
+    }
+    objects.add(child);
+  }
+}

package/extensions/index.ts

@@ -0,0 +1,4 @@
+export {
+  initAligningGuidelines,
+  type AligningLineConfig,
+} from './aligning_guidelines';

package/jest.config.js

@@ -126,7 +126,7 @@ module.exports = {
   // rootDir: undefined,
 
   //A list of paths to directories that Jest should use to search for files in
-  roots: ['src'],
+  roots: ['src', 'extensions'],
 
   // Allows you to use a custom runner instead of Jest's default test runner
   // runner: "jest-runner",

package/jest.extend.ts

@@ -5,10 +5,9 @@ import { cloneDeepWith } from 'lodash';
 import { FabricObject } from './src/shapes/Object/Object';
 import type { TMat2D } from './src/typedefs';
 
-type ExtendedOptions<T = unknown> =
-  | {
-      cloneDeepWith?: CloneDeepWithCustomizer<T>;
-    } & object;
+type ExtendedOptions<T = unknown> = {
+  cloneDeepWith?: CloneDeepWithCustomizer<T>;
+} & object;
 
 type ObjectOptions<T = unknown> = ExtendedOptions<T> & {
   includeDefaultValues?: boolean;
@@ -27,13 +26,13 @@ expect.extend({
     this: any,
     received: any,
     propertiesOrHint?: ExtendedOptions,
-    hint?: string
+    hint?: string,
   ) {
     if (typeof received === 'string') {
       return toMatchSnapshot.call(
         this,
         received,
-        propertiesOrHint || hint || ''
+        propertiesOrHint || hint || '',
       );
     }
     const { cloneDeepWith: customizer, ...properties } = propertiesOrHint || {};
@@ -41,7 +40,7 @@ expect.extend({
       this,
       customizer ? cloneDeepWith(received, customizer) : received,
       properties,
-      hint
+      hint,
     );
   },
   toMatchObjectSnapshot(
@@ -52,7 +51,7 @@ expect.extend({
       includeDefaultValues,
       ...properties
     }: ObjectOptions = {},
-    hint?: string
+    hint?: string,
   ) {
     let snapshot: Record<string, any>;
     if (received instanceof FabricObject) {
@@ -76,7 +75,7 @@ expect.extend({
         }
       }),
       properties,
-      hint
+      hint,
     );
   },
   toEqualRoundedMatrix(actual: TMat2D, expected: TMat2D, precision = 10) {
@@ -84,9 +83,9 @@ expect.extend({
     return {
       message: () => {
         return `expected ${this.utils.printReceived(
-          actual
+          actual,
         )} to be rounded to ${this.utils.printExpected(
-          expected.map((x) => Math.round(x / error) * error)
+          expected.map((x) => Math.round(x / error) * error),
         )}`;
       },
       pass: actual.every((x, i) => Math.abs(x - expected[i]) < error),
@@ -111,11 +110,11 @@ declare global {
     interface AsymmetricMatchers {
       toMatchSnapshot(
         propertiesOrHint?: ExtendedOptions | string,
-        hint?: string
+        hint?: string,
       ): void;
       toMatchObjectSnapshot(
         propertiesOrHint?: ObjectOptions | string,
-        hint?: string
+        hint?: string,
       ): void;
       toEqualRoundedMatrix(expected: TMat2D, precision?: number): void;
     }
@@ -124,7 +123,7 @@ declare global {
         propertyMatchers: Partial<
           U & { cloneDeepWith: CloneDeepWithCustomizer<T> }
         >,
-        snapshotName?: string
+        snapshotName?: string,
       ): R;
       toMatchObjectSnapshot<U extends { [P in keyof T]: any }>(
         propertyMatchers?: Partial<
@@ -133,7 +132,7 @@ declare global {
             includeDefaultValues?: boolean;
           }
         >,
-        snapshotName?: string
+        snapshotName?: string,
       ): R;
       toEqualRoundedMatrix(expected: TMat2D, precision?: number): R;
     }

package/package.json

@@ -2,7 +2,7 @@
   "name": "fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
   "homepage": "http://fabricjs.com/",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "author": "Juriy Zaytsev <kangax@gmail.com>",
   "contributors": [
     {
@@ -62,9 +62,7 @@
     "local-server": "http-server ./ -d=false",
     "test:e2e": "npx playwright test --headed",
     "coverage:report": "nyc report --reporter=lcov --reporter=text",
-    "lint": "eslint --config .eslintrc.js src",
-    "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
-    "all": "npm run build && npm run test -- --all && npm run lint && npm run lint_tests && npm run export",
+    "lint": "eslint src extensions",
     "prettier:check": "prettier --check .",
     "prettier:write": "prettier --write .",
     "babel-constants": "babel --no-babelrc src/constants.ts --extensions '.ts' --out-dir dist/src/ --config-file ./.babelrcAlt --plugins=babel-plugin-import-json-value",
@@ -90,8 +88,8 @@
     "@types/lodash": "^4.14.180",
     "@types/mocha": "^10.0.1",
     "@types/node": "^17.0.21",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
     "auto-changelog": "^2.3.0",
     "axios": "^0.27.2",
     "babel-plugin-import-json-value": "^0.1.2",
@@ -99,31 +97,31 @@
     "busboy": "^1.6.0",
     "chalk": "^2.4.1",
     "commander": "^9.1.0",
-    "eslint": "8.40",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^9.9.0",
+    "eslint-config-prettier": "^9.1.0",
     "fireworm": "^0.7.2",
     "fs-extra": "^10.0.1",
     "fuzzy": "^0.1.3",
     "http-server": "^14.1.1",
     "inquirer": "^8.2.1",
     "inquirer-checkbox-plus-prompt": "^1.0.1",
-    "jest": "^29.5.0",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.5.0",
     "kill-port": "^2.0.1",
     "micromatch": "^4.0.5",
     "moment": "^2.29.1",
     "nyc": "^15.1.0",
     "pixelmatch": "^4.0.2",
-    "prettier": "2.7.1",
+    "prettier": "^3.3.1",
     "ps-list": "^8.1.0",
     "qunit": "^2.17.2",
     "rollup": "^4.20.0",
     "semver": "^7.3.8",
     "source-map-support": "^0.5.21",
     "testem": "^3.8.0",
-    "tslib": "^2.4.1",
+    "tslib": "^2.6.3",
     "typescript": "^5.5.4",
-    "v8-to-istanbul": "^9.1.0"
+    "v8-to-istanbul": "^9.3.0"
   },
   "engines": {
     "node": ">=16.20.0"
@@ -162,6 +160,13 @@
       "default": "./dist/index.node.cjs",
       "node": "./dist/index.node.cjs",
       "types": "./dist/index.node.d.ts"
+    },
+    "./extensions": {
+      "import": "./dist-extensions/index.mjs",
+      "require": null,
+      "default": "./dist-extensions/fabric-extensions.min.js",
+      "node": "./dist-extensions/index.mjs",
+      "types": "./dist-extensions/index.d.ts"
     }
   }
 }

package/playwright.setup.ts

@@ -33,7 +33,7 @@ const shouldBuild = (file: string) =>
 
 const getDistFileName = (file: string) => {
   const { dir, name } = path.parse(
-    path.resolve(dist, path.relative(src, file))
+    path.resolve(dist, path.relative(src, file)),
   );
   return path.format({
     dir,
@@ -60,13 +60,13 @@ export default async (config: PlaywrightTestConfig) => {
 
   rmSync(dist, { recursive: true, force: true });
   const tasks = await Promise.all(
-    files.filter((file) => shouldBuild(file)).map((file) => buildFile(file))
+    files.filter((file) => shouldBuild(file)).map((file) => buildFile(file)),
   );
   console.log(
     `Successfully compiled ${tasks.length} files from ${path.relative(
       process.cwd(),
-      src
-    )} to ${path.relative(process.cwd(), dist)}`
+      src,
+    )} to ${path.relative(process.cwd(), dist)}`,
   );
 
   // watch
@@ -77,7 +77,7 @@ export default async (config: PlaywrightTestConfig) => {
       (type, filename) => {
         const file = path.join(src, filename);
         shouldBuild(file) && buildFile(file);
-      }
+      },
     );
     process.once('exit', () => watcher.close());
   }

package/rollup.config.mjs

@@ -12,13 +12,25 @@ const buildOutput = process.env.BUILD_OUTPUT || './dist/index.js';
 
 const dirname = path.dirname(buildOutput);
 const basename = path.basename(buildOutput, '.js');
-
 const plugins = [
   json(),
   ts({
     noForceEmit: true,
     tsconfig: './tsconfig.json',
-    exclude: ['dist', '**/**.spec.ts', '**/**.test.ts'],
+    exclude: ['dist', 'dist-extensions', '**/**.spec.ts', '**/**.test.ts'],
+  }),
+  babel({
+    extensions: ['.ts', '.js'],
+    babelHelpers: 'bundled',
+  }),
+];
+
+const pluginsExtensions = [
+  json(),
+  ts({
+    noForceEmit: true,
+    tsconfig: './tsconfig-extensions.json',
+    exclude: ['dist', 'dist-extensions', '**/**.spec.ts', '**/**.test.ts'],
   }),
   babel({
     extensions: ['.ts', '.js'],
@@ -51,7 +63,7 @@ function onwarn(warning, warn) {
 // https://rollupjs.org/guide/en/#configuration-files
 export default [
   {
-    input: process.env.BUILD_INPUT?.split(splitter) || ['./fabric.ts'],
+    input: ['./fabric.ts'],
     output: [
       // es modules in files
       {
@@ -94,7 +106,7 @@ export default [
             plugins: [terser()],
           }
         : null,
-      // umd in bundle
+      // umd module in bundle, the cdn one for fiddles
       {
         file: path.resolve(dirname, `${basename}.js`),
         name: 'fabric',
@@ -123,6 +135,7 @@ export default [
         format: 'es',
         sourcemap: true,
       },
+      // todo remove
       {
         file: path.resolve(dirname, `${basename}.node.cjs`),
         name: 'fabric',
@@ -134,4 +147,33 @@ export default [
     onwarn,
     external: ['jsdom', 'jsdom/lib/jsdom/living/generated/utils.js', 'canvas'],
   },
+  // EXTENSIONS
+
+  {
+    input: ['./extensions/index.ts'],
+    external: ['fabric'],
+    output: [
+      // es modules in files
+      {
+        dir: path.resolve('./dist-extensions'),
+        format: 'es',
+        preserveModules: true,
+        entryFileNames: '[name].mjs',
+        sourcemap: true,
+      },
+      // umd module, the cdn one for fiddles, minified
+      {
+        file: path.resolve('./dist-extensions', `fabric-extensions.min.js`),
+        name: 'fabricExtensions',
+        format: 'umd',
+        sourcemap: true,
+        globals: {
+          fabric: 'fabric',
+        },
+        plugins: [terser()],
+      },
+    ],
+    plugins: pluginsExtensions,
+    onwarn,
+  },
 ];

package/scripts/build.mjs

@@ -20,7 +20,7 @@ export function build({ watch, fast, input, output, stats = false } = {}) {
       (type) =>
         `--watch.${type} "node ./scripts/buildReporter.mjs ${type
           .toLowerCase()
-          .slice(2)}"`
+          .slice(2)}"`,
     ),
   ].join(' ');
   const processOptions = {

package/scripts/buildLock.mjs

@@ -66,7 +66,7 @@ export function subscribe(cb, debounce) {
     _.debounce((type, file) => {
       if (file !== path.basename(lockFile)) return;
       cb(isLocked(), !!(readLockFile() ?? {}).error);
-    }, debounce)
+    }, debounce),
   );
 }
 
@@ -88,8 +88,8 @@ export function report(type, data) {
             },
           },
           null,
-          '\t'
-        )
+          '\t',
+        ),
       );
       break;
     case 'error':
@@ -105,8 +105,8 @@ export function report(type, data) {
             },
           },
           null,
-          '\t'
-        )
+          '\t',
+        ),
       );
       break;
     case 'end':

package/scripts/buildStats.mjs

@@ -7,7 +7,7 @@ const MAX_COMMENT_CHARS = 65536;
 function printSize(a, b) {
   const diff = b - a;
   return `${b.toFixed(3)} (**${Math.sign(diff) > 0 ? '+' : ''}${diff.toFixed(
-    diff !== 0 ? 3 : 0
+    diff !== 0 ? 3 : 0,
   )}**)`;
 }
 
@@ -29,7 +29,7 @@ export async function findCommentId(github, context) {
       direction: 'desc',
     });
     const found = response.data.find(
-      (comment) => !!comment.user && comment.body.startsWith(COMMENT_MARKER)
+      (comment) => !!comment.user && comment.body.startsWith(COMMENT_MARKER),
     )?.id;
     if (found) {
       return found;

package/scripts/git.mjs

@@ -21,7 +21,7 @@ export function getGitInfo(branchRef = '') {
     (value) => {
       const [type, path] = value.split(' ');
       return { type, path };
-    }
+    },
   );
   const changes = execGitCommand(`git diff ${branchRef} --name-only`);
   const userName = execGitCommand('git config user.name')[0];