const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let _ant_design_icons = require("@ant-design/icons");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
require("./ViewControls.less");
//#region src/components/pisellFloorMapLayout/components/ViewControls.tsx
/**
* ViewControls - 内置视图控制：默认仅缩放；可选复位、区域定位、全屏等
* 平面图（dockChrome）：Dock 折叠入口 + 展开条（含业务插槽、空闲自动收起）
* 非平面图：单条横栏，缩放与工具始终同排（无 Menu 折叠）
*/
const PREFIX = "pisell-floor-map-layout";
const I18N_VC = "pisell-floor-map-layout.view-controls";
function ViewControls(props) {
	var _config$horizontalAli;
	const { api, config = {}, scale = 1, isFullscreen = false, fitBoundsActive = false, className, mapGridVisible = false, onToggleMapGrid, edgesLayerVisible = true, onToggleEdgesLayer, viewportLocked = false, onToggleViewportLock, dockChrome = false, dockExpandedToolButtons, dockExpandedTrailing, autoCollapseDockMs = 1e4 } = props;
	const showZoom = config.showZoom !== false;
	const showReset = config.showReset === true;
	const showFitBounds = config.showFitBounds === true;
	const showFullscreen = config.showFullscreen === true;
	const showGridToggle = config.showGridToggle === true && typeof onToggleMapGrid === "function";
	const showEdgesToggle = config.showEdgesToggle === true && typeof onToggleEdgesLayer === "function";
	const showViewportLock = config.showViewportLock === true && typeof onToggleViewportLock === "function";
	/**
	* `horizontalAlign` 仅作用于非 dockChrome 的普通横条（决定贴左下还是右下）。
	* dockChrome（平面图）模式已统一固定在屏右下，不再读这个配置。
	*/
	const horizontalAlign = (_config$horizontalAli = config.horizontalAlign) !== null && _config$horizontalAli !== void 0 ? _config$horizontalAli : "start";
	const scalePercent = Math.round(scale * 100);
	const showTools = showReset || showFitBounds || showFullscreen || showGridToggle || showEdgesToggle || showViewportLock;
	const hasDockToolButtons = dockExpandedToolButtons != null && dockExpandedToolButtons !== false;
	const hasTrailingSlot = dockExpandedTrailing != null && dockExpandedTrailing !== false;
	const dockHasExpandable = dockChrome && (showTools || hasDockToolButtons || hasTrailingSlot);
	const showBar = showZoom || showTools || dockChrome && (hasDockToolButtons || hasTrailingSlot);
	/**
	* Dock：展开条是否拉宽（与 CSS max-width 过渡联动）。
	* dockChrome 下 slide 内嵌合并 toggle 按钮，slide 始终 mounted；
	* 折叠态 max-width 仅露 toggle 宽，展开态拉满。
	*/
	const [dockExpanded, setDockExpanded] = (0, react.useState)(false);
	const idleTimerRef = (0, react.useRef)(null);
	const clearIdleTimer = (0, react.useCallback)(() => {
		if (idleTimerRef.current != null) {
			clearTimeout(idleTimerRef.current);
			idleTimerRef.current = null;
		}
	}, []);
	const scheduleDockCollapse = (0, react.useCallback)(() => {
		clearIdleTimer();
		if (!dockChrome || !dockHasExpandable || !dockExpanded || autoCollapseDockMs <= 0) return;
		idleTimerRef.current = setTimeout(() => {
			setDockExpanded(false);
			idleTimerRef.current = null;
		}, autoCollapseDockMs);
	}, [
		dockChrome,
		dockHasExpandable,
		dockExpanded,
		autoCollapseDockMs,
		clearIdleTimer
	]);
	(0, react.useEffect)(() => {
		return () => clearIdleTimer();
	}, [clearIdleTimer]);
	(0, react.useEffect)(() => {
		if (dockExpanded && dockHasExpandable) scheduleDockCollapse();
	}, [
		dockExpanded,
		dockHasExpandable,
		scheduleDockCollapse
	]);
	const handleDockExpand = (0, react.useCallback)(() => {
		setDockExpanded(true);
	}, []);
	const handleDockCollapseClick = (0, react.useCallback)(() => {
		clearIdleTimer();
		setDockExpanded(false);
	}, [clearIdleTimer]);
	const handleDockBarPointerDown = (0, react.useCallback)(() => {
		if (dockExpanded && autoCollapseDockMs > 0) scheduleDockCollapse();
	}, [
		dockExpanded,
		autoCollapseDockMs,
		scheduleDockCollapse
	]);
	/**
	* dockChrome 下「锁 / 全览」常驻在 `dock-collapsed-extras` 屏右缘，展开条内不再重复渲染。
	* 非 dockChrome 普通横条不省略，所有按钮顺排。
	*/
	const renderToolButtons = (opts) => {
		const omitLock = (opts === null || opts === void 0 ? void 0 : opts.omitViewportLock) === true;
		const omitFit = (opts === null || opts === void 0 ? void 0 : opts.omitFitBounds) === true;
		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, showReset ? /* @__PURE__ */ react.default.createElement("button", {
			type: "button",
			className: `${PREFIX}-view-controls-tool-btn`,
			onClick: () => api.resetTransform(),
			disabled: viewportLocked,
			"aria-disabled": viewportLocked,
			"aria-label": _pisell_utils.locales.getText(`${I18N_VC}.reset-aria`)
		}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.ReloadOutlined, null)) : null, showFitBounds && api.fitBounds && !omitFit ? /* @__PURE__ */ react.default.createElement("button", {
			type: "button",
			className: (0, classnames.default)(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: fitBoundsActive }),
			onClick: () => api.fitBounds(),
			disabled: viewportLocked,
			"aria-disabled": viewportLocked,
			"aria-pressed": fitBoundsActive,
			"aria-label": _pisell_utils.locales.getText(`${I18N_VC}.fit-bounds-aria`)
		}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.ExpandOutlined, null)) : null, showGridToggle ? /* @__PURE__ */ react.default.createElement("button", {
			type: "button",
			className: (0, classnames.default)(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: mapGridVisible }),
			onClick: () => onToggleMapGrid(),
			"aria-pressed": mapGridVisible,
			"aria-label": _pisell_utils.locales.getText(mapGridVisible ? `${I18N_VC}.grid-hide-aria` : `${I18N_VC}.grid-show-aria`)
		}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.BorderInnerOutlined, null)) : null, showEdgesToggle ? /* @__PURE__ */ react.default.createElement("button", {
			type: "button",
			className: (0, classnames.default)(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: edgesLayerVisible }),
			onClick: () => onToggleEdgesLayer(),
			"aria-pressed": edgesLayerVisible,
			"aria-label": _pisell_utils.locales.getText(edgesLayerVisible ? `${I18N_VC}.edges-hide-aria` : `${I18N_VC}.edges-show-aria`),
			title: _pisell_utils.locales.getText(edgesLayerVisible ? `${I18N_VC}.edges-hide-aria` : `${I18N_VC}.edges-show-aria`)
		}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.NodeIndexOutlined, null)) : null, showViewportLock && !omitLock ? /* @__PURE__ */ react.default.createElement("button", {
			type: "button",
			className: (0, classnames.default)(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: viewportLocked }),
			onClick: () => onToggleViewportLock(),
			"aria-pressed": viewportLocked,
			"aria-label": _pisell_utils.locales.getText(viewportLocked ? `${I18N_VC}.viewport-unlock-aria` : `${I18N_VC}.viewport-lock-aria`),
			title: _pisell_utils.locales.getText(viewportLocked ? `${I18N_VC}.viewport-unlock-aria` : `${I18N_VC}.viewport-lock-aria`)
		}, viewportLocked ? /* @__PURE__ */ react.default.createElement(_ant_design_icons.LockOutlined, null) : /* @__PURE__ */ react.default.createElement(_ant_design_icons.UnlockOutlined, null)) : null, showFullscreen && api.toggleFullscreen ? /* @__PURE__ */ react.default.createElement("button", {
			type: "button",
			className: (0, classnames.default)(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: isFullscreen }),
			onClick: () => api.toggleFullscreen(),
			"aria-pressed": isFullscreen,
			"aria-label": _pisell_utils.locales.getText(isFullscreen ? `${I18N_VC}.fullscreen-exit-aria` : `${I18N_VC}.fullscreen-aria`)
		}, isFullscreen ? /* @__PURE__ */ react.default.createElement(_ant_design_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ react.default.createElement(_ant_design_icons.FullscreenOutlined, null)) : null);
	};
	/**
	* dockChrome 展开条内的「工具区」按钮：锁 / 全览 已常驻在 `dock-collapsed-extras` 屏右缘，
	* 展开条内不再重复渲染，避免冗余。
	*/
	const dockExpandedBarHasToolButtons = showReset || showGridToggle || showEdgesToggle || showFullscreen && Boolean(api.toggleFullscreen);
	/**
	* dockChrome 合并入口：同一个 toggle 按钮承担展开/收起，常驻在 slide 内最左端。
	* - 折叠态：箭头朝左，点一下展开（slide 由 toggle 宽撑成 max-width）；
	* - 展开态：箭头朝右，点一下收起；toggle 跟随 slide max-width 收缩"被推回"右侧屏缘。
	* 主题色样式（紫底白 icon）由 `dock-toggle-btn` 类提供。
	*/
	const renderDockToggleButton = () => /* @__PURE__ */ react.default.createElement("button", {
		type: "button",
		className: (0, classnames.default)(`${PREFIX}-view-controls-dock-toggle-btn`, { [`${PREFIX}-view-controls-dock-toggle-btn--panel-open`]: dockExpanded }),
		onClick: dockExpanded ? handleDockCollapseClick : handleDockExpand,
		"aria-expanded": dockExpanded,
		"aria-label": _pisell_utils.locales.getText(dockExpanded ? `${I18N_VC}.collapse-tools-aria` : `${I18N_VC}.expand-tools-aria`)
	}, dockExpanded ? /* @__PURE__ */ react.default.createElement(_ant_design_icons.RightOutlined, null) : /* @__PURE__ */ react.default.createElement(_ant_design_icons.LeftOutlined, null));
	const renderDockExpandableBarContents = () => /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, renderDockToggleButton(), /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-view-controls-dock-scroll` }, showZoom ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("button", {
		type: "button",
		className: `${PREFIX}-view-controls-tool-btn`,
		onClick: () => api.zoomOut(),
		disabled: viewportLocked,
		"aria-disabled": viewportLocked,
		"aria-label": _pisell_utils.locales.getText(`${I18N_VC}.zoom-out-aria`)
	}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.MinusOutlined, null)), /* @__PURE__ */ react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-value` }, scalePercent, "%"), /* @__PURE__ */ react.default.createElement("button", {
		type: "button",
		className: `${PREFIX}-view-controls-tool-btn`,
		onClick: () => api.zoomIn(),
		disabled: viewportLocked,
		"aria-disabled": viewportLocked,
		"aria-label": _pisell_utils.locales.getText(`${I18N_VC}.zoom-in-aria`)
	}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.PlusOutlined, null))) : null, showZoom && (dockExpandedBarHasToolButtons || hasDockToolButtons || hasTrailingSlot) ? /* @__PURE__ */ react.default.createElement("div", {
		className: `${PREFIX}-view-controls-bar-divider`,
		"aria-hidden": true
	}) : null, dockExpandedBarHasToolButtons ? renderToolButtons({
		omitViewportLock: true,
		omitFitBounds: true
	}) : null, hasDockToolButtons ? dockExpandedToolButtons : null, hasTrailingSlot ? /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-view-controls-dock-trailing` }, dockExpandedTrailing) : null));
	if (!showBar) return null;
	/**
	* dockChrome 屏右缘常驻按钮：「锁 / 全览」。两者都是单击操作，与展开条解耦。
	* dockChrome 模式下 extras 与 slide 共用同一外壳，无 panel-open 收起行为。
	*/
	const renderDockCollapsedExtras = () => {
		const showLockChip = showViewportLock;
		const showFitChip = showFitBounds && Boolean(api.fitBounds);
		if (!showLockChip && !showFitChip) return null;
		return /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-view-controls-dock-collapsed-extras` }, showLockChip ? /* @__PURE__ */ react.default.createElement("button", {
			type: "button",
			className: (0, classnames.default)(`${PREFIX}-view-controls-tool-btn`, `${PREFIX}-view-controls-dock-collapsed-extras-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: viewportLocked }),
			onClick: () => onToggleViewportLock(),
			"aria-pressed": viewportLocked,
			"aria-label": _pisell_utils.locales.getText(viewportLocked ? `${I18N_VC}.viewport-unlock-aria` : `${I18N_VC}.viewport-lock-aria`),
			title: _pisell_utils.locales.getText(viewportLocked ? `${I18N_VC}.viewport-unlock-aria` : `${I18N_VC}.viewport-lock-aria`)
		}, viewportLocked ? /* @__PURE__ */ react.default.createElement(_ant_design_icons.LockOutlined, null) : /* @__PURE__ */ react.default.createElement(_ant_design_icons.UnlockOutlined, null)) : null, showFitChip ? /* @__PURE__ */ react.default.createElement("button", {
			type: "button",
			className: (0, classnames.default)(`${PREFIX}-view-controls-tool-btn`, `${PREFIX}-view-controls-dock-collapsed-extras-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: fitBoundsActive }),
			onClick: () => api.fitBounds(),
			disabled: viewportLocked,
			"aria-disabled": viewportLocked,
			"aria-pressed": fitBoundsActive,
			"aria-label": _pisell_utils.locales.getText(`${I18N_VC}.fit-bounds-aria`),
			title: _pisell_utils.locales.getText(`${I18N_VC}.fit-bounds-aria`)
		}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.ExpandOutlined, null)) : null);
	};
	if (dockChrome && dockHasExpandable) return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-view-controls`, `${PREFIX}-view-controls--dock`, `${PREFIX}-view-controls--align-end`, className) }, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-view-controls-dock-row` }, renderDockCollapsedExtras(), /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-view-controls-dock-slide`, { [`${PREFIX}-view-controls-dock-slide--open`]: dockExpanded }) }, /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)(`${PREFIX}-view-controls-bar`, `${PREFIX}-view-controls-bar--dock`),
		role: "group",
		onPointerDown: handleDockBarPointerDown
	}, renderDockExpandableBarContents()))));
	const barClass = (0, classnames.default)(`${PREFIX}-view-controls-bar`, { [`${PREFIX}-view-controls-bar--dock`]: dockChrome });
	return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-view-controls`, className, {
		[`${PREFIX}-view-controls--dock`]: dockChrome,
		[`${PREFIX}-view-controls--align-end`]: horizontalAlign === "end"
	}) }, /* @__PURE__ */ react.default.createElement("div", {
		className: barClass,
		role: "group",
		onPointerDown: dockChrome ? handleDockBarPointerDown : void 0
	}, showZoom ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("button", {
		type: "button",
		className: `${PREFIX}-view-controls-tool-btn`,
		onClick: () => api.zoomOut(),
		disabled: viewportLocked,
		"aria-disabled": viewportLocked,
		"aria-label": _pisell_utils.locales.getText(`${I18N_VC}.zoom-out-aria`)
	}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.MinusOutlined, null)), /* @__PURE__ */ react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-value` }, scalePercent, "%"), /* @__PURE__ */ react.default.createElement("button", {
		type: "button",
		className: `${PREFIX}-view-controls-tool-btn`,
		onClick: () => api.zoomIn(),
		disabled: viewportLocked,
		"aria-disabled": viewportLocked,
		"aria-label": _pisell_utils.locales.getText(`${I18N_VC}.zoom-in-aria`)
	}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.PlusOutlined, null))) : null, !dockChrome && showTools ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, showZoom ? /* @__PURE__ */ react.default.createElement("div", {
		className: `${PREFIX}-view-controls-bar-divider`,
		"aria-hidden": true
	}) : null, renderToolButtons()) : null));
}
//#endregion
exports.default = ViewControls;
