Add Custom Cytoscape Styles

app/package.json

@@ -45,6 +45,7 @@
     "@radix-ui/react-slider": "^1.1.0",
     "@radix-ui/react-tabs": "^1.0.1",
     "@radix-ui/react-toggle": "^0.1.4",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "@reach/dialog": "^0.15.0",
     "@reach/tooltip": "^0.16.0",
     "@reach/utils": "^0.16.0",
@@ -96,6 +97,7 @@
     "papaparse": "^5.4.1",
     "phosphor-react": "^1.3.1",
     "postcss-flexbugs-fixes": "^5.0.2",
+    "prettier": "^2.3.1",
     "re-resizable": "^6.9.0",
     "react": "^17.0.1",
     "react-confetti": "^6.1.0",
@@ -181,7 +183,6 @@
     "jsdom": "^20.0.3",
     "minimist": "^1.2.5",
     "msw": "^0.36.8",
-    "prettier": "^2.3.1",
     "source-map-explorer": "^2.5.2",
     "tailwindcss": "^3.2.6",
     "ts-node": "^10.9.1",

app/public/fonts/FiraMono.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Fira Mono";
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/FiraMono-Regular.woff2') format('woff2');
+}

app/public/fonts/GaeguRegular.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-style: normal;
+  font-weight: 400;
+  font-family: Gaegu;
+  src: url('/fonts/GaeguRegular.woff2') format('woff2');
+}

app/public/fonts/JosefinSans.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Josefin Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/JosefinSans-Regular.woff2') format('woff2');
+}

app/public/fonts/Karla.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Karla";
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/Karla-Regular.woff2') format('woff2');
+}

app/public/fonts/PermanentMarker.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Permanent Marker";
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/PermanentMarker-Regular.woff2') format('woff2');
+}

app/public/fonts/PoorStory.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Poor Story";
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/PoorStory-Regular.woff2') format('woff2');
+}

app/public/fonts/Porpora.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Porpora";
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/Porpora-Regular.woff2') format('woff2');
+}

app/public/fonts/SpaceMonoRegular.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-style: normal;
+  font-weight: 400;
+  font-family: "Space Mono";
+  src: url('/fonts/SpaceMonoRegular.woff2') format('woff2');
+}

app/public/fonts/SportingGrotesque.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Sporting Grotesque";
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/Sporting_Grotesque-Regular_web.woff2') format('woff2');
+}

app/public/fonts/Virgil3YOFF.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Virgil3YOFF";
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/Virgil3YOFF.woff2') format('woff2');
+}

app/src/components/EditorWrapper.module.css

@@ -4,6 +4,7 @@
   max-width: 100%;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
 }
 
 .mightLose {
@@ -76,13 +77,6 @@
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 3px;
-  color: var(--color-uiAccent);
-  text-decoration-color: var(--color-uiAccent);
-}
-
-.EditorWrapper [data-rename-button]:active {
-  color: var(--color-edgeHover);
-  text-decoration-color: var(--color-edgeHover);
 }
 
 .EditorWrapper [data-rename-button]:focus {

app/src/components/Graph.tsx

@@ -17,22 +17,19 @@ import React, {
 import { useContextMenu } from "react-contexify";
 import { useDebouncedCallback } from "use-debounce";
 
-import { buildStylesForGraph } from "../lib/buildStylesForGraph";
 import { monacoMarkerErrorSeverity } from "../lib/constants";
 import { cytoscape } from "../lib/cytoscape";
 import { getElements } from "../lib/getElements";
-import { getGetSize, TGetSize } from "../lib/getGetSize";
 import { getLayout } from "../lib/getLayout";
-import { getUserStyle } from "../lib/getUserStyle";
+import { useCytoscapeStyle } from "../lib/getUserStyle";
 import { DEFAULT_GRAPH_PADDING } from "../lib/graphOptions";
-import {
-  useBackgroundColor,
-  useCurrentTheme,
-  useThemeKey,
-} from "../lib/graphThemes";
+import { useBackgroundColor } from "../lib/graphThemes";
 import { isError } from "../lib/helpers";
 import { getAnimationSettings } from "../lib/hooks";
-import { Theme } from "../lib/themes/constants";
+import {
+  preprocessCytoscapeStyle,
+  useCytoscapeStyleImports,
+} from "../lib/preprocessCytoscapeStyle";
 import { useContextMenuState } from "../lib/useContextMenuState";
 import { Doc, useDoc, useParseErrorStore } from "../lib/useDoc";
 import { updateModelMarkers, useEditorStore } from "../lib/useEditorStore";
@@ -41,7 +38,6 @@ import { Box } from "../slang";
 import { getNodePositionsFromCy } from "./getNodePositionsFromCy";
 import styles from "./Graph.module.css";
 import { GRAPH_CONTEXT_MENU_ID, GraphContextMenu } from "./GraphContextMenu";
-
 declare global {
   interface Window {
     __cy?: cytoscape.Core;
@@ -59,15 +55,12 @@ if (!cytoscape.prototype.hasInitialised) {
 const isAnimationEnabled = getAnimationSettings();
 
 const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
+  useCytoscapeStyleImports();
   const [initResizeNumber] = useState(shouldResize);
   const cy = useRef<undefined | Core>();
   const cyErrorCatcher = useRef<undefined | Core>();
   const isGraphInitialized = useRef(false);
-  const themeKey = useThemeKey();
-  const theme = useCurrentTheme(themeKey) as unknown as Theme;
-  const bg = useBackgroundColor(theme);
-
-  const getSize = useRef<TGetSize>(getGetSize(theme));
+  const bg = useBackgroundColor();
 
   const handleResize = useCallback(() => {
     if (!cy.current) return;
@@ -86,27 +79,24 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
   useInitializeGraph({ cy, cyErrorCatcher });
 
   const throttleStyle = useMemo(
-    () => getStyleUpdater({ cy, cyErrorCatcher, bg }),
-    [bg]
+    () => getStyleUpdater({ cy, cyErrorCatcher }),
+    []
   );
 
-  // Apply theme
-  useEffect(() => {
-    throttleStyle(theme);
-  }, [theme, throttleStyle]);
+  // Get style
+  const cytoscapeStyle = useCytoscapeStyle();
 
-  // Update getSize when theme changes
+  // Apply style
   useEffect(() => {
-    getSize.current = getGetSize(theme);
-  }, [theme]);
+    throttleStyle(cytoscapeStyle);
+  }, [cytoscapeStyle, throttleStyle]);
 
   const throttleUpdate = useMemo(
     () =>
       getGraphUpdater({
         cy,
         cyErrorCatcher,
         isGraphInitialized,
-        getSize,
       }),
     []
   );
@@ -292,12 +282,10 @@ function getGraphUpdater({
   cy,
   cyErrorCatcher,
   isGraphInitialized,
-  getSize,
 }: {
   cy: MutableRefObject<cytoscape.Core | undefined>;
   cyErrorCatcher: MutableRefObject<cytoscape.Core | undefined>;
   isGraphInitialized: MutableRefObject<boolean>;
-  getSize: MutableRefObject<TGetSize>;
 }) {
   return throttle((_doc?: Doc) => {
     if (!cy.current) return;
@@ -307,7 +295,7 @@ function getGraphUpdater({
 
     try {
       const layout = getLayout(doc);
-      elements = getElements(doc.text, getSize.current);
+      elements = getElements(doc.text);
 
       // Test
       cyErrorCatcher.current.json({ elements });
@@ -395,17 +383,14 @@ function isParseError(e: unknown): e is ParseError {
 function getStyleUpdater({
   cy,
   cyErrorCatcher,
-  bg,
 }: {
   cy: React.MutableRefObject<cytoscape.Core | undefined>;
   cyErrorCatcher: React.MutableRefObject<cytoscape.Core | undefined>;
-  bg?: string;
 }) {
-  return throttle((theme: Theme) => {
+  return throttle(async (_style: string) => {
     if (!cy.current || !cyErrorCatcher.current) return;
     try {
-      // Prepare Styles
-      const style = buildStylesForGraph(theme, getUserStyle(), bg);
+      const { style } = preprocessCytoscapeStyle(_style);
 
       // Test Error First
       cyErrorCatcher.current.json({ style });
@@ -420,6 +405,7 @@ function getStyleUpdater({
       cyErrorCatcher.current = cytoscape();
       useParseErrorStore.setState({ errorFromStyle: "" });
     } catch (e) {
+      console.log(e);
       cyErrorCatcher.current.destroy();
       cyErrorCatcher.current = cytoscape();
       if (isError(e)) {

app/src/components/GraphContextMenu.tsx

@@ -20,12 +20,7 @@ import { FiDownload } from "react-icons/fi";
 import { HiOutlineClipboardCopy } from "react-icons/hi";
 
 import { AUTH_IMG_SCALE, UNAUTH_IMG_SCALE } from "../lib/constants";
-import {
-  defaultGraphTheme,
-  getTheme,
-  useCurrentTheme,
-  useTheme,
-} from "../lib/graphThemes";
+import { tmpThemeColors } from "../lib/graphThemes";
 import {
   borderStyles,
   edgeLineStyles,
@@ -56,7 +51,6 @@ export const GRAPH_CONTEXT_MENU_ID = "graph-context-menu";
 export const GraphContextMenu = memo(function GraphContextMenu() {
   const isFirefox = useIsFirefox();
   const filename = useDownloadFilename();
-  const theme = useTheme();
 
   const isValidSponsor = useIsValidSponsor();
   const watermark = !isValidSponsor;
@@ -80,10 +74,9 @@ export const GraphContextMenu = memo(function GraphContextMenu() {
       {isValidSponsor && <CopySVG />}
       <Item
         onClick={() => {
-          if (!theme || !window.__cy) return;
+          if (!window.__cy) return;
           startCursorSpin();
           getCanvas({
-            theme,
             cy: window.__cy,
             type: "png",
             watermark,
@@ -104,10 +97,9 @@ export const GraphContextMenu = memo(function GraphContextMenu() {
       </Item>
       <Item
         onClick={() => {
-          if (!theme || !window.__cy) return;
+          if (!window.__cy) return;
           startCursorSpin();
           getCanvas({
-            theme,
             cy: window.__cy,
             type: "jpg",
             watermark,
@@ -129,13 +121,11 @@ export const GraphContextMenu = memo(function GraphContextMenu() {
       {isValidSponsor && (
         <Item
           onClick={async () => {
-            const theme = getTheme();
             const cy = window.__cy;
-            if (!theme || !cy) return;
+            if (!cy) return;
             startCursorSpin();
             const svg = await getSvg({
               cy,
-              theme,
             });
             if (!svg) return;
             downloadSvg({
@@ -165,14 +155,12 @@ function CopySVG() {
       onClick={async () => {
         dispatch("loading");
         startCursorSpin();
-        const theme = getTheme();
         const cy = window.__cy;
-        if (theme && cy)
+        if (cy)
           // copy to clipboard using navigator
           await navigator.clipboard.writeText(
             await getSvg({
               cy,
-              theme,
             })
           );
         dispatch("success");
@@ -194,8 +182,6 @@ function CopyPNG({
   watermark?: boolean;
   scale?: number;
 }) {
-  const theme = useTheme();
-
   const [state, dispatch] = useReducer(
     (_state: ItemState, action: ItemState) => action,
     "idle"
@@ -204,9 +190,8 @@ function CopyPNG({
     dispatch("loading");
     startCursorSpin();
     setTimeout(() => {
-      if (!window.__cy || !theme) return;
+      if (!window.__cy) return;
       getCanvas({
-        theme,
         cy: window.__cy,
         type: "png",
         watermark,
@@ -275,9 +260,7 @@ const edges = edgeLineStyles.map((style) => style.selector.slice(5));
 
 function NodeSubmenu() {
   const active = useContextMenuState((state) => state.active);
-  const themeKey = useDoc((doc) => doc.meta?.theme ?? defaultGraphTheme);
-  const theme = useCurrentTheme(themeKey as string);
-  const colors = theme?.colors ?? {};
+  const colors = tmpThemeColors;
   const colorNames = Object.keys(colors);
   const selected = useSelectedNodes();
   const activeSelection = selected.length

app/src/components/Header.tsx

@@ -31,13 +31,12 @@ import {
 } from "react";
 import { Link, LinkProps, useLocation } from "react-router-dom";
 
+import { DISCORD_URL } from "../lib/constants";
 import { useIsValidCustomer } from "../lib/hooks";
 import { track } from "../lib/track";
 import { useLastChart } from "../lib/useLastChart";
 import { ReactComponent as BrandSvg } from "./brand.svg";
 
-const DISCORD_URL = "https://discord.gg/wPASTQHQBf";
-
 export const Header = memo(function SharedHeader() {
   const { pathname } = useLocation();
   const isSponsorPage = pathname === "/pricing";