back to vanilla

icon/svgr_raw/flip.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16.000001"
+   version="1.1"
+   id="svg2112"
+   inkscape:version="1.0.2 (1.0.2+r75+1)"
+   sodipodi:docname="flip.svg">
+  <defs
+     id="defs2106" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="20.597402"
+     inkscape:cx="4.1301095"
+     inkscape:cy="12.987071"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1514"
+     inkscape:window-height="1199"
+     inkscape:window-x="358"
+     inkscape:window-y="204"
+     inkscape:window-maximized="0"
+     units="px"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-text-baseline="true"
+     inkscape:snap-center="true" />
+  <metadata
+     id="metadata2109">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path839-5"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.58196px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 14.869141 0.1015625 L 4.96875 4.3457031 L 7.0976562 6.4726562 L 0.14648438 13.466797 L 1.5644531 14.875 L 8.5117188 7.8867188 L 10.626953 10.001953 L 14.869141 0.1015625 z " />
+    <path
+       id="path839-5-5"
+       style="fill:#000000;fill-opacity:0.7;stroke:none;stroke-width:1.19317px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 15.281473,8.3873278 11.282494,12.386307 10.321846,11.425658 8.3622506,15.999111 12.935704,14.039516 11.975055,13.078868 15.974034,9.0798883 Z" />
+  </g>
+</svg>

src/Scene.js

@@ -347,7 +347,7 @@ async function addSketch() {
 }
 
 window.sc = new Scene(store)
-sc.loadState()
+// sc.loadState()
 
 // sc.camera.layers.enable(1)
 // rc.layers.set(1)

src/extrude.js

@@ -1,6 +1,7 @@
 import * as THREE from '../node_modules/three/src/Three';
 import { color} from './shared'
-export function extrude(sketch) {
+export function extrude(sketch, depth) {
+  console.log(sketch,'here')
 
   let constraints = sketch.constraints;
   let linkedObjs = sketch.linkedObjs;
@@ -67,7 +68,7 @@ export function extrude(sketch) {
   findPair(children[4]) //??? need fixing
 
   const shape = new THREE.Shape(v2s);
-  const extrudeSettings = { depth: 8, bevelEnabled: false };
+  const extrudeSettings = { depth, bevelEnabled: false };
 
 
   const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
@@ -100,6 +101,7 @@ export function extrude(sketch) {
     sketch.deactivate()
   }
 
+  // this.clearSelection()
   this.render()
 }
 

src/mouseEvents.js

@@ -114,8 +114,8 @@ export function onHover(e) {
 
 let draggedLabel;
 export function onPick(e) {
-  console.log(e)
   if (this.mode || e.buttons != 1) return
+  // if (this.mode || e.buttons != 1 || e.ctrlKey || e.metaKey) return
 
   if (this.hovered.length) {
     let obj = this.hovered[this.hovered.length - 1]

src/react/app.css

@@ -36,6 +36,12 @@ body {
   width: var(--sideNavW);
 }
 
+.dialog {
+  position: absolute;
+  top: var(--topNavH);
+  left: var(--sideNavW);
+}
+
 
 #labels > div {
   position: absolute;

src/react/app.jsx

@@ -1,27 +1,43 @@
 
 import ReactDOM from 'react-dom'
-import React from 'react'
+import React, { useState } from 'react'
 
 import { createStore, applyMiddleware} from 'redux'
 import { Provider } from 'react-redux'
-import { reducer, preloadedState } from './reducer'
+import { reducer } from './reducer'
 import logger from 'redux-logger'
 
 import { Tree } from './tree'
 import { NavBar } from './navBar'
 import { ToolTip} from './toolTip'
+import { Dialog } from './dialog'
 
 import './app.css'
 
-const store = createStore(reducer, preloadedState, applyMiddleware(logger))
+const preloadedState = {
+  treeEntries: {
+    byId: {},
+    allIds: [],
+    tree: {},
+    order: {},
+    visible: {},
+    activeSketchId: ""
+  },
+}
 
-const App = ({ store }) => (
+// const store = createStore(reducer, preloadedState, applyMiddleware(logger))
-  <Provider store={store}>
+const store = createStore(reducer, {}, applyMiddleware(logger))
-    <NavBar />
+
+const App = ({ store }) => {
+  const [dialog, setDialog] = useState()
+
+  return <Provider store={store}>
+    <NavBar setDialog={setDialog}/>
     <Tree />
+    <Dialog dd={dialog}/>
     <ToolTip/>
   </Provider>
-);
+};
 
 document.addEventListener('DOMContentLoaded', () => {
   ReactDOM.render(<App store={store} />, document.getElementById('react'));

src/react/dialog.jsx

@@ -0,0 +1,52 @@
+
+
+import React, { useEffect, useReducer, useRef, useState } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux'
+
+import { MdDone, MdClose } from 'react-icons/md'
+import { GiVerticalFlip } from 'react-icons/gi'
+import * as Icon from "./icons";
+
+
+export const Dialog = ({ dd }) => {
+  if (!dd) return null
+
+  const dispatch = useDispatch()
+  const treeEntriesById = useSelector(state => state.treeEntries.byId)
+  const activeSketchId = useSelector(state => state.treeEntries.activeSketchId)
+
+  const ref = useRef()
+  useEffect(() => {
+    ref.current.focus()
+  }, [])
+
+  const extrude = () => {
+    if (sc.activeSketch) {
+      sc.extrude(sc.activeSketch, ref.current.value)
+    } else if (sc.selected.length === 1 && sc.selected[0].userData.type == 'sketch') {
+      sc.extrude(treeEntriesById[sc.selected[0].name], ref.current.value)
+    } else {
+      console.log('invalid selection')
+    }
+  }
+
+
+  const [_, forceUpdate] = useReducer(x => x + 1, 0);
+
+  return <div className='dialog w-40 h-10 flex items-center bg-gray-700'>
+    <input className='w-1/2' type="number" {...useNumField(1)} step="0.1" ref={ref} />
+    <MdDone
+      onClick={extrude}
+      className="btn w-auto h-full p-2" />
+    <MdClose className="btn w-auto h-full p-2" />
+    <Icon.Flip className="btn w-auto h-full p-2" />
+  </div>
+}
+
+
+export const useNumField = (initValue = 0) => {
+  const [value, setValue] = useState(initValue);
+  const onChange = e => setValue(e.target.value);
+  return { value, onChange };
+}

src/react/icons.jsx

@@ -250,6 +250,24 @@ function Extrude_master(props) {
   );
 }
 
+function Flip(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 16"
+      {...props}
+    >
+      <path d="M14.87.102L4.968 4.346l2.129 2.127-6.952 6.994 1.418 1.408 6.948-6.988 2.115 2.115 4.242-9.9z" />
+      <path
+        d="M15.281 8.387l-3.999 4-.96-.961-1.96 4.573 4.574-1.96-.96-.96 3.998-4z"
+        fillOpacity={0.7}
+      />
+    </svg>
+  );
+}
+
 function Horizontal(props) {
   return (
     <svg
@@ -584,4 +602,4 @@ function Vertical(props) {
     </svg>
   );
 }
-export { Arc, Coincident, Dimension, Extrude, Extrude_master, Horizontal, Intersect, Intersect_thin, Line, Stl, Subtract, Tangent, Union, Union_thin, Vertical };
+export { Arc, Coincident, Dimension, Extrude, Extrude_master, Flip, Horizontal, Intersect, Intersect_thin, Line, Stl, Subtract, Tangent, Union, Union_thin, Vertical };

src/react/navBar.jsx

@@ -10,7 +10,7 @@ import { MdDone, MdSave, MdFolder } from 'react-icons/md'
 import * as Icon from "./icons";
 
 
-export const NavBar = () => {
+export const NavBar = ({setDialog}) => {
   const dispatch = useDispatch()
   const treeEntriesById = useSelector(state => state.treeEntries.byId)
   const activeSketchId = useSelector(state => state.treeEntries.activeSketchId)
@@ -25,13 +25,19 @@ export const NavBar = () => {
     forceUpdate()
   }
   const extrude = () => {
-    // sc.extrude(treeEntriesById[activeSketchId])
+    setDialog('dd')
-    sc.extrude(sc.activeSketch)
+    // if (sc.activeSketch) {
+    //   sc.extrude(sc.activeSketch)
+    // } else if (sc.selected.length === 1 && sc.selected[0].userData.type == 'sketch') {
+    //   sc.extrude(treeEntriesById[sc.selected[0].name])
+    // } else {
+    //   console.log('invalid selection')
+    // }
   }
 
   const addSketch = () => {
     sc.addSketch()
-    console.log(!!sc.activeSketch,'state')
+    console.log(!!sc.activeSketch, 'state')
     forceUpdate()
   }
 
@@ -46,9 +52,9 @@ export const NavBar = () => {
     }
   }, [activeSketchId])
 
-  useEffect(() => {
+  // useEffect(() => {
-    console.log(treeEntriesById)
+  //   console.log(treeEntriesById)
-  }, [treeEntriesById])
+  // }, [treeEntriesById])
 
 
   const btnz = [
@@ -87,7 +93,7 @@ export const NavBar = () => {
 
   return <div className='topNav flex justify-center items-center bg-gray-700'>
     {
-      activeSketchId?
+      activeSketchId ?
         btnz.map(([Icon, fcn, txt, shortcut], idx) => (
           <Icon className="btn w-auto h-full p-3.5" tooltip={txt}
             onClick={fcn} key={idx}

src/react/reducer.js

@@ -2,58 +2,47 @@
 
 import { DepTree } from './depTree.mjs'
 import update from 'immutability-helper'
+import { combineReducers } from 'redux';
 
-
+const defaultState = {
-export const preloadedState = {
-  treeEntries: {
   byId: {},
   allIds: [],
   tree: {},
   order: {},
   visible: {},
   activeSketchId: ""
-  },
 }
 
-export function reducer(state = {}, action) {
+export function treeEntries(state = defaultState, action) {
   switch (action.type) {
     case 'rx-sketch':
       return update(state, {
-        treeEntries: {
         byId: { [action.obj.obj3d.name]: { $set: action.obj } },
         allIds: { $push: [action.obj.obj3d.name] },
         tree: { [action.obj.obj3d.name]: { $set: {} } },
-          order: { [action.obj.obj3d.name]: { $set: state.treeEntries.allIds.length } },
+        order: { [action.obj.obj3d.name]: { $set: state.allIds.length } },
         visible: { [action.obj.obj3d.name]: { $set: true } },
-        },
       })
 
     case 'set-entry-visibility': {
       return update(state, {
-        treeEntries: {
         visible: { $merge: action.obj },
-        },
       })
     }
 
     case 'set-active-sketch':
       return update(state, {
-        treeEntries: {
         visible: { [action.activeSketchId]: { $set: true } },
         activeSketchId: { $set: action.activeSketchId },
-        },
       })
     case 'exit-sketch':
       return update(state, {
-        treeEntries: {
         activeSketchId: { $set: "" },
-          visible: { [state.treeEntries.activeSketchId]: { $set: false } },
+        visible: { [state.activeSketchId]: { $set: false } },
-        },
       })
     case 'rx-extrusion':
 
       return update(state, {
-        treeEntries: {
         byId: {
           [action.mesh.name]: { $set: action.mesh }
         },
@@ -62,16 +51,14 @@ export function reducer(state = {}, action) {
           [action.sketchId]: { [action.mesh.name]: { $set: true } },
           [action.mesh.name]: { $set: {} }
         },
-          order: { [action.mesh.name]: { $set: state.treeEntries.allIds.length } },
+        order: { [action.mesh.name]: { $set: state.allIds.length } },
         visible: {
           [action.mesh.name]: { $set: true }
         }
-        }
       })
     case 'rx-boolean':
 
       return update(state, {
-        treeEntries: {
         byId: {
           [action.mesh.name]: { $set: action.mesh }
         },
@@ -81,21 +68,12 @@ export function reducer(state = {}, action) {
           [action.deps[1]]: { [action.mesh.name]: { $set: true } },
           [action.mesh.name]: { $set: {} }
         },
-          order: { [action.mesh.name]: { $set: state.treeEntries.allIds.length } }
+        order: { [action.mesh.name]: { $set: state.allIds.length } }
-        }
       })
     case 'delete-node':
-
+      const depTree = new DepTree(state)
-      const depTree = new DepTree(state.treeEntries)
-
       const obj = depTree.deleteNode(action.id)
-
+      return update(state, { $merge: obj })
-
-      return update(state, {
-        treeEntries: { $merge: obj }
-      })
-
-
 
     case 'restore-state':
       return action.state
@@ -106,3 +84,7 @@ export function reducer(state = {}, action) {
 
 
 
+
+export const reducer = combineReducers({
+  treeEntries
+})