format and comments fix

README.md

@@ -19,9 +19,9 @@ 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 ->)
-- [ ] 12. Usunięcie kształtów
+- [x] 12. Usunięcie kształtów
 
 ### Tekst
 - [x] 13. Dodanie tekstu

index.html

@@ -23,6 +23,12 @@
         <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">
+            <button id="btn-change-color">Kolor</button>
+            <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">
@@ -44,8 +50,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 +59,72 @@
             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({
@@ -139,6 +206,7 @@
             const elementView = textBlock.findView(paper);
             elementView.addTools(createToolsView());
         }
+
         //create shape - END
 
         //init draggalble - START
@@ -196,6 +264,7 @@
                 }
             }
         });
+
         //init draggable - END
 
         function getViewportCenter() {
@@ -310,13 +379,21 @@
         });
 
         //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') {
+                ev.preventDefault();
                 const currentText = elementView.model.attr('label/text');
                 const newText = prompt('Edytuj tekst:', currentText);
                 if (newText != null) {
                     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);
+                }
             }
         });
 
@@ -400,7 +477,6 @@
         }
 
 
-
         function hideResizeHandle() {
             if ($resizeHandle.data('ui-resizable')) {
                 $resizeHandle.resizable('destroy');
@@ -430,7 +506,6 @@
         }
 
 
-
         // 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;
+}