cx 24.7.4 → 24.7.5

package/src/hooks/useTrigger.spec.js

@@ -1,102 +1,102 @@
-import { useTrigger } from "./useTrigger";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { Store } from "../data/Store";
-import renderer from "react-test-renderer";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { VDOM } from "../ui/VDOM";
-import { Cx } from "../ui/Cx";
-import assert from "assert";
-
-describe("useTrigger", () => {
-   it("works", () => {
-      let last = null;
-
-      const FComp = createFunctionalComponent(({ ...props }) => {
-         useTrigger(["test"], (test) => {
-            last = test;
-         });
-
-         return (
-            <cx>
-               <div />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let test = store.ref("test", 1);
-
-      const component = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(last, null); //trigger did not fire because it didn't receive true as the last argument
-
-      test.set(2);
-      component.toJSON();
-      assert.equal(last, 2);
-   });
-
-   it("fires immediately if the last argument is true", () => {
-      let last = null;
-
-      const FComp = createFunctionalComponent(({ ...props }) => {
-         useTrigger(
-            ["test"],
-            (test) => {
-               last = test;
-            },
-            true
-         );
-
-         return (
-            <cx>
-               <div />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let test = store.ref("test", 1);
-
-      const component = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(last, 1);
-
-      test.set(2);
-      component.toJSON();
-      assert.equal(last, 2);
-   });
-
-   it("accepts refs as arguments", () => {
-      let last = null;
-
-      let store = new Store();
-      let test = store.ref("test", 1);
-
-      const FComp = createFunctionalComponent(({ ...props }) => {
-         useTrigger(
-            [test],
-            (test) => {
-               last = test;
-            },
-            true
-         );
-
-         return (
-            <cx>
-               <div />
-            </cx>
-         );
-      });
-
-      const component = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(last, 1);
-
-      test.set(2);
-      component.toJSON();
-      assert.equal(last, 2);
-   });
-});
+import { useTrigger } from "./useTrigger";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { Store } from "../data/Store";
+import renderer from "react-test-renderer";
+import { HtmlElement } from "../widgets/HtmlElement";
+import { VDOM } from "../ui/VDOM";
+import { Cx } from "../ui/Cx";
+import assert from "assert";
+
+describe("useTrigger", () => {
+   it("works", () => {
+      let last = null;
+
+      const FComp = createFunctionalComponent(({ ...props }) => {
+         useTrigger(["test"], (test) => {
+            last = test;
+         });
+
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let test = store.ref("test", 1);
+
+      const component = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
+
+      component.toJSON();
+      assert.equal(last, null); //trigger did not fire because it didn't receive true as the last argument
+
+      test.set(2);
+      component.toJSON();
+      assert.equal(last, 2);
+   });
+
+   it("fires immediately if the last argument is true", () => {
+      let last = null;
+
+      const FComp = createFunctionalComponent(({ ...props }) => {
+         useTrigger(
+            ["test"],
+            (test) => {
+               last = test;
+            },
+            true
+         );
+
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let test = store.ref("test", 1);
+
+      const component = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
+
+      component.toJSON();
+      assert.equal(last, 1);
+
+      test.set(2);
+      component.toJSON();
+      assert.equal(last, 2);
+   });
+
+   it("accepts refs as arguments", () => {
+      let last = null;
+
+      let store = new Store();
+      let test = store.ref("test", 1);
+
+      const FComp = createFunctionalComponent(({ ...props }) => {
+         useTrigger(
+            [test],
+            (test) => {
+               last = test;
+            },
+            true
+         );
+
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      const component = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
+
+      component.toJSON();
+      assert.equal(last, 1);
+
+      test.set(2);
+      component.toJSON();
+      assert.equal(last, 2);
+   });
+});

package/src/index.js

@@ -1,7 +1,7 @@
-export * as util from './util/';
-export * as data from './data/';
-export * as ui from './ui/';
-export * as widgets from './widgets';
-export * as svg from './svg/';
-export * as charts from './charts/';
-export * as hooks from './hooks/';
+export * as util from './util/';
+export * as data from './data/';
+export * as ui from './ui/';
+export * as widgets from './widgets';
+export * as svg from './svg/';
+export * as charts from './charts/';
+export * as hooks from './hooks/';

package/src/index.scss

@@ -1,7 +1,7 @@
-
-@import 'global';
-@import 'util/index';
-@import 'ui/index';
-@import 'widgets/index';
-@import 'svg/index';
+
+@import 'global';
+@import 'util/index';
+@import 'ui/index';
+@import 'widgets/index';
+@import 'svg/index';
 @import 'charts/index';

package/src/svg/BoundedObject.d.ts

@@ -1,23 +1,23 @@
-import * as Cx from '../core';
-//import {PureContainer} from '../ui/PureContainer';
-import {IRect} from './util/Rect';
-
-export interface BoundedObjectProps extends Cx.StyledContainerProps {
-   
-   /**
-    * Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge. 
-    * One aligns with the bottom/right edge. See Svg for more information.
-    */
-   anchors?: Cx.Prop<string | number | IRect>,
-   
-   /** Move boundaries specified by the offset. See Svg for more information. */
-   offset?: Cx.Prop<string | number | IRect>,
-
-   /** Apply margin to the given boundaries. See Svg for more information. */
-   margin?: Cx.Prop<string | number | IRect>,
-
-   /** Padding to be applied to the boundaries rectangle before passing to the children. */
-   padding?: Cx.Prop<string | number | IRect>,
-}
-
+import * as Cx from '../core';
+//import {PureContainer} from '../ui/PureContainer';
+import {IRect} from './util/Rect';
+
+export interface BoundedObjectProps extends Cx.StyledContainerProps {
+   
+   /**
+    * Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge. 
+    * One aligns with the bottom/right edge. See Svg for more information.
+    */
+   anchors?: Cx.Prop<string | number | IRect>,
+   
+   /** Move boundaries specified by the offset. See Svg for more information. */
+   offset?: Cx.Prop<string | number | IRect>,
+
+   /** Apply margin to the given boundaries. See Svg for more information. */
+   margin?: Cx.Prop<string | number | IRect>,
+
+   /** Padding to be applied to the boundaries rectangle before passing to the children. */
+   padding?: Cx.Prop<string | number | IRect>,
+}
+
 export class BoundedObject extends Cx.Widget<BoundedObjectProps> {}

package/src/svg/BoundedObject.js

@@ -1,59 +1,59 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {PureContainer} from '../ui/PureContainer';
-import {Rect} from './util/Rect';
-
-export class BoundedObject extends PureContainer {
-
-   declareData() {
-      return super.declareData({
-         anchors: undefined,
-         offset: undefined,
-         margin: undefined,
-         padding: undefined
-      }, ...arguments)
-   }
-
-   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.isPureContainer = false;
-BoundedObject.prototype.styled = true;
-
+import {Widget, VDOM} from '../ui/Widget';
+import {PureContainer} from '../ui/PureContainer';
+import {Rect} from './util/Rect';
+
+export class BoundedObject extends PureContainer {
+
+   declareData() {
+      return super.declareData({
+         anchors: undefined,
+         offset: undefined,
+         margin: undefined,
+         padding: undefined
+      }, ...arguments)
+   }
+
+   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.isPureContainer = false;
+BoundedObject.prototype.styled = true;
+

package/src/svg/ClipRect.d.ts

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

package/src/svg/ClipRect.js

@@ -1,23 +1,23 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {BoundedObject} from './BoundedObject';
-import {Rect} from './util/Rect';
-
-export class ClipRect extends BoundedObject {
-
-   prepareBounds(context, instance) {
-      super.prepareBounds(context, instance);
-      var {data} = instance;
-      data.clipId = context.addClipRect(data.bounds);
-   }
-
-   render(context, instance, key) {
-      var {data} = instance;
-      return <g key={key} clipPath={`url(#${data.clipId})`}>
-         {this.renderChildren(context, instance)}
-      </g>
-   }
-}
-
-ClipRect.prototype.anchors = '0 1 1 0';
-
-
+import {Widget, VDOM} from '../ui/Widget';
+import {BoundedObject} from './BoundedObject';
+import {Rect} from './util/Rect';
+
+export class ClipRect extends BoundedObject {
+
+   prepareBounds(context, instance) {
+      super.prepareBounds(context, instance);
+      var {data} = instance;
+      data.clipId = context.addClipRect(data.bounds);
+   }
+
+   render(context, instance, key) {
+      var {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.d.ts

@@ -1,24 +1,24 @@
-import * as Cx from '../core';
-import {TextualBoundedObject, TextualBoundedObjectProps} from './TextualBoundedObject';
-
-interface EllipseProps 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 `ellipse`. */
-   baseClass?: string
-
-}
-
+import * as Cx from '../core';
+import {TextualBoundedObject, TextualBoundedObjectProps} from './TextualBoundedObject';
+
+interface EllipseProps 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 `ellipse`. */
+   baseClass?: string
+
+}
+
 export class Ellipse extends Cx.Widget<EllipseProps> {}

package/src/svg/Ellipse.js

@@ -1,37 +1,37 @@
-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';
-
+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 +1,21 @@
-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
-
-}
-
+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> {}