Dragging a rectangle in cocoa

Question

I'm drawing a rectangle on a custom subclass of NSView which can then be dragged within the borders of the view:

enter image description here

The code for doing this is:

    // Get the starting location of the mouse down event.
NSPoint location = [self convertPoint: [event locationInWindow] fromView: nil];

// Break out if this is not within the bounds of the rect.
if (!NSPointInRect(location, [self boundsOfAllControlPoints])) {
    return;
}

while (YES) {

    // Begin modal mouse tracking, looking for mouse dragged and mouse up events
    NSEvent *trackingEvent = [[self window] nextEventMatchingMask:(NSLeftMouseDraggedMask | NSLeftMouseUpMask)];

    // Get tracking location and convert it to point in the view.
    NSPoint trackingLocation = [self convertPoint:[trackingEvent locationInWindow] fromView:nil];

    // Calculate the delta's of x and y compared to the previous point.
    long dX = location.x - trackingLocation.x;
    long dY = location.y - trackingLocation.y;

    // Update all points in the rect
    for (int i = 0; i < 4; i++) {
        NSPoint newPoint = NSMakePoint(points[i].x - dX, points[i].y - dY);
        points[i] = newPoint;
    }

    NSLog(@"Tracking location x: %f y: %f", trackingLocation.x, trackingLocation.y);

    // Set current location as previous location.
    location = trackingLocation;

    // Ask for a redraw.
    [self setNeedsDisplay:YES];

    // Stop mouse tracking if a mouse up is received.
    if ([trackingEvent type] == NSLeftMouseUp) {
        break;
    }

}

I basically catch a mouse down event and check whether its location is inside the draggable rect. If it is, I start tracking the movement of the mouse in trackingEvent. I calculate the delta's for x and y coordinates, create new points for the draggable rect, and request a refresh of the views display.

Although it works, it looks a bit "amateurish" as during the drag, the mouse pointer will catch up with the shape being dragged and will eventually cross its borders. In other drag operations one will see the mouse pointer fixed to the position of the object being dragged, from start to finish of the drag operation.

What is causing this effect?

EDIT:

I've changed my approach following Rob's answer and adopted the three method approach:

- (void) mouseDown: (NSEvent*) event {

    // There was a mouse down event which might be in the thumbnail rect.

    [self setDragStartPoint: [self convertPoint: [event locationInWindow] fromView: nil]];

    // Indicate we have a valid start of a drag.
    if (NSPointInRect([self dragStartPoint], [self boundsOfAllControlPoints])) {
        [self setValidDrag: YES];
    }

}

- (void) mouseDragged: (NSEvent *) anEvent {

    // Return if a valid drag was not detected during a mouse down event.
    if (![self validDrag]) {
        return;
    }

    NSLog(@"Tracking a drag.");

    // Get tracking location and convert it to point in the view.
    NSPoint trackingLocation = [self convertPoint: [anEvent locationInWindow] fromView: nil];

    // Calculate the delta's of x and y compared to the previous point.
    long dX = [self dragStartPoint].x - trackingLocation.x;
    long dY = [self dragStartPoint].y - trackingLocation.y;

    // Update all points in the rect
    for (int i = 0; i < 4; i++) {
        NSPoint newPoint = NSMakePoint(points[i].x - dX, points[i].y - dY);
        points[i] = newPoint;
    }

    // Ask for a redraw.
    [self setNeedsDisplay:YES];

    NSLog(@"Tracking location x: %f y: %f", trackingLocation.x, trackingLocation.y);

    // Set current location as previous location.
    [self setDragStartPoint: trackingLocation];

    NSLog(@"Completed mouseDragged method. Allow for repaint.");

}

- (void) mouseUp: (NSEvent *) anEvent {

    // End the drag.
    [self setValidDrag: NO];
    [self setNeedsDisplay: YES];

}

Although the effect is slightly better, there's still a noticeable delay with the rect eventually dragging behind the direction of movement of the mouse pointer. This is especially noticeable when I move the mouse slowly during a drag.

EDIT 2:

Got it. The problem was with calculating the deltas. I used long for that while I should use float. Works great now.

Thank you for sharing your codes to achieve the mouse dragging thing. — Tommy

Rob Napier Rob Napier · Accepted Answer · 2011-12-05T23:24:31

You're holding onto the event loop during the draw, which means that the square never gets to redraw. Your call to setNeedsDisplay: doesn't draw anything. It just flags the view to be redrawn. It can't redraw until this routine returns, which you don't do until the mouse button is released.

Read Handling Mouse Dragging Operations for a full discussion on how to implement dragging in Cocoa. You either need to return from mouseDown: and override mouseDragged: and mouseUp:, or you need to pump the event loop yourself so that the drawing cycle can process.

I tend to recommend the first approach, even though it requires multiple methods. Pumping the event loop can create very surprising bugs and should be used with caution. The most common bugs in my experience are due to delayed selectors firing when you pump the event loop, causing "extra" code to run in the middle of your dragging routine. In some cases, this can cause reentrance and deadlock. (I've had this happen....)

Dragging a rectangle in cocoa

1 Answers