troika-3d-ui - npm Package Compare versions

Comparing version 0.19.0 to 0.20.0

CHANGELOG.md

@@ -6,2 +6,20 @@ # Change Log
 
+# [0.20.0](https://github.com/protectwise/troika/compare/v0.19.0...v0.20.0) (2020-03-16)
+
+
+### Bug Fixes
+
+* **troika-3d-ui:** fix scrollbars sometimes appearing inappropriately ([010be47](https://github.com/protectwise/troika/commit/010be47962f1f275d99c751bcf50f3e111667299))
+* **troika-3d-ui:** update children when first exiting clip rect ([294f341](https://github.com/protectwise/troika/commit/294f34121e1d20a2152fea354767150abc4e3b1d))
+
+
+### Features
+
+* **troika-3d-ui:** allow dat-gui items to declare their own onUpdate ([a707fd5](https://github.com/protectwise/troika/commit/a707fd5988c4f664a5cfe3ee72747d13b65535e3))
+* **troika-3d-ui:** enable shadow casting by UI block bg/border layers ([d2c056c](https://github.com/protectwise/troika/commit/d2c056cb2d599021f61d6de4ff7223f6b7ca52e6))
+
+
+
+
+
 # [0.19.0](https://github.com/protectwise/troika/compare/v0.19.0-alpha.0...v0.19.0) (2020-02-28)
@@ -8,0 +26,0 @@

package.json

 {
   "name": "troika-3d-ui",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Troika 3D User Interface Toolkit",
@@ -19,7 +19,7 @@ "author": "Jason Johnston <[e-mail]>",
     "object-path": "^0.11.4",
-    "troika-3d": "^0.19.0",
-    "troika-3d-text": "^0.19.0",
-    "troika-core": "^0.19.0",
-    "troika-three-utils": "^0.19.0",
-    "troika-worker-utils": "^0.19.0"
+    "troika-3d": "^0.20.0",
+    "troika-3d-text": "^0.20.0",
+    "troika-core": "^0.20.0",
+    "troika-three-utils": "^0.20.0",
+    "troika-worker-utils": "^0.20.0"
   },
@@ -33,3 +33,3 @@ "devDependencies": {
   },
-  "gitHead": "948b0be7399134a718e6b845682699e704631623"
+  "gitHead": "c97a9f97c30cd4ddfba068430d02d7c0a73c2e08"
 }

src/facade/dat-gui/DatGuiFacade.js

@@ -31,2 +31,4 @@ import { utils } from 'troika-core'
  * @property {number} [height] - A custom height for this item
+ * @property {function} [onUpdate] - A function that will be called when the item's value changes, in
+ *           addition to the main `DatGuiFacade`'s onUpdate function.
  * Additional properties can also be added and will be passed down to their implementation facade.
@@ -65,8 +67,9 @@ */
     this.data = {}
-    this._onItemUpdate = (path, value) => {
-      objectPath.set(this.data, path, value)
-      this.onUpdate(this.data)
-    }
   }
 
+  _onItemUpdate(item, value) {
+    objectPath.set(this.data, item.path, value)
+    this.onUpdate(this.data)
+  }
+
   describeChildren () {
@@ -104,5 +107,11 @@ return [
               margin: [i ? 0 : 0.02, 0, 0.02],
-              value: objectPath.get(this.data, item.path),
-              onUpdate: this._onItemUpdate.bind(this, item.path)
-            }, item) :
+              value: objectPath.get(this.data, item.path)
+            }, item, {
+              onUpdate: (value) => {
+                if (item.onUpdate) {
+                  item.onUpdate.call(item, value)
+                }
+                this._onItemUpdate(item, value)
+              }
+            }) :
             {
@@ -109,0 +118,0 @@ facade: UIBlock3DFacade,

src/facade/dat-gui/DatSelectFacade.js

@@ -83,3 +83,3 @@ import { ListFacade } from 'troika-core'
         to: {scale: 1},
-        duration: 500,
+        duration: 300,
         easing: 'easeOutExpo'
@@ -86,0 +86,0 @@ },

src/facade/UIBlock3DFacade.js

@@ -47,2 +47,3 @@ import { Mesh, Vector2, Vector3, Vector4, PlaneBufferGeometry, Sphere, Matrix4, Plane } from 'three'
     ;(this._geomBoundingSphere = new Sphere()).version = 0
+    this._wasFullyClipped = true
   }
@@ -57,3 +58,4 @@
   updateChildren(children) {
-    if (!this.isFullyClipped) {
+    if (!this.isFullyClipped || !this._wasFullyClipped) {
+      this._wasFullyClipped = this.isFullyClipped
       super.updateChildren(children)
@@ -134,4 +136,4 @@ }
         bgLayer.renderOrder = flexNodeDepth //TODO how can we make this play with the rest of the scene?
-        // bgLayer.castShadow = this.castShadow
-        // bgLayer.receiveShadow = this.receiveShadow
+        bgLayer.castShadow = this.castShadow
+        bgLayer.receiveShadow = this.receiveShadow
       }
@@ -155,4 +157,4 @@ layers.children[0] = bgLayer
         borderLayer.renderOrder = flexNodeDepth + 0.1 //TODO how can we make this play with the rest of the scene?
-        // borderLayer.castShadow = this.castShadow
-        // borderLayer.receiveShadow = this.receiveShadow
+        borderLayer.castShadow = this.castShadow
+        borderLayer.receiveShadow = this.receiveShadow
       }
@@ -195,5 +197,5 @@ layers.children[1] = borderLayer
         textChild.renderOrder = flexNodeDepth + 0.2
-        // textChild.castShadow = this.castShadow
-        // textChild.receiveShadow = this.receiveShadow
-        this.children = textChild //NOTE: text content will clobber any other defined children
+        textChild.castShadow = this.castShadow
+        textChild.receiveShadow = this.receiveShadow
+        this._actualChildren = textChild //NOTE: text content will clobber any other defined children
       } else {
@@ -205,3 +207,3 @@ // Convert any children specified as plain strings to nested text blocks; handy for JSX style
             if (isTextNodeChild(children[i])) {
-              children = this.children = children.slice()
+              children = children.slice()
               for (; i < len; i++) { //continue from here
@@ -220,2 +222,3 @@ if (isTextNodeChild(children[i])) {
         }
+        this._actualChildren = children
       }
@@ -238,2 +241,6 @@ }
 
+  describeChildren () {
+    return this._actualChildren
+  }
+
   getComputedFontSize() {
@@ -240,0 +247,0 @@ return getComputedFontSize(this, DEFAULT_FONT_SIZE)

src/facade/UIBlockLayer3DFacade.js

@@ -8,2 +8,15 @@ import { Object3DFacade } from 'troika-3d'
 
+const shadowMaterialPropDefs = {
+  // Create and update materials for shadows upon request:
+  customDepthMaterial: {
+    get() {
+      return this.$facade._updateLayoutUniforms(this.material.getDepthMaterial())
+    }
+  },
+  customDistanceMaterial: {
+    get() {
+      return this.$facade._updateLayoutUniforms(this.material.getDistanceMaterial())
+    }
+  }
+}
 
@@ -22,2 +35,4 @@ /**
     mesh.frustumCulled = false //TODO moot if we make this an Instanceable, otherwise need to fix culling by transformed size
+    Object.defineProperties(mesh, shadowMaterialPropDefs)
+
     super(parent, mesh)
@@ -46,2 +61,12 @@
     // Set material uniform values
+    this._updateLayoutUniforms(layerMaterial)
+    if (color !== this._lastColor) {
+      this._colorObj.set(color)
+      this._lastColor = color
+    }
+
+    super.afterUpdate()
+  }
+
+  _updateLayoutUniforms(layerMaterial) {
     const uniforms = layerMaterial.uniforms
@@ -54,8 +79,3 @@ uniforms.uTroikaBlockSize.value = this.size
     }
-    if (color !== this._lastColor) {
-      this._colorObj.set(color)
-      this._lastColor = color
-    }
-
-    super.afterUpdate()
+    return layerMaterial
   }
@@ -62,0 +82,0 @@

src/facade/UIBlockLayerDerivedMaterial.js

@@ -136,2 +136,9 @@ import { createDerivedMaterial } from 'troika-3d'
 
+  // WebGLShadowMap reverses the side of the shadow material by default, which fails
+  // for planes, so here we force the `shadowSide` to always match the main side.
+  Object.defineProperty(material, 'shadowSide', {
+    get() {
+      return this.side
+    }
+  })
 
@@ -142,2 +149,2 @@ //force transparency - TODO is this reasonable?
   return material
-}
+}

src/flex-layout/FlexNode.js

@@ -206,4 +206,18 @@ import { requestFlexLayout } from './FlexLayoutProcessor.js'
             if (parent) {
-              parent.scrollWidth = Math.max(parent.scrollWidth, left + width - parent.clientLeft)
-              parent.scrollHeight = Math.max(parent.scrollHeight, top + height - parent.clientTop)
+              let w = left + width - parent.clientLeft
+              let h = top + height - parent.clientTop
+              // Note: allowing a small tolerance here between scrollWidth/Height and clientWidth/Height,
+              // to account for very slight overflows due to floating point math errors
+              if (w > parent.scrollWidth) {
+                if (Math.abs(w - parent.clientWidth) < w / 10000) {
+                  w = parent.clientWidth
+                }
+                parent.scrollWidth = w
+              }
+              if (h > parent.scrollHeight) {
+                if (Math.abs(h - parent.clientHeight) < h / 10000) {
+                  h = parent.clientHeight
+                }
+                parent.scrollHeight = h
+              }
             }
@@ -210,0 +224,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1774477

increased by0.43%

Lines of code

13608

increased by1.2%

Dependency changes

• + Addedtroika-3d@0.20.0(transitive)

• + Addedtroika-3d-text@0.20.0(transitive)

• + Addedtroika-animation@0.20.0(transitive)

• + Addedtroika-core@0.20.0(transitive)

• + Addedtroika-three-utils@0.20.0(transitive)

• + Addedtroika-worker-utils@0.20.0(transitive)

• - Removedtroika-3d@0.19.0(transitive)

• - Removedtroika-3d-text@0.19.0(transitive)

• - Removedtroika-animation@0.19.0(transitive)

• - Removedtroika-core@0.19.0(transitive)

• - Removedtroika-three-utils@0.19.0(transitive)

• - Removedtroika-worker-utils@0.19.0(transitive)

• Updatedtroika-3d@^0.20.0

• Updatedtroika-3d-text@^0.20.0

• Updatedtroika-core@^0.20.0

• Updatedtroika-three-utils@^0.20.0

• Updatedtroika-worker-utils@^0.20.0