@pisell/materials 1.8.54 → 1.8.56

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"
 	}
 };
 /**

package/lib/components/pisellFloorMapLayout/components/EdgeLayer.js

@@ -0,0 +1,255 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_edgeRouting = require("../utils/edgeRouting.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+require("./EdgeLayer.less");
+//#region src/components/pisellFloorMapLayout/components/EdgeLayer.tsx
+/**
+* EdgeLayer - 拓扑连线 SVG 层（正交折线 + 端口标签）
+*/
+const PREFIX = "pisell-floor-map-layout";
+/** 中段手柄基础视觉尺寸（px），实际渲染会按 viewportScale 反向缩放 */
+const SEGMENT_HANDLE_BASE_SIZE = 12;
+/** 段长 < 该值（px）时不渲染手柄，避免极短段误触 */
+const SEGMENT_HANDLE_MIN_LENGTH = 16;
+function resolveEdgeStroke(edge, appearance, selected) {
+	var _edge$status, _edge$strokeWidth3;
+	if (selected) {
+		var _edge$strokeWidth;
+		return {
+			stroke: appearance.edgeSelectedStroke,
+			strokeWidth: ((_edge$strokeWidth = edge.strokeWidth) !== null && _edge$strokeWidth !== void 0 ? _edge$strokeWidth : 1.5) + 1
+		};
+	}
+	if (edge.color) {
+		var _edge$strokeWidth2;
+		return {
+			stroke: edge.color,
+			strokeWidth: (_edge$strokeWidth2 = edge.strokeWidth) !== null && _edge$strokeWidth2 !== void 0 ? _edge$strokeWidth2 : 1.5,
+			strokeDasharray: edge.dashed ? "6 4" : void 0
+		};
+	}
+	const status = (_edge$status = edge.status) !== null && _edge$status !== void 0 ? _edge$status : "unknown";
+	const style = appearance.edgeStatusStyles[status];
+	return {
+		stroke: style.stroke,
+		strokeWidth: (_edge$strokeWidth3 = edge.strokeWidth) !== null && _edge$strokeWidth3 !== void 0 ? _edge$strokeWidth3 : 1.5,
+		strokeDasharray: edge.dashed || style.dashed ? "6 4" : void 0
+	};
+}
+function PortLabel(props) {
+	const { x, y, text, appearance } = props;
+	const estW = Math.max(32, text.length * 6.5 + 12);
+	const h = 18;
+	return /* @__PURE__ */ react.default.createElement("g", { className: `${PREFIX}-edge-port-label` }, /* @__PURE__ */ react.default.createElement("rect", {
+		x: x - estW / 2,
+		y: y - h / 2,
+		width: estW,
+		height: h,
+		rx: 4,
+		fill: appearance.edgePortLabelBackground,
+		stroke: appearance.edgePortLabelBorder,
+		strokeWidth: 1
+	}), /* @__PURE__ */ react.default.createElement("text", {
+		x,
+		y: y + 4,
+		textAnchor: "middle",
+		fontSize: 11,
+		fill: appearance.edgePortLabelText
+	}, text));
+}
+function EdgeLayer(props) {
+	const { width, height, contentOffsetX = 0, contentOffsetY = 0, edges, routes, rectsById, appearance, mode, selectedEdgeId, ghostPathD, onEdgeClick, viewportScale = 1, onSegmentDragStart, className } = props;
+	const safeScale = Math.max(viewportScale, .01);
+	const handleSize = SEGMENT_HANDLE_BASE_SIZE / safeScale;
+	const handleHalf = handleSize / 2;
+	const edgeById = (0, react.useMemo)(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const e of edges) m.set(e.id, e);
+		return m;
+	}, [edges]);
+	const routeById = (0, react.useMemo)(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const r of routes) m.set(r.edgeId, r);
+		return m;
+	}, [routes]);
+	/** 同目标多边时错开 connection_type 标签，避免叠在一起 */
+	const centerLabelByEdgeId = (0, react.useMemo)(() => require_edgeRouting.resolveEdgeCenterLabelPositions(routes.map((route) => {
+		const edge = edgeById.get(route.edgeId);
+		if (!edge) return null;
+		return {
+			edgeId: route.edgeId,
+			sourceId: edge.sourceId,
+			targetId: edge.targetId,
+			points: route.points,
+			label: edge.label
+		};
+	}).filter((row) => row != null), {
+		placement: "target-tail",
+		rectsById
+	}), [
+		routes,
+		edgeById,
+		rectsById
+	]);
+	return /* @__PURE__ */ react.default.createElement("svg", {
+		className: (0, classnames.default)(`${PREFIX}-edge-layer`, className),
+		width,
+		height,
+		style: {
+			position: "absolute",
+			left: contentOffsetX,
+			top: contentOffsetY,
+			pointerEvents: "none",
+			overflow: "visible"
+		},
+		"aria-hidden": mode === "read"
+	}, /* @__PURE__ */ react.default.createElement("g", { className: `${PREFIX}-edge-layer-inner` }, routes.map((route) => {
+		const edge = edgeById.get(route.edgeId);
+		if (!edge) return null;
+		const selected = selectedEdgeId === edge.id;
+		const stroke = resolveEdgeStroke(edge, appearance, selected);
+		return /* @__PURE__ */ react.default.createElement("g", {
+			key: edge.id,
+			className: `${PREFIX}-edge-group`
+		}, /* @__PURE__ */ react.default.createElement("path", {
+			d: route.pathD,
+			fill: "none",
+			stroke: stroke.stroke,
+			strokeWidth: stroke.strokeWidth,
+			strokeDasharray: stroke.strokeDasharray,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: (0, classnames.default)(`${PREFIX}-edge-path`, {
+				[`${PREFIX}-edge-path--selected`]: selected,
+				[`${PREFIX}-edge-path--interactive`]: mode === "edit"
+			}),
+			style: {
+				pointerEvents: mode === "edit" ? "stroke" : "none",
+				cursor: mode === "edit" ? "pointer" : void 0
+			},
+			onClick: mode === "edit" && onEdgeClick ? (ev) => {
+				ev.stopPropagation();
+				onEdgeClick(edge.id, ev);
+			} : void 0
+		}), edge.label && route.points.length >= 2 ? (() => {
+			const labelPos = centerLabelByEdgeId.get(edge.id);
+			if (!labelPos) return null;
+			return /* @__PURE__ */ react.default.createElement(PortLabel, {
+				x: labelPos.x,
+				y: labelPos.y,
+				text: edge.label,
+				appearance
+			});
+		})() : null);
+	}), edges.map((edge) => {
+		var _edge$sourceAnchor, _edge$targetAnchor;
+		const route = routeById.get(edge.id);
+		const srcRect = rectsById.get(edge.sourceId);
+		const tgtRect = rectsById.get(edge.targetId);
+		if (!route || !srcRect || !tgtRect) return null;
+		const sourceAnchor = (_edge$sourceAnchor = edge.sourceAnchor) !== null && _edge$sourceAnchor !== void 0 ? _edge$sourceAnchor : "right";
+		const targetAnchor = (_edge$targetAnchor = edge.targetAnchor) !== null && _edge$targetAnchor !== void 0 ? _edge$targetAnchor : "left";
+		const spLabel = require_edgeRouting.getPortLabelPosition(srcRect, sourceAnchor);
+		const tpLabel = require_edgeRouting.getPortLabelPosition(tgtRect, targetAnchor);
+		return /* @__PURE__ */ react.default.createElement("g", { key: `${edge.id}-labels` }, edge.sourceLabel ? /* @__PURE__ */ react.default.createElement(PortLabel, {
+			x: spLabel.x,
+			y: spLabel.y,
+			text: edge.sourceLabel,
+			appearance
+		}) : null, edge.targetLabel ? /* @__PURE__ */ react.default.createElement(PortLabel, {
+			x: tpLabel.x,
+			y: tpLabel.y,
+			text: edge.targetLabel,
+			appearance
+		}) : null);
+	}), mode === "edit" && selectedEdgeId && onSegmentDragStart ? (() => {
+		const route = routeById.get(selectedEdgeId);
+		if (!route) return null;
+		const pts = route.points;
+		if (pts.length < 2) return null;
+		const lastSegIdx = pts.length - 2;
+		const handles = [];
+		for (let i = 0; i <= lastSegIdx; i++) {
+			const role = i === 0 ? "first" : i === lastSegIdx ? "last" : "inner";
+			const [x1, y1] = pts[i];
+			const [x2, y2] = pts[i + 1];
+			let axis;
+			let position;
+			let length;
+			let midX;
+			let midY;
+			if (y1 === y2 && x1 !== x2) {
+				axis = "h";
+				position = y1;
+				length = Math.abs(x2 - x1);
+				midX = (x1 + x2) / 2;
+				midY = y1;
+			} else if (x1 === x2 && y1 !== y2) {
+				axis = "v";
+				position = x1;
+				length = Math.abs(y2 - y1);
+				midX = x1;
+				midY = (y1 + y2) / 2;
+			} else continue;
+			if (length < SEGMENT_HANDLE_MIN_LENGTH) continue;
+			handles.push({
+				key: `${role}-${i}`,
+				role,
+				segmentIndex: i,
+				axis,
+				position,
+				length,
+				midX,
+				midY
+			});
+		}
+		if (handles.length === 0) return null;
+		return /* @__PURE__ */ react.default.createElement("g", {
+			className: `${PREFIX}-edge-segment-handles`,
+			pointerEvents: "auto"
+		}, handles.map((h) => /* @__PURE__ */ react.default.createElement("rect", {
+			key: h.key,
+			x: h.midX - handleHalf,
+			y: h.midY - handleHalf,
+			width: handleSize,
+			height: handleSize,
+			rx: handleHalf,
+			ry: handleHalf,
+			className: (0, classnames.default)(`${PREFIX}-edge-segment-handle`, `${PREFIX}-edge-segment-handle--${h.axis}`, `${PREFIX}-edge-segment-handle--${h.role}`),
+			fill: appearance.edgeSelectedStroke,
+			stroke: "#fff",
+			strokeWidth: 1.5 / safeScale,
+			style: {
+				cursor: h.axis === "h" ? "ns-resize" : "ew-resize",
+				touchAction: "none"
+			},
+			onPointerDown: (ev) => {
+				ev.stopPropagation();
+				ev.preventDefault();
+				onSegmentDragStart({
+					edgeId: selectedEdgeId,
+					role: h.role,
+					segmentIndex: h.segmentIndex,
+					axis: h.axis,
+					startPosition: h.position,
+					clientX: ev.clientX,
+					clientY: ev.clientY,
+					segmentLength: h.length
+				});
+			}
+		})));
+	})() : null, ghostPathD ? /* @__PURE__ */ react.default.createElement("path", {
+		d: ghostPathD,
+		fill: "none",
+		stroke: appearance.edgeGhostStroke,
+		strokeWidth: 1.5,
+		strokeDasharray: "4 4",
+		strokeLinecap: "round",
+		pointerEvents: "none"
+	}) : null));
+}
+//#endregion
+exports.EdgeLayer = EdgeLayer;

package/lib/components/pisellFloorMapLayout/components/EdgeLayer.less

@@ -0,0 +1,11 @@
+.pisell-floor-map-layout-edge-layer {
+  z-index: 2;
+}
+
+.pisell-floor-map-layout-edge-path--interactive:hover {
+  filter: brightness(1.05);
+}
+
+.pisell-floor-map-layout-edge-path--selected {
+  filter: drop-shadow(0 0 2px rgba(21, 112, 239, 0.35));
+}

package/lib/components/pisellFloorMapLayout/components/EditableItemLayer.js

@@ -1,6 +1,7 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
 const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
 const require_snap = require("../utils/snap.js");
+const require_alignSnap = require("../utils/alignSnap.js");
 const require_FloorMapEditQuickActions = require("./FloorMapEditQuickActions.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
@@ -19,6 +20,12 @@ const PREFIX = "pisell-floor-map-layout";
 const DRAG_THRESHOLD = 4;
 /** 选中图元抬升到该层级，保证快捷栏与缩放点不被其它图元（任意 item.zIndex）遮住 */
 const SELECTED_ITEM_STACK_Z = 1e6;
+const RESIZE_CORNER_HANDLES = [
+	"nw",
+	"ne",
+	"se",
+	"sw"
+];
 function getItemKey(item, index, rowKey) {
 	var _rowKey;
 	if (!rowKey) return item.id;
@@ -33,11 +40,40 @@ function getShapeStyle(shape = "rect") {
 	}
 }
 function EditableItemLayer(props) {
-	const { items, renderItem, rowKey, cellSize, itemUnit = "pixel", itemGap = 0, contentWidth, contentHeight, contentOffsetX = 0, contentOffsetY = 0, selectedId, onSelect, onUpdateItem, snapStep = 0, scale = 1, onInteractionChange, getMergedItemWrapperStyle, className, editQuickBar } = props;
+	const { items, renderItem, rowKey, cellSize, itemUnit = "pixel", itemGap = 0, contentWidth, contentHeight, contentOffsetX = 0, contentOffsetY = 0, selectedId, onSelect, onUpdateItem, snapStep = 0, scale = 1, onInteractionChange, onLiveRectChange, alignSnapThresholdPx = 6, onAlignGuidesChange, alignGuideStroke = "#1570EF", getMergedItemWrapperStyle, className, editQuickBar } = props;
 	const contentRef = (0, react.useRef)(null);
 	const liveRectRef = (0, react.useRef)(null);
 	const [interaction, setInteraction] = (0, react.useState)(null);
 	const [liveRect, setLiveRect] = (0, react.useState)(null);
+	/** 拖动/缩放过程中的对齐辅助线（红色虚线） */
+	const [alignGuides, setAlignGuides] = (0, react.useState)([]);
+	/** 基础像素矩形（与 liveRect 无关），供对齐吸附排除自身后参考 */
+	const getBaseRect = (0, react.useCallback)((item) => {
+		var _item$width2, _item$height2;
+		const isPixel = itemUnit === "pixel";
+		const g = itemGap !== null && itemGap !== void 0 ? itemGap : 0;
+		if (isPixel) {
+			var _item$width, _item$height;
+			return {
+				left: item.x,
+				top: item.y,
+				width: (_item$width = item.width) !== null && _item$width !== void 0 ? _item$width : cellSize,
+				height: (_item$height = item.height) !== null && _item$height !== void 0 ? _item$height : cellSize
+			};
+		}
+		const w = (_item$width2 = item.width) !== null && _item$width2 !== void 0 ? _item$width2 : 1;
+		const h = (_item$height2 = item.height) !== null && _item$height2 !== void 0 ? _item$height2 : 1;
+		return {
+			left: g > 0 ? item.x * (cellSize + g) + g : item.x * cellSize,
+			top: g > 0 ? item.y * (cellSize + g) + g : item.y * cellSize,
+			width: g > 0 ? w * cellSize + (w - 1) * g : w * cellSize,
+			height: g > 0 ? h * cellSize + (h - 1) * g : h * cellSize
+		};
+	}, [
+		cellSize,
+		itemGap,
+		itemUnit
+	]);
 	const getItemStyle = (0, react.useCallback)((item, index) => {
 		const isPixel = itemUnit === "pixel";
 		const g = itemGap !== null && itemGap !== void 0 ? itemGap : 0;
@@ -46,15 +82,15 @@ function EditableItemLayer(props) {
 		let width;
 		let height;
 		if (isPixel) {
-			var _item$width, _item$height;
-			width = (_item$width = item.width) !== null && _item$width !== void 0 ? _item$width : cellSize;
-			height = (_item$height = item.height) !== null && _item$height !== void 0 ? _item$height : cellSize;
+			var _item$width3, _item$height3;
+			width = (_item$width3 = item.width) !== null && _item$width3 !== void 0 ? _item$width3 : cellSize;
+			height = (_item$height3 = item.height) !== null && _item$height3 !== void 0 ? _item$height3 : cellSize;
 			left = item.x;
 			top = item.y;
 		} else {
-			var _item$width2, _item$height2;
-			const w = (_item$width2 = item.width) !== null && _item$width2 !== void 0 ? _item$width2 : 1;
-			const h = (_item$height2 = item.height) !== null && _item$height2 !== void 0 ? _item$height2 : 1;
+			var _item$width4, _item$height4;
+			const w = (_item$width4 = item.width) !== null && _item$width4 !== void 0 ? _item$width4 : 1;
+			const h = (_item$height4 = item.height) !== null && _item$height4 !== void 0 ? _item$height4 : 1;
 			left = g > 0 ? item.x * (cellSize + g) + g : item.x * cellSize;
 			top = g > 0 ? item.y * (cellSize + g) + g : item.y * cellSize;
 			width = g > 0 ? w * cellSize + (w - 1) * g : w * cellSize;
@@ -125,18 +161,46 @@ function EditableItemLayer(props) {
 	]);
 	react.default.useEffect(() => {
 		if (!interaction) return;
+		/** 阈值按 scale 折算到内容坐标，让它在屏幕上恒定 */
+		const threshold = Math.max(0, alignSnapThresholdPx) / Math.max(scale, .01);
+		/** 内部计算 snap 目标：排除自身，使用基础 rect（避开 liveRect 自吸） */
+		const otherRects = items.filter((it) => it.id !== interaction.itemId).map((it) => require_objectSpread2._objectSpread2({ id: it.id }, getBaseRect(it)));
 		const onMove = (e) => {
 			if (interaction.type === "drag") {
 				const dx = (e.clientX - interaction.startX) / scale;
 				const dy = (e.clientY - interaction.startY) / scale;
-				const next = {
+				const rawNext = {
 					x: interaction.itemX + dx,
 					y: interaction.itemY + dy,
 					width: interaction.itemW,
 					height: interaction.itemH
 				};
+				const snap = require_alignSnap.snapRectToOthers({
+					id: interaction.itemId,
+					left: rawNext.x,
+					top: rawNext.y,
+					width: rawNext.width,
+					height: rawNext.height
+				}, otherRects, {
+					mode: "drag",
+					threshold
+				});
+				const next = {
+					x: snap.rect.left,
+					y: snap.rect.top,
+					width: snap.rect.width,
+					height: snap.rect.height
+				};
 				liveRectRef.current = next;
 				setLiveRect(require_objectSpread2._objectSpread2({ id: interaction.itemId }, next));
+				onLiveRectChange === null || onLiveRectChange === void 0 || onLiveRectChange(interaction.itemId, {
+					left: next.x,
+					top: next.y,
+					width: next.width,
+					height: next.height
+				});
+				setAlignGuides(snap.guides);
+				onAlignGuidesChange === null || onAlignGuidesChange === void 0 || onAlignGuidesChange(snap.guides);
 			} else {
 				const dx = (e.clientX - interaction.startX) / scale;
 				const dy = (e.clientY - interaction.startY) / scale;
@@ -155,14 +219,36 @@ function EditableItemLayer(props) {
 					h = Math.max(20, startH - dy);
 					y = startItemY + dy;
 				}
-				const next = {
-					x,
-					y,
+				const movableEdgesX = handle.includes("w") ? ["left"] : handle.includes("e") ? ["right"] : [];
+				const movableEdgesY = handle.includes("n") ? ["top"] : handle.includes("s") ? ["bottom"] : [];
+				const snap = require_alignSnap.snapRectToOthers({
+					id: interaction.itemId,
+					left: x,
+					top: y,
 					width: w,
 					height: h
+				}, otherRects, {
+					mode: "resize",
+					threshold,
+					movableEdgesX,
+					movableEdgesY
+				});
+				const next = {
+					x: snap.rect.left,
+					y: snap.rect.top,
+					width: Math.max(20, snap.rect.width),
+					height: Math.max(20, snap.rect.height)
 				};
 				liveRectRef.current = next;
 				setLiveRect(require_objectSpread2._objectSpread2({ id: interaction.itemId }, next));
+				onLiveRectChange === null || onLiveRectChange === void 0 || onLiveRectChange(interaction.itemId, {
+					left: next.x,
+					top: next.y,
+					width: next.width,
+					height: next.height
+				});
+				setAlignGuides(snap.guides);
+				onAlignGuidesChange === null || onAlignGuidesChange === void 0 || onAlignGuidesChange(snap.guides);
 			}
 		};
 		const onUp = () => {
@@ -170,6 +256,9 @@ function EditableItemLayer(props) {
 			if (!current) return;
 			const last = liveRectRef.current;
 			onInteractionChange === null || onInteractionChange === void 0 || onInteractionChange(false);
+			onLiveRectChange === null || onLiveRectChange === void 0 || onLiveRectChange(null, null);
+			setAlignGuides([]);
+			onAlignGuidesChange === null || onAlignGuidesChange === void 0 || onAlignGuidesChange([]);
 			setLiveRect(null);
 			liveRectRef.current = null;
 			setInteraction(null);
@@ -205,7 +294,12 @@ function EditableItemLayer(props) {
 		scale,
 		snapStep,
 		onUpdateItem,
-		onInteractionChange
+		onInteractionChange,
+		onLiveRectChange,
+		items,
+		getBaseRect,
+		alignSnapThresholdPx,
+		onAlignGuidesChange
 	]);
 	const handleItemClick = (0, react.useCallback)((e, item) => {
 		if (interaction) return;
@@ -241,26 +335,31 @@ function EditableItemLayer(props) {
 				}, shapeStyle), wrapperStyle), {}, { zIndex: isSelected ? SELECTED_ITEM_STACK_Z + ((_item$zIndex2 = item.zIndex) !== null && _item$zIndex2 !== void 0 ? _item$zIndex2 : 0) : baseZ }),
 				onPointerDown: (e) => handlePointerDown(e, item, index),
 				onClick: (e) => handleItemClick(e, item)
-			}, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-editable-item-inner` }, renderItem(item, index, { viewportScale: scale })), isSelected && !isSceneLayoutTransformLocked(merged) && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, [
-				"nw",
-				"n",
-				"ne",
-				"e",
-				"se",
-				"s",
-				"sw",
-				"w"
-			].map((h) => /* @__PURE__ */ react.default.createElement("div", {
-				key: h,
-				className: (0, classnames.default)(`${PREFIX}-editable-resize-handle`, `${PREFIX}-editable-resize-handle-${h}`),
-				onPointerDown: (e) => handleResizePointerDown(e, item.id, h),
-				style: { position: "absolute" }
-			}))), isSelected && editQuickBar ? /* @__PURE__ */ react.default.createElement(require_FloorMapEditQuickActions.FloorMapEditQuickActions, {
+			}, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-editable-item-inner` }, renderItem(item, index, { viewportScale: scale })), isSelected && !isSceneLayoutTransformLocked(merged) && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, RESIZE_CORNER_HANDLES.map((h) => {
+				/** viewport scale 补偿：保持视觉 20px 不随画布放大变大 */
+				const size = 20 / Math.max(scale, .01);
+				const half = size / 2;
+				return /* @__PURE__ */ react.default.createElement("div", {
+					key: h,
+					className: (0, classnames.default)(`${PREFIX}-editable-resize-handle`, `${PREFIX}-editable-resize-handle-${h}`),
+					onPointerDown: (e) => handleResizePointerDown(e, item.id, h),
+					style: {
+						position: "absolute",
+						width: size,
+						height: size,
+						marginTop: -half,
+						marginRight: -half,
+						marginBottom: -half,
+						marginLeft: -half
+					}
+				});
+			})), isSelected && editQuickBar ? /* @__PURE__ */ react.default.createElement(require_FloorMapEditQuickActions.FloorMapEditQuickActions, {
 				labels: editQuickBar.labels,
 				isLocked: editQuickBar.isLocked,
 				onToggleLock: editQuickBar.onToggleLock,
 				onDuplicate: editQuickBar.onDuplicate,
-				onDelete: editQuickBar.onDelete
+				onDelete: editQuickBar.onDelete,
+				viewportScale: scale
 			}) : null);
 		});
 	}, [
@@ -295,7 +394,58 @@ function EditableItemLayer(props) {
 		width: contentWidth,
 		height: contentHeight,
 		transform: `translate(${contentOffsetX}px, ${contentOffsetY}px)`
-	} }, itemNodes) : itemNodes);
+	} }, itemNodes, alignGuides.length > 0 ? /* @__PURE__ */ react.default.createElement(AlignGuideOverlay, {
+		guides: alignGuides,
+		width: contentWidth,
+		height: contentHeight,
+		scale,
+		stroke: alignGuideStroke
+	}) : null) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, itemNodes, alignGuides.length > 0 ? /* @__PURE__ */ react.default.createElement(AlignGuideOverlay, {
+		guides: alignGuides,
+		width: contentWidth,
+		height: contentHeight,
+		scale,
+		stroke: alignGuideStroke
+	}) : null));
+}
+/** 拖动/缩放时的对齐辅助线层；线宽按 scale 反向缩放，保持屏幕恒定 1px */
+function AlignGuideOverlay(props) {
+	const { guides, width, height, scale, stroke } = props;
+	const safeScale = Math.max(scale, .01);
+	const sw = 1 / safeScale;
+	return /* @__PURE__ */ react.default.createElement("svg", {
+		width,
+		height,
+		style: {
+			position: "absolute",
+			left: 0,
+			top: 0,
+			pointerEvents: "none",
+			overflow: "visible"
+		},
+		"aria-hidden": true
+	}, guides.map((g, i) => {
+		if (g.orientation === "v") return /* @__PURE__ */ react.default.createElement("line", {
+			key: `v-${i}-${g.position}`,
+			x1: g.position,
+			y1: g.start,
+			x2: g.position,
+			y2: g.end,
+			stroke,
+			strokeWidth: sw,
+			strokeDasharray: `${4 / safeScale} ${3 / safeScale}`
+		});
+		return /* @__PURE__ */ react.default.createElement("line", {
+			key: `h-${i}-${g.position}`,
+			x1: g.start,
+			y1: g.position,
+			x2: g.end,
+			y2: g.position,
+			stroke,
+			strokeWidth: sw,
+			strokeDasharray: `${4 / safeScale} ${3 / safeScale}`
+		});
+	}));
 }
 //#endregion
 exports.default = EditableItemLayer;

package/lib/components/pisellFloorMapLayout/components/EditableItemLayer.less

@@ -52,51 +52,23 @@
     cursor: nwse-resize;
   }
 
-  &-n {
-    left: 50%;
-    top: 0;
-    margin-left: -10px;
-    cursor: ns-resize;
-  }
-
   &-ne {
     right: 0;
     top: 0;
     cursor: nesw-resize;
   }
 
-  &-e {
-    right: 0;
-    top: 50%;
-    margin-top: -10px;
-    cursor: ew-resize;
-  }
-
   &-se {
     right: 0;
     bottom: 0;
     cursor: nwse-resize;
   }
 
-  &-s {
-    left: 50%;
-    bottom: 0;
-    margin-left: -10px;
-    cursor: ns-resize;
-  }
-
   &-sw {
     left: 0;
     bottom: 0;
     cursor: nesw-resize;
   }
-
-  &-w {
-    left: 0;
-    top: 50%;
-    margin-top: -10px;
-    cursor: ew-resize;
-  }
 }
 
 .pisell-floor-map-layout-edit-quick-actions {