go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/components/editNode.tsx

/**
 * Copyright (c) 2024 - Present. Will Charczuk. All rights reserved.
 * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository.
 */
import { FormGroup, InputGroup } from "@blueprintjs/core";
import { ReactElement, useEffect, useState } from "react";
import { nodeTypes, valueScalarNumberTypes, valueTypes } from "../refdata/nodeTypes";
import * as api from "../api/nodes";
import { SelectStrings } from "./selectStrings";
import { EditValue } from "./editValue";
import Editor from "@monaco-editor/react";
import * as monaco from "@monaco-editor/react";

monaco.loader.config({
  paths: {
    vs: '/public/vs',
  },
})

export interface EditNodeProps {
  node: api.Node;
  value?: any;
  isCreate?: boolean;
  autoFocus?: boolean;
  onNodeChanged: (n: api.Node) => void;
  onValueChanged: (v: api.NativeValueType) => void;
}

const numbers = new Set(valueScalarNumberTypes)

export function EditNode(props: EditNodeProps) {
  const [label, setLabel] = useState<string>(props.node.label)
  const [inputType, setInputType] = useState<string | undefined>(props.node.metadata.input_type)
  const [outputType, setOutputType] = useState<string | undefined>(props.node.metadata.output_type)
  const [expression, setExpression] = useState<string | undefined>(props.node.metadata.expression)
  const [value, setValue] = useState<any | undefined>(props.value);

  useEffect(() => { setLabel(props.node.label) }, [props.node.label])
  useEffect(() => { setValue(props.value) }, [props.value])
  useEffect(() => { setInputType(props.node.metadata.input_type) }, [props.node.metadata.input_type])
  useEffect(() => { setOutputType(props.node.metadata.output_type) }, [props.node.metadata.output_type])
  useEffect(() => { setExpression(props.node.metadata.expression) }, [props.node.metadata.expression])

  const nodeTypeName = props.node.metadata.node_type;
  const nodeType = nodeTypes[nodeTypeName];

  const onLabelChange = (e: any) => {
    setLabel(e.target.value);
    props.onNodeChanged({
      ...props.node,
      label: e.target.value,
    })
  }
  const onInputTypeChange = (inputType: string) => {
    setInputType(inputType);
    if (nodeType.outputTypeSameAsInput) {
      setOutputType(inputType);
    }

    props.onNodeChanged({
      ...props.node,
      metadata: {
        ...props.node.metadata,
        input_type: inputType,
        output_type: nodeType.outputTypeSameAsInput ? inputType : outputType,
      },
    })
  }
  const onOutputTypeChange = (outputType: string) => {
    setOutputType(outputType);
    if (numbers.has(outputType)) {
      setValue(0)
      props.onValueChanged(0)
    }
    props.onNodeChanged({
      ...props.node,
      metadata: {
        ...props.node.metadata,
        output_type: outputType,
      },
    })
  }
  const onExpressionChange = (e: string) => {
    setExpression(e);
    props.onNodeChanged({
      ...props.node,
      metadata: {
        ...props.node.metadata,
        expression: e,
      }
    })
  }
  const onValueChanged = (v) => {
    setValue(v);
    props.onValueChanged(v);
  }

  let valueControl: ReactElement | null = null;
  if (nodeType.showValue && nodeType.canSetValue) {
    valueControl = (<EditValue tabIndex={0} value={value} valueType={outputType} onValueChanged={onValueChanged} />)
  }

  return (
    <div className="edit-node">
      <FormGroup label={"Label"} inline={true} labelFor={"label-value"}>
        <InputGroup autoFocus={props.autoFocus} tabIndex={0} id="label-value" name={"label"} value={label} onChange={onLabelChange} fill={true} />
      </FormGroup>
      {nodeType.canSetInputType && (
        <FormGroup label={"Input Type"} inline={true} labelFor={"input-type-value"}>
          <SelectStrings tabIndex={0} id="input-type-value" items={nodeType.inputTypes || valueTypes} value={inputType} onItemSelect={onInputTypeChange} disabled={props.isCreate !== true} fill={true} />
        </FormGroup>
      )}
      {nodeType.canSetOutputType && (
        <FormGroup label={"Output Type"} inline={true} labelFor={"output-type-value"}>
          <SelectStrings tabIndex={0} id="output-type-value" items={nodeType.outputTypes || valueTypes} value={outputType} onItemSelect={onOutputTypeChange} disabled={props.isCreate !== true} fill={true} />
        </FormGroup>
      )}
      {valueControl}
      {nodeType.showExpression && nodeType.canSetExpression && (
        <FormGroup label={"Expression"} labelInfo={nodeType.expressionRequired ? "(required)" : ""} helperText={nodeType.expressionHelpText}>
          <Editor
            height="200px"
            width="720px"
            language={nodeType.expressionLanguage || "python"}
            theme="bp5"
            onChange={onExpressionChange}
            value={expression || nodeType.expressionDefault}
            options={{
              formatOnType: true,
              autoIndent: 'full',
              renderLineHighlight: 'none',
              minimap: {
                enabled: false,
              },
            }}
          />
        </FormGroup>
      )}
    </div>
  )
}