@lvce-editor/server 0.0.24 → 0.0.27

package/static/{63e03f3 → eb65b4e}/packages/renderer-worker/src/parts/Viewlet/ViewletExplorer.js

@@ -133,16 +133,18 @@ export const loadContent = async (state) => {
 }
 
 export const updateIcons = (state) => {
+  // TODO avoid mutating state
   for (const dirent of state.dirents) {
     dirent.icon = IconTheme.getIcon(dirent)
   }
+  const newDirents = [...state.dirents]
+  return { ...state, dirents: newDirents }
 }
 
 export const contentLoaded = async (state) => {
   // console.trace({ state })
   // TODO execute command directly
   // TODO this should a promise and be awaited
-  await scheduleDirents(state)
 }
 
 const getTopLevelDirents = ({ root, pathSeparator }) => {
@@ -166,10 +168,13 @@ export const contentLoadedEffects = (state) => {
   // TODO create should not have side effects
   // TODO dispose listener when explorer is disposed
   // TODO hoist function
-  GlobalEventBus.addListener('languages.changed', async () => {
-    updateIcons(state)
-    await scheduleDirents(state)
-  })
+  const handleLanguagesChanged = () => {
+    const state = Viewlet.getState('Explorer')
+    console.log({ state })
+    const newState = updateIcons(state)
+    Viewlet.setState('Explorer', newState)
+  }
+  GlobalEventBus.addListener('languages.changed', handleLanguagesChanged)
 
   // TODO hoist function
   GlobalEventBus.addListener('workspace.change', async () => {
@@ -189,40 +194,27 @@ const getVisible = (state) => {
   return state.dirents.slice(state.minLineY, state.maxLineY)
 }
 
-const scheduleDirents = async (state) => {
-  const visibleDirents = getVisible(state)
-  await RendererProcess.invoke(
-    /* Viewlet.send */ 'Viewlet.send',
-    /* id */ 'Explorer',
-    /* method */ 'updateDirents',
-    /* visibleDirents */ visibleDirents
-  )
-}
-
-const updateViewport = (state) => {
-  const minLineY = Math.round(state.deltaY / ITEM_HEIGHT)
-  const maxLineY = minLineY + Math.round(state.height / ITEM_HEIGHT)
-  // TODO this should be functional (return new state)
-  state.minLineY = minLineY
-  state.maxLineY = maxLineY
-}
-
-export const setDeltaY = async (state, deltaY) => {
+export const setDeltaY = (state, deltaY) => {
   if (deltaY < 0) {
     deltaY = 0
   } else if (deltaY > state.dirents.length * ITEM_HEIGHT - state.height) {
     deltaY = Math.max(state.dirents.length * ITEM_HEIGHT - state.height, 0)
   }
   if (state.deltaY === deltaY) {
-    return
+    return state
+  }
+  const minLineY = Math.round(deltaY / ITEM_HEIGHT)
+  const maxLineY = minLineY + Math.round(state.height / ITEM_HEIGHT)
+  return {
+    ...state,
+    deltaY,
+    minLineY,
+    maxLineY,
   }
-  state.deltaY = deltaY
-  updateViewport(state)
-  await scheduleDirents(state)
 }
 
-export const handleWheel = async (state, deltaY) => {
-  await setDeltaY(state, state.deltaY + deltaY)
+export const handleWheel = (state, deltaY) => {
+  return setDeltaY(state, state.deltaY + deltaY)
 }
 
 export const handleContextMenu = async (state, x, y, index) => {
@@ -234,6 +226,7 @@ export const handleContextMenu = async (state, x, y, index) => {
     /* y */ y,
     /* id */ 'explorer'
   )
+  return state
 }
 
 export const getFocusedDirent = (state) => {
@@ -243,8 +236,8 @@ export const getFocusedDirent = (state) => {
 
 // TODO support multiselection and removing multiple dirents
 export const removeDirent = async (state) => {
-  if (state.focusedIndex === -1) {
-    return
+  if (state.focusedIndex < 0) {
+    return state
   }
   const dirent = getFocusedDirent(state)
   const absolutePath = dirent.path
@@ -260,19 +253,30 @@ export const removeDirent = async (state) => {
     return
   }
   console.log('remove dirent')
+  // TODO avoid state mutation
   const newVersion = ++state.version
   // TODO race condition
   // const newState = await loadContent(state)
   if (state.version !== newVersion || state.disposed) {
-    return
+    return state
   }
   // TODO is it possible to make this more functional instead of mutating state?
   // maybe every function returns a new state?
   const index = state.dirents.indexOf(dirent)
-  state.dirents.splice(index, 1)
+  let deleteEnd = index + 1
+
+  for (; deleteEnd < state.dirents.length; deleteEnd++) {
+    console.log({ dirent: state.dirents[deleteEnd] })
+    if (state.dirents[deleteEnd].depth <= dirent.depth) {
+      break
+    }
+  }
+  const deleteCount = deleteEnd - index
+  const newDirents = [...state.dirents]
+  newDirents.splice(index, deleteCount)
   let indexToFocus = -1
 
-  if (state.dirents.length === 0) {
+  if (newDirents.length === 0) {
     indexToFocus = -1
   } else if (index < state.focusedIndex) {
     indexToFocus = state.focusedIndex - 1
@@ -281,10 +285,11 @@ export const removeDirent = async (state) => {
   } else {
     indexToFocus = Math.max(state.focusedIndex - 1, 0)
   }
-
-  // TODO removing of file and setting focus should happen at the same time
-  await scheduleDirents(state)
-  await focusIndex(state, indexToFocus)
+  return {
+    ...state,
+    dirents: newDirents,
+    focusedIndex: indexToFocus,
+  }
 }
 
 const updateDirents = async (state) => {
@@ -521,11 +526,12 @@ const newDirent = async (state) => {
     /* method */ 'showCreateFileInputBox',
     /* index */ index
   )
+  return state
 }
 
 // TODO much shared logic with newFolder
 export const newFile = async (state) => {
-  await newDirent(state)
+  return newDirent(state)
 }
 
 const cancelDirent = async (state) => {
@@ -537,14 +543,15 @@ const cancelDirent = async (state) => {
     /* method */ 'hideCreateFileInputBox',
     /* index */ index
   )
+  return state
 }
 
 export const cancelNewFile = async (state) => {
-  await cancelDirent()
+  return cancelDirent()
 }
 
 const getParentFolder = (dirents, index, root) => {
-  if (index === -1) {
+  if (index < 0) {
     return root
   }
   return dirents[index].path
@@ -566,7 +573,7 @@ const acceptDirent = async (state, type) => {
     await ErrorHandling.showErrorDialog(
       new Error('file name must not be empty')
     )
-    return
+    return state
   }
   // console.log({ index: editingIndex, dirent: state.dirents[editingIndex] })
   const parentFolder = getParentFolder(state.dirents, focusedIndex, state.root)
@@ -591,10 +598,13 @@ const acceptDirent = async (state, type) => {
   }
   console.log({ focusedIndex })
   console.log(state.dirents)
-  const parentDirent = state.dirents[focusedIndex] || {
-    depth: 0,
-    path: state.root,
-  }
+  const parentDirent =
+    focusedIndex >= 0
+      ? state.dirents[focusedIndex]
+      : {
+          depth: 0,
+          path: state.root,
+        }
   const depth = parentDirent.depth + 1
   const newDirent = {
     path: absolutePath,
@@ -610,7 +620,7 @@ const acceptDirent = async (state, type) => {
   let deltaPosInSet = 0
   let posInSet = 1
   let setSize = 1
-  let i = state.focusedIndex + 1
+  let i = Math.max(state.focusedIndex, -1) + 1
   for (; i < state.dirents.length; i++) {
     const dirent = state.dirents[i]
     if (dirent.depth !== depth) {
@@ -633,24 +643,25 @@ const acceptDirent = async (state, type) => {
   newDirent.posInSet = posInSet
   state.dirents.splice(insertIndex + 1, 0, newDirent)
 
-  console.log(state.dirents)
-  // TODO insert dirent here
-  // await updateDirents(state)
-  await contentLoaded(state)
+  const newDirents = [...state.dirents]
+  return {
+    ...state,
+    dirents: newDirents,
+  }
 }
 
 // TODO much duplicate logic with acceptNewFolder
-export const acceptNewFile = async (state) => {
-  await acceptDirent(state, 'file')
+export const acceptNewFile = (state) => {
+  return acceptDirent(state, 'file')
 }
 
-export const acceptNewFolder = async (state) => {
-  await acceptDirent(state, 'directory')
+export const acceptNewFolder = (state) => {
+  return acceptDirent(state, 'directory')
 }
 
 // TODO much copy paste with newFIle command
 export const newFolder = async (state) => {
-  await newDirent(state)
+  return newDirent(state)
 }
 
 const handleClickFile = async (state, dirent, index) => {
@@ -658,21 +669,31 @@ const handleClickFile = async (state, dirent, index) => {
     /* Main.openAbsolutePath */ 'Main.openUri',
     /* absolutePath */ dirent.path
   )
+  return {
+    ...state,
+    focusedIndex: index,
+  }
 }
 
 const handleClickDirectory = async (state, dirent, index) => {
   dirent.type = 'directory-expanding'
   // TODO handle error
   const dirents = await getChildDirents(state, dirent)
+  // TODO use Viewlet.getState here and check if it exists
   const newIndex = state.dirents.indexOf(dirent)
   if (newIndex === -1) {
-    return
+    return state
   }
   // console.log(state.dirents[index] === dirent)
-  state.dirents.splice(newIndex + 1, 0, ...dirents)
+  const newDirents = [...state.dirents]
+  newDirents.splice(newIndex + 1, 0, ...dirents)
   dirent.type = 'directory-expanded'
   dirent.icon = IconTheme.getIcon(dirent)
-  await scheduleDirents(state)
+  return {
+    ...state,
+    dirents: newDirents,
+    focusedIndex: newIndex,
+  }
 }
 
 const handleClickDirectoryExpanding = async (state, dirent, index) => {
@@ -685,101 +706,97 @@ const handleClickDirectoryExpanding = async (state, dirent, index) => {
     /* index */ index,
     /* removeCount */ 0
   )
+  return state
 }
 
-const handleClickDirectoryExpanded = async (state, dirent, index) => {
+const handleClickDirectoryExpanded = (state, dirent, index) => {
   dirent.type = 'directory'
   dirent.icon = IconTheme.getIcon(dirent)
   const endIndex = getParentEndIndex(state.dirents, index)
   const removeCount = endIndex - index - 1
   // TODO race conditions and side effects are everywhere
-  state.dirents.splice(index + 1, removeCount)
-  await scheduleDirents(state)
+  const newDirents = [...state.dirents]
+  newDirents.splice(index + 1, removeCount)
+  return {
+    ...state,
+    dirents: newDirents,
+  }
 }
 
 export const handleClick = async (state, index) => {
   if (index === -1) {
-    await focusIndex(state, -1)
-    return
+    return focusIndex(state, -1)
   }
   const actualIndex = index + state.minLineY
-  state.focusedIndex = actualIndex
   const dirent = state.dirents[actualIndex]
   // TODO dirent type should be numeric
   switch (dirent.type) {
     case 'file':
-      await handleClickFile(state, dirent, actualIndex)
-      break
+      return handleClickFile(state, dirent, actualIndex)
     // TODO decide on one name
     case 'folder':
     case 'directory':
-      await handleClickDirectory(state, dirent, actualIndex)
-      break
+      return handleClickDirectory(state, dirent, actualIndex)
     case 'directory-expanding':
-      await handleClickDirectoryExpanding(state, dirent, actualIndex)
-      break
+      return handleClickDirectoryExpanding(state, dirent, actualIndex)
     case 'directory-expanded':
-      await handleClickDirectoryExpanded(state, dirent, actualIndex)
-      break
+      return handleClickDirectoryExpanded(state, dirent, actualIndex)
     default:
       break
   }
 }
 
-export const handleClickCurrent = async (state) => {
-  await handleClick(state, state.focusedIndex)
+export const focusNone = (state) => {
+  return focusIndex(state, -1)
 }
 
-export const focusIndex = async (state, index) => {
-  const oldFocusedIndex = state.focusedIndex
-  state.focusedIndex = index
-  await RendererProcess.invoke(
-    /* viewSend */ 'Viewlet.send',
-    /* id */ 'Explorer',
-    /* method */ 'setFocusedIndex',
-    /* oldIndex */ oldFocusedIndex,
-    /* newIndex */ state.focusedIndex
-  )
+export const handleClickCurrent = (state) => {
+  return handleClick(state, state.focusedIndex)
 }
 
-export const focusNext = async (state) => {
+export const focusIndex = (state, index) => {
+  return {
+    ...state,
+    focusedIndex: index,
+  }
+}
+
+export const focusNext = (state) => {
   if (state.focusedIndex === state.dirents.length - 1) {
-    return
+    return state
   }
-  await focusIndex(state, state.focusedIndex + 1)
+  return focusIndex(state, state.focusedIndex + 1)
 }
 
-export const focusPrevious = async (state) => {
+export const focusPrevious = (state) => {
   switch (state.focusedIndex) {
     case -1:
       if (state.dirents.length === 0) {
-        break
+        return state
       }
-      await focusIndex(state, state.dirents.length - 1)
-      break
+      return focusIndex(state, state.dirents.length - 1)
     case 0:
-      break
+      return state
     default:
-      await focusIndex(state, state.focusedIndex - 1)
-      break
+      return focusIndex(state, state.focusedIndex - 1)
   }
 }
 
-export const focusFirst = async (state) => {
+export const focusFirst = (state) => {
   if (state.dirents.length === 0 || state.focusedIndex === 0) {
-    return
+    return state
   }
-  await focusIndex(state, 0)
+  return focusIndex(state, 0)
 }
 
-export const focusLast = async (state) => {
+export const focusLast = (state) => {
   if (
     state.dirents.length === 0 ||
     state.focusedIndex === state.dirents.length - 1
   ) {
-    return
+    return state
   }
-  await focusIndex(state, state.dirents.length - 1)
+  return focusIndex(state, state.dirents.length - 1)
 }
 
 export const scrollUp = () => {}
@@ -789,53 +806,50 @@ export const scrollDown = () => {}
 
 export const handleArrowRight = async (state) => {
   if (state.focusedIndex === -1) {
-    return
+    return state
   }
   const dirent = state.dirents[state.focusedIndex]
   switch (dirent.type) {
     case 'file':
-      break
+      return state
     case 'directory':
-      await handleClickDirectory(state, dirent, state.focusedIndex)
-      break
+      return handleClickDirectory(state, dirent, state.focusedIndex)
     case 'directory-expanded':
       if (state.focusedIndex === state.dirents.length - 1) {
-        break
+        return state
       }
       const nextDirent = state.dirents[state.focusedIndex + 1]
       if (nextDirent.depth === dirent.depth + 1) {
-        await focusIndex(state, state.focusedIndex + 1)
+        return focusIndex(state, state.focusedIndex + 1)
       }
       break
     default:
-      break
+      return state
   }
 }
 
-const focusParentFolder = async (state) => {
+const focusParentFolder = (state) => {
   const parentStartIndex = getParentStartIndex(
     state.dirents,
     state.focusedIndex
   )
   if (parentStartIndex === -1) {
-    return
+    return state
   }
-  await focusIndex(state, parentStartIndex)
+  return focusIndex(state, parentStartIndex)
 }
 
-export const handleArrowLeft = async (state) => {
+export const handleArrowLeft = (state) => {
   if (state.focusedIndex === -1) {
-    return
+    return state
   }
   const dirent = state.dirents[state.focusedIndex]
   switch (dirent.type) {
     case 'directory':
     case 'file':
-      await focusParentFolder(state)
-      break
+      return focusParentFolder(state)
     case 'directory-expanded':
-      await handleClickDirectoryExpanded(state, dirent, state.focusedIndex)
-      break
+      return handleClickDirectoryExpanded(state, dirent, state.focusedIndex)
     default:
       // TODO handle expanding directory and cancel file system call to read child dirents
       break
@@ -901,7 +915,7 @@ export const handleMouseEnter = async (state, index) => {
   const dirent = state.dirents[index]
   if (!isImage(dirent)) {
     // TODO preload content maybe when it is a long hover
-    return
+    return state
   }
   const uri = `${state.root}${dirent.path}`
   const top = state.top + index * ITEM_HEIGHT
@@ -917,8 +931,9 @@ export const handleMouseEnter = async (state, index) => {
 // TODO what happens when mouse leave and anther mouse enter event occur?
 // should update preview instead of closing and reopening
 
-export const handleMouseLeave = async () => {
+export const handleMouseLeave = async (state) => {
   // await Command.execute(/* ImagePreview.hide */ 9082)
+  return state
 }
 
 // TODO on windows this would be different
@@ -1022,28 +1037,35 @@ export const expandAll = async (state) => {
   console.log('EXPAND ALL')
   const { dirents, focusedIndex } = state
   if (focusedIndex === -1) {
-    return
+    return state
   }
   const dirent = dirents[focusedIndex]
   const depth = dirent.depth
-  for (const dirent of dirents) {
+  const newDirents = [...dirents]
+  // TODO fetch child dirents in parallel
+  for (const dirent of newDirents) {
     if (dirent.depth === depth && dirent.type === 'directory') {
       // TODO expand
+      // TODO avoid mutating state here
       dirent.type = 'directory-expanding'
       // TODO handle error
+      // TODO race condition
       const childDirents = await getChildDirents(state, dirent)
-      const newIndex = dirents.indexOf(dirent)
+      const newIndex = newDirents.indexOf(dirent)
       if (newIndex === -1) {
         continue
       }
       // console.log(state.dirents[index] === dirent)
-      dirents.splice(newIndex + 1, 0, ...childDirents)
+      newDirents.splice(newIndex + 1, 0, ...childDirents)
+      // TODO avoid mutating state here
       dirent.type = 'directory-expanded'
       // await expand(state, dirent.index)
     }
   }
-  console.log({ dirents: [...dirents] })
-  await scheduleDirents(state)
+  return {
+    ...state,
+    dirents: newDirents,
+  }
 }
 
 const isTopLevel = (dirent) => {
@@ -1060,8 +1082,52 @@ const toCollapsedDirent = (dirent) => {
   return dirent
 }
 
-export const collapseAll = async (state) => {
+export const collapseAll = (state) => {
   const newDirents = state.dirents.filter(isTopLevel).map(toCollapsedDirent)
-  state.dirents = newDirents
-  await scheduleDirents(state)
+  return {
+    ...state,
+    dirents: newDirents,
+  }
+}
+
+export const handleBlur = (state) => {
+  return focusIndex(state, -2)
+}
+
+export const hasFunctionalRender = true
+
+export const render = (oldState, newState) => {
+  const changes = []
+  if (
+    oldState.dirents !== newState.dirents ||
+    oldState.minLineY !== newState.minLineY ||
+    oldState.maxLineY !== newState.maxLineY
+  ) {
+    const visibleDirents = getVisible(newState)
+    changes.push([
+      /* Viewlet.send */ 'Viewlet.send',
+      /* id */ 'Explorer',
+      /* method */ 'updateDirents',
+      /* visibleDirents */ visibleDirents,
+    ])
+    // TODO rendering dirents should not override focus
+    // when that issue is fixed, this can be removed
+    changes.push([
+      /* Viewlet.send */ 'Viewlet.send',
+      /* id */ 'Explorer',
+      /* method */ 'setFocusedIndex',
+      /* oldindex */ oldState.focusedIndex,
+      /* newIndex */ newState.focusedIndex,
+    ])
+  }
+  if (oldState.focusedIndex !== newState.focusedIndex) {
+    changes.push([
+      /* Viewlet.send */ 'Viewlet.send',
+      /* id */ 'Explorer',
+      /* method */ 'setFocusedIndex',
+      /* oldindex */ oldState.focusedIndex,
+      /* newIndex */ newState.focusedIndex,
+    ])
+  }
+  return changes
 }