Skip to content

Commit 430a6b3

Browse files
rzatsrzats
authored
Improve top panel elements & autofit mode (#54)
* Tour changes
1 parent 8baf276 commit 430a6b3

File tree

8 files changed

+139
-142
lines changed

8 files changed

+139
-142
lines changed

‎src/components/Chart.svelte

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,9 @@
134134
setNavMode(NavMode.zoom);
135135
}
136136
}
137-
if (navMode == NavMode.crop) {
137+
if (navMode == NavMode.autofit) {
138+
navMode = NavMode.pan;
139+
} else if (navMode == NavMode.crop) {
138140
navBox = { x: m.x, y: m.y, w: 0, h: 0 };
139141
}
140142
}
@@ -268,6 +270,9 @@
268270
dx = ((xMax - xMin) / 2) * fx;
269271
dy = ((yMax - yMin) / 2) * fy;
270272
setViewport(xMin - dx, yMin - dy, xMax - dx, yMax - dy);
273+
if (navMode == NavMode.autofit) {
274+
navMode = NavMode.pan;
275+
}
271276
}
272277
273278
function zoom(x: number, y: number): void {

‎src/components/TopMenu.svelte

Lines changed: 59 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,11 @@
1010
faLink,
1111
faPaintBrush,
1212
faQuestion,
13-
faReceipt,
1413
faSearchPlus,
15-
faUpDown,
14+
faShuffle,
1615
} from '@fortawesome/free-solid-svg-icons';
1716
import Fa from 'svelte-fa';
18-
import { activeDatasets, isShowingPoints, navMode, randomizeColors, reset, scaleMean, autoFit } from '../store';
17+
import { activeDatasets, isShowingPoints, navMode, randomizeColors, reset, scaleMean } from '../store';
1918
import type { IChart } from '../store';
2019
import { NavMode } from './chartUtils';
2120
import { tour } from '../tour';
@@ -55,6 +54,9 @@
5554
chart.fitData(true);
5655
}
5756
break;
57+
case 'a':
58+
$navMode = NavMode.autofit;
59+
break;
5860
case 'p':
5961
$navMode = NavMode.pan;
6062
break;
@@ -70,9 +72,6 @@
7072
case 's':
7173
$isShowingPoints = !$isShowingPoints;
7274
break;
73-
case 'a':
74-
$autoFit = !$autoFit;
75-
break;
7675
case 'h':
7776
tour.cancel();
7877
tour.start();
@@ -82,35 +81,57 @@
8281
</script>
8382

8483
<div class="menu" {style} data-tour="top">
85-
<div class="uk-button-group">
84+
<div class="uk-button-group" data-tour="navmode">
8685
<button
8786
type="button"
88-
class="uk-button uk-button-default uk-button-small"
89-
on:click|preventDefault={randomizeColors}
90-
title="Randomize Colors<br/>(Keyboard Shortcut: r)"
91-
data-tour="random"
92-
uk-tooltip><Fa icon={faPaintBrush} /></button
87+
class="uk-button uk-button-small"
88+
disabled={!chart}
89+
class:uk-active={$navMode === NavMode.autofit}
90+
class:uk-button-secondary={$navMode === NavMode.autofit}
91+
class:uk-button-default={$navMode !== NavMode.autofit}
92+
on:click|preventDefault={() => ($navMode = NavMode.autofit)}
93+
title="Autofit Mode<br/>(Keyboard Shortcut: a)"
94+
uk-tooltip><Fa icon={faExpand} /></button
9395
>
9496
<button
9597
type="button"
96-
class="uk-button uk-button-default uk-button-small"
97-
disabled={!chart}
98-
on:click|preventDefault={() => (chart ? chart.fitData(true) : null)}
99-
title="Fit Data to Screen<br/>(Keyboard Shortcut: f)"
100-
data-tour="fit"
101-
uk-tooltip><Fa icon={faExpand} /></button
98+
class="uk-button uk-button-small"
99+
class:uk-active={$navMode === NavMode.pan}
100+
title="Pan Mode<br/>(Keyboard Shortcut: p)"
101+
class:uk-button-secondary={$navMode === NavMode.pan}
102+
class:uk-button-default={$navMode !== NavMode.pan}
103+
uk-tooltip
104+
on:click|preventDefault={() => ($navMode = NavMode.pan)}><Fa icon={faArrowsAlt} /></button
102105
>
103106
<button
104107
type="button"
105108
class="uk-button uk-button-small"
106-
disabled={!chart}
107-
class:uk-active={$autoFit}
108-
class:uk-button-secondary={$autoFit}
109-
class:uk-button-default={!$autoFit}
110-
on:click|preventDefault={() => ($autoFit = !$autoFit)}
111-
title="Automatically Fit Data<br/>(Keyboard Shortcut: a)"
112-
data-tour="autofit"
113-
uk-tooltip><Fa icon={faUpDown} /></button
109+
class:uk-active={$navMode === NavMode.crop}
110+
class:uk-button-secondary={$navMode === NavMode.crop}
111+
class:uk-button-default={$navMode !== NavMode.crop}
112+
title="Crop Mode<br/>(Keyboard Shortcut: c)"
113+
uk-tooltip
114+
on:click|preventDefault={() => ($navMode = NavMode.crop)}><Fa icon={faCrop} /></button
115+
>
116+
<button
117+
type="button"
118+
class="uk-button uk-button-small"
119+
class:uk-active={$navMode === NavMode.zoom}
120+
class:uk-button-secondary={$navMode === NavMode.zoom}
121+
class:uk-button-default={$navMode !== NavMode.zoom}
122+
title="Zoom Mode<br/>(Keyboard Shortcut: z)"
123+
uk-tooltip
124+
on:click|preventDefault={() => ($navMode = NavMode.zoom)}><Fa icon={faSearchPlus} /></button
125+
>
126+
</div>
127+
<div class="uk-button-group">
128+
<button
129+
type="button"
130+
class="uk-button uk-button-default uk-button-small"
131+
on:click|preventDefault={randomizeColors}
132+
title="Randomize Colors<br/>(Keyboard Shortcut: r)"
133+
data-tour="random"
134+
uk-tooltip><Fa icon={faPaintBrush} /></button
114135
>
115136
<button
116137
type="button"
@@ -119,17 +140,10 @@
119140
class:uk-button-secondary={$isShowingPoints}
120141
class:uk-button-default={!$isShowingPoints}
121142
on:click|preventDefault={() => ($isShowingPoints = !$isShowingPoints)}
122-
title="Show or Hide points<br/>(Keyboard Shortcut: s)"
143+
title="Show or Hide Points<br/>(Keyboard Shortcut: s)"
123144
data-tour="points"
124145
uk-tooltip><Fa icon={faEllipsisH} /></button
125146
>
126-
<button
127-
type="button"
128-
class="uk-button uk-button-default uk-button-small"
129-
on:click|preventDefault={scaleMean}
130-
title="Scale by 1/mean"
131-
uk-tooltip><Fa icon={faAnchor} /></button
132-
>
133147
<button
134148
type="button"
135149
class="uk-button uk-button-default uk-button-small"
@@ -138,12 +152,21 @@
138152
uk-tooltip
139153
disabled={$activeDatasets.length < 2}><Fa icon={faChartLine} /></button
140154
>
155+
</div>
156+
<div class="uk-button-group" data-tour="scale">
157+
<button
158+
type="button"
159+
class="uk-button uk-button-default uk-button-small"
160+
on:click|preventDefault={scaleMean}
161+
title="Scale by 1/mean"
162+
uk-tooltip><Fa icon={faAnchor} /></button
163+
>
141164
<button
142165
type="button"
143166
class="uk-button uk-button-default uk-button-small"
144167
on:click|preventDefault={reset}
145-
title="Reset DataSet Scaling"
146-
uk-tooltip><Fa icon={faReceipt} /></button
168+
title="Reset Dataset Scaling"
169+
uk-tooltip><Fa icon={faShuffle} /></button
147170
>
148171
</div>
149172
<div class="uk-button-group">
@@ -166,38 +189,6 @@
166189
on:click|preventDefault={() => (doDialog = 'directLink')}><Fa icon={faLink} /></button
167190
>
168191
</div>
169-
<div class="uk-button-group" data-tour="navmode">
170-
<button
171-
type="button"
172-
class="uk-button uk-button-small"
173-
class:uk-active={$navMode === NavMode.pan}
174-
title="Pan Mode<br/>(Keyboard Shortcut: p)"
175-
class:uk-button-secondary={$navMode === NavMode.pan}
176-
class:uk-button-default={$navMode !== NavMode.pan}
177-
uk-tooltip
178-
on:click|preventDefault={() => ($navMode = NavMode.pan)}><Fa icon={faArrowsAlt} /></button
179-
>
180-
<button
181-
type="button"
182-
class="uk-button uk-button-small"
183-
class:uk-active={$navMode === NavMode.crop}
184-
class:uk-button-secondary={$navMode === NavMode.crop}
185-
class:uk-button-default={$navMode !== NavMode.crop}
186-
title="Crop Mode<br/>(Keyboard Shortcut: c)"
187-
uk-tooltip
188-
on:click|preventDefault={() => ($navMode = NavMode.crop)}><Fa icon={faCrop} /></button
189-
>
190-
<button
191-
type="button"
192-
class="uk-button uk-button-small"
193-
class:uk-active={$navMode === NavMode.zoom}
194-
class:uk-button-secondary={$navMode === NavMode.zoom}
195-
class:uk-button-default={$navMode !== NavMode.zoom}
196-
title="Zoom Mode<br/>(Keyboard Shortcut: z)"
197-
uk-tooltip
198-
on:click|preventDefault={() => ($navMode = NavMode.zoom)}><Fa icon={faSearchPlus} /></button
199-
>
200-
</div>
201192
<div class="uk-button-group">
202193
<button
203194
type="button"

‎src/components/chartUtils.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
export enum NavMode {
2-
pan = 0,
3-
crop = 1,
4-
zoom = 2,
2+
autofit = 0,
3+
pan = 1,
4+
crop = 2,
5+
zoom = 3,
56
}
67

78
export enum Align {

‎src/components/dialogs/ImportAPIDialog.svelte

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
import NowCast from './dataSources/Nowcast.svelte';
2020
import CovidHosp from './dataSources/COVIDHosp.svelte';
2121
import CoviDcast from './dataSources/COVIDcast.svelte';
22+
import { navMode } from '../../store';
23+
import { NavMode } from '../chartUtils';
2224
2325
const dispatch = createEventDispatcher();
2426
@@ -54,6 +56,8 @@
5456
loading = false;
5557
if (ds) {
5658
dispatch('imported', ds);
59+
// reset viewport and make sure new data is displayed
60+
$navMode = NavMode.autofit;
5761
} else {
5862
dispatch('close');
5963
}

‎src/components/tree/TreeLeafNode.svelte

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
22
import type DataSet from '../../data/DataSet';
3-
import { activeDatasets, autoFit } from '../../store';
3+
import { activeDatasets, navMode } from '../../store';
44
import Fa from 'svelte-fa';
55
import { faEyeSlash, faEye } from '@fortawesome/free-solid-svg-icons';
6-
import type { IChart } from '../store';
6+
import type { IChart } from '../../store';
7+
import { NavMode } from '../chartUtils';
78
89
export let node: DataSet;
910
export let chart: IChart | null;
@@ -17,7 +18,7 @@
1718
}
1819
$: {
1920
// runs whenever $activeDatasets is updated
20-
if ($activeDatasets && chart && $autoFit) {
21+
if ($activeDatasets && chart && $navMode == NavMode.autofit) {
2122
chart.fitData(true);
2223
}
2324
}

‎src/deriveLinkDefaults.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,13 @@ export interface SharedState {
3535
active: DataSet[];
3636
viewport: null | [number, number, number, number];
3737
showPoints: boolean;
38-
autoFit: boolean;
3938
}
4039

4140
const DEFAULT_VALUES: SharedState = {
4241
group: DEFAULT_GROUP,
4342
active: [],
4443
viewport: DEFAULT_VIEWPORT,
4544
showPoints: false,
46-
autoFit: true,
4745
};
4846

4947
const lookups = {

‎src/store.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ export const expandedDataGroups = writable([defaults.group]);
1515

1616
export const isShowingPoints = writable(defaults.showPoints);
1717
export const initialViewport = writable(defaults.viewport);
18-
export const navMode = writable(NavMode.pan);
19-
export const autoFit = writable(defaults.autoFit);
18+
export const navMode = writable(NavMode.autofit);
2019

2120
export function addDataSet(dataset: DataSet | DataGroup): void {
2221
const root = get(datasetTree);

0 commit comments

Comments
 (0)