fix: context menu state

This commit is contained in:
Konstantinos Kaloutas
2022-08-31 16:23:15 +03:00
parent 27c0f0ebdd
commit 89bf35d282

View File

@@ -19,17 +19,18 @@ export const ContextMenu = observer(function ContextMenu({
const app = useApp()
const rContent = React.useRef<HTMLDivElement>(null)
const runAndTransition = (f: Function) => {
f()
app.transition('select')
}
return (
<ReactContextMenu.Root
onOpenChange={state => {
if (!state) app.transition('select')
}}
>
<ReactContextMenu.Root>
<ReactContextMenu.Trigger>{children}</ReactContextMenu.Trigger>
<ReactContextMenu.Content
className="tl-context-menu"
ref={rContent}
onEscapeKeyDown={preventDefault}
onEscapeKeyDown={()=> app.transition('select')}
collisionBoundary={collisionRef.current}
asChild
tabIndex={-1}
@@ -37,7 +38,7 @@ export const ContextMenu = observer(function ContextMenu({
<div>
{app.selectedShapes?.size > 0 && (
<>
<ReactContextMenu.Item className="tl-context-menu-button" onClick={() => app.copy()}>
<ReactContextMenu.Item className="tl-context-menu-button" onClick={() => runAndTransition(app.copy)}>
Copy
<div className="tl-context-menu-right-slot">
<span className="keyboard-shortcut">
@@ -47,7 +48,7 @@ export const ContextMenu = observer(function ContextMenu({
</ReactContextMenu.Item>
</>
)}
<ReactContextMenu.Item className="tl-context-menu-button" onClick={() => app.paste()}>
<ReactContextMenu.Item className="tl-context-menu-button" onClick={() => runAndTransition(app.paste)}>
Paste
<div className="tl-context-menu-right-slot">
<span className="keyboard-shortcut">
@@ -58,7 +59,7 @@ export const ContextMenu = observer(function ContextMenu({
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-context-menu-button"
onClick={() => app.api.selectAll()}
onClick={() => runAndTransition(app.api.selectAll)}
>
Select all
<div className="tl-context-menu-right-slot">
@@ -70,7 +71,7 @@ export const ContextMenu = observer(function ContextMenu({
{app.selectedShapes?.size > 1 && (
<ReactContextMenu.Item
className="tl-context-menu-button"
onClick={() => app.api.deselectAll()}
onClick={() => runAndTransition(app.api.deselectAll)}
>
Deselect all
</ReactContextMenu.Item>
@@ -79,7 +80,7 @@ export const ContextMenu = observer(function ContextMenu({
<>
<ReactContextMenu.Item
className="tl-context-menu-button"
onClick={() => app.api.deleteShapes()}
onClick={() => runAndTransition(app.api.deleteShapes)}
>
Delete
<div className="tl-context-menu-right-slot">
@@ -93,13 +94,13 @@ export const ContextMenu = observer(function ContextMenu({
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-context-menu-button"
onClick={() => app.flipHorizontal()}
onClick={() => runAndTransition(app.flipHorizontal)}
>
Flip horizontally
</ReactContextMenu.Item>
<ReactContextMenu.Item
className="tl-context-menu-button"
onClick={() => app.flipVertical()}
onClick={() => runAndTransition(app.flipVertical)}
>
Flip vertically
</ReactContextMenu.Item>
@@ -108,7 +109,7 @@ export const ContextMenu = observer(function ContextMenu({
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-context-menu-button"
onClick={() => app.bringToFront()}
onClick={() => runAndTransition(app.bringToFront)}
>
Move to front
<div className="tl-context-menu-right-slot">
@@ -119,7 +120,7 @@ export const ContextMenu = observer(function ContextMenu({
</ReactContextMenu.Item>
<ReactContextMenu.Item
className="tl-context-menu-button"
onClick={() => app.sendToBack()}
onClick={() => runAndTransition(app.sendToBack)}
>
Move to back
<div className="tl-context-menu-right-slot">