fix: Canvas is not expandable or scrollable beyond current view size

[mtrezza]

Pull Request

• Report security issues confidentially.
• Any contribution is under this license.

Summary by CodeRabbit

• New Features

  • Real-time drag and resize callbacks for canvas elements (external handlers can react during interactions).
  • Dynamic canvas sizing that expands based on element positions.

• Behavior Changes

  • Increased grid/snap spacing for coarser movement and relaxed bounds for freer dragging.
  • Grid-snapping and position clamping to prevent negative coordinates; existing save/update flows preserved.

• Style

  • Canvas background changed to white; resize handle hover no longer shows a colored background.

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

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Adds optional onDrag/onResize callbacks to CanvasElement and propagates live drag/resize events to CustomDashboard, which tracks ongoing drag/resize state and computes dynamic canvas sizing via getCanvasSize and an invisible sizing element.

Changes

Cohort / File(s)	Summary
Canvas element callbacks & Rnd config src/dashboard/Data/CustomDashboard/CanvasElement.react.js	Added optional onDrag and onResize props; internal handleDrag/handleResize invoke callbacks with id, position, and size. Wired into the Rnd component (onDrag, onResize) while preserving onDragStop/onResizeStop. Increased snap/grid spacing from [16,16] to [50,50] and removed bounds="parent".
Dashboard drag/resize tracking & canvas sizing src/dashboard/Data/CustomDashboard/CustomDashboard.react.js	Added dragPosition state and canvasRef. New methods: snapToGrid(), handleDrag(), handleDragEnd(), handleResize(), handleResizeEnd(), and getCanvasSize(). Wraps element onPositionChange/onSizeChange to clear drag/resize state, clamps positions to non-negative, and renders an invisible absolutely-positioned element sized by getCanvasSize() to drive dynamic canvas dimensions.
Styling tweaks src/dashboard/Data/CustomDashboard/CanvasElement.scss, src/dashboard/Data/CustomDashboard/CustomDashboard.scss	Removed hover background on the resize handle and changed canvas background from #f4f5f7 to #ffffff.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Rnd as Rnd Component
    participant CanvasElement
    participant CustomDashboard
    participant DOM

    User->>Rnd: start drag/resize
    Rnd->>CanvasElement: emit onDrag / onResize (live)
    CanvasElement->>CustomDashboard: onDrag(id,x,y,w,h) / onResize(id,w,h,x,y)
    CustomDashboard->>CustomDashboard: update dragPosition (snap/clamp)
    CustomDashboard->>DOM: re-render (invisible sizing element via getCanvasSize)

    User->>Rnd: release
    Rnd->>CanvasElement: onDragStop / onResizeStop
    CanvasElement->>CustomDashboard: onPositionChange / onSizeChange (final)
    CustomDashboard->>CustomDashboard: handleDragEnd / handleResizeEnd (clear dragPosition)
    CustomDashboard->>DOM: finalize canvas layout

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• fix: Canvas is not expandable or scrollable beyond current view size #3140 — Similar changes adding onDrag/onResize, increasing grid snap to 50, removing bounds="parent", and adding drag/resize tracking plus dynamic canvas sizing.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is largely incomplete, missing all required template sections: Issue link, Approach description, and Tasks checklist.	Add the Issue section with a link to the resolved issue, describe the Approach/changes made (e.g., grid-snapping, dynamic canvas sizing, drag/resize callbacks), and complete or remove the Tasks checklist.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: Canvas is not expandable or scrollable beyond current view size' accurately reflects the main change objective, addressing canvas expansion and scrollability limitations.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[parseplatformorg]

🎉 This change has been released in version 8.3.0-alpha.21