layerchart 0.38.6 → 0.39.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.
|
@@ -11,6 +11,8 @@ const defaultContext = {
|
|
|
11
11
|
setTranslate: defaultTranslate.set,
|
|
12
12
|
moving: writable(false),
|
|
13
13
|
dragging: writable(false),
|
|
14
|
+
scrollMode: writable('none'),
|
|
15
|
+
setScrollMode: () => { },
|
|
14
16
|
reset: () => { },
|
|
15
17
|
zoomIn: () => { },
|
|
16
18
|
zoomOut: () => { },
|
|
@@ -41,12 +43,13 @@ export let processTranslate = (x, y, deltaX, deltaY, scale) => {
|
|
|
41
43
|
/** Disable pointer events including move/dragging. Useful for `mode="canvas" but only want zoomTo() interactions */
|
|
42
44
|
export let disablePointer = false;
|
|
43
45
|
/** Action to take during wheel scroll */
|
|
44
|
-
export let
|
|
46
|
+
export let initialScrollMode = 'none';
|
|
45
47
|
/** Distance/threshold to consider drag vs click (disable click propagation) */
|
|
46
48
|
export let clickDistance = 10;
|
|
47
49
|
const dispatch = createEventDispatcher();
|
|
48
50
|
let pointerDown = false;
|
|
49
51
|
const dragging = writable(false);
|
|
52
|
+
const scrollMode = writable(initialScrollMode);
|
|
50
53
|
const DEFAULT_TRANSLATE = { x: 0, y: 0 };
|
|
51
54
|
export let initialTranslate = undefined;
|
|
52
55
|
export const translate = motionStore(initialTranslate ?? DEFAULT_TRANSLATE, { spring, tweened });
|
|
@@ -55,6 +58,9 @@ export let initialScale = undefined;
|
|
|
55
58
|
export const scale = motionStore(initialScale ?? DEFAULT_SCALE, { spring, tweened });
|
|
56
59
|
let startPoint = { x: 0, y: 0 };
|
|
57
60
|
let startTranslate = { x: 0, y: 0 };
|
|
61
|
+
export function setScrollMode(mode) {
|
|
62
|
+
$scrollMode = mode;
|
|
63
|
+
}
|
|
58
64
|
export function reset() {
|
|
59
65
|
$translate = initialTranslate ?? DEFAULT_TRANSLATE;
|
|
60
66
|
$scale = initialScale ?? DEFAULT_SCALE;
|
|
@@ -126,18 +132,18 @@ function onDoubleClick(e) {
|
|
|
126
132
|
scaleTo(e.shiftKey ? 0.5 : 2, point);
|
|
127
133
|
}
|
|
128
134
|
function onWheel(e) {
|
|
129
|
-
if (mode === 'none' || disablePointer ||
|
|
135
|
+
if (mode === 'none' || disablePointer || $scrollMode === 'none')
|
|
130
136
|
return;
|
|
131
137
|
e.preventDefault();
|
|
132
138
|
const point = (startPoint = localPoint(e));
|
|
133
139
|
// Pinch to zoom is registered as a wheel event with control key
|
|
134
140
|
const pinchToZoom = e.ctrlKey;
|
|
135
|
-
if (
|
|
141
|
+
if ($scrollMode === 'scale' || pinchToZoom) {
|
|
136
142
|
// https://github.com/d3/d3-zoom#zoom_wheelDelta
|
|
137
143
|
const scaleBy = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * (e.ctrlKey ? 10 : 1);
|
|
138
144
|
scaleTo(Math.pow(2, scaleBy), point, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
|
|
139
145
|
}
|
|
140
|
-
else if (
|
|
146
|
+
else if ($scrollMode === 'translate') {
|
|
141
147
|
translate.update((startTranslate) => processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY, $scale), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
|
|
142
148
|
}
|
|
143
149
|
}
|
|
@@ -195,6 +201,8 @@ setTransformContext({
|
|
|
195
201
|
zoomOut,
|
|
196
202
|
translateCenter,
|
|
197
203
|
zoomTo,
|
|
204
|
+
scrollMode,
|
|
205
|
+
setScrollMode,
|
|
198
206
|
});
|
|
199
207
|
</script>
|
|
200
208
|
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
import { type Readable, type Writable } from 'svelte/store';
|
|
3
3
|
export declare const transformContextKey: unique symbol;
|
|
4
|
+
type TransformMode = 'canvas' | 'manual' | 'none';
|
|
5
|
+
type TransformScrollMode = 'scale' | 'translate' | 'none';
|
|
4
6
|
export type TransformContextValue = {
|
|
5
|
-
mode:
|
|
7
|
+
mode: TransformMode;
|
|
6
8
|
scale: Writable<number>;
|
|
7
9
|
setScale(value: number, options?: MotionOptions): void;
|
|
8
10
|
translate: Writable<{
|
|
@@ -15,6 +17,8 @@ export type TransformContextValue = {
|
|
|
15
17
|
}, options?: MotionOptions): void;
|
|
16
18
|
moving: Readable<boolean>;
|
|
17
19
|
dragging: Readable<boolean>;
|
|
20
|
+
scrollMode: Readable<TransformScrollMode>;
|
|
21
|
+
setScrollMode(mode: TransformScrollMode): void;
|
|
18
22
|
reset(): void;
|
|
19
23
|
zoomIn(): void;
|
|
20
24
|
zoomOut(): void;
|
|
@@ -32,7 +36,7 @@ export declare function transformContext(): TransformContext;
|
|
|
32
36
|
import { motionStore, type MotionOptions } from '../stores/motionStore.js';
|
|
33
37
|
declare const __propDef: {
|
|
34
38
|
props: {
|
|
35
|
-
mode?:
|
|
39
|
+
mode?: TransformMode | undefined;
|
|
36
40
|
translateOnScale?: boolean | undefined;
|
|
37
41
|
spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
|
|
38
42
|
tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
|
|
@@ -41,7 +45,7 @@ declare const __propDef: {
|
|
|
41
45
|
y: number;
|
|
42
46
|
}) | undefined;
|
|
43
47
|
/** Disable pointer events including move/dragging. Useful for `mode="canvas" but only want zoomTo() interactions */ disablePointer?: boolean | undefined;
|
|
44
|
-
/** Action to take during wheel scroll */
|
|
48
|
+
/** Action to take during wheel scroll */ initialScrollMode?: TransformScrollMode | undefined;
|
|
45
49
|
/** Distance/threshold to consider drag vs click (disable click propagation) */ clickDistance?: number | undefined;
|
|
46
50
|
initialTranslate?: {
|
|
47
51
|
x: number;
|
|
@@ -59,6 +63,7 @@ declare const __propDef: {
|
|
|
59
63
|
}> | undefined;
|
|
60
64
|
initialScale?: number | undefined;
|
|
61
65
|
scale?: import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | Writable<number> | undefined;
|
|
66
|
+
setScrollMode?: ((mode: TransformScrollMode) => void) | undefined;
|
|
62
67
|
reset?: (() => void) | undefined;
|
|
63
68
|
zoomIn?: (() => void) | undefined;
|
|
64
69
|
zoomOut?: (() => void) | undefined;
|
|
@@ -133,6 +138,7 @@ export default class TransformContext extends SvelteComponentTyped<TransformCont
|
|
|
133
138
|
y: number;
|
|
134
139
|
}> | undefined>;
|
|
135
140
|
get scale(): NonNullable<import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | Writable<number> | undefined>;
|
|
141
|
+
get setScrollMode(): (mode: TransformScrollMode) => void;
|
|
136
142
|
get reset(): () => void;
|
|
137
143
|
get zoomIn(): () => void;
|
|
138
144
|
get zoomOut(): () => void;
|
|
@@ -1,9 +1,35 @@
|
|
|
1
|
-
<script>import { Button, Tooltip, cls } from 'svelte-ux';
|
|
2
|
-
import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, } from '@mdi/js';
|
|
1
|
+
<script>import { Button, Icon, MenuButton, Tooltip, cls } from 'svelte-ux';
|
|
2
|
+
import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, mdiChevronDown, mdiResize, mdiArrowExpandAll, mdiCancel, } from '@mdi/js';
|
|
3
3
|
import { transformContext } from './TransformContext.svelte';
|
|
4
4
|
export let placement = 'top-right';
|
|
5
5
|
export let orientation = 'vertical';
|
|
6
|
+
export let show = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'];
|
|
7
|
+
$: menuPlacementByOrientationAndPlacement = {
|
|
8
|
+
horizontal: {
|
|
9
|
+
'top-left': 'bottom-end',
|
|
10
|
+
top: 'bottom-end',
|
|
11
|
+
'top-right': 'bottom-end',
|
|
12
|
+
left: 'bottom-end',
|
|
13
|
+
center: 'bottom-end',
|
|
14
|
+
right: 'bottom-end',
|
|
15
|
+
'bottom-left': 'top-end',
|
|
16
|
+
bottom: 'top-end',
|
|
17
|
+
'bottom-right': 'top-end',
|
|
18
|
+
},
|
|
19
|
+
vertical: {
|
|
20
|
+
'top-left': 'right-start',
|
|
21
|
+
top: 'right-start',
|
|
22
|
+
'top-right': 'left-start',
|
|
23
|
+
left: 'right-start',
|
|
24
|
+
center: 'right-start',
|
|
25
|
+
right: 'left-start',
|
|
26
|
+
'bottom-left': 'right-end',
|
|
27
|
+
bottom: 'right-end',
|
|
28
|
+
'bottom-right': 'left-end',
|
|
29
|
+
},
|
|
30
|
+
};
|
|
6
31
|
const transform = transformContext();
|
|
32
|
+
const scrollMode = transform.scrollMode;
|
|
7
33
|
</script>
|
|
8
34
|
|
|
9
35
|
<div
|
|
@@ -23,33 +49,70 @@ const transform = transformContext();
|
|
|
23
49
|
}[placement],
|
|
24
50
|
$$props.class
|
|
25
51
|
)}
|
|
52
|
+
on:dblclick={(e) => {
|
|
53
|
+
// Stop from propagating to TransformContext
|
|
54
|
+
e.stopPropagation();
|
|
55
|
+
}}
|
|
26
56
|
>
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
57
|
+
{#if show.includes('zoomIn')}
|
|
58
|
+
<Tooltip title="Zoom in">
|
|
59
|
+
<Button
|
|
60
|
+
icon={mdiMagnifyPlusOutline}
|
|
61
|
+
on:click={() => transform.zoomIn()}
|
|
62
|
+
class="text-surface-content p-2"
|
|
63
|
+
/>
|
|
64
|
+
</Tooltip>
|
|
65
|
+
{/if}
|
|
66
|
+
|
|
67
|
+
{#if show.includes('zoomOut')}
|
|
68
|
+
<Tooltip title="Zoom out">
|
|
69
|
+
<Button
|
|
70
|
+
icon={mdiMagnifyMinusOutline}
|
|
71
|
+
on:click={() => transform.zoomOut()}
|
|
72
|
+
class="text-surface-content p-2"
|
|
73
|
+
/>
|
|
74
|
+
</Tooltip>
|
|
75
|
+
{/if}
|
|
76
|
+
|
|
77
|
+
{#if show.includes('center')}
|
|
78
|
+
<Tooltip title="Center">
|
|
79
|
+
<Button
|
|
80
|
+
icon={mdiImageFilterCenterFocus}
|
|
81
|
+
on:click={() => transform.translateCenter()}
|
|
82
|
+
class="text-surface-content p-2"
|
|
83
|
+
/>
|
|
84
|
+
</Tooltip>
|
|
85
|
+
{/if}
|
|
86
|
+
|
|
87
|
+
{#if show.includes('reset')}
|
|
88
|
+
<Tooltip title="Reset">
|
|
89
|
+
<Button
|
|
90
|
+
icon={mdiArrowULeftTop}
|
|
91
|
+
on:click={() => transform.reset()}
|
|
92
|
+
class="text-surface-content p-2"
|
|
93
|
+
/>
|
|
94
|
+
</Tooltip>
|
|
95
|
+
{/if}
|
|
96
|
+
|
|
97
|
+
{#if show.includes('scrollMode')}
|
|
98
|
+
<Tooltip title="Scroll mode">
|
|
99
|
+
<MenuButton
|
|
100
|
+
iconOnly
|
|
101
|
+
options={[
|
|
102
|
+
{ label: 'None', value: 'none', icon: mdiCancel },
|
|
103
|
+
{ label: 'Zoom', value: 'scale', icon: mdiResize },
|
|
104
|
+
{ label: 'Move', value: 'translate', icon: mdiArrowExpandAll },
|
|
105
|
+
]}
|
|
106
|
+
menuProps={{ placement: menuPlacementByOrientationAndPlacement[orientation][placement] }}
|
|
107
|
+
menuIcon={null}
|
|
108
|
+
value={$scrollMode}
|
|
109
|
+
on:change={(e) => transform.setScrollMode(e.detail.value)}
|
|
110
|
+
class="text-surface-content"
|
|
111
|
+
>
|
|
112
|
+
<svelte:fragment slot="selection" let:value>
|
|
113
|
+
<Icon data={value?.icon ?? mdiChevronDown} />
|
|
114
|
+
</svelte:fragment>
|
|
115
|
+
</MenuButton>
|
|
116
|
+
</Tooltip>
|
|
117
|
+
{/if}
|
|
55
118
|
</div>
|
|
@@ -4,6 +4,7 @@ declare const __propDef: {
|
|
|
4
4
|
[x: string]: any;
|
|
5
5
|
placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
|
|
6
6
|
orientation?: "horizontal" | "vertical" | undefined;
|
|
7
|
+
show?: ("reset" | "center" | "scrollMode" | "zoomIn" | "zoomOut")[] | undefined;
|
|
7
8
|
};
|
|
8
9
|
events: {
|
|
9
10
|
[evt: string]: CustomEvent<any>;
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"author": "Sean Lynch <techniq35@gmail.com>",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": "techniq/layerchart",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.39.0",
|
|
8
8
|
"devDependencies": {
|
|
9
9
|
"@changesets/cli": "^2.27.5",
|
|
10
10
|
"@mdi/js": "^7.4.47",
|
|
@@ -36,25 +36,25 @@
|
|
|
36
36
|
"@types/topojson-simplify": "^3.0.3",
|
|
37
37
|
"autoprefixer": "^10.4.19",
|
|
38
38
|
"marked": "^12.0.2",
|
|
39
|
-
"mdsvex": "^0.11.
|
|
39
|
+
"mdsvex": "^0.11.2",
|
|
40
40
|
"posthog-js": "^1.95.1",
|
|
41
|
-
"prettier": "^3.
|
|
42
|
-
"prettier-plugin-svelte": "^3.2.
|
|
41
|
+
"prettier": "^3.3.1",
|
|
42
|
+
"prettier-plugin-svelte": "^3.2.4",
|
|
43
43
|
"prism-svelte": "^0.5.0",
|
|
44
44
|
"prism-themes": "^1.9.0",
|
|
45
45
|
"prismjs": "^1.29.0",
|
|
46
46
|
"rehype-slug": "^6.0.0",
|
|
47
47
|
"shapefile": "^0.6.6",
|
|
48
48
|
"solar-calculator": "^0.3.0",
|
|
49
|
-
"svelte": "^4.2.
|
|
49
|
+
"svelte": "^4.2.18",
|
|
50
50
|
"svelte-check": "^3.8.0",
|
|
51
51
|
"svelte-json-tree": "^2.2.0",
|
|
52
52
|
"svelte-preprocess": "^5.1.4",
|
|
53
53
|
"svelte2tsx": "^0.7.9",
|
|
54
|
-
"tailwindcss": "^3.4.
|
|
54
|
+
"tailwindcss": "^3.4.4",
|
|
55
55
|
"topojson-client": "^3.1.0",
|
|
56
56
|
"topojson-simplify": "^3.0.3",
|
|
57
|
-
"tslib": "^2.6.
|
|
57
|
+
"tslib": "^2.6.3",
|
|
58
58
|
"typescript": "^5.4.5",
|
|
59
59
|
"unist-util-visit": "^5.0.0",
|
|
60
60
|
"us-atlas": "^3.0.1",
|
|
@@ -83,11 +83,11 @@
|
|
|
83
83
|
"d3-tile": "^1.0.0",
|
|
84
84
|
"d3-time": "^3.1.0",
|
|
85
85
|
"date-fns": "^3.6.0",
|
|
86
|
-
"layercake": "^8.
|
|
86
|
+
"layercake": "^8.3.0",
|
|
87
87
|
"lodash-es": "^4.17.21",
|
|
88
|
-
"posthog-js": "^1.
|
|
88
|
+
"posthog-js": "^1.138.0",
|
|
89
89
|
"shapefile": "^0.6.6",
|
|
90
|
-
"svelte-ux": "^0.66.
|
|
90
|
+
"svelte-ux": "^0.66.5",
|
|
91
91
|
"topojson-client": "^3.1.0"
|
|
92
92
|
},
|
|
93
93
|
"peerDependencies": {
|