@lvce-editor/explorer-view 1.13.0 → 1.16.0

package/dist/explorerViewWorkerMain.js

@@ -1005,7 +1005,7 @@ const computeExplorerRenamedDirent = (dirents, index, newName) => {
   };
 };
 
-const None$3 = 0;
+const None$5 = 0;
 const CreateFile = 1;
 const CreateFolder = 2;
 const Rename$1 = 3;
@@ -1155,7 +1155,7 @@ const acceptCreate = async (state, newDirentType, createFn) => {
     items: newDirents,
     editingIndex: -1,
     focusedIndex: insertIndex + 1,
-    editingType: None$3,
+    editingType: None$5,
     maxLineY: newMaxlineY
   };
 };
@@ -1189,7 +1189,7 @@ const acceptRename = async state => {
     ...state,
     editingIndex: -1,
     editingValue: '',
-    editingType: None$3,
+    editingType: None$5,
     editingIcon: '',
     focusedIndex,
     focused: true
@@ -1221,7 +1221,7 @@ const cancelEdit = state => {
     focused: true,
     editingIndex: -1,
     editingValue: '',
-    editingType: None$3
+    editingType: None$5
   };
 };
 
@@ -1740,7 +1740,7 @@ const getActions = root => {
   }];
 };
 
-const None$2 = 'none';
+const None$4 = 'none';
 const ToolBar = 'toolbar';
 const Tree = 'tree';
 const TreeItem$1 = 'treeitem';
@@ -1764,6 +1764,7 @@ const HandleBlur = 'handleBlur';
 const HandleClick = 'handleClick';
 const handleClickOpenFolder$1 = 'handleClickOpenFolder';
 const HandleContextMenu = 'handleContextMenu';
+const HandleEditingInput = 'handleEditingInput';
 const HandleFocus = 'handleFocus';
 const HandlePointerDown = 'handlePointerDown';
 const HandleWheel = 'handleWheel';
@@ -1775,12 +1776,29 @@ const Text = 12;
 const Img = 17;
 const P = 50;
 
+const chevronDownVirtualDom = {
+  type: Div,
+  className: `${Chevron} MaskIconChevronDown`,
+  childCount: 0
+};
+
+const chevronRightVirtualDom = {
+  type: Div,
+  className: `${Chevron} MaskIconChevronRight`,
+  childCount: 0
+};
+
+const chevronDomNodes = [[], [chevronRightVirtualDom], [chevronDownVirtualDom]];
+const getChevronVirtualDom = chevronType => {
+  return chevronDomNodes[chevronType];
+};
+
 const getFileIconVirtualDom = icon => {
   return {
     type: Img,
     className: FileIcon,
     src: icon,
-    role: None$2,
+    role: None$4,
     childCount: 0
   };
 };
@@ -1795,76 +1813,26 @@ const text = data => {
   };
 };
 
-const getItemVirtualDomFile = item => {
-  const {
-    posInSet,
-    setSize,
-    icon,
-    name,
-    path,
-    depth,
-    isFocused,
-    isEditing,
-    indent
-  } = item;
-
-  // TODO avoid mutation
-  const dom = [];
-  dom.push({
-    type: Div,
-    role: TreeItem$1,
-    className: TreeItem,
-    draggable: true,
-    title: path,
-    ariaPosInSet: posInSet,
-    ariaSetSize: setSize,
-    ariaLevel: depth,
-    childCount: 2,
-    paddingLeft: indent,
-    ariaLabel: name,
-    ariaDescription: ''
-  }, getFileIconVirtualDom(icon));
+const label = {
+  type: Div,
+  className: Label,
+  childCount: 1
+};
+const getInputOrLabelDom = (isEditing, name) => {
   if (isEditing) {
-    dom.push({
+    return [{
       type: Input,
       className: InputBox,
       id: 'ExplorerInput',
-      onInput: 'handleEditingInput',
+      onInput: HandleEditingInput,
       childCount: 0,
       name: ExplorerInput
-    });
-  } else {
-    dom.push({
-      type: Div,
-      className: Label,
-      childCount: 1
-    }, text(name));
-  }
-  if (isFocused) {
-    // @ts-ignore
-    dom[0].id = 'TreeItemActive';
-    // @ts-ignore
-    dom[0].className += ' ' + TreeItemActive;
+    }];
   }
-  return dom;
-};
-
-const getChevronDownVirtualDom = () => {
-  return {
-    type: Div,
-    className: `${Chevron} MaskIconChevronDown`,
-    childCount: 0
-  };
-};
-const getChevronRightVirtualDom = () => {
-  return {
-    type: Div,
-    className: `${Chevron} MaskIconChevronRight`,
-    childCount: 0
-  };
+  return [label, text(name)];
 };
 
-const getItemVirtualDomFolder = item => {
+const getExplorerItemVirtualDom = item => {
   const {
     posInSet,
     setSize,
@@ -1872,76 +1840,33 @@ const getItemVirtualDomFolder = item => {
     name,
     path,
     depth,
-    type,
-    isFocused,
-    useChevrons,
-    indent
+    indent,
+    chevron,
+    id,
+    className,
+    isEditing,
+    ariaExpanded
   } = item;
-  let ariaExpanded = '';
-  let chevron;
-  switch (type) {
-    // TODO decide on directory vs folder
-    case Directory:
-      ariaExpanded = 'false';
-      chevron = getChevronRightVirtualDom();
-      break;
-    case DirectoryExpanding:
-      ariaExpanded = 'true'; // TODO tree should be aria-busy then
-      chevron = getChevronRightVirtualDom();
-      break;
-    case DirectoryExpanded:
-      ariaExpanded = 'true';
-      chevron = getChevronDownVirtualDom();
-      break;
-  }
-  const dom = [];
-  dom.push({
+  const chevronDom = getChevronVirtualDom(chevron);
+  const dom = [{
     type: Div,
     role: TreeItem$1,
-    className: TreeItem,
+    className,
     draggable: true,
     title: path,
     ariaPosInSet: posInSet,
     ariaSetSize: setSize,
     ariaLevel: depth,
-    childCount: 2,
+    childCount: 2 + chevronDom.length,
     paddingLeft: indent,
     ariaLabel: name,
     ariaExpanded,
-    ariaDescription: ''
-  });
-  if (useChevrons) {
-    // @ts-ignore
-    dom[0].childCount++;
-    // @ts-ignore
-    dom.push(chevron);
-  }
-  dom.push(getFileIconVirtualDom(icon), {
-    type: Div,
-    className: Label,
-    childCount: 1
-  }, text(name));
-  if (isFocused) {
-    // @ts-ignore
-    dom[0].id = 'TreeItemActive';
-  }
+    ariaDescription: '',
+    id
+  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, name)];
   return dom;
 };
 
-const getExplorerItemVirtualDom = item => {
-  const {
-    type
-  } = item;
-  switch (type) {
-    case Directory:
-    case DirectoryExpanding:
-    case DirectoryExpanded:
-      return getItemVirtualDomFolder(item);
-    default:
-      return getItemVirtualDomFile(item);
-  }
-};
-
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
@@ -1972,9 +1897,7 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide) => {
   if (!root) {
     return getExplorerWelcomeVirtualDom(isWide);
   }
-  // TODO
-  const dom = [];
-  dom.push({
+  const dom = [{
     type: Div,
     className: mergeClassNames(Viewlet, Explorer$1),
     tabIndex: 0,
@@ -1988,8 +1911,7 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide) => {
     onPointerDown: HandlePointerDown,
     onWheel: HandleWheel,
     onClick: HandleClick
-  });
-  dom.push(...visibleItems.flatMap(getExplorerItemVirtualDom));
+  }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
   return dom;
 };
 
@@ -2091,7 +2013,7 @@ const getKeyBindings = () => {
 };
 
 const Separator = 1;
-const None$1 = 0;
+const None$3 = 0;
 const RestoreFocus = 6;
 
 const menuEntrySeparator = {
@@ -2104,13 +2026,13 @@ const menuEntrySeparator = {
 const menuEntryNewFile = {
   id: 'newFile',
   label: newFile$1(),
-  flags: None$1,
+  flags: None$3,
   command: 'Explorer.newFile'
 };
 const menuEntryNewFolder = {
   id: 'newFolder',
   label: newFolder$1(),
-  flags: None$1,
+  flags: None$3,
   command: 'Explorer.newFolder'
 };
 const menuEntryOpenContainingFolder = {
@@ -2122,7 +2044,7 @@ const menuEntryOpenContainingFolder = {
 const menuEntryOpenInIntegratedTerminal = {
   id: 'openInIntegratedTerminal',
   label: openInIntegratedTerminal(),
-  flags: None$1,
+  flags: None$3,
   command: /* TODO */-1
 };
 const menuEntryCut = {
@@ -2140,7 +2062,7 @@ const menuEntryCopy = {
 const menuEntryPaste = {
   id: 'paste',
   label: paste(),
-  flags: None$1,
+  flags: None$3,
   command: 'Explorer.handlePaste'
 };
 const menuEntryCopyPath = {
@@ -2158,13 +2080,13 @@ const menuEntryCopyRelativePath = {
 const menuEntryRename = {
   id: 'rename',
   label: rename(),
-  flags: None$1,
+  flags: None$3,
   command: 'Explorer.renameDirent'
 };
 const menuEntryDelete = {
   id: 'delete',
   label: deleteItem(),
-  flags: None$1,
+  flags: None$3,
   command: 'Explorer.removeDirent'
 };
 const ALL_ENTRIES = [menuEntryNewFile, menuEntryNewFolder, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
@@ -2205,51 +2127,98 @@ const getMenuEntries = state => {
   }
 };
 
-const defaultIndent = 1;
+const None$2 = 0;
+const Right = 1;
+const Down = 2;
+
+const getChevronType = (type, useChevrons) => {
+  if (!useChevrons) {
+    return None$2;
+  }
+  switch (type) {
+    case Directory:
+      return Right;
+    case DirectoryExpanded:
+    case DirectoryExpanding:
+      return Down;
+    default:
+      return None$2;
+  }
+};
+
+const None$1 = 0;
+const Expanded = 1;
+const Collapsed = 2;
+
+const getExpandedType = type => {
+  switch (type) {
+    case Directory:
+      return Collapsed;
+    case DirectoryExpanding:
+    case DirectoryExpanded:
+      return Expanded;
+    default:
+      return None$1;
+  }
+};
+
+const defaultIndent$1 = 1;
 const getTreeItemIndent = depth => {
-  // TODO logic should be in getVisibleItems
-  return `${depth * defaultIndent}rem`;
+  return `${depth * defaultIndent$1}rem`;
 };
 
+// TODO make all of these variable configurable
+const defaultPaddingLeft = 4;
+const defaultIndent = 8;
+
+// TODO make chevron size configurable
+const chevronSize = 22;
+const getTreeItemIndentWithChevron = (depth, chevron) => {
+  // TODO use numeric value here, convert to string value in renderer process
+  const extraSpace = chevron ? 0 : chevronSize;
+  return `${depth * defaultIndent + extraSpace + defaultPaddingLeft}px`;
+};
+
+const ariaExpandedValues = [undefined, 'true', 'false'];
 const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, icons, useChevrons) => {
   const visible = [];
+  const indentFn = useChevrons ? getTreeItemIndentWithChevron : getTreeItemIndent;
   let iconIndex = 0;
   for (let i = minLineY; i < Math.min(maxLineY, items.length); i++) {
     const item = items[i];
     const icon = icons[iconIndex++];
-    const indent = getTreeItemIndent(item.depth);
-    if (i === editingIndex) {
-      visible.push({
-        ...item,
-        isFocused: i === focusedIndex,
-        isEditing: true,
-        icon,
-        useChevrons,
-        indent
-      });
-    } else {
-      visible.push({
-        ...item,
-        isFocused: i === focusedIndex,
-        icon,
-        useChevrons,
-        indent
-      });
-    }
+    const chevron = getChevronType(item.type, useChevrons);
+    const indent = indentFn(item.depth, chevron);
+    const isFocused = i === focusedIndex;
+    const id = isFocused ? 'TreeItemActive' : undefined;
+    const className = isFocused ? TreeItem + ' ' + TreeItemActive : TreeItem;
+    const expanded = getExpandedType(item.type);
+    const ariaExpanded = ariaExpandedValues[expanded];
+    visible.push({
+      ...item,
+      isEditing: i === editingIndex,
+      icon,
+      indent,
+      ariaExpanded,
+      chevron,
+      id,
+      className
+    });
   }
-  if (editingType !== None$3 && editingIndex === -1) {
+  if (editingType !== None$5 && editingIndex === -1) {
     visible.push({
       depth: 3,
       posInSet: 1,
       setSize: 1,
       icon: '',
-      isFocused: false,
       name: 'new',
       path: '/test/new',
-      type: 2,
       isEditing: true,
-      useChevrons,
-      indent: ''
+      indent: '',
+      ariaExpanded: undefined,
+      chevron: 0,
+      id: undefined,
+      className: TreeItem
     });
   }
   return visible;
@@ -2261,7 +2230,7 @@ const handleBlur = state => {
   const {
     editingType
   } = state;
-  if (editingType !== None$3) {
+  if (editingType !== None$5) {
     return state;
   }
   return {
@@ -3243,7 +3212,8 @@ const getSavedRoot$1 = (savedState, workspacePath) => {
   return workspacePath;
 };
 const loadContent = async (state, savedState) => {
-  const useChevrons = true;
+  const useChevronsRaw = await invoke('Preferences.get', 'explorer.useChevrons');
+  const useChevrons = Boolean(useChevronsRaw);
   const workspacePath = await getWorkspacePath();
   const root = getSavedRoot$1(savedState, workspacePath);
   // TODO path separator could be restored from saved state
@@ -3432,11 +3402,7 @@ const renderItems = {
     return JSON.stringify(oldState.items) === JSON.stringify(newState.items) && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex && oldState.editingIndex === newState.editingIndex && oldState.editingType === newState.editingType && oldState.editingValue === newState.editingValue && oldState.width === newState.width;
   },
   apply(oldState, newState) {
-    const visibleDirents = getVisibleExplorerItems(newState.items, newState.minLineY, newState.maxLineY, newState.focusedIndex, newState.editingIndex, newState.editingType, newState.editingValue,
-    // @ts-ignore
-    newState.icons,
-    // @ts-ignore
-    newState.useChevrons);
+    const visibleDirents = getVisibleExplorerItems(newState.items, newState.minLineY, newState.maxLineY, newState.focusedIndex, newState.editingIndex, newState.editingType, newState.editingValue, newState.icons, newState.useChevrons);
     const isWide = newState.width > 450;
     const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide);
     return ['Viewlet.setDom2', dom];
@@ -3486,7 +3452,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: `MaskIcon MaskIcon${icon}`,
-    role: None$2,
+    role: None$4,
     childCount: 0
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/explorer-view",
-  "version": "1.13.0",
+  "version": "1.16.0",
   "description": "Explorer Worker",
   "main": "dist/explorerViewWorkerMain.js",
   "type": "module",