chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

extracted selection logic to own feature and anhanched with range selection

Browse source
This commit is contained in:
Chris Kruining 2024-10-16 13:37:26 +02:00
parent 40f46eba1d
commit 1a963a665e
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
15 changed files with 295 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app.config.ts
View file

@ -4,7 +4,25 @@ import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
vite: {
plugins: [
VitePWA({ registerType: 'autoUpdate' }),
VitePWA({
mode: 'development',
// srcDir: 'src',
// filename: 'claims-sw.ts',
strategies: 'injectManifest',
registerType: 'autoUpdate',
base: '/',
manifest: {
name: 'Translation tool',
short_name: 'T_tool',
theme_color: '#f0f',
icons: [],
},
devOptions: {
enabled: true,
type: 'module',
navigateFallback: 'index.html',
},
}),
]
}
});

1
src/app.css
View file

@ -78,6 +78,7 @@ body {
grid-auto-flow: column;
justify-content: start;
position: relative;
z-index: 10;
gap: .5em;
padding-inline-start: 1em;

10
src/components/filetree.tsx
View file

@ -1,7 +1,7 @@
import { Accessor, Component, createContext, createSignal, For, JSX, Show, useContext } from "solid-js";
import css from "./filetree.module.css";
import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
import { SelectionProvider, selectable } from "~/features/selectable";
import css from "./filetree.module.css";
export interface FileEntry {
name: string;
@ -45,15 +45,15 @@ interface TreeContextType {
const TreeContext = createContext<TreeContextType>();
export const Tree: Component<{ entries: Entry[], children: (file: Accessor<FileEntry>) => JSX.Element, open: TreeContextType['open'] }> = (props) => {
const [selection, setSelection] = createSignal();
export const Tree: Component<{ entries: Entry[], children: (file: Accessor<FileEntry>) => JSX.Element, open?: TreeContextType['open'] }> = (props) => {
const [selection, setSelection] = createSignal<object[]>([]);
// createEffect(() => {
// console.log(selection());
// console.log(selection());
// });
const context = {
open: props.open,
open: props.open ?? (() => { }),
// open(file: File) {
// console.log(`open ${file.name}`)
// },

4
src/components/sidebar.module.css
View file

@ -15,6 +15,10 @@
overflow: auto clip;
}
&.open > .content {
inline-size: max-content;
}
&.closed > .content {
inline-size: 0;
}

12
src/components/sidebar.tsx
View file

@ -1,13 +1,15 @@
import { TbLayoutSidebarLeftCollapse, TbLayoutSidebarLeftExpand } from "solid-icons/tb";
import { createMemo, createSignal, ParentComponent, Show } from "solid-js";
import { createMemo, createSignal, ParentComponent, Show, splitProps } from "solid-js";
import { Dynamic } from "solid-js/web";
import css from "./sidebar.module.css";
export const Sidebar: ParentComponent<{ as?: string, open?: boolean, name?: string }> = (props) => {
const [open, setOpen] = createSignal(props.open ?? true);
const name = createMemo(() => props.name ?? 'sidebar');
export const Sidebar: ParentComponent<{ as?: string, open?: boolean, name?: string } & Record<string, any>> = (props) => {
const [local, forwarded] = splitProps(props, ['as', 'open', 'name', 'class']);
return <Dynamic component={props.as ?? 'div'} class={`${css.root} ${open() ? css.open : css.closed}`}>
const [open, setOpen] = createSignal(local.open ?? true);
const name = createMemo(() => local.name ?? 'sidebar');
return <Dynamic component={local.as ?? 'div'} class={`${css.root} ${open() ? css.open : css.closed} ${local.class}`} {...forwarded}>
<button
role="button"
onclick={() => setOpen(o => !o)}

12
src/features/file/grid.css → src/features/file/grid.module.css
View file

@ -38,19 +38,19 @@
}
}
& > :is(header, main, footer) {
& :is(.header, .main, .footer) {
grid-column: span calc(2 + var(--columns));
display: grid;
grid-template-columns: subgrid;
}
& > header {
& .header {
position: sticky;
inset-block-start: 0;
background-color: inherit;
background-color: var(--surface-1);
}
& label {
& .row {
--bg: var(--text);
--alpha: 0;
grid-column: span calc(2 + var(--columns));
@ -72,7 +72,7 @@
border-block-start-color: transparent;
}
&:has(+ label > .cell > :checked) {
&:has(+ .row > .cell > :checked) {
border-block-end-color: transparent;
}
}
@ -102,7 +102,7 @@
}
& > label > .cell > span {
& > .row > .cell > span {
padding-inline-start: calc(var(--depth) * 1em);
}
}

151
src/features/file/grid.tsx
View file

@ -1,6 +1,9 @@
import { Component, createContext, createEffect, createMemo, For, ParentComponent, Show, useContext } from "solid-js";
import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
import { createStore, produce } from "solid-js/store";
import './grid.css';
import { SelectionProvider, useSelection, selectable } from "../selectable";
import css from './grid.module.css';
selectable // prevents removal of import
const debounce = <T extends (...args: any[]) => void>(callback: T, delay: number): T => {
let handle: ReturnType<typeof setTimeout> | undefined;
@ -17,66 +20,19 @@ const debounce = <T extends (...args: any[]) => void>(callback: T, delay: number
interface Leaf extends Record<string, string> { }
export interface Entry extends Record<string, Entry | Leaf> { }
export interface SelectionContextType {
rowCount(): number;
selection(): string[];
isSelected(key: string): boolean,
selectAll(select: boolean): void;
select(key: string, select: boolean): void;
}
export interface GridContextType {
rows: Record<string, { [lang: string]: { original: string, value: string } }>;
selection: SelectionContextType;
selection: Accessor<object[]>;
mutate(prop: string, lang: string, value: string): void;
}
const SelectionContext = createContext<SelectionContextType>();
const GridContext = createContext<GridContextType>();
const isLeaf = (entry: Entry | Leaf): entry is Leaf => Object.values(entry).some(v => typeof v === 'string');
const useSelection = () => useContext(SelectionContext)!;
const useGrid = () => useContext(GridContext)!;
const SelectionProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: SelectionContextType) => any }> = (props) => {
const [state, setState] = createStore<{ selection: string[] }>({ selection: [] });
const rowKeys = createMemo(() => {
return Array.from(props.rows?.keys());
});
const context = {
rowCount() {
return rowKeys().length;
},
selection() {
return state.selection;
},
isSelected(key: string) {
return state.selection.includes(key);
},
selectAll(selected: boolean) {
setState('selection', selected ? rowKeys() : []);
},
select(key: string, select: true) {
setState('selection', selection => {
if (select) {
return [...selection, key];
}
return selection.toSpliced(selection.indexOf(key), 1);
});
},
};
createEffect(() => {
props.context?.(context)
});
return <SelectionContext.Provider value={context}>
{props.children}
</SelectionContext.Provider>;
};
const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
const [selection, setSelection] = createSignal<object[]>([]);
const [state, setState] = createStore<{ rows: GridContextType['rows'], numberOfRows: number }>({
rows: {},
numberOfRows: 0,
@ -90,13 +46,14 @@ const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { valu
setState('rows', Object.fromEntries(rows));
});
createEffect(() => {
setState('numberOfRows', Object.keys(state.rows).length);
});
const ctx: GridContextType = {
rows: state.rows,
selection: undefined!,
selection,
mutate(prop: string, lang: string, value: string) {
setState('rows', produce(rows => {
@ -116,13 +73,13 @@ const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { valu
});
return <GridContext.Provider value={ctx}>
<SelectionProvider rows={props.rows} context={(selction) => ctx.selection = selction}>
<SelectionProvider selection={setSelection} multiSelect>
{props.children}
</SelectionProvider>
</GridContext.Provider>;
};
export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
export const Grid: Component<{ class?: string, columns: string[], rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
const columnCount = createMemo(() => props.columns.length - 1);
const root = createMemo<Entry>(() => {
return props.rows
@ -149,11 +106,11 @@ export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: str
}, {});
});
return <section class="table" style={{ '--columns': columnCount() }}>
return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
<GridProvider rows={props.rows} context={props.context}>
<Head headers={props.columns} />
<main>
<main class={css.main}>
<Row entry={root()} />
</main>
</GridProvider>
@ -163,18 +120,18 @@ export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: str
const Head: Component<{ headers: string[] }> = (props) => {
const context = useSelection();
return <header>
<div class="cell">
return <header class={css.header}>
<div class={css.cell}>
<input
type="checkbox"
checked={context.selection().length > 0 && context.selection().length === context.rowCount()}
indeterminate={context.selection().length !== 0 && context.selection().length !== context.rowCount()}
on:input={(e: InputEvent) => context.selectAll(e.target.checked)}
checked={context.selection().length > 0 && context.selection().length === context.length()}
indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
/>
</div>
<For each={props.headers}>{
header => <span class="cell">{header}</span>
header => <span class={css.cell}>{header}</span>
}</For>
</header>;
};
@ -189,48 +146,24 @@ const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
const k = path.join('.');
const context = useSelection();
const resize = (element: HTMLElement) => {
element.style.blockSize = `1px`;
element.style.blockSize = `${11 + element.scrollHeight}px`;
};
const mutate = debounce((element: HTMLTextAreaElement) => {
const [prop, lang] = element.name.split(':');
grid.mutate(prop, lang, element.value.trim())
}, 300);
const onKeyUp = (e: KeyboardEvent) => {
const element = e.target as HTMLTextAreaElement;
resize(element);
mutate(element);
};
const isSelected = context.isSelected(k);
return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
<label for={k}>
<div class="cell">
<input type="checkbox" id={k} checked={context.isSelected(k)} on:input={(e) => context.select(k, e.target.checked)} />
<div class={css.row} use:selectable={{ value, key: k }}>
<div class={css.cell}>
<input type="checkbox" checked={isSelected()} oninput={() => context.select([k], { append: true })} />
</div>
<div class="cell">
<div class={css.cell}>
<span style={{ '--depth': path.length - 1 }}>{key}</span>
</div>
<For each={values}>{
([lang, value]) => <div class="cell">
<textarea
value={value}
lang={lang}
placeholder={lang}
name={`${k}:${lang}`}
spellcheck
wrap="soft"
on:keyup={onKeyUp}
/>
([lang, value]) => <div class={css.cell}>
<TextArea key={k} value={value} lang={lang} oninput={(e) => grid.mutate(k, lang, e.data ?? '')} />
</div>
}</For>
</label>
</div>
</Show>;
}
}</For>
@ -242,4 +175,34 @@ const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props)
<Row entry={props.entry} path={props.path} />
</details>;
};
const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => {
const resize = (element: HTMLElement) => {
element.style.blockSize = `1px`;
element.style.blockSize = `${11 + element.scrollHeight}px`;
};
const mutate = debounce((element: HTMLTextAreaElement) => {
props.oninput?.(new InputEvent('input', {
data: element.value.trim(),
}))
}, 300);
const onKeyUp = (e: KeyboardEvent) => {
const element = e.target as HTMLTextAreaElement;
resize(element);
mutate(element);
};
return <textarea
value={props.value}
lang={props.lang}
placeholder={props.lang}
name={`${props.key}:${props.lang}`}
spellcheck
wrap="soft"
onkeyup={onKeyUp}
/>
};

279
src/features/selectable/index.tsx
View file

@ -1,27 +1,41 @@
import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, onCleanup, onMount, ParentComponent, useContext } from "solid-js";
import { createStore, produce } from "solid-js/store";
import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, onCleanup, onMount, ParentComponent, Setter, Signal, useContext } from "solid-js";
import { createStore } from "solid-js/store";
import { isServer } from "solid-js/web";
import css from "./index.module.css";
export interface SelectionContextType {
selection(): object[];
select(selection: string[], options?: Partial<{ append: boolean }>): void;
selectAll(): void;
clear(): void;
isSelected(key: string): Accessor<boolean>;
add(key: string, value: object, element: HTMLElement): void;
}
export type SelectionHandler = (selection: object[]) => any;
enum Modifier {
None = 0,
Shift = 1 << 0,
Control = 1 << 1,
}
const SelectionContext = createContext<SelectionContextType>();
enum SelectionMode {
Normal,
Replace,
Append,
Toggle,
}
const useSelection = () => {
export interface SelectionContextType {
readonly selection: Accessor<object[]>;
readonly length: Accessor<number>;
select(selection: string[], options?: Partial<{ mode: SelectionMode }>): void;
selectAll(): void;
clear(): void;
isSelected(key: string): Accessor<boolean>;
}
interface InternalSelectionContextType {
readonly latest: Signal<HTMLElement | undefined>,
readonly modifier: Signal<Modifier>,
readonly selectables: Signal<HTMLElement[]>,
add(key: string, value: object, element: HTMLElement): void;
}
export type SelectionHandler = (selection: object[]) => any;
const SelectionContext = createContext<SelectionContextType>();
const InternalSelectionContext = createContext<InternalSelectionContextType>();
export const useSelection = () => {
const context = useContext(SelectionContext);
if (context === undefined) {
@ -30,24 +44,45 @@ const useSelection = () => {
return context;
};
const useInternalSelection = () => useContext(InternalSelectionContext)!;
interface State {
selection: string[],
data: { key: string, value: Accessor<any>, element: HTMLElement }[]
selection: string[];
data: { key: string, value: Accessor<any>, element: WeakRef<HTMLElement> }[];
}
export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler }> = (props) => {
export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler, multiSelect?: true }> = (props) => {
const [state, setState] = createStore<State>({ selection: [], data: [] });
const selection = createMemo(() => state.data.filter(({ key }) => state.selection.includes(key)));
const length = createMemo(() => state.data.length);
createEffect(() => {
props.selection?.(selection().map(({ value }) => value()));
});
const context = {
const context: SelectionContextType = {
selection,
select(selection: string[]) {
setState('selection', selection);
length,
select(selection, { mode = SelectionMode.Normal } = {}) {
if (props.multiSelect === true && mode === SelectionMode.Normal) {
mode = SelectionMode.Append;
}
setState('selection', existing => {
switch (mode) {
case SelectionMode.Toggle: {
return [...existing.filter(i => !selection.includes(i)), ...selection.filter(i => !existing.includes(i))];
}
case SelectionMode.Append: {
return existing.concat(selection);
}
default: {
return selection;
}
}
});
},
selectAll() {
setState('selection', state.data.map(({ key }) => key));
@ -58,113 +93,62 @@ export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler }
isSelected(key: string) {
return createMemo(() => state.selection.includes(key));
},
};
const internal: InternalSelectionContextType = {
modifier: createSignal<Modifier>(Modifier.None),
latest: createSignal<HTMLElement>(),
selectables: createSignal<HTMLElement[]>([]),
add(key: string, value: Accessor<any>, element: HTMLElement) {
setState('data', data => [...data, { key, value, element }]);
}
setState('data', data => [...data, { key, value, element: new WeakRef(element) }]);
},
};
return <SelectionContext.Provider value={context}>
<Root>{props.children}</Root>
<InternalSelectionContext.Provider value={internal}>
<Root>{props.children}</Root>
</InternalSelectionContext.Provider>
</SelectionContext.Provider>;
};
const Root: ParentComponent = (props) => {
const context = useSelection();
const internal = useInternalSelection();
const c = children(() => props.children);
const [modifier, setModifier] = createSignal<Modifier>(Modifier.None);
const [latest, setLatest] = createSignal<HTMLElement>();
const [root, setRoot] = createSignal<HTMLElement>();
const selectables = createMemo(() => {
const [, setSelectables] = internal.selectables;
const [, setModifier] = internal.modifier;
createEffect(() => {
const r = root();
if (!r) {
return [];
}
if (!isServer && r) {
const findSelectables = () => {
setSelectables(Array.from((function* () {
const iterator = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node: HTMLElement) => node.dataset.selectionKey ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
});
return Array.from((function* () {
const iterator = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node: HTMLElement) => node.dataset.selectionKey ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
while (iterator.nextNode()) {
yield iterator.currentNode as HTMLElement;
}
})()));
};
const observer = new MutationObserver(entries => {
const shouldRecalculate = entries.some(r => r.addedNodes.values().some(node => node instanceof HTMLElement && node.dataset.selectionKey));
if (shouldRecalculate) {
findSelectables();
}
});
while (iterator.nextNode()) {
yield iterator.currentNode;
}
})());
findSelectables();
observer.observe(r, { childList: true, attributes: true, attributeFilter: ['data-selection-key'], subtree: true });
}
});
createRenderEffect(() => {
const children = c.toArray();
const r = root();
if (!r) {
return;
}
setTimeout(() => {
console.log(r, children, Array.from((function* () {
const iterator = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node: HTMLElement) => node.dataset.selectionKey ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
});
while (iterator.nextNode()) {
console.log(iterator.currentNode);
yield iterator.currentNode;
}
})()));
}, 10);
});
const createRange = (a?: HTMLElement, b?: HTMLElement): string[] => {
if (!a && !b) {
return [];
}
if (!a) {
return [b!.dataset.selecatableKey!];
}
if (!b) {
return [a!.dataset.selecatableKey!];
}
if (a === b) {
return [a!.dataset.selecatableKey!];
}
const nodes = selectables();
const aIndex = nodes.indexOf(a);
const bIndex = nodes.indexOf(b);
const selection = nodes.slice(Math.min(aIndex, bIndex), Math.max(aIndex, bIndex) + 1);
console.log(aIndex, bIndex, nodes,);
return selection.map(n => n.dataset.selectionKey);
};
const onPointerDown = (e: PointerEvent) => {
const key = e.target?.dataset.selectionKey;
if (!key) {
return;
}
const shift = Boolean(modifier() & Modifier.Shift);
const append = Boolean(modifier() & Modifier.Control);
// Logic table
// shift | control | behavior |
// ------|---------|---------------------------------------------------|
// true | true | create range from latest to current and append |
// true | false | create range from latest to current and overwrite |
// false | true | append |
// false | false | overwrite / set |
context.select(shift ? createRange(latest(), e.target as HTMLElement) : [key], { append });
setLatest(e.target);
};
const onKeyboardEvent = (e: KeyboardEvent) => {
if (e.repeat || ['Control', 'Shift'].includes(e.key) === false) {
return;
@ -190,7 +174,6 @@ const Root: ParentComponent = (props) => {
};
onMount(() => {
document.addEventListener('pointerdown', onPointerDown);
document.addEventListener('keydown', onKeyboardEvent);
document.addEventListener('keyup', onKeyboardEvent);
});
@ -200,29 +183,87 @@ const Root: ParentComponent = (props) => {
return;
}
document.removeEventListener('pointerdown', onPointerDown);
document.removeEventListener('keydown', onKeyboardEvent);
document.removeEventListener('keyup', onKeyboardEvent);
});
createEffect(() => {
console.log(selectables());
});
return <div ref={setRoot} style={{ 'display': 'contents' }}>{c()}</div>;
};
export const selectable = (element: HTMLElement, value: Accessor<any>) => {
export const selectable = (element: HTMLElement, options: Accessor<{ value: object, key?: string }>) => {
const context = useSelection();
const key = createUniqueId();
const internal = useInternalSelection();
const key = options().key ?? createUniqueId();
const value = createMemo(() => options().value);
const isSelected = context.isSelected(key);
context.add(key, value, element);
internal.add(key, value, element);
const createRange = (a?: HTMLElement, b?: HTMLElement): string[] => {
if (!a && !b) {
return [];
}
if (!a) {
return [b!.dataset.selecatableKey!];
}
if (!b) {
return [a!.dataset.selecatableKey!];
}
if (a === b) {
return [a!.dataset.selecatableKey!];
}
const nodes = internal.selectables[0]();
const aIndex = nodes.indexOf(a);
const bIndex = nodes.indexOf(b);
const selection = nodes.slice(Math.min(aIndex, bIndex), Math.max(aIndex, bIndex) + 1);
return selection.map(n => n.dataset.selectionKey!);
};
createRenderEffect(() => {
element.dataset.selected = isSelected() ? 'true' : undefined;
});
const onPointerDown = (e: PointerEvent) => {
e.preventDefault();
const [latest, setLatest] = internal.latest
const [modifier] = internal.modifier
const withRange = Boolean(modifier() & Modifier.Shift);
const append = Boolean(modifier() & Modifier.Control);
const mode = (() => {
if (append) return SelectionMode.Append;
if (!withRange && isSelected()) return SelectionMode.Toggle;
return SelectionMode.Normal;
})();
context.select(withRange ? createRange(latest(), element) : [key], { mode });
if (!withRange) {
setLatest(element);
}
};
onMount(() => {
element.addEventListener('pointerdown', onPointerDown);
});
onCleanup(() => {
if (isServer) {
return;
}
element.removeEventListener('pointerdown', onPointerDown);
});
element.classList.add(css.selectable);
element.dataset.selectionKey = key;
};
@ -230,7 +271,7 @@ export const selectable = (element: HTMLElement, value: Accessor<any>) => {
declare module "solid-js" {
namespace JSX {
interface Directives {
selectable: any;
selectable: { value: object, key?: string };
}
}
}

3
src/global.d.ts vendored
View file

@ -1 +1,2 @@
/// <reference types="@solidjs/start/env" />

16
src/routes/(editor).tsx
View file

@ -1,5 +1,5 @@
import { Title } from "@solidjs/meta";
import { Show } from "solid-js";
import { ParentProps, Show } from "solid-js";
import { BsTranslate } from "solid-icons/bs";
import { FilesProvider } from "~/features/file";
import { MenuProvider, asMenuRoot } from "~/features/menu";
@ -8,7 +8,7 @@ import { A } from "@solidjs/router";
asMenuRoot // prevents removal of import
export default function Editor(props) {
export default function Editor(props: ParentProps) {
const supported = isServer || typeof window.showDirectoryPicker === 'function';
return <MenuProvider>
@ -18,12 +18,10 @@ export default function Editor(props) {
<A class="logo" href="/"><BsTranslate /></A>
</nav>
<main style="padding: 1em; block-size: 100%; overflow: clip;">
<Show when={supported} fallback={<span>too bad, so sad. Your browser does not support the File Access API</span>}>
<FilesProvider>
{props.children}
</FilesProvider>
</Show>
</main>
<Show when={supported} fallback={<span>too bad, so sad. Your browser does not support the File Access API</span>}>
<FilesProvider>
{props.children}
</FilesProvider>
</Show>
</MenuProvider>
}

10
src/routes/(editor)/edit.module.css
View file

@ -1,9 +1,15 @@
.root {
display: grid;
grid: 100% / auto 1fr;
grid: 100% / auto minmax(0, 1fr);
inline-size: 100%;
block-size: 100%;
padding-block: var(--padding-l);
& > aside {
& .sidebar {
z-index: 1;
margin-block: calc(-1 * var(--padding-l));
padding: var(--padding-l);
background-color: var(--surface-2);
& > ul {
padding: 0;

10
src/routes/(editor)/edit.tsx
View file

@ -1,6 +1,6 @@
import { Menu } from "~/features/menu";
import { Sidebar } from "~/components/sidebar";
import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, ParentProps, Show } from "solid-js";
import { Grid, load, useFiles } from "~/features/file";
import { createCommand, Modifier, noop } from "~/features/command";
import { GridContextType } from "~/features/file/grid";
@ -29,9 +29,9 @@ async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []):
}
};
export default function Edit(props) {
export default function Edit(props: ParentProps) {
const filesContext = useFiles();
const [root, { mutate, refetch }] = createResource(() => filesContext.get('root'));
const [root, { mutate, refetch }] = createResource(() => filesContext?.get('root'));
const [tree, setFiles] = createSignal<FolderEntry>(emptyFolder);
const [columns, setColumns] = createSignal(['these', 'are', 'some', 'columns']);
const [rows, setRows] = createSignal<Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>>(new Map);
@ -135,9 +135,9 @@ export default function Edit(props) {
<Menu.Item label="view" command={noop} />
</Menu.Root>
<Sidebar as="aside">
<Sidebar as="aside" class={css.sidebar}>
<Tree entries={tree().entries}>{
(file, icon) => <span>{icon} {file().name}</span>
file => file().name
}</Tree>
</Sidebar>

2
src/routes/(editor)/index.css → src/routes/(editor)/index.module.css
View file

@ -1,4 +1,4 @@
body > main {
.main {
display: grid;
place-content: center;
}

6
src/routes/(editor)/index.tsx
View file

@ -1,8 +1,8 @@
import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
import { useFiles } from "~/features/file";
import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
import "./index.css";
import { A } from "@solidjs/router";
import css from "./index.module.css";
interface FileEntry {
name: string;
@ -40,7 +40,7 @@ async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [
export default function Index() {
return (
<>
<main class={css.main}>
<h1>Hi, welcome!</h1>
<b>Lets get started</b>
@ -48,6 +48,6 @@ export default function Index() {
<li><A href="/edit">Start editing</A></li>
<li><A href="/experimental">Try new features</A></li>
</ul>
</>
</main>
);
}

13
tsconfig.json
View file

@ -10,10 +10,17 @@
"allowJs": true,
"strict": true,
"noEmit": true,
"types": ["vinxi/types/client", "@types/wicg-file-system-access"],
"types": [
"@solidjs/start/env",
"vinxi/types/client",
"@types/wicg-file-system-access",
"vite-plugin-pwa/solid"
],
"isolatedModules": true,
"paths": {
"~/*": ["./src/*"]
"~/*": [
"./src/*"
]
}
}
}
}