alimozdemir / fabric-history Goto Github PK
View Code? Open in Web Editor NEWFabric.js history plugin
License: MIT License
Fabric.js history plugin
License: MIT License
Hello,
i have an issue, items become not selectable when doing undo/redo while editing.
Step to reproduce :
1 / Add a text
2 / Edit the text
3 / Do a undo while still editing the text
4 / Do a redo
5 / Text is not selectable anymore
http://jsfiddle.net/lk77/kz59stg7/66/
you can see on the fiddle that when you go on edit mode, selectable become false, and when you leave edit mode, selectable is true again.
but if you do undo/redo it stays like that, and never go back to true
thanks
How to pass values in this.extraProps??
Also how i can manage multiple canvases?
If undo
or redo
is called only one times more, the history will broke.
Reproduce steps:
Undo
button - first time,Undo
button - second time,Above steps same on redoing.
Is it possible to keep the activeObject after undo / redo?
Heya,
I've created some custom classes with FabricJS and am coming across issues with undo/redo.
i THINK the problem is how im intitalising those custom classes rather than anything to do with this libraries implementation. Have you successfully got history working with custom classes?
Thanks,
Perry
Hi,
Is there any way to skip an action/actions on an object to become part of fabic-history stack?
e.g
If a number of items are allowed to be added in the canvas but a default object should not be affected by undo/redo. It should remain there and undo/redo should work only for the actions on rest of the items
Hiya,
me again :) Im just wondering if you have tried using patterns with loadfromjson. I'm trying to include it in my project and having some issues with the object dissapearing from the canvas when i undeo then redo to reapply the pattern.
Steps
Expected outcome: pattern is reapplied to object
Actual outcome: object dissapears from canvas
this is my code to set fill with a pattern, i have implemented the function as a custom function of a group class i created. the area object is a Rect within the group.
_setBackgroundImage: function (url) {
canvas.offHistory();
const area = this._objects.find((el) => el.id === 'canvas-area' );
const self = this;
fabric.Image.fromURL(url, function (img) {
if (area.width > area.height) {
img.scaleToWidth(area.width);
} else {
img.scaleToHeight(area.height);
}
var patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.add(img);
patternSourceCanvas.renderAll();
patternSourceCanvas.setDimensions({
width: img.getScaledWidth(),
height: img.getScaledHeight(),
});
patternSourceCanvas.renderAll();
var pattern = new fabric.Pattern({
source: patternSourceCanvas.getElement(),
repeat: 'repeat',
});
area.set('fill', pattern);
self.set('_backgroundImage', url);
canvas.onHistory();
canvas.renderAll();
});
},
I have 2 issues.
Background image scaled and set, 2 path objects added and undo background image gets moved and gives some white space.
When undoing an object that added immediately after background image. It removes background image also.
Hello there,
I'm using fabric-js v5.2.4. and the latest version of fabric-history.
I added objects on my canvas, adding some attributes like an id, then constraint like lockration:true.
let rect = new fabric.Rect({
fill: '#FF5733',
id: "rect",
width: fabric.util.parseUnit('100mm'),
height: fabric.util.parseUnit('50mm'),
lockRotation: true,
});
let square = new fabric.Rect({
fill: '#FFC300',
id: "square",
width: fabric.util.parseUnit('50mm'),
height: fabric.util.parseUnit('50mm'),
lockRotation: true
});
let circle = new fabric.Circle({
fill: '#0AD6C3',
id: "circle",
radius: fabric.util.parseUnit('50mm'),
lockRotation: true
});
I'm using id for specifying a square and a rectangle
Then I'm setting their constraints like this:
rect.setControlsVisibility({mtr: false}); square.setControlsVisibility({mtr: false, mt: false, mr: false, mb: false, ml: false}); circle.setControlsVisibility({mtr: false});
But my constraints disappear when I use the function undo or redo, as long as my 'id' on each object.
Here's the code I'm using fo undo and redo functions.
document.addEventListener("keydown", function(e) {
if ( e.ctrlKey && e.keyCode == 90 ) {
canvas.toObject();
canvas.undo();
redefineRules();
}
else if( e.ctrlKey && e.keyCode == 89 ) {
canvas.toObject();
canvas.redo();
redefineRules();
}
})
function redefineRules() {
canvas.getObjects().forEach(obj => {
obj.set({
lockRotation: true,
});
console.log(obj);
switch (obj.id) {
case "rect" || "circle":
obj.setControlsVisibility({mtr: false});
break;
case "square":
obj.setControlsVisibility({mtr: false, mt: false, mr: false, mb: false, ml: false});
break;
default:
break;
}
});
}
But of course on my redefineRules() function, obj.id doesn't exist.
Can someone help me please ?
The history is not working properly when i add video
Here is the timeline of actions:
added element: video
actions: undo-redo-undo(err here)
expected: pre-state before adding video
actual: video appears again
when checked thoroughly, fabricCanvas.historyUndo still contains the video object after 2nd undo.
P.S: after deleting the video element via click event, the historyRedo property becomes NULL. So when redo is clicked , video doesnt come back
I've created a canvas object editor where some objects are should be fixed and non-selectable and therefore NOT part of the undo-redo process but not even using the extraProps options to the canvas, they still eventually get selectable and therefore deletable, allowing the state of a totally empty canvas
Is is possible to cancel the adding of particular objects to the stack in the history:append event handler?
i want it to remove only what I added after loading from json but deletes everything
Hello! First of all, thanks for your plugin. But I have the problem with undo when I set the overlay image on my canvas.
Please, see this
In order to reproduce the problem, draw a line with a pencil, then press ctrl + z, you will see that instead of removing the line, all canvas objects are deleted, including overlay image.
Thank you
First of all. Programimg with undo and redo is an amazing experience. 🥳🥳
Recently I encountered the function of restoring the content removed by the eraser in development. Using the undo test will remove Objects. How can I restore the content removed by the eraser?
Fabric 5.2 custom build with Erasing.
Fabric-history 1.6
First of all Kudos for the awesome library.
So i have a template creator where I can add Text and change color, boldness, italic of the Text.
However When i undo, the previous color/boldness/italicised doe not appear. It goes back to the event before text was added.
On further check, Only the below events fire ;
object:added': this._historySaveAction,
'object:removed': this._historySaveAction,
'object:modified': this._historySaveAction,
'object:skewing': this._historySaveAction,
The object:modified does not fire on the inner properties modification of text .
i change my whole canvas dynamically
Now for every new canvas i use clearHistory
function but the json
file is not empty so when undo
and redo
is used on the new canvas it renders the previous canvas data so i want to clear json
i tried to modify your code but i am not that good so wasn't able to do it
Your library is nice though :)
plugin should sustain the custom added properties by the user or developer in the fabric object
I guess it's more of a wonder,
Is there any quick way to also cache which objects were selected on each state?
Great plugin btw working beautifully!
Would be lovely to use this with typescript.
Hello,
i would like to limit the history to the last 10 actions, is this possible currently ?
i could just splice the historyUndo / historyRedo array but i don't know if there is a better way
thanks
Hi @lyzerk,
Thanks for your work on the module! I've been implementing this and noticed you also added support for the extraProps
! Nice one! However, when I run yarn build
I get a failed to minify error and it is reporting that the error is occurring on:
./node_modules/fabric-history/src/index.js:6
Related SO issue:
https://stackoverflow.com/questions/45671597/failed-to-minify-the-code-from-this-file
I'm using webpack with the UglifyJsPlugin. I'm using many other node modules in my app but I'm only getting this issue when including fabric-history.
Any ideas/help with this would be greatly appreciated!
Cheers!
Kyle
I am adding base64 image to to canvas,which works fine on iOS, but the undo option operation causes an error:
(in (null);3) Unexpected identifier 'code'. Expected either a closing ']' or a ',' following an array element.
Any idea what the reason for this?
Hi,
When i create my canvas i add some default objects to the layout for the user to play around with. The fabric-history module takes these objects being added into its history and on undo will remove them.
I'm hoping there might be a way that i can define a starting point for fabric-history so that this does not happen.
Type: Question
use case: Define a starting point in Fabrics history
Expected outcome: when a user undo history it only goes back to the defined point in time
Cheers,
Perry
fabric-history depends on an old version of "fabric": "^3.3.2"
, which depends on an old version of "jsdom": "^15.1.0"
, which has a vulnurability advisory: Insufficient Granularity of Access Control in JSDom
Need to fix so that jsdom version is >= 16.5.
The script give me some problem that I solve by put false historyProcessing assignment in the callback of loadfromJSON.
I hope this help.
Hello I'm using fabric js latest version and creating an editor tool. we create shapes by using mouse down and modify them when mouse is move . when I use undo/redo function it remove 2 objects at same time .
But when I add the shape first by clicking on the button with default width and height and top and left the undo redo function works fine.
i've tried to debug it on mouse down the object is added first with width and height 0 and on mouse move the object is modified with calculations of mouse movement thus 2 objects are maintained in the history instead of one how can i fix that ?
https://jsfiddle.net/durga598/7amunr73/2/
here is my code use it with history js and try to create multiple shapes and then use undo redo it will create the bug
If I add color Red, Black, Blue.
then when calling .undo() background is not going Blue, Black, red.
it is going Blue to White. This is not expected while Undo.
Ive come accross one other issue while testing your repo.
use case: i have a number of non selectable objects on my canvas, and i undo an operation off adding in a shape
expected outcome: non selectable objects should remain non selectable
actual outcome: non selectable objects arte now selectable
code for history management:
export const History = (canvas) => {
if (!canvas) return;
window.addEventListener('keydown', ({ keyCode, ctrlKey, shiftKey }) => {
// Check Ctrl key is pressed.
if (!ctrlKey && !keyCode === 91) {
return;
}
// Check pressed button is Z - Ctrl+Z.
if (keyCode === 90 && !shiftKey) {
canvas.undo();
}
// Check pressed button is Y - Ctrl+Y or Ctrl+Z+Shift
if (keyCode === 89 || (keyCode === 90 && shiftKey)) {
canvas.redo();
}
});
};
code for non selectable objects:
/**
* add image to canvas
*/
const addImage = (newImg) => {
var img = newImg.set({
width: newImg.width,
height: newImg.height,
id: 'canvas-img',
originX: 'center',
originY: 'center',
selectable: false,
});
fabricCanvas.add(img);
img.center();
fabricCanvas.renderAll();
};
/**
* Set canvas area
*/
const addCanvas = (config) => {
const rect = new fabric.Rect({
id: 'canvas-area',
height: config.height,
width: config.width,
fill: 'white',
originX: 'center',
originY: 'center',
selectable: false,
});
fabricCanvas.add(rect);
rect.center();
fabricCanvas.renderAll();
};
Fabric v6 is currently in beta, "pretty close to the official release" (fabricjs/fabric.js#8299 (comment)). Would be awesome to see fabric-history supporting this new version.
Currently "import 'fabric-history';" crashes my application when used with fabric v6 (ERROR Error: Uncaught (in promise): ReferenceError: fabric is not defined
), probably because of the changes in imports mentioned here.
Hiya,
I've noticed a history persistence issue with redo/undo. It seems that the history path is not cleared when you redo and start a new path. This is quite hard to explain so hopefully the steps to create helps make it clearer.
steps to recreate:
expected outcome: nothing happens
actual outcome: reverts state to step 2
Is there a way you would recommend for selectively toggling on and off saving changes to the history stack?
In particular, I want certain actions on fabric canvas to be ignored when undoing / redoing.
I thought I would be able to use canvas.offHistory()
and canvas.onHistory()
to disable saving state when adding selected objects, e.g.
canvas.offHistory();
canvas.add(obj);
canvas.renderAll();
canvas.onHistory();
but this still fires history:append
After I
draw something, then UNDO it, draw something else, then again UNDO it,
I always get a wrong state.
I've implemented a layer control feature with fabricJS. I also implemented fabric-history for the canvas. When switching layers with moveTo, there aren't any fired events. I think layer changes are pretty major events, and should probably be "undo-able".
Steps to reproduce:
And you won't be able to undo the layer change
Issue: Browser crashes with frequent undo.
Reproduce Steps:
When importing the script using several different ways, I always get:
Uncaught TypeError: canvas.undo is not a function
Tried with fabric 3.4.0 like in the example in the readme and also with fabric 4.4.0
I copy pasted the example in the readme into a html file and it produces the same error
I have background image and then i add some objects on canavs, and start doing undo
it also undo the backgound image. but want to keep background image. so is there any option to exclude an object saving into history?
Thanks for building this plugin!
I noticed that clearing the canvas isn't part of the history. So if I
Fix: Also listen for canvas:cleared
event.
fabric.Canvas.prototype._historyEvents = function () {
return {
'object:added': this._historySaveAction,
'object:removed': this._historySaveAction,
'object:modified': this._historySaveAction,
'object:skewing': this._historySaveAction,
'canvas:cleared': this._historySaveAction,
};
};
Hi,
I'm implementing some UI buttons on the screen to help the user experience with undo/redo. I would like to change the state of these buttons depending on if its possible to currently perform an undo or redo function.
Do you have any methods available where i might be able to do this?
action: canUndo()
expected result: if can undo history returns true
action: canRedo()
expected result: if can redo history returns true
Hi,
This repo is great and im finding it very useful! I have come across one problem where if i draw a select around multiple objects and then delete those objects i cannot undo that operation.
singular delete appear to work fine for me, but the groups dont.
use case: selecting multiple objects, delete those objects and then attempt to undo
expected outcome: the group deletion is undone and both object reappear
actual outcome: undoes previous action before deletion
here is how i am deleting objects in Fabricjs:
const checkforDelete = (e) => {
if (e.key === 'Backspace' || e.key === 'Delete') {
const activeObjects = canvas.getActiveObjects();
// remove objects
if (activeObjects.length > 0) {
activeObjects.forEach((object) => {
if (!object.isEditing) {
canvas.remove(object);
}
});
}
}
};
here is my code for history management:
export const History = (canvas) => {
if (!canvas) return;
window.addEventListener('keydown', ({ keyCode, ctrlKey, shiftKey }) => {
// Check Ctrl key is pressed.
if (!ctrlKey && !keyCode === 91) {
return;
}
// Check pressed button is Z - Ctrl+Z.
if (keyCode === 90 && !shiftKey) {
canvas.undo();
}
// Check pressed button is Y - Ctrl+Y or Ctrl+Z+Shift
if (keyCode === 89 || (keyCode === 90 && shiftKey)) {
canvas.redo();
}
});
};
Hi Mate, thank you for your nice plugin.
I try to use it in nuxt js.
When I import your library it says "fabric is not defined"
seems it run history library before fabric. But I am not use how to load it right in nuxt js env for vue js.
Can you please help me?
Hi,
So I have been using fabric-history and works greatly for 1 canvas. Now we have implemented multiple canvases stored in an array and all functions works well except the history, it seem to only work on 1 canvas, so when I loop through canvases, it will do multiple undo which is not what I want.
My question is how can I have multiple canvases but the history undo goes back 1 by 1
I feel the whole canvases should be stored in history instead of per canvas but not sure how to implement this.
I have given some custom properties to my canvas object and i would like to store those in the history. Fabric JS accepts an array of prop names while converting it to json. Is there a way we can specify them and store those as well when storing the history?
Instead of going back after the first brush drawing(erasing it from the canvas) it goes further and removes also the background image, meanwhile doing a redo()
after this makes the canvas with the first brush drawing and the background image reappear.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.