implementing functions 5,6,7,14

2025-11-14 19:39:48 +01:00
parent ff88da0079
commit 44a52e0627
2 changed files with 214 additions and 160 deletions
--- 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>
@@ -28,6 +28,8 @@
    <script src="joint.js"></script>
    <script>
    let selectedElement = null;
+    let activeElementView = null;
+
    $(document).ready(function () {
        //init paper - Start
        const graph = new joint.dia.Graph();
@@ -40,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({
@@ -57,22 +73,10 @@
                }
            });
            graph.addCell(rect);
+            const elementView = rect.findView(paper);
+            elementView.addTools(createToolsView());
        }

-            paper.on('element:pointerclick', function (elementView) {
-                selectedElement = elementView.model;
-            });
-
-
-            $(document).on('keydown', function (e) {
-                if (e.key === 'Delete' && selectedElement) {
-                    if (selectedElement.attributes.type === 'standard.TextBlock') {
-                        selectedElement.remove();
-                        selectedElement = null; // Reset after deletion
-                    }
-                }
-            });
-
        function createDiamond(paperX, paperY) {
            const rect = new joint.shapes.standard.Rectangle({
                position: { x: paperX - 24, y: paperY - 24 },
@@ -90,6 +94,8 @@
                }
            });
            graph.addCell(rect);
+            const elementView = rect.findView(paper);
+            elementView.addTools(createToolsView());
        }

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

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

@@ -163,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') {
@@ -172,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') {
@@ -186,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/style.css
+++ b/style.css
@@ -44,6 +44,7 @@
 .shape {
     background: transparent;
     border: 1px solid white;
+     cursor: pointer;
 }

 .toolbar {