From ebc008830522fc5ee9ba5feeeabb8d1b5ac9b135 Mon Sep 17 00:00:00 2001 From: howard Date: Fri, 16 Apr 2021 22:58:54 -0700 Subject: [PATCH] working cancel sketch --- src/Scene.js | 14 +++++++++- src/Sketch.js | 2 +- src/react/app.css | 2 +- src/react/{depTree.mjs => depTree.js} | 0 src/react/dialog.jsx | 23 +++++++++------ src/react/navBar.jsx | 40 +++++++++++++++------------ src/react/reducer.js | 27 ++++++++++++++++-- src/react/tree.jsx | 4 +-- 8 files changed, 77 insertions(+), 35 deletions(-) rename src/react/{depTree.mjs => depTree.js} (100%) diff --git a/src/Scene.js b/src/Scene.js index 4f2546a..ca3c043 100644 --- a/src/Scene.js +++ b/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] diff --git a/src/Sketch.js b/src/Sketch.js index 89b0d70..6d03b8f 100644 --- a/src/Sketch.js +++ b/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)) diff --git a/src/react/app.css b/src/react/app.css index 9b68c36..ee2f663 100644 --- a/src/react/app.css +++ b/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; diff --git a/src/react/depTree.mjs b/src/react/depTree.js similarity index 100% rename from src/react/depTree.mjs rename to src/react/depTree.js diff --git a/src/react/dialog.jsx b/src/react/dialog.jsx index 7d33999..c13c1ee 100644 --- a/src/react/dialog.jsx +++ b/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 <> - - + ref.current.value *= -1} /> - dispatch({ type: "clear-dialog" })} /> case 'sketch': return <> { // dispatch({ type: 'update-descendents', sketch}) sc.activeSketch.deactivate() sc.render() - forceUpdate() + dispatch({ type: "clear-dialog" }) }} /> - dispatch({ type: "clear-dialog" })} + { + dispatch({ type: "cancel-sketch" }) + sc.activeSketch.deactivate() + dispatch({ type: "clear-dialog" }) + } + } /> default: diff --git a/src/react/navBar.jsx b/src/react/navBar.jsx index 1625d83..d68eb39 100644 --- a/src/react/navBar.jsx +++ b/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,24 +87,26 @@ export const NavBar = () => { return
-
+
- { - activeSketchId ? - sketchModeButtons.map(([Icon, fcn, txt, shortcut], idx) => ( - - )) - : - partModeButtons.map(([Icon, fcn, txt, shortcut], idx) => ( - - )) - } -
+
+ { + activeSketchId ? + sketchModeButtons.map(([Icon, fcn, txt, shortcut], idx) => ( + + )) + : + partModeButtons.map(([Icon, fcn, txt, shortcut], idx) => ( + + )) + } +
+
diff --git a/src/react/reducer.js b/src/react/reducer.js index cc95fb8..7c914d3 100644 --- a/src/react/reducer.js +++ b/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': diff --git a/src/react/tree.jsx b/src/react/tree.jsx index cea99fa..2e849e3 100644 --- a/src/react/tree.jsx +++ b/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' })