@lvce-editor/find-widget-worker 1.15.0 → 1.16.0

package/dist/findWidgetWorkerMain.js

@@ -946,6 +946,7 @@ const {
   registerCommands
 } = create$2();
 
+const User$1 = 1;
 const Script$1 = 2;
 const Unknown = 0;
 
@@ -978,16 +979,21 @@ const create$1 = (uid, x, y, width, height, parentUid) => {
     editorWidth: width,
     editorHeight: height,
     inputSource: 0,
-    preserveCase: false
+    preserveCase: false,
+    resizerPointerDown: false
   };
   set$3(uid, state, state);
   return state;
 };
 
-const isEqual$5 = (oldState, newState) => {
+const isEqual$6 = (oldState, newState) => {
   return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
 };
 
+const isEqual$5 = (oldState, newState) => {
+  return newState.width === newState.width && oldState.height === newState.height && oldState.x === newState.x;
+};
+
 const isEqual$4 = (oldState, newState) => {
   return oldState.version === newState.version;
 };
@@ -1005,6 +1011,7 @@ const isEqual$1 = (oldState, newState) => {
 };
 
 const RenderBounds = 8;
+const RenderCss = 10;
 const RenderEventListeners = 11;
 const RenderUid = 12;
 const RenderContent = 13;
@@ -1022,12 +1029,16 @@ const Div = 4;
 const Text = 12;
 const TextArea = 62;
 
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+
 const User = 1;
 const Script = 1;
 
 const EditorWorker$1 = 99;
 
 const FocusSelector = 'Viewlet.focusSelector';
+const SetCss = 'Viewlet.setCss';
 const SetFocusContext = 'Viewlet.setFocusContext';
 const SetValueByName = 'Viewlet.setValueByName';
 
@@ -1035,8 +1046,8 @@ const isEqual = (oldState, newState) => {
   return newState.inputSource === User || oldState.value === newState.value;
 };
 
-const modules = [isEqual$4, isEqual$2, isEqual$5, isEqual$1, isEqual$3, isEqual$3, isEqual];
-const numbers = [RenderEventListeners, RenderContent, RenderBounds, RenderUid, RenderFocusContext, RenderFocus, RenderValue];
+const modules = [isEqual$4, isEqual$2, isEqual$6, isEqual$1, isEqual$3, isEqual$3, isEqual, isEqual$5];
+const numbers = [RenderEventListeners, RenderContent, RenderBounds, RenderUid, RenderFocusContext, RenderFocus, RenderValue, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1425,7 +1436,7 @@ const Replace$2 = 'Replace';
 const ReplaceAll$2 = 'ReplaceAll';
 const ReplaceValue = 'replace-value';
 const SearchValue = 'search-value';
-const ToggleReplace = 'ToggleReplace';
+const ToggleReplace$1 = 'ToggleReplace';
 const UseRegularExpression$1 = 'UseRegularExpression';
 
 const applyEdits = async (editorId, edits) => {
@@ -1534,6 +1545,49 @@ const handleInput = (state, value, inputSource = User) => {
   return refresh(state, value, inputSource);
 };
 
+const handleFindWidgetFocus = (state, focusKey) => {
+  if (state.focus === focusKey) {
+    return state;
+  }
+  return {
+    ...state,
+    focus: focusKey,
+    focusSource: User$1
+  };
+};
+
+const handleReplaceFocus = state => {
+  return handleFindWidgetFocus(state, FocusFindWidgetReplace);
+};
+
+const handleResizerPointerDown = async (state, eventX, eventY) => {
+  return {
+    ...state,
+    resizerPointerDown: true
+  };
+};
+
+const handleResizerPointerMove = async (state, eventX, eventY) => {
+  const {
+    width,
+    x
+  } = state;
+  const oldXEnd = x + width;
+  const newWidth = oldXEnd - eventX;
+  return {
+    ...state,
+    x: eventX,
+    width: newWidth
+  };
+};
+
+const handleResizerPointerUp = async (state, eventX, eventY) => {
+  return {
+    ...state,
+    resizerPointerDown: false
+  };
+};
+
 const getFindWidgetHeight = replaceExpanded => {
   const collapsedHeight = 30;
   const expandedHeight = 60;
@@ -1541,7 +1595,7 @@ const getFindWidgetHeight = replaceExpanded => {
   return newHeight;
 };
 
-const toggleReplace = state => {
+const toggleReplace$1 = state => {
   const {
     replaceExpanded
   } = state;
@@ -1674,19 +1728,24 @@ const renderBounds = (oldState, newState) => {
 };
 
 const HandleBlur = 'handleBlur';
+const HandleClickButton = 'handleClickButton';
 const HandleClickClose = 'handleClickClose';
 const HandleClickNextMatch = 'handleClickNextMatch';
 const HandleClickPreviousMatch = 'handleClickPreviousMatch';
 const HandleClickReplace = 'handleClickReplace';
-const HandleClickToggleReplace = 'handleClickToggleReplace';
 const HandleClickReplaceAll = 'handleClickReplaceAll';
-const HandleClickButton = 'handleClickButton';
+const HandleClickToggleReplace = 'handleClickToggleReplace';
 const HandleFocus = 'handleFocus';
+const HandleFocusNext = 'handleFocusNext';
+const HandleFocusPrevious = 'handleFocusPrevious';
 const HandleInput = 'handleInput';
 const HandleReplaceFocus = 'handleReplaceFocus';
-const HandleFocusPrevious = 'handleFocusPrevious';
-const HandleFocusNext = 'handleFocusNext';
 const HandleReplaceInput = 'handleReplaceInput';
+const HandleResizerPointerDown = 'handleResizerPointerDown';
+const HandleResizerPointerMove = 'handleResizerPointerMove';
+const HandleResizerPointerUp = 'handleResizerPointerUp';
+const HandleSliderPointerMove = 'handleSliderPointerMove';
+const HandleToggleReplaceFocus = 'handleToggleReplaceFocus';
 
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
@@ -1708,6 +1767,7 @@ const NextMatch = 'Next Match';
 const Find$1 = 'Find';
 const Replace$1 = 'Replace';
 const ReplaceAll$1 = 'Replace All';
+const ToggleReplace = 'Toggle Replace';
 
 const noResults = () => {
   return i18nString(NoResults);
@@ -1736,6 +1796,9 @@ const replace = () => {
 const replaceAll = () => {
   return i18nString(ReplaceAll$1);
 };
+const toggleReplace = () => {
+  return i18nString(ToggleReplace);
+};
 
 const MatchCase = 'CaseSensitive';
 const UseRegularExpression = 'Regex';
@@ -1829,17 +1892,20 @@ const getFindButtons = () => {
     checked: false,
     icon: MatchCase,
     title: 'Match Case',
-    name: MatchCase$1
+    name: MatchCase$1,
+    onClick: HandleClickButton
   }, {
     checked: false,
     icon: MatchWholeWord,
     title: 'Match Whole Word',
-    name: MatchWholeWord$1
+    name: MatchWholeWord$1,
+    onClick: HandleClickButton
   }, {
     checked: false,
     icon: UseRegularExpression,
     title: 'Use Regular Expression',
-    name: UseRegularExpression$1
+    name: UseRegularExpression$1,
+    onClick: HandleClickButton
   }];
 };
 
@@ -1887,16 +1953,20 @@ const getSearchFieldButtonVirtualDom = button => {
   const {
     icon,
     checked,
-    title
+    title,
+    name,
+    onClick
   } = button;
   return [{
     type: Div,
+    ariaChecked: checked,
     className: mergeClassNames(SearchFieldButton, checked ? SearchFieldButtonChecked : ''),
-    title,
+    name,
     role: CheckBox,
-    ariaChecked: checked,
     tabIndex: 0,
-    childCount: 1
+    title,
+    childCount: 1,
+    onClick
   }, {
     type: Div,
     className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
@@ -1961,18 +2031,34 @@ const getFindWidgetReplaceVirtualDom = (replaceExpanded, replaceButtons) => {
   return dom;
 };
 
+const getResizerVirtualDom = () => {
+  return [{
+    type: Div,
+    className: 'Resizer',
+    childCount: 1,
+    onPointerDown: HandleResizerPointerDown,
+    onPointerMove: HandleResizerPointerUp,
+    onPointerUp: HandleResizerPointerMove
+  }, {
+    type: Div,
+    className: 'ResizerHighlight',
+    childCount: 0
+  }];
+};
+
 const getSearchToggleButtonVirtualDom = (replaceExpanded, onClick = '') => {
+  const title = toggleReplace();
   return [{
     type: Button,
     className: `IconButton SearchToggleButton ${replaceExpanded ? 'SearchToggleButtonExpanded' : ''}`,
-    title: 'Toggle Replace',
-    ariaLabel: 'Toggle Replace',
+    title,
+    ariaLabel: title,
     ariaExpanded: replaceExpanded,
-    name: ToggleReplace,
+    name: ToggleReplace$1,
     childCount: 1,
     'data-command': 'toggleReplace',
     onClick,
-    onFocus: 'handleToggleReplaceFocus'
+    onFocus: HandleToggleReplaceFocus
   }, {
     type: Div,
     className: `MaskIcon ${replaceExpanded ? 'MaskIconChevronDown' : 'MaskIconChevronRight'}`,
@@ -1985,9 +2071,10 @@ const getFindWidgetVirtualDom = (matchCountText, replaceExpanded, findButtons, r
   dom.push({
     type: Div,
     className: mergeClassNames(Viewlet, ViewletFind, ViewletFindWidget, FindWidget),
-    childCount: 2,
+    childCount: 3,
     role: Group
   });
+  dom.push(...getResizerVirtualDom());
   dom.push(...getSearchToggleButtonVirtualDom(replaceExpanded, 'handleClickToggleReplace'));
   dom.push({
     type: Div,
@@ -2025,6 +2112,23 @@ const renderContent = (oldState, newState) => {
   return [SetDom2, uid, dom];
 };
 
+const renderCss = (oldState, newState) => {
+  const {
+    uid,
+    width,
+    height,
+    x,
+    y
+  } = newState;
+  const css = `:root {
+    --FindWidgetWidth: ${width}px;
+    --FindWidgetHeight: ${height}px;
+    --FindWidgetX: ${x}px;
+    --FindWidgetY: ${y}px;
+  }`;
+  return [SetCss, uid, css];
+};
+
 const getEventListeners = (uid, widgetId) => {
   return [{
     name: HandleInput,
@@ -2068,6 +2172,16 @@ const getEventListeners = (uid, widgetId) => {
   }, {
     name: HandleClickButton,
     params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleClickButton', 0, widgetId, `event.target.name`]
+  }, {
+    name: HandleResizerPointerDown,
+    params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleResizerPointerDown', 0, widgetId, ClientX, ClientY],
+    trackPointerEvents: [HandleResizerPointerMove, HandleResizerPointerUp]
+  }, {
+    name: HandleSliderPointerMove,
+    params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleResizerPointerMove', 0, widgetId, ClientX, ClientY]
+  }, {
+    name: HandleResizerPointerUp,
+    params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleResizerPointerUp', 0, widgetId, ClientX, ClientY]
   }];
 };
 
@@ -2136,6 +2250,8 @@ const getRenderer = diffType => {
       return renderValue;
     case RenderReplaceValue:
       return renderReplaceValue;
+    case RenderCss:
+      return renderCss;
     default:
       throw new Error('unknown renderer');
   }
@@ -2160,6 +2276,10 @@ const render2 = (uid, diffResult) => {
   return commands;
 };
 
+const resize = async (state, dimensions) => {
+  return state;
+};
+
 const commandMap = {
   'FindWidget.create': create$1,
   'FindWidget.diff2': diff2,
@@ -2168,24 +2288,29 @@ const commandMap = {
   'FindWidget.focusFirst': wrapCommand(focusFirst),
   'FindWidget.focusIndex': wrapCommand(focusIndex),
   'FindWidget.focusLast': wrapCommand(focusLast),
-  'FindWidget.toggleMatchCase': wrapCommand(toggleMatchCase),
   'FindWidget.focusNext': wrapCommand(focusNext),
   'FindWidget.focusPrevious': wrapCommand(focusPrevious),
   'FindWidget.focusReplace': wrapCommand(focusReplace),
   'FindWidget.focusReplaceAllButton': wrapCommand(focusReplaceAllButton),
   'FindWidget.getCommandIds': getCommandIds,
   'FindWidget.handleBlur': wrapCommand(handleBlur),
+  'FindWidget.handleClickButton': wrapCommand(handleClickButton),
   'FindWidget.handleClickClose': wrapCommand(handleClickClose),
   'FindWidget.handleInput': wrapCommand(handleInput),
+  'FindWidget.handleReplaceFocus': wrapCommand(handleReplaceFocus),
   'FindWidget.handleReplaceInput': wrapCommand(handleReplaceInput),
+  'FindWidget.handleResizerPointerDown': wrapCommand(handleResizerPointerDown),
+  'FindWidget.handleResizerPointerMove': wrapCommand(handleResizerPointerMove),
+  'FindWidget.handleResizerPointerUp': wrapCommand(handleResizerPointerUp),
   'FindWidget.loadContent': wrapCommand(loadContent),
   'FindWidget.preventDefaultBrowserFind': wrapCommand(preventDefaultBrowserFind),
   'FindWidget.render2': render2,
-  'FindWidget.terminate': terminate,
-  'FindWidget.toggleReplace': wrapCommand(toggleReplace),
   'FindWidget.replace': wrapCommand(replace$1),
   'FindWidget.replaceAll': wrapCommand(replaceAll$1),
-  'FindWidget.handleClickButton': wrapCommand(handleClickButton),
+  'FindWidget.resize': wrapCommand(resize),
+  'FindWidget.terminate': terminate,
+  'FindWidget.toggleMatchCase': wrapCommand(toggleMatchCase),
+  'FindWidget.toggleReplace': wrapCommand(toggleReplace$1),
   'FindWidget.toggleUseRegularExpression': wrapCommand(toggleUseRegularExpression)
 };
 

package/package.json

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