Commit: Add userStyle to Graph component and useUserStyle to getTheme

Author: rob-gordon

app/src/components/Graph.tsx

@@ -20,7 +20,7 @@ import { cytoscape } from "../lib/cytoscape";
 import { getDoc, setMetaImmer, subscribeToDoc } from "../lib/docHelpers";
 import { getGetSize, TGetSize } from "../lib/getGetSize";
 import { getLayout } from "../lib/getLayout";
-import { getUserStyle } from "../lib/getTheme";
+import { getUserStyle, useUserStyle } from "../lib/getTheme";
 import { DEFAULT_GRAPH_PADDING } from "../lib/graphOptions";
 import {
   useBackgroundColor,
@@ -67,6 +67,7 @@ export default function Graph({ shouldResize }: { shouldResize: number }) {
   const themeKey = useThemeKey();
   const theme = useCurrentTheme(themeKey) as unknown as Theme;
   const bg = useBackgroundColor(theme);
+  const userStyle = useUserStyle();
 
   const getSize = useRef<TGetSize>(getGetSize(theme));
   const parser = useParser();
@@ -115,8 +116,8 @@ export default function Graph({ shouldResize }: { shouldResize: number }) {
 
   // Apply theme
   useEffect(() => {
-    getStyleUpdater({ cy, errorCatcher, bg })(theme);
-  }, [bg, theme]);
+    getStyleUpdater({ cy, errorCatcher, bg, userStyle })(theme);
+  }, [bg, theme, userStyle]);
 
   const throttleUpdate = useMemo(
     () =>
@@ -316,17 +317,18 @@ function getStyleUpdater({
   cy,
   errorCatcher,
   bg,
+  userStyle = [],
 }: {
   cy: React.MutableRefObject<cytoscape.Core | undefined>;
   errorCatcher: React.MutableRefObject<cytoscape.Core | undefined>;
   bg?: string;
+  userStyle: cytoscape.StylesheetStyle[];
 }) {
   return throttle((theme: Theme) => {
     if (!cy.current) return;
     if (!errorCatcher.current) return;
     try {
-      // Prepare Styles
-      const style = buildStylesForGraph(theme, getUserStyle(), bg);
+      const style = buildStylesForGraph(theme, userStyle, bg);
 
       // Test Error First
       errorCatcher.current.json({ style });

app/src/lib/getTheme.ts

@@ -1,6 +1,6 @@
 import { StylesheetStyle } from "cytoscape";
 
-import { getDoc } from "./docHelpers";
+import { getDoc, useDocMeta } from "./docHelpers";
 
 /**
  * Get the user style from the document metadata.
@@ -9,6 +9,6 @@ export function getUserStyle() {
   return (getDoc().meta?.style ?? []) as StylesheetStyle[];
 }
 
-// const theme = useGraphTheme(options.graphOptions.theme);
-// That's how we're currently grabbing the theme from the name
-// Believe it does some async loading behind the scenes
+export function useUserStyle() {
+  return (useDocMeta().style ?? []) as StylesheetStyle[];
+}