cx 25.11.1 → 26.0.1

package/src/svg/Ellipse.js

@@ -1,37 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {TextualBoundedObject} from './TextualBoundedObject';
-
-export class Ellipse extends TextualBoundedObject {
-
-   declareData() {
-      super.declareData(...arguments, {
-         colorIndex: undefined,
-         fill: undefined,
-         stroke: undefined
-      })
-   }
-
-   render(context, instance, key) {
-      var {data} = instance;
-      var {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.d.ts

@@ -1,21 +0,0 @@
-import * as Cx from '../core';
-import {TextualBoundedObject, TextualBoundedObjectProps} from './TextualBoundedObject';
-
-interface LineProps extends TextualBoundedObjectProps {
-   
-   /** 
-    * 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?: Cx.NumberProp,
-   
-   /** A color used to paint the outline of the box. */
-   stroke?: Cx.StringProp,
-
-   /** Base CSS class to be applied to the element. Defaults to `line`. */
-   baseClass?: string
-
-}
-
-export class Line extends Cx.Widget<LineProps> {}

package/src/svg/Line.js

@@ -1,33 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {TextualBoundedObject} from './TextualBoundedObject';
-
-export class Line extends TextualBoundedObject {
-
-   declareData() {
-      super.declareData(...arguments, {
-         colorIndex: undefined,
-         stroke: undefined
-      })
-   }
-
-   render(context, instance, key) {
-      var {data, colorIndex} = instance;
-      var {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.d.ts

@@ -1,5 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "./BoundedObject";
-
-// no new props defined in NonOverlappingRect, so inheriting BoundedObject directly
-export class NonOverlappingRect extends BoundedObject {}

package/src/svg/NonOverlappingRect.js

@@ -1,15 +0,0 @@
-import { BoundedObject } from "./BoundedObject";
-
-export class NonOverlappingRect extends BoundedObject {
-   prepare(context, instance) {
-      super.prepare(context, instance); //calculate bounds
-      if (!context.addNonOverlappingBoundingObject)
-         throw new Error("Components of type NonOverlappingRect can appaear only within a NonOverlappingRectGroup.");
-      context.addNonOverlappingBoundingObject(instance);
-   }
-
-   render(context, instance, key) {
-      if (instance.overlapping) return null;
-      return super.render(context, instance, key);
-   }
-}

package/src/svg/NonOverlappingRectGroup.d.ts

@@ -1,3 +0,0 @@
-import { PureContainer } from "./../ui/PureContainer";
-
-export class NonOverlappingRectGroup extends PureContainer {}

package/src/svg/NonOverlappingRectGroup.js

@@ -1,37 +0,0 @@
-import { PureContainer } from "../ui/PureContainer";
-
-export class NonOverlappingRectGroup extends PureContainer {
-   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/src/svg/Rectangle.d.ts

@@ -1,37 +0,0 @@
-import * as Cx from '../core';
-import {TextualBoundedObject, TextualBoundedObjectProps} from './TextualBoundedObject';
-
-interface RectangleProps extends TextualBoundedObjectProps {
-
-   /**
-    * 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?: Cx.NumberProp,
-
-   /** A color used to paint the box. */
-   fill?: Cx.StringProp,
-
-   /** A color used to paint the outline of the box. */
-   stroke?: Cx.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?: Cx.StringProp | Cx.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?: Cx.StringProp | Cx.NumberProp;
-}
-
-export class Rectangle extends Cx.Widget<RectangleProps> {}

package/src/svg/Rectangle.js

@@ -1,42 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {TextualBoundedObject} from './TextualBoundedObject';
-
-export class Rectangle extends TextualBoundedObject {
-   declareData() {
-      super.declareData(...arguments, {
-         colorIndex: undefined,
-         fill: undefined,
-         stroke: undefined,
-         rx: undefined,
-         ry: undefined,
-      })
-   }
-
-   render(context, instance, key) {
-      var {data} = instance;
-      var {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);

package/src/svg/Svg.d.ts

@@ -1,32 +0,0 @@
-import { Instance } from "./../ui/Instance.d";
-import * as Cx from "../core";
-import { BoundedObjectProps } from "./BoundedObject";
-
-interface SvgProps extends BoundedObjectProps {
-   /** 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: Instance);
-   onMouseUp?(e: MouseEvent, instance: Instance);
-   onMouseMove?(e: MouseEvent, instance: Instance);
-   onTouchStart?(e: TouchEvent, instance: Instance);
-   onTouchMove?(e: TouchEvent, instance: Instance);
-   onTouchEnd?(e: TouchEvent, instance: Instance);
-   onWheel?(e: WheelEvent, instance: Instance);
-   onWheelActive?(e: WheelEvent, instance: Instance);
-}
-
-// no new props defined in ClipRect, so inheriting BoundedObject directly
-export class Svg extends Cx.Widget<SvgProps> {}

package/src/svg/Svg.js

@@ -1,177 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { BoundedObject } from "./BoundedObject";
-import { Rect } from "./util/Rect";
-import { ResizeManager } from "../ui/ResizeManager";
-import { addEventListenerWithOptions } from "../util/addEventListenerWithOptions";
-
-export class Svg extends BoundedObject {
-   initState(context, instance) {
-      var 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) {
-      var 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) => {
-         var 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 (
-         <SvgComponent
-            key={key}
-            instance={instance}
-            data={instance.data}
-            options={context.options}
-            size={instance.state.size}
-            eventHandlers={eventHandlers}
-         >
-            {this.renderChildren(context, instance)}
-         </SvgComponent>
-      );
-   }
-}
-
-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 {
-   render() {
-      var { instance, data, size, children, eventHandlers } = this.props;
-      var { widget } = instance;
-
-      var defs = [];
-      for (var k in instance.clipRects) {
-         let cr = instance.clipRects[k];
-         defs.push(
-            <clipPath key={k} id={k}>
-               <rect x={cr.l} y={cr.t} width={Math.max(0, cr.width())} height={Math.max(0, cr.height())} />
-            </clipPath>
-         );
-      }
-
-      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 (
-         <div
-            ref={(el) => {
-               this.el = el;
-            }}
-            className={data.classNames}
-            style={style}
-            {...eventHandlers}
-         >
-            {size.width > 0 && size.height > 0 && (
-               <svg>
-                  <defs>{defs}</defs>
-                  {children}
-               </svg>
-            )}
-         </div>
-      );
-   }
-
-   onResize() {
-      let { instance } = this.props;
-      let { widget } = this.props.instance;
-
-      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() {
-      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) => {
-               let { 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/src/svg/Text.d.ts

@@ -1,40 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "./BoundedObject";
-
-interface TextProps extends BoundedObjectProps {
-   /** Text to be displayed. */
-   value?: Cx.StringProp;
-
-   bind?: string;
-   tpl?: string;
-   expr?: string;
-
-   /** Offset along the x-axis. */
-   dx?: Cx.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?: Cx.Prop<string | number>;
-
-   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
-   textAnchor?: Cx.StringProp;
-
-   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
-   ta?: Cx.StringProp;
-
-   /** Sets text-body color. */
-   fill?: Cx.StringProp;
-
-   /** Sets text-outline color. */
-   stroke?: Cx.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 Cx.Widget<TextProps> {}

package/src/svg/Text.js

@@ -1,78 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { BoundedObject } from "./BoundedObject";
-
-export class Text extends BoundedObject {
-   declareData() {
-      return super.declareData(...arguments, {
-         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) {
-      var { data } = instance;
-      var { bounds } = data;
-
-      let textAnchor = this.autoTextAnchor ? instance.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.autoAnchor = false;
-
-Widget.alias("svg.text", Text);

package/src/svg/TextualBoundedObject.d.ts

@@ -1,7 +0,0 @@
-import * as Cx from '../core';
-import {BoundedObject, BoundedObjectProps} from './BoundedObject';
-
-// no new props, but exporting for easier inheritance
-export interface TextualBoundedObjectProps extends BoundedObjectProps {}
-
-export class TextualBoundedObject extends BoundedObject {}

package/src/svg/TextualBoundedObject.js

@@ -1,28 +0,0 @@
-import {BoundedObject} from './BoundedObject';
-import {Text} from './Text';
-import {innerTextTrim} from '../util/innerTextTrim';
-
-export class TextualBoundedObject extends BoundedObject {
-   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'
-      });
-   }
-}
-
-
-
-
-

package/src/svg/index.d.ts

@@ -1,11 +0,0 @@
-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.d.ts

@@ -1,41 +0,0 @@
-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;
-
-   l: number;
-   r: number;
-   t: number;
-   b: number;
-
-   constructor(config?: { t?: number, r?: number, b?: number, l?: number });
-
-   width() : number;
-
-   height() : number;
-
-   valid() : boolean;
-
-   makeValid() : Rect;
-
-   isEqual(r: Rect) : boolean;
-
-   static add(a: Rect, b: Rect) : Rect;
-
-   static multiply(a: Rect, b: Rect) : Rect;
-
-   static margin(r: Rect, m?: RectMargin) : Rect;
-
-   static convertMargin(m?: RectMargin) : Rect;
-
-   static convert(r?: RectMargin | number) : Rect;
-
-}