From 56dcca57aa9e60c862f291e3a505c79a0d39961f Mon Sep 17 00:00:00 2001 From: Gabriele Cimaschi Date: Thu, 10 Sep 2026 19:45:56 +0200 Subject: [PATCH] fix: ora le forme sono drag&drop. --- public/js/views/ticketDetail.js | 50 ++++++++++++++++++++++++++++----- 1 file changed, 43 insertions(+), 7 deletions(-) diff --git a/public/js/views/ticketDetail.js b/public/js/views/ticketDetail.js index fabe2c6..0deab17 100644 --- a/public/js/views/ticketDetail.js +++ b/public/js/views/ticketDetail.js @@ -1764,17 +1764,17 @@ const TicketDetailView = { return; } - const defaultW = 120; - const defaultH = 80; - + // Interactive click-and-drag for rectangle, circle / ellipse, etc. const newShapeObj = { id: Date.now(), type: 'shape', shapeType: shapeType, - x: x - defaultW / 2, - y: y - defaultH / 2, - width: defaultW, - height: defaultH, + startX: x, + startY: y, + x: x, + 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;