|
|
@ -30,6 +30,9 @@ interface PipelineBlockProps {
|
|
|
|
onRemovePlant: (id: string) => void;
|
|
|
|
onRemovePlant: (id: string) => void;
|
|
|
|
onRemoveProduct: (id: string) => void;
|
|
|
|
onRemoveProduct: (id: string) => void;
|
|
|
|
onRemoveCenter: (id: string) => void;
|
|
|
|
onRemoveCenter: (id: string) => void;
|
|
|
|
|
|
|
|
onRenameProduct: (prevName: string, newName: string) => void;
|
|
|
|
|
|
|
|
onRenamePlant: (prevName: string, newName: string) => void;
|
|
|
|
|
|
|
|
onRenameCenter: (prevName: string, newName: string) => void;
|
|
|
|
products: Record<string, CircularProduct>;
|
|
|
|
products: Record<string, CircularProduct>;
|
|
|
|
plants: Record<string, CircularPlant>;
|
|
|
|
plants: Record<string, CircularPlant>;
|
|
|
|
centers: Record<string, CircularCenter>;
|
|
|
|
centers: Record<string, CircularCenter>;
|
|
|
@ -169,6 +172,21 @@ const PipelineBlock: React.FC<PipelineBlockProps> = props => {
|
|
|
|
[props]
|
|
|
|
[props]
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onNodeDoubleClick = (ev: React.MouseEvent, node: Node<CustomNodeData>) => {
|
|
|
|
|
|
|
|
const oldName = node.data.label;
|
|
|
|
|
|
|
|
const newName = window.prompt("Enter new name", oldName);
|
|
|
|
|
|
|
|
if (!newName|| newName.trim().length === 0) return;
|
|
|
|
|
|
|
|
if (newName in mapNameToType) return;
|
|
|
|
|
|
|
|
if (node.data.type === "plant") {
|
|
|
|
|
|
|
|
props.onRenamePlant(oldName, newName);
|
|
|
|
|
|
|
|
} else if (node.data.type === "product") {
|
|
|
|
|
|
|
|
props.onRenameProduct(oldName, newName);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
else if (node.data.type === "center") {
|
|
|
|
|
|
|
|
props.onRenameCenter(oldName, newName);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const onLayout = () => {
|
|
|
|
const onLayout = () => {
|
|
|
|
const { nodes: ln, edges: le } = getLayoutedNodesAndEdges(nodes, edges);
|
|
|
|
const { nodes: ln, edges: le } = getLayoutedNodesAndEdges(nodes, edges);
|
|
|
|
ln.forEach(n => {
|
|
|
|
ln.forEach(n => {
|
|
|
@ -182,7 +200,7 @@ const PipelineBlock: React.FC<PipelineBlockProps> = props => {
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
if (hasNullPositions) onLayout();
|
|
|
|
if (hasNullPositions) onLayout();
|
|
|
|
}, [hasNullPositions]);
|
|
|
|
}, [hasNullPositions]);
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<>
|
|
|
|
<Section title="Pipeline" />
|
|
|
|
<Section title="Pipeline" />
|
|
|
@ -192,6 +210,7 @@ const PipelineBlock: React.FC<PipelineBlockProps> = props => {
|
|
|
|
nodes={nodes}
|
|
|
|
nodes={nodes}
|
|
|
|
edges={edges}
|
|
|
|
edges={edges}
|
|
|
|
onConnect={onConnect}
|
|
|
|
onConnect={onConnect}
|
|
|
|
|
|
|
|
onNodeDoubleClick={onNodeDoubleClick}
|
|
|
|
onNodeDragStop={onNodeDragStop}
|
|
|
|
onNodeDragStop={onNodeDragStop}
|
|
|
|
onNodesDelete={handleNodesDelete}
|
|
|
|
onNodesDelete={handleNodesDelete}
|
|
|
|
deleteKeyCode="delete"
|
|
|
|
deleteKeyCode="delete"
|
|
|
|