@lvce-editor/output-view 1.5.0 → 1.7.0

package/dist/outputViewWorkerMain.js

@@ -960,7 +960,8 @@ const create$1 = (id, uri, x, y, width, height, workspaceUri) => {
     workspaceUri,
     options: [],
     error: '',
-    errorCode: 0
+    errorCode: 0,
+    buttons: []
   };
   set$1(id, state, state);
 };
@@ -1046,13 +1047,17 @@ const KeyCode = {
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
+const Button$1 = 1;
 const Div = 4;
+const Input = 6;
 const Text = 12;
 const Select$2 = 63;
 const Option$1 = 64;
 const VirtualDomElements = {
   __proto__: null,
+  Button: Button$1,
   Div,
+  Input,
   Option: Option$1,
   Select: Select$2};
 const text = data => {
@@ -1113,6 +1118,13 @@ const getKeyBindings$1 = () => {
   }];
 };
 
+const handleButtonClick = async (state, name) => {
+  // TODO
+  return {
+    ...state
+  };
+};
+
 const handleData = async state => {
   // TODO
   return {
@@ -1127,6 +1139,13 @@ const handleError = async state => {
   };
 };
 
+const handleFilterInput = async (state, value) => {
+  return {
+    ...state,
+    filterValue: value
+  };
+};
+
 const rpcs = Object.create(null);
 const set$g = (id, rpc) => {
   rpcs[id] = rpc;
@@ -1549,6 +1568,22 @@ const getSelectedItem = platform => {
   return 'file:///tmp/log-main-process.txt';
 };
 
+const loadButtons = () => {
+  return [{
+    id: 'Clear',
+    label: 'Clear',
+    icon: 'MaskIconClearAll'
+  }, {
+    id: 'Scroll Lock',
+    label: 'Scroll Lock',
+    icon: 'MaskIconListFlat'
+  }, {
+    id: 'Settings',
+    label: 'Settings',
+    icon: 'MaskIconListFlat'
+  }];
+};
+
 const Filter = 'filter';
 const Output$2 = 'output';
 const MainProcess = 'MainProcess';
@@ -1557,10 +1592,12 @@ const SharedProcess = 'SharedProcess';
 const loadOptions = async platform => {
   return [{
     id: MainProcess,
+    label: 'Main Process',
     uri: 'file:///tmp/log-main-process.txt'
   }, {
     id: SharedProcess,
-    uri: 'File:///tmp/log-shared-process.txt'
+    label: 'Shared Process',
+    uri: 'file:///tmp/log-shared-process.txt'
   }];
 };
 
@@ -1582,6 +1619,7 @@ const loadContent = async (state, savedState) => {
     error,
     code
   } = await loadLines(selectedUri);
+  const buttons = loadButtons();
   return {
     ...state,
     collapsedUris,
@@ -1590,7 +1628,8 @@ const loadContent = async (state, savedState) => {
     inputSource: Script,
     listItems: lines,
     options,
-    selectedOption: selectedUri
+    selectedOption: selectedUri,
+    buttons
   };
 };
 
@@ -1674,6 +1713,8 @@ const renderFilterValue = (oldState, newState) => {
   return ['Viewlet.setValueByName', Filter, newState.filterValue];
 };
 
+const IconButton = 'IconButton';
+const MaskIcon = 'MaskIcon';
 const Actions = 'Actions';
 const Viewlet = 'Viewlet';
 const Output = 'Output';
@@ -1777,13 +1818,57 @@ const HandleContextMenu = 'handleContextMenu';
 const HandleFilterInput = 'handleFilterInput';
 const HandlePointerDown = 'handlePointerDown';
 const HandleSelect = 'handleSelect';
+const HandleButtonClick = 'handleButtonClick';
+
+const getActionButtonVirtualDom = button => {
+  const {
+    id,
+    label,
+    icon
+  } = button;
+  return [{
+    type: VirtualDomElements.Button,
+    className: IconButton,
+    name: id,
+    title: label,
+    childCount: 1,
+    onClick: HandleButtonClick
+  }, {
+    type: VirtualDomElements.Div,
+    className: mergeClassNames(MaskIcon, icon)
+  }];
+};
+
+const getActionButtonsVirtualDom = buttons => {
+  return buttons.flatMap(getActionButtonVirtualDom);
+};
+
+const getFilterVirtualDom = () => {
+  const placeholder = 'Filter';
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'Filter',
+    childCount: 1
+  }, {
+    type: VirtualDomElements.Input,
+    className: 'InputBox FilterInput',
+    childCount: 0,
+    placeholder,
+    onInput: HandleFilterInput
+  }];
+};
 
 const getOptionVirtualDom = option => {
+  const {
+    id,
+    label
+  } = option;
   return [{
     type: VirtualDomElements.Option,
     className: Option,
-    childCount: 1
-  }, text(option.id)];
+    childCount: 1,
+    value: id
+  }, text(label)];
 };
 
 const getSelectVirtualDom = options => {
@@ -1796,20 +1881,27 @@ const getSelectVirtualDom = options => {
   }, ...options.flatMap(getOptionVirtualDom)];
 };
 
-const getActionsVirtualDom = options => {
+const getChildCount = buttonsLength => {
+  const selectLength = 1;
+  const filterCount = 1;
+  return buttonsLength + filterCount + selectLength;
+};
+const getActionsVirtualDom = (options, buttons) => {
+  const childCount = getChildCount(buttons.length);
   return [{
     type: VirtualDomElements.Div,
     className: Actions,
     role: AriaRoles.ToolBar,
-    childCount: 1
-  }, ...getSelectVirtualDom(options)];
+    childCount
+  }, ...getFilterVirtualDom(), ...getSelectVirtualDom(options), ...getActionButtonsVirtualDom(buttons)];
 };
 
 const renderActions = state => {
   const {
-    options
+    options,
+    buttons
   } = state;
-  const dom = getActionsVirtualDom(options);
+  const dom = getActionsVirtualDom(options, buttons);
   return dom;
 };
 
@@ -1817,6 +1909,9 @@ const renderEventListeners = () => {
   return [{
     name: HandleBlur,
     params: ['handleBlur']
+  }, {
+    name: HandleButtonClick,
+    params: ['handleButtonClick', 'event.target.name']
   }, {
     name: HandleSelect,
     params: ['handleSelect', 'event.target.value']
@@ -1882,7 +1977,9 @@ const commandMap = {
   'Output.setOutputChannel': wrapCommand(setOutputChannel),
   'Output.getActions': getActions,
   'Output.terminate': terminate,
-  'Output.handleSelect': wrapCommand(handleSelect)
+  'Output.handleSelect': wrapCommand(handleSelect),
+  'Output.handleFilterInput': wrapCommand(handleFilterInput),
+  'Output.handleButtonClick': wrapCommand(handleButtonClick)
 };
 
 const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/output-view",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Output View Worker",
   "repository": {
     "type": "git",