CODEWITHSUNDEEP
macosnsscrollviewnsevent
MachPortMassenger
MachPortMassenger

Reputation: 235

How do I implement scrollWheel elastic scrolling on OSX

I am trying to create a custom view, which is similar to NSScrollView, but is based on CoreAnimation CAScrollLayer/CATiledLayer. Basically, my app requires a lot of near realtime CGPath drawing, and animates these paths using shape layers (it's similar to the way GarageBand animates while recording). The first prototype I created used NSScrollView, but I could not get more than 20 frames per second with it (The reason was that NSRulerView updates by drawing every time the scrollEvent happens, and the entire call flow from -[NSClipView scrollToPoint] to -[NSScrollView reflectScrolledClipView:] is extremely expensive and inefficient).

I've created a custom view that uses CAScrollLayer as scrolling mechanism and CATiledLayer as the traditional documentView (for infinite scrolling option), and now I can get close to 60fps. However, I'm having hard time implementing scrollWheel elastic scrolling, and I'm not sure how to do it. Here's the code I have so far, and would really appreciate if someone can tell me how to implement elasticScrolling.

-(void) scrollWheel:(NSEvent *)theEvent{
    NSCAssert(mDocumentScrollLayer, @"The Scroll Layer Cannot be nil");
    NSCAssert(mDocumentLayer, @"The tiled layer cannot be nil");
    NSCAssert(self.layer, @"The base layer of view cannot be nil");
    NSCAssert(mRulerLayer, @"The ScrollLayer for ruler cannot be nil");

    NSPoint locationInWindow = [theEvent locationInWindow];
    NSPoint locationInBaseLayer = [self convertPoint:locationInWindow
                                        fromView:nil];


    NSPoint locationInRuler = [mRulerLayer convertPoint:locationInBaseLayer
                                          fromLayer:self.layer];
    if ([mRulerLayer containsPoint:locationInRuler]) {
       return;
    }
    CGRect docRect = [mDocumentScrollLayer convertRect:[mDocumentLayer bounds]
                                             fromLayer:mDocumentLayer];

    CGRect scrollRect = [mDocumentScrollLayer visibleRect];
    CGPoint newOrigin = scrollRect.origin;

    CGFloat deltaX = [theEvent scrollingDeltaX];
    CGFloat deltaY = [theEvent scrollingDeltaY];

    if ([self isFlipped]) {
     deltaY *= -1;
    }

    scrollRect.origin.x -= deltaX;
    scrollRect.origin.y += deltaY;

    if ((NSMinX(scrollRect) < NSMinX(docRect)) ||
        (NSMaxX(scrollRect) > NSMaxX(docRect)) ||
        (NSMinY(scrollRect) < NSMinY(docRect)) ||
        (NSMaxY(scrollRect) > NSMaxX(docRect))) {
        mIsScrollingPastEdge = YES;
        CGFloat heightPhase = 0.0;
        CGFloat widthPhase  = 0.0;
        CGSize size = [self frame].size;

    if (NSMinX(scrollRect) < NSMinX(docRect)) {
        widthPhase = ABS(NSMinX(scrollRect) - NSMinX(docRect));
    }

    if (NSMaxX(scrollRect) > NSMaxX(docRect)) {
        widthPhase = ABS(NSMaxX(scrollRect) - NSMaxX(docRect));
    }

    if (NSMinY(scrollRect) < NSMinY(docRect)) {
        heightPhase = ABS(NSMinY(scrollRect) - NSMinY(docRect));
    }

    if (NSMaxY(scrollRect) > NSMaxY(docRect)) {
        heightPhase = ABS(NSMaxY(scrollRect) - NSMaxY(docRect));
    }

    if (widthPhase > size.width/2.0) {
        widthPhase = size.width/2.0;
    }

    if (heightPhase > size.width/2.0) {
        heightPhase = size.width/2.0;
    }

    deltaX = deltaX*(1-(2*widthPhase/size.width));
    deltaY = deltaY*(1-(2*heightPhase/size.height));
}

newOrigin.x -= deltaX;
newOrigin.y += deltaY;

if ( mIsScrollingPastEdge &&
    (([theEvent phase] == NSEventPhaseEnded) ||
     ([theEvent momentumPhase] == NSEventPhaseEnded)
     )
    ){
    CGPoint confinedScrollPoint = [mDocumentScrollLayer bounds].origin;
    mIsScrollingPastEdge = NO;
    CGRect visibleRect = [mDocumentScrollLayer visibleRect];

    if (NSMinX(scrollRect) < NSMinX(docRect)){
        confinedScrollPoint.x = docRect.origin.x;
    }

    if(NSMinY(scrollRect) < NSMinY(docRect)) {
        confinedScrollPoint.y = docRect.origin.y;
    }

    if (NSMaxX(scrollRect) > NSMaxX(docRect)) {
        confinedScrollPoint.x = NSMaxX(docRect) - visibleRect.size.width;
    }

    if (NSMaxY(scrollRect) > NSMaxY(docRect)){
        confinedScrollPoint.y = NSMaxY(docRect) - visibleRect.size.height;
    }

    [mDocumentScrollLayer scrollToPoint:confinedScrollPoint];
    CGPoint rulerPoint = [mRulerLayer bounds].origin;
    rulerPoint.x = [mDocumentLayer bounds].origin.x;
    [mRulerLayer scrollToPoint:rulerPoint];
    return;
}

CGPoint rulerPoint = [mDocumentScrollLayer convertPoint:newOrigin
                                                toLayer:mRulerLayer];
rulerPoint.y = [mRulerLayer bounds].origin.y;

if (!mIsScrollingPastEdge) {
    [CATransaction setDisableActions:YES];
    [mDocumentScrollLayer scrollToPoint:newOrigin];
    [CATransaction commit];
}else{
    [mDocumentScrollLayer scrollToPoint:newOrigin];
    [mRulerLayer scrollToPoint:rulerPoint];
}

}

Upvotes: 1

Views: 1429

Answers (2)

Sentry.co
Sentry.co

Reputation: 5569

The Core concept of adding ElasticScrolling is to use a SpringSolver.

This has a ElasticScrollView that you can reuse:
https://github.com/eonist/Element

Upvotes: 0

John Wright
John Wright

Reputation: 2478

Take a look at TUIScrollView at https://github.com/twitter/twui.

Upvotes: 1

Related Questions