cx 26.1.3 → 26.1.5

package/src/charts/palette.scss

@@ -1,97 +1,97 @@
-//https://www.materialui.co/colors
-//normal:200 900
-//hover:100 700
-//selected: 300 900
-//disabled: 0 100
-@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,
-   $palette-fill-hover-whiten: $cx-default-palette-fill-hover-whiten,
-   $palette-fill-selected-whiten: $cx-default-palette-fill-selected-whiten,
-   $palette-fill-disabled-whiten: $cx-default-palette-fill-disabled-whiten,
-   $palette-fill-blacken: $cx-default-palette-fill-blacken,
-   $palette-fill-hover-blacken: $cx-default-palette-fill-hover-blacken,
-   $palette-fill-selected-blacken: $cx-default-palette-fill-selected-blacken,
-   $palette-fill-disabled-blacken: $cx-default-palette-fill-disabled-blacken,
-   $palette-stroke-whiten: $cx-default-palette-stroke-whiten,
-   $palette-stroke-blacken: $cx-default-palette-stroke-blacken,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   @for $i from 1 through list.length($palette-colors) {
-      $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: $fill;
-         stroke: $stroke;
-         background: $fill;
-         border-color: $stroke;
-
-         &.#{$state}selectable:hover,
-         &.#{$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: $fill;
-            stroke: $stroke;
-            background: $fill;
-            border-color: $stroke;
-         }
-
-         &.#{$state}selected,
-         &.#{$state}selected:hover,
-         &.#{$state}selected.#{$state}hover,
-         .#{$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: $fill;
-            stroke: $stroke;
-            background: $fill;
-            border-color: $stroke;
-         }
-
-         &.#{$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: $fill;
-            stroke: $stroke;
-            background: $fill;
-            border-color: $stroke;
-         }
-      }
-   }
-}
-
-@if (cx-should-include("cx/charts/palette")) {
-   @include cx-palette();
-}
+//https://www.materialui.co/colors
+//normal:200 900
+//hover:100 700
+//selected: 300 900
+//disabled: 0 100
+@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,
+   $palette-fill-hover-whiten: $cx-default-palette-fill-hover-whiten,
+   $palette-fill-selected-whiten: $cx-default-palette-fill-selected-whiten,
+   $palette-fill-disabled-whiten: $cx-default-palette-fill-disabled-whiten,
+   $palette-fill-blacken: $cx-default-palette-fill-blacken,
+   $palette-fill-hover-blacken: $cx-default-palette-fill-hover-blacken,
+   $palette-fill-selected-blacken: $cx-default-palette-fill-selected-blacken,
+   $palette-fill-disabled-blacken: $cx-default-palette-fill-disabled-blacken,
+   $palette-stroke-whiten: $cx-default-palette-stroke-whiten,
+   $palette-stroke-blacken: $cx-default-palette-stroke-blacken,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   @for $i from 1 through list.length($palette-colors) {
+      $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: $fill;
+         stroke: $stroke;
+         background: $fill;
+         border-color: $stroke;
+
+         &.#{$state}selectable:hover,
+         &.#{$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: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+
+         &.#{$state}selected,
+         &.#{$state}selected:hover,
+         &.#{$state}selected.#{$state}hover,
+         .#{$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: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+
+         &.#{$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: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/palette")) {
+   @include cx-palette();
+}

package/src/charts/shapes.tsx

@@ -1,86 +1,86 @@
-/** @jsxImportSource react */
-
-import { VDOM } from "../ui/Widget";
-import { debug } from "../util/Debug";
-import { Config } from "../ui/Prop";
-
-export type ShapeRender = (
-   cx: number,
-   cy: number,
-   size: number,
-   props?: Config,
-   options?: Config
-) => React.ReactElement;
-
-var shapes: { [key: string]: ShapeRender } = {};
-var warnings: { [key: string]: boolean } = {};
-
-export function registerShape(name: string, callback: ShapeRender): void {
-   shapes[name] = callback;
-}
-
-export function getShape(shapeName: string): ShapeRender {
-   if (shapes[shapeName]) return shapes[shapeName];
-
-   if (!warnings[shapeName]) {
-      warnings[shapeName] = true;
-      debug(`Unknown shape '${shapeName}'. Using square instead.`);
-   }
-
-   return shapes["square"];
-}
-
-export function getAvailableShapes(): string[] {
-   return Object.keys(shapes);
-}
-
-export function circle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   return <circle {...props} cx={cx} cy={cy} r={size / 2} />;
-}
-registerShape("circle", circle);
-
-export function square(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 0.9;
-   return <rect {...props} x={cx - size / 2} y={cy - size / 2} width={size} height={size} />;
-}
-registerShape("square", square);
-registerShape("rect", square);
-
-export function bar(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 0.9;
-   return <rect {...props} x={cx - size / 2} y={cy - size / 4} width={size} height={size / 2} />;
-}
-registerShape("bar", bar);
-
-export function column(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 0.9;
-   return <rect {...props} x={cx - size / 4} y={cy - size / 2} width={size / 2} height={size} />;
-}
-registerShape("column", column);
-
-export function line(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 0.9;
-   return <line {...props} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} />;
-}
-registerShape("line", line);
-registerShape("hline", line);
-
-export function vline(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 0.9;
-   return <line {...props} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} />;
-}
-registerShape("vline", vline);
-
-export function triangle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 1.29;
-   var d = "";
-   var cos = Math.cos(Math.PI / 6);
-   var sin = Math.sin(Math.PI / 6);
-   d += `M ${cx} ${cy - size / 2} `;
-   d += `L ${cx + (cos * size) / 2} ${cy + (sin * size) / 2} `;
-   d += `L ${cx - (cos * size) / 2} ${cy + (sin * size) / 2} `;
-   d += `Z`;
-   return <path {...props} d={d} />;
-}
-
-registerShape("triangle", triangle);
+/** @jsxImportSource react */
+
+import { VDOM } from "../ui/Widget";
+import { debug } from "../util/Debug";
+import { Config } from "../ui/Prop";
+
+export type ShapeRender = (
+   cx: number,
+   cy: number,
+   size: number,
+   props?: Config,
+   options?: Config
+) => React.ReactElement;
+
+var shapes: { [key: string]: ShapeRender } = {};
+var warnings: { [key: string]: boolean } = {};
+
+export function registerShape(name: string, callback: ShapeRender): void {
+   shapes[name] = callback;
+}
+
+export function getShape(shapeName: string): ShapeRender {
+   if (shapes[shapeName]) return shapes[shapeName];
+
+   if (!warnings[shapeName]) {
+      warnings[shapeName] = true;
+      debug(`Unknown shape '${shapeName}'. Using square instead.`);
+   }
+
+   return shapes["square"];
+}
+
+export function getAvailableShapes(): string[] {
+   return Object.keys(shapes);
+}
+
+export function circle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   return <circle {...props} cx={cx} cy={cy} r={size / 2} />;
+}
+registerShape("circle", circle);
+
+export function square(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 2} y={cy - size / 2} width={size} height={size} />;
+}
+registerShape("square", square);
+registerShape("rect", square);
+
+export function bar(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 2} y={cy - size / 4} width={size} height={size / 2} />;
+}
+registerShape("bar", bar);
+
+export function column(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 4} y={cy - size / 2} width={size / 2} height={size} />;
+}
+registerShape("column", column);
+
+export function line(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <line {...props} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} />;
+}
+registerShape("line", line);
+registerShape("hline", line);
+
+export function vline(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <line {...props} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} />;
+}
+registerShape("vline", vline);
+
+export function triangle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 1.29;
+   var d = "";
+   var cos = Math.cos(Math.PI / 6);
+   var sin = Math.sin(Math.PI / 6);
+   d += `M ${cx} ${cy - size / 2} `;
+   d += `L ${cx + (cos * size) / 2} ${cy + (sin * size) / 2} `;
+   d += `L ${cx - (cos * size) / 2} ${cy + (sin * size) / 2} `;
+   d += `Z`;
+   return <path {...props} d={d} />;
+}
+
+registerShape("triangle", triangle);

package/src/charts/variables.scss

@@ -1,22 +1,22 @@
-@use "sass:map";
-@import "axis/variables";
-
-$cx-default-swimlanes-lane-background-color: #f1f1f1;
-$cx-default-range-marker-color: #696969;
-
-$cx-dependencies: map.merge(
-   $cx-dependencies,
-   (
-      "cx/charts/Bar": "cx/charts/palette",
-      "cx/charts/BarGraph": "cx/charts/palette",
-      "cx/charts/Column": "cx/charts/palette",
-      "cx/charts/ColumnGraph": "cx/charts/palette",
-      "cx/charts/LineGraph": "cx/charts/palette",
-      "cx/charts/ColorMap": "cx/charts/palette",
-      "cx/charts/ScatterGraph": "cx/charts/palette",
-      "cx/charts/BubbleGraph": "cx/charts/palette",
-      "cx/charts/MarkerLine": "cx/charts/palette",
-      "cx/charts/Marker": "cx/charts/palette",
-      "cx/charts/PieChart": "cx/charts/palette",
-   )
-);
+@use "sass:map";
+@import "axis/variables";
+
+$cx-default-swimlanes-lane-background-color: #f1f1f1;
+$cx-default-range-marker-color: #696969;
+
+$cx-dependencies: map.merge(
+   $cx-dependencies,
+   (
+      "cx/charts/Bar": "cx/charts/palette",
+      "cx/charts/BarGraph": "cx/charts/palette",
+      "cx/charts/Column": "cx/charts/palette",
+      "cx/charts/ColumnGraph": "cx/charts/palette",
+      "cx/charts/LineGraph": "cx/charts/palette",
+      "cx/charts/ColorMap": "cx/charts/palette",
+      "cx/charts/ScatterGraph": "cx/charts/palette",
+      "cx/charts/BubbleGraph": "cx/charts/palette",
+      "cx/charts/MarkerLine": "cx/charts/palette",
+      "cx/charts/Marker": "cx/charts/palette",
+      "cx/charts/PieChart": "cx/charts/palette",
+   )
+);