feat: enable element boundaries on preview hover (#508)

src/electron/main.ts

@@ -403,6 +403,14 @@ async function createWindow(): Promise<void> {
 						payload: undefined,
 						type: ServerMessageType.UnselectElement
 					});
+					break;
+				}
+				case PreviewMessageType.HighlightElement: {
+					Sender.send({
+						id: message.id,
+						payload: message.payload,
+						type: ServerMessageType.HighlightElement
+					});
 				}
 			}
 		} catch (err) {

src/electron/renderer.tsx

@@ -28,6 +28,14 @@ const id = `s${uuid
 (window as any)[id] = store;
 console.log(`Access ViewStore at ${id}`);
 
+window.addEventListener('keydown', e => {
+	store.setMetaDown(e.metaKey);
+});
+
+window.addEventListener('keyup', e => {
+	store.setMetaDown(false);
+});
+
 Sender.send({
 	id: uuid.v4(),
 	type: ServerMessageType.AppLoaded,
@@ -149,6 +157,13 @@ Sender.receive(message => {
 		}
 		case ServerMessageType.UnselectElement: {
 			store.unsetSelectedElement();
+			break;
+		}
+		case ServerMessageType.HighlightElement: {
+			const element = store.getElementById(message.payload.id);
+			if (element && (message.payload.metaDown || store.getMetaDown())) {
+				store.setHighlightedElement(element);
+			}
 		}
 	}
 });

src/message/message.ts

@@ -6,6 +6,7 @@ export enum PreviewMessageType {
 	ContentResponse = 'content-response',
 	ChangeHighlightedElement = 'change-highlighted-element',
 	ChangeSelectedElement = 'change-selected-element',
+	HighlightElement = 'highlight-element',
 	Reload = 'reload',
 	SelectElement = 'select-element',
 	SketchExportRequest = 'sketch-export-request',
@@ -47,6 +48,7 @@ export enum ServerMessageType {
 	ExportPDF = 'export-pdf',
 	ExportPNG = 'export-png',
 	ExportSketch = 'export-sketch',
+	HighlightElement = 'highlight-element',
 	Log = 'log',
 	OpenFileRequest = 'open-file-request',
 	OpenFileResponse = 'open-file-response',
@@ -106,6 +108,7 @@ export type ServerMessage =
 	| ExportPDF
 	| ExportPNG
 	| ExportSketch
+	| HighlightElement
 	| Log
 	| OpenFileRequest
 	| OpenFileResponse
@@ -176,6 +179,7 @@ export type ExportHTML = Envelope<ServerMessageType.ExportHTML, Types.ExportPayl
 export type ExportPDF = Envelope<ServerMessageType.ExportPDF, Types.ExportPayload>;
 export type ExportPNG = Envelope<ServerMessageType.ExportPNG, Types.ExportPayload>;
 export type ExportSketch = Envelope<ServerMessageType.ExportSketch, Types.ExportPayload>;
+export type HighlightElement = Envelope<ServerMessageType.HighlightElement, Types.PatternIdPayload>;
 export type NewFileRequest = EmptyEnvelope<ServerMessageType.CreateNewFileRequest>;
 export type NewFileResponse = Envelope<
 	ServerMessageType.CreateNewFileResponse,
@@ -196,7 +200,7 @@ export type PastePageElementBelow = Envelope<ServerMessageType.PasteElementBelow
 export type PastePageElementInside = Envelope<ServerMessageType.PasteElementInside, string>;
 export type Redo = EmptyEnvelope<ServerMessageType.Redo>;
 export type Save = Envelope<ServerMessageType.Save, Types.SavePayload>;
-export type SelectElement = Envelope<ServerMessageType.SelectElement, Types.SelectPayload>;
+export type SelectElement = Envelope<ServerMessageType.SelectElement, Types.PatternIdPayload>;
 export type SketchExportRequest = Envelope<
 	ServerMessageType.SketchExportRequest,
 	Types.SketchExportPayload

src/model/types.ts

@@ -387,12 +387,14 @@ export interface RenderInit {
 	// tslint:disable-next-line:no-any
 	getSlots(slots: any, render: (props: any) => any): any;
 	onElementClick(e: MouseEvent, payload: { id: string }): void;
+	onElementMouseOver(e: MouseEvent, payload: { id: string | undefined }): void;
 	onElementSelect(e: MouseEvent, payload: { id: string }): void;
 	onOutsideClick(e: MouseEvent): void;
 }
 
-export interface SelectPayload {
+export interface PatternIdPayload {
 	id: string;
+	metaDown: boolean;
 }
 
 export enum ElementRole {

src/preview/preview-renderer.tsx

@@ -143,6 +143,7 @@ export function render(init: Types.RenderInit, container: HTMLElement): void {
 		>
 			<PreviewApplication
 				highlight={highlight}
+				onElementMouseOver={init.onElementMouseOver}
 				onElementClick={init.onElementClick}
 				onOutsideClick={init.onOutsideClick}
 				onElementSelect={init.onElementSelect}
@@ -157,6 +158,7 @@ export function render(init: Types.RenderInit, container: HTMLElement): void {
 interface PreviewApplicationProps {
 	highlight: HighlightArea;
 	onElementClick: Types.RenderInit['onElementClick'];
+	onElementMouseOver: Types.RenderInit['onElementMouseOver'];
 	onElementSelect: Types.RenderInit['onElementSelect'];
 	onOutsideClick: Types.RenderInit['onOutsideClick'];
 	selection: SelectArea;
@@ -171,10 +173,12 @@ class PreviewApplication extends React.Component<PreviewApplicationProps> {
 	public constructor(props: PreviewApplicationProps) {
 		super(props);
 		this.handleClick = this.handleClick.bind(this);
+		this.handleMouseOver = this.handleMouseOver.bind(this);
 		this.handleResize = this.handleResize.bind(this);
 	}
 
 	public componentDidMount(): void {
+		document.addEventListener('mouseover', this.handleMouseOver);
 		document.addEventListener('click', this.handleClick);
 		window.addEventListener('resize', this.handleResize);
 
@@ -203,6 +207,7 @@ class PreviewApplication extends React.Component<PreviewApplicationProps> {
 	}
 
 	public componentWillUnmount(): void {
+		document.removeEventListener('mouseover', this.handleMouseOver);
 		document.removeEventListener('click', this.handleClick);
 		window.removeEventListener('resize', this.handleResize);
 
@@ -241,8 +246,16 @@ class PreviewApplication extends React.Component<PreviewApplicationProps> {
 		clickedIds.forEach(clickedId => this.props.onElementClick(e, { id: clickedId }));
 	}
 
+	private handleMouseOver(e: MouseEvent): void {
+		const id = getElementIdByNode(e.target as HTMLElement);
+		this.props.onElementMouseOver(e, { id });
+	}
+
 	private handleResize(): void {
-		window.requestAnimationFrame(() => this.updateSelection());
+		window.requestAnimationFrame(() => {
+			this.updateSelection();
+			this.updateHighlight();
+		});
 	}
 
 	public render(): JSX.Element | null {
@@ -459,7 +472,8 @@ class PreviewHighlight extends React.Component<PreviewHighlightProps> {
 					width: highlight.width,
 					height: highlight.height,
 					border: '2px solid #42BFFE',
-					opacity: highlight.opacity
+					opacity: highlight.opacity,
+					pointerEvents: 'none'
 				}}
 			/>
 		);

src/preview/preview.tsx

@@ -34,6 +34,7 @@ export class PreviewStore implements Types.RenderPreviewStore {
 	@Mobx.observable public elementContents: Types.SerializedElementContent[] = [];
 	@Mobx.observable public elements: Types.SerializedElement[] = [];
 	@Mobx.observable public highlightedElementId: string = '';
+	@Mobx.observable public metaDown: boolean = false;
 	@Mobx.observable public mode: PreviewDocumentMode = PreviewDocumentMode.Live;
 	@Mobx.observable public pageId: string = '';
 	@Mobx.observable public pages: Types.SerializedPage[] = [];
@@ -104,6 +105,14 @@ function main(): void {
 			? new WebSocket(`ws://${window.location.host}`)
 			: undefined;
 
+	window.addEventListener('keydown', e => {
+		store.metaDown = e.metaKey;
+	});
+
+	window.addEventListener('keyup', e => {
+		store.metaDown = false;
+	});
+
 	const onElementClick = (e: MouseEvent, payload) => {
 		if (!connection) {
 			return;
@@ -133,11 +142,16 @@ function main(): void {
 
 		e.preventDefault();
 
+		store.selectedElementId = payload.id;
+
 		connection.send(
 			JSON.stringify({
 				type: PreviewMessageType.SelectElement,
 				id: uuid.v4(),
-				payload
+				payload: {
+					id: payload.id,
+					metaDown: store.metaDown
+				}
 			})
 		);
 	};
@@ -149,6 +163,8 @@ function main(): void {
 
 		e.preventDefault();
 
+		store.selectedElementId = '';
+
 		connection.send(
 			JSON.stringify({
 				type: PreviewMessageType.UnselectElement,
@@ -157,6 +173,25 @@ function main(): void {
 		);
 	};
 
+	const onElementMouseOver = (e, payload) => {
+		store.highlightedElementId = payload.id;
+
+		if (!connection) {
+			return;
+		}
+
+		connection.send(
+			JSON.stringify({
+				type: PreviewMessageType.HighlightElement,
+				id: uuid.v4(),
+				payload: {
+					id: payload.id,
+					metaDown: store.metaDown
+				}
+			})
+		);
+	};
+
 	const render = () => {
 		renderer.render(
 			{
@@ -165,6 +200,7 @@ function main(): void {
 				getProperties: createPropertiesGetter(store),
 				getSlots: createSlotGetter(store),
 				onElementClick,
+				onElementMouseOver,
 				onElementSelect,
 				onOutsideClick,
 				store

src/store/view-store.ts

@@ -41,6 +41,8 @@ export class ViewStore {
 
 	private editHistory: Model.EditHistory;
 
+	@Mobx.observable private metaDown: boolean = false;
+
 	@Mobx.observable private project: Model.Project;
 
 	private savedProjects: Types.SavedProject[] = [];
@@ -575,6 +577,10 @@ export class ViewStore {
 		return this.project.getElements().find(element => element.getHighlighted());
 	}
 
+	public getMetaDown(): boolean {
+		return this.metaDown;
+	}
+
 	public getNameEditableElement(): Model.Element | undefined {
 		return this.project.getElements().find(e => e.getNameEditable());
 	}
@@ -885,9 +891,25 @@ export class ViewStore {
 
 		if (previousHighlightedElement) {
 			previousHighlightedElement.setHighlighted(false);
+
+			previousHighlightedElement.getAncestors().forEach(ancestor => {
+				const descendants = ancestor.getDescendants();
+				if (!descendants.some(d => d.getSelected() || d.getHighlighted())) {
+					ancestor.setForcedOpen(false);
+				}
+			});
 		}
 
 		highlightedElement.setHighlighted(true);
+
+		highlightedElement.getAncestors().forEach(ancestor => {
+			ancestor.setForcedOpen(true);
+		});
+	}
+
+	@Mobx.action
+	public setMetaDown(metaDown: boolean): void {
+		this.metaDown = metaDown;
 	}
 
 	@Mobx.action
@@ -932,7 +954,10 @@ export class ViewStore {
 			previousSelectedElement.setSelected(false);
 
 			previousSelectedElement.getAncestors().forEach(ancestor => {
-				ancestor.setForcedOpen(false);
+				const descendants = ancestor.getDescendants();
+				if (!descendants.some(d => d.getSelected() || d.getHighlighted())) {
+					ancestor.setForcedOpen(false);
+				}
 			});
 		}