@lvce-editor/server 0.0.28 → 0.0.31

package/static/0e4d46a/packages/renderer-process/src/parts/Viewlet/ViewletList.js

@@ -0,0 +1,214 @@
+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'
+
+export const name = 'List'
+
+const handleWheel = (event) => {
+  switch (event.deltaMode) {
+    case event.DOM_DELTA_LINE:
+      RendererWorker.send(
+        /* ViewletExtensions.handleWheel */ 873,
+        /* deltaY */ event.deltaY
+      )
+      break
+    case event.DOM_DELTA_PIXEL:
+      RendererWorker.send(
+        /* ViewletExtensions.handleWheel */ 873,
+        /* deltaY */ event.deltaY
+      )
+      break
+    default:
+      break
+  }
+}
+
+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
+  // )
+}
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const handleFocus = (event) => {
+  const $Target = event.target
+  $Target.classList.add('FocusOutline')
+  // TODO maybe have one focus listener inside Viewlet.js instead of each viewlet
+  Focus.setFocus('ViewletList')
+
+  // RendererWorker.send(/* ViewletExtensions.focusIndex */ 868, /* index */ -1)
+}
+
+const handleScrollBarMouseDown = (event) => {
+  const $Target = event.target
+  if ($Target.className === 'ScrollBarThumb') {
+    window.addEventListener('mousemove', handleScrollBarThumbMouseMove)
+    window.addEventListener('mouseup', handleScrollBarThumbMouseUp)
+  } else {
+    const y = event.clientY
+    console.log({ y })
+    RendererWorker.send(/* ViewletList.handleScrollBarClick */ 878, /* y */ y)
+  }
+}
+
+const handleScrollBarThumbMouseMove = (event) => {
+  const y = event.clientY
+  RendererWorker.send(/* ViewletList.handleScrollBarMouseMove */ 877, /* y */ y)
+}
+
+const handleScrollBarThumbMouseUp = () => {
+  window.removeEventListener('mousemove', handleScrollBarThumbMouseMove)
+  window.removeEventListener('mouseup', handleScrollBarThumbMouseUp)
+}
+
+export const create = ({ create$ListItem, render$ListItem, handleClick }) => {
+  const $List = document.createElement('div')
+  $List.className = 'ExtensionList'
+  $List.tabIndex = 0
+  $List.ariaLabel = 'Extensions'
+  // @ts-ignore
+  $List.role = 'list'
+  $List.oncontextmenu = handleContextMenu
+  $List.onclick = handleClick
+  $List.onfocus = handleFocus
+
+  const $ScrollBarThumb = document.createElement('div')
+  $ScrollBarThumb.className = 'ScrollBarThumb'
+
+  const $ScrollBar = document.createElement('div')
+  $ScrollBar.className = 'ScrollBarSmall'
+  $ScrollBar.onmousedown = handleScrollBarMouseDown
+  $ScrollBar.append($ScrollBarThumb)
+
+  const $Viewlet = document.createElement('div')
+  $Viewlet.className = 'Viewlet'
+  $Viewlet.dataset.viewletId = 'List'
+  $Viewlet.append($List, $ScrollBar)
+  $Viewlet.addEventListener('wheel', handleWheel, { passive: true })
+
+  return {
+    $Viewlet,
+    $List,
+    $ScrollBarThumb,
+    create$ListItem,
+    render$ListItem,
+  }
+}
+
+// TODO possibly use aria active descendant instead
+export const setFocusedIndex = (state, oldFocusedIndex, newFocusedIndex) => {
+  Assert.object(state)
+  Assert.number(oldFocusedIndex)
+  Assert.number(newFocusedIndex)
+  const { $List } = state
+  if (oldFocusedIndex !== -1) {
+    console.log($List)
+    $List.children[oldFocusedIndex].classList.remove('Focused')
+  }
+  if (newFocusedIndex === -1) {
+    $List.removeAttribute('aria-activedescendant')
+    $List.classList.add('FocusOutline')
+  } else {
+    $List.setAttribute(
+      'aria-activedescendant',
+      $List.children[newFocusedIndex].id
+    )
+    $List.classList.remove('FocusOutline')
+    $List.children[newFocusedIndex].classList.add('Focused')
+  }
+}
+
+const render$ListLess = ({
+  $List,
+  create$ListItem,
+  render$ListItem,
+  items,
+}) => {
+  for (let i = 0; i < $List.children.length; i++) {
+    render$ListItem($List.children[i], items[i])
+  }
+  const fragment = document.createDocumentFragment()
+  for (let i = $List.children.length; i < items.length; i++) {
+    const $Extension = create$ListItem()
+    render$ListItem($Extension, items[i])
+    fragment.append($Extension)
+  }
+  $List.append(fragment)
+}
+
+const render$ListEqual = ({ $List, render$ListItem, items }) => {
+  for (let i = 0; i < items.length; i++) {
+    render$ListItem($List.children[i], items[i])
+  }
+}
+
+const render$ListMore = ({ $List, render$ListItem, items }) => {
+  for (let i = 0; i < items.length; i++) {
+    render$ListItem($List.children[i], items[i])
+  }
+  const diff = $List.children.length - items.length
+  for (let i = 0; i < diff; i++) {
+    $List.lastChild.remove()
+  }
+}
+
+const render$List = (state) => {
+  const { $List, items } = state
+  if ($List.children.length < items.length) {
+    // console.log('RENDER LESS')
+    render$ListLess(state)
+  } else if ($List.children.length === items.length) {
+    // console.log('RENDER EQUAL')
+    render$ListEqual(state)
+  } else {
+    // console.log('RENDER MORE')
+    render$ListMore(state)
+  }
+}
+
+export const setNegativeMargin = (state, negativeMargin) => {
+  const { $List } = state
+  $List.style.top = `${negativeMargin}px`
+  // Assert.number(negativeMargin)
+  // const { $NegativeMargin } = state
+  // $NegativeMargin.style.marginTop = `${negativeMargin}px`
+}
+
+// TODO a more efficient approach would be
+export const setItems = (state, items) => {
+  Assert.object(state)
+  Assert.array(items)
+  state.items = items
+  render$List(state)
+}
+
+export const dispose = (state) => {}
+
+export const setContentHeight = (state, height) => {
+  const { $ExtensionList } = state
+  $ExtensionList.style.height = `${height}px`
+}
+
+export const setScrollBar = (state, scrollBarY, scrollBarHeight) => {
+  const { $ScrollBarThumb } = state
+  $ScrollBarThumb.style.top = `${scrollBarY}px`
+  $ScrollBarThumb.style.height = `${scrollBarHeight}px`
+}

package/static/0e4d46a/packages/renderer-process/src/parts/ViewletActivityBar/ViewletActivityBar.js

@@ -0,0 +1,183 @@
+import * as Assert from '../Assert/Assert.js'
+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'
+
+// TODO set aria-selected false when sidebar is collapsed
+
+const create$ActivityBarItemIcon = (icon) => {
+  const $ActivityBarItemIcon = document.createElement('div')
+  $ActivityBarItemIcon.className = 'ActivityBarItemIcon'
+  // @ts-ignore
+  $ActivityBarItemIcon.style.maskImage = `url(${icon})`
+  $ActivityBarItemIcon.style.webkitMaskImage = `url(${icon})`
+  return $ActivityBarItemIcon
+}
+
+// TODO assetDir might not work with non-builtin extension icons
+const create$ActivityBarItem = (item) => {
+  const assetDir = Platform.getAssetDir()
+  const $ActivityBarItemIcon = create$ActivityBarItemIcon(
+    `${assetDir}/${item.icon}`
+  )
+  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.tabIndex = -1
+  $ActivityBarItem.dataset.viewletId = item.id
+  if (item.keyShortcuts) {
+    $ActivityBarItem.ariaKeyShortcuts = item.keyShortcuts
+  }
+  switch (item.flags) {
+    case /* Tab */ 1:
+      // @ts-ignore
+      $ActivityBarItem.role = 'tab'
+      $ActivityBarItem.ariaSelected = 'false'
+      break
+    case /* Button */ 2:
+      // @ts-ignore
+      $ActivityBarItem.role = 'button'
+      $ActivityBarItem.ariaHasPopup = 'true'
+      break
+    default:
+      console.warn(`unknown activity bar item flags ${item.flags}`)
+      break
+  }
+  $ActivityBarItem.append($ActivityBarItemIcon)
+  return $ActivityBarItem
+}
+
+const get$ItemFromEvent = (event) => {
+  const $Target = event.target
+  switch ($Target.className) {
+    case 'ActivityBarItemIcon':
+      return $Target.parentNode
+    case 'ActivityBarItem':
+      return $Target
+    default:
+      return undefined
+  }
+}
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const handleMousedown = (event) => {
+  if (event.button !== 0) {
+    return
+  }
+  const $Item = get$ItemFromEvent(event)
+  if (!$Item) {
+    return
+  }
+  event.preventDefault()
+  event.stopPropagation()
+  const index = getNodeIndex($Item)
+  const x = event.clientX
+  const y = event.clientY
+  RendererWorker.send(
+    /* ActivityBar.handleClick */ 'ActivityBar.handleClick',
+    /* index */ index,
+    /* x */ x,
+    /* y */ y
+  )
+}
+
+const handleContextMenu = (event) => {
+  event.preventDefault()
+  // TODO also move side bar position command
+  const x = event.clientX
+  const y = event.clientY
+  RendererWorker.send(
+    /* activityBarHandleContextMenu */ 'ActivityBar.handleContextMenu',
+    /* x */ x,
+    /* y */ y
+  )
+}
+
+const handleBlur = () => {}
+
+export const name = 'ActivityBar'
+
+export const create = () => {
+  const $ActivityBar = Layout.state.$ActivityBar
+  $ActivityBar.role = 'toolbar'
+  $ActivityBar.ariaLabel = 'Activity Bar'
+  $ActivityBar.ariaOrientation = 'vertical'
+  // $ActivityBar.append(...activityBarItems.map(create$ActivityBarItem))
+  $ActivityBar.onmousedown = handleMousedown
+  $ActivityBar.oncontextmenu = handleContextMenu
+  $ActivityBar.onblur = handleBlur
+  $ActivityBar.addEventListener('focusin', handleFocusIn)
+  // $ActivityBar.children[focusedIndex].tabIndex = 0
+  return {
+    $ActivityBar,
+  }
+}
+
+export const dispose = (state) => {}
+
+export const setItems = (state, activityBarItems) => {
+  Assert.object(state)
+  Assert.array(activityBarItems)
+  const $ActivityBar = state.$ActivityBar
+  while ($ActivityBar.firstChild) {
+    $ActivityBar.firstChild.remove()
+  }
+  $ActivityBar.append(...activityBarItems.map(create$ActivityBarItem))
+}
+
+const handleFocusIn = () => {
+  Focus.setFocus('activityBar')
+}
+
+export const selectIndex = (state, oldIndex, newIndex) => {
+  if (oldIndex !== -1) {
+    const $OldItem = state.$ActivityBar.children[oldIndex]
+    $OldItem.ariaSelected = 'false'
+    if (newIndex !== -1) {
+      $OldItem.tabIndex = -1
+    }
+  }
+  if (newIndex !== -1) {
+    const $NewItem = state.$ActivityBar.children[newIndex]
+    $NewItem.ariaSelected = 'true'
+    $NewItem.tabIndex = 0
+  }
+}
+
+const focus$Item = ($Item) => {
+  Focus.focus($Item, 'activityBar')
+}
+
+export const setFocusedIndex = (state, oldIndex, newIndex) => {
+  const { $ActivityBar } = state
+  if (oldIndex !== -1) {
+    const $OldItem = $ActivityBar.children[oldIndex]
+    $OldItem.tabIndex = -1
+    $OldItem.classList.remove('FocusOutline')
+  }
+  if (newIndex !== -1) {
+    const $NewItem = $ActivityBar.children[newIndex]
+    $NewItem.tabIndex = 0
+    $NewItem.classList.add('FocusOutline')
+    focus$Item($NewItem)
+  }
+}
+
+export const setBadgeCount = (state, index, count) => {
+  const { $ActivityBar } = state
+  const $Item = $ActivityBar.children[index]
+  const $Badge = document.createElement('div')
+  $Badge.className = 'ActivityBarItemBadge'
+  $Badge.textContent = `${count}`
+  // @ts-ignore
+  $Item.append($Badge)
+}

package/static/0e4d46a/packages/renderer-process/src/parts/ViewletEditorCompletion/ViewletEditorCompletion.js

@@ -0,0 +1,133 @@
+import * as Focus from '../Focus/Focus.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as Widget from '../Widget/Widget.js'
+
+export const name = 'EditorCompletion'
+
+// TODO technically, editorCompletions could also be a viewlet so that
+// all state is managed by viewlet and this module is completely functional
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const getIndex = ($Target) => {
+  if ($Target.classList.contains('EditorCompletionItem')) {
+    return getNodeIndex($Target)
+  }
+  return -1
+}
+
+const handleMousedown = (event) => {
+  event.preventDefault()
+  const $Target = event.target
+  const index = getIndex($Target)
+  if (index === -1) {
+    return
+  }
+  RendererWorker.send(
+    /* ViewletEditorCompletion.selectIndex */ 'EditorCompletion.selectIndex',
+    /* index */ index
+  )
+}
+
+const create$CompletionItem = (item, index) => {
+  const $CompletionItem = document.createElement('li')
+  $CompletionItem.textContent = item.label
+  // @ts-ignore
+  $CompletionItem.role = 'option'
+  $CompletionItem.id = `CompletionItem-${index}`
+  $CompletionItem.className = `EditorCompletionItem Icon${item.icon}`
+  return $CompletionItem
+}
+
+export const create = () => {
+  // TODO recycle nodes
+  const $Viewlet = document.createElement('ul')
+  $Viewlet.className = 'Viewlet Completions'
+  $Viewlet.dataset.viewletId = name
+  $Viewlet.id = 'Completions'
+  // @ts-ignore
+  $Viewlet.role= 'listbox'
+  $Viewlet.ariaLabel = 'Suggest'
+  $Viewlet.onmousedown = handleMousedown
+  return {
+    $Viewlet,
+  }
+}
+
+// TODO show should be passed active cursor position
+// this would make this function easier to test as it would avoid dependency on globals of other files
+
+export const setPosition = (state, x, y) => {
+  const { $Viewlet } = state
+  $Viewlet.style.transform = `translate(${x}px, ${y}px)`
+}
+
+export const setItems = (state, items, reason, focusedIndex) => {
+  console.log('COMPLETION SHOW', items)
+  const { $Viewlet } = state
+  while ($Viewlet.firstChild) {
+    $Viewlet.firstChild.remove()
+  }
+  Focus.setAdditionalFocus('editorCompletions')
+  if (items.length === 0) {
+    if (reason === /* automatically */ 0) {
+      return
+    }
+    $Viewlet.textContent = 'No Results'
+    Widget.append($Viewlet)
+    return
+  }
+  // TODO recycle nodes
+  $Viewlet.append(...items.map(create$CompletionItem))
+  Widget.append($Viewlet)
+  focusIndex(state, 0, 0)
+  // TODO set right aria attributes on $EditorInput
+}
+
+export const move = (state, x, y) => {
+  const { $Viewlet } = state
+  $Viewlet.style.transform = `translate(${x}px, ${y}px)`
+}
+
+export const dispose = (state) => {
+  Widget.remove(state.$Viewlet)
+  // state.$EditorInput.removeAttribute('aria-activedescendant')
+  Focus.removeAdditionalFocus('editorCompletions')
+}
+
+// TODO should pass maybe oldIndex to be removed
+// but keeping $ActiveItem in state also works
+export const focusIndex = (state, oldIndex, newIndex) => {
+  const $Viewlet = state.$Viewlet
+  if (oldIndex !== -1) {
+    const $OldItem = $Viewlet.children[oldIndex]
+    $OldItem.classList.remove('Focused')
+  }
+  if (newIndex !== -1) {
+    const $NewItem = $Viewlet.children[newIndex]
+    $NewItem.classList.add('Focused')
+  }
+  Focus.setAdditionalFocus('editorCompletions')
+  // state.$EditorInput.setAttribute('aria-activedescendant', $NewItem.id) // TODO use idl once supported
+}
+
+export const showLoading = (state, x, y) => {
+  const { $Viewlet } = state
+  $Viewlet.style.transform = `translate(${x}px, ${y}px)`
+  const $Loading = document.createElement('div')
+  $Loading.textContent = 'Loading'
+  $Viewlet.append($Loading)
+  Widget.append($Viewlet)
+  Focus.setAdditionalFocus('editorCompletions')
+}
+
+export const handleError = (state, error) => {
+  const { $Viewlet } = state
+  $Viewlet.textContent = `${error}`
+}