dash-to-panel/utils.js

/*
 * This file is part of the Dash-To-Panel extension for Gnome 3
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 *
 * Credits:
 * This file is based on code from the Dash to Dock extension by micheleg
 * and code from the Taskbar extension by Zorin OS
 * Some code was also adapted from the upstream Gnome Shell source code.
 */

import Clutter from 'gi://Clutter'
import Cogl from 'gi://Cogl'
import GdkPixbuf from 'gi://GdkPixbuf'
import Gio from 'gi://Gio'
import GLib from 'gi://GLib'
import Graphene from 'gi://Graphene'
import Meta from 'gi://Meta'
import Shell from 'gi://Shell'
import St from 'gi://St'
import * as Util from 'resource:///org/gnome/shell/misc/util.js'
import * as Main from 'resource:///org/gnome/shell/ui/main.js'
import * as MessageTray from 'resource:///org/gnome/shell/ui/messageTray.js'

const SCROLL_TIME = Util.SCROLL_TIME / (Util.SCROLL_TIME > 1 ? 1000 : 1)

// simplify global signals and function injections handling
// abstract class
export const BasicHandler = class {
  constructor() {
    this._storage = new Object()
  }

  add(/*unlimited 3-long array arguments*/) {
    // convert arguments object to array, concatenate with generic
    let args = [].concat('generic', [].slice.call(arguments))
    // call addWithLabel with ags as if they were passed arguments
    this.addWithLabel.apply(this, args)
  }

  destroy() {
    for (let label in this._storage) this.removeWithLabel(label)
  }

  addWithLabel(label /* plus unlimited 3-long array arguments*/) {
    if (this._storage[label] == undefined) this._storage[label] = new Array()

    // skip first element of the arguments
    for (let i = 1; i < arguments.length; i++) {
      let item = this._storage[label]
      let handlers = this._create(arguments[i])

      for (let j = 0, l = handlers.length; j < l; ++j) {
        item.push(handlers[j])
      }
    }
  }

  removeWithLabel(label) {
    if (this._storage[label]) {
      for (let i = 0; i < this._storage[label].length; i++) {
        this._remove(this._storage[label][i])
      }

      delete this._storage[label]
    }
  }

  /* Virtual methods to be implemented by subclass */
  // create single element to be stored in the storage structure
  _create(item) {
    throw new Error('no implementation of _create in ' + this)
  }

  // correctly delete single element
  _remove(item) {
    throw new Error('no implementation of _remove in ' + this)
  }
}

// Manage global signals
export const GlobalSignalsHandler = class extends BasicHandler {
  _create(item) {
    let handlers = []

    item[1] = [].concat(item[1])

    for (let i = 0, l = item[1].length; i < l; ++i) {
      let object = item[0]
      let event = item[1][i]
      let callback = item[2]
      try {
        let id = object.connect(event, callback)

        handlers.push([object, id])
      } catch (e) {}
    }

    return handlers
  }

  _remove(item) {
    item[0].disconnect(item[1])
  }
}

/**
 * Manage function injection: both instances and prototype can be overridden
 * and restored
 */
export const InjectionsHandler = class extends BasicHandler {
  _create(item) {
    let object = item[0]
    let name = item[1]
    let injectedFunction = item[2]
    let original = object[name]

    object[name] = injectedFunction
    return [[object, name, injectedFunction, original]]
  }

  _remove(item) {
    let object = item[0]
    let name = item[1]
    let original = item[3]
    object[name] = original
  }
}

/**
 * Manage timeouts: the added timeouts have their id reset on completion
 */
export const TimeoutsHandler = class extends BasicHandler {
  _create(item) {
    let name = item[0]
    let delay = item[1]
    let timeoutHandler = item[2]

    this._remove(item)

    this[name] = GLib.timeout_add(GLib.PRIORITY_DEFAULT, delay, () => {
      this[name] = 0
      timeoutHandler()

      return GLib.SOURCE_REMOVE
    })

    return [[name]]
  }

  remove(name) {
    this._remove([name])
  }

  _remove(item) {
    let name = item[0]

    if (this[name]) {
      GLib.Source.remove(this[name])
      this[name] = 0
    }
  }

  getId(name) {
    return this[name] ? this[name] : 0
  }
}

// This is wrapper to maintain compatibility with GNOME-Shell 3.30+ as well as
// previous versions.
export const DisplayWrapper = {
  getScreen() {
    return global.screen || global.display
  },

  getWorkspaceManager() {
    return global.screen || global.workspace_manager
  },

  getMonitorManager() {
    return global.screen || global.backend.get_monitor_manager()
  },
}

let unredirectEnabled = true
export const setDisplayUnredirect = (enable) => {
  if (enable && !unredirectEnabled)
    Meta.enable_unredirect_for_display(global.display)
  else if (!enable && unredirectEnabled)
    Meta.disable_unredirect_for_display(global.display)

  unredirectEnabled = enable
}

export const getSystemMenuInfo = function () {
  return {
    name: 'quickSettings',
    constructor: Main.panel.statusArea.quickSettings.constructor,
  }
}

export const getCurrentWorkspace = function () {
  return DisplayWrapper.getWorkspaceManager().get_active_workspace()
}

export const getWorkspaceByIndex = function (index) {
  return DisplayWrapper.getWorkspaceManager().get_workspace_by_index(index)
}

export const getWorkspaceCount = function () {
  return DisplayWrapper.getWorkspaceManager().n_workspaces
}

export const getStageTheme = function () {
  return St.ThemeContext.get_for_stage(global.stage)
}

export const getScaleFactor = function () {
  return getStageTheme().scale_factor || 1
}

export const findIndex = function (array, predicate) {
  if (array) {
    if (Array.prototype.findIndex) {
      return array.findIndex(predicate)
    }

    for (let i = 0, l = array.length; i < l; ++i) {
      if (predicate(array[i])) {
        return i
      }
    }
  }

  return -1
}

export const find = function (array, predicate) {
  let index = findIndex(array, predicate)

  if (index > -1) {
    return array[index]
  }
}

export const mergeObjects = function (main, bck) {
  for (const prop in bck) {
    if (!main.hasOwnProperty(prop) && bck.hasOwnProperty(prop)) {
      main[prop] = bck[prop]
    }
  }

  return main
}

export const getTrackedActorData = (actor) => {
  let trackedIndex = Main.layoutManager._findActor(actor)

  if (trackedIndex >= 0) return Main.layoutManager._trackedActors[trackedIndex]
}

export const getTransformedAllocation = function (actor) {
  let extents = actor.get_transformed_extents()
  let topLeft = extents.get_top_left()
  let bottomRight = extents.get_bottom_right()

  return { x1: topLeft.x, x2: bottomRight.x, y1: topLeft.y, y2: bottomRight.y }
}

export const setClip = function (actor, x, y, width, height) {
  actor.set_clip(0, 0, width, height)
  actor.set_position(x, y)
  actor.set_size(width, height)
}

export const addKeybinding = function (key, settings, handler, modes) {
  if (!Main.wm._allowedKeybindings[key]) {
    Main.wm.addKeybinding(
      key,
      settings,
      Meta.KeyBindingFlags.NONE,
      modes || Shell.ActionMode.NORMAL | Shell.ActionMode.OVERVIEW,
      handler,
    )
  }
}

export const removeKeybinding = function (key) {
  if (Main.wm._allowedKeybindings[key]) {
    Main.wm.removeKeybinding(key)
  }
}

export const getrgbColor = function (color) {
  color =
    typeof color === 'string' ? ColorUtils.color_from_string(color)[1] : color

  return { red: color.red, green: color.green, blue: color.blue }
}

export const getrgbaColor = function (color, alpha, offset) {
  if (alpha <= 0) {
    return 'transparent; '
  }

  let rgb = getrgbColor(color)

  if (offset) {
    ;['red', 'green', 'blue'].forEach((k) => {
      rgb[k] = Math.min(255, Math.max(0, rgb[k] + offset))

      if (rgb[k] == color[k]) {
        rgb[k] = Math.min(255, Math.max(0, rgb[k] - offset))
      }
    })
  }

  return (
    'rgba(' +
    rgb.red +
    ',' +
    rgb.green +
    ',' +
    rgb.blue +
    ',' +
    Math.floor(alpha * 100) * 0.01 +
    '); '
  )
}

export const checkIfColorIsBright = function (color) {
  let rgb = getrgbColor(color)
  let brightness = 0.2126 * rgb.red + 0.7152 * rgb.green + 0.0722 * rgb.blue

  return brightness > 128
}

export const getMouseScrollDirection = function (event) {
  let direction

  switch (event.get_scroll_direction()) {
    case Clutter.ScrollDirection.UP:
    case Clutter.ScrollDirection.LEFT:
      direction = 'up'
      break
    case Clutter.ScrollDirection.DOWN:
    case Clutter.ScrollDirection.RIGHT:
      direction = 'down'
      break
  }

  return direction
}

export const checkIfWindowHasTransient = function (window) {
  let hasTransient

  window.foreach_transient((t) => !(hasTransient = true))

  return hasTransient
}

export const activateSiblingWindow = function (
  windows,
  direction,
  startWindow,
) {
  let windowIndex = windows.indexOf(global.display.focus_window)
  let nextWindowIndex =
    windowIndex < 0
      ? startWindow
        ? windows.indexOf(startWindow)
        : 0
      : windowIndex + (direction == 'up' ? -1 : 1)

  if (nextWindowIndex == windows.length) {
    nextWindowIndex = 0
  } else if (nextWindowIndex < 0) {
    nextWindowIndex = windows.length - 1
  }

  if (windowIndex != nextWindowIndex) {
    Main.activateWindow(windows[nextWindowIndex])
  }
}

export const animateWindowOpacity = function (window, tweenOpts) {
  //there currently is a mutter bug with the windowactor opacity, starting with 3.34
  //https://gitlab.gnome.org/GNOME/mutter/issues/836

  //since 3.36, a workaround is to use the windowactor's child for the fade animation
  //this leaves a "shadow" on the desktop, so the windowactor needs to be hidden
  //when the animation is complete
  let visible = tweenOpts.opacity > 0
  let windowActor = window
  let initialOpacity = window.opacity

  window = windowActor.get_first_child() || windowActor

  if (!windowActor.visible && visible) {
    window.opacity = 0
    windowActor.visible = visible
    tweenOpts.opacity = Math.min(initialOpacity, tweenOpts.opacity)
  }

  if (!visible) {
    tweenOpts.onComplete = () => {
      windowActor.visible = visible
      window.opacity = initialOpacity
    }
  }

  animate(window, tweenOpts)
}

export const animate = function (actor, options) {
  //the original animations used Tweener instead of Clutter animations, so we
  //use "time" and "delay" properties defined in seconds, as opposed to Clutter
  //animations "duration" and "delay" which are defined in milliseconds
  if (options.delay) {
    options.delay = options.delay * 1000
  }

  options.duration = options.time * 1000
  delete options.time

  if (options.transition) {
    //map Tweener easing equations to Clutter animation modes
    options.mode =
      {
        easeInCubic: Clutter.AnimationMode.EASE_IN_CUBIC,
        easeInOutCubic: Clutter.AnimationMode.EASE_IN_OUT_CUBIC,
        easeInOutQuad: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
        easeOutQuad: Clutter.AnimationMode.EASE_OUT_QUAD,
      }[options.transition] || Clutter.AnimationMode.LINEAR

    delete options.transition
  }

  let params = [options]

  if ('value' in options && actor instanceof St.Adjustment) {
    params.unshift(options.value)
    delete options.value
  }

  actor.ease.apply(actor, params)
}

export const isAnimating = function (actor, prop) {
  return !!actor.get_transition(prop)
}

export const stopAnimations = function (actor) {
  actor.remove_all_transitions()
}

export const getIndicators = function (delegate) {
  if (delegate instanceof St.BoxLayout) {
    return delegate
  }

  return delegate.indicators
}

export const getPoint = function (coords) {
  return new Graphene.Point(coords)
}

export const notify = function (text, iconName, action, isTransient) {
  let source = new MessageTray.SystemNotificationSource()
  let notification = new MessageTray.Notification(source, 'Dash to Panel', text)
  let notifyFunc = source.showNotification || source.notify

  if (iconName) {
    source.createIcon = function () {
      return new St.Icon({ icon_name: iconName })
    }
  }

  if (action) {
    if (!(action instanceof Array)) {
      action = [action]
    }

    action.forEach((a) => notification.addAction(a.text, a.func))
  }

  Main.messageTray.add(source)

  notification.setTransient(isTransient)
  notifyFunc.call(source, notification)
}

/*
 * This is a copy of the same function in utils.js, but also adjust horizontal scrolling
 * and perform few further cheks on the current value to avoid changing the values when
 * it would be clamp to the current one in any case.
 * Return the amount of shift applied
 */
export const ensureActorVisibleInScrollView = function (
  scrollView,
  actor,
  fadeSize,
  onComplete,
) {
  const vadjustment = scrollView.vadjustment
  const hadjustment = scrollView.hadjustment
  let [vvalue, vlower, vupper, vstepIncrement, vpageIncrement, vpageSize] =
    vadjustment.get_values()
  let [hvalue, hlower, hupper, hstepIncrement, hpageIncrement, hpageSize] =
    hadjustment.get_values()

  let [hvalue0, vvalue0] = [hvalue, vvalue]

  let voffset = fadeSize
  let hoffset = fadeSize

  let box = actor.get_allocation_box()
  let y1 = box.y1,
    y2 = box.y2,
    x1 = box.x1,
    x2 = box.x2

  let parent = actor.get_parent()
  while (parent != scrollView) {
    if (!parent) throw new Error('actor not in scroll view')

    let box = parent.get_allocation_box()
    y1 += box.y1
    y2 += box.y1
    x1 += box.x1
    x2 += box.x1
    parent = parent.get_parent()
  }

  if (y1 < vvalue + voffset) vvalue = Math.max(0, y1 - voffset)
  else if (vvalue < vupper - vpageSize && y2 > vvalue + vpageSize - voffset)
    vvalue = Math.min(vupper - vpageSize, y2 + voffset - vpageSize)

  if (x1 < hvalue + hoffset) hvalue = Math.max(0, x1 - hoffset)
  else if (hvalue < hupper - hpageSize && x2 > hvalue + hpageSize - hoffset)
    hvalue = Math.min(hupper - hpageSize, x2 + hoffset - hpageSize)

  let tweenOpts = {
    time: SCROLL_TIME,
    onComplete: onComplete || (() => {}),
    transition: 'easeOutQuad',
  }

  if (vvalue !== vvalue0) {
    animate(vadjustment, mergeObjects(tweenOpts, { value: vvalue }))
  }

  if (hvalue !== hvalue0) {
    animate(hadjustment, mergeObjects(tweenOpts, { value: hvalue }))
  }

  return [hvalue - hvalue0, vvalue - vvalue0]
}

/**
 *  ColorUtils is adapted from https://github.com/micheleg/dash-to-dock
 */
let colorNs = Clutter.Color ? Clutter : Cogl

export const ColorUtils = {
  color_from_string: colorNs.color_from_string,
  Color: colorNs.Color,

  colorLuminance(r, g, b, dlum) {
    // Darken or brighten color by a fraction dlum
    // Each rgb value is modified by the same fraction.
    // Return "#rrggbb" strin

    let rgbString = '#'

    rgbString += ColorUtils._decimalToHex(
      Math.round(Math.min(Math.max(r * (1 + dlum), 0), 255)),
      2,
    )
    rgbString += ColorUtils._decimalToHex(
      Math.round(Math.min(Math.max(g * (1 + dlum), 0), 255)),
      2,
    )
    rgbString += ColorUtils._decimalToHex(
      Math.round(Math.min(Math.max(b * (1 + dlum), 0), 255)),
      2,
    )

    return rgbString
  },

  _decimalToHex(d, padding) {
    // Convert decimal to an hexadecimal string adding the desired padding

    let hex = d.toString(16)
    while (hex.length < padding) hex = '0' + hex
    return hex
  },

  HSVtoRGB(h, s, v) {
    // Convert hsv ([0-1, 0-1, 0-1]) to rgb ([0-255, 0-255, 0-255]).
    // Following algorithm in https://en.wikipedia.org/wiki/HSL_and_HSV
    // here with h = [0,1] instead of [0, 360]
    // Accept either (h,s,v) independently or  {h:h, s:s, v:v} object.
    // Return {r:r, g:g, b:b} object.

    if (arguments.length === 1) {
      s = h.s
      v = h.v
      h = h.h
    }

    let r, g, b
    let c = v * s
    let h1 = h * 6
    let x = c * (1 - Math.abs((h1 % 2) - 1))
    let m = v - c

    if (h1 <= 1) (r = c + m), (g = x + m), (b = m)
    else if (h1 <= 2) (r = x + m), (g = c + m), (b = m)
    else if (h1 <= 3) (r = m), (g = c + m), (b = x + m)
    else if (h1 <= 4) (r = m), (g = x + m), (b = c + m)
    else if (h1 <= 5) (r = x + m), (g = m), (b = c + m)
    else (r = c + m), (g = m), (b = x + m)

    return {
      r: Math.round(r * 255),
      g: Math.round(g * 255),
      b: Math.round(b * 255),
    }
  },

  RGBtoHSV(r, g, b) {
    // Convert rgb ([0-255, 0-255, 0-255]) to hsv ([0-1, 0-1, 0-1]).
    // Following algorithm in https://en.wikipedia.org/wiki/HSL_and_HSV
    // here with h = [0,1] instead of [0, 360]
    // Accept either (r,g,b) independently or {r:r, g:g, b:b} object.
    // Return {h:h, s:s, v:v} object.

    if (arguments.length === 1) {
      r = r.r
      g = r.g
      b = r.b
    }

    let h, s, v

    let M = Math.max(r, g, b)
    let m = Math.min(r, g, b)
    let c = M - m

    if (c == 0) h = 0
    else if (M == r) h = ((g - b) / c) % 6
    else if (M == g) h = (b - r) / c + 2
    else h = (r - g) / c + 4

    h = h / 6
    v = M / 255
    if (M !== 0) s = c / M
    else s = 0

    return { h: h, s: s, v: v }
  },
}

/**
 *  DominantColorExtractor is adapted from https://github.com/micheleg/dash-to-dock
 */
let themeLoader = null
let iconCacheMap = new Map()
const MAX_CACHED_ITEMS = 1000
const BATCH_SIZE_TO_DELETE = 50
const DOMINANT_COLOR_ICON_SIZE = 64

export const DominantColorExtractor = class {
  constructor(app) {
    this._app = app
  }

  /**
   * Try to get the pixel buffer for the current icon, if not fail gracefully
   */
  _getIconPixBuf() {
    let iconTexture = this._app.create_icon_texture(16)

    if (themeLoader === null) {
      themeLoader = new St.IconTheme()
    }

    // Unable to load the icon texture, use fallback
    if (iconTexture instanceof St.Icon === false) {
      return null
    }

    iconTexture = iconTexture.get_gicon()

    // Unable to load the icon texture, use fallback
    if (iconTexture === null) {
      return null
    }

    if (iconTexture instanceof Gio.FileIcon) {
      // Use GdkPixBuf to load the pixel buffer from the provided file path
      return GdkPixbuf.Pixbuf.new_from_file(iconTexture.get_file().get_path())
    }

    // Get the pixel buffer from the icon theme
    if (iconTexture instanceof Gio.ThemedIcon) {
      let icon_info = themeLoader.lookup_icon(
        iconTexture.get_names()[0],
        DOMINANT_COLOR_ICON_SIZE,
        0,
      )

      if (icon_info !== null) {
        return icon_info.load_icon()
      }
    }

    return null
  }

  /**
   * The backlight color choosing algorithm was mostly ported to javascript from the
   * Unity7 C++ source of Canonicals:
   * https://bazaar.launchpad.net/~unity-team/unity/trunk/view/head:/launcher/LauncherIcon.cpp
   * so it more or less works the same way.
   */
  _getColorPalette() {
    if (iconCacheMap.get(this._app.get_id())) {
      // We already know the answer
      return iconCacheMap.get(this._app.get_id())
    }

    let pixBuf = this._getIconPixBuf()
    if (pixBuf == null) return null

    let pixels = pixBuf.get_pixels(),
      offset = 0

    let total = 0,
      rTotal = 0,
      gTotal = 0,
      bTotal = 0

    let resample_y = 1,
      resample_x = 1

    // Resampling of large icons
    // We resample icons larger than twice the desired size, as the resampling
    // to a size s
    // DOMINANT_COLOR_ICON_SIZE < s < 2*DOMINANT_COLOR_ICON_SIZE,
    // most of the case exactly DOMINANT_COLOR_ICON_SIZE as the icon size is tipycally
    // a multiple of it.
    let width = pixBuf.get_width()
    let height = pixBuf.get_height()

    // Resample
    if (height >= 2 * DOMINANT_COLOR_ICON_SIZE)
      resample_y = Math.floor(height / DOMINANT_COLOR_ICON_SIZE)

    if (width >= 2 * DOMINANT_COLOR_ICON_SIZE)
      resample_x = Math.floor(width / DOMINANT_COLOR_ICON_SIZE)

    if (resample_x !== 1 || resample_y !== 1)
      pixels = this._resamplePixels(pixels, resample_x, resample_y)

    // computing the limit outside the for (where it would be repeated at each iteration)
    // for performance reasons
    let limit = pixels.length
    for (let offset = 0; offset < limit; offset += 4) {
      let r = pixels[offset],
        g = pixels[offset + 1],
        b = pixels[offset + 2],
        a = pixels[offset + 3]

      let saturation = Math.max(r, g, b) - Math.min(r, g, b)
      let relevance = 0.1 * 255 * 255 + 0.9 * a * saturation

      rTotal += r * relevance
      gTotal += g * relevance
      bTotal += b * relevance

      total += relevance
    }

    total = total * 255

    let r = rTotal / total,
      g = gTotal / total,
      b = bTotal / total

    let hsv = ColorUtils.RGBtoHSV(r * 255, g * 255, b * 255)

    if (hsv.s > 0.15) hsv.s = 0.65
    hsv.v = 0.9

    let rgb = ColorUtils.HSVtoRGB(hsv.h, hsv.s, hsv.v)

    // Cache the result.
    let backgroundColor = {
      lighter: ColorUtils.colorLuminance(rgb.r, rgb.g, rgb.b, 0.2),
      original: ColorUtils.colorLuminance(rgb.r, rgb.g, rgb.b, 0),
      darker: ColorUtils.colorLuminance(rgb.r, rgb.g, rgb.b, -0.5),
    }

    if (iconCacheMap.size >= MAX_CACHED_ITEMS) {
      //delete oldest cached values (which are in order of insertions)
      let ctr = 0
      for (let key of iconCacheMap.keys()) {
        if (++ctr > BATCH_SIZE_TO_DELETE) break
        iconCacheMap.delete(key)
      }
    }

    iconCacheMap.set(this._app.get_id(), backgroundColor)

    return backgroundColor
  }

  /**
   * Downsample large icons before scanning for the backlight color to
   * improve performance.
   *
   * @param pixBuf
   * @param pixels
   * @param resampleX
   * @param resampleY
   *
   * @return [];
   */
  _resamplePixels(pixels, resampleX, resampleY) {
    let resampledPixels = []
    // computing the limit outside the for (where it would be repeated at each iteration)
    // for performance reasons
    let limit = pixels.length / (resampleX * resampleY) / 4
    for (let i = 0; i < limit; i++) {
      let pixel = i * resampleX * resampleY

      resampledPixels.push(pixels[pixel * 4])
      resampledPixels.push(pixels[pixel * 4 + 1])
      resampledPixels.push(pixels[pixel * 4 + 2])
      resampledPixels.push(pixels[pixel * 4 + 3])
    }

    return resampledPixels
  }
}

export const drawRoundedLine = function (
  cr,
  x,
  y,
  width,
  height,
  isRoundLeft,
  isRoundRight,
  stroke,
  fill,
) {
  if (height > width) {
    y += Math.floor((height - width) / 2.0)
    height = width
  }

  height = 2.0 * Math.floor(height / 2.0)

  const leftRadius = isRoundLeft ? height / 2.0 : 0.0
  const rightRadius = isRoundRight ? height / 2.0 : 0.0

  cr.moveTo(x + width - rightRadius, y)
  cr.lineTo(x + leftRadius, y)
  if (isRoundLeft)
    cr.arcNegative(
      x + leftRadius,
      y + leftRadius,
      leftRadius,
      -Math.PI / 2,
      Math.PI / 2,
    )
  else cr.lineTo(x, y + height)
  cr.lineTo(x + width - rightRadius, y + height)
  if (isRoundRight)
    cr.arcNegative(
      x + width - rightRadius,
      y + rightRadius,
      rightRadius,
      Math.PI / 2,
      -Math.PI / 2,
    )
  else cr.lineTo(x + width, y)
  cr.closePath()

  if (fill != null) {
    cr.setSource(fill)
    cr.fillPreserve()
  }
  if (stroke != null) cr.setSource(stroke)
  cr.stroke()
}