Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(visual-editor): show hovered component outlines when hovering the layers tab [ALT-673] #584

Merged
merged 3 commits into from
Apr 26, 2024
Merged

fix(visual-editor): show hovered component outlines when hovering the layers tab [ALT-673] #584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c605555
fix: checkpoint before i refactor isHoveringSameParent class and show…
primeinteger Apr 25, 2024
351e300
fix: refactoring hover states after realizing this can be done with c…
primeinteger Apr 25, 2024
94333b4
fix: refactor to remove unused utils
primeinteger Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 0 additions & 191 deletions packages/visual-editor/src/communication/MouseOverHandler.ts
View file
Open in desktop

This file was deleted.

14 changes: 0 additions & 14 deletions packages/visual-editor/src/communication/sendHoveredComponentCoordinates.ts
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions packages/visual-editor/src/components/Draggable/DraggableChildComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
ComponentDefinition,
ComponentDefinitionVariableType,
} from '@contentful/experiences-core/types';
import { useDraggedItemStore } from '@/store/draggedItem';

export type NoWrapDraggableProps = {
['data-ctfl-draggable-id']: string;
Expand Down Expand Up @@ -70,6 +71,7 @@ export const DraggableChildComponent: React.FC<DraggableChildComponentProps> = (
wrapperProps,
definition,
} = props;
const isHoveredComponent = useDraggedItemStore((state) => state.hoveredComponentId === id);

return (
<Draggable key={id} draggableId={id} index={index} isDragDisabled={isDragDisabled}>
Expand All @@ -85,6 +87,7 @@ export const DraggableChildComponent: React.FC<DraggableChildComponentProps> = (
[styles.isDragging]: snapshot.isDragging,
[styles.isSelected]: isSelected,
[styles.userIsDragging]: userIsDragging,
[styles.isHoveringComponent]: isHoveredComponent,
}),
dragHandleProps: provided.dragHandleProps!,
style: {
Expand Down
2 changes: 2 additions & 0 deletions packages/visual-editor/src/components/Draggable/DraggableComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export const DraggableComponent: React.FC<DraggableComponentProps> = ({
}) => {
const ref = useRef<HTMLElement | null>(null);
const setDomRect = useDraggedItemStore((state) => state.setDomRect);
const isHoveredComponent = useDraggedItemStore((state) => state.hoveredComponentId === id);

useDraggablePosition({
draggableId: id,
Expand All @@ -93,6 +94,7 @@ export const DraggableComponent: React.FC<DraggableComponentProps> = ({
[styles.isDragging]: snapshot.isDragging,
[styles.isSelected]: isSelected,
[styles.userIsDragging]: userIsDragging,
[styles.isHoveringComponent]: isHoveredComponent,
})}
style={{
...style,
Expand Down
34 changes: 25 additions & 9 deletions packages/visual-editor/src/components/Draggable/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,14 @@
align-items: center;
min-width: max-content;
height: 24px;
z-index: 1;
z-index: 2;
font-family: var(--exp-builder-font-stack-primary);
font-size: 14px;
font-weight: 500;
background-color: var(--exp-builder-gray500);
color: var(--exp-builder-color-white);
border-radius: 0 0 2px 0;
padding: 4px 12px 4px 12px;
transition: opacity 0.2s;
transition: opacity 0.1s;
opacity: 0;
text-wrap: nowrap;
}
Expand All @@ -77,25 +76,42 @@
outline: 2px solid transparent !important;
}

.DraggableComponent:hover:not(:has(div[data-rfd-draggable-id]:hover)) > .overlay {
.isHoveringComponent > .overlay,
.DraggableComponent:hover:not(:has(.DraggableComponent:hover)) > .overlay {
opacity: 1;
}

/* hovering related component in layers tab */
.DraggableComponent:has(.isHoveringComponent):not(.isAssemblyBlock):before,
.DraggableComponent:has(.isHoveringComponent):not(.isAssemblyBlock) .DraggableComponent:not(.isHoveringComponent):not(.isAssemblyBlock):before,
.isHoveringComponent:not(.isAssemblyBlock) .DraggableComponent:not(.isAssemblyBlock):before,
/* hovering related component in canvas */
.DraggableComponent:hover:before,
.DraggableComponent:hover div[data-rfd-draggable-id]:before {
.DraggableComponent:hover .DraggableComponent:before {
outline: 2px dashed var(--exp-builder-gray500);
}

.DraggableComponent:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {
/* hovering component in layers tab */
.isHoveringComponent:not(.isAssemblyBlock):before,
/* hovering component in canvas */
.DraggableComponent:hover:not(:has(.DraggableComponent:hover)):before {
outline: 2px solid var(--exp-builder-gray500);
}

/* hovering related pattern in layers tab */
.isAssemblyBlock:has(.isHoveringComponent):before,
.isAssemblyBlock:has(.isHoveringComponent) .isAssemblyBlock:not(.isHoveringComponent):before,
.isHoveringComponent .isAssemblyBlock:before,
/* hovering related pattern in canvas */
.isAssemblyBlock:hover:before,
.isAssemblyBlock:hover div[data-rfd-draggable-id]:before,
.DraggableComponent:hover div[data-rfd-draggable-id][data-cf-node-block-type^='assembly']:before {
.isAssemblyBlock:hover .DraggableComponent:before,
.DraggableComponent:hover .isAssemblyBlock:before {
outline: 2px dashed var(--exp-builder-purple600);
}

.isAssemblyBlock:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {
/* hovering pattern in layers tab */
.isAssemblyBlock.isHoveringComponent:before,
/* hovering pattern in canvas */
.isAssemblyBlock:hover:not(:has(.DraggableComponent:hover)):before {
outline: 2px solid var(--exp-builder-purple600);
}
7 changes: 2 additions & 5 deletions packages/visual-editor/src/components/Dropzone/Dropzone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ export function Dropzone({
}: DropzoneProps) {
const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
const draggedItem = useDraggedItemStore((state) => state.draggedItem);
const newComponentId = useDraggedItemStore((state) => state.componentId);
const hoveringZone = useZoneStore((state) => state.hoveringZone);
const isDraggingNewComponent = useDraggedItemStore((state) => Boolean(state.componentId));
const isHoveringZone = useZoneStore((state) => state.hoveringZone === zoneId);
const tree = useTreeStore((state) => state.tree);
const content = node?.children || tree.root?.children || [];

Expand All @@ -50,8 +50,6 @@ export function Dropzone({
return getItem({ id: draggedItem.draggableId }, tree)?.data.blockId;
}, [draggedItem, tree]);

const isDraggingNewComponent = !!newComponentId;
const isHoveringZone = hoveringZone === zoneId;
const isRootZone = zoneId === ROOT_ID;
const isDestination = draggedDestinationId === zoneId;
const isEmptyCanvas = isRootZone && !content.length;
Expand Down Expand Up @@ -158,7 +156,6 @@ export function Dropzone({
) : (
content.map((item, i) => {
const componentId = item.data.id;

return (
<EditorBlock
placeholder={{
Expand Down
4 changes: 2 additions & 2 deletions packages/visual-editor/src/components/Dropzone/EditorBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export const EditorBlock: React.FC<EditorBlockProps> = ({
elementToRender={elementToRender}
id={componentId}
index={index}
isAssemblyBlock={isAssemblyBlock}
isAssemblyBlock={isAssembly || isAssemblyBlock}
isDragDisabled={isSingleColumn}
isSelected={selectedNodeId === componentId}
userIsDragging={userIsDragging}
Expand All @@ -108,7 +108,7 @@ export const EditorBlock: React.FC<EditorBlockProps> = ({
definition={definition}
id={componentId}
index={index}
isAssemblyBlock={isAssemblyBlock}
isAssemblyBlock={isAssembly || isAssemblyBlock}
isDragDisabled={isAssemblyBlock}
isSelected={selectedNodeId === componentId}
userIsDragging={userIsDragging}
Expand Down
13 changes: 13 additions & 0 deletions packages/visual-editor/src/components/RootRenderer/RootRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,19 @@ export const RootRenderer: React.FC<Props> = ({ onChange }) => {

const dragItem = useDraggedItemStore((state) => state.componentId);
const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
const setHoveredComponentId = useDraggedItemStore((state) => state.setHoveredComponentId);
const breakpoints = useTreeStore((state) => state.breakpoints);
const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
const containerRef = useRef<HTMLDivElement>(null);
const { resolveDesignValue } = useBreakpoints(breakpoints);
const [containerStyles, setContainerStyles] = useState<CSSProperties>({});
const tree = useTreeStore((state) => state.tree);

const handleMouseOver = useCallback(() => {
// Remove hover state set by UI when mouse is over canvas
setHoveredComponentId();
}, [setHoveredComponentId]);

const handleClickOutside = useCallback(
(e: MouseEvent) => {
const element = e.target as HTMLElement;
Expand Down Expand Up @@ -91,6 +97,13 @@ export const RootRenderer: React.FC<Props> = ({ onChange }) => {
if (onChange) onChange(tree);
}, [tree, onChange]);

useEffect(() => {
window.addEventListener('mouseover', handleMouseOver);
return () => {
window.removeEventListener('mouseover', handleMouseOver);
};
}, [handleMouseOver]);

useEffect(() => {
document.addEventListener('click', handleClickOutside);
return () => {
Expand Down
Loading
Loading