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

Add a component for toolbar buttons with a dropdown, consolidate Constrain actions under one (#2327)

Browse Source
This commit is contained in:
Frank Noirot
2024-05-10 19:02:11 -04:00
committed by GitHub
parent d0f9ae475f
commit 726fd02bad
36 changed files with 238 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/Toolbar.tsx
View File

@ -11,17 +11,18 @@ import {
useNetworkStatus,
} from 'components/NetworkHealthIndicator'
import { useStore } from 'useStore'
import { ActionButtonDropdown } from 'components/ActionButtonDropdown'
export const Toolbar = () => {
const { commandBarSend } = useCommandsContext()
const { state, send, context } = useModelingContext()
const toolbarButtonsRef = useRef<HTMLUListElement>(null)
const iconClassName =
'group-disabled:text-chalkboard-50 group-enabled:group-hover:!text-chalkboard-10 group-pressed:!text-chalkboard-10'
'group-disabled:text-chalkboard-50 group-enabled:group-hover:!text-primary dark:group-enabled:group-hover:!text-inherit group-pressed:!text-chalkboard-10 group-ui-open:!text-chalkboard-10 dark:group-ui-open:!text-chalkboard-10'
const bgClassName =
'group-disabled:!bg-transparent group-enabled:group-hover:bg-primary group-pressed:bg-primary'
'group-disabled:!bg-transparent group-enabled:group-hover:bg-primary/10 dark:group-enabled:group-hover:bg-primary group-pressed:bg-primary group-ui-open:bg-primary'
const buttonClassName =
'bg-chalkboard-10 dark:bg-chalkboard-100 hover:bg-chalkboard-10 dark:hover:bg-chalkboard-100'
'bg-chalkboard-10 dark:bg-chalkboard-100 enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 pressed:!border-primary ui-open:!border-primary'
const pathId = useMemo(() => {
if (!isSingleCursorInPipe(context.selectionRanges, kclManager.ast)) {
return false
@ -57,10 +58,7 @@ export const Toolbar = () => {
{...props}
ref={toolbarButtonsRef}
onWheel={handleToolbarButtonsWheelEvent}
className={
'm-0 py-1 rounded-l-sm flex gap-2 items-center overflow-x-auto ' +
className
}
className={'m-0 py-1 rounded-l-sm flex gap-2 items-center ' + className}
style={{ scrollbarWidth: 'thin' }}
>
{state.nextEvents.includes('Enter sketch') && (
@ -71,7 +69,7 @@ export const Toolbar = () => {
onClick={() =>
send({ type: 'Enter sketch', data: { forceNewSketch: true } })
}
icon={{
iconStart={{
icon: 'sketch',
iconClassName,
bgClassName,
@ -88,7 +86,7 @@ export const Toolbar = () => {
className={buttonClassName}
Element="button"
onClick={() => send({ type: 'Enter sketch' })}
icon={{
iconStart={{
icon: 'sketch',
iconClassName,
bgClassName,
@ -105,7 +103,7 @@ export const Toolbar = () => {
className={buttonClassName}
Element="button"
onClick={() => send({ type: 'Cancel' })}
icon={{
iconStart={{
icon: 'arrowLeft',
iconClassName,
bgClassName,
@ -128,7 +126,7 @@ export const Toolbar = () => {
: send('Equip Line tool')
}
aria-pressed={state?.matches('Sketch.Line tool')}
icon={{
iconStart={{
icon: 'line',
iconClassName,
bgClassName,
@ -148,7 +146,7 @@ export const Toolbar = () => {
: send('Equip tangential arc to')
}
aria-pressed={state.matches('Sketch.Tangential arc to')}
icon={{
iconStart={{
icon: 'arc',
iconClassName,
bgClassName,
@ -172,7 +170,7 @@ export const Toolbar = () => {
: send('Equip rectangle tool')
}
aria-pressed={state.matches('Sketch.Rectangle tool')}
icon={{
iconStart={{
icon: 'rectangle',
iconClassName,
bgClassName,
@ -194,52 +192,54 @@ export const Toolbar = () => {
</>
)}
{state.matches('Sketch.SketchIdle') &&
state.nextEvents
.filter(
(eventName) =>
eventName.includes('Make segment') ||
eventName.includes('Constrain')
)
.sort((a, b) => {
const aisEnabled = state.nextEvents
.filter((event) => state.can(event as any))
.includes(a)
const bIsEnabled = state.nextEvents
.filter((event) => state.can(event as any))
.includes(b)
if (aisEnabled && !bIsEnabled) {
return -1
}
if (!aisEnabled && bIsEnabled) {
return 1
}
return 0
})
.map((eventName) => (
<li className="contents" key={eventName}>
<ActionButton
className={buttonClassName}
Element="button"
key={eventName}
onClick={() => send(eventName)}
disabled={
state.nextEvents.filter(
(eventName) =>
eventName.includes('Make segment') ||
eventName.includes('Constrain')
).length > 0 && (
<ActionButtonDropdown
splitMenuItems={state.nextEvents
.filter(
(eventName) =>
eventName.includes('Make segment') ||
eventName.includes('Constrain')
)
.sort((a, b) => {
const aisEnabled = state.nextEvents
.filter((event) => state.can(event as any))
.includes(a)
const bIsEnabled = state.nextEvents
.filter((event) => state.can(event as any))
.includes(b)
if (aisEnabled && !bIsEnabled) {
return -1
}
if (!aisEnabled && bIsEnabled) {
return 1
}
return 0
})
.map((eventName) => ({
label: eventName
.replace('Make segment ', '')
.replace('Constrain ', ''),
onClick: () => send(eventName),
disabled:
!state.nextEvents
.filter((event) => state.can(event as any))
.includes(eventName) || disableAllButtons
}
title={eventName}
icon={{
icon: 'line',
iconClassName,
bgClassName,
}}
>
{eventName
.replace('Make segment ', '')
.replace('Constrain ', '')}
</ActionButton>
</li>
))}
.includes(eventName) || disableAllButtons,
}))}
className={buttonClassName}
Element="button"
iconStart={{
icon: 'dimension',
iconClassName,
bgClassName,
}}
>
Constrain
</ActionButtonDropdown>
)}
{state.matches('idle') && (
<li className="contents">
<ActionButton
@ -257,7 +257,7 @@ export const Toolbar = () => {
? 'extrude'
: 'sketches need to be closed, or not already extruded'
}
icon={{
iconStart={{
icon: 'extrude',
iconClassName,
bgClassName,
@ -272,7 +272,7 @@ export const Toolbar = () => {
}
return (
<menu className="max-w-full overflow-hidden whitespace-nowrap rounded px-1.5 py-0.5 backdrop-blur-sm bg-chalkboard-10/80 dark:bg-chalkboard-110/70 relative">
<menu className="max-w-full whitespace-nowrap rounded px-1.5 py-0.5 backdrop-blur-sm bg-chalkboard-10/80 dark:bg-chalkboard-110/70 relative">
<ToolbarButtons />
</menu>
)