@lvce-editor/server 0.5.0 → 0.6.0

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/ViewletKeyBindings/ViewletKeyBindingsEvents.js

@@ -8,17 +8,18 @@ export const handleInput = (event) => {
 }
 
 export const handleWheel = (event) => {
-  switch (event.deltaMode) {
+  const { deltaMode, deltaY } = event
+  switch (deltaMode) {
     case WheelEventType.DomDeltaLine:
       RendererWorker.send(
         /* ViewletKeyBindings.handleWheel */ 'KeyBindings.handleWheel',
-        /* deltaY */ event.deltaY
+        /* deltaY */ deltaY
       )
       break
     case WheelEventType.DomDeltaPixel:
       RendererWorker.send(
         /* ViewletKeyBindings.handleWheel */ 'KeyBindings.handleWheel',
-        /* deltaY */ event.deltaY
+        /* deltaY */ deltaY
       )
       break
     default:

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/ViewletMain/ViewletMain.js

@@ -1,28 +1,14 @@
 import * as EditorGroup from '../EditorGroup/EditorGroup.js'
 import * as Layout from '../Layout/Layout.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as Viewlet from '../Viewlet/Viewlet.js'
-import * as MouseEventType from '../MouseEventType/MouseEventType.js'
-
-const handleDragOver = (event) => {
-  event.preventDefault()
-  Layout.state.$Main.classList.add('DropTarget')
-}
-
-const handleDrop = async (event) => {
-  console.log('[main] drop')
-  event.preventDefault()
-  Layout.state.$Main.classList.remove('DropTarget')
-  RendererWorker.send(/* handleDrop */ 'Main.handleDrop')
-}
+import * as ViewletMainEvents from './ViewletMainEvents.js'
 
 const create$MainTabs = () => {
   const $MainTabs = document.createElement('div')
   $MainTabs.className = 'MainTabs'
   // @ts-ignore
   $MainTabs.role = 'tablist'
-  $MainTabs.onmousedown = handleTabsMouseDown
-  $MainTabs.oncontextmenu = handleTabsContextMenu
+  $MainTabs.onmousedown = ViewletMainEvents.handleTabsMouseDown
+  $MainTabs.oncontextmenu = ViewletMainEvents.handleTabsContextMenu
   // TODO race condition: what if tab has already been closed?
   return $MainTabs
 }
@@ -30,8 +16,8 @@ const create$MainTabs = () => {
 // TODO Main should not be bound to Editor -> Lazy load Editor
 export const create = () => {
   const $Main = Layout.state.$Main
-  $Main.ondrop = handleDrop
-  $Main.ondragover = handleDragOver
+  $Main.ondrop = ViewletMainEvents.handleDrop
+  $Main.ondragover = ViewletMainEvents.handleDragOver
 
   // const $MainContent = document.createElement('div')
   // $MainContent.id = 'MainContent'
@@ -102,89 +88,6 @@ export const focus = () => {
   console.log('todo focus main')
 }
 
-const getNodeIndex = ($Node) => {
-  let index = 0
-  while (($Node = $Node.previousElementSibling)) {
-    index++
-  }
-  return index
-}
-
-const getIndex = ($Target) => {
-  switch ($Target.className) {
-    case 'EditorTabCloseButton':
-      return getNodeIndex($Target.parentNode)
-    case 'MainTab':
-      return getNodeIndex($Target)
-    default:
-      return -1
-  }
-}
-
-const handleTabCloseButtonMouseDown = (event, index) => {
-  RendererWorker.send(
-    /* Main.closeEditor */ 'Main.closeEditor',
-    /* index */ index
-  )
-}
-
-const handleTabMouseDown = (event, index) => {
-  switch (event.button) {
-    case MouseEventType.LeftClick:
-      RendererWorker.send(
-        /* Main.handleTabClick */ 'Main.handleTabClick',
-        /* index */ index
-      )
-      break
-    case MouseEventType.MiddleClick:
-      RendererWorker.send(
-        /* Main.closeEditor */ 'Main.closeEditor',
-        /* index */ index
-      )
-      break
-    case MouseEventType.RightClick:
-      break
-    default:
-      break
-  }
-}
-
-const handleTabsMouseDown = (event) => {
-  const $Target = event.target
-  const index = getIndex($Target)
-  if (index === -1) {
-    return
-  }
-  event.preventDefault()
-  switch ($Target.className) {
-    case 'EditorTabCloseButton':
-      handleTabCloseButtonMouseDown(event, index)
-      break
-    case 'MainTab':
-      handleTabMouseDown(event, index)
-      break
-    default:
-      break
-  }
-}
-
-const handleTabsContextMenu = (event) => {
-  const $Target = event.target
-  const index = getIndex($Target)
-  if (index === -1) {
-    return
-  }
-  event.preventDefault()
-  const x = event.clientX
-  const y = event.clientY
-  RendererWorker.send(
-    /* Main.handleTabContextMenu */ 'Main.handleTabContextMenu',
-    /* index */ index,
-    /* x */ x,
-    /* y */ y
-  )
-}
-
 export const openViewlet = (state, tabLabel, tabTitle, oldActiveIndex) => {
   const $Tab = document.createElement('div')
   $Tab.className = 'MainTab'

package/static/fbac85f/packages/renderer-process/src/parts/ViewletMain/ViewletMainEvents.js

@@ -0,0 +1,100 @@
+import * as EditorGroup from '../EditorGroup/EditorGroup.js'
+import * as Layout from '../Layout/Layout.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as Viewlet from '../Viewlet/Viewlet.js'
+import * as MouseEventType from '../MouseEventType/MouseEventType.js'
+
+export const handleDragOver = (event) => {
+  event.preventDefault()
+  Layout.state.$Main.classList.add('DropTarget')
+}
+
+export const handleDrop = async (event) => {
+  console.log('[main] drop')
+  event.preventDefault()
+  Layout.state.$Main.classList.remove('DropTarget')
+  RendererWorker.send(/* handleDrop */ 'Main.handleDrop')
+}
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const getIndex = ($Target) => {
+  switch ($Target.className) {
+    case 'EditorTabCloseButton':
+      return getNodeIndex($Target.parentNode)
+    case 'MainTab':
+      return getNodeIndex($Target)
+    default:
+      return -1
+  }
+}
+
+export const handleTabCloseButtonMouseDown = (event, index) => {
+  RendererWorker.send(
+    /* Main.closeEditor */ 'Main.closeEditor',
+    /* index */ index
+  )
+}
+
+export const handleTabMouseDown = (event, index) => {
+  switch (event.button) {
+    case MouseEventType.LeftClick:
+      RendererWorker.send(
+        /* Main.handleTabClick */ 'Main.handleTabClick',
+        /* index */ index
+      )
+      break
+    case MouseEventType.MiddleClick:
+      RendererWorker.send(
+        /* Main.closeEditor */ 'Main.closeEditor',
+        /* index */ index
+      )
+      break
+    case MouseEventType.RightClick:
+      break
+    default:
+      break
+  }
+}
+
+export const handleTabsMouseDown = (event) => {
+  const $Target = event.target
+  const index = getIndex($Target)
+  if (index === -1) {
+    return
+  }
+  event.preventDefault()
+  switch ($Target.className) {
+    case 'EditorTabCloseButton':
+      handleTabCloseButtonMouseDown(event, index)
+      break
+    case 'MainTab':
+      handleTabMouseDown(event, index)
+      break
+    default:
+      break
+  }
+}
+
+export const handleTabsContextMenu = (event) => {
+  const $Target = event.target
+  const index = getIndex($Target)
+  if (index === -1) {
+    return
+  }
+  event.preventDefault()
+  const x = event.clientX
+  const y = event.clientY
+  RendererWorker.send(
+    /* Main.handleTabContextMenu */ 'Main.handleTabContextMenu',
+    /* index */ index,
+    /* x */ x,
+    /* y */ y
+  )
+}

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/ViewletModule/ViewletModule.js

@@ -54,6 +54,8 @@ export const load = (moduleId) => {
       return import('../ViewletEditorPlainText/ViewletEditorPlainText.js')
     case ViewletModuleId.KeyBindings:
       return import('../ViewletKeyBindings/ViewletKeyBindings.js')
+    case ViewletModuleId.EditorFindWidget:
+      return import('../ViewletEditorFindWidget/ViewletEditorFindWidget.js')
     default:
       throw new Error('unknown module')
   }

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/ViewletModuleId/ViewletModuleId.js

@@ -49,3 +49,5 @@ export const StatusBar = 'StatusBar'
 export const Terminal = 'Terminal'
 
 export const TitleBar = 'TitleBar'
+
+export const EditorFindWidget = 'EditorFindWidget'

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/ViewletOutput/ViewletOutput.js

@@ -1,6 +1,7 @@
 import * as RendererWorker from '../RendererWorker/RendererWorker.js'
 import * as Focus from '../Focus/Focus.js'
 import * as Assert from '../Assert/Assert.js'
+import * as ViewletOutputEvents from './ViewletOutputEvents.js'
 
 const create$Option = (option) => {
   const $Option = document.createElement('option')
@@ -12,21 +13,10 @@ const create$Option = (option) => {
 // TODO name export not necessary
 export const name = 'Output'
 
-const handleChange = (event) => {
-  const $Target = event.target
-  const value = $Target.value
-  RendererWorker.send(
-    /* viewletSend */ 'Viewlet.send',
-    /* ViewletId */ 'Output',
-    /* method */ 'setOutputChannel',
-    /* option */ value
-  )
-}
-
 export const create = () => {
   const $ViewletOutputSelect = document.createElement('select')
   $ViewletOutputSelect.className = 'ViewletOutputSelect'
-  $ViewletOutputSelect.onchange = handleChange
+  $ViewletOutputSelect.onchange = ViewletOutputEvents.handleChange
   $ViewletOutputSelect.ariaLabel = 'Select a log'
   const $ViewletOutputContent = document.createElement('div')
   $ViewletOutputContent.className = 'OutputContent'

package/static/fbac85f/packages/renderer-process/src/parts/ViewletOutput/ViewletOutputEvents.js

@@ -0,0 +1,12 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+export const handleChange = (event) => {
+  const $Target = event.target
+  const value = $Target.value
+  RendererWorker.send(
+    /* viewletSend */ 'Viewlet.send',
+    /* ViewletId */ 'Output',
+    /* method */ 'setOutputChannel',
+    /* option */ value
+  )
+}

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/ViewletProblems/ViewletProblems.js

@@ -1,19 +1,14 @@
 import * as Assert from '../Assert/Assert.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as ViewletProblemsEvents from './ViewletProblemsEvents.js'
 
 export const name = 'Problems'
 
-const handleMouseDown = (event) => {
-  event.preventDefault()
-  RendererWorker.send(/* ViewletProblems.focusIndex */ 7550, /* index */ -1)
-}
-
 export const create = (problemsCount) => {
   const $Viewlet = document.createElement('div')
   $Viewlet.dataset.viewletId = 'Problems'
   $Viewlet.className = 'Viewlet'
   $Viewlet.tabIndex = 0
-  $Viewlet.onmousedown = handleMouseDown
+  $Viewlet.onmousedown = ViewletProblemsEvents.handleMouseDown
   return {
     $Viewlet,
   }
@@ -42,5 +37,6 @@ export const setProblems = (state, problems) => {
 }
 
 export const focus = (state) => {
-  state.$Viewlet.focus()
+  const { $Viewlet } = state
+  $Viewlet.focus()
 }

package/static/fbac85f/packages/renderer-process/src/parts/ViewletProblems/ViewletProblemsEvents.js

@@ -0,0 +1,6 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+export const handleMouseDown = (event) => {
+  event.preventDefault()
+  RendererWorker.send(/* ViewletProblems.focusIndex */ 7550, /* index */ -1)
+}

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/ViewletQuickPick/ViewletQuickPick.js

@@ -4,7 +4,7 @@ import * as AriaAlert from '../AriaAlert/AriaAlert.js'
 import * as Focus from '../Focus/Focus.js'
 import * as InputBox from '../InputBox/InputBox.js'
 import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as WheelEventType from '../WheelEventType/WheelEventType.js'
+import * as ViewletQuickPickEvents from './ViewletQuickPickEvents.js'
 
 // TODO use another virtual list that just appends elements and
 // is optimized for fast show/hide, scrolling performance should
@@ -21,101 +21,53 @@ import * as WheelEventType from '../WheelEventType/WheelEventType.js'
 
 const activeId = 'QuickPickItemActive'
 
-const getNodeIndex = ($Node) => {
-  let index = 0
-  while (($Node = $Node.previousElementSibling)) {
-    index++
-  }
-  return index
-}
+// TODO forbidden:
+// 1. methods
+// 2. functions inside functions
 
-const getTargetIndex = ($Target) => {
-  switch ($Target.className) {
-    case 'QuickPickItem':
-    case 'QuickPickItem Focused':
-      return getNodeIndex($Target)
-    case 'QuickPickItemLabel':
-      return getNodeIndex($Target.parentNode)
-    default:
-      return -1
-  }
+/**
+ * @enum {string}
+ */
+const ClassNames = {
+  Label: 'Label',
+  QuickPickItem: 'QuickPickItem',
+  Icon: 'Icon',
+  QuickPickItemDescription: 'QuickPickItemDescription',
+  QuickPickStatus: 'QuickPickStatus',
 }
 
-const handleWheel = (event) => {
-  switch (event.deltaMode) {
-    case WheelEventType.DomDeltaLine:
-      RendererWorker.send(
-        /* QuickPick.handleWheel */ 'QuickPick.handleWheel',
-        /* deltaY */ event.deltaY
-      )
-      break
-    case WheelEventType.DomDeltaPixel:
-      RendererWorker.send(
-        /* QuickPick.handleWheel */ 'QuickPick.handleWheel',
-        /* deltaY */ event.deltaY
-      )
-      break
-    default:
-      break
-  }
+/**
+ * @enum {string}
+ */
+const Ids = {
+  QuickPickHeader: 'QuickPickHeader',
+  QuickPickItems: 'QuickPickItems',
+  QuickPick: 'QuickPick',
 }
 
-const handleMouseDown = (event) => {
-  event.preventDefault()
-  const $Target = event.target
-  const index = getTargetIndex($Target)
-  if (index === -1) {
-    return
-  }
-  // console.log('button', event.button)
-  // console.log({ index })
-  RendererWorker.send(
-    /* QuickPick.selectIndex */ 'QuickPick.selectIndex',
-    /* index */ index
-  )
+/**
+ * @enum {string}
+ */
+const Roles = {
+  ListBox: 'listbox',
+  ComboBox: 'combobox',
+  Option: 'option',
 }
 
-// TODO beforeinput event should prevent input event maybe
-// const handleBeforeInput = (event) => {
-//   if (!event.data) {
-//     return
-//   }
-//   const value = event.target.value + event.data
-//   RendererWorker.send(
-//     /* quickPickHandleInput */ 'QuickPick.handleInput',
-//     /* value */ value,
-//   )
-// }
-
-const handleInput = (event) => {
-  const $Target = event.target
-  RendererWorker.send(
-    /* quickPickHandleInput */ 'QuickPick.handleInput',
-    /* value */ $Target.value
-  )
-}
-const handleBlur = (event) => {
-  RendererWorker.send(/* QuickPick.handleBlur */ 'QuickPick.handleBlur')
-}
-
-// TODO forbidden:
-// 1. methods
-// 2. functions inside functions
-
 const create$QuickPickItem = () => {
   // TODO many quickPick items may not have description -> avoid creating description dom nodes if there is no description
   const $QuickPickItemLabelText = document.createTextNode('')
 
   const $QuickPickItemLabel = document.createElement('div')
-  $QuickPickItemLabel.className = 'QuickPickItemLabel'
+  $QuickPickItemLabel.className = ClassNames.Label
   $QuickPickItemLabel.append($QuickPickItemLabelText)
 
   const $QuickPickItemIcon = document.createElement('i')
-  $QuickPickItemIcon.className = 'Icon'
+  $QuickPickItemIcon.className = ClassNames.Icon
   const $QuickPickItem = document.createElement('div') // TODO ul/li would be better for structure but might be slower
-  $QuickPickItem.className = 'QuickPickItem'
+  $QuickPickItem.className = ClassNames.QuickPickItem
   // @ts-ignore
-  $QuickPickItem.role = 'option'
+  $QuickPickItem.role = Roles.Option
   $QuickPickItem.append($QuickPickItemIcon, $QuickPickItemLabel)
   return $QuickPickItem
 }
@@ -124,7 +76,7 @@ const create$QuickPickItem = () => {
 
 const create$QuickPickDescription = () => {
   const $QuickPickItemDescription = document.createElement('div')
-  $QuickPickItemDescription.className = 'QuickPickItemDescription'
+  $QuickPickItemDescription.className = ClassNames.QuickPickItemDescription
   return $QuickPickItemDescription
 }
 
@@ -256,33 +208,37 @@ const handleBeforeInput = (event) => {
 
 export const create = () => {
   const $QuickPickInput = InputBox.create()
-  $QuickPickInput.setAttribute('aria-controls', 'QuickPickItems') // TODO use idl once supported
+  $QuickPickInput.setAttribute('aria-controls', Ids.QuickPickItems) // TODO use idl once supported
   // @ts-ignore
-  $QuickPickInput.role = 'combobox'
+  $QuickPickInput.role = Roles.ComboBox
   $QuickPickInput.ariaLabel = 'Type the name of a command to run.'
   $QuickPickInput.ariaAutoComplete = 'list'
-  $QuickPickInput.onblur = handleBlur
-  $QuickPickInput.oninput = handleInput
+  $QuickPickInput.onblur = ViewletQuickPickEvents.handleBlur
+  $QuickPickInput.oninput = ViewletQuickPickEvents.handleInput
   $QuickPickInput.addEventListener('beforeinput', handleBeforeInput)
   $QuickPickInput.ariaExpanded = 'true'
 
   const $QuickPickHeader = document.createElement('div')
-  $QuickPickHeader.id = 'QuickPickHeader'
+  $QuickPickHeader.id = Ids.QuickPickHeader
   $QuickPickHeader.append($QuickPickInput)
 
   const $QuickPickItems = document.createElement('div')
-  $QuickPickItems.id = 'QuickPickItems'
+  $QuickPickItems.id = Ids.QuickPickItems
   // @ts-ignore
-  $QuickPickItems.role = 'listbox'
-  $QuickPickItems.onmousedown = handleMouseDown
-  $QuickPickItems.addEventListener('wheel', handleWheel, { passive: true })
+  $QuickPickItems.role = Roles.ListBox
+  $QuickPickItems.onmousedown = ViewletQuickPickEvents.handleMouseDown
+  $QuickPickItems.addEventListener(
+    'wheel',
+    ViewletQuickPickEvents.handleWheel,
+    { passive: true }
+  )
 
   // TODO this works well with nvda but not with windows narrator
   // probably a bug with windows narrator that doesn't support ariaRoleDescription
   $QuickPickItems.ariaRoleDescription = 'Quick Input'
 
   const $QuickPick = document.createElement('div')
-  $QuickPick.id = 'QuickPick'
+  $QuickPick.id = Ids.QuickPick
   // $QuickPick.role= 'dialog'
   $QuickPick.append($QuickPickHeader, $QuickPickItems)
   // $QuickPick.setAttribute('aria-modal', 'false') // TODO why is this

package/static/fbac85f/packages/renderer-process/src/parts/ViewletQuickPick/ViewletQuickPickEvents.js

@@ -0,0 +1,110 @@
+/* Tries to implement the pattern for combobox with listbox popup https://www.w3.org/TR/wai-aria-1.2/#combobox */
+
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as WheelEventType from '../WheelEventType/WheelEventType.js'
+
+// TODO use another virtual list that just appends elements and
+// is optimized for fast show/hide, scrolling performance should
+// be good as well but is not as important as fast show/hide
+
+// TODO screenreader makes pause after reading colon, maybe there is a setting for screenreaders so they speak normally
+
+// TODO state
+
+// TODO when quickpick is shown recalculate style and layout is really slow (>10ms every time)
+
+// TODO accessibility issues with nvda: when pressing escape, it goes into different mode
+// but should just close quick-pick like vscode does
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const getTargetIndex = ($Target) => {
+  switch ($Target.className) {
+    case 'QuickPickItem':
+    case 'QuickPickItem Focused':
+      return getNodeIndex($Target)
+    case 'QuickPickItemLabel':
+      return getNodeIndex($Target.parentNode)
+    default:
+      return -1
+  }
+}
+
+export const handleWheel = (event) => {
+  switch (event.deltaMode) {
+    case WheelEventType.DomDeltaLine:
+      RendererWorker.send(
+        /* QuickPick.handleWheel */ 'QuickPick.handleWheel',
+        /* deltaY */ event.deltaY
+      )
+      break
+    case WheelEventType.DomDeltaPixel:
+      RendererWorker.send(
+        /* QuickPick.handleWheel */ 'QuickPick.handleWheel',
+        /* deltaY */ event.deltaY
+      )
+      break
+    default:
+      break
+  }
+}
+
+export const handleMouseDown = (event) => {
+  event.preventDefault()
+  const { clientX, clientY } = event
+  RendererWorker.send(
+    /* QuickPick.selectIndex */ 'QuickPick.handleClickAt',
+    /* x */ clientX,
+    /* y */ clientY
+  )
+}
+
+// TODO beforeinput event should prevent input event maybe
+// const handleBeforeInput = (event) => {
+//   if (!event.data) {
+//     return
+//   }
+//   const value = event.target.value + event.data
+//   RendererWorker.send(
+//     /* quickPickHandleInput */ 'QuickPick.handleInput',
+//     /* value */ value,
+//   )
+// }
+
+export const handleInput = (event) => {
+  const $Target = event.target
+  RendererWorker.send(
+    /* quickPickHandleInput */ 'QuickPick.handleInput',
+    /* value */ $Target.value
+  )
+}
+
+export const handleBlur = (event) => {
+  RendererWorker.send(/* QuickPick.handleBlur */ 'QuickPick.handleBlur')
+}
+
+// TODO
+// - for windows narrator, ariaLabel works well
+// - for nvda ariaRoleDescription works better
+
+export const handleBeforeInput = (event) => {
+  event.preventDefault()
+  const $Target = event.target
+  const selectionStart = $Target.selectionStart
+  const selectionEnd = $Target.selectionEnd
+  const inputType = event.inputType
+  const data = event.data
+  RendererWorker.send(
+    'QuickPick.handleBeforeInput',
+    /* inputType */ inputType,
+    /* data */ data,
+    /* selectionStart */ selectionStart,
+    /* selectionEnd */ selectionEnd
+  )
+}