Compare commits
4 Commits
AndriiFunc
...
11c2222536
| Author | SHA1 | Date | |
|---|---|---|---|
| 11c2222536 | |||
| 1541d62bb5 | |||
| cd13d21e5f | |||
| d8e3dc8cee |
@@ -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
|
||||||
|
|||||||
157
index.html
157
index.html
@@ -10,55 +10,123 @@
|
|||||||
</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>
|
||||||
|
<div class="color-wrapper"><!-- DODANE -->
|
||||||
|
<button id="btn-change-color">Kolor</button> <!-- DODANE -->
|
||||||
|
<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>
|
||||||
|
<p>Zoom</p>
|
||||||
|
<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>
|
||||||
let selectedElement = null;
|
|
||||||
let activeElementView = null;
|
|
||||||
let clipboard = null;
|
|
||||||
|
|
||||||
$(document).ready(function () {
|
<!-- DODANY KONTAINER DLA PALETY KOLORÓW -->
|
||||||
//init paper - Start
|
|
||||||
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,
|
||||||
|
preventContextMenu: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
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
|
||||||
});
|
});
|
||||||
//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() {
|
||||||
|
$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
|
||||||
function createToolsView() {
|
function createToolsView() {
|
||||||
return new joint.dia.ToolsView({
|
return new joint.dia.ToolsView({
|
||||||
tools: [
|
tools: [
|
||||||
@@ -310,8 +378,10 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
//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) {
|
||||||
|
ev.preventDefault();
|
||||||
if (elementView.model.attributes.type === 'standard.TextBlock') {
|
if (elementView.model.attributes.type === 'standard.TextBlock') {
|
||||||
|
|
||||||
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) {
|
||||||
@@ -431,6 +501,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Zoom
|
// Zoom
|
||||||
const zoomStep = 0.2;
|
const zoomStep = 0.2;
|
||||||
const minScale = 0.2;
|
const minScale = 0.2;
|
||||||
|
|||||||
Reference in New Issue
Block a user