hamx/DrawDiagrams
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
B3rcik
2025-11-21 23:27:46 +01:00
parent d8e3dc8cee
commit cd13d21e5f
1 changed files with 106 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
index.html
View File

@@ -10,55 +10,118 @@
</head> </head>
<body> <body>
<div class="toolbar"> <div class="toolbar">
<p>Kształty - przeciągnij i upuść</p> <p>Kształty - przeciągnij i upuść</p>
<div class="shape-wrapper toolbar-wrapper"> <div class="shape-wrapper toolbar-wrapper">
<div id="shape-rectangle" class="shape" data-type="rectangle"></div> <div id="shape-rectangle" class="shape" data-type="rectangle"></div>
<div id="shape-ellipse" class="shape" data-type="ellipse"></div> <div id="shape-ellipse" class="shape" data-type="ellipse"></div>
<div id="shape-diamond" class="shape" data-type="diamond"></div> <div id="shape-diamond" class="shape" data-type="diamond"></div>
<div id="shape-text" class="shape" data-type="text">Tekst</div> <div id="shape-text" class="shape" data-type="text">Tekst</div>
</div>
<p>Akcje</p>
<div class="tools-wrapper toolbar-wrapper">
<button id="btn-delete">Usuń</button>
<button id="btn-copy">Kopiuj</button>
<button id="btn-paste">Wklej</button>
</div>
<p>Zoom</p>
<div class="zoom-wrapper toolbar-wrapper">
<button id="zoom-in">+</button>
<button id="zoom-out">-</button>
</div>
</div> </div>
<p>Akcje</p>
<div id="resize-handle" style="position: absolute; display: none; border: 2px dashed #4A90E2; z-index: 10;"></div> <div class="tools-wrapper toolbar-wrapper">
<div class="canvas-container"> <button id="btn-delete">Usuń</button>
<div id="paper"></div> <button id="btn-copy">Kopiuj</button>
<button id="btn-paste">Wklej</button>
<button id="btn-connect">Połącz</button> <!-- DODANE -->
<button id="btn-change-color">Kolor</button> <!-- DODANE -->
</div> </div>
<p>Zoom</p>
<div class="zoom-wrapper toolbar-wrapper">
<button id="zoom-in">+</button>
<button id="zoom-out">-</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="resize-handle" style="position: absolute; display: none; border: 2px dashed #4A90E2; z-index: 10;"></div>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <div class="canvas-container">
<script src="joint.js"></script> <div id="paper"></div>
<script> </div>
let selectedElement = null;
let activeElementView = null;
let clipboard = null;
$(document).ready(function () { <!-- DODANY KONTAINER DLA PALETY KOLORÓW -->
//init paper - Start <div id="color-palette" style="position:absolute; display:none; padding:8px; background:#fff; border:1px solid #ccc; border-radius:6px; gap:6px; z-index:2000;"></div>
const graph = new joint.dia.Graph();
const paper = new joint.dia.Paper({ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
el: $('#paper'), <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
model: graph, <script src="joint.js"></script>
width: window.innerWidth, <script>
height: window.innerHeight, let selectedElement = null;
gridSize: 20, let activeElementView = null;
let clipboard = null;
$(document).ready(function () {
const graph = new joint.dia.Graph();
const paper = new joint.dia.Paper({
el: $('#paper'),
model: graph,
width: window.innerWidth,
height: window.innerHeight,
gridSize: 20,
});
const $resizeHandle = $('#resize-handle');
// --- DODANE FUNKCJE START ---
let connectMode = false;
$('#btn-connect').click(function() {
if (!selectedElement) return;
connectMode = !connectMode;
$(this).css('background', connectMode ? '#e3f2fd' : '#fff');
});
const paletteColors = ['#FF4B4B','#FFA500','#FFD700','#4CAF50','#00BCD4','#2196F3','#9C27B0','#795548','#000000'];
const $palette = $('#color-palette');
$palette.css({ display:'grid', gridTemplateColumns:'repeat(3,28px)' });
paletteColors.forEach(c => {
// ZMIANA TUTAJ: Dodajemy width, height, border i cursor
const tile = $('<div></div>').css({
background: c,
width: '28px', // Dodane
height: '28px', // Dodane
border: '1px solid #444', // Dodane dla widoczności
cursor: 'pointer' // Dodane dla kursora rączki
}); });
//init paper - END
const $resizeHandle = $('#resize-handle'); tile.on('click', function() {
if (selectedElement) {
try {
// Ustawianie koloru
selectedElement.attr('body/fill', c);
if (selectedElement.attributes.type === 'standard.TextBlock') {
selectedElement.attr('label/fill', c);
}
} catch(e) { /* ignoruj */ }
}
$palette.hide();
});
$palette.append(tile);
});
// obwódka i znaczek usuwanie $('#btn-change-color').on('click', function() {
const off = $(this).offset();
$palette.css({ top: off.top + 36, left: off.left }).toggle();
});
$(document).on('click', function(e) {
if (!$(e.target).closest('#color-palette,#btn-change-color').length) $palette.hide();
});
paper.on('element:pointerclick', function (elementView) {
if (connectMode && selectedElement && selectedElement !== elementView.model) {
const link = new joint.shapes.standard.Link();
link.source(selectedElement);
link.target(elementView.model);
graph.addCell(link);
connectMode = false;
$('#btn-connect').css('background','#fff');
}
});
// --- DODANE FUNKCJE KONIEC ---
// obwódka i znaczek usuwanie
function createToolsView() { function createToolsView() {
return new joint.dia.ToolsView({ return new joint.dia.ToolsView({
tools: [ tools: [
@@ -431,6 +494,7 @@
// Zoom // Zoom
const zoomStep = 0.2; const zoomStep = 0.2;
const minScale = 0.2; const minScale = 0.2;