How to auto-select another FabricObject when one FabricObject is selected?

[jekelija]

Hi! I have a use case where I have a FabricObject that when selected, it should auto multi-select another FabricObject with it.
I have this working by updating the active object on selection:created/selection:updated.

However, it prevents moving the objects on first click. I have to click the object, which auto multi-selects the other object, and then click again to drag. This is because of this code in __onMouseDown:

if (target) {
      const alreadySelected = target === this._activeObject;
      if (target.selectable && target.activeOn === 'down') {
        this.setActiveObject(target, e);
      }
      const handle = target.findControl(
        this.getViewportPoint(e),
        isTouchEvent(e),
      );
      if (target === this._activeObject && (handle || !grouped)) {
        this._setupCurrentTransform(e, target, alreadySelected);

this.setActiveObject fires the notification where i update the active object.
Which means that ( if (target === this._activeObject) fails and i cannot drag the object.

Since target is a local variable, I cannot find any way to change it, so I assume I probably need to find another way to trigger auto-selection of the 2nd object when the first item is clicked?

Open to any suggestions that work on either v5 or v6.

Thanks!

[asturur]

Hi @jekelija did you try using the event 'mouse:down:before' there?
This should tell you which target is about to being clicked and you can try to run some extra logic there, like running setActiveObject or _setActiveObject yourself there, and do the multi selection or whatever

[jekelija]

I did that, and the following problem occurred

1. At that point, if i set the active selection but not the target, then farther down in __onMouseDown where it checks
   if (target === this._activeObject && (handle || !grouped)) {
   Then target doesnt equal the active selection, so the selection is set up, but it doesnt set up the transform and so i cant click and drag.

I could try also setting this._target in that callback, but its private. Want me to test if that works and then i can do a PR for adding a setter for the target?

[asturur]

i have to look at it, i m sure there is a way to do that works fine. You may need to kill some cache that last all the way from mousedown to mouseup.

[jekelija]

Got something working, let me know if this is the best way to do this currently, and what you would like added in a Pull Request structurally

private onMouseDownBefore(event: fabric.CanvasPointerEvents['mouse:down:before']): void {
    const target = event.target;
    const selected = [target];
    
    //add in any currently selected items if they shift-clicked
    if (this._canvas._isSelectionKeyPressed(event.e)) {
        for (let s of this.getSelected()) {
            if (!selected.includes(s)) {
                selected.push(s);
            }
        }
    }

    //any groups selected? if so, make sure the entire group is selected!
    const groupsSelected = new Set<string>();
    for (let s of selected) {
        if (s.data?.groupId) {
            groupsSelected.add(s.data.groupId);
        }
    }

   selected.push(...this.autoSelectOtherItems(target)); //this is my application-specific logic
    
  //this seemed needed in order to get rid of scenarios where i had already shift-clicked multiple items and was shift-clicking another item
   this._canvas.discardActiveObject();

   const sel = new fabric.ActiveSelection(selected, {
        canvas: this._canvas,
   });
   (this._canvas as any)._target = sel;
    
}

`

[pramod-praella]

@jekelija
Are you facing an issue in iphone ios Safari browser to select the object like this? https://drops.praella.com/v/lwiZZg
If you face the same and find anything please let me know.
Thanks

[jekelija]

Our application actually isnt supported on phone, but on ipad i am not having a problem like that with my solution above.

If i need to set up a sandbox environment on phone to support getting this in, i can, just let me know.

In the meantime, can you let me know if my solution above seems like a reasonable path forward?