ebta-workflow-prod 1.1.2 → 4.0.1

package/src/elements/CircularSlider.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import CircularSlider from '@fseehawer/react-circular-slider';
+
+// Cast to React Component to satisfy TypeScript
+
+interface Continuous {
+    enabled: boolean;
+    clicks: number;
+    interval: number;
+}
+
+type KnobPosition = 'top' | 'right' | 'bottom' | 'left';
+
+interface CircularSliderProps extends FormElementProps<number> {
+    width?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    knobPosition?: KnobPosition; // Fixed casing
+    continuous?: Continuous; // Fixed spelling
+}
+
+function CircularSliderElement(props: CircularSliderProps): React.ReactElement {
+    const {
+        value,
+        setValue,
+        width = 280,
+        min = 0,
+        max = 360,
+        label = "Value",
+        knobPosition = 'top', // Fixed casing
+        ...rest
+    } = props;
+
+    const handleChange = React.useCallback((newValue: string | number) => {
+        setValue(typeof newValue === 'string' ? parseFloat(newValue) : newValue);
+    }, [setValue]);
+
+    return (
+        <CircularSlider
+            width={width}
+            min={min}
+            max={max}
+            label={label}
+            knobPosition={knobPosition} // Fixed casing
+            onChange={handleChange}
+            initialValue={value || 0}
+            {...rest}
+        />
+    );
+}
+
+const CircularSliderElementRegistration: FormElementRegistration<CircularSliderProps> = {
+    component: CircularSliderElement,
+    id: "CircularSlider",
+    getInitialProperties: () => ({
+        value: 0,
+        min: 0,
+        max: 360,
+        label: "Value",
+        knobPosition: 'top', // Fixed casing
+        width: 280
+    })
+};
+
+export default CircularSliderElementRegistration;

package/src/elements/CsColorPicker.tsx

@@ -0,0 +1,140 @@
+import * as React from "react";
+import { MantineProvider } from '@mantine/core';
+import { FormElementProps, FormElementRegistration  } from "@vertigis/workflow";
+import { ColorInput, ColorPicker } from '@mantine/core';
+import type { ColorFormat } from "@mantine/core/lib/components/ColorPicker/ColorPicker.types";
+
+import "@mantine/core/styles.css";
+
+import Color from "esri/Color";
+
+
+declare module "@vertigis/workflow" {
+    interface FormElementSettableProps<> {
+        esriColor?: Color
+    }
+}
+
+// Define a type that includes both the base props and your custom props
+interface CsColorPickerV2Props extends FormElementProps<string> {
+    description?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    swatches?: string[];
+    swatchesPerRow: number;
+    componentType: string;
+    colorType: ColorFormat;
+    colorPickerSize?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+
+/**
+ * A Workflow element built using React.
+ * @displayName New Color Picker
+ * @description New Color Picker V1
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function CsColorPickerV2(props: CsColorPickerV2Props): React.ReactElement {
+    const { 
+        setProperty, 
+        placeholder,
+        colorPickerSize, 
+        description, 
+        defaultValue,
+        colorType, 
+        setValue, 
+        raiseEvent, 
+        value, 
+        swatches, 
+        swatchesPerRow, 
+        componentType
+    } = props;
+
+    const handleChange = (color: string) => {
+        let esriColor: Color;
+
+        if (color.startsWith("rgb")) {
+            const values = color
+                .replace(/^rgba?\(|\s+|\)$/g, '')
+                .split(",")
+                .map(val => parseFloat(val.trim()));
+
+            esriColor = new Color([
+                values[0] || 0,    // r
+                values[1] || 0,    // g
+                values[2] || 0,    // b
+                values[3] !== undefined ? values[3] : 1  // a
+            ]);
+            
+        } else if (color.startsWith("#")) {
+            // Handle Hex format
+            esriColor = new Color(color);
+        } else {
+            // Handle named colors or other formats
+            esriColor = new Color(color);
+        }
+
+        setProperty("esriColor", esriColor);
+        setValue(color);
+        raiseEvent("changed", color);
+    };
+
+    return (
+        <MantineProvider withStaticClasses withGlobalClasses classNamesPrefix="ebta-mantime">
+            {componentType === "ColorInput" ? (
+                <ColorInput
+                    swatches={swatches? swatches : undefined}
+                    swatchesPerRow={swatches ? swatchesPerRow : undefined}
+                    value={value}
+                    size={colorPickerSize}
+                    onChange={handleChange}
+                    description={description ? description : undefined}
+                    placeholder={placeholder ? placeholder : undefined}
+                    format={colorType}
+                    defaultValue={defaultValue}
+                />
+            ) : (
+                <ColorPicker
+                    fullWidth
+                    size={colorPickerSize}
+                    swatches={swatches? swatches : undefined}
+                    swatchesPerRow={swatches ? swatchesPerRow : undefined}
+                    value={value}
+                    onChange={handleChange}
+                    format={colorType}
+                    defaultValue={defaultValue}
+                />
+            )}
+        </MantineProvider>
+    );
+}
+
+
+const CsColorPickerV2ElementRegistration: FormElementRegistration<CsColorPickerV2Props> = {
+    component: CsColorPickerV2,
+    getInitialProperties: () => ({
+        componentType: "ColorInput",
+        defaultValue: "rgb(168, 160, 152, 1)", 
+        swatchesPerRow: 7, 
+        colorPickerSize: "md",
+        colorType: "rgba" as ColorFormat,
+        swatches: [
+            "rgb(37, 38, 43)",
+            "rgb(134, 142, 150)",
+            "rgb(250, 82, 82)",
+            "rgb(230, 73, 128)",
+            "rgb(190, 75, 219)",
+            "rgb(121, 80, 242)",
+            "rgb(76, 110, 245)",
+            "rgb(34, 139, 230)",
+            "rgb(21, 170, 191)",
+            "rgb(18, 184, 134)",
+            "rgb(64, 192, 87)",
+            "rgb(130, 201, 30)",
+            "rgb(250, 176, 5)",
+            "rgb(253, 126, 20)"
+        ]
+    }),
+    id: "CsColorPickerV2",
+};
+
+export default CsColorPickerV2ElementRegistration;

package/src/elements/DropDownMenu.tsx

@@ -0,0 +1,282 @@
+import React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import MenuItem from '@mui/material/MenuItem';
+import Checkbox from '@mui/material/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Select from "@mui/material/Select";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import {useEffect} from "react"
+
+interface Option {
+  label: string;
+  value?: any;
+}
+
+interface DropDownMenuProps extends FormElementProps<any> {
+  options: Option[];
+  variant: "standard" | "outlined" | "filled";
+  defaultLabel: string;
+  multiple: boolean;
+  nullable: boolean;
+  initialValue: any[];
+}
+
+
+const theme = createTheme({
+  components: {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: 'var(--primaryForeground)',
+          fontSize: '1.2rem',
+          '&.Mui-focused': {
+            color: 'var(--primaryForeground)',
+          },
+        },
+      },
+    },
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          color: 'var(--primaryForeground)',
+          backgroundColor: 'var(--primaryBackground)',
+        },
+        icon: {
+          color: 'var(--primaryForeground)',
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          color: 'var(--primaryForeground)',
+          backgroundColor: 'var(--primaryBackground)',
+          fontSize: '1.2rem',
+          '&:hover': {
+            backgroundColor: 'var(--buttonBackground)',
+          },
+          '&.Mui-selected': {
+            backgroundColor: 'var(--buttonBackground)',
+            '&:hover': {
+              backgroundColor: 'var(--buttonBackground)',
+            },
+          },
+        },
+      },
+    },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          color: 'var(--primaryForeground)',
+          '&.Mui-checked': {
+            color: 'var(--primaryForeground)',
+          },
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'var(--primaryBackground)',
+          color: 'var(--primaryForeground)',
+        },
+      },
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        primary: {
+          color: 'var(--primaryForeground)',
+          fontSize: '1.2rem',
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          color: 'var(--primaryForeground)',
+        },
+        input: {
+          color: 'var(--primaryForeground)',
+          fontSize: '1.2rem',
+        },
+      },
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'var(--primaryBackground)',
+        },
+        listbox: {
+          fontSize: '1.2rem',
+          color: 'var(--secondaryForeground)',
+          backgroundColor: 'var(--primaryBackground)',
+        },
+        endAdornment: {
+          color: 'var(--primaryForeground)',
+        },
+        popupIndicator: {
+          color: 'var(--primaryForeground)',
+          backgroundColor: 'var(--primaryBackground)',
+        },
+        clearIndicator: {
+          color: 'var(--primaryForeground)',
+          '&:hover': {
+            color: 'var(--secondaryForeground)',
+          },
+        },
+        paper: {
+          backgroundColor: 'var(--primaryBackground)',
+          color: 'var(--primaryForeground)',
+        },
+        inputRoot: {
+          color: 'var(--primaryForeground)',
+          '& .MuiOutlinedInput-root': {
+            border: '1px solid var(--primaryForeground)',
+          },
+          '& .MuiChip-root': {
+            fontSize: '1.2rem',
+            backgroundColor: 'var(--buttonBackground)',
+            color: 'var(--buttonForeground)',
+            border: '1px solid var(--buttonBorder)',
+            '& .MuiChip-deleteIcon': {
+              color: 'var(--buttonForeground)',
+              '&:hover': {
+                color: 'var(--buttonForeground)',
+              },
+            },
+          },
+        },
+      },
+    },
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          '& .MuiInputBase-root': {
+            backgroundColor: 'var(--primaryBackground)',
+          },
+        },
+      },
+    },
+  },
+  typography: {
+    fontFamily: 'inherit',
+  },
+  palette: {
+    mode: 'light',
+  },
+});
+
+/**
+ * A Workflow element built using React.
+ * @displayName Drop Down Menu
+ * @description Drop Down Menu v1.9
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+
+function DropDownMenu(props: DropDownMenuProps): React.ReactElement {
+  const { variant, defaultLabel, options, multiple,initialValue,setValue } = props;
+  useEffect(() => {
+    if (initialValue !== undefined) {
+      setValue(initialValue);
+    }
+  }, []);
+ 
+  const [selectedValues, setSelectedValues] = React.useState<any>(initialValue);
+  const [isDataSelected, setIsDataSelected] = React.useState<boolean>(!!initialValue);
+  
+  // Update the internal state and call setValue when selection changes
+  const handleChange = (event: any) => {
+    const newValue = event.target.value;
+
+    if (newValue.length === 0 && !props.nullable) {
+      return;
+    }
+    setIsDataSelected(newValue.length > 0);
+    setSelectedValues(newValue);
+    if (setValue) {
+      console.log(newValue);
+      setValue(newValue);
+    }
+  };
+
+  // Render the selected values
+  const renderValue = (selected: any) => {
+    if (!selected) return '';
+    if (multiple) {
+      if (Array.isArray(selected)) {
+        return selected
+          .map(val => options.find(opt => opt.value === val)?.label)
+          .filter(Boolean)
+          .join(', ');
+      }
+    }
+    const selectedOption = options.find(opt => opt.value === selected);
+    return selectedOption ? selectedOption.label : '';
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <FormControl sx={{
+         width: '100%', mt: 1, mb: 1}} size="small">
+        {!isDataSelected && <InputLabel id="dropdown-menu-label">{defaultLabel}</InputLabel>}
+        <Select
+          variant={variant}
+          notched={false}
+          labelId="dropdown-menu-label"
+          id="dropdown-menu"
+          multiple={multiple}
+          value={selectedValues}
+          onChange={handleChange}
+          input={<OutlinedInput label={defaultLabel} />}
+          renderValue={renderValue}
+          sx={{ border: '0.1rem solid var(--primaryForeground)'}}
+          MenuProps={{
+            PaperProps: {
+              style: {
+                maxHeight: 300,
+              },
+            },
+          }}
+        >
+          {options.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              {multiple && (
+                <Checkbox
+                  checked={Array.isArray(selectedValues)
+                    ? selectedValues.includes(option.value)
+                    : selectedValues === option.value
+                  }
+                />
+              )}
+              <ListItemText primary={option.label} />
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </ThemeProvider>
+  );
+}
+
+const DropDownMenuElementRegistration: FormElementRegistration<DropDownMenuProps> = {
+  component: DropDownMenu,
+  getInitialProperties: () => ({
+    defaultLabel: "Default Label", // Provide a default label here
+    variant: "outlined", // Provide a default variant here
+    autocompleteType: "autoComplete", // Provide a default autocomplete type here
+    options: [
+      { label: "Option 1", value: 1},
+      { label: "Option 2", value: 2 },
+      { label: "Option 3", value: 3 },
+      { label: "Option 4", value: 4 },
+    ], // Sample options
+    multiple: true,
+    nullable: false,
+    initialValue: [1, 2],
+  }),
+  id: "DropDownMenu",
+};
+
+export default DropDownMenuElementRegistration;

package/src/elements/HeaderwithHelp.tsx

@@ -0,0 +1,178 @@
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import Button from '@mui/material/Button';
+
+
+/**
+ * The generic type argument provided to `FormElementProps<T>` controls the type
+ * of `props.value` and `props.setValue(value)`. If your element doesn't need a
+ * `value`, you can omit the type argument.
+ *
+ * You can also declare additional public properties of your element by adding
+ * properties to this interface. The properties will be managed by the Workflow
+ * runtime, and passed in as `props`. You can update the properties by using
+ * `props.setProperty(key, value)`.
+ */
+interface HeaderwithHelpProps extends FormElementProps<string> {
+    setting?: settingConfig
+    //Following NOT necessary, to be Compatible with old header only
+    backgroundColor?: string
+    imgSrc?: string
+    text?: string;
+    imgPosition?: string;
+    divHeight?: string;
+    margin?: string;
+    padding?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    fontFamily?: string;
+    fontColor?: string;
+    borderRaius?: string;
+    align?: string;
+    innermargin?: string;
+}
+
+/**
+ * A Workflow element built using React.
+ * @displayName HeaderwithHelp
+ * @description Header to display icon and title, optional to provide help video if available.
+ * @param props The props that will be provided by the Workflow runtime. For new header, give value to property "setting"; for existing header, copy the old load activities and add new setting for help button, then assign click events.
+ */
+
+interface settingConfig {
+    headerText?: string,
+    headerIcon?: string,
+    smallSize?: boolean,
+    helpIcon?: string,
+    backgroundColor?: string,
+    helpTitle?: string,
+    helpUrl?: string,
+}
+
+
+function HeaderwithHelp(props: HeaderwithHelpProps): React.ReactElement {
+    const { raiseEvent } = props;
+    const helpInfo = { title: props.setting?.helpTitle || '!!please contact GIS Admin to provide setting.helpTitle', url: props.setting?.helpUrl || "https://descriptusercontent.com/published/e09ca015-acd7-4980-b4b4-7ca72ebb7208/original.mp4" }
+    const handleHelpClick = () => {
+        raiseEvent("clicked", JSON.stringify(helpInfo)); // Pass the entire item data structure
+    };
+    function addLengths(...lengths) {
+        if (lengths.length === 0) return '0px'; // Handle no input case
+
+        let total = 0;
+        let baseUnit = '';
+
+        lengths.forEach(length => {
+            const match: string = length.match(/(\d+)([a-zA-Z%]+)/);
+            if (match) {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                const value = parseFloat(length.toString());
+                const unit = match[2];
+
+                if (baseUnit === '') {
+                    baseUnit = unit; // Set the base unit from the first input
+                }
+                if (baseUnit === 'rem') {
+                    baseUnit = 'px'; // Set the base unit to px if first rem
+                }
+
+                if (unit === baseUnit) {
+                    total += value; // Add directly if units are the same
+                } else if (unit === 'rem' && baseUnit === 'px') {
+                    total += value * 10; // Convert rem to px
+                } else {
+                    throw new Error(`Unsupported unit: ${unit}`);
+                }
+            } else {
+                throw new Error(`Invalid length format: ${length}`);
+            }
+        });
+
+        return total + baseUnit; // Return total with the original base unit
+    }
+    // Example usage:
+    let helpButtonHeight:string = ''
+    if (props.divHeight && props.padding) {
+        helpButtonHeight = addLengths(props.divHeight, props.padding, props.padding)
+    }
+    
+
+    const helpExist: boolean = Boolean(props.setting?.helpTitle) || Boolean(props.setting?.helpUrl)
+
+    const smallStyle = Boolean(props.setting && props.setting.smallSize)
+
+    const helpIconHeight =helpButtonHeight !== '' ? parseFloat(helpButtonHeight)/2 + 'px' : (smallStyle ? '24px' : '30px')
+
+    return (
+        <>
+            <div style={{
+                display: 'flex',
+                gap: '0.5em',
+                margin: 0,
+                padding: 0,
+                fontFamily: props.fontFamily!==undefined? `${("'"+props.fontFamily+"'")} , Arial, sans-serif !important`: `'NetworkNeo', Arial, sans-serif !important`,
+
+            }}>
+                <div
+                    style={{
+                        backgroundColor: props.backgroundColor !== undefined ? props.backgroundColor : (props.setting && props.setting.backgroundColor ? props.setting.backgroundColor : 'rgb(255, 199, 9)'),
+                        padding: props.padding !== undefined ? props.padding : (smallStyle ? '12px' : '15px'),
+                        borderRadius: props.borderRaius || '5px',
+                        cursor: 'default',
+                        textAlign: 'center',
+                        flex: '1 ',
+                        flexGrow: '4   ',
+                    }}
+                >
+                    <div style={{
+                        display: 'flex',
+                        height: props.divHeight !== undefined ? props.divHeight : (smallStyle ? '24px' : '30px'),
+                        justifyContent: 'start',
+                        alignItems: 'center'
+                    }}>
+                        <img
+                            src={props.imgSrc !== undefined ? props.imgSrc : (props.setting && props.setting.headerIcon ? props.setting.headerIcon : 'https://cdn-icons-png.flaticon.com/24/6679/6679617.png')}
+                            alt=""
+                            style={{
+                                marginRight: '2px',
+                                marginLeft: '2px',
+                                height: '24px',
+                                width: "auto"
+                            }}
+                        />
+                        <span style={{
+                            fontFamily: 'Arial',
+                            fontSize: props.fontSize !== undefined ? props.fontSize : (smallStyle ? '16px' : '22px'),
+                            fontWeight: props.fontWeight || 700,
+                            color: props.fontColor || 'rgb(0, 0, 0)',
+                            margin: '10px'
+                        }}>
+                            {props.text !== undefined ? props.text : (props.setting && props.setting.headerText ? props.setting.headerText : 'edit setting.headerText ')}
+                        </span>
+                    </div>
+                </div>
+
+                {
+                    helpExist ? <Button startIcon={<img className="material-icons notranslate MuiIcon-root MuiIcon-fontSizeMedium" aria-hidden="true" src={props.setting && props.setting.helpIcon || "https://cdn-icons-png.flaticon.com/24/189/189665.png"} style={{ height: helpIconHeight, width: helpIconHeight ,transform: 'translateX(6px)'}} />} style={{
+                        flex: '1 !important',
+                        justifyContent: 'center',
+                        height: helpButtonHeight !== '' ? helpButtonHeight : (smallStyle ? '48px' : '60px'),
+                        minWidth: 'auto',
+                        padding: '0px',
+                        lineHeight: 0,
+                        backgroundColor: props.backgroundColor !== undefined ? props.backgroundColor : (props.setting && props.setting.backgroundColor ? props.setting.backgroundColor : 'rgb(255, 199, 9)'),
+                        width: helpButtonHeight !== '' ? helpButtonHeight :(smallStyle ? '48px' : '60px'),
+                    }}
+                        onClick={() => handleHelpClick()}>
+                    </Button> : <></>
+                }
+            </div>
+        </>
+
+    );
+}
+const HeaderwithHelpElementRegistration: FormElementRegistration<HeaderwithHelpProps> = {
+    component: HeaderwithHelp,
+    id: "HeaderwithHelp",
+};
+export default HeaderwithHelpElementRegistration;