@lvce-editor/server 0.4.3 → 0.5.0

package/static/{2394f34 → 4d80653}/packages/renderer-process/src/parts/TitleBarMenuBar/TitleBarMenuBarEvents.js

@@ -1,4 +1,5 @@
 import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as MouseEventTypes from '../MouseEventType/MouseEventType.js'
 
 const isInsideTitleBarMenu = ($Element) => {
   return (
@@ -14,7 +15,7 @@ export const handleFocusOut = (event) => {
     return
   }
   RendererWorker.send(
-    /* TitleBarMenu.closeMenu */ 'TitleBarMenuBar.closeMenu',
+    /* TitleBarMenuBar.closeMenu */ 'TitleBarMenuBar.closeMenu',
     /* keepFocus */ false
   )
 }
@@ -26,14 +27,14 @@ export const handleKeyDown = (event) => {
       event.preventDefault()
       event.stopPropagation()
       RendererWorker.send(
-        /* TitleBarMenu.handleKeyArrowDown */ 'TitleBarMenu.handleKeyArrowDown'
+        /* TitleBarMenuBar.handleKeyArrowDown */ 'TitleBarMenuBar.handleKeyArrowDown'
       )
       break
     case 'ArrowUp':
       event.preventDefault()
       event.stopPropagation()
       RendererWorker.send(
-        /* TitleBarMenu.handleKeyArrowUp */ 'TitleBarMenu.handleKeyArrowUp'
+        /* TitleBarMenuBar.handleKeyArrowUp */ 'TitleBarMenuBar.handleKeyArrowUp'
       )
       break
     case 'ArrowRight':
@@ -41,28 +42,28 @@ export const handleKeyDown = (event) => {
       event.preventDefault()
       event.stopPropagation()
       RendererWorker.send(
-        /* TitleBarMenu.handleKeyArrowRight */ 'TitleBarMenu.handleKeyArrowRight'
+        /* TitleBarMenuBar.handleKeyArrowRight */ 'TitleBarMenuBar.handleKeyArrowRight'
       )
       break
     case 'ArrowLeft':
       event.preventDefault()
       event.stopPropagation()
       RendererWorker.send(
-        /* TitleBarMenu.handleKeyArrowLeft */ 'TitleBarMenu.handleKeyArrowLeft'
+        /* TitleBarMenuBar.handleKeyArrowLeft */ 'TitleBarMenuBar.handleKeyArrowLeft'
       )
       break
     case 'Enter':
       event.preventDefault()
       event.stopPropagation()
       RendererWorker.send(
-        /* TitleBarMenu.handleKeyEnter */ 'TitleBarMenu.handleKeyEnter'
+        /* TitleBarMenuBar.handleKeyEnter */ 'TitleBarMenuBar.handleKeyEnter'
       )
       break
     case ' ':
       event.preventDefault()
       event.stopPropagation()
       RendererWorker.send(
-        /* TitleBarMenu.handleKeySpace */ 'TitleBarMenu.handleKeySpace'
+        /* TitleBarMenuBar.handleKeySpace */ 'TitleBarMenuBar.handleKeySpace'
       )
       break
     case 'Home':
@@ -70,7 +71,7 @@ export const handleKeyDown = (event) => {
       event.preventDefault()
       event.stopPropagation()
       RendererWorker.send(
-        /* TitleBarMenu.handleKeyHome */ 'TitleBarMenu.handleKeyHome'
+        /* TitleBarMenuBar.handleKeyHome */ 'TitleBarMenuBar.handleKeyHome'
       )
       break
     case 'End':
@@ -78,14 +79,14 @@ export const handleKeyDown = (event) => {
       event.preventDefault()
       event.stopPropagation()
       RendererWorker.send(
-        /* TitleBarMenu.handleKeyEnd */ 'TitleBarMenu.handleKeyEnd'
+        /* TitleBarMenuBar.handleKeyEnd */ 'TitleBarMenuBar.handleKeyEnd'
       )
       break
     case 'Escape':
       event.preventDefault()
       event.stopPropagation()
       RendererWorker.send(
-        /* TitleBarMenu.handleKeyEscape */ 'TitleBarMenu.handleKeyEscape'
+        /* TitleBarMenuBar.handleKeyEscape */ 'TitleBarMenuBar.handleKeyEscape'
       )
       break
     default:
@@ -102,7 +103,7 @@ export const handleMouseEnter = (event) => {
   const enterX = event.clientX
   const enterY = event.clientY
   RendererWorker.send(
-    /* TitleBarMenu.focusIndex */ 'TitleBarMenuBar.focusIndex',
+    /* TitleBarMenuBar.focusIndex */ 'TitleBarMenuBar.focusIndex',
     /* index */ index,
     /* enterX */ enterX,
     /* enterY */ enterY
@@ -127,6 +128,9 @@ const getIndex = ($Target) => {
 }
 
 export const handleClick = (event) => {
+  if (event.button !== MouseEventTypes.LeftClick) {
+    return
+  }
   const $Target = event.target
   const index = getIndex($Target)
   if (index === -1) {
@@ -134,7 +138,7 @@ export const handleClick = (event) => {
   }
   // event.preventDefault()
   RendererWorker.send(
-    /* TitleBarMenu.toggleIndex */ 'TitleBarMenuBar.toggleIndex',
+    /* TitleBarMenuBar.toggleIndex */ 'TitleBarMenuBar.toggleIndex',
     /* index */ index
   )
 }

package/static/{2394f34 → 4d80653}/packages/renderer-process/src/parts/Viewlet/Viewlet.js

@@ -9,10 +9,7 @@ export const state = {
 }
 
 export const mount = ($Parent, state) => {
-  while ($Parent.firstChild) {
-    $Parent.firstChild.remove()
-  }
-  $Parent.append(state.$Viewlet)
+  $Parent.replaceChildren(state.$Viewlet)
 }
 
 export const load = async (id, ...args) => {
@@ -177,7 +174,7 @@ export const appendViewlet = (parentId, childId, focus) => {
     childInstance.factory.name,
     childInstance.state.$Viewlet
   )
-  if (focus) {
+  if (focus && childInstance.factory.focus) {
     childInstance.factory.focus(childInstance.state)
   }
 }

package/static/{2394f34 → 4d80653}/packages/renderer-process/src/parts/ViewletActivityBar/ViewletActivityBar.js

@@ -77,10 +77,7 @@ 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))
+  $ActivityBar.replaceChildren(...activityBarItems.map(create$ActivityBarItem))
 }
 
 export const selectIndex = (state, oldIndex, newIndex) => {

package/static/{2394f34 → 4d80653}/packages/renderer-process/src/parts/ViewletEditorCompletion/ViewletEditorCompletion.js

@@ -52,7 +52,7 @@ export const create = () => {
   $Viewlet.dataset.viewletId = name
   $Viewlet.id = 'Completions'
   // @ts-ignore
-  $Viewlet.role= 'listbox'
+  $Viewlet.role = 'listbox'
   $Viewlet.ariaLabel = 'Suggest'
   $Viewlet.onmousedown = handleMousedown
   return {
@@ -71,9 +71,6 @@ export const setPosition = (state, x, y) => {
 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) {
@@ -84,7 +81,7 @@ export const setItems = (state, items, reason, focusedIndex) => {
     return
   }
   // TODO recycle nodes
-  $Viewlet.append(...items.map(create$CompletionItem))
+  $Viewlet.replaceChildren(...items.map(create$CompletionItem))
   Widget.append($Viewlet)
   focusIndex(state, 0, 0)
   // TODO set right aria attributes on $EditorInput

package/static/4d80653/packages/renderer-process/src/parts/ViewletEditorImage/ViewletEditorImage.js

@@ -0,0 +1,57 @@
+import * as ViewletEditorImageEvents from './ViewletEditorImageEvents.js'
+
+export const name = 'EditorImage'
+
+export const create = () => {
+  const $Image = document.createElement('img')
+  $Image.className = 'ViewletImage'
+  $Image.draggable = false
+
+  const $ImageWrapper = document.createElement('div')
+  $ImageWrapper.className = 'ImageWrapper'
+  $ImageWrapper.append($Image)
+
+  const $Viewlet = document.createElement('div')
+  $Viewlet.className = 'Viewlet'
+  $Viewlet.dataset.viewletId = 'EditorImage'
+  $Viewlet.append($ImageWrapper)
+  $Viewlet.onpointerdown = ViewletEditorImageEvents.handlePointerDown
+  $Viewlet.onpointerup = ViewletEditorImageEvents.handlePointerUp
+  // TODO maybe set pointer move handle once pointer down is called
+  // but that would require keeping track of how many pointers are down
+  // and removing the listener when pointerDownCount === 0
+  // TODO not sure whether this event listener should be passive or not
+  // doesn't seem to make a difference
+  $Viewlet.addEventListener(
+    'pointermove',
+    ViewletEditorImageEvents.handlePointerMove,
+    { passive: true }
+  )
+  $Viewlet.oncontextmenu = ViewletEditorImageEvents.handleContextMenu
+  $Viewlet.addEventListener('wheel', ViewletEditorImageEvents.handleWheel, {
+    passive: true,
+  })
+  return {
+    $Viewlet,
+    $Image,
+    $ImageWrapper,
+  }
+}
+
+export const setTransform = (state, transform) => {
+  const { $ImageWrapper } = state
+  $ImageWrapper.style.transform = transform
+}
+
+export const setSrc = (state, src) => {
+  const { $Image } = state
+  $Image.src = src
+}
+
+export const setDragging = (state, isDragging) => {
+  console.log('set dragging', isDragging)
+  const { $Viewlet } = state
+  $Viewlet.classList.toggle('Dragging', isDragging)
+}
+
+export const dispose = (state) => {}

package/static/4d80653/packages/renderer-process/src/parts/ViewletEditorImage/ViewletEditorImageEvents.js

@@ -0,0 +1,67 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+/**
+ * @param {PointerEvent} event
+ */
+export const handlePointerMove = (event) => {
+  const { pointerId, clientX, clientY } = event
+  RendererWorker.send(
+    'EditorImage.handlePointerMove',
+    pointerId,
+    clientX,
+    clientY
+  )
+}
+
+/**
+ * @param {PointerEvent} event
+ */
+export const handlePointerUp = (event) => {
+  const { pointerId, clientX, clientY, target } = event
+  // @ts-ignore
+  target.releasePointerCapture(pointerId)
+  RendererWorker.send(
+    'EditorImage.handlePointerUp',
+    pointerId,
+    clientX,
+    clientY
+  )
+}
+
+/**
+ * @param {PointerEvent} event
+ */
+export const handlePointerDown = (event) => {
+  const { pointerId, clientX, clientY, target, button } = event
+  console.log({ button })
+  // @ts-ignore
+  target.setPointerCapture(pointerId)
+  RendererWorker.send(
+    'EditorImage.handlePointerDown',
+    pointerId,
+    clientX,
+    clientY
+  )
+}
+
+/**
+ * @param {WheelEvent} event
+ */
+export const handleWheel = (event) => {
+  const { clientX, clientY, deltaX, deltaY } = event
+  RendererWorker.send(
+    'EditorImage.handleWheel',
+    clientX,
+    clientY,
+    deltaX,
+    deltaY
+  )
+}
+
+/**
+ *
+ * @param {MouseEvent} event
+ */
+export const handleContextMenu = (event) => {
+  event.preventDefault()
+}

package/static/4d80653/packages/renderer-process/src/parts/ViewletKeyBindings/ViewletKeyBindings.js

@@ -0,0 +1,48 @@
+import * as InputBox from '../InputBox/InputBox.js'
+import * as ViewletkeyBindingsEvents from './ViewletKeyBindingsEvents.js'
+import * as VirtualDom from '../VirtualDom/VirtualDom.js'
+
+export const name = 'KeyBindings'
+
+export const create = () => {
+  const $InputBox = InputBox.create()
+  $InputBox.type = 'search'
+  $InputBox.placeholder = 'Search Key Bindings' // TODO placeholder string should come from renderer worker
+  $InputBox.oninput = ViewletkeyBindingsEvents.handleInput
+
+  const $KeyBindingsHeader = document.createElement('div')
+  $KeyBindingsHeader.className = 'KeyBindingsHeader'
+  $KeyBindingsHeader.append($InputBox)
+
+  const $KeyBindingsTableWrapper = document.createElement('div')
+  $KeyBindingsTableWrapper.className = 'KeyBindingsTableWrapper'
+  $KeyBindingsTableWrapper.addEventListener(
+    'wheel',
+    ViewletkeyBindingsEvents.handleWheel,
+    { passive: true }
+  )
+
+  const $Viewlet = document.createElement('div')
+  $Viewlet.className = 'Viewlet'
+  $Viewlet.dataset.viewletId = 'KeyBindings'
+  $Viewlet.append($KeyBindingsHeader, $KeyBindingsTableWrapper)
+
+  return {
+    $Viewlet,
+    $InputBox,
+    $KeyBindingsHeader,
+    $KeyBindingsTableWrapper,
+  }
+}
+
+const replaceChildren = ($Element, $NewChildren) => {
+  $Element.replaceChildren($NewChildren)
+}
+
+export const setTableDom = (state, dom) => {
+  const { $KeyBindingsTableWrapper } = state
+  // console.log(dom)
+  const $Root = VirtualDom.render(dom)
+  // console.log($Root)
+  replaceChildren($KeyBindingsTableWrapper, $Root.firstChild)
+}

package/static/4d80653/packages/renderer-process/src/parts/ViewletKeyBindings/ViewletKeyBindingsEvents.js

@@ -0,0 +1,27 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as WheelEventType from '../WheelEventType/WheelEventType.js'
+
+export const handleInput = (event) => {
+  const $Target = event.target
+  const value = $Target.value
+  RendererWorker.send('KeyBindings.handleInput', value)
+}
+
+export const handleWheel = (event) => {
+  switch (event.deltaMode) {
+    case WheelEventType.DomDeltaLine:
+      RendererWorker.send(
+        /* ViewletKeyBindings.handleWheel */ 'KeyBindings.handleWheel',
+        /* deltaY */ event.deltaY
+      )
+      break
+    case WheelEventType.DomDeltaPixel:
+      RendererWorker.send(
+        /* ViewletKeyBindings.handleWheel */ 'KeyBindings.handleWheel',
+        /* deltaY */ event.deltaY
+      )
+      break
+    default:
+      break
+  }
+}

package/static/{2394f34 → 4d80653}/packages/renderer-process/src/parts/ViewletMain/ViewletMain.js

@@ -152,7 +152,6 @@ const handleTabMouseDown = (event, index) => {
 const handleTabsMouseDown = (event) => {
   const $Target = event.target
   const index = getIndex($Target)
-  console.log({ index })
   if (index === -1) {
     return
   }
@@ -186,7 +185,7 @@ const handleTabsContextMenu = (event) => {
   )
 }
 
-export const openViewlet = (state, id, tabLabel, tabTitle, oldActiveIndex) => {
+export const openViewlet = (state, tabLabel, tabTitle, oldActiveIndex) => {
   const $Tab = document.createElement('div')
   $Tab.className = 'MainTab'
   $Tab.textContent = tabLabel
@@ -202,7 +201,10 @@ export const openViewlet = (state, id, tabLabel, tabTitle, oldActiveIndex) => {
   $Tab.append($TabCloseButton)
 
   if (oldActiveIndex !== -1 && state.$MainTabs) {
-    state.$MainTabs.children[oldActiveIndex].ariaSelected = 'false'
+    const $OldTab = state.$MainTabs.children[oldActiveIndex]
+    if ($OldTab) {
+      $OldTab.ariaSelected = 'false'
+    }
   }
 
   if (!state.$MainTabs) {

package/static/{2394f34 → 4d80653}/packages/renderer-process/src/parts/ViewletModule/ViewletModule.js

@@ -52,6 +52,8 @@ export const load = (moduleId) => {
       return import('../ViewletImplementations/ViewletImplementations.js')
     case ViewletModuleId.EditorPlainText:
       return import('../ViewletEditorPlainText/ViewletEditorPlainText.js')
+    case ViewletModuleId.KeyBindings:
+      return import('../ViewletKeyBindings/ViewletKeyBindings.js')
     default:
       throw new Error('unknown module')
   }

package/static/{2394f34 → 4d80653}/packages/renderer-process/src/parts/ViewletModuleId/ViewletModuleId.js

@@ -22,6 +22,8 @@ export const ImagePreview = 'ImagePreview'
 
 export const Implementations = 'Implementations'
 
+export const KeyBindings = 'KeyBindings'
+
 export const Main = 'Main'
 
 export const Output = 'Output'

package/static/{2394f34 → 4d80653}/packages/renderer-process/src/parts/ViewletSearch/ViewletSearch.js

@@ -150,15 +150,12 @@ const render$Row = ($Row, rowInfo) => {
     // TODO type should be a number for efficiency
     case DirentType.Directory:
       $Row.ariaExpanded = 'false'
-      $Row.className = `TreeItem Icon${rowInfo.icon}`
       break
     case DirentType.DirectoryExpanded:
-      $Row.className = `TreeItem Icon${rowInfo.icon}`
       $Row.ariaExpanded = 'true'
       break
     case DirentType.File:
       $Row.ariaExpanded = undefined
-      $Row.className = `TreeItem Icon${rowInfo.icon}`
       break
     default:
       break

package/static/{2394f34 → 4d80653}/packages/renderer-process/src/parts/ViewletSideBar/ViewletSideBar.js

@@ -30,9 +30,7 @@ export const create = () => {
 
 export const dispose = (state) => {
   Assert.object(state)
-  while (state.$SideBar.firstChild) {
-    state.$SideBar.firstChild.remove()
-  }
+  state.$SideBar.replaceChildren()
 }
 
 export const appendViewlet = (state, name, $Viewlet) => {

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

@@ -0,0 +1,64 @@
+import * as Layout from '../Layout/Layout.js'
+import * as TitleBarMenu from '../TitleBarMenuBar/TitleBarMenuBar.js'
+import * as Assert from '../Assert/Assert.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+export const create = () => {
+  const $TitleBarMenu = TitleBarMenu.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'
+  $TitleBar.append($TitleBarMenu)
+  return {
+    $TitleBar,
+    $TitleBarMenu,
+  }
+}
+
+export const dispose = (state) => {}
+
+export const focus = (state) => {
+  state.$TitleBarMenu.firstChild.focus()
+}
+
+export const menuSetEntries = TitleBarMenu.setEntries
+
+export const menuFocusIndex = TitleBarMenu.focusIndex
+
+export const menuOpen = TitleBarMenu.openMenu
+
+export const menuClose = TitleBarMenu.closeMenu
+
+export const menuGetEntryBounds = TitleBarMenu.getMenuEntryBounds
+
+/**
+ *
+ * @param {MouseEvent} event
+ */
+const handleTitleBarButtonsClick = (event) => {
+  const { clientX, clientY } = event
+  RendererWorker.send('TitleBar.handleTitleBarButtonsClick', clientX, clientY)
+}
+
+export const setButtons = (state, buttons) => {
+  const { $TitleBar } = state
+  if (buttons.length > 0) {
+    const $TitleBarButtons = document.createElement('div')
+    // TODO wrapper div isn't actually necessary
+    $TitleBarButtons.id = 'TitleBarButtons'
+    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)
+    }
+    $TitleBarButtons.onmousedown = handleTitleBarButtonsClick
+    $TitleBar.append($TitleBarButtons)
+  }
+}

package/static/4d80653/packages/renderer-process/src/parts/VirtualDom/VirtualDom.js

@@ -0,0 +1,31 @@
+import * as VirtualDomElement from '../VirtualDomElement/VirtualDomElement.js'
+
+/**
+ *
+ * @param {any[]} elements
+ * @returns
+ */
+export const renderInternal = ($Parent, elements) => {
+  const max = elements.length - 1
+  let stack = []
+  for (let i = max; i >= 0; i--) {
+    const element = elements[i]
+    const $Element = VirtualDomElement.render(element)
+    if (element.childCount > 0) {
+      $Element.append(...stack.slice(0, element.childCount))
+      stack = stack.slice(element.childCount)
+    }
+    stack.unshift($Element)
+  }
+  $Parent.append(...stack)
+}
+/**
+ *
+ * @param {any[]} elements
+ * @returns
+ */
+export const render = (elements) => {
+  const $Root = document.createElement('div')
+  renderInternal($Root, elements)
+  return $Root
+}