Skip to content

Include color legend in PNG exports.#4

Open
eliweaver732 wants to merge 1 commit into
fusionpbx:mainfrom
eliweaver732:feature/png-export-color-legend
Open

Include color legend in PNG exports.#4
eliweaver732 wants to merge 1 commit into
fusionpbx:mainfrom
eliweaver732:feature/png-export-color-legend

Conversation

@eliweaver732

Copy link
Copy Markdown

What

This PR adds a color legend to PNG exports of call flow diagrams. When downloading the visualization as PNG, a legend strip is now appended below the diagram showing all the color-coded node types used in the flow (e.g., ring groups, IVR, voicemail, external calls, etc.).

Why

Problem: PNG exports of call flow diagrams lacked context about what the colors mean. Users had to remember or look up the color-to-type mapping separately, making the exported diagrams less self-documenting and harder to share with non-technical stakeholders.

Impact:

  • For operators/managers: Exported diagrams are now self-contained and easier to understand without additional documentation
  • For sharing/documentation: Call flow diagrams can be printed or shared with clear visual references
  • For consistency: The legend in PNG matches the web UI legend, ensuring consistent interpretation

How It Works

The implementation enhances the dodownload_png() function to:

  1. Extract legend data from the existing legend_items array (same items shown in the web UI)
  2. Calculate responsive sizing based on canvas DPI/device pixel ratio to ensure crisp rendering on retina displays
  3. Flow legend items horizontally across rows, wrapping to new lines if needed to fit the diagram width
  4. Render color boxes and labels below the diagram with:
    • Rounded rectangle color swatches matching the node colors
    • Text labels in matching style
    • Proper spacing and padding
  5. Expand canvas height to accommodate the legend strip without overlapping the diagram

Key Details

  • Resolution-aware: Scales legend dimensions (box size, fonts, padding) to match the canvas's actual rendering resolution
  • Responsive layout: Automatically wraps legend items to multiple rows based on available width
  • Canvas API compatibility: Uses roundRect() if available (modern browsers), falls back to regular rect() for broader compatibility
  • No UI changes: Legend is only added to PNG exports; the interactive diagram remains unchanged

Match the web UI indicators so exported diagrams remain readable without the on-page legend.

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant