547 lines
19 KiB
TypeScript
547 lines
19 KiB
TypeScript
import { EditNode, EditTree, useWorkspace } from "@/contexts/workspace-context";
|
|
import { NodeArgType, NodeModel, TreeGraphData, TreeModel } from "@/misc/b3type";
|
|
import { Hotkey, isMacos } from "@/misc/keys";
|
|
import Path from "@/misc/path";
|
|
import { AutoComplete, Divider, Flex, Form, Input, InputNumber, Select, Switch } from "antd";
|
|
import { DefaultOptionType } from "antd/es/select";
|
|
import { FC, useEffect, useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import Markdown from "react-markdown";
|
|
|
|
interface OptionType extends DefaultOptionType {}
|
|
|
|
const TreeInspector: FC = () => {
|
|
const workspace = {
|
|
editing: useWorkspace((state) => state.editing),
|
|
editingTree: useWorkspace((state) => state.editingTree)!,
|
|
};
|
|
const { t } = useTranslation();
|
|
const [form] = Form.useForm();
|
|
|
|
// set form values
|
|
useEffect(() => {
|
|
const data = workspace.editingTree.data;
|
|
form.resetFields();
|
|
form.setFieldValue("name", data.name);
|
|
form.setFieldValue("desc", data.desc);
|
|
}, [workspace.editingTree]);
|
|
|
|
const finish = (values: any) => {
|
|
const data = {} as TreeModel;
|
|
data.name = values.name;
|
|
data.desc = values.desc || undefined;
|
|
workspace.editing?.dispatch("updateTree", {
|
|
data: {
|
|
name: values.name,
|
|
desc: values.desc || undefined,
|
|
},
|
|
} as EditTree);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div style={{ padding: "12px 24px" }}>
|
|
<span style={{ fontSize: "18px", fontWeight: "600" }}>{t("tree.overview")}</span>
|
|
</div>
|
|
<div
|
|
className={isMacos ? undefined : "b3-overflow"}
|
|
style={{ overflow: "auto", height: "100%", padding: "24px" }}
|
|
>
|
|
<Form form={form} labelCol={{ span: 8 }} onFinish={finish}>
|
|
<Form.Item name="name" label={t("tree.name")}>
|
|
<Input disabled={true} />
|
|
</Form.Item>
|
|
<Form.Item name="desc" label={t("tree.desc")}>
|
|
<Input onBlur={form.submit} />
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const NodeInspector: FC = () => {
|
|
const workspace = {
|
|
editing: useWorkspace((state) => state.editing),
|
|
editingNode: useWorkspace((state) => state.editingNode)!,
|
|
getNodeDef: useWorkspace((state) => state.getNodeDef),
|
|
nodeDefs: useWorkspace((state) => state.nodeDefs),
|
|
onEditingNode: useWorkspace((state) => state.onEditingNode),
|
|
allFiles: useWorkspace((state) => state.allFiles),
|
|
fileTree: useWorkspace((state) => state.fileTree),
|
|
};
|
|
const { t } = useTranslation();
|
|
const [form] = Form.useForm();
|
|
|
|
// set form values
|
|
useEffect(() => {
|
|
const data = workspace.editingNode.data;
|
|
const def = workspace.getNodeDef(workspace.editingNode.data.name);
|
|
form.resetFields();
|
|
form.setFieldValue("id", data.id);
|
|
form.setFieldValue("name", data.name);
|
|
form.setFieldValue("type", def.type);
|
|
form.setFieldValue("desc", data.desc);
|
|
form.setFieldValue("debug", data.debug);
|
|
form.setFieldValue("path", data.path);
|
|
def.args?.forEach((v) => {
|
|
form.setFieldValue(`args.${v.name}`, data.args?.[v.name]);
|
|
});
|
|
def.input?.forEach((_, i) => {
|
|
form.setFieldValue(`input.${i}`, data.input?.[i]);
|
|
});
|
|
def.output?.forEach((_, i) => {
|
|
form.setFieldValue(`output.${i}`, data.output?.[i]);
|
|
});
|
|
}, [workspace.editingNode]);
|
|
|
|
// auto complete for node
|
|
const nodeOptions = useMemo(() => {
|
|
const options: OptionType[] = [];
|
|
workspace.nodeDefs.forEach((e) => {
|
|
options.push({ label: `${e.name}(${e.desc})`, value: e.name });
|
|
});
|
|
return options;
|
|
}, [workspace.nodeDefs]);
|
|
|
|
// auto complete for input and output
|
|
const inoutVarOptions = useMemo(() => {
|
|
const options: OptionType[] = [];
|
|
const collect = (node?: TreeGraphData) => {
|
|
if (node) {
|
|
node.input?.forEach((v, i) => {
|
|
const desc = node.def.input?.[i] ?? "<unknown>";
|
|
if (v && !options.find((option) => option.value === v)) {
|
|
options.push({ label: `${v}(${desc})`, value: v });
|
|
}
|
|
});
|
|
node.output?.forEach((v, i) => {
|
|
const desc = node.def.output?.[i] ?? "<unknown>";
|
|
if (v && !options.find((option) => option.value === v)) {
|
|
options.push({ label: `${v}(${desc})`, value: v });
|
|
}
|
|
});
|
|
node.children?.forEach((child) => collect(child));
|
|
}
|
|
};
|
|
collect(workspace.editing?.data);
|
|
return options;
|
|
}, [workspace.editing]);
|
|
|
|
// auto complete for subtree
|
|
const subtreeOptions = useMemo(() => {
|
|
const options: OptionType[] = [];
|
|
workspace.allFiles.forEach((path) => {
|
|
const value = Path.relative(workspace.fileTree!.path, path).replaceAll(Path.sep, "/");
|
|
const desc = ""; //fileNode.desc ? `(${fileNode.desc})` : "";
|
|
options.push({
|
|
label: `${value}${desc}`,
|
|
value: value,
|
|
});
|
|
});
|
|
return options;
|
|
}, [workspace.allFiles, workspace.fileTree]);
|
|
|
|
const editingNode = workspace.editingNode;
|
|
const def = workspace.getNodeDef(editingNode.data.name);
|
|
const disabled = !editingNode.editable;
|
|
|
|
// update value
|
|
const finish = (values: any) => {
|
|
const data = {} as NodeModel;
|
|
data.id = editingNode.data.id;
|
|
data.name = values.name;
|
|
data.debug = values.debug || undefined;
|
|
data.desc = values.desc || undefined;
|
|
data.path = values.path || undefined;
|
|
|
|
def.args?.forEach((arg) => {
|
|
const v = values[`args.${arg.name}`];
|
|
if (v !== null && v !== undefined && v !== "") {
|
|
data.args ||= {};
|
|
data.args[arg.name] = v;
|
|
}
|
|
});
|
|
|
|
def.input?.forEach((_, i) => {
|
|
const v = values[`input.${i}`];
|
|
data.input ||= [];
|
|
data.input.push(v ?? "");
|
|
});
|
|
|
|
def.output?.forEach((_, i) => {
|
|
const v = values[`output.${i}`];
|
|
data.output ||= [];
|
|
data.output.push(v ?? "");
|
|
});
|
|
workspace.editing?.dispatch("updateNode", {
|
|
data: data,
|
|
} as EditNode);
|
|
};
|
|
|
|
// change node def
|
|
const changeNodeDef = (newname: string) => {
|
|
if (editingNode.data.name !== newname) {
|
|
workspace.onEditingNode({
|
|
data: {
|
|
id: editingNode.data.id,
|
|
name: workspace.nodeDefs.get(newname)?.name ?? newname,
|
|
desc: editingNode.data.desc,
|
|
debug: editingNode.data.debug,
|
|
},
|
|
editable: editingNode.editable,
|
|
});
|
|
finish(form.getFieldsValue());
|
|
} else {
|
|
form.submit();
|
|
}
|
|
};
|
|
|
|
const changeSubtree = () => {
|
|
if (form.getFieldValue("path") !== editingNode.data.path) {
|
|
finish(form.getFieldsValue());
|
|
} else {
|
|
form.submit();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div style={{ padding: "12px 24px" }}>
|
|
<span style={{ fontSize: "18px", fontWeight: "600" }}>{def.desc}</span>
|
|
</div>
|
|
<div
|
|
className={isMacos ? undefined : "b3-overflow"}
|
|
style={{ overflow: "auto", height: "100%", padding: "24px" }}
|
|
>
|
|
<Form
|
|
form={form}
|
|
wrapperCol={{ span: "auto" }}
|
|
labelCol={{ span: "auto" }}
|
|
onFinish={finish}
|
|
>
|
|
<Form.Item
|
|
name="id"
|
|
label={
|
|
<div style={{ minWidth: "80px", justifyContent: "flex-end" }}>{t("node.id")}</div>
|
|
}
|
|
>
|
|
<Input disabled={true} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="type"
|
|
label={
|
|
<div style={{ minWidth: "80px", justifyContent: "flex-end" }}>{t("node.type")}</div>
|
|
}
|
|
>
|
|
<Input disabled={true} />
|
|
</Form.Item>
|
|
<Form.Item label={t("node.name")} name="name">
|
|
<AutoComplete
|
|
disabled={disabled}
|
|
options={nodeOptions}
|
|
onBlur={() => changeNodeDef(form.getFieldValue("name"))}
|
|
onSelect={changeNodeDef}
|
|
onInputKeyDown={(e) => e.code === Hotkey.Escape && e.preventDefault()}
|
|
filterOption={(inputValue: string, option?: OptionType) => {
|
|
const label = option!.label as string;
|
|
return label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item name="desc" label={t("node.desc")}>
|
|
<Input disabled={disabled} onBlur={form.submit} />
|
|
</Form.Item>
|
|
<Form.Item label={t("node.debug")} name="debug" valuePropName="checked">
|
|
<Switch disabled={disabled && !editingNode.data.path} onChange={form.submit} />
|
|
</Form.Item>
|
|
<Form.Item label={t("node.subtree")} name="path">
|
|
<AutoComplete
|
|
disabled={disabled && !editingNode.data.path}
|
|
options={subtreeOptions}
|
|
onBlur={changeSubtree}
|
|
onInputKeyDown={(e) => e.code === Hotkey.Escape && e.preventDefault()}
|
|
filterOption={(inputValue: string, option?: OptionType) => {
|
|
const label = option!.label as string;
|
|
return label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
<Markdown>{def.doc}</Markdown>
|
|
{def.input && def.input.length > 0 && (
|
|
<>
|
|
<Divider orientation="left">
|
|
<h4>{t("node.inputVariable")}</h4>
|
|
</Divider>
|
|
{def.input.map((v, i) => {
|
|
const required = v.indexOf("?") == -1;
|
|
const desc = v.replace("?", "");
|
|
return (
|
|
<Form.Item
|
|
label={desc}
|
|
name={`input.${i}`}
|
|
key={`input.${i}`}
|
|
rules={[{ required, message: t("node.fileRequired", { field: desc }) }]}
|
|
>
|
|
<AutoComplete
|
|
disabled={disabled}
|
|
options={inoutVarOptions}
|
|
onBlur={form.submit}
|
|
onInputKeyDown={(e) => e.code === Hotkey.Escape && e.preventDefault()}
|
|
filterOption={(inputValue: string, option?: OptionType) => {
|
|
const label = option!.label as string;
|
|
return label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
})}
|
|
</>
|
|
)}
|
|
{def.args && def.args.length > 0 && (
|
|
<>
|
|
<Divider orientation="left">
|
|
<h4>{t("node.args")}</h4>
|
|
</Divider>
|
|
{def.args.map((v) => {
|
|
const required = v.type.indexOf("?") == -1;
|
|
const type = v.type.replace("?", "") as NodeArgType;
|
|
return (
|
|
<Form.Item
|
|
name={`args.${v.name}`}
|
|
label={v.desc}
|
|
key={`args.${v.name}`}
|
|
initialValue={type === "boolean" ? v.default ?? false : v.default}
|
|
valuePropName={type === "boolean" ? "checked" : undefined}
|
|
rules={[{ required, message: t("node.fileRequired", { field: v.desc }) }]}
|
|
>
|
|
{type === "string" && <Input disabled={disabled} onBlur={form.submit} />}
|
|
{type === "int" && (
|
|
<InputNumber disabled={disabled} onBlur={form.submit} precision={0} />
|
|
)}
|
|
{type === "float" && <InputNumber disabled={disabled} onBlur={form.submit} />}
|
|
{type === "boolean" && <Switch disabled={disabled} onChange={form.submit} />}
|
|
{type === "code" && (
|
|
<Input onBlur={form.submit} placeholder={t("node.codePlaceholder")} />
|
|
)}
|
|
{type === "enum" && (
|
|
<Select disabled={disabled} onBlur={form.submit} onChange={form.submit}>
|
|
{v.options?.map((value) => {
|
|
return (
|
|
<Select.Option key={value.name} value={value.value}>
|
|
{value.name}
|
|
</Select.Option>
|
|
);
|
|
})}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
);
|
|
})}
|
|
</>
|
|
)}
|
|
{def.output && def.output.length > 0 && (
|
|
<>
|
|
<Divider orientation="left">
|
|
<h4>{t("node.outputVariable")}</h4>
|
|
</Divider>
|
|
{def.output.map((v, i) => {
|
|
const required = v.indexOf("?") == -1;
|
|
const desc = v.replace("?", "");
|
|
return (
|
|
<Form.Item
|
|
label={desc}
|
|
name={`output.${i}`}
|
|
key={`output.${i}`}
|
|
rules={[{ required, message: t("node.fileRequired", { field: desc }) }]}
|
|
>
|
|
<AutoComplete
|
|
disabled={disabled}
|
|
options={inoutVarOptions}
|
|
onBlur={form.submit}
|
|
onInputKeyDown={(e) => e.code === Hotkey.Escape && e.preventDefault()}
|
|
filterOption={(inputValue: string, option?: OptionType) => {
|
|
const label = option!.label as string;
|
|
return label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
})}
|
|
</>
|
|
)}
|
|
</Form>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const NodeDefInspector: FC = () => {
|
|
const workspace = {
|
|
editingNodeDef: useWorkspace((state) => state.editingNodeDef)!,
|
|
};
|
|
const { t } = useTranslation();
|
|
const [form] = Form.useForm();
|
|
const data = workspace.editingNodeDef.data;
|
|
|
|
// set form values
|
|
useEffect(() => {
|
|
form.resetFields();
|
|
form.setFieldValue("name", data.name);
|
|
form.setFieldValue("type", data.type);
|
|
form.setFieldValue("desc", data.desc);
|
|
form.setFieldValue("doc", data.doc);
|
|
data.input?.forEach((v, i) => {
|
|
form.setFieldValue(`input.${i}.name`, v.replaceAll("?", ""));
|
|
});
|
|
data.output?.forEach((v, i) => {
|
|
form.setFieldValue(`output.${i}.name`, v.replaceAll("?", ""));
|
|
});
|
|
data.args?.forEach((v, i) => {
|
|
form.setFieldValue(`args.${i}.type`, v.type.replaceAll("?", ""));
|
|
});
|
|
}, [workspace.editingNodeDef]);
|
|
return (
|
|
<>
|
|
<div style={{ padding: "12px 24px" }}>
|
|
<span style={{ fontSize: "18px", fontWeight: "600" }}>{t("nodeDefinition")}</span>
|
|
</div>
|
|
<div
|
|
className={isMacos ? undefined : "b3-overflow"}
|
|
style={{ overflow: "auto", height: "100%", padding: "24px" }}
|
|
>
|
|
<Form
|
|
form={form}
|
|
wrapperCol={{ span: "auto" }}
|
|
labelCol={{ span: "auto" }}
|
|
// onFinish={finish}
|
|
>
|
|
<Form.Item
|
|
name="name"
|
|
label={
|
|
<div style={{ minWidth: "80px", justifyContent: "flex-end" }}>{t("node.name")}</div>
|
|
}
|
|
>
|
|
<Input disabled={true} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="type"
|
|
label={
|
|
<div style={{ minWidth: "80px", justifyContent: "flex-end" }}>{t("node.type")}</div>
|
|
}
|
|
>
|
|
<Input disabled={true} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="desc"
|
|
label={
|
|
<div style={{ minWidth: "80px", justifyContent: "flex-end" }}>{t("node.desc")}</div>
|
|
}
|
|
>
|
|
<Input disabled={true} />
|
|
</Form.Item>
|
|
<Markdown>{data.doc}</Markdown>
|
|
{data.input && data.input.length > 0 && (
|
|
<>
|
|
<Divider orientation="left">
|
|
<h4>{t("node.inputVariable")}</h4>
|
|
</Divider>
|
|
{data.input.map((v, i) => {
|
|
const required = v.indexOf("?") == -1;
|
|
return (
|
|
<Form.Item
|
|
label={`[${i}]`}
|
|
name={`input.${i}.name`}
|
|
key={`input.${i}.name`}
|
|
required={required}
|
|
>
|
|
<Input disabled={true} />
|
|
</Form.Item>
|
|
);
|
|
})}
|
|
</>
|
|
)}
|
|
{data.args && data.args.length > 0 && (
|
|
<>
|
|
<Divider orientation="left">
|
|
<h4>{t("node.args")}</h4>
|
|
</Divider>
|
|
{data.args.map((v, i) => {
|
|
const required = v.type.indexOf("?") == -1;
|
|
const type = v.type.replace("?", "") as NodeArgType;
|
|
return (
|
|
<Form.Item
|
|
name={`args.${i}.type`}
|
|
label={v.desc}
|
|
key={`args.${i}.type`}
|
|
rules={[{ required }]}
|
|
>
|
|
<Select disabled={true}>
|
|
{["float", "int", "string", "code", "enum", "boolean"].map((value) => {
|
|
return (
|
|
<Select.Option key={value} value={value}>
|
|
{value}
|
|
</Select.Option>
|
|
);
|
|
})}
|
|
</Select>
|
|
</Form.Item>
|
|
);
|
|
})}
|
|
</>
|
|
)}
|
|
{data.output && data.output.length > 0 && (
|
|
<>
|
|
<Divider orientation="left">
|
|
<h4>{t("node.outputVariable")}</h4>
|
|
</Divider>
|
|
{data.output.map((v, i) => {
|
|
const required = v.indexOf("?") == -1;
|
|
return (
|
|
<Form.Item
|
|
label={`[${i}]`}
|
|
name={`output.${i}.name`}
|
|
key={`output.${i}.name`}
|
|
required={required}
|
|
>
|
|
<Input disabled={true} />
|
|
</Form.Item>
|
|
);
|
|
})}
|
|
</>
|
|
)}
|
|
</Form>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const Inspector: FC = () => {
|
|
const workspace = {
|
|
editingNode: useWorkspace((state) => state.editingNode),
|
|
editingTree: useWorkspace((state) => state.editingTree),
|
|
editingNodeDef: useWorkspace((state) => state.editingNodeDef),
|
|
};
|
|
let isEditingNode = false;
|
|
let isEditingTree = false;
|
|
let isEditingNodeDef = false;
|
|
if (workspace.editingNodeDef) {
|
|
isEditingNodeDef = true;
|
|
} else if (workspace.editingTree) {
|
|
isEditingTree = true;
|
|
} else if (workspace.editingNode) {
|
|
isEditingNode = true;
|
|
}
|
|
return (
|
|
<Flex
|
|
vertical
|
|
className="b3-inspector"
|
|
style={{ height: "100%", width: "340px", borderLeft: `1px solid var(--b3-color-border)` }}
|
|
>
|
|
{isEditingNodeDef && <NodeDefInspector />}
|
|
{isEditingTree && <TreeInspector />}
|
|
{isEditingNode && <NodeInspector />}
|
|
</Flex>
|
|
);
|
|
};
|