svelte-plotly.js 0.3.2 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/Plot.svelte +150 -0
- package/{Plot.svelte.d.ts → dist/lib/Plot.svelte.d.ts} +12 -14
- package/package.json +31 -27
- package/Plot.svelte +0 -163
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
<script context="module"></script>
|
|
2
|
+
|
|
3
|
+
<script>import { onMount, onDestroy, createEventDispatcher } from "svelte";
|
|
4
|
+
import { debounce as debouncify } from "lodash-es";
|
|
5
|
+
const browser = typeof window === "object";
|
|
6
|
+
const nextFrame = browser ? requestAnimationFrame : () => void 0;
|
|
7
|
+
async function loadPlotly() {
|
|
8
|
+
if (!browser) return;
|
|
9
|
+
if (libPlotly === void 0) {
|
|
10
|
+
if (window.Plotly) {
|
|
11
|
+
libPlotly = window.Plotly;
|
|
12
|
+
} else {
|
|
13
|
+
const p = await import("plotly.js-dist");
|
|
14
|
+
if (libPlotly === void 0) libPlotly = "default" in p ? p.default : p;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
const DEFAULT_WIDTH = 500;
|
|
19
|
+
const DEFAULT_HEIGHT = 300;
|
|
20
|
+
const events = {
|
|
21
|
+
plotly_afterexport: "afterExport",
|
|
22
|
+
plotly_afterplot: "afterPlot",
|
|
23
|
+
plotly_animated: "animated",
|
|
24
|
+
plotly_animating: "animating",
|
|
25
|
+
plotly_animatingframe: "animatingFrame",
|
|
26
|
+
plotly_animationinterrupted: "animationInterrupted",
|
|
27
|
+
plotly_autosize: "autoSize",
|
|
28
|
+
plotly_beforeexport: "beforeExport",
|
|
29
|
+
plotly_beforehover: "beforeHover",
|
|
30
|
+
plotly_beforeplot: "beforePlot",
|
|
31
|
+
plotly_buttonclicked: "buttonClicked",
|
|
32
|
+
plotly_click: "click",
|
|
33
|
+
plotly_clickannotation: "clickAnnotation",
|
|
34
|
+
plotly_deselect: "deselect",
|
|
35
|
+
plotly_doubleclick: "doubleClick",
|
|
36
|
+
plotly_framework: "framework",
|
|
37
|
+
plotly_hover: "hover",
|
|
38
|
+
plotly_legendclick: "legendClick",
|
|
39
|
+
plotly_legenddoubleclick: "legendDoubleClick",
|
|
40
|
+
plotly_react: "react",
|
|
41
|
+
plotly_redraw: "redraw",
|
|
42
|
+
plotly_relayout: "relayout",
|
|
43
|
+
plotly_relayouting: "relayouting",
|
|
44
|
+
plotly_restyle: "restyle",
|
|
45
|
+
plotly_selected: "selected",
|
|
46
|
+
plotly_selecting: "selecting",
|
|
47
|
+
plotly_sliderchange: "sliderChange",
|
|
48
|
+
plotly_sliderend: "sliderEnd",
|
|
49
|
+
plotly_sliderstart: "sliderStart",
|
|
50
|
+
plotly_sunburstclick: "sunburstClick",
|
|
51
|
+
plotly_transitioned: "transitioned",
|
|
52
|
+
plotly_transitioning: "transitioning",
|
|
53
|
+
plotly_transitioninterrupted: "transitionInterrupted",
|
|
54
|
+
plotly_unhover: "unhover",
|
|
55
|
+
plotly_update: "update",
|
|
56
|
+
plotly_webglcontextlost: "webGLContextLost"
|
|
57
|
+
// TODO add all plotly_${traceType}click
|
|
58
|
+
};
|
|
59
|
+
const dispatch = createEventDispatcher();
|
|
60
|
+
export let element = void 0;
|
|
61
|
+
export let plot = void 0;
|
|
62
|
+
export let libPlotly = void 0;
|
|
63
|
+
export let data;
|
|
64
|
+
export let layout = void 0;
|
|
65
|
+
export let config = void 0;
|
|
66
|
+
export let fillParent = false;
|
|
67
|
+
export let debounce = 0;
|
|
68
|
+
let className = "";
|
|
69
|
+
export { className as class };
|
|
70
|
+
onMount(async () => {
|
|
71
|
+
window.global = window;
|
|
72
|
+
await loadPlotly();
|
|
73
|
+
});
|
|
74
|
+
let datarevision = 0;
|
|
75
|
+
let previousLib = libPlotly;
|
|
76
|
+
let previousPlot = plot;
|
|
77
|
+
let width = DEFAULT_WIDTH;
|
|
78
|
+
let height = DEFAULT_HEIGHT;
|
|
79
|
+
$: debounceWait = typeof debounce === "object" ? debounce.wait : debounce ?? 0;
|
|
80
|
+
$: debounceOptions = typeof debounce === "object" ? debounce : {};
|
|
81
|
+
$: data, datarevision = (datarevision + 1) % 1e3;
|
|
82
|
+
$: layout_ = { datarevision, width, height, ...layout };
|
|
83
|
+
$: config_ = { displaylogo: false, ...config };
|
|
84
|
+
$: draw(libPlotly, element, data, layout_, config_);
|
|
85
|
+
$: {
|
|
86
|
+
if (element && previousLib !== libPlotly) {
|
|
87
|
+
previousLib?.purge(element);
|
|
88
|
+
plot = void 0;
|
|
89
|
+
}
|
|
90
|
+
previousLib = libPlotly;
|
|
91
|
+
loadPlotly();
|
|
92
|
+
}
|
|
93
|
+
$: if (previousPlot !== plot) {
|
|
94
|
+
for (const [plotlyEvent, svelteEvent] of Object.entries(events)) {
|
|
95
|
+
previousPlot?.removeAllListeners?.(plotlyEvent);
|
|
96
|
+
plot?.on(plotlyEvent, (e) => dispatch(svelteEvent, e));
|
|
97
|
+
}
|
|
98
|
+
previousPlot = plot;
|
|
99
|
+
}
|
|
100
|
+
const drawUndebounced = (lib, e, d, l, c) => {
|
|
101
|
+
if (e) lib?.react(e, d, l, c).then((p) => plot = p);
|
|
102
|
+
};
|
|
103
|
+
$: draw = debouncify(drawUndebounced, debounceWait, debounceOptions);
|
|
104
|
+
onDestroy(() => element && libPlotly?.purge(element));
|
|
105
|
+
$: fillParent, nextFrame(onResize);
|
|
106
|
+
$: fillParentWidth = fillParent === true || fillParent === "width";
|
|
107
|
+
$: fillParentHeight = fillParent === true || fillParent === "height";
|
|
108
|
+
$: parent = element?.parentElement;
|
|
109
|
+
let lastParent = null;
|
|
110
|
+
$: {
|
|
111
|
+
parentMounted(parent);
|
|
112
|
+
parentUnmounted(lastParent);
|
|
113
|
+
lastParent = parent;
|
|
114
|
+
}
|
|
115
|
+
let resizeObserver;
|
|
116
|
+
onMount(() => resizeObserver = new ResizeObserver(onResize));
|
|
117
|
+
const parentMounted = (parent2) => parent2 && resizeObserver?.observe(parent2);
|
|
118
|
+
const parentUnmounted = (parent2) => parent2 && resizeObserver?.unobserve(parent2);
|
|
119
|
+
function onResize() {
|
|
120
|
+
if (!parent || !element) return;
|
|
121
|
+
const { offsetHeight, offsetWidth } = parent;
|
|
122
|
+
const { paddingLeft, paddingTop, paddingRight, paddingBottom } = window.getComputedStyle(parent);
|
|
123
|
+
const maxWidth = offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
|
|
124
|
+
const maxHeight = offsetHeight - parseInt(paddingTop) - parseInt(paddingRight);
|
|
125
|
+
width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
|
|
126
|
+
height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
|
|
127
|
+
}
|
|
128
|
+
</script>
|
|
129
|
+
|
|
130
|
+
<div
|
|
131
|
+
class={className}
|
|
132
|
+
class:fillParent
|
|
133
|
+
class:fillParentWidth
|
|
134
|
+
class:fillParentHeight
|
|
135
|
+
bind:this={element}
|
|
136
|
+
/>
|
|
137
|
+
|
|
138
|
+
<style>.fillParent {
|
|
139
|
+
overflow: visible;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.fillParentWidth {
|
|
143
|
+
width: 0 !important;
|
|
144
|
+
max-width: 0 !important;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.fillParentHeight {
|
|
148
|
+
height: 0 !important;
|
|
149
|
+
max-height: 0 !important;
|
|
150
|
+
}</style>
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import { SvelteComponentTyped } from "svelte";
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
3
2
|
import type { Data, Layout, Config, PlotlyHTMLElement, BeforePlotEvent, ClickAnnotationEvent, FrameAnimationEvent, LegendClickEvent, PlotMouseEvent, PlotHoverEvent, PlotRelayoutEvent, PlotRestyleEvent, PlotSelectionEvent, SliderEndEvent, SliderChangeEvent, SliderStartEvent, SunburstClickEvent } from 'plotly.js';
|
|
4
3
|
export type { Data, Layout, Config, PlotlyHTMLElement, BeforePlotEvent, ClickAnnotationEvent, FrameAnimationEvent, LegendClickEvent, PlotMouseEvent, PlotHoverEvent, PlotRelayoutEvent, PlotRestyleEvent, PlotSelectionEvent, SliderChangeEvent, SliderStartEvent, SunburstClickEvent };
|
|
5
|
-
export
|
|
4
|
+
export type FillParent = boolean | 'width' | 'height';
|
|
6
5
|
import type { DebounceSettings } from 'lodash-es';
|
|
7
6
|
export interface DebounceOptions extends DebounceSettings {
|
|
8
7
|
wait: number;
|
|
@@ -18,18 +17,17 @@ export interface PlotUpdateEvent {
|
|
|
18
17
|
}
|
|
19
18
|
declare const __propDef: {
|
|
20
19
|
props: {
|
|
21
|
-
element?: (null | undefined)
|
|
22
|
-
plot?: (null | undefined)
|
|
23
|
-
libPlotly?: typeof import(
|
|
20
|
+
element?: HTMLDivElement | (null | undefined);
|
|
21
|
+
plot?: PlotlyHTMLElement | (null | undefined);
|
|
22
|
+
libPlotly?: typeof import("plotly.js-dist") | null | undefined;
|
|
24
23
|
data: Data[];
|
|
25
24
|
layout?: Partial<Layout> | undefined;
|
|
26
25
|
config?: Partial<Config> | undefined;
|
|
27
|
-
fillParent?: FillParent
|
|
28
|
-
debounce?: number | DebounceOptions
|
|
29
|
-
class?: string
|
|
26
|
+
fillParent?: FillParent;
|
|
27
|
+
debounce?: number | DebounceOptions;
|
|
28
|
+
class?: string;
|
|
30
29
|
};
|
|
31
30
|
slots: {};
|
|
32
|
-
getters: {};
|
|
33
31
|
events: {
|
|
34
32
|
afterExport: undefined;
|
|
35
33
|
afterPlot: undefined;
|
|
@@ -69,8 +67,8 @@ declare const __propDef: {
|
|
|
69
67
|
webGLContextLost: undefined;
|
|
70
68
|
};
|
|
71
69
|
};
|
|
72
|
-
export
|
|
73
|
-
export
|
|
74
|
-
export
|
|
75
|
-
export default class Plot extends
|
|
70
|
+
export type PlotProps = typeof __propDef.props;
|
|
71
|
+
export type PlotEvents = typeof __propDef.events;
|
|
72
|
+
export type PlotSlots = typeof __propDef.slots;
|
|
73
|
+
export default class Plot extends SvelteComponent<PlotProps, PlotEvents, PlotSlots> {
|
|
76
74
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-plotly.js",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "Michal Grňo (m93a)",
|
|
6
6
|
"url": "https://github.com/m93a/"
|
|
@@ -10,34 +10,38 @@
|
|
|
10
10
|
"bugs": {
|
|
11
11
|
"url": "https://github.com/m93a/svelte-plotly.js/issues"
|
|
12
12
|
},
|
|
13
|
-
"packageManager": "yarn@1.22.5",
|
|
14
13
|
"license": "MIT",
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
"type": "module",
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"types": "./dist/lib/Plot.svelte.d.ts",
|
|
19
|
+
"exports": {
|
|
20
|
+
".": {
|
|
21
|
+
"types": "./dist/lib/Plot.svelte.d.ts",
|
|
22
|
+
"svelte": "./dist/lib/Plot.svelte"
|
|
23
|
+
}
|
|
19
24
|
},
|
|
20
25
|
"devDependencies": {
|
|
21
|
-
"@sveltejs/
|
|
22
|
-
"@sveltejs/
|
|
23
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
24
|
-
"@typescript-eslint/parser": "^
|
|
26
|
+
"@sveltejs/package": "^2.3.1",
|
|
27
|
+
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
|
28
|
+
"@typescript-eslint/eslint-plugin": "^7.14.1",
|
|
29
|
+
"@typescript-eslint/parser": "^7.14.1",
|
|
25
30
|
"eslint": "^8.12.0",
|
|
26
|
-
"eslint-config-prettier": "^
|
|
27
|
-
"eslint-plugin-
|
|
28
|
-
"prettier": "^2.5.1",
|
|
29
|
-
"prettier-plugin-svelte": "^2.5.0",
|
|
31
|
+
"eslint-config-prettier": "^9.1.0",
|
|
32
|
+
"eslint-plugin-svelte": "^2.39.0",
|
|
30
33
|
"plotly.js-dist": "^2.12.1",
|
|
34
|
+
"prettier": "^3.3.2",
|
|
35
|
+
"prettier-plugin-svelte": "^3.2.5",
|
|
31
36
|
"sass": "^1.51.0",
|
|
32
|
-
"svelte": "^3.
|
|
33
|
-
"svelte-
|
|
34
|
-
"svelte-preprocess": "^4.10.1",
|
|
35
|
-
"svelte2tsx": "^0.5.9",
|
|
37
|
+
"svelte-check": "^3.8.4",
|
|
38
|
+
"svelte-preprocess": "^6.0.1",
|
|
36
39
|
"tslib": "^2.3.1",
|
|
37
|
-
"typescript": "~
|
|
40
|
+
"typescript": "~5.5.2",
|
|
41
|
+
"vite": "^5.2.13"
|
|
38
42
|
},
|
|
39
|
-
"type": "module",
|
|
40
43
|
"dependencies": {
|
|
44
|
+
"svelte": "^4.2.18",
|
|
41
45
|
"@types/lodash-es": "^4.17.6",
|
|
42
46
|
"@types/plotly.js": "^2.12.5",
|
|
43
47
|
"lodash-es": "^4.17"
|
|
@@ -45,11 +49,11 @@
|
|
|
45
49
|
"peerDependencies": {
|
|
46
50
|
"plotly.js-dist": "^2.12"
|
|
47
51
|
},
|
|
48
|
-
"
|
|
49
|
-
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
"scripts": {
|
|
53
|
+
"dev": "vite dev",
|
|
54
|
+
"build": "svelte-package -i src/lib -o dist/lib",
|
|
55
|
+
"check": "svelte-check --tsconfig ./tsconfig.json",
|
|
56
|
+
"lint": "prettier --check src/ && eslint .",
|
|
57
|
+
"format": "prettier --write src/"
|
|
58
|
+
}
|
|
55
59
|
}
|
package/Plot.svelte
DELETED
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
<script context="module">export {};
|
|
2
|
-
</script>
|
|
3
|
-
|
|
4
|
-
<script>import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
|
5
|
-
import { debounce as debouncify } from 'lodash-es';
|
|
6
|
-
const browser = typeof window === 'object';
|
|
7
|
-
const nextFrame = browser ? requestAnimationFrame : () => void 0;
|
|
8
|
-
async function loadPlotly() {
|
|
9
|
-
if (!browser)
|
|
10
|
-
return;
|
|
11
|
-
if (libPlotly === undefined) {
|
|
12
|
-
if (window.Plotly) {
|
|
13
|
-
libPlotly = window.Plotly;
|
|
14
|
-
}
|
|
15
|
-
else {
|
|
16
|
-
const p = await import('plotly.js-dist');
|
|
17
|
-
if (libPlotly === undefined)
|
|
18
|
-
libPlotly = 'default' in p ? p.default : p;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
const DEFAULT_WIDTH = 500;
|
|
23
|
-
const DEFAULT_HEIGHT = 300;
|
|
24
|
-
const events = {
|
|
25
|
-
plotly_afterexport: 'afterExport',
|
|
26
|
-
plotly_afterplot: 'afterPlot',
|
|
27
|
-
plotly_animated: 'animated',
|
|
28
|
-
plotly_animating: 'animating',
|
|
29
|
-
plotly_animatingframe: 'animatingFrame',
|
|
30
|
-
plotly_animationinterrupted: 'animationInterrupted',
|
|
31
|
-
plotly_autosize: 'autoSize',
|
|
32
|
-
plotly_beforeexport: 'beforeExport',
|
|
33
|
-
plotly_beforehover: 'beforeHover',
|
|
34
|
-
plotly_beforeplot: 'beforePlot',
|
|
35
|
-
plotly_buttonclicked: 'buttonClicked',
|
|
36
|
-
plotly_click: 'click',
|
|
37
|
-
plotly_clickannotation: 'clickAnnotation',
|
|
38
|
-
plotly_deselect: 'deselect',
|
|
39
|
-
plotly_doubleclick: 'doubleClick',
|
|
40
|
-
plotly_framework: 'framework',
|
|
41
|
-
plotly_hover: 'hover',
|
|
42
|
-
plotly_legendclick: 'legendClick',
|
|
43
|
-
plotly_legenddoubleclick: 'legendDoubleClick',
|
|
44
|
-
plotly_react: 'react',
|
|
45
|
-
plotly_redraw: 'redraw',
|
|
46
|
-
plotly_relayout: 'relayout',
|
|
47
|
-
plotly_relayouting: 'relayouting',
|
|
48
|
-
plotly_restyle: 'restyle',
|
|
49
|
-
plotly_selected: 'selected',
|
|
50
|
-
plotly_selecting: 'selecting',
|
|
51
|
-
plotly_sliderchange: 'sliderChange',
|
|
52
|
-
plotly_sliderend: 'sliderEnd',
|
|
53
|
-
plotly_sliderstart: 'sliderStart',
|
|
54
|
-
plotly_sunburstclick: 'sunburstClick',
|
|
55
|
-
plotly_transitioned: 'transitioned',
|
|
56
|
-
plotly_transitioning: 'transitioning',
|
|
57
|
-
plotly_transitioninterrupted: 'transitionInterrupted',
|
|
58
|
-
plotly_unhover: 'unhover',
|
|
59
|
-
plotly_update: 'update',
|
|
60
|
-
plotly_webglcontextlost: 'webGLContextLost'
|
|
61
|
-
// TODO add all plotly_${traceType}click
|
|
62
|
-
};
|
|
63
|
-
const dispatch = createEventDispatcher();
|
|
64
|
-
// bind props
|
|
65
|
-
export let element = undefined;
|
|
66
|
-
export let plot = undefined;
|
|
67
|
-
// input props
|
|
68
|
-
export let libPlotly = undefined;
|
|
69
|
-
export let data;
|
|
70
|
-
export let layout = undefined;
|
|
71
|
-
export let config = undefined;
|
|
72
|
-
export let fillParent = false;
|
|
73
|
-
export let debounce = 0;
|
|
74
|
-
let className = '';
|
|
75
|
-
export { className as class };
|
|
76
|
-
// set up
|
|
77
|
-
onMount(async () => {
|
|
78
|
-
window.global = window;
|
|
79
|
-
await loadPlotly();
|
|
80
|
-
});
|
|
81
|
-
// state props
|
|
82
|
-
let datarevision = 0;
|
|
83
|
-
let previousLib = libPlotly;
|
|
84
|
-
let previousPlot = plot;
|
|
85
|
-
let width = DEFAULT_WIDTH;
|
|
86
|
-
let height = DEFAULT_HEIGHT;
|
|
87
|
-
// updates
|
|
88
|
-
$: debounceWait = typeof debounce === 'object' ? debounce.wait : debounce ?? 0;
|
|
89
|
-
$: debounceOptions = typeof debounce === 'object' ? debounce : {};
|
|
90
|
-
$: data, (datarevision = (datarevision + 1) % 1000);
|
|
91
|
-
$: layout_ = { datarevision, width, height, ...layout };
|
|
92
|
-
$: config_ = { displaylogo: false, ...config };
|
|
93
|
-
$: draw(libPlotly, element, data, layout_, config_);
|
|
94
|
-
$: {
|
|
95
|
-
if (element && previousLib !== libPlotly) {
|
|
96
|
-
previousLib?.purge(element);
|
|
97
|
-
plot = undefined;
|
|
98
|
-
}
|
|
99
|
-
previousLib = libPlotly;
|
|
100
|
-
loadPlotly();
|
|
101
|
-
}
|
|
102
|
-
$: if (previousPlot !== plot) {
|
|
103
|
-
for (const [plotlyEvent, svelteEvent] of Object.entries(events)) {
|
|
104
|
-
previousPlot?.removeAllListeners?.(plotlyEvent);
|
|
105
|
-
plot?.on(plotlyEvent, (e) => dispatch(svelteEvent, e));
|
|
106
|
-
}
|
|
107
|
-
previousPlot = plot;
|
|
108
|
-
}
|
|
109
|
-
const drawUndebounced = (lib, e, d, l, c) => {
|
|
110
|
-
if (e)
|
|
111
|
-
lib?.react(e, d, l, c).then(p => (plot = p));
|
|
112
|
-
};
|
|
113
|
-
$: draw = debouncify(drawUndebounced, debounceWait, debounceOptions);
|
|
114
|
-
// destroy
|
|
115
|
-
onDestroy(() => element && libPlotly?.purge(element));
|
|
116
|
-
// autosizing
|
|
117
|
-
$: fillParent, nextFrame(onResize);
|
|
118
|
-
$: fillParentWidth = fillParent === true || fillParent === 'width';
|
|
119
|
-
$: fillParentHeight = fillParent === true || fillParent === 'height';
|
|
120
|
-
$: parent = element?.parentElement;
|
|
121
|
-
let lastParent = null;
|
|
122
|
-
$: {
|
|
123
|
-
parentMounted(parent);
|
|
124
|
-
parentUnmounted(lastParent);
|
|
125
|
-
lastParent = parent;
|
|
126
|
-
}
|
|
127
|
-
let resizeObserver;
|
|
128
|
-
onMount(() => (resizeObserver = new ResizeObserver(onResize)));
|
|
129
|
-
const parentMounted = (parent) => parent && resizeObserver?.observe(parent);
|
|
130
|
-
const parentUnmounted = (parent) => parent && resizeObserver?.unobserve(parent);
|
|
131
|
-
function onResize() {
|
|
132
|
-
if (!parent || !element)
|
|
133
|
-
return;
|
|
134
|
-
const { offsetHeight, offsetWidth } = parent;
|
|
135
|
-
const { paddingLeft, paddingTop, paddingRight, paddingBottom } = window.getComputedStyle(parent);
|
|
136
|
-
const maxWidth = offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
|
|
137
|
-
const maxHeight = offsetHeight - parseInt(paddingTop) - parseInt(paddingRight);
|
|
138
|
-
width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
|
|
139
|
-
height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
|
|
140
|
-
}
|
|
141
|
-
</script>
|
|
142
|
-
|
|
143
|
-
<div
|
|
144
|
-
class={className}
|
|
145
|
-
class:fillParent
|
|
146
|
-
class:fillParentWidth
|
|
147
|
-
class:fillParentHeight
|
|
148
|
-
bind:this={element}
|
|
149
|
-
/>
|
|
150
|
-
|
|
151
|
-
<style>.fillParent {
|
|
152
|
-
overflow: visible;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.fillParentWidth {
|
|
156
|
-
width: 0 !important;
|
|
157
|
-
max-width: 0 !important;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.fillParentHeight {
|
|
161
|
-
height: 0 !important;
|
|
162
|
-
max-height: 0 !important;
|
|
163
|
-
}</style>
|