@lvce-editor/server 0.4.4 → 0.6.0

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

@@ -0,0 +1,221 @@
+import * as EditorGroup from '../EditorGroup/EditorGroup.js'
+import * as Layout from '../Layout/Layout.js'
+import * as ViewletMainEvents from './ViewletMainEvents.js'
+
+const create$MainTabs = () => {
+  const $MainTabs = document.createElement('div')
+  $MainTabs.className = 'MainTabs'
+  // @ts-ignore
+  $MainTabs.role = 'tablist'
+  $MainTabs.onmousedown = ViewletMainEvents.handleTabsMouseDown
+  $MainTabs.oncontextmenu = ViewletMainEvents.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 = ViewletMainEvents.handleDrop
+  $Main.ondragover = ViewletMainEvents.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')
+}
+
+export const openViewlet = (state, 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) {
+    const $OldTab = state.$MainTabs.children[oldActiveIndex]
+    if ($OldTab) {
+      $OldTab.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/fbac85f/packages/renderer-process/src/parts/ViewletMain/ViewletMainEvents.js

@@ -0,0 +1,100 @@
+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'
+import * as MouseEventType from '../MouseEventType/MouseEventType.js'
+
+export const handleDragOver = (event) => {
+  event.preventDefault()
+  Layout.state.$Main.classList.add('DropTarget')
+}
+
+export const handleDrop = async (event) => {
+  console.log('[main] drop')
+  event.preventDefault()
+  Layout.state.$Main.classList.remove('DropTarget')
+  RendererWorker.send(/* handleDrop */ 'Main.handleDrop')
+}
+
+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
+  }
+}
+
+export const handleTabCloseButtonMouseDown = (event, index) => {
+  RendererWorker.send(
+    /* Main.closeEditor */ 'Main.closeEditor',
+    /* index */ index
+  )
+}
+
+export const handleTabMouseDown = (event, index) => {
+  switch (event.button) {
+    case MouseEventType.LeftClick:
+      RendererWorker.send(
+        /* Main.handleTabClick */ 'Main.handleTabClick',
+        /* index */ index
+      )
+      break
+    case MouseEventType.MiddleClick:
+      RendererWorker.send(
+        /* Main.closeEditor */ 'Main.closeEditor',
+        /* index */ index
+      )
+      break
+    case MouseEventType.RightClick:
+      break
+    default:
+      break
+  }
+}
+
+export const handleTabsMouseDown = (event) => {
+  const $Target = event.target
+  const index = getIndex($Target)
+  if (index === -1) {
+    return
+  }
+  event.preventDefault()
+  switch ($Target.className) {
+    case 'EditorTabCloseButton':
+      handleTabCloseButtonMouseDown(event, index)
+      break
+    case 'MainTab':
+      handleTabMouseDown(event, index)
+      break
+    default:
+      break
+  }
+}
+
+export 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
+  )
+}

package/static/fbac85f/packages/renderer-process/src/parts/ViewletModule/ViewletModule.js

@@ -0,0 +1,62 @@
+import * as ViewletModuleId from '../ViewletModuleId/ViewletModuleId.js'
+
+export const load = (moduleId) => {
+  switch (moduleId) {
+    case ViewletModuleId.Explorer:
+      return import('../ViewletExplorer/ViewletExplorer.js')
+    case ViewletModuleId.RunAndDebug:
+      return import('../ViewletRunAndDebug/ViewletRunAndDebug.js')
+    case ViewletModuleId.Search:
+      return import('../ViewletSearch/ViewletSearch.js')
+    case ViewletModuleId.SourceControl:
+      return import('../ViewletSourceControl/ViewletSourceControl.js')
+    case ViewletModuleId.Terminal:
+      return import('../ViewletTerminal/ViewletTerminal.js')
+    case ViewletModuleId.Extensions:
+      return import('../ViewletExtensions/ViewletExtensions.js')
+    case ViewletModuleId.DebugConsole:
+      return import('../ViewletDebugConsole/ViewletDebugConsole.js')
+    case ViewletModuleId.Output:
+      return import('../ViewletOutput/ViewletOutput.js')
+    case ViewletModuleId.Problems:
+      return import('../ViewletProblems/ViewletProblems.js')
+    case ViewletModuleId.Empty:
+      return import('../ViewletEmpty/ViewletEmpty.js')
+    case ViewletModuleId.EditorText:
+      return import('../ViewletEditorText/ViewletEditorText.js')
+    case ViewletModuleId.EditorImage:
+      return import('../ViewletEditorImage/ViewletEditorImage.js')
+    case ViewletModuleId.Clock:
+      return import('../ViewletClock/ViewletClock.js')
+    case ViewletModuleId.SideBar:
+      return import('../ViewletSideBar/ViewletSideBar.js')
+    case ViewletModuleId.Panel:
+      return import('../ViewletPanel/ViewletPanel.js')
+    case ViewletModuleId.ActivityBar:
+      return import('../ViewletActivityBar/ViewletActivityBar.js')
+    case ViewletModuleId.ImagePreview:
+      return import('../ImagePreview/ImagePreview.js')
+    case ViewletModuleId.QuickPick:
+      return import('../ViewletQuickPick/ViewletQuickPick.js')
+    case ViewletModuleId.StatusBar:
+      return import('../ViewletStatusBar/ViewletStatusBar.js')
+    case ViewletModuleId.TitleBar:
+      return import('../ViewletTitleBar/ViewletTitleBar.js')
+    case ViewletModuleId.Main:
+      return import('../ViewletMain/ViewletMain.js')
+    case ViewletModuleId.EditorCompletion:
+      return import('../ViewletEditorCompletion/ViewletEditorCompletion.js')
+    case ViewletModuleId.References:
+      return import('../ViewletReferences/ViewletReferences.js')
+    case ViewletModuleId.Implementations:
+      return import('../ViewletImplementations/ViewletImplementations.js')
+    case ViewletModuleId.EditorPlainText:
+      return import('../ViewletEditorPlainText/ViewletEditorPlainText.js')
+    case ViewletModuleId.KeyBindings:
+      return import('../ViewletKeyBindings/ViewletKeyBindings.js')
+    case ViewletModuleId.EditorFindWidget:
+      return import('../ViewletEditorFindWidget/ViewletEditorFindWidget.js')
+    default:
+      throw new Error('unknown module')
+  }
+}

package/static/fbac85f/packages/renderer-process/src/parts/ViewletModuleId/ViewletModuleId.js

@@ -0,0 +1,53 @@
+export const ActivityBar = 'ActivityBar'
+
+export const Clock = 'Clock'
+
+export const DebugConsole = 'Debug Console'
+
+export const EditorCompletion = 'EditorCompletion'
+
+export const EditorImage = 'EditorImage'
+
+export const EditorPlainText = 'EditorPlainText'
+
+export const EditorText = 'EditorText'
+
+export const Empty = 'Empty'
+
+export const Explorer = 'Explorer'
+
+export const Extensions = 'Extensions'
+
+export const ImagePreview = 'ImagePreview'
+
+export const Implementations = 'Implementations'
+
+export const KeyBindings = 'KeyBindings'
+
+export const Main = 'Main'
+
+export const Output = 'Output'
+
+export const Panel = 'Panel'
+
+export const Problems = 'Problems'
+
+export const QuickPick = 'QuickPick'
+
+export const References = 'References'
+
+export const RunAndDebug = 'Run And Debug'
+
+export const Search = 'Search'
+
+export const SideBar = 'SideBar'
+
+export const SourceControl = 'Source Control'
+
+export const StatusBar = 'StatusBar'
+
+export const Terminal = 'Terminal'
+
+export const TitleBar = 'TitleBar'
+
+export const EditorFindWidget = 'EditorFindWidget'

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

@@ -0,0 +1,89 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as Focus from '../Focus/Focus.js'
+import * as Assert from '../Assert/Assert.js'
+import * as ViewletOutputEvents from './ViewletOutputEvents.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'
+
+export const create = () => {
+  const $ViewletOutputSelect = document.createElement('select')
+  $ViewletOutputSelect.className = 'ViewletOutputSelect'
+  $ViewletOutputSelect.onchange = ViewletOutputEvents.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/fbac85f/packages/renderer-process/src/parts/ViewletOutput/ViewletOutputEvents.js

@@ -0,0 +1,12 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+export const handleChange = (event) => {
+  const $Target = event.target
+  const value = $Target.value
+  RendererWorker.send(
+    /* viewletSend */ 'Viewlet.send',
+    /* ViewletId */ 'Output',
+    /* method */ 'setOutputChannel',
+    /* option */ value
+  )
+}

package/static/fbac85f/packages/renderer-process/src/parts/ViewletProblems/ViewletProblems.js

@@ -0,0 +1,42 @@
+import * as Assert from '../Assert/Assert.js'
+import * as ViewletProblemsEvents from './ViewletProblemsEvents.js'
+
+export const name = 'Problems'
+
+export const create = (problemsCount) => {
+  const $Viewlet = document.createElement('div')
+  $Viewlet.dataset.viewletId = 'Problems'
+  $Viewlet.className = 'Viewlet'
+  $Viewlet.tabIndex = 0
+  $Viewlet.onmousedown = ViewletProblemsEvents.handleMouseDown
+  return {
+    $Viewlet,
+  }
+}
+
+export const setFocusedIndex = (state, focusedIndex) => {
+  const { $Viewlet } = state
+  if (focusedIndex === -1) {
+    $Viewlet.classList.add('FocusOutline')
+    $Viewlet.focus()
+  }
+}
+
+export const setProblems = (state, problems) => {
+  Assert.object(state)
+  Assert.array(problems)
+  const { $Viewlet } = state
+  if (problems.length === 0) {
+    $Viewlet.ariaLabel = 'No problems have been detected in the workspace.'
+    $Viewlet.textContent = 'No problems have been detected in the workspace.'
+  } else {
+    // TODO adjust aria-label
+    $Viewlet.ariaLabel = 'No problems have been detected in the workspace.'
+    $Viewlet.textContent = problems.join('\n')
+  }
+}
+
+export const focus = (state) => {
+  const { $Viewlet } = state
+  $Viewlet.focus()
+}

package/static/fbac85f/packages/renderer-process/src/parts/ViewletProblems/ViewletProblemsEvents.js

@@ -0,0 +1,6 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+export const handleMouseDown = (event) => {
+  event.preventDefault()
+  RendererWorker.send(/* ViewletProblems.focusIndex */ 7550, /* index */ -1)
+}