format and comments fix

add label to any shape
UPDATE: change text with contextmenu click
2025-11-29 23:09:07 +01:00 · 2025-11-28 23:21:28 +01:00 · 2025-11-22 11:03:04 +01:00 · 2025-11-22 10:36:44 +01:00 · 2025-11-21 23:27:46 +01:00 · 2025-11-21 10:46:57 +01:00
3 changed files with 538 additions and 449 deletions
--- a/README.md
+++ b/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
- [ ] 11. Połączenie kształtów (strzałka ->)
- [ ] 12. Usunięcie kształtów
+- [x] 10. Zmiana kolorów kształtów
+- [x] 11. Połączenie kształtów (strzałka ->)
+- [x] 12. Usunięcie kształtów

 ### Tekst
 - [x] 13. Dodanie tekstu
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 </head>

 <body>
-    <div class="toolbar">
+<div class="toolbar">
    <p>Kształty - przeciągnij i upuść</p>
    <div class="shape-wrapper toolbar-wrapper">
        <div id="shape-rectangle" class="shape" data-type="rectangle"></div>
@@ -23,29 +23,35 @@
        <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">
        <button id="zoom-in">+</button>
        <button id="zoom-out">-</button>
    </div>
-    </div>
+</div>

-    <div id="resize-handle" style="position: absolute; display: none; border: 2px dashed #4A90E2; z-index: 10;"></div>
-    <div class="canvas-container">
+<div id="resize-handle" style="position: absolute; display: none; border: 2px dashed #4A90E2; z-index: 10;"></div>
+<div class="canvas-container">
    <div id="paper"></div>
-    </div>
+</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>
-    <script>
+<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>
+<script>
    let selectedElement = null;
    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({
@@ -66,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();
                        }
                    })
@@ -78,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
@@ -100,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',
@@ -120,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',
@@ -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() {
@@ -247,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();
        });

@@ -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);
+                }
            }
        });

@@ -366,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;
@@ -382,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);
@@ -400,7 +477,6 @@
        }


-
        function hideResizeHandle() {
            if ($resizeHandle.data('ui-resizable')) {
                $resizeHandle.resizable('destroy');
@@ -411,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',
@@ -430,7 +506,6 @@
        }


-
        // Zoom
        const zoomStep = 0.2;
        const minScale = 0.2;
@@ -464,7 +539,7 @@
        });
    });

-    </script>
+</script>
 </body>

 </html>
--- a/style.css
+++ b/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;
+}
Author	SHA1	Message	Date
Andrii Solianyk	1b76c1df3a	format and comments fix	2025-11-29 23:09:07 +01:00
Andrii Solianyk	4cb50a4276	add label to any shape	2025-11-28 23:21:28 +01:00
PatryKania	11c2222536	UPDATE: change text with contextmenu click	2025-11-22 11:03:04 +01:00
PatryKania	1541d62bb5	FIX: hide color palette	2025-11-22 10:36:44 +01:00
B3rcik	cd13d21e5f	Update index.html	2025-11-21 23:27:46 +01:00
Andrii Solianyk	d8e3dc8cee	de facto done	2025-11-21 10:46:57 +01:00