Merge remote-tracking branch 'origin/AndriiFunctionality' into AndriiFunctionality

implementing functions 5,6,7,14
Update README.md
2025-11-14 19:40:01 +01:00 · 2025-11-14 19:39:48 +01:00 · 2025-11-14 19:38:34 +01:00 · 2025-11-14 15:40:07 +01:00
4 changed files with 39861 additions and 163 deletions
--- a/README.md
+++ b/README.md
@@ -8,29 +8,29 @@ Funkcjonalności aplikacji koncentrują się na tworzeniu i modyfikacji kształt
 ## Funkcje:

 ### Kształty
-1. Tworzenie prostokąta
-2. Tworzenie rombu
-3. Tworzenie elipsy
+- [x] 1. Tworzenie prostokąta
+- [x] 2. Tworzenie rombu
+- [x] 3. Tworzenie elipsy

 ### Akcje na kształtach
-4. Zmiana rozmiaru kształtów.
-5. Przeciągnięcie kzstałtu po planszy
-6. Usunięcie kształtu
-7. Zaznaczenie kształtu
-8. Kopiowanie kształtu
-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
+- [ ] 4. Zmiana rozmiaru kształtów.
+- [x] 5. Przeciągnięcie kzstałtu po planszy
+- [x] 6. Usunięcie kształtu
+- [x] 7. Zaznaczenie kształtu
+- [ ] 8. Kopiowanie kształtu
+- [ ] 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

 ### Tekst
-13. Dodanie tekstu
-14. Usunięcie tekstu
+- [ ] 13. Dodanie tekstu
+- [ ] 14. Usunięcie tekstu

 ### Plansza i akcje na niej
-15. Przybliżenie planszy
-16. Oddalenie planszy
-17. Przewijanie planszy
+- [ ] 15. Przybliżenie planszy
+- [ ] 16. Oddalenie planszy
+- [ ] 17. Przewijanie planszy

 *P.S. Jak będzie brakować funkcjonalności:*
 - Obracanie kształtu
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@

 <body>
    <div class="toolbar">
-        <p>Kształty</p>
+        <p>Kształty - przeciągnij i upuść</p>
        <div class="shape-wrapper toolbar-wrapper">
            <div id="shape-rectangle" class="shape" data-type="rectangle"></div>
            <div id="shape-ellipse" class="shape" data-type="ellipse"></div>
@@ -25,8 +25,11 @@

    <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="https://cdn.jsdelivr.net/npm/@joint/core@4.0.1/dist/joint.js"></script>
+    <script src="joint.js"></script>
    <script>
+    let selectedElement = null;
+    let activeElementView = null;
+
    $(document).ready(function () {
        //init paper - Start
        const graph = new joint.dia.Graph();
@@ -39,6 +42,20 @@
        });
        //init paper - END

+        // obwódka i znaczek usuwanie
+        function createToolsView() {
+            return new joint.dia.ToolsView({
+                tools: [
+                    new joint.elementTools.Boundary({
+                        padding: 10,
+                    }),
+                    new joint.elementTools.Remove({
+                        focusOpacity: 0.5,
+                    })
+                ]
+            });
+        }
+
        //create shape - START
        function createRectangle(paperX, paperY) {
            const rect = new joint.shapes.standard.Rectangle({
@@ -56,6 +73,8 @@
                }
            });
            graph.addCell(rect);
+            const elementView = rect.findView(paper);
+            elementView.addTools(createToolsView());
        }

        function createDiamond(paperX, paperY) {
@@ -75,6 +94,8 @@
                }
            });
            graph.addCell(rect);
+            const elementView = rect.findView(paper);
+            elementView.addTools(createToolsView());
        }

        function createEllipse(paperX, paperY) {
@@ -93,6 +114,8 @@
                }
            });
            graph.addCell(rect);
+            const elementView = rect.findView(paper);
+            elementView.addTools(createToolsView());
        }

        function createText(paperX, paperY) {
@@ -113,6 +136,8 @@
                }
            });
            graph.addCell(textBlock);
+            const elementView = textBlock.findView(paper);
+            elementView.addTools(createToolsView());
        }
        //create shape - END

@@ -148,6 +173,9 @@
                const paperX = (x - translate.tx) / scale.sx;
                const paperY = (y - translate.ty) / scale.sy;

+                activeElementView = null;
+                selectedElement = null;
+
                if (shapeType === 'rectangle') {
                    createRectangle(paperX, paperY);
                } else if (shapeType === 'ellipse') {
@@ -157,10 +185,41 @@
                } else if (shapeType === 'text') {
                    createText(paperX, paperY);
                }
+                const cells = graph.getCells();
+                if (cells.length > 0) {
+                    const lastCell = cells[cells.length - 1];
+                    const lastView = lastCell.findView(paper);
+                    if (lastView && typeof lastView.hideTools === 'function') {
+                        lastView.hideTools();
+                    }
+                }
            }
        });
        //init draggable - END

+        paper.on('element:pointerclick', function (elementView) {
+            if (activeElementView && activeElementView !== elementView) {
+                activeElementView.hideTools();
+            }
+            elementView.showTools();
+            activeElementView = elementView;
+
+            selectedElement = elementView.model;
+        });
+
+        paper.on('blank:pointerdown', function () {
+            if (activeElementView) {
+                if (typeof activeElementView.hideTools === 'function') {
+                    activeElementView.hideTools();
+                }
+                if (typeof activeElementView.unhighlight === 'function') {
+                    activeElementView.unhighlight();
+                }
+                activeElementView = null;
+            }
+            selectedElement = null;
+        });
+
        //add text to text block - START
        paper.on('element:pointerdblclick', function (elementView) {
            if (elementView.model.attributes.type === 'standard.TextBlock') {
@@ -171,6 +230,15 @@
                }
            }
        });
+
+        $(document).on('keydown', function (e) {
+            if (e.key === 'Delete' && selectedElement) {
+                // if (selectedElement.attributes.type === 'standard.TextBlock') {
+                selectedElement.remove();
+                selectedElement = null;
+                // }
+            }
+        });
        //add text to text block - END
    });
    </script>
--- a/joint.js
+++ b/joint.js
--- a/style.css
+++ b/style.css
@@ -44,6 +44,7 @@
 .shape {
     background: transparent;
     border: 1px solid white;
+     cursor: pointer;
 }

 .toolbar {
Author	SHA1	Message	Date
Andrii Solianyk	b1a2dac5e4	Merge remote-tracking branch 'origin/AndriiFunctionality' into AndriiFunctionality	2025-11-14 19:40:01 +01:00
Andrii Solianyk	44a52e0627	implementing functions 5,6,7,14	2025-11-14 19:39:48 +01:00
Andrii Solianyk	1459d4ab8d	Update README.md	2025-11-14 19:38:34 +01:00
Andrii Solianyk	ff88da0079	first steps	2025-11-14 15:40:07 +01:00