fix: highlight correctly on first load

src/preview/preview-renderer.tsx

@@ -304,10 +304,8 @@ class PreviewApplication extends React.Component<PreviewApplicationProps> {
 			return;
 		}
 
-		if (!currentElement.selected) {
-			this.props.highlight.setSize(node);
-			this.props.highlight.show();
-		}
+		this.props.highlight.setSize(node);
+		this.props.highlight.show();
 	}
 
 	private updateSelection(elementId?: string): void {
@@ -463,17 +461,15 @@ class PreviewHighlight extends React.Component<PreviewHighlightProps> {
 		return (
 			<div
 				style={{
+					border: '2px solid #42BFFE',
 					boxSizing: 'border-box',
-					position: 'absolute',
-					top: highlight.top,
-					right: highlight.right,
-					bottom: highlight.bottom,
-					left: highlight.left,
-					width: highlight.width,
 					height: highlight.height,
-					border: '2px solid #42BFFE',
+					left: highlight.left,
 					opacity: highlight.opacity,
-					pointerEvents: 'none'
+					pointerEvents: 'none',
+					position: 'absolute',
+					top: highlight.top,
+					width: highlight.width
 				}}
 			/>
 		);
@@ -492,13 +488,11 @@ class PreviewSelect extends React.Component<PreviewSelectProps> {
 					position: 'absolute',
 					boxSizing: 'border-box',
 					border: '1px solid rgba(255, 255, 255, 0.5)',
-					bottom: selectedArea.bottom,
-					height: selectedArea.height,
+					height: Math.max(selectedArea.height, 1),
 					left: selectedArea.left,
 					opacity: selectedArea.opacity,
-					right: selectedArea.right,
 					top: selectedArea.top,
-					width: selectedArea.width,
+					width: Math.max(selectedArea.width, 1),
 					pointerEvents: 'none',
 					mixBlendMode: 'difference'
 				}}

src/preview/preview.tsx

@@ -174,18 +174,32 @@ function main(): void {
 	};
 
 	const onElementMouseOver = (e, payload) => {
-		if (!connection) {
+		if (store.mode === 'static') {
 			return;
 		}
 
-		store.highlightedElementId = payload.id;
+		const previous = store.elements.filter(el => el.highlighted && el.id !== payload.id);
+		previous.forEach(p => (p.highlighted = false));
+
+		const element = store.elements.find(el => el.id === payload.id);
+
+		if (element && element.role !== 'root') {
+			element.highlighted = true;
+			store.highlightedElementId = element.id;
+		} else {
+			store.highlightedElementId = '';
+		}
+
+		if (!connection) {
+			return;
+		}
 
 		connection.send(
 			JSON.stringify({
 				type: PreviewMessageType.HighlightElement,
 				id: uuid.v4(),
 				payload: {
-					id: payload.id,
+					id: element ? element.id : undefined,
 					metaDown: store.metaDown
 				}
 			})