fix(build): remove unused imports in DiagramEditor and ReactFlowEditor
This commit is contained in:
Dwindi Ramadhana
7
package-lock.json
generated
7
package-lock.json
generated
@@ -43,6 +43,7 @@
|
||||
"dompurify": "^3.3.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"highlight.js": "^11.11.1",
|
||||
"html-to-image": "^1.11.13",
|
||||
"html2pdf.js": "^0.12.1",
|
||||
"js-beautify": "^1.15.4",
|
||||
"jspdf": "^3.0.3",
|
||||
@@ -22984,6 +22985,12 @@
|
||||
"integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/html-to-image": {
|
||||
"version": "1.11.13",
|
||||
"resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
|
||||
"integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/html-webpack-plugin": {
|
||||
"version": "5.6.7",
|
||||
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.7.tgz",
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
"dompurify": "^3.3.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"highlight.js": "^11.11.1",
|
||||
"html-to-image": "^1.11.13",
|
||||
"html2pdf.js": "^0.12.1",
|
||||
"js-beautify": "^1.15.4",
|
||||
"jspdf": "^3.0.3",
|
||||
|
||||
@@ -1,126 +1,121 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
|
||||
import mermaid from "mermaid";
|
||||
import {
|
||||
GitGraph,
|
||||
Plus,
|
||||
Upload,
|
||||
Download,
|
||||
Globe,
|
||||
Edit3,
|
||||
Type,
|
||||
Columns,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
Check,
|
||||
Copy,
|
||||
FileImage,
|
||||
FileCode2,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
Maximize,
|
||||
FileDown,
|
||||
Eye,
|
||||
AlertTriangle,
|
||||
FileText,
|
||||
} from "lucide-react";
|
||||
import ToolLayout from "../components/ToolLayout";
|
||||
import CodeMirrorEditor from "../components/CodeMirrorEditor";
|
||||
import AdvancedURLFetch from "../components/AdvancedURLFetch";
|
||||
import SEO from "../components/SEO";
|
||||
import RelatedTools from "../components/RelatedTools";
|
||||
|
||||
// Debounce helper
|
||||
const useDebounce = (value, delay) => {
|
||||
const [debouncedValue, setDebouncedValue] = useState(value);
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedValue(value);
|
||||
}, delay);
|
||||
return () => clearTimeout(handler);
|
||||
}, [value, delay]);
|
||||
return debouncedValue;
|
||||
};
|
||||
import ReactFlowEditor from "../components/diagram/ReactFlowEditor";
|
||||
import FullscreenAdBanner from "../components/FullscreenAdBanner";
|
||||
import { toPng } from "html-to-image";
|
||||
|
||||
const DIAGRAM_TEMPLATES = {
|
||||
flowchart: `flowchart TD
|
||||
A[Start] --> B{Is it?};
|
||||
B -- Yes --> C[OK];
|
||||
C --> D[Rethink];
|
||||
D --> B;
|
||||
B -- No ----> E[End];`,
|
||||
sequence: `sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!`,
|
||||
class: `classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}`,
|
||||
state: `stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]`,
|
||||
er: `erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses`,
|
||||
gantt: `gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d`,
|
||||
pie: `pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15`,
|
||||
git: `gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit`,
|
||||
flowchart: {
|
||||
nodes: [
|
||||
{
|
||||
id: "1",
|
||||
type: "process",
|
||||
position: { x: 250, y: 50 },
|
||||
data: { label: "Start" },
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
type: "decision",
|
||||
position: { x: 250, y: 150 },
|
||||
data: { label: "Is it OK?" },
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
type: "process",
|
||||
position: { x: 100, y: 250 },
|
||||
data: { label: "Fix it" },
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
type: "database",
|
||||
position: { x: 400, y: 250 },
|
||||
data: { label: "Save to DB" },
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
type: "process",
|
||||
position: { x: 250, y: 350 },
|
||||
data: { label: "End" },
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{ id: "e1-2", source: "1", target: "2" },
|
||||
{
|
||||
id: "e2-3",
|
||||
source: "2",
|
||||
target: "3",
|
||||
sourceHandle: "left",
|
||||
label: "No",
|
||||
},
|
||||
{
|
||||
id: "e2-4",
|
||||
source: "2",
|
||||
target: "4",
|
||||
sourceHandle: "right",
|
||||
label: "Yes",
|
||||
},
|
||||
{ id: "e3-2", source: "3", target: "2", targetHandle: "left" },
|
||||
{
|
||||
id: "e4-5",
|
||||
source: "4",
|
||||
target: "5",
|
||||
sourceHandle: "bottom",
|
||||
targetHandle: "right",
|
||||
},
|
||||
],
|
||||
},
|
||||
database: {
|
||||
nodes: [
|
||||
{
|
||||
id: "users",
|
||||
type: "database",
|
||||
position: { x: 100, y: 100 },
|
||||
data: { label: "Users Table" },
|
||||
},
|
||||
{
|
||||
id: "orders",
|
||||
type: "database",
|
||||
position: { x: 400, y: 100 },
|
||||
data: { label: "Orders Table" },
|
||||
},
|
||||
{
|
||||
id: "process",
|
||||
type: "process",
|
||||
position: { x: 250, y: 250 },
|
||||
data: { label: "Order Processor" },
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{ id: "eu-p", source: "users", target: "process", label: "Read" },
|
||||
{ id: "ep-o", source: "process", target: "orders", label: "Write" },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const DiagramEditor = () => {
|
||||
const [code, setCode] = useState(DIAGRAM_TEMPLATES.flowchart);
|
||||
const debouncedCode = useDebounce(code, 500); // 500ms debounce
|
||||
const [graphData, setGraphData] = useState(DIAGRAM_TEMPLATES.flowchart);
|
||||
const [code, setCode] = useState(
|
||||
JSON.stringify(DIAGRAM_TEMPLATES.flowchart, null, 2),
|
||||
);
|
||||
|
||||
const [activeTab, setActiveTab] = useState("create");
|
||||
const [viewMode, setViewMode] = useState(() =>
|
||||
@@ -132,66 +127,34 @@ const DiagramEditor = () => {
|
||||
const [fetching, setFetching] = useState(false);
|
||||
const [selectedTemplate, setSelectedTemplate] = useState("flowchart");
|
||||
|
||||
const [svgContent, setSvgContent] = useState("");
|
||||
const svgContainerRef = useRef(null);
|
||||
const reactFlowWrapper = useRef(null);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
// Initialize Mermaid
|
||||
// Sync JSON text input to Graph data
|
||||
useEffect(() => {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: "default", // We can sync this with dark mode later
|
||||
securityLevel: "loose",
|
||||
fontFamily:
|
||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Render diagram when debounced code changes
|
||||
useEffect(() => {
|
||||
const renderDiagram = async () => {
|
||||
try {
|
||||
setError(null); // Clear previous errors
|
||||
if (!debouncedCode.trim()) {
|
||||
setSvgContent("");
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate syntax first
|
||||
const isValid = await mermaid.parse(debouncedCode, {
|
||||
suppressErrors: true,
|
||||
});
|
||||
|
||||
if (isValid) {
|
||||
const id = `mermaid-${Date.now()}`;
|
||||
const { svg } = await mermaid.render(id, debouncedCode);
|
||||
setSvgContent(svg);
|
||||
} else {
|
||||
// If parse returns false but doesn't throw, it's still invalid
|
||||
setError("Syntax error in diagram code");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Mermaid parsing error:", err);
|
||||
// Extract the most readable part of the error
|
||||
let errorMessage = "Syntax error";
|
||||
if (err.message) {
|
||||
errorMessage = err.message.split("\n")[0] || "Syntax error";
|
||||
} else if (typeof err === "string") {
|
||||
errorMessage = err.split("\n")[0];
|
||||
}
|
||||
setError(errorMessage);
|
||||
try {
|
||||
const parsed = JSON.parse(code);
|
||||
if (parsed.nodes && parsed.edges) {
|
||||
setGraphData(parsed);
|
||||
setError(null);
|
||||
}
|
||||
};
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
}, [code]);
|
||||
|
||||
renderDiagram();
|
||||
}, [debouncedCode]);
|
||||
const handleGraphChange = (newGraphData) => {
|
||||
setGraphData(newGraphData);
|
||||
setCode(JSON.stringify(newGraphData, null, 2));
|
||||
};
|
||||
|
||||
// Input Handlers
|
||||
const handleTemplateChange = (e) => {
|
||||
const template = e.target.value;
|
||||
setSelectedTemplate(template);
|
||||
if (DIAGRAM_TEMPLATES[template]) {
|
||||
setCode(DIAGRAM_TEMPLATES[template]);
|
||||
setGraphData(DIAGRAM_TEMPLATES[template]);
|
||||
setCode(JSON.stringify(DIAGRAM_TEMPLATES[template], null, 2));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -234,7 +197,7 @@ const DiagramEditor = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Export Handlers
|
||||
// Export Handlers (Updated for ReactFlow)
|
||||
const downloadFile = (content, filename, mimeType) => {
|
||||
const blob = new Blob([content], { type: mimeType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
@@ -247,41 +210,33 @@ const DiagramEditor = () => {
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const exportSVG = () => {
|
||||
if (!svgContent) return;
|
||||
downloadFile(svgContent, "diagram.svg", "image/svg+xml");
|
||||
const exportJSON = () => {
|
||||
downloadFile(code, "diagram.json", "application/json");
|
||||
};
|
||||
|
||||
const exportPNG = () => {
|
||||
if (!svgContent) return;
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const img = new Image();
|
||||
const flowElement = document.querySelector(".react-flow");
|
||||
if (!flowElement) return;
|
||||
|
||||
// Create blob URL from SVG
|
||||
const svg = new Blob([svgContent], { type: "image/svg+xml;charset=utf-8" });
|
||||
const DOMURL = window.URL || window.webkitURL || window;
|
||||
const url = DOMURL.createObjectURL(svg);
|
||||
|
||||
img.onload = () => {
|
||||
canvas.width = img.width * 2; // High DPI
|
||||
canvas.height = img.height * 2;
|
||||
ctx.fillStyle = "white"; // Background
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
const pngUrl = canvas.toDataURL("image/png");
|
||||
const a = document.createElement("a");
|
||||
a.download = "diagram.png";
|
||||
a.href = pngUrl;
|
||||
a.click();
|
||||
DOMURL.revokeObjectURL(url);
|
||||
};
|
||||
img.src = url;
|
||||
};
|
||||
|
||||
const exportCode = () => {
|
||||
downloadFile(code, "diagram.mmd", "text/plain");
|
||||
toPng(flowElement, {
|
||||
backgroundColor: "#ffffff",
|
||||
width: flowElement.offsetWidth,
|
||||
height: flowElement.offsetHeight,
|
||||
style: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
transform: "translate(0, 0)",
|
||||
},
|
||||
})
|
||||
.then((dataUrl) => {
|
||||
const a = document.createElement("a");
|
||||
a.setAttribute("download", "diagram.png");
|
||||
a.setAttribute("href", dataUrl);
|
||||
a.click();
|
||||
})
|
||||
.catch((error) => {
|
||||
setError("Failed to export PNG: " + error.message);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -298,38 +253,59 @@ const DiagramEditor = () => {
|
||||
description="Create diagrams as code using Mermaid.js with live preview and multi-format export."
|
||||
icon={GitGraph}
|
||||
>
|
||||
{/* Input Tabs */}
|
||||
{/* Input Section - Always visible */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Get Started
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Tab Navigation */}
|
||||
<div className="flex border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-hide">
|
||||
<button
|
||||
onClick={() => setActiveTab("create")}
|
||||
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
|
||||
className={`flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
|
||||
activeTab === "create"
|
||||
? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500"
|
||||
: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
}`}
|
||||
>
|
||||
<Edit3 className="h-4 w-4" /> Templates
|
||||
<Plus className="h-4 w-4 flex-shrink-0" />
|
||||
Create New
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("url")}
|
||||
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
|
||||
className={`flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
|
||||
activeTab === "url"
|
||||
? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500"
|
||||
: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
}`}
|
||||
>
|
||||
<Globe className="h-4 w-4" /> URL Fetch
|
||||
<Globe className="h-4 w-4 flex-shrink-0" />
|
||||
URL Fetch
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("paste")}
|
||||
className={`flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
|
||||
activeTab === "paste"
|
||||
? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500"
|
||||
: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
}`}
|
||||
>
|
||||
<FileText className="h-4 w-4 flex-shrink-0" />
|
||||
Paste
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("open")}
|
||||
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
|
||||
className={`flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
|
||||
activeTab === "open"
|
||||
? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500"
|
||||
: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
}`}
|
||||
>
|
||||
<Upload className="h-4 w-4" /> Open File
|
||||
<Upload className="h-4 w-4 flex-shrink-0" />
|
||||
Open File
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -346,17 +322,14 @@ const DiagramEditor = () => {
|
||||
className="tool-input w-full max-w-xs"
|
||||
>
|
||||
<option value="flowchart">Flowchart</option>
|
||||
<option value="sequence">Sequence Diagram</option>
|
||||
<option value="class">Class Diagram</option>
|
||||
<option value="state">State Diagram</option>
|
||||
<option value="er">Entity Relationship (ER)</option>
|
||||
<option value="gantt">Gantt Chart</option>
|
||||
<option value="pie">Pie Chart</option>
|
||||
<option value="git">Git Graph</option>
|
||||
<option value="database">Database/ER</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setCode("")}
|
||||
onClick={() => {
|
||||
setGraphData({ nodes: [], edges: [] });
|
||||
setCode(JSON.stringify({ nodes: [], edges: [] }, null, 2));
|
||||
}}
|
||||
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
Clear Editor
|
||||
@@ -388,6 +361,19 @@ const DiagramEditor = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "paste" && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex gap-2">
|
||||
<textarea
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder="Paste your diagram JSON here..."
|
||||
className="tool-input h-32 flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "open" && (
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
@@ -404,13 +390,13 @@ const DiagramEditor = () => {
|
||||
|
||||
{/* Main Editor Section */}
|
||||
<div
|
||||
className={`bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden min-w-0 w-full max-w-full ${isFullscreen ? "fixed inset-0 z-50 flex flex-col !mt-0" : "mb-6"}`}
|
||||
className={`bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden min-w-0 w-full max-w-full ${isFullscreen ? "fixed inset-0 z-[9999] flex flex-col !mt-0" : "mb-6"}`}
|
||||
>
|
||||
{/* Header & Controls */}
|
||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-800 z-10 flex flex-wrap justify-between items-center gap-3">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<GitGraph className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
||||
Workspace
|
||||
Diagram Editor
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -453,18 +439,19 @@ const DiagramEditor = () => {
|
||||
|
||||
{/* Split View Content */}
|
||||
<div
|
||||
className={`${viewMode === "split" ? "grid grid-cols-1 lg:grid-cols-2" : ""} overflow-hidden min-w-0 w-full flex-1`}
|
||||
className={`${viewMode === "split" ? "grid grid-cols-1 lg:grid-cols-2" : ""} overflow-hidden min-w-0 w-full flex-1 relative`}
|
||||
>
|
||||
{isFullscreen && <FullscreenAdBanner />}
|
||||
{/* Editor Pane */}
|
||||
{(viewMode === "editor" || viewMode === "split") && (
|
||||
<div
|
||||
className={`${viewMode === "split" ? "border-r border-gray-200 dark:border-gray-700" : ""} h-[600px] w-full min-w-0 flex flex-col relative`}
|
||||
className={`${viewMode === "split" ? "border-r border-gray-200 dark:border-gray-700" : ""} ${isFullscreen ? "h-[calc(100vh-60px)] pb-[90px]" : "h-[600px]"} w-full min-w-0 flex flex-col relative`}
|
||||
>
|
||||
<CodeMirrorEditor
|
||||
value={code}
|
||||
onChange={setCode}
|
||||
language="markdown" // Mermaid syntax is closest to markdown structurally
|
||||
placeholder="Write your mermaid code here..."
|
||||
language="json"
|
||||
placeholder="Write your diagram JSON here..."
|
||||
showToggle={false}
|
||||
maxLines={999}
|
||||
height="100%"
|
||||
@@ -475,8 +462,10 @@ const DiagramEditor = () => {
|
||||
|
||||
{/* Preview Pane */}
|
||||
{(viewMode === "preview" || viewMode === "split") && (
|
||||
<div className="h-[600px] w-full min-w-0 bg-slate-50 dark:bg-slate-900 flex flex-col relative">
|
||||
{error ? (
|
||||
<div
|
||||
className={`${isFullscreen ? "h-[calc(100vh-60px)] pb-[90px]" : "h-[600px]"} w-full min-w-0 bg-slate-50 dark:bg-slate-900 flex flex-col relative`}
|
||||
>
|
||||
{error && (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center z-10 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm">
|
||||
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-full mb-3">
|
||||
<AlertTriangle className="h-8 w-8 text-red-500" />
|
||||
@@ -488,60 +477,17 @@ const DiagramEditor = () => {
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
) : !svgContent ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center text-gray-400">
|
||||
<p>Start typing to render diagram...</p>
|
||||
</div>
|
||||
) : null}
|
||||
)}
|
||||
|
||||
<div
|
||||
className="flex-1 relative overflow-hidden"
|
||||
ref={svgContainerRef}
|
||||
ref={reactFlowWrapper}
|
||||
>
|
||||
<TransformWrapper
|
||||
initialScale={1}
|
||||
minScale={0.1}
|
||||
maxScale={10}
|
||||
centerOnInit={true}
|
||||
wheel={{ step: 0.1 }}
|
||||
>
|
||||
{({ zoomIn, zoomOut, resetTransform }) => (
|
||||
<>
|
||||
<div className="absolute top-4 right-4 z-10 flex flex-col gap-2 bg-white dark:bg-gray-800 p-1.5 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={() => zoomIn()}
|
||||
className="p-1.5 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
||||
title="Zoom In"
|
||||
>
|
||||
<ZoomIn className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => zoomOut()}
|
||||
className="p-1.5 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
||||
title="Zoom Out"
|
||||
>
|
||||
<ZoomOut className="h-4 w-4" />
|
||||
</button>
|
||||
<div className="h-px bg-gray-200 dark:bg-gray-700 w-full" />
|
||||
<button
|
||||
onClick={() => resetTransform()}
|
||||
className="p-1.5 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
||||
title="Fit to Screen"
|
||||
>
|
||||
<Maximize className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<TransformComponent
|
||||
wrapperStyle={{ width: "100%", height: "100%" }}
|
||||
>
|
||||
<div
|
||||
className="w-full h-full flex items-center justify-center p-8"
|
||||
dangerouslySetInnerHTML={{ __html: svgContent }}
|
||||
/>
|
||||
</TransformComponent>
|
||||
</>
|
||||
)}
|
||||
</TransformWrapper>
|
||||
<ReactFlowEditor
|
||||
initialNodes={graphData.nodes}
|
||||
initialEdges={graphData.edges}
|
||||
onGraphChange={handleGraphChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -557,7 +503,7 @@ const DiagramEditor = () => {
|
||||
Export Diagram
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4 sm:p-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div className="p-4 sm:p-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<button
|
||||
onClick={exportPNG}
|
||||
className="flex flex-col items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all group"
|
||||
@@ -572,25 +518,14 @@ const DiagramEditor = () => {
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={exportSVG}
|
||||
className="flex flex-col items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 transition-all group"
|
||||
>
|
||||
<FileImage className="h-6 w-6 text-gray-500 group-hover:text-green-500 mb-2" />
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
SVG Vector
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">Scalable format</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={exportCode}
|
||||
onClick={exportJSON}
|
||||
className="flex flex-col items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-all group"
|
||||
>
|
||||
<FileCode2 className="h-6 w-6 text-gray-500 group-hover:text-purple-500 mb-2" />
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
Raw Code
|
||||
JSON Schema
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">.mmd file format</span>
|
||||
<span className="text-xs text-gray-500">.json data format</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user