From 86409644e1d8c058a331d9abe30cde1b9467446c Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Fri, 21 Mar 2025 10:34:01 +0530 Subject: [PATCH] resolved build errors --- .../sidebarLeft/visualization/Templates.tsx | 1 - .../visualization/widgets/ChartComponent.tsx | 20 +- .../visualization/widgets/Widgets3D.tsx | 1 - .../visualization/widgets/WidgetsFloating.tsx | 198 ++------------ .../mechanics/MachineMechanics.tsx | 246 +++++++++--------- .../visualization/Visualization.tsx | 1 - .../sidebarRight/visualization/data/Data.tsx | 2 +- .../visualization/design/Design.tsx | 12 +- .../ui/charts/BarGraphComponent.tsx | 4 +- .../ui/charts/LineGraphComponent.tsx | 6 +- .../ui/charts/PieGraphComponent.tsx | 3 +- .../components/ui/componets/DisplayZone.tsx | 3 +- .../ui/componets/DraggableWidget.tsx | 2 - .../ui/componets/RealTimeVisulization.tsx | 1 + .../ui/inputs/InputWithDropDown.tsx | 53 ++++ .../components/ui/inputs/LabledDropdown.tsx | 28 ++ .../ui/inputs/MultiLevelDropDown.tsx | 12 +- app/src/functions/handleResizePannel.ts | 24 ++ 18 files changed, 296 insertions(+), 321 deletions(-) create mode 100644 app/src/components/ui/inputs/InputWithDropDown.tsx create mode 100644 app/src/components/ui/inputs/LabledDropdown.tsx create mode 100644 app/src/functions/handleResizePannel.ts diff --git a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx index 4528c06..5c47a6f 100644 --- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx +++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx @@ -1,4 +1,3 @@ -import React from "react"; import useTemplateStore from "../../../../store/useTemplateStore"; import { useSelectedZoneStore } from "../../../../store/useZoneStore"; diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx index 39da08d..e716668 100644 --- a/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useMemo } from "react"; import { Chart } from "chart.js/auto"; -import { useThemeStore } from "../../../../../store/useThemeStore"; +// import { useThemeStore } from "../../../../../store/useThemeStore"; // Define Props Interface interface ChartComponentProps { @@ -29,17 +29,17 @@ const ChartComponent = ({ data: propsData, }: ChartComponentProps) => { const canvasRef = useRef(null); - const { themeColor } = useThemeStore(); + // const { themeColor } = useThemeStore(); // Memoize Theme Colors to Prevent Unnecessary Recalculations - const buttonActionColor = useMemo( - () => themeColor[0] || "#5c87df", - [themeColor] - ); - const buttonAbortColor = useMemo( - () => themeColor[1] || "#ffffff", - [themeColor] - ); + // const buttonActionColor = useMemo( + // () => themeColor[0] || "#5c87df", + // [themeColor] + // ); + // const buttonAbortColor = useMemo( + // () => themeColor[1] || "#ffffff", + // [themeColor] + // ); // Memoize Font Weight Mapping const chartFontWeightMap = useMemo( diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx index 9a14410..7fc6bba 100644 --- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx @@ -1,4 +1,3 @@ -import React from 'react' const Widgets3D = () => { return ( diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx index 9247508..3cde77b 100644 --- a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx @@ -1,191 +1,41 @@ -import React, { - useState, - DragEvent, - MouseEvent, - useRef, - useEffect, -} from "react"; +import React, { useState } from "react"; -const WidgetsFloating: React.FC = () => { - const stateWorking = [ - { "Oil Tank": "24/341" }, - { "Oil Refin": "36.023" }, - { Transmission: "36.023" }, - { Fuel: "36732" }, - { Power: "1300" }, - { Time: "13-9-2023" }, - ]; +interface Widget { + id: string; + name: string; +} - // State for storing the dragged widget and its position - const [draggedFloating, setDraggedFloating] = useState(null); - const [position, setPosition] = useState<{ x: number; y: number }>({ - x: 0, - y: 0, - }); - - // State to store all placed widgets with their positions - const [placedWidgets, setPlacedWidgets] = useState< - { name: string; x: number; y: number }[] - >([]); - - const canvasRef = useRef(null); - - // Handle the drag start event +const WidgetsFloating = () => { + const [widgets, setWidgets] = useState([ + { id: "1", name: "Working State Widget" }, + { id: "2", name: "Floating Widget 2" }, + { id: "3", name: "Floating Widget 3" }, + { id: "4", name: "Floating Widget 4" }, + ]); + + console.log('setWidgets: ', setWidgets); + // Function to handle drag start const handleDragStart = ( - event: DragEvent, - widget: string + e: React.DragEvent, + widget: Widget ) => { - setDraggedFloating(widget); - // Initialize position to the current position when drag starts - setPosition({ x: event.clientX, y: event.clientY }); + e.dataTransfer.setData("application/json", JSON.stringify(widget)); }; - // Handle the drag move event - const handleDragMove = (event: MouseEvent) => { - if (!draggedFloating) return; - - // Calculate new position and update it - const canvas = canvasRef.current; - if (canvas) { - const canvasRect = canvas.getBoundingClientRect(); - const newX = event.clientX - canvasRect.left; - const newY = event.clientY - canvasRect.top; - setPosition({ x: newX, y: newY }); - } - }; - - // Handle the drag end event - const handleDragEnd = () => { - if (draggedFloating) { - // Store the final position of the dragged widget - setPlacedWidgets((prevWidgets) => [ - ...prevWidgets, - { name: draggedFloating, x: position.x, y: position.y }, - ]); - // Reset the dragged floating widget after dragging is completed - setDraggedFloating(null); - } - }; - - useEffect(() => { - console.log("position: ", position); - console.log("draggedFloating: ", draggedFloating); - }, [draggedFloating, position]); - return ( -
- {/* The floating widget that's being dragged */} - {draggedFloating && ( +
+ {widgets.map((widget) => (
- {draggedFloating} -
- )} - - {/* Render all placed widgets */} - {placedWidgets.map((widget, index) => ( -
handleDragStart(e, widget)} > {widget.name}
))} - - {/* The rest of your floating widgets */} -
handleDragStart(e, "working-state")} - style={{ position: "absolute", top: "50px", left: "50px" }} - > -
-
-
State
-
- Working - -
-
-
- Factory -
-
-
- {stateWorking.map((state, index) => { - const key = Object.keys(state)[0]; - const value = state[key]; - return ( -
- {key}: - {value} -
- ); - })} -
-
- - {/* Other floating widgets */} -
handleDragStart(e, "floating-2")} - style={{ position: "absolute", top: "120px", left: "150px" }} - > - floating-2 -
-
handleDragStart(e, "floating-3")} - style={{ position: "absolute", top: "200px", left: "250px" }} - > - floating-3 -
-
handleDragStart(e, "floating-4")} - style={{ position: "absolute", top: "300px", left: "350px" }} - > - floating-4 -
); }; -export default WidgetsFloating; \ No newline at end of file +export default WidgetsFloating; diff --git a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx index a240de8..803c96a 100644 --- a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx +++ b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx @@ -1,10 +1,15 @@ -import React, { useState } from "react"; +import React, { useRef, useState } from "react"; import { AddIcon, InfoIcon, RemoveIcon, ResizeHeightIcon, } from "../../../icons/ExportCommonIcons"; +import RenameInput from "../../../ui/inputs/RenameInput"; +import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; +import LabledDropdown from "../../../ui/inputs/LabledDropdown"; +import RegularDropDown from "../../../ui/inputs/RegularDropDown"; +import { handleResize } from "../../../../functions/handleResizePannel"; const MachineMechanics: React.FC = () => { const [actionList, setActionList] = useState([]); @@ -13,7 +18,9 @@ const MachineMechanics: React.FC = () => { type: "action" | "trigger"; name: string; } | null>(null); - const [editedName, setEditedName] = useState(""); + + const actionsContainerRef = useRef(null); + const triggersContainerRef = useRef(null); const handleAddAction = () => { setActionList([...actionList, `Action ${actionList.length + 1}`]); @@ -30,7 +37,6 @@ const MachineMechanics: React.FC = () => { selectedItem.name === actionList[index] ) { setSelectedItem(null); - setEditedName(""); } }; @@ -41,133 +47,135 @@ const MachineMechanics: React.FC = () => { selectedItem.name === triggerList[index] ) { setSelectedItem(null); - setEditedName(""); } }; const handleSelectItem = (type: "action" | "trigger", name: string) => { setSelectedItem({ type, name }); - setEditedName(name); - }; - - const handleSave = () => { - if (!selectedItem) return; - - if (selectedItem.type === "action") { - setActionList( - actionList.map((action) => - action === selectedItem.name ? editedName : action - ) - ); - } else if (selectedItem.type === "trigger") { - setTriggerList( - triggerList.map((trigger) => - trigger === selectedItem.name ? editedName : trigger - ) - ); - } - - setSelectedItem({ ...selectedItem, name: editedName }); }; return (
-
-
-
Actions
-
- Add -
-
-
-
- {actionList.map((action, index) => ( -
-
handleSelectItem("action", action)}> - {action} -
-
handleRemoveAction(index)} - > - -
-
- ))} -
-
- -
-
+
Selected Object
+
+
Process:
+ {}} + />
-
-
-
Triggers
-
- Add -
-
-
-
- {triggerList.map((trigger, index) => ( -
-
handleSelectItem("trigger", trigger)}> - {trigger} -
-
handleRemoveTrigger(index)} - > - -
-
- ))} -
-
- -
-
-
-
- {selectedItem && ( - <> -
- - setEditedName(e.target.value)} - /> +
+
+
+
Actions
+
+ Add
- {/* Add other Properties Like: - * Object Selection Dropdown - * Buffer Time - * Get Value From Object - * Action - * etc. - */} -
Update
{/* remove this */} - - )} -
-
- - By Selecting Path, you can create Object Triggers. +
+
+
+ {actionList.map((action, index) => ( +
+
handleSelectItem("action", action)} + > + +
+
handleRemoveAction(index)} + > + +
+
+ ))} +
+
handleResize(e, actionsContainerRef)} + > + +
+
+
+
+
+
Triggers
+
+ Add +
+
+
+
+ {triggerList.map((trigger, index) => ( +
+
handleSelectItem("trigger", trigger)} + > + +
+
handleRemoveTrigger(index)} + > + +
+
+ ))} +
+
handleResize(e, triggersContainerRef)} + > + +
+
+
+
+ {selectedItem && ( + <> +
{selectedItem.name}
+ + + + )} +
+
+ + By Selecting Path, you can create Object Triggers. +
); diff --git a/app/src/components/layout/sidebarRight/visualization/Visualization.tsx b/app/src/components/layout/sidebarRight/visualization/Visualization.tsx index c29aef2..f47cc27 100644 --- a/app/src/components/layout/sidebarRight/visualization/Visualization.tsx +++ b/app/src/components/layout/sidebarRight/visualization/Visualization.tsx @@ -1,5 +1,4 @@ import { useState } from "react"; -import Search from "../../../ui/inputs/Search"; import ToggleHeader from "../../../ui/inputs/ToggleHeader"; import Data from "./data/Data"; import Design from "./design/Design"; diff --git a/app/src/components/layout/sidebarRight/visualization/data/Data.tsx b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx index e08c4d9..cd20aea 100644 --- a/app/src/components/layout/sidebarRight/visualization/data/Data.tsx +++ b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { useWidgetStore } from "../../../../../store/useWidgetStore"; import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons"; import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown"; diff --git a/app/src/components/layout/sidebarRight/visualization/design/Design.tsx b/app/src/components/layout/sidebarRight/visualization/design/Design.tsx index 93332dd..89e1682 100644 --- a/app/src/components/layout/sidebarRight/visualization/design/Design.tsx +++ b/app/src/components/layout/sidebarRight/visualization/design/Design.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import { useState } from "react"; import { useWidgetStore } from "../../../../../store/useWidgetStore"; import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent"; import RegularDropDown from "../../../../ui/inputs/RegularDropDown"; @@ -25,10 +25,20 @@ interface Widget { const Design = () => { const [selectedName, setSelectedName] = useState("drop down"); + console.log("selectedName: ", selectedName); + const [selectedElement, setSelectedElement] = useState("drop down"); + console.log("selectedElement: ", selectedElement); + const [selectedFont, setSelectedFont] = useState("drop down"); + console.log("selectedFont: ", selectedFont); + const [selectedSize, setSelectedSize] = useState("drop down"); + console.log("selectedSize: ", selectedSize); + const [selectedWeight, setSelectedWeight] = useState("drop down"); + console.log("selectedWeight: ", selectedWeight); + const [elementColor, setElementColor] = useState("#6f42c1"); // Default color for elements const [showColorPicker, setShowColorPicker] = useState(false); // Manage visibility of the color picker diff --git a/app/src/components/ui/charts/BarGraphComponent.tsx b/app/src/components/ui/charts/BarGraphComponent.tsx index 466d4df..9a07473 100644 --- a/app/src/components/ui/charts/BarGraphComponent.tsx +++ b/app/src/components/ui/charts/BarGraphComponent.tsx @@ -1,6 +1,6 @@ -import { useRef, useMemo } from "react"; +import { useMemo } from "react"; -import { Bar, Line } from "react-chartjs-2"; +import { Bar } from "react-chartjs-2"; interface ChartComponentProps { type: any; diff --git a/app/src/components/ui/charts/LineGraphComponent.tsx b/app/src/components/ui/charts/LineGraphComponent.tsx index 98b9d61..cf1a47f 100644 --- a/app/src/components/ui/charts/LineGraphComponent.tsx +++ b/app/src/components/ui/charts/LineGraphComponent.tsx @@ -1,4 +1,4 @@ -import { useRef, useMemo } from "react"; +import { useMemo } from "react"; import { Line } from "react-chartjs-2"; interface ChartComponentProps { @@ -79,8 +79,8 @@ const LineGraphComponent = ({ { label: "My First Dataset", data: [65, 59, 80, 81, 56, 55, 40], - backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple) - borderColor: "#ffffff", // Keeping border color white + backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple) + borderColor: "#ffffff", // Keeping border color white borderWidth: 2, fill: false, }, diff --git a/app/src/components/ui/charts/PieGraphComponent.tsx b/app/src/components/ui/charts/PieGraphComponent.tsx index fb553fb..b52ee30 100644 --- a/app/src/components/ui/charts/PieGraphComponent.tsx +++ b/app/src/components/ui/charts/PieGraphComponent.tsx @@ -1,4 +1,4 @@ -import { useRef, useMemo } from "react"; +import { useMemo } from "react"; import { Pie } from "react-chartjs-2"; interface ChartComponentProps { @@ -53,6 +53,7 @@ const PieChartComponent = ({ .getPropertyValue("--accent-color") .trim(); + console.log("accentColor: ", accentColor); const options = useMemo( () => ({ responsive: true, diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index b5fe0f0..3bf6b8f 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useRef } from "react"; -import { useSelectedZoneStore } from "../../../store/useZoneStore"; import { Widget } from "../../../store/useWidgetStore"; // Define the type for `Side` @@ -56,7 +55,9 @@ const DisplayZone: React.FC = ({ const [selectedOption, setSelectedOption] = React.useState( null ); + console.log('setSelectedOption: ', setSelectedOption); const [options, setOptions] = React.useState([]); + console.log('setOptions: ', setOptions); // Scroll to the selected option when it changes useEffect(() => { diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx index 6769890..0f13266 100644 --- a/app/src/components/ui/componets/DraggableWidget.tsx +++ b/app/src/components/ui/componets/DraggableWidget.tsx @@ -1,5 +1,3 @@ -import { useMemo, useState } from "react"; -import ChartComponent from "../../layout/sidebarLeft/visualization/widgets/ChartComponent"; import { useWidgetStore } from "../../../store/useWidgetStore"; import PieGraphComponent from "../charts/PieGraphComponent"; import BarGraphComponent from "../charts/BarGraphComponent"; diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 6daa075..7905769 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -100,3 +100,4 @@ const RealTimeVisulization: React.FC = () => { }; export default RealTimeVisulization; + diff --git a/app/src/components/ui/inputs/InputWithDropDown.tsx b/app/src/components/ui/inputs/InputWithDropDown.tsx new file mode 100644 index 0000000..ca51112 --- /dev/null +++ b/app/src/components/ui/inputs/InputWithDropDown.tsx @@ -0,0 +1,53 @@ +import React, { useState } from "react"; + +type InputWithDropDownProps = { + label: string; + value: string; + options?: string[]; // Array of dropdown options + activeOption?: string; // The currently active dropdown option +}; + +const InputWithDropDown: React.FC = ({ + label, + value, + options, + activeOption, +}) => { + const separatedWords = label + .split(/(?=[A-Z])/) + .map((word) => word.trim()) + .toString(); + + const [openDropdown, setOpenDropdown] = useState(false); + + return ( +
+ +
+ + +
{ + setOpenDropdown(true); + }} + > +
{activeOption}
+ {options && openDropdown && ( +
+ {options.map((option, index) => ( +
+ {option} +
+ ))} +
+ )} +
+
+
+ ); +}; + +export default InputWithDropDown; diff --git a/app/src/components/ui/inputs/LabledDropdown.tsx b/app/src/components/ui/inputs/LabledDropdown.tsx new file mode 100644 index 0000000..1d35d85 --- /dev/null +++ b/app/src/components/ui/inputs/LabledDropdown.tsx @@ -0,0 +1,28 @@ +import React, { useState } from "react"; +import RegularDropDown from "./RegularDropDown"; + +type LabledDropdownProps = { + defaultOption: string; // Initial active option + options: string[]; // Array of dropdown options +}; + +const LabledDropdown: React.FC = ({ defaultOption, options }) => { + const [activeOption, setActiveOption] = useState(defaultOption); // State for active option + + const handleSelect = (option: string) => { + setActiveOption(option); // Update the active option state + }; + + return ( +
+
Type
+ +
+ ); +}; + +export default LabledDropdown; diff --git a/app/src/components/ui/inputs/MultiLevelDropDown.tsx b/app/src/components/ui/inputs/MultiLevelDropDown.tsx index 477111a..8ea8d89 100644 --- a/app/src/components/ui/inputs/MultiLevelDropDown.tsx +++ b/app/src/components/ui/inputs/MultiLevelDropDown.tsx @@ -47,9 +47,13 @@ const NestedDropdown = ({ {/* Submenu */} {open && (
- {React.Children.map(children, (child) => - React.cloneElement(child as React.ReactElement, { onSelect }) - )} + {React.Children.map(children, (child) => { + if (React.isValidElement(child)) { + // Clone the element and pass the `onSelect` prop only if it's expected + return React.cloneElement(child as React.ReactElement, { onSelect }); + } + return child; // Return non-element children as-is + })}
)}
@@ -134,4 +138,4 @@ const MultiLevelDropdown = ({ data }: { data: Record }) => { ); }; -export default MultiLevelDropdown; +export default MultiLevelDropdown; \ No newline at end of file diff --git a/app/src/functions/handleResizePannel.ts b/app/src/functions/handleResizePannel.ts new file mode 100644 index 0000000..235e97d --- /dev/null +++ b/app/src/functions/handleResizePannel.ts @@ -0,0 +1,24 @@ +export const handleResize = ( + e: React.MouseEvent, + containerRef: React.RefObject +) => { + if (!containerRef.current) return; // Ensure containerRef is not null + const startY = e.clientY; + const startHeight = containerRef.current.offsetHeight; + + const onMouseMove = (moveEvent: MouseEvent) => { + const newHeight = Math.max( + 120, + Math.min(400, startHeight + moveEvent.clientY - startY) + ); + containerRef.current!.style.height = `${newHeight}px`; + }; + + const onMouseUp = () => { + document.removeEventListener("mousemove", onMouseMove); + document.removeEventListener("mouseup", onMouseUp); + }; + + document.addEventListener("mousemove", onMouseMove); + document.addEventListener("mouseup", onMouseUp); +};