cx 26.3.10 → 26.4.0

package/src/svg/BoundedObject.ts

@@ -1,101 +1,101 @@
-import { Instance } from "./../ui/Instance";
-import { StyledContainerConfig, ContainerBase } from "../ui/Container";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Prop } from "../ui/Prop";
-import { IRect, Rect } from "./util/Rect";
-
-/** Typed context interface for SVG/layout-related context properties */
-export interface SvgRenderingContext extends RenderingContext {
-   parentRect?: Rect;
-   inSvg?: boolean;
-   addClipRect?: (rect: Rect) => string;
-}
-
-export interface BoundedObjectConfig extends StyledContainerConfig {
-   /**
-    * Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge.
-    * One aligns with the bottom/right edge. See Svg for more information.
-    */
-   anchors?: Prop<string | number | IRect>;
-
-   /** Move boundaries specified by the offset. See Svg for more information. */
-   offset?: Prop<string | number | IRect>;
-
-   /** Apply margin to the given boundaries. See Svg for more information. */
-   margin?: Prop<string | number | IRect>;
-
-   /** Padding to be applied to the boundaries rectangle before passing to the children. */
-   padding?: Prop<string | number | IRect>;
-}
-
-export interface BoundedObjectInstance extends Instance {
-   parentRect?: any;
-}
-
-export class BoundedObject<
-   Config extends BoundedObjectConfig = BoundedObjectConfig,
-   InstanceType extends BoundedObjectInstance = BoundedObjectInstance,
-> extends ContainerBase<Config, InstanceType> {
-   declare anchors: any;
-   declare margin: any;
-   declare offset: any;
-   declare padding: any;
-
-   declareData(...args: any[]) {
-      return super.declareData(
-         {
-            anchors: undefined,
-            offset: undefined,
-            margin: undefined,
-            padding: undefined,
-         },
-         ...args,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: InstanceType) {
-      super.prepareData(context, instance);
-      var { data } = instance;
-      data.anchors = Rect.convert(data.anchors);
-      data.offset = Rect.convert(data.offset);
-      data.margin = Rect.convertMargin(data.margin);
-      data.padding = Rect.convertMargin(data.padding);
-   }
-
-   calculateBounds(context: SvgRenderingContext, instance: InstanceType) {
-      var { data } = instance;
-      return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-   }
-
-   prepareBounds(context: SvgRenderingContext, instance: InstanceType) {
-      var { data } = instance;
-      if (
-         instance.shouldUpdate ||
-         !instance.cached.parentRect ||
-         !instance.cached.parentRect.isEqual(context.parentRect) ||
-         !data.bounds
-      ) {
-         if (!context.parentRect) throw new Error("Parent bounds were not provided through the context.");
-         instance.parentRect = context.parentRect;
-         instance.cache("parentRect", context.parentRect);
-         instance.markShouldUpdate(context);
-         data.bounds = this.calculateBounds(context, instance);
-         data.childrenBounds = Rect.add(data.bounds, data.padding);
-      }
-   }
-
-   prepare(context: SvgRenderingContext, instance: InstanceType) {
-      this.prepareBounds(context, instance);
-      context.push("parentRect", instance.data.childrenBounds);
-   }
-
-   prepareCleanup(context: SvgRenderingContext, instance: InstanceType) {
-      context.pop("parentRect");
-   }
-}
-
-BoundedObject.prototype.anchors = 0;
-BoundedObject.prototype.margin = 0;
-BoundedObject.prototype.offset = 0;
-BoundedObject.prototype.padding = 0;
-BoundedObject.prototype.styled = true;
+import { Instance } from "./../ui/Instance";
+import { StyledContainerConfig, ContainerBase } from "../ui/Container";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Prop } from "../ui/Prop";
+import { IRect, Rect } from "./util/Rect";
+
+/** Typed context interface for SVG/layout-related context properties */
+export interface SvgRenderingContext extends RenderingContext {
+   parentRect?: Rect;
+   inSvg?: boolean;
+   addClipRect?: (rect: Rect) => string;
+}
+
+export interface BoundedObjectConfig extends StyledContainerConfig {
+   /**
+    * Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge.
+    * One aligns with the bottom/right edge. See Svg for more information.
+    */
+   anchors?: Prop<string | number | IRect>;
+
+   /** Move boundaries specified by the offset. See Svg for more information. */
+   offset?: Prop<string | number | IRect>;
+
+   /** Apply margin to the given boundaries. See Svg for more information. */
+   margin?: Prop<string | number | IRect>;
+
+   /** Padding to be applied to the boundaries rectangle before passing to the children. */
+   padding?: Prop<string | number | IRect>;
+}
+
+export interface BoundedObjectInstance extends Instance {
+   parentRect?: any;
+}
+
+export class BoundedObject<
+   Config extends BoundedObjectConfig = BoundedObjectConfig,
+   InstanceType extends BoundedObjectInstance = BoundedObjectInstance,
+> extends ContainerBase<Config, InstanceType> {
+   declare anchors: any;
+   declare margin: any;
+   declare offset: any;
+   declare padding: any;
+
+   declareData(...args: any[]) {
+      return super.declareData(
+         {
+            anchors: undefined,
+            offset: undefined,
+            margin: undefined,
+            padding: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: InstanceType) {
+      super.prepareData(context, instance);
+      var { data } = instance;
+      data.anchors = Rect.convert(data.anchors);
+      data.offset = Rect.convert(data.offset);
+      data.margin = Rect.convertMargin(data.margin);
+      data.padding = Rect.convertMargin(data.padding);
+   }
+
+   calculateBounds(context: SvgRenderingContext, instance: InstanceType) {
+      var { data } = instance;
+      return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
+   }
+
+   prepareBounds(context: SvgRenderingContext, instance: InstanceType) {
+      var { data } = instance;
+      if (
+         instance.shouldUpdate ||
+         !instance.cached.parentRect ||
+         !instance.cached.parentRect.isEqual(context.parentRect) ||
+         !data.bounds
+      ) {
+         if (!context.parentRect) throw new Error("Parent bounds were not provided through the context.");
+         instance.parentRect = context.parentRect;
+         instance.cache("parentRect", context.parentRect);
+         instance.markShouldUpdate(context);
+         data.bounds = this.calculateBounds(context, instance);
+         data.childrenBounds = Rect.add(data.bounds, data.padding);
+      }
+   }
+
+   prepare(context: SvgRenderingContext, instance: InstanceType) {
+      this.prepareBounds(context, instance);
+      context.push("parentRect", instance.data.childrenBounds);
+   }
+
+   prepareCleanup(context: SvgRenderingContext, instance: InstanceType) {
+      context.pop("parentRect");
+   }
+}
+
+BoundedObject.prototype.anchors = 0;
+BoundedObject.prototype.margin = 0;
+BoundedObject.prototype.offset = 0;
+BoundedObject.prototype.padding = 0;
+BoundedObject.prototype.styled = true;

package/src/svg/ClipRect.tsx

@@ -1,29 +1,29 @@
-/** @jsxImportSource react */
-import { BoundedObject, BoundedObjectConfig } from "./BoundedObject";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-
-export interface ClipRectConfig extends BoundedObjectConfig {}
-
-export class ClipRect extends BoundedObject {
-   constructor(config?: ClipRectConfig) {
-      super(config);
-   }
-
-   prepareBounds(context: RenderingContext, instance: Instance) {
-      super.prepareBounds(context, instance);
-      const { data } = instance;
-      data.clipId = context.addClipRect(data.bounds);
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string) {
-      const { data } = instance;
-      return (
-         <g key={key} clipPath={`url(#${data.clipId})`}>
-            {this.renderChildren(context, instance)}
-         </g>
-      );
-   }
-}
-
-ClipRect.prototype.anchors = "0 1 1 0";
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig } from "./BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+
+export interface ClipRectConfig extends BoundedObjectConfig {}
+
+export class ClipRect extends BoundedObject {
+   constructor(config?: ClipRectConfig) {
+      super(config);
+   }
+
+   prepareBounds(context: RenderingContext, instance: Instance) {
+      super.prepareBounds(context, instance);
+      const { data } = instance;
+      data.clipId = context.addClipRect(data.bounds);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      const { data } = instance;
+      return (
+         <g key={key} clipPath={`url(#${data.clipId})`}>
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+ClipRect.prototype.anchors = "0 1 1 0";

package/src/svg/Ellipse.tsx

@@ -1,76 +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";
-
-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;
-
-  /** A color used to paint the box. */
-  fill?: 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;
-}
-
-export class Ellipse extends TextualBoundedObject {
-  declare baseClass: string;
-  declare colorIndex?: NumberProp;
-  declare fill?: StringProp;
-  declare stroke?: StringProp;
-
-  constructor(config?: EllipseConfig) {
-    super(config);
-  }
-
-  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";
-
-Widget.alias("ellipse", Ellipse);
+/**@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";
+
+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;
+
+  /** A color used to paint the box. */
+  fill?: 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;
+}
+
+export class Ellipse extends TextualBoundedObject {
+  declare baseClass: string;
+  declare colorIndex?: NumberProp;
+  declare fill?: StringProp;
+  declare stroke?: StringProp;
+
+  constructor(config?: EllipseConfig) {
+    super(config);
+  }
+
+  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";
+
+Widget.alias("ellipse", Ellipse);

package/src/svg/Line.tsx

@@ -1,73 +1,73 @@
-/** @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";
-
-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;
-}
-
-export class Line extends TextualBoundedObject {
-  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";
-Line.prototype.baseClass = "line";
-
-Widget.alias("line", Line);
+/** @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";
+
+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;
+}
+
+export class Line extends TextualBoundedObject {
+  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";
+Line.prototype.baseClass = "line";
+
+Widget.alias("line", Line);

package/src/svg/NonOverlappingRect.ts

@@ -1,26 +1,26 @@
-import { BoundedObject, BoundedObjectInstance, BoundedObjectConfig } from "./BoundedObject";
-import { RenderingContext } from "../ui/RenderingContext";
-
-export interface NonOverlappingRectConfig extends BoundedObjectConfig {}
-
-export interface NonOverlappingRectInstance extends BoundedObjectInstance {
-   overlapping?: boolean;
-}
-
-export class NonOverlappingRect extends BoundedObject<NonOverlappingRectConfig, NonOverlappingRectInstance> {
-   constructor(config?: NonOverlappingRectConfig) {
-      super(config);
-   }
-
-   prepare(context: RenderingContext, instance: NonOverlappingRectInstance) {
-      super.prepare(context, instance); //calculate bounds
-      if (!context.addNonOverlappingBoundingObject)
-         throw new Error("Components of type NonOverlappingRect can appear only within a NonOverlappingRectGroup.");
-      context.addNonOverlappingBoundingObject(instance);
-   }
-
-   render(context: RenderingContext, instance: NonOverlappingRectInstance, key: string) {
-      if (instance.overlapping) return null;
-      return super.render(context, instance, key);
-   }
-}
+import { BoundedObject, BoundedObjectInstance, BoundedObjectConfig } from "./BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+
+export interface NonOverlappingRectConfig extends BoundedObjectConfig {}
+
+export interface NonOverlappingRectInstance extends BoundedObjectInstance {
+   overlapping?: boolean;
+}
+
+export class NonOverlappingRect extends BoundedObject<NonOverlappingRectConfig, NonOverlappingRectInstance> {
+   constructor(config?: NonOverlappingRectConfig) {
+      super(config);
+   }
+
+   prepare(context: RenderingContext, instance: NonOverlappingRectInstance) {
+      super.prepare(context, instance); //calculate bounds
+      if (!context.addNonOverlappingBoundingObject)
+         throw new Error("Components of type NonOverlappingRect can appear only within a NonOverlappingRectGroup.");
+      context.addNonOverlappingBoundingObject(instance);
+   }
+
+   render(context: RenderingContext, instance: NonOverlappingRectInstance, key: string) {
+      if (instance.overlapping) return null;
+      return super.render(context, instance, key);
+   }
+}