[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 {
|
export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
|
||||||
const app = useTldrawApp()
|
const app = useTldrawApp()
|
||||||
|
|
||||||
const theme = app.useStore(themeSelector)
|
const theme = app.useStore(themeSelector)
|
||||||
|
|
||||||
const options = app.useStore(optionsSelector)
|
const options = app.useStore(optionsSelector)
|
||||||
|
|
||||||
const currentStyle = app.useStore(currentStyleSelector)
|
const currentStyle = app.useStore(currentStyleSelector)
|
||||||
|
|
||||||
const selectedIds = app.useStore(selectedIdsSelector)
|
const selectedIds = app.useStore(selectedIdsSelector)
|
||||||
|
|
||||||
const [displayedStyle, setDisplayedStyle] = React.useState(currentStyle)
|
const [displayedStyle, setDisplayedStyle] = React.useState(currentStyle)
|
||||||
|
|
||||||
const rDisplayedStyle = React.useRef(currentStyle)
|
const rDisplayedStyle = React.useRef(currentStyle)
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
const {
|
const {
|
||||||
appState: { currentStyle },
|
appState: { currentStyle },
|
||||||
|
@ -144,27 +151,34 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
|
||||||
setDisplayedStyle(commonStyle)
|
setDisplayedStyle(commonStyle)
|
||||||
}
|
}
|
||||||
}, [currentStyle, selectedIds])
|
}, [currentStyle, selectedIds])
|
||||||
|
|
||||||
const handleToggleFilled = React.useCallback((checked: boolean) => {
|
const handleToggleFilled = React.useCallback((checked: boolean) => {
|
||||||
app.style({ isFilled: checked })
|
app.style({ isFilled: checked })
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const handleDashChange = React.useCallback((value: string) => {
|
const handleDashChange = React.useCallback((value: string) => {
|
||||||
app.style({ dash: value as DashStyle })
|
app.style({ dash: value as DashStyle })
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const handleSizeChange = React.useCallback((value: string) => {
|
const handleSizeChange = React.useCallback((value: string) => {
|
||||||
app.style({ size: value as SizeStyle })
|
app.style({ size: value as SizeStyle })
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const handleFontChange = React.useCallback((value: string) => {
|
const handleFontChange = React.useCallback((value: string) => {
|
||||||
app.style({ font: value as FontStyle })
|
app.style({ font: value as FontStyle })
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const handleTextAlignChange = React.useCallback((value: string) => {
|
const handleTextAlignChange = React.useCallback((value: string) => {
|
||||||
app.style({ textAlign: value as AlignStyle })
|
app.style({ textAlign: value as AlignStyle })
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const handleMenuOpenChange = React.useCallback(
|
const handleMenuOpenChange = React.useCallback(
|
||||||
(open: boolean) => {
|
(open: boolean) => {
|
||||||
app.setMenuOpen(open)
|
app.setMenuOpen(open)
|
||||||
},
|
},
|
||||||
[app]
|
[app]
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownMenu.Root dir="ltr" onOpenChange={handleMenuOpenChange}>
|
<DropdownMenu.Root dir="ltr" onOpenChange={handleMenuOpenChange}>
|
||||||
<DropdownMenu.Trigger asChild id="TD-Styles">
|
<DropdownMenu.Trigger asChild id="TD-Styles">
|
||||||
|
|
|
@ -45,14 +45,12 @@ export function TopPanel({
|
||||||
{(showStyles || showZoom) && (
|
{(showStyles || showZoom) && (
|
||||||
<Panel side="right">
|
<Panel side="right">
|
||||||
{showStyles && !readOnly && <StyleMenu />}
|
{showStyles && !readOnly && <StyleMenu />}
|
||||||
<MobileOnly bp={breakpoints}>
|
|
||||||
<ToolButton>
|
<ToolButton>
|
||||||
<UndoIcon onClick={app.undo} />
|
<UndoIcon onClick={app.undo} />
|
||||||
</ToolButton>
|
</ToolButton>
|
||||||
<ToolButton>
|
<ToolButton>
|
||||||
<RedoIcon onClick={app.redo} />
|
<RedoIcon onClick={app.redo} />
|
||||||
</ToolButton>
|
</ToolButton>
|
||||||
</MobileOnly>
|
|
||||||
{showZoom && <ZoomMenu />}
|
{showZoom && <ZoomMenu />}
|
||||||
</Panel>
|
</Panel>
|
||||||
)}
|
)}
|
||||||
|
@ -78,18 +76,3 @@ const StyledSpacer = styled('div', {
|
||||||
flexGrow: 2,
|
flexGrow: 2,
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
})
|
})
|
||||||
|
|
||||||
const MobileOnly = styled('div', {
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'row',
|
|
||||||
variants: {
|
|
||||||
bp: {
|
|
||||||
small: {
|
|
||||||
display: 'inherit',
|
|
||||||
},
|
|
||||||
large: {
|
|
||||||
display: 'none',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
Loading…
Reference in a new issue