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

Compare commits

base: hamx:2adc151e8e801d9fbdaafd5bb102be8644040d39
Branches Tags
hamx:main hamx:kolory,połączenia hamx:AndriiFunctionality hamx:functions-15,16,17
...
compare: hamx:main
Branches Tags
hamx:main hamx:kolory,połączenia hamx:AndriiFunctionality hamx:functions-15,16,17

10 Commits
2adc151e8e ... 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
Andrii Solianyk
7f7a4a1ae6 resizing works 2025-11-21 10:43:38 +01:00
Andrii Solianyk
e078914ed2 resizing works 2025-11-21 10:42:52 +01:00
PatryKania
9234986b6f FIX: css shape fix 2025-11-20 22:40:04 +01:00
Andrii Solianyk
4bbd92920e resize works, but not ideal 2025-11-19 23:26:01 +01:00
3 changed files with 267 additions and 87 deletions
Expand all files Collapse all files

8
README.md
View File

@@ -13,15 +13,15 @@ Funkcjonalności aplikacji koncentrują się na tworzeniu i modyfikacji kształt
- [x] 3. Tworzenie elipsy - [x] 3. Tworzenie elipsy
### Akcje na kształtach ### Akcje na kształtach
- [ ] 4. Zmiana rozmiaru kształtów. - [x] 4. Zmiana rozmiaru kształtów.
- [x] 5. Przeciągnięcie kzstałtu po planszy - [x] 5. Przeciągnięcie kzstałtu po planszy
- [x] 6. Usunięcie kształtu - [x] 6. Usunięcie kształtu
- [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

319
index.html
View File

@@ -10,41 +10,48 @@
</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> </div>
<p>Akcje</p> <p>Akcje</p>
<div class="tools-wrapper toolbar-wrapper"> <div class="tools-wrapper toolbar-wrapper">
<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>
</div> <button id="btn-connect">Połącz</button>
<p>Zoom</p> <div class="color-wrapper">
<div class="zoom-wrapper toolbar-wrapper"> <button id="btn-change-color">Kolor</button>
<button id="zoom-in">+</button> <div id="color-palette"
<button id="zoom-out">-</button> 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> </div>
<div class="canvas-container"> <p>Zoom</p>
<div id="paper"></div> <div class="zoom-wrapper toolbar-wrapper">
<button id="zoom-in">+</button>
<button id="zoom-out">-</button>
</div> </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>
<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="joint.js"></script>
<script>
let selectedElement = null; let selectedElement = null;
let activeElementView = null; let activeElementView = null;
let clipboard = null; let clipboard = null;
let zoomLevel = 1.0;
$(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'),
@@ -52,51 +59,97 @@
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');
// --- 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({
tools: [ tools: [
new joint.elementTools.Boundary({ new joint.elementTools.Boundary({
padding: 10, padding: 20,
}), }),
new joint.elementTools.Remove({ new joint.elementTools.Remove({
offset: {x: -10, y: -10},
focusOpacity: 0.5, focusOpacity: 0.5,
action: function () {
deleteShape();
}
}) })
] ]
}); });
} }
//create shape - START
function createRectangle(paperX, paperY) {
const rect = new joint.shapes.standard.Rectangle({
position: { x: paperX - 40, y: paperY - 24 },
size: { width: 80, height: 48 },
attrs: {
body: {
fill: 'transparent',
stroke: '#000000',
strokeWidth: 1
},
label: {
text: ''
}
}
});
graph.addCell(rect);
const elementView = rect.findView(paper);
elementView.addTools(createToolsView());
}
function createDiamond(paperX, paperY) { function createDiamond(paperX, paperY) {
const rect = new joint.shapes.standard.Rectangle({ 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},
angle: 45,
attrs: { attrs: {
body: { body: {
refPoints: '0.5,0 1,0.5 0.5,1 0,0.5', // Diamond shape points
fill: 'transparent', fill: 'transparent',
stroke: '#000000', stroke: '#000000',
strokeWidth: 1 strokeWidth: 1
@@ -106,15 +159,16 @@
} }
} }
}); });
graph.addCell(rect);
const elementView = rect.findView(paper); graph.addCell(diamond);
const elementView = diamond.findView(paper);
elementView.addTools(createToolsView()); elementView.addTools(createToolsView());
} }
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',
@@ -133,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',
@@ -152,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
@@ -188,6 +243,7 @@
activeElementView = null; activeElementView = null;
selectedElement = null; selectedElement = null;
hideResizeHandle();
if (shapeType === 'rectangle') { if (shapeType === 'rectangle') {
createRectangle(paperX, paperY); createRectangle(paperX, paperY);
@@ -208,11 +264,8 @@
} }
} }
}); });
//init draggable - END
function updateStatus(message) { //init draggable - END
$('#status').text(message + ' | Zoom: ' + Math.round(zoomLevel * 100) + '%');
}
function getViewportCenter() { function getViewportCenter() {
const container = $('.canvas-container'); const container = $('.canvas-container');
@@ -228,9 +281,6 @@
function copyShape() { function copyShape() {
if (selectedElement) { if (selectedElement) {
clipboard = selectedElement.clone(); clipboard = selectedElement.clone();
updateStatus('Skopiowano element');
} else {
updateStatus('Brak zaznaczonego elementu');
} }
} }
@@ -253,27 +303,28 @@
} }
selectedElement = pasted; selectedElement = pasted;
updateStatus('Wklejono element'); showResizeHandle(pastedView);
} else {
updateStatus('Brak elementu w schowku');
} }
} }
function deleteShape() { function deleteShape() {
selectedElement.remove(); if (selectedElement) {
selectedElement = null; selectedElement.remove();
updateStatus('Usunięto element'); selectedElement = null;
activeElementView = null;
hideResizeHandle();
}
} }
$('#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();
}); });
@@ -284,8 +335,8 @@
} }
elementView.showTools(); elementView.showTools();
activeElementView = elementView; activeElementView = elementView;
selectedElement = elementView.model; selectedElement = elementView.model;
showResizeHandle(elementView);
}); });
let panStart = null; let panStart = null;
@@ -300,6 +351,7 @@
activeElementView = null; activeElementView = null;
} }
selectedElement = null; selectedElement = null;
hideResizeHandle();
//ruszanie caloscia //ruszanie caloscia
panStart = { panStart = {
x: evt.clientX, x: evt.clientX,
@@ -315,6 +367,7 @@
const dx = evt.clientX - panStart.x; const dx = evt.clientX - panStart.x;
const dy = evt.clientY - panStart.y; const dy = evt.clientY - panStart.y;
paper.translate(panStart.tx + dx, panStart.ty + dy); paper.translate(panStart.tx + dx, panStart.ty + dy);
showResizeHandle(activeElementView);
} }
}); });
@@ -326,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);
}
} }
}); });
@@ -355,21 +416,116 @@
}); });
//add text to text block - END //add text to text block - END
// resize
function showResizeHandle(elementView) {
if (!elementView) return;
const bbox = elementView.model.getBBox();
const clientRect = paper.localToClientRect(bbox);
const angle = elementView.model.get('angle') || 0;
$resizeHandle.css({
left: clientRect.x,
top: clientRect.y,
width: clientRect.width,
height: clientRect.height,
transform: `rotate(${angle}deg)`,
transformOrigin: 'center center'
}).show();
if ($resizeHandle.data('ui-resizable')) {
$resizeHandle.resizable('destroy');
}
let originalBBox;
$resizeHandle.resizable({
handles: 'n, e, s, w, ne, se, sw, nw',
start: function () {
if (activeElementView) {
activeElementView.hideTools();
}
originalBBox = selectedElement.getBBox();
},
resize: function (event, ui) {
if (selectedElement && originalBBox) {
const scale = paper.scale();
const newWidth = ui.size.width / scale.sx;
const newHeight = ui.size.height / scale.sy;
const newX = originalBBox.x + (ui.position.left - ui.originalPosition.left) / scale.sx;
const newY = originalBBox.y + (ui.position.top - ui.originalPosition.top) / scale.sy;
if (selectedElement.get('angle')) {
selectedElement.resize(newWidth, newHeight, {direction: 'center'});
} else {
selectedElement.position(newX, newY);
selectedElement.resize(newWidth, newHeight);
}
}
},
stop: function () {
if (activeElementView) {
activeElementView.showTools();
showResizeHandle(activeElementView);
}
originalBBox = null;
}
});
}
function hideResizeHandle() {
if ($resizeHandle.data('ui-resizable')) {
$resizeHandle.resizable('destroy');
}
$resizeHandle.hide();
}
//create shape - START
function createRectangle(paperX, paperY) {
const rect = new joint.shapes.standard.Rectangle({
position: {x: paperX - 40, y: paperY - 24},
size: {width: 80, height: 48},
attrs: {
body: {
fill: 'transparent',
stroke: '#000000',
strokeWidth: 1
},
label: {
text: ''
}
}
});
graph.addCell(rect);
const elementView = rect.findView(paper);
elementView.addTools(createToolsView());
}
// Zoom // Zoom
const zoomStep = 0.2; const zoomStep = 0.2;
const minScale = 0.2; const minScale = 0.2;
const maxScale = 3.0; const maxScale = 3.0;
function applyZoom(newScale, ox, oy) {
paper.scale(newScale, newScale, ox, oy);
showResizeHandle(activeElementView);
}
$('#zoom-in').click(function () { $('#zoom-in').click(function () {
const currentScale = paper.scale().sx; const currentScale = paper.scale().sx;
const newScale = Math.min(maxScale, currentScale + zoomStep); const newScale = Math.min(maxScale, currentScale + zoomStep);
paper.scale(newScale, newScale); applyZoom(newScale);
}); });
$('#zoom-out').click(function () { $('#zoom-out').click(function () {
const currentScale = paper.scale().sx; const currentScale = paper.scale().sx;
const newScale = Math.max(minScale, currentScale - zoomStep); const newScale = Math.max(minScale, currentScale - zoomStep);
paper.scale(newScale, newScale); applyZoom(newScale);
}); });
// Zoom za pomoca kolka myszy // Zoom za pomoca kolka myszy
@@ -379,10 +535,11 @@
const zoomFactor = 0.2; const zoomFactor = 0.2;
let newScale = oldScale * (1 + delta * zoomFactor); let newScale = oldScale * (1 + delta * zoomFactor);
newScale = Math.max(minScale, Math.min(maxScale, newScale)); newScale = Math.max(minScale, Math.min(maxScale, newScale));
paper.scale(newScale, newScale, x, y); applyZoom(newScale, x, y);
}); });
}); });
</script>
</script>
</body> </body>
</html> </html>

27
style.css
View File

@@ -51,7 +51,9 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
padding: 12px; padding: 12px;
min-height: 152px;
justify-content: space-between; justify-content: space-between;
align-content: space-between;
} }
.shape { .shape {
@@ -87,7 +89,7 @@ body {
#shape-diamond { #shape-diamond {
height: 48px; height: 48px;
width: 48px; width: 48px;
transform: rotate(45deg) translateX(15px); transform: rotate(45deg) translate(3px, -16px);
border-radius: 4px; border-radius: 4px;
} }
@@ -171,7 +173,7 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 12px; gap: 12px;
padding: 0; padding: 6px;
} }
.zoom-wrapper button { .zoom-wrapper button {
@@ -240,6 +242,13 @@ body {
background: #999; background: #999;
} }
#resize-handle {
position: absolute;
box-sizing: border-box;
pointer-events: auto;
}
/* Responsive */ /* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.toolbar { .toolbar {
@@ -253,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;
}