Merging dev into main #49
@@ -19,20 +19,20 @@ export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNode
|
|||||||
|
|
||||||
// Node Toolbar definition, contains node delete functionality
|
// Node Toolbar definition, contains node delete functionality
|
||||||
|
|
||||||
type ToolbarProps= {
|
type ToolbarProps = {
|
||||||
nodeId: string;
|
nodeId: string;
|
||||||
allowDelete: boolean;
|
allowDelete: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function Toolbar({nodeId, allowDelete}:ToolbarProps) {
|
export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
|
||||||
const { setNodes, setEdges } = useReactFlow();
|
const {setNodes, setEdges} = useReactFlow();
|
||||||
|
|
||||||
const handleDelete = () => {
|
const handleDelete = () => {
|
||||||
setNodes((nds) => nds.filter((n) => n.id !== nodeId));
|
setNodes((nds) => nds.filter((n) => n.id !== nodeId));
|
||||||
setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
|
setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<NodeToolbar >
|
<NodeToolbar>
|
||||||
<button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button>
|
<button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button>
|
||||||
</NodeToolbar>);
|
</NodeToolbar>);
|
||||||
}
|
}
|
||||||
@@ -47,13 +47,13 @@ type StartNodeProps = {
|
|||||||
data: startNodeData;
|
data: startNodeData;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const StartNode= ({ id, data }: StartNodeProps) => {
|
export const StartNode = ({id, data}: StartNodeProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Toolbar nodeId={id} allowDelete={false}/>
|
<Toolbar nodeId={id} allowDelete={false}/>
|
||||||
<div className="default-node__start">
|
<div className="default-node__start">
|
||||||
<div> data test {data.label} </div>
|
<div> data test {data.label} </div>
|
||||||
<Handle type="source" position={Position.Right} id="start" />
|
<Handle type="source" position={Position.Right} id="start"/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@@ -67,13 +67,13 @@ type EndNodeProps = {
|
|||||||
data: endNodeData;
|
data: endNodeData;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const EndNode= ({ id, data }: EndNodeProps) => {
|
export const EndNode = ({id, data}: EndNodeProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Toolbar nodeId={id} allowDelete={false}/>
|
<Toolbar nodeId={id} allowDelete={false}/>
|
||||||
<div className="default-node__end">
|
<div className="default-node__end">
|
||||||
<div> {data.label} </div>
|
<div> {data.label} </div>
|
||||||
<Handle type="target" position={Position.Left} id="end" />
|
<Handle type="target" position={Position.Left} id="end"/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@@ -87,15 +87,15 @@ type PhaseNodeProps = {
|
|||||||
data: phaseNodeData;
|
data: phaseNodeData;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
|
export const PhaseNode = ({id, data}: PhaseNodeProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Toolbar nodeId={id} allowDelete={true}/>
|
<Toolbar nodeId={id} allowDelete={true}/>
|
||||||
<div className="default-node__phase">
|
<div className="default-node__phase">
|
||||||
<div> phase {data.number} {data.label} </div>
|
<div> phase {data.number} {data.label} </div>
|
||||||
<Handle type="target" position={Position.Left} id="target" />
|
<Handle type="target" position={Position.Left} id="target"/>
|
||||||
<Handle type="target" position={Position.Bottom } id="norms" />
|
<Handle type="target" position={Position.Bottom} id="norms"/>
|
||||||
<Handle type="source" position={Position.Right} id="source" />
|
<Handle type="source" position={Position.Right} id="source"/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@@ -109,13 +109,13 @@ type NormNodeProps = {
|
|||||||
data: normNodeData;
|
data: normNodeData;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const NormNode= ({ id, data }: NormNodeProps) => {
|
export const NormNode = ({id, data}: NormNodeProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Toolbar nodeId={id} allowDelete={true}/>
|
<Toolbar nodeId={id} allowDelete={true}/>
|
||||||
<div className="default-node__norm">
|
<div className="default-node__norm">
|
||||||
<div> Norm {data.label} </div>
|
<div> Norm {data.label} </div>
|
||||||
<Handle type="source" position={Position.Right} id="NormSource" />
|
<Handle type="source" position={Position.Right} id="NormSource"/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user