cx 26.1.3 → 26.1.5

package/src/charts/Swimlane.tsx

@@ -1,195 +1,195 @@
-/** @jsxImportSource react */
-
-import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
-import { parseStyle } from "../util/parseStyle";
-import { VDOM } from "../ui/Widget";
-import { Rect } from "../svg/util/Rect";
-import { RenderingContext, CxChild } from "../ui/RenderingContext";
-import { Prop, NumberProp, StyleProp } from "../ui/Prop";
-import type { ChartRenderingContext } from "./Chart";
-
-export interface SwimlaneConfig extends BoundedObjectConfig {
-   /** The `x` value binding or expression. */
-   x?: Prop<string | number>;
-
-   /** The `y` value binding or expression. */
-   y?: Prop<string | number>;
-
-   /** Represents a swimlane size. */
-   size?: NumberProp;
-
-   /** Switch to vertical swimlanes. */
-   vertical?: boolean;
-
-   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
-   laneOffset?: NumberProp;
-
-   /** Style object applied to the swimlanes. */
-   laneStyle?: StyleProp;
-
-   /** Name of the x-axis. Default is 'x'. */
-   xAxis?: string;
-
-   /** Name of the y-axis. Default is 'y'. */
-   yAxis?: string;
-}
-
-export interface SwimlaneInstance extends BoundedObjectInstance {
-   xAxis?: any;
-   yAxis?: any;
-   bounds?: Rect;
-}
-
-export class Swimlane extends BoundedObject<SwimlaneConfig, SwimlaneInstance> {
-   declare xAxis: string;
-   declare yAxis: string;
-   declare anchors: string;
-   declare baseClass: string;
-   declare size: number;
-   declare laneOffset: number;
-   declare vertical: boolean;
-   declare laneStyle: any;
-   declare CSS: any;
-
-   constructor(config?: SwimlaneConfig) {
-      super(config);
-   }
-
-   init() {
-      this.laneStyle = parseStyle(this.laneStyle);
-      super.init();
-   }
-
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         size: undefined,
-         laneOffset: undefined,
-         laneStyle: { structured: true },
-         vertical: undefined,
-         x: undefined,
-         y: undefined,
-      });
-   }
-
-   explore(context: ChartRenderingContext, instance: SwimlaneInstance) {
-      let { data } = instance;
-      super.explore(context, instance);
-      instance.xAxis = context.axes?.[this.xAxis];
-      instance.yAxis = context.axes?.[this.yAxis];
-
-      const d = data as any;
-      if (d.vertical) {
-         instance.xAxis.acknowledge(d.x, d.size, d.laneOffset);
-      } else {
-         instance.yAxis.acknowledge(d.y, d.size, d.laneOffset);
-      }
-   }
-
-   prepare(context: RenderingContext, instance: SwimlaneInstance) {
-      super.prepare(context, instance);
-      instance.bounds = this.calculateRect(instance);
-      instance.cache("bounds", instance.bounds);
-      if (!instance.bounds.isEqual((instance.cached as any).bounds)) instance.markShouldUpdate(context);
-
-      context.push("parentRect", instance.bounds);
-   }
-
-   calculateRect(instance: SwimlaneInstance): Rect {
-      var { data } = instance;
-      const d = data as any;
-      var { size, laneOffset } = d;
-      let bounds: Rect;
-
-      if (d.vertical) {
-         var x1 = instance.xAxis.map(d.x, laneOffset - size / 2);
-         var x2 = instance.xAxis.map(d.x, laneOffset + size / 2);
-         bounds = new Rect({
-            l: Math.min(x1, x2),
-            r: Math.max(x1, x2),
-            t: d.bounds.t,
-            b: d.bounds.b,
-         });
-      } else {
-         var y1 = instance.yAxis.map(d.y, laneOffset - size / 2);
-         var y2 = instance.yAxis.map(d.y, laneOffset + size / 2);
-         bounds = new Rect({
-            l: d.bounds.l,
-            r: d.bounds.r,
-            t: Math.min(y1, y2),
-            b: Math.max(y1, y2),
-         });
-      }
-
-      return bounds;
-   }
-
-   render(context: RenderingContext, instance: SwimlaneInstance, key: string): CxChild {
-      let { data, xAxis, yAxis, bounds } = instance;
-      let { CSS, baseClass } = this;
-      const d = data as any;
-
-      let axis = this.vertical ? xAxis : yAxis;
-      if (!axis) return null;
-
-      let min: number, max: number, valueFunction: (value: any, offset: number) => [any, number];
-      if (axis.scale) {
-         min = axis.scale.min;
-         max = axis.scale.max;
-         let clamp = (value: number): [number, number] => [Math.max(min, Math.min(max, value)), 0];
-         valueFunction = (value, offset) => clamp(value + offset);
-      } else if (axis.valueList) {
-         min = 0;
-         max = axis.valueList.length;
-         valueFunction = (value, offset) => [axis.valueList[value], offset];
-      }
-      if (!(min! < max!)) return null;
-
-      let rectClass = CSS.element(baseClass, "lane");
-
-      if (this.vertical) {
-         let c1 = axis.map(...valueFunction!(d.x, -d.size / 2 + d.laneOffset));
-         let c2 = axis.map(...valueFunction!(d.x, +d.size / 2 + d.laneOffset));
-         return (
-            <g key={key} className={d.classNames}>
-               <rect
-                  key={key}
-                  x={bounds!.l}
-                  y={bounds!.t}
-                  height={bounds!.b - bounds!.t}
-                  width={Math.abs(c1 - c2)}
-                  className={rectClass}
-                  style={d.laneStyle}
-               />
-               {this.renderChildren(context, instance)};
-            </g>
-         );
-      } else {
-         let c1 = axis.map(...valueFunction!(d.y, -d.size / 2 + d.laneOffset));
-         let c2 = axis.map(...valueFunction!(d.y, +d.size / 2 + d.laneOffset));
-         return (
-            <g key={key} className={d.classNames}>
-               <rect
-                  key={key}
-                  x={bounds!.l}
-                  y={bounds!.t}
-                  width={bounds!.r - bounds!.l}
-                  height={Math.abs(c1 - c2)}
-                  className={rectClass}
-                  style={d.laneStyle}
-               />
-               {this.renderChildren(context, instance)};
-            </g>
-         );
-      }
-   }
-}
-
-Swimlane.prototype.xAxis = "x";
-Swimlane.prototype.yAxis = "y";
-Swimlane.prototype.anchors = "0 1 1 0";
-Swimlane.prototype.baseClass = "swimlane";
-Swimlane.prototype.size = 0.5;
-Swimlane.prototype.laneOffset = 0;
-Swimlane.prototype.vertical = false;
-
-BoundedObject.alias("swimlane", Swimlane);
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { parseStyle } from "../util/parseStyle";
+import { VDOM } from "../ui/Widget";
+import { Rect } from "../svg/util/Rect";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import { Prop, NumberProp, StyleProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface SwimlaneConfig extends BoundedObjectConfig {
+   /** The `x` value binding or expression. */
+   x?: Prop<string | number>;
+
+   /** The `y` value binding or expression. */
+   y?: Prop<string | number>;
+
+   /** Represents a swimlane size. */
+   size?: NumberProp;
+
+   /** Switch to vertical swimlanes. */
+   vertical?: boolean;
+
+   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+   laneOffset?: NumberProp;
+
+   /** Style object applied to the swimlanes. */
+   laneStyle?: StyleProp;
+
+   /** Name of the x-axis. Default is 'x'. */
+   xAxis?: string;
+
+   /** Name of the y-axis. Default is 'y'. */
+   yAxis?: string;
+}
+
+export interface SwimlaneInstance extends BoundedObjectInstance {
+   xAxis?: any;
+   yAxis?: any;
+   bounds?: Rect;
+}
+
+export class Swimlane extends BoundedObject<SwimlaneConfig, SwimlaneInstance> {
+   declare xAxis: string;
+   declare yAxis: string;
+   declare anchors: string;
+   declare baseClass: string;
+   declare size: number;
+   declare laneOffset: number;
+   declare vertical: boolean;
+   declare laneStyle: any;
+   declare CSS: any;
+
+   constructor(config?: SwimlaneConfig) {
+      super(config);
+   }
+
+   init() {
+      this.laneStyle = parseStyle(this.laneStyle);
+      super.init();
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         size: undefined,
+         laneOffset: undefined,
+         laneStyle: { structured: true },
+         vertical: undefined,
+         x: undefined,
+         y: undefined,
+      });
+   }
+
+   explore(context: ChartRenderingContext, instance: SwimlaneInstance) {
+      let { data } = instance;
+      super.explore(context, instance);
+      instance.xAxis = context.axes?.[this.xAxis];
+      instance.yAxis = context.axes?.[this.yAxis];
+
+      const d = data as any;
+      if (d.vertical) {
+         instance.xAxis.acknowledge(d.x, d.size, d.laneOffset);
+      } else {
+         instance.yAxis.acknowledge(d.y, d.size, d.laneOffset);
+      }
+   }
+
+   prepare(context: RenderingContext, instance: SwimlaneInstance) {
+      super.prepare(context, instance);
+      instance.bounds = this.calculateRect(instance);
+      instance.cache("bounds", instance.bounds);
+      if (!instance.bounds.isEqual((instance.cached as any).bounds)) instance.markShouldUpdate(context);
+
+      context.push("parentRect", instance.bounds);
+   }
+
+   calculateRect(instance: SwimlaneInstance): Rect {
+      var { data } = instance;
+      const d = data as any;
+      var { size, laneOffset } = d;
+      let bounds: Rect;
+
+      if (d.vertical) {
+         var x1 = instance.xAxis.map(d.x, laneOffset - size / 2);
+         var x2 = instance.xAxis.map(d.x, laneOffset + size / 2);
+         bounds = new Rect({
+            l: Math.min(x1, x2),
+            r: Math.max(x1, x2),
+            t: d.bounds.t,
+            b: d.bounds.b,
+         });
+      } else {
+         var y1 = instance.yAxis.map(d.y, laneOffset - size / 2);
+         var y2 = instance.yAxis.map(d.y, laneOffset + size / 2);
+         bounds = new Rect({
+            l: d.bounds.l,
+            r: d.bounds.r,
+            t: Math.min(y1, y2),
+            b: Math.max(y1, y2),
+         });
+      }
+
+      return bounds;
+   }
+
+   render(context: RenderingContext, instance: SwimlaneInstance, key: string): CxChild {
+      let { data, xAxis, yAxis, bounds } = instance;
+      let { CSS, baseClass } = this;
+      const d = data as any;
+
+      let axis = this.vertical ? xAxis : yAxis;
+      if (!axis) return null;
+
+      let min: number, max: number, valueFunction: (value: any, offset: number) => [any, number];
+      if (axis.scale) {
+         min = axis.scale.min;
+         max = axis.scale.max;
+         let clamp = (value: number): [number, number] => [Math.max(min, Math.min(max, value)), 0];
+         valueFunction = (value, offset) => clamp(value + offset);
+      } else if (axis.valueList) {
+         min = 0;
+         max = axis.valueList.length;
+         valueFunction = (value, offset) => [axis.valueList[value], offset];
+      }
+      if (!(min! < max!)) return null;
+
+      let rectClass = CSS.element(baseClass, "lane");
+
+      if (this.vertical) {
+         let c1 = axis.map(...valueFunction!(d.x, -d.size / 2 + d.laneOffset));
+         let c2 = axis.map(...valueFunction!(d.x, +d.size / 2 + d.laneOffset));
+         return (
+            <g key={key} className={d.classNames}>
+               <rect
+                  key={key}
+                  x={bounds!.l}
+                  y={bounds!.t}
+                  height={bounds!.b - bounds!.t}
+                  width={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={d.laneStyle}
+               />
+               {this.renderChildren(context, instance)};
+            </g>
+         );
+      } else {
+         let c1 = axis.map(...valueFunction!(d.y, -d.size / 2 + d.laneOffset));
+         let c2 = axis.map(...valueFunction!(d.y, +d.size / 2 + d.laneOffset));
+         return (
+            <g key={key} className={d.classNames}>
+               <rect
+                  key={key}
+                  x={bounds!.l}
+                  y={bounds!.t}
+                  width={bounds!.r - bounds!.l}
+                  height={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={d.laneStyle}
+               />
+               {this.renderChildren(context, instance)};
+            </g>
+         );
+      }
+   }
+}
+
+Swimlane.prototype.xAxis = "x";
+Swimlane.prototype.yAxis = "y";
+Swimlane.prototype.anchors = "0 1 1 0";
+Swimlane.prototype.baseClass = "swimlane";
+Swimlane.prototype.size = 0.5;
+Swimlane.prototype.laneOffset = 0;
+Swimlane.prototype.vertical = false;
+
+BoundedObject.alias("swimlane", Swimlane);

package/src/charts/Swimlanes.scss

@@ -1,16 +1,16 @@
-@use "sass:map";
-
-@mixin cx-swimlanes($name: "swimlanes", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-lane {
-      fill: $lane-color;
-      stroke: none;
-   }
-}
-
-@if (cx-should-include("cx/charts/Swimlanes")) {
-   @include cx-swimlanes();
-}
+@use "sass:map";
+
+@mixin cx-swimlanes($name: "swimlanes", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-lane {
+      fill: $lane-color;
+      stroke: none;
+   }
+}
+
+@if (cx-should-include("cx/charts/Swimlanes")) {
+   @include cx-swimlanes();
+}