UPDATE: change text with contextmenu click

README.md

@@ -19,8 +19,8 @@ Funkcjonalności aplikacji koncentrują się na tworzeniu i modyfikacji kształt
 - [x] 7. Zaznaczenie kształtu
 - [x] 8. Kopiowanie 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 ->)
 - [x] 12. Usunięcie kształtów
 
 ### Tekst

index.html

@@ -23,6 +23,11 @@
         <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>
+        <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">
@@ -36,6 +41,9 @@
     <div id="paper"></div>
 </div>
 
+<!-- DODANY KONTAINER DLA PALETY KOLORÓW -->
+
+
 <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 +52,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'),
@@ -53,11 +61,71 @@
             width: window.innerWidth,
             height: window.innerHeight,
             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
             function createToolsView() {
                 return new joint.dia.ToolsView({
@@ -310,8 +378,10 @@
             });
 
             //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') {
+
                     const currentText = elementView.model.attr('label/text');
                     const newText = prompt('Edytuj tekst:', currentText);
                     if (newText != null) {
@@ -431,6 +501,7 @@
 
 
 
+
             // Zoom
             const zoomStep = 0.2;
             const minScale = 0.2;

style.css

@@ -262,3 +262,17 @@ body {
         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;
+}