uiconfig-blueprint 0.0.1

package/src/components/DraggableIcon.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import {Icon, IconName, MaybeElement} from "@blueprintjs/core";
+
+export class DraggableIcon extends React.Component<{ icon: IconName | MaybeElement, value: number, stepSize?: number, onChange: (v: number, last?: boolean) => void }> {
+    private cursor = 'auto'
+    private dragStartOffset = -Infinity
+    private dragStartValue = -Infinity
+    private lastValue = -Infinity
+    private removeEvents = () => {
+        if (isFinite(this.lastValue)) this.props.onChange(this.lastValue)
+        this.lastValue = -Infinity
+        this.dragStartOffset = -Infinity
+        this.dragStartValue = -Infinity
+        document.removeEventListener('mousemove', this.mouseMoveEvent)
+        document.removeEventListener('mouseup', this.mouseUpEvent)
+        document.documentElement.style.cursor = this.cursor
+        // setDragging(false)
+    };
+    private mouseUpEvent = (ev: MouseEvent) => {
+        ev.stopPropagation()
+        ev.preventDefault()
+        this.removeEvents()
+    };
+    private mouseMoveEvent = (ev: MouseEvent) => {
+        ev.stopPropagation()
+        ev.preventDefault()
+        if (ev.buttons > 0) {
+            if (isFinite(this.dragStartValue) && isFinite(this.dragStartOffset)) {
+                let stepSize = (this.props.stepSize ?? 1) / 10
+                let curr = ev.clientX;
+                let mm = 100;
+                let off = this.dragStartOffset - curr;
+                // off = Math.min(mm, Math.max(-mm, off));
+                off = off / mm; //-1, 1
+                // off = (off + 1)/2;
+                // off *= (props.max - props.min) / 2
+                off *= ((stepSize) * 100) / 2
+                if (ev.shiftKey) off *= 10
+                if (ev.altKey) off *= 0.1
+
+                let val = this.dragStartValue - off;
+                // val = Math.min(props.max, Math.max(props.min, val)); // todo
+                val = Number(val.toFixed(Math.max(1, -Math.log10(stepSize / 10)))); // clip decimal places depending on step size
+                this.props.onChange(val, false)
+                this.lastValue = val;
+            }
+        } else {
+            this.removeEvents()
+            // setDragging(false)
+        }
+    };
+
+    render() {
+        // const [dragging, setDragging] = React.useState(false)
+
+        return (
+            <div style={{cursor: 'ew-resize', margin: "6px"}}
+                 onMouseDown={(ev) => {
+                     // if(dragging) return
+                     this.dragStartOffset = ev.clientX
+                     this.dragStartValue = this.props.value
+                     ev.stopPropagation()
+                     ev.preventDefault()
+                     this.cursor = document.documentElement.style.cursor
+                     document.documentElement.style.cursor = "ew-resize"
+                     document.addEventListener('mousemove', this.mouseMoveEvent)
+                     document.addEventListener('mouseup', this.mouseUpEvent)
+                     // setDragging(true)
+                 }}
+            >
+                <Icon icon={this.props.icon}/>
+            </div>
+        )
+    }
+}

package/src/components/ExtendedNumericInput.tsx

@@ -0,0 +1,219 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+//https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/core-examples/numericInputExtendedExample.tsx
+
+import React from "react";
+
+import type {HTMLInputProps, NumericInputProps} from "@blueprintjs/core";
+import {NumericInput} from "@blueprintjs/core";
+import {DraggableIcon} from "./DraggableIcon";
+
+export interface IExtendedNumericInputState {
+    value?: string;
+}
+
+const NumberAbbreviation = {
+    BILLION: "b",
+    MILLION: "m",
+    THOUSAND: "k",
+};
+
+const NUMBER_ABBREVIATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(k|m|b)\b/gi;
+const SCIENTIFIC_NOTATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(e\d+)\b/gi;
+
+export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & NumericInputProps & { onChange2: (v: number, last?: boolean) => void }, IExtendedNumericInputState> {
+    public state: IExtendedNumericInputState = {
+        value: (this.props.value ?? this.props.defaultValue ?? '').toString(),
+    };
+
+    async setValue(val?: number) {
+        return new Promise<void>((resolve) => {
+            this.setState({value: (val ?? this.props.value ?? this.props.defaultValue ?? '').toString()}, resolve)
+        })
+    }
+
+    public render() {
+        const {value} = this.state;
+        const props2: HTMLInputProps & NumericInputProps & { onChange2?: (v: number, last?: boolean) => void } = {...this.props}
+        if (props2.onChange2) delete props2.onChange2
+
+        return (
+            <NumericInput
+                {...props2}
+                leftElement={(
+                    <DraggableIcon icon={this.props.leftIcon ?? "variable"}
+                                   value={parseFloat(value ?? '0')}
+                                   stepSize={this.props.stepSize}
+                                   onChange={(v, last) => {
+                                       this.handleValueChange(v, v.toString(), null, last, true)
+                                   }}/>
+                )}
+                // leftIcon={"variable"}
+                allowNumericCharactersOnly={false}
+                onBlur={this.handleBlur}
+                onKeyDown={this.handleKeyDown}
+                onValueChange={this.handleValueChange}
+                placeholder="Enter a number or expression..."
+                value={value}
+            />
+        );
+    }
+
+    private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+        this.handleConfirm((e.target as HTMLInputElement).value);
+    };
+
+    private handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.code === 'Enter') {
+            this.handleConfirm((e.target as HTMLInputElement).value);
+        }
+    };
+
+    private handleValueChange = (_valueAsNumber: number, valueAsString: string, inputElement: HTMLInputElement | null, last?: boolean, dispatchOnChange2 = false) => {
+        this.setState({value: valueAsString}, () => {
+            this.props.onValueChange?.(_valueAsNumber, valueAsString, inputElement)
+            if(dispatchOnChange2)
+                this.props.onChange2?.(_valueAsNumber, last)
+        });
+    };
+
+    private handleConfirm = (value: string) => {
+        let result = value;
+        result = this.expandScientificNotationTerms(result);
+        result = this.expandNumberAbbreviationTerms(result);
+        result = this.evaluateSimpleMathExpression(result);
+        result = this.nanStringToEmptyString(result);
+        this.setState({value: result}, () => {
+            this.props.onValueChange?.(parseFloat(result) || 0, result, null)
+            this.props.onChange2?.(parseFloat(result) || 0)
+        });
+
+        // the user could have typed a different expression that evaluates to
+        // the same value. force the update to ensure a render triggers even if
+        // this is the case.
+        this.forceUpdate();
+    };
+
+    private expandScientificNotationTerms = (value: string) => {
+        // leave empty strings empty
+        if (!value) {
+            return value;
+        }
+        return value.replace(SCIENTIFIC_NOTATION_REGEX, this.expandScientificNotationNumber);
+    };
+
+    private expandNumberAbbreviationTerms = (value: string) => {
+        // leave empty strings empty
+        if (!value) {
+            return value;
+        }
+        return value.replace(NUMBER_ABBREVIATION_REGEX, this.expandAbbreviatedNumber);
+    };
+
+    // Adapted from http://stackoverflow.com/questions/2276021/evaluating-a-string-as-a-mathematical-expression-in-javascript
+    // maybe try a better solution from above, right now it only works left to right
+    private evaluateSimpleMathExpression = (value: string) => {
+        // leave empty strings empty
+        if (!value) {
+            return value;
+        }
+
+        // parse all terms from the expression. split on the +, -, *, /, ^(pow) characters and then
+        // validate that each term is a number.
+        const terms = value.split(/[+\-*\/^]/);
+
+        // ex. "1 + 2 - 3 # 4" will parse on the + and - signs into
+        // ["1 ", " 2 ", " 3 # 4"]. after trimming whitespace from each term
+        // and coercing them to numbers, the third term will become NaN,
+        // indicating that there was some illegal character present in it.
+        const trimmedTerms = terms.map((term: string) => term.trim());
+        const numericTerms = trimmedTerms.map((term: string) => +term);
+        const illegalTerms = numericTerms.filter(isNaN);
+
+        if (illegalTerms.length > 0) {
+            return "";
+        }
+
+        // evaluate the expression now that we know it's valid
+        let total = 0;
+
+        // the regex below will match decimal numbers--optionally preceded by
+        // +-*/^ followed by any number of spaces—-including each of the
+        // following:
+        // ".1"
+        // "  1"
+        // "1.1"
+        // "+ 1"
+        // "-   1.1"
+        const matches = value.match(/[+\-*\/^]*\s*(\.\d+|\d+(\.\d+)?)/gi) || [];
+        for (const match of matches) {
+            const compactedMatch = match.replace(/\s/g, "");
+            const compactedMatchNum = compactedMatch.replace(/[*\/^]/g, "");
+            const num = parseFloat(compactedMatchNum);
+            if(compactedMatch.startsWith("*")) total *= num;
+            else if(compactedMatch.startsWith("/")) total /= num;
+            else if(compactedMatch.startsWith("^")) total = Math.pow(total, num);
+            else total += num;
+        }
+        const roundedTotal = this.roundValue(total);
+        return roundedTotal.toString();
+    };
+
+    private nanStringToEmptyString = (value: string) => {
+        // our evaluation logic isn't perfect, so use this as a final
+        // sanitization step if the result was not a number.
+        return value === "NaN" ? "" : value;
+    };
+
+    private expandAbbreviatedNumber = (value: string) => {
+        if (!value) {
+            return value;
+        }
+
+        const num = +value.substring(0, value.length - 1);
+        const lastChar = value.charAt(value.length - 1).toLowerCase();
+
+        let result: number | null = null;
+
+        if (lastChar === NumberAbbreviation.THOUSAND) {
+            result = num * 1e3;
+        } else if (lastChar === NumberAbbreviation.MILLION) {
+            result = num * 1e6;
+        } else if (lastChar === NumberAbbreviation.BILLION) {
+            result = num * 1e9;
+        }
+
+        const isValid = result != null && !isNaN(result);
+
+        if (isValid) {
+            result = this.roundValue(result!);
+        }
+
+        return isValid ? result!.toString() : "";
+    };
+
+    private expandScientificNotationNumber = (value: string) => {
+        if (!value) {
+            return value;
+        }
+        return (+value).toString();
+    };
+
+    private roundValue = (value: number, precision: number = 1) => {
+        // round to at most two decimal places
+        return Math.round(value * 10 ** precision) / 10 ** precision;
+    };
+}

package/src/components/FileComponent.tsx

@@ -0,0 +1,79 @@
+import React, {useEffect, useRef} from "react";
+import {Button, ControlGroup, FileInput, HTMLSelect, InputGroup} from "@blueprintjs/core";
+import {BPFileComponentState} from "../bpComponents/BPFileComponent";
+
+export interface FileComponentProps {
+    state: BPFileComponentState
+    onChange: (state: Partial<BPFileComponentState>)=>void
+}
+export const FileComponent: React.FC<FileComponentProps> = ({state, onChange})=>{
+    const fileInputRef = useRef<HTMLInputElement>()
+    const textInputRef = useRef<HTMLInputElement>()
+    // console.log('render file component', state)
+    useEffect(() => {
+        const fileElement = fileInputRef.current;
+        const textElement = textInputRef.current;
+        const val = state.value
+        if(!val) {
+            fileElement && (fileElement.value = '')
+            textElement && (textElement.value = '')
+            return
+        }
+        if(typeof val === 'string') {
+            textElement && (textElement.value = val)
+            return
+        }
+        if(!fileElement) return;
+        // console.log(val)
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(val instanceof File ? val : new File([val], (val as any).name||('file'+((val as any).ext?'.'+(val as any).ext:'')))); // it can be Blob also because of GLTF loaded...
+        fileElement!.files = dataTransfer.files
+    }, [state.value]);
+    // useEffect(() => {
+    //     fileInputRef.current && (fileInputRef.current.placeholder = 'https://example.com/file.png')
+    // }, []);
+
+    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}
+                            disabled={state.disabled}
+                            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 : ''}
+                                rightElement={(
+                                    <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={(_)=>{
+                                }} placeholder="https://example.com/file.png"/>
+                ) : (
+                    <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) {
+                                       e.preventDefault()
+                                       e.stopPropagation()
+                                   }
+                               }}
+                               buttonText={state.readOnly ? '-' : state.value ? 'Change' : 'Choose'}
+                               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>
+                )}
+            </ControlGroup>
+        </div>
+    )
+}

package/src/components/FormGroupComponent.tsx

@@ -0,0 +1,22 @@
+import {FormGroup} from "@blueprintjs/core";
+import React, {PropsWithChildren} from "react";
+
+export function FormGroupComponent(props: PropsWithChildren<{ label: string, flexBasis?: string, disabled?: boolean }>) {
+    return (
+        <FormGroup className="xPaddedContent folderContent" contentClassName="formGroupContent"
+                   style={{
+                       justifyContent: "space-between",
+                       marginTop: "2px",
+                       marginBottom: "2px",
+                       flexBasis: props.flexBasis ?? "50%"
+                   }}
+            // helperText="Helper text with details..."
+                   label={(<span title={props.label}>{props.label}</span>)}
+                   inline={true}
+                   disabled={props.disabled}
+            // labelInfo="(required)"
+        >
+            {props.children}
+        </FormGroup>
+    )
+}

package/src/components/InspectorStackComponent.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import {Button, Card, Panel, PanelStack2, Popover} from "@blueprintjs/core";
+import {ConfigObject, ConfigProps} from "../ConfigObject";
+import {UiObjectConfig} from 'uiconfig.js'
+import {UiConfigRendererContext} from '../bpComponents/BPComponent'
+import {Classes} from '@blueprintjs/core/src/common'
+import {defaultVisualStyle, ThemeSettingsMenuComponent, VisualStyleContext} from './VisualStyleContext'
+
+// import {ViewerAppContext} from "./ViewerAppComponent";
+
+export function InspectorStackComponent({config}: { config: UiObjectConfig<any, 'panel'> }) {
+    const renderer = React.useContext(UiConfigRendererContext)
+    const stackItem = React.useCallback(() => {
+        return {
+            props: {config: config},
+            renderPanel(props: ConfigProps) {
+                // console.log(props.config === config)
+                return (
+                    <ul style={{listStyleType: "none", paddingLeft: "0", margin: "0"}}>
+                        {/*{v && (<ConfigObject {...props}/>)}*/}
+                        {config && (<ConfigObject {...props} isPanel={true}/>)}
+                    </ul>
+                )
+            },
+            title: renderer.methods.getLabel(config)
+        } as Panel<{ config: UiObjectConfig }>
+    }, [config])
+    const [currentPanelStack, setCurrentPanelStack] = React.useState<Array<Panel<{ config: UiObjectConfig }>>>([stackItem()]);
+    React.useEffect(() => {
+        // console.warn('change', config)
+        setCurrentPanelStack([stackItem()])
+    }, [config])
+
+    const localStoragePrefix = 'bpUi'
+    const localStorageIds = {
+        'darkMode': localStoragePrefix + 'DarkMode',
+        'theme': localStoragePrefix + 'Theme',
+    }
+    const [darkMode, setDarkMode] = React.useState(localStorage.getItem(localStorageIds.darkMode) !== (defaultVisualStyle.darkMode ? 'false' : 'true'))
+    React.useEffect(() => {
+        localStorage.setItem('bpUiDarkMode', darkMode ? 'true' : 'false')
+    }, [darkMode])
+    const [theme, setTheme] = React.useState(localStorage.getItem(localStorageIds.theme) || defaultVisualStyle.theme)
+    React.useEffect(() => {
+        localStorage.setItem('bpUiTheme', theme)
+        document.documentElement.classList.remove(...Object.keys(defaultVisualStyle.themes).map(k => k))
+        document.documentElement.classList.add(theme)
+    }, [theme])
+
+    return (
+        <VisualStyleContext.Provider value={{...defaultVisualStyle, darkMode, setDarkMode, theme, setTheme}}>
+        <Card id="bpInspectorCard" className={darkMode?Classes.DARK:""} style={{height: "100%", flexGrow: "1", position: "relative"}}>
+            <PanelStack2 className="inspectorPanelStack"
+                         showPanelHeader={true}
+                         renderActivePanelOnly={true}
+                         onOpen={(p) => setCurrentPanelStack([...currentPanelStack, p] as any)}
+                         onClose={() => setCurrentPanelStack(currentPanelStack.slice(0, -1))}
+                         stack={currentPanelStack}/>
+            <div className={"bpPanelStackHeaderOverlay " + Classes.PANEL_STACK2_HEADER}>
+                <Popover targetProps={{style: {position: "absolute", right: "5px"}}}
+                         minimal={true}
+                         targetTagName={"div"}
+                    content={
+                    <ThemeSettingsMenuComponent/>
+                } placement="bottom">
+                    <Button icon="cog" small minimal text="" />
+                </Popover>
+            </div>
+        </Card>
+        </VisualStyleContext.Provider>
+    )
+}

package/src/components/VisualStyleContext.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import {Menu, MenuItem} from '@blueprintjs/core'
+import {Classes} from '@blueprintjs/core/src/common'
+
+export const defaultVisualStyle = {
+    darkMode: true,
+    setDarkMode: (_: boolean) => {},
+    themes: {
+        // https://github.com/pnnl/blueprint-styler/blob/9a2f5461f6e8682f829bd9e1722c5c4c051f7c0f/src/styles/style-manifest.ts#L12
+        'bpx-default': { label: 'Blueprint Default', link: 'https://blueprintjs.com/docs/#blueprint' },
+        'bpx-bpv3': { label: 'Blueprint v3', link: 'https://blueprintjs.com/docs/versions/3/' },
+        'bpx-flat': { label: 'Flat', link: 'https://pnnl.github.io/blueprint-styler/?style=bpx-flat' },
+        'bpx-carbon': { label: 'IBM Carbon', link: 'https://carbondesignsystem.com/components/overview/' },
+        'bpx-antd': { label: 'Ant Design', link: 'https://ant.design/components/overview/' },
+        'bpx-fluent': { label: 'Microsoft Fluent', link: 'https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html' },
+        'bpx-pnnl': { label: 'PNNL v3', link: 'https://forgedev.pnnl.gov/prc3/' },
+        // 'bpx-static': { label: 'None', link: 'https://blueprintjs.com/docs/#blueprint' },
+    },
+    theme: 'bpx-default',
+    setTheme: (_: string) => {},
+}
+export const VisualStyleContext = React.createContext<typeof defaultVisualStyle>(defaultVisualStyle)
+export const useVisualStyle = () => React.useContext(VisualStyleContext)
+
+export function ThemeSettingsMenuComponent() {
+    const visualStyle = useVisualStyle()
+    return <Menu className={Classes.ELEVATION_0}  >
+        <MenuItem
+            icon="contrast"
+            text="Color"
+            // intent={intent}
+            // labelElement={"⌘,"}
+            roleStructure="menuitem"
+            children={
+                <>
+                    <MenuItem icon="flash" text="Light Mode"
+                              shouldDismissPopover={false}
+                              selected={!visualStyle.darkMode}
+                              onClick={() => visualStyle.setDarkMode(false)}
+                              roleStructure="listoption"/>
+                    <MenuItem icon="moon" text="Dark Mode"
+                              shouldDismissPopover={false}
+                              selected={visualStyle.darkMode}
+                              onClick={() => visualStyle.setDarkMode(true)}
+                              roleStructure="listoption"/>
+                </>
+            }
+        />
+        <MenuItem
+            icon="style"
+            text="Theme"
+            // intent={intent}
+            // labelElement={"⌘,"}
+            roleStructure="menuitem"
+            children={
+                <>
+                    {Object.entries(visualStyle.themes).map(([key, value]) => (
+                        <MenuItem
+                                  shouldDismissPopover={false}
+                                  text={value.label}
+                                  selected={visualStyle.theme === key}
+                                  onClick={() => visualStyle.setTheme(key)}
+                                  roleStructure="listoption"/>
+                    ))}
+                </>
+            }
+        />
+    </Menu>
+}

package/src/components/bpIconWrapper.tsx

@@ -0,0 +1,20 @@
+// https://github.com/palantir/blueprint/issues/2348#issuecomment-389322440
+import React, {ReactNode} from "react";
+
+export const bpIconWrapper = (path: ReactNode, viewbox = 16) => {
+    return (
+        <span className="bp5-icon">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                x="0"
+                y="0"
+                width="16"
+                height="16"
+                role="img"
+                viewBox={`0 0 ${viewbox} ${viewbox}`}
+            >
+                {path}
+            </svg>
+        </span>
+    );
+};

package/src/components/common.scss

@@ -0,0 +1,21 @@
+
+.bpButton {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bpIconButton {
+}
+
+.bpPanelStackHeaderOverlay{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: transparent;
+  box-shadow: none;
+}
+
+.hidden{
+  display: none;
+}