cx 26.2.1 → 26.2.3

package/src/svg/Line.tsx

@@ -3,53 +3,68 @@ 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 {
+  TextualBoundedObject,
+  TextualBoundedObjectConfig,
+} from "./TextualBoundedObject";
 
 export interface LineConfig 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;
-
-   /** A color used to paint the outline of the box. */
-   stroke?: StringProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `line`. */
-   baseClass?: string;
+  /**
+   * 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 outline of the box. */
+  stroke?: StringProp;
+
+  /** Base CSS class to be applied to the element. Defaults to `line`. */
+  baseClass?: string;
 }
 
 export class Line extends TextualBoundedObject {
-   declare baseClass: string;
-   declare colorIndex?: NumberProp;
-   declare stroke?: StringProp;
-
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         colorIndex: undefined,
-         stroke: undefined,
-      });
-   }
-
-   render(context: RenderingContext, instance: Instance & { colorIndex: number }, key: string) {
-      const { data, colorIndex } = instance;
-      const { bounds } = data;
-      return (
-         <g key={key} className={data.classNames}>
-            <line
-               className={this.CSS.element(this.baseClass, "line", colorIndex != null && "color-" + colorIndex)}
-               x1={bounds.l}
-               y1={bounds.t}
-               x2={bounds.r}
-               y2={bounds.b}
-               style={data.style}
-               stroke={data.stroke}
-            />
-            {this.renderChildren(context, instance)}
-         </g>
-      );
-   }
+  declare baseClass: string;
+  declare colorIndex?: NumberProp;
+  declare stroke?: StringProp;
+
+  constructor(config?: LineConfig) {
+    super(config);
+  }
+
+  declareData(...args: any[]) {
+    super.declareData(...args, {
+      colorIndex: undefined,
+      stroke: undefined,
+    });
+  }
+
+  render(
+    context: RenderingContext,
+    instance: Instance & { colorIndex: number },
+    key: string,
+  ) {
+    const { data, colorIndex } = instance;
+    const { bounds } = data;
+    return (
+      <g key={key} className={data.classNames}>
+        <line
+          className={this.CSS.element(
+            this.baseClass,
+            "line",
+            colorIndex != null && "color-" + colorIndex,
+          )}
+          x1={bounds.l}
+          y1={bounds.t}
+          x2={bounds.r}
+          y2={bounds.b}
+          style={data.style}
+          stroke={data.stroke}
+        />
+        {this.renderChildren(context, instance)}
+      </g>
+    );
+  }
 }
 
 Line.prototype.anchors = "0 1 1 0";

package/src/svg/Svg.scss

@@ -1,9 +1,9 @@
 @use "sass:map";
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/besm.scss" as *;
 
-@mixin cx-svg(
-   $name: 'svg',
-   $besm: $cx-besm
-) {
+@mixin cx-svg($name: "svg", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -23,6 +23,6 @@
    }
 }
 
-@if (cx-should-include('cx/svg/Svg')) {
+@if (cx-should-include("cx/svg/Svg")) {
    @include cx-svg;
-}
+}

package/src/svg/Text.scss

@@ -0,0 +1,19 @@
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+
+@mixin cx-text($name: "text", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      fill: currentColor;
+      stroke: none;
+   }
+}
+
+@if (cx-should-include("cx/svg/Text")) {
+   @include cx-text;
+}

package/src/svg/Text.tsx

@@ -6,129 +6,185 @@ import { Instance } from "../ui/Instance";
 import { Prop, StringProp } from "../ui/Prop";
 
 export interface TextConfig extends BoundedObjectConfig {
-   /** Text to be displayed. */
-   value?: StringProp;
-
-   bind?: string;
-   tpl?: string;
-   expr?: string;
-
-   /** Offset along the x-axis. */
-   dx?: Prop<string | number>;
-
-   /**
-    * Offset along the y-axis. This property is commonly used for vertical text alignment.
-    * Set dy="0.8em" to align the text with the top and dy="0.4em" to center it vertically.
-    */
-   dy?: Prop<string | number>;
-
-   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
-   textAnchor?: StringProp;
-
-   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
-   ta?: StringProp;
-
-   /** Sets text-body color. */
-   fill?: StringProp;
-
-   /** Sets text-outline color. */
-   stroke?: StringProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `text`. */
-   baseClass?: string;
-
-   /** Set to true for the text to set the text anchor based on the direction of the parent element. See PieLabels example.  */
-   autoTextAnchor?: boolean;
+  /** Text to be displayed. */
+  value?: StringProp;
+
+  bind?: string;
+  tpl?: string;
+  expr?: string;
+
+  /** Offset along the x-axis. */
+  dx?: Prop<string | number>;
+
+  /**
+   * Offset along the y-axis. This property is commonly used for vertical text alignment.
+   * Set dy="0.8em" to align the text with the top and dy="0.4em" to center it vertically.
+   */
+  dy?: Prop<string | number>;
+
+  /** Used for horizontal text alignment. */
+  textAnchor?: Prop<"start" | "middle" | "end">;
+
+  /** Shorthand for textAnchor. */
+  ta?: Prop<"start" | "middle" | "end">;
+
+  /** Used for vertical text alignment. */
+  dominantBaseline?: Prop<
+    | "auto"
+    | "text-bottom"
+    | "alphabetic"
+    | "ideographic"
+    | "middle"
+    | "central"
+    | "mathematical"
+    | "hanging"
+    | "text-top"
+  >;
+
+  /** Shorthand for dominantBaseline. */
+  db?: Prop<
+    | "auto"
+    | "text-bottom"
+    | "alphabetic"
+    | "ideographic"
+    | "middle"
+    | "central"
+    | "mathematical"
+    | "hanging"
+    | "text-top"
+  >;
+
+  /** Sets text-body color. */
+  fill?: StringProp;
+
+  /** Sets text-outline color. */
+  stroke?: StringProp;
+
+  /** Base CSS class to be applied to the element. Defaults to `text`. */
+  baseClass?: string;
+
+  /** Set to true for the text to set the text anchor based on the direction of the parent element. See PieLabels example.  */
+  autoTextAnchor?: boolean;
 }
 
 export class Text extends BoundedObject<TextConfig> {
-   constructor(config?: TextConfig) {
-      super(config);
-   }
-
-   declare value?: StringProp;
-   declare bind?: string;
-   declare tpl?: string;
-   declare expr?: string;
-   declare dx?: Prop<string | number>;
-   declare dy?: Prop<string | number>;
-   declare textAnchor?: StringProp;
-   declare ta?: StringProp;
-   declare fill?: StringProp;
-   declare stroke?: StringProp;
-   declare autoTextAnchor?: boolean;
-
-   declareData(...args: any[]) {
-      return super.declareData(...args, {
-         value: undefined,
-         dx: undefined,
-         dy: undefined,
-         textAnchor: undefined,
-         fill: undefined,
-         stroke: undefined,
-      });
-   }
-
-   init() {
-      if (this.ta) this.textAnchor = this.ta;
-
-      if (this.bind) {
-         this.value = {
-            bind: this.bind,
-         } as any;
-      } else if (this.tpl) {
-         this.value = {
-            tpl: this.tpl,
-         } as any;
-      } else if (this.expr) {
-         this.value = {
-            expr: this.expr,
-         } as any;
-      }
-
-      super.init();
-   }
-
-   prepare(context: RenderingContext, instance: Instance) {
-      if (this.autoTextAnchor) {
-         (instance as any).textAnchor =
-            context.textDirection == "right" ? "start" : context.textDirection == "left" ? "end" : this.textAnchor;
-         let changed = instance.cache("textAnchor", (instance as any).textAnchor);
-         if (changed) (instance as any).markShouldUpdate(context);
-      }
-
-      super.prepare(context, instance);
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string) {
-      const { data } = instance;
-      const { bounds } = data;
-
-      let textAnchor = this.autoTextAnchor ? (instance as any).textAnchor : data.textAnchor;
-
-      return (
-         <text
-            key={key}
-            className={data.classNames}
-            x={this.autoTextAnchor && textAnchor == "end" ? bounds.r : bounds.l}
-            y={bounds.t}
-            dx={data.dx}
-            dy={data.dy}
-            textAnchor={textAnchor}
-            style={data.style}
-            fill={data.fill}
-            stroke={data.stroke}
-         >
-            {data.value}
-            {this.renderChildren(context, instance)}
-         </text>
-      );
-   }
+  constructor(config?: TextConfig) {
+    super(config);
+  }
+
+  declare value?: StringProp;
+  declare bind?: string;
+  declare tpl?: string;
+  declare expr?: string;
+  declare dx?: Prop<string | number>;
+  declare dy?: Prop<string | number>;
+  declare textAnchor?: Prop<"start" | "middle" | "end">;
+  declare ta?: Prop<"start" | "middle" | "end">;
+  declare dominantBaseline?: Prop<
+    | "auto"
+    | "text-bottom"
+    | "alphabetic"
+    | "ideographic"
+    | "middle"
+    | "central"
+    | "mathematical"
+    | "hanging"
+    | "text-top"
+  >;
+  declare db?: Prop<
+    | "auto"
+    | "text-bottom"
+    | "alphabetic"
+    | "ideographic"
+    | "middle"
+    | "central"
+    | "mathematical"
+    | "hanging"
+    | "text-top"
+  >;
+  declare fill?: StringProp;
+  declare stroke?: StringProp;
+  declare autoTextAnchor?: boolean;
+
+  declareData(...args: any[]) {
+    return super.declareData(...args, {
+      value: undefined,
+      dx: undefined,
+      dy: undefined,
+      textAnchor: undefined,
+      dominantBaseline: undefined,
+      fill: undefined,
+      stroke: undefined,
+    });
+  }
+
+  init() {
+    if (this.ta) this.textAnchor = this.ta;
+    if (this.db) this.dominantBaseline = this.db;
+
+    if (this.bind) {
+      this.value = {
+        bind: this.bind,
+      } as any;
+    } else if (this.tpl) {
+      this.value = {
+        tpl: this.tpl,
+      } as any;
+    } else if (this.expr) {
+      this.value = {
+        expr: this.expr,
+      } as any;
+    }
+
+    super.init();
+  }
+
+  prepare(context: RenderingContext, instance: Instance) {
+    if (this.autoTextAnchor) {
+      (instance as any).textAnchor =
+        context.textDirection == "right"
+          ? "start"
+          : context.textDirection == "left"
+            ? "end"
+            : this.textAnchor;
+      let changed = instance.cache("textAnchor", (instance as any).textAnchor);
+      if (changed) (instance as any).markShouldUpdate(context);
+    }
+
+    super.prepare(context, instance);
+  }
+
+  render(context: RenderingContext, instance: Instance, key: string) {
+    const { data } = instance;
+    const { bounds } = data;
+
+    let textAnchor = this.autoTextAnchor
+      ? (instance as any).textAnchor
+      : data.textAnchor;
+
+    return (
+      <text
+        key={key}
+        className={data.classNames}
+        x={this.autoTextAnchor && textAnchor == "end" ? bounds.r : bounds.l}
+        y={bounds.t}
+        dx={data.dx}
+        dy={data.dy}
+        textAnchor={textAnchor}
+        dominantBaseline={data.dominantBaseline}
+        style={data.style}
+        fill={data.fill}
+        stroke={data.stroke}
+      >
+        {data.value}
+        {this.renderChildren(context, instance)}
+      </text>
+    );
+  }
 }
 
 Text.prototype.anchors = "0.5 0.5 0.5 0.5";
 Text.prototype.baseClass = "text";
 Text.prototype.autoTextAnchor = false;
-(Text.prototype as any).autoAnchor = false;
 
 Widget.alias("svg.text", Text);

package/src/svg/index.scss

@@ -1,3 +1,6 @@
+@use "Svg" as *;
+@use "Text";
+
 .cxs-text-anchor-middle {
    text-anchor: middle;
 }
@@ -5,5 +8,3 @@
 .cxs-text-anchor-right {
    text-anchor: end;
 }
-
-@import "Svg";

package/src/ui/Container.spec.ts

@@ -1,5 +1,64 @@
 import assert from "assert";
 import { ContainerBase, ContainerConfig } from "./Container";
+import { Store } from "../data";
+import { Instance } from "./Instance";
+import { RenderingContext } from "./RenderingContext";
+import { HtmlElement } from "../widgets/HtmlElement";
+import { Widget } from "./Widget";
+
+function collectKeys(obj: any, path = "", result: Record<string, boolean> = {}, seen = new WeakSet()): Record<string, boolean> {
+   if (!obj || typeof obj !== "object" || seen.has(obj)) return result;
+   seen.add(obj);
+   for (const key of Object.keys(obj)) {
+      const fullPath = path ? `${path}.${key}` : key;
+      result[fullPath] = true;
+      collectKeys(obj[key], fullPath, result, seen);
+   }
+   return result;
+}
+
+describe("Container", function () {
+   it("should not mutate config during init", function () {
+      const config = {
+         type: HtmlElement,
+         tag: "div",
+         children: [
+            { type: HtmlElement, tag: "span", text: "Hello" },
+            { type: HtmlElement, tag: "span", text: "World" },
+         ],
+      };
+
+      const keysBefore = collectKeys(config);
+
+      const widget = Widget.create(config);
+      const store = new Store();
+      const context = new RenderingContext();
+      const instance = new Instance(widget, "1", null as any, store);
+      instance.init(context);
+
+      const keysAfter = collectKeys(config);
+      const newKeys = Object.keys(keysAfter).filter((k) => !keysBefore[k]);
+
+      assert.deepStrictEqual(newKeys, [], `Config was mutated. New keys: ${newKeys.join(", ")}`);
+   });
+
+   it("should not use the same children array instance as config", function () {
+      const configChildren = [
+         { type: HtmlElement, tag: "span", text: "Hello" },
+         { type: HtmlElement, tag: "span", text: "World" },
+      ];
+      const config = {
+         type: HtmlElement,
+         tag: "div",
+         children: configChildren,
+      };
+
+      const widget = Widget.create(config) as HtmlElement;
+      widget.init();
+
+      assert.notStrictEqual(widget.items, configChildren, "Widget should not use the same children array instance as config");
+   });
+});
 
 describe("ContainerConfig", function () {
    describe("reserved props cannot be introduced by subclasses", function () {

package/src/ui/Controller.spec.tsx

@@ -431,6 +431,36 @@ describe("Controller", () => {
       // let tree = component.toJSON();
       assert.deepStrictEqual(testValid, [1, 2]);
    });
+
+   it("getParentControllerByType returns typed parent controller", async () => {
+      let parentValue = 0;
+
+      class ParentController extends Controller {
+         getValue() {
+            return 42;
+         }
+      }
+
+      class ChildController extends Controller {
+         onInit() {
+            let parent = this.getParentControllerByType(ParentController);
+            parentValue = parent.getValue();
+         }
+      }
+
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div controller={ParentController}>
+               <div controller={ChildController} />
+            </div>
+         </cx>,
+      );
+
+      assert.equal(parentValue, 42);
+   });
 });
 
 describe("Controller types", () => {

package/src/ui/Controller.ts

@@ -24,6 +24,7 @@ export interface ControllerMethods {
    instance: Instance;
    widget?: Widget;
    invokeParentMethod(method: string, ...args: any[]): any;
+   getParentControllerByType<T extends Controller>(type: new (...args: any[]) => T): T;
    addTrigger<Selectors extends readonly ComputableSelector[]>(
       name: string,
       args: [...Selectors],
@@ -168,6 +169,10 @@ export class Controller<D = any> extends Component implements ControllerMethods
    invokeMethod(methodName: string, ...args: any[]): any {
       return this.instance.invokeControllerMethod(methodName, ...args);
    }
+
+   getParentControllerByType<T extends Controller>(type: new (...args: any[]) => T): T {
+      return this.instance.getControllerByType(type);
+   }
 }
 
 Controller.namespace = "ui.controller.";