[Bug]: When activating two or more objects, discardActiveObject or setActiveObject after setting props of active objects cause unexpected movement. #10193
Comments
|
When A and B (multiple elements) are selected, an active group (C) is created internally. Setting the position of A means setting A's position relative to C. The design is such that you need to deselect A before setting its position. |
|
I need to change objects's positions whether they are selected or not. The way, Deselecting -> Setting Position, -> Selecting back, is not good enough for me. Instead, I will check the object before setting and getting, if it is in a group, then make a conversion: export function setObjectProps(object: fabric.Object, props: Partial<IObjectProps>) {
const { left, top } = props;
if (typeof left === 'number' && object.group) {
props.left = left - object.group.left! - object.group.width! / 2;
}
if (typeof top === 'number' && object.group) {
props.top = top - object.group.top! - object.group.height! / 2;
}
object.set(props);
}
export function getObjectProp<T extends keyof IObjectProps>(object: fabric.Object, prop: T): IObjectProps[T] {
if (object.group) {
if (prop === 'left') {
return (object.left! + object.group.left! + object.group.width! / 2) as IObjectProps[T];
}
if (prop === 'top') {
return (object.top! + object.group.top! + object.group.height! / 2) as IObjectProps[T];
}
}
return object.get(prop) as IObjectProps[T];
} |
|
The size of the group is determined by the position of its child elements. When you modify the position of the child elements, the size of the group should update. I noticed that the code in your example does not take into account rotated groups; you might want to try the code below. export function setObjectProps(object: FabricObject, props: AnyObject) {
unwarp(object, () => object.set(props))
}
export function getObjectProp(object: FabricObject, prop: string) {
return unwarp(object, () => object.get(prop));
}
function unwarp(object: FabricObject, fn = () => {}) {
const { group, parent } = object;
const isActiveSelection = group && "multiSelectionStacking" in group;
// const isActiveSelection = group && group != object.parent; // Equivalent to the line above.
if (isActiveSelection) group.remove(object);
// const parent = object.group; // Equivalent to `the parent` mentioned above.
parent?.remove(object);
const v = fn();
parent?.add(object);
parent?.triggerLayout();
if (isActiveSelection) {
group.add(object);
group.triggerLayout();
}
return v;
} |
CheckList
Version
6.0.2
In What environments are you experiencing the problem?
Chrome
Node Version (if applicable)
None
Link To Reproduction
See code below.
Steps To Reproduce
discardActiveObjectorsetActiveObject.Expected Behavior
All objects move to right position.
Actual Behavior
Active objects move to wrong position.
Origin positions:
Unexcepted positions:
I found this problems in v5.3.0, then I upgraded to latest version, the problem was still existed. Is this a real problem, or just I did something wrong? To fix this, I have to
discardActiveObjectbefore set object's props thensetActiveObjectsame objects back in my project.Error Message & Stack Trace
No response
The text was updated successfully, but these errors were encountered: