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

feat: enhance BlockEditor and ElementEditor components with dynamic panel width adjustment

Browse Source
This commit is contained in:
Nalvazhuthi
2025-12-22 10:15:52 +05:30
parent 64fc16500d
commit 55ea55e4e1
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 panelRef = useRef<HTMLDivElement | null>(null);
const initialPositionRef = useRef<{ xPercent: number; yPercent: number } | null>(null);
const [panelWidth, setPanelWidth] = useState<number>(300);
const draggingRef = useRef(false);
const startXRef = useRef(0);
const startYRef = useRef(0);
@@ -107,7 +108,8 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
useEffect(() => {
if (!editorPosition) {
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;
setPositionFromPixels(defaultX, defaultY);
@@ -115,6 +117,9 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
xPercent: (defaultX / window.innerWidth) * 100,
yPercent: (defaultY / window.innerHeight) * 100,
};
} else {
const { width } = getPanelDimensions();
setPanelWidth(width || 300);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -218,7 +223,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
}
}}
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}>
<ResizeHeightIcon />

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

@@ -66,6 +66,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
const { editorPosition, setEditorPosition } = useVisualizationStore();
const panelRef = useRef<HTMLDivElement | null>(null);
const initialPositionRef = useRef<{ xPercent: number; yPercent: number } | null>(null);
const [panelWidth, setPanelWidth] = useState<number>(300);
const draggingRef = useRef(false);
const startXRef = useRef(0);
@@ -126,7 +127,8 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
useEffect(() => {
if (!editorPosition) {
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;
setPositionFromPixels(defaultX, defaultY);
@@ -134,6 +136,10 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
xPercent: (defaultX / window.innerWidth) * 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
}, []);
@@ -520,7 +526,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
}
}}
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}>
<ResizeHeightIcon />

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

@@ -226,9 +226,7 @@ input[type="number"] {
position: relative;
cursor: pointer;
.key {
text-overflow: none;
}
/* key default styles removed to allow dropdown header to control ellipsis */
.dropdown-header {
height: 100%;
@@ -241,6 +239,7 @@ input[type="number"] {
width: calc(100% - 18px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@@ -268,20 +267,21 @@ input[type="number"] {
margin-bottom: 4px;
}
.option {
padding: 6px 6px;
cursor: pointer;
flex-direction: row !important;
border-radius: #{$border-radius-medium};
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
.option {
padding: 6px 6px;
cursor: pointer;
flex-direction: row !important;
border-radius: #{$border-radius-medium};
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: var(--highlight-text-color);
background: var(--highlight-accent-color);
&:hover {
color: var(--highlight-text-color);
background: var(--highlight-accent-color);
}
}
}
}
.input.default {