From 01e43fd3eb858b71420078988763d20d3e1cd851 Mon Sep 17 00:00:00 2001
From: David Evans <davidje13@users.noreply.github.com>
Date: Thu, 9 Nov 2017 20:09:16 +0000
Subject: [PATCH] Simplify rendered SVGs slightly and add support for Safari

---
 index.html                                    |  9 +--------
 readme_images.htm                             |  5 +----
 scripts/interface/Exporter.js                 | 19 +++++++++++++++++++
 scripts/interface/Interface_spec.js           |  8 ++++++++
 scripts/sequence/Renderer.js                  |  5 +----
 scripts/sequence/sequence_integration_spec.js |  6 +++---
 styles/main.css                               |  5 +++++
 test.htm                                      |  9 +--------
 8 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index f8754d0..e02b36a 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,7 @@
 <meta http-equiv="content-security-policy" content="
 	base-uri 'self';
 	default-src 'none';
-	script-src
-		'self'
-		'sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk='
-		'sha256-eue5ceZRwKVQ1OXOZSyU7MXCTZMlqsPi/TOIqh1Vlzo='
-		'sha256-OvxDPyq6KQAoWh11DLJdBVlHHLkYYiy4EzqTjIEJbb4='
-		'sha256-vnm8bzrI+krtz5228JDC2DoTv0e+sfnfTCiUnO2EBAM='
-		'sha256-HYX1RusN7a369vYuOd1mGvxLcNL4z/MihkahAI2CH8k='
-	;
+	script-src 'self' https://cdnjs.cloudflare.com;
 	style-src 'self' https://cdnjs.cloudflare.com;
 	img-src 'self' blob:;
 	form-action 'none';
diff --git a/readme_images.htm b/readme_images.htm
index 0da590f..c5fafbc 100644
--- a/readme_images.htm
+++ b/readme_images.htm
@@ -4,10 +4,7 @@
 <meta http-equiv="content-security-policy" content="
 	base-uri 'self';
 	default-src 'none';
-	script-src
-		'self'
-		'sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk='
-	;
+	script-src 'self' https://cdnjs.cloudflare.com;
 	style-src 'self';
 	connect-src 'self';
 	img-src 'self' blob:;
diff --git a/scripts/interface/Exporter.js b/scripts/interface/Exporter.js
index a70d0a3..e1fe15c 100644
--- a/scripts/interface/Exporter.js
+++ b/scripts/interface/Exporter.js
@@ -1,6 +1,9 @@
 define(() => {
 	'use strict';
 
+	// Thanks, https://stackoverflow.com/a/23522755/1180785
+	const safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
 	return class Exporter {
 		constructor() {
 			this.latestSVG = null;
@@ -41,11 +44,27 @@ define(() => {
 			const width = renderer.width * resolution;
 			const height = renderer.height * resolution;
 			const img = new Image(width, height);
+			let safariHackaround = null;
+			if(safari) {
+				// Safari fails to resize SVG images unless they are displayed
+				// on the page somewhere, so we must add it before drawing the
+				// image. For some reason, doing this inside the load listener
+				// is too late, so we do it here and do our best to ensure it
+				// doesn't change the page rendering (display:none fails too)
+				safariHackaround = document.createElement('div');
+				safariHackaround.style.position = 'absolute';
+				safariHackaround.style.visibility = 'hidden';
+				safariHackaround.appendChild(img);
+				document.body.appendChild(safariHackaround);
+			}
 
 			img.addEventListener('load', () => {
 				this.canvas.width = width;
 				this.canvas.height = height;
 				this.context.drawImage(img, 0, 0);
+				if(safariHackaround) {
+					document.body.removeChild(safariHackaround);
+				}
 				this.canvas.toBlob(callback, 'image/png');
 			}, {once: true});
 
diff --git a/scripts/interface/Interface_spec.js b/scripts/interface/Interface_spec.js
index f4fd6f4..c53a2a0 100644
--- a/scripts/interface/Interface_spec.js
+++ b/scripts/interface/Interface_spec.js
@@ -1,6 +1,9 @@
 defineDescribe('Interface', ['./Interface'], (Interface) => {
 	'use strict';
 
+	// Thanks, https://stackoverflow.com/a/23522755/1180785
+	const safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
 	let parser = null;
 	let generator = null;
 	let renderer = null;
@@ -61,6 +64,11 @@ defineDescribe('Interface', ['./Interface'], (Interface) => {
 			ui.build(container);
 
 			expect(ui.downloadSVG.getAttribute('href')).toEqual('#');
+			if(safari) {
+				// Safari actually starts a download if we do this, which
+				// doesn't seem to fit its usual security vibe
+				return;
+			}
 			ui.downloadSVG.dispatchEvent(new Event('click'));
 			expect(ui.downloadSVG.getAttribute('href')).toEqual('mySVGURL');
 		});
diff --git a/scripts/sequence/Renderer.js b/scripts/sequence/Renderer.js
index 6c0f160..e1918ee 100644
--- a/scripts/sequence/Renderer.js
+++ b/scripts/sequence/Renderer.js
@@ -126,10 +126,7 @@ define([
 		}
 
 		buildStaticElements() {
-			this.base = svg.makeContainer({
-				'width': '100%',
-				'height': '100%',
-			});
+			this.base = svg.makeContainer();
 
 			this.defs = svg.make('defs');
 			this.mask = svg.make('mask', {
diff --git a/scripts/sequence/sequence_integration_spec.js b/scripts/sequence/sequence_integration_spec.js
index 25aea72..21c5e1c 100644
--- a/scripts/sequence/sequence_integration_spec.js
+++ b/scripts/sequence/sequence_integration_spec.js
@@ -47,7 +47,7 @@ defineDescribe('Sequence Integration', [
 		const sequence = generator.generate(parsed);
 		renderer.render(sequence);
 		expect(getSimplifiedContent(renderer)).toEqual(
-			'<svg width="100%" height="100%" viewBox="-5 -5 10 10">' +
+			'<svg viewBox="-5 -5 10 10">' +
 			'<defs>' +
 			'<mask id="LineMask" maskUnits="userSpaceOnUse">' +
 			'<rect fill="#FFFFFF" x="-5" y="-5" width="10" height="10">' +
@@ -65,7 +65,7 @@ defineDescribe('Sequence Integration', [
 		renderer.render(sequence);
 
 		expect(getSimplifiedContent(renderer)).toEqual(
-			'<svg width="100%" height="100%" viewBox="-11.5 -16 23 21">' +
+			'<svg viewBox="-11.5 -16 23 21">' +
 			'<defs>' +
 			'<mask id="LineMask" maskUnits="userSpaceOnUse">' +
 			'<rect fill="#FFFFFF" x="-11.5" y="-16" width="23" height="21">' +
@@ -92,7 +92,7 @@ defineDescribe('Sequence Integration', [
 
 		const content = getSimplifiedContent(renderer);
 		expect(content).toContain(
-			'<svg width="100%" height="100%" viewBox="-5 -5 82 47">'
+			'<svg viewBox="-5 -5 82 47">'
 		);
 
 		// Agent 1
diff --git a/styles/main.css b/styles/main.css
index 9f20cbb..de582a2 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -58,6 +58,11 @@ html, body {
 .pane-view-inner {
 }
 
+.pane-view svg {
+	width: 100%;
+	height: 100%;
+}
+
 .pane-error {
 	position: absolute;
 	left: 0;
diff --git a/test.htm b/test.htm
index 0c5e630..f110157 100644
--- a/test.htm
+++ b/test.htm
@@ -4,14 +4,7 @@
 <meta http-equiv="content-security-policy" content="
 	base-uri 'self';
 	default-src 'none';
-	script-src
-		'self'
-		'sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk='
-		'sha256-nbDuV0lauU6Rzhc3T39vSmQ64+K0R8Kp556x6W5Xxg4='
-		'sha256-3t+j0EiiLhROsCHCLF+g/h4gPsyH5agBoZeAcOrydRM='
-		'sha256-Re9XxIL3x1flvE6WD58jWPdDzKYQLXwxS2HAVfmM6Z8='
-		'sha256-SYY59VkHlf1wmU3zhsnII/kb51ODoHy6ub8qaq0eAcY='
-	;
+	script-src 'self' https://cdnjs.cloudflare.com;
 	connect-src 'self';
 	style-src 'self' https://cdnjs.cloudflare.com;
 	img-src 'self' data: blob:;