cx 25.11.1 → 26.0.1

package/dist/svg.js

@@ -1,54 +1,58 @@
+import { ContainerBase, Widget, VDOM, ResizeManager, PureContainerBase } from "cx/ui";
 import { isNumber, isArray, innerTextTrim, addEventListenerWithOptions } from "cx/util";
-import { PureContainer, Widget, ResizeManager, VDOM } from "cx/ui";
 import { jsxs, jsx } from "react/jsx-runtime";
 
-var Rect = /*#__PURE__*/ (function () {
-	function Rect(config) {
+class Rect {
+	isRect = true;
+	l = 0; //left;
+	r = 0; //right
+	t = 0; //top
+	b = 0; //bottom
+	constructor(config) {
 		Object.assign(this, config);
 	}
-	var _proto = Rect.prototype;
-	_proto.width = function width() {
+	width() {
 		return this.r - this.l;
-	};
-	_proto.height = function height() {
+	}
+	height() {
 		return this.b - this.t;
-	};
-	_proto.valid = function valid() {
+	}
+	valid() {
 		return this.r > this.l && this.b > this.t;
-	};
-	_proto.makeValid = function makeValid() {
+	}
+	makeValid() {
 		return new Rect({
 			l: Math.min(this.l, this.r),
 			r: Math.max(this.l, this.r),
 			t: Math.min(this.t, this.b),
 			b: Math.max(this.t, this.b),
 		});
-	};
-	_proto.isEqual = function isEqual(r) {
+	}
+	isEqual(r) {
 		if (!r || !r.isRect) return false;
 		return r.l == this.l && r.r == this.r && r.t == this.t && r.b == this.b;
-	};
-	Rect.add = function add(a, b) {
+	}
+	static add(a, b) {
 		return new Rect({
 			l: a.l + b.l,
 			t: a.t + b.t,
 			r: a.r + b.r,
 			b: a.b + b.b,
 		});
-	};
-	Rect.multiply = function multiply(a, b) {
+	}
+	static multiply(a, b) {
 		return new Rect({
 			l: a.l + (a.r - a.l) * b.l,
 			r: a.l + (a.r - a.l) * b.r,
 			t: a.t + (a.b - a.t) * b.t,
 			b: a.t + (a.b - a.t) * b.b,
 		});
-	};
-	Rect.margin = function margin(r, m) {
+	}
+	static margin(r, m) {
 		var mr = Rect.convertMargin(m);
 		return Rect.add(r, mr);
-	};
-	Rect.convertMargin = function convertMargin(m) {
+	}
+	static convertMargin(m) {
 		if (!m) return new Rect();
 		if (m.isRect) return m;
 		if (isNumber(m))
@@ -58,12 +62,12 @@ var Rect = /*#__PURE__*/ (function () {
 				r: -m,
 				b: -m,
 			});
-		var m = Rect.convert(m);
-		m.b = -m.b;
-		m.r = -m.r;
-		return m;
-	};
-	Rect.convert = function convert(r) {
+		var mr = Rect.convert(m);
+		mr.b = -mr.b;
+		mr.r = -mr.r;
+		return mr;
+	}
+	static convert(r) {
 		if (!r)
 			return new Rect({
 				l: 0,
@@ -82,118 +86,35 @@ var Rect = /*#__PURE__*/ (function () {
 			});
 		}
 		return new Rect(r);
-	};
-	return Rect;
-})();
-Rect.prototype.isRect = true;
-Rect.prototype.l = 0; //left;
-Rect.prototype.r = 0; //right
-Rect.prototype.t = 0; //top
-Rect.prototype.b = 0; //bottom
-
-function _arrayLikeToArray(r, a) {
-	(null == a || a > r.length) && (a = r.length);
-	for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-	return n;
-}
-function _createForOfIteratorHelperLoose(r, e) {
-	var t = ("undefined" != typeof Symbol && r[Symbol.iterator]) || r["@@iterator"];
-	if (t) return (t = t.call(r)).next.bind(t);
-	if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
-		t && (r = t);
-		var o = 0;
-		return function () {
-			return o >= r.length
-				? {
-						done: !0,
-					}
-				: {
-						done: !1,
-						value: r[o++],
-					};
-		};
-	}
-	throw new TypeError(
-		"Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.",
-	);
-}
-function _extends() {
-	return (
-		(_extends = Object.assign
-			? Object.assign.bind()
-			: function (n) {
-					for (var e = 1; e < arguments.length; e++) {
-						var t = arguments[e];
-						for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-					}
-					return n;
-				}),
-		_extends.apply(null, arguments)
-	);
-}
-function _inheritsLoose(t, o) {
-	(t.prototype = Object.create(o.prototype)), (t.prototype.constructor = t), _setPrototypeOf(t, o);
-}
-function _setPrototypeOf(t, e) {
-	return (
-		(_setPrototypeOf = Object.setPrototypeOf
-			? Object.setPrototypeOf.bind()
-			: function (t, e) {
-					return (t.__proto__ = e), t;
-				}),
-		_setPrototypeOf(t, e)
-	);
-}
-function _unsupportedIterableToArray(r, a) {
-	if (r) {
-		if ("string" == typeof r) return _arrayLikeToArray(r, a);
-		var t = {}.toString.call(r).slice(8, -1);
-		return (
-			"Object" === t && r.constructor && (t = r.constructor.name),
-			"Map" === t || "Set" === t
-				? Array.from(r)
-				: "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)
-					? _arrayLikeToArray(r, a)
-					: void 0
-		);
 	}
 }
 
-var BoundedObject = /*#__PURE__*/ (function (_PureContainer) {
-	function BoundedObject() {
-		return _PureContainer.apply(this, arguments) || this;
-	}
-	_inheritsLoose(BoundedObject, _PureContainer);
-	var _proto = BoundedObject.prototype;
-	_proto.declareData = function declareData() {
-		var _PureContainer$protot;
-		return (_PureContainer$protot = _PureContainer.prototype.declareData).call.apply(
-			_PureContainer$protot,
-			[
-				this,
-				{
-					anchors: undefined,
-					offset: undefined,
-					margin: undefined,
-					padding: undefined,
-				},
-			].concat(Array.prototype.slice.call(arguments)),
+class BoundedObject extends ContainerBase {
+	declareData(...args) {
+		return super.declareData(
+			{
+				anchors: undefined,
+				offset: undefined,
+				margin: undefined,
+				padding: undefined,
+			},
+			...args,
 		);
-	};
-	_proto.prepareData = function prepareData(context, instance) {
-		_PureContainer.prototype.prepareData.call(this, context, instance);
-		var data = instance.data;
+	}
+	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);
-	};
-	_proto.calculateBounds = function calculateBounds(context, instance) {
-		var data = instance.data;
+	}
+	calculateBounds(context, instance) {
+		var { data } = instance;
 		return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-	};
-	_proto.prepareBounds = function prepareBounds(context, instance) {
-		var data = instance.data;
+	}
+	prepareBounds(context, instance) {
+		var { data } = instance;
 		if (
 			instance.shouldUpdate ||
 			!instance.cached.parentRect ||
@@ -207,46 +128,36 @@ var BoundedObject = /*#__PURE__*/ (function (_PureContainer) {
 			data.bounds = this.calculateBounds(context, instance);
 			data.childrenBounds = Rect.add(data.bounds, data.padding);
 		}
-	};
-	_proto.prepare = function prepare(context, instance) {
+	}
+	prepare(context, instance) {
 		this.prepareBounds(context, instance);
 		context.push("parentRect", instance.data.childrenBounds);
-	};
-	_proto.prepareCleanup = function prepareCleanup(context, instance) {
+	}
+	prepareCleanup(context, instance) {
 		context.pop("parentRect");
-	};
-	return BoundedObject;
-})(PureContainer);
+	}
+}
 BoundedObject.prototype.anchors = 0;
 BoundedObject.prototype.margin = 0;
 BoundedObject.prototype.offset = 0;
 BoundedObject.prototype.padding = 0;
-BoundedObject.prototype.isPureContainer = false;
 BoundedObject.prototype.styled = true;
 
-var Text = /*#__PURE__*/ (function (_BoundedObject) {
-	function Text() {
-		return _BoundedObject.apply(this, arguments) || this;
-	}
-	_inheritsLoose(Text, _BoundedObject);
-	var _proto = Text.prototype;
-	_proto.declareData = function declareData() {
-		var _BoundedObject$protot;
-		return (_BoundedObject$protot = _BoundedObject.prototype.declareData).call.apply(
-			_BoundedObject$protot,
-			[this].concat(Array.prototype.slice.call(arguments), [
-				{
-					value: undefined,
-					dx: undefined,
-					dy: undefined,
-					textAnchor: undefined,
-					fill: undefined,
-					stroke: undefined,
-				},
-			]),
-		);
-	};
-	_proto.init = function init() {
+class Text extends BoundedObject {
+	constructor(config) {
+		super(config);
+	}
+	declareData(...args) {
+		return super.declareData(...args, {
+			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 = {
@@ -261,22 +172,22 @@ var Text = /*#__PURE__*/ (function (_BoundedObject) {
 				expr: this.expr,
 			};
 		}
-		_BoundedObject.prototype.init.call(this);
-	};
-	_proto.prepare = function prepare(context, instance) {
+		super.init();
+	}
+	prepare(context, instance) {
 		if (this.autoTextAnchor) {
 			instance.textAnchor =
 				context.textDirection == "right" ? "start" : context.textDirection == "left" ? "end" : this.textAnchor;
-			var changed = instance.cache("textAnchor", instance.textAnchor);
+			let changed = instance.cache("textAnchor", instance.textAnchor);
 			if (changed) instance.markShouldUpdate(context);
 		}
-		_BoundedObject.prototype.prepare.call(this, context, instance);
-	};
-	_proto.render = function render(context, instance, key) {
-		var data = instance.data;
-		var bounds = data.bounds;
-		var textAnchor = this.autoTextAnchor ? instance.textAnchor : data.textAnchor;
-		return /*#__PURE__*/ jsxs(
+		super.prepare(context, instance);
+	}
+	render(context, instance, key) {
+		const { data } = instance;
+		const { bounds } = data;
+		let textAnchor = this.autoTextAnchor ? instance.textAnchor : data.textAnchor;
+		return jsxs(
 			"text",
 			{
 				className: data.classNames,
@@ -292,23 +203,20 @@ var Text = /*#__PURE__*/ (function (_BoundedObject) {
 			},
 			key,
 		);
-	};
-	return Text;
-})(BoundedObject);
+	}
+}
 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);
 
-var TextualBoundedObject = /*#__PURE__*/ (function (_BoundedObject) {
-	function TextualBoundedObject() {
-		return _BoundedObject.apply(this, arguments) || this;
-	}
-	_inheritsLoose(TextualBoundedObject, _BoundedObject);
-	var _proto = TextualBoundedObject.prototype;
-	_proto.add = function add(widget) {
-		if (typeof widget != "string") return _BoundedObject.prototype.add.apply(this, arguments);
+class TextualBoundedObject extends BoundedObject {
+	constructor(config) {
+		super(config);
+	}
+	add(widget) {
+		if (typeof widget != "string") return super.add(...arguments);
 		if (this.trimWhitespace) widget = innerTextTrim(widget);
 		if (!widget) return;
 		return this.add({
@@ -317,34 +225,31 @@ var TextualBoundedObject = /*#__PURE__*/ (function (_BoundedObject) {
 			textAnchor: "middle",
 			dy: "0.4em",
 		});
-	};
-	return TextualBoundedObject;
-})(BoundedObject);
+	}
+}
 
-var Svg = /*#__PURE__*/ (function (_BoundedObject) {
-	function Svg() {
-		return _BoundedObject.apply(this, arguments) || this;
-	}
-	_inheritsLoose(Svg, _BoundedObject);
-	var _proto = Svg.prototype;
-	_proto.initState = function initState(context, instance) {
-		var size = {
+class Svg extends BoundedObject {
+	constructor(config) {
+		super(config);
+	}
+	initState(context, instance) {
+		const size = {
 			width: 0,
 			height: 0,
 		};
 		instance.state = {
-			size: size,
+			size,
 		};
-	};
-	_proto.explore = function explore(context, instance) {
+	}
+	explore(context, instance) {
 		context.push("inSvg", true);
-		_BoundedObject.prototype.explore.call(this, context, instance);
-	};
-	_proto.exploreCleanup = function exploreCleanup(context, instance) {
+		super.explore(context, instance);
+	}
+	exploreCleanup(context, instance) {
 		context.pop("inSvg");
-	};
-	_proto.prepare = function prepare(context, instance) {
-		var size = instance.state.size;
+	}
+	prepare(context, instance) {
+		const size = instance.state.size;
 		context.parentRect = new Rect({
 			l: 0,
 			t: 0,
@@ -353,25 +258,25 @@ var Svg = /*#__PURE__*/ (function (_BoundedObject) {
 		});
 		instance.clipRects = {};
 		instance.clipRectId = 0;
-		context.push("addClipRect", function (rect) {
-			var id = "clip-" + instance.id + "-" + ++instance.clipRectId;
+		context.push("addClipRect", (rect) => {
+			const id = `clip-${instance.id}-${++instance.clipRectId}`;
 			instance.clipRects[id] = rect;
 			return id;
 		});
 		context.push("inSvg", true);
-		_BoundedObject.prototype.prepare.call(this, context, instance);
-	};
-	_proto.prepareCleanup = function prepareCleanup(context, instance) {
-		_BoundedObject.prototype.prepareCleanup.call(this, context, instance);
+		super.prepare(context, instance);
+	}
+	prepareCleanup(context, instance) {
+		super.prepareCleanup(context, instance);
 		context.pop("addClipRect");
 		context.pop("inSvg");
-	};
-	_proto.render = function render(context, instance, key) {
-		var eventHandlers = instance.getJsxEventProps();
+	}
+	render(context, instance, key) {
+		let eventHandlers = instance.getJsxEventProps();
 		if (eventHandlers) {
 			delete eventHandlers["onWheelActive"];
 		}
-		return /*#__PURE__*/ jsx(
+		return jsx(
 			SvgComponent,
 			{
 				instance: instance,
@@ -383,9 +288,8 @@ var Svg = /*#__PURE__*/ (function (_BoundedObject) {
 			},
 			key,
 		);
-	};
-	return Svg;
-})(BoundedObject);
+	}
+}
 Svg.prototype.anchors = "0 1 1 0";
 Svg.prototype.baseClass = "svg";
 Svg.prototype.autoWidth = false;
@@ -395,30 +299,22 @@ function sameSize(a, b) {
 	if (!a || !b) return false;
 	return a.width == b.width && a.height == b.height;
 }
-var SvgComponent = /*#__PURE__*/ (function (_VDOM$Component) {
-	function SvgComponent() {
-		return _VDOM$Component.apply(this, arguments) || this;
-	}
-	_inheritsLoose(SvgComponent, _VDOM$Component);
-	var _proto2 = SvgComponent.prototype;
-	_proto2.render = function render() {
-		var _this = this;
-		var _this$props = this.props,
-			instance = _this$props.instance,
-			data = _this$props.data,
-			size = _this$props.size,
-			children = _this$props.children,
-			eventHandlers = _this$props.eventHandlers;
-		var widget = instance.widget;
-		var defs = [];
-		for (var k in instance.clipRects) {
-			var cr = instance.clipRects[k];
+class SvgComponent extends VDOM.Component {
+	el;
+	offResize;
+	offWheelActive;
+	render() {
+		const { instance, data, size, children, eventHandlers } = this.props;
+		const { widget } = instance;
+		const defs = [];
+		for (const k in instance.clipRects) {
+			let cr = instance.clipRects[k];
 			defs.push(
-				/*#__PURE__*/ jsx(
+				jsx(
 					"clipPath",
 					{
 						id: k,
-						children: /*#__PURE__*/ jsx("rect", {
+						children: jsx("rect", {
 							x: cr.l,
 							y: cr.t,
 							width: Math.max(0, cr.width()),
@@ -429,49 +325,43 @@ var SvgComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				),
 			);
 		}
-		var style = data.style;
+		let style = data.style;
 		if (widget.autoHeight)
-			style = _extends({}, style, {
-				height: size.height + "px",
-			});
+			style = {
+				...style,
+				height: `${size.height}px`,
+			};
 		if (widget.autoWidth)
-			style = _extends({}, style, {
-				width: size.width + "px",
-			});
-
+			style = {
+				...style,
+				width: `${size.width}px`,
+			};
 		//parent div is needed because clientWidth doesn't work on the svg element in FF
-
-		return /*#__PURE__*/ jsx(
-			"div",
-			_extends(
-				{
-					ref: function ref(el) {
-						_this.el = el;
-					},
-					className: data.classNames,
-					style: style,
-				},
-				eventHandlers,
-				{
-					children:
-						size.width > 0 &&
-						size.height > 0 &&
-						/*#__PURE__*/ jsxs("svg", {
-							children: [
-								/*#__PURE__*/ jsx("defs", {
-									children: defs,
-								}),
-								children,
-							],
+		return jsx("div", {
+			ref: (el) => {
+				this.el = el;
+			},
+			className: data.classNames,
+			style: style,
+			...eventHandlers,
+			children:
+				size.width > 0 &&
+				size.height > 0 &&
+				jsxs("svg", {
+					children: [
+						jsx("defs", {
+							children: defs,
 						}),
-				},
-			),
-		);
-	};
-	_proto2.onResize = function onResize() {
-		var instance = this.props.instance;
-		var widget = this.props.instance.widget;
-		var size = {
+						children,
+					],
+				}),
+		});
+	}
+	onResize() {
+		const { instance } = this.props;
+		const { widget } = this.props.instance;
+		if (!this.el) return;
+		let size = {
 			width: this.el.clientWidth,
 			height: this.el.clientHeight,
 		};
@@ -481,17 +371,17 @@ var SvgComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			instance.setState({
 				size: size,
 			});
-	};
-	_proto2.componentDidMount = function componentDidMount() {
-		var _this2 = this;
+	}
+	componentDidMount() {
+		if (!this.el) return;
 		this.offResize = ResizeManager.trackElement(this.el, this.onResize.bind(this));
 		this.onResize();
 		if (this.props.instance.widget.onWheelActive) {
 			this.offWheelActive = addEventListenerWithOptions(
 				this.el,
 				"wheel",
-				function (event) {
-					var instance = _this2.props.instance;
+				(event) => {
+					const { instance } = this.props;
 					instance.invoke("onWheelActive", event, instance);
 				},
 				{
@@ -499,50 +389,37 @@ var SvgComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				},
 			);
 		}
-	};
-	_proto2.componentDidUpdate = function componentDidUpdate() {
+	}
+	componentDidUpdate() {
 		this.onResize();
-	};
-	_proto2.componentWillUnmount = function componentWillUnmount() {
+	}
+	componentWillUnmount() {
 		this.offResize && this.offResize();
 		this.offWheelActive && this.offWheelActive();
-	};
-	return SvgComponent;
-})(VDOM.Component);
+	}
+}
 Widget.alias("svg", Svg);
 
-var Rectangle = /*#__PURE__*/ (function (_TextualBoundedObject) {
-	function Rectangle() {
-		return _TextualBoundedObject.apply(this, arguments) || this;
-	}
-	_inheritsLoose(Rectangle, _TextualBoundedObject);
-	var _proto = Rectangle.prototype;
-	_proto.declareData = function declareData() {
-		var _TextualBoundedObject2;
-		(_TextualBoundedObject2 = _TextualBoundedObject.prototype.declareData).call.apply(
-			_TextualBoundedObject2,
-			[this].concat(Array.prototype.slice.call(arguments), [
-				{
-					colorIndex: undefined,
-					fill: undefined,
-					stroke: undefined,
-					rx: undefined,
-					ry: undefined,
-				},
-			]),
-		);
-	};
-	_proto.render = function render(context, instance, key) {
-		var data = instance.data;
-		var bounds = data.bounds,
-			colorIndex = data.colorIndex;
+class Rectangle extends TextualBoundedObject {
+	declareData(...args) {
+		super.declareData(...args, {
+			colorIndex: undefined,
+			fill: undefined,
+			stroke: undefined,
+			rx: undefined,
+			ry: undefined,
+		});
+	}
+	render(context, instance, key) {
+		const { data } = instance;
+		const { bounds, colorIndex } = data;
 		if (!bounds.valid()) return false;
-		return /*#__PURE__*/ jsxs(
+		return jsxs(
 			"g",
 			{
 				className: data.classNames,
 				children: [
-					/*#__PURE__*/ jsx("rect", {
+					jsx("rect", {
 						className: this.CSS.element(this.baseClass, "rect", colorIndex != null && "color-" + colorIndex),
 						x: bounds.l,
 						y: bounds.t,
@@ -559,71 +436,55 @@ var Rectangle = /*#__PURE__*/ (function (_TextualBoundedObject) {
 			},
 			key,
 		);
-	};
-	return Rectangle;
-})(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) {
-	function ClipRect() {
-		return _BoundedObject.apply(this, arguments) || this;
-	}
-	_inheritsLoose(ClipRect, _BoundedObject);
-	var _proto = ClipRect.prototype;
-	_proto.prepareBounds = function prepareBounds(context, instance) {
-		_BoundedObject.prototype.prepareBounds.call(this, context, instance);
-		var data = instance.data;
+class ClipRect extends BoundedObject {
+	constructor(config) {
+		super(config);
+	}
+	prepareBounds(context, instance) {
+		super.prepareBounds(context, instance);
+		const { data } = instance;
 		data.clipId = context.addClipRect(data.bounds);
-	};
-	_proto.render = function render(context, instance, key) {
-		var data = instance.data;
-		return /*#__PURE__*/ jsx(
+	}
+	render(context, instance, key) {
+		const { data } = instance;
+		return jsx(
 			"g",
 			{
-				clipPath: "url(#" + data.clipId + ")",
+				clipPath: `url(#${data.clipId})`,
 				children: this.renderChildren(context, instance),
 			},
 			key,
 		);
-	};
-	return ClipRect;
-})(BoundedObject);
+	}
+}
 ClipRect.prototype.anchors = "0 1 1 0";
 
-var Ellipse = /*#__PURE__*/ (function (_TextualBoundedObject) {
-	function Ellipse() {
-		return _TextualBoundedObject.apply(this, arguments) || this;
-	}
-	_inheritsLoose(Ellipse, _TextualBoundedObject);
-	var _proto = Ellipse.prototype;
-	_proto.declareData = function declareData() {
-		var _TextualBoundedObject2;
-		(_TextualBoundedObject2 = _TextualBoundedObject.prototype.declareData).call.apply(
-			_TextualBoundedObject2,
-			[this].concat(Array.prototype.slice.call(arguments), [
-				{
-					colorIndex: undefined,
-					fill: undefined,
-					stroke: undefined,
-				},
-			]),
-		);
-	};
-	_proto.render = function render(context, instance, key) {
-		var data = instance.data;
-		var bounds = data.bounds,
-			colorIndex = data.colorIndex;
+class Ellipse extends TextualBoundedObject {
+	declareData(...args) {
+		super.declareData(...args, {
+			colorIndex: undefined,
+			fill: undefined,
+			stroke: undefined,
+		});
+	}
+	render(context, instance, key) {
+		const { data } = instance;
+		const { bounds, colorIndex } = data;
 		if (!bounds.valid()) return false;
-		return /*#__PURE__*/ jsxs(
+		return jsxs(
 			"g",
 			{
 				className: data.classNames,
 				children: [
-					/*#__PURE__*/ jsx("ellipse", {
+					jsx("ellipse", {
 						className: this.CSS.element(this.baseClass, "rect", colorIndex != null && "color-" + colorIndex),
 						cx: (bounds.l + bounds.r) / 2,
 						cy: (bounds.t + bounds.b) / 2,
@@ -638,41 +499,28 @@ var Ellipse = /*#__PURE__*/ (function (_TextualBoundedObject) {
 			},
 			key,
 		);
-	};
-	return Ellipse;
-})(TextualBoundedObject);
+	}
+}
 Ellipse.prototype.baseClass = "ellipse";
 Ellipse.prototype.anchors = "0 1 1 0";
 Widget.alias("ellipse", Ellipse);
 
-var Line = /*#__PURE__*/ (function (_TextualBoundedObject) {
-	function Line() {
-		return _TextualBoundedObject.apply(this, arguments) || this;
-	}
-	_inheritsLoose(Line, _TextualBoundedObject);
-	var _proto = Line.prototype;
-	_proto.declareData = function declareData() {
-		var _TextualBoundedObject2;
-		(_TextualBoundedObject2 = _TextualBoundedObject.prototype.declareData).call.apply(
-			_TextualBoundedObject2,
-			[this].concat(Array.prototype.slice.call(arguments), [
-				{
-					colorIndex: undefined,
-					stroke: undefined,
-				},
-			]),
-		);
-	};
-	_proto.render = function render(context, instance, key) {
-		var data = instance.data,
-			colorIndex = instance.colorIndex;
-		var bounds = data.bounds;
-		return /*#__PURE__*/ jsxs(
+class Line extends TextualBoundedObject {
+	declareData(...args) {
+		super.declareData(...args, {
+			colorIndex: undefined,
+			stroke: undefined,
+		});
+	}
+	render(context, instance, key) {
+		const { data, colorIndex } = instance;
+		const { bounds } = data;
+		return jsxs(
 			"g",
 			{
 				className: data.classNames,
 				children: [
-					/*#__PURE__*/ jsx("line", {
+					jsx("line", {
 						className: this.CSS.element(this.baseClass, "line", colorIndex != null && "color-" + colorIndex),
 						x1: bounds.l,
 						y1: bounds.t,
@@ -686,63 +534,50 @@ var Line = /*#__PURE__*/ (function (_TextualBoundedObject) {
 			},
 			key,
 		);
-	};
-	return Line;
-})(TextualBoundedObject);
+	}
+}
 Line.prototype.anchors = "0 1 1 0";
 Line.prototype.baseClass = "line";
 Widget.alias("line", Line);
 
-var NonOverlappingRect = /*#__PURE__*/ (function (_BoundedObject) {
-	function NonOverlappingRect() {
-		return _BoundedObject.apply(this, arguments) || this;
-	}
-	_inheritsLoose(NonOverlappingRect, _BoundedObject);
-	var _proto = NonOverlappingRect.prototype;
-	_proto.prepare = function prepare(context, instance) {
-		_BoundedObject.prototype.prepare.call(this, context, instance); //calculate bounds
+class NonOverlappingRect extends BoundedObject {
+	constructor(config) {
+		super(config);
+	}
+	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.");
+			throw new Error("Components of type NonOverlappingRect can appear only within a NonOverlappingRectGroup.");
 		context.addNonOverlappingBoundingObject(instance);
-	};
-	_proto.render = function render(context, instance, key) {
+	}
+	render(context, instance, key) {
 		if (instance.overlapping) return null;
-		return _BoundedObject.prototype.render.call(this, context, instance, key);
-	};
-	return NonOverlappingRect;
-})(BoundedObject);
+		return super.render(context, instance, key);
+	}
+}
 
-var NonOverlappingRectGroup = /*#__PURE__*/ (function (_PureContainer) {
-	function NonOverlappingRectGroup() {
-		return _PureContainer.apply(this, arguments) || this;
+class NonOverlappingRectGroup extends PureContainerBase {
+	constructor(config) {
+		super(config);
 	}
-	_inheritsLoose(NonOverlappingRectGroup, _PureContainer);
-	var _proto = NonOverlappingRectGroup.prototype;
-	_proto.prepare = function prepare(context, instance) {
+	prepare(context, instance) {
 		instance.nonOverlappingObjects = [];
-		context.push("addNonOverlappingBoundingObject", function (objectInstance) {
+		context.push("addNonOverlappingBoundingObject", (objectInstance) => {
 			instance.nonOverlappingObjects.push(objectInstance);
 		});
-	};
-	_proto.prepareCleanup = function prepareCleanup(context, instance) {
+	}
+	prepareCleanup(context, instance) {
 		context.pop("addNonOverlappingBoundingObject");
-		instance.nonOverlappingObjects.sort(function (a, b) {
-			return a.data.bounds.r - b.data.bounds.r;
-		});
-		var visibleObjects = [];
-		for (
-			var _iterator = _createForOfIteratorHelperLoose(instance.nonOverlappingObjects), _step;
-			!(_step = _iterator()).done;
-
-		) {
-			var item = _step.value;
-			var overlapping = false;
-			var at = visibleObjects.length - 1;
+		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) {
-				var r1 = visibleObjects[at].data.bounds;
-				var r2 = item.data.bounds;
-				var width = Math.min(r1.r, r2.r) - Math.max(r1.l, r2.l);
-				var height = Math.min(r1.b, r2.b) - Math.max(r1.t, r2.t);
+				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;
@@ -755,9 +590,8 @@ var NonOverlappingRectGroup = /*#__PURE__*/ (function (_PureContainer) {
 			}
 			if (!overlapping) visibleObjects.push(item);
 		}
-	};
-	return NonOverlappingRectGroup;
-})(PureContainer);
+	}
+}
 
 export {
 	BoundedObject,