@lvce-editor/server 0.11.7 → 0.11.8

package/static/0cae46c/packages/renderer-process/src/parts/ViewletPdf/ViewletPdf.js

@@ -0,0 +1,104 @@
+import * as OffscreenCanvas from '../OffscreenCanvas/OffscreenCanvas.js'
+import * as InputBox from '../InputBox/InputBox.js'
+import * as IconButton from '../IconButton/IconButton.js'
+import * as Icon from '../Icon/Icon.js'
+import * as ViewletPdfEvents from './ViewletPdfEvents.js'
+
+/**
+ * @enum {string}
+ */
+const UiStrings = {
+  Next: 'Next',
+  Previous: 'Previous',
+  ZoomIn: 'Zoom in',
+  ZoomOut: 'Zoom out',
+  Print: 'Print',
+}
+
+export const create = () => {
+  const $Viewlet = document.createElement('div')
+  $Viewlet.className = 'Viewlet Pdf'
+
+  const $ButtonPreviousPage = IconButton.create$Button(
+    UiStrings.Previous,
+    Icon.ChevronUp
+  )
+  $ButtonPreviousPage.onclick = ViewletPdfEvents.handleClickPrevious
+
+  const $ButtonNextPage = IconButton.create$Button(
+    UiStrings.Next,
+    Icon.ChevronDown
+  )
+  $ButtonNextPage.onclick = ViewletPdfEvents.handleClickNext
+
+  const $PageNumber = InputBox.create()
+  $PageNumber.type = 'number'
+  $PageNumber.classList.add('PdfPageNumber')
+  $PageNumber.min = '1'
+  $PageNumber.autocomplete = 'off'
+
+  const $NumberOfPages = document.createElement('div')
+  $NumberOfPages.textContent = 'of 10'
+  $NumberOfPages.className = 'PdfNumberOfPages'
+
+  const $ButtonZoomIn = IconButton.create$Button(UiStrings.ZoomIn, Icon.ZoomIn)
+  $ButtonZoomIn.onclick = ViewletPdfEvents.handleClickZoomIn
+
+  const $ButtonZoomOut = IconButton.create$Button(
+    UiStrings.ZoomOut,
+    Icon.ZoomOut
+  )
+  $ButtonZoomOut.onclick = ViewletPdfEvents.handleClickZoomOut
+
+  const $ButtonPrint = document.createElement('button')
+  $ButtonPrint.textContent = UiStrings.Print
+  $ButtonPrint.onclick = ViewletPdfEvents.handleClickPrint
+
+  const $PdfToolBar = document.createElement('div')
+  $PdfToolBar.className = 'PdfToolBar'
+  $PdfToolBar.append(
+    $ButtonPreviousPage,
+    $ButtonNextPage,
+    $PageNumber,
+    $NumberOfPages,
+    $ButtonZoomIn,
+    $ButtonZoomOut,
+    $ButtonPrint
+  )
+
+  const $PdfContent = document.createElement('div')
+  $PdfContent.className = 'PdfContent'
+
+  $Viewlet.append($PdfToolBar, $PdfContent)
+
+  return {
+    $Viewlet,
+    $ButtonPreviousPage,
+    $ButtonNextPage,
+    $ButtonZoomIn,
+    $ButtonZoomOut,
+    $ButtonPrint,
+    $Canvas: undefined,
+    $PdfContent,
+    $NumberOfPages,
+    $PageNumber,
+  }
+}
+
+export const setCanvas = (state, id) => {
+  const { $PdfContent } = state
+  const $Canvas = OffscreenCanvas.get(id)
+  $PdfContent.append($Canvas)
+  state.$Canvas = $Canvas
+}
+
+export const setNumberOfPages = (state, numberOfPages) => {
+  const { $NumberOfPages, $PageNumber } = state
+  $NumberOfPages.textContent = `of ${numberOfPages}`
+  $PageNumber.max = `${numberOfPages}`
+}
+
+export const setPageNumber = (state, pageNumber) => {
+  const { $PageNumber } = state
+  $PageNumber.value = `${pageNumber + 1}`
+}

package/static/0cae46c/packages/renderer-process/src/parts/ViewletQuickPick/ViewletQuickPick.js

@@ -0,0 +1,312 @@
+/* Tries to implement the pattern for combobox with listbox popup https://www.w3.org/TR/wai-aria-1.2/#combobox */
+
+import * as AriaAlert from '../AriaAlert/AriaAlert.js'
+import * as Focus from '../Focus/Focus.js'
+import * as InputBox from '../InputBox/InputBox.js'
+import * as Platform from '../Platform/Platform.js'
+import * as DomEventType from '../DomEventType/DomEventType.js'
+import * as ViewletQuickPickEvents from './ViewletQuickPickEvents.js'
+// TODO use another virtual list that just appends elements and
+// is optimized for fast show/hide, scrolling performance should
+// be good as well but is not as important as fast show/hide
+
+// TODO screenreader makes pause after reading colon, maybe there is a setting for screenreaders so they speak normally
+
+// TODO state
+
+// TODO when quickpick is shown recalculate style and layout is really slow (>10ms every time)
+
+// TODO accessibility issues with nvda: when pressing escape, it goes into different mode
+// but should just close quick-pick like vscode does
+
+const activeId = 'QuickPickItemActive'
+
+// TODO forbidden:
+// 1. methods
+// 2. functions inside functions
+
+/**
+ * @enum {string}
+ */
+const ClassNames = {
+  Label: 'Label',
+  QuickPickItem: 'QuickPickItem',
+  Icon: 'Icon',
+  QuickPickItemDescription: 'QuickPickItemDescription',
+  QuickPickStatus: 'QuickPickStatus',
+}
+
+/**
+ * @enum {string}
+ */
+const Ids = {
+  QuickPickHeader: 'QuickPickHeader',
+  QuickPickItems: 'QuickPickItems',
+  QuickPick: 'QuickPick',
+}
+
+/**
+ * @enum {string}
+ */
+const Roles = {
+  ListBox: 'listbox',
+  ComboBox: 'combobox',
+  Option: 'option',
+}
+
+const create$QuickPickItem = () => {
+  // TODO many quickPick items may not have description -> avoid creating description dom nodes if there is no description
+  const $QuickPickItemLabelText = document.createTextNode('')
+
+  const $QuickPickItemLabel = document.createElement('div')
+  $QuickPickItemLabel.className = ClassNames.Label
+  $QuickPickItemLabel.append($QuickPickItemLabelText)
+
+  const $QuickPickItemIcon = document.createElement('i')
+  $QuickPickItemIcon.className = ClassNames.Icon
+  const $QuickPickItem = document.createElement('div') // TODO ul/li would be better for structure but might be slower
+  $QuickPickItem.className = ClassNames.QuickPickItem
+  // @ts-ignore
+  $QuickPickItem.role = Roles.Option
+  $QuickPickItem.append($QuickPickItemIcon, $QuickPickItemLabel)
+  return $QuickPickItem
+}
+
+// TODO add test with show and slicedItems length is 0
+
+const create$QuickPickDescription = () => {
+  const $QuickPickItemDescription = document.createElement('div')
+  $QuickPickItemDescription.className = ClassNames.QuickPickItemDescription
+  return $QuickPickItemDescription
+}
+
+const render$QuickPickItemLess = ($QuickPickItem, quickPickItem) => {
+  render$QuickPickItemLabel($QuickPickItem.firstChild, quickPickItem)
+  const $QuickPickItemDescription = create$QuickPickDescription()
+  // render$QuickPickItemDescription($QuickPickItemDescription, quickPickItem)
+
+  $QuickPickItem.append($QuickPickItemDescription)
+}
+
+const render$QuickPickItemLabel = ($QuickPickItem, quickPickItem) => {
+  $QuickPickItem.children[1].firstChild.nodeValue = quickPickItem.label
+}
+
+const render$QuickPickItemIcon = ($QuickPickItem, quickPickItem) => {
+  $QuickPickItem.children[0].className = `FileIcon${quickPickItem.icon}`
+}
+
+const render$QuickPickItemEqual = ($QuickPickItem, quickPickItem) => {
+  render$QuickPickItemLabel($QuickPickItem, quickPickItem)
+  render$QuickPickItemIcon($QuickPickItem, quickPickItem)
+}
+
+const render$QuickPickItemMore = ($QuickPickItem, quickPickItem) => {
+  render$QuickPickItemLabel($QuickPickItem.firstChild, quickPickItem)
+  $QuickPickItem.lastChild.remove()
+}
+
+const render$QuickPickItem = ($QuickPickItem, quickPickItem) => {
+  $QuickPickItem.ariaPosInSet = `${quickPickItem.posInSet}` // TODO pass correct number as prop
+  $QuickPickItem.ariaSetSize = `${quickPickItem.setSize}`
+  $QuickPickItem.quickPickItem = quickPickItem
+  render$QuickPickItemEqual($QuickPickItem, quickPickItem)
+}
+
+const render$QuickPickItemsLess = ($QuickPickItems, quickPickItems) => {
+  for (let i = 0; i < $QuickPickItems.children.length; i++) {
+    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
+  }
+  const fragment = document.createDocumentFragment()
+  for (
+    let i = $QuickPickItems.children.length;
+    i < quickPickItems.length;
+    i++
+  ) {
+    const $QuickPickItem = create$QuickPickItem()
+    render$QuickPickItem($QuickPickItem, quickPickItems[i])
+    fragment.append($QuickPickItem)
+  }
+  $QuickPickItems.append(fragment)
+}
+
+const render$QuickPickItemsEqual = ($QuickPickItems, quickPickItems) => {
+  for (let i = 0; i < quickPickItems.length; i++) {
+    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
+  }
+}
+
+const render$QuickPickItemsMore = ($QuickPickItems, quickPickItems) => {
+  for (let i = 0; i < quickPickItems.length; i++) {
+    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
+  }
+  const diff = $QuickPickItems.children.length - quickPickItems.length
+  for (let i = 0; i < diff; i++) {
+    $QuickPickItems.lastChild.remove()
+  }
+}
+
+const render$QuickPickItems = ($QuickPickItems, quickPickItems) => {
+  if ($QuickPickItems.children.length < quickPickItems.length) {
+    render$QuickPickItemsLess($QuickPickItems, quickPickItems)
+  } else if ($QuickPickItems.children.length === quickPickItems.length) {
+    render$QuickPickItemsEqual($QuickPickItems, quickPickItems)
+  } else {
+    render$QuickPickItemsMore($QuickPickItems, quickPickItems)
+  }
+}
+
+export const setVisiblePicks = (state, visiblePicks) => {
+  if (state.$QuickPickStatus) {
+    hideStatus(state)
+  }
+  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
+}
+
+export const setFocusedIndex = (state, oldFocusedIndex, newFocusedIndex) => {
+  const { $QuickPickItems, $QuickPickInput } = state
+  if (oldFocusedIndex >= 0) {
+    const $OldItem = $QuickPickItems.children[oldFocusedIndex]
+    if ($OldItem) {
+      $OldItem.removeAttribute('id')
+    }
+  }
+  if (newFocusedIndex >= 0) {
+    const $NewItem = $QuickPickItems.children[newFocusedIndex]
+    if ($NewItem) {
+      $NewItem.id = activeId
+      $QuickPickInput.setAttribute('aria-activedescendant', activeId)
+    }
+  }
+}
+
+const focusElement = ($Element) => {
+  if (Platform.isMobile) {
+    // workaround to disable virtual keyboard automatically opening on android
+    // see https://stackoverflow.com/questions/48635501/how-to-hide-soft-keyboard-and-keep-input-on-focus#answer-53104238
+    $Element.readOnly = true
+    $Element.focus()
+    const handleTimeout = () => {
+      $Element.readOnly = false
+    }
+    setTimeout(handleTimeout, 0)
+  } else {
+    $Element.focus()
+  }
+}
+
+export const focus = (state) => {
+  const { $QuickPickInput } = state
+  focusElement($QuickPickInput)
+  Focus.setFocus('quickPickInput')
+}
+
+// TODO
+// - for windows narrator, ariaLabel works well
+// - for nvda ariaRoleDescription works better
+
+export const create = () => {
+  const $QuickPickInput = InputBox.create()
+  $QuickPickInput.setAttribute('aria-controls', Ids.QuickPickItems) // TODO use idl once supported
+  // @ts-ignore
+  $QuickPickInput.role = Roles.ComboBox
+  $QuickPickInput.ariaLabel = 'Type the name of a command to run.'
+  $QuickPickInput.ariaAutoComplete = 'list'
+  $QuickPickInput.onblur = ViewletQuickPickEvents.handleBlur
+  $QuickPickInput.addEventListener(
+    DomEventType.BeforeInput,
+    ViewletQuickPickEvents.handleBeforeInput
+  )
+  $QuickPickInput.ariaExpanded = 'true'
+
+  const $QuickPickHeader = document.createElement('div')
+  $QuickPickHeader.id = Ids.QuickPickHeader
+  $QuickPickHeader.append($QuickPickInput)
+
+  const $QuickPickItems = document.createElement('div')
+  $QuickPickItems.id = Ids.QuickPickItems
+  // @ts-ignore
+  $QuickPickItems.role = Roles.ListBox
+  $QuickPickItems.onpointerdown = ViewletQuickPickEvents.handlePointerDown
+  $QuickPickItems.addEventListener(
+    DomEventType.Wheel,
+    ViewletQuickPickEvents.handleWheel,
+    { passive: true }
+  )
+
+  // TODO this works well with nvda but not with windows narrator
+  // probably a bug with windows narrator that doesn't support ariaRoleDescription
+  $QuickPickItems.ariaRoleDescription = 'Quick Input'
+
+  const $QuickPick = document.createElement('div')
+  $QuickPick.id = Ids.QuickPick
+  // $QuickPick.role= 'dialog'
+  $QuickPick.append($QuickPickHeader, $QuickPickItems)
+  // $QuickPick.setAttribute('aria-modal', 'false') // TODO why is this
+  $QuickPick.ariaLabel = 'Quick open'
+
+  return {
+    $Viewlet: $QuickPick,
+    $QuickPick,
+    $QuickPickInput,
+    $QuickPickItems,
+    $QuickPickStatus: undefined,
+  }
+}
+
+export const setPicks = (state, visiblePicks) => {
+  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
+}
+
+const create$QuickPickStatus = () => {
+  const $QuickPickStatus = document.createElement('div')
+  $QuickPickStatus.className = 'QuickPickStatus'
+  // const te.$QuickPickStatus.role = AriaRoles.Status
+  // $QuickPickStatus.ariaLive = 'polite'
+  // $QuickPickStatus.id = 'QuickPickStatus'
+  return $QuickPickStatus
+}
+
+export const hideStatus = (state) => {
+  state.$QuickPickStatus.remove()
+  state.$QuickPickStatus = undefined
+}
+
+export const showNoResults = (state, noResults, unfocusIndex) => {
+  setPicks(state, [])
+  if (!state.$QuickPickStatus) {
+    state.$QuickPickStatus = create$QuickPickStatus()
+    state.$QuickPick.append(state.$QuickPickStatus)
+  }
+  state.$QuickPickStatus.textContent = 'No Results'
+
+  // announce to screenreaders that there are no results
+  AriaAlert.alert('No results')
+}
+
+// TODO QuickPick module is always loaded lazily -> can create $QuickPick eagerly (no state / less state laying around)
+
+// TODO remove from dom vs display none which should be used?
+
+// TODO have common widgets container for all widgets (this, notifications, context menu)
+export const dispose = (state) => {
+  state.$QuickPickInput.onblur = null
+}
+
+export const setValue = (state, value) => {
+  const { $QuickPickInput } = state
+  $QuickPickInput.value = value
+}
+
+export const setCursorOffset = (state, cursorOffset) => {
+  const { $QuickPickInput } = state
+  $QuickPickInput.selectionStart = cursorOffset
+  $QuickPickInput.selectionEnd = cursorOffset
+}
+
+export const setItemsHeight = (state, itemsHeight) => {
+  const { $QuickPickItems } = state
+  $QuickPickItems.style.height = `${itemsHeight}px`
+}
+
+export const noop = (state) => {}

package/static/0cae46c/packages/renderer-process/src/parts/ViewletRunAndDebug/ViewletRunAndDebug.js

@@ -0,0 +1,212 @@
+import * as Assert from '../Assert/Assert.js'
+import * as Icon from '../Icon/Icon.js'
+import * as IconButton from '../IconButton/IconButton.js'
+import * as MaskIcon from '../MaskIcon/MaskIcon.js'
+import * as ViewletDebugEvents from './ViewletRunAndDebugEvents.js'
+
+const create$DebugButton = (text, icon) => {
+  const $Button = IconButton.create$Button(text, icon)
+  $Button.className += ' DebugButton'
+  return $Button
+}
+
+const create$DebugSectionHeader = (text) => {
+  const $DebugSectionHeader = document.createElement('div')
+  $DebugSectionHeader.className = 'DebugSectionHeader'
+  $DebugSectionHeader.role = 'treeitem'
+  $DebugSectionHeader.tabIndex = 0
+  const $Icon = MaskIcon.create(Icon.TriangleRight)
+  $Icon.classList.add('DebugMaskIcon')
+  const $Label = document.createTextNode(text)
+  $DebugSectionHeader.append($Icon, $Label)
+  return $DebugSectionHeader
+}
+
+export const create = () => {
+  // const $ButtonPause = document.createElement('button')
+  // $ButtonPause.textContent = 'pause'
+  // $ButtonPause.className = 'DebugButtonPause'
+
+  const $ButtonPauseContinue = create$DebugButton('pause', Icon.DebugContinue)
+
+  const $ButtonStepOver = create$DebugButton('Step over', Icon.DebugStepOver)
+
+  const $ButtonStepInto = create$DebugButton('Step into', Icon.DebugStepInto)
+
+  const $ButtonStepOut = create$DebugButton('Step out', Icon.DebugStepOut)
+
+  const $Processes = document.createElement('div')
+
+  const $DebugSectionHeaderWatch = create$DebugSectionHeader('Watch')
+  const $DebugSectionHeaderBreakPoints =
+    create$DebugSectionHeader('Breakpoints')
+  const $DebugSectionHeaderScope = create$DebugSectionHeader('Scope')
+  const $DebugSectionHeaderCallStack = create$DebugSectionHeader('Call Stack')
+
+  const $Viewlet = document.createElement('div')
+  $Viewlet.className = 'Viewlet RunAndDebug'
+  $Viewlet.tabIndex = 0
+  $Viewlet.onmousedown = ViewletDebugEvents.handleMouseDown
+  $Viewlet.append(
+    $ButtonPauseContinue,
+    $ButtonStepOver,
+    $ButtonStepInto,
+    $ButtonStepOut,
+    $DebugSectionHeaderWatch,
+    $DebugSectionHeaderBreakPoints,
+    $DebugSectionHeaderScope,
+    $DebugSectionHeaderCallStack
+  )
+
+  return {
+    $Viewlet,
+    $Processes,
+    $ButtonPauseContinue,
+    $DebugSectionHeaderWatch,
+    $DebugSectionHeaderBreakPoints,
+    $DebugSectionHeaderScope,
+    $DebugSectionHeaderCallStack,
+    $ButtonStepOut,
+  }
+}
+
+const create$Process = (process) => {
+  const $Process = document.createElement('div')
+  $Process.textContent = process.title
+  return $Process
+}
+
+export const setProcesses = (state, processes) => {
+  const { $Processes } = state
+  $Processes.replaceChildren(...processes.map(create$Process))
+}
+
+export const setDebugState = (state, debugState) => {
+  const { $ButtonPauseContinue } = state
+  switch (debugState) {
+    case 'paused':
+      $ButtonPauseContinue.ariaLabel = 'continue'
+      $ButtonPauseContinue.title = 'continue'
+      MaskIcon.setIcon($ButtonPauseContinue.firstChild, Icon.DebugContinue)
+      break
+    case 'default':
+      $ButtonPauseContinue.ariaLabel = 'pause'
+      $ButtonPauseContinue.title = 'pause'
+      MaskIcon.setIcon($ButtonPauseContinue.firstChild, Icon.DebugPause)
+      break
+    default:
+      break
+  }
+  console.log({ debugState })
+}
+
+const create$ScopeChain = (scopeChain, thisObject) => {
+  const $ScopeChain = document.createElement('div')
+  for (const element of scopeChain) {
+    const $Node = document.createElement('div')
+    $Node.className = 'DebugSectionRow'
+    switch (element.type) {
+      case 'this':
+        const $ThisKey = document.createElement('span')
+        $ThisKey.textContent = element.key
+        const $ThisValue = document.createElement('span')
+        $ThisValue.textContent = element.value
+        $Node.append($ThisKey, ': ', $ThisValue)
+        break
+      case 'exception':
+        const $ExceptionKey = document.createElement('span')
+        $ExceptionKey.textContent = element.key
+        const $ExceptionValue = document.createElement('span')
+        $ExceptionValue.textContent = element.value
+        $Node.append($ExceptionKey, ': ', $ExceptionValue)
+        break
+      case 'scope':
+        const $ScopeKey = document.createElement('span')
+        $ScopeKey.className = 'DebugScopeKey'
+        $ScopeKey.textContent = element.key
+        $Node.append($ScopeKey)
+        break
+      case 'property':
+        const $PropertyKey = document.createElement('span')
+        $PropertyKey.textContent = element.key
+        $PropertyKey.className = 'DebugPropertyKey'
+        const $PropertyValue = document.createElement('span')
+        switch (element.valueType) {
+          case 'undefined':
+            $PropertyValue.className = 'DebugValueUndefined'
+            break
+          case 'number':
+            $PropertyValue.className = 'DebugValueNumber'
+            break
+          default:
+            break
+        }
+        $PropertyValue.textContent = element.value
+        $Node.append($PropertyKey, ': ', $PropertyValue)
+        break
+      default:
+        throw new Error('unsupported scope type')
+    }
+    $Node.style.paddingLeft = `${element.indent}px`
+    $ScopeChain.append($Node)
+  }
+  return $ScopeChain
+}
+
+export const setScopeChain = (state, scopeChain) => {
+  Assert.array(scopeChain)
+  const { $DebugSectionHeaderScope } = state
+  const $ScopeChain = create$ScopeChain(scopeChain)
+  const $Next = $DebugSectionHeaderScope.nextElementSibling
+  if ($Next.className === 'DebugSectionHeader') {
+    $DebugSectionHeaderScope.after($ScopeChain)
+  } else {
+    $Next.replaceWith($ScopeChain)
+  }
+}
+
+const create$CallStack = (callStack) => {
+  const $CallStack = document.createElement('div')
+  for (const element of callStack) {
+    const $Node = document.createElement('div')
+    $Node.textContent = element.functionName
+    $CallStack.append($Node)
+  }
+  return $CallStack
+}
+
+export const setCallStack = (state, callStack) => {
+  const { $DebugSectionHeaderCallStack } = state
+  const $CallStack = create$CallStack(callStack)
+  const $Next = $DebugSectionHeaderCallStack.nextElementSibling
+  if (!$Next || $Next.className === 'DebugSectionHeader') {
+    $DebugSectionHeaderCallStack.after($CallStack)
+  } else {
+    $Next.replaceWith($CallStack)
+  }
+}
+
+export const setPausedReason = (state, pausedReason, pausedMessage) => {
+  const { $ButtonStepOut } = state
+  const $Next = $ButtonStepOut.nextElementSibling
+  if ($Next.className === 'DebugPausedMessage') {
+    $Next.textContent = pausedMessage
+  } else {
+    const $DebugPausedMessage = document.createElement('div')
+    $DebugPausedMessage.className = 'DebugPausedMessage'
+    $DebugPausedMessage.textContent = pausedMessage
+    $ButtonStepOut.after($DebugPausedMessage)
+  }
+}
+
+export const refresh = (state, message) => {
+  Assert.object(state)
+  Assert.string(message)
+}
+
+export const focus = (state) => {
+  const { $Viewlet } = state
+  $Viewlet.focus()
+}
+
+export const dispose = () => {}