@vertigis/react-ui 11.29.0 → 11.29.2

package/SymbolInput/SymbolInput.d.ts

@@ -0,0 +1,77 @@
+import { type FC } from "react";
+import type { SymbolJson } from "./SymbolJson.js";
+import { type BoxProps } from "../Box/index.js";
+import { type FormLabelColorFieldProps } from "../FormLabelColorField/index.js";
+import { type FormLabelSliderFieldProps } from "../FormLabelSliderField/index.js";
+import { type FormLabelTextFieldProps } from "../FormLabelTextField/index.js";
+export interface LanguageResources {
+    symbolUnsupportedErrorMessage?: string;
+    lineColorTitle?: string;
+    lineStyleTitle?: string;
+    lineWidthTitle?: string;
+    fillColorTitle?: string;
+    fillStyleTitle?: string;
+    markerSizeTitle?: string;
+    markerStyleTitle?: string;
+    markerAngleTitle?: string;
+    xOffsetTitle?: string;
+    yOffsetTitle?: string;
+    markerStyleCircle?: string;
+    markerStyleCross?: string;
+    markerStyleDiamond?: string;
+    markerStyleSquare?: string;
+    markerStyleTriangle?: string;
+    markerStyleX?: string;
+    lineStyleDash?: string;
+    lineStyleDashDot?: string;
+    lineStyleDot?: string;
+    lineStyleLongDash?: string;
+    lineStyleLongDashDot?: string;
+    lineStyleNone?: string;
+    lineStyleShortDash?: string;
+    lineStyleShortDashDot?: string;
+    lineStyleShortDashDotDot?: string;
+    lineStyleShortDot?: string;
+    lineStyleSolid?: string;
+    fillStyleBackwardDiagonal?: string;
+    fillStyleCross?: string;
+    fillStyleDiagonalCross?: string;
+    fillStyleForwardDiagonal?: string;
+    fillStyleHorizontal?: string;
+    fillStyleNone?: string;
+    fillStyleSolid?: string;
+    fillStyleVertical?: string;
+}
+export interface ColorResources {
+    /**
+     * Color value for error text, in any valid CSS format.
+     */
+    errorForeground?: string;
+    /**
+     * Color value for error text background, in any valid CSS format.
+     */
+    errorBackground?: string;
+}
+export declare function symbolIsSupported(symbol: SymbolJson): boolean;
+export interface SymbolInputProps extends Omit<BoxProps, "onChange"> {
+    onChange: (symbol: SymbolJson) => void;
+    symbol: SymbolJson;
+    languageResources?: LanguageResources;
+    colorResources?: ColorResources;
+    isSupported?: (symbol: SymbolJson) => boolean;
+    TextInputComponent?: FC<FormLabelTextFieldProps>;
+    NumberInputComponent?: FC<FormLabelSliderFieldProps>;
+    ColorInputComponent?: FC<FormLabelColorFieldProps>;
+    LineColorProps?: FormLabelColorFieldProps;
+    FillColorProps?: FormLabelColorFieldProps;
+    LineStyleProps?: FormLabelTextFieldProps;
+    FillStyleProps?: FormLabelTextFieldProps;
+    MarkerStyleProps?: FormLabelTextFieldProps;
+    MarkerSizeProps?: FormLabelSliderFieldProps;
+    LineWidthProps?: FormLabelSliderFieldProps;
+    MarkerAngleProps?: FormLabelSliderFieldProps;
+    MarkerXOffsetProps?: FormLabelSliderFieldProps;
+    MarkerYOffsetProps?: FormLabelSliderFieldProps;
+}
+declare const SymbolInput: FC<SymbolInputProps>;
+export default SymbolInput;

package/SymbolInput/SymbolInput.js

@@ -0,0 +1,457 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback, useState } from "react";
+import Box, {} from "../Box/index.js";
+import FormLabelColorField, {} from "../FormLabelColorField/index.js";
+import FormLabelSliderField, {} from "../FormLabelSliderField/index.js";
+import FormLabelTextField, {} from "../FormLabelTextField/index.js";
+import Typography from "../Typography/index.js";
+export function symbolIsSupported(symbol) {
+    const type = symbol.type;
+    return type === "esriSMS" || type === "esriSLS" || type === "esriSFS";
+}
+const SymbolInput = props => {
+    const { onChange, symbol, languageResources, colorResources, children, parseNumber, formatNumber, isSupported = symbolIsSupported, LineColorProps, FillColorProps, LineWidthProps, LineStyleProps, FillStyleProps, MarkerStyleProps, MarkerSizeProps, MarkerAngleProps, MarkerXOffsetProps, MarkerYOffsetProps, TextInputComponent, NumberInputComponent, ColorInputComponent, ...other } = {
+        parseNumber: DEFAULT_PARSE_NUMBER,
+        formatNumber: DEFAULT_FORMAT_NUMBER,
+        ...props,
+    };
+    const isSupportedSymbol = isSupported(symbol);
+    const text = { ...DEFAULT_LANGUAGE, ...languageResources };
+    const colors = { ...DEFAULT_COLORS, ...colorResources };
+    const { type } = symbol;
+    const FormTextInput = TextInputComponent ?? FormLabelTextField;
+    const FormNumberInput = NumberInputComponent ?? FormLabelSliderField;
+    const FormColorInput = ColorInputComponent ?? FormLabelColorField;
+    const [lineStyle, setLineStyle] = useState(getLineStyle(symbol));
+    const [fillStyle, setFillStyle] = useState(getFillStyle(symbol));
+    const [lineColor, setLineColor] = useState(getLineColor(symbol));
+    const [fillColor, setFillColor] = useState(getFillColor(symbol));
+    const [lineWidth, setLineWidth] = useState(getLineWidth(symbol));
+    const [markerStyle, setMarkerStyle] = useState(getMarkerProperty(symbol, "style"));
+    const [markerSize, setMarkerSize] = useState(getMarkerProperty(symbol, "size") ?? 1);
+    const [markerAngle, setMarkerAngle] = useState(getMarkerProperty(symbol, "angle") ?? 0);
+    const [xOffset, setXOffset] = useState(getMarkerProperty(symbol, "xoffset") ?? 0);
+    const [yOffset, setYOffset] = useState(getMarkerProperty(symbol, "yoffset") ?? 0);
+    useEffect(() => {
+        setLineColor(getLineColor(symbol));
+        setLineStyle(getLineStyle(symbol));
+        setLineWidth(getLineWidth(symbol));
+        setFillColor(getFillColor(symbol));
+        setFillStyle(getFillStyle(symbol));
+        setMarkerAngle(getMarkerProperty(symbol, "angle") ?? 0);
+        setMarkerSize(getMarkerProperty(symbol, "size") ?? 1);
+        setMarkerStyle(getMarkerProperty(symbol, "style"));
+        setXOffset(getMarkerProperty(symbol, "xoffset") ?? 0);
+        setYOffset(getMarkerProperty(symbol, "yoffset") ?? 0);
+    }, [symbol]);
+    const handleLineWidthBlur = useCallback((event) => {
+        setLineWidth(Math.min(100, Math.max(0, lineWidth ?? 0)));
+        LineWidthProps?.onBlur?.(event);
+    }, [lineWidth, LineWidthProps]);
+    const handleMarkerSizeBlur = useCallback((event) => {
+        setMarkerSize(Math.min(100, Math.max(0, markerSize ?? 0)));
+        MarkerSizeProps?.onBlur?.(event);
+    }, [markerSize, MarkerSizeProps]);
+    const handleXOffsetBlur = useCallback((event) => {
+        setXOffset(Math.min(100, Math.max(0, xOffset ?? 0)));
+        MarkerXOffsetProps?.onBlur?.(event);
+    }, [xOffset, MarkerXOffsetProps]);
+    const handleYOffsetBlur = useCallback((event) => {
+        setYOffset(Math.min(100, Math.max(0, yOffset ?? 0)));
+        MarkerYOffsetProps?.onBlur?.(event);
+    }, [yOffset, MarkerYOffsetProps]);
+    const handleMarkerAngleBlur = useCallback((event) => {
+        setMarkerAngle(Math.min(360, Math.max(0, markerAngle ?? 0)));
+        MarkerAngleProps?.onBlur?.(event);
+    }, [markerAngle, MarkerAngleProps]);
+    // The rule is correct, but without the useless constraint, the TSX parser
+    // gets confused and tries to interpret it as a React element.
+    //
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+    const handleStateChange = (state, propName, setState) => {
+        setState(state);
+        onChange?.(getCurrentProperties({ [propName]: state }));
+    };
+    const getCurrentProperties = (newState = {}) => {
+        switch (type) {
+            case "esriSFS":
+                return {
+                    type,
+                    color: newState.fillColor ?? fillColor,
+                    outline: {
+                        color: newState.lineColor ?? lineColor,
+                        width: newState.lineWidth ?? lineWidth,
+                        style: newState.lineStyle ?? lineStyle,
+                        type: "esriSLS",
+                    },
+                    style: newState.fillStyle ?? fillStyle,
+                };
+            case "esriSLS":
+                return {
+                    type,
+                    color: newState.lineColor ?? lineColor,
+                    width: newState.lineWidth ?? lineWidth,
+                    style: newState.lineStyle ?? lineStyle,
+                };
+            case "esriSMS":
+                return {
+                    type,
+                    color: newState.fillColor ?? fillColor,
+                    outline: {
+                        color: newState.lineColor ?? lineColor,
+                        width: newState.lineWidth ?? lineWidth,
+                        style: newState.lineStyle ?? lineStyle,
+                        type: "esriSLS",
+                    },
+                    style: newState.markerStyle ?? markerStyle,
+                    size: newState.markerSize ?? markerSize,
+                    angle: newState.markerAngle ?? markerAngle,
+                    xoffset: newState.xOffset ?? xOffset,
+                    yoffset: newState.yOffset ?? yOffset,
+                };
+            default:
+                return { type };
+        }
+    };
+    return (_jsxs(Box, { ...other, children: [!isSupportedSymbol && (_jsx(Typography, { sx: {
+                    mb: 1,
+                    p: 0.5,
+                    backgroundColor: colors.errorBackground,
+                    color: colors.errorForeground,
+                    borderRadius: 1,
+                }, children: text.symbolUnsupportedErrorMessage })), children, isSupportedSymbol ? (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, ...LineColorProps, label: text.lineColorTitle, onChange: (value) => {
+                            handleStateChange(toColor(value), "lineColor", setLineColor);
+                            LineColorProps?.onChange?.(value);
+                        }, value: toRgbaString(lineColor), disabled: !isSupportedSymbol || LineColorProps?.disabled }), type !== "esriSMS" && (_jsx(FormTextInput, { fullWidth: true, ...LineStyleProps, nativeSelect: true, label: text.lineStyleTitle, value: lineStyle, onChange: event => {
+                            const { value } = event.target;
+                            handleStateChange(value, "lineStyle", setLineStyle);
+                            LineStyleProps?.onChange?.(event);
+                        }, disabled: !isSupportedSymbol || LineStyleProps?.disabled, children: getSimpleLineStyles(text).map(ls => (_jsx("option", { value: ls.id, children: ls.label }, ls.id))) })), _jsx(FormNumberInput, { fullWidth: true, ...LineWidthProps, SliderProps: {
+                            step: 0.5,
+                            min: 1,
+                            max: 25,
+                            ...LineWidthProps?.SliderProps,
+                            disabled: !isSupportedSymbol || LineWidthProps?.SliderProps?.disabled,
+                        }, InputProps: {
+                            onBlur: handleLineWidthBlur,
+                            min: 1,
+                            max: 25,
+                            ...LineWidthProps?.InputProps,
+                            disabled: !isSupportedSymbol || LineWidthProps?.InputProps?.disabled,
+                        }, label: text.lineWidthTitle, value: lineWidth, onChange: value => {
+                            handleStateChange(value, "lineWidth", setLineWidth);
+                            LineWidthProps?.onChange?.(value);
+                        } }), type === "esriSFS" && (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, ...FillColorProps, label: text.fillColorTitle, onChange: (value) => {
+                                    handleStateChange(toColor(value), "fillColor", setFillColor);
+                                    FillColorProps?.onChange?.(value);
+                                }, value: toRgbaString(fillColor), disabled: !isSupportedSymbol || FillColorProps?.disabled }), _jsx(FormTextInput, { fullWidth: true, ...FillStyleProps, nativeSelect: true, label: text.fillStyleTitle, value: fillStyle, onChange: event => {
+                                    const { value } = event.target;
+                                    handleStateChange(value, "fillStyle", setFillStyle);
+                                    FillStyleProps?.onChange?.(event);
+                                }, disabled: !isSupportedSymbol || FillStyleProps?.disabled, children: getSimpleFillStyles(text).map(fillStyle => (_jsx("option", { value: fillStyle.id, children: fillStyle.label }, fillStyle.id))) })] })), type === "esriSMS" && (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, ...FillColorProps, label: text.fillColorTitle, onChange: (value) => {
+                                    handleStateChange(toColor(value), "fillColor", setFillColor);
+                                    FillColorProps?.onChange?.(value);
+                                }, value: toRgbaString(fillColor), disabled: !isSupportedSymbol ||
+                                    NO_FILL_MARKER_STYLES.includes(markerStyle) ||
+                                    FillColorProps?.disabled }), _jsx(FormTextInput, { fullWidth: true, ...MarkerStyleProps, nativeSelect: true, label: text.markerStyleTitle, value: markerStyle, onChange: event => {
+                                    const { value } = event.target;
+                                    handleStateChange(value, "markerStyle", setMarkerStyle);
+                                    MarkerStyleProps?.onChange?.(event);
+                                }, disabled: !isSupportedSymbol || MarkerStyleProps?.disabled, children: getSimpleMarkerStyles(text).map(markerStyle => (_jsx("option", { value: markerStyle.id, children: markerStyle.label }, markerStyle.id))) }), _jsx(FormNumberInput, { fullWidth: true, ...MarkerSizeProps, label: text.markerSizeTitle, value: markerSize, onChange: value => {
+                                    handleStateChange(value, "markerSize", setMarkerSize);
+                                    MarkerSizeProps?.onChange?.(value);
+                                }, SliderProps: {
+                                    step: 1,
+                                    min: 1,
+                                    max: 25,
+                                    ...MarkerSizeProps?.SliderProps,
+                                    disabled: !isSupportedSymbol ||
+                                        MarkerSizeProps?.SliderProps?.disabled,
+                                }, InputProps: {
+                                    min: 1,
+                                    max: 25,
+                                    ...MarkerSizeProps?.InputProps,
+                                    onBlur: handleMarkerSizeBlur,
+                                    disabled: !isSupportedSymbol || MarkerSizeProps?.disabled,
+                                } }), _jsx(FormNumberInput, { fullWidth: true, ...MarkerAngleProps, label: text.markerAngleTitle, value: markerAngle, onChange: value => {
+                                    handleStateChange(value, "markerAngle", setMarkerAngle);
+                                    MarkerAngleProps?.onChange?.(value);
+                                }, SliderProps: {
+                                    step: 1,
+                                    min: 0,
+                                    max: 360,
+                                    ...MarkerAngleProps?.SliderProps,
+                                    disabled: !isSupportedSymbol ||
+                                        MarkerAngleProps?.SliderProps?.disabled,
+                                }, InputProps: {
+                                    min: 0,
+                                    max: 360,
+                                    ...MarkerAngleProps?.InputProps,
+                                    onBlur: handleMarkerAngleBlur,
+                                    disabled: !isSupportedSymbol ||
+                                        MarkerAngleProps?.InputProps?.disabled,
+                                } }), _jsx(FormNumberInput, { fullWidth: true, ...MarkerXOffsetProps, label: text.xOffsetTitle, value: xOffset, onChange: value => {
+                                    handleStateChange(value, "xOffset", setXOffset);
+                                    MarkerXOffsetProps?.onChange?.(value);
+                                }, SliderProps: {
+                                    step: 1,
+                                    min: -25,
+                                    max: 25,
+                                    ...MarkerXOffsetProps?.SliderProps,
+                                    disabled: !isSupportedSymbol ||
+                                        MarkerXOffsetProps?.SliderProps?.disabled,
+                                }, InputProps: {
+                                    min: -25,
+                                    max: 25,
+                                    ...MarkerXOffsetProps?.InputProps,
+                                    onBlur: handleXOffsetBlur,
+                                    disabled: !isSupportedSymbol ||
+                                        MarkerXOffsetProps?.InputProps?.disabled,
+                                } }), _jsx(FormNumberInput, { fullWidth: true, ...MarkerYOffsetProps, label: text.yOffsetTitle, value: yOffset, onChange: value => {
+                                    handleStateChange(value, "yOffset", setYOffset);
+                                    MarkerYOffsetProps?.onChange?.(value);
+                                }, SliderProps: {
+                                    step: 1,
+                                    min: -25,
+                                    max: 25,
+                                    ...MarkerYOffsetProps?.SliderProps,
+                                    disabled: !isSupportedSymbol ||
+                                        MarkerYOffsetProps?.SliderProps?.disabled,
+                                }, InputProps: {
+                                    min: -25,
+                                    max: 25,
+                                    ...MarkerYOffsetProps?.InputProps,
+                                    onBlur: handleYOffsetBlur,
+                                    disabled: !isSupportedSymbol ||
+                                        MarkerYOffsetProps?.InputProps?.disabled,
+                                } })] }))] })) : null] }));
+};
+export default SymbolInput;
+const DEFAULT_LANGUAGE = {
+    fillColorTitle: "Fill Color",
+    fillStyleTitle: "Fill Style",
+    lineColorTitle: "Line Color",
+    lineStyleTitle: "Line Style",
+    lineWidthTitle: "Line Width",
+    markerAngleTitle: "Marker Angle",
+    xOffsetTitle: "X Offset",
+    yOffsetTitle: "Y Offset",
+    markerSizeTitle: "Marker Size",
+    markerStyleTitle: "Marker Style",
+    symbolUnsupportedErrorMessage: "You are attempting to edit a symbol that is not currently supported.",
+    markerStyleCircle: "Circle",
+    markerStyleCross: "Cross",
+    markerStyleDiamond: "Diamond",
+    markerStyleSquare: "Square",
+    markerStyleTriangle: "Triangle",
+    markerStyleX: "X",
+    lineStyleDash: "Dash",
+    lineStyleDashDot: "Dash Dot",
+    lineStyleDot: "Dot",
+    lineStyleLongDashDot: "Long Dash Dot",
+    lineStyleLongDash: "Long Dash",
+    lineStyleNone: "None",
+    lineStyleShortDashDotDot: "Short Dash Dot Dot",
+    lineStyleShortDashDot: "Short Dash Dot",
+    lineStyleShortDash: "Short Dash",
+    lineStyleShortDot: "Short Dot",
+    lineStyleSolid: "Solid",
+    fillStyleBackwardDiagonal: "Backward Diagonal",
+    fillStyleCross: "Cross",
+    fillStyleDiagonalCross: "Diagonal Cross",
+    fillStyleForwardDiagonal: "Forward Diagonal",
+    fillStyleHorizontal: "Horizontal",
+    fillStyleNone: "None",
+    fillStyleSolid: "Solid",
+    fillStyleVertical: "Vertical",
+};
+const DEFAULT_COLORS = {
+    errorBackground: "#B22222",
+    errorForeground: "#FFFFFF",
+};
+const NO_FILL_MARKER_STYLES = ["esriSMSCross", "esriSMSX"];
+const DEFAULT_PARSE_NUMBER = (s) => (typeof s === "string" ? +s : 0);
+const DEFAULT_FORMAT_NUMBER = (n) => typeof n === "number" ? `${n}` : "0";
+const getSimpleFillStyles = (t) => {
+    return [
+        {
+            id: "esriSFSBackwardDiagonal",
+            label: t.fillStyleBackwardDiagonal,
+        },
+        {
+            id: "esriSFSCross",
+            label: t.fillStyleCross,
+        },
+        {
+            id: "esriSFSDiagonalCross",
+            label: t.fillStyleDiagonalCross,
+        },
+        {
+            id: "esriSFSForwardDiagonal",
+            label: t.fillStyleForwardDiagonal,
+        },
+        {
+            id: "esriSFSHorizontal",
+            label: t.fillStyleHorizontal,
+        },
+        {
+            id: "esriSFSNull",
+            label: t.fillStyleNone,
+        },
+        {
+            id: "esriSFSSolid",
+            label: t.fillStyleSolid,
+        },
+        {
+            id: "esriSFSVertical",
+            label: t.fillStyleVertical,
+        },
+    ];
+};
+const getSimpleLineStyles = (t) => {
+    return [
+        {
+            id: "esriSLSDash",
+            label: t.lineStyleDash,
+        },
+        {
+            id: "esriSLSDashDot",
+            label: t.lineStyleDashDot,
+        },
+        {
+            id: "esriSLSDot",
+            label: t.lineStyleDot,
+        },
+        {
+            id: "esriSLSLongDash",
+            label: t.lineStyleLongDash,
+        },
+        {
+            id: "esriSLSLongDashDot",
+            label: t.lineStyleLongDashDot,
+        },
+        {
+            id: "esriSLSNull",
+            label: t.lineStyleNone,
+        },
+        {
+            id: "esriSLSShortDash",
+            label: t.lineStyleShortDash,
+        },
+        {
+            id: "esriSLSShortDashDot",
+            label: t.lineStyleShortDashDot,
+        },
+        {
+            id: "esriSLSShortDashDotDot",
+            label: t.lineStyleShortDashDotDot,
+        },
+        {
+            id: "esriSLSShortDot",
+            label: t.lineStyleShortDot,
+        },
+        {
+            id: "esriSLSSolid",
+            label: t.lineStyleSolid,
+        },
+    ];
+};
+const getSimpleMarkerStyles = (t) => {
+    return [
+        { id: "esriSMSCircle", label: t.markerStyleCircle },
+        { id: "esriSMSCross", label: t.markerStyleCross },
+        { id: "esriSMSDiamond", label: t.markerStyleDiamond },
+        { id: "esriSMSSquare", label: t.markerStyleSquare },
+        { id: "esriSMSTriangle", label: t.markerStyleTriangle },
+        { id: "esriSMSX", label: t.markerStyleX },
+    ];
+};
+const getLineStyle = (symbol) => {
+    switch (symbol?.type) {
+        case "esriSMS":
+        case "esriSFS":
+            return symbol.outline?.style;
+        case "esriSLS":
+            return symbol.style;
+        default:
+            return undefined;
+    }
+};
+const getFillStyle = (symbol) => {
+    switch (symbol?.type) {
+        case "esriSFS":
+            return symbol.style;
+        default:
+            return undefined;
+    }
+};
+const getLineColor = (symbol) => {
+    switch (symbol?.type) {
+        case "esriSMS":
+        case "esriSFS":
+            return symbol.outline?.color;
+        case "esriSLS":
+            return symbol.color;
+        default:
+            return undefined;
+    }
+};
+const getFillColor = (symbol) => {
+    switch (symbol?.type) {
+        case "esriSMS":
+        case "esriSFS":
+            return symbol.color;
+        default:
+            return undefined;
+    }
+};
+const getLineWidth = (symbol) => {
+    switch (symbol?.type) {
+        case "esriSMS":
+        case "esriSFS":
+            return symbol.outline?.width;
+        case "esriSLS":
+            return symbol.width;
+        default:
+            return undefined;
+    }
+};
+const getMarkerProperty = (symbol, property) => {
+    if (symbol?.type !== "esriSMS") {
+        return undefined;
+    }
+    return symbol[property];
+};
+const toRgbaString = (color) => {
+    if (!color) {
+        return DEFAULT_RGBA_STRING;
+    }
+    const [r, g, b, a] = color;
+    const aVal = a / 255;
+    return `rgba(${r}, ${g}, ${b}, ${isNaN(aVal) ? 1 : aVal})`;
+};
+const toColor = (color) => {
+    if (!color) {
+        return DEFAULT_COLOR;
+    }
+    return fromRgbaString(color) ?? fromRgbString(color) ?? DEFAULT_COLOR;
+};
+const fromRgbString = (color) => {
+    const result = /rgb\(([\d.]+), ([\d.]+), ([\d.]+)\)/.exec(color);
+    if (result) {
+        const [, r, g, b] = result;
+        return [+r, +g, +b, 255];
+    }
+    return undefined;
+};
+const fromRgbaString = (color) => {
+    const result = /rgba\(([\d.]+), ([\d.]+), ([\d.]+), ([\d.]+)\)/.exec(color);
+    if (result) {
+        const [, r, g, b, a] = result;
+        const aVal = +a * 255;
+        return [+r, +g, +b, isNaN(aVal) ? 255 : aVal];
+    }
+    return undefined;
+};
+const DEFAULT_COLOR = [255, 255, 255, 255];
+const DEFAULT_RGBA_STRING = "rgba(255, 255, 255, 1)";

package/SymbolInput/SymbolJson.d.ts

@@ -0,0 +1,134 @@
+/**
+ * A symbol representing a feature on the map.
+ *
+ * Part of the Esri ArcGIS REST API (see
+ * http://resources.arcgis.com/en/help/rest/apiref/symbol.html). See
+ * {@link https://developers.arcgis.com/web-map-specification/objects/symbol/}.
+ */
+export type SymbolJson = Symbol2DJson;
+/**
+ * Symbol types used in web maps.
+ */
+export type Symbol2DJson = SimpleFillSymbolJson | SimpleLineSymbolJson | SimpleMarkerSymbolJson;
+/**
+ * Color is represented as a four-element array. The four elements represent
+ * values for red, green, blue, and alpha in that order. Values range from 0
+ * through 255. If color is undefined for a symbol, the color value is null. See
+ * {@link https://developers.arcgis.com/web-map-specification/objects/color/}
+ * {@link https://developers.arcgis.com/web-scene-specification/objects/color/}.
+ */
+export type ColorJson = number[];
+/**
+ * Base class for all symbols.
+ */
+export interface SymbolJsonBase {
+    /**
+     * The type of symbol. See {@link SymbolJsonType}.
+     */
+    type: SymbolJsonType;
+}
+/**
+ * Simple fill symbols can be used to symbolize polygon geometries.
+ *
+ * See
+ * {@link https://developers.arcgis.com/web-map-specification/objects/esriSFS_symbol/}.
+ */
+export interface SimpleFillSymbolJson extends SymbolJsonBase {
+    /**
+     * Color is represented as a four-element array. The four elements represent
+     * values for red, green, blue, and alpha in that order. Values range from 0
+     * through 255. If color is undefined for a symbol, the color value is
+     * null.
+     */
+    color?: ColorJson;
+    /**
+     * Sets the outline of the fill symbol.
+     */
+    outline?: SimpleLineSymbolJson;
+    /**
+     * The fill style.
+     */
+    style?: "esriSFSBackwardDiagonal" | "esriSFSCross" | "esriSFSDiagonalCross" | "esriSFSForwardDiagonal" | "esriSFSHorizontal" | "esriSFSNull" | "esriSFSSolid" | "esriSFSVertical";
+    /**
+     * @inheritDoc
+     */
+    type: "esriSFS";
+}
+/**
+ * Simple line symbols can be used to symbolize polyline geometries or outlines
+ * for polygon fills.
+ *
+ * See
+ * {@link https://developers.arcgis.com/web-map-specification/objects/esriSLS_symbol/}.
+ */
+export interface SimpleLineSymbolJson extends SymbolJsonBase {
+    /**
+     * Color is represented as a four-element array. The four elements represent
+     * values for red, green, blue, and alpha in that order. Values range from 0
+     * through 255. If color is undefined for a symbol, the color value is
+     * null.
+     */
+    color?: ColorJson;
+    /**
+     * The line style.
+     */
+    style?: "esriSLSDash" | "esriSLSDashDot" | "esriSLSDashDotDot" | "esriSLSDot" | "esriSLSLongDash" | "esriSLSLongDashDot" | "esriSLSLongDashDotDot" | "esriSLSNull" | "esriSLSShortDash" | "esriSLSShortDashDot" | "esriSLSShortDashDotDot" | "esriSLSShortDot" | "esriSLSSolid";
+    /**
+     * Numeric value indicating the width of the line in pixels.
+     */
+    width?: number;
+    /**
+     * @inheritDoc
+     */
+    type: "esriSLS";
+}
+/**
+ * Simple marker symbols can be used to symbolize point geometries.
+ *
+ * See
+ * {@link https://developers.arcgis.com/web-map-specification/objects/esriSMS_symbol/}.
+ */
+export interface SimpleMarkerSymbolJson extends SymbolJsonBase {
+    /**
+     * Numeric value used to rotate the symbol. The symbol is rotated
+     * counter-clockwise. For example, The following, angle=-30, in will create
+     * a symbol rotated -30 degrees counter-clockwise; that is, 30 degrees
+     * clockwise.
+     */
+    angle?: number;
+    /**
+     * Color is represented as a four-element array. The four elements represent
+     * values for red, green, blue, and alpha in that order. Values range from 0
+     * through 255. If color is undefined for a symbol, the color value is
+     * null.
+     */
+    color?: ColorJson;
+    /**
+     * Sets the outline of the marker symbol.
+     */
+    outline?: SimpleLineSymbolJson;
+    /**
+     * Numeric size of the symbol given in pixels.
+     */
+    size?: number;
+    /**
+     * The marker style.
+     */
+    style?: "esriSMSCircle" | "esriSMSCross" | "esriSMSDiamond" | "esriSMSSquare" | "esriSMSX" | "esriSMSTriangle";
+    /**
+     * Numeric value indicating the offset on the x-axis in pixels.
+     */
+    xoffset?: number;
+    /**
+     * Numeric value indicating the offset on the y-axis in pixels.
+     */
+    yoffset?: number;
+    /**
+     * @inheritDoc
+     */
+    type: "esriSMS";
+}
+/**
+ * The type of the Symbol.
+ */
+export type SymbolJsonType = "esriSMS" | "esriSLS" | "esriSFS" | "esriPMS" | "esriPFS" | "esriTS" | "LineSymbol3D" | "MeshSymbol3D" | "PointSymbol3D" | "PolygonSymbol3D" | "LabelSymbol3D" | "styleSymbolReference" | "CIMSymbolReference";

package/SymbolInput/SymbolJson.js

@@ -0,0 +1,2 @@
+// NOTE: This file is copied from the @vertigis/arcgis-extensions project.
+export {};

package/SymbolInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SymbolInput.js";
+export { default } from "./SymbolInput.js";

package/SymbolInput/index.js

@@ -0,0 +1,2 @@
+export * from "./SymbolInput.js";
+export { default } from "./SymbolInput.js";