From e115e5d96883c378d7d50ef215e8abba734b1dfa Mon Sep 17 00:00:00 2001 From: "kam (from the studio)" 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 @@ Display + + +

Exquisite Branch

-

Entries

- {% for branch in branches %} {{branch['content']}} {%endfor%} -

Branches

- + 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 @@ + + @@ -24,39 +26,25 @@ - +
+ + +
- -

Previous content

- - {% if content %} {{content}} {% endif %} - -

Parent

- - {%if parent %} {{parent}} {%endif %} - -

Branch

- {%if branch %} {{branch}} {%endif %}` - -
- - - -
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 @@ Exquisite Branch + +

Exquisite Branch

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 @@ Share + + + - Send this link to your friends: - {{url_for('draw.draw', parent=branch)}} +
+ Send this link to your friends: + {{url_for('draw.draw', parent=branch)}} +
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' + ], +)