@lvce-editor/find-widget-worker 2.2.0 → 2.3.0

package/dist/findWidgetWorkerMain.js

@@ -988,10 +988,12 @@ const create$1 = (uid, x, y, width, height, parentUid) => {
     minWidth: 400,
     history: [],
     inputErrorMessage: '',
-    inputHeight: 15,
+    searchInputHeight: 15,
     inputLineHeight: 15,
-    inputPaddingTop: 2,
-    inputPaddingBottom: 2
+    inputPaddingTop: 4,
+    inputPaddingBottom: 4,
+    inputBorderWidth: 1,
+    inputGap: 3
   };
   set$3(uid, state, state);
   return state;
@@ -1002,7 +1004,7 @@ const isEqual$8 = (oldState, newState) => {
 };
 
 const isEqual$7 = (oldState, newState) => {
-  return newState.width === newState.width && oldState.height === newState.height && oldState.x === newState.x && oldState.inputHeight === newState.inputHeight;
+  return newState.width === newState.width && oldState.height === newState.height && oldState.x === newState.x && oldState.searchInputHeight === newState.searchInputHeight;
 };
 
 const isEqual$6 = (oldState, newState) => {
@@ -1434,6 +1436,20 @@ const measureTextHeight = (value, lineHeight) => {
   return lines.length * lineHeight;
 };
 
+const measureInputHeight = (value, inputLineHeight, inputPaddingBottom, inputPaddingTop, inputBorderWidth, inputGap, replaceExpanded) => {
+  const textHeight = measureTextHeight(value, inputLineHeight);
+  const inputHeight = textHeight + inputPaddingBottom + inputPaddingTop + inputBorderWidth * 2;
+  const replaceInputHeight = replaceExpanded ? inputHeight : 0; // TODO should be independent of input
+  const actualGap = replaceExpanded ? inputGap : 0;
+  // TODO use variables for margin
+  const height = inputHeight + replaceInputHeight + 5 + actualGap;
+  return {
+    inputHeight,
+    height,
+    replaceInputHeight
+  };
+};
+
 const refresh$1 = (state, value, inputSource) => {
   const {
     lines,
@@ -1442,7 +1458,10 @@ const refresh$1 = (state, value, inputSource) => {
     matchWholeWord,
     inputLineHeight,
     inputPaddingTop,
-    inputPaddingBottom
+    inputPaddingBottom,
+    replaceExpanded,
+    inputBorderWidth,
+    inputGap
   } = state;
   const options = {
     matchCase,
@@ -1453,14 +1472,15 @@ const refresh$1 = (state, value, inputSource) => {
     matches,
     error
   } = findMatches(lines, value, options);
-  const textHeight = measureTextHeight(value, inputLineHeight);
-  const inputHeight = textHeight + inputPaddingBottom + inputPaddingTop;
-  const height = inputHeight + 5;
+  const {
+    inputHeight,
+    height
+  } = measureInputHeight(value, inputLineHeight, inputPaddingBottom, inputPaddingTop, inputBorderWidth, inputGap, replaceExpanded);
   if (error) {
     return {
       ...state,
       inputErrorMessage: error,
-      inputHeight,
+      searchInputHeight: inputHeight,
       height
     };
   }
@@ -1468,7 +1488,7 @@ const refresh$1 = (state, value, inputSource) => {
   return {
     ...state,
     inputErrorMessage: error,
-    inputHeight,
+    searchInputHeight: inputHeight,
     inputSource,
     matchCount,
     matches,
@@ -1706,23 +1726,24 @@ const handleResizerPointerUp = async (state, eventX, eventY) => {
   };
 };
 
-const getFindWidgetHeight = replaceExpanded => {
-  const collapsedHeight = 30;
-  const expandedHeight = 60;
-  const newHeight = replaceExpanded ? expandedHeight : collapsedHeight;
-  return newHeight;
-};
-
 const toggleReplace$1 = state => {
   const {
-    replaceExpanded
+    replaceExpanded,
+    value,
+    inputLineHeight,
+    inputPaddingBottom,
+    inputPaddingTop,
+    inputBorderWidth,
+    inputGap
   } = state;
   const newExpanded = !replaceExpanded;
-  const newHeight = getFindWidgetHeight(newExpanded);
+  const {
+    height
+  } = measureInputHeight(value, inputLineHeight, inputPaddingBottom, inputPaddingTop, inputBorderWidth, inputGap, newExpanded);
   return {
     ...state,
     replaceExpanded: newExpanded,
-    height: newHeight
+    height
   };
 };
 
@@ -1995,7 +2016,12 @@ const loadContent = async (state, savedState) => {
     editorWidth,
     editorX,
     editorY,
-    inputLineHeight
+    inputLineHeight,
+    inputPaddingBottom,
+    inputPaddingTop,
+    replaceExpanded,
+    inputBorderWidth,
+    inputGap
   } = state;
   const {
     replacement,
@@ -2006,8 +2032,7 @@ const loadContent = async (state, savedState) => {
   const {
     x,
     y,
-    width,
-    height
+    width
   } = getFindWidgetPosition(editorX, editorY, editorWidth);
   if (lines.length === 0) {
     return state;
@@ -2015,19 +2040,22 @@ const loadContent = async (state, savedState) => {
   const actualValue = value || getSelectedText(lines, selections);
   const matches = findMatchesCaseInsensitive(lines, actualValue);
   const matchCount = getMatchCount(matches);
-  const inputHeight = measureTextHeight(value, inputLineHeight);
+  const {
+    inputHeight,
+    height
+  } = measureInputHeight(value, inputLineHeight, inputPaddingBottom, inputPaddingTop, inputBorderWidth, inputGap, replaceExpanded);
   return {
     ...state,
     focus: FocusSearchInput,
     focused: true,
     height,
-    inputHeight,
     inputSource: Script,
     lines,
     matchCount,
     matches,
     matchIndex: 0,
     replacement,
+    searchInputHeight: inputHeight,
     selections,
     value: actualValue,
     version: 1,
@@ -2483,7 +2511,7 @@ const renderCss = (oldState, newState) => {
     height,
     x,
     y,
-    inputHeight
+    searchInputHeight: inputHeight
   } = newState;
   const css = `:root {
   --FindWidgetWidth: ${width}px;
@@ -2607,7 +2635,7 @@ const renderReplaceValue = (oldState, newState) => {
     uid,
     replacement
   } = newState;
-  return [SetValueByName, uid, Replace$2, replacement];
+  return [SetValueByName, uid, ReplaceValue, replacement];
 };
 
 const renderUid = (oldState, newState) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/find-widget-worker",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Web Worker for the find widget in Lvce Editor",
   "repository": {
     "type": "git",