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

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

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-12-22 10:35:24 +05:30
parent 870f3f67d9 55ea55e4e1
commit 518ceec423
3 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,6 +46,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
const { editorPosition, setEditorPosition } = useVisualizationStore(); const { editorPosition, setEditorPosition } = useVisualizationStore();
const panelRef = useRef<HTMLDivElement | null>(null); const panelRef = useRef<HTMLDivElement | null>(null);
const initialPositionRef = useRef<{ xPercent: number; yPercent: number } | null>(null); const initialPositionRef = useRef<{ xPercent: number; yPercent: number } | null>(null);
const [panelWidth, setPanelWidth] = useState<number>(300);
const draggingRef = useRef(false); const draggingRef = useRef(false);
const startXRef = useRef(0); const startXRef = useRef(0);
const startYRef = useRef(0); const startYRef = useRef(0);
@@ -107,7 +108,8 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
useEffect(() => { useEffect(() => {
if (!editorPosition) { if (!editorPosition) {
const { width } = getPanelDimensions(); const { width } = getPanelDimensions();
const defaultX = Math.max(0, window.innerWidth - width - 40); setPanelWidth(width || 300);
const defaultX = Math.max(0, window.innerWidth - (width || 300) - 40);
const defaultY = 80; const defaultY = 80;
setPositionFromPixels(defaultX, defaultY); setPositionFromPixels(defaultX, defaultY);
@@ -115,6 +117,9 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
xPercent: (defaultX / window.innerWidth) * 100, xPercent: (defaultX / window.innerWidth) * 100,
yPercent: (defaultY / window.innerHeight) * 100, yPercent: (defaultY / window.innerHeight) * 100,
}; };
} else {
const { width } = getPanelDimensions();
setPanelWidth(width || 300);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
@@ -218,7 +223,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
} }
}} }}
className="panel block-editor-panel" className="panel block-editor-panel"
style={{ position: "fixed", left: position.x, top: position.y, zIndex: 999 }} style={{ position: "fixed", left: position.x, top: position.y, zIndex: 999, width: panelWidth }}
> >
<div className={`free-move-button`} onDoubleClick={resetPosition} onPointerDown={startDrag}> <div className={`free-move-button`} onDoubleClick={resetPosition} onPointerDown={startDrag}>
<ResizeHeightIcon /> <ResizeHeightIcon />

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

@@ -64,6 +64,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
const { editorPosition, setEditorPosition } = useVisualizationStore(); const { editorPosition, setEditorPosition } = useVisualizationStore();
const panelRef = useRef<HTMLDivElement | null>(null); const panelRef = useRef<HTMLDivElement | null>(null);
const initialPositionRef = useRef<{ xPercent: number; yPercent: number } | null>(null); const initialPositionRef = useRef<{ xPercent: number; yPercent: number } | null>(null);
const [panelWidth, setPanelWidth] = useState<number>(300);
const draggingRef = useRef(false); const draggingRef = useRef(false);
const startXRef = useRef(0); const startXRef = useRef(0);
@@ -124,7 +125,8 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
useEffect(() => { useEffect(() => {
if (!editorPosition) { if (!editorPosition) {
const { width } = getPanelDimensions(); const { width } = getPanelDimensions();
const defaultX = Math.max(0, window.innerWidth - width - 40); setPanelWidth(width || 300);
const defaultX = Math.max(0, window.innerWidth - (width || 300) - 40);
const defaultY = 80; const defaultY = 80;
setPositionFromPixels(defaultX, defaultY); setPositionFromPixels(defaultX, defaultY);
@@ -132,6 +134,10 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
xPercent: (defaultX / window.innerWidth) * 100, xPercent: (defaultX / window.innerWidth) * 100,
yPercent: (defaultY / window.innerHeight) * 100, yPercent: (defaultY / window.innerHeight) * 100,
}; };
} else {
// ensure we capture current width when editorPosition exists
const { width } = getPanelDimensions();
setPanelWidth(width || 300);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
@@ -518,7 +524,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
} }
}} }}
className="panel element-editor-panel" className="panel element-editor-panel"
style={{ position: "fixed", left: position.x, top: position.y, zIndex: 1000 }} style={{ position: "fixed", left: position.x, top: position.y, zIndex: 1000, width: panelWidth }}
> >
<div className="free-move-button" onPointerDown={startDrag} onDoubleClick={resetPosition}> <div className="free-move-button" onPointerDown={startDrag} onDoubleClick={resetPosition}>
<ResizeHeightIcon /> <ResizeHeightIcon />

6
app/src/styles/components/_input.scss
View File

@@ -226,9 +226,7 @@ input[type="number"] {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
.key { /* key default styles removed to allow dropdown header to control ellipsis */
text-overflow: none;
}
.dropdown-header { .dropdown-header {
height: 100%; height: 100%;
@@ -241,6 +239,7 @@ input[type="number"] {
width: calc(100% - 18px); width: calc(100% - 18px);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
} }
@@ -276,6 +275,7 @@ input[type="number"] {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
&:hover { &:hover {
color: var(--highlight-text-color); color: var(--highlight-text-color);