pixi-viewport - npm Package Compare versions

Comparing version 0.5.2 to 0.6.0

docs/code.js

@@ -24,3 +24,3 @@ const PIXI = require('pixi.js')
 {
-    _viewport = new Viewport(_renderer.stage)
+    _viewport = new Viewport(_renderer.stage, { div: _renderer.div })
     _viewport
@@ -27,0 +27,0 @@ .drag()

docs/gui.js

@@ -18,7 +18,9 @@ let _viewport, _drawWorld, _gui, _options, _world
             pinch: true,
-            clampScreen: false,
+            noDrag: false,
             minWidth: 0,
             minHeight: 0,
             maxWidth: 0,
-            maxHeight: 0
+            maxHeight: 0,
+            centerX: 0,
+            centerY: 0
         },
@@ -127,3 +129,4 @@ clamp: {
     {
-        _viewport.pinch({ clampScreen: _options.pinch.clampScreen, minWidth: _options.pinch.minWidth, maxWidth: _options.pinch.maxWidth, minHeight: _options.pinch.minHeight, maxHeight: _options.pinch.maxHeight })
+        const center = (_options.pinch.centerX || _options.pinch.centerY) ? { x: _options.pinch.centerX, y: _options.pinch.centerY } : null
+        _viewport.pinch({ noDrag: _options.pinch.noDrag, minWidth: _options.pinch.minWidth, maxWidth: _options.pinch.maxWidth, minHeight: _options.pinch.minHeight, maxHeight: _options.pinch.maxHeight, center })
     }
@@ -133,7 +136,9 @@
     {
-        clampZoom = pinch.add(_options.pinch, 'clampScreen')
-        minWidth = pinch.add(_options.pinch, 'minWidth')
-        maxWidth = pinch.add(_options.pinch, 'maxWidth')
-        minHeight = pinch.add(_options.pinch, 'minHeight')
-        maxHeight = pinch.add(_options.pinch, 'maxHeight')
+        noDrag = pinch.add(_options.pinch, 'noDrag').onChange(change)
+        minWidth = pinch.add(_options.pinch, 'minWidth').onChange(change)
+        maxWidth = pinch.add(_options.pinch, 'maxWidth').onChange(change)
+        minHeight = pinch.add(_options.pinch, 'minHeight').onChange(change)
+        maxHeight = pinch.add(_options.pinch, 'maxHeight').onChange(change)
+        centerX = pinch.add(_options.pinch, 'centerX').onChange(change)
+        centerY = pinch.add(_options.pinch, 'centerY').onChange(change)
     }
@@ -153,3 +158,3 @@
                 _viewport.removePlugin('pinch')
-                pinch.remove(clampZoom)
+                pinch.remove(noDrag)
                 pinch.remove(minWidth)
@@ -159,5 +164,7 @@ pinch.remove(maxWidth)
                 pinch.remove(maxHeight)
+                pinch.remove(centerX)
+                pinch.remove(centerY)
             }
         })
-    let clampZoom, minWidth, maxWidth, minHeight, maxHeight
+    let noDrag, minWidth, maxWidth, minHeight, maxHeight, centerX, centerY
     if (_options.pinch)
@@ -319,3 +326,3 @@ {
     let speed, radius
-    const follow = _gui.addFolder('follow')
+    const follow = _gui.addFolder('follow (use arrows to manually control)')
     follow.add(_options.follow, 'follow').onChange(
@@ -322,0 +329,0 @@ function (value)

package.json

 {
   "name": "pixi-viewport",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "A highly configurable viewport/2D camera designed to work with pixi.js. Featurse inclue dragging, pinch-to-zoom, decelerated dragging, following target, snapping to point, clamping, bouncing on edges.",
@@ -35,4 +35,5 @@ "main": "index.js",
   "dependencies": {
-    "pixi-ease": "^0.10.1",
-    "yy-input": "^1.2.1",
+    "pixi-ease": "^0.10.2",
+    "yy-input": "^0.4.0",
+    "yy-loop": "^0.1.3",
     "yy-renderer": "^1.3.3"
@@ -39,0 +40,0 @@ },

README.md

@@ -28,2 +28,3 @@ # pixi-viewport
      * @param {number} [options]
+     * @param {HTMLElement} [options.div=document.body] use this div to create the mouse/touch listeners
      * @param {number} [options.screenWidth] these values are needed for clamp, bounce, and pinch plugins
@@ -35,2 +36,4 @@ * @param {number} [options.screenHeight]
      * @param {number} [options.maxFrameTime=1000 / 60] maximum frame time for animations
+     * @param {boolean} [options.pauseOnBlur] pause when app loses focus
+     * @param {boolean} [options.noListeners] manually call touch/mouse callback down/move/up
      */
@@ -41,4 +44,5 @@ constructor(container, options)
      * start requestAnimationFrame() loop to handle animations; alternatively, call update() manually on each frame
+     * @inherited from yy-loop
      */
-    start()
+    // start()
 
@@ -49,8 +53,9 @@ /**
      */
-    update(elapsed)
+    loop(elapsed)
 
     /**
      * stop loop
+     * @inherited from yy-loop
      */
-    stop()
+    // stop()
 
@@ -211,8 +216,8 @@ /**
      * NOTE: screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly
-     * @param {object} [options]
-     * @param {boolean} [options.clampScreen] clamp minimum zoom to size of screen
+     * @param {boolean} [options.noDrag] disable two-finger dragging
+     * @param {PIXI.Point} [options.center] place this point at center during zoom instead of center of two fingers
      * @param {number} [options.minWidth] clamp minimum width
      * @param {number} [options.minHeight] clamp minimum height
-     * @param {number} [options.maxWidth] clamp minimum width
-     * @param {number} [options.maxHeight] clamp minimum height
+     * @param {number} [options.maxWidth] clamp maximum width
+     * @param {number} [options.maxHeight] clamp maximum height
      * @return {Viewport} this
@@ -219,0 +224,0 @@ */

src/bounce.js

@@ -72,4 +72,5 @@ const Ease = require('pixi-ease')
         }
+        const pointers = this.parent.input.pointers
         decelerate = decelerate || {}
-        if (this.parent.pointers.length === 0 && ((!this.toX || !this.toY) && (!decelerate.x || !decelerate.y)))
+        if (pointers.length === 0 && ((!this.toX || !this.toY) && (!decelerate.x || !decelerate.y)))
         {
@@ -76,0 +77,0 @@ oob = oob || this.parent.OOB()

src/decelerate.js

@@ -28,5 +28,6 @@ const Plugin = require('./plugin')
 
-    move()
+    move(x, y, data)
     {
-        if (this.parent.pointers.length === 1 || (this.parent.pointers.length > 1 && !this.parent.plugin('pinch')))
+        const pointers = data.input.pointers
+        if (pointers.length === 1 || (pointers.length > 1 && !this.parent.plugin('pinch')))
         {
@@ -41,5 +42,6 @@ this.saved.push({ x: this.parent.container.x, y: this.parent.container.y, time: performance.now() })
 
-    up()
+    up(x, y, data)
     {
-        if (this.parent.pointers.length === 0 && this.saved.length)
+        const pointers = data.input.pointers
+        if (pointers.length === 0 && this.saved.length)
         {
@@ -46,0 +48,0 @@ const now = performance.now()

src/drag.js

@@ -10,19 +10,39 @@ const Plugin = require('./plugin')
 
-    move(e)
+    down(x, y, data)
     {
-        if (this.parent.pointers.length === 1 || (this.parent.pointers.length > 1 && !this.parent.plugin('pinch')))
+        const pointers = data.input.pointers
+        if (pointers.length === 1)
         {
-            const last = this.parent.pointers[0].last
-            const pos = e.data.global
-            const distX = pos.x - last.x
-            const distY = pos.y - last.y
-            if (this.parent.checkThreshold(distX) || this.parent.checkThreshold(distY))
+            this.last = { x, y }
+        }
+    }
+
+    move(x, y, data)
+    {
+        if (!this.last)
+        {
+            this.last = { x, y }
+        }
+        else
+        {
+            const pointers = data.input.pointers
+            if (pointers.length === 1 || (pointers.length > 1 && !this.parent.plugin('pinch')))
             {
-                this.parent.container.x += distX
-                this.parent.container.y += distY
-                this.parent.pointers[0].last = { x: pos.x, y: pos.y }
-                this.inMove = true
+                const distX = x - this.last.x
+                const distY = y - this.last.y
+                if (this.parent.checkThreshold(distX) || this.parent.checkThreshold(distY))
+                {
+                    this.parent.container.x += distX
+                    this.parent.container.y += distY
+                    this.last = { x, y }
+                    this.inMove = true
+                }
             }
         }
     }
+
+    up()
+    {
+        this.last = null
+    }
 }

src/pinch.js

@@ -8,7 +8,8 @@ const Plugin = require('./plugin')
      * @param {object} [options]
-     * @param {boolean} [options.clampScreen] clamp minimum zoom to size of screen
+     * @param {boolean} [options.noDrag] disable two-finger dragging
+     * @param {PIXI.Point} [options.center] place this point at center during zoom instead of center of two fingers
      * @param {number} [options.minWidth] clamp minimum width
      * @param {number} [options.minHeight] clamp minimum height
-     * @param {number} [options.maxWidth] clamp minimum width
-     * @param {number} [options.maxHeight] clamp minimum height
+     * @param {number} [options.maxWidth] clamp maximum width
+     * @param {number} [options.maxHeight] clamp maximum height
      */
@@ -19,3 +20,4 @@ constructor(parent, options)
         options = options || {}
-        this.clampScreen = options.clampScreen
+        this.noDrag = options.noDrag
+        this.center = options.center
         this.minWidth = options.minWidth
@@ -30,59 +32,49 @@ this.maxWidth = options.maxWidth
         let x = this.parent.container.scale.x, y = this.parent.container.scale.y
-        const width = this.parent.container.scale.x * this.parent.worldWidth
-        const height = this.parent.container.scale.y * this.parent.worldHeight
-        if (this.minZoom)
+        if (this.minWidth && this.parent.worldScreenWidth < this.minWidth)
         {
-            if (this.minWidth && width < this.minWidth)
-            {
-                x = this.minWidth / this.parent.worldWidth
-            }
-            if (typeof this.minHeight !== 'undefined' && height < this.minHeight)
-            {
-                y = this.minHeight / this.parent.worldHeight
-            }
+            x = this.minWidth / this.parent.worldWidth
         }
-        if (this.maxZoom)
+        if (this.minHeight && this.parent.worldScreenHeight < this.minHeight)
         {
-            if (typeof this.maxWidth !== 'undefined' && width > this.maxWidth)
-            {
-                x = this.maxWidth / this.parent.worldWidth
-            }
-            if (typeof this.maxHeight !== 'undefined' && height > this.maxHeight)
-            {
-                y = this.maxHeight / this.worldHeight
-            }
+            y = this.minHeight / this.parent.worldHeight
         }
-        if (this.clampScreen)
+        if (this.maxWidth && this.parent.worldScreenWidth > this.maxWidth)
         {
-            if (width < this.parent.screenWidth)
-            {
-                x = this.parent.screenWidth / this.parent.worldWidth
-            }
-            if (height < this.parent.screenHeight)
-            {
-                y = this.parent.screenHeight / this.parent.worldHeight
-            }
+            x = this.parent.screenWidth / this.parent.worldWidth
         }
+        if (this.maxHeight && this.parent.worldScreenHeight > this.maxHeight)
+        {
+            y = this.parent.screenHeight / this.parent.worldHeight
+        }
         this.parent.container.scale.set(x, y)
     }
 
-    move(e)
+    move(x, y, data)
     {
-        if (this.parent.pointers.length >= 2)
+        const pointers = data.input.pointers
+        if (pointers.length >= 2)
         {
-            const first = this.parent.pointers[0]
-            const second = this.parent.pointers[1]
-            const last = Math.sqrt(Math.pow(second.last.x - first.last.x, 2) + Math.pow(second.last.y - first.last.y, 2))
-            if (first.id === e.data.pointerId)
+            const first = pointers[0]
+            const second = pointers[1]
+            let last
+            if (first.last && second.last)
             {
-                first.last = { x: e.data.global.x, y: e.data.global.y }
+                last = Math.sqrt(Math.pow(second.last.x - first.last.x, 2) + Math.pow(second.last.y - first.last.y, 2))
             }
-            else if (second.id === e.data.pointerId)
+            if (first.identifier === data.id)
             {
-                second.last = { x: e.data.global.x, y: e.data.global.y }
+                first.last = { x, y }
             }
+            else if (second.identifier === data.id)
+            {
+                second.last = { x, y }
+            }
             if (last)
             {
+                let oldPoint
                 const point = { x: first.last.x + (second.last.x - first.last.x) / 2, y: first.last.y + (second.last.y - first.last.y) / 2 }
-                const oldPoint = this.parent.container.toLocal(point)
+                if (!this.center)
+                {
+                    oldPoint = this.parent.container.toLocal(point)
+                }
 
@@ -93,13 +85,16 @@ const dist = Math.sqrt(Math.pow(second.last.x - first.last.x, 2) + Math.pow(second.last.y - first.last.y, 2))
                 this.parent.container.scale.y += change
+                this.clamp()
 
-                if (this.clampScreen || this.minWidth || this.maxWidth || this.minHeight || this.maxHeight)
+                if (this.center)
                 {
-                    this.clampZoom()
+                    this.parent.moveCenter(this.center)
                 }
-                const newPoint = this.parent.container.toGlobal(oldPoint)
+                else
+                {
+                    const newPoint = this.parent.container.toGlobal(oldPoint)
+                    this.parent.container.x += point.x - newPoint.x
+                    this.parent.container.y += point.y - newPoint.y
+                }
 
-                this.parent.container.x += point.x - newPoint.x
-                this.parent.container.y += point.y - newPoint.y
-
-                if (this.lastCenter)
+                if (!this.noDrag && this.lastCenter)
                 {
@@ -114,5 +109,6 @@ this.parent.container.x += point.x - this.lastCenter.x
 
-    up()
+    up(x, y, data)
     {
-        if (this.parent.pointers.length < 2)
+        const pointers = data.input.pointers
+        if (pointers.length < 2)
         {
@@ -119,0 +115,0 @@ this.lastCenter = null

src/viewport.js

@@ -1,2 +0,3 @@
-const Events = require('eventemitter3')
+const Loop = require('yy-loop')
+const Input = require('yy-input')
 
@@ -14,3 +15,3 @@ const Drag = require('./drag')
 
-module.exports = class Viewport extends Events
+module.exports = class Viewport extends Loop
 {
@@ -20,2 +21,3 @@ /**
      * @param {number} [options]
+     * @param {HTMLElement} [options.div=document.body] use this div to create the mouse/touch listeners
      * @param {number} [options.screenWidth] these values are needed for clamp, bounce, and pinch plugins
@@ -27,10 +29,12 @@ * @param {number} [options.screenHeight]
      * @param {number} [options.maxFrameTime=1000 / 60] maximum frame time for animations
+     * @param {boolean} [options.pauseOnBlur] pause when app loses focus
+     * @param {boolean} [options.noListeners] manually call touch/mouse callback down/move/up
      */
     constructor(container, options)
     {
-        super()
+        options = options || {}
+        super({ pauseOnBlur: options.pauseOnBlur, maxFrameTime: options.maxFrameTime })
         this.container = container
         this.pointers = []
         this.plugins = []
-        options = options || {}
         this.screenWidth = options.screenWidth
@@ -42,2 +46,7 @@ this.screenHeight = options.screenHeight
         this.maxFrameTime = options.maxFrameTime || 1000 / 60
+        if (!options.noListeners)
+        {
+            this.listeners(options.div || document.body, options.threshold)
+        }
+        this.add(this.loop.bind(this))
     }
@@ -47,31 +56,11 @@
      * start requestAnimationFrame() loop to handle animations; alternatively, call update() manually on each frame
+     * @inherited from yy-loop
      */
-    start()
-    {
-        this.running = performance.now()
-        this.loop()
-        return this
-    }
+    // start()
 
     /**
-     * loop through updates
-     * @private
-     */
-    loop()
-    {
-        if (this.running)
-        {
-            const now = performance.now()
-            let elapsed = now - this.running
-            elapsed = elapsed > this.maxFrameTime ? this.maxFrameTime : elapsed
-            this.update(elapsed)
-            requestAnimationFrame(this.loop.bind(this))
-        }
-    }
-
-    /**
      * update loop -- may be called manually or use start/stop() for Viewport to handle updates
      * @param {number} elapsed time in ms
      */
-    update(elapsed)
+    loop(elapsed)
     {
@@ -89,8 +78,5 @@ for (let plugin of PLUGIN_ORDER)
      * stop loop
+     * @inherited from yy-loop
      */
-    stop()
-    {
-        this.running = false
-        return this
-    }
+    // stop()
 
@@ -123,28 +109,9 @@ /**
      */
-    listeners()
+    listeners(div, threshold)
     {
-        if (this.plugin('drag') || this.plugin('pinch'))
-        {
-            if (!this.container.interactive)
-            {
-                this.container.interactive = true
-                this.container.on('pointerdown', this.down.bind(this))
-                this.container.on('pointermove', this.move.bind(this))
-                this.container.on('pointerup', this.up.bind(this))
-                this.container.on('pointercancel', this.up.bind(this))
-                this.container.on('pointerupoutside', this.up.bind(this))
-            }
-        }
-        else
-        {
-            if (this.container.interactive)
-            {
-                this.container.interactive = false
-                this.container.removeListener('pointerdown', this.down.bind(this))
-                this.container.removeListener('pointermove', this.move.bind(this))
-                this.container.removeListener('pointerup', this.up.bind(this))
-                this.container.removeListener('pointercancel', this.up.bind(this))
-                this.container.removeListener('pointerupoutside', this.up.bind(this))
-            }
-        }
+        this.input = new Input(div, { threshold, preventDefault: true })
+        this.input.on('down', this.down, this)
+        this.input.on('move', this.move, this)
+        this.input.on('up', this.up, this)
+        this.input.on('click', this.click, this)
     }
@@ -155,16 +122,5 @@
      * @private
-     * @param {event} e
      */
-    down(e)
+    down()
     {
-        // fixes a bug when highlighting
-        if (e.data.identifier === 'MOUSE')
-        {
-            this.pointers = []
-        }
-        this.pointers.push({ id: e.data.pointerId, last: { x: e.data.global.x, y: e.data.global.y }, saved: [] })
-        if (this.pointers.length === 1)
-        {
-            this.moved = false
-        }
         for (let type of PLUGIN_ORDER)
@@ -174,3 +130,3 @@ {
             {
-                this.plugins[type].down(e)
+                this.plugins[type].down(...arguments)
             }
@@ -185,3 +141,2 @@ }
         {
-            this.moved = true
             return true
@@ -195,5 +150,4 @@ }
      * @private
-     * @param {event} e
      */
-    move(e)
+    move()
     {
@@ -204,23 +158,5 @@ for (let type of PLUGIN_ORDER)
             {
-                this.plugins[type].move(e)
+                this.plugins[type].move(...arguments)
             }
         }
-        if (this.pointers.length)
-        {
-            if (this.pointers.length > 1)
-            {
-                this.moved = true
-            }
-            else
-            {
-                const last = this.pointers[0].last
-                const pos = e.data.global
-                const distX = pos.x - last.x
-                const distY = pos.y - last.y
-                if (this.checkThreshold(distX) || this.checkThreshold(distY))
-                {
-                    this.moved = true
-                }
-            }
-        }
     }
@@ -231,17 +167,5 @@
      * @private
-     * @param {event} e
      */
-    up(e)
+    up()
     {
-        for (let i = 0; i < this.pointers.length; i++)
-        {
-            if (this.pointers[i].id === e.data.pointerId)
-            {
-                if (this.pointers.length === 1 && !this.moved)
-                {
-                    this.emit('click', { screen: e.data.global, world: this.toWorld(e.data.global) })
-                }
-                this.pointers.splice(i, 1)
-            }
-        }
         for (let type of PLUGIN_ORDER)
@@ -251,3 +175,3 @@ {
             {
-                this.plugins[type].up(e)
+                this.plugins[type].up(...arguments)
             }
@@ -257,2 +181,8 @@ }
 
+    click(x, y)
+    {
+        const point = { x, y }
+        this.emit('click', { screen: point, world: this.toWorld(point) })
+    }
+
     /**
@@ -514,3 +444,2 @@ * change coordinates from screen to world
         this.plugins[type] = null
-        this.listeners()
     }
@@ -534,3 +463,2 @@
         this.plugins['drag'] = new Drag(this)
-        this.listeners()
         return this
@@ -582,8 +510,8 @@ }
      * NOTE: screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly
-     * @param {object} [options]
-     * @param {boolean} [options.clampScreen] clamp minimum zoom to size of screen
+     * @param {boolean} [options.noDrag] disable two-finger dragging
+     * @param {PIXI.Point} [options.center] place this point at center during zoom instead of center of two fingers
      * @param {number} [options.minWidth] clamp minimum width
      * @param {number} [options.minHeight] clamp minimum height
-     * @param {number} [options.maxWidth] clamp minimum width
-     * @param {number} [options.maxHeight] clamp minimum height
+     * @param {number} [options.maxWidth] clamp maximum width
+     * @param {number} [options.maxHeight] clamp maximum height
      * @return {Viewport} this
@@ -594,3 +522,2 @@ */
         this.plugins['pinch'] = new Pinch(this, options)
-        this.listeners()
         return this
@@ -597,0 +524,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2366697

increased by0.2%

Lines of code

56862

increased by0.31%

Number of lines in readme file

249

increased by2.05%

Worsened metrics

Dependency count

4

increased by33.33%

Number of package files

19

decreased by-5%

Dependency changes

• + Addedyy-loop@^0.1.3

• + Addedyy-input@0.4.0(transitive)

• - Removedpixi-ease@0.11.0(transitive)

• - Removedyy-input@1.4.0(transitive)

• Updatedpixi-ease@^0.10.2

• Updatedyy-input@^0.4.0