diff --git a/CHANGELOG.md b/CHANGELOG.md index c672dbd2b88..f3e005c5f77 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/fabric.ts b/fabric.ts index 583e2929155..30298048c9f 100644 --- a/fabric.ts +++ b/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 { diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts index fed586de42b..3d538dbbc2c 100644 --- a/src/canvas/Canvas.ts +++ b/src/canvas/Canvas.ts @@ -12,7 +12,6 @@ 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'; @@ -20,7 +19,7 @@ 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 = {} - ) { + constructor(el: string | HTMLCanvasElement, options: TCanvasOptions = {}) { super(el, options); // bind event handlers ( diff --git a/src/canvas/CanvasOptions.ts b/src/canvas/CanvasOptions.ts index abde375945a..566dd607cd2 100644 --- a/src/canvas/CanvasOptions.ts +++ b/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 = { uniformScaling: true, uniScaleKey: 'shiftKey', diff --git a/src/canvas/SelectableCanvas.ts b/src/canvas/SelectableCanvas.ts index df5bc0d2e80..656cd3d131b 100644 --- a/src/canvas/SelectableCanvas.ts +++ b/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 constructor( el: string | HTMLCanvasElement, - options: TOptions = {} + { 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) { diff --git a/src/shapes/ActiveSelection.ts b/src/shapes/ActiveSelection.ts index 35f06bb14e8..e34275e6a1d 100644 --- a/src/shapes/ActiveSelection.ts +++ b/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, objectsRelativeToGroup?: boolean ) { super(objects, options, objectsRelativeToGroup);