@lvce-editor/server 0.0.2

package/static/1914fad/packages/renderer-process/src/parts/EditorGroup/EditorGroup.js

@@ -0,0 +1,55 @@
+import * as Editor from '../Editor/Editor.js'
+import * as EditorHelper from '../Editor/EditorHelper.js'
+import * as EditorTabs from '../EditorTab/EditorTab.js'
+import * as Layout from '../Layout/Layout.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+const handleEditorTabsContextMenu = (event) => {
+  event.preventDefault()
+  const x = event.clientX
+  const y = event.clientY
+  RendererWorker.send([
+    /* editorTabsHandleContextMenu */ 95,
+    /* x */ x,
+    /* y */ y,
+  ])
+}
+
+export const create = () => {
+  const $EditorTabs = EditorTabs.create()
+
+  const $Editors = document.createElement('div')
+  $Editors.className = 'Editors'
+
+  // TODO create should not have side effect of mounting
+  // TODO this causes 2 times layout (when also calling add after)
+  Layout.state.$Main.append($EditorTabs, $Editors)
+  return {
+    $EditorTabs,
+    $Editors,
+  }
+}
+
+export const addOne = (state, id, uri, languageId) => {
+  EditorTabs.addOne(state.$EditorTabs, id, uri, languageId)
+  // const $Editor = EditorController.create(id)
+  // const $EditorTab = EditorTabsController.create(id, uri, languageId)
+  // TODO should call addOne as well
+  const editorState = Editor.create()
+  EditorHelper.setState(id, editorState)
+  Editor.mount(editorState, state.$Editors)
+  return editorState
+}
+
+export const replaceOne = (state, id, uri, languageId) => {
+  console.log('replace one')
+  EditorTabs.addOne(state.$EditorTabs, id, uri, languageId)
+}
+
+// TODO remove single tab
+export const removeOne = (state, index) => {
+  // EditorTabs.removeOne(state.$EditorTabs, index)
+  // Editor.removeOne(state.$Editors, index)
+  state.$Editors.remove()
+  state.$EditorTabs.remove()
+}

package/static/1914fad/packages/renderer-process/src/parts/EditorHover/EditorHover.ipc.js

@@ -0,0 +1,6 @@
+import * as Command from '../Command/Command.js'
+import * as EditorHover from './EditorHover.js'
+
+export const __initialize__ = () => {
+  Command.register(6216, EditorHover.create)
+}

package/static/1914fad/packages/renderer-process/src/parts/EditorHover/EditorHover.js

@@ -0,0 +1,22 @@
+import * as Widget from '../Widget/Widget.js'
+
+export const create = (x, y, hover) => {
+  const $Hover = document.createElement('div')
+  $Hover.id = 'EditorHover'
+  $Hover.textContent = hover.label
+  $Hover.style.left = `${x}px`
+  $Hover.style.top = `${y}px`
+  Widget.append($Hover)
+  return {
+    $Hover,
+  }
+}
+
+export const update = (state, x, y, hover) => {
+  const $Hover = state.$Hover
+  $Hover.textContent = hover.label
+  $Hover.style.left = `${x}px`
+  $Hover.style.top = `${y}px`
+}
+
+export const dispose = (state) => {}

package/static/1914fad/packages/renderer-process/src/parts/EditorRename/EditorRename.ipc.js

@@ -0,0 +1,8 @@
+import * as Command from '../Command/Command.js'
+import * as EditorRename from './EditorRename.js'
+
+export const __initialize__ = () => {
+  Command.register(4512, EditorRename.create)
+  Command.register(4513, EditorRename.finish)
+  Command.register(4514, EditorRename.dispose)
+}

package/static/1914fad/packages/renderer-process/src/parts/EditorRename/EditorRename.js

@@ -0,0 +1,39 @@
+import * as Widget from '../Widget/Widget.js'
+import * as InputBox from '../InputBox/InputBox.js'
+import * as Focus from '../Focus/Focus.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+const handleBlur = () => {
+  RendererWorker.send([/* EditorRename.abort */ 3302])
+}
+
+export const create = (x, y) => {
+  const $RenameWidgetInputBox = InputBox.create()
+  $RenameWidgetInputBox.className = 'RenameWidgetInputBox'
+  $RenameWidgetInputBox.onblur = handleBlur
+  const $RenameWidget = document.createElement('div')
+  $RenameWidget.className = 'RenameWidget'
+  $RenameWidget.append($RenameWidgetInputBox)
+  $RenameWidget.style.left = `${x}px`
+  $RenameWidget.style.top = `${y}px`
+  Widget.append($RenameWidget)
+  Focus.focus($RenameWidgetInputBox, 'editorRename')
+  return {
+    $RenameWidget,
+    $RenameWidgetInputBox,
+  }
+}
+
+export const dispose = (state) => {
+  // TODO focus editor
+  Widget.remove(state.$RenameWidget)
+}
+
+// TODO could also be event based
+// finish -> finish -> finishWithValue
+
+export const finish = (state) => {
+  const value = state.$RenameWidgetInputBox.value
+  // TODO don't like side effect here
+  return value
+}

package/static/1914fad/packages/renderer-process/src/parts/EditorTab/EditorTab.js

@@ -0,0 +1,128 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+// TODO windows
+const getFileName = (uri) => {
+  return uri.slice(uri.lastIndexOf('/') + 1)
+}
+
+const handleEditorTabsContextMenu = (event) => {
+  event.preventDefault()
+  const x = event.clientX
+  const y = event.clientY
+  RendererWorker.send([
+    /* editorTabsHandleContextMenu */ 95,
+    /* x */ x,
+    /* y */ y,
+  ])
+}
+
+/**
+ * @param {MouseEvent} event
+ */
+const handleMouseDown = (event) => {
+  event.preventDefault()
+  const $Target = event.target
+  console.log({ $Target })
+  // TODO if middle click -> close tab
+  // else if tab is not focused -> focus tab
+  // else noop
+  switch (event.button) {
+    case 0:
+      console.log('left click')
+      break
+    case 1:
+      RendererWorker.send([/* Main.closeEditor */ 99])
+      break
+    default:
+      break
+  }
+}
+
+export const create = () => {
+  const $EditorTabs = document.createElement('ul')
+  $EditorTabs.className = 'EditorTabs'
+  $EditorTabs.oncontextmenu = handleEditorTabsContextMenu
+  $EditorTabs.onmousedown = handleMouseDown
+  return $EditorTabs
+}
+
+const create$Tab = () => {
+  const $Tab = document.createElement('li')
+  $Tab.setAttribute('role', 'tab')
+  $Tab.className = 'EditorTab'
+  $Tab.ariaSelected = 'true'
+  $Tab.tabIndex = 0
+  // Set aria-description to empty string so that screen readers don't read title as well
+  // More details https://github.com/microsoft/vscode/issues/95378
+  $Tab.setAttribute('aria-description', '')
+  const $TabLabel = document.createElement('span')
+  return $Tab
+}
+
+const render$Tab = ($Tab, id, uri, languageId) => {
+  const fileName = getFileName(uri)
+  $Tab.textContent = fileName
+  $Tab.title = uri
+  $Tab.dataset.languageId = languageId
+  $Tab.dataset.fileName = fileName
+}
+
+// const render$TabsLess = ($Tabs, tabs) => {
+//   for (let i = 0; i < $Tabs.children.length; i++) {
+//     render$Tab($Tabs.children[i], tabs[i])
+//   }
+//   const fragment = document.createDocumentFragment()
+//   for (let i = $Tabs.children.length; i < tabs.length; i++) {
+//     const $Tab = create$Tab()
+//     render$Tab($Tab, tabs[i])
+//     fragment.append($Tab)
+//   }
+//   $Tabs.append(fragment)
+// }
+
+// const render$TabsEqual = ($Tabs, tabs) => {
+//   for (let i = 0; i < tabs.length; i++) {
+//     render$Tab($Tabs.children[i], tabs[i])
+//   }
+// }
+
+// const render$TabsMore = ($Tabs, tabs) => {
+//   for (let i = 0; i < tabs.length; i++) {
+//     render$Tab($Tabs.children[i], tabs[i])
+//   }
+//   const diff = $Tabs.children.length - tabs.length
+//   for (let i = 0; i < diff; i++) {
+//     $Tabs.lastChild.remove()
+//   }
+// }
+
+// const render$Tabs = ($Tabs, tabs) => {
+//   if ($Tabs.children.length < tabs.length) {
+//     render$TabsLess($Tabs, tabs)
+//   } else if ($Tabs.children.length === tabs.length) {
+//     render$TabsEqual($Tabs, tabs)
+//   } else {
+//     render$TabsMore($Tabs, tabs)
+//   }
+// }
+
+// export const setTabs = (state, tabs) => {
+//   render$Tabs(state.$EditorTabs, tabs)
+// }
+
+export const addOne = ($EditorTabs, id, uri, languageId) => {
+  const $EditorTab = create$Tab()
+  render$Tab($EditorTab, id, uri, languageId)
+  $EditorTabs.append($EditorTab)
+}
+
+// TODO should pass index as well
+export const replaceOne = ($EditorTabs, id, uri, languageId) => {
+  render$Tab($EditorTabs.firstChild, id, uri, languageId)
+}
+
+export const removeOne = ($EditorTabs, index) => {
+  $EditorTabs.firstChild.remove()
+  // const $EditorTab = $EditorTabs.children[index]
+  // $EditorTab.remove()
+}

package/static/1914fad/packages/renderer-process/src/parts/FindWidget/FindWidget.ipc.js

@@ -0,0 +1,8 @@
+import * as Command from '../Command/Command.js'
+import * as FindWidget from './FindWidget.js'
+
+export const __initialize__ = () => {
+  Command.register(4100, FindWidget.create)
+  Command.register(4102, FindWidget.dispose)
+  Command.register(4103, FindWidget.setResults)
+}

package/static/1914fad/packages/renderer-process/src/parts/FindWidget/FindWidget.js

@@ -0,0 +1,56 @@
+import * as Focus from '../Focus/Focus.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+const handleInput = (event) => {
+  const $Target = event.target
+  const value = $Target.value
+  RendererWorker.send([/* FindWidget.setValue  */ 4101, /* value */ value])
+}
+
+const handleClose = (event) => {
+  RendererWorker.send([/* FindWidget.dispose  */ 4102])
+}
+
+const handleFocus = (event) => {
+  Focus.setFocus('findWidget')
+}
+
+export const create = (id) => {
+  const $FindWidgetInput = document.createElement('input')
+  $FindWidgetInput.className = 'FindWidgetInput'
+  $FindWidgetInput.oninput = handleInput
+  $FindWidgetInput.onfocus = handleFocus
+  // $FindWidgetInput.onblur = handleBlur
+  const $FindWidgetButtonClose = document.createElement('button')
+  $FindWidgetButtonClose.textContent = 'close'
+  $FindWidgetButtonClose.onclick = handleClose
+  const $FindWidget = document.createElement('div')
+  $FindWidget.className = 'FindWidget'
+  // $FindWidget.style.left = `${x}px`
+  // $FindWidget.style.top = `${y}px`
+  $FindWidget.dataset.widgetId = id
+  const $FindWidgetResults = document.createElement('div')
+  $FindWidgetResults.className = 'FindWidgetResults'
+  $FindWidget.append(
+    $FindWidgetInput,
+    $FindWidgetResults,
+    $FindWidgetButtonClose
+  )
+  const $Parent = document.querySelector('.OutputWidgets')
+  $Parent.append($FindWidget)
+  $FindWidgetInput.focus()
+  return {
+    $FindWidget,
+    $FindWidgetResults,
+    $FindWidgetInput,
+  }
+}
+
+export const dispose = (state) => {
+  state.$Viewlet.remove()
+}
+
+export const setResults = (state, results) => {
+  state.$FindWidgetResults.textContent =
+    results.length === 0 ? 'No Results' : `${results.length} results`
+}

package/static/1914fad/packages/renderer-process/src/parts/Focus/Focus.js

@@ -0,0 +1,50 @@
+import * as Context from '../Context/Context.js'
+
+// TODO not sure if its worth to have a separate module for this or keep it inside Context.js
+// export const setFocus = (item) => {
+//   if (Context.state.currentFocus) {
+//     Context.remove(Context.state.currentFocus)
+//   }
+//   Context.set(`focus.${item}`, true)
+// }
+
+export const state = {
+  $PreviousFocusElement: undefined,
+  currentFocus: '',
+}
+
+export const setFocus = (key) => {
+  if (state.currentFocus) {
+    Context.remove(state.currentFocus)
+  }
+  // TODO could make focus key numeric enum which would be more efficient
+  state.currentFocus = `focus.${key}`
+  Context.set(state.currentFocus, true)
+}
+
+export const setAdditionalFocus = (key) => {
+  // TODO key should be numeric
+  Context.set(`focus.${key}`, true)
+}
+
+export const removeAdditionalFocus = (key) => {
+  Context.remove(`focus.${key}`)
+}
+
+export const focus = ($Element, key) => {
+  if ($Element === document.activeElement) {
+    console.log('focus return')
+    return
+  }
+  console.log(state.$PreviousFocusElement)
+  state.$PreviousFocusElement = document.activeElement
+  $Element.focus({ preventScroll: true })
+  setFocus(key)
+}
+
+export const focusPrevious = () => {
+  if (state.$PreviousFocusElement) {
+    console.log(state.$PreviousFocusElement)
+    state.$PreviousFocusElement.focus()
+  }
+}

package/static/1914fad/packages/renderer-process/src/parts/FocusHighlight/FocusHighlight.js

@@ -0,0 +1,12 @@
+export const highlightStart = ($Element) => {
+  $Element.classList.remove('Highlight')
+  requestAnimationFrame(() => {
+    $Element.classList.add('Highlight')
+  })
+
+  $Element.onanimationend = () => {
+    $Element.classList.remove('Highlight')
+  }
+}
+
+export const highlightStop = () => {}

package/static/1914fad/packages/renderer-process/src/parts/GlobalEventBus/GlobalEventBus.js

@@ -0,0 +1,26 @@
+// TODO global event bus is probably a bad idea
+// cons:
+// 1. it is not typesafe
+// 2. dependencies are unclear
+//
+// pros
+// 1. it decouples event emitter (e.g. Editor creation) from other module (Document syncing when editor was created)
+
+export const state = {
+  listenerMap: Object.create(null),
+}
+
+export const emitEvent = (event, ...args) => {
+  const listeners = state.listenerMap[event] || []
+  for (const listener of listeners) {
+    listener(...args)
+  }
+}
+
+export const addListener = (event, fn) => {
+  state.listenerMap[event] ||= []
+  if (state.listenerMap[event].includes(fn)) {
+    return
+  }
+  state.listenerMap[event].push(fn)
+}

package/static/1914fad/packages/renderer-process/src/parts/ImagePreview/ImagePreview.ipc.js

@@ -0,0 +1,9 @@
+import * as Command from '../Command/Command.js'
+import * as ImagePreview from './ImagePreview.js'
+
+export const __initialize__ = () => {
+  Command.register(3666, ImagePreview.create)
+  Command.register(3667, ImagePreview.dispose)
+  Command.register(3668, ImagePreview.update)
+  Command.register(3669, ImagePreview.showError)
+}

package/static/1914fad/packages/renderer-process/src/parts/ImagePreview/ImagePreview.js

@@ -0,0 +1,69 @@
+import * as Widget from '../Widget/Widget.js'
+
+const handleImageLoad = (event) => {
+  const $ImagePreviewImage = event.target
+  const $ImagePreviewCaption = $ImagePreviewImage.nextSibling
+  const width = $ImagePreviewImage.naturalWidth
+  const height = $ImagePreviewImage.naturalHeight
+  $ImagePreviewCaption.textContent = `${width} × ${height}`
+}
+
+const handleImageError = (event) => {
+  const $ImagePreviewImage = event.target
+  const $ImagePreviewCaption = $ImagePreviewImage.nextSibling
+  $ImagePreviewCaption.textContent = 'Image could not be loaded'
+}
+
+// TODO duplicate code with below
+
+export const showError = (message, top, left) => {
+  const $ImagePreviewImage = document.createElement('img')
+  $ImagePreviewImage.className = 'ImagePreviewImage'
+  $ImagePreviewImage.alt = ''
+  const $ImagePreviewCaption = document.createElement('figcaption')
+  $ImagePreviewCaption.className = 'ImagePreviewCaption'
+  $ImagePreviewCaption.textContent = message
+  const $ImagePreview = document.createElement('figure')
+  $ImagePreview.className = 'ImagePreview'
+  $ImagePreview.append($ImagePreviewImage, $ImagePreviewCaption)
+  $ImagePreview.style.top = `${top}px`
+  $ImagePreview.style.left = `${left}px`
+  $ImagePreview.style.display = 'none'
+  Widget.append($ImagePreview)
+  return {
+    $ImagePreview,
+    $ImagePreviewCaption,
+    $ImagePreviewImage,
+  }
+}
+
+export const create = (uri, top, left) => {
+  const $ImagePreviewImage = document.createElement('img')
+  $ImagePreviewImage.className = 'ImagePreviewImage'
+  $ImagePreviewImage.src = uri
+  $ImagePreviewImage.alt = ''
+  const $ImagePreviewCaption = document.createElement('figcaption')
+  $ImagePreviewCaption.className = 'ImagePreviewCaption'
+  const $ImagePreview = document.createElement('figure')
+  $ImagePreview.className = 'ImagePreview'
+  $ImagePreview.append($ImagePreviewImage, $ImagePreviewCaption)
+  $ImagePreviewImage.onload = handleImageLoad
+  $ImagePreviewImage.onerror = handleImageError
+  $ImagePreview.style.top = `${top}px`
+  $ImagePreview.style.left = `${left}px`
+  $ImagePreview.style.display = 'none'
+  Widget.append($ImagePreview)
+  return {
+    $ImagePreview,
+    $ImagePreviewCaption,
+    $ImagePreviewImage,
+  }
+}
+
+export const update = (state, uri) => {
+  state.$ImagePreviewImage.uri = uri
+}
+
+export const dispose = (state) => {
+  Widget.remove(state.$ImagePreview)
+}

package/static/1914fad/packages/renderer-process/src/parts/InputBox/InputBox.js

@@ -0,0 +1,10 @@
+export const create = () => {
+  const $InputBox = document.createElement('input')
+  $InputBox.className = 'InputBox'
+  $InputBox.spellcheck = false
+  $InputBox.autocapitalize = 'off'
+  // $InputBox.autocomplete = 'off' // TODO needed?
+  $InputBox.type = 'text'
+  $InputBox.setAttribute('autocorrect', 'off') // for ios
+  return $InputBox
+}

package/static/1914fad/packages/renderer-process/src/parts/KeyBindings/KeyBindings.ipc.js

@@ -0,0 +1,7 @@
+import * as Command from '../Command/Command.js'
+import * as KeyBindings from './KeyBindings.js'
+
+export const __initialize__ = () => {
+  Command.register(755, KeyBindings.hydrate)
+  // Command.register(756, KeyBindings.setKeyBindings)
+}

package/static/1914fad/packages/renderer-process/src/parts/KeyBindings/KeyBindings.js

@@ -0,0 +1,164 @@
+import * as Context from '../Context/Context.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as Platform from '../Platform/Platform.js'
+
+const RE_ASCII = /[\p{ASCII}]+/u
+
+export const state = {
+  keyBindings: [],
+  modifier: '',
+  modifierTimeout: -1,
+}
+
+const isAscii = (key) => {
+  return RE_ASCII.test(key)
+}
+
+const getIdentifier = (event) => {
+  let identifier = ''
+  if (event.ctrlKey) {
+    identifier += 'ctrl+'
+  }
+  if (event.shiftKey) {
+    identifier += 'shift+'
+  }
+  if (event.altKey) {
+    identifier += 'alt+'
+  }
+  let key = event.key
+  if (key === ' ') {
+    key = 'Space'
+  }
+  if (key.length === 1) {
+    key = key.toLowerCase()
+  }
+  identifier += key
+  return identifier
+}
+
+// TODO store keybindings as json somewhere
+
+// TODO sort keybindings by `when` priority -> focus.editorCompletions: 10, focus.editor:9 etc.
+
+// TODO does it make sense to have all of these configurable?
+// could remove some context logic and have less user configuration when these are default
+// e.g. arrow down focuses next, arrow up always focuses previous item (like in aria spec)
+
+// TODO ui should only have keys -> commands get resolved inside renderer worker
+// TODO should toggle terminal, not only open
+
+const matchesContext = (keybinding) => {
+  if (!keybinding.when) {
+    return true
+  }
+  return Context.get(keybinding.when)
+}
+
+const getMatchingKeyBinding = (identifier) => {
+  // TODO this could be more efficient in O(N) instead of O(2N)
+  const matchesIdentifier = (keyBinding) => {
+    return keyBinding.key === identifier
+  }
+  const matchingKeyBindings = state.keyBindings.filter(matchesIdentifier)
+  const matchingKeyBinding = matchingKeyBindings.find(matchesContext)
+  return matchingKeyBinding
+}
+
+const getModifier = (event) => {
+  switch (event.key) {
+    case 'Control':
+      return 'ctrl'
+    case 'Shift':
+      return 'shift'
+    case 'Alt':
+      return 'alt'
+  }
+  return ''
+}
+
+const clearModifier = () => {
+  if (!state.modifier) {
+    return
+  }
+  if (state.modifierTimeout !== -1) {
+    clearTimeout(state.modifierTimeout)
+    state.modifier = ''
+    state.modifierTimeout = -1
+  }
+}
+
+const handleMatchingKeyBinding = (matchingKeyBinding) => {
+  // TODO execute command directly or -> executeCommand -> keybindings -> executeCommand
+  // better directly
+  // TODO always should be number
+  // when launching keybindings -> map string command to number
+  if (typeof matchingKeyBinding.command === 'number') {
+    if (matchingKeyBinding.command === -1) {
+      console.warn('keybinding not fully specified', matchingKeyBinding)
+      return
+    }
+    RendererWorker.send([
+      /* command */ matchingKeyBinding.command,
+      // TODO should args always be defined? (probably yes -> monomorphism & simpler code since all objects are the same)
+      ...(matchingKeyBinding.args || []),
+    ])
+  } else if (typeof matchingKeyBinding.command === 'string') {
+    // TODO matchingKeyBinding.command should always be number
+    RendererWorker.send([
+      /* KeyBindings.handleKeyBinding */ 1422,
+      /* keyBinding */ matchingKeyBinding,
+    ])
+  }
+}
+
+const handleKeyDown = (event) => {
+  const identifier = getIdentifier(event)
+  const matchingKeyBinding = getMatchingKeyBinding(identifier)
+  if (!matchingKeyBinding) {
+    return
+  }
+  event.preventDefault()
+  handleMatchingKeyBinding(matchingKeyBinding)
+}
+
+const handleKeyUp = (event) => {
+  const modifier = getModifier(event)
+  if (!modifier) {
+    clearModifier()
+    return
+  }
+  if (state.modifier === modifier) {
+    clearModifier()
+    const identifier = `${modifier} ${modifier}`
+    const matchingKeyBinding = getMatchingKeyBinding(identifier)
+    if (matchingKeyBinding) {
+      handleMatchingKeyBinding(matchingKeyBinding)
+    }
+    return
+  }
+
+  state.modifier = modifier
+  // @ts-ignore
+  state.modifierTimeout = setTimeout(clearModifier, 300)
+}
+
+export const hydrate = async (keyBindings) => {
+  // TODO is this the right place for browser context ?
+  // maybe in env file / env service
+  const browser = Platform.getBrowser()
+  Context.set(`browser.${browser}`, true)
+  state.keyBindings = keyBindings
+  window.addEventListener('keydown', handleKeyDown)
+  // TODO only need keyup listener if keybindings include double modifier key (e.g "shift shift")
+  window.addEventListener('keyup', handleKeyUp)
+}
+
+// TODO should be in renderer worker
+export const lookupKeyBinding = (commandId) => {
+  switch (commandId) {
+    case 'scm.acceptInput':
+      return 'Ctrl+Enter'
+    default:
+      return ''
+  }
+}