@lvce-editor/explorer-view 4.12.0 → 5.0.0

package/dist/explorerViewWorkerMain.js

@@ -2610,7 +2610,8 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     maxIndent: 0,
     errorMessageLeft: 0,
     errorMessageTop: 0,
-    visibleExplorerItems: []
+    visibleExplorerItems: [],
+    errorMessageWidth: 0
   };
   set(state.uid, state, state);
   return state;
@@ -2625,7 +2626,7 @@ const isEqual$6 = (oldState, newState) => {
   // TODO compute css more optimized
   // maybe only when items change, and even then not
   // always, but only when it affects the css
-  return oldState.errorMessageLeft === newState.errorMessageLeft && oldState.errorMessageTop === newState.errorMessageTop && oldState.maxIndent === newState.maxIndent && oldState.scrollBarActive === newState.scrollBarActive && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.visibleExplorerItems === newState.visibleExplorerItems;
+  return oldState.errorMessageLeft === newState.errorMessageLeft && oldState.errorMessageTop === newState.errorMessageTop && oldState.maxIndent === newState.maxIndent && oldState.scrollBarActive === newState.scrollBarActive && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.visibleExplorerItems === newState.visibleExplorerItems && oldState.editingErrorMessage === newState.editingErrorMessage;
 };
 
 const isEqual$5 = (oldState, newState) => {
@@ -4962,6 +4963,10 @@ const confirmDelete = async paths => {
   return result === true;
 };
 
+const showErrorAlert = async errorMessage => {
+  await confirm(errorMessage);
+};
+
 const removeDirent = async state => {
   const {
     items,
@@ -4988,7 +4993,7 @@ const removeDirent = async state => {
   // TODO use bulk edit and explorer refresh
   const errorMessage = await applyFileOperations(fileOperations);
   if (errorMessage) {
-    await confirm(errorMessage);
+    await showErrorAlert(errorMessage);
     return state;
   }
   const newState = await refresh(state);
@@ -5070,16 +5075,28 @@ const getIndentRule = indent => {
   padding-left: ${indent}px;
 }`;
 };
-const getCss = (scrollBarHeight, uniqueIndents, errorMessageLeft, errorMessageTop) => {
+const getCss = (scrollBarHeight, uniqueIndents, errorMessageLeft, errorMessageTop, errorMessageWidth) => {
   const rules = [`.Explorer {
   --ScrollBarThumbHeight: ${scrollBarHeight}px;
   --ErrorMessageTop: ${errorMessageTop}px;
   --ErrorMessageLeft: ${errorMessageLeft}px;
+  --ErrorMessageWidth: ${errorMessageWidth}px;
 }`, ...uniqueIndents.map(getIndentRule)];
   const css = rules.join('\n');
   return css;
 };
 
+const getErrorMessagePosition = (itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding, width) => {
+  const top = itemHeight * (focusedIndex - minLineY + 1);
+  const left = depth * indent + fileIconWidth + padding;
+  const errorMessageWidth = width - left;
+  return {
+    top,
+    left,
+    errorMessageWidth
+  };
+};
+
 const getUnique = items => {
   const seens = [];
   for (const item of items) {
@@ -5092,15 +5109,29 @@ const getUnique = items => {
 
 const renderCss = (oldState, newState) => {
   const {
+    width,
+    items,
     scrollBarHeight,
     uid,
     visibleExplorerItems,
-    errorMessageLeft,
-    errorMessageTop
+    itemHeight,
+    focusedIndex,
+    minLineY
   } = newState;
   const indents = visibleExplorerItems.map(item => item.indent);
   const uniqueIndents = getUnique(indents);
-  const css = getCss(scrollBarHeight, uniqueIndents, errorMessageLeft, errorMessageTop);
+  const indent = 8;
+  const padding = 10;
+  const fileIconWidth = 16;
+  const defaultPaddingLeft = 0;
+  const chevronSpace = 22;
+  const depth = items[focusedIndex]?.depth || 0;
+  const {
+    top,
+    left,
+    errorMessageWidth
+  } = getErrorMessagePosition(itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding + defaultPaddingLeft + chevronSpace, width);
+  const css = getCss(scrollBarHeight, uniqueIndents, left, top, errorMessageWidth);
   return [SetCss, uid, css];
 };
 
@@ -5180,15 +5211,6 @@ const renderFocusContext = (oldState, newState) => {
   return [];
 };
 
-const getErrorMessagePosition = (itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding) => {
-  const top = itemHeight * (focusedIndex - minLineY + 1);
-  const left = depth * indent + fileIconWidth + padding;
-  return {
-    top,
-    left
-  };
-};
-
 const None = 'none';
 const ToolBar = 'toolbar';
 const Tree = 'tree';
@@ -5200,16 +5222,14 @@ const Input = 6;
 const Img = 17;
 const P = 50;
 
-const getErrorMessageDom = (errorMessage, errorMessageLeft, errorMessageTop) => {
+const getErrorMessageDom = errorMessage => {
   if (!errorMessage) {
     return [];
   }
-  const translateString = position(errorMessageLeft, errorMessageTop);
   return [{
     type: Div,
     className: mergeClassNames(ExplorerErrorMessage),
-    childCount: 1,
-    translate: translateString
+    childCount: 1
   }, text(errorMessage)];
 };
 
@@ -5440,14 +5460,14 @@ const getChildCount = (scrollBarDomLength, errorDomLength) => {
   }
   return childCount;
 };
-const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, scrollTop, errorMessage, errorMessageTop, errorMessageLeft) => {
+const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, scrollTop, errorMessage) => {
   if (!root) {
     return getExplorerWelcomeVirtualDom(isWide);
   }
   const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
   const scrollBarTop = getScrollBarTop(height, contentHeight, scrollTop);
   const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight, scrollBarTop);
-  const errorDom = getErrorMessageDom(errorMessage, errorMessageLeft, errorMessageTop);
+  const errorDom = getErrorMessageDom(errorMessage);
   const childCount = getChildCount(scrollBarDom.length, errorDom.length);
   const parentNode = {
     type: Div,
@@ -5469,24 +5489,13 @@ const renderItems = (oldState, newState) => {
     height,
     itemHeight,
     items,
-    minLineY,
     root,
     width
   } = newState;
   const visibleDirents = newState.visibleExplorerItems;
   const isWide = width > 450;
   const contentHeight = items.length * itemHeight;
-  const depth = items[focusedIndex]?.depth || 0;
-  const indent = 8;
-  const padding = 10;
-  const fileIconWidth = 16;
-  const defaultPaddingLeft = 0;
-  const chevronSpace = 22;
-  const {
-    top,
-    left
-  } = getErrorMessagePosition(itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding + defaultPaddingLeft + chevronSpace);
-  const dom = getExplorerVirtualDom(visibleDirents, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, deltaY, editingErrorMessage, top, left);
+  const dom = getExplorerVirtualDom(visibleDirents, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, deltaY, editingErrorMessage);
   return [SetDom2, dom];
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/explorer-view",
-  "version": "4.12.0",
+  "version": "5.0.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",