Improved FractalLoader

[axelpale]

In v2.0.0-alpha.8 the FractalLoader already works but has issues:

• it opens all child nodes at once.
• construction of backtracker is difficult for app dev.
• in practice, parent fractal node must be fully loaded and rendered before it can be placed into space.
• no placeholder for parents or nodes that are loading

Observations about opening:

• nodes can be opened in many ways:
  • automatic opening of all visible nodes, when large enough.
  • automatic opening of some focused nodes
  • manual opening of nodes, click to open
• These situations are so variable that:
  • the host app must be responsible of opening nodes?
  • there must be config option for this?

Sketch of improved FractalLoader usage:

const loader = new FractalLoader({
  seedId: 1234,
  renderChunkPlaceholder: function (chunkId) {
  },
  renderChunkFinal: function (chunkId, data) {
  },
  fetchChunkData: function (id, callback) {
  }, 
  findChildPosition: function (component, childId) {

  },
  openChild: function (id, parentId, then) {
    const parentChunk = getChunk(parentId)
    const childPosition = findChildPosition(parentChunk, id)
    const placeholder = renderChunkPlaceholder(id)
    placeholder.moveTo(childPosition)
    fetchChunkData(id, function (err, data) {
      if (err) return then(err)
      const childChunk = renderChunkFinal(id, data)
      childChunk.setParent(space)
      childChunk.moveTo(childPosition)
      placeholder.remove()
      then(null)
    })
  },
  openParent: function (id, childId, then) {
    const childPosition = getPosition(childId)
    const placeholder = renderChunkPlaceholder(id)
    placeholder.moveTo(childPosition)
    fetchChunkData(id, function (err, data) {
      if (err) return then(err)
      const parentChunk = renderChunkFinal(id, data)
      const insertionPoint = findChildPosition(parentChunk, childId)
      parentChunk.setParent(space)
      parentChunk.matchPoint(insertionPoint, childPosition)
      placeholder.remove()
      then(null)
    })
  },
  recursionLimiter: function () {
  },
})

[axelpale]

Next iteration. The methods openChild and openParent are implemented internally. Also the property names are simplified.

const loader = new tapspace.loaders.FractalLoader({
  viewport: viewport,

  placeholder: function (id) {
    // Render placeholder
    return tapspace.createCircle(10, 'black')
  },

  generator: function (id, data) {
    return tapspace.createCircle(15, data.color)
  },

  fetcher: function (id, callback) {
    setTimeout(() => {
      callback(null, { color: 'red' })
    }, 1000)
  },

  tracker: function (parent, childId) {
    return parent.atAnchor().offset(20, 0)
  },

  backer: function (childId) {
    switch (childId) {
      case 'b':
        return 'a'
      case 'a':
        return null
      default:
        return null
    }
  },

  limiter: function (depth) {
    return depth < 3
  }
})

loader.init('a', viewport.atCenter())
loader.openChild('a', 'b')
loader.openParent('a')

[axelpale]

Implemented as TreeLoader around v2.0.0-alpha.14