patch(): ActiveSelection initialization + types (#9143)

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog
 
 ## [next]
+
+- patch(): ActiveSelection initialization + types [#9143](https://github.com/fabricjs/fabric.js/pull/9143)
 - chore(TS): BREAKING remove canvas.interactive, added typings for canvas options [#9140](https://github.com/fabricjs/fabric.js/pull/9140)
 - chore(TS): BREAKING PREVIOUS BETA mv + rename `TProps` => `TOptions` [#9139](https://github.com/fabricjs/fabric.js/pull/9139)
 - test(playwright): Use embedded eval from playwright [#9133](https://github.com/fabricjs/fabric.js/pull/9133)

fabric.ts

@@ -99,6 +99,10 @@ export type {
   SerializedGroupProps,
 } from './src/shapes/Group';
 export { Group } from './src/shapes/Group';
+export type {
+  ActiveSelectionOptions,
+  MultiSelectionStacking,
+} from './src/shapes/ActiveSelection';
 export { ActiveSelection } from './src/shapes/ActiveSelection';
 export { Image } from './src/shapes/Image';
 export type {

src/canvas/Canvas.ts

@@ -12,15 +12,14 @@ import { Point } from '../Point';
 import type { Group } from '../shapes/Group';
 import type { IText } from '../shapes/IText/IText';
 import type { FabricObject } from '../shapes/Object/FabricObject';
-import type { TOptions } from '../typedefs';
 import { isTouchEvent, stopEvent } from '../util/dom_event';
 import { getDocumentFromElement, getWindowFromElement } from '../util/dom_misc';
 import { sendPointToPlane } from '../util/misc/planeChange';
 import {
   isFabricObjectWithDragSupport,
   isInteractiveTextObject,
 } from '../util/typeAssertions';
-import type { CanvasOptions } from './CanvasOptions';
+import type { CanvasOptions, TCanvasOptions } from './CanvasOptions';
 import { SelectableCanvas } from './SelectableCanvas';
 import { TextEditingManager } from './TextEditingManager';
 
@@ -114,10 +113,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
 
   textEditingManager = new TextEditingManager(this);
 
-  constructor(
-    el: string | HTMLCanvasElement,
-    options: TOptions<CanvasOptions> = {}
-  ) {
+  constructor(el: string | HTMLCanvasElement, options: TCanvasOptions = {}) {
     super(el, options);
     // bind event handlers
     (

src/canvas/CanvasOptions.ts

@@ -1,4 +1,5 @@
 import type { ModifierKey, TOptionalModifierKey } from '../EventTypeDefs';
+import type { ActiveSelection } from '../shapes/ActiveSelection';
 import type { TOptions } from '../typedefs';
 import type { StaticCanvasOptions } from './StaticCanvasOptions';
 
@@ -259,6 +260,10 @@ export interface CanvasOptions
   preserveObjectStacking: boolean;
 }
 
+export type TCanvasOptions = TOptions<
+  CanvasOptions & { activeSelection: ActiveSelection }
+>;
+
 export const canvasDefaults: TOptions<CanvasOptions> = {
   uniformScaling: true,
   uniScaleKey: 'shiftKey',

src/canvas/SelectableCanvas.ts

@@ -25,7 +25,6 @@ import type {
   TOriginY,
   TSize,
   TSVGReviver,
-  TOptions,
 } from '../typedefs';
 import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
 import { getPointer, isTouchEvent } from '../util/dom_event';
@@ -37,7 +36,7 @@ import { ActiveSelection } from '../shapes/ActiveSelection';
 import { createCanvasElement } from '../util';
 import { CanvasDOMManager } from './DOMManagers/CanvasDOMManager';
 import { BOTTOM, CENTER, LEFT, RIGHT, TOP } from '../constants';
-import type { CanvasOptions } from './CanvasOptions';
+import type { CanvasOptions, TCanvasOptions } from './CanvasOptions';
 import { canvasDefaults } from './CanvasOptions';
 
 /**
@@ -298,10 +297,11 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
 
   constructor(
     el: string | HTMLCanvasElement,
-    options: TOptions<CanvasOptions> = {}
+    { activeSelection = new ActiveSelection(), ...options }: TCanvasOptions = {}
   ) {
     super(el, options);
-    this._activeSelection = new ActiveSelection([], { canvas: this });
+    this._activeSelection = activeSelection;
+    this._activeSelection.set('canvas', this);
   }
 
   protected initElements(el: string | HTMLCanvasElement) {

src/shapes/ActiveSelection.ts

@@ -1,7 +1,15 @@
 import type { ControlRenderingStyleOverride } from '../controls/controlRendering';
 import { classRegistry } from '../ClassRegistry';
+import type { GroupProps } from './Group';
 import { Group } from './Group';
 import type { FabricObject } from './Object/FabricObject';
+import type { TOptions } from '../typedefs';
+
+export type MultiSelectionStacking = 'canvas-stacking' | 'selection-order';
+
+export interface ActiveSelectionOptions extends GroupProps {
+  multiSelectionStacking: MultiSelectionStacking;
+}
 
 export class ActiveSelection extends Group {
   declare _objects: FabricObject[];
@@ -14,14 +22,13 @@ export class ActiveSelection extends Group {
    * @default `canvas-stacking`
    */
   // TODO FIX THIS WITH THE DEFAULTS LOGIC
-  multiSelectionStacking: 'canvas-stacking' | 'selection-order' =
-    'canvas-stacking';
+  multiSelectionStacking: MultiSelectionStacking = 'canvas-stacking';
 
   static type = 'ActiveSelection';
 
   constructor(
     objects?: FabricObject[],
-    options?: any,
+    options?: TOptions<ActiveSelectionOptions>,
     objectsRelativeToGroup?: boolean
   ) {
     super(objects, options, objectsRelativeToGroup);