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

Compare commits

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

4 Commits
c8c98f7ec6 ... b1a2dac5e4

Author SHA1 Message Date
Andrii Solianyk
b1a2dac5e4 Merge remote-tracking branch 'origin/AndriiFunctionality' into AndriiFunctionality 2025-11-14 19:40:01 +01:00
Andrii Solianyk
44a52e0627 implementing functions 5,6,7,14 2025-11-14 19:39:48 +01:00
Andrii Solianyk
1459d4ab8d Update README.md 2025-11-14 19:38:34 +01:00
Andrii Solianyk
ff88da0079 first steps 2025-11-14 15:40:07 +01:00
4 changed files with 39861 additions and 163 deletions
Expand all files Collapse all files

34
README.md
View File

@@ -8,29 +8,29 @@ Funkcjonalności aplikacji koncentrują się na tworzeniu i modyfikacji kształt
## Funkcje: ## Funkcje:
### Kształty ### Kształty
1. Tworzenie prostokąta - [x] 1. Tworzenie prostokąta
2. Tworzenie rombu - [x] 2. Tworzenie rombu
3. Tworzenie elipsy - [x] 3. Tworzenie elipsy
### Akcje na kształtach ### Akcje na kształtach
4. Zmiana rozmiaru kształtów. - [ ] 4. Zmiana rozmiaru kształtów.
5. Przeciągnięcie kzstałtu po planszy - [x] 5. Przeciągnięcie kzstałtu po planszy
6. Usunięcie kształtu - [x] 6. Usunięcie kształtu
7. Zaznaczenie kształtu - [x] 7. Zaznaczenie kształtu
8. Kopiowanie kształtu - [ ] 8. Kopiowanie kształtu
9. Wklejanie kształtu - [ ] 9. Wklejanie kształtu
10. Zmiana kolorów kształtów - [ ] 10. Zmiana kolorów kształtów
11. Połączenie kształtów (strzałka ->) - [ ] 11. Połączenie kształtów (strzałka ->)
12. Usunięcie kształtów - [ ] 12. Usunięcie kształtów
### Tekst ### Tekst
13. Dodanie tekstu - [ ] 13. Dodanie tekstu
14. Usunięcie tekstu - [ ] 14. Usunięcie tekstu
### Plansza i akcje na niej ### Plansza i akcje na niej
15. Przybliżenie planszy - [ ] 15. Przybliżenie planszy
16. Oddalenie planszy - [ ] 16. Oddalenie planszy
17. Przewijanie planszy - [ ] 17. Przewijanie planszy
*P.S. Jak będzie brakować funkcjonalności:* *P.S. Jak będzie brakować funkcjonalności:*
- Obracanie kształtu - Obracanie kształtu

72
index.html
View File

@@ -11,7 +11,7 @@
<body> <body>
<div class="toolbar"> <div class="toolbar">
<p>Kształty</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>
@@ -25,8 +25,11 @@
<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="https://cdn.jsdelivr.net/npm/@joint/core@4.0.1/dist/joint.js"></script> <script src="joint.js"></script>
<script> <script>
let selectedElement = null;
let activeElementView = null;
$(document).ready(function () { $(document).ready(function () {
//init paper - Start //init paper - Start
const graph = new joint.dia.Graph(); const graph = new joint.dia.Graph();
@@ -39,6 +42,20 @@
}); });
//init paper - END //init paper - END
// obwódka i znaczek usuwanie
function createToolsView() {
return new joint.dia.ToolsView({
tools: [
new joint.elementTools.Boundary({
padding: 10,
}),
new joint.elementTools.Remove({
focusOpacity: 0.5,
})
]
});
}
//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({
@@ -56,6 +73,8 @@
} }
}); });
graph.addCell(rect); graph.addCell(rect);
const elementView = rect.findView(paper);
elementView.addTools(createToolsView());
} }
function createDiamond(paperX, paperY) { function createDiamond(paperX, paperY) {
@@ -75,6 +94,8 @@
} }
}); });
graph.addCell(rect); graph.addCell(rect);
const elementView = rect.findView(paper);
elementView.addTools(createToolsView());
} }
function createEllipse(paperX, paperY) { function createEllipse(paperX, paperY) {
@@ -93,6 +114,8 @@
} }
}); });
graph.addCell(rect); graph.addCell(rect);
const elementView = rect.findView(paper);
elementView.addTools(createToolsView());
} }
function createText(paperX, paperY) { function createText(paperX, paperY) {
@@ -113,6 +136,8 @@
} }
}); });
graph.addCell(textBlock); graph.addCell(textBlock);
const elementView = textBlock.findView(paper);
elementView.addTools(createToolsView());
} }
//create shape - END //create shape - END
@@ -148,6 +173,9 @@
const paperX = (x - translate.tx) / scale.sx; const paperX = (x - translate.tx) / scale.sx;
const paperY = (y - translate.ty) / scale.sy; const paperY = (y - translate.ty) / scale.sy;
activeElementView = null;
selectedElement = null;
if (shapeType === 'rectangle') { if (shapeType === 'rectangle') {
createRectangle(paperX, paperY); createRectangle(paperX, paperY);
} else if (shapeType === 'ellipse') { } else if (shapeType === 'ellipse') {
@@ -157,10 +185,41 @@
} else if (shapeType === 'text') { } else if (shapeType === 'text') {
createText(paperX, paperY); createText(paperX, paperY);
} }
const cells = graph.getCells();
if (cells.length > 0) {
const lastCell = cells[cells.length - 1];
const lastView = lastCell.findView(paper);
if (lastView && typeof lastView.hideTools === 'function') {
lastView.hideTools();
}
}
} }
}); });
//init draggable - END //init draggable - END
paper.on('element:pointerclick', function (elementView) {
if (activeElementView && activeElementView !== elementView) {
activeElementView.hideTools();
}
elementView.showTools();
activeElementView = elementView;
selectedElement = elementView.model;
});
paper.on('blank:pointerdown', function () {
if (activeElementView) {
if (typeof activeElementView.hideTools === 'function') {
activeElementView.hideTools();
}
if (typeof activeElementView.unhighlight === 'function') {
activeElementView.unhighlight();
}
activeElementView = null;
}
selectedElement = null;
});
//add text to text block - START //add text to text block - START
paper.on('element:pointerdblclick', function (elementView) { paper.on('element:pointerdblclick', function (elementView) {
if (elementView.model.attributes.type === 'standard.TextBlock') { if (elementView.model.attributes.type === 'standard.TextBlock') {
@@ -171,6 +230,15 @@
} }
} }
}); });
$(document).on('keydown', function (e) {
if (e.key === 'Delete' && selectedElement) {
// if (selectedElement.attributes.type === 'standard.TextBlock') {
selectedElement.remove();
selectedElement = null;
// }
}
});
//add text to text block - END //add text to text block - END
}); });
</script> </script>

39629
joint.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
style.css
View File

@@ -44,6 +44,7 @@
.shape { .shape {
background: transparent; background: transparent;
border: 1px solid white; border: 1px solid white;
cursor: pointer;
} }
.toolbar { .toolbar {