layout.res

let layoutViews = () => {
    let t = Js.Date.now()

    // Initialize the views and get the tallest narrative headline
    // @Todo this could just go over narratives instead of all snips...
    let tallestNarrativeHeadline = ref(0.)

    let m: ref<Belt.Map.Int.t<timelineElementViewT>> = ref(Belt.Map.Int.empty)

    for i in 0 to state.narrativeHeadlineViews->Array.length - 1 {
      let v = state.narrativeHeadlineViews[i]->force
      v.xOffset =
        i->float_of_int *. Constants.distanceBetweenTimelines +. Constants.datesHUDMaxWidth

      let headlineLayout = v.headlineLayout
      headlineLayout->Layout.setPosition(v.xOffset +. 12., 0., _HUD_Z_PLANE)

      tallestNarrativeHeadline.contents = Js.Math.max_float(
        tallestNarrativeHeadline.contents,
        headlineLayout.position.y +. headlineLayout.size.y,
      )
    }

    let y = ref(0.)
    let prevEl = ref(None)
    let largestYSoFar = ref(0.)

    let dateHUDIndex = ref(0)
    for i in 0 to state.snipViews->Array.length - 1 {
      let el = state.snipViews[i]->force

      let shouldShowHUDDate = switch prevEl.contents {
      | None =>
        y.contents = tallestNarrativeHeadline.contents +. 24.
        true
      | Some(prevEl) =>
        if (
          prevEl.snipView.snip.date->Js.Date.toDateString !=
            el.snipView.snip.date->Js.Date.toDateString
        ) {
          y.contents = largestYSoFar.contents
          largestYSoFar.contents = 0.
          true
        } else {
          false
        }
      }

      let dotSize = 6.
      let padding = 12.
      let availableWidth = Constants.distanceBetweenTimelines -. dotSize *. 2. -. padding *. 2.

      let key = int_of_float(el.narrativeView.xOffset)

      let prevMaxY = switch m.contents->Belt.Map.Int.get(key) {
      | None => 0.
      | Some(prevInTimeline) =>
        let l = prevInTimeline.snipView.textLayout
        l.position.y +. l.size.y +. 24.
      }

      // let yOffset = tallestNarrativeHeadline.contents +. 100.
      let yOffset = 16.
      let textY = Js.Math.max_float(y.contents +. yOffset +. dotSize, prevMaxY)
      el.snipView.textLayout->Layout.setPosition(
        el.narrativeView.xOffset +. dotSize +. padding,
        textY,
        0.,
      )

      el.snipView.dotMesh.position.y = textY +. dotSize
      el.snipView.dotMesh.position.x = el.narrativeView.xOffset

      let shouldShowDate = switch m.contents->Belt.Map.Int.get(key) {
      | None => true
      | Some(prevInTimeline) =>
        let prevDotMeshYPosition = prevInTimeline.snipView.dotMesh.position.y
        el.snipView.lineMesh.scale.y = el.snipView.dotMesh.position.y -. prevDotMeshYPosition
        el.snipView.lineMesh.position.y =
          (el.snipView.dotMesh.position.y +. prevDotMeshYPosition) /. 2. -. dotSize
        el.snipView.lineMesh.position.x = el.narrativeView.xOffset

        if (
          prevInTimeline.snipView.snip.date->Js.Date.toDateString !=
            el.snipView.snip.date->Js.Date.toDateString
        ) {
          true
        } else {
          false
        }
      }

      if shouldShowDate {
        el.snipView.dateTextLayout->Layout.setPosition(
          el.snipView.textLayout.position.x,
          el.snipView.textLayout.position.y -. el.snipView.dateTextLayout.size.y -. 6.,
          0.,
        )
      } else {
        el.snipView.dateTextLayout.mesh.visible = false
      }

      // Move the HUD date.
      if shouldShowHUDDate {
        state.timeAxisViews[i]->force->Layout.setPosition(0., textY, _HUD_Z_PLANE -. 1.)
      } else {
        (state.timeAxisViews[i]->force).mesh.visible = false
      }

      largestYSoFar :=
        Js.Math.max_float(largestYSoFar.contents, textY +. el.snipView.textLayout.size.y +. 24.)
      prevEl := Some(el)

      m.contents = m.contents->Belt.Map.Int.set(key, el)
    }

    if Constants.timing {
      Js.log2("Time to layout: ", Js.Date.now() -. t)
    }
  }

layout2.res

let layoutViews = () => {
    let t = Js.Date.now()

    // Initialize the views and get the tallest narrative headline
    // @Todo this could just go over narratives instead of all snips...
    let tallestNarrativeHeadline = ref(0.)

    let m: ref<Belt.Map.Int.t<timelineElementViewT>> = ref(Belt.Map.Int.empty)

    for i in 0 to state.narrativeHeadlineViews->Array.length - 1 {
      let v = state.narrativeHeadlineViews[i]->force
      v.xOffset = i->float_of_int *. Constants.distanceBetweenTimelines +. Constants.datesHUDMaxWidth

      let headlineLayout = v.headlineLayout
      headlineLayout->Layout.setPosition(v.xOffset +. 12., 0., _HUD_Z_PLANE)

      tallestNarrativeHeadline.contents = Js.Math.max_float(tallestNarrativeHeadline.contents, headlineLayout.position.y +. headlineLayout.size.y)
    }


    let y = ref(0.)
    let prevEl = ref(None)
    let largestYSoFar = ref(0.)

    for i in 0 to state.snipViews->Array.length - 1 {
      let el = state.snipViews[i]->force

      let shouldShowHUDDate = switch prevEl.contents {
      | None =>
        y.contents = tallestNarrativeHeadline.contents +. 24.
        true
      | Some(prevEl) =>
        if (prevEl.snipView.snip.date->Js.Date.toDateString != el.snipView.snip.date->Js.Date.toDateString) {
          y.contents = largestYSoFar.contents
          largestYSoFar.contents = 0.
          true
        } else {
          false
        }
      }


      let dotSize = 6.
      let padding = 12.
      let availableWidth = Constants.distanceBetweenTimelines -. dotSize *. 2. -. padding *. 2.

      let key = int_of_float(el.narrativeView.xOffset)
      let prevMaxY = switch m.contents->Belt.Map.Int.get(key) {
      | None => 0.
      | Some(prevInTimeline) =>
        let l = prevInTimeline.snipView.textLayout
        l.position.y +. l.size.y +. 24.
      }

      let yOffset = 16.
      let textY = Js.Math.max_float(y.contents +. yOffset +. dotSize, prevMaxY)

      el.snipView.textLayout->Layout.setPosition(el.narrativeView.xOffset +. dotSize +. padding, textY, 0.)

      el.snipView.dotMesh.position.y = textY +. dotSize
      el.snipView.dotMesh.position.x = el.narrativeView.xOffset


      let shouldShowDate = switch m.contents->Belt.Map.Int.get(key) {
      | None => true
      | Some(prevInTimeline) =>
        let prevDotMeshYPosition = prevInTimeline.snipView.dotMesh.position.y

        el.snipView.lineMesh.scale.y = el.snipView.dotMesh.position.y -. prevDotMeshYPosition

        el.snipView.lineMesh.position.y = (el.snipView.dotMesh.position.y +. prevDotMeshYPosition) /. 2. -. dotSize
        el.snipView.lineMesh.position.x = el.narrativeView.xOffset

        if (prevInTimeline.snipView.snip.date->Js.Date.toDateString != el.snipView.snip.date->Js.Date.toDateString) {
          true
        } else {
          false
        }
      }


      if shouldShowDate {
        el.snipView.dateTextLayout->Layout.setPosition(el.snipView.textLayout.position.x, el.snipView.textLayout.position.y -. el.snipView.dateTextLayout.size.y -. 6., 0.)
      } else {
        el.snipView.dateTextLayout.mesh.visible = false
      }


      // Move the HUD date.
      if shouldShowHUDDate {
        state.timeAxisViews[i]->force->Layout.setPosition(0., textY, _HUD_Z_PLANE -. 1.)
      } else {
        (state.timeAxisViews[i]->force).mesh.visible = false
      }


      largestYSoFar := Js.Math.max_float(largestYSoFar.contents, textY +. el.snipView.textLayout.size.y +. 24.)
      prevEl := Some(el)

      m.contents = m.contents->Belt.Map.Int.set(key, el)
    }

    if Constants.timing {
      Js.log2("Time to layout: ", Js.Date.now() -. t)
    }
  }