@unovis/ts 1.1.1-beta.7 → 1.1.1-beta.9

package/src/components/leaflet-map/renderer/mapboxgl-layer.ts

@@ -1,43 +0,0 @@
-import type L from 'leaflet'
-import type Maplibre from 'maplibre-gl'
-import type { Map } from 'maplibre-gl'
-
-import { injectGlobal } from '@emotion/css'
-
-// Utils
-import { isObject } from 'utils/data'
-
-// Types
-import { GenericDataRecord } from 'types/data'
-
-// Config
-import { LeafletMapConfig } from '../config'
-import { MapLibreStyleSpecs } from './map-style'
-import { MaplibreGLLayer } from './leaflet-maplibre-gl'
-
-// Inject MapLibreGL global style
-import mapLibreStyles from './maplibre-gl.css.js'
-injectGlobal(mapLibreStyles)
-
-export function getMaplibreGLLayer<Datum extends GenericDataRecord> (config: LeafletMapConfig<Datum>, leaflet: typeof L, maplibre: typeof Maplibre): L.Layer & { getMaplibreMap(): Map } {
-  const { accessToken, style } = config
-
-  if (isObject(style) && !(style as MapLibreStyleSpecs).glyphs) {
-    console.warn('Unovis | Leaflet Map: Glyphs URL is required in order to show the map. Set `mapboxglGlyphs` URL in the style settings')
-    return
-  }
-
-  if (isObject(style) && !(style as MapLibreStyleSpecs).sources) {
-    console.warn('Unovis | Leaflet Map: Sources settings are required in order to show map. Set the `sources` property in the style settings')
-    return
-  }
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const layer = MaplibreGLLayer(leaflet, maplibre, {
-    style: style,
-    accessToken: accessToken || 'not-needed',
-  })
-
-  return layer
-}

package/src/components/leaflet-map/renderer/mapboxgl-utils.ts

@@ -1,40 +0,0 @@
-// Utils
-import { throttle } from 'utils/data'
-
-export function constraintMapView (map: L.Map, latMin = -75, latMax = 85): void {
-  const bounds = map.getBounds()
-  const northEast = bounds.getNorthEast()
-  const southWest = bounds.getSouthWest()
-
-  if (northEast.lat > latMax && southWest.lat < latMin) {
-    map.fitBounds([
-      [latMin, 0],
-      [latMax, 0],
-    ])
-  }
-}
-
-export function mapboxglWheelEvent (map, layer, event): void {
-  const { wheelDelta, deltaY } = event
-  if (!layer || !layer.getMaplibreMap) return
-  const mapboxmap = layer.getMaplibreMap()
-  const delta = wheelDelta || deltaY * -1 // We use deltaY for Firefox because wheelDelta is not implemented there
-
-  // Prevent Map from being zoomed-out too far away
-  const bounds = map.getBounds()
-  const northEast = bounds.getNorthEast()
-  const southWest = bounds.getSouthWest()
-  const latMin = -70
-  const latMax = 80
-  if (delta < 0 && northEast.lat > latMax && southWest.lat < latMin) {
-    constraintMapView(map)
-    return
-  }
-
-  const zoom = mapboxmap.getZoom() + delta * 0.001
-  const xy = map.mouseEventToLayerPoint(event)
-  map.setZoomAround(xy, zoom + 1, { animate: false, duration: 0 })
-}
-
-export const mapboxglWheelEventThrottled = throttle(mapboxglWheelEvent, 32)
-export const constraintMapViewThrottled = throttle(constraintMapView, 1000)

package/src/components/leaflet-map/style.ts

@@ -1,217 +0,0 @@
-import { css, injectGlobal } from '@emotion/css'
-
-// Utils
-import { getCssVarNames, injectGlobalCssVariables } from 'utils/style'
-
-// Inject Leaflet global style
-// eslint-disable-next-line
-import leafletCSS from './leaflet.css'
-injectGlobal(leafletCSS)
-
-const cssVarDefaults = {
-  '--vis-map-container-background-color': '#dfe5eb',
-  /* Undefined by default to allow proper fallback to var(--vis-font-family) */
-  '--vis-map-label-font-family': undefined,
-
-  '--vis-map-point-default-fill-color': '#B9BEC3',
-  '--vis-map-point-ring-fill-color': '#ffffff',
-  '--vis-map-point-default-stroke-color': '#959da3',
-  '--vis-map-point-default-stroke-width': '0px',
-  '--vis-map-point-default-cursor': 'default',
-
-  '--vis-map-cluster-default-fill-color': '#fff',
-  '--vis-map-cluster-default-stroke-color': '#B9BEC3',
-  '--vis-map-cluster-default-stroke-width': '1.5px',
-  '--vis-map-cluster-donut-fill-color': '#959da3',
-
-  '--vis-map-cluster-inner-label-text-color-dark': '#5b5f6d',
-  '--vis-map-cluster-inner-label-text-color-light': '#fff',
-
-  '--vis-map-point-inner-label-text-color-dark': '#5b5f6d',
-  '--vis-map-point-inner-label-text-color-light': '#fff',
-
-  '--vis-map-point-bottom-label-text-color': '#5b5f6d',
-  '--vis-map-point-bottom-label-font-size': '10px',
-
-  '--vis-map-cluster-expanded-background-fill-color': '#fff',
-
-  /* Dark Theme */
-  '--vis-dark-map-container-background-color': '#dfe5eb',
-  '--vis-dark-map-point-default-fill-color': '#B9BEC3',
-  '--vis-dark-map-point-default-stroke-color': '#959da3',
-  '--vis-dark-map-point-ring-fill-color': '#5b5f6d',
-
-  '--vis-dark-map-cluster-default-fill-color': '#5b5f6d',
-  '--vis-dark-map-cluster-default-stroke-color': '#B9BEC3',
-  '--vis-dark-map-cluster-donut-fill-color': '#959da3',
-
-  '--vis-dark-map-cluster-inner-label-text-color-dark': '#5b5f6d',
-  '--vis-dark-map-cluster-inner-label-text-color-light': '#fff',
-
-  '--vis-dark-map-point-inner-label-text-color-dark': '#5b5f6d',
-  '--vis-dark-map-point-inner-label-text-color-light': '#fff',
-
-  '--vis-dark-map-point-bottom-label-text-color': '#5b5f6d',
-
-  '--vis-dark-map-cluster-expanded-background-fill-color': '#fff',
-}
-
-export const root = css`
-  label: leaflet-map-component;
-
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background-color: var(--vis-map-container-background-color);
-
-  canvas {
-    pointer-events: all;
-  }
-`
-
-export const variables = getCssVarNames(cssVarDefaults)
-injectGlobalCssVariables(cssVarDefaults, root)
-
-export const background = `${root} canvas`
-
-export const points = css`
-  label: g-points;
-`
-
-export const point = css`
-  label: g-point;
-`
-
-export const pointPath = css`
-  label: point-path;
-
-  stroke-opacity: 1;
-  fill-opacity: 1.0;
-  fill: var(${variables.mapPointDefaultFillColor});
-  stroke: var(${variables.mapPointDefaultStrokeColor});
-  stroke-width: var(${variables.mapPointDefaultStrokeWidth});
-  pointer-events: fill !important;
-  transition: .2s stroke-width, .3s transform;
-  cursor: var(${variables.mapPointDefaultCursor});
-
-  &:hover {
-    stroke-width: 2;
-    fill-opacity: 1;
-    animation: none;
-    transform: scale(1.1);
-  }
-`
-
-export const pointPathRing = css`
-  label: point-path-ring;
-  fill: var(${variables.mapPointRingFillColor});
-`
-
-export const pointPathCluster = css`
-  label: point-path-cluster;
-  fill-opacity: 0.9;
-  stroke: none;
-  animation: none;
-  fill: var(${variables.mapClusterDefaultFillColor});
-  stroke: var(${variables.mapClusterDefaultStrokeColor});
-  stroke-width: var(${variables.mapClusterDefaultStrokeWidth});
-`
-
-export const pointSelectionRing = css`
-  label: point-selection-ring;
-  stroke: var(${variables.mapPointDefaultFillColor});
-`
-
-export const pointSelection = css`
-  label: point-selection;
-
-  opacity: 0;
-  transform: scale(1);
-
-  &.active {
-    transition: all 400ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
-    opacity: 1;
-    transform: scale(1.25);
-  }
-`
-
-export const innerLabel = css`
-  label: inner-label;
-
-  text-anchor: middle;
-  fill: var(${variables.mapPointInnerLabelTextColorDark});
-  font-family: var(${variables.mapLabelFontFamily}, var(--vis-font-family));
-  pointer-events: none;
-  font-weight: 600;
-`
-
-export const innerLabelCluster = css`
-  label: inner-label-cluster;
-  fill: var(${variables.mapPointInnerLabelTextColorDark});
-`
-
-export const bottomLabel = css`
-  label: bottom-label;
-
-  text-anchor: middle;
-  fill: var(${variables.mapPointBottomLabelTextColor});
-  font-family: var(${variables.mapLabelFontFamily}, var(--vis-font-family));
-  pointer-events: none;
-  font-weight: 600;
-`
-
-export const donutCluster = css`
-  label: donut-cluster;
-
-  transform: scale(1);
-  transition: .3s transform;
-  path {
-    fill: var(${variables.mapClusterDonutFillColor});
-    stroke-width: 0.5;
-  }
-
-  &:hover {
-    transform: scale(1.1);
-  }
-`
-
-export const svgOverlay = css`
-  label: svg-overlay;
-  position: absolute;
-  pointer-events: none;
-`
-
-export const backgroundRect = css`
-  label: background-rect;
-
-  opacity: 0;
-`
-
-export const clusterBackground = css`
-  label: cluster-background;
-
-  fill: var(${variables.mapClusterExpandedBackgroundFillColor});
-  opacity: 0.6;
-  visibility: hidden;
-
-  &.active {
-    visibility: visible;
-  }
-`
-
-export const onFeatureHover = css`
-  label: feature-hovered;
-`
-
-export const mapboxglCanvas = css`
-  pointer-events: all;
-  cursor: grab;
-
-  &${`.${onFeatureHover}`} {
-    cursor: default;
-  }
-`
-
-export const map = css`
-  label: map;
-`

package/src/components/leaflet-map/types.ts

@@ -1,75 +0,0 @@
-import { LatLng } from 'leaflet'
-import Supercluster, { ClusterProperties } from 'supercluster'
-import { GenericDataRecord } from 'types/data'
-
-export enum LeafletMapRenderer {
-  Raster = 'raster',
-  MapLibre = 'maplibre',
-}
-
-export enum LeafletMapPointShape {
-  Square = 'square',
-  Circle = 'circle',
-  Triangle = 'triangle',
-  Ring = 'ring',
-}
-
-export type LeafletMapPieDatum = {
-  value: number;
-  name: string;
-  color: string;
-  className?: string;
-}
-
-export interface LeafletMapPointStyle {
-  color: string;
-  className?: string;
-}
-
-export type LeafletMapPointStyles<D> = { [key in keyof D]?: LeafletMapPointStyle }
-
-export type PointExpandedClusterProperties<D extends GenericDataRecord> = D & {
-  // Expanded cluster related data:
-  // eslint-disable-next-line no-use-before-define
-  expandedClusterPoint?: LeafletMapPoint<D>;
-  r?: number;
-  dx?: number;
-  dy?: number;
-}
-
-export type LeafletMapClusterDatum<D extends GenericDataRecord> = Partial<D> & ClusterProperties & {
-  clusterIndex?: Supercluster<D>;
-  clusterPoints?: D[];
-}
-
-export type LeafletMapPointDatum<D extends GenericDataRecord> = D & PointExpandedClusterProperties<D> & {
-  id: string | number;
-  shape: LeafletMapPointShape;
-};
-
-export type LeafletMapPoint<D extends GenericDataRecord> = {
-  geometry: GeoJSON.Point;
-  bbox: { x1: number; x2: number; y1: number; y2: number };
-  radius: number;
-  path: string;
-  color: string;
-  id: number | string;
-  properties: LeafletMapPointDatum<D> | LeafletMapClusterDatum<D>;
-  donutData: LeafletMapPieDatum[];
-  isCluster: boolean;
-  clusterIndex: Supercluster<D, Supercluster.AnyProps>;
-  clusterPoints?: D[];
-  _zIndex: number;
-}
-
-export type Bounds = {
-  northEast: { lat: number; lng: number };
-  southWest: { lat: number; lng: number };
-}
-
-export type MapZoomState = {
-  mapCenter: LatLng;
-  zoomLevel: number;
-  bounds: Bounds;
-  userDriven: boolean;
-}

package/src/components/line/config.ts

@@ -1,34 +0,0 @@
-import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
-
-// Types
-import { CurveType } from 'types/curve'
-import { GenericAccessor, StringAccessor } from 'types/accessor'
-
-export interface LineConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
-  /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */
-  curveType?: CurveType;
-  /** Line width in pixels. Default: `2` */
-  lineWidth?: number;
-  /** Line dash array, see SVG's stroke-dasharray. Default: `undefined` */
-  lineDashArray?: GenericAccessor<number[], Datum>;
-  /** When a data point has an `undefined`, `NaN`, or other no-data value, they'll be replaced with a value specified here.
-   * Setting this property to `undefined` will lead to having the line break when there's no data, and continue when
-   * the data appears again. If you set it to `null`, the values will be treated as numerical `0` values and the line
-   * won't break; however if the whole dataset consists of only `null`s, the line won't be displayed.
-   * Default: `undefined`
-  */
-  fallbackValue?: number | undefined | null;
-  /** Highlight line on hover. Default: `false` */
-  highlightOnHover?: boolean;
-  /** Optional link cursor. Default: `null` */
-  cursor?: StringAccessor<Datum[]>;
-}
-
-export class LineConfig<Datum> extends XYComponentConfig<Datum> implements LineConfigInterface<Datum> {
-  curveType = CurveType.MonotoneX
-  lineWidth = 2
-  lineDashArray = undefined
-  fallbackValue = undefined
-  highlightOnHover = false
-  cursor = null
-}

package/src/components/line/index.ts

@@ -1,188 +0,0 @@
-import { select } from 'd3-selection'
-import { Transition } from 'd3-transition'
-import { CurveFactoryLineOnly, Line as LineGenInterface, line } from 'd3-shape'
-import { interpolatePath } from 'd3-interpolate-path'
-
-// Core
-import { XYComponentCore } from 'core/xy-component'
-
-// Utils
-import { getNumber, getString, getValue, isArray, isNumber } from 'utils/data'
-import { smartTransition } from 'utils/d3'
-import { getColor } from 'utils/color'
-
-// Types
-import { NumericAccessor } from 'types/accessor'
-import { Spacing } from 'types/spacing'
-import { Curve, CurveType } from 'types/curve'
-import { Direction } from 'types/direction'
-
-// Local Types
-import { LineData, LineDatum } from './types'
-
-// Config
-import { LineConfig, LineConfigInterface } from './config'
-
-// Styles
-import * as s from './style'
-
-export class Line<Datum> extends XYComponentCore<Datum, LineConfig<Datum>, LineConfigInterface<Datum>> {
-  static selectors = s
-  config: LineConfig<Datum> = new LineConfig()
-  lineGen: LineGenInterface<{ x: number; y: number; defined: boolean }>
-  curve: CurveFactoryLineOnly = Curve[CurveType.MonotoneX]
-  events = {
-    [Line.selectors.line]: {
-      mouseover: this._highlight.bind(this),
-      mouseleave: this._resetHighlight.bind(this),
-    },
-  }
-
-  constructor (config?: LineConfigInterface<Datum>) {
-    super()
-    if (config) this.config.init(config)
-  }
-
-  get bleed (): Spacing {
-    const { config: { lineWidth } } = this
-    const yDomain = this.yScale.domain() as [number, number]
-    const yDirection = this.yScale.range()[0] > this.yScale.range()[1]
-      ? Direction.North
-      : Direction.South
-    const isYDirectionSouth = yDirection === Direction.South
-
-    const isLineThick = lineWidth > 3
-    const isLineVeryThick = lineWidth >= 10
-    return {
-      top: !isLineVeryThick && (
-        (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))
-      ) ? 0 : lineWidth / 2,
-      bottom: !isLineVeryThick && (
-        (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))
-      ) ? 0 : lineWidth / 2,
-      left: isLineThick ? lineWidth / 2 : 0,
-      right: isLineThick ? lineWidth / 2 : 0,
-    }
-  }
-
-  _render (customDuration?: number): void {
-    super._render(customDuration)
-    const { config, datamodel: { data } } = this
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-
-    this.curve = Curve[config.curveType]
-    this.lineGen = line<{ x: number; y: number; defined: boolean }>()
-      .x(d => d.x)
-      .y(d => d.y)
-      .defined(d => d.defined)
-      .curve(this.curve)
-
-    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]
-    const lineDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))
-    const lineData: LineData[] = yAccessors.map(a => {
-      const ld: LineDatum[] = data.map((d, i) => {
-        const rawValue = getNumber(d, a, i)
-        // If `rawValue` is not numerical or if it's not finite (`NaN`, `undefined`, ...), we replace it with `config.fallbackValue`
-        const value = (isNumber(rawValue) || (rawValue === null)) && isFinite(rawValue) ? rawValue : config.fallbackValue
-        return {
-          x: lineDataX[i],
-          y: this.yScale(value ?? 0),
-          defined: isFinite(value),
-          value,
-        }
-      })
-
-      const defined = ld.reduce((def, d) => (d.defined || def), false)
-      // If the line consists only of `null` values, we'll still render it but it'll be invisible.
-      // Such trick allows us to have better animated transitions.
-      const visible = defined && ld.some(d => d.value !== null)
-      return {
-        values: ld,
-        defined,
-        visible,
-      }
-    })
-
-    const lines = this.g
-      .selectAll<SVGGElement, LineData>(`.${s.line}`)
-      .data(lineData)
-
-    const linesEnter = lines.enter().append('g')
-      .attr('class', s.line)
-
-    linesEnter
-      .append('path')
-      .attr('class', s.linePath)
-      .attr('d', this._emptyPath())
-      .attr('stroke', (d, i) => getColor(data, config.color, i))
-      .attr('stroke-opacity', 0)
-      .attr('stroke-width', config.lineWidth)
-
-    linesEnter
-      .append('path')
-      .attr('class', s.lineSelectionHelper)
-      .attr('d', this._emptyPath())
-
-    const linesMerged = linesEnter.merge(lines)
-    linesMerged.style('cursor', (d, i) => getString(data, config.cursor, i))
-    linesMerged.each((d, i, elements) => {
-      const group = select(elements[i])
-      const linePath = group.select<SVGPathElement>(`.${s.linePath}`)
-      const lineSelectionHelper = group.select(`.${s.lineSelectionHelper}`)
-
-      const isLineVisible = d.visible
-      const dashArray = getValue<LineData, number[]>(d, config.lineDashArray, i)
-      const transition = smartTransition(linePath, duration)
-        .attr('stroke', getColor(data, config.color, i))
-        .attr('stroke-width', config.lineWidth)
-        .attr('stroke-opacity', isLineVisible ? 1 : 0)
-        .style('stroke-dasharray', dashArray?.join(' ') ?? null) // We use `.style` because there's also a default CSS-variable for stroke-dasharray
-
-      const hasUndefinedSegments = d.values.some(d => !d.defined)
-      const svgPathD = this.lineGen(d.values)
-
-      if (duration && !hasUndefinedSegments) {
-        const previous = linePath.attr('d') || this._emptyPath()
-        const next = svgPathD || this._emptyPath()
-        const t = transition as Transition<SVGPathElement, LineData, SVGGElement, LineData>
-        t.attrTween('d', () => interpolatePath(previous, next))
-      } else if (d.visible) {
-        transition.attr('d', svgPathD)
-      }
-
-      lineSelectionHelper
-        .attr('d', svgPathD)
-        .attr('visibility', isLineVisible ? null : 'hidden')
-    })
-
-    smartTransition(lines.exit(), duration)
-      .style('opacity', 0)
-      .remove()
-  }
-
-  private _emptyPath (): string {
-    const xRange = this.xScale.range()
-    const yRange = this.yScale.range()
-    return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`
-  }
-
-  private _highlight (datum, i, els): void {
-    const { config } = this
-
-    if (config.highlightOnHover) {
-      this.g
-        .selectAll(`.${s.line}`)
-        .classed(s.dim, d => d !== datum)
-    }
-  }
-
-  private _resetHighlight (d, i, els): void {
-    const { config } = this
-
-    if (config.highlightOnHover) {
-      this.g
-        .selectAll(`.${s.line}`)
-        .classed(s.dim, false)
-    }
-  }
-}

package/src/components/line/types.ts

@@ -1,3 +0,0 @@
-/** Data type for Line Generator: [x, y, defined] */
-export type LineDatum = { x: number; y: number; value: number | null | undefined; defined: boolean }
-export type LineData = { values: LineDatum[]; defined: boolean; visible: boolean }

package/src/components/nested-donut/config.ts

@@ -1,75 +0,0 @@
-// Core
-import { ComponentConfigInterface, ComponentConfig } from 'core/component/config'
-
-// Types
-import { ColorAccessor, GenericAccessor, StringAccessor } from 'types/accessor'
-import { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment } from './types'
-
-
-export interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterface {
-  /** Diagram angle range. Default: `[0, 2 * Math.PI]` */
-  angleRange?: [number, number];
-  /** Direction of hierarchy flow from root to leaf.
-   * `NestedDonutDirection.INWARDS` starts from the outer most radius and works towards center
-   * `NestedDonutDirection.OUTWARDS` starts from the inner most radius the consecutive layers outward.
-   *  Default: `NestedDonutDirection.INWARDS`
-  */
-  direction?: NestedDonutDirection | string;
-
-  /** Central label text. Default: `undefined` */
-  centralLabel?: string;
-  /** Central sub-label accessor function or text. Default: `undefined` */
-  centralSubLabel?: string;
-  /** Enables wrapping for the sub-label. Default: `true` */
-  centralSubLabelWrap?: boolean;
-  /**
-   * Show donut background. The color is configurable via
-   * the `--vis-nested-donut-background-color` and `--vis-dark-nested-donut-background-color` CSS variables.
-   * Default: `true`
-  */
-  showBackground?: boolean;
-
-  // Layers
-  /** Array of accessor functions to defined the nested groups  */
-  layers: StringAccessor<Datum>[];
-  /* Layer settings */
-  layerConfig?: GenericAccessor<NestedDonutLayerSettings, string>;
-  /* Space between layers */
-  layerPadding?: number;
-
-  // Segments
-  /** Color accessor function. Default: `undefined` */
-  color?: ColorAccessor<NestedDonutSegment<Datum>>;
-  /** Corner Radius. Default: `0` */
-  cornerRadius?: number;
-  /** Label accessor function. */
-  label?: StringAccessor<NestedDonutSegment<Datum>>;
-  /**
-   * When true, the component will display empty segments (the ones that have `0` values) as tiny slices.
-   * Default: `false`
-   * */
-  showEmptySegments?: boolean;
-  /** Angular size for empty segments in radians. Default: `0.5 * Math.PI / 180` */
-  emptySegmentAngle?: number;
-}
-
-export class NestedDonutConfig<Datum> extends ComponentConfig implements NestedDonutConfigInterface<Datum> {
-  centralLabel?: string
-  centralSubLabel?: string
-  centralSubLabelWrap?: boolean
-  showEmptySegments?: boolean
-  emptySegmentAngle?: number
-
-  color?: ColorAccessor<NestedDonutSegment<Datum>>
-  label?: StringAccessor<NestedDonutSegment<Datum>>
-  direction = NestedDonutDirection.INWARDS
-  layers: StringAccessor<Datum>[]
-  layerSettings = undefined
-  layerPadding = 0
-  angleRange = [0, 2 * Math.PI] as [number, number]
-  padAngle = 0
-  cornerRadius = 0
-  showBackground = true
-}
-
-