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

Merge remote-tracking branch 'origin/main-dev' into main-demo

Browse Source
This commit is contained in:
Vishnu
2025-12-20 17:41:30 +05:30
parent 786d4d0481 0d6bdf6157
commit 9a4edf07e5
10 changed files with 441 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/SimulationDashboard/DashboardEditor.tsx
View File

@@ -55,6 +55,7 @@ const DashboardEditor: React.FC = () => {
peekUpdateGraphData,
peekUpdateGraphTitle,
peekUpdateGraphType,
peekUpdateTextValue,
peekUpdateDataType,
peekUpdateCommonValue,
peekUpdateDataValue,
@@ -611,6 +612,13 @@ const DashboardEditor: React.FC = () => {
await updateBackend(updatedBlock);
}
}}
updateTextValue={async (blockId, elementId, textValue) => {
const updatedBlocks = peekUpdateTextValue(blockId, elementId, textValue);
const updatedBlock = getBlockFromPeekedBlocks(updatedBlocks, blockId);
if (updatedBlock) {
await updateBackend(updatedBlock);
}
}}
updateDataType={async (blockId, elementId, dataType) => {
const updatedBlocks = peekUpdateDataType(blockId, elementId, dataType);
const updatedBlock = getBlockFromPeekedBlocks(updatedBlocks, blockId);

341
app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
View File

@@ -21,10 +21,7 @@ interface BlockEditorProps {
updateBlockStyle: (blockId: string, style: React.CSSProperties) => void;
updateBlockSize: (blockId: string, size: { width: number; height: number }) => void;
updateBlockPosition: (blockId: string, position: { x: number; y: number }) => void;
updateBlockPositionType: (
blockId: string,
positionType: "relative" | "absolute" | "fixed"
) => void;
updateBlockPositionType: (blockId: string, positionType: "relative" | "absolute" | "fixed") => void;
updateBlockZIndex: (blockId: string, zIndex: number) => void;
handleRemoveBlock: (blockId: string) => void;
}
@@ -35,6 +32,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
selectedBlock,
updateBlockStyle,
updateBlockSize,
updateBlockPosition,
updateBlockPositionType,
updateBlockZIndex,
handleRemoveBlock,
@@ -42,56 +40,130 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
const [color, setColor] = useState("#000000");
useEffect(() => {
setColor(
rgbaToHex(
getCurrentBlockStyleValue(currentBlock, "backgroundColor") || "#000000"
)
);
setColor(rgbaToHex(getCurrentBlockStyleValue(currentBlock, "backgroundColor") || "#000000"));
}, [currentBlock]);
// Use position from VisualizationStore
const { editorPosition, setEditorPosition } = useVisualizationStore();
const panelRef = useRef<HTMLDivElement | null>(null);
const initialPositionRef = useRef<{ x: number; y: number } | null>(null);
const initialPositionRef = useRef<{ xPercent: number; yPercent: number } | null>(null);
const draggingRef = useRef(false);
const startXRef = useRef(0);
const startYRef = useRef(0);
const startLeftRef = useRef(0);
const startTopRef = useRef(0);
const position = editorPosition || { x: 100, y: 80 };
const setPosition = (newPosition: { x: number; y: number }) => {
setEditorPosition(newPosition);
// Get panel dimensions
const getPanelDimensions = () => {
const panelEl = panelRef.current || (blockEditorRef && (blockEditorRef as any).current);
const width = panelEl?.offsetWidth || 300;
const height = panelEl?.offsetHeight || 300;
return { width, height };
};
// Convert percentage position to pixels for rendering
const getPixelPosition = (): { x: number; y: number } => {
if (!editorPosition) {
return { x: 100, y: 80 };
}
const { width, height } = getPanelDimensions();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
let x = (editorPosition.xPercent / 100) * viewportWidth;
let y = (editorPosition.yPercent / 100) * viewportHeight;
// Ensure panel stays within bounds
const maxX = viewportWidth - width - 8;
const maxY = viewportHeight - height - 8;
x = Math.max(0, Math.min(x, maxX));
y = Math.max(0, Math.min(y, maxY));
return { x, y };
};
const position = getPixelPosition();
// Convert pixel position to percentage and save to store
const setPositionFromPixels = (pixelX: number, pixelY: number) => {
const { width, height } = getPanelDimensions();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Calculate percentage, ensuring panel stays within bounds
const maxXPercent = ((viewportWidth - width) / viewportWidth) * 100;
const maxYPercent = ((viewportHeight - height) / viewportHeight) * 100;
const xPercent = Math.max(0, Math.min((pixelX / viewportWidth) * 100, maxXPercent));
const yPercent = Math.max(0, Math.min((pixelY / viewportHeight) * 100, maxYPercent));
setEditorPosition({ xPercent, yPercent });
};
// Initialize position on mount
// compute exact initial position once we have panel dimensions
useEffect(() => {
if (!editorPosition) {
const panelEl = panelRef.current || (blockEditorRef && (blockEditorRef as any).current);
const width = panelEl?.offsetWidth || 300;
const nx = Math.max(0, window.innerWidth - width - 40);
const ny = 80;
initialPositionRef.current = { x: nx, y: ny };
setPosition({ x: nx, y: ny });
const { width } = getPanelDimensions();
const defaultX = Math.max(0, window.innerWidth - width - 40);
const defaultY = 80;
setPositionFromPixels(defaultX, defaultY);
initialPositionRef.current = {
xPercent: (defaultX / window.innerWidth) * 100,
yPercent: (defaultY / window.innerHeight) * 100,
};
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Handle window resize - update position to maintain relative placement
useEffect(() => {
return () => {
// cleanup in case
draggingRef.current = false;
const handleResize = () => {
if (editorPosition) {
// Force re-render with updated pixel position
// The percentage stays the same, but pixels recalculate
setEditorPosition({ ...editorPosition });
}
};
}, []);
const onPointerMove = (ev: PointerEvent) => {
if (!draggingRef.current) return;
const dx = ev.clientX - startXRef.current;
const dy = ev.clientY - startYRef.current;
const { width, height } = getPanelDimensions();
const maxX = window.innerWidth - width - 8;
const maxY = window.innerHeight - height - 8;
let nx = startLeftRef.current + dx;
let ny = startTopRef.current + dy;
if (nx < 0) nx = 0;
if (ny < 0) ny = 0;
if (nx > maxX) nx = maxX;
if (ny > maxY) ny = maxY;
setPositionFromPixels(nx, ny);
};
const onPointerUp = () => {
draggingRef.current = false;
window.removeEventListener("pointermove", onPointerMove);
window.removeEventListener("pointerup", onPointerUp);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener("pointermove", onPointerMove);
window.removeEventListener("pointerup", onPointerUp);
};
}, [editorPosition, setEditorPosition]);
const startDrag = (ev: React.PointerEvent) => {
if (ev.detail > 1) return;
ev.preventDefault();
const panel = panelRef.current || (blockEditorRef && (blockEditorRef as any).current);
if (!panel) return;
panel.setPointerCapture?.(ev.pointerId);
draggingRef.current = true;
startXRef.current = ev.clientX;
startYRef.current = ev.clientY;
@@ -102,28 +174,25 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
if (!draggingRef.current) return;
const dx = e.clientX - startXRef.current;
const dy = e.clientY - startYRef.current;
const panelEl = panelRef.current || (blockEditorRef && (blockEditorRef as any).current);
const width = panelEl?.offsetWidth || 300;
const height = panelEl?.offsetHeight || 300;
const { width, height } = getPanelDimensions();
const maxX = window.innerWidth - width - 8;
const maxY = window.innerHeight - height - 8;
let nx = startLeftRef.current + dx;
let ny = startTopRef.current + dy;
nx = Math.max(0, Math.min(nx, maxX));
ny = Math.max(0, Math.min(ny, maxY));
setPosition({ x: nx, y: ny });
if (nx < 0) nx = 0;
if (ny < 0) ny = 0;
if (nx > maxX) nx = maxX;
if (ny > maxY) ny = maxY;
setPositionFromPixels(nx, ny);
};
const onPointerUp = (e: PointerEvent) => {
draggingRef.current = false;
window.removeEventListener("pointermove", onPointerMove);
window.removeEventListener("pointerup", onPointerUp);
panel.releasePointerCapture?.(e.pointerId);
try {
(panel as Element).releasePointerCapture?.((e as any).pointerId);
} catch (err) { }
};
window.addEventListener("pointermove", onPointerMove);
@@ -132,35 +201,26 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
const resetPosition = () => {
if (initialPositionRef.current) {
setPosition(initialPositionRef.current);
setEditorPosition(initialPositionRef.current);
return;
}
const panelEl = panelRef.current || (blockEditorRef && (blockEditorRef as any).current);
const width = panelEl?.offsetWidth || 300;
const nx = Math.max(0, window.innerWidth - width - 40);
setPosition({ x: nx, y: 80 });
const { width } = getPanelDimensions();
const defaultX = Math.max(0, window.innerWidth - width - 40);
setPositionFromPixels(defaultX, 80);
};
return (
<div
ref={(el) => {
panelRef.current = el;
if (
blockEditorRef &&
typeof blockEditorRef === "object" &&
"current" in blockEditorRef
) {
if (blockEditorRef && typeof blockEditorRef === "object" && "current" in blockEditorRef) {
(blockEditorRef as any).current = el;
}
}}
className="panel block-editor-panel"
style={{ position: "fixed", left: position.x, top: position.y, zIndex: 999 }}
>
<div
className={`free-move-button`}
onDoubleClick={resetPosition}
onPointerDown={startDrag}
>
<div className={`free-move-button`} onDoubleClick={resetPosition} onPointerDown={startDrag}>
<ResizeHeightIcon />
</div>
@@ -177,48 +237,14 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
</div>
<div className="design-section-wrapper">
<div className="design-section">
<div className="section-header">Size</div>
<div className="select-type">
<InputWithDropDown
label="Width"
value={String(currentBlock.size?.width || 400)} // Ensure the value is a string
placeholder={"Width"}
onChange={(newValue) => {
updateBlockSize(selectedBlock, {
...currentBlock.size!,
width: Number(newValue), // Make sure to convert the string back to a number here
});
}}
/>
<InputWithDropDown
label="Height"
value={String(currentBlock.size?.height || 300)}
placeholder={"Width"}
onChange={(newValue) => {
updateBlockSize(selectedBlock, {
...currentBlock.size!,
height: Number(newValue),
});
}}
/>
</div>
</div>
<div className="design-section">
<div className="section-header">Position</div>
<div className="select-type">
{["relative", "absolute"].map((position) => (
<div
key={position}
className={`type ${currentBlock.positionType === position ? "active" : ""
}`}
onClick={() =>
updateBlockPositionType(
selectedBlock,
position as "relative" | "absolute" | "fixed"
)
}
className={`type ${currentBlock.positionType === position ? "active" : ""}`}
onClick={() => updateBlockPositionType(selectedBlock, position as "relative" | "absolute" | "fixed")}
>
{position.charAt(0).toUpperCase() + position.slice(1)}
</div>
@@ -227,48 +253,16 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
<div className="position-canvas">
<div className="canvas">
<div className="value padding-top">
<RenameInput
value={
getCurrentBlockStyleValue(currentBlock, "padding")
? String(
getCurrentBlockStyleValue(currentBlock, "padding")
)
: "120"
}
/>
<RenameInput value={getCurrentBlockStyleValue(currentBlock, "padding") ? String(getCurrentBlockStyleValue(currentBlock, "padding")) : "120"} />
</div>
<div className="value padding-right">
<RenameInput
value={
getCurrentBlockStyleValue(currentBlock, "padding")
? String(
getCurrentBlockStyleValue(currentBlock, "padding")
)
: "120"
}
/>
<RenameInput value={getCurrentBlockStyleValue(currentBlock, "padding") ? String(getCurrentBlockStyleValue(currentBlock, "padding")) : "120"} />
</div>
<div className="value padding-bottom">
<RenameInput
value={
getCurrentBlockStyleValue(currentBlock, "padding")
? String(
getCurrentBlockStyleValue(currentBlock, "padding")
)
: "120"
}
/>
<RenameInput value={getCurrentBlockStyleValue(currentBlock, "padding") ? String(getCurrentBlockStyleValue(currentBlock, "padding")) : "120"} />
</div>
<div className="value padding-left">
<RenameInput
value={
getCurrentBlockStyleValue(currentBlock, "padding")
? String(
getCurrentBlockStyleValue(currentBlock, "padding")
)
: "120"
}
/>
<RenameInput value={getCurrentBlockStyleValue(currentBlock, "padding") ? String(getCurrentBlockStyleValue(currentBlock, "padding")) : "120"} />
</div>
</div>
</div>
@@ -279,9 +273,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
label="Layer"
value={String(currentBlock.zIndex ?? 1)}
placeholder={"Layer"}
onChange={(newValue) =>
updateBlockZIndex(selectedBlock, Number(newValue))
}
onChange={(newValue) => updateBlockZIndex(selectedBlock, Number(newValue))}
/>
<button
className="increase-z"
@@ -302,7 +294,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
<button
className="reset"
onClick={() => {
updateBlockZIndex(selectedBlock, Number(1))
updateBlockZIndex(selectedBlock, Number(1));
}}
>
<ResetIcon />
@@ -311,16 +303,63 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
</div>
</div>
<div className="design-section">
<div className="section-header">Apperance</div>
<div className="design-section appearance">
<div className="section-header">Appearance</div>
<div className="design-datas-wrapper">
{currentBlock.positionType === "absolute" && (
<>
<InputWithDropDown
label="X-Position"
value={String(currentBlock.position?.x ?? 0)}
placeholder={"X"}
onChange={(newValue: string) => {
updateBlockPosition(selectedBlock, {
...(currentBlock.position || { x: 0, y: 0 }),
x: Number(newValue),
});
}}
/>
<InputWithDropDown
label="Y-Position"
value={String(currentBlock.position?.y ?? 0)}
placeholder={"Y"}
onChange={(newValue: string) => {
updateBlockPosition(selectedBlock, {
...(currentBlock.position || { x: 0, y: 0 }),
y: Number(newValue),
});
}}
/>
</>
)}
<InputWithDropDown
label="Width"
value={String(currentBlock.size?.width || 400)}
placeholder={"Width"}
onChange={(newValue) => {
updateBlockSize(selectedBlock, {
...currentBlock.size!,
width: Number(newValue),
});
}}
/>
<InputWithDropDown
label="Height"
value={String(currentBlock.size?.height || 300)}
placeholder={"Height"}
onChange={(newValue) => {
updateBlockSize(selectedBlock, {
...currentBlock.size!,
height: Number(newValue),
});
}}
/>
</div>
<InputRange
label={"Border Radius"}
min={0}
max={100}
value={(
parseInt(getCurrentBlockStyleValue(currentBlock, "borderRadius")) ||
8
)}
value={parseInt(getCurrentBlockStyleValue(currentBlock, "borderRadius")) || 8}
onChange={(newValue) => {
updateBlockStyle(selectedBlock, {
borderRadius: Number(newValue),
@@ -338,43 +377,21 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
onChange={(value) => {
setColor(value);
if (/^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value)) {
handleBackgroundColorChange(
currentBlock,
selectedBlock,
updateBlockStyle,
value
);
handleBackgroundColorChange(currentBlock, selectedBlock, updateBlockStyle, value);
}
}}
onUpdate={(value) => {
handleBackgroundColorChange(
currentBlock,
selectedBlock,
updateBlockStyle,
value
);
handleBackgroundColorChange(currentBlock, selectedBlock, updateBlockStyle, value);
}}
/>
<InputRange
label={"Opacity"}
min={0}
max={1}
step={0.1}
value={Math.round(
getAlphaFromRgba(
getCurrentBlockStyleValue(currentBlock, "backgroundColor")
)
)}
onChange={(value: number) =>
handleBackgroundAlphaChange(
currentBlock,
selectedBlock,
updateBlockStyle,
Number(value)
)
}
value={Math.round(getAlphaFromRgba(getCurrentBlockStyleValue(currentBlock, "backgroundColor")))}
onChange={(value: number) => handleBackgroundAlphaChange(currentBlock, selectedBlock, updateBlockStyle, Number(value))}
/>
<InputRange
label={"Blur"}

80
app/src/components/SimulationDashboard/components/element/ElementDesign.tsx
View File

@@ -25,6 +25,7 @@ interface ElementDesignProps {
updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void;
updateTextValue: (blockId: string, elementId: string, textValue: string) => void;
updateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => void;
updateCommonValue: (blockId: string, elementId: string, commonValue: string) => void;
updateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => void;
@@ -45,6 +46,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
updateElementZIndex,
updateGraphTitle,
updateGraphType,
updateTextValue,
}) => {
const [color, setColor] = useState("#000000");
@@ -52,19 +54,22 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
setColor(rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "#000000"));
}, [currentElement]);
const graphOptions = [
{ id: "line", label: "Line Chart" },
{ id: "bar", label: "Bar Chart" },
{ id: "pie", label: "Pie Chart" },
{ id: "area", label: "Area Chart" },
{ id: "radar", label: "Radar Chart" },
];
return (
<div style={{ display: "flex", flexDirection: "column", gap: 6 }} ref={elementEditorRef}>
{element?.type === "graph" && (
<div className="design-section">
<DataSourceSelector
label={"Chart Type"}
options={[
{ id: "line", label: "Line Chart" },
{ id: "bar", label: "Bar Chart" },
{ id: "pie", label: "Pie Chart" },
{ id: "area", label: "Area Chart" },
{ id: "radar", label: "Radar Chart" },
]}
options={graphOptions}
selected={graphOptions.find((option) => option.id === currentElement.graphType)?.label}
onSelect={(newValue) => {
updateGraphType(selectedBlock, selectedElement, newValue.id as GraphTypes);
}}
@@ -73,6 +78,19 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
</div>
)}
{element?.type === "text" && (
<div className="design-section">
<InputWithDropDown
label="Text Value"
value={currentElement.textValue || ""}
placeholder={"Enter text..."}
onChange={(newValue: string) => {
updateTextValue(selectedBlock, selectedElement, newValue);
}}
/>
</div>
)}
<div className="design-section">
<div className="section-header">Position</div>
<div className="select-type">
@@ -218,28 +236,32 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
<div className="design-section appearance">
<div className="section-header">Appearance</div>
<div className="design-datas-wrapper">
<InputWithDropDown
label="X-Position"
value={String(currentElement.position?.x ?? 0)}
placeholder={"X"}
onChange={(newValue: string) => {
updateElementPosition(selectedBlock, selectedElement, {
...(currentElement.position || { x: 0, y: 0 }),
x: Number(newValue),
});
}}
/>
<InputWithDropDown
label="Y-Position"
value={String(currentElement.position?.y ?? 0)}
placeholder={"Y"}
onChange={(newValue: string) => {
updateElementPosition(selectedBlock, selectedElement, {
...(currentElement.position || { x: 0, y: 0 }),
y: Number(newValue),
});
}}
/>
{currentElement.positionType === "absolute" && (
<>
<InputWithDropDown
label="X-Position"
value={String(currentElement.position?.x ?? 0)}
placeholder={"X"}
onChange={(newValue: string) => {
updateElementPosition(selectedBlock, selectedElement, {
...(currentElement.position || { x: 0, y: 0 }),
x: Number(newValue),
});
}}
/>
<InputWithDropDown
label="Y-Position"
value={String(currentElement.position?.y ?? 0)}
placeholder={"Y"}
onChange={(newValue: string) => {
updateElementPosition(selectedBlock, selectedElement, {
...(currentElement.position || { x: 0, y: 0 }),
y: Number(newValue),
});
}}
/>
</>
)}
<InputWithDropDown
label="Width"
value={String(currentElement.size?.width ?? (currentElement.type === "graph" ? 400 : 200))}

1
app/src/components/SimulationDashboard/components/element/ElementDropdown.tsx
View File

@@ -27,7 +27,6 @@ const ElementDropdown: React.FC<ElementDropdownProps> = ({ showElementDropdown,
key={elementType.label}
onClick={() => {
handleAddElement(showElementDropdown, elementType.type, elementType.graphType);
console.log('showElementDropdown: ', showElementDropdown);
}}
className="dropdown-button"
>

151
app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
View File

@@ -25,6 +25,7 @@ interface ElementEditorProps {
updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void;
updateTextValue: (blockId: string, elementId: string, textValue: string) => void;
updateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => void;
updateCommonValue: (blockId: string, elementId: string, commonValue: string) => void;
updateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => void;
@@ -46,6 +47,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
updateGraphData,
updateGraphTitle,
updateGraphType,
updateTextValue,
updateDataType,
updateCommonValue,
updateDataValue,
@@ -63,26 +65,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
// Use shared position from VisualizationStore
const { editorPosition, setEditorPosition } = useVisualizationStore();
const panelRef = useRef<HTMLDivElement | null>(null);
const initialPositionRef = useRef<{ x: number; y: number } | null>(null);
// Compute position from store or initialize
const position = editorPosition || { x: 100, y: 80 };
const setPosition = (newPosition: { x: number; y: number }) => {
setEditorPosition(newPosition);
};
// On mount, compute exact initial position based on panel width and store it
useEffect(() => {
if (!editorPosition) {
const panelEl = panelRef.current || (elementEditorRef && (elementEditorRef as any).current);
const width = panelEl?.offsetWidth || 300;
const nx = Math.max(0, window.innerWidth - width - 40);
const ny = 80;
initialPositionRef.current = { x: nx, y: ny };
setPosition({ x: nx, y: ny });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const initialPositionRef = useRef<{ xPercent: number; yPercent: number } | null>(null);
const draggingRef = useRef(false);
const startXRef = useRef(0);
@@ -90,14 +73,86 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
const startLeftRef = useRef(0);
const startTopRef = useRef(0);
// Get panel dimensions
const getPanelDimensions = () => {
const panelEl = panelRef.current || (elementEditorRef && (elementEditorRef as any).current);
const width = panelEl?.offsetWidth || 300;
const height = panelEl?.offsetHeight || 300;
return { width, height };
};
// Convert percentage position to pixels for rendering
const getPixelPosition = (): { x: number; y: number } => {
if (!editorPosition) {
return { x: 100, y: 80 };
}
const { width, height } = getPanelDimensions();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
let x = (editorPosition.xPercent / 100) * viewportWidth;
let y = (editorPosition.yPercent / 100) * viewportHeight;
// Ensure panel stays within bounds
const maxX = viewportWidth - width - 8;
const maxY = viewportHeight - height - 8;
x = Math.max(0, Math.min(x, maxX));
y = Math.max(0, Math.min(y, maxY));
return { x, y };
};
const position = getPixelPosition();
// Convert pixel position to percentage and save to store
const setPositionFromPixels = (pixelX: number, pixelY: number) => {
const { width, height } = getPanelDimensions();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Calculate percentage, ensuring panel stays within bounds
const maxXPercent = ((viewportWidth - width) / viewportWidth) * 100;
const maxYPercent = ((viewportHeight - height) / viewportHeight) * 100;
const xPercent = Math.max(0, Math.min((pixelX / viewportWidth) * 100, maxXPercent));
const yPercent = Math.max(0, Math.min((pixelY / viewportHeight) * 100, maxYPercent));
setEditorPosition({ xPercent, yPercent });
};
// On mount, compute exact initial position based on panel width and store it
useEffect(() => {
if (!editorPosition) {
const { width } = getPanelDimensions();
const defaultX = Math.max(0, window.innerWidth - width - 40);
const defaultY = 80;
setPositionFromPixels(defaultX, defaultY);
initialPositionRef.current = {
xPercent: (defaultX / window.innerWidth) * 100,
yPercent: (defaultY / window.innerHeight) * 100,
};
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Handle window resize - update position to maintain relative placement
useEffect(() => {
const handleResize = () => {
if (editorPosition) {
// Force re-render with updated pixel position
// The percentage stays the same, but pixels recalculate
setEditorPosition({ ...editorPosition });
}
};
const onPointerMove = (ev: PointerEvent) => {
if (!draggingRef.current) return;
const dx = ev.clientX - startXRef.current;
const dy = ev.clientY - startYRef.current;
const panel = panelRef.current;
const width = panel?.offsetWidth || 300;
const height = panel?.offsetHeight || 300;
const { width, height } = getPanelDimensions();
const maxX = window.innerWidth - width - 8;
const maxY = window.innerHeight - height - 8;
let nx = startLeftRef.current + dx;
@@ -106,7 +161,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
if (ny < 0) ny = 0;
if (nx > maxX) nx = maxX;
if (ny > maxY) ny = maxY;
setPosition({ x: nx, y: ny });
setPositionFromPixels(nx, ny);
};
const onPointerUp = () => {
@@ -115,11 +170,13 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
window.removeEventListener("pointerup", onPointerUp);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener("pointermove", onPointerMove);
window.removeEventListener("pointerup", onPointerUp);
};
}, []);
}, [editorPosition, setEditorPosition]);
const startDrag = (ev: React.PointerEvent) => {
ev.preventDefault();
@@ -136,9 +193,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
if (!draggingRef.current) return;
const dx = e.clientX - startXRef.current;
const dy = e.clientY - startYRef.current;
const panelEl = panelRef.current || (elementEditorRef && (elementEditorRef as any).current);
const width = panelEl?.offsetWidth || 300;
const height = panelEl?.offsetHeight || 300;
const { width, height } = getPanelDimensions();
const maxX = window.innerWidth - width - 8;
const maxY = window.innerHeight - height - 8;
let nx = startLeftRef.current + dx;
@@ -147,7 +202,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
if (ny < 0) ny = 0;
if (nx > maxX) nx = maxX;
if (ny > maxY) ny = maxY;
setPosition({ x: nx, y: ny });
setPositionFromPixels(nx, ny);
};
const onPointerUp = (e: PointerEvent) => {
@@ -156,7 +211,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
window.removeEventListener("pointerup", onPointerUp);
try {
(panel as Element).releasePointerCapture?.((e as any).pointerId);
} catch (err) { }
} catch (err) {}
};
window.addEventListener("pointermove", onPointerMove);
@@ -165,13 +220,12 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
const resetPosition = () => {
if (initialPositionRef.current) {
setPosition(initialPositionRef.current);
setEditorPosition(initialPositionRef.current);
return;
}
const panelEl = panelRef.current || (elementEditorRef && (elementEditorRef as any).current);
const width = panelEl?.offsetWidth || 300;
const nx = Math.max(0, window.innerWidth - width - 40);
setPosition({ x: nx, y: 80 });
const { width } = getPanelDimensions();
const defaultX = Math.max(0, window.innerWidth - width - 40);
setPositionFromPixels(defaultX, 80);
};
const getAssetDropdownItems = useCallback(() => {
@@ -510,6 +564,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
updateGraphData={updateGraphData}
updateGraphTitle={updateGraphTitle}
updateGraphType={updateGraphType}
updateTextValue={updateTextValue}
updateDataType={updateDataType}
updateCommonValue={updateCommonValue}
updateDataValue={updateDataValue}
@@ -549,12 +604,12 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
value={
element.dataBinding?.dataSource
? {
id: element.dataBinding.dataSource as string,
label:
getEventByModelUuid(selectedProduct.productUuid, element.dataBinding.dataSource as string)?.modelName ??
(element.dataBinding.dataSource === "global" ? "Global" : ""),
icon: <DeviceIcon />,
}
id: element.dataBinding.dataSource as string,
label:
getEventByModelUuid(selectedProduct.productUuid, element.dataBinding.dataSource as string)?.modelName ??
(element.dataBinding.dataSource === "global" ? "Global" : ""),
icon: <DeviceIcon />,
}
: null
}
onChange={(value) => {
@@ -573,13 +628,13 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
value={
element.dataBinding?.dataValue
? {
id: element.dataBinding.dataValue as string,
label:
getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)
.flatMap((section) => section.items)
.find((item) => item.id === element.dataBinding?.dataValue)?.label ?? "",
icon: <ParametersIcon />,
}
id: element.dataBinding.dataValue as string,
label:
getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)
.flatMap((section) => section.items)
.find((item) => item.id === element.dataBinding?.dataValue)?.label ?? "",
icon: <ParametersIcon />,
}
: null
}
onChange={(value) => {

5
app/src/components/SimulationDashboard/functions/helpers/resolveElementValue.ts
View File

@@ -1,6 +1,11 @@
import type { UIElement } from "../../../../types/exportedTypes";
export const resolveElementValue = (element: UIElement) => {
// For text elements, return the textValue
if (element.type === "text") {
return { value: element.textValue || "Text" };
}
if (!element.dataBinding) {
return { value: "No data" };
}

28
app/src/store/simulation/useSimulationDashBoardStore.ts
View File

@@ -48,6 +48,7 @@ interface SimulationDashboardStore {
updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
updateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => void;
updateTextValue: (blockId: string, elementId: string, textValue: string) => void;
// Element swapping
swapElements: (blockId: string, elementId1: string, elementId2: string) => void;
@@ -73,6 +74,7 @@ interface SimulationDashboardStore {
peekUpdateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => Block[];
peekUpdateGraphTitle: (blockId: string, elementId: string, title: string) => Block[];
peekUpdateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => Block[];
peekUpdateTextValue: (blockId: string, elementId: string, textValue: string) => Block[];
peekUpdateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => Block[];
peekUpdateCommonValue: (blockId: string, elementId: string, commonValue: string) => Block[];
peekUpdateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => Block[];
@@ -321,6 +323,7 @@ export const createSimulationDashboardStore = () => {
newElement = {
...commonProps,
type: "text",
textValue: "Text",
style: {
color: "#ffffff",
fontSize: 14,
@@ -487,6 +490,18 @@ export const createSimulationDashboardStore = () => {
});
},
updateTextValue: (blockId, elementId, textValue) => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element && element.type === "text") {
element.textValue = textValue;
}
}
});
},
// Element swapping
swapElements: (blockId, elementId1, elementId2) => {
set((state) => {
@@ -685,6 +700,7 @@ export const createSimulationDashboardStore = () => {
newElement = {
...commonProps,
type: "text",
textValue: "Text",
style: {
color: "#ffffff",
fontSize: 14,
@@ -846,6 +862,18 @@ export const createSimulationDashboardStore = () => {
return blocks;
},
peekUpdateTextValue: (blockId, elementId, textValue) => {
const blocks = cloneBlocks(get().blocks);
const block = blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element && element.type === "text") {
element.textValue = textValue;
}
}
return blocks;
},
peekUpdateDataType: (blockId: string, elementId: string, dataType: DataType) => {
const blocks = cloneBlocks(get().blocks);

67
app/src/store/visualization/useVisualizationStore.ts
View File

@@ -1,14 +1,19 @@
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
/**
* Panel position stored as percentages (0-100) of viewport dimensions
* This ensures panels stay within bounds when screen size changes
*/
interface PanelPosition {
x: number;
y: number;
xPercent: number; // 0-100, percentage from left edge
yPercent: number; // 0-100, percentage from top edge
}
interface VisualizationState {
editorPosition: PanelPosition | null;
setEditorPosition: (position: PanelPosition) => void;
resetEditorPosition: () => void;
}
export const useVisualizationStore = create<VisualizationState>()(
@@ -18,5 +23,63 @@ export const useVisualizationStore = create<VisualizationState>()(
set((state) => {
state.editorPosition = position;
}),
resetEditorPosition: () =>
set((state) => {
state.editorPosition = null;
}),
}))
);
/**
* Utility functions to convert between pixels and percentages
*/
export const positionUtils = {
/**
* Convert pixel position to percentage position
*/
pixelsToPercent: (pixelX: number, pixelY: number, panelWidth: number, panelHeight: number): PanelPosition => {
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Calculate percentage, ensuring panel stays within bounds
const maxXPercent = ((viewportWidth - panelWidth) / viewportWidth) * 100;
const maxYPercent = ((viewportHeight - panelHeight) / viewportHeight) * 100;
const xPercent = Math.max(0, Math.min((pixelX / viewportWidth) * 100, maxXPercent));
const yPercent = Math.max(0, Math.min((pixelY / viewportHeight) * 100, maxYPercent));
return { xPercent, yPercent };
},
/**
* Convert percentage position to pixel position
*/
percentToPixels: (position: PanelPosition, panelWidth: number, panelHeight: number): { x: number; y: number } => {
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Calculate pixel position
let x = (position.xPercent / 100) * viewportWidth;
let y = (position.yPercent / 100) * viewportHeight;
// Ensure panel stays within bounds
const maxX = viewportWidth - panelWidth - 8;
const maxY = viewportHeight - panelHeight - 8;
x = Math.max(0, Math.min(x, maxX));
y = Math.max(0, Math.min(y, maxY));
return { x, y };
},
/**
* Get default position (top-right corner with some margin)
*/
getDefaultPosition: (panelWidth: number): PanelPosition => {
const viewportWidth = window.innerWidth;
const defaultX = Math.max(0, viewportWidth - panelWidth - 40);
const defaultY = 80;
return positionUtils.pixelsToPercent(defaultX, defaultY, panelWidth, 300);
},
};

1
app/src/types/exportedTypes.ts
View File

@@ -20,6 +20,7 @@ export type UIElement = {
type: UIType;
graphType?: GraphTypes;
graphTitle?: string;
textValue?: string;
style: ExtendedCSSProperties;
dataBinding?: ElementDataBinding;
position?: Position;

2
app/src/types/simulationDashboard.d.ts vendored
View File

@@ -11,7 +11,7 @@ type ElementDataBinding = {
dataSource?: string | string[];
dataValue?: string | string[];
commonValue?: string;
dataType?: "single-machine" | "multiple-machine";
dataType?: DataType;
}
type Position = {