@lvce-editor/server 0.7.2 → 0.7.4

package/static/{18087fa → ce25a54}/packages/renderer-process/src/parts/ViewletExtensions/ViewletExtensions.js

@@ -61,7 +61,7 @@ export const create = () => {
   // @ts-ignore
   $ExtensionList.role = 'list'
   $ExtensionList.oncontextmenu = ViewletExtensionsEvents.handleContextMenu
-  $ExtensionList.onclick = ViewletExtensionsEvents.handleClick
+  $ExtensionList.onpointerdown = ViewletExtensionsEvents.handlePointerDown
   $ExtensionList.onfocus = ViewletExtensionsEvents.handleFocus
   $ExtensionList.onscroll = ViewletExtensionsEvents.handleScroll
   $ExtensionList.addEventListener(

package/static/{18087fa → ce25a54}/packages/renderer-process/src/parts/ViewletExtensions/ViewletExtensionsEvents.js

@@ -47,46 +47,58 @@ const getNodeIndex = ($Node) => {
   return index
 }
 
-export const handleClick = (event) => {
-  const $Target = event.target
-  console.log($Target)
-  switch ($Target.className) {
-    case 'Extension': {
-      const index = getNodeIndex($Target)
-      RendererWorker.send(
-        /* Extensions.handleClick */ 'Extensions.handleClick',
-        /* index */ index
-      )
+const handlePointerDownExtension = ($Target) => {
+  const index = getNodeIndex($Target)
+  RendererWorker.send(
+    /* Extensions.handleClick */ 'Extensions.handleClick',
+    /* index */ index
+  )
+}
+
+const handlePointerDownExtensionDetail = ($Target) => {
+  const index = getNodeIndex($Target.parentNode.parentNode)
+  RendererWorker.send(
+    /* Extensions.handleClick */ 'Extensions.handleClick',
+    /* index */ index
+  )
+}
+
+const handlePointerDownExtensionAuthorName = ($Target) => {
+  const index = getNodeIndex($Target.parentNode.parentNode.parentNode)
+  RendererWorker.send(
+    /* Extensions.handleClick */ 'Extensions.handleClick',
+    /* index */ index
+  )
+}
+
+export const handlePointerDown = (event) => {
+  const { target, button } = event
+  if (button !== MouseEventType.LeftClick) {
+    return
+  }
+  switch (target.className) {
+    case 'ExtensionListItem':
+      handlePointerDownExtension(target)
       break
-    }
     case 'ExtensionName':
     case 'ExtensionDescription':
-    case 'ExtensionFooter': {
-      const index = getNodeIndex($Target.parentNode.parentNode)
-      RendererWorker.send(
-        /* Extensions.handleClick */ 'Extensions.handleClick',
-        /* index */ index
-      )
+    case 'ExtensionFooter':
+      handlePointerDownExtensionDetail(target)
       break
-    }
-    case 'ExtensionAuthorName': {
-      const index = getNodeIndex($Target.parentNode.parentNode.parentNode)
-      RendererWorker.send(
-        /* Extensions.handleClick */ 'Extensions.handleClick',
-        /* index */ index
-      )
+    case 'ExtensionAuthorName':
+      handlePointerDownExtensionAuthorName(target)
       break
-    }
     default:
       break
   }
 }
 
 const handleContextMenuMouse = (event) => {
+  const { clientX, clientY } = event
   RendererWorker.send(
     /* Extensions.handleContextMenu */ 'Extensions.handleContextMenu',
-    /* x */ event.clientX,
-    /* y */ event.clientY
+    /* x */ clientX,
+    /* y */ clientY
   )
 }
 

package/static/{18087fa → ce25a54}/packages/renderer-process/src/parts/ViewletKeyBindings/ViewletKeyBindings.js

@@ -8,6 +8,8 @@ export const create = () => {
   const $InputBox = InputBox.create()
   $InputBox.type = 'search'
   $InputBox.placeholder = 'Search Key Bindings' // TODO placeholder string should come from renderer worker
+  // @ts-ignore
+  $InputBox.ariaDescription = 'Results will update as you type'
   $InputBox.oninput = ViewletkeyBindingsEvents.handleInput
 
   const $KeyBindingsHeader = document.createElement('div')

package/static/{18087fa → ce25a54}/packages/renderer-process/src/parts/ViewletModule/ViewletModule.js

@@ -58,6 +58,10 @@ export const load = (moduleId) => {
       return import('../ViewletEditorFindWidget/ViewletEditorFindWidget.js')
     case ViewletModuleId.ExtensionDetail:
       return import('../ViewletExtensionDetail/ViewletExtensionDetail.js')
+    case ViewletModuleId.TitleBarButtons:
+      return import('../ViewletTitleBarButtons/ViewletTitleBarButtons.js')
+    case ViewletModuleId.TitleBarMenuBar:
+      return import('../ViewletTitleBarMenuBar/ViewletTitleBarMenuBar.js')
     default:
       throw new Error('unknown module')
   }

package/static/{18087fa → ce25a54}/packages/renderer-process/src/parts/ViewletModuleId/ViewletModuleId.js

@@ -53,3 +53,7 @@ export const TitleBar = 'TitleBar'
 export const EditorFindWidget = 'EditorFindWidget'
 
 export const ExtensionDetail = 'ExtensionDetail'
+
+export const TitleBarMenuBar = 'TitleBarMenuBar'
+
+export const TitleBarButtons = 'TitleBarButtons'

package/static/ce25a54/packages/renderer-process/src/parts/ViewletTitleBar/ViewletTitleBar.js

@@ -0,0 +1,13 @@
+import * as Layout from '../Layout/Layout.js'
+
+export const create = () => {
+  // TODO set aria label for title bar menu
+  // TODO add tests for aria properties
+  const $TitleBar = Layout.state.$TitleBar
+  $TitleBar.ariaLabel = 'Title Bar'
+  $TitleBar.role = 'contentinfo'
+  return {
+    $TitleBar,
+    $Viewlet: $TitleBar,
+  }
+}

package/static/ce25a54/packages/renderer-process/src/parts/ViewletTitleBarButtons/ViewletTitleBarButtons.js

@@ -0,0 +1,55 @@
+import * as ViewletTitleBarButtonEvents from './ViewletTitleBarButtonsEvents.js'
+
+export const name = 'TitleBarButtons'
+
+const create$TitleBarButton = (id, icon, label) => {
+  const $Icon = document.createElement('i')
+  $Icon.className = `MaskIcon${icon}`
+
+  const $TitleBarButton = document.createElement('button')
+  $TitleBarButton.className = 'TitleBarButton'
+  $TitleBarButton.id = `TitleBarButton${id}`
+  $TitleBarButton.ariaLabel = label
+  $TitleBarButton.append($Icon)
+  return $TitleBarButton
+}
+
+export const create = () => {
+  const $ButtonMinimize = create$TitleBarButton(
+    'Minimize',
+    'Minimize',
+    'Minimize'
+  )
+  const $ButtonToggleMaximize = create$TitleBarButton(
+    'ToggleMaximize',
+    'ToggleMaximize',
+    'Toggle Maximize'
+  )
+  const $ButtonClose = create$TitleBarButton('Close', 'Close', 'Close')
+
+  const $TitleBarButtons = document.createElement('div')
+  $TitleBarButtons.id = 'TitleBarButtons'
+  $TitleBarButtons.onmousedown =
+    ViewletTitleBarButtonEvents.handleTitleBarButtonsClick
+  $TitleBarButtons.append($ButtonMinimize, $ButtonToggleMaximize, $ButtonClose)
+  return {
+    $TitleBarButtons,
+    $Viewlet: $TitleBarButtons,
+  }
+}
+
+export const dispose = (state) => {}
+
+export const setButtons = (state, buttons) => {
+  const { $TitleBarButtons } = state
+  for (const button of buttons) {
+    const $Icon = document.createElement('i')
+    $Icon.className = `MaskIcon${button.icon}`
+    const $TitleBarButton = document.createElement('button')
+    $TitleBarButton.className = 'TitleBarButton'
+    $TitleBarButton.id = `TitleBarButton${button.id}`
+    $TitleBarButton.ariaLabel = button.label
+    $TitleBarButton.append($Icon)
+    $TitleBarButtons.append($TitleBarButton)
+  }
+}

package/static/ce25a54/packages/renderer-process/src/parts/ViewletTitleBarButtons/ViewletTitleBarButtonsEvents.js

@@ -0,0 +1,36 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+const handleClickMinmize = () => {
+  RendererWorker.send('TitleBarButtons.handleClickMinimize')
+}
+
+const handleClickToggleMaximize = () => {
+  RendererWorker.send('TitleBarButtons.handleClickToggleMaximize')
+}
+
+const handleClickClose = () => {
+  RendererWorker.send('TitleBarButtons.handleClickClose')
+}
+
+/**
+ *
+ * @param {MouseEvent} event
+ */
+export const handleTitleBarButtonsClick = (event) => {
+  const { target } = event
+  // @ts-ignore
+  const { id } = target
+  switch (id) {
+    case 'TitleBarButtonMinimize':
+      handleClickMinmize()
+      break
+    case 'TitleBarButtonToggleMaximize':
+      handleClickToggleMaximize()
+      break
+    case 'TitleBarButtonClose':
+      handleClickClose()
+      break
+    default:
+      break
+  }
+}

package/static/ce25a54/packages/renderer-process/src/parts/ViewletTitleBarMenuBar/ViewletTitleBarMenuBar.js

@@ -0,0 +1,311 @@
+import * as Assert from '../Assert/Assert.js'
+import * as ViewletTitleBarMenuBarEvents from './ViewletTitleBarMenuBarEvents.js'
+import * as Menu from '../OldMenu/Menu.js'
+import * as Widget from '../Widget/Widget.js'
+import * as MenuItem from '../MenuItem/MenuItem.js'
+
+const activeId = 'TitleBarEntryActive'
+
+export const create = () => {
+  const $TitleBarMenuBar = document.createElement('div')
+  $TitleBarMenuBar.id = 'TitleBarMenuBar'
+  // @ts-ignore
+  $TitleBarMenuBar.role = 'menubar'
+  $TitleBarMenuBar.tabIndex = 0
+  $TitleBarMenuBar.onmousedown = ViewletTitleBarMenuBarEvents.handleClick
+  $TitleBarMenuBar.addEventListener(
+    'focusout',
+    ViewletTitleBarMenuBarEvents.handleFocusOut
+  )
+  $TitleBarMenuBar.addEventListener(
+    'focusin',
+    ViewletTitleBarMenuBarEvents.handleFocus
+  )
+  $TitleBarMenuBar.onmouseover = ViewletTitleBarMenuBarEvents.handleMouseOver
+
+  return {
+    $Viewlet: $TitleBarMenuBar,
+    $TitleBarMenuBar,
+    $$Menus: [],
+  }
+}
+
+export const dispose = (state) => {}
+
+export const focus = (state) => {
+  const { $TitleBarMenuBar } = state
+  $TitleBarMenuBar.firstChild.focus()
+}
+
+// TODO set proper tabIndex 0 to focused item https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
+
+// TODO screenreader doesn't read top level label
+// when menu is open,
+// first item is selected,
+// right is clicked it just reads
+// "Expanded" instead of "Selection Expanded"
+
+// TODO sometimes screenreader reads too much (e.g. "File, expanded, opens menu, expanded")
+
+// TODO don't focus on separators
+
+// TODO don't focus on hover
+// only focus on hover when it has already focus or the menu has focus
+
+// TODO title bar menu bar is very inefficient:
+
+// before: 5 times recalculate style
+// 1.37ms Recalculate style
+// 83us Update Layer tree
+// 0.34ms paint
+// 0.79ms composite layer
+// 0.23ms Hit test
+// 1.42ms Recalculate style
+// 1.44ms Recalculate style
+// 2.08ms Recalculate style
+// 0.44ms Recalculate style
+// 0.52ms Layout
+// 0.16ms Update Layer Tree
+// 48us hit test
+// 16us Update Layer Tree
+// 0.36ms paint
+// 0.33ms composite layer
+
+// now: 2 recalculate styles
+// 0.43ms recalculate style
+// 0.53ms recalculate style
+// 0.19ms layout
+// 0.16ms update layer tree
+// 30us hit test
+// 17us update layer tree
+// 0.17ms paint
+// 0.19ms composite layers
+
+const create$TopLevelEntry = (item) => {
+  const $TitleBarTopLevelEntry = document.createElement('div')
+  $TitleBarTopLevelEntry.className = 'TitleBarTopLevelEntry'
+  $TitleBarTopLevelEntry.ariaHasPopup = 'true'
+  $TitleBarTopLevelEntry.ariaExpanded = 'false'
+  // @ts-ignore
+  $TitleBarTopLevelEntry.role = 'menuitem'
+  if (item.keyboardShortCut) {
+    $TitleBarTopLevelEntry.ariaKeyShortcuts = item.keyboardShortCut
+  }
+  $TitleBarTopLevelEntry.textContent = item.name
+  return $TitleBarTopLevelEntry
+}
+
+export const getMenuEntryBounds = (state, index) => {
+  const { $TitleBarMenuBar } = state
+  const $MenuEntry = $TitleBarMenuBar.children[index]
+  const rect = $MenuEntry.getBoundingClientRect()
+  return {
+    left: rect.left,
+    bottom: rect.bottom,
+  }
+}
+
+export const setFocusedIndex = (
+  state,
+  unFocusIndex,
+  focusIndex,
+  oldIsMenuOpen,
+  newIsMenuOpen
+) => {
+  Assert.object(state)
+  Assert.number(unFocusIndex)
+  Assert.number(focusIndex)
+  const { $TitleBarMenuBar } = state
+  if (unFocusIndex !== -1) {
+    const $Child = $TitleBarMenuBar.children[unFocusIndex]
+    $Child.ariaExpanded = 'false'
+    $Child.removeAttribute('aria-owns')
+    $Child.removeAttribute('id')
+  }
+  if (focusIndex !== -1) {
+    const $Child = $TitleBarMenuBar.children[focusIndex]
+    $Child.id = activeId
+    $TitleBarMenuBar.focus()
+    $TitleBarMenuBar.setAttribute('aria-activedescendant', activeId)
+    if (newIsMenuOpen) {
+      $Child.setAttribute('aria-owns', 'Menu-0')
+      $Child.ariaExpanded = 'true'
+    }
+  }
+}
+
+// TODO the focus variable is confusing: false means keep focus in menubar, true means focus the menu
+export const openMenu = (
+  state,
+  unFocusIndex,
+  index,
+  level,
+  menuItems,
+  menuFocusedIndex,
+  focus,
+  x,
+  y,
+  width,
+  height
+) => {
+  Assert.object(state)
+  Assert.number(unFocusIndex)
+  Assert.number(index)
+  Assert.number(level)
+  Assert.array(menuItems)
+  Assert.number(menuFocusedIndex)
+  Assert.boolean(focus)
+  Assert.number(x)
+  Assert.number(y)
+  Assert.number(width)
+  Assert.number(height)
+  const { $TitleBarMenuBar } = state
+  // TODO this code is very unclean
+  $TitleBarMenuBar.addEventListener(
+    'mouseenter',
+    ViewletTitleBarMenuBarEvents.handleMouseOver,
+    {
+      capture: true,
+    }
+  )
+  if (unFocusIndex !== -1) {
+    $TitleBarMenuBar.children[unFocusIndex].ariaExpanded = 'false'
+    $TitleBarMenuBar.children[unFocusIndex].removeAttribute('aria-owns')
+  }
+  $TitleBarMenuBar.children[index].ariaExpanded = 'true'
+  const $$Menus = Menu.state.$$Menus
+  Menu.state.$$Menus = []
+  Menu.showControlled({
+    x,
+    y,
+    width,
+    height,
+    items: menuItems,
+    handleFocusOut: ViewletTitleBarMenuBarEvents.handleFocusOut,
+    $Parent: $TitleBarMenuBar.children[index],
+    level,
+  })
+  if (menuFocusedIndex !== -1) {
+    Menu.focusIndex(0, -1, menuFocusedIndex)
+  }
+  for (const $Menu of $$Menus) {
+    Widget.remove($Menu)
+  }
+}
+
+// TODO there need to be two variants of closeMenu: one just closes menu, another close menu and focuses top level entry
+export const closeMenu = (state, unFocusIndex, index) => {
+  const { $TitleBarMenuBar } = state
+  if (unFocusIndex !== -1) {
+    $TitleBarMenuBar.children[unFocusIndex].ariaExpanded = 'false'
+    $TitleBarMenuBar.children[unFocusIndex].removeAttribute('aria-owns')
+  }
+  if (index !== -1) {
+    $TitleBarMenuBar.children[index].focus()
+  }
+  Menu.hide(/* restoreFocus */ false)
+  $TitleBarMenuBar.removeEventListener(
+    'mouseenter',
+    ViewletTitleBarMenuBarEvents.handleMouseOver,
+    {
+      capture: true,
+    }
+  )
+}
+
+export const setEntries = (state, titleBarEntries) => {
+  const { $TitleBarMenuBar } = state
+  $TitleBarMenuBar.append(...titleBarEntries.map(create$TopLevelEntry))
+}
+
+const create$Menu = () => {
+  const $Menu = document.createElement('div')
+  $Menu.className = 'Menu'
+  // @ts-ignore
+  $Menu.role = 'menu'
+  $Menu.tabIndex = -1
+  // $ContextMenu.onmousedown = contextMenuHandleMouseDown
+  // TODO mousedown vs click? (click is usually better but mousedown is faster, why wait 100ms?)
+  // $Menu.addEventListener('mousedown', handleMouseDown)
+  // $Menu.addEventListener('mouseenter', handleMouseEnter, {
+  //   capture: true,
+  // })
+  // $Menu.addEventListener('mouseleave', handleMouseLeave, {
+  //   capture: true,
+  // })
+  // $Menu.addEventListener('mousemove', handleMouseMove, {
+  //   passive: true,
+  // })
+  // $Menu.onkeydown = handleKeyDown
+  // $Menu.addEventListener('focusout', handleFocusOut)
+  // $Menu.oncontextmenu = handleContextMenu
+  // $ContextMenu.onfocus = handleFocus
+  // $ContextMenu.onblur = handleBlur
+  return $Menu
+}
+
+// TODO recycle menus
+export const setMenus = (state, changes) => {
+  const { $$Menus } = state
+  for (const change of changes) {
+    const type = change[0]
+    if (type === 'addMenu') {
+      const menu = change[1]
+      const $Menu = create$Menu()
+      $Menu.onmouseover = ViewletTitleBarMenuBarEvents.handleMenuMouseOver
+      $Menu.onmousedown = ViewletTitleBarMenuBarEvents.handleMenuMouseDown
+      const { top, left, width, height, level, focusedIndex } = menu
+      $Menu.style.width = `${width}px`
+      $Menu.style.height = `${height}px`
+      $Menu.style.top = `${top}px`
+      $Menu.style.left = `${left}px`
+      $Menu.append(...menu.items.map(MenuItem.create$MenuItem))
+      $Menu.id = `Menu-${level}`
+      Widget.append($Menu)
+      if (focusedIndex !== -1) {
+        const $Child = $Menu.children[focusedIndex]
+        $Child.classList.add('Focused')
+        // @ts-ignore
+        $Child.focus()
+      }
+      $$Menus.push($Menu)
+    } else if (type === 'updateMenu') {
+      const menu = change[1]
+      const newLength = change[2]
+      const replaceItems = change[3]
+      const { level, top, left, width, height, focusedIndex, items, expanded } =
+        menu
+      const $Menu = $$Menus[level]
+      $Menu.style.width = `${width}px`
+      $Menu.style.height = `${height}px`
+      $Menu.style.top = `${top}px`
+      $Menu.style.left = `${left}px`
+      // TODO recycle menu item nodes
+      const $$Children = items.map(MenuItem.create$MenuItem)
+      if (focusedIndex !== -1) {
+        const $Child = $$Children[focusedIndex]
+        $Child.classList.add('Focused')
+        if (expanded) {
+          $Child.ariaExpanded = true
+          $Child.setAttribute('aria-owns', `Menu-${level + 1}`)
+        }
+      }
+      $Menu.replaceChildren(...$$Children)
+      if (level === newLength - 1) {
+        if (focusedIndex === -1) {
+          $Menu.focus()
+        } else {
+          const $Child = $Menu.children[focusedIndex]
+          $Child.focus()
+        }
+      }
+    } else if (type === 'closeMenus') {
+      const keepCount = change[1]
+      const $$ToDispose = $$Menus.slice(keepCount)
+      for (const $ToDispose of $$ToDispose) {
+        Widget.remove($ToDispose)
+      }
+      $$Menus.length = keepCount
+    }
+  }
+}