Fix template shapes & colors; Fix shape menu

tone-row · May 23, 2024 · e441065 · e441065
1 parent e30a074
commit e441065
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 16 deletions.
diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
@@ -306,7 +306,7 @@ function getGraphUpdater({
 
     try {
       const themeEditor = getThemeEditor(doc);
-      const { layout, style: themeStyle } = toTheme(themeEditor);
+      const { layout, style: themeStyle, postStyle } = toTheme(themeEditor);
 
       // Eventually, this will become cytoscape again...
       const customCss = (doc.meta.cytoscapeStyle as string) ?? "";
@@ -315,7 +315,9 @@ function getGraphUpdater({
       const customCssOnly = (doc.meta?.customCssOnly as boolean) ?? false;
 
       const { style } = preprocessStyle(
-        customCssOnly ? customCss : [themeStyle, customCss].join("\n")
+        customCssOnly
+          ? customCss
+          : [themeStyle, customCss, postStyle].join("\n")
       );
 
       elements = getElements(doc.text);

diff --git a/app/src/components/GraphContextMenu.tsx b/app/src/components/GraphContextMenu.tsx
@@ -302,6 +302,7 @@ function DynamicClassesMenu({
       {Object.entries(dynamicClasses).map(([name, options]) => (
         <Submenu
           key={name}
+          // className="max-h-[200px] overflow-y-auto"
           label={
             <span className="text-sm capitalize">
               {name.replace(/-/g, " ")}

diff --git a/app/src/index.css b/app/src/index.css
@@ -447,3 +447,7 @@ body.dark .pricing-highlights {
 .plan-button[aria-current="true"] {
   transform: scale(1) translateZ(0);
 }
+
+.react-contexify .react-contexify__submenu {
+  @apply max-h-[300px] overflow-y-auto;
+}
diff --git a/app/src/lib/preprocessStyle.ts b/app/src/lib/preprocessStyle.ts
@@ -336,6 +336,7 @@ export function getStyleStringFromMeta(meta: any) {
   if (customCssOnly) {
     return cytoscapeStyle;
   } else {
-    return `${toTheme(themeEditor).style}\n${cytoscapeStyle}`;
+    const theme = toTheme(themeEditor);
+    return `${theme.style}\n${cytoscapeStyle}\n${theme.postStyle}`;
   }
 }
diff --git a/app/src/lib/templates/flowchart-template.ts b/app/src/lib/templates/flowchart-template.ts
@@ -45,4 +45,4 @@ export const theme: FFTheme = {
 };
 
 export const cytoscapeStyle =
-  "$color: #1a1a1a;\n$red: #ed6e49;\n$orange: #f4a261;\n$yellow: #f5c844;\n$green: #11ac9a;\n$blue: #4351d1;\n$pink: #f5c3c2;\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: $color;\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: $color;\n  color: white;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  background-color: $red;\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_pink {\n  background-color: $pink;\n  color: $color;\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}\n";
+  "$color: #1a1a1a;\n$red: #ed6e49;\n$orange: #f4a261;\n$yellow: #f5c844;\n$green: #11ac9a;\n$blue: #4351d1;\n$pink: #f5c3c2;\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: $color;\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: $color;\n  color: white;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  background-color: $red;\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_pink {\n  background-color: $pink;\n  color: $color;\n}\n:childless.color_grey {\n  background-color: $grey;\n  color: $color;\n}\n\n:parent.color_white {\n  background-color: white;\n}\n:parent.color_grey {\n  background-color: $grey;\n}\n";
diff --git a/app/src/lib/templates/templates.ts b/app/src/lib/templates/templates.ts
@@ -25,14 +25,6 @@ export const templates: {
     promptType: "flowchart",
     accentClasses: ["color_blue", "color_green"],
   },
-  {
-    key: "mindmap",
-    img: "template19.png",
-    bgColor: "#FFFFFF",
-    title: () => `Mind Map`,
-    promptType: "knowledge",
-    accentClasses: ["size_lg", "color_blue", "color_green", "color_orange"],
-  },
   {
     key: "org-chart",
     img: "template17.png",
@@ -49,6 +41,14 @@ export const templates: {
     promptType: "flowchart",
     accentClasses: ["color_blue", "color_green", "color_purple"],
   },
+  {
+    key: "mindmap",
+    img: "template19.png",
+    bgColor: "#FFFFFF",
+    title: () => `Mind Map`,
+    promptType: "knowledge",
+    accentClasses: ["size_lg", "color_blue", "color_green", "color_orange"],
+  },
   {
     key: "knowledge-graph",
     img: "template20.png",

diff --git a/app/src/lib/toTheme.ts b/app/src/lib/toTheme.ts
@@ -133,7 +133,7 @@ export function toTheme(theme: FFTheme) {
     }
   }
 
-  const elementStyles: cytoscape.StylesheetCSS[] = [
+  const preStyles: cytoscape.StylesheetCSS[] = [
     {
       selector: ":childless",
       css: node as any,
@@ -169,10 +169,25 @@ export function toTheme(theme: FFTheme) {
         "active-bg-opacity": 0,
       },
     },
+  ];
+  const postStyles: cytoscape.StylesheetCSS[] = [
     ...edgeStyleClasses,
     ...childlessShapeClasses,
     ...createSmartChildlessBorderClasses(theme.borderWidth || theme.edgeWidth),
     ...createSmartShapeClasses(width),
+    // for width and height in the form [w=100][h=100]
+    {
+      selector: ":childless[w]",
+      css: {
+        width: "data(width)",
+      },
+    },
+    {
+      selector: ":childless[h]",
+      css: {
+        height: "data(height)",
+      },
+    },
   ];
 
   const variables = [
@@ -182,17 +197,19 @@ export function toTheme(theme: FFTheme) {
     `$background: ${theme.background};`,
   ].join("\n");
 
-  const style = [variables, styleToString(elementStyles)];
+  const preStyle = [variables, styleToString(preStyles)];
+  const postStyle = styleToString(postStyles);
 
   // Add font style
   let knownFont = fonts.find((f) => f.name === theme.fontFamily);
   if (knownFont) {
-    style.unshift(knownFont.importSnippet);
+    preStyle.unshift(knownFont.importSnippet);
   }
 
   return {
     layout,
-    style: style.join("\n"),
+    style: preStyle.join("\n"),
+    postStyle,
   };
 }