fix css layout

src/Renderer.js

@@ -23,7 +23,8 @@ export function Renderer(store) {
   this.raycaster = new THREE.Raycaster();
 
   window.scene = this.scene;
-  this.scene.background = new THREE.Color(0xb0b0b0);
+  this.scene.background = new THREE.Color(0x888888);
+  // this.scene.background = new THREE.Color(0xffffff);
 
   const helpersGroup = new THREE.Group();
   helpersGroup.name= "helpersGroup"
@@ -169,20 +170,11 @@ async function addSketch() {
 
   // window.sketcher = sketcher
 
+  this.render()
   this.store.dispatch({ type: 'rx-new-sketch', idx: this.scene.children.length - 1 })
 
 }
 
-async function down2() {
-  const result = []
-  for (let i = 0; i < 3; i++) {
-    const pt = await new Promise((res, rej) => {
-      this.canvas.addEventListener('pointermove', (e) => res(getPoint(e, this.camera)), { once: true })
-    })
-    result.push(pt)
-  }
-}
-
 
 
 function getPoint(e, camera) {

src/app.jsx

@@ -17,9 +17,12 @@ const App = () => {
   const sketches = useSelector(state => state.sketches)
 
   return <>
-    <button onClick={() => dispatch({ type: 'toggle', payload: true })}> true</button>
-    <button onClick={() => dispatch({ type: 'toggle', payload: false })}> false </button>
-    <button onClick={renderInst.addSketch}> addsketch </button>
+
+    <div className='buttons-group'>
+      <button onClick={() => dispatch({ type: 'toggle', payload: true })}> true</button>
+      <button onClick={() => dispatch({ type: 'toggle', payload: false })}> false </button>
+      <button onClick={renderInst.addSketch}> addsketch </button>
+    </div>
 
     <div className='feature-tree'>
       {sketches.map((e, idx) => (

src/app.scss

@@ -1,10 +1,21 @@
 
 #react {
-  position: absolute;
+  // position: absolute;
+  // right:0;
+  // bottom:0;
 }
 
+.buttons-group {
+  position: absolute;
+  left:0;
+  display: flex;
+  flex-direction: column;
+}
+
+
 .feature-tree {
   color: red;
   position: absolute;
   right:0;
-}
+  // bottom:0;
+}

src/sketcher/pickEvents.js

@@ -12,9 +12,8 @@ export function onHover(e) {
   );
 
   const hoverPts = this.raycaster.intersectObjects(this.children)
-  
+
   let idx = []
-  console.log(hoverPts)
   if (hoverPts.length) {
     let minDist = Infinity;
     for (let i = 0; i < hoverPts.length; i++) {
@@ -30,6 +29,7 @@ export function onHover(e) {
   }
 
   if (idx.length) {
+    console.log(idx)
     if (hoverPts[idx[0]].object != this.hovered[0]) {
 
       for (let x = 0; x < this.hovered.length; x++) {