From 899d1a10171d4c2bd5771f5facadf1b202a98ee3 Mon Sep 17 00:00:00 2001
From: Patryk <s094236@student.tu.kielce.pl>
Date: Thu, 30 Oct 2025 20:21:09 +0100
Subject: [PATCH] ADD: add text to text block and improve draggable

---
 index.html | 102 +++++++++++++++++++++++++++++++++--------------------
 style.css  |   7 ++++
 2 files changed, 70 insertions(+), 39 deletions(-)
diff --git a/index.html b/index.html
index 7f91c1e..ae4d3aa 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
     <link rel="stylesheet" href="style.css">
     <title>DrawDiagrams</title>
 </head>
@@ -23,6 +24,7 @@
     </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="https://cdn.jsdelivr.net/npm/@joint/core@4.0.1/dist/joint.js"></script>
     <script>
         $(document).ready(function () {
@@ -31,8 +33,8 @@
             const paper = new joint.dia.Paper({
                 el: $('#paper'),
                 model: graph,
-                width: 1920,
-                height: 1080,
+                width: window.innerWidth,
+                height: window.innerHeight,
                 gridSize: 20,
             });
             //init paper - END
@@ -40,8 +42,8 @@
             //create shape - START
             function createRectangle(paperX, paperY) {
                 const rect = new joint.shapes.standard.Rectangle({
-                    position: { x: paperX - 50, y: paperY - 30 },
-                    size: { width: 100, height: 60 },
+                    position: { x: paperX - 40, y: paperY - 24 },
+                    size: { width: 80, height: 48 },
                     attrs: {
                         body: {
                             fill: 'transparent',
@@ -58,8 +60,8 @@
 
             function createDiamond(paperX, paperY) {
                 const rect = new joint.shapes.standard.Rectangle({
-                    position: { x: paperX - 30, y: paperY - 30 },
-                    size: { width: 60, height: 60 },
+                    position: { x: paperX - 24, y: paperY - 24 },
+                    size: { width: 48, height: 48 },
                     angle: 45,
                     attrs: {
                         body: {
@@ -77,8 +79,8 @@
 
             function createEllipse(paperX, paperY) {
                 const rect = new joint.shapes.standard.Ellipse({
-                    position: { x: paperX - 50, y: paperY - 30 },
-                    size: { width: 100, height: 60 },
+                    position: { x: paperX - 40, y: paperY - 24 },
+                    size: { width: 80, height: 48 },
                     attrs: {
                         body: {
                             fill: 'transparent',
@@ -95,13 +97,14 @@
 
             function createText(paperX, paperY) {
                 const textBlock = new joint.shapes.standard.TextBlock({
-                    position: { x: paperX - 50, y: paperY - 20 },
-                    size: { width: 100, height: 40 },
+                    position: { x: paperX - 40, y: paperY - 24 },
+                    size: { width: 80, height: 48 },
                     attrs: {
                         body: {
                             fill: 'transparent',
                             stroke: '#000000',
-                            strokeWidth: 1
+                            strokeWidth: 1,
+                            strokeDasharray: '5,5'
                         },
                         label: {
                             text: 'Tekst...',
@@ -113,41 +116,62 @@
             }
             //create shape - END
 
-            //init test draggalble - START
-            $('.shape').attr('draggable', true);
-            $('.shape').on('dragstart', function (event) {
-                event.originalEvent.dataTransfer.setData('shape', $(this).data('type'));
+            //init draggalble - START
+            $('.shape').draggable({
+                helper: function () {
+                    const $clone = $(this).clone();
+                    $clone.css({
+                        opacity: 0.8,
+                        cursor: 'grabbing',
+                        borderColor: '#000',
+                        color: '#000',
+                    });
+                    return $clone;
+                },
+                cursor: 'move',
+                revert: 'invalid',
+                appendTo: 'body',
+                zIndex: 1000
             });
 
-            $('#paper').on('dragover', function (event) {
-                event.preventDefault();
-            });
+            $('#paper').droppable({
+                accept: '.shape',
+                drop: function (event, ui) {
+                    const shapeType = ui.helper.data('type');
 
+                    const containerOffset = $(this).offset();
+                    const x = event.pageX - containerOffset.left;
+                    const y = event.pageY - containerOffset.top;
 
-            $('#paper').on('drop', function (event) {
-                event.preventDefault();
-                const shapeType = event.originalEvent.dataTransfer.getData('shape');
+                    const scale = paper.scale();
+                    const translate = paper.translate();
+                    const paperX = (x - translate.tx) / scale.sx;
+                    const paperY = (y - translate.ty) / scale.sy;
 
-                const containerOffset = $(this).offset();
-                const x = event.originalEvent.clientX - containerOffset.left;
-                const y = event.originalEvent.clientY - containerOffset.top;
-
-                const scale = paper.scale();
-                const translate = paper.translate();
-                const paperX = (x - translate.tx) / scale.sx;
-                const paperY = (y - translate.ty) / scale.sy;
-
-                if (shapeType == 'rectangle') {
-                    createRectangle(paperX, paperY);
-                } else if (shapeType == "ellipse") {
-                    createEllipse(paperX, paperY)
-                } else if (shapeType == 'diamond') {
-                    createDiamond(paperX, paperY);
-                } else if (shapeType == "text") {
-                    createText(paperX, paperY);
+                    if (shapeType === 'rectangle') {
+                        createRectangle(paperX, paperY);
+                    } else if (shapeType === 'ellipse') {
+                        createEllipse(paperX, paperY);
+                    } else if (shapeType === 'diamond') {
+                        createDiamond(paperX, paperY);
+                    } else if (shapeType === 'text') {
+                        createText(paperX, paperY);
+                    }
                 }
             });
-            //init test draggable - END
+            //init draggable - END
+
+            //add text to text block - START
+            paper.on('element:pointerdblclick', function (elementView) {
+                if (elementView.model.attributes.type === 'standard.TextBlock') {
+                    const currentText = elementView.model.attr('label/text');
+                    const newText = prompt('Edytuj tekst:', currentText);
+                    if (newText != null) {
+                        elementView.model.attr('label/text', newText);
+                    }
+                }
+            });
+            //add text to text block - END
         });
     </script>
 </body>
diff --git a/style.css b/style.css
index a9a9bde..83f17ae 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,9 @@
+ * {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+ }
+
  .shape-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
@@ -32,6 +38,7 @@
      display: flex;
      align-items: center;
      justify-content: center;
+     user-select: none;
  }
 
  .shape {
