import { aD as jsxRuntimeExports, I as Icon, ar as Tooltip, am as LazyLoad, w as appContext, i as __read, z as useStaticCallback, v as i18n, s as __assign$4, aL as Dropdown, b4 as getOffsetPlacements, b5 as FULLSCREEN } from './MapEditView-24782753.js';
import { observer } from 'mobx-react';
import * as React from 'react';
import React__default, { useCallback, useMemo, useRef, useState, useEffect, createElement } from 'react';
import classNames from 'classnames';
import { size, get } from 'lodash';
import { useDebounceFn } from 'ahooks';
import 'maptalks';
import 'uuid';
import 'mobx';
import 'lz-string';
import 'dayjs';
import 'react-dom';
import 'react-is';
import '@loadable/component';
import 'js-beautify';
import 'axios';
import 'superstruct';
import '@tanem/react-nprogress';
import 'jquery';
import 'chroma-js';
import 'js-cookie';
import 'is-email';
import 'is-uuid';
import 'is-url';
import 'anymatch';
import 'perf-request';
import '@syncpoint/wkx';
import 'buffer';
import '@turf/turf';
import '@mapbox/polylabel';
import 'turf-multipolygon';
import 'turf-polygon';
import 'gcoord';
import 'eventemitter2';
import 'geobuf';
import 'localforage';
import 'rc-menu';
import 'perfect-scrollbar';
import 'jszip';
import 'file-saver';
import 'screenfull';
import 'sql-formatter-fork';
import 'array-move';
import 'turf-multilinestring';
import 'copy-to-clipboard';
import 'maptalks.three';
import 'ajv';
import 'spark-md5';
import 'react-draggable';
import 'react-virtualized';
import 'turf-point';
import 'decamelize';
import 'rbush';
import 'qs';
import 'maptalks.snap';
import 'react-use';
import 'react-rnd';
import 'react-beautiful-dnd';

var useToggle$1 = {};

Object.defineProperty(useToggle$1, "__esModule", { value: true });
var react_1 = React__default;
var toggleReducer = function (state, nextValue) { return (typeof nextValue === 'boolean' ? nextValue : !state); };
var useToggle = function (initialValue) {
    return react_1.useReducer(toggleReducer, initialValue);
};
var _default = useToggle$1.default = useToggle;

var __assign$3 = undefined && undefined.__assign || function () {
  __assign$3 = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign$3.apply(this, arguments);
};

var __rest$1 = undefined && undefined.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var ZoomControl = /*#__PURE__*/React.memo(function (_a) {
  var zoom = _a.zoom,
      displayDirection = _a.displayDirection,
      reverseLayout = _a.reverseLayout,
      onValueClick = _a.onValueClick,
      onZoomIn = _a.onZoomIn,
      onZoomOut = _a.onZoomOut,
      restProps = __rest$1(_a, ["zoom", "displayDirection", "reverseLayout", "onValueClick", "onZoomIn", "onZoomOut"]);

  var handleZoomIn = useCallback(function () {
    onZoomIn === null || onZoomIn === void 0 ? void 0 : onZoomIn();
  }, [onZoomIn]);
  var handleZoomOut = useCallback(function () {
    onZoomOut === null || onZoomOut === void 0 ? void 0 : onZoomOut();
  }, [onZoomOut]);
  var style = useMemo(function () {
    return {
      flexDirection: reverseLayout ? displayDirection === LayoutDirection.row ? 'row-reverse' : 'column-reverse' : displayDirection === LayoutDirection.row ? 'row' : 'column'
    };
  }, [displayDirection, reverseLayout]);
  return jsxRuntimeExports.jsxs("div", __assign$3({}, restProps, {
    className: classNames(prefixCls + "-zoom", {
      row: displayDirection === LayoutDirection.row,
      column: displayDirection === LayoutDirection.column
    }),
    style: style
  }, {
    children: [jsxRuntimeExports.jsx("div", __assign$3({
      className: prefixCls + "-zoom-icon",
      onClick: handleZoomIn
    }, {
      children: jsxRuntimeExports.jsx(Icon, {
        icon: "add",
        size: 16
      }, void 0)
    }), void 0), jsxRuntimeExports.jsx("div", {
      className: prefixCls + "-zoom-line"
    }, void 0), jsxRuntimeExports.jsx("div", __assign$3({
      className: prefixCls + "-zoom-control"
    }, {
      children: jsxRuntimeExports.jsx("div", __assign$3({
        className: prefixCls + "-zoom-control-text",
        onClick: onValueClick
      }, {
        children: zoom
      }), void 0)
    }), void 0), jsxRuntimeExports.jsx("div", {
      className: prefixCls + "-zoom-line"
    }, void 0), jsxRuntimeExports.jsx("div", __assign$3({
      className: prefixCls + "-zoom-icon",
      onClick: handleZoomOut
    }, {
      children: jsxRuntimeExports.jsx(Icon, {
        icon: "remove",
        size: 16
      }, void 0)
    }), void 0)]
  }), void 0);
});

var __assign$2 = undefined && undefined.__assign || function () {
  __assign$2 = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign$2.apply(this, arguments);
};
var NormalToolbox = /*#__PURE__*/React.memo(function (_a) {
  var id = _a.id,
      icon = _a.icon,
      onClick = _a.onClick,
      tooltip = _a.tooltip,
      _b = _a.tooltipPlacement,
      tooltipPlacement = _b === void 0 ? 'top' : _b,
      _c = _a.mouseEnterDelay,
      mouseEnterDelay = _c === void 0 ? 0 : _c,
      _d = _a.mouseLeaveDelay,
      mouseLeaveDelay = _d === void 0 ? 0 : _d,
      style = _a.style,
      getTooltipContainer = _a.getTooltipContainer;
  var handleClick = useCallback(function (e) {
    onClick(id, e);
  }, [id, onClick]);
  return jsxRuntimeExports.jsx(Tooltip, __assign$2({
    title: tooltip,
    mouseLeaveDelay: mouseLeaveDelay,
    mouseEnterDelay: mouseEnterDelay,
    placement: tooltipPlacement,
    getTooltipContainer: getTooltipContainer
  }, {
    children: jsxRuntimeExports.jsx("div", __assign$2({
      className: classNames(prefixCls + "-toolbox"),
      onClick: handleClick,
      style: style
    }, {
      children: jsxRuntimeExports.jsx("div", __assign$2({
        className: prefixCls + "-toolbox-inner"
      }, {
        children: typeof icon === 'string' ? jsxRuntimeExports.jsx(Icon, {
          icon: icon,
          size: 16
        }, void 0) : jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
          children: icon
        }, void 0)
      }), void 0)
    }), void 0)
  }), void 0);
});

var __assign$1 = undefined && undefined.__assign || function () {
  __assign$1 = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign$1.apply(this, arguments);
};
var toggleableToolboxGap = 5;
var toolBoxWidth = 32;
var normalToolboxStyle = {
  position: 'absolute',
  left: 0,
  top: 0
};
var ToggleableToolbox = /*#__PURE__*/React.memo(function (props) {
  var id = props.id,
      onClick = props.onClick,
      subItems = props.subItems,
      _a = props.layoutDirection,
      layoutDirection = _a === void 0 ? ToggleableToolboxLayoutDirection.right : _a,
      style = props.style,
      getTooltipContainer = props.getTooltipContainer;
  var timeIdRef = useRef();
  var enterDelayTimeIdRef = useRef();

  var _b = useState(null),
      container = _b[0],
      setContainer = _b[1];

  var _c = useState(false),
      subItemsVisible = _c[0],
      setSubItemsVisible = _c[1];

  var layoutInColumn = layoutDirection === ToggleableToolboxLayoutDirection.top || layoutDirection === ToggleableToolboxLayoutDirection.bottom;
  var handleMouseEnter = useCallback(function () {
    window.clearTimeout(timeIdRef.current);
    window.clearTimeout(enterDelayTimeIdRef.current);
    enterDelayTimeIdRef.current = window.setTimeout(function () {
      return setSubItemsVisible(true);
    }, 150);
  }, []);
  var handleMouseLeave = useCallback(function () {
    window.clearTimeout(enterDelayTimeIdRef.current);
    timeIdRef.current = window.setTimeout(function () {
      setSubItemsVisible(false);
    }, 300);
  }, []);
  var refCallback = useCallback(function (node) {
    if (node) {
      setContainer(node);
    }
  }, []);
  var initialStyle = useMemo(function () {
    if (container) {
      switch (layoutDirection) {
        case ToggleableToolboxLayoutDirection.top:
          return {
            top: "-" + (subItems.length - 1) * (toolBoxWidth + toggleableToolboxGap) + "px",
            flexDirection: 'column-reverse'
          };

        case ToggleableToolboxLayoutDirection.right:
          return {};

        case ToggleableToolboxLayoutDirection.bottom:
          return {
            flexDirection: 'column'
          };

        case ToggleableToolboxLayoutDirection.left:
          return {
            left: "-" + (subItems.length - 1) * (toolBoxWidth + toggleableToolboxGap) + "px",
            flexDirection: 'row-reverse'
          };
      }
    }

    return {};
  }, [container, layoutDirection, subItems.length]);
  var transitionStyle = useMemo(function () {
    var _transitionStyle = {
      opacity: 1,
      pointerEvents: 'auto',
      transition: 'transform 0.2s ease-in-out, opacity 0.5s'
    };

    switch (layoutDirection) {
      case ToggleableToolboxLayoutDirection.top:
        return __assign$1(__assign$1(__assign$1({}, initialStyle), _transitionStyle), {
          transform: "translateY(-" + (toolBoxWidth + toggleableToolboxGap) + "px)"
        });

      case ToggleableToolboxLayoutDirection.right:
        return __assign$1(__assign$1(__assign$1({}, initialStyle), _transitionStyle), {
          transform: "translateX(" + (toolBoxWidth + toggleableToolboxGap) + "px)"
        });

      case ToggleableToolboxLayoutDirection.bottom:
        return __assign$1(__assign$1(__assign$1({}, initialStyle), _transitionStyle), {
          transform: "translateY(" + (toolBoxWidth + toggleableToolboxGap) + "px)"
        });

      case ToggleableToolboxLayoutDirection.left:
        return __assign$1(__assign$1(__assign$1({}, initialStyle), _transitionStyle), {
          transform: "translateX(-" + (toolBoxWidth + toggleableToolboxGap) + "px)"
        });

      default:
        return {};
    }
  }, [initialStyle, layoutDirection]);
  useEffect(function () {
    return function () {
      return clearTimeout(timeIdRef.current);
    };
  }, []);
  return jsxRuntimeExports.jsxs("div", __assign$1({
    className: prefixCls + "-toggleable-toolbox",
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    ref: refCallback
  }, {
    children: [jsxRuntimeExports.jsx("div", __assign$1({
      className: classNames(prefixCls + "-toggleable-toolbox-sub-items-container", {
        'toggleable-toolbox-column-gap': layoutInColumn,
        'toggleable-toolbox-row-gap': !layoutInColumn
      }),
      style: __assign$1(__assign$1(__assign$1({}, initialStyle), subItemsVisible ? transitionStyle : {}), style)
    }, {
      children: subItems.map(function (item, index) {
        return /*#__PURE__*/createElement(NormalToolbox, __assign$1({}, item, {
          id: id + "-" + index,
          key: item.id,
          getTooltipContainer: getTooltipContainer
        }));
      })
    }), void 0), jsxRuntimeExports.jsx(NormalToolbox, __assign$1({}, props, {
      onClick: onClick,
      style: normalToolboxStyle
    }), void 0)]
  }), void 0);
});

var __assign = undefined && undefined.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = undefined && undefined.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var prefixCls = 'map-control';
var LayoutDirection;

(function (LayoutDirection) {
  LayoutDirection["row"] = "row";
  LayoutDirection["column"] = "column";
})(LayoutDirection || (LayoutDirection = {}));

var ToggleableToolboxLayoutDirection;

(function (ToggleableToolboxLayoutDirection) {
  ToggleableToolboxLayoutDirection["top"] = "top";
  ToggleableToolboxLayoutDirection["right"] = "right";
  ToggleableToolboxLayoutDirection["bottom"] = "bottom";
  ToggleableToolboxLayoutDirection["left"] = "left";
})(ToggleableToolboxLayoutDirection || (ToggleableToolboxLayoutDirection = {}));

function isMapZoom(tool) {
  return tool.id === 'map-zoom-toolbox';
}

function isToggleableToolbox(tool) {
  return 'subItems' in tool;
}

var MapControl = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (_a, ref) {
  var id = _a.id,
      _b = _a.layoutDirection,
      layoutDirection = _b === void 0 ? LayoutDirection.column : _b,
      toolboxes = _a.toolboxes,
      style = _a.style,
      restProps = __rest(_a, ["id", "layoutDirection", "toolboxes", "style"]);

  var _style = useMemo(function () {
    return __assign(__assign({}, style), {
      // flexDirection: layoutDirection === LayoutDirection.row ? 'row' : 'column',
      gridColumnGap: layoutDirection === LayoutDirection.row ? '8px' : undefined,
      gridRowGap: layoutDirection === LayoutDirection.column ? '8px' : undefined,
      gridAutoFlow: layoutDirection === LayoutDirection.row ? 'column' : 'row'
    });
  }, [layoutDirection, style]);

  return jsxRuntimeExports.jsx("div", __assign({}, restProps, {
    className: prefixCls,
    style: _style,
    ref: ref,
    id: id
  }, {
    children: toolboxes.map(function (tool) {
      // guard
      if (isMapZoom(tool)) {
        return /*#__PURE__*/createElement(ZoomControl, __assign({}, tool, {
          key: tool.id,
          displayDirection: layoutDirection
        }));
      } else {
        return isToggleableToolbox(tool) ? /*#__PURE__*/createElement(ToggleableToolbox, __assign({}, tool, {
          key: tool.id
        })) : /*#__PURE__*/createElement(NormalToolbox, __assign({}, tool, {
          key: tool.id
        }));
      }
    })
  }), void 0);
}));

var MapViewCollection = LazyLoad(function () { return import('./index-bc7b5578.js'); });
var MapStylesGroup = LazyLoad(function () { return import('./index-2271c688.js'); });
var getToggleableToolboxItem = function (_a, isFullScreen, otherProps) {
    var id = _a.id, icon = _a.icon, action = _a.action;
    return (__assign$4({ id: id, icon: id === FULLSCREEN && isFullScreen ? (React.createElement(Icon, { icon: "minimize", className: "dm-map-control-settings-icon", size: 16 })) : (icon), onClick: function () { return action === null || action === void 0 ? void 0 : action(); }, tooltip: get(i18n.mapEdit.tools, id) }, otherProps));
};
var MapResetControl = observer(function () {
    var routeStore = React.useContext(appContext.getContext()).routeStore;
    var ToolStore = routeStore.ToolStore;
    var rotate = ToolStore.rotate;
    var style = {
        transform: "rotateZ(".concat(rotate, "deg)"),
    };
    return (React.createElement("div", { style: style },
        React.createElement(Icon, { icon: "navigation", size: 16 })));
});
var MapControlOverLay = observer(function () {
    var _a, _b;
    var value = React.useContext(appContext.getContext());
    var routeStore = value.routeStore;
    var mapId = routeStore.mapId, ToolStore = routeStore.ToolStore, MapSettingStore = routeStore.MapSettingStore, selectMapStyle = routeStore.selectMapStyle, MapStatusStore = routeStore.MapStatusStore, GeoFiltersStore = routeStore.GeoFiltersStore, onSearch = routeStore.onSearch, isFullScreen = routeStore.isFullScreen, BufferStore = routeStore.BufferStore, IsochroneStore = routeStore.IsochroneStore, changeCanInteractive = routeStore.changeCanInteractive, mapToggleableToolbox = routeStore.mapToggleableToolbox, MapInfoStore = routeStore.MapInfoStore, getPopupContainer = routeStore.getPopupContainer;
    var setCanBuffer = BufferStore.setCanBuffer;
    var setCanIsochrone = IsochroneStore.setCanIsochrone;
    var needClearFence = MapStatusStore.needClearFence;
    var setSelectedGeo = GeoFiltersStore.setSelectedGeo, updateSelectedGeo = GeoFiltersStore.updateSelectedGeo;
    var ref = React.useRef(null);
    var scaleLabel = ToolStore.scaleLabel, scaleWidth = ToolStore.scaleWidth, zoomIn = ToolStore.zoomIn, zoomOut = ToolStore.zoomOut, onClickReset = ToolStore.onClickReset, onClickDelete = ToolStore.onClickDelete, setShowFalse = ToolStore.setShowFalse, setShowTrue = ToolStore.setShowTrue, showMapControlSettings = ToolStore.showMapControlSettings;
    var toolTheme = MapSettingStore.toolTheme, mapStyle = MapSettingStore.mapStyle, renderListOtherTools = MapSettingStore.renderListOtherTools, showMapControl = MapSettingStore.showMapControl, setMapStyle = MapSettingStore.setMapStyle, showViewCollection = MapSettingStore.showViewCollection, can3D = MapSettingStore.can3D;
    var _c = __read(_default(false), 2), showViewCollectionPanel = _c[0], toggleShowViewCollectionPanel = _c[1];
    var _d = useDebounceFn(function () {
        setShowFalse();
    }, {
        wait: 1500,
    }), hide = _d.run, cancelHide = _d.cancel;
    var isDark = toolTheme === 'dark';
    var zoom = Number(MapInfoStore.zoom).toFixed(1);
    var _changeMapStyle = useStaticCallback(function (style) {
        setMapStyle(style);
        selectMapStyle(style);
    });
    var _clearFence = function () {
        onClickDelete();
        setSelectedGeo([]);
        updateSelectedGeo([]);
        setCanBuffer(false);
        setCanIsochrone(false);
        changeCanInteractive(true);
        onSearch();
    };
    var handleMouseEnter = React.useCallback(function () {
        cancelHide();
        setShowTrue();
    }, [cancelHide, setShowTrue]);
    var handleMouseLeave = React.useCallback(function () {
        hide();
    }, [hide]);
    /**
     * --顺序--
     * 清空围栏
     * 还原地图
     * 视角收藏
     * 地图方向
     * +zoom-
     * 其他工具
     */
    var toolboxes = [];
    if (needClearFence) {
        toolboxes.push({
            id: 'clear-fence',
            icon: 'delete-2',
            tooltip: i18n.mapEdit.clearFence,
            tooltipPlacement: 'right',
            onClick: _clearFence,
            getTooltipContainer: getPopupContainer,
        });
    }
    if (showViewCollection) {
        toolboxes.push({
            id: 'view-collection',
            icon: 'bookmark',
            tooltip: i18n.mapEdit.viewCollect,
            tooltipPlacement: 'right',
            onClick: toggleShowViewCollectionPanel,
            getTooltipContainer: getPopupContainer,
        });
    }
    if (showMapControl) {
        if (can3D) {
            toolboxes.push({
                id: 'reset-control',
                icon: React.createElement(MapResetControl, null),
                onClick: onClickReset,
                getTooltipContainer: getPopupContainer,
            });
        }
        toolboxes.push({
            id: 'map-zoom-toolbox',
            zoom: zoom,
            onZoomIn: zoomIn,
            onZoomOut: zoomOut,
            onValueClick: onClickReset,
            getTooltipContainer: getPopupContainer,
        });
    }
    if (mapToggleableToolbox) {
        toolboxes.push(__assign$4(__assign$4({}, mapToggleableToolbox), { getTooltipContainer: getPopupContainer }));
    }
    else if (size(renderListOtherTools) > 0) {
        var _e = __read(renderListOtherTools), item = _e[0], otherTools = _e.slice(1);
        toolboxes.push(__assign$4(__assign$4({}, getToggleableToolboxItem(item, isFullScreen)), { subItems: otherTools.map(function (i) { return getToggleableToolboxItem(i, isFullScreen); }), getTooltipContainer: getPopupContainer }));
    }
    return (React.createElement("div", { "data-test": "map-panel-control-overlay" },
        showMapControl && (React.createElement("div", { className: "dm-map-scale-control" },
            React.createElement("div", { className: classNames('dm-map-scale-control-text', (_a = {},
                    _a["is-dark"] = isDark,
                    _a)), style: {
                    width: scaleWidth,
                } }, scaleLabel),
            React.createElement("div", null,
                React.createElement("div", { className: classNames('dm-map-scale-control-inner', (_b = {},
                        _b["is-dark"] = isDark,
                        _b)), style: {
                        width: scaleWidth,
                    } })))),
        React.createElement(MapControl, { id: "".concat(mapId, "-control"), ref: ref, toolboxes: toolboxes }),
        showViewCollection && (React.createElement(Dropdown, { placements: getOffsetPlacements(8), placement: "bottomRight", trigger: "click", visible: showViewCollectionPanel, overlay: function () { return React.createElement(MapViewCollection, { onClose: toggleShowViewCollectionPanel }); }, getPopupContainer: function () { return ref.current; } },
            React.createElement("div", { style: { position: 'absolute', bottom: 24, right: 8 } }))),
        showMapControlSettings && (React.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
            React.createElement(MapStylesGroup, { currentStyle: mapStyle || 'dark', changeMapStyle: _changeMapStyle, onClose: setShowFalse })))));
});
var MapControlOverLay$1 = MapControlOverLay;

export { MapControlOverLay$1 as default };
