cx 24.7.1 → 24.7.3

package/dist/svg.js

@@ -523,6 +523,8 @@ var Rectangle = /*#__PURE__*/ (function (_TextualBoundedObject) {
 					colorIndex: undefined,
 					fill: undefined,
 					stroke: undefined,
+					rx: undefined,
+					ry: undefined,
 				},
 			]),
 		);
@@ -546,6 +548,8 @@ var Rectangle = /*#__PURE__*/ (function (_TextualBoundedObject) {
 						style: data.style,
 						fill: data.fill,
 						stroke: data.stroke,
+						rx: data.rx,
+						ry: data.ry,
 					}),
 					this.renderChildren(context, instance),
 				],
@@ -557,6 +561,8 @@ var Rectangle = /*#__PURE__*/ (function (_TextualBoundedObject) {
 })(TextualBoundedObject);
 Rectangle.prototype.baseClass = "rectangle";
 Rectangle.prototype.anchors = "0 1 1 0";
+Rectangle.prototype.rx = undefined;
+Rectangle.prototype.ry = undefined;
 Widget.alias("rectangle", Rectangle);
 
 var ClipRect = /*#__PURE__*/ (function (_BoundedObject) {

package/dist/ui.js

@@ -3958,15 +3958,15 @@ function startAppLoop(parentDOMElement, storeOrInstance, widget, options) {
 	return function () {
 		if (stopped) return;
 		stopped = true;
-		if (!options.destroyDelay) destroy(parentDOMElement, options);
+		if (!options.destroyDelay) destroy(parentDOMElement, options, root);
 		else {
 			setTimeout(function () {
-				destroy(parentDOMElement, options);
+				destroy(parentDOMElement, options, root);
 			}, options.destroyDelay);
 		}
 	};
 }
-function destroy(parentDOMElement, options) {
+function destroy(parentDOMElement, options, root) {
 	if (root) root.unmount();
 	else VDOM.DOM.unmountComponentAtNode(parentDOMElement);
 	if (options.removeParentDOMElement && parentDOMElement.parentNode)

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.7.1",
+   "version": "24.7.3",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/charts/Legend.js

@@ -1,151 +1,151 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { PureContainer } from "../ui/PureContainer";
-import { getShape } from "./shapes";
-import { isUndefined } from "../util/isUndefined";
-import { isArray } from "../util/isArray";
-import { withHoverSync } from "../ui/HoverSync";
-
-export class Legend extends HtmlElement {
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = Object.assign(data.stateMods || {}, {
-         vertical: this.vertical,
-      });
-      super.prepareData(context, instance);
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         shape: undefined,
-      });
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "shapeSize":
-         case "svgSize":
-         case "shape":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   explore(context, instance) {
-      if (!context.legends) context.legends = {};
-
-      instance.legends = context.legends;
-
-      context.addLegendEntry = (legendName, entry) => {
-         if (!legendName) return;
-
-         //case when all legends are scoped and new entry is added outside the scope
-         if (!context.legends) return;
-
-         let legend = context.legends[legendName];
-         if (!legend)
-            legend = context.legends[legendName] = {
-               entries: [],
-               names: {},
-            };
-
-         if (!legend.names[entry.name]) {
-            legend.entries.push(entry);
-            legend.names[entry.name] = entry;
-         }
-      };
-
-      super.explore(context, instance);
-   }
-
-   renderChildren(context, instance) {
-      const CSS = this.CSS;
-
-      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
-         list;
-
-      if (isArray(entries) && entries.length > 0) {
-         list = (
-            <div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
-               {entries.map((e, i) =>
-                  withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
-                     <div
-                        key={i}
-                        className={CSS.element(this.baseClass, "entry", {
-                           "color-root": true,
-                           hover,
-                           disabled: e.disabled,
-                           selected: e.selected,
-                        })}
-                        onClick={e.onClick}
-                        onMouseMove={onMouseMove}
-                        onMouseLeave={onMouseLeave}
-                     >
-                        {this.renderShape(e, instance.data.shape)}
-                        {e.name}
-                     </div>
-                  )),
-               )}
-            </div>
-         );
-      }
-
-      return [list, super.renderChildren(context, instance)];
-   }
-
-   renderShape(entry, legendEntriesShape) {
-      const className = this.CSS.element(this.baseClass, "shape", {
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      const shape = getShape(legendEntriesShape || entry.shape || "square");
-
-      return (
-         <svg
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-               marginTop: `${-this.svgSize / 2}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
-               style: entry.style,
-               className: className,
-            })}
-         </svg>
-      );
-   }
-}
-
-Legend.prototype.name = "legend";
-Legend.prototype.baseClass = "legend";
-Legend.prototype.vertical = false;
-Legend.prototype.memoize = false;
-Legend.prototype.shapeSize = 18;
-Legend.prototype.shape = null;
-Legend.prototype.svgSize = 20;
-
-Widget.alias("legend", Legend);
-
-Legend.Scope = class extends PureContainer {
-   explore(context, instance) {
-      context.push("legends", (instance.legends = {}));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("legends");
-   }
-
-   prepare(context, instance) {
-      context.push("legends", instance.legends);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("legends");
-   }
-};
-
-export const LegendScope = Legend.Scope;
+import { Widget, VDOM } from "../ui/Widget";
+import { HtmlElement } from "../widgets/HtmlElement";
+import { PureContainer } from "../ui/PureContainer";
+import { getShape } from "./shapes";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+import { withHoverSync } from "../ui/HoverSync";
+
+export class Legend extends HtmlElement {
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = Object.assign(data.stateMods || {}, {
+         vertical: this.vertical,
+      });
+      super.prepareData(context, instance);
+   }
+
+   declareData() {
+      super.declareData(...arguments, {
+         shape: undefined,
+      });
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "shapeSize":
+         case "svgSize":
+         case "shape":
+            return false;
+
+         default:
+            return super.isValidHtmlAttribute(attrName);
+      }
+   }
+
+   explore(context, instance) {
+      if (!context.legends) context.legends = {};
+
+      instance.legends = context.legends;
+
+      context.addLegendEntry = (legendName, entry) => {
+         if (!legendName) return;
+
+         //case when all legends are scoped and new entry is added outside the scope
+         if (!context.legends) return;
+
+         let legend = context.legends[legendName];
+         if (!legend)
+            legend = context.legends[legendName] = {
+               entries: [],
+               names: {},
+            };
+
+         if (!legend.names[entry.name]) {
+            legend.entries.push(entry);
+            legend.names[entry.name] = entry;
+         }
+      };
+
+      super.explore(context, instance);
+   }
+
+   renderChildren(context, instance) {
+      const CSS = this.CSS;
+
+      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
+         list;
+
+      if (isArray(entries) && entries.length > 0) {
+         list = (
+            <div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
+               {entries.map((e, i) =>
+                  withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
+                     <div
+                        key={i}
+                        className={CSS.element(this.baseClass, "entry", {
+                           "color-root": true,
+                           hover,
+                           disabled: e.disabled,
+                           selected: e.selected,
+                        })}
+                        onClick={e.onClick}
+                        onMouseMove={onMouseMove}
+                        onMouseLeave={onMouseLeave}
+                     >
+                        {this.renderShape(e, instance.data.shape)}
+                        {e.name}
+                     </div>
+                  )),
+               )}
+            </div>
+         );
+      }
+
+      return [list, super.renderChildren(context, instance)];
+   }
+
+   renderShape(entry, legendEntriesShape) {
+      const className = this.CSS.element(this.baseClass, "shape", {
+         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+      });
+      const shape = getShape(legendEntriesShape || entry.shape || "square");
+
+      return (
+         <svg
+            className={this.CSS.element(this.baseClass, "svg")}
+            style={{
+               width: `${this.svgSize}px`,
+               height: `${this.svgSize}px`,
+               marginTop: `${-this.svgSize / 2}px`,
+            }}
+         >
+            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
+               style: entry.style,
+               className: className,
+            })}
+         </svg>
+      );
+   }
+}
+
+Legend.prototype.name = "legend";
+Legend.prototype.baseClass = "legend";
+Legend.prototype.vertical = false;
+Legend.prototype.memoize = false;
+Legend.prototype.shapeSize = 18;
+Legend.prototype.shape = null;
+Legend.prototype.svgSize = 20;
+
+Widget.alias("legend", Legend);
+
+Legend.Scope = class extends PureContainer {
+   explore(context, instance) {
+      context.push("legends", (instance.legends = {}));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context, instance) {
+      context.pop("legends");
+   }
+
+   prepare(context, instance) {
+      context.push("legends", instance.legends);
+   }
+
+   prepareCleanup(context, instance) {
+      context.pop("legends");
+   }
+};
+
+export const LegendScope = Legend.Scope;

package/src/charts/LegendEntry.d.ts

@@ -1,7 +1,7 @@
 import * as Cx from '../core';
 
 interface LegendEntryProps extends Cx.HtmlElementProps {
-   
+
    /** Indicate that entry is selected. */
    selected?: Cx.BooleanProp,
 
@@ -28,11 +28,25 @@ interface LegendEntryProps extends Cx.HtmlElementProps {
 
    /** Base CSS class to be applied to the element. No class is applied by default. */
    baseClass?: string,
-   
+
    legendAction?: string,
 
    /** Size of the svg shape container in pixels. Default value is 20. */
-   svgSize?: number
+   svgSize?: number;
+
+   /**
+    * Applies to rectangular shapes. The horizontal corner radius of the rect. Defaults to ry if ry is specified.
+    * Value type: <length>|<percentage>;
+    * If unit is not specified, it defaults to `px`.
+    */
+   rx?: Cx.StringProp | Cx.NumberProp;
+
+   /**
+    * Applies to rectangular shapes. The vertical corner radius of the rect. Defaults to rx if rx is specified.
+    * Value type: <length>|<percentage>;
+    * If unit is not specified, it defaults to `px`.
+    */
+   ry?: Cx.StringProp | Cx.NumberProp;
 }
 
 export class LegendEntry extends Cx.Widget<LegendEntryProps> {}

package/src/charts/LegendEntry.js

@@ -23,6 +23,8 @@ export class LegendEntry extends HtmlElement {
          name: undefined,
          active: true,
          size: undefined,
+         rx: undefined,
+         ry: undefined
       });
    }
 
@@ -102,6 +104,8 @@ export class LegendEntry extends HtmlElement {
             {shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
                style: entry.style,
                className: className,
+               rx: entry.rx,
+               ry: entry.ry
             })}
          </svg>
       );

package/src/charts/Marker.d.ts

@@ -91,6 +91,20 @@ interface MarkerProps extends BoundedObjectProps {
 
    /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
    stack?: Cx.StringProp;
+
+   /**
+    * Applies to rectangular shapes. The horizontal corner radius of the rect. Defaults to ry if ry is specified.
+    * Value type: <length>|<percentage>;
+    * If unit is not specified, it defaults to `px`.
+    */
+   rx?: Cx.StringProp | Cx.NumberProp;
+
+   /**
+    * Applies to rectangular shapes. The vertical corner radius of the rect. Defaults to rx if rx is specified.
+    * Value type: <length>|<percentage>;
+    * If unit is not specified, it defaults to `px`.
+    */
+   ry?: Cx.StringProp | Cx.NumberProp;
 }
 
 export class Marker extends Cx.Widget<MarkerProps> {}

package/src/charts/Marker.js

@@ -49,6 +49,8 @@ export class Marker extends BoundedObject {
          stack: undefined,
          stackedX: undefined,
          stackedY: undefined,
+         rx: undefined,
+         ry: undefined
       });
    }
 
@@ -272,6 +274,12 @@ class MarkerComponent extends VDOM.Component {
             widget.handleClick(e, instance);
          },
       };
+
+      if (shape == "rect" || shape == "square" || shape == "bar" || shape == "column") {
+         shapeProps.rx = data.rx;
+         shapeProps.ry = data.ry;
+      }
+
       if (widget.tooltip) {
          shapeProps.ref = (c) => {
             this.el = c;

package/src/charts/PieLabel.js

@@ -1,71 +1,71 @@
-import { VDOM } from "../ui/Widget";
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-import { parseStyle } from "../util/parseStyle";
-
-export class PieLabel extends BoundedObject {
-   init() {
-      this.lineStyle = parseStyle(this.lineStyle);
-      super.init();
-   }
-
-   declareData(...args) {
-      super.declareData(...args, {
-         distance: undefined,
-         lineStyle: { structured: true },
-         lineStroke: undefined,
-         lineClass: { structured: true },
-         lineColorIndex: undefined,
-      });
-   }
-
-   calculateBounds(context, instance) {
-      var { data } = instance;
-      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-      instance.originalBounds = bounds;
-      instance.actualBounds = context.placePieLabel(bounds, data.distance);
-      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      if (!context.registerPieLabel)
-         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
-      let right = instance.parentRect.r > instance.parentRect.l;
-      context.push("textDirection", right ? "right" : "left");
-      context.registerPieLabel(instance);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("textDirection");
-   }
-
-   render(context, instance, key) {
-      let { originalBounds, actualBounds, data } = instance;
-
-      return (
-         <g key={key} className={data.classNames}>
-            <line
-               className={this.CSS.element(
-                  this.baseClass,
-                  "line",
-                  data.lineColorIndex != null && "color-" + data.lineColorIndex
-               )}
-               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
-               y1={(actualBounds.t + actualBounds.b) / 2}
-               x2={(originalBounds.l + originalBounds.r) / 2}
-               y2={(originalBounds.t + originalBounds.b) / 2}
-               stroke={data.lineStroke}
-               style={data.lineStyle}
-            />
-            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
-               {this.renderChildren(context, instance)}
-            </g>
-         </g>
-      );
-   }
-}
-
-PieLabel.prototype.distance = 100;
-PieLabel.prototype.baseClass = "pielabel";
-PieLabel.prototype.styled = true;
+import { VDOM } from "../ui/Widget";
+import { BoundedObject } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { parseStyle } from "../util/parseStyle";
+
+export class PieLabel extends BoundedObject {
+   init() {
+      this.lineStyle = parseStyle(this.lineStyle);
+      super.init();
+   }
+
+   declareData(...args) {
+      super.declareData(...args, {
+         distance: undefined,
+         lineStyle: { structured: true },
+         lineStroke: undefined,
+         lineClass: { structured: true },
+         lineColorIndex: undefined,
+      });
+   }
+
+   calculateBounds(context, instance) {
+      var { data } = instance;
+      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
+      instance.originalBounds = bounds;
+      instance.actualBounds = context.placePieLabel(bounds, data.distance);
+      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
+   }
+
+   prepare(context, instance) {
+      super.prepare(context, instance);
+      if (!context.registerPieLabel)
+         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
+      let right = instance.parentRect.r > instance.parentRect.l;
+      context.push("textDirection", right ? "right" : "left");
+      context.registerPieLabel(instance);
+   }
+
+   prepareCleanup(context, instance) {
+      context.pop("textDirection");
+   }
+
+   render(context, instance, key) {
+      let { originalBounds, actualBounds, data } = instance;
+
+      return (
+         <g key={key} className={data.classNames}>
+            <line
+               className={this.CSS.element(
+                  this.baseClass,
+                  "line",
+                  data.lineColorIndex != null && "color-" + data.lineColorIndex
+               )}
+               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
+               y1={(actualBounds.t + actualBounds.b) / 2}
+               x2={(originalBounds.l + originalBounds.r) / 2}
+               y2={(originalBounds.t + originalBounds.b) / 2}
+               stroke={data.lineStroke}
+               style={data.lineStyle}
+            />
+            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
+               {this.renderChildren(context, instance)}
+            </g>
+         </g>
+      );
+   }
+}
+
+PieLabel.prototype.distance = 100;
+PieLabel.prototype.baseClass = "pielabel";
+PieLabel.prototype.styled = true;