cx 26.0.1 → 26.0.3

package/build/svg/BoundedObject.js

@@ -0,0 +1,51 @@
+import { ContainerBase } from "../ui/Container";
+import { Rect } from "./util/Rect";
+export class BoundedObject extends ContainerBase {
+    declareData(...args) {
+        return super.declareData({
+            anchors: undefined,
+            offset: undefined,
+            margin: undefined,
+            padding: undefined,
+        }, ...args);
+    }
+    prepareData(context, instance) {
+        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, instance) {
+        var { data } = instance;
+        return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
+    }
+    prepareBounds(context, instance) {
+        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, instance) {
+        this.prepareBounds(context, instance);
+        context.push("parentRect", instance.data.childrenBounds);
+    }
+    prepareCleanup(context, instance) {
+        context.pop("parentRect");
+    }
+}
+BoundedObject.prototype.anchors = 0;
+BoundedObject.prototype.margin = 0;
+BoundedObject.prototype.offset = 0;
+BoundedObject.prototype.padding = 0;
+BoundedObject.prototype.styled = true;

package/build/svg/ClipRect.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig } from "./BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+export interface ClipRectConfig extends BoundedObjectConfig {
+}
+export declare class ClipRect extends BoundedObject {
+    constructor(config?: ClipRectConfig);
+    prepareBounds(context: RenderingContext, instance: Instance): void;
+    render(context: RenderingContext, instance: Instance, key: string): import("react/jsx-runtime").JSX.Element;
+}

package/build/svg/ClipRect.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { BoundedObject } from "./BoundedObject";
+export class ClipRect extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    prepareBounds(context, instance) {
+        super.prepareBounds(context, instance);
+        const { data } = instance;
+        data.clipId = context.addClipRect(data.bounds);
+    }
+    render(context, instance, key) {
+        const { data } = instance;
+        return (_jsx("g", { clipPath: `url(#${data.clipId})`, children: this.renderChildren(context, instance) }, key));
+    }
+}
+ClipRect.prototype.anchors = "0 1 1 0";

package/build/svg/Ellipse.d.ts

@@ -0,0 +1,27 @@
+/**@jsxImportSource react */
+import { Instance } from '../ui/Instance';
+import { RenderingContext } from '../ui/RenderingContext';
+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 declare class Ellipse extends TextualBoundedObject {
+    baseClass: string;
+    colorIndex?: NumberProp;
+    fill?: StringProp;
+    stroke?: StringProp;
+    declareData(...args: any[]): void;
+    render(context: RenderingContext, instance: Instance, key: string): false | import("react/jsx-runtime").JSX.Element;
+}

package/build/svg/Ellipse.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Widget } from '../ui/Widget';
+import { TextualBoundedObject } from './TextualBoundedObject';
+export class Ellipse extends TextualBoundedObject {
+    declareData(...args) {
+        super.declareData(...args, {
+            colorIndex: undefined,
+            fill: undefined,
+            stroke: undefined,
+        });
+    }
+    render(context, instance, key) {
+        const { data } = instance;
+        const { bounds, colorIndex } = data;
+        if (!bounds.valid())
+            return false;
+        return (_jsxs("g", { className: data.classNames, children: [_jsx("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)] }, key));
+    }
+}
+Ellipse.prototype.baseClass = 'ellipse';
+Ellipse.prototype.anchors = '0 1 1 0';
+Widget.alias('ellipse', Ellipse);

package/build/svg/Line.d.ts

@@ -0,0 +1,26 @@
+/** @jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+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 declare class Line extends TextualBoundedObject {
+    baseClass: string;
+    colorIndex?: NumberProp;
+    stroke?: StringProp;
+    declareData(...args: any[]): void;
+    render(context: RenderingContext, instance: Instance & {
+        colorIndex: number;
+    }, key: string): import("react/jsx-runtime").JSX.Element;
+}

package/build/svg/Line.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Widget } from "../ui/Widget";
+import { TextualBoundedObject } from "./TextualBoundedObject";
+export class Line extends TextualBoundedObject {
+    declareData(...args) {
+        super.declareData(...args, {
+            colorIndex: undefined,
+            stroke: undefined,
+        });
+    }
+    render(context, instance, key) {
+        const { data, colorIndex } = instance;
+        const { bounds } = data;
+        return (_jsxs("g", { className: data.classNames, children: [_jsx("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)] }, key));
+    }
+}
+Line.prototype.anchors = "0 1 1 0";
+Line.prototype.baseClass = "line";
+Widget.alias("line", Line);

package/build/svg/NonOverlappingRect.d.ts

@@ -0,0 +1,12 @@
+import { BoundedObject, BoundedObjectInstance, BoundedObjectConfig } from "./BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+export interface NonOverlappingRectConfig extends BoundedObjectConfig {
+}
+export interface NonOverlappingRectInstance extends BoundedObjectInstance {
+    overlapping?: boolean;
+}
+export declare class NonOverlappingRect extends BoundedObject<NonOverlappingRectConfig, NonOverlappingRectInstance> {
+    constructor(config?: NonOverlappingRectConfig);
+    prepare(context: RenderingContext, instance: NonOverlappingRectInstance): void;
+    render(context: RenderingContext, instance: NonOverlappingRectInstance, key: string): any;
+}

package/build/svg/NonOverlappingRect.js

@@ -0,0 +1,17 @@
+import { BoundedObject } from "./BoundedObject";
+export class NonOverlappingRect extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    prepare(context, instance) {
+        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, instance, key) {
+        if (instance.overlapping)
+            return null;
+        return super.render(context, instance, key);
+    }
+}

package/build/svg/NonOverlappingRectGroup.d.ts

@@ -0,0 +1,15 @@
+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 declare class NonOverlappingRectGroup extends PureContainerBase<NonOverlappingRectGroupConfig, NonOverlappingRectGroupInstance> {
+    constructor(config?: NonOverlappingRectGroupConfig);
+    prepare(context: RenderingContext, instance: NonOverlappingRectGroupInstance): void;
+    prepareCleanup(context: RenderingContext, instance: NonOverlappingRectGroupInstance): void;
+}
+export {};

package/build/svg/NonOverlappingRectGroup.js

@@ -0,0 +1,38 @@
+import { PureContainerBase } from "../ui/PureContainer";
+export class NonOverlappingRectGroup extends PureContainerBase {
+    constructor(config) {
+        super(config);
+    }
+    prepare(context, instance) {
+        instance.nonOverlappingObjects = [];
+        context.push("addNonOverlappingBoundingObject", (objectInstance) => {
+            instance.nonOverlappingObjects.push(objectInstance);
+        });
+    }
+    prepareCleanup(context, instance) {
+        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/build/svg/Rectangle.d.ts

@@ -0,0 +1,40 @@
+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 declare class Rectangle extends TextualBoundedObject {
+    baseClass: string;
+    colorIndex?: NumberProp;
+    fill?: StringProp;
+    stroke?: StringProp;
+    rx?: StringProp | NumberProp;
+    ry?: StringProp | NumberProp;
+    declareData(...args: any[]): void;
+    render(context: RenderingContext, instance: Instance, key: string): false | import("react/jsx-runtime").JSX.Element;
+}

package/build/svg/Rectangle.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget } from '../ui/Widget';
+import { TextualBoundedObject } from './TextualBoundedObject';
+export class Rectangle extends TextualBoundedObject {
+    declareData(...args) {
+        super.declareData(...args, {
+            colorIndex: undefined,
+            fill: undefined,
+            stroke: undefined,
+            rx: undefined,
+            ry: undefined,
+        });
+    }
+    render(context, instance, key) {
+        const { data } = instance;
+        const { bounds, colorIndex } = data;
+        if (!bounds.valid())
+            return false;
+        return (_jsxs("g", { className: data.classNames, children: [_jsx("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)] }, key));
+    }
+}
+Rectangle.prototype.baseClass = 'rectangle';
+Rectangle.prototype.anchors = '0 1 1 0';
+Rectangle.prototype.rx = undefined;
+Rectangle.prototype.ry = undefined;
+Widget.alias('rectangle', Rectangle);

package/build/svg/Svg.d.ts

@@ -0,0 +1,49 @@
+/** @jsxImportSource react */
+import { RenderingContext } from "../ui/RenderingContext";
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance, SvgRenderingContext } from "./BoundedObject";
+import { Rect } from "./util/Rect";
+interface SvgInstance extends BoundedObjectInstance {
+    state: {
+        size: {
+            width: number;
+            height: number;
+        };
+    };
+    clipRects?: Record<string, Rect>;
+    clipRectId?: number;
+}
+export interface SvgConfig extends BoundedObjectConfig {
+    /** Set to `true` to automatically calculate width based on the measured height and `aspectRatio`. */
+    autoWidth?: boolean;
+    /** Set to `true` to automatically calculate height based on the measured width and `aspectRatio`. */
+    autoHeight?: boolean;
+    /**
+     * Aspect ratio of the the SVG element. Default value is `1.618`.
+     * This value doesn't have any effect unless `autoWidth` or `autoHeight` is set.
+     */
+    aspectRatio?: number;
+    /** Base CSS class to be applied to the element. Defaults to `svg`. */
+    baseClass?: string;
+    onMouseDown?(e: MouseEvent, instance: SvgInstance): void;
+    onMouseUp?(e: MouseEvent, instance: SvgInstance): void;
+    onMouseMove?(e: MouseEvent, instance: SvgInstance): void;
+    onTouchStart?(e: TouchEvent, instance: SvgInstance): void;
+    onTouchMove?(e: TouchEvent, instance: SvgInstance): void;
+    onTouchEnd?(e: TouchEvent, instance: SvgInstance): void;
+    onWheel?(e: WheelEvent, instance: SvgInstance): void;
+    onWheelActive?(e: WheelEvent, instance: SvgInstance): void;
+}
+export declare class Svg extends BoundedObject<SvgConfig, SvgInstance> {
+    autoWidth?: boolean;
+    autoHeight?: boolean;
+    aspectRatio?: number;
+    onWheelActive?: (e: WheelEvent, instance: SvgInstance) => void;
+    constructor(config?: SvgConfig);
+    initState(context: RenderingContext, instance: SvgInstance): void;
+    explore(context: SvgRenderingContext, instance: SvgInstance): void;
+    exploreCleanup(context: SvgRenderingContext, instance: SvgInstance): void;
+    prepare(context: SvgRenderingContext, instance: SvgInstance): void;
+    prepareCleanup(context: SvgRenderingContext, instance: SvgInstance): void;
+    render(context: RenderingContext, instance: SvgInstance, key: string): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/build/svg/Svg.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResizeManager } from "../ui/ResizeManager";
+import { VDOM, Widget } from "../ui/Widget";
+import { addEventListenerWithOptions } from "../util/addEventListenerWithOptions";
+import { BoundedObject } from "./BoundedObject";
+import { Rect } from "./util/Rect";
+export class Svg extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    initState(context, instance) {
+        const size = {
+            width: 0,
+            height: 0,
+        };
+        instance.state = { size };
+    }
+    explore(context, instance) {
+        context.push("inSvg", true);
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        context.pop("inSvg");
+    }
+    prepare(context, instance) {
+        const size = instance.state.size;
+        context.parentRect = new Rect({
+            l: 0,
+            t: 0,
+            r: size.width,
+            b: size.height,
+        });
+        instance.clipRects = {};
+        instance.clipRectId = 0;
+        context.push("addClipRect", (rect) => {
+            const id = `clip-${instance.id}-${++instance.clipRectId}`;
+            instance.clipRects[id] = rect;
+            return id;
+        });
+        context.push("inSvg", true);
+        super.prepare(context, instance);
+    }
+    prepareCleanup(context, instance) {
+        super.prepareCleanup(context, instance);
+        context.pop("addClipRect");
+        context.pop("inSvg");
+    }
+    render(context, instance, key) {
+        let eventHandlers = instance.getJsxEventProps();
+        if (eventHandlers) {
+            delete eventHandlers["onWheelActive"];
+        }
+        return (_jsx(SvgComponent, { instance: instance, data: instance.data, options: context.options, size: instance.state.size, eventHandlers: eventHandlers, children: this.renderChildren(context, instance) }, key));
+    }
+}
+Svg.prototype.anchors = "0 1 1 0";
+Svg.prototype.baseClass = "svg";
+Svg.prototype.autoWidth = false;
+Svg.prototype.autoHeight = false;
+Svg.prototype.aspectRatio = 1.618;
+function sameSize(a, b) {
+    if (!a || !b)
+        return false;
+    return a.width == b.width && a.height == b.height;
+}
+class SvgComponent extends VDOM.Component {
+    el;
+    offResize;
+    offWheelActive;
+    render() {
+        const { instance, data, size, children, eventHandlers } = this.props;
+        const { widget } = instance;
+        const defs = [];
+        for (const k in instance.clipRects) {
+            let cr = instance.clipRects[k];
+            defs.push(_jsx("clipPath", { id: k, children: _jsx("rect", { x: cr.l, y: cr.t, width: Math.max(0, cr.width()), height: Math.max(0, cr.height()) }) }, k));
+        }
+        let style = data.style;
+        if (widget.autoHeight)
+            style = {
+                ...style,
+                height: `${size.height}px`,
+            };
+        if (widget.autoWidth)
+            style = {
+                ...style,
+                width: `${size.width}px`,
+            };
+        //parent div is needed because clientWidth doesn't work on the svg element in FF
+        return (_jsx("div", { ref: (el) => {
+                this.el = el;
+            }, className: data.classNames, style: style, ...eventHandlers, children: size.width > 0 && size.height > 0 && (_jsxs("svg", { children: [_jsx("defs", { children: defs }), children] })) }));
+    }
+    onResize() {
+        const { instance } = this.props;
+        const { widget } = this.props.instance;
+        if (!this.el)
+            return;
+        let size = {
+            width: this.el.clientWidth,
+            height: this.el.clientHeight,
+        };
+        if (widget.autoHeight)
+            size.height = size.width / widget.aspectRatio;
+        if (widget.autoWidth)
+            size.width = size.height * widget.aspectRatio;
+        if (!sameSize(instance.state.size, size))
+            instance.setState({
+                size: size,
+            });
+    }
+    componentDidMount() {
+        if (!this.el)
+            return;
+        this.offResize = ResizeManager.trackElement(this.el, this.onResize.bind(this));
+        this.onResize();
+        if (this.props.instance.widget.onWheelActive) {
+            this.offWheelActive = addEventListenerWithOptions(this.el, "wheel", (event) => {
+                const { instance } = this.props;
+                instance.invoke("onWheelActive", event, instance);
+            }, { passive: false });
+        }
+    }
+    componentDidUpdate() {
+        this.onResize();
+    }
+    componentWillUnmount() {
+        this.offResize && this.offResize();
+        this.offWheelActive && this.offWheelActive();
+    }
+}
+Widget.alias("svg", Svg);

package/build/svg/Text.d.ts

@@ -0,0 +1,48 @@
+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 declare class Text extends BoundedObject<TextConfig> {
+    constructor(config?: TextConfig);
+    value?: StringProp;
+    bind?: string;
+    tpl?: string;
+    expr?: string;
+    dx?: Prop<string | number>;
+    dy?: Prop<string | number>;
+    textAnchor?: StringProp;
+    ta?: StringProp;
+    fill?: StringProp;
+    stroke?: StringProp;
+    autoTextAnchor?: boolean;
+    declareData(...args: any[]): void;
+    init(): void;
+    prepare(context: RenderingContext, instance: Instance): void;
+    render(context: RenderingContext, instance: Instance, key: string): import("react/jsx-runtime").JSX.Element;
+}

package/build/svg/Text.js

@@ -0,0 +1,60 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget } from "../ui/Widget";
+import { BoundedObject } from "./BoundedObject";
+export class Text extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        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,
+            };
+        }
+        else if (this.tpl) {
+            this.value = {
+                tpl: this.tpl,
+            };
+        }
+        else if (this.expr) {
+            this.value = {
+                expr: this.expr,
+            };
+        }
+        super.init();
+    }
+    prepare(context, instance) {
+        if (this.autoTextAnchor) {
+            instance.textAnchor =
+                context.textDirection == "right" ? "start" : context.textDirection == "left" ? "end" : this.textAnchor;
+            let changed = instance.cache("textAnchor", instance.textAnchor);
+            if (changed)
+                instance.markShouldUpdate(context);
+        }
+        super.prepare(context, instance);
+    }
+    render(context, instance, key) {
+        const { data } = instance;
+        const { bounds } = data;
+        let textAnchor = this.autoTextAnchor ? instance.textAnchor : data.textAnchor;
+        return (_jsxs("text", { 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, children: [data.value, this.renderChildren(context, instance)] }, key));
+    }
+}
+Text.prototype.anchors = "0.5 0.5 0.5 0.5";
+Text.prototype.baseClass = "text";
+Text.prototype.autoTextAnchor = false;
+Text.prototype.autoAnchor = false;
+Widget.alias("svg.text", Text);

package/build/svg/TextualBoundedObject.d.ts

@@ -0,0 +1,7 @@
+import { BoundedObject, BoundedObjectConfig } from './BoundedObject';
+export interface TextualBoundedObjectConfig extends BoundedObjectConfig {
+}
+export declare class TextualBoundedObject extends BoundedObject {
+    constructor(config?: TextualBoundedObjectConfig);
+    add(widget: any): any;
+}

package/build/svg/TextualBoundedObject.js

@@ -0,0 +1,22 @@
+import { BoundedObject } from './BoundedObject';
+import { Text } from './Text';
+import { innerTextTrim } from '../util/innerTextTrim';
+export class TextualBoundedObject extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    add(widget) {
+        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'
+        });
+    }
+}