feat(client-electron): add highlight support to buffer viewer

marcincichocki · Sep 22, 2022 · ba657c8 · ba657c8
1 parent 1479b52
commit ba657c8
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 78 deletions.
diff --git a/src/electron/renderer/components/BufferSizeViewer.tsx b/src/electron/renderer/components/BufferSizeViewer.tsx
@@ -1,16 +1,17 @@
 import { BreachProtocolResultJSON, BUFFER_SIZE_MAX } from '@/core';
 import styled from 'styled-components';
 import { Highlight } from './HistoryViewer';
+import { getSquareColor, Square } from './Square';
 
 function getBufferSizeWrapperWidth() {
-  const square = `${BUFFER_SIZE_MAX} * var(--size)`;
+  const square = `${BUFFER_SIZE_MAX} * var(--square)`;
   const gap = `${BUFFER_SIZE_MAX - 1} * var(--gap)`;
 
   return [square, gap].join(' + ');
 }
 
 const BufferSizeWrapper = styled.div`
-  --size: 40px;
+  --square: 40px;
   --gap: 0.5rem;
 
   border: 1px solid var(--primary);
@@ -25,37 +26,27 @@ const BufferSizeWrapper = styled.div`
   cursor: default;
 `;
 
-const BufferSizeItem = styled.div<{ active: boolean; hasDaemon: boolean }>`
-  width: var(--size);
-  height: var(--size);
-  flex-shrink: 0;
-  border: 1px
-    ${({ active, hasDaemon }) =>
-      active
-        ? hasDaemon
-          ? 'solid var(--accent)'
-          : 'solid var(--accent-dark)'
-        : 'dashed var(--primary)'};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${({ hasDaemon }) =>
-    hasDaemon ? 'var(--accent)' : 'var(--accent-dark)'};
-  font-size: 24px;
-  font-weight: 500;
-  box-sizing: border-box;
+const BufferSizeItem = styled(Square)`
+  border-width: 1px;
+  border-style: ${({ active }) => (active ? 'solid' : 'dashed')};
+  border-color: ${getSquareColor('var(--accent)', 'var(--primary)')};
+  color: ${getSquareColor('var(--background)')};
+  background: ${({ highlight }) =>
+    highlight ? 'var(--accent)' : 'var(--background)'};
 `;
 
 interface BufferSizeViewerProps {
   bufferSize: number;
   result?: BreachProtocolResultJSON;
+  highlight: Highlight;
   hasDaemonAttached: (index: number) => boolean;
   onHighlight?: (highlight: Highlight) => void;
 }
 
 export const BufferSizeViewer = ({
   bufferSize,
   result,
+  highlight,
   hasDaemonAttached,
   onHighlight,
 }: BufferSizeViewerProps) => {
@@ -66,11 +57,14 @@ export const BufferSizeViewer = ({
       {Array.from({ length: bufferSize }, (s, i) => {
         const isActive = result && i < result.path.length;
         const hasDaemon = isActive && hasDaemonAttached(i);
+        const hasHighlight =
+          isActive && i >= highlight?.from && i <= highlight?.to;
 
         return (
           <BufferSizeItem
             key={i}
             active={isActive}
+            highlight={hasHighlight}
             hasDaemon={hasDaemon}
             onMouseEnter={
               onHighlight

diff --git a/src/electron/renderer/components/GridViewer.tsx b/src/electron/renderer/components/GridViewer.tsx
@@ -11,6 +11,7 @@ import {
 import { useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Highlight } from './HistoryViewer';
+import { getSquareColor, Square, SquareProps } from './Square';
 
 const cssVars = { size: 5, gutter: 16, square: 40, border: 1 };
 const cssVarsHighlight = { size: 7, border: 4 };
@@ -35,15 +36,29 @@ const GridWrapper = styled.div<{ size: number }>`
   cursor: default;
 `;
 
-interface SquareProps {
-  active: boolean;
-  highlight: boolean;
-  spotlight: boolean;
+interface GridSquareProps extends SquareProps {
   pathIndex: number;
-  hasDaemon: boolean;
 }
 
-function getSquarePathIndex({ active, highlight, pathIndex }: SquareProps) {
+const GridSquare = styled(Square)`
+  ${(p) =>
+    p.highlight &&
+    css`
+      --border: ${cssVarsHighlight.border}px;
+      --size: ${cssVarsHighlight.size}px;
+    `}
+
+  ${getSquarePathIndex}
+
+  border: var(--border) solid ${getSquareColor('var(--accent)')};
+  color: ${getSquareColor('var(--background)', 'var(--accent-darker)')};
+  background: ${({ highlight }) =>
+    highlight ? 'var(--accent)' : 'var(--background)'};
+  z-index: ${({ active, spotlight }) =>
+    spotlight ? 'auto' : active ? 'auto' : '-3'};
+`;
+
+function getSquarePathIndex({ active, highlight, pathIndex }: GridSquareProps) {
   return (
     active &&
     `
@@ -62,55 +77,6 @@ function getSquarePathIndex({ active, highlight, pathIndex }: SquareProps) {
   );
 }
 
-const Square = styled.div<SquareProps>`
-  ${(p) =>
-    p.highlight &&
-    css`
-      --border: ${cssVarsHighlight.border}px;
-      --size: ${cssVarsHighlight.size}px;
-    `}
-
-  ${getSquarePathIndex}
-
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: ${getSquareColor('var(--background)', 'var(--accent-darker)')};
-  width: var(--square);
-  height: var(--square);
-  font-size: 24px;
-  font-weight: 500;
-  position: relative;
-  z-index: ${({ active, spotlight }) =>
-    spotlight ? 'auto' : active ? 'auto' : '-3'};
-  background: ${({ highlight }) =>
-    highlight ? 'var(--accent)' : 'var(--background)'};
-  border: var(--border) solid ${getSquareColor('var(--accent)')};
-`;
-
-function getSquareColor(highlightColor: string, defaultColor = 'transparent') {
-  return ({ active, highlight, spotlight, hasDaemon }: SquareProps) => {
-    if (spotlight) {
-      return 'var(--primary)';
-    }
-
-    if (active) {
-      if (highlight) {
-        return highlightColor;
-      }
-
-      if (hasDaemon) {
-        return 'var(--accent)';
-      }
-
-      return 'var(--accent-dark)';
-    }
-
-    return defaultColor;
-  };
-}
-
 function getArrowBorderFor(d: GapDirection) {
   const o: GapOrientation =
     d === 'bottom' || d === 'top' ? 'horizontal' : 'vertical';
@@ -221,7 +187,7 @@ export const GridViewer = ({
         const hasDaemon = isActive && hasDaemonAttached(index);
 
         return (
-          <Square
+          <GridSquare
             key={s}
             active={isActive}
             hasDaemon={hasDaemon}
@@ -237,7 +203,7 @@ export const GridViewer = ({
               />
             )}
             {value}
-          </Square>
+          </GridSquare>
         );
       })}
     </GridWrapper>

diff --git a/src/electron/renderer/components/HistoryViewer.tsx b/src/electron/renderer/components/HistoryViewer.tsx
@@ -88,6 +88,7 @@ export const HistoryViewer = ({ entry, customResult }: HistoryViewerProps) => {
         <BufferSizeViewer
           bufferSize={bufferSize}
           result={result}
+          highlight={highlight}
           hasDaemonAttached={hasDaemonAttached}
           onHighlight={setHighlight}
         />

diff --git a/src/electron/renderer/components/Square.tsx b/src/electron/renderer/components/Square.tsx
@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+export interface SquareProps {
+  active: boolean;
+  highlight?: boolean;
+  spotlight?: boolean;
+  hasDaemon: boolean;
+}
+
+export function getSquareColor(
+  highlightColor: string,
+  defaultColor = 'transparent'
+) {
+  return ({ active, highlight, spotlight, hasDaemon }: SquareProps) => {
+    if (spotlight) {
+      return 'var(--primary)';
+    }
+
+    if (active) {
+      if (highlight) {
+        return highlightColor;
+      }
+
+      if (hasDaemon) {
+        return 'var(--accent)';
+      }
+
+      return 'var(--accent-dark)';
+    }
+
+    return defaultColor;
+  };
+}
+
+export const Square = styled.div<SquareProps>`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--square);
+  height: var(--square);
+  font-size: 24px;
+  font-weight: 500;
+  position: relative;
+  flex-shrink: 0;
+`;