cx 26.1.0 → 26.1.2

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,69 +1,69 @@
-/**@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;
-
-   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';
-
+/**@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;
+
+   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,58 +1,58 @@
-/** @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;
-
-   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;
+
+   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);
+   }
+}

package/src/svg/NonOverlappingRectGroup.ts

@@ -1,49 +1,49 @@
-import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-import { NonOverlappingRectInstance } from "./NonOverlappingRect";
-
-export interface NonOverlappingRectGroupConfig extends PureContainerConfig {}
-
-interface NonOverlappingRectGroupInstance extends Instance {
-   nonOverlappingObjects: NonOverlappingRectInstance[];
-}
-
-export class NonOverlappingRectGroup extends PureContainerBase<NonOverlappingRectGroupConfig, NonOverlappingRectGroupInstance> {
-   constructor(config?: NonOverlappingRectGroupConfig) {
-      super(config);
-   }
-
-   prepare(context: RenderingContext, instance: NonOverlappingRectGroupInstance) {
-      instance.nonOverlappingObjects = [];
-      context.push("addNonOverlappingBoundingObject", (objectInstance: NonOverlappingRectInstance) => {
-         instance.nonOverlappingObjects.push(objectInstance);
-      });
-   }
-
-   prepareCleanup(context: RenderingContext, instance: NonOverlappingRectGroupInstance) {
-      context.pop("addNonOverlappingBoundingObject");
-      instance.nonOverlappingObjects.sort((a, b) => a.data.bounds.r - b.data.bounds.r);
-      let visibleObjects = [];
-      for (let item of instance.nonOverlappingObjects) {
-         let overlapping = false;
-         let at = visibleObjects.length - 1;
-         while (at >= 0 && visibleObjects[at].data.bounds.r > item.data.bounds.l) {
-            let r1 = visibleObjects[at].data.bounds;
-            let r2 = item.data.bounds;
-            let width = Math.min(r1.r, r2.r) - Math.max(r1.l, r2.l);
-            let height = Math.min(r1.b, r2.b) - Math.max(r1.t, r2.t);
-            if (width > 0 && height > 0) {
-               overlapping = true;
-               break;
-            }
-            at--;
-         }
-         if (item.overlapping !== overlapping) {
-            item.overlapping = overlapping;
-            item.markShouldUpdate(context);
-         }
-         if (!overlapping) visibleObjects.push(item);
-      }
-   }
-}
+import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { NonOverlappingRectInstance } from "./NonOverlappingRect";
+
+export interface NonOverlappingRectGroupConfig extends PureContainerConfig {}
+
+interface NonOverlappingRectGroupInstance extends Instance {
+   nonOverlappingObjects: NonOverlappingRectInstance[];
+}
+
+export class NonOverlappingRectGroup extends PureContainerBase<NonOverlappingRectGroupConfig, NonOverlappingRectGroupInstance> {
+   constructor(config?: NonOverlappingRectGroupConfig) {
+      super(config);
+   }
+
+   prepare(context: RenderingContext, instance: NonOverlappingRectGroupInstance) {
+      instance.nonOverlappingObjects = [];
+      context.push("addNonOverlappingBoundingObject", (objectInstance: NonOverlappingRectInstance) => {
+         instance.nonOverlappingObjects.push(objectInstance);
+      });
+   }
+
+   prepareCleanup(context: RenderingContext, instance: NonOverlappingRectGroupInstance) {
+      context.pop("addNonOverlappingBoundingObject");
+      instance.nonOverlappingObjects.sort((a, b) => a.data.bounds.r - b.data.bounds.r);
+      let visibleObjects = [];
+      for (let item of instance.nonOverlappingObjects) {
+         let overlapping = false;
+         let at = visibleObjects.length - 1;
+         while (at >= 0 && visibleObjects[at].data.bounds.r > item.data.bounds.l) {
+            let r1 = visibleObjects[at].data.bounds;
+            let r2 = item.data.bounds;
+            let width = Math.min(r1.r, r2.r) - Math.max(r1.l, r2.l);
+            let height = Math.min(r1.b, r2.b) - Math.max(r1.t, r2.t);
+            if (width > 0 && height > 0) {
+               overlapping = true;
+               break;
+            }
+            at--;
+         }
+         if (item.overlapping !== overlapping) {
+            item.overlapping = overlapping;
+            item.markShouldUpdate(context);
+         }
+         if (!overlapping) visibleObjects.push(item);
+      }
+   }
+}

package/src/svg/Rectangle.tsx

@@ -1,91 +1,91 @@
-/** @jsxImportSource react */
-import { Widget, VDOM } from '../ui/Widget';
-import { TextualBoundedObject, TextualBoundedObjectConfig } from './TextualBoundedObject';
-import { RenderingContext } from '../ui/RenderingContext';
-import { Instance } from '../ui/Instance';
-import { NumberProp, StringProp } from '../ui/Prop';
-
-export interface RectangleConfig 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 `rectangle`. */
-   baseClass?: string;
-
-   /**
-    * The horizontal corner radius of the rect. Defaults to ry if it is specified.
-    * Value type: <length>|<percentage>;
-    * If unit is not specified, it defaults to `px`.
-    */
-   rx?: StringProp | NumberProp;
-
-   /**
-    * The vertical corner radius of the rect. Defaults to rx if it is specified.
-    * Value type: <length>|<percentage>;
-    * If unit is not specified, it defaults to `px`.
-    */
-   ry?: StringProp | NumberProp;
-}
-
-export class Rectangle extends TextualBoundedObject {
-   declare baseClass: string;
-   declare colorIndex?: NumberProp;
-   declare fill?: StringProp;
-   declare stroke?: StringProp;
-   declare rx?: StringProp | NumberProp;
-   declare ry?: StringProp | NumberProp;
-
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         colorIndex: undefined,
-         fill: undefined,
-         stroke: undefined,
-         rx: undefined,
-         ry: 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}>
-            <rect
-               className={this.CSS.element(
-                  this.baseClass,
-                  'rect',
-                  colorIndex != null && 'color-' + colorIndex
-               )}
-               x={bounds.l}
-               y={bounds.t}
-               width={bounds.width()}
-               height={bounds.height()}
-               style={data.style}
-               fill={data.fill}
-               stroke={data.stroke}
-               rx={data.rx}
-               ry={data.ry}
-            />
-            {this.renderChildren(context, instance)}
-         </g>
-      );
-   }
-}
-
-Rectangle.prototype.baseClass = 'rectangle';
-Rectangle.prototype.anchors = '0 1 1 0';
-Rectangle.prototype.rx = undefined;
-Rectangle.prototype.ry = undefined;
-
+/** @jsxImportSource react */
+import { Widget, VDOM } from '../ui/Widget';
+import { TextualBoundedObject, TextualBoundedObjectConfig } from './TextualBoundedObject';
+import { RenderingContext } from '../ui/RenderingContext';
+import { Instance } from '../ui/Instance';
+import { NumberProp, StringProp } from '../ui/Prop';
+
+export interface RectangleConfig 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 `rectangle`. */
+   baseClass?: string;
+
+   /**
+    * The horizontal corner radius of the rect. Defaults to ry if it is specified.
+    * Value type: <length>|<percentage>;
+    * If unit is not specified, it defaults to `px`.
+    */
+   rx?: StringProp | NumberProp;
+
+   /**
+    * The vertical corner radius of the rect. Defaults to rx if it is specified.
+    * Value type: <length>|<percentage>;
+    * If unit is not specified, it defaults to `px`.
+    */
+   ry?: StringProp | NumberProp;
+}
+
+export class Rectangle extends TextualBoundedObject {
+   declare baseClass: string;
+   declare colorIndex?: NumberProp;
+   declare fill?: StringProp;
+   declare stroke?: StringProp;
+   declare rx?: StringProp | NumberProp;
+   declare ry?: StringProp | NumberProp;
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         colorIndex: undefined,
+         fill: undefined,
+         stroke: undefined,
+         rx: undefined,
+         ry: 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}>
+            <rect
+               className={this.CSS.element(
+                  this.baseClass,
+                  'rect',
+                  colorIndex != null && 'color-' + colorIndex
+               )}
+               x={bounds.l}
+               y={bounds.t}
+               width={bounds.width()}
+               height={bounds.height()}
+               style={data.style}
+               fill={data.fill}
+               stroke={data.stroke}
+               rx={data.rx}
+               ry={data.ry}
+            />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+Rectangle.prototype.baseClass = 'rectangle';
+Rectangle.prototype.anchors = '0 1 1 0';
+Rectangle.prototype.rx = undefined;
+Rectangle.prototype.ry = undefined;
+
 Widget.alias('rectangle', Rectangle);