@lvce-editor/server 0.0.27 → 0.0.28

package/static/eb65b4e/packages/renderer-process/src/parts/Layout/Layout.js

@@ -1,260 +0,0 @@
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-
-export const state = {
-  $ActivityBar: undefined,
-  $StatusBar: undefined,
-  $TitleBar: undefined,
-  $Main: undefined,
-  $SideBar: undefined,
-  $Panel: undefined,
-  $Workbench: undefined,
-  $SashSideBar: undefined,
-  $SashPanel: undefined,
-}
-
-// TODO when nodes are not visible, they are still kept in memory as detached dom nodes
-// maybe it doesn't matter but maybe they should be garbage collected
-
-export const update = (points) => {
-  const $ActivityBar = state.$ActivityBar
-  const $Main = state.$Main
-  const $TitleBar = state.$TitleBar
-  const $SideBar = state.$SideBar
-  const $StatusBar = state.$StatusBar
-  const $Panel = state.$Panel
-  const $SashSideBar = state.$SashSideBar
-  const $SashPanel = state.$SashPanel
-
-  if (points.activityBarVisible) {
-    $ActivityBar.style.top = `${points.activityBarTop}px`
-    $ActivityBar.style.left = `${points.activityBarLeft}px`
-    $ActivityBar.style.width = `${points.activityBarWidth}px`
-    $ActivityBar.style.height = `${points.activityBarHeight}px`
-    $ActivityBar.style.display = ''
-  } else {
-    $ActivityBar.style.display = 'none'
-  }
-  if (points.mainVisible) {
-    $Main.style.top = `${points.mainTop}px`
-    $Main.style.left = `${points.mainLeft}px`
-    $Main.style.width = `${points.mainWidth}px`
-    $Main.style.height = `${points.mainHeight}px`
-    $Main.style.display = ''
-  } else {
-    $Main.style.display = 'none'
-  }
-  if (points.panelVisible) {
-    $Panel.style.top = `${points.panelTop}px`
-    $Panel.style.left = `${points.panelLeft}px`
-    $Panel.style.width = `${points.panelWidth}px`
-    $Panel.style.height = `${points.panelHeight}px`
-    $Panel.style.display = ''
-
-    $SashPanel.style.top = `${points.panelTop}px`
-    $SashPanel.style.left = `${points.panelLeft}px`
-    $SashPanel.style.width = `${points.panelWidth}px`
-  } else {
-    $Panel.style.display = 'none'
-  }
-  if (points.sideBarVisible) {
-    $SideBar.style.top = `${points.sideBarTop}px`
-    $SideBar.style.left = `${points.sideBarLeft}px`
-    $SideBar.style.width = `${points.sideBarWidth}px`
-    $SideBar.style.height = `${points.sideBarHeight}px`
-    $SideBar.style.display = ''
-
-    $SashSideBar.style.left = `${points.sideBarLeft}px`
-    $SashSideBar.style.top = `${points.sideBarTop}px`
-    $SashSideBar.style.height = `${points.sideBarHeight}px`
-  } else {
-    $SideBar.style.display = 'none'
-  }
-  if (points.statusBarVisible) {
-    $StatusBar.style.top = `${points.statusBarTop}px`
-    $StatusBar.style.left = `${points.statusBarLeft}px`
-    $StatusBar.style.width = `${points.statusBarWidth}px`
-    $StatusBar.style.height = `${points.statusBarHeight}px`
-    $StatusBar.style.display = ''
-  } else {
-    $StatusBar.style.display = 'none'
-  }
-  if (points.titleBarVisible) {
-    $TitleBar.style.top = `${points.titleBarTop}px`
-    $TitleBar.style.left = `${points.titleBarLeft}px`
-    $TitleBar.style.width = `${points.titleBarWidth}px`
-    $TitleBar.style.height = `${points.titleBarHeight}px`
-    $TitleBar.style.display = ''
-  } else {
-    // TODO remove elements from dom instead of hiding them
-    $TitleBar.style.display = 'none'
-  }
-}
-
-// export const get$ActivityBar = () => {
-//   return state.$ActivityBar
-// }
-
-// export const get$SideBar = () => {
-//   return state.$SideBar
-// }
-
-// export const get$Panel = () => {
-//   return state.$Panel
-// }
-
-// export const get$TitleBar = () => {
-//   return state.$TitleBar
-// }
-
-// export const get$Main = () => {
-//   return state.$Main
-// }
-
-const getTitleBarHeight = () => {
-  if (
-    // @ts-ignore
-    navigator.windowControlsOverlay &&
-    // @ts-ignore
-    navigator.windowControlsOverlay.getTitlebarAreaRect
-  ) {
-    // @ts-ignore
-    const titleBarRect = navigator.windowControlsOverlay.getTitlebarAreaRect()
-    return titleBarRect.height
-  }
-  return 0
-}
-
-export const getBounds = () => {
-  return {
-    windowWidth: window.innerWidth,
-    windowHeight: window.innerHeight,
-    titleBarHeight: getTitleBarHeight(),
-  }
-}
-
-const handleResize = (event) => {
-  RendererWorker.send([
-    /* Layout.handleResize */ 'Layout.handleResize',
-    /* bounds */ getBounds(),
-  ])
-}
-
-const getSashId = ($Target) => {
-  console.log({ $Target })
-  if ($Target.id === 'SashPanel') {
-    return 'Panel'
-  }
-  if ($Target.id === 'SashSideBar') {
-    return 'SideBar'
-  }
-  return ''
-}
-
-const handleSashPointerMove = (event) => {
-  const x = event.clientX
-  const y = event.clientY
-  RendererWorker.send([
-    /* Layout.handleSashPointerMove */ 'Layout.handleSashPointerMove',
-    /* x */ x,
-    /* y */ y,
-  ])
-}
-
-const handleSashPointerUp = () => {
-  document.body.style.removeProperty('cursor')
-  window.removeEventListener('pointermove', handleSashPointerMove)
-  window.removeEventListener('pointerup', handleSashPointerUp)
-  const $Style = document.getElementById('SashStyle')
-  // @ts-ignore
-  $Style.remove()
-}
-
-const handleSashPointerDown = (event) => {
-  // TODO maybe add a class to body instead?
-  const $Style = document.createElement('style')
-  $Style.id = 'SashStyle'
-  $Style.textContent = `* {
-  cursor: col-resize !important;
-  pointer-events: none;
-}
-
-.SashVertical {
-  pointer-events: all;
-}
-.
-`
-  document.head.append($Style)
-  window.addEventListener('pointermove', handleSashPointerMove)
-  window.addEventListener('pointerup', handleSashPointerUp)
-  const $Target = event.target
-  const id = getSashId($Target)
-  RendererWorker.send([
-    /* Layout.handleSashPointerDown */ 'Layout.handleSashPointerDown',
-    /* id */ id,
-  ])
-}
-
-export const show = (points) => {
-  const $ActivityBar = document.createElement('div')
-  $ActivityBar.id = 'ActivityBar'
-
-  const $StatusBar = document.createElement('div')
-  $StatusBar.id = 'StatusBar'
-
-  const $TitleBar = document.createElement('div')
-  $TitleBar.id = 'TitleBar'
-
-  const $Main = document.createElement('main')
-  $Main.id = 'Main'
-
-  const $SideBar = document.createElement('div')
-  $SideBar.id = 'SideBar'
-
-  const $Panel = document.createElement('div')
-  $Panel.id = 'Panel'
-
-  // TODO use aria role splitter once supported https://github.com/w3c/aria/issues/1348
-  const $SashSideBar = document.createElement('div')
-  $SashSideBar.className = 'SashVertical'
-  $SashSideBar.id = 'SashSideBar'
-
-  // TODO use aria role splitter once supported https://github.com/w3c/aria/issues/1348
-  const $SashPanel = document.createElement('div')
-  $SashPanel.className = 'SashHorizontal'
-  $SashPanel.id = 'SashPanel'
-
-  const $Workbench = document.createElement('div')
-  $Workbench.id = 'Workbench'
-  $Workbench.append(
-    $TitleBar,
-    $Main,
-    $SideBar,
-    $ActivityBar,
-    $Panel,
-    $StatusBar,
-    $SashSideBar,
-    $SashPanel
-  )
-  // TODO don't like the random side effects here
-  state.$ActivityBar = $ActivityBar
-  state.$Main = $Main
-  state.$Panel = $Panel
-  state.$SideBar = $SideBar
-  state.$StatusBar = $StatusBar
-  state.$TitleBar = $TitleBar
-  state.$Workbench = $Workbench
-  state.$SashPanel = $SashPanel
-  state.$SashSideBar = $SashSideBar
-  update(points)
-  // document.body.setAttribute('role', 'application') // TODO this doesn't seem to work
-  $Workbench.setAttribute('role', 'application')
-  document.body.append($Workbench)
-  window.addEventListener('resize', handleResize, { passive: true })
-  $SashSideBar.addEventListener('pointerdown', handleSashPointerDown)
-  $SashPanel.addEventListener('pointerdown', handleSashPointerDown)
-}
-
-export const hide = () => {
-  state.$Workbench.remove()
-  window.removeEventListener('resize', handleResize)
-}

package/static/eb65b4e/packages/renderer-process/src/parts/Location/Location.ipc.js

@@ -1,8 +0,0 @@
-import * as Command from '../Command/Command.js'
-import * as Location from './Location.js'
-
-export const __initialize__ = () => {
-  Command.register('Location.getPathName', Location.getPathName)
-  Command.register('Location.setPathName', Location.setPathName)
-  Command.register('Location.hydrate', Location.hydrate)
-}

package/static/eb65b4e/packages/renderer-process/src/parts/Location/Location.js

@@ -1,22 +0,0 @@
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-
-export const getPathName = () => {
-  return location.pathname
-}
-
-// TODO should do nothing if it is already at this path
-export const setPathName = (pathName) => {
-  const currentPathName = getPathName()
-  if (currentPathName === pathName) {
-    return
-  }
-  history.pushState(null, null, pathName)
-}
-
-const handlePopState = (event) => {
-  RendererWorker.send([/* Workspace.hydrate */ 'Workspace.hydrate'])
-}
-
-export const hydrate = () => {
-  addEventListener('popstate', handlePopState)
-}

package/static/eb65b4e/packages/renderer-process/src/parts/Notification/Notification.js

@@ -1,79 +0,0 @@
-import * as Widget from '../Widget/Widget.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-
-export const state = {
-  $Notifications: undefined,
-}
-
-const create$Notifications = () => {
-  const $Notifications = document.createElement('div')
-  $Notifications.id = 'Notifications'
-  return $Notifications
-}
-
-const create$Notification = (message) => {
-  const $Notification = document.createElement('div')
-  $Notification.className = 'Notification'
-  $Notification.textContent = message
-  return $Notification
-}
-
-export const create = (type, message) => {
-  // TODO this pattern might be also useful for activitybar, sidebar etc., creating elements as late as possible, only when actually needed
-  const $Notification = create$Notification(message)
-  Widget.append($Notification)
-}
-
-const findIndex = ($Child) => {
-  const $Parent = $Child.parentNode
-  for (let i = 0; i < $Parent.children.length; i++) {
-    if ($Parent.children[i] === $Child) {
-      return i
-    }
-  }
-  return -1
-}
-
-const handleNotificationClick = (event) => {
-  const $Target = event.target
-  switch ($Target.className) {
-    case 'NotificationOption':
-      const index = findIndex($Target)
-      RendererWorker.send([
-        /* Notification.handleClick */ 'Notification.handleClick',
-        /* index */ index,
-      ])
-      break
-    default:
-      break
-  }
-  console.log('notification clicked')
-}
-
-const create$NotificationWithOptions = (message, options) => {
-  const $NotificationMessage = document.createElement('p')
-  $NotificationMessage.className = 'NotificationMessage'
-  $NotificationMessage.textContent = message
-  const $NotificationOptions = document.createElement('div')
-  $NotificationOptions.className = 'NotificationOptions'
-  for (const option of options) {
-    const $NotificationOption = document.createElement('button')
-    $NotificationOption.className = 'NotificationOption'
-    $NotificationOption.textContent = option
-    $NotificationOptions.append($NotificationOption)
-  }
-  const $Notification = document.createElement('div')
-  $Notification.className = 'Notification'
-  $Notification.append($NotificationMessage, $NotificationOptions)
-  $Notification.onclick = handleNotificationClick
-  return $Notification
-}
-
-export const createWithOptions = (type, message, options) => {
-  const $Notification = create$NotificationWithOptions(message, options)
-  Widget.append($Notification)
-}
-
-export const dispose = (id) => {
-  // const $Notification = state.$Notifications
-}

package/static/eb65b4e/packages/renderer-process/src/parts/OldMenu/Menu.js

@@ -1,335 +0,0 @@
-import * as FindIndex from '../../shared/findIndex.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as Widget from '../Widget/Widget.js'
-import * as MenuItem from '../MenuItem/MenuItem.js'
-import * as BackDrop from '../BackDrop/BackDrop.js'
-import * as Focus from '../Focus/Focus.js'
-
-// TODO when pressing tab -> focus next element in tab order and close menu
-
-// TODO menu and contextmenu should have own keybinding logic
-// seems not possible to do with just one keybinding listener
-
-// TODO similar to context menu, show sub menu entries
-// there can be multiple instances (parent -> child -> child) submenus
-
-// TODO using .style.top, .style.left causes chrome devtools to show many layout shift -> maybe use transform instead
-
-// TODO when cycling through items, recalculate style is much slower
-// than in vscode (1.49ms vs 0.33ms)
-// paint is also faster in vscode (0.32ms vs 0.14ms)
-
-// TODO focus on menu is not announced to screenreader
-
-// TODO recalculate style and paint is slow when cycling through items:
-// 0.59ms recalculate style
-// 36us update layer tree
-// 0.35ms paint
-// 0.20ms composite layer
-
-// const contextMenuWidth = 150
-// const contextMenuHeight = 150 + /* padding */ 8 * 4
-
-// TODO keyboard handling
-
-export const state = {
-  handleKeyDown(event) {},
-  handleFocusOut(event) {},
-  $$Menus: [],
-  anchorX: 0,
-  anchorY: 0,
-  anchorTime: -1,
-  $BackDrop: undefined,
-}
-
-const getLevel = ($Menu) => {
-  return state.$$Menus.indexOf($Menu)
-}
-
-const handleMouseDown = (event) => {
-  const $Target = event.target
-  const $Menu = $Target.closest('.Menu')
-  const index = FindIndex.findIndex($Menu, $Target)
-  if (index === -1) {
-    console.log('index is negative one')
-    return
-  }
-  event.preventDefault()
-  const level = getLevel($Menu)
-  RendererWorker.send([
-    /* Menu.handleClick */ 'Menu.selectIndex',
-    /* level */ level,
-    /* index */ index,
-  ])
-}
-
-// const handleKeyDown = (event) => {
-//   console.log({ key: event.key })
-//   switch (event.key) {
-//     case 'ArrowUp':
-//       RendererWorker.send([ /* Menu.focusPrevious */ 7405])
-//       break
-//     case 'ArrowLeft':
-//       // TODO collapse menu maybe
-//       break
-//     case 'ArrowDown':
-//       RendererWorker.send([ /* Menu.focusNext */ 7404])
-//       break
-//     case 'ArrowRight':
-//       // TODO expand sub menu maybe
-//       break
-//     case 'Home':
-//       RendererWorker.send([ /* Menu.focusFirst */ 7406])
-//       break
-//     case 'End':
-//       RendererWorker.send([ /* Menu.focusLast */ 7407])
-//       break
-//     default:
-//       break
-//   }
-// }
-
-const MOUSE_LOCS_TRACKED = 3
-
-/**
- *
- * @param {MouseEvent} event
- */
-const handleMouseEnter = (event) => {
-  const $Target = event.target
-  // @ts-ignore
-  const $Menu = $Target.closest('.Menu')
-  const x = event.clientX
-  const y = event.clientY
-  const timeStamp = event.timeStamp
-
-  const index = FindIndex.findIndex($Menu, $Target)
-  if (index === -1) {
-    return
-  }
-  const level = getLevel($Menu)
-  console.log('focus index mouse', index)
-  RendererWorker.send([
-    /* Menu.handleMouseEnter */ 'Menu.handleMouseEnter',
-    /* level */ level,
-    /* index */ index,
-    /* x */ x,
-    /* y */ y,
-    /* timeStamp */ timeStamp,
-  ])
-}
-
-const handleMouseMove = (event) => {
-  // const x = event.clientX
-  // const y = event.clientY
-  // console.log('move', { x, y })
-}
-
-const handleMouseLeave = (event) => {
-  // const x = event.clientX
-  // const y = event.clientY
-  // console.log('leave', { x, y })
-}
-
-// const handleBlur = (event) => {}
-const handleKeyDown = (event) => {
-  state.handleKeyDown(event)
-}
-
-const handleFocusOut = (event) => {
-  state.handleFocusOut(event)
-}
-
-const create$Menu = () => {
-  // TODO set aria label on menu (e.g. File, Edit, Selection)
-  const $Menu = document.createElement('ul')
-  $Menu.className = 'Menu'
-  $Menu.setAttribute('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
-}
-
-export const focusIndex = (level, oldFocusedIndex, newFocusedIndex) => {
-  const $Menu = state.$$Menus[level]
-  if (oldFocusedIndex !== -1) {
-    $Menu.children[oldFocusedIndex].classList.remove('Focused')
-  }
-  if (newFocusedIndex !== -1) {
-    $Menu.children[newFocusedIndex].classList.add('Focused')
-    $Menu.children[newFocusedIndex].focus()
-  }
-}
-
-// TODO replace function that recycles menu dom nodes
-
-const handleBackDropMouseDown = () => {
-  RendererWorker.send([/* Menu.hide */ 'Menu.hide'])
-}
-
-const handleContextMenu = (event) => {
-  event.preventDefault()
-}
-
-export const showMenu = (
-  x,
-  y,
-  width,
-  height,
-  items,
-  level,
-  parentIndex = -1,
-  mouseBlocking = false
-) => {
-  if (mouseBlocking) {
-    const $BackDrop = BackDrop.create$BackDrop()
-    $BackDrop.onmousedown = handleBackDropMouseDown
-    $BackDrop.oncontextmenu = handleContextMenu
-    state.$BackDrop = $BackDrop
-    Widget.append($BackDrop)
-  }
-
-  const $Menu = create$Menu()
-  $Menu.append(...items.map(MenuItem.create$MenuItem))
-  $Menu.style.left = `${x}px`
-  $Menu.style.top = `${y}px`
-  $Menu.id = `Menu-${level}`
-
-  if (parentIndex !== -1) {
-    const $ParentMenu = state.$$Menus[level - 1]
-    const $ParentMenuItem = $ParentMenu.children[parentIndex]
-    $ParentMenuItem.ariaExpanded = 'true'
-    $ParentMenuItem.setAttribute('aria-owns', $Menu.id)
-  }
-
-  state.$$Menus.push($Menu)
-  Widget.append($Menu)
-
-  if (level === 0) {
-    console.info('focus menu')
-    Focus.focus($Menu, 'menu')
-  }
-}
-
-export const showContextMenu = (x, y, width, height, level, items) => {
-  for (const $Menu of state.$$Menus) {
-    Widget.remove($Menu)
-  }
-  state.$$Menus = []
-  while (state.$$Menus.length > 0) {
-    state.$$Menus[0].remove()
-  }
-  const $Menu = create$Menu()
-  $Menu.append(...items.map(MenuItem.create$MenuItem))
-  $Menu.style.left = `${x}px`
-  $Menu.style.top = `${y}px`
-  $Menu.id = `Menu-${level}`
-  Widget.append($Menu)
-  state.$$Menus.push($Menu)
-  // TODO create backdrop
-}
-
-export const closeSubMenu = () => {
-  const $SubMenu = state.$$Menus.pop()
-  const $ParentMenu = state.$$Menus.at(-1)
-  Widget.remove($SubMenu)
-}
-
-export const hideSubMenu = (level) => {
-  const $$ChildMenus = state.$$Menus.slice(level)
-  for (const $ChildMenu of $$ChildMenus) {
-    Widget.remove($ChildMenu)
-  }
-}
-
-// export const showSubMenu = (level, items, parentIndex) => {
-//   const $$ChildMenus = state.$$Menus.slice(level)
-//   for (const $ChildMenu of $$ChildMenus) {
-//     Widget.remove($ChildMenu)
-//   }
-//   state.$$Menus = state.$$Menus.slice(0, level)
-//   const $ParentMenu = state.$$Menus[level - 1]
-//   const $ParentMenuItem = $ParentMenu.children[parentIndex]
-//   const rect = $ParentMenuItem.getBoundingClientRect()
-//   const x = rect.right
-//   const y = rect.top
-//   showMenu(x, y, items, level)
-//   // TODO remove aria-owns when sub-menu is closed
-//   $ParentMenuItem.setAttribute('aria-owns', 'Menu')
-// }
-
-// TODO implement focusIndex like this
-// const focusIndex2=(id, index)=>{
-//   const $Menu = state.menus[id]
-//   $Menu.children[index].focus()
-// }
-
-// TODO support nested menus / submenus
-export const showControlled = ({
-  x,
-  y,
-  items,
-  handleKeyDown,
-  handleFocusOut,
-  $Parent,
-  level,
-  width,
-  height,
-}) => {
-  showMenu(x, y, width, height, items, level)
-  // TODO menu should not necessarily know about parent (titleBarMenuBar)
-  // it should be the other way around
-  state.$Parent = $Parent
-  state.handleFocusOut = handleFocusOut
-  state.handleKeyDown = handleKeyDown
-  if ($Parent) {
-    // state.$Menu.ariaLabel=''
-    // state.$Menu.ariaLabelledBy  =$Parent.id
-    $Parent.setAttribute('aria-owns', 'Menu')
-  } else {
-    // state.$Menu.removeAttribute('aria-labelledby')
-  }
-  // Context.setFocus('menu') // TODO overlapping focus: titleBarMenuBar has focus (kinda) but also menu at the same time
-}
-
-// TODO have function to show submenu
-
-export const hide = (restoreFocus = true) => {
-  for (const $Menu of state.$$Menus) {
-    Widget.remove($Menu)
-  }
-  state.$$Menus = []
-  if (state.$BackDrop) {
-    Widget.remove(state.$BackDrop)
-    state.$BackDrop = undefined
-  }
-  // TODO focus previous item
-  if (restoreFocus) {
-    Focus.focusPrevious()
-  }
-}
-
-export const contains = ($Element) => {
-  for (const $Menu of state.$$Menus) {
-    if ($Menu.contains($Element)) {
-      return true
-    }
-  }
-  return false
-}