cx 24.4.7 → 24.4.9

package/src/svg/Svg.js

@@ -1,177 +1,177 @@
-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);
+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/Svg.scss

@@ -1,27 +1,27 @@
-
-@mixin cx-svg(
-   $name: 'svg',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
-
-   .#{$block}#{$name} {
-      box-sizing: border-box;
-      overflow: hidden;
-      position: relative;
-      height: 150px; //default height
-
-      & > svg {
-         width: 100%;
-         height: 100%;
-         position: absolute;
-      }
-   }
-}
-
-@if (cx-should-include('cx/svg/Svg')) {
-   @include cx-svg;
+
+@mixin cx-svg(
+   $name: 'svg',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+   $mod: map-get($besm, mod);
+
+   .#{$block}#{$name} {
+      box-sizing: border-box;
+      overflow: hidden;
+      position: relative;
+      height: 150px; //default height
+
+      & > svg {
+         width: 100%;
+         height: 100%;
+         position: absolute;
+      }
+   }
+}
+
+@if (cx-should-include('cx/svg/Svg')) {
+   @include cx-svg;
 }

package/src/svg/Text.d.ts

@@ -1,40 +1,40 @@
-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> {}
+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 +1,78 @@
-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);
+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 +1,7 @@
-import * as Cx from '../core';
-import {BoundedObject, BoundedObjectProps} from './BoundedObject';
-
-// no new props, but exporting for easier inheritance
-export interface TextualBoundedObjectProps extends BoundedObjectProps {}
-
+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 {}