Skip to content

Commit

Permalink
rm ref
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShaMan123
ShaMan123 committed Jan 8, 2024
1 parent 4358971 commit aa58ae9
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 102 deletions.
36 changes: 19 additions & 17 deletions src/canvas/Canvas.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { classRegistry } from '../ClassRegistry';
import { NONE } from '../constants';
import type {
CanvasEvents,
Expand All @@ -8,6 +9,7 @@ import type {
Transform,
} from '../EventTypeDefs';
import { Point } from '../Point';
import { ActiveSelection } from '../shapes/ActiveSelection';
import type { Group } from '../shapes/Group';
import type { IText } from '../shapes/IText/IText';
import type { FabricObject } from '../shapes/Object/FabricObject';
Expand Down Expand Up @@ -1388,7 +1390,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
}
let hoverCursor = target.hoverCursor || this.hoverCursor;
const activeSelection =
this._activeObject === this._activeSelection
this._activeObject === this.getActiveSelection()
? this._activeObject
: null,
// only show proper corner when group selection is not active
Expand Down Expand Up @@ -1431,8 +1433,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
*/
protected handleMultiSelection(e: TPointerEvent, target?: FabricObject) {
const activeObject = this._activeObject;
const activeSelection = this._activeSelection;
const isAS = activeObject === activeSelection;
const isAS = activeObject instanceof ActiveSelection;
if (
// check if an active object exists on canvas and if the user is pressing the `selectionKey` while canvas supports multi selection.
!!activeObject &&
Expand All @@ -1455,9 +1456,8 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
!activeObject.getActiveControl()
) {
if (isAS) {
const prevActiveObjects =
activeSelection.getObjects() as FabricObject[];
if (target === activeSelection) {
const prevActiveObjects = activeObject.getObjects() as FabricObject[];
if (target === activeObject) {
const pointer = this.getViewportPoint(e);
target =
// first search active objects for a target to remove
Expand All @@ -1470,32 +1470,34 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
return false;
}
}
if (target.group === activeSelection) {
if (target.group === activeObject) {
// `target` is part of active selection => remove it
activeSelection.remove(target);
activeObject.remove(target);
this._hoveredTarget = target;
this._hoveredTargets = [...this.targets];
if (activeSelection.size() === 1) {
if (activeObject.size() === 1) {
// activate last remaining object
this._setActiveObject(activeSelection.item(0) as FabricObject, e);
// deselecting the active selection will remove the remaining object from it
this._setActiveObject(activeObject.item(0) as FabricObject, e);
}
} else {
// `target` isn't part of active selection => add it
activeSelection.multiSelectAdd(target);
this._hoveredTarget = activeSelection;
activeObject.multiSelectAdd(target);
this._hoveredTarget = activeObject;
this._hoveredTargets = [...this.targets];
}
this._fireSelectionEvents(prevActiveObjects, e);
} else {
(activeObject as IText).exitEditing &&
(activeObject as IText).exitEditing();
// add the active object and the target to the active selection and set it as the active object
activeSelection.multiSelectAdd(activeObject, target);
this._hoveredTarget = activeSelection;
const newActiveSelection = new ActiveSelection();
newActiveSelection.multiSelectAdd(activeObject, target);
this._hoveredTarget = newActiveSelection;
// ISSUE 4115: should we consider subTargets here?
// this._hoveredTargets = [];
// this._hoveredTargets = this.targets.concat();
this._setActiveObject(activeSelection, e);
this._setActiveObject(newActiveSelection, e);
this._fireSelectionEvents([activeObject], e);
}
return true;
Expand Down Expand Up @@ -1549,8 +1551,8 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
this.setActiveObject(objects[0], e);
} else if (objects.length > 1) {
// add to active selection and make it the active object
this._activeSelection.add(...objects);
this.setActiveObject(this._activeSelection, e);
const klass = classRegistry.getClass('ActiveSelection');
this.setActiveObject(new klass(objects), e);
}

// cleanup
Expand Down
5 changes: 1 addition & 4 deletions src/canvas/CanvasOptions.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { ModifierKey, TOptionalModifierKey } from '../EventTypeDefs';
import type { ActiveSelection } from '../shapes/ActiveSelection';
import type { TOptions } from '../typedefs';
import type { StaticCanvasOptions } from './StaticCanvasOptions';

Expand Down Expand Up @@ -260,9 +259,7 @@ export interface CanvasOptions
preserveObjectStacking: boolean;
}

export type TCanvasOptions = TOptions<
CanvasOptions & { activeSelection: ActiveSelection }
>;
export type TCanvasOptions = TOptions<CanvasOptions>;

export const canvasDefaults: TOptions<CanvasOptions> = {
uniformScaling: true,
Expand Down
59 changes: 19 additions & 40 deletions src/canvas/SelectableCanvas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import type {
} from '../EventTypeDefs';
import {
addTransformToObject,
resetObjectTransform,
saveObjectTransform,
} from '../util/misc/objectTransforms';
import type { TCanvasSizeOptions } from './StaticCanvas';
Expand All @@ -35,7 +34,7 @@ import { ActiveSelection } from '../shapes/ActiveSelection';
import { cos, createCanvasElement, sin } from '../util';
import { CanvasDOMManager } from './DOMManagers/CanvasDOMManager';
import { BOTTOM, CENTER, LEFT, RIGHT, TOP } from '../constants';
import type { CanvasOptions, TCanvasOptions } from './CanvasOptions';
import type { CanvasOptions } from './CanvasOptions';
import { canvasDefaults } from './CanvasOptions';
import { Intersection } from '../Intersection';

Expand Down Expand Up @@ -294,17 +293,6 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
protected declare _isCurrentlyDrawing: boolean;
declare freeDrawingBrush?: BaseBrush;
declare _activeObject?: FabricObject;
protected _activeSelection: ActiveSelection;

constructor(
el?: string | HTMLCanvasElement,
{ activeSelection = new ActiveSelection(), ...options }: TCanvasOptions = {}
) {
super(el, options);
this._activeSelection = activeSelection;
this._activeSelection.set('canvas', this);
this._activeSelection.setCoords();
}

protected initElements(el?: string | HTMLCanvasElement) {
this.elements = new CanvasDOMManager(el, {
Expand Down Expand Up @@ -1033,7 +1021,9 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
* Returns instance's active selection
*/
getActiveSelection() {
return this._activeSelection;
return this._activeObject instanceof ActiveSelection
? this._activeObject
: undefined;
}

/**
Expand All @@ -1042,14 +1032,11 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
*/
getActiveObjects(): FabricObject[] {
const active = this._activeObject;
if (active) {
if (active === this._activeSelection) {
return [...(active as ActiveSelection)._objects];
} else {
return [active];
}
}
return [];
return active instanceof ActiveSelection
? active.getObjects()
: active
? [active]
: [];
}

/**
Expand Down Expand Up @@ -1134,6 +1121,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
* @return {Boolean} true if the object has been selected
*/
_setActiveObject(object: FabricObject, e?: TPointerEvent) {
const prevActiveObject = this._activeObject;
if (this._activeObject === object) {
return false;
}
Expand All @@ -1144,10 +1132,10 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
if (object.onSelect({ e })) {
return false;
}

this._activeObject = object;

if (object instanceof ActiveSelection && this._activeSelection !== object) {
this._activeSelection = object;
if (object instanceof ActiveSelection && prevActiveObject !== object) {
object.set('canvas', this);
object.setCoords();
}
Expand All @@ -1173,11 +1161,6 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
if (obj.onDeselect({ e, object })) {
return false;
}
// clear active selection
if (obj === this._activeSelection) {
this._activeSelection.removeAll();
resetObjectTransform(this._activeSelection);
}
if (this._currentTransform && this._currentTransform.target === obj) {
// @ts-expect-error this method exists in the subclass - should be moved or declared as abstract
this.endCurrentTransform(e);
Expand Down Expand Up @@ -1227,11 +1210,11 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
*/
destroy() {
// dispose of active selection
const activeSelection = this._activeSelection;
activeSelection.removeAll();
// @ts-expect-error disposing
this._activeSelection = undefined;
activeSelection.dispose();
const activeSelection = this.getActiveSelection();
if (activeSelection) {
activeSelection.removeAll();
activeSelection.dispose();
}

super.destroy();

Expand Down Expand Up @@ -1296,11 +1279,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
_realizeGroupTransformOnObject(
instance: FabricObject
): Partial<typeof instance> {
if (
instance.group &&
instance.group === this._activeSelection &&
this._activeObject === instance.group
) {
if (instance.group && instance.group === this.getActiveSelection()) {
const layoutProps = [
'angle',
'flipX',
Expand All @@ -1313,7 +1292,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
TOP,
] as (keyof typeof instance)[];
const originalValues = pick<typeof instance>(instance, layoutProps);
addTransformToObject(instance, this._activeObject.calcOwnMatrix());
addTransformToObject(instance, instance.group.calcOwnMatrix());
return originalValues;
} else {
return {};
Expand Down
20 changes: 1 addition & 19 deletions src/shapes/ActiveSelection.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,21 +81,6 @@ describe('ActiveSelection', () => {
expect(spy).not.toHaveBeenCalled();
});

it('sets coords after attaching to canvas', () => {
const canvas = new Canvas(undefined, {
activeSelection: new ActiveSelection([
new FabricObject({
left: 100,
top: 100,
width: 100,
height: 100,
}),
]),
viewportTransform: [2, 0, 0, 0.5, 400, 150],
});
expect(canvas.getActiveSelection().aCoords).toMatchSnapshot();
});

it('`setActiveObject` should update the active selection ref on canvas if it changed', () => {
const canvas = new Canvas();
const obj1 = new FabricObject();
Expand All @@ -117,8 +102,7 @@ describe('ActiveSelection', () => {
test('adding and removing an object belonging to a group', () => {
const object = new FabricObject();
const group = new Group([object]);
const canvas = new Canvas();
const activeSelection = canvas.getActiveSelection();
const activeSelection = new ActiveSelection();

const eventsSpy = jest.spyOn(object, 'fire');
const removeSpy = jest.spyOn(group, 'remove');
Expand All @@ -132,7 +116,6 @@ describe('ActiveSelection', () => {
activeSelection.add(object);
expect(object.group).toBe(activeSelection);
expect(object.parent).toBe(group);
expect(object.canvas).toBe(canvas);
expect(removeSpy).not.toBeCalled();
expect(exitSpy).toBeCalledWith(object);
expect(enterSpy).toBeCalledWith(object, true);
Expand All @@ -146,7 +129,6 @@ describe('ActiveSelection', () => {
});
expect(object.group).toBe(group);
expect(object.parent).toBe(group);
expect(object.canvas).toBeUndefined();
});

test('transferring an object between active selections', () => {
Expand Down
22 changes: 0 additions & 22 deletions src/shapes/__snapshots__/ActiveSelection.spec.ts.snap
View file

This file was deleted.

0 comments on commit aa58ae9

Please sign in to comment.