125 lines
3.0 KiB
JavaScript
125 lines
3.0 KiB
JavaScript
|
|
|
|
import React, { useReducer } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
import { MdEdit, MdVisibilityOff, MdVisibility, MdDelete } from 'react-icons/md'
|
|
|
|
import { FaCube, FaEdit } from 'react-icons/fa'
|
|
|
|
export const Tree = () => {
|
|
const treeEntries = useSelector(state => state.treeEntries)
|
|
|
|
return <div className='sideNav flex flex-col bg-gray-800'>
|
|
{treeEntries.allIds.map((entId, idx) => (
|
|
<TreeEntry key={idx} entId={entId} />
|
|
))}
|
|
</div>
|
|
|
|
}
|
|
|
|
|
|
const treeIcons = {
|
|
'mesh': FaCube,
|
|
'sketch': FaEdit
|
|
}
|
|
|
|
|
|
const TreeEntry = ({ entId }) => {
|
|
|
|
const treeEntries = useSelector(state => state.treeEntries.byId)
|
|
const dispatch = useDispatch()
|
|
|
|
const activeSketchId = useSelector(state => state.activeSketchId)
|
|
|
|
let obj3d, entry;
|
|
|
|
entry = treeEntries[entId]
|
|
|
|
if (treeEntries[entId].obj3d) {
|
|
obj3d = treeEntries[entId].obj3d
|
|
} else {
|
|
obj3d = treeEntries[entId]
|
|
}
|
|
console.log(obj3d.userData.type)
|
|
let Icon = treeIcons[obj3d.userData.type]
|
|
|
|
const [_, forceUpdate] = useReducer(x => x + 1, 0);
|
|
|
|
// const vis = obj3d.visible
|
|
const vis = obj3d.layers.mask & 1
|
|
|
|
return <div className='btn select-none flex justify-start w-full h-7 items-center text-sm'
|
|
|
|
onDoubleClick={() => {
|
|
activeSketchId && treeEntries[activeSketchId].deactivate()
|
|
console.log(entry)
|
|
entry.activate()
|
|
sc.clearSelection()
|
|
sc.activeSketch = entry;
|
|
}}
|
|
>
|
|
<Icon className='h-full w-auto p-1.5' />
|
|
<div className="btn pl-1"
|
|
onPointerEnter={() => {
|
|
if (entId[0] == 'm') {
|
|
// entry.material.color.set(color.hover)
|
|
sc.render()
|
|
}
|
|
}}
|
|
onPointerLeave={() => {
|
|
const obj = entry
|
|
if (entId[0] == 'm' && !sc.selected.includes(obj)) {
|
|
// obj.material.color.set(color.mesh)
|
|
sc.render()
|
|
}
|
|
}}
|
|
onPointerDown={() => {
|
|
if (entId[0] == 'm') {
|
|
sc.selected.push(
|
|
entry
|
|
)
|
|
sc.render()
|
|
}
|
|
}}
|
|
>
|
|
{entId}
|
|
</div>
|
|
<div className='flex h-full ml-auto'>
|
|
|
|
<MdDelete className='btn-green h-full w-auto p-1.5'
|
|
onClick={() => {
|
|
dispatch({ type: 'delete-node', id: entId })
|
|
}}
|
|
/>
|
|
|
|
{
|
|
vis ?
|
|
<MdVisibility className='btn-green h-full w-auto p-1.5'
|
|
onClick={() => {
|
|
obj3d.traverse((e) => e.layers.disableAll())
|
|
sc.render()
|
|
forceUpdate()
|
|
}}
|
|
/>
|
|
:
|
|
<MdVisibilityOff className='btn-green h-full w-auto p-1.5'
|
|
onClick={() => {
|
|
if (obj3d.userData.type == 'sketch') {
|
|
obj3d.traverse((e) => e.layers.enable(0))
|
|
} else {
|
|
obj3d.traverse((e) => {
|
|
e.layers.enable(0)
|
|
e.layers.enable(1)
|
|
})
|
|
|
|
}
|
|
sc.render()
|
|
forceUpdate()
|
|
}}
|
|
/>
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
} |