uiconfig-blueprint 0.0.1

package/src/bpComponents/BPLabelledComponent.tsx

@@ -0,0 +1,19 @@
+import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
+
+export type BPLabelledComponentState = BPComponentState & {
+    label: string
+}
+export abstract class BPLabelledComponent<TValue, TState, TProps extends BPComponentProps<TValue> = BPComponentProps<TValue>> extends BPComponent<TValue, TState&BPLabelledComponentState, TProps> {
+
+    protected constructor(props: TProps, context: UiConfigRendererContextType, state: TState) {
+        super(props, context, {label: 'Input', ...state});
+    }
+
+    getUpdatedState(state: TState & BPLabelledComponentState): TState & BPLabelledComponentState {
+        return super.getUpdatedState({
+            ...state,
+            label: this.context.methods.getLabel(this.props.config) || state.label,
+        })
+    }
+
+}

package/src/bpComponents/BPNumberInputComponent.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {BPInputComponent} from "./BPInputComponent";
+import {ExtendedNumericInput} from "../components/ExtendedNumericInput";
+import {BPValueComponentState} from "./BPValueComponent";
+
+export class BPNumberInputComponent extends BPInputComponent<number> {
+    constructor(props: BPComponentProps<number>, context: UiConfigRendererContextType) {
+        super(props, context, {value: 0, label: 'Number'});
+    }
+
+    private _inputs = [React.createRef<ExtendedNumericInput>()]
+
+    async refreshConfigState(state?: BPValueComponentState<number>): Promise<void> {
+        await super.refreshConfigState(state);
+        await this._inputs[0].current?.setValue(this.state.value)
+    }
+
+    private _onChange = (v: number, last?: boolean) => {
+        this.setValue(v, last); // todo: set loading while this promise is happening.
+    }
+
+    renderInput() {
+        return (
+            <ExtendedNumericInput
+                className="numericInput"
+                disabled={this.state.disabled}
+                readOnly={this.state.readOnly}
+                defaultValue={this.state.value}
+                ref={this._inputs[0]}
+                key={this.props.config.uuid}
+                onChange2={this._onChange} fill={false}/>
+        )
+    }
+}

package/src/bpComponents/BPPanelComponent.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {ConfigObject} from "../ConfigObject";
+import {BPLabelledComponentState} from "./BPLabelledComponent";
+import {PanelActions} from "@blueprintjs/core/lib/esm/components/panel-stack2/panelTypes";
+import {UiObjectConfig} from 'uiconfig.js'
+import {safeSetProperty} from 'ts-browser-helpers'
+import {BPContainerComponent} from './BPContainerComponent'
+
+export type BPPanelComponentState = BPLabelledComponentState & {
+    children: UiObjectConfig[]
+    expanded: boolean
+}
+
+export class BPPanelComponent extends BPContainerComponent<BPPanelComponentState> {
+    constructor(props: BPComponentProps<void>&PanelActions, context: UiConfigRendererContextType) {
+        super(props, context, {
+            children: [],
+            expanded: false,
+            label: 'Panel'
+        });
+    }
+
+    setExpanded = (e: boolean) => {
+        if (e === this.state.expanded) return
+        this.setState({...this.state, expanded: e})
+        safeSetProperty(this.props.config, "expanded", e, true)
+        // if (e) this.state.children.forEach(c => Array.isArray(c) ? null : c.uiRefresh?.("postFrame", true, 1)) // todo: handle array and functions
+    }
+
+    componentDidMount() {
+        super.componentDidMount();
+        this.setExpanded(true)
+    }
+
+    componentWillUnmount() {
+        this.setExpanded(false)
+        super.componentWillUnmount();
+    }
+
+    render() {
+        return !this.state.hidden ? (
+            <div
+                key={this.props.config.uuid}
+                className="folder-children" style={{listStyleType: "none", paddingLeft: "0"}}>
+                {this.state.children.map((c, i) => <ConfigObject key={'c' + i} {...this.props} config={c}/>)}
+            </div>
+        ) : null
+    }
+}

package/src/bpComponents/BPSliderInputComponent.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {NumericInput, Slider} from "@blueprintjs/core";
+import {BPInputComponent} from "./BPInputComponent";
+import {BPValueComponentState} from "./BPValueComponent";
+import {getOrCall} from "ts-browser-helpers";
+
+export type BPSliderComponentState = BPValueComponentState<number> & {
+    min: number,
+    max: number,
+    step: number
+}
+
+export class BPSliderInputComponent extends BPInputComponent<number, BPSliderComponentState> {
+    constructor(props: BPComponentProps<number>, context: UiConfigRendererContextType) {
+        super(props, context, {
+            value: 0,
+            label: 'Slider',
+            min: 0,
+            max: 1,
+            step: 0.01,
+        });
+    }
+
+    getUpdatedState(state: BPSliderComponentState): BPSliderComponentState {
+        const bounds = getOrCall(this.props.config.bounds)
+        const max = (bounds?.length ?? 0) >= 2 ? bounds![1] : 1
+        const min = (bounds?.length ?? 0) >= 1 ? bounds![0] : 0
+        const step = getOrCall(this.props.config.stepSize) || (Math.pow(10, Math.floor(Math.log10((max - min) / 100))))
+        return super.getUpdatedState({
+            ...state,
+            min, max, step
+        });
+    }
+
+    flexBasis = "75%"
+
+    renderInput() {
+        return [(
+            <Slider
+                value={Math.min(this.state.max, Math.max(this.state.min, this.state.value))}
+                key={this.props.config.uuid + '_slider'}
+                disabled={this.state.disabled}
+                min={this.state.min} max={this.state.max} stepSize={this.state.step}
+                labelRenderer={false}
+                // labelStepSize={(max - min)}
+                // labelValues={[]}
+                onChange={(v) => {
+                    if(this.state.readOnly) return
+                    this.setValue(v)
+                }}
+            />
+        ),(
+            <NumericInput
+                style={{maxWidth: "4rem", minWidth: "3rem"}}
+                // defaultValue={state}
+                disabled={this.state.disabled}
+                value={Math.min(this.state.max, Math.max(this.state.min, this.state.value))}
+                key={this.props.config.uuid + '_input'}
+                min={this.state.min} max={this.state.max} stepSize={this.state.step}
+                minorStepSize={this.state.step/10}
+                majorStepSize={this.state.step*10}
+                buttonPosition="none"
+                onValueChange={(v) => {
+                    if(this.state.readOnly) return
+                    this.setValue(v)
+                }}
+            />)
+    ]
+    }
+}

package/src/bpComponents/BPTextInputComponent.tsx

@@ -0,0 +1,26 @@
+import React, {ChangeEventHandler} from "react";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {InputGroup} from "@blueprintjs/core";
+import {BPInputComponent} from "./BPInputComponent";
+
+export class BPTextInputComponent extends BPInputComponent<string> {
+    constructor(props: BPComponentProps<string>, context: UiConfigRendererContextType) {
+        super(props, context, {value: '', label: 'Input'});
+    }
+
+    private _onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+        this.setValue(e.target.value); // todo: set loading while this promise is happening.
+    }
+
+    renderInput() {
+        return (
+            <InputGroup
+                // defaultValue={this.state.value} // for uncontrolled usage, we will also need ref and set ref.value on change: https://reactjs.org/docs/uncontrolled-components.html
+                value={this.state.value}
+                disabled={this.state.disabled}
+                readOnly={this.state.readOnly}
+                key={this.props.config.uuid}
+                onChange={this._onChange}/>
+        )
+    }
+}

package/src/bpComponents/BPToggleInputComponent.tsx

@@ -0,0 +1,31 @@
+import React, {ChangeEventHandler} from "react";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {Switch} from "@blueprintjs/core";
+import {BPInputComponent} from "./BPInputComponent";
+
+export class BPToggleInputComponent extends BPInputComponent<boolean> {
+    constructor(props: BPComponentProps<boolean>, context: UiConfigRendererContextType) {
+        super(props, context, {value: false, label: 'Input'});
+    }
+
+    private _onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+        this.setValue(e.target.checked); // todo: set loading while this promise is happening.
+    }
+
+    renderInput() {
+        return (
+            <Switch alignIndicator="right" defaultChecked={this.state.value}
+                    disabled={this.state.disabled} readOnly={this.state.readOnly}
+                    label={this.state.label} onChange={this._onChange}
+                    className="switch" innerLabelChecked="on" innerLabel="off"/>
+        )
+    }
+
+    render() {
+        return !this.state.hidden ? (
+            <div className="xPaddedContent folderContent" style={{flexBasis: "100%"}}>
+                {this.renderInput()}
+            </div>
+        ) : null
+    }
+}

package/src/bpComponents/BPTreeComponent.scss

@@ -0,0 +1,3 @@
+.bpTreeComponent {
+  width: 100%;
+}

package/src/bpComponents/BPTreeComponent.tsx

@@ -0,0 +1,127 @@
+import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
+import {Tree, TreeNodeInfo} from "@blueprintjs/core";
+import React from "react";
+
+export type BPTreeComponentState<T = {}> = BPComponentState & {
+    nodes: TreeNodeInfo<T>[]
+}
+
+export function forEachTreeNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>) => void) {
+    if (!nodes) return;
+    for (const node of nodes) {
+        callback(node);
+        forEachTreeNode(node.childNodes, callback);
+    }
+}
+
+export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>> {
+    constructor(props: BPComponentProps<TConfigVal>, context: UiConfigRendererContextType) {
+        super(props, context, {nodes: []});
+    }
+
+    protected _infoMap = new Map<string, TreeNodeInfo<T>>()
+
+    protected _createNodeInfo(id: string, obj: T) {
+        return {
+            id,
+            label: 'unnamed',
+            nodeData: obj,
+            childNodes: [],
+        }
+    }
+
+    protected abstract _getNodeId(obj: T): string
+
+    protected abstract _updateNodeInfo(node: TreeNodeInfo<T>, obj: T): TreeNodeInfo<T>;
+
+    protected abstract _getRootNodes(): T[]
+
+    protected async _onNodeClick(_node: TreeNodeInfo<T>) {
+    }
+
+    protected async _onNodeDoubleClick(_node: TreeNodeInfo<T>) {
+    }
+
+    protected async _onNodeExpand(node: TreeNodeInfo<T>) {
+        node.isExpanded = !node.isExpanded
+        await this.setStatePromise(this.state)
+    }
+
+    protected async _onNodeCollapse(node: TreeNodeInfo<T>) {
+        node.isExpanded = !node.isExpanded
+        await this.setStatePromise(this.state)
+    }
+
+    protected async _onNodeContextMenu(_node: TreeNodeInfo<T>) {
+    }
+
+    protected buildData(data: TreeNodeInfo<T>[], obj: T, _?: any, _2?: any) {
+        if (!obj) return data
+        const id = this._getNodeId(obj)
+        if (!this._infoMap.has(id)) this._infoMap.set(id, this._createNodeInfo(id, obj))
+        const node = this._infoMap.get(id)!
+        const node2 = this._updateNodeInfo(node, obj)
+        if (node2 !== node) this._infoMap.set(id, node2)
+        data.push(node2)
+        return data
+    }
+
+    getUpdatedState(_state: BPTreeComponentState<T>): BPTreeComponentState<T> {
+        if (!this._infoMap) this._infoMap = new Map()
+        const children = this._getRootNodes()
+        const nodes = children.map(c => {
+            return this.buildData([], c)[0]
+        }).filter(v => v)
+        console.log('update', nodes, children)
+        return super.getUpdatedState({
+            nodes
+        })
+    }
+
+    deselectAll() {
+        forEachTreeNode(this.state.nodes, (n) => n.isSelected = false)
+    }
+
+    async setSelected(node?: TreeNodeInfo<T>) {
+        this.deselectAll()
+        if (node) {
+            node.isSelected = true
+            await this.setStatePromise(this.state)
+        }
+    }
+
+    componentDidMount() {
+        super.componentDidMount();
+    }
+
+    componentWillUnmount() {
+        super.componentWillUnmount();
+    }
+
+    render() {
+        console.log('render tree', this.state.nodes)
+        const TreeT = Tree.ofType<T>()
+        return !this.state.hidden ? (
+            <TreeT
+                contents={this.state.nodes}
+                className="folderContent"
+                onNodeExpand={(node, _path, _e) => {
+                    this._onNodeExpand(node)
+                }}
+                onNodeCollapse={(node, _path, _e) => {
+                    this._onNodeCollapse(node)
+                }}
+                onNodeClick={(node, _path, _e) => {
+                    this._onNodeClick(node)
+                }}
+                onNodeDoubleClick={(node, _path, _e) => {
+                    this._onNodeDoubleClick(node)
+                }}
+                onNodeContextMenu={(node, _path, _e) => {
+                    this._onNodeContextMenu(node)
+                }}
+            />
+        ) : null
+    }
+}
+

package/src/bpComponents/BPTreeFolderComponent.tsx

@@ -0,0 +1,31 @@
+import {v4} from "uuid";
+import {TreeNodeInfo} from "@blueprintjs/core";
+import {BPTreeComponent} from "./BPTreeComponent";
+import {UiObjectConfig} from 'uiconfig.js'
+import {getOrCall} from 'ts-browser-helpers'
+
+export class BPTreeFolderComponent extends BPTreeComponent<UiObjectConfig> {
+
+    protected _getNodeId(obj: UiObjectConfig) {
+        return obj.uuid || v4();
+    }
+
+    protected _updateNodeInfo(node: TreeNodeInfo<UiObjectConfig>, obj: UiObjectConfig) {
+        node.label = getOrCall(obj.label) || 'unnamed'
+        node.childNodes = this.context.methods.getChildren(this.props.config).reduce<any[]>((...args) => this.buildData(...args), [])
+        return node;
+    }
+
+    protected _getRootNodes(): UiObjectConfig[] {
+        return (this.props.config.children || []).map(c => getOrCall(c) || {}).flat(2) as UiObjectConfig[]
+    }
+
+    protected async _onNodeClick(_node: TreeNodeInfo<UiObjectConfig>) {
+        console.log("TODO: Tree node clicked")
+    }
+
+    protected async _onNodeDoubleClick(_node: TreeNodeInfo<UiObjectConfig>) {
+        console.log("TODO: Tree node double clicked")
+    }
+
+}

package/src/bpComponents/BPValueComponent.tsx

@@ -0,0 +1,46 @@
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {BPLabelledComponent, BPLabelledComponentState} from "./BPLabelledComponent";
+
+export type BPValueComponentState<TStateValue> = BPLabelledComponentState & {
+    value: TStateValue
+}
+
+export abstract class BPValueComponent<TValue, TState extends BPValueComponentState<TStateValue>, TStateValue> extends BPLabelledComponent<TValue, TState> {
+
+    protected constructor(props: BPComponentProps<TValue>, context: UiConfigRendererContextType, state: TState) {
+        super(props, context, state);
+    }
+
+    abstract convertValueToState(value: TValue, state: TState): TState;
+
+    abstract convertStateToValue(state: TState): Promise<TValue>;
+
+    getUpdatedState(state: TState): TState {
+        const val = this.context.methods.getValue(this.props.config)
+        state = super.getUpdatedState(state)
+        return val ? this.convertValueToState(val, state) : state
+    }
+
+    protected _previousLast = false
+
+    doesNeedRefresh(state: TState, _last?: boolean): boolean {
+        return this._previousLast !== _last || this.state.value !== state.value
+    }
+
+    async setValue(value: TStateValue, last?: boolean) {
+        return this.updateStateValue({...this.state, value}, last)
+    }
+
+    forceOnChange: boolean = false
+
+    async updateStateValue(state: TState, last?: boolean) {
+        if (!this.doesNeedRefresh(state, last)) {
+            await this.setStatePromise(state)
+            return
+        }
+        let val = await this.convertStateToValue(state)
+        await this.context.methods.setValue(this.props.config, val, {last}, this.forceOnChange)
+        await this.refreshConfigState(state)
+    }
+
+}

package/src/bpComponents/BPVectorInputComponent.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {BPInputComponent} from "./BPInputComponent";
+import {BPValueComponentState} from "./BPValueComponent";
+import type {Vector2, Vector3, Vector4} from "three";
+import {ExtendedNumericInput} from "../components/ExtendedNumericInput";
+import {wIcon3, xIcon3, yIcon3, zIcon3} from "../components/variableIcons";
+import {getOrCall} from 'ts-browser-helpers'
+
+export type BPVectorComponentState = BPValueComponentState<Vector2|Vector3|Vector4> & {
+    min: number,
+    max: number,
+    step: number,
+    components: 1|2|3|4,
+}
+
+export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vector4, BPVectorComponentState> {
+    constructor(props: BPComponentProps<Vector2|Vector3|Vector4>, context: UiConfigRendererContextType) {
+        super(props, context, {
+            value: new context.THREE!.Vector2(),
+            label: 'Vector',
+            min: -Infinity,
+            max: Infinity,
+            step: 0.01,
+            components: 2,
+        });
+    }
+
+    forceOnChange: boolean = true
+
+    doesNeedRefresh(_: BPVectorComponentState): boolean {
+        return true;
+    }
+
+    getUpdatedState(state: BPVectorComponentState): BPVectorComponentState {
+        const bounds = getOrCall(this.props.config.bounds)
+        const max = (bounds?.length ?? 0) >= 2 ? bounds![1] : Infinity
+        const min = (bounds?.length ?? 0) >= 1 ? bounds![0] : -Infinity
+        const step = getOrCall(this.props.config.stepSize) || (isFinite(max) && isFinite(min) ? (Math.pow(10, Math.floor(Math.log10((max - min) / 100)))) : 0.01)
+        state = super.getUpdatedState({
+            ...state,
+            min, max, step
+        });
+        // console.warn(state.value)
+        let com = this.props.config.type!.replace('vector', '').replace('vec', '')
+        let components: any = 0;
+        // console.log(com, components)
+        if(!com.length){
+            let v = state.value as any;
+            // console.log(v)
+            if(typeof v.w === "number") components = 4
+            else if (typeof v.z === "number") components = 3
+            else if (typeof v.y === "number") components = 2
+            else if (typeof v.x === "number") components = 1
+        } else {
+            components = Math.min(4, Math.max(1, parseInt(com)))
+        }
+        state.components = components
+        return state
+    }
+
+    private _inputs = [React.createRef<ExtendedNumericInput>(), React.createRef<ExtendedNumericInput>(), React.createRef<ExtendedNumericInput>(), React.createRef<ExtendedNumericInput>()]
+
+    async refreshConfigState(state?: BPVectorComponentState): Promise<void> {
+        await super.refreshConfigState(state);
+        await this._inputs[0].current?.setValue(this.state.value.x)
+        await this._inputs[1].current?.setValue(this.state.value.y)
+        await this._inputs[2].current?.setValue((this.state.value as any).z)
+        await this._inputs[3].current?.setValue((this.state.value as any).w)
+    }
+
+    renderInput() {
+        let ret = []
+        if (!this.state.value) return <></>;
+
+        // console.warn(this.state.value)
+        if (this.state.components > 0) {
+            const x = (
+                <ExtendedNumericInput
+                    style={{maxWidth: "8rem", minWidth: "2rem"}}
+                    disabled={this.state.disabled} readOnly={this.state.readOnly}
+                    // defaultValue={state}
+                    leftIcon={xIcon3}
+                    value={this.state.value.x}
+                    key={this.props.config.uuid + '_x'}
+                    ref={this._inputs[0]}
+                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
+                    minorStepSize={this.state.step / 10}
+                    majorStepSize={this.state.step * 10}
+                    buttonPosition="none"
+                    onChange2={(v, last) => {
+                        this.state.value.x = v
+                        this.setValue(this.state.value, last) // todo: does need refresh?
+                    }}
+                />)
+            ret.push(x)
+        }
+        if(this.state.components>1) {
+            const y = (
+                <ExtendedNumericInput
+                    style={{maxWidth: "8rem", minWidth: "2rem"}}
+                    // defaultValue={state}
+                    disabled={this.state.disabled} readOnly={this.state.readOnly}
+                    value={this.state.value.y}
+                    leftIcon={yIcon3}
+                    key={this.props.config.uuid + '_y'}
+                    ref={this._inputs[1]}
+                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
+                    minorStepSize={this.state.step / 10}
+                    majorStepSize={this.state.step * 10}
+                    buttonPosition="none"
+                    onChange2={(v, last) => {
+                        this.state.value.y = v
+                        this.setValue(this.state.value, last) // todo: does need refresh?
+                    }}
+                />)
+            ret.push(y)
+        }
+        if(this.state.components>2) {
+            const z = (
+                <ExtendedNumericInput
+                    style={{maxWidth: "8rem", minWidth: "2rem"}}
+                    // defaultValue={state}
+                    disabled={this.state.disabled} readOnly={this.state.readOnly}
+                    value={(this.state.value as Vector3|Vector4).z}
+                    key={this.props.config.uuid + '_z'}
+                    leftIcon={zIcon3}
+                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
+                    ref={this._inputs[2]}
+                    minorStepSize={this.state.step / 10}
+                    majorStepSize={this.state.step * 10}
+                    buttonPosition="none"
+                    onChange2={(v, last) => {
+                        (this.state.value as Vector3 | Vector4).z = v
+                        this.setValue(this.state.value, last) // todo: does need refresh?
+                    }}
+                />)
+            ret.push(z)
+        }
+        if(this.state.components>3) {
+            const z = (
+                <ExtendedNumericInput
+                    style={{maxWidth: "8rem", minWidth: "2rem"}}
+                    // defaultValue={state}
+                    disabled={this.state.disabled} readOnly={this.state.readOnly}
+                    value={(this.state.value as Vector4).w}
+                    key={this.props.config.uuid + '_w'}
+                    leftIcon={wIcon3}
+                    ref={this._inputs[3]}
+                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
+                    minorStepSize={this.state.step / 10}
+                    majorStepSize={this.state.step * 10}
+                    buttonPosition="none"
+                    onChange2={(v, last) => {
+                        (this.state.value as Vector4).w = v
+                        this.setValue(this.state.value, last) // todo: does need refresh?
+                    }}
+                />)
+            ret.push(z)
+        }
+        return ret
+    }
+}

package/src/bpComponents/index.scss

@@ -0,0 +1,3 @@
+@import "BPButtonComponent";
+@import "BPFolderComponent";
+@import "BPTreeComponent";