@crispcode/shimmer 5.1.1 → 5.2.1

package/README.md

@@ -14,10 +14,6 @@ Clone the shimmer repository to your machine and use the following commands:
 To generate a documentation use `npm run docs`
 If you want to check functionality you can use `npm run test` 
 
-## Polyfill
-
-In order to support older versions of browsers, you can use [polyfill.io](https://polyfill.io)
-
 ## Shimmer classes
 
   |Name|Usage|Description|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispcode/shimmer",
-  "version": "5.1.1",
+  "version": "5.2.1",
   "description": "A PIXI.JS wrapper plugin for MODUX",
   "author": "Crisp Code ( contact@crispcode.ro )",
   "access": "public",
@@ -17,39 +17,39 @@
     "url": "https://github.com/CrispCode/shimmer/issues"
   },
   "dependencies": {
-    "@pixi/assets": "^6.5.1",
-    "@pixi/canvas-display": "^6.5.1",
-    "@pixi/canvas-extract": "^6.5.1",
-    "@pixi/canvas-graphics": "^6.5.1",
-    "@pixi/canvas-mesh": "^6.5.1",
-    "@pixi/canvas-particle-container": "^6.5.1",
-    "@pixi/canvas-prepare": "^6.5.1",
-    "@pixi/canvas-renderer": "^6.5.1",
-    "@pixi/canvas-sprite": "^6.5.1",
-    "@pixi/canvas-sprite-tiling": "^6.5.1",
-    "@pixi/canvas-text": "^6.5.1",
-    "@pixi/constants": "^6.5.1",
-    "@pixi/core": "^6.5.1",
-    "@pixi/display": "^6.5.1",
-    "@pixi/extensions": "^6.5.1",
-    "@pixi/graphics": "^6.5.1",
-    "@pixi/interaction": "^6.5.1",
-    "@pixi/math": "^6.5.1",
-    "@pixi/mesh": "^6.5.1",
-    "@pixi/mesh-extras": "^6.5.1",
-    "@pixi/particle-container": "^6.5.1",
-    "@pixi/prepare": "^6.5.1",
-    "@pixi/runner": "^6.5.1",
-    "@pixi/settings": "^6.5.1",
-    "@pixi/sprite": "^6.5.1",
-    "@pixi/sprite-animated": "^6.5.1",
-    "@pixi/sprite-tiling": "^6.5.1",
-    "@pixi/text": "^6.5.1",
-    "@pixi/ticker": "^6.5.1",
-    "@pixi/utils": "^6.5.1"
+    "@pixi/assets": "^7.4.2",
+    "@pixi/canvas-display": "^7.4.2",
+    "@pixi/canvas-extract": "^7.4.2",
+    "@pixi/canvas-graphics": "^7.4.2",
+    "@pixi/canvas-mesh": "^7.4.2",
+    "@pixi/canvas-particle-container": "^7.4.2",
+    "@pixi/canvas-prepare": "^7.4.2",
+    "@pixi/canvas-renderer": "^7.4.2",
+    "@pixi/canvas-sprite": "^7.4.2",
+    "@pixi/canvas-sprite-tiling": "^7.4.2",
+    "@pixi/canvas-text": "^7.4.2",
+    "@pixi/constants": "^7.4.2",
+    "@pixi/core": "^7.4.2",
+    "@pixi/display": "^7.4.2",
+    "@pixi/events": "^7.4.2",
+    "@pixi/extensions": "^7.4.2",
+    "@pixi/graphics": "^7.4.2",
+    "@pixi/math": "^7.4.2",
+    "@pixi/mesh": "^7.4.2",
+    "@pixi/mesh-extras": "^7.4.2",
+    "@pixi/particle-container": "^7.4.2",
+    "@pixi/prepare": "^7.4.2",
+    "@pixi/runner": "^7.4.2",
+    "@pixi/settings": "^7.4.2",
+    "@pixi/sprite": "^7.4.2",
+    "@pixi/sprite-animated": "^7.4.2",
+    "@pixi/sprite-tiling": "^7.4.2",
+    "@pixi/text": "^7.4.2",
+    "@pixi/ticker": "^7.4.2",
+    "@pixi/utils": "^7.4.2"
   },
   "peerDependencies": {
-    "@crispcode/modux": "^5.1.5"
+    "@crispcode/modux": "^5.1.6"
   },
   "devDependencies": {
     "esdoc": "^1.1.0",

package/scripts/button.js

@@ -18,7 +18,7 @@ export class Button extends Element {
      * Marks the Button as interactive
      * @type {Boolean}
      */
-    this.interactive = true
+    this.eventMode = 'static'
     /**
      * Marks the Button as a button
      * @type {Boolean}
@@ -86,10 +86,10 @@ export class Button extends Element {
   enable ( enabled ) {
     this.__enabled = !!enabled
     if ( enabled ) {
-      this.interactive = true
+      this.eventMode = 'static'
       this.buttonMode = true
     } else {
-      this.interactive = false
+      this.eventMode = 'auto'
       this.buttonMode = false
     }
   }

package/scripts/controls.js

@@ -1,12 +1,16 @@
 'use strict'
 
+import { EventBoundary } from "@pixi/events"
+
 export class Controls {
   /**
     * The pixi application renderer
     * @param {Renderer} renderer
+    * @param {DisplayObject} stage
     */
-  constructor ( renderer ) {
+  constructor ( renderer, stage ) {
     this.__renderer = renderer
+    this.__stage = stage
     this.__listeners = []
   }
 
@@ -26,8 +30,9 @@ export class Controls {
    * @returns {DisplayObject}
    */
   __getTarget ( x, y ) {
-    let target = this.__renderer.plugins.interaction.hitTest( { x: x, y: y } )
-    if ( target && target.interactive ) {
+    const boundary = new EventBoundary(this.__stage);
+    let target = boundary.hitTest(x, y);
+    if ( target && target.eventMode == 'static' ) {
       return target
     }
     return null
@@ -39,7 +44,7 @@ export class Controls {
   enableWheel () {
     let onPush = ( e ) => {
       let target = this.__getTarget( e.offsetX, e.offsetY )
-      if ( target && target.interactive ) {
+      if ( target && target.eventMode == 'static' ) {
         target.emit( this.__getEventName( 'wheel' ), e )
       }
     }
@@ -57,7 +62,7 @@ export class Controls {
     let onPush = ( e ) => {
       let target = this.__getTarget( e.offsetX, e.offsetY )
       let timeout = null
-      if ( target && target.interactive ) {
+      if ( target && target.eventMode == 'static' ) {
         timeout = setTimeout( () => {
           target.emit( this.__getEventName( 'longtap' ), e )
         }, 700 )

package/scripts/shimmer.js

@@ -7,8 +7,7 @@ import { Component, extend, logger } from '@crispcode/modux'
 import { autoDetectRenderer, BatchRenderer } from '@pixi/core'
 import { Assets } from '@pixi/assets'
 import { Ticker } from '@pixi/ticker'
-import { InteractionManager } from '@pixi/interaction'
-import { skipHello, isWebGLSupported } from '@pixi/utils'
+import { isWebGLSupported } from '@pixi/utils'
 import { extensions } from '@pixi/extensions'
 
 // Canvas support
@@ -26,7 +25,6 @@ import '@pixi/canvas-text'
 import { Element } from './element.js'
 import { Controls } from './controls.js'
 
-extensions.add( InteractionManager )
 extensions.add( BatchRenderer )
 
 /**
@@ -61,11 +59,12 @@ export class Shimmer extends Component {
   /**
    * This method preloads a colection of assets
    * @param {Object} bundle A collection of assets
+   * @param {Function} progress A callback to track progress
    * @return {Promise} A promise which is resolved upon loading the assets. It resolves the loaded resources.
    */
-  preload ( bundle ) {
+  preload ( bundle, progress = () =>{} ) {
     Assets.addBundle( 'bundle', bundle )
-    return Assets.loadBundle( 'bundle' )
+    return Assets.loadBundle( 'bundle', progress )
   }
 
   /**
@@ -77,8 +76,6 @@ export class Shimmer extends Component {
   constructor ( parent, module, store ) {
     super( parent, module, store )
 
-    skipHello()
-
     /**
      * Stores the parent Element
      * @type {Element}
@@ -164,8 +161,6 @@ export class Shimmer extends Component {
 
     this.renderer.resize( this.element.clientWidth, this.element.clientHeight )
 
-    this.renderer.plugins.interaction.autoPreventDefault = false
-
     if ( !isWebGLSupported() ) {
       logger.warn( 'WebGL is not supported. Using Canvas fallback.' )
     }
@@ -173,7 +168,7 @@ export class Shimmer extends Component {
     /**
      * Stores the controls class, responsible with implementing special gestures
      */
-    this.controls = new Controls( this.renderer )
+    this.controls = new Controls( this.renderer, this.stage )
     this.controls.enableWheel()
     this.controls.enableLongtap()
   }

package/scripts/video.js

@@ -19,12 +19,12 @@ export class Video extends Element {
   constructor ( source, options = {} ) {
     super()
 
-    if ( typeof source === Video ) {
+    if ( typeof source !== Video ) {
       this.__source = document.createElement( 'video' )
       this.__source.playsInline = true
       this.__source.preload = 'auto'
       this.__source.autoplay = false
-      this.__source.muted = ( options.muted !== undefined ) ? options.muted : false
+      this.__source.muted = ( options.muted !== undefined ) ? options.muted : true
       this.__source.loop = ( options.loop !== undefined ) ? options.loop : true
       this.__source.src = source
     } else {

package/test/app.html

@@ -12,8 +12,6 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="apple-mobile-web-app-title" content="Open the Box">
 
-    <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CMutationObserver%2CString.prototype.padStart%2Cconsole.info"></script>    
-
     <base href="/" />
         
     <link rel="stylesheet" href="app.min.css" />

package/test/scripts/components/shimmer/index.js

@@ -26,7 +26,7 @@ export class ShimmerComponent extends Shimmer {
   get settings () {
     return {
       backgroundAlpha: 1,
-      backgroundColor: 0xFFFF00
+      backgroundColor: 0xFFFF00,
       // forceCanvas: true
     }
   }

package/test/scripts/components/shimmer/moon.js

@@ -33,17 +33,15 @@ export class Moon extends Element {
 
     this.__rotating = false
 
-    this.interactive = true
+    this.eventMode = 'static'
 
     this.on( 'wheel', ( e ) => {
-      e.preventDefault()
       let scale = Math.max( 0.2, Math.min( this.scale.x, this.scale.y ) + e.deltaY / -100 )
       this.scale.set( scale )
-    } )
+    })
     this.on( 'longtap', ( e ) => {
-      e.preventDefault()
       this.scale.set( 1 )
-    } )
+    })
   }
 
   __move () {

package/test/styles/index.scss

@@ -12,6 +12,7 @@ html, body {
     position: relative;
     width: 100%;
     height: 100%;
+    touch-action: none;
 
     *[data-modux-component="shimmer"] {
         display: block;