feat: remove CSS variables from SVG exports and add inline markers #328
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
Author
Contributor
|
In PowerPoint, elements are rendered properly, but edge connectors are not. |
Collaborator
Author
|
@tamang29 or @FadyGergesRezk can one of you take over this PR and the other one reviews? |
This PR improves SVG export compatibility with presentation software (Keynote, PowerPoint) by removing CSS variable dependencies and rendering markers as inline path elements. Key changes: SVG Export Improvements: - Replace CSS variables with hardcoded color values in all SVG components - Add InlineMarker component that renders markers as actual path elements instead of <marker> references (which don't survive "Break Apart" operations) - Consolidate constants from multiple files into single constants.ts Edge Rendering Fixes: - Fix pixel-perfect edge endpoint alignment with node boundaries - Add MARKER_PADDING (-3) to compensate for React Flow handle offset - Add SOURCE_CONNECTION_POINT_PADDING (3) to align source endpoints - Update useStepPathEdge to always use adjusted coordinates Required Interface (Ball-and-Socket) Improvements: - Socket arc is now perfectly concentric with the ball (same center point) - Socket radius = ball radius + 2px gap for proper UML notation - 90° arc span allows 4 connections (N,S,E,W) without overlap - Use exact floating-point coordinates (no rounding) for precision Path Parsing: - Add robust pathParsing.ts utility for extracting endpoint info from SVG paths - Handles all SVG path commands including relative coordinates and bezier curves Server: - Add conversionRouter for model-to-SVG conversion API endpoint Co-Authored-By: Claude Opus 4.5 <[email protected]>
FelixTJDietrich
changed the title
…el overlap - SfcActionTableNodeSVG: default actionRows to empty array when undefined, preventing crash in sidebar preview - PetriNet: add marginTop to Transition element config to prevent "Transition" and "Place" labels from overlapping in sidebar Co-Authored-By: Claude Opus 4.5 <[email protected]>
…al content Reduced height from 70 to 40 to match the header height, eliminating empty space below the underlined "Object" text in the sidebar preview. Co-Authored-By: Claude Opus 4.5 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
InlineMarkercomponent that renders markers as actual path elements instead of<marker>references (which don't survive "Break Apart" operations)Changes
SVG Export Improvements
constants.tspathParsing.tsutility for extracting endpoint info from SVG pathsEdge Rendering Fixes
MARKER_PADDING(-3) to compensate for React Flow handle offsetSOURCE_CONNECTION_POINT_PADDING(3) to align source endpointsuseStepPathEdgeto always use adjusted coordinatesRequired Interface (Ball-and-Socket) Improvements
Sidebar Fixes
actionRowsin SfcActionTableNodeSVG sidebar previewServer
conversionRouterfor model-to-SVG conversion API endpointTest plan
🤖 Generated with Claude Code