Feature/undo-redo

[inj-src]

Add Comprehensive Undo/Redo Functionality

Overview

This PR implements a complete undo/redo system for VisBug, allowing users to undo and redo all modifications made through the visual editing tools. This addresses one of the most requested features and significantly improves the user experience.

Keyboard Shortcuts

• Undo: Cmd+Z (Mac) / Ctrl+Z (Windows/Linux)
• Redo: Cmd+Shift+Z / Cmd+Y (Mac) / Ctrl+Shift+Z / Ctrl+Y (Windows/Linux)

Features Implemented

Core Infrastructure

• History Manager with configurable stack size (default: 50 items)
• Five specialized change types: StyleChange, AttributeChange, DOMChange, TextChange, BatchChange
• Automatic change merging for consecutive similar operations within 1 second
• Memory management with automatic cleanup

Style Features

All style-based tools now support undo/redo:

• Padding, Margin, Color, Font, Flex, Box Shadow, Hue Shift

DOM Manipulation Features

All DOM manipulation tools now support undo/redo:

• Move (keyboard and drag & drop)
• Text (content editing)
• Position (absolute positioning for HTML and SVG)

Selection Operations

• Duplicate (Cmd+D)
• Delete (Backspace/Delete)
• Clear Styles (Cmd+Alt+K)
• Cut (Cmd+X)
• Paste (Cmd+V)
• Paste Styles (Cmd+Alt+V)

Interactive Features

• Grip resize (width/height changes via handles)
• Image swap with intelligent caching for instant undo/redo

Technical Implementation

Architecture

• app/features/history.js - Core history management system (328 lines)
• app/features/history.test.js - Comprehensive test suite (588 lines)
• Integration across all feature modules

Key Design Decisions

• Change encapsulation: Each change type knows how to undo/redo itself
• Batch operations for multi-element selections
• Automatic merging reduces history pollution
• Element validation before undo/redo

Image Swap Optimization

• Caches remote images as blob URLs on first load
• Instant undo/redo even for network images once loaded
• Automatic cache cleanup

Files Changed

New Files

• app/features/history.js
• app/features/history.test.js

Modified Files

Core:

• app/features/index.js
• app/components/vis-bug/vis-bug.element.js

Features:

• app/features/padding.js, margin.js, color.js, font.js, flex.js, boxshadow.js, hueshift.js
• app/features/move.js, text.js, position.js
• app/features/selectable.js, imageswap.js
• app/components/selection/handle.element.js

Testing

• 25+ unit tests covering all Change classes and HistoryManager operations
• Manual testing of all features including edge cases
• No console errors or performance regressions

Compatibility

• No breaking changes
• Works with both HTML and SVG elements
• Compatible with all modern browsers

Impact

This feature improves VisBug's usability by:

• Encouraging experimentation with a safety net
• Reducing frustration from accidental changes
• Providing professional workflow expectations
• Enabling learning through before/after comparisons

[google-cla[bot]]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[RubyRedThomas]

I don't know how this works

[inj-src]

I don't know how this works

How can I help you with this?

[argyleink]

hi, thank you so much for the contribution :heart: however this project is no longer maintained / any code changes made will not publish to any of the extension services…

thank you again, I'm sorry it wont be able to reach others.