jsmind
jsmind copied to clipboard
feat: Add SVG engine support for draggable node helper lines
Description
This PR enhances the draggable node plugin to use SVG for drawing helper lines when the SVG engine is enabled, improving performance for large-scale mind maps.
Changes
Modified Files
- src/plugins/jsmind.draggable-node.js
Key Features
-
Engine Detection
- Detects the current rendering engine (SVG or Canvas) in the constructor
- Stores the engine type in is_svg_engine property
-
SVG Support
- Creates SVG element instead of Canvas when SVG engine is used
- Draws helper lines using SVG path elements with bezier curves
- Reuses the bezier curve logic from SvgGraph for consistency
-
Backward Compatibility
- Canvas engine continues to work as before
- No breaking changes to existing code
- Fully compatible with all existing features
Implementation Details
New Methods
- _create_svg_element(tag): Creates SVG elements with proper namespace
- svg_draw_line(x1, y1, x2, y2, color): Draws helper lines using SVG
- _svg_bezier_to(path, x1, y1, x2, y2): Draws bezier curves (reuses SvgGraph logic)
Modified Methods
- create_canvas(): Creates SVG or Canvas based on engine type
esize(): Handles sizing for both SVG and Canvas
- magnet_shadow(): Routes to appropriate drawing method based on engine
- clear_lines(): Clears SVG or Canvas based on engine type
Performance Benefits
SVG Engine:
- Incremental updates: Only modifies the helper line element
- Lower memory usage: Stores only one SVG element instead of canvas buffer
- Visual consistency: Uses the same rendering engine as mind map connections
- Better interactivity: SVG elements can directly bind events
Canvas Engine:
- Maintains original behavior
- No performance impact
- Fully backward compatible
Code Reuse
- Reuses SVG element creation method from SvgGraph
- Reuses bezier curve drawing algorithm from SvgGraph
- Maintains consistent code style with existing SVG implementation
Testing
- Tested with both SVG and Canvas engines
- Verified helper lines display correctly during drag operations
- Confirmed backward compatibility with Canvas engine
- No IDE diagnostics errors
Related Issues
Improves performance for large-scale mind maps (500+ nodes) when using SVG engine.
Checklist
- [x] Code follows the project style guidelines
- [x] Changes are backward compatible
- [x] No breaking changes
- [x] Tested with both SVG and Canvas engines
- [x] Documentation provided