@grunwaldlab/heat-tree 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/heat-tree.es.min.js
CHANGED
|
@@ -2869,14 +2869,20 @@ function zoom() {
|
|
|
2869
2869
|
};
|
|
2870
2870
|
return zoom2;
|
|
2871
2871
|
}
|
|
2872
|
-
const styles = ".ht-widget{color-scheme:light!important;--color-background: #ffffff;--color-text: #333333;--color-border: #dddddd;--color-muted: #666666;--color-accent: #007bff;background-color:var(--color-background);color:var(--color-text);display:flex;flex-direction:column;width:100%;height:100%}.ht-toolbar{flex:0 0 auto;margin-bottom:4px;display:flex;flex-direction:column;position:relative}.ht-toggle-container{position:absolute;top:0;right:0;padding:4px 8px;z-index:10}.ht-control-panel-toggle{background-color:transparent;border:none;cursor:pointer;
|
|
2873
|
-
|
|
2872
|
+
const styles = ".ht-widget{color-scheme:light!important;--color-background: #ffffff;--color-text: #333333;--color-border: #dddddd;--color-muted: #666666;--color-accent: #007bff;background-color:var(--color-background);color:var(--color-text);outline:2px solid #ddd;border-radius:5px;overflow:hidden;display:flex;flex-direction:column;width:100%;height:100%}.ht-toolbar{flex:0 0 auto;margin-bottom:4px;display:flex;flex-direction:column;position:relative}.ht-toggle-container{position:absolute;top:0;right:0;padding:4px 8px;z-index:10}.ht-control-panel-toggle{background-color:transparent;border:none;cursor:pointer;display:flex;align-items:center;gap:4px;transition:opacity .2s}.ht-control-panel-toggle:hover{opacity:.7}.ht-control-panel-toggle .ht-toggle-arrow{transition:transform .3s}.ht-control-panel-toggle.collapsed .ht-toggle-arrow{transform:rotate(180deg)}.ht-control-panel-toggle .ht-hamburger-icon{color:#333}.ht-collapsible-panel{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ht-collapsible-panel.ht-panel-collapsed{max-height:0}.ht-widget .ht-tabs{display:flex;gap:20px;padding:4px 8px;background-color:#f5f5f5;border-bottom:2px solid #ddd;-webkit-user-select:none;user-select:none}.ht-widget .ht-tab{cursor:pointer;padding:0 4px;font-family:sans-serif;font-size:12px;color:#333;border-bottom:2px solid transparent;transition:all .2s}.ht-widget .ht-tab:hover{color:#666}.ht-widget .ht-tab.active{color:#000;font-weight:700;border-bottom-color:#007bff}.ht-widget .ht-tab.active:hover{color:#000}.ht-widget .ht-tab.disabled{color:#999;cursor:not-allowed;opacity:.5}.ht-widget .ht-tab.disabled:hover{color:#999}.ht-widget .ht-controls{padding:2px 8px;background-color:#fafafa;border-bottom:1px solid #ddd;display:flex;flex-wrap:wrap;column-gap:8px;row-gap:2px;align-items:center;min-height:22px}.ht-controls.hidden{display:none}.ht-control-group{display:flex;align-items:center;gap:4px;white-space:nowrap;padding:2px 0;border-bottom:2px solid transparent;transition:border-bottom-color .2s}.ht-control-group.ht-aesthetic-editing{border-bottom-color:#007bff}.ht-widget .ht-control-label{font-family:sans-serif;font-size:12px;color:#333;white-space:nowrap;display:flex;align-items:center}.ht-button{font-size:12px;font-family:sans-serif;background-color:#e0e0e0;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .2s;white-space:nowrap}.ht-button:hover{background-color:#d0d0d0}.ht-button:disabled{background-color:#f0f0f0;color:#999;cursor:not-allowed}.ht-button.primary{background-color:#007bff;color:#fff;font-weight:700}.ht-button.primary:hover{background-color:#0056b3}.ht-icon-button{font-size:12px;font-family:sans-serif;background-color:#e0e0e0;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;padding:2px}.ht-icon-button:hover{background-color:#d0d0d0}.ht-icon-button svg{display:block}.ht-select{padding:1px 2px;font-size:12px;border:1px solid #ccc;border-radius:4px}.ht-slider{cursor:pointer;width:100px}.ht-toggle{width:30px;background-color:#ccc;border-radius:12px;position:relative;cursor:pointer;transition:background-color .3s;flex-shrink:0}.ht-toggle.active{background-color:#007bff}.ht-toggle-knob{background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:left .3s}.ht-toggle.active .ht-toggle-knob{left:calc(100% - 2px);transform:translate(-100%)}.ht-number-input{font-size:12px;border:1px solid #ccc;border-radius:4px;width:60px}.ht-text-input{font-size:12px;border:1px solid #ccc;border-radius:4px;padding:2px 4px;width:100px}.ht-widget .ht-aesthetic-settings-content{padding:2px 8px;background-color:#f0f0f0;border-bottom:1px solid #ddd;display:flex;flex-wrap:wrap;column-gap:8px;row-gap:2px;align-items:center;max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out,padding .3s ease-in-out}.ht-aesthetic-settings.hidden{max-height:0;padding-top:0;padding-bottom:0;border-bottom:none}.ht-color-palette-editor{display:flex;gap:8px;align-items:center}.ht-palette-buttons-container{display:flex;flex-direction:column;gap:2px}.ht-palette-button{width:20px;height:20px;font-size:12px;font-weight:700;background-color:#e0e0e0;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .2s}.ht-palette-button:hover{background-color:#d0d0d0}.ht-gradient-container{display:flex;gap:8px}.ht-gradient-column{display:flex;flex-direction:column;gap:4px}.ht-color-squares-container{display:flex;position:relative;height:16px;width:200px}.ht-color-square-wrapper{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%)}.ht-color-square{width:12px;height:12px;border:2px solid #333;border-radius:4px;cursor:pointer}.ht-color-square-tick{width:2px;height:8px;background-color:#333}.ht-gradient-box{width:200px;height:20px;border:1px solid #ccc;border-radius:4px;position:relative}.ht-widget .ht-range-slider-container{width:200px;height:12px;position:relative;border:1px solid #ccc;border-radius:4px;background:#f0f0f0;display:flex;align-items:center}.ht-range-handle{position:absolute;width:12px;height:12px;border:2px solid #333;border-radius:4px;cursor:ew-resize;transform:translate(-50%)}.ht-range-handle-indicator{position:absolute;bottom:90%;left:50%;transform:translate(-50%) rotate(180deg);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #333;border-radius:2px;margin-bottom:2px}.ht-null-color-column{display:flex;flex-direction:column;gap:4px}.ht-null-color-square-container{display:flex;position:relative;height:16px;justify-content:center}.ht-null-color-square{width:12px;height:12px;border:2px solid #333;border-radius:4px;cursor:pointer}.ht-null-color-square-tick{width:2px;height:6px;background-color:#333;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)}.ht-null-color-box{width:16px;height:20px;border:1px solid #ccc;border-radius:4px;position:relative}.missing-data-x-container{position:relative;display:flex;align-items:center;justify-content:center}.missing-data-x-container-triangle{position:absolute;bottom:85%;left:50%;transform:translate(-50%) rotate(180deg);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #333;border-radius:2px;margin-bottom:2px}.missing-data-x{font-size:16px;color:#d00;font-weight:700;line-height:1;-webkit-user-select:none;user-select:none;cursor:pointer}.ht-tree{flex:1 1 auto;min-height:0;position:relative}.ht-tree svg{display:block;height:100%;width:100%}.picker_wrapper,.picker_wrapper.popup{z-index:999999!important;position:fixed!important}.picker_wrapper *,.picker_selector,.picker_slider,.picker_editor,.picker_sample,.picker_done,.picker_cancel{pointer-events:auto!important}";
|
|
2873
|
+
const pickerStyles = '.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.picker_wrapper.no_cancel .picker_cancel{display:none}.layout_default.picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:.5em}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper:before{content:"";display:block;width:100%;height:0;order:1}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{flex:1 1 auto}.layout_default .picker_sl:before{content:"";display:block;padding-bottom:100%}.layout_default .picker_editor{order:1;width:6.5rem}.layout_default .picker_editor input{width:100%;height:100%}.layout_default .picker_sample{order:1;flex:1 1 auto}.layout_default .picker_done,.layout_default .picker_cancel{order:1}.picker_wrapper{box-sizing:border-box;background:#f2f2f2;box-shadow:0 0 0 1px silver;cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{box-sizing:border-box;border:none;box-shadow:0 0 0 1px silver;outline:none}.picker_wrapper button:focus,.picker_wrapper button:active,.picker_wrapper input:focus,.picker_wrapper input:active{box-shadow:0 0 2px 1px #1e90ff}.picker_wrapper button{padding:.4em .6em;cursor:pointer;background-color:#f5f5f5;background-image:linear-gradient(0deg,gainsboro,transparent)}.picker_wrapper button:active{background-image:linear-gradient(0deg,transparent,gainsboro)}.picker_wrapper button:hover{background-color:#fff}.picker_selector{position:absolute;z-index:1;display:block;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border:2px solid #fff;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);box-shadow:0 0 0 1px silver}.picker_sl{position:relative;box-shadow:0 0 0 1px silver;background-image:linear-gradient(180deg,#fff,#fff0 50%),linear-gradient(0deg,#000,#0000 50%),linear-gradient(90deg,gray,#80808000)}.picker_alpha,.picker_sample{position:relative;background:linear-gradient(45deg,lightgrey 25%,transparent 25%,transparent 75%,lightgrey 75%) 0 0/2em 2em,linear-gradient(45deg,#d3d3d3 25%,#fff 25% 75%,#d3d3d3 75%) 1em 1em/2em 2em;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_editor input{font-family:monospace;padding:.2em .4em}.picker_sample:before{content:"";position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_arrow{position:absolute;z-index:-1}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow:before,.picker_wrapper.popup .picker_arrow:after{background:#f2f2f2;box-shadow:0 0 10px 1px #0006}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow:before,.picker_wrapper.popup .picker_arrow:after{content:"";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow:before{width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.picker_wrapper.popup .picker_arrow:after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg) scale(1,-1);transform:rotate(90deg) scaleY(-1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scale(-1,1);transform:scaleX(-1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}';
|
|
2874
|
+
function injectStyles(root2 = document) {
|
|
2874
2875
|
const styleId = "heat-tree-styles";
|
|
2875
|
-
|
|
2876
|
+
const existing = root2.querySelector ? root2.querySelector(`#${styleId}`) : document.getElementById(styleId);
|
|
2877
|
+
if (!existing) {
|
|
2876
2878
|
const styleElement = document.createElement("style");
|
|
2877
2879
|
styleElement.id = styleId;
|
|
2878
|
-
styleElement.textContent = styles;
|
|
2879
|
-
document
|
|
2880
|
+
styleElement.textContent = styles + "\n" + pickerStyles;
|
|
2881
|
+
if (root2 === document) {
|
|
2882
|
+
document.head.appendChild(styleElement);
|
|
2883
|
+
} else {
|
|
2884
|
+
root2.prepend(styleElement);
|
|
2885
|
+
}
|
|
2880
2886
|
}
|
|
2881
2887
|
}
|
|
2882
2888
|
function niceNumber(n) {
|
|
@@ -4416,12 +4422,6 @@ var Picker = (function() {
|
|
|
4416
4422
|
}]);
|
|
4417
4423
|
return Picker2;
|
|
4418
4424
|
})();
|
|
4419
|
-
{
|
|
4420
|
-
var style = document.createElement("style");
|
|
4421
|
-
style.textContent = '.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.picker_wrapper.no_cancel .picker_cancel{display:none}.layout_default.picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:.5em}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper::before{content:"";display:block;width:100%;height:0;order:1}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{flex:1 1 auto}.layout_default .picker_sl::before{content:"";display:block;padding-bottom:100%}.layout_default .picker_editor{order:1;width:6.5rem}.layout_default .picker_editor input{width:100%;height:100%}.layout_default .picker_sample{order:1;flex:1 1 auto}.layout_default .picker_done,.layout_default .picker_cancel{order:1}.picker_wrapper{box-sizing:border-box;background:#f2f2f2;box-shadow:0 0 0 1px silver;cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{box-sizing:border-box;border:none;box-shadow:0 0 0 1px silver;outline:none}.picker_wrapper button:focus,.picker_wrapper button:active,.picker_wrapper input:focus,.picker_wrapper input:active{box-shadow:0 0 2px 1px #1e90ff}.picker_wrapper button{padding:.4em .6em;cursor:pointer;background-color:#f5f5f5;background-image:linear-gradient(0deg, gainsboro, transparent)}.picker_wrapper button:active{background-image:linear-gradient(0deg, transparent, gainsboro)}.picker_wrapper button:hover{background-color:#fff}.picker_selector{position:absolute;z-index:1;display:block;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border:2px solid #fff;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);box-shadow:0 0 0 1px silver}.picker_sl{position:relative;box-shadow:0 0 0 1px silver;background-image:linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%),linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%),linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))}.picker_alpha,.picker_sample{position:relative;background:linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em,linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_editor input{font-family:monospace;padding:.2em .4em}.picker_sample::before{content:"";position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_arrow{position:absolute;z-index:-1}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{background:#f2f2f2;box-shadow:0 0 10px 1px rgba(0,0,0,.4)}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{content:"";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg) scale(1, -1);transform:rotate(90deg) scale(1, -1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}';
|
|
4422
|
-
document.documentElement.firstElementChild.appendChild(style);
|
|
4423
|
-
Picker.StyleElement = style;
|
|
4424
|
-
}
|
|
4425
4425
|
function createControlGroup() {
|
|
4426
4426
|
const group = document.createElement("div");
|
|
4427
4427
|
group.className = "ht-control-group";
|
|
@@ -4633,7 +4633,8 @@ class Aesthetic extends Subscribable {
|
|
|
4633
4633
|
createSettingsWidget(options = {}) {
|
|
4634
4634
|
const {
|
|
4635
4635
|
controlHeight = 20,
|
|
4636
|
-
columnId = null
|
|
4636
|
+
columnId = null,
|
|
4637
|
+
root: root2 = document
|
|
4637
4638
|
} = options;
|
|
4638
4639
|
if (!columnId) {
|
|
4639
4640
|
const message = document.createElement("div");
|
|
@@ -4645,7 +4646,7 @@ class Aesthetic extends Subscribable {
|
|
|
4645
4646
|
const container = document.createElement("div");
|
|
4646
4647
|
container.className = "ht-aesthetic-settings-content";
|
|
4647
4648
|
if (this.state.scaleType === "color") {
|
|
4648
|
-
const paletteEditor = this.createColorPaletteEditor(controlHeight);
|
|
4649
|
+
const paletteEditor = this.createColorPaletteEditor(controlHeight, root2);
|
|
4649
4650
|
if (paletteEditor) {
|
|
4650
4651
|
container.appendChild(paletteEditor);
|
|
4651
4652
|
}
|
|
@@ -4732,7 +4733,7 @@ class Aesthetic extends Subscribable {
|
|
|
4732
4733
|
* @param {number} controlHeight - Height of controls
|
|
4733
4734
|
* @returns {HTMLElement} The palette editor container
|
|
4734
4735
|
*/
|
|
4735
|
-
createColorPaletteEditor(controlHeight) {
|
|
4736
|
+
createColorPaletteEditor(controlHeight, root2 = document) {
|
|
4736
4737
|
if (!this.scale) {
|
|
4737
4738
|
return null;
|
|
4738
4739
|
}
|
|
@@ -4755,16 +4756,17 @@ class Aesthetic extends Subscribable {
|
|
|
4755
4756
|
};
|
|
4756
4757
|
updateGradientDisplay();
|
|
4757
4758
|
let currentPickerParent = null;
|
|
4759
|
+
const pickerParent = root2 !== document && root2.appendChild ? root2 : document.body;
|
|
4758
4760
|
const pickerContainer = document.createElement("div");
|
|
4759
4761
|
pickerContainer.style.position = "fixed";
|
|
4760
4762
|
pickerContainer.style.zIndex = "999999";
|
|
4761
4763
|
pickerContainer.style.pointerEvents = "auto";
|
|
4762
|
-
|
|
4764
|
+
pickerParent.appendChild(pickerContainer);
|
|
4763
4765
|
const nullPickerContainer = document.createElement("div");
|
|
4764
4766
|
nullPickerContainer.style.position = "fixed";
|
|
4765
4767
|
nullPickerContainer.style.zIndex = "999999";
|
|
4766
4768
|
nullPickerContainer.style.pointerEvents = "auto";
|
|
4767
|
-
|
|
4769
|
+
pickerParent.appendChild(nullPickerContainer);
|
|
4768
4770
|
const closeGradientPicker = () => {
|
|
4769
4771
|
pickerContainer.style.display = "none";
|
|
4770
4772
|
currentPickerParent = null;
|
|
@@ -4816,12 +4818,13 @@ class Aesthetic extends Subscribable {
|
|
|
4816
4818
|
}
|
|
4817
4819
|
});
|
|
4818
4820
|
pickerContainer.style.display = "none";
|
|
4821
|
+
const clickTarget = root2 !== document && root2.addEventListener ? root2 : document;
|
|
4819
4822
|
const closePickerOnClickOutside = (e) => {
|
|
4820
4823
|
if (!pickerContainer.contains(e.target) && !e.target.closest(".ht-color-square")) {
|
|
4821
4824
|
closeGradientPicker();
|
|
4822
4825
|
}
|
|
4823
4826
|
};
|
|
4824
|
-
|
|
4827
|
+
clickTarget.addEventListener("click", closePickerOnClickOutside);
|
|
4825
4828
|
const nullColorPicker = new Picker({
|
|
4826
4829
|
parent: nullPickerContainer,
|
|
4827
4830
|
popup: false,
|
|
@@ -4845,11 +4848,11 @@ class Aesthetic extends Subscribable {
|
|
|
4845
4848
|
closeNullPicker();
|
|
4846
4849
|
}
|
|
4847
4850
|
};
|
|
4848
|
-
|
|
4851
|
+
clickTarget.addEventListener("click", closeNullPickerOnClickOutside);
|
|
4849
4852
|
container.dataset.pickerCleanup = "cleanup";
|
|
4850
4853
|
container.cleanupFunction = () => {
|
|
4851
|
-
|
|
4852
|
-
|
|
4854
|
+
clickTarget.removeEventListener("click", closePickerOnClickOutside);
|
|
4855
|
+
clickTarget.removeEventListener("click", closeNullPickerOnClickOutside);
|
|
4853
4856
|
if (pickerContainer.parentElement) {
|
|
4854
4857
|
pickerContainer.parentElement.removeChild(pickerContainer);
|
|
4855
4858
|
}
|
|
@@ -7889,7 +7892,7 @@ class TreeView {
|
|
|
7889
7892
|
}
|
|
7890
7893
|
}
|
|
7891
7894
|
}
|
|
7892
|
-
function exportTree(treeView, exportState, filename) {
|
|
7895
|
+
function exportTree(treeView, exportState, filename, root2 = document) {
|
|
7893
7896
|
const bounds = treeView.getCurrentBoundsWithLegends();
|
|
7894
7897
|
const contentWidth = bounds.maxX - bounds.minX;
|
|
7895
7898
|
const contentHeight = bounds.maxY - bounds.minY;
|
|
@@ -7960,7 +7963,7 @@ function convertSvgToPng(svgString, width, height, filename) {
|
|
|
7960
7963
|
};
|
|
7961
7964
|
img.src = url;
|
|
7962
7965
|
}
|
|
7963
|
-
function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCurrentTreeView, switchToTree, addNewTree, options) {
|
|
7966
|
+
function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCurrentTreeView, switchToTree, addNewTree, options, root2 = document) {
|
|
7964
7967
|
const CONTROL_HEIGHT = 20;
|
|
7965
7968
|
let currentTab = null;
|
|
7966
7969
|
let selectedMetadata = null;
|
|
@@ -8154,7 +8157,8 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
|
|
|
8154
8157
|
}
|
|
8155
8158
|
const settingsWidget = aesthetic.createSettingsWidget({
|
|
8156
8159
|
controlHeight: CONTROL_HEIGHT,
|
|
8157
|
-
columnId
|
|
8160
|
+
columnId,
|
|
8161
|
+
root: root2
|
|
8158
8162
|
});
|
|
8159
8163
|
if (settingsWidget) {
|
|
8160
8164
|
aestheticSettingsContainer.appendChild(settingsWidget);
|
|
@@ -8246,7 +8250,7 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
|
|
|
8246
8250
|
);
|
|
8247
8251
|
break;
|
|
8248
8252
|
case "export":
|
|
8249
|
-
populateExportControls(controlsContainer, getCurrentTreeState, getCurrentTreeView, getCurrentTreeName, options, CONTROL_HEIGHT);
|
|
8253
|
+
populateExportControls(controlsContainer, getCurrentTreeState, getCurrentTreeView, getCurrentTreeName, options, CONTROL_HEIGHT, root2);
|
|
8250
8254
|
break;
|
|
8251
8255
|
}
|
|
8252
8256
|
}
|
|
@@ -8601,7 +8605,7 @@ function populateTreeManipulationControls(container, getCurrentTreeState, refres
|
|
|
8601
8605
|
setShowHiddenBtn(showHiddenBtn);
|
|
8602
8606
|
container.appendChild(showHiddenBtn);
|
|
8603
8607
|
const branchLengthGroup = createControlGroup();
|
|
8604
|
-
const branchLengthLabel = createLabel("
|
|
8608
|
+
const branchLengthLabel = createLabel("Width", controlHeight);
|
|
8605
8609
|
branchLengthGroup.appendChild(branchLengthLabel);
|
|
8606
8610
|
const scaleToSlider = (scale, max = 10) => {
|
|
8607
8611
|
const logMin = Math.log10(1 / max);
|
|
@@ -8624,7 +8628,7 @@ function populateTreeManipulationControls(container, getCurrentTreeState, refres
|
|
|
8624
8628
|
branchLengthGroup.appendChild(branchLengthSlider);
|
|
8625
8629
|
container.appendChild(branchLengthGroup);
|
|
8626
8630
|
const treeHeightGroup = createControlGroup();
|
|
8627
|
-
const treeHeightLabel = createLabel("
|
|
8631
|
+
const treeHeightLabel = createLabel("Height", controlHeight);
|
|
8628
8632
|
treeHeightGroup.appendChild(treeHeightLabel);
|
|
8629
8633
|
const treeHeightSlider = createSlider(0, 100, scaleToSlider(treeState.state.treeHeightScale), 0.1, controlHeight);
|
|
8630
8634
|
treeHeightSlider.addEventListener("input", (e) => {
|
|
@@ -8635,7 +8639,7 @@ function populateTreeManipulationControls(container, getCurrentTreeState, refres
|
|
|
8635
8639
|
treeHeightGroup.appendChild(treeHeightSlider);
|
|
8636
8640
|
container.appendChild(treeHeightGroup);
|
|
8637
8641
|
const radialLayoutGroup = createControlGroup();
|
|
8638
|
-
const radialLayoutLabel = createLabel("Radial
|
|
8642
|
+
const radialLayoutLabel = createLabel("Radial:", controlHeight);
|
|
8639
8643
|
radialLayoutGroup.appendChild(radialLayoutLabel);
|
|
8640
8644
|
const isCircular = treeState.state.layout === "circular";
|
|
8641
8645
|
const radialLayoutToggle = createToggle(isCircular, controlHeight);
|
|
@@ -8825,7 +8829,7 @@ function createMetadataColumnSelect(treeState, aesthetic, defaultLabel, controlH
|
|
|
8825
8829
|
});
|
|
8826
8830
|
return select2;
|
|
8827
8831
|
}
|
|
8828
|
-
function populateExportControls(container, getCurrentTreeState, getCurrentTreeView, getCurrentTreeName, options, controlHeight) {
|
|
8832
|
+
function populateExportControls(container, getCurrentTreeState, getCurrentTreeView, getCurrentTreeName, options, controlHeight, root2 = document) {
|
|
8829
8833
|
container.innerHTML = "";
|
|
8830
8834
|
const treeState = getCurrentTreeState();
|
|
8831
8835
|
const treeView = getCurrentTreeView();
|
|
@@ -8883,11 +8887,11 @@ function populateExportControls(container, getCurrentTreeState, getCurrentTreeVi
|
|
|
8883
8887
|
const sanitizedName = treeName.replace(/[^a-z0-9_-]/gi, "_");
|
|
8884
8888
|
const extension = exportState.format === "svg" ? "svg" : "png";
|
|
8885
8889
|
const filename = `${sanitizedName}.${extension}`;
|
|
8886
|
-
exportTree(treeView, exportState, filename);
|
|
8890
|
+
exportTree(treeView, exportState, filename, root2);
|
|
8887
8891
|
});
|
|
8888
8892
|
container.appendChild(exportBtn);
|
|
8889
8893
|
const formatGroup = createControlGroup();
|
|
8890
|
-
const formatLabel = createLabel("
|
|
8894
|
+
const formatLabel = createLabel("Format:", controlHeight);
|
|
8891
8895
|
formatGroup.appendChild(formatLabel);
|
|
8892
8896
|
const formatSelect = document.createElement("select");
|
|
8893
8897
|
formatSelect.className = "ht-select";
|
|
@@ -8973,22 +8977,24 @@ function populateExportControls(container, getCurrentTreeState, getCurrentTreeVi
|
|
|
8973
8977
|
marginGroup.appendChild(marginInput);
|
|
8974
8978
|
container.appendChild(marginGroup);
|
|
8975
8979
|
}
|
|
8976
|
-
function heatTree(
|
|
8980
|
+
function heatTree(containerOrSelector, treesInput = [], options = {}) {
|
|
8977
8981
|
if (treesInput && !Array.isArray(treesInput)) {
|
|
8978
8982
|
treesInput = [treesInput];
|
|
8979
8983
|
}
|
|
8980
8984
|
if (treesInput === void 0 || treesInput === null) {
|
|
8981
8985
|
treesInput = [];
|
|
8982
8986
|
}
|
|
8983
|
-
injectStyles();
|
|
8984
8987
|
options = {
|
|
8985
8988
|
buttonSize: 25,
|
|
8986
8989
|
transitionDuration: 500,
|
|
8987
8990
|
manualZoomAndPanEnabled: true,
|
|
8988
8991
|
autoZoom: "Default",
|
|
8989
8992
|
autoPan: "Default",
|
|
8993
|
+
isolation: "shadow",
|
|
8990
8994
|
...options
|
|
8991
8995
|
};
|
|
8996
|
+
const isolation = options.isolation;
|
|
8997
|
+
let root2;
|
|
8992
8998
|
const textSizeEstimator = new TextSizeEstimator();
|
|
8993
8999
|
const treeDataInstances = /* @__PURE__ */ new Map();
|
|
8994
9000
|
const treeConfigAesthetics = /* @__PURE__ */ new Map();
|
|
@@ -9041,10 +9047,25 @@ function heatTree(containerSelector, treesInput = [], options = {}) {
|
|
|
9041
9047
|
});
|
|
9042
9048
|
const treeStateCache = /* @__PURE__ */ new Map();
|
|
9043
9049
|
const treeViewCache = /* @__PURE__ */ new Map();
|
|
9044
|
-
|
|
9045
|
-
if (
|
|
9046
|
-
|
|
9050
|
+
let container;
|
|
9051
|
+
if (typeof containerOrSelector === "string") {
|
|
9052
|
+
container = document.querySelector(containerOrSelector);
|
|
9053
|
+
if (!container) {
|
|
9054
|
+
throw new Error(`Container element not found: ${containerOrSelector}`);
|
|
9055
|
+
}
|
|
9056
|
+
} else if (containerOrSelector instanceof HTMLElement) {
|
|
9057
|
+
container = containerOrSelector;
|
|
9058
|
+
} else {
|
|
9059
|
+
throw new Error("First argument must be a CSS selector string or an HTMLElement");
|
|
9047
9060
|
}
|
|
9061
|
+
let shadowRoot = null;
|
|
9062
|
+
if (isolation === "shadow") {
|
|
9063
|
+
shadowRoot = container.attachShadow({ mode: "open" });
|
|
9064
|
+
root2 = shadowRoot;
|
|
9065
|
+
} else {
|
|
9066
|
+
root2 = document;
|
|
9067
|
+
}
|
|
9068
|
+
injectStyles(root2);
|
|
9048
9069
|
const widgetDiv = document.createElement("div");
|
|
9049
9070
|
widgetDiv.className = "ht-widget";
|
|
9050
9071
|
const toolbarDiv = document.createElement("div");
|
|
@@ -9052,12 +9073,14 @@ function heatTree(containerSelector, treesInput = [], options = {}) {
|
|
|
9052
9073
|
const treeDiv = document.createElement("div");
|
|
9053
9074
|
treeDiv.className = "ht-tree";
|
|
9054
9075
|
const treeSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
9055
|
-
treeSvg.setAttribute("width", "100%");
|
|
9056
|
-
treeSvg.setAttribute("height", "100%");
|
|
9057
9076
|
treeDiv.appendChild(treeSvg);
|
|
9058
9077
|
widgetDiv.appendChild(toolbarDiv);
|
|
9059
9078
|
widgetDiv.appendChild(treeDiv);
|
|
9060
|
-
|
|
9079
|
+
if (shadowRoot) {
|
|
9080
|
+
shadowRoot.appendChild(widgetDiv);
|
|
9081
|
+
} else {
|
|
9082
|
+
container.appendChild(widgetDiv);
|
|
9083
|
+
}
|
|
9061
9084
|
let currentTreeName = null;
|
|
9062
9085
|
let currentTreeState = null;
|
|
9063
9086
|
let currentTreeView = null;
|
|
@@ -9131,7 +9154,8 @@ function heatTree(containerSelector, treesInput = [], options = {}) {
|
|
|
9131
9154
|
() => currentTreeView,
|
|
9132
9155
|
switchToTree,
|
|
9133
9156
|
addNewTree,
|
|
9134
|
-
options
|
|
9157
|
+
options,
|
|
9158
|
+
root2
|
|
9135
9159
|
);
|
|
9136
9160
|
if (treeDataInstances.size > 0) {
|
|
9137
9161
|
const firstTreeName = Array.from(treeDataInstances.keys())[0];
|
|
@@ -9146,7 +9170,8 @@ function heatTree(containerSelector, treesInput = [], options = {}) {
|
|
|
9146
9170
|
getCurrentTreeName: () => currentTreeName,
|
|
9147
9171
|
switchToTree,
|
|
9148
9172
|
addNewTree,
|
|
9149
|
-
container: widgetDiv
|
|
9173
|
+
container: widgetDiv,
|
|
9174
|
+
shadowRoot
|
|
9150
9175
|
};
|
|
9151
9176
|
}
|
|
9152
9177
|
export {
|