Duplicate FFTheme

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

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/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;

shared/index.ts

@@ -1 +1,2 @@
 export * from "./src/ImportDataFormType";
+export * from "./src/FFTheme";

shared/package.json

@@ -3,6 +3,9 @@
   "version": "0.0.1",
   "main": "index.ts",
   "types": "index.ts",
+  "scripts": {
+    "schema:generate": "pnpx ts-json-schema-generator --path 'src/FFTheme.ts' --type 'FFTheme' -f tsconfig.json --strict-tuples -o src/FFTheme.schema.json --minify --no-top-ref"
+  },
   "devDependencies": {
     "typescript": "^5.2.2"
   }

shared/src/FFTheme.schema.json

@@ -0,0 +1 @@
+{"$schema":"http://json-schema.org/draft-07/schema#","additionalProperties":false,"definitions":{"ArrowShape":{"enum":["none","triangle","vee","triangle-backcurve","circle"],"type":"string"},"CurveStyle":{"enum":["bezier","taxi"],"type":"string"},"Direction":{"enum":["RIGHT","LEFT","DOWN","UP"],"type":"string"},"LayoutName":{"description":"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!! NOTICE !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n\nIf you change this file, you need to run `pnpm -F shared schema:generate` to update the json schema file in `src/FFTheme.schema.json`.","enum":["dagre","klay","breadthfirst","cose","concentric","circle","layered","mrtree","stress","radial"],"type":"string"},"Shape":{"enum":["rectangle","roundrectangle","ellipse"],"type":"string"}},"properties":{"arrowScale":{"type":"number"},"background":{"type":"string"},"borderColor":{"type":"string"},"borderWidth":{"description":"The width of the border used on nodes.","type":"number"},"curveStyle":{"$ref":"#/definitions/CurveStyle"},"direction":{"$ref":"#/definitions/Direction"},"edgeColor":{"type":"string"},"edgeTextSize":{"type":"number"},"edgeWidth":{"type":"number"},"fixedHeight":{"description":"The height of the node when `useFixedHeight` is true. Ideal range is between 75 - 250.","type":"number"},"fontFamily":{"type":"string"},"layoutName":{"$ref":"#/definitions/LayoutName"},"lineHeight":{"type":"number"},"nodeBackground":{"type":"string"},"nodeForeground":{"type":"string"},"padding":{"type":"number"},"rotateEdgeLabel":{"type":"boolean"},"shape":{"$ref":"#/definitions/Shape"},"sourceArrowShape":{"$ref":"#/definitions/ArrowShape"},"sourceDistanceFromNode":{"type":"number"},"spacingFactor":{"type":"number"},"targetArrowShape":{"$ref":"#/definitions/ArrowShape"},"targetDistanceFromNode":{"type":"number"},"textMarginY":{"type":"number"},"textMaxWidth":{"type":"number"},"useFixedHeight":{"description":"Whether the node's height should be fixed. Creates a more aesthetically pleasing graph in some cases.","type":"boolean"}},"required":["fontFamily","background","lineHeight","layoutName","direction","spacingFactor","shape","textMaxWidth","padding","curveStyle","textMarginY","borderWidth","borderColor","nodeBackground","nodeForeground","useFixedHeight","fixedHeight","edgeTextSize","edgeWidth","sourceArrowShape","targetArrowShape","edgeColor","sourceDistanceFromNode","targetDistanceFromNode","arrowScale","rotateEdgeLabel"],"type":"object"}

shared/src/FFTheme.ts

@@ -0,0 +1,80 @@
+/**
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * !!!!!!!!!!!! NOTICE !!!!!!!!!!!!!!!!
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ *
+ * If you change this file, you need to run `pnpm -F shared schema:generate` to update the
+ * json schema file in `src/FFTheme.schema.json`.
+ */
+
+export type LayoutName =
+  | "dagre"
+  | "klay"
+  | "breadthfirst"
+  | "cose"
+  | "concentric"
+  | "circle"
+  | "layered"
+  | "mrtree"
+  | "stress"
+  | "radial";
+
+export type LayoutDirection = "TB" | "LR" | "RL" | "BT";
+
+export type Direction = "RIGHT" | "LEFT" | "DOWN" | "UP";
+
+export type Shape = "rectangle" | "roundrectangle" | "ellipse";
+
+export type CurveStyle = "bezier" | "taxi";
+
+export type Border = "none" | "solid" | "dashed" | "dotted" | "double";
+
+export type ArrowShape =
+  | "none"
+  | "triangle"
+  | "vee"
+  | "triangle-backcurve"
+  | "circle";
+
+export type FFTheme = {
+  // Global Style
+  fontFamily: string;
+  background: string;
+  lineHeight: number;
+  // Layout
+  layoutName: LayoutName;
+  direction: Direction;
+  spacingFactor: number;
+  // Node
+  shape: Shape;
+  textMaxWidth: number;
+  padding: number;
+  curveStyle: CurveStyle;
+  textMarginY: number;
+  /**
+   * The width of the border used on nodes.
+   */
+  borderWidth: number;
+  borderColor: string;
+  nodeBackground: string;
+  nodeForeground: string;
+  /**
+   * Whether the node's height should be fixed. Creates a more aesthetically pleasing graph
+   * in some cases.
+   */
+  useFixedHeight: boolean;
+  /**
+   * The height of the node when `useFixedHeight` is true. Ideal range is between 75 - 250.
+   */
+  fixedHeight: number;
+  // Text size on edge labels relative to node
+  edgeTextSize: number;
+  edgeWidth: number;
+  sourceArrowShape: ArrowShape;
+  targetArrowShape: ArrowShape;
+  edgeColor: string;
+  sourceDistanceFromNode: number;
+  targetDistanceFromNode: number;
+  arrowScale: number;
+  rotateEdgeLabel: boolean;
+};

static/index.ts

@@ -1,56 +1 @@
-import { getPage } from "./src/getPage";
-import { readFileSync } from "fs";
-import { join } from "path";
-import type { ElementDefinition } from "cytoscape";
-
-/**
- * Returns a base64 encoded PNG image of a cytoscape graph
- */
-export async function getPng({ elements }: { elements: ElementDefinition[] }) {
-  const { page, browser } = await getPage();
-
-  // read the file from "./dist/index.html"
-  const indexHtml = join(__dirname, "dist/index.html");
-  const html = readFileSync(indexHtml, "utf8");
-
-  // set the page content
-  await page.setContent(html);
-
-  // execute code in the browser
-  await page.evaluate((elements) => {
-    console.log(window.cy);
-    // set elements
-    window.cy.json({ elements });
-    window.cy.layout({ name: "grid" }).run();
-
-    // const themeEditor = getThemeEditor(doc);
-    // const { layout, style: themeStyle } = toTheme(themeEditor);
-    // const { style } = preprocessStyle(
-    //   customCssOnly ? customCss : [themeStyle, customCss].join("\n")
-    // );
-    // window.cy
-    //     .layout({
-    //       ...layout,
-    //       // @ts-ignore
-    //       fit: true,
-    //       padding: 20,
-    //     })
-    //     .run();
-
-    // json stringify the elements, and write them to a fixed position
-    // div on the page so we can read them out in the next step
-    const elementsDiv = document.createElement("div");
-    elementsDiv.id = "elements";
-    elementsDiv.style.position = "fixed";
-    elementsDiv.style.top = "0";
-    elementsDiv.style.left = "0";
-    elementsDiv.textContent = JSON.stringify(elements);
-    document.body.appendChild(elementsDiv);
-  }, elements);
-
-  const screenshot = await page.screenshot({ encoding: "base64" });
-
-  await browser.close();
-
-  return screenshot;
-}
+export { getPng } from "./src/getPng";