links leave shadow

1 files changed, 64 insertions, 57 deletions

diff --git a/src/index.js b/src/index.js
index 460b288..5240fbc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ import * as dom from './dom';
 import Layout from './layout';
 import { Note } from './ui';
 import { render, h, Fragment, Component } from 'preact';
-import { useRef, useLayoutEffect } from 'preact/hooks';
+import { useRef, useState, useLayoutEffect, useEffect } from 'preact/hooks';
 
 dom.css`
 article > div {
@@ -39,10 +39,14 @@ const LinksCanvas = ({ links, ...props }) => {
 		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) {
@@ -58,6 +62,7 @@ const LinksCanvas = ({ links, ...props }) => {
 			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);
@@ -71,22 +76,19 @@ const LinksCanvas = ({ links, ...props }) => {
 	);
 };
 
-class App extends Component {
+class GraphContainer extends Component {
 	state = {
-		discussion: null,
-		positions: {},
-		links: [],
-		width: 0,
-		height: 0,
+		name: "loading…",
+		items: [],
 	};
 
 	usersCache = {};
-	nodes = {};
 
 	constructor(props) {
 		super(props);
 
-		void this.loadData(this.props.graph);
+		this.loadData(this.props.graph)
+			.catch(err => console.error(err));
 	}
 
 	async loadData(url) {
@@ -122,9 +124,7 @@ class App extends Component {
 
 		discussion.items = indexedItems;
 
-		this.setState({
-			discussion,
-		});
+		this.setState(discussion);
 	}
 
 	async loadUser(id) {
@@ -139,58 +139,65 @@ class App extends Component {
 	}
 
 	render() {
-		const { name, items } = this.state.discussion ?? { name: 'loading...', items: {} };
-		const { width, height, positions, links } = this.state;
+  	return this.props.render(this.state);
+	}
+}
 
-		const layout = new Layout();
-		const setNodeSize = layout.addNode.bind(layout);
+const App = ({ discussion }) => {
+	const { name, items } = discussion;
+	const [{ width, height, positions, links }, setState] = useState({
+  	width: 0,
+  	height: 0,
+  	positions: {},
+  	links: [],
+	});
+
+	const layout = new Layout();
+	const setNodeSize = layout.addNode.bind(layout);
 
-		useLayoutEffect(() => {
-			void (async () => {
-				this.setState(await layout.render());
-			})();
-		}, [ items ]);
+	useEffect(() => {
+  	layout.render().then(setState);
+	}, [ items ]);
 
-		return (
-			<article>
-				<h1>{name}</h1>
+	return (
+		<article>
+			<h1>{name}</h1>
+			<div>
+				<LinksCanvas width={width} height={height} links={links} />
 				<div>
-					<LinksCanvas width={width} height={height} links={links} />
-					<div>
-						{Object.values(items).map((item) => {
-							const onlyParent = item.inReplyTo.length === 1 && items[item.inReplyTo[0].id];
-
-							for (const reply of item.replies) {
-								const to = items[reply.id];
-								if (item.collapsed && to.collapsed)
-									continue;
-
-								layout.addLink(item.id, to.id);
-							}
-
-							return (
-								<Note
-									{...item}
-									smallHeader={
-										onlyParent																			 // only one parent post
-										&& onlyParent.attributedTo === item.attributedTo // posted by same user
-										&& onlyParent.published === item.published			 // in the same second
-									}
-									position={positions[item.id]}
-									onHide={hideNote}
-									onSize={setNodeSize}
-								/>
-					 		);
-						})}
-					</div>
+					{Object.values(items).map((item) => {
+						const onlyParent = item.inReplyTo.length === 1 && items[item.inReplyTo[0].id];
+
+						for (const reply of item.replies) {
+							const to = items[reply.id];
+							if (item.collapsed && to.collapsed)
+								continue;
+
+							layout.addLink(item.id, to.id);
+						}
+
+						return (
+							<Note
+								{...item}
+								smallHeader={
+									onlyParent																			 // only one parent post
+									&& onlyParent.attributedTo === item.attributedTo // posted by same user
+									&& onlyParent.published === item.published			 // in the same second
+								}
+								position={positions[item.id]}
+								onHide={hideNote}
+								onSize={setNodeSize}
+							/>
+				 		);
+					})}
 				</div>
-			</article>
-		);
-	}
-}
+			</div>
+		</article>
+	);
+};
 
 const graph = document.location.hash ? document.location.hash.substr(1) : 'lib/graph.json';
-const app = <App graph={graph} />;
+const app = <GraphContainer graph={graph} render={discussion => <App discussion={discussion} /> } />;
 render(app, document.body);
 window.app = app;