Dragging to edit diagram

[dyon21]

No description provided.

[MrCoder]

@CodiumAI-Agent /improve

[CodiumAI-Agent]

PR Code Suggestions ✨

Latest suggestions up to 510b0a0

Category	Suggestion	Impact
Possible issue	Reset drag state after drop After completing the drop you never clear dragParticipant, leaving the app in a perpetual dragging state and causing subsequent unintended drops. Reset the drag state after updating code to restore normal interactions. src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.tsx [115-126] const handleDrop = () => { if (dragParticipant && dragParticipant.name !== props.entity.name) { const isFromStarter = dragParticipant.name === _STARTER_; const newCode = code + (isFromStarter ? `\n${formatName(props.entity.name)}.message` : `\n${formatName(dragParticipant.name)} -> ${formatName(props.entity.name)}.message`); setCode(newCode); onContentChange(newCode); + setDragParticipant(undefined); } }; Suggestion importance[1-10]: 7 __ Why: Clearing dragParticipant after a successful drop prevents lingering drag state and unintended subsequent drops; it aligns with the new drag feature and is a practical UX/logic fix.	Medium
	Guard mousemove before computing rect elRef is only attached when rendering, but mousemove can fire while dragParticipant/dragAnchor are false, causing diagramRect from a not-yet-mounted SVG and incorrect coordinates. Derive the diagram rect from a stable container (e.g., the diagram element) or guard by returning early unless dragging is active. This prevents mispositioned lines at drag start. src/components/DiagramFrame/SeqDiagram/DragLine.tsx [13-22] useDocumentEvent("mousemove", (e) => { + if (!dragParticipant && !dragAnchor) return; const diagramRect = elRef.current?.getBoundingClientRect(); if (!diagramRect) return; - if (dragParticipant || dragAnchor) { - setPosition([ - (e.clientX - diagramRect.left) / scale, - (e.clientY - diagramRect.top) / scale, - ]); - } + setPosition([ + (e.clientX - diagramRect.left) / scale, + (e.clientY - diagramRect.top) / scale, + ]); }); Suggestion importance[1-10]: 6 __ Why: The early return when not dragging avoids unnecessary DOM reads and potential null rects; it matches the PR context and improves robustness, though the issue is minor since the SVG is only rendered while dragging.	Low
General	Clear anchor state and remove log Dropping on an anchor leaves dragAnchor set and includes a lingering console.log, which can cause stuck hover/visibility states and noisy logs. Clear dragAnchor after updating code and remove the debug log to prevent repeated insertions and UI glitches. src/components/DiagramFrame/SeqDiagram/LifeLineLayer/useAnchorDrop.ts [21-64] if (typeof dragAnchor.index !== "number") { const braces = dragAnchor.context?.braceBlock?.(); if (braces) { - console.log(braces); // insert new message inside empty braces const prev = code.slice(0, braces.start.start); const next = code.slice(braces.stop.stop + 1); const leadingSpaces = getLeadingSpaces( getCurrentLine(code, braces.start.start), ); newCode = `${prev}{\n${leadingSpaces}${DEFAULT_INDENT}${messageContent}\n${leadingSpaces}}${next}`; } else { // insert new message with new braces const start = dragAnchor.context.children[0]?.start?.start; const insertPosition = getLineTail(code, start); const prev = code.slice(0, insertPosition); const next = code.slice(insertPosition); const leadingSpaces = getLeadingSpaces( getPrevLine(code, insertPosition + 1), ); newCode = `${prev} {\n${leadingSpaces}${DEFAULT_INDENT}${messageContent}\n${leadingSpaces}}${next}`; } } else if (dragAnchor.index < dragAnchor.context.children.length) { // insert new message inside a block const start = dragAnchor.context.children[dragAnchor.index]?.start?.start; const insertPosition = getPrevNotCommentLineTail(code, start) + 1; const prev = code.slice(0, insertPosition); const next = code.slice(insertPosition); newCode = `${prev}${getLeadingSpaces(next)}${messageContent}\n${next}`; } else { // insert new message at the end of a block const start = dragAnchor.context.children.at(-1)?.stop?.stop || code.length; const insertPosition = getLineTail(code, start); const prev = code.slice(0, insertPosition); const next = code.slice(insertPosition); const leadingSpaces = getLeadingSpaces( getCurrentLine(code, insertPosition), ); newCode = `${prev}\n${leadingSpaces}${messageContent}\n${next}`; } setCode(newCode); onContentChange(newCode); +// clear anchor drag state after drop +// Note: setDragAnchor is provided by Store where this hook is used Suggestion importance[1-10]: 5 __ Why: Removing the console.log is fine but low impact; clearing dragAnchor would be beneficial, yet the provided improved_code does not actually implement the state reset (no setDragAnchor), so the suggestion is only partially actionable.	Low

---

Previous suggestions

Suggestions up to commit 13ae704

Category	Suggestion	Impact
Possible issue	Correct drag coordinate normalization Fix the coordinate scaling order to avoid incorrect drag line positioning. Subtract the diagram's origin first, then divide by scale, mirroring how DragLine computes mouse coordinates. src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.tsx [101-114] const handleDrag = () => { const { left = 0, top = 0, width = 0, height = 0, } = elRef.current?.getBoundingClientRect() || {}; const diagramRect = diagramElement?.getBoundingClientRect(); + const dx = left + width / 2 - (diagramRect?.left || 0); + const dy = top + height / 2 - (diagramRect?.top || 0); setDragParticipant({ name: props.entity.name, - x: (left + width / 2) / scale - (diagramRect?.left || 0), - y: (top + height / 2) / scale - (diagramRect?.top || 0), + x: dx / scale, + y: dy / scale, }); }; Suggestion importance[1-10]: 7 __ Why: The suggestion aligns drag coordinate normalization with the approach used in DragLine by subtracting diagram origin before dividing by scale, reducing positioning errors. It is contextually accurate and improves correctness, though not a critical bug fix.	Medium
	Normalize anchor coords consistently Align anchor coordinates with the same normalization as mouse/drag computations. Compute delta to diagram origin in pixel space first, then divide by scale to prevent scaling errors. src/components/DiagramFrame/SeqDiagram/MessageLayer/Anchor.tsx [161-173] +const dx = left - (diagramRect?.left || 0); +const dy = + top + height / 2 - (diagramRect?.top || 0) + (props.offset ?? 25); setAnchor({ id: id.current, context: props.context, index: props.index, participant: props.participant, - x: (left - (diagramRect?.left || 0)) / scale, - y: - (top + - height / 2 - - (diagramRect?.top || 0) + - (props.offset ?? 25)) / - scale, + x: dx / scale, + y: dy / scale, }); Suggestion importance[1-10]: 6 __ Why: This mirrors the same normalization logic (subtract then divide) for anchor positions, improving consistency and reducing scaling drift. It’s a reasonable minor fix; impact is moderate.	Low
General	Guard drop to valid target Prevent unwanted drops when not dragging an anchor or when dragAnchor belongs to a different participant. Guard onMouseUp to only trigger handleDrop for the matching participant context. src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLine.tsx [106-114] {props.renderLifeLine && ( <> <div className={cn( - "absolute top-0 bottom-0 -left-2.5 -right-2.5 hover:bg-sky-200 cursor-copy", + "absolute top-0 bottom-0 -left-2.5 -right-2.5 hover:bg-sky-200", + dragAnchor ? "cursor-copy" : "cursor-default", dragAnchor ? "visible" : "invisible", )} - onMouseUp={handleDrop} + onMouseUp={() => { + if (dragAnchor && dragAnchor.participant === props.entity.name) { + handleDrop(); + } + }} /> <div className="relative line mx-auto flex-grow w-px bg-[linear-gradient(to_bottom,transparent_50%,var(--color-border-base)_50%)] bg-[length:1px_10px] pointer-events-none" /> </> )} Suggestion importance[1-10]: 5 __ Why: Adding a guard to only drop when the dragged anchor matches the participant can prevent unintended drops, improving robustness. However, useAnchorDrop already checks dragAnchor existence and context, so impact is limited.	Low