dazscript-framework 0.3.2 → 1.0.2

package/src/examples/05-list-dialog.ts

@@ -0,0 +1,88 @@
+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 { Observable } from '@dsf/lib/observable'
+import { TreeNode } from '@dsf/lib/tree-node'
+
+// Types
+
+export interface FileItem {
+    name: string
+    type: 'folder' | 'file'
+    size: number
+}
+
+// Model
+
+export class ListDialogModel {
+    keywords$     = new Observable('')
+    files$        = new Observable<TreeNode<FileItem>[]>([])
+    selected$     = new Observable<FileItem>()
+    recentFiles$  = new Observable<string[]>([])
+    selectedRecent$ = new Observable<string[]>([])
+}
+
+// Dialog
+
+export class ListDialog extends BasicDialog {
+    constructor(private readonly model: ListDialogModel) {
+        super('05 List View')
+    }
+
+    protected build(): void {
+        let add   = this.add
+        let model = this.model
+
+        this.builder.options({ resizable: true, width: 640, height: 520 })
+
+        // Search bar
+        add.horizontal((layout) => {
+            layout.spacing = 5
+            add.label('Search:').minWidth(50)
+            add.edit()
+                .value(model.keywords$)
+                .placeholder('Filter files...')
+                .focus()
+        })
+
+        // Tree list with context menu and keyword filter
+        add.list.view<FileItem>()
+            .expanded(true)
+            .items(model.files$)
+            .columns(['Name', 'Type', 'Size (KB)'])
+            .text(item => [
+                item.name,
+                item.value?.type ?? '',
+                item.value ? String(Math.round(item.value.size / 1024)) : '',
+            ])
+            .data(item => item.value)
+            .selected(model.selected$)
+            .filter({
+                keywords: model.keywords$,
+                field: li => li.text(0),
+                selectOnFilter: true,
+            })
+            .contextMenu((_, li) => {
+                let file  = getDataItem<FileItem>(li)
+                let label = file?.name ?? 'item'
+                let items: PopupMenuItem[] = [
+                    { text: `Open "${label}"`,  activated: () => { /* open */ } },
+                    { text: `Rename "${label}"`, activated: () => { /* rename */ } },
+                    { text: '' },
+                    { text: 'Copy Path', activated: () => { /* copy to clipboard */ } },
+                    { text: 'Delete',    activated: () => { /* delete */ } },
+                ]
+                return add.contextMenu().items(...items).build()
+            })
+            .build()
+
+        // Simple list box for recently opened files
+        add.group('Recent Files').build(() => {
+            add.list.box()
+                .items(model.recentFiles$)
+                .mode('extended')
+                .selected(model.selectedRecent$)
+                .build()
+        })
+    }
+}

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

@@ -0,0 +1,87 @@
+import { debug } from '@dsf/common/log'
+import { action } from '@dsf/core/action'
+import { info } from '@dsf/helpers/message-box-helper'
+import { TreeNode } from '@dsf/lib/tree-node'
+import { SceneObject, ShowcaseDialog, ShowcaseDialogModel } from './06-showcase-dialog'
+
+// Sample data
+
+function buildSceneTree(): TreeNode<SceneObject>[] {
+    let id = 0
+    const next = () => ++id
+
+    const group = (name: string, children: TreeNode<SceneObject>[] = []) =>
+        new TreeNode<SceneObject>(
+            name, name,
+            { id: next(), name, type: 'Group', visible: true, locked: false },
+            children,
+        )
+
+    const obj = (name: string, type: SceneObject['type'], visible = true, locked = false) =>
+        new TreeNode<SceneObject>(name, name, { id: next(), name, type, visible, locked })
+
+    return [
+        group('Characters', [
+            obj('Victoria 9',   'Figure'),
+            obj('Michael 9',    'Figure', true, true),
+            obj('Genesis 9',    'Figure', false),
+        ]),
+        group('Environment', [
+            obj('Studio Floor', 'Prop'),
+            obj('Background',   'Prop', false),
+            group('Lights', [
+                obj('Key Light',  'Light'),
+                obj('Fill Light', 'Light', false),
+                obj('Rim Light',  'Light'),
+            ]),
+        ]),
+        obj('Camera 1', 'Camera'),
+        obj('Camera 2', 'Camera', false),
+    ]
+}
+
+// Action
+
+action({ text: '06 Showcase Dialog' }, () => {
+    let model  = new ShowcaseDialogModel()
+    let dialog = new ShowcaseDialog(model)
+
+    model.objects$.value = buildSceneTree()
+
+    model.logEntries$.value = [
+        '[Info]  Script started',
+        '[Info]  Scene loaded - 4 root nodes',
+        '[Debug] Settings restored from DzAppSettings',
+    ]
+
+    // Keep the detail panel in sync with the selected object.
+    model.selectedObject$.connect(obj => {
+        model.detailName$.value    = obj?.name    ?? ''
+        model.detailType$.value    = obj?.type    ?? ''
+        model.detailVisible$.value = obj?.visible ?? false
+        model.detailLocked$.value  = obj?.locked  ?? false
+    })
+
+    if (!dialog.run()) {
+        debug('Showcase dialog cancelled')
+        return
+    }
+
+    let sel      = model.selectedObject$.value
+    let settings = model.settings
+    const lines  = sel
+        ? [
+            `Selected : ${sel.name}`,
+            `Type     : ${sel.type}`,
+            `Visible  : ${sel.visible}`,
+            `Locked   : ${sel.locked}`,
+            ``,
+            `Quality  : ${settings.quality$.value}`,
+            `Samples  : ${settings.samples$.value}`,
+            `Format   : ${settings.exportFormat$.value}`,
+        ]
+        : ['No object selected']
+
+    debug(lines.join('\n'))
+    info(lines.join('\n'))
+})

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()
+    }
+}