@vertigis/react-ui 11.35.0 → 12.0.0

package/SymbolInput/SimpleMarkerSymbolInput.d.ts

@@ -0,0 +1,38 @@
+import { type FC } from "react";
+import type { SymbolJson, SimpleMarkerSymbolJson } from "./SymbolJson.js";
+import type { UnsupportedSymbolProps } from "./UnsupportedSymbol.js";
+import { type SelectValues } from "./utilities.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 {
+    lineColorTitle?: string;
+    lineWidthTitle?: string;
+    fillColorTitle?: string;
+    markerSizeTitle?: string;
+    markerStyleTitle?: string;
+    markerAngleTitle?: string;
+    xOffsetTitle?: string;
+    yOffsetTitle?: string;
+    markerStyleCircle?: string;
+    markerStyleCross?: string;
+    markerStyleDiamond?: string;
+    markerStyleSquare?: string;
+    markerStyleTriangle?: string;
+    markerStyleX?: string;
+}
+export declare function symbolIsSupported(symbol: SymbolJson): boolean;
+export interface SimpleMarkerSymbolInputProps extends Omit<BoxProps, "onChange"> {
+    onChange: (symbol: SymbolJson) => void;
+    symbol: SymbolJson;
+    languageResources?: LanguageResources & UnsupportedSymbolProps["languageResources"];
+    colorResources?: UnsupportedSymbolProps["colorResources"];
+    isSupported?: (symbol: SymbolJson) => symbol is SimpleMarkerSymbolJson;
+    TextInputComponent?: FC<FormLabelTextFieldProps>;
+    NumberInputComponent?: FC<FormLabelSliderFieldProps>;
+    ColorInputComponent?: FC<FormLabelColorFieldProps>;
+}
+declare const SimpleMarkerSymbolInput: FC<SimpleMarkerSymbolInputProps>;
+export default SimpleMarkerSymbolInput;
+export declare const getSimpleMarkerStyles: (t: Required<LanguageResources>) => SelectValues<Required<SimpleMarkerSymbolJson>["style"]>;

package/SymbolInput/SimpleMarkerSymbolInput.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback, useState } from "react";
+import UnsupportedSymbol from "./UnsupportedSymbol.js";
+import { NO_FILL_MARKER_STYLES, toColor, toRgbaString, DEFAULT_LANGUAGE, DEFAULT_PARSE_NUMBER, DEFAULT_FORMAT_NUMBER, getLineStyle, getLineColor, getFillColor, getLineWidth, getMarkerProperty, } from "./utilities.js";
+import Box, {} from "../Box/index.js";
+import FormLabelColorField, {} from "../FormLabelColorField/index.js";
+import FormLabelSliderField, {} from "../FormLabelSliderField/index.js";
+import FormLabelTextField, {} from "../FormLabelTextField/index.js";
+export function symbolIsSupported(symbol) {
+    const type = symbol.type;
+    return type === "esriSMS";
+}
+const SimpleMarkerSymbolInput = props => {
+    const { onChange, symbol, languageResources, colorResources, children, parseNumber, formatNumber, isSupported = symbolIsSupported, TextInputComponent, NumberInputComponent, ColorInputComponent, ...other } = {
+        parseNumber: DEFAULT_PARSE_NUMBER,
+        formatNumber: DEFAULT_FORMAT_NUMBER,
+        ...props,
+    };
+    const isSupportedSymbol = isSupported(symbol);
+    const text = {
+        ...DEFAULT_LANGUAGE,
+        ...languageResources,
+    };
+    const { type } = symbol;
+    const FormTextInput = TextInputComponent ?? FormLabelTextField;
+    const FormNumberInput = NumberInputComponent ?? FormLabelSliderField;
+    const FormColorInput = ColorInputComponent ?? FormLabelColorField;
+    const [lineStyle, setLineStyle] = useState(getLineStyle(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));
+        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)));
+    }, [lineWidth]);
+    const handleMarkerSizeBlur = useCallback((event) => {
+        setMarkerSize(Math.min(100, Math.max(0, markerSize ?? 0)));
+    }, [markerSize]);
+    const handleXOffsetBlur = useCallback((event) => {
+        setXOffset(Math.min(100, Math.max(0, xOffset ?? 0)));
+    }, [xOffset]);
+    const handleYOffsetBlur = useCallback((event) => {
+        setYOffset(Math.min(100, Math.max(0, yOffset ?? 0)));
+    }, [yOffset]);
+    const handleMarkerAngleBlur = useCallback((event) => {
+        setMarkerAngle(Math.min(360, Math.max(0, markerAngle ?? 0)));
+    }, [markerAngle]);
+    // 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 "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(UnsupportedSymbol, { colorResources: colorResources, languageResources: languageResources })), children, isSupportedSymbol && (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, label: text.lineColorTitle, onChange: (value) => {
+                            handleStateChange(toColor(value), "lineColor", setLineColor);
+                        }, value: toRgbaString(lineColor) }), _jsx(FormNumberInput, { fullWidth: true, SliderProps: {
+                            step: 0.5,
+                            min: 0,
+                            max: 25,
+                        }, InputProps: {
+                            onBlur: handleLineWidthBlur,
+                            min: 0,
+                            max: 25,
+                        }, label: text.lineWidthTitle, value: lineWidth, onChange: value => {
+                            handleStateChange(value, "lineWidth", setLineWidth);
+                        } }), _jsx(FormColorInput, { fullWidth: true, label: text.fillColorTitle, onChange: (value) => {
+                            handleStateChange(toColor(value), "fillColor", setFillColor);
+                        }, value: toRgbaString(fillColor), disabled: NO_FILL_MARKER_STYLES.includes(markerStyle) }), _jsx(FormTextInput, { fullWidth: true, nativeSelect: true, label: text.markerStyleTitle, value: markerStyle, onChange: event => {
+                            const { value } = event.target;
+                            handleStateChange(value, "markerStyle", setMarkerStyle);
+                        }, children: getSimpleMarkerStyles(text).map(markerStyle => (_jsx("option", { value: markerStyle.id, children: markerStyle.label }, markerStyle.id))) }), _jsx(FormNumberInput, { fullWidth: true, label: text.markerSizeTitle, value: markerSize, onChange: value => {
+                            handleStateChange(value, "markerSize", setMarkerSize);
+                        }, SliderProps: {
+                            step: 1,
+                            min: 0,
+                            max: 25,
+                        }, InputProps: {
+                            min: 0,
+                            max: 25,
+                            onBlur: handleMarkerSizeBlur,
+                        } }), _jsx(FormNumberInput, { fullWidth: true, label: text.markerAngleTitle, value: markerAngle, onChange: value => {
+                            handleStateChange(value, "markerAngle", setMarkerAngle);
+                        }, SliderProps: {
+                            step: 1,
+                            min: 0,
+                            max: 360,
+                        }, InputProps: {
+                            min: 0,
+                            max: 360,
+                            onBlur: handleMarkerAngleBlur,
+                        } }), _jsx(FormNumberInput, { fullWidth: true, label: text.xOffsetTitle, value: xOffset, onChange: value => {
+                            handleStateChange(value, "xOffset", setXOffset);
+                        }, SliderProps: {
+                            step: 1,
+                            min: -25,
+                            max: 25,
+                        }, InputProps: {
+                            min: -25,
+                            max: 25,
+                            onBlur: handleXOffsetBlur,
+                        } }), _jsx(FormNumberInput, { fullWidth: true, label: text.yOffsetTitle, value: yOffset, onChange: value => {
+                            handleStateChange(value, "yOffset", setYOffset);
+                        }, SliderProps: {
+                            step: 1,
+                            min: -25,
+                            max: 25,
+                        }, InputProps: {
+                            min: -25,
+                            max: 25,
+                            onBlur: handleYOffsetBlur,
+                        } })] }))] }));
+};
+export default SimpleMarkerSymbolInput;
+export 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 },
+    ];
+};

package/SymbolInput/SymbolInput.d.ts

@@ -1,77 +1,28 @@
-import { type FC } from "react";
+import type { FC } from "react";
+import { type SimpleFillSymbolInputProps } from "./SimpleFillSymbolInput.js";
+import { type SimpleLineSymbolInputProps } from "./SimpleLineSymbolInput.js";
+import { type SimpleMarkerSymbolInputProps } from "./SimpleMarkerSymbolInput.js";
 import type { SymbolJson } from "./SymbolJson.js";
+import { type TextSymbolInputProps } from "./TextSymbolInput.js";
+import type { UnsupportedSymbolProps } from "./UnsupportedSymbol.js";
+import type { FontFamily } from "./fonts.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;
-}
+import type { FormLabelAutocompleteFieldProps } from "../FormLabelAutocompleteField/index.js";
+import type { FormLabelColorFieldProps } from "../FormLabelColorField/FormLabelColorField.js";
+import type { FormLabelSliderFieldProps } from "../FormLabelSliderField/FormLabelSliderField.js";
+import type { FormLabelTextFieldProps } from "../FormLabelTextField/FormLabelTextField.js";
 export declare function symbolIsSupported(symbol: SymbolJson): boolean;
 export interface SymbolInputProps extends Omit<BoxProps, "onChange"> {
     onChange: (symbol: SymbolJson) => void;
     symbol: SymbolJson;
-    languageResources?: LanguageResources;
-    colorResources?: ColorResources;
+    languageResources?: SimpleFillSymbolInputProps["languageResources"] & SimpleLineSymbolInputProps["languageResources"] & SimpleMarkerSymbolInputProps["languageResources"] & TextSymbolInputProps["languageResources"];
+    colorResources?: UnsupportedSymbolProps["colorResources"];
     isSupported?: (symbol: SymbolJson) => boolean;
+    AutoCompleteComponent?: FC<FormLabelAutocompleteFieldProps<FontFamily, false, true, false>>;
     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;
+    textSymbolDisplayOptions?: TextSymbolInputProps["displayOptions"];
 }
 declare const SymbolInput: FC<SymbolInputProps>;
 export default SymbolInput;