added documentation

davidfig · May 15, 2018 · c87c210 · c87c210
1 parent 8b40161
commit c87c210
Show file tree

Hide file tree

Showing 30 changed files with 5,074 additions and 62 deletions.
diff --git a/.jsdoc.json b/.jsdoc.json
@@ -35,7 +35,7 @@
         "./node_modules/yy-jsdoc-template/plugins/skip-node_modules",
         "plugins/markdown"
     ],
-    "readmeShowNav": "scrollbox",
+    "readmeShowNav": "Scrollbox",
     "templates": {
         "default": {
             "outputSourceFiles": true

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017 YOPEY YOPEY LLC
+Copyright (c) 2018 YOPEY YOPEY LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,53 +1,42 @@
-# pixi-viewport
-A highly configurable viewport/2D camera designed to work with pixi.js.
+# pixi-scrollbox
+A configurable scrollbox designed for pixi.js.
 
-Features include dragging, pinch-to-zoom, mouse wheel zooming, decelerated dragging, follow target, snap to point, snap to zoom, clamping, bouncing on edges, and move on mouse edges. See live example to try out all of these features.
+Features:
+* scrollbox uses a mask to clip to desired boxWidth/boxHeight size
+* scrollbox scrolls with scrollbars (options.overflow=scroll)
+* scrollbox's scrollbars may be hidden when not needed (options.overflow=auto or hidden)
+* scrollbox may also be scrolled by dragging on the content window (options.dragScroll=true)
 
-All features are configurable and removable, so set up the viewport to be exactly what you need.
+[**Live Example**](https://davidfig.github.io/pixi-scrollbox/)
 
 ## Rationale
-I kept rewriting 2d cameras for the games I developed with pixi.js, so I decided to package up a generic one. I included options that I need in my games, including edges that bounce, deceleration, and lots of options to tweak the feel of the viewport. 
+I needed a scrollbox for the UI of my game and since I had this nifty pixi-viewport, I figured it wouldn't be much work to create it. Five hours later and I realized I was a bit off on my estimates. Hopefully others will find it useful.
 
 ## Simple Example
 ```js
 var PIXI = require('pixi.js');
-var Viewport = require('pixi-viewport');
+var Viewport = require('pixi-scrollbox');
 
-// create viewport
-var viewport = new Viewport({
-    screenWidth: window.innerWidth,
-    screenHeight: window.innerHeight,
-    worldWidth: 1000,
-    worldHeight: 1000
-});
+// create the scrollbox
+var scrollbox = new Scrollbox({ boxWidth: 200, boxHeight: 200});
+
+// add a sprite to the scrollbox's content
+var sprite = scrollbox.content.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
+sprite.width = sprite.height = 500;
+sprite.tint = 0xff0000;
 
 // add the viewport to the stage
 var app = new PIXI.Application();
 document.body.appendChild(app.view);
-app.stage.addChild(viewport);
-
-// activate plugins
-viewport
-    .drag()
-    .pinch()
-    .decelerate();
-
-// add a red box
-var sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
-sprite.tint = 0xff0000;
-sprite.width = sprite.height = 100
-sprite.position.set(100, 100);
+app.stage.addChild(scrollbox);
 ```
 
-## Live Example
-[https://davidfig.github.io/pixi-viewport/](https://davidfig.github.io/pixi-viewport/)
-
-## API Documentation
-[https://davidfig.github.io/pixi-viewport/jsdoc/](https://davidfig.github.io/pixi-viewport/jsdoc/)
+## Usage
 
-## Installation
+[![npm i pixi-scrollbox](https://nodei.co/npm/pixi-scrollbox.png?mini=true)](https://npmjs.org/package/pixi-scrollbox/)
 
-    npm i pixi-viewport
+## API Documentation
+[https://davidfig.github.io/pixi-scrollbox/jsdoc/](https://davidfig.github.io/pixi-scrollbox/jsdoc/)
 
 ## license  
 MIT License  

diff --git a/docs/code.js b/docs/code.js
@@ -10,7 +10,7 @@ function vertical()
 {
     const size = 500
     const scrollbox = _renderer.stage.addChild(new Scrollbox({ boxWidth: 300, boxHeight: 300 }))
-    scrollbox.position.set(50, 100)
+    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++)
@@ -26,10 +26,10 @@ function vertical()
     scrollbox.update()
 }
 
-function horizontalVertical()
+function horizontalVertical(title)
 {
     const scrollbox = _renderer.stage.addChild(new Scrollbox({ boxWidth: 300, boxHeight: 300 }))
-    scrollbox.position.set(400, 100)
+    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()
@@ -41,16 +41,17 @@ function horizontalVertical()
             .drawCircle(Random.range(radius, size - radius), Random.range(radius, size - radius), radius)
             .endFill()
     }
-    const text = scrollbox.content.addChild(new PIXI.Text(' horizontal and vertical scroll ', { fill: 0xffffff, fontSize: 14 }))
+    const text = scrollbox.content.addChild(new PIXI.Text(' ' + (title ? title : 'horizontal and vertical scroll') + ' ', { fill: 0xffffff, fontSize: 14 }))
     box.beginFill(0).drawRect(0, 0, text.width, text.height).endFill()
     scrollbox.update()
+    return scrollbox
 }
 
 function horizontal()
 {
     const size = 500
     const scrollbox = _renderer.stage.addChild(new Scrollbox({ boxWidth: 300, boxHeight: 300 }))
-    scrollbox.position.set(750, 100)
+    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++)
@@ -85,6 +86,9 @@ window.onload = function ()
     horizontalVertical()
     vertical()
     horizontal()
+    const nodrag = horizontalVertical('dragScroll=false')
+    nodrag.position.set(400, 425)
+    nodrag.dragScroll = false
     window.addEventListener('resize', resize)
 
     PIXI.ticker.shared.add(() =>