diff --git a/app/package.json b/app/package.json index 115f4c4ac..956b87c79 100644 --- a/app/package.json +++ b/app/package.json @@ -1,6 +1,6 @@ { "name": "app", - "version": "1.58.2", + "version": "1.59.0", "main": "module/module.js", "license": "MIT", "scripts": { diff --git a/app/public/template-screenshots/code-flow.png b/app/public/template-screenshots/code-flow.png index 1a15fdb72..c2f9d68c5 100644 Binary files a/app/public/template-screenshots/code-flow.png and b/app/public/template-screenshots/code-flow.png differ diff --git a/app/public/template-screenshots/decision-flow.png b/app/public/template-screenshots/decision-flow.png index 317046084..4f7b052cd 100644 Binary files a/app/public/template-screenshots/decision-flow.png and b/app/public/template-screenshots/decision-flow.png differ diff --git a/app/public/template-screenshots/default.png b/app/public/template-screenshots/default.png index 1450a36b0..4e4c1f36e 100644 Binary files a/app/public/template-screenshots/default.png and b/app/public/template-screenshots/default.png differ diff --git a/app/public/template-screenshots/flowchart.png b/app/public/template-screenshots/flowchart.png index a31377ea4..d84014b98 100644 Binary files a/app/public/template-screenshots/flowchart.png and b/app/public/template-screenshots/flowchart.png differ diff --git a/app/public/template-screenshots/mindmap-dark.png b/app/public/template-screenshots/mindmap-dark.png index f3b861395..142802abd 100644 Binary files a/app/public/template-screenshots/mindmap-dark.png and b/app/public/template-screenshots/mindmap-dark.png differ diff --git a/app/public/template-screenshots/mindmap.png b/app/public/template-screenshots/mindmap.png index 8df409781..768454495 100644 Binary files a/app/public/template-screenshots/mindmap.png and b/app/public/template-screenshots/mindmap.png differ diff --git a/app/public/template-screenshots/network-diagram-dark.png b/app/public/template-screenshots/network-diagram-dark.png index cea5fd99d..7bd30599d 100644 Binary files a/app/public/template-screenshots/network-diagram-dark.png and b/app/public/template-screenshots/network-diagram-dark.png differ diff --git a/app/public/template-screenshots/org-chart.png b/app/public/template-screenshots/org-chart.png index f2d8738a1..dcaca2d27 100644 Binary files a/app/public/template-screenshots/org-chart.png and b/app/public/template-screenshots/org-chart.png differ diff --git a/app/public/template-screenshots/pert-light.png b/app/public/template-screenshots/pert-light.png index aae817fec..8f18b828f 100644 Binary files a/app/public/template-screenshots/pert-light.png and b/app/public/template-screenshots/pert-light.png differ diff --git a/app/public/template-screenshots/playful-mindmap.png b/app/public/template-screenshots/playful-mindmap.png index 7be9a276c..a0cf86603 100644 Binary files a/app/public/template-screenshots/playful-mindmap.png and b/app/public/template-screenshots/playful-mindmap.png differ diff --git a/app/public/template-screenshots/process-flow.png b/app/public/template-screenshots/process-flow.png index e4af50afc..8fccb4590 100644 Binary files a/app/public/template-screenshots/process-flow.png and b/app/public/template-screenshots/process-flow.png differ diff --git a/app/public/template-screenshots/thumb_code-flow.png b/app/public/template-screenshots/thumb_code-flow.png index 35fc1727e..cca96ac18 100644 Binary files a/app/public/template-screenshots/thumb_code-flow.png and b/app/public/template-screenshots/thumb_code-flow.png differ diff --git a/app/public/template-screenshots/thumb_decision-flow.png b/app/public/template-screenshots/thumb_decision-flow.png index 72f2a96a7..32e34444d 100644 Binary files a/app/public/template-screenshots/thumb_decision-flow.png and b/app/public/template-screenshots/thumb_decision-flow.png differ diff --git a/app/public/template-screenshots/thumb_default.png b/app/public/template-screenshots/thumb_default.png index d252dadd1..ff7cb64d1 100644 Binary files a/app/public/template-screenshots/thumb_default.png and b/app/public/template-screenshots/thumb_default.png differ diff --git a/app/public/template-screenshots/thumb_flowchart.png b/app/public/template-screenshots/thumb_flowchart.png index 688ae653d..7c15038e5 100644 Binary files a/app/public/template-screenshots/thumb_flowchart.png and b/app/public/template-screenshots/thumb_flowchart.png differ diff --git a/app/public/template-screenshots/thumb_knowledge-graph.png b/app/public/template-screenshots/thumb_knowledge-graph.png index fb86070ec..ce25e3dfc 100644 Binary files a/app/public/template-screenshots/thumb_knowledge-graph.png and b/app/public/template-screenshots/thumb_knowledge-graph.png differ diff --git a/app/public/template-screenshots/thumb_mindmap-dark.png b/app/public/template-screenshots/thumb_mindmap-dark.png index 55da448a6..396575825 100644 Binary files a/app/public/template-screenshots/thumb_mindmap-dark.png and b/app/public/template-screenshots/thumb_mindmap-dark.png differ diff --git a/app/public/template-screenshots/thumb_mindmap.png b/app/public/template-screenshots/thumb_mindmap.png index 8e6ee2a77..330b92700 100644 Binary files a/app/public/template-screenshots/thumb_mindmap.png and b/app/public/template-screenshots/thumb_mindmap.png differ diff --git a/app/public/template-screenshots/thumb_network-diagram-dark.png b/app/public/template-screenshots/thumb_network-diagram-dark.png index c36215211..8b9fb0acb 100644 Binary files a/app/public/template-screenshots/thumb_network-diagram-dark.png and b/app/public/template-screenshots/thumb_network-diagram-dark.png differ diff --git a/app/public/template-screenshots/thumb_network-diagram-dark.ts.png b/app/public/template-screenshots/thumb_network-diagram-dark.ts.png index b05581005..bc14f5358 100644 Binary files a/app/public/template-screenshots/thumb_network-diagram-dark.ts.png and b/app/public/template-screenshots/thumb_network-diagram-dark.ts.png differ diff --git a/app/public/template-screenshots/thumb_network-diagram-icons.png b/app/public/template-screenshots/thumb_network-diagram-icons.png index a9b32a9c5..f652fdec0 100644 Binary files a/app/public/template-screenshots/thumb_network-diagram-icons.png and b/app/public/template-screenshots/thumb_network-diagram-icons.png differ diff --git a/app/public/template-screenshots/thumb_org-chart.png b/app/public/template-screenshots/thumb_org-chart.png index 1f085e172..6021371cb 100644 Binary files a/app/public/template-screenshots/thumb_org-chart.png and b/app/public/template-screenshots/thumb_org-chart.png differ diff --git a/app/public/template-screenshots/thumb_pert-light.png b/app/public/template-screenshots/thumb_pert-light.png index 688178daa..46bffa770 100644 Binary files a/app/public/template-screenshots/thumb_pert-light.png and b/app/public/template-screenshots/thumb_pert-light.png differ diff --git a/app/public/template-screenshots/thumb_playful-mindmap.png b/app/public/template-screenshots/thumb_playful-mindmap.png index dc4188043..08145d542 100644 Binary files a/app/public/template-screenshots/thumb_playful-mindmap.png and b/app/public/template-screenshots/thumb_playful-mindmap.png differ diff --git a/app/public/template-screenshots/thumb_process-flow.png b/app/public/template-screenshots/thumb_process-flow.png index 7a2dd37dd..0e22d7b50 100644 Binary files a/app/public/template-screenshots/thumb_process-flow.png and b/app/public/template-screenshots/thumb_process-flow.png differ diff --git a/app/scripts/screenshot-templates.mjs b/app/scripts/screenshot-templates.mjs index ba13a0968..581318cd5 100644 --- a/app/scripts/screenshot-templates.mjs +++ b/app/scripts/screenshot-templates.mjs @@ -3,7 +3,6 @@ import fs from "fs"; import { chromium } from "playwright"; import { exec } from "child_process"; import util from "util"; -import { writeFile } from "fs/promises"; const execAsync = util.promisify(exec); diff --git a/app/src/components/Layout.tsx b/app/src/components/Layout.tsx index 7398bb66b..a5b9215f9 100644 --- a/app/src/components/Layout.tsx +++ b/app/src/components/Layout.tsx @@ -1,5 +1,5 @@ import cx from "classnames"; -import { X, Wrench } from "phosphor-react"; +import { X } from "phosphor-react"; import { lazy, memo, ReactNode, Suspense, useState } from "react"; import { useFullscreen, useIsEditorView } from "../lib/hooks"; @@ -9,9 +9,6 @@ import { Header } from "./Header"; import styles from "./Layout.module.css"; import Loading from "./Loading"; import { VersionCheck } from "./VersionCheck"; -import * as Dialog from "@radix-ui/react-dialog"; -import { Overlay, Content } from "../ui/Dialog"; -import { Trans, t } from "@lingui/macro"; const PaywallModal = lazy(() => import("./PaywallModal")); const Layout = memo(({ children }: { children: ReactNode }) => { diff --git a/app/src/components/LoadTemplateDialog.tsx b/app/src/components/LoadTemplateDialog.tsx index 06e9fc283..327996488 100644 --- a/app/src/components/LoadTemplateDialog.tsx +++ b/app/src/components/LoadTemplateDialog.tsx @@ -150,23 +150,26 @@ export function LoadTemplateDialog() { ) : ( -
+
{templates.map((template) => ( ))}
diff --git a/app/src/index.css b/app/src/index.css index 04dc8dcc3..1d7865834 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -465,3 +465,16 @@ body.dark .pricing-highlights { calc(100% - 64px) 100% ); } + +.minimal-scrollbar::-webkit-scrollbar { + @apply w-2; +} +.minimal-scrollbar::-webkit-scrollbar-thumb { + @apply bg-neutral-300 dark:bg-neutral-800 rounded-full cursor-pointer; +} +.minimal-scrollbar:hover::-webkit-scrollbar-thumb { + @apply bg-neutral-400 dark:bg-neutral-700; +} +.minimal-scrollbar::-webkit-scrollbar-track { + @apply bg-transparent; +} diff --git a/app/src/lib/prepareChart/prepareChart.test.ts b/app/src/lib/prepareChart/prepareChart.test.ts index 757fd4a94..7ed458a85 100644 --- a/app/src/lib/prepareChart/prepareChart.test.ts +++ b/app/src/lib/prepareChart/prepareChart.test.ts @@ -1,8 +1,6 @@ import { readFileSync } from "fs"; import { join } from "path"; -import { cytoscapeStyle as style } from "../themes/original"; -import { cytoscapeStyle as darkStyle } from "../themes/original-dark"; import { theme, cytoscapeStyle } from "../templates/default-template"; import { initialDoc } from "../useDoc"; import { prepareChart } from "./prepareChart"; diff --git a/app/src/lib/templates/decision-flow-template.ts b/app/src/lib/templates/decision-flow-template.ts index 99f19dee6..3c7c929e9 100644 --- a/app/src/lib/templates/decision-flow-template.ts +++ b/app/src/lib/templates/decision-flow-template.ts @@ -1,57 +1,43 @@ import { FFTheme } from "../FFTheme"; export const content = ` -Should we launch the product? .decision - Yes: High demand - Prepare marketing campaign .action - Set budget .input - Create ads .input - Scale production .action - Hire staff .input - Increase inventory .input - No: More research needed - Conduct market analysis .action.color_blue - Positive results: Proceed - (Should we launch the product?) - Negative results: Abandon - End project .terminal.color_red - Improve product .action.color_green - Minor changes - (Should we launch the product?) - Major overhaul - Seek additional funding .action.color_orange - Approved: Continue - (Should we launch the product?) - Denied: Abandon - (End project) +Start + Should we launch the product? .decision + Yes: Market ready + Launch campaign .action + Set budget .input + Launch .terminal.color_blue + No: Need improvements + Improve product .action.color_green + (Market ready) `; export const theme: FFTheme = { - layoutName: "layered", + layoutName: "mrtree", direction: "DOWN", - spacingFactor: 1.25, + spacingFactor: 1.2, - background: "#f2e9e4", + background: "#ffffff", fontFamily: "Roboto", - nodeBackground: "#4a4e69", - nodeForeground: "#ffffff", - borderWidth: 0, - edgeColor: "#22223b", + nodeBackground: "#f8fafc", + nodeForeground: "#1e293b", + borderWidth: 2, + edgeColor: "#64748b", padding: 16, - borderColor: "#ced4da", + borderColor: "#64748b", textMaxWidth: 150, lineHeight: 1.3, - textMarginY: 0, + textMarginY: 1.75, useFixedHeight: false, shape: "rectangle", - curveStyle: "round-taxi", + curveStyle: "bezier", edgeWidth: 2, sourceArrowShape: "none", targetArrowShape: "triangle", sourceDistanceFromNode: 0, - targetDistanceFromNode: 10, - arrowScale: 1.2, - edgeTextSize: 12, + targetDistanceFromNode: 0, + arrowScale: 1.75, + edgeTextSize: 0.9, rotateEdgeLabel: false, fixedHeight: 100, }; @@ -59,92 +45,48 @@ export const theme: FFTheme = { export const cytoscapeStyle = ` @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); -node { - font-weight: 500; - text-halign: center; - text-valign: center; - color: #ffffff; - background-color: #4a4e69; - border-width: 0; - font-size: 14px; - text-wrap: wrap; - text-max-width: 130px; - padding: 12px; - width: 160px; - height: 80px; - text-outline-color: #22223b; - text-outline-width: 1px; - text-outline-opacity: 0.5; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} - -edge { - taxi-direction: downward; - target-arrow-shape: triangle; - target-arrow-color: #22223b; - line-color: #22223b; - width: 2px; - font-size: 12px; - font-weight: 500; - color: #22223b; - text-background-color: #f2e9e4; - text-background-opacity: 1; - text-background-padding: 3px; - curve-style: unbundled-bezier; - control-point-distances: 0 -20 -20 20 0; - control-point-weights: 0.25 0.5 0.75; -} - .decision { shape: diamond; - background-color: #f72585; - width: 160px; - height: 160px; + background-color: #f1f5f9; + height: 150px; } .action { shape: rectangle; - background-color: #4361ee; + background-color: #bfdbfe; + border-color: #3b82f6; } .input { shape: parallelogram; - background-color: #4cc9f0; - width: 140px; - height: 70px; + background-color: #ddd6fe; + border-color: #7c3aed; } .terminal { shape: ellipse; - background-color: #7209b7; - width: 140px; - height: 70px; -} - -.recurse { - shape: rectangle; - background-color: #4895ef; - border-width: 3px; - border-style: dashed; - border-color: #f72585; - width: 140px; - height: 70px; + background-color: #fecaca; + border-color: #dc2626; } .color_blue { - background-color: #4cc9f0; + background-color: #bfdbfe; + border-color: #3b82f6; } .color_green { - background-color: #52b788; + background-color: #bbf7d0; + border-color: #16a34a; } .color_red { - background-color: #e63946; + background-color: #fecaca; + border-color: #dc2626; } .color_orange { - background-color: #fb8500; + background-color: #fed7aa; + border-color: #f97316; } @keyframes pulse { diff --git a/app/src/lib/templates/flowchart-template.ts b/app/src/lib/templates/flowchart-template.ts index ac4b28fa3..50662fc4c 100644 --- a/app/src/lib/templates/flowchart-template.ts +++ b/app/src/lib/templates/flowchart-template.ts @@ -6,8 +6,8 @@ Brainstorming Session Prototype Evaluation Yes: Design .color_blue Testing - No: Review .color_green - Quick Design .color_green + No: Review .color_yellow + Quick Design .color_yellow (Prototyping) Trends (Prototyping) @@ -21,31 +21,112 @@ export const theme: FFTheme = { spacingFactor: 1, background: "#ffffff", - fontFamily: "REM", - - shape: "rectangle", - nodeBackground: "#f5c844", - nodeForeground: "#1a1a1a", - padding: 10, - borderWidth: 0, - borderColor: "#1a1a1a", - textMaxWidth: 150, + fontFamily: "Inclusive Sans", + + shape: "roundrectangle", + nodeBackground: "#ffffff", + nodeForeground: "#2a2a2a", + padding: 12, + borderWidth: 2, + borderColor: "#565656", + textMaxWidth: 110, lineHeight: 1.4, - textMarginY: 0, - useFixedHeight: true, - fixedHeight: 80, + textMarginY: 0.5, + useFixedHeight: false, + fixedHeight: 50, curveStyle: "bezier", edgeWidth: 2, - edgeColor: "#1a1a1a", + edgeColor: "#666666", sourceArrowShape: "none", targetArrowShape: "triangle", sourceDistanceFromNode: 0, targetDistanceFromNode: 4, - arrowScale: 1.5, + arrowScale: 1.2, 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 color: $color;\n}\n\n:parent.color_white {\n background-color: white;\n}\n:parent.color_grey {\n background-color: $grey;\n}\n"; +export const cytoscapeStyle = ` +$color: #2a2a2a; +$red: #ffebee; +$orange: #fff3e0; +$yellow: #fff8e1; +$green: #e8f5e9; +$blue: #e3f2fd; +$pink: #fce4ec; +$grey: #f5f5f5; + +:childless { + text-outline-width: 0; + text-outline-color: transparent; + shadow-blur: 5; + shadow-color: #00000010; + shadow-offset-x: 0; + shadow-offset-y: 2; +} + +/** Start */ +:childless[in_degree < 1][out_degree > 0] { + shape: roundrectangle; + background-color: $green; +} + +/** Terminal */ +:childless[out_degree < 1][in_degree > 0] { + shape: roundrectangle; + background-color: $red; +} + +/** Branching - Updated for better readability */ +:childless[in_degree > 0][in_degree < 2][out_degree > 1] { + shape: diamond; + background-color: white; + color: $color; + height: $width; + text-margin-y: 2; +} + +:childless.color_red { + background-color: $red; + color: $color; +} +:childless.color_orange { + background-color: $orange; + color: $color; +} +:childless.color_yellow { + background-color: $yellow; + color: $color; +} +:childless.color_green { + background-color: $green; + color: $color; +} +:childless.color_blue { + background-color: $blue; + color: $color; +} +:childless.color_pink { + background-color: $pink; + color: $color; +} +:childless.color_grey { + background-color: $grey; + color: $color; +} +:childless.color_white { + background-color: white; +} +:childless.color_black { + background-color: black; + color: white; +} + +:parent.color_white { + background-color: white; +} +:parent.color_grey { + background-color: $grey; +} +`; diff --git a/app/src/lib/templates/network-diagram-dark-template.ts b/app/src/lib/templates/network-diagram-dark-template.ts index 6e65401da..c72682515 100644 --- a/app/src/lib/templates/network-diagram-dark-template.ts +++ b/app/src/lib/templates/network-diagram-dark-template.ts @@ -2,155 +2,128 @@ import { FFTheme } from "../FFTheme"; export const content = ` Internet .cloud - Firewall1 .hexagon + Firewall .hexagon Router .diamond - Switch1 .rectangle - Server1 .server - Server2 .server - Workstation1 .workstation - Workstation2 .workstation - Switch2 .rectangle - Server3 .server - Server4 .server - Workstation3 .workstation - Workstation4 .workstation - VPN .pentagon - RemoteUser1 .user - RemoteUser2 .user - ExternalService1 .cloud - ExternalService2 .cloud + Switch .rectangle + Server .server + Workstation .workstation + VPN .pentagon + RemoteUser .user + (Workstation) `; export const theme: FFTheme = { layoutName: "cose", direction: "DOWN", - spacingFactor: 1.2, + spacingFactor: 1, - background: "#1e2337", - fontFamily: "Roboto Mono", + background: "#2e404f", + fontFamily: "Inter", shape: "rectangle", - nodeBackground: "#3498db", + nodeBackground: "#1e293b", nodeForeground: "#ffffff", - padding: 12, - borderWidth: 0, - borderColor: "#16213e", - textMaxWidth: 120, - lineHeight: 1.2, - textMarginY: 0, + padding: 20, + borderWidth: 3, + borderColor: "#becce0", + textMaxWidth: 130, + lineHeight: 1.4, + textMarginY: 0.75, useFixedHeight: false, curveStyle: "bezier", - edgeWidth: 2, - edgeColor: "#4cc9f0", - sourceArrowShape: "none", + edgeWidth: 3, + edgeColor: "#becce0", targetArrowShape: "triangle", - sourceDistanceFromNode: 0, - targetDistanceFromNode: 6, - arrowScale: 0.8, - edgeTextSize: 1, - rotateEdgeLabel: false, + sourceDistanceFromNode: 5, + targetDistanceFromNode: 5, + arrowScale: 1.5, fixedHeight: 100, + edgeTextSize: 0.9, + sourceArrowShape: "none", + rotateEdgeLabel: false, }; export const cytoscapeStyle = ` -@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); node { - font-weight: bold; - font-size: 14px; - text-halign: center; - text-valign: center; - color: #ffffff; - background-color: #3498db; - text-wrap: wrap; - text-max-width: 100px; - padding: 12px; - width: 120px; - height: 50px; - text-outline-color: #000000; - text-outline-width: 1px; - text-outline-opacity: 0.5; -} - -edge { - line-color: #4cc9f0; - opacity: 0.8; + font-weight: 400; + text-outline-width: 0; + text-outline-color: transparent; + shadow-blur: 0; + shadow-offset-x: 0; + shadow-offset-y: 0; } .cloud { shape: round-rectangle; - background-color: #000000; + background-color: #1e293b; border-width: 2px; - border-color: #b19cd9; + border-color: #becce0; border-style: dashed; width: 140px; - height: 60px; - color: #b19cd9; - text-outline-color: #000000; - text-outline-width: 2px; - text-outline-opacity: 1; + color: #becce0; } .hexagon { - shape: hexagon; - background-color: #e74c3c; - width: 80px; - height: 70px; + shape: rectangle; + background-color: #b91c1c; + border-color: #ef4444; + width: 100px; } .diamond { - shape: diamond; - background-color: #2ecc71; - width: 80px; - height: 80px; + shape: rectangle; + background-color: #15803d; + border-color: #4ade80; + width: 100px; } .rectangle { shape: rectangle; - background-color: #3498db; + background-color: #1d4ed8; + border-color: #60a5fa; width: 100px; - height: 50px; } .pentagon { - shape: pentagon; - background-color: #9b59b6; - width: 80px; - height: 75px; - text-margin-y: 4px; + shape: rectangle; + background-color: #6d28d9; + border-color: #a78bfa; + width: 100px; } .server { - shape: round-rectangle; - background-color: #3498db; + shape: rectangle; + background-color: #0369a1; + border-color: #38bdf8; width: 100px; - height: 50px; } .workstation { - shape: round-rectangle; - background-color: #3498db; - width: 130px; - height: 50px; + shape: rectangle; + background-color: #0f766e; + border-color: #2dd4bf; + width: 100px; } .user { - shape: ellipse; - background-color: #f39c12; + shape: rectangle; + background-color: #c2410c; + border-color: #fb923c; width: 100px; - height: 100px; } node:selected { border-width: 2px; - border-color: #ffffff; - border-opacity: 1; + border-color: #e2e8f0; + border-opacity: 0.8; } edge:selected { width: 2px; - line-color: #ffffff; - opacity: 1; + line-color: #e2e8f0; + opacity: 0.8; } `; diff --git a/app/src/lib/templates/org-chart-template.ts b/app/src/lib/templates/org-chart-template.ts index 9cd5f18a8..2cb0a65b2 100644 --- a/app/src/lib/templates/org-chart-template.ts +++ b/app/src/lib/templates/org-chart-template.ts @@ -1,21 +1,30 @@ import { FFTheme } from "../FFTheme"; export const content = ` -Saraswati Sharma .size_lg.color_black\n Robert Wilson\n Sarah Thompson\n David Brown\n Jennifer Lee\n Andrew Miller .color_green\n Carrie Richards .color_green\n Terry Peralta .color_green\n Lisa Anderson .color_purple\n Camille Mitchell .color_purple\n Christopher White .color_purple\n +Sarah Chen .size_lg.color_black + Robert Wilson .color_blue + David Brown + Jennifer Lee + Andrew Miller .color_green + Carrie Richards .color_green + Terry Peralta .color_green + Lisa Anderson .color_purple + Camille Mitchell .color_purple + Christopher White .color_purple `; export const theme: FFTheme = { layoutName: "dagre", direction: "DOWN", - spacingFactor: 0.96, + spacingFactor: 1.15, lineHeight: 1.4, shape: "roundrectangle", background: "#ffffff", textMaxWidth: 142, padding: 16, - fontFamily: "Overpass", + fontFamily: "IBM Plex Sans", curveStyle: "round-taxi", - textMarginY: 2.5, + textMarginY: 1, borderWidth: 2, edgeTextSize: 1, edgeWidth: 2, @@ -23,15 +32,69 @@ export const theme: FFTheme = { fixedHeight: 60, sourceArrowShape: "none", targetArrowShape: "none", - edgeColor: "#b6b6b6", - borderColor: "#dadada", - nodeBackground: "#f4f4f4", - nodeForeground: "#2a2a2a", + edgeColor: "#94a3b8", + borderColor: "#cbd5e1", + nodeBackground: "#ffffff", + nodeForeground: "#1e293b", sourceDistanceFromNode: 0, targetDistanceFromNode: 0, arrowScale: 1, rotateEdgeLabel: false, }; -export const cytoscapeStyle = - "edge {taxi-radius: 40px;}\n\n$red: #ffd1cb;\n$orange: #ff8e16;\n$yellow: #fff7d5;\n$green: #bcfcff;\n$blue: #c1e1f8;\n$pink: #ffe7f7;\n$purple: #eec6ff;\n$grey: #cacaca;\n\n:childless {\n font-weight: 300;\n}\n\n:childless.color_red {\n background-color: $red;\n border-color: #b38d88;\n}\n:childless.color_yellow {\n background-color: $yellow;\n border-color: #c8bd84;\n}\n:childless.color_green {\n background-color: $green;\n border-color: #60c8bd;\n}\n:childless.color_blue {\n background-color: $blue;\n border-color: #89add1;\n}\n:childless.color_purple {\n background-color: $purple;\n border-color: #aa82ba;\n}\n:childless.color_pink {\n background-color: $pink;\n border-color: #c5aacf;\n}\n:childless.color_black {\n background-color: black;\n border-color: black;\n color: white;\n}\n\n:childless.size_lg {\n font-size: 24;\n padding: 18;\n width: 250;\n text-max-width: 218;\n text-margin-y: 3;\n}"; +export const cytoscapeStyle = ` +edge { + taxi-radius: 40px; +} + +$red: #fecaca; +$orange: #fed7aa; +$yellow: #fef08a; +$green: #bbf7d0; +$blue: #bfdbfe; +$purple: #ddd6fe; +$grey: #f1f5f9; + +:childless { + font-weight: 400; + text-outline-width: 0; + text-outline-color: transparent; + shadow-blur: 4; + shadow-color: #0000000d; + shadow-offset-x: 0; + shadow-offset-y: 2; +} + +:childless.color_red { + background-color: $red; + border-color: #dc2626; +} +:childless.color_yellow { + background-color: $yellow; + border-color: #ca8a04; +} +:childless.color_green { + background-color: $green; + border-color: #16a34a; +} +:childless.color_blue { + background-color: $blue; + border-color: #2563eb; +} +:childless.color_purple { + background-color: $purple; + border-color: #7c3aed; +} +:childless.color_black { + background-color: black; + border-color: black; + color: white; +} + +:childless.size_lg { + font-size: 24; + padding: 18; + width: 250; + text-max-width: 218; + text-margin-y: 2; +}`; diff --git a/app/src/lib/templates/process-flow-template.ts b/app/src/lib/templates/process-flow-template.ts index 032275bbd..abadb9f89 100644 --- a/app/src/lib/templates/process-flow-template.ts +++ b/app/src/lib/templates/process-flow-template.ts @@ -1,47 +1,40 @@ import { FFTheme } from "../FFTheme"; export const content = ` -Start Process - Step 1: Initial Assessment - Decision Point - Yes: Proceed to Step 2 - Step 2: Detailed Analysis - Review Documentation [href="https://docs.example.com"] - Conduct Analysis - Generate Report - Share Results [href="https://results.example.com"] - No: Request More Information - Contact Client [href="mailto:client@example.com"] - (Initial Assessment) - Step 3: Final Decision - Approve: Complete Process - Reject: Provide Feedback - (Start Process) +Decision Point .color_blue + Yes: Review Documentation [href="https://docs.example.com"] + Complete Process .color_green + Yes: Conduct Analysis + (Complete Process) + No: Request More Information + Provide Feedback .color_red + No: Contact Client [href="mailto:client@example.com"] + (Provide Feedback) `; export const theme: FFTheme = { - layoutName: "dagre", - direction: "DOWN", - spacingFactor: 1.1, + layoutName: "layered", + direction: "RIGHT", + spacingFactor: 1.4, - background: "#fbfbfb", - fontFamily: "Inter", + background: "#ffffff", + fontFamily: "IBM Plex Sans", shape: "roundrectangle", - nodeBackground: "#e6e6e6", - nodeForeground: "#333333", - padding: 15, - borderWidth: 0, - borderColor: "#cccccc", - textMaxWidth: 150, - lineHeight: 1.3, - textMarginY: 0, - useFixedHeight: false, - fixedHeight: 60, + nodeBackground: "#ffffff", + nodeForeground: "#2d3748", + padding: 18, + borderWidth: 2, + borderColor: "#475569", + textMaxWidth: 120, + lineHeight: 1.4, + textMarginY: 1, + useFixedHeight: true, + fixedHeight: 50, curveStyle: "bezier", edgeWidth: 2, - edgeColor: "#888888", + edgeColor: "#475569", sourceArrowShape: "none", targetArrowShape: "triangle", sourceDistanceFromNode: 0, @@ -51,40 +44,64 @@ export const theme: FFTheme = { rotateEdgeLabel: false, }; -export const cytoscapeStyle = `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap'); +export const cytoscapeStyle = ` +$red: #f43f5e; +$orange: #fb923c; +$yellow: #facc15; +$green: #4ade80; +$blue: #3b82f6; +$purple: #a78bfa; +$grey: #f1f5f9; +$border: #052e16; :childless { - font-weight: bold; + font-weight: 500; } /** Start */ :childless[in_degree < 1][out_degree > 0] { - background-color: #50c878; - border-color: #3da75d; + background-color: $green; + color: $border; } -/** Decision Point */ -:childless[out_degree > 1] { - shape: diamond; - background-color: #ffa500; - height: $width; - text-margin-y: 2; - border-color: #cc8400; +/** Links */ +:childless[href] { + background-color: $grey; +} + +/** Colors **/ +:childless.color_green { + background-color: $green; + color: $border; } -/** Terminal */ -:childless[out_degree < 1][in_degree > 0] { - background-color: #ff6347; +:childless.color_red { + background-color: $red; color: white; - border-color: #e74c3c; } -/** Links */ -:childless[href] { - background-color: #4a90e2; +:childless.color_orange { + background-color: $orange; + color: white; +} + +:childless.color_yellow { + background-color: $yellow; + color: $border; +} + +:childless.color_purple { + background-color: $purple; + color: white; +} + +:childless.color_blue { + background-color: $blue; color: white; - text-decoration: underline; - cursor: pointer; - border-color: #3a7ac5; +} + +:childless.color_grey { + background-color: $grey; + color: $border; } `; diff --git a/app/src/lib/themes/august2023.ts b/app/src/lib/themes/august2023.ts deleted file mode 100644 index c66cac774..000000000 --- a/app/src/lib/themes/august2023.ts +++ /dev/null @@ -1,307 +0,0 @@ -export const cytoscapeStyle = `@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&display=swap"); - -$background: white; -$color: #31405b; -$fontFamily: "IBM Plex Sans", sans-serif; -$red: #e63946; -$orange: #f4a261; -$yellow: #f1fa3b; -$green: #2a9d8f; -$blue: #606ef6; -$purple: #6d4a7c; -$grey: #f2eded; - -edge { - width: 1px; - curve-style: bezier; - target-arrow-shape: triangle; - line-color: black; - source-arrow-color: black; - target-arrow-color: black; - label: data(label); - text-background-color: $background; - text-background-opacity: 1; - text-background-padding: 5; - font-family: $fontFamily; - font-size: 14; - text-wrap: wrap; -} - -:childless[shapeWidth] { - width: data(shapeWidth); -} - -:childless[shapeHeight] { - height: data(shapeHeight); -} - -:childless[textMarginY] { - text-margin-y: data(textMarginY); -} - -:childless[textMarginX] { - text-margin-x: data(textMarginX); -} - -:childless { - label: data(label); - font-family: $fontFamily; - text-wrap: wrap; - text-max-width: 150; - width: 200; - height: 100; - font-size: 16; - text-valign: center; - text-halign: center; - line-height: 1.4; - shape: rectangle; - background-color: $grey; - color: $color; - border-color: $color; - border-width: 2; - border-style: solid; - font-weight: 500; -} - -/** Start */ -:childless[in_degree < 1][out_degree > 0] { - border-width: 0; - shape: roundrectangle; - background-color: $green; - color: white; -} - -/** Terminal */ -:childless[out_degree < 1][in_degree > 0] { - border-width: 0; - shape: roundrectangle; - background-color: $red; - color: white; -} - -/** Branching */ -:childless[in_degree > 0][in_degree < 2][out_degree > 1] { - shape: diamond; - background-color: $blue; - color: white; - height: 200; - border-width: 0; - text-margin-y: 2; -} - -/** Merging **/ -:childless[in_degree > 1][out_degree > 0][out_degree < 2] { -} - -:childless.color_red { - background-color: $red; - color: white; -} -:childless.color_orange { - background-color: $orange; - color: white; -} -:childless.color_yellow { - background-color: $yellow; -} -:childless.color_green { - background-color: $green; - color: white; -} -:childless.color_blue { - background-color: $blue; - color: white; -} -:childless.color_purple { - background-color: $purple; - color: white; -} -:childless.color_grey { - background-color: $grey; -} - -:childless.shape_rectangle { - shape: rectangle; -} -:childless.shape_roundrectangle { - shape: roundrectangle; -} -:childless.shape_ellipse { - shape: ellipse; -} -:childless.shape_triangle { - shape: triangle; -} -:childless.shape_pentagon { - shape: pentagon; -} -:childless.shape_hexagon { - shape: hexagon; -} -:childless.shape_heptagon { - shape: heptagon; -} -:childless.shape_octagon { - shape: octagon; -} -:childless.shape_star { - shape: star; -} -:childless.shape_barrel { - shape: barrel; -} -:childless.shape_diamond { - shape: diamond; -} -:childless.shape_vee { - shape: vee; -} -:childless.shape_rhomboid { - shape: rhomboid; -} -:childless.shape_right-rhomboid { - shape: right-rhomboid; -} -:childless.shape_tag { - shape: tag; -} -:childless.shape_round-rectangle { - shape: round-rectangle; -} -:childless.shape_cut-rectangle { - shape: cut-rectangle; -} -:childless.shape_bottom-round-rectangle { - shape: bottom-round-rectangle; -} -:childless.shape_concave-hexagon { - shape: concave-hexagon; -} -:childless.border_none { - border-width: 0; - border-style: solid; -} -:childless.border_solid { - border-width: 2; - border-style: solid; -} -:childless.border_dashed { - border-width: 2; - border-style: dashed; -} -:childless.border_dotted { - border-width: 2; - border-style: dotted; -} - -:childless[w] { - width: data(w); -} - -:childless[h] { - height: data(h); -} - -edge.line_solid { - line-style: solid; -} -edge.line_dotted { - line-style: dotted; -} -edge.line_dashed { - line-style: dashed; -} -edge.target-arrow_triangle { - target-arrow-shape: triangle; -} -edge.target-arrow_triangle-tee { - target-arrow-shape: triangle-tee; -} -edge.target-arrow_circle-triangle { - target-arrow-shape: circle-triangle; -} -edge.target-arrow_triangle-cross { - target-arrow-shape: triangle-cross; -} -edge.target-arrow_triangle-backcurve { - target-arrow-shape: triangle-backcurve; -} -edge.target-arrow_vee { - target-arrow-shape: vee; -} -edge.target-arrow_tee { - target-arrow-shape: tee; -} -edge.target-arrow_square { - target-arrow-shape: square; -} -edge.target-arrow_circle { - target-arrow-shape: circle; -} -edge.target-arrow_diamond { - target-arrow-shape: diamond; -} -edge.target-arrow_chevron { - target-arrow-shape: chevron; -} -edge.target-arrow_none { - target-arrow-shape: none; -} -edge.source-arrow_triangle { - source-arrow-shape: triangle; -} -edge.source-arrow_triangle-tee { - source-arrow-shape: triangle-tee; -} -edge.source-arrow_circle-triangle { - source-arrow-shape: circle-triangle; -} -edge.source-arrow_triangle-cross { - source-arrow-shape: triangle-cross; -} -edge.source-arrow_triangle-backcurve { - source-arrow-shape: triangle-backcurve; -} -edge.source-arrow_vee { - source-arrow-shape: vee; -} -edge.source-arrow_tee { - source-arrow-shape: tee; -} -edge.source-arrow_square { - source-arrow-shape: square; -} -edge.source-arrow_circle { - source-arrow-shape: circle; -} -edge.source-arrow_diamond { - source-arrow-shape: diamond; -} -edge.source-arrow_chevron { - source-arrow-shape: chevron; -} -edge.source-arrow_none { - source-arrow-shape: none; -} - -:parent { - padding: 10; - border-style: solid; - border-width: 2; - border-color: $color; - background-color: $background; - text-valign: top; - font-family: $fontFamily; - label: data(label); - color: $color; - font-size: 19.5px; - text-margin-y: -5; -} - -:parent.color_white { - background-color: white; -} -:parent.color_grey { - background-color: $grey; -} -`; diff --git a/app/src/lib/themes/constants.ts b/app/src/lib/themes/constants.ts deleted file mode 100644 index 22721d8d6..000000000 --- a/app/src/lib/themes/constants.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { StylesheetStyle } from "cytoscape"; - -export type Theme = { - font: { - files?: { name: string; url: string; unicodeRange?: string }[]; - fontFamily: string; - lineHeight: number; - fontSize: number; - }; - value: string; - bg: string; - /** Used to override container titles */ - fg: string; - /** Used if regular bg can't be rendered to SVG */ - safeBg?: string; - minWidth?: number; - minHeight?: number; - colors: Record; - styles: StylesheetStyle[]; -}; - -export const defaultFontSize = 10; diff --git a/app/src/lib/themes/excalidraw.ts b/app/src/lib/themes/excalidraw.ts deleted file mode 100644 index a76c97c0b..000000000 --- a/app/src/lib/themes/excalidraw.ts +++ /dev/null @@ -1,433 +0,0 @@ -import { StylesheetStyle } from "cytoscape"; - -import { defaultFontSize, Theme } from "./constants"; - -const colors = { - red: "#F84A4B", - orange: "#FC7427", - blue: "#4363ED", - black: "#000000", - white: "#ffffff", - green: "#3BB755", - yellow: "#f9dc46", - gray: "#C7CED4", - purple: "#6D47EA", -}; - -const fontFamily = '"Virgil3YOFF"'; -const backgroundColor = colors.white; -const arrowColor = colors.gray; -const lineHeight = 1.3; -const padding = "2px"; - -const excalidraw: Theme = { - font: { - fontFamily, - fontSize: defaultFontSize, - files: [{ url: "Virgil3YOFF.woff2", name: "Virgil3YOFF" }], - lineHeight: lineHeight, - }, - value: "excalidraw", - bg: backgroundColor, - fg: colors.black, - safeBg: backgroundColor, - minWidth: 0, - minHeight: 0, - colors, - styles: [ - { - selector: "node[label!='']", - style: { - width: "data(shapeWidth)", - height: "data(shapeHeight)", - "text-margin-y": "data(textMarginY)" as any, - "text-margin-x": "data(textMarginX)" as any, - }, - }, - { - selector: "node", - style: { - "font-family": fontFamily, - label: "data(label)", - "text-valign": "center", - "text-halign": "center", - "text-wrap": "wrap", - "text-max-width": "data(width)", - color: colors.black, - shape: "rectangle", - backgroundColor: backgroundColor, - "background-opacity": 0, - "padding-left": padding, - "padding-right": padding, - "padding-top": padding, - "padding-bottom": padding, - "line-height": lineHeight, - }, - }, - { - selector: "edge", - style: { - "curve-style": "bezier", - "segment-distances": "60", - "edge-distances": "intersection", - width: 1.3, - "line-color": arrowColor, - "line-style": "solid", - label: "data(label)", - color: colors.black, - "text-wrap": "wrap", - "font-family": fontFamily, - "source-distance-from-node": 4, - "target-distance-from-node": 4, - // @ts-ignore - "text-rotation": "-15deg", - "target-arrow-shape": "triangle-backcurve", - "target-arrow-color": arrowColor, - "source-arrow-color": arrowColor, - "arrow-scale": 1, - }, - }, - { - selector: ":parent", - style: { - "text-valign": "top", - "text-halign": "center", - // @ts-ignore - "text-margin-y": `-${padding}`, - "text-wrap": "none", - }, - }, - ...Object.entries(colors).map(([color, value]) => ({ - selector: `.${color}`, - style: { - "background-color": `${value}`, - "background-opacity": 1, - color: ["purple", "blue", "red", "green", "black", "orange"].includes( - color - ) - ? colors.white - : colors.black, - }, - })), - ], -}; - -export default excalidraw; - -export const background = "#ffffff"; -export const cytoscapeStyle = `@import url("/fonts/Virgil3YOFF.css"); - -$background: #ffffff; - -node { - font-size: 10px; - font-family: "Virgil3YOFF"; - label: data(label); - text-valign: center; - text-halign: center; - text-wrap: wrap; - text-max-width: data(width); - color: rgb(0, 0, 0); - shape: rectangle; - background-color: rgb(255, 255, 255); - background-opacity: 0; - padding: 2px; - line-height: 1.3; -} -:parent { - shape: rectangle; - padding: 10px; - border-width: 1px; - text-valign: top; - text-halign: center; - text-margin-y: -2px; - text-wrap: none; - color: rgb(0, 0, 0); -} -edge { - width: 1.3px; - font-size: 10px; - curve-style: bezier; - segment-distances: 60px; - edge-distances: intersection; - line-color: rgb(199, 206, 212); - line-style: solid; - label: data(label); - color: rgb(0, 0, 0); - text-wrap: wrap; - font-family: "Virgil3YOFF"; - source-distance-from-node: 4px; - target-distance-from-node: 4px; - text-rotation: -15deg; - target-arrow-shape: triangle-backcurve; - target-arrow-color: rgb(199, 206, 212); - source-arrow-color: rgb(199, 206, 212); - arrow-scale: 1; - text-background-color: $background; -} -:loop { - curve-style: bezier; -} -edge:compound { - curve-style: bezier; - source-endpoint: outside-to-line; - target-endpoint: outside-to-line; -} -:selected { - background-color: rgb(1, 105, 217); - line-color: rgb(1, 105, 217); - source-arrow-color: rgb(1, 105, 217); - mid-source-arrow-color: rgb(1, 105, 217); - target-arrow-color: rgb(1, 105, 217); - mid-target-arrow-color: rgb(1, 105, 217); -} -:parent:selected { - background-color: rgb(204, 225, 249); - border-color: rgb(174, 200, 229); -} -:active { - overlay-padding: 10px; - overlay-color: rgb(0, 0, 0); - overlay-opacity: 0.25; -} -.nodeHovered, -.edgeHovered, -node:selected { - underlay-opacity: 0.1; - underlay-color: rgb(0, 0, 0); - underlay-padding: 5px; -} -:childless[label!=""] { - width: data(shapeWidth); - height: data(shapeHeight); - text-margin-y: data(textMarginY); - text-margin-x: data(textMarginX); -} -.red { - background-color: rgb(248, 74, 75); - background-opacity: 1; - color: rgb(255, 255, 255); -} -.orange { - background-color: rgb(252, 116, 39); - background-opacity: 1; - color: rgb(255, 255, 255); -} -.blue { - background-color: rgb(67, 99, 237); - background-opacity: 1; - color: rgb(255, 255, 255); -} -.black { - background-color: rgb(0, 0, 0); - background-opacity: 1; - color: rgb(255, 255, 255); -} -.white { - background-color: rgb(255, 255, 255); - background-opacity: 1; - color: rgb(0, 0, 0); -} -.green { - background-color: rgb(42, 75, 49); - background-opacity: 1; - color: rgb(255, 255, 255); -} -.yellow { - background-color: rgb(249, 220, 70); - background-opacity: 1; - color: rgb(0, 0, 0); -} -.gray { - background-color: rgb(199, 206, 212); - background-opacity: 1; - color: rgb(0, 0, 0); -} -.purple { - background-color: rgb(109, 71, 234); - background-opacity: 1; - color: rgb(255, 255, 255); -} -.rectangle { - shape: rectangle; -} -.roundrectangle { - shape: roundrectangle; -} -.ellipse { - shape: ellipse; -} -.triangle { - shape: triangle; -} -.pentagon { - shape: pentagon; -} -.hexagon { - shape: hexagon; -} -.heptagon { - shape: heptagon; -} -.octagon { - shape: octagon; -} -.star { - shape: star; -} -.barrel { - shape: barrel; -} -.diamond { - shape: diamond; -} -.vee { - shape: vee; -} -.rhomboid { - shape: rhomboid; -} -.right-rhomboid { - shape: right-rhomboid; -} -.polygon { - shape: polygon; -} -.tag { - shape: tag; -} -.round-rectangle { - shape: round-rectangle; -} -.cut-rectangle { - shape: cut-rectangle; -} -.bottom-round-rectangle { - shape: bottom-round-rectangle; -} -.concave-hexagon { - shape: concave-hexagon; -} -.circle { - shape: ellipse; - height: data(width); -} -edge.dashed { - line-style: dashed; -} -edge.dotted { - line-style: dotted; -} -edge.solid { - line-style: solid; -} -edge.source-triangle { - source-arrow-shape: triangle; -} -edge.target-triangle { - target-arrow-shape: triangle; -} -edge.source-triangle-tee { - source-arrow-shape: triangle-tee; -} -edge.target-triangle-tee { - target-arrow-shape: triangle-tee; -} -edge.source-circle-triangle { - source-arrow-shape: circle-triangle; -} -edge.target-circle-triangle { - target-arrow-shape: circle-triangle; -} -edge.source-triangle-cross { - source-arrow-shape: triangle-cross; -} -edge.target-triangle-cross { - target-arrow-shape: triangle-cross; -} -edge.source-triangle-backcurve { - source-arrow-shape: triangle-backcurve; -} -edge.target-triangle-backcurve { - target-arrow-shape: triangle-backcurve; -} -edge.source-vee { - source-arrow-shape: vee; -} -edge.target-vee { - target-arrow-shape: vee; -} -edge.source-tee { - source-arrow-shape: tee; -} -edge.target-tee { - target-arrow-shape: tee; -} -edge.source-square { - source-arrow-shape: square; -} -edge.target-square { - target-arrow-shape: square; -} -edge.source-circle { - source-arrow-shape: circle; -} -edge.target-circle { - target-arrow-shape: circle; -} -edge.source-diamond { - source-arrow-shape: diamond; -} -edge.target-diamond { - target-arrow-shape: diamond; -} -edge.source-chevron { - source-arrow-shape: chevron; -} -edge.target-chevron { - target-arrow-shape: chevron; -} -edge.source-none { - source-arrow-shape: none; -} -edge.target-none { - target-arrow-shape: none; -} -node.border-solid { - border-style: solid; -} -node.border-dashed { - border-style: dashed; -} -node.border-dotted { - border-style: dotted; -} -node.border-double { - border-style: double; -} -node.border-none { - border-width: 0px; -} -.text-sm { - font-size: 7.5px; -} -.text-lg { - font-size: 15px; -} -.text-xl { - font-size: 20px; -} -node[w] { - width: data(w); -} -node[h] { - height: data(h); -} -node[src] { - background-image: data(src); - background-fit: cover; - border-width: 0px; - text-valign: bottom; - text-margin-y: 5px; -} -`; diff --git a/app/src/lib/themes/original-dark.ts b/app/src/lib/themes/original-dark.ts deleted file mode 100644 index 01c16ffa2..000000000 --- a/app/src/lib/themes/original-dark.ts +++ /dev/null @@ -1,457 +0,0 @@ -import { StylesheetStyle } from "cytoscape"; - -import { defaultFontSize, Theme } from "./constants"; - -const colors = { - black: "#101010", - white: "#fafaf3", - green: "#01d857", - yellow: "#ffcf0d", - blue: "#6172F9", - orange: "#ff7044", - purple: "#a492ff", - red: "#fa2323", - gray: "#aaaaaa", -}; - -const fontFamily = "Porpora"; -const backgroundColor = colors.black; -const color = colors.white; -const arrowColor = color; -const lineHeight = 1.25; -const padding = "5px"; - -const borderWidth = 1.111; -const arrowWidth = borderWidth; -const originalDark: Theme = { - value: "original-dark", - bg: backgroundColor, - fg: color, - minHeight: 4, - minWidth: 4, - font: { - fontFamily, - fontSize: defaultFontSize, - lineHeight, - files: [ - { - name: fontFamily, - url: "Porpora-Regular.woff2", - }, - ], - }, - colors, - styles: [ - { - selector: "node[label!='']", - style: { - width: "data(shapeWidth)", - height: "data(shapeHeight)", - "text-margin-y": "data(textMarginY)" as any, - "text-margin-x": "data(textMarginX)" as any, - }, - }, - { - selector: "node", - style: { - "font-family": fontFamily, - backgroundColor: backgroundColor, - "border-color": arrowColor, - color: color, - label: "data(label)", - "text-wrap": "wrap", - "text-max-width": "data(width)", - "text-valign": "center", - "text-halign": "center", - "border-width": borderWidth, - shape: "rectangle", - "padding-left": padding, - "padding-right": padding, - "padding-top": padding, - "padding-bottom": padding, - "line-height": lineHeight, - }, - }, - { - selector: "edge", - style: { - "font-family": fontFamily, - "loop-direction": "0deg", - "loop-sweep": "20deg", - width: arrowWidth, - "text-background-opacity": 1, - "text-background-color": backgroundColor, - "text-background-shape": "rectangle", - "text-background-padding": "4px", - "line-color": arrowColor, - color: arrowColor, - "target-arrow-color": arrowColor, - "source-arrow-color": arrowColor, - "target-arrow-shape": "triangle", - "curve-style": "bezier", - label: "data(label)", - "text-valign": "center", - "arrow-scale": 1, - "text-wrap": "wrap", - "text-halign": "center", - "text-rotation": "autorotate", - "target-distance-from-node": 2, - "source-distance-from-node": 2, - }, - }, - { - selector: ":parent", - style: { - "text-valign": "top", - "text-halign": "center", - // @ts-ignore - "text-margin-y": `-${padding}`, - "text-wrap": "none", - }, - }, - ...Object.entries(colors).map(([color, value]) => ({ - selector: `node.${color}`, - style: { - "background-color": `${value}`, - "background-opacity": 1, - "border-color": `${value}`, - color: ["blue", "black"].includes(color) ? colors.white : colors.black, - }, - })), - ], -}; - -export default originalDark; - -export const background = backgroundColor; -export const cytoscapeStyle = `@import url("/fonts/Porpora.css"); - -$background: #101010; - -node { - font-size: 10px; - font-family: Porpora; - background-color: rgb(16, 16, 16); - border-color: rgb(250, 250, 243); - color: rgb(250, 250, 243); - label: data(label); - text-wrap: wrap; - text-max-width: data(width); - text-valign: center; - text-halign: center; - border-width: 1.111px; - shape: rectangle; - padding: 5px; - line-height: 1.25; -} -:parent { - shape: rectangle; - padding: 10px; - border-width: 1px; - text-valign: top; - text-halign: center; - text-margin-y: -5px; - text-wrap: none; - color: rgb(250, 250, 243); -} -edge { - width: 1.111px; - font-size: 10px; - font-family: Porpora; - loop-direction: 0deg; - loop-sweep: 20deg; - text-background-opacity: 1; - text-background-color: $background; - text-background-shape: rectangle; - text-background-padding: 4px; - line-color: rgb(250, 250, 243); - color: rgb(250, 250, 243); - target-arrow-color: rgb(250, 250, 243); - source-arrow-color: rgb(250, 250, 243); - target-arrow-shape: triangle; - curve-style: bezier; - label: data(label); - text-valign: center; - arrow-scale: 1; - text-wrap: wrap; - text-halign: center; - text-rotation: autorotate; - target-distance-from-node: 2px; - source-distance-from-node: 2px; -} -:loop { - curve-style: bezier; -} -edge:compound { - curve-style: bezier; - source-endpoint: outside-to-line; - target-endpoint: outside-to-line; -} -:selected { - background-color: rgb(1, 105, 217); - line-color: rgb(1, 105, 217); - source-arrow-color: rgb(1, 105, 217); - mid-source-arrow-color: rgb(1, 105, 217); - target-arrow-color: rgb(1, 105, 217); - mid-target-arrow-color: rgb(1, 105, 217); -} -:parent:selected { - background-color: rgb(204, 225, 249); - border-color: rgb(174, 200, 229); -} -:active { - overlay-padding: 10px; - overlay-color: rgb(0, 0, 0); - overlay-opacity: 0.25; -} -.nodeHovered, -.edgeHovered, -node:selected { - underlay-opacity: 0.1; - underlay-color: rgb(0, 0, 0); - underlay-padding: 5px; -} - -:childless[label!=""] { - width: data(shapeWidth); - height: data(shapeHeight); - text-margin-y: data(textMarginY); - text-margin-x: data(textMarginX); -} -node.black { - background-color: rgb(16, 16, 16); - background-opacity: 1; - border-color: rgb(16, 16, 16); - color: rgb(250, 250, 243); -} -node.white { - background-color: rgb(250, 250, 243); - background-opacity: 1; - border-color: rgb(250, 250, 243); - color: rgb(16, 16, 16); -} -node.green { - background-color: rgb(1, 216, 87); - background-opacity: 1; - border-color: rgb(1, 216, 87); - color: rgb(16, 16, 16); -} -node.yellow { - background-color: rgb(255, 207, 13); - background-opacity: 1; - border-color: rgb(255, 207, 13); - color: rgb(16, 16, 16); -} -node.blue { - background-color: rgb(97, 114, 249); - background-opacity: 1; - border-color: rgb(97, 114, 249); - color: rgb(250, 250, 243); -} -node.orange { - background-color: rgb(255, 112, 68); - background-opacity: 1; - border-color: rgb(255, 112, 68); - color: rgb(16, 16, 16); -} -node.purple { - background-color: rgb(164, 146, 255); - background-opacity: 1; - border-color: rgb(164, 146, 255); - color: rgb(16, 16, 16); -} -node.red { - background-color: rgb(250, 35, 35); - background-opacity: 1; - border-color: rgb(250, 35, 35); - color: rgb(16, 16, 16); -} -node.gray { - background-color: rgb(170, 170, 170); - background-opacity: 1; - border-color: rgb(170, 170, 170); - color: rgb(16, 16, 16); -} -.rectangle { - shape: rectangle; -} -.roundrectangle { - shape: roundrectangle; -} -.ellipse { - shape: ellipse; -} -.triangle { - shape: triangle; -} -.pentagon { - shape: pentagon; -} -.hexagon { - shape: hexagon; -} -.heptagon { - shape: heptagon; -} -.octagon { - shape: octagon; -} -.star { - shape: star; -} -.barrel { - shape: barrel; -} -.diamond { - shape: diamond; -} -.vee { - shape: vee; -} -.rhomboid { - shape: rhomboid; -} -.right-rhomboid { - shape: right-rhomboid; -} -.polygon { - shape: polygon; -} -.tag { - shape: tag; -} -.round-rectangle { - shape: round-rectangle; -} -.cut-rectangle { - shape: cut-rectangle; -} -.bottom-round-rectangle { - shape: bottom-round-rectangle; -} -.concave-hexagon { - shape: concave-hexagon; -} -.circle { - shape: ellipse; - height: data(width); -} -edge.dashed { - line-style: dashed; -} -edge.dotted { - line-style: dotted; -} -edge.solid { - line-style: solid; -} -edge.source-triangle { - source-arrow-shape: triangle; -} -edge.target-triangle { - target-arrow-shape: triangle; -} -edge.source-triangle-tee { - source-arrow-shape: triangle-tee; -} -edge.target-triangle-tee { - target-arrow-shape: triangle-tee; -} -edge.source-circle-triangle { - source-arrow-shape: circle-triangle; -} -edge.target-circle-triangle { - target-arrow-shape: circle-triangle; -} -edge.source-triangle-cross { - source-arrow-shape: triangle-cross; -} -edge.target-triangle-cross { - target-arrow-shape: triangle-cross; -} -edge.source-triangle-backcurve { - source-arrow-shape: triangle-backcurve; -} -edge.target-triangle-backcurve { - target-arrow-shape: triangle-backcurve; -} -edge.source-vee { - source-arrow-shape: vee; -} -edge.target-vee { - target-arrow-shape: vee; -} -edge.source-tee { - source-arrow-shape: tee; -} -edge.target-tee { - target-arrow-shape: tee; -} -edge.source-square { - source-arrow-shape: square; -} -edge.target-square { - target-arrow-shape: square; -} -edge.source-circle { - source-arrow-shape: circle; -} -edge.target-circle { - target-arrow-shape: circle; -} -edge.source-diamond { - source-arrow-shape: diamond; -} -edge.target-diamond { - target-arrow-shape: diamond; -} -edge.source-chevron { - source-arrow-shape: chevron; -} -edge.target-chevron { - target-arrow-shape: chevron; -} -edge.source-none { - source-arrow-shape: none; -} -edge.target-none { - target-arrow-shape: none; -} -node.border-solid { - border-style: solid; -} -node.border-dashed { - border-style: dashed; -} -node.border-dotted { - border-style: dotted; -} -node.border-double { - border-style: double; -} -node.border-none { - border-width: 0px; -} -.text-sm { - font-size: 7.5px; -} -.text-lg { - font-size: 15px; -} -.text-xl { - font-size: 20px; -} -node[w] { - width: data(w); -} -node[h] { - height: data(h); -} -node[src] { - background-image: data(src); - background-fit: cover; - border-width: 0px; - text-valign: bottom; - text-margin-y: 5px; -} -`; diff --git a/app/src/lib/themes/original.ts b/app/src/lib/themes/original.ts deleted file mode 100644 index d8353c2a9..000000000 --- a/app/src/lib/themes/original.ts +++ /dev/null @@ -1,471 +0,0 @@ -import { StylesheetStyle } from "cytoscape"; - -import { defaultFontSize, Theme } from "./constants"; - -export const colors = { - black: "#000000", - white: "#ffffff", - green: "#01d857", - yellow: "#ffcf0d", - blue: "#6172F9", - orange: "#ff7044", - purple: "#a492ff", - red: "#fa2323", - gray: "#aaaaaa", -}; - -const fontFamily = "Karla"; -const backgroundColor = colors.white; -const arrowColor = colors.black; -const lineHeight = 1.25; -const padding = "6px"; -const foregroundColor = colors.black; - -const arrowWidth = 0.75; -const original: Theme = { - value: "original", - bg: backgroundColor, - fg: foregroundColor, - font: { - fontFamily, - fontSize: defaultFontSize, - lineHeight, - files: [{ name: fontFamily, url: "Karla-Regular.woff2" }], - }, - colors, - styles: [ - { - selector: "node[label!='']", - style: { - width: "data(shapeWidth)", - height: "data(shapeHeight)", - "text-margin-y": "data(textMarginY)" as any, - "text-margin-x": "data(textMarginX)" as any, - }, - }, - { - selector: "node", - style: { - "font-family": fontFamily, - backgroundColor, - "border-color": arrowColor, - color: arrowColor, - label: "data(label)", - "text-wrap": "wrap", - "text-max-width": `data(width)`, - "padding-left": padding, - "padding-right": padding, - "padding-top": padding, - "padding-bottom": padding, - "text-valign": "center", - "text-halign": "center", - "border-width": arrowWidth, - shape: "rectangle", - "line-height": lineHeight, - }, - }, - { - selector: "edge", - style: { - "loop-direction": "0deg", - "loop-sweep": "20deg", - width: arrowWidth, - "text-background-opacity": 1, - "text-background-color": backgroundColor, - "text-background-padding": "3px", - "line-color": arrowColor, - "target-arrow-color": arrowColor, - "source-arrow-color": arrowColor, - "target-arrow-shape": "triangle", - "arrow-scale": 1, - "curve-style": "bezier", - label: "data(label)", - color: arrowColor, - "text-valign": "center", - "text-wrap": "wrap", - "font-family": fontFamily, - "text-halign": "center", - // @ts-ignore - "edge-text-rotation": "autorotate", - "target-distance-from-node": 1, - "source-distance-from-node": 0, - }, - }, - { - selector: ":parent", - style: { - "text-valign": "top", - "text-halign": "center", - // @ts-ignore - "text-margin-y": `-${padding}`, - "text-wrap": "none", - }, - }, - ...Object.entries(colors).map(([color, value]) => ({ - selector: `node.${color}`, - style: { - "background-color": `${value}`, - "background-opacity": 1, - "border-color": color === "white" ? `${value}` : colors.black, - color: ["blue", "black"].includes(color) ? colors.white : colors.black, - }, - })), - ], -}; - -export default original; - -export const background = backgroundColor; -export const cytoscapeStyle = ` -/** You can now customize themes using a variant of CSS! -*** We've added comments to this code to help you -*** understand how to customize your theme. */ - -/** Load external fonts */ -@import url("/fonts/Karla.css"); - -/** Use scss-style variables to share colors and other values */ -$fontFamily: Karla; -$background: #ffffff; -$borderWidth: 0.75px; -$borderColor: #000000; -$nodeBackground: #ffffff; -$defaultShape: rectangle; - -/** Style all nodes and containers */ -node { - font-size: 10px; - font-family: $fontFamily; - background-color: $nodeBackground; - border-color: $borderColor; - color: rgb(0, 0, 0); - label: data(label); - text-wrap: wrap; - text-max-width: data(width); - padding: 6px; - text-valign: center; - text-halign: center; - border-width: $borderWidth; - shape: $defaultShape; - line-height: 1.25; -} - -/** Style containers */ -:parent { - shape: rectangle; - padding: 5px; - border-width: $borderWidth; - text-valign: top; - text-halign: center; - text-margin-y: -6px; - text-wrap: none; -} - -/** Style edges */ -edge { - width: $borderWidth; - font-size: 10px; - loop-direction: 0deg; - loop-sweep: 20deg; - text-background-opacity: 1; - text-background-color: $background; - text-background-padding: 3px; - line-color: $borderColor; - target-arrow-color: $borderColor; - source-arrow-color: $borderColor; - target-arrow-shape: triangle; - arrow-scale: 1; - curve-style: bezier; - label: data(label); - color: $borderColor; - text-valign: center; - text-wrap: wrap; - font-family: $fontFamily; - text-halign: center; - text-rotation: autorotate; - target-distance-from-node: 1px; - source-distance-from-node: 0px; -} - -/** Style nodes */ -:childless[label!=""] { - width: data(shapeWidth); - height: data(shapeHeight); -} -:childless[textMarginY] { - text-margin-y: data(textMarginY); -} -:childless[textMarginX] { - text-margin-x: data(textMarginX); -} - -:loop { - curve-style: bezier; -} -edge:compound { - curve-style: bezier; - source-endpoint: outside-to-line; - target-endpoint: outside-to-line; -} -:selected { - background-color: rgb(1, 105, 217); - line-color: rgb(1, 105, 217); - source-arrow-color: rgb(1, 105, 217); - mid-source-arrow-color: rgb(1, 105, 217); - target-arrow-color: rgb(1, 105, 217); - mid-target-arrow-color: rgb(1, 105, 217); -} -:parent:selected { - background-color: rgb(204, 225, 249); - border-color: rgb(174, 200, 229); -} -:active { - overlay-padding: 10px; - overlay-color: rgb(0, 0, 0); - overlay-opacity: 0.25; -} -.nodeHovered, -.edgeHovered, -node:selected { - underlay-opacity: 0.1; - underlay-color: rgb(0, 0, 0); - underlay-padding: 5px; -} - -node.black { - background-color: rgb(0, 0, 0); - background-opacity: 1; - border-color: rgb(0, 0, 0); - color: rgb(255, 255, 255); -} -node.white { - background-color: rgb(255, 255, 255); - background-opacity: 1; - border-color: rgb(255, 255, 255); - color: rgb(0, 0, 0); -} -node.green { - background-color: rgb(1, 216, 87); - background-opacity: 1; - border-color: rgb(0, 0, 0); - color: rgb(0, 0, 0); -} -node.yellow { - background-color: rgb(255, 207, 13); - background-opacity: 1; - border-color: rgb(0, 0, 0); - color: rgb(0, 0, 0); -} -node.blue { - background-color: rgb(97, 114, 249); - background-opacity: 1; - border-color: rgb(0, 0, 0); - color: rgb(255, 255, 255); -} -node.orange { - background-color: rgb(255, 112, 68); - background-opacity: 1; - border-color: rgb(0, 0, 0); - color: rgb(0, 0, 0); -} -node.purple { - background-color: rgb(164, 146, 255); - background-opacity: 1; - border-color: rgb(0, 0, 0); - color: rgb(0, 0, 0); -} -node.red { - background-color: rgb(250, 35, 35); - background-opacity: 1; - border-color: rgb(0, 0, 0); - color: rgb(0, 0, 0); -} -node.gray { - background-color: rgb(170, 170, 170); - background-opacity: 1; - border-color: rgb(0, 0, 0); - color: rgb(0, 0, 0); -} -.rectangle { - shape: rectangle; -} -.roundrectangle { - shape: roundrectangle; -} -.ellipse { - shape: ellipse; -} -.triangle { - shape: triangle; -} -.pentagon { - shape: pentagon; -} -.hexagon { - shape: hexagon; -} -.heptagon { - shape: heptagon; -} -.octagon { - shape: octagon; -} -.star { - shape: star; -} -.barrel { - shape: barrel; -} -.diamond { - shape: diamond; -} -.vee { - shape: vee; -} -.rhomboid { - shape: rhomboid; -} -.right-rhomboid { - shape: right-rhomboid; -} -.polygon { - shape: polygon; -} -.tag { - shape: tag; -} -.round-rectangle { - shape: round-rectangle; -} -.cut-rectangle { - shape: cut-rectangle; -} -.bottom-round-rectangle { - shape: bottom-round-rectangle; -} -.concave-hexagon { - shape: concave-hexagon; -} -.circle { - shape: ellipse; - height: data(width); -} -edge.dashed { - line-style: dashed; -} -edge.dotted { - line-style: dotted; -} -edge.solid { - line-style: solid; -} -edge.source-triangle { - source-arrow-shape: triangle; -} -edge.target-triangle { - target-arrow-shape: triangle; -} -edge.source-triangle-tee { - source-arrow-shape: triangle-tee; -} -edge.target-triangle-tee { - target-arrow-shape: triangle-tee; -} -edge.source-circle-triangle { - source-arrow-shape: circle-triangle; -} -edge.target-circle-triangle { - target-arrow-shape: circle-triangle; -} -edge.source-triangle-cross { - source-arrow-shape: triangle-cross; -} -edge.target-triangle-cross { - target-arrow-shape: triangle-cross; -} -edge.source-triangle-backcurve { - source-arrow-shape: triangle-backcurve; -} -edge.target-triangle-backcurve { - target-arrow-shape: triangle-backcurve; -} -edge.source-vee { - source-arrow-shape: vee; -} -edge.target-vee { - target-arrow-shape: vee; -} -edge.source-tee { - source-arrow-shape: tee; -} -edge.target-tee { - target-arrow-shape: tee; -} -edge.source-square { - source-arrow-shape: square; -} -edge.target-square { - target-arrow-shape: square; -} -edge.source-circle { - source-arrow-shape: circle; -} -edge.target-circle { - target-arrow-shape: circle; -} -edge.source-diamond { - source-arrow-shape: diamond; -} -edge.target-diamond { - target-arrow-shape: diamond; -} -edge.source-chevron { - source-arrow-shape: chevron; -} -edge.target-chevron { - target-arrow-shape: chevron; -} -edge.source-none { - source-arrow-shape: none; -} -edge.target-none { - target-arrow-shape: none; -} -node.border-solid { - border-style: solid; -} -node.border-dashed { - border-style: dashed; -} -node.border-dotted { - border-style: dotted; -} -node.border-double { - border-style: double; -} -node.border-none { - border-width: 0px; -} -.text-sm { - font-size: 7.5px; -} -.text-lg { - font-size: 15px; -} -.text-xl { - font-size: 20px; -} -node[w] { - width: data(w); -} -node[h] { - height: data(h); -} -node[src] { - background-image: data(src); - background-fit: cover; - border-width: 0px; - text-valign: bottom; - text-margin-y: 5px; -} -`; diff --git a/app/src/lib/themes/playbook.ts b/app/src/lib/themes/playbook.ts deleted file mode 100644 index 7ad480765..000000000 --- a/app/src/lib/themes/playbook.ts +++ /dev/null @@ -1,435 +0,0 @@ -import { StylesheetStyle } from "cytoscape"; - -import { defaultFontSize, Theme } from "./constants"; - -const colors = { - black: "#000000", - white: "#ffffff", - green: "#3cae5a", - yellow: "#e3ca0b", - blue: "#3634ba", - orange: "#edae4e", - purple: "#7256f0", - red: "#ef4a33", - gray: "#a3a69d", -}; - -const fontFamily = "Karla"; -const backgroundColor = colors.white; -const nodeBackgroundColor = backgroundColor; -const edgeLabelBackgroundColor = "#EDECF9"; -const arrowColor = colors.blue; -const nodeLabelColor = colors.black; -const arrowLabelColor = colors.black; -const lineHeight = 1.33; -const padding = "0px"; -const arrowWidth = 1; -const distanceFromNode = 5; - -const playbook: Theme = { - value: "playbook", - bg: backgroundColor, - fg: nodeLabelColor, - minWidth: 0, - minHeight: 0, - font: { - fontFamily, - fontSize: defaultFontSize, - lineHeight, - files: [{ name: fontFamily, url: "Karla-Regular.woff2" }], - }, - colors, - styles: [ - { - selector: "node[label!='']", - style: { - width: "data(shapeWidth)", - height: "data(shapeHeight)", - "text-margin-y": "data(textMarginY)" as any, - "text-margin-x": "data(textMarginX)" as any, - }, - }, - { - selector: "node", - style: { - "font-family": fontFamily, - backgroundColor: nodeBackgroundColor, - "border-color": arrowColor, - color: nodeLabelColor, - label: "data(label)", - "text-wrap": "wrap", - "text-max-width": "data(width)", - "text-valign": "center", - shape: "roundrectangle", - "padding-left": padding, - "padding-right": padding, - "padding-top": padding, - "padding-bottom": padding, - "line-height": lineHeight, - }, - }, - { - selector: "edge", - style: { - "curve-style": "bezier", - "edge-distances": "intersection", - "control-point-distances": "-45", - width: arrowWidth, - "line-color": arrowColor, - label: "data(label)", - color: arrowLabelColor, - "text-valign": "bottom", - "text-wrap": "wrap", - "font-family": fontFamily, - "text-background-opacity": 1, - "text-background-color": edgeLabelBackgroundColor, - "text-background-padding": "4.5px", - "text-border-opacity": 1, - "text-background-shape": "roundrectangle", - // @ts-ignore - "edge-text-rotation": "autorotate", - "source-distance-from-node": distanceFromNode, - "target-distance-from-node": distanceFromNode, - "target-arrow-shape": "triangle", - "target-arrow-color": arrowColor, - "source-arrow-color": arrowColor, - "arrow-scale": 0.45, - ghost: "yes", - "ghost-offset-x": 0.5, - "ghost-offset-y": 1, - "ghost-opacity": 0.1, - }, - }, - { - selector: ":parent", - style: { - "text-valign": "top", - "text-halign": "center", - // @ts-ignore - "text-margin-y": `-6px`, - "text-wrap": "none", - padding: "6px", - }, - }, - ...Object.entries(colors).map(([color, value]) => ({ - selector: `node.${color}`, - style: { - color: `${value}`, - ...(color === "white" - ? { - "background-color": colors.blue, - } - : {}), - }, - })), - ], -}; - -export default playbook; - -export const background = backgroundColor; -export const cytoscapeStyle = `@import url("/fonts/Karla.css"); - -$background: ${backgroundColor}; - -node { - font-size: 10px; - font-family: Karla; - background-color: rgb(255, 255, 255); - border-color: rgb(54, 52, 186); - color: rgb(0, 0, 0); - label: data(label); - text-wrap: wrap; - text-max-width: data(width); - text-valign: center; - shape: roundrectangle; - padding: 0px; - line-height: 1.33; -} -:parent { - shape: rectangle; - padding: 6px; - border-color: rgb(54, 52, 186); - text-valign: top; - text-halign: center; - text-margin-y: -6px; - text-wrap: none; -} -edge { - width: 1px; - font-size: 10px; - curve-style: bezier; - edge-distances: intersection; - control-point-distances: -45px; - line-color: rgb(54, 52, 186); - label: data(label); - color: rgb(0, 0, 0); - text-valign: bottom; - text-wrap: wrap; - font-family: Karla; - text-background-opacity: 1; - text-background-color: rgb(255, 255, 255); - text-background-padding: 4.5px; - text-border-opacity: 1; - text-background-shape: roundrectangle; - text-rotation: autorotate; - source-distance-from-node: 5px; - target-distance-from-node: 5px; - target-arrow-shape: triangle; - target-arrow-color: rgb(54, 52, 186); - source-arrow-color: rgb(54, 52, 186); - arrow-scale: 0.45; - ghost: yes; - ghost-offset-x: 0.5px; - ghost-offset-y: 1px; - ghost-opacity: 0.1; -} -:loop { - curve-style: bezier; -} -edge:compound { - curve-style: bezier; - source-endpoint: outside-to-line; - target-endpoint: outside-to-line; -} -:selected { - background-color: rgb(1, 105, 217); - line-color: rgb(1, 105, 217); - source-arrow-color: rgb(1, 105, 217); - mid-source-arrow-color: rgb(1, 105, 217); - target-arrow-color: rgb(1, 105, 217); - mid-target-arrow-color: rgb(1, 105, 217); -} -:parent:selected { - background-color: rgb(204, 225, 249); - border-color: rgb(174, 200, 229); -} -:active { - overlay-padding: 10px; - overlay-color: rgb(0, 0, 0); - overlay-opacity: 0.25; -} -.nodeHovered, -.edgeHovered, -node:selected { - underlay-opacity: 0.1; - underlay-color: rgb(0, 0, 0); - underlay-padding: 5px; -} -:childless[label!=""] { - width: data(shapeWidth); - height: data(shapeHeight); - text-margin-y: data(textMarginY); - text-margin-x: data(textMarginX); -} -node.black { - color: rgb(0, 0, 0); -} -node.white { - color: rgb(255, 255, 255); - background-color: rgb(54, 52, 186); -} -node.green { - color: rgb(60, 174, 90); -} -node.yellow { - color: rgb(227, 202, 11); -} -node.blue { - color: rgb(54, 52, 186); -} -node.orange { - color: rgb(237, 174, 78); -} -node.purple { - color: rgb(114, 86, 240); -} -node.red { - color: rgb(239, 74, 51); -} -node.gray { - color: rgb(163, 166, 157); -} -.rectangle { - shape: rectangle; -} -.roundrectangle { - shape: roundrectangle; -} -.ellipse { - shape: ellipse; -} -.triangle { - shape: triangle; -} -.pentagon { - shape: pentagon; -} -.hexagon { - shape: hexagon; -} -.heptagon { - shape: heptagon; -} -.octagon { - shape: octagon; -} -.star { - shape: star; -} -.barrel { - shape: barrel; -} -.diamond { - shape: diamond; -} -.vee { - shape: vee; -} -.rhomboid { - shape: rhomboid; -} -.right-rhomboid { - shape: right-rhomboid; -} -.polygon { - shape: polygon; -} -.tag { - shape: tag; -} -.round-rectangle { - shape: round-rectangle; -} -.cut-rectangle { - shape: cut-rectangle; -} -.bottom-round-rectangle { - shape: bottom-round-rectangle; -} -.concave-hexagon { - shape: concave-hexagon; -} -.circle { - shape: ellipse; - height: data(width); -} -edge.dashed { - line-style: dashed; -} -edge.dotted { - line-style: dotted; -} -edge.solid { - line-style: solid; -} -edge.source-triangle { - source-arrow-shape: triangle; -} -edge.target-triangle { - target-arrow-shape: triangle; -} -edge.source-triangle-tee { - source-arrow-shape: triangle-tee; -} -edge.target-triangle-tee { - target-arrow-shape: triangle-tee; -} -edge.source-circle-triangle { - source-arrow-shape: circle-triangle; -} -edge.target-circle-triangle { - target-arrow-shape: circle-triangle; -} -edge.source-triangle-cross { - source-arrow-shape: triangle-cross; -} -edge.target-triangle-cross { - target-arrow-shape: triangle-cross; -} -edge.source-triangle-backcurve { - source-arrow-shape: triangle-backcurve; -} -edge.target-triangle-backcurve { - target-arrow-shape: triangle-backcurve; -} -edge.source-vee { - source-arrow-shape: vee; -} -edge.target-vee { - target-arrow-shape: vee; -} -edge.source-tee { - source-arrow-shape: tee; -} -edge.target-tee { - target-arrow-shape: tee; -} -edge.source-square { - source-arrow-shape: square; -} -edge.target-square { - target-arrow-shape: square; -} -edge.source-circle { - source-arrow-shape: circle; -} -edge.target-circle { - target-arrow-shape: circle; -} -edge.source-diamond { - source-arrow-shape: diamond; -} -edge.target-diamond { - target-arrow-shape: diamond; -} -edge.source-chevron { - source-arrow-shape: chevron; -} -edge.target-chevron { - target-arrow-shape: chevron; -} -edge.source-none { - source-arrow-shape: none; -} -edge.target-none { - target-arrow-shape: none; -} -node.border-solid { - border-style: solid; -} -node.border-dashed { - border-style: dashed; -} -node.border-dotted { - border-style: dotted; -} -node.border-double { - border-style: double; -} -node.border-none { - border-width: 0px; -} -.text-sm { - font-size: 7.5px; -} -.text-lg { - font-size: 15px; -} -.text-xl { - font-size: 20px; -} -node[w] { - width: data(w); -} -node[h] { - height: data(h); -} -node[src] { - background-image: data(src); - background-fit: cover; - border-width: 0px; - text-valign: bottom; - text-margin-y: 5px; -} -`; diff --git a/app/src/ui/Dialog.tsx b/app/src/ui/Dialog.tsx index 1460fc4fe..f35ce03a3 100644 --- a/app/src/ui/Dialog.tsx +++ b/app/src/ui/Dialog.tsx @@ -14,7 +14,7 @@ export const Overlay = forwardRef< )); Overlay.displayName = "Dialog.Overlay"; diff --git a/app/tailwind.config.js b/app/tailwind.config.js index 0b1585b8e..dd3f9fb2e 100644 --- a/app/tailwind.config.js +++ b/app/tailwind.config.js @@ -86,6 +86,10 @@ module.exports = { from: { transform: "translateY(100%)" }, to: { transform: "translateY(0)" }, }, + fadeIn: { + from: { opacity: 0 }, + to: { opacity: 1 }, + }, contentShow: { from: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" }, to: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }, @@ -135,6 +139,7 @@ module.exports = { }, animation: { overlayShow: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)", + fadeIn: "fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1)", contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)", slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)", slideRightAndFade: diff --git a/shared/src/templates.ts b/shared/src/templates.ts index 782dfd08e..519d12dd0 100644 --- a/shared/src/templates.ts +++ b/shared/src/templates.ts @@ -1,15 +1,15 @@ export const templates = [ "code-flow", + "default", "process-flow", "flowchart", + "org-chart", + "network-diagram-dark", "decision-flow", "pert-light", - "default", - "org-chart", "knowledge-graph", - "mindmap", - "mindmap-dark", - "network-diagram-dark", "network-diagram-icons", + "mindmap", "playful-mindmap", + "mindmap-dark", ] as const;