A WordPress plugin for creating interactive, node-based maps with connections. Built with jsPlumb, this plugin allows you to visually design and display complex diagrams, flowcharts, or maps on your WordPress site using a simple shortcode.
- Custom Post Type: Adds a "CardMaps" post type to your WordPress admin for easy management.
- Visual Editor: A drag-and-drop interface to add, position, and connect nodes (cards).
- Node Customization: Add titles, captions, images, and links to each card.
- Connection Styling: Customize the color, thickness, and style of the connecting lines.
- Rails System: Add horizontal or vertical rails to align nodes neatly.
- Frontend Rendering: Display your map on any page or post with the
[cardmap id="..."]shortcode. - Interactive Frontend: Users can pan and zoom the map for better viewing.
- Fullscreen Mode: A dedicated button to view the map in fullscreen.
- Download the plugin as a
.zipfile from the GitHub repository. - In your WordPress admin dashboard, navigate to Plugins > Add New.
- Click Upload Plugin and select the
.zipfile you downloaded. - Click Install Now and then Activate Plugin.
- After activating the plugin, a new CardMaps menu will appear in your WordPress admin sidebar.
- Click CardMaps > Add New to create a new map.
- Give your map a title and use the visual editor on the page to build your map:
- Add Node: Creates a new card on the canvas.
- Add Rail: Adds a horizontal or vertical rail for alignment.
- Connect Mode: Click this, then click two nodes to draw a connection between them.
- Delete Mode: Click this, then click a node to delete it.
- Double-click any node to edit its content (title, caption, image, link).
- Click the Save Map button in the editor toolbar to save your progress.
- Once you are finished, click the main Publish or Update button for the post.
- To display the map, copy the shortcode provided in the "Shortcode" meta box (e.g.,
[cardmap id="123"]) and paste it into any post or page.
- β¨ New Feature: Custom background image support for frontend maps
- β¨ New Feature: Background size control (Auto, Cover, Contain, Stretch)
- β¨ New Feature: Background repeat options (Repeat, No-repeat, Repeat-x, Repeat-y)
- π¨ Improvement: WordPress Media Library integration for easy image selection
- π¨ Improvement: Live image preview in settings page
- π¦ Improvement: Background settings included in export/import functionality
- π§ Enhancement: Backward compatible - existing maps work without modification
- π Major Feature: Dynamic Rail Connection System - connections now intelligently slide along rails as cards move
- β¨ New Feature: Real-time connection anchor updates during drag - smooth visual feedback while dragging
- β¨ New Feature: Smart anchor positioning on rails based on card position relative to rail
- β¨ New Feature: Automatic anchor recalculation on page load - connections display correctly without manual adjustment
- π― Improvement: Precise connection alignment to rail edges (left/right for vertical rails, top/bottom for horizontal rails)
- π― Improvement: Connection points maintain optimal position along rail length based on card position
- π§ Fix: Proper jsPlumb v2.15.6 API usage with endpoints[].setAnchor() for dynamic updates
- π§ Fix: Real-time position tracking during drag using current element position instead of stale data
- π§ Fix: Immediate visual updates with connection.repaint() after anchor changes
- β‘ Technical: Added updateAllRailAnchors() method for batch anchor recalculation
- β‘ Technical: Improved coordinate system handling for accurate rail-node positioning
- ποΈ Removed: Story mode feature completely removed from plugin (editor, JavaScript, CSS)
- π§ Critical Fix: Arrow overlays now properly visible on all arrow-styled connections (straight, flowchart, dashed, dotted)
- π§ Critical Fix: Context menu now works multiple times without requiring page refresh
- π§ Critical Fix: Style overlap issue resolved - styles now switch cleanly without remnants of previous style
- β¨ New Feature: Added arrow support for dashed and dotted connection styles
- β¨ New Feature: Added "Dashed with Arrows" style option
- β¨ New Feature: Added "Dotted with Arrows" style option
- β¨ New Feature: Added "Bezier with Arrows" style option
- β¨ New Feature: Automatic migration system to update settings to modern standards
- οΏ½ Improvement: Removed "Default Connection Line Style" global setting (now uses per-connection styling only)
- π Improvement: Added backwards compatibility for legacy style names (rounded-flowchart, curved-bezier, parallel, etc.)
- π Improvement: Enhanced arrow overlay rendering with proper fill, stroke, and foldback properties
- π Improvement: Improved style normalization for old/incorrect naming conventions
- π Improvement: Better event handler cleanup to prevent duplicate listeners
- β‘ Technical: Version-based migration system for automatic settings updates
- β‘ Technical: Proper paint style reset to prevent style overlap
- β‘ Technical: Multiple delayed repaints for reliable arrow rendering
- β‘ Technical: Re-attach context menu after connector changes to maintain functionality
- π Critical Bug Fix: Fixed JavaScript syntax errors in frontend.js caused by console.log removal process
- π§ Code Repair: Removed orphaned object literals that were left behind from automated cleanup
- β Stability Restored: All JavaScript files are now error-free and fully functional
- π― Quality Improvement: Enhanced cleanup process to prevent similar issues in the future
- π Production Ready: Plugin is stable and ready for deployment
- π§Ή Code Cleanup: Removed all development console.log statements from JavaScript files for production readiness
- ποΈ Feature Removal: Completely removed ruler overlay functionality from the plugin
- β‘ Performance Boost: Cleaner codebase with reduced console output improves performance
- π§ Settings Cleanup: Removed unused ruler settings from admin panel and configuration
- π¦ Optimized Bundle: Smaller JavaScript bundle size after removing ruler code and debug logs
- π‘ Production Ready: Professional, clean code without development artifacts
- π― Streamlined: Focused feature set without unnecessary complexity
- π¨ Major UI Enhancement: Completely redesigned card settings panel with sophisticated modern visuals
- β¨ Enhanced Settings Toggle: Beautiful gradient background with smooth rotation animations and color transitions
- π« Animated Panel: Settings panel now slides down smoothly with elegant cubic-bezier easing
- π― Premium Form Styling: All inputs and selects feature modern styling with focus states, shadows, and hover effects
- π Clear Labeling: Added professional uppercase labels for all card settings fields
- π΅ Enhanced Image Button: Select Image button features primary gradient color and icon for better visibility
- π Custom Dropdowns: Styled select boxes with custom arrows and improved user experience
- π¨ Sophisticated Colors: Modern gradient schemes, subtle shadows, and refined color palette throughout
- β‘ Smooth Animations: Transform effects, hover states, and transitions on all interactive elements
- π‘ Better UX: Enhanced visual feedback and accessibility across the entire settings interface
- β¨ New Feature: Intelligent Auto-Align button for effortless card organization.
- π― Smart Detection: Automatically identifies cards positioned within 80px proximity for grouping.
- π Horizontal Alignment: Aligns cards with similar Y-positions to their proportional average for perfect rows.
- π Vertical Alignment: Aligns cards with similar X-positions to their proportional average for perfect columns.
- βοΈ Customizable: Enable/disable the Auto-Align button via Settings β Editor Settings.
- πΎ Full Undo Support: Integrated with history system - press Ctrl+Z to undo any alignment.
- π’ User-Friendly Feedback: Toast notifications show how many card groups were aligned.
- π¨ One-Click Operation: Single button press creates clean, organized layouts instantly.
- π§ Non-Destructive: All alignment operations are reversible and work alongside manual positioning.
- π§ Critical Fix: Resolved card link styling rendering issues on frontend.
- β Dashed Lines Fix: Dashed connection lines now properly display as dashed instead of being invisible or appearing as straight lines.
- β Dotted Lines Fix: Dotted connection lines now properly display as dotted instead of being invisible or appearing as straight lines.
- π¨ CSS Enhancement: Removed default animation from connection paths to allow custom dash/dot styles to render correctly.
- β‘ SVG Attributes: Added proper
strokeDasharraySVG attribute support alongside jsPlumb'sdashstyleproperty. - π Animation Control: Connection animations now only apply when explicitly enabled via the
cardmap-connection-animclass. - π‘ Technical Fix: Resolved CSS animation conflict where
stroke-dasharrayused for animation was overriding intentional dash/dot styling. - π Style Application: Improved connection style application with manual SVG attribute setting after connection creation.
- π Consistency: All connection styles (straight, dashed, dotted, rail-based) now render consistently on frontend and admin.
- π Critical Bug Fix: Individual connection styles now display correctly on frontend - fixed rail styling override issue
- π§ Enhanced Context Menu: Right-click context menu now works properly on all connections with proper event handling
- π― Complete Workflow: Verified end-to-end individual connection styling from admin panel to frontend display
- β‘ Performance: Cleaned up debugging logs and optimized connection style application
- β Fully Working: Individual connection styling feature now 100% functional across admin and frontend
- π¨ Individual Connection Styling: Revolutionary new feature allowing each connection to have its own independent style settings, separate from card settings.
- π±οΈ Right-Click Context Menu: Intuitive right-click interface on connections to instantly change their style (normal, dashed, dotted, arrows, etc.).
- π― Smart Priority System: Complete implementation of connection style priority: individual connection > source node > target node > global default.
- β¨ Enhanced User Experience: Immediate visual feedback when changing connection styles with real-time preview.
- π§ Fixed Style Application: Resolved issues where connection style changes in the panel weren't taking effect properly.
- π Improved Data Structure: Connection data now properly stores and manages individual style properties.
- β‘ Performance Optimized: Streamlined style rendering and repaint operations for better responsiveness.
- π¨ Professional UI: Clean, contextual menu design that integrates seamlessly with the existing interface.
- π Full Compatibility: Both admin editor and frontend display now fully support individual connection styling.
- π Critical Bug Fix: Fixed connection style rendering issue where normal/solid lines were incorrectly displayed with dashed styles on the frontend.
- β¨ New Connection Style: Added 'Normal' connection style option for clean solid lines without arrows, providing better visual clarity.
- π― Enhanced Consistency: Improved consistency between admin editor and frontend connection style rendering for all line types.
- π§ Better Defaults: Updated default connection style handling to properly support normal, dashed, dotted, and arrow styles.
- π Improved Compatibility: Enhanced connection style fallback behavior for existing maps to ensure proper rendering.
- β‘ Performance: Optimized connection style configuration for faster rendering and better user experience.
- π― Enhanced History System: Complete overhaul of undo/redo functionality with proper state management and UI feedback.
- π Interactive History Panel: New history dropdown showing all actions with timestamps and the ability to jump to any point in history.
- π Smart History Tracking: Automatic history saving for all major actions including node creation, connection creation, deletions, and modifications.
- β‘ Improved Performance: Better connection rendering with reduced gaps and improved SVG positioning accuracy.
- π¨ Better UI/UX: Disabled state indicators for undo/redo buttons, better visual feedback, and cleaner interface.
- π§ Fixed Rail Connections: Resolved issues with frontend connection gaps and improved rail-to-node connection accuracy.
- β¨οΈ Keyboard Shortcuts: Enhanced Ctrl+Z (undo) and Ctrl+Y (redo) support with proper state management.
- πΎ Persistent History: History state properly maintained across editor sessions with smart cleanup.
- π Performance Optimizations: Reduced unnecessary repaints and improved connection calculation speed.
- Major Enhancement: Completely redesigned connection precision system for pixel-perfect accuracy.
- Smart Anchoring: Connections to cards now automatically snap to the nearest edge center (top, bottom, left, right) for perfect alignment regardless of where you click.
- Precise Rail Connections: Connections to rails maintain exact pixel positioning where you click for maximum flexibility.
- Unified Coordinate System: Fixed inconsistencies between node-to-rail and rail-to-node connections ensuring both directions work perfectly.
- Improved User Experience: Eliminated pixel-level positioning errors on cards while maintaining precise control on rails.
- Technical: Completely rewrote anchor calculation functions with unified coordinate handling and better error management.
- Fix: Improved clicking precision for rail connections - connections now anchor exactly where you click instead of connecting to a different location.
- Enhancement: Updated default card size to 192px Γ 240px for better visual balance and consistency.
- Technical: Fixed coordinate transformation logic in anchor calculation functions for more accurate positioning.
- Improvement: Moved fullscreen link generation from frontend to admin panel for cleaner user experience.
- Feature: Added automatic fullscreen mode when accessing cardmap links with fullscreen parameter.
- New Feature: Added visible Undo/Redo buttons (βΆ β·) in the toolbar for easy access to history navigation.
- New Feature: Added Auto-Align button (π) that proportionally distributes cards evenly within their current area.
- Enhancement: Dynamic connection anchors - connections to rails now move smoothly along the rail as you drag connected cards.
- Enhancement: Improved frontend connection rendering to match admin panel appearance exactly.
- Enhancement: Better anchor handling for rail connections with proper saved anchor support.
- Enhancement: Connections now properly process saved precise anchors from the admin panel.
- Removed: Grid snap and ruler features removed for simplified, cleaner interface.
- Fix: Connections now properly reach rails without gaps on the frontend.
- Fix: Connection styling now matches perfectly between admin panel and frontend display.
- Fix: Added initialization delays to ensure rails are fully set up before connections are created.
- New Feature: Added comprehensive export/import functionality for plugin settings. Users can now backup their settings or transfer them between sites.
- Export: Download all plugin settings as a JSON file for backup or migration purposes.
- Import: Upload and restore settings from a previously exported JSON file.
- User-Friendly: Added intuitive UI controls in the settings page with progress feedback and error handling.
- New Feature: Added ruler overlay functionality in the editor for precise element alignment.
- Ruler: Toggle-able ruler overlay with customizable color and opacity for accurate positioning.
- Keyboard Shortcut: Press 'R' key to quickly toggle ruler on/off.
- Fixed: Connection style selection now updates visually in real-time. Previously, selecting different connection styles (straight, bezier, dashed, etc.) from the dropdown had no visual effect on existing connections.
- Technical: Removed CSS
!importantdeclarations that were preventing JavaScript from updating connection styles dynamically. - Enhanced: Added proper repaint calls and improved error handling for connection style changes.
- Improved: Added user feedback via toast notifications when connection styles are updated.
- Debugging: Enhanced console logging to help identify connection style issues in the future.
- Added rail appearance controls in the admin editor: rail style (solid/dashed/dotted), color picker, and thickness.
- Improved rail settings panel positioning: panel now appears adjacent to the hovered rail and respects pan/zoom.
- Fixed plugin update checker slug and published release tags so WordPress can detect updates.
- Added additional rail appearance styles (dash-heavy, dash-subtle, double-line, striped, gradient, embossed) and improved dashed rendering for better visibility.
- Bugfix: Ensure rail appearance changes persist across save/load in the editor and reflect immediately on existing connections. Added extra debug logging to assist with persistence issues.