Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 17:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[feat] : Add support for clicking anywhere on the edge should select the component (#11425)

Browse source
This commit is contained in:
Nakul Nagargade 2024-12-04 13:49:06 +05:30 committed by GitHub
parent cd2350db46
commit 022e554812
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
View file

@ -78,10 +78,6 @@
visibility: visible !important;
}
.main-editor-canvas .widget-target:hover .widget-target:hover > .config-handle {
visibility: visible !important;
}
.main-editor-canvas .widget-target:hover .widget-target:hover > .widget-target > .config-handle {
visibility: hidden !important;
}
}

24
frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
View file

@ -353,6 +353,7 @@ export default function Grid({ gridWidth, currentLayout }) {
// eslint-disable-next-line react-hooks/exhaustive-deps
[boxList, currentLayout, gridWidth]
);
if (mode !== 'edit') return null;
return (
@ -425,6 +426,22 @@ export default function Grid({ gridWidth, currentLayout }) {
document.getElementById('resize-ghost-widget').style.height = `${e.target.clientHeight}px`;
}
}}
onResizeStart={(e) => {
if (
e.target.id &&
useGridStore.getState().resizingComponentId !== e.target.id &&
!e.target.classList.contains('delete-icon')
) {
// When clicked on widget boundary/resizer, select the component
setSelectedComponents([e.target.id]);
}
if (!isComponentVisible(e.target.id)) {
return false;
}
useGridStore.getState().actions.setResizingComponentId(e.target.id);
e.setMin([gridWidth, 10]);
}}
onResizeEnd={(e) => {
try {
useGridStore.getState().actions.setResizingComponentId(null);
@ -491,13 +508,6 @@ export default function Grid({ gridWidth, currentLayout }) {
useGridStore.getState().actions.setDragTarget();
toggleCanvasUpdater();
}}
onResizeStart={(e) => {
if (!isComponentVisible(e.target.id)) {
return false;
}
useGridStore.getState().actions.setResizingComponentId(e.target.id);
e.setMin([gridWidth, 10]);
}}
onResizeGroupStart={({ events }) => {
const parentElm = events[0].target.closest('.real-canvas');
parentElm.classList.add('show-grid');

3
frontend/src/AppBuilder/AppCanvas/Selecto.jsx
View file

@ -61,9 +61,8 @@ export const EditorSelecto = () => {
if (selection) {
selection.removeAllRanges();
}
const target = e.inputEvent.target;
// This condition is to ensure selection happens only on main app canvas and not on child containers
// This condition is to ensure selection happens only on main app canvas and not on subcontainers
if (target.getAttribute('component-id') === 'canvas') {
return true;
}