fix: ora le forme sono drag&drop.

public/js/views/ticketDetail.js

@@ -1764,17 +1764,17 @@ const TicketDetailView = {
                 return;
               }
 
-              const defaultW = 120;
+              // Interactive click-and-drag for rectangle, circle / ellipse, etc.
-              const defaultH = 80;
-
               const newShapeObj = {
                 id: Date.now(),
                 type: 'shape',
                 shapeType: shapeType,
-                x: x - defaultW / 2,
+                startX: x,
-                y: y - defaultH / 2,
+                startY: y,
-                width: defaultW,
+                x: x,
-                height: defaultH,
+                y: y,
+                width: 0,
+                height: 0,
                 fillColor: fillColor,
                 borderColor: borderColor,
                 borderWidth: borderWidth
@@ -1782,6 +1782,8 @@ const TicketDetailView = {
 
               pageObjects.push(newShapeObj);
               selectedObject = newShapeObj;
+              isResizingObj = true;
+              resizeHandleIndex = 99; // Dynamic 2D shape creation drag
               redrawPageObjects();
               return;
             }
@@ -1823,6 +1825,19 @@ const TicketDetailView = {
               const oldW = obj.width || 1;
               const oldH = obj.height || 1;
 
+              if (obj.type === 'shape' && resizeHandleIndex === 99) {
+                // Dynamic creation box for rectangle, ellipse, etc.
+                const startX = obj.startX !== undefined ? obj.startX : obj.x;
+                const startY = obj.startY !== undefined ? obj.startY : obj.y;
+
+                obj.x = Math.min(startX, x);
+                obj.y = Math.min(startY, y);
+                obj.width = Math.abs(x - startX);
+                obj.height = Math.abs(y - startY);
+                redrawPageObjects();
+                return;
+              }
+
               if (obj.type === 'shape' && (obj.shapeType === 'line' || obj.shapeType === 'arrow')) {
                 // Line / Arrow endpoint dragging
                 if (resizeHandleIndex === 0) { // Origin (P1: x, y)
@@ -1976,6 +1991,26 @@ const TicketDetailView = {
           };
 
           const stopDrawing = (e) => {
+            if (isResizingObj && selectedObject && selectedObject.type === 'shape') {
+              if (resizeHandleIndex === 99) {
+                if (selectedObject.width < 5 && selectedObject.height < 5) {
+                  const defaultW = 120;
+                  const defaultH = 80;
+                  const startX = selectedObject.startX !== undefined ? selectedObject.startX : selectedObject.x;
+                  const startY = selectedObject.startY !== undefined ? selectedObject.startY : selectedObject.y;
+                  selectedObject.x = startX - defaultW / 2;
+                  selectedObject.y = startY - defaultH / 2;
+                  selectedObject.width = defaultW;
+                  selectedObject.height = defaultH;
+                }
+              } else if (selectedObject.shapeType === 'line' || selectedObject.shapeType === 'arrow') {
+                if (Math.hypot(selectedObject.width, selectedObject.height) < 5) {
+                  selectedObject.width = 120;
+                  selectedObject.height = 0;
+                }
+              }
+            }
+
             if (isDrawingStroke && pageObjects.length > 0) {
               const activeObj = pageObjects[pageObjects.length - 1];
               if (activeObj && activeObj.type === 'stroke') {
@@ -1990,6 +2025,7 @@ const TicketDetailView = {
             isDraggingObj = false;
             isResizingObj = false;
             resizeHandleIndex = -1;
+            redrawPageObjects();
           };
 
           drawCanvas.onmouseup = stopDrawing;