From 8e9f113fc1bedf4023494a3b46184d9d84ae8b02 Mon Sep 17 00:00:00 2001 From: km0 Date: Sun, 28 Jul 2024 19:29:12 +0200 Subject: [PATCH] test with tree --- exquisite_branch/db.py | 22 ++++++---- exquisite_branch/display.py | 26 +++++++++--- .../static/css/display_mako_bis.css | 34 +++++++++++++++ exquisite_branch/static/js/draw.js | 41 +++++++++++-------- .../templates/display_mako_bis.html | 31 ++++++++++++++ exquisite_branch/templates/draw.html | 11 ----- exquisite_branch/tree.py | 23 +++++++++++ src/exquisite-branch | 1 + 8 files changed, 148 insertions(+), 41 deletions(-) create mode 100644 exquisite_branch/static/css/display_mako_bis.css create mode 100644 exquisite_branch/templates/display_mako_bis.html create mode 100644 exquisite_branch/tree.py create mode 160000 src/exquisite-branch diff --git a/exquisite_branch/db.py b/exquisite_branch/db.py index ef6e138..a3d8a77 100644 --- a/exquisite_branch/db.py +++ b/exquisite_branch/db.py @@ -5,11 +5,17 @@ from flask import current_app, g from flask.cli import with_appcontext +def dict_factory(cursor, row): + d = {} + for idx, col in enumerate(cursor.description): + d[col[0]] = row[idx] + return d + + def get_db(): - if 'db' not in g: + if "db" not in g: g.db = sqlite3.connect( - current_app.config['DATABASE'], - detect_types=sqlite3.PARSE_DECLTYPES + current_app.config["DATABASE"], detect_types=sqlite3.PARSE_DECLTYPES ) g.db.row_factory = sqlite3.Row @@ -17,7 +23,7 @@ def get_db(): def close_db(e=None): - db = g.pop('db', None) + db = g.pop("db", None) if db is not None: db.close() @@ -26,16 +32,16 @@ def close_db(e=None): def init_db(): db = get_db() - with current_app.open_resource('schema.sql') as f: - db.executescript(f.read().decode('utf8')) + with current_app.open_resource("schema.sql") as f: + db.executescript(f.read().decode("utf8")) -@click.command('init-db') +@click.command("init-db") @with_appcontext def init_db_command(): """Clear the existing data and create new tables.""" init_db() - click.echo('Initialized the database.') + click.echo("Initialized the database.") def init_app(app): diff --git a/exquisite_branch/display.py b/exquisite_branch/display.py index 1def320..be53b6f 100644 --- a/exquisite_branch/display.py +++ b/exquisite_branch/display.py @@ -1,9 +1,9 @@ -from flask import (Blueprint) +from flask import Blueprint from flask_mako import render_template -from exquisite_branch.db import get_db +from exquisite_branch.db import get_db, dict_factory +from exquisite_branch.tree import make_tree - -bp = Blueprint('display', __name__, url_prefix='/display') +bp = Blueprint("display", __name__, url_prefix="/display") # @bp.route('/') @@ -34,7 +34,18 @@ bp = Blueprint('display', __name__, url_prefix='/display') # return [item for sublist in t for item in sublist] -@bp.route('/') +# @bp.route("/") +# def display(): +# db = get_db() + +# branches = db.execute( +# "SELECT content, branch, parent, username FROM branches" +# ).fetchall() + +# return render_template("display_mako_bis.html", branches=branches) + + +@bp.route("/") def display(): db = get_db() @@ -42,4 +53,7 @@ def display(): "SELECT content, branch, parent, username FROM branches" ).fetchall() - return render_template('display_linked_mako.html', branches=branches) + root = make_tree(branches) + + return render_template("display_mako_bis.html", root=root) + # return render_template("display_linked_mako.html", branches=branches) diff --git a/exquisite_branch/static/css/display_mako_bis.css b/exquisite_branch/static/css/display_mako_bis.css new file mode 100644 index 0000000..9e2b112 --- /dev/null +++ b/exquisite_branch/static/css/display_mako_bis.css @@ -0,0 +1,34 @@ +:root { + --size: 100px; +} + +svg { + width: var(--size); + height: var(--size); +} + +.branches { + display: block; + position: sticky; + top: calc(-1 * var(--size)); +} + +.node { + position: sticky; + top: calc(-1 * var(--size)); + display: inline-flex; + justify-content: center; + align-items: flex-start; +} + +.children { + height: var(--size); + overflow: scroll; + position: -webkit-sticky; + position: sticky; + top: calc(-1 * var(--size)); + display: inline-flex; + align-items: flex-start; + flex-direction: column; + height: var(--size); +} diff --git a/exquisite_branch/static/js/draw.js b/exquisite_branch/static/js/draw.js index 8935639..7ee36ad 100644 --- a/exquisite_branch/static/js/draw.js +++ b/exquisite_branch/static/js/draw.js @@ -1,7 +1,7 @@ // Great resource from https://stackoverflow.com/a/40700068 // Thank you ConnorFan -var strokeWidth = 2; +var strokeWidth = 8; var bufferSize; var svgElement = document.getElementById("svgElement"); @@ -10,8 +10,10 @@ var path = null; var strPath; var buffer = []; // Contains the last positions of the mouse cursor -svgElement.addEventListener("mousedown", function (e) { - bufferSize = document.getElementById("cmbBufferSize").value; +const startDrawing = (e) => { + e.preventDefault(); + // console.log("start"); + bufferSize = 2; path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("fill", "none"); path.setAttribute("stroke", "currentColor"); @@ -22,31 +24,28 @@ svgElement.addEventListener("mousedown", function (e) { strPath = "M" + pt.x + " " + pt.y; path.setAttribute("d", strPath); svgElement.appendChild(path); -}); +}; -svgElement.addEventListener("mousemove", function (e) { +const draw = (e) => { + e.preventDefault(); if (path) { + // console.log("draw"); appendToBuffer(getMousePosition(e)); updateSvgPath(); } -}); - -svgElement.addEventListener("mouseup", function () { - if (path) { - path = null; - } -}); +}; -svgElement.addEventListener("mouseleave", function () { +const stopDrawing = () => { if (path) { + // console.log("stop"); path = null; } -}); +}; var getMousePosition = function (e) { return { - x: e.pageX - rect.left, - y: e.pageY - rect.top, + x: (e.pageX || e?.changedTouches[0]?.pageX) - rect.left, + y: (e.pageY || e?.changedTouches[0]?.pageY) - rect.top, }; }; @@ -99,6 +98,16 @@ var updateSvgPath = function () { } }; +svgElement.addEventListener("mousedown", (e) => startDrawing(e)); +svgElement.addEventListener("touchstart", (e) => startDrawing(e), { passive: false }); + +svgElement.addEventListener("mousemove", (e) => draw(e)); +svgElement.addEventListener("touchmove", (e) => draw(e), { passive: false }); + +svgElement.addEventListener("mouseup", () => stopDrawing()); +svgElement.addEventListener("mouseleave", () => stopDrawing()); +svgElement.addEventListener("touchend", () => stopDrawing()); + // // // diff --git a/exquisite_branch/templates/display_mako_bis.html b/exquisite_branch/templates/display_mako_bis.html new file mode 100644 index 0000000..8ef94ab --- /dev/null +++ b/exquisite_branch/templates/display_mako_bis.html @@ -0,0 +1,31 @@ +<%inherit file="base_mako.html" /> + +<%block name="head"> + + + +<%def name="render_node(node)"> +
+ + ${node.content} + + % if len(node.children) > 0: +
+ % for child in node.children: + ${render_node(child)} + % endfor +
+ % endif +
+ + + +
+ +% for branch in root.children: +
+ ${render_node(branch)} +
+% endfor + +
diff --git a/exquisite_branch/templates/draw.html b/exquisite_branch/templates/draw.html index 163240e..eae7df8 100644 --- a/exquisite_branch/templates/draw.html +++ b/exquisite_branch/templates/draw.html @@ -11,17 +11,6 @@

Draw

-
- - -