chore(TS): move control files under controls folder (#8185)

* move to `controls` folder

* es6 `controls.render`

* Update testem.config.js

* extract `fireEvent`

* fix(): naming error

* Update typedefs.ts

index.js

@@ -21,9 +21,6 @@ import './src/parser'; // optional parser
 import './src/point.class';
 import './src/intersection.class';
 import './src/color';
-import './src/controls.actions'; // optional interaction
-import './src/controls.render'; // optional interaction
-import './src/control.class'; // optional interaction
 import './src/gradient'; // optional gradient
 import './src/pattern.class'; // optional pattern
 import './src/shadow.class'; // optional shadow
@@ -85,8 +82,7 @@ import './src/mixins/itext_click_behavior.mixin'; // optional itext
 import './src/mixins/itext_key_behavior.mixin'; // optional itext
 import './src/mixins/itext.svg_export'; // optional itext
 import './src/shapes/textbox.class'; // optional textbox
-import './src/mixins/default_controls'; // optional interaction
-
+import './src/controls'; // optional interaction
 import './src/brushes'; // optional freedrawing
 //  extends fabric.StaticCanvas, fabric.Canvas, fabric.Object, depends on fabric.PencilBrush and fabric.Rect
 // import './src/mixins/eraser_brush.mixin'; // optional erasing

src/brushes/pencil_brush.class.ts

@@ -1,6 +1,6 @@
 import { fabric } from "../../HEADER";
 import { Point } from "../point.class";
-import { Event, ModifierKey, PathData } from "../typedefs";
+import { TEvent, ModifierKey, PathData } from "../typedefs";
 import { getSmoothPathFromPoints, joinPath } from "../util";
 import { Canvas } from "../__types__";
 import { BaseBrush } from "./base_brush.class";
@@ -69,7 +69,7 @@ export class PencilBrush extends BaseBrush {
    * Invoked on mouse down
    * @param {Point} pointer
    */
-  onMouseDown(pointer: Point, { e }: Event) {
+  onMouseDown(pointer: Point, { e }: TEvent) {
     if (!this.canvas._isMainEvent(e)) {
       return;
     }
@@ -85,7 +85,7 @@ export class PencilBrush extends BaseBrush {
    * Invoked on mouse move
    * @param {Point} pointer
    */
-  onMouseMove(pointer: Point, { e }: Event) {
+  onMouseMove(pointer: Point, { e }: TEvent) {
     if (!this.canvas._isMainEvent(e)) {
       return;
     }
@@ -118,7 +118,7 @@ export class PencilBrush extends BaseBrush {
   /**
    * Invoked on mouse up
    */
-  onMouseUp({ e }: Event) {
+  onMouseUp({ e }: TEvent) {
     if (!this.canvas._isMainEvent(e)) {
       return true;
     }

src/control.class.ts → src/controls/control.class.ts

@@ -1,4 +1,8 @@
 //@ts-nocheck
+
+import { renderCircleControl, renderSquareControl } from "./controls.render";
+
+
 (function(global) {
 
   var fabric = global.fabric || (global.fabric = { });
@@ -327,10 +331,10 @@
       styleOverride = styleOverride || {};
       switch (styleOverride.cornerStyle || fabricObject.cornerStyle) {
         case 'circle':
-          fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject);
+          renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject);
           break;
         default:
-          fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject);
+          renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject);
       }
     },
   };

src/controls.actions.ts → src/controls/controls.actions.ts

@@ -1,5 +1,8 @@
 //@ts-nocheck
-import { Point } from './point.class';
+
+import { Point } from '../point.class';
+import { fireEvent } from '../util/fireEvent';
+import { renderCircleControl, renderSquareControl } from './controls.render';
 
 (function(global) {
   var fabric = global.fabric || (global.fabric = { }),
@@ -30,13 +33,6 @@ import { Point } from './point.class';
     return Math.round((cornerAngle % 360) / 45);
   }
 
-  function fireEvent(eventName, options) {
-    var target = options.transform.target,
-        canvas = target.canvas;
-    canvas && canvas.fire('object:' + eventName, Object.assign({}, options, { target: target }));
-    target.fire(eventName, options);
-  }
-
   /**
    * Inspect event and fabricObject properties to understand if the scaling action
    * @param {Event} eventData from the user action
@@ -743,6 +739,8 @@ import { Point } from './point.class';
   controls.wrapWithFixedAnchor = wrapWithFixedAnchor;
   controls.wrapWithFireEvent = wrapWithFireEvent;
   controls.getLocalPoint = getLocalPoint;
+  controls.renderCircleControl = renderCircleControl;
+  controls.renderSquareControl = renderSquareControl;
   fabric.controlsUtils = controls;
 
 })(typeof exports !== 'undefined' ? exports : window);

src/controls.render.ts → src/controls/controls.render.ts

@@ -1,8 +1,6 @@
 //@ts-nocheck
-(function(global) {
-  var fabric = global.fabric || (global.fabric = { }),
-      degreesToRadians = fabric.util.degreesToRadians,
-      controls = fabric.controlsUtils;
+
+import { degreesToRadians } from "../util";
 
   /**
    * Render a round control, as per fabric features.
@@ -15,7 +13,7 @@
    * @param {Object} styleOverride override for fabric.Object controls style
    * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls
    */
-  function renderCircleControl (ctx, left, top, styleOverride, fabricObject) {
+  export function renderCircleControl (ctx, left, top, styleOverride, fabricObject) {
     styleOverride = styleOverride || {};
     var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,
         ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,
@@ -64,7 +62,7 @@
    * @param {Object} styleOverride override for fabric.Object controls style
    * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls
    */
-  function renderSquareControl(ctx, left, top, styleOverride, fabricObject) {
+  export function renderSquareControl(ctx, left, top, styleOverride, fabricObject) {
     styleOverride = styleOverride || {};
     var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,
         ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,
@@ -93,7 +91,4 @@
     ctx.restore();
   }
 
-  controls.renderCircleControl = renderCircleControl;
-  controls.renderSquareControl = renderSquareControl;
 
-})(typeof exports !== 'undefined' ? exports : window);

src/controls/index.ts

@@ -0,0 +1,4 @@
+import './control.class';
+import './controls.actions';
+export * from  './controls.render';
+import './default_controls';

src/mixins/canvas_events.mixin.ts

@@ -1,4 +1,8 @@
 //@ts-nocheck
+
+import { fireEvent } from "../util/fireEvent";
+
+
 (function(global) {
 
   var fabric = global.fabric,
@@ -1126,7 +1130,9 @@
     /**
      * @private
      */
-    _fire: fabric.controlsUtils.fireEvent,
+    _fire: function (eventName, options) {
+      return fireEvent(eventName, options);
+    },
 
     /**
      * Sets the cursor depending on where the canvas is being hovered.

src/typedefs.ts

@@ -39,14 +39,20 @@ export const enum SupportedSVGUnit {
 }
 
 export type TMat2D = [number, number, number, number, number, number];
-
+  
 export type ModifierKey = 'altKey' | 'shiftKey' | 'ctrlKey';
 
 /**
  * SVG path commands
  */
 export type PathData = (string | number)[][];
 
-export type Event<E extends Event = MouseEvent | TouchEvent> = {
+export type TEvent<E extends Event = MouseEvent | TouchEvent> = {
   e: E
+}
+
+export type TransformEvent<T> = TEvent & T & {
+  transform: {
+    target: any
+  }
 }

src/util/fireEvent.ts

@@ -0,0 +1,8 @@
+import { TransformEvent } from "../typedefs";
+
+
+export const fireEvent = <T>(eventName: string, options: TransformEvent<T>) => {
+    const target = options.transform.target;
+    target.canvas?.fire('object:' + eventName, { ...options, target });
+    target.fire(eventName, options);
+}