branching svgs

2 years ago · e115e5d968
parent 3719f26082
commit e115e5d968
12 changed files with 150 additions and 60 deletions
--- a/MANIFEST.in
+++ b/MANIFEST.in
@ -0,0 +1,4 @@
+include exquisite_branch/schema.sql
+graft exquisite_branch/static
+graft exquisite_branch/templates
+global-exclude *.pyc
--- 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 (?, ?, ?)',
--- a/exquisite_branch/static/css/display.css
+++ 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;
+}
--- 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);
 }
--- a/exquisite_branch/static/css/global.css
+++ b/exquisite_branch/static/css/global.css
@ -0,0 +1,9 @@
+html,
+body {
+	margin: 0;
+	background-color: var(--background);
+}
+
+* {
+	box-sizing: border-box;
+}
--- a/exquisite_branch/static/css/variables.css
+++ b/exquisite_branch/static/css/variables.css
@ -0,0 +1,3 @@
+:root {
+	--background: #ddd;
+}
--- 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));
 }
--- 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>
--- 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>
--- 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>
--- 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>
--- a/setup.py
+++ 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'
+    ],
+)