@d3plus/core 3.0.9 → 3.0.11

package/umd/d3plus-core.js

@@ -1,5 +1,5 @@
 /*
-  @d3plus/core v3.0.9
+  @d3plus/core v3.0.11
   Data visualization made easy. A javascript library that extends the popular D3.js to enable fast and beautiful visualizations.
   Copyright (c) 2025 D3plus - https://d3plus.org
   @license MIT
@@ -7452,6 +7452,14 @@
       this._tooltipClass.data([]).render();
   }
 
+  function debounce(func, delay) {
+      let timeout;
+      return function(...args) {
+          const context = this;
+          clearTimeout(timeout);
+          timeout = setTimeout(()=>func.apply(context, args), delay);
+      };
+  }
   /**
    * Default padding logic that will return false if the screen is less than 600 pixels wide.
    * @private
@@ -7662,12 +7670,34 @@
      */ _thresholdFunction(data) {
           return data;
       }
+      /**
+     * Detects width and height and sets SVG properties
+     * @private
+     */ _setSVGSize() {
+          const display = this._select.style("display");
+          this._select.style("display", "none");
+          let [w, h] = dom.getSize(this._select.node().parentNode);
+          w -= parseFloat(this._select.style("border-left-width"), 10);
+          w -= parseFloat(this._select.style("border-right-width"), 10);
+          h -= parseFloat(this._select.style("border-top-width"), 10);
+          h -= parseFloat(this._select.style("border-bottom-width"), 10);
+          this._select.style("display", display);
+          if (this._autoWidth) {
+              this.width(w);
+              this._select.style("width", `${this._width}px`).attr("width", `${this._width}px`);
+          }
+          if (this._autoHeight) {
+              this.height(h);
+              this._select.style("height", `${this._height}px`).attr("height", `${this._height}px`);
+          }
+      }
       /**
         @memberof Viz
         @desc Draws the visualization given the specified configuration.
         @param {Function} [*callback*] An optional callback function that, if passed, will be called after animation is complete.
         @chainable
     */ render(callback) {
+          this._callback = callback;
           // Resets margins and padding
           this._margin = {
               bottom: 0,
@@ -7687,29 +7717,11 @@
               const svg = parent.select(".d3plus-viz").size() ? parent.select(".d3plus-viz") : parent.append("svg");
               this.select(svg.node());
           }
-          /** detects width and height and sets SVG properties */ function setSVGSize() {
-              const display = this._select.style("display");
-              this._select.style("display", "none");
-              let [w, h] = dom.getSize(this._select.node().parentNode);
-              w -= parseFloat(this._select.style("border-left-width"), 10);
-              w -= parseFloat(this._select.style("border-right-width"), 10);
-              h -= parseFloat(this._select.style("border-top-width"), 10);
-              h -= parseFloat(this._select.style("border-bottom-width"), 10);
-              this._select.style("display", display);
-              if (this._autoWidth) {
-                  this.width(w);
-                  this._select.style("width", `${this._width}px`).attr("width", `${this._width}px`);
-              }
-              if (this._autoHeight) {
-                  this.height(h);
-                  this._select.style("height", `${this._height}px`).attr("height", `${this._height}px`);
-              }
-          }
           // Calculates the width and/or height of the Viz based on the this._select, if either has not been defined.
           if ((!this._width || !this._height) && (!this._detectVisible || dom.inViewport(this._select.node()))) {
               this._autoWidth = this._width === undefined;
               this._autoHeight = this._height === undefined;
-              setSVGSize.bind(this)();
+              this._setSVGSize();
           }
           this._select.attr("class", "d3plus-viz").attr("aria-hidden", this._ariaHidden).attr("aria-labelledby", `${this._uuid}-title ${this._uuid}-desc`).attr("role", "img").attr("xmlns", "http://www.w3.org/2000/svg").attr("xmlns:xlink", "http://www.w3.org/1999/xlink").transition().duration(this._duration).style("width", this._width !== undefined ? `${this._width}px` : undefined).style("height", this._height !== undefined ? `${this._height}px` : undefined).attr("width", this._width !== undefined ? `${this._width}px` : undefined).attr("height", this._height !== undefined ? `${this._height}px` : undefined);
           // sets "position: relative" on the SVG parent if currently undefined
@@ -7735,7 +7747,6 @@
           this._resizePoll = clearTimeout(this._resizePoll);
           this._scrollPoll = clearTimeout(this._scrollPoll);
           d3Selection.select(this._scrollContainer).on(`scroll.${this._uuid}`, null);
-          d3Selection.select(this._resizeContainer).on(`resize.${this._uuid}`, null);
           if (this._detectVisible && this._select.style("visibility") === "hidden") {
               this._visiblePoll = setInterval(()=>{
                   if (this._select.style("visibility") !== "hidden") {
@@ -7805,14 +7816,9 @@
                       if (this._select.attr("opacity") === "0") this._select.transition().duration(this._duration).attr("opacity", 1);
                   }
                   if (this._detectResize && (this._autoWidth || this._autoHeight)) {
-                      d3Selection.select(this._resizeContainer).on(`resize.${this._uuid}`, ()=>{
-                          this._resizePoll = clearTimeout(this._resizePoll);
-                          this._resizePoll = setTimeout(()=>{
-                              this._resizePoll = clearTimeout(this._resizePoll);
-                              setSVGSize.bind(this)();
-                              this.render(callback);
-                          }, this._detectResizeDelay);
-                      });
+                      this._resizeObserver.observe(this._select.node().parentNode);
+                  } else {
+                      this._resizeObserver.unobserve(this._select.node().parentNode);
                   }
                   if (callback) setTimeout(callback, this._duration + 100);
               });
@@ -8294,14 +8300,6 @@
     */ noDataMessage(_) {
           return arguments.length ? (this._noDataMessage = _, this) : this._noDataMessage;
       }
-      /**
-        @memberof Viz
-        @desc If using resize detection, this method allow a custom override of the element to which the resize detection function gets attached.
-        @param {String|HTMLElement} *selector*
-        @chainable
-    */ resizeContainer(_) {
-          return arguments.length ? (this._resizeContainer = _, this) : this._resizeContainer;
-      }
       /**
         @memberof Viz
         @desc If using scroll or visibility detection, this method allow a custom override of the element to which the scroll detection function gets attached.
@@ -8790,7 +8788,10 @@
               "mousemove.legend": mousemoveLegend.bind(this)
           };
           this._queue = [];
-          this._resizeContainer = typeof window === "undefined" ? "" : window;
+          this._resizeObserver = new ResizeObserver(debounce(()=>{
+              this._setSVGSize();
+              this.render(this._callback);
+          }, this._detectResizeDelay));
           this._scrollContainer = typeof window === "undefined" ? "" : window;
           this._shape = constant("Rect");
           this._shapes = [];