[ENG-1070] Don't move arrow onTranslate - Roam discourse relation arrow

[trangdoan982]

https://www.loom.com/share/7c8291348ccb42189311a7cec2efa416

Summary by CodeRabbit

• New Features
  • Arrows with both endpoints connected now bend when dragged instead of moving to a new position, providing adjustable curve control. Arrows with at least one free endpoint retain standard translation behavior.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[linear]

ENG-1070 Make sure users can't move the entire relation arrow (ie delete the binding). that drag interactions should only allow for bending change in Roam

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[trangdoan982]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR modifies the translation logic in DiscourseRelationShape utilities. When both arrow endpoints are bound, dragging the arrow now adjusts its bend instead of moving the endpoints. The implementation computes a page-space delta, derives terminal positions in arrow space, and determines a bend value by projecting the translated midpoint onto the line connecting the endpoints.

Changes

Cohort / File(s)	Change Summary
DiscourseRelationShape translation logic apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx	Modified onTranslateStart and onTranslate handlers to compute bend adjustment instead of endpoint translation when both arrow ends are bound; added midpoint projection and bend sign calculation based on orientation

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Key focus areas:
  • Verify correctness of page-space to arrow-space coordinate transformations
  • Validate midpoint projection logic and bend calculation formula
  • Confirm bend sign orientation logic produces expected visual behavior
  • Ensure backward compatibility when only one or zero endpoints are bound

Possibly related PRs

• discourse-graph#555: Implements the same bend-adjustment translation mechanism for discourse relations when both endpoints are bound, using midpoint projection to calculate bend values.

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: preventing arrow movement during translation for Roam discourse relation arrows, with ticket reference.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx (1)

433-488: Consider extracting the bend-from-translation logic to a shared helper.

This ~55-line block is duplicated verbatim in DiscourseRelationUtil.onTranslate (lines 928-983). Extracting it into a shared helper function (e.g., in helpers.tsx) would improve maintainability and ensure both classes stay in sync.

Example helper signature:

// In helpers.tsx
export const calculateBendFromTranslation = (
  editor: Editor,
  initialShape: DiscourseRelationShape,
  shape: DiscourseRelationShape,
  atTranslationStart: { pagePosition: Vec },
): TLShapePartial<DiscourseRelationShape> | undefined => {
  const bindings = getArrowBindings(editor, shape);
  if (!bindings.start || !bindings.end) return undefined;
  
  // ... bend calculation logic ...
  
  return {
    id: shape.id,
    type: shape.type,
    x: initialShape.x,
    y: initialShape.y,
    props: { bend: newBend },
  };
};

Then in both onTranslate handlers:

const bendUpdate = calculateBendFromTranslation(
  this.editor, initialShape, shape, atTranslationStart
);
if (bendUpdate) return bendUpdate;
// ... rest of original translation logic

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7b4cb58 and 80f5b08.

📒 Files selected for processing (1)

• apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/main.mdc)

**/*.{ts,tsx}: Use Tailwind CSS for styling where possible
When refactoring inline styles, use tailwind classes
Prefer type over interface in TypeScript
Use explicit return types for functions
Avoid any types when possible
Prefer arrow functions over regular function declarations
Use named parameters (object destructuring) when a function has more than 2 parameters
Use PascalCase for components and types
Use camelCase for variables and functions
Use UPPERCASE for constants
Function names should describe their purpose clearly
Prefer early returns over nested conditionals for better readability

Files:

• apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx

apps/roam/**/*.{js,ts,tsx,jsx,json}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Prefer existing dependencies from package.json when working on the Roam Research extension

Files:

• apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx

apps/roam/**/*.{ts,tsx,jsx,js,css,scss}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Files:

• apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx

apps/roam/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

apps/roam/**/*.{ts,tsx,js,jsx}: Use the roamAlphaApi docs from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when implementing Roam functionality
Use Roam Depot/Extension API docs from https://roamresearch.com/#/app/developer-documentation/page/y31lhjIqU when implementing extension functionality

Files:

• apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx

apps/roam/**

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Implement the Discourse Graph protocol in the Roam Research extension

Files:

• apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx

🧬 Code graph analysis (1)

apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx (1)

apps/roam/src/components/canvas/DiscourseRelationShape/helpers.tsx (2)

• getArrowBindings (141-153)
• getArrowTerminalsInArrowSpace (407-441)

🔇 Additional comments (1)

apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx (1)

928-983: Logic is correct for preventing arrow translation when both ends are bound.

The bend calculation correctly mirrors the existing onHandleDrag MIDDLE handle logic, ensuring consistent behavior. As noted above, this duplicates the logic in ReferencedNodeUtil and would benefit from extraction to a shared helper.