cx 24.7.2 → 24.7.3

package/src/data/ArrayElementView.js

@@ -1,29 +1,37 @@
-import {AugmentedViewBase} from "./AugmentedViewBase";
-import { isArray} from "../util/isArray";
+import { AugmentedViewBase } from "./AugmentedViewBase";
+import { isArray } from "../util/isArray";
+import { Binding } from "./Binding";
 
 export class ArrayElementView extends AugmentedViewBase {
+   constructor(config) {
+      super(config);
+      this.hasNestedAliases =
+         this.recordAlias.indexOf(".") >= 0 || this.indexAlias.indexOf(".") >= 0 || this.lengthAlias.indexOf(".") >= 0;
+      this.recordBinding = Binding.get(this.recordAlias);
+      if (this.hasNestedAliases) {
+         this.indexBinding = Binding.get(this.indexAlias);
+         this.lengthAlias = Binding.get(this.lengthAlias);
+      }
+   }
 
-   isExtraKey(key) {
-      return key == this.recordAlias || key == this.indexAlias || key == this.lengthAlias;
+   getExtraKeyBinding(key) {
+      if (!key.startsWith(this.recordAlias)) return null;
+      if (key.length == this.recordAlias.length || key[this.recordAlias.length] == ".") return this.recordBinding;
+      return null;
    }
 
    deleteExtraKeyValue(key) {
-      if (key != this.recordAlias)
-         throw new Error(`Field ${key} cannot be deleted.`);
+      if (key != this.recordAlias) throw new Error(`Field ${key} cannot be deleted.`);
       const array = this.arrayAccessor.get(this.store.getData());
-      if (!array)
-         return false;
+      if (!array) return false;
       const newArray = [...array.slice(0, this.itemIndex), ...array.slice(this.itemIndex + 1)];
       return this.arrayAccessor.set(newArray, this.store);
    }
 
    setExtraKeyValue(key, value) {
-      if (key != this.recordAlias)
-         throw new Error(`Field ${key} is read-only.`);
-
+      if (key != this.recordAlias) throw new Error(`Field ${key} is read-only.`);
       const array = this.arrayAccessor.get(this.store.getData());
-      if (!array || value === array[this.itemIndex])
-         return false;
+      if (!array || value === array[this.itemIndex]) return false;
       const newArray = [...array.slice(0, this.itemIndex), value, ...array.slice(this.itemIndex + 1)];
       return this.arrayAccessor.set(newArray, this.store);
    }
@@ -31,9 +39,19 @@ export class ArrayElementView extends AugmentedViewBase {
    embedAugmentData(result, parentStoreData) {
       let array = this.arrayAccessor.get(parentStoreData);
       if (!isArray(array)) return;
-      result[this.recordAlias] = array[this.itemIndex];
-      result[this.indexAlias] = this.itemIndex;
-      result[this.lengthAlias] = array.length;
+      if (!this.hasNestedAliases) {
+         result[this.recordAlias] = array[this.itemIndex];
+         result[this.indexAlias] = this.itemIndex;
+         result[this.lengthAlias] = array.length;
+      } else {
+         let copy = result;
+         copy = this.recordBinding.set(copy, array[this.itemIndex]);
+         copy = this.indexBinding.set(copy, this.itemIndex);
+         copy = this.lengthAlias.set(copy, array.length);
+         result[this.recordBinding.parts[0]] = copy[this.recordBinding.parts[0]];
+         result[this.indexBinding.parts[0]] = copy[this.indexBinding.parts[0]];
+         result[this.lengthAlias.parts[0]] = copy[this.lengthAlias.parts[0]];
+      }
    }
 
    setIndex(itemIndex) {
@@ -41,6 +59,6 @@ export class ArrayElementView extends AugmentedViewBase {
    }
 }
 
-ArrayElementView.prototype.recordAlias = '$record';
-ArrayElementView.prototype.indexAlias = '$index';
-ArrayElementView.prototype.lengthAlias = '$length';
+ArrayElementView.prototype.recordAlias = "$record";
+ArrayElementView.prototype.indexAlias = "$index";
+ArrayElementView.prototype.lengthAlias = "$length";

package/src/data/ArrayElementView.spec.js

@@ -41,6 +41,24 @@ describe("ArrayElementView", function () {
       assert.equal(record, letters[1]);
    });
 
+   it("aliases allow nesting", function () {
+      let letters = [{ letter: "A" }, { letter: "B" }];
+      let store = new Store({ data: { letters } });
+      let elementView = new ArrayElementView({
+         store,
+         itemIndex: 1,
+         arrayAccessor: getAccessor({ bind: "letters" }),
+         recordAlias: "$iter.letter",
+         indexAlias: "$iter.index.letter",
+      });
+      let record = elementView.get("$iter.letter");
+      assert.equal(record, letters[1]);
+      assert.equal(elementView.get("$iter.index.letter"), 1);
+
+      elementView.set("$iter.letter.letter", "C");
+      assert.equal(store.get("letters.1.letter"), "C");
+   });
+
    it("when immutable preserves the parent data object", function () {
       let letters = [{ letter: "A" }, { letter: "B" }];
       let store = new Store({ data: { letters } });

package/src/data/AugmentedViewBase.js

@@ -3,8 +3,7 @@ import { Binding } from "./Binding";
 
 export class AugmentedViewBase extends View {
    getData() {
-      if (this.meta.version === this.cache.version && this.sealed)
-         return this.cache.result;
+      if (this.meta.version === this.cache.version && this.sealed) return this.cache.result;
       let parentStoreData = this.store.getData();
       let result = this.getBaseData(parentStoreData);
       this.embedAugmentData(result, parentStoreData);
@@ -27,6 +26,12 @@ export class AugmentedViewBase extends View {
       throw new Error("abstract");
    }
 
+   // Stores which need to support nested aliases should override this method
+   getExtraKeyBinding(key) {
+      let binding = Binding.get(key);
+      return this.isExtraKey(binding.parts[0]) ? Binding.get(binding.parts[0]) : null;
+   }
+
    setExtraKeyValue(key, value) {
       throw new Error("abstract");
    }
@@ -36,29 +41,32 @@ export class AugmentedViewBase extends View {
    }
 
    setItem(path, value) {
-      let binding = Binding.get(path);
-      if (this.isExtraKey(binding.parts[0])) {
-         let bindingRoot = binding.parts[0];
+      let extraKeyBinding = this.getExtraKeyBinding(path);
+      if (extraKeyBinding) {
+         let binding = Binding.get(path);
          let newValue = value;
-         if (binding.parts.length > 1) {
+         if (binding.parts.length > extraKeyBinding.parts.length) {
             let data = {};
             this.embedAugmentData(data, this.store.getData());
-            newValue = binding.set(data, value)[bindingRoot];
+            let binding = Binding.get(path);
+            data = binding.set(data, value);
+            newValue = extraKeyBinding.value(data);
          }
-         return this.setExtraKeyValue(bindingRoot, newValue);
+         return this.setExtraKeyValue(extraKeyBinding.path, newValue);
       }
       return super.setItem(path, value);
    }
 
    deleteItem(path) {
-      let binding = Binding.get(path);
-      if (this.isExtraKey(binding.parts[0])) {
-         let bindingRoot = binding.parts[0];
-         if (binding.parts.length == 1) return this.deleteExtraKeyValue(bindingRoot);
+      let extraKeyBinding = this.getExtraKeyBinding(path);
+      if (extraKeyBinding) {
+         if (path == extraKeyBinding.path) return this.deleteExtraKeyValue(extraKeyBinding.path);
          let data = {};
          this.embedAugmentData(data, this.store.getData());
-         let newValue = binding.delete(data)[bindingRoot];
-         return this.setExtraKeyValue(bindingRoot, newValue);
+         let binding = Binding.get(path);
+         data = binding.delete(data);
+         let newValue = extraKeyBinding.value(data);
+         return this.setExtraKeyValue(extraKeyBinding.path, newValue);
       }
       return super.deleteItem(path);
    }

package/src/svg/Rectangle.d.ts

@@ -2,23 +2,36 @@ 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. 
+
+   /**
+    * 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
+   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

@@ -2,12 +2,13 @@ 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
+         stroke: undefined,
+         rx: undefined,
+         ry: undefined,
       })
    }
 
@@ -25,6 +26,8 @@ export class Rectangle extends TextualBoundedObject {
                style={data.style}
                fill={data.fill}
                stroke={data.stroke}
+               rx={data.rx}
+               ry={data.ry}
          />
          {this.renderChildren(context, instance)}
       </g>;
@@ -33,5 +36,7 @@ export class Rectangle extends TextualBoundedObject {
 
 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/ui/DataProxy.spec.js

@@ -269,18 +269,20 @@ describe("DataProxy", () => {
 
    it("controllers set on the DataProxy can see calculated values", () => {
       let value;
-      let widget = Widget.create(<cx>
-         <DataProxy
-            data={{
-               $value: 5
-            }}
-            controller={{
-               onInit() {
-                  value = this.store.get("$value")
-               },
-            }}
-         />
-      </cx>);
+      let widget = Widget.create(
+         <cx>
+            <DataProxy
+               data={{
+                  $value: 5,
+               }}
+               controller={{
+                  onInit() {
+                     value = this.store.get("$value");
+                  },
+               }}
+            />
+         </cx>,
+      );
 
       let store = new Store();
 
@@ -320,16 +322,17 @@ describe("DataProxy", () => {
 
       let tree = component.toJSON();
 
-      assert.deepEqual(tree, [{
-         type: "span",
-         props: {},
-         children: ["initial"],
-      }, {
-         type: "span",
-         props: {},
-         children: null,
-      }]);
+      assert.deepEqual(tree, [
+         {
+            type: "span",
+            props: {},
+            children: ["initial"],
+         },
+         {
+            type: "span",
+            props: {},
+            children: null,
+         },
+      ]);
    });
-
-
 });