layerchart 0.15.0 → 0.15.1
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<script context="module">import { getContext, setContext
|
|
1
|
+
<script context="module">import { getContext, setContext } from 'svelte';
|
|
2
2
|
import { writable } from 'svelte/store';
|
|
3
3
|
import { geoMercator } from 'd3-geo';
|
|
4
4
|
export const geoContextKey = {};
|
|
@@ -25,35 +25,20 @@ export let center = undefined;
|
|
|
25
25
|
const geo = writable(projection());
|
|
26
26
|
setGeoContext(geo);
|
|
27
27
|
$: fitSizeRange = (fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]);
|
|
28
|
-
$: console.log({ $width, $height });
|
|
29
|
-
let initialized = false;
|
|
30
28
|
$: {
|
|
31
|
-
console.log('update', { fitGeojson, translate, scale });
|
|
32
29
|
const _projection = projection();
|
|
30
|
+
if (fitGeojson && 'fitSize' in _projection) {
|
|
31
|
+
_projection.fitSize(fitSizeRange, fitGeojson);
|
|
32
|
+
}
|
|
33
33
|
if (scale && 'scale' in _projection) {
|
|
34
34
|
_projection.scale(scale);
|
|
35
35
|
}
|
|
36
|
-
if (translate && 'translate' in _projection) {
|
|
37
|
-
_projection.translate(translate);
|
|
38
|
-
}
|
|
39
|
-
// Apply before `rotate` but after `translate` / `scale`
|
|
40
|
-
if (fitGeojson && 'fitSize' in _projection) {
|
|
41
|
-
if (!initialized || (translate == undefined && scale == undefined)) {
|
|
42
|
-
console.log({ fitGeojson, $width, $height });
|
|
43
|
-
console.log('translate/scale before', {
|
|
44
|
-
translate: _projection.translate(),
|
|
45
|
-
scale: _projection.scale()
|
|
46
|
-
});
|
|
47
|
-
_projection.fitSize(fitSizeRange, fitGeojson);
|
|
48
|
-
console.log('translate/scale after', {
|
|
49
|
-
translate: _projection.translate(),
|
|
50
|
-
scale: _projection.scale()
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
36
|
if (rotate && 'rotate' in _projection) {
|
|
55
37
|
_projection.rotate([rotate.yaw, rotate.pitch, rotate.roll]);
|
|
56
38
|
}
|
|
39
|
+
if (translate && 'translate' in _projection) {
|
|
40
|
+
_projection.translate(translate);
|
|
41
|
+
}
|
|
57
42
|
if (center && 'center' in _projection) {
|
|
58
43
|
_projection.center(center);
|
|
59
44
|
}
|
|
@@ -63,9 +48,6 @@ $: {
|
|
|
63
48
|
if (clipExtent && 'clipExtent' in _projection) {
|
|
64
49
|
_projection.clipExtent(clipExtent);
|
|
65
50
|
}
|
|
66
|
-
setTimeout(() => {
|
|
67
|
-
initialized = true;
|
|
68
|
-
}, 3000);
|
|
69
51
|
geo.set(_projection);
|
|
70
52
|
}
|
|
71
53
|
</script>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<script>import { getContext, createEventDispatcher
|
|
1
|
+
<script>import { getContext, createEventDispatcher } from 'svelte';
|
|
2
2
|
import { motionStore } from '../stores/motionStore';
|
|
3
3
|
const { width, height, padding } = getContext('LayerCake');
|
|
4
4
|
export let mode = 'svg';
|
|
@@ -159,13 +159,7 @@ $: if (mode === 'svg') {
|
|
|
159
159
|
};
|
|
160
160
|
transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
|
|
161
161
|
}
|
|
162
|
-
let isMounted = false;
|
|
163
|
-
onMount(() => {
|
|
164
|
-
isMounted = true;
|
|
165
|
-
});
|
|
166
|
-
// $: if (isMounted) {
|
|
167
162
|
$: dispatch('zoom', { scale: $scale, translate: $translate });
|
|
168
|
-
// }
|
|
169
163
|
</script>
|
|
170
164
|
|
|
171
165
|
<g
|
package/dist/docs/Layout.svelte
CHANGED
|
@@ -4,59 +4,15 @@
|
|
|
4
4
|
import a from './Link.svelte';
|
|
5
5
|
import h1 from './Header1.svelte';
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
import { mdiCodeTags, mdiFileDocumentEditOutline } from '@mdi/js';
|
|
9
|
-
import { Button, Tooltip } from 'svelte-ux';
|
|
10
|
-
|
|
11
|
-
export { a, blockquote, h1 };
|
|
7
|
+
export { a, blockquote };
|
|
12
8
|
</script>
|
|
13
9
|
|
|
14
10
|
<script>
|
|
15
11
|
// frontmatter: https://mdsvex.com/docs#frontmatter-1
|
|
16
|
-
export let name = undefined;
|
|
17
|
-
export let sourceUrl = undefined;
|
|
18
|
-
export let docUrl = undefined;
|
|
19
|
-
export let description = undefined;
|
|
12
|
+
// export let name = undefined;
|
|
13
|
+
// export let sourceUrl = undefined;
|
|
14
|
+
// export let docUrl = undefined;
|
|
15
|
+
// export let description = undefined;
|
|
20
16
|
</script>
|
|
21
17
|
|
|
22
|
-
{#if name}
|
|
23
|
-
<div class="flex items-center gap-2">
|
|
24
|
-
<span class="text-2xl font-bold">{name}</span>
|
|
25
|
-
{#if sourceUrl}
|
|
26
|
-
<Tooltip title="View source">
|
|
27
|
-
<Button
|
|
28
|
-
class="text-black/50"
|
|
29
|
-
icon={mdiCodeTags}
|
|
30
|
-
href="https://github.com/techniq/layerchart/blob/master/{sourceUrl}"
|
|
31
|
-
target="_blank"
|
|
32
|
-
/>
|
|
33
|
-
</Tooltip>
|
|
34
|
-
{/if}
|
|
35
|
-
|
|
36
|
-
{#if docUrl}
|
|
37
|
-
<Tooltip title="Edit this page">
|
|
38
|
-
<Button
|
|
39
|
-
class="text-black/50"
|
|
40
|
-
icon={mdiFileDocumentEditOutline}
|
|
41
|
-
href="https://github.com/techniq/layerchart/blob/master/{docUrl}"
|
|
42
|
-
target="_blank"
|
|
43
|
-
/>
|
|
44
|
-
</Tooltip>
|
|
45
|
-
{/if}
|
|
46
|
-
</div>
|
|
47
|
-
{/if}
|
|
48
|
-
|
|
49
|
-
{#if description}
|
|
50
|
-
<div class="text-sm text-black/50">
|
|
51
|
-
{description}
|
|
52
|
-
</div>
|
|
53
|
-
{/if}
|
|
54
|
-
|
|
55
|
-
{#if $$slots.toc}
|
|
56
|
-
<div class="text-xs uppercase text-black/50 leading-8 tracking-widest mt-4">Contents</div>
|
|
57
|
-
<div class="border border-black/20 rounded bg-white">
|
|
58
|
-
<slot name="toc" />
|
|
59
|
-
</div>
|
|
60
|
-
{/if}
|
|
61
|
-
|
|
62
18
|
<slot />
|
|
@@ -2,14 +2,10 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} LayoutEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} LayoutSlots */
|
|
4
4
|
export default class Layout extends SvelteComponentTyped<{
|
|
5
|
-
|
|
6
|
-
sourceUrl?: any;
|
|
7
|
-
docUrl?: any;
|
|
8
|
-
description?: any;
|
|
5
|
+
[x: string]: never;
|
|
9
6
|
}, {
|
|
10
7
|
[evt: string]: CustomEvent<any>;
|
|
11
8
|
}, {
|
|
12
|
-
toc: {};
|
|
13
9
|
default: {};
|
|
14
10
|
}> {
|
|
15
11
|
}
|
|
@@ -18,21 +14,16 @@ export type LayoutEvents = typeof __propDef.events;
|
|
|
18
14
|
export type LayoutSlots = typeof __propDef.slots;
|
|
19
15
|
import a from './Link.svelte';
|
|
20
16
|
import blockquote from './Blockquote.svelte';
|
|
21
|
-
import h1 from './Header1.svelte';
|
|
22
17
|
import { SvelteComponentTyped } from "svelte";
|
|
23
18
|
declare const __propDef: {
|
|
24
19
|
props: {
|
|
25
|
-
|
|
26
|
-
sourceUrl?: any;
|
|
27
|
-
docUrl?: any;
|
|
28
|
-
description?: any;
|
|
20
|
+
[x: string]: never;
|
|
29
21
|
};
|
|
30
22
|
events: {
|
|
31
23
|
[evt: string]: CustomEvent<any>;
|
|
32
24
|
};
|
|
33
25
|
slots: {
|
|
34
|
-
toc: {};
|
|
35
26
|
default: {};
|
|
36
27
|
};
|
|
37
28
|
};
|
|
38
|
-
export { a, blockquote
|
|
29
|
+
export { a, blockquote };
|
package/dist/docs/Preview.svelte
CHANGED
|
@@ -7,12 +7,22 @@ export let step = 1;
|
|
|
7
7
|
</script>
|
|
8
8
|
|
|
9
9
|
<Field let:id {...$$restProps}>
|
|
10
|
-
<Button
|
|
10
|
+
<Button
|
|
11
|
+
icon={mdiChevronLeft}
|
|
12
|
+
on:click={() => (value -= value > min ? step : 0)}
|
|
13
|
+
class="mr-2"
|
|
14
|
+
size="sm"
|
|
15
|
+
/>
|
|
11
16
|
<input type="range" bind:value {min} {max} {step} {id} class="h-6 w-full" />
|
|
12
17
|
<span class="ml-2 text-sm text-black/50 tabular-nums text-right inline-grid">
|
|
13
18
|
<span class="col-span-full row-span-full invisible">{min}</span>
|
|
14
19
|
<span class="col-span-full row-span-full">{value}</span>
|
|
15
20
|
<span class="col-span-full row-span-full invisible">{max}</span>
|
|
16
21
|
</span>
|
|
17
|
-
<Button
|
|
22
|
+
<Button
|
|
23
|
+
icon={mdiChevronRight}
|
|
24
|
+
on:click={() => (value += value < max ? step : 0)}
|
|
25
|
+
class="ml-2"
|
|
26
|
+
size="sm"
|
|
27
|
+
/>
|
|
18
28
|
</Field>
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"author": "Sean Lynch <techniq35@gmail.com>",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": "techniq/layerchart",
|
|
6
|
-
"version": "0.15.
|
|
6
|
+
"version": "0.15.1",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"dev": "vite dev",
|
|
9
9
|
"build": "vite build",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@rollup/plugin-dsv": "^3.0.2",
|
|
20
20
|
"@sveltejs/adapter-vercel": "^2.4.3",
|
|
21
|
-
"@sveltejs/kit": "^1.
|
|
21
|
+
"@sveltejs/kit": "^1.16.0",
|
|
22
22
|
"@sveltejs/package": "^2.0.2",
|
|
23
23
|
"@tailwindcss/typography": "^0.5.9",
|
|
24
24
|
"@types/d3-array": "^3.0.4",
|
|
@@ -40,21 +40,21 @@
|
|
|
40
40
|
"prettier-plugin-svelte": "^2.10.0",
|
|
41
41
|
"prism-themes": "^1.9.0",
|
|
42
42
|
"rehype-slug": "^5.1.0",
|
|
43
|
-
"svelte-check": "^3.
|
|
43
|
+
"svelte-check": "^3.3.0",
|
|
44
44
|
"svelte-preprocess": "^5.0.1",
|
|
45
|
-
"svelte2tsx": "^0.6.
|
|
45
|
+
"svelte2tsx": "^0.6.12",
|
|
46
46
|
"tailwindcss": "^3.3.2",
|
|
47
47
|
"tslib": "^2.5.0",
|
|
48
48
|
"typescript": "^5.0.4",
|
|
49
49
|
"unist-util-visit": "^4.1.2",
|
|
50
50
|
"us-atlas": "^3.0.1",
|
|
51
|
-
"vite": "^4.3.
|
|
51
|
+
"vite": "^4.3.4",
|
|
52
52
|
"vite-plugin-sveld": "^1.1.0"
|
|
53
53
|
},
|
|
54
54
|
"type": "module",
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@mdi/js": "^7.2.96",
|
|
57
|
-
"@vercel/analytics": "^1.0.
|
|
57
|
+
"@vercel/analytics": "^1.0.1",
|
|
58
58
|
"d3-array": "^3.2.3",
|
|
59
59
|
"d3-delaunay": "^6.0.4",
|
|
60
60
|
"d3-dsv": "^3.0.1",
|
|
@@ -69,11 +69,11 @@
|
|
|
69
69
|
"d3-scale-chromatic": "^3.0.0",
|
|
70
70
|
"d3-shape": "^3.2.0",
|
|
71
71
|
"d3-tile": "^1.0.0",
|
|
72
|
-
"date-fns": "^2.
|
|
72
|
+
"date-fns": "^2.30.0",
|
|
73
73
|
"layercake": "^7.4.0",
|
|
74
74
|
"lodash-es": "^4.17.21",
|
|
75
75
|
"svelte": "^3.58.0",
|
|
76
|
-
"svelte-ux": "^0.
|
|
76
|
+
"svelte-ux": "^0.33.6",
|
|
77
77
|
"topojson-client": "^3.1.0"
|
|
78
78
|
},
|
|
79
79
|
"main": "./dist/index.js",
|