@lvce-editor/server 0.12.0 → 0.13.0

package/static/c808931/packages/renderer-worker/src/parts/ViewletExtensions/ViewletExtensions.js

@@ -0,0 +1,411 @@
+import * as Command from '../Command/Command.js'
+import * as ErrorHandling from '../ErrorHandling/ErrorHandling.js'
+import * as ExtensionManagement from '../ExtensionManagement/ExtensionManagement.js' // TODO use Command.execute instead
+import * as Height from '../Height/Height.js'
+import * as MenuEntryId from '../MenuEntryId/MenuEntryId.js'
+import * as RendererProcess from '../RendererProcess/RendererProcess.js'
+import * as ScrollBarFunctions from '../ScrollBarFunctions/ScrollBarFunctions.js'
+import * as SearchExtensions from '../SearchExtensions/SearchExtensions.js'
+import * as ViewletModuleId from '../ViewletModuleId/ViewletModuleId.js'
+import * as ViewletSize from '../ViewletSize/ViewletSize.js'
+import * as VirtualList from '../VirtualList/VirtualList.js'
+import { getListHeight } from './ViewletExtensionsShared.js'
+import * as ViewletExtensionsStrings from './ViewletExtensionsStrings.js'
+
+const SUGGESTIONS = ['@builtin', '@disabled', '@enabled', '@installed', '@outdated', '@sort:installs', '@id:', '@category']
+
+// then state can be recycled by Viewlet when there is only a single ViewletExtensions instance
+
+export const saveState = (state) => {
+  const { searchValue } = state
+  return {
+    searchValue,
+  }
+}
+
+export const create = (id, uri, x, y, width, height) => {
+  return {
+    searchValue: '',
+    suggestionState: /* Closed */ 0,
+    disposed: false,
+    width,
+    height,
+    handleOffset: 0,
+    x,
+    y,
+    message: '',
+    focused: false,
+    size: ViewletSize.None,
+    ...VirtualList.create({
+      itemHeight: Height.ExtensionListItem,
+      minimumSliderSize: Height.MinimumSliderSize,
+      headerHeight: 35,
+    }),
+    allExtensions: [],
+  }
+}
+
+const getVisible = (state) => {
+  const { minLineY, maxLineY, items, itemHeight } = state
+  const setSize = items.length
+  const visible = []
+  for (let i = minLineY; i < maxLineY; i++) {
+    const item = items[i]
+    visible.push({ ...item, setSize, posInSet: i + 1, top: i * itemHeight })
+  }
+  return visible
+}
+
+const getSize = (width) => {
+  return width < 180 ? ViewletSize.Small : ViewletSize.Normal
+}
+
+// TODO debounce
+export const handleInput = async (state, value) => {
+  try {
+    const { allExtensions, itemHeight, minimumSliderSize, height } = state
+    // TODO cancel ongoing requests
+    // TODO handle errors
+    const items = await SearchExtensions.searchExtensions(allExtensions, value)
+    if (items.length === 0) {
+      return {
+        ...state,
+        items,
+        minLineY: 0,
+        deltaY: 0,
+        allExtensions,
+        maxLineY: 0,
+        scrollBarHeight: 0,
+        finalDeltaY: 0,
+        message: ViewletExtensionsStrings.noExtensionsFound(),
+        searchValue: value,
+      }
+    }
+    const listHeight = getListHeight(state)
+    const total = items.length
+    const contentHeight = total * itemHeight
+    const scrollBarHeight = ScrollBarFunctions.getScrollBarHeight(height, contentHeight, minimumSliderSize)
+    const numberOfVisible = Math.ceil(listHeight / itemHeight)
+    const maxLineY = Math.min(numberOfVisible, total)
+    const finalDeltaY = Math.max(contentHeight - listHeight, 0)
+    return {
+      ...state,
+      items,
+      minLineY: 0,
+      deltaY: 0,
+      allExtensions,
+      maxLineY,
+      scrollBarHeight,
+      finalDeltaY,
+      message: '',
+      searchValue: value,
+    }
+
+    // TODO handle out of order responses (a bit complicated)
+    // for now just assume everything comes back in order
+  } catch (error) {
+    await ErrorHandling.handleError(error)
+    return {
+      ...state,
+      searchValue: value,
+      message: `${error}`,
+    }
+  }
+}
+
+const getSavedValue = (savedState) => {
+  if (savedState && savedState.searchValue) {
+    return savedState.searchValue
+  }
+  return ''
+}
+
+export const loadContent = async (state, savedState) => {
+  const { width } = state
+  const searchValue = getSavedValue(savedState)
+  // TODO just get local extensions on demand (not when query string is already different)
+  const allExtensions = await ExtensionManagement.getAllExtensions()
+  const size = getSize(width)
+  return handleInput({ ...state, allExtensions, size }, searchValue)
+  // TODO get installed extensions from extension host
+  // TODO just get local extensions on demand (not when query string is already different)
+}
+
+export const dispose = () => {}
+
+// TODO lazyload this
+
+// TODO show error / warning  when installment fails / times out
+export const handleInstall = async (state, id) => {
+  await RendererProcess.invoke(
+    /* viewletSend */ 'Viewlet.send',
+    /* id */ ViewletModuleId.Extensions,
+    /* method */ 'setExtensionState',
+    /* id */ id,
+    /* state */ 'installing'
+  )
+  try {
+    await ExtensionManagement.install(/* id */ id)
+  } catch (error) {
+    // TODO have multi send command
+    await RendererProcess.invoke(
+      /* viewletSend */ 'Viewlet.send',
+      /* id */ ViewletModuleId.Extensions,
+      /* method */ 'setExtensionState',
+      /* id */ id,
+      /* state */ 'uninstalled'
+    )
+    // TODO use command.execute
+    ErrorHandling.handleError(error)
+    return
+  }
+  await RendererProcess.invoke(
+    /* viewletSend */ 'Viewlet.send',
+    /* id */ ViewletModuleId.Extensions,
+    /* method */ 'setExtensionState',
+    /* id */ id,
+    /* state */ 'installed'
+  )
+}
+
+// TODO lazyload this
+export const handleUninstall = async (state, id) => {
+  await RendererProcess.invoke(
+    /* viewletSend */ 'Viewlet.send',
+    /* id */ ViewletModuleId.Extensions,
+    /* method */ 'setExtensionState',
+    /* id */ id,
+    /* state */ 'uninstalling'
+  )
+  try {
+    await ExtensionManagement.uninstall(id)
+  } catch (error) {
+    await RendererProcess.invoke(
+      /* viewletSend */ 'Viewlet.send',
+      /* id */ ViewletModuleId.Extensions,
+      /* method */ 'setExtensionState',
+      /* id */ id,
+      /* state */ 'installed'
+    )
+    ErrorHandling.handleError(error)
+    return
+  }
+  await RendererProcess.invoke(
+    /* viewletSend */ 'Viewlet.send',
+    /* id */ ViewletModuleId.Extensions,
+    /* method */ 'setExtensionState',
+    /* id */ id,
+    /* state */ 'uninstalled'
+  )
+}
+
+// TODO lazyload this
+export const handleEnable = async (state, id) => {
+  try {
+    await ExtensionManagement.enable(id)
+  } catch (error) {
+    await RendererProcess.invoke(
+      /* viewletSend */ 'Viewlet.send',
+      /* id */ ViewletModuleId.Extensions,
+      /* method */ 'setExtensionState',
+      /* id */ id,
+      /* state */ 'disabled'
+    )
+    ErrorHandling.handleError(error)
+    return
+  }
+  await RendererProcess.invoke(
+    /* viewletSend */ 'Viewlet.send',
+    /* id */ ViewletModuleId.Extensions,
+    /* method */ 'setExtensionState',
+    /* id */ id,
+    /* state */ 'enabled'
+  )
+}
+
+// TODO lazyload this
+export const handleDisable = async (state, id) => {
+  try {
+    await ExtensionManagement.disable(id)
+  } catch (error) {
+    console.error(error)
+    ErrorHandling.handleError(error)
+    return
+  }
+  await RendererProcess.invoke(
+    /* viewletSend */ 'Viewlet.send',
+    /* id */ ViewletModuleId.Extensions,
+    /* method */ 'setExtensionState',
+    /* id */ id,
+    /* state */ 'disabled'
+  )
+}
+
+const handleContextMenuMouse = (state, x, y) => {}
+
+const handleContextMenuIndex = (state, index) => {}
+
+// TODO pass index instead
+export const handleContextMenu = async (state, x, y, index) => {
+  await Command.execute(/* ContextMenu.show */ 'ContextMenu.show', /* x */ x, /* y */ y, /* id */ MenuEntryId.ManageExtension)
+  return state
+}
+
+export const openSuggest = async (state) => {
+  const filteredSuggestions = SUGGESTIONS
+  state.suggestionState = /* Open */ 1
+  await RendererProcess.invoke(
+    /* viewletSend */ 'Viewlet.send',
+    /* id */ ViewletModuleId.Extensions,
+    /* method */ 'openSuggest',
+    /* suggestions */ filteredSuggestions
+  )
+}
+
+export const closeSuggest = async (state) => {
+  state.suggestionState = /* Closed */ 0
+  await RendererProcess.invoke(/* viewletSend */ 'Viewlet.send', /* id */ ViewletModuleId.Extensions, /* method */ 'closeSuggest')
+}
+
+export const toggleSuggest = async (state) => {
+  switch (state.suggestionState) {
+    case /* Closed */ 0:
+      await openSuggest(state)
+      break
+    case /* Open */ 1:
+      await closeSuggest(state)
+      break
+    default:
+      break
+  }
+}
+
+export const handleBlur = (state) => {
+  return {
+    ...state,
+    focused: false,
+  }
+}
+
+export const hasFunctionalResize = true
+
+export const resize = (state, dimensions) => {
+  const { itemHeight, minLineY } = state
+  // TODO should just return new state, render function can take old state and new state and return render commands
+  const listHeight = getListHeight({ ...state, ...dimensions })
+  const maxLineY = minLineY + Math.ceil(listHeight / itemHeight)
+  const size = getSize(dimensions.width)
+  return {
+    ...state,
+    ...dimensions,
+    maxLineY,
+    size,
+  }
+}
+
+export const hasFunctionalRender = true
+
+const renderExtensions = {
+  isEqual(oldState, newState) {
+    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY
+  },
+  apply(oldState, newState) {
+    // TODO render extensions incrementally when scrolling
+    const visibleExtensions = getVisible(newState)
+    return [/* method */ 'setExtensions', /* visibleExtensions */ visibleExtensions]
+  },
+}
+
+const renderHeight = {
+  isEqual(oldState, newState) {
+    return oldState.items.length === newState.items.length
+  },
+  apply(oldState, newState) {
+    const { itemHeight } = newState
+    const contentHeight = newState.items.length * itemHeight
+    return [/* method */ 'setContentHeight', /* contentHeight */ contentHeight]
+  },
+}
+
+const renderNegativeMargin = {
+  isEqual(oldState, newState) {
+    return oldState.deltaY === newState.deltaY
+  },
+  apply(oldState, newState) {
+    return [/* method */ 'setNegativeMargin', /* negativeMargin */ -newState.deltaY]
+  },
+}
+
+const renderFocusedIndex = {
+  isEqual(oldState, newState) {
+    return oldState.focusedIndex === newState.focusedIndex && oldState.minLineY === newState.minLineY
+  },
+  apply(oldState, newState) {
+    const oldFocusedIndex = oldState.focusedIndex - oldState.minLineY
+    const newFocusedIndex = newState.focusedIndex - newState.minLineY
+    return [
+      /* method */ 'setFocusedIndex',
+      /* oldFocusedIndex */ oldFocusedIndex,
+      /* newFocusedIndex */ newFocusedIndex,
+      /* focused */ newState.focused,
+    ]
+  },
+}
+
+const renderScrollBar = {
+  isEqual(oldState, newState) {
+    return (
+      oldState.negativeMargin === newState.negativeMargin &&
+      oldState.deltaY === newState.deltaY &&
+      oldState.height === newState.height &&
+      oldState.finalDeltaY === newState.finalDeltaY
+    )
+  },
+  apply(oldState, newState) {
+    const scrollBarY = ScrollBarFunctions.getScrollBarY(
+      newState.deltaY,
+      newState.finalDeltaY,
+      newState.height - newState.headerHeight,
+      newState.scrollBarHeight
+    )
+    return [/* method */ 'setScrollBar', /* scrollBarY */ scrollBarY, /* scrollBarHeight */ newState.scrollBarHeight]
+  },
+}
+
+const renderMessage = {
+  isEqual(oldState, newState) {
+    return oldState.message === newState.message
+  },
+  apply(oldState, newState) {
+    return [/* method */ 'setMessage', /* message */ newState.message]
+  },
+}
+
+const renderSize = {
+  isEqual(oldState, newState) {
+    return oldState.size === newState.size
+  },
+  apply(oldState, newState) {
+    return [/* method */ 'setSize', /* oldSize */ oldState.size, /* newSize */ newState.size]
+  },
+}
+
+const renderSearchValue = {
+  isEqual(oldState, newState) {
+    return oldState.searchValue === newState.searchValue
+  },
+  apply(oldState, newState) {
+    return [/* method */ 'setSearchValue', oldState.searchValue, newState.searchValue]
+  },
+}
+
+export const render = [
+  renderHeight,
+  renderFocusedIndex,
+  renderScrollBar,
+  renderNegativeMargin,
+  renderMessage,
+  renderExtensions,
+  renderSize,
+  renderSearchValue,
+]

package/static/c808931/packages/renderer-worker/src/parts/ViewletExtensions/ViewletExtensionsStrings.js

@@ -0,0 +1,12 @@
+import * as I18nString from '../I18NString/I18NString.js'
+
+/**
+ * @enum {string}
+ */
+const UiStrings = {
+  NoExtensionsFound: 'No extensions found',
+}
+
+export const noExtensionsFound = () => {
+  return I18nString.i18nString(UiStrings.NoExtensionsFound)
+}

package/static/c808931/packages/renderer-worker/src/parts/ViewletFindWidget/ViewletFindWidget.js

@@ -0,0 +1,186 @@
+import * as Command from '../Command/Command.js'
+import * as TextDocumentSearch from '../TextDocumentSearch/TextDocumentSearch.js'
+import * as ViewletModuleId from '../ViewletModuleId/ViewletModuleId.js'
+import * as ViewletStates from '../ViewletStates/ViewletStates.js'
+import * as ViewletFindWidgetStrings from './ViewletFindWidgetStrings.js'
+
+export const create = () => {
+  return {
+    value: '',
+    ariaAnnouncement: '',
+    matches: new Uint32Array(),
+    matchIndex: 0,
+    matchCount: 0,
+  }
+}
+
+export const getPosition = () => {
+  const editor = ViewletStates.getState('EditorText')
+  if (!editor) {
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    }
+  }
+  const width = 300
+  const height = 30
+  const paddingTop = 10
+  const paddingRight = 20
+  const x = editor.x + editor.width - width - paddingRight
+  const y = editor.y + paddingTop
+  return {
+    y,
+    x,
+    width,
+    height,
+  }
+}
+
+const getMatchCount = (matches) => {
+  return matches.length / 2
+}
+
+export const loadContent = (state) => {
+  const editor = ViewletStates.getState('EditorText')
+  if (!editor) {
+    return state
+  }
+  const { selections, lines } = editor
+  const startRowIndex = selections[0]
+  const startColumnIndex = selections[1]
+  const endRowIndex = selections[2]
+  const endColumnIndex = selections[3]
+  const line = lines[startRowIndex]
+  const value = line.slice(startColumnIndex, endColumnIndex)
+  const matches = TextDocumentSearch.findMatches(lines, value)
+  const matchCount = getMatchCount(matches)
+  return {
+    ...state,
+    value,
+    matches,
+    matchIndex: 0,
+    matchCount,
+  }
+}
+
+export const handleInput = (state, value) => {
+  // TODO get focused editor
+  // highlight locations that match value
+  const editor = ViewletStates.getState('EditorText')
+  const { lines } = editor
+  const matches = TextDocumentSearch.findMatches(lines, value)
+  const matchCount = getMatchCount(matches)
+  return {
+    ...state,
+    matches,
+    matchIndex: 0,
+    matchCount,
+    value,
+  }
+}
+
+// TODO this function should be synchronous
+export const focusIndex = async (state, index) => {
+  const { value, matches, matchIndex } = state
+  if (index === matchIndex) {
+    return state
+  }
+  // TODO find next match and highlight it
+  const matchRowIndex = matches[index * 2]
+  const matchColumnIndex = matches[index * 2 + 1]
+  const newSelections = new Uint32Array([matchRowIndex, matchColumnIndex, matchRowIndex, matchColumnIndex + value.length])
+  // TODO set selections synchronously and render input match index,
+  // input value and new selections at the same time
+  await Command.execute('Editor.setSelections', newSelections)
+  return {
+    ...state,
+    matchIndex: index,
+  }
+}
+
+export const focusFirst = (state) => {
+  return focusIndex(state, 0)
+}
+
+export const focusLast = (state) => {
+  const { matchCount } = state
+  return focusIndex(state, matchCount - 1)
+}
+
+export const focusNext = (state) => {
+  const { matchIndex, matchCount } = state
+  if (matchIndex === matchCount - 1) {
+    return focusFirst(state)
+  }
+  return focusIndex(state, matchIndex + 1)
+}
+
+export const focusPrevious = (state) => {
+  const { matchIndex } = state
+  if (matchIndex === 0) {
+    return focusLast(state)
+  }
+  return focusIndex(state, matchIndex - 1)
+}
+
+export const hasFunctionalRender = true
+
+const renderValue = {
+  isEqual(oldState, newState) {
+    return oldState.value === newState.value
+  },
+  apply(oldState, newState) {
+    return [/* Viewlet.invoke */ 'Viewlet.send', /* id */ ViewletModuleId.FindWidget, /* method */ 'setValue', /* value */ newState.value]
+  },
+}
+
+const getMatchCountText = (matchIndex, matchCount) => {
+  if (matchCount === 0) {
+    return ViewletFindWidgetStrings.noResults()
+  }
+  return ViewletFindWidgetStrings.matchOf(matchIndex + 1, matchCount)
+}
+
+const renderMatchCount = {
+  isEqual(oldState, newState) {
+    return oldState.matchIndex === newState.matchIndex && oldState.matchCount === newState.matchCount
+  },
+  apply(oldState, newState) {
+    const matchCountText = getMatchCountText(newState.matchIndex, newState.matchCount)
+    return [/* method */ 'setMatchCountText', /* value */ matchCountText]
+  },
+}
+
+const renderButtonsEnabled = {
+  isEqual(oldState, newState) {
+    return oldState.matchCount === newState.matchCount
+  },
+  apply(oldState, newState) {
+    const enabled = newState.matchCount > 0
+    return [/* method */ 'setButtonsEnabled', /* enabled */ enabled]
+  },
+}
+
+const getAriaLabel = (state) => {
+  const { matchIndex, matchCount, value } = state
+  return ViewletFindWidgetStrings.matchesFoundFor(matchIndex, matchCount, value)
+}
+
+const renderAriaAnnouncement = {
+  isEqual(oldState, newState) {
+    return (
+      oldState.ariaAnnouncement === newState.ariaAnnouncement &&
+      oldState.matchIndex === newState.matchIndex &&
+      oldState.matchCount === newState.matchCount &&
+      oldState.value === newState.value
+    )
+  },
+  apply(oldState, newState) {
+    const ariaLabel = getAriaLabel(newState)
+    return [/* Viewlet.invoke */ 'Viewlet.ariaAnnounce', /* text */ ariaLabel]
+  },
+}
+
+export const render = [renderValue, renderMatchCount, renderAriaAnnouncement, renderButtonsEnabled]