cx 26.2.1 → 26.2.3

package/src/charts/axis/index.scss

@@ -1,5 +1,4 @@
-
-@import 'Axis';
-@import "NumericAxis";
-@import "CategoryAxis";
-@import "TimeAxis";
+@use 'Axis';
+@use "NumericAxis";
+@use "CategoryAxis";
+@use "TimeAxis";

package/src/charts/axis/variables.scss

@@ -1,3 +1,5 @@
 
-$cx-axis-line-stroke: rgba(128, 128, 128, 0.2) !default;
-$cx-axis-ticks-stroke: rgba(128, 128, 128, 0.3) !default;
+$cx-default-chart-axis-line-color: rgba(128, 128, 128, 0.2) !default;
+$cx-default-chart-axis-tick-color: rgba(128, 128, 128, 0.3) !default;
+$cx-default-chart-axis-label-color: currentColor !default;
+$cx-default-chart-axis-label-font-size: smaller !default;

package/src/charts/helpers/ValueAtFinder.ts

@@ -1,4 +1,9 @@
-import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
+import {
+   PointReducer,
+   PointReducerConfig,
+   PointReducerInstance,
+   PointReducerAccumulator,
+} from "./PointReducer";
 import { NumberProp, StringProp, Bind } from "../../ui/Prop";
 import { AccessorChain } from "../../data/createAccessorModelProxy";
 
@@ -13,7 +18,7 @@ export interface ValueAtFinderConfig extends PointReducerConfig {
    at?: NumberProp | StringProp;
 
    /** A binding used to receive the measured y axis value */
-   value?: Bind | AccessorChain<number>;
+   value?: Bind | AccessorChain<number | null>;
 
    /** A function used to convert x values into numeric format. Commonly used with dates. */
    convert?: (value: number | string) => number;
@@ -34,7 +39,10 @@ export class ValueAtFinder extends PointReducer<ValueAtAccumulator> {
       });
    }
 
-   onInitAccumulator = (acc: ValueAtAccumulator, { data }: PointReducerInstance<ValueAtAccumulator>) => {
+   onInitAccumulator = (
+      acc: ValueAtAccumulator,
+      { data }: PointReducerInstance<ValueAtAccumulator>,
+   ) => {
       acc.at = this.convert((data as any).at);
    };
 
@@ -57,12 +65,18 @@ export class ValueAtFinder extends PointReducer<ValueAtAccumulator> {
       }
    };
 
-   onReduce = (acc: ValueAtAccumulator, instance: PointReducerInstance<ValueAtAccumulator>) => {
+   onReduce = (
+      acc: ValueAtAccumulator,
+      instance: PointReducerInstance<ValueAtAccumulator>,
+   ) => {
       let y: number | null = null;
       if (acc.left && acc.right) {
          if (acc.left.x == acc.right.x) y = acc.left.y;
          else if (acc.left.y != null && acc.right.y != null) {
-            y = acc.left.y + ((acc.right.y - acc.left.y) * (acc.at - acc.left.x)) / (acc.right.x - acc.left.x);
+            y =
+               acc.left.y +
+               ((acc.right.y - acc.left.y) * (acc.at - acc.left.x)) /
+                  (acc.right.x - acc.left.x);
          }
       }
       instance.set("value", y);

package/src/charts/index.scss

@@ -1,22 +1,19 @@
-@import "axis/index";
+@use "axis/index" as *;
 
-@import "PieChart";
-@import "Legend";
-@import "LegendEntry";
-@import "Gridlines";
-@import "Swimlanes";
-@import "Column";
-@import "Bar";
-@import "LineGraph";
-@import "ColumnGraph";
-@import "BarGraph";
-@import "ScatterGraph";
-@import "BubbleGraph";
-@import "Marker";
-@import "MarkerLine";
-@import "Range";
-@import "RangeMarker";
-@import "Swimlane";
+@use "PieChart";
+@use "Legend";
+@use "LegendEntry";
+@use "Gridlines";
+@use "Column";
+@use "Bar";
+@use "LineGraph";
+@use "ColumnGraph";
+@use "BarGraph";
+@use "ScatterGraph";
+@use "BubbleGraph";
+@use "Marker";
+@use "MarkerLine";
+@use "Range";
 
 //define last for higher priority
-@import "palette";
+@use "palette";

package/src/charts/palette.scss

@@ -1,29 +1,9 @@
-//https://www.materialui.co/colors
-//normal:200 900
-//hover:100 700
-//selected: 300 900
-//disabled: 0 100
+// Use root entry points to get configured values
+@use "../variables" as *;
+@use "../util/scss/calc.scss" as *;
 @use "sass:map";
 @use "sass:list";
 
-$cx-default-palette-colors: rgba(244, 67, 54, 1) rgba(233, 30, 99, 1) rgba(156, 39, 176, 1) rgba(103, 58, 183, 1)
-   rgba(63, 81, 181, 1) rgba(33, 150, 243, 1) rgba(3, 169, 244, 1) rgba(0, 188, 212, 1) rgba(0, 150, 136, 1)
-   rgba(76, 175, 80, 1) rgba(139, 195, 74, 1) rgba(205, 220, 57, 1) rgba(255, 235, 59, 1) rgba(255, 193, 7, 1)
-   rgba(255, 152, 0, 1) rgba(255, 87, 34, 1) !default;
-
-$cx-default-palette-fill-whiten: 60% !default;
-$cx-default-palette-fill-hover-whiten: 50% !default;
-$cx-default-palette-fill-selected-whiten: 20% !default;
-$cx-default-palette-fill-disabled-whiten: 90% !default;
-
-$cx-default-palette-fill-blacken: 0% !default;
-$cx-default-palette-fill-hover-blacken: 0% !default;
-$cx-default-palette-fill-selected-blacken: 0% !default;
-$cx-default-palette-fill-disabled-blacken: 0% !default;
-
-$cx-default-palette-stroke-whiten: 0% !default;
-$cx-default-palette-stroke-blacken: 10% !default;
-
 @mixin cx-palette(
    $palette-colors: $cx-default-palette-colors,
    $palette-fill-whiten: $cx-default-palette-fill-whiten,
@@ -46,8 +26,8 @@ $cx-default-palette-stroke-blacken: 10% !default;
       $c: list.nth($palette-colors, 1 + (($i - 1) * 1) % list.length($palette-colors));
 
       .#{$state}color-#{$i - 1} {
-         $fill: cx-blacken(cx-whiten($c, $palette-fill-whiten), $palette-fill-blacken);
-         $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+         $fill: cx-darken(cx-lighten($c, $palette-fill-whiten), $palette-fill-blacken);
+         $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
          fill: $fill;
          stroke: $stroke;
          background: $fill;
@@ -57,8 +37,8 @@ $cx-default-palette-stroke-blacken: 10% !default;
          &.#{$state}selectable.#{$state}hover,
          .#{$state}color-root:hover &,
          .#{$state}color-root.#{$state}hover & {
-            $fill: cx-blacken(cx-whiten($c, $palette-fill-hover-whiten), $palette-fill-hover-blacken);
-            $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            $fill: cx-darken(cx-lighten($c, $palette-fill-hover-whiten), $palette-fill-hover-blacken);
+            $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
             fill: $fill;
             stroke: $stroke;
             background: $fill;
@@ -71,8 +51,8 @@ $cx-default-palette-stroke-blacken: 10% !default;
          .#{$state}color-root.#{$state}selected &,
          .#{$state}color-root.#{$state}selected:hover &,
          .#{$state}color-root.#{$state}selected.#{$state}hover & {
-            $fill: cx-blacken(cx-whiten($c, $palette-fill-selected-whiten), $palette-fill-selected-blacken);
-            $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            $fill: cx-darken(cx-lighten($c, $palette-fill-selected-whiten), $palette-fill-selected-blacken);
+            $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
             fill: $fill;
             stroke: $stroke;
             background: $fill;
@@ -81,8 +61,8 @@ $cx-default-palette-stroke-blacken: 10% !default;
 
          &.#{$state}disabled,
          .#{$state}color-root.#{$state}disabled & {
-            $fill: cx-blacken(cx-whiten($c, $palette-fill-disabled-whiten), $palette-fill-disabled-blacken);
-            $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            $fill: cx-darken(cx-lighten($c, $palette-fill-disabled-whiten), $palette-fill-disabled-blacken);
+            $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
             fill: $fill;
             stroke: $stroke;
             background: $fill;

package/src/charts/palette.variables.scss

@@ -0,0 +1,23 @@
+//https://www.materialui.co/colors
+//normal:200 900
+//hover:100 700
+//selected: 300 900
+//disabled: 0 100
+
+$cx-default-palette-colors: rgba(244, 67, 54, 1) rgba(233, 30, 99, 1) rgba(156, 39, 176, 1) rgba(103, 58, 183, 1)
+   rgba(63, 81, 181, 1) rgba(33, 150, 243, 1) rgba(3, 169, 244, 1) rgba(0, 188, 212, 1) rgba(0, 150, 136, 1)
+   rgba(76, 175, 80, 1) rgba(139, 195, 74, 1) rgba(205, 220, 57, 1) rgba(255, 235, 59, 1) rgba(255, 193, 7, 1)
+   rgba(255, 152, 0, 1) rgba(255, 87, 34, 1) !default;
+
+$cx-default-palette-fill-whiten: 60% !default;
+$cx-default-palette-fill-hover-whiten: 50% !default;
+$cx-default-palette-fill-selected-whiten: 20% !default;
+$cx-default-palette-fill-disabled-whiten: 90% !default;
+
+$cx-default-palette-fill-blacken: 0% !default;
+$cx-default-palette-fill-hover-blacken: 0% !default;
+$cx-default-palette-fill-selected-blacken: 0% !default;
+$cx-default-palette-fill-disabled-blacken: 0% !default;
+
+$cx-default-palette-stroke-whiten: 0% !default;
+$cx-default-palette-stroke-blacken: 10% !default;

package/src/charts/variables.scss

@@ -1,8 +1,40 @@
+@forward "axis/variables";
+@forward "palette.variables";
 @use "sass:map";
-@import "axis/variables";
 
-$cx-default-swimlanes-lane-background-color: #f1f1f1;
-$cx-default-range-marker-color: #696969;
+@use "../util/scss/include.scss" as *;
+
+$cx-default-swimlanes-lane-background-color: #f1f1f1 !default;
+$cx-default-range-marker-color: #696969 !default;
+$cx-default-chart-gridline-color: rgba(128, 128, 128, 0.15) !default;
+
+// Shape defaults (bars, columns, pie slices)
+$cx-default-chart-shape-fill-color: #eee !default;
+$cx-default-chart-shape-stroke-color: #ccc !default;
+$cx-default-chart-shape-stroke-width: 1px !default;
+$cx-default-chart-selected-stroke-width: 2px !default;
+
+// Line defaults
+$cx-default-chart-line-stroke-color: gray !default;
+$cx-default-chart-line-stroke-width: 2px !default;
+$cx-default-chart-area-opacity: 0.5 !default;
+
+// Marker defaults (markers, scatter, bubble)
+$cx-default-chart-marker-color: rgb(128, 128, 128) !default;
+$cx-default-chart-marker-stroke-width: 1px !default;
+$cx-default-chart-markerline-stroke-width: 1px !default;
+
+// Range defaults
+$cx-default-chart-range-fill-color: lightgray !default;
+$cx-default-chart-range-opacity: 0.3 !default;
+
+// Legend defaults
+$cx-default-chart-legend-font-size: smaller !default;
+$cx-default-chart-legend-padding: 5px !default;
+$cx-default-chart-legend-gap: 5px 10px !default;
+$cx-default-chart-legend-entry-gap: 5px !default;
+$cx-default-chart-legend-shape-color: rgba(128, 128, 128, 0.1) !default;
+$cx-default-chart-legend-shape-stroke-width: 1px !default;
 
 $cx-dependencies: map.merge(
    $cx-dependencies,

package/src/data/StructuredSelector.ts

@@ -38,8 +38,8 @@ function getSelectorConfig(props: any, values: any, nameMap: any) {
          constants[p] = null;
       } else if (typeof v == "object") {
          if (v.bind) {
-            if (isUndefined(v.defaultValue) && v != pv) v.defaultValue = defaultValue(pv);
-            if (isDefined(v.defaultValue)) defaultValues[v.bind] = v.defaultValue;
+            const dv = isDefined(v.defaultValue) ? v.defaultValue : (v != pv ? defaultValue(pv) : undefined);
+            if (isDefined(dv)) defaultValues[v.bind] = dv;
             nameMap[p] = v.bind;
             functions[p] = Binding.get(v.bind).value;
             constant = false;

package/src/data/createAccessorModelProxy.ts

@@ -1,74 +1,66 @@
-interface AccessorChainMethods {
-   toString(): string;
-   valueOf(): unknown;
-   nameOf(): string;
-}
-
-type AccessorChainMap<M extends object> = {
-   [prop in Exclude<keyof M, keyof AccessorChainMethods>]: AccessorChain<
-      M[prop]
-   >;
-};
-
-// Check if a type is `any` using the intersection trick
-type IsAny<T> = 0 extends 1 & T ? true : false;
-
-export type AccessorChain<M> = {
-   toString(): string;
-   valueOf(): M | undefined;
-   nameOf(): string;
-} & (IsAny<M> extends true
-   ? { [key: string]: any } // Allow any property access for `any` type
-   : NonNullable<M> extends object
-     ? AccessorChainMap<NonNullable<M>>
-     : {});
-
-const emptyFn = () => {};
-
-export function createAccessorModelProxy<M>(
-   chain: string = "",
-): AccessorChain<M> {
-   let lastOp: string | null = null;
-
-   const proxy = new Proxy(emptyFn, {
-      get: (_, name: string | symbol) => {
-         if (typeof name !== "string") return proxy;
-
-         switch (name) {
-            case "isAccessorChain":
-               return true;
-
-            case "toString":
-            case "valueOf":
-            case "nameOf":
-               lastOp = name;
-               return proxy;
-         }
-
-         let newChain = chain;
-         if (newChain.length > 0) newChain += ".";
-         newChain += name;
-         return createAccessorModelProxy(newChain);
-      },
-
-      apply(): string {
-         switch (lastOp) {
-            case "nameOf":
-               const lastDotIndex = chain.lastIndexOf(".");
-               return lastDotIndex > 0
-                  ? chain.substring(lastDotIndex + 1)
-                  : chain;
-
-            default:
-               return chain;
-         }
-      },
-   });
-   return proxy as unknown as AccessorChain<M>;
-}
-
-export const createModel = createAccessorModelProxy;
-
-export function isAccessorChain<M>(value: unknown): value is AccessorChain<M> {
-   return value != null && !!(value as any).isAccessorChain;
-}
+// Homomorphic mapped type preserves Go-to-Definition in IDEs
+// -? strips optionality, as clause filters conflicting method names
+type AccessorChainMap<M> = {
+   [K in keyof M as Exclude<K, "toString" | "valueOf" | "nameOf">]-?: AccessorChain<M[K]>;
+};
+
+// Check if a type is `any` using the intersection trick
+type IsAny<T> = 0 extends 1 & T ? true : false;
+
+export type AccessorChain<M> = (IsAny<M> extends true
+   ? { [key: string]: any } // Allow any property access for `any` type
+   : [M] extends [object]
+     ? AccessorChainMap<M> // Direct mapping preserves IDE navigation
+     : [NonNullable<M>] extends [object]
+       ? AccessorChainMap<NonNullable<M>> // Fallback for nullable types (e.g. optional properties)
+       : {}) & {
+   toString(): string;
+   valueOf(): M | undefined;
+   nameOf(): string;
+};
+
+const emptyFn = () => {};
+
+export function createAccessorModelProxy<M>(chain: string = ""): AccessorChain<M> {
+   let lastOp: string | null = null;
+
+   const proxy = new Proxy(emptyFn, {
+      get: (_, name: string | symbol) => {
+         if (typeof name !== "string") return proxy;
+
+         switch (name) {
+            case "isAccessorChain":
+               return true;
+
+            case "toString":
+            case "valueOf":
+            case "nameOf":
+               lastOp = name;
+               return proxy;
+         }
+
+         let newChain = chain;
+         if (newChain.length > 0) newChain += ".";
+         newChain += name;
+         return createAccessorModelProxy(newChain);
+      },
+
+      apply(): string {
+         switch (lastOp) {
+            case "nameOf":
+               const lastDotIndex = chain.lastIndexOf(".");
+               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
+
+            default:
+               return chain;
+         }
+      },
+   });
+   return proxy as unknown as AccessorChain<M>;
+}
+
+export const createModel = createAccessorModelProxy;
+
+export function isAccessorChain<M>(value: unknown): value is AccessorChain<M> {
+   return value != null && !!(value as any).isAccessorChain;
+}

package/src/index.scss

@@ -1,6 +1,5 @@
-@import "global";
-@import "util/index";
-@import "ui/index";
-@import "widgets/index";
-@import "svg/index";
-@import "charts/index";
+@use "./util/index" as *;
+@use "./ui/index" as *;
+@use "./widgets/index" as *;
+@use "./svg/index" as *;
+@use "./charts/index" as *;

package/src/maps.scss

@@ -0,0 +1,5 @@
+@forward "./util/maps.scss";
+@forward "./ui/maps.scss";
+@forward "./widgets/maps.scss";
+@forward "./svg/maps.scss";
+@forward "./charts/maps.scss";

package/src/svg/Ellipse.tsx

@@ -1,69 +1,76 @@
 /**@jsxImportSource react */
-import { Instance } from '../ui/Instance';
-import { RenderingContext } from '../ui/RenderingContext';
-import { Widget } from '../ui/Widget';
-import { NumberProp, StringProp } from '../ui/Prop';
-import { TextualBoundedObject, TextualBoundedObjectConfig } from './TextualBoundedObject';
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Widget } from "../ui/Widget";
+import { NumberProp, StringProp } from "../ui/Prop";
+import {
+  TextualBoundedObject,
+  TextualBoundedObjectConfig,
+} from "./TextualBoundedObject";
 
 export interface EllipseConfig extends TextualBoundedObjectConfig {
-   /**
-    * Index of the color in the default color palette. Setting this property will set
-    * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill
-    * if they are not necessary.
-    */
-   colorIndex?: NumberProp;
+  /**
+   * Index of the color in the default color palette. Setting this property will set
+   * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill
+   * if they are not necessary.
+   */
+  colorIndex?: NumberProp;
 
-   /** A color used to paint the box. */
-   fill?: StringProp;
+  /** A color used to paint the box. */
+  fill?: StringProp;
 
-   /** A color used to paint the outline of the box. */
-   stroke?: StringProp;
+  /** A color used to paint the outline of the box. */
+  stroke?: StringProp;
 
-   /** Base CSS class to be applied to the element. Defaults to `ellipse`. */
-   baseClass?: string;
+  /** Base CSS class to be applied to the element. Defaults to `ellipse`. */
+  baseClass?: string;
 }
 
 export class Ellipse extends TextualBoundedObject {
-   declare baseClass: string;
-   declare colorIndex?: NumberProp;
-   declare fill?: StringProp;
-   declare stroke?: StringProp;
+  declare baseClass: string;
+  declare colorIndex?: NumberProp;
+  declare fill?: StringProp;
+  declare stroke?: StringProp;
 
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         colorIndex: undefined,
-         fill: undefined,
-         stroke: undefined,
-      });
-   }
+  constructor(config?: EllipseConfig) {
+    super(config);
+  }
 
-   render(context: RenderingContext, instance: Instance, key: string) {
-      const { data } = instance;
-      const { bounds, colorIndex } = data;
-      if (!bounds.valid()) return false;
-      return (
-         <g key={key} className={data.classNames}>
-            <ellipse
-               className={this.CSS.element(
-                  this.baseClass,
-                  'rect',
-                  colorIndex != null && 'color-' + colorIndex
-               )}
-               cx={(bounds.l + bounds.r) / 2}
-               cy={(bounds.t + bounds.b) / 2}
-               rx={bounds.width() / 2}
-               ry={bounds.height() / 2}
-               style={data.style}
-               fill={data.fill}
-               stroke={data.stroke}
-            />
-            {this.renderChildren(context, instance)}
-         </g>
-      );
-   }
+  declareData(...args: any[]) {
+    super.declareData(...args, {
+      colorIndex: undefined,
+      fill: undefined,
+      stroke: undefined,
+    });
+  }
+
+  render(context: RenderingContext, instance: Instance, key: string) {
+    const { data } = instance;
+    const { bounds, colorIndex } = data;
+    if (!bounds.valid()) return false;
+    return (
+      <g key={key} className={data.classNames}>
+        <ellipse
+          className={this.CSS.element(
+            this.baseClass,
+            "rect",
+            colorIndex != null && "color-" + colorIndex,
+          )}
+          cx={(bounds.l + bounds.r) / 2}
+          cy={(bounds.t + bounds.b) / 2}
+          rx={bounds.width() / 2}
+          ry={bounds.height() / 2}
+          style={data.style}
+          fill={data.fill}
+          stroke={data.stroke}
+        />
+        {this.renderChildren(context, instance)}
+      </g>
+    );
+  }
 }
 
-Ellipse.prototype.baseClass = 'ellipse';
-Ellipse.prototype.anchors = '0 1 1 0';
+Ellipse.prototype.baseClass = "ellipse";
+Ellipse.prototype.anchors = "0 1 1 0";
 
-Widget.alias('ellipse', Ellipse);
+Widget.alias("ellipse", Ellipse);