@lvce-editor/settings-view 1.1.0 → 1.3.0

package/dist/settingsViewWorkerMain.js

@@ -932,7 +932,8 @@ const create$1 = (id, uri, x, y, width, height) => {
     x,
     y,
     width,
-    height
+    height,
+    tabs: []
   };
   set$1(id, state, state);
 };
@@ -975,19 +976,45 @@ const initialize = async () => {
   // TODO
 };
 
+const getTabs = () => {
+  const tabs = ['Text Editor', 'Workbench', 'Window', 'Features', 'Applications', 'Security', 'Extensions'];
+  return tabs;
+};
+
 const loadContent = async (state, savedState) => {
+  const tabs = getTabs();
   return {
-    ...state
+    ...state,
+    tabs
   };
 };
 
+const Tab$1 = 'tab';
+const TabList = 'tablist';
+const AriaRoles = {
+  __proto__: null,
+  Tab: Tab$1,
+  TabList};
+const Viewlet$1 = 'Viewlet';
+const ClassNames = {
+  __proto__: null,
+  Viewlet: Viewlet$1};
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
 const Div = 4;
-const H1 = 5;
+const Input = 6;
 const Text = 12;
+const H2 = 22;
+const Aside = 28;
+const Ul = 60;
 const VirtualDomElements = {
   __proto__: null,
+  Aside,
   Div,
-  H1};
+  H2,
+  Input,
+  Ul};
 const text = data => {
   return {
     type: Text,
@@ -996,18 +1023,91 @@ const text = data => {
   };
 };
 
-const getSettingsDom = state => {
+const {
+  Viewlet} = ClassNames;
+const Settings = 'Settings';
+
+const getSettingsInputDom = () => {
+  const placeholder = 'Search Settings';
   return [{
     type: VirtualDomElements.Div,
+    className: 'SettingsInputWrapper',
     childCount: 1
   }, {
-    type: VirtualDomElements.H1,
+    type: VirtualDomElements.Input,
+    className: 'InputBox SettingsSearchInput',
+    placeholder
+  }];
+};
+
+const getSettingsHeaderDom = () => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsHeader',
+    childCount: 1
+  }, ...getSettingsInputDom()];
+};
+
+const getSettingsContentDom = () => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsContent',
     childCount: 1
-  }, text('Settings Dom: TODO')];
+  }, text('Settings Content')];
+};
+
+const getTabVirtualDom = tab => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'Tab',
+    childCount: 1,
+    role: AriaRoles.Tab
+  }, text(tab)];
+};
+
+const getSettingsTabsDom = tabs => {
+  return [{
+    type: VirtualDomElements.Ul,
+    className: 'SettingsTabs',
+    role: AriaRoles.TabList,
+    childCount: tabs.length
+  }, ...tabs.flatMap(getTabVirtualDom)];
+};
+
+const getSettingsSideBarDom = tabs => {
+  const sideBarHeading = 'Settings SideBar';
+  return [{
+    type: VirtualDomElements.Aside,
+    className: 'SettingsSideBar',
+    childCount: 2
+  }, {
+    type: VirtualDomElements.H2,
+    className: 'SettingsSideBarHeading',
+    childCount: 1
+  }, text(sideBarHeading), ...getSettingsTabsDom(tabs)];
+};
+
+const getSettingsMainDom = tabs => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsMain',
+    childCount: 2
+  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom()];
+};
+
+const getSettingsDom = state => {
+  const {
+    tabs
+  } = state;
+  return [{
+    type: VirtualDomElements.Div,
+    childCount: 2,
+    className: mergeClassNames(Viewlet, Settings)
+  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs)];
 };
 
 const renderItems = (oldState, newState) => {
-  const dom = getSettingsDom();
+  const dom = getSettingsDom(newState);
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
@@ -1043,15 +1143,169 @@ const renderActions = () => {
   return [];
 };
 
+const HandleClickCallStackItem = 'handleClickCallStackItem';
+const HandleClickWatchExpression = 'handleClickWatchExpression';
+const HandleClickWatchExpressionDelete = 'handleClickWatchExpressionDelete';
+const HandleClickCheckBox = 'handleClickCheckBox';
+const HandleClickContinue = 'handleClickContinue';
+const HandleClickDebugButton = 'handleClickDebugButton';
+const HandleClickPause = 'handleClickPause';
+const HandleClickScopeValue = 'handleClickScopeValue';
+const HandleClickSectionBreakPoints = 'handleClickSectionBreakPoints';
+const HandleClickSectionCallstack = 'handleClickSectionCallstack';
+const HandleClickSectionHeading = 'handleClickSectionHeading';
+const HandleClickSectionScope = 'handleClickSectionScope';
+const HandleClickSectionWatch = 'handleClickSectionWatch';
+const HandleClickStepInto = 'handleClickStepInto';
+const HandleClickStepOut = 'handleClickStepOut';
+const HandleClickStepOver = 'handleClickStepOver';
+const HandleDebugInput = 'handleDebugInput';
+const HandleClickSectionAction = 'handleClickSectionAction';
+const HandleInputFieldChange = 'handleInputFieldChange';
+const HandleInputBlur = 'handleInputBlur';
+const HandleSectionHeaderContextMenu = 'handleSectionHeaderContextMenu';
+const HandleWatchExpressionContextMenu = 'handleWatchExpressionContextMenu';
+
+// TODo use numeric ids
+
+const renderEventListeners = () => {
+  return [{
+    name: HandleClickContinue,
+    params: ['handleClickContinue']
+  }, {
+    name: HandleClickDebugButton,
+    params: ['handleClickDebugButton', 'event.target.name']
+  }, {
+    name: HandleClickPause,
+    params: ['handleClickPause']
+  }, {
+    name: HandleClickStepOver,
+    params: ['handleClickStepOver']
+  }, {
+    name: HandleClickStepInto,
+    params: ['handleClickStepInto']
+  }, {
+    name: HandleClickStepOut,
+    params: ['handleClickStepOut']
+  }, {
+    name: HandleClickSectionWatch,
+    params: ['HandleClickSectionWatch']
+  }, {
+    name: HandleClickSectionBreakPoints,
+    params: ['handleClickSectionBreakpoints']
+  }, {
+    name: HandleClickSectionScope,
+    params: ['handleClickSectionScope']
+  }, {
+    name: HandleClickSectionCallstack,
+    params: ['handleClickSectionCallstack']
+  }, {
+    name: HandleClickSectionBreakPoints,
+    params: ['handleClickSectionBreakPoints']
+  }, {
+    name: HandleDebugInput,
+    params: ['handleDebugInput', 'event.target.value']
+  }, {
+    name: HandleClickSectionHeading,
+    params: ['handleClickSectionHeading', 'event.target.dataset.name', 'event.button'],
+    preventDefault: true
+  }, {
+    name: HandleClickCheckBox,
+    params: ['handleClickCheckBox', 'event.target.name']
+  }, {
+    name: HandleClickDebugButton,
+    params: ['handleClickDebugButton', 'event.target.name']
+  }, {
+    name: HandleClickCallStackItem,
+    params: ['handleClickCallStackItem', 'event.target.dataset.index']
+  }, {
+    name: HandleClickWatchExpression,
+    params: ['handleClickWatchExpression', 'event.target.dataset.index', 'event.defaultPrevented']
+  }, {
+    name: HandleClickWatchExpressionDelete,
+    params: ['handleClickWatchExpressionDelete', 'event.target.dataset.index'],
+    preventDefault: true
+  }, {
+    name: HandleClickScopeValue,
+    params: ['handleClickScopeValue', 'event.target.dataset.index', 'event.button']
+  }, {
+    name: HandleInputFieldChange,
+    params: ['handleInputFieldChange', 'event.target.name', 'event.target.value']
+  }, {
+    name: HandleClickSectionAction,
+    params: ['handleClickSectionAction', 'event.target.name']
+  }, {
+    name: HandleInputBlur,
+    params: ['handleInputBlur']
+  }, {
+    name: HandleSectionHeaderContextMenu,
+    params: ['handleSectionHeaderContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.name'],
+    preventDefault: true
+  }, {
+    name: HandleWatchExpressionContextMenu,
+    params: ['handleWatchExpressionContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.index'],
+    preventDefault: true
+  }];
+};
+
+const getSavedMinLineY = savedState => {
+  if (savedState && typeof savedState === 'object' && 'minLineY' in savedState && typeof savedState.minLineY === 'number') {
+    return savedState.minLineY;
+  }
+  return 0;
+};
+const getSavedDeltaY = savedState => {
+  if (savedState && typeof savedState === 'object' && 'deltaY' in savedState && typeof savedState.deltaY === 'number') {
+    return savedState.deltaY;
+  }
+  return 0;
+};
+const getSavedWorkspacePath = savedState => {
+  if (savedState && typeof savedState === 'object' && 'workspacePath' in savedState && typeof savedState.workspacePath === 'string') {
+    return savedState.workspacePath;
+  }
+  return '';
+};
+const restoreState = savedState => {
+  if (!savedState) {
+    return {
+      root: '',
+      minLineY: 0,
+      deltaY: 0
+    };
+  }
+  const root = getSavedWorkspacePath(savedState);
+  const minLineY = getSavedMinLineY(savedState);
+  const deltaY = getSavedDeltaY(savedState);
+  return {
+    root,
+    minLineY,
+    deltaY
+  };
+};
+
+const saveState = uid => {
+  return {
+    expandedPaths: [],
+    root: '',
+    minLineY: 0,
+    maxLineY: 0,
+    deltaY: 0
+  };
+};
+
 const commandMap = {
   'Initialize.initialize': initialize,
   'Settings.create': create$1,
-  'Settings.getCommandIds': getCommandIds,
-  'Settings.terminate': terminate,
   'Settings.diff2': diff2,
+  'Settings.getCommandIds': getCommandIds,
   'Settings.loadContent': wrapCommand(loadContent),
+  'Settings.render2': render2,
   'Settings.renderActions': renderActions,
-  'Settings.render2': render2
+  'Settings.renderEventListeners': renderEventListeners,
+  'Settings.restoreState': restoreState,
+  'Settings.saveState': saveState,
+  'Settings.terminate': terminate
 };
 
 const rpcs = Object.create(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/settings-view",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",