uiconfig-blueprint 0.1.0-dev.3 → 0.1.0-dev.4

package/src/bpComponents/BPTreeComponent.tsx

@@ -1,5 +1,6 @@
 import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
 import {Tree, TreeNodeInfo} from "@blueprintjs/core";
+import {PrimitiveVal} from "uiconfig.js";
 
 export type BPTreeComponentState<T = {}> = BPComponentState & {
     nodes: TreeNodeInfo<T>[]
@@ -8,7 +9,7 @@ export type BPTreeComponentState<T = {}> = BPComponentState & {
 // https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/core-examples/treeExample.tsx
 type NodePath = number[];
 
-export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>> {
+export abstract class BPTreeComponent<T = {}, TConfigVal extends PrimitiveVal|void = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>> {
     constructor(props: BPComponentProps<TConfigVal>, context: UiConfigRendererContextType) {
         super(props, context, {nodes: []});
     }
@@ -32,10 +33,10 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
 
     protected abstract _getRootNodes(): T[]
 
-    protected async _onNodeClick(_id: string | number, _path: number[]) {
+    protected async _onNodeClick(_id: string | number) {
     }
 
-    protected async _onNodeDoubleClick(_id: string | number, _path: number[]) {
+    protected async _onNodeDoubleClick(_id: string | number) {
     }
 
     protected _cloneNodes(callback?: (t:TreeNodeInfo<T>)=>void, state?: TreeNodeInfo<T>[]): TreeNodeInfo<T>[] {
@@ -50,13 +51,13 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         })
     }
 
-    protected _forEachNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>) => void) {
+    protected _forEachNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>, path: NodePath) => void, path: NodePath = []) {
         if (nodes === undefined) {
             return nodes;
         }
         for (const node of nodes) {
-            callback(node);
-            this._forEachNode(node.childNodes, callback);
+            callback(node, path);
+            this._forEachNode(node.childNodes, callback, [...path, node.id] as NodePath);
         }
         return nodes
     }
@@ -64,16 +65,16 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         callback(Tree.nodeFromPath(path, nodes));
     }
 
-    protected async _onNodeExpandCollapse(_id: string | number, _path: number[]) {
+    protected async _onNodeExpandCollapse(_id: string | number, expanded?: boolean) {
         const nodes = this._cloneNodes()
         const node = this._infoMap.get(_id)
         if (!node) return
-        node.isExpanded = !node.isExpanded
+        node.isExpanded = expanded ?? !node.isExpanded
         // forNodeAtPath(nodes, _path, node => (node.isExpanded = !node.isExpanded));
         await this.setStatePromise({...this.state, nodes})
     }
 
-    protected async _onNodeContextMenu(_id: string | number, _path: number[]) {
+    protected async _onNodeContextMenu(_id: string | number) {
     }
 
     protected buildData(data: TreeNodeInfo<T>[], obj: T, _?: any, _2?: any) {
@@ -116,28 +117,90 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         super.componentWillUnmount();
     }
 
+    findSelectedNode(nodes?: TreeNodeInfo<T>[]): TreeNodeInfo<T> | undefined {
+        if (!nodes) nodes = this.state.nodes
+        for (const node of nodes) {
+            if (node.isSelected) return node
+            if (node.childNodes) {
+                const res = this.findSelectedNode(node.childNodes)
+                if (res) return res
+            }
+        }
+    }
+    getFlatNodes(onlyVisible = false, nodes?: TreeNodeInfo<T>[], res: TreeNodeInfo<T>[] = []): TreeNodeInfo<T>[] {
+        if (!nodes) nodes = this.state.nodes
+        for (const node of nodes) {
+            res.push(node)
+            if (node.childNodes && (!onlyVisible || node.isExpanded)) this.getFlatNodes(onlyVisible, node.childNodes, res)
+        }
+        return res
+    }
+
+    protected _handleKeyDown(e: React.KeyboardEvent) {
+        const nodes = this.getFlatNodes(true)
+        let current, next, previous;
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i]
+            if (node.isSelected) {
+                current = node
+                next = i < nodes.length - 1 ? nodes[i + 1] : undefined
+                previous = i > 0 ? nodes[i - 1] : undefined
+                break
+            }
+        }
+        switch (e.key) {
+            case "ArrowUp":
+                if (previous) this._onNodeClick(previous.id)
+                break
+            case "ArrowDown":
+                if (next) this._onNodeClick(next.id)
+                break
+            case "ArrowRight":
+                if (current) this._onNodeExpandCollapse(current.id, true)
+                break
+            case "ArrowLeft":
+                if (current) this._onNodeExpandCollapse(current.id, false)
+                break
+            case "Escape":
+                if (current) this._onNodeClick(current.id)
+                break
+            case "Enter":
+                if (current) this._onNodeDoubleClick(current.id)
+                break
+            default:
+                return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+    }
+
     render() {
         const TreeT = Tree.ofType<T>()
         return !this.state.hidden ? (
+            <div
+                style={{width: "100%", height: "100%"}}
+                 onKeyDown={e => this._handleKeyDown(e)}
+                tabIndex={0}
+            >
             <TreeT
                 contents={this.state.nodes}
                 className="folderContent"
                 onNodeExpand={(node, _path, _e) => {
-                    this._onNodeExpandCollapse(node.id, _path)
+                    this._onNodeExpandCollapse(node.id)
                 }}
                 onNodeCollapse={(node, _path, _e) => {
-                    this._onNodeExpandCollapse(node.id, _path)
+                    this._onNodeExpandCollapse(node.id)
                 }}
                 onNodeClick={(node, _path, _e) => {
-                    this._onNodeClick(node.id, _path)
+                    this._onNodeClick(node.id)
                 }}
                 onNodeDoubleClick={(node, _path, _e) => {
-                    this._onNodeDoubleClick(node.id, _path)
+                    this._onNodeDoubleClick(node.id)
                 }}
                 onNodeContextMenu={(node, _path, _e) => {
-                    this._onNodeContextMenu(node.id, _path)
+                    this._onNodeContextMenu(node.id)
                 }}
-            />
+            /></div>
         ) : null
     }
 }

package/src/bpComponents/BPValueComponent.tsx

@@ -1,30 +1,52 @@
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {BPLabelledComponent, BPLabelledComponentState} from "./BPLabelledComponent";
+import {equalsPrimitive, PrimitiveVal} from "uiconfig.js";
 
 export type BPValueComponentState<TStateValue> = BPLabelledComponentState & {
     value: TStateValue
 }
 
-export abstract class BPValueComponent<TValue, TState extends BPValueComponentState<TStateValue>, TStateValue> extends BPLabelledComponent<TValue, TState> {
+export abstract class BPValueComponent<TValue extends PrimitiveVal, TState extends BPValueComponentState<TStateValue>, TStateValue> extends BPLabelledComponent<TValue, TState> {
 
     protected constructor(props: BPComponentProps<TValue>, context: UiConfigRendererContextType, state: TState) {
         super(props, context, state);
+        this.setValue = this.setValue.bind(this)
     }
 
     abstract convertValueToState(value: TValue, state: TState): TState;
 
     abstract convertStateToValue(state: TState): Promise<TValue>;
 
+    // this should be state.value ideally which is initialValue in parent component
+    // a separate variable is made here so that it can be undefined in the beginning.
+    private _lastValRef: TValue | undefined
+
     getUpdatedState(state: TState): TState {
-        const val = this.context.methods.getValue(this.props.config)
+        const val = this.context.methods.getValue<TValue>(this.props.config, this._lastValRef, false) // this has to be false otherwise the children component will rerender everytime. like sliders
+        if(this._lastValRef !== undefined && val !== undefined){
+            // changed from outside, so we need to update the children
+            this.keyVersion++
+        }
+        this._lastValRef = val
+        // console.log('getUpdatedState', val);
         state = super.getUpdatedState(state)
-        return val ? this.convertValueToState(val, state) : state
+        state = val !== undefined ? this.convertValueToState(val, state) : state
+        return state
     }
 
     protected _previousLast = false
 
+    // is this really required?
     doesNeedRefresh(state: TState, _last?: boolean): boolean {
-        return this._previousLast !== _last || this.state.value !== state.value
+        const needsRefresh = this._previousLast !== _last || !equals(this.state.value, state.value);
+        this._previousLast = _last ?? true;
+        // console.log('doesNeedRefresh', needsRefresh, this.state.value, state.value);
+        return needsRefresh;
+    }
+
+    setState(state: TState, callback?: () => void) {
+        // this.keyVersion++ // dont in getUpdatedState
+        super.setState(state, callback);
     }
 
     async setValue(value: TStateValue, last?: boolean) {
@@ -39,8 +61,13 @@ export abstract class BPValueComponent<TValue, TState extends BPValueComponentSt
             return
         }
         let val = await this.convertStateToValue(state)
+        this._lastValRef = val
         await this.context.methods.setValue(this.props.config, val, {last}, this.forceOnChange)
         await this.refreshConfigState(state)
     }
 
 }
+
+function equals(a: any, b: any){
+    return equalsPrimitive(a, b)
+}

package/src/components/DialogContext.tsx

@@ -129,7 +129,7 @@ function DialogPromptButtons({
     closeButtonText?: string,
     submitButtonText?: string,
     onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
-    onSubmit?: (value: string)=>boolean|undefined|any|Promise<boolean|undefined|any>, // does not close if false
+    onSubmit?: (value: string)=>boolean|undefined|{error: string}|Promise<boolean|undefined|{error: string}>, // does not close if false
     resolve: (value: string|null)=>void,
 }){
     const {loadingState, updateLoading} = useLoadingState()
@@ -142,8 +142,8 @@ function DialogPromptButtons({
     const doSubmit = async()=> {
         if (onSubmit) {
             const res = await onSubmit(state.value)
-            if(res.error){
-                setState({...state, intent: Intent.DANGER, helperText: res.error})
+            if(res && (res as any).error){
+                setState({...state, intent: Intent.DANGER, helperText: (res as any).error})
             }
             if(res !== true) return
         }

package/src/components/FileComponent.tsx

@@ -1,12 +1,15 @@
 import React, {useEffect, useRef} from "react";
 import {Button, ControlGroup, FileInput, HTMLSelect, InputGroup} from "@blueprintjs/core";
 import {BPFileComponentState} from "../bpComponents/BPFileComponent";
+import {useLoadingStateKey} from './loadingState'
 
 export interface FileComponentProps {
     state: BPFileComponentState
-    onChange: (state: Partial<BPFileComponentState>)=>void
+    onChange: (state: Partial<BPFileComponentState>)=>Promise<void>
+    previewSlot?: React.ReactNode,
+    uuid?: string
 }
-export const FileComponent: React.FC<FileComponentProps> = ({state, onChange})=>{
+export const FileComponent: React.FC<FileComponentProps> = ({state, onChange, previewSlot})=>{
     const fileInputRef = useRef<HTMLInputElement>()
     const textInputRef = useRef<HTMLInputElement>()
     // console.log('render file component', state)
@@ -33,47 +36,67 @@ export const FileComponent: React.FC<FileComponentProps> = ({state, onChange})=>
     //     fileInputRef.current && (fileInputRef.current.placeholder = 'https://example.com/file.png')
     // }, []);
 
+    // const hasValue = !!state.value || !!state.preview
+
+    const {loadingState, updateLoading} = useLoadingStateKey()
+
     return (
-        <div style={{flexGrow: "1", display: "flex", height: "100%"}}>
-            <ControlGroup fill={false} vertical={false} style={{width: "100%"}}>
-                {!state.readOnly ? (<HTMLSelect options={['url', 'file']} minimal={true} fill={false}
+        <div style={{position: "relative", flexGrow: "1", display: "flex", height: "100%", flexDirection: "column"}}>
+            {!!state.preview && (
+                <>
+                    {previewSlot}
+                    <Button icon="small-cross"
+                            minimal={false}
+                            small={true}
                             disabled={state.disabled}
-                            value={state.mode} onChange={(e)=>{
-                    onChange({mode: e.target.value as 'url'|'file'})
-                }} /> ) : null}
+                            intent={"danger"}
+                            style={{position: "absolute", top: 0, right: 0, opacity: 0.7}}
+                            loading={loadingState}
+                            onClick={() => updateLoading(onChange({value: null}))}></Button>
+                </>
+            )}
+            {(!state.preview || !previewSlot) && <ControlGroup fill={false} vertical={false} style={{width: "100%"}}>
+                {!state.readOnly && !state.value ? (<HTMLSelect options={['url', 'file']} minimal={true} fill={false}
+                                                                disabled={state.disabled}
+                                                                className={"file-component-select"}
+                                                                value={state.mode} onChange={(e) => {
+                    onChange({mode: e.target.value as 'url' | 'file'})
+                }}/>) : null}
                 {state.mode === 'url' ? (
-                    <InputGroup style={{flexGrow: "1", flexShrink: "1"}} inputRef={textInputRef as any} type="url" defaultValue={typeof state.value === 'string' ? state.value : ''}
+                    <InputGroup style={{flexGrow: "1", flexShrink: "1"}} inputRef={textInputRef as any} type="url"
+                                defaultValue={typeof state.value === 'string' ? state.value : ''}
                                 rightElement={(
-                                    <Button disabled={state.readOnly} minimal={true} icon="arrow-right" onClick={()=>{
-                                        onChange({mode:'url', value: textInputRef.current?.value??''})
-                                    }} ></Button>
+                                    <Button disabled={state.readOnly} minimal={true} icon="arrow-right" onClick={() => {
+                                        onChange({mode: 'url', value: textInputRef.current?.value ?? ''})
+                                    }}></Button>
                                 )}
                                 disabled={state.disabled} readOnly={state.readOnly}
-                                onChange={(_)=>{
+                                onChange={(_) => {
                                 }} placeholder="https://example.com/file.png"/>
                 ) : (
-                    <FileInput inputProps={{ref: fileInputRef as any}} style={{flexGrow: "1", flexShrink: "1", minWidth: "50px"}}
+                    <FileInput inputProps={{ref: fileInputRef as any}}
+                               style={{flexGrow: "1", flexShrink: "1", minWidth: "50px"}}
                                text={(state.value as File)?.name || 'No file'}
                                disabled={state.disabled}
-                               onClick={(e)=>{
-                                   if(state.readOnly) {
+                               onClick={(e) => {
+                                   if (state.readOnly) {
                                        e.preventDefault()
                                        e.stopPropagation()
                                    }
                                }}
                                buttonText={state.readOnly ? '-' : state.value ? 'Change' : 'Choose'}
-                               onChange={()=>{
-                                   onChange({mode: 'file', value: fileInputRef.current?.files?.[0]??null})
-                               }} className="inputGroupFile" />
+                               onChange={() => {
+                                   onChange({mode: 'file', value: fileInputRef.current?.files?.[0] ?? null})
+                               }} className="inputGroupFile"/>
                 )}
                 {!state.readOnly && state.value && (
-                <Button minimal={true} icon="small-cross"
-                        disabled={state.disabled}
-                        onClick={()=>{
-                    onChange({value: null})
-                }}></Button>
+                    <Button minimal={true} icon="small-cross"
+                            disabled={state.disabled}
+                            loading={loadingState}
+                            onClick={() => updateLoading(onChange({value: null}))
+                            }></Button>
                 )}
-            </ControlGroup>
+            </ControlGroup>}
         </div>
     )
 }

package/src/components/loadingState.tsx

@@ -9,3 +9,12 @@ export function useLoadingState(){
     }, [loadingState])
     return {loadingState, updateLoading}
 }
+export function useLoadingStateKey(){
+    const [loadingState, setLoadingState] = useState<boolean>(false)
+    const updateLoading = useCallback(async (promise?: Promise<any>|void) => {
+        if(!promise || promise.then === undefined) return setLoadingState(false)
+        setLoadingState(true)
+        await promise.then(() => setLoadingState(false))
+    }, [loadingState])
+    return {loadingState, updateLoading}
+}

package/src/renderer.scss

@@ -89,7 +89,7 @@
   align-items: center;
   justify-content: flex-end;
   gap: calc($pt-grid-size / 2);
-  height: $pt-input-height;
+  //height: $pt-input-height; // todo: this will break the texture/image input
   flex-grow: 1;
 }
 
@@ -196,3 +196,17 @@
   user-select: none; // todo: why is this needed?
   transition: var(--background-color-transition);
 }
+
+.file-component-select{
+  > select {
+    padding-right: 18px;
+    padding-left: 8px;
+  }
+  > .bp5-icon{
+    right: 0px;
+  }
+}
+
+.bp5-panel-stack2-view{
+  background: transparent;
+}

package/tsconfig.json

@@ -19,6 +19,7 @@
         "sourceMap": true,
         "target": "es6",
         "strictNullChecks": true,
+        "skipLibCheck": true,
         "lib": [
             "es5",
             "es2015",

package/dist/allPaths-EtRM6tPk.js

@@ -1,23 +0,0 @@
-import { I as n } from "./index-CwuazIjl.js";
-import { I as e } from "./index-rhJTBxMq.js";
-import { p as r, I as s } from "./index-3UEmjC9y.js";
-/**
- * @license
- * uiconfig-blueprint v0.1.0-dev.3
- * Copyright 2022-2024 repalash <palash@shaders.app>
- * Apache-2.0 License
- */
-function I(o, t) {
-  var a = r(o);
-  return t === s.STANDARD ? n[a] : e[a];
-}
-function p(o) {
-  return r(o);
-}
-export {
-  n as IconSvgPaths16,
-  e as IconSvgPaths20,
-  I as getIconPaths,
-  p as iconNameToPathsRecordKey
-};
-//# sourceMappingURL=allPaths-EtRM6tPk.js.map