settings.ts

examples/fxedit/settings.ts · raw · open the example · all examples · site home

Exports: EditorSettingsdefaultSettingsloadSettingssaveSettings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// Editor settings, saved in localStorage ("radix-fxedit"): the theme, motion
// (per theme, so each look keeps its tuning), flow speed, sound, layout.
import { THEMES, type MotionPreset, type ThemeName } from "./themes.js";

export interface EditorSettings {
  theme: ThemeName;
  // No springs: everything jumps to where it goes
  instant: boolean;
  motion: Record<ThemeName, MotionPreset>;
  // Flow preview cycles per second
  flowSpeed: number;
  muted: boolean;
  volume: number;
  // Editor pane width as a fraction of the window
  split: number;
  // Render at the display's pixel ratio (up to 2) instead of 1: objects,
  // and scene-scale scans (on by default)
  hiDpi: boolean;
  hiDpiScenes: boolean;
  layerSpacing: number;
  nodeSpacing: number;
}

const KEY = "radix-fxedit";

export function defaultSettings(): EditorSettings {
  return {
    theme: "glass",
    instant: false,
    motion: {
      neon: { ...THEMES.neon.motion },
      toybox: { ...THEMES.toybox.motion },
      glass: { ...THEMES.glass.motion },
    },
    flowSpeed: 0.7,
    muted: true,
    volume: 0.5,
    split: 0.56,
    hiDpi: false,
    hiDpiScenes: true,
    layerSpacing: 48,
    nodeSpacing: 22,
  };
}

export function loadSettings(): EditorSettings {
  const settings = defaultSettings();
  try {
    const saved = JSON.parse(localStorage.getItem(KEY) ?? "{}") as Partial<EditorSettings>;
    const { motion, ...rest } = saved;
    Object.assign(settings, rest);
    for (const name of Object.keys(settings.motion) as ThemeName[]) {
      Object.assign(settings.motion[name], motion?.[name]);
    }
    if (!(settings.theme in THEMES)) {
      settings.theme = "glass";
    }
  } catch {
    // Unreadable settings: the defaults
  }
  return settings;
}

export function saveSettings(settings: EditorSettings) {
  try {
    localStorage.setItem(KEY, JSON.stringify(settings));
  } catch {
    // Private mode or full storage: settings last for this page only
  }
}