Checkpoint 4

index.html

@@ -38,7 +38,9 @@
 		</div>
 	</div>
 	
-	<div class="container">
+	<div class="container-wrapper">
+		<svg class="svg-container"></svg>
+		<div class="container"></div>
 	</div>
 	
 	<script src="/dist/script.js"></script>

js-src/coref.ts

@@ -32,6 +32,7 @@ class Coref {
 	onStart =   () => {};
 	onSuccess = () => {};
 	container?: HTMLElement;
+	svgContainer?: SVGSVGElement;
 	
 	constructor(endpoint: string, opts: any) {
 		this.endpoint = endpoint;
@@ -41,6 +42,14 @@ class Coref {
 		if (opts.onSuccess) {
 			(<any>this).onSuccess = opts.onSuccess;
 		}
+		
+		window.addEventListener('resize', this.svgResize);
+	}
+	
+	svgResize() {
+		if (!this.container || !this.svgContainer) { return ; }
+		this.svgContainer.setAttribute('width', `${this.container.scrollWidth}`);   /// Caution: not offsetWidth.
+		this.svgContainer.setAttribute('height', `${this.container.scrollHeight}`);
 	}
 	
 	parse(text: string) {
@@ -69,8 +78,13 @@ class Coref {
 			m.singleScore = res.singleScores[m.index] || undefined;
 		}
 		const markup = Displacy.render(res.cleanedText, mentions);
-		if (!this.container) { return ; }
-		// console.log(markup);  // todo remove
+		if (!this.container || !this.svgContainer) { return ; }
+		
 		this.container.innerHTML = `<div class="text">${markup}</div>`;
+		/// SVG
+		this.svgResize();
+		// this.svgContainer.width = this.container
+		window.container = this.container;
+		window.svgContainer = this.svgContainer;
 	}
 }

js-src/zController.ts

@@ -33,10 +33,12 @@ const updateURL = (text) => {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-	const $input    = document.querySelector('input.input-message') as HTMLInputElement;
-	const $form     = document.querySelector('form.js-form') as HTMLFormElement;
-	const $checkbox = document.querySelector('.js-checkbox') as HTMLElement;
-	coref.container = document.querySelector('.container') as HTMLElement;
+	const $input        = document.querySelector('input.input-message') as HTMLInputElement;
+	const $form         = document.querySelector('form.js-form') as HTMLFormElement;
+	const $checkbox     = document.querySelector('.js-checkbox') as HTMLElement;
+	const $svgContainer = document.querySelector('.svg-container') as SVGSVGElement;
+	coref.container     = document.querySelector('.container') as HTMLElement;
+	coref.svgContainer  = $svgContainer;
 	
 	{
 		// Initial text

less/style.less

@@ -84,9 +84,13 @@ code, pre {
 	}
 }
 
+.container-wrapper {
+	overflow-x: auto;
+	position: relative;
+}
+
 .container {
 	font-size: 20px;
-	overflow-x: auto;
 	white-space: nowrap;
 	padding: 180px 40px;
 	mark {
@@ -114,6 +118,13 @@ body.debug {
 	}
 }
 
+.svg-container {
+	position: absolute;
+	top: 0; left: 0; right: 0; bottom: 0;
+	z-index: -1;
+	background-color: pink;
+}
+
 /**
  * Elements from Displacy
  */