fix(highlight): include hightlight update method

meetalva · May 24, 2018 · 450d254 · 450d254
1 parent 2fe7d0e
commit 450d254
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 50 deletions.
diff --git a/src/preview/highlight-area.test.ts b/src/preview/highlight-area.test.ts
@@ -1,22 +1,6 @@
 import { HighlightArea } from './highlight-area';
 
-test('HighlightArea has expected properties', () => {
-	const highlightArea = new HighlightArea();
-
-	expect(highlightArea).toEqual(
-		expect.objectContaining({
-			top: 0,
-			right: 0,
-			bottom: 0,
-			left: 0,
-			width: 0,
-			height: 0,
-			opacity: 0
-		})
-	);
-});
-
-test('HighlightArea sets bounding client values', () => {
+describe('HighlightArea', () => {
 	const highlightArea = new HighlightArea();
 	// tslint:disable:no-any
 	const node: any = {
@@ -31,39 +15,57 @@ test('HighlightArea sets bounding client values', () => {
 			y: 100
 		}))
 	};
-	highlightArea.setSize(node);
-	expect(highlightArea).toEqual(
-		expect.objectContaining({
-			top: 100,
-			right: 100,
-			bottom: 100,
-			left: 100,
-			width: 100,
-			height: 100
-		})
-	);
-});
 
-test('HighlightArea hides element', () => {
-	const highlightArea = new HighlightArea();
-	highlightArea.hide();
+	test('HighlightArea sets bounding client values', () => {
+		highlightArea.setSize(node);
+		expect(highlightArea).toEqual(
+			expect.objectContaining({
+				top: 100,
+				right: 100,
+				bottom: 100,
+				left: 100,
+				width: 100,
+				height: 100
+			})
+		);
+	});
 
-	expect(highlightArea).toEqual(
-		expect.objectContaining({
-			opacity: 0,
-			isVisible: false
-		})
-	);
-});
+	test('HighlightArea update values on update', () => {
+		highlightArea.setSize(node);
+		expect(highlightArea.node).toEqual(node);
 
-test('HighlightAria shows element', () => {
-	const highlightArea = new HighlightArea();
-	highlightArea.show();
+		highlightArea.update();
+
+		expect(highlightArea).toEqual(
+			expect.objectContaining({
+				top: 100,
+				right: 100,
+				bottom: 100,
+				left: 100,
+				width: 100,
+				height: 100
+			})
+		);
+	});
+
+	test('HighlightArea hides element', () => {
+		highlightArea.hide();
+		expect(highlightArea.isVisible).toBe(false);
+		expect(highlightArea).toEqual(
+			expect.objectContaining({
+				opacity: 0
+			})
+		);
+	});
+
+	test('HighlightAria shows element', () => {
+		highlightArea.show();
 
-	expect(highlightArea).toEqual(
-		expect.objectContaining({
-			opacity: 1,
-			isVisible: true
-		})
-	);
+		expect(highlightArea.isVisible).toBe(true);
+		expect(highlightArea).toEqual(
+			expect.objectContaining({
+				opacity: 1
+			})
+		);
+	});
 });
diff --git a/src/preview/highlight-area.ts b/src/preview/highlight-area.ts
@@ -3,8 +3,10 @@ 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;
@@ -17,19 +19,32 @@ export class HighlightArea {
 	}
 
 	@MobX.action
-	public setSize(element: Element): void {
+	public setSize(element: Element): void | Element {
 		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;
+		if (!this.node) {
+			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) {
+			return;
+		} else {
+			this.setSize(this.node);
+		}
+	}
 }
diff --git a/src/preview/preview-renderer.tsx b/src/preview/preview-renderer.tsx
@@ -186,10 +186,12 @@ class PreviewComponent extends React.Component<PreviewComponentProps> {
 		const props = this.props as InjectedPreviewComponentProps;
 		if (props.uuid === props.store.elementId) {
 			const node = ReactDom.findDOMNode(this);
+			console.log('&&&&&&&&&&&&', props.store.elementId);
 			if (node) {
 				props.highlight.setSize(node as Element);
 			}
 		}
+		console.log('&&&&&&&&&', props.highlight.node);
 	}
 
 	public componentWillUnmount(): void {
@@ -203,7 +205,7 @@ class PreviewComponent extends React.Component<PreviewComponentProps> {
 		} else {
 			const node = ReactDom.findDOMNode(this);
 			if (node) {
-				props.highlight.setSize(node as Element);
+				props.highlight.update();
 				window.requestAnimationFrame(this.handleResize);
 			}
 		}