@open-pioneer/scale-setter 0.11.0-dev.20250515143825 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -2
- package/ScaleSetter.js +16 -10
- package/ScaleSetter.js.map +1 -1
- package/i18n/de.yaml +4 -2
- package/i18n/en.yaml +4 -2
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
# @open-pioneer/scale-setter
|
|
2
2
|
|
|
3
|
-
## 0.11.0
|
|
3
|
+
## 0.11.0
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
7
|
+
- 66179bc: Update to core-packages v4.0.0
|
|
7
8
|
- 738390e: Update to Chakra v3
|
|
8
9
|
|
|
9
10
|
### Patch Changes
|
|
10
11
|
|
|
12
|
+
- c7a3c5b: Change the direction of the chevron icon used by the scale setter to align this component with the other components. Use css rotation or file an issue if this turns out to be a problem.
|
|
13
|
+
- c7a3c5b: Improve screen reader output for scale options.
|
|
11
14
|
- Updated dependencies [738390e]
|
|
15
|
+
- Updated dependencies [66179bc]
|
|
16
|
+
- Updated dependencies [0a8ff71]
|
|
17
|
+
- Updated dependencies [acd5115]
|
|
12
18
|
- Updated dependencies [738390e]
|
|
13
|
-
- @open-pioneer/map@0.11.0
|
|
19
|
+
- @open-pioneer/map@0.11.0
|
|
14
20
|
|
|
15
21
|
## 0.10.0
|
|
16
22
|
|
package/ScaleSetter.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { Menu, Box, Button, Portal } from '@chakra-ui/react';
|
|
2
|
+
import { Menu, Box, Button, Icon, Portal } from '@chakra-ui/react';
|
|
3
3
|
import { useMapModel } from '@open-pioneer/map';
|
|
4
4
|
import { useCommonComponentProps } from '@open-pioneer/react-utils';
|
|
5
5
|
import { useReactiveSnapshot } from '@open-pioneer/reactivity';
|
|
6
6
|
import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
|
|
7
7
|
import { useMemo } from 'react';
|
|
8
|
-
import {
|
|
8
|
+
import { FiChevronDown } from 'react-icons/fi';
|
|
9
9
|
|
|
10
10
|
const DEFAULT_SCALES = [
|
|
11
11
|
17471320,
|
|
@@ -28,14 +28,18 @@ const ScaleSetter = (props) => {
|
|
|
28
28
|
const { containerProps } = useCommonComponentProps("scale-setter", props);
|
|
29
29
|
const { map } = useMapModel(props);
|
|
30
30
|
const intl = useIntl();
|
|
31
|
-
const activeScale = useReactiveSnapshot(() => map?.scale ?? 1, [map]);
|
|
32
31
|
const scaleSelectOptions = useMemo(
|
|
33
32
|
() => scales.map((scaleValue) => {
|
|
34
|
-
const displayScale = renderDisplayScale(intl, scaleValue);
|
|
35
33
|
return /* @__PURE__ */ jsx(
|
|
36
34
|
Menu.Item,
|
|
37
35
|
{
|
|
38
36
|
className: "scale-setter-option",
|
|
37
|
+
"aria-label": intl.formatMessage(
|
|
38
|
+
{
|
|
39
|
+
id: "option.ariaLabel"
|
|
40
|
+
},
|
|
41
|
+
{ scale: scaleValue }
|
|
42
|
+
),
|
|
39
43
|
value: String(scaleValue),
|
|
40
44
|
onClick: () => map?.setScale(scaleValue),
|
|
41
45
|
onFocus: (e) => {
|
|
@@ -43,14 +47,14 @@ const ScaleSetter = (props) => {
|
|
|
43
47
|
block: "nearest"
|
|
44
48
|
});
|
|
45
49
|
},
|
|
46
|
-
children:
|
|
50
|
+
children: renderScaleText(intl, scaleValue)
|
|
47
51
|
},
|
|
48
52
|
scaleValue
|
|
49
53
|
);
|
|
50
54
|
}),
|
|
51
55
|
[intl, map, scales]
|
|
52
56
|
);
|
|
53
|
-
const
|
|
57
|
+
const activeScale = useReactiveSnapshot(() => map?.scale ?? 1, [map]);
|
|
54
58
|
return /* @__PURE__ */ jsx(Box, { ...containerProps, children: /* @__PURE__ */ jsxs(Menu.Root, { children: [
|
|
55
59
|
/* @__PURE__ */ jsx(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
56
60
|
Button,
|
|
@@ -60,14 +64,16 @@ const ScaleSetter = (props) => {
|
|
|
60
64
|
{
|
|
61
65
|
id: "button.ariaLabel"
|
|
62
66
|
},
|
|
63
|
-
{
|
|
67
|
+
{
|
|
68
|
+
scale: activeScale
|
|
69
|
+
}
|
|
64
70
|
),
|
|
65
71
|
"aria-description": intl.formatMessage({
|
|
66
72
|
id: "button.ariaDescription"
|
|
67
73
|
}),
|
|
68
74
|
children: [
|
|
69
|
-
|
|
70
|
-
/* @__PURE__ */ jsx(
|
|
75
|
+
renderScaleText(intl, activeScale),
|
|
76
|
+
/* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(FiChevronDown, {}) })
|
|
71
77
|
]
|
|
72
78
|
}
|
|
73
79
|
) }),
|
|
@@ -82,7 +88,7 @@ const ScaleSetter = (props) => {
|
|
|
82
88
|
) }) })
|
|
83
89
|
] }) });
|
|
84
90
|
};
|
|
85
|
-
function
|
|
91
|
+
function renderScaleText(intl, rawScale) {
|
|
86
92
|
return "1 : " + intl.formatNumber(rawScale);
|
|
87
93
|
}
|
|
88
94
|
|
package/ScaleSetter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScaleSetter.js","sources":["ScaleSetter.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, Button, Menu, Portal } from \"@chakra-ui/react\";\nimport { MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useMemo } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"ScaleSetter.js","sources":["ScaleSetter.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, Button, Icon, Menu, Portal } from \"@chakra-ui/react\";\nimport { MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useMemo } from \"react\";\nimport { FiChevronDown } from \"react-icons/fi\";\n\nconst DEFAULT_SCALES = [\n 17471320, 8735660, 4367830, 2183915, 1091957, 545978, 272989, 136494, 68247, 34123, 17061, 8530,\n 4265, 2132\n];\n\n/**\n * These are the properties supported by the {@link ScaleSetter}.\n */\nexport interface ScaleSetterProps extends CommonComponentProps, MapModelProps {\n /**\n * The set of scales that can be selected by the user.\n */\n scales?: number[];\n}\n\n/**\n * Displays the current scale and allows the user to change it.\n */\nexport const ScaleSetter: FC<ScaleSetterProps> = (props) => {\n const { scales = DEFAULT_SCALES } = props;\n const { containerProps } = useCommonComponentProps(\"scale-setter\", props);\n const { map } = useMapModel(props);\n const intl = useIntl();\n\n const scaleSelectOptions = useMemo(\n () =>\n scales.map((scaleValue) => {\n return (\n <Menu.Item\n className=\"scale-setter-option\"\n aria-label={intl.formatMessage(\n {\n id: \"option.ariaLabel\"\n },\n { scale: scaleValue }\n )}\n value={String(scaleValue)}\n key={scaleValue}\n onClick={() => map?.setScale(scaleValue)}\n onFocus={(e) => {\n // Not available in unit tests\n e.target?.scrollIntoView?.({\n block: \"nearest\"\n });\n }}\n >\n {renderScaleText(intl, scaleValue)}\n </Menu.Item>\n );\n }),\n [intl, map, scales]\n );\n\n const activeScale = useReactiveSnapshot(() => map?.scale ?? 1, [map]);\n return (\n <Box {...containerProps}>\n <Menu.Root>\n <Menu.Trigger asChild>\n <Button\n className=\"scale-setter-menubutton\"\n aria-label={intl.formatMessage(\n {\n id: \"button.ariaLabel\"\n },\n {\n scale: activeScale\n }\n )}\n aria-description={intl.formatMessage({\n id: \"button.ariaDescription\"\n })}\n >\n {renderScaleText(intl, activeScale)}\n <Icon>\n <FiChevronDown />\n </Icon>\n </Button>\n </Menu.Trigger>\n <Portal>\n <Menu.Positioner>\n <Menu.Content\n className=\"scale-setter-menuoptions\"\n maxHeight=\"20em\"\n overflowY=\"auto\"\n >\n {scaleSelectOptions}\n </Menu.Content>\n </Menu.Positioner>\n </Portal>\n </Menu.Root>\n </Box>\n );\n};\n\nfunction renderScaleText(intl: PackageIntl, rawScale: number): string {\n return \"1 : \" + intl.formatNumber(rawScale);\n}\n"],"names":[],"mappings":"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"}
|
package/i18n/de.yaml
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
messages:
|
|
2
2
|
button:
|
|
3
|
-
ariaLabel: "Aktueller Maßstab: {scale}
|
|
4
|
-
ariaDescription: "Drücken Sie Enter um den Maßstab zu ändern
|
|
3
|
+
ariaLabel: "Aktueller Maßstab: 1 zu {scale}"
|
|
4
|
+
ariaDescription: "Drücken Sie Enter um den Maßstab zu ändern"
|
|
5
|
+
option:
|
|
6
|
+
ariaLabel: "Maßstab: 1 zu {scale}"
|
package/i18n/en.yaml
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"type": "module",
|
|
3
3
|
"name": "@open-pioneer/scale-setter",
|
|
4
|
-
"version": "0.11.0
|
|
4
|
+
"version": "0.11.0",
|
|
5
5
|
"description": "This package provides a UI component to change the scale of the map.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"open-pioneer-trails"
|
|
@@ -14,14 +14,14 @@
|
|
|
14
14
|
"directory": "src/packages/scale-setter"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@chakra-ui/react": "^3.
|
|
18
|
-
"@open-pioneer/react-utils": "4.0.0
|
|
19
|
-
"@open-pioneer/runtime": "4.0.0
|
|
20
|
-
"@open-pioneer/reactivity": "4.0.0
|
|
17
|
+
"@chakra-ui/react": "^3.19.2",
|
|
18
|
+
"@open-pioneer/react-utils": "^4.0.0",
|
|
19
|
+
"@open-pioneer/runtime": "^4.0.0",
|
|
20
|
+
"@open-pioneer/reactivity": "^4.0.0",
|
|
21
21
|
"ol": "^10.5.0",
|
|
22
22
|
"react": "^19.1.0",
|
|
23
|
-
"react-icons": "^5.
|
|
24
|
-
"@open-pioneer/map": "0.11.0
|
|
23
|
+
"react-icons": "^5.5.0",
|
|
24
|
+
"@open-pioneer/map": "^0.11.0"
|
|
25
25
|
},
|
|
26
26
|
"exports": {
|
|
27
27
|
"./package.json": "./package.json",
|