diff --git a/components/agents/AgentGenerationWorkspaceDarkV2.tsx b/components/agents/AgentGenerationWorkspaceDarkV2.tsx
index eddc486b0..ae202e977 100644
--- a/components/agents/AgentGenerationWorkspaceDarkV2.tsx
+++ b/components/agents/AgentGenerationWorkspaceDarkV2.tsx
@@ -1630,6 +1630,101 @@ function DetailResultLocalEditDialog({
) : null}
+ {isScaleAdjustMode
+ ? regions
+ .filter((region) => region.targetRect)
+ .map((region) => {
+ const sourceRect = region.rect;
+ const targetRect = region.targetRect as DetailResultLocalEditRect;
+ const markerId = `detail-scale-arrow-${region.id}`;
+ const connectorPoints = [
+ {
+ key: "nw",
+ source: { x: sourceRect.x, y: sourceRect.y },
+ target: { x: targetRect.x, y: targetRect.y },
+ },
+ {
+ key: "ne",
+ source: {
+ x: sourceRect.x + sourceRect.width,
+ y: sourceRect.y,
+ },
+ target: {
+ x: targetRect.x + targetRect.width,
+ y: targetRect.y,
+ },
+ },
+ {
+ key: "sw",
+ source: {
+ x: sourceRect.x,
+ y: sourceRect.y + sourceRect.height,
+ },
+ target: {
+ x: targetRect.x,
+ y: targetRect.y + targetRect.height,
+ },
+ },
+ {
+ key: "se",
+ source: {
+ x: sourceRect.x + sourceRect.width,
+ y: sourceRect.y + sourceRect.height,
+ },
+ target: {
+ x: targetRect.x + targetRect.width,
+ y: targetRect.y + targetRect.height,
+ },
+ },
+ ];
+ return (
+
+ );
+ })
+ : null}
{isScaleAdjustMode
? regions
.filter((region) => region.targetRect)
diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index 5436259f6..06dafff24 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -2495,6 +2495,7 @@ export function ImageNode({
const targetRect = region.targetRect as NormalizedCropRect;
return {
region,
+ sourceStyle: getNormalizedRectOverlayStyle(region.rect, boxCutoutMetrics),
targetRect,
scalePercent: deriveCanvasScalePercentFromRects(region.rect, targetRect),
style: getNormalizedRectOverlayStyle(targetRect, boxCutoutMetrics),
@@ -8591,6 +8592,92 @@ export function ImageNode({
}}
/>
) : null}
+ {localEditScaleTargetOverlays.map(({ region, sourceStyle, style }) => {
+ const sourceLeft = Number(sourceStyle.left || 0);
+ const sourceTop = Number(sourceStyle.top || 0);
+ const sourceWidth = Number(sourceStyle.width || 0);
+ const sourceHeight = Number(sourceStyle.height || 0);
+ const targetLeft = Number(style.left || 0);
+ const targetTop = Number(style.top || 0);
+ const targetWidth = Number(style.width || 0);
+ const targetHeight = Number(style.height || 0);
+ const markerId = `canvas-scale-arrow-${node.id}-${region.id}`;
+ const connectorPoints = [
+ {
+ key: "nw",
+ source: { x: sourceLeft, y: sourceTop },
+ target: { x: targetLeft, y: targetTop },
+ },
+ {
+ key: "ne",
+ source: { x: sourceLeft + sourceWidth, y: sourceTop },
+ target: { x: targetLeft + targetWidth, y: targetTop },
+ },
+ {
+ key: "sw",
+ source: { x: sourceLeft, y: sourceTop + sourceHeight },
+ target: { x: targetLeft, y: targetTop + targetHeight },
+ },
+ {
+ key: "se",
+ source: {
+ x: sourceLeft + sourceWidth,
+ y: sourceTop + sourceHeight,
+ },
+ target: {
+ x: targetLeft + targetWidth,
+ y: targetTop + targetHeight,
+ },
+ },
+ ];
+
+ return (
+
+ );
+ })}
{localEditScaleTargetOverlays.map(
({ region, scalePercent, style, targetRect }) => {
const left = Number(style.left || 0);