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 Component Handle being visible when hovered on the boundary of an unselected component

Browse source
This commit is contained in:
Nakul Nagargade 2024-12-06 17:14:40 +05:30
parent 37f1bb05f7
commit c2acc24637
4 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
View file

@ -31,8 +31,8 @@ export const ConfigHandle = ({
const setComponentToInspect = useStore((state) => state.setComponentToInspect);
const _showHandle = useStore((state) => {
const isWidgetHovered = state.getHoveredComponentForGrid() === id;
const anyComponentHovered = state.getHoveredComponentForGrid() !== '';
const isWidgetHovered = state.getHoveredComponentForGrid() === id || state.hoveredComponentBoundaryId === id;
const anyComponentHovered = state.getHoveredComponentForGrid() !== '' || state.hoveredComponentBoundaryId !== '';
// If one component is hovered and one is selected, show the handle for the hovered component
return (
isWidgetHovered ||
@ -41,7 +41,6 @@ export const ConfigHandle = ({
!anyComponentHovered)
);
}, shallow);
let height = visibility === false ? 10 : widgetHeight;
return (

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

@ -8,6 +8,10 @@
transition: all .15s ease-in-out;
}
.config-handle-visible {
visibility: visible !important;
}
.multiple-components-config-handle {
position: absolute;
left: 54px;

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

@ -354,17 +354,16 @@ export default function Grid({ gridWidth, currentLayout }) {
);
// Add event listeners for config handle visibility when hovering over widget boundary
// This is needed even though we have hovered widget state because when hovered on boundary,
// the hovered widget state is empty, hence created a separate state for boundary
React.useEffect(() => {
const moveableBox = document.querySelector(`.moveable-control-box`);
const showConfigHandle = (e) => {
const targetId = e.target.offsetParent.getAttribute('target-id');
const configHandle = document.querySelector(`.config-handle[widget-id="${targetId}"]`);
configHandle.classList.add('config-handle-visible');
useStore.getState().setHoveredComponentBoundaryId(targetId);
};
const hideConfigHandle = (e) => {
const targetId = e.target.offsetParent.getAttribute('target-id');
const configHandle = document.querySelector(`.config-handle[widget-id="${targetId}"]`);
configHandle.classList.remove('config-handle-visible');
const hideConfigHandle = () => {
useStore.getState().setHoveredComponentBoundaryId('');
};
if (moveableBox) {
moveableBox.addEventListener('mouseover', showConfigHandle);

3
frontend/src/AppBuilder/_stores/slices/gridSlice.js
View file

@ -3,6 +3,7 @@ import { debounce } from 'lodash';
const initialState = {
hoveredComponentForGrid: '',
hoveredComponentBoundaryId: '',
triggerCanvasUpdater: false,
lastCanvasIdClick: '',
lastCanvasClickPosition: null,
@ -13,6 +14,8 @@ export const createGridSlice = (set, get) => ({
setHoveredComponentForGrid: (id) =>
set(() => ({ hoveredComponentForGrid: id }), false, { type: 'setHoveredComponentForGrid', id }),
getHoveredComponentForGrid: () => get().hoveredComponentForGrid,
setHoveredComponentBoundaryId: (id) =>
set(() => ({ hoveredComponentBoundaryId: id }), false, { type: 'setHoveredComponentBoundaryId', id }),
toggleCanvasUpdater: () =>
set((state) => ({ triggerCanvasUpdater: !state.triggerCanvasUpdater }), false, { type: 'toggleCanvasUpdater' }),
debouncedToggleCanvasUpdater: debounce(() => {