Skip to content

Commit

Permalink
order-able graphs
Browse files Browse the repository at this point in the history
  • Loading branch information
Brendonovich committed Sep 7, 2024
1 parent 49e1ecd commit 490e86b
Show file tree
Hide file tree
Showing 14 changed files with 4,565 additions and 4,445 deletions.
112 changes: 56 additions & 56 deletions interface/package.json
Original file line number Diff line number Diff line change
@@ -1,58 +1,58 @@
{
"name": "@macrograph/interface",
"type": "module",
"sideEffects": false,
"main": "./src/index.tsx",
"exports": {
".": "./src/index.tsx",
"./tailwind.config.js": "./tailwind.config.js"
},
"dependencies": {
"@kobalte/core": "^0.13.4",
"@macrograph/action-history": "workspace:*",
"@macrograph/api-contract": "workspace:*",
"@macrograph/clipboard": "workspace:*",
"@macrograph/option": "workspace:*",
"@macrograph/packages": "workspace:*",
"@macrograph/runtime": "workspace:*",
"@macrograph/runtime-rendering": "workspace:*",
"@macrograph/runtime-serde": "workspace:*",
"@macrograph/typesystem": "workspace:*",
"@macrograph/ui": "workspace:*",
"@solid-primitives/bounds": "^0.0.118",
"@solid-primitives/context": "^0.2.3",
"@solid-primitives/cursor": "^0.0.112",
"@solid-primitives/event-listener": "^2.3.3",
"@solid-primitives/map": "^0.4.11",
"@solid-primitives/marker": "^0.0.3",
"@solid-primitives/memo": "^1.3.8",
"@solid-primitives/mouse": "^2.0.19",
"@solid-primitives/refs": "^1.0.8",
"@solid-primitives/resize-observer": "^2.0.25",
"@solid-primitives/scheduled": "^1.4.3",
"@solid-primitives/set": "^0.4.11",
"@solid-primitives/state-machine": "^0.0.3",
"@solid-primitives/storage": "^2.1.4",
"@solidjs/router": "^0.14.3",
"@tanstack/solid-query": "^4.36.1",
"@ts-rest/core": "^3.41.1",
"@ts-rest/solid-query": "^3.41.1",
"clsx": "^1.2.1",
"solid-js": "^1.8.20",
"solid-sonner": "^0.2.5",
"valibot": "^0.37.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@iconify/json": "^2.2.196",
"@kobalte/tailwindcss": "^0.6.5",
"@macrograph/config": "workspace:*",
"@tailwindcss/forms": "^0.5.7",
"@total-typescript/ts-reset": "^0.4.2",
"tailwind-scrollbar": "^3.1.0",
"tailwindcss-animate": "^1.0.7",
"unplugin-auto-import": "^0.17.5",
"unplugin-icons": "^0.18.5",
"vite": "^5.4.0"
}
"name": "@macrograph/interface",
"type": "module",
"sideEffects": false,
"main": "./src/index.tsx",
"exports": {
".": "./src/index.tsx",
"./tailwind.config.js": "./tailwind.config.js"
},
"dependencies": {
"@kobalte/core": "^0.13.4",
"@macrograph/action-history": "workspace:*",
"@macrograph/api-contract": "workspace:*",
"@macrograph/clipboard": "workspace:*",
"@macrograph/option": "workspace:*",
"@macrograph/packages": "workspace:*",
"@macrograph/runtime": "workspace:*",
"@macrograph/runtime-rendering": "workspace:*",
"@macrograph/runtime-serde": "workspace:*",
"@macrograph/typesystem": "workspace:*",
"@macrograph/ui": "workspace:*",
"@solid-primitives/bounds": "^0.0.118",
"@solid-primitives/context": "^0.2.3",
"@solid-primitives/cursor": "^0.0.112",
"@solid-primitives/event-listener": "^2.3.3",
"@solid-primitives/map": "^0.4.11",
"@solid-primitives/marker": "^0.0.3",
"@solid-primitives/memo": "^1.3.8",
"@solid-primitives/mouse": "^2.0.19",
"@solid-primitives/refs": "^1.0.8",
"@solid-primitives/resize-observer": "^2.0.25",
"@solid-primitives/scheduled": "^1.4.3",
"@solid-primitives/set": "^0.4.11",
"@solid-primitives/state-machine": "^0.0.3",
"@solid-primitives/storage": "^2.1.4",
"@solidjs/router": "^0.14.3",
"@tanstack/solid-query": "^4.36.1",
"@ts-rest/core": "^3.41.1",
"@ts-rest/solid-query": "^3.41.1",
"clsx": "^1.2.1",
"solid-js": "^1.8.20",
"solid-sonner": "^0.2.5",
"valibot": "^0.37.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@iconify/json": "^2.2.196",
"@kobalte/tailwindcss": "^0.6.5",
"@macrograph/config": "workspace:*",
"@tailwindcss/forms": "^0.5.7",
"@total-typescript/ts-reset": "^0.4.2",
"tailwind-scrollbar": "^3.1.0",
"tailwindcss": "^3.4.3",
"unplugin-auto-import": "^0.17.5",
"unplugin-icons": "^0.18.5",
"vite": "^5.4.0"
}
}
195 changes: 97 additions & 98 deletions interface/src/Sidebar/InlineTextEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,125 +2,124 @@ import { Polymorphic } from "@kobalte/core/polymorphic";
import { createContextProvider } from "@solid-primitives/context";
import clsx from "clsx";
import {
type ComponentProps,
type JSX,
Match,
Switch,
type ValidComponent,
batch,
createSignal,
onMount,
splitProps,
type ComponentProps,
type JSX,
Match,
Switch,
type ValidComponent,
batch,
createSignal,
onMount,
splitProps,
} from "solid-js";

export function InlineTextEditor<T extends ValidComponent = "span">(
props: Omit<ComponentProps<T>, "onChange"> & {
value: string;
onChange?(value: string): void;
as?: T;
class?: string;
selected?: boolean;
},
props: Omit<ComponentProps<T>, "onChange"> & {
value: string;
onChange?(value: string): void;
as?: T;
class?: string;
selected?: boolean;
},
) {
const [local, others] = splitProps(props, ["value", "onChange", "class"]);
const ctx = useContext() ?? createContextValue();
const [local, others] = splitProps(props, ["value", "onChange", "class"]);
const ctx = useContext() ?? createContextValue();

return (
<div
class={clsx(
"flex flex-row gap-1 justify-between items-center",
local.class,
)}
>
<Switch>
<Match when={ctx.editing()}>
{(_) => {
const [value, setValue] = createSignal(props.value);
let ref: HTMLInputElement;
return (
<div
class={clsx(
"flex flex-row gap-1 justify-between items-center",
local.class,
)}
>
<Switch>
<Match when={ctx.editing()}>
{(_) => {
const [value, setValue] = createSignal(props.value);
let ref: HTMLInputElement;

let focused = false;
let focused = false;

onMount(() => {
setTimeout(() => {
ref.focus();
focused = true;
}, 1);
});
onMount(() => {
setTimeout(() => {
ref.focus();
ref.select();
focused = true;
}, 1);
});

function onEdit() {
if (!ctx.editing()) return;
batch(() => {
props.onChange?.(value());
ctx.setEditing(false);
});
}
function onEdit() {
if (!ctx.editing()) return;
batch(() => {
props.onChange?.(value());
ctx.setEditing(false);
});
}

return (
<input
ref={ref!}
class="flex-1 bg-neutral-900 rounded text-sm py-0.5 px-1.5 border-none focus:ring-mg-focus"
value={value()}
onInput={(e) => {
setValue(e.target.value);
}}
onKeyDown={(e) => {
e.stopPropagation();
return (
<input
ref={ref!}
class="flex-1 bg-neutral-900 rounded text-sm py-0.5 px-1.5 border-none focus:ring-mg-focus"
value={value()}
onInput={(e) => {
setValue(e.target.value);
}}
onKeyDown={(e) => {
e.stopPropagation();

if (e.key === "Enter") {
e.preventDefault();
if (e.key === "Enter") {
e.preventDefault();

if (!focused) return;
onEdit();
ctx.setEditing(false);
} else if (e.key === "Escape") {
e.preventDefault();
if (!focused) return;
onEdit();
ctx.setEditing(false);
} else if (e.key === "Escape") {
e.preventDefault();

ctx.setEditing(false);
}
}}
onBlur={onEdit}
/>
);
}}
</Match>
<Match when={!ctx.editing()}>
<Polymorphic
as={(props.as ?? "span") as any}
class={clsx(
"flex-1 hover:bg-white/10 ui-expanded:bg-white/10 rounded flex flex-row items-center justify-between py-0.5 px-1.5",
props.selected && "bg-white/10",
)}
onDblClick={(e: MouseEvent) => {
e.preventDefault();
e.stopPropagation();
ctx.setEditing(false);
}
}}
onBlur={onEdit}
/>
);
}}
</Match>
<Match when={!ctx.editing()}>
<Polymorphic
as={(props.as ?? "span") as any}
class={clsx(
"flex-1 hover:bg-white/10 ui-expanded:bg-white/10 rounded flex flex-row items-center justify-between py-0.5 px-1.5",
props.selected && "bg-white/10",
)}
onDblClick={(e: MouseEvent) => {
e.preventDefault();
e.stopPropagation();

ctx.setEditing(true);
}}
{...others}
>
{props.value}
</Polymorphic>
{props.children}
</Match>
</Switch>
</div>
);
ctx.setEditing(true);
}}
{...others}
>
{props.value}
</Polymorphic>
{props.children}
</Match>
</Switch>
</div>
);
}

function createContextValue() {
const [editing, setEditing] = createSignal(false);
const [editing, setEditing] = createSignal(false);

return { editing, setEditing };
return { editing, setEditing };
}

const [Context, useContext] = createContextProvider(
() => createContextValue(),
null,
() => createContextValue(),
null,
);

export function InlineTextEditorContext(props: {
children?: () => JSX.Element;
}) {
return <Context>{props.children?.()}</Context>;
export function InlineTextEditorContext(props: { children?: JSX.Element }) {
return <Context>{props.children}</Context>;
}
export const useInlineTextEditorCtx = useContext;
Loading

0 comments on commit 490e86b

Please sign in to comment.