fix: enable scale/rotation on annotation objects and restore transforms on load
- 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:
@@ -403,10 +403,7 @@ function annotationEditor() {
|
|||||||
left: x,
|
left: x,
|
||||||
top: y,
|
top: y,
|
||||||
selectable: true,
|
selectable: true,
|
||||||
hasControls: false,
|
|
||||||
hasBorders: true,
|
hasBorders: true,
|
||||||
lockScalingX: true,
|
|
||||||
lockScalingY: true,
|
|
||||||
// Custom properties
|
// Custom properties
|
||||||
objectType: 'marker',
|
objectType: 'marker',
|
||||||
markerNumber: markerNumber,
|
markerNumber: markerNumber,
|
||||||
@@ -469,6 +466,7 @@ function annotationEditor() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
this.canvas.add(arrow);
|
this.canvas.add(arrow);
|
||||||
|
this.canvas.setActiveObject(arrow);
|
||||||
this.isDirty = true;
|
this.isDirty = true;
|
||||||
window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: this.getAnnotationsJson() } }));
|
window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: this.getAnnotationsJson() } }));
|
||||||
return arrow;
|
return arrow;
|
||||||
@@ -505,6 +503,7 @@ function annotationEditor() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
this.canvas.add(rect);
|
this.canvas.add(rect);
|
||||||
|
this.canvas.setActiveObject(rect);
|
||||||
this.isDirty = true;
|
this.isDirty = true;
|
||||||
window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: this.getAnnotationsJson() } }));
|
window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: this.getAnnotationsJson() } }));
|
||||||
return rect;
|
return rect;
|
||||||
@@ -885,8 +884,15 @@ function annotationEditor() {
|
|||||||
if (obj.type === 'marker') {
|
if (obj.type === 'marker') {
|
||||||
var savedColor = this.currentColor;
|
var savedColor = this.currentColor;
|
||||||
if (obj.fill) this.currentColor = obj.fill;
|
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;
|
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') {
|
} else if (obj.type === 'arrow') {
|
||||||
var savedColor2 = this.currentColor;
|
var savedColor2 = this.currentColor;
|
||||||
var savedWidth = this.currentStrokeWidth;
|
var savedWidth = this.currentStrokeWidth;
|
||||||
@@ -900,10 +906,19 @@ function annotationEditor() {
|
|||||||
var y1 = obj.y1 != null ? obj.y1 : obj.top;
|
var y1 = obj.y1 != null ? obj.y1 : obj.top;
|
||||||
var x2 = obj.x2 != null ? obj.x2 : obj.left + (obj.width || 100);
|
var x2 = obj.x2 != null ? obj.x2 : obj.left + (obj.width || 100);
|
||||||
var y2 = obj.y2 != null ? obj.y2 : obj.top + (obj.height || 50);
|
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.currentColor = savedColor2;
|
||||||
this.currentStrokeWidth = savedWidth;
|
this.currentStrokeWidth = savedWidth;
|
||||||
this.currentLineDash = savedDash;
|
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') {
|
} else if (obj.type === 'area') {
|
||||||
var savedColor3 = this.currentColor;
|
var savedColor3 = this.currentColor;
|
||||||
var savedWidth2 = this.currentStrokeWidth;
|
var savedWidth2 = this.currentStrokeWidth;
|
||||||
@@ -912,12 +927,17 @@ function annotationEditor() {
|
|||||||
if (obj.strokeWidth) this.currentStrokeWidth = obj.strokeWidth;
|
if (obj.strokeWidth) this.currentStrokeWidth = obj.strokeWidth;
|
||||||
if (obj.lineDash) this.currentLineDash = obj.lineDash;
|
if (obj.lineDash) this.currentLineDash = obj.lineDash;
|
||||||
else this.currentLineDash = [];
|
else this.currentLineDash = [];
|
||||||
var w = (obj.width || 150) * (obj.scaleX || 1);
|
var created3 = this.addRect(obj.left, obj.top, obj.width || 150, obj.height || 100);
|
||||||
var h = (obj.height || 100) * (obj.scaleY || 1);
|
|
||||||
this.addRect(obj.left, obj.top, w, h);
|
|
||||||
this.currentColor = savedColor3;
|
this.currentColor = savedColor3;
|
||||||
this.currentStrokeWidth = savedWidth2;
|
this.currentStrokeWidth = savedWidth2;
|
||||||
this.currentLineDash = savedDash2;
|
this.currentLineDash = savedDash2;
|
||||||
|
// Restore transforms (scale + rotation)
|
||||||
|
created3.set({
|
||||||
|
angle: obj.angle || 0,
|
||||||
|
scaleX: obj.scaleX || 1,
|
||||||
|
scaleY: obj.scaleY || 1,
|
||||||
|
});
|
||||||
|
created3.setCoords();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -353,7 +353,7 @@
|
|||||||
<script>
|
<script>
|
||||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||||
</script>
|
</script>
|
||||||
<script src="{{ url_for('static', filename='js/annotation-editor.js') }}?v=8"></script>
|
<script src="{{ url_for('static', filename='js/annotation-editor.js') }}?v=9"></script>
|
||||||
<script>
|
<script>
|
||||||
function taskDrawing() {
|
function taskDrawing() {
|
||||||
const taskData = window.__taskData || {};
|
const taskData = window.__taskData || {};
|
||||||
|
|||||||
Reference in New Issue
Block a user