summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/NodeEditor.css18
-rw-r--r--src/NodeEditor.module.css16
-rw-r--r--src/NodeEditor.tsx12
-rw-r--r--src/Toolbar.css78
-rw-r--r--src/Toolbar.module.css76
-rw-r--r--src/Toolbar.tsx6
-rw-r--r--src/node.css (renamed from src/node.module.css)1
-rw-r--r--src/node.tsx18
8 files changed, 113 insertions, 112 deletions
diff --git a/src/NodeEditor.css b/src/NodeEditor.css
new file mode 100644
index 0000000..449286e
--- /dev/null
+++ b/src/NodeEditor.css
@@ -0,0 +1,18 @@
+@scope (.__NodeEditor) {
+ :scope {
+ --base: #122236;
+ --surface: #242424;
+ --overlay: #484848;
+ --primary: #1c4c87;
+
+ --data-any: #36c965;
+ --data-float: #a0a0a0;
+ --data-vector: #5e29d9;
+ }
+
+ .link {
+ fill: none;
+ stroke: var(--data-float);
+ stroke-width: 2;
+ }
+} \ No newline at end of file
diff --git a/src/NodeEditor.module.css b/src/NodeEditor.module.css
deleted file mode 100644
index 10cedc3..0000000
--- a/src/NodeEditor.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-:global(:root) {
- --base: #122236;
- --surface: #242424;
- --overlay: #484848;
- --primary: #1c4c87;
-
- --data-any: #36c965;
- --data-float: #a0a0a0;
- --data-vector: #5e29d9;
-}
-
-.link {
- fill: none;
- stroke: var(--data-float);
- stroke-width: 2;
-} \ No newline at end of file
diff --git a/src/NodeEditor.tsx b/src/NodeEditor.tsx
index 0c0f106..fcfee2d 100644
--- a/src/NodeEditor.tsx
+++ b/src/NodeEditor.tsx
@@ -5,7 +5,7 @@ import { nodeRegistry } from './nodes';
import { SocketHandlers, SocketHandler, NodeInfo } from './node.tsx';
import { InputSocket } from './dataflow.ts';
import { Toolbar } from './Toolbar.tsx';
-import styles from './NodeEditor.module.css';
+import './NodeEditor.css';
export const nodeFactory = () => {
let nextNodeId = 0;
@@ -234,11 +234,8 @@ const NodeEditor = ({ user, project }) => {
};
return (
- <>
- <header>
- <Toolbar nodes={nodeRegistry} onNodeAdded={onNodeAdded} />
- </header>
- <main>
+ <div class="__NodeEditor">
+ <Toolbar nodes={nodeRegistry} onNodeAdded={onNodeAdded} />
<svg width="100vw" height="100vh" ref={svgRef} onMouseDown={onBgMouseDown} onWheel={onBgWheel}>
<pattern
id="bg-grid-major"
@@ -266,8 +263,7 @@ const NodeEditor = ({ user, project }) => {
</SocketHandlers.Provider>
</g>
</svg>
- </main>
- </>
+ </div>
);
};
diff --git a/src/Toolbar.css b/src/Toolbar.css
new file mode 100644
index 0000000..b96e40c
--- /dev/null
+++ b/src/Toolbar.css
@@ -0,0 +1,78 @@
+@scope (.__Toolbar) {
+ .toolbar {
+ background-color: var(--surface);
+ border-bottom: 1px solid var(--overlay);
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ > * {
+ flex-grow: 1;
+ display: flex;
+ justify-content: center;
+ }
+ :first-child, :last-child { flex-basis: 0 }
+ :first-child { justify-content: flex-start }
+ :last-child { justify-content: flex-end }
+
+ > menu {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: flex;
+ flex-direction: row;
+ }
+
+ h1 {
+ font-size: 1.5rem;
+ font-weight: normal;
+ margin: 0;
+ }
+
+ button {
+ background-color: transparent;
+ border: none;
+ outline: none;
+ padding: 1rem;
+ color: var(--text);
+ font-size: 1em;
+ :hover { background-color: var(--overlay) }
+ }
+
+ path {
+ fill: var(--text);
+ }
+ }
+
+ .addMenu:popover-open {
+ background-color: var(--surface);
+ list-style: none;
+ border: none;
+ position: absolute;
+ inset: unset;
+ width: auto;
+ height: auto;
+ left: 140px;
+ top: 52px;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ --shadow-color: 0deg 0% 0%;
+ box-shadow:
+ 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.04),
+ 0.5px 3.3px 4.8px -0.2px hsl(var(--shadow-color) / 0.15),
+ 1.4px 10.2px 14.7px -0.5px hsl(var(--shadow-color) / 0.27);
+
+ button {
+ padding: 4px;
+ width: 100%;
+ text-align: left;
+ &:hover { background-color: var(--overlay) }
+ }
+ }
+} \ No newline at end of file
diff --git a/src/Toolbar.module.css b/src/Toolbar.module.css
deleted file mode 100644
index edea713..0000000
--- a/src/Toolbar.module.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.toolbar {
- background-color: var(--surface);
- border-bottom: 1px solid var(--overlay);
- width: 100%;
- margin: 0;
- padding: 0;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
-
- > * {
- flex-grow: 1;
- display: flex;
- justify-content: center;
- }
- :first-child, :last-child { flex-basis: 0 }
- :first-child { justify-content: flex-start }
- :last-child { justify-content: flex-end }
-
- > menu {
- margin: 0;
- padding: 0;
- list-style: none;
- display: flex;
- flex-direction: row;
- }
-
- h1 {
- font-size: 1.5rem;
- font-weight: normal;
- margin: 0;
- }
-
- button {
- background-color: transparent;
- border: none;
- outline: none;
- padding: 1rem;
- color: var(--text);
- font-size: 1em;
- :hover { background-color: var(--overlay) }
- }
-
- path {
- fill: var(--text);
- }
-}
-
-.addMenu:popover-open {
- background-color: var(--surface);
- list-style: none;
- border: none;
- position: absolute;
- inset: unset;
- width: auto;
- height: auto;
- left: 140px;
- top: 52px;
- margin: 0;
- padding: 0;
- display: flex;
- flex-direction: column;
- --shadow-color: 0deg 0% 0%;
- box-shadow:
- 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.04),
- 0.5px 3.3px 4.8px -0.2px hsl(var(--shadow-color) / 0.15),
- 1.4px 10.2px 14.7px -0.5px hsl(var(--shadow-color) / 0.27);
-
- button {
- padding: 4px;
- width: 100%;
- text-align: left;
- &:hover { background-color: var(--overlay) }
- }
-} \ No newline at end of file
diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx
index dded98d..32f53ab 100644
--- a/src/Toolbar.tsx
+++ b/src/Toolbar.tsx
@@ -1,6 +1,6 @@
import { useId } from 'preact/hooks';
import { NodeInfo } from './node.tsx';
-import styles from './Toolbar.module.css';
+import './Toolbar.css';
export interface ToolbarProps {
nodes: Record<string, NodeInfo>;
@@ -10,12 +10,12 @@ export interface ToolbarProps {
export const Toolbar = ({ nodes, onNodeAdded = _ => {} }: ToolbarProps) => {
const id = useId();
return (
- <div class={styles.toolbar}>
+ <div class="__Toolbar">
<menu>
<li><button>Edit</button></li>
<li><button>Select</button></li>
<li>
- <menu id={id} class={styles.addMenu} popover="auto">
+ <menu id={id} class="addMenu" popover="auto">
{Object.entries(nodes).map(([name, node]) => (
<li><button onClick={() => onNodeAdded(node)}>{name}</button></li>
))}
diff --git a/src/node.module.css b/src/node.css
index 2a65c56..4ec7243 100644
--- a/src/node.module.css
+++ b/src/node.css
@@ -1,3 +1,4 @@
+
.foreignObject {
width: 0;
height: 0;
diff --git a/src/node.tsx b/src/node.tsx
index 211398e..cb72734 100644
--- a/src/node.tsx
+++ b/src/node.tsx
@@ -3,7 +3,7 @@ import { useContext } from 'preact/hooks';
import { batch, Signal } from '@preact/signals';
import { InputSocket } from './dataflow.ts';
import { cls } from './util.ts';
-import styles from './node.module.css';
+import './node.css';
export type SocketHandler = (nodeId: number, socket: string, event: MouseEvent) => void;
export interface SocketHandlers {
@@ -74,7 +74,7 @@ export interface InputProps<T> {
export const InputAny = ({ name, label }: Omit<InputProps<any>, 'value'>) => {
return (
- <li class={cls(styles.in)}>
+ <li class="in">
<InSocket name={name} />
{label}
</li>
@@ -83,7 +83,7 @@ export const InputAny = ({ name, label }: Omit<InputProps<any>, 'value'>) => {
export const InputArray = ({ name, label }: Omit<InputProps<any>, 'value'>) => {
return (
- <li class={cls(styles.in, styles.number)}>
+ <li class="in number">
<InSocket name={name} />
{label}
</li>
@@ -95,7 +95,7 @@ const InputNum = (parseFunc: (string) => number) => ({ name, label, value }: Inp
value.value = parseFunc((event.target as HTMLInputElement).value);
}
return (
- <li class={cls(styles.in, styles.number, value.link.value && styles.linked)}>
+ <li class={'in number' + (value.link.value ? ' linked' : '')}>
<InSocket name={name} />
<span>{label}</span>
<input type="number" value={value.manual.value} onInput={onInput} />
@@ -113,7 +113,7 @@ export const InputVector = ({ name, label, value }: InputProps<[number, number,
value.value = newValue;
};
return (
- <li class={cls(styles.in, styles.vector, value.link.value && styles.linked)}>
+ <li class={'in vector' + (value.link.value ? ' linked' : '')}>
<div>
<InSocket name={name} />
{label}
@@ -134,7 +134,7 @@ export const InputSelect = ({ name, label, value, options }: InputSelectProps) =
value.value = (event.target as HTMLSelectElement).value;
}
return (
- <li class={cls(styles.in, styles.select, value.link.value && styles.linked)}>
+ <li class={'in select' + (value.link.value ? ' linked' : '')}>
<InSocket name={name} />
<select aria-label={label} onChange={onChange}>
{Array.isArray(options)
@@ -157,7 +157,7 @@ export interface OutputProps {
const Output = ({ name, label, type }: OutputProps & { type: string }) => {
return (
- <li class={cls(styles.out, styles[type])}>
+ <li class={'out ' + type}>
{label}
<OutSocket name={name} />
</li>
@@ -194,8 +194,8 @@ export const NodeShell = ({ id, name, x, y, children }: NodeShellProps) => {
};
return (
- <foreignObject x={x} y={y} width="0" height="0" class={styles.foreignObject}>
- <details open tabindex={0} class={styles.node} onMouseDown={onMouseDown}>
+ <foreignObject x={x} y={y} width="0" height="0" class="__NodeShell">
+ <details open tabindex={0} class="node" onMouseDown={onMouseDown}>
<summary><span onClick={e => e.stopPropagation()}>{name}</span></summary>
<ul>
<NodeId.Provider value={id}>
generated by cgit v1.2.3 (git 2.25.1) at 2026-01-16 08:36:20 +0000