chore(): use deconstruction and constants in place of strings to save…

… some bytes of code (#9593)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(): use deconstruction and constants in place of strings to save some bytes of code [#9593](https://github.com/fabricjs/fabric.js/pull/9593)
 - tests(): Start moving visual tests to playwrigth [#9481](https://github.com/fabricjs/fabric.js/pull/9481)
 - fix(filters): Fix bugs in Pixelate and Blur filter [#9962](https://github.com/fabricjs/fabric.js/pull/9962)
 - docs(): update README.md [#9957](https://github.com/fabricjs/fabric.js/pull/9957)

src/EventTypeDefs.ts

@@ -11,6 +11,14 @@ import type {
   LayoutBeforeEvent,
   LayoutAfterEvent,
 } from './LayoutManager/types';
+import type {
+  MODIFY_POLY,
+  MOVING,
+  RESIZING,
+  ROTATING,
+  SCALING,
+  SKEWING,
+} from './constants';
 
 export type ModifierKey = keyof Pick<
   MouseEvent | PointerEvent | TouchEvent,
@@ -97,12 +105,12 @@ export interface BasicTransformEvent<E extends Event = TPointerEvent>
 }
 
 export type TModificationEvents =
-  | 'moving'
-  | 'scaling'
-  | 'rotating'
-  | 'skewing'
-  | 'resizing'
-  | 'modifyPoly';
+  | typeof MOVING
+  | typeof SCALING
+  | typeof ROTATING
+  | typeof SKEWING
+  | typeof RESIZING
+  | typeof MODIFY_POLY;
 
 export interface ModifiedEvent<E extends Event = TPointerEvent> {
   e?: E;

src/LayoutManager/LayoutManager.ts

@@ -1,5 +1,16 @@
 import { Point } from '../Point';
-import { CENTER, iMatrix } from '../constants';
+import {
+  CENTER,
+  CHANGED,
+  MODIFIED,
+  MODIFY_POLY,
+  MOVING,
+  RESIZING,
+  ROTATING,
+  SCALING,
+  SKEWING,
+  iMatrix,
+} from '../constants';
 import type { Group } from '../shapes/Group';
 import type { FabricObject } from '../shapes/Object/FabricObject';
 import { invertTransform } from '../util/misc/matrix';
@@ -78,19 +89,19 @@ export class LayoutManager {
     const { target } = context;
     return (
       [
-        'modified',
-        'moving',
-        'resizing',
-        'rotating',
-        'scaling',
-        'skewing',
-        'changed',
-        'modifyPoly',
+        MODIFIED,
+        MOVING,
+        RESIZING,
+        ROTATING,
+        SCALING,
+        SKEWING,
+        CHANGED,
+        MODIFY_POLY,
       ] as (TModificationEvents & 'modified')[]
     ).map((key) =>
       object.on(key, (e) =>
         this.performLayout(
-          key === 'modified'
+          key === MODIFIED
             ? {
                 type: LAYOUT_TYPE_OBJECT_MODIFIED,
                 trigger: key,
@@ -184,19 +195,16 @@ export class LayoutManager {
   protected getLayoutResult(
     context: StrictLayoutContext
   ): Required<LayoutResult> | undefined {
-    const { target } = context;
+    const { target, strategy, type } = context;
 
-    const result = context.strategy.calcLayoutResult(
-      context,
-      target.getObjects()
-    );
+    const result = strategy.calcLayoutResult(context, target.getObjects());
 
     if (!result) {
       return;
     }
 
     const prevCenter =
-      context.type === LAYOUT_TYPE_INITIALIZATION
+      type === LAYOUT_TYPE_INITIALIZATION
         ? new Point()
         : target.getRelativeCenterPoint();
 
@@ -210,7 +218,7 @@ export class LayoutManager {
       .add(correction)
       .transform(
         // in `initialization` we do not account for target's transformation matrix
-        context.type === LAYOUT_TYPE_INITIALIZATION
+        type === LAYOUT_TYPE_INITIALIZATION
           ? iMatrix
           : invertTransform(target.calcOwnMatrix()),
         true
@@ -328,8 +336,9 @@ export class LayoutManager {
   }
 
   dispose() {
-    this._subscriptions.forEach((disposers) => disposers.forEach((d) => d()));
-    this._subscriptions.clear();
+    const { _subscriptions } = this;
+    _subscriptions.forEach((disposers) => disposers.forEach((d) => d()));
+    _subscriptions.clear();
   }
 
   toObject() {

src/LayoutManager/LayoutStrategies/ClipPathLayout.ts

@@ -26,7 +26,7 @@ export class ClipPathLayout extends LayoutStrategy {
     objects: FabricObject[]
   ): LayoutStrategyResult | undefined {
     const { target } = context;
-    const { clipPath } = target;
+    const { clipPath, group } = target;
     if (!clipPath || !this.shouldPerformLayout(context)) {
       return;
     }
@@ -40,7 +40,7 @@ export class ClipPathLayout extends LayoutStrategy {
       const clipPathCenter = sendPointToPlane(
         clipPath.getRelativeCenterPoint(),
         undefined,
-        target.group?.calcTransformMatrix()
+        group ? group.calcTransformMatrix() : undefined
       );
       return {
         center: clipPathCenter,

src/LayoutManager/LayoutStrategies/LayoutStrategy.ts

@@ -39,11 +39,11 @@ export abstract class LayoutStrategy {
     }
   }
 
-  shouldPerformLayout(context: StrictLayoutContext) {
+  shouldPerformLayout({ type, prevStrategy, strategy }: StrictLayoutContext) {
     return (
-      context.type === LAYOUT_TYPE_INITIALIZATION ||
-      context.type === LAYOUT_TYPE_IMPERATIVE ||
-      (!!context.prevStrategy && context.strategy !== context.prevStrategy)
+      type === LAYOUT_TYPE_INITIALIZATION ||
+      type === LAYOUT_TYPE_IMPERATIVE ||
+      (!!prevStrategy && strategy !== prevStrategy)
     );
   }
 
@@ -69,13 +69,13 @@ export abstract class LayoutStrategy {
     objects: FabricObject[],
     context: StrictLayoutContext
   ): LayoutStrategyResult | undefined {
-    if (context.type === LAYOUT_TYPE_IMPERATIVE && context.overrides) {
+    const { type, target } = context;
+    if (type === LAYOUT_TYPE_IMPERATIVE && context.overrides) {
       return context.overrides;
     }
     if (objects.length === 0) {
       return;
     }
-    const { target } = context;
     const { left, top, width, height } = makeBoundingBoxFromPoints(
       objects
         .map((object) => getObjectBounds(target, object))
@@ -85,7 +85,7 @@ export abstract class LayoutStrategy {
     const bboxLeftTop = new Point(left, top);
     const bboxCenter = bboxLeftTop.add(bboxSize.scalarDivide(2));
 
-    if (context.type === LAYOUT_TYPE_INITIALIZATION) {
+    if (type === LAYOUT_TYPE_INITIALIZATION) {
       const actualSize = this.getInitialSize(context, {
         size: bboxSize,
         center: bboxCenter,

src/canvas/SelectableCanvas.ts

@@ -32,7 +32,21 @@ import { pick } from '../util/misc/pick';
 import { sendPointToPlane } from '../util/misc/planeChange';
 import { cos, createCanvasElement, sin } from '../util';
 import { CanvasDOMManager } from './DOMManagers/CanvasDOMManager';
-import { BOTTOM, CENTER, LEFT, RIGHT, TOP } from '../constants';
+import {
+  BOTTOM,
+  CENTER,
+  LEFT,
+  MODIFIED,
+  RESIZING,
+  RIGHT,
+  ROTATE,
+  SCALE,
+  SCALE_X,
+  SCALE_Y,
+  SKEW_X,
+  SKEW_Y,
+  TOP,
+} from '../constants';
 import type { CanvasOptions } from './CanvasOptions';
 import { canvasDefaults } from './CanvasOptions';
 import { Intersection } from '../Intersection';
@@ -517,13 +531,13 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
     let centerTransform;
 
     if (
-      action === 'scale' ||
-      action === 'scaleX' ||
-      action === 'scaleY' ||
-      action === 'resizing'
+      action === SCALE ||
+      action === SCALE_X ||
+      action === SCALE_Y ||
+      action === RESIZING
     ) {
       centerTransform = this.centeredScaling || target.centeredScaling;
-    } else if (action === 'rotate') {
+    } else if (action === ROTATE) {
       centerTransform = this.centeredRotation || target.centeredRotation;
     }
 
@@ -1241,7 +1255,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
 
     if (transform.actionPerformed) {
       this.fire('object:modified', options);
-      target.fire('modified', options);
+      target.fire(MODIFIED, options);
     }
   }
 
@@ -1340,10 +1354,10 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
         'flipX',
         'flipY',
         LEFT,
-        'scaleX',
-        'scaleY',
-        'skewX',
-        'skewY',
+        SCALE_X,
+        SCALE_Y,
+        SKEW_X,
+        SKEW_Y,
         TOP,
       ] as (keyof typeof instance)[];
       const originalValues = pick<typeof instance>(instance, layoutProps);

src/canvas/canvas_gestures.mixin.ts

@@ -1,4 +1,4 @@
-//@ts-nocheck
+// @ts-nocheck
 
 import { scalingEqually } from '../controls/scale';
 import { fireEvent } from '../controls/fireEvent';
@@ -7,7 +7,8 @@ import {
   radiansToDegrees,
 } from '../util/misc/radiansDegreesConversion';
 import { Canvas } from './Canvas';
-import { CENTER } from '../constants';
+import { CENTER, ROTATING, ROTATE, SCALE } from '../constants';
+
 /**
  * Adds support for multi-touch gestures using the Event.js library.
  * Fires the following custom events:
@@ -61,13 +62,13 @@ Object.assign(Canvas.prototype, {
     const t = this._currentTransform;
     const e = this.__gesturesParams.e;
 
-    t.action = 'scale';
+    t.action = SCALE;
     t.originX = t.originY = CENTER;
 
     this._scaleObjectBy(self.scale, e);
 
     if (self.rotation !== 0) {
-      t.action = 'rotate';
+      t.action = ROTATE;
       this._rotateObjectByAngle(self.rotation, e);
     }
 
@@ -171,7 +172,7 @@ Object.assign(Canvas.prototype, {
       return;
     }
     t.target.rotate(radiansToDegrees(degreesToRadians(curAngle) + t.theta));
-    fireEvent('rotating', {
+    fireEvent(ROTATING, {
       target: t.target,
       e: e,
       transform: t,

src/constants.ts

@@ -25,3 +25,20 @@ export const RIGHT = 'right';
 export const NONE = 'none';
 
 export const reNewline = /\r?\n/;
+
+export const MOVING = 'moving';
+export const SCALING = 'scaling';
+export const ROTATING = 'rotating';
+export const ROTATE = 'rotate';
+export const SKEWING = 'skewing';
+export const RESIZING = 'resizing';
+export const MODIFY_POLY = 'modifyPoly';
+export const CHANGED = 'changed';
+export const SCALE = 'scale';
+export const SCALE_X = 'scaleX';
+export const SCALE_Y = 'scaleY';
+export const SKEW_X = 'skewX';
+export const SKEW_Y = 'skewY';
+export const FILL = 'fill';
+export const STROKE = 'stroke';
+export const MODIFIED = 'modified';

src/controls/Control.ts

@@ -6,6 +6,7 @@ import type {
 } from '../EventTypeDefs';
 import { Intersection } from '../Intersection';
 import { Point } from '../Point';
+import { SCALE } from '../constants';
 import type { InteractiveFabricObject } from '../shapes/Object/InteractiveObject';
 import type { TCornerPoint, TDegree, TMat2D } from '../typedefs';
 import {
@@ -39,7 +40,7 @@ export class Control {
    * @type {String}
    * @default 'scale'
    */
-  actionName = 'scale';
+  actionName = SCALE;
 
   /**
    * Drawing angle of the control.

src/controls/changeWidth.ts

@@ -1,5 +1,5 @@
 import type { TransformActionHandler } from '../EventTypeDefs';
-import { CENTER, LEFT, RIGHT } from '../constants';
+import { CENTER, LEFT, RESIZING, RIGHT } from '../constants';
 import { resolveOrigin } from '../util/misc/resolveOrigin';
 import { getLocalPoint, isTransformCentered } from './util';
 import { wrapWithFireEvent } from './wrapWithFireEvent';
@@ -51,6 +51,6 @@ export const changeObjectWidth: TransformActionHandler = (
 };
 
 export const changeWidth = wrapWithFireEvent(
-  'resizing',
+  RESIZING,
   wrapWithFixedAnchor(changeObjectWidth)
 );

src/controls/commonControls.ts

@@ -1,3 +1,4 @@
+import { RESIZING, ROTATE } from '../constants';
 import { changeWidth } from './changeWidth';
 import { Control } from './Control';
 import { rotationStyleHandler, rotationWithSnapping } from './rotate';
@@ -78,7 +79,7 @@ export const createObjectDefaultControls = () => ({
     cursorStyleHandler: rotationStyleHandler,
     offsetY: -40,
     withConnection: true,
-    actionName: 'rotate',
+    actionName: ROTATE,
   }),
 });
 
@@ -88,14 +89,14 @@ export const createResizeControls = () => ({
     y: 0,
     actionHandler: changeWidth,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
-    actionName: 'resizing',
+    actionName: RESIZING,
   }),
   ml: new Control({
     x: -0.5,
     y: 0,
     actionHandler: changeWidth,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
-    actionName: 'resizing',
+    actionName: RESIZING,
   }),
 });