From e115e5d96883c378d7d50ef215e8abba734b1dfa Mon Sep 17 00:00:00 2001
From: "kam (from the studio)" <luzzanafrancesco@gmail.com>
Date: Thu, 17 Feb 2022 19:20:03 +0100
Subject: [PATCH] branching svgs

---
 MANIFEST.in                               |  4 ++
 exquisite_branch/draw.py                  |  5 ++-
 exquisite_branch/static/css/display.css   | 24 +++++++++++
 exquisite_branch/static/css/draw.css      | 36 ++++++++++++----
 exquisite_branch/static/css/global.css    |  9 ++++
 exquisite_branch/static/css/variables.css |  3 ++
 exquisite_branch/static/js/draw.js        | 18 ++++++--
 exquisite_branch/templates/display.html   | 31 +++++++++-----
 exquisite_branch/templates/draw.html      | 52 +++++++++--------------
 exquisite_branch/templates/home.html      |  2 +
 exquisite_branch/templates/share.html     | 13 ++++--
 setup.py                                  | 13 ++++++
 12 files changed, 150 insertions(+), 60 deletions(-)
 create mode 100644 MANIFEST.in
 create mode 100644 exquisite_branch/static/css/display.css
 create mode 100644 exquisite_branch/static/css/global.css
 create mode 100644 exquisite_branch/static/css/variables.css
 create mode 100644 setup.py

diff --git a/MANIFEST.in b/MANIFEST.in
new file mode 100644
index 0000000..f1ad6f2
--- /dev/null
+++ b/MANIFEST.in
@@ -0,0 +1,4 @@
+include exquisite_branch/schema.sql
+graft exquisite_branch/static
+graft exquisite_branch/templates
+global-exclude *.pyc
\ No newline at end of file
diff --git a/exquisite_branch/draw.py b/exquisite_branch/draw.py
index 2f9e495..f2696b7 100644
--- a/exquisite_branch/draw.py
+++ b/exquisite_branch/draw.py
@@ -16,8 +16,11 @@ def draw(parent=None):
     if request.method == 'POST':
         content = request.form.get('content')
         branch = request.form.get('branch')
+        if request.is_json:
+            data = request.get_json()
+            content = data['content']
+            branch = data['branch']
 
-        print(content)
 
         db.execute(
             'INSERT INTO branches (content, parent, branch) VALUES (?, ?, ?)',
diff --git a/exquisite_branch/static/css/display.css b/exquisite_branch/static/css/display.css
new file mode 100644
index 0000000..f19e5ba
--- /dev/null
+++ b/exquisite_branch/static/css/display.css
@@ -0,0 +1,24 @@
+.streams {
+	overflow-x: auto;
+	overflow-y: hidden;
+	position: relative;
+	height: 500px;
+}
+
+.stream {
+	white-space: nowrap;
+	position: absolute;
+}
+
+.branches {
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+
+.branch {
+	white-space: nowrap;
+}
+
+.branch svg {
+	border-top: 1px solid currentColor;
+}
diff --git a/exquisite_branch/static/css/draw.css b/exquisite_branch/static/css/draw.css
index b48e961..778e7b3 100644
--- a/exquisite_branch/static/css/draw.css
+++ b/exquisite_branch/static/css/draw.css
@@ -1,14 +1,32 @@
-* {
-	box-sizing: border-box;
+svg {
+	width: 500px;
+	height: 500px;
+	background-color: white;
+}
+#svg-container {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
 }
 
-html,
-body {
-	margin: 0;
+#previous {
+	position: absolute;
+	top: 0;
+	transform: translateX(-100%);
 }
 
-canvas {
-	width: 500px;
-	height: 500px;
-	border: 1px solid currentColor;
+#previous svg {
+	background: none;
+	border: none;
+}
+
+#previous::after {
+	content: "";
+	width: 100%;
+	height: 100%;
+	left: 0;
+	position: absolute;
+	transform: translateX(-25%);
+	background-color: var(--background);
 }
diff --git a/exquisite_branch/static/css/global.css b/exquisite_branch/static/css/global.css
new file mode 100644
index 0000000..dab5c64
--- /dev/null
+++ b/exquisite_branch/static/css/global.css
@@ -0,0 +1,9 @@
+html,
+body {
+	margin: 0;
+	background-color: var(--background);
+}
+
+* {
+	box-sizing: border-box;
+}
diff --git a/exquisite_branch/static/css/variables.css b/exquisite_branch/static/css/variables.css
new file mode 100644
index 0000000..8efbadc
--- /dev/null
+++ b/exquisite_branch/static/css/variables.css
@@ -0,0 +1,3 @@
+:root {
+	--background: #ddd;
+}
diff --git a/exquisite_branch/static/js/draw.js b/exquisite_branch/static/js/draw.js
index 133d6bb..71404c4 100644
--- a/exquisite_branch/static/js/draw.js
+++ b/exquisite_branch/static/js/draw.js
@@ -14,7 +14,7 @@ svgElement.addEventListener("mousedown", function (e) {
 	bufferSize = document.getElementById("cmbBufferSize").value;
 	path = document.createElementNS("http://www.w3.org/2000/svg", "path");
 	path.setAttribute("fill", "none");
-	path.setAttribute("stroke", "#000");
+	path.setAttribute("stroke", "currentColor");
 	path.setAttribute("stroke-width", strokeWidth);
 	buffer = [];
 	var pt = getMousePosition(e);
@@ -37,6 +37,12 @@ svgElement.addEventListener("mouseup", function () {
 	}
 });
 
+svgElement.addEventListener("mouseleave", function () {
+	if (path) {
+		path = null;
+	}
+});
+
 var getMousePosition = function (e) {
 	return {
 		x: e.pageX - rect.left,
@@ -101,16 +107,20 @@ var updateSvgPath = function () {
 const send = document.getElementById("send");
 send.addEventListener("click", (e) => saveSVG(e));
 
-function saveSVG(e) {
+async function saveSVG(e) {
 	let wrapper = document.createElement("div");
 	wrapper.appendChild(svgElement);
 
-	fetch(`${svgElement.dataset.parent}`, {
+	await fetch(`${svgElement.dataset.parent}`, {
 		method: "POST",
+		redirect: "follow",
+		headers: {
+			"Content-Type": "application/json",
+		},
 		body: JSON.stringify({
 			content: wrapper.innerHTML,
 			parent: svgElement.dataset.parent,
 			branch: svgElement.dataset.branch,
 		}),
-	});
+	}).then((res) => (window.location = res.url));
 }
diff --git a/exquisite_branch/templates/display.html b/exquisite_branch/templates/display.html
index 06b1815..9859a18 100644
--- a/exquisite_branch/templates/display.html
+++ b/exquisite_branch/templates/display.html
@@ -5,22 +5,33 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Display</title>
+		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/display.css')}}" />
 	</head>
 	<body>
 		<h1>Exquisite Branch</h1>
-		<h2>Entries</h2>
-		{% for branch in branches %} {{branch['content']}} {%endfor%}
-		<h2>Branches</h2>
-		<ul>
+
+		<div class="streams">
 			{% for stream in streams %}
+			<div
+				class="stream"
+				style="color: rgb({{ range(0, 255) | random }},{{ range(0, 255) | random }},{{ range(0, 255) | random }}); transform: translate({{ range(-5, 5) | random }}px, {{ range(-5, 5) | random }}px)"
+			>
+				{% for branch in stream %} {{branch['content'] | safe}} {%endfor%}
+			</div>
+			{%endfor%}
+		</div>
 
-			<li>
-				{% for branch in stream %}
-				<span>{{branch['content']}}</span>
-				{%endfor%}
-			</li>
+		{{colors}}
 
+		<h2>Branches</h2>
+		<div class="branches">
+			{% for stream in streams %}
+			<div class="branch">
+				{% for branch in stream %} {{branch['content'] | safe}} {%endfor%}
+			</div>
 			{%endfor%}
-		</ul>
+		</div>
 	</body>
 </html>
diff --git a/exquisite_branch/templates/draw.html b/exquisite_branch/templates/draw.html
index bbe8d88..e0d0adc 100644
--- a/exquisite_branch/templates/draw.html
+++ b/exquisite_branch/templates/draw.html
@@ -8,6 +8,8 @@
 
 		<script src="{{url_for('static', filename='js/draw.js')}}" defer></script>
 
+		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
 		<link rel="stylesheet" href="{{url_for('static', filename='css/draw.css')}}" />
 	</head>
 	<body>
@@ -24,39 +26,25 @@
 			</select>
 		</div>
 
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			xmlns:xlink="http://www.w3.org/1999/xlink"
-			version="1.1"
-			id="svgElement"
-			x="0px"
-			y="0px"
-			width="600px"
-			height="400px"
-			viewBox="0 0 600 400"
-			enable-background="new 0 0 600 400"
-			xml:space="preserve"
-			data-parent="{{parent or None}}"
-			data-branch="{{branch}}"
-		></svg>
+		<div id="svg-container">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				xmlns:xlink="http://www.w3.org/1999/xlink"
+				version="1.1"
+				id="svgElement"
+				x="0px"
+				y="0px"
+				width="500px"
+				height="500px"
+				viewBox="0 0 500 500"
+				enable-background="new 0 0 500 500"
+				xml:space="preserve"
+				data-parent="{{parent or None}}"
+				data-branch="{{branch}}"
+			></svg>
+			<div id="previous">{% if content %} {{content|safe}} {% endif %}</div>
+		</div>
 
 		<button id="send">Send</button>
-
-		<h2>Previous content</h2>
-
-		{% if content %} {{content}} {% endif %}
-
-		<h2>Parent</h2>
-
-		{%if parent %} {{parent}} {%endif %}
-
-		<h2>Branch</h2>
-		{%if branch %} {{branch}} {%endif %}`
-
-		<form class="canvas" method="POST">
-			<input type="text" name="content" />
-			<input type="hidden" name="branch" value="{{branch}}" />
-			<input type="submit" />
-		</form>
 	</body>
 </html>
diff --git a/exquisite_branch/templates/home.html b/exquisite_branch/templates/home.html
index 648e6bc..116f07a 100644
--- a/exquisite_branch/templates/home.html
+++ b/exquisite_branch/templates/home.html
@@ -5,6 +5,8 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Exquisite Branch</title>
+		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
 	</head>
 	<body>
 		<h1>Exquisite Branch</h1>
diff --git a/exquisite_branch/templates/share.html b/exquisite_branch/templates/share.html
index 1f21146..d8312d2 100644
--- a/exquisite_branch/templates/share.html
+++ b/exquisite_branch/templates/share.html
@@ -5,11 +5,16 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Share</title>
+		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/share.css')}}" />
 	</head>
 	<body>
-		Send this link to your friends:
-		<a href="{{url_for('draw.draw', parent=branch)}}"
-			>{{url_for('draw.draw', parent=branch)}}</a
-		>
+		<div class="share">
+			Send this link to your friends:
+			<a href="{{url_for('draw.draw', parent=branch)}}"
+				>{{url_for('draw.draw', parent=branch)}}</a
+			>
+		</div>
 	</body>
 </html>
diff --git a/setup.py b/setup.py
new file mode 100644
index 0000000..7467f60
--- /dev/null
+++ b/setup.py
@@ -0,0 +1,13 @@
+from setuptools import find_packages, setup
+
+setup(
+    name='exquisite_branch',
+    version='1.0.0',
+    packages=find_packages(),
+    include_package_data=True,
+    zip_safe=False,
+    install_requires=[
+        'flask',
+        'shortuuid'
+    ],
+)