@tmagic/stage 1.7.6 → 1.7.8-beta.1

package/dist/es/StageCore.js

@@ -0,0 +1,307 @@
+import "./const.js";
+import ActionManager from "./ActionManager.js";
+import StageMask from "./StageMask.js";
+import StageRender from "./StageRender.js";
+import { EventEmitter } from "events";
+import { getIdFromEl } from "@tmagic/core";
+//#region packages/stage/src/StageCore.ts
+/**
+* 负责管理画布，管理renderer、mask、actionManager三个核心类，并负责统一对外通信，包括提供接口和抛事件
+*/
+var StageCore = class extends EventEmitter {
+	container;
+	renderer = null;
+	mask = null;
+	actionManager = null;
+	pageResizeObserver = null;
+	autoScrollIntoView;
+	customizedRender;
+	constructor(config) {
+		super();
+		this.autoScrollIntoView = config.autoScrollIntoView;
+		this.customizedRender = config.render;
+		this.renderer = new StageRender({
+			runtimeUrl: config.runtimeUrl,
+			zoom: config.zoom,
+			renderType: config.renderType,
+			customizedRender: async () => {
+				if (this?.customizedRender) return await this.customizedRender(this);
+				return null;
+			}
+		});
+		this.mask = new StageMask({
+			guidesOptions: config.guidesOptions,
+			disabledRule: config.disabledRule
+		});
+		this.actionManager = new ActionManager(this.getActionManagerConfig(config));
+		this.initRenderEvent();
+		this.initActionEvent();
+		this.initMaskEvent();
+	}
+	/**
+	* 单选选中元素
+	* @param id 选中的id
+	*/
+	async select(id, event) {
+		const el = this.renderer?.getTargetElement(id) || null;
+		if (el === this.actionManager?.getSelectedEl()) return;
+		await this.renderer?.select([id]);
+		if (el) this.mask?.setLayout(el);
+		this.actionManager?.select(el, event);
+		if (el && (this.autoScrollIntoView || el.dataset.autoScrollIntoView)) this.mask?.observerIntersection(el);
+	}
+	/**
+	* 多选选中多个元素
+	* @param ids 选中元素的id列表
+	*/
+	async multiSelect(ids) {
+		const els = ids.map((id) => this.renderer?.getTargetElement(id)).filter((el) => Boolean(el));
+		if (els.length === 0) return;
+		const lastEl = els[els.length - 1];
+		const isReduceSelect = els.length < this.actionManager.getSelectedElList().length;
+		await this.renderer?.select(ids);
+		lastEl && this.mask?.setLayout(lastEl);
+		this.actionManager?.multiSelect(ids);
+		if (lastEl && (this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) this.mask?.observerIntersection(lastEl);
+	}
+	/**
+	* 高亮选中元素
+	* @param el 要高亮的元素
+	*/
+	highlight(id) {
+		this.actionManager?.highlight(id);
+	}
+	clearHighlight() {
+		this.actionManager?.clearHighlight();
+	}
+	/**
+	* 更新组件
+	* @param data 更新组件的数据
+	*/
+	async update(data) {
+		const { config } = data;
+		await this.renderer?.update(data);
+		setTimeout(() => {
+			const el = this.renderer?.getTargetElement(`${config.id}`);
+			if (el && this.actionManager?.isSelectedEl(el)) {
+				this.mask?.setLayout(el);
+				this.actionManager.setSelectedEl(el);
+				this.actionManager.updateMoveable(el);
+			}
+		});
+	}
+	/**
+	* 往画布增加一个组件
+	* @param data 组件信息数据
+	*/
+	async add(data) {
+		return await this.renderer?.add(data);
+	}
+	/**
+	* 从画布删除一个组件
+	* @param data 组件信息数据
+	*/
+	async remove(data) {
+		return await this.renderer?.remove(data);
+	}
+	setZoom(zoom = 1) {
+		this.renderer?.setZoom(zoom);
+	}
+	/**
+	* 挂载Dom节点
+	* @param el 将stage挂载到该Dom节点上
+	*/
+	async mount(el) {
+		this.container = el;
+		const { mask, renderer } = this;
+		await renderer?.mount(el);
+		mask?.mount(el);
+		this.emit("mounted");
+	}
+	/**
+	* 清空所有参考线
+	*/
+	clearGuides() {
+		this.mask?.clearGuides();
+		this.actionManager?.clearGuides();
+	}
+	/**
+	* @deprecated 废弃接口，建议用delayedMarkContainer代替
+	*/
+	getAddContainerHighlightClassNameTimeout(event, excludeElList = []) {
+		return this.delayedMarkContainer(event, excludeElList);
+	}
+	/**
+	* 鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
+	* 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
+	* @param event 鼠标事件
+	* @param excludeElList 计算鼠标所在容器时要排除的元素列表
+	* @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
+	*/
+	delayedMarkContainer(event, excludeElList = []) {
+		return this.actionManager?.delayedMarkContainer(event, excludeElList);
+	}
+	getMoveableOption(key) {
+		return this.actionManager?.getMoveableOption(key);
+	}
+	getDragStatus() {
+		return this.actionManager?.getDragStatus();
+	}
+	disableMultiSelect() {
+		this.actionManager?.disableMultiSelect();
+	}
+	enableMultiSelect() {
+		this.actionManager?.enableMultiSelect();
+	}
+	reloadIframe(url) {
+		this.renderer?.reloadIframe(url);
+	}
+	/**
+	* 销毁实例
+	*/
+	destroy() {
+		const { mask, renderer, actionManager, pageResizeObserver } = this;
+		renderer?.destroy();
+		mask?.destroy();
+		actionManager?.destroy();
+		pageResizeObserver?.disconnect();
+		this.removeAllListeners();
+		this.container = void 0;
+		this.renderer = null;
+		this.mask = null;
+		this.actionManager = null;
+		this.pageResizeObserver = null;
+	}
+	on(eventName, listener) {
+		return super.on(eventName, listener);
+	}
+	emit(eventName, ...args) {
+		return super.emit(eventName, ...args);
+	}
+	/**
+	* 监听页面大小变化
+	*/
+	observePageResize(page) {
+		if (this.pageResizeObserver) this.pageResizeObserver.disconnect();
+		if (typeof ResizeObserver !== "undefined") {
+			this.pageResizeObserver = new ResizeObserver((entries) => {
+				this.mask?.pageResize(entries);
+				this.actionManager?.updateMoveable();
+			});
+			this.pageResizeObserver.observe(page);
+		}
+	}
+	getActionManagerConfig(config) {
+		return {
+			containerHighlightClassName: config.containerHighlightClassName,
+			containerHighlightDuration: config.containerHighlightDuration,
+			containerHighlightType: config.containerHighlightType,
+			moveableOptions: config.moveableOptions,
+			container: this.mask.content,
+			disabledDragStart: config.disabledDragStart,
+			disabledMultiSelect: config.disabledMultiSelect,
+			canSelect: config.canSelect,
+			isContainer: config.isContainer,
+			updateDragEl: config.updateDragEl,
+			getRootContainer: () => this.container,
+			getRenderDocument: () => this.renderer.getDocument(),
+			getTargetElement: (id) => this.renderer.getTargetElement(id),
+			getElementsFromPoint: (point) => this.renderer.getElementsFromPoint(point)
+		};
+	}
+	initRenderEvent() {
+		this.renderer?.on("runtime-ready", (runtime) => {
+			this.emit("runtime-ready", runtime);
+		});
+		this.renderer?.on("page-el-update", (el) => {
+			this.mask?.observe(el);
+			this.observePageResize(el);
+			this.emit("page-el-update", el);
+		});
+	}
+	initMaskEvent() {
+		this.mask?.on("change-guides", (data) => {
+			this.actionManager?.setGuidelines(data.type, data.guides);
+			this.emit("change-guides", data);
+		});
+	}
+	/**
+	* 初始化操作相关事件监听
+	*/
+	initActionEvent() {
+		this.initActionManagerEvent();
+		this.initDrEvent();
+		this.initMulDrEvent();
+		this.initHighlightEvent();
+		this.initMouseEvent();
+	}
+	/**
+	* 初始化ActionManager类本身抛出来的事件监听
+	*/
+	initActionManagerEvent() {
+		this.actionManager?.on("before-select", (el, event) => {
+			const id = getIdFromEl()(el);
+			id && this.select(id, event);
+		}).on("select", (selectedEl, event) => {
+			this.emit("select", selectedEl, event);
+		}).on("before-multi-select", (els) => {
+			this.multiSelect(els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)));
+		}).on("multi-select", (selectedElList, event) => {
+			this.emit("multi-select", selectedElList, event);
+		}).on("dblclick", (event) => {
+			this.emit("dblclick", event);
+		});
+	}
+	/**
+	* 初始化DragResize类通过ActionManager抛出来的事件监听
+	*/
+	initDrEvent() {
+		this.actionManager?.on("update", (data) => {
+			this.emit("update", data);
+		}).on("sort", (data) => {
+			this.emit("sort", data);
+		}).on("select-parent", () => {
+			this.emit("select-parent");
+		}).on("rerender", () => {
+			this.emit("rerender");
+		}).on("remove", (data) => {
+			this.emit("remove", data);
+		});
+	}
+	/**
+	* 初始化MultiDragResize类通过ActionManager抛出来的事件监听
+	*/
+	initMulDrEvent() {
+		this.actionManager?.on("change-to-select", (id, e) => {
+			this.select(id);
+			setTimeout(() => {
+				const el = this.renderer?.getTargetElement(id);
+				el && this.emit("select", el, e);
+			});
+		}).on("multi-update", (data) => {
+			this.emit("update", data);
+		});
+	}
+	/**
+	* 初始化Highlight类通过ActionManager抛出来的事件监听
+	*/
+	initHighlightEvent() {
+		this.actionManager?.on("highlight", (highlightEl) => {
+			this.emit("highlight", highlightEl);
+		});
+	}
+	/**
+	* 初始化Highlight类通过ActionManager抛出来的事件监听
+	*/
+	initMouseEvent() {
+		this.actionManager?.on("mousemove", (event) => {
+			this.emit("mousemove", event);
+		}).on("mouseleave", (event) => {
+			this.emit("mouseleave", event);
+		}).on("drag-start", (e) => {
+			this.emit("drag-start", e);
+		});
+	}
+};
+//#endregion
+export { StageCore as default };

package/dist/es/StageDragResize.js

@@ -0,0 +1,233 @@
+import { Mode, StageDragStatus } from "./const.js";
+import { down, getMode, up } from "./util.js";
+import MoveableOptionsManager from "./MoveableOptionsManager.js";
+import { getIdFromEl } from "@tmagic/core";
+import Moveable from "moveable";
+//#region packages/stage/src/StageDragResize.ts
+/**
+* 管理单选操作，响应选中操作，初始化moveableOption参数并初始化moveable，处理moveable回调事件对组件进行更新
+* @extends MoveableOptionsManager
+*/
+var StageDragResize = class extends MoveableOptionsManager {
+	/** 目标节点 */
+	target = null;
+	/** Moveable拖拽类实例 */
+	moveable;
+	/** 拖动状态 */
+	dragStatus = StageDragStatus.END;
+	dragResizeHelper;
+	disabledDragStart;
+	getRenderDocument;
+	markContainerEnd;
+	delayedMarkContainer;
+	constructor(config) {
+		super(config);
+		this.getRenderDocument = config.getRenderDocument;
+		this.markContainerEnd = config.markContainerEnd;
+		this.delayedMarkContainer = config.delayedMarkContainer;
+		this.disabledDragStart = config.disabledDragStart;
+		this.dragResizeHelper = config.dragResizeHelper;
+		this.on("update-moveable", () => {
+			if (this.moveable) this.updateMoveable();
+		});
+	}
+	getTarget() {
+		return this.target;
+	}
+	/**
+	* 将选中框渲染并覆盖到选中的组件Dom节点上方
+	* 当选中的节点不是absolute时，会创建一个新的节点出来作为拖拽目标
+	* @param el 选中组件的Dom节点元素
+	* @param event 鼠标事件
+	*/
+	select(el, event) {
+		if (!el) {
+			this.moveable?.destroy();
+			this.moveable = void 0;
+			return;
+		}
+		if (!this.moveable || el !== this.target) this.initMoveable(el);
+		else this.updateMoveable(el);
+		if (event && !this.disabledDragStart) this.moveable?.dragStart(event);
+	}
+	/**
+	* 初始化选中框并渲染出来
+	*/
+	updateMoveable(el = this.target) {
+		if (!this.moveable) return;
+		if (!el) throw new Error("未选中任何节点");
+		const options = this.init(el);
+		Object.entries(options).forEach(([key, value]) => {
+			this.moveable[key] = value;
+		});
+		this.moveable.updateRect();
+	}
+	clearSelectStatus() {
+		if (!this.moveable) return;
+		this.dragResizeHelper.destroyShadowEl();
+		this.moveable.target = null;
+		this.moveable.updateRect();
+	}
+	getDragStatus() {
+		return this.dragStatus;
+	}
+	/**
+	* 销毁实例
+	*/
+	destroy() {
+		this.target = null;
+		this.moveable?.destroy();
+		this.dragResizeHelper.destroy();
+		this.dragStatus = StageDragStatus.END;
+		this.removeAllListeners();
+	}
+	on(eventName, listener) {
+		return super.on(eventName, listener);
+	}
+	emit(eventName, ...args) {
+		return super.emit(eventName, ...args);
+	}
+	init(el) {
+		if (/(auto|scroll)/.test(el.style.overflow)) el.style.overflow = "hidden";
+		this.target = el;
+		this.mode = getMode(el);
+		this.dragResizeHelper.updateShadowEl(el);
+		this.dragResizeHelper.setMode(this.mode);
+		this.setElementGuidelines([this.target]);
+		return this.getOptions(false, { target: this.dragResizeHelper.getShadowEl() });
+	}
+	initMoveable(el) {
+		const options = this.init(el);
+		this.dragResizeHelper.clear();
+		this.moveable?.destroy();
+		this.moveable = new Moveable(this.container, { ...options });
+		this.bindResizeEvent();
+		this.bindDragEvent();
+		this.bindRotateEvent();
+		this.bindScaleEvent();
+	}
+	bindResizeEvent() {
+		if (!this.moveable) throw new Error("moveable 未初始化");
+		this.moveable.on("resizeStart", (e) => {
+			if (!this.target) return;
+			this.dragStatus = StageDragStatus.START;
+			this.dragResizeHelper.onResizeStart(e);
+		}).on("resize", (e) => {
+			if (!this.moveable || !this.target || !this.dragResizeHelper.getShadowEl()) return;
+			this.dragStatus = StageDragStatus.ING;
+			this.dragResizeHelper.onResize(e);
+		}).on("resizeEnd", () => {
+			this.dragStatus = StageDragStatus.END;
+			this.update(true);
+		});
+	}
+	bindDragEvent() {
+		if (!this.moveable) throw new Error("moveable 未初始化");
+		let timeout;
+		this.moveable.on("dragStart", (e) => {
+			if (!this.target) throw new Error("未选中组件");
+			this.dragStatus = StageDragStatus.START;
+			this.dragResizeHelper.onDragStart(e);
+			this.emit("drag-start", e);
+		}).on("drag", (e) => {
+			if (!this.target || !this.dragResizeHelper.getShadowEl()) return;
+			if (timeout) {
+				globalThis.clearTimeout(timeout);
+				timeout = void 0;
+			}
+			timeout = this.delayedMarkContainer(e.inputEvent, [this.target]);
+			this.dragStatus = StageDragStatus.ING;
+			this.dragResizeHelper.onDrag(e);
+		}).on("dragEnd", () => {
+			if (timeout) {
+				globalThis.clearTimeout(timeout);
+				timeout = void 0;
+			}
+			const parentEl = this.markContainerEnd();
+			if (this.dragStatus === StageDragStatus.ING) if (parentEl) this.update(false, parentEl);
+			else switch (this.mode) {
+				case Mode.SORTABLE:
+					this.sort();
+					break;
+				default: this.update();
+			}
+			this.dragStatus = StageDragStatus.END;
+			this.dragResizeHelper.destroyGhostEl();
+		});
+	}
+	bindRotateEvent() {
+		if (!this.moveable) throw new Error("moveable 未初始化");
+		this.moveable.on("rotateStart", (e) => {
+			this.dragStatus = StageDragStatus.START;
+			this.dragResizeHelper.onRotateStart(e);
+		}).on("rotate", (e) => {
+			if (!this.target || !this.dragResizeHelper.getShadowEl()) return;
+			this.dragStatus = StageDragStatus.ING;
+			this.dragResizeHelper.onRotate(e);
+		}).on("rotateEnd", (e) => {
+			this.dragStatus = StageDragStatus.END;
+			const frame = this.dragResizeHelper?.getFrame(e.target);
+			if (this.target && frame) this.emit("update", {
+				data: [{
+					el: this.target,
+					style: { transform: frame.get("transform") }
+				}],
+				parentEl: null
+			});
+		});
+	}
+	bindScaleEvent() {
+		if (!this.moveable) throw new Error("moveable 未初始化");
+		this.moveable.on("scaleStart", (e) => {
+			this.dragStatus = StageDragStatus.START;
+			this.dragResizeHelper.onScaleStart(e);
+		}).on("scale", (e) => {
+			if (!this.target || !this.dragResizeHelper.getShadowEl()) return;
+			this.dragStatus = StageDragStatus.ING;
+			this.dragResizeHelper.onScale(e);
+		}).on("scaleEnd", (e) => {
+			this.dragStatus = StageDragStatus.END;
+			const frame = this.dragResizeHelper.getFrame(e.target);
+			if (this.target && frame) this.emit("update", {
+				data: [{
+					el: this.target,
+					style: { transform: frame.get("transform") }
+				}],
+				parentEl: null
+			});
+		});
+	}
+	sort() {
+		if (!this.target || !this.dragResizeHelper.getGhostEl()) throw new Error("未知错误");
+		const { top } = this.dragResizeHelper.getGhostEl().getBoundingClientRect();
+		const { top: oriTop } = this.target.getBoundingClientRect();
+		const deltaTop = top - oriTop;
+		if (Math.abs(deltaTop) >= this.target.clientHeight / 2) if (deltaTop > 0) this.emit("sort", down(deltaTop, this.target));
+		else this.emit("sort", up(deltaTop, this.target));
+		else {
+			const id = getIdFromEl()(this.target);
+			id && this.emit("sort", {
+				src: id,
+				dist: id
+			});
+		}
+	}
+	update(isResize = false, parentEl = null) {
+		if (!this.target) return;
+		const doc = this.getRenderDocument();
+		if (!doc) return;
+		const rect = this.dragResizeHelper.getUpdatedElRect(this.target, parentEl, doc);
+		this.emit("update", {
+			data: [{
+				el: this.target,
+				style: isResize ? rect : {
+					left: rect.left,
+					top: rect.top
+				}
+			}],
+			parentEl
+		});
+	}
+};
+//#endregion
+export { StageDragResize as default };

package/dist/es/StageHighlight.js

@@ -0,0 +1,62 @@
+import { HIGHLIGHT_EL_ID_PREFIX, ZIndex } from "./const.js";
+import TargetShadow from "./TargetShadow.js";
+import { EventEmitter } from "events";
+import Moveable from "moveable";
+//#region packages/stage/src/StageHighlight.ts
+var StageHighlight = class extends EventEmitter {
+	container;
+	target;
+	moveable;
+	targetShadow;
+	getRootContainer;
+	constructor(config) {
+		super();
+		this.container = config.container;
+		this.getRootContainer = config.getRootContainer;
+		this.targetShadow = new TargetShadow({
+			container: config.container,
+			updateDragEl: config.updateDragEl,
+			zIndex: ZIndex.HIGHLIGHT_EL,
+			idPrefix: HIGHLIGHT_EL_ID_PREFIX
+		});
+	}
+	/**
+	* 高亮鼠标悬停的组件
+	* @param el 选中组件的Dom节点元素
+	*/
+	highlight(el) {
+		if (!el || el === this.target) return;
+		this.target = el;
+		this.targetShadow?.update(el);
+		if (this.moveable) {
+			this.moveable.zoom = 2;
+			this.moveable.updateRect();
+		} else this.moveable = new Moveable(this.container, {
+			target: this.targetShadow?.el,
+			origin: false,
+			rootContainer: this.getRootContainer(),
+			zoom: 2
+		});
+	}
+	/**
+	* 清空高亮
+	*/
+	clearHighlight() {
+		if (!this.moveable || !this.target) return;
+		this.moveable.zoom = 0;
+		this.moveable.updateRect();
+		this.target = void 0;
+	}
+	/**
+	* 销毁实例
+	*/
+	destroy() {
+		this.target = void 0;
+		this.moveable?.destroy();
+		this.targetShadow?.destroy();
+		this.moveable = void 0;
+		this.targetShadow = void 0;
+	}
+};
+//#endregion
+export { StageHighlight as default };