Add editor hover and click (#12)

* Disable GH workflow
* Add click and hover handler for webview

.github/workflows/build.yml

@@ -1,47 +1,47 @@
-name: Build
-
-on:
-  push:
-    branches: [main]
-    paths-ignore:
-      - "**.md"
-      - "**.spec.js"
-      - ".idea"
-      - ".vscode"
-      - ".dockerignore"
-      - "Dockerfile"
-      - ".gitignore"
-      - ".github/**"
-      - "!.github/workflows/build.yml"
-
-jobs:
-  build:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [macos-latest, ubuntu-latest, windows-latest]
-
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Install Dependencies
-        run: npm install
-
-      - name: Build Release Files
-        run: npm run build
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Upload Artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: release_on_${{ matrix. os }}
-          path: release/
-          retention-days: 5
+# name: Build
+
+# on:
+#   push:
+#     branches: [main]
+#     paths-ignore:
+#       - "**.md"
+#       - "**.spec.js"
+#       - ".idea"
+#       - ".vscode"
+#       - ".dockerignore"
+#       - "Dockerfile"
+#       - ".gitignore"
+#       - ".github/**"
+#       - "!.github/workflows/build.yml"
+
+# jobs:
+#   build:
+#     runs-on: ${{ matrix.os }}
+
+#     strategy:
+#       matrix:
+#         os: [macos-latest, ubuntu-latest, windows-latest]
+
+#     steps:
+#       - name: Checkout Code
+#         uses: actions/checkout@v3
+
+#       - name: Setup Node.js
+#         uses: actions/setup-node@v3
+#         with:
+#           node-version: 18
+
+#       - name: Install Dependencies
+#         run: npm install
+
+#       - name: Build Release Files
+#         run: npm run build
+#         env:
+#           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+#       - name: Upload Artifact
+#         uses: actions/upload-artifact@v3
+#         with:
+#           name: release_on_${{ matrix. os }}
+#           path: release/
+#           retention-days: 5

.github/workflows/ci.yml

@@ -1,81 +1,81 @@
-name: CI
+# name: CI
 
-on:
-  pull_request_target:
-    branches:
-      - main
+# on:
+#   pull_request_target:
+#     branches:
+#       - main
 
-permissions:
-  pull-requests: write
+# permissions:
+#   pull-requests: write
 
-jobs:
-  job1:
-    name: Check Not Allowed File Changes
-    runs-on: ubuntu-latest
-    outputs:
-      markdown_change: ${{ steps.filter_markdown.outputs.change }}
-      markdown_files: ${{ steps.filter_markdown.outputs.change_files }}
-    steps:
+# jobs:
+#   job1:
+#     name: Check Not Allowed File Changes
+#     runs-on: ubuntu-latest
+#     outputs:
+#       markdown_change: ${{ steps.filter_markdown.outputs.change }}
+#       markdown_files: ${{ steps.filter_markdown.outputs.change_files }}
+#     steps:
 
-      - name: Check Not Allowed File Changes
-        uses: dorny/paths-filter@v2
-        id: filter_not_allowed
-        with:
-          list-files: json
-          filters: |
-            change:
-              - 'package-lock.json'
-              - 'yarn.lock'
-              - 'pnpm-lock.yaml'
+#       - name: Check Not Allowed File Changes
+#         uses: dorny/paths-filter@v2
+#         id: filter_not_allowed
+#         with:
+#           list-files: json
+#           filters: |
+#             change:
+#               - 'package-lock.json'
+#               - 'yarn.lock'
+#               - 'pnpm-lock.yaml'
 
-      # ref: https://github.com/github/docs/blob/main/.github/workflows/triage-unallowed-contributions.yml
-      - name: Comment About Changes We Can't Accept
-        if: ${{ steps.filter_not_allowed.outputs.change == 'true' }}
-        uses: actions/github-script@v6
-        with:
-          script: |
-            let workflowFailMessage = "It looks like you've modified some files that we can't accept as contributions."
-            try {
-              const badFilesArr = [
-                'package-lock.json',
-                'yarn.lock',
-                'pnpm-lock.yaml',
-              ]
-              const badFiles = badFilesArr.join('\n- ')
-              const reviewMessage = `👋 Hey there spelunker. It looks like you've modified some files that we can't accept as contributions. The complete list of files we can't accept are:\n- ${badFiles}\n\nYou'll need to revert all of the files you changed in that list using [GitHub Desktop](https://docs.github.com/en/free-pro-team@latest/desktop/contributing-and-collaborating-using-github-desktop/managing-commits/reverting-a-commit) or \`git checkout origin/main <file name>\`. Once you get those files reverted, we can continue with the review process. :octocat:\n\nMore discussion:\n- https://github.com/onlook-dev/browser/issues/`
-              createdComment = await github.rest.issues.createComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.payload.number,
-                body: reviewMessage,
-              })
-              workflowFailMessage = `${workflowFailMessage} Please see ${createdComment.data.html_url} for details.`
-            } catch(err) {
-              console.log("Error creating comment.", err)
-            }
-            core.setFailed(workflowFailMessage)
+#       # ref: https://github.com/github/docs/blob/main/.github/workflows/triage-unallowed-contributions.yml
+#       - name: Comment About Changes We Can't Accept
+#         if: ${{ steps.filter_not_allowed.outputs.change == 'true' }}
+#         uses: actions/github-script@v6
+#         with:
+#           script: |
+#             let workflowFailMessage = "It looks like you've modified some files that we can't accept as contributions."
+#             try {
+#               const badFilesArr = [
+#                 'package-lock.json',
+#                 'yarn.lock',
+#                 'pnpm-lock.yaml',
+#               ]
+#               const badFiles = badFilesArr.join('\n- ')
+#               const reviewMessage = `👋 Hey there spelunker. It looks like you've modified some files that we can't accept as contributions. The complete list of files we can't accept are:\n- ${badFiles}\n\nYou'll need to revert all of the files you changed in that list using [GitHub Desktop](https://docs.github.com/en/free-pro-team@latest/desktop/contributing-and-collaborating-using-github-desktop/managing-commits/reverting-a-commit) or \`git checkout origin/main <file name>\`. Once you get those files reverted, we can continue with the review process. :octocat:\n\nMore discussion:\n- https://github.com/onlook-dev/browser/issues/`
+#               createdComment = await github.rest.issues.createComment({
+#                 owner: context.repo.owner,
+#                 repo: context.repo.repo,
+#                 issue_number: context.payload.number,
+#                 body: reviewMessage,
+#               })
+#               workflowFailMessage = `${workflowFailMessage} Please see ${createdComment.data.html_url} for details.`
+#             } catch(err) {
+#               console.log("Error creating comment.", err)
+#             }
+#             core.setFailed(workflowFailMessage)
 
-      - name: Check Not Linted Markdown
-        if: ${{ always() }}
-        uses: dorny/paths-filter@v2
-        id: filter_markdown
-        with:
-          list-files: shell
-          filters: |
-            change:
-              - added|modified: '*.md'
+#       - name: Check Not Linted Markdown
+#         if: ${{ always() }}
+#         uses: dorny/paths-filter@v2
+#         id: filter_markdown
+#         with:
+#           list-files: shell
+#           filters: |
+#             change:
+#               - added|modified: '*.md'
 
 
-  job2:
-    name: Lint Markdown
-    runs-on: ubuntu-latest
-    needs: job1
-    if: ${{ always() && needs.job1.outputs.markdown_change == 'true' }}
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
+#   job2:
+#     name: Lint Markdown
+#     runs-on: ubuntu-latest
+#     needs: job1
+#     if: ${{ always() && needs.job1.outputs.markdown_change == 'true' }}
+#     steps:
+#       - name: Checkout Code
+#         uses: actions/checkout@v3
+#         with:
+#           ref: ${{ github.event.pull_request.head.sha }}
 
-      - name: Lint markdown
-        run: npx markdownlint-cli ${{ needs.job1.outputs.markdown_files }} --ignore node_modules
+#       - name: Lint markdown
+#         run: npx markdownlint-cli ${{ needs.job1.outputs.markdown_files }} --ignore node_modules

common/models.ts

@@ -0,0 +1,5 @@
+export interface ElementMetadata {
+    selector: string;
+    rect: DOMRect;
+    computedStyle: CSSStyleDeclaration;
+}

electron/preload/webview/elements/index.ts

@@ -1,13 +1,12 @@
-import { EditorAttributes } from "../../common/constants";
+import { EditorAttributes } from "../../../../common/constants";
+import { ElementMetadata } from "../../../../common/models";
 import { finder } from "./finder";
 
-export interface ElementMetadata {
-    selector: string;
-    rect: DOMRect;
-    computedStyle: CSSStyleDeclaration;
-}
-
 export const handleMouseEvent = (e: MouseEvent): Object => {
+    if (!e.metaKey) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
     const el = deepElementFromPoint(e.clientX, e.clientY)
     if (!el) return { coordinates: { x: e.clientX, y: e.clientY } }
 

electron/preload/webview/eventBridge.ts

@@ -5,27 +5,19 @@ export class EventBridge {
     constructor() { }
 
     init() {
-        ipcRenderer.sendToHost("key", {});
-
         this.setForwardingToHost();
         this.setListenToHostEvents();
     }
 
-    eventHandlerMap: { [key: string]: (e: any) => Object } = {
+    eventHandlerMap: Record<string, (e: any) => Object> = {
         'mouseover': handleMouseEvent,
+        'click': handleMouseEvent,
+        'dblclick': handleMouseEvent,
         'wheel': (e: WheelEvent) => {
-            return {
-                coordinates: { x: e.deltaX, y: e.deltaY },
-                innerHeight: document.body.scrollHeight,
-                innerWidth: window.innerWidth,
-            }
+            return {}
         },
         'scroll': (e: Event) => {
-            return {
-                coordinates: { x: window.scrollX, y: window.scrollY },
-                innerHeight: document.body.scrollHeight,
-                innerWidth: window.innerWidth,
-            }
+            return {}
         },
         'dom-ready': () => {
             const { body } = document;
@@ -48,7 +40,6 @@ export class EventBridge {
     }
 
     setForwardingToHost() {
-        ipcRenderer.sendToHost("key", {});
         Object.entries(this.eventHandlerMap).forEach(([key, handler]) => {
             document.body.addEventListener(key, (e) => {
                 const data = JSON.stringify(handler(e));

src/lib/editor/eventHandler.ts

@@ -0,0 +1,59 @@
+import { ElementMetadata } from 'common/models';
+import { OverlayManager } from './overlay';
+
+export class WebviewEventHandler {
+    eventCallbackMap: Record<string, (e: any) => void>
+
+    constructor(overlayManager: OverlayManager) {
+        this.handleIpcMessage = this.handleIpcMessage.bind(this);
+        this.handleConsoleMessage = this.handleConsoleMessage.bind(this);
+
+        this.eventCallbackMap = {
+            'mouseover': (e: Electron.IpcMessageEvent) => {
+                if (!e.args || e.args.length === 0) {
+                    console.error('No args found for mouseover event');
+                    return;
+                }
+
+                const sourceWebview = e.target as Electron.WebviewTag;
+                const elementMetadata: ElementMetadata = JSON.parse(e.args[0]);
+                const adjustedRect = overlayManager.adaptRectFromSourceElement(elementMetadata.rect, sourceWebview);
+                overlayManager.updateHoverRect(adjustedRect);
+            },
+            'click': (e: Electron.IpcMessageEvent) => {
+                if (!e.args || e.args.length === 0) {
+                    console.error('No args found for mouseover event');
+                    return;
+                }
+
+                const sourceWebview = e.target as Electron.WebviewTag;
+                const elementMetadata: ElementMetadata = JSON.parse(e.args[0]);
+                const adjustedRect = overlayManager.adaptRectFromSourceElement(elementMetadata.rect, sourceWebview);
+                overlayManager.removeClickedRects();
+                overlayManager.addClickRect(adjustedRect, elementMetadata.computedStyle);
+            },
+            'wheel': (e: Electron.IpcMessageEvent) => {
+                if (!e.args || e.args.length === 0) {
+                    console.error('No args found for mouseover event');
+                    return;
+                }
+            },
+        };
+
+    }
+
+    handleIpcMessage(e: Electron.IpcMessageEvent) {
+        console.log('ipc-message', e);
+        const eventHandler = this.eventCallbackMap[e.channel]
+        if (!eventHandler) {
+            console.error(`No event handler found for ${e.channel}`);
+            return;
+        }
+        eventHandler(e);
+    }
+
+    handleConsoleMessage(e: Electron.ConsoleMessageEvent) {
+        console.log(`%c ${e.message}`, 'background: #000; color: #AAFF00');
+    }
+}
+