Phaser scrolling group (work in progress)

scrolling.ts

// Author Brad P. Taylor (bradptaylor+github@gmail.com) license MIT
///<reference path="../../../../bower_components/phaser-official/build/phaser.d.ts"/>
///<reference path="../../DefinitelyTyped/scroller/scroller.d.ts"/>
///<reference path="./hvlayoutgroup.ts"/>

module bpt {

    // ------------------------------------------------------------------------

    export class DragScrollerHelperSprite extends bpt.SpritePrefab {

        onDragStart = new Phaser.Signal();
        onDragEnd = new Phaser.Signal();
        onDragMove = new Phaser.Signal();
        downPointer:Phaser.Pointer;

        constructor( game, public resetX, public resetY, key?, frame? ) {
            super( game, resetX, resetY, key, frame );
            //this.alpha = 0;
            this.inputEnabled = true;
            this.input.enableDrag( true, false );
            this.events.onDragStart.add( this.onDragStartHandler, this );
            this.events.onDragStop.add( this.onDragStopHandler, this );
        }

        destroy(destroyChildren) {
            this.onDragMove && this.onDragMove.dispose();
            this.onDragEnd && this.onDragEnd.dispose();
            this.onDragStart && this.onDragStart.dispose();
            this.onDragMove = undefined;
            this.onDragEnd = undefined;
            this.onDragStart = undefined;
            super.destroy(destroyChildren);
        }

        getElapsedMilliseconds() {
            return this.game.time.totalElapsedSeconds()*1000;
        }

        onDragStartHandler( sprite, pointer ) {
            this.downPointer = pointer;
            this.onDragStart.dispatch( this, pointer, this.getElapsedMilliseconds() );
        }

        onDragStopHandler( sprite, pointer ) {
            this.downPointer = undefined;
            this.onDragEnd.dispatch( this, pointer, this.getElapsedMilliseconds() );
            this.position.setTo( this.resetX, this.resetY );
        }

        update() {
            if ( this.input.isDragged ) {
                this.onDragMove.dispatch( this, this.downPointer, this.getElapsedMilliseconds() );
            }
        }

    }

    // ------------------------------------------------------------------------

    export class ScrollingHVGroup extends HVLayoutGroup {

        private inputSprite:DragScrollerHelperSprite;
        private startBind:Phaser.SignalBinding;
        private moveBind:Phaser.SignalBinding;
        private endBind:Phaser.SignalBinding;
        private scroller:Scroller;

        constructor( game, public client_width?, public client_height?, fixed_size_ = 0, horizontal_ = true, fixed_count_ = 1, gap = 5 ) {

            super( game, fixed_size_, horizontal_, fixed_count_, gap );
            this.onlayoutChange.add( this.onLayoutChangeHandler, this );
            this.scroller = new Scroller( this.onScrollHandler.bind(this), {} );

        }

        scrollTo( x, y ) {
            this.position.x = Math.min( Math.max( this.client_width-this.contentWidth, -x ), 0 );
            this.position.y = Math.min( Math.max( this.client_height-this.contentHeight, -y ), 0 );
        }

        onScrollHandler(left: number, top: number, zoom: number) {
            this.scrollTo( left, top );
        }

        onLayoutChangeHandler( layout, width:number, height:number ) {
            console.log( 'content', width, height, "clip", this.client_width, this.client_height );
            this.scroller.setDimensions( this.client_width, this.client_height, width, height );
        }

        detachBoundSignals() {
            this.startBind && this.startBind.detach(); this.startBind = undefined;
            this.moveBind && this.moveBind.detach(); this.moveBind = undefined;
            this.endBind && this.endBind.detach(); this.endBind = undefined;
        }

        releaseReferences() {
            this.detachBoundSignals();
            super.releaseReferences();
        }

        attachInputController( inputSprite:DragScrollerHelperSprite ) {

            this.detachBoundSignals();
            this.inputSprite = inputSprite;

            this.startBind = inputSprite.onDragStart.add( ( spr, pointer, time ) => {
                this.scroller.doTouchStart([pointer], time );
            }, this );

            this.moveBind = inputSprite.onDragMove.add( ( spr, pointer, time ) => {
                this.scroller.doTouchMove([pointer], time );
            }, this );

            this.endBind = inputSprite.onDragEnd.add( ( spr, pointer, time ) => {
                this.scroller.doTouchEnd( time );
            }, this );

        }

    }

    bpt.prefab.Factory.add('bpt.ScrollingHVGroup', ScrollingHVGroup,
        [ ["client_width"], ["client_height"], ["fixed"], ["horizontal"], ["count"], ["gap"] ],
        bpt.prefab.helper_transformed_named_args_to_config);

    bpt.prefab.Factory.addAlias('ScrollingHVGroup', 'bpt.ScrollingHVGroup');

    // ------------------------------------------------------------------------

}

Any example with this? 😃

@jdnichollsc - sorry no example, if I find time to resurrect this codebase I will certainly post one.