Update index.html

index.html

@@ -23,6 +23,8 @@
         <button id="btn-delete">Usuń</button>
         <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>
     <p>Zoom</p>
     <div class="zoom-wrapper toolbar-wrapper">
@@ -36,6 +38,9 @@
     <div id="paper"></div>
 </div>
 
+<!-- DODANY KONTAINER DLA PALETY KOLORÓW -->
+<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>
+
 <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>
@@ -44,8 +49,8 @@
     let activeElementView = null;
     let clipboard = null;
 
+
     $(document).ready(function () {
-            //init paper - Start
         const graph = new joint.dia.Graph();
         const paper = new joint.dia.Paper({
             el: $('#paper'),
@@ -54,10 +59,68 @@
             height: window.innerHeight,
             gridSize: 20,
         });
-            //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({ 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
+            });
+
+            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() {
+            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() {
                 return new joint.dia.ToolsView({
@@ -431,6 +494,7 @@
 
 
 
+
             // Zoom
             const zoomStep = 0.2;
             const minScale = 0.2;