@hpcc-js/react 2.49.6 → 2.51.0

package/dist/index.es6.js

@@ -1,16 +1,16 @@
 import { Utility, Palette, publish, HTMLWidget, SVGWidget } from '@hpcc-js/common';
 
 var PKG_NAME$1 = "@hpcc-js/react";
-var PKG_VERSION$1 = "2.49.6";
-var BUILD_VERSION$1 = "2.103.2";
+var PKG_VERSION$1 = "2.51.0";
+var BUILD_VERSION$1 = "2.104.1";
 
 var PKG_NAME = "@hpcc-js/preact-shim";
-var PKG_VERSION = "2.15.0";
-var BUILD_VERSION = "2.103.2";
+var PKG_VERSION = "2.16.0";
+var BUILD_VERSION = "2.104.1";
 
 var n,l$1,u$1,t$1,o$1,r$1,e$1={},c$1=[],s=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function a$1(n,l){for(var u in l)n[u]=l[u];return n}function h(n){var l=n.parentNode;l&&l.removeChild(n);}function v$1(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return y$1(l,f,t,o,null)}function y$1(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u$1:r};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function d(n){return n.children}function _$1(n,l){this.props=n,this.context=l;}function k$1(n,l){if(null==l)return n.__?k$1(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?k$1(n):null}function b$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return b$1(n)}}function m$1(n){(!n.__d&&(n.__d=!0)&&t$1.push(n)&&!g$1.__r++||r$1!==l$1.debounceRendering)&&((r$1=l$1.debounceRendering)||o$1)(g$1);}function g$1(){for(var n;g$1.__r=t$1.length;)n=t$1.sort(function(n,l){return n.__v.__b-l.__v.__b}),t$1=[],n.some(function(n){var l,u,i,t,o,r;n.__d&&(o=(t=(l=n).__v).__e,(r=l.__P)&&(u=[],(i=a$1({},t)).__v=t.__v+1,j$1(r,t,i,l.__n,void 0!==r.ownerSVGElement,null!=t.__h?[o]:null,u,null==o?k$1(t):o,t.__h),z(u,t),t.__e!=o&&b$1(t)));});}function w$1(n,l,u,i,t,o,r,f,s,a){var h,v,p,_,b,m,g,w=i&&i.__k||c$1,A=w.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(_=u.__k[h]=null==(_=l[h])||"boolean"==typeof _?null:"string"==typeof _||"number"==typeof _||"bigint"==typeof _?y$1(null,_,null,null,_):Array.isArray(_)?y$1(d,{children:_},null,null,null):_.__b>0?y$1(_.type,_.props,_.key,null,_.__v):_)){if(_.__=u,_.__b=u.__b+1,null===(p=w[h])||p&&_.key==p.key&&_.type===p.type)w[h]=void 0;else for(v=0;v<A;v++){if((p=w[v])&&_.key==p.key&&_.type===p.type){w[v]=void 0;break}p=null;}j$1(n,_,p=p||e$1,t,o,r,f,s,a),b=_.__e,(v=_.ref)&&p.ref!=v&&(g||(g=[]),p.ref&&g.push(p.ref,null,_),g.push(v,_.__c||b,_)),null!=b?(null==m&&(m=b),"function"==typeof _.type&&_.__k===p.__k?_.__d=s=x$1(_,s,n):s=P(n,_,p,w,b,s),"function"==typeof u.type&&(u.__d=s)):s&&p.__e==s&&s.parentNode!=n&&(s=k$1(p));}for(u.__e=m,h=A;h--;)null!=w[h]&&("function"==typeof u.type&&null!=w[h].__e&&w[h].__e==u.__d&&(u.__d=k$1(i,h+1)),N(w[h],w[h]));if(g)for(h=0;h<g.length;h++)M(g[h],g[++h],g[++h]);}function x$1(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?x$1(i,l,u):P(u,i,i,t,i.__e,l));return l}function P(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else {for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=2)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function C(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||H(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||H(n,o,l[o],u[o],i);}function $(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]=null==u?"":"number"!=typeof u||s.test(l)?u:u+"px";}function H(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||$(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||$(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?T:I,o):n.removeEventListener(l,o?T:I,o);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null!=u&&(!1!==u||"a"===l[0]&&"r"===l[1])?n.setAttribute(l,u):n.removeAttribute(l));}}function I(n){this.l[n.type+!1](l$1.event?l$1.event(n):n);}function T(n){this.l[n.type+!0](l$1.event?l$1.event(n):n);}function j$1(n,u,i,t,o,r,f,e,c){var s,h,v,y,p,k,b,m,g,x,A,P=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(s=l$1.__b)&&s(u);try{n:if("function"==typeof P){if(m=u.props,g=(s=P.contextType)&&t[s.__c],x=s?g?g.props.value:s.__:t,i.__c?b=(h=u.__c=i.__c).__=h.__E:("prototype"in P&&P.prototype.render?u.__c=h=new P(m,x):(u.__c=h=new _$1(m,x),h.constructor=P,h.render=O),g&&g.sub(h),h.props=m,h.state||(h.state={}),h.context=x,h.__n=t,v=h.__d=!0,h.__h=[]),null==h.__s&&(h.__s=h.state),null!=P.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=a$1({},h.__s)),a$1(h.__s,P.getDerivedStateFromProps(m,h.__s))),y=h.props,p=h.state,v)null==P.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(null==P.getDerivedStateFromProps&&m!==y&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(m,x),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(m,h.__s,x)||u.__v===i.__v){h.props=m,h.state=h.__s,u.__v!==i.__v&&(h.__d=!1),h.__v=u,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(m,h.__s,x),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(y,p,k);});}h.context=x,h.props=m,h.state=h.__s,(s=l$1.__r)&&s(u),h.__d=!1,h.__v=u,h.__P=n,s=h.render(h.props,h.state,h.context),h.state=h.__s,null!=h.getChildContext&&(t=a$1(a$1({},t),h.getChildContext())),v||null==h.getSnapshotBeforeUpdate||(k=h.getSnapshotBeforeUpdate(y,p)),A=null!=s&&s.type===d&&null==s.key?s.props.children:s,w$1(n,Array.isArray(A)?A:[A],u,i,t,o,r,f,e,c),h.base=u.__e,u.__h=null,h.__h.length&&f.push(h),b&&(h.__E=h.__=null),h.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=L(i.__e,u,i,t,o,r,f,c);(s=l$1.diffed)&&s(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$1.__e(n,u,i);}}function z(n,u){l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function L(l,u,i,t,o,r,f,c){var s,a,v,y=i.props,p=u.props,d=u.type,_=0;if("svg"===d&&(o=!0),null!=r)for(;_<r.length;_++)if((s=r[_])&&"setAttribute"in s==!!d&&(d?s.localName===d:3===s.nodeType)){l=s,r[_]=null;break}if(null==l){if(null===d)return document.createTextNode(p);l=o?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),r=null,c=!1;}if(null===d)y===p||c&&l.data===p||(l.data=p);else {if(r=r&&n.call(l.childNodes),a=(y=i.props||e$1).dangerouslySetInnerHTML,v=p.dangerouslySetInnerHTML,!c){if(null!=r)for(y={},_=0;_<l.attributes.length;_++)y[l.attributes[_].name]=l.attributes[_].value;(v||a)&&(v&&(a&&v.__html==a.__html||v.__html===l.innerHTML)||(l.innerHTML=v&&v.__html||""));}if(C(l,p,y,o,c),v)u.__k=[];else if(_=u.props.children,w$1(l,Array.isArray(_)?_:[_],u,i,t,o&&"foreignObject"!==d,r,f,r?r[0]:i.__k&&k$1(i,0),c),null!=r)for(_=r.length;_--;)null!=r[_]&&h(r[_]);c||("value"in p&&void 0!==(_=p.value)&&(_!==l.value||"progress"===d&&!_||"option"===d&&_!==y.value)&&H(l,"value",_,y.value,!1),"checked"in p&&void 0!==(_=p.checked)&&_!==l.checked&&H(l,"checked",_,y.checked,!1));}return l}function M(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,i);}}function N(n,u,i){var t,o;if(l$1.unmount&&l$1.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||M(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$1.__e(n,u);}t.base=t.__P=null;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&N(t[o],u,"function"!=typeof n.type);i||null==n.__e||h(n.__e),n.__e=n.__d=void 0;}function O(n,l,u){return this.constructor(n,u)}function S(u,i,t){var o,r,f;l$1.__&&l$1.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,f=[],j$1(i,u=(!o&&t||i).__k=v$1(d,null,[u]),r||e$1,e$1,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n.call(i.childNodes):null,f,!o&&t?t:r?r.__e:i.firstChild,o),z(f,u);}n=c$1.slice,l$1={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u$1=0,_$1.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=a$1({},this.state),"function"==typeof n&&(n=n(a$1({},u),this.props)),n&&a$1(u,n),null!=n&&this.__v&&(l&&this.__h.push(l),m$1(this));},_$1.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),m$1(this));},_$1.prototype.render=d,t$1=[],o$1="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,g$1.__r=0;
 
-var t,u,r,o=0,i=[],c=l$1.__b,f=l$1.__r,e=l$1.diffed,a=l$1.__c,v=l$1.unmount;function l(t,r){l$1.__h&&l$1.__h(u,t,o||r),o=0;var i=u.__H||(u.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function m(n){return o=1,p(w,n)}function p(n,r,o){var i=l(t++,2);return i.t=n,i.__c||(i.__=[o?o(r):w(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}],i.__c=u),i.__}function y$2(r,o){var i=l(t++,3);!l$1.__s&&k(i.__H,o)&&(i.__=r,i.__H=o,u.__H.__h.push(i));}function _(n,u){var r=l(t++,7);return k(r.__H,u)&&(r.__=n(),r.__H=u,r.__h=n),r.__}function x$2(){for(var t;t=i.shift();)if(t.__P)try{t.__H.__h.forEach(g),t.__H.__h.forEach(j),t.__H.__h=[];}catch(u){t.__H.__h=[],l$1.__e(u,t.__v);}}l$1.__b=function(n){u=null,c&&c(n);},l$1.__r=function(n){f&&f(n),t=0;var r=(u=n.__c).__H;r&&(r.__h.forEach(g),r.__h.forEach(j),r.__h=[]);},l$1.diffed=function(t){e&&e(t);var o=t.__c;o&&o.__H&&o.__H.__h.length&&(1!==i.push(o)&&r===l$1.requestAnimationFrame||((r=l$1.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),b&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);b&&(t=requestAnimationFrame(u));})(x$2)),u=null;},l$1.__c=function(t,u){u.some(function(t){try{t.__h.forEach(g),t.__h=t.__h.filter(function(n){return !n.__||j(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],l$1.__e(r,t.__v);}}),a&&a(t,u);},l$1.unmount=function(t){v&&v(t);var u,r=t.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{g(n);}catch(n){u=n;}}),u&&l$1.__e(u,r.__v));};var b="function"==typeof requestAnimationFrame;function g(n){var t=u,r=n.__c;"function"==typeof r&&(n.__c=void 0,r()),u=t;}function j(n){var t=u;n.__c=n.__(),u=t;}function k(n,t){return !n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function w(n,t){return "function"==typeof t?t(n):t}
+var t,u,r,o=0,i=[],c=l$1.__b,f=l$1.__r,e=l$1.diffed,a=l$1.__c,v=l$1.unmount;function l(t,r){l$1.__h&&l$1.__h(u,t,o||r),o=0;var i=u.__H||(u.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function m(n){return o=1,p(w,n)}function p(n,r,o){var i=l(t++,2);return i.t=n,i.__c||(i.__=[o?o(r):w(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}],i.__c=u),i.__}function y$2(r,o){var i=l(t++,3);!l$1.__s&&k(i.__H,o)&&(i.__=r,i.__H=o,u.__H.__h.push(i));}function _(n,u){var r=l(t++,7);return k(r.__H,u)&&(r.__=n(),r.__H=u,r.__h=n),r.__}function A(n,t){return o=8,_(function(){return n},t)}function x$2(){for(var t;t=i.shift();)if(t.__P)try{t.__H.__h.forEach(g),t.__H.__h.forEach(j),t.__H.__h=[];}catch(u){t.__H.__h=[],l$1.__e(u,t.__v);}}l$1.__b=function(n){u=null,c&&c(n);},l$1.__r=function(n){f&&f(n),t=0;var r=(u=n.__c).__H;r&&(r.__h.forEach(g),r.__h.forEach(j),r.__h=[]);},l$1.diffed=function(t){e&&e(t);var o=t.__c;o&&o.__H&&o.__H.__h.length&&(1!==i.push(o)&&r===l$1.requestAnimationFrame||((r=l$1.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),b&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);b&&(t=requestAnimationFrame(u));})(x$2)),u=null;},l$1.__c=function(t,u){u.some(function(t){try{t.__h.forEach(g),t.__h=t.__h.filter(function(n){return !n.__||j(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],l$1.__e(r,t.__v);}}),a&&a(t,u);},l$1.unmount=function(t){v&&v(t);var u,r=t.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{g(n);}catch(n){u=n;}}),u&&l$1.__e(u,r.__v));};var b="function"==typeof requestAnimationFrame;function g(n){var t=u,r=n.__c;"function"==typeof r&&(n.__c=void 0,r()),u=t;}function j(n){var t=u;n.__c=n.__(),u=t;}function k(n,t){return !n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function w(n,t){return "function"==typeof t?t(n):t}
 
 var index_es6 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -22,6 +22,7 @@ var index_es6 = /*#__PURE__*/Object.freeze({
   createElement: v$1,
   h: v$1,
   render: S,
+  useCallback: A,
   useEffect: y$2,
   useMemo: _,
   useReducer: p,
@@ -325,12 +326,18 @@ function calcArc(points, curveDepth) {
 }
 var Edge = function (_a) {
     var _b = _a.points, points = _b === void 0 ? [] : _b, _c = _a.curveDepth, curveDepth = _c === void 0 ? 16 : _c, _d = _a.stroke, stroke = _d === void 0 ? "black" : _d, strokeDasharray = _a.strokeDasharray;
-    return v$1("path", { stroke: stroke, "stroke-dasharray": strokeDasharray, d: line(calcArc(points, curveDepth)) });
+    var d = _(function () {
+        return line(calcArc(points, curveDepth));
+    }, [curveDepth, points]);
+    return v$1("path", { stroke: stroke, "stroke-dasharray": strokeDasharray, d: d });
 };
 
 var ImageChar = function (_a) {
     var x = _a.x, _b = _a.y, y = _b === void 0 ? 0 : _b, _c = _a.height, height = _c === void 0 ? 12 : _c, fill = _a.fill, stroke = _a.stroke, _d = _a.fontFamily, fontFamily = _d === void 0 ? "FontAwesome" : _d, _e = _a.char, char = _e === void 0 ? "" : _e;
-    return v$1("text", { x: x, y: y, fill: fill, stroke: stroke, "font-family": fontFamily, "font-size": "".concat(height, "px"), "dominant-baseline": "middle", style: "text-anchor: middle;alignment-baseline:middle;" }, fontFamily === "FontAwesome" ? Utility.faChar(char) : char);
+    var renderChar = _(function () {
+        return fontFamily === "FontAwesome" ? Utility.faChar(char) : char;
+    }, [char, fontFamily]);
+    return v$1("text", { x: x, y: y, fill: fill, stroke: stroke, "font-family": fontFamily, "font-size": "".concat(height, "px"), "dominant-baseline": "middle", style: "text-anchor: middle;alignment-baseline:middle;" }, renderChar);
 };
 
 /*! *****************************************************************************
@@ -399,10 +406,12 @@ var Rectangle = function (_a) {
     return v$1("rect", { x: -width / 2, y: -height / 2, rx: cornerRadius, ry: cornerRadius, width: width, height: height, fill: fill, stroke: stroke || fill, "stroke-width": strokeWidth, "shape-rendering": shapeRendering });
 };
 var Shape = function (_a) {
-    var _b = _a.shape, shape = _b === void 0 ? "circle" : _b, _c = _a.height, height = _c === void 0 ? 128 : _c, fill = _a.fill, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 1 : _d, shapeRendering = _a.shapeRendering, cornerRadius = _a.cornerRadius;
+    var _b = _a.shape, shape = _b === void 0 ? "circle" : _b, _c = _a.height, height = _c === void 0 ? 128 : _c, width = _a.width, fill = _a.fill, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 1 : _d, shapeRendering = _a.shapeRendering, cornerRadius = _a.cornerRadius;
     switch (shape) {
         case "square":
             return v$1(Square, { radius: height / 2, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering, cornerRadius: cornerRadius });
+        case "rectangle":
+            return v$1(Rectangle, { width: width !== null && width !== void 0 ? width : height, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering, cornerRadius: cornerRadius });
         case "circle":
         default:
             return v$1(Circle, { radius: height / 2, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering });
@@ -410,10 +419,10 @@ var Shape = function (_a) {
 };
 
 var Icon = function (_a) {
-    var _b = _a.shape, shape = _b === void 0 ? "circle" : _b, _c = _a.height, height = _c === void 0 ? 32 : _c, fill = _a.fill, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 0 : _d, _e = _a.imageFontFamily, imageFontFamily = _e === void 0 ? "FontAwesome" : _e, _f = _a.imageChar, imageChar = _f === void 0 ? "" : _f, _g = _a.imageCharFill, imageCharFill = _g === void 0 ? Palette.textColor(fill) : _g, _h = _a.padding, padding = _h === void 0 ? height / 5 : _h, _j = _a.yOffset, yOffset = _j === void 0 ? 0 : _j, cornerRadius = _a.cornerRadius, shapeRendering = _a.shapeRendering;
+    var _b = _a.shape, shape = _b === void 0 ? "circle" : _b, width = _a.width, _c = _a.height, height = _c === void 0 ? 32 : _c, fill = _a.fill, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 0 : _d, _e = _a.imageFontFamily, imageFontFamily = _e === void 0 ? "FontAwesome" : _e, _f = _a.imageChar, imageChar = _f === void 0 ? "" : _f, _g = _a.imageCharFill, imageCharFill = _g === void 0 ? Palette.textColor(fill) : _g, _h = _a.padding, padding = _h === void 0 ? height / 5 : _h, _j = _a.xOffset, xOffset = _j === void 0 ? 0 : _j, _k = _a.yOffset, yOffset = _k === void 0 ? 0 : _k, cornerRadius = _a.cornerRadius, shapeRendering = _a.shapeRendering;
     return v$1(d, null,
-        v$1(Shape, { shape: shape, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering, cornerRadius: cornerRadius }),
-        v$1(ImageChar, { y: yOffset, height: height - padding, fontFamily: imageFontFamily, char: imageChar, fill: imageCharFill, "font-weight": 400 }));
+        v$1(Shape, { shape: shape, width: width, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering, cornerRadius: cornerRadius }),
+        v$1(ImageChar, { x: xOffset, y: yOffset, height: height - padding, fontFamily: imageFontFamily, char: imageChar, fill: imageCharFill, "font-weight": 400 }));
 };
 var Icons = function (_a) {
     var _b = _a.icons, icons = _b === void 0 ? [] : _b;
@@ -497,29 +506,39 @@ var TextLine = function (_a) {
 };
 var Text = function (_a) {
     var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.fontFamily, fontFamily = _c === void 0 ? "Verdana" : _c, _d = _a.fill, fill = _d === void 0 ? "black" : _d, onSizeUpdate = _a.onSizeUpdate;
-    var _e = m(0), totalWidth = _e[0], onTotalWidthUpdate = _e[1];
-    var _f = m(0), totalHeight = _f[0], onTotalHeightUpdate = _f[1];
+    var _e = m(0), totalWidth = _e[0], setTotalWidthUpdate = _e[1];
+    var _f = m(0), totalHeight = _f[0], setTotalHeightUpdate = _f[1];
     y$2(function () {
         onSizeUpdate && onSizeUpdate({ width: totalWidth, height: totalHeight });
     }, [totalWidth, totalHeight, onSizeUpdate]);
-    var parts = text.split("\n");
-    var ts = Utility.textSize(parts, fontFamily, height);
-    onTotalWidthUpdate(ts.width);
-    onTotalHeightUpdate(parts.length * (height + 2) - 2);
+    var parts = _(function () {
+        return text.split("\n");
+    }, [text]);
+    var ts = _(function () {
+        return Utility.textSize(parts, fontFamily, height);
+    }, [fontFamily, height, parts]);
+    setTotalWidthUpdate(ts.width);
+    setTotalHeightUpdate(parts.length * (height + 2) - 2);
     var yOffset = -(totalHeight / 2) + (height / 2);
-    var TextLines = parts.map(function (p, i) {
-        return v$1("g", { transform: "translate(0 ".concat(yOffset + i * (height + 2), ")") },
-            v$1(TextLine, { text: p, height: height, fontFamily: fontFamily, fill: fill }));
-    });
+    var TextLines = _(function () {
+        return parts.map(function (p, i) {
+            return v$1("g", { key: i, transform: "translate(0 ".concat(yOffset + i * (height + 2), ")") },
+                v$1(TextLine, { text: p, height: height, fontFamily: fontFamily, fill: fill }));
+        });
+    }, [fill, fontFamily, height, parts, yOffset]);
     return v$1(d, null, TextLines);
 };
 var TextBox = function (_a) {
     var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.fontFamily, fontFamily = _c === void 0 ? "Verdana" : _c, _d = _a.padding, padding = _d === void 0 ? 4 : _d, _e = _a.fill, fill = _e === void 0 ? "whitesmoke" : _e, _f = _a.stroke, stroke = _f === void 0 ? "lightgray" : _f, _g = _a.textFill, textFill = _g === void 0 ? "black" : _g, _h = _a.strokeWidth, strokeWidth = _h === void 0 ? 1 : _h, _j = _a.cornerRadius, cornerRadius = _j === void 0 ? 0 : _j, onSizeUpdate = _a.onSizeUpdate;
-    var _k = m(0), textWidth = _k[0], onTextWidthUpdate = _k[1];
-    var _l = m(0), textHeight = _l[0], onTextHeightUpdate = _l[1];
+    var _k = m(0), textWidth = _k[0], setTextWidthUpdate = _k[1];
+    var _l = m(0), textHeight = _l[0], setTextHeightUpdate = _l[1];
     y$2(function () {
         onSizeUpdate && onSizeUpdate({ width: textWidth, height: textHeight });
     }, [textWidth, textHeight, onSizeUpdate]);
+    var onTextSizeUpdate = A(function (size) {
+        setTextWidthUpdate(size.width);
+        setTextHeightUpdate(size.height);
+    }, []);
     var w = textWidth + padding * 2 + strokeWidth;
     var h = textHeight + padding * 2 + strokeWidth;
     var textOffsetY = Math.floor(height / 10);
@@ -527,10 +546,6 @@ var TextBox = function (_a) {
         v$1(Rectangle, { width: w, height: h, fill: fill, stroke: stroke, strokeWidth: strokeWidth, cornerRadius: cornerRadius }),
         v$1("g", { transform: "translate(0 ".concat(textOffsetY, ")") },
             v$1(Text, { text: text, fontFamily: fontFamily, height: height, fill: textFill, onSizeUpdate: onTextSizeUpdate })));
-    function onTextSizeUpdate(size) {
-        onTextWidthUpdate(size.width);
-        onTextHeightUpdate(size.height);
-    }
 };
 var LabelledRect = function (_a) {
     var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.width, width = _c === void 0 ? 12 : _c, _d = _a.fontFamily, fontFamily = _d === void 0 ? "Verdana" : _d, _e = _a.fontSize, fontSize = _e === void 0 ? 10 : _e, _f = _a.padding, padding = _f === void 0 ? 3 : _f, _g = _a.fill, fill = _g === void 0 ? "whitesmoke" : _g, _h = _a.stroke, stroke = _h === void 0 ? "lightgray" : _h, _j = _a.textFill, textFill = _j === void 0 ? "black" : _j, _k = _a.strokeWidth, strokeWidth = _k === void 0 ? 1 : _k, _l = _a.cornerRadius, cornerRadius = _l === void 0 ? 0 : _l; _a.onSizeUpdate;
@@ -557,8 +572,8 @@ var Annotations = function (_a) {
 };
 var Vertex = function (_a) {
     var _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 4 : _e, _f = _a.icon, icon = _f === void 0 ? {} : _f, _g = _a.annotationsHeight, annotationsHeight = _g === void 0 ? 12 : _g, _h = _a.annotationIDs, annotationIDs = _h === void 0 ? [] : _h, textFill = _a.textFill, textboxFill = _a.textboxFill, textboxStroke = _a.textboxStroke, textFontFamily = _a.textFontFamily, onSizeUpdate = _a.onSizeUpdate, _j = _a.showLabel, showLabel = _j === void 0 ? true : _j;
-    var _k = m(0), textBoxWidth = _k[0], onTextBoxWidthUpdate = _k[1];
-    var _l = m(0), textBoxHeight = _l[0], onTextBoxHeightUpdate = _l[1];
+    var _k = m(0), textBoxWidth = _k[0], setTextBoxWidthUpdate = _k[1];
+    var _l = m(0), textBoxHeight = _l[0], setTextBoxHeightUpdate = _l[1];
     y$2(function () {
         onSizeUpdate && onSizeUpdate({ width: 0, height: 0 });
     }, [textBoxWidth, textBoxHeight, onSizeUpdate]);
@@ -572,6 +587,10 @@ var Vertex = function (_a) {
         offsetY += (textHeight + 8) / 2;
         annotationOffsetY -= textBoxHeight + textPadding;
     }
+    var onTextBoxSizeUpdate = A(function (size) {
+        setTextBoxWidthUpdate(size.width);
+        setTextBoxHeightUpdate(size.height);
+    }, []);
     var label = showLabel ? v$1("g", { transform: "translate(0 ".concat(textboxOffsetY, ")") },
         v$1(TextBox, { text: text, height: textHeight, padding: textPadding, onSizeUpdate: onTextBoxSizeUpdate, textFill: textFill, fill: textboxFill, stroke: textboxStroke, fontFamily: textFontFamily })) : undefined;
     return categoryID ?
@@ -582,17 +601,15 @@ var Vertex = function (_a) {
         v$1("g", { transform: "translate(0 ".concat(offsetY, ")") },
             v$1(Icon, __assign({}, icon)),
             label);
-    function onTextBoxSizeUpdate(size) {
-        onTextBoxWidthUpdate(size.width);
-        onTextBoxHeightUpdate(size.height);
-    }
 };
 
 var Vertex2 = function (_a) {
     var _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 4 : _e, _f = _a.icon, icon = _f === void 0 ? {} : _f, _g = _a.textFill, textFill = _g === void 0 ? "black" : _g, _h = _a.textboxFill, textboxFill = _h === void 0 ? "white" : _h, _j = _a.textboxStroke, textboxStroke = _j === void 0 ? "black" : _j, textFontFamily = _a.textFontFamily, _k = _a.annotationsHeight, annotationsHeight = _k === void 0 ? 12 : _k, _l = _a.annotationIDs, annotationIDs = _l === void 0 ? [] : _l;
     icon = __assign({ imageChar: "fa-question", imageCharFill: "white", height: 32, fill: "black", shape: "square" }, icon);
     var textBoxHeight = textHeight + textPadding * 2;
-    var width = Utility.textSize(text, textFontFamily, textHeight, false).width;
+    var width = _(function () {
+        return Utility.textSize(text, textFontFamily, textHeight, false);
+    }, [text, textFontFamily, textHeight]).width;
     var stepSize = annotationsHeight;
     var textboxStrokeWidth = 1;
     var halfTextboxHeight = textBoxHeight / 2;
@@ -625,7 +642,9 @@ var Vertex3 = function (_a) {
     subText = __assign({ text: "", fill: "white", textFill: "#555555" }, subText);
     var fullAnnotationWidth = 0;
     var annoOffsetY = 0;
-    var labelWidth = Utility.textSize(text, textFontFamily, textHeight, false).width;
+    var labelWidth = _(function () {
+        return Utility.textSize(text, textFontFamily, textHeight, false).width;
+    }, [text, textFontFamily, textHeight]);
     var labelShapeWidth = 0;
     if (text !== "") {
         labelShapeWidth = labelWidth + (textPadding * 2) + (textboxStrokeWidth * 2);
@@ -634,12 +653,12 @@ var Vertex3 = function (_a) {
     var textOffsetX = fullAnnotationWidth - (labelShapeWidth / 2);
     var textShapeHeight = textHeight + (textPadding * 2) + (textboxStrokeWidth * 2);
     var annotationArr = [];
-    annotations.forEach(function (anno) {
+    annotations.forEach(function (anno, idx) {
         var annoText = anno.imageChar;
         var annoShapeWidth = textShapeHeight;
         fullAnnotationWidth += annoShapeWidth + annotationGutter;
         var annoOffsetX = fullAnnotationWidth - (annoShapeWidth / 2);
-        annotationArr.push(v$1("g", { class: "vertex3-anno", transform: "translate(".concat(annoOffsetX, " ").concat(annoOffsetY, ")") },
+        annotationArr.push(v$1("g", { key: idx, class: "vertex3-anno", transform: "translate(".concat(annoOffsetX, " ").concat(annoOffsetY, ")") },
             v$1(Icon, __assign({}, anno, { shape: "square", height: textShapeHeight, imageChar: annoText, imageFontFamily: anno.imageFontFamily, cornerRadius: cornerRadius, strokeWidth: 0 }))));
     });
     if (annotations.length > 0) {
@@ -691,6 +710,99 @@ var CentroidVertex3 = function (_a) {
     return v$1(Vertex3, __assign({}, props, { icon: icon, subText: subText }));
 };
 
+var Vertex4 = function (_a) {
+    _a.categoryID; var _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 10 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 4 : _e, _f = _a.textFill, textFill = _f === void 0 ? "#287EC4" : _f, _g = _a.textboxFill, textboxFill = _g === void 0 ? "white" : _g, _h = _a.textboxStroke, textboxStroke = _h === void 0 ? "#CCCCCC" : _h, _j = _a.textboxStrokeWidth, textboxStrokeWidth = _j === void 0 ? 1 : _j, _k = _a.textFontFamily, textFontFamily = _k === void 0 ? "Verdana" : _k, _l = _a.annotationGutter, annotationGutter = _l === void 0 ? 2 : _l, _m = _a.annotations, annotations = _m === void 0 ? [] : _m, _o = _a.iconAnnotations, iconAnnotations = _o === void 0 ? [] : _o, _p = _a.cornerRadius, cornerRadius = _p === void 0 ? 3 : _p, _q = _a.icon, icon = _q === void 0 ? {} : _q, _r = _a.subText, subText = _r === void 0 ? {} : _r, _s = _a.showLabel, showLabel = _s === void 0 ? true : _s, _t = _a.noLabelRadius, noLabelRadius = _t === void 0 ? 5 : _t, _u = _a.iconBorderWidth, iconBorderWidth = _u === void 0 ? 1 : _u, _v = _a.iconBorderColor, iconBorderColor = _v === void 0 ? "#333" : _v, _w = _a.iconBackgroundColor, iconBackgroundColor = _w === void 0 ? "#fff" : _w, _x = _a.iconFontColor, iconFontColor = _x === void 0 ? "#000" : _x, _y = _a.iconFontSize, iconFontSize = _y === void 0 ? 20 : _y, _z = _a.iconFontFamily, iconFontFamily = _z === void 0 ? "FontAwesome" : _z, _0 = _a.shapeOffsetX, shapeOffsetX = _0 === void 0 ? 0 : _0, _1 = _a.shapeOffsetY, shapeOffsetY = _1 === void 0 ? 0 : _1, _2 = _a.iconOffsetX, iconOffsetX = _2 === void 0 ? 0 : _2, _3 = _a.iconOffsetY, iconOffsetY = _3 === void 0 ? 0 : _3, _4 = _a.iconPadding, iconPadding = _4 === void 0 ? 4 : _4, _5 = _a.iconText, iconText = _5 === void 0 ? "?" : _5, _6 = _a.shapeRendering, shapeRendering = _6 === void 0 ? "auto" : _6;
+    icon = __assign({ height: 50, imageChar: "?", imageFontFamily: "FontAwesome", imageCharFill: "#555555", fill: "transparent", strokeWidth: 0 }, icon);
+    subText = __assign({ text: "", fill: "white", textFill: "#555555" }, subText);
+    var annoOffsetY = 0;
+    var labelWidth = _(function () {
+        return Utility.textSize(text, textFontFamily, textHeight, false).width;
+    }, [text, textFontFamily, textHeight]);
+    var labelShapeWidth = 0;
+    if (text !== "") {
+        labelShapeWidth = labelWidth + (textPadding * 2) + (textboxStrokeWidth * 2);
+    }
+    var fullAnnotationWidth = labelShapeWidth + annotationGutter;
+    var textOffsetX = fullAnnotationWidth - (labelShapeWidth / 2);
+    var textShapeHeight = textHeight + (annotationGutter * 2) + (textboxStrokeWidth * 2);
+    var annoWidthArr = annotations.map(function (anno, i) {
+        return Utility.textSize(anno.imageChar, anno.imageFontFamily, anno.height, false).width;
+    });
+    var annotationArr = [];
+    var _labelAnnoOffsetX = fullAnnotationWidth;
+    annotations.forEach(function (anno, i) {
+        var _a;
+        var annoText = anno.imageChar;
+        var annoTextHeight = (_a = anno.height) !== null && _a !== void 0 ? _a : textShapeHeight;
+        _labelAnnoOffsetX += annoWidthArr[i] + annotationGutter;
+        var annoOffsetX = _labelAnnoOffsetX - (annoWidthArr[i] / 2);
+        annotationArr.push(v$1("g", { key: i, class: "vertex3-anno", "data-anno": JSON.stringify(anno), transform: "translate(".concat(annoOffsetX, " ").concat(annoOffsetY, ")") },
+            v$1(Icon, __assign({}, anno, { shape: "rectangle", width: annoWidthArr[i], height: annoTextHeight, imageChar: annoText, imageFontFamily: anno.imageFontFamily, cornerRadius: cornerRadius, strokeWidth: 0 }))));
+    });
+    if (annotations.length > 0) {
+        fullAnnotationWidth += annotationGutter * (annotations.length - 1);
+    }
+    var iconAnnotationArr = [];
+    iconAnnotations.forEach(function (anno, i) {
+        var _a;
+        var x = anno.shapeOffsetX;
+        var y = anno.shapeOffsetY;
+        iconAnnotationArr.push(v$1("g", { key: i, class: "vertex3-iconAnno", "data-anno": JSON.stringify(anno), transform: "translate(".concat(x, " ").concat(y, ")") },
+            v$1(Icon, __assign({}, anno, { shape: (_a = anno.shape) !== null && _a !== void 0 ? _a : "square", imageChar: anno.imageChar, imageFontFamily: anno.imageFontFamily, cornerRadius: cornerRadius, stroke: anno.stroke, strokeWidth: anno.strokeWidth }))));
+    });
+    var textElement = v$1("g", { transform: "translate(".concat(textOffsetX, " ").concat(annoOffsetY, ")") }, !showLabel || text === "" ? v$1("circle", { r: noLabelRadius, stroke: textboxStroke, fill: textFill }) : v$1(TextBox, { text: text, height: textHeight, padding: textPadding, strokeWidth: textboxStrokeWidth, stroke: textboxStroke, fill: textboxFill, textFill: textFill, fontFamily: textFontFamily, cornerRadius: cornerRadius }));
+    var subTextOffsetX = 0;
+    var subTextOffsetY = textShapeHeight + (annotationGutter * 2);
+    var subtextElement = subText.text === "" ? null : v$1("g", { transform: "translate(".concat(subTextOffsetX, " ").concat(subTextOffsetY, ")") },
+        v$1(TextBox, __assign({ fill: subText.fill || "#FFFFFF", textFill: subText.textFill || textFill }, subText, { height: textHeight, padding: textPadding, strokeWidth: 0, stroke: textboxStroke, fontFamily: textFontFamily, cornerRadius: cornerRadius })));
+    return v$1("g", null,
+        v$1("g", { transform: "translate(".concat(shapeOffsetX, " ").concat(shapeOffsetY, ")") },
+            v$1(Icon, __assign({}, icon, { strokeWidth: iconBorderWidth, shape: "circle", height: iconFontSize, fill: iconBackgroundColor, stroke: iconBorderColor, imageFontFamily: iconFontFamily, imageChar: iconText, imageCharFill: iconFontColor, padding: iconPadding, xOffset: iconOffsetX, yOffset: iconOffsetY, cornerRadius: cornerRadius, shapeRendering: shapeRendering })),
+            iconAnnotationArr),
+        v$1("g", { transform: "translate(".concat(-fullAnnotationWidth / 2, " ").concat(annoOffsetY, ")") },
+            textElement,
+            annotationArr),
+        subtextElement);
+};
+var CentroidVertex4 = function (_a) {
+    var _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 10 : _e, _f = _a.textFill, textFill = _f === void 0 ? "#287EC4" : _f, _g = _a.textboxFill, textboxFill = _g === void 0 ? "white" : _g, _h = _a.textboxStroke, textboxStroke = _h === void 0 ? "#CCCCCC" : _h, _j = _a.textboxStrokeWidth, textboxStrokeWidth = _j === void 0 ? 1 : _j, _k = _a.textFontFamily, textFontFamily = _k === void 0 ? "Verdana" : _k, _l = _a.annotationGutter, annotationGutter = _l === void 0 ? 2 : _l, _m = _a.annotations, annotations = _m === void 0 ? [] : _m, _o = _a.iconAnnotations, iconAnnotations = _o === void 0 ? [] : _o, cornerRadius = _a.cornerRadius, _p = _a.icon, icon = _p === void 0 ? {} : _p, _q = _a.subText, subText = _q === void 0 ? {} : _q, _r = _a.showLabel, showLabel = _r === void 0 ? true : _r, _s = _a.noLabelRadius, noLabelRadius = _s === void 0 ? 5 : _s, _t = _a.iconBorderWidth, iconBorderWidth = _t === void 0 ? 1 : _t, _u = _a.iconBorderColor, iconBorderColor = _u === void 0 ? "#333" : _u, _v = _a.iconBackgroundColor, iconBackgroundColor = _v === void 0 ? "#fff" : _v, _w = _a.iconFontColor, iconFontColor = _w === void 0 ? "#000" : _w, _x = _a.iconFontSize, iconFontSize = _x === void 0 ? 20 : _x, _y = _a.iconFontFamily, iconFontFamily = _y === void 0 ? "FontAwesome" : _y, _z = _a.shapeOffsetX, shapeOffsetX = _z === void 0 ? 0 : _z, _0 = _a.shapeOffsetY, shapeOffsetY = _0 === void 0 ? 0 : _0, _1 = _a.iconOffsetX, iconOffsetX = _1 === void 0 ? 0 : _1, _2 = _a.iconOffsetY, iconOffsetY = _2 === void 0 ? 0 : _2, _3 = _a.iconPadding, iconPadding = _3 === void 0 ? 4 : _3, _4 = _a.iconText, iconText = _4 === void 0 ? "?" : _4, _5 = _a.shapeRendering, shapeRendering = _5 === void 0 ? "auto" : _5;
+    icon = __assign({ height: 91, padding: 40, imageCharFill: "#555555", imageFontFamily: "FontAwesome", fill: "#FFCC33", stroke: "#DFDFDF", imageChar: "?", strokeWidth: 4, yOffset: -15 }, icon);
+    subText = __assign({ text: "", fill: "transparent", textFill: "#555555" }, subText);
+    var props = {
+        categoryID: categoryID,
+        text: text,
+        textHeight: textHeight,
+        textPadding: textPadding,
+        textFill: textFill,
+        textboxFill: textboxFill,
+        textboxStroke: textboxStroke,
+        textboxStrokeWidth: textboxStrokeWidth,
+        textFontFamily: textFontFamily,
+        annotationGutter: annotationGutter,
+        annotations: annotations,
+        iconAnnotations: iconAnnotations,
+        cornerRadius: cornerRadius,
+        icon: icon,
+        subText: subText,
+        showLabel: showLabel,
+        noLabelRadius: noLabelRadius,
+        iconBorderWidth: iconBorderWidth,
+        iconBorderColor: iconBorderColor,
+        iconBackgroundColor: iconBackgroundColor,
+        iconFontColor: iconFontColor,
+        iconFontSize: iconFontSize,
+        iconFontFamily: iconFontFamily,
+        shapeOffsetX: shapeOffsetX,
+        shapeOffsetY: shapeOffsetY,
+        iconOffsetX: iconOffsetX,
+        iconOffsetY: iconOffsetY,
+        iconPadding: iconPadding,
+        iconText: iconText,
+        shapeRendering: shapeRendering
+    };
+    return v$1(Vertex4, __assign({}, props, { icon: icon, subText: subText }));
+};
+
 var Subgraph = function (_a) {
     var text = _a.text, _b = _a.width, width = _b === void 0 ? 100 : _b, _c = _a.height, height = _c === void 0 ? 100 : _c, _d = _a.fill, fill = _d === void 0 ? "transparent" : _d, _e = _a.stroke, stroke = _e === void 0 ? "black" : _e, _f = _a.fontHeight, fontHeight = _f === void 0 ? 12 : _f, fontFamily = _a.fontFamily;
     var tSize = Utility.textSize(text, fontFamily, fontHeight, false);
@@ -700,5 +812,5 @@ var Subgraph = function (_a) {
             v$1(Text, { height: fontHeight, text: text, fontFamily: fontFamily })));
 };
 
-export { Annotations, BUILD_VERSION$1 as BUILD_VERSION, CentroidVertex3, Circle, Edge, HTMLAdapter, Icon, IconLabelledRect, Icons, ImageChar, LabelledRect, PKG_NAME$1 as PKG_NAME, PKG_VERSION$1 as PKG_VERSION, index_es6 as React, Rectangle, SVGAdapter, Shape, Square, Subgraph, Text, TextBox, TextLine, Vertex, Vertex2, Vertex3, render, svgRender };
+export { Annotations, BUILD_VERSION$1 as BUILD_VERSION, CentroidVertex3, CentroidVertex4, Circle, Edge, HTMLAdapter, Icon, IconLabelledRect, Icons, ImageChar, LabelledRect, PKG_NAME$1 as PKG_NAME, PKG_VERSION$1 as PKG_VERSION, index_es6 as React, Rectangle, SVGAdapter, Shape, Square, Subgraph, Text, TextBox, TextLine, Vertex, Vertex2, Vertex3, Vertex4, render, svgRender };
 //# sourceMappingURL=index.es6.js.map