Resize Observer

This plugin add the method .resizeObserve() to all Graphery SVG objects. When the SVG is resized this method run a callback.

The plugin is loaded with:

import gySVG          from "https://cdn.graphery.online/svg/1.0.0/module/index.js";
import resizeObserver from "https://cdn.graphery.online/svg/1.0.0/module/resize-observer.plugin.js";
gySVG.extend (resizeObserver);

.resizeObserve() receives as parameter a callback, and this callback is called when the SVG is resized. The callback receives as parameters a reference to the SVG object and two matrices, one with the current transformation and the other with the previous transformation. These values are obtained with getScreenCTM() and represent the matrix that transforms the current element's coordinate system into the SVG viewport coordinate system; that is, they are the values of the SVG element transformation.

import gySVG          from "https://cdn.graphery.online/svg/1.0.0/module/index.js";
import resizeObserver from "https://cdn.graphery.online/svg/1.0.0/module/resize-observer.plugin.js";
gySVG.extend (resizeObserver);
const description = document.querySelector('#description');
const svg = gySVG ().viewBox (0, 0, 100, 100)
  .width ('100%').height ('100%').preserveAspectRatio('none')
  .resizeObserver((svg, matrix) => {
    description.innerHTML = `
      viewBox: ${ svg.viewBox() },
      width: ${ getComputedStyle(svg.el).width },
      height: ${ getComputedStyle(svg.el).height },
      x-scale: ${ Math.round(matrix.a * 100) / 100 },
      y-scale: ${ Math.round(matrix.d * 100) / 100 },
    `;
  });
svg.add('rect').x(10).y(10).width(80).height(80).fill('none')
    .stroke('grey').stroke_width(2).stroke_dasharray(2);
svg.attachTo('#example-01')