chore(): Try to use constants for repeated strings to improve minific…

…ation (#8933)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(): swap commonly used string with constants [#8933](https://github.com/fabricjs/fabric.js/pull/8933)
 - chore(TS): Add more text types [#8941](https://github.com/fabricjs/fabric.js/pull/8941)
 - ci(): fix changelog action race condition [#8949](https://github.com/fabricjs/fabric.js/pull/8949)
 - ci(): automate PR changelog [#8938](https://github.com/fabricjs/fabric.js/pull/8938)

src/brushes/CircleBrush.ts

@@ -7,6 +7,7 @@ import { getRandomInt } from '../util/internals';
 import type { Canvas } from '../canvas/Canvas';
 import { BaseBrush } from './BaseBrush';
 import type { CircleBrushPoint } from './typedefs';
+import { CENTER } from '../constants';
 
 export class CircleBrush extends BaseBrush {
   /**
@@ -99,8 +100,8 @@ export class CircleBrush extends BaseBrush {
           radius: point.radius,
           left: point.x,
           top: point.y,
-          originX: 'center',
-          originY: 'center',
+          originX: CENTER,
+          originY: CENTER,
           fill: point.fill,
         });
 

src/brushes/SprayBrush.ts

@@ -6,6 +6,7 @@ import { getRandomInt } from '../util/internals';
 import type { Canvas } from '../canvas/Canvas';
 import { BaseBrush } from './BaseBrush';
 import type { SprayBrushPoint } from './typedefs';
+import { CENTER } from '../constants';
 
 /**
  *
@@ -128,8 +129,8 @@ export class SprayBrush extends BaseBrush {
           height: chunck.width,
           left: chunck.x + 1,
           top: chunck.y + 1,
-          originX: 'center',
-          originY: 'center',
+          originX: CENTER,
+          originY: CENTER,
           fill: this.color,
         });
         rects.push(rect);

src/canvas/Canvas.ts

@@ -1,4 +1,4 @@
-import { LEFT_CLICK, MIDDLE_CLICK, RIGHT_CLICK } from '../constants';
+import { LEFT_CLICK, MIDDLE_CLICK, NONE, RIGHT_CLICK } from '../constants';
 import type {
   CanvasEvents,
   DragEventData,
@@ -361,7 +361,7 @@ export class Canvas extends SelectableCanvas {
    * @param {DragEvent} e
    */
   private _onDragEnd(e: DragEvent) {
-    const didDrop = !!e.dataTransfer && e.dataTransfer.dropEffect !== 'none',
+    const didDrop = !!e.dataTransfer && e.dataTransfer.dropEffect !== NONE,
       dropTarget = didDrop ? this._activeObject : undefined,
       options = {
         e,

src/canvas/SelectableCanvas.ts

@@ -38,6 +38,7 @@ import { sendPointToPlane } from '../util/misc/planeChange';
 import { ActiveSelection } from '../shapes/ActiveSelection';
 import type { TCanvasSizeOptions } from './StaticCanvas';
 import { createCanvasElement } from '../util';
+import { BOTTOM, CENTER, LEFT, NONE, RIGHT, TOP } from '../constants';
 
 export const DefaultCanvasProperties = {
   uniformScaling: true,
@@ -785,17 +786,17 @@ export class SelectableCanvas<
     };
     // is a left control ?
     if (['ml', 'tl', 'bl'].includes(controlName)) {
-      origin.x = 'right';
+      origin.x = RIGHT;
       // is a right control ?
     } else if (['mr', 'tr', 'br'].includes(controlName)) {
-      origin.x = 'left';
+      origin.x = LEFT;
     }
     // is a top control ?
     if (['tl', 'mt', 'tr'].includes(controlName)) {
-      origin.y = 'bottom';
+      origin.y = BOTTOM;
       // is a bottom control ?
     } else if (['bl', 'mb', 'br'].includes(controlName)) {
-      origin.y = 'top';
+      origin.y = TOP;
     }
     return origin;
   }
@@ -865,8 +866,8 @@ export class SelectableCanvas<
       };
 
     if (this._shouldCenterTransform(target, action, altKey)) {
-      transform.originX = 'center';
-      transform.originY = 'center';
+      transform.originX = CENTER;
+      transform.originY = CENTER;
     }
     this._currentTransform = transform;
     // @ts-ignore
@@ -1117,10 +1118,10 @@ export class SelectableCanvas<
       boundsHeight = bounds.height || 0;
 
     if (!boundsWidth || !boundsHeight) {
-      if ('top' in bounds && 'bottom' in bounds) {
+      if (TOP in bounds && BOTTOM in bounds) {
         boundsHeight = Math.abs(bounds.top - bounds.bottom);
       }
-      if ('right' in bounds && 'left' in bounds) {
+      if (RIGHT in bounds && LEFT in bounds) {
         boundsWidth = Math.abs(bounds.right - bounds.left);
       }
     }
@@ -1251,8 +1252,8 @@ export class SelectableCanvas<
       height: height + 'px',
       left: 0,
       top: 0,
-      'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none',
-      '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none',
+      'touch-action': this.allowTouchScrolling ? 'manipulation' : NONE,
+      '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : NONE,
     });
     element.width = width;
     element.height = height;
@@ -1589,12 +1590,12 @@ export class SelectableCanvas<
         'angle',
         'flipX',
         'flipY',
-        'left',
+        LEFT,
         'scaleX',
         'scaleY',
         'skewX',
         'skewY',
-        'top',
+        TOP,
       ] as (keyof typeof instance)[];
       const originalValues = pick<typeof instance>(instance, layoutProps);
       addTransformToObject(instance, this._activeObject.calcOwnMatrix());

src/canvas/StaticCanvas.ts

@@ -1,6 +1,6 @@
 import { getFabricDocument } from '../env';
 import { config } from '../config';
-import { iMatrix, VERSION } from '../constants';
+import { CENTER, iMatrix, VERSION } from '../constants';
 import type { CanvasEvents, StaticCanvasEvents } from '../EventTypeDefs';
 import type { Gradient } from '../gradient/Gradient';
 import { createCollectionMixin } from '../Collection';
@@ -980,7 +980,7 @@ export class StaticCanvas<
    * @param {Point} center Center point
    */
   _centerObject(object: FabricObject, center: Point) {
-    object.setXY(center, 'center', 'center');
+    object.setXY(center, CENTER, CENTER);
     object.setCoords();
     this.renderOnAddRemove && this.requestRenderAll();
   }

src/canvas/canvas_gestures.mixin.ts

@@ -7,7 +7,7 @@ import {
   radiansToDegrees,
 } from '../util/misc/radiansDegreesConversion';
 import { Canvas } from './Canvas';
-
+import { CENTER } from '../constants';
 /**
  * Adds support for multi-touch gestures using the Event.js library.
  * Fires the following custom events:
@@ -62,7 +62,7 @@ Object.assign(Canvas.prototype, {
     const e = this.__gesturesParams.e;
 
     t.action = 'scale';
-    t.originX = t.originY = 'center';
+    t.originX = t.originY = CENTER;
 
     this._scaleObjectBy(self.scale, e);
 

src/constants.ts

@@ -18,3 +18,10 @@ export const kRect = 1 - 0.5522847498;
 export const LEFT_CLICK = 1;
 export const MIDDLE_CLICK = 2;
 export const RIGHT_CLICK = 3;
+
+export const CENTER = 'center';
+export const LEFT = 'left';
+export const TOP = 'top';
+export const BOTTOM = 'bottom';
+export const RIGHT = 'right';
+export const NONE = 'none';

src/controls/changeWidth.ts

@@ -1,4 +1,5 @@
 import type { TransformActionHandler } from '../EventTypeDefs';
+import { CENTER, LEFT, RIGHT } from '../constants';
 import { getLocalPoint, isTransformCentered } from './util';
 import { wrapWithFireEvent } from './wrapWithFireEvent';
 import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
@@ -27,9 +28,9 @@ export const changeObjectWidth: TransformActionHandler = (
   );
   //  make sure the control changes width ONLY from it's side of target
   if (
-    transform.originX === 'center' ||
-    (transform.originX === 'right' && localPoint.x < 0) ||
-    (transform.originX === 'left' && localPoint.x > 0)
+    transform.originX === CENTER ||
+    (transform.originX === RIGHT && localPoint.x < 0) ||
+    (transform.originX === LEFT && localPoint.x > 0)
   ) {
     const { target } = transform,
       strokePadding =

src/controls/drag.ts

@@ -1,4 +1,5 @@
 import type { TransformActionHandler } from '../EventTypeDefs';
+import { LEFT, TOP } from '../constants';
 import { fireEvent } from './fireEvent';
 import { commonEventInfo, isLocked } from './util';
 
@@ -22,8 +23,8 @@ export const dragHandler: TransformActionHandler = (
     newTop = y - offsetY,
     moveX = !isLocked(target, 'lockMovementX') && target.left !== newLeft,
     moveY = !isLocked(target, 'lockMovementY') && target.top !== newTop;
-  moveX && target.set('left', newLeft);
-  moveY && target.set('top', newTop);
+  moveX && target.set(LEFT, newLeft);
+  moveY && target.set(TOP, newTop);
   if (moveX || moveY) {
     fireEvent('moving', commonEventInfo(eventData, transform, x, y));
   }

src/controls/polyControl.ts

@@ -1,7 +1,7 @@
 import { Point } from '../Point';
 import { Control } from './Control';
 import type { TMat2D } from '../typedefs';
-import { iMatrix } from '../constants';
+import { CENTER, iMatrix } from '../constants';
 import type { Polyline } from '../shapes/Polyline';
 import { multiplyTransformMatrices } from '../util/misc/matrix';
 import type {
@@ -49,7 +49,7 @@ const polyActionHandler = (
 ) => {
   const poly = transform.target as Polyline,
     pointIndex = transform.pointIndex,
-    mouseLocalPosition = getLocalPoint(transform, 'center', 'center', x, y),
+    mouseLocalPosition = getLocalPoint(transform, CENTER, CENTER, x, y),
     polygonBaseSize = getSize(poly),
     size = poly._getTransformedDimensions(),
     sizeFactor = polygonBaseSize.divide(size),

src/controls/skew.ts

@@ -19,6 +19,7 @@ import {
 } from './util';
 import { wrapWithFireEvent } from './wrapWithFireEvent';
 import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
+import { CENTER } from '../constants';
 
 export type SkewTransform = Transform & { skewingSide: -1 | 1 };
 
@@ -177,7 +178,7 @@ function skewHandler(
     skewingDirection =
       ((target[skewKey] === 0 &&
         // in case skewing equals 0 we use the pointer offset from target center to determine the direction of skewing
-        getLocalPoint(transform, 'center', 'center', x, y)[axis] > 0) ||
+        getLocalPoint(transform, CENTER, CENTER, x, y)[axis] > 0) ||
       // in case target has skewing we use that as the direction
       target[skewKey] > 0
         ? 1

src/controls/util.ts

@@ -13,6 +13,7 @@ import {
   radiansToDegrees,
 } from '../util/misc/radiansDegreesConversion';
 import type { Control } from './Control';
+import { CENTER } from '../constants';
 
 export const NOT_ALLOWED_CURSOR = 'not-allowed';
 
@@ -41,7 +42,7 @@ export const getActionFromCorner = (
  * @return {Boolean} true if transform is centered
  */
 export function isTransformCentered(transform: Transform) {
-  return transform.originX === 'center' && transform.originY === 'center';
+  return transform.originX === CENTER && transform.originY === CENTER;
 }
 
 export function invertOrigin(origin: TOriginX | TOriginY) {
@@ -104,8 +105,8 @@ function normalizePoint(
       typeof originX !== 'undefined' && typeof originY !== 'undefined'
         ? target.translateToGivenOrigin(
             center,
-            'center',
-            'center',
+            CENTER,
+            CENTER,
             originX,
             originY
           )

src/parser/applyViewboxTransform.ts

@@ -5,7 +5,7 @@ import {
   parseUnit,
 } from '../util/misc/svgParsing';
 import { svgViewBoxElementsRegEx, reViewBoxAttrValue } from './constants';
-
+import { NONE } from '../constants';
 /**
  * Add a <g> element that envelop all child elements and makes the viewbox transformMatrix descend on all elements
  */
@@ -85,7 +85,7 @@ export function applyViewboxTransform(element) {
 
   // default is to preserve aspect ratio
   preserveAspectRatio = parsePreserveAspectRatioAttribute(preserveAspectRatio);
-  if (preserveAspectRatio.alignX !== 'none') {
+  if (preserveAspectRatio.alignX !== NONE) {
     //translate all container for the effect of Mid, Min, Max
     if (preserveAspectRatio.meetOrSlice === 'meet') {
       scaleY = scaleX = scaleX > scaleY ? scaleY : scaleX;

src/parser/constants.ts

@@ -1,5 +1,6 @@
 //@ts-nocheck
 import { getSvgRegex } from './getSvgRegex';
+import { LEFT, TOP } from '../constants';
 
 export const cssRules = {};
 export const gradientDefs = {};
@@ -49,11 +50,11 @@ export const svgValidTagNames = [
   ],
   svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'],
   attributesMap = {
-    cx: 'left',
-    x: 'left',
+    cx: LEFT,
+    x: LEFT,
     r: 'radius',
-    cy: 'top',
-    y: 'top',
+    cy: TOP,
+    y: TOP,
     display: 'visible',
     visibility: 'visible',
     transform: 'transformMatrix',

src/parser/elements_parser.ts

@@ -12,6 +12,7 @@ import { storage } from './constants';
 import { removeTransformMatrixForSvgParsing } from '../util/transform_matrix_removal';
 import type { FabricObject } from '../shapes/Object/FabricObject';
 import { Point } from '../Point';
+import { CENTER } from '../constants';
 
 const findTag = (el: HTMLElement) =>
   classRegistry.getSVGClass(el.tagName.toLowerCase().replace('svg:', ''));
@@ -142,8 +143,8 @@ const ElementsParser = function (
       });
       clipPath.setPositionByOrigin(
         new Point(translateX, translateY),
-        'center',
-        'center'
+        CENTER,
+        CENTER
       );
       obj.clipPath = clipPath;
     } else {

src/parser/normalizeValue.ts

@@ -2,17 +2,18 @@
 import { multiplyTransformMatrices } from '../util/misc/matrix';
 import { parseUnit } from '../util/misc/svgParsing';
 import { parseTransformAttribute } from './parseTransformAttribute';
+import { CENTER, LEFT, RIGHT, NONE } from '../constants';
 
 export function normalizeValue(attr, value, parentAttributes, fontSize) {
   const isArray = Array.isArray(value);
   let parsed;
 
-  if ((attr === 'fill' || attr === 'stroke') && value === 'none') {
+  if ((attr === 'fill' || attr === 'stroke') && value === NONE) {
     value = '';
   } else if (attr === 'strokeUniform') {
     return value === 'non-scaling-stroke';
   } else if (attr === 'strokeDashArray') {
-    if (value === 'none') {
+    if (value === NONE) {
       value = null;
     } else {
       value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat);
@@ -27,7 +28,7 @@ export function normalizeValue(attr, value, parentAttributes, fontSize) {
       value = parseTransformAttribute(value);
     }
   } else if (attr === 'visible') {
-    value = value !== 'none' && value !== 'hidden';
+    value = value !== NONE && value !== 'hidden';
     // display=none on parent element always takes precedence over child element
     if (parentAttributes && parentAttributes.visible === false) {
       value = false;
@@ -38,7 +39,7 @@ export function normalizeValue(attr, value, parentAttributes, fontSize) {
       value *= parentAttributes.opacity;
     }
   } else if (attr === 'textAnchor' /* text-anchor */) {
-    value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';
+    value = value === 'start' ? LEFT : value === 'end' ? RIGHT : CENTER;
   } else if (attr === 'charSpacing') {
     // parseUnit returns px and we convert it to em
     parsed = (parseUnit(value, fontSize) / fontSize) * 1000;