@lvce-editor/server 0.7.2 → 0.7.4

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

@@ -21,6 +21,9 @@ const setMessage = ($Old, $New, message) => {
 }
 
 export const alert = (message) => {
+  if (!message) {
+    return
+  }
   if (!state.$AriaMessages) {
     state.$AriaAlert1 = create$AriaAlert()
     state.$AriaAlert2 = create$AriaAlert()

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

@@ -9,7 +9,7 @@ const getLabel = (item) => {
 }
 
 export const create$MenuItem = (item) => {
-  const $MenuItem = document.createElement('li')
+  const $MenuItem = document.createElement('div')
   switch (item.flags) {
     case MenuItemFlags.None:
     case MenuItemFlags.RestoreFocus:

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

@@ -29,9 +29,9 @@ export const platform = getPlatform()
 export const state = {
   getAssetDir() {
     // @ts-ignore
-    if (typeof '/18087fa' !== 'undefined') {
+    if (typeof '/ce25a54' !== 'undefined') {
       // @ts-ignore
-      return '/18087fa'
+      return '/ce25a54'
     }
     if (platform === 'electron') {
       return '../../../../..'

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

@@ -9,9 +9,12 @@ export const toHaveValue = (locator, { value }) => {
 }
 
 const printLocator = (locator) => {
-  if (locator._nth) {
+  if (locator._nth !== -1) {
     return `${locator._selector}:nth(${locator._nth})`
   }
+  if (locator._hasText) {
+    return `${locator._selector} "${locator._hasText}"`
+  }
   return `${locator._selector}`
 }
 
@@ -45,9 +48,24 @@ export const toHaveCount = (locator, { count }) => {
   return `expected ${locatorString} to have count ${count}`
 }
 
+const stringifyElement = (element) => {
+  if (element.id) {
+    return `#${element.id}`
+  }
+  if (element.className) {
+    return `.${element.className}`
+  }
+  if (element === document.body) {
+    return 'document.body'
+  }
+  return element.tagName
+}
+
 export const toBeFocused = (locator) => {
   const locatorString = printLocator(locator)
-  return `expected ${locatorString} to be focused`
+  const activeElement = document.activeElement
+  const stringifiedActiveElement = stringifyElement(activeElement)
+  return `expected ${locatorString} to be focused but active element is ${stringifiedActiveElement}`
 }
 
 export const toHaveClass = (locator, { className }) => {

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

@@ -89,6 +89,12 @@ export const sendMultiple = (commands) => {
     const [_, viewletId, method, ...args] = command
     if (_ === 'Viewlet.ariaAnnounce') {
       ariaAnnounce(viewletId)
+    } else if (_ === 'Viewlet.setBounds') {
+      setBounds(viewletId, method, ...args)
+    } else if (_ === 'Viewlet.create') {
+      create(viewletId)
+    } else if (_ === 'Viewlet.append') {
+      append(viewletId, method)
     } else {
       invoke(viewletId, method, ...args)
     }
@@ -188,6 +194,14 @@ const ariaAnnounce = async (message) => {
   AriaAlert.alert(message)
 }
 
+const append = (parentId, childId) => {
+  const parentInstance = state.instances[parentId]
+  const $Parent = parentInstance.state.$Viewlet
+  const childInstance = state.instances[childId]
+  const $Child = childInstance.state.$Viewlet
+  $Parent.append($Child)
+}
+
 export const executeCommands = (commands) => {
   for (const [command, ...args] of commands) {
     switch (command) {
@@ -209,6 +223,9 @@ export const executeCommands = (commands) => {
       case 'Viewlet.ariaAnnounce':
         ariaAnnounce(...args)
         break
+      case 'Viewlet.append':
+        append(...args)
+        break
       default:
         throw new Error(`unknown command ${command}`)
     }

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

@@ -1,60 +1,44 @@
 import * as Focus from '../Focus/Focus.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
 import * as Widget from '../Widget/Widget.js'
+import * as ViewletEditorCompletionEvents from './ViewletEditorCompletionEvents.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 create$CompletionItem = (item, index) => {
+  const $CompletionItemText = document.createElement('div')
+  $CompletionItemText.className = 'Label'
+  $CompletionItemText.textContent = item.label
 
-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 $Icon = document.createElement('div')
+  $Icon.className = 'ColoredMaskIcon'
+  $Icon.style.webkitMaskImage = `url('${item.icon}')`
 
-const create$CompletionItem = (item, index) => {
-  const $CompletionItem = document.createElement('li')
-  $CompletionItem.textContent = item.label
+  const $CompletionItem = document.createElement('div')
   // @ts-ignore
   $CompletionItem.role = 'option'
   $CompletionItem.id = `CompletionItem-${index}`
-  $CompletionItem.className = `EditorCompletionItem Icon${item.icon}`
+  $CompletionItem.className = `EditorCompletionItem`
+  $CompletionItem.append($Icon, $CompletionItemText)
   return $CompletionItem
 }
 
 export const create = () => {
   // TODO recycle nodes
-  const $Viewlet = document.createElement('ul')
-  $Viewlet.className = 'Viewlet Completions'
+  const $Viewlet = document.createElement('div')
+  $Viewlet.className = 'Viewlet'
   $Viewlet.dataset.viewletId = name
   $Viewlet.id = 'Completions'
   // @ts-ignore
   $Viewlet.role = 'listbox'
   $Viewlet.ariaLabel = 'Suggest'
-  $Viewlet.onmousedown = handleMousedown
+  $Viewlet.onmousedown = ViewletEditorCompletionEvents.handleMousedown
+  $Viewlet.addEventListener(
+    'wheel',
+    ViewletEditorCompletionEvents.handleWheel,
+    {
+      passive: true,
+    }
+  )
   return {
     $Viewlet,
   }
@@ -63,11 +47,6 @@ export const create = () => {
 // 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
@@ -83,15 +62,10 @@ export const setItems = (state, items, reason, focusedIndex) => {
   // TODO recycle nodes
   $Viewlet.replaceChildren(...items.map(create$CompletionItem))
   Widget.append($Viewlet)
-  focusIndex(state, 0, 0)
+  setFocusedIndex(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')
@@ -100,7 +74,7 @@ export const dispose = (state) => {
 
 // TODO should pass maybe oldIndex to be removed
 // but keeping $ActiveItem in state also works
-export const focusIndex = (state, oldIndex, newIndex) => {
+export const setFocusedIndex = (state, oldIndex, newIndex) => {
   const $Viewlet = state.$Viewlet
   if (oldIndex !== -1) {
     const $OldItem = $Viewlet.children[oldIndex]

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

@@ -0,0 +1,49 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as WheelEventType from '../WheelEventType/WheelEventType.js'
+
+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
+}
+
+export 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
+  )
+}
+
+export const handleWheel = (event) => {
+  switch (event.deltaMode) {
+    case WheelEventType.DomDeltaLine:
+      RendererWorker.send(
+        /* EditorCompletion.handleWheel */ 'EditorCompletion.handleWheel',
+        /* deltaY */ event.deltaY
+      )
+      break
+    case WheelEventType.DomDeltaPixel:
+      RendererWorker.send(
+        /* EditorCompletion.handleWheel */ 'EditorCompletion.handleWheel',
+        /* deltaY */ event.deltaY
+      )
+      break
+    default:
+      break
+  }
+}