three.cad/src/react/navBar.jsx

203 lines
6.1 KiB
React
Raw Normal View History

2021-04-07 12:21:09 +08:00
2021-04-08 06:50:53 +08:00
import React, { useEffect, useReducer } from 'react';
2021-04-07 12:21:09 +08:00
import { useDispatch, useSelector } from 'react-redux'
2021-04-19 15:30:29 +08:00
import { FaEdit, FaLinkedin, FaGithub } from 'react-icons/fa'
2021-04-19 11:53:02 +08:00
import { MdSave, MdFolder, MdInsertDriveFile } from 'react-icons/md'
2021-04-17 13:58:54 +08:00
2021-04-07 12:21:09 +08:00
import * as Icon from "./icons";
2021-04-17 11:54:01 +08:00
import { Dialog } from './dialog'
2021-04-19 11:53:02 +08:00
import { STLExport, saveFile, openFile, verifyPermission } from './fileHelpers'
2021-04-17 21:32:14 +08:00
2021-04-17 11:54:01 +08:00
export const NavBar = () => {
2021-04-07 12:21:09 +08:00
const dispatch = useDispatch()
2021-04-19 11:53:02 +08:00
const sketchActive = useSelector(state => state.ui.sketchActive)
const treeEntries = useSelector(state => state.treeEntries)
2021-04-19 03:14:01 +08:00
const fileHandle = useSelector(state => state.ui.fileHandle)
2021-04-19 11:53:02 +08:00
const modified = useSelector(state => state.ui.modified)
2021-04-13 09:37:16 +08:00
const boolOp = (code) => {
2021-04-19 15:30:29 +08:00
if (sc.selected.length != 2 || !sc.selected.every(e => e.userData.type == 'mesh')) {
alert('please first select two bodies for boolean operation')
return
}
2021-04-13 09:37:16 +08:00
const [m1, m2] = sc.selected
2021-04-19 11:53:02 +08:00
const mesh = sc.boolOp(m1, m2, code)
sc.obj3d.add(mesh)
dispatch({
type: 'set-entry-visibility', obj: {
[m1.name]: false,
[m2.name]: false,
[mesh.name]: true,
}
})
dispatch({
type: 'rx-boolean', mesh, deps: [m1.name, m2.name]
})
2021-04-13 09:37:16 +08:00
sc.render()
forceUpdate()
}
2021-04-15 06:46:30 +08:00
2021-04-19 15:30:29 +08:00
const addSketch = () => {
const sketch = sc.addSketch()
if (!sketch) {
alert('please select a plane or 3 points to define sketch plane')
return
}
2021-04-19 11:53:02 +08:00
dispatch({ type: 'rx-sketch', obj: sketch })
sketch.activate()
sc.render()
2021-04-17 11:54:01 +08:00
dispatch({ type: 'set-dialog', action: 'sketch' })
2021-04-15 06:46:30 +08:00
forceUpdate()
2021-04-13 09:37:16 +08:00
}
2021-04-19 11:53:02 +08:00
const confirmDiscard = () => !modified ? true : confirm('Discard changes? All changes will be lost.')
2021-04-19 03:14:01 +08:00
2021-04-19 11:53:02 +08:00
useEffect(() => {
const onBeforeUnload = (e) => {
if (modified ||
(sc.activeSketch &&
(
sc.activeSketch.hasChanged
|| sc.activeSketch.idOnActivate != id
|| sc.activeSketch.c_idOnActivate != sc.activeSketch.c_id
)
)
) {
e.preventDefault();
e.returnValue = `There are unsaved changes. Are you sure you want to leave?`;
}
}
window.addEventListener('beforeunload', onBeforeUnload)
return () => window.removeEventListener('beforeunload', onBeforeUnload)
}, [modified])
2021-04-17 18:25:43 +08:00
useEffect(() => { // hacky way to handle mounting and unmounting mouse listeners for feature mode
2021-04-19 11:53:02 +08:00
if (!sketchActive) {
2021-04-17 18:25:43 +08:00
sc.canvas.addEventListener('pointermove', sc.onHover)
sc.canvas.addEventListener('pointerdown', sc.onPick)
return () => {
sc.canvas.removeEventListener('pointermove', sc.onHover)
sc.canvas.removeEventListener('pointerdown', sc.onPick)
}
}
2021-04-19 11:53:02 +08:00
}, [sketchActive])
2021-04-07 12:21:09 +08:00
2021-04-17 11:54:01 +08:00
const sketchModeButtons = [
[Icon.Extrude, () => {
dispatch({ type: 'set-dialog', action: 'extrude', target: sc.activeSketch })
2021-04-17 21:32:14 +08:00
2021-04-17 11:54:01 +08:00
}, 'Extrude [e]'],
2021-04-19 15:30:29 +08:00
[Icon.Dimension, () => sc.activeSketch.command('d'), 'Dimension [D]'],
[Icon.Line, () => sc.activeSketch.command('l'), 'Line [L]'],
[Icon.Arc, () => sc.activeSketch.command('a'), 'Arc [A]'],
[Icon.Coincident, () => sc.activeSketch.command('c'), 'Coincident [C]'],
[Icon.Vertical, () => sc.activeSketch.command('v'), 'Vertical [V]'],
[Icon.Horizontal, () => sc.activeSketch.command('h'), 'Horizontal [H]'],
[Icon.Tangent, () => sc.activeSketch.command('t'), 'Tangent [T]'],
2021-04-19 11:53:02 +08:00
[MdSave,
async () => {
2021-04-19 15:30:29 +08:00
if (await verifyPermission(fileHandle) === false) return
2021-04-19 11:53:02 +08:00
sc.refreshNode(sc.activeSketch.obj3d.name, treeEntries)
sc.activeSketch.clearSelection()
saveFile(fileHandle, JSON.stringify([id, sc.sid, sc.mid, treeEntries]), dispatch)
sc.render()
sc.activeSketch.setClean()
}
, 'Save']
2021-04-14 04:39:33 +08:00
]
2021-04-17 11:54:01 +08:00
const partModeButtons = [
2021-04-19 15:30:29 +08:00
[FaEdit, addSketch, 'Sketch'],
2021-04-17 11:54:01 +08:00
[Icon.Extrude, () => {
2021-04-19 15:30:29 +08:00
if (sc.selected[0] && treeEntries.byId[sc.selected[0].name].userData.type == 'sketch') {
dispatch({ type: 'set-dialog', action: 'extrude', target: treeEntries.byId[sc.selected[0].name] })
} else {
alert('please select a sketch from the left pane extrude')
}
2021-04-19 11:53:02 +08:00
}, 'Extrude'],
2021-04-17 11:54:01 +08:00
2021-04-14 04:39:33 +08:00
[Icon.Union, () => boolOp('u'), 'Union'],
[Icon.Subtract, () => boolOp('s'), 'Subtract'],
[Icon.Intersect, () => boolOp('i'), 'Intersect'],
2021-04-19 06:05:33 +08:00
[MdInsertDriveFile, () => {
2021-04-19 11:53:02 +08:00
if (!confirmDiscard()) return
2021-04-19 06:05:33 +08:00
sc.newPart()
dispatch({ type: 'new-part' })
sc.render()
2021-04-19 11:53:02 +08:00
}, 'New'],
2021-04-19 06:05:33 +08:00
[MdSave,
() => {
2021-04-19 11:53:02 +08:00
saveFile(fileHandle, JSON.stringify([id, sc.sid, sc.mid, treeEntries]), dispatch)
2021-04-19 06:05:33 +08:00
}
2021-04-19 11:53:02 +08:00
, 'Save'],
2021-04-19 06:05:33 +08:00
[MdFolder, () => {
2021-04-19 11:53:02 +08:00
if (!confirmDiscard()) return
2021-04-19 06:05:33 +08:00
openFile(dispatch).then(
2021-04-19 11:53:02 +08:00
sc.render
2021-04-19 06:05:33 +08:00
)
}, 'Open'],
[Icon.Stl, () => {
2021-04-19 15:30:29 +08:00
if (sc.selected[0] && sc.selected[0].userData.type == 'mesh') {
STLExport(fileHandle ? fileHandle.name.replace(/\.[^/.]+$/, "") : 'untitled')
} else {
alert('please first select one body to export')
}
}, 'Export to STL'],
2021-04-07 12:21:09 +08:00
]
const [_, forceUpdate] = useReducer(x => x + 1, 0);
2021-04-11 07:16:08 +08:00
return <div className='topNav flex justify-center items-center bg-gray-700'>
2021-04-17 11:54:01 +08:00
2021-04-17 13:58:54 +08:00
<div className='w-auto h-full flex-1 flex items-center justify-end'>
2021-04-17 11:54:01 +08:00
<Dialog />
</div>
2021-04-17 13:58:54 +08:00
<div className='w-auto h-full flex-none'>
{
2021-04-19 11:53:02 +08:00
sketchActive ?
2021-04-17 13:58:54 +08:00
sketchModeButtons.map(([Icon, fcn, txt, shortcut], idx) => (
<Icon className="btn w-auto h-full p-3.5" tooltip={txt}
onClick={fcn} key={idx}
/>
))
:
partModeButtons.map(([Icon, fcn, txt, shortcut], idx) => (
<Icon className="btn w-auto h-full p-3.5" tooltip={txt}
onClick={fcn} key={idx}
/>
))
}
</div>
2021-04-19 15:30:29 +08:00
<div className='w-auto h-full flex-1 items-center flex justify-end'>
<a href='https://github.com/twpride/threeCAD' className='h-full w=auto'>
<FaGithub className="btn-green w-auto h-full p-3.5"></FaGithub>
</a>
<a href='https://www.linkedin.com/in/howard-hwang-b3000335' className='h-full w=auto'>
<FaLinkedin className="btn-green w-auto h-full p-3.5"></FaLinkedin>
</a>
2021-04-17 11:54:01 +08:00
</div>
2021-04-07 12:21:09 +08:00
</div>
2021-04-19 03:14:01 +08:00
}