From d80f956a4206a6795440ad6191c9a6bdc2b93572 Mon Sep 17 00:00:00 2001 From: Khwaja Date: Thu, 3 Jul 2025 16:20:02 -0500 Subject: [PATCH] Changes made to css and in process of adding delete feature --- .../components/CaseBuilder/CaseBuilder.tsx | 29 +++++++++++++++ .../CaseBuilder/PipelineBlock.module.css | 35 +++++++++---------- .../components/CaseBuilder/PipelineBlock.tsx | 34 ++++++++++++++---- 3 files changed, 72 insertions(+), 26 deletions(-) diff --git a/web/src/components/CaseBuilder/CaseBuilder.tsx b/web/src/components/CaseBuilder/CaseBuilder.tsx index 14d06df..a6d0afd 100644 --- a/web/src/components/CaseBuilder/CaseBuilder.tsx +++ b/web/src/components/CaseBuilder/CaseBuilder.tsx @@ -250,6 +250,32 @@ const onAddCenterOutput = (centerName: string, productName: string) => { }); }; + const onRemovePlant = (plantName: string) => { + setCircularData(prev => { + const next = { ...prev }; + delete next.plants[plantName]; + + return next; + }); + }; + const onRemoveProduct = (productName: string) => { + setCircularData(prev => { + const next = { ...prev }; + delete next.products[productName]; + + return next; + }); + }; + + const onRemoveCenter = (centerName: string) => { + setCircularData(prev => { + const next = { ...prev }; + delete next.centers[centerName]; + + return next; + }); + }; + return (
@@ -270,6 +296,9 @@ const onAddCenterOutput = (centerName: string, productName: string) => { onAddCenterOutput={onAddCenterOutput} onMoveCenter={onMoveCenter} centers={circularData.centers} + onRemovePlant={onRemovePlant} + onRemoveProduct={onRemoveProduct} + onRemoveCenter={onRemoveCenter} />
diff --git a/web/src/components/CaseBuilder/PipelineBlock.module.css b/web/src/components/CaseBuilder/PipelineBlock.module.css index 49a9a35..b7998c6 100644 --- a/web/src/components/CaseBuilder/PipelineBlock.module.css +++ b/web/src/components/CaseBuilder/PipelineBlock.module.css @@ -5,33 +5,30 @@ margin-bottom: 12px !important; } -.PlantNode, -.ProductNode, -.CenterNode { +:global(.react-flow__node.PlantNode), +:global(.react-flow__node.ProductNode), +:global(.react-flow__node.CenterNode) { border-color: rgba(0, 0, 0, 0.8) !important; color: black !important; font-size: 13px !important; border-width: 1px !important; border-radius: 6px !important; box-shadow: 0px 2px 4px -3px black !important; - width: 100%; - height: 100%; -} - -.PlantNode { - background-color: #8d8 !important; -} + width: 140px !important; + height: 40px !important; + align-items: center; + justify-content: center; + box-sizing: border-box; + display: flex; -.ProductNode { - background-color: #e6e6e6 !important; } -.CenterNode { - background-color: #d3a610; +:global(.react-flow__node.PlantNode) { + --xy-node-background-color: #8d8 !important; } - -:global(.react-flow__node-default), -:global(.react-flow__node-custom) { - width: 150px !important; - height: 60px !important; +:global(.react-flow__node.ProductNode) { + --xy-node-background-color: #e6e6e6 !important; } +:global(.react-flow__node.CenterNode) { + --xy-node-background-color: #d3a610 !important; +} \ No newline at end of file diff --git a/web/src/components/CaseBuilder/PipelineBlock.tsx b/web/src/components/CaseBuilder/PipelineBlock.tsx index 863de0f..3241728 100644 --- a/web/src/components/CaseBuilder/PipelineBlock.tsx +++ b/web/src/components/CaseBuilder/PipelineBlock.tsx @@ -1,10 +1,10 @@ import { CircularPlant, CircularProduct, CircularCenter } from "./CircularData"; import { Node, Edge } from "@xyflow/react"; import styles from "./PipelineBlock.module.css"; -import { ReactFlow, Background, Controls,MarkerType } from '@xyflow/react'; +import { ReactFlow, Background, Controls, MarkerType } from '@xyflow/react'; import Section from '../Common/Section'; import Card from '../Common/Card'; -import { useEffect } from "react"; +import { useEffect, useCallback } from "react"; import { Connection } from '@xyflow/react'; import CustomNode, { CustomNodeData }from "./NodesAndEdges"; @@ -21,6 +21,9 @@ interface PipelineBlockProps { onAddPlantOutput: (plantName: string, productName: string) => void; onAddCenterInput: (plantName: string, productName: string) => void; onAddCenterOutput: (plantName: string, productName: string) => void; + onRemovePlant: (id:string) => void; + onRemoveProduct: (id: string) => void; + onRemoveCenter: (id: string) => void; products: Record; plants: Record; @@ -74,6 +77,19 @@ const onNodeDragStop =(_:any, node: Node) => { } }; + const handleNodesDelete = useCallback((deleted: Node[]) => { + deleted.forEach((n) => { + const type = mapNameToType[n.id]; + if (type === "plant") { + props.onRemovePlant(n.id); + } else if (type === "product") { + props.onRemoveProduct(n.id); + } else if (type === "center") { + props.onRemoveCenter!(n.id); + } + }); + }, [props, mapNameToType]); + for (const [productName, product] of Object.entries(props.products) as [string, CircularProduct][]) { if(!product.x || !product.y) hasNullPositions = true; mapNameToType[productName] = "product"; @@ -81,10 +97,10 @@ const onNodeDragStop =(_:any, node: Node) => { id: productName, type: "default", data: {label: productName, type: 'product'}, - position: { x:product.x, y:product.y} + position: { x:product.x, y:product.y}, + className: 'ProductNode' }); } - console.log("ALL PLANTS:", props.plants); for (const [plantName, plant] of Object.entries(props.plants) as [string, CircularPlant][]) { if(!plant.x || !plant.y) hasNullPositions = true; mapNameToType[plantName] = "plant"; @@ -92,7 +108,8 @@ const onNodeDragStop =(_:any, node: Node) => { id: plantName, type: "default", data: {label: plantName, type: 'plant'}, - position: { x:plant.x, y:plant.y} + position: { x:plant.x, y:plant.y}, + className: 'PlantNode' }); if (plant) { @@ -130,12 +147,14 @@ const onNodeDragStop =(_:any, node: Node) => { type: "default", data: { label: centerName, type: "center"}, position: {x: center.x, y: center.y}, + className: 'CenterNode' }); if (center.input) { edges.push({ id: `${center.input}-${centerName}`, source: center.input, target:centerName, + animated: true, style: { stroke: "black"}, markerEnd: { type: MarkerType.ArrowClosed}, }); @@ -145,6 +164,7 @@ const onNodeDragStop =(_:any, node: Node) => { id: `${centerName}-${out}`, source: centerName, target:out, + animated: true, style: { stroke: "black"}, markerEnd: { type: MarkerType.ArrowClosed}, }); @@ -165,14 +185,14 @@ return (