Skip to content

Commit

Permalink
Fix Template Shapes / Colors (#677)
Browse files Browse the repository at this point in the history 
* bugfix: template loading didn't unfreeze graph

* Fix template shapes & colors; Fix shape menu

* Template adjustments
  • Loading branch information
@rob-gordon
rob-gordon committed May 23, 2024
1 parent bdd7eee commit f93256c
Show file tree
Hide file tree
Showing 17 changed files with 149 additions and 124 deletions.
Binary file modified app/public/templates/template11.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/public/templates/template17.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/public/templates/template18.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/public/templates/template21.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions app/src/components/Graph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) ?? "";
Expand All @@ -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);
Expand Down
1 change: 1 addition & 0 deletions app/src/components/GraphContextMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, " ")}
Expand Down
62 changes: 31 additions & 31 deletions app/src/components/LoadTemplateDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,44 +42,44 @@ export function LoadTemplateDialog() {
setContent(getContentInitialValue);
}, []);

const load = useCallback(() => {
(async () => {
if (!template || !templateData) return;
const load = useCallback(async () => {
if (!template || !templateData) return;

const importTemplate = await import(
`../lib/templates/${template}-template.ts`
);
const templateContent = importTemplate.content;
const theme: FFTheme = importTemplate.theme;
const cytoscapeStyle: string = importTemplate.cytoscapeStyle ?? "";
const importTemplate = await import(
`../lib/templates/${template}-template.ts`
);
const templateContent = importTemplate.content;
const theme: FFTheme = importTemplate.theme;
const cytoscapeStyle: string = importTemplate.cytoscapeStyle ?? "";

const { text, meta: _meta, details } = useDoc.getState();
const { text, meta: _meta, details } = useDoc.getState();

const nextContent = content ? templateContent : text;
const nextContent = content ? templateContent : text;

const meta = {
..._meta,
cytoscapeStyle,
themeEditor: theme,
};
const meta = {
..._meta,
cytoscapeStyle,
themeEditor: theme,
// Unfreeze the doc
nodePositions: undefined,
};

reset();
setOpen(false);
reset();
setOpen(false);

unmountGraph();
// The reason this is done is because the unmounting
// of the graph happens effectually, i.e. not immediately
// and when an elk layout is run, but the graph is no longer
// there we get an error, this ensures the graph is actually
// unmounted, therefore the layout doesn't begin to run
requestAnimationFrame(() => {
prepareChart({
doc: `${nextContent}\n=====${JSON.stringify(meta)}=====`,
details,
});
mountGraph();
unmountGraph();
// The reason this is done is because the unmounting
// of the graph happens effectually, i.e. not immediately
// and when an elk layout is run, but the graph is no longer
// there we get an error, this ensures the graph is actually
// unmounted, therefore the layout doesn't begin to run
requestAnimationFrame(() => {
prepareChart({
doc: `${nextContent}\n=====${JSON.stringify(meta)}=====`,
details,
});
})();
mountGraph();
});
}, [template, templateData, content, reset]);

return (
Expand Down
3 changes: 2 additions & 1 deletion app/src/components/Tabs/ThemeTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,7 @@ const Form = createForm<{
options: [
{ label: "Bezier", value: "bezier" },
{ label: "Taxi", value: "taxi" },
{ label: "Round Taxi", value: "round-taxi" },
],
},
{
Expand Down Expand Up @@ -631,7 +632,7 @@ export function ThemeTab() {
function Section({ title, children }: { title: string; children: ReactNode }) {
return (
<>
<h2 className="font-bold text-blue-600 text-base -mb-8 ml-3 dark:text-blue-400">
<h2 className="font-bold text-neutral-800 text-base -mb-8 ml-px dark:text-blue-400">
{title}
</h2>
<div className="border border-blue-100 dark:border-neutral-800 rounded-xl relative w-full overflow-hidden">
Expand Down
4 changes: 4 additions & 0 deletions app/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion app/src/lib/FFTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export type Direction = "RIGHT" | "LEFT" | "DOWN" | "UP";

export type Shape = "rectangle" | "roundrectangle" | "ellipse";

export type CurveStyle = "bezier" | "taxi";
export type CurveStyle = "bezier" | "taxi" | "round-taxi";

export type Border = "none" | "solid" | "dashed" | "dotted" | "double";

Expand Down
3 changes: 2 additions & 1 deletion app/src/lib/preprocessStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
}
}
43 changes: 23 additions & 20 deletions app/src/lib/templates/code-flow-template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,33 +20,36 @@ User
`;

export const theme: FFTheme = {
arrowScale: 1,
background: "#f8f8f8",
borderColor: "#6f7280",
borderWidth: 2,
curveStyle: "taxi",
layoutName: "dagre",
direction: "DOWN",
edgeColor: "#b9a6a6",
edgeTextSize: 1,
edgeWidth: 2,
spacingFactor: 1.15,

background: "#f8f8f8",
fontFamily: "IBM Plex Sans",
layoutName: "dagre",
lineHeight: 1.4,
nodeBackground: "#6f7280",

shape: "roundrectangle",
nodeBackground: "#9397a6",
nodeForeground: "#ffffff",
padding: 19,
rotateEdgeLabel: false,
shape: "roundrectangle",
sourceArrowShape: "none",
sourceDistanceFromNode: 0,
spacingFactor: 1,
targetArrowShape: "triangle",
targetDistanceFromNode: 5,
textMarginY: 1.5,
borderWidth: 2,
borderColor: "#8f95b1",
textMaxWidth: 146,
lineHeight: 1.4,
textMarginY: 1.5,
useFixedHeight: false,
fixedHeight: 50,

curveStyle: "round-taxi",
edgeWidth: 2,
edgeColor: "#9a9a9a",
sourceArrowShape: "none",
targetArrowShape: "triangle",
sourceDistanceFromNode: 0,
targetDistanceFromNode: 5,
arrowScale: 1,
edgeTextSize: 1,
rotateEdgeLabel: false,
};

export const cytoscapeStyle =
"$background: rgb(248, 248, 248);\n$color: #000000;\n$blue: #3375e5;\n$purple: #8b53e6;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #72d9b3;\n$grey: #6f7280;\n$lightgrey: #3a3636;\n\n/** Start */\n:childless[in_degree < 1][out_degree > 0] {\n shape: roundrectangle;\n border-color: $color;\n background-color: white;\n color: $color;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n shape: diamond;\n border-color: $blue;\n background-color: #d7e9fc;\n color: $color;\n height: $width;\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 border-color: $green;\n background-color: #f0fbf8;\n color: $color;\n}\n:childless.color_blue {\n border-color: $blue;\n background-color: #d7e9fc;\n color: $color;\n}\n:childless.color_purple {\n border-color: $purple;\n background-color: #e1d8f4;\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}";
"$background: rgb(248, 248, 248);\n$color: #000000;\n$blue: #3375e5;\n$purple: #8646ed;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #72d9b3;\n$grey: #474747;\n$lightgrey: #3a3636;\n\n/** Start */\n:childless[in_degree < 1][out_degree > 0] {\n shape: roundrectangle;\n border-color: $color;\n background-color: white;\n color: $color;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n shape: diamond;\n border-color: $blue;\n background-color: #d7e9fc;\n color: $color;\n height: $width;\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 border-color: $green;\n background-color: #f0fbf8;\n color: $color;\n}\n:childless.color_blue {\n border-color: $blue;\n background-color: $blue;\n}\n:childless.color_purple {\n border-color: $purple;\n background-color: $purple;\n}\n:childless.color_grey {\n background-color: $grey;\n border-color: $grey;\n}\n\n:parent.color_white {\n background-color: white;\n}\n:parent.color_grey {\n background-color: $grey;\n}";
31 changes: 17 additions & 14 deletions app/src/lib/templates/default-template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,28 @@ Begin Typing
Now erase the text and try it yourself!`;

export const theme: FFTheme = {
background: "#FFFFFF",
fontFamily: "IBM Plex Sans",
layoutName: "dagre",
direction: "DOWN",
spacingFactor: 1.1,
shape: "rectangle",
nodeBackground: "#f2eded",
nodeForeground: "#31405b",
padding: 25,
borderWidth: 2,
borderColor: "#31405b",
textMaxWidth: 150,
lineHeight: 1.4,

background: "#ffffff",
fontFamily: "IBM Plex Sans",

shape: "roundrectangle",
nodeBackground: "#e6e6e6",
nodeForeground: "#000000",
padding: 16,
borderWidth: 0,
borderColor: "#000000",
textMaxWidth: 146,
lineHeight: 1.3,
textMarginY: 0,
useFixedHeight: false,
fixedHeight: 60,
fixedHeight: 50,

curveStyle: "bezier",
edgeWidth: 1,
edgeColor: "#000000",
edgeWidth: 2,
edgeColor: "#606ef6",
sourceArrowShape: "none",
targetArrowShape: "triangle",
sourceDistanceFromNode: 0,
Expand All @@ -39,4 +42,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 - 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}";
"$color: #000000;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #2a9d8f;\n$blue: #606ef6;\n$purple: #6d4a7c;\n$grey: #f2eded;\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}";
35 changes: 19 additions & 16 deletions app/src/lib/templates/flowchart-template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,31 +18,34 @@ Research
export const theme: FFTheme = {
layoutName: "dagre",
direction: "DOWN",
spacingFactor: 1.05,
lineHeight: 1.4,
spacingFactor: 1,

background: "#ffffff",
fontFamily: "REM",

shape: "rectangle",
background: "#f0f3f5",
textMaxWidth: 150,
nodeBackground: "#f5c844",
nodeForeground: "#1a1a1a",
padding: 10,
fontFamily: "REM",
curveStyle: "bezier",
textMarginY: 0,
borderWidth: 0,
edgeTextSize: 0.88,
borderColor: "#1a1a1a",
textMaxWidth: 150,
lineHeight: 1.4,
textMarginY: 0,
useFixedHeight: true,
fixedHeight: 80,

curveStyle: "bezier",
edgeWidth: 2,
edgeColor: "#1a1a1a",
sourceArrowShape: "none",
targetArrowShape: "vee",
edgeColor: "#5a5a5a",
borderColor: "#1a1a1a",
nodeBackground: "#f5c844",
nodeForeground: "#1a1a1a",
targetArrowShape: "triangle",
sourceDistanceFromNode: 0,
targetDistanceFromNode: 0,
targetDistanceFromNode: 4,
arrowScale: 1.5,
rotateEdgeLabel: false,
edgeTextSize: 1,
rotateEdgeLabel: true,
};

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";
Loading

0 comments on commit f93256c

Please sign in to comment.