feat: added some code to select/highlight a hex range (still draft)

package.json

@@ -25,11 +25,14 @@
     "@types/ramda": "^0.26.8",
     "@types/react": "16.8.14",
     "@types/react-dom": "16.8.4",
+    "@types/react-redux": "^7.1.1",
     "electron-is-dev": "^1.1.0",
     "ramda": "^0.26.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-redux": "^7.1.0",
     "react-scripts": "2.1.8",
+    "redux": "^4.0.2",
     "typescript": "^3.4.4"
   },
   "devDependencies": {

src/editor/HexEditor.tsx

@@ -8,6 +8,7 @@ import {
 import styled from 'styled-components'
 import hexThing from './neo.arch.dialog'
 import logo from '../pirate_flag.png'
+import { ItemSelection } from './ItemSelection';
 
 const HexEditorContainer = styled.div`
   background: #252526
@@ -44,10 +45,13 @@ export const HexEditor = (): React.ReactElement => {
     hexThing
   )
 
+  const piecesOfHex = hexLines.map(lines => ItemSelection.withMany<string>(lines))
+  const piecesOfAscii = asciiRepresentationOfHexLines.map(lines => ItemSelection.withMany<string>(lines))
+
   return (
     <HexEditorContainer>
       <OffsetPanel lines={offsetLines} />
-      <HexPanel lines={hexLines} />
+      <HexPanel lines={piecesOfHex} notifyChange={x => console.log(x)} />
       <TextPanel lines={asciiRepresentationOfHexLines} />
       <Logo>
         <LogoImg src={logo} alt="hexor" />

src/editor/ItemSelection.ts

@@ -0,0 +1,23 @@
+export interface IItemSelection<TItem> {
+    pieceOfData: TItem
+    selected: boolean
+}
+
+export class ItemSelection<TItem> implements IItemSelection<TItem> {
+    pieceOfData: TItem
+    selected: boolean
+
+    constructor(item: TItem, selected: boolean = false) {
+        this.selected = selected
+        this.pieceOfData = item
+    }
+
+    static with<TItem>(item: TItem, selected: boolean = false) : ItemSelection<TItem> {
+        return new ItemSelection<TItem>(item, selected)
+    }
+
+    static withMany<TItem>(items: TItem[], selected: boolean = false) : ItemSelection<TItem>[] {
+        return items.map(item => ItemSelection.with<TItem>(item, selected))
+    }
+}
+

src/editor/panel/hex/HexCell.tsx

@@ -1,8 +1,13 @@
 import styled from 'styled-components'
 
-export const HexCell = styled.span`
+interface IHexCellExtraProps {
+  selected: boolean
+}
+
+export const HexCell = styled.span<IHexCellExtraProps>`
   display: inline;
   white-space: pre;
   color: #fff;
   padding: 0 2px;
+  background-color: ${props => props.selected ? 'red' : 'transparent'}
 `

src/editor/panel/hex/HexGridCells.tsx

@@ -0,0 +1,41 @@
+import { ItemSelection } from "../../ItemSelection"
+import { HexCell } from "./HexCell"
+import React, { ReactElement, useState } from 'react'
+
+export interface IHexGridCellsExtraProps {
+    cells: ItemSelection<string>[]
+    lineIndex: number
+    notifyChange: (index: number) => void
+}
+
+const mouseUpEventHandler = 
+  (x: number, eventNotifier: ((index: number) => void),  setHex: React.Dispatch<React.SetStateAction<ItemSelection<string>[]>>) => 
+  (_: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+  setHex(hex => {
+    const newHex = [ ...hex ]
+    newHex[x] = ItemSelection.with<string>(hex[x].pieceOfData, true)
+    return newHex 
+  })
+
+  eventNotifier(x)
+}
+
+export const HexGridCells = ({ cells, lineIndex, notifyChange } : IHexGridCellsExtraProps) : ReactElement => { 
+    const [stateCells, setCells] = useState(cells)
+
+    return (
+        <>
+            {stateCells.map(
+                (column: ItemSelection<string>, secondLevel: number): JSX.Element => (
+                <HexCell
+                    key={`${lineIndex}-${secondLevel}`}
+                    selected={column.selected}
+                    onMouseUp={mouseUpEventHandler(secondLevel, notifyChange, setCells)}
+                >
+                    {column.pieceOfData}
+                </HexCell>
+                )
+            )}
+        </>
+    )
+}

src/editor/panel/hex/HexGridLine.tsx

@@ -0,0 +1,20 @@
+import styled from "styled-components"
+import { ItemSelection } from "../../ItemSelection"
+import { HexGridCells } from "./HexGridCells"
+import React, { ReactElement } from 'react'
+
+const HexDivAligned = styled.div`
+  text-align: left;
+`
+
+export interface IHexGridLineExtraProps {
+    index: number
+    line: ItemSelection<string>[]
+    notifyChange: (index: number) => void
+}
+
+export const HexGridLine = ({ index, line, notifyChange} : IHexGridLineExtraProps) : ReactElement =>  (
+    <HexDivAligned key={index}>
+        <HexGridCells cells={line} lineIndex={index} notifyChange={notifyChange}></HexGridCells>
+    </HexDivAligned>
+)

src/editor/panel/hex/HexGridLines.tsx

@@ -0,0 +1,18 @@
+import { HexGridLine } from './HexGridLine'
+import { ItemSelection } from '../../ItemSelection'
+import React, { ReactElement } from 'react'
+
+export interface IHexGridLinesExtraProps {
+    hex: ItemSelection<string>[][]
+    notifyChange: (index: number) => void
+}
+
+export const HexGridLines = ({ hex, notifyChange }: IHexGridLinesExtraProps) : ReactElement => (
+    <>
+        {hex.map(
+            (line: ItemSelection<string>[], index: number): JSX.Element => (
+                <HexGridLine key={index} index={index} line={line} notifyChange={notifyChange}></HexGridLine>
+            )
+        )}
+    </>
+)

src/editor/panel/hex/HexPanel.tsx

@@ -1,29 +1,27 @@
-import React from 'react'
-import { HexCell } from './HexCell'
+import React, { useRef, useState, useMemo } from 'react'
 import styled from 'styled-components'
+import { ItemSelection } from '../../ItemSelection'
+import { HexGridLines } from './HexGridLines'
 
 const HexContainer = styled.div`
   display: inline-block;
   vertical-align: top;
   padding: 0 0 0 10px;
 `
 
-const HexDivAligned = styled.div`
-  text-align: left;
-`
+export interface IHexPanelExtraProps {
+  lines: ItemSelection<string>[][] 
+  notifyChange: (index: number) => void
+}
+
+export const HexPanel = ({ lines, notifyChange }: IHexPanelExtraProps): React.ReactElement => {
+  let indexer = 0
+
+  const [hex, setHex] = useState<ItemSelection<string>[][]>(lines)
 
-export const HexPanel = (props: { lines: string[][] }): React.ReactElement => (
-  <HexContainer>
-    {props.lines.map(
-      (line: string[], firstLevel: number): JSX.Element => (
-        <HexDivAligned key={firstLevel}>
-          {line.map(
-            (column: string, secondLevel: number): JSX.Element => (
-              <HexCell key={`${firstLevel}-${secondLevel}`}>{column}</HexCell>
-            )
-          )}
-        </HexDivAligned>
-      )
-    )}
-  </HexContainer>
-)
+  return (
+    <HexContainer>
+      <HexGridLines hex={hex} notifyChange={notifyChange}></HexGridLines>
+    </HexContainer>
+  )
+}

src/editor/panel/text/TextPanel.tsx

@@ -6,20 +6,28 @@ const TextContainer = styled.div`
   color: #222;
   display: inline-block;
   vertical-align: top;
+  padding-left: 5px;
 `
 
 const TextDivAligned = styled.div`
   text-align: left;
 `
 
+let indexer = 0
+
 export const TextPanel = (props: { lines: string[][] }): React.ReactElement => (
   <TextContainer>
     {props.lines.map(
       (line: string[], firstLevel: number): JSX.Element => (
         <TextDivAligned key={firstLevel}>
           {line.map(
             (column: string, secondLevel: number): JSX.Element => (
-              <TextCell key={`${firstLevel}-${secondLevel}`}>{column}</TextCell>
+              <TextCell
+                id={`${indexer++}`}
+                key={`${firstLevel}-${secondLevel}`}
+              >
+                {column}
+              </TextCell>
             )
           )}
         </TextDivAligned>

src/index.tsx

@@ -3,8 +3,17 @@ import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
 import * as serviceWorker from './serviceWorker'
+import { Provider } from 'react-redux'
+import store from './redux/store'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(
+    <Provider store={store}>
+        <App />
+    </Provider>, 
+    rootElement
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/redux/reducers/index.ts

@@ -0,0 +1,3 @@
+import { combineReducers } from "redux";
+
+export default combineReducers({ });

src/redux/store.ts

@@ -0,0 +1,4 @@
+import { createStore } from "redux";
+import rootReducer from "./reducers";
+
+export default createStore(rootReducer);

yarn.lock

@@ -852,6 +852,13 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
+"@babel/runtime@^7.4.5":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.2.tgz#98f584f4d03be5d8142c77107ffaedee4d5956f1"
+  integrity sha512-9M29wrrP7//JBGX70+IrDuD1w4iOYhUGpJNMQJVNAXue+cFeFlMTqBECouIziXPUphlgrfjcfiEpGX4t0WGK4g==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.1.0", "@babel/template@^7.2.2", "@babel/template@^7.4.0":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.0.tgz#12474e9c077bae585c5d835a95c0b0b790c25c8b"
@@ -1075,6 +1082,14 @@
     "@svgr/plugin-svgo" "^4.0.3"
     loader-utils "^1.1.0"
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/jest-diff@*":
   version "20.0.1"
   resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-20.0.1.tgz#35cc15b9c4f30a18ef21852e255fdb02f6d59b89"
@@ -1127,6 +1142,16 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
+"@types/react-redux@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.1.tgz#eb01e89cf71cad77df9f442b819d5db692b997cb"
+  integrity sha512-owqNahzE8en/jR4NtrUJDJya3tKru7CIEGSRL/pVS84LtSCdSoT7qZTkrbBd3S4Lp11sAp+7LsvxIeONJVKMnw==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react@*", "@types/react@16.8.14":
   version "16.8.14"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.14.tgz#b561bfabeb8f60d12e6d4766367e7a9ae927aa18"
@@ -5138,6 +5163,13 @@ hoek@6.x.x:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-6.1.3.tgz#73b7d33952e01fe27a38b0457294b79dd8da242c"
   integrity sha512-YXXAAhmF9zpQbC7LEcREFtXfGq5K1fmd+4PHkBq8NUqmzW3G+Dq10bI/i0KucLRwss3YYFQ0fSfoxBZYiGUqtQ==
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
+  integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
+  dependencies:
+    react-is "^16.7.0"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -8679,7 +8711,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.5.4, prop-types@^15.6.2:
+prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8943,11 +8975,23 @@ react-error-overlay@^5.1.4:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.4.tgz#88dfb88857c18ceb3b9f95076f850d7121776991"
   integrity sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg==
 
-react-is@^16.6.0, react-is@^16.8.1:
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
+react-redux@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.0.tgz#72af7cf490a74acdc516ea9c1dd80e25af9ea0b2"
+  integrity sha512-hyu/PoFK3vZgdLTg9ozbt7WF3GgX5+Yn3pZm5/96/o4UueXA+zj08aiSC9Mfj2WtD1bvpIb3C5yvskzZySzzaw==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.2.4"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.8.6"
+
 react-scripts@2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-2.1.8.tgz#21195bb928b2c0462aa98b2d32edf7d034cff2a9"
@@ -9133,6 +9177,14 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+redux@^4.0.0, redux@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.2.tgz#597cc660a99f91412e31c96c3da10ed8ace0715d"
+  integrity sha512-oAiFLWYQhbpSvzjcVfgQ90MlZ0u6uDIHFK41Q0/BnCfjEg96SACzwUFwDVUKz/LP/SwJORGaFY8AM5wOB/zf0A==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 regenerate-unicode-properties@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.0.2.tgz#7b38faa296252376d363558cfbda90c9ce709662"
@@ -9155,6 +9207,11 @@ regenerator-runtime@^0.12.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
   integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
 
+regenerator-runtime@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
+  integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
+
 regenerator-transform@^0.13.4:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.4.tgz#18f6763cf1382c69c36df76c6ce122cc694284fb"
@@ -10269,6 +10326,11 @@ svgo@^1.0.0, svgo@^1.2.1:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
 symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"