I want to drag the knob from 0 to 359 degree.

[Irfan]

I am trying to bound the knob from 0 degree to 359 degree. I have added bounds property to the object to bound the rotation.

bounds: {
    minRotation: 0,
    maxRotation: 359,
}

But, when I try to drag the knob from last quadrant(between 270 degree to 359 degree) then the drag jumps and start the drag from 0 degree.

I want the drag should occur from 0 to 359 degree and not to move like a wheel. The user has to drag in anti-clock wise direction to move at 0 degree.

 

Steps to reproduce:

1.  Drag the knob till the last quadrant between 270 degree to 359 degree similar to the clock between 9 - 12 and then leave the mouse.
2.  Start the drag again from where we have left between 270 degree to 359 degree. Here, you can see the drag starts from 0 degree even we have pressed the drag to start from last quadrant between 270 degree to 359 degree.

 

Drag works perfectly in 1st, 2nd and 3rd quadrant but have the issue in 4th quadrant.

If I remove the bounds property it works but, I want the bounds property to bound the drag from 0 to 359 degree. Thank you.

See the Pen KEmRXx by anon (@anon) on CodePen

[GreenSock]

The problem is caused by all that code in the onPress that adjusts the rotation - I'm curious why you have that there to begin with. Can't you just simplify it to this?: 

See the Pen 942ac875b5448c63eb539a1a648dfafd by GreenSock (@GreenSock) on CodePen

 

 

[Irfan]

On 3/9/2019 at 10:57 AM, GreenSock said:

The problem is caused by all that code in the onPress that adjusts the rotation - I'm curious why you have that there to begin with. Can't you just simplify it to this?: 

See the Pen 942ac875b5448c63eb539a1a648dfafd by GreenSock (@GreenSock) on CodePen

 

I have written some functionality in onPress, onDrag and onRelease methods which needs to be executed. Here, I need to get the rotation and set my knob to that rotation.

 

function pressHotspotPointer(e) {
    $('#video-container').addClass('grabbing');
    if (!adjusting) {
        var offset = 90;
        // console.log('1st: ' + this.pointerY + ', ' + this.rotationOrigin.y);
        // console.log('2nd: ' + this.pointerX + ', ' + this.rotationOrigin.x);
        var rotationRAD = Math.atan2(
            this.pointerY - this.rotationOrigin.y,
            this.pointerX - this.rotationOrigin.x
        );
        // console.log(rotationRAD);
        var rotation = rotationRAD * RAD2DEG + offset;
        console.log(rotation)
        rotation = Math.round((rotation / 90) * 90);
        console.log(rotation);
        if (rotation > 350 && rotation <= 450) {  
            console.log('rotation inside if');
            rotation = rotation - 370;
        }
        
        // console.log("rotation after: " + rotation);
        TweenLite.set(this.target, { rotation: rotation });
        adjusting = true;
        // this.update();
        this.endDrag(e);
        this.startDrag(e);
        this.isDragging = false;
        adjusting = false;
    } else {
        $('#video-container').removeClass('grabbing');
    }
}

/*----------on release method----------*/
onRelease: function () {
            if ($('#video-container').hasClass('grabbing')) {
                return;
            }

            drawProgressBar(getNearestAngle(this.rotation));
            moveHotspotPointer(getNearestAngle(this.rotation));
            $('#dash-click-' + getNearestAngle(this.rotation)).click();
            $('#video-container').removeClass('grabbing');
        }

 

 

[GreenSock]

I'm not sure I follow all that you're trying to do, but hopefully my answer in your other thread solves this: 

Is your issue resolved? 

 

[Irfan]

This worked for me. Thank you.