chae
/
hacking-exquisite-branch
forked from kamo/exquisite-branch
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

branching svgs

Browse Source
master
km0 3 years ago
parent 3719f26082
commit e115e5d968
12 changed files with 150 additions and 60 deletions
Show Stats Download Patch File Download Diff File

4
MANIFEST.in
Unescape Escape View File

@ -0,0 +1,4 @@
include exquisite_branch/schema.sql
graft exquisite_branch/static
graft exquisite_branch/templates
global-exclude *.pyc

5
exquisite_branch/draw.py
Unescape Escape View File

@ -16,8 +16,11 @@ def draw(parent=None):
if request.method == 'POST': if request.method == 'POST':
content = request.form.get('content') content = request.form.get('content')
branch = request.form.get('branch') branch = request.form.get('branch')
if request.is_json:
data = request.get_json()
content = data['content']
branch = data['branch']
print(content)
db.execute( db.execute(
'INSERT INTO branches (content, parent, branch) VALUES (?, ?, ?)', 'INSERT INTO branches (content, parent, branch) VALUES (?, ?, ?)',

24
exquisite_branch/static/css/display.css
Unescape Escape View File

@ -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;
}

36
exquisite_branch/static/css/draw.css
Unescape Escape View File

@ -1,14 +1,32 @@
* { svg {
box-sizing: border-box; width: 500px;
height: 500px;
background-color: white;
}
#svg-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} }
html, #previous {
body { position: absolute;
margin: 0; top: 0;
transform: translateX(-100%);
} }
canvas { #previous svg {
width: 500px; background: none;
height: 500px; border: none;
border: 1px solid currentColor; }
#previous::after {
content: "";
width: 100%;
height: 100%;
left: 0;
position: absolute;
transform: translateX(-25%);
background-color: var(--background);
} }

9
exquisite_branch/static/css/global.css
Unescape Escape View File

@ -0,0 +1,9 @@
html,
body {
margin: 0;
background-color: var(--background);
}
* {
box-sizing: border-box;
}

3
exquisite_branch/static/css/variables.css
Unescape Escape View File

@ -0,0 +1,3 @@
:root {
--background: #ddd;
}

18
exquisite_branch/static/js/draw.js
Unescape Escape View File

@ -14,7 +14,7 @@ svgElement.addEventListener("mousedown", function (e) {
bufferSize = document.getElementById("cmbBufferSize").value; bufferSize = document.getElementById("cmbBufferSize").value;
path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("fill", "none"); path.setAttribute("fill", "none");
path.setAttribute("stroke", "#000"); path.setAttribute("stroke", "currentColor");
path.setAttribute("stroke-width", strokeWidth); path.setAttribute("stroke-width", strokeWidth);
buffer = []; buffer = [];
var pt = getMousePosition(e); var pt = getMousePosition(e);
@ -37,6 +37,12 @@ svgElement.addEventListener("mouseup", function () {
} }
}); });
svgElement.addEventListener("mouseleave", function () {
if (path) {
path = null;
}
});
var getMousePosition = function (e) { var getMousePosition = function (e) {
return { return {
x: e.pageX - rect.left, x: e.pageX - rect.left,
@ -101,16 +107,20 @@ var updateSvgPath = function () {
const send = document.getElementById("send"); const send = document.getElementById("send");
send.addEventListener("click", (e) => saveSVG(e)); send.addEventListener("click", (e) => saveSVG(e));
function saveSVG(e) { async function saveSVG(e) {
let wrapper = document.createElement("div"); let wrapper = document.createElement("div");
wrapper.appendChild(svgElement); wrapper.appendChild(svgElement);
fetch(`${svgElement.dataset.parent}`, { await fetch(`${svgElement.dataset.parent}`, {
method: "POST", method: "POST",
redirect: "follow",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ body: JSON.stringify({
content: wrapper.innerHTML, content: wrapper.innerHTML,
parent: svgElement.dataset.parent, parent: svgElement.dataset.parent,
branch: svgElement.dataset.branch, branch: svgElement.dataset.branch,
}), }),
}); }).then((res) => (window.location = res.url));
} }

31
exquisite_branch/templates/display.html
Unescape Escape View File

@ -5,22 +5,33 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display</title> <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> </head>
<body> <body>
<h1>Exquisite Branch</h1> <h1>Exquisite Branch</h1>
<h2>Entries</h2>
{% for branch in branches %} {{branch['content']}} {%endfor%} <div class="streams">
<h2>Branches</h2>
<ul>
{% for stream in 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> {{colors}}
{% for branch in stream %}
<span>{{branch['content']}}</span>
{%endfor%}
</li>
<h2>Branches</h2>
<div class="branches">
{% for stream in streams %}
<div class="branch">
{% for branch in stream %} {{branch['content'] | safe}} {%endfor%}
</div>
{%endfor%} {%endfor%}
</ul> </div>
</body> </body>
</html> </html>

52
exquisite_branch/templates/draw.html
Unescape Escape View File

@ -8,6 +8,8 @@
<script src="{{url_for('static', filename='js/draw.js')}}" defer></script> <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')}}" /> <link rel="stylesheet" href="{{url_for('static', filename='css/draw.css')}}" />
</head> </head>
<body> <body>
@ -24,39 +26,25 @@
</select> </select>
</div> </div>
<svg <div id="svg-container">
xmlns="http://www.w3.org/2000/svg" <svg
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
id="svgElement" version="1.1"
x="0px" id="svgElement"
y="0px" x="0px"
width="600px" y="0px"
height="400px" width="500px"
viewBox="0 0 600 400" height="500px"
enable-background="new 0 0 600 400" viewBox="0 0 500 500"
xml:space="preserve" enable-background="new 0 0 500 500"
data-parent="{{parent or None}}" xml:space="preserve"
data-branch="{{branch}}" data-parent="{{parent or None}}"
></svg> data-branch="{{branch}}"
></svg>
<div id="previous">{% if content %} {{content|safe}} {% endif %}</div>
</div>
<button id="send">Send</button> <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> </body>
</html> </html>

2
exquisite_branch/templates/home.html
Unescape Escape View File

@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exquisite Branch</title> <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> </head>
<body> <body>
<h1>Exquisite Branch</h1> <h1>Exquisite Branch</h1>

13
exquisite_branch/templates/share.html
Unescape Escape View File

@ -5,11 +5,16 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Share</title> <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> </head>
<body> <body>
Send this link to your friends: <div class="share">
<a href="{{url_for('draw.draw', parent=branch)}}" Send this link to your friends:
>{{url_for('draw.draw', parent=branch)}}</a <a href="{{url_for('draw.draw', parent=branch)}}"
> >{{url_for('draw.draw', parent=branch)}}</a
>
</div>
</body> </body>
</html> </html>

13
setup.py
Unescape Escape View File

@ -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'
],
)
Write Preview
Loading…
Cancel
Save