dazscript-framework 0.1.14 → 0.1.16

package/src/dialog/builders/widgets-builder.ts

@@ -1,125 +1,140 @@
-import { Observable } from '@dsf/lib/observable'
-import { ButtonBuilder } from './button-builder'
-import CheckBoxBuilder from './checkbox-builder'
-import { ComboBoxBuilder } from './combo-box-builder'
-import { ComboEditBuilder } from './combo-edit-builder'
-import GroupBoxBuilder from './groupbox-builder'
-import LabelBuilder from './label-builder'
-import LayoutBuilder, { LayoutOrientation } from './layout-builder'
-import LineEditBuilder from './line-edit-builder'
-import { ListViewBuilder } from './list-view-builder'
-import { NodeSelectionComboBoxBuilder } from './node-selection-builder'
-import { PopupMenuBuilder } from './popup-menu-builder'
-import RadioButtonBuilder from './radio-builder'
-import { SplitterBuilder, SplitterBuilderContext } from './splitter-builder'
-import { TabBuilder, TabBuilderContext } from './tab-builder'
-import { createWidget } from './widget-builder'
-
-export class WidgetBuilderContext {
-    layout: DzLayout | null
-
-    get parent(): DzWidget | DzLayout {
-        return this.layout ?? this.dialog
-    }
-
-    constructor(public readonly dialog: DzBasicDialog) {
-        this.layout = new LayoutBuilder(this).build()
-    }
-}
-
-export class WidgetsBuilder {
-    private readonly tabsContext: TabBuilderContext
-    private readonly splitterContext: SplitterBuilderContext
-
-    constructor(public readonly context: WidgetBuilderContext) {
-        this.tabsContext = new TabBuilderContext(this.context)
-        this.splitterContext = new SplitterBuilderContext(this.context)
-    }
-
-    vertical(then: (layout: DzVBoxLayout) => void, orientation: LayoutOrientation = LayoutOrientation.LeftToRight): DzVBoxLayout {
-        return LayoutBuilder
-            .create(this.context)
-            .orientation(orientation)
-            .direction('vertical')
-            .build(then)
-    }
-
-    horizontal(then: (layout: DzHBoxLayout) => void, orientation: LayoutOrientation = LayoutOrientation.LeftToRight): DzHBoxLayout {
-        return LayoutBuilder
-            .create(this.context)
-            .orientation(orientation)
-            .direction('horizontal')
-            .build(then)
-    }
-
-    widget<T extends DzWidget>(type: { new(p0: any, p1?: any, p2?: any, p3?: any): T }, then?: (widget: T) => void): T {
-        return createWidget(this.context).build(type, then)
-    }
-
-    label(text: string): LabelBuilder {
-        return new LabelBuilder(this.context).text(text)
-    }
-
-    button(text?: string): ButtonBuilder {
-        return new ButtonBuilder(this.context).text(text)
-    }
-
-    edit(): LineEditBuilder {
-        return new LineEditBuilder(this.context)
-    }
-
-    checkbox(label?: string): CheckBoxBuilder {
-        return new CheckBoxBuilder(this.context).label(label)
-    }
-
-    radio(label?: string): RadioButtonBuilder {
-        return new RadioButtonBuilder(this.context).label(label)
-    }
-
-    group(title?: string | Observable<string>): GroupBoxBuilder {
-        return new GroupBoxBuilder(this.context).title(title)
-    }
-
-    tab(title?: string): TabBuilder {
-        return TabBuilder.create(this.tabsContext).title(title)
-    }
-
-    splitter(...items: DzWidget[]): SplitterBuilder {
-        return new SplitterBuilder(this.splitterContext).items(...items)
-    }
-
-    contextMenu(): PopupMenuBuilder {
-        return new PopupMenuBuilder(this.context)
-    }
-
-    combo(): ComboBoxBuilder {
-        return new ComboBoxBuilder(this.context)
-    }
-
-    comboEdit(): ComboEditBuilder {
-        return new ComboEditBuilder(this.context)
-    }
-
-    // pathComboBox(checkBoxes: boolean = false): PathComboBoxBuilder {
-    //     return new PathComboBoxBuilder(this.context, checkBoxes)
-    // }
-
-    /**
-     *
-     * @returns
-     * @deprecated use list
-     */
-    listView<TItem, TData = TItem>(): ListViewBuilder<TItem, TData> {
-        return new ListViewBuilder(this.context)
-    }
-
-    get list(): { view: <TItem, TData = TItem>() => ListViewBuilder<TItem, TData> } {
-        return {
-            view: <TItem, TData = TItem>() => new ListViewBuilder<TItem, TData>(this.context)
-        }
-    }
-
-    nodeSelection(): NodeSelectionComboBoxBuilder {
-        return new NodeSelectionComboBoxBuilder(this.context)
-    }
-}
+import { Observable } from '@dsf/lib/observable'
+import { ButtonBuilder } from './button-builder'
+import CheckBoxBuilder from './checkbox-builder'
+import ColorPickerBuilder from './color-picker-builder'
+import { ComboBoxBuilder } from './combo-box-builder'
+import { ComboEditBuilder } from './combo-edit-builder'
+import GroupBoxBuilder from './groupbox-builder'
+import LabelBuilder from './label-builder'
+import LayoutBuilder, { LayoutOrientation } from './layout-builder'
+import LineEditBuilder from './line-edit-builder'
+import { ListBoxBuilder } from './list-box-builder'
+import { ListViewBuilder } from './list-view-builder'
+import { NodeSelectionComboBoxBuilder } from './node-selection-builder'
+import { PopupMenuBuilder } from './popup-menu-builder'
+import RadioButtonBuilder from './radio-builder'
+import SliderBuilder from './slider-builder'
+import { SplitterBuilder, SplitterBuilderContext } from './splitter-builder'
+import { TabBuilder, TabBuilderContext } from './tab-builder'
+import { createWidget } from './widget-builder'
+
+export class WidgetBuilderContext {
+    layout: DzLayout | null
+
+    get parent(): DzWidget | DzLayout {
+        return this.layout ?? this.dialog
+    }
+
+    constructor(public readonly dialog: DzBasicDialog) {
+        this.layout = new LayoutBuilder(this).build()
+    }
+}
+
+export class WidgetsBuilder {
+    private readonly tabsContext: TabBuilderContext
+    private readonly splitterContext: SplitterBuilderContext
+
+    constructor(public readonly context: WidgetBuilderContext) {
+        this.tabsContext = new TabBuilderContext(this.context)
+        this.splitterContext = new SplitterBuilderContext(this.context)
+    }
+
+    vertical(then: (layout: DzVBoxLayout) => void, orientation: LayoutOrientation = LayoutOrientation.LeftToRight): DzVBoxLayout {
+        return LayoutBuilder
+            .create(this.context)
+            .orientation(orientation)
+            .direction('vertical')
+            .build(then)
+    }
+
+    horizontal(then: (layout: DzHBoxLayout) => void, orientation: LayoutOrientation = LayoutOrientation.LeftToRight): DzHBoxLayout {
+        return LayoutBuilder
+            .create(this.context)
+            .orientation(orientation)
+            .direction('horizontal')
+            .build(then)
+    }
+
+    widget<T extends DzWidget>(type: { new(p0: any, p1?: any, p2?: any, p3?: any): T }, then?: (widget: T) => void): T {
+        return createWidget(this.context).build(type, then)
+    }
+
+    label(text: string): LabelBuilder {
+        return new LabelBuilder(this.context).text(text)
+    }
+
+    button(text?: string): ButtonBuilder {
+        return new ButtonBuilder(this.context).text(text)
+    }
+
+    edit(): LineEditBuilder {
+        return new LineEditBuilder(this.context)
+    }
+
+    checkbox(label?: string): CheckBoxBuilder {
+        return new CheckBoxBuilder(this.context).label(label)
+    }
+
+    radio(label?: string): RadioButtonBuilder {
+        return new RadioButtonBuilder(this.context).label(label)
+    }
+
+    group(title?: string | Observable<string>): GroupBoxBuilder {
+        return new GroupBoxBuilder(this.context).title(title)
+    }
+
+    tab(title?: string): TabBuilder {
+        return TabBuilder.create(this.tabsContext).title(title)
+    }
+
+    splitter(...items: DzWidget[]): SplitterBuilder {
+        return new SplitterBuilder(this.splitterContext).items(...items)
+    }
+
+    contextMenu(): PopupMenuBuilder {
+        return new PopupMenuBuilder(this.context)
+    }
+
+    combo(): ComboBoxBuilder {
+        return new ComboBoxBuilder(this.context)
+    }
+
+    comboEdit(): ComboEditBuilder {
+        return new ComboEditBuilder(this.context)
+    }
+
+    // pathComboBox(checkBoxes: boolean = false): PathComboBoxBuilder {
+    //     return new PathComboBoxBuilder(this.context, checkBoxes)
+    // }
+
+    slider(type: 'float' | 'integer' = 'float'): SliderBuilder {
+        return new SliderBuilder(this.context, type)
+    }
+
+    color(): ColorPickerBuilder {
+        return new ColorPickerBuilder(this.context)
+    }
+
+    /**
+     *
+     * @returns
+     * @deprecated use list
+     */
+    listView<TItem, TData = TItem>(): ListViewBuilder<TItem, TData> {
+        return new ListViewBuilder(this.context)
+    }
+
+    get list(): {
+        view: <TItem, TData = TItem>() => ListViewBuilder<TItem, TData>
+        box: () => ListBoxBuilder
+    } {
+        return {
+            view: <TItem, TData = TItem>() => new ListViewBuilder<TItem, TData>(this.context),
+            box: () => new ListBoxBuilder(this.context)
+        }
+    }
+
+    nodeSelection(): NodeSelectionComboBoxBuilder {
+        return new NodeSelectionComboBoxBuilder(this.context)
+    }
+}

package/src/dialog/input-dialog.ts

@@ -1,28 +1,31 @@
-import { Observable } from '@dsf/lib/observable';
-import { BasicDialog } from './basic-dialog';
-import { InputValidator } from './input-validator';
-
-export class InputDialogModel {
-    value$: Observable<string> = new Observable()
-    validator: InputValidator | null = null
-
-    getNumericValue(): number {
-        return parseFloat(this.value$.value).valueOf()
-    }
-
-    constructor(validator: InputValidator | null = null) {
-        this.validator = validator
-    }
-}
-
-export class InputDialog extends BasicDialog {
-    constructor(title: string, private readonly model: InputDialogModel) {
-        super(title);
-    }
-
-    protected build(): void {
-        let add = this.add
-
-        add.edit().value(this.model.value$).validator(this.model.validator).focus()
-    }
+import { Observable } from '@dsf/lib/observable';
+import { BasicDialog } from './basic-dialog';
+import { InputValidator } from './input-validator';
+
+export class InputDialogModel {
+    /**
+     * @deprecated use `text$` instead
+     */
+    value$: Observable<string> = new Observable()
+    get text$(): Observable<string> { return this.value$ }
+
+    validator: InputValidator | null = null
+
+    getNumericValue(): number {
+        return parseFloat(this.value$.value).valueOf()
+    }
+
+    constructor(validator: InputValidator | null = null) {
+        this.validator = validator
+    }
+}
+
+export class InputDialog extends BasicDialog {
+    constructor(title: string, private readonly model: InputDialogModel) {
+        super(title);
+    }
+
+    protected build(): void {
+        this.add.edit().value(this.model.value$).validator(this.model.validator).focus()
+    }
 }

package/src/dialog/input-validator.ts

@@ -1,9 +1,9 @@
-export enum InputValidator {
-    float,
-    int,
-    regexp,
-    subpath,
-    filename,
-    nodename,
-    nodelabel
+export enum InputValidator {
+    float,
+    int,
+    regexp,
+    subpath,
+    filename,
+    nodename,
+    nodelabel
 }

package/src/dialog/selection-dialog.ts

@@ -0,0 +1,47 @@
+import { BasicDialog } from './basic-dialog';
+import { Direction } from './shared';
+
+export class SelectionDialogModel {
+    options: string[] = [];
+    selectedOption: string | null = null;
+    selectedIndex: number = -1;
+    title: string = "Select an Option";
+    groupTitle: string = "";
+    orientation: Direction = 'horizontal';
+}
+
+export class SelectionDialog extends BasicDialog {
+    constructor(private readonly model: SelectionDialogModel) {
+        super(model.title);
+    }
+
+    protected build(): void {
+        this.dialog.showAcceptButton(true);
+        this.dialog.showCancelButton(false);
+        this.dialog.setAcceptButtonText("Cancel")
+
+        this.add.group(this.model.groupTitle).orientation(this.model.orientation).build((layout) => {
+            layout.spacing = 5;
+            this.model.options.forEach(option => {
+                this.add.button(option).clicked(() => {
+                    this.model.selectedOption = option;
+                    this.model.selectedIndex = this.model.options.indexOf(option);
+                    this.close();
+                });
+            });
+        })
+    }
+
+    private buildForm(layout: DzLayout): void {
+
+    }
+
+    ok(): boolean {
+        this.run();
+        return this.model.selectedOption !== null;
+    }
+
+    cancel(): boolean {
+        return this.ok() === false
+    }
+}

package/src/dialog/shared.ts

@@ -1,8 +1,8 @@
-
-export type Direction = 'vertical' | 'horizontal';
-
-export class DialogProperties {
-    width?: number;
-    height?: number;
-    resizable?: boolean;
-}
+
+export type Direction = 'vertical' | 'horizontal';
+
+export class DialogProperties {
+    width?: number;
+    height?: number;
+    resizable?: boolean;
+}