diff --git a/src/lib/ScatterPlot.svelte b/src/lib/ScatterPlot.svelte
index 086cfea..5289fae 100644
--- a/src/lib/ScatterPlot.svelte
+++ b/src/lib/ScatterPlot.svelte
@@ -58,7 +58,6 @@
hovered = true
// returns point to right of our current mouse position
-
let idx = bisect(data, x_scale.invert(event.offsetX))
if (idx < data.length) {
diff --git a/src/lib/Structure.svelte b/src/lib/Structure.svelte
index e2d5ba7..78d1f33 100644
--- a/src/lib/Structure.svelte
+++ b/src/lib/Structure.svelte
@@ -17,6 +17,14 @@
export let show_controls: boolean = false
// TODO whether to make the canvas fill the whole screen
// export let fullscreen: boolean = false
+ // whether to show the structure's lattice cell as a wireframe
+ export let show_cell: 'surface' | 'wireframe' | null = 'wireframe'
+ // the control panel DOM element
+ export let controls: HTMLElement | null = null
+ // the button to toggle the control panel
+ export let toggle_controls_btn: HTMLButtonElement | null = null
+ // cell opacity
+ export let cell_opacity: number | undefined = undefined
function on_keydown(event: KeyboardEvent) {
if (event.key === 'Escape') {
@@ -24,34 +32,34 @@
}
}
- let tooltip = { visible: false, content: '', x: 0, y: 0 }
-
- function on_mouse_enter(event, position, element) {
- console.log(`event`, event)
-
- const { clientX, clientY } = event.detail.event
- tooltip.visible = true
- tooltip.content = `${element} - (${position.join(', ')})`
- tooltip.x = clientX
- tooltip.y = clientY
- }
-
- function on_mouse_leave() {
- tooltip.visible = false
- }
+ $: ({ a, b, c } = structure.lattice)
- const lattice = structure.lattice.matrix
+ const on_window_click =
+ (node: (HTMLElement | null)[], cb: () => void) => (event: MouseEvent) => {
+ if (!node || !event.target) return
- $: ({ a, b, c } = structure.lattice)
+ if (node && !node.some((n) => n?.contains(event.target as Node))) {
+ cb()
+ }
+ }
-
+ {
+ if (show_controls) show_controls = false
+ })}
+/>
-
@@ -130,7 +137,7 @@
top: 5pt;
right: 5pt;
background-color: rgba(255, 255, 255, 0.2);
- padding: 2em 5pt 0;
+ padding: 2em 6pt 3pt;
border-radius: 3pt;
visibility: hidden;
opacity: 0;
@@ -141,13 +148,10 @@
visibility: visible;
opacity: 1;
}
-
- .tooltip {
- position: absolute;
- background-color: rgba(0, 0, 0, 0.7);
+ select {
+ margin-left: 5pt;
color: white;
- padding: 5px;
- border-radius: 5px;
- pointer-events: none;
+ /* transparent */
+ background-color: rgba(255, 255, 255, 0.2);
}
diff --git a/src/lib/StructureCard.svelte b/src/lib/StructureCard.svelte
index 2bc679d..777e1a1 100644
--- a/src/lib/StructureCard.svelte
+++ b/src/lib/StructureCard.svelte
@@ -47,6 +47,12 @@
{pretty_num(alpha)}°, {pretty_num(beta)}°, {pretty_num(gamma)}°
+ {#if structure?.charge}
+
+ Charge:
+ {pretty_num(structure?.charge)}
+
+ {/if}
```
diff --git a/src/site/DemoNav.svelte b/src/site/DemoNav.svelte
index f91e4be..0b88d6a 100644
--- a/src/site/DemoNav.svelte
+++ b/src/site/DemoNav.svelte
@@ -25,6 +25,7 @@
margin: 1em auto 3em;
max-width: 45em;
flex-wrap: wrap;
+ font-size: 14pt;
}
nav > a {
padding: 0 4pt;
diff --git a/vite.config.ts b/vite.config.ts
index 87fac59..749b8ed 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -26,6 +26,10 @@ export default {
port: 3000,
},
+ ssr: {
+ noExternal: [`three`],
+ },
+
preview: {
port: 3000,
},