cx 26.1.3 → 26.1.5

package/src/svg/Text.tsx

@@ -1,134 +1,134 @@
-/** @jsxImportSource react */
-import { Widget, VDOM } from "../ui/Widget";
-import { BoundedObject, BoundedObjectConfig } from "./BoundedObject";
-import { RenderingContext } from "../ui/RenderingContext";
-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;
-}
-
-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>
-      );
-   }
-}
-
-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);
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../ui/Widget";
+import { BoundedObject, BoundedObjectConfig } from "./BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+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;
+}
+
+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>
+      );
+   }
+}
+
+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/TextualBoundedObject.ts

@@ -1,35 +1,35 @@
-import {BoundedObject, BoundedObjectConfig} from './BoundedObject';
-import {Text} from './Text';
-import {innerTextTrim} from '../util/innerTextTrim';
-
-// no new props, but exporting for easier inheritance
-export interface TextualBoundedObjectConfig extends BoundedObjectConfig {}
-
-export class TextualBoundedObject extends BoundedObject {
-   constructor(config?: TextualBoundedObjectConfig) {
-      super(config);
-   }
-
-   add(widget: any): any {
-      if (typeof widget != 'string')
-         return super.add(...arguments);
-
-      if (this.trimWhitespace)
-         widget = innerTextTrim(widget);
-
-      if (!widget)
-         return;
-
-      return this.add({
-         type: Text,
-         value: widget,
-         textAnchor: 'middle',
-         dy: '0.4em'
-      });
-   }
-}
-
-
-
-
-
+import {BoundedObject, BoundedObjectConfig} from './BoundedObject';
+import {Text} from './Text';
+import {innerTextTrim} from '../util/innerTextTrim';
+
+// no new props, but exporting for easier inheritance
+export interface TextualBoundedObjectConfig extends BoundedObjectConfig {}
+
+export class TextualBoundedObject extends BoundedObject {
+   constructor(config?: TextualBoundedObjectConfig) {
+      super(config);
+   }
+
+   add(widget: any): any {
+      if (typeof widget != 'string')
+         return super.add(...arguments);
+
+      if (this.trimWhitespace)
+         widget = innerTextTrim(widget);
+
+      if (!widget)
+         return;
+
+      return this.add({
+         type: Text,
+         value: widget,
+         textAnchor: 'middle',
+         dy: '0.4em'
+      });
+   }
+}
+
+
+
+
+

package/src/svg/index.scss

@@ -1,9 +1,9 @@
-.cxs-text-anchor-middle {
-   text-anchor: middle;
-}
-
-.cxs-text-anchor-right {
-   text-anchor: end;
-}
-
+.cxs-text-anchor-middle {
+   text-anchor: middle;
+}
+
+.cxs-text-anchor-right {
+   text-anchor: end;
+}
+
 @import "Svg";

package/src/svg/index.ts

@@ -1,17 +1,17 @@
-export * from './util/index';
-
-export * from './BoundedObject';
-export * from './TextualBoundedObject';
-
-export * from './Svg';
-export * from './Rectangle';
-export * from './ClipRect';
-export * from './Ellipse';
-export * from './Line';
-export * from './Text';
-export * from './NonOverlappingRect';
-export * from './NonOverlappingRectGroup';
-
-
-
-
+export * from './util/index';
+
+export * from './BoundedObject';
+export * from './TextualBoundedObject';
+
+export * from './Svg';
+export * from './Rectangle';
+export * from './ClipRect';
+export * from './Ellipse';
+export * from './Line';
+export * from './Text';
+export * from './NonOverlappingRect';
+export * from './NonOverlappingRectGroup';
+
+
+
+

package/src/svg/util/Rect.ts

@@ -1,105 +1,105 @@
-import { isNumber } from "../../util/isNumber";
-import { isArray } from "../../util/isArray";
-
-type RectMargin = string | Rect | Array<string | number>;
-
-export interface IRect {
-   l: number;
-   r: number;
-   t: number;
-   b: number;
-}
-
-export class Rect implements IRect {
-   isRect: boolean = true;
-   l: number = 0; //left;
-   r: number = 0; //right
-   t: number = 0; //top
-   b: number = 0; //bottom
-
-   constructor(config?: { t?: number; r?: number; b?: number; l?: number }) {
-      Object.assign(this, config);
-   }
-
-   width(): number {
-      return this.r - this.l;
-   }
-
-   height(): number {
-      return this.b - this.t;
-   }
-
-   valid(): boolean {
-      return this.r > this.l && this.b > this.t;
-   }
-
-   makeValid(): Rect {
-      return new Rect({
-         l: Math.min(this.l, this.r),
-         r: Math.max(this.l, this.r),
-         t: Math.min(this.t, this.b),
-         b: Math.max(this.t, this.b),
-      });
-   }
-
-   isEqual(r?: Rect): boolean {
-      if (!r || !r.isRect) return false;
-
-      return r.l == this.l && r.r == this.r && r.t == this.t && r.b == this.b;
-   }
-
-   static add(a: Rect, b: Rect): Rect {
-      return new Rect({
-         l: a.l + b.l,
-         t: a.t + b.t,
-         r: a.r + b.r,
-         b: a.b + b.b,
-      });
-   }
-
-   static multiply(a: Rect, b: Rect): Rect {
-      return new Rect({
-         l: a.l + (a.r - a.l) * b.l,
-         r: a.l + (a.r - a.l) * b.r,
-         t: a.t + (a.b - a.t) * b.t,
-         b: a.t + (a.b - a.t) * b.b,
-      });
-   }
-
-   static margin(r: Rect, m?: RectMargin): Rect {
-      var mr = Rect.convertMargin(m);
-      return Rect.add(r, mr);
-   }
-
-   static convertMargin(m?: RectMargin): Rect {
-      if (!m) return new Rect();
-
-      if ((m as any).isRect) return m as Rect;
-
-      if (isNumber(m)) return new Rect({ l: m as number, t: m as number, r: -(m as number), b: -(m as number) });
-
-      var mr = Rect.convert(m);
-      mr.b = -mr.b;
-      mr.r = -mr.r;
-      return mr;
-   }
-
-   static convert(r?: RectMargin | number): Rect {
-      if (!r) return new Rect({ l: 0, r: 0, t: 0, b: 0 });
-
-      if ((r as any).isRect) return r as Rect;
-
-      if (typeof r === "string") r = r.split(" ");
-
-      if (isArray(r)) {
-         return new Rect({
-            t: parseFloat(r[0] as any),
-            r: parseFloat(r[1] as any),
-            b: parseFloat(r[2] as any),
-            l: parseFloat(r[3] as any),
-         });
-      }
-
-      return new Rect(r as any);
-   }
-}
+import { isNumber } from "../../util/isNumber";
+import { isArray } from "../../util/isArray";
+
+type RectMargin = string | Rect | Array<string | number>;
+
+export interface IRect {
+   l: number;
+   r: number;
+   t: number;
+   b: number;
+}
+
+export class Rect implements IRect {
+   isRect: boolean = true;
+   l: number = 0; //left;
+   r: number = 0; //right
+   t: number = 0; //top
+   b: number = 0; //bottom
+
+   constructor(config?: { t?: number; r?: number; b?: number; l?: number }) {
+      Object.assign(this, config);
+   }
+
+   width(): number {
+      return this.r - this.l;
+   }
+
+   height(): number {
+      return this.b - this.t;
+   }
+
+   valid(): boolean {
+      return this.r > this.l && this.b > this.t;
+   }
+
+   makeValid(): Rect {
+      return new Rect({
+         l: Math.min(this.l, this.r),
+         r: Math.max(this.l, this.r),
+         t: Math.min(this.t, this.b),
+         b: Math.max(this.t, this.b),
+      });
+   }
+
+   isEqual(r?: Rect): boolean {
+      if (!r || !r.isRect) return false;
+
+      return r.l == this.l && r.r == this.r && r.t == this.t && r.b == this.b;
+   }
+
+   static add(a: Rect, b: Rect): Rect {
+      return new Rect({
+         l: a.l + b.l,
+         t: a.t + b.t,
+         r: a.r + b.r,
+         b: a.b + b.b,
+      });
+   }
+
+   static multiply(a: Rect, b: Rect): Rect {
+      return new Rect({
+         l: a.l + (a.r - a.l) * b.l,
+         r: a.l + (a.r - a.l) * b.r,
+         t: a.t + (a.b - a.t) * b.t,
+         b: a.t + (a.b - a.t) * b.b,
+      });
+   }
+
+   static margin(r: Rect, m?: RectMargin): Rect {
+      var mr = Rect.convertMargin(m);
+      return Rect.add(r, mr);
+   }
+
+   static convertMargin(m?: RectMargin): Rect {
+      if (!m) return new Rect();
+
+      if ((m as any).isRect) return m as Rect;
+
+      if (isNumber(m)) return new Rect({ l: m as number, t: m as number, r: -(m as number), b: -(m as number) });
+
+      var mr = Rect.convert(m);
+      mr.b = -mr.b;
+      mr.r = -mr.r;
+      return mr;
+   }
+
+   static convert(r?: RectMargin | number): Rect {
+      if (!r) return new Rect({ l: 0, r: 0, t: 0, b: 0 });
+
+      if ((r as any).isRect) return r as Rect;
+
+      if (typeof r === "string") r = r.split(" ");
+
+      if (isArray(r)) {
+         return new Rect({
+            t: parseFloat(r[0] as any),
+            r: parseFloat(r[1] as any),
+            b: parseFloat(r[2] as any),
+            l: parseFloat(r[3] as any),
+         });
+      }
+
+      return new Rect(r as any);
+   }
+}