@damienmortini/three 0.1.192 → 0.1.195

package/object/THREESprite.js

@@ -1,27 +1,26 @@
-import { Object3D, Mesh, Color, PlaneGeometry, Texture, DoubleSide, LinearFilter } from '../../../three/src/Three.js'
+import { Color, DoubleSide, LinearFilter, Mesh, Object3D, PlaneGeometry, Texture } from '../../../three/src/Three.js';
+import THREEShaderMaterial from './THREEShaderMaterial.js';
 
-import THREEShaderMaterial from './THREEShaderMaterial.js'
-
-const CACHED_IMAGES = new Map()
+const CACHED_IMAGES = new Map();
 
 export default class Sprite extends Object3D {
   constructor(image, { data, frame, scale = 1 } = {}) {
-    super()
+    super();
 
-    this._data = data
-    this._image = image
-    this._scale = scale
+    this._data = data;
+    this._image = image;
+    this._scale = scale;
 
     // Optimise images decoding
-    let canvas = CACHED_IMAGES.get(this.image)
+    let canvas = CACHED_IMAGES.get(this.image);
 
     if (!canvas) {
-      canvas = document.createElement('canvas')
-      canvas.width = this.image.width
-      canvas.height = this.image.height
-      const context = canvas.getContext('2d')
-      context.drawImage(this.image, 0, 0)
-      CACHED_IMAGES.set(this.image, canvas)
+      canvas = document.createElement('canvas');
+      canvas.width = this.image.width;
+      canvas.height = this.image.height;
+      const context = canvas.getContext('2d');
+      context.drawImage(this.image, 0, 0);
+      CACHED_IMAGES.set(this.image, canvas);
     }
 
     this.mesh = new Mesh(new PlaneGeometry(1, 1), new THREEShaderMaterial({
@@ -32,65 +31,65 @@ export default class Sprite extends Object3D {
         diffuse: new Color(0xffffff),
         map: new Texture(canvas),
       },
-    }))
-    this.mesh.scale.x = canvas.width * this._scale
-    this.mesh.scale.y = canvas.height * this._scale
-    this.mesh.material.map.minFilter = LinearFilter
-    this.mesh.material.map.generateMipmaps = false
-    this.mesh.material.map.needsUpdate = true
+    }));
+    this.mesh.scale.x = canvas.width * this._scale;
+    this.mesh.scale.y = canvas.height * this._scale;
+    this.mesh.material.map.minFilter = LinearFilter;
+    this.mesh.material.map.generateMipmaps = false;
+    this.mesh.material.map.needsUpdate = true;
 
-    this.add(this.mesh)
+    this.add(this.mesh);
 
     if (frame) {
-      this.frame = frame
+      this.frame = frame;
     }
   }
 
   get image() {
-    return this._image
+    return this._image;
   }
 
   get data() {
-    return this._data
+    return this._data;
   }
 
   set material(value) {
-    this.mesh.material = value
-    this.frame = this.frame
+    this.mesh.material = value;
+    this.frame = this.frame;
   }
 
   get material() {
-    return this.mesh.material
+    return this.mesh.material;
   }
 
   set frame(value) {
     if (!this.data) {
-      return
+      return;
     }
 
-    this._frame = value
+    this._frame = value;
 
-    const offsetRepeat = this.mesh.material.offsetRepeat
-    const frameData = this.data.frames[this._frame]
+    const offsetRepeat = this.mesh.material.offsetRepeat;
+    const frameData = this.data.frames[this._frame];
 
-    offsetRepeat.z = (frameData.rotated ? frameData.frame.h : frameData.frame.w) / this.image.width
-    offsetRepeat.w = (frameData.rotated ? frameData.frame.w : frameData.frame.h) / this.image.height
+    offsetRepeat.z = (frameData.rotated ? frameData.frame.h : frameData.frame.w) / this.image.width;
+    offsetRepeat.w = (frameData.rotated ? frameData.frame.w : frameData.frame.h) / this.image.height;
 
-    offsetRepeat.x = frameData.frame.x / this.image.width
-    offsetRepeat.y = 1. - frameData.frame.y / this.image.height - offsetRepeat.w
+    offsetRepeat.x = frameData.frame.x / this.image.width;
+    offsetRepeat.y = 1.0 - frameData.frame.y / this.image.height - offsetRepeat.w;
 
-    const scale = 1 / parseFloat(this.data.meta.scale)
+    const scale = 1 / parseFloat(this.data.meta.scale);
 
-    this.mesh.scale.x = (frameData.rotated ? frameData.frame.h : frameData.frame.w) * scale * this._scale
-    this.mesh.scale.y = (frameData.rotated ? frameData.frame.w : frameData.frame.h) * scale * this._scale
+    this.mesh.scale.x = (frameData.rotated ? frameData.frame.h : frameData.frame.w) * scale * this._scale;
+    this.mesh.scale.y = (frameData.rotated ? frameData.frame.w : frameData.frame.h) * scale * this._scale;
 
-    this.mesh.position.x = (-(frameData.sourceSize.w - frameData.frame.w) * .5 + frameData.spriteSourceSize.x + frameData.sourceSize.w * (.5 - frameData.pivot.x)) * scale * this._scale
-    this.mesh.position.y = ((frameData.sourceSize.h - frameData.frame.h) * .5 - frameData.spriteSourceSize.y - frameData.sourceSize.h * (.5 - frameData.pivot.y)) * scale * this._scale
+    this.mesh.position.x = (-(frameData.sourceSize.w - frameData.frame.w) * 0.5 + frameData.spriteSourceSize.x + frameData.sourceSize.w * (0.5 - frameData.pivot.x)) * scale * this._scale;
+    this.mesh.position.y = ((frameData.sourceSize.h - frameData.frame.h) * 0.5 - frameData.spriteSourceSize.y - frameData.sourceSize.h * (0.5 - frameData.pivot.y)) * scale * this._scale;
 
-    this.mesh.rotation.z = frameData.rotated ? Math.PI * .5 : 0
+    this.mesh.rotation.z = frameData.rotated ? Math.PI * 0.5 : 0;
   }
 
   get frame() {
-    return this._frame
+    return this._frame;
   }
 }

package/object/THREESpriteAnimation.js

@@ -1,10 +1,9 @@
+import Signal from '@damienmortini/core/util/Signal';
+import Ticker from '@damienmortini/core/util/Ticker';
 
-import THREESprite from './THREESprite.js'
+import THREESprite from './THREESprite.js';
 
-import Signal from '@damienmortini/core/util/Signal'
-import Ticker from '@damienmortini/core/util/Ticker'
-
-const SPRITESHEETS = new Map()
+const SPRITESHEETS = new Map();
 
 export default class THREESpriteAnimation extends THREESprite {
   constructor(image, data, animation, {
@@ -15,89 +14,90 @@ export default class THREESpriteAnimation extends THREESprite {
     scale = 1,
     autoplay = true,
   } = {}) {
-    let animations = SPRITESHEETS.get(data)
+    let animations = SPRITESHEETS.get(data);
     if (!animations) {
-      animations = new Map()
+      animations = new Map();
       for (const key in data.frames) {
-        const match = /(.*?)([0-9]+)[$\.]/.exec(key)
-        const animationName = match[1]
-        let frames = animations.get(animationName)
+        const match = /(.*?)([0-9]+)[$\.]/.exec(key);
+        const animationName = match[1];
+        let frames = animations.get(animationName);
         if (!frames) {
-          frames = []
-          animations.set(animationName, frames)
+          frames = [];
+          animations.set(animationName, frames);
         }
-        const position = parseInt(match[2])
-        frames[position - 1] = key
+        const position = parseInt(match[2]);
+        frames[position - 1] = key;
       }
-      SPRITESHEETS.set(data, animations)
+      SPRITESHEETS.set(data, animations);
     }
 
     super(image, {
       data,
       frame: animations.get(animation)[0],
       scale,
-    })
+    });
 
-    this.onAnimationEnd = new Signal()
+    this.onAnimationEnd = new Signal();
 
-    this._progress = 0
-    this._animations = animations
+    this._progress = 0;
+    this._animations = animations;
 
-    this.loop = loop
-    this.reverse = reverse
-    this.speed = speed
-    this.fps = fps
-    this.animation = animation
+    this.loop = loop;
+    this.reverse = reverse;
+    this.speed = speed;
+    this.fps = fps;
+    this.animation = animation;
 
     if (autoplay) {
-      this.play()
+      this.play();
     }
   }
 
   set animation(value) {
     if (this._animation === value) {
-      return
+      return;
     }
-    this._animation = value
+    this._animation = value;
 
-    this.update()
+    this.update();
   }
 
   get animation() {
-    return this._animation
+    return this._animation;
   }
 
   play() {
-    Ticker.add(this._updateBound = this._updateBound || this.update.bind(this))
+    Ticker.add(this._updateBound = this._updateBound || this.update.bind(this));
   }
 
   stop() {
-    Ticker.delete(this._updateBound)
+    Ticker.delete(this._updateBound);
   }
 
   set progress(value) {
     if (this._progress === value) {
-      return
+      return;
     }
-    const previousProgress = this._progress
-    this._progress = value
+    const previousProgress = this._progress;
+    this._progress = value;
     if (this.loop) {
-      this._progress = ((this._progress % 1) + 1) % 1
-    } else {
-      this._progress = Math.min(Math.max(this._progress, 0), 1)
+      this._progress = ((this._progress % 1) + 1) % 1;
+    }
+    else {
+      this._progress = Math.min(Math.max(this._progress, 0), 1);
       if (previousProgress !== this._progress && (this._progress === 1 && !this.reverse || this._progress === 0 && this.reverse)) {
-        this.onAnimationEnd.dispatch()
+        this.onAnimationEnd.dispatch();
       }
     }
   }
 
   get progress() {
-    return this._progress
+    return this._progress;
   }
 
   update() {
-    const frames = this._animations.get(this.animation)
-    this.progress += (this.speed * (this.fps / 60) * Ticker.timeScale / frames.length) * (this.reverse ? -1 : 1)
-    this.frame = frames[Math.round(this._progress * (frames.length - 1))]
+    const frames = this._animations.get(this.animation);
+    this.progress += (this.speed * (this.fps / 60) * Ticker.timeScale / frames.length) * (this.reverse ? -1 : 1);
+    this.frame = frames[Math.round(this._progress * (frames.length - 1))];
   }
 }

package/object/THREEText.js

@@ -1,11 +1,10 @@
 import {
-  Object3D,
   Mesh,
+  Object3D,
   PlaneGeometry,
   Texture,
-} from '../../../three/src/Three.js'
-
-import THREEShaderMaterial from '../material/THREEShaderMaterial.js'
+} from '../../../three/src/Three.js';
+import THREEShaderMaterial from '../material/THREEShaderMaterial.js';
 
 export default class THREEText extends Object3D {
   constructor({
@@ -25,217 +24,220 @@ export default class THREEText extends Object3D {
       transparent: true,
     }),
   } = {}) {
-    super()
+    super();
 
-    this._scale = scale
+    this._scale = scale;
 
-    this._canvas = document.createElement('canvas')
-    this._context = this._canvas.getContext('2d')
+    this._canvas = document.createElement('canvas');
+    this._context = this._canvas.getContext('2d');
 
-    this._texture = new Texture(this._canvas)
+    this._texture = new Texture(this._canvas);
 
-    material.map = this._texture
+    material.map = this._texture;
 
-    this.textContent = textContent
-    this.font = font
-    this.fillStyle = fillStyle
-    this.textAlign = textAlign
-    this.maxWidth = maxWidth
-    this.shadowColor = shadowColor
-    this.shadowBlur = shadowBlur
-    this.shadowOffsetX = shadowOffsetX
-    this.shadowOffsetY = shadowOffsetY
+    this.textContent = textContent;
+    this.font = font;
+    this.fillStyle = fillStyle;
+    this.textAlign = textAlign;
+    this.maxWidth = maxWidth;
+    this.shadowColor = shadowColor;
+    this.shadowBlur = shadowBlur;
+    this.shadowOffsetX = shadowOffsetX;
+    this.shadowOffsetY = shadowOffsetY;
 
-    this._mesh = new Mesh(geometry, material)
-    this.add(this._mesh)
+    this._mesh = new Mesh(geometry, material);
+    this.add(this._mesh);
 
-    this._update()
+    this._update();
   }
 
   _updateContextProperties() {
-    this._context.font = this.font
-    this._context.fillStyle = this.fillStyle
-    this._context.shadowColor = this.shadowColor
-    this._context.shadowBlur = this.shadowBlur
-    this._context.shadowOffsetX = this.shadowOffsetX
-    this._context.shadowOffsetY = this.shadowOffsetY
-    this._context.textBaseline = 'top'
+    this._context.font = this.font;
+    this._context.fillStyle = this.fillStyle;
+    this._context.shadowColor = this.shadowColor;
+    this._context.shadowBlur = this.shadowBlur;
+    this._context.shadowOffsetX = this.shadowOffsetX;
+    this._context.shadowOffsetY = this.shadowOffsetY;
+    this._context.textBaseline = 'top';
   }
 
   _update() {
     if (!this._mesh) {
-      return
+      return;
     }
 
-    this._updateContextProperties()
+    this._updateContextProperties();
 
-    const shadowOffsetX = this.shadowOffsetX - this.shadowBlur
-    const shadowOffsetY = this.shadowOffsetY - this.shadowBlur
+    const shadowOffsetX = this.shadowOffsetX - this.shadowBlur;
+    const shadowOffsetY = this.shadowOffsetY - this.shadowBlur;
 
-    const words = this.textContent.split(' ')
+    const words = this.textContent.split(' ');
 
-    const spaceWidth = this._context.measureText(' ').width
-    const wordsWidth = new Map()
+    const spaceWidth = this._context.measureText(' ').width;
+    const wordsWidth = new Map();
     const lines = [{
       textContent: '',
       width: 0,
-    }]
+    }];
     for (const word of words) {
       if (!wordsWidth.get(word)) {
-        wordsWidth.set(word, this._context.measureText(word).width)
+        wordsWidth.set(word, this._context.measureText(word).width);
       }
     }
 
-    let width = 0
-    let lineNumber = 0
+    let width = 0;
+    let lineNumber = 0;
     for (const word of words) {
-      const newWidth = lines[lineNumber].width + wordsWidth.get(word)
+      const newWidth = lines[lineNumber].width + wordsWidth.get(word);
 
       if (newWidth > this.maxWidth) {
-        lineNumber++
+        lineNumber++;
         lines[lineNumber] = {
           textContent: word,
           width: wordsWidth.get(word),
-        }
-      } else {
+        };
+      }
+      else {
         if (lines[lineNumber].textContent !== '') {
-          lines[lineNumber].textContent += ' '
+          lines[lineNumber].textContent += ' ';
         }
-        lines[lineNumber].textContent += word
-        lines[lineNumber].width += spaceWidth + wordsWidth.get(word)
+        lines[lineNumber].textContent += word;
+        lines[lineNumber].width += spaceWidth + wordsWidth.get(word);
       }
-      width = Math.max(width, lines[lineNumber].width)
+      width = Math.max(width, lines[lineNumber].width);
     }
 
-    width += this.shadowBlur * 2 + Math.abs(this.shadowOffsetX)
+    width += this.shadowBlur * 2 + Math.abs(this.shadowOffsetX);
 
-    const lineHeight = parseFloat(/\b(\d*)px/.exec(this._context.font)[1])
-    let height = lineHeight
-    height *= lines.length
-    height += this.shadowBlur * 2 + Math.abs(this.shadowOffsetY)
+    const lineHeight = parseFloat(/\b(\d*)px/.exec(this._context.font)[1]);
+    let height = lineHeight;
+    height *= lines.length;
+    height += this.shadowBlur * 2 + Math.abs(this.shadowOffsetY);
 
     if (this._canvas.width !== width || this._canvas.height !== height) {
-      this._canvas.width = width
-      this._canvas.height = height
-      this._updateContextProperties()
+      this._canvas.width = width;
+      this._canvas.height = height;
+      this._updateContextProperties();
     }
 
-    this._mesh.position.y = -shadowOffsetY * .5 * this._scale
+    this._mesh.position.y = -shadowOffsetY * 0.5 * this._scale;
 
     if (this.textAlign === 'start' || this.textAlign === 'left') {
-      this._mesh.position.x = (this._canvas.width * .5 + Math.min(0, shadowOffsetX)) * this._scale
-    } else if (this.textAlign === 'end' || this.textAlign === 'right') {
-      this._mesh.position.x = (-this._canvas.width * .5 + Math.max(0, shadowOffsetX)) * this._scale
-    } else {
-      this._mesh.position.x = shadowOffsetX * .5 * this._scale
+      this._mesh.position.x = (this._canvas.width * 0.5 + Math.min(0, shadowOffsetX)) * this._scale;
+    }
+    else if (this.textAlign === 'end' || this.textAlign === 'right') {
+      this._mesh.position.x = (-this._canvas.width * 0.5 + Math.max(0, shadowOffsetX)) * this._scale;
+    }
+    else {
+      this._mesh.position.x = shadowOffsetX * 0.5 * this._scale;
     }
-    this._mesh.scale.x = this._canvas.width * this._scale
-    this._mesh.scale.y = this._canvas.height * this._scale
-    this._context.globalAlpha = 1 / 255
-    this._context.fillRect(0, 0, width, height)
-    this._context.globalAlpha = 1
+    this._mesh.scale.x = this._canvas.width * this._scale;
+    this._mesh.scale.y = this._canvas.height * this._scale;
+    this._context.globalAlpha = 1 / 255;
+    this._context.fillRect(0, 0, width, height);
+    this._context.globalAlpha = 1;
     for (const [i, line] of lines.entries()) {
-      let offsetX
+      let offsetX;
       switch (this.textAlign) {
         case 'start':
         case 'left':
-          offsetX = 0
-          break
+          offsetX = 0;
+          break;
         case 'center':
-          offsetX = (width - line.width) * .5
-          break
+          offsetX = (width - line.width) * 0.5;
+          break;
         case 'end':
         case 'right':
-          offsetX = width - line.width
-          break
+          offsetX = width - line.width;
+          break;
       }
-      this._context.fillText(line.textContent, offsetX + (shadowOffsetX < 0 ? Math.abs(shadowOffsetX) : 0), (shadowOffsetY < 0 ? Math.abs(shadowOffsetY) : 0) + lineHeight * i)
+      this._context.fillText(line.textContent, offsetX + (shadowOffsetX < 0 ? Math.abs(shadowOffsetX) : 0), (shadowOffsetY < 0 ? Math.abs(shadowOffsetY) : 0) + lineHeight * i);
     }
-    this._texture.needsUpdate = true
+    this._texture.needsUpdate = true;
   }
 
   get material() {
-    return this._mesh.material
+    return this._mesh.material;
   }
 
   set textContent(value) {
-    this._textContent = value
-    this._update()
+    this._textContent = value;
+    this._update();
   }
 
   get textContent() {
-    return this._textContent
+    return this._textContent;
   }
 
   set font(value) {
-    this._context.font = this._font = value
-    this._update()
+    this._context.font = this._font = value;
+    this._update();
   }
 
   get font() {
-    return this._font
+    return this._font;
   }
 
   set fillStyle(value) {
-    this._context.fillStyle = this._fillStyle = value
-    this._update()
+    this._context.fillStyle = this._fillStyle = value;
+    this._update();
   }
 
   get fillStyle() {
-    return this._fillStyle
+    return this._fillStyle;
   }
 
   set textAlign(value) {
-    this._textAlign = value
-    this._update()
+    this._textAlign = value;
+    this._update();
   }
 
   get textAlign() {
-    return this._textAlign
+    return this._textAlign;
   }
 
   set maxWidth(value) {
-    this._maxWidth = value
-    this._update()
+    this._maxWidth = value;
+    this._update();
   }
 
   get maxWidth() {
-    return this._maxWidth
+    return this._maxWidth;
   }
 
   set shadowColor(value) {
-    this._context.shadowColor = this._shadowColor = value
-    this._update()
+    this._context.shadowColor = this._shadowColor = value;
+    this._update();
   }
 
   get shadowColor() {
-    return this._shadowColor
+    return this._shadowColor;
   }
 
   set shadowBlur(value) {
-    this._context.shadowBlur = this._shadowBlur = value
-    this._update()
+    this._context.shadowBlur = this._shadowBlur = value;
+    this._update();
   }
 
   get shadowBlur() {
-    return this._shadowBlur
+    return this._shadowBlur;
   }
 
   set shadowOffsetX(value) {
-    this._context.shadowOffsetX = this._shadowOffsetX = value
-    this._update()
+    this._context.shadowOffsetX = this._shadowOffsetX = value;
+    this._update();
   }
 
   get shadowOffsetX() {
-    return this._shadowOffsetX
+    return this._shadowOffsetX;
   }
 
   set shadowOffsetY(value) {
-    this._context.shadowOffsetY = this._shadowOffsetY = value
-    this._update()
+    this._context.shadowOffsetY = this._shadowOffsetY = value;
+    this._update();
   }
 
   get shadowOffsetY() {
-    return this._shadowOffsetY
+    return this._shadowOffsetY;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@damienmortini/three",
-  "version": "0.1.192",
+  "version": "0.1.195",
   "description": "Three.js helpers",
   "keywords": [
     "three",
@@ -25,12 +25,12 @@
     "generateTypes": "npx -p typescript tsc index.js --declaration --allowJs --emitDeclarationOnly --outDir types"
   },
   "dependencies": {
-    "@damienmortini/core": "^0.2.153",
+    "@damienmortini/core": "^0.2.156",
     "fs-extra": "^11.2.0",
-    "three": "0.163.0"
+    "three": "0.169.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a73defde0249007fb0292ef8a534d033cd0580bd"
+  "gitHead": "7a6e220a2926a826d7102270ca6b97715458c8f3"
 }