renderFrame()

in src/lib/components/molecules/canvas-map/lib/renderers/MapRenderer.js [32:95]

• 44 lines of code
• 9 McCabe index (conditional complexity)

  renderFrame(frameState, canvas) {
    const { zoomLevel, projection, sizeInPixels } = frameState.viewState

    const layers = this.map.layers

    const mapElements = []

    let canvasElement

    if (canvas) {
      canvasElement = canvas
    } else if (this._canvas) {
      canvasElement = this._canvas

      // Setting the height and width of the canvas also clears it
      canvasElement.width = sizeInPixels[0]
      canvasElement.height = sizeInPixels[1]
    } else {
      canvasElement = createCanvas(sizeInPixels)
      this._canvas = canvasElement
    }

    const visibleLayers = layers.filter((layer) => {
      return zoomLevel > (layer.minZoom || 0)
    })

    const renderLayer = (layer, declutterTree) => {
      const viewState = frameState.viewState

      if (layer.projection) {
        viewState.projection = layer.projection
      }

      // Render the layer, providing the main canvas
      const element = layer.renderFrame(
        { ...frameState, viewState, declutterTree },
        canvasElement,
      )

      // If renderFrame created a new element, add it to the list of elements we add to the map
      // container. This is currently only used for the TextLayer, each of which puts its layers in
      // a new div.
      if (element) {
        mapElements.push(element)
      }

      // reset to map projection
      viewState.projection = projection
    }

    const declutterTree = new RBush()

    for (const layer of visibleLayers) {
      if (layer.declutter) {
        renderLayer(layer, declutterTree)
      } else {
        renderLayer(layer)
      }
    }

    if (this._element) {
      replaceChildren(this._element, [canvasElement, ...mapElements])
    }
  }