chore: Änderungen commited
This commit is contained in:
253
static/css/mindmap.css
Normal file
253
static/css/mindmap.css
Normal file
@@ -0,0 +1,253 @@
|
||||
/* Mindmap Container Styles */
|
||||
.mindmap-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Toolbar Styles */
|
||||
.mindmap-toolbar {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dark .mindmap-toolbar {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Toolbar Buttons */
|
||||
.mindmap-toolbar button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mindmap-toolbar button:hover {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.mindmap-toolbar button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.mindmap-toolbar button i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Export Group Styles */
|
||||
.export-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.export-options {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.dark .export-options {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.export-group:hover .export-options {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.export-options button {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 8px 12px;
|
||||
justify-content: flex-start;
|
||||
font-size: 14px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Context Menu Styles */
|
||||
.mindmap-context-menu {
|
||||
position: fixed;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 8px;
|
||||
z-index: 1000;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.dark .mindmap-context-menu {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.mindmap-context-menu button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mindmap-context-menu button:hover {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mindmap-context-menu button i {
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* Node Styles */
|
||||
.mindmap-node {
|
||||
background-color: var(--bg-secondary);
|
||||
border: 2px solid var(--accent-primary);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.mindmap-node:hover {
|
||||
box-shadow: 0 0 0 2px var(--accent-primary);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.mindmap-node.selected {
|
||||
border-color: var(--accent-secondary);
|
||||
box-shadow: 0 0 0 3px var(--accent-secondary);
|
||||
}
|
||||
|
||||
/* Edge Styles */
|
||||
.mindmap-edge {
|
||||
width: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dark .mindmap-edge {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.mindmap-edge:hover {
|
||||
width: 3px;
|
||||
background-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Animation Styles */
|
||||
@keyframes nodeAppear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.mindmap-node-new {
|
||||
animation: nodeAppear 0.3s ease forwards;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 768px) {
|
||||
.mindmap-toolbar {
|
||||
flex-wrap: wrap;
|
||||
width: calc(100% - 32px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.export-options {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.mindmap-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mindmap-loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid var(--bg-secondary);
|
||||
border-top-color: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tooltip Styles */
|
||||
.mindmap-tooltip {
|
||||
position: absolute;
|
||||
background: var(--bg-secondary);
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dark .mindmap-tooltip {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@@ -100,6 +100,9 @@
|
||||
<!-- Neural Network Background CSS -->
|
||||
<link href="{{ url_for('static', filename='css/neural-network-background.css') }}" rel="stylesheet">
|
||||
|
||||
<!-- Mindmap CSS -->
|
||||
<link href="{{ url_for('static', filename='css/mindmap.css') }}" rel="stylesheet">
|
||||
|
||||
<!-- D3.js für Visualisierungen -->
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
|
||||
|
||||
@@ -261,6 +261,16 @@
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Mindmap-Vorschau -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-xl font-semibold mb-4">Vorschau</h3>
|
||||
<div class="mindmap-container">
|
||||
<div id="cy" class="w-full h-[400px] rounded-xl border"
|
||||
x-bind:class="darkMode ? 'border-gray-700' : 'border-gray-200'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -286,6 +296,8 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-cose-bilkent/4.1.0/cytoscape-cose-bilkent.min.js"></script>
|
||||
<script nonce="{{ csp_nonce }}">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Einfache Animationen für die Eingabefelder
|
||||
@@ -311,6 +323,43 @@
|
||||
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Wird erstellt...';
|
||||
submitBtn.disabled = true;
|
||||
});
|
||||
|
||||
// Mindmap-Vorschau initialisieren
|
||||
const mindmap = new MindMap.Visualization('cy', {
|
||||
enableEditing: true,
|
||||
onNodeClick: function(nodeData) {
|
||||
console.log("Knoten ausgewählt:", nodeData);
|
||||
}
|
||||
});
|
||||
|
||||
// Formularfelder mit Mindmap verbinden
|
||||
const nameInput = document.getElementById('name');
|
||||
const descriptionInput = document.getElementById('description');
|
||||
|
||||
// Aktualisiere Mindmap wenn sich die Eingaben ändern
|
||||
nameInput.addEventListener('input', function() {
|
||||
if (mindmap.cy) {
|
||||
const rootNode = mindmap.cy.$('#root');
|
||||
if (rootNode.length > 0) {
|
||||
rootNode.data('name', this.value || 'Neue Mindmap');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialisiere die Mindmap
|
||||
mindmap.initialize().then(() => {
|
||||
console.log("Mindmap-Vorschau initialisiert");
|
||||
|
||||
// Setze initiale Werte
|
||||
if (nameInput.value) {
|
||||
const rootNode = mindmap.cy.$('#root');
|
||||
if (rootNode.length > 0) {
|
||||
rootNode.data('name', nameInput.value);
|
||||
}
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Fehler bei der Initialisierung der Mindmap:", error);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -263,6 +263,20 @@
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Mindmap-Editor -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-xl font-semibold mb-4">Mindmap bearbeiten</h3>
|
||||
<div class="mindmap-container">
|
||||
<div id="cy" class="w-full h-[600px] rounded-xl border"
|
||||
x-bind:class="darkMode ? 'border-gray-700' : 'border-gray-200'">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bearbeitungshinweise -->
|
||||
<div class="mt-4 text-sm opacity-80">
|
||||
<p><i class="fas fa-info-circle mr-2"></i>Klicke auf Knoten zum Bearbeiten, ziehe sie zum Neuanordnen oder nutze die Toolbar für weitere Funktionen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -288,6 +302,8 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-cose-bilkent/4.1.0/cytoscape-cose-bilkent.min.js"></script>
|
||||
<script nonce="{{ csp_nonce }}">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Einfache Animationen für die Eingabefelder
|
||||
@@ -313,6 +329,95 @@
|
||||
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Wird gespeichert...';
|
||||
submitBtn.disabled = true;
|
||||
});
|
||||
|
||||
// Mindmap initialisieren
|
||||
const mindmap = new MindMap.Visualization('cy', {
|
||||
enableEditing: true,
|
||||
apiEndpoint: '/api/mindmap/{{ mindmap.id }}',
|
||||
onNodeClick: function(nodeData) {
|
||||
console.log("Knoten ausgewählt:", nodeData);
|
||||
},
|
||||
onChange: function(data) {
|
||||
// Automatisches Speichern bei Änderungen
|
||||
fetch('/api/mindmap/{{ mindmap.id }}/update', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token() }}'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
}).then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Netzwerkfehler beim Speichern');
|
||||
}
|
||||
console.log('Änderungen gespeichert');
|
||||
}).catch(error => {
|
||||
console.error('Fehler beim Speichern:', error);
|
||||
alert('Fehler beim Speichern der Änderungen');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Formularfelder mit Mindmap verbinden
|
||||
const nameInput = document.getElementById('name');
|
||||
const descriptionInput = document.getElementById('description');
|
||||
|
||||
// Aktualisiere Mindmap wenn sich die Eingaben ändern
|
||||
nameInput.addEventListener('input', function() {
|
||||
if (mindmap.cy) {
|
||||
const rootNode = mindmap.cy.$('#root');
|
||||
if (rootNode.length > 0) {
|
||||
rootNode.data('name', this.value || 'Mindmap');
|
||||
mindmap.saveToServer();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialisiere die Mindmap mit existierenden Daten
|
||||
mindmap.initialize().then(() => {
|
||||
console.log("Mindmap-Editor initialisiert");
|
||||
|
||||
// Lade existierende Daten
|
||||
fetch('/api/mindmap/{{ mindmap.id }}/data')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
mindmap.loadData(data);
|
||||
console.log("Mindmap-Daten geladen");
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Fehler beim Laden der Mindmap-Daten:", error);
|
||||
alert("Fehler beim Laden der Mindmap");
|
||||
});
|
||||
}).catch(error => {
|
||||
console.error("Fehler bei der Initialisierung des Editors:", error);
|
||||
});
|
||||
|
||||
// Autosave-Status Anzeige
|
||||
const statusIndicator = document.createElement('div');
|
||||
statusIndicator.className = 'fixed bottom-4 right-4 px-4 py-2 rounded-full text-sm transition-all duration-300';
|
||||
document.body.appendChild(statusIndicator);
|
||||
|
||||
// Zeige Speicherstatus
|
||||
function showStatus(message, isError = false) {
|
||||
statusIndicator.textContent = message;
|
||||
statusIndicator.className = `fixed bottom-4 right-4 px-4 py-2 rounded-full text-sm transition-all duration-300 ${
|
||||
isError
|
||||
? 'bg-red-500 text-white'
|
||||
: 'bg-green-500 text-white'
|
||||
}`;
|
||||
setTimeout(() => {
|
||||
statusIndicator.className = 'fixed bottom-4 right-4 px-4 py-2 rounded-full text-sm transition-all duration-300 opacity-0';
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Event-Listener für Speicherstatus
|
||||
document.addEventListener('mindmapSaved', () => {
|
||||
showStatus('Änderungen gespeichert');
|
||||
});
|
||||
|
||||
document.addEventListener('mindmapError', (event) => {
|
||||
showStatus(event.detail.message, true);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user