troika-3d-text - npm Package Compare versions

Comparing version 0.38.1 to 0.39.0

CHANGELOG.md

@@ -6,2 +6,15 @@ # Change Log
 
+# [0.39.0](https://github.com/protectwise/troika/compare/v0.38.1...v0.39.0) (2021-02-15)
+
+
+### Features
+
+* **troika-core:** add requestRender method as nicer shortcut ([c79254c](https://github.com/protectwise/troika/commit/c79254c8be44f70f34b6c9cb9306a45892c3f4e9))
+* **troika-three-text:** add curveRadius for applying cylindrical curvature ([6fdfbbf](https://github.com/protectwise/troika/commit/6fdfbbfcc0cdae0143555c9cb6569ba9e70150c5))
+* **troika-three-text:** export a function for debugging SDF textures ([3fb0c23](https://github.com/protectwise/troika/commit/3fb0c23bae22b3812839c0639f8278d68120fc8c))
+
+
+
+
+
 ## [0.38.1](https://github.com/protectwise/troika/compare/v0.38.0...v0.38.1) (2021-02-03)
@@ -8,0 +21,0 @@

dist/troika-3d-text.esm.js

 import { getSelectionRects, getCaretAtPoint, Text } from 'troika-three-text';
-export { GlyphsGeometry, Text as TextMesh, configureTextBuilder, fontProcessorWorkerModule, getCaretAtPoint, getSelectionRects, preloadFont } from 'troika-three-text';
+export { GlyphsGeometry, Text as TextMesh, configureTextBuilder, dumpSDFTextures, fontProcessorWorkerModule, getCaretAtPoint, getSelectionRects, preloadFont } from 'troika-three-text';
 import { Instanceable3DFacade, createDerivedMaterial, ListFacade, Object3DFacade } from 'troika-3d';
-import { Vector4, Color, MeshBasicMaterial, Mesh, BoxBufferGeometry, Matrix4, Plane, Vector3 } from 'three';
+import { Vector4, Color, Vector2, MeshBasicMaterial, Mesh, BoxBufferGeometry, Matrix4, Plane, Vector3 } from 'three';
 import { invertMatrix4 } from 'troika-three-utils';
@@ -9,3 +9,3 @@
 
-function getMesh() {
+function getMeshes() {
   let material = createDerivedMaterial(
@@ -19,17 +19,35 @@ new MeshBasicMaterial({
       uniforms: {
-        rect: {value: new Vector4()}
+        rect: {value: new Vector4()},
+        depthAndCurveRadius: {value: new Vector2()}
       },
-      vertexDefs: `uniform vec4 rect;`,
+      vertexDefs: `
+uniform vec4 rect;
+uniform vec2 depthAndCurveRadius;
+`,
       vertexTransform: `
-  position.x = position.x < 0.0 ? rect.x : rect.z;
-  position.y = position.y < 0.0 ? rect.w : rect.y;
-  `
+float depth = depthAndCurveRadius.x;
+float rad = depthAndCurveRadius.y;
+position.x = mix(rect.x, rect.z, position.x);
+position.y = mix(rect.w, rect.y, position.y);
+position.z = mix(-depth * 0.5, depth * 0.5, position.z);
+if (rad != 0.0) {
+  float angle = position.x / rad;
+  position.xz = vec2(sin(angle) * (rad - position.z), rad - cos(angle) * (rad - position.z));
+  // TODO fix normals: normal.xz = vec2(sin(angle), cos(angle));
+}
+`
     }
   );
-  material.instanceUniforms = ['rect', 'diffuse'];
-  const mesh = new Mesh(
-    new BoxBufferGeometry().translate(0, 0, -0.5), //origin on front face for distance sorting
-    material
-  );
-  return (getMesh = () => mesh)()
+  material.instanceUniforms = ['rect', 'depthAndCurveRadius', 'diffuse'];
+  const meshes = {
+    normal: new Mesh(
+      new BoxBufferGeometry(1, 1, 1).translate(0.5, 0.5, 0.5),
+      material
+    ),
+    curved: new Mesh(
+      new BoxBufferGeometry(1, 1, 1, 32).translate(0.5, 0.5, 0.5),
+      material
+    )
+  };
+  return (getMeshes = () => meshes)()
 }
@@ -43,3 +61,4 @@
     super(parent);
-    this.instancedThreeObject = getMesh();
+    this.depth = 0;
+    this.curveRadius = 0;
     this._color = new Color();
@@ -50,3 +69,5 @@ this._rect = new Vector4();
   afterUpdate() {
-    const {top, right, bottom, left, color} = this;
+    const {top, right, bottom, left, color, depth, curveRadius} = this;
+    this.instancedThreeObject = getMeshes()[curveRadius ? 'curved' : 'normal'];
+
     if (!this._color.equals(color)) {
@@ -59,2 +80,5 @@ this.setInstanceUniform('diffuse', this._color = new Color(color));
     }
+    if (!depth !== this._depth || curveRadius !== this._curveRadius) {
+      this.setInstanceUniform('depthAndCurveRadius', new Vector2(this._depth = depth, this._curveRadius = curveRadius));
+    }
     super.afterUpdate();
@@ -85,2 +109,3 @@ }
     this.clipRect = noClip;
+    this.curveRadius = 0;
 
@@ -94,5 +119,5 @@ this.template = {
       left: d => clamp(d.left, this.clipRect[0], this.clipRect[2]),
-      z: d => (d.top - d.bottom) * THICKNESS / 2,
-      scaleZ: d => (d.top - d.bottom) * THICKNESS,
+      depth: d => (d.top - d.bottom) * THICKNESS,
       color: d => this.rangeColor,
+      curveRadius: d => this.curveRadius,
       visible: d => {
@@ -200,2 +225,3 @@ let r = this.clipRect;
   'strokeOpacity',
+  'curveRadius',
   'depthOffset',
@@ -242,3 +268,3 @@ 'clipRect',
         this.notifyWorld('text3DSyncComplete');
-        this.notifyWorld('needsRender');
+        this.requestRender();
         if (this.onSyncComplete) {
@@ -284,3 +310,3 @@ this.onSyncComplete();
           this._updateSelection();
-          this.notifyWorld('needsRender');
+          this.requestRender();
         });
@@ -299,2 +325,3 @@ } else {
       selFacade.selectionEnd = selectionEnd;
+      selFacade.curveRadius = this.curveRadius || 0;
       selFacade.clipRect = this.clipRect;
@@ -301,0 +328,0 @@ selFacade.renderOrder = this.renderOrder;

dist/troika-3d-text.umd.js

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('troika-three-text'), require('troika-3d'), require('three'), require('troika-three-utils')) :
   typeof define === 'function' && define.amd ? define(['exports', 'troika-three-text', 'troika-3d', 'three', 'troika-three-utils'], factory) :
-  (global = global || self, factory(global.troika_3d_text = {}, global.troika_three_text, global.troika_3d, global.THREE, global.troika_three_utils));
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.troika_3d_text = {}, global.troika_three_text, global.troika_3d, global.THREE, global.troika_three_utils));
 }(this, (function (exports, troikaThreeText, troika3d, three, troikaThreeUtils) { 'use strict';
@@ -9,3 +9,3 @@
 
-  function getMesh() {
+  function getMeshes() {
     var material = troika3d.createDerivedMaterial(
@@ -19,14 +19,21 @@ new three.MeshBasicMaterial({
         uniforms: {
-          rect: {value: new three.Vector4()}
+          rect: {value: new three.Vector4()},
+          depthAndCurveRadius: {value: new three.Vector2()}
         },
-        vertexDefs: "uniform vec4 rect;",
-        vertexTransform: "\n  position.x = position.x < 0.0 ? rect.x : rect.z;\n  position.y = position.y < 0.0 ? rect.w : rect.y;\n  "
+        vertexDefs: "\nuniform vec4 rect;\nuniform vec2 depthAndCurveRadius;\n",
+        vertexTransform: "\nfloat depth = depthAndCurveRadius.x;\nfloat rad = depthAndCurveRadius.y;\nposition.x = mix(rect.x, rect.z, position.x);\nposition.y = mix(rect.w, rect.y, position.y);\nposition.z = mix(-depth * 0.5, depth * 0.5, position.z);\nif (rad != 0.0) {\n  float angle = position.x / rad;\n  position.xz = vec2(sin(angle) * (rad - position.z), rad - cos(angle) * (rad - position.z));\n  // TODO fix normals: normal.xz = vec2(sin(angle), cos(angle));\n}\n"
       }
     );
-    material.instanceUniforms = ['rect', 'diffuse'];
-    var mesh = new three.Mesh(
-      new three.BoxBufferGeometry().translate(0, 0, -0.5), //origin on front face for distance sorting
-      material
-    );
-    return (getMesh = function () { return mesh; })()
+    material.instanceUniforms = ['rect', 'depthAndCurveRadius', 'diffuse'];
+    var meshes = {
+      normal: new three.Mesh(
+        new three.BoxBufferGeometry(1, 1, 1).translate(0.5, 0.5, 0.5),
+        material
+      ),
+      curved: new three.Mesh(
+        new three.BoxBufferGeometry(1, 1, 1, 32).translate(0.5, 0.5, 0.5),
+        material
+      )
+    };
+    return (getMeshes = function () { return meshes; })()
   }
@@ -40,3 +47,4 @@
       Instanceable3DFacade.call(this, parent);
-      this.instancedThreeObject = getMesh();
+      this.depth = 0;
+      this.curveRadius = 0;
       this._color = new three.Color();
@@ -57,2 +65,6 @@ this._rect = new three.Vector4();
       var color = ref.color;
+      var depth = ref.depth;
+      var curveRadius = ref.curveRadius;
+      this.instancedThreeObject = getMeshes()[curveRadius ? 'curved' : 'normal'];
+
       if (!this._color.equals(color)) {
@@ -65,2 +77,5 @@ this.setInstanceUniform('diffuse', this._color = new three.Color(color));
       }
+      if (!depth !== this._depth || curveRadius !== this._curveRadius) {
+        this.setInstanceUniform('depthAndCurveRadius', new three.Vector2(this._depth = depth, this._curveRadius = curveRadius));
+      }
       Instanceable3DFacade.prototype.afterUpdate.call(this);
@@ -95,2 +110,3 @@ };
       this.clipRect = noClip;
+      this.curveRadius = 0;
 
@@ -104,5 +120,5 @@ this.template = {
         left: function (d) { return clamp(d.left, this$1.clipRect[0], this$1.clipRect[2]); },
-        z: function (d) { return (d.top - d.bottom) * THICKNESS / 2; },
-        scaleZ: function (d) { return (d.top - d.bottom) * THICKNESS; },
+        depth: function (d) { return (d.top - d.bottom) * THICKNESS; },
         color: function (d) { return this$1.rangeColor; },
+        curveRadius: function (d) { return this$1.curveRadius; },
         visible: function (d) {
@@ -220,2 +236,3 @@ var r = this$1.clipRect;
     'strokeOpacity',
+    'curveRadius',
     'depthOffset',
@@ -264,3 +281,3 @@ 'clipRect',
           this$1.notifyWorld('text3DSyncComplete');
-          this$1.notifyWorld('needsRender');
+          this$1.requestRender();
           if (this$1.onSyncComplete) {
@@ -319,3 +336,3 @@ this$1.onSyncComplete();
             this$1._updateSelection();
-            this$1.notifyWorld('needsRender');
+            this$1.requestRender();
           });
@@ -334,2 +351,3 @@ } else {
         selFacade.selectionEnd = selectionEnd;
+        selFacade.curveRadius = this.curveRadius || 0;
         selFacade.clipRect = this.clipRect;
@@ -389,2 +407,8 @@ selFacade.renderOrder = this.renderOrder;
   });
+  Object.defineProperty(exports, 'dumpSDFTextures', {
+    enumerable: true,
+    get: function () {
+      return troikaThreeText.dumpSDFTextures;
+    }
+  });
   Object.defineProperty(exports, 'fontProcessorWorkerModule', {
@@ -391,0 +415,0 @@ enumerable: true,

dist/troika-3d-text.umd.min.js

@@ -1,14 +0,15 @@
-'use strict';(function(b,f){"object"===typeof exports&&"undefined"!==typeof module?f(exports,require("troika-three-text"),require("troika-3d"),require("three"),require("troika-three-utils")):"function"===typeof define&&define.amd?define(["exports","troika-three-text","troika-3d","three","troika-three-utils"],f):(b=b||self,f(b.troika_3d_text={},b.troika_three_text,b.troika_3d,b.THREE,b.troika_three_utils))})(this,function(b,f,k,g,m){function n(){var c=k.createDerivedMaterial(new g.MeshBasicMaterial({transparent:!0,
-opacity:.3,depthWrite:!1}),{uniforms:{rect:{value:new g.Vector4}},vertexDefs:"uniform vec4 rect;",vertexTransform:"\n  position.x = position.x < 0.0 ? rect.x : rect.z;\n  position.y = position.y < 0.0 ? rect.w : rect.y;\n  "});c.instanceUniforms=["rect","diffuse"];var a=new g.Mesh((new g.BoxBufferGeometry).translate(0,0,-.5),c);return(n=function(){return a})()}var p=new g.Vector4,u=function(c){function a(a){c.call(this,a);this.instancedThreeObject=n();this._color=new g.Color;this._rect=new g.Vector4}
-c&&(a.__proto__=c);a.prototype=Object.create(c&&c.prototype);a.prototype.constructor=a;a.prototype.afterUpdate=function(){var a=this.top,l=this.right,h=this.bottom,e=this.left,b=this.color;this._color.equals(b)||this.setInstanceUniform("diffuse",this._color=new g.Color(b));this._rect.equals(p.set(e,a,l,h))||this.setInstanceUniform("rect",p.clone());c.prototype.afterUpdate.call(this)};a.prototype.getBoundingSphere=function(){return null};return a}(k.Instanceable3DFacade),q=new g.Matrix4,v=new g.Plane,
-w=new g.Vector3,r=Object.freeze([-Infinity,-Infinity,Infinity,Infinity]),x=function(c){function a(a,b){var e=this;c.call(this,a);var h=a.threeObject;this.rangeColor=52479;this.clipRect=r;this.template={key:function(a,b){return"rect"+b},facade:u,top:function(a){return Math.min(e.clipRect[3],Math.max(e.clipRect[1],a.top))},right:function(a){return Math.min(e.clipRect[2],Math.max(e.clipRect[0],a.right))},bottom:function(a){return Math.min(e.clipRect[3],Math.max(e.clipRect[1],a.bottom))},left:function(a){return Math.min(e.clipRect[2],
-Math.max(e.clipRect[0],a.left))},z:function(a){return.25*(a.top-a.bottom)/2},scaleZ:function(a){return.25*(a.top-a.bottom)},color:function(a){return e.rangeColor},visible:function(a){var b=e.clipRect;return a.right>b[0]&&a.top>b[1]&&a.left<b[2]&&a.bottom<b[3]},renderOrder:function(a){return e.renderOrder||0}};var d=function(c){var d=e.textRenderInfo;if(d){var t=c.intersection.point.clone().applyMatrix4(m.invertMatrix4(h.matrixWorld,q));if(d=f.getCaretAtPoint(d,t.x,t.y))b(d.charIndex,d.charIndex),
-a.addEventListener("drag",l),a.addEventListener("dragend",g);c.preventDefault()}},l=function(a){var c=h.textRenderInfo;if(a.ray&&c){var d=a.ray.clone().applyMatrix4(m.invertMatrix4(h.matrixWorld,q)).intersectPlane(v.setComponents(0,0,1,0),w);d&&(c=f.getCaretAtPoint(c,d.x,d.y))&&b(e.selectionStart,c.charIndex);a.preventDefault()}},g=function(b){a.removeEventListener("drag",l);a.removeEventListener("dragend",g)};a.addEventListener("dragstart",d);a.addEventListener("mousedown",d);this._cleanupEvents=
-function(){g();a.removeEventListener("dragstart",d);a.removeEventListener("mousedown",d)}}c&&(a.__proto__=c);a.prototype=Object.create(c&&c.prototype);a.prototype.constructor=a;var b={clipRect:{configurable:!0}};a.prototype.afterUpdate=function(){this.data=f.getSelectionRects(this.textRenderInfo,this.selectionStart,this.selectionEnd);c.prototype.afterUpdate.call(this)};b.clipRect.set=function(a){this._clipRect=a&&Array.isArray(a)&&4===a.length?a:r};b.clipRect.get=function(){return this._clipRect};
-a.prototype.destructor=function(){this._cleanupEvents();c.prototype.destructor.call(this)};Object.defineProperties(a.prototype,b);return a}(k.ListFacade),y="text anchorX anchorY font fontSize letterSpacing lineHeight maxWidth overflowWrap textAlign textIndent whiteSpace material color colorRanges fillOpacity outlineOpacity outlineColor outlineWidth outlineOffsetX outlineOffsetY outlineBlur strokeColor strokeWidth strokeOpacity depthOffset clipRect orientation glyphGeometryDetail sdfGlyphSize debugSDF".split(" "),
-z=function(b){function a(a){var c=this,e=new f.Text;e.geometry.boundingSphere.version=0;b.call(this,a,e);this.selectable=!1;this.selectionStart=this.selectionEnd=-1;this.onSyncComplete=this.onSyncStart=null;e.addEventListener("syncstart",function(a){c.notifyWorld("text3DSyncStart");if(c.onSyncStart)c.onSyncStart()});e.addEventListener("synccomplete",function(a){if(!c.isDestroying&&(e.geometry.boundingSphere.version++,c.afterUpdate(),c.notifyWorld("text3DSyncComplete"),c.notifyWorld("needsRender"),
-c.onSyncComplete))c.onSyncComplete()})}b&&(a.__proto__=b);a.prototype=Object.create(b&&b.prototype);a.prototype.constructor=a;var c={textRenderInfo:{configurable:!0}};c.textRenderInfo.get=function(){return this.threeObject.textRenderInfo};a.prototype.afterUpdate=function(){var a=this,c=this.threeObject;y.forEach(function(b){c[b]=a[b]});c.sync();b.prototype.afterUpdate.call(this);this.text!==this._prevText&&(this.selectionStart=this.selectionEnd=-1,this._prevText=this.text);this._updateSelection()};
-a.prototype._updateSelection=function(){var a=this,b=this.selectable,c=this.selectionStart,f=this.selectionEnd,d=this._selectionFacade;b!==this._selectable&&((this._selectable=b)?d=this._selectionFacade=new x(this,function(b,c){a.selectionStart=b;a.selectionEnd=c;a._updateSelection();a.notifyWorld("needsRender")}):(d&&(d.destructor(),d=this._selectionFacade=null),this.selectionStart=this.selectionEnd=-1));d&&(d.textRenderInfo=this.threeObject.textRenderInfo,d.selectionStart=c,d.selectionEnd=f,d.clipRect=
-this.clipRect,d.renderOrder=this.renderOrder,d.afterUpdate())};a.prototype.destructor=function(){this.threeObject.dispose();this._selectionFacade&&this._selectionFacade.destructor();b.prototype.destructor.call(this)};Object.defineProperties(a.prototype,c);return a}(k.Object3DFacade);Object.defineProperty(b,"GlyphsGeometry",{enumerable:!0,get:function(){return f.GlyphsGeometry}});Object.defineProperty(b,"TextMesh",{enumerable:!0,get:function(){return f.Text}});Object.defineProperty(b,"configureTextBuilder",
-{enumerable:!0,get:function(){return f.configureTextBuilder}});Object.defineProperty(b,"fontProcessorWorkerModule",{enumerable:!0,get:function(){return f.fontProcessorWorkerModule}});Object.defineProperty(b,"getCaretAtPoint",{enumerable:!0,get:function(){return f.getCaretAtPoint}});Object.defineProperty(b,"getSelectionRects",{enumerable:!0,get:function(){return f.getSelectionRects}});Object.defineProperty(b,"preloadFont",{enumerable:!0,get:function(){return f.preloadFont}});b.Text3DFacade=z;Object.defineProperty(b,
-"__esModule",{value:!0})})
+'use strict';(function(b,e){"object"===typeof exports&&"undefined"!==typeof module?e(exports,require("troika-three-text"),require("troika-3d"),require("three"),require("troika-three-utils")):"function"===typeof define&&define.amd?define(["exports","troika-three-text","troika-3d","three","troika-three-utils"],e):(b="undefined"!==typeof globalThis?globalThis:b||self,e(b.troika_3d_text={},b.troika_three_text,b.troika_3d,b.THREE,b.troika_three_utils))})(this,function(b,e,l,g,m){function n(){var c=l.createDerivedMaterial(new g.MeshBasicMaterial({transparent:!0,
+opacity:.3,depthWrite:!1}),{uniforms:{rect:{value:new g.Vector4},depthAndCurveRadius:{value:new g.Vector2}},vertexDefs:"\nuniform vec4 rect;\nuniform vec2 depthAndCurveRadius;\n",vertexTransform:"\nfloat depth = depthAndCurveRadius.x;\nfloat rad = depthAndCurveRadius.y;\nposition.x = mix(rect.x, rect.z, position.x);\nposition.y = mix(rect.w, rect.y, position.y);\nposition.z = mix(-depth * 0.5, depth * 0.5, position.z);\nif (rad != 0.0) {\n  float angle = position.x / rad;\n  position.xz = vec2(sin(angle) * (rad - position.z), rad - cos(angle) * (rad - position.z));\n  // TODO fix normals: normal.xz = vec2(sin(angle), cos(angle));\n}\n"});
+c.instanceUniforms=["rect","depthAndCurveRadius","diffuse"];var a={normal:new g.Mesh((new g.BoxBufferGeometry(1,1,1)).translate(.5,.5,.5),c),curved:new g.Mesh((new g.BoxBufferGeometry(1,1,1,32)).translate(.5,.5,.5),c)};return(n=function(){return a})()}var p=new g.Vector4,u=function(c){function a(a){c.call(this,a);this.curveRadius=this.depth=0;this._color=new g.Color;this._rect=new g.Vector4}c&&(a.__proto__=c);a.prototype=Object.create(c&&c.prototype);a.prototype.constructor=a;a.prototype.afterUpdate=
+function(){var a=this.top,h=this.right,k=this.bottom,f=this.left,b=this.color,d=this.depth,e=this.curveRadius;this.instancedThreeObject=n()[e?"curved":"normal"];this._color.equals(b)||this.setInstanceUniform("diffuse",this._color=new g.Color(b));this._rect.equals(p.set(f,a,h,k))||this.setInstanceUniform("rect",p.clone());!d===this._depth&&e===this._curveRadius||this.setInstanceUniform("depthAndCurveRadius",new g.Vector2(this._depth=d,this._curveRadius=e));c.prototype.afterUpdate.call(this)};a.prototype.getBoundingSphere=
+function(){return null};return a}(l.Instanceable3DFacade),q=new g.Matrix4,v=new g.Plane,w=new g.Vector3,r=Object.freeze([-Infinity,-Infinity,Infinity,Infinity]),x=function(c){function a(a,b){var f=this;c.call(this,a);var k=a.threeObject;this.rangeColor=52479;this.clipRect=r;this.curveRadius=0;this.template={key:function(a,b){return"rect"+b},facade:u,top:function(a){return Math.min(f.clipRect[3],Math.max(f.clipRect[1],a.top))},right:function(a){return Math.min(f.clipRect[2],Math.max(f.clipRect[0],
+a.right))},bottom:function(a){return Math.min(f.clipRect[3],Math.max(f.clipRect[1],a.bottom))},left:function(a){return Math.min(f.clipRect[2],Math.max(f.clipRect[0],a.left))},depth:function(a){return.25*(a.top-a.bottom)},color:function(a){return f.rangeColor},curveRadius:function(a){return f.curveRadius},visible:function(a){var b=f.clipRect;return a.right>b[0]&&a.top>b[1]&&a.left<b[2]&&a.bottom<b[3]},renderOrder:function(a){return f.renderOrder||0}};var d=function(c){var d=f.textRenderInfo;if(d){var t=
+c.intersection.point.clone().applyMatrix4(m.invertMatrix4(k.matrixWorld,q));if(d=e.getCaretAtPoint(d,t.x,t.y))b(d.charIndex,d.charIndex),a.addEventListener("drag",g),a.addEventListener("dragend",h);c.preventDefault()}},g=function(a){var c=k.textRenderInfo;if(a.ray&&c){var d=a.ray.clone().applyMatrix4(m.invertMatrix4(k.matrixWorld,q)).intersectPlane(v.setComponents(0,0,1,0),w);d&&(c=e.getCaretAtPoint(c,d.x,d.y))&&b(f.selectionStart,c.charIndex);a.preventDefault()}},h=function(b){a.removeEventListener("drag",
+g);a.removeEventListener("dragend",h)};a.addEventListener("dragstart",d);a.addEventListener("mousedown",d);this._cleanupEvents=function(){h();a.removeEventListener("dragstart",d);a.removeEventListener("mousedown",d)}}c&&(a.__proto__=c);a.prototype=Object.create(c&&c.prototype);a.prototype.constructor=a;var b={clipRect:{configurable:!0}};a.prototype.afterUpdate=function(){this.data=e.getSelectionRects(this.textRenderInfo,this.selectionStart,this.selectionEnd);c.prototype.afterUpdate.call(this)};b.clipRect.set=
+function(a){this._clipRect=a&&Array.isArray(a)&&4===a.length?a:r};b.clipRect.get=function(){return this._clipRect};a.prototype.destructor=function(){this._cleanupEvents();c.prototype.destructor.call(this)};Object.defineProperties(a.prototype,b);return a}(l.ListFacade),y="text anchorX anchorY font fontSize letterSpacing lineHeight maxWidth overflowWrap textAlign textIndent whiteSpace material color colorRanges fillOpacity outlineOpacity outlineColor outlineWidth outlineOffsetX outlineOffsetY outlineBlur strokeColor strokeWidth strokeOpacity curveRadius depthOffset clipRect orientation glyphGeometryDetail sdfGlyphSize debugSDF".split(" "),
+z=function(b){function a(a){var c=this,f=new e.Text;f.geometry.boundingSphere.version=0;b.call(this,a,f);this.selectable=!1;this.selectionStart=this.selectionEnd=-1;this.onSyncComplete=this.onSyncStart=null;f.addEventListener("syncstart",function(a){c.notifyWorld("text3DSyncStart");if(c.onSyncStart)c.onSyncStart()});f.addEventListener("synccomplete",function(a){if(!c.isDestroying&&(f.geometry.boundingSphere.version++,c.afterUpdate(),c.notifyWorld("text3DSyncComplete"),c.requestRender(),c.onSyncComplete))c.onSyncComplete()})}
+b&&(a.__proto__=b);a.prototype=Object.create(b&&b.prototype);a.prototype.constructor=a;var c={textRenderInfo:{configurable:!0}};c.textRenderInfo.get=function(){return this.threeObject.textRenderInfo};a.prototype.afterUpdate=function(){var a=this,c=this.threeObject;y.forEach(function(b){c[b]=a[b]});c.sync();b.prototype.afterUpdate.call(this);this.text!==this._prevText&&(this.selectionStart=this.selectionEnd=-1,this._prevText=this.text);this._updateSelection()};a.prototype._updateSelection=function(){var a=
+this,b=this.selectable,c=this.selectionStart,e=this.selectionEnd,d=this._selectionFacade;b!==this._selectable&&((this._selectable=b)?d=this._selectionFacade=new x(this,function(b,c){a.selectionStart=b;a.selectionEnd=c;a._updateSelection();a.requestRender()}):(d&&(d.destructor(),d=this._selectionFacade=null),this.selectionStart=this.selectionEnd=-1));d&&(d.textRenderInfo=this.threeObject.textRenderInfo,d.selectionStart=c,d.selectionEnd=e,d.curveRadius=this.curveRadius||0,d.clipRect=this.clipRect,d.renderOrder=
+this.renderOrder,d.afterUpdate())};a.prototype.destructor=function(){this.threeObject.dispose();this._selectionFacade&&this._selectionFacade.destructor();b.prototype.destructor.call(this)};Object.defineProperties(a.prototype,c);return a}(l.Object3DFacade);Object.defineProperty(b,"GlyphsGeometry",{enumerable:!0,get:function(){return e.GlyphsGeometry}});Object.defineProperty(b,"TextMesh",{enumerable:!0,get:function(){return e.Text}});Object.defineProperty(b,"configureTextBuilder",{enumerable:!0,get:function(){return e.configureTextBuilder}});
+Object.defineProperty(b,"dumpSDFTextures",{enumerable:!0,get:function(){return e.dumpSDFTextures}});Object.defineProperty(b,"fontProcessorWorkerModule",{enumerable:!0,get:function(){return e.fontProcessorWorkerModule}});Object.defineProperty(b,"getCaretAtPoint",{enumerable:!0,get:function(){return e.getCaretAtPoint}});Object.defineProperty(b,"getSelectionRects",{enumerable:!0,get:function(){return e.getSelectionRects}});Object.defineProperty(b,"preloadFont",{enumerable:!0,get:function(){return e.preloadFont}});
+b.Text3DFacade=z;Object.defineProperty(b,"__esModule",{value:!0})})

package.json

 {
   "name": "troika-3d-text",
-  "version": "0.38.1",
+  "version": "0.39.0",
   "description": "SDF text for the Troika 3D scene management framework",
@@ -17,7 +17,7 @@ "author": "Jason Johnston <[e-mail]>",
   "dependencies": {
-    "troika-3d": "^0.38.1",
-    "troika-three-text": "^0.38.1",
-    "troika-three-utils": "^0.38.1"
+    "troika-3d": "^0.39.0",
+    "troika-three-text": "^0.39.0",
+    "troika-three-utils": "^0.39.0"
   },
-  "gitHead": "b54fd6f27b4d95190747ff94cf4e101239447fea"
+  "gitHead": "8c276e7cf6580ebd57d3fee8b2575dac27667491"
 }

src/facade/SelectionManagerFacade.js

@@ -24,2 +24,3 @@ import { ListFacade } from 'troika-3d'
     this.clipRect = noClip
+    this.curveRadius = 0
 
@@ -33,5 +34,5 @@ this.template = {
       left: d => clamp(d.left, this.clipRect[0], this.clipRect[2]),
-      z: d => (d.top - d.bottom) * THICKNESS / 2,
-      scaleZ: d => (d.top - d.bottom) * THICKNESS,
+      depth: d => (d.top - d.bottom) * THICKNESS,
       color: d => this.rangeColor,
+      curveRadius: d => this.curveRadius,
       visible: d => {
@@ -38,0 +39,0 @@ let r = this.clipRect

src/facade/SelectionRangeRect.js

@@ -1,2 +0,2 @@
-import { BoxBufferGeometry, Color, Mesh, MeshBasicMaterial, Vector4 } from 'three'
+import { BoxBufferGeometry, Color, Mesh, MeshBasicMaterial, Vector2, Vector4 } from 'three'
 import {Instanceable3DFacade, createDerivedMaterial} from 'troika-3d'
@@ -6,3 +6,3 @@
 
-function getMesh() {
+function getMeshes() {
   let material = createDerivedMaterial(
@@ -16,17 +16,35 @@ new MeshBasicMaterial({
       uniforms: {
-        rect: {value: new Vector4()}
+        rect: {value: new Vector4()},
+        depthAndCurveRadius: {value: new Vector2()}
       },
-      vertexDefs: `uniform vec4 rect;`,
+      vertexDefs: `
+uniform vec4 rect;
+uniform vec2 depthAndCurveRadius;
+`,
       vertexTransform: `
-  position.x = position.x < 0.0 ? rect.x : rect.z;
-  position.y = position.y < 0.0 ? rect.w : rect.y;
-  `
+float depth = depthAndCurveRadius.x;
+float rad = depthAndCurveRadius.y;
+position.x = mix(rect.x, rect.z, position.x);
+position.y = mix(rect.w, rect.y, position.y);
+position.z = mix(-depth * 0.5, depth * 0.5, position.z);
+if (rad != 0.0) {
+  float angle = position.x / rad;
+  position.xz = vec2(sin(angle) * (rad - position.z), rad - cos(angle) * (rad - position.z));
+  // TODO fix normals: normal.xz = vec2(sin(angle), cos(angle));
+}
+`
     }
   )
-  material.instanceUniforms = ['rect', 'diffuse']
-  const mesh = new Mesh(
-    new BoxBufferGeometry().translate(0, 0, -0.5), //origin on front face for distance sorting
-    material
-  )
-  return (getMesh = () => mesh)()
+  material.instanceUniforms = ['rect', 'depthAndCurveRadius', 'diffuse']
+  const meshes = {
+    normal: new Mesh(
+      new BoxBufferGeometry(1, 1, 1).translate(0.5, 0.5, 0.5),
+      material
+    ),
+    curved: new Mesh(
+      new BoxBufferGeometry(1, 1, 1, 32).translate(0.5, 0.5, 0.5),
+      material
+    )
+  }
+  return (getMeshes = () => meshes)()
 }
@@ -40,3 +58,4 @@
     super(parent)
-    this.instancedThreeObject = getMesh()
+    this.depth = 0
+    this.curveRadius = 0
     this._color = new Color()
@@ -47,3 +66,5 @@ this._rect = new Vector4()
   afterUpdate() {
-    const {top, right, bottom, left, color} = this
+    const {top, right, bottom, left, color, depth, curveRadius} = this
+    this.instancedThreeObject = getMeshes()[curveRadius ? 'curved' : 'normal']
+
     if (!this._color.equals(color)) {
@@ -56,2 +77,5 @@ this.setInstanceUniform('diffuse', this._color = new Color(color))
     }
+    if (!depth !== this._depth || curveRadius !== this._curveRadius) {
+      this.setInstanceUniform('depthAndCurveRadius', new Vector2(this._depth = depth, this._curveRadius = curveRadius))
+    }
     super.afterUpdate()
@@ -58,0 +82,0 @@ }

src/facade/Text3DFacade.js

@@ -32,2 +32,3 @@ import { Object3DFacade } from 'troika-3d'
   'strokeOpacity',
+  'curveRadius',
   'depthOffset',
@@ -74,3 +75,3 @@ 'clipRect',
         this.notifyWorld('text3DSyncComplete')
-        this.notifyWorld('needsRender')
+        this.requestRender()
         if (this.onSyncComplete) {
@@ -116,3 +117,3 @@ this.onSyncComplete()
           this._updateSelection()
-          this.notifyWorld('needsRender')
+          this.requestRender()
         })
@@ -131,2 +132,3 @@ } else {
       selFacade.selectionEnd = selectionEnd
+      selFacade.curveRadius = this.curveRadius || 0
       selFacade.clipRect = this.clipRect
@@ -133,0 +135,0 @@ selFacade.renderOrder = this.renderOrder

src/index.js

@@ -6,2 +6,3 @@ // Proxy exports from troika-three-text for convenience:
   preloadFont,
+  dumpSDFTextures,
   Text as TextMesh,
@@ -8,0 +9,0 @@ GlyphsGeometry,

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

59835

increased by8.49%

Lines of code

1054

increased by8.77%

Dependency changes

• + Addedtroika-3d@0.39.0(transitive)

• + Addedtroika-animation@0.39.0(transitive)

• + Addedtroika-core@0.39.0(transitive)

• + Addedtroika-three-text@0.39.2(transitive)

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

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

• - Removedtroika-3d@0.38.1(transitive)

• - Removedtroika-animation@0.38.0(transitive)

• - Removedtroika-core@0.38.0(transitive)

• - Removedtroika-three-text@0.38.1(transitive)

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

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

• Updatedtroika-3d@^0.39.0

• Updatedtroika-three-text@^0.39.0

• Updatedtroika-three-utils@^0.39.0