@lvce-editor/server 0.0.28 → 0.0.31

package/static/0e4d46a/packages/renderer-process/src/parts/ViewletMain/ViewletMain.js

@@ -0,0 +1,315 @@
+import * as EditorGroup from '../EditorGroup/EditorGroup.js'
+import * as Layout from '../Layout/Layout.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as Viewlet from '../Viewlet/Viewlet.js'
+
+const handleDragOver = (event) => {
+  event.preventDefault()
+  Layout.state.$Main.classList.add('DropTarget')
+}
+
+const handleDrop = async (event) => {
+  console.log('[main] drop')
+  event.preventDefault()
+  Layout.state.$Main.classList.remove('DropTarget')
+  RendererWorker.send(/* handleDrop */ 'Main.handleDrop')
+}
+
+const create$MainTabs = () => {
+  const $MainTabs = document.createElement('div')
+  $MainTabs.className = 'MainTabs'
+  // @ts-ignore
+  $MainTabs.role = 'tablist'
+  $MainTabs.onmousedown = handleTabsMouseDown
+  $MainTabs.oncontextmenu = handleTabsContextMenu
+  // TODO race condition: what if tab has already been closed?
+  return $MainTabs
+}
+
+// TODO Main should not be bound to Editor -> Lazy load Editor
+export const create = () => {
+  const $Main = Layout.state.$Main
+  $Main.ondrop = handleDrop
+  $Main.ondragover = handleDragOver
+
+  // const $MainContent = document.createElement('div')
+  // $MainContent.id = 'MainContent'
+
+  // const $MainTabs = document.createElement('div')
+  // $MainTabs.className = 'MainTabs'
+  // $MainTabs.onmousedown = handleTabsMouseDown
+  // $MainTabs.oncontextmenu = handleTabsContextMenu
+  // // TODO race condition: what if tab has already been closed?
+  // $Main.append($MainTabs, $MainContent)
+
+  return {
+    $Viewlet: $Main,
+    $Main,
+    $MainContent: undefined,
+    $MainTabs: undefined,
+  }
+}
+
+export const dispose = (state) => {
+  console.log(state)
+  state.$MainContent.remove()
+  state.$MainContent = undefined
+  state.$MainTabs.remove()
+  state.$MainTabs = undefined
+}
+
+export const replaceEditor = (state, id, uri, languageId) => {
+  EditorGroup.replaceOne(state.editorGroup, id, uri, languageId)
+}
+
+export const addEditor = (state, id, uri, languageId) => {
+  EditorGroup.addOne(state.editorGroup, id, uri, languageId)
+}
+
+// TODO there are 3 cases
+// 1. no editor group and no editor
+// 2. editor group exists and new editor should be added
+// 3. editor group exists and editor should be replaced
+export const openEditor = async (state, id, uri, languageId) => {
+  console.log('open editor', id, uri, languageId)
+  state.editorGroup = EditorGroup.create()
+  state.activeEditorState = EditorGroup.addOne(
+    state.editorGroup,
+    id,
+    uri,
+    languageId
+  )
+}
+
+export const closeAllViewlets = (state) => {
+  const $Main = Layout.state.$Main
+  while ($Main.firstChild) {
+    $Main.firstChild.remove()
+  }
+  state.$MainContent = undefined
+  state.$MainTabs = undefined
+}
+
+export const closeViewletAndTab = (state, index) => {
+  state.$MainContent.remove()
+  state.$MainContent = undefined
+  state.$MainTabs.remove()
+  state.$MainTabs = undefined
+}
+
+export const focus = () => {
+  console.log('todo focus main')
+}
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const getIndex = ($Target) => {
+  switch ($Target.className) {
+    case 'EditorTabCloseButton':
+      return getNodeIndex($Target.parentNode)
+    case 'MainTab':
+      return getNodeIndex($Target)
+    default:
+      return -1
+  }
+}
+
+const handleTabCloseButtonMouseDown = (event, index) => {
+  RendererWorker.send(
+    /* Main.closeEditor */ 'Main.closeEditor',
+    /* index */ index
+  )
+}
+
+const handleTabMouseDown = (event, index) => {
+  switch (event.button) {
+    case /* LeftClick */ 0:
+      RendererWorker.send(
+        /* Main.handleTabClick */ 'Main.handleTabClick',
+        /* index */ index
+      )
+      break
+    case /* MiddleClick */ 1:
+      RendererWorker.send(
+        /* Main.closeEditor */ 'Main.closeEditor',
+        /* index */ index
+      )
+      break
+    case /* RightClick */ 2:
+      break
+    default:
+      break
+  }
+}
+
+const handleTabsMouseDown = (event) => {
+  const $Target = event.target
+  const index = getIndex($Target)
+  console.log({ index })
+  if (index === -1) {
+    return
+  }
+  event.preventDefault()
+  switch ($Target.className) {
+    case 'EditorTabCloseButton':
+      handleTabCloseButtonMouseDown(event, index)
+      break
+    case 'MainTab':
+      handleTabMouseDown(event, index)
+      break
+    default:
+      break
+  }
+}
+
+const handleTabsContextMenu = (event) => {
+  const $Target = event.target
+  const index = getIndex($Target)
+  if (index === -1) {
+    return
+  }
+  event.preventDefault()
+  const x = event.clientX
+  const y = event.clientY
+  RendererWorker.send(
+    /* Main.handleTabContextMenu */ 'Main.handleTabContextMenu',
+    /* index */ index,
+    /* x */ x,
+    /* y */ y
+  )
+}
+
+export const openViewlet = (state, id, tabLabel, tabTitle, oldActiveIndex) => {
+  const $Tab = document.createElement('div')
+  $Tab.className = 'MainTab'
+  $Tab.textContent = tabLabel
+  $Tab.title = tabTitle
+  $Tab.ariaSelected = 'true'
+  // @ts-ignore
+  $Tab.role = 'tab'
+
+  const $TabCloseButton = document.createElement('button')
+  $TabCloseButton.className = 'EditorTabCloseButton'
+  $TabCloseButton.ariaLabel = 'Close'
+  $TabCloseButton.title = ''
+  $Tab.append($TabCloseButton)
+
+  if (oldActiveIndex !== -1 && state.$MainTabs) {
+    state.$MainTabs.children[oldActiveIndex].ariaSelected = 'false'
+  }
+
+  if (!state.$MainTabs) {
+    state.$MainTabs = create$MainTabs()
+    state.$Main.append(state.$MainTabs)
+  }
+
+  state.$MainTabs.append($Tab)
+
+  // await Viewlet.load(id)
+  // const instance = Viewlet.state.instances[id]
+  // // TODO race condition: what if tab has already been closed?
+  // Viewlet.mount(state.$MainContent, instance.state)
+  // Viewlet.focus(id)
+  // Layout.state.$Main.append(state.$MainTabs, state.$MainContent)
+}
+
+const create$MainContent = () => {
+  const $MainContent = document.createElement('div')
+  $MainContent.id = 'MainContent'
+  return $MainContent
+}
+
+export const appendViewlet = (state, childName, $Child) => {
+  if (!state.$MainContent) {
+    state.$MainContent = create$MainContent()
+    state.$Main.append(state.$MainContent)
+  }
+  // TODO should bring back old optimization of reusing existing editor dom nodes if possible
+  while (state.$MainContent.firstChild) {
+    state.$MainContent.firstChild.remove()
+  }
+  state.$MainContent.append($Child)
+
+  // await Viewlet.load(id)
+  // const instance = Viewlet.state.instances[id]
+  // // TODO race condition: what if tab has already been closed?
+  // Viewlet.mount(state.$MainContent, instance.state)
+  // Viewlet.focus(id)
+  // Layout.state.$Main.append(state.$MainTabs, state.$MainContent)
+}
+
+// TODO when there is not enough space available, only show tab close button
+// for focused tab (that's how chrome and firefox do it)
+export const openAnotherTab = async (
+  state,
+  tabLabel,
+  tabTitle,
+  unFocusIndex
+) => {
+  const $Tab = document.createElement('div')
+  $Tab.className = 'MainTab'
+  $Tab.textContent = tabLabel
+  $Tab.title = tabTitle
+  $Tab.ariaSelected = 'true'
+  // @ts-ignore
+  $Tab.role = 'tab'
+  $Tab.tabIndex = 0
+  const $TabCloseButton = document.createElement('button')
+  $TabCloseButton.className = 'EditorTabCloseButton'
+  $TabCloseButton.ariaLabel = 'Close'
+  $Tab.append($TabCloseButton)
+  state.$MainTabs.children[unFocusIndex].ariaSelected = 'false'
+  state.$MainTabs.append($Tab)
+}
+
+export const closeOneTab = (state, closeIndex, focusIndex) => {
+  state.$MainTabs.children[closeIndex].remove()
+  state.$MainTabs.children[focusIndex].ariaSelected = 'true'
+}
+
+export const closeOneTabOnly = (state, closeIndex) => {
+  state.$MainTabs.children[closeIndex].remove()
+}
+
+export const focusAnotherTab = (state, unFocusIndex, focusIndex) => {
+  state.$MainTabs.children[unFocusIndex].ariaSelected = 'false'
+  state.$MainTabs.children[focusIndex].ariaSelected = 'true'
+}
+
+export const closeOthers = (state, keepIndex, focusIndex) => {
+  for (let i = state.$MainTabs.children.length - 1; i >= 0; i--) {
+    const $Tab = state.$MainTabs.children[i]
+    if (i === keepIndex) {
+      $Tab.ariaSelected = 'true'
+      $Tab.tabIndex = 0
+    } else {
+      $Tab.remove()
+    }
+  }
+}
+
+export const closeTabsRight = (state, index) => {
+  for (let i = state.$MainTabs.children.length - 1; i > index; i--) {
+    const $Tab = state.$MainTabs.children[i]
+    $Tab.remove()
+  }
+  const $Tab = state.$MainTabs.children[index]
+  $Tab.ariaSelected = 'true'
+  $Tab.tabIndex = 0
+}
+
+export const closeTabsLeft = (state, index) => {
+  for (let i = index - 1; i >= 0; i--) {
+    const $Tab = state.$MainTabs.children[i]
+    $Tab.remove()
+  }
+  const $Tab = state.$MainTabs.children[0]
+  $Tab.ariaSelected = 'true'
+  $Tab.tabIndex = 0
+}

package/static/0e4d46a/packages/renderer-process/src/parts/ViewletOutput/ViewletOutput.js

@@ -0,0 +1,99 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as Focus from '../Focus/Focus.js'
+import * as Assert from '../Assert/Assert.js'
+
+const create$Option = (option) => {
+  const $Option = document.createElement('option')
+  $Option.value = option.file
+  $Option.textContent = option.name
+  return $Option
+}
+
+// TODO name export not necessary
+export const name = 'Output'
+
+const handleChange = (event) => {
+  const $Target = event.target
+  const value = $Target.value
+  RendererWorker.send(
+    /* viewletSend */ 'Viewlet.send',
+    /* ViewletId */ 'Output',
+    /* method */ 'setOutputChannel',
+    /* option */ value
+  )
+}
+
+export const create = () => {
+  const $ViewletOutputSelect = document.createElement('select')
+  $ViewletOutputSelect.className = 'ViewletOutputSelect'
+  $ViewletOutputSelect.onchange = handleChange
+  $ViewletOutputSelect.ariaLabel = 'Select a log'
+  const $ViewletOutputContent = document.createElement('div')
+  $ViewletOutputContent.className = 'OutputContent'
+  // @ts-ignore
+  $ViewletOutputContent.role = 'log'
+  $ViewletOutputContent.tabIndex = 0
+  const $ViewletOutputWidgets = document.createElement('div')
+  $ViewletOutputWidgets.className = 'OutputWidgets'
+  const $Viewlet = document.createElement('div')
+  $Viewlet.dataset.viewletId = 'Output'
+  $Viewlet.className = 'Viewlet ViewletOutput'
+  $Viewlet.tabIndex = 0
+  $Viewlet.append(
+    $ViewletOutputSelect,
+    $ViewletOutputContent,
+    $ViewletOutputWidgets
+  )
+  return {
+    $Viewlet,
+    select: $ViewletOutputSelect,
+    $Select: $ViewletOutputSelect,
+    content: $ViewletOutputContent,
+    $Content: $ViewletOutputContent,
+    $ViewletOutputContent,
+  }
+}
+
+export const setOptions = (state, options) => {
+  state.$Select.append(...options.map(create$Option))
+}
+
+export const append = (state, text) => {
+  Assert.object(state)
+  Assert.string(text)
+  const $Line = document.createElement('div')
+  $Line.textContent = text
+  state.content.append($Line)
+}
+
+export const clear = (state) => {
+  Assert.object(state)
+  state.content.textContent = ''
+}
+
+export const handleError = (state, error) => {
+  Assert.object(state)
+  Assert.string(error)
+  state.content.textContent = error
+}
+
+export const focus = (state) => {
+  Assert.object(state)
+  Focus.focus(state.$ViewletOutputContent, 'output')
+}
+
+// TODO handle case when output is opened -> find widget is opened -> output is disposed before find widget is ready
+export const openFindWidget = (state) => {
+  // Command.execute(findWidget.create)
+}
+
+export const disposeFindWidget = (state) => {
+  if (!state.findWidget) {
+    return
+  }
+
+  // Command.execute(FindWidget.dispose, state.findWidget)
+  state.findWidget
+}
+
+export const dispose = (state) => {}

package/static/0e4d46a/packages/renderer-process/src/parts/ViewletPanel/ViewletPanel.js

@@ -0,0 +1,116 @@
+import * as Assert from '../Assert/Assert.js'
+import * as Layout from '../Layout/Layout.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+const create$PanelTab = (label, index) => {
+  const $PanelTab = document.createElement('div')
+  $PanelTab.className = 'PanelTab'
+  // @ts-ignore
+  $PanelTab.role = 'tab'
+  $PanelTab.textContent = label
+  $PanelTab.id = `PanelTab-${index + 1}`
+  return $PanelTab
+}
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const panelTabsHandleClick = (event) => {
+  const $Target = event.target
+  switch ($Target.className) {
+    case 'PanelTab': {
+      const index = getNodeIndex($Target)
+      RendererWorker.send(
+        /* Panel.selectIndex */ 'Panel.selectIndex',
+        /* index */ index
+      )
+      break
+    }
+    default:
+      break
+  }
+}
+
+export const create = () => {
+  const $PanelTabs = document.createElement('div')
+  $PanelTabs.id = 'PanelTabs'
+  // @ts-ignore
+  $PanelTabs.role = 'tablist'
+  $PanelTabs.onmousedown = panelTabsHandleClick
+  $PanelTabs.tabIndex = -1
+  const $PanelHeader = document.createElement('div')
+  $PanelHeader.id = 'PanelHeader'
+  $PanelHeader.append($PanelTabs)
+  // const $PanelContent = document.createElement('div')
+  // $PanelContent.id = 'PanelContent'
+  const $Panel = Layout.state.$Panel
+  $Panel.append($PanelHeader)
+  $Panel.ariaLabel = 'Panel'
+  return {
+    $Panel,
+    $PanelTabs,
+    $PanelHeader,
+    $PanelContent: undefined,
+  }
+  // await openViewlet('Terminal')
+}
+
+export const setTabs = (state, tabs) => {
+  state.$PanelTabs.append(...tabs.map(create$PanelTab))
+}
+
+export const appendViewlet = (state, name, $Viewlet) => {
+  Assert.object(state)
+  Assert.string(name)
+  Assert.object($Viewlet)
+  // TODO is it a problem that the id is duplicated for a short amount of time here?
+  $Viewlet.id = 'PanelContent'
+  if (state.$PanelContent) {
+    state.$PanelContent.replaceWith($Viewlet)
+  } else {
+    state.$Panel.append($Viewlet)
+  }
+  state.$PanelContent = $Viewlet
+}
+
+// TODO add test for focus method
+export const focus = (state) => {
+  Assert.object(state)
+  if (!state.currentViewlet) {
+    return
+  }
+  state.currentViewlet.factory.focus(state.currentViewlet.state)
+}
+
+export const dispose = (state) => {
+  if (state.$PanelContent) {
+    state.$PanelContent.remove()
+    state.$PanelContent = undefined
+  }
+  if (state.$PanelTabs) {
+    state.$PanelTabs.remove()
+    state.$PanelTabs = undefined
+  }
+  if (state.$PanelHeader) {
+    state.$PanelHeader.remove()
+    state.$PanelHeader = undefined
+  }
+}
+
+export const setSelectedIndex = (state, oldIndex, newIndex) => {
+  const { $PanelTabs } = state
+  if (oldIndex !== -1) {
+    const $PanelTab = $PanelTabs.children[oldIndex]
+    $PanelTab.removeAttribute('aria-selected')
+  }
+  if (newIndex !== -1) {
+    const $PanelTab = $PanelTabs.children[newIndex]
+    $PanelTab.ariaSelected = true
+    $PanelTabs.setAttribute('aria-activedescendant', $PanelTab.id)
+  }
+}