clean up UI code

1 files changed, 9 insertions, 57 deletions

diff --git a/src/index.js b/src/index.js
index 5240fbc..090b67a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,12 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as jsonld from 'jsonld';
-import * as dom from './dom';
 import Layout from './layout';
-import { Note } from './ui';
+import { css, Links, Note } from './ui';
 import { render, h, Fragment, Component } from 'preact';
 import { useRef, useState, useLayoutEffect, useEffect } from 'preact/hooks';
 
-dom.css`
+css`
 article > div {
 	position: relative;
 }
@@ -29,53 +28,6 @@ const context = [
 	},
 ];
 
-const LinksCanvas = ({ links, ...props }) => {
-	const canvas = useRef(null);
-
-	useLayoutEffect(() => {
-		const ctx = canvas.current.getContext('2d');
-		ctx.lineWidth = 4;
-		ctx.lineCap = 'round';
-		ctx.lineJoin = 'round';
-		ctx.strokeStyle = '#696969';
-		ctx.fillStyle = '#696969';
-		ctx.shadowBlur = 5;
-		ctx.shadowOffsetX = 3;
-		ctx.shadowOffsetY = -2;
-
-		ctx.clearRect(0, 0, canvas.current.width, canvas.current.height);
-
-		for (const points of links) {
-			ctx.shadowColor = '#000000';
-			ctx.beginPath();
-			ctx.moveTo(...points[1]);
-			for (let i = 4; i < points.length; i += 3) {
-				const [ax, ay] = points[i - 2];
-				const [bx, by] = points[i - 1];
-				const [x, y] = points[i];
-				ctx.bezierCurveTo(ax, ay, bx, by, x, y);
-			}
-			ctx.stroke();
-
-			const [lx, ly] = points[points.length - 1];
-			const [tx, ty] = points[0];
-			const [dx, dy] = [tx - lx, ty - ly];
-			const [hx, hy] = [dy*0.7, dx*-0.7];
-
-			ctx.shadowColor = 'transparent';
-			ctx.beginPath();
-			ctx.moveTo(lx + dx*0.8, ly + dy*0.8);
-			ctx.lineTo(lx - dx*0.5 + hx, ly - dy*0.5 + hy);
-			ctx.lineTo(lx - dx*0.5 - hx, ly - dy*0.5 - hy);
-			ctx.fill();
-		}
-	});
-
-	return (
-		<canvas {...props} ref={canvas} />
-	);
-};
-
 class GraphContainer extends Component {
 	state = {
 		name: "loading…",
@@ -139,31 +91,31 @@ class GraphContainer extends Component {
 	}
 
 	render() {
-  	return this.props.render(this.state);
+		return this.props.render(this.state);
 	}
 }
 
 const App = ({ discussion }) => {
 	const { name, items } = discussion;
 	const [{ width, height, positions, links }, setState] = useState({
-  	width: 0,
-  	height: 0,
-  	positions: {},
-  	links: [],
+		width: 0,
+		height: 0,
+		positions: {},
+		links: [],
 	});
 
 	const layout = new Layout();
 	const setNodeSize = layout.addNode.bind(layout);
 
 	useEffect(() => {
-  	layout.render().then(setState);
+		layout.render().then(setState);
 	}, [ items ]);
 
 	return (
 		<article>
 			<h1>{name}</h1>
 			<div>
-				<LinksCanvas width={width} height={height} links={links} />
+				<Links width={width} height={height} links={links} />
 				<div>
 					{Object.values(items).map((item) => {
 						const onlyParent = item.inReplyTo.length === 1 && items[item.inReplyTo[0].id];