Differentiating object move from object selection with transformcontrols

Questions
1

My use-case can be described as follows:
When an object is clicked it gets highlighted (using the Outline render pass) and added to the transformcontrols. This object can then be moved. If another is selected while using the controls it should be ignored. but if the user wants to change the selection it should still be possible.

The problem I have is that I can do just one of these steps. I am making a selection and moving it, and no other object can be selected while there is a selection. Naturally its a bit awkward to click next to your mesh to clear the selection before making a new one.

The question is, how do I differentiate between a user using the transformcontrols and one that is selecting a new element, while using the same click event? `private onMouseUp = () => {
const intersects = this.raycaster.intersectObjects(this.rayCastable, true);

    if ((this.composer.outlinePass.selectedObjects.length === 0 && intersects.length !== 0)) {
        const outlined = [];
        outlined.push(intersects[0].object);
        this.composer.outlinePass.selectedObjects = outlined;

        this.transformControls.attach(intersects[0].object);
        this.scene.add(this.transformControls);
        this.transformControls.setMode('translate');
    }

    if (intersects.length === 0) {
        this.composer.outlinePass.selectedObjects = [];
        this.transformControls.detach();
        this.scene.remove(this.transformControls);
    }
}`

Edit: Formatting seems to be acting a bit finnicky, not too sure why that happened.

2 
        if ((this.composer.outlinePass.selectedObjects.length === 0 && intersects.length !== 0)
        || (!this.transformControls.dragging && intersects.length !== 0)) {
        const outlined = [];
        outlined.push(intersects[0].object);
        this.composer.outlinePass.selectedObjects = outlined;

        this.transformControls.attach(intersects[0].object);
        this.scene.add(this.transformControls);
        this.transformControls.setMode('translate');
    }

    if (intersects.length === 0) {
        this.composer.outlinePass.selectedObjects = [];
        this.transformControls.detach();
        this.scene.remove(this.transformControls);
    }
1 Like