svelte-plots-basic 1.1.0 → 1.1.2

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.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/dist/index.js +111 -152
  3. package/dist/index.mjs +111 -152
  4. package/package.json +1 -1
  5. package/src/Axes.svelte +35 -10
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  ## Description
4
4
 
5
- `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.
5
+ `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.2) 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.
6
6
 
7
7
  The description is not complete yet and will be updated during February-March of 2022.
8
8
 
package/dist/index.js CHANGED
@@ -108,6 +108,7 @@
108
108
  }
109
109
  function append_stylesheet(node, style) {
110
110
  append(node.head || node, style);
111
+ return style.sheet;
111
112
  }
112
113
  function insert(target, node, anchor) {
113
114
  target.insertBefore(node, anchor || null);
@@ -162,59 +163,6 @@
162
163
  node.style.setProperty(key, value, important ? 'important' : '');
163
164
  }
164
165
  }
165
- // unfortunately this can't be a constant as that wouldn't be tree-shakeable
166
- // so we cache the result instead
167
- let crossorigin;
168
- function is_crossorigin() {
169
- if (crossorigin === undefined) {
170
- crossorigin = false;
171
- try {
172
- if (typeof window !== 'undefined' && window.parent) {
173
- void window.parent.document;
174
- }
175
- }
176
- catch (error) {
177
- crossorigin = true;
178
- }
179
- }
180
- return crossorigin;
181
- }
182
- function add_resize_listener(node, fn) {
183
- const computed_style = getComputedStyle(node);
184
- if (computed_style.position === 'static') {
185
- node.style.position = 'relative';
186
- }
187
- const iframe = element('iframe');
188
- iframe.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ' +
189
- 'overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;');
190
- iframe.setAttribute('aria-hidden', 'true');
191
- iframe.tabIndex = -1;
192
- const crossorigin = is_crossorigin();
193
- let unsubscribe;
194
- if (crossorigin) {
195
- iframe.src = "data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>";
196
- unsubscribe = listen(window, 'message', (event) => {
197
- if (event.source === iframe.contentWindow)
198
- fn();
199
- });
200
- }
201
- else {
202
- iframe.src = 'about:blank';
203
- iframe.onload = () => {
204
- unsubscribe = listen(iframe.contentWindow, 'resize', fn);
205
- };
206
- }
207
- append(node, iframe);
208
- return () => {
209
- if (crossorigin) {
210
- unsubscribe();
211
- }
212
- else if (unsubscribe && iframe.contentWindow) {
213
- unsubscribe();
214
- }
215
- detach(iframe);
216
- };
217
- }
218
166
  function toggle_class(element, name, toggle) {
219
167
  element.classList[toggle ? 'add' : 'remove'](name);
220
168
  }
@@ -233,6 +181,9 @@
233
181
  throw new Error('Function called outside component initialization');
234
182
  return current_component;
235
183
  }
184
+ function onMount(fn) {
185
+ get_current_component().$$.on_mount.push(fn);
186
+ }
236
187
  function createEventDispatcher() {
237
188
  const component = get_current_component();
238
189
  return (type, detail, { cancelable = false } = {}) => {
@@ -374,6 +325,9 @@
374
325
  });
375
326
  block.o(local);
376
327
  }
328
+ else if (callback) {
329
+ callback();
330
+ }
377
331
  }
378
332
  function create_component(block) {
379
333
  block && block.c();
@@ -552,10 +506,10 @@
552
506
  return { set, update, subscribe };
553
507
  }
554
508
 
555
- /* src/Axes.svelte generated by Svelte v3.48.0 */
509
+ /* src/Axes.svelte generated by Svelte v3.50.1 */
556
510
 
557
511
  function add_css$3(target) {
558
- append_styles(target, "svelte-n80kcc", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:\". title\"\n \"ylab axes\"\n \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-n80kcc{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
512
+ append_styles(target, "svelte-11hqgob", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:\". title\"\n \"ylab axes\"\n \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-11hqgob{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes-content{padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
559
513
  }
560
514
 
561
515
  const get_box_slot_changes = dirty => ({});
@@ -565,7 +519,7 @@
565
519
  const get_xaxis_slot_changes = dirty => ({});
566
520
  const get_xaxis_slot_context = ctx => ({});
567
521
 
568
- // (329:3) {#if title !== ""}
522
+ // (342:3) {#if title !== ""}
569
523
  function create_if_block_3(ctx) {
570
524
  let div;
571
525
 
@@ -586,7 +540,7 @@
586
540
  };
587
541
  }
588
542
 
589
- // (330:3) {#if yLabel !== ""}
543
+ // (343:3) {#if yLabel !== ""}
590
544
  function create_if_block_2(ctx) {
591
545
  let div;
592
546
  let span;
@@ -610,7 +564,7 @@
610
564
  };
611
565
  }
612
566
 
613
- // (331:3) {#if xLabel !== ""}
567
+ // (344:3) {#if xLabel !== ""}
614
568
  function create_if_block_1(ctx) {
615
569
  let div;
616
570
  let span;
@@ -634,7 +588,7 @@
634
588
  };
635
589
  }
636
590
 
637
- // (359:3) {#if !$isOk}
591
+ // (372:3) {#if !$isOk}
638
592
  function create_if_block$9(ctx) {
639
593
  let p;
640
594
 
@@ -671,10 +625,8 @@
671
625
  let rect_width_value;
672
626
  let rect_height_value;
673
627
  let g;
674
- let div0_resize_listener;
675
628
  let t3;
676
629
  let div1_class_value;
677
- let div1_resize_listener;
678
630
  let current;
679
631
  let mounted;
680
632
  let dispose;
@@ -689,7 +641,7 @@
689
641
  const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
690
642
  const box_slot_template = /*#slots*/ ctx[27].box;
691
643
  const box_slot = create_slot(box_slot_template, ctx, /*$$scope*/ ctx[26], get_box_slot_context);
692
- let if_block3 = !/*$isOk*/ ctx[6] && create_if_block$9();
644
+ let if_block3 = !/*$isOk*/ ctx[3] && create_if_block$9();
693
645
 
694
646
  return {
695
647
  c() {
@@ -713,19 +665,18 @@
713
665
  t3 = space();
714
666
  if (if_block3) if_block3.c();
715
667
  set_style(rect, "pointer-events", "none");
716
- attr(rect, "x", rect_x_value = /*cpx*/ ctx[10][0]);
717
- attr(rect, "y", rect_y_value = /*cpy*/ ctx[9][1]);
718
- attr(rect, "width", rect_width_value = /*cpx*/ ctx[10][1] - /*cpx*/ ctx[10][0]);
719
- attr(rect, "height", rect_height_value = /*cpy*/ ctx[9][0] - /*cpy*/ ctx[9][1]);
720
- attr(clipPath, "id", /*clipPathID*/ ctx[11]);
721
- attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[11] + ")");
668
+ attr(rect, "x", rect_x_value = /*cpx*/ ctx[8][0]);
669
+ attr(rect, "y", rect_y_value = /*cpy*/ ctx[7][1]);
670
+ attr(rect, "width", rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][0]);
671
+ attr(rect, "height", rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][1]);
672
+ attr(clipPath, "id", /*clipPathID*/ ctx[9]);
673
+ attr(g, "class", "axes-content");
674
+ attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[9] + ")");
722
675
  attr(svg, "preserveAspectRatio", "none");
723
676
  attr(svg, "class", "axes");
724
- attr(div0, "class", "axes-wrapper svelte-n80kcc");
725
- add_render_callback(() => /*div0_elementresize_handler*/ ctx[28].call(div0));
726
- attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[8]) + " svelte-n80kcc");
727
- add_render_callback(() => /*div1_elementresize_handler*/ ctx[29].call(div1));
728
- toggle_class(div1, "plot_error", !/*$isOk*/ ctx[6]);
677
+ attr(div0, "class", "axes-wrapper svelte-11hqgob");
678
+ attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-11hqgob");
679
+ toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
729
680
  },
730
681
  m(target, anchor) {
731
682
  insert(target, div1, anchor);
@@ -759,14 +710,14 @@
759
710
  box_slot.m(svg, null);
760
711
  }
761
712
 
762
- div0_resize_listener = add_resize_listener(div0, /*div0_elementresize_handler*/ ctx[28].bind(div0));
713
+ /*div0_binding*/ ctx[28](div0);
763
714
  append(div1, t3);
764
715
  if (if_block3) if_block3.m(div1, null);
765
- div1_resize_listener = add_resize_listener(div1, /*div1_elementresize_handler*/ ctx[29].bind(div1));
716
+ /*div1_binding*/ ctx[29](div1);
766
717
  current = true;
767
718
 
768
719
  if (!mounted) {
769
- dispose = listen(svg, "click", /*handleClick*/ ctx[18]);
720
+ dispose = listen(svg, "click", /*handleClick*/ ctx[16]);
770
721
  mounted = true;
771
722
  }
772
723
  },
@@ -810,19 +761,19 @@
810
761
  if_block2 = null;
811
762
  }
812
763
 
813
- if (!current || dirty[0] & /*cpx*/ 1024 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[10][0])) {
764
+ if (!current || dirty[0] & /*cpx*/ 256 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[8][0])) {
814
765
  attr(rect, "x", rect_x_value);
815
766
  }
816
767
 
817
- if (!current || dirty[0] & /*cpy*/ 512 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[9][1])) {
768
+ if (!current || dirty[0] & /*cpy*/ 128 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[7][1])) {
818
769
  attr(rect, "y", rect_y_value);
819
770
  }
820
771
 
821
- if (!current || dirty[0] & /*cpx*/ 1024 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[10][1] - /*cpx*/ ctx[10][0])) {
772
+ if (!current || dirty[0] & /*cpx*/ 256 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][0])) {
822
773
  attr(rect, "width", rect_width_value);
823
774
  }
824
775
 
825
- if (!current || dirty[0] & /*cpy*/ 512 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[9][0] - /*cpy*/ ctx[9][1])) {
776
+ if (!current || dirty[0] & /*cpy*/ 128 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][1])) {
826
777
  attr(rect, "height", rect_height_value);
827
778
  }
828
779
 
@@ -886,7 +837,7 @@
886
837
  }
887
838
  }
888
839
 
889
- if (!/*$isOk*/ ctx[6]) {
840
+ if (!/*$isOk*/ ctx[3]) {
890
841
  if (if_block3) ; else {
891
842
  if_block3 = create_if_block$9();
892
843
  if_block3.c();
@@ -897,12 +848,12 @@
897
848
  if_block3 = null;
898
849
  }
899
850
 
900
- if (!current || dirty[0] & /*$scale*/ 256 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[8]) + " svelte-n80kcc")) {
851
+ if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-11hqgob")) {
901
852
  attr(div1, "class", div1_class_value);
902
853
  }
903
854
 
904
- if (dirty[0] & /*$scale, $isOk*/ 320) {
905
- toggle_class(div1, "plot_error", !/*$isOk*/ ctx[6]);
855
+ if (!current || dirty[0] & /*$scale, $isOk*/ 24) {
856
+ toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
906
857
  }
907
858
  },
908
859
  i(local) {
@@ -929,9 +880,9 @@
929
880
  if (yaxis_slot) yaxis_slot.d(detaching);
930
881
  if (default_slot) default_slot.d(detaching);
931
882
  if (box_slot) box_slot.d(detaching);
932
- div0_resize_listener();
883
+ /*div0_binding*/ ctx[28](null);
933
884
  if (if_block3) if_block3.d();
934
- div1_resize_listener();
885
+ /*div1_binding*/ ctx[29](null);
935
886
  mounted = false;
936
887
  dispose();
937
888
  }
@@ -1004,40 +955,40 @@
1004
955
  const clipPathID = "plottingArea" + Math.round(Math.random() * 10000);
1005
956
 
1006
957
  /* parameters for internal use inside the component */
1007
- let plotWidth; // width of plot
958
+ let plotElement;
1008
959
 
1009
- let plotHeight; // height of plot
960
+ let axesElement;
1010
961
  let axesMargins = [0.034, 0.034, 0.034, 0.034]; // initial margins (will be multiplied to FACTORS)
1011
962
 
1012
963
  /* reactive parameters to be shared with children via context */
1013
964
  const width = writable(100); // actual width of plotting area in pixels
1014
965
 
1015
- component_subscribe($$self, width, value => $$invalidate(7, $width = value));
966
+ component_subscribe($$self, width, value => $$invalidate(24, $width = value));
1016
967
  const height = writable(100); // actual height of plotting area in pixels
1017
- component_subscribe($$self, height, value => $$invalidate(5, $height = value));
968
+ component_subscribe($$self, height, value => $$invalidate(22, $height = value));
1018
969
  const xLim = writable([undefined, undefined]); // actual limits for x-axis in plot units
1019
970
  component_subscribe($$self, xLim, value => $$invalidate(25, $xLim = value));
1020
971
  const yLim = writable([undefined, undefined]); // actual limits for y-axis in plot units
1021
- component_subscribe($$self, yLim, value => $$invalidate(24, $yLim = value));
972
+ component_subscribe($$self, yLim, value => $$invalidate(23, $yLim = value));
1022
973
  const scale = writable("medium"); // scale factor (how big the shown plot is)
1023
- component_subscribe($$self, scale, value => $$invalidate(8, $scale = value));
974
+ component_subscribe($$self, scale, value => $$invalidate(4, $scale = value));
1024
975
  const isOk = writable(false); // are axes ready for drawing
1025
- component_subscribe($$self, isOk, value => $$invalidate(6, $isOk = value));
976
+ component_subscribe($$self, isOk, value => $$invalidate(3, $isOk = value));
1026
977
 
1027
978
  /** Adds margins for x-axis (e.g. when x-axis must be shown) */
1028
979
  const addXAxisMargins = function () {
1029
- $$invalidate(22, axesMargins[0] = 1, axesMargins);
1030
- $$invalidate(22, axesMargins[2] = 0.5, axesMargins);
1031
- $$invalidate(22, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
1032
- $$invalidate(22, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
980
+ $$invalidate(20, axesMargins[0] = 1, axesMargins);
981
+ $$invalidate(20, axesMargins[2] = 0.5, axesMargins);
982
+ $$invalidate(20, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
983
+ $$invalidate(20, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
1033
984
  };
1034
985
 
1035
986
  /** Adds margins for y-axis (e.g. when y-axis must be shown) */
1036
987
  const addYAxisMargins = function () {
1037
- $$invalidate(22, axesMargins[1] = 1, axesMargins);
1038
- $$invalidate(22, axesMargins[3] = 0.5, axesMargins);
1039
- $$invalidate(22, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
1040
- $$invalidate(22, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
988
+ $$invalidate(20, axesMargins[1] = 1, axesMargins);
989
+ $$invalidate(20, axesMargins[3] = 0.5, axesMargins);
990
+ $$invalidate(20, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
991
+ $$invalidate(20, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
1041
992
  };
1042
993
 
1043
994
  /** Adjusts limits for x-axis (e.g. when new series is added)
@@ -1211,63 +1162,73 @@
1211
1162
  dispatch("axesclick");
1212
1163
  }
1213
1164
 
1214
- function div0_elementresize_handler() {
1215
- $height = this.clientHeight;
1216
- height.set($height);
1217
- $width = this.clientWidth;
1218
- width.set($width);
1165
+ /* observer for the plotting area size */
1166
+ var ro = new ResizeObserver(entries => {
1167
+ for (let entry of entries) {
1168
+ const pcr = plotElement.getBoundingClientRect();
1169
+ const acr = axesElement.getBoundingClientRect();
1170
+ width.update(x => acr.width);
1171
+ height.update(x => acr.height);
1172
+ scale.update(x => getScale(pcr.width, pcr.height));
1173
+ }
1174
+ });
1175
+
1176
+ onMount(() => {
1177
+ ro.observe(plotElement);
1178
+ });
1179
+
1180
+ function div0_binding($$value) {
1181
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
1182
+ axesElement = $$value;
1183
+ $$invalidate(6, axesElement);
1184
+ });
1219
1185
  }
1220
1186
 
1221
- function div1_elementresize_handler() {
1222
- plotHeight = this.clientHeight;
1223
- plotWidth = this.clientWidth;
1224
- $$invalidate(4, plotHeight);
1225
- $$invalidate(3, plotWidth);
1187
+ function div1_binding($$value) {
1188
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
1189
+ plotElement = $$value;
1190
+ $$invalidate(5, plotElement);
1191
+ });
1226
1192
  }
1227
1193
 
1228
1194
  $$self.$$set = $$props => {
1229
- if ('limX' in $$props) $$invalidate(19, limX = $$props.limX);
1230
- if ('limY' in $$props) $$invalidate(20, limY = $$props.limY);
1195
+ if ('limX' in $$props) $$invalidate(17, limX = $$props.limX);
1196
+ if ('limY' in $$props) $$invalidate(18, limY = $$props.limY);
1231
1197
  if ('title' in $$props) $$invalidate(0, title = $$props.title);
1232
1198
  if ('xLabel' in $$props) $$invalidate(1, xLabel = $$props.xLabel);
1233
1199
  if ('yLabel' in $$props) $$invalidate(2, yLabel = $$props.yLabel);
1234
- if ('multiSeries' in $$props) $$invalidate(21, multiSeries = $$props.multiSeries);
1200
+ if ('multiSeries' in $$props) $$invalidate(19, multiSeries = $$props.multiSeries);
1235
1201
  if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
1236
1202
  };
1237
1203
 
1238
1204
  $$self.$$.update = () => {
1239
- if ($$self.$$.dirty[0] & /*plotWidth, plotHeight*/ 24) {
1240
- // update plot scale based on its size
1241
- scale.update(x => getScale(plotWidth, plotHeight));
1242
- }
1243
-
1244
- if ($$self.$$.dirty[0] & /*limX*/ 524288) {
1205
+ if ($$self.$$.dirty[0] & /*limX*/ 131072) {
1245
1206
  // this is reactive in case if limX and limY are interactively changed by parent script
1246
1207
  if (!limX.some(v => v === undefined)) xLim.update(v => limX);
1247
1208
  }
1248
1209
 
1249
- if ($$self.$$.dirty[0] & /*limY*/ 1048576) {
1210
+ if ($$self.$$.dirty[0] & /*limY*/ 262144) {
1250
1211
  if (!limY.some(v => v === undefined)) yLim.update(v => limY);
1251
1212
  }
1252
1213
 
1253
- if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 4194560) {
1214
+ if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 1048592) {
1254
1215
  // computes real margins in pixels based on current scale
1255
- $$invalidate(23, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
1216
+ $$invalidate(21, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
1256
1217
  }
1257
1218
 
1258
- if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 58720416) {
1219
+ if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 65011712) {
1259
1220
  // computes status which tells that axes limits look fine and it is safe to draw
1260
1221
  // the status is based on the axis limits validity
1261
1222
  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]);
1262
1223
  }
1263
1224
 
1264
- if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 33554624) {
1225
+ if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 50331656) {
1265
1226
  // computes coordinates for clip path box
1266
- $$invalidate(10, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
1227
+ $$invalidate(8, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
1267
1228
  }
1268
1229
 
1269
- if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 16777312) {
1270
- $$invalidate(9, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
1230
+ if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 12582920) {
1231
+ $$invalidate(7, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
1271
1232
  }
1272
1233
  };
1273
1234
 
@@ -1275,12 +1236,10 @@
1275
1236
  title,
1276
1237
  xLabel,
1277
1238
  yLabel,
1278
- plotWidth,
1279
- plotHeight,
1280
- $height,
1281
1239
  $isOk,
1282
- $width,
1283
1240
  $scale,
1241
+ plotElement,
1242
+ axesElement,
1284
1243
  cpy,
1285
1244
  cpx,
1286
1245
  clipPathID,
@@ -1296,12 +1255,14 @@
1296
1255
  multiSeries,
1297
1256
  axesMargins,
1298
1257
  margins,
1258
+ $height,
1299
1259
  $yLim,
1260
+ $width,
1300
1261
  $xLim,
1301
1262
  $$scope,
1302
1263
  slots,
1303
- div0_elementresize_handler,
1304
- div1_elementresize_handler
1264
+ div0_binding,
1265
+ div1_binding
1305
1266
  ];
1306
1267
  }
1307
1268
 
@@ -1316,12 +1277,12 @@
1316
1277
  create_fragment$b,
1317
1278
  safe_not_equal,
1318
1279
  {
1319
- limX: 19,
1320
- limY: 20,
1280
+ limX: 17,
1281
+ limY: 18,
1321
1282
  title: 0,
1322
1283
  xLabel: 1,
1323
1284
  yLabel: 2,
1324
- multiSeries: 21
1285
+ multiSeries: 19
1325
1286
  },
1326
1287
  add_css$3,
1327
1288
  [-1, -1]
@@ -1343,7 +1304,7 @@
1343
1304
  "PRIMARY_TEXT": "#333",
1344
1305
  };
1345
1306
 
1346
- /* src/XAxis.svelte generated by Svelte v3.48.0 */
1307
+ /* src/XAxis.svelte generated by Svelte v3.50.1 */
1347
1308
 
1348
1309
  function get_each_context$5(ctx, list, i) {
1349
1310
  const child_ctx = ctx.slice();
@@ -1723,7 +1684,7 @@
1723
1684
  }
1724
1685
  }
1725
1686
 
1726
- /* src/YAxis.svelte generated by Svelte v3.48.0 */
1687
+ /* src/YAxis.svelte generated by Svelte v3.50.1 */
1727
1688
 
1728
1689
  function get_each_context$4(ctx, list, i) {
1729
1690
  const child_ctx = ctx.slice();
@@ -1836,7 +1797,6 @@
1836
1797
  let t;
1837
1798
  let text_1_x_value;
1838
1799
  let text_1_y_value;
1839
- let text_1_dy_value;
1840
1800
 
1841
1801
  return {
1842
1802
  c() {
@@ -1857,7 +1817,7 @@
1857
1817
  attr(text_1, "x", text_1_x_value = /*ticksX*/ ctx[3][0]);
1858
1818
  attr(text_1, "y", text_1_y_value = /*ty*/ ctx[26]);
1859
1819
  attr(text_1, "dx", /*dx*/ ctx[2]);
1860
- attr(text_1, "dy", text_1_dy_value = 0);
1820
+ attr(text_1, "dy", 0);
1861
1821
  attr(text_1, "transform", /*transform*/ ctx[6]);
1862
1822
  set_style(text_1, "background", "red");
1863
1823
  attr(text_1, "class", "mdaplot__axis-labels");
@@ -2109,7 +2069,7 @@
2109
2069
  }
2110
2070
  }
2111
2071
 
2112
- /* src/Rectangles.svelte generated by Svelte v3.48.0 */
2072
+ /* src/Rectangles.svelte generated by Svelte v3.50.1 */
2113
2073
 
2114
2074
  function get_each_context$3(ctx, list, i) {
2115
2075
  const child_ctx = ctx.slice();
@@ -2405,7 +2365,7 @@
2405
2365
  }
2406
2366
  }
2407
2367
 
2408
- /* src/Box.svelte generated by Svelte v3.48.0 */
2368
+ /* src/Box.svelte generated by Svelte v3.50.1 */
2409
2369
 
2410
2370
  function create_if_block$5(ctx) {
2411
2371
  let g;
@@ -2572,7 +2532,7 @@
2572
2532
  }
2573
2533
  }
2574
2534
 
2575
- /* src/Segments.svelte generated by Svelte v3.48.0 */
2535
+ /* src/Segments.svelte generated by Svelte v3.50.1 */
2576
2536
 
2577
2537
  function get_each_context$2(ctx, list, i) {
2578
2538
  const child_ctx = ctx.slice();
@@ -2839,7 +2799,7 @@
2839
2799
  }
2840
2800
  }
2841
2801
 
2842
- /* src/TextLabels.svelte generated by Svelte v3.48.0 */
2802
+ /* src/TextLabels.svelte generated by Svelte v3.50.1 */
2843
2803
 
2844
2804
  function add_css$2(target) {
2845
2805
  append_styles(target, "svelte-1xvrp9d", "text.svelte-1xvrp9d,text.svelte-1xvrp9d>tspan{dominant-baseline:middle}");
@@ -2929,14 +2889,13 @@
2929
2889
  function create_each_block$1(ctx) {
2930
2890
  let text_1;
2931
2891
  let raw_value = /*labels*/ ctx[0][/*i*/ ctx[29]] + "";
2932
- let text_1_data_id_value;
2933
2892
  let text_1_x_value;
2934
2893
  let text_1_y_value;
2935
2894
 
2936
2895
  return {
2937
2896
  c() {
2938
2897
  text_1 = svg_element("text");
2939
- attr(text_1, "data-id", text_1_data_id_value = /*i*/ ctx[29]);
2898
+ attr(text_1, "data-id", /*i*/ ctx[29]);
2940
2899
  attr(text_1, "x", text_1_x_value = /*x*/ ctx[7][/*i*/ ctx[29]]);
2941
2900
  attr(text_1, "y", text_1_y_value = /*y*/ ctx[6][/*i*/ ctx[29]]);
2942
2901
  attr(text_1, "dx", /*dx*/ ctx[5]);
@@ -3162,7 +3121,7 @@
3162
3121
  }
3163
3122
  }
3164
3123
 
3165
- /* src/TextLegend.svelte generated by Svelte v3.48.0 */
3124
+ /* src/TextLegend.svelte generated by Svelte v3.50.1 */
3166
3125
 
3167
3126
  function get_each_context(ctx, list, i) {
3168
3127
  const child_ctx = ctx.slice();
@@ -3486,7 +3445,7 @@
3486
3445
  return x.slice(1).map( (y, i) => (y - x[i]));
3487
3446
  }
3488
3447
 
3489
- /* src/BarSeries.svelte generated by Svelte v3.48.0 */
3448
+ /* src/BarSeries.svelte generated by Svelte v3.50.1 */
3490
3449
 
3491
3450
  function add_css$1(target) {
3492
3451
  append_styles(target, "svelte-kw726w", ".series_bar > rect{stroke-width:1px}.series_bar > rect:hover{opacity:90%}");
@@ -3654,7 +3613,7 @@
3654
3613
  }
3655
3614
  }
3656
3615
 
3657
- /* src/ScatterSeries.svelte generated by Svelte v3.48.0 */
3616
+ /* src/ScatterSeries.svelte generated by Svelte v3.50.1 */
3658
3617
 
3659
3618
  function add_css(target) {
3660
3619
  append_styles(target, "svelte-byxua3", ".series_scatter > text{font-size:1em;cursor:default}.series_scatter > text:hover{opacity:90%}.series_scatter > *:hover + .labels_hover{visibility:visible;opacity:1}");
@@ -3821,7 +3780,7 @@
3821
3780
  }
3822
3781
  }
3823
3782
 
3824
- /* src/LineSeries.svelte generated by Svelte v3.48.0 */
3783
+ /* src/LineSeries.svelte generated by Svelte v3.50.1 */
3825
3784
 
3826
3785
  function create_if_block$1(ctx) {
3827
3786
  let g;
@@ -4012,7 +3971,7 @@
4012
3971
  }
4013
3972
  }
4014
3973
 
4015
- /* src/AreaSeries.svelte generated by Svelte v3.48.0 */
3974
+ /* src/AreaSeries.svelte generated by Svelte v3.50.1 */
4016
3975
 
4017
3976
  function create_if_block(ctx) {
4018
3977
  let g;
package/dist/index.mjs CHANGED
@@ -102,6 +102,7 @@ function get_root_for_style(node) {
102
102
  }
103
103
  function append_stylesheet(node, style) {
104
104
  append(node.head || node, style);
105
+ return style.sheet;
105
106
  }
106
107
  function insert(target, node, anchor) {
107
108
  target.insertBefore(node, anchor || null);
@@ -156,59 +157,6 @@ function set_style(node, key, value, important) {
156
157
  node.style.setProperty(key, value, important ? 'important' : '');
157
158
  }
158
159
  }
159
- // unfortunately this can't be a constant as that wouldn't be tree-shakeable
160
- // so we cache the result instead
161
- let crossorigin;
162
- function is_crossorigin() {
163
- if (crossorigin === undefined) {
164
- crossorigin = false;
165
- try {
166
- if (typeof window !== 'undefined' && window.parent) {
167
- void window.parent.document;
168
- }
169
- }
170
- catch (error) {
171
- crossorigin = true;
172
- }
173
- }
174
- return crossorigin;
175
- }
176
- function add_resize_listener(node, fn) {
177
- const computed_style = getComputedStyle(node);
178
- if (computed_style.position === 'static') {
179
- node.style.position = 'relative';
180
- }
181
- const iframe = element('iframe');
182
- iframe.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ' +
183
- 'overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;');
184
- iframe.setAttribute('aria-hidden', 'true');
185
- iframe.tabIndex = -1;
186
- const crossorigin = is_crossorigin();
187
- let unsubscribe;
188
- if (crossorigin) {
189
- iframe.src = "data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>";
190
- unsubscribe = listen(window, 'message', (event) => {
191
- if (event.source === iframe.contentWindow)
192
- fn();
193
- });
194
- }
195
- else {
196
- iframe.src = 'about:blank';
197
- iframe.onload = () => {
198
- unsubscribe = listen(iframe.contentWindow, 'resize', fn);
199
- };
200
- }
201
- append(node, iframe);
202
- return () => {
203
- if (crossorigin) {
204
- unsubscribe();
205
- }
206
- else if (unsubscribe && iframe.contentWindow) {
207
- unsubscribe();
208
- }
209
- detach(iframe);
210
- };
211
- }
212
160
  function toggle_class(element, name, toggle) {
213
161
  element.classList[toggle ? 'add' : 'remove'](name);
214
162
  }
@@ -227,6 +175,9 @@ function get_current_component() {
227
175
  throw new Error('Function called outside component initialization');
228
176
  return current_component;
229
177
  }
178
+ function onMount(fn) {
179
+ get_current_component().$$.on_mount.push(fn);
180
+ }
230
181
  function createEventDispatcher() {
231
182
  const component = get_current_component();
232
183
  return (type, detail, { cancelable = false } = {}) => {
@@ -368,6 +319,9 @@ function transition_out(block, local, detach, callback) {
368
319
  });
369
320
  block.o(local);
370
321
  }
322
+ else if (callback) {
323
+ callback();
324
+ }
371
325
  }
372
326
  function create_component(block) {
373
327
  block && block.c();
@@ -546,10 +500,10 @@ function writable(value, start = noop) {
546
500
  return { set, update, subscribe };
547
501
  }
548
502
 
549
- /* src/Axes.svelte generated by Svelte v3.48.0 */
503
+ /* src/Axes.svelte generated by Svelte v3.50.1 */
550
504
 
551
505
  function add_css$3(target) {
552
- append_styles(target, "svelte-n80kcc", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:\". title\"\n \"ylab axes\"\n \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-n80kcc{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
506
+ append_styles(target, "svelte-11hqgob", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:\". title\"\n \"ylab axes\"\n \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-11hqgob{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes-content{padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
553
507
  }
554
508
 
555
509
  const get_box_slot_changes = dirty => ({});
@@ -559,7 +513,7 @@ const get_yaxis_slot_context = ctx => ({});
559
513
  const get_xaxis_slot_changes = dirty => ({});
560
514
  const get_xaxis_slot_context = ctx => ({});
561
515
 
562
- // (329:3) {#if title !== ""}
516
+ // (342:3) {#if title !== ""}
563
517
  function create_if_block_3(ctx) {
564
518
  let div;
565
519
 
@@ -580,7 +534,7 @@ function create_if_block_3(ctx) {
580
534
  };
581
535
  }
582
536
 
583
- // (330:3) {#if yLabel !== ""}
537
+ // (343:3) {#if yLabel !== ""}
584
538
  function create_if_block_2(ctx) {
585
539
  let div;
586
540
  let span;
@@ -604,7 +558,7 @@ function create_if_block_2(ctx) {
604
558
  };
605
559
  }
606
560
 
607
- // (331:3) {#if xLabel !== ""}
561
+ // (344:3) {#if xLabel !== ""}
608
562
  function create_if_block_1(ctx) {
609
563
  let div;
610
564
  let span;
@@ -628,7 +582,7 @@ function create_if_block_1(ctx) {
628
582
  };
629
583
  }
630
584
 
631
- // (359:3) {#if !$isOk}
585
+ // (372:3) {#if !$isOk}
632
586
  function create_if_block$9(ctx) {
633
587
  let p;
634
588
 
@@ -665,10 +619,8 @@ function create_fragment$b(ctx) {
665
619
  let rect_width_value;
666
620
  let rect_height_value;
667
621
  let g;
668
- let div0_resize_listener;
669
622
  let t3;
670
623
  let div1_class_value;
671
- let div1_resize_listener;
672
624
  let current;
673
625
  let mounted;
674
626
  let dispose;
@@ -683,7 +635,7 @@ function create_fragment$b(ctx) {
683
635
  const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
684
636
  const box_slot_template = /*#slots*/ ctx[27].box;
685
637
  const box_slot = create_slot(box_slot_template, ctx, /*$$scope*/ ctx[26], get_box_slot_context);
686
- let if_block3 = !/*$isOk*/ ctx[6] && create_if_block$9();
638
+ let if_block3 = !/*$isOk*/ ctx[3] && create_if_block$9();
687
639
 
688
640
  return {
689
641
  c() {
@@ -707,19 +659,18 @@ function create_fragment$b(ctx) {
707
659
  t3 = space();
708
660
  if (if_block3) if_block3.c();
709
661
  set_style(rect, "pointer-events", "none");
710
- attr(rect, "x", rect_x_value = /*cpx*/ ctx[10][0]);
711
- attr(rect, "y", rect_y_value = /*cpy*/ ctx[9][1]);
712
- attr(rect, "width", rect_width_value = /*cpx*/ ctx[10][1] - /*cpx*/ ctx[10][0]);
713
- attr(rect, "height", rect_height_value = /*cpy*/ ctx[9][0] - /*cpy*/ ctx[9][1]);
714
- attr(clipPath, "id", /*clipPathID*/ ctx[11]);
715
- attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[11] + ")");
662
+ attr(rect, "x", rect_x_value = /*cpx*/ ctx[8][0]);
663
+ attr(rect, "y", rect_y_value = /*cpy*/ ctx[7][1]);
664
+ attr(rect, "width", rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][0]);
665
+ attr(rect, "height", rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][1]);
666
+ attr(clipPath, "id", /*clipPathID*/ ctx[9]);
667
+ attr(g, "class", "axes-content");
668
+ attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[9] + ")");
716
669
  attr(svg, "preserveAspectRatio", "none");
717
670
  attr(svg, "class", "axes");
718
- attr(div0, "class", "axes-wrapper svelte-n80kcc");
719
- add_render_callback(() => /*div0_elementresize_handler*/ ctx[28].call(div0));
720
- attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[8]) + " svelte-n80kcc");
721
- add_render_callback(() => /*div1_elementresize_handler*/ ctx[29].call(div1));
722
- toggle_class(div1, "plot_error", !/*$isOk*/ ctx[6]);
671
+ attr(div0, "class", "axes-wrapper svelte-11hqgob");
672
+ attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-11hqgob");
673
+ toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
723
674
  },
724
675
  m(target, anchor) {
725
676
  insert(target, div1, anchor);
@@ -753,14 +704,14 @@ function create_fragment$b(ctx) {
753
704
  box_slot.m(svg, null);
754
705
  }
755
706
 
756
- div0_resize_listener = add_resize_listener(div0, /*div0_elementresize_handler*/ ctx[28].bind(div0));
707
+ /*div0_binding*/ ctx[28](div0);
757
708
  append(div1, t3);
758
709
  if (if_block3) if_block3.m(div1, null);
759
- div1_resize_listener = add_resize_listener(div1, /*div1_elementresize_handler*/ ctx[29].bind(div1));
710
+ /*div1_binding*/ ctx[29](div1);
760
711
  current = true;
761
712
 
762
713
  if (!mounted) {
763
- dispose = listen(svg, "click", /*handleClick*/ ctx[18]);
714
+ dispose = listen(svg, "click", /*handleClick*/ ctx[16]);
764
715
  mounted = true;
765
716
  }
766
717
  },
@@ -804,19 +755,19 @@ function create_fragment$b(ctx) {
804
755
  if_block2 = null;
805
756
  }
806
757
 
807
- if (!current || dirty[0] & /*cpx*/ 1024 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[10][0])) {
758
+ if (!current || dirty[0] & /*cpx*/ 256 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[8][0])) {
808
759
  attr(rect, "x", rect_x_value);
809
760
  }
810
761
 
811
- if (!current || dirty[0] & /*cpy*/ 512 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[9][1])) {
762
+ if (!current || dirty[0] & /*cpy*/ 128 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[7][1])) {
812
763
  attr(rect, "y", rect_y_value);
813
764
  }
814
765
 
815
- if (!current || dirty[0] & /*cpx*/ 1024 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[10][1] - /*cpx*/ ctx[10][0])) {
766
+ if (!current || dirty[0] & /*cpx*/ 256 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][0])) {
816
767
  attr(rect, "width", rect_width_value);
817
768
  }
818
769
 
819
- if (!current || dirty[0] & /*cpy*/ 512 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[9][0] - /*cpy*/ ctx[9][1])) {
770
+ if (!current || dirty[0] & /*cpy*/ 128 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][1])) {
820
771
  attr(rect, "height", rect_height_value);
821
772
  }
822
773
 
@@ -880,7 +831,7 @@ function create_fragment$b(ctx) {
880
831
  }
881
832
  }
882
833
 
883
- if (!/*$isOk*/ ctx[6]) {
834
+ if (!/*$isOk*/ ctx[3]) {
884
835
  if (if_block3) ; else {
885
836
  if_block3 = create_if_block$9();
886
837
  if_block3.c();
@@ -891,12 +842,12 @@ function create_fragment$b(ctx) {
891
842
  if_block3 = null;
892
843
  }
893
844
 
894
- if (!current || dirty[0] & /*$scale*/ 256 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[8]) + " svelte-n80kcc")) {
845
+ if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-11hqgob")) {
895
846
  attr(div1, "class", div1_class_value);
896
847
  }
897
848
 
898
- if (dirty[0] & /*$scale, $isOk*/ 320) {
899
- toggle_class(div1, "plot_error", !/*$isOk*/ ctx[6]);
849
+ if (!current || dirty[0] & /*$scale, $isOk*/ 24) {
850
+ toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
900
851
  }
901
852
  },
902
853
  i(local) {
@@ -923,9 +874,9 @@ function create_fragment$b(ctx) {
923
874
  if (yaxis_slot) yaxis_slot.d(detaching);
924
875
  if (default_slot) default_slot.d(detaching);
925
876
  if (box_slot) box_slot.d(detaching);
926
- div0_resize_listener();
877
+ /*div0_binding*/ ctx[28](null);
927
878
  if (if_block3) if_block3.d();
928
- div1_resize_listener();
879
+ /*div1_binding*/ ctx[29](null);
929
880
  mounted = false;
930
881
  dispose();
931
882
  }
@@ -998,40 +949,40 @@ function instance$b($$self, $$props, $$invalidate) {
998
949
  const clipPathID = "plottingArea" + Math.round(Math.random() * 10000);
999
950
 
1000
951
  /* parameters for internal use inside the component */
1001
- let plotWidth; // width of plot
952
+ let plotElement;
1002
953
 
1003
- let plotHeight; // height of plot
954
+ let axesElement;
1004
955
  let axesMargins = [0.034, 0.034, 0.034, 0.034]; // initial margins (will be multiplied to FACTORS)
1005
956
 
1006
957
  /* reactive parameters to be shared with children via context */
1007
958
  const width = writable(100); // actual width of plotting area in pixels
1008
959
 
1009
- component_subscribe($$self, width, value => $$invalidate(7, $width = value));
960
+ component_subscribe($$self, width, value => $$invalidate(24, $width = value));
1010
961
  const height = writable(100); // actual height of plotting area in pixels
1011
- component_subscribe($$self, height, value => $$invalidate(5, $height = value));
962
+ component_subscribe($$self, height, value => $$invalidate(22, $height = value));
1012
963
  const xLim = writable([undefined, undefined]); // actual limits for x-axis in plot units
1013
964
  component_subscribe($$self, xLim, value => $$invalidate(25, $xLim = value));
1014
965
  const yLim = writable([undefined, undefined]); // actual limits for y-axis in plot units
1015
- component_subscribe($$self, yLim, value => $$invalidate(24, $yLim = value));
966
+ component_subscribe($$self, yLim, value => $$invalidate(23, $yLim = value));
1016
967
  const scale = writable("medium"); // scale factor (how big the shown plot is)
1017
- component_subscribe($$self, scale, value => $$invalidate(8, $scale = value));
968
+ component_subscribe($$self, scale, value => $$invalidate(4, $scale = value));
1018
969
  const isOk = writable(false); // are axes ready for drawing
1019
- component_subscribe($$self, isOk, value => $$invalidate(6, $isOk = value));
970
+ component_subscribe($$self, isOk, value => $$invalidate(3, $isOk = value));
1020
971
 
1021
972
  /** Adds margins for x-axis (e.g. when x-axis must be shown) */
1022
973
  const addXAxisMargins = function () {
1023
- $$invalidate(22, axesMargins[0] = 1, axesMargins);
1024
- $$invalidate(22, axesMargins[2] = 0.5, axesMargins);
1025
- $$invalidate(22, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
1026
- $$invalidate(22, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
974
+ $$invalidate(20, axesMargins[0] = 1, axesMargins);
975
+ $$invalidate(20, axesMargins[2] = 0.5, axesMargins);
976
+ $$invalidate(20, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
977
+ $$invalidate(20, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
1027
978
  };
1028
979
 
1029
980
  /** Adds margins for y-axis (e.g. when y-axis must be shown) */
1030
981
  const addYAxisMargins = function () {
1031
- $$invalidate(22, axesMargins[1] = 1, axesMargins);
1032
- $$invalidate(22, axesMargins[3] = 0.5, axesMargins);
1033
- $$invalidate(22, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
1034
- $$invalidate(22, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
982
+ $$invalidate(20, axesMargins[1] = 1, axesMargins);
983
+ $$invalidate(20, axesMargins[3] = 0.5, axesMargins);
984
+ $$invalidate(20, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
985
+ $$invalidate(20, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
1035
986
  };
1036
987
 
1037
988
  /** Adjusts limits for x-axis (e.g. when new series is added)
@@ -1205,63 +1156,73 @@ function instance$b($$self, $$props, $$invalidate) {
1205
1156
  dispatch("axesclick");
1206
1157
  }
1207
1158
 
1208
- function div0_elementresize_handler() {
1209
- $height = this.clientHeight;
1210
- height.set($height);
1211
- $width = this.clientWidth;
1212
- width.set($width);
1159
+ /* observer for the plotting area size */
1160
+ var ro = new ResizeObserver(entries => {
1161
+ for (let entry of entries) {
1162
+ const pcr = plotElement.getBoundingClientRect();
1163
+ const acr = axesElement.getBoundingClientRect();
1164
+ width.update(x => acr.width);
1165
+ height.update(x => acr.height);
1166
+ scale.update(x => getScale(pcr.width, pcr.height));
1167
+ }
1168
+ });
1169
+
1170
+ onMount(() => {
1171
+ ro.observe(plotElement);
1172
+ });
1173
+
1174
+ function div0_binding($$value) {
1175
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
1176
+ axesElement = $$value;
1177
+ $$invalidate(6, axesElement);
1178
+ });
1213
1179
  }
1214
1180
 
1215
- function div1_elementresize_handler() {
1216
- plotHeight = this.clientHeight;
1217
- plotWidth = this.clientWidth;
1218
- $$invalidate(4, plotHeight);
1219
- $$invalidate(3, plotWidth);
1181
+ function div1_binding($$value) {
1182
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
1183
+ plotElement = $$value;
1184
+ $$invalidate(5, plotElement);
1185
+ });
1220
1186
  }
1221
1187
 
1222
1188
  $$self.$$set = $$props => {
1223
- if ('limX' in $$props) $$invalidate(19, limX = $$props.limX);
1224
- if ('limY' in $$props) $$invalidate(20, limY = $$props.limY);
1189
+ if ('limX' in $$props) $$invalidate(17, limX = $$props.limX);
1190
+ if ('limY' in $$props) $$invalidate(18, limY = $$props.limY);
1225
1191
  if ('title' in $$props) $$invalidate(0, title = $$props.title);
1226
1192
  if ('xLabel' in $$props) $$invalidate(1, xLabel = $$props.xLabel);
1227
1193
  if ('yLabel' in $$props) $$invalidate(2, yLabel = $$props.yLabel);
1228
- if ('multiSeries' in $$props) $$invalidate(21, multiSeries = $$props.multiSeries);
1194
+ if ('multiSeries' in $$props) $$invalidate(19, multiSeries = $$props.multiSeries);
1229
1195
  if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
1230
1196
  };
1231
1197
 
1232
1198
  $$self.$$.update = () => {
1233
- if ($$self.$$.dirty[0] & /*plotWidth, plotHeight*/ 24) {
1234
- // update plot scale based on its size
1235
- scale.update(x => getScale(plotWidth, plotHeight));
1236
- }
1237
-
1238
- if ($$self.$$.dirty[0] & /*limX*/ 524288) {
1199
+ if ($$self.$$.dirty[0] & /*limX*/ 131072) {
1239
1200
  // this is reactive in case if limX and limY are interactively changed by parent script
1240
1201
  if (!limX.some(v => v === undefined)) xLim.update(v => limX);
1241
1202
  }
1242
1203
 
1243
- if ($$self.$$.dirty[0] & /*limY*/ 1048576) {
1204
+ if ($$self.$$.dirty[0] & /*limY*/ 262144) {
1244
1205
  if (!limY.some(v => v === undefined)) yLim.update(v => limY);
1245
1206
  }
1246
1207
 
1247
- if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 4194560) {
1208
+ if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 1048592) {
1248
1209
  // computes real margins in pixels based on current scale
1249
- $$invalidate(23, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
1210
+ $$invalidate(21, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
1250
1211
  }
1251
1212
 
1252
- if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 58720416) {
1213
+ if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 65011712) {
1253
1214
  // computes status which tells that axes limits look fine and it is safe to draw
1254
1215
  // the status is based on the axis limits validity
1255
1216
  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]);
1256
1217
  }
1257
1218
 
1258
- if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 33554624) {
1219
+ if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 50331656) {
1259
1220
  // computes coordinates for clip path box
1260
- $$invalidate(10, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
1221
+ $$invalidate(8, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
1261
1222
  }
1262
1223
 
1263
- if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 16777312) {
1264
- $$invalidate(9, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
1224
+ if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 12582920) {
1225
+ $$invalidate(7, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
1265
1226
  }
1266
1227
  };
1267
1228
 
@@ -1269,12 +1230,10 @@ function instance$b($$self, $$props, $$invalidate) {
1269
1230
  title,
1270
1231
  xLabel,
1271
1232
  yLabel,
1272
- plotWidth,
1273
- plotHeight,
1274
- $height,
1275
1233
  $isOk,
1276
- $width,
1277
1234
  $scale,
1235
+ plotElement,
1236
+ axesElement,
1278
1237
  cpy,
1279
1238
  cpx,
1280
1239
  clipPathID,
@@ -1290,12 +1249,14 @@ function instance$b($$self, $$props, $$invalidate) {
1290
1249
  multiSeries,
1291
1250
  axesMargins,
1292
1251
  margins,
1252
+ $height,
1293
1253
  $yLim,
1254
+ $width,
1294
1255
  $xLim,
1295
1256
  $$scope,
1296
1257
  slots,
1297
- div0_elementresize_handler,
1298
- div1_elementresize_handler
1258
+ div0_binding,
1259
+ div1_binding
1299
1260
  ];
1300
1261
  }
1301
1262
 
@@ -1310,12 +1271,12 @@ class Axes extends SvelteComponent {
1310
1271
  create_fragment$b,
1311
1272
  safe_not_equal,
1312
1273
  {
1313
- limX: 19,
1314
- limY: 20,
1274
+ limX: 17,
1275
+ limY: 18,
1315
1276
  title: 0,
1316
1277
  xLabel: 1,
1317
1278
  yLabel: 2,
1318
- multiSeries: 21
1279
+ multiSeries: 19
1319
1280
  },
1320
1281
  add_css$3,
1321
1282
  [-1, -1]
@@ -1337,7 +1298,7 @@ const Colors = {
1337
1298
  "PRIMARY_TEXT": "#333",
1338
1299
  };
1339
1300
 
1340
- /* src/XAxis.svelte generated by Svelte v3.48.0 */
1301
+ /* src/XAxis.svelte generated by Svelte v3.50.1 */
1341
1302
 
1342
1303
  function get_each_context$5(ctx, list, i) {
1343
1304
  const child_ctx = ctx.slice();
@@ -1717,7 +1678,7 @@ class XAxis extends SvelteComponent {
1717
1678
  }
1718
1679
  }
1719
1680
 
1720
- /* src/YAxis.svelte generated by Svelte v3.48.0 */
1681
+ /* src/YAxis.svelte generated by Svelte v3.50.1 */
1721
1682
 
1722
1683
  function get_each_context$4(ctx, list, i) {
1723
1684
  const child_ctx = ctx.slice();
@@ -1830,7 +1791,6 @@ function create_each_block$4(ctx) {
1830
1791
  let t;
1831
1792
  let text_1_x_value;
1832
1793
  let text_1_y_value;
1833
- let text_1_dy_value;
1834
1794
 
1835
1795
  return {
1836
1796
  c() {
@@ -1851,7 +1811,7 @@ function create_each_block$4(ctx) {
1851
1811
  attr(text_1, "x", text_1_x_value = /*ticksX*/ ctx[3][0]);
1852
1812
  attr(text_1, "y", text_1_y_value = /*ty*/ ctx[26]);
1853
1813
  attr(text_1, "dx", /*dx*/ ctx[2]);
1854
- attr(text_1, "dy", text_1_dy_value = 0);
1814
+ attr(text_1, "dy", 0);
1855
1815
  attr(text_1, "transform", /*transform*/ ctx[6]);
1856
1816
  set_style(text_1, "background", "red");
1857
1817
  attr(text_1, "class", "mdaplot__axis-labels");
@@ -2103,7 +2063,7 @@ class YAxis extends SvelteComponent {
2103
2063
  }
2104
2064
  }
2105
2065
 
2106
- /* src/Rectangles.svelte generated by Svelte v3.48.0 */
2066
+ /* src/Rectangles.svelte generated by Svelte v3.50.1 */
2107
2067
 
2108
2068
  function get_each_context$3(ctx, list, i) {
2109
2069
  const child_ctx = ctx.slice();
@@ -2399,7 +2359,7 @@ class Rectangles extends SvelteComponent {
2399
2359
  }
2400
2360
  }
2401
2361
 
2402
- /* src/Box.svelte generated by Svelte v3.48.0 */
2362
+ /* src/Box.svelte generated by Svelte v3.50.1 */
2403
2363
 
2404
2364
  function create_if_block$5(ctx) {
2405
2365
  let g;
@@ -2566,7 +2526,7 @@ class Box extends SvelteComponent {
2566
2526
  }
2567
2527
  }
2568
2528
 
2569
- /* src/Segments.svelte generated by Svelte v3.48.0 */
2529
+ /* src/Segments.svelte generated by Svelte v3.50.1 */
2570
2530
 
2571
2531
  function get_each_context$2(ctx, list, i) {
2572
2532
  const child_ctx = ctx.slice();
@@ -2833,7 +2793,7 @@ class Segments extends SvelteComponent {
2833
2793
  }
2834
2794
  }
2835
2795
 
2836
- /* src/TextLabels.svelte generated by Svelte v3.48.0 */
2796
+ /* src/TextLabels.svelte generated by Svelte v3.50.1 */
2837
2797
 
2838
2798
  function add_css$2(target) {
2839
2799
  append_styles(target, "svelte-1xvrp9d", "text.svelte-1xvrp9d,text.svelte-1xvrp9d>tspan{dominant-baseline:middle}");
@@ -2923,14 +2883,13 @@ function create_if_block$3(ctx) {
2923
2883
  function create_each_block$1(ctx) {
2924
2884
  let text_1;
2925
2885
  let raw_value = /*labels*/ ctx[0][/*i*/ ctx[29]] + "";
2926
- let text_1_data_id_value;
2927
2886
  let text_1_x_value;
2928
2887
  let text_1_y_value;
2929
2888
 
2930
2889
  return {
2931
2890
  c() {
2932
2891
  text_1 = svg_element("text");
2933
- attr(text_1, "data-id", text_1_data_id_value = /*i*/ ctx[29]);
2892
+ attr(text_1, "data-id", /*i*/ ctx[29]);
2934
2893
  attr(text_1, "x", text_1_x_value = /*x*/ ctx[7][/*i*/ ctx[29]]);
2935
2894
  attr(text_1, "y", text_1_y_value = /*y*/ ctx[6][/*i*/ ctx[29]]);
2936
2895
  attr(text_1, "dx", /*dx*/ ctx[5]);
@@ -3156,7 +3115,7 @@ class TextLabels extends SvelteComponent {
3156
3115
  }
3157
3116
  }
3158
3117
 
3159
- /* src/TextLegend.svelte generated by Svelte v3.48.0 */
3118
+ /* src/TextLegend.svelte generated by Svelte v3.50.1 */
3160
3119
 
3161
3120
  function get_each_context(ctx, list, i) {
3162
3121
  const child_ctx = ctx.slice();
@@ -3480,7 +3439,7 @@ function diff(x) {
3480
3439
  return x.slice(1).map( (y, i) => (y - x[i]));
3481
3440
  }
3482
3441
 
3483
- /* src/BarSeries.svelte generated by Svelte v3.48.0 */
3442
+ /* src/BarSeries.svelte generated by Svelte v3.50.1 */
3484
3443
 
3485
3444
  function add_css$1(target) {
3486
3445
  append_styles(target, "svelte-kw726w", ".series_bar > rect{stroke-width:1px}.series_bar > rect:hover{opacity:90%}");
@@ -3648,7 +3607,7 @@ class BarSeries extends SvelteComponent {
3648
3607
  }
3649
3608
  }
3650
3609
 
3651
- /* src/ScatterSeries.svelte generated by Svelte v3.48.0 */
3610
+ /* src/ScatterSeries.svelte generated by Svelte v3.50.1 */
3652
3611
 
3653
3612
  function add_css(target) {
3654
3613
  append_styles(target, "svelte-byxua3", ".series_scatter > text{font-size:1em;cursor:default}.series_scatter > text:hover{opacity:90%}.series_scatter > *:hover + .labels_hover{visibility:visible;opacity:1}");
@@ -3815,7 +3774,7 @@ class ScatterSeries extends SvelteComponent {
3815
3774
  }
3816
3775
  }
3817
3776
 
3818
- /* src/LineSeries.svelte generated by Svelte v3.48.0 */
3777
+ /* src/LineSeries.svelte generated by Svelte v3.50.1 */
3819
3778
 
3820
3779
  function create_if_block$1(ctx) {
3821
3780
  let g;
@@ -4006,7 +3965,7 @@ class LineSeries extends SvelteComponent {
4006
3965
  }
4007
3966
  }
4008
3967
 
4009
- /* src/AreaSeries.svelte generated by Svelte v3.48.0 */
3968
+ /* src/AreaSeries.svelte generated by Svelte v3.50.1 */
4010
3969
 
4011
3970
  function create_if_block(ctx) {
4012
3971
  let g;
package/package.json CHANGED
@@ -25,7 +25,7 @@
25
25
  "dist"
26
26
  ],
27
27
  "description": "Svelte components for creating simple plots",
28
- "version": "1.1.0",
28
+ "version": "1.1.2",
29
29
  "repository": {
30
30
  "type": "git",
31
31
  "url": "svkucheryavski/svelte-plots-basic"
package/src/Axes.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script>
2
- import { setContext, createEventDispatcher } from 'svelte';
2
+ import { setContext, createEventDispatcher, onMount } from 'svelte';
3
3
  import { writable } from 'svelte/store';
4
4
 
5
5
  /* input parameters */
@@ -46,8 +46,8 @@
46
46
  const clipPathID = "plottingArea" + Math.round(Math.random() * 10000);
47
47
 
48
48
  /* parameters for internal use inside the component */
49
- let plotWidth; // width of plot
50
- let plotHeight; // height of plot
49
+ let plotElement;
50
+ let axesElement;
51
51
  let axesMargins = [0.034, 0.034, 0.034, 0.034]; // initial margins (will be multiplied to FACTORS)
52
52
 
53
53
  /* reactive parameters to be shared with children via context */
@@ -265,10 +265,6 @@
265
265
 
266
266
  setContext('axes', context);
267
267
 
268
- // update plot scale based on its size
269
- $: scale.update(x => getScale(plotWidth, plotHeight));
270
-
271
-
272
268
  // handle click on plot elements and dispatch manual events
273
269
  function dispatchClickEvent(eventName, el) {
274
270
  dispatch(eventName, {seriesTitle: el.parentNode.getAttribute('title'), elementID: el.dataset.id});
@@ -320,10 +316,27 @@
320
316
  // computes coordinates for clip path box
321
317
  $: cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1];
322
318
  $: cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0];
319
+
320
+ /* observer for the plotting area size */
321
+ var ro = new ResizeObserver(entries => {
322
+ for (let entry of entries) {
323
+
324
+ const pcr = plotElement.getBoundingClientRect();
325
+ const acr = axesElement.getBoundingClientRect();
326
+
327
+ width.update(x => acr.width);
328
+ height.update(x => acr.height);
329
+ scale.update(x => getScale(pcr.width, pcr.height));
330
+ }
331
+ });
332
+
333
+ onMount(() => {
334
+ ro.observe(plotElement);
335
+ });
323
336
  </script>
324
337
 
325
338
 
326
- <div class="plot {'plot_' + $scale}" bind:clientHeight={plotHeight} bind:clientWidth={plotWidth} class:plot_error="{!$isOk}">
339
+ <div class="plot {'plot_' + $scale}" bind:this={plotElement} class:plot_error="{!$isOk}">
327
340
 
328
341
  <!-- plot title and axis labels -->
329
342
  {#if title !== ""}<div class="axes__title">{@html title}</div>{/if}
@@ -331,7 +344,7 @@
331
344
  {#if xLabel !== ""}<div class="axes__xlabel"><span>{@html xLabel}</span></div>{/if}
332
345
 
333
346
  <!-- axes (coordinate system) -->
334
- <div class="axes-wrapper" bind:clientHeight={$height} bind:clientWidth={$width} >
347
+ <div class="axes-wrapper" bind:this={axesElement} >
335
348
  <svg on:click={handleClick} preserveAspectRatio="none" class="axes">
336
349
 
337
350
  <!-- define clipping path -->
@@ -346,7 +359,7 @@
346
359
  <slot name="yaxis"></slot>
347
360
 
348
361
  <!-- main plot content -->
349
- <g clip-path="url(#{clipPathID})">
362
+ <g class="axes-content" clip-path="url(#{clipPathID})">
350
363
  <slot></slot>
351
364
  </g>
352
365
 
@@ -443,6 +456,18 @@
443
456
  min-width: 100%;
444
457
  }
445
458
 
459
+ :global(.axes-content) {
460
+ padding: 0;
461
+ margin: 0;
462
+ height: 100%;
463
+ width: 100%;
464
+ max-height: 100%;
465
+ max-width: 100%;
466
+ min-height: 100%;
467
+ min-width: 100%;
468
+
469
+ }
470
+
446
471
  :global(.axes__xlabel) {
447
472
  grid-area: xlab;
448
473
  font-size: 1.0em;