Skip to content

Commit

Permalink
chore: tidy up
Browse files Browse the repository at this point in the history
  • Loading branch information
@braebo
braebo committed May 17, 2024
1 parent c720a33 commit 5ef81bf
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 84 deletions.
104 changes: 40 additions & 64 deletions src/lib/gui/Gui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,40 +40,47 @@ export interface GuiElements {

export interface GuiOptions {
__type?: 'GuiOptions'

/**
* The title of the Gui.
* @defaultValue 'gooey'
*/
title?: string

/**
* Defines which properties to persist in localStorage, and under which
* key, if any. If `true`, the {@link GUI_STORAGE_DEFAULTS} will be used.
* If `false`, no state will be persisted.
* @defaultValue false
*/
storage?: boolean | Partial<GuiStorageOptions>

/**
* The container to append the gui to.
* @defaultValue document.body
*/
container?: HTMLElement

/**
* The title of the theme to use for the gui. To add your own themes,
* use {@link themerOptions.themes}.
* @defaultValue 'default'
*/
theme?: GuiTheme

/**
* Optional {@link Themer} instance for syncing the gui's theme
* with your app's theme. If `true`, a new themer will be created
* for you. If `false` or `undefined`, no themer will be created.
* @defaultValue true
*/
themer: Themer | boolean

/**
* Options for the {@link Themer} instance when `themer` is `true`.
*/
themerOptions: Partial<ThemerOptions>

/**
* {@link WindowManager} controls behaviors like dragging, resizing, and
* z-index management. This option can be:
Expand All @@ -83,12 +90,14 @@ export interface GuiOptions {
* @defaultValue true
*/
windowManager?: boolean | WindowManager

/**
* Options for the {@link WindowManager} instance when `windowManager` is
* `true`. They will be merged with the {@link WINDOWMANAGER_DEFAULTS}.
* @defaultValue {@link GUI_WINDOWMANAGER_DEFAULTS}
*/
windowManagerOptions?: Partial<WindowManagerOptions>

/**
* The gui's initial position on the screen. If `undefined`, the gui will
* be placed in the top-right corner of the screen.
Expand All @@ -98,33 +107,31 @@ export interface GuiOptions {
* @defaultValue 'top-right'
*/
position?: Placement | { x: number; y: number }

/**
* Additional options when using a {@link Placement} string for `position`
* instead of an explicit {x, y} object.
* @defaultValue { margin: 16, bounds: 'window' } // todo - Update the defaults.
*/
positionOptions?: Partial<PlacementOptions>

/**
* The initial expanded state of the gui.
* @defaultValue `false`
*/
closed?: boolean

/**
* Presets to make available in the gui.
* @defaultValue `[]`
*/
presets?: GuiPreset[]

/**
* The default preset to load when the gui is created, or the initial gui state if undefined.
* @defaultValue `undefined`
*/
defaultPreset?: GuiPreset
// /**
// * `parentFolder` should always be `undefined` for the root gui.
// * @private
// * @internal
// */
// _parentFolder: undefined
/**
* A unique id for the gui's root element.
* @defaultValue {@link nanoid}
Expand All @@ -134,33 +141,39 @@ export interface GuiOptions {

export interface GuiStorageOptions {
__type?: 'GuiStorageOptions'

/**
* Prefix to use for localStorage keys.
* @defaultValue "fractils::gui"
*/
key: string

/**
* Whether to persist the folder's expanded state.
* @defaultValue true
*/
closed?: boolean

/**
* Whether to persist the theme.
* @defaultValue true
*/
theme?: boolean

/**
* Whether to persist the gui's position.
* @defaultValue false
* /// todo - implement this!
* /// todo - implement this! // edit - I think this works now, no?
*/
position?: boolean

/**
* Whether to persist the gui's size.
* @defaultValue false
* /// todo - implement this!
* /// todo - implement this! // edit - I think this works now, no?
*/
size?: boolean

/**
* Whether to persist the gui's presets.
* @defaultValue true
Expand Down Expand Up @@ -211,8 +224,6 @@ export const GUI_WINDOWMANAGER_DEFAULTS = {
export const GUI_DEFAULTS: GuiOptions = {
__type: 'GuiOptions',
title: 'gui',
// controls: new Map(),
// children: [],
themer: true,
themerOptions: {
localStorageKey: 'fracgui::themer',
Expand Down Expand Up @@ -259,7 +270,6 @@ export class Gui {
* Whether the gui root folder is currently collapsed.
*/
closed: PrimitiveState<boolean>
// closedMap: State<Map<string, boolean>> // todo

/**
* The {@link PresetManager} instance for the gui.
Expand Down Expand Up @@ -349,7 +359,6 @@ export class Gui {
this._log.fn('constructor').info({ options, opts })

const undo = (e: KeyboardEvent) => {
// todo - make sure the active element is within the gui first
if (!e.metaKey || e.key !== 'z') return
e.preventDefault()
e.shiftKey ? this.undoManager.redo() : this.undoManager.undo()
Expand All @@ -368,34 +377,9 @@ export class Gui {
? (storageOpts.key += `::${opts.title?.toLowerCase().replaceAll(/\s/g, '-')}::closed`)
: ''

// const closedMapKey =
// storageOpts && storageOpts.closed
// ? (storageOpts.key += `::${opts.title?.toLowerCase().replaceAll(/\s/g, '-')}::closed-map`)
// : ''

this.closed = state(!!this.opts.closed, {
key: closedKey,
// (storageOpts &&
// storageOpts.key +
// `::${opts.title?.toLowerCase().replaceAll(/\s/g, '-')}::closed`) ||
// '',
})

// todo - Finish this whole "deep expanded persistence" thing with `closedMap`
// this.closedMap = state(new Map(), {
// key: closedMapKey,
// // key:
// // (storageOpts &&
// // storageOpts.key +
// // `::${opts.title?.toLowerCase().replaceAll(/\s/g, '-')}::closed-map`) ||
// // '',
// })

// this.closedMap.setKey(this.title, this.closed.value)
// todo - We will need to emit a close/open event from `Folder`, and listen for it here.
// this.closedMap.subscribe(map => {
// this.closed.set(!!map.get(this.title))
// })
//⌟

this.folder.elements.toolbar.settingsButton = this._createSettingsButton(
Expand Down Expand Up @@ -423,12 +407,7 @@ export class Gui {
// }
//⌟

// if (this.closed.value) this.close()

//· Reveal Animation ·················································¬

this._reveal()
//⌟

return this
}
Expand Down Expand Up @@ -474,6 +453,18 @@ export class Gui {
) {
if (this.windowManager) return this.windowManager

// Use the provided window manager if it's an instance.
if (options?.windowManager instanceof WindowManager) {
const windowManager = options.windowManager

windowManager.add(this.folder.element, {
id: this.folder.id,
...this.opts.windowManagerOptions,
})

return windowManager
}

const dragOpts = resolveOpts<DraggableOptions>(
(this.opts.windowManagerOptions as WindowManagerOptions)['draggable'],
DRAGGABLE_DEFAULTS,
Expand All @@ -491,20 +482,6 @@ export class Gui {
resizeOpts.bounds = this.container
}

// Use the provided window manager if it's an instance.
if (options?.windowManager instanceof WindowManager) {
const windowManager = options.windowManager

windowManager.add(this.folder.element, {
id: this.folder.id,
...this.opts.windowManagerOptions,
// draggable: dragOpts,
// resizable: resizeOpts,
})

return windowManager
}

const windowManagerOpts = resolveOpts<WindowManagerOptions>(
this.opts.windowManagerOptions as WindowManagerOptions,
WINDOWMANAGER_DEFAULTS,
Expand Down Expand Up @@ -590,6 +567,7 @@ export class Gui {
* The title of the preset.
*/
title: string,

/**
* A unique id for the preset.
* @defaultValue {@link nanoid|nanoid(10)}
Expand Down Expand Up @@ -638,10 +616,8 @@ export class Gui {

if (themer === true) {
themerOptions.wrapper = this.wrapper
// this.themer = new Themer(this.folder.root.element, themerOptions)
finalThemer = new Themer(this.folder.element, themerOptions)
} else {
// this.themer = themer
finalThemer = themer
}

Expand Down Expand Up @@ -715,15 +691,15 @@ export class Gui {
}

applyAltStyle(folder: Folder) {
this.setProp(
this._setProp(
folder.elements.content,
`box-shadow`,
`0px 0px 10px 0px hsl(10deg, 0%, var(--${VAR_PREFIX}-shadow-lightness), inset`,
)

switch (this.themer?.activeMode) {
case 'light': {
this.setProps(folder.element, [
this._setProps(folder.element, [
['input-container_background', `rbga(var(--${VAR_PREFIX}-bg-b-rgb), 0.75)`],
['input-container_color', `var(--${VAR_PREFIX}-fg-b)`],
['folder-header_background', `rgba(var(--${VAR_PREFIX}-bg-a-rgb), 0.6)`],
Expand All @@ -732,7 +708,7 @@ export class Gui {
break
}
case 'dark': {
this.setProps(folder.element, [
this._setProps(folder.element, [
['input-container_background', `var(--${VAR_PREFIX}-bg-b)`],
['input-container_color', `var(--${VAR_PREFIX}-fg-b)`],
['folder-header_background', `rgba(var(--${VAR_PREFIX}-bg-a-rgb), 0.75)`],
Expand All @@ -746,17 +722,17 @@ export class Gui {
}
}

setProp(el: HTMLElement, key: keyof PropertiesHyphen | (string & {}), value: string) {
private _setProp(el: HTMLElement, key: keyof PropertiesHyphen | (string & {}), value: string) {
el.style.setProperty(`--${VAR_PREFIX}-${key}`, value)
Promise.resolve().then(() => {
if (!el.style.getPropertyValue(`--${VAR_PREFIX}-${key}`)) {
console.warn(`No property found for --${VAR_PREFIX}-${key}`)
}
})
}
setProps(el: HTMLElement, props: [keyof PropertiesHyphen | (string & {}), string][]) {
private _setProps(el: HTMLElement, props: [keyof PropertiesHyphen | (string & {}), string][]) {
for (const [key, value] of props) {
this.setProp(el, key, value)
this._setProp(el, key, value)
}
}

Expand Down
12 changes: 1 addition & 11 deletions src/lib/gui/PresetManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@ export class PresetManager {
set(value: GuiPreset) {
this._log.fn('set').info({ value, this: this })
this.activePreset.set(value)
// this._refresh()
}

private _renamePreset(title: string) {
Expand All @@ -124,17 +123,11 @@ export class PresetManager {

active.title = title
this.activePreset.set(active)
// presets.set(this.activePreset.value.presetId, preset)
// presets = presets.map(p => (p.id === active.id ? active : p))
// return presets

return presets.map(p => (p.id === active.id ? active : p))
})

// this._presetsInput?.refresh()
this._refresh()

// todo - save and restore cursor position?
}

private _resolveUnusedTitle(title: string) {
Expand Down Expand Up @@ -174,8 +167,7 @@ export class PresetManager {

const presetsFolder = parentFolder.addFolder({
title: 'presets',
//! closed: true,
closed: false,
closed: true,
hidden: true,
children: [],
})
Expand Down Expand Up @@ -512,8 +504,6 @@ export class PresetManager {
this._presetsInput.select.disableClicks = true
el.setAttribute('contenteditable', 'true')
el.focus()

// Move the cursor to the end of the text
const range = document.createRange()
range.selectNodeContents(el)
range.collapse(false)
Expand Down
Loading

0 comments on commit 5ef81bf

Please sign in to comment.