Backspace to delete elements (#361)

onlook-dev · Sep 16, 2024 · f566f7e · f566f7e
1 parent b9ddfe8
commit f566f7e
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 5 deletions.
diff --git a/app/common/hotkeys.ts b/app/common/hotkeys.ts
@@ -9,6 +9,7 @@ export class Hotkey {
     static readonly INTERACT = new Hotkey('i', 'Interact');
     static readonly INSERT_DIV = new Hotkey('r', 'Insert Div');
     static readonly INSERT_TEXT = new Hotkey('t', 'Insert Text');
+    static readonly DELETE = new Hotkey('backspace', 'Delete Div');
 
     // private to disallow creating other instances of this type
     private constructor(

diff --git a/app/electron/preload/webview/api.ts b/app/electron/preload/webview/api.ts
@@ -1,9 +1,11 @@
 import { contextBridge } from 'electron';
 import { processDom } from './dom';
 import { getElementAtLoc, getElementWithSelector } from './elements';
+import { isElementInserted } from './elements/helpers';
 import { getInsertedElements, getInsertLocation } from './elements/insert';
 import { getMovedElements } from './elements/move';
 import { drag, endDrag, startDrag } from './elements/move/drag';
+import { getRemoveActionFromSelector } from './elements/remove';
 import {
     editText,
     getTextEditedElements,
@@ -16,10 +18,12 @@ export function setApi() {
         getElementAtLoc: getElementAtLoc,
         getElementWithSelector: getElementWithSelector,
         processDom: processDom,
+        isElementInserted: isElementInserted,
 
         // Insert
         getInsertLocation: getInsertLocation,
         getInsertedElements: getInsertedElements,
+        getRemoveActionFromSelector: getRemoveActionFromSelector,
 
         // Drag
         startDrag: startDrag,

diff --git a/app/electron/preload/webview/elements/helpers.ts b/app/electron/preload/webview/elements/helpers.ts
@@ -1,7 +1,9 @@
 import { uuid } from '../bundles';
 import { getStyles } from './style';
+import { ActionElementLocation } from '/common/actions';
 import { EditorAttributes } from '/common/constants';
 import { getUniqueSelector } from '/common/helpers';
+import { InsertPos } from '/common/models';
 import { DomElement, ParentDomElement } from '/common/models/element';
 
 export const getDeepElement = (x: number, y: number): Element | undefined => {
@@ -77,3 +79,26 @@ export function restoreElementStyle(el: HTMLElement) {
 export function saveTimestamp(el: HTMLElement) {
     el.setAttribute(EditorAttributes.DATA_ONLOOK_TIMESTAMP, Date.now().toString());
 }
+
+export function getElementLocation(targetEl: HTMLElement): ActionElementLocation | undefined {
+    const parent = targetEl.parentElement;
+    if (!parent) {
+        return;
+    }
+
+    const parentSelector = getUniqueSelector(parent as HTMLElement);
+    const location: ActionElementLocation = {
+        position: InsertPos.INDEX,
+        targetSelector: parentSelector,
+        index: Array.from(targetEl.parentElement?.children || []).indexOf(targetEl),
+    };
+    return location;
+}
+
+export const isElementInserted = (selector: string): boolean => {
+    const targetEl = document.querySelector(selector);
+    if (!targetEl) {
+        return false;
+    }
+    return targetEl.hasAttribute(EditorAttributes.DATA_ONLOOK_INSERTED);
+};
diff --git a/app/electron/preload/webview/elements/insert.ts b/app/electron/preload/webview/elements/insert.ts
@@ -65,6 +65,18 @@ export function insertElement(
         case InsertPos.AFTER:
             targetEl.after(newEl);
             break;
+        case InsertPos.INDEX:
+            if (location.index === undefined || location.index < 0) {
+                console.error(`Invalid index: ${location.index}`);
+                return;
+            }
+
+            if (location.index >= targetEl.children.length) {
+                targetEl.appendChild(newEl);
+            } else {
+                targetEl.insertBefore(newEl, targetEl.children.item(location.index));
+            }
+            break;
         default:
             console.error(`Invalid position: ${location.position}`);
             return;
@@ -103,6 +115,14 @@ export function removeElement(location: ActionElementLocation): DomElement | nul
         case InsertPos.AFTER:
             elementToRemove = targetEl.nextElementSibling as HTMLElement | null;
             break;
+        case InsertPos.INDEX:
+            if (location.index !== undefined) {
+                elementToRemove = targetEl.children.item(location.index) as HTMLElement | null;
+            } else {
+                console.error(`Invalid index: ${location.index}`);
+                return null;
+            }
+            break;
         default:
             console.error(`Invalid position: ${location.position}`);
             return null;

diff --git a/app/electron/preload/webview/elements/remove.ts b/app/electron/preload/webview/elements/remove.ts
@@ -0,0 +1,43 @@
+import { getElementLocation } from './helpers';
+import { ActionElement, RemoveElementAction } from '/common/actions';
+
+export function getRemoveActionFromSelector(
+    selector: string,
+    webviewId: string,
+): RemoveElementAction | undefined {
+    const el = document.querySelector(selector) as HTMLElement | null;
+    if (!el) {
+        return;
+    }
+
+    const location = getElementLocation(el);
+    if (!location) {
+        return;
+    }
+
+    const actionEl = getActionElement(el);
+
+    return {
+        type: 'remove-element',
+        targets: [{ webviewId }],
+        location: location,
+        element: actionEl,
+        styles: {},
+    };
+}
+
+function getActionElement(el: HTMLElement): ActionElement {
+    const children = Array.from(el.children).map((child) => getActionElement(child as HTMLElement));
+    const textContent = el.textContent || '';
+    const attributes: Record<string, string> = {};
+    for (const attr of el.attributes) {
+        attributes[attr.name] = attr.value;
+    }
+
+    return {
+        tagName: el.tagName.toLowerCase(),
+        attributes,
+        children,
+        textContent,
+    };
+}
diff --git a/app/src/lib/editor/engine/index.ts b/app/src/lib/editor/engine/index.ts
@@ -14,7 +14,9 @@ import { ProjectInfoManager } from './projectinfo';
 import { StyleManager } from './style';
 import { TextEditingManager } from './text';
 import { WebviewManager } from './webview';
+import { RemoveElementAction } from '/common/actions';
 import { escapeSelector } from '/common/helpers';
+import { WebViewElement } from '/common/models/element';
 
 export class EditorEngine {
     private editorMode: EditorMode = EditorMode.DESIGN;
@@ -158,4 +160,36 @@ export class EditorEngine {
         }
         this.text.start(domEl, webview);
     }
+
+    async deleteSelectedElement() {
+        const selected = this.elements.selected;
+        if (selected.length === 0) {
+            return;
+        }
+        const selectedEl: WebViewElement = selected[0];
+        const webviewId = selectedEl.webviewId;
+        const webview = this.webviews.getWebview(webviewId);
+        if (!webview) {
+            return;
+        }
+
+        const isElementInserted = await webview.executeJavaScript(
+            `window.api?.isElementInserted('${escapeSelector(selectedEl.selector)}')`,
+        );
+
+        if (isElementInserted) {
+            const removeAction = (await webview.executeJavaScript(
+                `window.api?.getRemoveActionFromSelector('${escapeSelector(selectedEl.selector)}', '${webviewId}')`,
+            )) as RemoveElementAction | undefined;
+            if (!removeAction) {
+                return;
+            }
+            this.action.run(removeAction);
+        } else {
+            this.style.updateElementStyle('display', {
+                updated: 'none',
+                original: selectedEl.styles.display,
+            });
+        }
+    }
 }
diff --git a/app/src/lib/editor/engine/overlay/textEdit.ts b/app/src/lib/editor/engine/overlay/textEdit.ts
@@ -42,7 +42,6 @@ export class EditTextInput {
         this.setValue(content);
         this.onChange = onChange || null;
         this.onStop = onStop || null;
-        this.editorView.focus();
     }
 
     updateSize({ width, height, top, left }: RectDimensions) {
@@ -144,6 +143,7 @@ export class EditTextInput {
             this.isDisabled = false;
             this.editorView.setProps({ editable: () => true });
             this.element.style.pointerEvents = 'auto';
+            this.editorView.focus();
         }
     }
 }
diff --git a/app/src/routes/project/Canvas/HotkeysArea.tsx b/app/src/routes/project/Canvas/HotkeysArea.tsx
@@ -21,7 +21,10 @@ const HotkeysArea = ({ children, scale, setScale }: HotkeysAreaProps) => {
 
     // Modes
     useHotkeys(Hotkey.SELECT.command, () => (editorEngine.mode = EditorMode.DESIGN));
-    useHotkeys(Hotkey.ESCAPE.command, () => (editorEngine.mode = EditorMode.DESIGN));
+    useHotkeys(Hotkey.ESCAPE.command, () => {
+        editorEngine.mode = EditorMode.DESIGN;
+        !editorEngine.text.isEditing && editorEngine.clear();
+    });
     useHotkeys(Hotkey.PAN.command, () => (editorEngine.mode = EditorMode.PAN));
     useHotkeys(Hotkey.INTERACT.command, () => (editorEngine.mode = EditorMode.INTERACT));
     useHotkeys(Hotkey.INSERT_DIV.command, () => (editorEngine.mode = EditorMode.INSERT_DIV));
@@ -34,9 +37,7 @@ const HotkeysArea = ({ children, scale, setScale }: HotkeysAreaProps) => {
     useHotkeys(Hotkey.UNDO.command, () => editorEngine.action.undo());
     useHotkeys(Hotkey.REDO.command, () => editorEngine.action.redo());
     useHotkeys('enter', () => editorEngine.textEditSelectedElement());
-    useHotkeys('esc', () => {
-        !editorEngine.text.isEditing && editorEngine.clear();
-    });
+    useHotkeys(Hotkey.DELETE.command, () => editorEngine.deleteSelectedElement());
 
     return <>{children}</>;
 };