@lvce-editor/server 0.2.2 → 0.4.1

package/static/{e2dcaea → b10f46d}/packages/renderer-process/src/parts/ViewletActivityBar/ViewletActivityBar.js

@@ -1,10 +1,9 @@
+import * as ActivityBarItemFlags from '../ActivityBarItemFlags/ActvityBarItemFlags.js'
 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'
-import * as ActivityBarItemFlags from '../ActivityBarItemFlags/ActvityBarItemFlags.js'
-import * as MouseEventTypes from '../MouseEventType/MouseEventType.js'
+import * as ViewletActivityBarEvents from './ViewletActivityBarEvents.js'
 
 // TODO set aria-selected false when sidebar is collapsed
 
@@ -51,61 +50,6 @@ const create$ActivityBarItem = (item) => {
   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 !== MouseEventTypes.LeftClick) {
-    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 = () => {
@@ -114,10 +58,13 @@ export const create = () => {
   $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.onmousedown = ViewletActivityBarEvents.handleMousedown
+  $ActivityBar.oncontextmenu = ViewletActivityBarEvents.handleContextMenu
+  $ActivityBar.onblur = ViewletActivityBarEvents.handleBlur
+  $ActivityBar.addEventListener(
+    'focusin',
+    ViewletActivityBarEvents.handleFocusIn
+  )
   // $ActivityBar.children[focusedIndex].tabIndex = 0
   return {
     $ActivityBar,
@@ -136,10 +83,6 @@ export const setItems = (state, activityBarItems) => {
   $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]

package/static/b10f46d/packages/renderer-process/src/parts/ViewletActivityBar/ViewletActivityBarEvents.js

@@ -0,0 +1,62 @@
+import * as Focus from '../Focus/Focus.js'
+import * as MouseEventTypes from '../MouseEventType/MouseEventType.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+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
+}
+
+export const handleMousedown = (event) => {
+  if (event.button !== MouseEventTypes.LeftClick) {
+    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
+  )
+}
+
+export 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
+  )
+}
+
+export const handleBlur = () => {}
+
+export const handleFocusIn = () => {
+  Focus.setFocus('activityBar')
+}

package/static/b10f46d/packages/renderer-process/src/parts/ViewletExplorer/ViewletExplorer.js

@@ -0,0 +1,260 @@
+import * as Assert from '../Assert/Assert.js'
+import * as DirentType from '../DirentType/DirentType.js'
+import * as Focus from '../Focus/Focus.js' // TODO focus is never needed at start -> use command.execute which lazy-loads focus module
+import * as InputBox from '../InputBox/InputBox.js'
+import * as ViewletExplorerEvents from './ViewletExplorerEvents.js'
+
+export const name = 'Explorer'
+
+const activeId = 'TreeItemActive'
+
+export const create = () => {
+  const $Viewlet = document.createElement('div')
+  $Viewlet.className = 'Viewlet'
+  $Viewlet.tabIndex = 0
+  $Viewlet.dataset.viewletId = 'Explorer'
+  // @ts-ignore
+  $Viewlet.role = 'tree'
+  $Viewlet.ariaLabel = 'Files Explorer'
+  $Viewlet.onmousedown = ViewletExplorerEvents.handleMouseDown
+  $Viewlet.oncontextmenu = ViewletExplorerEvents.handleContextMenu
+  // TODO use the other mouse events that capture automatically
+  $Viewlet.addEventListener(
+    'mouseenter',
+    ViewletExplorerEvents.handleMouseEnter,
+    { capture: true }
+  )
+  $Viewlet.addEventListener(
+    'mouseleave',
+    ViewletExplorerEvents.handleMouseLeave,
+    { capture: true }
+  )
+  $Viewlet.addEventListener('wheel', ViewletExplorerEvents.handleWheel, {
+    passive: true,
+  })
+  $Viewlet.onblur = ViewletExplorerEvents.handleBlur
+  $Viewlet.ondragstart = ViewletExplorerEvents.handleDragStart
+  $Viewlet.ondragover = ViewletExplorerEvents.handleDragOver
+  $Viewlet.ondrop = ViewletExplorerEvents.handleDrop
+  return {
+    $Viewlet,
+  }
+}
+
+const create$Row = () => {
+  const $Row = document.createElement('div')
+  // @ts-ignore
+  $Row.role = 'treeitem'
+  $Row.className = 'TreeItem'
+  $Row.draggable = true
+  const $LabelText = document.createTextNode('')
+  const $Label = document.createElement('div')
+  $Label.className = 'TreeItemLabel'
+  $Label.append($LabelText)
+  const $Icon = document.createElement('i')
+  $Row.append($Icon, $Label)
+  return $Row
+}
+
+// TODO rename to renderDirent
+const render$Row = ($Row, rowInfo) => {
+  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
+  // windows narrator reads heading level 1
+  $Row.ariaLevel = `${rowInfo.depth}`
+  $Row.ariaPosInSet = `${rowInfo.posInSet}`
+  $Row.ariaLabel = rowInfo.name
+  $Row.ariaDescription = ''
+  switch (rowInfo.type) {
+    // TODO decide on directory vs folder
+    case DirentType.Directory:
+      $Row.ariaExpanded = 'false'
+      break
+    case DirentType.DirectoryExpanding:
+      $Row.ariaExpanded = 'true' // TODO tree should be aria-busy then
+      break
+    case DirentType.DirectoryExpanded:
+      $Row.ariaExpanded = 'true'
+      break
+    case DirentType.File:
+      $Row.ariaExpanded = undefined
+      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)
+  }
+}
+
+export const handleError = (state, message) => {
+  Assert.object(state)
+  Assert.string(message)
+  state.$Viewlet.textContent = message
+}
+
+export const updateDirents = (state, dirents) => {
+  Assert.object(state)
+  Assert.array(dirents)
+  render$Rows(state.$Viewlet, dirents)
+}
+
+export const setFocusedIndex = (state, oldIndex, newIndex) => {
+  Assert.object(state)
+  Assert.number(oldIndex)
+  Assert.number(newIndex)
+  const { $Viewlet } = state
+  switch (oldIndex) {
+    case -2:
+      break
+    case -1:
+      $Viewlet.classList.remove('FocusOutline')
+      break
+    default:
+      const $Dirent = $Viewlet.children[oldIndex]
+      if ($Dirent) {
+        $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()
+      Focus.setFocus('Explorer')
+      break
+    default:
+      const $Dirent = $Viewlet.children[newIndex]
+      $Dirent.id = activeId
+      $Viewlet.focus()
+      $Viewlet.setAttribute('aria-activedescendant', activeId)
+      Focus.setFocus('Explorer')
+      break
+  }
+}
+
+export const dispose = (state) => {}
+
+export const hoverIndex = (state, oldIndex, newIndex) => {
+  Assert.object(state)
+  Assert.number(oldIndex)
+  Assert.number(newIndex)
+  if (oldIndex !== -1) {
+    const $OldItem = state.$Viewlet.children[oldIndex]
+    $OldItem.classList.remove('Hover')
+  }
+  const $NewItem = state.$Viewlet.children[newIndex]
+  $NewItem.classList.add('Hover')
+}
+
+export const showCreateFileInputBox = (state, index) => {
+  const { $Viewlet } = state
+  const $InputBox = InputBox.create()
+  if (index === -1) {
+    $Viewlet.append($InputBox)
+  } else {
+    const $Dirent = $Viewlet.children[index]
+    // TODO this should never happen
+    if (!$Dirent) {
+      throw new Error(`dirent at index ${index} should be defined`)
+    }
+    $Dirent.before($InputBox)
+  }
+  $InputBox.focus()
+  Focus.setFocus('ExplorerCreateFile')
+}
+
+export const hideCreateFileInputBox = (state, index) => {
+  const { $Viewlet } = state
+  if (index === -1) {
+    const $InputBox = $Viewlet.lastChild
+    $InputBox.remove()
+    return $InputBox.value
+  }
+  const $InputBox = $Viewlet.children[index]
+  $InputBox.remove()
+  return $InputBox.value
+}
+
+export const showRenameInputBox = (state, index, name) => {
+  const $InputBox = InputBox.create()
+  $InputBox.value = name
+  const $Dirent = state.$Viewlet.children[index]
+  $Dirent.replaceWith($InputBox)
+  $InputBox.select()
+  $InputBox.setSelectionRange(0, $InputBox.value.length)
+  Focus.setFocus('ExplorerRename')
+}
+
+export const hideRenameBox = (state, index, dirent) => {
+  const $InputBox = state.$Viewlet.children[index]
+  const $Dirent = create$Row()
+  render$Row($Dirent, dirent)
+  $InputBox.replaceWith($Dirent)
+  // $Dirent.focus()
+  return $InputBox.value
+}
+
+export const setDropTargets = (state, oldDropTargets, newDropTargets) => {
+  const { $Viewlet } = state
+  for (const oldIndex of oldDropTargets) {
+    if (oldIndex === -1) {
+      $Viewlet.classList.remove('DropTarget')
+    } else {
+      $Viewlet.children[oldIndex].classList.remove('DropTarget')
+    }
+  }
+  for (const newIndex of newDropTargets) {
+    if (newIndex === -1) {
+      $Viewlet.classList.add('DropTarget')
+    } else {
+      $Viewlet.children[newIndex].classList.add('DropTarget')
+    }
+  }
+}

package/static/b10f46d/packages/renderer-process/src/parts/ViewletExplorer/ViewletExplorerEvents.js

@@ -0,0 +1,211 @@
+import * as Focus from '../Focus/Focus.js' // TODO focus is never needed at start -> use command.execute which lazy-loads focus module
+import * as MouseEventType from '../MouseEventType/MouseEventType.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as WheelEventType from '../WheelEventType/WheelEventType.js'
+
+// TODO put drop into separate module and use executeCommand to call it
+
+// TODO drag and drop should be loaded on demand
+const getAllEntries = async (dataTransfer) => {
+  const topLevelEntries = Array.from(dataTransfer.items).map((item) =>
+    item.webkitGetAsEntry()
+  )
+  const allEntries = await new Promise((resolve, reject) => {
+    const result = []
+    let finished = 0
+    let total = 0
+
+    const fileCallback = (file) => {
+      finished++
+      result.push({
+        type: 1,
+        // path: entry.fullPath,
+        file,
+      })
+      if (finished === total) {
+        resolve(result)
+      }
+    }
+
+    const handleEntryFile = (entry) => {
+      entry.file(fileCallback)
+    }
+
+    const entriesCallback = (childEntries) => {
+      handleEntries(childEntries)
+      finished++
+      if (finished === total) {
+        resolve(result)
+      }
+    }
+
+    const handleEntryDirectory = (entry) => {
+      result.push({
+        type: 2,
+        path: entry.fullPath,
+      })
+      const dirReader = entry.createReader()
+      dirReader.readEntries(entriesCallback)
+    }
+
+    const handleEntries = (entries) => {
+      total += entries.length
+      for (const entry of entries) {
+        if (entry.isFile) {
+          handleEntryFile(entry)
+        } else if (entry.isDirectory) {
+          handleEntryDirectory(entry)
+        } else {
+        }
+      }
+    }
+
+    handleEntries(topLevelEntries)
+  })
+  return allEntries
+}
+
+export const handleFocus = (event) => {
+  Focus.setFocus('Explorer')
+  const $Target = event.target
+  if ($Target.className === 'InputBox') {
+    return
+  }
+  event.preventDefault()
+  RendererWorker.send(/* Explorer.focus */ 'Explorer.focus')
+}
+
+export const handleBlur = (event) => {
+  RendererWorker.send(/* Explorer.handleBlur */ 'Explorer.handleBlur')
+}
+
+/**
+ *
+ * @param {DragEvent} event
+ */
+export const handleDragOver = (event) => {
+  event.dataTransfer.effectAllowed = 'copyMove'
+  // console.log('dragover', event)
+  event.dataTransfer.dropEffect = 'copy'
+  event.preventDefault()
+  const { clientX, clientY } = event
+  RendererWorker.send('Explorer.handleDragOver', clientX, clientY)
+  // state.element.classList.add('DropTarget')
+}
+
+/**
+ * @param {DragEvent} event
+ */
+export const handleDragStart = (event) => {
+  event.dataTransfer.effectAllowed = 'copyMove'
+  // event.dataTransfer.setData('DownloadURL', '/tmp/some-file.txt')
+  // event.preventDefault()
+  event.dataTransfer.setData('text/uri-list', 'https://example.com/foobar')
+  // event.dataTransfer.setData('x-special/nautilus-clipboard', 'hello-world')
+  // event.dataTransfer.setData('text/plain', 'abc')
+}
+
+/**
+ *
+ * @param {DragEvent} event
+ */
+export const handleDrop = (event) => {
+  event.preventDefault()
+  event.stopPropagation()
+  const { files, dropEffect } = event.dataTransfer
+  const { clientX, clientY } = event
+  RendererWorker.send('Explorer.handleDrop', clientX, clientY, files)
+}
+
+const handleContextMenuMouse = (event) => {
+  const x = event.clientX
+  const y = event.clientY
+  RendererWorker.send(
+    /* Explorer.handleContextMenuMouseAt */ 'Explorer.handleContextMenuMouseAt',
+    /* x */ x,
+    /* y */ y
+  )
+}
+
+const handleContextMenuKeyboard = (event) => {
+  RendererWorker.send(
+    /* Explorer.handleContextMenuKeyboard */ 'Explorer.handleContextMenuKeyboard'
+  )
+}
+
+// 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
+}
+
+export const handleContextMenu = (event) => {
+  event.preventDefault()
+  switch (event.button) {
+    case MouseEventType.Keyboard:
+      return handleContextMenuKeyboard(event)
+    default:
+      return handleContextMenuMouse(event)
+  }
+}
+
+export const handleMouseDown = (event) => {
+  if (event.button !== MouseEventType.LeftClick) {
+    return
+  }
+  const x = event.clientX
+  const y = event.clientY
+  RendererWorker.send(
+    /* Explorer.handleClickAt */ 'Explorer.handleClickAt',
+    /* x */ x,
+    /* y */ y
+  )
+}
+
+export const handleWheel = (event) => {
+  switch (event.deltaMode) {
+    case WheelEventType.DomDeltaLine:
+      RendererWorker.send(
+        /* Explorer.handleWheel */ 'Explorer.handleWheel',
+        /* deltaY */ event.deltaY
+      )
+      break
+    case WheelEventType.DomDeltaPixel:
+      RendererWorker.send(
+        /* Explorer.handleWheel */ 'Explorer.handleWheel',
+        /* deltaY */ event.deltaY
+      )
+      break
+    default:
+      break
+  }
+}
+
+export const handleMouseEnter = (event) => {
+  // const $Target = event.target
+  // const index = findIndex($Target)
+  // if (index === -1) {
+  //   return
+  // }
+  // RendererWorker.send(
+  //   /* Explorer.handleMouseEnter */ 'Explorer.handleMouseEnter',
+  //   /* index */ index
+  // )
+}
+
+export const handleMouseLeave = (event) => {
+  // const $Target = event.target
+  // const index = findIndex($Target)
+  // if (index === -1) {
+  //   return
+  // }
+  // RendererWorker.send(
+  //   /* Explorer.handleMouseLeave */ 'Explorer.handleMouseLeave',
+  //   /* index */ index
+  // )
+}