Merge pull request #309 from Smithsonian/rc-45

Merge Rc 45

libs/ff-core/source/Color.ts

@@ -299,26 +299,20 @@ export default class Color implements IVector4
     {
         color = color.trim().toLowerCase();
         color = Color.presets[color] || color;
-
-        let result = color.match(/^#?([0-9a-f]{3})$/i);
-        if (result) {
-            const text = result[1];
+        let text = /^#?([0-9a-f]{3,8})$/i.exec(color)?.[1];
+        if (text && (text.length === 3 || text.length == 4)) {
             const factor = 1 / 15;
             this.x = Number.parseInt(text.charAt(0), 16) * factor;
             this.y = Number.parseInt(text.charAt(1), 16) * factor;
             this.z = Number.parseInt(text.charAt(2), 16) * factor;
-            this.w = alpha;
+            this.w = (text.length == 4)? Number.parseInt(text.charAt(3), 16) * factor:alpha;
             return this;
-        }
-
-        result = color.match(/^#?([0-9a-f]{6})$/i);
-        if (result) {
-            const text = result[1];
+        }else if (text && (text.length === 6 || text.length == 8) ) {
             const factor = 1 / 255;
             this.x = Number.parseInt(text.substr(0,2), 16) * factor;
             this.y = Number.parseInt(text.substr(2,2), 16) * factor;
             this.z = Number.parseInt(text.substr(4,2), 16) * factor;
-            this.w = alpha;
+            this.w =  (text.length == 8)? Number.parseInt(text.substr(6,2), 16) * factor:alpha;
             return this;
         }
 
@@ -478,15 +472,13 @@ export default class Color implements IVector4
         return [ this.r, this.g, this.b, this.a ];
     }
 
-    toString(includeAlpha: boolean = true): string
+    toString(includeAlpha?: boolean): string
     {
-        if (includeAlpha && this.w < 1) {
-            return `rgba(${this.redByte}, ${this.greenByte}, ${this.blueByte}, ${this.w})`;
-        }
-        else {
-            const value = (1 << 24) + (this.redByte << 16) + (this.greenByte << 8) + this.blueByte;
-            return `#${value.toString(16).slice(1)}`;
+        let bytes = [this.redByte, this.greenByte, this.blueByte];
+        if (includeAlpha || (typeof includeAlpha === "undefined" && this.w < 1)) {
+            bytes.push(this.alphaByte);
         }
+        return "#"+bytes.map(b=>b.toString(16).padStart(2,"0")).join("");
     }
 
     private static presets = {

libs/ff-core/test/Color.test.ts

@@ -27,13 +27,29 @@ export default function() {
             assert.approximately(c.w, 0xff / 255, eps, "alpha");
         });
 
+        test("fromString - static constructor from 8-digit hex string #4d7e0988", function() {
+            const c = Color.fromString("#4d7e0908");
+            assert.approximately(c.x, 0x4d / 255, eps, "red");
+            assert.approximately(c.y, 0x7e / 255, eps, "green");
+            assert.approximately(c.z, 0x09 / 255, eps, "blue");
+            assert.approximately(c.w, 0x08 / 255, eps, "alpha");
+        });
+
         test("fromString - static constructor from 3-digit hex string #6ea", function() {
             const c = Color.fromString("#6ea");
             assert.approximately(c.x, 0x66 / 255, eps, "red");
             assert.approximately(c.y, 0xee / 255, eps, "green");
             assert.approximately(c.z, 0xaa / 255, eps, "blue");
             assert.approximately(c.w, 0xff / 255, eps, "alpha");
         });
+
+        test("fromString - static constructor from 4-digit hex string #6ea", function() {
+            const c = Color.fromString("#6ea3");
+            assert.approximately(c.x, 0x66 / 255, eps, "red");
+            assert.approximately(c.y, 0xee / 255, eps, "green");
+            assert.approximately(c.z, 0xaa / 255, eps, "blue");
+            assert.approximately(c.w, 0x33 / 255, eps, "alpha");
+        });
 
         test("fromString - static constructor from rgb(47, 25, 243)", function() {
             const c = Color.fromString("rgb(47, 25, 243)");

libs/ff-scene/source/components/CCamera.ts

@@ -5,7 +5,7 @@
  * License: MIT
  */
 
-import { Vector3, Euler, Quaternion, EulerOrder } from "three";
+import { Vector3, Euler, Quaternion, EulerOrder, Matrix4 } from "three";
 
 import { Node, types } from "@ff/graph/Component";
 
@@ -107,7 +107,7 @@ export default class CCamera extends CObject3D
      * Updating the properties then also updates the matrix of the internal universal camera object.
      * @param matrix A 4x4 transform matrix. If omitted, properties are updated from the matrix of the internal camera.
      */
-    setPropertiesFromMatrix(matrix?: THREE.Matrix4)
+    setPropertiesFromMatrix(matrix?: Matrix4)
     {
         const silent = !matrix;
         matrix = matrix || this.object3D.matrix;

libs/ff-scene/source/components/CObject3D.ts

@@ -35,7 +35,7 @@ export interface IObject3DObjectEvent extends ITypedEvent<"object">
 }
 
 /**
- * Base class for drawable components. Wraps a THREE.Object3D based instance.
+ * Base class for drawable components. Wraps a Object3D based instance.
  * If component is added to a node together with a [[Transform]] component,
  * it is automatically added as a child to the transform.
  */
@@ -63,7 +63,7 @@ export default class CObject3D extends Component implements ICObject3D
     outs = this.addOutputs(CObject3D.object3DOuts);
 
 
-    private _object3D: THREE.Object3D = null;
+    private _object3D: Object3D = null;
     private _isPickable = false;
 
     constructor(node: Node, id: string)
@@ -91,17 +91,17 @@ export default class CObject3D extends Component implements ICObject3D
         const transform = this.transform;
         return transform ? transform.getParentComponent(CScene, true) : undefined;
     }
-    /** The underlying [[THREE.Object3D]] of this component. */
-    get object3D(): THREE.Object3D | null {
+    /** The underlying [[Object3D]] of this component. */
+    get object3D(): Object3D | null {
         return this._object3D;
     }
 
     /**
-     * Assigns a [[THREE.Object3D]] to this component. The object automatically becomes a child
+     * Assigns a [[Object3D]] to this component. The object automatically becomes a child
      * of the parent component's object.
      * @param object
      */
-    set object3D(object: THREE.Object3D)
+    set object3D(object: Object3D)
     {
         const currentObject = this._object3D;
         if (currentObject) {
@@ -254,33 +254,33 @@ export default class CObject3D extends Component implements ICObject3D
         return true;
     }
 
-    protected onAddToParent(parent: THREE.Object3D)
+    protected onAddToParent(parent: Object3D)
     {
         parent.add(this._object3D);
     }
 
-    protected onRemoveFromParent(parent: THREE.Object3D)
+    protected onRemoveFromParent(parent: Object3D)
     {
         parent.remove(this._object3D);
     }
 
     /**
-     * Adds a [[THREE.Object3D]] as a child to this component's object.
+     * Adds a [[Object3D]] as a child to this component's object.
      * Registers the object with the picking service to make it pickable.
      * @param object
      */
-    protected addObject3D(object: THREE.Object3D)
+    protected addObject3D(object: Object3D)
     {
         this._object3D.add(object);
         this.registerPickableObject3D(object, true);
     }
 
     /**
-     * Removes a [[THREE.Object3D]] child from this component's object.
+     * Removes a [[Object3D]] child from this component's object.
      * Also unregisters the object from the picking service.
      * @param object
      */
-    protected removeObject3D(object: THREE.Object3D)
+    protected removeObject3D(object: Object3D)
     {
         this.unregisterPickableObject3D(object, true);
         this._object3D.remove(object);
@@ -292,7 +292,7 @@ export default class CObject3D extends Component implements ICObject3D
      * @param object
      * @param recursive
      */
-    protected registerPickableObject3D(object: THREE.Object3D, recursive: boolean)
+    protected registerPickableObject3D(object: Object3D, recursive: boolean)
     {
         GPUPicker.add(object, recursive);
     }
@@ -303,14 +303,14 @@ export default class CObject3D extends Component implements ICObject3D
      * @param object
      * @param recursive
      */
-    protected unregisterPickableObject3D(object: THREE.Object3D, recursive: boolean)
+    protected unregisterPickableObject3D(object: Object3D, recursive: boolean)
     {
         GPUPicker.remove(object, recursive);
     }
 
     private _onParent(event: IComponentEvent<ICObject3D>)
     {
-        // add this THREE.Object3D to the parent THREE.Object3D
+        // add this Object3D to the parent Object3D
         if (this._object3D && !this._object3D.parent && event.add) {
             this.onAddToParent(event.object.object3D);
         }

libs/ff-three/source/Floor.ts

@@ -52,8 +52,8 @@ export interface IFloorMaterialParameters extends MeshPhongMaterialParameters
 
 export class FloorMaterial extends MeshPhongMaterial
 {
-    isMeshPhongMaterial: boolean;
-    isFloorMaterial: boolean;
+    readonly isMeshPhongMaterial = true;
+    readonly isFloorMaterial = true;
 
     uniforms: {
     };
@@ -69,9 +69,6 @@ export class FloorMaterial extends MeshPhongMaterial
 
         this.type = "FloorMaterial";
 
-        this.isMeshPhongMaterial = true;
-        this.isFloorMaterial = true;
-
         this.defines = {};
         this.uniforms = UniformsUtils.merge([
             ShaderLib.phong.uniforms

libs/ff-three/source/Grid.ts

@@ -20,8 +20,8 @@ export interface IGridProps
     size: number;
     mainDivisions: number;
     subDivisions: number;
-    mainColor: THREE.Color | string | number;
-    subColor: THREE.Color | string | number;
+    mainColor: Color | string | number;
+    subColor: Color | string | number;
 }
 
 export default class Grid extends LineSegments
@@ -51,7 +51,7 @@ export default class Grid extends LineSegments
         this.geometry = Grid.generate(props);
     }
 
-    protected static generate(props: IGridProps): THREE.BufferGeometry
+    protected static generate(props: IGridProps): BufferGeometry
     {
         const mainColor = new Color(props.mainColor as any);
         const subColor = new Color(props.subColor as any);

libs/ff-three/source/HTMLSprite.ts

@@ -10,6 +10,7 @@ import {
     Camera,
     Vector2,
     Vector3,
+    Object3DEventMap,
 } from "three";
 
 import CustomElement, { customElement, html } from "@ff/ui/CustomElement";
@@ -31,7 +32,7 @@ export enum EQuadrant { TopRight, TopLeft, BottomLeft, BottomRight }
  * A Three.js Object representing a 3D renderable part and a 2D (HTML) part.
  * HTML sprites should have a [[HTMLSpriteGroup]] as their parent.
  */
-export default class HTMLSprite extends Object3D
+export default class HTMLSprite<EventMap extends Object3DEventMap = Object3DEventMap> extends Object3D<EventMap>
 {
     readonly isHTMLSprite = true;
 

libs/ff-three/source/UniversalCamera.ts

@@ -159,7 +159,7 @@ export default class UniversalCamera extends Camera
         // TODO: Implement
     }
 
-    moveToView(boundingBox: THREE.Box3)
+    moveToView(boundingBox: Box3)
     {
         this.updateMatrixWorld(false);
         _box.copy(boundingBox);
@@ -278,20 +278,20 @@ export default class UniversalCamera extends Camera
     toJSON(meta)
     {
         const data = super.toJSON(meta);
-
-        data.object.fov = this.fov;
-        data.object.size = this.size;
-        data.object.aspect = this.aspect;
-        data.object.zoom = this.zoom;
-        data.object.near = this.near;
-        data.object.far = this.far;
-
-        data.object.focus = this.focus;
-        data.object.filmGauge = this.filmGauge;
-        data.object.filmOffset = this.filmOffset;
+        Object.assign(data.object, {
+            fov: this.fov,
+            size: this.size,
+            aspect: this.aspect,
+            zoom: this.zoom,
+            near: this.near,
+            far: this.far,
+            focus: this.focus,
+            filmGauge: this.filmGauge,
+            filmOffset: this.filmOffset,
+        });
 
         if (this.view !== null) {
-            data.object.view = Object.assign({}, this.view);
+            (data.object as any).view = Object.assign({}, this.view);
         }
 
         return data;