fix crash in json encoding

client/src/components/glyphview.svelte

@@ -8,7 +8,10 @@
 
 	interface ContourPoint {
 		x: number,
-		y: number
+		y: number,
+
+		on_curve: boolean,
+		is_virtual: boolean,
 	};
 
 	interface ContourElement {
@@ -26,13 +29,15 @@
 		contours: Contour[]
 	};
 
-	let glyphData: GlyphData= $state({
+	let glyphData: GlyphData = $state({
 		bounding_box: { xmin: 0, xmax: 0, ymin: 0, ymax: 0 },
 		contours: []
 	});
 
+	let pointTooltip: string = $state("");
+
 	function getPathString(contour: Contour): string {
-		if (contour.elements?.length === 0) {
+		if (contour.elements?.length == 0 || contour.points?.length == 0) {
 			return "";
 		}
 
@@ -45,7 +50,11 @@
 			return "";
 		}
 
-		let result = `M${contour.points[firstPoint].x} -${contour.points[firstPoint].y} `
+		if (firstPoint < 0 || firstPoint >= contour.points.length) {
+			return "";
+		}
+
+		let result = `M${contour.points[firstPoint].x} -${contour.points[firstPoint]?.y} `
 		contour.elements.forEach((element) => {
 			if (element.Bezier) {
 				let control = contour.points[element.Bezier[1]];
@@ -62,6 +71,31 @@
 		return result;
 	}
 
+	function getViewBox(data: GlyphData): string {
+		const padding = 0.1;
+		let width = data.bounding_box.xmax - data.bounding_box.xmin;
+		let height = data.bounding_box.ymax - data.bounding_box.ymin;
+
+		let bbox: BoundingBox = {
+			xmin: data.bounding_box.xmin - padding * width,
+			xmax: (data.bounding_box.xmax - data.bounding_box.xmin) + 2 * padding * width,
+			ymin: (-data.bounding_box.ymax) - padding * width,
+			ymax: (data.bounding_box.ymax - data.bounding_box.ymin) + 2 * padding * width
+		};
+
+		return `${bbox.xmin} ${bbox.ymin} ${bbox.xmax} ${bbox.ymax}`;
+	}
+
+	function getFillColor(point: ContourPoint): string {
+		if (point.on_curve) {
+			return "blue";
+		} else if (point.is_virtual) {
+			return "green";
+		}
+
+		return "red";
+	}
+
 	let { selectedChar = "", loading = $bindable() } = $props();
 
 	$effect(() => {
@@ -87,8 +121,10 @@
 </script>
 
 <div class="glyph">
+<p>{ pointTooltip }</p>
+
 <svg 
-	viewBox="{glyphData.bounding_box.xmin} -{glyphData.bounding_box.ymax} {glyphData.bounding_box.xmax - glyphData.bounding_box.xmin} {glyphData.bounding_box.ymax - glyphData.bounding_box.ymin}"
+	viewBox="{ getViewBox(glyphData) }"
 	width="1000"
 	height="1000"
 	>
@@ -98,6 +134,15 @@
 		style="fill:none; stroke:black; stroke-width: 3"
 		d="{getPathString(contour)}" 
 	/>
+
+	{#each contour.points as point}
+	<circle 
+		class="glyph-point"
+		cx="{point.x}" cy="{-point.y}"
+		fill="{getFillColor(point)}"
+		onclick="{ () => { pointTooltip = JSON.stringify(point); } }"
+	/>
+	{/each}
 	{/each}
 </svg>
 </div>
@@ -107,4 +152,14 @@
 		max-height: 50vh;
 		max-width: 50vw;
 	}
+
+	.glyph-point {
+		r: 13;
+		transition: ease-out 0.2s r;
+	}
+
+	.glyph-point:hover {
+		r: 20;
+		transition: ease-out 0.2s r;
+	}
 </style>