feat: cut command and shortcuts

This commit is contained in:
Konstantinos Kaloutas
2022-09-01 10:01:42 +03:00
parent 1b6d8b054f
commit f1d406f82a
3 changed files with 31 additions and 3 deletions

View File

@@ -38,6 +38,17 @@ export const ContextMenu = observer(function ContextMenu({
<div>
{app.selectedShapes?.size > 0 && (
<>
<ReactContextMenu.Item
className="tl-context-menu-button"
onClick={() => runAndTransition(app.cut)}
>
Cut
<div className="tl-context-menu-right-slot">
<span className="keyboard-shortcut">
<code>{MOD_KEY}</code> <code>X</code>
</span>
</div>
</ReactContextMenu.Item>
<ReactContextMenu.Item
className="tl-context-menu-button"
onClick={() => runAndTransition(app.copy)}

View File

@@ -25,7 +25,11 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
onClick={app.api.zoomToFit}
>
Zoom to fit
<div className="tl-zoom-menu-right-slot"></div>
<div className="tl-zoom-menu-right-slot">
<span className="keyboard-shortcut">
<code>1</code>
</span>
</div>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item
className="menu-link tl-zoom-menu-dropdown-item"
@@ -35,7 +39,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
Zoom to selection
<div className="tl-zoom-menu-right-slot">
<span className="keyboard-shortcut">
<code>{MOD_KEY}</code> <code>-</code>
<code></code> <code>1</code>
</span>
</div>
</DropdownMenuPrimitive.Item>

View File

@@ -96,7 +96,11 @@ export class TLApp<
fn: () => this.api.resetZoom(),
},
{
keys: 'mod+-',
keys: '1',
fn: () => this.api.zoomToFit(),
},
{
keys: 'shift+1',
fn: () => this.api.zoomToSelection(),
},
{
@@ -111,6 +115,10 @@ export class TLApp<
keys: 'mod+z',
fn: () => this.undo(),
},
{
keys: 'mod+x',
fn: () => this.cut(),
},
{
keys: 'mod+shift+z',
fn: () => this.redo(),
@@ -437,6 +445,11 @@ export class TLApp<
}
}
cut = () => {
this.copy()
this.api.deleteShapes()
}
dropFiles = (files: FileList, point?: number[]) => {
this.notify('drop-files', {
files: Array.from(files),