ssvg.js

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SSVG=t():e.SSVG=t()}(window,(function(){return function(e){var t={};function s(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,s),i.l=!0,i.exports}return s.m=e,s.c=t,s.d=function(e,t,r){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(s.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(r,i,function(t){return e[t]}.bind(null,i));return r},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=4)}([function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});let r=0;t.safeLog=function(...e){r<200&&(r++,console.log(...e))},t.safeErrorLog=function(...e){r<200&&(r++,console.error(...e))}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});class r{static parseTransform(e){const t={translateX:0,translateY:0,scaleX:1,scaleY:1,rotate:0,translateBeforeScale:!1,rotateLast:!1};if(e){if("string"!=typeof e)return t.scaleX=e.k,t.scaleY=e.k,t.translateX=e.x,t.translateY=e.y,t.translateBeforeScale=!0,t;let s=e;s=s.replace(/ /g,"");const r=/\s*translate\(([-0-9.]+),([-0-9.]+)\)/.exec(s);r&&(t.translateX=parseFloat(r[1]),t.translateY=parseFloat(r[2]));const i=/\s*scale\(([-0-9.]+)(,[-0-9.]+)?\)/.exec(s);i&&(t.scaleX=parseFloat(i[1]),t.scaleY=i[2]?parseFloat(i[2].substr(1)):parseFloat(i[1]));const n=/\s*rotate\(([-0-9.]+)\)/.exec(s);n&&(t.rotate=parseFloat(n[1])),/\s*translate\(([-0-9.]+),([-0-9.]+)\)scale\(([-0-9.,]+)\)/.exec(s)&&(t.translateBeforeScale=!0),/\s*rotate\(([-0-9.,]+)\)$/.exec(s)&&(t.rotateLast=!0);const o=/\s*matrix\(([-0-9.]+),([-0-9.]+),([-0-9.]+),([-0-9.]+),([-0-9.]+),([-0-9.]+)\)/.exec(s);o&&(t.scaleX=parseFloat(o[1]),t.scaleY=parseFloat(o[4]),t.translateX=parseFloat(o[5]),t.translateY=parseFloat(o[6]))}return t}static addTransforms(e,t){return{translateX:e.translateX+t.translateX,translateY:e.translateY+t.translateY,scaleX:e.scaleX*t.scaleX,scaleY:e.scaleY*t.scaleY,rotate:e.rotate+t.rotate,translateBeforeScale:!1,rotateLast:!1}}static convertSizeToPx(e,t=!0){const s=t?14:void 0;return void 0===e?s:"number"==typeof e?e:"em"===e.substr(-2)?Math.round(12*parseFloat(e)):"px"===e.substr(-2)?parseInt(e):e.match(/^[0-9]+$/)?parseInt(e):(console.warn("size in unsupported format: ",e),s)}static colorToRgba(e,t=1,s="none"){if("none"===e)return e;e||(e=s);const i=`${e}-${t}`;if(r.rgbaCache[i])return r.rgbaCache[i];if(e=r.CssNamedColorToHex(e),1===t&&"string"==typeof e)return r.rgbaCache[i]=e,e;let n;if("string"==typeof e&&"#"===e[0]){let s;if(!/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))throw new Error("Bad Hex");s=e.substring(1),3==s.length&&(s=s[0]+s[0]+s[1]+s[1]+s[2]+s[2]),s="0x"+s,n="rgba("+[s>>16&255,s>>8&255,255&s].join(",")+","+t+")"}else if("object"==typeof e){if("r"in e)n="rgba("+e.r+","+e.g+","+e.b+","+t+")";else if("h"in e){const s=r.hslToRgb(e.h/360,e.s,e.l);n="rgba("+s.r+","+s.g+","+s.b+","+t+")"}}else"rgb("===e.substr(0,4)&&(n=e.substr(0,e.length-1).replace("rgb","rgba")+", "+t+")");return r.rgbaCache[i]=n,n}static hslToRgb(e,t,s){var r,i,n;if(0==t)r=i=n=s;else{var o=function(e,t,s){return s<0&&(s+=1),s>1&&(s-=1),s<1/6?e+6*(t-e)*s:s<.5?t:s<2/3?e+(t-e)*(2/3-s)*6:e},a=s<.5?s*(1+t):s+t-s*t,l=2*s-a;r=o(l,a,e+1/3),i=o(l,a,e),n=o(l,a,e-1/3)}return{r:Math.round(255*r),g:Math.round(255*i),b:Math.round(255*n)}}static CssNamedColorToHex(e){return"string"==typeof e&&i[e.toUpperCase()]?i[e.toUpperCase()]:e}static getCssRuleSpecificityNumber(e){let t=0;e=e.replace(/ >/g,">").replace(/> /g,">");const s=[].concat.apply([],e.split(" ").map(e=>e.split(">")));for(const e of s){t+=100;const s=e[0];if("#"===s)t+=1e3;else if("."===s){const s=e.split(".").length-1;t+=Math.min(900,100*s)}}return t}}t.DrawingUtils=r,r.rgbaCache={};const i={ALICEBLUE:"#F0F8FF",ANTIQUEWHITE:"#FAEBD7",AQUA:"#00FFFF",AQUAMARINE:"#7FFFD4",AZURE:"#F0FFFF",BEIGE:"#F5F5DC",BISQUE:"#FFE4C4",BLACK:"#000000",BLANCHEDALMOND:"#FFEBCD",BLUE:"#0000FF",BLUEVIOLET:"#8A2BE2",BROWN:"#A52A2A",BURLYWOOD:"#DEB887",CADETBLUE:"#5F9EA0",CHARTREUSE:"#7FFF00",CHOCOLATE:"#D2691E",CORAL:"#FF7F50",CORNFLOWERBLUE:"#6495ED",CORNSILK:"#FFF8DC",CRIMSON:"#DC143C",CYAN:"#00FFFF",DARKBLUE:"#00008B",DARKCYAN:"#008B8B",DARKGOLDENROD:"#B8860B",DARKGRAY:"#A9A9A9",DARKGREY:"#A9A9A9",DARKGREEN:"#006400",DARKKHAKI:"#BDB76B",DARKMAGENTA:"#8B008B",DARKOLIVEGREEN:"#556B2F",DARKORANGE:"#FF8C00",DARKORCHID:"#9932CC",DARKRED:"#8B0000",DARKSALMON:"#E9967A",DARKSEAGREEN:"#8FBC8F",DARKSLATEBLUE:"#483D8B",DARKSLATEGRAY:"#2F4F4F",DARKSLATEGREY:"#2F4F4F",DARKTURQUOISE:"#00CED1",DARKVIOLET:"#9400D3",DEEPPINK:"#FF1493",DEEPSKYBLUE:"#00BFFF",DIMGRAY:"#696969",DIMGREY:"#696969",DODGERBLUE:"#1E90FF",FIREBRICK:"#B22222",FLORALWHITE:"#FFFAF0",FORESTGREEN:"#228B22",FUCHSIA:"#FF00FF",GAINSBORO:"#DCDCDC",GHOSTWHITE:"#F8F8FF",GOLD:"#FFD700",GOLDENROD:"#DAA520",GRAY:"#808080",GREY:"#808080",GREEN:"#008000",GREENYELLOW:"#ADFF2F",HONEYDEW:"#F0FFF0",HOTPINK:"#FF69B4",INDIANRED:"#CD5C5C",INDIGO:"#4B0082",IVORY:"#FFFFF0",KHAKI:"#F0E68C",LAVENDER:"#E6E6FA",LAVENDERBLUSH:"#FFF0F5",LAWNGREEN:"#7CFC00",LEMONCHIFFON:"#FFFACD",LIGHTBLUE:"#ADD8E6",LIGHTCORAL:"#F08080",LIGHTCYAN:"#E0FFFF",LIGHTGOLDENRODYELLOW:"#FAFAD2",LIGHTGRAY:"#D3D3D3",LIGHTGREY:"#D3D3D3",LIGHTGREEN:"#90EE90",LIGHTPINK:"#FFB6C1",LIGHTSALMON:"#FFA07A",LIGHTSEAGREEN:"#20B2AA",LIGHTSKYBLUE:"#87CEFA",LIGHTSLATEGRAY:"#778899",LIGHTSLATEGREY:"#778899",LIGHTSTEELBLUE:"#B0C4DE",LIGHTYELLOW:"#FFFFE0",LIME:"#00FF00",LIMEGREEN:"#32CD32",LINEN:"#FAF0E6",MAGENTA:"#FF00FF",MAROON:"#800000",MEDIUMAQUAMARINE:"#66CDAA",MEDIUMBLUE:"#0000CD",MEDIUMORCHID:"#BA55D3",MEDIUMPURPLE:"#9370DB",MEDIUMSEAGREEN:"#3CB371",MEDIUMSLATEBLUE:"#7B68EE",MEDIUMSPRINGGREEN:"#00FA9A",MEDIUMTURQUOISE:"#48D1CC",MEDIUMVIOLETRED:"#C71585",MIDNIGHTBLUE:"#191970",MINTCREAM:"#F5FFFA",MISTYROSE:"#FFE4E1",MOCCASIN:"#FFE4B5",NAVAJOWHITE:"#FFDEAD",NAVY:"#000080",OLDLACE:"#FDF5E6",OLIVE:"#808000",OLIVEDRAB:"#6B8E23",ORANGE:"#FFA500",ORANGERED:"#FF4500",ORCHID:"#DA70D6",PALEGOLDENROD:"#EEE8AA",PALEGREEN:"#98FB98",PALETURQUOISE:"#AFEEEE",PALEVIOLETRED:"#DB7093",PAPAYAWHIP:"#FFEFD5",PEACHPUFF:"#FFDAB9",PERU:"#CD853F",PINK:"#FFC0CB",PLUM:"#DDA0DD",POWDERBLUE:"#B0E0E6",PURPLE:"#800080",REBECCAPURPLE:"#663399",RED:"#FF0000",ROSYBROWN:"#BC8F8F",ROYALBLUE:"#4169E1",SADDLEBROWN:"#8B4513",SALMON:"#FA8072",SANDYBROWN:"#F4A460",SEAGREEN:"#2E8B57",SEASHELL:"#FFF5EE",SIENNA:"#A0522D",SILVER:"#C0C0C0",SKYBLUE:"#87CEEB",SLATEBLUE:"#6A5ACD",SLATEGRAY:"#708090",SLATEGREY:"#708090",SNOW:"#FFFAFA",SPRINGGREEN:"#00FF7F",STEELBLUE:"#4682B4",TAN:"#D2B48C",TEAL:"#008080",THISTLE:"#D8BFD8",TOMATO:"#FF6347",TURQUOISE:"#40E0D0",VIOLET:"#EE82EE",WHEAT:"#F5DEB3",WHITE:"#FFFFFF",WHITESMOKE:"#F5F5F5",YELLOW:"#FFFF00",YELLOWGREEN:"#9ACD32"}},function(e,t){},function(e,t,s){"use strict";var r=window.URL||window.webkitURL;e.exports=function(e,t){try{try{var s;try{(s=new(window.BlobBuilder||window.WebKitBlobBuilder||window.MozBlobBuilder||window.MSBlobBuilder)).append(e),s=s.getBlob()}catch(t){s=new Blob([e])}return new Worker(r.createObjectURL(s))}catch(t){return new Worker("data:application/javascript,"+encodeURIComponent(e))}}catch(e){if(!t)throw Error("Inline worker is not supported");return new Worker(t)}}},function(e,t,s){"use strict";const r=(this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}})(s(5));e.exports=r.default},function(e,t,s){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const i=s(6),n=s(9),o=r(s(10)),a=r(s(12)),l=s(14),h=s(15);t.default=class{constructor(e){if(this.svgAssignedAndSizeSet=!1,this.lastCanvasDrawTimes=[],this.enterExitQueue=[],this.safeMode=!1,this.useWorker=!0,this.getFps=()=>{},e&&(void 0!==e.safeMode&&(this.safeMode=e.safeMode),this.maxPixelRatio=e.maxPixelRatio,void 0!==e.useWorker&&(this.useWorker=e.useWorker),void 0!==e.getFps&&(this.getFps=e.getFps)),this.canvas=document.createElement("canvas"),"OffscreenCanvas"in window||(this.useWorker=!1),this.useWorker){this.worker=new o.default,this.syncWorker=new a.default,this.worker.onmessage=e=>{e.data&&e.data.msg&&"DRAWN"===e.data.msg&&this.logDrawn()};const e=()=>{this.updateFps(),this.updateCanvas(),requestAnimationFrame(e)};e()}else{const e=()=>{this.updateFps(),this.logDrawn(),this.updateCanvas(),requestAnimationFrame(e)};e()}this.domHandler=new i.Domhandler(this.useWorker,this.useWorker),this.vdom=this.domHandler.getVDom(),this.interactions=new l.Interactionhandler,this.redirector=new h.Redirector(this.domHandler,this.vdom,this.interactions,this.setCanvasSize.bind(this),this.addNode.bind(this),this.removeNode.bind(this),()=>this.svgAssignedAndSizeSet,this.setupElementsIfSvgExists.bind(this));const t=e&&e.svg?e.svg:void 0;this.setupElementsIfSvgExists(t),setTimeout(()=>{console.log(this.vdom.data)},1e3)}setupElementsIfSvgExists(e){if(this.svg)return!0;const t=e||document.getElementsByTagName("svg")[0];if(!t)return!1;const s=-1===document.location.href.indexOf("?")?"?":"&",r=document.location.href+s+"svg",i=document.createComment(" This project uses SSVG.io to render a SVG as Canvas.\r\nTo inspect the SVG, please open the following URL:\r\n"+r+"\r\n");this.svg=t;const n=this.svg.parentElement;if(this.svg.nextSibling){const e=this.svg.nextSibling;n.insertBefore(i,e),n.insertBefore(this.canvas,e)}else n.appendChild(i),n.appendChild(this.canvas);return this.domHandler.initialize(this.svg),this.redirector.initialize(this.svg),this.interactions.initialize(this.canvas,this.svg,this.domHandler,this.vdom),this.setCanvasSize(),!0}updateCanvas(){if(!this.svgAssignedAndSizeSet)return;if(!this.vdom.hasChanges()&&!this.domHandler.hasChanges())return;const e=this.useWorker?void 0:(e,t)=>this.renderer.nodeUpdated(e,t);this.domHandler.applyStyles(),this.vdom.transferBufferQueueDataToSynced();const t=this.vdom.getQueue();this.vdom.clearQueue(),this.vdom.updatePropertiesFromQueue(t,e),this.useWorker?this.sendUpdateToWorker(t):(this.renderer.updatePropertiesFromQueue&&this.renderer.updatePropertiesFromQueue(t),this.renderer.draw())}setCanvasSize(){if(this.svg&&this.vdom.data.width&&this.vdom.data.height){if(this.vdom.data.scale=window.devicePixelRatio,void 0!==this.maxPixelRatio&&this.vdom.data.scale>this.maxPixelRatio&&(this.vdom.data.scale=this.maxPixelRatio),this.canvas.style.width=this.vdom.data.width+"px",this.canvas.style.height=this.vdom.data.height+"px",this.canvas.width=this.vdom.data.width*this.vdom.data.scale,this.canvas.height=this.vdom.data.height*this.vdom.data.scale,this.useWorker){const e=this.canvas.transferControlToOffscreen(),t=new MessageChannel;this.worker.postMessage({cmd:"INIT",data:{canvas:e,visData:this.vdom.data,safeMode:this.safeMode,port:t.port2}},[e,t.port2]),this.syncWorker.postMessage({cmd:"INIT",data:{visData:this.vdom.data,safeMode:this.safeMode,port:t.port1}},[t.port1]),this.vdom.ensureNodesMapped()}else this.renderer=new n.Canvasrenderer(this.vdom,this.canvas,this.safeMode,()=>{});this.svgAssignedAndSizeSet=!0}}addNode(e,t,s){this.useWorker?this.enterExitQueue.push({cmd:"ENTER",node:e,parentGlobalIndex:t.globalElementIndex,keepChildren:s}):this.renderer.addNode&&this.renderer.addNode(e)}removeNode(e,t){this.enterExitQueue.push({cmd:"EXIT",childGlobalIndex:e.globalElementIndex,parentGlobalIndex:t.globalElementIndex})}logDrawn(){this.lastCanvasDrawTimes.push(Date.now()),this.lastCanvasDrawTimes.length>20&&this.lastCanvasDrawTimes.shift()}updateFps(){if(this.lastCanvasDrawTimes.length){const e=Date.now()-this.lastCanvasDrawTimes[0],t=Math.round(this.lastCanvasDrawTimes.length/e*1e3);this.getFps(t)}}sendUpdateToWorker(e){const t={cmd:"UPDATE_NODES",data:{enterExit:this.enterExitQueue,update:e}};this.syncWorker.postMessage(t),this.enterExitQueue=[]}}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=s(7),i=s(1),n=s(8),o=s(0);t.Domhandler=class{constructor(e,t){this.ignoreDesign=t,this.nodes={},this.elements={},this.nodesToRestyle=[],this.maxGlobalElementIndex=0,this.removedNodeIndices=[];this.vdom=new r.VdomManager({type:"svg",width:0,height:0,scale:1,children:[],globalElementIndex:0,style:{},css:{}},t,!1)}initialize(e){this.svg=e,this.vdom.data.width=parseInt(this.svg.getAttribute("width")),this.vdom.data.height=parseInt(this.svg.getAttribute("height")),this.linkNodeToElement(this.vdom.data,this.svg),this.svg.style.display="none",this.svg.selector="svg",this.addChildNodesToVisData(this.svg.childNodes,this.vdom.data)}hasChanges(){return this.nodesToRestyle.length>0}enableFrontendDesignProperties(){this.ignoreDesign=!1,this.vdom.enableFrontendDesignProperties()}getVDom(){return this.vdom}queueSetAttributeOnElement(e,t,s){this.vdom.ensureInitialized(t,!1);const r=this.getNodeFromElement(e),i=this.getNodeFromElement(e.parentNode).children.map(e=>e.globalElementIndex).indexOf(r.globalElementIndex),n="function"==typeof s?s.call(e,e.__data__,i):s;if(r){if(this.vdom.ensureInitialized(t,!0,this.maxGlobalElementIndex),this.vdom.set(r,t,n),"href"===t&&o.safeLog("href not yet supported."),"class"===t||-1!==t.indexOf("style"))if("class"===t)r.className=n,this.nodesToRestyle.push(r);else{const e=t.substr(6);r.style||console.error("no styles on node ",r),r.style[e]=n}}else console.error("node not found for ",e)}queueSetAttributeOnSelection(e,t,s){if(e.length&&e[0]){this.vdom.ensureInitialized(t,!0,this.maxGlobalElementIndex);for(let r=0;r<e.length;r++){const i=e[r],n="function"==typeof s?s(i.__data__,r):s;this.vdom.set(i,t,n)}if("className"===t||-1!==t.indexOf("style"))for(let r=0;r<e.length;r++){const i=e[r],n=this.getNodeFromElement(i),o="function"==typeof s?s(i.__data__,r):s;if("className"===t)n.className=o,this.nodesToRestyle.push(n);else{const e=t.substr(6);n.style[e]=o}}}}getAttributeFromSelector(e,t){const s=this.getNodeFromElement(e);if(!s)throw console.error("trying to get attribute for unfit selection",e,e.globalElementIndex,t),Error("element not found");return s[t]}getVisNode(e){return e===this.svg?this.vdom.data:this.vdom.getNodeFromIndex(e.globalElementIndex)}getNodeDataFromEl(e){const t=e.tagName.toLowerCase(),s={type:t,className:e.getAttribute("class"),transform:e.getAttribute("transform"),id:e.getAttribute("id"),style:{},css:{},children:[],globalElementIndex:-1,text:!e.childNodes||1===e.childNodes.length&&!e.childNodes[0].tagName?e.textContent:void 0};for(const r of n.RELEVANT_ATTRS[t])if(e.hasAttribute(r)){const t=e.getAttribute(r);s[r]=n.ROUNDED_ATTRS[r]?parseFloat(t):t}return this.copyStylesFromElement(e,s),s}copyStylesFromElement(e,t){for(const s of n.CSS_STYLES)if(e.style.hasOwnProperty(s)){if(e.style[s]&&"function"!=typeof e.style[s]){const r=s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();t.style[r]=e.style[s]}}}applyStyles(){if(this.nodesToRestyle&&this.nodesToRestyle.length){for(let e=0;e<document.styleSheets.length;e++){const t=document.styleSheets[e],s=t.rules?t.rules:t.cssRules;for(let e=0;e<s.length;e++){const t=s[e],r=t.selectorText;r&&this.applyRuleToMatchingNodes(r,t)}}this.nodesToRestyle=[]}}applyRuleToMatchingNodes(e,t){const s=(e=e.trim()).replace(" >",">").replace("> ",">").replace("svg>","").split(" ").map(e=>e.split(">")),i=this.nodesToRestyle.map(e=>e.globalElementIndex);for(const e of this.nodesToRestyle)if(e){let t=this.getNodeParent(e);for(;t&&-1===i.indexOf(t.globalElementIndex);)i.push(t.globalElementIndex),t=this.getNodeParent(t)}const o={};for(const e of i)o[e]=!0;const a=(t,s,r)=>{if(s.style[t]){const i=`css;${e};${t}`;this.vdom.ensureInitialized(i),this.vdom.set(r,i,s.style[t])}},l=(i,h=0,d=0)=>{const c=s[h][d];for(let u=0;u<i.children.length;u++){const f=i.children[u];if(!o[f.globalElementIndex])continue;if(r.VdomManager.isCssRulePartialMatch(c,f,i)){if(s[h].length>d+1)l(f,h,d+1);else if(s.length>h+1)l(f,h+1,d);else if(!f.css[e])for(const e of n.CSS_STYLES)a(e,t,f)}else{if(f.removedClasses){for(const t of f.removedClasses){f.className+=" "+t,r.VdomManager.isCssRulePartialMatch(c,f,i)&&this.removeRuleStylesFromNode(e,f),f.className=f.className.substr(0,f.className.length-t.length-1)}setTimeout(()=>{delete f.removedClasses})}l(f,h,d)}}return!1};return l(this.vdom.data)}removeRuleStylesFromNode(e,t){t.css[e]&&(this.vdom.ensureInitialized(`css;${e};*`),this.vdom.set(t,`css;${e};*`,""))}removeNode(e,t,s){this.vdom.removeNode(t,s),this.nodes[t.globalElementIndex]=null,this.elements[e.globalElementIndex]=null;const r=this.nodesToRestyle.indexOf(t);-1!==r&&this.nodesToRestyle.splice(r,1),this.removedNodeIndices.push(e.globalElementIndex)}restyleNode(e){if(!this.nodes[e.globalElementIndex]||this.nodes[e.globalElementIndex]!==e)throw console.error(e),new Error("restyling incorrect node");this.nodesToRestyle.push(e)}addChildNodesToVisData(e,t){for(let s=0;s<e.length;s++){let r=e[s];try{const e=this.getNodeDataFromEl(r);t.children.push(e),this.linkNodeToElement(e,r),this.nodesToRestyle.push(e),r.childNodes&&this.addChildNodesToVisData(r.childNodes,e),e.type,e.type}catch(e){}}}combineElementSelectors(e,t,s){return e+" > "+t+":nth-child("+s+")"}getNodeParent(e){if(e===this.vdom.data)return null;const t=this.getElementFromNode(e);if(!t)return console.error("can not find element for node ",e),null;const s=t.parentNode;return this.getNodeFromElement(s)}getNewElementIndex(){return this.removedNodeIndices.length?this.removedNodeIndices.shift():(this.maxGlobalElementIndex++,this.maxGlobalElementIndex-1)}linkNodeToElement(e,t){const s=this.getNewElementIndex();e.globalElementIndex=s,t.globalElementIndex=s,this.nodes[s]=e,this.elements[s]=t,this.vdom.addNode(e)}getElementFromNode(e){return e===this.vdom.data?this.svg:this.elements[e.globalElementIndex]}getNodeFromElement(e){return e===this.svg?this.vdom.data:this.vdom.getNodeFromIndex(e.globalElementIndex)}isWithinSvg(e){let t=!1,s=e;for(;s&&s.parentNode;)s===this.svg&&(t=!0),s=s.parentNode;return t}getParentNode(e){const t=this.getElementFromNode(e).parentNode;return this.getNodeFromElement(t)}getTotalTransformation(e){let t=this.getParentNode(e);const s=[e];for(;t;)s.push(t),t=this.getParentNode(t);t=s.pop();let r={translateX:0,translateY:0,scaleX:0,scaleY:0,rotate:0,translateBeforeScale:!1,rotateLast:!1};for(;t;){const e=i.DrawingUtils.parseTransform(t.transform);r=i.DrawingUtils.addTransforms(r,e),t=s.pop()}return r}}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=s(0);class i{constructor(e,t,s){this.data=e,this.ignoreDesign=t,this.isRenderer=s,this.sharedRenderData={values:{},buffers:{}},this.syncedSharedData={values:{},buffers:{}},this.sharedDataQueue={values:{},buffers:{}},this.queue={},this.useSharedArrayFor=["cx","cy","x1","x2","y1","y2","x","y"],this.indexToNodeMap={},this.changed=!1,this.cachedListSelections={},this.ensureNodesMapped(),"SharedArrayBuffer"in self||(this.useSharedArrayFor=[])}ensureInitialized(e,t=!0,s){if("class"===e&&(e="className"),t&&-1!==this.useSharedArrayFor.indexOf(e)){const t=s<500?1e3:Math.round(2*s);if(this.sharedDataQueue.values[e]){const s=Int32Array.BYTES_PER_ELEMENT*t;if(this.sharedDataQueue.values[e].byteLength/s<.6){const{buffer:s,values:r}=this.createBufferTransferValues(t,this.sharedDataQueue.values[e]);this.sharedDataQueue.values[e]=r,this.sharedDataQueue.buffers[e]=s}}else{let s;!this.queue[e]||this.queue[e]instanceof SharedArrayBuffer||(s=this.queue[e]);const{buffer:r,values:i}=this.createBufferTransferValues(t,void 0,s);this.sharedDataQueue.values[e]=i,this.sharedDataQueue.buffers[e]=r,this.queue[e]=r}}else this.queue[e]||(this.queue[e]={})}createBufferTransferValues(e,t,s){let r=new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT*e);const n=new Int32Array(r);if(s)for(const e in s)if(s.hasOwnProperty(e)){let t=s[e];"string"==typeof t&&(t=parseFloat(t)),n[e]=t*i.BUFFER_PRECISION_FACTOR}if(t)for(let e=0;e<t.length;e++)t[e]&&(n[e]=t[e]);return{buffer:r,values:n}}set(e,t,s,r=!0){if("class"===t&&(t="className"),void 0===e.globalElementIndex)throw console.error("No index",e),new Error("Element has no index");const n=e.globalElementIndex,o=r&&-1!==this.useSharedArrayFor.indexOf(t)?"shared":"raw";try{this.changed=!0,"shared"===o?("string"==typeof s&&(s=parseFloat(s)),s*=i.BUFFER_PRECISION_FACTOR,0===(s=Math.round(s))&&(s=56938516),this.sharedDataQueue.values[t][n]=s):(this.queue[t][n]=s,this.sharedDataQueue.values[t]&&this.syncedSharedData.values[t]&&this.syncedSharedData.values[t][n]&&(this.sharedDataQueue.values[t][n]=0))}catch(s){console.error(s),console.log(this.queue,this.syncedSharedData.values,o,t,e,n)}}removePendingChanges(e){const t=e.globalElementIndex;for(const e in this.queue)this.queue.hasOwnProperty(e)&&delete this.queue[e][t];for(const e in this.sharedDataQueue.values)this.sharedDataQueue.values.hasOwnProperty(e)&&(this.sharedDataQueue.values[e][t]=0)}ensureNodesMapped(){const e=t=>{void 0===t.globalElementIndex&&console.error("no element index",t),this.indexToNodeMap[t.globalElementIndex]=t;for(const s of t.children)e(s)};e(this.data)}enableFrontendDesignProperties(){this.ignoreDesign=!1}addNodeToParent(e,t){if("svg"!==e.type){const s=this.getNodeFromIndex(t);if(!s)return console.error("could not add node without parent",t,e,Object.keys(this.indexToNodeMap)),void new Error("parent not found");s.children.push(e)}}addNode(e){this.indexToNodeMap[e.globalElementIndex]=e}removeNode(e,t){delete this.indexToNodeMap[e.globalElementIndex];const s=t.children.indexOf(e);t.children.splice(s,1),this.cachedListSelections={},this.removePendingChanges(e)}applyStyleToNodeAndChildren(e,t,s,r){if(e.style[t]=s,r(e,t),e.children)for(let i of e.children)this.applyStyleToNodeAndChildren(i,t,s,r)}applyCssToNodeAndChildren(e,t,s,r,i){if("*"!==s||r?(e.css[t]||(e.css[t]={}),e.css[t][s]=r):delete e.css[t],i(e,s),e.children)for(let n of e.children)this.applyCssToNodeAndChildren(n,t,s,r,i)}getNodeFromIndex(e){return this.indexToNodeMap[e]}getNodeById(e){const t=Object.values(this.indexToNodeMap).filter(t=>t.id===e);return(!t||t.length>1)&&(r.safeLog("multiple nodes with this id!",Object.values(this.indexToNodeMap).filter(e=>e.id).map(e=>e.id),e),r.safeLog(t.length,t)),t&&1===t.length?t[0]:null}get(e,t){return Array.isArray(t)?t.map(t=>this.getSingle(e,t)):this.getSingle(e,t)}getSingle(e,t){const s=this.isRenderer?this.sharedRenderData.values:this.syncedSharedData.values;if(s[t]&&s[t][e.globalElementIndex]){const r=s[t][e.globalElementIndex];return 56938516===r?0:r/i.BUFFER_PRECISION_FACTOR}return e[t]}hasChanges(){return this.changed}getQueue(){return this.queue}clearQueue(){this.queue={},this.changed=!1}transferSyncedDataToRenderData(){for(let e in this.syncedSharedData.values){this.queue[e]=this.syncedSharedData.buffers[e],this.sharedRenderData.values[e]=this.syncedSharedData.values[e];const t=this.syncedSharedData.buffers[e].byteLength/Int32Array.BYTES_PER_ELEMENT,{buffer:s,values:r}=this.createBufferTransferValues(t,this.syncedSharedData.values[e]);this.syncedSharedData.buffers[e]=s,this.syncedSharedData.values[e]=r}}transferBufferQueueDataToSynced(){for(let e in this.sharedDataQueue.values){this.queue[e]=this.sharedDataQueue.buffers[e],this.syncedSharedData.values[e]=this.sharedDataQueue.values[e];const t=this.sharedDataQueue.buffers[e].byteLength/Int32Array.BYTES_PER_ELEMENT,{buffer:s,values:r}=this.createBufferTransferValues(t,this.sharedDataQueue.values[e]);this.sharedDataQueue.buffers[e]=s,this.sharedDataQueue.values[e]=r}}addToQueue(e){for(let t in e)if(e.hasOwnProperty(t))if("SharedArrayBuffer"in self&&e[t]instanceof SharedArrayBuffer){const s=e[t];this.syncedSharedData.buffers[t]=s,this.syncedSharedData.values[t]=new Int32Array(s)}else{const s=e[t];this.queue[t]||(this.queue[t]={});for(let e in s){if(!s.hasOwnProperty(e))continue;const r=parseInt(e);this.queue[t][r]=s[r]}}}updatePropertiesFromQueue(e,t=(()=>{})){for(let s in e){if(!e.hasOwnProperty(s))continue;const r=s.substr(0,"style;".length);if(this.ignoreDesign&&("style;"===r||-1!==i.IGNOREDESIGN_ATTRIBUTES.indexOf(s)))continue;let n;if("SharedArrayBuffer"in self&&e[s]instanceof SharedArrayBuffer){const t=e[s];this.isRenderer?(this.sharedRenderData.buffers[s]=t,this.sharedRenderData.values[s]=new Int32Array(t)):(this.syncedSharedData.buffers[s]=t,this.syncedSharedData.values[s]=new Int32Array(t))}else{n=e[s];for(let e in n){if(!n.hasOwnProperty(e))continue;const o=parseInt(e),a=this.getNodeFromIndex(o);if(!a){console.error("node not found at index",o);continue}let l=n[e];if("style;"===r){const e=s.substr("style;".length);this.applyStyleToNodeAndChildren(a,e,l,t)}else if("css;"===s.substr(0,4)){const[e,r]=s.substr(4).split(";");this.applyCssToNodeAndChildren(a,e,r,l,t)}else-1!==i.ROUNDED_ATTRS.indexOf(s)&&("string"==typeof l&&(l=parseFloat(l)),l=Math.round(l)),a[s]=l,t(a,s)}}}}getVisNodeFromSelector(e){const t=e.lastIndexOf(">"),s=e.substr(0,t),r=e.substr(t+1),i=s?this.cachedListSelections[s]:null;let n=-1;const o=r.indexOf(":nth-child(");if(-1!==o&&(n=parseInt(r.substr(o+11)),i&&i[n]))return i[n];const a=[];if(this.findMatchingChildren(this.data,e,0,a),a&&1===a.length){const e=a[0];return-1!==n&&(this.cachedListSelections[s]||(this.cachedListSelections[s]={}),this.cachedListSelections[s][n]=e),e}return null}getVisNodesFromSelector(e,t){const s=[];return this.findMatchingChildren(e,t,0,s),s}findChildrenOfType(e,t,s){const r=e=>{for(const i of e.children)i.type===t&&s.push(i),0!==e.children.length&&r(i)};r(e)}filterNodesBySelector(e,t,s){return t.filter(t=>i.isCssRulePartialMatch(s,t,e))}findMatchingChildren(e,t,s,r,n=[]){if(!t&&""!==t)throw console.error(e,t,s,r,n),Error("undefined selector");let o=t.split(">").map(e=>e.trim()),a=o[s];if(0===s&&"svg"===a&&(a=o[++s],s===o.length))return r.push(e),void n.push(t);if(t.match(/^[a-z]+$/))return this.findChildrenOfType(e,t,r);for(let l=0;l<e.children.length;l++){let h=e.children[l],d=!1;i.isCssRulePartialMatch(a,h,e)&&(s===o.length-1?(r.push(h),n.push(t)):d=!0),h.children&&(d||o.length<2)&&s+1<o.length&&this.findMatchingChildren(h,t,s+1,r,n)}}static isCssRulePartialMatch(e,t,s){if(":not("===e.substr(0,5)){const r=e.substr(0,e.length-1).substr(5);return!i.isCssRulePartialMatch(r,t,s)}if("."===e[0]){const s=e.split(".");if(s.shift(),t.className){let e=!0;for(const r of s)-1===t.className.split(" ").indexOf(r)&&(e=!1);return e}}else if("#"===e[0]){if(e.substr(1)===t.id)return!0}else if(e.match(/^[a-z]+$/)){if(e===t.type)return!0}else{if(-1!==e.indexOf(":nth-child(")){let r="any",i=e;":"!==e[0]&&(r=e.substr(0,e.indexOf(":")),i=e.substr(e.indexOf(":")));const n=parseInt(i.substr(":nth-child(".length));return s.children.indexOf(t)===n-1&&("any"===r||t.type===r)}if(-1!==e.indexOf(".")){const s=e.indexOf("."),r=e.substr(0,s),i=e.substr(s+1);if(r===t.type&&t.className&&-1!==t.className.split(" ").indexOf(i))return!0}}return!1}}t.VdomManager=i,i.IGNOREDESIGN_ATTRIBUTES=["fill","stroke","opacity"],i.BUFFER_PRECISION_FACTOR=10,i.ROUNDED_ATTRS=["cx","cy"]},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.CSS_STYLES=["stroke","stroke-opacity","stroke-width","stroke-linejoin","fill","fill-opacity","font","opacity","font-family","font-size"],t.RELEVANT_ATTRS={svg:["fill","opacity","fill-opacity","stroke","stroke-opacity","stroke-width","font-size","font","font-family","text-anchor"],g:["fill","opacity","fill-opacity","stroke","stroke-opacity","stroke-width","font-size","font","font-family","text-anchor","clip-path"],rect:["fill","opacity","fill-opacity","stroke","stroke-opacity","stroke-width","x","y","width","height","clip-path"],circle:["fill","opacity","fill-opacity","stroke","stroke-opacity","stroke-width","cx","cy","r","clip-path"],path:["fill","opacity","fill-opacity","stroke","stroke-opacity","stroke-width","d","clip-path"],title:[],tspan:["dx","dy"],text:["fill","opacity","fill-opacity","stroke","stroke-opacity","stroke-width","font-size","font","font-family","text-anchor","href","x","y","dx","dy"],image:["opacity","x","y","width","height"],clippath:["id","fill","opacity","fill-opacity","stroke","stroke-opacity","stroke-width"],line:["opacity","stroke","stroke-opacity","stroke-width","x1","x2","y1","y2","clip-path"]};const r=["cx","cy","r","x","y","x1","x2","y1","y2","width","height","stroke-width"];t.ROUNDED_ATTRS={};for(const e of r)t.ROUNDED_ATTRS[e]=!0},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=s(1),i=s(0);t.Canvasrenderer=class{constructor(e,t,s=!1,r=(()=>{})){this.vdom=e,this.canvas=t,this.forceSingle=s,this.onDrawn=r,this.parentValues={},this.lastFullSecond=0,this.countSinceLastFullSecond=0,this.circlesByColor={},this.rectsByColor={},this.drawTexts=[],this.drawImages=[],this.linesByColor={};const i=t.getContext("2d");if(!i)throw new Error("could not create canvas context");this.ctx=i,this.ctx.scale(this.vdom.data.scale,this.vdom.data.scale),this.ctx.save(),this.draw(),setTimeout(()=>{console.log(this.forceSingle,this.vdom.data)},1e3)}draw(){const e=this.ctx;e.restore(),e.save(),e.clearRect(0,0,this.vdom.data.width,this.vdom.data.height),this.drawLine(null,"start"),this.drawCircle(null,"start"),this.drawRect(null,"start"),this.drawText(null,"start"),this.drawImage(null,"start"),this.drawNodeAndChildren(this.vdom.data,this.forceSingle),this.drawLine(null,"end"),this.drawCircle(null,"end"),this.drawRect(null,"end"),this.drawText(null,"end"),this.drawImage(null,"end"),this.onDrawn();const t=Math.round(performance.now()/1e3);t!==this.lastFullSecond&&(this.lastFullSecond=t,this.countSinceLastFullSecond=0),this.countSinceLastFullSecond++}drawNodeAndChildren(e,t,s){if("clippath"===e.type&&!s)return;const r=this.ctx,n=Object.assign({},this.parentValues),o=!s&&(e.children.length||e.transform);if(o&&r.save(),this.applyTransform(e.transform),(e.transform||s)&&(t=!0),e["clip-path"])if("url(#"===e["clip-path"].substr(0,5)){const s=e["clip-path"].substr(5,e["clip-path"].length-6),i=this.vdom.getNodeById(s);if(t=!0,i){const e=new Path2D;this.drawNodeAndChildren(i,t,e),r.clip(e)}else;}else i.safeErrorLog("clip path format not supported:",e["clip-path"]);if(e.style.display&&"none"===e.style.display||(t?this.drawSingleNode(e,"forcesingle",s):this.drawSingleNode(e,"normal",s)),e.children){this.parentValues.fill=e.fill||this.parentValues.fill,this.parentValues["style;fill"]=e.style.fill||this.parentValues["style;fill"],this.parentValues.stroke=e.stroke||this.parentValues.stroke,this.parentValues["style;stroke"]=e.style.stroke||this.parentValues["style;stroke"],this.parentValues.opacity=e.opacity||this.parentValues.opacity;for(let r=0;r<e.children.length;r++)this.drawNodeAndChildren(e.children[r],t,s)}o&&r.restore(),this.parentValues=n}drawSingleNode(e,t="normal",s){const r=e.type,i=this["draw"+r.substr(0,1).toUpperCase()+r.substr(1)];if(!i)return console.error("no draw function yet for ",r);i.call(this,e,t,s)}drawClippath(e){}drawSvg(){}drawTitle(){}drawG(){}drawCircle(e,t="normal",s){if("normal"===t){const t=this.getFillStyle(e,"#000")+";"+this.getStrokeStyle(e);this.circlesByColor[t]||(this.circlesByColor[t]=[]),this.circlesByColor[t].push(e)}if("start"!==t){if("end"!==t){if("forcesingle"===t){let t=this.getFillStyle(e,"#000");const r=this.getStrokeStyle(e),i=this.vdom.get(e,"cx")||0,n=this.vdom.get(e,"cy")||0;this.ctx.beginPath(),this.ctx.fillStyle=t,this.ctx.strokeStyle=r,this.ctx.lineWidth=this.getStrokeWidth(e),this.ctx.moveTo(i+e.r,n),(s||this.ctx).arc(i,n,e.r,0,2*Math.PI),"none"===t||s||this.ctx.fill(),r&&"none"!==r&&!s&&this.ctx.stroke()}}else for(let e in this.circlesByColor)if(this.circlesByColor.hasOwnProperty(e)){const t=e.split(";"),s=t[0],r=t[1];this.ctx.fillStyle=s;let i=this.circlesByColor[e][0];const n=this.getStrokeWidth(i);this.ctx.lineWidth=void 0!==n?n:1,this.ctx.strokeStyle=r,this.ctx.beginPath();for(let t of this.circlesByColor[e]){const e=Math.round(this.vdom.get(t,"cx"))||0,s=Math.round(this.vdom.get(t,"cy"))||0,r=Math.round(this.vdom.get(t,"r"));this.ctx.save(),this.applyTransform(t.transform),this.ctx.moveTo(e+r,s),this.ctx.arc(e,s,r,0,2*Math.PI),this.ctx.restore()}"none"!==s&&this.ctx.fill(),r&&"none"!==r&&this.ctx.stroke()}}else this.circlesByColor={}}nodeUpdated(e,t){("*"===t||t.includes("fill")||t.includes("opacity"))&&delete e["fill-cache"],("*"===t||t.includes("stroke")||t.includes("opacity"))&&(delete e["stroke-cache"],delete e["strokewidth-cache"])}getFillStyle(e,t="none"){if("fill-cache"in e)return e["fill-cache"];let s=this.getAttributeStyleCss(e,"fill"),i=this.getAttributeStyleCss(e,"opacity")||1;i*=this.getAttributeStyleCss(e,"fill-opacity")||1;let n="";return this.parentValues.fill&&(n=this.parentValues.fill),this.parentValues["style;fill"]&&(n=this.parentValues["style;fill"]),this.parentValues.fill||this.parentValues["style;fill"]||(n=t),s=r.DrawingUtils.colorToRgba(s,i,n),e["fill-cache"]=s,s}getAttributeStyleCss(e,t){if(e.style[t])return e.style[t];{if(this.parentValues[`style;${t}`])return this.parentValues[`style;${t}`];let s=e[t],i=-1;for(const n in e.css)if(e.css[n][t]){const o=r.DrawingUtils.getCssRuleSpecificityNumber(n);o>i&&(s=e.css[n][t],i=o)}return s}}getStrokeStyle(e,t="none"){if("stroke-cache"in e)return e["stroke-cache"];const s=this.getAttributeStyleCss(e,"stroke");let i=this.getAttributeStyleCss(e,"opacity")||1;i*=this.getAttributeStyleCss(e,"stroke-opacity")||1;let n="";return n=this.parentValues.stroke?this.parentValues.stroke:t,e["stroke-cache"]=void 0!==s?r.DrawingUtils.colorToRgba(s,i):n,e["stroke-cache"]}getStrokeWidth(e){if("strokewidth-cache"in e)return e["strokewidth-cache"];const t=this.getAttributeStyleCss(e,"stroke-width");return e["strokewidth-cache"]=void 0===t?void 0:parseFloat(t),e["strokewidth-cache"]}drawRect(e,t="normal",s){if("normal"===t){const t=this.getFillStyle(e,"#000")+";"+this.getStrokeStyle(e);this.rectsByColor[t]||(this.rectsByColor[t]=[]),this.rectsByColor[t].push(e)}if("start"!==t){if("end"!==t){if("forcesingle"===t){let t=this.getFillStyle(e,"#000");const r=this.getStrokeStyle(e),i=this.vdom.get(e,"x")||0,n=this.vdom.get(e,"y")||0;t&&"none"!==t&&!s&&(this.ctx.fillStyle=t,this.ctx.fillRect(i,n,e.width,e.height)),s&&s.rect(i,n,e.width,e.height),"none"===r||s||(this.ctx.strokeStyle=r,this.ctx.beginPath(),this.ctx.rect(i,n,e.width,e.height),this.ctx.stroke())}}else for(let e in this.rectsByColor)if(this.rectsByColor.hasOwnProperty(e)){const t=e.split(";"),s=t[0],r=t[1];this.ctx.fillStyle=s;let i=this.rectsByColor[e][0];const n=this.getStrokeWidth(i);this.ctx.lineWidth=void 0!==n?n:1,this.ctx.strokeStyle=r,this.ctx.beginPath();for(let t of this.rectsByColor[e]){const e=Math.round(this.vdom.get(t,"x"))||0,s=Math.round(this.vdom.get(t,"y"))||0;this.ctx.save(),this.applyTransform(t.transform),this.ctx.moveTo(e,s),this.ctx.rect(e,s,t.width,t.height),this.ctx.restore()}"none"!==s&&this.ctx.fill(),r&&"none"!==r&&this.ctx.stroke()}}else this.rectsByColor={}}drawText(e,t="normal",s=!1){const i=e=>{if(""===e.text)return;let t=this.getAttributeStyleCss(e,"font-family")||"Times New Roman",s="16px";const i=this.getAttributeStyleCss(e,"font-size");i&&(s=r.DrawingUtils.convertSizeToPx(i)+"px");let n=this.getAttributeStyleCss(e,"font");n||(n=s+" "+t);let o=this.getAttributeStyleCss(e,"text-anchor");o&&("middle"===o&&(o="center"),this.ctx.textAlign=o),this.ctx.font=n,this.ctx.fillStyle=this.getFillStyle(e,"#000");let a=this.vdom.get(e,"x")||0,l=this.vdom.get(e,"y")||0,h=r.DrawingUtils.convertSizeToPx(e.dx,!1)||0,d=r.DrawingUtils.convertSizeToPx(e.dy,!1)||0;this.ctx.fillText(e.text,a+h,l+d)};if("start"!==t)if("normal"!==t){if("forcesingle"===t)return i(e);if("end"!==t);else for(const e of this.drawTexts)i(e)}else this.drawTexts.push(e);else this.drawTexts=[]}drawImage(e,t="normal"){const s=e=>{if(""===e.href)return;let t=e.fill?e.fill:e.style.fill;t||(t="#000"),this.ctx.fillStyle=t;let s=this.vdom.get(e,"x")||0,r=this.vdom.get(e,"y")||0,i=e.width||0,n=e.height||0;if(e.image)try{this.ctx.drawImage(e.image,s,r,i,n)}catch(e){console.log(e)}};if("start"!==t)if("normal"!==t){if("forcesingle"===t)return s(e);if("end"!==t);else for(const e of this.drawImages)s(e)}else this.drawImages.push(e);else this.drawImages=[]}drawPath(e,t="normal",s){if("normal"!==t&&"forcesingle"!==t)return;const r=this.getFillStyle(e,"#000"),i=this.getStrokeStyle(e),n=this.getStrokeWidth(e);let o=new Path2D(e.d);if(this.ctx.fillStyle=r,void 0!==i&&"none"!==i){void 0!==n&&(this.ctx.lineWidth=n),this.ctx.strokeStyle=i;const t=this.getAttributeStyleCss(e,"stroke-linejoin");t&&("bevel"===t||"round"===t||"miter"===t?this.ctx.lineJoin=t:console.error("unknown line join value:",t)),s||this.ctx.stroke(o)}r&&"none"!==r&&!s&&this.ctx.fill(o),s&&s.addPath(o)}drawTspan(e,t="normal"){if("normal"!==t&&"forcesingle"!==t)return;this.ctx.font="10px Arial",this.ctx.fillStyle="#000000";const s="middle"===e.style.textAnchor?"center":e.style.textAnchor;this.ctx.textAlign=s,this.ctx.fillText(e.text,this.vdom.get(e,"x"),this.vdom.get(e,"y"))}drawTextpath(e){console.warn("no draw function yet for textpath")}drawLine(e,t="normal"){if(this.vdom.data.scale,"normal"===t){const t=this.getStrokeStyle(e),s=this.getStrokeWidth(e);if("none"===t||0===s)return;const r=`${t};${s}`;this.linesByColor[r]||(this.linesByColor[r]=[]),this.linesByColor[r].push(e)}if("start"!==t){if("end"!==t){if("forcesingle"===t){this.ctx.beginPath();const[t,s,r,i]=this.vdom.get(e,["x1","x2","y1","y2"]).map(e=>Math.round(e)||0);this.ctx.moveTo(t,r),this.ctx.lineTo(s,i),this.ctx.strokeStyle=this.getStrokeStyle(e),this.ctx.lineWidth=this.getStrokeWidth(e),this.ctx.stroke()}}else for(let e in this.linesByColor)if(this.linesByColor.hasOwnProperty(e)){const t=e.split(";"),s=t[0],r=t[1];this.ctx.strokeStyle=s,this.ctx.lineWidth=parseFloat(r),this.ctx.beginPath();for(let t of this.linesByColor[e]){t.transform&&(this.ctx.save(),this.applyTransform(t.transform));const[e,s,r,i]=this.vdom.get(t,["x1","x2","y1","y2"]).map(e=>Math.round(e)||0);this.ctx.moveTo(e,r),this.ctx.lineTo(s,i),t.transform&&this.ctx.restore()}this.ctx.stroke()}}else this.linesByColor={}}drawDefs(e){}drawMarker(e){}applyTransform(e){const t=e?r.DrawingUtils.parseTransform(e):null;if(t){t.rotateLast||this.ctx.rotate(t.rotate*Math.PI/180);const e=t.translateBeforeScale?t.translateX:t.translateX*t.scaleX,s=t.translateBeforeScale?t.translateY:t.translateY*t.scaleY;return this.ctx.transform(t.scaleX,0,0,t.scaleY,e,s),t.rotateLast&&this.ctx.rotate(t.rotate*Math.PI/180),!0}return!1}}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),s(2);const r=s(11);t.default=r},function(e,t,s){e.exports=function(){return s(3)('!function(e){var t={};function s(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,s),i.l=!0,i.exports}s.m=e,s.c=t,s.d=function(e,t,r){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(s.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(r,i,function(t){return e[t]}.bind(null,i));return r},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=1)}([function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});let r=0;t.safeLog=function(...e){r<200&&(r++,console.log(...e))},t.safeErrorLog=function(...e){r<200&&(r++,console.error(...e))}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=s(2),i=s(3);let a;const n=self;let o,l;n.onmessage=function(e){const t=e.data;if(t&&t.cmd)switch(t.cmd){case"INIT":o=new r.VdomManager(t.data.visData,!1,!0);const e=!!t.data.safeMode;l=t.data.port,a=new i.Canvasrenderer(o,t.data.canvas,e,()=>{l.postMessage({msg:"DRAWN"}),n.postMessage({msg:"DRAWN"})}),l.onmessage=e=>{const t=e.data;if(t&&t.cmd)switch(t.cmd){case"UPDATE_NODES":(e=>{for(let t of e.data.enterExit){if("EXIT"===t.cmd){const e=o.getNodeFromIndex(t.childGlobalIndex),s=o.getNodeFromIndex(t.parentGlobalIndex);o.removeNode(e,s)}if("ENTER"===t.cmd){const e=t.node;t.keepChildren||(e.children=[]),o.addNode(e),o.addNodeToParent(e,t.parentGlobalIndex),a.addNode&&a.addNode(e)}}a.updatePropertiesFromQueue?a.updatePropertiesFromQueue(e.data.update):o.updatePropertiesFromQueue(e.data.update,(e,t)=>{a.nodeUpdated(e,t)}),a.draw()})(t);break;default:console.error("did not find command ",t.cmd)}};break;case"UPDATE_NODES":console.error("update is now supposed to come from sync worker.");break;default:console.error("did not find command ",t.cmd)}}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=s(0);class i{constructor(e,t,s){this.data=e,this.ignoreDesign=t,this.isRenderer=s,this.sharedRenderData={values:{},buffers:{}},this.syncedSharedData={values:{},buffers:{}},this.sharedDataQueue={values:{},buffers:{}},this.queue={},this.useSharedArrayFor=["cx","cy","x1","x2","y1","y2","x","y"],this.indexToNodeMap={},this.changed=!1,this.cachedListSelections={},this.ensureNodesMapped(),"SharedArrayBuffer"in self||(this.useSharedArrayFor=[])}ensureInitialized(e,t=!0,s){if("class"===e&&(e="className"),t&&-1!==this.useSharedArrayFor.indexOf(e)){const t=s<500?1e3:Math.round(2*s);if(this.sharedDataQueue.values[e]){const s=Int32Array.BYTES_PER_ELEMENT*t;if(this.sharedDataQueue.values[e].byteLength/s<.6){const{buffer:s,values:r}=this.createBufferTransferValues(t,this.sharedDataQueue.values[e]);this.sharedDataQueue.values[e]=r,this.sharedDataQueue.buffers[e]=s}}else{let s;!this.queue[e]||this.queue[e]instanceof SharedArrayBuffer||(s=this.queue[e]);const{buffer:r,values:i}=this.createBufferTransferValues(t,void 0,s);this.sharedDataQueue.values[e]=i,this.sharedDataQueue.buffers[e]=r,this.queue[e]=r}}else this.queue[e]||(this.queue[e]={})}createBufferTransferValues(e,t,s){let r=new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT*e);const a=new Int32Array(r);if(s)for(const e in s)if(s.hasOwnProperty(e)){let t=s[e];"string"==typeof t&&(t=parseFloat(t)),a[e]=t*i.BUFFER_PRECISION_FACTOR}if(t)for(let e=0;e<t.length;e++)t[e]&&(a[e]=t[e]);return{buffer:r,values:a}}set(e,t,s,r=!0){if("class"===t&&(t="className"),void 0===e.globalElementIndex)throw console.error("No index",e),new Error("Element has no index");const a=e.globalElementIndex,n=r&&-1!==this.useSharedArrayFor.indexOf(t)?"shared":"raw";try{this.changed=!0,"shared"===n?("string"==typeof s&&(s=parseFloat(s)),s*=i.BUFFER_PRECISION_FACTOR,0===(s=Math.round(s))&&(s=56938516),this.sharedDataQueue.values[t][a]=s):(this.queue[t][a]=s,this.sharedDataQueue.values[t]&&this.syncedSharedData.values[t]&&this.syncedSharedData.values[t][a]&&(this.sharedDataQueue.values[t][a]=0))}catch(s){console.error(s),console.log(this.queue,this.syncedSharedData.values,n,t,e,a)}}removePendingChanges(e){const t=e.globalElementIndex;for(const e in this.queue)this.queue.hasOwnProperty(e)&&delete this.queue[e][t];for(const e in this.sharedDataQueue.values)this.sharedDataQueue.values.hasOwnProperty(e)&&(this.sharedDataQueue.values[e][t]=0)}ensureNodesMapped(){const e=t=>{void 0===t.globalElementIndex&&console.error("no element index",t),this.indexToNodeMap[t.globalElementIndex]=t;for(const s of t.children)e(s)};e(this.data)}enableFrontendDesignProperties(){this.ignoreDesign=!1}addNodeToParent(e,t){if("svg"!==e.type){const s=this.getNodeFromIndex(t);if(!s)return console.error("could not add node without parent",t,e,Object.keys(this.indexToNodeMap)),void new Error("parent not found");s.children.push(e)}}addNode(e){this.indexToNodeMap[e.globalElementIndex]=e}removeNode(e,t){delete this.indexToNodeMap[e.globalElementIndex];const s=t.children.indexOf(e);t.children.splice(s,1),this.cachedListSelections={},this.removePendingChanges(e)}applyStyleToNodeAndChildren(e,t,s,r){if(e.style[t]=s,r(e,t),e.children)for(let i of e.children)this.applyStyleToNodeAndChildren(i,t,s,r)}applyCssToNodeAndChildren(e,t,s,r,i){if("*"!==s||r?(e.css[t]||(e.css[t]={}),e.css[t][s]=r):delete e.css[t],i(e,s),e.children)for(let a of e.children)this.applyCssToNodeAndChildren(a,t,s,r,i)}getNodeFromIndex(e){return this.indexToNodeMap[e]}getNodeById(e){const t=Object.values(this.indexToNodeMap).filter(t=>t.id===e);return(!t||t.length>1)&&(r.safeLog("multiple nodes with this id!",Object.values(this.indexToNodeMap).filter(e=>e.id).map(e=>e.id),e),r.safeLog(t.length,t)),t&&1===t.length?t[0]:null}get(e,t){return Array.isArray(t)?t.map(t=>this.getSingle(e,t)):this.getSingle(e,t)}getSingle(e,t){const s=this.isRenderer?this.sharedRenderData.values:this.syncedSharedData.values;if(s[t]&&s[t][e.globalElementIndex]){const r=s[t][e.globalElementIndex];return 56938516===r?0:r/i.BUFFER_PRECISION_FACTOR}return e[t]}hasChanges(){return this.changed}getQueue(){return this.queue}clearQueue(){this.queue={},this.changed=!1}transferSyncedDataToRenderData(){for(let e in this.syncedSharedData.values){this.queue[e]=this.syncedSharedData.buffers[e],this.sharedRenderData.values[e]=this.syncedSharedData.values[e];const t=this.syncedSharedData.buffers[e].byteLength/Int32Array.BYTES_PER_ELEMENT,{buffer:s,values:r}=this.createBufferTransferValues(t,this.syncedSharedData.values[e]);this.syncedSharedData.buffers[e]=s,this.syncedSharedData.values[e]=r}}transferBufferQueueDataToSynced(){for(let e in this.sharedDataQueue.values){this.queue[e]=this.sharedDataQueue.buffers[e],this.syncedSharedData.values[e]=this.sharedDataQueue.values[e];const t=this.sharedDataQueue.buffers[e].byteLength/Int32Array.BYTES_PER_ELEMENT,{buffer:s,values:r}=this.createBufferTransferValues(t,this.sharedDataQueue.values[e]);this.sharedDataQueue.buffers[e]=s,this.sharedDataQueue.values[e]=r}}addToQueue(e){for(let t in e)if(e.hasOwnProperty(t))if("SharedArrayBuffer"in self&&e[t]instanceof SharedArrayBuffer){const s=e[t];this.syncedSharedData.buffers[t]=s,this.syncedSharedData.values[t]=new Int32Array(s)}else{const s=e[t];this.queue[t]||(this.queue[t]={});for(let e in s){if(!s.hasOwnProperty(e))continue;const r=parseInt(e);this.queue[t][r]=s[r]}}}updatePropertiesFromQueue(e,t=(()=>{})){for(let s in e){if(!e.hasOwnProperty(s))continue;const r=s.substr(0,"style;".length);if(this.ignoreDesign&&("style;"===r||-1!==i.IGNOREDESIGN_ATTRIBUTES.indexOf(s)))continue;let a;if("SharedArrayBuffer"in self&&e[s]instanceof SharedArrayBuffer){const t=e[s];this.isRenderer?(this.sharedRenderData.buffers[s]=t,this.sharedRenderData.values[s]=new Int32Array(t)):(this.syncedSharedData.buffers[s]=t,this.syncedSharedData.values[s]=new Int32Array(t))}else{a=e[s];for(let e in a){if(!a.hasOwnProperty(e))continue;const n=parseInt(e),o=this.getNodeFromIndex(n);if(!o){console.error("node not found at index",n);continue}let l=a[e];if("style;"===r){const e=s.substr("style;".length);this.applyStyleToNodeAndChildren(o,e,l,t)}else if("css;"===s.substr(0,4)){const[e,r]=s.substr(4).split(";");this.applyCssToNodeAndChildren(o,e,r,l,t)}else-1!==i.ROUNDED_ATTRS.indexOf(s)&&("string"==typeof l&&(l=parseFloat(l)),l=Math.round(l)),o[s]=l,t(o,s)}}}}getVisNodeFromSelector(e){const t=e.lastIndexOf(">"),s=e.substr(0,t),r=e.substr(t+1),i=s?this.cachedListSelections[s]:null;let a=-1;const n=r.indexOf(":nth-child(");if(-1!==n&&(a=parseInt(r.substr(n+11)),i&&i[a]))return i[a];const o=[];if(this.findMatchingChildren(this.data,e,0,o),o&&1===o.length){const e=o[0];return-1!==a&&(this.cachedListSelections[s]||(this.cachedListSelections[s]={}),this.cachedListSelections[s][a]=e),e}return null}getVisNodesFromSelector(e,t){const s=[];return this.findMatchingChildren(e,t,0,s),s}findChildrenOfType(e,t,s){const r=e=>{for(const i of e.children)i.type===t&&s.push(i),0!==e.children.length&&r(i)};r(e)}filterNodesBySelector(e,t,s){return t.filter(t=>i.isCssRulePartialMatch(s,t,e))}findMatchingChildren(e,t,s,r,a=[]){if(!t&&""!==t)throw console.error(e,t,s,r,a),Error("undefined selector");let n=t.split(">").map(e=>e.trim()),o=n[s];if(0===s&&"svg"===o&&(o=n[++s],s===n.length))return r.push(e),void a.push(t);if(t.match(/^[a-z]+$/))return this.findChildrenOfType(e,t,r);for(let l=0;l<e.children.length;l++){let h=e.children[l],c=!1;i.isCssRulePartialMatch(o,h,e)&&(s===n.length-1?(r.push(h),a.push(t)):c=!0),h.children&&(c||n.length<2)&&s+1<n.length&&this.findMatchingChildren(h,t,s+1,r,a)}}static isCssRulePartialMatch(e,t,s){if(":not("===e.substr(0,5)){const r=e.substr(0,e.length-1).substr(5);return!i.isCssRulePartialMatch(r,t,s)}if("."===e[0]){const s=e.split(".");if(s.shift(),t.className){let e=!0;for(const r of s)-1===t.className.split(" ").indexOf(r)&&(e=!1);return e}}else if("#"===e[0]){if(e.substr(1)===t.id)return!0}else if(e.match(/^[a-z]+$/)){if(e===t.type)return!0}else{if(-1!==e.indexOf(":nth-child(")){let r="any",i=e;":"!==e[0]&&(r=e.substr(0,e.indexOf(":")),i=e.substr(e.indexOf(":")));const a=parseInt(i.substr(":nth-child(".length));return s.children.indexOf(t)===a-1&&("any"===r||t.type===r)}if(-1!==e.indexOf(".")){const s=e.indexOf("."),r=e.substr(0,s),i=e.substr(s+1);if(r===t.type&&t.className&&-1!==t.className.split(" ").indexOf(i))return!0}}return!1}}t.VdomManager=i,i.IGNOREDESIGN_ATTRIBUTES=["fill","stroke","opacity"],i.BUFFER_PRECISION_FACTOR=10,i.ROUNDED_ATTRS=["cx","cy"]},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=s(4),i=s(0);t.Canvasrenderer=class{constructor(e,t,s=!1,r=(()=>{})){this.vdom=e,this.canvas=t,this.forceSingle=s,this.onDrawn=r,this.parentValues={},this.lastFullSecond=0,this.countSinceLastFullSecond=0,this.circlesByColor={},this.rectsByColor={},this.drawTexts=[],this.drawImages=[],this.linesByColor={};const i=t.getContext("2d");if(!i)throw new Error("could not create canvas context");this.ctx=i,this.ctx.scale(this.vdom.data.scale,this.vdom.data.scale),this.ctx.save(),this.draw(),setTimeout(()=>{console.log(this.forceSingle,this.vdom.data)},1e3)}draw(){const e=this.ctx;e.restore(),e.save(),e.clearRect(0,0,this.vdom.data.width,this.vdom.data.height),this.drawLine(null,"start"),this.drawCircle(null,"start"),this.drawRect(null,"start"),this.drawText(null,"start"),this.drawImage(null,"start"),this.drawNodeAndChildren(this.vdom.data,this.forceSingle),this.drawLine(null,"end"),this.drawCircle(null,"end"),this.drawRect(null,"end"),this.drawText(null,"end"),this.drawImage(null,"end"),this.onDrawn();const t=Math.round(performance.now()/1e3);t!==this.lastFullSecond&&(this.lastFullSecond=t,this.countSinceLastFullSecond=0),this.countSinceLastFullSecond++}drawNodeAndChildren(e,t,s){if("clippath"===e.type&&!s)return;const r=this.ctx,a=Object.assign({},this.parentValues),n=!s&&(e.children.length||e.transform);if(n&&r.save(),this.applyTransform(e.transform),(e.transform||s)&&(t=!0),e["clip-path"])if("url(#"===e["clip-path"].substr(0,5)){const s=e["clip-path"].substr(5,e["clip-path"].length-6),i=this.vdom.getNodeById(s);if(t=!0,i){const e=new Path2D;this.drawNodeAndChildren(i,t,e),r.clip(e)}else;}else i.safeErrorLog("clip path format not supported:",e["clip-path"]);if(e.style.display&&"none"===e.style.display||(t?this.drawSingleNode(e,"forcesingle",s):this.drawSingleNode(e,"normal",s)),e.children){this.parentValues.fill=e.fill||this.parentValues.fill,this.parentValues["style;fill"]=e.style.fill||this.parentValues["style;fill"],this.parentValues.stroke=e.stroke||this.parentValues.stroke,this.parentValues["style;stroke"]=e.style.stroke||this.parentValues["style;stroke"],this.parentValues.opacity=e.opacity||this.parentValues.opacity;for(let r=0;r<e.children.length;r++)this.drawNodeAndChildren(e.children[r],t,s)}n&&r.restore(),this.parentValues=a}drawSingleNode(e,t="normal",s){const r=e.type,i=this["draw"+r.substr(0,1).toUpperCase()+r.substr(1)];if(!i)return console.error("no draw function yet for ",r);i.call(this,e,t,s)}drawClippath(e){}drawSvg(){}drawTitle(){}drawG(){}drawCircle(e,t="normal",s){if("normal"===t){const t=this.getFillStyle(e,"#000")+";"+this.getStrokeStyle(e);this.circlesByColor[t]||(this.circlesByColor[t]=[]),this.circlesByColor[t].push(e)}if("start"!==t){if("end"!==t){if("forcesingle"===t){let t=this.getFillStyle(e,"#000");const r=this.getStrokeStyle(e),i=this.vdom.get(e,"cx")||0,a=this.vdom.get(e,"cy")||0;this.ctx.beginPath(),this.ctx.fillStyle=t,this.ctx.strokeStyle=r,this.ctx.lineWidth=this.getStrokeWidth(e),this.ctx.moveTo(i+e.r,a),(s||this.ctx).arc(i,a,e.r,0,2*Math.PI),"none"===t||s||this.ctx.fill(),r&&"none"!==r&&!s&&this.ctx.stroke()}}else for(let e in this.circlesByColor)if(this.circlesByColor.hasOwnProperty(e)){const t=e.split(";"),s=t[0],r=t[1];this.ctx.fillStyle=s;let i=this.circlesByColor[e][0];const a=this.getStrokeWidth(i);this.ctx.lineWidth=void 0!==a?a:1,this.ctx.strokeStyle=r,this.ctx.beginPath();for(let t of this.circlesByColor[e]){const e=Math.round(this.vdom.get(t,"cx"))||0,s=Math.round(this.vdom.get(t,"cy"))||0,r=Math.round(this.vdom.get(t,"r"));this.ctx.save(),this.applyTransform(t.transform),this.ctx.moveTo(e+r,s),this.ctx.arc(e,s,r,0,2*Math.PI),this.ctx.restore()}"none"!==s&&this.ctx.fill(),r&&"none"!==r&&this.ctx.stroke()}}else this.circlesByColor={}}nodeUpdated(e,t){("*"===t||t.includes("fill")||t.includes("opacity"))&&delete e["fill-cache"],("*"===t||t.includes("stroke")||t.includes("opacity"))&&(delete e["stroke-cache"],delete e["strokewidth-cache"])}getFillStyle(e,t="none"){if("fill-cache"in e)return e["fill-cache"];let s=this.getAttributeStyleCss(e,"fill"),i=this.getAttributeStyleCss(e,"opacity")||1;i*=this.getAttributeStyleCss(e,"fill-opacity")||1;let a="";return this.parentValues.fill&&(a=this.parentValues.fill),this.parentValues["style;fill"]&&(a=this.parentValues["style;fill"]),this.parentValues.fill||this.parentValues["style;fill"]||(a=t),s=r.DrawingUtils.colorToRgba(s,i,a),e["fill-cache"]=s,s}getAttributeStyleCss(e,t){if(e.style[t])return e.style[t];{if(this.parentValues[`style;${t}`])return this.parentValues[`style;${t}`];let s=e[t],i=-1;for(const a in e.css)if(e.css[a][t]){const n=r.DrawingUtils.getCssRuleSpecificityNumber(a);n>i&&(s=e.css[a][t],i=n)}return s}}getStrokeStyle(e,t="none"){if("stroke-cache"in e)return e["stroke-cache"];const s=this.getAttributeStyleCss(e,"stroke");let i=this.getAttributeStyleCss(e,"opacity")||1;i*=this.getAttributeStyleCss(e,"stroke-opacity")||1;let a="";return a=this.parentValues.stroke?this.parentValues.stroke:t,e["stroke-cache"]=void 0!==s?r.DrawingUtils.colorToRgba(s,i):a,e["stroke-cache"]}getStrokeWidth(e){if("strokewidth-cache"in e)return e["strokewidth-cache"];const t=this.getAttributeStyleCss(e,"stroke-width");return e["strokewidth-cache"]=void 0===t?void 0:parseFloat(t),e["strokewidth-cache"]}drawRect(e,t="normal",s){if("normal"===t){const t=this.getFillStyle(e,"#000")+";"+this.getStrokeStyle(e);this.rectsByColor[t]||(this.rectsByColor[t]=[]),this.rectsByColor[t].push(e)}if("start"!==t){if("end"!==t){if("forcesingle"===t){let t=this.getFillStyle(e,"#000");const r=this.getStrokeStyle(e),i=this.vdom.get(e,"x")||0,a=this.vdom.get(e,"y")||0;t&&"none"!==t&&!s&&(this.ctx.fillStyle=t,this.ctx.fillRect(i,a,e.width,e.height)),s&&s.rect(i,a,e.width,e.height),"none"===r||s||(this.ctx.strokeStyle=r,this.ctx.beginPath(),this.ctx.rect(i,a,e.width,e.height),this.ctx.stroke())}}else for(let e in this.rectsByColor)if(this.rectsByColor.hasOwnProperty(e)){const t=e.split(";"),s=t[0],r=t[1];this.ctx.fillStyle=s;let i=this.rectsByColor[e][0];const a=this.getStrokeWidth(i);this.ctx.lineWidth=void 0!==a?a:1,this.ctx.strokeStyle=r,this.ctx.beginPath();for(let t of this.rectsByColor[e]){const e=Math.round(this.vdom.get(t,"x"))||0,s=Math.round(this.vdom.get(t,"y"))||0;this.ctx.save(),this.applyTransform(t.transform),this.ctx.moveTo(e,s),this.ctx.rect(e,s,t.width,t.height),this.ctx.restore()}"none"!==s&&this.ctx.fill(),r&&"none"!==r&&this.ctx.stroke()}}else this.rectsByColor={}}drawText(e,t="normal",s=!1){const i=e=>{if(""===e.text)return;let t=this.getAttributeStyleCss(e,"font-family")||"Times New Roman",s="16px";const i=this.getAttributeStyleCss(e,"font-size");i&&(s=r.DrawingUtils.convertSizeToPx(i)+"px");let a=this.getAttributeStyleCss(e,"font");a||(a=s+" "+t);let n=this.getAttributeStyleCss(e,"text-anchor");n&&("middle"===n&&(n="center"),this.ctx.textAlign=n),this.ctx.font=a,this.ctx.fillStyle=this.getFillStyle(e,"#000");let o=this.vdom.get(e,"x")||0,l=this.vdom.get(e,"y")||0,h=r.DrawingUtils.convertSizeToPx(e.dx,!1)||0,c=r.DrawingUtils.convertSizeToPx(e.dy,!1)||0;this.ctx.fillText(e.text,o+h,l+c)};if("start"!==t)if("normal"!==t){if("forcesingle"===t)return i(e);if("end"!==t);else for(const e of this.drawTexts)i(e)}else this.drawTexts.push(e);else this.drawTexts=[]}drawImage(e,t="normal"){const s=e=>{if(""===e.href)return;let t=e.fill?e.fill:e.style.fill;t||(t="#000"),this.ctx.fillStyle=t;let s=this.vdom.get(e,"x")||0,r=this.vdom.get(e,"y")||0,i=e.width||0,a=e.height||0;if(e.image)try{this.ctx.drawImage(e.image,s,r,i,a)}catch(e){console.log(e)}};if("start"!==t)if("normal"!==t){if("forcesingle"===t)return s(e);if("end"!==t);else for(const e of this.drawImages)s(e)}else this.drawImages.push(e);else this.drawImages=[]}drawPath(e,t="normal",s){if("normal"!==t&&"forcesingle"!==t)return;const r=this.getFillStyle(e,"#000"),i=this.getStrokeStyle(e),a=this.getStrokeWidth(e);let n=new Path2D(e.d);if(this.ctx.fillStyle=r,void 0!==i&&"none"!==i){void 0!==a&&(this.ctx.lineWidth=a),this.ctx.strokeStyle=i;const t=this.getAttributeStyleCss(e,"stroke-linejoin");t&&("bevel"===t||"round"===t||"miter"===t?this.ctx.lineJoin=t:console.error("unknown line join value:",t)),s||this.ctx.stroke(n)}r&&"none"!==r&&!s&&this.ctx.fill(n),s&&s.addPath(n)}drawTspan(e,t="normal"){if("normal"!==t&&"forcesingle"!==t)return;this.ctx.font="10px Arial",this.ctx.fillStyle="#000000";const s="middle"===e.style.textAnchor?"center":e.style.textAnchor;this.ctx.textAlign=s,this.ctx.fillText(e.text,this.vdom.get(e,"x"),this.vdom.get(e,"y"))}drawTextpath(e){console.warn("no draw function yet for textpath")}drawLine(e,t="normal"){if(this.vdom.data.scale,"normal"===t){const t=this.getStrokeStyle(e),s=this.getStrokeWidth(e);if("none"===t||0===s)return;const r=`${t};${s}`;this.linesByColor[r]||(this.linesByColor[r]=[]),this.linesByColor[r].push(e)}if("start"!==t){if("end"!==t){if("forcesingle"===t){this.ctx.beginPath();const[t,s,r,i]=this.vdom.get(e,["x1","x2","y1","y2"]).map(e=>Math.round(e)||0);this.ctx.moveTo(t,r),this.ctx.lineTo(s,i),this.ctx.strokeStyle=this.getStrokeStyle(e),this.ctx.lineWidth=this.getStrokeWidth(e),this.ctx.stroke()}}else for(let e in this.linesByColor)if(this.linesByColor.hasOwnProperty(e)){const t=e.split(";"),s=t[0],r=t[1];this.ctx.strokeStyle=s,this.ctx.lineWidth=parseFloat(r),this.ctx.beginPath();for(let t of this.linesByColor[e]){t.transform&&(this.ctx.save(),this.applyTransform(t.transform));const[e,s,r,i]=this.vdom.get(t,["x1","x2","y1","y2"]).map(e=>Math.round(e)||0);this.ctx.moveTo(e,r),this.ctx.lineTo(s,i),t.transform&&this.ctx.restore()}this.ctx.stroke()}}else this.linesByColor={}}drawDefs(e){}drawMarker(e){}applyTransform(e){const t=e?r.DrawingUtils.parseTransform(e):null;if(t){t.rotateLast||this.ctx.rotate(t.rotate*Math.PI/180);const e=t.translateBeforeScale?t.translateX:t.translateX*t.scaleX,s=t.translateBeforeScale?t.translateY:t.translateY*t.scaleY;return this.ctx.transform(t.scaleX,0,0,t.scaleY,e,s),t.rotateLast&&this.ctx.rotate(t.rotate*Math.PI/180),!0}return!1}}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});class r{static parseTransform(e){const t={translateX:0,translateY:0,scaleX:1,scaleY:1,rotate:0,translateBeforeScale:!1,rotateLast:!1};if(e){if("string"!=typeof e)return t.scaleX=e.k,t.scaleY=e.k,t.translateX=e.x,t.translateY=e.y,t.translateBeforeScale=!0,t;let s=e;s=s.replace(/ /g,"");const r=/\\s*translate\\(([-0-9.]+),([-0-9.]+)\\)/.exec(s);r&&(t.translateX=parseFloat(r[1]),t.translateY=parseFloat(r[2]));const i=/\\s*scale\\(([-0-9.]+)(,[-0-9.]+)?\\)/.exec(s);i&&(t.scaleX=parseFloat(i[1]),t.scaleY=i[2]?parseFloat(i[2].substr(1)):parseFloat(i[1]));const a=/\\s*rotate\\(([-0-9.]+)\\)/.exec(s);a&&(t.rotate=parseFloat(a[1])),/\\s*translate\\(([-0-9.]+),([-0-9.]+)\\)scale\\(([-0-9.,]+)\\)/.exec(s)&&(t.translateBeforeScale=!0),/\\s*rotate\\(([-0-9.,]+)\\)$/.exec(s)&&(t.rotateLast=!0);const n=/\\s*matrix\\(([-0-9.]+),([-0-9.]+),([-0-9.]+),([-0-9.]+),([-0-9.]+),([-0-9.]+)\\)/.exec(s);n&&(t.scaleX=parseFloat(n[1]),t.scaleY=parseFloat(n[4]),t.translateX=parseFloat(n[5]),t.translateY=parseFloat(n[6]))}return t}static addTransforms(e,t){return{translateX:e.translateX+t.translateX,translateY:e.translateY+t.translateY,scaleX:e.scaleX*t.scaleX,scaleY:e.scaleY*t.scaleY,rotate:e.rotate+t.rotate,translateBeforeScale:!1,rotateLast:!1}}static convertSizeToPx(e,t=!0){const s=t?14:void 0;return void 0===e?s:"number"==typeof e?e:"em"===e.substr(-2)?Math.round(12*parseFloat(e)):"px"===e.substr(-2)?parseInt(e):e.match(/^[0-9]+$/)?parseInt(e):(console.warn("size in unsupported format: ",e),s)}static colorToRgba(e,t=1,s="none"){if("none"===e)return e;e||(e=s);const i=`${e}-${t}`;if(r.rgbaCache[i])return r.rgbaCache[i];if(e=r.CssNamedColorToHex(e),1===t&&"string"==typeof e)return r.rgbaCache[i]=e,e;let a;if("string"==typeof e&&"#"===e[0]){let s;if(!/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))throw new Error("Bad Hex");s=e.substring(1),3==s.length&&(s=s[0]+s[0]+s[1]+s[1]+s[2]+s[2]),s="0x"+s,a="rgba("+[s>>16&255,s>>8&255,255&s].join(",")+","+t+")"}else if("object"==typeof e){if("r"in e)a="rgba("+e.r+","+e.g+","+e.b+","+t+")";else if("h"in e){const s=r.hslToRgb(e.h/360,e.s,e.l);a="rgba("+s.r+","+s.g+","+s.b+","+t+")"}}else"rgb("===e.substr(0,4)&&(a=e.substr(0,e.length-1).replace("rgb","rgba")+", "+t+")");return r.rgbaCache[i]=a,a}static hslToRgb(e,t,s){var r,i,a;if(0==t)r=i=a=s;else{var n=function(e,t,s){return s<0&&(s+=1),s>1&&(s-=1),s<1/6?e+6*(t-e)*s:s<.5?t:s<2/3?e+(t-e)*(2/3-s)*6:e},o=s<.5?s*(1+t):s+t-s*t,l=2*s-o;r=n(l,o,e+1/3),i=n(l,o,e),a=n(l,o,e-1/3)}return{r:Math.round(255*r),g:Math.round(255*i),b:Math.round(255*a)}}static CssNamedColorToHex(e){return"string"==typeof e&&i[e.toUpperCase()]?i[e.toUpperCase()]:e}static getCssRuleSpecificityNumber(e){let t=0;e=e.replace(/ >/g,">").replace(/> /g,">");const s=[].concat.apply([],e.split(" ").map(e=>e.split(">")));for(const e of s){t+=100;const s=e[0];if("#"===s)t+=1e3;else if("."===s){const s=e.split(".").length-1;t+=Math.min(900,100*s)}}return t}}t.DrawingUtils=r,r.rgbaCache={};const i={ALICEBLUE:"#F0F8FF",ANTIQUEWHITE:"#FAEBD7",AQUA:"#00FFFF",AQUAMARINE:"#7FFFD4",AZURE:"#F0FFFF",BEIGE:"#F5F5DC",BISQUE:"#FFE4C4",BLACK:"#000000",BLANCHEDALMOND:"#FFEBCD",BLUE:"#0000FF",BLUEVIOLET:"#8A2BE2",BROWN:"#A52A2A",BURLYWOOD:"#DEB887",CADETBLUE:"#5F9EA0",CHARTREUSE:"#7FFF00",CHOCOLATE:"#D2691E",CORAL:"#FF7F50",CORNFLOWERBLUE:"#6495ED",CORNSILK:"#FFF8DC",CRIMSON:"#DC143C",CYAN:"#00FFFF",DARKBLUE:"#00008B",DARKCYAN:"#008B8B",DARKGOLDENROD:"#B8860B",DARKGRAY:"#A9A9A9",DARKGREY:"#A9A9A9",DARKGREEN:"#006400",DARKKHAKI:"#BDB76B",DARKMAGENTA:"#8B008B",DARKOLIVEGREEN:"#556B2F",DARKORANGE:"#FF8C00",DARKORCHID:"#9932CC",DARKRED:"#8B0000",DARKSALMON:"#E9967A",DARKSEAGREEN:"#8FBC8F",DARKSLATEBLUE:"#483D8B",DARKSLATEGRAY:"#2F4F4F",DARKSLATEGREY:"#2F4F4F",DARKTURQUOISE:"#00CED1",DARKVIOLET:"#9400D3",DEEPPINK:"#FF1493",DEEPSKYBLUE:"#00BFFF",DIMGRAY:"#696969",DIMGREY:"#696969",DODGERBLUE:"#1E90FF",FIREBRICK:"#B22222",FLORALWHITE:"#FFFAF0",FORESTGREEN:"#228B22",FUCHSIA:"#FF00FF",GAINSBORO:"#DCDCDC",GHOSTWHITE:"#F8F8FF",GOLD:"#FFD700",GOLDENROD:"#DAA520",GRAY:"#808080",GREY:"#808080",GREEN:"#008000",GREENYELLOW:"#ADFF2F",HONEYDEW:"#F0FFF0",HOTPINK:"#FF69B4",INDIANRED:"#CD5C5C",INDIGO:"#4B0082",IVORY:"#FFFFF0",KHAKI:"#F0E68C",LAVENDER:"#E6E6FA",LAVENDERBLUSH:"#FFF0F5",LAWNGREEN:"#7CFC00",LEMONCHIFFON:"#FFFACD",LIGHTBLUE:"#ADD8E6",LIGHTCORAL:"#F08080",LIGHTCYAN:"#E0FFFF",LIGHTGOLDENRODYELLOW:"#FAFAD2",LIGHTGRAY:"#D3D3D3",LIGHTGREY:"#D3D3D3",LIGHTGREEN:"#90EE90",LIGHTPINK:"#FFB6C1",LIGHTSALMON:"#FFA07A",LIGHTSEAGREEN:"#20B2AA",LIGHTSKYBLUE:"#87CEFA",LIGHTSLATEGRAY:"#778899",LIGHTSLATEGREY:"#778899",LIGHTSTEELBLUE:"#B0C4DE",LIGHTYELLOW:"#FFFFE0",LIME:"#00FF00",LIMEGREEN:"#32CD32",LINEN:"#FAF0E6",MAGENTA:"#FF00FF",MAROON:"#800000",MEDIUMAQUAMARINE:"#66CDAA",MEDIUMBLUE:"#0000CD",MEDIUMORCHID:"#BA55D3",MEDIUMPURPLE:"#9370DB",MEDIUMSEAGREEN:"#3CB371",MEDIUMSLATEBLUE:"#7B68EE",MEDIUMSPRINGGREEN:"#00FA9A",MEDIUMTURQUOISE:"#48D1CC",MEDIUMVIOLETRED:"#C71585",MIDNIGHTBLUE:"#191970",MINTCREAM:"#F5FFFA",MISTYROSE:"#FFE4E1",MOCCASIN:"#FFE4B5",NAVAJOWHITE:"#FFDEAD",NAVY:"#000080",OLDLACE:"#FDF5E6",OLIVE:"#808000",OLIVEDRAB:"#6B8E23",ORANGE:"#FFA500",ORANGERED:"#FF4500",ORCHID:"#DA70D6",PALEGOLDENROD:"#EEE8AA",PALEGREEN:"#98FB98",PALETURQUOISE:"#AFEEEE",PALEVIOLETRED:"#DB7093",PAPAYAWHIP:"#FFEFD5",PEACHPUFF:"#FFDAB9",PERU:"#CD853F",PINK:"#FFC0CB",PLUM:"#DDA0DD",POWDERBLUE:"#B0E0E6",PURPLE:"#800080",REBECCAPURPLE:"#663399",RED:"#FF0000",ROSYBROWN:"#BC8F8F",ROYALBLUE:"#4169E1",SADDLEBROWN:"#8B4513",SALMON:"#FA8072",SANDYBROWN:"#F4A460",SEAGREEN:"#2E8B57",SEASHELL:"#FFF5EE",SIENNA:"#A0522D",SILVER:"#C0C0C0",SKYBLUE:"#87CEEB",SLATEBLUE:"#6A5ACD",SLATEGRAY:"#708090",SLATEGREY:"#708090",SNOW:"#FFFAFA",SPRINGGREEN:"#00FF7F",STEELBLUE:"#4682B4",TAN:"#D2B48C",TEAL:"#008080",THISTLE:"#D8BFD8",TOMATO:"#FF6347",TURQUOISE:"#40E0D0",VIOLET:"#EE82EE",WHEAT:"#F5DEB3",WHITE:"#FFFFFF",WHITESMOKE:"#F5F5F5",YELLOW:"#FFFF00",YELLOWGREEN:"#9ACD32"}}]);\n//# sourceMappingURL=23cc5864bb48f7bc3ead.worker.js.map',s.p+"23cc5864bb48f7bc3ead.worker.js")}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),s(2);const r=s(13);t.default=r},function(e,t,s){e.exports=function(){return s(3)('!function(e){var t={};function s(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=t,s.d=function(e,t,r){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(s.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(r,n,function(t){return e[t]}.bind(null,n));return r},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=0)}([function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=s(1);class n{constructor(e,t){this.port=t,this.enterExitQueue=[],this.hasNewData=!0,this.waitingToRender=!0,this.vdom=new r.VdomManager(e,!1,!1),this.port.onmessage=e=>{this.onRendererReady()}}onUpdateReceived(e){this.hasNewData=!0,this.enterExitQueue=this.enterExitQueue.concat(e.data.enterExit);const t=e.data.update;this.vdom.addToQueue(t),this.waitingToRender&&this.onRendererReady()}onRendererReady(){if(!this.hasNewData)return void(this.waitingToRender=!0);this.waitingToRender=!1,this.vdom.transferSyncedDataToRenderData();const e=this.vdom.getQueue();this.vdom.clearQueue();const t={cmd:"UPDATE_NODES",data:{enterExit:this.enterExitQueue,update:e}};this.port.postMessage(t),this.enterExitQueue=[],this.hasNewData=!1}}let a;self.onmessage=function(e){const t=e.data;if(t&&t.cmd)switch(t.cmd){case"INIT":a=new n(t.data.visData,t.data.port);break;case"UPDATE_NODES":a.onUpdateReceived(t);break;default:console.error("did not find command ",t.cmd)}}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=s(2);class n{constructor(e,t,s){this.data=e,this.ignoreDesign=t,this.isRenderer=s,this.sharedRenderData={values:{},buffers:{}},this.syncedSharedData={values:{},buffers:{}},this.sharedDataQueue={values:{},buffers:{}},this.queue={},this.useSharedArrayFor=["cx","cy","x1","x2","y1","y2","x","y"],this.indexToNodeMap={},this.changed=!1,this.cachedListSelections={},this.ensureNodesMapped(),"SharedArrayBuffer"in self||(this.useSharedArrayFor=[])}ensureInitialized(e,t=!0,s){if("class"===e&&(e="className"),t&&-1!==this.useSharedArrayFor.indexOf(e)){const t=s<500?1e3:Math.round(2*s);if(this.sharedDataQueue.values[e]){const s=Int32Array.BYTES_PER_ELEMENT*t;if(this.sharedDataQueue.values[e].byteLength/s<.6){const{buffer:s,values:r}=this.createBufferTransferValues(t,this.sharedDataQueue.values[e]);this.sharedDataQueue.values[e]=r,this.sharedDataQueue.buffers[e]=s}}else{let s;!this.queue[e]||this.queue[e]instanceof SharedArrayBuffer||(s=this.queue[e]);const{buffer:r,values:n}=this.createBufferTransferValues(t,void 0,s);this.sharedDataQueue.values[e]=n,this.sharedDataQueue.buffers[e]=r,this.queue[e]=r}}else this.queue[e]||(this.queue[e]={})}createBufferTransferValues(e,t,s){let r=new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT*e);const a=new Int32Array(r);if(s)for(const e in s)if(s.hasOwnProperty(e)){let t=s[e];"string"==typeof t&&(t=parseFloat(t)),a[e]=t*n.BUFFER_PRECISION_FACTOR}if(t)for(let e=0;e<t.length;e++)t[e]&&(a[e]=t[e]);return{buffer:r,values:a}}set(e,t,s,r=!0){if("class"===t&&(t="className"),void 0===e.globalElementIndex)throw console.error("No index",e),new Error("Element has no index");const a=e.globalElementIndex,i=r&&-1!==this.useSharedArrayFor.indexOf(t)?"shared":"raw";try{this.changed=!0,"shared"===i?("string"==typeof s&&(s=parseFloat(s)),s*=n.BUFFER_PRECISION_FACTOR,0===(s=Math.round(s))&&(s=56938516),this.sharedDataQueue.values[t][a]=s):(this.queue[t][a]=s,this.sharedDataQueue.values[t]&&this.syncedSharedData.values[t]&&this.syncedSharedData.values[t][a]&&(this.sharedDataQueue.values[t][a]=0))}catch(s){console.error(s),console.log(this.queue,this.syncedSharedData.values,i,t,e,a)}}removePendingChanges(e){const t=e.globalElementIndex;for(const e in this.queue)this.queue.hasOwnProperty(e)&&delete this.queue[e][t];for(const e in this.sharedDataQueue.values)this.sharedDataQueue.values.hasOwnProperty(e)&&(this.sharedDataQueue.values[e][t]=0)}ensureNodesMapped(){const e=t=>{void 0===t.globalElementIndex&&console.error("no element index",t),this.indexToNodeMap[t.globalElementIndex]=t;for(const s of t.children)e(s)};e(this.data)}enableFrontendDesignProperties(){this.ignoreDesign=!1}addNodeToParent(e,t){if("svg"!==e.type){const s=this.getNodeFromIndex(t);if(!s)return console.error("could not add node without parent",t,e,Object.keys(this.indexToNodeMap)),void new Error("parent not found");s.children.push(e)}}addNode(e){this.indexToNodeMap[e.globalElementIndex]=e}removeNode(e,t){delete this.indexToNodeMap[e.globalElementIndex];const s=t.children.indexOf(e);t.children.splice(s,1),this.cachedListSelections={},this.removePendingChanges(e)}applyStyleToNodeAndChildren(e,t,s,r){if(e.style[t]=s,r(e,t),e.children)for(let n of e.children)this.applyStyleToNodeAndChildren(n,t,s,r)}applyCssToNodeAndChildren(e,t,s,r,n){if("*"!==s||r?(e.css[t]||(e.css[t]={}),e.css[t][s]=r):delete e.css[t],n(e,s),e.children)for(let a of e.children)this.applyCssToNodeAndChildren(a,t,s,r,n)}getNodeFromIndex(e){return this.indexToNodeMap[e]}getNodeById(e){const t=Object.values(this.indexToNodeMap).filter(t=>t.id===e);return(!t||t.length>1)&&(r.safeLog("multiple nodes with this id!",Object.values(this.indexToNodeMap).filter(e=>e.id).map(e=>e.id),e),r.safeLog(t.length,t)),t&&1===t.length?t[0]:null}get(e,t){return Array.isArray(t)?t.map(t=>this.getSingle(e,t)):this.getSingle(e,t)}getSingle(e,t){const s=this.isRenderer?this.sharedRenderData.values:this.syncedSharedData.values;if(s[t]&&s[t][e.globalElementIndex]){const r=s[t][e.globalElementIndex];return 56938516===r?0:r/n.BUFFER_PRECISION_FACTOR}return e[t]}hasChanges(){return this.changed}getQueue(){return this.queue}clearQueue(){this.queue={},this.changed=!1}transferSyncedDataToRenderData(){for(let e in this.syncedSharedData.values){this.queue[e]=this.syncedSharedData.buffers[e],this.sharedRenderData.values[e]=this.syncedSharedData.values[e];const t=this.syncedSharedData.buffers[e].byteLength/Int32Array.BYTES_PER_ELEMENT,{buffer:s,values:r}=this.createBufferTransferValues(t,this.syncedSharedData.values[e]);this.syncedSharedData.buffers[e]=s,this.syncedSharedData.values[e]=r}}transferBufferQueueDataToSynced(){for(let e in this.sharedDataQueue.values){this.queue[e]=this.sharedDataQueue.buffers[e],this.syncedSharedData.values[e]=this.sharedDataQueue.values[e];const t=this.sharedDataQueue.buffers[e].byteLength/Int32Array.BYTES_PER_ELEMENT,{buffer:s,values:r}=this.createBufferTransferValues(t,this.sharedDataQueue.values[e]);this.sharedDataQueue.buffers[e]=s,this.sharedDataQueue.values[e]=r}}addToQueue(e){for(let t in e)if(e.hasOwnProperty(t))if("SharedArrayBuffer"in self&&e[t]instanceof SharedArrayBuffer){const s=e[t];this.syncedSharedData.buffers[t]=s,this.syncedSharedData.values[t]=new Int32Array(s)}else{const s=e[t];this.queue[t]||(this.queue[t]={});for(let e in s){if(!s.hasOwnProperty(e))continue;const r=parseInt(e);this.queue[t][r]=s[r]}}}updatePropertiesFromQueue(e,t=(()=>{})){for(let s in e){if(!e.hasOwnProperty(s))continue;const r=s.substr(0,"style;".length);if(this.ignoreDesign&&("style;"===r||-1!==n.IGNOREDESIGN_ATTRIBUTES.indexOf(s)))continue;let a;if("SharedArrayBuffer"in self&&e[s]instanceof SharedArrayBuffer){const t=e[s];this.isRenderer?(this.sharedRenderData.buffers[s]=t,this.sharedRenderData.values[s]=new Int32Array(t)):(this.syncedSharedData.buffers[s]=t,this.syncedSharedData.values[s]=new Int32Array(t))}else{a=e[s];for(let e in a){if(!a.hasOwnProperty(e))continue;const i=parseInt(e),o=this.getNodeFromIndex(i);if(!o){console.error("node not found at index",i);continue}let u=a[e];if("style;"===r){const e=s.substr("style;".length);this.applyStyleToNodeAndChildren(o,e,u,t)}else if("css;"===s.substr(0,4)){const[e,r]=s.substr(4).split(";");this.applyCssToNodeAndChildren(o,e,r,u,t)}else-1!==n.ROUNDED_ATTRS.indexOf(s)&&("string"==typeof u&&(u=parseFloat(u)),u=Math.round(u)),o[s]=u,t(o,s)}}}}getVisNodeFromSelector(e){const t=e.lastIndexOf(">"),s=e.substr(0,t),r=e.substr(t+1),n=s?this.cachedListSelections[s]:null;let a=-1;const i=r.indexOf(":nth-child(");if(-1!==i&&(a=parseInt(r.substr(i+11)),n&&n[a]))return n[a];const o=[];if(this.findMatchingChildren(this.data,e,0,o),o&&1===o.length){const e=o[0];return-1!==a&&(this.cachedListSelections[s]||(this.cachedListSelections[s]={}),this.cachedListSelections[s][a]=e),e}return null}getVisNodesFromSelector(e,t){const s=[];return this.findMatchingChildren(e,t,0,s),s}findChildrenOfType(e,t,s){const r=e=>{for(const n of e.children)n.type===t&&s.push(n),0!==e.children.length&&r(n)};r(e)}filterNodesBySelector(e,t,s){return t.filter(t=>n.isCssRulePartialMatch(s,t,e))}findMatchingChildren(e,t,s,r,a=[]){if(!t&&""!==t)throw console.error(e,t,s,r,a),Error("undefined selector");let i=t.split(">").map(e=>e.trim()),o=i[s];if(0===s&&"svg"===o&&(o=i[++s],s===i.length))return r.push(e),void a.push(t);if(t.match(/^[a-z]+$/))return this.findChildrenOfType(e,t,r);for(let u=0;u<e.children.length;u++){let d=e.children[u],h=!1;n.isCssRulePartialMatch(o,d,e)&&(s===i.length-1?(r.push(d),a.push(t)):h=!0),d.children&&(h||i.length<2)&&s+1<i.length&&this.findMatchingChildren(d,t,s+1,r,a)}}static isCssRulePartialMatch(e,t,s){if(":not("===e.substr(0,5)){const r=e.substr(0,e.length-1).substr(5);return!n.isCssRulePartialMatch(r,t,s)}if("."===e[0]){const s=e.split(".");if(s.shift(),t.className){let e=!0;for(const r of s)-1===t.className.split(" ").indexOf(r)&&(e=!1);return e}}else if("#"===e[0]){if(e.substr(1)===t.id)return!0}else if(e.match(/^[a-z]+$/)){if(e===t.type)return!0}else{if(-1!==e.indexOf(":nth-child(")){let r="any",n=e;":"!==e[0]&&(r=e.substr(0,e.indexOf(":")),n=e.substr(e.indexOf(":")));const a=parseInt(n.substr(":nth-child(".length));return s.children.indexOf(t)===a-1&&("any"===r||t.type===r)}if(-1!==e.indexOf(".")){const s=e.indexOf("."),r=e.substr(0,s),n=e.substr(s+1);if(r===t.type&&t.className&&-1!==t.className.split(" ").indexOf(n))return!0}}return!1}}t.VdomManager=n,n.IGNOREDESIGN_ATTRIBUTES=["fill","stroke","opacity"],n.BUFFER_PRECISION_FACTOR=10,n.ROUNDED_ATTRS=["cx","cy"]},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});let r=0;t.safeLog=function(...e){r<200&&(r++,console.log(...e))},t.safeErrorLog=function(...e){r<200&&(r++,console.error(...e))}}]);\n//# sourceMappingURL=4d4630292d41c84b4030.worker.js.map',s.p+"4d4630292d41c84b4030.worker.js")}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=s(1),i=s(0);class n{constructor(){this.interactionSelections=[]}initialize(e,t,s,r){this.canvas=e,this.svg=t,this.domHandler=s,this.vdom=r;const i=this.canvas.getBoundingClientRect();if(!("x"in i))throw new Error("SVG position not found");this.position={x:i.x,y:i.y},this.setupListeners()}setupListeners(){this.canvas.addEventListener("mousedown",e=>this.propagateMouseEvent(e)),this.canvas.addEventListener("touchstart",e=>this.propagateTouchEvent(e)),this.canvas.addEventListener("mousemove",e=>{const t=this.hoveredElement;this.hoveredElement=this.propagateMouseEvent(e),t!==this.hoveredElement&&t&&t.dispatchEvent(new MouseEvent("mouseout",e)),this.propagateMouseEvent(e,"mouseover")}),this.canvas.addEventListener("touchmove",e=>{const t=this.hoveredElement;this.hoveredElement=this.propagateTouchEvent(e),t!==this.hoveredElement&&t&&t.dispatchEvent(this.duplicateTouchEvent(e,"mouseout")),this.propagateTouchEvent(e,"mouseover")}),this.canvas.addEventListener("mouseup",e=>this.propagateMouseEvent(e)),this.canvas.addEventListener("touchend",e=>this.propagateTouchEvent(e)),this.canvas.addEventListener("click",e=>this.propagateMouseEvent(e)),this.canvas.addEventListener("wheel",e=>this.propagateWheelEvent(e))}captureD3On(e){e&&-1===this.interactionSelections.indexOf(e)&&this.interactionSelections.push(e)}propagateMouseEvent(e,t){return this.propagateEvent(new MouseEvent(t||e.type,e))}duplicateTouchEvent(e,t){const s=document.createEvent("TouchEvent");t||(t=e.type),s.initEvent(t,!0,!1);for(const t in e)"isTrusted"!==t&&e.hasOwnProperty(t)&&Object.defineProperty(s,t,{writable:!0,value:e[t]});Object.defineProperty(s,"type",{writable:!0,value:t});const r=[];for(let t=0;t<e.touches.length;t++){const s=e.touches[t];r.push({identifier:s.identifier,pageX:s.pageX,pageY:s.pageY,clientX:s.clientX,clientY:s.clientY})}return Object.defineProperty(s,"touches",{writable:!0,value:r}),s}propagateTouchEvent(e,t){return this.propagateEvent(this.duplicateTouchEvent(e,t))}propagateWheelEvent(e){return this.propagateEvent(new WheelEvent(e.type,e))}propagateEvent(e){let t;this.svg.dispatchEvent(e);const{x:s,y:r}=n.getMousePosition(e);for(let i of this.interactionSelections){let n=this.domHandler.getVisNode(i),o=1;if(n)for(let i of n.children){let n=this.nodeAtPosition(i,s,r);if(n){const s=this.domHandler.getElementFromNode(i),r=this.domHandler.getElementFromNode(n);r&&Object.defineProperty(e,"target",{writable:!0,value:r}),r&&(t=r,r.dispatchEvent(e)),s!==r&&(t||(t=s),s.dispatchEvent(e))}o++}else;}return t}static getMousePosition(e){let t={x:0,y:0};if(-1!==["wheel","click","mousemove","mousedown","mouseup","dblclick","contextmenu","mouseenter","mouseleave","mouseout","mouseover"].indexOf(e.type)&&"clientX"in e)t={x:e.clientX,y:e.clientY};else if("touch"===e.type.substr(0,5)){const s=e.touches?e.touches:[];if(s.length<1)return null;t={x:s[0].clientX,y:s[0].clientY}}else i.safeErrorLog("no event pos for event type ",e);return t}nodeAtPosition(e,t,s){if(t-=this.position.x,s-=this.position.y,"circle"===e.type){let i=this.vdom.get(e,"cx")||0,n=this.vdom.get(e,"cy")||0;if(e.transform){const t=r.DrawingUtils.parseTransform(e.transform);t.translateX&&(i+=t.translateX),t.translateY&&(n+=t.translateY)}return Math.sqrt(Math.pow(i-t,2)+Math.pow(n-s,2))<e.r&&e}if("rect"===e.type||"image"===e.type){let i=this.vdom.get(e,"x")||0,n=this.vdom.get(e,"y")||0;const o=e.width,a=e.height;if(e.transform){const t=r.DrawingUtils.parseTransform(e.transform);t.translateX&&(i+=t.translateX),t.translateY&&(n+=t.translateY)}const l=i+o/2,h=n+a/2,d=Math.abs(l-t),c=Math.abs(h-s);return d<o/2&&c<a/2&&e}if("g"===e.type){const r=this.domHandler.getTotalTransformation(e);r.translateX&&(t-=r.translateX),r.translateY&&(s-=r.translateY);let i=!1;for(let r=0;r<e.children.length;r++)this.nodeAtPosition(e.children[r],t,s)&&(i=e.children[r]);return i}return!1}}t.Interactionhandler=n},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=s(0);t.Redirector=class{constructor(e,t,s,r,i,n,o,a){this.domHandler=e,this.vdom=t,this.interactions=s,this.onSvgSizeSet=r,this.onAddNode=i,this.onRemoveNode=n,this.onSvgAppended=o,this.svgIsAssignedAndSizeSet=a,this.unassignedNodes=[],this.captureD3On(),this.replaceNativeRemoveChild(),this.replaceNativeAttribute(),this.replaceNativePathFunctions(),this.replaceNativeCreateElement(),this.replaceNativeAppendChild(),this.replaceD3Attr(),this.replaceNativeSelect(),this.replaceNativeGetComputedStyle(),this.replaceD3Select(),this.replaceD3Remove(),this.replaceNativeGetScreenCtm()}initialize(e){this.svg=e}captureD3On(){if(window.d3){const e=window.d3,t=e.selection.prototype.on,s=this;e.selection.prototype.on=function(){let e=this._parents&&this._parents.length?this._parents[0]:this[0].parentNode;e===document.children[0]&&(e=s.svg);let r=s.domHandler.isWithinSvg(e);return r&&s.interactions.captureD3On(e),t.apply(this,arguments)}}}replaceD3Select(){if(window.d3){const e=this,t=window.d3,s=s=>function(i){if("string"==typeof i){if("body"===i)return s.apply(this,arguments);let n;if(n=this===t?[e.svg]:this._groups?this._groups[0]:this[0],!n.filter(e=>e).length)return r.safeLog("element not found within svg, using normal execution",this,i),s.apply(this,arguments);let o=[];for(let t=0;t<n.length;t++){const r=n[t],a=e.domHandler.getVisNode(r);if(!a)return console.warn("node not found",r),s.apply(this,arguments);const l=e.vdom.getVisNodesFromSelector(a,i);o=o.concat(l.map(t=>e.domHandler.getElementFromNode(t)))}const a=s.apply(this,arguments);if((a._groups?a._groups[0]:a[0]).forEach(e=>{const t=e;-1===o.indexOf(t)&&o.push()}),a._groups)a._groups[0]=o;else{const e=a[0].parentNode;a[0]=o,a[0].parentNode=e}return a}return s.apply(this,arguments)};t.selection.prototype.selectAll=s(t.selection.prototype.selectAll),t.selectAll=s(t.selectAll),t.selection.prototype.select=s(t.selection.prototype.select),t.select=s(t.select);const i=t.selection.prototype.filter;t.selection.prototype.filter=function(t){const s=this._groups?this._groups[0]:this[0];if("string"!=typeof t)return i.apply(this,arguments);let r=s[0],n=1;for(;!r&&n<s.length;)n++,r=s[n];const o=r?e.domHandler.getNodeFromElement(r.parentNode):null,a=s.map(t=>e.domHandler.getNodeFromElement(t)),l=t.split(",").map(e=>e.trim()),h=[];for(const t of l){const s=e.vdom.filterNodesBySelector(o,a,t);for(const e of s)-1===h.indexOf(e)&&h.push(e)}const d=h.map(t=>e.domHandler.getElementFromNode(t)),c=i.apply(this,arguments);if(c._groups)c._groups[0]=d;else{const e=c[0].parentNode;c[0]=d,c[0].parentNode=e}return c}}}replaceNativeGetComputedStyle(){const e=window.getComputedStyle,t=this;window.getComputedStyle=function(s){if(s&&!t.domHandler.isWithinSvg(s)&&s!==window)return e.call(this,s);const r=t.domHandler.getNodeFromElement(s);return r?{getPropertyValue:e=>r.style[e]}:(console.warn("node not found for ",this,s),e.call(this,s))}}replaceNativeSelect(){const e=Element.prototype.querySelector,t=this;Element.prototype.querySelector=function(s){if(!t.domHandler.isWithinSvg(this))return e.apply(this,arguments);const r=t.domHandler.getVisNode(this),i=t.vdom.getVisNodesFromSelector(r,s);return 0===i.length?(console.warn("could not find selection",this,r,r.globalElementIndex,s),null):t.domHandler.getElementFromNode(i[0])}}replaceD3Attr(){const e=this;function t(t,s=""){return function(r,i){if(void 0===i){if(-1!==e.unassignedNodes.indexOf(this))return t.apply(this,arguments);{const s=this._groups?this._groups[0]:this[0];if(s[0]&&!e.domHandler.isWithinSvg(s[0]))return t.apply(this,arguments);if(s.length>1){const t=[];for(const i of s)t.push(e.domHandler.getAttributeFromSelector(i,r));return t}return e.domHandler.getAttributeFromSelector(s[0],r)}}{if("class"===r||!e.svg)return t.apply(this,arguments);let n=this._groups?this._groups[0]:this[0];if("object"==typeof n&&1===Object.keys(n).length&&n.parentNode){const t=n.parentNode;let s;s=t!==document.children[0]?e.domHandler.getVisNode(t):e.vdom.data,n=[];for(const t of s.children)n.push(e.domHandler.getElementFromNode(t))}if(!n)return t.apply(this,arguments);const o=[];try{for(const e of n)e&&o.push(e)}catch(e){console.error(n,this),console.error(e)}if(1===o.length){const n=o[0];if(!n)return console.warn("element not found",this,r,i),this;if(!e.domHandler.isWithinSvg(n))return t.apply(this,arguments);e.domHandler.queueSetAttributeOnElement(n,s+r,i)}else{if(!e.domHandler.isWithinSvg(n[0]))return t.apply(this,arguments);e.domHandler.queueSetAttributeOnSelection(o,s+r,i)}return o[0]!==e.svg||"width"!==r&&"height"!==r||(e.vdom.data[r]=parseInt(i),e.onSvgSizeSet()),this}}}if(window.d3){const s=window.d3,r=s.selection.prototype.attr;s.selection.prototype.attr=t(r);const i=s.selection.prototype.style;s.selection.prototype.style=t(i,"style;");const n=s.selection.prototype.classed;s.selection.prototype.classed=function(t,s){if(void 0!==s){e.domHandler.enableFrontendDesignProperties();let r=this._groups?this._groups[0]:this[0],i=-1;for(let n of r)if(i++,n){const r=e.domHandler.getNodeFromElement(n);if(!r){console.warn("node not found",n);continue}const o=r.className||"",a="function"==typeof s?s(n.__data__,i):s;if(!0===a){if(-1===o.indexOf(t)){let s=(o+" "+t).trim();e.domHandler.queueSetAttributeOnElement(n,"class",s)}}else if(!1===a){if(-1!==o.indexOf(t)){const s=o.replace(t,"").replace("  "," ");e.domHandler.queueSetAttributeOnElement(n,"class",s),r.removedClasses||(r.removedClasses=[]),r.removedClasses.push(t)}}}}return n.apply(this,arguments)};const o=s.selection.prototype.transition;s.selection.prototype.transition=function(){return e.domHandler.enableFrontendDesignProperties(),o.apply(this,arguments)};const a=s.selection.prototype.text;s.selection.prototype.text=function(t){if(void 0!==t){let s=this._groups?this._groups[0]:this[0],r=0;for(let i of s)i&&e.domHandler.isWithinSvg(i)&&e.domHandler.queueSetAttributeOnElement(i,"text",t),r++}return a.apply(this,arguments)}}}replaceD3Remove(){if(window.d3){const e=window.d3,t=this.getNewRemoveChild(()=>{},!0),s=function(){let e=this._groups?this._groups[0]:this[0];if(e.length){let s=null;for(let r=e.length-1;r>-1;r--){const i=e[r];i&&(s=i.parentNode,s||console.error("element has no parent node",i),t.call(s,i))}}return this};e.selection.prototype.remove=s}}replaceNativeCreateElement(){const e=document.createElementNS,t=this;document.createElementNS=function(){let s=Array.from(arguments);const r=e.apply(this,s);return r.appendChild=t.getNewAppendChild(r.appendChild),t.unassignedNodes.push(r),r}}getNewRemoveChild(e,t=!1){const s=this;return function(r){if(!this)return console.error("context not defined"),r;if(!s.domHandler.isWithinSvg(r))return e.apply(this,arguments);const i=s.domHandler.getNodeFromElement(this),n=s.domHandler.getNodeFromElement(r);return n?(Object.defineProperty(r,"parentNode",{writable:!0,value:void 0}),s.onRemoveNode(n,i),s.domHandler.removeNode(r,n,i),t||i||console.error("parent not found",i,this,r),delete r.selector,r):(console.error("node not found",n,r,this,i),e.apply(this,arguments))}}replaceNativeRemoveChild(){Element.prototype.removeChild=this.getNewRemoveChild(Element.prototype.removeChild)}getNewAppendChild(e){const t=this;return function(s){if(!t.svgIsAssignedAndSizeSet()){if(t.svg||"svg"!==s.tagName)return e.apply(this,arguments);{const r=e.apply(this,arguments);return t.onSvgAppended(s),r}}if(!t.domHandler.isWithinSvg(this))return e.apply(this,arguments);Object.defineProperty(s,"ownerSVGElement",{writable:!0,value:t.svg}),s.appendChild=r=>t.getNewAppendChild(e).call(s,r);const r=t.domHandler.getNodeFromElement(this);if(!r)return console.error("parent node not found",this);let i,n=!1;if(s.globalElementIndex?(i=t.domHandler.getVisNode(s),t.getNewRemoveChild(()=>{}).call(this,s),n=!0):i=t.domHandler.getNodeDataFromEl(s),Object.defineProperty(s,"style",{writable:!0,value:{setProperty:function(e,r){t.domHandler.queueSetAttributeOnElement(s,"style;"+e,r)},getPropertyValue:function(e){return t.domHandler.enableFrontendDesignProperties(),i.style[e]},removeProperty:function(){console.log("remove property not yet implemented.")}}}),Object.defineProperty(s,"parentNode",{writable:!0,value:this}),t.domHandler.linkNodeToElement(i,s),t.vdom.addNodeToParent(i,r.globalElementIndex),t.domHandler.restyleNode(i),t.onAddNode(i,r,n),-1!==t.unassignedNodes.indexOf(s)){const e=t.unassignedNodes.indexOf(s);t.unassignedNodes.splice(e,1)}return s}}replaceNativeAppendChild(){const e=Element.prototype.appendChild,t=this.getNewAppendChild(e);Element.prototype.appendChild=t,Element.prototype.insertBefore=function(e,s){return t.call(this,e),e}}replaceNativePathFunctions(){const e=this,t=SVGPathElement.prototype.getTotalLength;SVGPathElement.prototype.getTotalLength=function(){if(e.domHandler.isWithinSvg(this)){const t=this.getAttribute("d");e.origSetAttribute.call(this,"d",t)}return t.apply(this,arguments)}}replaceNativeAttribute(){this.origSetAttribute=Element.prototype.setAttribute;const e=this,t=t=>function(s,r){if("easypz"!==s&&-1===e.unassignedNodes.indexOf(this)){if("class"===s&&t.apply(this,arguments),!e.domHandler.isWithinSvg(this))return t.apply(this,arguments);e.domHandler.queueSetAttributeOnElement(this,s,r)}else t.apply(this,arguments)};Element.prototype.setAttribute=t(Element.prototype.setAttribute),Element.prototype.setAttributeNS=t(Element.prototype.setAttributeNS);const s=Element.prototype.getAttribute;Element.prototype.getAttribute=function(t){const r=-1!==e.unassignedNodes.indexOf(this),i=e.domHandler.isWithinSvg(this);if(r||!i||!e.svg)return s.apply(this,arguments);try{return e.domHandler.getAttributeFromSelector(this,t)}catch(e){return console.error(e),s.apply(this,arguments)}}}replaceNativeGetScreenCtm(){const e=SVGGraphicsElement.prototype.getScreenCTM;SVGGraphicsElement.prototype.getScreenCTM=function(){const t=e.apply(this,arguments);if(t)return t;const s=document.createElementNS("http://www.w3.org/2000/svg","svg");return s.createSVGMatrix()}}}}])}));
//# sourceMappingURL=ssvg.js.map