jsmind icon indicating copy to clipboard operation
jsmind copied to clipboard

feat: Add SVG engine support for draggable node helper lines

Open UmbraCi opened this issue 4 months ago • 0 comments

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

  1. Engine Detection

    • Detects the current rendering engine (SVG or Canvas) in the constructor
    • Stores the engine type in is_svg_engine property
  2. 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
  3. 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

UmbraCi avatar Oct 22 '25 15:10 UmbraCi