test with tree

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

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)

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

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());
+
 //
 //
 //

exquisite_branch/templates/display_mako_bis.html

@@ -0,0 +1,31 @@
+<%inherit file="base_mako.html" />
+
+<%block name="head">
+<link rel="stylesheet" href="${url_for('static', filename='css/display_mako_bis.css')}">
+</%block>
+
+<%def name="render_node(node)">
+	<div class="node">
+		<a href="${url_for('draw.draw', parent=node.name)}" target="__blank">
+			${node.content}
+		</a>
+		% if len(node.children) > 0:
+		<div class="children">
+			% for child in node.children:
+				${render_node(child)}
+			% endfor
+		</div>
+		% endif
+	</div>
+</%def>
+
+
+<main class="container">
+	
+% for branch in root.children:
+<div class="branches">
+	${render_node(branch)}
+</div>
+% endfor
+
+</main>

exquisite_branch/templates/draw.html

@@ -11,17 +11,6 @@
 
 <h1>Draw</h1>
 
-<div id="divSmoothingFactor">
-	<label for="cmbBufferSize">Smoothing</label>
-	<select id="cmbBufferSize">
-		<option value="1">1 - No smoothing</option>
-		<option value="4">4 - Sharp curves</option>
-		<option value="8" selected="selected">8 - Smooth curves</option>
-		<option value="12">12 - Very smooth curves</option>
-		<option value="16">16 - Super smooth curves</option>
-		<option value="20">20 - Hyper smooth curves</option>
-	</select>
-</div>
 
 <div id="svg-container">
 	<svg

exquisite_branch/tree.py

@@ -0,0 +1,23 @@
+from bigtree import Node, print_tree, get_subtree
+from exquisite_branch.db import get_db, dict_factory
+
+
+def make_tree(branches):
+
+    nodes = {}
+    nodes["NEW"] = Node("NEW")
+
+    for branch in branches:
+        try:
+            id = branch["branch"]
+            parent_id = branch["parent"]
+            content = branch["content"]
+            username = branch["username"]
+            nodes[id] = Node(
+                id, parent=nodes[parent_id], content=content, username=username
+            )
+        except Exception as e:
+            print(e)
+
+    nodes["NEW"].hshow(style="rounded")
+    return nodes["NEW"]

src/exquisite-branch

@@ -0,0 +1 @@
+Subproject commit ae185baf0c048ac5f9171314ea5e842362b99dcd