@tmagic/stage 1.7.6 → 1.7.8-beta.1

package/dist/es/DragResizeHelper.js

@@ -0,0 +1,280 @@
+import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, Mode, ZIndex } from "./const.js";
+import { getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from "./util.js";
+import TargetShadow from "./TargetShadow.js";
+import { calcValueByFontsize, getIdFromEl, setIdToEl } from "@tmagic/core";
+import MoveableHelper from "moveable-helper";
+//#region packages/stage/src/DragResizeHelper.ts
+/**
+* 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
+* 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
+* 有个特殊情况是流式布局下，moveableHelper不支持，targetShadow也是DragResizeHelper直接改的
+*/
+var DragResizeHelper = class {
+	/** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
+	targetShadow;
+	/** 要操作的原始目标节点 */
+	target = null;
+	/** 多选:目标节点组 */
+	targetList = [];
+	/** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
+	* MoveableHelper里面的方法是成员属性，如果DragResizeHelper用继承的方式将无法通过super去调这些方法 */
+	moveableHelper;
+	/** 流式布局下，目标节点的镜像节点 */
+	ghostEl;
+	/** 用于记录节点被改变前的位置 */
+	frameSnapShot = {
+		left: 0,
+		top: 0
+	};
+	/** 多选模式下的多个节点 */
+	framesSnapShot = [];
+	/** 布局方式：流式布局、绝对定位、固定定位 */
+	mode = Mode.ABSOLUTE;
+	constructor(config) {
+		this.moveableHelper = MoveableHelper.create({
+			useBeforeRender: true,
+			useRender: false,
+			createAuto: true
+		});
+		this.targetShadow = new TargetShadow({
+			container: config.container,
+			updateDragEl: config.updateDragEl,
+			zIndex: ZIndex.DRAG_EL,
+			idPrefix: DRAG_EL_ID_PREFIX
+		});
+	}
+	destroy() {
+		this.target = null;
+		this.targetList = [];
+		this.targetShadow.destroy();
+		this.destroyGhostEl();
+		this.moveableHelper.clear();
+	}
+	destroyShadowEl() {
+		this.targetShadow.destroyEl();
+	}
+	getShadowEl() {
+		return this.targetShadow.el;
+	}
+	updateShadowEl(el) {
+		this.destroyGhostEl();
+		this.target = el;
+		this.targetShadow.update(el);
+	}
+	setMode(mode) {
+		this.mode = mode;
+	}
+	/**
+	* 改变大小事件开始
+	* @param e 包含了拖拽节点的dom，moveableHelper会直接修改拖拽节点
+	*/
+	onResizeStart(e) {
+		this.moveableHelper.onResizeStart(e);
+		this.frameSnapShot.top = this.target.offsetTop;
+		this.frameSnapShot.left = this.target.offsetLeft;
+	}
+	onResize(e) {
+		const { width, height, drag } = e;
+		const { beforeTranslate } = drag;
+		if (this.mode === Mode.SORTABLE) {
+			this.target.style.top = "0px";
+			if (this.targetShadow.el) {
+				this.targetShadow.el.style.width = `${width}px`;
+				this.targetShadow.el.style.height = `${height}px`;
+			}
+		} else {
+			this.moveableHelper.onResize(e);
+			const { marginLeft, marginTop } = getMarginValue(this.target);
+			this.target.style.left = `${this.frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
+			this.target.style.top = `${this.frameSnapShot.top + beforeTranslate[1] - marginTop}px`;
+		}
+		const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getBorderWidth(this.target);
+		this.target.style.width = `${width + borderLeftWidth + borderRightWidth}px`;
+		this.target.style.height = `${height + borderTopWidth + borderBottomWidth}px`;
+	}
+	onDragStart(e) {
+		this.moveableHelper.onDragStart(e);
+		if (this.mode === Mode.SORTABLE) this.ghostEl = this.generateGhostEl(this.target);
+		this.frameSnapShot.top = this.target.offsetTop;
+		this.frameSnapShot.left = this.target.offsetLeft;
+	}
+	onDrag(e) {
+		if (this.ghostEl) {
+			this.ghostEl.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1]}px`;
+			return;
+		}
+		this.moveableHelper.onDrag(e);
+		const { marginLeft, marginTop } = getMarginValue(this.target);
+		this.target.style.left = `${this.frameSnapShot.left + e.beforeTranslate[0] - marginLeft}px`;
+		this.target.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1] - marginTop}px`;
+	}
+	onRotateStart(e) {
+		this.moveableHelper.onRotateStart(e);
+	}
+	onRotate(e) {
+		this.moveableHelper.onRotate(e);
+		const frame = this.moveableHelper.getFrame(e.target);
+		this.target.style.transform = frame?.toCSSObject().transform || "";
+	}
+	onScaleStart(e) {
+		this.moveableHelper.onScaleStart(e);
+	}
+	onScale(e) {
+		this.moveableHelper.onScale(e);
+		const frame = this.moveableHelper.getFrame(e.target);
+		this.target.style.transform = frame?.toCSSObject().transform || "";
+	}
+	getGhostEl() {
+		return this.ghostEl;
+	}
+	destroyGhostEl() {
+		this.ghostEl?.remove();
+		this.ghostEl = void 0;
+	}
+	clear() {
+		this.moveableHelper.clear();
+	}
+	getFrame(el) {
+		return this.moveableHelper.getFrame(el);
+	}
+	getShadowEls() {
+		return this.targetShadow.els;
+	}
+	updateGroup(els) {
+		this.targetList = els;
+		this.framesSnapShot = [];
+		this.targetShadow.updateGroup(els);
+	}
+	setTargetList(targetList) {
+		this.targetList = targetList;
+	}
+	clearMultiSelectStatus() {
+		this.targetList = [];
+		this.targetShadow.destroyEls();
+	}
+	onResizeGroupStart(e) {
+		const { events } = e;
+		this.moveableHelper.onResizeGroupStart(e);
+		this.setFramesSnapShot(events);
+	}
+	/**
+	* 多选状态下通过拖拽边框改变大小，所有选中组件会一起改变大小
+	*/
+	onResizeGroup(e) {
+		const { events } = e;
+		this.moveableHelper.onResizeGroup(e);
+		events.forEach((ev) => {
+			const { width, height, beforeTranslate } = ev.drag;
+			const frameSnapShot = this.framesSnapShot.find((frameItem) => frameItem.id === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, ""));
+			if (!frameSnapShot) return;
+			const targeEl = this.targetList.find((targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, ""));
+			if (!targeEl) return;
+			if (!this.targetList.find((targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement))) {
+				const { marginLeft, marginTop } = getMarginValue(targeEl);
+				targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
+				targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1] - marginTop}px`;
+			}
+			targeEl.style.width = `${width}px`;
+			targeEl.style.height = `${height}px`;
+		});
+	}
+	onDragGroupStart(e) {
+		this.moveableHelper.onDragGroupStart(e);
+		const { events } = e;
+		this.setFramesSnapShot(events);
+	}
+	onDragGroup(e) {
+		this.moveableHelper.onDragGroup(e);
+		const { events } = e;
+		events.forEach((ev) => {
+			const frameSnapShot = this.framesSnapShot.find((frameItem) => getIdFromEl()(ev.target)?.startsWith("drag_el_") && getIdFromEl()(ev.target)?.endsWith(frameItem.id));
+			if (!frameSnapShot) return;
+			const findTargetElFuctin = (targetItem) => {
+				const getId = getIdFromEl();
+				const targetId = getId(ev.target);
+				const targetItemId = getId(targetItem);
+				return targetId?.startsWith("drag_el_") && targetItemId && targetId?.endsWith(targetItemId);
+			};
+			const targeEl = this.targetList.find(findTargetElFuctin);
+			if (!targeEl) return;
+			if (!this.targetList.find((targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement))) {
+				const { marginLeft, marginTop } = getMarginValue(targeEl);
+				targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
+				targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1] - marginTop}px`;
+			}
+		});
+	}
+	getUpdatedElRect(el, parentEl, doc) {
+		const offset = this.mode === Mode.SORTABLE ? {
+			left: 0,
+			top: 0
+		} : {
+			left: el.offsetLeft,
+			top: el.offsetTop
+		};
+		const { marginLeft, marginTop } = getMarginValue(el);
+		let left = calcValueByFontsize(doc, offset.left) - marginLeft;
+		let top = calcValueByFontsize(doc, offset.top) - marginTop;
+		const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getBorderWidth(el);
+		const width = calcValueByFontsize(doc, el.clientWidth + borderLeftWidth + borderRightWidth);
+		const height = calcValueByFontsize(doc, el.clientHeight + borderTopWidth + borderBottomWidth);
+		let shadowEl = this.getShadowEl();
+		const shadowEls = this.getShadowEls();
+		if (shadowEls.length) shadowEl = shadowEls.find((item) => getIdFromEl()(item)?.endsWith(getIdFromEl()(el) || ""));
+		if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
+			const targetShadowHtmlEl = shadowEl;
+			const targetShadowElOffsetLeft = targetShadowHtmlEl.offsetLeft || 0;
+			const targetShadowElOffsetTop = targetShadowHtmlEl.offsetTop || 0;
+			const [translateX, translateY] = this.getFrame(shadowEl)?.properties.transform.translate.value;
+			const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+			left = calcValueByFontsize(doc, targetShadowElOffsetLeft) + parseFloat(translateX) - calcValueByFontsize(doc, parentLeft);
+			top = calcValueByFontsize(doc, targetShadowElOffsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
+		}
+		return {
+			width,
+			height,
+			left,
+			top
+		};
+	}
+	/**
+	* 多选状态设置多个节点的快照
+	*/
+	setFramesSnapShot(events) {
+		if (this.framesSnapShot.length > 0) return;
+		events.forEach((ev) => {
+			const matchEventTarget = this.targetList.find((targetItem) => getIdFromEl()(ev.target)?.startsWith("drag_el_") && getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem) || ""));
+			if (!matchEventTarget) return;
+			const id = getIdFromEl()(matchEventTarget);
+			id && this.framesSnapShot.push({
+				left: matchEventTarget.offsetLeft,
+				top: matchEventTarget.offsetTop,
+				id
+			});
+		});
+	}
+	/**
+	* 流式布局把目标节点复制一份进行拖拽，在拖拽结束前不影响页面原布局样式
+	*/
+	generateGhostEl(el) {
+		if (this.ghostEl) this.destroyGhostEl();
+		const ghostEl = document.createElement("div");
+		const { top, left } = getAbsolutePosition(el, getOffset(el));
+		setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getIdFromEl()(el)}`);
+		ghostEl.style.cssText = `
+      z-index: ${ZIndex.GHOST_EL};
+      opacity: .6;
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      margin: 0;
+      background: blue;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+    `;
+		el.after(ghostEl);
+		return ghostEl;
+	}
+};
+//#endregion
+export { DragResizeHelper as default };

package/dist/es/MoveableActionsAble.js

@@ -0,0 +1,64 @@
+import { AbleActionEventType } from "./const.js";
+import moveable_able_default from "./moveable-able.js";
+//#region packages/stage/src/MoveableActionsAble.ts
+var MoveableActionsAble_default = (handler, customizedButton = []) => ({
+	name: "actions",
+	props: [],
+	always: true,
+	events: [],
+	render(moveable, React) {
+		const rect = moveable.getRect();
+		const { pos2 } = moveable.state;
+		const editableViewer = moveable.useCSS("div", `
+      {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        will-change: transform;
+        transform-origin: 60px 28px;
+        display: flex;
+      }
+      ${moveable_able_default}
+      `);
+		return React.createElement(editableViewer, {
+			className: "moveable-editable",
+			style: { transform: `translate(${pos2[0] - (customizedButton.length + 3) * 20}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)` }
+		}, [
+			...customizedButton.map((buttonRenderer) => {
+				const options = buttonRenderer(React);
+				return React.createElement("button", options.props || {}, ...options.children || []);
+			}),
+			React.createElement("button", {
+				className: "moveable-button moveable-rerender-button",
+				title: "重新收集依赖后渲染",
+				onClick: () => {
+					handler(AbleActionEventType.RERENDER);
+				}
+			}, React.createElement("img", {
+				src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLXJlcGxhY2UiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2ZmZmZmZiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIgLz4KICA8cmVjdCB4PSIxNSIgeT0iMTUiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIxIiAvPgogIDxwYXRoIGQ9Ik0yMSAxMXYtM2EyIDIgMCAwIDAgLTIgLTJoLTZsMyAzbTAgLTZsLTMgMyIgLz4KICA8cGF0aCBkPSJNMyAxM3YzYTIgMiAwIDAgMCAyIDJoNmwtMyAtM20wIDZsMyAtMyIgLz4KPC9zdmc+CgoK",
+				width: "16",
+				height: "16"
+			})),
+			React.createElement("button", {
+				className: "moveable-button",
+				title: "选中父组件",
+				onClick: () => {
+					handler(AbleActionEventType.SELECT_PARENT);
+				}
+			}, React.createElement("div", { className: "moveable-select-parent-arrow-top-icon" }), React.createElement("div", { className: "moveable-select-parent-arrow-body-icon" })),
+			React.createElement("button", {
+				className: "moveable-button moveable-remove-button",
+				title: "删除",
+				onClick: () => {
+					handler(AbleActionEventType.REMOVE);
+				}
+			}),
+			React.createElement("button", {
+				className: "moveable-button moveable-drag-area-button",
+				title: "拖动"
+			}, React.createElement("div", { className: "moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-top" }), React.createElement("div", { className: "moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-bottom" }), React.createElement("div", { className: "moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-left" }), React.createElement("div", { className: " moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-right" }), React.createElement("div", { className: "moveable-select-parent-arrow-body-icon-horizontal" }), React.createElement("div", { className: "moveable-select-parent-arrow-body-icon-vertical" }))
+		]);
+	}
+});
+//#endregion
+export { MoveableActionsAble_default as default };

package/dist/es/MoveableOptionsManager.js

@@ -0,0 +1,204 @@
+import { GuidesType, Mode } from "./const.js";
+import { getOffset } from "./util.js";
+import MoveableActionsAble_default from "./MoveableActionsAble.js";
+import EventEmitter$1 from "events";
+import { merge } from "lodash-es";
+//#region packages/stage/src/MoveableOptionsManager.ts
+/**
+* 单选和多选的父类，用于管理moveableOptions
+* @extends EventEmitter
+*/
+var MoveableOptionsManager = class extends EventEmitter$1 {
+	/** 布局方式：流式布局、绝对定位、固定定位 */
+	mode = Mode.ABSOLUTE;
+	/** 画布容器 */
+	container;
+	options = {};
+	/** 水平参考线 */
+	horizontalGuidelines = [];
+	/** 垂直参考线 */
+	verticalGuidelines = [];
+	/** 对齐元素集合 */
+	elementGuidelines = [];
+	/** 由外部调用方（编辑器）传入进来的moveable默认参数，可以为空，也可以是一个回调函数 */
+	customizedOptions;
+	/** 获取整个画布的根元素（在StageCore的mount函数中挂载的container） */
+	getRootContainer;
+	constructor(config) {
+		super();
+		this.customizedOptions = config.moveableOptions;
+		this.container = config.container;
+		this.getRootContainer = config.getRootContainer;
+	}
+	getOption(key) {
+		return this.options[key];
+	}
+	/**
+	* 设置水平/垂直参考线
+	* @param type 参考线类型
+	* @param guidelines 参考线坐标数组
+	*/
+	setGuidelines(type, guidelines) {
+		if (type === GuidesType.HORIZONTAL) this.horizontalGuidelines = guidelines;
+		else if (type === GuidesType.VERTICAL) this.verticalGuidelines = guidelines;
+		this.emit("update-moveable");
+	}
+	/**
+	* 清除横向和纵向的参考线
+	*/
+	clearGuides() {
+		this.horizontalGuidelines = [];
+		this.verticalGuidelines = [];
+		this.emit("update-moveable");
+	}
+	/**
+	* 设置有哪些元素要辅助对齐
+	* @param selectedElList 选中的元素列表，需要排除在对齐元素之外
+	*/
+	setElementGuidelines(selectedElList) {
+		this.elementGuidelines.forEach((node) => {
+			node.remove();
+		});
+		this.elementGuidelines = [];
+		const elementGuidelines = this.getCustomizeOptions()?.elementGuidelines || Array.from(selectedElList[0]?.parentElement?.children || []);
+		if (this.mode === Mode.ABSOLUTE) this.container.append(this.createGuidelineElements(selectedElList, elementGuidelines));
+	}
+	/**
+	* 获取moveable参数
+	* @param isMultiSelect 是否多选模式
+	* @param runtimeOptions 调用时实时传进来的的moveable参数
+	* @returns moveable所需参数
+	*/
+	getOptions(isMultiSelect, runtimeOptions = {}) {
+		this.options = merge(this.getDefaultOptions(isMultiSelect), this.getCustomizeOptions() || {}, runtimeOptions);
+		return this.options;
+	}
+	/**
+	* 获取单选和多选的moveable公共参数
+	* @returns moveable公共参数
+	*/
+	getDefaultOptions(isMultiSelect) {
+		const isSortable = this.mode === Mode.SORTABLE;
+		return merge({
+			draggable: true,
+			resizable: true,
+			rootContainer: this.getRootContainer(),
+			zoom: 1,
+			throttleDrag: 0,
+			snappable: true,
+			horizontalGuidelines: this.horizontalGuidelines,
+			verticalGuidelines: this.verticalGuidelines,
+			elementGuidelines: this.elementGuidelines,
+			bounds: {
+				top: 0,
+				left: 0,
+				right: this.container.clientWidth,
+				bottom: isSortable ? void 0 : this.container.clientHeight
+			}
+		}, isMultiSelect ? this.getMultiOptions() : this.getSingleOptions());
+	}
+	/**
+	* 获取单选下的差异化参数
+	* @returns {MoveableOptions} moveable options参数
+	*/
+	getSingleOptions() {
+		const isAbsolute = this.mode === Mode.ABSOLUTE;
+		const isFixed = this.mode === Mode.FIXED;
+		return {
+			origin: false,
+			dragArea: false,
+			scalable: false,
+			rotatable: false,
+			snapGap: isAbsolute || isFixed,
+			snapThreshold: 5,
+			snapDigit: 0,
+			isDisplaySnapDigit: isAbsolute,
+			snapDirections: {
+				top: isAbsolute,
+				right: isAbsolute,
+				bottom: isAbsolute,
+				left: isAbsolute,
+				center: isAbsolute,
+				middle: isAbsolute
+			},
+			elementSnapDirections: {
+				top: isAbsolute,
+				right: isAbsolute,
+				bottom: isAbsolute,
+				left: isAbsolute
+			},
+			isDisplayInnerSnapDigit: true,
+			dragTarget: ".moveable-drag-area-button",
+			dragTargetSelf: true,
+			props: { actions: true },
+			ables: [MoveableActionsAble_default(this.actionHandler.bind(this))]
+		};
+	}
+	/**
+	* 获取多选下的差异化参数
+	* @returns {MoveableOptions} moveable options参数
+	*/
+	getMultiOptions() {
+		return {
+			defaultGroupRotate: 0,
+			defaultGroupOrigin: "50% 50%",
+			startDragRotate: 0,
+			throttleDragRotate: 0,
+			origin: true,
+			padding: {
+				left: 0,
+				top: 0,
+				right: 0,
+				bottom: 0
+			}
+		};
+	}
+	/**
+	* 获取业务方自定义的moveable参数
+	*/
+	getCustomizeOptions() {
+		if (typeof this.customizedOptions === "function") return this.customizedOptions();
+		return this.customizedOptions;
+	}
+	/**
+	* 这是给selectParentAbles的回调函数，用于触发选中父元素事件
+	*/
+	actionHandler(type) {
+		this.emit(type);
+	}
+	/**
+	* 为需要辅助对齐的元素创建div
+	* @param selectedElList 选中的元素列表，需要排除在对齐元素之外
+	* @param allElList 全部元素列表
+	* @returns frame 辅助对齐元素集合的页面片
+	*/
+	createGuidelineElements(selectedElList, allElList) {
+		const frame = globalThis.document.createDocumentFragment();
+		for (const element of allElList) {
+			let node = element.element || element;
+			if (!node || typeof node === "string") continue;
+			if (typeof node === "function") node = node();
+			if (this.isInElementList(node, selectedElList)) continue;
+			const { width, height } = node.getBoundingClientRect();
+			if (!width || !height) continue;
+			const { left, top } = getOffset(node);
+			const elementGuideline = globalThis.document.createElement("div");
+			elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
+			this.elementGuidelines.push(elementGuideline);
+			frame.append(elementGuideline);
+		}
+		return frame;
+	}
+	/**
+	* 判断一个元素是否在元素列表里面
+	* @param ele 元素
+	* @param eleList 元素列表
+	* @returns 是否在元素列表里面
+	*/
+	isInElementList(ele, eleList) {
+		for (const eleItem of eleList) if (ele === eleItem) return true;
+		return false;
+	}
+};
+//#endregion
+export { MoveableOptionsManager as default };

package/dist/es/Rule.js

@@ -0,0 +1,139 @@
+import { GuidesType } from "./const.js";
+import EventEmitter$1 from "events";
+import Guides from "@scena/guides";
+//#region packages/stage/src/Rule.ts
+var guidesClass = "tmagic-stage-guides";
+var Rule = class extends EventEmitter$1 {
+	hGuides;
+	vGuides;
+	horizontalGuidelines = [];
+	verticalGuidelines = [];
+	container;
+	containerResizeObserver;
+	isShowGuides = true;
+	guidesOptions;
+	constructor(container, options) {
+		super();
+		if (options?.disabledRule) return;
+		this.guidesOptions = options?.guidesOptions || {};
+		this.container = container;
+		this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
+		this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
+		this.containerResizeObserver = new ResizeObserver(() => {
+			this.vGuides?.resize();
+			this.hGuides?.resize();
+		});
+		this.containerResizeObserver.observe(this.container);
+	}
+	/**
+	* 是否显示辅助线
+	* @param isShowGuides 是否显示
+	*/
+	showGuides(isShowGuides = true) {
+		this.isShowGuides = isShowGuides;
+		this.hGuides?.setState({ showGuides: isShowGuides });
+		this.vGuides?.setState({ showGuides: isShowGuides });
+	}
+	setGuides([hLines, vLines]) {
+		this.horizontalGuidelines = hLines;
+		this.verticalGuidelines = vLines;
+		this.hGuides?.setState({ defaultGuides: hLines });
+		this.vGuides?.setState({ defaultGuides: vLines });
+		this.emit("change-guides", {
+			type: GuidesType.HORIZONTAL,
+			guides: hLines
+		});
+		this.emit("change-guides", {
+			type: GuidesType.VERTICAL,
+			guides: vLines
+		});
+	}
+	/**
+	* 清空所有参考线
+	*/
+	clearGuides() {
+		this.setGuides([[], []]);
+	}
+	/**
+	* 是否显示标尺
+	* @param show 是否显示
+	*/
+	showRule(show = true) {
+		if (show) {
+			this.destroyGuides();
+			this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
+			this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
+		} else {
+			this.hGuides?.setState({ rulerStyle: { visibility: "hidden" } });
+			this.vGuides?.setState({ rulerStyle: { visibility: "hidden" } });
+		}
+	}
+	scrollRule(scrollTop) {
+		this.hGuides?.scrollGuides(scrollTop);
+		this.hGuides?.scroll(0);
+		this.vGuides?.scrollGuides(0);
+		this.vGuides?.scroll(scrollTop);
+	}
+	destroy() {
+		this.destroyGuides();
+		this.hGuides?.off("changeGuides", this.hGuidesChangeGuidesHandler);
+		this.vGuides?.off("changeGuides", this.vGuidesChangeGuidesHandler);
+		this.containerResizeObserver?.disconnect();
+		this.removeAllListeners();
+	}
+	destroyGuides() {
+		this.hGuides?.destroy();
+		this.vGuides?.destroy();
+		this.container?.querySelectorAll(`.${guidesClass}`).forEach((el) => {
+			el.remove();
+		});
+		this.hGuides = void 0;
+		this.vGuides = void 0;
+		this.container = void 0;
+	}
+	getGuidesStyle = (type) => ({
+		position: "fixed",
+		zIndex: 1,
+		left: type === GuidesType.HORIZONTAL ? 0 : "-30px",
+		top: type === GuidesType.HORIZONTAL ? "-30px" : 0,
+		width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
+		height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
+	});
+	createGuides = (type, defaultGuides = []) => {
+		if (!this.container) return;
+		const guides = new Guides(this.container, {
+			type,
+			defaultGuides,
+			displayDragPos: true,
+			className: guidesClass,
+			backgroundColor: "#fff",
+			lineColor: "#000",
+			textColor: "#000",
+			style: this.getGuidesStyle(type),
+			showGuides: this.isShowGuides,
+			...this.guidesOptions
+		});
+		const changEventHandler = {
+			[GuidesType.HORIZONTAL]: this.hGuidesChangeGuidesHandler,
+			[GuidesType.VERTICAL]: this.vGuidesChangeGuidesHandler
+		}[type];
+		if (changEventHandler) guides.on("changeGuides", changEventHandler);
+		return guides;
+	};
+	hGuidesChangeGuidesHandler = (e) => {
+		this.horizontalGuidelines = e.guides;
+		this.emit("change-guides", {
+			type: GuidesType.HORIZONTAL,
+			guides: this.horizontalGuidelines
+		});
+	};
+	vGuidesChangeGuidesHandler = (e) => {
+		this.verticalGuidelines = e.guides;
+		this.emit("change-guides", {
+			type: GuidesType.VERTICAL,
+			guides: this.verticalGuidelines
+		});
+	};
+};
+//#endregion
+export { Rule as default };