inline-style-editor 1.0.4 → 1.1.0

package/docs/index.html

@@ -340,13 +340,44 @@
                         return [countryElem];
                     }
                     return [];
+                },
+                onStyleChanged(target, eventType, cssProp, value) {
+                    console.log(target, eventType, cssProp, value);
+                },
+                customProps: {
+                    'scale': {
+                        type: 'slider', min: 0.5, max: 5, step: 0.1,
+                        getter: (el) => {
+                            const transform = el.getAttribute('transform');
+                            if (!transform) return 1;
+                            else {
+                                let scaleValue = transformStr.match(/scale\(([0-9\.]+)\)/);
+                                if (scaleValue.length > 1) return parseFloat(scaleValue[1]);
+                            }
+                            return 1;
+                        },
+                        setter: (el, val) => {
+                            const transform = el.getAttribute('transform');
+                            const scaleStr = `scale(${val})`;
+                            if (!transform) {
+                                el.setAttribute("transform", scaleStr);
+                            }
+                            else if (transform.length && !transform.includes('scale')) {
+                                el.setAttribute("transform", `${transform} ${scaleStr}`);
+                            }
+                            else {
+                                const newAttr = transform.replace(/scale(.*)/, scaleStr);
+                                el.setAttribute("transform", newAttr);
+                            }
+                        }
+                    }
                 }
             }
         );
         document.body.addEventListener('click', (e) => {
             const target = e.target;
             editor.open(target, e.pageX, e.pageY);
-        }); 
+        });
     </script>
 </body>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inline-style-editor",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Update CSS rules or add inline style to elements visualy",
   "scripts": {
     "build": "rollup --config",
@@ -28,9 +28,6 @@
   },
   "dependencies": {
     "d3-contour": "^4.0.0",
-    "inline-style-editor": "^1.0.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.pick": "^4.4.0",
     "parse-svg-path": "^0.1.2",
     "svelte": "^3.49.0",
     "vanilla-picker": "^2.12.1"

package/src/components/InlineStyleEditor.svelte

@@ -1,9 +1,8 @@
 <script>
-    import '../assets/index.scss';
-    import { onMount, onDestroy } from "svelte";
-    import pick from 'lodash.pick';
-    import debounce from 'lodash.debounce';
+    import { onMount, onDestroy, tick } from "svelte";
 
+    import '../assets/index.scss';
+    import { pick, debounce } from '../util/util';
     import { computeContours } from '../util/boxesContour';
     import ColorPicker from './ColorPicker.svelte';
     import { getFonts } from '../util/fonts';
@@ -28,20 +27,26 @@
         "stroke-dasharray": {type: "slider", min: 0, max: 30, suffix: 'px'},
         "background-color": {type: "color"},
     };
+    
+
+    export let getAdditionalElems = () => [];
+    export let listenOnClick = false;
+    export let onStyleChanged = () => {};
+    export let customProps = {};
+
     const typeText = "text";
     const typeBorder = "border";
     const typeStroke = "stroke";
     const typeBackground = "background";
+    const customType = "custom";
     const propByType = {
         [typeText]: fontProps,
         [typeBorder]: borderProps,
         [typeStroke]: pathProps,
         [typeBackground]: backgroundProps,
+        [customType]: Object.keys(customProps),
     };
 
-    export let getAdditionalElems = () => [];
-    export let listenOnClick = false;
-    export let onStyleChanged = () => {};
     let elementToListen = null;
     let positionAnchor;
     let self;
@@ -72,15 +77,27 @@
         };
     }
     $: {
-        if (curType && currentRule){
-            const _allCurrentPropDefs = pick(cssPropByType, propByType[curType]);
+        if (curType && currentRule) {
+            const allProps = {...cssPropByType, ...customProps};
+            const _allCurrentPropDefs = pick(allProps, propByType[curType]);
             Object.keys(_allCurrentPropDefs).forEach(key => {
-                _allCurrentPropDefs[key].displayed = getComputedPropValue(currentElement, key, 'raw');
                 const propSelectType = _allCurrentPropDefs[key].type;
                 let retrieveType = 'number';
                 if (propSelectType === 'color') retrieveType = 'rgb';
                 else if (propSelectType === 'select') retrieveType = 'raw';
-                _allCurrentPropDefs[key].value = getComputedPropValue(currentElement, key, retrieveType);
+                if (_allCurrentPropDefs[key].getter) {
+                    const val =  _allCurrentPropDefs[key].getter(currentElement);
+                    if (val === null) {
+                        delete _allCurrentPropDefs[key];
+                        return; 
+                    }
+                    _allCurrentPropDefs[key].value = val;
+                    _allCurrentPropDefs[key].displayed = val;
+                }
+                else {
+                    _allCurrentPropDefs[key].displayed = getComputedPropValue(currentElement, key, 'raw');
+                    _allCurrentPropDefs[key].value = getComputedPropValue(currentElement, key, retrieveType);
+                }
             });
             
             propsByType = Object.entries(_allCurrentPropDefs).reduce((byType, [propName, selectorDef]) => {
@@ -202,6 +219,9 @@
         targetsToSearch = [el, ...getAdditionalElems(el)];
         allTypes = getEditableTypes(targetsToSearch);
         allRules = getMatchedCSSRules(targetsToSearch);
+        if (Object.keys(customProps).length) {
+            allTypes[0].push(customType);
+        }
         if (x && y) show(x, y);
         else {
             const rect = getBoundingBoxInfos(el, 15);
@@ -215,6 +235,10 @@
         pathWithHoles = ''
     }
 
+    export function isOpened() {
+        return self.style.display === 'block';
+    }
+
     function overlayClicked() {
         close();
     }
@@ -252,19 +276,25 @@
         };
     }
 
-    function _updateCssRule(cssPropName, val, suffix) {
+    function _updateProp(propName, val, suffix) {
         const finalValue = suffix ? val + suffix : val;
         if (currentRule === 'inline') {
-            const style = currentElement.style; // do not trigger reactivity on currentElement
-            style[cssPropName] = finalValue;
+            if (allCurrentPropDefs[propName].setter) {
+                allCurrentPropDefs[propName].setter(currentElement, val);
+            }
+            else {
+                const style = currentElement.style; // do not trigger reactivity on currentElement
+                style[propName] = finalValue;
+            }
         }
-        else currentRule.style.setProperty(cssPropName, finalValue);
-        allCurrentPropDefs[cssPropName].value = val;
-        allCurrentPropDefs[cssPropName].displayed = finalValue;
-        onStyleChanged(currentElement, currentRule, cssPropName, finalValue);
+        else currentRule.style.setProperty(propName, finalValue);
+        allCurrentPropDefs[propName].value = val;
+        allCurrentPropDefs[propName].displayed = finalValue;
+        
+        onStyleChanged(currentElement, currentRule, propName, finalValue);
         updateHelpers();
     } 
-    const updateCssRule = debounce(_updateCssRule, 100);
+    const updateProp = debounce(_updateProp, 100);
     
     function udpatePageDimensions() {
         const bodyStyle     = getComputedStyle(document.body);
@@ -310,6 +340,13 @@
         currentElement.parentNode.appendChild(currentElement);
     }
     
+    function selectRule(ruleIndex) {
+        const newRule = allRules[selectedElemIndex]?.[ruleIndex];
+        if (newRule !== 'inline' && selectedTypeIndex === allTypes[selectedElemIndex].length - 1 ) {
+            selectedTypeIndex = 0;
+        }
+        selectedRuleIndex = ruleIndex;
+    }
 </script>
 
 <div bind:this={positionAnchor} style="position: absolute;"> </div>
@@ -340,14 +377,17 @@ on:click={overlayClicked}>
         {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
             <span title={ruleName}
                 class:selected="{selectedRuleIndex === ruleIndex}" 
-                on:click="{() => {selectedRuleIndex = ruleIndex;}}"
+                on:click="{() => { selectRule(ruleIndex); }}"
             >  {ruleName}</span>
         {/each}
     </div>
     <div class="select-tab">
         <b> Property type: </b>
         {#each allTypes[selectedElemIndex] || [] as type, typeIndex}
-            <span class:selected="{selectedTypeIndex === typeIndex}" on:click="{() => {selectedTypeIndex = typeIndex;}}"> {type} </span>
+            <!-- Only display "custom" on "inline" rule -->
+            {#if type !== 'custom' || currentRule === 'inline'} 
+                <span class:selected="{selectedTypeIndex === typeIndex}" on:click="{() => {selectedTypeIndex = typeIndex;}}"> {type} </span>
+            {/if}
         {/each}
     </div>
     {#if allTypes[selectedElemIndex]}
@@ -356,7 +396,7 @@ on:click={overlayClicked}>
         {@const selectedName = choices.props[choices.selected]}
             <div class="prop-section">
                 {#if choices.props.length > 1}
-                    <div> <select on:change="{(e) => choices.selected = e.target.value}">
+                    <div> <select on:change="{async (e) => {choices.selected = e.target.value; await tick();}}">
                         {#each choices.props as propName, i}
                             <option selected={i === choices.selected} value="{i}"> {propName} </option>
                         {/each}
@@ -365,13 +405,15 @@ on:click={overlayClicked}>
                     <span> { selectedName } </span>
                 {/if}
                 {#if propType === 'slider'}
-                    <input type=range value={allCurrentPropDefs[selectedName].value}
-                    min={allCurrentPropDefs[selectedName].min} 
-                    max={allCurrentPropDefs[selectedName].max} 
-                    on:change={(e) => updateCssRule(selectedName, e.target.value, allCurrentPropDefs[selectedName].suffix, e.target)}/>
+                <input type=range
+                min={allCurrentPropDefs[selectedName].min} 
+                max={allCurrentPropDefs[selectedName].max}
+                step={allCurrentPropDefs[selectedName].step || 1}
+                value={allCurrentPropDefs[selectedName].value}
+                    on:change={(e) => updateProp(selectedName, e.target.value, allCurrentPropDefs[selectedName].suffix, e.target)}/>
                     <span class="current-value"> { allCurrentPropDefs[selectedName].displayed } </span> 
                 {:else if propType == 'select'}
-                    <select on:change={(e) => updateCssRule(selectedName, e.target.value)}>
+                    <select on:change={(e) => updateProp(selectedName, e.target.value)}>
                         {#each allCurrentPropDefs[selectedName].choices() as choice}
                             <option selected={choice == allCurrentPropDefs[selectedName].value || null}> {choice} </option>
                         {/each}
@@ -379,7 +421,7 @@ on:click={overlayClicked}>
                 {:else if propType == 'color'}
                     <ColorPicker 
                         value={allCurrentPropDefs[selectedName].value}
-                        onChange={(color => updateCssRule(selectedName, color))}
+                        onChange={(color => updateProp(selectedName, color))}
                     /> 
                 {/if}
             </div>

package/src/util/util.js

@@ -0,0 +1,25 @@
+
+
+function pick(obj, keys) {
+    return keys.reduce((picked, curKey) => {
+        picked[curKey] = obj[curKey];
+        return picked;
+    }, {});
+}
+
+function debounce(func, wait, immediate = false) {
+    let timeout;
+    return function() {
+        const context = this, args = arguments;
+        const later = function() {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+        };
+        const callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) func.apply(context, args);
+    };
+};
+
+export { pick, debounce };

package/stats.html

@@ -4014,7 +4014,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"inline-style-editor.js","children":[{"name":"node_modules","children":[{"name":"svelte/internal/index.mjs","uid":"0a7f-110"},{"name":"lodash.pick/index.js","uid":"0a7f-114"},{"name":"lodash.debounce/index.js","uid":"0a7f-116"},{"name":"d3-array/src","children":[{"uid":"0a7f-118","name":"ascending.js"},{"uid":"0a7f-120","name":"descending.js"},{"uid":"0a7f-122","name":"bisector.js"},{"uid":"0a7f-124","name":"number.js"},{"uid":"0a7f-126","name":"bisect.js"},{"uid":"0a7f-128","name":"count.js"},{"uid":"0a7f-130","name":"extent.js"},{"uid":"0a7f-132","name":"ticks.js"},{"name":"threshold/sturges.js","uid":"0a7f-134"}]},{"name":"d3-contour/src","children":[{"uid":"0a7f-136","name":"array.js"},{"uid":"0a7f-138","name":"ascending.js"},{"uid":"0a7f-140","name":"area.js"},{"uid":"0a7f-142","name":"constant.js"},{"uid":"0a7f-144","name":"contains.js"},{"uid":"0a7f-146","name":"noop.js"},{"uid":"0a7f-148","name":"contours.js"}]},{"name":"vanilla-picker/dist/vanilla-picker.csp.mjs","uid":"0a7f-152"}]},{"uid":"0a7f-112","name":"\u0000commonjsHelpers.js"},{"name":"src","children":[{"name":"util","children":[{"uid":"0a7f-150","name":"boxesContour.js"},{"uid":"0a7f-156","name":"fonts.js"}]},{"name":"components","children":[{"uid":"0a7f-154","name":"ColorPicker.svelte"},{"uid":"0a7f-158","name":"InlineStyleEditor.svelte"}]},{"uid":"0a7f-160","name":"index.js"}]}]}],"isRoot":true},"nodeParts":{"0a7f-110":{"renderedLength":12246,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-109"},"0a7f-112":{"renderedLength":196,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-111"},"0a7f-114":{"renderedLength":15156,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-113"},"0a7f-116":{"renderedLength":12180,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-115"},"0a7f-118":{"renderedLength":125,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-117"},"0a7f-120":{"renderedLength":156,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-119"},"0a7f-122":{"renderedLength":1664,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-121"},"0a7f-124":{"renderedLength":66,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-123"},"0a7f-126":{"renderedLength":55,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-125"},"0a7f-128":{"renderedLength":480,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-127"},"0a7f-130":{"renderedLength":823,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-129"},"0a7f-132":{"renderedLength":1901,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-131"},"0a7f-134":{"renderedLength":109,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-133"},"0a7f-136":{"renderedLength":62,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-135"},"0a7f-138":{"renderedLength":56,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-137"},"0a7f-140":{"renderedLength":239,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-139"},"0a7f-142":{"renderedLength":32,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-141"},"0a7f-144":{"renderedLength":956,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-143"},"0a7f-146":{"renderedLength":22,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-145"},"0a7f-148":{"renderedLength":6572,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-147"},"0a7f-150":{"renderedLength":3648,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-149"},"0a7f-152":{"renderedLength":34619,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-151"},"0a7f-154":{"renderedLength":2504,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-153"},"0a7f-156":{"renderedLength":2194,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-155"},"0a7f-158":{"renderedLength":48745,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-157"},"0a7f-160":{"renderedLength":153,"gzipLength":0,"brotliLength":0,"mainUid":"0a7f-159"}},"nodeMetas":{"0a7f-109":{"id":"/node_modules/svelte/internal/index.mjs","moduleParts":{"inline-style-editor.js":"0a7f-110"},"imported":[],"importedBy":[{"uid":"0a7f-157"},{"uid":"0a7f-162"},{"uid":"0a7f-153"}]},"0a7f-111":{"id":"\u0000commonjsHelpers.js","moduleParts":{"inline-style-editor.js":"0a7f-112"},"imported":[],"importedBy":[{"uid":"0a7f-113"},{"uid":"0a7f-115"}]},"0a7f-113":{"id":"/node_modules/lodash.pick/index.js","moduleParts":{"inline-style-editor.js":"0a7f-114"},"imported":[{"uid":"0a7f-111"}],"importedBy":[{"uid":"0a7f-157"}]},"0a7f-115":{"id":"/node_modules/lodash.debounce/index.js","moduleParts":{"inline-style-editor.js":"0a7f-116"},"imported":[{"uid":"0a7f-111"}],"importedBy":[{"uid":"0a7f-157"}]},"0a7f-117":{"id":"/node_modules/d3-array/src/ascending.js","moduleParts":{"inline-style-editor.js":"0a7f-118"},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-125"},{"uid":"0a7f-121"},{"uid":"0a7f-172"},{"uid":"0a7f-190"},{"uid":"0a7f-191"},{"uid":"0a7f-192"},{"uid":"0a7f-193"},{"uid":"0a7f-194"},{"uid":"0a7f-207"}]},"0a7f-119":{"id":"/node_modules/d3-array/src/descending.js","moduleParts":{"inline-style-editor.js":"0a7f-120"},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-121"}]},"0a7f-121":{"id":"/node_modules/d3-array/src/bisector.js","moduleParts":{"inline-style-editor.js":"0a7f-122"},"imported":[{"uid":"0a7f-117"},{"uid":"0a7f-119"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-125"}]},"0a7f-123":{"id":"/node_modules/d3-array/src/number.js","moduleParts":{"inline-style-editor.js":"0a7f-124"},"imported":[],"importedBy":[{"uid":"0a7f-125"},{"uid":"0a7f-187"}]},"0a7f-125":{"id":"/node_modules/d3-array/src/bisect.js","moduleParts":{"inline-style-editor.js":"0a7f-126"},"imported":[{"uid":"0a7f-117"},{"uid":"0a7f-121"},{"uid":"0a7f-123"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-173"}]},"0a7f-127":{"id":"/node_modules/d3-array/src/count.js","moduleParts":{"inline-style-editor.js":"0a7f-128"},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-174"},{"uid":"0a7f-175"},{"uid":"0a7f-133"}]},"0a7f-129":{"id":"/node_modules/d3-array/src/extent.js","moduleParts":{"inline-style-editor.js":"0a7f-130"},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-173"}]},"0a7f-131":{"id":"/node_modules/d3-array/src/ticks.js","moduleParts":{"inline-style-editor.js":"0a7f-132"},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-173"},{"uid":"0a7f-184"}]},"0a7f-133":{"id":"/node_modules/d3-array/src/threshold/sturges.js","moduleParts":{"inline-style-editor.js":"0a7f-134"},"imported":[{"uid":"0a7f-127"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-173"}]},"0a7f-135":{"id":"/node_modules/d3-contour/src/array.js","moduleParts":{"inline-style-editor.js":"0a7f-136"},"imported":[],"importedBy":[{"uid":"0a7f-147"},{"uid":"0a7f-164"}]},"0a7f-137":{"id":"/node_modules/d3-contour/src/ascending.js","moduleParts":{"inline-style-editor.js":"0a7f-138"},"imported":[],"importedBy":[{"uid":"0a7f-147"}]},"0a7f-139":{"id":"/node_modules/d3-contour/src/area.js","moduleParts":{"inline-style-editor.js":"0a7f-140"},"imported":[],"importedBy":[{"uid":"0a7f-147"}]},"0a7f-141":{"id":"/node_modules/d3-contour/src/constant.js","moduleParts":{"inline-style-editor.js":"0a7f-142"},"imported":[],"importedBy":[{"uid":"0a7f-147"},{"uid":"0a7f-164"}]},"0a7f-143":{"id":"/node_modules/d3-contour/src/contains.js","moduleParts":{"inline-style-editor.js":"0a7f-144"},"imported":[],"importedBy":[{"uid":"0a7f-147"}]},"0a7f-145":{"id":"/node_modules/d3-contour/src/noop.js","moduleParts":{"inline-style-editor.js":"0a7f-146"},"imported":[],"importedBy":[{"uid":"0a7f-147"}]},"0a7f-147":{"id":"/node_modules/d3-contour/src/contours.js","moduleParts":{"inline-style-editor.js":"0a7f-148"},"imported":[{"uid":"0a7f-165"},{"uid":"0a7f-135"},{"uid":"0a7f-137"},{"uid":"0a7f-139"},{"uid":"0a7f-141"},{"uid":"0a7f-143"},{"uid":"0a7f-145"}],"importedBy":[{"uid":"0a7f-163"},{"uid":"0a7f-164"}]},"0a7f-149":{"id":"/src/util/boxesContour.js","moduleParts":{"inline-style-editor.js":"0a7f-150"},"imported":[{"uid":"0a7f-163"}],"importedBy":[{"uid":"0a7f-157"}]},"0a7f-151":{"id":"/node_modules/vanilla-picker/dist/vanilla-picker.csp.mjs","moduleParts":{"inline-style-editor.js":"0a7f-152"},"imported":[],"importedBy":[{"uid":"0a7f-153"}]},"0a7f-153":{"id":"/src/components/ColorPicker.svelte","moduleParts":{"inline-style-editor.js":"0a7f-154"},"imported":[{"uid":"0a7f-109"},{"uid":"0a7f-151"},{"uid":"0a7f-162"}],"importedBy":[{"uid":"0a7f-157"}]},"0a7f-155":{"id":"/src/util/fonts.js","moduleParts":{"inline-style-editor.js":"0a7f-156"},"imported":[],"importedBy":[{"uid":"0a7f-157"}]},"0a7f-157":{"id":"/src/components/InlineStyleEditor.svelte","moduleParts":{"inline-style-editor.js":"0a7f-158"},"imported":[{"uid":"0a7f-109"},{"uid":"0a7f-161"},{"uid":"0a7f-162"},{"uid":"0a7f-113"},{"uid":"0a7f-115"},{"uid":"0a7f-149"},{"uid":"0a7f-153"},{"uid":"0a7f-155"}],"importedBy":[{"uid":"0a7f-159"}]},"0a7f-159":{"id":"/src/index.js","moduleParts":{"inline-style-editor.js":"0a7f-160"},"imported":[{"uid":"0a7f-157"}],"importedBy":[],"isEntry":true},"0a7f-161":{"id":"/src/assets/index.scss","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-157"}]},"0a7f-162":{"id":"/node_modules/svelte/index.mjs","moduleParts":{},"imported":[{"uid":"0a7f-109"}],"importedBy":[{"uid":"0a7f-157"},{"uid":"0a7f-153"}]},"0a7f-163":{"id":"/node_modules/d3-contour/src/index.js","moduleParts":{},"imported":[{"uid":"0a7f-147"},{"uid":"0a7f-164"}],"importedBy":[{"uid":"0a7f-149"}]},"0a7f-164":{"id":"/node_modules/d3-contour/src/density.js","moduleParts":{},"imported":[{"uid":"0a7f-165"},{"uid":"0a7f-135"},{"uid":"0a7f-141"},{"uid":"0a7f-147"}],"importedBy":[{"uid":"0a7f-163"}]},"0a7f-165":{"id":"/node_modules/d3-array/src/index.js","moduleParts":{},"imported":[{"uid":"0a7f-125"},{"uid":"0a7f-117"},{"uid":"0a7f-121"},{"uid":"0a7f-166"},{"uid":"0a7f-127"},{"uid":"0a7f-167"},{"uid":"0a7f-168"},{"uid":"0a7f-119"},{"uid":"0a7f-169"},{"uid":"0a7f-129"},{"uid":"0a7f-170"},{"uid":"0a7f-171"},{"uid":"0a7f-172"},{"uid":"0a7f-173"},{"uid":"0a7f-174"},{"uid":"0a7f-175"},{"uid":"0a7f-133"},{"uid":"0a7f-176"},{"uid":"0a7f-177"},{"uid":"0a7f-178"},{"uid":"0a7f-179"},{"uid":"0a7f-180"},{"uid":"0a7f-181"},{"uid":"0a7f-182"},{"uid":"0a7f-183"},{"uid":"0a7f-184"},{"uid":"0a7f-185"},{"uid":"0a7f-186"},{"uid":"0a7f-187"},{"uid":"0a7f-188"},{"uid":"0a7f-189"},{"uid":"0a7f-190"},{"uid":"0a7f-191"},{"uid":"0a7f-192"},{"uid":"0a7f-193"},{"uid":"0a7f-194"},{"uid":"0a7f-195"},{"uid":"0a7f-196"},{"uid":"0a7f-197"},{"uid":"0a7f-131"},{"uid":"0a7f-198"},{"uid":"0a7f-199"},{"uid":"0a7f-200"},{"uid":"0a7f-201"},{"uid":"0a7f-202"},{"uid":"0a7f-203"},{"uid":"0a7f-204"},{"uid":"0a7f-205"},{"uid":"0a7f-206"},{"uid":"0a7f-207"},{"uid":"0a7f-208"},{"uid":"0a7f-209"},{"uid":"0a7f-210"},{"uid":"0a7f-211"},{"uid":"0a7f-212"},{"uid":"0a7f-213"},{"uid":"0a7f-214"}],"importedBy":[{"uid":"0a7f-147"},{"uid":"0a7f-164"}]},"0a7f-166":{"id":"/node_modules/d3-array/src/blur.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-167":{"id":"/node_modules/d3-array/src/cross.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-168":{"id":"/node_modules/d3-array/src/cumsum.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-169":{"id":"/node_modules/d3-array/src/deviation.js","moduleParts":{},"imported":[{"uid":"0a7f-199"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-175"}]},"0a7f-170":{"id":"/node_modules/d3-array/src/fsum.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-171":{"id":"/node_modules/d3-array/src/group.js","moduleParts":{},"imported":[{"uid":"0a7f-214"},{"uid":"0a7f-215"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-172"}]},"0a7f-172":{"id":"/node_modules/d3-array/src/groupSort.js","moduleParts":{},"imported":[{"uid":"0a7f-117"},{"uid":"0a7f-171"},{"uid":"0a7f-207"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-173":{"id":"/node_modules/d3-array/src/bin.js","moduleParts":{},"imported":[{"uid":"0a7f-216"},{"uid":"0a7f-125"},{"uid":"0a7f-217"},{"uid":"0a7f-129"},{"uid":"0a7f-215"},{"uid":"0a7f-184"},{"uid":"0a7f-131"},{"uid":"0a7f-133"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-174":{"id":"/node_modules/d3-array/src/threshold/freedmanDiaconis.js","moduleParts":{},"imported":[{"uid":"0a7f-127"},{"uid":"0a7f-187"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-175":{"id":"/node_modules/d3-array/src/threshold/scott.js","moduleParts":{},"imported":[{"uid":"0a7f-127"},{"uid":"0a7f-169"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-176":{"id":"/node_modules/d3-array/src/max.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-187"}]},"0a7f-177":{"id":"/node_modules/d3-array/src/maxIndex.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-187"},{"uid":"0a7f-194"}]},"0a7f-178":{"id":"/node_modules/d3-array/src/mean.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-179":{"id":"/node_modules/d3-array/src/median.js","moduleParts":{},"imported":[{"uid":"0a7f-187"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-180":{"id":"/node_modules/d3-array/src/merge.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-181":{"id":"/node_modules/d3-array/src/min.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-187"},{"uid":"0a7f-198"}]},"0a7f-182":{"id":"/node_modules/d3-array/src/minIndex.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-187"},{"uid":"0a7f-192"}]},"0a7f-183":{"id":"/node_modules/d3-array/src/mode.js","moduleParts":{},"imported":[{"uid":"0a7f-214"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-184":{"id":"/node_modules/d3-array/src/nice.js","moduleParts":{},"imported":[{"uid":"0a7f-131"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-173"}]},"0a7f-185":{"id":"/node_modules/d3-array/src/pairs.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-186":{"id":"/node_modules/d3-array/src/permute.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-207"}]},"0a7f-187":{"id":"/node_modules/d3-array/src/quantile.js","moduleParts":{},"imported":[{"uid":"0a7f-176"},{"uid":"0a7f-177"},{"uid":"0a7f-181"},{"uid":"0a7f-182"},{"uid":"0a7f-188"},{"uid":"0a7f-123"},{"uid":"0a7f-207"},{"uid":"0a7f-193"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-174"},{"uid":"0a7f-179"}]},"0a7f-188":{"id":"/node_modules/d3-array/src/quickselect.js","moduleParts":{},"imported":[{"uid":"0a7f-207"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-187"}]},"0a7f-189":{"id":"/node_modules/d3-array/src/range.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-190":{"id":"/node_modules/d3-array/src/rank.js","moduleParts":{},"imported":[{"uid":"0a7f-117"},{"uid":"0a7f-207"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-191":{"id":"/node_modules/d3-array/src/least.js","moduleParts":{},"imported":[{"uid":"0a7f-117"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-192":{"id":"/node_modules/d3-array/src/leastIndex.js","moduleParts":{},"imported":[{"uid":"0a7f-117"},{"uid":"0a7f-182"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-195"}]},"0a7f-193":{"id":"/node_modules/d3-array/src/greatest.js","moduleParts":{},"imported":[{"uid":"0a7f-117"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-187"}]},"0a7f-194":{"id":"/node_modules/d3-array/src/greatestIndex.js","moduleParts":{},"imported":[{"uid":"0a7f-117"},{"uid":"0a7f-177"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-195":{"id":"/node_modules/d3-array/src/scan.js","moduleParts":{},"imported":[{"uid":"0a7f-192"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-196":{"id":"/node_modules/d3-array/src/shuffle.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-197":{"id":"/node_modules/d3-array/src/sum.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-198":{"id":"/node_modules/d3-array/src/transpose.js","moduleParts":{},"imported":[{"uid":"0a7f-181"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-200"}]},"0a7f-199":{"id":"/node_modules/d3-array/src/variance.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-169"}]},"0a7f-200":{"id":"/node_modules/d3-array/src/zip.js","moduleParts":{},"imported":[{"uid":"0a7f-198"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-201":{"id":"/node_modules/d3-array/src/every.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-202":{"id":"/node_modules/d3-array/src/some.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-203":{"id":"/node_modules/d3-array/src/filter.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-204":{"id":"/node_modules/d3-array/src/map.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-205":{"id":"/node_modules/d3-array/src/reduce.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-206":{"id":"/node_modules/d3-array/src/reverse.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-207":{"id":"/node_modules/d3-array/src/sort.js","moduleParts":{},"imported":[{"uid":"0a7f-117"},{"uid":"0a7f-186"}],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-172"},{"uid":"0a7f-187"},{"uid":"0a7f-188"},{"uid":"0a7f-190"}]},"0a7f-208":{"id":"/node_modules/d3-array/src/difference.js","moduleParts":{},"imported":[{"uid":"0a7f-214"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-209":{"id":"/node_modules/d3-array/src/disjoint.js","moduleParts":{},"imported":[{"uid":"0a7f-214"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-210":{"id":"/node_modules/d3-array/src/intersection.js","moduleParts":{},"imported":[{"uid":"0a7f-214"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-211":{"id":"/node_modules/d3-array/src/subset.js","moduleParts":{},"imported":[{"uid":"0a7f-212"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-212":{"id":"/node_modules/d3-array/src/superset.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-211"}]},"0a7f-213":{"id":"/node_modules/d3-array/src/union.js","moduleParts":{},"imported":[{"uid":"0a7f-214"}],"importedBy":[{"uid":"0a7f-165"}]},"0a7f-214":{"id":"/node_modules/internmap/src/index.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-165"},{"uid":"0a7f-171"},{"uid":"0a7f-183"},{"uid":"0a7f-208"},{"uid":"0a7f-209"},{"uid":"0a7f-210"},{"uid":"0a7f-213"}]},"0a7f-215":{"id":"/node_modules/d3-array/src/identity.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-171"},{"uid":"0a7f-173"}]},"0a7f-216":{"id":"/node_modules/d3-array/src/array.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-173"}]},"0a7f-217":{"id":"/node_modules/d3-array/src/constant.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"0a7f-173"}]}},"env":{"rollup":"2.78.1"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"inline-style-editor.js","children":[{"name":"node_modules","children":[{"name":"svelte/internal/index.mjs","uid":"d9fc-106"},{"name":"d3-array/src","children":[{"uid":"d9fc-110","name":"ascending.js"},{"uid":"d9fc-112","name":"descending.js"},{"uid":"d9fc-114","name":"bisector.js"},{"uid":"d9fc-116","name":"number.js"},{"uid":"d9fc-118","name":"bisect.js"},{"uid":"d9fc-120","name":"count.js"},{"uid":"d9fc-122","name":"extent.js"},{"uid":"d9fc-124","name":"ticks.js"},{"name":"threshold/sturges.js","uid":"d9fc-126"}]},{"name":"d3-contour/src","children":[{"uid":"d9fc-128","name":"array.js"},{"uid":"d9fc-130","name":"ascending.js"},{"uid":"d9fc-132","name":"area.js"},{"uid":"d9fc-134","name":"constant.js"},{"uid":"d9fc-136","name":"contains.js"},{"uid":"d9fc-138","name":"noop.js"},{"uid":"d9fc-140","name":"contours.js"}]},{"name":"vanilla-picker/dist/vanilla-picker.csp.mjs","uid":"d9fc-144"}]},{"name":"src","children":[{"name":"util","children":[{"uid":"d9fc-108","name":"util.js"},{"uid":"d9fc-142","name":"boxesContour.js"},{"uid":"d9fc-148","name":"fonts.js"}]},{"name":"components","children":[{"uid":"d9fc-146","name":"ColorPicker.svelte"},{"uid":"d9fc-150","name":"InlineStyleEditor.svelte"}]},{"uid":"d9fc-152","name":"index.js"}]}]}],"isRoot":true},"nodeParts":{"d9fc-106":{"renderedLength":12388,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-105"},"d9fc-108":{"renderedLength":674,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-107"},"d9fc-110":{"renderedLength":125,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-109"},"d9fc-112":{"renderedLength":156,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-111"},"d9fc-114":{"renderedLength":1664,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-113"},"d9fc-116":{"renderedLength":66,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-115"},"d9fc-118":{"renderedLength":55,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-117"},"d9fc-120":{"renderedLength":480,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-119"},"d9fc-122":{"renderedLength":823,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-121"},"d9fc-124":{"renderedLength":1901,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-123"},"d9fc-126":{"renderedLength":109,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-125"},"d9fc-128":{"renderedLength":62,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-127"},"d9fc-130":{"renderedLength":56,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-129"},"d9fc-132":{"renderedLength":239,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-131"},"d9fc-134":{"renderedLength":32,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-133"},"d9fc-136":{"renderedLength":956,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-135"},"d9fc-138":{"renderedLength":22,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-137"},"d9fc-140":{"renderedLength":6572,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-139"},"d9fc-142":{"renderedLength":3648,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-141"},"d9fc-144":{"renderedLength":34619,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-143"},"d9fc-146":{"renderedLength":2504,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-145"},"d9fc-148":{"renderedLength":2194,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-147"},"d9fc-150":{"renderedLength":51601,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-149"},"d9fc-152":{"renderedLength":153,"gzipLength":0,"brotliLength":0,"mainUid":"d9fc-151"}},"nodeMetas":{"d9fc-105":{"id":"/node_modules/svelte/internal/index.mjs","moduleParts":{"inline-style-editor.js":"d9fc-106"},"imported":[],"importedBy":[{"uid":"d9fc-149"},{"uid":"d9fc-153"},{"uid":"d9fc-145"}]},"d9fc-107":{"id":"/src/util/util.js","moduleParts":{"inline-style-editor.js":"d9fc-108"},"imported":[],"importedBy":[{"uid":"d9fc-149"}]},"d9fc-109":{"id":"/node_modules/d3-array/src/ascending.js","moduleParts":{"inline-style-editor.js":"d9fc-110"},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-117"},{"uid":"d9fc-113"},{"uid":"d9fc-164"},{"uid":"d9fc-182"},{"uid":"d9fc-183"},{"uid":"d9fc-184"},{"uid":"d9fc-185"},{"uid":"d9fc-186"},{"uid":"d9fc-199"}]},"d9fc-111":{"id":"/node_modules/d3-array/src/descending.js","moduleParts":{"inline-style-editor.js":"d9fc-112"},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-113"}]},"d9fc-113":{"id":"/node_modules/d3-array/src/bisector.js","moduleParts":{"inline-style-editor.js":"d9fc-114"},"imported":[{"uid":"d9fc-109"},{"uid":"d9fc-111"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-117"}]},"d9fc-115":{"id":"/node_modules/d3-array/src/number.js","moduleParts":{"inline-style-editor.js":"d9fc-116"},"imported":[],"importedBy":[{"uid":"d9fc-117"},{"uid":"d9fc-179"}]},"d9fc-117":{"id":"/node_modules/d3-array/src/bisect.js","moduleParts":{"inline-style-editor.js":"d9fc-118"},"imported":[{"uid":"d9fc-109"},{"uid":"d9fc-113"},{"uid":"d9fc-115"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-165"}]},"d9fc-119":{"id":"/node_modules/d3-array/src/count.js","moduleParts":{"inline-style-editor.js":"d9fc-120"},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-166"},{"uid":"d9fc-167"},{"uid":"d9fc-125"}]},"d9fc-121":{"id":"/node_modules/d3-array/src/extent.js","moduleParts":{"inline-style-editor.js":"d9fc-122"},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-165"}]},"d9fc-123":{"id":"/node_modules/d3-array/src/ticks.js","moduleParts":{"inline-style-editor.js":"d9fc-124"},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-165"},{"uid":"d9fc-176"}]},"d9fc-125":{"id":"/node_modules/d3-array/src/threshold/sturges.js","moduleParts":{"inline-style-editor.js":"d9fc-126"},"imported":[{"uid":"d9fc-119"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-165"}]},"d9fc-127":{"id":"/node_modules/d3-contour/src/array.js","moduleParts":{"inline-style-editor.js":"d9fc-128"},"imported":[],"importedBy":[{"uid":"d9fc-139"},{"uid":"d9fc-156"}]},"d9fc-129":{"id":"/node_modules/d3-contour/src/ascending.js","moduleParts":{"inline-style-editor.js":"d9fc-130"},"imported":[],"importedBy":[{"uid":"d9fc-139"}]},"d9fc-131":{"id":"/node_modules/d3-contour/src/area.js","moduleParts":{"inline-style-editor.js":"d9fc-132"},"imported":[],"importedBy":[{"uid":"d9fc-139"}]},"d9fc-133":{"id":"/node_modules/d3-contour/src/constant.js","moduleParts":{"inline-style-editor.js":"d9fc-134"},"imported":[],"importedBy":[{"uid":"d9fc-139"},{"uid":"d9fc-156"}]},"d9fc-135":{"id":"/node_modules/d3-contour/src/contains.js","moduleParts":{"inline-style-editor.js":"d9fc-136"},"imported":[],"importedBy":[{"uid":"d9fc-139"}]},"d9fc-137":{"id":"/node_modules/d3-contour/src/noop.js","moduleParts":{"inline-style-editor.js":"d9fc-138"},"imported":[],"importedBy":[{"uid":"d9fc-139"}]},"d9fc-139":{"id":"/node_modules/d3-contour/src/contours.js","moduleParts":{"inline-style-editor.js":"d9fc-140"},"imported":[{"uid":"d9fc-157"},{"uid":"d9fc-127"},{"uid":"d9fc-129"},{"uid":"d9fc-131"},{"uid":"d9fc-133"},{"uid":"d9fc-135"},{"uid":"d9fc-137"}],"importedBy":[{"uid":"d9fc-155"},{"uid":"d9fc-156"}]},"d9fc-141":{"id":"/src/util/boxesContour.js","moduleParts":{"inline-style-editor.js":"d9fc-142"},"imported":[{"uid":"d9fc-155"}],"importedBy":[{"uid":"d9fc-149"}]},"d9fc-143":{"id":"/node_modules/vanilla-picker/dist/vanilla-picker.csp.mjs","moduleParts":{"inline-style-editor.js":"d9fc-144"},"imported":[],"importedBy":[{"uid":"d9fc-145"}]},"d9fc-145":{"id":"/src/components/ColorPicker.svelte","moduleParts":{"inline-style-editor.js":"d9fc-146"},"imported":[{"uid":"d9fc-105"},{"uid":"d9fc-143"},{"uid":"d9fc-153"}],"importedBy":[{"uid":"d9fc-149"}]},"d9fc-147":{"id":"/src/util/fonts.js","moduleParts":{"inline-style-editor.js":"d9fc-148"},"imported":[],"importedBy":[{"uid":"d9fc-149"}]},"d9fc-149":{"id":"/src/components/InlineStyleEditor.svelte","moduleParts":{"inline-style-editor.js":"d9fc-150"},"imported":[{"uid":"d9fc-105"},{"uid":"d9fc-153"},{"uid":"d9fc-154"},{"uid":"d9fc-107"},{"uid":"d9fc-141"},{"uid":"d9fc-145"},{"uid":"d9fc-147"}],"importedBy":[{"uid":"d9fc-151"}]},"d9fc-151":{"id":"/src/index.js","moduleParts":{"inline-style-editor.js":"d9fc-152"},"imported":[{"uid":"d9fc-149"}],"importedBy":[],"isEntry":true},"d9fc-153":{"id":"/node_modules/svelte/index.mjs","moduleParts":{},"imported":[{"uid":"d9fc-105"}],"importedBy":[{"uid":"d9fc-149"},{"uid":"d9fc-145"}]},"d9fc-154":{"id":"/src/assets/index.scss","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-149"}]},"d9fc-155":{"id":"/node_modules/d3-contour/src/index.js","moduleParts":{},"imported":[{"uid":"d9fc-139"},{"uid":"d9fc-156"}],"importedBy":[{"uid":"d9fc-141"}]},"d9fc-156":{"id":"/node_modules/d3-contour/src/density.js","moduleParts":{},"imported":[{"uid":"d9fc-157"},{"uid":"d9fc-127"},{"uid":"d9fc-133"},{"uid":"d9fc-139"}],"importedBy":[{"uid":"d9fc-155"}]},"d9fc-157":{"id":"/node_modules/d3-array/src/index.js","moduleParts":{},"imported":[{"uid":"d9fc-117"},{"uid":"d9fc-109"},{"uid":"d9fc-113"},{"uid":"d9fc-158"},{"uid":"d9fc-119"},{"uid":"d9fc-159"},{"uid":"d9fc-160"},{"uid":"d9fc-111"},{"uid":"d9fc-161"},{"uid":"d9fc-121"},{"uid":"d9fc-162"},{"uid":"d9fc-163"},{"uid":"d9fc-164"},{"uid":"d9fc-165"},{"uid":"d9fc-166"},{"uid":"d9fc-167"},{"uid":"d9fc-125"},{"uid":"d9fc-168"},{"uid":"d9fc-169"},{"uid":"d9fc-170"},{"uid":"d9fc-171"},{"uid":"d9fc-172"},{"uid":"d9fc-173"},{"uid":"d9fc-174"},{"uid":"d9fc-175"},{"uid":"d9fc-176"},{"uid":"d9fc-177"},{"uid":"d9fc-178"},{"uid":"d9fc-179"},{"uid":"d9fc-180"},{"uid":"d9fc-181"},{"uid":"d9fc-182"},{"uid":"d9fc-183"},{"uid":"d9fc-184"},{"uid":"d9fc-185"},{"uid":"d9fc-186"},{"uid":"d9fc-187"},{"uid":"d9fc-188"},{"uid":"d9fc-189"},{"uid":"d9fc-123"},{"uid":"d9fc-190"},{"uid":"d9fc-191"},{"uid":"d9fc-192"},{"uid":"d9fc-193"},{"uid":"d9fc-194"},{"uid":"d9fc-195"},{"uid":"d9fc-196"},{"uid":"d9fc-197"},{"uid":"d9fc-198"},{"uid":"d9fc-199"},{"uid":"d9fc-200"},{"uid":"d9fc-201"},{"uid":"d9fc-202"},{"uid":"d9fc-203"},{"uid":"d9fc-204"},{"uid":"d9fc-205"},{"uid":"d9fc-206"}],"importedBy":[{"uid":"d9fc-139"},{"uid":"d9fc-156"}]},"d9fc-158":{"id":"/node_modules/d3-array/src/blur.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-159":{"id":"/node_modules/d3-array/src/cross.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-160":{"id":"/node_modules/d3-array/src/cumsum.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-161":{"id":"/node_modules/d3-array/src/deviation.js","moduleParts":{},"imported":[{"uid":"d9fc-191"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-167"}]},"d9fc-162":{"id":"/node_modules/d3-array/src/fsum.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-163":{"id":"/node_modules/d3-array/src/group.js","moduleParts":{},"imported":[{"uid":"d9fc-206"},{"uid":"d9fc-207"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-164"}]},"d9fc-164":{"id":"/node_modules/d3-array/src/groupSort.js","moduleParts":{},"imported":[{"uid":"d9fc-109"},{"uid":"d9fc-163"},{"uid":"d9fc-199"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-165":{"id":"/node_modules/d3-array/src/bin.js","moduleParts":{},"imported":[{"uid":"d9fc-208"},{"uid":"d9fc-117"},{"uid":"d9fc-209"},{"uid":"d9fc-121"},{"uid":"d9fc-207"},{"uid":"d9fc-176"},{"uid":"d9fc-123"},{"uid":"d9fc-125"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-166":{"id":"/node_modules/d3-array/src/threshold/freedmanDiaconis.js","moduleParts":{},"imported":[{"uid":"d9fc-119"},{"uid":"d9fc-179"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-167":{"id":"/node_modules/d3-array/src/threshold/scott.js","moduleParts":{},"imported":[{"uid":"d9fc-119"},{"uid":"d9fc-161"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-168":{"id":"/node_modules/d3-array/src/max.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-179"}]},"d9fc-169":{"id":"/node_modules/d3-array/src/maxIndex.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-179"},{"uid":"d9fc-186"}]},"d9fc-170":{"id":"/node_modules/d3-array/src/mean.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-171":{"id":"/node_modules/d3-array/src/median.js","moduleParts":{},"imported":[{"uid":"d9fc-179"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-172":{"id":"/node_modules/d3-array/src/merge.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-173":{"id":"/node_modules/d3-array/src/min.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-179"},{"uid":"d9fc-190"}]},"d9fc-174":{"id":"/node_modules/d3-array/src/minIndex.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-179"},{"uid":"d9fc-184"}]},"d9fc-175":{"id":"/node_modules/d3-array/src/mode.js","moduleParts":{},"imported":[{"uid":"d9fc-206"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-176":{"id":"/node_modules/d3-array/src/nice.js","moduleParts":{},"imported":[{"uid":"d9fc-123"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-165"}]},"d9fc-177":{"id":"/node_modules/d3-array/src/pairs.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-178":{"id":"/node_modules/d3-array/src/permute.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-199"}]},"d9fc-179":{"id":"/node_modules/d3-array/src/quantile.js","moduleParts":{},"imported":[{"uid":"d9fc-168"},{"uid":"d9fc-169"},{"uid":"d9fc-173"},{"uid":"d9fc-174"},{"uid":"d9fc-180"},{"uid":"d9fc-115"},{"uid":"d9fc-199"},{"uid":"d9fc-185"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-166"},{"uid":"d9fc-171"}]},"d9fc-180":{"id":"/node_modules/d3-array/src/quickselect.js","moduleParts":{},"imported":[{"uid":"d9fc-199"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-179"}]},"d9fc-181":{"id":"/node_modules/d3-array/src/range.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-182":{"id":"/node_modules/d3-array/src/rank.js","moduleParts":{},"imported":[{"uid":"d9fc-109"},{"uid":"d9fc-199"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-183":{"id":"/node_modules/d3-array/src/least.js","moduleParts":{},"imported":[{"uid":"d9fc-109"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-184":{"id":"/node_modules/d3-array/src/leastIndex.js","moduleParts":{},"imported":[{"uid":"d9fc-109"},{"uid":"d9fc-174"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-187"}]},"d9fc-185":{"id":"/node_modules/d3-array/src/greatest.js","moduleParts":{},"imported":[{"uid":"d9fc-109"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-179"}]},"d9fc-186":{"id":"/node_modules/d3-array/src/greatestIndex.js","moduleParts":{},"imported":[{"uid":"d9fc-109"},{"uid":"d9fc-169"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-187":{"id":"/node_modules/d3-array/src/scan.js","moduleParts":{},"imported":[{"uid":"d9fc-184"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-188":{"id":"/node_modules/d3-array/src/shuffle.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-189":{"id":"/node_modules/d3-array/src/sum.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-190":{"id":"/node_modules/d3-array/src/transpose.js","moduleParts":{},"imported":[{"uid":"d9fc-173"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-192"}]},"d9fc-191":{"id":"/node_modules/d3-array/src/variance.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-161"}]},"d9fc-192":{"id":"/node_modules/d3-array/src/zip.js","moduleParts":{},"imported":[{"uid":"d9fc-190"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-193":{"id":"/node_modules/d3-array/src/every.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-194":{"id":"/node_modules/d3-array/src/some.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-195":{"id":"/node_modules/d3-array/src/filter.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-196":{"id":"/node_modules/d3-array/src/map.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-197":{"id":"/node_modules/d3-array/src/reduce.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-198":{"id":"/node_modules/d3-array/src/reverse.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-199":{"id":"/node_modules/d3-array/src/sort.js","moduleParts":{},"imported":[{"uid":"d9fc-109"},{"uid":"d9fc-178"}],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-164"},{"uid":"d9fc-179"},{"uid":"d9fc-180"},{"uid":"d9fc-182"}]},"d9fc-200":{"id":"/node_modules/d3-array/src/difference.js","moduleParts":{},"imported":[{"uid":"d9fc-206"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-201":{"id":"/node_modules/d3-array/src/disjoint.js","moduleParts":{},"imported":[{"uid":"d9fc-206"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-202":{"id":"/node_modules/d3-array/src/intersection.js","moduleParts":{},"imported":[{"uid":"d9fc-206"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-203":{"id":"/node_modules/d3-array/src/subset.js","moduleParts":{},"imported":[{"uid":"d9fc-204"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-204":{"id":"/node_modules/d3-array/src/superset.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-203"}]},"d9fc-205":{"id":"/node_modules/d3-array/src/union.js","moduleParts":{},"imported":[{"uid":"d9fc-206"}],"importedBy":[{"uid":"d9fc-157"}]},"d9fc-206":{"id":"/node_modules/internmap/src/index.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-157"},{"uid":"d9fc-163"},{"uid":"d9fc-175"},{"uid":"d9fc-200"},{"uid":"d9fc-201"},{"uid":"d9fc-202"},{"uid":"d9fc-205"}]},"d9fc-207":{"id":"/node_modules/d3-array/src/identity.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-163"},{"uid":"d9fc-165"}]},"d9fc-208":{"id":"/node_modules/d3-array/src/array.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-165"}]},"d9fc-209":{"id":"/node_modules/d3-array/src/constant.js","moduleParts":{},"imported":[],"importedBy":[{"uid":"d9fc-165"}]}},"env":{"rollup":"2.78.1"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/test.html

@@ -343,6 +343,46 @@
                 },
                 onStyleChanged(target, eventType, cssProp, value) {
                     console.log(target, eventType, cssProp, value);
+                },
+                customProps: {
+                    'pathLength': {
+                        type: 'slider', min: 1, max: 500, step: 1,
+                        getter: (el) => {
+                            if (!el.getTotalLength) return null;
+                            const pathLength = el.getAttribute('pathLength');
+                            if (!pathLength) return Math.round(el.getTotalLength());
+                            return parseInt(pathLength);
+                        },
+                        setter: (el, val) => {
+                            el.setAttribute('pathLength', val);
+                        }
+                    },
+                    'scale': {
+                        type: 'slider', min: 0.5, max: 5, step: 0.1,
+                        getter: (el) => {
+                            const transform = el.getAttribute('transform');
+                            if (!transform) return 1;
+                            else {
+                                let scaleValue = transform.match(/scale\(([0-9\.]+)\)/);
+                                if (scaleValue.length > 1) return parseFloat(scaleValue[1]);
+                            }
+                            return 1;
+                        },
+                        setter: (el, val) => {
+                            const transform = el.getAttribute('transform');
+                            const scaleStr = `scale(${val})`;
+                            if (!transform) {
+                                el.setAttribute("transform", scaleStr);
+                            }
+                            else if (transform.length && !transform.includes('scale')) {
+                                el.setAttribute("transform", `${transform} ${scaleStr}`);
+                            }
+                            else {
+                                const newAttr = transform.replace(/scale(.*)/, scaleStr);
+                                el.setAttribute("transform", newAttr);
+                            }
+                        }
+                    },
                 }
             }
         );