Refactor IO fill tool target check logic (#4222)

* populate canvas.targets with subtargets during mouse events

* use canvas.targets instead of findTargetInGroup

* remove unused findTargetInGroup
This commit is contained in:
llama 2025-07-28 17:01:50 +08:00 committed by GitHub
parent c947690aeb
commit 3dc6b6b3ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 4 additions and 19 deletions

View file

@ -109,6 +109,8 @@ function initCanvas(): fabric.Canvas {
// snap rotation around 0 by +-3deg // snap rotation around 0 by +-3deg
fabric.Object.prototype.snapAngle = 360; fabric.Object.prototype.snapAngle = 360;
fabric.Object.prototype.snapThreshold = 3; fabric.Object.prototype.snapThreshold = 3;
// populate canvas.targets with subtargets during mouse events
fabric.Group.prototype.subTargetCheck = true;
// disable rotation when selecting // disable rotation when selecting
canvas.on("selection:created", () => { canvas.on("selection:created", () => {
const g = canvas.getActiveObject(); const g = canvas.getActiveObject();

View file

@ -105,21 +105,6 @@ export const unGroupShapes = (canvas: fabric.Canvas): void => {
redraw(canvas); redraw(canvas);
}; };
/** Check for the target within a (potentially nested) group
* NOTE: assumes that masks do not overlap */
export const findTargetInGroup = (group: fabric.Group, p: fabric.Point): fabric.Object | undefined => {
if (!group) { return; }
const point = fabric.util.transformPoint(p, fabric.util.invertTransform(group.calcOwnMatrix()));
for (const shape of group.getObjects()) {
if (shape instanceof fabric.Group) {
const ret = findTargetInGroup(shape, point);
if (ret) { return ret; }
} else if (shape.containsPoint(point)) {
return shape;
}
}
};
const copyItem = (canvas: fabric.Canvas): void => { const copyItem = (canvas: fabric.Canvas): void => {
const activeObject = canvas.getActiveObject(); const activeObject = canvas.getActiveObject();
if (!activeObject) { if (!activeObject) {

View file

@ -4,7 +4,7 @@
import { fabric } from "fabric"; import { fabric } from "fabric";
import { get, type Readable } from "svelte/store"; import { get, type Readable } from "svelte/store";
import { findTargetInGroup, stopDraw } from "./lib"; import { stopDraw } from "./lib";
import { undoStack } from "./tool-undo-redo"; import { undoStack } from "./tool-undo-redo";
export const fillMask = (canvas: fabric.Canvas, colourStore: Readable<string>): void => { export const fillMask = (canvas: fabric.Canvas, colourStore: Readable<string>): void => {
@ -17,9 +17,7 @@ export const fillMask = (canvas: fabric.Canvas, colourStore: Readable<string>):
stopDraw(canvas); stopDraw(canvas);
canvas.on("mouse:down", function(o) { canvas.on("mouse:down", function(o) {
const target = o.target instanceof fabric.Group const target = o.target instanceof fabric.Group ? canvas.targets[0] : o.target;
? findTargetInGroup(o.target, canvas.getPointer(o.e) as fabric.Point)
: o.target;
const colour = get(colourStore); const colour = get(colourStore);
if (!target || target.fill === colour) { return; } if (!target || target.fill === colour) { return; }
target.fill = colour; target.fill = colour;