working cancel sketch

src/Scene.js

@@ -188,7 +188,7 @@ export class Scene {
       if (k[0] == 's') {
         entries[k].obj3d = loader.parse(entries[k].obj3d)
         this.obj3d.add(entries[k].obj3d)
-        entries[k] = new Sketch(this, state.byId[k])
+        entries[k] = new Sketch(this, entries[k])
         entries[k].obj3d.addEventListener('change', this.render) // !! took 3 hours to realize
 
       } else if (k[0] == 'e') {
@@ -213,6 +213,18 @@ export class Scene {
     return state
   }
 
+  loadSketch(string) {
+    let entry = JSON.parse(string)
+    entry.obj3d = loader.parse(entry.obj3d)
+
+    this.obj3d.add(entry.obj3d)
+
+    entry = new Sketch(this, entry)
+    entry.obj3d.addEventListener('change', this.render)
+    
+    return entry
+  }
+
   clearSelection() {
     for (let x = 0, obj; x < this.selected.length; x++) {
       obj = this.selected[x]

src/Sketch.js

@@ -174,7 +174,7 @@ class Sketch {
     window.removeEventListener('keydown', this.onKeyPress)
     this.canvas.removeEventListener('pointerdown', this.onPick)
     this.canvas.removeEventListener('pointermove', this.onHover)
-    this.store.dispatch({ type: 'exit-sketch' })
+    this.store.dispatch({ type: 'finish-sketch' })
     this.labelContainer.innerHTML = ""
     this.obj3d.visible = false
     this.obj3d.traverse(e => e.layers.disable(2))

src/react/app.css

@@ -99,7 +99,7 @@ input::-webkit-inner-spin-button {
 /* Firefox */
 input[type=number] {
   -moz-appearance: textfield;
-  border:none;
+  /* border:none; */
   background-color:transparent;
   outline: none;
   text-align:right;

src/react/dialog.jsx

@@ -26,7 +26,6 @@ export const Dialog = () => {
     sc.render()
 
     dispatch({ type: "clear-dialog" })
-    forceUpdate()
 
   }
 
@@ -35,31 +34,37 @@ export const Dialog = () => {
   switch (dialog.action) {
     case 'extrude':
       return <>
-        <input className='w-1/2' type="number" defaultValue="1" step="0.1" ref={ref} />
+        <input className='w-16 border-t-0 border-l-0 border-r-0 border-b border-gray-50 text-gray-50 mr-6' type="number" defaultValue="1" step="0.1" ref={ref} />
-        <Icon.Flip className="btn w-auto h-full p-2"
+        <Icon.Flip className="btn w-auto h-full p-3.5"
           onClick={() => ref.current.value *= -1}
         />
         <MdDone
-          className="btn w-auto h-full p-2"
+          className="btn w-auto h-full p-3.5"
           onClick={extrude}
         />
-        <MdClose className="btn w-auto h-full p-2"
+        <MdClose className="btn w-auto h-full p-3.5 mr-6"
           onClick={() => dispatch({ type: "clear-dialog" })}
         />
       </>
     case 'sketch':
       return <>
         <MdDone
-          className="btn w-auto h-full p-2"
+          // className="btn w-auto h-full p-3.5 mr-6"
+          className="btn w-auto h-full p-3.5"
           onClick={() => {
             // dispatch({ type: 'update-descendents', sketch})
             sc.activeSketch.deactivate()
             sc.render()
-            forceUpdate()
+            dispatch({ type: "clear-dialog" })
           }}
         />
-        <MdClose className="btn w-auto h-full p-2"
+        <MdClose className="btn w-auto h-full p-3.5 mr-6"
-          onClick={() => dispatch({ type: "clear-dialog" })}
+          onClick={() => {
+            dispatch({ type: "cancel-sketch" })
+            sc.activeSketch.deactivate()
+            dispatch({ type: "clear-dialog" })
+          }
+          }
         />
       </>
     default:

src/react/navBar.jsx

@@ -5,7 +5,9 @@ import React, { useEffect, useReducer } from 'react';
 import { useDispatch, useSelector } from 'react-redux'
 
 import { FaEdit } from 'react-icons/fa'
-import { MdDone, MdSave, MdFolder } from 'react-icons/md'
+import { MdSave, MdFolder } from 'react-icons/md'
+import { FaFolderOpen } from 'react-icons/fa'
+
 import * as Icon from "./icons";
 import { Dialog } from './dialog'
 
@@ -77,7 +79,7 @@ export const NavBar = () => {
     [Icon.Subtract, () => boolOp('s'), 'Subtract'],
     [Icon.Intersect, () => boolOp('i'), 'Intersect'],
     [MdSave, () => boolOp('i'), 'Save [ctrl+s]'],
-    [MdFolder, () => boolOp('i'), 'Load'],
+    [FaFolderOpen, () => boolOp('i'), 'Load'],
     [Icon.Stl, () => boolOp('i'), 'Export STL'],
   ]
 
@@ -85,9 +87,10 @@ export const NavBar = () => {
 
   return <div className='topNav flex justify-center items-center bg-gray-700'>
 
-    <div className='w-40 h-full flex items-center mr-12'>
+    <div className='w-auto h-full flex-1 flex items-center justify-end'>
       <Dialog />
     </div>
+    <div className='w-auto h-full flex-none'>
       {
         activeSketchId ?
           sketchModeButtons.map(([Icon, fcn, txt, shortcut], idx) => (
@@ -102,7 +105,8 @@ export const NavBar = () => {
             />
           ))
       }
-    <div className='w-40 h-full flex items-center'>
+    </div>
+    <div className='w-auto h-full flex-1 items-center'>
     </div>
 
   </div>

src/react/reducer.js

@@ -1,6 +1,6 @@
 
 
-import { DepTree } from './depTree.mjs'
+import { DepTree } from './depTree'
 import update from 'immutability-helper'
 import { combineReducers } from 'redux';
 
@@ -13,6 +13,7 @@ const defaultState = {
   activeSketchId: ""
 }
 
+
 export function treeEntries(state = defaultState, action) {
   switch (action.type) {
     case 'rx-sketch':
@@ -31,15 +32,35 @@ export function treeEntries(state = defaultState, action) {
     }
 
     case 'set-active-sketch':
+      window.cache = JSON.stringify(state.byId[action.activeSketchId])
       return update(state, {
         visible: { [action.activeSketchId]: { $set: true } },
         activeSketchId: { $set: action.activeSketchId },
       })
-    case 'exit-sketch':
+    case 'finish-sketch':
       return update(state, {
         activeSketchId: { $set: "" },
         visible: { [state.activeSketchId]: { $set: false } },
       })
+    case 'cancel-sketch':
+
+      const sketch = sc.loadSketch(cache)
+      console.log(cache, sketch)
+
+      const deletedObj = sc.obj3d.children.splice(state.order[state.activeSketchId] + 1, 1,
+        sketch.obj3d
+      )[0]
+
+      deletedObj.traverse((obj) => {
+        if (obj.geometry) obj.geometry.dispose()
+        if (obj.material) obj.material.dispose()
+      })
+
+      return update(state, {
+        activeSketchId: { $set: "" },
+        byId: { [state.activeSketchId]: { $set: sketch } },
+        visible: { [state.activeSketchId]: { $set: false } },
+      })
     case 'rx-extrusion':
 
       return update(state, {
@@ -82,7 +103,7 @@ export function treeEntries(state = defaultState, action) {
   }
 }
 
-export function ui(state = {dialog:{}}, action) {
+export function ui(state = { dialog: {} }, action) {
   switch (action.type) {
 
     case 'set-dialog':

src/react/tree.jsx

@@ -6,8 +6,6 @@ import { MdVisibilityOff, MdVisibility, MdDelete, MdRefresh } from 'react-icons/
 
 import { FaCube, FaEdit } from 'react-icons/fa'
 
-import { DepTree } from './depTree.mjs'
-
 export const Tree = () => {
   const treeEntries = useSelector(state => state.treeEntries)
 
@@ -53,7 +51,9 @@ const TreeEntry = ({ entId }) => {
     onDoubleClick={() => {
       if (obj3d.userData.type == 'sketch') {
         sc.activeSketch && sc.activeSketch.deactivate()
+
         sketch.activate()
+        
         sc.clearSelection()
         sc.activeSketch = sketch;
         dispatch({ type: 'set-dialog', action: 'sketch' })