dazscript-framework 0.1.14 → 0.1.16

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

@@ -1,29 +1,33 @@
-import { AlignmentFlags } from '@dst/common/alignmentFlags';
-import { WidgetBuilderBase, createWidget } from './widget-builder';
-import { WidgetBuilderContext } from './widgets-builder';
-
-export default class LabelBuilder extends WidgetBuilderBase<DzLabel> {
-    constructor(context: WidgetBuilderContext) {
-        super(createWidget(context).build(DzLabel));
-
-    }
-
-    text(text: string): this {
-        this.widget.text = text;
-        return this;
-    }
-
-    minWidth(width: number): this {
-        this.widget.minWidth = width
-        return this;
-    }
-
-    align(alignment: AlignmentFlags): this {
-        this.widget.alignment = alignment
-        return this;
-    }
-
-    build(): DzLabel {
-        return this.widget;
-    }
-}
+import { WidgetBuilderBase, createWidget } from './widget-builder';
+import { WidgetBuilderContext } from './widgets-builder';
+
+export default class LabelBuilder extends WidgetBuilderBase<DzLabel> {
+    constructor(context: WidgetBuilderContext) {
+        super(createWidget(context).build(DzLabel));
+
+    }
+
+    text(text: string): this {
+        this.widget.text = text;
+        return this;
+    }
+
+    wordWrap(enabled: boolean = true): this {
+        this.widget.wordWrap = enabled
+        return this
+    }
+
+    minWidth(width: number): this {
+        this.widget.minWidth = width
+        return this;
+    }
+
+    align(alignment: AlignmentFlags): this {
+        this.widget.alignment = alignment
+        return this;
+    }
+
+    build(): DzLabel {
+        return this.widget;
+    }
+}

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

@@ -1,59 +1,59 @@
-import { Direction } from '@dsf/dialog/shared';
-import { WidgetBuilderContext } from './widgets-builder';
-
-export enum LayoutOrientation {
-    LeftToRight = 0,
-    RightToLeft = 1,
-    TopToBottom = 2,
-    BottomToTop = 3
-}
-
-export default class LayoutBuilder {
-    private widgetParent: DzWidget | DzLayout | null;
-    private _direction: Direction = 'vertical';
-    private _orientation?: LayoutOrientation;
-
-    constructor(protected context: WidgetBuilderContext) { }
-
-    static create(context: WidgetBuilderContext): LayoutBuilder {
-        return new LayoutBuilder(context)
-    }
-
-    orientation(orientation: LayoutOrientation): this {
-        this._orientation = orientation;
-        return this
-    }
-
-    direction(direction: Direction): this {
-        this._direction = direction;
-        return this;
-    }
-
-    parent(parent: DzWidget | DzLayout): this {
-        this.widgetParent = parent;
-        return this;
-    }
-
-    build(then?: (layout: DzVBoxLayout | DzHBoxLayout) => void): DzVBoxLayout | DzHBoxLayout {
-        let parent = this.widgetParent ?? this.context.parent;
-        let type = this.getLayoutFor(this._direction);
-        let layout = new type(parent);
-        if (this._orientation) layout.direction = this._orientation;
-
-        let currentLayout = this.context.layout;
-        this.context.layout = layout;
-
-        if (parent.inherits("DzWidget") && (parent as any).addLayout)
-            (parent as DzBasicDialog).addLayout(layout);
-
-        then?.(layout);
-
-        this.context.layout = currentLayout;
-        return layout;
-    }
-
-    private getLayoutFor(direction: string): new (arg: any) => DzVBoxLayout | DzHBoxLayout {
-        return direction === 'horizontal' ? DzHBoxLayout : DzVBoxLayout;
-    }
-}
-
+import { Direction } from '@dsf/dialog/shared';
+import { WidgetBuilderContext } from './widgets-builder';
+
+export enum LayoutOrientation {
+    LeftToRight = 0,
+    RightToLeft = 1,
+    TopToBottom = 2,
+    BottomToTop = 3
+}
+
+export default class LayoutBuilder {
+    private widgetParent: DzWidget | DzLayout | null;
+    private _direction: Direction = 'vertical';
+    private _orientation?: LayoutOrientation;
+
+    constructor(protected context: WidgetBuilderContext) { }
+
+    static create(context: WidgetBuilderContext): LayoutBuilder {
+        return new LayoutBuilder(context)
+    }
+
+    orientation(orientation: LayoutOrientation): this {
+        this._orientation = orientation;
+        return this
+    }
+
+    direction(direction: Direction): this {
+        this._direction = direction;
+        return this;
+    }
+
+    parent(parent: DzWidget | DzLayout): this {
+        this.widgetParent = parent;
+        return this;
+    }
+
+    build(then?: (layout: DzVBoxLayout | DzHBoxLayout) => void): DzVBoxLayout | DzHBoxLayout {
+        let parent = this.widgetParent ?? this.context.parent;
+        let type = this.getLayoutFor(this._direction);
+        let layout = new type(parent);
+        if (this._orientation) layout.direction = this._orientation;
+
+        let currentLayout = this.context.layout;
+        this.context.layout = layout;
+
+        if (parent.inherits("DzWidget") && (parent as any).addLayout)
+            (parent as DzBasicDialog).addLayout(layout);
+
+        then?.(layout);
+
+        this.context.layout = currentLayout;
+        return layout;
+    }
+
+    private getLayoutFor(direction: string): new (arg: any) => DzVBoxLayout | DzHBoxLayout {
+        return direction === 'horizontal' ? DzHBoxLayout : DzVBoxLayout;
+    }
+}
+

package/src/dialog/builders/line-edit-builder.ts

@@ -1,119 +1,124 @@
-import { Observable } from '@dsf/lib/observable';
-import { InputValidator } from '../input-validator';
-import { WidgetBuilderBase, createWidget } from './widget-builder';
-import { WidgetBuilderContext } from './widgets-builder';
-
-export default class LineEditBuilder extends WidgetBuilderBase<DzLineEdit> {
-    private inputValidator: InputValidator
-    private minValue?: number
-    private maxValue?: number
-
-    constructor(context: WidgetBuilderContext) {
-        super(createWidget(context).build(DzLineEdit))
-    }
-
-    placeholder(text: string): this {
-        this.widget.placeholderText = text
-        return this
-    }
-
-    focus(): this {
-        this.widget.getWidget().setFocus()
-        return this
-    }
-
-    validator(validator: InputValidator | null): this {
-        if (validator === null) return this
-        this.inputValidator = validator
-        let settings = new DzSettings()
-        settings.setStringValue("validator", InputValidator[validator]);
-        this.widget.setValidator(settings)
-        return this
-    }
-
-    /**
-     * Sets the min value of the input when validator is set to in or float
-     * @param minValue
-     * @returns
-     */
-    min(minValue: number): this {
-        this.minValue = minValue
-        return this
-    }
-
-    /**
-     * Sets the max value of the input when validator is set to in or float
-     * @param maxValue
-     * @returns
-     */
-    max(maxValue: number): this {
-        this.maxValue = maxValue
-        return this
-    }
-
-    /**
-     * Clamps the input to min and max values. Only works when validator is set to int or float
-     * @param min
-     * @param max
-     * @returns
-     */
-    clamp(min: number, max: number): this {
-        return this.min(min).max(max)
-    }
-
-    readOnly(onOff?: Observable<boolean> | null): this {
-        if (onOff == null) {
-            this.widget.readOnly = true
-            return this
-        }
-        else {
-            this.widget.readOnly = onOff.value
-            onOff.connect((value) => {
-                this.widget.readOnly = value
-            })
-        }
-        return this
-    }
-
-    value(text_: string | Observable<string>): this {
-        if (typeof text_ === 'string') {
-            this.widget.text = text_
-        }
-        else if (text_ instanceof Observable) {
-            this.widget.text = text_.value;
-            this.widget.textChanged.scriptConnect((text: string) => {
-                text_.value = this.clampValue(text);
-            });
-            text_.connect((text: string) => {
-                this.widget.text = text;
-            });
-        }
-
-        return this;
-    }
-
-    private clampValue(text: string): string {
-        if (this.inputValidator === InputValidator.int || this.inputValidator === InputValidator.float) {
-            let value = Number(text);
-            if (!isNaN(value)) {
-                if (this.minValue !== undefined) {
-                    value = Math.max(value, this.minValue);
-                }
-                if (this.maxValue !== undefined) {
-                    value = Math.min(value, this.maxValue);
-                }
-                return String(value);
-            }
-        }
-        else if (this.maxValue && text.length > this.maxValue)
-            text = text[this.maxValue]
-
-        return text;
-    }
-
-
-    build(then?: (lineEdit: DzLineEdit) => void): DzLineEdit {
-        then?.(this.widget);
-        return this.widget;
-    }
-}
+import { Observable } from '@dsf/lib/observable';
+import { InputValidator } from '../input-validator';
+import { WidgetBuilderBase, createWidget } from './widget-builder';
+import { WidgetBuilderContext } from './widgets-builder';
+
+export default class LineEditBuilder extends WidgetBuilderBase<DzLineEdit> {
+    private inputValidator: InputValidator
+    private minValue?: number
+    private maxValue?: number
+
+    constructor(context: WidgetBuilderContext) {
+        super(createWidget(context).build(DzLineEdit))
+    }
+
+    password(): this {
+        this.widget.echoMode = (DzLineEdit as any).Password ?? 2
+        return this
+    }
+
+    placeholder(text: string): this {
+        this.widget.placeholderText = text
+        return this
+    }
+
+    focus(): this {
+        this.widget.getWidget().setFocus()
+        return this
+    }
+
+    validator(validator: InputValidator | null): this {
+        if (validator === null) return this
+        this.inputValidator = validator
+        let settings = new DzSettings()
+        settings.setStringValue("validator", InputValidator[validator]);
+        this.widget.setValidator(settings)
+        return this
+    }
+
+    /**
+     * Sets the min value of the input when validator is set to in or float
+     * @param minValue
+     * @returns
+     */
+    min(minValue: number): this {
+        this.minValue = minValue
+        return this
+    }
+
+    /**
+     * Sets the max value of the input when validator is set to in or float
+     * @param maxValue
+     * @returns
+     */
+    max(maxValue: number): this {
+        this.maxValue = maxValue
+        return this
+    }
+
+    /**
+     * Clamps the input to min and max values. Only works when validator is set to int or float
+     * @param min
+     * @param max
+     * @returns
+     */
+    clamp(min: number, max: number): this {
+        return this.min(min).max(max)
+    }
+
+    readOnly(onOff?: Observable<boolean> | null): this {
+        if (onOff == null) {
+            this.widget.readOnly = true
+            return this
+        }
+        else {
+            this.widget.readOnly = onOff.value
+            onOff.connect((value) => {
+                this.widget.readOnly = value
+            })
+        }
+        return this
+    }
+
+    value(text_: string | Observable<string>): this {
+        if (typeof text_ === 'string') {
+            this.widget.text = text_
+        }
+        else if (text_ instanceof Observable) {
+            this.widget.text = text_.value;
+            this.widget.textChanged.scriptConnect((text: string) => {
+                text_.value = this.clampValue(text);
+            });
+            text_.connect((text: string) => {
+                this.widget.text = text;
+            });
+        }
+
+        return this;
+    }
+
+    private clampValue(text: string): string {
+        if (this.inputValidator === InputValidator.int || this.inputValidator === InputValidator.float) {
+            let value = Number(text);
+            if (!isNaN(value)) {
+                if (this.minValue !== undefined) {
+                    value = Math.max(value, this.minValue);
+                }
+                if (this.maxValue !== undefined) {
+                    value = Math.min(value, this.maxValue);
+                }
+                return String(value);
+            }
+        }
+        else if (this.maxValue && text.length > this.maxValue)
+            text = text[this.maxValue]
+
+        return text;
+    }
+
+
+    build(then?: (lineEdit: DzLineEdit) => void): DzLineEdit {
+        then?.(this.widget);
+        return this.widget;
+    }
+}

package/src/dialog/builders/list-box-builder.ts

@@ -0,0 +1,103 @@
+import { Dictionary } from '@dsf/lib/dictionary';
+import { Observable } from '@dsf/lib/observable';
+import { createWidget, WidgetBuilderBase } from './widget-builder';
+import { WidgetBuilderContext } from './widgets-builder';
+
+export class ListBoxBuilder extends WidgetBuilderBase<DzListBox> {
+    private _items: Dictionary<number, string> | null = null
+    private _mode: 'single' | 'multi' | 'extended' = 'single'
+
+    constructor(context: WidgetBuilderContext) {
+        super(createWidget(context).build(DzListBox))
+    }
+
+    items(items$: string[] | Observable<string[]>): this {
+        this.widget.clear()
+        if (items$ instanceof Observable) {
+            this._items = {}
+            items$.value.forEach((item, idx) => {
+                this._items[idx] = item
+            })
+
+            const setItems = (items: string[]) => {
+                this.widget.clear()
+                items.forEach((item, idx) => {
+                    this.widget.insertItem(item)
+                })
+            }
+
+            setItems(items$.value)
+            items$.connect(value => {
+                this.widget.clear()
+                setItems(value)
+            })
+        }
+        else {
+            this._items = {}
+            items$.forEach((item, idx) => {
+                this._items[idx] = item
+                this.widget.insertItem(item)
+            })
+        }
+
+        return this
+    }
+
+    mode(mode: 'single' | 'multi' | 'extended'): this {
+        this._mode = mode
+        switch (mode) {
+            case 'single':
+                this.widget.selectionMode = DzListBox.Single
+                break
+            case 'multi':
+                this.widget.selectionMode = DzListBox.Multi
+                break
+            case 'extended':
+                this.widget.selectionMode = DzListBox.Extended
+                break
+        }
+        return this
+    }
+
+    selected(selected$: Observable<string[]>): this {
+        const setSelected = (selected: string[] | null) => {
+            this.widget.clearSelection()
+            if (selected$.value?.length > 0 && this._items) {
+                selected.forEach(sel => {
+                    const idx = Object.keys(this._items)
+                        .map(key => this._items[Number(key)])
+                        .indexOf(sel)
+                    if (idx >= 0) {
+                        this.widget.setSelected(idx, true)
+                    }
+                })
+            }
+        }
+
+        this.widget.currentChanged.scriptConnect((idx) => {
+            if (!selected$ || !this._items) return
+            if (this._mode === 'single') {
+                const item = this._items[idx]
+                selected$.value = item ? [item] : []
+            }
+            else {
+                selected$.value = Object.keys(this._items)
+                    .map(key => this.widget.isSelected(Number(key)) ? this._items[Number(key)] : null)
+                    .filter((item): item is string => item !== null)
+            }
+        })
+
+        if (selected$.value?.length === 0) {
+            return this
+        }
+
+        setSelected(selected$.value)
+
+        return this
+    }
+
+    build(then?: (listBox: DzListBox) => void) {
+        then?.(this.widget)
+        return this.widget
+    }
+}