demostf/inspector
1
0
Fork 0
mirror of https://codeberg.org/demostf/inspector.git synced 2026-06-03 10:04:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

highlight selected

Browse source
This commit is contained in:
Robin Appelman 2021-08-01 16:27:44 +02:00
commit 8e4b5f9a61
3 changed files with 30 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

3
www/index.html
View file

@ -46,6 +46,9 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
div.prop_row.active {
background: #ccc;
}
</style> </style>
</head> </head>
<body> <body>

5
www/src/index.tsx
View file

@ -12,6 +12,7 @@ interface AppState {
prop_names: Map<number, { table: String, prop: String }>, prop_names: Map<number, { table: String, prop: String }>,
class_names: Map<number, String>, class_names: Map<number, String>,
active: Packet | null, active: Packet | null,
activeIndex: number | null,
} }
class App extends Component<{}, AppState> { class App extends Component<{}, AppState> {
@ -22,6 +23,7 @@ class App extends Component<{}, AppState> {
prop_names: new Map(), prop_names: new Map(),
class_names: new Map(), class_names: new Map(),
active: null, active: null,
activeIndex: null,
} }
load(data: ArrayBuffer) { load(data: ArrayBuffer) {
@ -85,7 +87,8 @@ class App extends Component<{}, AppState> {
return ( return (
<> <>
<PacketTable packets={this.state.packets} class_names={this.state.class_names} <PacketTable packets={this.state.packets} class_names={this.state.class_names}
prop_names={this.state.prop_names} onClick={active => this.setState({active})}/> activeIndex={this.state.activeIndex}
prop_names={this.state.prop_names} onClick={(activeIndex, active) => this.setState({activeIndex, active})}/>
{active} {active}
</> </>
) )

66
www/src/table.tsx
View file

@ -6,15 +6,17 @@ interface TableProps {
packets: Packet[], packets: Packet[],
prop_names: Map<number, { table: String, prop: String }>, prop_names: Map<number, { table: String, prop: String }>,
class_names: Map<number, String>, class_names: Map<number, String>,
onClick: (packet: Packet) => void, onClick: (i: number, packet: Packet) => void,
activeIndex: number | null,
} }
export function PacketTable({packets, prop_names, class_names, onClick}: TableProps) { export function PacketTable({packets, prop_names, class_names, onClick, activeIndex}: TableProps) {
const Row: (props: { index: number, style: CSSProperties }) => any = ({index, style}) => ( const Row: (props: { index: number, style: CSSProperties }) => any = ({index, style}) => (
<PacketRowMemo style={style} key={index} i={index} packet={packets[index]} class_names={class_names} <div key={index} onClick={() => {
prop_names={prop_names} onClick(index, packets[index])
onClick={onClick} }} style={style} className={(activeIndex == index ? 'active ' : '') + 'prop_row'}>
expanded={false}/> <PacketRow packet={packets[index]}/>
</div>
); );
return ( return (
@ -27,67 +29,47 @@ export function PacketTable({packets, prop_names, class_names, onClick}: TablePr
} }
interface RowProps { interface RowProps {
style: CSSProperties,
i: number,
packet: Packet, packet: Packet,
prop_names: Map<number, { table: String, prop: String }>,
class_names: Map<number, String>,
expanded: boolean,
onClick: (packet: Packet) => void,
} }
export function PacketRow({style, i, packet, onClick}: RowProps) { export function PacketRow({packet}: RowProps) {
switch (packet.type) { switch (packet.type) {
case "Sigon": case "Sigon":
case "Message": case "Message":
return <div onClick={() => { return <>
onClick(packet)
}} style={style} key={`packet-${i}`}>
<span className="tick">{packet.tick}</span> <span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span> <span className="type">{packet.type}</span>
</div> </>
case "SyncTick": case "SyncTick":
return <div onClick={() => { return <>
onClick(packet)
}} style={style} key={`packet-${i}`}>
<span className="tick">{packet.tick}</span> <span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span> <span className="type">{packet.type}</span>
</div>; </>;
case "ConsoleCmd": case "ConsoleCmd":
return <div onClick={() => { return <>
onClick(packet)
}} style={style} key={`packet-${i}`}>
<span className="tick">{packet.tick}</span> <span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span> <span className="type">{packet.type}</span>
</div>; </>;
case "UserCmd": case "UserCmd":
return <div onClick={() => { return <>
onClick(packet)
}} style={style} key={`packet-${i}`}>
<span className="tick">{packet.tick}</span> <span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span> <span className="type">{packet.type}</span>
</div>; </>;
case "DataTables": case "DataTables":
return <div onClick={() => { return <>
onClick(packet)
}} style={style} key={`packet-${i}`}>
<span className="tick">{packet.tick}</span> <span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span> <span className="type">{packet.type}</span>
</div>; </>;
case "Stop": case "Stop":
return <div onClick={() => { return <>
onClick(packet)
}} style={style} key={`packet-${i}`}>
<span className="tick">{packet.tick}</span> <span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span> <span className="type">{packet.type}</span>
</div>; </>;
case "StringTables": case "StringTables":
return <div onClick={() => { return <>
onClick(packet)
}} style={style} key={`packet-${i}`}>
<span className="tick">{packet.tick}</span> <span className="tick">{packet.tick}</span>
<span className="type">{packet.type}</span> <span className="type">{packet.type}</span>
</div>; </>;
} }
} }
@ -127,8 +109,6 @@ export function PacketDetails({packet, prop_names, class_names}: DetailProps) {
} }
} }
const PacketRowMemo = React.memo(PacketRow, (a, b) => a.i == b.i);
function messageInfoText(msg: Message, prop_names: Map<number, { table: String, prop: String }>, class_names: Map<number, String>) { function messageInfoText(msg: Message, prop_names: Map<number, { table: String, prop: String }>, class_names: Map<number, String>) {
switch (msg.type) { switch (msg.type) {
case "Print": case "Print":