ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Franknoirot/pretty buttons (#550)

Browse Source
This commit is contained in:
Frank Noirot
2023-09-16 01:23:11 -04:00
committed by GitHub
parent 31eca3728e
commit f592d8db84
16 changed files with 377 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/Toolbar.tsx
View File

@ -1,4 +1,4 @@
import { useStore, toolTips, Selections } from './useStore'
import { useStore, toolTips, ToolTip } from './useStore'
import { extrudeSketch, sketchOnExtrudedFace } from './lang/modifyAst'
import { getNodePathFromSourceRange } from './lang/queryAst'
import { HorzVert } from './components/Toolbar/HorzVert'
@ -17,6 +17,30 @@ import { Popover, Transition } from '@headlessui/react'
import styles from './Toolbar.module.css'
import { v4 as uuidv4 } from 'uuid'
import { useAppMode } from 'hooks/useAppMode'
import { ActionIcon } from 'components/ActionIcon'
export const sketchButtonClassnames = {
background:
'bg-chalkboard-100 group-hover:bg-chalkboard-90 hover:bg-chalkboard-90 dark:bg-fern-20 dark:group-hover:bg-fern-10 dark:hover:bg-fern-10 group-disabled:bg-chalkboard-50 dark:group-disabled:bg-chalkboard-60 group-hover:group-disabled:bg-chalkboard-50 dark:group-hover:group-disabled:bg-chalkboard-50',
icon: 'text-fern-20 h-auto group-hover:text-fern-10 hover:text-fern-10 dark:text-chalkboard-100 dark:group-hover:text-chalkboard-100 dark:hover:text-chalkboard-100 group-disabled:bg-chalkboard-60 hover:group-disabled:text-inherit',
}
const sketchFnLabels: Record<ToolTip | 'sketch_line' | 'move', string> = {
sketch_line: 'Line',
line: 'Line',
move: 'Move',
angledLine: 'Angled Line',
angledLineThatIntersects: 'Angled Line That Intersects',
angledLineOfXLength: 'Angled Line Of X Length',
angledLineOfYLength: 'Angled Line Of Y Length',
angledLineToX: 'Angled Line To X',
angledLineToY: 'Angled Line To Y',
lineTo: 'Line to Point',
xLine: 'Horizontal Line',
yLine: 'Vertical Line',
xLineTo: 'Horizontal Line to Point',
yLineTo: 'Vertical Line to Point',
}
export const Toolbar = () => {
const {
@ -44,9 +68,9 @@ export const Toolbar = () => {
console.log('guiMode', guiMode)
}, [guiMode])
function ToolbarButtons() {
function ToolbarButtons({ className }: React.HTMLAttributes<HTMLElement>) {
return (
<span className={styles.smallScrollbar}>
<span className={styles.toolbarButtons + ' ' + className}>
{guiMode.mode === 'default' && (
<button
onClick={() => {
@ -55,7 +79,9 @@ export const Toolbar = () => {
sketchMode: 'selectFace',
})
}}
className="group"
>
<ActionIcon icon="sketch" className="!p-0.5" size="md" />
Start Sketch
</button>
)}
@ -74,8 +100,10 @@ export const Toolbar = () => {
)
updateAst(modifiedAst, true)
}}
className="group"
>
SketchOnFace
<ActionIcon icon="sketch" className="!p-0.5" size="md" />
Sketch on Face
</button>
)}
{guiMode.mode === 'canEditSketch' && (
@ -98,7 +126,9 @@ export const Toolbar = () => {
position: guiMode.position,
})
}}
className="group"
>
<ActionIcon icon="sketch" className="!p-0.5" size="md" />
Edit Sketch
</button>
)}
@ -117,8 +147,10 @@ export const Toolbar = () => {
)
updateAst(modifiedAst, true, { focusPath: pathToExtrudeArg })
}}
className="group"
>
ExtrudeSketch
<ActionIcon icon="extrude" className="!p-0.5" size="md" />
Extrude
</button>
<button
onClick={() => {
@ -134,8 +166,10 @@ export const Toolbar = () => {
)
updateAst(modifiedAst, true, { focusPath: pathToExtrudeArg })
}}
className="group"
>
ExtrudeSketch (w/o pipe)
<ActionIcon icon="extrude" className="!p-0.5" size="md" />
Extrude as new
</button>
</>
)}
@ -157,7 +191,15 @@ export const Toolbar = () => {
setGuiMode({ mode: 'default' })
executeAst()
}}
className="group"
>
<ActionIcon
icon="exit"
className="!p-0.5"
bgClassName={sketchButtonClassnames.background}
iconClassName={sketchButtonClassnames.icon}
size="md"
/>
Exit sketch
</button>
)}
@ -201,9 +243,21 @@ export const Toolbar = () => {
}),
})
}}
className={
'group ' +
(guiMode.sketchMode === sketchFnName
? '!text-fern-70 !bg-fern-10 !dark:text-fern-20 !border-fern-50'
: '')
}
>
{sketchFnName}
{guiMode.sketchMode === sketchFnName && '✅'}
<ActionIcon
icon={sketchFnName.includes('line') ? 'line' : 'move'}
className="!p-0.5"
bgClassName={sketchButtonClassnames.background}
iconClassName={sketchButtonClassnames.icon}
size="md"
/>
{sketchFnLabels[sketchFnName]}
</button>
)
})}
@ -234,7 +288,7 @@ export const Toolbar = () => {
<span className={styles.toolbarCap + ' ' + styles.label}>
{guiMode.mode === 'sketch' ? '2D' : '3D'}
</span>
<menu className="flex flex-1 gap-2 py-0.5 overflow-hidden whitespace-nowrap">
<menu className="flex-1 gap-2 py-0.5 overflow-hidden whitespace-nowrap">
<ToolbarButtons />
</menu>
<Popover.Button
@ -275,7 +329,7 @@ export const Toolbar = () => {
</Popover.Button>
</section>
<section>
<ToolbarButtons />
<ToolbarButtons className="flex-wrap" />
</section>
</Popover.Panel>
</Transition>