chore(): Arrange mixins + text files

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(): move and rename text & itext files and organize as folders, rename mixins [#8620](https://github.com/fabricjs/fabric.js/pull/8620)
 - chore(TS): type IText, IText behavior, IText click behavior [#8610](https://github.com/fabricjs/fabric.js/pull/8610)
 - BREAKING: refactor `clone(obj, true)` with `cloneDeep(obj)` and remove all `extend`, `clone` calls in favor of object spreads. [#8600](https://github.com/fabricjs/fabric.js/pull/8600)
 - chore(TS): Fix some error caused by ts-nocheck removals [#8615](https://github.com/fabricjs/fabric.js/pull/8615)

index.ts

@@ -329,7 +329,7 @@ import { initFilterBackend } from './src/filters/FilterBackend';
 import { Canvas2dFilterBackend } from './src/filters/2d_backend.class';
 import { WebGLFilterBackend } from './src/filters/webgl_backend.class';
 import { runningAnimations } from './src/util/animation/AnimationRegistry';
-import { Observable } from './src/mixins/observable.mixin';
+import { Observable } from './src/Observable';
 import { Point } from './src/point.class';
 import { Intersection } from './src/intersection.class';
 import { Color } from './src/color/color.class';
@@ -351,14 +351,14 @@ import { Rect } from './src/shapes/rect.class';
 import { Path } from './src/shapes/path.class';
 import { Polyline } from './src/shapes/polyline.class';
 import { Polygon } from './src/shapes/polygon.class';
-import { Text } from './src/shapes/text.class';
-import { IText } from './src/shapes/itext.class';
+import { Text } from './src/shapes/Text/Text';
+import { IText } from './src/shapes/IText/IText';
 import { Textbox } from './src/shapes/textbox.class';
 import { Group } from './src/shapes/group.class';
 import { ActiveSelection } from './src/shapes/active_selection.class';
 import { Image } from './src/shapes/image.class';
 import { getEnv, getDocument, getWindow, setEnvForTests } from './src/env';
-import { createCollectionMixin } from './src/mixins/collection.mixin';
+import { createCollectionMixin } from './src/Collection';
 import { parseAttributes } from './src/parser/parseAttributes';
 import { parseElements } from './src/parser/parseElements';
 import { getFilterBackend } from './src/filters/FilterBackend';

src/mixins/collection.mixin.ts → src/Collection.ts

@@ -1,6 +1,6 @@
-import type { Constructor } from '../typedefs';
-import type { BaseFabricObject } from '../EventTypeDefs';
-import { removeFromArray } from '../util/internals';
+import type { Constructor } from './typedefs';
+import type { BaseFabricObject } from './EventTypeDefs';
+import { removeFromArray } from './util/internals';
 
 export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
   class Collection extends Base {

src/mixins/shared_methods.mixin.ts → src/CommonMethods.ts

@@ -1,5 +1,5 @@
 //@ts-nocheck
-import { Observable } from './observable.mixin';
+import { Observable } from './Observable';
 
 export class CommonMethods<EventSpec> extends Observable<EventSpec> {
   /**

src/EventTypeDefs.ts

@@ -2,12 +2,12 @@ import type { Control } from './controls/control.class';
 import type { Point } from './point.class';
 import type { FabricObject } from './shapes/Object/FabricObject';
 import type { FabricObject as StaticFabricObject } from './shapes/Object/Object';
-import type { FabricObjectSVGExportMixin } from './mixins/object.svg_export';
+import type { FabricObjectSVGExportMixin } from './shapes/Object/FabricObjectSVGExportMixin';
 import type { Group } from './shapes/group.class';
 import type { TOriginX, TOriginY, TRadian } from './typedefs';
 import type { saveObjectTransform } from './util/misc/objectTransforms';
 import type { Canvas } from './canvas/canvas_events';
-import type { IText } from './shapes/itext.class';
+import type { IText } from './shapes/IText/IText';
 import type { StaticCanvas } from './canvas/static_canvas.class';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars

src/canvas/TextEditingManager.ts

@@ -1,13 +1,13 @@
 import { TPointerEvent } from '../EventTypeDefs';
-import type { ITextBehaviorMixin } from '../mixins/itext_behavior.mixin';
+import type { ITextBehavior } from '../shapes/IText/ITextBehavior';
 import { removeFromArray } from '../util/internals';
 
 /**
  * In charge of synchronizing all interactive text instances of a canvas
  */
 export class TextEditingManager {
-  private targets: ITextBehaviorMixin[] = [];
-  private declare target?: ITextBehaviorMixin;
+  private targets: ITextBehavior[] = [];
+  private declare target?: ITextBehavior;
 
   exitTextEditing() {
     this.target = undefined;
@@ -18,20 +18,20 @@ export class TextEditingManager {
     });
   }
 
-  add(target: ITextBehaviorMixin) {
+  add(target: ITextBehavior) {
     this.targets.push(target);
   }
 
-  remove(target: ITextBehaviorMixin) {
+  remove(target: ITextBehavior) {
     this.unregister(target);
     removeFromArray(this.targets, target);
   }
 
-  register(target: ITextBehaviorMixin) {
+  register(target: ITextBehavior) {
     this.target = target;
   }
 
-  unregister(target: ITextBehaviorMixin) {
+  unregister(target: ITextBehavior) {
     if (target === this.target) {
       this.target = undefined;
     }

src/canvas/canvas.class.ts

@@ -31,7 +31,7 @@ import {
 } from '../typedefs';
 import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
 import { getPointer, isTouchEvent } from '../util/dom_event';
-import type { IText } from '../shapes/itext.class';
+import type { IText } from '../shapes/IText/IText';
 import {
   cleanUpJsdomNode,
   makeElementUnselectable,

src/canvas/static_canvas.class.ts

@@ -3,8 +3,8 @@ import { config } from '../config';
 import { iMatrix, VERSION } from '../constants';
 import type { CanvasEvents, StaticCanvasEvents } from '../EventTypeDefs';
 import type { Gradient } from '../gradient/gradient.class';
-import { createCollectionMixin } from '../mixins/collection.mixin';
-import { CommonMethods } from '../mixins/shared_methods.mixin';
+import { createCollectionMixin } from '../Collection';
+import { CommonMethods } from '../CommonMethods';
 import type { Pattern } from '../pattern.class';
 import { Point } from '../point.class';
 import type { BaseFabricObject as FabricObject } from '../EventTypeDefs';

src/mixins/DraggableTextDelegate.ts → src/shapes/IText/DraggableTextDelegate.ts

@@ -1,13 +1,17 @@
-import type { Canvas } from '../canvas/canvas_events';
-import { getEnv } from '../env';
-import { DragEventData, DropEventData, TPointerEvent } from '../EventTypeDefs';
-import { Point } from '../point.class';
-import type { IText } from '../shapes/itext.class';
-import { setStyle } from '../util/dom_style';
-import { cloneDeep } from '../util/internals/cloneDeep';
-import { createCanvasElement } from '../util/misc/dom';
-import { isIdentityMatrix } from '../util/misc/matrix';
-import { TextStyleDeclaration } from './text_style.mixin';
+import type { Canvas } from '../../canvas/canvas_events';
+import { getEnv } from '../../env';
+import {
+  DragEventData,
+  DropEventData,
+  TPointerEvent,
+} from '../../EventTypeDefs';
+import { Point } from '../../point.class';
+import type { IText } from './IText';
+import { setStyle } from '../../util/dom_style';
+import { cloneDeep } from '../../util/internals/cloneDeep';
+import { createCanvasElement } from '../../util/misc/dom';
+import { isIdentityMatrix } from '../../util/misc/matrix';
+import { TextStyleDeclaration } from '../Text/StyledText';
 
 /**
  * #### Dragging IText/Textbox Lifecycle

src/shapes/itext.class.ts → src/shapes/IText/IText.ts

@@ -1,14 +1,14 @@
-import { Canvas } from '../canvas/canvas_events';
-import { ITextEvents } from '../mixins/itext_behavior.mixin';
-import { ITextClickBehaviorMixin } from '../mixins/itext_click_behavior.mixin';
+import { Canvas } from '../../canvas/canvas_events';
+import { ITextEvents } from './ITextBehavior';
+import { ITextClickBehavior } from './ITextClickBehavior';
 import {
   ctrlKeysMapDown,
   ctrlKeysMapUp,
   keysMap,
   keysMapRtl,
-} from '../mixins/itext_key_const';
-import { AssertKeys, TClassProperties, TFiller } from '../typedefs';
-import { classRegistry } from '../util/class_registry';
+} from './constants';
+import { AssertKeys, TFiller } from '../../typedefs';
+import { classRegistry } from '../../util/class_registry';
 
 type CursorBoundaries = {
   left: number;
@@ -62,7 +62,7 @@ type CursorBoundaries = {
  */
 export class IText<
   EventSpec extends ITextEvents = ITextEvents
-> extends ITextClickBehaviorMixin<EventSpec> {
+> extends ITextClickBehavior<EventSpec> {
   /**
    * Index where text selection starts (or where cursor is when there is no selection)
    * @type Number

src/mixins/itext_behavior.mixin.ts → src/shapes/IText/ITextBehavior.ts

@@ -1,16 +1,16 @@
-import { getEnv } from '../env';
+import { getEnv } from '../../env';
 import {
   ObjectEvents,
   TPointerEvent,
   TPointerEventInfo,
-} from '../EventTypeDefs';
-import { Point } from '../point.class';
-import type { FabricObject } from '../shapes/Object/Object';
-import { Text } from '../shapes/text.class';
-import { animate } from '../util/animation/animate';
-import { TOnAnimationChangeCallback } from '../util/animation/types';
-import type { ValueAnimation } from '../util/animation/ValueAnimation';
-import { TextStyleDeclaration } from './text_style.mixin';
+} from '../../EventTypeDefs';
+import { Point } from '../../point.class';
+import type { FabricObject } from '../Object/Object';
+import { Text } from '../Text/Text';
+import { animate } from '../../util/animation/animate';
+import { TOnAnimationChangeCallback } from '../../util/animation/types';
+import type { ValueAnimation } from '../../util/animation/ValueAnimation';
+import { TextStyleDeclaration } from '../Text/StyledText';
 
 // extend this regex to support non english languages
 const reNonWord = /[ \n\.,;!\?\-]/;
@@ -23,7 +23,7 @@ export type ITextEvents = ObjectEvents & {
   'editing:exited': never;
 };
 
-export abstract class ITextBehaviorMixin<
+export abstract class ITextBehavior<
   EventSpec extends ITextEvents = ITextEvents
 > extends Text<EventSpec> {
   declare abstract isEditing: boolean;

src/mixins/itext_click_behavior.mixin.ts → src/shapes/IText/ITextClickBehavior.ts

@@ -1,11 +1,11 @@
-import type { TPointerEvent, TPointerEventInfo } from '../EventTypeDefs';
-import { IPoint, Point } from '../point.class';
-import type { DragMethods } from '../shapes/Object/InteractiveObject';
-import { stopEvent } from '../util/dom_event';
-import { invertTransform, transformPoint } from '../util/misc/matrix';
+import type { TPointerEvent, TPointerEventInfo } from '../../EventTypeDefs';
+import { IPoint, Point } from '../../point.class';
+import type { DragMethods } from '../Object/InteractiveObject';
+import { stopEvent } from '../../util/dom_event';
+import { invertTransform, transformPoint } from '../../util/misc/matrix';
 import { DraggableTextDelegate } from './DraggableTextDelegate';
-import { ITextEvents } from './itext_behavior.mixin';
-import { ITextKeyBehaviorMixin } from './itext_key_behavior.mixin';
+import { ITextEvents } from './ITextBehavior';
+import { ITextKeyBehavior } from './ITextKeyBehavior';
 
 // TODO: this code seems wrong.
 // e.button for a left click is `0` and so different than `1` is more
@@ -14,10 +14,10 @@ function notALeftClick(e: MouseEvent) {
   return e.button && e.button !== 1;
 }
 
-export abstract class ITextClickBehaviorMixin<
+export abstract class ITextClickBehavior<
     EventSpec extends ITextEvents = ITextEvents
   >
-  extends ITextKeyBehaviorMixin<EventSpec>
+  extends ITextKeyBehavior<EventSpec>
   implements DragMethods
 {
   private declare __lastSelected: boolean;

src/mixins/itext_key_behavior.mixin.ts → src/shapes/IText/ITextKeyBehavior.ts

@@ -1,15 +1,15 @@
 //@ts-nocheck
 
-import { config } from '../config';
-import { getEnv } from '../env';
-import { TPointerEvent } from '../EventTypeDefs';
-import { capValue } from '../util/misc/capValue';
-import { ITextBehaviorMixin, ITextEvents } from './itext_behavior.mixin';
-import type { TKeyMapIText } from './itext_key_const';
-
-export abstract class ITextKeyBehaviorMixin<
+import { config } from '../../config';
+import { getEnv } from '../../env';
+import { TPointerEvent } from '../../EventTypeDefs';
+import { capValue } from '../../util/misc/capValue';
+import { ITextBehavior, ITextEvents } from './ITextBehavior';
+import type { TKeyMapIText } from './constants';
+
+export abstract class ITextKeyBehavior<
   EventSpec extends ITextEvents = ITextEvents
-> extends ITextBehaviorMixin<EventSpec> {
+> extends ITextBehavior<EventSpec> {
   /**
    * For functionalities on keyDown
    * Map a special key to a function of the instance/prototype

src/mixins/itext_key_const.ts → src/shapes/IText/constants.ts

@@ -1,4 +1,4 @@
-import type { IText } from '../shapes/itext.class';
+import type { IText } from './IText';
 export type TKeyMapIText = Record<KeyboardEvent['keyCode'], keyof IText>;
 
 // @TODO look into import { Key } from 'ts-key-enum';

src/shapes/Object/FabricObject.ts

@@ -1,5 +1,5 @@
 import { ObjectEvents } from '../../EventTypeDefs';
-import { FabricObjectSVGExportMixin } from '../../mixins/object.svg_export';
+import { FabricObjectSVGExportMixin } from './FabricObjectSVGExportMixin';
 import { InteractiveFabricObject } from './InteractiveObject';
 import { applyMixins } from '../../util/applyMixins';
 import { StatefulMixin } from '../../mixins/stateful.mixin';

src/mixins/object.svg_export.ts → src/shapes/Object/FabricObjectSVGExportMixin.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
-import { TSVGReviver } from '../typedefs';
-import { uid } from '../util/internals/uid';
-import { colorPropToSVG, matrixToSVG } from '../util/misc/svgParsing';
+import { TSVGReviver } from '../../typedefs';
+import { uid } from '../../util/internals/uid';
+import { colorPropToSVG, matrixToSVG } from '../../util/misc/svgParsing';
 
 export class FabricObjectSVGExportMixin {
   /**

src/shapes/Object/ObjectOrigin.ts

@@ -4,7 +4,7 @@ import { TDegree, TOriginX, TOriginY } from '../../typedefs';
 import { transformPoint } from '../../util/misc/matrix';
 import { sizeAfterTransform } from '../../util/misc/objectTransforms';
 import { degreesToRadians } from '../../util/misc/radiansDegreesConversion';
-import { CommonMethods } from '../../mixins/shared_methods.mixin';
+import { CommonMethods } from '../../CommonMethods';
 import { resolveOrigin } from '../../util/misc/resolveOrigin';
 
 export class ObjectOrigin<EventSpec> extends CommonMethods<EventSpec> {

src/mixins/text_style.mixin.ts → src/shapes/Text/StyledText.ts

@@ -1,13 +1,13 @@
-import { ObjectEvents } from '../EventTypeDefs';
-import { FabricObject } from '../shapes/Object/FabricObject';
+import { ObjectEvents } from '../../EventTypeDefs';
+import { FabricObject } from '../Object/FabricObject';
 
 export type TextStyleDeclaration = Record<string, any>;
 
 export type TextStyle = {
   [line: number | string]: { [char: number | string]: TextStyleDeclaration };
 };
 
-export abstract class TextStyleMixin<
+export abstract class StyledText<
   EventSpec extends ObjectEvents
 > extends FabricObject<EventSpec> {
   declare abstract styles: TextStyle;

src/shapes/text.class.ts → src/shapes/Text/Text.ts

@@ -1,33 +1,29 @@
 // @ts-nocheck
-import { cache } from '../cache';
-import { DEFAULT_SVG_FONT_SIZE } from '../constants';
-import { ObjectEvents } from '../EventTypeDefs';
-import {
-  TextStyle,
-  TextStyleDeclaration,
-  TextStyleMixin,
-} from '../mixins/text_style.mixin';
-import { SHARED_ATTRIBUTES } from '../parser/attributes';
-import { parseAttributes } from '../parser/parseAttributes';
-import type { Point } from '../point.class';
+import { cache } from '../../cache';
+import { DEFAULT_SVG_FONT_SIZE } from '../../constants';
+import { ObjectEvents } from '../../EventTypeDefs';
+import { TextStyle, TextStyleDeclaration, StyledText } from './StyledText';
+import { SHARED_ATTRIBUTES } from '../../parser/attributes';
+import { parseAttributes } from '../../parser/parseAttributes';
+import type { Point } from '../../point.class';
 import type {
   TCacheCanvasDimensions,
   TClassProperties,
   TFiller,
-} from '../typedefs';
-import { classRegistry } from '../util/class_registry';
-import { graphemeSplit } from '../util/lang_string';
-import { createCanvasElement } from '../util/misc/dom';
+} from '../../typedefs';
+import { classRegistry } from '../../util/class_registry';
+import { graphemeSplit } from '../../util/lang_string';
+import { createCanvasElement } from '../../util/misc/dom';
 import {
   hasStyleChanged,
   stylesFromArray,
   stylesToArray,
-} from '../util/misc/textStyles';
-import { getPathSegmentsInfo, getPointOnPath } from '../util/path';
-import { cacheProperties } from './Object/FabricObject';
-import { Path } from './path.class';
-import { TextSVGExportMixin } from '../mixins/text.svg_export';
-import { applyMixins } from '../util/applyMixins';
+} from '../../util/misc/textStyles';
+import { getPathSegmentsInfo, getPointOnPath } from '../../util/path';
+import { cacheProperties } from '../Object/FabricObject';
+import { Path } from '../path.class';
+import { TextSVGExportMixin } from './TextSVGExportMixin';
+import { applyMixins } from '../../util/applyMixins';
 
 let measuringContext: CanvasRenderingContext2D | null;
 
@@ -89,7 +85,7 @@ const additionalProps = [
  */
 export class Text<
   EventSpec extends ObjectEvents = ObjectEvents
-> extends TextStyleMixin<EventSpec> {
+> extends StyledText<EventSpec> {
   /**
    * Properties which when set cause object to change dimensions
    * @type Array