dazscript-framework 0.3.2 → 1.0.1

package/src/examples/06-showcase-dialog.ts

@@ -0,0 +1,518 @@
+import { BasicDialog } from '@dsf/dialog/basic-dialog'
+import { PopupMenuItem } from '@dsf/dialog/builders/popup-menu-builder'
+import { getDataItem } from '@dsf/helpers/list-view-helper'
+import { AppSettings } from '@dsf/lib/settings'
+import { Observable } from '@dsf/lib/observable'
+import { TreeNode } from '@dsf/lib/tree-node'
+import { config } from './config'
+
+// Types
+
+export interface SceneObject {
+    id: number
+    name: string
+    type: 'Figure' | 'Prop' | 'Light' | 'Camera' | 'Group'
+    visible: boolean
+    locked: boolean
+}
+
+// Settings (all persisted via DzAppSettings)
+
+export class ShowcaseDialogSettings extends AppSettings {
+    constructor() {
+        super(`${config.author}/06-ShowcaseDialog`)
+    }
+
+    // Objects tab
+    activeTab$     = this.bindInt('activeTab$', 0)
+    flatList$      = this.bindBoolean('flatList$', false)
+    showIcons$     = this.bindBoolean('showIcons$', true)
+    showVisibleOnly$ = this.bindBoolean('showVisibleOnly$', false)
+    splitterState$ = this.bindString('splitterState$', '')
+    filterType$    = this.bindString('filterType$', 'All')
+
+    // Settings tab - Render
+    quality$   = this.bindString('quality$', 'Standard')
+    samples$   = this.bindInt('samples$', 64)
+    scale$     = this.bindFloat('scale$', 1.0)
+
+    // Settings tab - Export
+    exportFormat$ = this.bindString('exportFormat$', 'JSON')
+    outputPath$   = this.bindString('outputPath$', '')
+    autoSave$     = this.bindBoolean('autoSave$', false)
+
+    // Settings tab - Behaviour
+    notifications$ = this.bindBoolean('notifications$', true)
+    logLevel$      = this.bindString('logLevel$', 'Info')
+
+    // About tab
+    showFilters$ = this.bindBoolean('showFilters$', false)
+}
+
+// Model
+
+export class ShowcaseDialogModel {
+    readonly settings = new ShowcaseDialogSettings()
+
+    objects$        = new Observable<TreeNode<SceneObject>[]>([])
+    selectedObject$ = new Observable<SceneObject>()
+    refreshObjects$ = new Observable<void>()
+    keywords$       = new Observable('')
+    logEntries$     = new Observable<string[]>([])
+    sceneStats$     = new Observable('')
+    selectedSummary$ = new Observable('No object selected')
+
+    // Detail panel fields - updated externally when selectedObject$ changes
+    detailName$    = new Observable('')
+    detailType$    = new Observable('')
+    detailVisible$ = new Observable(false)
+    detailLocked$  = new Observable(false)
+}
+
+// Dialog
+
+export class ShowcaseDialog extends BasicDialog {
+    private sceneListView: DzListView | null = null
+
+    constructor(private readonly model: ShowcaseDialogModel) {
+        super('06 Showcase Dialog', `${config.author}/06-ShowcaseDialog`)
+    }
+
+    protected build(): void {
+        let add      = this.add
+        let settings = this.model.settings
+
+        this.builder.options({ resizable: true, width: 780, height: 640 })
+        this.dialog.setAcceptButtonText('Apply')
+        this.dialog.setCancelButtonText('Close')
+
+        this.connectInteractions()
+
+        // Active tab index persists across runs via bindInt.
+        add.tab('Objects').bind(settings.activeTab$).build(() => {
+            this.buildObjectsTab()
+        })
+        add.tab('Settings').build(() => {
+            this.buildSettingsTab()
+        })
+        add.tab('About').build(() => {
+            this.buildAboutTab()
+        })
+
+        this.updateSceneStats()
+    }
+
+    // Tab 1: Objects
+
+    private buildObjectsTab(): void {
+        let add      = this.add
+        let model    = this.model
+        let settings = model.settings
+
+        // Toolbar row
+        add.group('Search').horizontal().build((layout) => {
+            layout.spacing = 4
+            add.edit()
+                .value(model.keywords$)
+                .placeholder('Filter objects...')
+                .focus()
+            add.label('Type:')
+            add.combo()
+                .items(['All', 'Figure', 'Prop', 'Light', 'Camera', 'Group'])
+                .selected(settings.filterType$)
+            add.button('Refresh')
+                .clicked(() => model.refreshObjects$.trigger())
+                .toolTip('Reload the object list')
+            add.button('Apply Checked Rows')
+                .clicked(() => this.applyCheckedRows())
+                .toolTip('Copies the list checkbox states back to the scene objects.')
+        })
+
+        add.horizontal((layout) => {
+            layout.spacing = 6
+            add.checkbox('Flat List').value(settings.flatList$)
+            add.checkbox('Show Icons').value(settings.showIcons$)
+            add.checkbox('Visible Only').value(settings.showVisibleOnly$)
+            const statsLabel = add.label(model.sceneStats$.value).build()
+            model.sceneStats$.connect(text => { statsLabel.text = text })
+        })
+
+        // Splitter - position persisted via bindString
+        add.splitter()
+            .state(settings.splitterState$)
+            .strech(2, 1)
+            .items(
+                // Left pane: tree list with filter + context menu
+                add.group().style({ flat: true }).build(() => {
+                    add.list.view<SceneObject, SceneObject>()
+                        .row((item, parent, id) => {
+                            let obj = item.value as SceneObject
+                            let listItem = new DzCheckListItem(parent, item.isLeaf ? DzCheckListItem.CheckBox : DzCheckListItem.CheckBoxController, id)
+                            listItem.selectable = true
+                            listItem.on = obj.visible
+                            return listItem
+                        })
+                        .expanded(true)
+                        .flat(settings.flatList$)
+                        .refresh(model.refreshObjects$)
+                        .items(model.objects$)
+                        .columns(['Visible', 'Name', 'Type', 'Locked'])
+                        .text(item => [
+                            '',
+                            this.getDisplayName(item.value),
+                            item.value?.type ?? '',
+                            item.value?.locked  ? 'Yes' : 'No',
+                        ])
+                        .data(item => item.value)
+                        .selected(model.selectedObject$)
+                        .filter({
+                            keywords: model.keywords$,
+                            field: li => li.text(0),
+                            selectOnFilter: true,
+                            filters: li => {
+                                let obj  = getDataItem<SceneObject>(li)
+                                if (!obj) return true
+                                let type = settings.filterType$.value
+                                let matchesType = type === 'All' || obj.type === type
+                                let matchesVisibility = !settings.showVisibleOnly$.value || obj.visible
+                                return matchesType && matchesVisibility
+                            },
+                        })
+                        .contextMenu((_, li) => {
+                            let obj   = getDataItem<SceneObject>(li)
+                            let label = obj?.name ?? 'item'
+                            let items: PopupMenuItem[] = [
+                                {
+                                    text: `Select "${label}"`,
+                                    activated: () => { /* select in viewport */ },
+                                },
+                                {
+                                    text: obj?.visible ? 'Hide' : 'Show',
+                                    activated: () => {
+                                        if (obj) obj.visible = !obj.visible
+                                        model.refreshObjects$.trigger()
+                                    },
+                                },
+                                { text: '' },   // separator
+                                {
+                                    text: 'Duplicate',
+                                    activated: () => { /* duplicate */ },
+                                },
+                                {
+                                    text: 'Delete',
+                                    activated: () => { /* delete */ },
+                                },
+                            ]
+                            return add.contextMenu().items(...items).build()
+                        })
+                        .build((listView) => {
+                            this.sceneListView = listView
+                            listView.allColumnsShowFocus = true
+                        })
+                }),
+
+                // Right pane: detail panel for selected object
+                add.group('Details').build(() => {
+                    add.horizontal((layout) => {
+                        layout.spacing = 4
+                        add.label('Name:').minWidth(45)
+                        add.edit().readOnly().value(model.detailName$)
+                    })
+                    add.horizontal((layout) => {
+                        layout.spacing = 4
+                        add.label('Type:').minWidth(45)
+                        add.edit().readOnly().value(model.detailType$)
+                    })
+                    add.group('Flags').horizontal().build(() => {
+                        add.checkbox('Visible').value(model.detailVisible$)
+                        add.checkbox('Locked').value(model.detailLocked$)
+                    })
+                    const summaryLabel = add.label(model.selectedSummary$.value).wordWrap().build()
+                    model.selectedSummary$.connect(text => { summaryLabel.text = text })
+                    add.group('Scene Node').build(() => {
+                        // NodeSelection lets the user pick any node from the scene.
+                        add.nodeSelection().build()
+                    })
+                })
+            )
+            .build()
+    }
+
+    // Tab 2: Settings
+
+    private buildSettingsTab(): void {
+        let add      = this.add
+        let settings = this.model.settings
+
+        add.horizontal((layout) => {
+            layout.spacing = 8
+
+            // Left column
+            add.vertical(() => {
+                add.group('Display').build(() => {
+                    add.checkbox('Flat List').value(settings.flatList$)
+                    add.checkbox('Show Icons').value(settings.showIcons$)
+                    add.checkbox('Visible Only').value(settings.showVisibleOnly$)
+                    add.horizontal((layout) => {
+                        layout.spacing = 4
+                        add.label('Object Type:').minWidth(80)
+                        add.combo()
+                            .items(['All', 'Figure', 'Prop', 'Light', 'Camera', 'Group'])
+                            .selected(settings.filterType$)
+                    })
+                })
+
+                // Radio buttons - initialize from persisted quality value;
+                // toggled() writes back when the user picks a different option.
+                add.group('Render Quality').build(() => {
+                    add.radio('Draft')
+                        .value(settings.quality$.value === 'Draft')
+                        .toggled(v => {
+                            if (!v) return
+                            settings.quality$.value = 'Draft'
+                            settings.samples$.value = 16
+                            settings.scale$.value = 0.5
+                        })
+                    add.radio('Standard')
+                        .value(settings.quality$.value === 'Standard')
+                        .toggled(v => {
+                            if (!v) return
+                            settings.quality$.value = 'Standard'
+                            settings.samples$.value = 64
+                            settings.scale$.value = 1.0
+                        })
+                    add.radio('High')
+                        .value(settings.quality$.value === 'High')
+                        .toggled(v => {
+                            if (!v) return
+                            settings.quality$.value = 'High'
+                            settings.samples$.value = 256
+                            settings.scale$.value = 2.0
+                        })
+                })
+            })
+
+            // Right column
+            add.vertical(() => {
+                add.group('Render').build(() => {
+                    add.horizontal((layout) => {
+                        layout.spacing = 4
+                        add.label('Samples:').minWidth(55)
+                        add.slider('integer')
+                            .value(settings.samples$)
+                            .min(1).max(512)
+                            .build()
+                    })
+                    add.horizontal((layout) => {
+                        layout.spacing = 4
+                        add.label('Scale:').minWidth(55)
+                        add.slider('float')
+                            .value(settings.scale$)
+                            .min(0.1).max(5.0)
+                            .build()
+                    })
+                })
+
+                add.group('Export').build(() => {
+                    add.horizontal((layout) => {
+                        layout.spacing = 4
+                        add.label('Output:').minWidth(55)
+                        add.edit()
+                            .value(settings.outputPath$)
+                            .placeholder('Default output path...')
+                    })
+                    add.horizontal((layout) => {
+                        layout.spacing = 4
+                        add.label('Format:').minWidth(55)
+                        // ComboBox - two-way bind to persisted string
+                        add.combo()
+                            .items(['JSON', 'XML', 'CSV'])
+                            .selected(settings.exportFormat$)
+                    })
+                    add.checkbox('Auto Save').value(settings.autoSave$)
+                    add.label('Auto Save enables notifications and switches the log level to Debug.').wordWrap().build()
+                })
+            })
+        })
+
+        // Color pickers - read the final color from the widget on accept
+        add.group('Colors').horizontal().build(() => {
+            add.vertical(() => {
+                add.label('Background:').build()
+                add.color().build()
+            })
+            add.vertical(() => {
+                add.label('Foreground:').build()
+                add.color().build()
+            })
+        })
+
+        add.group('Behaviour').horizontal().build(() => {
+            add.checkbox('Notifications').value(settings.notifications$)
+            add.horizontal((layout) => {
+                layout.spacing = 4
+                add.label('Log Level:')
+                // ComboEdit: user can pick from list OR type a custom level
+                add.comboEdit()
+                    .items(['Debug', 'Info', 'Warning', 'Error'])
+                    .changed(settings.logLevel$)
+            })
+        })
+    }
+
+    // Tab 3: About
+
+    private buildAboutTab(): void {
+        let add      = this.add
+        let model    = this.model
+        let settings = model.settings
+
+        add.group('About This Example').build(() => {
+            add.label([
+                'DAZScript Framework - Showcase Dialog (Example 06)',
+                '',
+                'Widgets demonstrated in this dialog:',
+                '  - Tabs with persisted active-tab index (bindInt)',
+                '  - Splitter with persisted position (bindString)',
+                '  - list.view - columns, keyword filter, custom filters,',
+                '      checkbox rows, context menu, refresh trigger, flat/tree toggle,',
+                '      expanded, data binding, selection binding',
+                '  - list.box - scrollable list with multi-select',
+                '  - GroupBox - vertical / horizontal / flat style / visible toggle',
+                '  - Label - wordWrap, minWidth, alignment',
+                '  - LineEdit - value binding, placeholder, readOnly',
+                '  - CheckBox, RadioButton - Observable two-way binding',
+                '  - Button - clicked, toggle, toolTip',
+                '  - Slider - integer and float with min/max',
+                '  - ColorPicker (DzColorWgt)',
+                '  - ComboBox - items + selected binding',
+                '  - ComboEdit - items + changed/edited binding',
+                '  - NodeSelection combo (scene node picker)',
+                '  - All settings persisted via AppSettings (DzAppSettings)',
+            ].join('\n')).wordWrap(true).build()
+        })
+
+        // Log list - populated externally; demonstrates Observable<string[]> binding
+        add.group('Recent Log').build(() => {
+            add.list.box()
+                .items(model.logEntries$)
+                .mode('single')
+                .build()
+        })
+
+        // Conditional filter row - group visible when showFilters$ is true
+        add.group('Optional Filters').horizontal()
+            .visible(settings.showFilters$)
+            .build(() => {
+                add.label('Tag:').minWidth(30)
+                add.comboEdit()
+                    .items(['render', 'test', 'draft', 'final'])
+                    .build()
+            })
+
+        add.horizontal((layout) => {
+            layout.spacing = 4
+            add.checkbox('Show Filters').value(settings.showFilters$)
+        })
+    }
+
+    private connectInteractions(): void {
+        let model = this.model
+        let settings = model.settings
+
+        settings.filterType$.connect(() => model.refreshObjects$.trigger())
+        settings.showVisibleOnly$.connect(() => model.refreshObjects$.trigger())
+        settings.showIcons$.connect(() => model.refreshObjects$.trigger())
+        settings.flatList$.connect(() => model.refreshObjects$.trigger())
+
+        settings.autoSave$.connect((enabled) => {
+            if (!enabled) return
+            settings.notifications$.value = true
+            settings.logLevel$.value = 'Debug'
+            this.addLog('Auto Save enabled; notifications and Debug logging selected.')
+        })
+
+        model.objects$.connect(() => this.updateSceneStats())
+        model.refreshObjects$.connect(() => this.updateSceneStats())
+
+        model.selectedObject$.connect(obj => {
+            model.selectedSummary$.value = obj
+                ? `${obj.name}: ${obj.type}, ${obj.visible ? 'visible' : 'hidden'}, ${obj.locked ? 'locked' : 'unlocked'}`
+                : 'No object selected'
+        })
+
+        model.detailVisible$.connect((visible) => {
+            let obj = model.selectedObject$.value
+            if (!obj || obj.visible === visible) return
+            obj.visible = visible
+            this.addLog(`${obj.name} visibility changed from the detail checkbox.`)
+            model.refreshObjects$.trigger()
+        })
+
+        model.detailLocked$.connect((locked) => {
+            let obj = model.selectedObject$.value
+            if (!obj || obj.locked === locked) return
+            obj.locked = locked
+            this.addLog(`${obj.name} lock state changed from the detail checkbox.`)
+            model.refreshObjects$.trigger()
+        })
+    }
+
+    private getDisplayName(obj: SceneObject | null): string {
+        if (!obj) return ''
+        if (!this.model.settings.showIcons$.value) return obj.name
+
+        const prefixByType: Record<SceneObject['type'], string> = {
+            Figure: '[F]',
+            Prop: '[P]',
+            Light: '[L]',
+            Camera: '[C]',
+            Group: '[G]',
+        }
+
+        return `${prefixByType[obj.type]} ${obj.name}`
+    }
+
+    private addLog(message: string): void {
+        let entries = this.model.logEntries$.value.slice()
+        entries.push(`[Info]  ${message}`)
+        if (entries.length > 8) entries.shift()
+        this.model.logEntries$.value = entries
+    }
+
+    private updateSceneStats(): void {
+        let objects = this.getAllObjects()
+        let visible = objects.filter(obj => obj.visible).length
+        let locked = objects.filter(obj => obj.locked).length
+        this.model.sceneStats$.value = `${visible}/${objects.length} visible, ${locked} locked`
+    }
+
+    private getAllObjects(): SceneObject[] {
+        let objects: SceneObject[] = []
+        this.model.objects$.value.forEach(root => {
+            root.forEach(node => {
+                if (node.value) objects.push(node.value)
+            })
+        })
+        return objects
+    }
+
+    private applyCheckedRows(): void {
+        if (!this.sceneListView) return
+
+        this.sceneListView.getItems(DzListView.All).forEach(item => {
+            if (!(item as any).inherits('DzCheckListItem')) return
+
+            let obj = getDataItem<SceneObject>(item)
+            if (!obj) return
+
+            let checkbox = item as DzCheckListItem
+            obj.visible = checkbox.state === 0 && !checkbox.on
+                ? false
+                : checkbox.on
+        })
+
+        this.addLog('List checkbox states applied to scene objects.')
+        this.model.refreshObjects$.trigger()
+    }
+}

package/src/helpers/custom-action-helper.ts

@@ -4,6 +4,7 @@ import { mainWindow } from '@dsf/core/global'
 import * as array from '@dsf/helpers/array-helper'
 import { keys } from '@dsf/helpers/object-helper'
 import { progress } from '@dsf/helpers/progress-helper'
+import CustomSet from '@dsf/lib/set'
 import { getMenu } from './menu-helper'
 import { getScriptPath } from './script-helper'
 
@@ -445,7 +446,7 @@ export const installCustomActions = (actions: CustomAction[]) => {
 
 export const uninstallCustomActions = (actions: CustomAction[]) => {
     debug(`Uninstalling Actions`)
-    const toolbarNames = new Set<string>()
+    const toolbarNames = new CustomSet<string>()
 
     actions.forEach(action => {
         if (!action) return

package/src/helpers/custom-action-installer-helper.ts

@@ -10,6 +10,7 @@ import { Observable } from '@dsf/lib/observable'
 import CustomSet from '@dsf/lib/set'
 import { TreeNode } from '@dsf/lib/tree-node'
 import { promptKeyboardShortcut } from '@dsf/shared/set-keyboard-shortcut'
+import { readFromFile } from './file-helper'
 
 type InstallerEntry = {
     action: CustomAction
@@ -28,6 +29,12 @@ type InstallerEntry = {
 type SetupDialogOptions = {
     settingsPath: string
     bundleName?: string
+    shortcutsPath?: string
+}
+
+type ActionAccelerator = {
+    name: string
+    shortcut: string
 }
 
 const OVERRIDE_MARKER = '[ovr]'
@@ -37,6 +44,9 @@ const toKey = (action: CustomAction): string => String(action.filePath ?? action
 const toTreeNode = (entry: InstallerEntry): TreeNode<InstallerEntry> =>
     new TreeNode(String(entry.action.text), toKey(entry.action), entry)
 
+const getEntry = (item: TreeNode<InstallerEntry>): InstallerEntry =>
+    item.value as InstallerEntry
+
 const getDisplayedToolbar = (entry: InstallerEntry): string => String(entry.action.toolbar ?? '')
 
 const getSetupDialogOptions = (options: string | SetupDialogOptions): SetupDialogOptions =>
@@ -123,8 +133,9 @@ class InstallerSelectionDialog extends BasicDialog {
                     .sortOnBuild(true)
                     .refresh(this.refreshListEvent$)
                     .row((item, parent, id) => {
+                        const entry = getEntry(item)
                         const listItem = new DzCheckListItem(parent, DzCheckListItem.CheckBox, id)
-                        listItem.on = item.value.selected
+                        listItem.on = entry.selected
                         listItem.setText(0, '')
                         return listItem
                     })
@@ -139,15 +150,18 @@ class InstallerSelectionDialog extends BasicDialog {
                         if (index === 5) return Math.max(width * 1.2, 140)
                         return width
                     })
-                    .text((item) => [
-                        '',
-                        String(item.value.action.text ?? ''),
-                        getDisplayedShortcut(item.value),
-                        String(item.value.action.description ?? ''),
-                        String(item.value.action.menuPath ?? ''),
-                        getDisplayedToolbar(item.value),
-                    ])
-                    .data((item) => item.value)
+                    .text((item) => {
+                        const entry = getEntry(item)
+                        return [
+                            '',
+                            String(entry.action.text ?? ''),
+                            getDisplayedShortcut(entry),
+                            String(entry.action.description ?? ''),
+                            String(entry.action.menuPath ?? ''),
+                            getDisplayedToolbar(entry),
+                        ]
+                    })
+                    .data((item) => getEntry(item))
                     .filter({
                         keywords: this.keywords$,
                         field: (listItem) => [
@@ -287,6 +301,21 @@ export const showSetupCustomActionsDialog = (actions: CustomAction[], options: s
     const selections = runDialog(actions, settings)
     if (!selections) return
 
+    if (settings.shortcutsPath) {
+        try {
+            const shortcuts = readFromFile<ActionAccelerator[]>(settings.shortcutsPath)
+            if (shortcuts) {
+                progress('Applying Keyboard Shortcuts', shortcuts, (shortcut) => {
+                    if (shortcut.name && shortcut.shortcut) {
+                        setActionShortcut(shortcut.name, shortcut.shortcut)
+                    }
+                })
+            }
+        } catch (e) {
+            debug(`[Setup] Failed to apply shortcuts from ${settings.shortcutsPath}: ${e}`)
+        }
+    }
+
     debug(`[Setup] applying ${selections.filter(selection => selection.selected).length}/${selections.length} selected actions`)
 
     const removedToolbarNames = new CustomSet<string>()