Adriano/TieMeasureFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: enable scale/rotation on annotation objects and restore transforms on load

Browse Source 
- Remove hasControls:false and lockScaling from markers so resize/rotate handles appear
- Add setActiveObject() after creating arrows and rectangles for immediate control visibility
- Restore angle, scaleX, scaleY when loading saved annotations (all object types)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adriano
2026-02-08 10:29:30 +01:00
parent dfc1c3ed95
commit 00d6c68b2f
2 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/static/js/annotation-editor.js
+28 -8
View File
@@ -403,10 +403,7 @@ function annotationEditor() {
left: x,
top: y,
selectable: true,
hasControls: false,
hasBorders: true,
lockScalingX: true,
lockScalingY: true,
// Custom properties
objectType: 'marker',
markerNumber: markerNumber,
@@ -469,6 +466,7 @@ function annotationEditor() {
});
this.canvas.add(arrow);
this.canvas.setActiveObject(arrow);
this.isDirty = true;
window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: this.getAnnotationsJson() } }));
return arrow;
@@ -505,6 +503,7 @@ function annotationEditor() {
});
this.canvas.add(rect);
this.canvas.setActiveObject(rect);
this.isDirty = true;
window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: this.getAnnotationsJson() } }));
return rect;
@@ -885,8 +884,15 @@ function annotationEditor() {
if (obj.type === 'marker') {
var savedColor = this.currentColor;
if (obj.fill) this.currentColor = obj.fill;
this.addMarker(obj.left, obj.top, obj.markerNumber);
var created = this.addMarker(obj.left, obj.top, obj.markerNumber);
this.currentColor = savedColor;
// Restore transforms (scale + rotation)
created.set({
angle: obj.angle || 0,
scaleX: obj.scaleX || 1,
scaleY: obj.scaleY || 1,
});
created.setCoords();
} else if (obj.type === 'arrow') {
var savedColor2 = this.currentColor;
var savedWidth = this.currentStrokeWidth;
@@ -900,10 +906,19 @@ function annotationEditor() {
var y1 = obj.y1 != null ? obj.y1 : obj.top;
var x2 = obj.x2 != null ? obj.x2 : obj.left + (obj.width || 100);
var y2 = obj.y2 != null ? obj.y2 : obj.top + (obj.height || 50);
this.addArrow(x1, y1, x2, y2);
var created2 = this.addArrow(x1, y1, x2, y2);
this.currentColor = savedColor2;
this.currentStrokeWidth = savedWidth;
this.currentLineDash = savedDash;
// Restore transforms (position + scale + rotation)
created2.set({
left: obj.left,
top: obj.top,
angle: obj.angle || 0,
scaleX: obj.scaleX || 1,
scaleY: obj.scaleY || 1,
});
created2.setCoords();
} else if (obj.type === 'area') {
var savedColor3 = this.currentColor;
var savedWidth2 = this.currentStrokeWidth;
@@ -912,12 +927,17 @@ function annotationEditor() {
if (obj.strokeWidth) this.currentStrokeWidth = obj.strokeWidth;
if (obj.lineDash) this.currentLineDash = obj.lineDash;
else this.currentLineDash = [];
var w = (obj.width || 150) * (obj.scaleX || 1);
var h = (obj.height || 100) * (obj.scaleY || 1);
this.addRect(obj.left, obj.top, w, h);
var created3 = this.addRect(obj.left, obj.top, obj.width || 150, obj.height || 100);
this.currentColor = savedColor3;
this.currentStrokeWidth = savedWidth2;
this.currentLineDash = savedDash2;
// Restore transforms (scale + rotation)
created3.set({
angle: obj.angle || 0,
scaleX: obj.scaleX || 1,
scaleY: obj.scaleY || 1,
});
created3.setCoords();
}
}