ID for Project Elements

[nighca]

Let's refer to these items as "elements": sprites, backdrops, widgets, sounds, and potentially scenes in the future.

For now Builder uses name as identifier for elements, just like how spx does.

However, in the process of editing a project, the user may rename elements. Which makes it complex to keep references for one element when it is renamed. For example, this is how we mantain animation-sound & selected-sound state:

sound.addDisposer(
  // update animation.sound & selected when sound renamed
  // TODO: there are quite some similar logic to deal with such references among models, we may introduce model `ID` to simplify that
  watch(
    () => sound.name,
    (newName, originalName) => {
      for (const sprite of this.sprites) {
        for (const animation of sprite.animations) {
          if (animation.sound === originalName) {
            animation.setSound(newName)
          }
        }
      }
      if (this.selected?.type === 'sound' && this.selected.name === originalName) {
        this.select({ type: 'sound', name: newName })
      }
    }
  )
)

Note that we use name instead of object-reference in javascript to store reference information, because the latter breaks serialization-deserialization.

We may add a unique identifier to each element, and use that to identify elements when there are references. The identifier will be part of the element's serialization output just like name.

The identifier will be something we call "builder-only data", see details in https://github.com/goplus/builder/issues/714#issuecomment-2274863055