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

Compare commits

merge into: hamx:AndriiFunctionality
Branches Tags
hamx:main hamx:kolory,połączenia hamx:AndriiFunctionality hamx:functions-15,16,17
...
pull from: hamx:main
Branches Tags
hamx:main hamx:kolory,połączenia hamx:AndriiFunctionality hamx:functions-15,16,17

6 Commits
AndriiFunc ... main

Author SHA1 Message Date
Andrii Solianyk
1b76c1df3a format and comments fix 2025-11-29 23:09:07 +01:00
Andrii Solianyk
4cb50a4276 add label to any shape 2025-11-28 23:21:28 +01:00
PatryKania
11c2222536 UPDATE: change text with contextmenu click 2025-11-22 11:03:04 +01:00
PatryKania
1541d62bb5 FIX: hide color palette 2025-11-22 10:36:44 +01:00
B3rcik
cd13d21e5f Update index.html 2025-11-21 23:27:46 +01:00
Andrii Solianyk
d8e3dc8cee de facto done 2025-11-21 10:46:57 +01:00
3 changed files with 538 additions and 449 deletions
Expand all files Collapse all files

6
README.md
View File

@@ -19,9 +19,9 @@ Funkcjonalności aplikacji koncentrują się na tworzeniu i modyfikacji kształt
- [x] 7. Zaznaczenie kształtu - [x] 7. Zaznaczenie kształtu
- [x] 8. Kopiowanie kształtu - [x] 8. Kopiowanie kształtu
- [x] 9. Wklejanie kształtu - [x] 9. Wklejanie kształtu
- [ ] 10. Zmiana kolorów kształtów - [x] 10. Zmiana kolorów kształtów
- [ ] 11. Połączenie kształtów (strzałka ->) - [x] 11. Połączenie kształtów (strzałka ->)
- [ ] 12. Usunięcie kształtów - [x] 12. Usunięcie kształtów
### Tekst ### Tekst
- [x] 13. Dodanie tekstu - [x] 13. Dodanie tekstu

139
index.html
View File

@@ -10,7 +10,7 @@
</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>
@@ -23,29 +23,35 @@
<button id="btn-delete">Usuń</button> <button id="btn-delete">Usuń</button>
<button id="btn-copy">Kopiuj</button> <button id="btn-copy">Kopiuj</button>
<button id="btn-paste">Wklej</button> <button id="btn-paste">Wklej</button>
<button id="btn-connect">Połącz</button>
<div class="color-wrapper">
<button id="btn-change-color">Kolor</button>
<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>
</div>
</div> </div>
<p>Zoom</p> <p>Zoom</p>
<div class="zoom-wrapper toolbar-wrapper"> <div class="zoom-wrapper toolbar-wrapper">
<button id="zoom-in">+</button> <button id="zoom-in">+</button>
<button id="zoom-out">-</button> <button id="zoom-out">-</button>
</div> </div>
</div> </div>
<div id="resize-handle" style="position: absolute; display: none; border: 2px dashed #4A90E2; z-index: 10;"></div> <div id="resize-handle" style="position: absolute; display: none; border: 2px dashed #4A90E2; z-index: 10;"></div>
<div class="canvas-container"> <div class="canvas-container">
<div id="paper"></div> <div id="paper"></div>
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="joint.js"></script> <script src="joint.js"></script>
<script> <script>
let selectedElement = null; let selectedElement = null;
let activeElementView = null; let activeElementView = null;
let clipboard = null; let clipboard = null;
$(document).ready(function () { $(document).ready(function () {
//init paper - Start
const graph = new joint.dia.Graph(); const graph = new joint.dia.Graph();
const paper = new joint.dia.Paper({ const paper = new joint.dia.Paper({
el: $('#paper'), el: $('#paper'),
@@ -53,11 +59,72 @@
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
gridSize: 20, gridSize: 20,
preventContextMenu: false,
}); });
//init paper - END
const $resizeHandle = $('#resize-handle'); 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({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
});
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);
});
$('#btn-change-color').on('click', function () {
$palette.toggleClass('active');
});
$(document).on('click', function (e) {
if (!$(e.target).closest('#color-palette,#btn-change-color').length)
if ($palette.hasClass('active'))
$palette.toggleClass('active');
});
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 // obwódka i znaczek usuwanie
function createToolsView() { function createToolsView() {
return new joint.dia.ToolsView({ return new joint.dia.ToolsView({
@@ -66,9 +133,9 @@
padding: 20, padding: 20,
}), }),
new joint.elementTools.Remove({ new joint.elementTools.Remove({
offset: { x: -10, y: -10 }, offset: {x: -10, y: -10},
focusOpacity: 0.5, focusOpacity: 0.5,
action: function() { action: function () {
deleteShape(); deleteShape();
} }
}) })
@@ -78,8 +145,8 @@
function createDiamond(paperX, paperY) { function createDiamond(paperX, paperY) {
const diamond = new joint.shapes.standard.Polygon({ const diamond = new joint.shapes.standard.Polygon({
position: { x: paperX - 24, y: paperY - 24 }, position: {x: paperX - 24, y: paperY - 24},
size: { width: 48, height: 48 }, size: {width: 48, height: 48},
attrs: { attrs: {
body: { body: {
refPoints: '0.5,0 1,0.5 0.5,1 0,0.5', // Diamond shape points refPoints: '0.5,0 1,0.5 0.5,1 0,0.5', // Diamond shape points
@@ -100,8 +167,8 @@
function createEllipse(paperX, paperY) { function createEllipse(paperX, paperY) {
const rect = new joint.shapes.standard.Ellipse({ const rect = new joint.shapes.standard.Ellipse({
position: { x: paperX - 40, y: paperY - 24 }, position: {x: paperX - 40, y: paperY - 24},
size: { width: 80, height: 48 }, size: {width: 80, height: 48},
attrs: { attrs: {
body: { body: {
fill: 'transparent', fill: 'transparent',
@@ -120,8 +187,8 @@
function createText(paperX, paperY) { function createText(paperX, paperY) {
const textBlock = new joint.shapes.standard.TextBlock({ const textBlock = new joint.shapes.standard.TextBlock({
position: { x: paperX - 40, y: paperY - 24 }, position: {x: paperX - 40, y: paperY - 24},
size: { width: 80, height: 48 }, size: {width: 80, height: 48},
attrs: { attrs: {
body: { body: {
fill: 'transparent', fill: 'transparent',
@@ -139,6 +206,7 @@
const elementView = textBlock.findView(paper); const elementView = textBlock.findView(paper);
elementView.addTools(createToolsView()); elementView.addTools(createToolsView());
} }
//create shape - END //create shape - END
//init draggalble - START //init draggalble - START
@@ -196,6 +264,7 @@
} }
} }
}); });
//init draggable - END //init draggable - END
function getViewportCenter() { function getViewportCenter() {
@@ -247,15 +316,15 @@
} }
} }
$('#btn-delete').click(function() { $('#btn-delete').click(function () {
deleteShape() deleteShape()
}); });
$('#btn-copy').click(function() { $('#btn-copy').click(function () {
copyShape(); copyShape();
}); });
$('#btn-paste').click(function() { $('#btn-paste').click(function () {
pasteShape(); pasteShape();
}); });
@@ -310,13 +379,21 @@
}); });
//add text to text block - START //add text to text block - START
paper.on('element:pointerdblclick', function (elementView) { paper.on('element:contextmenu', function (elementView, ev) {
if (elementView.model.attributes.type === 'standard.TextBlock') { if (elementView.model.attributes.type === 'standard.TextBlock') {
ev.preventDefault();
const currentText = elementView.model.attr('label/text'); const currentText = elementView.model.attr('label/text');
const newText = prompt('Edytuj tekst:', currentText); const newText = prompt('Edytuj tekst:', currentText);
if (newText != null) { if (newText != null) {
elementView.model.attr('label/text', newText); elementView.model.attr('label/text', newText);
} }
} else if (elementView.model.attributes.type !== 'standard.TextBlock') {
ev.preventDefault();
const currentText = elementView.model.attr('label/text') || '';
const newText = prompt('Edytuj tekst:', currentText);
if (newText != null) {
elementView.model.attr('label/text', newText);
}
} }
}); });
@@ -366,13 +443,13 @@
$resizeHandle.resizable({ $resizeHandle.resizable({
handles: 'n, e, s, w, ne, se, sw, nw', handles: 'n, e, s, w, ne, se, sw, nw',
start: function() { start: function () {
if (activeElementView) { if (activeElementView) {
activeElementView.hideTools(); activeElementView.hideTools();
} }
originalBBox = selectedElement.getBBox(); originalBBox = selectedElement.getBBox();
}, },
resize: function(event, ui) { resize: function (event, ui) {
if (selectedElement && originalBBox) { if (selectedElement && originalBBox) {
const scale = paper.scale(); const scale = paper.scale();
const newWidth = ui.size.width / scale.sx; const newWidth = ui.size.width / scale.sx;
@@ -382,14 +459,14 @@
const newY = originalBBox.y + (ui.position.top - ui.originalPosition.top) / scale.sy; const newY = originalBBox.y + (ui.position.top - ui.originalPosition.top) / scale.sy;
if (selectedElement.get('angle')) { if (selectedElement.get('angle')) {
selectedElement.resize(newWidth, newHeight, { direction: 'center' }); selectedElement.resize(newWidth, newHeight, {direction: 'center'});
} else { } else {
selectedElement.position(newX, newY); selectedElement.position(newX, newY);
selectedElement.resize(newWidth, newHeight); selectedElement.resize(newWidth, newHeight);
} }
} }
}, },
stop: function() { stop: function () {
if (activeElementView) { if (activeElementView) {
activeElementView.showTools(); activeElementView.showTools();
showResizeHandle(activeElementView); showResizeHandle(activeElementView);
@@ -400,7 +477,6 @@
} }
function hideResizeHandle() { function hideResizeHandle() {
if ($resizeHandle.data('ui-resizable')) { if ($resizeHandle.data('ui-resizable')) {
$resizeHandle.resizable('destroy'); $resizeHandle.resizable('destroy');
@@ -411,8 +487,8 @@
//create shape - START //create shape - START
function createRectangle(paperX, paperY) { function createRectangle(paperX, paperY) {
const rect = new joint.shapes.standard.Rectangle({ const rect = new joint.shapes.standard.Rectangle({
position: { x: paperX - 40, y: paperY - 24 }, position: {x: paperX - 40, y: paperY - 24},
size: { width: 80, height: 48 }, size: {width: 80, height: 48},
attrs: { attrs: {
body: { body: {
fill: 'transparent', fill: 'transparent',
@@ -430,7 +506,6 @@
} }
// Zoom // Zoom
const zoomStep = 0.2; const zoomStep = 0.2;
const minScale = 0.2; const minScale = 0.2;
@@ -464,7 +539,7 @@
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

14
style.css
View File

@@ -262,3 +262,17 @@ body {
top: auto; top: auto;
} }
} }
/* color wrapper */
.color-wrapper{
display: flex;
flex-direction: column;
position: relative;
}
#color-palette{
display:none;
top: 41px;
}
#color-palette.active{
display: grid!important;
}