chore(TS) Remove small mixins that are too small to be worthy of existance

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(TS): Migrate smaller mixins to classes (dataurl and serialization ) [#8542](https://github.com/fabricjs/fabric.js/pull/8542)
 - chore(TS): Convert Canvas events mixin and grouping mixin [#8519](https://github.com/fabricjs/fabric.js/pull/8519)
 - chore(TS): Remove backward compatibility initialize methods [#8525](https://github.com/fabricjs/fabric.js/pull/8525/)
 - chore(TS): replace getKlass utility with a registry that doesn't require full fabricJS to work [#8500](https://github.com/fabricjs/fabric.js/pull/8500)

index.js

@@ -11,11 +11,8 @@ import './src/pattern.class'; // optional pattern
 import './src/shadow.class'; // optional shadow
 import './src/canvas/static_canvas.class';
 import './src/canvas/canvas_events'; // optional interaction
-import './src/mixins/canvas_dataurl_exporter.mixin';
-import './src/mixins/canvas_serialization.mixin'; // optional serialization
 import './src/canvas/canvas_gestures.mixin'; // optional gestures
 import './src/mixins/canvas_animation.mixin'; // optional animation
-import './src/mixins/canvas_straightening.mixin'; // optional animation
 import './src/shapes/Object/FabricObject';
 import './src/mixins/object_stacking.mixin'; // removed in #8461
 import './src/mixins/stateful.mixin'; // will die soon

src/canvas/canvas.class.ts

@@ -37,6 +37,7 @@ import type { Textbox } from '../shapes/textbox.class';
 import { pick } from '../util/misc/pick';
 import { TSVGReviver } from '../mixins/object.svg_export';
 import { sendPointToPlane } from '../util/misc/planeChange';
+import { createCanvasElement } from '../util/misc/dom';
 
 type TDestroyedCanvas = Omit<
   SelectableCanvas<CanvasEvents>,
@@ -1520,6 +1521,7 @@ export class SelectableCanvas<
     super.destroy();
     wrapperEl.removeChild(upperCanvasEl);
     wrapperEl.removeChild(lowerCanvasEl);
+    this._iTextInstances = [];
     this.contextCache = null;
     this.contextTop = null;
     cleanUpJsdomNode(upperCanvasEl);

src/canvas/canvas_events.ts

@@ -14,6 +14,7 @@ import { ActiveSelection } from '../shapes/active_selection.class';
 import { Group } from '../shapes/group.class';
 import type { FabricObject } from '../shapes/Object/FabricObject';
 import { stopEvent } from '../util/dom_event';
+import { createCanvasElement } from '../util/misc/dom';
 import { sendPointToPlane } from '../util/misc/planeChange';
 import {
   isActiveSelection,
@@ -1640,6 +1641,19 @@ export class Canvas extends SelectableCanvas {
     // clear selection and current transformation
     this._groupSelector = null;
   }
+
+  /**
+   * Clones canvas instance without cloning existing data.
+   * This essentially copies canvas dimensions since loadFromJSON does not affect canvas size.
+   * @returns {StaticCanvas}
+   */
+  cloneWithoutData(): Canvas {
+    const el = createCanvasElement();
+    el.width = this.width;
+    el.height = this.height;
+    // this seems wrong. either Canvas or StaticCanvas
+    return new Canvas(el);
+  }
 }
 
 // there is an order execution bug if i put this as public property.