chore(TS): controls

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(TS): Convert controls e6/ts [#8400](https://github.com/fabricjs/fabric.js/pull/8400)
 - ci(): remove buggy changelog action in favor of `git diff` bash script + direct git how to merge `CHANGELOG.md` [#8309](https://github.com/fabricjs/fabric.js/pull/8346)
 - fix(): skewing controls accuracy + successive interactions [#8380](https://github.com/fabricjs/fabric.js/pull/8380)
 - chore(TS): Convert Geometry and Origin to classes/e6/ts [#8390](https://github.com/fabricjs/fabric.js/pull/8390)

scripts/buildStats.mjs

@@ -11,11 +11,13 @@ const INACCURATE_COMMENT =
 
 function printSize(a, b) {
   const diff = b - a;
-  return `${b} (${Math.sign(diff) > 0 ? '+' : ''}${diff})`;
+  return `${b.toFixed(3)} (**${Math.sign(diff) > 0 ? '+' : ''}${diff.toFixed(
+    3
+  )}**)`;
 }
 
 function printSizeByte(a, b) {
-  return printSize(Math.round(a / 1024), Math.round(b / 1024));
+  return printSize(a / 1024, b / 1024);
 }
 
 export async function findCommentId(github, context) {
@@ -94,13 +96,17 @@ export async function run({ github, context, a, b }) {
         printSizeByte(_a.gzipped, _b.gzipped),
       ];
     }),
-    ..._.map(files, ({ a, b }, key) => {
-      return [
-        key,
-        printSizeByte(a.sizeBefore, b.sizeBefore),
-        printSizeByte(a.sizeAfter, b.sizeAfter),
-      ];
-    }),
+    ..._.orderBy(
+      _.map(files, ({ a, b }, key) => {
+        return [
+          key,
+          printSizeByte(a.sizeBefore, b.sizeBefore),
+          printSizeByte(a.sizeAfter, b.sizeAfter),
+        ];
+      }),
+      [0],
+      ['asc']
+    ),
   ];
 
   const body =

src/__types__.ts

@@ -1,7 +1,24 @@
+import type { Observable } from './mixins/observable.mixin';
+import type { Point } from './point.class';
+import { ModifierKey, TMat2D } from './typedefs';
+
 /**
  * @todo remove transient
  */
 export type Shadow = any;
-export type Canvas = any;
+export type Canvas = StaticCanvas & {
+  altActionKey: ModifierKey;
+  uniScaleKey: ModifierKey;
+  uniformScaling: boolean;
+} & Record<string, any>;
+export type StaticCanvas = Record<string, any> & {
+  getZoom(): number;
+  viewportTransform: TMat2D;
+  vptCoords: {
+    tl: Point;
+    br: Point;
+  };
+  getRetinaScaling(): number;
+} & Observable;
 export type Rect = any;
 export type TObject = any;

src/canvas.class.ts

@@ -1,6 +1,9 @@
 //@ts-nocheck
+import { dragHandler, getActionFromCorner } from './controls/actions';
 import { Point } from './point.class';
 import { FabricObject } from './shapes/object.class';
+import { ModifierKey, Transform } from './typedefs';
+import { saveObjectTransform } from './util/misc/objectTransforms';
 
 (function (global) {
   var fabric = global.fabric,
@@ -139,7 +142,7 @@ import { FabricObject } from './shapes/object.class';
        * if Canvas.uniformScaling is true, pressing this will set it to false
        * and viceversa.
        * @since 1.6.2
-       * @type String
+       * @type ModifierKey
        * @default
        */
       uniScaleKey: 'shiftKey',
@@ -168,7 +171,7 @@ import { FabricObject } from './shapes/object.class';
        * If `null` or 'none' or any other string that is not a modifier key
        * feature is disabled feature disabled.
        * @since 1.6.2
-       * @type String
+       * @type ModifierKey
        * @default
        */
       centeredKey: 'altKey',
@@ -179,7 +182,7 @@ import { FabricObject } from './shapes/object.class';
        * If `null` or 'none' or any other string that is not a modifier key
        * feature is disabled feature disabled.
        * @since 1.6.2
-       * @type String
+       * @type ModifierKey
        * @default
        */
       altActionKey: 'shiftKey',
@@ -205,7 +208,7 @@ import { FabricObject } from './shapes/object.class';
        * If `null` or empty or containing any other string that is not a modifier key
        * feature is disabled.
        * @since 1.6.2
-       * @type String|Array
+       * @type ModifierKey|ModifierKey[]
        * @default
        */
       selectionKey: 'shiftKey',
@@ -219,7 +222,7 @@ import { FabricObject } from './shapes/object.class';
        * If `null` or 'none' or any other string that is not a modifier key
        * feature is disabled.
        * @since 1.6.5
-       * @type null|String
+       * @type null|ModifierKey
        * @default
        */
       altSelectionKey: null,
@@ -738,21 +741,6 @@ import { FabricObject } from './shapes/object.class';
         return origin;
       },
 
-      /**
-       * @private
-       * @param {Boolean} alreadySelected true if target is already selected
-       * @param {String} corner a string representing the corner ml, mr, tl ...
-       * @param {Event} e Event object
-       * @param {fabric.Object} [target] inserted back to help overriding. Unused
-       */
-      _getActionFromCorner: function (alreadySelected, corner, e, target) {
-        if (!corner || !alreadySelected) {
-          return 'drag';
-        }
-        var control = target.controls[corner];
-        return control.getActionName(e, control, target);
-      },
-
       /**
        * @private
        * @param {Event} e Event object
@@ -775,20 +763,15 @@ import { FabricObject } from './shapes/object.class';
           actionHandler =
             alreadySelected && corner
               ? control.getActionHandler(e, target, control)
-              : fabric.controlsUtils.dragHandler,
-          action = this._getActionFromCorner(
-            alreadySelected,
-            corner,
-            e,
-            target
-          ),
+              : dragHandler,
+          action = getActionFromCorner(alreadySelected, corner, e, target),
           origin = this._getOriginFromCorner(target, corner),
           altKey = e[this.centeredKey],
           /**
            * relative to target's containing coordinate plane
            * both agree on every point
            **/
-          transform = {
+          transform: Transform = {
             target: target,
             action: action,
             actionHandler: actionHandler,
@@ -810,7 +793,7 @@ import { FabricObject } from './shapes/object.class';
             height: target.height,
             shiftKey: e.shiftKey,
             altKey: altKey,
-            original: fabric.util.saveObjectTransform(target),
+            original: saveObjectTransform(target),
           };
 
         if (this._shouldCenterTransform(target, action, altKey)) {

src/controls/actions.ts

@@ -0,0 +1,71 @@
+import { fabric } from '../../HEADER';
+import { changeWidth } from './changeWidth';
+import { renderCircleControl, renderSquareControl } from './controls.render';
+import { dragHandler } from './drag';
+import { rotationStyleHandler, rotationWithSnapping } from './rotate';
+import {
+  scaleCursorStyleHandler,
+  scalingEqually,
+  scalingX,
+  scalingY,
+} from './scale';
+import {
+  scaleOrSkewActionName,
+  scaleSkewCursorStyleHandler,
+  scalingXOrSkewingY,
+  scalingYOrSkewingX,
+} from './scaleSkew';
+import { skewCursorStyleHandler, skewHandlerX, skewHandlerY } from './skew';
+import { getLocalPoint, getActionFromCorner } from './util';
+import { wrapWithFireEvent } from './wrapWithFireEvent';
+import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
+
+export {
+  scaleCursorStyleHandler,
+  skewCursorStyleHandler,
+  scaleSkewCursorStyleHandler,
+  rotationWithSnapping,
+  scalingEqually,
+  scalingX,
+  scalingY,
+  scalingYOrSkewingX,
+  scalingXOrSkewingY,
+  changeWidth,
+  skewHandlerX,
+  skewHandlerY,
+  dragHandler,
+  scaleOrSkewActionName,
+  rotationStyleHandler,
+  wrapWithFixedAnchor,
+  wrapWithFireEvent,
+  getLocalPoint,
+  getActionFromCorner,
+  renderCircleControl,
+  renderSquareControl,
+};
+
+/**
+ * @todo remove as unused
+ */
+fabric.controlsUtils = {
+  scaleCursorStyleHandler,
+  skewCursorStyleHandler,
+  scaleSkewCursorStyleHandler,
+  rotationWithSnapping,
+  scalingEqually,
+  scalingX,
+  scalingY,
+  scalingYOrSkewingX,
+  scalingXOrSkewingY,
+  changeWidth,
+  skewHandlerX,
+  skewHandlerY,
+  dragHandler,
+  scaleOrSkewActionName,
+  rotationStyleHandler,
+  wrapWithFixedAnchor,
+  wrapWithFireEvent,
+  getLocalPoint,
+  renderCircleControl,
+  renderSquareControl,
+};

src/controls/changeWidth.ts

@@ -0,0 +1,52 @@
+import { TransformActionHandler } from '../typedefs';
+import { getLocalPoint, isTransformCentered } from './util';
+import { wrapWithFireEvent } from './wrapWithFireEvent';
+import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
+
+/**
+ * Action handler to change object's width
+ * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+ * @param {Event} eventData javascript event that is doing the transform
+ * @param {Object} transform javascript object containing a series of information around the current transform
+ * @param {number} x current mouse x position, canvas normalized
+ * @param {number} y current mouse y position, canvas normalized
+ * @return {Boolean} true if some change happened
+ */
+export const changeObjectWidth: TransformActionHandler = (
+  eventData,
+  transform,
+  x,
+  y
+) => {
+  const localPoint = getLocalPoint(
+    transform,
+    transform.originX,
+    transform.originY,
+    x,
+    y
+  );
+  //  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)
+  ) {
+    const { target } = transform,
+      strokePadding =
+        target.strokeWidth / (target.strokeUniform ? target.scaleX : 1),
+      multiplier = isTransformCentered(transform) ? 2 : 1,
+      oldWidth = target.width,
+      newWidth = Math.ceil(
+        Math.abs((localPoint.x * multiplier) / target.scaleX) - strokePadding
+      );
+    target.set('width', Math.max(newWidth, 0));
+    //  check against actual target width in case `newWidth` was rejected
+    return oldWidth !== target.width;
+  }
+  return false;
+};
+
+export const changeWidth = wrapWithFireEvent(
+  'resizing',
+  wrapWithFixedAnchor(changeObjectWidth)
+);