Skip to content

Commit 4e355c1

Browse files
leonhmaleonhma
committed
save
1 parent 8524c7c commit 4e355c1

4 files changed

Lines changed: 135 additions & 101 deletions

File tree

‎src/components/PlotModal/Function.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
<style lang="scss">
106106
.functionplot-item-data {
107107
display: inline-grid;
108-
grid-template-columns: min-content max-content repeat(3, min-content);
108+
grid-template-columns: min-content auto repeat(3, min-content);
109109
column-gap: 1em;
110110
place-items: center start;
111111
width: 100%;

‎src/components/PlotModal/PlotModal.svelte‎

Lines changed: 131 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,26 @@
2929
3030
const optionsStore: Writable<PlotInputs> = writable(options);
3131
32+
function* range(start, end) {
33+
yield start;
34+
if (start === end) return;
35+
yield* range(start + 1, end);
36+
}
37+
3238
function* spacedDegrees() {
33-
// TODO rewrite this, looks too boring
34-
let i = 0;
39+
let current = 0,
40+
round = 0;
3541
3642
while (true) {
37-
yield 120 * (i % 3) + (i > 2 ? 60 / Math.floor(i / 3) : 0);
38-
i++;
43+
for (const i of range(0, 3 * (2 ^ round))) {
44+
current += 120 / (2 ^ round);
45+
if (i % 2 === 0) {
46+
yield current % 360;
47+
console.log(current);
48+
}
49+
}
50+
console.log("finished round");
51+
round++;
3952
}
4053
}
4154
@@ -58,122 +71,143 @@
5871
onDestroy(unsubscribe);
5972
</script>
6073

61-
<div>
74+
<div class="fplt-create-modal">
6275
<div class="fplt-container">
63-
<div class="fplt-options">
64-
<div class="fplt-settings">
65-
<SettingItem name="Title">
66-
<TextInput bind:value={$optionsStore.title} />
67-
</SettingItem>
68-
<SettingItem name="Label X">
69-
<TextInput bind:value={$optionsStore.xAxis.label} />
70-
</SettingItem>
71-
<SettingItem name="Label Y">
72-
<TextInput bind:value={$optionsStore.yAxis.label} />
73-
</SettingItem>
74-
<SettingItem name="Domain">
75-
<NumberInput
76-
placeholder="X min"
77-
bind:value={$optionsStore.xAxis.domain.min}
78-
/>
79-
<NumberInput
80-
placeholder="X max"
81-
bind:value={$optionsStore.xAxis.domain.max}
82-
/>
83-
<NumberInput
84-
placeholder="Y min"
85-
bind:value={$optionsStore.yAxis.domain.min}
86-
/>
87-
<NumberInput
88-
placeholder="Y max"
89-
bind:value={$optionsStore.yAxis.domain.max}
90-
/>
91-
</SettingItem>
92-
<SettingItem name="Disable Zoom">
93-
<Switch bind:checked={$optionsStore.disableZoom} />
94-
</SettingItem>
95-
<SettingItem name="Show Grid">
96-
<Switch bind:checked={$optionsStore.grid} />
97-
</SettingItem>
98-
</div>
99-
</div>
100-
<div class="fplt-data">
101-
Data
102-
<div class="fplt-fns-container">
103-
<div class="fplt-list">
104-
{#each $optionsStore.data as datum}
105-
<Function
106-
bind:datum
107-
unmount={() => {
108-
$optionsStore.data = $optionsStore.data.filter(
109-
(val) => val.id != datum.id
110-
);
111-
}}
76+
<div class="fplt-left">
77+
<div class="fplt-options">
78+
<div class="fplt-settings">
79+
<SettingItem name="Title">
80+
<TextInput bind:value={$optionsStore.title} />
81+
</SettingItem>
82+
<SettingItem name="Label X">
83+
<TextInput bind:value={$optionsStore.xAxis.label} />
84+
</SettingItem>
85+
<SettingItem name="Label Y">
86+
<TextInput bind:value={$optionsStore.yAxis.label} />
87+
</SettingItem>
88+
<SettingItem name="Domain">
89+
<NumberInput
90+
placeholder="Xmin"
91+
bind:value={$optionsStore.xAxis.domain.min}
92+
/>
93+
<NumberInput
94+
placeholder="Xmax"
95+
bind:value={$optionsStore.xAxis.domain.max}
96+
/>
97+
<NumberInput
98+
placeholder="Ymin"
99+
bind:value={$optionsStore.yAxis.domain.min}
112100
/>
113-
{:else}
114-
<div class="fplt-empty"><i>No data</i></div>
115-
{/each}
101+
<NumberInput
102+
placeholder="Ymax"
103+
bind:value={$optionsStore.yAxis.domain.max}
104+
/>
105+
</SettingItem>
106+
<SettingItem name="Disable Zoom">
107+
<Switch bind:checked={$optionsStore.disableZoom} />
108+
</SettingItem>
109+
<SettingItem name="Show Grid">
110+
<Switch bind:checked={$optionsStore.grid} />
111+
</SettingItem>
116112
</div>
117-
<div class="fplt-add">
118-
<Button on:click={newDataItem}>
119-
<IconWrapper style="margin-right: 0.5em">
120-
<Plus />
121-
</IconWrapper>
122-
Add data
123-
</Button>
113+
</div>
114+
<div class="fplt-data">
115+
Data
116+
<div class="fplt-fns-container">
117+
<div class="fplt-list">
118+
{#each $optionsStore.data as datum}
119+
<Function
120+
bind:datum
121+
unmount={() => {
122+
$optionsStore.data = $optionsStore.data.filter(
123+
(val) => val.id != datum.id
124+
);
125+
}}
126+
/>
127+
{:else}
128+
<div class="fplt-empty"><i>No data</i></div>
129+
{/each}
130+
</div>
131+
<div class="fplt-add">
132+
<Button on:click={newDataItem}>
133+
<IconWrapper style="margin-right: 0.5em">
134+
<Plus />
135+
</IconWrapper>
136+
Add data
137+
</Button>
138+
</div>
124139
</div>
125140
</div>
126141
</div>
127-
<div class="fplt-preview" bind:this={$optionsStore.target} />
128-
<div class="fplt-sliders">hi</div>
142+
<div class="fplt-right">
143+
<div class="fplt-preview" bind:this={$optionsStore.target} />
144+
<div class="fplt-sliders">hi</div>
145+
</div>
129146
</div>
130147

131-
<SettingItem style="position:absolute;bottom:0;left:0;right:0">
132-
<Dropdown bind:value={$optionsStore.renderer}>
133-
{#each Object.entries(rendererOptions) as [value, name]}
134-
<option {value}>{name}</option>
135-
{/each}
136-
</Dropdown>
137-
<Button
138-
cta={true}
139-
on:click={() => {
140-
submit($optionsStore);
141-
}}
142-
>
143-
Finish
144-
</Button>
145-
</SettingItem>
148+
<div class="fplt-actionbar">
149+
<SettingItem>
150+
<Dropdown bind:value={$optionsStore.renderer}>
151+
{#each Object.entries(rendererOptions) as [value, name]}
152+
<option {value}>{name}</option>
153+
{/each}
154+
</Dropdown>
155+
<Button
156+
cta={true}
157+
on:click={() => {
158+
submit($optionsStore);
159+
}}
160+
>
161+
Done
162+
</Button>
163+
</SettingItem>
164+
</div>
146165
</div>
147166

148167
<style lang="scss">
149-
.fplt-container {
168+
.fplt-create-modal {
150169
display: grid;
151-
grid-template-columns: initial 1fr;
152-
grid-template-rows: min-content 1fr;
153-
grid-template-areas:
154-
"options preview"
155-
"data sliders";
156-
}
157-
158-
.fplt-options {
159-
grid-area: options;
170+
grid-template-rows: 1fr min-content;
171+
gap: 1em;
172+
height: 100%;
160173
}
161174
162-
.fplt-data {
163-
grid-area: data;
175+
.fplt-container {
176+
min-height: 0;
177+
display: grid;
178+
grid-template-columns: 26em 1fr;
179+
gap: 1em;
180+
height: 100%;
181+
width: 100%;
182+
overflow: hidden;
164183
}
165184
166-
.fplt-preview {
167-
grid-area: preview;
185+
.fplt-left,
186+
.fplt-right {
187+
display: flex;
188+
flex-direction: column;
189+
place-items: stretch start;
190+
gap: 1em;
191+
min-height: 0;
192+
max-height: 100%;
193+
overflow-y: auto;
168194
}
169195
170-
.fplt-sliders {
171-
grid-area: sliders;
196+
.fplt-actionbar {
197+
padding-top: 1em;
198+
border-top: 1px solid var(--background-modifier-border);
199+
height: min-content;
172200
}
173201
174202
.fplt-fns-container {
175203
display: flex;
176204
flex-direction: column;
177205
gap: 1em;
178206
}
207+
208+
.fplt-add {
209+
display: flex;
210+
flex-direction: row;
211+
place-items: center;
212+
}
179213
</style>

‎src/components/Primitives/SettingItem.svelte‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<script lang="ts">
22
export let name: string = "",
3-
description: string = "",
4-
style = "";
3+
description: string = "";
54
</script>
65

7-
<div class="setting-item" {style}>
6+
<div class="setting-item">
87
<div class="setting-item-info">
98
<div class="setting-item-name">{name}</div>
109
<div class="setting-item-description">{description}</div>

‎src/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
aspect-ratio: 3/2;
33
width: initial;
44
height: min(50em, 100%);
5+
overflow: hidden;
56
}

0 commit comments

Comments
 (0)