svelte-plots-basic 1.1.0 → 1.1.1

package/README.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-`svelte-plots-basic` is a [Svelte](https://svelte.dev) component library for creating very simple 2D plots/charts. It is currently under active development and breaking changes may occur. In its current state (v. 0.1.1) it allows to create bar, scatter, area and line charts as well as any combination of the four. The charts are created using [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) and are re-scalable.
+`svelte-plots-basic` is a [Svelte](https://svelte.dev) component library for creating very simple 2D plots/charts. It is currently under active development and breaking changes may occur. In its current state (v. 1.1.1) it allows to create bar, scatter, area and line charts as well as any combination of the four. The charts are created using [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) and are re-scalable.
 
 The description is not complete yet and will be updated during February-March of 2022.
 

package/dist/index.js

@@ -162,59 +162,6 @@
             node.style.setProperty(key, value, important ? 'important' : '');
         }
     }
-    // unfortunately this can't be a constant as that wouldn't be tree-shakeable
-    // so we cache the result instead
-    let crossorigin;
-    function is_crossorigin() {
-        if (crossorigin === undefined) {
-            crossorigin = false;
-            try {
-                if (typeof window !== 'undefined' && window.parent) {
-                    void window.parent.document;
-                }
-            }
-            catch (error) {
-                crossorigin = true;
-            }
-        }
-        return crossorigin;
-    }
-    function add_resize_listener(node, fn) {
-        const computed_style = getComputedStyle(node);
-        if (computed_style.position === 'static') {
-            node.style.position = 'relative';
-        }
-        const iframe = element('iframe');
-        iframe.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ' +
-            'overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;');
-        iframe.setAttribute('aria-hidden', 'true');
-        iframe.tabIndex = -1;
-        const crossorigin = is_crossorigin();
-        let unsubscribe;
-        if (crossorigin) {
-            iframe.src = "data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>";
-            unsubscribe = listen(window, 'message', (event) => {
-                if (event.source === iframe.contentWindow)
-                    fn();
-            });
-        }
-        else {
-            iframe.src = 'about:blank';
-            iframe.onload = () => {
-                unsubscribe = listen(iframe.contentWindow, 'resize', fn);
-            };
-        }
-        append(node, iframe);
-        return () => {
-            if (crossorigin) {
-                unsubscribe();
-            }
-            else if (unsubscribe && iframe.contentWindow) {
-                unsubscribe();
-            }
-            detach(iframe);
-        };
-    }
     function toggle_class(element, name, toggle) {
         element.classList[toggle ? 'add' : 'remove'](name);
     }
@@ -233,6 +180,9 @@
             throw new Error('Function called outside component initialization');
         return current_component;
     }
+    function onMount(fn) {
+        get_current_component().$$.on_mount.push(fn);
+    }
     function createEventDispatcher() {
         const component = get_current_component();
         return (type, detail, { cancelable = false } = {}) => {
@@ -565,7 +515,7 @@
     const get_xaxis_slot_changes = dirty => ({});
     const get_xaxis_slot_context = ctx => ({});
 
-    // (329:3) {#if title !== ""}
+    // (342:3) {#if title !== ""}
     function create_if_block_3(ctx) {
     	let div;
 
@@ -586,7 +536,7 @@
     	};
     }
 
-    // (330:3) {#if yLabel !== ""}
+    // (343:3) {#if yLabel !== ""}
     function create_if_block_2(ctx) {
     	let div;
     	let span;
@@ -610,7 +560,7 @@
     	};
     }
 
-    // (331:3) {#if xLabel !== ""}
+    // (344:3) {#if xLabel !== ""}
     function create_if_block_1(ctx) {
     	let div;
     	let span;
@@ -634,7 +584,7 @@
     	};
     }
 
-    // (359:3) {#if !$isOk}
+    // (372:3) {#if !$isOk}
     function create_if_block$9(ctx) {
     	let p;
 
@@ -671,10 +621,8 @@
     	let rect_width_value;
     	let rect_height_value;
     	let g;
-    	let div0_resize_listener;
     	let t3;
     	let div1_class_value;
-    	let div1_resize_listener;
     	let current;
     	let mounted;
     	let dispose;
@@ -689,7 +637,7 @@
     	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
     	const box_slot_template = /*#slots*/ ctx[27].box;
     	const box_slot = create_slot(box_slot_template, ctx, /*$$scope*/ ctx[26], get_box_slot_context);
-    	let if_block3 = !/*$isOk*/ ctx[6] && create_if_block$9();
+    	let if_block3 = !/*$isOk*/ ctx[3] && create_if_block$9();
 
     	return {
     		c() {
@@ -713,19 +661,17 @@
     			t3 = space();
     			if (if_block3) if_block3.c();
     			set_style(rect, "pointer-events", "none");
-    			attr(rect, "x", rect_x_value = /*cpx*/ ctx[10][0]);
-    			attr(rect, "y", rect_y_value = /*cpy*/ ctx[9][1]);
-    			attr(rect, "width", rect_width_value = /*cpx*/ ctx[10][1] - /*cpx*/ ctx[10][0]);
-    			attr(rect, "height", rect_height_value = /*cpy*/ ctx[9][0] - /*cpy*/ ctx[9][1]);
-    			attr(clipPath, "id", /*clipPathID*/ ctx[11]);
-    			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[11] + ")");
+    			attr(rect, "x", rect_x_value = /*cpx*/ ctx[8][0]);
+    			attr(rect, "y", rect_y_value = /*cpy*/ ctx[7][1]);
+    			attr(rect, "width", rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][0]);
+    			attr(rect, "height", rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][1]);
+    			attr(clipPath, "id", /*clipPathID*/ ctx[9]);
+    			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[9] + ")");
     			attr(svg, "preserveAspectRatio", "none");
     			attr(svg, "class", "axes");
     			attr(div0, "class", "axes-wrapper svelte-n80kcc");
-    			add_render_callback(() => /*div0_elementresize_handler*/ ctx[28].call(div0));
-    			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[8]) + " svelte-n80kcc");
-    			add_render_callback(() => /*div1_elementresize_handler*/ ctx[29].call(div1));
-    			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[6]);
+    			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-n80kcc");
+    			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
     		},
     		m(target, anchor) {
     			insert(target, div1, anchor);
@@ -759,14 +705,14 @@
     				box_slot.m(svg, null);
     			}
 
-    			div0_resize_listener = add_resize_listener(div0, /*div0_elementresize_handler*/ ctx[28].bind(div0));
+    			/*div0_binding*/ ctx[28](div0);
     			append(div1, t3);
     			if (if_block3) if_block3.m(div1, null);
-    			div1_resize_listener = add_resize_listener(div1, /*div1_elementresize_handler*/ ctx[29].bind(div1));
+    			/*div1_binding*/ ctx[29](div1);
     			current = true;
 
     			if (!mounted) {
-    				dispose = listen(svg, "click", /*handleClick*/ ctx[18]);
+    				dispose = listen(svg, "click", /*handleClick*/ ctx[16]);
     				mounted = true;
     			}
     		},
@@ -810,19 +756,19 @@
     				if_block2 = null;
     			}
 
-    			if (!current || dirty[0] & /*cpx*/ 1024 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[10][0])) {
+    			if (!current || dirty[0] & /*cpx*/ 256 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[8][0])) {
     				attr(rect, "x", rect_x_value);
     			}
 
-    			if (!current || dirty[0] & /*cpy*/ 512 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[9][1])) {
+    			if (!current || dirty[0] & /*cpy*/ 128 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[7][1])) {
     				attr(rect, "y", rect_y_value);
     			}
 
-    			if (!current || dirty[0] & /*cpx*/ 1024 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[10][1] - /*cpx*/ ctx[10][0])) {
+    			if (!current || dirty[0] & /*cpx*/ 256 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][0])) {
     				attr(rect, "width", rect_width_value);
     			}
 
-    			if (!current || dirty[0] & /*cpy*/ 512 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[9][0] - /*cpy*/ ctx[9][1])) {
+    			if (!current || dirty[0] & /*cpy*/ 128 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][1])) {
     				attr(rect, "height", rect_height_value);
     			}
 
@@ -886,7 +832,7 @@
     				}
     			}
 
-    			if (!/*$isOk*/ ctx[6]) {
+    			if (!/*$isOk*/ ctx[3]) {
     				if (if_block3) ; else {
     					if_block3 = create_if_block$9();
     					if_block3.c();
@@ -897,12 +843,12 @@
     				if_block3 = null;
     			}
 
-    			if (!current || dirty[0] & /*$scale*/ 256 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[8]) + " svelte-n80kcc")) {
+    			if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-n80kcc")) {
     				attr(div1, "class", div1_class_value);
     			}
 
-    			if (dirty[0] & /*$scale, $isOk*/ 320) {
-    				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[6]);
+    			if (dirty[0] & /*$scale, $isOk*/ 24) {
+    				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
     			}
     		},
     		i(local) {
@@ -929,9 +875,9 @@
     			if (yaxis_slot) yaxis_slot.d(detaching);
     			if (default_slot) default_slot.d(detaching);
     			if (box_slot) box_slot.d(detaching);
-    			div0_resize_listener();
+    			/*div0_binding*/ ctx[28](null);
     			if (if_block3) if_block3.d();
-    			div1_resize_listener();
+    			/*div1_binding*/ ctx[29](null);
     			mounted = false;
     			dispose();
     		}
@@ -1004,40 +950,40 @@
     	const clipPathID = "plottingArea" + Math.round(Math.random() * 10000);
 
     	/* parameters for internal use inside the component */
-    	let plotWidth; // width of plot
+    	let plotElement;
 
-    	let plotHeight; // height of plot
+    	let axesElement;
     	let axesMargins = [0.034, 0.034, 0.034, 0.034]; // initial margins (will be multiplied to FACTORS)
 
     	/* reactive parameters to be shared with children via context */
     	const width = writable(100); // actual width of plotting area in pixels
 
-    	component_subscribe($$self, width, value => $$invalidate(7, $width = value));
+    	component_subscribe($$self, width, value => $$invalidate(24, $width = value));
     	const height = writable(100); // actual height of plotting area in pixels
-    	component_subscribe($$self, height, value => $$invalidate(5, $height = value));
+    	component_subscribe($$self, height, value => $$invalidate(22, $height = value));
     	const xLim = writable([undefined, undefined]); // actual limits for x-axis in plot units
     	component_subscribe($$self, xLim, value => $$invalidate(25, $xLim = value));
     	const yLim = writable([undefined, undefined]); // actual limits for y-axis in plot units
-    	component_subscribe($$self, yLim, value => $$invalidate(24, $yLim = value));
+    	component_subscribe($$self, yLim, value => $$invalidate(23, $yLim = value));
     	const scale = writable("medium"); // scale factor (how big the shown plot is)
-    	component_subscribe($$self, scale, value => $$invalidate(8, $scale = value));
+    	component_subscribe($$self, scale, value => $$invalidate(4, $scale = value));
     	const isOk = writable(false); // are axes ready for drawing
-    	component_subscribe($$self, isOk, value => $$invalidate(6, $isOk = value));
+    	component_subscribe($$self, isOk, value => $$invalidate(3, $isOk = value));
 
     	/** Adds margins for x-axis (e.g. when x-axis must be shown) */
     	const addXAxisMargins = function () {
-    		$$invalidate(22, axesMargins[0] = 1, axesMargins);
-    		$$invalidate(22, axesMargins[2] = 0.5, axesMargins);
-    		$$invalidate(22, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
-    		$$invalidate(22, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
+    		$$invalidate(20, axesMargins[0] = 1, axesMargins);
+    		$$invalidate(20, axesMargins[2] = 0.5, axesMargins);
+    		$$invalidate(20, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
+    		$$invalidate(20, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
     	};
 
     	/** Adds margins for y-axis (e.g. when y-axis must be shown) */
     	const addYAxisMargins = function () {
-    		$$invalidate(22, axesMargins[1] = 1, axesMargins);
-    		$$invalidate(22, axesMargins[3] = 0.5, axesMargins);
-    		$$invalidate(22, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
-    		$$invalidate(22, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
+    		$$invalidate(20, axesMargins[1] = 1, axesMargins);
+    		$$invalidate(20, axesMargins[3] = 0.5, axesMargins);
+    		$$invalidate(20, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
+    		$$invalidate(20, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
     	};
 
     	/** Adjusts limits for x-axis (e.g. when new series is added)
@@ -1211,63 +1157,73 @@
     		dispatch("axesclick");
     	}
 
-    	function div0_elementresize_handler() {
-    		$height = this.clientHeight;
-    		height.set($height);
-    		$width = this.clientWidth;
-    		width.set($width);
+    	/* observer for the plotting area size */
+    	var ro = new ResizeObserver(entries => {
+    			for (let entry of entries) {
+    				const pcr = plotElement.getBoundingClientRect();
+    				const acr = axesElement.getBoundingClientRect();
+    				width.update(x => acr.width);
+    				height.update(x => acr.height);
+    				scale.update(x => getScale(pcr.width, pcr.height));
+    			}
+    		});
+
+    	onMount(() => {
+    		ro.observe(plotElement);
+    	});
+
+    	function div0_binding($$value) {
+    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+    			axesElement = $$value;
+    			$$invalidate(6, axesElement);
+    		});
     	}
 
-    	function div1_elementresize_handler() {
-    		plotHeight = this.clientHeight;
-    		plotWidth = this.clientWidth;
-    		$$invalidate(4, plotHeight);
-    		$$invalidate(3, plotWidth);
+    	function div1_binding($$value) {
+    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+    			plotElement = $$value;
+    			$$invalidate(5, plotElement);
+    		});
     	}
 
     	$$self.$$set = $$props => {
-    		if ('limX' in $$props) $$invalidate(19, limX = $$props.limX);
-    		if ('limY' in $$props) $$invalidate(20, limY = $$props.limY);
+    		if ('limX' in $$props) $$invalidate(17, limX = $$props.limX);
+    		if ('limY' in $$props) $$invalidate(18, limY = $$props.limY);
     		if ('title' in $$props) $$invalidate(0, title = $$props.title);
     		if ('xLabel' in $$props) $$invalidate(1, xLabel = $$props.xLabel);
     		if ('yLabel' in $$props) $$invalidate(2, yLabel = $$props.yLabel);
-    		if ('multiSeries' in $$props) $$invalidate(21, multiSeries = $$props.multiSeries);
+    		if ('multiSeries' in $$props) $$invalidate(19, multiSeries = $$props.multiSeries);
     		if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
     	};
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty[0] & /*plotWidth, plotHeight*/ 24) {
-    			// update plot scale based on its size
-    			scale.update(x => getScale(plotWidth, plotHeight));
-    		}
-
-    		if ($$self.$$.dirty[0] & /*limX*/ 524288) {
+    		if ($$self.$$.dirty[0] & /*limX*/ 131072) {
     			// this is reactive in case if limX and limY are interactively changed by parent script
     			if (!limX.some(v => v === undefined)) xLim.update(v => limX);
     		}
 
-    		if ($$self.$$.dirty[0] & /*limY*/ 1048576) {
+    		if ($$self.$$.dirty[0] & /*limY*/ 262144) {
     			if (!limY.some(v => v === undefined)) yLim.update(v => limY);
     		}
 
-    		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 4194560) {
+    		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 1048592) {
     			// computes real margins in pixels based on current scale
-    			$$invalidate(23, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
+    			$$invalidate(21, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
     		}
 
-    		if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 58720416) {
+    		if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 65011712) {
     			// computes status which tells that axes limits look fine and it is safe to draw
     			// the status is based on the axis limits validity
     			isOk.update(v => Array.isArray($yLim) && Array.isArray($xLim) && $xLim.length === 2 && $yLim.length === 2 && !$yLim.some(v => v === undefined) && !$xLim.some(v => v === undefined) && !$yLim.some(v => isNaN(v)) && !$xLim.some(v => isNaN(v)) && $xLim[1] !== $xLim[0] && $yLim[1] !== $yLim[0] && $width > margins[1] + margins[3] && $height > margins[0] + margins[2]);
     		}
 
-    		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 33554624) {
+    		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 50331656) {
     			// computes coordinates for clip path box
-    			$$invalidate(10, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
+    			$$invalidate(8, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
     		}
 
-    		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 16777312) {
-    			$$invalidate(9, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
+    		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 12582920) {
+    			$$invalidate(7, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
     		}
     	};
 
@@ -1275,12 +1231,10 @@
     		title,
     		xLabel,
     		yLabel,
-    		plotWidth,
-    		plotHeight,
-    		$height,
     		$isOk,
-    		$width,
     		$scale,
+    		plotElement,
+    		axesElement,
     		cpy,
     		cpx,
     		clipPathID,
@@ -1296,12 +1250,14 @@
     		multiSeries,
     		axesMargins,
     		margins,
+    		$height,
     		$yLim,
+    		$width,
     		$xLim,
     		$$scope,
     		slots,
-    		div0_elementresize_handler,
-    		div1_elementresize_handler
+    		div0_binding,
+    		div1_binding
     	];
     }
 
@@ -1316,12 +1272,12 @@
     			create_fragment$b,
     			safe_not_equal,
     			{
-    				limX: 19,
-    				limY: 20,
+    				limX: 17,
+    				limY: 18,
     				title: 0,
     				xLabel: 1,
     				yLabel: 2,
-    				multiSeries: 21
+    				multiSeries: 19
     			},
     			add_css$3,
     			[-1, -1]

package/dist/index.mjs

@@ -156,59 +156,6 @@ function set_style(node, key, value, important) {
         node.style.setProperty(key, value, important ? 'important' : '');
     }
 }
-// unfortunately this can't be a constant as that wouldn't be tree-shakeable
-// so we cache the result instead
-let crossorigin;
-function is_crossorigin() {
-    if (crossorigin === undefined) {
-        crossorigin = false;
-        try {
-            if (typeof window !== 'undefined' && window.parent) {
-                void window.parent.document;
-            }
-        }
-        catch (error) {
-            crossorigin = true;
-        }
-    }
-    return crossorigin;
-}
-function add_resize_listener(node, fn) {
-    const computed_style = getComputedStyle(node);
-    if (computed_style.position === 'static') {
-        node.style.position = 'relative';
-    }
-    const iframe = element('iframe');
-    iframe.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ' +
-        'overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;');
-    iframe.setAttribute('aria-hidden', 'true');
-    iframe.tabIndex = -1;
-    const crossorigin = is_crossorigin();
-    let unsubscribe;
-    if (crossorigin) {
-        iframe.src = "data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>";
-        unsubscribe = listen(window, 'message', (event) => {
-            if (event.source === iframe.contentWindow)
-                fn();
-        });
-    }
-    else {
-        iframe.src = 'about:blank';
-        iframe.onload = () => {
-            unsubscribe = listen(iframe.contentWindow, 'resize', fn);
-        };
-    }
-    append(node, iframe);
-    return () => {
-        if (crossorigin) {
-            unsubscribe();
-        }
-        else if (unsubscribe && iframe.contentWindow) {
-            unsubscribe();
-        }
-        detach(iframe);
-    };
-}
 function toggle_class(element, name, toggle) {
     element.classList[toggle ? 'add' : 'remove'](name);
 }
@@ -227,6 +174,9 @@ function get_current_component() {
         throw new Error('Function called outside component initialization');
     return current_component;
 }
+function onMount(fn) {
+    get_current_component().$$.on_mount.push(fn);
+}
 function createEventDispatcher() {
     const component = get_current_component();
     return (type, detail, { cancelable = false } = {}) => {
@@ -559,7 +509,7 @@ const get_yaxis_slot_context = ctx => ({});
 const get_xaxis_slot_changes = dirty => ({});
 const get_xaxis_slot_context = ctx => ({});
 
-// (329:3) {#if title !== ""}
+// (342:3) {#if title !== ""}
 function create_if_block_3(ctx) {
 	let div;
 
@@ -580,7 +530,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (330:3) {#if yLabel !== ""}
+// (343:3) {#if yLabel !== ""}
 function create_if_block_2(ctx) {
 	let div;
 	let span;
@@ -604,7 +554,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (331:3) {#if xLabel !== ""}
+// (344:3) {#if xLabel !== ""}
 function create_if_block_1(ctx) {
 	let div;
 	let span;
@@ -628,7 +578,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (359:3) {#if !$isOk}
+// (372:3) {#if !$isOk}
 function create_if_block$9(ctx) {
 	let p;
 
@@ -665,10 +615,8 @@ function create_fragment$b(ctx) {
 	let rect_width_value;
 	let rect_height_value;
 	let g;
-	let div0_resize_listener;
 	let t3;
 	let div1_class_value;
-	let div1_resize_listener;
 	let current;
 	let mounted;
 	let dispose;
@@ -683,7 +631,7 @@ function create_fragment$b(ctx) {
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
 	const box_slot_template = /*#slots*/ ctx[27].box;
 	const box_slot = create_slot(box_slot_template, ctx, /*$$scope*/ ctx[26], get_box_slot_context);
-	let if_block3 = !/*$isOk*/ ctx[6] && create_if_block$9();
+	let if_block3 = !/*$isOk*/ ctx[3] && create_if_block$9();
 
 	return {
 		c() {
@@ -707,19 +655,17 @@ function create_fragment$b(ctx) {
 			t3 = space();
 			if (if_block3) if_block3.c();
 			set_style(rect, "pointer-events", "none");
-			attr(rect, "x", rect_x_value = /*cpx*/ ctx[10][0]);
-			attr(rect, "y", rect_y_value = /*cpy*/ ctx[9][1]);
-			attr(rect, "width", rect_width_value = /*cpx*/ ctx[10][1] - /*cpx*/ ctx[10][0]);
-			attr(rect, "height", rect_height_value = /*cpy*/ ctx[9][0] - /*cpy*/ ctx[9][1]);
-			attr(clipPath, "id", /*clipPathID*/ ctx[11]);
-			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[11] + ")");
+			attr(rect, "x", rect_x_value = /*cpx*/ ctx[8][0]);
+			attr(rect, "y", rect_y_value = /*cpy*/ ctx[7][1]);
+			attr(rect, "width", rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][0]);
+			attr(rect, "height", rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][1]);
+			attr(clipPath, "id", /*clipPathID*/ ctx[9]);
+			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[9] + ")");
 			attr(svg, "preserveAspectRatio", "none");
 			attr(svg, "class", "axes");
 			attr(div0, "class", "axes-wrapper svelte-n80kcc");
-			add_render_callback(() => /*div0_elementresize_handler*/ ctx[28].call(div0));
-			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[8]) + " svelte-n80kcc");
-			add_render_callback(() => /*div1_elementresize_handler*/ ctx[29].call(div1));
-			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[6]);
+			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-n80kcc");
+			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -753,14 +699,14 @@ function create_fragment$b(ctx) {
 				box_slot.m(svg, null);
 			}
 
-			div0_resize_listener = add_resize_listener(div0, /*div0_elementresize_handler*/ ctx[28].bind(div0));
+			/*div0_binding*/ ctx[28](div0);
 			append(div1, t3);
 			if (if_block3) if_block3.m(div1, null);
-			div1_resize_listener = add_resize_listener(div1, /*div1_elementresize_handler*/ ctx[29].bind(div1));
+			/*div1_binding*/ ctx[29](div1);
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(svg, "click", /*handleClick*/ ctx[18]);
+				dispose = listen(svg, "click", /*handleClick*/ ctx[16]);
 				mounted = true;
 			}
 		},
@@ -804,19 +750,19 @@ function create_fragment$b(ctx) {
 				if_block2 = null;
 			}
 
-			if (!current || dirty[0] & /*cpx*/ 1024 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[10][0])) {
+			if (!current || dirty[0] & /*cpx*/ 256 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[8][0])) {
 				attr(rect, "x", rect_x_value);
 			}
 
-			if (!current || dirty[0] & /*cpy*/ 512 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[9][1])) {
+			if (!current || dirty[0] & /*cpy*/ 128 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[7][1])) {
 				attr(rect, "y", rect_y_value);
 			}
 
-			if (!current || dirty[0] & /*cpx*/ 1024 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[10][1] - /*cpx*/ ctx[10][0])) {
+			if (!current || dirty[0] & /*cpx*/ 256 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][0])) {
 				attr(rect, "width", rect_width_value);
 			}
 
-			if (!current || dirty[0] & /*cpy*/ 512 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[9][0] - /*cpy*/ ctx[9][1])) {
+			if (!current || dirty[0] & /*cpy*/ 128 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][1])) {
 				attr(rect, "height", rect_height_value);
 			}
 
@@ -880,7 +826,7 @@ function create_fragment$b(ctx) {
 				}
 			}
 
-			if (!/*$isOk*/ ctx[6]) {
+			if (!/*$isOk*/ ctx[3]) {
 				if (if_block3) ; else {
 					if_block3 = create_if_block$9();
 					if_block3.c();
@@ -891,12 +837,12 @@ function create_fragment$b(ctx) {
 				if_block3 = null;
 			}
 
-			if (!current || dirty[0] & /*$scale*/ 256 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[8]) + " svelte-n80kcc")) {
+			if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-n80kcc")) {
 				attr(div1, "class", div1_class_value);
 			}
 
-			if (dirty[0] & /*$scale, $isOk*/ 320) {
-				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[6]);
+			if (dirty[0] & /*$scale, $isOk*/ 24) {
+				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
 			}
 		},
 		i(local) {
@@ -923,9 +869,9 @@ function create_fragment$b(ctx) {
 			if (yaxis_slot) yaxis_slot.d(detaching);
 			if (default_slot) default_slot.d(detaching);
 			if (box_slot) box_slot.d(detaching);
-			div0_resize_listener();
+			/*div0_binding*/ ctx[28](null);
 			if (if_block3) if_block3.d();
-			div1_resize_listener();
+			/*div1_binding*/ ctx[29](null);
 			mounted = false;
 			dispose();
 		}
@@ -998,40 +944,40 @@ function instance$b($$self, $$props, $$invalidate) {
 	const clipPathID = "plottingArea" + Math.round(Math.random() * 10000);
 
 	/* parameters for internal use inside the component */
-	let plotWidth; // width of plot
+	let plotElement;
 
-	let plotHeight; // height of plot
+	let axesElement;
 	let axesMargins = [0.034, 0.034, 0.034, 0.034]; // initial margins (will be multiplied to FACTORS)
 
 	/* reactive parameters to be shared with children via context */
 	const width = writable(100); // actual width of plotting area in pixels
 
-	component_subscribe($$self, width, value => $$invalidate(7, $width = value));
+	component_subscribe($$self, width, value => $$invalidate(24, $width = value));
 	const height = writable(100); // actual height of plotting area in pixels
-	component_subscribe($$self, height, value => $$invalidate(5, $height = value));
+	component_subscribe($$self, height, value => $$invalidate(22, $height = value));
 	const xLim = writable([undefined, undefined]); // actual limits for x-axis in plot units
 	component_subscribe($$self, xLim, value => $$invalidate(25, $xLim = value));
 	const yLim = writable([undefined, undefined]); // actual limits for y-axis in plot units
-	component_subscribe($$self, yLim, value => $$invalidate(24, $yLim = value));
+	component_subscribe($$self, yLim, value => $$invalidate(23, $yLim = value));
 	const scale = writable("medium"); // scale factor (how big the shown plot is)
-	component_subscribe($$self, scale, value => $$invalidate(8, $scale = value));
+	component_subscribe($$self, scale, value => $$invalidate(4, $scale = value));
 	const isOk = writable(false); // are axes ready for drawing
-	component_subscribe($$self, isOk, value => $$invalidate(6, $isOk = value));
+	component_subscribe($$self, isOk, value => $$invalidate(3, $isOk = value));
 
 	/** Adds margins for x-axis (e.g. when x-axis must be shown) */
 	const addXAxisMargins = function () {
-		$$invalidate(22, axesMargins[0] = 1, axesMargins);
-		$$invalidate(22, axesMargins[2] = 0.5, axesMargins);
-		$$invalidate(22, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
-		$$invalidate(22, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
+		$$invalidate(20, axesMargins[0] = 1, axesMargins);
+		$$invalidate(20, axesMargins[2] = 0.5, axesMargins);
+		$$invalidate(20, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
+		$$invalidate(20, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
 	};
 
 	/** Adds margins for y-axis (e.g. when y-axis must be shown) */
 	const addYAxisMargins = function () {
-		$$invalidate(22, axesMargins[1] = 1, axesMargins);
-		$$invalidate(22, axesMargins[3] = 0.5, axesMargins);
-		$$invalidate(22, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
-		$$invalidate(22, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
+		$$invalidate(20, axesMargins[1] = 1, axesMargins);
+		$$invalidate(20, axesMargins[3] = 0.5, axesMargins);
+		$$invalidate(20, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
+		$$invalidate(20, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
 	};
 
 	/** Adjusts limits for x-axis (e.g. when new series is added)
@@ -1205,63 +1151,73 @@ function instance$b($$self, $$props, $$invalidate) {
 		dispatch("axesclick");
 	}
 
-	function div0_elementresize_handler() {
-		$height = this.clientHeight;
-		height.set($height);
-		$width = this.clientWidth;
-		width.set($width);
+	/* observer for the plotting area size */
+	var ro = new ResizeObserver(entries => {
+			for (let entry of entries) {
+				const pcr = plotElement.getBoundingClientRect();
+				const acr = axesElement.getBoundingClientRect();
+				width.update(x => acr.width);
+				height.update(x => acr.height);
+				scale.update(x => getScale(pcr.width, pcr.height));
+			}
+		});
+
+	onMount(() => {
+		ro.observe(plotElement);
+	});
+
+	function div0_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			axesElement = $$value;
+			$$invalidate(6, axesElement);
+		});
 	}
 
-	function div1_elementresize_handler() {
-		plotHeight = this.clientHeight;
-		plotWidth = this.clientWidth;
-		$$invalidate(4, plotHeight);
-		$$invalidate(3, plotWidth);
+	function div1_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			plotElement = $$value;
+			$$invalidate(5, plotElement);
+		});
 	}
 
 	$$self.$$set = $$props => {
-		if ('limX' in $$props) $$invalidate(19, limX = $$props.limX);
-		if ('limY' in $$props) $$invalidate(20, limY = $$props.limY);
+		if ('limX' in $$props) $$invalidate(17, limX = $$props.limX);
+		if ('limY' in $$props) $$invalidate(18, limY = $$props.limY);
 		if ('title' in $$props) $$invalidate(0, title = $$props.title);
 		if ('xLabel' in $$props) $$invalidate(1, xLabel = $$props.xLabel);
 		if ('yLabel' in $$props) $$invalidate(2, yLabel = $$props.yLabel);
-		if ('multiSeries' in $$props) $$invalidate(21, multiSeries = $$props.multiSeries);
+		if ('multiSeries' in $$props) $$invalidate(19, multiSeries = $$props.multiSeries);
 		if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*plotWidth, plotHeight*/ 24) {
-			// update plot scale based on its size
-			scale.update(x => getScale(plotWidth, plotHeight));
-		}
-
-		if ($$self.$$.dirty[0] & /*limX*/ 524288) {
+		if ($$self.$$.dirty[0] & /*limX*/ 131072) {
 			// this is reactive in case if limX and limY are interactively changed by parent script
 			if (!limX.some(v => v === undefined)) xLim.update(v => limX);
 		}
 
-		if ($$self.$$.dirty[0] & /*limY*/ 1048576) {
+		if ($$self.$$.dirty[0] & /*limY*/ 262144) {
 			if (!limY.some(v => v === undefined)) yLim.update(v => limY);
 		}
 
-		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 4194560) {
+		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 1048592) {
 			// computes real margins in pixels based on current scale
-			$$invalidate(23, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
+			$$invalidate(21, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
 		}
 
-		if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 58720416) {
+		if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 65011712) {
 			// computes status which tells that axes limits look fine and it is safe to draw
 			// the status is based on the axis limits validity
 			isOk.update(v => Array.isArray($yLim) && Array.isArray($xLim) && $xLim.length === 2 && $yLim.length === 2 && !$yLim.some(v => v === undefined) && !$xLim.some(v => v === undefined) && !$yLim.some(v => isNaN(v)) && !$xLim.some(v => isNaN(v)) && $xLim[1] !== $xLim[0] && $yLim[1] !== $yLim[0] && $width > margins[1] + margins[3] && $height > margins[0] + margins[2]);
 		}
 
-		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 33554624) {
+		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 50331656) {
 			// computes coordinates for clip path box
-			$$invalidate(10, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
+			$$invalidate(8, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
 		}
 
-		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 16777312) {
-			$$invalidate(9, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
+		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 12582920) {
+			$$invalidate(7, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
 		}
 	};
 
@@ -1269,12 +1225,10 @@ function instance$b($$self, $$props, $$invalidate) {
 		title,
 		xLabel,
 		yLabel,
-		plotWidth,
-		plotHeight,
-		$height,
 		$isOk,
-		$width,
 		$scale,
+		plotElement,
+		axesElement,
 		cpy,
 		cpx,
 		clipPathID,
@@ -1290,12 +1244,14 @@ function instance$b($$self, $$props, $$invalidate) {
 		multiSeries,
 		axesMargins,
 		margins,
+		$height,
 		$yLim,
+		$width,
 		$xLim,
 		$$scope,
 		slots,
-		div0_elementresize_handler,
-		div1_elementresize_handler
+		div0_binding,
+		div1_binding
 	];
 }
 
@@ -1310,12 +1266,12 @@ class Axes extends SvelteComponent {
 			create_fragment$b,
 			safe_not_equal,
 			{
-				limX: 19,
-				limY: 20,
+				limX: 17,
+				limY: 18,
 				title: 0,
 				xLabel: 1,
 				yLabel: 2,
-				multiSeries: 21
+				multiSeries: 19
 			},
 			add_css$3,
 			[-1, -1]

package/package.json

@@ -25,7 +25,7 @@
     "dist"
   ],
   "description": "Svelte components for creating simple plots",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "repository": {
     "type": "git",
     "url": "svkucheryavski/svelte-plots-basic"

package/src/Axes.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { setContext, createEventDispatcher } from 'svelte';
+	import { setContext, createEventDispatcher, onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 
    /* input parameters */
@@ -46,8 +46,8 @@
    const clipPathID = "plottingArea" + Math.round(Math.random() * 10000);
 
    /* parameters for internal use inside the component */
-   let plotWidth;                                     // width of plot
-   let plotHeight;                                    // height of plot
+   let plotElement;
+   let axesElement;
    let axesMargins = [0.034, 0.034, 0.034, 0.034];    // initial margins (will be multiplied to FACTORS)
 
    /* reactive parameters to be shared with children via context */
@@ -265,10 +265,6 @@
 
 	setContext('axes', context);
 
-   // update plot scale based on its size
-   $: scale.update(x => getScale(plotWidth, plotHeight));
-
-
    // handle click on plot elements and dispatch manual events
    function dispatchClickEvent(eventName, el) {
       dispatch(eventName, {seriesTitle: el.parentNode.getAttribute('title'), elementID: el.dataset.id});
@@ -320,10 +316,27 @@
    // computes coordinates for clip path box
    $: cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1];
    $: cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0];
+
+   /* observer for the plotting area size */
+    var ro = new ResizeObserver(entries => {
+       for (let entry of entries) {
+
+         const pcr = plotElement.getBoundingClientRect();
+         const acr = axesElement.getBoundingClientRect();
+
+         width.update(x => acr.width);
+         height.update(x => acr.height);
+         scale.update(x => getScale(pcr.width, pcr.height));
+       }
+    });
+
+    onMount(() => {
+       ro.observe(plotElement);
+    });
 </script>
 
 
-<div class="plot {'plot_' + $scale}"  bind:clientHeight={plotHeight} bind:clientWidth={plotWidth} class:plot_error="{!$isOk}">
+<div class="plot {'plot_' + $scale}"  bind:this={plotElement} class:plot_error="{!$isOk}">
 
    <!-- plot title and axis labels -->
    {#if title !== ""}<div class="axes__title">{@html title}</div>{/if}
@@ -331,7 +344,7 @@
    {#if xLabel !== ""}<div class="axes__xlabel"><span>{@html xLabel}</span></div>{/if}
 
    <!-- axes (coordinate system) -->
-   <div class="axes-wrapper" bind:clientHeight={$height} bind:clientWidth={$width} >
+   <div class="axes-wrapper" bind:this={axesElement} >
       <svg on:click={handleClick} preserveAspectRatio="none" class="axes">
 
          <!-- define clipping path -->