Add sub nodes

swapkats · Jul 8, 2020 · cb8d7ec · cb8d7ec
1 parent 35fba9f
commit cb8d7ec
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/app/elements/map-scene.ts b/app/elements/map-scene.ts
@@ -34,5 +34,14 @@ class MapScene extends LitElement {
     `;
   }
 
-  render = () => (this.map ? html`<three-text text="${this.map.root}"></three.text>` : html``)
+  renderRootNode = () => html`<three-text text="${this.map.root}" posX="0" posY="0" posZ="0"></three.text>`
+
+  renderSubNodes = () => html`
+    ${this.map.nodes.map((node, index) => html`<three-text text="${node.text}" pos-x="${Math.random() * 200}" pos-y="0" pos-z="0"></three.text>`)}
+  `
+
+  render = () => (this.map ? html`
+    ${this.renderRootNode()}
+    ${this.renderSubNodes()}
+  ` : html``)
 }
diff --git a/app/elements/three-text.ts b/app/elements/three-text.ts
@@ -10,15 +10,21 @@ const font = new Font(fontJson);
 
 @customElement('three-text')
 class ThreeText extends LitElement {
-  // constructor() {
-  //   super();
-
-
-  // }
-
   @property()
   text = '';
 
+  @property({ type: Number, attribute: 'pos-x' })
+  posX = 0;
+
+  @property({ type: Number, attribute: 'pos-y' })
+  posY = 0;
+
+  @property({ type: Number, attribute: 'pos-z' })
+  posZ = 0;
+
+  @property({ type: Number })
+  size = 10;
+
   @property()
   color = '#fff';
 
@@ -31,20 +37,20 @@ class ThreeText extends LitElement {
       side: DoubleSide,
     });
 
-    const shapes = font.generateShapes(this.text, 100);
+    const shapes = font.generateShapes(this.text, this.size);
 
     const geometry = new ShapeBufferGeometry(shapes);
 
-    geometry.computeBoundingBox();
+    // geometry.computeBoundingBox();
 
-    const xMid = -0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);
+    // const xMid = -0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);
 
-    geometry.translate(xMid, 0, 0);
+    geometry.translate(this.posX, this.posY, this.posZ);
 
     // make shape ( N.B. edge view not visible )
 
     const textMesh = new Mesh(geometry, matLite);
-    textMesh.position.z = -150;
+    textMesh.position.z = -100;
 
     sceneContext.useScene().add(textMesh);
   }