format and comments fix

index.html

@@ -24,9 +24,10 @@
         <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 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>
@@ -41,9 +42,6 @@
     <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>
@@ -69,15 +67,15 @@
         // --- DODANE FUNKCJE START ---
         let connectMode = false;
 
-        $('#btn-connect').click(function() {
+        $('#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 paletteColors = ['#FF4B4B', '#FFA500', '#FFD700', '#4CAF50', '#00BCD4', '#2196F3', '#9C27B0', '#795548', '#000000'];
         const $palette = $('#color-palette');
-        $palette.css({ gridTemplateColumns:'repeat(3,28px)' });
+        $palette.css({gridTemplateColumns: 'repeat(3,28px)'});
 
         paletteColors.forEach(c => {
             // ZMIANA TUTAJ: Dodajemy width, height, border i cursor
@@ -89,7 +87,7 @@
                 cursor: 'pointer'    // Dodane dla kursora rączki
             });
 
-            tile.on('click', function() {
+            tile.on('click', function () {
                 if (selectedElement) {
                     try {
                         // Ustawianie koloru
@@ -97,19 +95,20 @@
                         if (selectedElement.attributes.type === 'standard.TextBlock') {
                             selectedElement.attr('label/fill', c);
                         }
-                    } catch(e) { /* ignoruj */ }
+                    } catch (e) { /* ignoruj */
+                    }
                 }
                 $palette.hide();
             });
             $palette.append(tile);
         });
 
-        $('#btn-change-color').on('click', function() {
+        $('#btn-change-color').on('click', function () {
             $palette.toggleClass('active');
         });
-        $(document).on('click', function(e) {
+        $(document).on('click', function (e) {
             if (!$(e.target).closest('#color-palette,#btn-change-color').length)
-                if($palette.hasClass('active'))
+                if ($palette.hasClass('active'))
                     $palette.toggleClass('active');
         });
 
@@ -121,7 +120,7 @@
                 link.target(elementView.model);
                 graph.addCell(link);
                 connectMode = false;
-                $('#btn-connect').css('background','#fff');
+                $('#btn-connect').css('background', '#fff');
             }
         });
         // --- DODANE FUNKCJE KONIEC ---
@@ -134,9 +133,9 @@
                         padding: 20,
                     }),
                     new joint.elementTools.Remove({
-                            offset: { x: -10, y: -10 },
+                        offset: {x: -10, y: -10},
                         focusOpacity: 0.5,
-                            action: function() {
+                        action: function () {
                             deleteShape();
                         }
                     })
@@ -146,8 +145,8 @@
 
         function createDiamond(paperX, paperY) {
             const diamond = new joint.shapes.standard.Polygon({
-                    position: { x: paperX - 24, y: paperY - 24 },
-                    size: { width: 48, height: 48 },
+                position: {x: paperX - 24, y: paperY - 24},
+                size: {width: 48, height: 48},
                 attrs: {
                     body: {
                         refPoints: '0.5,0 1,0.5 0.5,1 0,0.5', // Diamond shape points
@@ -168,8 +167,8 @@
 
         function createEllipse(paperX, paperY) {
             const rect = new joint.shapes.standard.Ellipse({
-                    position: { x: paperX - 40, y: paperY - 24 },
-                    size: { width: 80, height: 48 },
+                position: {x: paperX - 40, y: paperY - 24},
+                size: {width: 80, height: 48},
                 attrs: {
                     body: {
                         fill: 'transparent',
@@ -188,8 +187,8 @@
 
         function createText(paperX, paperY) {
             const textBlock = new joint.shapes.standard.TextBlock({
-                    position: { x: paperX - 40, y: paperY - 24 },
-                    size: { width: 80, height: 48 },
+                position: {x: paperX - 40, y: paperY - 24},
+                size: {width: 80, height: 48},
                 attrs: {
                     body: {
                         fill: 'transparent',
@@ -207,6 +206,7 @@
             const elementView = textBlock.findView(paper);
             elementView.addTools(createToolsView());
         }
+
         //create shape - END
 
         //init draggalble - START
@@ -264,6 +264,7 @@
                 }
             }
         });
+
         //init draggable - END
 
         function getViewportCenter() {
@@ -315,15 +316,15 @@
             }
         }
 
-            $('#btn-delete').click(function() {
+        $('#btn-delete').click(function () {
             deleteShape()
         });
 
-            $('#btn-copy').click(function() {
+        $('#btn-copy').click(function () {
             copyShape();
         });
 
-            $('#btn-paste').click(function() {
+        $('#btn-paste').click(function () {
             pasteShape();
         });
 
@@ -378,15 +379,21 @@
         });
 
         //add text to text block - START
-            paper.on('element:contextmenu', function (elementView,ev) {
-                ev.preventDefault();
+        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);
+                }
             }
         });
 
@@ -436,13 +443,13 @@
 
             $resizeHandle.resizable({
                 handles: 'n, e, s, w, ne, se, sw, nw',
-                    start: function() {
+                start: function () {
                     if (activeElementView) {
                         activeElementView.hideTools();
                     }
                     originalBBox = selectedElement.getBBox();
                 },
-                    resize: function(event, ui) {
+                resize: function (event, ui) {
                     if (selectedElement && originalBBox) {
                         const scale = paper.scale();
                         const newWidth = ui.size.width / scale.sx;
@@ -452,14 +459,14 @@
                         const newY = originalBBox.y + (ui.position.top - ui.originalPosition.top) / scale.sy;
 
                         if (selectedElement.get('angle')) {
-                                selectedElement.resize(newWidth, newHeight, { direction: 'center' });
+                            selectedElement.resize(newWidth, newHeight, {direction: 'center'});
                         } else {
                             selectedElement.position(newX, newY);
                             selectedElement.resize(newWidth, newHeight);
                         }
                     }
                 },
-                    stop: function() {
+                stop: function () {
                     if (activeElementView) {
                         activeElementView.showTools();
                         showResizeHandle(activeElementView);
@@ -470,7 +477,6 @@
         }
 
 
-
         function hideResizeHandle() {
             if ($resizeHandle.data('ui-resizable')) {
                 $resizeHandle.resizable('destroy');
@@ -481,8 +487,8 @@
         //create shape - START
         function createRectangle(paperX, paperY) {
             const rect = new joint.shapes.standard.Rectangle({
-                    position: { x: paperX - 40, y: paperY - 24 },
-                    size: { width: 80, height: 48 },
+                position: {x: paperX - 40, y: paperY - 24},
+                size: {width: 80, height: 48},
                 attrs: {
                     body: {
                         fill: 'transparent',
@@ -500,8 +506,6 @@
         }
 
 
-
-
         // Zoom
         const zoomStep = 0.2;
         const minScale = 0.2;
@@ -535,7 +539,7 @@
         });
     });
 
-    </script>
+</script>
 </body>
 
 </html>