clean up axes presentation

dist/app.css

@@ -21,10 +21,6 @@
   align-items: center;
 }
 
-.justify-start {
-  justify-content: flex-start;
-}
-
 .justify-center {
   justify-content: center;
 }
@@ -33,21 +29,12 @@
   justify-content: space-between;
 }
 
-.h-6 {
+.h-full {
-  height: 1.5rem;
+  height: 100%;
 }
 
-.text-lg {
+.p-2 {
-  font-size: 1.125rem;
+  padding: 0.5rem;
-  line-height: 1.75rem;
-}
-
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
-.p-1 {
-  padding: 0.25rem;
 }
 
 * {
@@ -67,8 +54,8 @@
   visibility: visible;
 }
 
-.w-6 {
+.w-auto {
-  width: 1.5rem;
+  width: auto;
 }
 
 .w-full {
@@ -106,14 +93,18 @@
   }
 }
 
-/* html, */
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
 
 body {
   margin: 0;
   height: 100%;
   font-family: sans-serif;
   overflow: hidden;
-  --topNavH: 36px;
+  --topNavH: 48px;
   --sideNavW: 200px;
 }
 
@@ -168,6 +159,27 @@ body {
   color: rgba(4, 120, 87, var(--tw-text-opacity));
 }
 
+.tooltip {
+  position: fixed;
+  display: block;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  padding: 4px;
+  visibility: hidden;
+}
+
+.arrow {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -6px;
+  border: solid 6px transparent;
+  border-bottom-color: black;
+  border-top: none;
+}
+
 @media (min-width: 640px) {
 }
 
@@ -182,4 +194,3 @@ body {
 
 @media (min-width: 1536px) {
 }
-

src/Scene.js

@@ -12,7 +12,7 @@ import { onHover, onPick } from './mouseEvents';
 import { _vec2, _vec3, color, awaitPts } from './shared'
 
 import {AxesHelper} from './axes'
-import { Patch } from './patch'
+
 
 import CSG from "./three-csg.js"
 
@@ -64,12 +64,11 @@ export class Scene {
     helpersGroup.name = "helpersGroup";
     this.obj3d.add(helpersGroup);
 
-    // const axesHelper = new AxesHelper(0.4);
-    // helpersGroup.add(axesHelper);
 
+    this.axes = new AxesHelper(this.camera.zoom)
+    this.axes.visible = false
 
-    const patch = new Patch(0.5);
+    helpersGroup.add(this.axes);
-    helpersGroup.add(patch);
 
 
 
@@ -223,16 +222,18 @@ function render() {
     Object.assign(this.rect, this.canvas.getBoundingClientRect().toJSON())
 
   }
+
+
+  this.axes.resize(this.camera.zoom)
+
   this.renderer.render(this.obj3d, this.camera);
 
-  // const sketch = this.store.
   if (this.activeSketch) {
     dims = this.activeSketch.obj3d.children[1].children
     matrix = this.activeSketch.obj3d.matrix
 
     for (idx = 1; idx < dims.length; idx += 2) {
       ele = dims[idx]
-      // if (!ele.label) continue;
 
       pos = _vec3.set(
         ...ele.geometry.attributes.position.array
@@ -241,10 +242,7 @@ function render() {
       x = (pos.x * .5 + .5) * this.canvas.clientWidth + 10;
       y = (pos.y * -.5 + .5) * this.canvas.clientHeight;
 
-      // console.log(i, ele)
-      // ele.label.style.transform = `translate(-50%, -50%) translate(${x+20}px,${y}px)`;
       ele.label.style.transform = `translate(0%, -50%) translate(${x}px,${y}px)`;
-
     }
   }
 

src/Sketch.js

@@ -49,7 +49,7 @@ class Sketch {
       this.constraints = new Map()
       this.c_id = 1;
 
-      this.obj3d.add(new THREE.Group().add(new AxesHelper(1)));
+      this.obj3d.add(new THREE.Group());
       this.obj3d.add(new THREE.Group());
       this.obj3d.add(new THREE.Group());
 
@@ -150,9 +150,11 @@ class Sketch {
     this.canvas.addEventListener('pointermove', this.onHover)
     this.store.dispatch({ type: 'set-active-sketch', sketch: this.obj3d.name })
 
-
     this.setDimLines()
 
+    this.scene.axes.matrix = this.obj3d.matrix
+    this.scene.axes.visible = true
+
     window.sketcher = this
   }
 

src/axes.js

@@ -1,36 +1,47 @@
-// import { LineSegments } from '../objects/LineSegments.js';
-// import { LineBasicMaterial } from '../materials/LineBasicMaterial.js';
-// import { Float32BufferAttribute } from '../core/BufferAttribute.js';
-// import { BufferGeometry } from '../core/BufferGeometry.js';
 
-import {LineSegments, LineBasicMaterial, Float32BufferAttribute, BufferGeometry} from 'three/src/Three'
 
-class AxesHelper extends LineSegments {
+import * as THREE from "../node_modules/three/src/Three"
 
-	constructor( size = 1 ) {
 
-		const vertices = [
+class AxesHelper extends THREE.Object3D {
-			0, 0, 0,	size, 0, 0,
-			0, 0, 0,	0, size, 0,
-			0, 0, 0,	0, 0, size
-		];
 
-		const colors = [
+  constructor(initialZoom = 1) {
-			1, 0, 0,	1, 0.6, 0,
+    super()
-			0, 1, 0,	0.6, 1, 0,
+    this.matrixAutoUpdate = false
-			0, 0, 1,	0, 0.6, 1
+    this.initialZoom = initialZoom
-		];
+    this.length = [0.55, 1]
+    this.headLength = 0.25
+    this.headWidth = 0.12
 
-		const geometry = new BufferGeometry();
+    this.dirs = [
-		geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+      [1, 0, 0],
-		geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+      [0, 1, 0]
+    ]
 
-		const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } );
+    this.add(...this.dirs.map(
+      (dir, i) => new THREE.ArrowHelper(
+        new THREE.Vector3(...dir), // dir
+        new THREE.Vector3(0, 0, 0), // origin
+        this.length[i], //length
+        0x0000ff,
+        this.headLength,
+        this.headWidth
+      )
+    ))
 
-		super( geometry, material );
+    return this
+  }
 
-		// this.type = 'AxesHelper';
+  resize(zoom) {
+    const scale = this.initialZoom / zoom
 
+    for (let i = 0; i < this.children.length; i++) {
+      this.children[i].setLength(
+        this.length[i] * scale,
+        this.headLength * scale,
+        this.headWidth * scale
+      )
+    }
   }
 
 }

src/patch.js

@@ -3,13 +3,23 @@
 // import { Float32BufferAttribute } from '../core/BufferAttribute.js';
 // import { BufferGeometry } from '../core/BufferGeometry.js';
 
-import { LineSegments, MeshBasicMaterial, Float32BufferAttribute, BufferGeometry, Mesh, DoubleSide } from '../node_modules/three/src/Three'
 
 
 import * as THREE from '../node_modules/three/src/Three';
+import {ArrowHelper} from './ArrowHelper'
+
+
+
+
+
+
+
+
+
 
 class Patch extends THREE.Mesh {
 
+  
   constructor(s = 1) {
 
 
@@ -17,8 +27,12 @@ class Patch extends THREE.Mesh {
 
     const positions = [
       0.5, 0,
-      0.3, 0.08,
+      0.3, 0.06,
-      0.3, -0.08,
+      0.3, 0.01,
+      0.0, 0.01,
+      0.0, -0.01,
+      0.3, -0.01,
+      0.3, -0.06,
     ];
 
     const shape = new THREE.Shape()

src/shared.js

@@ -37,7 +37,7 @@ const hoverColor = {
 
 
 const lineMaterial = new THREE.LineBasicMaterial({
-  linewidth: 2,
+  linewidth: 1,
   color: color.line,
 })
 

src/sketchAxes.js

@@ -5,6 +5,9 @@
 
 import { LineSegments, LineBasicMaterial, Float32BufferAttribute, BufferGeometry } from '../node_modules/three/src/Three'
 
+import {} from '../node_modules/three/examples/jsm/lines/LineGeometry'
+import {} from '../node_modules/three/examples/jsm/lines/LineMaterial'
+
 class AxesHelper extends LineSegments {
 
   constructor(s = 1) {
@@ -20,7 +23,7 @@ class AxesHelper extends LineSegments {
     const geometry = new BufferGeometry();
     geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3));
 
-    const material = new LineBasicMaterial({ color: 0xff0000, toneMapped: false, linewidth:2 });
+    const material = new LineBasicMaterial({ color: 0xff0000, toneMapped: false, linewidth:5 });
 
     super(geometry, material);