-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add hex view * Fix JSON
- Loading branch information
Showing
10 changed files
with
200 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { asJson, KeynoteArchives, splitObjectsAs } from "keynote-archives"; | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| export interface ChunkJsonViewerProps { | ||
| data: Uint8Array; | ||
| } | ||
|
|
||
| export function ChunkJsonViewer({data}: ChunkJsonViewerProps) { | ||
| const [list, setList] = useState<string[]>(() => []); | ||
|
|
||
| useEffect(() => { | ||
| (async function() { | ||
| try{ | ||
| for await (const obj of splitObjectsAs(data, KeynoteArchives)) { | ||
| const jsons = obj.messages.map(v => asJson(v.data)); | ||
| setList(previous => [...previous, ...jsons]); | ||
| } | ||
| } catch(e) { | ||
| setList(['Error:'+(e as any['message'])]); | ||
| } | ||
| })(); | ||
| }, []); | ||
|
|
||
| return <div> | ||
| {list.map((v, i) => <pre key={i} className="font-mono text-xs">{v}</pre>)} | ||
| </div>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import clsx from "clsx"; | ||
| import { padStart } from "lodash"; | ||
| import { useMemo } from "react"; | ||
|
|
||
| export interface HexRegion { | ||
| startAddress: number; | ||
| length: number; | ||
| color: string; | ||
| } | ||
|
|
||
| export interface HexViewerProps { | ||
| startAddress: number; | ||
| data: Uint8Array; | ||
| regions: HexRegion[]; | ||
| } | ||
|
|
||
| export interface HexRowProps { | ||
| address: number; | ||
| data: number[]; | ||
| from: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7; | ||
| to: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7; | ||
| } | ||
|
|
||
| export function HexRow({ address, data, from, to }: HexRowProps) { | ||
| if(data.length !== 8) { | ||
| data = [...data, ...new Array(8 - data.length).fill(0)]; | ||
| } | ||
| return ( | ||
| <div className="flex flex-row"> | ||
| <span className="font-mono text-xs"> | ||
| 0x{address.toString(16).padStart(6, "0")} | ||
| </span> | ||
| {data.map((d, index) => { | ||
| return ( | ||
| <span | ||
| key={index} | ||
| className={clsx("font-mono text-xs block w-fit", { | ||
| "opacity-0": index < from || index > to, | ||
| })} | ||
| > | ||
| {d.toString(16).padStart(2, "0")} | ||
| | ||
| </span> | ||
| ); | ||
| })} | ||
| {data.map((d, index) => { | ||
| return ( | ||
| <span | ||
| key={index} | ||
| className={clsx("font-mono text-xs block w-fit", { | ||
| "opacity-0": index < from || index > to, | ||
| })} | ||
| > | ||
| {d < 32 || d > 126 ? "." : String.fromCharCode(d)} | ||
| </span> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function HexViewer({ startAddress, data }: HexViewerProps) { | ||
| //Address (2+6, 0x123456) | Hex (8x2) | ASCII (8) | ||
| const rows = useMemo<HexRowProps[]>(() => { | ||
| const rows: HexRowProps[] = []; | ||
| const mod = startAddress % 8; | ||
| let address = startAddress - mod; | ||
| if (mod > 0) { | ||
| const rowData = new Array<number>(8).fill(0); | ||
| for (let i = mod; i < 8; i++) { | ||
| rowData[i] = data[i - mod]; | ||
| } | ||
| rows.push({ | ||
| address, | ||
| data: rowData, | ||
| from: mod as any, | ||
| to: 7, | ||
| }); | ||
| address += 8; | ||
| } | ||
| for (let i = 0; i < data.length; i += 8) { | ||
| const slice = [...data.slice(i + mod, i + 8)]; | ||
| rows.push({ | ||
| address, | ||
| data: slice, | ||
| from: 0, | ||
| to: (slice.length-1) as any, | ||
| }); | ||
| address += 8; | ||
| } | ||
| return rows; | ||
| }, [startAddress, data]); | ||
| return ( | ||
| <div className="w-full"> | ||
| {rows.map((row) => ( | ||
| <HexRow key={row.address} {...row} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,38 @@ | ||
| import { Fragment} from 'react' | ||
| import { Fragment, useEffect } from "react"; | ||
| import { ChunkJsonViewer } from "./ChunkJsonViewer"; | ||
| import { HexViewer } from "./HexViewer"; | ||
| import { IwaFileState } from "./statemachine/states"; | ||
|
|
||
| export interface IWorkArchiveInspectorProps { | ||
| file: IwaFileState; | ||
| onToggle: () => void; | ||
| } | ||
|
|
||
| export function IWorkArchiveInspector({file}: IWorkArchiveInspectorProps) { | ||
| export function IWorkArchiveInspector({ file, onToggle }: IWorkArchiveInspectorProps) { | ||
| const { chunks } = file; | ||
| return <> | ||
| {chunks.map(c => <div>0x{c.startAddress.toString(16)}:</div>).reduce((a,b) => <Fragment>{[a, <hr className='my-2'/>, b]}</Fragment>)} | ||
| </> | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {!file.open && <button onClick={onToggle}>Open</button>} | ||
| {file.open && chunks | ||
| .map((c, index) => ( | ||
| <Fragment key={index}> | ||
| <div className="font-mono text-xs"> | ||
| Chunk {index + 1} @ 0x{c.startAddress.toString(16)}: | ||
| </div> | ||
| <div className="grid"> | ||
| <div className="grid col-start-1 col-end-2"> | ||
| <HexViewer startAddress={c.startAddress} data={c.data} regions={[]}/> | ||
| </div> | ||
| <div className="grid col-start-2 col-end-3"> | ||
| <ChunkJsonViewer data={c.data}/> | ||
| </div> | ||
| </div> | ||
| </Fragment> | ||
| )) | ||
| .reduce((a, b) => ( | ||
| <Fragment>{[a, <hr className="my-2" />, b]}</Fragment> | ||
| ))} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters