reconstruct dirs

This commit is contained in:
falsycat 2025-07-13 02:23:24 +09:00
parent 5ec5574488
commit e962a6904c
13 changed files with 265 additions and 155 deletions

7
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@tauri-apps/plugin-opener": "^2",
"@xyflow/react": "^12.8.2",
"i18next": "^25.3.2",
"mitt": "^3.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-i18next": "^15.6.0"
@ -2347,6 +2348,12 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/mitt": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
"license": "MIT"
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

View File

@ -14,6 +14,7 @@
"@tauri-apps/plugin-opener": "^2",
"@xyflow/react": "^12.8.2",
"i18next": "^25.3.2",
"mitt": "^3.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-i18next": "^15.6.0"

View File

@ -1,6 +1,6 @@
import "./App.scss";
import Screening from "./pages/Screening";
import Screening from "./pages/Screening/";
function App() {
return (

View File

@ -1,67 +0,0 @@
import { useCallback, useMemo } from "react";
import { Background, Controls, Edge, ReactFlow, Node, useNodesState, useEdgesState, Connection } from "@xyflow/react";
import * as node from "./node/";
import "@xyflow/react/dist/style.css";
import { Editor, Impl as EditorImpl } from "./context/Editor";
const nodeTypes = {
fetch_ToshoListed: node.fetch.ToshoListed,
present_TableDisplay: node.present.TableDisplay,
};
const initialNodes: Node[] = [
{
id: "n1",
type: "fetch_ToshoListed",
position: {x:0, y:0},
data: {prime: true, standard: true, growth: true},
deletable: false,
},
{
id: "n2",
type: "present_TableDisplay",
position: {x:0, y:100},
data: {},
},
{
id: "n3",
position: {x:0, y:200},
data: {label: "hello"},
},
];
export default function Screening() {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState([] as Edge[]);
const editor = useMemo(()=>new EditorImpl(setNodes, setEdges, 100), []);
const onConnect = useCallback(
(conn: Connection)=>editor.connect(conn), []);
const onDisconnect = useCallback(
(conns: Edge[])=>editor.disconnect(conns.map((x)=>x as Connection)), []);
const onNodesDelete = useCallback(
(nodes: Node[])=>editor.remove(nodes.map((x)=>x.id)), []);
return (
<Editor.Provider value={editor}>
<div style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}>
<ReactFlow
nodeTypes={nodeTypes}
nodes={nodes}
edges={edges}
onNodesDelete={onNodesDelete}
onNodesChange={onNodesChange}
onEdgesDelete={onDisconnect}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
>
<Controls />
<Background />
</ReactFlow>
</div>
</Editor.Provider>
);
}

View File

@ -0,0 +1,31 @@
import { createContext } from "react";
import { Node, Edge } from "@xyflow/react";
import mitt, { Emitter } from "mitt";
export type Events = {
// ---- editing request events (compo -> ?) ----
reqRemoveNode: string;
reqModifyNode: {id: string, data: any};
// ---- editing completion events (view -> ?) ----
onNodeAdded: Node;
onNodeRemoved: string;
onNodeModified: Node;
onEdgeAdded: Edge;
onEdgeRemoved: string;
onEdgeModified: Edge;
// ---- running events (emitted by runner) ----
onNodeReset: {id: string},
onNodePending: {id: string},
onNodeRunning: {id: string, symbols: string[], remaining: number | undefined},
onNodeAborted: {id: string, msg: string},
onNodeDone: {id: string},
};
export type Bus = Emitter<Events>;
export default Bus;
export const createBus = ()=> mitt<Events>();
export const BusContext = createContext<Bus|undefined>(undefined);

View File

@ -0,0 +1,80 @@
import { Node } from "@xyflow/react";
import Bus from "./Bus";
import { Emitter } from "mitt";
import nodes from "./node/";
export interface Iface {
};
export class Impl implements Iface {
_bus: Bus;
_threads: Set<string>;
constructor(bus: Bus) {
this._bus = bus;
this._threads = new Set();
}
_schedule(node: Node) {
this._threads.add(node.id);
run(this._bus, node).
finally(()=>this._threads.delete(node.id));
}
};
async function run(bus: Bus, node: Node) {
const [finisher, aborted] = makeFinisher();
const destroy = listenAll(bus, {
onNodeRemoved: (id)=>{ if (id===node.id) { finisher(); } },
onNodeModified: ({id})=>{ if (id===node.id) { finisher(); } },
});
try {
bus.emit("onNodePending", { id: node.id });
await execTask(bus, node, aborted.then(()=>{throw new Error("aborted")}));
bus.emit("onNodeDone", { id: node.id });
} catch (e: any) {
bus.emit("onNodeAborted", { id: node.id, msg: e });
} finally {
destroy();
}
}
async function execTask(bus: Bus, node: Node, aborted: Promise<void>) {
switch (node.type) {
case "fetch_ToshoListed":
const data: nodes.fetch.ToshoListedData = node.data;
data;
const sleep = new Promise(resolve => setTimeout(resolve, 1));
await Promise.race([sleep, aborted]);
bus.emit("onNodeRunning", { id: node.id, symbols: ["T/1234"], remaining: 32 });
break;
default:
throw Error("unknown node type: "+node.type);
}
}
function listenAll<E extends Record<string, unknown>>(
emitter: Emitter<E>,
listeners: {
[K in keyof E]?: (event: E[K]) => void;
}
): () => void {
for (const key in listeners) {
const handler = listeners[key];
if (handler) emitter.on(key, handler);
}
return () => {
for (const key in listeners) {
const handler = listeners[key];
if (handler) emitter.off(key, handler);
}
};
}
function makeFinisher(): [()=>void, Promise<void>] {
let r!: (v: void) => void;
const p = new Promise<void>((x)=>r = x);
return [()=>r(), p];
}

View File

@ -0,0 +1,125 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import {
Background,
Connection,
Controls,
Edge,
EdgeChange,
ReactFlow,
Node,
NodeChange,
addEdge,
applyNodeChanges,
applyEdgeChanges,
} from "@xyflow/react";
import * as node from "./node/";
import "@xyflow/react/dist/style.css";
import Bus, { createBus, BusContext, Events } from "./Bus";
const nodeTypes = {
fetch_ToshoListed: node.fetch.ToshoListed,
present_TableDisplay: node.present.TableDisplay,
};
const initialNodes: Node[] = [
{
id: "n1",
type: "fetch_ToshoListed",
position: {x:0, y:0},
data: {prime: true, standard: true, growth: true},
deletable: false,
},
{
id: "n2",
type: "present_TableDisplay",
position: {x:0, y:100},
data: {},
},
];
export default function Screening() {
const bus = useMemo(createBus, []);
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState([] as Edge[]);
listen(bus, "reqRemoveNode",
(id)=>setNodes((x)=>x.filter(y=>y.id!==id)));
listen(bus, "reqModifyNode",
({id, data})=>setNodes((x)=>x.map(y => y.id===id? {...y, data: data}: y)));
const onEdgesDelete = useCallback(
(conns: Edge[])=>conns.map(x=>bus.emit("onEdgeRemoved", x.id)), [bus]);
const onNodesChange = useCallback((changes: NodeChange[])=>{
tellNodeChangesToBus(bus, changes);
setNodes((nds)=>applyNodeChanges(changes, nds));
}, [bus]);
const onEdgesChange = useCallback((changes: EdgeChange[])=>{
tellEdgeChangesToBus(bus, changes);
setEdges((eds)=>applyEdgeChanges(changes, eds));
}, [bus]);
const onConnect = useCallback((conn: Connection)=>{
bus.emit("onEdgeAdded", conn as Edge), [bus];
setEdges((eds)=>addEdge(conn, eds));
}, [bus]);
return (
<BusContext.Provider value={bus}>
<div style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}>
<ReactFlow
nodeTypes={nodeTypes}
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesDelete={onEdgesDelete}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
>
<Controls />
<Background />
</ReactFlow>
</div>
</BusContext.Provider>
);
}
function listen<K extends keyof Events>(
bus: Bus,
name: K,
handler: (p: Events[K])=>void,
): void {
useEffect(()=>{
bus.on(name, handler);
return ()=>bus.off(name, handler);
}, [bus, handler]);
}
function tellNodeChangesToBus(bus: Bus, changes: NodeChange[]) {
changes.
filter(x=>x.type==="add").
map(y=>bus.emit("onNodeAdded", y.item));
changes.
filter(x=>x.type==="remove").
map(y=>bus.emit("onNodeRemoved", y.id));
changes.
filter(x=>x.type==="replace").
map(y=>bus.emit("onNodeModified", y.item));
}
function tellEdgeChangesToBus(bus: Bus, changes: EdgeChange[]) {
changes.
filter(x=>x.type==="add").
map(y=>bus.emit("onEdgeAdded", y.item));
changes.
filter(x=>x.type==="remove").
map(y=>bus.emit("onEdgeRemoved", y.id));
changes.
filter(x=>x.type==="replace").
map(y=>bus.emit("onEdgeModified", y.item));
}

View File

@ -2,9 +2,9 @@ import { useTranslation } from "react-i18next";
import { ReactNode, useContext, useCallback } from "react";
import { NodeProps } from "@xyflow/react";
import style from "./style.module.scss";
import { BusContext } from "../Bus";
import Editor from "../context/Editor";
import style from "./style.module.scss";
type Params = {
title: ReactNode,
@ -14,19 +14,21 @@ type Params = {
export default function Base(p: Params) {
const {t} = useTranslation();
const editor = useContext(Editor);
if (editor === undefined) {
throw new Error("no editor context");
const bus = useContext(BusContext);
if (bus === undefined) {
throw Error("bus is not installed");
}
const onDelete = useCallback(()=>editor.remove([p.node.id]), [p.node]);
const onRemove = useCallback(
()=>bus.emit("reqRemoveNode", p.node.id),
[p.node.id]);
return (
<div className={style.node}>
<div className={style.header}>
<div className={style.title}>{p.title}</div>
<div className={style.buttons}>
<button onClick={onDelete} disabled={!p.node.deletable}>
<button onClick={onRemove} disabled={!p.node.deletable}>
{t("pages.screening.nodes.base.remove")}
</button>
</div>

View File

@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
import { Handle, Node, NodeProps, Position } from "@xyflow/react";
import Base from "./Base";
import Editor from "../context/Editor";
import { BusContext } from "../Bus";
export type ToshoListed = Node<{
prime: boolean,
@ -15,11 +15,15 @@ export function ToshoListed(node: NodeProps<ToshoListed>) {
const {t} = useTranslation();
const editor = useContext(Editor);
if (editor === undefined) {
throw new Error("no editor context");
const bus = useContext(BusContext);
if (bus === undefined) {
throw Error("bus is not installed");
}
const update =
(market: string, value: boolean)=>
bus.emit("reqModifyNode", {id: id, data: {[market]: value}});
return (
<Base
node={node}
@ -31,7 +35,7 @@ export function ToshoListed(node: NodeProps<ToshoListed>) {
type="checkbox"
name="prime"
checked={data.prime}
onChange={(e)=>editor.modify(id, {...data, prime: e.target.checked})}
onChange={(e)=>update("prime", e.target.checked)}
/>
{t("terms.toshoPrime")}
</label></div>
@ -40,7 +44,7 @@ export function ToshoListed(node: NodeProps<ToshoListed>) {
type="checkbox"
name="standard"
checked={data.standard}
onChange={(e)=>editor.modify(id, {...data, standard: e.target.checked})}
onChange={(e)=>update("standard", e.target.checked)}
/>
{t("terms.toshoStandard")}
</label></div>
@ -49,7 +53,7 @@ export function ToshoListed(node: NodeProps<ToshoListed>) {
type="checkbox"
name="growth"
checked={data.growth}
onChange={(e)=>editor.modify(id, {...data, growth: e.target.checked})}
onChange={(e)=>update("growth", e.target.checked)}
/>
{t("terms.toshoGrowth")}
</label></div>

View File

@ -8,7 +8,6 @@ export function TableDisplay(node: NodeProps) {
<Base
node={node}
title={t("pages.screening.nodes.present_TableDisplay.title")}
removable={true}
>
<div>
<div><a href="#">{t("pages.screening.nodes.present_TableDisplay.open")}</a></div>

View File

@ -1,72 +0,0 @@
import { Dispatch, SetStateAction, createContext } from "react";
import { Connection, EdgeType, NodeType, addEdge } from "@xyflow/react";
type Pos = {x: int, y: int,};
export interface Iface {
add(type: string, pos: Pos, data: any): string;
remove(id: string[]): void;
modify(id: string, data: any): void;
connect(conn: Connection): void;
disconnect(conn: Connection[]): void;
};
export const Editor = createContext<Iface|undefined>(undefined);
export default Editor;
type SetNodes = Dispatch<SetStateAction<NodeType[]>>;
type SetEdges = Dispatch<SetStateAction<EdgeType[]>>;
export class Impl implements Iface {
_setNodes: SetNodes;
_setEdges: SetEdges;
_nextId: number = 0;
constructor(setNodes: SetNodes, setEdges: SetEdges, nextId: number = 0) {
this._setNodes = setNodes;
this._setEdges = setEdges;
this._nextId = nextId;
}
add(type: string, pos: Pos, data: any): string {
const ret = this._genNextId();
this._setNodes((nds)=>[...nds, {
id: ret,
type: type,
pos: pos,
data: data,
}]);
return ret;
}
remove(ids: string[]): void {
this._setNodes((nds)=>nds.filter((x)=>!ids.includes(x.id)));
}
modify(id: string, data: any): void {
this._setNodes(
(nds)=>nds.map((n)=>n.id === id? {...n, data: data}: n)
);
}
connect(c: Connection): void {
this._setEdges((eds)=>addEdge({
...c,
deletable: true,
}, eds));
}
disconnect(cs: Connection[]): void {
this._setEdges((eds)=>eds.filter((e)=>!cs.some(c=>matchEdgeAndConn(e, c))));
}
_genNextId(): number {
return "n"+(_nextId++);
}
};
function matchEdgeAndConn(e: Edge, c: Connection) {
return (
(e.source === c.source) &&
((e.sourceHandle??null) == (c.sourceHandle??null)) &&
(e.target == c.target) &&
((e.targetHandle??null) == (c.targetHandle??null))
);
}