Skip to content

Commit

Permalink
Add props and control sliders for ambient and directional lighting to…
Browse files Browse the repository at this point in the history 
… `Structure` (#45)

* add controls directional_light = 2, ambient_light = 1.2, show_full_controls = false

* ask user before deleting existing generated emmet pydantic models->TS types

* update deps
  • Loading branch information
@janosh
janosh authored Jan 15, 2024
1 parent 770ffbf commit 72326b6
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 73 deletions.
67 changes: 34 additions & 33 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@
"update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
},
"dependencies": {
"@iconify/svelte": "^3.1.4",
"@sveltejs/kit": "^1.27.1",
"@threlte/core": "6.1.0",
"@threlte/extras": "7.5.0",
"@iconify/svelte": "^3.1.6",
"@sveltejs/kit": "^2.3.2",
"@threlte/core": "7.0.12",
"@threlte/extras": "8.1.2",
"d3": "^7.8.5",
"d3-array": "^3.2.4",
"d3-color": "^3.1.0",
Expand All @@ -36,45 +36,46 @@
"d3-scale-chromatic": "^3.0.0",
"d3-shape": "^3.2.0",
"highlight.js": "^11.9.0",
"svelte": "4.2.2",
"svelte": "4.2.8",
"svelte-multiselect": "^10.2.0",
"three": "^0.158.0",
"svelte-zoo": "^0.4.9"
"svelte-zoo": "^0.4.9",
"three": "^0.160.0"
},
"devDependencies": {
"@playwright/test": "^1.39.0",
"@sveltejs/adapter-static": "2.0.3",
"@sveltejs/package": "^2.2.2",
"@types/d3-array": "^3.0.9",
"@types/d3-color": "^3.1.2",
"@types/d3-interpolate-path": "^2.0.2",
"@types/d3-scale": "^4.0.6",
"@types/d3-scale-chromatic": "^3.0.1",
"@types/d3-shape": "^3.1.4",
"@types/three": "^0.158.0",
"@typescript-eslint/eslint-plugin": "^6.9.0",
"@typescript-eslint/parser": "^6.9.0",
"@vitest/coverage-v8": "^0.34.6",
"eslint": "^8.52.0",
"eslint-plugin-svelte": "^2.34.0",
"@playwright/test": "^1.40.1",
"@sveltejs/adapter-static": "3.0.1",
"@sveltejs/package": "^2.2.5",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@types/d3-array": "^3.2.1",
"@types/d3-color": "^3.1.3",
"@types/d3-interpolate-path": "^2.0.3",
"@types/d3-scale": "^4.0.8",
"@types/d3-scale-chromatic": "^3.0.3",
"@types/d3-shape": "^3.1.6",
"@types/three": "^0.160.0",
"@typescript-eslint/eslint-plugin": "^6.18.1",
"@typescript-eslint/parser": "^6.18.1",
"@vitest/coverage-v8": "^1.2.0",
"eslint": "^8.56.0",
"eslint-plugin-svelte": "^2.35.1",
"hastscript": "^8.0.0",
"jsdom": "^22.1.0",
"jsdom": "^23.2.0",
"mdsvex": "^0.11.0",
"mdsvexamples": "^0.4.1",
"prettier": "^3.0.3",
"prettier-plugin-svelte": "^3.0.3",
"rehype-autolink-headings": "^7.0.0",
"prettier": "^3.2.2",
"prettier-plugin-svelte": "^3.1.2",
"rehype-autolink-headings": "^7.1.0",
"rehype-katex-svelte": "^1.2.0",
"rehype-slug": "^6.0.0",
"remark-math": "3.0.0",
"sharp": "^0.32.6",
"svelte-check": "^3.5.2",
"svelte-preprocess": "^5.0.4",
"sharp": "^0.33.2",
"svelte-check": "^3.6.3",
"svelte-preprocess": "^5.1.3",
"svelte-toc": "^0.5.6",
"svelte2tsx": "^0.6.23",
"typescript": "5.2.2",
"vite": "^4.5.0",
"vitest": "^0.34.6"
"svelte2tsx": "^0.7.0",
"typescript": "5.3.3",
"vite": "^5.0.11",
"vitest": "^1.2.0"
},
"keywords": [
"svelte",
Expand Down
14 changes: 10 additions & 4 deletions src/emmet_pydantic_to_ts.py
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"""Generate TypeScript definitions for all Emmet pydantic models."""

import os
import pkgutil
import shutil
Expand All @@ -6,22 +8,25 @@
import emmet.core as emmet
from pydantic import BaseModel
from pydantic2ts import generate_typescript_defs
from tqdm import tqdm

__author__ = "Janosh Riebesell"
__date__ = "2024-07-11"

# Set to keep track of written types
written_types = {"Element"}
written_files: set[str] = set()

this_dir = os.path.dirname(__file__)
shutil.rmtree(f"{this_dir}./types", ignore_errors=True)
if input(f"Delete existing types in {this_dir}/types? [y/n] ").lower() == "y":
shutil.rmtree(f"{this_dir}/types", ignore_errors=True)
os.makedirs(f"{this_dir}/types", exist_ok=True)

modules = pkgutil.walk_packages(
path=emmet.__path__, prefix=emmet.__name__ + ".", onerror=lambda: None
)
modules = list(modules)

# Generate TypeScript definitions for each submodule
for _, mod_name, _ in tqdm(modules, desc="pydantic2ts"):
for idx, (mod_path, mod_name, is_pkg) in enumerate(modules):
if mod_name.startswith("_"):
continue
output_file = mod_name.split(".")[-1]
Expand All @@ -33,6 +38,7 @@
if issubclass(obj, BaseModel)
}
if not models: # skip modules without Pydantic models
print(f"{mod_name}: no pydantic models found {is_pkg=} {mod_path=}")
continue

# Generate TypeScript definitions for all Pydantic models in the current module
Expand Down
113 changes: 79 additions & 34 deletions src/lib/structure/Structure.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,9 @@
export let bond_color: string = `#ffffff` // must be hex code for <input type='color'>
export let style: string | null = null
export let show_image_atoms: boolean = true
export let directional_light: number = 2
export let ambient_light: number = 1.2
export let show_full_controls: boolean = false
// interactivity()
$: $element_colors = element_color_schemes[color_scheme]
Expand Down Expand Up @@ -222,6 +225,11 @@
<input type="checkbox" bind:checked={show_image_atoms} />
image atoms
</label>
<!-- add a toggle that's to show or hide the full currently visible set of controls. it should be off by default in which case only the controls the user is most likely to need are shown -->
<label>
<input type="checkbox" bind:checked={show_full_controls} />
full controls
</label>
<label>
<input type="checkbox" bind:checked={show_site_labels} />
site labels
Expand Down Expand Up @@ -252,9 +260,8 @@
</span>
</label>

<hr />

{#if show_cell}
{#if show_full_controls && show_cell}
<hr />
<label>
Unit cell opacity
<input type="number" min={0} max={1} step={0.05} bind:value={cell_opacity} />
Expand Down Expand Up @@ -313,35 +320,68 @@

<hr />

<label>
Auto rotate speed
<input type="number" min={0} max={2} step={0.01} bind:value={auto_rotate} />
<input type="range" min={0} max={2} step={0.01} bind:value={auto_rotate} />
</label>
<label>
Zoom speed
<input type="number" min={0} max={2} step={0.01} bind:value={zoom_speed} />
<input type="range" min={0} max={2} step={0.01} bind:value={zoom_speed} />
</label>
<label>
<Tooltip text="pan by clicking and dragging while holding cmd, ctrl or shift">
Pan speed
</Tooltip>
<input type="number" min={0} max={2} step={0.01} bind:value={pan_speed} />
<input type="range" min={0} max={2} step={0.01} bind:value={pan_speed} />
</label>
<!-- rotation damping -->
<label>
<Tooltip text="damping factor for rotation">Rotation damping</Tooltip>
<input
type="number"
min={0}
max={0.3}
step={0.01}
bind:value={rotation_damping}
/>
<input type="range" min={0} max={0.3} step={0.01} bind:value={rotation_damping} />
</label>
{#if show_full_controls}
<label>
Auto rotate speed
<input type="number" min={0} max={2} step={0.01} bind:value={auto_rotate} />
<input type="range" min={0} max={2} step={0.01} bind:value={auto_rotate} />
</label>
<label>
Zoom speed
<input type="number" min={0} max={2} step={0.01} bind:value={zoom_speed} />
<input type="range" min={0} max={2} step={0.01} bind:value={zoom_speed} />
</label>
<label>
<Tooltip text="pan by clicking and dragging while holding cmd, ctrl or shift">
Pan speed
</Tooltip>
<input type="number" min={0} max={2} step={0.01} bind:value={pan_speed} />
<input type="range" min={0} max={2} step={0.01} bind:value={pan_speed} />
</label>
<!-- directional light intensity -->
<label>
<Tooltip text="intensity of the directional light">Directional light</Tooltip>
<input
type="number"
min={0}
max={4}
step={0.01}
bind:value={directional_light}
/>
<input
type="range"
min={0}
max={4}
step={0.01}
bind:value={directional_light}
/>
</label>
<!-- ambient light intensity -->
<label>
<Tooltip text="intensity of the ambient light">Ambient light</Tooltip>
<input type="number" min={0} max={2} step={0.01} bind:value={ambient_light} />
<input type="range" min={0} max={2} step={0.01} bind:value={ambient_light} />
</label>
<!-- rotation damping -->
<label>
<Tooltip text="damping factor for rotation">Rotation damping</Tooltip>
<input
type="number"
min={0}
max={0.3}
step={0.01}
bind:value={rotation_damping}
/>
<input
type="range"
min={0}
max={0.3}
step={0.01}
bind:value={rotation_damping}
/>
</label>
{/if}

<!-- color scheme -->
<label>
Color scheme
Expand Down Expand Up @@ -382,6 +422,8 @@
bind:same_size_atoms
{bonding_strategy}
{rotation_damping}
{directional_light}
{ambient_light}
>
<slot slot="atom-label" name="atom-label" let:elem>
<!-- let:elem needed to fix false positive eslint no-undef -->
Expand All @@ -407,7 +449,7 @@
<style>
.structure {
position: relative;
container-type: inline-size;
container-type: size;
height: var(--struct-height, 500px);
width: var(--struct-width);
max-width: var(--struct-max-width);
Expand Down Expand Up @@ -452,7 +494,8 @@
opacity: 0;
gap: var(--struct-controls-gap, 4pt);
text-align: var(--struct-controls-text-align, left);
transition: visibility var(--struct-controls-transition-duration),
transition:
visibility var(--struct-controls-transition-duration),
opacity var(--struct-controls-transition-duration);
box-sizing: border-box;
top: var(--struct-controls-top, 30pt);
Expand All @@ -463,6 +506,8 @@
width: var(--struct-controls-width, 20em);
max-width: var(--struct-controls-max-width, 90cqw);
color: var(--struct-controls-text-color);
overflow: auto;
max-height: var(--struct-controls-max-height, calc(100cqh - 3em));
}
dialog.controls hr {
border: none;
Expand Down
6 changes: 4 additions & 2 deletions src/lib/structure/StructureScene.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@
}
// field of view of the camera. 50 is THREE.js default
export let fov: number = 50
export let ambient_light: number = 1.2
export let directional_light: number = 2
$: hovered_site = structure?.sites?.[hovered_idx ?? -1] ?? null
$: active_site = structure?.sites?.[active_idx ?? -1] ?? null
Expand Down Expand Up @@ -96,8 +98,8 @@
/>
</T.PerspectiveCamera>

<T.DirectionalLight position={[3, 10, 10]} intensity={1} />
<T.AmbientLight intensity={0.5} />
<T.DirectionalLight position={[3, 10, 10]} intensity={directional_light} />
<T.AmbientLight intensity={ambient_light} />

{#if show_atoms && structure?.sites}
<InstancedMesh>
Expand Down

0 comments on commit 72326b6

Please sign in to comment.