diff --git a/app/api/canvas/local-edit/route.ts b/app/api/canvas/local-edit/route.ts
index fdf9c7ec5..273bb85c9 100644
--- a/app/api/canvas/local-edit/route.ts
+++ b/app/api/canvas/local-edit/route.ts
@@ -747,14 +747,12 @@ function buildScaleAdjustAnnotationSvg(params: {
}) {
const { width, height, regions, scalePercent } = params;
const minSide = Math.max(1, Math.min(width, height));
- const strokeWidth = Math.max(3, Math.round(minSide * 0.0048));
- const targetColor = "#00d4ff";
- const sourceColor = "#ff3b30";
- const connectorColor = "#14c8ff";
- const dash = Math.max(12, Math.round(strokeWidth * 2.8));
- const gap = Math.max(8, Math.round(strokeWidth * 1.8));
- const connectorWidth = Math.max(2, Math.round(strokeWidth * 0.74));
- const markerSize = Math.max(8, Math.round(strokeWidth * 3.1));
+ const strokeWidth = Math.max(2, Math.round(minSide * 0.0034));
+ const targetColor = "#008cff";
+ const sourceColor = "#e03131";
+ const connectorColor = "#667085";
+ const connectorWidth = Math.max(2, Math.round(strokeWidth * 0.72));
+ const markerSize = Math.max(7, Math.round(strokeWidth * 2.6));
const regionSvg = regions
.map((region) => {
@@ -775,59 +773,26 @@ function buildScaleAdjustAnnotationSvg(params: {
height - badgeSize / 2 - 4
);
const fontSize = Math.max(13, Math.round(badgeSize * 0.52));
- const sourceRight = source.left + source.width;
- const sourceBottom = source.top + source.height;
- const targetRight = target.left + target.width;
- const targetBottom = target.top + target.height;
- const sourceCorners = [
- { x: source.left, y: source.top },
- { x: sourceRight, y: source.top },
- { x: sourceRight, y: sourceBottom },
- { x: source.left, y: sourceBottom },
- ];
- const targetCorners = [
- { x: target.left, y: target.top },
- { x: targetRight, y: target.top },
- { x: targetRight, y: targetBottom },
- { x: target.left, y: targetBottom },
- ];
- const connectorSvg = sourceCorners
- .map((corner, cornerIndex) => {
- const targetCorner = targetCorners[cornerIndex];
- const distance = Math.hypot(targetCorner.x - corner.x, targetCorner.y - corner.y);
- if (distance < Math.max(8, strokeWidth * 2.2)) return "";
- const dx = (targetCorner.x - corner.x) / distance;
- const dy = (targetCorner.y - corner.y) / distance;
- const startInset = Math.min(distance * 0.16, Math.max(5, strokeWidth * 1.8));
- const endInset = Math.min(distance * 0.18, Math.max(8, strokeWidth * 2.8));
- const x1 = corner.x + dx * startInset;
- const y1 = corner.y + dy * startInset;
- const x2 = targetCorner.x - dx * endInset;
- const y2 = targetCorner.y - dy * endInset;
- return ``;
- })
- .join("");
- const cornerHandleSize = Math.max(7, Math.round(strokeWidth * 2.2));
- const sourceCornerSvg = sourceCorners
- .map(
- (corner) =>
- ``
- )
- .join("");
- const targetCornerSvg = targetCorners
- .map(
- (corner) =>
- ``
- )
- .join("");
+ const sourceCenterX = source.left + source.width / 2;
+ const sourceCenterY = source.top + source.height / 2;
+ const targetCenterX = target.left + target.width / 2;
+ const targetCenterY = target.top + target.height / 2;
+ const centerDistance = Math.hypot(
+ targetCenterX - sourceCenterX,
+ targetCenterY - sourceCenterY
+ );
+ const connectorSvg =
+ centerDistance > Math.max(8, strokeWidth * 2.4)
+ ? ``
+ : "";
return `
${connectorSvg}
-
-
- ${sourceCornerSvg}
- ${targetCornerSvg}
-
+
+
+
+
+
${region.index}
`;
})
@@ -835,9 +800,11 @@ function buildScaleAdjustAnnotationSvg(params: {
return Buffer.from(`