@lvce-editor/ports-view 0.7.2 → 0.7.3

package/dist/portsViewWorkerMain.js

@@ -1024,12 +1024,12 @@ const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
 const DeltaMode = 'event.deltaMode';
 const DeltaY = 'event.deltaY';
-const Key = 'event.key';
 const TargetName = 'event.target.name';
 const TargetValue = 'event.target.value';
 
 const Backspace = 1;
 const Enter = 3;
+const Escape = 8;
 const Space = 9;
 const End = 255;
 const Home = 12;
@@ -1044,6 +1044,7 @@ const None = 0;
 
 const RendererWorker = 1;
 
+const FocusSelector = 'Viewlet.focusSelector';
 const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
 const SetFocusContext = 'Viewlet.setFocusContext';
@@ -1554,15 +1555,6 @@ const submitAddPort = state => {
     editing: false
   };
 };
-const handleAddPortKeyDown = (state, key) => {
-  if (key === 'Enter') {
-    return submitAddPort(state);
-  }
-  if (key === 'Escape') {
-    return cancelAddPort(state);
-  }
-  return state;
-};
 
 const copyLink = async (state, href) => {
   await writeClipBoardText(href);
@@ -1613,7 +1605,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, parentUid) =>
 };
 
 const isFocusContextEqual = (oldState, newState) => {
-  return oldState.focused === newState.focused && oldState.editing === newState.editing;
+  return oldState.focused === newState.focused;
 };
 const isDomEqual = (oldState, newState) => {
   return oldState.addPortError === newState.addPortError && oldState.addPortValue === newState.addPortValue && oldState.editing === newState.editing && oldState.focusedIndex === newState.focusedIndex && oldState.loaded === newState.loaded && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.ports === newState.ports;
@@ -1621,18 +1613,22 @@ const isDomEqual = (oldState, newState) => {
 const isCssEqual = (oldState, newState) => {
   return oldState.loaded && oldState.deltaY % oldState.itemHeight === newState.deltaY % newState.itemHeight && oldState.footerHeight === newState.footerHeight && oldState.headerHeight === newState.headerHeight && oldState.height === newState.height && oldState.itemHeight === newState.itemHeight && oldState.width === newState.width;
 };
+const isEditingEqual = (oldState, newState) => {
+  return oldState.editing === newState.editing;
+};
 
 const RenderCss = 1;
 const RenderDom = 2;
 const RenderIncremental = 3;
 const RenderFocusContext = 4;
+const RenderFocus = 5;
 
 const diff2 = uid => {
   const {
     oldState
   } = get(uid);
   const domDiffType = oldState.loaded ? RenderIncremental : RenderDom;
-  return diff(uid, [isDomEqual, isCssEqual, isFocusContextEqual], [domDiffType, RenderCss, RenderFocusContext]);
+  return diff(uid, [isDomEqual, isCssEqual, isFocusContextEqual, isEditingEqual], [domDiffType, RenderCss, RenderFocusContext, RenderFocus]);
 };
 
 const setDeltaY = (state, deltaY) => {
@@ -2037,8 +2033,8 @@ const diffTree = (oldNodes, newNodes) => {
   return removeTrailingNavigationPatches(patches);
 };
 
-const Empty = 0;
 const FocusPorts = 9000;
+const FocusPortsAddPort = 9001;
 
 const getKeyBindings = () => {
   return [{
@@ -2081,6 +2077,14 @@ const getKeyBindings = () => {
     command: 'Ports.removeFocusedPort',
     key: Backspace,
     when: FocusPorts
+  }, {
+    command: 'Ports.submitAddPort',
+    key: Enter,
+    when: FocusPortsAddPort
+  }, {
+    command: 'Ports.cancelAddPort',
+    key: Escape,
+    when: FocusPortsAddPort
   }];
 };
 
@@ -2367,15 +2371,14 @@ const PortsTableRowOdd = 'PortsTableRowOdd';
 const Viewlet = 'Viewlet';
 
 const HandleAddPortInput = 1;
-const HandleAddPortKeyDown = 2;
-const HandleBlur = 3;
-const HandleCancelAddPort = 4;
-const HandleClick = 5;
-const HandleFocus = 6;
-const HandleStartAddPort = 7;
-const HandleSubmitAddPort = 8;
-const HandleWheel = 9;
-const HandleContextMenu = 10;
+const HandleBlur = 2;
+const HandleCancelAddPort = 3;
+const HandleClick = 4;
+const HandleFocus = 5;
+const HandleStartAddPort = 6;
+const HandleSubmitAddPort = 7;
+const HandleWheel = 8;
+const HandleContextMenu = 9;
 
 const errorMessage = {
   childCount: 1,
@@ -2403,7 +2406,6 @@ const getPortInputDom = addPortValue => {
     className: AddPortInput,
     inputMode: 'numeric',
     onInput: HandleAddPortInput,
-    onKeyDown: HandleAddPortKeyDown,
     placeholder: portNumber(),
     type: Input,
     value: addPortValue
@@ -2625,11 +2627,20 @@ const renderDom = (oldState, newState) => {
   return [SetDom2, newState.uid, getPortsVirtualDom(newState)];
 };
 
+const renderFocus = (oldState, newState) => {
+  if (oldState.editing === newState.editing) {
+    return [];
+  }
+  const selector = newState.editing ? '.AddPortInput' : '.Ports';
+  return [FocusSelector, newState.uid, selector];
+};
+
 const renderFocusContext = (oldState, newState) => {
   if (!newState.focused) {
-    return ['Viewlet.unsetAdditionalFocus', newState.uid, FocusPorts];
+    const focusContext = oldState.editing ? FocusPortsAddPort : FocusPorts;
+    return ['Viewlet.unsetAdditionalFocus', newState.uid, focusContext];
   }
-  return [SetFocusContext, newState.uid, newState.editing ? Empty : FocusPorts];
+  return [SetFocusContext, newState.uid, newState.editing ? FocusPortsAddPort : FocusPorts];
 };
 
 const renderIncremental = (oldState, newState) => {
@@ -2644,6 +2655,8 @@ const getRenderer = diffType => {
       return renderCss;
     case RenderDom:
       return renderDom;
+    case RenderFocus:
+      return renderFocus;
     case RenderFocusContext:
       return renderFocusContext;
     case RenderIncremental:
@@ -2665,9 +2678,6 @@ const renderEventListeners = () => {
   return [{
     name: HandleAddPortInput,
     params: ['handleAddPortInput', TargetValue]
-  }, {
-    name: HandleAddPortKeyDown,
-    params: ['handleAddPortKeyDown', Key]
   }, {
     name: HandleBlur,
     params: ['handleBlur']
@@ -2752,7 +2762,6 @@ const commandMap = {
   'Ports.getMenuEntries2': wrapGetter(getMenuEntries2),
   'Ports.getMenuIds': getMenuIds,
   'Ports.handleAddPortInput': wrapCommand(handleAddPortInput),
-  'Ports.handleAddPortKeyDown': wrapCommand(handleAddPortKeyDown),
   'Ports.handleBlur': wrapCommand(handleBlur),
   'Ports.handleClick': wrapCommand(handleClick),
   'Ports.handleContextMenu': wrapCommand(handleContextMenu),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/ports-view",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Ports View Worker",
   "repository": {
     "type": "git",