[🎨Component] Configure Canvas component to record actions
To make undo/redo work, I have implemented an undo history stack and a redo history stack
User's actions are recorded, and for implementing undo and redo, I have created necessary action classes(ColorChangeAction, SizeChangeAction, ColorSizeChangeAction). If other actions are added, one should extend the abstract class Action
Basically the undo is just a inverse action of the recorded action
[📒Docs] Update documentation for useDotting and Introduction
Users are shown an example of Dotting where they are able to undo/redo in the introduction page
I updated the table for useDotting with details on undo and redo
I created a example component UndoRedo.tsx to show how users can implement undo/redo
[🔗Other] Create Stack data structure
2. Create template for pull request
[🔗Other] Create pull request template
To manage pull requests easily, I have added a markdown template
3. Create a react app repository to allow local dotting library testing
[🔗Other] Create a React repository for testing dotting locally
I realized there may be problems when we test dotting using storybook. I thought that we should be able to test dotting locally in a react project
I have tried to implement undo and redo withctrl + z, however, due to storybook's strange behavior, it seems that add event listener does not work in the initial load. Maybe we should later use something other than storybook for our documentation? (Gather other contributors??)
There is still a problem when we allow users to undo with ctrl + z. The problem happens in next.js apps. In next.js, due to server side rendering we will not be able to add event listeners to the document. That is why for now, I have only allowed users to undo/redo by using useDotting
We have lots of features now, and I felt we need to make tests first and foremost before we keep expanding. It is getting harder to track whether the newly implemented features will not break the library. We should create tests!!
I will merge this request for now since this feature is needed in another project, dotting-genai. If you have any comments on this PR please feel free to open an issue.
🚀 [Related Issue: #6]
Preview
https://user-images.githubusercontent.com/57612141/230714449-3c10a8d4-3511-4f4b-bfc6-3dfa088872b7.mov
Changes
1. Implement Undo/Redo
[🪝Hooks] Added undo/redo function in
useDotting
[🎨Component] Configure Canvas component to record actions
ColorChangeAction
,SizeChangeAction
,ColorSizeChangeAction
). If other actions are added, one should extend the abstract classAction
[📒Docs] Update documentation for
useDotting
andIntroduction
useDotting
with details on undo and redoUndoRedo.tsx
to show how users can implement undo/redo[🔗Other] Create Stack data structure
2. Create template for pull request
[🔗Other] Create pull request template
3. Create a react app repository to allow local dotting library testing
[🔗Other] Create a React repository for testing dotting locally
dotting
using storybook. I thought that we should be able to test dotting locally in a react projectNotes
ctrl + z
, however, due to storybook's strange behavior, it seems that add event listener does not work in the initial load. Maybe we should later use something other than storybook for our documentation? (Gather other contributors??)ctrl + z
. The problem happens in next.js apps. In next.js, due to server side rendering we will not be able to add event listeners to thedocument
. That is why for now, I have only allowed users to undo/redo by usinguseDotting
Next Up?