PixiJS and VueJS dragging graphic objects

[hickley]

I am trying to work with PixiJS events inside a Vue component following the example here:

http://scottmcdonnell.github.io/pixi-examples/index.html?s=demos&f=dragging.js&title=Dragging
 

Vue component template:

<template>
    <div ref="holder">
        <canvas id="pixi"></canvas>
    </div>
</template>

Vue component script:

<script>

    import * as PIXI from 'pixi.js'

    export default {
        data() {
           app: null,
           widgets: [
             {x: 5, y: 20}, {x: 55, y: 120}, {x: 245, y: 220}, {x: 415, y: 435},
           ]
        }
        mounted () {
            var canvas = document.getElementById('pixi')
            let app = new PIXI.Application({
                                                width: 500,
                                                height: 500,
                                                antialias: true,
                                                transparent: true,
                                                view: canvas
                                            });

            let sprite = new PIXI.Sprite.from("../assets/img/canvas.jpg");
            sprite.width = this.$refs.holder.clientWidth;
            sprite.height = this.$refs.holder.clientHeight;
            app.stage.addChild(sprite);

            this.widgets.forEach(widget => {
                let graphics = new PIXI.Graphics();
                graphics.height = 24;
                graphics.width = 24;
                graphics.beginFill(0x1278BA, 1)
                graphics.drawCircle(0, 0, 12);
                graphics.endFill()
                graphics.buttonMode = true;
                graphics.interactive = true;
                graphics.hitArea = new PIXI.Circle(0, 0, 12);

                graphics.position.x = widget.x;
                graphics.position.y = widget.y;
      
                graphics
                        .on("click", this.widgetClick),
                        .on('mousedown', this.widgetDragStart)
                        .on('touchstart', this.widgetDragStart)
                        // events for drag end
                        .on('mouseup', this.widgetDragEnd)
                        .on('mouseupoutside', this.widgetDragEnd)
                        .on('touchend', this.widgetDragEnd)
                        .on('touchendoutside', this.widgetDragEnd)
                        // events for drag move
                        .on('mousemove', this.widgetDragMove)
                        .on('touchmove', this.widgetDragMove);

                app.stage.addChild(graphics);
          });  
       },
       methods: {
           widgetClick: function(e) {
               console.log("click", e.target)
           },
           widgetDragStart: function(e) {
               console.log("start", this, e.target);
               this.data = e.data;
               this.alpha = 0.5;
               this.dragging = true;
           },
           widgetDragEnd: function(e) {
               console.log("end", e);
               this.alpha = 1;
               this.dragging = false;
               // set the interaction data to null
               this.data = null;
           },
           widgetDragMove: function(e) {
               console.log("move", e);
               if (this.dragging)
               {
                   var newPosition = this.data.getLocalPosition(this.parent);
                   this.position.x = newPosition.x;
                   this.position.y = newPosition.y;
               }
           },
       }
   }

</script>

Issues I have are

In the drag event handlers 'this' is the Vue context, I can't see how it could ever be a Pixi object / context even if this was decoupled from a Vue component.
So in the dragmove eventhandler as it stands above it fails with as this.parent is undefined

If I change the documented example for the drag move event handler to be like below dragging one widget drags all the widgets together:

widgetDragMove: function(e) {
    console.log("move");
    if (this.dragging)
    {
         var newPosition = this.data.getLocalPosition(e.currentTarget);
         e.currentTarget.position.x = newPosition.x;
         e.currentTarget.position.y = newPosition.y;
    }
},