Inital code commit, just implements drag-drop of font and SamsaFont init

Lorp · Feb 1, 2024 · b486224 · b486224
1 parent 3ca46fe
commit b486224
Show file tree

Hide file tree

Showing 4 changed files with 753 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+# macOS
+.DS_Store
diff --git a/src/fencer.html b/src/fencer.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Home</title>
+	<style>
+
+body {
+	margin: 0;
+	padding: 0;
+}
+
+.fontinfo {
+	float: left;
+	position: relative;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	width: 200px;
+	height: 400px;
+	background-color: lightblue;
+}
+
+.fontinfo textarea {
+	font-family: Roboto Mono, monospace;
+}
+
+.mappings-ui {
+	float: left;
+	position: relative;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	width: 400px;
+	height: 400px;
+	background-color: yellow;
+}
+
+.mappings-ui #mappings-visual {
+	background-color: red;
+	width: 100%;
+	height: 100%;
+}
+
+.mappings-xml {
+	float: left;
+	position: relative;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	background-color: #eee;
+	width: 400px;
+	height: 400px;
+}
+
+.mappings-xml textarea {
+	font-family: Roboto Mono, monospace;
+}
+
+.monospace {
+	font-family: Roboto Mono, monospace;
+	font-size: 12px;
+}
+
+.result {
+	float: left;
+	position: relative;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	background-color: #eee;
+	width: 1000px;
+	height: 400px;
+	border: 1px solid #ccc;
+	box-sizing: border-box;
+}
+
+.result div {
+	background-color: white;
+}
+
+.render-native {
+	font-size: 200px;
+	overflow: hidden;
+}
+
+</style>
+
+<!-- Roboto Mono -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
+
+</head>
+
+<body>
+
+	<div class="fontinfo">
+		<h3>Fontinfo</h3>
+		<textarea placeholder="Drop font here"></textarea>
+	</div>	
+
+	<div class="mappings-ui">
+		<h3>Mappings visual</h3>
+		<svg id="mappings-visual">
+
+		</svg>
+	</div>	
+
+	<div class="mappings-xml">
+		<h3>Mappings XML</h3>
+		<textarea placeholder=".designspace XML goes here"></textarea>
+	</div>
+
+	<br clear="all"/>
+
+	<div class="result">
+		<h3>Result
+		<select>
+			<option value="native">Native</option>
+			<option value="samsa">Samsa</option>
+		</select>
+		</h3>
+
+		<div class="render-native">
+			ABCdef123
+		</div>
+	</div>
+
+</body>
+
+<script type="module" src="./fencer.js"></script>
+
+</html>
diff --git a/src/fencer.js b/src/fencer.js
@@ -0,0 +1,77 @@
+"use strict"
+
+// import the samsa-core module
+//import { SamsaFont, SamsaInstance, SamsaBuffer, SAMSAGLOBAL } from "https://lorp.github.io/samsa-core/src/samsa-core.js";
+//import { * }  from "./models.js";
+
+//export {SamsaFont, SamsaGlyph, SamsaInstance, SamsaBuffer, SAMSAGLOBAL} from "https://lorp.github.io/samsa-core/src/samsa-core.js";
+
+import { SamsaFont, SamsaInstance, SamsaBuffer, SAMSAGLOBAL } from "https://lorp.github.io/samsa-core/src/samsa-core.js";
+import { normalizeValue, piecewiseLinearMap } from "./models.js";
+
+
+
+//console.log(piecewiseLinearMap)
+
+
+
+function onDropFont (e) {
+	const el = e.target;
+
+	e.preventDefault();
+
+	// open font as SamsaFont
+
+
+
+
+	// get arrayBuffer from dropped object
+	const file = e.dataTransfer.files[0];
+	file.arrayBuffer().then(arrayBuffer => {
+		const font = new SamsaFont(new SamsaBuffer(arrayBuffer));
+		let str = "";
+
+		// set name
+		str += font.names[6] + "\n";
+		str += "-".repeat(font.names[6].length) + "\n";
+
+		// repeat string 6 times
+
+		// report axes
+		font.fvar.axes.forEach(axis => {
+			str += `${axis.axisTag} ${axis.minValue} ${axis.defaultValue} ${axis.maxValue}\n`;
+		});
+
+		// set the textarea content to the string
+		document.querySelector(".fontinfo textarea").value = str;
+
+		// set the font face to the arraybuffer
+		const fontFace = new FontFace(font.names[6], arrayBuffer);
+		fontFace.load().then(loadedFace => {
+			document.fonts.add(loadedFace);
+			document.querySelector(".render-native").style.fontFamily = font.names[6];
+			console.log("loaded font: " + font.names[6])
+		});
+	});
+
+}
+
+function initFencer() {
+
+	const fontinfo = document.querySelector(".fontinfo");
+	fontinfo.addEventListener("dragover", (event) => {
+		// prevent default to allow drop
+		event.preventDefault();
+	});
+
+	fontinfo.addEventListener("drop", onDropFont);
+
+
+
+
+
+}
+
+
+initFencer();
+