From edeb0c5d280a58a1e910a0ce782bdffc12cea899 Mon Sep 17 00:00:00 2001 From: Rob Gordon Date: Thu, 6 Jul 2023 14:56:32 -0400 Subject: [PATCH 1/2] Add Custom Cytoscape Styles (#538) * Add custom cytoscape styles * Add Theme Picker * Fix font loading bug * Pre-cleanup * Fix downloads * Add translations * Dark Mode * Remove temp test * Fix tests * Tweaking styles for mobile loading --- app/package.json | 3 +- app/public/fonts/FiraMono.css | 6 + app/public/fonts/GaeguRegular.css | 6 + ...Gaegu-Regular.woff2 => GaeguRegular.woff2} | Bin app/public/fonts/JosefinSans.css | 6 + app/public/fonts/Karla.css | 6 + app/public/fonts/PermanentMarker.css | 6 + app/public/fonts/PoorStory.css | 6 + app/public/fonts/Porpora.css | 6 + app/public/fonts/SpaceMonoRegular.css | 6 + ...o-Regular.woff2 => SpaceMonoRegular.woff2} | Bin app/public/fonts/SportingGrotesque.css | 6 + app/public/fonts/Virgil3YOFF.css | 6 + .../fonts/{Virgil.woff2 => Virgil3YOFF.woff2} | Bin app/src/components/EditorWrapper.module.css | 8 +- app/src/components/Graph.tsx | 52 +- app/src/components/GraphContextMenu.tsx | 31 +- app/src/components/Header.tsx | 3 +- app/src/components/ShareDialog.tsx | 30 +- app/src/components/Tabs/EditStyleTab.tsx | 288 +- app/src/components/Tabs/EditorTabList.tsx | 2 +- app/src/components/Tabs/shared.tsx | 12 +- app/src/components/TextResizer.module.css | 2 +- app/src/components/TextResizer.tsx | 4 +- app/src/components/ThemePicker.tsx | 121 + app/src/components/downloads.ts | 61 +- app/src/index.css | 8 + app/src/lib/buildStylesForGraph.tsx | 4 +- app/src/lib/constants.ts | 2 + .../cyStyleToString/cyStyleToString.test.ts | 90 + .../lib/cyStyleToString/cyStyleToString.ts | 175 ++ app/src/lib/cyStyleToString/fixture.json | 2617 +++++++++++++++++ app/src/lib/getDefaultChart.ts | 7 +- app/src/lib/getElements.ts | 10 +- app/src/lib/getGetSize.ts | 161 - app/src/lib/getSize.ts | 174 ++ app/src/lib/getUserStyle.ts | 20 + app/src/lib/graphOptions.ts | 14 + app/src/lib/graphThemes.tsx | 38 +- app/src/lib/graphUtilityClasses.ts | 2 +- app/src/lib/prepareChart/prepareChart.test.ts | 66 +- app/src/lib/prepareChart/prepareChart.ts | 28 +- app/src/lib/preprocessCytoscapeStyle.ts | 242 ++ app/src/lib/themes/_cyberpunk_unfinished.ts | 134 - app/src/lib/themes/blokus.ts | 317 ++ app/src/lib/themes/clay.ts | 319 ++ app/src/lib/themes/comic-book.ts | 308 ++ app/src/lib/themes/eggs.ts | 319 ++ app/src/lib/themes/excalidraw.ts | 322 +- app/src/lib/themes/futuristic.ts | 339 +++ app/src/lib/themes/monospace.ts | 314 ++ app/src/lib/themes/museum.ts | 307 ++ app/src/lib/themes/original-dark.ts | 333 ++- app/src/lib/themes/original.ts | 355 +++ app/src/lib/themes/playbook.ts | 307 ++ app/src/lib/themes/retro.ts | 307 ++ app/src/locales/de/messages.js | 11 +- app/src/locales/de/messages.po | 163 +- app/src/locales/en/messages.js | 11 +- app/src/locales/en/messages.po | 163 +- app/src/locales/fr/messages.js | 11 +- app/src/locales/fr/messages.po | 163 +- app/src/locales/hi/messages.js | 11 +- app/src/locales/hi/messages.po | 163 +- app/src/locales/ko/messages.js | 11 +- app/src/locales/ko/messages.po | 163 +- app/src/locales/pt-br/messages.js | 11 +- app/src/locales/pt-br/messages.po | 163 +- app/src/locales/zh/messages.js | 11 +- app/src/locales/zh/messages.po | 163 +- app/src/pages/Edit.tsx | 4 +- app/src/pages/EditHosted.tsx | 2 +- app/src/pages/New.tsx | 8 +- app/src/pages/Public.tsx | 2 +- app/src/pages/ReadOnly.tsx | 2 +- app/src/react-app-env.d.ts | 4 + app/src/setupTests.ts | 11 + app/tailwind.config.js | 23 + pnpm-lock.yaml | 1074 ++++--- pnpm-workspace.yaml | 2 - 80 files changed, 9125 insertions(+), 1541 deletions(-) create mode 100644 app/public/fonts/FiraMono.css create mode 100644 app/public/fonts/GaeguRegular.css rename app/public/fonts/{Gaegu-Regular.woff2 => GaeguRegular.woff2} (100%) create mode 100644 app/public/fonts/JosefinSans.css create mode 100644 app/public/fonts/Karla.css create mode 100644 app/public/fonts/PermanentMarker.css create mode 100644 app/public/fonts/PoorStory.css create mode 100644 app/public/fonts/Porpora.css create mode 100644 app/public/fonts/SpaceMonoRegular.css rename app/public/fonts/{SpaceMono-Regular.woff2 => SpaceMonoRegular.woff2} (100%) create mode 100644 app/public/fonts/SportingGrotesque.css create mode 100644 app/public/fonts/Virgil3YOFF.css rename app/public/fonts/{Virgil.woff2 => Virgil3YOFF.woff2} (100%) create mode 100644 app/src/components/ThemePicker.tsx create mode 100644 app/src/lib/cyStyleToString/cyStyleToString.test.ts create mode 100644 app/src/lib/cyStyleToString/cyStyleToString.ts create mode 100644 app/src/lib/cyStyleToString/fixture.json delete mode 100644 app/src/lib/getGetSize.ts create mode 100644 app/src/lib/getSize.ts create mode 100644 app/src/lib/preprocessCytoscapeStyle.ts delete mode 100644 app/src/lib/themes/_cyberpunk_unfinished.ts diff --git a/app/package.json b/app/package.json index 729a22764..434d39389 100644 --- a/app/package.json +++ b/app/package.json @@ -45,6 +45,7 @@ "@radix-ui/react-slider": "^1.1.0", "@radix-ui/react-tabs": "^1.0.1", "@radix-ui/react-toggle": "^0.1.4", + "@radix-ui/react-tooltip": "^1.0.6", "@reach/dialog": "^0.15.0", "@reach/tooltip": "^0.16.0", "@reach/utils": "^0.16.0", @@ -96,6 +97,7 @@ "papaparse": "^5.4.1", "phosphor-react": "^1.3.1", "postcss-flexbugs-fixes": "^5.0.2", + "prettier": "^2.3.1", "re-resizable": "^6.9.0", "react": "^17.0.1", "react-confetti": "^6.1.0", @@ -181,7 +183,6 @@ "jsdom": "^20.0.3", "minimist": "^1.2.5", "msw": "^0.36.8", - "prettier": "^2.3.1", "source-map-explorer": "^2.5.2", "tailwindcss": "^3.2.6", "ts-node": "^10.9.1", diff --git a/app/public/fonts/FiraMono.css b/app/public/fonts/FiraMono.css new file mode 100644 index 000000000..9c69f703f --- /dev/null +++ b/app/public/fonts/FiraMono.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "Fira Mono"; + font-style: normal; + font-weight: 400; + src: url('/fonts/FiraMono-Regular.woff2') format('woff2'); +} \ No newline at end of file diff --git a/app/public/fonts/GaeguRegular.css b/app/public/fonts/GaeguRegular.css new file mode 100644 index 000000000..163389db4 --- /dev/null +++ b/app/public/fonts/GaeguRegular.css @@ -0,0 +1,6 @@ +@font-face { + font-style: normal; + font-weight: 400; + font-family: Gaegu; + src: url('/fonts/GaeguRegular.woff2') format('woff2'); +} \ No newline at end of file diff --git a/app/public/fonts/Gaegu-Regular.woff2 b/app/public/fonts/GaeguRegular.woff2 similarity index 100% rename from app/public/fonts/Gaegu-Regular.woff2 rename to app/public/fonts/GaeguRegular.woff2 diff --git a/app/public/fonts/JosefinSans.css b/app/public/fonts/JosefinSans.css new file mode 100644 index 000000000..fb13395b7 --- /dev/null +++ b/app/public/fonts/JosefinSans.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "Josefin Sans"; + font-style: normal; + font-weight: 400; + src: url('/fonts/JosefinSans-Regular.woff2') format('woff2'); +} \ No newline at end of file diff --git a/app/public/fonts/Karla.css b/app/public/fonts/Karla.css new file mode 100644 index 000000000..90922bb6d --- /dev/null +++ b/app/public/fonts/Karla.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "Karla"; + font-style: normal; + font-weight: 400; + src: url('/fonts/Karla-Regular.woff2') format('woff2'); +} \ No newline at end of file diff --git a/app/public/fonts/PermanentMarker.css b/app/public/fonts/PermanentMarker.css new file mode 100644 index 000000000..4987e5d8b --- /dev/null +++ b/app/public/fonts/PermanentMarker.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "Permanent Marker"; + font-style: normal; + font-weight: 400; + src: url('/fonts/PermanentMarker-Regular.woff2') format('woff2'); +} \ No newline at end of file diff --git a/app/public/fonts/PoorStory.css b/app/public/fonts/PoorStory.css new file mode 100644 index 000000000..7ee83071d --- /dev/null +++ b/app/public/fonts/PoorStory.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "Poor Story"; + font-style: normal; + font-weight: 400; + src: url('/fonts/PoorStory-Regular.woff2') format('woff2'); +} \ No newline at end of file diff --git a/app/public/fonts/Porpora.css b/app/public/fonts/Porpora.css new file mode 100644 index 000000000..b3f7f85cf --- /dev/null +++ b/app/public/fonts/Porpora.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "Porpora"; + font-style: normal; + font-weight: 400; + src: url('/fonts/Porpora-Regular.woff2') format('woff2'); +} \ No newline at end of file diff --git a/app/public/fonts/SpaceMonoRegular.css b/app/public/fonts/SpaceMonoRegular.css new file mode 100644 index 000000000..9277bb13d --- /dev/null +++ b/app/public/fonts/SpaceMonoRegular.css @@ -0,0 +1,6 @@ +@font-face { + font-style: normal; + font-weight: 400; + font-family: "Space Mono"; + src: url('/fonts/SpaceMonoRegular.woff2') format('woff2'); +} \ No newline at end of file diff --git a/app/public/fonts/SpaceMono-Regular.woff2 b/app/public/fonts/SpaceMonoRegular.woff2 similarity index 100% rename from app/public/fonts/SpaceMono-Regular.woff2 rename to app/public/fonts/SpaceMonoRegular.woff2 diff --git a/app/public/fonts/SportingGrotesque.css b/app/public/fonts/SportingGrotesque.css new file mode 100644 index 000000000..bce106932 --- /dev/null +++ b/app/public/fonts/SportingGrotesque.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "Sporting Grotesque"; + font-style: normal; + font-weight: 400; + src: url('/fonts/Sporting_Grotesque-Regular_web.woff2') format('woff2'); +} \ No newline at end of file diff --git a/app/public/fonts/Virgil3YOFF.css b/app/public/fonts/Virgil3YOFF.css new file mode 100644 index 000000000..0288f377f --- /dev/null +++ b/app/public/fonts/Virgil3YOFF.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "Virgil3YOFF"; + font-style: normal; + font-weight: 400; + src: url('/fonts/Virgil3YOFF.woff2') format('woff2'); +} \ No newline at end of file diff --git a/app/public/fonts/Virgil.woff2 b/app/public/fonts/Virgil3YOFF.woff2 similarity index 100% rename from app/public/fonts/Virgil.woff2 rename to app/public/fonts/Virgil3YOFF.woff2 diff --git a/app/src/components/EditorWrapper.module.css b/app/src/components/EditorWrapper.module.css index 8619e3a06..1e8afe710 100644 --- a/app/src/components/EditorWrapper.module.css +++ b/app/src/components/EditorWrapper.module.css @@ -4,6 +4,7 @@ max-width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); + overflow: hidden; } .mightLose { @@ -76,13 +77,6 @@ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; - color: var(--color-uiAccent); - text-decoration-color: var(--color-uiAccent); -} - -.EditorWrapper [data-rename-button]:active { - color: var(--color-edgeHover); - text-decoration-color: var(--color-edgeHover); } .EditorWrapper [data-rename-button]:focus { diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx index b6a3c723f..68dc7cfd0 100644 --- a/app/src/components/Graph.tsx +++ b/app/src/components/Graph.tsx @@ -17,22 +17,19 @@ import React, { import { useContextMenu } from "react-contexify"; import { useDebouncedCallback } from "use-debounce"; -import { buildStylesForGraph } from "../lib/buildStylesForGraph"; import { monacoMarkerErrorSeverity } from "../lib/constants"; import { cytoscape } from "../lib/cytoscape"; import { getElements } from "../lib/getElements"; -import { getGetSize, TGetSize } from "../lib/getGetSize"; import { getLayout } from "../lib/getLayout"; -import { getUserStyle } from "../lib/getUserStyle"; +import { useCytoscapeStyle } from "../lib/getUserStyle"; import { DEFAULT_GRAPH_PADDING } from "../lib/graphOptions"; -import { - useBackgroundColor, - useCurrentTheme, - useThemeKey, -} from "../lib/graphThemes"; +import { useBackgroundColor } from "../lib/graphThemes"; import { isError } from "../lib/helpers"; import { getAnimationSettings } from "../lib/hooks"; -import { Theme } from "../lib/themes/constants"; +import { + preprocessCytoscapeStyle, + useCytoscapeStyleImports, +} from "../lib/preprocessCytoscapeStyle"; import { useContextMenuState } from "../lib/useContextMenuState"; import { Doc, useDoc, useParseErrorStore } from "../lib/useDoc"; import { updateModelMarkers, useEditorStore } from "../lib/useEditorStore"; @@ -41,7 +38,6 @@ import { Box } from "../slang"; import { getNodePositionsFromCy } from "./getNodePositionsFromCy"; import styles from "./Graph.module.css"; import { GRAPH_CONTEXT_MENU_ID, GraphContextMenu } from "./GraphContextMenu"; - declare global { interface Window { __cy?: cytoscape.Core; @@ -59,15 +55,12 @@ if (!cytoscape.prototype.hasInitialised) { const isAnimationEnabled = getAnimationSettings(); const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) { + useCytoscapeStyleImports(); const [initResizeNumber] = useState(shouldResize); const cy = useRef(); const cyErrorCatcher = useRef(); const isGraphInitialized = useRef(false); - const themeKey = useThemeKey(); - const theme = useCurrentTheme(themeKey) as unknown as Theme; - const bg = useBackgroundColor(theme); - - const getSize = useRef(getGetSize(theme)); + const bg = useBackgroundColor(); const handleResize = useCallback(() => { if (!cy.current) return; @@ -86,19 +79,17 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) { useInitializeGraph({ cy, cyErrorCatcher }); const throttleStyle = useMemo( - () => getStyleUpdater({ cy, cyErrorCatcher, bg }), - [bg] + () => getStyleUpdater({ cy, cyErrorCatcher }), + [] ); - // Apply theme - useEffect(() => { - throttleStyle(theme); - }, [theme, throttleStyle]); + // Get style + const cytoscapeStyle = useCytoscapeStyle(); - // Update getSize when theme changes + // Apply style useEffect(() => { - getSize.current = getGetSize(theme); - }, [theme]); + throttleStyle(cytoscapeStyle); + }, [cytoscapeStyle, throttleStyle]); const throttleUpdate = useMemo( () => @@ -106,7 +97,6 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) { cy, cyErrorCatcher, isGraphInitialized, - getSize, }), [] ); @@ -292,12 +282,10 @@ function getGraphUpdater({ cy, cyErrorCatcher, isGraphInitialized, - getSize, }: { cy: MutableRefObject; cyErrorCatcher: MutableRefObject; isGraphInitialized: MutableRefObject; - getSize: MutableRefObject; }) { return throttle((_doc?: Doc) => { if (!cy.current) return; @@ -307,7 +295,7 @@ function getGraphUpdater({ try { const layout = getLayout(doc); - elements = getElements(doc.text, getSize.current); + elements = getElements(doc.text); // Test cyErrorCatcher.current.json({ elements }); @@ -395,17 +383,14 @@ function isParseError(e: unknown): e is ParseError { function getStyleUpdater({ cy, cyErrorCatcher, - bg, }: { cy: React.MutableRefObject; cyErrorCatcher: React.MutableRefObject; - bg?: string; }) { - return throttle((theme: Theme) => { + return throttle(async (_style: string) => { if (!cy.current || !cyErrorCatcher.current) return; try { - // Prepare Styles - const style = buildStylesForGraph(theme, getUserStyle(), bg); + const { style } = preprocessCytoscapeStyle(_style); // Test Error First cyErrorCatcher.current.json({ style }); @@ -420,6 +405,7 @@ function getStyleUpdater({ cyErrorCatcher.current = cytoscape(); useParseErrorStore.setState({ errorFromStyle: "" }); } catch (e) { + console.log(e); cyErrorCatcher.current.destroy(); cyErrorCatcher.current = cytoscape(); if (isError(e)) { diff --git a/app/src/components/GraphContextMenu.tsx b/app/src/components/GraphContextMenu.tsx index c930cb574..db964b21a 100644 --- a/app/src/components/GraphContextMenu.tsx +++ b/app/src/components/GraphContextMenu.tsx @@ -20,12 +20,7 @@ import { FiDownload } from "react-icons/fi"; import { HiOutlineClipboardCopy } from "react-icons/hi"; import { AUTH_IMG_SCALE, UNAUTH_IMG_SCALE } from "../lib/constants"; -import { - defaultGraphTheme, - getTheme, - useCurrentTheme, - useTheme, -} from "../lib/graphThemes"; +import { tmpThemeColors } from "../lib/graphThemes"; import { borderStyles, edgeLineStyles, @@ -56,7 +51,6 @@ export const GRAPH_CONTEXT_MENU_ID = "graph-context-menu"; export const GraphContextMenu = memo(function GraphContextMenu() { const isFirefox = useIsFirefox(); const filename = useDownloadFilename(); - const theme = useTheme(); const isValidSponsor = useIsValidSponsor(); const watermark = !isValidSponsor; @@ -80,10 +74,9 @@ export const GraphContextMenu = memo(function GraphContextMenu() { {isValidSponsor && } { - if (!theme || !window.__cy) return; + if (!window.__cy) return; startCursorSpin(); getCanvas({ - theme, cy: window.__cy, type: "png", watermark, @@ -104,10 +97,9 @@ export const GraphContextMenu = memo(function GraphContextMenu() { { - if (!theme || !window.__cy) return; + if (!window.__cy) return; startCursorSpin(); getCanvas({ - theme, cy: window.__cy, type: "jpg", watermark, @@ -129,13 +121,11 @@ export const GraphContextMenu = memo(function GraphContextMenu() { {isValidSponsor && ( { - const theme = getTheme(); const cy = window.__cy; - if (!theme || !cy) return; + if (!cy) return; startCursorSpin(); const svg = await getSvg({ cy, - theme, }); if (!svg) return; downloadSvg({ @@ -165,14 +155,12 @@ function CopySVG() { onClick={async () => { dispatch("loading"); startCursorSpin(); - const theme = getTheme(); const cy = window.__cy; - if (theme && cy) + if (cy) // copy to clipboard using navigator await navigator.clipboard.writeText( await getSvg({ cy, - theme, }) ); dispatch("success"); @@ -194,8 +182,6 @@ function CopyPNG({ watermark?: boolean; scale?: number; }) { - const theme = useTheme(); - const [state, dispatch] = useReducer( (_state: ItemState, action: ItemState) => action, "idle" @@ -204,9 +190,8 @@ function CopyPNG({ dispatch("loading"); startCursorSpin(); setTimeout(() => { - if (!window.__cy || !theme) return; + if (!window.__cy) return; getCanvas({ - theme, cy: window.__cy, type: "png", watermark, @@ -275,9 +260,7 @@ const edges = edgeLineStyles.map((style) => style.selector.slice(5)); function NodeSubmenu() { const active = useContextMenuState((state) => state.active); - const themeKey = useDoc((doc) => doc.meta?.theme ?? defaultGraphTheme); - const theme = useCurrentTheme(themeKey as string); - const colors = theme?.colors ?? {}; + const colors = tmpThemeColors; const colorNames = Object.keys(colors); const selected = useSelectedNodes(); const activeSelection = selected.length diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx index 57b32c9ad..f74258571 100644 --- a/app/src/components/Header.tsx +++ b/app/src/components/Header.tsx @@ -31,13 +31,12 @@ import { } from "react"; import { Link, LinkProps, useLocation } from "react-router-dom"; +import { DISCORD_URL } from "../lib/constants"; import { useIsValidCustomer } from "../lib/hooks"; import { track } from "../lib/track"; import { useLastChart } from "../lib/useLastChart"; import { ReactComponent as BrandSvg } from "./brand.svg"; -const DISCORD_URL = "https://discord.gg/wPASTQHQBf"; - export const Header = memo(function SharedHeader() { const { pathname } = useLocation(); const isSponsorPage = pathname === "/pricing"; diff --git a/app/src/components/ShareDialog.tsx b/app/src/components/ShareDialog.tsx index e1e208e9d..d7edf9e84 100644 --- a/app/src/components/ShareDialog.tsx +++ b/app/src/components/ShareDialog.tsx @@ -21,7 +21,6 @@ import { import { useMutation, useQuery } from "react-query"; import { AUTH_IMG_SCALE, UNAUTH_IMG_SCALE } from "../lib/constants"; -import { useTheme } from "../lib/graphThemes"; import { useDownloadFilename, useIsValidSponsor } from "../lib/hooks"; import { makeChartPublic } from "../lib/queries"; import { toVisioFlowchart, toVisioOrgChart } from "../lib/toVisio"; @@ -47,7 +46,6 @@ export default function ShareDialog() { const fullscreen = `${new URL(window.location.href).origin}/f#${shareLink}`; const readOnly = `${new URL(window.location.href).origin}/c#${shareLink}`; const editable = `${new URL(window.location.href).origin}/n#${shareLink}`; - const theme = useTheme(); const filename = useDownloadFilename(); const isValidSponsor = useIsValidSponsor(); const watermark = !isValidSponsor; @@ -72,29 +70,29 @@ export default function ShareDialog() { - )} - - - - {!isValidSponsor && ( - - Get More Themes - - )} - + const [style, setStyle] = useState( + (meta.cytoscapeStyle as string) ?? "" ); -} - -const throttleBGUpdate = throttle( - (bg: string) => { + const mode = useLightOrDarkMode(); + const applyStyle = useCallback((style: string) => { + let formattedStyle = style; + try { + // format the style + formattedStyle = prettier.format(style, { + parser: "css", + plugins: [postcssParser], + }); + setStyle(formattedStyle); + } catch (e) { + // ignore + console.error(e); + } useDoc.setState( (s) => { return produce(s, (draft) => { - draft.meta.background = bg; + draft.meta.cytoscapeStyle = formattedStyle; }); }, false, - "EditStyleTab/bg" + "EditStyleTab/style" ); - }, - 75, - { - trailing: true, - } -); + useUnmountStore.setState({ + unmount: true, + }); + }, []); + // bind Command+S to apply the style + useEffect(() => { + const handleKeydown = (e: KeyboardEvent) => { + if (e.key === "s" && (e.metaKey || e.ctrlKey)) { + e.preventDefault(); + applyStyle(style); + } + }; + document.addEventListener("keydown", handleKeydown); + + return () => { + document.removeEventListener("keydown", handleKeydown); + }; + }, [applyStyle, style]); + return ( +
+
+
+
+

+ Theme Editor +

+ +
+ +
+
+
+ { + setStyle(value ?? ""); + }} + options={{ + minimap: { enabled: false }, + lineNumbers: "off", + lineDecorationsWidth: 0, + lineNumbersMinChars: 0, + glyphMargin: false, + folding: false, + scrollBeyondLastLine: false, + wordWrap: "on", + wrappingIndent: "indent", + wrappingStrategy: "advanced", + overviewRulerBorder: false, + hideCursorInOverviewRuler: true, + renderLineHighlight: "none", + renderFinalNewline: false, + fontSize: 14, + guides: { + indentation: false, + }, + }} + wrapperProps={{ + onMouseEnter() { + const editor = document.querySelector( + "#theme-editor-wrapper section" + ) as HTMLElement; + if (!editor) return; + editor.dataset.hovering = "true"; + }, + onMouseLeave() { + const editor = document.querySelector( + "#theme-editor-wrapper section" + ) as HTMLElement; + if (!editor) return; + editor.dataset.hovering = "false"; + }, + }} + theme={mode === "dark" ? "vs-dark" : "vs-light"} + beforeMount={(monaco) => { + // turn off validation + monaco.languages.css.scssDefaults.setOptions({ + validate: false, + lint: { + unknownProperties: "ignore", + unknownVendorSpecificProperties: "ignore", + }, + }); + }} + /> +
+ +
+
+
+ ); +} + +function KeyboardKey({ children }: { children: string }) { + return ( + + {children} + + ); +} + +function InfoButton() { + return ( + + + + + + + + +

+ + Customize your theme by editing the Cytoscape CSS{" "} + below. Our styling documentation is coming soon! In the + meantime, the best resource is the{" "} + + Cytoscape + {" "} + documentation. Come ask questions in the{" "} + + Discord + {" "} + if you get stuck. + +

+ + + + + ); +} diff --git a/app/src/components/Tabs/EditorTabList.tsx b/app/src/components/Tabs/EditorTabList.tsx index 9bf3df272..e3a107c47 100644 --- a/app/src/components/Tabs/EditorTabList.tsx +++ b/app/src/components/Tabs/EditorTabList.tsx @@ -11,7 +11,7 @@ export function EditorTabList() { const isValidSponsor = useIsValidSponsor(); return ( - + {children}; }); -export function WithLowerChild({ children }: { children: ReactNode }) { - return
{children}
; +export function WithLowerChild({ + children, + className = "", +}: { + children: ReactNode; + className?: string; +}) { + return ( +
{children}
+ ); } export function LargeLink({ diff --git a/app/src/components/TextResizer.module.css b/app/src/components/TextResizer.module.css index 84cca2b2d..01c49975a 100644 --- a/app/src/components/TextResizer.module.css +++ b/app/src/components/TextResizer.module.css @@ -1,7 +1,7 @@ .TextResizer { position: absolute; bottom: 30px; - left: 30px; + right: 30px; visibility: hidden; z-index: -1; display: inline-block; diff --git a/app/src/components/TextResizer.tsx b/app/src/components/TextResizer.tsx index 7710f8ba4..304c56175 100644 --- a/app/src/components/TextResizer.tsx +++ b/app/src/components/TextResizer.tsx @@ -1,5 +1,7 @@ +import { useProcessStyleStore } from "../lib/preprocessCytoscapeStyle"; import styles from "./TextResizer.module.css"; export default function TextResizer() { - return
; + const fontData = useProcessStyleStore((s) => s.fontData); + return
; } diff --git a/app/src/components/ThemePicker.tsx b/app/src/components/ThemePicker.tsx new file mode 100644 index 000000000..544b38a1a --- /dev/null +++ b/app/src/components/ThemePicker.tsx @@ -0,0 +1,121 @@ +import { Trans } from "@lingui/macro"; +import * as Popover from "@radix-ui/react-popover"; +import { PaintBrush } from "phosphor-react"; +import { useState } from "react"; +import { useQuery } from "react-query"; +import { create } from "zustand"; + +import { validThemes } from "../lib/graphOptions"; + +export const usePreviewTheme = create<{ cytoscapeStyle?: string }>( + (_set) => ({}) +); + +export function ThemePicker({ + applyStyle, +}: { + applyStyle: (style: string) => void; +}) { + const [preview, setPreview] = useState(""); + const [isOpen, setIsOpen] = useState(false); + useQuery( + ["previewTheme", preview], + async () => { + const { cytoscapeStyle = "" } = await import(`../lib/themes/${preview}`); + return cytoscapeStyle; + }, + { + enabled: !!preview, + onSuccess: (data) => { + usePreviewTheme.setState({ + cytoscapeStyle: data, + }); + }, + } + ); + return ( + { + setIsOpen(open); + + // on close, reset the preview theme + if (!open) { + usePreviewTheme.setState({ + cytoscapeStyle: undefined, + }); + setPreview(""); + } + }} + > + + + Load Theme + + + { + e.preventDefault(); + }} + className="rounded p-2 pt-4 w-[260px] bg-neutral-100 shadow-md will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade max-h-[calc(100vh_-_340px)] grid grid-rows-[auto_minmax(0,1fr)_auto] dark:bg-neutral-900" + sideOffset={10} + align="end" + > +
+

+ Choose a Theme +

+

+ Click to preview +

+
+
+ {validThemes.map((theme) => ( + + ))} +
+

+ + Loading a theme will erase any custom styles you have applied + +

+ + + + + ); +} + +async function previewTheme(theme: string) { + const { cytoscapeStyle } = await import(`../lib/themes/${theme}`); + usePreviewTheme.setState({ + cytoscapeStyle, + }); +} diff --git a/app/src/components/downloads.ts b/app/src/components/downloads.ts index 65d183a52..28b413d53 100644 --- a/app/src/components/downloads.ts +++ b/app/src/components/downloads.ts @@ -3,7 +3,6 @@ import { saveAs } from "file-saver"; import { UNAUTH_IMG_SCALE } from "../lib/constants"; import { getBackgroundColor } from "../lib/graphThemes"; -import { Theme } from "../lib/themes/constants"; // padding, gets divided in half const PADDING = 60; @@ -11,8 +10,8 @@ const PADDING = 60; /** * Returns the SVG code for the current graph */ -export async function getSvg({ cy, theme }: { cy: Core; theme: Theme }) { - const bg = getBackgroundColor(theme); +export async function getSvg({ cy }: { cy: Core }) { + const bg = getBackgroundColor(); try { // @ts-ignore @@ -57,28 +56,28 @@ export async function getSvg({ cy, theme }: { cy: Core; theme: Theme }) { } // Add font file if necessary - let fontString = ""; - const files = theme.font.files; - if (files) { - for (const { url, name } of files) { - if (!(url in window.__flowchartFunBase64EncodedFonts)) { - const fontUrl = `/fonts/${url}`; - const font = await fetch(fontUrl) - .then((res) => res.arrayBuffer()) - .catch((e) => console.error(e)); - if (!font) continue; - const base64 = arrayBufferToBase64(font); - window.__flowchartFunBase64EncodedFonts[url] = base64; - } - fontString += `@font-face { font-family: "${name}"; src: url(data:application/x-font-woff2;charset=utf-8;base64,${window.__flowchartFunBase64EncodedFonts[url]}) format("woff2"); }}`; - } - } - - if (fontString) { - const style = document.createElement("style"); - style.innerHTML = fontString; - svgTag.prepend(style); - } + // let fontString = ""; + // const files = theme.font.files; + // if (files) { + // for (const { url, name } of files) { + // if (!(url in window.__flowchartFunBase64EncodedFonts)) { + // const fontUrl = `/fonts/${url}`; + // const font = await fetch(fontUrl) + // .then((res) => res.arrayBuffer()) + // .catch((e) => console.error(e)); + // if (!font) continue; + // const base64 = arrayBufferToBase64(font); + // window.__flowchartFunBase64EncodedFonts[url] = base64; + // } + // fontString += `@font-face { font-family: "${name}"; src: url(data:application/x-font-woff2;charset=utf-8;base64,${window.__flowchartFunBase64EncodedFonts[url]}) format("woff2"); }}`; + // } + // } + + // if (fontString) { + // const style = document.createElement("style"); + // style.innerHTML = fontString; + // svgTag.prepend(style); + // } const correctedSvgStr = svgEl.documentElement.outerHTML; const { optimize } = await import("svgo/dist/svgo.browser"); @@ -116,13 +115,11 @@ export async function downloadSvg({ export async function getCanvas({ cy, type, - theme, scale = UNAUTH_IMG_SCALE, watermark = true, }: { cy: Core; type: "jpg" | "png"; - theme: Theme; scale?: number; watermark?: boolean; }): Promise<{ @@ -130,7 +127,7 @@ export async function getCanvas({ type: "jpg" | "png"; cleanup: () => void; }> { - const bg = getBackgroundColor(theme); + const bg = getBackgroundColor(); const blob = await cy[type]({ full: true, scale, @@ -182,7 +179,6 @@ export async function getCanvas({ ctx, width: canvas.width, height: canvas.height, - theme, }); resolve({ canvas, @@ -200,21 +196,18 @@ async function addWatermark({ ctx, width, height, - theme, }: { ctx: CanvasRenderingContext2D; width: number; height: number; - theme: Theme; }) { - const foreground = theme.fg; // get a size that is 3% of the canvas height const heightRelativeSize = Math.floor(height * 0.03); const widthRelativeSize = Math.floor(width * 0.05); // take the smaller of the two const size = Math.min(heightRelativeSize, widthRelativeSize); ctx.font = `${Math.floor(size)}px Helvetica`; - ctx.fillStyle = foreground; + ctx.fillStyle = "#000000"; ctx.fillText("flowchart.fun", 5, height - size / 2); } @@ -246,7 +239,7 @@ export async function copyCanvas(props: Awaited>) { ]); } -function arrayBufferToBase64(buffer: ArrayBuffer) { +function _arrayBufferToBase64(buffer: ArrayBuffer) { let binary = ""; const bytes = new Uint8Array(buffer); const len = bytes.byteLength; diff --git a/app/src/index.css b/app/src/index.css index 8f242dc90..a4789168f 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -179,3 +179,11 @@ div[data-reach-tooltip] { .text-wrap-balance { text-wrap: balance; } + +#theme-editor-wrapper > section { + overflow: hidden; +} + +#theme-editor-wrapper > section[data-hovering="true"] { + overflow: visible; +} diff --git a/app/src/lib/buildStylesForGraph.tsx b/app/src/lib/buildStylesForGraph.tsx index 6ad766484..c3ed88f23 100644 --- a/app/src/lib/buildStylesForGraph.tsx +++ b/app/src/lib/buildStylesForGraph.tsx @@ -1,4 +1,4 @@ -import { CytoscapeOptions, Stylesheet } from "cytoscape"; +import { Stylesheet } from "cytoscape"; import { cytoscape } from "./cytoscape"; import { @@ -16,7 +16,7 @@ export function buildStylesForGraph( theme: Theme, userStyle: cytoscape.Stylesheet[] = [], bg?: string -): CytoscapeOptions["style"] { +): Stylesheet[] { const bgOverrides: Stylesheet[] = []; if (bg) { bgOverrides.push({ diff --git a/app/src/lib/constants.ts b/app/src/lib/constants.ts index e78427401..4f89ce868 100644 --- a/app/src/lib/constants.ts +++ b/app/src/lib/constants.ts @@ -64,3 +64,5 @@ export const UNAUTH_IMG_SCALE = 1.5; // This is to avoid a monaco-editor import that breaks too many things export const monacoMarkerErrorSeverity = 8; + +export const DISCORD_URL = "https://discord.gg/wPASTQHQBf"; diff --git a/app/src/lib/cyStyleToString/cyStyleToString.test.ts b/app/src/lib/cyStyleToString/cyStyleToString.test.ts new file mode 100644 index 000000000..2d64af1c4 --- /dev/null +++ b/app/src/lib/cyStyleToString/cyStyleToString.test.ts @@ -0,0 +1,90 @@ +import { cyStyleToString } from "./cyStyleToString"; +import fixture from "./fixture.json"; + +describe("cyStyleToString", () => { + test("returns a string", () => { + expect(typeof cyStyleToString(fixture as any)).toBe("string"); + }); + + test("returns a style string", () => { + expect(cyStyleToString(fixture as any)) + .toBe(`:parent { shape: rectangle; background-color: rgb(238,238,238); padding: 10px; border-color: rgb(204,204,204); border-width: 1px; text-valign: top; text-halign: center; text-margin-y: -6px; text-wrap: none; color: rgb(0,0,0); } +edge { width: 0.75px; font-size: 10px; loop-direction: 0deg; loop-sweep: 20deg; text-background-opacity: 1; text-background-color: rgb(255,255,255); text-background-padding: 3px; line-color: rgb(0,0,0); target-arrow-color: rgb(0,0,0); source-arrow-color: rgb(0,0,0); target-arrow-shape: triangle; arrow-scale: 1; curve-style: bezier; label: data(label); color: rgb(0,0,0); text-valign: center; text-wrap: wrap; font-family: Karla; text-halign: center; text-rotation: autorotate; target-distance-from-node: 1px; source-distance-from-node: 0px; } +: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 { font-size: 10px; font-family: Karla; background-color: rgb(255,255,255); border-color: rgb(0,0,0); 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: 0.75px; shape: rectangle; line-height: 1.25; } +node[label!=''] { width: data(shapeWidth); height: data(shapeHeight); text-margin-y: data(textMarginY); text-margin-x: data(textMarginX); } +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/cyStyleToString/cyStyleToString.ts b/app/src/lib/cyStyleToString/cyStyleToString.ts new file mode 100644 index 000000000..bf448e7c1 --- /dev/null +++ b/app/src/lib/cyStyleToString/cyStyleToString.ts @@ -0,0 +1,175 @@ +type StyleObject = Record>; + +function stringifyStyleObject(styleObj: StyleObject) { + return Object.entries(styleObj) + .map(([selector, style]) => { + const styleString = Object.entries(style) + .map(([property, value]) => `${property}: ${value};`) + .join(" "); + return `${selector} { ${styleString} }`; + }) + .join("\n"); +} + +export function cyStyleToString(stylesheet: Style[]) { + const styleObj: StyleObject = {}; + for (const declaration of Array.from(stylesheet)) { + const { selector, properties } = declaration; + if (!properties) continue; + if (styleObj[selector.inputText]) { + // If the selector already exists, merge the new properties with the existing ones + styleObj[selector.inputText] = { + ...styleObj[selector.inputText], + ...properties.reduce((acc, property) => { + acc[property.name] = property.strValue; + return acc; + }, {} as Record), + }; + } else { + // Otherwise, add the new selector and properties to the style object + styleObj[selector.inputText] = properties.reduce((acc, property) => { + acc[property.name] = property.strValue; + return acc; + }, {} as Record); + } + } + return stringifyStyleObject(styleObj); +} + +interface Style { + selector: Selector; + properties?: PropertiesEntity[] | null; + mappedProperties?: (PropertiesEntityOrMappedPropertiesEntity | null)[] | null; + index: number; +} +interface Selector { + inputText: string; + currentSubject?: null; + compoundCount: number; + edgeCount: number; + length: number; +} +interface PropertiesEntity { + name: string; + value?: + | string + | (number | string)[] + | null + | number + | number + | number[] + | null + | number + | number[] + | null + | (string | number)[] + | null + | string + | number + | number + | (number | string)[] + | null + | string + | string + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | string + | string[] + | null + | string[] + | null + | number + | string; + strValue: string; + pfValue?: + | number[] + | null + | number + | null + | number + | number[] + | null + | number + | number[] + | null + | number[] + | null + | number + | number + | number[] + | null + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | number[] + | null + | number + | string[] + | null + | number; + units?: null[] | null | string | null; + mapped?: Mapped | null; + field?: string | null; +} +interface Mapped { + mapping: boolean; + regex: string; +} +interface PropertiesEntityOrMappedPropertiesEntity { + name: string; + value?: string[] | null; + strValue: string; + mapped: Mapped1; + field: string; +} +interface Mapped1 { + mapping: boolean; + regex: string; +} diff --git a/app/src/lib/cyStyleToString/fixture.json b/app/src/lib/cyStyleToString/fixture.json new file mode 100644 index 000000000..51491f756 --- /dev/null +++ b/app/src/lib/cyStyleToString/fixture.json @@ -0,0 +1,2617 @@ +[ + { + "selector": { + "0": { + "checks": [{ "type": 7, "value": ":parent" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ":parent", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "rectangle", "strValue": "rectangle" }, + { + "name": "background-color", + "value": [238, 238, 238], + "pfValue": [238, 238, 238], + "strValue": "rgb(238,238,238)" + }, + { + "name": "padding", + "value": 10, + "strValue": "10px", + "units": "px", + "pfValue": 10 + }, + { + "name": "border-color", + "value": [204, 204, 204], + "pfValue": [204, 204, 204], + "strValue": "rgb(204,204,204)" + }, + { + "name": "border-width", + "value": 1, + "strValue": "1px", + "units": "px", + "pfValue": 1 + } + ], + "mappedProperties": [], + "index": 0 + }, + { + "selector": { + "0": { + "checks": [{ "type": 0, "value": "edges" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "width", + "value": 3, + "strValue": "3px", + "units": "px", + "pfValue": 3 + } + ], + "mappedProperties": [], + "index": 1 + }, + { + "selector": { + "0": { + "checks": [{ "type": 7, "value": ":loop" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ":loop", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "curve-style", "value": "bezier", "strValue": "bezier" } + ], + "mappedProperties": [], + "index": 2 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 7, "value": ":compound" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge:compound", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "curve-style", "value": "bezier", "strValue": "bezier" }, + { + "name": "source-endpoint", + "value": "outside-to-line", + "strValue": "outside-to-line" + }, + { + "name": "target-endpoint", + "value": "outside-to-line", + "strValue": "outside-to-line" + } + ], + "mappedProperties": [], + "index": 3 + }, + { + "selector": { + "0": { + "checks": [{ "type": 7, "value": ":selected" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ":selected", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [1, 105, 217], + "pfValue": [1, 105, 217], + "strValue": "rgb(1,105,217)" + }, + { + "name": "line-color", + "value": [1, 105, 217], + "pfValue": [1, 105, 217], + "strValue": "rgb(1,105,217)" + }, + { + "name": "source-arrow-color", + "value": [1, 105, 217], + "pfValue": [1, 105, 217], + "strValue": "rgb(1,105,217)" + }, + { + "name": "mid-source-arrow-color", + "value": [1, 105, 217], + "pfValue": [1, 105, 217], + "strValue": "rgb(1,105,217)" + }, + { + "name": "target-arrow-color", + "value": [1, 105, 217], + "pfValue": [1, 105, 217], + "strValue": "rgb(1,105,217)" + }, + { + "name": "mid-target-arrow-color", + "value": [1, 105, 217], + "pfValue": [1, 105, 217], + "strValue": "rgb(1,105,217)" + } + ], + "mappedProperties": [], + "index": 4 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 7, "value": ":parent" }, + { "type": 7, "value": ":selected" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ":parent:selected", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [204, 225, 249], + "pfValue": [204, 225, 249], + "strValue": "rgb(204,225,249)" + }, + { + "name": "border-color", + "value": [174, 200, 229], + "pfValue": [174, 200, 229], + "strValue": "rgb(174,200,229)" + } + ], + "mappedProperties": [], + "index": 5 + }, + { + "selector": { + "0": { + "checks": [{ "type": 7, "value": ":active" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ":active", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "overlay-padding", + "value": 10, + "strValue": "10px", + "units": "px", + "pfValue": 10 + }, + { + "name": "overlay-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "overlay-opacity", + "value": 0.25, + "strValue": "0.25", + "pfValue": 0.25 + } + ], + "mappedProperties": [], + "index": 6 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "nodeHovered" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "1": { + "checks": [{ "type": 9, "value": "edgeHovered" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "2": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 7, "value": ":selected" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".nodeHovered, .edgeHovered, node:selected", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 3 + }, + "properties": [ + { + "name": "underlay-opacity", + "value": 0.1, + "strValue": "0.1", + "pfValue": 0.1 + }, + { + "name": "underlay-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "underlay-padding", + "value": 5, + "strValue": "5px", + "units": "px", + "pfValue": 5 + } + ], + "mappedProperties": [], + "index": 7 + }, + { + "selector": { + "0": { + "checks": [{ "type": 0, "value": "nodes" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "font-size", + "value": 10, + "strValue": "10px", + "units": "px", + "pfValue": 10 + } + ], + "mappedProperties": [], + "index": 8 + }, + { + "selector": { + "0": { + "checks": [{ "type": 0, "value": "edges" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "font-size", + "value": 10, + "strValue": "10px", + "units": "px", + "pfValue": 10 + } + ], + "mappedProperties": [], + "index": 9 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 3, "field": "label", "operator": "!=", "value": "" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node[label!='']", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "width", + "value": ["data(shapeWidth)", "shapeWidth"], + "strValue": "data(shapeWidth)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "shapeWidth" + }, + { + "name": "height", + "value": ["data(shapeHeight)", "shapeHeight"], + "strValue": "data(shapeHeight)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "shapeHeight" + }, + { + "name": "text-margin-y", + "value": ["data(textMarginY)", "textMarginY"], + "strValue": "data(textMarginY)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "textMarginY" + }, + { + "name": "text-margin-x", + "value": ["data(textMarginX)", "textMarginX"], + "strValue": "data(textMarginX)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "textMarginX" + } + ], + "mappedProperties": [ + { + "name": "width", + "value": ["data(shapeWidth)", "shapeWidth"], + "strValue": "data(shapeWidth)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "shapeWidth" + }, + { + "name": "height", + "value": ["data(shapeHeight)", "shapeHeight"], + "strValue": "data(shapeHeight)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "shapeHeight" + }, + { + "name": "text-margin-y", + "value": ["data(textMarginY)", "textMarginY"], + "strValue": "data(textMarginY)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "textMarginY" + }, + { + "name": "text-margin-x", + "value": ["data(textMarginX)", "textMarginX"], + "strValue": "data(textMarginX)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "textMarginX" + } + ], + "index": 10 + }, + { + "selector": { + "0": { + "checks": [{ "type": 0, "value": "nodes" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "font-family", + "value": ["Karla", "Karla"], + "strValue": "Karla" + }, + { + "name": "background-color", + "value": [255, 255, 255], + "pfValue": [255, 255, 255], + "strValue": "rgb(255,255,255)" + }, + { + "name": "border-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "label", + "value": ["data(label)", "label"], + "strValue": "data(label)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "label" + }, + { "name": "text-wrap", "value": "wrap", "strValue": "wrap" }, + { + "name": "text-max-width", + "value": ["data(width)", "width"], + "strValue": "data(width)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "width" + }, + { + "name": "padding", + "value": 6, + "strValue": "6px", + "units": "px", + "pfValue": 6 + }, + { + "name": "padding", + "value": 6, + "strValue": "6px", + "units": "px", + "pfValue": 6 + }, + { + "name": "padding", + "value": 6, + "strValue": "6px", + "units": "px", + "pfValue": 6 + }, + { + "name": "padding", + "value": 6, + "strValue": "6px", + "units": "px", + "pfValue": 6 + }, + { "name": "text-valign", "value": "center", "strValue": "center" }, + { "name": "text-halign", "value": "center", "strValue": "center" }, + { + "name": "border-width", + "value": 0.75, + "strValue": "0.75px", + "units": "px", + "pfValue": 0.75 + }, + { "name": "shape", "value": "rectangle", "strValue": "rectangle" }, + { + "name": "line-height", + "value": 1.25, + "strValue": "1.25", + "pfValue": 1.25 + } + ], + "mappedProperties": [ + { + "name": "label", + "value": ["data(label)", "label"], + "strValue": "data(label)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "label" + }, + { + "name": "text-max-width", + "value": ["data(width)", "width"], + "strValue": "data(width)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "width" + } + ], + "index": 11 + }, + { + "selector": { + "0": { + "checks": [{ "type": 0, "value": "edges" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "loop-direction", + "value": 0, + "strValue": "0deg", + "units": "deg", + "pfValue": 0 + }, + { + "name": "loop-sweep", + "value": 20, + "strValue": "20deg", + "units": "deg", + "pfValue": 0.3490658503988659 + }, + { + "name": "width", + "value": 0.75, + "strValue": "0.75px", + "units": "px", + "pfValue": 0.75 + }, + { + "name": "text-background-opacity", + "value": 1, + "strValue": "1", + "pfValue": 1 + }, + { + "name": "text-background-color", + "value": [255, 255, 255], + "pfValue": [255, 255, 255], + "strValue": "rgb(255,255,255)" + }, + { + "name": "text-background-padding", + "value": 3, + "strValue": "3px", + "units": "px", + "pfValue": 3 + }, + { + "name": "line-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "target-arrow-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "source-arrow-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "target-arrow-shape", + "value": "triangle", + "strValue": "triangle" + }, + { "name": "arrow-scale", "value": 1, "strValue": "1", "pfValue": 1 }, + { "name": "curve-style", "value": "bezier", "strValue": "bezier" }, + { + "name": "label", + "value": ["data(label)", "label"], + "strValue": "data(label)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "label" + }, + { + "name": "color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { "name": "text-valign", "value": "center", "strValue": "center" }, + { "name": "text-wrap", "value": "wrap", "strValue": "wrap" }, + { + "name": "font-family", + "value": ["Karla", "Karla"], + "strValue": "Karla" + }, + { "name": "text-halign", "value": "center", "strValue": "center" }, + { + "name": "text-rotation", + "value": "autorotate", + "strValue": "autorotate" + }, + { + "name": "target-distance-from-node", + "value": 1, + "strValue": "1px", + "units": "px", + "pfValue": 1 + }, + { + "name": "source-distance-from-node", + "value": 0, + "strValue": "0px", + "units": "px", + "pfValue": 0 + } + ], + "mappedProperties": [ + { + "name": "label", + "value": ["data(label)", "label"], + "strValue": "data(label)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "label" + } + ], + "index": 12 + }, + { + "selector": { + "0": { + "checks": [{ "type": 7, "value": ":parent" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ":parent", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "text-valign", "value": "top", "strValue": "top" }, + { "name": "text-halign", "value": "center", "strValue": "center" }, + { + "name": "text-margin-y", + "value": -6, + "strValue": "-6px", + "units": "px", + "pfValue": -6 + }, + { "name": "text-wrap", "value": "none", "strValue": "none" } + ], + "mappedProperties": [], + "index": 13 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "black" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.black", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "background-opacity", + "value": 1, + "strValue": "1", + "pfValue": 1 + }, + { + "name": "border-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "color", + "value": [255, 255, 255], + "pfValue": [255, 255, 255], + "strValue": "rgb(255,255,255)" + } + ], + "mappedProperties": [], + "index": 14 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "white" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.white", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [255, 255, 255], + "pfValue": [255, 255, 255], + "strValue": "rgb(255,255,255)" + }, + { + "name": "background-opacity", + "value": 1, + "strValue": "1", + "pfValue": 1 + }, + { + "name": "border-color", + "value": [255, 255, 255], + "pfValue": [255, 255, 255], + "strValue": "rgb(255,255,255)" + }, + { + "name": "color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + } + ], + "mappedProperties": [], + "index": 15 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "green" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.green", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [1, 216, 87], + "pfValue": [1, 216, 87], + "strValue": "rgb(1,216,87)" + }, + { + "name": "background-opacity", + "value": 1, + "strValue": "1", + "pfValue": 1 + }, + { + "name": "border-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + } + ], + "mappedProperties": [], + "index": 16 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "yellow" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.yellow", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [255, 207, 13], + "pfValue": [255, 207, 13], + "strValue": "rgb(255,207,13)" + }, + { + "name": "background-opacity", + "value": 1, + "strValue": "1", + "pfValue": 1 + }, + { + "name": "border-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + } + ], + "mappedProperties": [], + "index": 17 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "blue" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.blue", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [97, 114, 249], + "pfValue": [97, 114, 249], + "strValue": "rgb(97,114,249)" + }, + { + "name": "background-opacity", + "value": 1, + "strValue": "1", + "pfValue": 1 + }, + { + "name": "border-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "color", + "value": [255, 255, 255], + "pfValue": [255, 255, 255], + "strValue": "rgb(255,255,255)" + } + ], + "mappedProperties": [], + "index": 18 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "orange" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.orange", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [255, 112, 68], + "pfValue": [255, 112, 68], + "strValue": "rgb(255,112,68)" + }, + { + "name": "background-opacity", + "value": 1, + "strValue": "1", + "pfValue": 1 + }, + { + "name": "border-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + } + ], + "mappedProperties": [], + "index": 19 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "purple" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.purple", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [164, 146, 255], + "pfValue": [164, 146, 255], + "strValue": "rgb(164,146,255)" + }, + { + "name": "background-opacity", + "value": 1, + "strValue": "1", + "pfValue": 1 + }, + { + "name": "border-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + } + ], + "mappedProperties": [], + "index": 20 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "red" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.red", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [250, 35, 35], + "pfValue": [250, 35, 35], + "strValue": "rgb(250,35,35)" + }, + { + "name": "background-opacity", + "value": 1, + "strValue": "1", + "pfValue": 1 + }, + { + "name": "border-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + } + ], + "mappedProperties": [], + "index": 21 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "gray" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.gray", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-color", + "value": [170, 170, 170], + "pfValue": [170, 170, 170], + "strValue": "rgb(170,170,170)" + }, + { + "name": "background-opacity", + "value": 1, + "strValue": "1", + "pfValue": 1 + }, + { + "name": "border-color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + }, + { + "name": "color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + } + ], + "mappedProperties": [], + "index": 22 + }, + { + "selector": { + "0": { + "checks": [{ "type": 0, "value": "edges" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "text-background-color", + "value": [255, 255, 255], + "pfValue": [255, 255, 255], + "strValue": "rgb(255,255,255)" + } + ], + "mappedProperties": [], + "index": 23 + }, + { + "selector": { + "0": { + "checks": [{ "type": 7, "value": ":parent" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ":parent", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "color", + "value": [0, 0, 0], + "pfValue": [0, 0, 0], + "strValue": "rgb(0,0,0)" + } + ], + "mappedProperties": [], + "index": 24 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "rectangle" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".rectangle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "rectangle", "strValue": "rectangle" } + ], + "mappedProperties": [], + "index": 25 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "roundrectangle" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".roundrectangle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "shape", + "value": "roundrectangle", + "strValue": "roundrectangle" + } + ], + "mappedProperties": [], + "index": 26 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "ellipse" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".ellipse", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "ellipse", "strValue": "ellipse" } + ], + "mappedProperties": [], + "index": 27 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "triangle" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".triangle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "triangle", "strValue": "triangle" } + ], + "mappedProperties": [], + "index": 28 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "pentagon" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".pentagon", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "pentagon", "strValue": "pentagon" } + ], + "mappedProperties": [], + "index": 29 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "hexagon" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".hexagon", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "hexagon", "strValue": "hexagon" } + ], + "mappedProperties": [], + "index": 30 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "heptagon" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".heptagon", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "heptagon", "strValue": "heptagon" } + ], + "mappedProperties": [], + "index": 31 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "octagon" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".octagon", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "octagon", "strValue": "octagon" } + ], + "mappedProperties": [], + "index": 32 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "star" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".star", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [{ "name": "shape", "value": "star", "strValue": "star" }], + "mappedProperties": [], + "index": 33 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "barrel" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".barrel", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "barrel", "strValue": "barrel" } + ], + "mappedProperties": [], + "index": 34 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "diamond" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".diamond", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "diamond", "strValue": "diamond" } + ], + "mappedProperties": [], + "index": 35 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "vee" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".vee", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [{ "name": "shape", "value": "vee", "strValue": "vee" }], + "mappedProperties": [], + "index": 36 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "rhomboid" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".rhomboid", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "rhomboid", "strValue": "rhomboid" } + ], + "mappedProperties": [], + "index": 37 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "right-rhomboid" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".right-rhomboid", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "shape", + "value": "right-rhomboid", + "strValue": "right-rhomboid" + } + ], + "mappedProperties": [], + "index": 38 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "polygon" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".polygon", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "polygon", "strValue": "polygon" } + ], + "mappedProperties": [], + "index": 39 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "tag" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".tag", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [{ "name": "shape", "value": "tag", "strValue": "tag" }], + "mappedProperties": [], + "index": 40 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "round-rectangle" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".round-rectangle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "shape", + "value": "round-rectangle", + "strValue": "round-rectangle" + } + ], + "mappedProperties": [], + "index": 41 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "cut-rectangle" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".cut-rectangle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "cut-rectangle", "strValue": "cut-rectangle" } + ], + "mappedProperties": [], + "index": 42 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "bottom-round-rectangle" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".bottom-round-rectangle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "shape", + "value": "bottom-round-rectangle", + "strValue": "bottom-round-rectangle" + } + ], + "mappedProperties": [], + "index": 43 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "concave-hexagon" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".concave-hexagon", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "shape", + "value": "concave-hexagon", + "strValue": "concave-hexagon" + } + ], + "mappedProperties": [], + "index": 44 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "circle" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".circle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "shape", "value": "ellipse", "strValue": "ellipse" }, + { + "name": "height", + "value": ["data(width)", "width"], + "strValue": "data(width)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "width" + } + ], + "mappedProperties": [ + { + "name": "height", + "value": ["data(width)", "width"], + "strValue": "data(width)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "width" + } + ], + "index": 45 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "dashed" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.dashed", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "line-style", "value": "dashed", "strValue": "dashed" } + ], + "mappedProperties": [], + "index": 46 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "dotted" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.dotted", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "line-style", "value": "dotted", "strValue": "dotted" } + ], + "mappedProperties": [], + "index": 47 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "solid" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.solid", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "line-style", "value": "solid", "strValue": "solid" } + ], + "mappedProperties": [], + "index": 48 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-triangle" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-triangle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "source-arrow-shape", + "value": "triangle", + "strValue": "triangle" + } + ], + "mappedProperties": [], + "index": 49 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-triangle" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-triangle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "target-arrow-shape", + "value": "triangle", + "strValue": "triangle" + } + ], + "mappedProperties": [], + "index": 50 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-triangle-tee" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-triangle-tee", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "source-arrow-shape", + "value": "triangle-tee", + "strValue": "triangle-tee" + } + ], + "mappedProperties": [], + "index": 51 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-triangle-tee" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-triangle-tee", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "target-arrow-shape", + "value": "triangle-tee", + "strValue": "triangle-tee" + } + ], + "mappedProperties": [], + "index": 52 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-circle-triangle" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-circle-triangle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "source-arrow-shape", + "value": "circle-triangle", + "strValue": "circle-triangle" + } + ], + "mappedProperties": [], + "index": 53 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-circle-triangle" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-circle-triangle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "target-arrow-shape", + "value": "circle-triangle", + "strValue": "circle-triangle" + } + ], + "mappedProperties": [], + "index": 54 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-triangle-cross" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-triangle-cross", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "source-arrow-shape", + "value": "triangle-cross", + "strValue": "triangle-cross" + } + ], + "mappedProperties": [], + "index": 55 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-triangle-cross" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-triangle-cross", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "target-arrow-shape", + "value": "triangle-cross", + "strValue": "triangle-cross" + } + ], + "mappedProperties": [], + "index": 56 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-triangle-backcurve" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-triangle-backcurve", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "source-arrow-shape", + "value": "triangle-backcurve", + "strValue": "triangle-backcurve" + } + ], + "mappedProperties": [], + "index": 57 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-triangle-backcurve" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-triangle-backcurve", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "target-arrow-shape", + "value": "triangle-backcurve", + "strValue": "triangle-backcurve" + } + ], + "mappedProperties": [], + "index": 58 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-vee" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-vee", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "source-arrow-shape", "value": "vee", "strValue": "vee" } + ], + "mappedProperties": [], + "index": 59 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-vee" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-vee", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "target-arrow-shape", "value": "vee", "strValue": "vee" } + ], + "mappedProperties": [], + "index": 60 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-tee" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-tee", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "source-arrow-shape", "value": "tee", "strValue": "tee" } + ], + "mappedProperties": [], + "index": 61 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-tee" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-tee", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "target-arrow-shape", "value": "tee", "strValue": "tee" } + ], + "mappedProperties": [], + "index": 62 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-square" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-square", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "source-arrow-shape", "value": "square", "strValue": "square" } + ], + "mappedProperties": [], + "index": 63 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-square" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-square", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "target-arrow-shape", "value": "square", "strValue": "square" } + ], + "mappedProperties": [], + "index": 64 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-circle" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-circle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "source-arrow-shape", "value": "circle", "strValue": "circle" } + ], + "mappedProperties": [], + "index": 65 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-circle" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-circle", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "target-arrow-shape", "value": "circle", "strValue": "circle" } + ], + "mappedProperties": [], + "index": 66 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-diamond" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-diamond", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "source-arrow-shape", + "value": "diamond", + "strValue": "diamond" + } + ], + "mappedProperties": [], + "index": 67 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-diamond" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-diamond", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "target-arrow-shape", + "value": "diamond", + "strValue": "diamond" + } + ], + "mappedProperties": [], + "index": 68 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-chevron" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-chevron", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "source-arrow-shape", + "value": "chevron", + "strValue": "chevron" + } + ], + "mappedProperties": [], + "index": 69 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-chevron" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-chevron", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "target-arrow-shape", + "value": "chevron", + "strValue": "chevron" + } + ], + "mappedProperties": [], + "index": 70 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "source-none" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.source-none", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "source-arrow-shape", "value": "none", "strValue": "none" } + ], + "mappedProperties": [], + "index": 71 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "edges" }, + { "type": 9, "value": "target-none" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "edge.target-none", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "target-arrow-shape", "value": "none", "strValue": "none" } + ], + "mappedProperties": [], + "index": 72 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "border-solid" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.border-solid", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "border-style", "value": "solid", "strValue": "solid" } + ], + "mappedProperties": [], + "index": 73 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "border-dashed" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.border-dashed", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "border-style", "value": "dashed", "strValue": "dashed" } + ], + "mappedProperties": [], + "index": 74 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "border-dotted" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.border-dotted", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "border-style", "value": "dotted", "strValue": "dotted" } + ], + "mappedProperties": [], + "index": 75 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "border-double" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.border-double", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { "name": "border-style", "value": "double", "strValue": "double" } + ], + "mappedProperties": [], + "index": 76 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 9, "value": "border-none" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node.border-none", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "border-width", + "value": 0, + "strValue": "0px", + "units": "px", + "pfValue": 0 + } + ], + "mappedProperties": [], + "index": 77 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "text-sm" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".text-sm", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "font-size", + "value": 7.5, + "strValue": "7.5px", + "units": "px", + "pfValue": 7.5 + } + ], + "mappedProperties": [], + "index": 78 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "text-lg" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".text-lg", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "font-size", + "value": 15, + "strValue": "15px", + "units": "px", + "pfValue": 15 + } + ], + "mappedProperties": [], + "index": 79 + }, + { + "selector": { + "0": { + "checks": [{ "type": 9, "value": "text-xl" }], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": ".text-xl", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "font-size", + "value": 20, + "strValue": "20px", + "units": "px", + "pfValue": 20 + } + ], + "mappedProperties": [], + "index": 80 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 4, "field": "w" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node[w]", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "width", + "value": ["data(w)", "w"], + "strValue": "data(w)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "w" + } + ], + "mappedProperties": [ + { + "name": "width", + "value": ["data(w)", "w"], + "strValue": "data(w)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "w" + } + ], + "index": 81 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 4, "field": "h" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node[h]", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "height", + "value": ["data(h)", "h"], + "strValue": "data(h)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "h" + } + ], + "mappedProperties": [ + { + "name": "height", + "value": ["data(h)", "h"], + "strValue": "data(h)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "h" + } + ], + "index": 82 + }, + { + "selector": { + "0": { + "checks": [ + { "type": 0, "value": "nodes" }, + { "type": 4, "field": "src" } + ], + "edgeCount": 0, + "compoundCount": 0 + }, + "inputText": "node[src]", + "currentSubject": null, + "compoundCount": 0, + "edgeCount": 0, + "length": 1 + }, + "properties": [ + { + "name": "background-image", + "value": ["data(src)", "src"], + "strValue": "data(src)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "src" + }, + { + "name": "background-fit", + "value": ["cover"], + "pfValue": ["cover"], + "strValue": "cover", + "units": [null] + }, + { + "name": "border-width", + "value": 0, + "strValue": "0px", + "units": "px", + "pfValue": 0 + }, + { "name": "text-valign", "value": "bottom", "strValue": "bottom" }, + { + "name": "text-margin-y", + "value": 5, + "strValue": "5px", + "units": "px", + "pfValue": 5 + } + ], + "mappedProperties": [ + { + "name": "background-image", + "value": ["data(src)", "src"], + "strValue": "data(src)", + "mapped": { + "mapping": true, + "regex": "^data\\s*\\(\\s*([\\w\\.]+)\\s*\\)$" + }, + "field": "src" + } + ], + "index": 83 + } +] diff --git a/app/src/lib/getDefaultChart.ts b/app/src/lib/getDefaultChart.ts index 5f46f4325..e8d3fab43 100644 --- a/app/src/lib/getDefaultChart.ts +++ b/app/src/lib/getDefaultChart.ts @@ -1,8 +1,13 @@ +import { cytoscapeStyle } from "../lib/themes/original"; import { getDefaultText } from "./getDefaultText"; +const defaultMeta = { + cytoscapeStyle, +}; + // TODO: Should be shared with the back-end through a shared package export function getMetaBase() { - return `\n=====\n{"parser":"graph-selector"}\n=====`; + return `\n=====\n${JSON.stringify(defaultMeta, null, 2)}\n=====`; } export function getDefaultChart() { diff --git a/app/src/lib/getElements.ts b/app/src/lib/getElements.ts index d4cb28478..c0d34e5e8 100644 --- a/app/src/lib/getElements.ts +++ b/app/src/lib/getElements.ts @@ -1,18 +1,16 @@ import { ElementDefinition } from "cytoscape"; import { parse, toCytoscapeElements } from "graph-selector"; -import { TGetSize } from "./getGetSize"; +import { getSize } from "./getSize"; /** * Takes the text input and the getSize function * and returns the elements using the specified parser */ -export function getElements( - text: string, - getSize: TGetSize -): ElementDefinition[] { +export function getElements(text: string): ElementDefinition[] { return toCytoscapeElements(parse(text)).map((element) => { - let size: Record = {}; + let size: ReturnType; + if ("w" in element.data || "h" in element.data) { size = { width: element.data.w || "label", diff --git a/app/src/lib/getGetSize.ts b/app/src/lib/getGetSize.ts deleted file mode 100644 index cc4e91d16..000000000 --- a/app/src/lib/getGetSize.ts +++ /dev/null @@ -1,161 +0,0 @@ -import { Theme } from "./themes/constants"; - -export type TGetSize = ReturnType; - -export const fontSizeScalars = { - "text-sm": 0.75, - "text-base": 1, - "text-lg": 1.5, - "text-xl": 2, -}; - -// returns getSize based on theme to determine node size -export function getGetSize(theme: Theme) { - return (label: string, classes: string[]) => { - const resizer = document.getElementById("resizer"); - if (resizer) { - const text = preventCyRenderingBugs(label); - const isSmall = classes.includes("text-sm"); - const isLarge = classes.includes("text-lg"); - const isXLarge = classes.includes("text-xl"); - const scaleFontSize = isSmall - ? "text-sm" - : isLarge - ? "text-lg" - : isXLarge - ? "text-xl" - : "text-base"; - - // We have to write styles imperatively otherwise we get race conditions - const style = { - "max-width": `${getWidth(text.length)}px`, - "font-size": `${ - (theme.font?.fontSize ? 1.27 * theme.font.fontSize : 10) * - fontSizeScalars[scaleFontSize] - }px`, - "line-height": theme.font?.lineHeight, - "font-family": theme.font?.fontFamily, - }; - resizer.setAttribute( - "style", - `${Object.entries(style) - .map(([key, value]) => `${key}: ${value};`) - .join(" ")}` - ); - resizer.innerHTML = text; - - if (resizer.firstChild) { - const range = document.createRange(); - range.selectNodeContents(resizer.firstChild); - const width = Array.from(range.getClientRects()).reduce( - (max, { width }) => (width > max ? width : max), - 0 - ); - const finalSize = { - width, - shapeWidth: width, - height: resizer.clientHeight, - shapeHeight: resizer.clientHeight, - textMarginY: 0, - textMarginX: 0, - }; - - if (classes.includes("circle")) { - if (finalSize.height > finalSize.width) { - finalSize.width = - finalSize.shapeWidth = - finalSize.shapeHeight = - finalSize.height; - } else { - finalSize.height = - finalSize.shapeWidth = - finalSize.shapeHeight = - finalSize.width; - } - } else if ( - classes.includes("triangle") || - classes.includes("round-triangle") - ) { - finalSize.shapeWidth = 2.2 * finalSize.width; - finalSize.shapeHeight = 1.25 * finalSize.height; - finalSize.textMarginY = 0.18 * finalSize.shapeHeight; - } else if ( - classes.includes("diamond") || - classes.includes("round-diamond") - ) { - finalSize.shapeWidth = finalSize.width * 1.5; - finalSize.shapeHeight = finalSize.height * 1.5; - finalSize.textMarginY = 0; - finalSize.textMarginX = 0; - } else if ( - classes.includes("pentagon") || - classes.includes("round-pentagon") - ) { - finalSize.shapeWidth = 1.35 * finalSize.width; - finalSize.textMarginY = 0.1 * finalSize.shapeHeight; - } else if ( - classes.includes("hexagon") || - classes.includes("round-hexagon") - ) { - finalSize.shapeWidth = 1.5 * finalSize.width; - } else if ( - classes.includes("heptagon") || - classes.includes("round-heptagon") - ) { - finalSize.shapeWidth = 1.5 * finalSize.width; - finalSize.textMarginY = 0.05 * finalSize.shapeHeight; - } else if ( - classes.includes("octagon") || - classes.includes("round-octagon") - ) { - finalSize.shapeWidth = 1.25 * finalSize.width; - } else if (classes.includes("star")) { - finalSize.textMarginY = 0.13 * finalSize.height; - finalSize.shapeHeight = finalSize.shapeWidth = - 1.4 * - (finalSize.shapeHeight > finalSize.shapeWidth - ? finalSize.shapeHeight - : finalSize.shapeWidth); - } else if (classes.includes("vee")) { - finalSize.shapeWidth = finalSize.width * 2.5; - finalSize.shapeHeight = finalSize.height * 2.5; - finalSize.textMarginY = 0.01 * finalSize.shapeHeight; - } else if ( - classes.includes("rhomboid") || - classes.includes("right-rhomboid") - ) { - finalSize.shapeWidth = finalSize.width * 2; - } else if (classes.includes("tag") || classes.includes("round-tag")) { - finalSize.shapeWidth = finalSize.width * 1.25; - finalSize.textMarginX = -0.1 * finalSize.shapeWidth; - } else if (classes.includes("concave-hexagon")) { - finalSize.shapeWidth = finalSize.width * 1.5; - } - return finalSize; - } - } - return { - width: "label", - height: "label", - }; - }; -} - -const A = -38.614819; -const B = 33.8993; -/** - * Grow text width based on number of characters - */ -function getWidth(characters: number) { - return Math.max(64, Math.ceil(B * Math.log(characters) + A)); -} - -function preventCyRenderingBugs(str: string) { - return ( - str - // prevent break on hypen - .replace(/-/gm, "‑") - // prevent break on chinese comma - .replace(/，/gm, "‑") - ); -} diff --git a/app/src/lib/getSize.ts b/app/src/lib/getSize.ts new file mode 100644 index 000000000..488bfb2f8 --- /dev/null +++ b/app/src/lib/getSize.ts @@ -0,0 +1,174 @@ +import { useProcessStyleStore } from "./preprocessCytoscapeStyle"; + +export type TGetSize = ReturnType; + +export const fontSizeScalars = { + "text-sm": 0.75, + "text-base": 1, + "text-lg": 1.5, + "text-xl": 2, +}; + +// Somehow this corresponds to a healthy cytoscape size but I have no idea how +const MAGIC_SCALAR = 1.27; + +// returns getSize based on theme to determine node size +export function getSize(label: string, classes: string[]) { + const resizer = document.getElementById("resizer"); + const fontData = useProcessStyleStore.getState().fontData; + + if (!resizer) { + return { + width: "label", + height: "label", + }; + } + + const text = preventCyRenderingBugs(label); + const isSmall = classes.includes("text-sm"); + const isLarge = classes.includes("text-lg"); + const isXLarge = classes.includes("text-xl"); + const scaleFontSize = isSmall + ? "text-sm" + : isLarge + ? "text-lg" + : isXLarge + ? "text-xl" + : "text-base"; + + const fontSize: number = fontData["fontSize"] + ? typeof fontData["fontSize"] === "number" + ? fontData["fontSize"] + : parseInt(fontData["fontSize"], 10) + : 10; + + // We have to write styles imperatively otherwise we get race conditions + const style = { + "max-width": `${getWidth(text.length)}px`, + ...fontData, + "font-size": `${ + MAGIC_SCALAR * fontSize * fontSizeScalars[scaleFontSize] + }px`, + }; + resizer.setAttribute( + "style", + `${Object.entries(style) + .map(([key, value]) => `${camelToKebabCase(key)}: ${value};`) + .join(" ")}` + ); + + resizer.innerHTML = text; + + if (resizer.firstChild) { + const range = document.createRange(); + range.selectNodeContents(resizer.firstChild); + const width = Array.from(range.getClientRects()).reduce( + (max, { width }) => (width > max ? width : max), + 0 + ); + const finalSize = { + width, + shapeWidth: width, + height: resizer.clientHeight, + shapeHeight: resizer.clientHeight, + textMarginY: 0, + textMarginX: 0, + }; + + if (classes.includes("circle")) { + if (finalSize.height > finalSize.width) { + finalSize.width = + finalSize.shapeWidth = + finalSize.shapeHeight = + finalSize.height; + } else { + finalSize.height = + finalSize.shapeWidth = + finalSize.shapeHeight = + finalSize.width; + } + } else if ( + classes.includes("triangle") || + classes.includes("round-triangle") + ) { + finalSize.shapeWidth = 2.2 * finalSize.width; + finalSize.shapeHeight = 1.25 * finalSize.height; + finalSize.textMarginY = 0.18 * finalSize.shapeHeight; + } else if ( + classes.includes("diamond") || + classes.includes("round-diamond") + ) { + finalSize.shapeWidth = finalSize.width * 1.5; + finalSize.shapeHeight = finalSize.height * 1.5; + finalSize.textMarginY = 0; + finalSize.textMarginX = 0; + } else if ( + classes.includes("pentagon") || + classes.includes("round-pentagon") + ) { + finalSize.shapeWidth = 1.35 * finalSize.width; + finalSize.textMarginY = 0.1 * finalSize.shapeHeight; + } else if ( + classes.includes("hexagon") || + classes.includes("round-hexagon") + ) { + finalSize.shapeWidth = 1.5 * finalSize.width; + } else if ( + classes.includes("heptagon") || + classes.includes("round-heptagon") + ) { + finalSize.shapeWidth = 1.5 * finalSize.width; + finalSize.textMarginY = 0.05 * finalSize.shapeHeight; + } else if ( + classes.includes("octagon") || + classes.includes("round-octagon") + ) { + finalSize.shapeWidth = 1.25 * finalSize.width; + } else if (classes.includes("star")) { + finalSize.textMarginY = 0.13 * finalSize.height; + finalSize.shapeHeight = finalSize.shapeWidth = + 1.4 * + (finalSize.shapeHeight > finalSize.shapeWidth + ? finalSize.shapeHeight + : finalSize.shapeWidth); + } else if (classes.includes("vee")) { + finalSize.shapeWidth = finalSize.width * 2.5; + finalSize.shapeHeight = finalSize.height * 2.5; + finalSize.textMarginY = 0.01 * finalSize.shapeHeight; + } else if ( + classes.includes("rhomboid") || + classes.includes("right-rhomboid") + ) { + finalSize.shapeWidth = finalSize.width * 2; + } else if (classes.includes("tag") || classes.includes("round-tag")) { + finalSize.shapeWidth = finalSize.width * 1.25; + finalSize.textMarginX = -0.1 * finalSize.shapeWidth; + } else if (classes.includes("concave-hexagon")) { + finalSize.shapeWidth = finalSize.width * 1.5; + } + return finalSize; + } +} + +const A = -38.614819; +const B = 33.8993; +/** + * Grow text width based on number of characters + */ +function getWidth(characters: number) { + return Math.max(64, Math.ceil(B * Math.log(characters) + A)); +} + +function preventCyRenderingBugs(str: string) { + return ( + str + // prevent break on hypen + .replace(/-/gm, "‑") + // prevent break on chinese comma + .replace(/，/gm, "‑") + ); +} + +function camelToKebabCase(str: string) { + return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(); +} diff --git a/app/src/lib/getUserStyle.ts b/app/src/lib/getUserStyle.ts index ab6f4b309..b96c9a07a 100644 --- a/app/src/lib/getUserStyle.ts +++ b/app/src/lib/getUserStyle.ts @@ -1,5 +1,7 @@ import { StylesheetStyle } from "cytoscape"; +import { usePreviewTheme } from "../components/ThemePicker"; +import { preprocessCytoscapeStyle } from "./preprocessCytoscapeStyle"; import { useDoc } from "./useDoc"; /** @@ -12,3 +14,21 @@ export function getUserStyle() { // const theme = useGraphTheme(options.graphOptions.theme); // That's how we're currently grabbing the theme from the name // Believe it does some async loading behind the scenes + +export function getCytoscapeStyle() { + let style = usePreviewTheme.getState().cytoscapeStyle; + if (!style) style = useDoc.getState().meta?.cytoscapeStyle as string; + if (typeof style !== "string" || !style) return ""; + const result = preprocessCytoscapeStyle(style); + return result.style; +} + +export function useCytoscapeStyle() { + const previewStyle = usePreviewTheme((s) => s.cytoscapeStyle); + const docStyle = useDoc((s) => s.meta?.cytoscapeStyle as string); + const style = previewStyle ?? docStyle; + if (typeof style !== "string" || !style) return ""; + return style; + // const result = preprocessCytoscapeStyle(style); + // return result.style; +} diff --git a/app/src/lib/graphOptions.ts b/app/src/lib/graphOptions.ts index ca53a3015..fb597251a 100644 --- a/app/src/lib/graphOptions.ts +++ b/app/src/lib/graphOptions.ts @@ -57,3 +57,17 @@ export const themes: SelectOption[] = [ { label: () => t`Playbook`, value: "playbook", sponsorOnly: true }, { label: () => t`Museum`, value: "museum", sponsorOnly: true }, ]; + +// const validThemeValues = [ +// "original", +// "original-dark", +// "excalidraw", +// "playbook", +// ]; + +export const validThemes = themes; + +/** Eventually switch to limited themes */ +// themes.filter((theme) => +// validThemeValues.includes(theme.value) +// ); diff --git a/app/src/lib/graphThemes.tsx b/app/src/lib/graphThemes.tsx index 2461334f5..6912c3b6e 100644 --- a/app/src/lib/graphThemes.tsx +++ b/app/src/lib/graphThemes.tsx @@ -1,5 +1,6 @@ import { useQuery } from "react-query"; +import { useProcessStyleStore } from "./preprocessCytoscapeStyle"; import { queryClient } from "./queries"; import { Theme } from "./themes/constants"; import { useDoc } from "./useDoc"; @@ -27,6 +28,10 @@ async function dynamicActivate(name: string): Promise { declare global { interface Window { + /** + * Here we store the fonts that are loaded as base64 encoded strings + * so we can add them to our svg exports + */ __flowchartFunBase64EncodedFonts: Record; } } @@ -107,19 +112,28 @@ export function useTheme() { /** * Get the background color, user override, theme, or default */ -export function useBackgroundColor(theme?: Theme) { - const bgUser = useDoc((state) => state.meta?.background); - const bgTheme = theme?.bg; - const bgDefault = "#ffffff"; - return (bgUser ?? bgTheme ?? bgDefault) as string; +const bgDefault = "#ffffff"; +export function useBackgroundColor() { + return useProcessStyleStore((s) => s.variables?.background ?? bgDefault); +} + +export function getBackgroundColor() { + return useProcessStyleStore.getState().variables?.background ?? bgDefault; } /** - * one-shot, get background color + * Temporarily need a store of colors for use in the + * Node Context menu. The context menu will eventually + * be replaced using intellisense so this won't be necessary. */ -export function getBackgroundColor(theme: Theme) { - const bgUser = useDoc.getState().meta?.background; - const bgTheme = theme?.bg; - const bgDefault = "#ffffff"; - return (bgUser ?? bgTheme ?? bgDefault) as string; -} +export const tmpThemeColors = { + black: "#000000", + white: "#ffffff", + green: "#01d857", + yellow: "#ffcf0d", + blue: "#6172F9", + orange: "#ff7044", + purple: "#a492ff", + red: "#fa2323", + gray: "#aaaaaa", +}; diff --git a/app/src/lib/graphUtilityClasses.ts b/app/src/lib/graphUtilityClasses.ts index cbc1686a6..be2b2aaa0 100644 --- a/app/src/lib/graphUtilityClasses.ts +++ b/app/src/lib/graphUtilityClasses.ts @@ -1,6 +1,6 @@ import { Stylesheet } from "cytoscape"; -import { fontSizeScalars } from "./getGetSize"; +import { fontSizeScalars } from "./getSize"; import { defaultFontSize } from "./themes/constants"; export const shapes: cytoscape.Css.Node["shape"][] = [ diff --git a/app/src/lib/prepareChart/prepareChart.test.ts b/app/src/lib/prepareChart/prepareChart.test.ts index 6dc041850..9892df599 100644 --- a/app/src/lib/prepareChart/prepareChart.test.ts +++ b/app/src/lib/prepareChart/prepareChart.test.ts @@ -1,12 +1,18 @@ import { readFileSync } from "fs"; import { join } from "path"; +import { cytoscapeStyle as clayStyle } from "../themes/clay"; +import { cytoscapeStyle as eggsStyle } from "../themes/eggs"; +import { cytoscapeStyle as style } from "../themes/original"; +import { cytoscapeStyle as darkStyle } from "../themes/original-dark"; import { initialDoc } from "../useDoc"; import { prepareChart } from "./prepareChart"; describe("prepareChart", () => { - test("can migrate old files with yaml", () => { - expect(prepareChart(getFixture("example1"), initialDoc.details)).toEqual({ + test("can migrate old files with yaml", async () => { + expect( + await prepareChart(getFixture("example1"), initialDoc.details) + ).toEqual({ text: `This app works by typing Indenting creates a link to the current line any text: before a colon creates a label @@ -27,14 +33,16 @@ Have fun! 🎉 layout: { name: "cose", }, - theme: "original-dark", + cytoscapeStyle: darkStyle, }, details: initialDoc.details, }); }); - test("can migrate old files with hidden options", () => { - expect(prepareChart(getFixture("example2"), initialDoc.details)).toEqual({ + test("can migrate old files with hidden options", async () => { + expect( + await prepareChart(getFixture("example2"), initialDoc.details) + ).toEqual({ text: `long label text (c) longer label text @@ -47,21 +55,28 @@ longer label text N150: { x: 112.02947631404595, y: 237.1117560181095 }, c: { x: 91.4921875, y: 138.375 }, }, + cytoscapeStyle: style, }, details: initialDoc.details, }); }); - test("can migrate old files with neither", () => { - expect(prepareChart(getFixture("example3"), initialDoc.details)).toEqual({ + test("can migrate old files with neither", async () => { + expect( + await prepareChart(getFixture("example3"), initialDoc.details) + ).toEqual({ text: `i am but a simple file\n`, - meta: {}, + meta: { + cytoscapeStyle: style, + }, details: initialDoc.details, }); }); - test("can migrate old file with both", () => { - expect(prepareChart(getFixture("example4"), initialDoc.details)).toEqual({ + test("can migrate old file with both", async () => { + expect( + await prepareChart(getFixture("example4"), initialDoc.details) + ).toEqual({ text: `이 앱은 타이핑으로 작동합니다 들여쓰기는 현재 줄에 대한 링크를 생성합니다 콜론 앞의 모든 텍스트는: 레이블을 생성합니다 @@ -82,7 +97,7 @@ longer label text layout: { name: "cose", }, - theme: "clay", + cytoscapeStyle: clayStyle, nodePositions: { N14e: { x: 260.27143997679184, y: 182.9157088415619 }, N14f: { x: 67.24466938513544, y: 237.52532493169429 }, @@ -96,22 +111,26 @@ longer label text }); }); - test("can migrate new file", () => { - expect(prepareChart(getFixture("example5"), initialDoc.details)).toEqual({ + test("can migrate new file", async () => { + expect( + await prepareChart(getFixture("example5"), initialDoc.details) + ).toEqual({ text: `hello\n to: the world\n`, meta: { layout: { name: "cose", rankDir: "BT", }, - theme: "eggs", + cytoscapeStyle: eggsStyle, }, details: initialDoc.details, }); }); - test("can merge a mix of old and new", () => { - expect(prepareChart(getFixture("example6"), initialDoc.details)).toEqual({ + test("can merge a mix of old and new", async () => { + expect( + await prepareChart(getFixture("example6"), initialDoc.details) + ).toEqual({ meta: { layout: { name: "cose", @@ -133,7 +152,7 @@ longer label text }, }, ], - theme: "eggs", + cytoscapeStyle: eggsStyle, }, text: `You can set all lines to be dashed B @@ -148,23 +167,25 @@ longer label text }); }); - test("trims whitespace and adds one newline to text", () => { - expect(prepareChart(getFixture("example7"), initialDoc.details)).toEqual({ + test("trims whitespace and adds one newline to text", async () => { + expect( + await prepareChart(getFixture("example7"), initialDoc.details) + ).toEqual({ text: `hello\n to the: world\n`, meta: { layout: { name: "cose", rankDir: "BT", }, - theme: "eggs", + cytoscapeStyle: eggsStyle, }, details: initialDoc.details, }); }); - test("if a document has a parser it shouldn't change", () => { + test("if a document has a parser it shouldn't change", async () => { expect( - prepareChart(getFixture("example8"), { + await prepareChart(getFixture("example8"), { ...initialDoc.details, }) ).toEqual({ @@ -175,6 +196,7 @@ longer label text }, meta: { parser: "v1", + cytoscapeStyle: style, }, text: "old\n [x] parser\n", }); diff --git a/app/src/lib/prepareChart/prepareChart.ts b/app/src/lib/prepareChart/prepareChart.ts index ddb4377c3..5560a38f3 100644 --- a/app/src/lib/prepareChart/prepareChart.ts +++ b/app/src/lib/prepareChart/prepareChart.ts @@ -6,14 +6,13 @@ import { HIDDEN_GRAPH_OPTIONS_DIVIDER, newDelimiters, } from "../constants"; +import { preprocessCytoscapeStyle } from "../preprocessCytoscapeStyle"; import { Details, useDoc } from "../useDoc"; /** - * ### Goals - * - store working graphs in memory regardless of whether they - * are local or hosted. This will allow us to use the same code for both. - *- handle the transition from embedded yaml and hidden options - * to a single meta section (embedded JSON below the document). + * A function which makes sure that the document loaded externally + * or from local storage matches the format that we expect. It parses + * it and puts it into a zustand store for use around the app * * ### Terminology * - `document` is the complete file contents (local or hosted) @@ -21,7 +20,7 @@ import { Details, useDoc } from "../useDoc"; * - `meta` is the meta section of the document */ -export function prepareChart(doc: string, details: Details) { +export async function prepareChart(doc: string, details: Details) { let text = doc; let jsonMeta = {}; @@ -65,9 +64,26 @@ export function prepareChart(doc: string, details: Details) { useDoc.setState({ text, meta, details }, false, "prepareChart"); + // check for theme + await replaceThemeWithCytoscapeStyle(meta); + return { text, meta, details, }; } + +async function replaceThemeWithCytoscapeStyle(meta: Record) { + if (meta.cytoscapeStyle) return; + const theme = (meta.theme as string) ?? "original"; + const { cytoscapeStyle = "" } = await import(`../themes/${theme}`); + + // set the cytoscapeStyle and remove the theme + if (cytoscapeStyle) { + meta.cytoscapeStyle = cytoscapeStyle; + preprocessCytoscapeStyle(cytoscapeStyle); + } + + delete meta.theme; +} diff --git a/app/src/lib/preprocessCytoscapeStyle.ts b/app/src/lib/preprocessCytoscapeStyle.ts new file mode 100644 index 000000000..56b98c1eb --- /dev/null +++ b/app/src/lib/preprocessCytoscapeStyle.ts @@ -0,0 +1,242 @@ +import { CSSProperties } from "react"; +import { useQuery } from "react-query"; +import { create } from "zustand"; +import { devtools } from "zustand/middleware"; + +import { useUnmountStore } from "./useUnmountStore"; + +/** + * Create a zustand store to hold imports requested by styles + * and any other artifacts of processing styles + */ +export const useProcessStyleStore = create<{ + styleImports: string[]; + fontData: CSSProperties; + variables: Record; +}>()( + devtools( + (_set) => ({ + styleImports: [], + fontData: {}, + variables: {}, + }), + { + name: "useStyleImports", + } + ) +); + +/** + * Takes the users cytoscape style and pulls off any font imports + * and makes sure they are enqued to load, before the style hits cytoscape + */ +export function preprocessCytoscapeStyle(style: string) { + const importRegex = /@import\s+url\(['"]([^'"]+)['"]\);/; + const imports = []; + let match = style.match(importRegex); + while (match) { + imports.push(match[1]); + // remove the import from the style + style = style.replace(match[0], ""); + // find the next import + match = style.match(importRegex); + } + // add the imports to the store + useProcessStyleStore.setState({ styleImports: imports }); + + // get font data + const fontData = findFontData(style); + + // process variables + const { updatedScss, variables } = processScss(style); + + // set font data + useProcessStyleStore.setState({ fontData, variables }); + + return { style: updatedScss, imports, variables }; +} + +interface FontFaceDescriptor { + [key: string]: string; +} + +interface FontFaceInput { + fontFamily: string; + src: string; + descriptors: FontFaceDescriptor; +} + +/** + * Reads a CSS string and parses the font-face rules in it + */ +function parseFontFaces(cssString: string): FontFaceInput[] { + const styleSheet = new CSSStyleSheet(); + styleSheet.replaceSync(cssString); + + const fontFaces: FontFaceInput[] = []; + + for (const rule of styleSheet.cssRules) { + if (rule.constructor.name === "CSSFontFaceRule") { + if (!isCSSStyleRule(rule)) continue; + const fontFace: FontFaceInput = { + fontFamily: rule.style.getPropertyValue("font-family"), + src: rule.style.getPropertyValue("src"), + descriptors: {}, + }; + + for (let i = 0; i < rule.style.length; i++) { + const property = rule.style[i]; + if (property !== "font-family" && property !== "src") { + fontFace.descriptors[sanitizeDescriptorName(property)] = + rule.style.getPropertyValue(property); + } + } + + fontFaces.push(fontFace); + } + } + + return fontFaces; +} + +/** + * The descriptors in a CSS font-face rule are hyphenated, but the + * FontFace API expects them to be camelCase + */ +function sanitizeDescriptorName(name: string): string { + if (name.startsWith("font-")) { + name = name.slice(5); + } + + return name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase()); +} + +function isCSSStyleRule(rule: CSSRule): rule is CSSStyleRule { + return "style" in rule; +} + +/** + * Loads fonts using the FontFace API + */ +async function loadFonts(fonts: FontFaceInput[]) { + const fontPromises: Promise[] = []; + + for (const font of fonts) { + const fontFace = new FontFace(font.fontFamily, font.src, font.descriptors); + fontPromises.push( + (async () => { + // Wait for the font to be loaded + await fontFace.load(); + // Add the font to the document + document.fonts.add(fontFace); + return fontFace; + })() + ); + } + + return Promise.all(fontPromises); +} + +/** + * Takes a CSS Url and loads the fonts from it + */ +async function loadFontsFromCSS(url: string): Promise { + const response = await fetch(url); + const cssString = await response.text(); + const fontFaces = parseFontFaces(cssString); + await loadFonts(fontFaces); +} + +/** + * A hook which loads all the fonts from the style imports found in the theme css + */ +export function useCytoscapeStyleImports() { + const { styleImports } = useProcessStyleStore(); + return useQuery({ + queryKey: ["importStyle", ...styleImports], + queryFn: async () => await Promise.all(styleImports.map(loadFontsFromCSS)), + suspense: true, + cacheTime: Infinity, + staleTime: Infinity, + onSuccess: () => { + useUnmountStore.setState({ + unmount: true, + }); + }, + }); +} + +function findFontData(cssString: string) { + // Create a new CSSStyleSheet and add the CSS rules from the style element + const sheet = new CSSStyleSheet(); + sheet.replaceSync(cssString); + + const styleRules = Array.from(sheet.cssRules).filter( + (r) => r.constructor.name === "CSSStyleRule" + ) as CSSStyleRule[]; + + // Get the CSS rule for the specified selector + const rule = styleRules.find((r) => r.selectorText === "node"); + + if (!rule) return {}; + + // Get the font-related properties from the rule + const fontData = { + fontFamily: rule.style.fontFamily, + fontWeight: rule.style.fontWeight, + fontStyle: rule.style.fontStyle, + fontSize: rule.style.fontSize, + lineHeight: rule.style.lineHeight, + letterSpacing: rule.style.letterSpacing, + wordSpacing: rule.style.wordSpacing, + textTransform: rule.style.textTransform, + textDecoration: rule.style.textDecoration, + textAlign: rule.style.textAlign, + whiteSpace: rule.style.whiteSpace, + }; + + // delete any properties that are empty strings + for (const key in fontData) { + if (fontData[key as keyof typeof fontData] === "") { + delete fontData[key as keyof typeof fontData]; + } + } + + // Return the font-related data + return fontData; +} + +/** Reads any unindented scss-style variables and replaces them throughout the rest of the css */ +function processScss(scss: string): { + updatedScss: string; + variables: { [key: string]: string }; +} { + // Create an object to store the variables + const variables: { [key: string]: string } = {}; + + // Split the SCSS into lines + const lines = scss.split("\n"); + + // Filter out the variable declarations and store them in the variables object + const updatedLines = lines.filter((line) => { + const match = line.match(/^\$([a-z0-9-_]+):\s*(.+);$/i); + if (match) { + variables[match[1]] = match[2]; + return false; + } + return true; + }); + + // Replace references to the variables with their values + const updatedScss = updatedLines + .map((line) => { + for (const variable in variables) { + const regex = new RegExp(`\\$${variable}`, "g"); + line = line.replace(regex, variables[variable]); + } + return line; + }) + .join("\n"); + + return { updatedScss, variables }; +} diff --git a/app/src/lib/themes/_cyberpunk_unfinished.ts b/app/src/lib/themes/_cyberpunk_unfinished.ts deleted file mode 100644 index d79c63d74..000000000 --- a/app/src/lib/themes/_cyberpunk_unfinished.ts +++ /dev/null @@ -1,134 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-nocheck - -import { Theme } from "./constants"; - -const colors = { - black: "#333333", - white: "#FEFFFD", - green: "#6ADB7C", - yellow: "#FCFE3B", - blue: "#1CFEFE", - orange: "#EC7957", - purple: "#7842ED", - red: "#E65BC9", - gray: "#cacaca", -}; - -const fontFamily = "Murrx"; -const fontSize = 10; -const backgroundColor = "#050A08"; -const arrowColor = colors.purple; -const lineHeight = 1.2; -const padding = 1; -const borderWidth = 1.88; - -const cyberpunk: Theme = { - value: "cyberpunk", - bg: backgroundColor, - minWidth: 0, - minHeight: 0, - font: { - fontFamily, - fontSize, - lineHeight, - // files: [{ name: fontFamily, url: "Sporting_Grotesque-Regular_web.woff2" }], - }, - 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: { - "background-color": backgroundColor, - "background-opacity": 0.5, - "font-family": fontFamily, - "font-size": fontSize, - "border-color": arrowColor, - color: colors.green, - "text-justification": "left", - // "text-margin-y": -1, - label: "data(label)", - "text-wrap": "wrap", - "text-max-width": "data(width)", - "text-valign": "center", - // "text-shadow-color": "#ffffff", - // "text-shadow-blur": 2, - // "text-shadow-opacity": 0.5, - // "text-shadow-offset-x": 3, - // "text-shadow-offset-y": 3, - shape: "rectangle", - padding: padding, - "line-height": lineHeight, - "border-style": "solid", - "border-width": 0, - "border-color": backgroundColor, - // ghost: "yes", - // "ghost-opacity": 0.5, - // "ghost-offset-x": 2, - // "ghost-offset-y": 2, - }, - }, - { - selector: "edge", - style: { - "curve-style": "taxi", - width: borderWidth, - "line-color": arrowColor, - label: "data(label)", - color: colors.green, - "source-endpoint": "inside-to-node", - "font-size": fontSize, - "text-valign": "center", - "text-wrap": "wrap", - "font-family": fontFamily, - "text-background-opacity": 1, - "text-background-color": colors.black, // "#D09A5B", - // "text-background-color": colors.blue, // "#D09A5B", - "text-background-padding": "2px", - // "text-background-shape": "roundrectangle", - "edge-text-rotation": "autorotate", - "source-distance-from-node": 0, - "target-distance-from-node": 0, - // "target-arrow-shape": "vee", - // "target-arrow-color": colors.blue, - // "source-arrow-shape": "circle", - // "source-arrow-color": arrowColor, - // "arrow-scale": 1, - "edge-distances": "intersection", - // Edge - // "underlay-color": "#000000", - // "underlay-padding": 3.5, - // "underlay-opacity": 1, - // "underlay-shape": "roundrectangle", - }, - }, - { - selector: ":parent", - style: { - "text-valign": "top", - "text-halign": "center", - "text-margin-y": `-${padding}`, - "text-wrap": "none", - }, - }, - ...Object.entries(colors).map(([color, value]) => ({ - selector: `node.${color}`, - style: { - color: `${value}`, - // ...(["black", "purple", "blue"].includes(color) - // ? { color: colors.white } - // : { color: colors.black }), - }, - })), - ], -}; - -export default cyberpunk; diff --git a/app/src/lib/themes/blokus.ts b/app/src/lib/themes/blokus.ts index 32fd8e823..bf43c3c02 100644 --- a/app/src/lib/themes/blokus.ts +++ b/app/src/lib/themes/blokus.ts @@ -123,3 +123,320 @@ const blokus: Theme = { }; export default blokus; +export const background = "#1b1b20"; +export const cytoscapeStyle = `@import url("/fonts/SpaceMonoRegular.css"); + +$background: #1b1b20; +$fontFamily: Space Mono; + +node { + font-size: 10px; + font-family: $fontFamily; + label: data(label); + color: #171817; + background-fill: linear-gradient; + background-gradient-stop-colors: #cdc5c5 #fdfbfb #ffffff; + background-gradient-direction: to-top-right; + text-valign: center; + text-halign: center; + text-wrap: wrap; + text-max-width: data(width); + line-height: 1.2; + text-justification: center; + padding: 6px; + background-color: #060608; + shape: roundrectangle; +} +:parent { + shape: rectangle; + background-color: #eeeeee; + padding: 10px; + border-color: #cccccc; + border-width: 1px; + text-valign: top; + text-halign: center; + text-margin-y: -6px; + text-wrap: none; + color: #ffffff; +} +edge { + width: 1.5px; + font-size: 10px; + font-family: $fontFamily; + curve-style: unbundled-bezier; + opacity: 1; + label: data(label); + color: #ffffff; + arrow-scale: 1; + target-arrow-shape: triangle; + target-arrow-fill: filled; + target-arrow-color: #eefcfc; + target-distance-from-node: 5px; + source-distance-from-node: 5px; + text-background-shape: roundrectangle; + text-background-color: $background; + text-background-opacity: 1; + text-background-padding: 4px; + text-rotation: autorotate; + line-style: solid; + line-fill: linear-gradient; + line-gradient-stop-colors: #f4f4f5 #eefcfc; + line-gradient-stop-positions: 0% 100%; +} +:loop { + curve-style: bezier; +} +edge:compound { + curve-style: bezier; + source-endpoint: outside-to-line; + target-endpoint: outside-to-line; +} +:selected { + background-color: #0169d9; + line-color: #0169d9; + source-arrow-color: #0169d9; + mid-source-arrow-color: #0169d9; + target-arrow-color: #0169d9; + mid-target-arrow-color: #0169d9; +} +:parent:selected { + background-color: #cce1f9; + border-color: #aec8e5; +} +:active { + overlay-padding: 10px; + overlay-color: #000000; + overlay-opacity: 0.25; +} +.nodeHovered, +.edgeHovered, +node:selected { + underlay-opacity: 0.1; + underlay-color: #000000; + underlay-padding: 5px; +} +:childless[label!=""] { + width: data(shapeWidth); + height: data(shapeHeight); + text-margin-y: data(textMarginY); + text-margin-x: data(textMarginX); +} +.red { + background-gradient-stop-colors: #ba1700 #d13721 #fc5b42; + color: #ffffff; +} +.orange { + background-gradient-stop-colors: #bf5900 #e6954e #ff9c45; + color: #ffffff; +} +.blue { + background-gradient-stop-colors: #001194 #3043d1 #6172f9; + color: #ffffff; +} +.black { + background-gradient-stop-colors: #171817 #202a2d #242b2e; + color: #ffffff; +} +.white { + background-gradient-stop-colors: #cdc5c5 #fdfbfb #ffffff; + color: #171817; +} +.green { + background-gradient-stop-colors: #026f4a #019467 #03b181; + color: #ffffff; +} +.yellow { + background-gradient-stop-colors: #ba9500 #d4ae17 #fad545; + color: #ffffff; +} +.gray { + background-gradient-stop-colors: #75736d #878378 #9c9687; + color: #ffffff; +} +.purple { + background-gradient-stop-colors: #4d1db5 #714bdb #9563ff; + color: #ffffff; +} +.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/clay.ts b/app/src/lib/themes/clay.ts index 5bec3e9e4..3bfb56268 100644 --- a/app/src/lib/themes/clay.ts +++ b/app/src/lib/themes/clay.ts @@ -118,3 +118,322 @@ const clay: Theme = { }; export default clay; + +export const background = "#664C4A"; +export const cytoscapeStyle = `@import url("/fonts/PoorStory.css"); + +$background: #664C4A; + +node { + font-size: 10px; + font-family: Poor Story; + background-color: rgb(102, 76, 74); + border-color: rgb(252, 250, 241); + color: rgb(255, 255, 255); + label: data(label); + text-wrap: wrap; + text-max-width: data(width); + text-valign: center; + shape: ellipse; + padding: 6px; + line-height: 1; +} +:parent { + shape: rectangle; + padding: 10px; + border-width: 1px; + text-valign: top; + text-halign: center; + text-margin-y: -6px; + text-wrap: none; + color: rgb(255, 255, 255); +} +edge { + width: 2px; + font-size: 10px; + curve-style: unbundled-bezier; + control-point-distances: -20px; + line-color: rgb(252, 250, 241); + label: data(label); + color: rgb(181, 129, 126); + text-valign: bottom; + text-wrap: wrap; + font-family: Poor Story; + target-arrow-color: rgb(252, 250, 241); + source-arrow-color: rgb(252, 250, 241); + target-arrow-shape: triangle; + text-background-opacity: 1; + text-background-color: $background; + text-background-padding: 3px; + text-border-opacity: 1; + text-background-shape: roundrectangle; + text-rotation: autorotate; + target-distance-from-node: 0px; + source-distance-from-node: 0px; +} +: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(40, 21, 46); + background-opacity: 1; + color: rgb(255, 255, 255); +} +node.white { + background-color: rgb(255, 255, 255); + background-opacity: 1; + color: rgb(40, 21, 46); +} +node.green { + background-color: rgb(171, 177, 124); + background-opacity: 1; + color: rgb(40, 21, 46); +} +node.yellow { + background-color: rgb(238, 199, 82); + background-opacity: 1; + color: rgb(40, 21, 46); +} +node.blue { + background-color: rgb(129, 180, 192); + background-opacity: 1; + color: rgb(255, 255, 255); +} +node.orange { + background-color: rgb(237, 174, 78); + background-opacity: 1; + color: rgb(40, 21, 46); +} +node.purple { + background-color: rgb(114, 86, 240); + background-opacity: 1; + color: rgb(255, 255, 255); +} +node.red { + background-color: rgb(181, 129, 126); + background-opacity: 1; + color: rgb(255, 255, 255); +} +node.gray { + background-color: rgb(102, 76, 74); + 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/comic-book.ts b/app/src/lib/themes/comic-book.ts index a24540d1e..24d6b135f 100644 --- a/app/src/lib/themes/comic-book.ts +++ b/app/src/lib/themes/comic-book.ts @@ -108,3 +108,311 @@ const comicBook: Theme = { }; export default comicBook; + +export const background = "#FEFEFE"; +export const cytoscapeStyle = `@import url("/fonts/PermanentMarker.css"); + +$background: #FEFEFE; + +node { + font-size: 10px; + background-color: rgb(246, 216, 131); + font-family: Permanent Marker; + color: rgb(5, 8, 12); + text-margin-y: -1px; + label: data(label); + text-wrap: wrap; + text-max-width: data(width); + text-valign: center; + shape: rectangle; + padding: 5px; + line-height: 1.2; + border-style: solid; + border-width: 1.88px; + border-color: rgb(5, 8, 12); +} +:parent { + shape: rectangle; + padding: 10px; + text-valign: top; + text-halign: center; + text-margin-y: -5px; + text-wrap: none; + color: rgb(5, 8, 12); +} +edge { + width: 16.919999999999998px; + font-size: 10px; + curve-style: straight-triangle; + line-color: rgb(163, 184, 186); + label: data(label); + color: rgb(5, 8, 12); + line-opacity: 0.5; + source-endpoint: inside-to-node; + text-valign: center; + text-wrap: wrap; + font-family: Permanent Marker; + text-background-opacity: 0; + text-rotation: autorotate; + source-distance-from-node: 0px; + target-distance-from-node: 0px; + edge-distances: intersection; + 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); +} +node.black { + background-color: rgb(5, 8, 12); + color: rgb(254, 254, 254); +} +node.white { + background-color: rgb(254, 254, 254); + color: rgb(5, 8, 12); +} +node.green { + background-color: rgb(202, 213, 83); + color: rgb(5, 8, 12); +} +node.yellow { + background-color: rgb(246, 216, 131); + color: rgb(5, 8, 12); +} +node.blue { + background-color: rgb(31, 117, 255); + color: rgb(254, 254, 254); +} +node.orange { + background-color: rgb(236, 121, 87); + color: rgb(5, 8, 12); +} +node.purple { + background-color: rgb(148, 109, 237); + color: rgb(254, 254, 254); +} +node.red { + background-color: rgb(227, 54, 69); + color: rgb(5, 8, 12); +} +node.gray { + background-color: rgb(202, 202, 202); + color: rgb(5, 8, 12); +} +.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/eggs.ts b/app/src/lib/themes/eggs.ts index c6d89101e..e6d58dc6f 100644 --- a/app/src/lib/themes/eggs.ts +++ b/app/src/lib/themes/eggs.ts @@ -112,3 +112,322 @@ const eggs: Theme = { }; export default eggs; + +export const background = "#fffa96"; +export const cytoscapeStyle = `@import url("/fonts/GaeguRegular.css"); + +$background: #fffa96; +$fontFamily: "Gaegu"; + +node { + font-size: 10px; + font-family: $fontFamily; + background-color: rgb(255, 253, 253); + border-color: rgb(53, 47, 57); + color: rgb(53, 47, 57); + label: data(label); + text-wrap: wrap; + text-max-width: data(width); + text-valign: center; + shape: ellipse; + padding: 14px; + line-height: 1; +} +:parent { + shape: rectangle; + padding: 10px; + border-width: 1px; + text-valign: top; + text-halign: center; + text-margin-y: -14px; + text-wrap: none; + color: rgb(53, 47, 57); +} +edge { + width: 1.5px; + font-size: 10px; + curve-style: unbundled-bezier; + loop-direction: 10deg; + loop-sweep: 20deg; + line-color: rgb(53, 47, 57); + label: data(label); + color: rgb(53, 47, 57); + text-valign: bottom; + text-wrap: wrap; + font-family: $fontFamily; + target-arrow-color: rgb(53, 47, 57); + source-arrow-color: rgb(53, 47, 57); + target-arrow-shape: triangle; + text-background-opacity: 1; + text-background-color: $background; + text-background-padding: 3px; + text-background-shape: roundrectangle; + text-border-style: solid; + text-rotation: autorotate; +} +: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.red { + background-color: rgb(240, 89, 53); + background-opacity: 1; + color: rgb(255, 253, 253); +} +node.orange { + background-color: rgb(236, 187, 64); + background-opacity: 1; + color: rgb(53, 47, 57); +} +node.blue { + background-color: rgb(66, 92, 222); + background-opacity: 1; + color: rgb(255, 253, 253); +} +node.black { + background-color: rgb(53, 47, 57); + background-opacity: 1; + color: rgb(255, 253, 253); +} +node.white { + background-color: rgb(255, 253, 253); + background-opacity: 1; + color: rgb(53, 47, 57); +} +node.green { + background-color: rgb(91, 166, 98); + background-opacity: 1; + color: rgb(255, 253, 253); +} +node.yellow { + background-color: rgb(255, 250, 150); + background-opacity: 1; + color: rgb(53, 47, 57); +} +node.gray { + background-color: rgb(227, 222, 215); + background-opacity: 1; + color: rgb(53, 47, 57); +} +node.purple { + background-color: rgb(102, 32, 228); + background-opacity: 1; + color: rgb(255, 253, 253); +} +.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/excalidraw.ts b/app/src/lib/themes/excalidraw.ts index 32e8edbb4..a76c97c0b 100644 --- a/app/src/lib/themes/excalidraw.ts +++ b/app/src/lib/themes/excalidraw.ts @@ -14,7 +14,7 @@ const colors = { purple: "#6D47EA", }; -const fontFamily = '"Virgil"'; +const fontFamily = '"Virgil3YOFF"'; const backgroundColor = colors.white; const arrowColor = colors.gray; const lineHeight = 1.3; @@ -24,7 +24,7 @@ const excalidraw: Theme = { font: { fontFamily, fontSize: defaultFontSize, - files: [{ url: "Virgil.woff2", name: "Virgil" }], + files: [{ url: "Virgil3YOFF.woff2", name: "Virgil3YOFF" }], lineHeight: lineHeight, }, value: "excalidraw", @@ -113,3 +113,321 @@ const excalidraw: Theme = { }; 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/futuristic.ts b/app/src/lib/themes/futuristic.ts index 6841d969f..65ab69e10 100644 --- a/app/src/lib/themes/futuristic.ts +++ b/app/src/lib/themes/futuristic.ts @@ -146,3 +146,342 @@ const futuristic: Theme = { }; export default futuristic; + +export const background = backgroundColor; +export const cytoscapeStyle = `@import url("/fonts/SpaceMono.css"); + +$background: ${backgroundColor}; + +node { + font-size: 10px; + background-fill: linear-gradient; + background-gradient-stop-colors: #2b6cf0 #52b6f6; + background-gradient-direction: to-right; + font-family: Space Mono; + border-color: #05080c; + color: #05080c; + label: data(label); + text-wrap: wrap; + text-max-width: data(width); + text-valign: center; + shape: rectangle; + padding: 8px; + line-height: 1.2; + border-style: solid; + border-width: 1px; +} +:parent { + shape: rectangle; + padding: 10px; + text-valign: top; + text-halign: center; + text-margin-y: -8px; + text-wrap: none; + background-color: $background; +} +edge { + width: 1.75px; + font-size: 10px; + curve-style: taxi; + line-color: #a5b4c8; + label: data(label); + color: #05080c; + text-valign: bottom; + text-wrap: wrap; + font-family: Space Mono; + text-background-opacity: 1; + text-background-color: $background; + text-background-padding: 1px; + text-background-shape: rectangle; + text-margin-y: -11px; + source-distance-from-node: 0px; + target-distance-from-node: 0px; + target-arrow-shape: triangle; + target-arrow-color: #a5b4c8; + source-arrow-color: #a5b4c8; + arrow-scale: 1.444; +} +:loop { + curve-style: bezier; +} +edge:compound { + curve-style: bezier; + source-endpoint: outside-to-line; + target-endpoint: outside-to-line; +} +:selected { + background-color: #0169d9; + line-color: #0169d9; + source-arrow-color: #0169d9; + mid-source-arrow-color: #0169d9; + target-arrow-color: #0169d9; + mid-target-arrow-color: #0169d9; +} +:parent:selected { + background-color: #cce1f9; + border-color: #aec8e5; +} +:active { + overlay-padding: 10px; + overlay-color: #000000; + overlay-opacity: 0.25; +} +.nodeHovered, +.edgeHovered, +node:selected { + underlay-opacity: 0.1; + underlay-color: #000000; + 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: #05080c; + background-fill: linear-gradient; + background-gradient-stop-colors: #05080c #303030; + background-gradient-direction: to-right; + color: #fefefe; +} +node.white { + background-color: #e6e6e6; + background-fill: linear-gradient; + background-gradient-stop-colors: #e6e6e6 #fefefe; + background-gradient-direction: to-right; + color: #05080c; +} +node.green { + background-color: #1fac30; + background-fill: linear-gradient; + background-gradient-stop-colors: #1fac30 #25f55c; + background-gradient-direction: to-right; + color: #05080c; +} +node.yellow { + background-color: #e2fc43; + background-fill: linear-gradient; + background-gradient-stop-colors: #e2fc43 #d0f955; + background-gradient-direction: to-right; + color: #05080c; +} +node.blue { + background-color: #2b6cf0; + background-fill: linear-gradient; + background-gradient-stop-colors: #2b6cf0 #52b6f6; + background-gradient-direction: to-right; + color: #05080c; +} +node.orange { + background-color: #f2411a; + background-fill: linear-gradient; + background-gradient-stop-colors: #f2411a #e98423; + background-gradient-direction: to-right; + color: #05080c; +} +node.purple { + background-color: #ad1342; + background-fill: linear-gradient; + background-gradient-stop-colors: #ad1342 #f81581; + background-gradient-direction: to-right; + color: #05080c; +} +node.red { + background-color: #d01614; + background-fill: linear-gradient; + background-gradient-stop-colors: #d01614 #e56b30; + background-gradient-direction: to-right; + color: #05080c; +} +node.gray { + background-color: #a5b4c8; + background-fill: linear-gradient; + background-gradient-stop-colors: #a5b4c8 #c5d4e8; + background-gradient-direction: to-right; + color: #05080c; +} +.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/monospace.ts b/app/src/lib/themes/monospace.ts index 47265ced2..08b8376d5 100644 --- a/app/src/lib/themes/monospace.ts +++ b/app/src/lib/themes/monospace.ts @@ -114,3 +114,317 @@ const monospace: Theme = { }; export default monospace; + +export const background = colors.black; +export const cytoscapeStyle = `@import url("/fonts/FiraMono.css"); + +$background: ${background}; + +node { + font-size: 10px; + font-family: "Fira Mono", monospace; + label: data(label); + color: #9cadff; + text-valign: center; + text-halign: center; + text-wrap: wrap; + text-max-width: data(width); + line-height: 1.1; + text-justification: center; + padding: 5px; + background-color: #14141c; + border-color: #9cadff; + border-width: 2px; + border-opacity: 1; + shape: rectangle; +} +:parent { + shape: rectangle; + padding: 10px; + border-width: 2px; + text-valign: top; + text-halign: center; + text-margin-y: -5px; + text-wrap: none; + color: #9cadff; +} +edge { + width: 2px; + font-size: 10px; + font-family: "Fira Mono", monospace; + curve-style: segments; + opacity: 1; + label: data(label); + color: #9cadff; + target-arrow-shape: triangle; + target-arrow-fill: filled; + target-arrow-color: #9cadff; + target-distance-from-node: 5px; + source-distance-from-node: 5px; + arrow-scale: 1.25; + text-background-shape: roundrectangle; + text-background-color: $background; + text-background-opacity: 1; + text-background-padding: 2px; + line-style: solid; + line-fill: linear-gradient; + line-gradient-stop-colors: #9aadfd #9cadff; + line-gradient-stop-positions: 0% 100%; +} +:loop { + curve-style: bezier; +} +edge:compound { + curve-style: bezier; + source-endpoint: outside-to-line; + target-endpoint: outside-to-line; +} +:selected { + background-color: #0169d9; + line-color: #0169d9; + source-arrow-color: #0169d9; + mid-source-arrow-color: #0169d9; + target-arrow-color: #0169d9; + mid-target-arrow-color: #0169d9; +} +:parent:selected { + background-color: #cce1f9; + border-color: #aec8e5; +} +:active { + overlay-padding: 10px; + overlay-color: #000000; + overlay-opacity: 0.25; +} +.nodeHovered, +.edgeHovered, +node:selected { + underlay-opacity: 0.1; + underlay-color: #000000; + underlay-padding: 5px; +} +:childless[label!=""] { + width: data(shapeWidth); + height: data(shapeHeight); + text-margin-y: data(textMarginY); + text-margin-x: data(textMarginX); +} +.red { + border-color: #ff1457; + color: #ff1457; +} +.orange { + border-color: #fc7427; + color: #fc7427; +} +.blue { + border-color: #9cadff; + color: #9cadff; +} +.black { + border-color: #14141c; + color: #ffffff; +} +.white { + border-color: #ffffff; + color: #ffffff; +} +.green { + border-color: #58ac39; + color: #58ac39; +} +.yellow { + border-color: #efe60b; + color: #efe60b; +} +.gray { + border-color: #dfe7cf; + color: #dfe7cf; +} +.purple { + border-color: #b87aff; + color: #b87aff; +} +.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/museum.ts b/app/src/lib/themes/museum.ts index fc3b9f31f..5730ed2fc 100644 --- a/app/src/lib/themes/museum.ts +++ b/app/src/lib/themes/museum.ts @@ -128,3 +128,310 @@ const museum: Theme = { }; export default museum; + +export const background = backgroundColor; +export const cytoscapeStyle = `@import url("/fonts/SportingGrotesque.css"); + +$background: ${backgroundColor}; + +node { + font-size: 10px; + font-family: Sporting Grotesque; + background-color: rgb(255, 255, 255); + border-color: rgb(54, 50, 31); + color: rgb(54, 50, 31); + text-justification: center; + label: data(label); + text-wrap: wrap; + text-max-width: data(width); + text-valign: center; + shape: roundrectangle; + padding: 7px; + line-height: 1.33; + border-style: solid; + border-width: 3px; + underlay-color: rgb(54, 50, 31); + underlay-padding: 4px; + underlay-opacity: 1; + underlay-shape: ellipse; +} +:parent { + padding: 10px; + text-valign: top; + text-halign: center; + text-margin-y: -8px; + text-wrap: none; +} +edge { + width: 1.5px; + font-size: 10px; + curve-style: bezier; + control-point-step-size: 60px; + line-color: rgb(54, 50, 31); + label: data(label); + color: rgb(54, 50, 31); + text-valign: bottom; + text-wrap: wrap; + font-family: Sporting Grotesque; + text-background-opacity: 1; + text-background-color: rgb(255, 255, 255); + text-background-padding: 2px; + text-border-opacity: 1; + text-background-shape: rectangle; + text-rotation: autorotate; + source-distance-from-node: 3px; + target-distance-from-node: 5px; + target-arrow-shape: triangle; + target-arrow-color: rgb(54, 50, 31); + source-arrow-color: rgb(54, 50, 31); + arrow-scale: 0.75; +} +: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 { + underlay-color: rgb(54, 50, 31); +} +node.white { + underlay-color: rgb(255, 255, 255); + border-color: rgb(255, 255, 255); +} +node.green { + underlay-color: rgb(1, 216, 87); +} +node.yellow { + underlay-color: rgb(255, 207, 13); +} +node.blue { + underlay-color: rgb(97, 114, 249); +} +node.orange { + underlay-color: rgb(255, 112, 68); +} +node.purple { + underlay-color: rgb(164, 146, 255); +} +node.red { + underlay-color: rgb(250, 35, 35); +} +node.gray { + underlay-color: rgb(170, 170, 170); +} +.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 index 0a40730f7..01c16ffa2 100644 --- a/app/src/lib/themes/original-dark.ts +++ b/app/src/lib/themes/original-dark.ts @@ -123,4 +123,335 @@ const originalDark: Theme = { export default originalDark; -export {}; +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 index 6f6cf8c2b..d8353c2a9 100644 --- a/app/src/lib/themes/original.ts +++ b/app/src/lib/themes/original.ts @@ -114,3 +114,358 @@ const original: Theme = { }; 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 index bedf4a256..7ad480765 100644 --- a/app/src/lib/themes/playbook.ts +++ b/app/src/lib/themes/playbook.ts @@ -126,3 +126,310 @@ const playbook: Theme = { }; 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/lib/themes/retro.ts b/app/src/lib/themes/retro.ts index ad255611a..0012d898c 100644 --- a/app/src/lib/themes/retro.ts +++ b/app/src/lib/themes/retro.ts @@ -115,3 +115,310 @@ const retro: Theme = { }; export default retro; + +export const background = backgroundColor; +export const cytoscapeStyle = `@import url("/fonts/JosefinSans.css"); + +$background: ${backgroundColor}; +$fontFamily: ${fontFamily}; + +node { + font-size: 10px; + font-family: $fontFamily; + background-color: rgb(246, 247, 248); + border-color: rgb(29, 29, 27); + color: rgb(29, 29, 27); + text-justification: center; + label: data(label); + text-wrap: wrap; + text-max-width: data(width); + text-valign: center; + shape: roundrectangle; + padding: 8px; + line-height: 1.2; + border-style: solid; + border-width: 3px; +} +:parent { + shape: roundrectangle; + padding: 10px; + border-width: 3px; + text-valign: top; + text-halign: center; + text-margin-y: -8px; + text-wrap: none; + color: rgb(29, 29, 27); +} +edge { + width: 3.75px; + font-size: 10px; + curve-style: taxi; + line-color: rgb(29, 29, 27); + label: data(label); + color: rgb(246, 247, 248); + text-valign: bottom; + text-wrap: wrap; + font-family: $fontFamily; + text-background-opacity: 1; + text-background-color: rgb(0, 0, 0); + text-background-padding: 6px; + text-background-shape: roundrectangle; + text-rotation: autorotate; + source-distance-from-node: 4px; + target-distance-from-node: 0px; + target-arrow-shape: triangle; + target-arrow-color: rgb(29, 29, 27); + source-arrow-color: rgb(29, 29, 27); + arrow-scale: 0.6; +} +: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(29, 29, 27); + color: rgb(246, 247, 248); +} +node.white { + background-color: rgb(246, 247, 248); +} +node.green { + background-color: rgb(107, 160, 122); +} +node.yellow { + background-color: rgb(240, 211, 86); +} +node.blue { + background-color: rgb(157, 185, 196); +} +node.orange { + background-color: rgb(219, 137, 98); +} +node.purple { + background-color: rgb(217, 80, 118); +} +node.red { + background-color: rgb(215, 41, 43); + color: rgb(246, 247, 248); +} +node.gray { + background-color: rgb(197, 212, 232); +} +.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/locales/de/messages.js b/app/src/locales/de/messages.js index 8bad5c3ed..eb2f6d458 100644 --- a/app/src/locales/de/messages.js +++ b/app/src/locales/de/messages.js @@ -27,7 +27,6 @@ Attributes: "Attribute", "Auto-Layouts": "Automatische Layouts", "Back To Editor": "Zurück zum Editor", - Background: "Hintergrund", "Basic Flowchart": "Grundlegender Flussdiagramm", "Become a Github Sponsor": "Werden Sie ein Github-Sponsor", "Become a Pro User": "Werden Sie ein Pro-Benutzer", @@ -49,6 +48,7 @@ Charts: "Diagramme", "Check your email for a link to log in. You can close this window.": "Prüfen Sie Ihre E-Mail auf einen Link zum Einloggen. Sie können dieses Fenster schließen.", + "Choose a Theme": "Wählen Sie ein Thema", "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. .": "Wählen Sie aus einer Vielzahl von Pfeilformen für die Quelle und das Ziel einer Kante aus. Formen beinhalten Dreieck, Dreieck-Tee, Kreis-Dreieck, Dreieck-Kreuz, Dreieck-Rückbiegung, Vee, Tee, Quadrat, Kreis, Diamant, Chevron und keine.", "Choose the plan that's right for you and start creating amazing flowcharts with Flowchart Fun Pro": @@ -60,6 +60,7 @@ "Clear text?": "Text löschen?", "Click on \\nLearn Syntax\\nto learn more": "Klicke auf \\nSyntax lernen\\num mehr zu erfahren.", + "Click to preview": "Klicken Sie zum Vorschauen", Clone: "Klon", Close: "Schließen", Color: "Farbe", @@ -90,6 +91,8 @@ "Eine Kante zwischen zwei Knoten wird erstellt, indem der zweite Knoten unter dem ersten eingerückt wird", "Custom Sharing Options": "Benutzerdefinierte Freigabeoptionen", "Customer Portal": "Kundenportal", + "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck.": + "Passen Sie Ihr Thema an, indem Sie die <0>Cytoscape CSS unten bearbeiten. Unsere Styling-Dokumentation ist bald verfügbar! In der Zwischenzeit ist die beste Ressource die <1>Cytoscape-Dokumentation. Stellen Sie Fragen im <2>Discord, wenn Sie steckenbleiben.", Dark: "Dunkel", "Dark Mode": "Dunkelmodus", Date: "Datum", @@ -160,7 +163,6 @@ Fullscreen: "Vollbild", Futuristic: "Futuristisch", "Get More Layouts": "Mehr Layouts erhalten", - "Get More Themes": "Weitere Themen erhalten", "Get personalized attention and support from our expert team": "Erhalten Sie personalisierte Aufmerksamkeit und Unterstützung von unserem Experten-Team", "Getting Started": "Erste Schritte", @@ -214,7 +216,10 @@ Light: "Hell", "Light Mode": "Heller Modus", Link: "Link", + "Load Theme": "Thema laden", Loading: "Laden", + "Loading a theme will erase any custom styles you have applied": + "Das Laden eines Themas wird alle benutzerdefinierten Stile löschen, die Sie angewendet haben", "Log In": "Anmelden", "Log Out": "Abmelden", "Log in to start creating flowcharts.": @@ -364,7 +369,7 @@ "The delimiter used to separate multiple target nodes": "Der Trennzeichen, das verwendet wird, um mehrere Zielknoten zu trennen", "The possible shapes are:": "Die möglichen Formen sind:", - Theme: "Thema", + "Theme Editor": "Thema-Editor", "There are no edges in this data": "Es gibt keine Kanten in diesen Daten", "This action cannot be undone.": "Diese Aktion kann nicht rückgängig gemacht werden.", diff --git a/app/src/locales/de/messages.po b/app/src/locales/de/messages.po index e777d8ec7..67bdc469c 100644 --- a/app/src/locales/de/messages.po +++ b/app/src/locales/de/messages.po @@ -53,8 +53,8 @@ msgstr "Greifen Sie von überall aus auf diese Diagramme zu.<0/>Teilen und bette msgid "Accessible from any device" msgstr "Von jedem Gerät aus zugänglich" -#: src/components/Header.tsx:184 -#: src/components/Header.tsx:398 +#: src/components/Header.tsx:183 +#: src/components/Header.tsx:397 #: src/pages/Account.tsx:121 msgid "Account" msgstr "Konto" @@ -92,11 +92,7 @@ msgstr "Automatische Layouts" msgid "Back To Editor" msgstr "Zurück zum Editor" -#: src/components/Tabs/EditStyleTab.tsx:51 -msgid "Background" -msgstr "Hintergrund" - -#: src/components/ShareDialog.tsx:454 +#: src/components/ShareDialog.tsx:448 msgid "Basic Flowchart" msgstr "Grundlegender Flussdiagramm" @@ -120,14 +116,14 @@ msgstr "Beginnen Sie mit einem einfachen Beispiel, das zeigt, wie <0>Flowchart F msgid "Blank" msgstr "Leer" -#: src/components/Header.tsx:153 -#: src/components/Header.tsx:374 +#: src/components/Header.tsx:152 +#: src/components/Header.tsx:373 #: src/pages/Blog.tsx:18 msgid "Blog" msgstr "Blog" -#: src/components/GraphContextMenu.tsx:480 -#: src/components/GraphContextMenu.tsx:576 +#: src/components/GraphContextMenu.tsx:463 +#: src/components/GraphContextMenu.tsx:559 msgid "Border" msgstr "Rand" @@ -162,14 +158,14 @@ msgstr "Bestimmte Attribute können verwendet werden, um das Aussehen oder die F msgid "Change Email Address" msgstr "E-Mail Adresse ändern" -#: src/components/Header.tsx:163 -#: src/components/Header.tsx:380 +#: src/components/Header.tsx:162 +#: src/components/Header.tsx:379 #: src/pages/Changelog.tsx:16 msgid "Changelog" msgstr "Änderungsprotokoll" -#: src/components/Header.tsx:96 -#: src/components/Header.tsx:352 +#: src/components/Header.tsx:95 +#: src/components/Header.tsx:351 msgid "Charts" msgstr "Diagramme" @@ -178,6 +174,10 @@ msgstr "Diagramme" msgid "Check your email for a link to log in. You can close this window." msgstr "Prüfen Sie Ihre E-Mail auf einen Link zum Einloggen. Sie können dieses Fenster schließen." +#: src/components/ThemePicker.tsx:67 +msgid "Choose a Theme" +msgstr "Wählen Sie ein Thema" + #: src/components/LearnSyntaxDialog.tsx:330 msgid "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. ." msgstr "Wählen Sie aus einer Vielzahl von Pfeilformen für die Quelle und das Ziel einer Kante aus. Formen beinhalten Dreieck, Dreieck-Tee, Kreis-Dreieck, Dreieck-Kreuz, Dreieck-Rückbiegung, Vee, Tee, Quadrat, Kreis, Diamant, Chevron und keine." @@ -211,6 +211,10 @@ msgstr "Text löschen?" msgid "Click on \\nLearn Syntax\\nto learn more" msgstr "Klicke auf \\nSyntax lernen\\num mehr zu erfahren." +#: src/components/ThemePicker.tsx:70 +msgid "Click to preview" +msgstr "Klicken Sie zum Vorschauen" + #: src/components/CloneButton.tsx:25 msgid "Clone" msgstr "Klon" @@ -220,7 +224,7 @@ msgstr "Klon" msgid "Close" msgstr "Schließen" -#: src/components/GraphContextMenu.tsx:306 +#: src/components/GraphContextMenu.tsx:289 msgid "Color" msgstr "Farbe" @@ -267,21 +271,21 @@ msgstr "Weiter" msgid "Convert to hosted chart?" msgstr "In gehostetes Diagramm konvertieren?" -#: src/components/ShareDialog.tsx:250 -#: src/components/ShareDialog.tsx:251 -#: src/components/ShareDialog.tsx:368 +#: src/components/ShareDialog.tsx:247 +#: src/components/ShareDialog.tsx:248 +#: src/components/ShareDialog.tsx:362 msgid "Copy" msgstr "Kopieren" -#: src/components/GraphContextMenu.tsx:225 +#: src/components/GraphContextMenu.tsx:210 msgid "Copy PNG Image" msgstr "PNG-Bild kopieren" -#: src/components/GraphContextMenu.tsx:183 +#: src/components/GraphContextMenu.tsx:171 msgid "Copy SVG Code" msgstr "Kopieren Sie den SVG-Code" -#: src/components/ShareDialog.tsx:333 +#: src/components/ShareDialog.tsx:327 msgid "Copy your mermaid.js code or open it directly in the mermaid.js live editor." msgstr "Kopieren Sie Ihren mermaid.js-Code oder öffnen Sie ihn direkt im mermaid.js Live-Editor." @@ -314,6 +318,10 @@ msgstr "Benutzerdefinierte Freigabeoptionen" msgid "Customer Portal" msgstr "Kundenportal" +#: src/components/Tabs/EditStyleTab.tsx:158 +msgid "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck." +msgstr "Passen Sie Ihr Thema an, indem Sie die <0>Cytoscape CSS unten bearbeiten. Unsere Styling-Dokumentation ist bald verfügbar! In der Zwischenzeit ist die beste Ressource die <1>Cytoscape-Dokumentation. Stellen Sie Fragen im <2>Discord, wenn Sie steckenbleiben." + #: src/lib/graphOptions.ts:48 msgid "Dark" msgstr "Dunkel" @@ -359,20 +367,20 @@ msgstr "Document" msgid "Don't have an account?" msgstr "Sie haben kein Konto?" -#: src/components/ShareDialog.tsx:70 -#: src/components/ShareDialog.tsx:529 +#: src/components/ShareDialog.tsx:68 +#: src/components/ShareDialog.tsx:523 msgid "Download" msgstr "Herunterladen" -#: src/components/GraphContextMenu.tsx:126 +#: src/components/GraphContextMenu.tsx:118 msgid "Download JPG" msgstr "JPG herunterladen" -#: src/components/GraphContextMenu.tsx:102 +#: src/components/GraphContextMenu.tsx:95 msgid "Download PNG" msgstr "PNG herunterladen" -#: src/components/GraphContextMenu.tsx:148 +#: src/components/GraphContextMenu.tsx:138 msgid "Download SVG" msgstr "SVG herunterladen" @@ -392,7 +400,7 @@ msgstr "Datei hier ablegen ..." msgid "Easily import existing flowcharts from other software" msgstr "Importieren Sie einfach vorhandene Flussdiagramme aus anderer Software" -#: src/components/GraphContextMenu.tsx:569 +#: src/components/GraphContextMenu.tsx:552 msgid "Edge" msgstr "Kante" @@ -454,12 +462,12 @@ msgstr "Kanten in Quellknotenzeile" msgid "Edges in Target Node Row" msgstr "Kanten in Zielknotenzeile" -#: src/components/ShareDialog.tsx:142 +#: src/components/ShareDialog.tsx:139 msgid "Editable" msgstr "Editierbar" -#: src/components/Header.tsx:88 -#: src/components/Header.tsx:346 +#: src/components/Header.tsx:87 +#: src/components/Header.tsx:345 #: src/components/MobileTabToggle.tsx:20 msgid "Editor" msgstr "Editor" @@ -498,8 +506,8 @@ msgstr "Excalidraw" #: src/components/EditorWrapper.tsx:53 #: src/components/EditorWrapper.tsx:58 -#: src/components/ShareDialog.tsx:61 -#: src/components/ShareDialog.tsx:152 +#: src/components/ShareDialog.tsx:59 +#: src/components/ShareDialog.tsx:149 msgid "Export" msgstr "Exportieren" @@ -512,7 +520,7 @@ msgstr "Hochauflösende Bilder exportieren" msgid "Export to SVG" msgstr "In SVG exportieren" -#: src/components/GraphContextMenu.tsx:267 +#: src/components/GraphContextMenu.tsx:252 msgid "Extra Large" msgstr "Extra groß" @@ -520,8 +528,8 @@ msgstr "Extra groß" msgid "Extract" msgstr "Extrakt" -#: src/components/Header.tsx:127 -#: src/components/Header.tsx:366 +#: src/components/Header.tsx:126 +#: src/components/Header.tsx:365 msgid "Feedback" msgstr "Feedback" @@ -541,7 +549,7 @@ msgstr "Einen Fehler gefunden? Eine Funktionsanfrage? Wir würden uns freuen von msgid "Free" msgstr "Kostenlos" -#: src/components/ShareDialog.tsx:139 +#: src/components/ShareDialog.tsx:136 msgid "Fullscreen" msgstr "Vollbild" @@ -553,10 +561,6 @@ msgstr "Futuristisch" msgid "Get More Layouts" msgstr "Mehr Layouts erhalten" -#: src/components/Tabs/EditStyleTab.tsx:97 -msgid "Get More Themes" -msgstr "Weitere Themen erhalten" - #: src/pages/Pricing.tsx:34 msgid "Get personalized attention and support from our expert team" msgstr "Erhalten Sie personalisierte Aufmerksamkeit und Unterstützung von unserem Experten-Team" @@ -582,7 +586,7 @@ msgstr "Haben Sie komplexe Fragen oder Probleme? Wir sind hier, um zu helfen." msgid "Heads up! Before you clear your cache, remember that this document isn't saved in the cloud." msgstr "Aufgepasst! Bevor Sie Ihren Cache löschen, denken Sie daran, dass dieses Dokument nicht in der Cloud gespeichert ist." -#: src/components/Header.tsx:105 +#: src/components/Header.tsx:104 msgid "Help" msgstr "Hilfe" @@ -638,7 +642,7 @@ msgstr "Daten aus jeder CSV-Datei importieren und auf einem neuen Flussdiagramm msgid "Import from Lucidchart, Visio, and other CSV files" msgstr "Importieren Sie aus Lucidchart, Visio und anderen CSV-Dateien" -#: src/components/ShareDialog.tsx:446 +#: src/components/ShareDialog.tsx:440 msgid "Import your diagram it into Microsoft Visio using one of these CSV files." msgstr "Importieren Sie Ihr Diagramm mithilfe einer dieser CSV-Dateien in Microsoft Visio." @@ -650,7 +654,7 @@ msgstr "Der Datenimport ist eine Profifunktion. Sie können für nur 3 USD pro M msgid "Impress your audience with high-quality images produced by Flowchart Fun" msgstr "Beeindrucken Sie Ihr Publikum mit hochwertigen Bildern, die von Flowchart Fun produziert werden" -#: src/components/ShareDialog.tsx:479 +#: src/components/ShareDialog.tsx:473 msgid "Include a title using a <0>title attribute. To use Visio coloring, add a <1>roleType attribute equal to one of the following:" msgstr "Fügen Sie einen Titel mit einem <0>title-Attribut ein. Um die Visio-Farbgebung zu verwenden, fügen Sie ein <1>roleType-Attribut gleich einem der folgenden hinzu:" @@ -658,7 +662,7 @@ msgstr "Fügen Sie einen Titel mit einem <0>title-Attribut ein. Um die Visio msgid "Indenting creates an edge" msgstr "Durch das Einrücken entsteht eine Kante" -#: src/components/Header.tsx:142 +#: src/components/Header.tsx:141 msgid "Info" msgstr "Info" @@ -674,7 +678,7 @@ msgstr "Ist" msgid "Language" msgstr "Sprache" -#: src/components/GraphContextMenu.tsx:262 +#: src/components/GraphContextMenu.tsx:247 msgid "Large" msgstr "Groß" @@ -723,16 +727,25 @@ msgstr "Hell" msgid "Light Mode" msgstr "Heller Modus" -#: src/components/ShareDialog.tsx:134 +#: src/components/ShareDialog.tsx:131 msgid "Link" msgstr "Link" +#: src/components/ThemePicker.tsx:54 +#: src/components/ThemePicker.tsx:108 +msgid "Load Theme" +msgstr "Thema laden" + #: src/components/PaymentStepper.tsx:149 msgid "Loading" msgstr "Laden" -#: src/components/Header.tsx:202 -#: src/components/Header.tsx:422 +#: src/components/ThemePicker.tsx:89 +msgid "Loading a theme will erase any custom styles you have applied" +msgstr "Das Laden eines Themas wird alle benutzerdefinierten Stile löschen, die Sie angewendet haben" + +#: src/components/Header.tsx:201 +#: src/components/Header.tsx:421 #: src/pages/LogIn.tsx:64 #: src/pages/New.tsx:263 msgid "Log In" @@ -750,7 +763,7 @@ msgstr "Melden Sie sich an, um mit dem Erstellen von Flussdiagrammen zu beginnen msgid "Make a One-Time Donation" msgstr "Machen Sie eine einmalige Spende" -#: src/components/ShareDialog.tsx:412 +#: src/components/ShareDialog.tsx:406 msgid "Make publicly accessible" msgstr "Öffentlich zugänglich machen" @@ -766,7 +779,7 @@ msgstr "Daten abbilden" msgid "Market understanding and competitive landscape maintenance for SaaS product development" msgstr "Marktverständnis und Wettbewerbslandschaftspflege für die Entwicklung von SaaS-Produkten" -#: src/components/GraphContextMenu.tsx:258 +#: src/components/GraphContextMenu.tsx:243 msgid "Medium" msgstr "Mittel" @@ -794,8 +807,8 @@ msgstr "Museum" msgid "Name" msgstr "Name" -#: src/components/Header.tsx:79 -#: src/components/Header.tsx:340 +#: src/components/Header.tsx:78 +#: src/components/Header.tsx:339 #: src/pages/Charts.tsx:102 msgid "New" msgstr "Neues" @@ -813,7 +826,7 @@ msgstr "Nächste Gebühr" msgid "No Edges" msgstr "Keine Kanten" -#: src/components/GraphContextMenu.tsx:299 +#: src/components/GraphContextMenu.tsx:282 msgid "Node" msgstr "Knoten" @@ -880,7 +893,7 @@ msgstr "Nur auf diesem Gerät verfügbar.<0/>Wenn Sie Ihren Browser-Cache leeren msgid "Open Customer Portal" msgstr "Öffnen Sie das Kundenportal" -#: src/components/ShareDialog.tsx:466 +#: src/components/ShareDialog.tsx:460 msgid "Organization Chart" msgstr "Organigramm" @@ -916,8 +929,8 @@ msgstr "Spielbuch" msgid "Pointer and container on same line" msgstr "Zeiger und Container auf derselben Zeile" -#: src/components/Header.tsx:193 -#: src/components/Header.tsx:407 +#: src/components/Header.tsx:192 +#: src/components/Header.tsx:406 msgid "Pricing" msgstr "Preisgestaltung" @@ -933,8 +946,8 @@ msgstr "Datenverarbeitung" msgid "Prompt" msgstr "Aufforderung" -#: src/components/ShareDialog.tsx:408 -#: src/components/ShareDialog.tsx:431 +#: src/components/ShareDialog.tsx:402 +#: src/components/ShareDialog.tsx:425 msgid "Public" msgstr "Öffentlich" @@ -943,7 +956,7 @@ msgid "Random" msgstr "Zufällig" #: src/components/EditorWrapper.tsx:44 -#: src/components/ShareDialog.tsx:145 +#: src/components/ShareDialog.tsx:142 msgid "Read-only" msgstr "Schreibgeschützt" @@ -1028,8 +1041,8 @@ msgstr "Zurückkehren" msgid "Right to Left" msgstr "Von rechts nach links" -#: src/components/Header.tsx:170 -#: src/components/Header.tsx:386 +#: src/components/Header.tsx:169 +#: src/components/Header.tsx:385 #: src/pages/Roadmap.tsx:16 msgid "Roadmap" msgstr "Fahrplan" @@ -1058,13 +1071,13 @@ msgstr "Wählen Sie Ihren Plan aus!" msgid "Send us Feedback" msgstr "Senden Sie uns Feedback" -#: src/components/Header.tsx:177 -#: src/components/Header.tsx:391 +#: src/components/Header.tsx:176 +#: src/components/Header.tsx:390 #: src/components/Settings.tsx:50 msgid "Settings" msgstr "Einstellungen" -#: src/components/GraphContextMenu.tsx:368 +#: src/components/GraphContextMenu.tsx:351 msgid "Shape" msgstr "Form" @@ -1077,11 +1090,11 @@ msgstr "Registrieren" msgid "Sign Up Now" msgstr "Jetzt registrieren" -#: src/components/GraphContextMenu.tsx:435 +#: src/components/GraphContextMenu.tsx:418 msgid "Size" msgstr "Größe" -#: src/components/GraphContextMenu.tsx:253 +#: src/components/GraphContextMenu.tsx:238 msgid "Small" msgstr "Klein" @@ -1093,7 +1106,7 @@ msgstr "Einige Klassen stehen zur Verfügung, um Ihren Flussdiagramm zu gestalte msgid "Sorry! This page is only available in English." msgstr "Entschuldigung! Diese Seite ist nur auf Englisch verfügbar." -#: src/components/GraphContextMenu.tsx:618 +#: src/components/GraphContextMenu.tsx:601 msgid "Source Arrow" msgstr "Quellpfeil" @@ -1172,7 +1185,7 @@ msgstr "Abonnement wird beendet" msgid "Supply chain analysis and optimization: cost reduction, efficiency improvement, and stakeholder collaboration" msgstr "Supply-Chain-Analyse und -Optimierung: Kostenreduzierung, Effizienzverbesserung und Stakeholder-Kollaboration" -#: src/components/GraphContextMenu.tsx:657 +#: src/components/GraphContextMenu.tsx:640 msgid "Target Arrow" msgstr "Zielpfeil" @@ -1238,9 +1251,9 @@ msgstr "Der Trennzeichen, das verwendet wird, um mehrere Zielknoten zu trennen" msgid "The possible shapes are:" msgstr "Die möglichen Formen sind:" -#: src/components/Tabs/EditStyleTab.tsx:33 -msgid "Theme" -msgstr "Thema" +#: src/components/Tabs/EditStyleTab.tsx:69 +msgid "Theme Editor" +msgstr "Thema-Editor" #: src/components/ImportDataDialog.tsx:419 msgid "There are no edges in this data" @@ -1258,7 +1271,7 @@ msgstr "Diese App funktioniert durch Tippen" msgid "This feature is only available to pro users. <0>Become a pro user to unlock it." msgstr "Diese Funktion ist nur für Pro-Benutzer verfügbar. <0>Werden Sie Pro-Nutzer, um es freizuschalten." -#: src/components/ShareDialog.tsx:538 +#: src/components/ShareDialog.tsx:532 msgid "Tip" msgstr "Tipp" @@ -1352,11 +1365,11 @@ msgstr "Verwenden Sie die Attribute <0>w und <1>h, um die Breite und Hö msgid "Use the customer portal to change your billing information." msgstr "Verwenden Sie das Kundenportal, um Ihre Rechnungsinformationen zu ändern." -#: src/components/ShareDialog.tsx:474 +#: src/components/ShareDialog.tsx:468 msgid "Use this file for org charts, hierarchies, and other organizational structures." msgstr "Verwenden Sie diese Datei für Organigramme, Hierarchien und andere Organisationsstrukturen." -#: src/components/ShareDialog.tsx:462 +#: src/components/ShareDialog.tsx:456 msgid "Use this file for sequences, processes, and workflows." msgstr "Verwenden Sie diese Datei für Sequenzen, Prozesse und Workflows." diff --git a/app/src/locales/en/messages.js b/app/src/locales/en/messages.js index a991d8a64..3b30a545d 100644 --- a/app/src/locales/en/messages.js +++ b/app/src/locales/en/messages.js @@ -26,7 +26,6 @@ Attributes: "Attributes", "Auto-Layouts": "Auto-Layouts", "Back To Editor": "Back To Editor", - Background: "Background", "Basic Flowchart": "Basic Flowchart", "Become a Github Sponsor": "Become a Github Sponsor", "Become a Pro User": "Become a Pro User", @@ -48,6 +47,7 @@ Charts: "Charts", "Check your email for a link to log in. You can close this window.": "Check your email for a link to log in. You can close this window.", + "Choose a Theme": "Choose a Theme", "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. .": "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. .", "Choose the plan that's right for you and start creating amazing flowcharts with Flowchart Fun Pro": @@ -59,6 +59,7 @@ "Clear text?": "Clear text?", "Click on \\nLearn Syntax\\nto learn more": "Click on \\nLearn Syntax\\nto learn more", + "Click to preview": "Click to preview", Clone: "Clone", Close: "Close", Color: "Color", @@ -89,6 +90,8 @@ "Creating an edge between two nodes is done by indenting the second node below the first", "Custom Sharing Options": "Custom Sharing Options", "Customer Portal": "Customer Portal", + "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck.": + "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck.", Dark: "Dark", "Dark Mode": "Dark Mode", Date: "Date", @@ -159,7 +162,6 @@ Fullscreen: "Fullscreen", Futuristic: "Futuristic", "Get More Layouts": "Get More Layouts", - "Get More Themes": "Get More Themes", "Get personalized attention and support from our expert team": "Get personalized attention and support from our expert team", "Getting Started": "Getting Started", @@ -213,7 +215,10 @@ Light: "Light", "Light Mode": "Light Mode", Link: "Link", + "Load Theme": "Load Theme", Loading: "Loading", + "Loading a theme will erase any custom styles you have applied": + "Loading a theme will erase any custom styles you have applied", "Log In": "Log In", "Log Out": "Log Out", "Log in to start creating flowcharts.": @@ -361,7 +366,7 @@ "The delimiter used to separate multiple target nodes": "The delimiter used to separate multiple target nodes", "The possible shapes are:": "The possible shapes are:", - Theme: "Theme", + "Theme Editor": "Theme Editor", "There are no edges in this data": "There are no edges in this data", "This action cannot be undone.": "This action cannot be undone.", "This app works by typing": "This app works by typing", diff --git a/app/src/locales/en/messages.po b/app/src/locales/en/messages.po index 1ff9da0e1..0e848ef31 100644 --- a/app/src/locales/en/messages.po +++ b/app/src/locales/en/messages.po @@ -53,8 +53,8 @@ msgstr "Access these charts from anywhere.<0/>Share and embed flowcharts that st msgid "Accessible from any device" msgstr "Accessible from any device" -#: src/components/Header.tsx:184 -#: src/components/Header.tsx:398 +#: src/components/Header.tsx:183 +#: src/components/Header.tsx:397 #: src/pages/Account.tsx:121 msgid "Account" msgstr "Account" @@ -92,11 +92,7 @@ msgstr "Auto-Layouts" msgid "Back To Editor" msgstr "Back To Editor" -#: src/components/Tabs/EditStyleTab.tsx:51 -msgid "Background" -msgstr "Background" - -#: src/components/ShareDialog.tsx:454 +#: src/components/ShareDialog.tsx:448 msgid "Basic Flowchart" msgstr "Basic Flowchart" @@ -120,14 +116,14 @@ msgstr "Begin with a simple example showing how <0>Flowchart Fun works." msgid "Blank" msgstr "Blank" -#: src/components/Header.tsx:153 -#: src/components/Header.tsx:374 +#: src/components/Header.tsx:152 +#: src/components/Header.tsx:373 #: src/pages/Blog.tsx:18 msgid "Blog" msgstr "Blog" -#: src/components/GraphContextMenu.tsx:480 -#: src/components/GraphContextMenu.tsx:576 +#: src/components/GraphContextMenu.tsx:463 +#: src/components/GraphContextMenu.tsx:559 msgid "Border" msgstr "Border" @@ -162,14 +158,14 @@ msgstr "Certain attributes can be used to customize the appearance or functional msgid "Change Email Address" msgstr "Change Email Address" -#: src/components/Header.tsx:163 -#: src/components/Header.tsx:380 +#: src/components/Header.tsx:162 +#: src/components/Header.tsx:379 #: src/pages/Changelog.tsx:16 msgid "Changelog" msgstr "Changelog" -#: src/components/Header.tsx:96 -#: src/components/Header.tsx:352 +#: src/components/Header.tsx:95 +#: src/components/Header.tsx:351 msgid "Charts" msgstr "Charts" @@ -178,6 +174,10 @@ msgstr "Charts" msgid "Check your email for a link to log in. You can close this window." msgstr "Check your email for a link to log in. You can close this window." +#: src/components/ThemePicker.tsx:67 +msgid "Choose a Theme" +msgstr "Choose a Theme" + #: src/components/LearnSyntaxDialog.tsx:330 msgid "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. ." msgstr "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. ." @@ -211,6 +211,10 @@ msgstr "Clear text?" msgid "Click on \\nLearn Syntax\\nto learn more" msgstr "Click on \\nLearn Syntax\\nto learn more" +#: src/components/ThemePicker.tsx:70 +msgid "Click to preview" +msgstr "Click to preview" + #: src/components/CloneButton.tsx:25 msgid "Clone" msgstr "Clone" @@ -220,7 +224,7 @@ msgstr "Clone" msgid "Close" msgstr "Close" -#: src/components/GraphContextMenu.tsx:306 +#: src/components/GraphContextMenu.tsx:289 msgid "Color" msgstr "Color" @@ -267,21 +271,21 @@ msgstr "Continue" msgid "Convert to hosted chart?" msgstr "Convert to hosted chart?" -#: src/components/ShareDialog.tsx:250 -#: src/components/ShareDialog.tsx:251 -#: src/components/ShareDialog.tsx:368 +#: src/components/ShareDialog.tsx:247 +#: src/components/ShareDialog.tsx:248 +#: src/components/ShareDialog.tsx:362 msgid "Copy" msgstr "Copy" -#: src/components/GraphContextMenu.tsx:225 +#: src/components/GraphContextMenu.tsx:210 msgid "Copy PNG Image" msgstr "Copy PNG Image" -#: src/components/GraphContextMenu.tsx:183 +#: src/components/GraphContextMenu.tsx:171 msgid "Copy SVG Code" msgstr "Copy SVG Code" -#: src/components/ShareDialog.tsx:333 +#: src/components/ShareDialog.tsx:327 msgid "Copy your mermaid.js code or open it directly in the mermaid.js live editor." msgstr "Copy your mermaid.js code or open it directly in the mermaid.js live editor." @@ -314,6 +318,10 @@ msgstr "Custom Sharing Options" msgid "Customer Portal" msgstr "Customer Portal" +#: src/components/Tabs/EditStyleTab.tsx:158 +msgid "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck." +msgstr "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck." + #: src/lib/graphOptions.ts:48 msgid "Dark" msgstr "Dark" @@ -359,20 +367,20 @@ msgstr "Document" msgid "Don't have an account?" msgstr "Don't have an account?" -#: src/components/ShareDialog.tsx:70 -#: src/components/ShareDialog.tsx:529 +#: src/components/ShareDialog.tsx:68 +#: src/components/ShareDialog.tsx:523 msgid "Download" msgstr "Download" -#: src/components/GraphContextMenu.tsx:126 +#: src/components/GraphContextMenu.tsx:118 msgid "Download JPG" msgstr "Download JPG" -#: src/components/GraphContextMenu.tsx:102 +#: src/components/GraphContextMenu.tsx:95 msgid "Download PNG" msgstr "Download PNG" -#: src/components/GraphContextMenu.tsx:148 +#: src/components/GraphContextMenu.tsx:138 msgid "Download SVG" msgstr "Download SVG" @@ -392,7 +400,7 @@ msgstr "Drop the file here ..." msgid "Easily import existing flowcharts from other software" msgstr "Easily import existing flowcharts from other software" -#: src/components/GraphContextMenu.tsx:569 +#: src/components/GraphContextMenu.tsx:552 msgid "Edge" msgstr "Edge" @@ -454,12 +462,12 @@ msgstr "Edges in Source Node Row" msgid "Edges in Target Node Row" msgstr "Edges in Target Node Row" -#: src/components/ShareDialog.tsx:142 +#: src/components/ShareDialog.tsx:139 msgid "Editable" msgstr "Editable" -#: src/components/Header.tsx:88 -#: src/components/Header.tsx:346 +#: src/components/Header.tsx:87 +#: src/components/Header.tsx:345 #: src/components/MobileTabToggle.tsx:20 msgid "Editor" msgstr "Editor" @@ -498,8 +506,8 @@ msgstr "Excalidraw" #: src/components/EditorWrapper.tsx:53 #: src/components/EditorWrapper.tsx:58 -#: src/components/ShareDialog.tsx:61 -#: src/components/ShareDialog.tsx:152 +#: src/components/ShareDialog.tsx:59 +#: src/components/ShareDialog.tsx:149 msgid "Export" msgstr "Export" @@ -512,7 +520,7 @@ msgstr "Export High-Resolution Images" msgid "Export to SVG" msgstr "Export to SVG" -#: src/components/GraphContextMenu.tsx:267 +#: src/components/GraphContextMenu.tsx:252 msgid "Extra Large" msgstr "Extra Large" @@ -520,8 +528,8 @@ msgstr "Extra Large" msgid "Extract" msgstr "Extract" -#: src/components/Header.tsx:127 -#: src/components/Header.tsx:366 +#: src/components/Header.tsx:126 +#: src/components/Header.tsx:365 msgid "Feedback" msgstr "Feedback" @@ -541,7 +549,7 @@ msgstr "Found a bug? Have a feature request? We would love to hear from you!" msgid "Free" msgstr "Free" -#: src/components/ShareDialog.tsx:139 +#: src/components/ShareDialog.tsx:136 msgid "Fullscreen" msgstr "Fullscreen" @@ -553,10 +561,6 @@ msgstr "Futuristic" msgid "Get More Layouts" msgstr "Get More Layouts" -#: src/components/Tabs/EditStyleTab.tsx:97 -msgid "Get More Themes" -msgstr "Get More Themes" - #: src/pages/Pricing.tsx:34 msgid "Get personalized attention and support from our expert team" msgstr "Get personalized attention and support from our expert team" @@ -582,7 +586,7 @@ msgstr "Have complex questions or issues? We're here to help." msgid "Heads up! Before you clear your cache, remember that this document isn't saved in the cloud." msgstr "Heads up! Before you clear your cache, remember that this document isn't saved in the cloud." -#: src/components/Header.tsx:105 +#: src/components/Header.tsx:104 msgid "Help" msgstr "Help" @@ -638,7 +642,7 @@ msgstr "Import data from any CSV file and map it to a new flowchart. This is a g msgid "Import from Lucidchart, Visio, and other CSV files" msgstr "Import from Lucidchart, Visio, and other CSV files" -#: src/components/ShareDialog.tsx:446 +#: src/components/ShareDialog.tsx:440 msgid "Import your diagram it into Microsoft Visio using one of these CSV files." msgstr "Import your diagram it into Microsoft Visio using one of these CSV files." @@ -650,7 +654,7 @@ msgstr "Importing data is a pro feature. You can upgrade to Flowchart Fun Pro fo msgid "Impress your audience with high-quality images produced by Flowchart Fun" msgstr "Impress your audience with high-quality images produced by Flowchart Fun" -#: src/components/ShareDialog.tsx:479 +#: src/components/ShareDialog.tsx:473 msgid "Include a title using a <0>title attribute. To use Visio coloring, add a <1>roleType attribute equal to one of the following:" msgstr "Include a title using a <0>title attribute. To use Visio coloring, add a <1>roleType attribute equal to one of the following:" @@ -658,7 +662,7 @@ msgstr "Include a title using a <0>title attribute. To use Visio coloring, a msgid "Indenting creates an edge" msgstr "Indenting creates an edge" -#: src/components/Header.tsx:142 +#: src/components/Header.tsx:141 msgid "Info" msgstr "Info" @@ -674,7 +678,7 @@ msgstr "Is" msgid "Language" msgstr "Language" -#: src/components/GraphContextMenu.tsx:262 +#: src/components/GraphContextMenu.tsx:247 msgid "Large" msgstr "Large" @@ -723,16 +727,25 @@ msgstr "Light" msgid "Light Mode" msgstr "Light Mode" -#: src/components/ShareDialog.tsx:134 +#: src/components/ShareDialog.tsx:131 msgid "Link" msgstr "Link" +#: src/components/ThemePicker.tsx:54 +#: src/components/ThemePicker.tsx:108 +msgid "Load Theme" +msgstr "Load Theme" + #: src/components/PaymentStepper.tsx:149 msgid "Loading" msgstr "Loading" -#: src/components/Header.tsx:202 -#: src/components/Header.tsx:422 +#: src/components/ThemePicker.tsx:89 +msgid "Loading a theme will erase any custom styles you have applied" +msgstr "Loading a theme will erase any custom styles you have applied" + +#: src/components/Header.tsx:201 +#: src/components/Header.tsx:421 #: src/pages/LogIn.tsx:64 #: src/pages/New.tsx:263 msgid "Log In" @@ -750,7 +763,7 @@ msgstr "Log in to start creating flowcharts." msgid "Make a One-Time Donation" msgstr "Make a One-Time Donation" -#: src/components/ShareDialog.tsx:412 +#: src/components/ShareDialog.tsx:406 msgid "Make publicly accessible" msgstr "Make publicly accessible" @@ -766,7 +779,7 @@ msgstr "Map Data" msgid "Market understanding and competitive landscape maintenance for SaaS product development" msgstr "Market understanding and competitive landscape maintenance for SaaS product development" -#: src/components/GraphContextMenu.tsx:258 +#: src/components/GraphContextMenu.tsx:243 msgid "Medium" msgstr "Medium" @@ -794,8 +807,8 @@ msgstr "Museum" msgid "Name" msgstr "Name" -#: src/components/Header.tsx:79 -#: src/components/Header.tsx:340 +#: src/components/Header.tsx:78 +#: src/components/Header.tsx:339 #: src/pages/Charts.tsx:102 msgid "New" msgstr "New" @@ -813,7 +826,7 @@ msgstr "Next charge" msgid "No Edges" msgstr "No Edges" -#: src/components/GraphContextMenu.tsx:299 +#: src/components/GraphContextMenu.tsx:282 msgid "Node" msgstr "Node" @@ -880,7 +893,7 @@ msgstr "Only available on this device.<0/>Clearing your browser cache will erase msgid "Open Customer Portal" msgstr "Open Customer Portal" -#: src/components/ShareDialog.tsx:466 +#: src/components/ShareDialog.tsx:460 msgid "Organization Chart" msgstr "Organization Chart" @@ -916,8 +929,8 @@ msgstr "Playbook" msgid "Pointer and container on same line" msgstr "Pointer and container on same line" -#: src/components/Header.tsx:193 -#: src/components/Header.tsx:407 +#: src/components/Header.tsx:192 +#: src/components/Header.tsx:406 msgid "Pricing" msgstr "Pricing" @@ -933,8 +946,8 @@ msgstr "Processing Data" msgid "Prompt" msgstr "Prompt" -#: src/components/ShareDialog.tsx:408 -#: src/components/ShareDialog.tsx:431 +#: src/components/ShareDialog.tsx:402 +#: src/components/ShareDialog.tsx:425 msgid "Public" msgstr "Public" @@ -943,7 +956,7 @@ msgid "Random" msgstr "Random" #: src/components/EditorWrapper.tsx:44 -#: src/components/ShareDialog.tsx:145 +#: src/components/ShareDialog.tsx:142 msgid "Read-only" msgstr "Read-only" @@ -1028,8 +1041,8 @@ msgstr "Return" msgid "Right to Left" msgstr "Right to Left" -#: src/components/Header.tsx:170 -#: src/components/Header.tsx:386 +#: src/components/Header.tsx:169 +#: src/components/Header.tsx:385 #: src/pages/Roadmap.tsx:16 msgid "Roadmap" msgstr "Roadmap" @@ -1058,13 +1071,13 @@ msgstr "Select your plan!" msgid "Send us Feedback" msgstr "Send us Feedback" -#: src/components/Header.tsx:177 -#: src/components/Header.tsx:391 +#: src/components/Header.tsx:176 +#: src/components/Header.tsx:390 #: src/components/Settings.tsx:50 msgid "Settings" msgstr "Settings" -#: src/components/GraphContextMenu.tsx:368 +#: src/components/GraphContextMenu.tsx:351 msgid "Shape" msgstr "Shape" @@ -1077,11 +1090,11 @@ msgstr "Sign Up" msgid "Sign Up Now" msgstr "Sign Up Now" -#: src/components/GraphContextMenu.tsx:435 +#: src/components/GraphContextMenu.tsx:418 msgid "Size" msgstr "Size" -#: src/components/GraphContextMenu.tsx:253 +#: src/components/GraphContextMenu.tsx:238 msgid "Small" msgstr "Small" @@ -1093,7 +1106,7 @@ msgstr "Some classes are available to help style your flowchart" msgid "Sorry! This page is only available in English." msgstr "Sorry! This page is only available in English." -#: src/components/GraphContextMenu.tsx:618 +#: src/components/GraphContextMenu.tsx:601 msgid "Source Arrow" msgstr "Source Arrow" @@ -1172,7 +1185,7 @@ msgstr "Subscription will end" msgid "Supply chain analysis and optimization: cost reduction, efficiency improvement, and stakeholder collaboration" msgstr "Supply chain analysis and optimization: cost reduction, efficiency improvement, and stakeholder collaboration" -#: src/components/GraphContextMenu.tsx:657 +#: src/components/GraphContextMenu.tsx:640 msgid "Target Arrow" msgstr "Target Arrow" @@ -1238,9 +1251,9 @@ msgstr "The delimiter used to separate multiple target nodes" msgid "The possible shapes are:" msgstr "The possible shapes are:" -#: src/components/Tabs/EditStyleTab.tsx:33 -msgid "Theme" -msgstr "Theme" +#: src/components/Tabs/EditStyleTab.tsx:69 +msgid "Theme Editor" +msgstr "Theme Editor" #: src/components/ImportDataDialog.tsx:419 msgid "There are no edges in this data" @@ -1258,7 +1271,7 @@ msgstr "This app works by typing" msgid "This feature is only available to pro users. <0>Become a pro user to unlock it." msgstr "This feature is only available to pro users. <0>Become a pro user to unlock it." -#: src/components/ShareDialog.tsx:538 +#: src/components/ShareDialog.tsx:532 msgid "Tip" msgstr "Tip" @@ -1352,11 +1365,11 @@ msgstr "Use the attributes <0>w and <1>h to explicitly set the width and msgid "Use the customer portal to change your billing information." msgstr "Use the customer portal to change your billing information." -#: src/components/ShareDialog.tsx:474 +#: src/components/ShareDialog.tsx:468 msgid "Use this file for org charts, hierarchies, and other organizational structures." msgstr "Use this file for org charts, hierarchies, and other organizational structures." -#: src/components/ShareDialog.tsx:462 +#: src/components/ShareDialog.tsx:456 msgid "Use this file for sequences, processes, and workflows." msgstr "Use this file for sequences, processes, and workflows." diff --git a/app/src/locales/fr/messages.js b/app/src/locales/fr/messages.js index 25ea69363..feaca8ef1 100644 --- a/app/src/locales/fr/messages.js +++ b/app/src/locales/fr/messages.js @@ -27,7 +27,6 @@ Attributes: "Attributs", "Auto-Layouts": "Mises en page automatiques", "Back To Editor": "Retour à l'éditeur", - Background: "L'arrière plan", "Basic Flowchart": "Diagramme de flux de base", "Become a Github Sponsor": "Devenez un sponsor Github", "Become a Pro User": "Devenez un utilisateur Pro", @@ -49,6 +48,7 @@ Charts: "Graphiques", "Check your email for a link to log in. You can close this window.": "Consultez votre messagerie électronique pour le lien de connexion. Vous pouvez fermer cette fenêtre.", + "Choose a Theme": "Choisir un thème", "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. .": "Choisissez parmi une variété de formes de flèches pour la source et la cible d'un bord. Les formes incluent triangle, triangle-tee, cercle-triangle, triangle-croix, triangle-backcurve, vee, tee, carré, cercle, diamant, chevron, aucun.", "Choose the plan that's right for you and start creating amazing flowcharts with Flowchart Fun Pro": @@ -60,6 +60,7 @@ "Clear text?": "Effacer le texte?", "Click on \\nLearn Syntax\\nto learn more": "Cliquez sur \\nApprendre la syntaxe\\npour en savoir plus.", + "Click to preview": "Cliquez pour prévisualiser", Clone: "Cloner", Close: "Fermer", Color: "Couleur", @@ -90,6 +91,8 @@ "Créer une arête entre deux nœuds est fait en indentant le second nœud sous le premier", "Custom Sharing Options": "Options de partage personnalisées", "Customer Portal": "Portail Clients", + "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck.": + "Personnalisez votre thème en modifiant le <0>Cytoscape CSS ci-dessous. Notre documentation de mise en forme arrive bientôt ! Entre-temps, la meilleure ressource est la documentation <1>Cytoscape. Venez poser des questions sur le <2>Discord si vous êtes coincé.", Dark: "Sombre", "Dark Mode": "Mode sombre", Date: "Date", @@ -160,7 +163,6 @@ Fullscreen: "Plein écran", Futuristic: "Futuriste", "Get More Layouts": "Obtenez plus de mises en page", - "Get More Themes": "Obtenez plus de thèmes", "Get personalized attention and support from our expert team": "Obtenez une attention et un soutien personnalisés de notre équipe d'experts ", "Getting Started": "Commencer", @@ -215,7 +217,10 @@ Light: "Lumineux", "Light Mode": "Mode lumineux", Link: "Lien", + "Load Theme": "Charger le thème", Loading: "Chargement", + "Loading a theme will erase any custom styles you have applied": + "Charger un thème effacera tous les styles personnalisés que vous avez appliqués", "Log In": "Connexion", "Log Out": "Déconnexion", "Log in to start creating flowcharts.": @@ -365,7 +370,7 @@ "The delimiter used to separate multiple target nodes": "Le délimiteur utilisé pour séparer plusieurs nœuds cibles", "The possible shapes are:": "Les formes possibles sont :", - Theme: "Thème", + "Theme Editor": "Éditeur de thème", "There are no edges in this data": "Il n'y a pas d'arêtes dans ces données", "This action cannot be undone.": "Cette action ne peut pas être annulée.", "This app works by typing": "Chaque ligne creé une nouvelle boite", diff --git a/app/src/locales/fr/messages.po b/app/src/locales/fr/messages.po index 476362b93..e94d06bf6 100644 --- a/app/src/locales/fr/messages.po +++ b/app/src/locales/fr/messages.po @@ -53,8 +53,8 @@ msgstr "Accédez à ces diagrammes depuis n'importe où.<0/>Partagez et intégre msgid "Accessible from any device" msgstr "Accessible depuis n'importe quel appareil" -#: src/components/Header.tsx:184 -#: src/components/Header.tsx:398 +#: src/components/Header.tsx:183 +#: src/components/Header.tsx:397 #: src/pages/Account.tsx:121 msgid "Account" msgstr "Compte" @@ -92,11 +92,7 @@ msgstr "Mises en page automatiques" msgid "Back To Editor" msgstr "Retour à l'éditeur" -#: src/components/Tabs/EditStyleTab.tsx:51 -msgid "Background" -msgstr "L'arrière plan" - -#: src/components/ShareDialog.tsx:454 +#: src/components/ShareDialog.tsx:448 msgid "Basic Flowchart" msgstr "Diagramme de flux de base" @@ -120,14 +116,14 @@ msgstr "Commencez par un exemple simple montrant comment <0>Flowchart Fun fo msgid "Blank" msgstr "Vide" -#: src/components/Header.tsx:153 -#: src/components/Header.tsx:374 +#: src/components/Header.tsx:152 +#: src/components/Header.tsx:373 #: src/pages/Blog.tsx:18 msgid "Blog" msgstr "Blog" -#: src/components/GraphContextMenu.tsx:480 -#: src/components/GraphContextMenu.tsx:576 +#: src/components/GraphContextMenu.tsx:463 +#: src/components/GraphContextMenu.tsx:559 msgid "Border" msgstr "Frontière" @@ -162,14 +158,14 @@ msgstr "Certains attributs peuvent être utilisés pour personnaliser l'apparenc msgid "Change Email Address" msgstr "Changer l'adresse email" -#: src/components/Header.tsx:163 -#: src/components/Header.tsx:380 +#: src/components/Header.tsx:162 +#: src/components/Header.tsx:379 #: src/pages/Changelog.tsx:16 msgid "Changelog" msgstr "Journal des modifications" -#: src/components/Header.tsx:96 -#: src/components/Header.tsx:352 +#: src/components/Header.tsx:95 +#: src/components/Header.tsx:351 msgid "Charts" msgstr "Graphiques" @@ -178,6 +174,10 @@ msgstr "Graphiques" msgid "Check your email for a link to log in. You can close this window." msgstr "Consultez votre messagerie électronique pour le lien de connexion. Vous pouvez fermer cette fenêtre." +#: src/components/ThemePicker.tsx:67 +msgid "Choose a Theme" +msgstr "Choisir un thème" + #: src/components/LearnSyntaxDialog.tsx:330 msgid "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. ." msgstr "Choisissez parmi une variété de formes de flèches pour la source et la cible d'un bord. Les formes incluent triangle, triangle-tee, cercle-triangle, triangle-croix, triangle-backcurve, vee, tee, carré, cercle, diamant, chevron, aucun." @@ -211,6 +211,10 @@ msgstr "Effacer le texte?" msgid "Click on \\nLearn Syntax\\nto learn more" msgstr "Cliquez sur \\nApprendre la syntaxe\\npour en savoir plus." +#: src/components/ThemePicker.tsx:70 +msgid "Click to preview" +msgstr "Cliquez pour prévisualiser" + #: src/components/CloneButton.tsx:25 msgid "Clone" msgstr "Cloner" @@ -220,7 +224,7 @@ msgstr "Cloner" msgid "Close" msgstr "Fermer" -#: src/components/GraphContextMenu.tsx:306 +#: src/components/GraphContextMenu.tsx:289 msgid "Color" msgstr "Couleur" @@ -267,21 +271,21 @@ msgstr "Continuer" msgid "Convert to hosted chart?" msgstr "Convertir en graphique hébergé ?" -#: src/components/ShareDialog.tsx:250 -#: src/components/ShareDialog.tsx:251 -#: src/components/ShareDialog.tsx:368 +#: src/components/ShareDialog.tsx:247 +#: src/components/ShareDialog.tsx:248 +#: src/components/ShareDialog.tsx:362 msgid "Copy" msgstr "Copier" -#: src/components/GraphContextMenu.tsx:225 +#: src/components/GraphContextMenu.tsx:210 msgid "Copy PNG Image" msgstr "Copier l'image PNG" -#: src/components/GraphContextMenu.tsx:183 +#: src/components/GraphContextMenu.tsx:171 msgid "Copy SVG Code" msgstr "Copier le code SVG" -#: src/components/ShareDialog.tsx:333 +#: src/components/ShareDialog.tsx:327 msgid "Copy your mermaid.js code or open it directly in the mermaid.js live editor." msgstr "Copiez votre code mermaid.js ou ouvrez-le directement dans l'éditeur en direct mermaid.js." @@ -314,6 +318,10 @@ msgstr "Options de partage personnalisées" msgid "Customer Portal" msgstr "Portail Clients" +#: src/components/Tabs/EditStyleTab.tsx:158 +msgid "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck." +msgstr "Personnalisez votre thème en modifiant le <0>Cytoscape CSS ci-dessous. Notre documentation de mise en forme arrive bientôt ! Entre-temps, la meilleure ressource est la documentation <1>Cytoscape. Venez poser des questions sur le <2>Discord si vous êtes coincé." + #: src/lib/graphOptions.ts:48 msgid "Dark" msgstr "Sombre" @@ -359,20 +367,20 @@ msgstr "Document" msgid "Don't have an account?" msgstr "Vous n'avez pas de compte ?" -#: src/components/ShareDialog.tsx:70 -#: src/components/ShareDialog.tsx:529 +#: src/components/ShareDialog.tsx:68 +#: src/components/ShareDialog.tsx:523 msgid "Download" msgstr "Télécharger" -#: src/components/GraphContextMenu.tsx:126 +#: src/components/GraphContextMenu.tsx:118 msgid "Download JPG" msgstr "Télécharger JPG" -#: src/components/GraphContextMenu.tsx:102 +#: src/components/GraphContextMenu.tsx:95 msgid "Download PNG" msgstr "Télécharger PNG" -#: src/components/GraphContextMenu.tsx:148 +#: src/components/GraphContextMenu.tsx:138 msgid "Download SVG" msgstr "Télécharger SVG" @@ -392,7 +400,7 @@ msgstr "Déposez le fichier ici ..." msgid "Easily import existing flowcharts from other software" msgstr "Importez facilement des diagrammes existants à partir d'autres logiciels" -#: src/components/GraphContextMenu.tsx:569 +#: src/components/GraphContextMenu.tsx:552 msgid "Edge" msgstr "Bord" @@ -454,12 +462,12 @@ msgstr "Bordures dans la Ligne du Nœud Source" msgid "Edges in Target Node Row" msgstr "Bordures dans la Ligne du Nœud Cible" -#: src/components/ShareDialog.tsx:142 +#: src/components/ShareDialog.tsx:139 msgid "Editable" msgstr "Modifiable" -#: src/components/Header.tsx:88 -#: src/components/Header.tsx:346 +#: src/components/Header.tsx:87 +#: src/components/Header.tsx:345 #: src/components/MobileTabToggle.tsx:20 msgid "Editor" msgstr "Éditeur" @@ -498,8 +506,8 @@ msgstr "Excalidraw" #: src/components/EditorWrapper.tsx:53 #: src/components/EditorWrapper.tsx:58 -#: src/components/ShareDialog.tsx:61 -#: src/components/ShareDialog.tsx:152 +#: src/components/ShareDialog.tsx:59 +#: src/components/ShareDialog.tsx:149 msgid "Export" msgstr "Exporter" @@ -512,7 +520,7 @@ msgstr "Exporter des images haute résolution" msgid "Export to SVG" msgstr "Exporter en SVG" -#: src/components/GraphContextMenu.tsx:267 +#: src/components/GraphContextMenu.tsx:252 msgid "Extra Large" msgstr "Extra Large" @@ -520,8 +528,8 @@ msgstr "Extra Large" msgid "Extract" msgstr "Extrait" -#: src/components/Header.tsx:127 -#: src/components/Header.tsx:366 +#: src/components/Header.tsx:126 +#: src/components/Header.tsx:365 msgid "Feedback" msgstr "Commentaire" @@ -541,7 +549,7 @@ msgstr "Vous avez trouvé un bug ? Vous souhaitez faire une demande de fonctionn msgid "Free" msgstr "Gratuit " -#: src/components/ShareDialog.tsx:139 +#: src/components/ShareDialog.tsx:136 msgid "Fullscreen" msgstr "Plein écran" @@ -553,10 +561,6 @@ msgstr "Futuriste" msgid "Get More Layouts" msgstr "Obtenez plus de mises en page" -#: src/components/Tabs/EditStyleTab.tsx:97 -msgid "Get More Themes" -msgstr "Obtenez plus de thèmes" - #: src/pages/Pricing.tsx:34 msgid "Get personalized attention and support from our expert team" msgstr "Obtenez une attention et un soutien personnalisés de notre équipe d'experts " @@ -582,7 +586,7 @@ msgstr "Des questions ou des problèmes complexes ? Nous sommes là pour vous ai msgid "Heads up! Before you clear your cache, remember that this document isn't saved in the cloud." msgstr "Attention ! Avant de vider votre cache, n'oubliez pas que ce document n'est pas enregistré dans le cloud." -#: src/components/Header.tsx:105 +#: src/components/Header.tsx:104 msgid "Help" msgstr "Aide" @@ -638,7 +642,7 @@ msgstr "Importer des données à partir de n'importe quel fichier CSV et les map msgid "Import from Lucidchart, Visio, and other CSV files" msgstr "Importer à partir de Lucidchart, Visio et autres fichiers CSV" -#: src/components/ShareDialog.tsx:446 +#: src/components/ShareDialog.tsx:440 msgid "Import your diagram it into Microsoft Visio using one of these CSV files." msgstr "Importez votre diagramme dans Microsoft Visio à l'aide de l'un de ces fichiers CSV." @@ -650,7 +654,7 @@ msgstr "L'importation de données est une fonctionnalité professionnelle. Vous msgid "Impress your audience with high-quality images produced by Flowchart Fun" msgstr "Impressionnez votre public avec des images de haute qualité produites par Flowchart Fun " -#: src/components/ShareDialog.tsx:479 +#: src/components/ShareDialog.tsx:473 msgid "Include a title using a <0>title attribute. To use Visio coloring, add a <1>roleType attribute equal to one of the following:" msgstr "Incluez un titre en utilisant un attribut <0>title. Pour utiliser la coloration Visio, ajoutez un attribut <1>roleType égal à l'un des éléments suivants:" @@ -658,7 +662,7 @@ msgstr "Incluez un titre en utilisant un attribut <0>title. Pour utiliser la msgid "Indenting creates an edge" msgstr "L'indentation crée un bord" -#: src/components/Header.tsx:142 +#: src/components/Header.tsx:141 msgid "Info" msgstr "Info" @@ -674,7 +678,7 @@ msgstr "Est" msgid "Language" msgstr "Langue" -#: src/components/GraphContextMenu.tsx:262 +#: src/components/GraphContextMenu.tsx:247 msgid "Large" msgstr "Grand" @@ -723,16 +727,25 @@ msgstr "Lumineux" msgid "Light Mode" msgstr "Mode lumineux" -#: src/components/ShareDialog.tsx:134 +#: src/components/ShareDialog.tsx:131 msgid "Link" msgstr "Lien" +#: src/components/ThemePicker.tsx:54 +#: src/components/ThemePicker.tsx:108 +msgid "Load Theme" +msgstr "Charger le thème" + #: src/components/PaymentStepper.tsx:149 msgid "Loading" msgstr "Chargement" -#: src/components/Header.tsx:202 -#: src/components/Header.tsx:422 +#: src/components/ThemePicker.tsx:89 +msgid "Loading a theme will erase any custom styles you have applied" +msgstr "Charger un thème effacera tous les styles personnalisés que vous avez appliqués" + +#: src/components/Header.tsx:201 +#: src/components/Header.tsx:421 #: src/pages/LogIn.tsx:64 #: src/pages/New.tsx:263 msgid "Log In" @@ -750,7 +763,7 @@ msgstr "Connectez-vous pour commencer à créer des diagrammes." msgid "Make a One-Time Donation" msgstr "Faites un don unique" -#: src/components/ShareDialog.tsx:412 +#: src/components/ShareDialog.tsx:406 msgid "Make publicly accessible" msgstr "Rendre accessible au public" @@ -766,7 +779,7 @@ msgstr "Cartographier les données" msgid "Market understanding and competitive landscape maintenance for SaaS product development" msgstr "Comprendre le marché et maintenir le paysage concurrentiel pour le développement de produits SaaS" -#: src/components/GraphContextMenu.tsx:258 +#: src/components/GraphContextMenu.tsx:243 msgid "Medium" msgstr "Moyen" @@ -794,8 +807,8 @@ msgstr "Musée" msgid "Name" msgstr "Nom" -#: src/components/Header.tsx:79 -#: src/components/Header.tsx:340 +#: src/components/Header.tsx:78 +#: src/components/Header.tsx:339 #: src/pages/Charts.tsx:102 msgid "New" msgstr "Nouveau" @@ -813,7 +826,7 @@ msgstr "Prochain paiement" msgid "No Edges" msgstr "Pas de bords" -#: src/components/GraphContextMenu.tsx:299 +#: src/components/GraphContextMenu.tsx:282 msgid "Node" msgstr "Nœud" @@ -880,7 +893,7 @@ msgstr "Disponible uniquement sur cet appareil.<0/>La suppression de votre cache msgid "Open Customer Portal" msgstr "Ouvrir le portail client" -#: src/components/ShareDialog.tsx:466 +#: src/components/ShareDialog.tsx:460 msgid "Organization Chart" msgstr "Organigramme" @@ -916,8 +929,8 @@ msgstr "Livre-jeu" msgid "Pointer and container on same line" msgstr "Pointeur et conteneur sur la même ligne" -#: src/components/Header.tsx:193 -#: src/components/Header.tsx:407 +#: src/components/Header.tsx:192 +#: src/components/Header.tsx:406 msgid "Pricing" msgstr "Tarification" @@ -933,8 +946,8 @@ msgstr "Traitement des données" msgid "Prompt" msgstr "Invite" -#: src/components/ShareDialog.tsx:408 -#: src/components/ShareDialog.tsx:431 +#: src/components/ShareDialog.tsx:402 +#: src/components/ShareDialog.tsx:425 msgid "Public" msgstr "Public" @@ -943,7 +956,7 @@ msgid "Random" msgstr "Aléatoire" #: src/components/EditorWrapper.tsx:44 -#: src/components/ShareDialog.tsx:145 +#: src/components/ShareDialog.tsx:142 msgid "Read-only" msgstr "Lecture seulement" @@ -1028,8 +1041,8 @@ msgstr "Retour" msgid "Right to Left" msgstr "De droite à gauche" -#: src/components/Header.tsx:170 -#: src/components/Header.tsx:386 +#: src/components/Header.tsx:169 +#: src/components/Header.tsx:385 #: src/pages/Roadmap.tsx:16 msgid "Roadmap" msgstr "Roadmap" @@ -1058,13 +1071,13 @@ msgstr "Sélectionnez votre plan !" msgid "Send us Feedback" msgstr "Envoyez-nous vos commentaires" -#: src/components/Header.tsx:177 -#: src/components/Header.tsx:391 +#: src/components/Header.tsx:176 +#: src/components/Header.tsx:390 #: src/components/Settings.tsx:50 msgid "Settings" msgstr "Paramètres" -#: src/components/GraphContextMenu.tsx:368 +#: src/components/GraphContextMenu.tsx:351 msgid "Shape" msgstr "Forme" @@ -1077,11 +1090,11 @@ msgstr "Inscription" msgid "Sign Up Now" msgstr "Inscrivez-vous maintenant" -#: src/components/GraphContextMenu.tsx:435 +#: src/components/GraphContextMenu.tsx:418 msgid "Size" msgstr "Taille" -#: src/components/GraphContextMenu.tsx:253 +#: src/components/GraphContextMenu.tsx:238 msgid "Small" msgstr "Petit" @@ -1093,7 +1106,7 @@ msgstr "Certaines classes sont disponibles pour aider à styliser votre diagramm msgid "Sorry! This page is only available in English." msgstr "Désolé ! Cette page n'est disponible qu'en anglais." -#: src/components/GraphContextMenu.tsx:618 +#: src/components/GraphContextMenu.tsx:601 msgid "Source Arrow" msgstr "Flèche de Source" @@ -1172,7 +1185,7 @@ msgstr "L'abonnement prendra fin" msgid "Supply chain analysis and optimization: cost reduction, efficiency improvement, and stakeholder collaboration" msgstr "Analyse et optimisation de la chaîne d'approvisionnement : réduction des coûts, amélioration de l'efficacité et collaboration des parties prenantes" -#: src/components/GraphContextMenu.tsx:657 +#: src/components/GraphContextMenu.tsx:640 msgid "Target Arrow" msgstr "Flèche de Cible" @@ -1238,9 +1251,9 @@ msgstr "Le délimiteur utilisé pour séparer plusieurs nœuds cibles" msgid "The possible shapes are:" msgstr "Les formes possibles sont :" -#: src/components/Tabs/EditStyleTab.tsx:33 -msgid "Theme" -msgstr "Thème" +#: src/components/Tabs/EditStyleTab.tsx:69 +msgid "Theme Editor" +msgstr "Éditeur de thème" #: src/components/ImportDataDialog.tsx:419 msgid "There are no edges in this data" @@ -1258,7 +1271,7 @@ msgstr "Chaque ligne creé une nouvelle boite" msgid "This feature is only available to pro users. <0>Become a pro user to unlock it." msgstr "Cette fonctionnalité est uniquement disponible pour les utilisateurs pro. <0>Devenez un utilisateur pro pour la débloquer." -#: src/components/ShareDialog.tsx:538 +#: src/components/ShareDialog.tsx:532 msgid "Tip" msgstr "Astuce" @@ -1352,11 +1365,11 @@ msgstr "Utilisez les attributs <0>w et <1>h pour définir explicitement msgid "Use the customer portal to change your billing information." msgstr "Utilisez le portail client pour modifier vos informations de facturation." -#: src/components/ShareDialog.tsx:474 +#: src/components/ShareDialog.tsx:468 msgid "Use this file for org charts, hierarchies, and other organizational structures." msgstr "Utilisez ce fichier pour les organigrammes, les hiérarchies et autres structures organisationnelles." -#: src/components/ShareDialog.tsx:462 +#: src/components/ShareDialog.tsx:456 msgid "Use this file for sequences, processes, and workflows." msgstr "Utilisez ce fichier pour les séquences, les processus et les workflows." diff --git a/app/src/locales/hi/messages.js b/app/src/locales/hi/messages.js index edbd33779..1122e9fef 100644 --- a/app/src/locales/hi/messages.js +++ b/app/src/locales/hi/messages.js @@ -26,7 +26,6 @@ Attributes: "गुण", "Auto-Layouts": "ऑटो लेआउट", "Back To Editor": "संपादक पर वापस जाएं", - Background: "पृष्ठभूमि", "Basic Flowchart": "बेसिक फ्लोचार्ट", "Become a Github Sponsor": "गिटहब स्पॉन्सर बनें", "Become a Pro User": "प्रो उपयोगकर्ता बनें", @@ -48,6 +47,7 @@ Charts: "चार्ट", "Check your email for a link to log in. You can close this window.": "लॉग इन वाले लिंक के लिए अपना ईमेल देखें. आप इस विंडो को बंद कर सकते हैं.", + "Choose a Theme": "एक थीम चुनें", "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. .": "एक किनारे के स्रोत और लक्ष्य के लिए विभिन्न तीर आकारों से चुनें। आकार शामिल हैं त्रिकोण, त्रिकोण-टी, सर्कल-त्रिकोण, त्रिकोण-क्रॉस, त्रिकोण-बैककर्व, वी, टी, चौकोर, हीरा, चेवरॉन और कोई नहीं।", "Choose the plan that's right for you and start creating amazing flowcharts with Flowchart Fun Pro": @@ -59,6 +59,7 @@ "Clear text?": "पाठ साफ़ करें?", "Click on \\nLearn Syntax\\nto learn more": "\\nसिंटैक्स सीखने के लिए \\nपर क्लिक करें\\n", + "Click to preview": "पूर्वावलोकन के लिए क्लिक करें", Clone: "क्लोन करें", Close: "बंद करें", Color: "रंग", @@ -89,6 +90,8 @@ "दो नोड्स के बीच एक एज बनाने के लिए दूसरा नोड पहले वाले के नीचे इंडेंट करना होता है", "Custom Sharing Options": "कस्टम शेयरिंग विकल्प", "Customer Portal": "ग्राहक पोर्टल", + "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck.": + "नीचे दिए गए <0>Cytoscape CSS को संशोधित करके अपनी थीम को अनुकूलित करें। हमारी स्टाइलिंग दस्तावेज़ की तैयारी जल्द ही होगी! इस बीच, सर्वश्रेष्ठ स्रोत <1>Cytoscape दस्तावेज़ है। अगर आप संकट में पड़ जाते हैं तो डिस्कोर्ड में सवाल पूछने आएं।", Dark: "डार्क", "Dark Mode": "डार्क मोड", Date: "तारीख़", @@ -159,7 +162,6 @@ Fullscreen: "फ़ुलस्क्रीन", Futuristic: "भविष्य का", "Get More Layouts": "ज़्यादा लेआउट पाएं", - "Get More Themes": "ज़्यादा थीम पाएं", "Get personalized attention and support from our expert team": "हमारे विशेषज्ञ टीम से व्यक्तिगत ध्यान और समर्थन प्राप्त करें", "Getting Started": "शुरू करना", @@ -213,7 +215,10 @@ Light: "लाइट", "Light Mode": "लाइट मोड", Link: "लिंक", + "Load Theme": "थीम लोड करें", Loading: "लोड हो रहा है", + "Loading a theme will erase any custom styles you have applied": + "थीम लोड करने से आपने अपने कस्टम स्टाइल को मिटा दिया होगा", "Log In": "लॉग इन करें", "Log Out": "लॉग आउट", "Log in to start creating flowcharts.": @@ -361,7 +366,7 @@ "The delimiter used to separate multiple target nodes": "कई लक्ष्य नोड्स को अलग करने के लिए उपयोग किया गया डिलिमिटर", "The possible shapes are:": "संभव आकृतियाँ हैं:", - Theme: "शैली", + "Theme Editor": "थीम एडिटर", "There are no edges in this data": "इस डेटा में कोई एड्ज नहीं है", "This action cannot be undone.": "इस क्रिया को पूर्ववत नहीं किया जा सकता।", "This app works by typing": "यह ऐप टाइप द्वारा काम करता है", diff --git a/app/src/locales/hi/messages.po b/app/src/locales/hi/messages.po index d7cdaf945..b26a4b8cd 100644 --- a/app/src/locales/hi/messages.po +++ b/app/src/locales/hi/messages.po @@ -53,8 +53,8 @@ msgstr "इन चार्ट्स को कहीं से भी एक् msgid "Accessible from any device" msgstr "किसी भी उपकरण से पहुँचा जा सकता है" -#: src/components/Header.tsx:184 -#: src/components/Header.tsx:398 +#: src/components/Header.tsx:183 +#: src/components/Header.tsx:397 #: src/pages/Account.tsx:121 msgid "Account" msgstr "खाता" @@ -92,11 +92,7 @@ msgstr "ऑटो लेआउट" msgid "Back To Editor" msgstr "संपादक पर वापस जाएं" -#: src/components/Tabs/EditStyleTab.tsx:51 -msgid "Background" -msgstr "पृष्ठभूमि" - -#: src/components/ShareDialog.tsx:454 +#: src/components/ShareDialog.tsx:448 msgid "Basic Flowchart" msgstr "बेसिक फ्लोचार्ट" @@ -120,14 +116,14 @@ msgstr "<0>फ्लोचार्ट फन काम कैसे कर msgid "Blank" msgstr "खाली" -#: src/components/Header.tsx:153 -#: src/components/Header.tsx:374 +#: src/components/Header.tsx:152 +#: src/components/Header.tsx:373 #: src/pages/Blog.tsx:18 msgid "Blog" msgstr "ब्लॉग" -#: src/components/GraphContextMenu.tsx:480 -#: src/components/GraphContextMenu.tsx:576 +#: src/components/GraphContextMenu.tsx:463 +#: src/components/GraphContextMenu.tsx:559 msgid "Border" msgstr "सीमा" @@ -162,14 +158,14 @@ msgstr "कुछ गुण तत्वों की दिखता या क msgid "Change Email Address" msgstr "ईमेल पता बदलें" -#: src/components/Header.tsx:163 -#: src/components/Header.tsx:380 +#: src/components/Header.tsx:162 +#: src/components/Header.tsx:379 #: src/pages/Changelog.tsx:16 msgid "Changelog" msgstr "बदलाव का" -#: src/components/Header.tsx:96 -#: src/components/Header.tsx:352 +#: src/components/Header.tsx:95 +#: src/components/Header.tsx:351 msgid "Charts" msgstr "चार्ट" @@ -178,6 +174,10 @@ msgstr "चार्ट" msgid "Check your email for a link to log in. You can close this window." msgstr "लॉग इन वाले लिंक के लिए अपना ईमेल देखें. आप इस विंडो को बंद कर सकते हैं." +#: src/components/ThemePicker.tsx:67 +msgid "Choose a Theme" +msgstr "एक थीम चुनें" + #: src/components/LearnSyntaxDialog.tsx:330 msgid "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. ." msgstr "एक किनारे के स्रोत और लक्ष्य के लिए विभिन्न तीर आकारों से चुनें। आकार शामिल हैं त्रिकोण, त्रिकोण-टी, सर्कल-त्रिकोण, त्रिकोण-क्रॉस, त्रिकोण-बैककर्व, वी, टी, चौकोर, हीरा, चेवरॉन और कोई नहीं।" @@ -211,6 +211,10 @@ msgstr "पाठ साफ़ करें?" msgid "Click on \\nLearn Syntax\\nto learn more" msgstr "\\nसिंटैक्स सीखने के लिए \\nपर क्लिक करें\\n" +#: src/components/ThemePicker.tsx:70 +msgid "Click to preview" +msgstr "पूर्वावलोकन के लिए क्लिक करें" + #: src/components/CloneButton.tsx:25 msgid "Clone" msgstr "क्लोन करें" @@ -220,7 +224,7 @@ msgstr "क्लोन करें" msgid "Close" msgstr "बंद करें" -#: src/components/GraphContextMenu.tsx:306 +#: src/components/GraphContextMenu.tsx:289 msgid "Color" msgstr "रंग" @@ -267,21 +271,21 @@ msgstr "जारी रखें" msgid "Convert to hosted chart?" msgstr "होस्टेड चार्ट में कनवर्ट करें?" -#: src/components/ShareDialog.tsx:250 -#: src/components/ShareDialog.tsx:251 -#: src/components/ShareDialog.tsx:368 +#: src/components/ShareDialog.tsx:247 +#: src/components/ShareDialog.tsx:248 +#: src/components/ShareDialog.tsx:362 msgid "Copy" msgstr "कॉपी करें" -#: src/components/GraphContextMenu.tsx:225 +#: src/components/GraphContextMenu.tsx:210 msgid "Copy PNG Image" msgstr "PNG छवि कॉपी करें" -#: src/components/GraphContextMenu.tsx:183 +#: src/components/GraphContextMenu.tsx:171 msgid "Copy SVG Code" msgstr "SVG कोड कॉपी करें" -#: src/components/ShareDialog.tsx:333 +#: src/components/ShareDialog.tsx:327 msgid "Copy your mermaid.js code or open it directly in the mermaid.js live editor." msgstr "अपना मर्मेड.जेएस कोड कॉपी करें या मर्मेड.जेएस लाइव एडिटर में सीधे खोलें।" @@ -314,6 +318,10 @@ msgstr "कस्टम शेयरिंग विकल्प" msgid "Customer Portal" msgstr "ग्राहक पोर्टल" +#: src/components/Tabs/EditStyleTab.tsx:158 +msgid "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck." +msgstr "नीचे दिए गए <0>Cytoscape CSS को संशोधित करके अपनी थीम को अनुकूलित करें। हमारी स्टाइलिंग दस्तावेज़ की तैयारी जल्द ही होगी! इस बीच, सर्वश्रेष्ठ स्रोत <1>Cytoscape दस्तावेज़ है। अगर आप संकट में पड़ जाते हैं तो डिस्कोर्ड में सवाल पूछने आएं।" + #: src/lib/graphOptions.ts:48 msgid "Dark" msgstr "डार्क" @@ -359,20 +367,20 @@ msgstr "दस्तावेज़" msgid "Don't have an account?" msgstr "खाता नहीं है?" -#: src/components/ShareDialog.tsx:70 -#: src/components/ShareDialog.tsx:529 +#: src/components/ShareDialog.tsx:68 +#: src/components/ShareDialog.tsx:523 msgid "Download" msgstr "डाउनलोड" -#: src/components/GraphContextMenu.tsx:126 +#: src/components/GraphContextMenu.tsx:118 msgid "Download JPG" msgstr "JPG डाउनलोड करें" -#: src/components/GraphContextMenu.tsx:102 +#: src/components/GraphContextMenu.tsx:95 msgid "Download PNG" msgstr "PNG डाउनलोड करें" -#: src/components/GraphContextMenu.tsx:148 +#: src/components/GraphContextMenu.tsx:138 msgid "Download SVG" msgstr "SVG डाउनलोड करें" @@ -392,7 +400,7 @@ msgstr "फाइल यहाँ ड्रॉप करें ..." msgid "Easily import existing flowcharts from other software" msgstr "अन्य सॉफ्टवेयर से मौजूदा फ्लोचार्ट आसानी से आयात करें" -#: src/components/GraphContextMenu.tsx:569 +#: src/components/GraphContextMenu.tsx:552 msgid "Edge" msgstr "किनारा" @@ -454,12 +462,12 @@ msgstr "स्रोत नोड पंक्ति में किन्ह msgid "Edges in Target Node Row" msgstr "लक्ष्य नोड पंक्ति में किन्हें" -#: src/components/ShareDialog.tsx:142 +#: src/components/ShareDialog.tsx:139 msgid "Editable" msgstr "संपादन योग्य" -#: src/components/Header.tsx:88 -#: src/components/Header.tsx:346 +#: src/components/Header.tsx:87 +#: src/components/Header.tsx:345 #: src/components/MobileTabToggle.tsx:20 msgid "Editor" msgstr "संपादक" @@ -498,8 +506,8 @@ msgstr "Excalidraw" #: src/components/EditorWrapper.tsx:53 #: src/components/EditorWrapper.tsx:58 -#: src/components/ShareDialog.tsx:61 -#: src/components/ShareDialog.tsx:152 +#: src/components/ShareDialog.tsx:59 +#: src/components/ShareDialog.tsx:149 msgid "Export" msgstr "एक्सपोर्ट करें" @@ -512,7 +520,7 @@ msgstr "उच्च-रिज़ॉल्यूशन छवियां नि msgid "Export to SVG" msgstr "SVG को निर्यात करें" -#: src/components/GraphContextMenu.tsx:267 +#: src/components/GraphContextMenu.tsx:252 msgid "Extra Large" msgstr "अति बड़ा" @@ -520,8 +528,8 @@ msgstr "अति बड़ा" msgid "Extract" msgstr "निकालना" -#: src/components/Header.tsx:127 -#: src/components/Header.tsx:366 +#: src/components/Header.tsx:126 +#: src/components/Header.tsx:365 msgid "Feedback" msgstr "फ़ीडबैक" @@ -541,7 +549,7 @@ msgstr "एक बग पाया? एक सुविधा अनुरोध msgid "Free" msgstr "मुफ्त" -#: src/components/ShareDialog.tsx:139 +#: src/components/ShareDialog.tsx:136 msgid "Fullscreen" msgstr "फ़ुलस्क्रीन" @@ -553,10 +561,6 @@ msgstr "भविष्य का" msgid "Get More Layouts" msgstr "ज़्यादा लेआउट पाएं" -#: src/components/Tabs/EditStyleTab.tsx:97 -msgid "Get More Themes" -msgstr "ज़्यादा थीम पाएं" - #: src/pages/Pricing.tsx:34 msgid "Get personalized attention and support from our expert team" msgstr "हमारे विशेषज्ञ टीम से व्यक्तिगत ध्यान और समर्थन प्राप्त करें" @@ -582,7 +586,7 @@ msgstr "जटिल सवाल या समस्याएं हैं? ह msgid "Heads up! Before you clear your cache, remember that this document isn't saved in the cloud." msgstr "ध्यान दें! इससे पहले कि आप अपना कैश क्लियर करें, याद रखें कि यह डॉक्यूमेंट क्लाउड में सेव नहीं किया गया है। " -#: src/components/Header.tsx:105 +#: src/components/Header.tsx:104 msgid "Help" msgstr "मदद" @@ -638,7 +642,7 @@ msgstr "किसी भी CSV फ़ाइल से डेटा आयात msgid "Import from Lucidchart, Visio, and other CSV files" msgstr "लुसिडचार्ट, विसिओ और अन्य CSV फ़ाइलों से आयात करें" -#: src/components/ShareDialog.tsx:446 +#: src/components/ShareDialog.tsx:440 msgid "Import your diagram it into Microsoft Visio using one of these CSV files." msgstr "इन CSV फ़ाइलों में से एक का उपयोग करके अपनी आरेख Microsoft Visio में आयात करें।" @@ -650,7 +654,7 @@ msgstr "डेटा आयात एक प्रो फीचर है। आ msgid "Impress your audience with high-quality images produced by Flowchart Fun" msgstr "फ्लोचार्ट फन द्वारा उत्पादित उच्च गुणवत्ता की छवियों से अपने दर्शकों को आकर्षित करें" -#: src/components/ShareDialog.tsx:479 +#: src/components/ShareDialog.tsx:473 msgid "Include a title using a <0>title attribute. To use Visio coloring, add a <1>roleType attribute equal to one of the following:" msgstr "एक <0>title विशेषता का उपयोग करके एक शीर्षक शामिल करें। Visio रंगीनी का उपयोग करने के लिए, निम्नलिखित में से किसी एक के बराबर एक <1>roleType विशेषता जोड़ें:" @@ -658,7 +662,7 @@ msgstr "एक <0>title विशेषता का उपयोग कर msgid "Indenting creates an edge" msgstr "इंडेंटिंग एक बढ़त बनाता है" -#: src/components/Header.tsx:142 +#: src/components/Header.tsx:141 msgid "Info" msgstr "जानकारी" @@ -674,7 +678,7 @@ msgstr "हाँ" msgid "Language" msgstr "भाषा" -#: src/components/GraphContextMenu.tsx:262 +#: src/components/GraphContextMenu.tsx:247 msgid "Large" msgstr "बड़ा" @@ -723,16 +727,25 @@ msgstr "लाइट" msgid "Light Mode" msgstr "लाइट मोड" -#: src/components/ShareDialog.tsx:134 +#: src/components/ShareDialog.tsx:131 msgid "Link" msgstr "लिंक" +#: src/components/ThemePicker.tsx:54 +#: src/components/ThemePicker.tsx:108 +msgid "Load Theme" +msgstr "थीम लोड करें" + #: src/components/PaymentStepper.tsx:149 msgid "Loading" msgstr "लोड हो रहा है" -#: src/components/Header.tsx:202 -#: src/components/Header.tsx:422 +#: src/components/ThemePicker.tsx:89 +msgid "Loading a theme will erase any custom styles you have applied" +msgstr "थीम लोड करने से आपने अपने कस्टम स्टाइल को मिटा दिया होगा" + +#: src/components/Header.tsx:201 +#: src/components/Header.tsx:421 #: src/pages/LogIn.tsx:64 #: src/pages/New.tsx:263 msgid "Log In" @@ -750,7 +763,7 @@ msgstr "फ्लोचार्ट बनाने शुरू करने msgid "Make a One-Time Donation" msgstr "एक बार दान करें" -#: src/components/ShareDialog.tsx:412 +#: src/components/ShareDialog.tsx:406 msgid "Make publicly accessible" msgstr "सार्वजनिक रूप से एक्सेस दें" @@ -766,7 +779,7 @@ msgstr "डेटा मैप" msgid "Market understanding and competitive landscape maintenance for SaaS product development" msgstr "SaaS उत्पाद विकास के लिए बाजार की समझ और प्रतिस्पर्धात्मक भूमिका बनाए रखना।" -#: src/components/GraphContextMenu.tsx:258 +#: src/components/GraphContextMenu.tsx:243 msgid "Medium" msgstr "मध्यम" @@ -794,8 +807,8 @@ msgstr "म्यूज़ियम" msgid "Name" msgstr "नाम" -#: src/components/Header.tsx:79 -#: src/components/Header.tsx:340 +#: src/components/Header.tsx:78 +#: src/components/Header.tsx:339 #: src/pages/Charts.tsx:102 msgid "New" msgstr "नया" @@ -813,7 +826,7 @@ msgstr "अगला चार्ज" msgid "No Edges" msgstr "कोई किनारे नहीं" -#: src/components/GraphContextMenu.tsx:299 +#: src/components/GraphContextMenu.tsx:282 msgid "Node" msgstr "नोड" @@ -880,7 +893,7 @@ msgstr "केवल इस उपकरण पर उपलब्ध है।< msgid "Open Customer Portal" msgstr "ग्राहक पोर्टल खोलें" -#: src/components/ShareDialog.tsx:466 +#: src/components/ShareDialog.tsx:460 msgid "Organization Chart" msgstr "संगठन चार्ट" @@ -916,8 +929,8 @@ msgstr "प्लेबुक" msgid "Pointer and container on same line" msgstr "प्रतीक और कंटेनर एक ही लाइन पर" -#: src/components/Header.tsx:193 -#: src/components/Header.tsx:407 +#: src/components/Header.tsx:192 +#: src/components/Header.tsx:406 msgid "Pricing" msgstr "मूल्य निर्धारण" @@ -933,8 +946,8 @@ msgstr "डेटा प्रसंस्करण" msgid "Prompt" msgstr "प्रॉम्प्ट" -#: src/components/ShareDialog.tsx:408 -#: src/components/ShareDialog.tsx:431 +#: src/components/ShareDialog.tsx:402 +#: src/components/ShareDialog.tsx:425 msgid "Public" msgstr "पब्लिक" @@ -943,7 +956,7 @@ msgid "Random" msgstr "अनियमित" #: src/components/EditorWrapper.tsx:44 -#: src/components/ShareDialog.tsx:145 +#: src/components/ShareDialog.tsx:142 msgid "Read-only" msgstr "केवल पढ़ने के लिए" @@ -1028,8 +1041,8 @@ msgstr "वापसी" msgid "Right to Left" msgstr "दाएं से बाएं" -#: src/components/Header.tsx:170 -#: src/components/Header.tsx:386 +#: src/components/Header.tsx:169 +#: src/components/Header.tsx:385 #: src/pages/Roadmap.tsx:16 msgid "Roadmap" msgstr "रोडमैप" @@ -1058,13 +1071,13 @@ msgstr "अपना योजना चुनें!" msgid "Send us Feedback" msgstr "हमें प्रतिक्रिया भेजें" -#: src/components/Header.tsx:177 -#: src/components/Header.tsx:391 +#: src/components/Header.tsx:176 +#: src/components/Header.tsx:390 #: src/components/Settings.tsx:50 msgid "Settings" msgstr "सेटिंग" -#: src/components/GraphContextMenu.tsx:368 +#: src/components/GraphContextMenu.tsx:351 msgid "Shape" msgstr "आकृति" @@ -1077,11 +1090,11 @@ msgstr "साइन अप" msgid "Sign Up Now" msgstr "अभी साइन अप करें" -#: src/components/GraphContextMenu.tsx:435 +#: src/components/GraphContextMenu.tsx:418 msgid "Size" msgstr "आकार" -#: src/components/GraphContextMenu.tsx:253 +#: src/components/GraphContextMenu.tsx:238 msgid "Small" msgstr "छोटा" @@ -1093,7 +1106,7 @@ msgstr "कुछ क्लास आपकी फ्लोचार्ट स msgid "Sorry! This page is only available in English." msgstr "माफ़ करें! यह पेज केवल अंग्रेजी में उपलब्ध है।" -#: src/components/GraphContextMenu.tsx:618 +#: src/components/GraphContextMenu.tsx:601 msgid "Source Arrow" msgstr "स्रोत तीर " @@ -1172,7 +1185,7 @@ msgstr "सदस्यता समाप्त हो जाएगी" msgid "Supply chain analysis and optimization: cost reduction, efficiency improvement, and stakeholder collaboration" msgstr "आपूर्ति श्रृंखला विश्लेषण और अनुकूलन: लागत कमी, कार्यक्षमता में सुधार और स्टेकहोल्डर सहयोग।" -#: src/components/GraphContextMenu.tsx:657 +#: src/components/GraphContextMenu.tsx:640 msgid "Target Arrow" msgstr "लक्ष्य तीर" @@ -1238,9 +1251,9 @@ msgstr "कई लक्ष्य नोड्स को अलग करने msgid "The possible shapes are:" msgstr "संभव आकृतियाँ हैं:" -#: src/components/Tabs/EditStyleTab.tsx:33 -msgid "Theme" -msgstr "शैली" +#: src/components/Tabs/EditStyleTab.tsx:69 +msgid "Theme Editor" +msgstr "थीम एडिटर" #: src/components/ImportDataDialog.tsx:419 msgid "There are no edges in this data" @@ -1258,7 +1271,7 @@ msgstr "यह ऐप टाइप द्वारा काम करता ह msgid "This feature is only available to pro users. <0>Become a pro user to unlock it." msgstr "यह सुविधा केवल प्रो उपयोगकर्ताओं के लिए उपलब्ध है। <0>प्रो उपयोगकर्ता बनें इसे अनलॉक करने के लिए।" -#: src/components/ShareDialog.tsx:538 +#: src/components/ShareDialog.tsx:532 msgid "Tip" msgstr "सुझाव" @@ -1352,11 +1365,11 @@ msgstr "नोड की विशिष्ट चौड़ाई और ऊँ msgid "Use the customer portal to change your billing information." msgstr "अपनी बिलिंग जानकारी बदलने के लिए ग्राहक पोर्टल का उपयोग करें।" -#: src/components/ShareDialog.tsx:474 +#: src/components/ShareDialog.tsx:468 msgid "Use this file for org charts, hierarchies, and other organizational structures." msgstr "संगठनात्मक चार्ट, पदानुक्रमों और अन्य संगठनात्मक संरचनाओं के लिए इस फ़ाइल का उपयोग करें।" -#: src/components/ShareDialog.tsx:462 +#: src/components/ShareDialog.tsx:456 msgid "Use this file for sequences, processes, and workflows." msgstr "अनुक्रमों, प्रक्रियाओं और कार्यप्रवाहों के लिए इस फ़ाइल का उपयोग करें।" diff --git a/app/src/locales/ko/messages.js b/app/src/locales/ko/messages.js index 703679d03..42cbe894e 100644 --- a/app/src/locales/ko/messages.js +++ b/app/src/locales/ko/messages.js @@ -26,7 +26,6 @@ Attributes: "속성", "Auto-Layouts": "자동 레이아웃", "Back To Editor": "편집기로 돌아가기", - Background: "배경", "Basic Flowchart": "기본 플로우 차트", "Become a Github Sponsor": "깃허브 스폰서가 되기", "Become a Pro User": "프로 사용자가 되기", @@ -48,6 +47,7 @@ Charts: "차트", "Check your email for a link to log in. You can close this window.": "이메일에서 로그인 링크를 확인하십시오. 이 창을 닫아도 됩니다.", + "Choose a Theme": "테마를 선택하세요", "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. .": "에지의 소스와 목적지를 위한 다양한 화살표 모양을 선택합니다. 모양에는 삼각형, 삼각형-티, 원-삼각형, 삼각형-가위형, 삼각형-뒤곡선, 베이, 티, 사각형, 원, 다이아몬드, 쉐브론, 없음이 포함됩니다.", "Choose the plan that's right for you and start creating amazing flowcharts with Flowchart Fun Pro": @@ -59,6 +59,7 @@ "Clear text?": "텍스트를 지우시겠습니까?", "Click on \\nLearn Syntax\\nto learn more": "\\n문법 습득\\n을 클릭하여 더 배우십시오", + "Click to preview": "미리보기를 클릭하세요", Clone: "클론", Close: "닫기", Color: "색상", @@ -89,6 +90,8 @@ "두 노드 사이에 엣지를 만드는 것은 첫 번째 노드 아래에 두 번째 노드를 들여 쓰는 것으로 합니다.", "Custom Sharing Options": "커스텀 공유 옵션", "Customer Portal": "고객 포털", + "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck.": + "아래의 <0>Cytoscape CSS를 편집하여 테마를 사용자 정의합니다. 스타일 문서는 곧 준비될 예정입니다! 일단은 최고의 자료는 <1>Cytoscape 문서입니다. 막히면 <2>Discord에 문의하세요.", Dark: "다크", "Dark Mode": "다크 모드", Date: "날짜", @@ -155,7 +158,6 @@ Fullscreen: "전체 화면", Futuristic: "미래 지향적", "Get More Layouts": "더 많은 레이아웃을 보고 싶어요", - "Get More Themes": "더 많은 테마 받기", "Get personalized attention and support from our expert team": "고급 지식과 지원을 받으세요", "Getting Started": "시작하기", @@ -209,7 +211,10 @@ Light: "라이트", "Light Mode": "라이트 모드", Link: "링크", + "Load Theme": "테마 불러오기", Loading: "로딩", + "Loading a theme will erase any custom styles you have applied": + "테마를 불러오면 사용자 정의 스타일이 모두 사라집니다.", "Log In": "로그인", "Log Out": "로그아웃", "Log in to start creating flowcharts.": @@ -353,7 +358,7 @@ "The delimiter used to separate multiple target nodes": "여러 개의 목표 노드를 구분하기 위해 사용되는 구분 기호", "The possible shapes are:": "가능한 모양은 다음과 같습니다:", - Theme: "테마", + "Theme Editor": "테마 편집기", "There are no edges in this data": "이 데이터에는 엣지가 없습니다.", "This action cannot be undone.": "이 작업은 취소할 수 없습니다.", "This app works by typing": "이 앱은 타이핑으로 작동합니다", diff --git a/app/src/locales/ko/messages.po b/app/src/locales/ko/messages.po index 5066f0209..64d539ef3 100644 --- a/app/src/locales/ko/messages.po +++ b/app/src/locales/ko/messages.po @@ -53,8 +53,8 @@ msgstr "어디서든 이 차트에 액세스하세요.<0/>동기화되어 유지 msgid "Accessible from any device" msgstr "모든 장치에서 액세스 가능" -#: src/components/Header.tsx:184 -#: src/components/Header.tsx:398 +#: src/components/Header.tsx:183 +#: src/components/Header.tsx:397 #: src/pages/Account.tsx:121 msgid "Account" msgstr "계정" @@ -92,11 +92,7 @@ msgstr "자동 레이아웃" msgid "Back To Editor" msgstr "편집기로 돌아가기" -#: src/components/Tabs/EditStyleTab.tsx:51 -msgid "Background" -msgstr "배경" - -#: src/components/ShareDialog.tsx:454 +#: src/components/ShareDialog.tsx:448 msgid "Basic Flowchart" msgstr "기본 플로우 차트" @@ -120,14 +116,14 @@ msgstr "<0>Flowchart Fun이 어떻게 작동하는지를 보여주는 간단 msgid "Blank" msgstr "빈칸" -#: src/components/Header.tsx:153 -#: src/components/Header.tsx:374 +#: src/components/Header.tsx:152 +#: src/components/Header.tsx:373 #: src/pages/Blog.tsx:18 msgid "Blog" msgstr "블로그" -#: src/components/GraphContextMenu.tsx:480 -#: src/components/GraphContextMenu.tsx:576 +#: src/components/GraphContextMenu.tsx:463 +#: src/components/GraphContextMenu.tsx:559 msgid "Border" msgstr "경계" @@ -162,14 +158,14 @@ msgstr "일부 속성은 요소의 모양 또는 기능을 사용자 정의하 msgid "Change Email Address" msgstr "이메일 주소 변경" -#: src/components/Header.tsx:163 -#: src/components/Header.tsx:380 +#: src/components/Header.tsx:162 +#: src/components/Header.tsx:379 #: src/pages/Changelog.tsx:16 msgid "Changelog" msgstr "변경 로그" -#: src/components/Header.tsx:96 -#: src/components/Header.tsx:352 +#: src/components/Header.tsx:95 +#: src/components/Header.tsx:351 msgid "Charts" msgstr "차트" @@ -178,6 +174,10 @@ msgstr "차트" msgid "Check your email for a link to log in. You can close this window." msgstr "이메일에서 로그인 링크를 확인하십시오. 이 창을 닫아도 됩니다." +#: src/components/ThemePicker.tsx:67 +msgid "Choose a Theme" +msgstr "테마를 선택하세요" + #: src/components/LearnSyntaxDialog.tsx:330 msgid "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. ." msgstr "에지의 소스와 목적지를 위한 다양한 화살표 모양을 선택합니다. 모양에는 삼각형, 삼각형-티, 원-삼각형, 삼각형-가위형, 삼각형-뒤곡선, 베이, 티, 사각형, 원, 다이아몬드, 쉐브론, 없음이 포함됩니다." @@ -211,6 +211,10 @@ msgstr "텍스트를 지우시겠습니까?" msgid "Click on \\nLearn Syntax\\nto learn more" msgstr "\\n문법 습득\\n을 클릭하여 더 배우십시오" +#: src/components/ThemePicker.tsx:70 +msgid "Click to preview" +msgstr "미리보기를 클릭하세요" + #: src/components/CloneButton.tsx:25 msgid "Clone" msgstr "클론" @@ -220,7 +224,7 @@ msgstr "클론" msgid "Close" msgstr "닫기" -#: src/components/GraphContextMenu.tsx:306 +#: src/components/GraphContextMenu.tsx:289 msgid "Color" msgstr "색상" @@ -267,21 +271,21 @@ msgstr "계속하기" msgid "Convert to hosted chart?" msgstr "호스팅 차트로 변환하시겠습니까?" -#: src/components/ShareDialog.tsx:250 -#: src/components/ShareDialog.tsx:251 -#: src/components/ShareDialog.tsx:368 +#: src/components/ShareDialog.tsx:247 +#: src/components/ShareDialog.tsx:248 +#: src/components/ShareDialog.tsx:362 msgid "Copy" msgstr "복사" -#: src/components/GraphContextMenu.tsx:225 +#: src/components/GraphContextMenu.tsx:210 msgid "Copy PNG Image" msgstr "PNG 이미지 복사" -#: src/components/GraphContextMenu.tsx:183 +#: src/components/GraphContextMenu.tsx:171 msgid "Copy SVG Code" msgstr "SVG 코드 복사" -#: src/components/ShareDialog.tsx:333 +#: src/components/ShareDialog.tsx:327 msgid "Copy your mermaid.js code or open it directly in the mermaid.js live editor." msgstr "mermaid.js 코드를 복사하거나 mermaid.js 라이브 편집기에서 직접 열어주세요." @@ -314,6 +318,10 @@ msgstr "커스텀 공유 옵션" msgid "Customer Portal" msgstr "고객 포털" +#: src/components/Tabs/EditStyleTab.tsx:158 +msgid "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck." +msgstr "아래의 <0>Cytoscape CSS를 편집하여 테마를 사용자 정의합니다. 스타일 문서는 곧 준비될 예정입니다! 일단은 최고의 자료는 <1>Cytoscape 문서입니다. 막히면 <2>Discord에 문의하세요." + #: src/lib/graphOptions.ts:48 msgid "Dark" msgstr "다크" @@ -359,20 +367,20 @@ msgstr "문서" msgid "Don't have an account?" msgstr "계정이 없습니까?" -#: src/components/ShareDialog.tsx:70 -#: src/components/ShareDialog.tsx:529 +#: src/components/ShareDialog.tsx:68 +#: src/components/ShareDialog.tsx:523 msgid "Download" msgstr "다운로드" -#: src/components/GraphContextMenu.tsx:126 +#: src/components/GraphContextMenu.tsx:118 msgid "Download JPG" msgstr "JPG 다운로드" -#: src/components/GraphContextMenu.tsx:102 +#: src/components/GraphContextMenu.tsx:95 msgid "Download PNG" msgstr "PNG 다운로드" -#: src/components/GraphContextMenu.tsx:148 +#: src/components/GraphContextMenu.tsx:138 msgid "Download SVG" msgstr "SVG 다운로드" @@ -392,7 +400,7 @@ msgstr "파일을 여기에 드롭하세요 ..." msgid "Easily import existing flowcharts from other software" msgstr "다른 소프트웨어에서 기존 플로우 차트를 쉽게 가져오기" -#: src/components/GraphContextMenu.tsx:569 +#: src/components/GraphContextMenu.tsx:552 msgid "Edge" msgstr "가장자리" @@ -454,12 +462,12 @@ msgstr "출발 노드 행에 간선" msgid "Edges in Target Node Row" msgstr "도착 노드 행에 간선" -#: src/components/ShareDialog.tsx:142 +#: src/components/ShareDialog.tsx:139 msgid "Editable" msgstr "편집 가능" -#: src/components/Header.tsx:88 -#: src/components/Header.tsx:346 +#: src/components/Header.tsx:87 +#: src/components/Header.tsx:345 #: src/components/MobileTabToggle.tsx:20 msgid "Editor" msgstr "에디터" @@ -498,8 +506,8 @@ msgstr "Excalidraw" #: src/components/EditorWrapper.tsx:53 #: src/components/EditorWrapper.tsx:58 -#: src/components/ShareDialog.tsx:61 -#: src/components/ShareDialog.tsx:152 +#: src/components/ShareDialog.tsx:59 +#: src/components/ShareDialog.tsx:149 msgid "Export" msgstr "내보내기" @@ -512,7 +520,7 @@ msgstr "고해상도 이미지 내보내기" msgid "Export to SVG" msgstr "SVG로 내보내기" -#: src/components/GraphContextMenu.tsx:267 +#: src/components/GraphContextMenu.tsx:252 msgid "Extra Large" msgstr "엄청나게 큼" @@ -520,8 +528,8 @@ msgstr "엄청나게 큼" msgid "Extract" msgstr "발췌" -#: src/components/Header.tsx:127 -#: src/components/Header.tsx:366 +#: src/components/Header.tsx:126 +#: src/components/Header.tsx:365 msgid "Feedback" msgstr "피드백" @@ -541,7 +549,7 @@ msgstr "버그를 발견했습니까? 기능 요청이 있습니까? 우리는 msgid "Free" msgstr "무료" -#: src/components/ShareDialog.tsx:139 +#: src/components/ShareDialog.tsx:136 msgid "Fullscreen" msgstr "전체 화면" @@ -553,10 +561,6 @@ msgstr "미래 지향적" msgid "Get More Layouts" msgstr "더 많은 레이아웃을 보고 싶어요" -#: src/components/Tabs/EditStyleTab.tsx:97 -msgid "Get More Themes" -msgstr "더 많은 테마 받기" - #: src/pages/Pricing.tsx:34 msgid "Get personalized attention and support from our expert team" msgstr "고급 지식과 지원을 받으세요" @@ -582,7 +586,7 @@ msgstr "복잡한 문제가 있나요? 여기에서 도와드리겠습니다." msgid "Heads up! Before you clear your cache, remember that this document isn't saved in the cloud." msgstr "주의! 캐시를 지우기 전에 이 문서는 클라우드에 저장 되어있지 않다는 것을 기억하시기 바랍니다. " -#: src/components/Header.tsx:105 +#: src/components/Header.tsx:104 msgid "Help" msgstr "도움말" @@ -638,7 +642,7 @@ msgstr "CSV 파일에서 데이터를 가져와 새로운 플로우 차트로 msgid "Import from Lucidchart, Visio, and other CSV files" msgstr "Lucidchart, Visio 및 기타 CSV 파일에서 가져오기" -#: src/components/ShareDialog.tsx:446 +#: src/components/ShareDialog.tsx:440 msgid "Import your diagram it into Microsoft Visio using one of these CSV files." msgstr "이러한 CSV 파일 중 하나를 사용하여 다이어그램을 Microsoft Visio로 가져옵니다." @@ -650,7 +654,7 @@ msgstr "데이터 가져오기는 프로 기능입니다. Flowchart Fun Pro을 msgid "Impress your audience with high-quality images produced by Flowchart Fun" msgstr "Flowchart Fun으로 만든 고품질 이미지로 관객을 감탄시켜보세요" -#: src/components/ShareDialog.tsx:479 +#: src/components/ShareDialog.tsx:473 msgid "Include a title using a <0>title attribute. To use Visio coloring, add a <1>roleType attribute equal to one of the following:" msgstr "<0>title 속성을 사용하여 제목을 포함시키십시오. Visio 색상을 사용하려면 다음 중 하나와 같은 <1>roleType 속성을 추가하십시오:" @@ -658,7 +662,7 @@ msgstr "<0>title 속성을 사용하여 제목을 포함시키십시오. Vis msgid "Indenting creates an edge" msgstr "들여 쓰기는 가장자리를 만듭니다" -#: src/components/Header.tsx:142 +#: src/components/Header.tsx:141 msgid "Info" msgstr "정보" @@ -674,7 +678,7 @@ msgstr "있다" msgid "Language" msgstr "언어" -#: src/components/GraphContextMenu.tsx:262 +#: src/components/GraphContextMenu.tsx:247 msgid "Large" msgstr "크다" @@ -723,16 +727,25 @@ msgstr "라이트" msgid "Light Mode" msgstr "라이트 모드" -#: src/components/ShareDialog.tsx:134 +#: src/components/ShareDialog.tsx:131 msgid "Link" msgstr "링크" +#: src/components/ThemePicker.tsx:54 +#: src/components/ThemePicker.tsx:108 +msgid "Load Theme" +msgstr "테마 불러오기" + #: src/components/PaymentStepper.tsx:149 msgid "Loading" msgstr "로딩" -#: src/components/Header.tsx:202 -#: src/components/Header.tsx:422 +#: src/components/ThemePicker.tsx:89 +msgid "Loading a theme will erase any custom styles you have applied" +msgstr "테마를 불러오면 사용자 정의 스타일이 모두 사라집니다." + +#: src/components/Header.tsx:201 +#: src/components/Header.tsx:421 #: src/pages/LogIn.tsx:64 #: src/pages/New.tsx:263 msgid "Log In" @@ -750,7 +763,7 @@ msgstr "플로우 차트를 만들기 위해 로그인하세요." msgid "Make a One-Time Donation" msgstr "한 번 선물하기" -#: src/components/ShareDialog.tsx:412 +#: src/components/ShareDialog.tsx:406 msgid "Make publicly accessible" msgstr "공개적으로 액세스 가능하게 만들기" @@ -766,7 +779,7 @@ msgstr "데이터 지도" msgid "Market understanding and competitive landscape maintenance for SaaS product development" msgstr "SaaS 제품 개발에 대한 시장 이해 및 경쟁 경제동화 유지" -#: src/components/GraphContextMenu.tsx:258 +#: src/components/GraphContextMenu.tsx:243 msgid "Medium" msgstr "중간" @@ -794,8 +807,8 @@ msgstr "박물관" msgid "Name" msgstr "이름" -#: src/components/Header.tsx:79 -#: src/components/Header.tsx:340 +#: src/components/Header.tsx:78 +#: src/components/Header.tsx:339 #: src/pages/Charts.tsx:102 msgid "New" msgstr "신규" @@ -813,7 +826,7 @@ msgstr "다음 청구 금액" msgid "No Edges" msgstr "노드 없음" -#: src/components/GraphContextMenu.tsx:299 +#: src/components/GraphContextMenu.tsx:282 msgid "Node" msgstr "노드" @@ -880,7 +893,7 @@ msgstr "이 기기에서만 사용 가능합니다.<0/>브라우저 캐시를 msgid "Open Customer Portal" msgstr "고객 포털 열기" -#: src/components/ShareDialog.tsx:466 +#: src/components/ShareDialog.tsx:460 msgid "Organization Chart" msgstr "조직도" @@ -916,8 +929,8 @@ msgstr "플레이북" msgid "Pointer and container on same line" msgstr "같은 줄에 포인터와 컨테이너" -#: src/components/Header.tsx:193 -#: src/components/Header.tsx:407 +#: src/components/Header.tsx:192 +#: src/components/Header.tsx:406 msgid "Pricing" msgstr "가격" @@ -933,8 +946,8 @@ msgstr "데이터 처리" msgid "Prompt" msgstr "프롬프트" -#: src/components/ShareDialog.tsx:408 -#: src/components/ShareDialog.tsx:431 +#: src/components/ShareDialog.tsx:402 +#: src/components/ShareDialog.tsx:425 msgid "Public" msgstr "공용" @@ -943,7 +956,7 @@ msgid "Random" msgstr "무작위" #: src/components/EditorWrapper.tsx:44 -#: src/components/ShareDialog.tsx:145 +#: src/components/ShareDialog.tsx:142 msgid "Read-only" msgstr "읽기 전용" @@ -1028,8 +1041,8 @@ msgstr "반품" msgid "Right to Left" msgstr "오른쪽에서 왼쪽으로" -#: src/components/Header.tsx:170 -#: src/components/Header.tsx:386 +#: src/components/Header.tsx:169 +#: src/components/Header.tsx:385 #: src/pages/Roadmap.tsx:16 msgid "Roadmap" msgstr "로드맵" @@ -1058,13 +1071,13 @@ msgstr "귀하의 계획을 선택하세요!" msgid "Send us Feedback" msgstr "우리에게 피드백 보내기" -#: src/components/Header.tsx:177 -#: src/components/Header.tsx:391 +#: src/components/Header.tsx:176 +#: src/components/Header.tsx:390 #: src/components/Settings.tsx:50 msgid "Settings" msgstr "설정" -#: src/components/GraphContextMenu.tsx:368 +#: src/components/GraphContextMenu.tsx:351 msgid "Shape" msgstr "모양 " @@ -1077,11 +1090,11 @@ msgstr "가입" msgid "Sign Up Now" msgstr "지금 가입하세요" -#: src/components/GraphContextMenu.tsx:435 +#: src/components/GraphContextMenu.tsx:418 msgid "Size" msgstr "크기" -#: src/components/GraphContextMenu.tsx:253 +#: src/components/GraphContextMenu.tsx:238 msgid "Small" msgstr "작은" @@ -1093,7 +1106,7 @@ msgstr "스타일링하기 위한 몇 가지 클래스가 이용 가능합니다 msgid "Sorry! This page is only available in English." msgstr "죄송합니다! 이 페이지는 영어로만 제공됩니다." -#: src/components/GraphContextMenu.tsx:618 +#: src/components/GraphContextMenu.tsx:601 msgid "Source Arrow" msgstr "소스 화살표" @@ -1172,7 +1185,7 @@ msgstr "구독이 종료될 예정입니다." msgid "Supply chain analysis and optimization: cost reduction, efficiency improvement, and stakeholder collaboration" msgstr "공급망 분석 및 최적화: 비용 감소, 효율 향상 및 이해관계자 협력" -#: src/components/GraphContextMenu.tsx:657 +#: src/components/GraphContextMenu.tsx:640 msgid "Target Arrow" msgstr "타겟 화살표" @@ -1238,9 +1251,9 @@ msgstr "여러 개의 목표 노드를 구분하기 위해 사용되는 구분 msgid "The possible shapes are:" msgstr "가능한 모양은 다음과 같습니다:" -#: src/components/Tabs/EditStyleTab.tsx:33 -msgid "Theme" -msgstr "테마" +#: src/components/Tabs/EditStyleTab.tsx:69 +msgid "Theme Editor" +msgstr "테마 편집기" #: src/components/ImportDataDialog.tsx:419 msgid "There are no edges in this data" @@ -1258,7 +1271,7 @@ msgstr "이 앱은 타이핑으로 작동합니다" msgid "This feature is only available to pro users. <0>Become a pro user to unlock it." msgstr "이 기능은 프로 사용자에게만 제공됩니다. <0>프로 사용자가 되어 이 기능을 사용할 수 있게 하세요." -#: src/components/ShareDialog.tsx:538 +#: src/components/ShareDialog.tsx:532 msgid "Tip" msgstr "팁" @@ -1352,11 +1365,11 @@ msgstr "노드의 너비와 높이를 명시적으로 설정하려면 <0>w msgid "Use the customer portal to change your billing information." msgstr "청구 정보를 변경하려면 고객 포털을 사용하십시오." -#: src/components/ShareDialog.tsx:474 +#: src/components/ShareDialog.tsx:468 msgid "Use this file for org charts, hierarchies, and other organizational structures." msgstr "조직도, 계층 구조 및 기타 조직 구조를 위해 이 파일을 사용하십시오." -#: src/components/ShareDialog.tsx:462 +#: src/components/ShareDialog.tsx:456 msgid "Use this file for sequences, processes, and workflows." msgstr "시퀀스, 프로세스 및 워크플로우에 대해 이 파일을 사용하십시오." diff --git a/app/src/locales/pt-br/messages.js b/app/src/locales/pt-br/messages.js index 2c56b3dc0..71a59c8ed 100644 --- a/app/src/locales/pt-br/messages.js +++ b/app/src/locales/pt-br/messages.js @@ -27,7 +27,6 @@ Attributes: "Atributos", "Auto-Layouts": "Layouts automáticos", "Back To Editor": "Voltar ao editor", - Background: "Fundo", "Basic Flowchart": "Fluxograma Básico", "Become a Github Sponsor": "Seja um patrocinador do Github", "Become a Pro User": "Se torne um usuário Pro", @@ -49,6 +48,7 @@ Charts: "Diagramas", "Check your email for a link to log in. You can close this window.": "Cheque seu e-mail com um link para logar. Você pode fechar esta janela.", + "Choose a Theme": "Escolha um Tema", "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. .": "Escolha entre uma variedade de formas de seta para a origem e o destino de uma aresta. As formas incluem triângulo, triângulo-tee, triângulo-círculo, triângulo-cruz, triângulo-curva-inversa, vee, tee, quadrado, círculo, diamante, chevron e nenhum.", "Choose the plan that's right for you and start creating amazing flowcharts with Flowchart Fun Pro": @@ -60,6 +60,7 @@ "Clear text?": "Limpar o texto?", "Click on \\nLearn Syntax\\nto learn more": "Clique em \\nAprenda Sintaxe\\n para aprender mais", + "Click to preview": "Clique para pré-visualizar", Clone: "Clonar", Close: "Fechar", Color: "Cor", @@ -90,6 +91,8 @@ "Criar uma aresta entre dois nós é feito indentando o segundo nó abaixo do primeiro", "Custom Sharing Options": "Opções de Compartilhamento Personalizadas", "Customer Portal": "Portal do cliente", + "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck.": + "Personalize seu tema editando o <0>CSS do Cytoscape abaixo. Nossa documentação de estilos está chegando em breve! Enquanto isso, o melhor recurso é a documentação do <1>Cytoscape. Venha perguntar no <2>Discord se ficar preso.", Dark: "Escuro", "Dark Mode": "Modo escuro", Date: "Data", @@ -160,7 +163,6 @@ Fullscreen: "Tela cheia", Futuristic: "Futurista", "Get More Layouts": "Obtenha Mais Leiautes", - "Get More Themes": "Obtenha mais temas", "Get personalized attention and support from our expert team": "Receba atenção e suporte personalizado de nossa equipe especializada", "Getting Started": "Começando", @@ -214,7 +216,10 @@ Light: "Claro", "Light Mode": "Modo claro", Link: "Link", + "Load Theme": "Carregar Tema", Loading: "Carregando", + "Loading a theme will erase any custom styles you have applied": + "Carregar um tema apagará quaisquer estilos personalizados que você tenha aplicado", "Log In": "Acessar", "Log Out": "Deslogar", "Log in to start creating flowcharts.": @@ -363,7 +368,7 @@ "The delimiter used to separate multiple target nodes": "O delimitador usado para separar vários nós de destino", "The possible shapes are:": "As formas possíveis são:", - Theme: "Tema", + "Theme Editor": "Editor de Temas", "There are no edges in this data": "Não há arestas nestes dados", "This action cannot be undone.": "Esta ação não pode ser desfeita.", "This app works by typing": "Este aplicativo funciona por digitação", diff --git a/app/src/locales/pt-br/messages.po b/app/src/locales/pt-br/messages.po index 6fa6c5aa3..eb351b097 100644 --- a/app/src/locales/pt-br/messages.po +++ b/app/src/locales/pt-br/messages.po @@ -53,8 +53,8 @@ msgstr "Acesse esses gráficos de qualquer lugar.<0/>Compartilhe e incorpore flu msgid "Accessible from any device" msgstr "Acessível de qualquer dispositivo" -#: src/components/Header.tsx:184 -#: src/components/Header.tsx:398 +#: src/components/Header.tsx:183 +#: src/components/Header.tsx:397 #: src/pages/Account.tsx:121 msgid "Account" msgstr "Conta" @@ -92,11 +92,7 @@ msgstr "Layouts automáticos" msgid "Back To Editor" msgstr "Voltar ao editor" -#: src/components/Tabs/EditStyleTab.tsx:51 -msgid "Background" -msgstr "Fundo" - -#: src/components/ShareDialog.tsx:454 +#: src/components/ShareDialog.tsx:448 msgid "Basic Flowchart" msgstr "Fluxograma Básico" @@ -120,14 +116,14 @@ msgstr "Comece com um exemplo simples mostrando como o <0>Flowchart Fun func msgid "Blank" msgstr "Branco" -#: src/components/Header.tsx:153 -#: src/components/Header.tsx:374 +#: src/components/Header.tsx:152 +#: src/components/Header.tsx:373 #: src/pages/Blog.tsx:18 msgid "Blog" msgstr "Blog" -#: src/components/GraphContextMenu.tsx:480 -#: src/components/GraphContextMenu.tsx:576 +#: src/components/GraphContextMenu.tsx:463 +#: src/components/GraphContextMenu.tsx:559 msgid "Border" msgstr "Borda" @@ -162,14 +158,14 @@ msgstr "Certos atributos podem ser usados para personalizar a aparência ou func msgid "Change Email Address" msgstr "Mude o endereço de email" -#: src/components/Header.tsx:163 -#: src/components/Header.tsx:380 +#: src/components/Header.tsx:162 +#: src/components/Header.tsx:379 #: src/pages/Changelog.tsx:16 msgid "Changelog" msgstr "Registro de alterações" -#: src/components/Header.tsx:96 -#: src/components/Header.tsx:352 +#: src/components/Header.tsx:95 +#: src/components/Header.tsx:351 msgid "Charts" msgstr "Diagramas" @@ -178,6 +174,10 @@ msgstr "Diagramas" msgid "Check your email for a link to log in. You can close this window." msgstr "Cheque seu e-mail com um link para logar. Você pode fechar esta janela." +#: src/components/ThemePicker.tsx:67 +msgid "Choose a Theme" +msgstr "Escolha um Tema" + #: src/components/LearnSyntaxDialog.tsx:330 msgid "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. ." msgstr "Escolha entre uma variedade de formas de seta para a origem e o destino de uma aresta. As formas incluem triângulo, triângulo-tee, triângulo-círculo, triângulo-cruz, triângulo-curva-inversa, vee, tee, quadrado, círculo, diamante, chevron e nenhum." @@ -211,6 +211,10 @@ msgstr "Limpar o texto?" msgid "Click on \\nLearn Syntax\\nto learn more" msgstr "Clique em \\nAprenda Sintaxe\\n para aprender mais" +#: src/components/ThemePicker.tsx:70 +msgid "Click to preview" +msgstr "Clique para pré-visualizar" + #: src/components/CloneButton.tsx:25 msgid "Clone" msgstr "Clonar" @@ -220,7 +224,7 @@ msgstr "Clonar" msgid "Close" msgstr "Fechar" -#: src/components/GraphContextMenu.tsx:306 +#: src/components/GraphContextMenu.tsx:289 msgid "Color" msgstr "Cor" @@ -267,21 +271,21 @@ msgstr "Continuar" msgid "Convert to hosted chart?" msgstr "Converter em diagrama hospedado?" -#: src/components/ShareDialog.tsx:250 -#: src/components/ShareDialog.tsx:251 -#: src/components/ShareDialog.tsx:368 +#: src/components/ShareDialog.tsx:247 +#: src/components/ShareDialog.tsx:248 +#: src/components/ShareDialog.tsx:362 msgid "Copy" msgstr "Copiar" -#: src/components/GraphContextMenu.tsx:225 +#: src/components/GraphContextMenu.tsx:210 msgid "Copy PNG Image" msgstr "Copiar imagem PNG" -#: src/components/GraphContextMenu.tsx:183 +#: src/components/GraphContextMenu.tsx:171 msgid "Copy SVG Code" msgstr "Copiar código SVG" -#: src/components/ShareDialog.tsx:333 +#: src/components/ShareDialog.tsx:327 msgid "Copy your mermaid.js code or open it directly in the mermaid.js live editor." msgstr "Copie seu código mermaid.js ou abra diretamente no editor ao vivo mermaid.js." @@ -314,6 +318,10 @@ msgstr "Opções de Compartilhamento Personalizadas" msgid "Customer Portal" msgstr "Portal do cliente" +#: src/components/Tabs/EditStyleTab.tsx:158 +msgid "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck." +msgstr "Personalize seu tema editando o <0>CSS do Cytoscape abaixo. Nossa documentação de estilos está chegando em breve! Enquanto isso, o melhor recurso é a documentação do <1>Cytoscape. Venha perguntar no <2>Discord se ficar preso." + #: src/lib/graphOptions.ts:48 msgid "Dark" msgstr "Escuro" @@ -359,20 +367,20 @@ msgstr "Documento" msgid "Don't have an account?" msgstr "Não tem uma conta?" -#: src/components/ShareDialog.tsx:70 -#: src/components/ShareDialog.tsx:529 +#: src/components/ShareDialog.tsx:68 +#: src/components/ShareDialog.tsx:523 msgid "Download" msgstr "Baixar" -#: src/components/GraphContextMenu.tsx:126 +#: src/components/GraphContextMenu.tsx:118 msgid "Download JPG" msgstr "Baixar JPG" -#: src/components/GraphContextMenu.tsx:102 +#: src/components/GraphContextMenu.tsx:95 msgid "Download PNG" msgstr "Baixar PNG" -#: src/components/GraphContextMenu.tsx:148 +#: src/components/GraphContextMenu.tsx:138 msgid "Download SVG" msgstr "Baixar SVG" @@ -392,7 +400,7 @@ msgstr "Solte o arquivo aqui ..." msgid "Easily import existing flowcharts from other software" msgstr "Importe facilmente fluxogramas existentes de outros softwares" -#: src/components/GraphContextMenu.tsx:569 +#: src/components/GraphContextMenu.tsx:552 msgid "Edge" msgstr "Borda" @@ -454,12 +462,12 @@ msgstr "Bordas na Linha do Nó de Origem" msgid "Edges in Target Node Row" msgstr "Bordas na Linha do Nó de Destino" -#: src/components/ShareDialog.tsx:142 +#: src/components/ShareDialog.tsx:139 msgid "Editable" msgstr "Editável" -#: src/components/Header.tsx:88 -#: src/components/Header.tsx:346 +#: src/components/Header.tsx:87 +#: src/components/Header.tsx:345 #: src/components/MobileTabToggle.tsx:20 msgid "Editor" msgstr "Editor" @@ -498,8 +506,8 @@ msgstr "Excalidraw" #: src/components/EditorWrapper.tsx:53 #: src/components/EditorWrapper.tsx:58 -#: src/components/ShareDialog.tsx:61 -#: src/components/ShareDialog.tsx:152 +#: src/components/ShareDialog.tsx:59 +#: src/components/ShareDialog.tsx:149 msgid "Export" msgstr "Exportar" @@ -512,7 +520,7 @@ msgstr "Exportar imagens de alta resolução" msgid "Export to SVG" msgstr "Exportar para SVG" -#: src/components/GraphContextMenu.tsx:267 +#: src/components/GraphContextMenu.tsx:252 msgid "Extra Large" msgstr "Extra Grande" @@ -520,8 +528,8 @@ msgstr "Extra Grande" msgid "Extract" msgstr "Extrair" -#: src/components/Header.tsx:127 -#: src/components/Header.tsx:366 +#: src/components/Header.tsx:126 +#: src/components/Header.tsx:365 msgid "Feedback" msgstr "Feedback" @@ -541,7 +549,7 @@ msgstr "Encontrou um bug? Tem uma solicitação de recurso? Adoraríamos ouvir d msgid "Free" msgstr "Grátis " -#: src/components/ShareDialog.tsx:139 +#: src/components/ShareDialog.tsx:136 msgid "Fullscreen" msgstr "Tela cheia" @@ -553,10 +561,6 @@ msgstr "Futurista" msgid "Get More Layouts" msgstr "Obtenha Mais Leiautes" -#: src/components/Tabs/EditStyleTab.tsx:97 -msgid "Get More Themes" -msgstr "Obtenha mais temas" - #: src/pages/Pricing.tsx:34 msgid "Get personalized attention and support from our expert team" msgstr "Receba atenção e suporte personalizado de nossa equipe especializada" @@ -582,7 +586,7 @@ msgstr "Tem questões ou problemas complexos? Estamos aqui para ajudar." msgid "Heads up! Before you clear your cache, remember that this document isn't saved in the cloud." msgstr "Atenção! Antes de limpar o cache, lembre-se de que este documento não está salvo na nuvem." -#: src/components/Header.tsx:105 +#: src/components/Header.tsx:104 msgid "Help" msgstr "Ajuda" @@ -638,7 +642,7 @@ msgstr "Importar dados de qualquer arquivo CSV e mapeá-los para um novo fluxogr msgid "Import from Lucidchart, Visio, and other CSV files" msgstr "Importar do Lucidchart, do Visio e de outros arquivos CSV" -#: src/components/ShareDialog.tsx:446 +#: src/components/ShareDialog.tsx:440 msgid "Import your diagram it into Microsoft Visio using one of these CSV files." msgstr "Importe seu diagrama para o Microsoft Visio usando um desses arquivos CSV." @@ -650,7 +654,7 @@ msgstr "Importar dados é um recurso avançado. Você pode atualizar para o Flow msgid "Impress your audience with high-quality images produced by Flowchart Fun" msgstr "Impressione sua audiência com imagens de alta qualidade produzidas pelo Flowchart Fun" -#: src/components/ShareDialog.tsx:479 +#: src/components/ShareDialog.tsx:473 msgid "Include a title using a <0>title attribute. To use Visio coloring, add a <1>roleType attribute equal to one of the following:" msgstr "Inclua um título usando um atributo <0>title. Para usar a coloração do Visio, adicione um atributo <1>roleType igual a uma das seguintes opções:" @@ -658,7 +662,7 @@ msgstr "Inclua um título usando um atributo <0>title. Para usar a coloraç msgid "Indenting creates an edge" msgstr "O recuo cria um link" -#: src/components/Header.tsx:142 +#: src/components/Header.tsx:141 msgid "Info" msgstr "Informações" @@ -674,7 +678,7 @@ msgstr "É" msgid "Language" msgstr "Idioma" -#: src/components/GraphContextMenu.tsx:262 +#: src/components/GraphContextMenu.tsx:247 msgid "Large" msgstr "Grande" @@ -723,16 +727,25 @@ msgstr "Claro" msgid "Light Mode" msgstr "Modo claro" -#: src/components/ShareDialog.tsx:134 +#: src/components/ShareDialog.tsx:131 msgid "Link" msgstr "Link" +#: src/components/ThemePicker.tsx:54 +#: src/components/ThemePicker.tsx:108 +msgid "Load Theme" +msgstr "Carregar Tema" + #: src/components/PaymentStepper.tsx:149 msgid "Loading" msgstr "Carregando" -#: src/components/Header.tsx:202 -#: src/components/Header.tsx:422 +#: src/components/ThemePicker.tsx:89 +msgid "Loading a theme will erase any custom styles you have applied" +msgstr "Carregar um tema apagará quaisquer estilos personalizados que você tenha aplicado" + +#: src/components/Header.tsx:201 +#: src/components/Header.tsx:421 #: src/pages/LogIn.tsx:64 #: src/pages/New.tsx:263 msgid "Log In" @@ -750,7 +763,7 @@ msgstr "Faça o login para começar a criar fluxogramas." msgid "Make a One-Time Donation" msgstr "Faça uma Doação Única" -#: src/components/ShareDialog.tsx:412 +#: src/components/ShareDialog.tsx:406 msgid "Make publicly accessible" msgstr "Tornar publicamente acessível" @@ -766,7 +779,7 @@ msgstr "Mapear Dados" msgid "Market understanding and competitive landscape maintenance for SaaS product development" msgstr "Compreensão do mercado e manutenção do cenário competitivo para o desenvolvimento de produtos SaaS." -#: src/components/GraphContextMenu.tsx:258 +#: src/components/GraphContextMenu.tsx:243 msgid "Medium" msgstr "Médio" @@ -794,8 +807,8 @@ msgstr "Museu" msgid "Name" msgstr "Nome" -#: src/components/Header.tsx:79 -#: src/components/Header.tsx:340 +#: src/components/Header.tsx:78 +#: src/components/Header.tsx:339 #: src/pages/Charts.tsx:102 msgid "New" msgstr "Novo" @@ -813,7 +826,7 @@ msgstr "Próxima cobrança" msgid "No Edges" msgstr "Sem Bordas" -#: src/components/GraphContextMenu.tsx:299 +#: src/components/GraphContextMenu.tsx:282 msgid "Node" msgstr "Nó" @@ -880,7 +893,7 @@ msgstr "Disponível apenas neste dispositivo.<0/>Limpar o cache do navegador ir msgid "Open Customer Portal" msgstr "Abra o portal do cliente" -#: src/components/ShareDialog.tsx:466 +#: src/components/ShareDialog.tsx:460 msgid "Organization Chart" msgstr "Gráfico de Organização" @@ -916,8 +929,8 @@ msgstr "Cartilha" msgid "Pointer and container on same line" msgstr "Ponteiro e contêiner na mesma linha" -#: src/components/Header.tsx:193 -#: src/components/Header.tsx:407 +#: src/components/Header.tsx:192 +#: src/components/Header.tsx:406 msgid "Pricing" msgstr "Preços" @@ -933,8 +946,8 @@ msgstr "Processando Dados" msgid "Prompt" msgstr "Estímulo" -#: src/components/ShareDialog.tsx:408 -#: src/components/ShareDialog.tsx:431 +#: src/components/ShareDialog.tsx:402 +#: src/components/ShareDialog.tsx:425 msgid "Public" msgstr "Público" @@ -943,7 +956,7 @@ msgid "Random" msgstr "Aleatório" #: src/components/EditorWrapper.tsx:44 -#: src/components/ShareDialog.tsx:145 +#: src/components/ShareDialog.tsx:142 msgid "Read-only" msgstr "Somente leitura" @@ -1028,8 +1041,8 @@ msgstr "Retornar" msgid "Right to Left" msgstr "Da direita para esquerda" -#: src/components/Header.tsx:170 -#: src/components/Header.tsx:386 +#: src/components/Header.tsx:169 +#: src/components/Header.tsx:385 #: src/pages/Roadmap.tsx:16 msgid "Roadmap" msgstr "Roteiro" @@ -1058,13 +1071,13 @@ msgstr "Selecione seu plano!" msgid "Send us Feedback" msgstr "Envie-nos um Feedback" -#: src/components/Header.tsx:177 -#: src/components/Header.tsx:391 +#: src/components/Header.tsx:176 +#: src/components/Header.tsx:390 #: src/components/Settings.tsx:50 msgid "Settings" msgstr "Configurações" -#: src/components/GraphContextMenu.tsx:368 +#: src/components/GraphContextMenu.tsx:351 msgid "Shape" msgstr "Forma" @@ -1077,11 +1090,11 @@ msgstr "Inscreva-se" msgid "Sign Up Now" msgstr "Cadastre-se agora" -#: src/components/GraphContextMenu.tsx:435 +#: src/components/GraphContextMenu.tsx:418 msgid "Size" msgstr "Tamanho" -#: src/components/GraphContextMenu.tsx:253 +#: src/components/GraphContextMenu.tsx:238 msgid "Small" msgstr "Pequeno" @@ -1093,7 +1106,7 @@ msgstr "Algumas classes estão disponíveis para ajudar a estilizar seu fluxogra msgid "Sorry! This page is only available in English." msgstr "Sinto muito! Esta página só está disponível em inglês." -#: src/components/GraphContextMenu.tsx:618 +#: src/components/GraphContextMenu.tsx:601 msgid "Source Arrow" msgstr "Seta de Origem" @@ -1172,7 +1185,7 @@ msgstr "Inscrição acabará" msgid "Supply chain analysis and optimization: cost reduction, efficiency improvement, and stakeholder collaboration" msgstr "Análise e otimização da cadeia de suprimentos: redução de custos, melhoria da eficiência e colaboração com os stakeholders." -#: src/components/GraphContextMenu.tsx:657 +#: src/components/GraphContextMenu.tsx:640 msgid "Target Arrow" msgstr "Seta de Destino" @@ -1238,9 +1251,9 @@ msgstr "O delimitador usado para separar vários nós de destino" msgid "The possible shapes are:" msgstr "As formas possíveis são:" -#: src/components/Tabs/EditStyleTab.tsx:33 -msgid "Theme" -msgstr "Tema" +#: src/components/Tabs/EditStyleTab.tsx:69 +msgid "Theme Editor" +msgstr "Editor de Temas" #: src/components/ImportDataDialog.tsx:419 msgid "There are no edges in this data" @@ -1258,7 +1271,7 @@ msgstr "Este aplicativo funciona por digitação" msgid "This feature is only available to pro users. <0>Become a pro user to unlock it." msgstr "Esta funcionalidade está disponível apenas para usuários Pro. <0>Torne-se um usuário Pro para desbloqueá-la." -#: src/components/ShareDialog.tsx:538 +#: src/components/ShareDialog.tsx:532 msgid "Tip" msgstr "Dica" @@ -1352,11 +1365,11 @@ msgstr "Use os atributos <0>w e <1>h para definir explicitamente a largu msgid "Use the customer portal to change your billing information." msgstr "Use o portal do cliente para alterar suas informações de cobrança." -#: src/components/ShareDialog.tsx:474 +#: src/components/ShareDialog.tsx:468 msgid "Use this file for org charts, hierarchies, and other organizational structures." msgstr "Use este arquivo para organogramas, hierarquias e outras estruturas organizacionais." -#: src/components/ShareDialog.tsx:462 +#: src/components/ShareDialog.tsx:456 msgid "Use this file for sequences, processes, and workflows." msgstr "Use este arquivo para sequências, processos e fluxos de trabalho." diff --git a/app/src/locales/zh/messages.js b/app/src/locales/zh/messages.js index d01538677..ee2064790 100644 --- a/app/src/locales/zh/messages.js +++ b/app/src/locales/zh/messages.js @@ -26,7 +26,6 @@ Attributes: "属性", "Auto-Layouts": "自动布局", "Back To Editor": "返回编辑器", - Background: "背景", "Basic Flowchart": "基本流程图", "Become a Github Sponsor": "成为Github赞助商", "Become a Pro User": "成为专业用户", @@ -48,6 +47,7 @@ Charts: "图表", "Check your email for a link to log in. You can close this window.": "检查您的电子邮件以获取登录链接。您可以关闭此窗口。", + "Choose a Theme": "选择一个主题", "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. .": "为边缘的源和目标选择各种箭头形状。形状包括三角形，三角形-T，圆形-三角形，三角形-十字，三角形-后曲线，V形，T形，正方形，圆形，菱形，雪花形，无。", "Choose the plan that's right for you and start creating amazing flowcharts with Flowchart Fun Pro": @@ -58,6 +58,7 @@ Clear: "清除", "Clear text?": "清除文字？", "Click on \\nLearn Syntax\\nto learn more": "点击 \\n学习语法\\n了解更多", + "Click to preview": "点击预览", Clone: "克隆", Close: "关闭", Color: "颜色", @@ -87,6 +88,8 @@ "在两个节点之间创建边缘是通过将第二个节点缩进第一个节点来完成的", "Custom Sharing Options": "自定义分享选项", "Customer Portal": "客户门户", + "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck.": + "通过编辑<0>Cytoscape CSS来自定义主题，我们的样式文档即将推出！与此同时，最好的资源是<1>Cytoscape文档。如果你遇到困难，可以在<2>Discord上提问。", Dark: "深色", "Dark Mode": "深色模式", Date: "日期", @@ -153,7 +156,6 @@ Fullscreen: "全屏", Futuristic: "未来主义的", "Get More Layouts": "获取更多布局", - "Get More Themes": "获取更多主题", "Get personalized attention and support from our expert team": "从我们的专家团队获得个性化的关注和支持", "Getting Started": "开始", @@ -206,7 +208,10 @@ Light: "浅色", "Light Mode": "浅色模式", Link: "链接", + "Load Theme": "加载主题", Loading: "正在載入", + "Loading a theme will erase any custom styles you have applied": + "加载主题将擦除您应用的任何自定义样式", "Log In": "登录", "Log Out": "登出", "Log in to start creating flowcharts.": "登入以開始創建流程圖。", @@ -347,7 +352,7 @@ "The delimiter used to separate multiple target nodes": "用于分隔多个目标节点的分隔符", "The possible shapes are:": "可能的形状是：", - Theme: "风格", + "Theme Editor": "主题编辑器", "There are no edges in this data": "此数据中没有边", "This action cannot be undone.": "此操作无法撤销。", "This app works by typing": "这款应用的工作原理是输入", diff --git a/app/src/locales/zh/messages.po b/app/src/locales/zh/messages.po index 6542e018d..a928474dd 100644 --- a/app/src/locales/zh/messages.po +++ b/app/src/locales/zh/messages.po @@ -53,8 +53,8 @@ msgstr "从任何地方访问这些图表。<0/>共享并嵌入保持同步的 msgid "Accessible from any device" msgstr "可从任何设备访问" -#: src/components/Header.tsx:184 -#: src/components/Header.tsx:398 +#: src/components/Header.tsx:183 +#: src/components/Header.tsx:397 #: src/pages/Account.tsx:121 msgid "Account" msgstr "帐户" @@ -92,11 +92,7 @@ msgstr "自动布局" msgid "Back To Editor" msgstr "返回编辑器" -#: src/components/Tabs/EditStyleTab.tsx:51 -msgid "Background" -msgstr "背景" - -#: src/components/ShareDialog.tsx:454 +#: src/components/ShareDialog.tsx:448 msgid "Basic Flowchart" msgstr "基本流程图" @@ -120,14 +116,14 @@ msgstr "以一个简单的例子开始来展示<0>流程图的乐趣是如 msgid "Blank" msgstr "空白" -#: src/components/Header.tsx:153 -#: src/components/Header.tsx:374 +#: src/components/Header.tsx:152 +#: src/components/Header.tsx:373 #: src/pages/Blog.tsx:18 msgid "Blog" msgstr "博客" -#: src/components/GraphContextMenu.tsx:480 -#: src/components/GraphContextMenu.tsx:576 +#: src/components/GraphContextMenu.tsx:463 +#: src/components/GraphContextMenu.tsx:559 msgid "Border" msgstr "边框" @@ -162,14 +158,14 @@ msgstr "某些属性可用于自定义元素的外观或功能。" msgid "Change Email Address" msgstr "更改电子邮件地址" -#: src/components/Header.tsx:163 -#: src/components/Header.tsx:380 +#: src/components/Header.tsx:162 +#: src/components/Header.tsx:379 #: src/pages/Changelog.tsx:16 msgid "Changelog" msgstr "变更日志" -#: src/components/Header.tsx:96 -#: src/components/Header.tsx:352 +#: src/components/Header.tsx:95 +#: src/components/Header.tsx:351 msgid "Charts" msgstr "图表" @@ -178,6 +174,10 @@ msgstr "图表" msgid "Check your email for a link to log in. You can close this window." msgstr "检查您的电子邮件以获取登录链接。您可以关闭此窗口。" +#: src/components/ThemePicker.tsx:67 +msgid "Choose a Theme" +msgstr "选择一个主题" + #: src/components/LearnSyntaxDialog.tsx:330 msgid "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. ." msgstr "为边缘的源和目标选择各种箭头形状。形状包括三角形，三角形-T，圆形-三角形，三角形-十字，三角形-后曲线，V形，T形，正方形，圆形，菱形，雪花形，无。" @@ -211,6 +211,10 @@ msgstr "清除文字？" msgid "Click on \\nLearn Syntax\\nto learn more" msgstr "点击 \\n学习语法\\n了解更多" +#: src/components/ThemePicker.tsx:70 +msgid "Click to preview" +msgstr "点击预览" + #: src/components/CloneButton.tsx:25 msgid "Clone" msgstr "克隆" @@ -220,7 +224,7 @@ msgstr "克隆" msgid "Close" msgstr "关闭" -#: src/components/GraphContextMenu.tsx:306 +#: src/components/GraphContextMenu.tsx:289 msgid "Color" msgstr "颜色" @@ -267,21 +271,21 @@ msgstr "继续" msgid "Convert to hosted chart?" msgstr "是否转换为托管图表？" -#: src/components/ShareDialog.tsx:250 -#: src/components/ShareDialog.tsx:251 -#: src/components/ShareDialog.tsx:368 +#: src/components/ShareDialog.tsx:247 +#: src/components/ShareDialog.tsx:248 +#: src/components/ShareDialog.tsx:362 msgid "Copy" msgstr "复制" -#: src/components/GraphContextMenu.tsx:225 +#: src/components/GraphContextMenu.tsx:210 msgid "Copy PNG Image" msgstr "复制PNG图像" -#: src/components/GraphContextMenu.tsx:183 +#: src/components/GraphContextMenu.tsx:171 msgid "Copy SVG Code" msgstr "复制 SVG 代码" -#: src/components/ShareDialog.tsx:333 +#: src/components/ShareDialog.tsx:327 msgid "Copy your mermaid.js code or open it directly in the mermaid.js live editor." msgstr "复制您的mermaid.js代码或直接在mermaid.js实时编辑器中打开它。" @@ -314,6 +318,10 @@ msgstr "自定义分享选项" msgid "Customer Portal" msgstr "客户门户" +#: src/components/Tabs/EditStyleTab.tsx:158 +msgid "Customize your theme by editing the <0>Cytoscape CSS below. Our styling documentation is coming soon! In the meantime, the best resource is the <1>Cytoscape documentation. Come ask questions in the <2>Discord if you get stuck." +msgstr "通过编辑<0>Cytoscape CSS来自定义主题，我们的样式文档即将推出！与此同时，最好的资源是<1>Cytoscape文档。如果你遇到困难，可以在<2>Discord上提问。" + #: src/lib/graphOptions.ts:48 msgid "Dark" msgstr "深色" @@ -359,20 +367,20 @@ msgstr "文档" msgid "Don't have an account?" msgstr "没有帐户？" -#: src/components/ShareDialog.tsx:70 -#: src/components/ShareDialog.tsx:529 +#: src/components/ShareDialog.tsx:68 +#: src/components/ShareDialog.tsx:523 msgid "Download" msgstr "下载" -#: src/components/GraphContextMenu.tsx:126 +#: src/components/GraphContextMenu.tsx:118 msgid "Download JPG" msgstr "下载 JPG" -#: src/components/GraphContextMenu.tsx:102 +#: src/components/GraphContextMenu.tsx:95 msgid "Download PNG" msgstr "下载 PNG" -#: src/components/GraphContextMenu.tsx:148 +#: src/components/GraphContextMenu.tsx:138 msgid "Download SVG" msgstr "下载 SVG" @@ -392,7 +400,7 @@ msgstr "將檔案拖放到這裡..." msgid "Easily import existing flowcharts from other software" msgstr "轻松从其他软件导入现有流程图" -#: src/components/GraphContextMenu.tsx:569 +#: src/components/GraphContextMenu.tsx:552 msgid "Edge" msgstr "邊緣" @@ -454,12 +462,12 @@ msgstr "边在源节点行" msgid "Edges in Target Node Row" msgstr "边在目标节点行" -#: src/components/ShareDialog.tsx:142 +#: src/components/ShareDialog.tsx:139 msgid "Editable" msgstr "可编辑" -#: src/components/Header.tsx:88 -#: src/components/Header.tsx:346 +#: src/components/Header.tsx:87 +#: src/components/Header.tsx:345 #: src/components/MobileTabToggle.tsx:20 msgid "Editor" msgstr "编辑器" @@ -498,8 +506,8 @@ msgstr "Excalidraw" #: src/components/EditorWrapper.tsx:53 #: src/components/EditorWrapper.tsx:58 -#: src/components/ShareDialog.tsx:61 -#: src/components/ShareDialog.tsx:152 +#: src/components/ShareDialog.tsx:59 +#: src/components/ShareDialog.tsx:149 msgid "Export" msgstr "导出" @@ -512,7 +520,7 @@ msgstr "导出高分辨率图像" msgid "Export to SVG" msgstr "导出为SVG" -#: src/components/GraphContextMenu.tsx:267 +#: src/components/GraphContextMenu.tsx:252 msgid "Extra Large" msgstr "超大" @@ -520,8 +528,8 @@ msgstr "超大" msgid "Extract" msgstr "提取" -#: src/components/Header.tsx:127 -#: src/components/Header.tsx:366 +#: src/components/Header.tsx:126 +#: src/components/Header.tsx:365 msgid "Feedback" msgstr "反馈" @@ -541,7 +549,7 @@ msgstr "如果发现了一个 bug？有功能请求？我们很乐意听到您 msgid "Free" msgstr "免费" -#: src/components/ShareDialog.tsx:139 +#: src/components/ShareDialog.tsx:136 msgid "Fullscreen" msgstr "全屏" @@ -553,10 +561,6 @@ msgstr "未来主义的" msgid "Get More Layouts" msgstr "获取更多布局" -#: src/components/Tabs/EditStyleTab.tsx:97 -msgid "Get More Themes" -msgstr "获取更多主题" - #: src/pages/Pricing.tsx:34 msgid "Get personalized attention and support from our expert team" msgstr "从我们的专家团队获得个性化的关注和支持" @@ -582,7 +586,7 @@ msgstr "有复杂的问题或问题吗？我们在这里帮助你。" msgid "Heads up! Before you clear your cache, remember that this document isn't saved in the cloud." msgstr "注意！在清除缓存之前，请记住此文档没有在云端保存。" -#: src/components/Header.tsx:105 +#: src/components/Header.tsx:104 msgid "Help" msgstr "帮助" @@ -638,7 +642,7 @@ msgstr "從任何CSV檔案匯入資料並將其映射到新的流程圖。這是 msgid "Import from Lucidchart, Visio, and other CSV files" msgstr "從Lucidchart、Visio和其他CSV檔案匯入" -#: src/components/ShareDialog.tsx:446 +#: src/components/ShareDialog.tsx:440 msgid "Import your diagram it into Microsoft Visio using one of these CSV files." msgstr "使用其中一个CSV文件将您的图表导入到Microsoft Visio中。" @@ -650,7 +654,7 @@ msgstr "匯入資料是專業功能。您可以每月以3美元或每年30美元 msgid "Impress your audience with high-quality images produced by Flowchart Fun" msgstr "用Flowchart Fun生成的高质量图片给你的听众留下深刻印象" -#: src/components/ShareDialog.tsx:479 +#: src/components/ShareDialog.tsx:473 msgid "Include a title using a <0>title attribute. To use Visio coloring, add a <1>roleType attribute equal to one of the following:" msgstr "使用<0>title属性添加标题。要使用 Visio 颜色，请添加一个等于以下内容之一的<1>roleType属性：" @@ -658,7 +662,7 @@ msgstr "使用<0>title属性添加标题。要使用 Visio 颜色，请添 msgid "Indenting creates an edge" msgstr "缩进创建链接" -#: src/components/Header.tsx:142 +#: src/components/Header.tsx:141 msgid "Info" msgstr "信息" @@ -674,7 +678,7 @@ msgstr "是" msgid "Language" msgstr "语言" -#: src/components/GraphContextMenu.tsx:262 +#: src/components/GraphContextMenu.tsx:247 msgid "Large" msgstr "大" @@ -723,16 +727,25 @@ msgstr "浅色" msgid "Light Mode" msgstr "浅色模式" -#: src/components/ShareDialog.tsx:134 +#: src/components/ShareDialog.tsx:131 msgid "Link" msgstr "链接" +#: src/components/ThemePicker.tsx:54 +#: src/components/ThemePicker.tsx:108 +msgid "Load Theme" +msgstr "加载主题" + #: src/components/PaymentStepper.tsx:149 msgid "Loading" msgstr "正在載入" -#: src/components/Header.tsx:202 -#: src/components/Header.tsx:422 +#: src/components/ThemePicker.tsx:89 +msgid "Loading a theme will erase any custom styles you have applied" +msgstr "加载主题将擦除您应用的任何自定义样式" + +#: src/components/Header.tsx:201 +#: src/components/Header.tsx:421 #: src/pages/LogIn.tsx:64 #: src/pages/New.tsx:263 msgid "Log In" @@ -750,7 +763,7 @@ msgstr "登入以開始創建流程圖。" msgid "Make a One-Time Donation" msgstr "进行一次性捐赠" -#: src/components/ShareDialog.tsx:412 +#: src/components/ShareDialog.tsx:406 msgid "Make publicly accessible" msgstr "设为公开访问" @@ -766,7 +779,7 @@ msgstr "對應資料" msgid "Market understanding and competitive landscape maintenance for SaaS product development" msgstr "为SaaS产品开发提供市场理解和竞争环境维护" -#: src/components/GraphContextMenu.tsx:258 +#: src/components/GraphContextMenu.tsx:243 msgid "Medium" msgstr "中等" @@ -794,8 +807,8 @@ msgstr "博物馆" msgid "Name" msgstr "姓名" -#: src/components/Header.tsx:79 -#: src/components/Header.tsx:340 +#: src/components/Header.tsx:78 +#: src/components/Header.tsx:339 #: src/pages/Charts.tsx:102 msgid "New" msgstr "新" @@ -813,7 +826,7 @@ msgstr "下次扣费" msgid "No Edges" msgstr "沒有邊緣" -#: src/components/GraphContextMenu.tsx:299 +#: src/components/GraphContextMenu.tsx:282 msgid "Node" msgstr "節點" @@ -880,7 +893,7 @@ msgstr "仅在此设备上可用。<0/>清除浏览器缓存将抹去它们。" msgid "Open Customer Portal" msgstr "打开客户门户" -#: src/components/ShareDialog.tsx:466 +#: src/components/ShareDialog.tsx:460 msgid "Organization Chart" msgstr "组织结构图" @@ -916,8 +929,8 @@ msgstr "剧本" msgid "Pointer and container on same line" msgstr "同一行上的指针和容器" -#: src/components/Header.tsx:193 -#: src/components/Header.tsx:407 +#: src/components/Header.tsx:192 +#: src/components/Header.tsx:406 msgid "Pricing" msgstr "价钱" @@ -933,8 +946,8 @@ msgstr "处理数据" msgid "Prompt" msgstr "提示" -#: src/components/ShareDialog.tsx:408 -#: src/components/ShareDialog.tsx:431 +#: src/components/ShareDialog.tsx:402 +#: src/components/ShareDialog.tsx:425 msgid "Public" msgstr "公开" @@ -943,7 +956,7 @@ msgid "Random" msgstr "随机" #: src/components/EditorWrapper.tsx:44 -#: src/components/ShareDialog.tsx:145 +#: src/components/ShareDialog.tsx:142 msgid "Read-only" msgstr "只读" @@ -1028,8 +1041,8 @@ msgstr "返回" msgid "Right to Left" msgstr "从右到左" -#: src/components/Header.tsx:170 -#: src/components/Header.tsx:386 +#: src/components/Header.tsx:169 +#: src/components/Header.tsx:385 #: src/pages/Roadmap.tsx:16 msgid "Roadmap" msgstr "路线图" @@ -1058,13 +1071,13 @@ msgstr "選擇您的計劃！" msgid "Send us Feedback" msgstr "给我们反馈" -#: src/components/Header.tsx:177 -#: src/components/Header.tsx:391 +#: src/components/Header.tsx:176 +#: src/components/Header.tsx:390 #: src/components/Settings.tsx:50 msgid "Settings" msgstr "设置" -#: src/components/GraphContextMenu.tsx:368 +#: src/components/GraphContextMenu.tsx:351 msgid "Shape" msgstr "形状" @@ -1077,11 +1090,11 @@ msgstr "注册" msgid "Sign Up Now" msgstr "现在注册" -#: src/components/GraphContextMenu.tsx:435 +#: src/components/GraphContextMenu.tsx:418 msgid "Size" msgstr "尺寸" -#: src/components/GraphContextMenu.tsx:253 +#: src/components/GraphContextMenu.tsx:238 msgid "Small" msgstr "小" @@ -1093,7 +1106,7 @@ msgstr "有些类可以帮助您设计流程图" msgid "Sorry! This page is only available in English." msgstr "抱歉！此页面只有英语版。" -#: src/components/GraphContextMenu.tsx:618 +#: src/components/GraphContextMenu.tsx:601 msgid "Source Arrow" msgstr "源箭头" @@ -1172,7 +1185,7 @@ msgstr "订阅即将到期" msgid "Supply chain analysis and optimization: cost reduction, efficiency improvement, and stakeholder collaboration" msgstr "供应链分析和优化：成本降低，效率提高和利益相关者协作" -#: src/components/GraphContextMenu.tsx:657 +#: src/components/GraphContextMenu.tsx:640 msgid "Target Arrow" msgstr "目标箭头" @@ -1238,9 +1251,9 @@ msgstr "用于分隔多个目标节点的分隔符" msgid "The possible shapes are:" msgstr "可能的形状是：" -#: src/components/Tabs/EditStyleTab.tsx:33 -msgid "Theme" -msgstr "风格" +#: src/components/Tabs/EditStyleTab.tsx:69 +msgid "Theme Editor" +msgstr "主题编辑器" #: src/components/ImportDataDialog.tsx:419 msgid "There are no edges in this data" @@ -1258,7 +1271,7 @@ msgstr "这款应用的工作原理是输入" msgid "This feature is only available to pro users. <0>Become a pro user to unlock it." msgstr "只有专业用户才能使用此功能。 <0>成为专业用户解锁。" -#: src/components/ShareDialog.tsx:538 +#: src/components/ShareDialog.tsx:532 msgid "Tip" msgstr "提示" @@ -1352,11 +1365,11 @@ msgstr "使用属性<0>w和<1>h显式设置节点的宽度和高度。" msgid "Use the customer portal to change your billing information." msgstr "使用客户门户更改您的账单信息。" -#: src/components/ShareDialog.tsx:474 +#: src/components/ShareDialog.tsx:468 msgid "Use this file for org charts, hierarchies, and other organizational structures." msgstr "使用此文件制作组织图、层次结构和其他组织结构。" -#: src/components/ShareDialog.tsx:462 +#: src/components/ShareDialog.tsx:456 msgid "Use this file for sequences, processes, and workflows." msgstr "使用此文件进行顺序、流程和工作流程。" diff --git a/app/src/pages/Edit.tsx b/app/src/pages/Edit.tsx index b39cf49ab..0bb0c830c 100644 --- a/app/src/pages/Edit.tsx +++ b/app/src/pages/Edit.tsx @@ -108,14 +108,14 @@ export default EditOuter; /** * Load the workspace into our zustand store */ -function loadWorkspace(workspace: string) { +async function loadWorkspace(workspace: string) { const key = titleToLocalStorageKey(workspace); let workspaceText = localStorage.getItem(key); if (!workspaceText) { workspaceText = getDefaultChart(); } - prepareChart(workspaceText, { + await prepareChart(workspaceText, { id: workspace, title: workspace, isHosted: false, diff --git a/app/src/pages/EditHosted.tsx b/app/src/pages/EditHosted.tsx index bf71ec8a3..456fc11b1 100644 --- a/app/src/pages/EditHosted.tsx +++ b/app/src/pages/EditHosted.tsx @@ -133,7 +133,7 @@ async function loadHostedDoc(id: string) { const chart = await getHostedChart(id); if (!chart) throw new Error("Chart not found"); const doc = chart.chart; - prepareChart(doc, { + await prepareChart(doc, { id: chart.id, title: chart.name, isHosted: true, diff --git a/app/src/pages/New.tsx b/app/src/pages/New.tsx index eb7e518eb..5177000b4 100644 --- a/app/src/pages/New.tsx +++ b/app/src/pages/New.tsx @@ -98,7 +98,7 @@ const New = memo(function New({ const [start, setStart] = useState<"blank" | "prompt">("blank"); // Boilerplate to create a new chart - const { mutate, isLoading } = useMutation("makeChart", makeChart, { + const makeChartMutation = useMutation("makeChart", makeChart, { retry: false, onSuccess: (response: any) => { queryClient.invalidateQueries(["auth", "hostedCharts"]); @@ -145,7 +145,7 @@ const New = memo(function New({ const method = formData.get("method") as "instruct" | "extract"; if (!prompt || !method) return; - mutate({ + makeChartMutation.mutate({ name, user_id: userId, chart, @@ -154,7 +154,7 @@ const New = memo(function New({ fromPrompt: true, }); } else { - mutate({ + makeChartMutation.mutate({ name, user_id: userId, chart, @@ -299,7 +299,7 @@ const New = memo(function New({ className="justify-self-center bg-neutral-200 rounded-lg text-xl font-bold px-16 py-4 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-neutral-200 dark:disabled:hover:bg-neutral-800 mt-4 mb-8" disabled={createDisabled} > - {isLoading ? ( + {makeChartMutation.isLoading ? ( ) : ( Create diff --git a/app/src/pages/Public.tsx b/app/src/pages/Public.tsx index c6be51d94..db30c2749 100644 --- a/app/src/pages/Public.tsx +++ b/app/src/pages/Public.tsx @@ -32,7 +32,7 @@ async function loadPublicDoc(id: string) { const chart = await getPublicChart(id); if (!chart) throw new Error("Chart not found"); const doc = chart.chart; - prepareChart(doc, { + await prepareChart(doc, { isHosted: true, title: doc.name, id: doc.id, diff --git a/app/src/pages/ReadOnly.tsx b/app/src/pages/ReadOnly.tsx index 3aa08799c..adf4124f6 100644 --- a/app/src/pages/ReadOnly.tsx +++ b/app/src/pages/ReadOnly.tsx @@ -51,7 +51,7 @@ async function loadReadOnly(path: string, graphText: string) { const initialText = isCompressed ? decompressFromEncodedURIComponent(graphText) ?? "" : decodeURIComponent(graphText); - prepareChart(initialText, { + await prepareChart(initialText, { isHosted: false, id: "read", title: "read-only-flowchart", diff --git a/app/src/react-app-env.d.ts b/app/src/react-app-env.d.ts index 234f37949..4f1672f4a 100644 --- a/app/src/react-app-env.d.ts +++ b/app/src/react-app-env.d.ts @@ -10,3 +10,7 @@ declare module "svgo/dist/svgo.browser" { const optimize: (s: string, args: any) => { data: string }; export = { optimize }; } + +interface CSSStyleSheet { + replaceSync(reset_style: any): void; +} diff --git a/app/src/setupTests.ts b/app/src/setupTests.ts index 945a7b373..6dd7a5838 100644 --- a/app/src/setupTests.ts +++ b/app/src/setupTests.ts @@ -1,3 +1,4 @@ +// @ts-nocheck // jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) @@ -6,3 +7,13 @@ import "@testing-library/jest-dom"; import "jest-canvas-mock"; jest.spyOn(Storage.prototype, "setItem"); + +global.CSSStyleSheet = class { + constructor() { + this.cssRules = []; + } + + replaceSync(cssText) { + this.cssRules = cssText; + } +}; diff --git a/app/tailwind.config.js b/app/tailwind.config.js index 484122eee..741f6806f 100644 --- a/app/tailwind.config.js +++ b/app/tailwind.config.js @@ -90,10 +90,33 @@ module.exports = { from: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" }, to: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }, }, + slideUpAndFade: { + from: { opacity: 0, transform: "translateY(2px)" }, + to: { opacity: 1, transform: "translateY(0)" }, + }, + slideRightAndFade: { + from: { opacity: 0, transform: "translateX(-2px)" }, + to: { opacity: 1, transform: "translateX(0)" }, + }, + slideDownAndFade: { + from: { opacity: 0, transform: "translateY(-2px)" }, + to: { opacity: 1, transform: "translateY(0)" }, + }, + slideLeftAndFade: { + from: { opacity: 0, transform: "translateX(2px)" }, + to: { opacity: 1, transform: "translateX(0)" }, + }, }, animation: { overlayShow: "overlayShow 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: + "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)", + slideDownAndFade: + "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)", + slideLeftAndFade: + "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)", }, fontSize: { xs: ["14px", { lineHeight: "16px" }], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bc6cf7b86..d1b73f17f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.1' +lockfileVersion: '6.0' settings: autoInstallPeers: true @@ -150,6 +150,9 @@ importers: '@radix-ui/react-toggle': specifier: ^0.1.4 version: 0.1.4(react@17.0.2) + '@radix-ui/react-tooltip': + specifier: ^1.0.6 + version: 1.0.6(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) '@reach/dialog': specifier: ^0.15.0 version: 0.15.3(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) @@ -303,6 +306,9 @@ importers: postcss-flexbugs-fixes: specifier: ^5.0.2 version: 5.0.2(postcss@8.4.24) + prettier: + specifier: ^2.3.1 + version: 2.7.1 re-resizable: specifier: ^6.9.0 version: 6.9.9(react-dom@17.0.2)(react@17.0.2) @@ -499,9 +505,6 @@ importers: msw: specifier: ^0.36.8 version: 0.36.8 - prettier: - specifier: ^2.3.1 - version: 2.7.1 source-map-explorer: specifier: ^2.5.2 version: 2.5.3 @@ -2048,7 +2051,6 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.13.11 - dev: false /@babel/template@7.18.10: resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==} @@ -2129,158 +2131,158 @@ packages: resolution: {integrity: sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==} dev: false - /@csstools/postcss-cascade-layers@1.1.1(postcss@8.4.17): + /@csstools/postcss-cascade-layers@1.1.1(postcss@8.4.24): resolution: {integrity: sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - '@csstools/selector-specificity': 2.0.2(postcss-selector-parser@6.0.11)(postcss@8.4.17) - postcss: 8.4.17 + '@csstools/selector-specificity': 2.0.2(postcss-selector-parser@6.0.11)(postcss@8.4.24) + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /@csstools/postcss-color-function@1.1.1(postcss@8.4.17): + /@csstools/postcss-color-function@1.1.1(postcss@8.4.24): resolution: {integrity: sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.17) - postcss: 8.4.17 + '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.24) + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-font-format-keywords@1.0.1(postcss@8.4.17): + /@csstools/postcss-font-format-keywords@1.0.1(postcss@8.4.24): resolution: {integrity: sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-hwb-function@1.0.2(postcss@8.4.17): + /@csstools/postcss-hwb-function@1.0.2(postcss@8.4.24): resolution: {integrity: sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-ic-unit@1.0.1(postcss@8.4.17): + /@csstools/postcss-ic-unit@1.0.1(postcss@8.4.24): resolution: {integrity: sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.17) - postcss: 8.4.17 + '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.24) + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-is-pseudo-class@2.0.7(postcss@8.4.17): + /@csstools/postcss-is-pseudo-class@2.0.7(postcss@8.4.24): resolution: {integrity: sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - '@csstools/selector-specificity': 2.0.2(postcss-selector-parser@6.0.11)(postcss@8.4.17) - postcss: 8.4.17 + '@csstools/selector-specificity': 2.0.2(postcss-selector-parser@6.0.11)(postcss@8.4.24) + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /@csstools/postcss-nested-calc@1.0.0(postcss@8.4.17): + /@csstools/postcss-nested-calc@1.0.0(postcss@8.4.24): resolution: {integrity: sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-normalize-display-values@1.0.1(postcss@8.4.17): + /@csstools/postcss-normalize-display-values@1.0.1(postcss@8.4.24): resolution: {integrity: sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-oklab-function@1.1.1(postcss@8.4.17): + /@csstools/postcss-oklab-function@1.1.1(postcss@8.4.24): resolution: {integrity: sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.17) - postcss: 8.4.17 + '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.24) + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-progressive-custom-properties@1.3.0(postcss@8.4.17): + /@csstools/postcss-progressive-custom-properties@1.3.0(postcss@8.4.24): resolution: {integrity: sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.3 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-stepped-value-functions@1.0.1(postcss@8.4.17): + /@csstools/postcss-stepped-value-functions@1.0.1(postcss@8.4.24): resolution: {integrity: sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-text-decoration-shorthand@1.0.0(postcss@8.4.17): + /@csstools/postcss-text-decoration-shorthand@1.0.0(postcss@8.4.24): resolution: {integrity: sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-trigonometric-functions@1.0.2(postcss@8.4.17): + /@csstools/postcss-trigonometric-functions@1.0.2(postcss@8.4.24): resolution: {integrity: sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==} engines: {node: ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /@csstools/postcss-unset-value@1.0.2(postcss@8.4.17): + /@csstools/postcss-unset-value@1.0.2(postcss@8.4.24): resolution: {integrity: sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /@csstools/selector-specificity@2.0.2(postcss-selector-parser@6.0.11)(postcss@8.4.17): + /@csstools/selector-specificity@2.0.2(postcss-selector-parser@6.0.11)(postcss@8.4.24): resolution: {integrity: sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 postcss-selector-parser: ^6.0.10 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false @@ -2372,12 +2374,22 @@ packages: resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==} dev: false + /@floating-ui/core@1.3.1: + resolution: {integrity: sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==} + dev: false + /@floating-ui/dom@0.5.4: resolution: {integrity: sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==} dependencies: '@floating-ui/core': 0.7.3 dev: false + /@floating-ui/dom@1.4.3: + resolution: {integrity: sha512-nB/68NyaQlcdY22L+Fgd1HERQ7UGv7XFN+tPxwrEfQL4nKtAP/jIZnZtpUlXbtV+VEGHh6W/63Gy2C5biWI3sA==} + dependencies: + '@floating-ui/core': 1.3.1 + dev: false + /@floating-ui/react-dom@0.7.2(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==} peerDependencies: @@ -2392,6 +2404,17 @@ packages: - '@types/react' dev: false + /@floating-ui/react-dom@2.0.1(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@floating-ui/dom': 1.4.3 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@formkit/auto-animate@1.0.0-beta.6: resolution: {integrity: sha512-PVDhLAlr+B4Xb7e+1wozBUWmXa6BFU8xUPR/W/E+TsQhPS1qkAdAsJ25keEnFrcePSnXHrOsh3tiFbEToOzV9w==} dev: false @@ -3319,6 +3342,12 @@ packages: '@babel/runtime': 7.19.0 dev: false + /@radix-ui/primitive@1.0.1: + resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} + dependencies: + '@babel/runtime': 7.22.5 + dev: false + /@radix-ui/react-alert-dialog@1.0.2(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-0MtxV53FaEEBOKRgyLnEqHZKKDS5BldQ9oUBsKVXWI5FHbl2jp35qs+0aJET+K5hJDsc40kQUzP7g+wC7tqrqA==} peerDependencies: @@ -3372,6 +3401,27 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-arrow@1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@types/react': 17.0.50 + '@types/react-dom': 17.0.17 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-collapsible@1.0.2(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-QNiDT6Au8jUU0K1WV+HEd4loH7C5CKQjeXxskwqyiyAkyCmW7qlQM5vSSJCIoQC+OVPyhgafSmGudRP8Qm1/gA==} peerDependencies: @@ -3454,6 +3504,20 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-compose-refs@1.0.1(@types/react@17.0.50)(react@17.0.2): + resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@types/react': 17.0.50 + react: 17.0.2 + dev: false + /@radix-ui/react-context@0.1.1(react@17.0.2): resolution: {integrity: sha512-PkyVX1JsLBioeu0jB9WvRpDBBLtLZohVDT3BB5CTSJqActma8S8030P57mWZb4baZifMvN7KKWPAA40UmWKkQg==} peerDependencies: @@ -3472,6 +3536,20 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-context@1.0.1(@types/react@17.0.50)(react@17.0.2): + resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@types/react': 17.0.50 + react: 17.0.2 + dev: false + /@radix-ui/react-dialog@1.0.2(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-EKxxp2WNSmUPkx4trtWNmZ4/vAYEg7JkAfa1HKBUnaubw9eHzf1Orr9B472lJYaYz327RHDrd4R95fsw7VR8DA==} peerDependencies: @@ -3598,6 +3676,31 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@17.0.50)(react@17.0.2) + '@types/react': 17.0.50 + '@types/react-dom': 17.0.17 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-dropdown-menu@2.0.1(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-WDZqmwsNuxdBMkvgB85UeSPAT0wSBd+ojxtzX7lU7uYYh47gacCj6Spo0l9+X4TMe3JA1BBMN9c7OhIMaQeKbg==} peerDependencies: @@ -3685,6 +3788,21 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-id@1.0.1(@types/react@17.0.50)(react@17.0.2): + resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@types/react': 17.0.50 + react: 17.0.2 + dev: false + /@radix-ui/react-menu@2.0.1(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-I5FFZQxCl2fHoJ7R0m5/oWA9EX8/ttH4AbgneoCH7DAXQioFeb0XMAYnOVSp1GgJZ1Nx/mohxNQSeTMcaF1YPw==} peerDependencies: @@ -3854,6 +3972,36 @@ packages: - '@types/react' dev: false + /@radix-ui/react-popper@1.1.2(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@floating-ui/react-dom': 2.0.1(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-arrow': 1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-context': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-use-rect': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-use-size': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/rect': 1.0.1 + '@types/react': 17.0.50 + '@types/react-dom': 17.0.17 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-portal@0.1.4(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-MO0wRy2eYRTZ/CyOri9NANCAtAtq89DEtg90gicaTlkCfdqCLEBsLb+/q66BZQTr3xX/Vq01nnVfc/TkCqoqvw==} peerDependencies: @@ -3891,6 +4039,27 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-portal@1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@types/react': 17.0.50 + '@types/react-dom': 17.0.17 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-presence@0.1.2(react@17.0.2): resolution: {integrity: sha512-3BRlFZraooIUfRlyN+b/Xs5hq1lanOOo/+3h6Pwu2GMFjkGKKa4Rd51fcqGqnVlbr3jYg+WLuGyAV4KlgqwrQw==} peerDependencies: @@ -3915,6 +4084,28 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-presence@1.0.1(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@types/react': 17.0.50 + '@types/react-dom': 17.0.17 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-primitive@0.1.4(react@17.0.2): resolution: {integrity: sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==} peerDependencies: @@ -3961,6 +4152,27 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-primitive@1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/react-slot': 1.0.2(@types/react@17.0.50)(react@17.0.2) + '@types/react': 17.0.50 + '@types/react-dom': 17.0.17 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-progress@1.0.2(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-c16RVM43ct2koRcMmPw4b47JWFNs89qe5p4Um9dwoPs0yi+d7It1MJ35EpsX+93o31Mqdwe4vQyu0SrHrygdCg==} peerDependencies: @@ -4121,6 +4333,21 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-slot@1.0.2(@types/react@17.0.50)(react@17.0.2): + resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@types/react': 17.0.50 + react: 17.0.2 + dev: false + /@radix-ui/react-tabs@1.0.1(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-mVNEwHwgjy2G9F7b39f9VY+jF0QUZykTm0Sdv+Uz6KC4KOEIa4HLDiHU8MeEZluRtZE3aqGYDhl93O7QbJDwhg==} peerDependencies: @@ -4152,6 +4379,38 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-tooltip@1.0.6(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-context': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-id': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-popper': 1.1.2(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-portal': 1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-slot': 1.0.2(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@types/react': 17.0.50 + '@types/react-dom': 17.0.17 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-use-body-pointer-events@0.1.1(react@17.0.2): resolution: {integrity: sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==} peerDependencies: @@ -4180,6 +4439,20 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@17.0.50)(react@17.0.2): + resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@types/react': 17.0.50 + react: 17.0.2 + dev: false + /@radix-ui/react-use-controllable-state@0.1.0(react@17.0.2): resolution: {integrity: sha512-zv7CX/PgsRl46a52Tl45TwqwVJdmqnlQEQhaYMz/yBOD2sx2gCkCFSoF/z9mpnYWmS6DTLNTg5lIps3fV6EnXg==} peerDependencies: @@ -4200,6 +4473,21 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-use-controllable-state@1.0.1(@types/react@17.0.50)(react@17.0.2): + resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@types/react': 17.0.50 + react: 17.0.2 + dev: false + /@radix-ui/react-use-escape-keydown@0.1.0(react@17.0.2): resolution: {integrity: sha512-tDLZbTGFmvXaazUXXv8kYbiCcbAE8yKgng9s95d8fCO+Eundv0Jngbn/hKPhDDs4jj9ChwRX5cDDnlaN+ugYYQ==} peerDependencies: @@ -4230,6 +4518,21 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@17.0.50)(react@17.0.2): + resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@types/react': 17.0.50 + react: 17.0.2 + dev: false + /@radix-ui/react-use-layout-effect@0.1.0(react@17.0.2): resolution: {integrity: sha512-+wdeS51Y+E1q1Wmd+1xSSbesZkpVj4jsg0BojCbopWvgq5iBvixw5vgemscdh58ep98BwUbsFYnrywFhV9yrVg==} peerDependencies: @@ -4248,6 +4551,20 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-use-layout-effect@1.0.1(@types/react@17.0.50)(react@17.0.2): + resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@types/react': 17.0.50 + react: 17.0.2 + dev: false + /@radix-ui/react-use-previous@1.0.0(react@17.0.2): resolution: {integrity: sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==} peerDependencies: @@ -4277,6 +4594,21 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-use-rect@1.0.1(@types/react@17.0.50)(react@17.0.2): + resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/rect': 1.0.1 + '@types/react': 17.0.50 + react: 17.0.2 + dev: false + /@radix-ui/react-use-size@0.1.1(react@17.0.2): resolution: {integrity: sha512-pTgWM5qKBu6C7kfKxrKPoBI2zZYZmp2cSXzpUiGM3qEBQlMLtYhaY2JXdXUCxz+XmD1YEjc8oRwvyfsD4AG4WA==} peerDependencies: @@ -4296,6 +4628,21 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-use-size@1.0.1(@types/react@17.0.50)(react@17.0.2): + resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.50)(react@17.0.2) + '@types/react': 17.0.50 + react: 17.0.2 + dev: false + /@radix-ui/react-visually-hidden@1.0.0(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA==} peerDependencies: @@ -4320,6 +4667,27 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.5 + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.17)(@types/react@17.0.50)(react-dom@17.0.2)(react@17.0.2) + '@types/react': 17.0.50 + '@types/react-dom': 17.0.17 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/rect@0.1.1: resolution: {integrity: sha512-g3hnE/UcOg7REdewduRPAK88EPuLZtaq7sA9ouu8S+YEtnyFRI16jgv6GZYe3VMoQLL1T171ebmEPtDjyxWLzw==} dependencies: @@ -4332,6 +4700,12 @@ packages: '@babel/runtime': 7.19.0 dev: false + /@radix-ui/rect@1.0.1: + resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==} + dependencies: + '@babel/runtime': 7.22.5 + dev: false + /@reach/auto-id@0.16.0(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg==} peerDependencies: @@ -6399,7 +6773,7 @@ packages: engines: {node: '>=4'} dev: false - /autoprefixer@10.4.12(postcss@8.4.17): + /autoprefixer@10.4.12(postcss@8.4.24): resolution: {integrity: sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==} engines: {node: ^10 || ^12 || >=14} hasBin: true @@ -6411,7 +6785,7 @@ packages: fraction.js: 4.2.0 normalize-range: 0.1.2 picocolors: 1.0.0 - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false @@ -6538,7 +6912,7 @@ packages: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} dependencies: - '@babel/runtime': 7.19.0 + '@babel/runtime': 7.22.5 cosmiconfig: 7.0.1 resolve: 1.22.1 @@ -7318,34 +7692,34 @@ packages: engines: {node: '>=8'} dev: false - /css-blank-pseudo@3.0.3(postcss@8.4.17): + /css-blank-pseudo@3.0.3(postcss@8.4.24): resolution: {integrity: sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==} engines: {node: ^12 || ^14 || >=16} hasBin: true peerDependencies: postcss: ^8.4 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /css-declaration-sorter@6.3.1(postcss@8.4.17): + /css-declaration-sorter@6.3.1(postcss@8.4.24): resolution: {integrity: sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==} engines: {node: ^10 || ^12 || >=14} peerDependencies: postcss: ^8.0.9 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /css-has-pseudo@3.0.4(postcss@8.4.17): + /css-has-pseudo@3.0.4(postcss@8.4.24): resolution: {integrity: sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==} engines: {node: ^12 || ^14 || >=16} hasBin: true peerDependencies: postcss: ^8.4 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false @@ -7355,12 +7729,12 @@ packages: peerDependencies: webpack: ^5.0.0 dependencies: - icss-utils: 5.1.0(postcss@8.4.17) - postcss: 8.4.17 - postcss-modules-extract-imports: 3.0.0(postcss@8.4.17) - postcss-modules-local-by-default: 4.0.0(postcss@8.4.17) - postcss-modules-scope: 3.0.0(postcss@8.4.17) - postcss-modules-values: 4.0.0(postcss@8.4.17) + icss-utils: 5.1.0(postcss@8.4.24) + postcss: 8.4.24 + postcss-modules-extract-imports: 3.0.0(postcss@8.4.24) + postcss-modules-local-by-default: 4.0.0(postcss@8.4.24) + postcss-modules-scope: 3.0.0(postcss@8.4.24) + postcss-modules-values: 4.0.0(postcss@8.4.24) postcss-value-parser: 4.2.0 semver: 7.3.8 webpack: 5.74.0 @@ -7385,23 +7759,23 @@ packages: esbuild: optional: true dependencies: - cssnano: 5.1.13(postcss@8.4.17) + cssnano: 5.1.13(postcss@8.4.24) jest-worker: 27.5.1 - postcss: 8.4.17 + postcss: 8.4.24 schema-utils: 4.0.0 serialize-javascript: 6.0.0 source-map: 0.6.1 webpack: 5.74.0 dev: false - /css-prefers-color-scheme@6.0.3(postcss@8.4.17): + /css-prefers-color-scheme@6.0.3(postcss@8.4.24): resolution: {integrity: sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==} engines: {node: ^12 || ^14 || >=16} hasBin: true peerDependencies: postcss: ^8.4 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false /css-select-base-adapter@0.1.1: @@ -7470,62 +7844,62 @@ packages: resolution: {integrity: sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==} dev: true - /cssnano-preset-default@5.2.12(postcss@8.4.17): + /cssnano-preset-default@5.2.12(postcss@8.4.24): resolution: {integrity: sha512-OyCBTZi+PXgylz9HAA5kHyoYhfGcYdwFmyaJzWnzxuGRtnMw/kR6ilW9XzlzlRAtB6PLT/r+prYgkef7hngFew==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - css-declaration-sorter: 6.3.1(postcss@8.4.17) - cssnano-utils: 3.1.0(postcss@8.4.17) - postcss: 8.4.17 - postcss-calc: 8.2.4(postcss@8.4.17) - postcss-colormin: 5.3.0(postcss@8.4.17) - postcss-convert-values: 5.1.2(postcss@8.4.17) - postcss-discard-comments: 5.1.2(postcss@8.4.17) - postcss-discard-duplicates: 5.1.0(postcss@8.4.17) - postcss-discard-empty: 5.1.1(postcss@8.4.17) - postcss-discard-overridden: 5.1.0(postcss@8.4.17) - postcss-merge-longhand: 5.1.6(postcss@8.4.17) - postcss-merge-rules: 5.1.2(postcss@8.4.17) - postcss-minify-font-values: 5.1.0(postcss@8.4.17) - postcss-minify-gradients: 5.1.1(postcss@8.4.17) - postcss-minify-params: 5.1.3(postcss@8.4.17) - postcss-minify-selectors: 5.2.1(postcss@8.4.17) - postcss-normalize-charset: 5.1.0(postcss@8.4.17) - postcss-normalize-display-values: 5.1.0(postcss@8.4.17) - postcss-normalize-positions: 5.1.1(postcss@8.4.17) - postcss-normalize-repeat-style: 5.1.1(postcss@8.4.17) - postcss-normalize-string: 5.1.0(postcss@8.4.17) - postcss-normalize-timing-functions: 5.1.0(postcss@8.4.17) - postcss-normalize-unicode: 5.1.0(postcss@8.4.17) - postcss-normalize-url: 5.1.0(postcss@8.4.17) - postcss-normalize-whitespace: 5.1.1(postcss@8.4.17) - postcss-ordered-values: 5.1.3(postcss@8.4.17) - postcss-reduce-initial: 5.1.0(postcss@8.4.17) - postcss-reduce-transforms: 5.1.0(postcss@8.4.17) - postcss-svgo: 5.1.0(postcss@8.4.17) - postcss-unique-selectors: 5.1.1(postcss@8.4.17) - dev: false - - /cssnano-utils@3.1.0(postcss@8.4.17): + css-declaration-sorter: 6.3.1(postcss@8.4.24) + cssnano-utils: 3.1.0(postcss@8.4.24) + postcss: 8.4.24 + postcss-calc: 8.2.4(postcss@8.4.24) + postcss-colormin: 5.3.0(postcss@8.4.24) + postcss-convert-values: 5.1.2(postcss@8.4.24) + postcss-discard-comments: 5.1.2(postcss@8.4.24) + postcss-discard-duplicates: 5.1.0(postcss@8.4.24) + postcss-discard-empty: 5.1.1(postcss@8.4.24) + postcss-discard-overridden: 5.1.0(postcss@8.4.24) + postcss-merge-longhand: 5.1.6(postcss@8.4.24) + postcss-merge-rules: 5.1.2(postcss@8.4.24) + postcss-minify-font-values: 5.1.0(postcss@8.4.24) + postcss-minify-gradients: 5.1.1(postcss@8.4.24) + postcss-minify-params: 5.1.3(postcss@8.4.24) + postcss-minify-selectors: 5.2.1(postcss@8.4.24) + postcss-normalize-charset: 5.1.0(postcss@8.4.24) + postcss-normalize-display-values: 5.1.0(postcss@8.4.24) + postcss-normalize-positions: 5.1.1(postcss@8.4.24) + postcss-normalize-repeat-style: 5.1.1(postcss@8.4.24) + postcss-normalize-string: 5.1.0(postcss@8.4.24) + postcss-normalize-timing-functions: 5.1.0(postcss@8.4.24) + postcss-normalize-unicode: 5.1.0(postcss@8.4.24) + postcss-normalize-url: 5.1.0(postcss@8.4.24) + postcss-normalize-whitespace: 5.1.1(postcss@8.4.24) + postcss-ordered-values: 5.1.3(postcss@8.4.24) + postcss-reduce-initial: 5.1.0(postcss@8.4.24) + postcss-reduce-transforms: 5.1.0(postcss@8.4.24) + postcss-svgo: 5.1.0(postcss@8.4.24) + postcss-unique-selectors: 5.1.1(postcss@8.4.24) + dev: false + + /cssnano-utils@3.1.0(postcss@8.4.24): resolution: {integrity: sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /cssnano@5.1.13(postcss@8.4.17): + /cssnano@5.1.13(postcss@8.4.24): resolution: {integrity: sha512-S2SL2ekdEz6w6a2epXn4CmMKU4K3KpcyXLKfAYc9UQQqJRkD/2eLUG0vJ3Db/9OvO5GuAdgXw3pFbR6abqghDQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - cssnano-preset-default: 5.2.12(postcss@8.4.17) + cssnano-preset-default: 5.2.12(postcss@8.4.24) lilconfig: 2.0.6 - postcss: 8.4.17 + postcss: 8.4.24 yaml: 1.10.2 dev: false @@ -9667,13 +10041,13 @@ packages: dependencies: safer-buffer: 2.1.2 - /icss-utils@5.1.0(postcss@8.4.17): + /icss-utils@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: postcss: ^8.1.0 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false /idb@7.1.0: @@ -11784,12 +12158,6 @@ packages: big-integer: 1.6.51 dev: false - /nanoid@3.3.4: - resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==} - engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} - hasBin: true - dev: false - /nanoid@3.3.6: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} @@ -12309,17 +12677,17 @@ packages: tslib: 2.4.0 dev: false - /postcss-attribute-case-insensitive@5.0.2(postcss@8.4.17): + /postcss-attribute-case-insensitive@5.0.2(postcss@8.4.24): resolution: {integrity: sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /postcss-browser-comments@4.0.0(browserslist@4.21.4)(postcss@8.4.17): + /postcss-browser-comments@4.0.0(browserslist@4.21.4)(postcss@8.4.24): resolution: {integrity: sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==} engines: {node: '>=8'} peerDependencies: @@ -12327,60 +12695,60 @@ packages: postcss: '>=8' dependencies: browserslist: 4.21.4 - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-calc@8.2.4(postcss@8.4.17): + /postcss-calc@8.2.4(postcss@8.4.24): resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==} peerDependencies: postcss: ^8.2.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 dev: false - /postcss-clamp@4.1.0(postcss@8.4.17): + /postcss-clamp@4.1.0(postcss@8.4.24): resolution: {integrity: sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==} engines: {node: '>=7.6.0'} peerDependencies: postcss: ^8.4.6 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-color-functional-notation@4.2.4(postcss@8.4.17): + /postcss-color-functional-notation@4.2.4(postcss@8.4.24): resolution: {integrity: sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-color-hex-alpha@8.0.4(postcss@8.4.17): + /postcss-color-hex-alpha@8.0.4(postcss@8.4.24): resolution: {integrity: sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.4 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-color-rebeccapurple@7.1.1(postcss@8.4.17): + /postcss-color-rebeccapurple@7.1.1(postcss@8.4.24): resolution: {integrity: sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-colormin@5.3.0(postcss@8.4.17): + /postcss-colormin@5.3.0(postcss@8.4.24): resolution: {integrity: sha512-WdDO4gOFG2Z8n4P8TWBpshnL3JpmNmJwdnfP2gbk2qBA8PWwOYcmjmI/t3CmMeL72a7Hkd+x/Mg9O2/0rD54Pg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -12389,126 +12757,118 @@ packages: browserslist: 4.21.4 caniuse-api: 3.0.0 colord: 2.9.3 - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-convert-values@5.1.2(postcss@8.4.17): + /postcss-convert-values@5.1.2(postcss@8.4.24): resolution: {integrity: sha512-c6Hzc4GAv95B7suy4udszX9Zy4ETyMCgFPUDtWjdFTKH1SE9eFY/jEpHSwTH1QPuwxHpWslhckUQWbNRM4ho5g==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-custom-media@8.0.2(postcss@8.4.17): + /postcss-custom-media@8.0.2(postcss@8.4.24): resolution: {integrity: sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.3 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-custom-properties@12.1.9(postcss@8.4.17): + /postcss-custom-properties@12.1.9(postcss@8.4.24): resolution: {integrity: sha512-/E7PRvK8DAVljBbeWrcEQJPG72jaImxF3vvCNFwv9cC8CzigVoNIpeyfnJzphnN3Fd8/auBf5wvkw6W9MfmTyg==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-custom-selectors@6.0.3(postcss@8.4.17): + /postcss-custom-selectors@6.0.3(postcss@8.4.24): resolution: {integrity: sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.3 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /postcss-dir-pseudo-class@6.0.5(postcss@8.4.17): + /postcss-dir-pseudo-class@6.0.5(postcss@8.4.24): resolution: {integrity: sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /postcss-discard-comments@5.1.2(postcss@8.4.17): + /postcss-discard-comments@5.1.2(postcss@8.4.24): resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-discard-duplicates@5.1.0(postcss@8.4.17): + /postcss-discard-duplicates@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-discard-empty@5.1.1(postcss@8.4.17): + /postcss-discard-empty@5.1.1(postcss@8.4.24): resolution: {integrity: sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-discard-overridden@5.1.0(postcss@8.4.17): + /postcss-discard-overridden@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-double-position-gradients@3.1.2(postcss@8.4.17): + /postcss-double-position-gradients@3.1.2(postcss@8.4.24): resolution: {integrity: sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.17) - postcss: 8.4.17 + '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.24) + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-env-function@4.0.6(postcss@8.4.17): + /postcss-env-function@4.0.6(postcss@8.4.24): resolution: {integrity: sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.4 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-flexbugs-fixes@5.0.2(postcss@8.4.17): - resolution: {integrity: sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==} - peerDependencies: - postcss: ^8.1.4 - dependencies: - postcss: 8.4.17 - dev: false - /postcss-flexbugs-fixes@5.0.2(postcss@8.4.24): resolution: {integrity: sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==} peerDependencies: @@ -12517,65 +12877,53 @@ packages: postcss: 8.4.24 dev: false - /postcss-focus-visible@6.0.4(postcss@8.4.17): + /postcss-focus-visible@6.0.4(postcss@8.4.24): resolution: {integrity: sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.4 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /postcss-focus-within@5.0.4(postcss@8.4.17): + /postcss-focus-within@5.0.4(postcss@8.4.24): resolution: {integrity: sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.4 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /postcss-font-variant@5.0.0(postcss@8.4.17): + /postcss-font-variant@5.0.0(postcss@8.4.24): resolution: {integrity: sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==} peerDependencies: postcss: ^8.1.0 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-gap-properties@3.0.5(postcss@8.4.17): + /postcss-gap-properties@3.0.5(postcss@8.4.24): resolution: {integrity: sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-image-set-function@4.0.7(postcss@8.4.17): + /postcss-image-set-function@4.0.7(postcss@8.4.24): resolution: {integrity: sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-import@14.1.0(postcss@8.4.17): - resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==} - engines: {node: '>=10.0.0'} - peerDependencies: - postcss: ^8.0.0 - dependencies: - postcss: 8.4.17 - postcss-value-parser: 4.2.0 - read-cache: 1.0.0 - resolve: 1.22.1 - dev: false - /postcss-import@14.1.0(postcss@8.4.24): resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==} engines: {node: '>=10.0.0'} @@ -12586,65 +12934,35 @@ packages: postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.1 - dev: true - /postcss-initial@4.0.1(postcss@8.4.17): + /postcss-initial@4.0.1(postcss@8.4.24): resolution: {integrity: sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==} peerDependencies: postcss: ^8.0.0 dependencies: - postcss: 8.4.17 - dev: false - - /postcss-js@4.0.0(postcss@8.4.17): - resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} - engines: {node: ^12 || ^14 || >= 16} - peerDependencies: - postcss: ^8.3.3 - dependencies: - camelcase-css: 2.0.1 - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-js@4.0.0(postcss@8.4.24): - resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} + /postcss-js@4.0.1(postcss@8.4.24): + resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} peerDependencies: - postcss: ^8.3.3 + postcss: ^8.4.21 dependencies: camelcase-css: 2.0.1 postcss: 8.4.24 - dev: true - /postcss-lab-function@4.2.1(postcss@8.4.17): + /postcss-lab-function@4.2.1(postcss@8.4.24): resolution: {integrity: sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.17) - postcss: 8.4.17 + '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.24) + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-load-config@3.1.4(postcss@8.4.17)(ts-node@10.9.1): - resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} - engines: {node: '>= 10'} - peerDependencies: - postcss: '>=8.0.9' - ts-node: '>=9.0.0' - peerDependenciesMeta: - postcss: - optional: true - ts-node: - optional: true - dependencies: - lilconfig: 2.0.6 - postcss: 8.4.17 - ts-node: 10.9.1(@types/node@18.16.17)(typescript@4.8.4) - yaml: 1.10.2 - dev: false - /postcss-load-config@3.1.4(postcss@8.4.24)(ts-node@10.9.1): resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} engines: {node: '>= 10'} @@ -12661,9 +12979,8 @@ packages: postcss: 8.4.24 ts-node: 10.9.1(@types/node@18.16.17)(typescript@4.8.4) yaml: 1.10.2 - dev: true - /postcss-loader@6.2.1(postcss@8.4.17)(webpack@5.74.0): + /postcss-loader@6.2.1(postcss@8.4.24)(webpack@5.74.0): resolution: {integrity: sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -12672,41 +12989,41 @@ packages: dependencies: cosmiconfig: 7.0.1 klona: 2.0.5 - postcss: 8.4.17 + postcss: 8.4.24 semver: 7.3.8 webpack: 5.74.0 dev: false - /postcss-logical@5.0.4(postcss@8.4.17): + /postcss-logical@5.0.4(postcss@8.4.24): resolution: {integrity: sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.4 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-media-minmax@5.0.0(postcss@8.4.17): + /postcss-media-minmax@5.0.0(postcss@8.4.24): resolution: {integrity: sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==} engines: {node: '>=10.0.0'} peerDependencies: postcss: ^8.1.0 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-merge-longhand@5.1.6(postcss@8.4.17): + /postcss-merge-longhand@5.1.6(postcss@8.4.24): resolution: {integrity: sha512-6C/UGF/3T5OE2CEbOuX7iNO63dnvqhGZeUnKkDeifebY0XqkkvrctYSZurpNE902LDf2yKwwPFgotnfSoPhQiw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 - stylehacks: 5.1.0(postcss@8.4.17) + stylehacks: 5.1.0(postcss@8.4.24) dev: false - /postcss-merge-rules@5.1.2(postcss@8.4.17): + /postcss-merge-rules@5.1.2(postcss@8.4.24): resolution: {integrity: sha512-zKMUlnw+zYCWoPN6yhPjtcEdlJaMUZ0WyVcxTAmw3lkkN/NDMRkOkiuctQEoWAOvH7twaxUUdvBWl0d4+hifRQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -12714,104 +13031,94 @@ packages: dependencies: browserslist: 4.21.4 caniuse-api: 3.0.0 - cssnano-utils: 3.1.0(postcss@8.4.17) - postcss: 8.4.17 + cssnano-utils: 3.1.0(postcss@8.4.24) + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /postcss-minify-font-values@5.1.0(postcss@8.4.17): + /postcss-minify-font-values@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-minify-gradients@5.1.1(postcss@8.4.17): + /postcss-minify-gradients@5.1.1(postcss@8.4.24): resolution: {integrity: sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: colord: 2.9.3 - cssnano-utils: 3.1.0(postcss@8.4.17) - postcss: 8.4.17 + cssnano-utils: 3.1.0(postcss@8.4.24) + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-minify-params@5.1.3(postcss@8.4.17): + /postcss-minify-params@5.1.3(postcss@8.4.24): resolution: {integrity: sha512-bkzpWcjykkqIujNL+EVEPOlLYi/eZ050oImVtHU7b4lFS82jPnsCb44gvC6pxaNt38Els3jWYDHTjHKf0koTgg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - cssnano-utils: 3.1.0(postcss@8.4.17) - postcss: 8.4.17 + cssnano-utils: 3.1.0(postcss@8.4.24) + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-minify-selectors@5.2.1(postcss@8.4.17): + /postcss-minify-selectors@5.2.1(postcss@8.4.24): resolution: {integrity: sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /postcss-modules-extract-imports@3.0.0(postcss@8.4.17): + /postcss-modules-extract-imports@3.0.0(postcss@8.4.24): resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: postcss: ^8.1.0 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-modules-local-by-default@4.0.0(postcss@8.4.17): + /postcss-modules-local-by-default@4.0.0(postcss@8.4.24): resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: postcss: ^8.1.0 dependencies: - icss-utils: 5.1.0(postcss@8.4.17) - postcss: 8.4.17 + icss-utils: 5.1.0(postcss@8.4.24) + postcss: 8.4.24 postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 dev: false - /postcss-modules-scope@3.0.0(postcss@8.4.17): + /postcss-modules-scope@3.0.0(postcss@8.4.24): resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: postcss: ^8.1.0 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /postcss-modules-values@4.0.0(postcss@8.4.17): + /postcss-modules-values@4.0.0(postcss@8.4.24): resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: postcss: ^8.1.0 dependencies: - icss-utils: 5.1.0(postcss@8.4.17) - postcss: 8.4.17 - dev: false - - /postcss-nested@6.0.0(postcss@8.4.17): - resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==} - engines: {node: '>=12.0'} - peerDependencies: - postcss: ^8.2.14 - dependencies: - postcss: 8.4.17 - postcss-selector-parser: 6.0.11 + icss-utils: 5.1.0(postcss@8.4.24) + postcss: 8.4.24 dev: false /postcss-nested@6.0.0(postcss@8.4.24): @@ -12822,111 +13129,110 @@ packages: dependencies: postcss: 8.4.24 postcss-selector-parser: 6.0.11 - dev: true - /postcss-nesting@10.2.0(postcss@8.4.17): + /postcss-nesting@10.2.0(postcss@8.4.24): resolution: {integrity: sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - '@csstools/selector-specificity': 2.0.2(postcss-selector-parser@6.0.11)(postcss@8.4.17) - postcss: 8.4.17 + '@csstools/selector-specificity': 2.0.2(postcss-selector-parser@6.0.11)(postcss@8.4.24) + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /postcss-normalize-charset@5.1.0(postcss@8.4.17): + /postcss-normalize-charset@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-normalize-display-values@5.1.0(postcss@8.4.17): + /postcss-normalize-display-values@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-normalize-positions@5.1.1(postcss@8.4.17): + /postcss-normalize-positions@5.1.1(postcss@8.4.24): resolution: {integrity: sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-normalize-repeat-style@5.1.1(postcss@8.4.17): + /postcss-normalize-repeat-style@5.1.1(postcss@8.4.24): resolution: {integrity: sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-normalize-string@5.1.0(postcss@8.4.17): + /postcss-normalize-string@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-normalize-timing-functions@5.1.0(postcss@8.4.17): + /postcss-normalize-timing-functions@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-normalize-unicode@5.1.0(postcss@8.4.17): + /postcss-normalize-unicode@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-J6M3MizAAZ2dOdSjy2caayJLQT8E8K9XjLce8AUQMwOrCvjCHv24aLC/Lps1R1ylOfol5VIDMaM/Lo9NGlk1SQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-normalize-url@5.1.0(postcss@8.4.17): + /postcss-normalize-url@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: normalize-url: 6.1.0 - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-normalize-whitespace@5.1.1(postcss@8.4.17): + /postcss-normalize-whitespace@5.1.1(postcss@8.4.24): resolution: {integrity: sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-normalize@10.0.1(browserslist@4.21.4)(postcss@8.4.17): + /postcss-normalize@10.0.1(browserslist@4.21.4)(postcss@8.4.24): resolution: {integrity: sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==} engines: {node: '>= 12'} peerDependencies: @@ -12935,8 +13241,8 @@ packages: dependencies: '@csstools/normalize.css': 12.0.0 browserslist: 4.21.4 - postcss: 8.4.17 - postcss-browser-comments: 4.0.0(browserslist@4.21.4)(postcss@8.4.17) + postcss: 8.4.24 + postcss-browser-comments: 4.0.0(browserslist@4.21.4)(postcss@8.4.24) sanitize.css: 13.0.0 dev: false @@ -12945,114 +13251,114 @@ packages: engines: {node: ^12 || ^14 || >=16} dev: false - /postcss-ordered-values@5.1.3(postcss@8.4.17): + /postcss-ordered-values@5.1.3(postcss@8.4.24): resolution: {integrity: sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - cssnano-utils: 3.1.0(postcss@8.4.17) - postcss: 8.4.17 + cssnano-utils: 3.1.0(postcss@8.4.24) + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-overflow-shorthand@3.0.4(postcss@8.4.17): + /postcss-overflow-shorthand@3.0.4(postcss@8.4.24): resolution: {integrity: sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-page-break@3.0.4(postcss@8.4.17): + /postcss-page-break@3.0.4(postcss@8.4.24): resolution: {integrity: sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==} peerDependencies: postcss: ^8 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-place@7.0.5(postcss@8.4.17): + /postcss-place@7.0.5(postcss@8.4.24): resolution: {integrity: sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-preset-env@7.8.2(postcss@8.4.17): + /postcss-preset-env@7.8.2(postcss@8.4.24): resolution: {integrity: sha512-rSMUEaOCnovKnwc5LvBDHUDzpGP+nrUeWZGWt9M72fBvckCi45JmnJigUr4QG4zZeOHmOCNCZnd2LKDvP++ZuQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - '@csstools/postcss-cascade-layers': 1.1.1(postcss@8.4.17) - '@csstools/postcss-color-function': 1.1.1(postcss@8.4.17) - '@csstools/postcss-font-format-keywords': 1.0.1(postcss@8.4.17) - '@csstools/postcss-hwb-function': 1.0.2(postcss@8.4.17) - '@csstools/postcss-ic-unit': 1.0.1(postcss@8.4.17) - '@csstools/postcss-is-pseudo-class': 2.0.7(postcss@8.4.17) - '@csstools/postcss-nested-calc': 1.0.0(postcss@8.4.17) - '@csstools/postcss-normalize-display-values': 1.0.1(postcss@8.4.17) - '@csstools/postcss-oklab-function': 1.1.1(postcss@8.4.17) - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.17) - '@csstools/postcss-stepped-value-functions': 1.0.1(postcss@8.4.17) - '@csstools/postcss-text-decoration-shorthand': 1.0.0(postcss@8.4.17) - '@csstools/postcss-trigonometric-functions': 1.0.2(postcss@8.4.17) - '@csstools/postcss-unset-value': 1.0.2(postcss@8.4.17) - autoprefixer: 10.4.12(postcss@8.4.17) + '@csstools/postcss-cascade-layers': 1.1.1(postcss@8.4.24) + '@csstools/postcss-color-function': 1.1.1(postcss@8.4.24) + '@csstools/postcss-font-format-keywords': 1.0.1(postcss@8.4.24) + '@csstools/postcss-hwb-function': 1.0.2(postcss@8.4.24) + '@csstools/postcss-ic-unit': 1.0.1(postcss@8.4.24) + '@csstools/postcss-is-pseudo-class': 2.0.7(postcss@8.4.24) + '@csstools/postcss-nested-calc': 1.0.0(postcss@8.4.24) + '@csstools/postcss-normalize-display-values': 1.0.1(postcss@8.4.24) + '@csstools/postcss-oklab-function': 1.1.1(postcss@8.4.24) + '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.4.24) + '@csstools/postcss-stepped-value-functions': 1.0.1(postcss@8.4.24) + '@csstools/postcss-text-decoration-shorthand': 1.0.0(postcss@8.4.24) + '@csstools/postcss-trigonometric-functions': 1.0.2(postcss@8.4.24) + '@csstools/postcss-unset-value': 1.0.2(postcss@8.4.24) + autoprefixer: 10.4.12(postcss@8.4.24) browserslist: 4.21.4 - css-blank-pseudo: 3.0.3(postcss@8.4.17) - css-has-pseudo: 3.0.4(postcss@8.4.17) - css-prefers-color-scheme: 6.0.3(postcss@8.4.17) + css-blank-pseudo: 3.0.3(postcss@8.4.24) + css-has-pseudo: 3.0.4(postcss@8.4.24) + css-prefers-color-scheme: 6.0.3(postcss@8.4.24) cssdb: 7.0.1 - postcss: 8.4.17 - postcss-attribute-case-insensitive: 5.0.2(postcss@8.4.17) - postcss-clamp: 4.1.0(postcss@8.4.17) - postcss-color-functional-notation: 4.2.4(postcss@8.4.17) - postcss-color-hex-alpha: 8.0.4(postcss@8.4.17) - postcss-color-rebeccapurple: 7.1.1(postcss@8.4.17) - postcss-custom-media: 8.0.2(postcss@8.4.17) - postcss-custom-properties: 12.1.9(postcss@8.4.17) - postcss-custom-selectors: 6.0.3(postcss@8.4.17) - postcss-dir-pseudo-class: 6.0.5(postcss@8.4.17) - postcss-double-position-gradients: 3.1.2(postcss@8.4.17) - postcss-env-function: 4.0.6(postcss@8.4.17) - postcss-focus-visible: 6.0.4(postcss@8.4.17) - postcss-focus-within: 5.0.4(postcss@8.4.17) - postcss-font-variant: 5.0.0(postcss@8.4.17) - postcss-gap-properties: 3.0.5(postcss@8.4.17) - postcss-image-set-function: 4.0.7(postcss@8.4.17) - postcss-initial: 4.0.1(postcss@8.4.17) - postcss-lab-function: 4.2.1(postcss@8.4.17) - postcss-logical: 5.0.4(postcss@8.4.17) - postcss-media-minmax: 5.0.0(postcss@8.4.17) - postcss-nesting: 10.2.0(postcss@8.4.17) + postcss: 8.4.24 + postcss-attribute-case-insensitive: 5.0.2(postcss@8.4.24) + postcss-clamp: 4.1.0(postcss@8.4.24) + postcss-color-functional-notation: 4.2.4(postcss@8.4.24) + postcss-color-hex-alpha: 8.0.4(postcss@8.4.24) + postcss-color-rebeccapurple: 7.1.1(postcss@8.4.24) + postcss-custom-media: 8.0.2(postcss@8.4.24) + postcss-custom-properties: 12.1.9(postcss@8.4.24) + postcss-custom-selectors: 6.0.3(postcss@8.4.24) + postcss-dir-pseudo-class: 6.0.5(postcss@8.4.24) + postcss-double-position-gradients: 3.1.2(postcss@8.4.24) + postcss-env-function: 4.0.6(postcss@8.4.24) + postcss-focus-visible: 6.0.4(postcss@8.4.24) + postcss-focus-within: 5.0.4(postcss@8.4.24) + postcss-font-variant: 5.0.0(postcss@8.4.24) + postcss-gap-properties: 3.0.5(postcss@8.4.24) + postcss-image-set-function: 4.0.7(postcss@8.4.24) + postcss-initial: 4.0.1(postcss@8.4.24) + postcss-lab-function: 4.2.1(postcss@8.4.24) + postcss-logical: 5.0.4(postcss@8.4.24) + postcss-media-minmax: 5.0.0(postcss@8.4.24) + postcss-nesting: 10.2.0(postcss@8.4.24) postcss-opacity-percentage: 1.1.2 - postcss-overflow-shorthand: 3.0.4(postcss@8.4.17) - postcss-page-break: 3.0.4(postcss@8.4.17) - postcss-place: 7.0.5(postcss@8.4.17) - postcss-pseudo-class-any-link: 7.1.6(postcss@8.4.17) - postcss-replace-overflow-wrap: 4.0.0(postcss@8.4.17) - postcss-selector-not: 6.0.1(postcss@8.4.17) + postcss-overflow-shorthand: 3.0.4(postcss@8.4.24) + postcss-page-break: 3.0.4(postcss@8.4.24) + postcss-place: 7.0.5(postcss@8.4.24) + postcss-pseudo-class-any-link: 7.1.6(postcss@8.4.24) + postcss-replace-overflow-wrap: 4.0.0(postcss@8.4.24) + postcss-selector-not: 6.0.1(postcss@8.4.24) postcss-value-parser: 4.2.0 dev: false - /postcss-pseudo-class-any-link@7.1.6(postcss@8.4.17): + /postcss-pseudo-class-any-link@7.1.6(postcss@8.4.24): resolution: {integrity: sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false - /postcss-reduce-initial@5.1.0(postcss@8.4.17): + /postcss-reduce-initial@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-5OgTUviz0aeH6MtBjHfbr57tml13PuedK/Ecg8szzd4XRMbYxH4572JFG067z+FqBIf6Zp/d+0581glkvvWMFw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -13060,34 +13366,34 @@ packages: dependencies: browserslist: 4.21.4 caniuse-api: 3.0.0 - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-reduce-transforms@5.1.0(postcss@8.4.17): + /postcss-reduce-transforms@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: false - /postcss-replace-overflow-wrap@4.0.0(postcss@8.4.17): + /postcss-replace-overflow-wrap@4.0.0(postcss@8.4.24): resolution: {integrity: sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==} peerDependencies: postcss: ^8.0.3 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 dev: false - /postcss-selector-not@6.0.1(postcss@8.4.17): + /postcss-selector-not@6.0.1(postcss@8.4.24): resolution: {integrity: sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false @@ -13098,24 +13404,24 @@ packages: cssesc: 3.0.0 util-deprecate: 1.0.2 - /postcss-svgo@5.1.0(postcss@8.4.17): + /postcss-svgo@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-value-parser: 4.2.0 svgo: 2.8.0 dev: false - /postcss-unique-selectors@5.1.1(postcss@8.4.17): + /postcss-unique-selectors@5.1.1(postcss@8.4.24): resolution: {integrity: sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false @@ -13130,15 +13436,6 @@ packages: source-map: 0.6.1 dev: false - /postcss@8.4.17: - resolution: {integrity: sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==} - engines: {node: ^10 || ^12 || >=14} - dependencies: - nanoid: 3.3.4 - picocolors: 1.0.0 - source-map-js: 1.0.2 - dev: false - /postcss@8.4.24: resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==} engines: {node: ^10 || ^12 || >=14} @@ -13166,7 +13463,6 @@ packages: resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==} engines: {node: '>=10.13.0'} hasBin: true - dev: true /pretty-bytes@5.6.0: resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==} @@ -13646,11 +13942,11 @@ packages: jest-resolve: 27.5.1 jest-watch-typeahead: 1.1.0(jest@27.5.1) mini-css-extract-plugin: 2.6.1(webpack@5.74.0) - postcss: 8.4.17 - postcss-flexbugs-fixes: 5.0.2(postcss@8.4.17) - postcss-loader: 6.2.1(postcss@8.4.17)(webpack@5.74.0) - postcss-normalize: 10.0.1(browserslist@4.21.4)(postcss@8.4.17) - postcss-preset-env: 7.8.2(postcss@8.4.17) + postcss: 8.4.24 + postcss-flexbugs-fixes: 5.0.2(postcss@8.4.24) + postcss-loader: 6.2.1(postcss@8.4.24)(webpack@5.74.0) + postcss-normalize: 10.0.1(browserslist@4.21.4)(postcss@8.4.24) + postcss-preset-env: 7.8.2(postcss@8.4.24) prompts: 2.4.2 react: 17.0.2 react-app-polyfill: 3.0.0 @@ -13662,7 +13958,7 @@ packages: semver: 7.3.8 source-map-loader: 3.0.1(webpack@5.74.0) style-loader: 3.3.1(webpack@5.74.0) - tailwindcss: 3.2.6(postcss@8.4.17)(ts-node@10.9.1) + tailwindcss: 3.2.6(postcss@8.4.24)(ts-node@10.9.1) terser-webpack-plugin: 5.3.6(webpack@5.74.0) typescript: 4.8.4 webpack: 5.74.0 @@ -13803,7 +14099,6 @@ packages: /regenerator-runtime@0.13.11: resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==} - dev: false /regenerator-runtime@0.13.9: resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==} @@ -13811,7 +14106,7 @@ packages: /regenerator-transform@0.15.0: resolution: {integrity: sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==} dependencies: - '@babel/runtime': 7.19.0 + '@babel/runtime': 7.22.5 dev: false /regex-parser@2.2.11: @@ -14628,14 +14923,14 @@ packages: tslib: 2.4.0 dev: false - /stylehacks@5.1.0(postcss@8.4.17): + /stylehacks@5.1.0(postcss@8.4.24): resolution: {integrity: sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - postcss: 8.4.17 + postcss: 8.4.24 postcss-selector-parser: 6.0.11 dev: false @@ -14711,40 +15006,6 @@ packages: /symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} - /tailwindcss@3.2.6(postcss@8.4.17)(ts-node@10.9.1): - resolution: {integrity: sha512-BfgQWZrtqowOQMC2bwaSNe7xcIjdDEgixWGYOd6AL0CbKHJlvhfdbINeAW76l1sO+1ov/MJ93ODJ9yluRituIw==} - engines: {node: '>=12.13.0'} - hasBin: true - peerDependencies: - postcss: ^8.0.9 - dependencies: - arg: 5.0.2 - chokidar: 3.5.3 - color-name: 1.1.4 - detective: 5.2.1 - didyoumean: 1.2.2 - dlv: 1.1.3 - fast-glob: 3.2.12 - glob-parent: 6.0.2 - is-glob: 4.0.3 - lilconfig: 2.0.6 - micromatch: 4.0.5 - normalize-path: 3.0.0 - object-hash: 3.0.0 - picocolors: 1.0.0 - postcss: 8.4.17 - postcss-import: 14.1.0(postcss@8.4.17) - postcss-js: 4.0.0(postcss@8.4.17) - postcss-load-config: 3.1.4(postcss@8.4.17)(ts-node@10.9.1) - postcss-nested: 6.0.0(postcss@8.4.17) - postcss-selector-parser: 6.0.11 - postcss-value-parser: 4.2.0 - quick-lru: 5.1.1 - resolve: 1.22.1 - transitivePeerDependencies: - - ts-node - dev: false - /tailwindcss@3.2.6(postcss@8.4.24)(ts-node@10.9.1): resolution: {integrity: sha512-BfgQWZrtqowOQMC2bwaSNe7xcIjdDEgixWGYOd6AL0CbKHJlvhfdbINeAW76l1sO+1ov/MJ93ODJ9yluRituIw==} engines: {node: '>=12.13.0'} @@ -14768,7 +15029,7 @@ packages: picocolors: 1.0.0 postcss: 8.4.24 postcss-import: 14.1.0(postcss@8.4.24) - postcss-js: 4.0.0(postcss@8.4.24) + postcss-js: 4.0.1(postcss@8.4.24) postcss-load-config: 3.1.4(postcss@8.4.24)(ts-node@10.9.1) postcss-nested: 6.0.0(postcss@8.4.24) postcss-selector-parser: 6.0.11 @@ -14777,7 +15038,6 @@ packages: resolve: 1.22.1 transitivePeerDependencies: - ts-node - dev: true /tapable@1.1.3: resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==} @@ -15744,7 +16004,7 @@ packages: '@apideck/better-ajv-errors': 0.3.6(ajv@8.11.0) '@babel/core': 7.19.3 '@babel/preset-env': 7.19.3(@babel/core@7.19.3) - '@babel/runtime': 7.19.0 + '@babel/runtime': 7.22.5 '@rollup/plugin-babel': 5.3.1(@babel/core@7.19.3)(rollup@2.79.1) '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1) '@rollup/plugin-replace': 2.4.2(rollup@2.79.1) diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 8ba8eba2f..40086bdad 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -2,7 +2,5 @@ packages: - "app" - "api" - "shared" - # all packages in direct subdirs of packages/ - # - "packages/*" # exclude packages that are inside test directories - "!**/test/**" From f8555cff21d7e78c2e27fd24174754917a0ce0c1 Mon Sep 17 00:00:00 2001 From: Rob Gordon Date: Fri, 7 Jul 2023 08:03:19 -0400 Subject: [PATCH 2/2] chore(version): minor --- app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/package.json b/app/package.json index 434d39389..7ae485bf7 100644 --- a/app/package.json +++ b/app/package.json @@ -1,6 +1,6 @@ { "name": "app", - "version": "1.35.4", + "version": "1.36.0", "main": "module/module.js", "license": "MIT", "scripts": {