Skip to content

Commit

Permalink
biome format
Browse files Browse the repository at this point in the history
  • Loading branch information
@luncheon
luncheon committed Dec 28, 2024
1 parent 9717d36 commit 4417954
Show file tree
Hide file tree
Showing 8 changed files with 169 additions and 170 deletions.
1 change: 0 additions & 1 deletion biome.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
},
"style": {
"noNonNullAssertion": "off",
"useImportType": "off",
"useTemplate": "off"
},
"suspicious": {
Expand Down
60 changes: 30 additions & 30 deletions src/components/Content.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,84 @@
import { createDxfFileString, DxfRecordReadonly, getGroupCodeValue, getGroupCodeValues } from '@dxfom/dxf'
import { Match, Switch } from 'solid-js'
import { For } from 'solid-js/web'
import 'svg-pan-zoom-container'
import { activeSectionName, dxf } from '../state'
import { DataTable } from './DataTable'
import { Preview } from './Preview'
import { createDxfFileString, type DxfRecordReadonly, getGroupCodeValue, getGroupCodeValues } from "@dxfom/dxf";
import { Match, Switch } from "solid-js";
import { For } from "solid-js/web";
import "svg-pan-zoom-container";
import { activeSectionName, dxf } from "../state";
import { DataTable } from "./DataTable";
import { Preview } from "./Preview";

const collectCodes = (records: readonly DxfRecordReadonly[]) => {
const codes: number[] = []
const codes: number[] = [];
for (const record of records) {
for (const [code] of record) {
codes.includes(code) || codes.push(code)
codes.includes(code) || codes.push(code);
}
}
return codes.sort((a, b) => a - b)
}
return codes.sort((a, b) => a - b);
};

export const Content = () => (
<Switch>
<Match when={!activeSectionName()}>
{/* biome-ignore lint/complexity/noUselessFragments: */}
<></>
</Match>
<Match when={activeSectionName() === 'PREVIEW'}>
<Match when={activeSectionName() === "PREVIEW"}>
<Preview />
</Match>
<Match when={activeSectionName() === 'DXF'}>
<Match when={activeSectionName() === "DXF"}>
<textarea readonly class="w-full h-full resize-none">
{createDxfFileString(dxf())}
</textarea>
</Match>
<Match when={activeSectionName() === 'JSON'}>
<Match when={activeSectionName() === "JSON"}>
<textarea readonly class="w-full h-full resize-none">
{JSON.stringify(dxf(), undefined, 2)}
</textarea>
</Match>
<Match when={activeSectionName() === 'HEADER'}>
<Match when={activeSectionName() === "HEADER"}>
<DataTable
columns={[9, ...collectCodes(Object.values(dxf().HEADER!))]}
records={Object.entries(dxf().HEADER!)}
tdSelector={groupCode =>
groupCode === 9 ? ([headerName]) => headerName : ([, record]) => getGroupCodeValues(record, groupCode).join('\n')
groupCode === 9 ? ([headerName]) => headerName : ([, record]) => getGroupCodeValues(record, groupCode).join("\n")
}
/>
</Match>
<Match when={activeSectionName() === 'CLASSES'}>
<Match when={activeSectionName() === "CLASSES"}>
<DataTable
columns={[1, ...collectCodes(Object.values(dxf().CLASSES!))]}
records={Object.entries(dxf().CLASSES!)}
tdSelector={groupCode =>
groupCode === 1 ? ([className]) => className : ([, record]) => getGroupCodeValues(record, groupCode).join('\n')
groupCode === 1 ? ([className]) => className : ([, record]) => getGroupCodeValues(record, groupCode).join("\n")
}
/>
</Match>
<Match when={activeSectionName() === 'TABLES'}>
<Match when={activeSectionName() === "TABLES"}>
<DataTable
columns={['TABLE', ...collectCodes(Object.values(dxf().TABLES!).flat())]}
columns={["TABLE", ...collectCodes(Object.values(dxf().TABLES!).flat())]}
records={Object.entries(dxf().TABLES!).flatMap(([name, records]) => records.map(record => [name, record] as const))}
tdSelector={groupCode =>
groupCode === 'TABLE' ? ([name]) => name : ([, record]) => getGroupCodeValues(record, groupCode).join('\n')
groupCode === "TABLE" ? ([name]) => name : ([, record]) => getGroupCodeValues(record, groupCode).join("\n")
}
/>
</Match>
<Match when={activeSectionName() === 'BLOCKS'}>
<Match when={activeSectionName() === "BLOCKS"}>
<DataTable
columns={['BLOCK', ...collectCodes(Object.values(dxf().BLOCKS!).flat())]}
columns={["BLOCK", ...collectCodes(Object.values(dxf().BLOCKS!).flat())]}
records={Object.entries(dxf().BLOCKS!).flatMap(([name, records]) => records.map(record => [name, record] as const))}
tdSelector={groupCode =>
groupCode === 'BLOCK' ? ([name]) => name : ([, record]) => getGroupCodeValues(record, groupCode).join('\n')
groupCode === "BLOCK" ? ([name]) => name : ([, record]) => getGroupCodeValues(record, groupCode).join("\n")
}
/>
</Match>
<Match when={activeSectionName() === 'ENTITIES'}>
<Match when={activeSectionName() === "ENTITIES"}>
<DataTable
columns={collectCodes(dxf().ENTITIES!)}
records={dxf().ENTITIES!}
tdSelector={groupCode => record => getGroupCodeValues(record, groupCode).join('\n')}
tdSelector={groupCode => record => getGroupCodeValues(record, groupCode).join("\n")}
/>
</Match>
<Match when={activeSectionName() === 'OBJECTS'}>
<Match when={activeSectionName() === "OBJECTS"}>
<section class="h-full overflow-auto px-1em py-0.5em">
<For each={dxf().OBJECTS}>
{record => [
Expand All @@ -99,20 +99,20 @@ export const Content = () => (
</For>
</section>
</Match>
<Match when={activeSectionName() === 'ACDSDATA'}>
<Match when={activeSectionName() === "ACDSDATA"}>
<section class="h-full overflow-auto p-1em">
<For each={dxf().ACDSDATA}>
{records => (
<div class="mb-1em">
<DataTable
columns={collectCodes(records)}
records={records}
tdSelector={groupCode => record => getGroupCodeValues(record, groupCode).join('\n')}
tdSelector={groupCode => record => getGroupCodeValues(record, groupCode).join("\n")}
/>
</div>
)}
</For>
</section>
</Match>
</Switch>
)
);
66 changes: 33 additions & 33 deletions src/components/DataTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,63 @@
import Clusterize from 'clusterize.js'
import 'clusterize.js/clusterize.css'
import { createEffect, createMemo, For, JSX } from 'solid-js'
import { filteringText } from '../state'
import Clusterize from "clusterize.js";
import "clusterize.js/clusterize.css";
import { createEffect, createMemo, For, type JSX } from "solid-js";
import { filteringText } from "../state";

interface ClusterizedTableOptions<Column extends string | number, RecordData> {
columns: readonly Column[]
records: readonly RecordData[]
tdSelector: (column: Column) => (record: RecordData) => string
columns: readonly Column[];
records: readonly RecordData[];
tdSelector: (column: Column) => (record: RecordData) => string;
}

const tdWrap = (cell: string) => (cell.endsWith('</td>') ? cell : `<td>${cell}</td>`)
const tdWrap = (cell: string) => (cell.endsWith("</td>") ? cell : `<td>${cell}</td>`);

export const DataTable: <C extends string | number, T>(options: ClusterizedTableOptions<C, T>) => JSX.Element = ({
columns,
records,
tdSelector,
}) => {
let scrollHead: HTMLDivElement | undefined
const tdSelectors = columns.map(column => tdSelector(column))
const allRows = createMemo(() => records.map(record => `<tr>${tdSelectors.map(selector => tdWrap(selector(record))).join('')}</tr>`))
let scrollHead: HTMLDivElement | undefined;
const tdSelectors = columns.map(column => tdSelector(column));
const allRows = createMemo(() => records.map(record => `<tr>${tdSelectors.map(selector => tdWrap(selector(record))).join("")}</tr>`));
const allRowsToSearch = createMemo(() =>
records.map(record => tdSelectors.map(selector => selector(record)?.toLowerCase() ?? '').join('\n')),
)
records.map(record => tdSelectors.map(selector => selector(record)?.toLowerCase() ?? "").join("\n")),
);
const filteredRows = createMemo(() => {
const text = filteringText().toLowerCase()
return text ? allRows().filter((_, i) => allRowsToSearch()[i].includes(text)) : allRows()
})
let element: HTMLDivElement | undefined
let clusterize: Clusterize | undefined
const text = filteringText().toLowerCase();
return text ? allRows().filter((_, i) => allRowsToSearch()[i].includes(text)) : allRows();
});
let element: HTMLDivElement | undefined;
let clusterize: Clusterize | undefined;
createEffect(() => {
if (clusterize) {
clusterize.update(filteredRows())
return
clusterize.update(filteredRows());
return;
}
if (!element) {
return
return;
}
const headRow = element.getElementsByTagName('tr')[0]
const tbody = element.getElementsByTagName('tbody')[0]
const headRow = element.getElementsByTagName("tr")[0];
const tbody = element.getElementsByTagName("tbody")[0];
if (!headRow || !tbody) {
return
return;
}
clusterize = new Clusterize({
scrollElem: element.getElementsByClassName('clusterize-scroll')[0] as HTMLElement,
scrollElem: element.getElementsByClassName("clusterize-scroll")[0] as HTMLElement,
contentElem: tbody,
rows: filteredRows(),
callbacks: {
clusterChanged() {
const bodyRow = tbody?.querySelector('tr:not(.clusterize-extra-row)') as HTMLTableRowElement | undefined
if (!bodyRow || bodyRow.classList.contains('clusterize-no-data')) {
return
const bodyRow = tbody?.querySelector("tr:not(.clusterize-extra-row)") as HTMLTableRowElement | undefined;
if (!bodyRow || bodyRow.classList.contains("clusterize-no-data")) {
return;
}
for (let i = 0; i < headRow.cells.length; i++) {
headRow.cells[i].style.width = `${bodyRow.cells[i].offsetWidth}px`
headRow.cells[i].style.width = `${bodyRow.cells[i].offsetWidth}px`;
}
},
},
})
})
});
});
return (
<div ref={element} class="clusterize">
<div ref={scrollHead} class="clusterize-header-scroll">
Expand All @@ -75,5 +75,5 @@ export const DataTable: <C extends string | number, T>(options: ClusterizedTable
</table>
</div>
</div>
)
}
);
};
10 changes: 5 additions & 5 deletions src/components/Navigation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { For, Show } from 'solid-js'
import { activeSectionName, dxf, filteringText, setActiveSectionName, setFilteringText } from '../state'
import { For, Show } from "solid-js";
import { activeSectionName, dxf, filteringText, setActiveSectionName, setFilteringText } from "../state";

const NavigationItem = ({ sectionName }: { sectionName: string }) => (
<label>
Expand All @@ -15,11 +15,11 @@ const NavigationItem = ({ sectionName }: { sectionName: string }) => (
/>
<span>{sectionName}</span>
</label>
)
);

export const Navigation = () => (
<Show when={activeSectionName()}>
<Show when={['HEADER', 'CLASSES', 'TABLES', 'BLOCKS', 'ENTITIES'].includes(activeSectionName())}>
<Show when={["HEADER", "CLASSES", "TABLES", "BLOCKS", "ENTITIES"].includes(activeSectionName())}>
<input
placeholder="filter"
value={filteringText()}
Expand All @@ -33,4 +33,4 @@ export const Navigation = () => (
<NavigationItem sectionName="JSON" />
<For each={Object.keys(dxf())}>{sectionName => <NavigationItem sectionName={sectionName} />}</For>
</Show>
)
);
Loading

0 comments on commit 4417954

Please sign in to comment.