added a divWheel option to scrollbox

davidfig · May 4, 2021 · 3386da8 · 3386da8
1 parent 62db8a8
commit 3386da8
Show file tree

Hide file tree

Showing 6 changed files with 102,155 additions and 91,683 deletions.
diff --git a/docs/code.js b/docs/code.js
@@ -1,21 +1,25 @@
 import * as PIXI from 'pixi.js'
+import { Viewport } from 'pixi-viewport'
 import FPS from 'yy-fps'
 import Random from 'yy-random'
 
 import { Scrollbox } from '../src/scrollbox'
 import highlight from './highlight.js'
 
-let _renderer, _fps, g
+let _app, _fps, g
 
-function vertical()
-{
+function vertical() {
     const size = 500
-    const scrollbox = _renderer.stage.addChild(new Scrollbox({ boxWidth: 300, boxHeight: 300 }))
+    const scrollbox = _app.stage.addChild(new Scrollbox({
+        boxWidth: 300,
+        boxHeight: 300,
+        divWheel: _app.view,
+        interaction: _app.renderer.plugins.interaction,
+    }))
     scrollbox.position.set(50, 75)
     const box = scrollbox.content.addChild(new PIXI.Graphics())
     box.beginFill(0xff0000, 0.25).drawRect(0, 0, 290, size).endFill()
-    for (let i = 0; i < 50; i++)
-    {
+    for (let i = 0; i < 50; i++) {
         const radius = Random.range(1, 50)
         box
             .beginFill(Random.color(), Random.get(1, true))
@@ -27,15 +31,20 @@ function vertical()
     scrollbox.update()
 }
 
-function horizontalVertical(title)
-{
-    const scrollbox = _renderer.stage.addChild(new Scrollbox({ boxWidth: 300, boxHeight: 300 }))
+function horizontalVertical(title) {
+    const scrollbox = _app.stage.addChild(new Scrollbox({
+        boxWidth: 300,
+        boxHeight: 300,
+        passiveWheel: false,
+        stopPropagation: true,
+        divWheel: _app.view,
+        interaction: _app.renderer.plugins.interaction,
+    }))
     scrollbox.position.set(400, 75)
     const box = scrollbox.content.addChild(new PIXI.Graphics())
     const size = 500
     box.beginFill(0xff0000, 0.25).drawRect(0, 0, size, size).endFill()
-    for (let i = 0; i < 50; i++)
-    {
+    for (let i = 0; i < 50; i++) {
         const radius = Random.range(1, 50)
         box
             .beginFill(Random.color(), Random.get(1, true))
@@ -48,15 +57,22 @@ function horizontalVertical(title)
     return scrollbox
 }
 
-function horizontal()
-{
+function horizontal() {
     const size = 600
-    const scrollbox = _renderer.stage.addChild(new Scrollbox({ boxWidth: 300, boxHeight: 300, overflowY: 'hidden', fade: true, scrollbarBackgroundAlpha: 0, scrollbarOffsetHorizontal: -10 }))
+    const scrollbox = _app.stage.addChild(new Scrollbox({
+        boxWidth: 300,
+        boxHeight: 300,
+        overflowY: 'hidden',
+        fade: true,
+        scrollbarBackgroundAlpha: 0,
+        scrollbarOffsetHorizontal: -10,
+        divWheel: _app.view,
+        interaction: _app.renderer.plugins.interaction,
+    }))
     scrollbox.position.set(50, 425)
     const box = scrollbox.content.addChild(new PIXI.Graphics())
     box.beginFill(0xff0000, 0.25).drawRect(0, 0, size, 290).endFill()
-    for (let i = 0; i < 50; i++)
-    {
+    for (let i = 0; i < 50; i++) {
         const radius = Random.range(1, 50)
         box
             .beginFill(Random.color(), Random.get(1, true))
@@ -68,22 +84,35 @@ function horizontal()
     scrollbox.update()
 }
 
-function resize()
-{
-    _renderer.renderer.resize(window.innerWidth, window.innerHeight)
+function resize() {
+    _app.renderer.resize(window.innerWidth, window.innerHeight)
 }
 
-window.onload = function ()
-{
+window.onload = function () {
     _fps = new FPS({ side: 'bottom-left' })
-    _renderer = new PIXI.Application({ transparent: true, width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio })
-    document.body.appendChild(_renderer.view)
-    _renderer.view.style.position = 'fixed'
-    _renderer.view.style.width = '100vw'
-    _renderer.view.style.height = '100vh'
-    _renderer.view.style.left = 0
-    _renderer.view.style.top = 0
+    _app = new PIXI.Application({
+        backgroundAlpha: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        resolution: window.devicePixelRatio,
+        antialias: true,
+    })
+    document.body.appendChild(_app.view)
+    _app.view.style.position = 'fixed'
+    _app.view.style.width = 'calc(100vw - 50px)'
+    _app.view.style.height = '100vh'
+    _app.view.style.left = '50px'
+    _app.view.style.top = 0
 
+    const viewport = _app.stage.addChild(new Viewport({
+        screenWidth: window.innerWidth,
+        screenHeight: window.innerHeight,
+        interaction: _app.renderer.plugins.interaction,
+    }))
+    const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
+    sprite.tint = 0xff0000
+    sprite.width = sprite.height = 100
+    viewport.drag().pinch().decelerate()
     horizontalVertical()
     vertical()
     horizontal()
@@ -92,8 +121,7 @@ window.onload = function ()
     nodrag.dragScroll = false
     window.addEventListener('resize', resize)
 
-    PIXI.Ticker.shared.add(() =>
-    {
+    PIXI.Ticker.shared.add(() => {
         _fps.frame()
     })
     highlight()