fix: handle scroll position in element area properly

meetalva · Sep 10, 2018 · 381a4cc · 381a4cc
1 parent c374f00
commit 381a4cc
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 45 deletions.
diff --git a/src/preview-document/preview-document.ts b/src/preview-document/preview-document.ts
@@ -95,7 +95,7 @@ export const previewDocument = (config: PreviewDocumentConfig) => `<!doctype htm
 		#preview-selection {
 			box-sizing: border-box;
 			pointer-events: none;
-			position: absolute;
+			position: fixed;
 		}
 		#preview-highlight {
 			z-index: 100;

diff --git a/src/preview/element-area.ts b/src/preview/element-area.ts
@@ -1,4 +1,5 @@
 import * as MobX from 'mobx';
+import * as Types from '../types';
 
 export interface ElementAreaInit {
 	top: number;
@@ -8,10 +9,7 @@ export interface ElementAreaInit {
 }
 
 export class ElementArea {
-	@MobX.observable public top: number = 0;
-	@MobX.observable public left: number = 0;
-	@MobX.observable public width: number = 0;
-	@MobX.observable public height: number = 0;
+	@MobX.observable public element: Element | undefined;
 	@MobX.observable public isVisible: boolean = false;
 
 	@MobX.action
@@ -20,23 +18,26 @@ export class ElementArea {
 	}
 
 	@MobX.action
-	public setSize(init: ElementAreaInit): void | Element {
-		this.top = init.top;
-		this.left = init.left;
-		this.width = init.width;
-		this.height = init.height;
+	public setElement(element: Element | undefined): void {
+		this.element = element;
 	}
 
 	@MobX.action
 	public show(): void {
 		this.isVisible = true;
 	}
 
-	public write(element: HTMLElement): void {
-		element.style.top = `${this.top}px`;
-		element.style.left = `${this.left}px`;
-		element.style.width = `${this.width}px`;
-		element.style.height = `${this.height}px`;
+	public write(element: HTMLElement, context: { scrollPositon: Types.Point }): void {
+		if (!this.element) {
+			return;
+		}
+
+		const rect = this.element.getBoundingClientRect();
+
+		element.style.top = `${rect.top}px`;
+		element.style.left = `${rect.left}px`;
+		element.style.width = `${rect.width}px`;
+		element.style.height = `${rect.height}px`;
 		element.style.display = this.isVisible ? 'block' : 'none';
 	}
 }
diff --git a/src/preview/preview-store.ts b/src/preview/preview-store.ts
@@ -57,6 +57,7 @@ export class PreviewStore<V> {
 	@Mobx.observable private project: Model.Project;
 	@Mobx.observable private selectionArea: ElementArea;
 	@Mobx.observable private synthetics: SyntheticComponents<V>;
+	@Mobx.observable private scrollPosition: Types.Point;
 	private sender?: Sender;
 
 	@Mobx.computed
@@ -247,6 +248,10 @@ export class PreviewStore<V> {
 			}, {});
 	}
 
+	public getScrollPosition(): Types.Point {
+		return this.scrollPosition;
+	}
+
 	public getSender(): Sender | undefined {
 		return this.sender;
 	}
@@ -317,16 +322,7 @@ export class PreviewStore<V> {
 			return;
 		}
 
-		if (data.node) {
-			const rect = data.node.getBoundingClientRect();
-
-			this.highlightArea.setSize({
-				top: rect.top,
-				left: rect.left,
-				width: rect.width,
-				height: rect.height
-			});
-		}
+		this.highlightArea.setElement(data.node);
 
 		if (data.element.getRole() === Types.ElementRole.Root) {
 			this.highlightArea.hide();
@@ -341,16 +337,7 @@ export class PreviewStore<V> {
 			return;
 		}
 
-		if (data.node) {
-			const rect = data.node.getBoundingClientRect();
-
-			this.selectionArea.setSize({
-				top: rect.top,
-				left: rect.left,
-				width: rect.width,
-				height: rect.height
-			});
-		}
+		this.selectionArea.setElement(data.node);
 
 		if (data.element.getRole() === Types.ElementRole.Root) {
 			this.selectionArea.hide();
@@ -407,4 +394,9 @@ export class PreviewStore<V> {
 	public setSender(sender: Sender): void {
 		this.sender = sender;
 	}
+
+	@Mobx.action
+	public setScrollPosition(scrollPosition: Types.Point): void {
+		this.scrollPosition = scrollPosition;
+	}
 }
diff --git a/src/preview/preview.ts b/src/preview/preview.ts
@@ -64,6 +64,14 @@ function main(): void {
 		}
 	});
 
+	window.addEventListener('scroll', () => {
+		const el = document.scrollingElement || document.documentElement;
+		store.setScrollPosition({
+			x: el.scrollLeft,
+			y: el.scrollTop
+		});
+	});
+
 	document.body.addEventListener('mouseleave', () => {
 		store.getProject().unsetHighlightedElement();
 		store.getProject().unsetHighlightedElementContent();
@@ -224,17 +232,23 @@ function main(): void {
 			}
 		);
 
-		Mobx.autorun(() => {
-			const selectionArea = store.getSelectionArea();
-			const selectionNode = document.getElementById('preview-selection') as HTMLElement;
-			selectionArea.write(selectionNode);
-		});
+		Mobx.autorun(
+			() => {
+				const selectionArea = store.getSelectionArea();
+				const selectionNode = document.getElementById('preview-selection') as HTMLElement;
+				selectionArea.write(selectionNode, { scrollPositon: store.getScrollPosition() });
+			},
+			{ scheduler: window.requestAnimationFrame }
+		);
 
-		Mobx.autorun(() => {
-			const highlightNode = document.getElementById('preview-highlight') as HTMLElement;
-			const highlightArea = store.getHighlightArea();
-			highlightArea.write(highlightNode);
-		});
+		Mobx.autorun(
+			() => {
+				const highlightNode = document.getElementById('preview-highlight') as HTMLElement;
+				const highlightArea = store.getHighlightArea();
+				highlightArea.write(highlightNode, { scrollPositon: store.getScrollPosition() });
+			},
+			{ scheduler: window.requestAnimationFrame }
+		);
 
 		Mobx.reaction(
 			() => store.getMetaDown(),

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -444,3 +444,8 @@ export enum ElementTargetType {
 	Below = 'below',
 	Inside = 'inside'
 }
+
+export interface Point {
+	x: number;
+	y: number;
+}