@tmagic/stage 1.7.6 → 1.7.8-beta.1

package/dist/es/ActionManager.js

@@ -0,0 +1,470 @@
+import { AbleActionEventType, ContainerHighlightType, MouseButton, SelectStatus, StageDragStatus } from "./const.js";
+import { isMoveableButton } from "./util.js";
+import DragResizeHelper from "./DragResizeHelper.js";
+import StageDragResize from "./StageDragResize.js";
+import StageHighlight from "./StageHighlight.js";
+import StageMultiDragResize from "./StageMultiDragResize.js";
+import EventEmitter$1 from "events";
+import { Env, addClassName, getDocument, getIdFromEl, removeClassNameByClassName } from "@tmagic/core";
+import KeyController from "keycon";
+import { throttle } from "lodash-es";
+//#region packages/stage/src/ActionManager.ts
+var throttleTime = 100;
+var defaultContainerHighlightDuration = 800;
+/**
+* 管理蒙层mask之上的操作：1、监听键盘鼠标事件，判断形成单选、多选、高亮操作；2、管理单选、多选、高亮三个类协同工作。
+* @extends EventEmitter
+*/
+var ActionManager = class extends EventEmitter$1 {
+	dr = null;
+	multiDr = null;
+	highlightLayer = null;
+	/** 单选、多选、高亮的容器（蒙层的content） */
+	container;
+	/** 当前选中的节点 */
+	selectedEl = null;
+	/** 多选选中的节点组 */
+	selectedElList = [];
+	/** 当前高亮的节点 */
+	highlightedEl;
+	/** 当前是否处于多选状态 */
+	isMultiSelectStatus = false;
+	/** 当拖拽组件到容器上方进入可加入容器状态时，给容器添加的一个class名称 */
+	containerHighlightClassName;
+	/** 当拖拽组件到容器上方时，需要悬停多久才能将组件加入容器 */
+	containerHighlightDuration;
+	/** 将组件加入容器的操作方式 */
+	containerHighlightType;
+	isAltKeydown = false;
+	getTargetElement;
+	getElementsFromPoint;
+	canSelect;
+	isContainer;
+	getRenderDocument;
+	disabledMultiSelect = false;
+	config;
+	mouseMoveHandler = throttle((event) => {
+		const handler = async () => {
+			if (event.target?.classList?.contains("moveable-direction")) return;
+			const el = await this.getElementFromPoint(event);
+			const id = getIdFromEl()(el);
+			if (!id) {
+				this.clearHighlight();
+				return;
+			}
+			this.emit("mousemove", event);
+			this.highlight(id);
+		};
+		handler();
+	}, throttleTime);
+	constructor(config) {
+		super();
+		this.config = config;
+		this.container = config.container;
+		this.containerHighlightClassName = config.containerHighlightClassName || "tmagic-stage-container-highlight";
+		this.containerHighlightDuration = config.containerHighlightDuration || defaultContainerHighlightDuration;
+		this.containerHighlightType = config.containerHighlightType;
+		this.disabledMultiSelect = config.disabledMultiSelect ?? false;
+		this.getTargetElement = config.getTargetElement;
+		this.getElementsFromPoint = config.getElementsFromPoint;
+		this.canSelect = config.canSelect || ((el) => Boolean(getIdFromEl()(el)));
+		this.getRenderDocument = config.getRenderDocument;
+		this.isContainer = config.isContainer;
+		this.dr = this.createDr(config);
+		if (!this.disabledMultiSelect) this.multiDr = this.createMultiDr(config);
+		this.highlightLayer = new StageHighlight({
+			container: config.container,
+			updateDragEl: config.updateDragEl,
+			getRootContainer: config.getRootContainer
+		});
+		this.initMouseEvent();
+		this.initKeyEvent();
+	}
+	disableMultiSelect() {
+		this.disabledMultiSelect = true;
+		if (this.multiDr) {
+			this.multiDr.destroy();
+			this.multiDr = null;
+		}
+	}
+	enableMultiSelect() {
+		this.disabledMultiSelect = false;
+		if (!this.multiDr) this.multiDr = this.createMultiDr(this.config);
+	}
+	/**
+	* 设置水平/垂直参考线
+	* @param type 参考线类型
+	* @param guidelines 参考线坐标数组
+	*/
+	setGuidelines(type, guidelines) {
+		this.dr?.setGuidelines(type, guidelines);
+		this.multiDr?.setGuidelines(type, guidelines);
+	}
+	/**
+	* 清空所有参考线
+	*/
+	clearGuides() {
+		this.dr?.clearGuides();
+		this.multiDr?.clearGuides();
+	}
+	/**
+	* 更新moveable，外部主要调用场景是元素配置变更、页面大小变更
+	* @param el 变更的元素
+	*/
+	updateMoveable(el) {
+		this.dr?.updateMoveable(el);
+		this.multiDr?.updateMoveable();
+	}
+	/**
+	* 判断是否单选选中的元素
+	*/
+	isSelectedEl(el) {
+		return getIdFromEl()(el) === getIdFromEl()(this.selectedEl);
+	}
+	setSelectedEl(el) {
+		this.selectedEl = el;
+	}
+	getSelectedEl() {
+		return this.selectedEl;
+	}
+	getSelectedElList() {
+		return this.selectedElList;
+	}
+	getMoveableOption(key) {
+		if (this.dr?.getTarget()) return this.dr.getOption(key);
+		if (this.multiDr?.targetList.length) return this.multiDr.getOption(key);
+	}
+	/**
+	* 获取鼠标下方第一个可选中元素，如果元素层叠，返回到是最上层元素
+	* @param event 鼠标事件
+	* @returns 鼠标下方第一个可选中元素
+	*/
+	async getElementFromPoint(event) {
+		const els = this.getElementsFromPoint(event);
+		this.emit("get-elements-from-point", els);
+		let stopped = false;
+		const stop = () => stopped = true;
+		for (const el of els) if (!getIdFromEl()(el)?.startsWith("ghost_el_") && await this.isElCanSelect(el, event, stop)) {
+			if (stopped) break;
+			return el;
+		}
+		return null;
+	}
+	/**
+	* 判断一个元素能否在当前场景被选中
+	* @param el 被判断的元素
+	* @param event 鼠标事件
+	* @param stop 通过该元素如果得知剩下的元素都不可被选中，通知调用方终止对剩下元素的判断
+	* @returns 能否选中
+	*/
+	async isElCanSelect(el, event, stop) {
+		if (!await this.canSelect(el, event, stop)) return false;
+		if (this.isMultiSelectStatus) return this.canMultiSelect(el, stop);
+		return true;
+	}
+	/**
+	* 判断一个元素是否可以被多选，如果当前元素是page，则调stop函数告诉调用方不必继续判断其它元素了
+	*/
+	canMultiSelect(el, stop) {
+		if (el.className.includes("magic-ui-page")) {
+			stop();
+			return false;
+		}
+		const selectedEl = this.getSelectedEl();
+		if (selectedEl?.className.includes("magic-ui-page")) return true;
+		return this.multiDr?.canSelect(el, selectedEl) || false;
+	}
+	select(el, event) {
+		this.setSelectedEl(el);
+		this.clearSelectStatus(SelectStatus.MULTI_SELECT);
+		this.dr?.select(el, event);
+	}
+	multiSelect(ids) {
+		this.selectedElList = [];
+		ids.forEach((id) => {
+			const el = this.getTargetElement(id);
+			if (el) this.selectedElList.push(el);
+		});
+		this.clearSelectStatus(SelectStatus.SELECT);
+		this.multiDr?.multiSelect(this.selectedElList);
+	}
+	getHighlightEl() {
+		return this.highlightedEl;
+	}
+	setHighlightEl(el) {
+		this.highlightedEl = el;
+	}
+	highlight(id) {
+		let el;
+		try {
+			el = this.getTargetElement(id);
+		} catch (error) {
+			this.clearHighlight();
+			console.warn("getTargetElement error:", error);
+			return;
+		}
+		if (el === this.getSelectedEl() || this.multiDr?.dragStatus === StageDragStatus.ING) {
+			this.clearHighlight();
+			return;
+		}
+		if (el === this.highlightedEl || !el) return;
+		this.highlightLayer?.highlight(el);
+		this.highlightedEl = el;
+		this.emit("highlight", el);
+	}
+	clearHighlight() {
+		this.setHighlightEl(void 0);
+		this.highlightLayer?.clearHighlight();
+	}
+	/**
+	* 用于在切换选择模式时清除上一次的状态
+	* @param selectType 需要清理的选择模式
+	*/
+	clearSelectStatus(selectType) {
+		if (selectType === SelectStatus.MULTI_SELECT) {
+			this.multiDr?.clearSelectStatus();
+			this.selectedElList = [];
+		} else this.dr?.clearSelectStatus();
+	}
+	/**
+	* 找到鼠标下方的容器，通过添加className对容器进行标记
+	* @param event 鼠标事件
+	* @param excludeElList 计算鼠标点所在容器时要排除的元素列表
+	*/
+	async addContainerHighlightClassName(event, excludeElList) {
+		const doc = this.getRenderDocument();
+		if (!doc) return;
+		const els = this.getElementsFromPoint(event);
+		for (const el of els) if (!getIdFromEl()(el)?.startsWith("ghost_el_") && await this.isContainer?.(el) && !excludeElList.includes(el)) {
+			addClassName(el, doc, this.containerHighlightClassName);
+			break;
+		}
+	}
+	/**
+	* 鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
+	* 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
+	* @param event 鼠标事件
+	* @param excludeElList 计算鼠标所在容器时要排除的元素列表
+	* @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
+	*/
+	delayedMarkContainer(event, excludeElList = []) {
+		if (this.canAddToContainer()) return globalThis.setTimeout(() => {
+			this.addContainerHighlightClassName(event, excludeElList);
+		}, this.containerHighlightDuration);
+	}
+	getDragStatus() {
+		return this.dr?.getDragStatus();
+	}
+	updateMoveableOptions() {
+		this.dr?.updateMoveable();
+		this.multiDr?.updateMoveable();
+	}
+	destroy() {
+		this.container.removeEventListener("mousedown", this.mouseDownHandler);
+		this.container.removeEventListener("mousemove", this.mouseMoveHandler);
+		this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
+		this.container.removeEventListener("wheel", this.mouseWheelHandler);
+		this.container.removeEventListener("dblclick", this.dblclickHandler);
+		this.selectedEl = null;
+		this.selectedElList = [];
+		this.dr?.destroy();
+		this.multiDr?.destroy();
+		this.highlightLayer?.destroy();
+		this.dr = null;
+		this.multiDr = null;
+		this.highlightLayer = null;
+	}
+	on(eventName, listener) {
+		return super.on(eventName, listener);
+	}
+	emit(eventName, ...args) {
+		return super.emit(eventName, ...args);
+	}
+	createDr(config) {
+		const createDrHelper = () => new DragResizeHelper({
+			container: config.container,
+			updateDragEl: config.updateDragEl
+		});
+		const dr = new StageDragResize({
+			container: config.container,
+			disabledDragStart: config.disabledDragStart,
+			moveableOptions: config.moveableOptions && this.changeCallback(config.moveableOptions, false),
+			dragResizeHelper: createDrHelper(),
+			getRootContainer: config.getRootContainer,
+			getRenderDocument: config.getRenderDocument,
+			markContainerEnd: this.markContainerEnd.bind(this),
+			delayedMarkContainer: this.delayedMarkContainer.bind(this)
+		});
+		dr.on("update", (data) => {
+			setTimeout(() => this.emit("update", data));
+		}).on("sort", (data) => {
+			setTimeout(() => this.emit("sort", data));
+		}).on(AbleActionEventType.SELECT_PARENT, () => {
+			this.emit("select-parent");
+		}).on(AbleActionEventType.REMOVE, () => {
+			const drTarget = this.dr?.getTarget();
+			if (!drTarget) return;
+			const data = { data: [{ el: drTarget }] };
+			this.emit("remove", data);
+		}).on(AbleActionEventType.RERENDER, () => {
+			this.emit("rerender");
+		}).on("drag-start", (e) => {
+			this.emit("drag-start", e);
+		});
+		return dr;
+	}
+	createMultiDr(config) {
+		const createDrHelper = () => new DragResizeHelper({
+			container: config.container,
+			updateDragEl: config.updateDragEl
+		});
+		const multiDr = new StageMultiDragResize({
+			container: config.container,
+			moveableOptions: config.moveableOptions && this.changeCallback(config.moveableOptions, true),
+			dragResizeHelper: createDrHelper(),
+			getRootContainer: config.getRootContainer,
+			getRenderDocument: config.getRenderDocument,
+			markContainerEnd: this.markContainerEnd.bind(this),
+			delayedMarkContainer: this.delayedMarkContainer.bind(this)
+		});
+		multiDr?.on("update", (data) => {
+			this.emit("multi-update", data);
+		}).on("change-to-select", (id, e) => {
+			if (this.isMultiSelectStatus) return;
+			this.emit("change-to-select", id, e);
+		});
+		return multiDr;
+	}
+	changeCallback(options, isMulti) {
+		if (typeof options === "function") return () => {
+			if (typeof options === "function") return options({
+				targetEl: this.selectedEl,
+				targetElId: getIdFromEl()(this.selectedEl),
+				targetEls: this.selectedElList,
+				targetElIds: this.selectedElList?.map((item) => getIdFromEl()(item) || ""),
+				isMulti,
+				document: this.getRenderDocument()
+			});
+			return options;
+		};
+		return options;
+	}
+	/**
+	* 在执行多选逻辑前，先准备好多选选中元素
+	* @param el 新选中的元素
+	* @returns 多选选中的元素列表
+	*/
+	async beforeMultiSelect(event) {
+		const el = await this.getElementFromPoint(event);
+		if (!el) return;
+		if (this.selectedEl && !this.selectedEl.className.includes("magic-ui-page")) {
+			this.selectedElList.push(this.selectedEl);
+			this.setSelectedEl(null);
+		}
+		const existIndex = this.selectedElList.findIndex((selectedDom) => getIdFromEl()(selectedDom) === getIdFromEl()(el));
+		if (existIndex !== -1) {
+			if (this.selectedElList.length > 1) this.selectedElList.splice(existIndex, 1);
+		} else this.selectedElList.push(el);
+	}
+	/**
+	* 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入
+	*/
+	canAddToContainer() {
+		return this.containerHighlightType === ContainerHighlightType.DEFAULT || this.containerHighlightType === ContainerHighlightType.ALT && this.isAltKeydown;
+	}
+	/**
+	* 结束对container的标记状态
+	* @returns 标记的容器元素，没有标记的容器时返回null
+	*/
+	markContainerEnd() {
+		const doc = this.getRenderDocument();
+		if (doc && this.canAddToContainer()) return removeClassNameByClassName(doc, this.containerHighlightClassName);
+		return null;
+	}
+	initMouseEvent() {
+		this.container.addEventListener("mousedown", this.mouseDownHandler);
+		this.container.addEventListener("mousemove", this.mouseMoveHandler);
+		this.container.addEventListener("mouseleave", this.mouseLeaveHandler);
+		this.container.addEventListener("wheel", this.mouseWheelHandler);
+		this.container.addEventListener("dblclick", this.dblclickHandler);
+	}
+	/**
+	* 初始化键盘事件监听
+	*/
+	initKeyEvent() {
+		const { isMac } = new Env();
+		const ctrl = isMac ? "meta" : "ctrl";
+		KeyController.global.keydown(ctrl, (e) => {
+			e.inputEvent.preventDefault();
+			if (!this.disabledMultiSelect) this.isMultiSelectStatus = true;
+		});
+		KeyController.global.on("blur", () => {
+			if (!this.disabledMultiSelect) this.isMultiSelectStatus = false;
+			this.isAltKeydown = false;
+		});
+		KeyController.global.keyup(ctrl, (e) => {
+			e.inputEvent.preventDefault();
+			if (!this.disabledMultiSelect) this.isMultiSelectStatus = false;
+		});
+		KeyController.global.keydown("alt", (e) => {
+			e.inputEvent.preventDefault();
+			this.isAltKeydown = true;
+		});
+		KeyController.global.keyup("alt", (e) => {
+			e.inputEvent.preventDefault();
+			this.markContainerEnd();
+			this.isAltKeydown = false;
+		});
+	}
+	/**
+	* 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
+	*/
+	mouseDownHandler = (event) => {
+		const handler = async () => {
+			this.clearHighlight();
+			event.stopImmediatePropagation();
+			event.stopPropagation();
+			if (this.isStopTriggerSelect(event)) return;
+			this.container.removeEventListener("mousemove", this.mouseMoveHandler);
+			if (this.isMultiSelectStatus) {
+				await this.beforeMultiSelect(event);
+				if (this.selectedElList.length > 0) this.emit("before-multi-select", this.selectedElList);
+			} else {
+				const el = await this.getElementFromPoint(event);
+				if (!el) return;
+				this.emit("before-select", el, event);
+			}
+			getDocument().addEventListener("mouseup", this.mouseUpHandler);
+		};
+		handler();
+	};
+	isStopTriggerSelect(event) {
+		if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return true;
+		if (!event.target) return true;
+		const targetClassList = event.target.classList;
+		if (!this.isMultiSelectStatus && targetClassList.contains("moveable-area")) return true;
+		if (targetClassList.contains("moveable-control") || isMoveableButton(event.target)) return true;
+		return false;
+	}
+	/**
+	* 在up事件中负责对外通知选中事件，通知画布之外的编辑器更新
+	*/
+	mouseUpHandler = (event) => {
+		getDocument().removeEventListener("mouseup", this.mouseUpHandler);
+		this.container.addEventListener("mousemove", this.mouseMoveHandler);
+		if (this.isMultiSelectStatus) this.emit("multi-select", this.selectedElList, event);
+		else this.emit("select", this.selectedEl, event);
+	};
+	mouseLeaveHandler = (event) => {
+		setTimeout(() => this.clearHighlight(), throttleTime);
+		this.emit("mouseleave", event);
+	};
+	mouseWheelHandler = () => {
+		this.clearHighlight();
+	};
+	dblclickHandler = (event) => {
+		this.emit("dblclick", event);
+	};
+};
+//#endregion
+export { ActionManager as default };