|
|
|
@@ -91,6 +91,11 @@ const initMermaid = () => { |
|
|
|
numberSectionStyles: 4, |
|
|
|
axisFormat: '%Y-%m-%d', |
|
|
|
}, |
|
|
|
mindmap: { |
|
|
|
useMaxWidth: true, |
|
|
|
padding: 10, |
|
|
|
diagramPadding: 20, |
|
|
|
}, |
|
|
|
maxTextSize: 50000, |
|
|
|
}) |
|
|
|
isMermaidInitialized = true |
|
|
|
@@ -289,11 +294,12 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
try { |
|
|
|
let finalCode: string |
|
|
|
|
|
|
|
// Check if it's a gantt chart |
|
|
|
// Check if it's a gantt chart or mindmap |
|
|
|
const isGanttChart = primitiveCode.trim().startsWith('gantt') |
|
|
|
const isMindMap = primitiveCode.trim().startsWith('mindmap') |
|
|
|
|
|
|
|
if (isGanttChart) { |
|
|
|
// For gantt charts, ensure each task is on its own line |
|
|
|
if (isGanttChart || isMindMap) { |
|
|
|
// For gantt charts and mindmaps, ensure each task is on its own line |
|
|
|
// and preserve exact whitespace/format |
|
|
|
finalCode = primitiveCode.trim() |
|
|
|
} |
|
|
|
@@ -352,6 +358,11 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
numberSectionStyles: 4, |
|
|
|
axisFormat: '%Y-%m-%d', |
|
|
|
}, |
|
|
|
mindmap: { |
|
|
|
useMaxWidth: true, |
|
|
|
padding: 10, |
|
|
|
diagramPadding: 20, |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
if (look === 'classic') { |
|
|
|
@@ -476,15 +487,15 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
'bg-white': currentTheme === Theme.light, |
|
|
|
'bg-slate-900': currentTheme === Theme.dark, |
|
|
|
}), |
|
|
|
mermaidDiv: cn('mermaid relative h-auto w-full cursor-pointer', { |
|
|
|
mermaidDiv: cn('mermaid cursor-pointer h-auto w-full relative', { |
|
|
|
'bg-white': currentTheme === Theme.light, |
|
|
|
'bg-slate-900': currentTheme === Theme.dark, |
|
|
|
}), |
|
|
|
errorMessage: cn('px-[26px] py-4', { |
|
|
|
errorMessage: cn('py-4 px-[26px]', { |
|
|
|
'text-red-500': currentTheme === Theme.light, |
|
|
|
'text-red-400': currentTheme === Theme.dark, |
|
|
|
}), |
|
|
|
errorIcon: cn('h-6 w-6', { |
|
|
|
errorIcon: cn('w-6 h-6', { |
|
|
|
'text-red-500': currentTheme === Theme.light, |
|
|
|
'text-red-400': currentTheme === Theme.dark, |
|
|
|
}), |
|
|
|
@@ -492,7 +503,7 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
'text-gray-700': currentTheme === Theme.light, |
|
|
|
'text-gray-300': currentTheme === Theme.dark, |
|
|
|
}), |
|
|
|
themeToggle: cn('flex h-10 w-10 items-center justify-center rounded-full shadow-md backdrop-blur-sm transition-all duration-300', { |
|
|
|
themeToggle: cn('flex items-center justify-center w-10 h-10 rounded-full transition-all duration-300 shadow-md backdrop-blur-sm', { |
|
|
|
'bg-white/80 hover:bg-white hover:shadow-lg text-gray-700 border border-gray-200': currentTheme === Theme.light, |
|
|
|
'bg-slate-800/80 hover:bg-slate-700 hover:shadow-lg text-yellow-300 border border-slate-600': currentTheme === Theme.dark, |
|
|
|
}), |
|
|
|
@@ -501,7 +512,7 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
// Style classes for look options |
|
|
|
const getLookButtonClass = (lookType: 'classic' | 'handDrawn') => { |
|
|
|
return cn( |
|
|
|
'system-sm-medium mb-4 flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary', |
|
|
|
'flex items-center justify-center mb-4 w-[calc((100%-8px)/2)] h-8 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer system-sm-medium text-text-secondary', |
|
|
|
look === lookType && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary', |
|
|
|
currentTheme === Theme.dark && 'border-slate-600 bg-slate-800 text-slate-300', |
|
|
|
look === lookType && currentTheme === Theme.dark && 'border-blue-500 bg-slate-700 text-white', |
|
|
|
@@ -512,7 +523,7 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
<div ref={ref as React.RefObject<HTMLDivElement>} className={themeClasses.container}> |
|
|
|
<div className={themeClasses.segmented}> |
|
|
|
<div className="msh-segmented-group"> |
|
|
|
<label className="msh-segmented-item m-2 flex w-[200px] items-center space-x-1"> |
|
|
|
<label className="msh-segmented-item flex items-center space-x-1 m-2 w-[200px]"> |
|
|
|
<div |
|
|
|
key='classic' |
|
|
|
className={getLookButtonClass('classic')} |
|
|
|
@@ -534,7 +545,7 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
<div ref={containerRef} style={{ position: 'absolute', visibility: 'hidden', height: 0, overflow: 'hidden' }} /> |
|
|
|
|
|
|
|
{isLoading && !svgCode && ( |
|
|
|
<div className='px-[26px] py-4'> |
|
|
|
<div className='py-4 px-[26px]'> |
|
|
|
<LoadingAnim type='text'/> |
|
|
|
{!isCodeComplete && ( |
|
|
|
<div className="mt-2 text-sm text-gray-500"> |
|
|
|
@@ -546,7 +557,7 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
|
|
|
|
{svgCode && ( |
|
|
|
<div className={themeClasses.mermaidDiv} style={{ objectFit: 'cover' }} onClick={() => setImagePreviewUrl(svgCode)}> |
|
|
|
<div className="absolute bottom-2 left-2 z-[100]"> |
|
|
|
<div className="absolute left-2 bottom-2 z-[100]"> |
|
|
|
<button |
|
|
|
onClick={(e) => { |
|
|
|
e.stopPropagation() |