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':
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 (?, ?, ?)',

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 @@
* {
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);
}

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

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

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

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>
<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>

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

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

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

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

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