-
-
Notifications
You must be signed in to change notification settings - Fork 715
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Clone element work only after serialize and deserialize #209
Comments
This is awsome solution to our problem but there is a bug i face .After deserializing the json, drag and drop stopped working It has unexpected behaviour .while checking the official example(basic one) when click on lode state it deserialize the json and drag and drop stopped working while switch on and off enable button drag and drop started working .May be this is not the solution but its a quick fix |
@Purvicapternal
|
Here is a working function for cloning elements (sandbox) :
The problem was this piece of code that i guess did not update the internal state :
While using
|
Thanks @nicosh for the heads up and for sharing your solution! Just tested on two staging websites and everything works flawlessly. After node clone and after state save and load. Top! |
Now, do not use shortid, should use nanoid, like this.
|
|
This is the Update Version where I have used uuidv4 to generate the unique ID:-
|
Here is a simple version without recursion: import { Node, NodeTree, useEditor } from "@craftjs/core";
export const cloneNodeTree = (
node: Node,
query: ReturnType<typeof useEditor>["query"],
actions: ReturnType<typeof useEditor>["actions"]
) => {
const parentId = node.data.parent;
if (!parentId) {
throw "No parent id found !";
}
const nodeIndex = query.node(parentId).get().data.nodes.indexOf(node.id);
const oldTree = query.node(node.id).toNodeTree();
const treeIds = Object.keys(oldTree.nodes).map((oldId) => ({
oldId,
newId: "" + Math.round(Math.random() * 100000),
}));
let newTreeJson = JSON.stringify(oldTree, (key, value) => {
if (["dom", "rules"].includes(key)) {
return undefined;
}
return value;
});
for (const treeId of treeIds) {
newTreeJson = newTreeJson.replaceAll(treeId.oldId, treeId.newId);
}
const newTree = JSON.parse(newTreeJson) as NodeTree;
for (const treeId of treeIds) {
newTree.nodes[treeId.newId].rules = oldTree.nodes[treeId.oldId].rules;
newTree.nodes[treeId.newId].data.type =
oldTree.nodes[treeId.oldId].data.type;
newTree.nodes[treeId.newId].events = {
dragged: false,
hovered: false,
selected: false,
};
}
actions.addNodeTree(newTree, parentId, nodeIndex + 1);
}; |
Describe the bug
A little bit of context, in #144 the first solution for cloning elements causes linked cloned nodes to change props to the original ones, #144 (comment) seems to have the same problem, but actually the nodes ids are changed and if we deserialize a serialized state editor inside a setTimeout function it works.
To Reproduce
Steps to reproduce the behavior:
clone
Expected behavior
Cloning an element and run
actions.addNodeTree
should load the correct data.The text was updated successfully, but these errors were encountered: