TheaninovOS/desktops/hyprland/ags/modules/lib/navigationindicator.js

const {Gdk, Gtk} = imports.gi
const GObject = imports.gi.GObject
const Lang = imports.lang
import {Utils, Widget} from "../../imports.js"

// min-height/min-width for height/width
// background-color/color for background/indicator color
// padding for pad of indicator
// font-size for selected index (0-based)
export const NavigationIndicator = (count, vertical, props) =>
  Widget({
    ...props,
    type: Gtk.DrawingArea,
    setup: area => {
      const styleContext = area.get_style_context()
      const width = Math.max(
        styleContext.get_property("min-width", Gtk.StateFlags.NORMAL),
        area.get_allocated_width(),
      )
      const height = Math.max(
        styleContext.get_property("min-height", Gtk.StateFlags.NORMAL),
        area.get_allocated_height(),
      )
      area.set_size_request(width, height)

      area.connect(
        "draw",
        Lang.bind(area, (area, cr) => {
          const styleContext = area.get_style_context()
          const width = Math.max(
            styleContext.get_property("min-width", Gtk.StateFlags.NORMAL),
            area.get_allocated_width(),
          )
          const height = Math.max(
            styleContext.get_property("min-height", Gtk.StateFlags.NORMAL),
            area.get_allocated_height(),
          )
          // console.log('allocated width/height:', area.get_allocated_width(), '/', area.get_allocated_height())
          area.set_size_request(width, height)
          const paddingLeft = styleContext.get_padding(Gtk.StateFlags.NORMAL).left
          const paddingRight = styleContext.get_padding(Gtk.StateFlags.NORMAL).right
          const paddingTop = styleContext.get_padding(Gtk.StateFlags.NORMAL).top
          const paddingBottom = styleContext.get_padding(Gtk.StateFlags.NORMAL).bottom

          const selectedCell = styleContext.get_property("font-size", Gtk.StateFlags.NORMAL)

          let cellWidth = width
          let cellHeight = height
          if (vertical) cellHeight /= count
          else cellWidth /= count
          const indicatorWidth = cellWidth - paddingLeft - paddingRight
          const indicatorHeight = cellHeight - paddingTop - paddingBottom

          const background_color = styleContext.get_property("background-color", Gtk.StateFlags.NORMAL)
          const color = styleContext.get_property("color", Gtk.StateFlags.NORMAL)
          cr.setLineWidth(2)
          // Background
          cr.setSourceRGBA(
            background_color.red,
            background_color.green,
            background_color.blue,
            background_color.alpha,
          )
          cr.rectangle(0, 0, width, height)
          cr.fill()

          // The indicator line
          cr.setSourceRGBA(color.red, color.green, color.blue, color.alpha)
          if (vertical) {
            cr.rectangle(
              paddingLeft,
              paddingTop + cellHeight * selectedCell + indicatorWidth / 2,
              indicatorWidth,
              indicatorHeight - indicatorWidth,
            )
            cr.stroke()
            cr.rectangle(
              paddingLeft,
              paddingTop + cellHeight * selectedCell + indicatorWidth / 2,
              indicatorWidth,
              indicatorHeight - indicatorWidth,
            )
            cr.fill()
            cr.arc(
              paddingLeft + indicatorWidth / 2,
              paddingTop + cellHeight * selectedCell + indicatorWidth / 2,
              indicatorWidth / 2,
              Math.PI,
              2 * Math.PI,
            )
            cr.fill()
            cr.arc(
              paddingLeft + indicatorWidth / 2,
              paddingTop + cellHeight * selectedCell + indicatorHeight - indicatorWidth / 2,
              indicatorWidth / 2,
              0,
              Math.PI,
            )
            cr.fill()
          } else {
            cr.rectangle(
              paddingLeft + cellWidth * selectedCell + indicatorHeight / 2,
              paddingTop,
              indicatorWidth - indicatorHeight,
              indicatorHeight,
            )
            cr.stroke()
            cr.rectangle(
              paddingLeft + cellWidth * selectedCell + indicatorHeight / 2,
              paddingTop,
              indicatorWidth - indicatorHeight,
              indicatorHeight,
            )
            cr.fill()
            cr.arc(
              paddingLeft + cellWidth * selectedCell + indicatorHeight / 2,
              paddingTop + indicatorHeight / 2,
              indicatorHeight / 2,
              0.5 * Math.PI,
              1.5 * Math.PI,
            )
            cr.fill()
            cr.arc(
              paddingLeft + cellWidth * selectedCell + indicatorWidth - indicatorHeight / 2,
              paddingTop + indicatorHeight / 2,
              indicatorHeight / 2,
              -0.5 * Math.PI,
              0.5 * Math.PI,
            )
            cr.fill()
          }
        }),
      )
    },
  })