Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated realTimeViz panel style

Browse Source
This commit is contained in:
Nalvazhuthi
2025-04-07 17:55:14 +05:30
parent f738fec057 8526379703
commit 4a05bb8cdf
74 changed files with 3243 additions and 3138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
View File

@@ -13,7 +13,8 @@ import {
useFloorItems,
useSelectedActionSphere,
useSelectedPath,
useSimulationPaths,
useSimulationStates,
useSocketStore,
} from "../../../../store/store";
import * as THREE from "three";
import * as Types from "../../../../types/world/worldTypes";
@@ -24,44 +25,53 @@ import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAss
const ConveyorMechanics: React.FC = () => {
const { selectedActionSphere } = useSelectedActionSphere();
const { selectedPath, setSelectedPath } = useSelectedPath();
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
const { simulationStates, setSimulationStates } = useSimulationStates();
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore();
const actionsContainerRef = useRef<HTMLDivElement>(null);
const triggersContainerRef = useRef<HTMLDivElement>(null);
const selectedPoint = useMemo(() => {
if (!selectedActionSphere) return null;
return simulationPaths
return simulationStates
.filter(
(path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
)
.flatMap((path) => path.points)
.find((point) => point.uuid === selectedActionSphere.point.uuid);
}, [selectedActionSphere, simulationPaths]);
.find((point) => point.uuid === selectedActionSphere.points.uuid);
}, [selectedActionSphere, simulationStates]);
const updateBackend = async (updatedPath: Types.ConveyorEventsSchema | undefined) => {
if (!updatedPath) return;
// const email = localStorage.getItem("email");
// const organization = email ? email.split("@")[1].split(".")[0] : "";
// console.log('updatedPath: ', updatedPath);
// const a = await setEventApi(
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "";
// await setEventApi(
// organization,
// updatedPath.modeluuid,
// updatedPath.points
// { type: "Conveyor", points: updatedPath.points, speed: updatedPath.speed }
// );
// console.log('a: ', a);
const data = {
organization: organization,
modeluuid: updatedPath.modeluuid,
eventData: { type: "Conveyor", points: updatedPath.points, speed: updatedPath.speed }
}
socket.emit('v2:model-asset:updateEventData', data);
}
const handleAddAction = () => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) => {
const updatedPaths = simulationStates.map((path) => {
if (path.type === "Conveyor") {
return {
...path,
points: path.points.map((point) => {
if (point.uuid === selectedActionSphere.point.uuid) {
if (point.uuid === selectedActionSphere.points.uuid) {
const actionIndex = point.actions.length;
const newAction = {
uuid: THREE.MathUtils.generateUUID(),
@@ -86,23 +96,23 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleDeleteAction = (uuid: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.filter(
@@ -119,23 +129,23 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleActionSelect = (uuid: string, actionType: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.map((action) =>
@@ -167,12 +177,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Update the selected item to reflect changes
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
@@ -181,7 +191,7 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
)
.flatMap((path) => path.points)
.find((p) => p.uuid === selectedActionSphere.point.uuid)
.find((p) => p.uuid === selectedActionSphere.points.uuid)
?.actions.find((a) => a.uuid === uuid);
if (updatedAction) {
@@ -197,12 +207,12 @@ const ConveyorMechanics: React.FC = () => {
const handleMaterialSelect = (uuid: string, material: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.map((action) =>
@@ -222,12 +232,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Update selected item if it's the current action
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
@@ -244,12 +254,12 @@ const ConveyorMechanics: React.FC = () => {
const handleDelayChange = (uuid: string, delay: number | string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.map((action) =>
@@ -266,12 +276,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleSpawnIntervalChange = (
@@ -280,12 +290,12 @@ const ConveyorMechanics: React.FC = () => {
) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.map((action) =>
@@ -304,18 +314,18 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleSpeedChange = (speed: number | string) => {
if (!selectedPath) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
);
@@ -323,24 +333,24 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
};
const handleAddTrigger = () => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) => {
if (point.uuid === selectedActionSphere.point.uuid) {
if (point.uuid === selectedActionSphere.points.uuid) {
const triggerIndex = point.triggers.length;
const newTrigger = {
uuid: THREE.MathUtils.generateUUID(),
@@ -362,23 +372,23 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleDeleteTrigger = (uuid: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
triggers: point.triggers.filter(
@@ -395,23 +405,23 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleTriggerSelect = (uuid: string, triggerType: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
triggers: point.triggers.map((trigger) =>
@@ -430,12 +440,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Ensure the selectedItem is updated immediately
const updatedTrigger = updatedPaths
@@ -451,12 +461,12 @@ const ConveyorMechanics: React.FC = () => {
// Update the toggle handlers to immediately update the selected item
const handleActionToggle = (uuid: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.map((action) => ({
@@ -474,12 +484,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Immediately update the selected item if it's the one being toggled
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
@@ -497,12 +507,12 @@ const ConveyorMechanics: React.FC = () => {
const handleTriggerToggle = (uuid: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
triggers: point.triggers.map((trigger) => ({
@@ -520,12 +530,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Immediately update the selected item if it's the one being toggled
if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {
@@ -542,12 +552,12 @@ const ConveyorMechanics: React.FC = () => {
const handleTriggerBufferTimeChange = (uuid: string, bufferTime: number) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
triggers: point.triggers.map((trigger) =>
@@ -566,12 +576,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Immediately update selectedItem if it's the currently selected trigger
if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {

97
app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx
View File

@@ -1,56 +1,79 @@
import React, { useRef, useMemo } from "react";
import { InfoIcon } from "../../../icons/ExportCommonIcons";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationPaths } from "../../../../store/store";
import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
import * as Types from '../../../../types/world/worldTypes';
import PositionInput from "../customInput/PositionInputs";
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
const VehicleMechanics: React.FC = () => {
const { selectedActionSphere } = useSelectedActionSphere();
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
const { simulationStates, setSimulationStates } = useSimulationStates();
const { eyeDropMode, setEyeDropMode } = useEyeDropMode();
const { editingPoint, setEditingPoint } = useEditingPoint();
const { previewPosition, setPreviewPosition } = usePreviewPosition();
const { socket } = useSocketStore();
const propertiesContainerRef = useRef<HTMLDivElement>(null);
const { selectedPoint, connectedPointUuids } = useMemo(() => {
if (!selectedActionSphere?.point?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
const vehiclePaths = simulationPaths.filter(
const vehiclePaths = simulationStates.filter(
(path): path is Types.VehicleEventsSchema => path.type === "Vehicle"
);
const point = vehiclePaths.find(
(path) => path.point.uuid === selectedActionSphere.point.uuid
)?.point;
const points = vehiclePaths.find(
(path) => path.points.uuid === selectedActionSphere.points.uuid
)?.points;
if (!point) return { selectedPoint: null, connectedPointUuids: [] };
if (!points) return { selectedPoint: null, connectedPointUuids: [] };
const connectedUuids: string[] = [];
if (point.connections?.targets) {
point.connections.targets.forEach(target => {
if (points.connections?.targets) {
points.connections.targets.forEach(target => {
connectedUuids.push(target.pointUUID);
});
}
return {
selectedPoint: point,
selectedPoint: points,
connectedPointUuids: connectedUuids
};
}, [selectedActionSphere, simulationPaths]);
}, [selectedActionSphere, simulationStates]);
const handleActionUpdate = React.useCallback((updatedAction: Partial<Types.VehicleEventsSchema['point']['actions']>) => {
if (!selectedActionSphere?.point?.uuid) return;
const updateBackend = async (updatedPath: Types.VehicleEventsSchema | undefined) => {
if (!updatedPath) return;
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "";
const updatedPaths = simulationPaths.map((path) => {
if (path.type === "Vehicle" && path.point.uuid === selectedActionSphere.point.uuid) {
// await setEventApi(
// organization,
// updatedPath.modeluuid,
// { type: "Vehicle", points: updatedPath.points }
// );
const data = {
organization: organization,
modeluuid: updatedPath.modeluuid,
eventData: { type: "Vehicle", points: updatedPath.points }
}
socket.emit('v2:model-asset:updateEventData', data);
}
const handleActionUpdate = React.useCallback((updatedAction: Partial<Types.VehicleEventsSchema['points']['actions']>) => {
if (!selectedActionSphere?.points?.uuid) return;
const updatedPaths = simulationStates.map((path) => {
if (path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid) {
return {
...path,
point: {
...path.point,
points: {
...path.points,
actions: {
...path.point.actions,
...path.points.actions,
...updatedAction
}
}
@@ -59,14 +82,15 @@ const VehicleMechanics: React.FC = () => {
return path;
});
setSimulationPaths(updatedPaths);
}, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
const updatedPath = updatedPaths.find(
(path): path is Types.VehicleEventsSchema =>
path.type === "Vehicle" &&
path.points.uuid === selectedActionSphere.points.uuid
);
updateBackend(updatedPath);
const handleStartPointChange = React.useCallback((position: { x: number, y: number }) => {
}, [handleActionUpdate]);
const handleEndPointChange = React.useCallback((position: { x: number, y: number }) => {
}, [handleActionUpdate]);
setSimulationStates(updatedPaths);
}, [selectedActionSphere?.points?.uuid, simulationStates, setSimulationStates]);
const handleHitCountChange = React.useCallback((hitCount: number) => {
handleActionUpdate({ hitCount });
@@ -77,14 +101,14 @@ const VehicleMechanics: React.FC = () => {
}, [handleActionUpdate]);
const handleSpeedChange = React.useCallback((speed: number) => {
if (!selectedActionSphere?.point?.uuid) return;
if (!selectedActionSphere?.points?.uuid) return;
const updatedPaths = simulationPaths.map((path) => {
if (path.type === "Vehicle" && path.point.uuid === selectedActionSphere.point.uuid) {
const updatedPaths = simulationStates.map((path) => {
if (path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid) {
return {
...path,
point: {
...path.point,
points: {
...path.points,
speed: speed
}
};
@@ -92,8 +116,15 @@ const VehicleMechanics: React.FC = () => {
return path;
});
setSimulationPaths(updatedPaths);
}, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
const updatedPath = updatedPaths.find(
(path): path is Types.VehicleEventsSchema =>
path.type === "Vehicle" &&
path.points.uuid === selectedActionSphere.points.uuid
);
updateBackend(updatedPath);
setSimulationStates(updatedPaths);
}, [selectedActionSphere?.points?.uuid, simulationStates, setSimulationStates]);
const handleStartEyeDropClick = () => {
setEditingPoint('start');

2
app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
View File

@@ -33,7 +33,7 @@ const GlobalProperties: React.FC = () => {
const { setPlaneValue, setGridValue, planeValue, gridValue } =
useTileDistance();
useEffect(() => {
// console.log(gridValue, planeValue, "values");
}, [gridValue, planeValue]);
const { socket } = useSocketStore();
const { limitDistance, setLimitDistance } = useLimitDistance();

2
app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx
View File

@@ -45,7 +45,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
if (response.status === 200) {
console.log(response.data);
setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration)

2
app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx
View File

@@ -45,7 +45,7 @@ const FlotingWidgetInput = (props: Props) => {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
if (response.status === 200) {
console.log(response.data);
setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration)

2
app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx
View File

@@ -45,7 +45,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
if (response.status === 200) {
console.log(response.data);
setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration)

38
app/src/components/layout/sidebarRight/visualization/design/Design.tsx
View File

@@ -42,16 +42,19 @@ const Design = () => {
const [elementColor, setElementColor] = useState("#6f42c1");
const [showColorPicker, setShowColorPicker] = useState(false);
const [chartElements, setChartElements] = useState<ChartElement[]>([]);
const [selectedElementToStyle, setSelectedElementToStyle] = useState<string | null>(null);
const [selectedElementToStyle, setSelectedElementToStyle] = useState<
string | null
>(null);
const [nameInput, setNameInput] = useState("");
const chartRef = useRef<HTMLDivElement>(null);
const { selectedChartId, setSelectedChartId, widgets, setWidgets } = useWidgetStore();
const { selectedChartId, setSelectedChartId, widgets, setWidgets } =
useWidgetStore();
// Initialize name input and extract elements when selectedChartId changes
useEffect(() => {
setNameInput(selectedChartId?.header || selectedChartId?.title || "");
if (!chartRef.current) return;
const timer = setTimeout(() => {
@@ -65,13 +68,16 @@ const Design = () => {
})
.map((el, index) => {
const tagName = el.tagName.toLowerCase();
const className = typeof el.className === "string" ? el.className : "";
const className =
typeof el.className === "string" ? el.className : "";
const textContent = el.textContent?.trim() || "";
let selector = tagName;
if (className && typeof className === "string") {
const classList = className.split(/\s+/).filter((c) => c.length > 0);
const classList = className
.split(/\s+/)
.filter((c) => c.length > 0);
if (classList.length > 0) {
selector += "." + classList.join(".");
}
@@ -126,7 +132,13 @@ const Design = () => {
useEffect(() => {
applyStyles();
}, [selectedFont, selectedSize, selectedWeight, elementColor, selectedElementToStyle]);
}, [
selectedFont,
selectedSize,
selectedWeight,
elementColor,
selectedElementToStyle,
]);
const handleUpdateWidget = (updatedProperties: Partial<Widget>) => {
if (!selectedChartId) return;
@@ -138,7 +150,9 @@ const Design = () => {
setSelectedChartId(updatedChartId);
const updatedWidgets = widgets.map((widget) =>
widget.id === selectedChartId.id ? { ...widget, ...updatedProperties } : widget
widget.id === selectedChartId.id
? { ...widget, ...updatedProperties }
: widget
);
setWidgets(updatedWidgets);
};
@@ -146,7 +160,7 @@ const Design = () => {
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newName = e.target.value;
setNameInput(newName);
if (selectedChartId?.title) {
handleUpdateWidget({ title: newName });
} else if (selectedChartId?.header) {
@@ -155,12 +169,12 @@ const Design = () => {
};
const defaultChartData = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: elementColor,
borderColor: "#ffffff",
backgroundColor: "#6f42c1",
borderColor: "#b392f0",
borderWidth: 1,
},
],
@@ -311,4 +325,4 @@ const Design = () => {
);
};
export default Design;
export default Design;