Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update: findtarget supports selectionKey. #10364

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update: findtarget supports selectionKey. #10364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

## [next]

- fix(): When holding Shift to enable multi-selection, mouse:over and mouse:out do not behave as expected [#10037](https://github.com/fabricjs/fabric.js/issues/10337)

## [6.5.3]

- fix(ColorMatrix): Restore correct alpha for JS colorMatrix filter [#10313](https://github.com/fabricjs/fabric.js/pull/10313)
Expand Down
24 changes: 24 additions & 0 deletions src/canvas/SelectableCanvas.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -499,4 +499,28 @@ describe('Selectable Canvas', () => {
expect(canvas._hoveredTarget).toBe(undefined);
});
});

describe('findTarget', () => {
test('Holding down selection key allows you to select shapes that are covered by the active selection.', () => {
const a = new FabricObject({ width: 100, height: 100 });
const b = new FabricObject({ width: 100, height: 100 });
const c = new FabricObject({ width: 100, height: 100 });
const canvas = new Canvas();
canvas.add(a, b, c);
const as = new ActiveSelection([a, b]);
canvas.setActiveObject(as);

const fakeMouse = new MouseEvent('mousemove', {
clientX: 50,
clientY: 50,
});
const fakeMouseShift = new MouseEvent('mousemove', {
clientX: 50,
clientY: 50,
shiftKey: true,
});
expect(canvas.findTarget(fakeMouse)).toBe(as);
expect(canvas.findTarget(fakeMouseShift)).toBe(c);
});
});
});
11 changes: 11 additions & 0 deletions src/canvas/SelectableCanvas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import type { CanvasOptions } from './CanvasOptions';
import { canvasDefaults } from './CanvasOptions';
import { Intersection } from '../Intersection';
import { isActiveSelection } from '../util/typeAssertions';
import type { ActiveSelection } from '../shapes/ActiveSelection';

/**
* Canvas class
Expand Down Expand Up @@ -729,6 +730,16 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
// check pointer is over active selection and possibly perform `subTargetCheck`
this.searchPossibleTargets([activeObject], pointer)
) {
// If you hold down selection key, you can select elements that are blocked by active selection.
if (this._isSelectionKeyPressed(e)) {
const other = this.searchPossibleTargets(this._objects, pointer);
if (
other &&
!(activeObject as ActiveSelection).contains(other, true)
) {
return other;
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this works 100% of the time? this._objects includes the object in the active selection i assume.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

1.    else if (
        aObjects.length > 1 &&
        // check pointer is over active selection and possibly perform `subTargetCheck`
        this.searchPossibleTargets([activeObject], pointer)
      ) {
        // If you hold down selection key, you can select elements that are blocked by active selection.
        if (this._isSelectionKeyPressed(e)) {
          const other = this.searchPossibleTargets(this._objects, pointer);
          if (
            other &&
 2.           !(activeObject as ActiveSelection).contains(other, true)
          ) {
            return other;
          }
        }
        // active selection does not select sub targets like normal groups
3.        return activeObject;
      }

This is the full text.
At point 1, it can be confirmed that it is definitely the activeSelection.
At point 2, if we assume that this._objects includes the activeSelection and other is the activeSelection, the result returned will be the same as at point 3.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll try to reproduce on canvas the case i think may fail

// active selection does not select sub targets like normal groups
return activeObject;
} else if (
Expand Down