Skip to content

GitLab

Commit 75e8e1f0 authored by Clark Lin's avatar Clark Lin
Browse files

optimized layout for TextToMermaid.

parent a1d0ba42
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 75e8e1f0
This diff is collapsed.
package.json
View file @ 75e8e1f0
......@@ -15,12 +15,12 @@
"mermaid": "^11.9.0",
"svg2pdf.js": "^2.5.0",
"vite-plugin-vuetify": "^2.1.1",
"vue": "^3.5.17",
"vue": "^3.5.18",
"vue-router": "^4.5.1",
"vuetify": "^3.9.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.0",
"vite": "^7.0.4"
"vite": "^7.0.6"
}
}
src/App.vue
View file @ 75e8e1f0
......@@ -21,7 +21,7 @@ import Sidebar from './components/Sidebar.vue'
.main-content {
flex: 1;
/* margin-left: 220px; */
padding: 40px;
padding: 0;
}
* {
box-sizing: border-box;
......
src/components/TextToMermaid.vue
View file @ 75e8e1f0
<template>
<div class="text-to-mermaid">
<h1 class="page-title">Text to Mermaid Converter</h1>
<div class="converter-container">
<!-- Input Section -->
<div class="input-section">
<h3>Input Text</h3>
<textarea
v-model="inputText"
@input="handleInput"
placeholder="Enter your text here to convert to Mermaid diagram..."
class="text-input"
rows="10"
></textarea>
<div class="button-group">
<button @click="convertNow" class="convert-btn" :disabled="isProcessing">
{{ isProcessing ? 'Converting...' : 'Convert Now' }}
</button>
<button @click="clearAll" class="clear-btn">Clear All</button>
</div>
<!-- Status Indicator -->
<div class="status" :class="currentState">
<span v-if="currentState === 'typing'">Typing...</span>
<span v-else-if="currentState === 'processing'">Converting...</span>
<span v-else-if="currentState === 'ready'">Ready</span>
<span v-else-if="currentState === 'error'">Error occurred</span>
</div>
</div>
<!-- Output Section -->
<div class="output-section">
<h3>Mermaid Diagram</h3>
<!-- Diagram Section -->
<div class="diagram-section">
<div class="diagram-header">
<h4>Visual Diagram:</h4>
<!-- Diagram Controls -->
<div class="diagram-controls">
<div class="zoom-controls">
<label for="zoom-slider" class="zoom-label">Zoom:</label>
<input
id="zoom-slider"
type="range"
v-model="zoomLevel"
@input="updateZoom"
min="0.5"
max="3"
step="0.1"
class="zoom-slider"
/>
<span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
<button @click="resetZoom" class="zoom-btn reset-btn">Reset</button>
</div>
<button @click="toggleFullscreen" class="fullscreen-btn" v-if="mermaidCode">
Fullscreen
</button>
</div>
<!-- <div class="text-to-mermaid"> -->
<v-container fluid class="text-to-mermaid">
<!-- <h1 class="page-title">Text to Mermaid Converter</h1> -->
<v-row>
<v-col cols="12">
<h1 class="text-h4 text-center font-weight-bold mx-3 my-3">Text to Mermaid Converter</h1>
</v-col>
</v-row>
<v-divider :thickness="1" color="white" class="border-opacity-100"></v-divider>
<!-- <div class="converter-container"> -->
<v-row class="mx-3 my-3">
<v-col cols="12" md="4" class="pa-3">
<!-- Input Section -->
<div class="input-section">
<h3>Input Text</h3>
<v-textarea
v-model="inputText"
@input="handleInput"
placeholder="Enter your text here to convert to Mermaid diagram..."
class="text-input"
rows="10"
></v-textarea>
<div class="button-group">
<button @click="convertNow" class="convert-btn" :disabled="isProcessing">
{{ isProcessing ? 'Converting...' : 'Convert Now' }}
</button>
<button @click="clearAll" class="clear-btn">Clear All</button>
</div>
<div class="mermaid-container" ref="mermaidContainerWrapper">
<div v-if="mermaidCode" class="mermaid-diagram" ref="mermaidContainer" :style="{ transform: `scale(${zoomLevel})` }"></div>
<div v-else class="placeholder">
<p>Your Mermaid diagram will appear here</p>
</div>
<!-- Status Indicator -->
<div class="status" :class="currentState">
<span v-if="currentState === 'typing'">Typing...</span>
<span v-else-if="currentState === 'processing'">Converting...</span>
<span v-else-if="currentState === 'ready'">Ready</span>
<span v-else-if="currentState === 'error'">Error occurred</span>
</div>
</div>
<!-- Fullscreen Modal -->
<div v-if="isFullscreen" class="fullscreen-modal" @click="closeFullscreen">
<div class="modal-content" @click.stop>
<div class="modal-header">
<h3>Mermaid Diagram - Fullscreen View</h3>
<div class="modal-controls">
</v-col>
<v-col cols="12" md="8" class="pa-3">
<!-- Output Section -->
<div class="output-section">
<h3>Mermaid Diagram</h3>
<!-- Diagram Section -->
<div class="diagram-section">
<div class="diagram-header">
<h4>Visual Diagram:</h4>
<!-- Diagram Controls -->
<div class="diagram-controls">
<div class="zoom-controls">
<label for="fullscreen-zoom-slider" class="zoom-label">Zoom:</label>
<label for="zoom-slider" class="zoom-label">Zoom:</label>
<input
id="fullscreen-zoom-slider"
id="zoom-slider"
type="range"
v-model="fullscreenZoomLevel"
@input="updateFullscreenZoom"
v-model="zoomLevel"
@input="updateZoom"
min="0.5"
max="3"
step="0.1"
class="zoom-slider"
/>
<span class="zoom-level">{{ Math.round(fullscreenZoomLevel * 100) }}%</span>
<button @click="resetFullscreenZoom" class="zoom-btn reset-btn">Reset</button>
<span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
<button @click="resetZoom" class="zoom-btn reset-btn">Reset</button>
</div>
<!-- Single Download Button -->
<button @click="downloadDiagram" class="download-btn" v-if="mermaidCode">
Download
<button @click="toggleFullscreen" class="fullscreen-btn" v-if="mermaidCode">
Fullscreen
</button>
<button @click="closeFullscreen" class="close-btn">&times;</button>
</div>
</div>
<div class="modal-body"
@mousedown="startDrag"
@mousemove="onDrag"
@mouseup="stopDrag"
@mouseleave="stopDrag"
@wheel="onWheel"
@contextmenu.prevent> <!-- Prevent right-click context menu -->
<div class="fullscreen-diagram"
ref="fullscreenDiagram"
:style="{
transform: `scale(${fullscreenZoomLevel}) translate(${dragOffset.x}px, ${dragOffset.y}px)`,
cursor: isDragging ? 'grabbing' : 'grab'
}">
<div class="mermaid-container" ref="mermaidContainerWrapper">
<div v-if="mermaidCode" class="mermaid-diagram" ref="mermaidContainer" :style="{ transform: `scale(${zoomLevel})` }"></div>
<div v-else class="placeholder">
<p>Your Mermaid diagram will appear here</p>
</div>
</div>
</div>
<!-- Fullscreen Modal -->
<div v-if="isFullscreen" class="fullscreen-modal" @click="closeFullscreen">
<div class="modal-content" @click.stop>
<div class="modal-header">
<h3>Mermaid Diagram - Fullscreen View</h3>
<div class="modal-controls">
<div class="zoom-controls">
<label for="fullscreen-zoom-slider" class="zoom-label">Zoom:</label>
<input
id="fullscreen-zoom-slider"
type="range"
v-model="fullscreenZoomLevel"
@input="updateFullscreenZoom"
min="0.5"
max="3"
step="0.1"
class="zoom-slider"
/>
<span class="zoom-level">{{ Math.round(fullscreenZoomLevel * 100) }}%</span>
<button @click="resetFullscreenZoom" class="zoom-btn reset-btn">Reset</button>
</div>
<!-- Single Download Button -->
<button @click="downloadDiagram" class="download-btn" v-if="mermaidCode">
Download
</button>
<button @click="closeFullscreen" class="close-btn">&times;</button>
</div>
</div>
<div class="modal-body"
@mousedown="startDrag"
@mousemove="onDrag"
@mouseup="stopDrag"
@mouseleave="stopDrag"
@wheel="onWheel"
@contextmenu.prevent> <!-- Prevent right-click context menu -->
<div class="fullscreen-diagram"
ref="fullscreenDiagram"
:style="{
transform: `scale(${fullscreenZoomLevel}) translate(${dragOffset.x}px, ${dragOffset.y}px)`,
cursor: isDragging ? 'grabbing' : 'grab'
}">
</div>
</div>
</div>
</div>
</div>
<!-- Generated Code Section (Now Second) -->
<div v-if="mermaidCode" class="code-section">
<h4>Generated Mermaid Code:</h4>
<div class="code-container">
<pre><code>{{ mermaidCode }}</code></pre>
<!-- Generated Code Section (Now Second) -->
<div v-if="mermaidCode" class="code-section">
<h4>Generated Mermaid Code:</h4>
<div class="code-container">
<pre><code>{{ mermaidCode }}</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</v-col>
<!-- </div> -->
</v-row>
<!-- </div> -->
</v-container>
</template>
<script setup>
......@@ -524,20 +537,21 @@
<style scoped>
.text-to-mermaid {
/* max-width: 2400px; */
display: grid;
grid-template-rows: 1fr;
/* display: grid;
grid-template-rows: 1fr; */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 10px;
/* margin: 10px; */
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
}
.converter-container {
/* .converter-container {
display: grid;
grid-template-columns: 1fr 1.5fr;
grid-template-rows: 1fr;
gap: 40px;
margin: 40px;
}
} */
.input-section, .output-section {
background: #f8f9fa;
padding: 20px;
......@@ -1283,23 +1297,6 @@
background: #545b62;
}
/* @media (max-width: 768px) {
.converter-container {
grid-template-columns: 1fr;
}
.button-group {
flex-direction: column;
}
}
@media (min-width: 1920px) {
.text-to-mermaid {
max-width: 2800px;
}
.converter-container {
gap: 80px;
}
} */
.page-title {
font-size: 2.4rem; /* Larger, more prominent */
font-weight: 700; /* Bold */
......
src/style.css
View file @ 75e8e1f0
......@@ -60,6 +60,8 @@ button:focus-visible {
#app {
/* max-width: 1280px; */
width: 100%;
height: 100%;
margin: 0 auto;
padding: 2rem;
text-align: center;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment