@lvce-editor/ports-view 0.6.2 → 0.7.0

package/dist/portsViewWorkerMain.js

@@ -1366,17 +1366,18 @@ const normalizePort = input => {
   if (!Number.isSafeInteger(port) || port < 1 || port > 65_535) {
     throw new RangeError('port must be an integer between 1 and 65535');
   }
-  const forwardedAddress = input.forwardedAddress ?? `localhost:${port}`;
-  const runningProcess = input.runningProcess ?? '';
-  const origin = input.origin ?? userForwarded();
+  const rawInput = input;
+  const forwardedAddress = rawInput.forwardedAddress ?? `localhost:${port}`;
+  const runningProcess = rawInput.runningProcess ?? '';
+  const origin = rawInput.origin ?? userForwarded();
   assertString(forwardedAddress, 'forwardedAddress');
   assertString(runningProcess, 'runningProcess');
   assertString(origin, 'origin');
-  if (input.active !== undefined && typeof input.active !== 'boolean') {
+  if (rawInput.active !== undefined && typeof rawInput.active !== 'boolean') {
     throw new TypeError('active must be a boolean');
   }
   return {
-    active: input.active ?? true,
+    active: rawInput.active ?? true,
     forwardedAddress,
     origin,
     port,
@@ -1489,7 +1490,11 @@ const submitAddPort = state => {
   }
   return {
     ...addPort(state, {
-      port
+      active: true,
+      forwardedAddress: `localhost:${port}`,
+      origin: userForwarded(),
+      port,
+      runningProcess: ''
     }),
     addPortError: '',
     addPortValue: '',
@@ -2028,26 +2033,25 @@ const handleBlur = state => {
   };
 };
 
-const handleClickAt = (state, clientY, name) => {
+const getIndexAt = (state, clientY) => {
   const {
     deltaY,
     headerHeight,
     itemHeight,
+    listHeight,
     minLineY,
     ports,
     y
   } = state;
-  if (name.startsWith('port-address-') || name.startsWith('port-status-')) {
-    const port = Number(name.slice(name.lastIndexOf('-') + 1));
-    const index = ports.findIndex(item => item.port === port);
-    return index === -1 ? state : focusIndex(state, index);
-  }
   const relativeY = clientY - y - headerHeight;
+  if (itemHeight <= 0 || relativeY < 0 || relativeY >= listHeight) {
+    return -1;
+  }
   const index = minLineY + Math.floor((relativeY + deltaY % itemHeight) / itemHeight);
-  if (relativeY < 0 || index < 0 || index >= ports.length) {
-    return state;
+  if (index < 0 || index >= ports.length) {
+    return -1;
   }
-  return focusIndex(state, index);
+  return index;
 };
 
 const SchemeRegex = /^[a-z][a-z\d+.-]*:\/\//i;
@@ -2085,26 +2089,23 @@ const togglePortActive = (state, portNumber) => {
   };
 };
 
-const parsePort = name => {
-  return Number(name.slice(name.lastIndexOf('-') + 1));
-};
 const handleClick = async (state, clientY, name) => {
   const {
     ports
   } = state;
+  const index = getIndexAt(state, clientY);
+  if (index === -1) {
+    return state;
+  }
+  const port = ports[index];
+  const focused = focusIndex(state, index);
   if (name.startsWith('port-address-')) {
-    const portNumber = parsePort(name);
-    const index = ports.findIndex(item => item.port === portNumber);
-    const focused = index === -1 ? state : focusIndex(state, index);
-    return openAddress(focused, portNumber);
+    return openAddress(focused, port.port);
   }
   if (name.startsWith('port-status-')) {
-    const portNumber = parsePort(name);
-    const index = ports.findIndex(item => item.port === portNumber);
-    const focused = index === -1 ? state : focusIndex(state, index);
-    return togglePortActive(focused, portNumber);
+    return togglePortActive(focused, port.port);
   }
-  return handleClickAt(state, clientY, name);
+  return focused;
 };
 
 const handleFocus = state => {
@@ -2244,7 +2245,7 @@ const PortsStatusIconActive = 'PortsStatusIconActive';
 const PortsStatusIconInactive = 'PortsStatusIconInactive';
 const PortsTable = 'PortsTable';
 const PortsTableBody = 'PortsTableBody';
-const PortsTableCell = 'PortsTableCell';
+const PortsColumn = 'PortsColumn';
 const PortsTableHeader = 'PortsTableHeader';
 const PortsTableRow = 'PortsTableRow';
 const PortsTableRowOdd = 'PortsTableRowOdd';
@@ -2369,10 +2370,10 @@ const getRowClassName = port => {
   return className;
 };
 
-const getTextCell = (value, className) => {
+const getTextCell = value => {
   return [{
     childCount: 1,
-    className: mergeClassNames(PortsTableCell, className),
+    className: PortsColumn,
     role: Cell,
     title: value,
     type: Div
@@ -2384,7 +2385,7 @@ const Unfocusable = -1;
 
 const statusCell = {
   childCount: 1,
-  className: mergeClassNames(PortsTableCell, 'PortsStatusColumn'),
+  className: PortsColumn,
   role: Cell,
   type: Div
 };
@@ -2396,9 +2397,9 @@ const getPortRowVirtualDom = port => {
     className: getRowClassName(port),
     role: Row,
     type: Div
-  }, statusCell, ...getPortsStatusVirtualDom(port.active, port.port), ...getTextCell(portText, 'PortsPortColumn'), {
+  }, statusCell, ...getPortsStatusVirtualDom(port.active, port.port), ...getTextCell(portText), {
     childCount: 1,
-    className: mergeClassNames(PortsTableCell, 'PortsAddressColumn'),
+    className: PortsColumn,
     role: Cell,
     title: port.forwardedAddress,
     type: Div
@@ -2409,7 +2410,7 @@ const getPortRowVirtualDom = port => {
     role: Link,
     tabIndex: Unfocusable,
     type: A
-  }, text(port.forwardedAddress), ...getTextCell(port.runningProcess, 'PortsProcessColumn'), ...getTextCell(port.origin, 'PortsOriginColumn')];
+  }, text(port.forwardedAddress), ...getTextCell(port.runningProcess), ...getTextCell(port.origin)];
 };
 
 const getVisiblePorts = state => {
@@ -2466,16 +2467,17 @@ const headerRow = {
   role: Row,
   type: Div
 };
-const getHeaderCell = (label, className) => {
-  return [{
-    childCount: 1,
-    className: mergeClassNames(PortsTableCell, className),
-    role: ColumnHeader,
-    type: Div
-  }, text(label)];
+const headerCell = {
+  childCount: 1,
+  className: PortsColumn,
+  role: ColumnHeader,
+  type: Div
+};
+const getHeaderCell = label => {
+  return [headerCell, text(label)];
 };
 const getPortsTableHeaderVirtualDom = () => {
-  return [headerRow, ...getHeaderCell('', 'PortsStatusColumn'), ...getHeaderCell(port(), 'PortsPortColumn'), ...getHeaderCell(forwardedAddress(), 'PortsAddressColumn'), ...getHeaderCell(runningProcess(), 'PortsProcessColumn'), ...getHeaderCell(origin(), 'PortsOriginColumn')];
+  return [headerRow, ...getHeaderCell(''), ...getHeaderCell(port()), ...getHeaderCell(forwardedAddress()), ...getHeaderCell(runningProcess()), ...getHeaderCell(origin())];
 };
 
 const table = {

package/package.json

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