Add simple tree graph mode (#4)

Add a new kind of family tree: simple tree

Reviewed-on: #4

geneit_app/src/utils/render_utils.ts

@@ -0,0 +1,30 @@
+let canvas: HTMLCanvasElement = document.createElement("canvas");
+let charLen: Map<string, Map<string, number>> = new Map();
+
+/**
+ * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+ *
+ * @param {String} text The text to be rendered.
+ * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+ *
+ * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+ */
+function computeTextWidth(text: string, font: string) {
+  // re-use canvas object for better performance
+  const context = canvas.getContext("2d")!;
+  context.font = font;
+  const metrics = context.measureText(text);
+  return metrics.width;
+}
+
+export function getTextWidth(text: string, font: string) {
+  if (!charLen.has(font)) charLen.set(font, new Map());
+  const ref = charLen.get(font)!;
+
+  let size = 0;
+  for (const c of text) {
+    if (!ref.has(c)) ref.set(c, computeTextWidth(c, font));
+    size += ref.get(c)!;
+  }
+  return size;
+}