@lvce-editor/main-process 1.0.3

package/pages/quickpick/QuickPickElements.js

@@ -0,0 +1,12 @@
+/**
+ * @type {HTMLElement}
+ */
+// @ts-ignore
+const $QuickPickItems = document.getElementById('QuickPickItems')
+/**
+ * @type {HTMLInputElement}
+ */
+// @ts-ignore
+const $QuickPickInput = document.getElementById('QuickPickInput')
+
+export { $QuickPickInput, $QuickPickItems }

package/pages/quickpick/QuickPickEvents.js

@@ -0,0 +1,88 @@
+import * as RendererWorker from './QuickPickIpc.js'
+import * as KeyBindings from './QuickPickKeyBindings.js'
+
+export const handleBeforeInput = (event) => {
+  event.preventDefault()
+  const { target, inputType, data } = event
+  const { selectionStart, selectionEnd } = target
+  RendererWorker.send(
+    /* method */ 'QuickPick.handleBeforeInput',
+    /* inputType */ inputType,
+    /* data */ data,
+    /* selectionStart */ selectionStart,
+    /* selectionEnd */ selectionEnd,
+  )
+}
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const getItem = ($Target) => {
+  switch ($Target.className) {
+    case 'QuickPickItem':
+      return $Target
+    default:
+      return $Target.parentNode
+  }
+}
+
+export const handleMouseDown = (event) => {
+  event.preventDefault()
+  const { target } = event
+  const $Item = getItem(target)
+  const index = getNodeIndex($Item)
+  console.log({ $Item, index })
+  RendererWorker.send(/* selectIndex */ 'QuickPick.selectIndex', /* index */ index)
+}
+
+const getIdentifier = (event) => {
+  let identifier = ''
+  if (event.ctrlKey) {
+    identifier += 'ctrl+'
+  }
+  if (event.shiftKey) {
+    identifier += 'shift+'
+  }
+  if (event.altKey) {
+    identifier += 'alt+'
+  }
+  let { key } = event
+  if (key === ' ') {
+    key = 'Space'
+  }
+  if (key.length === 1) {
+    key = key.toLowerCase()
+  }
+  identifier += key
+  return identifier
+}
+
+const matchesIdentifier = (keyBinding, identifier) => {
+  return keyBinding.key === identifier
+}
+
+const getMatchingKeyBinding = (keyBindings, identifier) => {
+  for (const keyBinding of keyBindings) {
+    if (matchesIdentifier(keyBinding, identifier)) {
+      return keyBinding
+    }
+  }
+  return undefined
+}
+
+export const handleKeyDown = (event) => {
+  const keyBindings = KeyBindings.getKeyBindings()
+  const identifier = getIdentifier(event)
+  const matchingKeyBinding = getMatchingKeyBinding(keyBindings, identifier)
+  if (!matchingKeyBinding) {
+    return
+  }
+  event.preventDefault()
+  const { command } = matchingKeyBinding
+  RendererWorker.send(command)
+}

package/pages/quickpick/QuickPickFunctions.js

@@ -0,0 +1,54 @@
+import { $QuickPickInput, $QuickPickItems } from './QuickPickElements.js'
+import * as KeyBindings from './QuickPickKeyBindings.js'
+
+const activeId = 'QuickPickItemActive'
+
+const create$Item = (item) => {
+  const $QuickPickItemIcon = document.createElement('div')
+  $QuickPickItemIcon.className = 'QuickPickItemIcon'
+  const $QuickPickItemLabel = document.createElement('div')
+  $QuickPickItemLabel.className = 'Label'
+  $QuickPickItemLabel.textContent = item.label
+
+  const $QuickPickItem = document.createElement('div')
+  $QuickPickItem.className = 'QuickPickItem'
+  $QuickPickItem.append($QuickPickItemIcon, $QuickPickItemLabel)
+
+  return $QuickPickItem
+}
+export const setVisiblePicks = (items) => {
+  $QuickPickItems.replaceChildren(...items.map(create$Item))
+}
+
+export const setValue = (value) => {
+  $QuickPickInput.value = value
+}
+
+export const setCursorOffset = (cursorOffset) => {
+  $QuickPickInput.selectionStart = cursorOffset
+  $QuickPickInput.selectionEnd = cursorOffset
+}
+
+export const setFocusedIndex = (oldFocusedIndex, newFocusedIndex) => {
+  if (oldFocusedIndex >= 0) {
+    const $OldItem = $QuickPickItems.children[oldFocusedIndex]
+    if ($OldItem) {
+      $OldItem.removeAttribute('id')
+    }
+  }
+  if (newFocusedIndex >= 0) {
+    const $NewItem = $QuickPickItems.children[newFocusedIndex]
+    if ($NewItem) {
+      $NewItem.id = activeId
+      $QuickPickInput.setAttribute('aria-activedescendant', activeId)
+    }
+  }
+}
+
+export const setItemsHeight = () => {
+  // not implemented
+}
+
+export const setKeyBindings = (keyBindings) => {
+  KeyBindings.setKeyBindings(keyBindings)
+}

package/pages/quickpick/QuickPickIpc.js

@@ -0,0 +1,36 @@
+export const state = {
+  /**
+   * @type {MessagePort|undefined}
+   */
+  port: undefined,
+}
+
+export const send = (method, ...params) => {
+  if (!state.port) {
+    return
+  }
+  state.port.postMessage({
+    jsonrpc: '2.0',
+    method,
+    params,
+  })
+}
+
+const getPort = (type) => {
+  return new Promise((resolve, reject) => {
+    const handleMessageFromWindow = (event) => {
+      const port = event.ports[0]
+      resolve(port)
+    }
+    // @ts-ignore
+    window.addEventListener('message', handleMessageFromWindow, {
+      once: true,
+    })
+  })
+}
+
+export const initialize = async () => {
+  const port = await getPort('quickpick-browserview')
+  state.port = port
+  return port
+}

package/pages/quickpick/QuickPickKeyBindings.js

@@ -0,0 +1,13 @@
+export const state = {
+  /**
+   * @type {any[]}
+   */
+  keyBindings: [],
+}
+
+export const setKeyBindings = (keyBindings) => {
+  state.keyBindings = keyBindings
+}
+export const getKeyBindings = () => {
+  return state.keyBindings
+}

package/pages/quickpick/preload.js

@@ -0,0 +1,9 @@
+const { ipcRenderer } = require('electron')
+
+const handlePort = (event) => {
+  const port = event.ports[0]
+  // console.log('[preload] got port', port)
+  window.postMessage('abc', '*', [port])
+}
+
+ipcRenderer.on('port', handlePort)

package/pages/quickpick/quickpick.html

@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>QuickPick</title>
+    <style>
+      :root {
+        --QuickPickBackground: rgb(40, 46, 47);
+        --FocusOutline: #3d5252;
+        --ListActiveSelectionBackground: #515f59;
+        --ListActiveSelectionForeground: #ffffff;
+        --ListHoverBackground: #405c5033;
+        --ListHoverForeground: #e0e0e0;
+        --ListForeground: rgb(156, 162, 160);
+      }
+      html,
+      body {
+        width: 100%;
+        overflow: hidden;
+        margin: 0;
+        cursor: default;
+      }
+
+      body {
+        font-family:
+          system-ui,
+          Ubuntu,
+          Droid Sans,
+          sans-serif;
+      }
+
+      #QuickPick {
+        padding: 0 1px 6px;
+        background: var(--QuickPickBackground);
+        color: var(--ListForeground);
+        box-sizing: border-box;
+        contain: content;
+        display: flex;
+        flex-direction: column;
+        row-gap: 4px;
+        pointer-events: all;
+        box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px 2px;
+      }
+
+      #QuickPickHeader {
+        /* width: 100%; */
+        display: flex;
+        /* margin: 6px 6px 0; */
+        padding: 6px 6px 0;
+        /* contain: strict; */
+        height: 30px;
+        contain: strict;
+        /* margin-bottom: -2px; */
+      }
+
+      .QuickPickItem {
+        display: flex;
+        white-space: nowrap;
+        align-items: center;
+        width: 100%;
+        height: 22px;
+        font-size: 13px;
+        margin: 0;
+        padding: 0 6px;
+        contain: strict;
+        gap: 4px;
+      }
+
+      .QuickPickItem:hover {
+        background: var(--ListHoverBackground);
+        color: var(--ListHoverForeground);
+      }
+
+      #QuickPickItemActive {
+        color: var(--ListActiveSelectionForeground);
+        background: var(--ListActiveSelectionBackground);
+      }
+
+      .InputBox {
+        width: 100%;
+        margin: 0;
+        border: none;
+        outline: none;
+        flex: 1;
+        background: var(--InputBoxBackground);
+        border: 1px solid rgb(55, 65, 63);
+        padding: 4px;
+        color: var(--InputBoxForeground);
+        font-size: 13px;
+        contain: strict;
+      }
+
+      .Label {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: inline-block;
+        white-space: nowrap;
+      }
+
+      #QuickPickItems {
+        color: white;
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
+    <script type="module" src="quickpick.js"></script>
+  </head>
+  <body>
+    <div id="QuickPick">
+      <div id="QuickPickHeader">
+        <input type="text" class="InputBox" id="QuickPickInput" spellcheck="false" autofocus />
+      </div>
+      <div id="QuickPickItems"></div>
+    </div>
+  </body>
+</html>

package/pages/quickpick/quickpick.js

@@ -0,0 +1,48 @@
+import * as QuickPickFunctions from './QuickPickFunctions.js'
+import * as QuickPickEvents from './QuickPickEvents.js'
+import * as QuickPickIpc from './QuickPickIpc.js'
+import { $QuickPickInput, $QuickPickItems } from './QuickPickElements.js'
+
+const executeCommand = (command) => {
+  const _0 = command[0]
+  const _1 = command[1]
+  const _2 = command[2]
+  if (_0 === 'Viewlet.create' || _0 === 'Viewlet.show') {
+    return
+  }
+  const args = command.slice(3)
+  const fn = QuickPickFunctions[_2]
+  fn(...args)
+}
+
+const executeCommands = (commands) => {
+  for (const command of commands) {
+    executeCommand(command)
+  }
+}
+
+const getFn = (method) => {
+  switch (method) {
+    case 'executeCommands':
+      return executeCommands
+    default:
+      throw new Error('method not found')
+  }
+}
+
+const handleMessage = (event) => {
+  const message = event.data
+  // console.log({ message })
+  const fn = getFn(message.method)
+  fn(message.params)
+}
+
+const main = async () => {
+  $QuickPickInput.addEventListener('beforeinput', QuickPickEvents.handleBeforeInput)
+  $QuickPickItems.onmousedown = QuickPickEvents.handleMouseDown
+  window.onkeydown = QuickPickEvents.handleKeyDown
+  const port = await QuickPickIpc.initialize()
+  port.onmessage = handleMessage
+}
+
+main()

package/pages/suggestions/Ipc.js

@@ -0,0 +1,36 @@
+export const state = {
+  /**
+   * @type {MessagePort|undefined}
+   */
+  port: undefined,
+}
+
+export const send = (method, ...params) => {
+  if (!state.port) {
+    return
+  }
+  state.port.postMessage({
+    jsonrpc: '2.0',
+    method,
+    params,
+  })
+}
+
+const getPort = (type) => {
+  return new Promise((resolve, reject) => {
+    const handleMessageFromWindow = (event) => {
+      const port = event.ports[0]
+      resolve(port)
+    }
+    // @ts-ignore
+    window.addEventListener('message', handleMessageFromWindow, {
+      once: true,
+    })
+  })
+}
+
+export const initialize = async () => {
+  const port = await getPort('quickpick-browserview')
+  state.port = port
+  return port
+}

package/pages/suggestions/preload.js

@@ -0,0 +1,9 @@
+const { ipcRenderer } = require('electron')
+
+const handlePort = (event) => {
+  const port = event.ports[0]
+  // console.log('[preload] got port', port)
+  window.postMessage('abc', '*', [port])
+}
+
+ipcRenderer.on('port', handlePort)

package/pages/suggestions/suggestions.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      body {
+        background: white;
+      }
+    </style>
+    <script type="module" src="suggestions.js"></script>
+  </head>
+  <body></body>
+</html>

package/pages/suggestions/suggestions.js

@@ -0,0 +1,8 @@
+import * as Ipc from './Ipc.js'
+
+const main = async () => {
+  const port = await Ipc.initialize()
+  console.log({ port })
+}
+
+main()