Cloning elements without adding them to active page, or duplicating objects in-memory with a new ID

[ADTC]

If I do this:

const newChildren = store.activePage.children.map((child: ElementType) => child.clone())

The elements are duplicated and added to the active page.

This was quite a surprise to me, as I expected the clone function to simply create an in-memory clone with a new id and return it (not add it to active page). If it's adding it to the active page, I would have expected it to be called duplicate instead, with another function clone to do the in-memory clone.

Since we don't have that option, I suppose the best way right now is to first use an object cloning method as mentioned in freeCodeCamp:

// Spread Method
let clone = { ...userDetails }

// Object.assign() Method
let clone = Object.assign({}, userDetails)

// JSON.parse() Method
let clone = JSON.parse(JSON.stringify(userDetails))

I think we should prefer JSON.parse(JSON.stringify since it's deep cloning while the other two are shallow copying.

And then, the next step is to make a new ID using nanoid:

forEveryChild({ children }, (item: any) => {
  item.id = nanoid(10)
})

Easy enough to do my own implementation:

NOTE: This basic code is merely a starting point and behaves the same as store.activePage.clone(). The power lies in making your own customizations to the children elements before putting them in a new page.

import { nanoid } from 'nanoid'
import { forEveryChild } from 'polotno/model/group-model'
import type { ElementType } from 'polotno/model/group-model'

const children = store.activePage.children.map((child: ElementType) =>
  JSON.parse(JSON.stringify(child.toJSON())),
)

forEveryChild({ children }, (item: ElementType) => {
  // Do some customizations here.
  item.id = nanoid(10)
})

// To add a new blank page with the customized children:
store.addPage({ children })
// OR to duplicate current page keeping background & other metadata:
store.activePage.clone({ children })

[lavrton]

What is your question or request here? To have a method for in-memory clone?

[ADTC]

This was more of a showcase than a request. That's why I put it in Discussions.

But yes, the request is for methods to do object clones in memory (not visual duplicates on canvas).