feat(highlight): implement hover highlight (#476)

* refactor(highlight): implement tests for the hightlight component

* refactor(highlight): hightlight area implementation

* refactor(highlight): implement resize factory

* fix(highlight): include hightlight update method

* feat(highlight-hover): test implementation of the hightlight hover

* feat(highlight): include eventhandler in store

* feat(highlight): implementation of the highlight component

* feat(highlight): highlight event handler

* feat(highlight): finalize highlight component

* perf: reduce highlight indicator state to id in preview

src/container/element-list/element-list.tsx

@@ -425,7 +425,7 @@ function contentFromTarget(
 	return base.getContentBySlotType(Types.SlotType.Children);
 }
 
-function elementFromTarget(
+export function elementFromTarget(
 	target: EventTarget,
 	options: { sibling: boolean; store: Store.ViewStore }
 ): Model.Element | undefined {

src/electron/renderer.tsx

@@ -285,7 +285,17 @@ Mobx.autorunAsync(() => {
 	Sender.send({
 		id: uuid.v4(),
 		payload: selectedElement ? selectedElement.getId() : undefined,
-		type: ServerMessageType.ElementChange
+		type: ServerMessageType.ChangeSelectedElement
+	});
+});
+
+Mobx.autorunAsync(() => {
+	const highlightedElement = store.getHighlightedElement();
+
+	Sender.send({
+		id: uuid.v4(),
+		payload: highlightedElement ? highlightedElement.getId() : undefined,
+		type: ServerMessageType.ChangeHighlightedElement
 	});
 });
 

src/electron/server.ts

@@ -24,12 +24,13 @@ interface State {
 	payload: {
 		bundle?: string;
 		elementContents?: Types.SerializedElementContent[];
-		elementId?: string;
 		elements?: Types.SerializedElement[];
+		highlightedElementId?: string;
 		pageId?: string;
 		pages?: Types.SerializedPage[];
 		patternProperties?: Types.SerializedPatternProperty[];
 		patterns?: Types.SerializedPattern[];
+		selectedElementId?: string;
 	};
 	type: 'state';
 }
@@ -269,8 +270,13 @@ export async function createServer(opts: ServerOptions): Promise<EventEmitter> {
 
 				break;
 			}
-			case ServerMessageType.ElementChange: {
-				state.payload.elementId = message.payload;
+			case ServerMessageType.ChangeSelectedElement: {
+				state.payload.selectedElementId = message.payload;
+				send(message);
+				break;
+			}
+			case ServerMessageType.ChangeHighlightedElement: {
+				state.payload.highlightedElementId = message.payload;
 				send(message);
 				break;
 			}

src/message/message.ts

@@ -4,7 +4,8 @@ export enum PreviewMessageType {
 	ClickElement = 'click-element',
 	ContentRequest = 'content-request',
 	ContentResponse = 'content-response',
-	ElementChange = 'element-change',
+	ChangeHighlightedElement = 'change-highlighted-element',
+	ChangeSelectedElement = 'change-selected-element',
 	Reload = 'reload',
 	SelectElement = 'select-element',
 	SketchExportRequest = 'sketch-export-request',
@@ -40,7 +41,8 @@ export enum ServerMessageType {
 	DeleteElement = 'delete-page-element',
 	Duplicate = 'duplicate',
 	DuplicateElement = 'duplicate-page-element',
-	ElementChange = 'element-change',
+	ChangeHighlightedElement = 'change-highlighted-element',
+	ChangeSelectedElement = 'change-selected-element',
 	ExportHTML = 'export-html',
 	ExportPDF = 'export-pdf',
 	ExportPNG = 'export-png',
@@ -88,7 +90,8 @@ export type ServerMessage =
 	| CreateNewPage
 	| CreateScriptBundleRequest
 	| CreateScriptBundleResponse
-	| ElementChange
+	| ChangeHighlightedElement
+	| ChangeSelectedElement
 	| NewFileRequest
 	| NewFileResponse
 	| Copy
@@ -123,6 +126,14 @@ export type ServerMessage =
 export type AppLoaded = EmptyEnvelope<ServerMessageType.AppLoaded>;
 export type AssetReadRequest = EmptyEnvelope<ServerMessageType.AssetReadRequest>;
 export type AssetReadResponse = Envelope<ServerMessageType.AssetReadResponse, string>;
+export type ChangeHighlightedElement = Envelope<
+	ServerMessageType.ChangeHighlightedElement,
+	string | undefined
+>;
+export type ChangeSelectedElement = Envelope<
+	ServerMessageType.ChangeSelectedElement,
+	string | undefined
+>;
 export type CheckForUpdatesRequest = EmptyEnvelope<ServerMessageType.CheckForUpdatesRequest>;
 export type CheckLibraryRequest = Envelope<
 	ServerMessageType.CheckLibraryRequest,
@@ -159,7 +170,6 @@ export type CreateScriptBundleResponse = Envelope<
 >;
 export type Cut = EmptyEnvelope<ServerMessageType.Cut>;
 export type Delete = EmptyEnvelope<ServerMessageType.Delete>;
-export type ElementChange = Envelope<ServerMessageType.ElementChange, string | undefined>;
 export type ExportHTML = Envelope<ServerMessageType.ExportHTML, Types.ExportPayload>;
 export type ExportPDF = Envelope<ServerMessageType.ExportPDF, Types.ExportPayload>;
 export type ExportPNG = Envelope<ServerMessageType.ExportPNG, Types.ExportPayload>;

src/model/types.ts

@@ -369,10 +369,11 @@ export interface RenderSelectArea {
 }
 
 export interface RenderPreviewStore {
-	elementId: string;
 	elements: SerializedElement[];
+	highlightedElementId?: string;
 	pageId: string;
 	pages: SerializedPage[];
+	selectedElementId?: string;
 }
 
 export interface RenderInit {

src/preview/highlight-area.test.ts

@@ -0,0 +1,56 @@
+import { HighlightArea } from './highlight-area';
+
+describe('Highlight Hover', () => {
+	const highlightArea = new HighlightArea();
+	// tslint:disable:no-any
+	const node: any = {
+		getBoundingClientRect: jest.fn(() => ({
+			top: 100,
+			right: 100,
+			bottom: 100,
+			left: 100,
+			width: 100,
+			height: 100,
+			x: 100,
+			y: 100
+		})),
+		parentElement: true
+	};
+
+	test('default values should be 0', () => {
+		expect(highlightArea).toEqual(
+			expect.objectContaining({
+				top: 100,
+				right: 100,
+				bottom: 100,
+				left: 100,
+				width: 100,
+				height: 100
+			})
+		);
+	});
+
+	test('values have been updated', () => {
+		highlightArea.setSize(node);
+		expect(highlightArea).toEqual(
+			expect.objectContaining({
+				top: 100,
+				right: 100,
+				bottom: 100,
+				left: 100,
+				width: 100,
+				height: 100
+			})
+		);
+	});
+
+	test('hover should be visible', () => {
+		highlightArea.show();
+		expect(highlightArea).toEqual(expect.objectContaining({ opacity: 1 }));
+	});
+
+	test('hover should be hidden', () => {
+		highlightArea.hide();
+		expect(highlightArea).toEqual(expect.objectContaining({ opacity: 0 }));
+	});
+});

src/preview/highlight-area.ts

@@ -0,0 +1,48 @@
+import * as MobX from 'mobx';
+
+export class HighlightArea {
+	@MobX.observable public bottom: number = 0;
+	@MobX.observable public height: number = 0;
+
+	@MobX.observable public isVisible: boolean = false;
+	@MobX.observable public left: number = 0;
+	@MobX.observable public node: Element;
+	@MobX.observable public opacity: number = 0;
+	@MobX.observable public right: number = 0;
+	@MobX.observable public top: number = 0;
+	@MobX.observable public width: number = 0;
+
+	@MobX.action
+	public hide(): void {
+		this.opacity = 0;
+		this.isVisible = false;
+	}
+
+	@MobX.action
+	public setSize(element: Element): void | Element {
+		if (element.parentElement) {
+			const clientRect: ClientRect = element.getBoundingClientRect();
+			this.bottom = clientRect.bottom;
+			this.height = clientRect.height;
+			this.left = clientRect.left + window.scrollX;
+			this.right = clientRect.right;
+			this.top = clientRect.top + window.scrollY;
+			this.width = clientRect.width;
+			this.node = element;
+			return this.node;
+		}
+	}
+
+	@MobX.action
+	public show(): void {
+		this.opacity = 1;
+		this.isVisible = true;
+	}
+
+	@MobX.action
+	public update(): void {
+		if (this.node) {
+			this.setSize(this.node);
+		}
+	}
+}

src/preview/highlight-hover.test.ts

@@ -0,0 +1,56 @@
+import { HighlightHover } from './highlight-hover';
+
+describe('Highlight Hover', () => {
+	const highlightHover = new HighlightHover();
+	// tslint:disable:no-any
+	const node: any = {
+		getBoundingClientRect: jest.fn(() => ({
+			bottom: 20,
+			height: 20,
+			left: 20,
+			right: 20,
+			top: 20,
+			width: 20
+		})),
+		opacity: 0,
+		parentElement: true
+	};
+
+	test('default values should be 0', () => {
+		expect(highlightHover).toEqual(
+			expect.objectContaining({
+				bottom: 0,
+				height: 0,
+				left: 0,
+				right: 0,
+				top: 0,
+				width: 0,
+				opacity: 0
+			})
+		);
+	});
+
+	test('values have been updated', () => {
+		highlightHover.setSize(node);
+		expect(highlightHover).toEqual(
+			expect.objectContaining({
+				bottom: 20,
+				height: 20,
+				left: 20,
+				right: 20,
+				top: 20,
+				width: 20
+			})
+		);
+	});
+
+	test('hover should be visible', () => {
+		highlightHover.show();
+		expect(highlightHover).toEqual(expect.objectContaining({ opacity: 1 }));
+	});
+
+	test('hover should be hidden', () => {
+		highlightHover.hide();
+		expect(highlightHover).toEqual(expect.objectContaining({ opacity: 0 }));
+	});
+});

src/preview/highlight-hover.ts

@@ -0,0 +1,35 @@
+import * as MobX from 'mobx';
+
+export class HighlightHover {
+	@MobX.observable public bottom: number = 0;
+	@MobX.observable public height: number = 0;
+
+	@MobX.observable public left: number = 0;
+	@MobX.observable public opacity: number = 0;
+	@MobX.observable public right: number = 0;
+	@MobX.observable public top: number = 0;
+	@MobX.observable public width: number = 0;
+
+	@MobX.action
+	public hide(): void {
+		this.opacity = 0;
+	}
+
+	@MobX.action
+	public setSize(node: Element): void {
+		if (node.parentElement) {
+			const clientRect: ClientRect = node.getBoundingClientRect();
+			this.bottom = clientRect.bottom;
+			this.height = clientRect.height;
+			this.left = clientRect.left + window.screenX;
+			this.right = clientRect.right;
+			this.top = clientRect.top + window.screenY;
+			this.width = clientRect.width;
+		}
+	}
+
+	@MobX.action
+	public show(): void {
+		this.opacity = 1;
+	}
+}

src/preview/preview-document.ts

@@ -107,6 +107,9 @@ export const previewDocument = (config: PreviewDocumentConfig) => `<!doctype htm
 			margin: 0;
 			background: white;
 		}
+		#preview {
+			background: white;
+		}
 	</style>
 </head>
 <body>