Static Images

api/img/png.ts

@@ -0,0 +1,68 @@
+import { VercelApiHandler } from "@vercel/node";
+import { supabase } from "../_lib/_supabase";
+import { getPng } from "static";
+import { parse, toCytoscapeElements } from "graph-selector";
+
+/** 
+NEXT STEP
+- get cytoscape installed either her or in a third package and render anything
+*/
+
+// This handler is going to produce a static png image of a given id
+const handler: VercelApiHandler = async (req, res) => {
+  // get id from the query
+  const id = req.query.id;
+
+  if (!id) {
+    res.status(400).send("id is required");
+    return;
+  }
+
+  // loop up code in database
+  const chart = await supabase
+    .from("user_charts")
+    .select("*")
+    .eq("id", id)
+    .single();
+
+  if (!isValid(chart)) {
+    res.status(404).send("Chart not found");
+    return;
+  }
+
+  const { content, meta } = parseChart(chart.data.chart);
+  console.log(meta);
+  const graph = parse(content);
+  const elements = toCytoscapeElements(graph);
+
+  const base64Str = await getPng({ elements });
+
+  res.setHeader("Content-Type", "image/png");
+  res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
+  res.send(Buffer.from(base64Str, "base64"));
+};
+
+export default handler;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isValid(project: any): project is { data: { chart: string } } {
+  return (
+    typeof project === "object" &&
+    project !== null &&
+    typeof project?.data === "object" &&
+    project?.data !== null &&
+    typeof project?.data?.chart === "string"
+  );
+}
+
+/**
+ * Given a chart string, parses it into
+ */
+function parseChart(chart: string) {
+  const [content, metaStr] = chart.split("=====");
+  const meta = JSON.parse(metaStr);
+  return {
+    content,
+    meta,
+  };
+}

api/package.json

@@ -30,7 +30,8 @@
     "shared": "workspace:*",
     "stripe": "^11.11.0",
     "zod": "^3.22.4",
-    "zod-to-json-schema": "^3.22.3"
+    "zod-to-json-schema": "^3.22.3",
+    "static": "workspace:*"
   },
   "devDependencies": {
     "@swc/jest": "^0.2.24",

app/src/components/Graph.tsx

@@ -35,8 +35,9 @@ import { getNodePositionsFromCy } from "./getNodePositionsFromCy";
 import styles from "./Graph.module.css";
 import { GRAPH_CONTEXT_MENU_ID, GraphContextMenu } from "./GraphContextMenu";
 import classNames from "classnames";
-import { getThemeEditor, toTheme, useBackground } from "../lib/toTheme";
+import { getThemeEditor, toTheme } from "../lib/toTheme";
 import equal from "fast-deep-equal";
+import { useBackground } from "../lib/toThemeDynamic";
 declare global {
   interface Window {
     __cy?: cytoscape.Core;

app/src/components/LoadTemplateDialog.tsx

@@ -11,7 +11,7 @@ import classNames from "classnames";
 import { useDoc } from "../lib/useDoc";
 import { prepareChart } from "../lib/prepareChart/prepareChart";
 import { mountGraph, unmountGraph } from "../lib/useUnmountStore";
-import { FFTheme } from "../lib/FFTheme";
+import type { FFTheme } from "shared";
 import { getDefaultText } from "../lib/getDefaultText";
 
 /**

app/src/components/Tabs/ThemeTab.tsx

@@ -1,13 +1,12 @@
 import { createControls } from "formulaic";
-import { updateThemeEditor, useThemeEditor } from "../../lib/toTheme";
-import {
+import type {
   FFTheme,
   Shape,
   CurveStyle,
   ArrowShape,
   Direction,
   LayoutName,
-} from "../../lib/FFTheme";
+} from "shared";
 import { ReactNode } from "react";
 
 import classNames from "classnames";
@@ -33,6 +32,7 @@ import {
   TextAa,
 } from "phosphor-react";
 import { useGraphStore } from "../../lib/useGraphStore";
+import { updateThemeEditor, useThemeEditor } from "../../lib/toThemeDynamic";
 
 const createForm = createControls({
   select,

app/src/components/downloads.ts

@@ -3,7 +3,7 @@ import { saveAs } from "file-saver";
 
 import { UNAUTH_IMG_SCALE } from "../lib/constants";
 import { cytoscape } from "../lib/cytoscape";
-import { getBackground } from "../lib/toTheme";
+import { getBackground } from "../lib/toThemeDynamic";
 
 // padding, gets divided in half
 const PADDING = 60;

app/src/lib/prepareChart/prepareChart.ts

@@ -9,7 +9,7 @@ import {
 import { getStyleStringFromMeta, preprocessStyle } from "../preprocessStyle";
 import { Details, useDoc } from "../useDoc";
 import { cytoscapeStyle, theme } from "../templates/default-template";
-import { FFTheme } from "../FFTheme";
+import type { FFTheme } from "shared";
 
 /**
  * Ensures the document loaded externally or from local storage

app/src/lib/preprocessStyle.ts

@@ -4,7 +4,7 @@ import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 
 import { resetGraph } from "./useUnmountStore";
-import { FFTheme } from "./FFTheme";
+import type { FFTheme } from "shared";
 import { toTheme } from "./toTheme";
 
 (async () => {

app/src/lib/templates/code-flow-template.ts

@@ -1,4 +1,4 @@
-import { FFTheme } from "../FFTheme";
+import type { FFTheme } from "shared";
 
 export const content = `
 Database

app/src/lib/templates/default-template.ts

@@ -1,4 +1,4 @@
-import { FFTheme } from "../FFTheme";
+import type { FFTheme } from "shared";
 
 export const content = `
 Begin Typing
@@ -39,4 +39,4 @@ export const theme: FFTheme = {
 };
 
 export const cytoscapeStyle =
-  "$color: #31405b;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #2a9d8f;\n$blue: #606ef6;\n$purple: #6d4a7c;\n$grey: #f2eded;\n\n:childless {\n  font-weight: 500;\n}\n\n/** Start */\n:childless[in_degree < 1][out_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $green;\n  color: white;\n}\n\n/** Terminal */\n:childless[out_degree < 1][in_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $red;\n  color: white;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  background-color: $blue;\n  color: white;\n  height: $width;\n  border-width: 0;\n  text-margin-y: 2;\n}\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n  background-color: $red;\n  color: white;\n}\n:childless.color_orange {\n  background-color: $orange;\n  color: white;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n}\n:childless.color_green {\n  background-color: $green;\n  color: white;\n}\n:childless.color_blue {\n  background-color: $blue;\n  color: white;\n}\n:childless.color_purple {\n  background-color: $purple;\n  color: white;\n}\n:childless.color_grey {\n  background-color: $grey;\n}\n\n:parent.color_white {\n  background-color: white;\n}\n:parent.color_grey {\n  background-color: $grey;\n}";
+  "$color: #31405b;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #2a9d8f;\n$blue: #606ef6;\n$purple: #6d4a7c;\n$grey: #f2eded;\n\n:childless {\n  font-weight: 500;\n}\n\n/** Start - uncomment to use\n:childless[in_degree < 1][out_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $green;\n  color: white;\n}\n*/\n\n/** Terminal - uncomment to use\n:childless[out_degree < 1][in_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $red;\n  color: white;\n}\n*/\n\n/** Branching - uncomment to use\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  background-color: $blue;\n  color: white;\n  height: $width;\n  border-width: 0;\n  text-margin-y: 2;\n}\n*/\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n  background-color: $red;\n  color: white;\n}\n:childless.color_orange {\n  background-color: $orange;\n  color: white;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n}\n:childless.color_green {\n  background-color: $green;\n  color: white;\n}\n:childless.color_blue {\n  background-color: $blue;\n  color: white;\n}\n:childless.color_purple {\n  background-color: $purple;\n  color: white;\n}\n:childless.color_grey {\n  background-color: $grey;\n}\n\n:parent.color_white {\n  background-color: white;\n}\n:parent.color_grey {\n  background-color: $grey;\n}";

app/src/lib/templates/flowchart-template.ts

@@ -1,4 +1,4 @@
-import { FFTheme } from "../FFTheme";
+import type { FFTheme } from "shared";
 
 export const content = `
 Brainstorming Session

app/src/lib/templates/knowledge-graph-template.ts

@@ -1,4 +1,4 @@
-import { FFTheme } from "../FFTheme";
+import type { FFTheme } from "shared";
 
 export const content = `
 Fall of Ancient Rome .color_purple

app/src/lib/templates/mindmap-template.ts

@@ -1,4 +1,4 @@
-import { FFTheme } from "../FFTheme";
+import type { FFTheme } from "shared";
 
 export const content = `
 Mind Mapping .size_lg

app/src/lib/templates/org-chart-template.ts

@@ -1,4 +1,4 @@
-import { FFTheme } from "../FFTheme";
+import type { FFTheme } from "shared";
 
 export const content = `
 Saraswati Sharma .size_lg.color_pink

app/src/lib/templates/templates.ts

@@ -12,7 +12,7 @@ export const templates: {
 }[] = [
   {
     key: "default",
-    img: "template9.png",
+    img: "template21.png",
     bgColor: "#FFFFFF",
     title: () => `Default`,
     promptType: "flowchart",

app/src/lib/toTheme.ts

@@ -1,6 +1,6 @@
 import cytoscape from "cytoscape";
-import { Doc, useDoc } from "./useDoc";
-import { Direction, FFTheme, LayoutDirection } from "./FFTheme";
+import type { Doc } from "./useDoc";
+import type { Direction, FFTheme, LayoutDirection } from "shared";
 import { fonts } from "./fonts";
 import {
   childlessShapeClasses,
@@ -200,33 +200,6 @@ export function getThemeEditor(doc: Doc) {
   return (doc.meta?.themeEditor as FFTheme) || defaultTheme;
 }
 
-export function useThemeEditor() {
-  return useDoc(
-    (state) => (state.meta?.themeEditor as FFTheme) || defaultTheme
-  );
-}
-
-export function useBackground() {
-  return useThemeEditor().background;
-}
-
-export function getBackground() {
-  return getThemeEditor(useDoc.getState()).background;
-}
-
-export function updateThemeEditor(theme: Partial<FFTheme>) {
-  useDoc.setState((doc) => ({
-    ...doc,
-    meta: {
-      ...doc.meta,
-      themeEditor: {
-        ...getThemeEditor(doc),
-        ...theme,
-      },
-    },
-  }));
-}
-
 function isHierarchical(layoutName: string) {
   return ["dagre", "klay", "layered", "mrtree"].includes(layoutName);
 }

app/src/lib/toThemeDynamic.ts

@@ -0,0 +1,31 @@
+import { FFTheme } from "shared";
+import { theme as defaultTheme } from "./templates/default-template";
+import { useDoc } from "./useDoc";
+import { getThemeEditor } from "./toTheme";
+
+export function useThemeEditor() {
+  return useDoc(
+    (state) => (state.meta?.themeEditor as FFTheme) || defaultTheme
+  );
+}
+
+export function useBackground() {
+  return useThemeEditor().background;
+}
+
+export function updateThemeEditor(theme: Partial<FFTheme>) {
+  useDoc.setState((doc) => ({
+    ...doc,
+    meta: {
+      ...doc.meta,
+      themeEditor: {
+        ...getThemeEditor(doc),
+        ...theme,
+      },
+    },
+  }));
+}
+
+export function getBackground() {
+  return getThemeEditor(useDoc.getState()).background;
+}

app/src/pages/New.tsx

@@ -19,7 +19,7 @@ import {
   createUnlimitedTitle,
 } from "../lib/paywallCopy";
 import { Warning } from "../components/Warning";
-import { FFTheme } from "../lib/FFTheme";
+import type { FFTheme } from "shared";
 
 type CreateChartOptions = {
   name: string;