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');
+ }
+}
+