Move element write-to-code infrastructure (#233)

app/common/models/code.ts

@@ -1,11 +1,12 @@
-import { InsertedElement } from './element/insert';
+import { InsertedElement, MovedElement } from './element/domAction';
 import { TemplateNode } from './element/templateNode';
 
 export interface CodeDiffRequest {
     selector: string;
     templateNode: TemplateNode;
     codeBlock: string;
-    elements: InsertedElement[];
+    insertedElements: InsertedElement[];
+    movedElements: MovedElement[];
     attributes: Record<string, string>;
 }
 

app/common/models/element/domAction.ts

@@ -0,0 +1,25 @@
+import { InsertPos } from '..';
+import { ActionElementLocation } from '/common/actions';
+
+export interface DomActionElement {
+    timestamp: number;
+    selector: string;
+    location: ActionElementLocation;
+}
+
+export interface ActionMoveLocation extends ActionElementLocation {
+    position: InsertPos.INDEX;
+    targetSelector: string;
+    index: number;
+}
+
+export interface MovedElement extends DomActionElement {
+    location: ActionMoveLocation;
+}
+
+export interface InsertedElement extends DomActionElement {
+    tagName: string;
+    selector: string;
+    children: InsertedElement[];
+    attributes: Record<string, string>;
+}

app/electron/main/code/diff/index.ts

@@ -23,7 +23,7 @@ export function getCodeDiffs(requests: CodeDiffRequest[]): CodeDiff[] {
             addClassToAst(ast, request.attributes.className);
         }
 
-        for (const element of request.elements) {
+        for (const element of request.insertedElements) {
             insertElementToAst(ast, element);
         }
 

app/electron/main/code/diff/insert.ts

@@ -1,7 +1,7 @@
 import traverse from '@babel/traverse';
 import t from '@babel/types';
 import { InsertPos } from '/common/models';
-import { InsertedChild, InsertedElement } from '/common/models/element/insert';
+import { InsertedElement } from '/common/models/element/domAction';
 
 export function insertElementToAst(ast: t.File, element: InsertedElement) {
     let processed = false;
@@ -47,7 +47,7 @@ function handleIndexPosition(path: any, element: InsertedElement, newElement: t.
     }
 }
 
-function createJSXElement(insertedChild: InsertedChild): t.JSXElement {
+function createJSXElement(insertedChild: InsertedElement): t.JSXElement {
     const attributes = Object.entries(insertedChild.attributes || {}).map(([key, value]) =>
         t.jsxAttribute(
             t.jsxIdentifier(key),

app/electron/preload/webview/api.ts

@@ -1,7 +1,8 @@
 import { contextBridge } from 'electron';
 import { getElementAtLoc, getElementWithSelector } from './elements';
 import { getInsertedElements, getInsertLocation } from './elements/insert';
-import { drag, endDrag, startDrag } from './elements/move';
+import { getMovedElements } from './elements/move';
+import { drag, endDrag, startDrag } from './elements/move/drag';
 
 export function setApi() {
     contextBridge.exposeInMainWorld('api', {
@@ -12,5 +13,6 @@ export function setApi() {
         startDrag: startDrag,
         drag: drag,
         endDrag: endDrag,
+        getMovedElements: getMovedElements,
     });
 }

app/electron/preload/webview/elements/insert.ts

@@ -5,7 +5,7 @@ import { EditorAttributes, INLINE_ONLY_CONTAINERS } from '/common/constants';
 import { getUniqueSelector } from '/common/helpers';
 import { InsertPos } from '/common/models';
 import { DomElement } from '/common/models/element';
-import { InsertedChild, InsertedElement } from '/common/models/element/insert';
+import { InsertedElement } from '/common/models/element/domAction';
 
 export function getInsertLocation(x: number, y: number): ActionElementLocation | undefined {
     const targetEl = findNearestBlockLevelContainer(x, y);
@@ -132,19 +132,13 @@ export function getInsertedElements(): InsertedElement[] {
 }
 
 function getInsertedElement(el: HTMLElement): InsertedElement {
-    return {
-        ...getInsertedChild(el as HTMLElement),
-        location: getInsertedLocation(el),
-    };
-}
-
-function getInsertedChild(el: HTMLElement): InsertedChild {
     return {
         tagName: el.tagName.toLowerCase(),
         selector: getUniqueSelector(el),
-        children: Array.from(el.children).map((child) => getInsertedChild(child as HTMLElement)),
+        children: Array.from(el.children).map((child) => getInsertedElement(child as HTMLElement)),
         timestamp: parseInt(el.getAttribute(EditorAttributes.DATA_ONLOOK_TIMESTAMP) || '0'),
         attributes: {},
+        location: getInsertedLocation(el),
     };
 }
 

app/electron/preload/webview/elements/move/drag.ts

@@ -0,0 +1,149 @@
+import { getDisplayDirection, moveElToIndex, publishMoveEvent } from './helpers';
+import { createStub, getCurrentStubIndex, moveStub, removeStub } from './stub';
+import { EditorAttributes } from '/common/constants';
+import { getOnlookUniqueSelector, getUniqueSelector } from '/common/helpers';
+
+export function startDrag(selector: string): number {
+    const el = document.querySelector(selector) as HTMLElement | null;
+    if (!el) {
+        console.error(`Start drag element not found: ${selector}`);
+        return -1;
+    }
+    const originalIndex = Array.from(el.parentElement!.children).indexOf(el);
+    prepareElementForDragging(el, originalIndex);
+    createStub(el);
+    return originalIndex;
+}
+
+export function drag(dx: number, dy: number, x: number, y: number) {
+    const el = getDragElement();
+    if (!el) {
+        console.error('Dragging element not found');
+        return;
+    }
+    el.style.position = 'fixed';
+    el.style.transform = `translate(${dx}px, ${dy}px)`;
+    moveStub(el, x, y);
+}
+
+export function endDrag(
+    newUniqueId: string,
+): { newSelector: string; newIndex: number } | undefined {
+    const el = getDragElement();
+    if (!el) {
+        console.error('End drag element not found');
+        return;
+    }
+
+    const parent = el.parentElement;
+    if (!parent) {
+        console.error('End drag parent not found');
+        return;
+    }
+
+    const stubIndex = getCurrentStubIndex(parent);
+    const elIndex = Array.from(parent.children).indexOf(el);
+
+    if (stubIndex !== -1 && stubIndex !== elIndex) {
+        moveElToIndex(el, stubIndex);
+    }
+    removeStub();
+
+    const newIndex = Array.from(parent.children).indexOf(el);
+
+    cleanUpElementAfterDragging(el, newIndex, newUniqueId);
+
+    if (stubIndex !== -1 && stubIndex !== elIndex) {
+        publishMoveEvent(el);
+    }
+    const newSelector = getOnlookUniqueSelector(el) || getUniqueSelector(el);
+    return { newSelector, newIndex };
+}
+
+function prepareElementForDragging(el: HTMLElement, originalIndex: number) {
+    const saved = el.getAttribute(EditorAttributes.DATA_ONLOOK_SAVED_STYLE);
+    if (saved) {
+        return;
+    }
+
+    const style = {
+        position: el.style.position,
+        transform: el.style.transform,
+    };
+
+    el.setAttribute(EditorAttributes.DATA_ONLOOK_SAVED_STYLE, JSON.stringify(style));
+    el.setAttribute(EditorAttributes.DATA_ONLOOK_DRAGGING, 'true');
+
+    if (el.getAttribute(EditorAttributes.DATA_ONLOOK_ORIGINAL_INDEX) === null) {
+        el.setAttribute(EditorAttributes.DATA_ONLOOK_ORIGINAL_INDEX, originalIndex.toString());
+    }
+
+    if (el.getAttribute(EditorAttributes.DATA_ONLOOK_DRAG_DIRECTION) !== null) {
+        const parent = el.parentElement;
+        if (parent) {
+            const displayDirection = getDisplayDirection(parent);
+            el.setAttribute(EditorAttributes.DATA_ONLOOK_DRAG_DIRECTION, displayDirection);
+        }
+    }
+}
+
+function getDragElement(): HTMLElement | undefined {
+    const el = document.querySelector(
+        `[${EditorAttributes.DATA_ONLOOK_DRAGGING}]`,
+    ) as HTMLElement | null;
+    if (!el) {
+        return;
+    }
+    return el;
+}
+
+function cleanUpElementAfterDragging(el: HTMLElement, newIndex: number, newUniqueId: string) {
+    restoreElementStyle(el);
+    removeDragAttributes(el);
+    saveElementIndex(el, newIndex);
+    assignUniqueId(el, newUniqueId);
+    saveTimestamp(el);
+}
+
+function removeDragAttributes(el: HTMLElement) {
+    el.removeAttribute(EditorAttributes.DATA_ONLOOK_SAVED_STYLE);
+    el.removeAttribute(EditorAttributes.DATA_ONLOOK_DRAGGING);
+    el.removeAttribute(EditorAttributes.DATA_ONLOOK_DRAG_DIRECTION);
+}
+
+function restoreElementStyle(el: HTMLElement) {
+    try {
+        const saved = el.getAttribute(EditorAttributes.DATA_ONLOOK_SAVED_STYLE);
+        if (saved) {
+            const style = JSON.parse(saved);
+            for (const key in style) {
+                el.style[key as any] = style[key];
+            }
+        }
+    } catch (e) {
+        console.error('Error restoring style', e);
+    }
+}
+
+function saveElementIndex(el: HTMLElement, newIndex: number) {
+    const originalIndex = parseInt(
+        el.getAttribute(EditorAttributes.DATA_ONLOOK_ORIGINAL_INDEX) || '-1',
+        10,
+    );
+    if (originalIndex !== newIndex) {
+        el.setAttribute(EditorAttributes.DATA_ONLOOK_NEW_INDEX, newIndex.toString());
+    } else {
+        el.removeAttribute(EditorAttributes.DATA_ONLOOK_ORIGINAL_INDEX);
+        el.removeAttribute(EditorAttributes.DATA_ONLOOK_NEW_INDEX);
+    }
+}
+
+function assignUniqueId(el: HTMLElement, newUniqueId: string) {
+    if (el.getAttribute(EditorAttributes.DATA_ONLOOK_UNIQUE_ID) === null) {
+        el.setAttribute(EditorAttributes.DATA_ONLOOK_UNIQUE_ID, newUniqueId);
+    }
+}
+
+function saveTimestamp(el: HTMLElement) {
+    el.setAttribute(EditorAttributes.DATA_ONLOOK_TIMESTAMP, Date.now().toString());
+}

app/electron/preload/webview/elements/move/helpers.ts

@@ -57,3 +57,19 @@ export function findInsertionIndex(
 export function publishMoveEvent(el: HTMLElement) {
     ipcRenderer.sendToHost(WebviewChannels.ELEMENT_MOVED, getDomElement(el, true));
 }
+
+export function moveElToIndex(el: HTMLElement, newIndex: number): HTMLElement | undefined {
+    const parent = el.parentElement;
+    if (!parent) {
+        return;
+    }
+    parent.removeChild(el);
+    if (newIndex >= parent.children.length) {
+        parent.appendChild(el);
+        return el;
+    }
+
+    const referenceNode = parent.children[newIndex];
+    parent.insertBefore(el, referenceNode);
+    return el;
+}