@lvce-editor/server 0.0.27 → 0.0.28

package/static/eb65b4e/packages/renderer-process/src/parts/Viewlet/ViewletQuickPick.js

@@ -1,342 +0,0 @@
-/* Tries to implement the pattern for combobox with listbox popup https://www.w3.org/TR/wai-aria-1.2/#combobox */
-
-import * as Focus from '../Focus/Focus.js'
-import * as InputBox from '../InputBox/InputBox.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as Widget from '../Widget/Widget.js'
-import * as Assert from '../Assert/Assert.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
-  }
-}
-
-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])
-}
-
-// 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,
-  ])
-}
-// TODO when blur hides quickpick automatically it doesn't necessarily need to be sent command to hide itself
-const handleBlur = (event) => {
-  // console.log(event)
-  // if (!event.relatedTarget) {
-  //   console.log('no related target')
-  //   return
-  // }
-  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 $QuickPickItemLabel = document.createElement('div')
-  $QuickPickItemLabel.className = 'QuickPickItemLabel'
-  // $QuickPickItemLabel.textContent = item.label || '<missing label>'
-  // const $QuickPickItemDescription = document.createElement('div')
-  // $QuickPickItemDescription.className = 'QuickPickItemDescription'
-  // $QuickPickItemDescription.textContent = item.description
-  const $QuickPickItem = document.createElement('div') // TODO ul/li would be better for structure but might be slower
-  $QuickPickItem.className = 'QuickPickItem'
-  $QuickPickItem.setAttribute('role', 'option')
-  // $QuickPickItem.id = `QuickPickItem-${index}`
-  // $QuickPickItem.dataset.index = index
-  // $QuickPickItem.ariaPosInSet = `${index + 1}`
-  // $QuickPickItem.ariaSetSize = `${total}`
-  $QuickPickItem.append($QuickPickItemLabel)
-  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 = () => {
-  const $QuickPickItemDescription = document.createElement('div')
-  $QuickPickItemDescription.className = 'QuickPickItemDescription'
-  return $QuickPickItemDescription
-}
-
-const render$QuickPickItemLabel = ($QuickPickItemLabel, quickPickItem) => {
-  // TODO don't use text content -> recycle text node instead: node.nodeValue='newtext'
-  $QuickPickItemLabel.textContent = quickPickItem.label
-}
-
-const render$QuickPickItemLess = ($QuickPickItem, quickPickItem) => {
-  render$QuickPickItemLabel($QuickPickItem.firstChild, quickPickItem)
-  const $QuickPickItemDescription = create$QuickPickDescription()
-  // render$QuickPickItemDescription($QuickPickItemDescription, quickPickItem)
-
-  $QuickPickItem.append($QuickPickItemDescription)
-}
-
-const render$QuickPickItemEqual = ($QuickPickItem, quickPickItem) => {
-  render$QuickPickItemLabel($QuickPickItem.firstChild, quickPickItem)
-  if (quickPickItem.description) {
-    // render$QuickPickItemDescription($QuickPickItem.children[1], quickPickItem)
-  }
-}
-
-const render$QuickPickItemMore = ($QuickPickItem, quickPickItem) => {
-  render$QuickPickItemLabel($QuickPickItem.firstChild, quickPickItem)
-  $QuickPickItem.lastChild.remove()
-}
-
-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) {
-    render$QuickPickItemLess($QuickPickItem, quickPickItem)
-  } else if (lengthA === lengthB) {
-    render$QuickPickItemEqual($QuickPickItem, quickPickItem)
-  } else {
-    render$QuickPickItemMore($QuickPickItem, quickPickItem)
-  }
-}
-
-const render$QuickPickItemsLess = ($QuickPickItems, quickPickItems) => {
-  for (let i = 0; i < $QuickPickItems.children.length; i++) {
-    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
-  }
-  const fragment = document.createDocumentFragment()
-  for (
-    let i = $QuickPickItems.children.length;
-    i < quickPickItems.length;
-    i++
-  ) {
-    const $QuickPickItem = create$QuickPickItem()
-    render$QuickPickItem($QuickPickItem, quickPickItems[i])
-    fragment.append($QuickPickItem)
-  }
-  $QuickPickItems.append(fragment)
-}
-
-const render$QuickPickItemsEqual = ($QuickPickItems, quickPickItems) => {
-  for (let i = 0; i < quickPickItems.length; i++) {
-    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
-  }
-}
-
-const render$QuickPickItemsMore = ($QuickPickItems, quickPickItems) => {
-  for (let i = 0; i < quickPickItems.length; i++) {
-    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
-  }
-  const diff = $QuickPickItems.children.length - quickPickItems.length
-  for (let i = 0; i < diff; i++) {
-    $QuickPickItems.lastChild.remove()
-  }
-}
-
-const render$QuickPickItems = ($QuickPickItems, quickPickItems) => {
-  if ($QuickPickItems.children.length < quickPickItems.length) {
-    render$QuickPickItemsLess($QuickPickItems, quickPickItems)
-  } else if ($QuickPickItems.children.length === quickPickItems.length) {
-    render$QuickPickItemsEqual($QuickPickItems, quickPickItems)
-  } else {
-    render$QuickPickItemsMore($QuickPickItems, quickPickItems)
-  }
-}
-
-export const updatePicks = (state, visiblePicks, unFocusIndex) => {
-  Assert.object(state)
-  Assert.array(visiblePicks)
-  Assert.number(unFocusIndex)
-  // TODO avoid copying on every keyboard input event
-  // const allPicks = [...slicedPicks]
-  // List.setItems(state.list, total, allPicks)
-  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
-  focusIndex(state, unFocusIndex, 0) // TODO handle length zero
-}
-
-export const updateValueAndPicks = (
-  state,
-  value,
-  visiblePicks,
-  focusIndex,
-  unFocusIndex
-) => {
-  state.$QuickPickInput.value = value
-  if (unFocusIndex !== -1) {
-    state.$QuickPickItems.children[unFocusIndex].classList.remove('Focused')
-  }
-  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
-  if (focusIndex !== -1) {
-    // TODO set aria-activedescendant
-    state.$QuickPickItems.children[focusIndex].classList.add('Focused')
-  }
-}
-
-export const updateValueAndPicksAndPlaceholder = (
-  state,
-  value,
-  visiblePicks,
-  focusIndex,
-  unFocusIndex,
-  placeholder,
-  label
-) => {
-  const { $QuickPickInput, $QuickPickItems } = state
-  updateValueAndPicks(state, value, visiblePicks, focusIndex, unFocusIndex)
-  $QuickPickInput.placeholder = placeholder
-  $QuickPickInput.ariaLabel = placeholder
-  $QuickPickItems.ariaLabel = label
-  console.log({ placeholder, label })
-  // setTimeout(() => {
-  // $QuickPickInput.focus()
-  // }, 100)
-  // $QuickPickInput.ariaDescription = 'this is a description'
-
-  // $QuickPickInput.focus()
-}
-
-// TODO
-// - for windows narrator, ariaLabel works well
-// - for nvda ariaRoleDescription works better
-
-export const create = (value, visiblePicks, focusIndex) => {
-  const $QuickPickInput = InputBox.create()
-  $QuickPickInput.setAttribute('aria-controls', 'QuickPickItems')
-  $QuickPickInput.setAttribute('role', 'combobox') // TODO use idl once supported
-  $QuickPickInput.ariaLabel = 'Type the name of a command to run.'
-  $QuickPickInput.ariaAutoComplete = 'list'
-  $QuickPickInput.setAttribute('aria-activedescendant', '')
-  $QuickPickInput.setAttribute('aria-activedescendant', 'QuickPickItem-1') // TODO only if list length is not zero
-  $QuickPickInput.onblur = handleBlur
-  // $QuickPickInput.addEventListener('beforeinput', handleBeforeInput)
-  $QuickPickInput.oninput = handleInput
-  $QuickPickInput.ariaExpanded = 'true'
-
-  const $QuickPickHeader = document.createElement('div')
-  $QuickPickHeader.id = 'QuickPickHeader'
-  $QuickPickHeader.append($QuickPickInput)
-
-  const $QuickPickItems = document.createElement('div')
-  $QuickPickItems.id = 'QuickPickItems'
-  $QuickPickItems.setAttribute('role', 'listbox')
-  $QuickPickItems.onmousedown = handleMouseDown
-
-  // 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.setAttribute('role', 'dialog')
-  $QuickPick.append($QuickPickHeader, $QuickPickItems)
-  // $QuickPick.setAttribute('aria-modal', 'false') // TODO why is this
-  $QuickPick.ariaLabel = 'Quick open'
-
-  // workaround for chrome bug, role application is already on body but
-  // chrome sometimes uses role document
-  document.body.setAttribute('role', 'application')
-
-  Widget.append($QuickPick)
-  Focus.focus($QuickPickInput, 'quickPickInput')
-
-  return {
-    $QuickPick,
-    $QuickPickInput,
-    $QuickPickItems,
-  }
-}
-
-export const setValueAndPicks = (state, value, visiblePicks) => {
-  // TODO set value might cause recalc style / layout -> investigate
-  state.$QuickPickInput.value = value
-  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
-  state.$QuickPickItems.children[0].classList.add('Focused')
-}
-
-export const showNoResults = (state, noResults, unfocusIndex) => {
-  console.log({ noResults })
-  updatePicks(state, [noResults], unfocusIndex)
-  Widget.append(state.$QuickPick)
-  Focus.focus(state.$QuickPickInput, 'quickPickInput')
-}
-
-// TODO QuickPick module is always loaded lazily -> can create $QuickPick eagerly (no state / less state laying around)
-
-// TODO remove from dom vs display none which should be used?
-
-// TODO have common widgets container for all widgets (this, notifications, context menu)
-export const dispose = (state) => {
-  // TODO make hidden or remove, which is better?  -> remove less dom nodes in dom, hidden -> maybe less style recalculations when shown again
-  state.$QuickPickInput.onblur = null
-  Widget.remove(state.$QuickPick)
-  Focus.focusPrevious()
-}
-
-export const setValue = (state, value) => {
-  state.$QuickPickInput.value = value
-}

package/static/eb65b4e/packages/renderer-process/src/parts/Viewlet/ViewletSearch.js

@@ -1,179 +0,0 @@
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as InputBox from '../InputBox/InputBox.js'
-import * as Assert from '../Assert/Assert.js'
-
-const handleInput = (event) => {
-  const $Target = event.target
-  const value = $Target.value
-  RendererWorker.send([/* ViewletSearch.handleInput */ 9444, /* value */ value])
-}
-
-const getNodeIndex = ($Node) => {
-  let index = 0
-  while (($Node = $Node.previousElementSibling)) {
-    index++
-  }
-  return index
-}
-
-const handleClick = (event) => {
-  const $Target = event.target
-  switch ($Target.className) {
-    case 'TreeItem':
-      const index = getNodeIndex($Target)
-      RendererWorker.send([
-        /* ViewletSearch.handleClick */ 9445,
-        /* index */ index,
-      ])
-      break
-    default:
-      break
-  }
-}
-
-// TODO name export not necessary
-export const name = 'Search'
-
-export const create = () => {
-  const $ViewletSearchInput = InputBox.create()
-  $ViewletSearchInput.placeholder = 'Search'
-  $ViewletSearchInput.oninput = handleInput
-  $ViewletSearchInput.className = 'InputBox ViewletSearchInput'
-
-  const $SearchResults = document.createElement('div')
-  $SearchResults.className = 'SearchResults'
-  // TODO onclick vs onmousedown, should be consistent in whole application
-  $SearchResults.onclick = handleClick
-
-  const $SearchStatus = document.createElement('div')
-  $SearchStatus.setAttribute('role', 'status')
-
-  const $Viewlet = document.createElement('div')
-  $Viewlet.dataset.viewletId = 'Search'
-  $Viewlet.tabIndex = -1
-  $Viewlet.className = 'Viewlet'
-  $Viewlet.append($ViewletSearchInput, $SearchStatus, $SearchResults)
-
-  return {
-    $Viewlet,
-    $ViewletSearchInput,
-    $SearchResults,
-    $SearchStatus,
-  }
-}
-
-export const refresh = (state, context) => {
-  Assert.object(state)
-}
-
-export const focus = (state) => {
-  Assert.object(state)
-  state.$ViewletSearchInput.focus()
-}
-
-const create$Row = () => {
-  const $Row = document.createElement('div')
-  $Row.setAttribute('role', 'treeitem')
-  $Row.className = 'TreeItem'
-  return $Row
-}
-
-// TODO much duplication with explorer
-const render$Row = ($Row, rowInfo) => {
-  $Row.textContent = rowInfo.name
-  $Row.title = rowInfo.path
-  $Row.tabIndex = -1
-  $Row.ariaSetSize = `${rowInfo.setSize}`
-  $Row.ariaLevel = `${rowInfo.depth}`
-  $Row.ariaPosInSet = `${rowInfo.posInSet}`
-  $Row.ariaLabel = rowInfo.name
-  $Row.ariaDescription = ''
-  switch (rowInfo.type) {
-    // TODO type should be a number for efficiency
-    case 'directory':
-    case 'folder':
-      $Row.ariaExpanded = 'false'
-      $Row.className = `TreeItem Icon${rowInfo.icon}`
-      break
-    case 'directory-expanded':
-      $Row.className = `TreeItem Icon${rowInfo.icon}`
-      $Row.ariaExpanded = 'true'
-      break
-    case 'file':
-      $Row.ariaExpanded = undefined
-      $Row.className = `TreeItem Icon${rowInfo.icon}`
-      break
-    default:
-      break
-  }
-}
-
-const render$RowsLess = ($Rows, rowInfos) => {
-  for (let i = 0; i < $Rows.children.length; i++) {
-    render$Row($Rows.children[i], rowInfos[i])
-  }
-  const fragment = document.createDocumentFragment()
-  for (let i = $Rows.children.length; i < rowInfos.length; i++) {
-    const $Row = create$Row()
-    render$Row($Row, rowInfos[i])
-    fragment.append($Row)
-  }
-  $Rows.append(fragment)
-}
-
-const render$RowsEqual = ($Rows, rowInfos) => {
-  for (let i = 0; i < rowInfos.length; i++) {
-    render$Row($Rows.children[i], rowInfos[i])
-  }
-}
-
-const render$RowsMore = ($Rows, rowInfos) => {
-  for (let i = 0; i < rowInfos.length; i++) {
-    render$Row($Rows.children[i], rowInfos[i])
-  }
-  const diff = $Rows.children.length - rowInfos.length
-  for (let i = 0; i < diff; i++) {
-    $Rows.lastChild.remove()
-  }
-}
-
-const render$Rows = ($Rows, rowInfos) => {
-  if ($Rows.children.length < rowInfos.length) {
-    render$RowsLess($Rows, rowInfos)
-  } else if ($Rows.children.length === rowInfos.length) {
-    render$RowsEqual($Rows, rowInfos)
-  } else {
-    render$RowsMore($Rows, rowInfos)
-  }
-}
-
-const cleanNode = ($Node) => {
-  while ($Node.firstChild) {
-    $Node.firstChild.remove()
-  }
-}
-
-const getStatusMessage = (resultCount, fileResultCount) => {
-  if (resultCount === 0) {
-    return 'No results found'
-  }
-  if (resultCount === 1 && fileResultCount === 1) {
-    return `Found 1 result in 1 file`
-  }
-  if (fileResultCount === 1) {
-    return `Found ${resultCount} results in 1 file`
-  }
-  return `Found ${resultCount} results in ${fileResultCount} files`
-}
-
-export const setResults = (state, results, resultCount, fileResultCount) => {
-  Assert.object(state)
-  Assert.array(results)
-  // TODO should recycle nodes when rendering only search results
-  // maybe could also recycle node from noResults and vice versa
-  const statusMessage = getStatusMessage(resultCount, fileResultCount)
-  state.$SearchStatus.textContent = statusMessage
-  render$Rows(state.$SearchResults, results)
-}
-
-export const dispose = () => {}

package/static/eb65b4e/packages/renderer-process/src/parts/Viewlet/ViewletSourceControl.js

@@ -1,94 +0,0 @@
-import { findIndex } from '../../shared/findIndex.js'
-import * as Focus from '../Focus/Focus.js'
-import * as InputBox from '../InputBox/InputBox.js'
-import * as KeyBindings from '../KeyBindings/KeyBindings.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as Assert from '../Assert/Assert.js'
-
-export const name = 'Source Control'
-
-const getFileName = (file) => {
-  return file.slice(file.lastIndexOf('/') + 1)
-}
-
-const create$Item = (item) => {
-  const $Item = document.createElement('li')
-  $Item.className = 'TreeItem'
-  $Item.textContent = getFileName(item.file)
-  $Item.title = `${item.file}`
-  // TODO use same virtual list as for explorer
-  $Item.style.position = 'relative'
-  return $Item
-}
-
-const handleFocus = () => {
-  Focus.setFocus('sourceControlInput')
-}
-
-const handleClick = (event) => {
-  const $Target = event.target
-  const $Parent = $Target.closest('.ViewletTree')
-  const index = findIndex($Parent, $Target)
-  // TODO ignore when index === -1
-  RendererWorker.send([
-    /* viewletCommand */ 2133,
-    /* viewletId */ 'Source Control',
-    /* type */ 'handleClick',
-    /* index */ index,
-  ])
-}
-
-const getPlaceHolderText = () => {
-  return `Message (${KeyBindings.lookupKeyBinding(
-    'scm.acceptInput'
-  )} to commit on 'master'`
-}
-
-export const create = () => {
-  const $ViewSourceControlInput = InputBox.create()
-  $ViewSourceControlInput.placeholder = getPlaceHolderText()
-  $ViewSourceControlInput.onfocus = handleFocus
-  $ViewSourceControlInput.ariaLabel = 'Source Control Input'
-  const $ViewletTree = document.createElement('ul')
-  $ViewletTree.className = 'ViewletTree'
-  $ViewletTree.onclick = handleClick
-  const $Viewlet = document.createElement('div')
-  $Viewlet.dataset.viewletId = 'SourceControl'
-  $Viewlet.className = 'Viewlet'
-  $Viewlet.tabIndex = 0
-  $Viewlet.append($ViewSourceControlInput, $ViewletTree)
-  return {
-    $Viewlet,
-    $ViewletTree,
-    $ViewSourceControlInput,
-  }
-}
-
-export const dispose = () => {}
-
-export const setChangedFiles = (state, changedFiles) => {
-  Assert.object(state)
-  Assert.array(changedFiles.workingTree)
-  // console.log({context: changedFiles})
-  console.log({ changedFiles })
-  const $$Entries = changedFiles.workingTree.map(create$Item)
-  state.$ViewletTree.append(...$$Entries)
-}
-
-export const setError = (state, error) => {
-  Assert.object(state)
-  Assert.string(error)
-  const $Error = document.createElement('div')
-  $Error.className = 'Error'
-  $Error.textContent = error
-  state.$ViewletTree.append($Error)
-}
-
-export const setInputValue = (state, value) => {
-  const { $ViewSourceControlInput } = state
-  $ViewSourceControlInput.value = value
-}
-
-export const focus = (state) => {
-  state.$ViewSourceControlInput.focus()
-}