@lvce-editor/server 0.0.41 → 0.2.0

package/static/56d97e9/packages/renderer-process/src/parts/TestFrameWork/ConditionErrors.js

@@ -0,0 +1,72 @@
+import * as QuerySelector from './QuerySelector.js'
+
+export const toBeVisible = (locator) => {
+  return `expected selector to be visible ${locator._selector}`
+}
+
+const printLocator = (locator) => {
+  if (locator._nth) {
+    return `${locator._selector}:nth(${locator._nth})`
+  }
+  return `${locator._selector}`
+}
+
+export const toHaveText = (locator, { text }) => {
+  const element = QuerySelector.querySelectorWithOptions(locator._selector, {
+    nth: locator._nth,
+    hasText: locator._hasText,
+  })
+  const locatorString = printLocator(locator)
+  if (!element) {
+    return `expected selector ${locatorString} to have text "${text}" element was not found`
+  }
+  return `expected selector ${locatorString} to have text "${text}" but was "${element.textContent}"`
+}
+
+export const toHaveAttribute = (locator, { key, value }) => {
+  const element = QuerySelector.querySelectorWithOptions(locator._selector, {
+    nth: locator._nth,
+    hasText: locator._hasText,
+  })
+  const locatorString = printLocator(locator)
+  if (!element) {
+    return `expected ${locatorString} to have attribute ${key} ${value} but element was not found`
+  }
+  const actual = element.getAttribute(key)
+  return `expected ${locatorString} to have attribute ${key} ${value} but was ${actual}`
+}
+
+export const toHaveCount = (locator, { count }) => {
+  const locatorString = printLocator(locator)
+  return `expected ${locatorString} to have count ${count}`
+}
+
+export const toBeFocused = (locator) => {
+  const locatorString = printLocator(locator)
+  return `expected ${locatorString} to be focused`
+}
+
+export const toHaveClass = (locator, { className }) => {
+  const [element] = QuerySelector.querySelector(locator._selector)
+  const locatorString = printLocator(locator)
+  if (!element) {
+    return `expected ${locatorString} to have class ${className} but element was not found`
+  }
+  return `expected ${locatorString} to have class ${className}`
+}
+
+export const toBeHidden = (locator) => {
+  const locatorString = printLocator(locator)
+  return `expected ${locatorString} to be hidden`
+}
+
+export const toHaveCss = (locator, { key, value }) => {
+  const [element] = QuerySelector.querySelector(locator._selector)
+  const locatorString = printLocator(locator)
+  if (!element) {
+    return `expected ${locatorString} to have css ${key} ${value}`
+  }
+  const style = getComputedStyle(element)
+  const actual = style[key]
+  return `expected ${locatorString} to have css ${key} ${value} but was ${actual}`
+}

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-process/src/parts/Viewlet/TreeView.js

@@ -1,9 +1,9 @@
 import { findIndex } from '../../shared/findIndex.js'
-import * as Main from '../Main/Main.js'
+import * as Command from '../Command/Command.js'
+import * as Context from '../Context/Context.js'
 import * as Renderer from '../Renderer/Renderer.js'
 import * as RendererTree from '../Renderer/RendererTree.js'
-import * as Context from '../Context/Context.js'
-import * as Command from '../Command/Command.js'
+import * as MouseEventType from '../MouseEventType/MouseEventType.js'
 
 // class Dirent {
 //   constructor(name, type) {
@@ -109,7 +109,7 @@ export const create = (props) => {
   }
 
   const handleMouseDown = async (event) => {
-    if (event.button !== 0) {
+    if (event.button !== MouseEventType.LeftClick) {
       return
     }
     const $Target = event.target
@@ -208,7 +208,7 @@ export const create = (props) => {
   $Viewlet.tabIndex = 0
   $Viewlet.dataset.viewletId = 'Explorer'
   // @ts-ignore
-  $Viewlet.role= 'tree'
+  $Viewlet.role = 'tree'
   $Viewlet.ariaLabel = 'Files Explorer'
   $Viewlet.addEventListener('keydown', handleKeyDown)
   $Viewlet.addEventListener('mousedown', handleMouseDown)

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-process/src/parts/Viewlet/ViewletList.js

@@ -2,18 +2,19 @@ import * as FindIndex from '../../shared/findIndex.js'
 import * as Assert from '../Assert/Assert.js'
 import * as Focus from '../Focus/Focus.js'
 import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as WheelEventType from '../WheelEventType/WheelEventType.js'
 
 export const name = 'List'
 
 const handleWheel = (event) => {
   switch (event.deltaMode) {
-    case event.DOM_DELTA_LINE:
+    case WheelEventType.DomDeltaLine:
       RendererWorker.send(
         /* ViewletExtensions.handleWheel */ 873,
         /* deltaY */ event.deltaY
       )
       break
-    case event.DOM_DELTA_PIXEL:
+    case WheelEventType.DomDeltaPixel:
       RendererWorker.send(
         /* ViewletExtensions.handleWheel */ 873,
         /* deltaY */ event.deltaY

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-process/src/parts/ViewletActivityBar/ViewletActivityBar.js

@@ -3,6 +3,8 @@ import * as Focus from '../Focus/Focus.js'
 import * as Layout from '../Layout/Layout.js'
 import * as Platform from '../Platform/Platform.js'
 import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as ActivityBarItemFlags from '../ActivityBarItemFlags/ActvityBarItemFlags.js'
+import * as MouseEventTypes from '../MouseEventType/MouseEventType.js'
 
 // TODO set aria-selected false when sidebar is collapsed
 
@@ -24,19 +26,19 @@ const create$ActivityBarItem = (item) => {
   const $ActivityBarItem = document.createElement('div')
   $ActivityBarItem.className = 'ActivityBarItem'
   $ActivityBarItem.ariaLabel = '' // aria-label is determined by content  TODO is empty aria-label necessary or can it be left off?
-  $ActivityBarItem.title = item.id
+  $ActivityBarItem.title = item.title
   $ActivityBarItem.tabIndex = -1
   $ActivityBarItem.dataset.viewletId = item.id
   if (item.keyShortcuts) {
     $ActivityBarItem.ariaKeyShortcuts = item.keyShortcuts
   }
   switch (item.flags) {
-    case /* Tab */ 1:
+    case ActivityBarItemFlags.Tab:
       // @ts-ignore
       $ActivityBarItem.role = 'tab'
       $ActivityBarItem.ariaSelected = 'false'
       break
-    case /* Button */ 2:
+    case ActivityBarItemFlags.Button:
       // @ts-ignore
       $ActivityBarItem.role = 'button'
       $ActivityBarItem.ariaHasPopup = 'true'
@@ -70,7 +72,7 @@ const getNodeIndex = ($Node) => {
 }
 
 const handleMousedown = (event) => {
-  if (event.button !== 0) {
+  if (event.button !== MouseEventTypes.LeftClick) {
     return
   }
   const $Item = get$ItemFromEvent(event)

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-process/src/parts/ViewletExplorer/ViewletExplorer.js

@@ -3,9 +3,13 @@ import * as RendererWorker from '../RendererWorker/RendererWorker.js'
 import * as FindIndex from '../../shared/findIndex.js'
 import * as Assert from '../Assert/Assert.js'
 import * as InputBox from '../InputBox/InputBox.js'
+import * as MouseEventType from '../MouseEventType/MouseEventType.js'
+import * as WheelEventType from '../WheelEventType/WheelEventType.js'
 
 export const name = 'Explorer'
 
+const activeId = 'TreeItemActive'
+
 // TODO put drop into separate module and use executeCommand to call it
 
 // TODO drag and drop should be loaded on demand
@@ -80,7 +84,7 @@ const handleFocus = (event) => {
   }
   event.preventDefault()
   RendererWorker.send(
-    /* Explorer.handleClick */ 'Explorer.focusIndex',
+    /* Explorer.focusIndex */ 'Explorer.focusIndex',
     /* index */ index
   )
 }
@@ -135,24 +139,52 @@ const handleDrop = async (event) => {
   // console.log(content)
 }
 
-const handleContextMenu = (event) => {
-  event.preventDefault()
+// TODO maybe use aria active descendant instead
+const getFocusedIndexFromFocusOutline = ($Viewlet) => {
+  for (let i = 0; i < $Viewlet.children.length; i++) {
+    const $Child = $Viewlet.children[i]
+    if ($Child.classList.contains('FocusOutline')) {
+      return i
+    }
+  }
+  return -1
+}
+
+const handleContextMenuMouse = (event) => {
   const $Target = event.target
-  const index = findIndex($Target)
   const x = event.clientX
   const y = event.clientY
-  const button = event.button
+  const index = findIndex($Target) // TODO index can be computed in renderer worker
   RendererWorker.send(
-    /* Explorer.handleContextMenu */ 'Explorer.handleContextMenu',
+    /* Explorer.handleContextMenuMouse */ 'Explorer.handleContextMenuMouse',
     /* x */ x,
     /* y */ y,
-    /* index */ index,
-    /* button */ button
+    /* index */ index
   )
 }
 
+const handleContextMenuKeyboard = (event) => {
+  const $Target = event.target
+  // TODO index computation is not necessary because focused index is stored in renderer worker
+  const index = getFocusedIndexFromFocusOutline($Target)
+  RendererWorker.send(
+    /* Explorer.handleContextMenuKeyboard */ 'Explorer.handleContextMenuKeyboard',
+    /* index */ index
+  )
+}
+
+const handleContextMenu = (event) => {
+  event.preventDefault()
+  switch (event.button) {
+    case MouseEventType.Keyboard:
+      return handleContextMenuKeyboard(event)
+    default:
+      return handleContextMenuMouse(event)
+  }
+}
+
 const handleMouseDown = (event) => {
-  if (event.button !== /* LeftClick */ 0) {
+  if (event.button !== MouseEventType.LeftClick) {
     return
   }
   const $Target = event.target
@@ -208,13 +240,13 @@ const handleMouseLeave = (event) => {
 
 const handleWheel = (event) => {
   switch (event.deltaMode) {
-    case event.DOM_DELTA_LINE:
+    case WheelEventType.DomDeltaLine:
       RendererWorker.send(
         /* Explorer.handleWheel */ 'Explorer.handleWheel',
         /* deltaY */ event.deltaY
       )
       break
-    case event.DOM_DELTA_PIXEL:
+    case WheelEventType.DomDeltaPixel:
       RendererWorker.send(
         /* Explorer.handleWheel */ 'Explorer.handleWheel',
         /* deltaY */ event.deltaY
@@ -263,8 +295,10 @@ const create$Row = () => {
 
 // TODO rename to renderDirent
 const render$Row = ($Row, rowInfo) => {
-  $Row.childNodes[0].className = `Icon${rowInfo.icon}`
-  $Row.childNodes[1].childNodes[0].data = rowInfo.name
+  const $Icon = $Row.childNodes[0]
+  const $LabelText = $Row.childNodes[1].childNodes[0]
+  $Icon.className = `Icon${rowInfo.icon}`
+  $LabelText.data = rowInfo.name
   $Row.title = rowInfo.path
   $Row.ariaSetSize = `${rowInfo.setSize}`
   // TODO bug with windows narrator
@@ -359,21 +393,26 @@ export const setFocusedIndex = (state, oldIndex, newIndex) => {
       const $Dirent = $Viewlet.children[oldIndex]
       if ($Dirent) {
         $Dirent.classList.remove('FocusOutline')
+        $Dirent.removeAttribute('id')
       }
       break
   }
   switch (newIndex) {
     case -2:
       $Viewlet.classList.remove('FocusOutline')
+      $Viewlet.removeAttribute('aria-activedescendant')
       break
     case -1:
       $Viewlet.classList.add('FocusOutline')
+      $Viewlet.removeAttribute('aria-activedescendant')
       $Viewlet.focus()
       break
     default:
       const $Dirent = $Viewlet.children[newIndex]
       $Dirent.classList.add('FocusOutline')
+      $Dirent.id = activeId
       $Viewlet.focus()
+      $Viewlet.setAttribute('aria-activedescendant', activeId)
       break
   }
 }

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-process/src/parts/ViewletExtensions/ViewletExtensions.js

@@ -2,7 +2,9 @@ import * as FindIndex from '../../shared/findIndex.js'
 import * as Assert from '../Assert/Assert.js'
 import * as Focus from '../Focus/Focus.js'
 import * as InputBox from '../InputBox/InputBox.js'
+import * as MouseEventType from '../MouseEventType/MouseEventType.js'
 import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as WheelEventType from '../WheelEventType/WheelEventType.js'
 
 export const name = 'Extensions'
 
@@ -43,13 +45,13 @@ const handleIconError = (event) => {
 
 const handleWheel = (event) => {
   switch (event.deltaMode) {
-    case event.DOM_DELTA_LINE:
+    case WheelEventType.DomDeltaLine:
       RendererWorker.send(
         /* ViewletExtensions.handleWheel */ 'Extensions.handleWheel',
         /* deltaY */ event.deltaY
       )
       break
-    case event.DOM_DELTA_PIXEL:
+    case WheelEventType.DomDeltaPixel:
       RendererWorker.send(
         /* ViewletExtensions.handleWheel */ 'Extensions.handleWheel',
         /* deltaY */ event.deltaY
@@ -62,28 +64,45 @@ const handleWheel = (event) => {
 
 const handleInput = (event) => {
   const $Target = event.target
+  const value = $Target.value
   RendererWorker.send(
-    /* ViewletExtensions.handleInput */ 863,
-    /* value */ $Target.value
+    /* ViewletExtensions.handleInput */ 'Extensions.handleInput',
+    /* value */ value
   )
   // TODO
+  // TODO use beforeinput event to set value and extension list items at the same time
   // state.$Viewlet.ariaBusy = 'true'
 }
 
+const findIndex = ($Target) => {
+  if ($Target.className.includes('ExtensionListItem')) {
+    return FindIndex.findIndex($Target.parentNode, $Target)
+  }
+  if ($Target.classList.contains('Viewlet')) {
+    return -1
+  }
+  return findIndex($Target.parentNode)
+  // return -2
+}
+
+const handleContextMenuMouse = (event) => {
+  RendererWorker.send(
+    /* Extensions.handleContextMenu */ 'Extensions.handleContextMenu',
+    /* x */ event.clientX,
+    /* y */ event.clientY
+  )
+}
+
+const handleContextMenuKeyboard = (event) => {}
+
 const handleContextMenu = (event) => {
   event.preventDefault()
-  const $Target = event.target
-  // const index = FindIndex.findIndex(state.$Extensions, $Target)
-  // if (index === -1) {
-  //   return
-  // }
-  // const extension = state.extensions[index]
-  // RendererWorker.send(
-  //   /* Extensions.handleContextMenu */ 'Extensions.handleContextMenu',
-  //   /* x */ event.clientX,
-  //   /* y */ event.clientY,
-  //   /* extensionId */ extension.id
-  // )
+  switch (event.button) {
+    case MouseEventType.Keyboard:
+      return handleContextMenuKeyboard(event)
+    default:
+      return handleContextMenuMouse(event)
+  }
 }
 
 const getNodeIndex = ($Node) => {

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-process/src/parts/ViewletLocations/ViewletLocations.js

@@ -1,5 +1,6 @@
 import * as RendererWorker from '../RendererWorker/RendererWorker.js'
 import * as Focus from '../Focus/Focus.js'
+import * as MouseEventType from '../MouseEventType/MouseEventType.js'
 
 export const name = 'Locations'
 
@@ -12,7 +13,7 @@ const getNodeIndex = ($Node) => {
 }
 
 const handleLocationsMouseDown = (event) => {
-  if (event.button !== /* LeftClick */ 0) {
+  if (event.button !== MouseEventType.LeftClick) {
     return
   }
   const $Target = event.target

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-process/src/parts/ViewletMain/ViewletMain.js

@@ -2,6 +2,7 @@ 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()
@@ -129,19 +130,19 @@ const handleTabCloseButtonMouseDown = (event, index) => {
 
 const handleTabMouseDown = (event, index) => {
   switch (event.button) {
-    case /* LeftClick */ 0:
+    case MouseEventType.LeftClick:
       RendererWorker.send(
         /* Main.handleTabClick */ 'Main.handleTabClick',
         /* index */ index
       )
       break
-    case /* MiddleClick */ 1:
+    case MouseEventType.MiddleClick:
       RendererWorker.send(
         /* Main.closeEditor */ 'Main.closeEditor',
         /* index */ index
       )
       break
-    case /* RightClick */ 2:
+    case MouseEventType.RightClick:
       break
     default:
       break

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-process/src/parts/ViewletQuickPick/ViewletQuickPick.js

@@ -4,6 +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'
 
 // TODO use another virtual list that just appends elements and
 // is optimized for fast show/hide, scrolling performance should
@@ -18,6 +19,8 @@ import * as RendererWorker from '../RendererWorker/RendererWorker.js'
 // TODO accessibility issues with nvda: when pressing escape, it goes into different mode
 // but should just close quick-pick like vscode does
 
+const activeId = 'QuickPickItemActive'
+
 const getNodeIndex = ($Node) => {
   let index = 0
   while (($Node = $Node.previousElementSibling)) {
@@ -40,13 +43,13 @@ const getTargetIndex = ($Target) => {
 
 const handleWheel = (event) => {
   switch (event.deltaMode) {
-    case event.DOM_DELTA_LINE:
+    case WheelEventType.DomDeltaLine:
       RendererWorker.send(
         /* QuickPick.handleWheel */ 'QuickPick.handleWheel',
         /* deltaY */ event.deltaY
       )
       break
-    case event.DOM_DELTA_PIXEL:
+    case WheelEventType.DomDeltaPixel:
       RendererWorker.send(
         /* QuickPick.handleWheel */ 'QuickPick.handleWheel',
         /* deltaY */ event.deltaY
@@ -122,20 +125,6 @@ const create$QuickPickItem = () => {
   return $QuickPickItem
 }
 
-export const focusIndex = (state, oldIndex, newIndex) => {
-  if (oldIndex === newIndex) {
-    return
-  }
-  const $QuickPickItems = state.$QuickPickItems
-  if (oldIndex !== -1) {
-    const $OldItem = $QuickPickItems.children[oldIndex]
-    $OldItem.classList.remove('Focused')
-  }
-  const $NewItem = $QuickPickItems.children[newIndex]
-  $NewItem.classList.add('Focused')
-  state.$QuickPickInput.setAttribute('aria-activedescendant', $NewItem.id)
-}
-
 // TODO add test with show and slicedItems length is 0
 
 const create$QuickPickDescription = () => {
@@ -171,7 +160,6 @@ const render$QuickPickItemMore = ($QuickPickItem, quickPickItem) => {
 const render$QuickPickItem = ($QuickPickItem, quickPickItem) => {
   const lengthA = $QuickPickItem.children.length
   const lengthB = quickPickItem.description ? 2 : 1
-  $QuickPickItem.id = `QuickPickItem-${quickPickItem.posInSet}`
   $QuickPickItem.ariaPosInSet = `${quickPickItem.posInSet}` // TODO pass correct number as prop
   $QuickPickItem.ariaSetSize = `${quickPickItem.setSize}`
   if (lengthA < lengthB) {
@@ -235,17 +223,19 @@ export const setVisiblePicks = (state, visiblePicks) => {
 
 export const setFocusedIndex = (state, oldFocusedIndex, newFocusedIndex) => {
   const { $QuickPickItems, $QuickPickInput } = state
-  if (oldFocusedIndex !== -1) {
+  if (oldFocusedIndex >= 0) {
     const $OldItem = $QuickPickItems.children[oldFocusedIndex]
     if ($OldItem) {
       $OldItem.classList.remove('Focused')
+      $OldItem.removeAttribute('id')
     }
   }
   if (newFocusedIndex >= 0) {
     const $NewItem = $QuickPickItems.children[newFocusedIndex]
     if ($NewItem) {
       $NewItem.classList.add('Focused')
-      $QuickPickInput.setAttribute('aria-activedescendant', $NewItem.id)
+      $NewItem.id = activeId
+      $QuickPickInput.setAttribute('aria-activedescendant', activeId)
     }
   }
 }