[improvement] add undo redo at all screen sizes (#643)
* Adds undo redo at all viewport sizes * Update TopPanel.tsx
This commit is contained in:
parent
1723254e80
commit
d81bcc1055
3 changed files with 27 additions and 23 deletions
7
.ignore
Normal file
7
.ignore
Normal file
|
@ -0,0 +1,7 @@
|
|||
# Ignored Files for Search
|
||||
|
||||
dist
|
||||
node_modules
|
||||
*.d.ts
|
||||
*.js
|
||||
*.md
|
|
@ -101,12 +101,19 @@ const optionsSelector = (s: TDSnapshot) => {
|
|||
|
||||
export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
|
||||
const app = useTldrawApp()
|
||||
|
||||
const theme = app.useStore(themeSelector)
|
||||
|
||||
const options = app.useStore(optionsSelector)
|
||||
|
||||
const currentStyle = app.useStore(currentStyleSelector)
|
||||
|
||||
const selectedIds = app.useStore(selectedIdsSelector)
|
||||
|
||||
const [displayedStyle, setDisplayedStyle] = React.useState(currentStyle)
|
||||
|
||||
const rDisplayedStyle = React.useRef(currentStyle)
|
||||
|
||||
React.useEffect(() => {
|
||||
const {
|
||||
appState: { currentStyle },
|
||||
|
@ -144,27 +151,34 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
|
|||
setDisplayedStyle(commonStyle)
|
||||
}
|
||||
}, [currentStyle, selectedIds])
|
||||
|
||||
const handleToggleFilled = React.useCallback((checked: boolean) => {
|
||||
app.style({ isFilled: checked })
|
||||
}, [])
|
||||
|
||||
const handleDashChange = React.useCallback((value: string) => {
|
||||
app.style({ dash: value as DashStyle })
|
||||
}, [])
|
||||
|
||||
const handleSizeChange = React.useCallback((value: string) => {
|
||||
app.style({ size: value as SizeStyle })
|
||||
}, [])
|
||||
|
||||
const handleFontChange = React.useCallback((value: string) => {
|
||||
app.style({ font: value as FontStyle })
|
||||
}, [])
|
||||
|
||||
const handleTextAlignChange = React.useCallback((value: string) => {
|
||||
app.style({ textAlign: value as AlignStyle })
|
||||
}, [])
|
||||
|
||||
const handleMenuOpenChange = React.useCallback(
|
||||
(open: boolean) => {
|
||||
app.setMenuOpen(open)
|
||||
},
|
||||
[app]
|
||||
)
|
||||
|
||||
return (
|
||||
<DropdownMenu.Root dir="ltr" onOpenChange={handleMenuOpenChange}>
|
||||
<DropdownMenu.Trigger asChild id="TD-Styles">
|
||||
|
|
|
@ -45,14 +45,12 @@ export function TopPanel({
|
|||
{(showStyles || showZoom) && (
|
||||
<Panel side="right">
|
||||
{showStyles && !readOnly && <StyleMenu />}
|
||||
<MobileOnly bp={breakpoints}>
|
||||
<ToolButton>
|
||||
<UndoIcon onClick={app.undo} />
|
||||
</ToolButton>
|
||||
<ToolButton>
|
||||
<RedoIcon onClick={app.redo} />
|
||||
</ToolButton>
|
||||
</MobileOnly>
|
||||
<ToolButton>
|
||||
<UndoIcon onClick={app.undo} />
|
||||
</ToolButton>
|
||||
<ToolButton>
|
||||
<RedoIcon onClick={app.redo} />
|
||||
</ToolButton>
|
||||
{showZoom && <ZoomMenu />}
|
||||
</Panel>
|
||||
)}
|
||||
|
@ -78,18 +76,3 @@ const StyledSpacer = styled('div', {
|
|||
flexGrow: 2,
|
||||
pointerEvents: 'none',
|
||||
})
|
||||
|
||||
const MobileOnly = styled('div', {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
variants: {
|
||||
bp: {
|
||||
small: {
|
||||
display: 'inherit',
|
||||
},
|
||||
large: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue