@lvce-editor/server 0.4.4 → 0.6.0

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

@@ -0,0 +1,565 @@
+import * as Assert from '../Assert/Assert.js'
+import * as Command from '../Command/Command.js'
+import * as Languages from '../Languages/Languages.js'
+import * as LifeCycle from '../LifeCycle/LifeCycle.js'
+import * as RendererProcess from '../RendererProcess/RendererProcess.js'
+import * as SharedProcess from '../SharedProcess/SharedProcess.js'
+import * as Viewlet from '../Viewlet/Viewlet.js'
+import * as ViewletManager from '../ViewletManager/ViewletManager.js'
+import * as ViewletMap from '../ViewletMap/ViewletMap.js'
+import * as ViewletModule from '../ViewletModule/ViewletModule.js'
+import * as ViewletStates from '../ViewletStates/ViewletStates.js'
+import * as Workspace from '../Workspace/Workspace.js'
+import * as Arrays from '../Arrays/Arrays.js'
+import * as FileSystem from '../FileSystem/FileSystem.js'
+import * as MenuEntryId from '../MenuEntryId/MenuEntryId.js'
+
+const COLUMN_WIDTH = 9 // TODO compute this automatically once
+
+// interface Editor {
+//  readonly uri: string
+//  readonly type: string
+// }
+
+// interface EditorLazy {
+//  readonly type: 'lazy'
+// }
+
+// interface EditorText extends Editor {
+//   readonly textDocument: TextDocument
+//   readonly type: 'text'
+// }
+
+// interface EditorIframe extends Editor {
+//  readonly srcdoc: string
+//  readonly type: 'iframe'
+// }
+
+// interface EditorImage extends Editor {
+//   readonly src: string
+//   readonly type: 'image'
+// }
+
+// interface EditorVideo extends Editor {
+//   readonly src: string
+//   readonly type: 'video'
+// }
+
+const canBeRestored = (editor) => {
+  return FileSystem.canBeRestored(editor.uri)
+}
+
+const getMainEditors = (state) => {
+  if (
+    !state ||
+    !state.instances ||
+    !state.instances.Main ||
+    !state.instances.Main.state ||
+    !state.instances.Main.state.editors
+  ) {
+    return []
+  }
+  // TODO check that type is string (else runtime error occurs and page is blank)
+  return state.instances.Main.state.editors.filter(canBeRestored).slice(-1)
+}
+
+const restoreEditors = async (state) => {
+  // // TODO have mapping that loads custom editor module on demand
+  // // file:// -> import text editor
+  // // perf://startup-performance -> show startup performance
+  // // perf://memory-usage -> show memory usage
+  // // svg://my-file.svg -> show svg
+  // // image://my-image.png -> show image
+  // // video://my-video.png -> show video
+  // // also editor title can be shown while content is still loading
+  // if (restoredEditor.uri.startsWith('perf://')) {
+  //   Command.execute(/* Developer.openPerf */ 820)
+  //   return
+  // }
+  // @ts-ignore
+  await openUri(state, restoredEditor.uri)
+}
+
+const handleTokenizeChange = (languageId) => {
+  // @ts-ignore
+
+  const instances = ViewletState.getAllInstances()
+  if (instances.EditorText) {
+    const instance = instances.EditorText
+  }
+  // for (const editor of state.editors) {
+  //   if (editor.languageId === languageId) {
+  //     Editor.handleTokenizeChange(editor)
+  //   }
+  // }
+}
+
+const hydrateLazy = async () => {
+  // TODO this should be in extension host
+  await Command.execute(
+    /* EditorDiagnostics.hydrate */ 'EditorDiagnostics.hydrate'
+  )
+}
+
+export const name = 'Main'
+
+export const create = (id, uri, left, top, width, height) => {
+  return {
+    editors: [],
+    activeIndex: -1,
+    focusedIndex: -1,
+    left,
+    top,
+    width,
+    height,
+  }
+}
+
+// const showEditor = async (uri, languageId, content) => {
+//   if (state.activeEditor) {
+//     // TODO duplicate code in if/else
+//     // state.editors = [state.activeEditor]
+//     // Editor.replaceOne(state.activeEditor, uri, languageId, content)
+//     // TODO replace editor
+//   } else {
+//     // state.activeEditor = Editor.create(1, uri, languageId, content)
+//     // state.editors = [state.activeEditor]
+//     // Editor.openOne(state.activeEditor)
+//     // TODO create editor group and new editor
+//   }
+
+//   // TODO send type of editor
+//   // 1 normal
+//   // 2 side by side (settings.json, git diff, preview)
+//   // 3 image
+//   // 4 video
+//   // 5 iframe (maybe 3/4 could also be iframe)
+//   // Editor.initialSync(state.activeEditor)
+
+//   // TODO use idlecallback maybe (after 350ms or something)
+//   // TODO maybe use indexeddb instead
+//   // TODO store all open editors
+//   // await Command.execute(/* LocalStorage.setJson */ 6901, 'Main.editors', [uri])
+// }
+
+// TODO there is also openEditor function
+
+const getTabTitle = (uri) => {
+  const homeDir = Workspace.getHomeDir()
+  // TODO tree shake this out in web
+  if (homeDir && uri.startsWith(homeDir)) {
+    return `~${uri.slice(homeDir.length)}`
+  }
+  return uri
+}
+
+const findEditorWithUri = (editors, uri) => {
+  for (const [i, editor] of editors.entries()) {
+    if (editor.uri === uri) {
+      return i
+    }
+  }
+  return -1
+}
+
+const TAB_HEIGHT = 35
+
+const getRestoredEditors = async () => {
+  if (Workspace.isTest()) {
+    return []
+  }
+  const savedState = await Command.execute(
+    /* LocalStorage.getJson */ 'LocalStorage.getJson',
+    /* key */ 'stateToSave'
+  )
+  const restoredEditors = getMainEditors(savedState)
+  return restoredEditors
+}
+
+export const loadContent = async (state) => {
+  const editors = await getRestoredEditors()
+  // @ts-ignore
+
+  LifeCycle.once(LifeCycle.PHASE_TWELVE, hydrateLazy)
+  return {
+    ...state,
+    editors,
+  }
+}
+
+export const contentLoaded = async (state) => {
+  if (state.editors.length === 0) {
+    return
+  }
+  const editor = Arrays.last(state.editors)
+  const top = state.top + TAB_HEIGHT
+  const left = state.left
+  const width = state.width
+  const height = state.height - TAB_HEIGHT
+  const id = ViewletMap.getId(editor.uri)
+  const instance = ViewletManager.create(
+    ViewletModule.load,
+    id,
+    'Main',
+    editor.uri,
+    left,
+    top,
+    width,
+    height
+  )
+  const tabLabel = Workspace.pathBaseName(editor.uri)
+  const tabTitle = getTabTitle(editor.uri)
+  RendererProcess.invoke(
+    /* Viewlet.send */ 'Viewlet.send',
+    /* id */ 'Main',
+    /* method */ 'openViewlet',
+    /* tabLabel */ tabLabel,
+    /* tabTitle */ tabTitle
+  )
+  // TODO race condition: Viewlet may have been resized before it has loaded
+  // @ts-ignore
+
+  await ViewletManager.load(instance)
+}
+
+export const openUri = async (state, uri, focus = true) => {
+  Assert.object(state)
+  Assert.string(uri)
+  const top = state.top + TAB_HEIGHT
+  const left = state.left
+  const width = state.width
+  const height = state.height - TAB_HEIGHT
+  const id = ViewletMap.getId(uri)
+
+  for (const editor of state.editors) {
+    if (editor.uri === uri) {
+      // TODO if the editor is already open, nothing needs to be done
+      const instance = ViewletManager.create(
+        ViewletModule.load,
+        id,
+        'Main',
+        uri,
+        left,
+        top,
+        width,
+        height
+      )
+      // @ts-ignore
+
+      await ViewletManager.load(instance, focus)
+      return
+    }
+  }
+  const instance = ViewletManager.create(
+    ViewletModule.load,
+    id,
+    'Main',
+    uri,
+    left,
+    top,
+    width,
+    height
+  )
+  const oldActiveIndex = state.activeIndex
+  state.editors.push({ uri })
+  state.activeIndex = state.editors.length - 1
+  const tabLabel = Workspace.pathBaseName(uri)
+  const tabTitle = getTabTitle(uri)
+  await RendererProcess.invoke(
+    /* Viewlet.send */ 'Viewlet.send',
+    /* id */ 'Main',
+    /* method */ 'openViewlet',
+    /* tabLabel */ tabLabel,
+    /* tabTitle */ tabTitle,
+    /* oldActiveIndex */ oldActiveIndex
+  )
+  // @ts-ignore
+
+  return ViewletManager.load(instance, focus)
+}
+
+export const save = () => {
+  // TODO handle different types of editors / custom editors / webviews
+  Command.execute(/* EditorSave.editorSave */ 'Editor.save')
+}
+
+// const getEditor = (uri) => {
+//   const protocol = 'file://' + uri.slice(0, 0)
+//   switch (protocol) {
+//     case 'file://':
+//       // TODO open normal editor
+//       break
+//     case 'performance://monitor':
+//       return import('../EditorPerformance.js')
+//     case 'performance://startup':
+//       return import('../EditorPerformanceStartup.js')
+//     default:
+//       // ask extension host for custom editor
+//       break
+//   }
+// }
+
+export const openEditorWithType = async (file) => {
+  // TODO resolve custom editors from extension host
+  // then open extension host custom editor or normal editor
+}
+
+export const saveWithoutFormatting = async () => {
+  console.warn('not implemented')
+}
+
+export const handleDrop = async () => {
+  console.log(['main drop'])
+  const clipBoardText = await SharedProcess.invoke(
+    /* ClipBoard.read */ 'ClipBoard.read'
+  )
+  console.log({ clipBoardText })
+}
+
+export const closeActiveEditor = (state) => {
+  if (!state.activeEditor) {
+  }
+}
+
+const getId = (editor) => {
+  return ViewletMap.getId(editor.uri)
+}
+
+export const closeAllEditors = async (state) => {
+  RendererProcess.invoke(
+    /* Viewlet.send */ 'Viewlet.send',
+    /* id */ 'Main',
+    /* method */ 'dispose'
+  )
+  const ids = state.editors.map(getId)
+  state.editors = []
+  state.focusedIndex = -1
+  state.selectedIndex = -1
+  // TODO should call dispose method, but only in renderer-worker
+  for (const id of ids) {
+    await ViewletStates.dispose(id)
+  }
+}
+
+export const dispose = () => {}
+
+export const closeEditor = async (state, index) => {
+  console.log('close', index, 'of', state.editors)
+  if (state.editors.length === 1) {
+    console.log('close all')
+    closeAllEditors(state)
+    return
+  }
+  const top = state.top
+  const left = state.left
+  const width = state.width
+  const height = state.height
+  if (index === state.activeIndex) {
+    const oldActiveIndex = state.activeIndex
+    const oldEditor = state.editors[index]
+    state.editors.splice(index, 1)
+    const newActiveIndex = index === 0 ? index : index - 1
+    const id = ViewletMap.getId(oldEditor.uri)
+    Viewlet.dispose(id)
+    state.activeIndex = newActiveIndex
+    state.focusedIndex = newActiveIndex
+    // const instance = Viewlet.create(id, 'uri', left, top, width, height)
+    // TODO ideally content would load synchronously and there would be one layout and one paint for opening the new tab
+    // except in the case where the content takes long (>100ms) to load, then it should show the tab
+    // and for the content a loading spinner or (preferred) a progress bar
+    // that it replaced with the actual content once it has been loaded
+    // await instance.factory.refresh(instance.state, {
+    //   uri: previousEditor.uri,
+    //   top: instance.state.top,
+    //   left: instance.state.left,
+    //   height: instance.state.height,
+    //   columnWidth: COLUMN_WIDTH,
+    // })
+    await RendererProcess.invoke(
+      /* Main.closeOneTab */ 'Main.closeOneTab',
+      /* closeIndex */ oldActiveIndex,
+      /* focusIndex */ newActiveIndex
+    )
+    return
+  }
+  await RendererProcess.invoke(
+    /* Viewlet.send */ 'Viewlet.send',
+    /* id */ 'Main',
+    /* method */ 'closeOneTabOnly',
+    /* closeIndex */ index
+  )
+  state.editors.splice(index, 1)
+  if (index < state.activeIndex) {
+    state.activeIndex--
+  }
+  state.focusedIndex = state.activeIndex
+
+  // TODO just close the tab
+}
+
+export const closeFocusedTab = (state) => {
+  closeEditor(state.focusedIndex)
+}
+
+export const handleTabContextMenu = async (state, index, x, y) => {
+  state.focusedIndex = index
+  await Command.execute(
+    /* ContextMenu.show */ 'ContextMenu.show',
+    /* x */ x,
+    /* y */ y,
+    /* id */ MenuEntryId.Tab
+  )
+}
+
+export const focusIndex = (state, index) => {
+  if (index === state.activeIndex) {
+    console.log('index', index, 'is already active index')
+    return
+  }
+  const oldActiveIndex = state.activeIndex
+  state.activeIndex = index
+
+  const editor = state.editors[index]
+  const top = state.top + TAB_HEIGHT
+  const left = state.left
+  const width = state.width
+  const height = state.height - TAB_HEIGHT
+  const id = ViewletMap.getId(editor.uri)
+
+  const viewlet = ViewletManager.create(
+    ViewletModule.load,
+    id,
+    'Main',
+    editor.uri,
+    left,
+    top,
+    width,
+    height
+  )
+
+  // TODO race condition
+  RendererProcess.invoke(
+    /* Viewlet.send */ 'Viewlet.send',
+    /* id */ 'Main',
+    /* method */ 'focusAnotherTab',
+    /* unFocusIndex */ oldActiveIndex,
+    /* focusIndex */ state.activeIndex
+  )
+  // @ts-ignore
+  return ViewletManager.load(viewlet)
+}
+
+export const focusFirst = (state) => {
+  return focusIndex(state, 0)
+}
+
+export const focusLast = (state) => {
+  return focusIndex(state, state.editors.length - 1)
+}
+
+export const focusPrevious = (state) => {
+  const previousIndex =
+    state.activeIndex === 0 ? state.editors.length - 1 : state.activeIndex - 1
+  return focusIndex(state, previousIndex)
+}
+
+export const focusNext = (state) => {
+  const nextIndex =
+    state.activeIndex === state.editors.length - 1 ? 0 : state.activeIndex + 1
+  return focusIndex(state, nextIndex)
+}
+
+export const handleTabClick = (state, index) => {
+  console.log('focus index', index)
+  return focusIndex(state, index)
+}
+
+export const closeOthers = async (state) => {
+  if (state.focusedIndex === state.activeIndex) {
+    // view is kept the same, only tabs are closed
+    await RendererProcess.invoke(
+      /* Viewlet.send */ 'Viewlet.send',
+      /* id */ 'Main',
+      /* method */ 'closeOthers',
+      /* keepIndex */ state.focusedIndex,
+      /* focusIndex */ state.focusedIndex
+    )
+  } else {
+    // view needs to be switched to focused index
+    await RendererProcess.invoke(
+      /* Viewlet.send */ 'Viewlet.send',
+      /* id */ 'Main',
+      /* method */ 'closeOthers',
+      /* keepIndex */ state.focusedIndex,
+      /* focusIndex */ state.focusedIndex
+    )
+  }
+  state.editors = [state.editors[state.focusedIndex]]
+  state.activeIndex = 0
+  state.focusedIndex = 0
+}
+
+export const closeTabsRight = async (state) => {
+  if (state.focusedIndex >= state.activeIndex) {
+    // view is kept the same, only tabs are closed
+    await RendererProcess.invoke(
+      /* Viewlet.send */ 'Viewlet.send',
+      /* id */ 'Main',
+      /* method */ 'closeTabsRight',
+      /* index */ state.focusedIndex
+    )
+  } else {
+    // view needs to be switched to focused index
+    await RendererProcess.invoke(
+      /* Viewlet.send */ 'Viewlet.send',
+      /* id */ 'Main',
+      /* method */ 'closeTabsRight',
+      /* index */ state.focusedIndex
+    )
+  }
+  state.editors = state.editors.slice(0, state.focusedIndex + 1)
+  state.activeIndex = state.focusedIndex
+}
+
+export const closeTabsLeft = async (state) => {
+  if (state.focusedIndex <= state.activeIndex) {
+    // view is kept the same, only tabs are closed
+    await RendererProcess.invoke(
+      /* Viewlet.send */ 'Viewlet.send',
+      /* id */ 'Main',
+      /* method */ 'closeTabsLeft',
+      /* index */ state.focusedIndex
+    )
+  } else {
+    // view needs to be switched to focused index
+    await RendererProcess.invoke(
+      /* Viewlet.send */ 'Viewlet.send',
+      /* id */ 'Main',
+      /* method */ 'closeTabsLeft',
+      /* index */ state.focusedIndex
+    )
+  }
+  state.editors = state.editors.slice(state.focusedIndex)
+  state.activeIndex = state.focusedIndex
+}
+
+export const resize = (state, dimensions) => {
+  const top = dimensions.top + TAB_HEIGHT
+  const left = dimensions.left
+  const width = dimensions.width
+  const height = dimensions.height - TAB_HEIGHT
+  const childDimensions = {
+    top,
+    left,
+    width,
+    height,
+  }
+  const commands = Viewlet.resize('EditorText', childDimensions)
+  return {
+    newState: {
+      ...state,
+      ...dimensions,
+    },
+    commands,
+  }
+}