usesprocket 0.0.0 → 0.4.3-dev.efb29f1a00a6702afbc7d21c6e442e2d4635cec9

package/web/kicanvas-viewer.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<style>
+			html,
+			body {
+				margin: 0;
+				height: 100%;
+				background: var(--background);
+			}
+		</style>
+		<style id="sprocket-theme"></style>
+	</head>
+	<body>
+		<!-- In the body, since the bundle appends its font stylesheet to `document.body`. -->
+		<!-- `crossorigin`, since this frame's origin is opaque and the browser hides errors from cross-origin scripts. -->
+		<script src="/kicanvas/kicanvas.js" crossorigin></script>
+		<script>
+			const reply = (message) => parent.postMessage(message, '*');
+			let embed = null;
+			let firstDraw = null;
+			let crash = null;
+			const crashed = new Promise((_, reject) => (crash = reject));
+			crashed.catch(() => {});
+
+			const appFor = (page) =>
+				embed.shadowRoot.querySelector(page.type === 'pcb' ? 'kc-board-app' : 'kc-schematic-app');
+			const project = () =>
+				embed?.shadowRoot?.querySelector('kc-schematic-app, kc-board-app')?.project;
+
+			function currentView() {
+				const page = project()?.active_page;
+
+				if (!page) return null;
+
+				const { center, zoom } = appFor(page).viewer.viewport.camera;
+
+				return { page: page.project_path, x: center.x, y: center.y, zoom };
+			}
+
+			async function drawn(page, open) {
+				const app = appFor(page);
+				await app.viewerReady;
+				const { viewer } = app;
+				const loaded = new Promise((resolve) => {
+					const onLoad = () => {
+						if (viewer.document !== page.document) return;
+						viewer.removeEventListener('kicanvas:load', onLoad);
+						resolve();
+					};
+					viewer.addEventListener('kicanvas:load', onLoad);
+				});
+
+				open?.();
+				await loaded;
+
+				return viewer;
+			}
+
+			// Reopens the user's page, then restores their camera after KiCanvas fits the page.
+			async function show(view) {
+				const pages = project();
+				const page = view && pages.page_by_path(view.page);
+				const viewer =
+					page && page !== pages.active_page
+						? await drawn(page, () => pages.set_active_page(page))
+						: await firstDraw;
+
+				if (!page) return;
+
+				viewer.viewport.camera.center.set(view.x, view.y);
+				viewer.viewport.camera.zoom = view.zoom;
+				viewer.draw();
+			}
+
+			function load(sources) {
+				embed = document.createElement('kicanvas-embed');
+				embed.setAttribute('controls', 'full');
+				// KiCanvas's focus overlay swallows the first click, which only helps embeds on scrolling pages.
+				embed.setAttribute('controlslist', 'nooverlay');
+				embed.style.cssText = 'width: 100%; height: 100%;';
+
+				for (const { name, content } of sources) {
+					const element = document.createElement('kicanvas-source');
+					element.setAttribute('name', name);
+					element.textContent = content;
+					embed.append(element);
+				}
+
+				// KiCanvas reports how its load ended only through these attributes.
+				const observer = new MutationObserver(() => {
+					if (embed.hasAttribute('loading')) return;
+					observer.disconnect();
+
+					if (!embed.hasAttribute('loaded')) return reply({ type: 'failed' });
+					firstDraw = drawn(project().active_page);
+					reply({ type: 'parsed' });
+				});
+				observer.observe(embed, { attributeFilter: ['loading', 'loaded'] });
+				document.body.append(embed);
+			}
+
+			// Such as KiCanvas's renderer setup throwing when the browser has no WebGL2, or its
+			// painter throwing on a board it can't read. KiCanvas then never draws the page.
+			addEventListener('unhandledrejection', ({ reason }) => crash(reason));
+
+			addEventListener('message', ({ source, data }) => {
+				if (source !== parent) return;
+
+				if (data?.type === 'theme')
+					document.getElementById('sprocket-theme').textContent = data.css;
+
+				if (data?.type === 'sources') load(data.sources);
+
+				if (data?.type === 'show') {
+					Promise.race([show(data.view), crashed]).then(
+						() => reply({ type: 'loaded' }),
+						(reason) =>
+							reply({ type: 'failed', error: reason instanceof Error ? reason.message : undefined })
+					);
+				}
+
+				if (data?.type === 'getView') reply({ type: 'view', view: currentView() });
+			});
+
+			reply({ type: customElements.get('kicanvas-embed') ? 'ready' : 'failed' });
+		</script>
+	</body>
+</html>

package/web/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#8cc0e7" fill-rule="evenodd" d="M246.5 504.3c-4-23.6 1.8-31.7-18.3-53.2-22.1-23.5-77.9-52.7-72.4-91 8 4.2 14.8 11.8 21.6 18 15.7 14 38.8 31.8 58.6 38.3-3.5-9.2-10.9-17.9-11.6-28 5.8-1.9 25.4-4 25.4-12.8 0-8.3-16.8-4.1-22-4.1-33.7 0-83.7-15.3-95.7-50.6-2.2-6.4-2-13.6-2-20.2 0-7.3 3.4-14 3.4-19.5 0-6.3-10.7-11.7-14.8-15.8a50 50 0 0 1-16.8-34.4c0-3.5-.2-14.3 5-14.3 4.1 0 9.4 8 12.2 10.7 6.6 6.3 13.9 11.7 20.5 17.9 4.2 3.8 7.6 8.3 12 12 20.4 18 50.7 23.6 77 23.6 26.7 0 61.2-6 84.2-20-14-.2-28.3 2.6-42.4 2.6-28.6 0-67.6-2-90.7-20.5 9.9-.4 20.3.6 30.4.6 11.7 0 23.7.5 35.4-.5 39.5-3.3 104.2-17.4 134.5-43.5-16 2.4-32 9.8-48 13.5a384 384 0 0 1-87.7 9.8c-46.1 0-95.6-7.6-137.4-27.8-16-7.8-37.7-21-37.7-41.3 0-2.3.4-6.3 3.7-5.7 5.1 1 10.7 6.5 15.2 9.2a250 250 0 0 0 32.4 15.9 284 284 0 0 0 108.3 20.7c39 0 77.7-7 113.3-23.4 7.3-3.3 14.7-6.5 21-11.4-8.2.3-16.2 2.5-24.3 3.8-18.7 2.8-48.8 6.2-66.6 1.9 8.7-3.2 18.3-4 27.5-6.2 34-8.2 67-17.6 97.7-35 17.1-9.6 36.7-24.4 36.7-46 0-17.5-26.8-22.3-39.6-26.4a187.7 50.8-.4 0 0-309.3 58.5c44 21.6 94.8 30.8 143 36.7 12.7 1.6 25.7 1.4 38.3 3.6-15.2 4.3-31.3 4.1-47 4.1-45.2 0-90.4-4.3-133.3-19.2-16.5-5.7-37.1-13.3-48.8-27a229.8 80.5 1.1 0 1 419.1-56.4c16.4 10.2 28 25.8 28 45.5 0 17.6-11.9 32.1-24.5 43.3-5.6 4.9-19 11-19 19.1 0 4.5 1 9 1 13.4 0 25.1-16.7 43.8-36 57.9-6 4.4-17.3 9.4-21.7 14.8-3.5 4.5-2 13.8-4 19.3a59 59 0 0 1-18.7 24.7 176 176 0 0 1-35 23.2c-5.3 2.8-12.2 4.6-12.2 11.6 0 43.4-39.5 43.7-39.5 84 0 9.6 2.1 19.3 2.1 29a89 89 0 0 1-30.5 67m19.7-162c-9.5-2.4-19.7-2-29.5-3.5-14.6-2.3-36.9-9.7-42.4-24.7 4.4-.6 8.8-.2 13.3-.2 24.7 0 50.4-3.3 72.8-13.9-14.8-.8-30 2.4-45 2.4q-29.7 0-58.5-7.5c-6.7-1.8-13.3-4.9-20.1-5.6a32 32 0 0 0 .1 18.9c8.2 31.2 48 39.3 75.7 39.3 11.3 0 23-1.1 33.6-5.2"/></svg>

package/web/manifest.webmanifest

@@ -0,0 +1,12 @@
+{
+	"name": "Sprocket",
+	"short_name": "Sprocket",
+	"start_url": "/",
+	"display": "standalone",
+	"background_color": "#f2f7ed",
+	"theme_color": "#f2f7ed",
+	"icons": [
+		{ "src": "/logo.svg", "sizes": "any", "type": "image/svg+xml" },
+		{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+	]
+}