@pisell/materials 1.8.54 → 1.8.55

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -14,8 +14,13 @@ const require_FloorMapEditTopBar = require("./components/FloorMapEditTopBar.js")
 const require_mergeCanvasesForTabs = require("./utils/mergeCanvasesForTabs.js");
 const require_FloorMapOverview = require("./components/FloorMapOverview.js");
 const require_FloorMapEditPanel = require("./components/FloorMapEditPanel.js");
-const require_ViewControlsWithZoom = require("./components/ViewControlsWithZoom.js");
 const require_layoutMeasurements = require("./utils/layoutMeasurements.js");
+const require_FloorMapEdgeEditPanel = require("./components/FloorMapEdgeEditPanel.js");
+const require_EdgeLayer = require("./components/EdgeLayer.js");
+const require_NodePortMarkers = require("./components/NodePortMarkers.js");
+const require_useFloorMapEdgeViewModel = require("./hooks/useFloorMapEdgeViewModel.js");
+const require_useFloorMapEdgeEditing = require("./hooks/useFloorMapEdgeEditing.js");
+const require_ViewControlsWithZoom = require("./components/ViewControlsWithZoom.js");
 const require_useFloorMapEditState = require("./hooks/useFloorMapEditState.js");
 const require_useFloorMapTransformMetrics = require("./hooks/useFloorMapTransformMetrics.js");
 const require_floorMapFallbackRender = require("./utils/floorMapFallbackRender.js");
@@ -42,8 +47,8 @@ require("./PisellFloorMapLayout.less");
 * 负责：上下文与 props 合并、编辑态/阅读态分支、Transform 视口、图元层与工具栏联动。
 */
 function PisellFloorMapLayoutInner(props, ref) {
-	var _ref, _currentCanvas$mapLay2, _currentCanvas$mapLay3, _mapLayer$backgroundC, _engineCtx$engine, _mapLayer$boundingPad, _config$sceneElements;
-	const { className, style, items: itemsProp, renderItem, rowKey, renderItemByKind, getMergedItemWrapperStyle, mapLayer, cellSize: cellSizeProp, itemUnit = "cell", zoom = {}, pan = {}, controls = {}, enableHover = true, readModeSelectedItemId, onItemClick, onItemHover, onItemLeave, mode = "read", floorMapConfig: floorMapConfigProp, dataSources, onSave, onExitEdit, onDataSourceRecordSave, dataSourceLabels, dataSourceFormColumns, dataSourceRecordForm, loading, saveError, onElementRenderError, toolbarShowSave = true, floorMapFullscreenMode, appearanceMode = "light", showDataSourceRecordFormBlock, floorMapViewportOverlay, viewportOverlayPlacement = "top-start", viewportOverlayClassName, editTopBarPhoneLayout = false, canvasTabsBarTrailing, viewportDockToolButtons, viewportDockTrailing, viewportPersist = true, viewportPersistNamespace } = require_mergeFloorMapLayoutContext.mergeFloorMapLayoutPropsFromContext(props, require_FloorMapLayoutContext.useFloorMapLayoutContext());
+	var _ref, _currentCanvas$mapLay2, _currentCanvas$mapLay3, _mapLayer$backgroundC, _engineCtx$engine, _mapLayer$boundingPad, _config$edges, _config$edges2, _config$sceneElements;
+	const { className, style, items: itemsProp, renderItem, rowKey, renderItemByKind, getMergedItemWrapperStyle, enableEdges = false, mapLayer, cellSize: cellSizeProp, itemUnit = "cell", zoom = {}, pan = {}, controls = {}, enableHover = true, readModeSelectedItemId, onItemClick, onItemHover, onItemLeave, mode = "read", floorMapConfig: floorMapConfigProp, dataSources, onSave, onExitEdit, onDataSourceRecordSave, dataSourceLabels, dataSourceFormColumns, dataSourceRecordForm, loading, saveError, onElementRenderError, toolbarShowSave = true, renderResourcePickerModal, paletteSidebarVisibleLimit, floorMapFullscreenMode, appearanceMode = "light", showDataSourceRecordFormBlock, floorMapViewportOverlay, viewportOverlayPlacement = "top-start", viewportOverlayClassName, editTopBarPhoneLayout = false, canvasTabsBarTrailing, viewportDockToolButtons, viewportDockTrailing, viewportPersist = true, viewportPersistNamespace } = require_mergeFloorMapLayoutContext.mergeFloorMapLayoutPropsFromContext(props, require_FloorMapLayoutContext.useFloorMapLayoutContext());
 	const { token } = antd.theme.useToken();
 	const isFloorMapView = Boolean(floorMapConfigProp);
 	const contentOffsetRef = (0, react.useRef)({
@@ -52,7 +57,8 @@ function PisellFloorMapLayoutInner(props, ref) {
 	});
 	const mapDropLayerRef = (0, react.useRef)(null);
 	const transformRef = (0, react.useRef)(null);
-	const { config, currentCanvasId, setCurrentCanvasId, selectedId, setSelectedId, placeMode, setPlaceMode, items, saving, savingRecord, handleAddCanvas, handleRemoveCanvas, handleRenameCanvas, handleUpdateItem, handleCanvasPlaceClick, handleSave, placeSceneElementFromPaletteDrop, editPanelParams, placeOverlayClass, isLayoutDirty, toggleDraftCanvasShowGrid, toggleSelectedLayoutLock, duplicateSelectedElement, deleteSelectedElement, undoDraft, redoDraft, canUndo, canRedo, discardDraft } = require_useFloorMapEditState.useFloorMapEditState({
+	const focusViewportOnBoundsRef = (0, react.useRef)(null);
+	const { config, currentCanvasId, setCurrentCanvasId, selectedId, setSelectedId, placeMode, setPlaceMode, items, saving, savingRecord, handleAddCanvas, handleRemoveCanvas, handleRenameCanvas, handleUpdateItem, handleCanvasPlaceClick, handleSave, placeSceneElementFromPaletteDrop, bulkPlacePaletteItems, editPanelParams, placeOverlayClass, isLayoutDirty, toggleDraftCanvasShowGrid, toggleSelectedLayoutLock, duplicateSelectedElement, deleteSelectedElement, undoDraft, redoDraft, canUndo, canRedo, discardDraft, commitDraft } = require_useFloorMapEditState.useFloorMapEditState({
 		floorMapConfigProp,
 		isFloorMapView,
 		itemsProp,
@@ -65,8 +71,10 @@ function PisellFloorMapLayoutInner(props, ref) {
 		dataSourceLabels,
 		layoutPrefix: require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX,
 		contentOffsetRef,
-		showDataSourceRecordFormBlock
+		showDataSourceRecordFormBlock,
+		focusViewportOnBoundsRef
 	});
+	const mapContentRef = (0, react.useRef)(null);
 	/**
 	* 当前选中的画布配置：用于提取当前画布级 mapLayer 显式配置。
 	*/
@@ -149,25 +157,26 @@ function PisellFloorMapLayoutInner(props, ref) {
 	const engineLocale = (engineCtx === null || engineCtx === void 0 || (_engineCtx$engine = engineCtx.engine) === null || _engineCtx$engine === void 0 || (_engineCtx$engine = _engineCtx$engine.props) === null || _engineCtx$engine === void 0 ? void 0 : _engineCtx$engine.locale) || "zh-CN";
 	const hasCanvasTabsBarTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
 	const enabledCanvasCount = (0, react.useMemo)(() => canvasesForTabsBase.filter((c) => c.enabled).length, [canvasesForTabsBase]);
-	/** 仅阅读态、启用画布 > 1 时，在 Tab 列表最前插入「All」伪 tab */
+	/** 仅阅读态、启用画布 > 1 时，在 Tab 列表末尾插入「Overview」伪 tab */
 	const showOverviewTab = isFloorMapView && mode === "read" && enabledCanvasCount > 1;
 	const overviewTabLabel = (0, react.useMemo)(() => {
 		require_floorMapCanvasDisplay.initFloorMapLayoutLocales(engineLocale);
 		return _pisell_utils.locales.getText("pisell-floor-map-layout.canvas-tabs.overview");
 	}, [engineLocale]);
 	/**
-	* 给 CanvasTabs 渲染用的最终列表：阅读态多画布时在列表最前插入「All」伪 tab。
-	* order 取当前最小 order - 1，保证排序后位于第一个；其它字段留空。
+	* 给 CanvasTabs 渲染用的最终列表：阅读态多画布时在列表末尾插入「Overview」伪 tab。
+	* order 取当前最大 order + 1，保证排序后位于最后一个。
 	*/
 	const canvasesForTabs = (0, react.useMemo)(() => {
 		if (!showOverviewTab) return canvasesForTabsBase;
-		const minOrder = canvasesForTabsBase.reduce((min, c) => c.order < min ? c.order : min, Number.POSITIVE_INFINITY);
-		return [{
+		const maxOrder = canvasesForTabsBase.reduce((max, c) => c.order > max ? c.order : max, Number.NEGATIVE_INFINITY);
+		const overviewTab = {
 			id: require_floorMapLayoutConstants.FLOOR_MAP_OVERVIEW_TAB_ID,
 			name: overviewTabLabel,
-			order: Number.isFinite(minOrder) ? minOrder - 1 : -1,
+			order: Number.isFinite(maxOrder) ? maxOrder + 1 : 0,
 			enabled: true
-		}, ...canvasesForTabsBase];
+		};
+		return [...canvasesForTabsBase, overviewTab];
 	}, [
 		canvasesForTabsBase,
 		showOverviewTab,
@@ -260,7 +269,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 			globalMapLayer: mapLayer,
 			cellSize,
 			itemUnit: effectiveItemUnit,
-			areaGap: 32
+			areaGap: 40
 		});
 	}, [
 		isFloorMapView,
@@ -308,7 +317,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 			shape: "rect"
 		}];
 	}, [overviewLayout]);
-	const { containerRef, mapAreaRef, mapAreaSize, contentWidth, contentHeight, contentOffsetX, contentOffsetY, initialPositionX, initialPositionY, zoomConfig, scale, setScale, isFullscreen, toggleFullscreen, fitBounds, isAtFitBounds, notifyTransformed, persistCurrentViewport, attachTransformContext, isInteractingWithElement, setIsInteractingWithElement, viewportLocked, toggleViewportLocked } = require_useFloorMapTransformMetrics.useFloorMapTransformMetrics({
+	const { containerRef, mapAreaRef, mapAreaSize, contentWidth, contentHeight, contentOffsetX, contentOffsetY, initialPositionX, initialPositionY, zoomConfig, scale, setScale, isFullscreen, toggleFullscreen, fitBounds, focusContentBounds, isAtFitBounds, notifyTransformed, persistCurrentViewport, attachTransformContext, isInteractingWithElement, setIsInteractingWithElement, viewportLocked, toggleViewportLocked } = require_useFloorMapTransformMetrics.useFloorMapTransformMetrics({
 		items: isOverview && overviewLayout ? overviewMetricsItems : items,
 		cellSize,
 		itemGap: isOverview ? 0 : itemGap,
@@ -322,20 +331,81 @@ function PisellFloorMapLayoutInner(props, ref) {
 		frameResetKey: isFloorMapView ? transformWrapperKey : void 0,
 		viewportPersistKey
 	});
-	/** 手机：选中图元种类后一键落在当前视口中心（与点击画布落点坐标换算一致） */
-	const handlePlaceActiveAtViewportCenter = (0, react.useCallback)(() => {
-		if (!placeMode || placeMode.type !== "scene") return;
+	(0, react.useEffect)(() => {
+		focusViewportOnBoundsRef.current = (bounds) => {
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					focusContentBounds(bounds);
+				});
+			});
+		};
+		return () => {
+			focusViewportOnBoundsRef.current = null;
+		};
+	}, [focusContentBounds]);
+	/**
+	* 是否启用连线（edge）渲染与编辑能力。
+	* - 必须显式 `enableEdges={true}` 才打开；
+	* - pisell-reservation 等通用业务画布默认关闭，避免选中图元出现锚点圆点或拖出连线。
+	*/
+	const showEdgeLayer = enableEdges && isFloorMapView && !isOverview && config != null;
+	/** 连线层显隐（仅影响 EdgeLayer 绘制；编辑锚点仍随 `showEdgeLayer`） */
+	const [edgesLayerVisible, setEdgesLayerVisible] = (0, react.useState)(true);
+	const showEdgesOnCanvas = showEdgeLayer && edgesLayerVisible;
+	const toggleEdgesLayerVisible = (0, react.useCallback)(() => {
+		setEdgesLayerVisible((v) => !v);
+	}, []);
+	const readEdgeVm = require_useFloorMapEdgeViewModel.useFloorMapEdgeViewModel({
+		edges: showEdgeLayer && mode === "read" ? (_config$edges = config === null || config === void 0 ? void 0 : config.edges) !== null && _config$edges !== void 0 ? _config$edges : [] : [],
+		items: showEdgeLayer ? items : [],
+		cellSize,
+		itemUnit: effectiveItemUnit,
+		itemGap
+	});
+	const edgeEdit = require_useFloorMapEdgeEditing.useFloorMapEdgeEditing({
+		enabled: showEdgeLayer && mode === "edit",
+		config,
+		items,
+		mergedItems: items,
+		cellSize,
+		itemUnit: effectiveItemUnit,
+		itemGap,
+		contentOffsetRef,
+		selectedId,
+		setSelectedId,
+		commitDraft,
+		mapContentRef,
+		scale
+	});
+	const edgeRoutes = mode === "edit" && showEdgeLayer ? edgeEdit.routes : readEdgeVm.routes;
+	const edgeRectsById = mode === "edit" && showEdgeLayer ? edgeEdit.rectsById : readEdgeVm.rectsById;
+	const displayEdges = mode === "edit" && showEdgeLayer ? edgeEdit.edges : (_config$edges2 = config === null || config === void 0 ? void 0 : config.edges) !== null && _config$edges2 !== void 0 ? _config$edges2 : [];
+	const getViewportCenterContentCoords = (0, react.useCallback)(() => {
 		const w = mapAreaSize.width;
 		const h = mapAreaSize.height;
-		if (w <= 0 || h <= 0) return;
+		if (w <= 0 || h <= 0) return null;
 		const { x: ox, y: oy } = contentOffsetRef.current;
-		placeSceneElementFromPaletteDrop(Math.round(w / 2 - ox), Math.round(h / 2 - oy), placeMode);
+		return {
+			x: Math.round(w / 2 - ox),
+			y: Math.round(h / 2 - oy)
+		};
+	}, [mapAreaSize.width, mapAreaSize.height]);
+	/** 手机：选中图元种类后一键落在当前视口中心（与点击画布落点坐标换算一致） */
+	const handlePlaceActiveAtViewportCenter = (0, react.useCallback)(() => {
+		if (!placeMode || placeMode.type !== "scene") return;
+		const center = getViewportCenterContentCoords();
+		if (!center) return;
+		placeSceneElementFromPaletteDrop(center.x, center.y, placeMode);
 	}, [
 		placeMode,
-		mapAreaSize.width,
-		mapAreaSize.height,
+		getViewportCenterContentCoords,
 		placeSceneElementFromPaletteDrop
 	]);
+	/** 侧栏「查看更多」：按数量批量落在画布右侧空白区（方阵网格 + gap） */
+	const handleBulkAddPaletteToCanvas = (0, react.useCallback)((items) => {
+		if (!items.length) return;
+		bulkPlacePaletteItems(items);
+	}, [bulkPlacePaletteItems]);
 	/** 编辑态全屏策略：toggle 全屏与编辑态强绑定；locked 始终全屏顶栏；disabled 无全屏 */
 	const fsMode = floorMapFullscreenMode !== null && floorMapFullscreenMode !== void 0 ? floorMapFullscreenMode : "toggle";
 	const useFullTopChrome = isFloorMapView && mode === "edit" && (fsMode === "locked" || fsMode === "toggle" && isFullscreen);
@@ -372,16 +442,18 @@ function PisellFloorMapLayoutInner(props, ref) {
 	* 并默认带出「视口锁定」按钮（与是否将视口保存到本地解耦；无持久化 key 时仅内存态，默认未锁定）。
 	*/
 	const viewControlsConfig = (0, react.useMemo)(() => {
-		var _controls$showFullscr, _controls$showViewpor;
+		var _controls$showFullscr, _controls$showViewpor, _controls$showEdgesTo;
 		if (!isFloorMapView) return controls;
 		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, controls), {}, {
 			showFullscreen: (_controls$showFullscr = controls.showFullscreen) !== null && _controls$showFullscr !== void 0 ? _controls$showFullscr : Boolean(dockToggleFullscreen),
-			showViewportLock: (_controls$showViewpor = controls.showViewportLock) !== null && _controls$showViewpor !== void 0 ? _controls$showViewpor : true
+			showViewportLock: (_controls$showViewpor = controls.showViewportLock) !== null && _controls$showViewpor !== void 0 ? _controls$showViewpor : true,
+			showEdgesToggle: showEdgeLayer ? (_controls$showEdgesTo = controls.showEdgesToggle) !== null && _controls$showEdgesTo !== void 0 ? _controls$showEdgesTo : true : controls.showEdgesToggle
 		});
 	}, [
 		isFloorMapView,
 		controls,
-		dockToggleFullscreen
+		dockToggleFullscreen,
+		showEdgeLayer
 	]);
 	const topBarExtraActions = null;
 	/** 从侧栏/调色板拖入画布时，地图区高亮态（用于 dragleave/over 判定） */
@@ -547,8 +619,17 @@ function PisellFloorMapLayoutInner(props, ref) {
 			return (_transformRef$current3 = transformRef.current) === null || _transformRef$current3 === void 0 ? void 0 : _transformRef$current3.resetTransform();
 		},
 		fitBounds,
-		saveLayout: () => handleSave()
-	}), [fitBounds, handleSave]);
+		saveLayout: () => handleSave(),
+		applySceneSnapshot: (next) => {
+			if (mode !== "edit") return;
+			commitDraft(() => next);
+		}
+	}), [
+		fitBounds,
+		handleSave,
+		mode,
+		commitDraft
+	]);
 	const showSidebar = isFloorMapView && mode === "edit" && config && dataSources;
 	/** 右侧属性面板打开时给画布区留空，避免落点被挡在面板下 */
 	const editPanelVisible = isFloorMapView && mode === "edit" && Boolean(editPanelParams) && Boolean(config) && Boolean(dataSources);
@@ -687,8 +768,8 @@ function PisellFloorMapLayoutInner(props, ref) {
 		sceneElements: (_config$sceneElements = config.sceneElements) !== null && _config$sceneElements !== void 0 ? _config$sceneElements : [],
 		renderPreviewItem: (item) => effectiveRenderItem(item, 0),
 		placementPreviewSize: {
-			width: 180,
-			height: 120
+			width: require_floorMapElementKindUtils.FLOOR_MAP_RESOURCE_PLACE_DEFAULT.width,
+			height: require_floorMapElementKindUtils.FLOOR_MAP_RESOURCE_PLACE_DEFAULT.height
 		},
 		decorationPreviewSize: 48,
 		onSave: onSave && config.canvasUi.canEdit && !useFullTopChrome && toolbarShowSave !== false ? handleSave : void 0,
@@ -699,7 +780,16 @@ function PisellFloorMapLayoutInner(props, ref) {
 		consumeToolbarClickIfTouchDrag: paletteTouchDrag.consumeToolbarClickIfTouchDrag,
 		phoneLayout: editTopBarPhoneLayout,
 		defaultCollapsed: editTopBarPhoneLayout,
-		onRequestPlaceAtCanvasCenter: editTopBarPhoneLayout ? handlePlaceActiveAtViewportCenter : void 0
+		paletteSidebarVisibleLimit,
+		onRequestPlaceAtCanvasCenter: editTopBarPhoneLayout ? handlePlaceActiveAtViewportCenter : void 0,
+		onBulkAddPaletteToCanvas: handleBulkAddPaletteToCanvas,
+		onDirectPlacePaletteItem: (item) => bulkPlacePaletteItems([item]),
+		onResourcePickerConfirmPlace: (scene) => {
+			const center = getViewportCenterContentCoords();
+			if (!center) return false;
+			return placeSceneElementFromPaletteDrop(center.x, center.y, scene);
+		},
+		renderResourcePickerModal
 	}), /* @__PURE__ */ react.default.createElement("div", {
 		ref: mapAreaRef,
 		className: (0, classnames.default)(showSidebar && `pisell-floor-map-layout-map-area`, editTopBarPhoneLayout && showSidebar && `pisell-floor-map-layout-map-area--phone-fill`, editPanelVisible && !editTopBarPhoneLayout && `pisell-floor-map-layout-map-area--edit-panel-inset`),
@@ -769,7 +859,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 		onPinchingStop: persistCurrentViewport,
 		onWheelStop: persistCurrentViewport
 	}), (ctx) => {
-		var _effectiveMapLayer$sn;
+		var _effectiveMapLayer$sn, _edgeEdit$drawing;
 		/**
 		* 不直接 transformRef.current = ctx：
 		* attachTransformContext 内部会比对 ctx 实例并在每次 wrapper 重挂载时
@@ -820,14 +910,37 @@ function PisellFloorMapLayoutInner(props, ref) {
 				getMergedItemWrapperStyle,
 				readModeSelectedItemId
 			})
-		) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(require_MapLayer.default, {
+		) : /* @__PURE__ */ react.default.createElement("div", {
+			ref: mapContentRef,
+			className: `${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-map-content`,
+			style: {
+				position: "relative",
+				width: contentWidth,
+				height: contentHeight
+			}
+		}, /* @__PURE__ */ react.default.createElement(require_MapLayer.default, {
 			config: effectiveMapLayer,
 			contentWidth,
 			contentHeight,
 			cellSize,
 			preferCanvasGrid: true,
 			pointerEventsNone: isFloorMapView && mode === "edit"
-		}), isFloorMapView && mode === "edit" ? /* @__PURE__ */ react.default.createElement(require_EditableItemLayer.default, {
+		}), showEdgesOnCanvas ? /* @__PURE__ */ react.default.createElement(require_EdgeLayer.EdgeLayer, {
+			width: contentWidth,
+			height: contentHeight,
+			contentOffsetX,
+			contentOffsetY,
+			edges: displayEdges,
+			routes: edgeRoutes,
+			rectsById: edgeRectsById,
+			appearance: appearanceTokens,
+			mode,
+			selectedEdgeId: mode === "edit" ? edgeEdit.selectedEdgeId : null,
+			ghostPathD: mode === "edit" ? edgeEdit.ghostPathD : null,
+			onEdgeClick: mode === "edit" ? (edgeId) => edgeEdit.handleEdgeClick(edgeId) : void 0,
+			viewportScale: scale,
+			onSegmentDragStart: mode === "edit" ? edgeEdit.startDraggingSegment : void 0
+		}) : null, isFloorMapView && mode === "edit" ? /* @__PURE__ */ react.default.createElement(require_EditableItemLayer.default, {
 			items,
 			renderItem: effectiveRenderItem,
 			rowKey,
@@ -839,11 +952,24 @@ function PisellFloorMapLayoutInner(props, ref) {
 			contentOffsetX,
 			contentOffsetY,
 			selectedId,
-			onSelect: setSelectedId,
+			onSelect: edgeEdit.selectNode,
 			onUpdateItem: handleUpdateItem,
 			snapStep: (_effectiveMapLayer$sn = effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.snapStep) !== null && _effectiveMapLayer$sn !== void 0 ? _effectiveMapLayer$sn : 0,
 			scale,
 			onInteractionChange: setIsInteractingWithElement,
+			onLiveRectChange: (itemId, rect) => {
+				if (!itemId || !rect) {
+					edgeEdit.setPendingRectsById({});
+					return;
+				}
+				edgeEdit.setPendingRectsById({ [itemId]: {
+					left: rect.left,
+					top: rect.top,
+					width: rect.width,
+					height: rect.height
+				} });
+			},
+			alignGuideStroke: appearanceTokens.alignGuideStroke,
 			getMergedItemWrapperStyle,
 			editQuickBar
 		}) : /* @__PURE__ */ react.default.createElement(require_ItemLayer.default, {
@@ -866,7 +992,24 @@ function PisellFloorMapLayoutInner(props, ref) {
 			getMergedItemWrapperStyle,
 			onInteractionChange: setIsInteractingWithElement,
 			readModeSelectedItemId
-		}), isFloorMapView && mode === "edit" && (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && /* @__PURE__ */ react.default.createElement("div", {
+		}), isFloorMapView && mode === "edit" && showEdgeLayer && selectedId && edgeEdit.selectedNodeRect ? /* @__PURE__ */ react.default.createElement(require_NodePortMarkers.NodePortMarkers, {
+			rect: edgeEdit.selectedNodeRect,
+			contentOffsetX,
+			contentOffsetY,
+			viewportScale: scale,
+			highlightAnchors: ((_edgeEdit$drawing = edgeEdit.drawing) === null || _edgeEdit$drawing === void 0 ? void 0 : _edgeEdit$drawing.fromInstanceId) === selectedId ? [edgeEdit.drawing.fromAnchor] : [],
+			onAnchorPointerDown: (anchor) => {
+				if (selectedId) edgeEdit.startDrawingFromAnchor(selectedId, anchor);
+			}
+		}) : null, isFloorMapView && mode === "edit" && showEdgeLayer && edgeEdit.drawing && edgeEdit.drawingTargetPreview ? /* @__PURE__ */ react.default.createElement(require_NodePortMarkers.NodePortMarkers, {
+			className: `${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-port-markers--draw-target`,
+			rect: edgeEdit.drawingTargetPreview.rect,
+			contentOffsetX,
+			contentOffsetY,
+			viewportScale: scale,
+			previewOnly: true,
+			highlightAnchors: [edgeEdit.drawingTargetPreview.anchor]
+		}) : null, isFloorMapView && mode === "edit" && (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && /* @__PURE__ */ react.default.createElement("div", {
 			className: placeOverlayClass,
 			style: {
 				width: contentWidth,
@@ -884,7 +1027,11 @@ function PisellFloorMapLayoutInner(props, ref) {
 				ev.preventDefault();
 				ev.stopPropagation();
 			},
-			onDrop: handlePaletteDropOnCanvas
+			onDrop: handlePaletteDropOnCanvas,
+			onClick: () => {
+				if ((placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene") return;
+				edgeEdit.handleMapBackgroundClick();
+			}
 		}))), /* @__PURE__ */ react.default.createElement(require_ViewControlsWithZoom.ViewControlsWithZoom, {
 			config: viewControlsConfig,
 			scale,
@@ -894,6 +1041,8 @@ function PisellFloorMapLayoutInner(props, ref) {
 			toggleFullscreen: dockToggleFullscreen,
 			mapGridVisible: isOverview ? false : Boolean(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.showGrid),
 			onToggleMapGrid: isFloorMapView && !isOverview ? toggleDraftCanvasShowGrid : void 0,
+			edgesLayerVisible,
+			onToggleEdgesLayer: showEdgeLayer ? toggleEdgesLayerVisible : void 0,
 			viewportLocked,
 			onToggleViewportLock: isFloorMapView ? toggleViewportLocked : void 0,
 			dockChrome: isFloorMapView,
@@ -905,21 +1054,22 @@ function PisellFloorMapLayoutInner(props, ref) {
 			dataSources,
 			currentCanvasId,
 			mode
-		}) : floorMapViewportOverlay) : null, isFloorMapView && mode === "edit" && editPanelParams && config && dataSources && !editTopBarPhoneLayout && /* @__PURE__ */ react.default.createElement("div", {
+		}) : floorMapViewportOverlay) : null, isFloorMapView && mode === "edit" && config && dataSources && !editTopBarPhoneLayout && (edgeEdit.selectedEdge || editPanelParams) && /* @__PURE__ */ react.default.createElement("div", {
 			className: (0, classnames.default)(`pisell-floor-map-layout-edit-panel-wrap`, mapAreaSize.height > 0 && `pisell-floor-map-layout-edit-panel-wrap-constrained`),
-			style: mapAreaSize.height > 0 ? {
-				height: mapAreaSize.height - 32,
-				maxHeight: mapAreaSize.height - 32,
-				overflow: "hidden",
-				top: 16,
-				transform: "none"
-			} : void 0
-		}, /* @__PURE__ */ react.default.createElement(require_FloorMapEditPanel.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, editPanelParams), {}, {
+			style: mapAreaSize.height > 0 ? { overflow: "hidden" } : void 0
+		}, edgeEdit.selectedEdge ? /* @__PURE__ */ react.default.createElement(require_FloorMapEdgeEditPanel.FloorMapEdgeEditPanel, {
+			edge: edgeEdit.selectedEdge,
+			config,
+			onUpdate: (patch) => edgeEdit.updateEdge(edgeEdit.selectedEdge.id, patch),
+			onClose: () => edgeEdit.selectEdge(null),
+			onDelete: config.canvasUi.canEdit ? () => edgeEdit.deleteEdge(edgeEdit.selectedEdge.id) : void 0,
+			layoutDraftDirty: isLayoutDirty
+		}) : editPanelParams ? /* @__PURE__ */ react.default.createElement(require_FloorMapEditPanel.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, editPanelParams), {}, {
 			config,
 			dataSources,
 			savingRecord
-		}))));
-	})))), editTopBarPhoneLayout && editPanelParams && config && dataSources && /* @__PURE__ */ react.default.createElement(antd.Drawer, {
+		})) : null));
+	})))), editTopBarPhoneLayout && config && dataSources && (edgeEdit.selectedEdge || editPanelParams) && /* @__PURE__ */ react.default.createElement(antd.Drawer, {
 		placement: "right",
 		open: phoneEditDrawerOpen,
 		onClose: handlePhoneEditDrawerClose,
@@ -937,12 +1087,20 @@ function PisellFloorMapLayoutInner(props, ref) {
 			height: "100%"
 		} },
 		getContainer: typeof document !== "undefined" ? () => document.body : void 0
-	}, /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`pisell-floor-map-layout-edit-panel-wrap`, `pisell-floor-map-layout-edit-panel-wrap--phone-drawer`) }, /* @__PURE__ */ react.default.createElement(require_FloorMapEditPanel.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, editPanelParams), {}, {
+	}, /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`pisell-floor-map-layout-edit-panel-wrap`, `pisell-floor-map-layout-edit-panel-wrap--phone-drawer`) }, edgeEdit.selectedEdge ? /* @__PURE__ */ react.default.createElement(require_FloorMapEdgeEditPanel.FloorMapEdgeEditPanel, {
+		edge: edgeEdit.selectedEdge,
+		config,
+		onUpdate: (patch) => edgeEdit.updateEdge(edgeEdit.selectedEdge.id, patch),
+		onClose: () => edgeEdit.selectEdge(null),
+		onDelete: config.canvasUi.canEdit ? () => edgeEdit.deleteEdge(edgeEdit.selectedEdge.id) : void 0,
+		layoutDraftDirty: isLayoutDirty,
+		className: `pisell-floor-map-layout-edit-panel--phone-drawer`
+	}) : editPanelParams ? /* @__PURE__ */ react.default.createElement(require_FloorMapEditPanel.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, editPanelParams), {}, {
 		config,
 		dataSources,
 		savingRecord,
 		className: `pisell-floor-map-layout-edit-panel--phone-drawer`
-	})))));
+	})) : null)));
 }
 /** 空间布局根组件：阅读/编辑、列表与平面图双模式，ref 见 {@link PisellFloorMapLayoutRef} */
 const PisellFloorMapLayout = react.default.forwardRef(PisellFloorMapLayoutInner);

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.less

@@ -63,12 +63,35 @@ body.pisell-floor-map-layout-fullscreen-host {
     z-index: 5;
   }
 
+  /**
+   * 右侧编辑面板（图元 / 连线共用）：上下锚定，底部留出 ViewControls Dock，
+   * 避免面板白底盖住右下缩放等操作栏。
+   */
   &-edit-panel-wrap {
     position: absolute;
-    top: 50%;
+    top: 16px;
     right: 16px;
-    transform: translateY(-50%);
+    bottom: calc(16px + var(--fmap-viewport-dock-bottom-clearance, 78px));
+    transform: none;
     z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-height: 0;
+    max-width: min(280px, calc(100% - 32px));
+
+    > .pisell-floor-map-layout-edit-panel,
+    > .pisell-floor-map-layout-edge-edit-panel {
+      flex: 1 1 auto;
+      min-height: 0;
+      max-height: 100%;
+      height: auto;
+      box-sizing: border-box;
+    }
+  }
+
+  &-edit-panel-wrap-constrained {
+    overflow: hidden;
   }
 
   &-edit-panel-wrap--phone-drawer {
@@ -136,6 +159,14 @@ body.pisell-floor-map-layout-fullscreen-host {
 
   /** 视口内悬浮层：不随 Transform 缩放平移，与 ViewControls 同级 */
 
+  /**
+   * 右下 ViewControls Dock（14px + 56px chrome + 8px 间距），供右侧编辑面板底部留白。
+   * 数值与 {@link FLOOR_MAP_VIEWPORT_DOCK_BOTTOM_CLEARANCE} 保持一致。
+   */
+  &-floor-map-view {
+    --fmap-viewport-dock-bottom-clearance: 78px;
+  }
+
   &-viewport-overlay {
     position: absolute;
     left: 12px;

package/lib/components/pisellFloorMapLayout/appearance/floorMapAppearance.js

@@ -3,11 +3,59 @@ const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0
 const FLOOR_MAP_APPEARANCE_TOKENS = {
 	light: {
 		mode: "light",
-		fallbackCanvasBackgroundColor: "#F2F4F7"
+		fallbackCanvasBackgroundColor: "#F2F4F7",
+		edgeStatusStyles: {
+			online: {
+				stroke: "#12B76A",
+				dashed: false
+			},
+			offline: {
+				stroke: "#98A2B3",
+				dashed: true
+			},
+			warning: {
+				stroke: "#F79009",
+				dashed: false
+			},
+			unknown: {
+				stroke: "#667085",
+				dashed: false
+			}
+		},
+		edgeSelectedStroke: "#1570EF",
+		edgeGhostStroke: "#84CAFF",
+		edgePortLabelBackground: "#FFFFFF",
+		edgePortLabelText: "#344054",
+		edgePortLabelBorder: "#D0D5DD",
+		alignGuideStroke: "#1570EF"
 	},
 	dark: {
 		mode: "dark",
-		fallbackCanvasBackgroundColor: "#31353d"
+		fallbackCanvasBackgroundColor: "#31353d",
+		edgeStatusStyles: {
+			online: {
+				stroke: "#32D583",
+				dashed: false
+			},
+			offline: {
+				stroke: "#667085",
+				dashed: true
+			},
+			warning: {
+				stroke: "#FDB022",
+				dashed: false
+			},
+			unknown: {
+				stroke: "#98A2B3",
+				dashed: false
+			}
+		},
+		edgeSelectedStroke: "#53B1FD",
+		edgeGhostStroke: "#2E90FA",
+		edgePortLabelBackground: "#1D2939",
+		edgePortLabelText: "#F2F4F7",
+		edgePortLabelBorder: "#475467",
+		alignGuideStroke: "#53B1FD"
 	}
 };
 /**