@mapcomponents/react-maplibre 0.1.82 → 0.1.83
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/dist/components/MlNavigationCompass/MlNavigationCompass.d.ts +22 -37
- package/dist/components/MlNavigationTools/MlNavigationTools.cy.d.ts +1 -0
- package/dist/components/MlNavigationTools/MlNavigationTools.d.ts +1 -5
- package/dist/components/MlNavigationTools/MlNavigationTools.stories.d.ts +1 -0
- package/dist/index.esm.js +169 -198
- package/dist/index.esm.js.map +1 -1
- package/dist/ui_components/MapcomponentsTheme.d.ts +16 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -22,8 +22,7 @@ var ButtonGroup = require('@mui/material/ButtonGroup');
|
|
|
22
22
|
var ControlPointIcon = require('@mui/icons-material/ControlPoint');
|
|
23
23
|
var RemoveCircleOutlineIcon = require('@mui/icons-material/RemoveCircleOutline');
|
|
24
24
|
var Box = require('@mui/material/Box');
|
|
25
|
-
var
|
|
26
|
-
var css = require('@emotion/css');
|
|
25
|
+
var Divider = require('@mui/material/Divider');
|
|
27
26
|
var useMediaQuery = require('@mui/material/useMediaQuery');
|
|
28
27
|
var syncMove = require('@mapbox/mapbox-gl-sync-move');
|
|
29
28
|
var Paper = require('@mui/material/Paper');
|
|
@@ -106,7 +105,7 @@ var ButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(ButtonGroup);
|
|
|
106
105
|
var ControlPointIcon__default = /*#__PURE__*/_interopDefaultLegacy(ControlPointIcon);
|
|
107
106
|
var RemoveCircleOutlineIcon__default = /*#__PURE__*/_interopDefaultLegacy(RemoveCircleOutlineIcon);
|
|
108
107
|
var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
|
|
109
|
-
var
|
|
108
|
+
var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
|
|
110
109
|
var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
|
|
111
110
|
var syncMove__default = /*#__PURE__*/_interopDefaultLegacy(syncMove);
|
|
112
111
|
var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
|
|
@@ -231,11 +230,6 @@ function __spreadArray(to, from, pack) {
|
|
|
231
230
|
}
|
|
232
231
|
}
|
|
233
232
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
function __makeTemplateObject(cooked, raw) {
|
|
237
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
238
|
-
return cooked;
|
|
239
233
|
}
|
|
240
234
|
|
|
241
235
|
var MapLibreGlWrapper = /** @class */ (function () {
|
|
@@ -781,34 +775,30 @@ var darkDefault = styles.createTheme({
|
|
|
781
775
|
var getDesignTokens = function (mode) { return (__assign(__assign({}, (mode === 'light' ? lightDefault : darkDefault)), { palette: __assign({ mode: mode }, (mode === 'dark'
|
|
782
776
|
? {
|
|
783
777
|
primary: {
|
|
784
|
-
main: '#
|
|
778
|
+
main: '#FFF',
|
|
785
779
|
},
|
|
786
780
|
secondary: { main: '#747577' },
|
|
787
|
-
background: {
|
|
788
|
-
default: '#222222',
|
|
789
|
-
paper: '#414141',
|
|
790
|
-
icon: '#525252',
|
|
791
|
-
},
|
|
781
|
+
background: { paper: '#414244', test: '#272727' },
|
|
792
782
|
text: {
|
|
793
|
-
|
|
794
|
-
contrast: '#
|
|
783
|
+
primary: '#BCBDBF',
|
|
784
|
+
contrast: '#000',
|
|
795
785
|
},
|
|
786
|
+
topToolbar: { barColor: '#000' },
|
|
787
|
+
navigation: { navColor: '#525252', navHover: '#626262' },
|
|
788
|
+
compass: { compColor: '#414244', compHover: '#626262' },
|
|
796
789
|
}
|
|
797
790
|
: {
|
|
798
791
|
primary: {
|
|
799
792
|
main: '#009EE0',
|
|
800
793
|
},
|
|
801
794
|
secondary: { main: '#747577' },
|
|
802
|
-
background: {
|
|
803
|
-
default: '#fff',
|
|
804
|
-
paper: '#fdfdfd',
|
|
805
|
-
icon: '#bdbdbd',
|
|
806
|
-
},
|
|
807
795
|
text: {
|
|
808
|
-
primary: '#
|
|
809
|
-
secondary: '#121212',
|
|
796
|
+
primary: '#000',
|
|
810
797
|
contrast: '#fff',
|
|
811
798
|
},
|
|
799
|
+
topToolbar: { barColor: '#fff' },
|
|
800
|
+
navigation: { navColor: '#fff', navHover: '#f5f5f5' },
|
|
801
|
+
compass: { compColor: '#fff', compHover: '#f5f5f5' },
|
|
812
802
|
})) })); };
|
|
813
803
|
var getTheme = function (mode) {
|
|
814
804
|
var _a;
|
|
@@ -825,19 +815,7 @@ var getTheme = function (mode) {
|
|
|
825
815
|
MuiAppBar: {
|
|
826
816
|
styleOverrides: {
|
|
827
817
|
root: {
|
|
828
|
-
backgroundColor: theme.palette.
|
|
829
|
-
},
|
|
830
|
-
},
|
|
831
|
-
},
|
|
832
|
-
MuiIconButton: {
|
|
833
|
-
styleOverrides: {
|
|
834
|
-
root: {
|
|
835
|
-
color: theme.palette.text.primary,
|
|
836
|
-
backgroundColor: theme.palette.background.icon,
|
|
837
|
-
':hover': {
|
|
838
|
-
backgroundColor: theme.palette.background.icon,
|
|
839
|
-
color: theme.palette.primary.main,
|
|
840
|
-
},
|
|
818
|
+
backgroundColor: theme.palette.topToolbar.barColor,
|
|
841
819
|
},
|
|
842
820
|
},
|
|
843
821
|
},
|
|
@@ -865,17 +843,15 @@ var getTheme = function (mode) {
|
|
|
865
843
|
height: '30px',
|
|
866
844
|
fontSize: '1.2em',
|
|
867
845
|
},
|
|
868
|
-
_a.
|
|
846
|
+
_a.color = theme.palette.text.primary,
|
|
847
|
+
_a.backgroundColor = theme.palette.navigation.navColor,
|
|
869
848
|
_a.borderRadius = '23%',
|
|
870
|
-
//border: "1px solid #bbb",
|
|
871
|
-
//boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
|
|
872
849
|
_a.margin = '0.15px',
|
|
873
850
|
_a.marginTop = '4px',
|
|
874
851
|
_a[':hover'] = {
|
|
875
852
|
color: theme.palette.primary.main,
|
|
876
|
-
backgroundColor: theme.palette.
|
|
853
|
+
backgroundColor: theme.palette.navigation.navHover,
|
|
877
854
|
},
|
|
878
|
-
_a.color = theme.palette.text.secondary,
|
|
879
855
|
_a),
|
|
880
856
|
},
|
|
881
857
|
],
|
|
@@ -1562,7 +1538,7 @@ var MlCreatePdfButton = function (props) {
|
|
|
1562
1538
|
});
|
|
1563
1539
|
}
|
|
1564
1540
|
} }, loading ? (React__default["default"].createElement(material.CircularProgress, { size: 24, sx: {
|
|
1565
|
-
color: '
|
|
1541
|
+
color: '#fff',
|
|
1566
1542
|
} })) : (React__default["default"].createElement(PrinterIcon__default["default"], null)))));
|
|
1567
1543
|
};
|
|
1568
1544
|
MlCreatePdfButton.defaultProps = {
|
|
@@ -2641,60 +2617,97 @@ MlMeasureTool.defaultProps = {
|
|
|
2641
2617
|
unit: "kilometers",
|
|
2642
2618
|
};
|
|
2643
2619
|
|
|
2644
|
-
|
|
2645
|
-
var SvgRotateRight = function SvgRotateRight(props) {
|
|
2646
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
2647
|
-
width: "39.675098mm",
|
|
2648
|
-
height: "104.27064mm",
|
|
2649
|
-
viewBox: "0 0 39.675098 104.27064"
|
|
2650
|
-
}, props), /*#__PURE__*/React__namespace.createElement("g", {
|
|
2651
|
-
transform: "translate(-86.019554,-58.032633)"
|
|
2652
|
-
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
2653
|
-
style: {
|
|
2654
|
-
strokeWidth: 0.744756
|
|
2655
|
-
},
|
|
2656
|
-
d: "m 442.74023,219.33594 -117.62695,32.32422 54.71094,31.12304 c -21.99397,41.5931 -32.8507,84.88283 -38.33008,127.89649 -6.86182,50.94051 -5.95715,103.99765 20.23828,155.46484 5.97246,11.72776 13.65817,23.59773 24.38867,35.06641 2.6597,2.84073 5.65602,5.75455 9.12891,8.68164 0.87557,0.7378 1.85363,1.52609 2.95117,2.35547 0.29669,0.22563 0.63616,0.47742 1.02149,0.75586 l 0.58203,0.42578 34.57812,-15.12305 -0.33789,-0.2207 c -0.0265,-0.0151 -0.0842,-0.0587 -0.18359,-0.13086 -0.46723,-0.34885 -0.9819,-0.76796 -1.56055,-1.25 -2.29757,-1.91343 -4.46539,-4.04643 -6.64062,-6.33985 -8.80052,-9.27114 -15.30333,-19.4993 -20.83985,-30.13867 -24.42289,-46.90715 -24.77465,-97.03535 -18.58008,-146.68164 4.94388,-37.37493 13.65299,-74.4847 30.20508,-109.92969 l 58.6211,33.34766 z",
|
|
2657
|
-
transform: "scale(0.26458333)"
|
|
2658
|
-
})));
|
|
2659
|
-
};
|
|
2660
|
-
|
|
2661
|
-
var _g$1;
|
|
2620
|
+
var _path$1, _path2$1;
|
|
2662
2621
|
function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
2663
|
-
var
|
|
2622
|
+
var SvgCompassNeedle = function SvgCompassNeedle(props) {
|
|
2664
2623
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
2665
|
-
width:
|
|
2666
|
-
height:
|
|
2667
|
-
viewBox: "0 0
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
2671
|
-
d: "
|
|
2672
|
-
|
|
2624
|
+
width: 9,
|
|
2625
|
+
height: 40,
|
|
2626
|
+
viewBox: "0 0 9 40",
|
|
2627
|
+
fill: "none",
|
|
2628
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
2629
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2630
|
+
d: "M3.34715 4.52028C3.57452 3.46874 5.0746 3.46874 5.30197 4.52028L8.64912 20H0L3.34715 4.52028Z",
|
|
2631
|
+
fill: "#CF003D"
|
|
2632
|
+
})), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2633
|
+
d: "M3.34715 35.4797C3.57452 36.5313 5.0746 36.5313 5.30197 35.4797L8.64912 20H0L3.34715 35.4797Z",
|
|
2634
|
+
fill: "#D3DCE1"
|
|
2635
|
+
})));
|
|
2673
2636
|
};
|
|
2674
2637
|
|
|
2675
|
-
var
|
|
2638
|
+
var _circle, _path, _path2, _path3, _path4;
|
|
2676
2639
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2677
|
-
var
|
|
2640
|
+
var SvgCompassBackground = function SvgCompassBackground(props) {
|
|
2678
2641
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
2679
|
-
width:
|
|
2680
|
-
height:
|
|
2681
|
-
viewBox: "0 0
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
}, /*#__PURE__*/React__namespace.createElement("
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2642
|
+
width: 52,
|
|
2643
|
+
height: 53,
|
|
2644
|
+
viewBox: "0 0 52 53",
|
|
2645
|
+
fill: "none",
|
|
2646
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
2647
|
+
}, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
|
|
2648
|
+
cx: 26.0001,
|
|
2649
|
+
cy: 26.1843,
|
|
2650
|
+
r: 24,
|
|
2651
|
+
fill: "white",
|
|
2652
|
+
stroke: "#009EE0",
|
|
2653
|
+
strokeWidth: 2
|
|
2654
|
+
})), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2655
|
+
d: "M26.4915 7.59161C26.3524 8.07338 25.6698 8.07338 25.5307 7.59161L24.2998 3.3276C24.2075 3.0079 24.4474 2.68893 24.7802 2.68893H27.242C27.5748 2.68893 27.8147 3.0079 27.7224 3.3276L26.4915 7.59161Z",
|
|
2656
|
+
fill: "#009EE0"
|
|
2657
|
+
})), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2658
|
+
d: "M25.5085 44.7598C25.6476 44.278 26.3302 44.278 26.4693 44.7598L27.7002 49.0238C27.7925 49.3435 27.5526 49.6625 27.2198 49.6625H24.758C24.4252 49.6625 24.1853 49.3435 24.2776 49.0238L25.5085 44.7598Z",
|
|
2659
|
+
fill: "#009EE0"
|
|
2660
|
+
})), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2661
|
+
d: "M44.6641 26.4915C44.1823 26.3524 44.1823 25.6698 44.6641 25.5307L48.9281 24.2998C49.2478 24.2075 49.5668 24.4474 49.5668 24.7802V27.242C49.5668 27.5747 49.2478 27.8147 48.9281 27.7224L44.6641 26.4915Z",
|
|
2662
|
+
fill: "#009EE0"
|
|
2663
|
+
})), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2664
|
+
d: "M7.3959 25.6085C7.87766 25.7476 7.87766 26.4302 7.3959 26.5693L3.13189 27.8002C2.81218 27.8925 2.49321 27.6526 2.49321 27.3198L2.49321 24.858C2.49321 24.5253 2.81218 24.2853 3.13189 24.3776L7.3959 25.6085Z",
|
|
2665
|
+
fill: "#009EE0"
|
|
2666
|
+
})));
|
|
2689
2667
|
};
|
|
2690
2668
|
|
|
2691
|
-
var
|
|
2692
|
-
var
|
|
2693
|
-
var
|
|
2669
|
+
var StyleBox = material.styled('div')(function (_a) {
|
|
2670
|
+
var _b;
|
|
2671
|
+
var theme = _a.theme;
|
|
2672
|
+
return (_b = {
|
|
2673
|
+
zIndex: 1000,
|
|
2674
|
+
cursor: 'pointer',
|
|
2675
|
+
transform: 'scale(1)'
|
|
2676
|
+
},
|
|
2677
|
+
_b[theme.breakpoints.down('md')] = {
|
|
2678
|
+
transform: 'scale(1.6)',
|
|
2679
|
+
},
|
|
2680
|
+
_b);
|
|
2681
|
+
});
|
|
2682
|
+
var CompassBox = material.styled('div')(function (_a) {
|
|
2683
|
+
var _b;
|
|
2684
|
+
var theme = _a.theme;
|
|
2685
|
+
return (_b = {
|
|
2686
|
+
position: 'absolute',
|
|
2687
|
+
right: '-10px',
|
|
2688
|
+
top: '-52px'
|
|
2689
|
+
},
|
|
2690
|
+
_b[theme.breakpoints.down('md')] = {
|
|
2691
|
+
right: '0px',
|
|
2692
|
+
top: '-52px',
|
|
2693
|
+
},
|
|
2694
|
+
_b.circle = {
|
|
2695
|
+
fill: theme.palette.compass.compColor,
|
|
2696
|
+
},
|
|
2697
|
+
_b['&:hover circle'] = {
|
|
2698
|
+
fill: theme.palette.compass.compHover,
|
|
2699
|
+
},
|
|
2700
|
+
_b);
|
|
2701
|
+
});
|
|
2702
|
+
var NeedleBox = material.styled('div')({
|
|
2703
|
+
position: 'absolute',
|
|
2704
|
+
right: '21.4px',
|
|
2705
|
+
top: '6px',
|
|
2706
|
+
});
|
|
2694
2707
|
/**
|
|
2695
2708
|
* Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
|
|
2696
2709
|
*
|
|
2697
|
-
* All style props are applied using @
|
|
2710
|
+
* All style props are applied using @mui/material/styled to allow more complex css selectors.
|
|
2698
2711
|
*
|
|
2699
2712
|
* @component
|
|
2700
2713
|
*/
|
|
@@ -2704,89 +2717,46 @@ var MlNavigationCompass = function (props) {
|
|
|
2704
2717
|
waitForLayer: props.insertBeforeLayer,
|
|
2705
2718
|
});
|
|
2706
2719
|
var _a = React.useState(0), bearing = _a[0], setBearing = _a[1];
|
|
2720
|
+
var _updateBearing = function () {
|
|
2721
|
+
var _a, _b;
|
|
2722
|
+
if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getBearing))
|
|
2723
|
+
return;
|
|
2724
|
+
setBearing(Math.round(mapHook.map.map.getBearing()));
|
|
2725
|
+
};
|
|
2707
2726
|
React.useEffect(function () {
|
|
2708
2727
|
if (!mapHook.map)
|
|
2709
2728
|
return;
|
|
2710
|
-
|
|
2711
|
-
var _a, _b;
|
|
2712
|
-
if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getBearing))
|
|
2713
|
-
return;
|
|
2714
|
-
setBearing(Math.round(mapHook.map.map.getBearing()));
|
|
2715
|
-
};
|
|
2716
|
-
mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
|
|
2729
|
+
mapHook.map.on('rotate', _updateBearing, mapHook.componentId);
|
|
2717
2730
|
_updateBearing();
|
|
2718
2731
|
return function () {
|
|
2719
2732
|
var _a;
|
|
2720
|
-
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.off(
|
|
2733
|
+
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.off('rotate', _updateBearing);
|
|
2721
2734
|
};
|
|
2722
2735
|
}, [mapHook.map, props.mapId]);
|
|
2736
|
+
var rotate = function () {
|
|
2737
|
+
var _a, _b, _c, _d;
|
|
2738
|
+
if (bearing == 0) {
|
|
2739
|
+
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setBearing(-90);
|
|
2740
|
+
}
|
|
2741
|
+
else if (bearing == -90) {
|
|
2742
|
+
(_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.map.setBearing(180);
|
|
2743
|
+
}
|
|
2744
|
+
else if (bearing == 180) {
|
|
2745
|
+
(_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.map.setBearing(90);
|
|
2746
|
+
}
|
|
2747
|
+
else {
|
|
2748
|
+
(_d = mapHook.map) === null || _d === void 0 ? void 0 : _d.map.setBearing(0);
|
|
2749
|
+
}
|
|
2750
|
+
};
|
|
2723
2751
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2724
|
-
React__default["default"].createElement(
|
|
2725
|
-
React__default["default"].createElement(
|
|
2726
|
-
React__default["default"].createElement(
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
var bearing = Math.round(mapHook.map.map.getBearing());
|
|
2731
|
-
var rest = Math.round(bearing % 90);
|
|
2732
|
-
if (bearing > 0) {
|
|
2733
|
-
rest = 90 - rest;
|
|
2734
|
-
}
|
|
2735
|
-
if (rest === 0) {
|
|
2736
|
-
rest = 90;
|
|
2737
|
-
}
|
|
2738
|
-
mapHook.map.map.setBearing(Math.round(bearing + Math.abs(rest)));
|
|
2739
|
-
} })),
|
|
2740
|
-
React__default["default"].createElement(NeedleButton, { className: css.css(__assign({}, props.needleStyle)), onClick: function () {
|
|
2741
|
-
var _a;
|
|
2742
|
-
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setBearing(0);
|
|
2743
|
-
} },
|
|
2744
|
-
React__default["default"].createElement(NeedleContainer, { style: {
|
|
2745
|
-
transform: "rotate(" + (bearing > 0 ? "-" + bearing : -1 * bearing) + "deg)",
|
|
2746
|
-
} },
|
|
2747
|
-
React__default["default"].createElement(SvgNeedle, null))),
|
|
2748
|
-
React__default["default"].createElement(RotateButton, { className: css.css(__assign({}, props.rotateLeftStyle)) },
|
|
2749
|
-
React__default["default"].createElement(SvgRotateLeft, { onClick: function () {
|
|
2750
|
-
if (!mapHook.map)
|
|
2751
|
-
return;
|
|
2752
|
-
var bearing = Math.round(mapHook.map.map.getBearing());
|
|
2753
|
-
var rest = Math.round(bearing % 90);
|
|
2754
|
-
if (bearing < 0) {
|
|
2755
|
-
rest = 90 + rest;
|
|
2756
|
-
}
|
|
2757
|
-
if (rest === 0) {
|
|
2758
|
-
rest = 90;
|
|
2759
|
-
}
|
|
2760
|
-
mapHook.map.map.setBearing(Math.round(bearing - Math.abs(rest)));
|
|
2752
|
+
React__default["default"].createElement(StyleBox, { sx: __assign({}, props.style) },
|
|
2753
|
+
React__default["default"].createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
|
|
2754
|
+
React__default["default"].createElement(SvgCompassBackground, null),
|
|
2755
|
+
React__default["default"].createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
|
|
2756
|
+
React__default["default"].createElement(SvgCompassNeedle, { style: {
|
|
2757
|
+
transform: 'rotate(' + (bearing > 0 ? '-' + bearing : -1 * bearing) + 'deg)',
|
|
2761
2758
|
} }))))));
|
|
2762
|
-
};
|
|
2763
|
-
MlNavigationCompass.propTypes = {
|
|
2764
|
-
/**
|
|
2765
|
-
* Component id prefix
|
|
2766
|
-
*/
|
|
2767
|
-
idPrefix: PropTypes__default["default"].string,
|
|
2768
|
-
/**
|
|
2769
|
-
* Style object to adjust css definitions of the component.
|
|
2770
|
-
*/
|
|
2771
|
-
style: PropTypes__default["default"].object,
|
|
2772
|
-
/**
|
|
2773
|
-
* Style object to adjust css definitions of the background.
|
|
2774
|
-
*/
|
|
2775
|
-
backgroundStyle: PropTypes__default["default"].object,
|
|
2776
|
-
/**
|
|
2777
|
-
* Style object to adjust css definitions of the compass needle.
|
|
2778
|
-
*/
|
|
2779
|
-
needleStyle: PropTypes__default["default"].object,
|
|
2780
|
-
/**
|
|
2781
|
-
* Style object to adjust css definitions of the rotate right button.
|
|
2782
|
-
*/
|
|
2783
|
-
rotateRightStyle: PropTypes__default["default"].object,
|
|
2784
|
-
/**
|
|
2785
|
-
* Style object to adjust css definitions of the rotate left button.
|
|
2786
|
-
*/
|
|
2787
|
-
rotateLeftStyle: PropTypes__default["default"].object,
|
|
2788
|
-
};
|
|
2789
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
2759
|
+
};
|
|
2790
2760
|
|
|
2791
2761
|
/**
|
|
2792
2762
|
* @component
|
|
@@ -2797,7 +2767,7 @@ var MlNavigationTools = function (props) {
|
|
|
2797
2767
|
waitForLayer: props.insertBeforeLayer,
|
|
2798
2768
|
});
|
|
2799
2769
|
var _a = React.useState(0), pitch = _a[0], setPitch = _a[1];
|
|
2800
|
-
var mediaIsMobile = useMediaQuery__default["default"](
|
|
2770
|
+
var mediaIsMobile = useMediaQuery__default["default"](function (theme) { return theme.breakpoints.down('md'); });
|
|
2801
2771
|
React.useEffect(function () {
|
|
2802
2772
|
if (!mapHook.map)
|
|
2803
2773
|
return;
|
|
@@ -2831,28 +2801,20 @@ var MlNavigationTools = function (props) {
|
|
|
2831
2801
|
}
|
|
2832
2802
|
mapHook.map.map.easeTo({ pitch: targetPitch });
|
|
2833
2803
|
}, [mapHook.map]);
|
|
2834
|
-
return (React__default["default"].createElement(Box__default["default"], { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column' }, (mediaIsMobile ? { margin: '
|
|
2835
|
-
React__default["default"].createElement(MlNavigationCompass,
|
|
2836
|
-
|
|
2837
|
-
position: 'relative',
|
|
2838
|
-
height: mediaIsMobile ? '55px' : '45px',
|
|
2839
|
-
marginLeft: mediaIsMobile ? '3px' : '-5px',
|
|
2840
|
-
transform: mediaIsMobile ? 'scale(1.6)' : 'scale(1)',
|
|
2841
|
-
}, backgroundStyle: {
|
|
2842
|
-
boxShadow: '0px 0px 18px rgba(0,0,0,.5)',
|
|
2843
|
-
} }),
|
|
2844
|
-
props.show3DButton && (React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: adjustPitch }, pitch ? '2D' : '3D')),
|
|
2804
|
+
return (React__default["default"].createElement(Box__default["default"], { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column', right: mediaIsMobile ? '15px' : '25px', bottom: mediaIsMobile ? '20px' : '30px' }, (mediaIsMobile ? { margin: '80px 10px 20px 10px' } : { marginTop: '50px' })), props.sx) },
|
|
2805
|
+
React__default["default"].createElement(MlNavigationCompass, null),
|
|
2806
|
+
props.show3DButton && (React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: adjustPitch, className: "pitchbutton", sx: {} }, pitch ? '2D' : '3D')),
|
|
2845
2807
|
props.showFollowGpsButton && React__default["default"].createElement(MlFollowGps, null),
|
|
2846
2808
|
props.showCenterLocationButton && React__default["default"].createElement(MlCenterPosition, null),
|
|
2847
2809
|
React__default["default"].createElement(ButtonGroup__default["default"], { orientation: "vertical", sx: {
|
|
2848
|
-
width: '50px',
|
|
2849
2810
|
border: 'none',
|
|
2850
2811
|
Button: { minWidth: '20px !important' },
|
|
2851
2812
|
'Button:hover': { border: 'none' },
|
|
2852
2813
|
} }, props.showZoomButtons && (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2853
|
-
React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: zoomIn },
|
|
2814
|
+
React__default["default"].createElement(Button__default["default"], { className: "zoomplus", variant: "navtools", onClick: zoomIn },
|
|
2854
2815
|
React__default["default"].createElement(ControlPointIcon__default["default"], { sx: { fontSize: { xs: '1.4em', md: '1em' } } })),
|
|
2855
|
-
React__default["default"].createElement(
|
|
2816
|
+
React__default["default"].createElement(Divider__default["default"], { sx: { zIndex: 500, marginLeft: '7px', marginRight: '7px' } }),
|
|
2817
|
+
React__default["default"].createElement(Button__default["default"], { className: "zoomminus", variant: "navtools", onClick: zoomOut },
|
|
2856
2818
|
React__default["default"].createElement(RemoveCircleOutlineIcon__default["default"], { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))))),
|
|
2857
2819
|
props.children && React__default["default"].cloneElement(props.children, {})));
|
|
2858
2820
|
};
|
|
@@ -2862,10 +2824,6 @@ MlNavigationTools.defaultProps = {
|
|
|
2862
2824
|
showFollowGpsButton: true,
|
|
2863
2825
|
showCenterLocationButton: false,
|
|
2864
2826
|
showZoomButtons: true,
|
|
2865
|
-
sx: {
|
|
2866
|
-
right: "5px",
|
|
2867
|
-
bottom: "20px",
|
|
2868
|
-
},
|
|
2869
2827
|
};
|
|
2870
2828
|
|
|
2871
2829
|
/**
|
|
@@ -5601,7 +5559,7 @@ function TemporalControllerPlayer(props) {
|
|
|
5601
5559
|
var _b = React.useState(props.isPlaying), isPlaying = _b[0], setIsPlaying = _b[1];
|
|
5602
5560
|
var range = props.maxVal - props.minVal;
|
|
5603
5561
|
var intervalRef = React.useRef();
|
|
5604
|
-
var mediaIsMobile = material.useMediaQuery(
|
|
5562
|
+
var mediaIsMobile = material.useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
|
|
5605
5563
|
React.useEffect(function () {
|
|
5606
5564
|
return function () {
|
|
5607
5565
|
if (intervalRef.current) {
|
|
@@ -6282,15 +6240,22 @@ var ColorPicker = function (_a) {
|
|
|
6282
6240
|
var _c = React.useState((props === null || props === void 0 ? void 0 : props.value) || ''), value = _c[0], setValue = _c[1];
|
|
6283
6241
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6284
6242
|
React__default["default"].createElement(material.Grid, { container: true, sx: { flexWrap: 'nowrap' } },
|
|
6285
|
-
React__default["default"].createElement(material.Grid, { xs:
|
|
6243
|
+
React__default["default"].createElement(material.Grid, { xs: 12, item: true },
|
|
6286
6244
|
React__default["default"].createElement(material.Button, { variant: "outlined", onClick: function () { return setShowPicker(true); }, sx: {
|
|
6287
|
-
minWidth: '
|
|
6245
|
+
minWidth: '100%',
|
|
6288
6246
|
padding: '5px',
|
|
6247
|
+
marginBottom: '10px',
|
|
6248
|
+
justifyContent: 'flex-start',
|
|
6289
6249
|
borderColor: function (theme) { return theme.palette.text.primary; },
|
|
6250
|
+
color: function (theme) { return theme.palette.text.primary; },
|
|
6290
6251
|
} },
|
|
6291
|
-
React__default["default"].createElement("div", { style: {
|
|
6292
|
-
|
|
6293
|
-
|
|
6252
|
+
React__default["default"].createElement("div", { style: {
|
|
6253
|
+
width: '25px',
|
|
6254
|
+
height: '25px',
|
|
6255
|
+
marginRight: '10px',
|
|
6256
|
+
backgroundColor: value,
|
|
6257
|
+
} }),
|
|
6258
|
+
value))),
|
|
6294
6259
|
showPicker && (React__default["default"].createElement("div", { style: { position: 'relative', marginTop: 0 } },
|
|
6295
6260
|
React__default["default"].createElement("div", { style: { position: 'absolute', zIndex: 1000 } },
|
|
6296
6261
|
React__default["default"].createElement("div", { style: { position: 'fixed', top: '0px', right: '0px', bottom: '0px', left: '0px' }, onClick: function () {
|
|
@@ -6396,13 +6361,16 @@ function LayerPropertyForm(_a) {
|
|
|
6396
6361
|
return null;
|
|
6397
6362
|
}, [paintProps]);
|
|
6398
6363
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6399
|
-
React__default["default"].createElement(material.
|
|
6400
|
-
|
|
6401
|
-
|
|
6402
|
-
|
|
6403
|
-
|
|
6404
|
-
|
|
6405
|
-
|
|
6364
|
+
React__default["default"].createElement(material.Paper, { sx: {
|
|
6365
|
+
marginLeft: '-100px',
|
|
6366
|
+
marginRight: '-21px',
|
|
6367
|
+
paddingLeft: '81px',
|
|
6368
|
+
borderRadius: '0px',
|
|
6369
|
+
} },
|
|
6370
|
+
React__default["default"].createElement(material.ListItem, { key: key + '_paintPropForm' },
|
|
6371
|
+
React__default["default"].createElement(material.Box, { sx: {
|
|
6372
|
+
marginLeft: '61px',
|
|
6373
|
+
} }, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); }))))));
|
|
6406
6374
|
}
|
|
6407
6375
|
|
|
6408
6376
|
function LayerListFolder(_a) {
|
|
@@ -6431,14 +6399,18 @@ function LayerListFolder(_a) {
|
|
|
6431
6399
|
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
6432
6400
|
}, [_visible]);
|
|
6433
6401
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6434
|
-
React__default["default"].createElement(material.ListItem, {
|
|
6402
|
+
React__default["default"].createElement(material.ListItem, { className: 'listItemFolder', sx: {
|
|
6435
6403
|
paddingRight: 0,
|
|
6436
6404
|
paddingLeft: 0,
|
|
6437
6405
|
paddingTop: 0,
|
|
6438
6406
|
paddingBottom: '4px',
|
|
6439
6407
|
} },
|
|
6440
6408
|
React__default["default"].createElement(material.ListItemIcon, { sx: { minWidth: '30px' } },
|
|
6441
|
-
React__default["default"].createElement(material.
|
|
6409
|
+
React__default["default"].createElement(material.IconButton, { sx: {
|
|
6410
|
+
marginRight: '0px',
|
|
6411
|
+
padding: '0px',
|
|
6412
|
+
}, edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default["default"].createElement(iconsMaterial.ExpandMore, null) : React__default["default"].createElement(iconsMaterial.KeyboardArrowRight, null)),
|
|
6413
|
+
React__default["default"].createElement(material.Checkbox, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, sx: { padding: 0, marginRight: '5px' }, onClick: function () {
|
|
6442
6414
|
if (setVisible) {
|
|
6443
6415
|
setVisible(function (val) { return !val; });
|
|
6444
6416
|
}
|
|
@@ -6448,7 +6420,7 @@ function LayerListFolder(_a) {
|
|
|
6448
6420
|
} })),
|
|
6449
6421
|
React__default["default"].createElement(material.ListItemText, { primary: name, variant: "layerlist" })),
|
|
6450
6422
|
React__default["default"].createElement(system.Box, { sx: { display: open ? 'block' : 'none' } },
|
|
6451
|
-
React__default["default"].createElement(material.List, { component: "div", disablePadding: true, sx: {
|
|
6423
|
+
React__default["default"].createElement(material.List, { component: "div", disablePadding: true, sx: { marginLeft: '25px' } }, _children))));
|
|
6452
6424
|
}
|
|
6453
6425
|
|
|
6454
6426
|
function LayerListItemVectorLayer(_a) {
|
|
@@ -6587,13 +6559,13 @@ function LayerListItem(_a) {
|
|
|
6587
6559
|
return undefined;
|
|
6588
6560
|
}, [layerComponent]);
|
|
6589
6561
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6590
|
-
!((_f = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _f === void 0 ? void 0 : _f.layers) && (React__default["default"].createElement(material.ListItem, { sx: __assign({ paddingRight: configurable ? '56px' : 0, paddingLeft:
|
|
6562
|
+
!((_f = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _f === void 0 ? void 0 : _f.layers) && (React__default["default"].createElement(material.ListItem, { sx: __assign({ paddingRight: configurable ? '56px' : 0, paddingLeft: '25px', paddingTop: 0, paddingBottom: '4px' }, props.listItemSx), secondaryAction: configurable && ((_g = Object.keys(paintProps)) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, props === null || props === void 0 ? void 0 :
|
|
6591
6563
|
props.buttons,
|
|
6592
6564
|
React__default["default"].createElement(material.IconButton, { edge: props.showDeleteButton ? false : 'end', "aria-label": "settings", onClick: function () {
|
|
6593
6565
|
setPaintPropsFormVisible(function (current) {
|
|
6594
6566
|
return !current;
|
|
6595
6567
|
});
|
|
6596
|
-
}, sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})) },
|
|
6568
|
+
}, sx: __assign({ marginRight: '0px', padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})) },
|
|
6597
6569
|
React__default["default"].createElement(TuneIcon__default["default"], null)),
|
|
6598
6570
|
props.showDeleteButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6599
6571
|
React__default["default"].createElement(material.IconButton, { edge: "end", "aria-label": "delete", onClick: function () {
|
|
@@ -6934,7 +6906,7 @@ var Puller = styles.styled(Box__default["default"])(function (_a) {
|
|
|
6934
6906
|
});
|
|
6935
6907
|
function Sidebar(_a) {
|
|
6936
6908
|
var drawerPaperProps = _a.drawerPaperProps, drawerHeaderProps = _a.drawerHeaderProps, setOpen = _a.setOpen, props = __rest(_a, ["drawerPaperProps", "drawerHeaderProps", "setOpen"]);
|
|
6937
|
-
var mediaIsMobile = useMediaQuery__default["default"](
|
|
6909
|
+
var mediaIsMobile = useMediaQuery__default["default"](function (theme) { return theme.breakpoints.down('sm'); });
|
|
6938
6910
|
var _b = React.useState(false), drawerOpen = _b[0], setDrawerOpen = _b[1];
|
|
6939
6911
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6940
6912
|
!mediaIsMobile ? (React__default["default"].createElement(Box__default["default"], { sx: { display: { xs: 'none', sm: 'flex' }, mr: 1 } },
|
|
@@ -19867,7 +19839,6 @@ var SpeedDial = function () {
|
|
|
19867
19839
|
}
|
|
19868
19840
|
};
|
|
19869
19841
|
var handleClose = function () { return setOpen(false); };
|
|
19870
|
-
var theme = getTheme('light');
|
|
19871
19842
|
return (React__default["default"].createElement(Box__default["default"], { sx: {
|
|
19872
19843
|
height: 330,
|
|
19873
19844
|
transform: 'translateZ(0px)',
|
|
@@ -19878,7 +19849,7 @@ var SpeedDial = function () {
|
|
|
19878
19849
|
width: '100px',
|
|
19879
19850
|
zIndex: '1000',
|
|
19880
19851
|
} },
|
|
19881
|
-
React__default["default"].createElement(MuiSpeedDial__default["default"], { ariaLabel: "SpeedDial tooltip example", sx: { position: 'absolute', bottom: 16, right: 16 }, icon: open ? React__default["default"].createElement(CloseIcon__default["default"], { fontSize: "large" }) : React__default["default"].createElement(MoreVertIcon__default["default"], { fontSize: "large" }), onClick: open ? handleClose : handleOpen, onOpen: handleOpen, open: open }, actions.map(function (action) { return (React__default["default"].createElement(SpeedDialAction__default["default"], { key: action.name, icon: action.icon, tooltipTitle: action.name, tooltipOpen: true, onClick: handleClose, FabProps: { sx: { color:
|
|
19852
|
+
React__default["default"].createElement(MuiSpeedDial__default["default"], { ariaLabel: "SpeedDial tooltip example", sx: { position: 'absolute', bottom: 16, right: 16 }, icon: open ? React__default["default"].createElement(CloseIcon__default["default"], { fontSize: "large" }) : React__default["default"].createElement(MoreVertIcon__default["default"], { fontSize: "large" }), onClick: open ? handleClose : handleOpen, onOpen: handleOpen, open: open }, actions.map(function (action) { return (React__default["default"].createElement(SpeedDialAction__default["default"], { key: action.name, icon: action.icon, tooltipTitle: action.name, tooltipOpen: true, onClick: handleClose, FabProps: { sx: { color: 'text.primary' } } })); }))));
|
|
19882
19853
|
};
|
|
19883
19854
|
SpeedDial.defaultProps = {
|
|
19884
19855
|
mapId: undefined,
|