@tmagic/stage 1.7.6 → 1.7.8-beta.1

package/dist/es/StageMask.js

@@ -0,0 +1,256 @@
+import { Mode, ZIndex } from "./const.js";
+import { getScrollParent, isFixedParent } from "./util.js";
+import Rule from "./Rule.js";
+import { createDiv, getDocument, injectStyle } from "@tmagic/core";
+//#region packages/stage/src/StageMask.ts
+var wrapperClassName = "editor-mask-wrapper";
+var hideScrollbar = () => {
+	injectStyle(getDocument(), `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
+};
+var createContent = () => createDiv({
+	className: "editor-mask",
+	cssText: `
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate3d(0, 0, 0);
+  `
+});
+var createWrapper = () => {
+	const el = createDiv({
+		className: wrapperClassName,
+		cssText: `
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+      z-index: ${ZIndex.MASK};
+    `
+	});
+	hideScrollbar();
+	return el;
+};
+/**
+* 蒙层
+* @description 用于拦截页面的点击动作，避免点击时触发组件自身动作；在编辑器中点击组件应当是选中组件；
+*/
+var StageMask = class extends Rule {
+	content = createContent();
+	wrapper;
+	page = null;
+	scrollTop = 0;
+	scrollLeft = 0;
+	width = 0;
+	height = 0;
+	wrapperHeight = 0;
+	wrapperWidth = 0;
+	maxScrollTop = 0;
+	maxScrollLeft = 0;
+	mode = Mode.ABSOLUTE;
+	pageScrollParent = null;
+	intersectionObserver = null;
+	wrapperResizeObserver = null;
+	constructor(options) {
+		const wrapper = createWrapper();
+		super(wrapper, options);
+		this.wrapper = wrapper;
+		this.content.addEventListener("wheel", this.mouseWheelHandler);
+		this.wrapper.appendChild(this.content);
+	}
+	setMode(mode) {
+		this.mode = mode;
+		this.scroll();
+		this.content.dataset.mode = mode;
+		if (mode === Mode.FIXED) {
+			this.content.style.width = `${this.wrapperWidth}px`;
+			this.content.style.height = `${this.wrapperHeight}px`;
+		} else {
+			this.content.style.width = `${this.width}px`;
+			this.content.style.height = `${this.height}px`;
+		}
+	}
+	/**
+	* 初始化视窗和蒙层监听，监听元素是否在视窗区域、监听mask蒙层所在的wrapper大小变化
+	* @description 初始化视窗和蒙层监听
+	* @param page 页面Dom节点
+	*/
+	observe(page) {
+		if (!page) return;
+		this.page = page;
+		this.initObserverIntersection();
+		this.initObserverWrapper();
+	}
+	/**
+	* 处理页面大小变更，同步页面和mask大小
+	* @param entries ResizeObserverEntry，获取页面最新大小
+	*/
+	pageResize(entries) {
+		const [entry] = entries;
+		const { clientHeight, clientWidth } = entry.target;
+		this.setHeight(clientHeight);
+		this.setWidth(clientWidth);
+		this.scroll();
+	}
+	/**
+	* 监听一个组件是否在画布可视区域内
+	* @param el 被选中的组件，可能是左侧目录树中选中的
+	*/
+	observerIntersection(el) {
+		this.intersectionObserver?.observe(el);
+	}
+	/**
+	* 挂载Dom节点
+	* @param el 将蒙层挂载到该Dom节点上
+	*/
+	mount(el) {
+		if (!this.content) throw new Error("content 不存在");
+		el.appendChild(this.wrapper);
+	}
+	setLayout(el) {
+		this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
+	}
+	scrollIntoView(el) {
+		if (!this.page || el.getBoundingClientRect().left >= this.page.scrollWidth) return;
+		const scrollParent = getScrollParent(el);
+		if (scrollParent && scrollParent !== this.pageScrollParent) {
+			this.scrollIntoView(scrollParent);
+			return;
+		}
+		el.scrollIntoView();
+		if (!this.pageScrollParent) return;
+		this.scrollLeft = this.pageScrollParent.scrollLeft;
+		this.scrollTop = this.pageScrollParent.scrollTop;
+		this.scroll();
+	}
+	/**
+	* 销毁实例
+	*/
+	destroy() {
+		super.destroy();
+		this.content?.remove();
+		this.page = null;
+		this.pageScrollParent = null;
+		this.wrapperResizeObserver?.disconnect();
+	}
+	on(eventName, listener) {
+		return super.on(eventName, listener);
+	}
+	emit(eventName, ...args) {
+		return super.emit(eventName, ...args);
+	}
+	/**
+	* 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
+	*/
+	initObserverIntersection() {
+		this.pageScrollParent = getScrollParent(this.page) || null;
+		this.intersectionObserver?.disconnect();
+		if (typeof IntersectionObserver !== "undefined") this.intersectionObserver = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				const { target, intersectionRatio } = entry;
+				if (intersectionRatio <= 0) this.scrollIntoView(target);
+				this.intersectionObserver?.unobserve(target);
+			});
+		}, {
+			root: this.pageScrollParent,
+			rootMargin: "0px",
+			threshold: 1
+		});
+	}
+	/**
+	* 监听mask的容器大小变化
+	*/
+	initObserverWrapper() {
+		this.wrapperResizeObserver?.disconnect();
+		if (typeof ResizeObserver !== "undefined") {
+			this.wrapperResizeObserver = new ResizeObserver((entries) => {
+				const [entry] = entries;
+				const { clientHeight, clientWidth } = entry.target;
+				this.wrapperHeight = clientHeight;
+				this.wrapperWidth = clientWidth;
+				if (this.mode === Mode.FIXED) {
+					this.content.style.width = `${this.wrapperWidth}px`;
+					this.content.style.height = `${this.wrapperHeight}px`;
+				}
+				this.setMaxScrollLeft();
+				this.setMaxScrollTop();
+			});
+			this.wrapperResizeObserver.observe(this.wrapper);
+		}
+	}
+	scroll() {
+		this.fixScrollValue();
+		let { scrollLeft, scrollTop } = this;
+		if (this.pageScrollParent) this.pageScrollParent.scrollTo({
+			top: scrollTop,
+			left: scrollLeft
+		});
+		if (this.mode === Mode.FIXED) {
+			scrollLeft = 0;
+			scrollTop = 0;
+		}
+		this.scrollRule(scrollTop);
+		this.scrollTo(scrollLeft, scrollTop);
+	}
+	scrollTo(scrollLeft, scrollTop) {
+		this.content.style.transform = `translate3d(${-scrollLeft}px, ${-scrollTop}px, 0)`;
+		const event = new CustomEvent("customScroll", { detail: {
+			scrollLeft: this.scrollLeft,
+			scrollTop: this.scrollTop
+		} });
+		this.content.dispatchEvent(event);
+	}
+	/**
+	* 设置蒙层高度
+	* @param height 高度
+	*/
+	setHeight(height) {
+		this.height = height;
+		this.setMaxScrollTop();
+		if (this.mode !== Mode.FIXED) this.content.style.height = `${height}px`;
+	}
+	/**
+	* 设置蒙层宽度
+	* @param width 宽度
+	*/
+	setWidth(width) {
+		this.width = width;
+		this.setMaxScrollLeft();
+		if (this.mode !== Mode.FIXED) this.content.style.width = `${width}px`;
+	}
+	/**
+	* 计算并设置最大滚动宽度
+	*/
+	setMaxScrollLeft() {
+		this.maxScrollLeft = Math.max(this.width - this.wrapperWidth, 0);
+	}
+	/**
+	* 计算并设置最大滚动高度
+	*/
+	setMaxScrollTop() {
+		this.maxScrollTop = Math.max(this.height - this.wrapperHeight, 0);
+	}
+	/**
+	* 修复滚动距离
+	* 由于滚动容器变化等因素，会导致当前滚动的距离不正确
+	*/
+	fixScrollValue() {
+		if (this.scrollTop < 0) this.scrollTop = 0;
+		if (this.scrollLeft < 0) this.scrollLeft = 0;
+		if (this.maxScrollTop < this.scrollTop) this.scrollTop = this.maxScrollTop;
+		if (this.maxScrollLeft < this.scrollLeft) this.scrollLeft = this.maxScrollLeft;
+	}
+	mouseWheelHandler = (event) => {
+		if (!this.page) throw new Error("page 未初始化");
+		const { deltaY, deltaX } = event;
+		if (this.page.clientHeight < this.wrapperHeight && deltaY) return;
+		if (this.page.clientWidth < this.wrapperWidth && deltaX) return;
+		if (this.maxScrollTop > 0) this.scrollTop = this.scrollTop + deltaY;
+		if (this.maxScrollLeft > 0) this.scrollLeft = this.scrollLeft + deltaX;
+		this.scroll();
+		this.emit("scroll", event);
+	};
+};
+//#endregion
+export { StageMask as default };

package/dist/es/StageMultiDragResize.js

@@ -0,0 +1,153 @@
+import { DRAG_EL_ID_PREFIX, Mode, StageDragStatus } from "./const.js";
+import { getMode } from "./util.js";
+import MoveableOptionsManager from "./MoveableOptionsManager.js";
+import { getIdFromEl } from "@tmagic/core";
+import Moveable from "moveable";
+//#region packages/stage/src/StageMultiDragResize.ts
+var StageMultiDragResize = class extends MoveableOptionsManager {
+	/** 画布容器 */
+	container;
+	/** 多选:目标节点组 */
+	targetList = [];
+	/** Moveable多选拖拽类实例 */
+	moveableForMulti;
+	dragStatus = StageDragStatus.END;
+	dragResizeHelper;
+	getRenderDocument;
+	delayedMarkContainer;
+	markContainerEnd;
+	constructor(config) {
+		const moveableOptionsManagerConfig = {
+			container: config.container,
+			moveableOptions: config.moveableOptions,
+			getRootContainer: config.getRootContainer
+		};
+		super(moveableOptionsManagerConfig);
+		this.delayedMarkContainer = config.delayedMarkContainer;
+		this.markContainerEnd = config.markContainerEnd;
+		this.container = config.container;
+		this.getRenderDocument = config.getRenderDocument;
+		this.dragResizeHelper = config.dragResizeHelper;
+		this.on("update-moveable", () => {
+			if (this.moveableForMulti) this.updateMoveable();
+		});
+	}
+	/**
+	* 多选
+	* @param els
+	*/
+	multiSelect(els) {
+		if (els.length === 0) return;
+		this.mode = getMode(els[0]);
+		this.targetList = els;
+		this.dragResizeHelper.updateGroup(els);
+		this.setElementGuidelines(this.targetList);
+		this.moveableForMulti?.destroy();
+		this.dragResizeHelper.clear();
+		this.moveableForMulti = new Moveable(this.container, this.getOptions(true, { target: this.dragResizeHelper.getShadowEls() }));
+		let timeout;
+		this.moveableForMulti.on("resizeGroupStart", (e) => {
+			this.dragResizeHelper.onResizeGroupStart(e);
+			this.dragStatus = StageDragStatus.START;
+		}).on("resizeGroup", (e) => {
+			this.dragResizeHelper.onResizeGroup(e);
+			this.dragStatus = StageDragStatus.ING;
+		}).on("resizeGroupEnd", () => {
+			this.update(true);
+			this.dragStatus = StageDragStatus.END;
+		}).on("dragGroupStart", (e) => {
+			this.dragResizeHelper.onDragGroupStart(e);
+			this.dragStatus = StageDragStatus.START;
+		}).on("dragGroup", (e) => {
+			if (timeout) {
+				globalThis.clearTimeout(timeout);
+				timeout = void 0;
+			}
+			timeout = this.delayedMarkContainer(e.inputEvent, this.targetList);
+			this.dragResizeHelper.onDragGroup(e);
+			this.dragStatus = StageDragStatus.ING;
+		}).on("dragGroupEnd", () => {
+			if (timeout) {
+				globalThis.clearTimeout(timeout);
+				timeout = void 0;
+			}
+			const parentEl = this.markContainerEnd();
+			this.update(false, parentEl);
+			this.dragStatus = StageDragStatus.END;
+		}).on("clickGroup", (e) => {
+			const { inputTarget, targets } = e;
+			if (targets.length > 1 && targets.includes(inputTarget)) {
+				const id = getIdFromEl()(inputTarget)?.replace(DRAG_EL_ID_PREFIX, "");
+				id && this.emit("change-to-select", id, e.inputEvent);
+			}
+		});
+	}
+	canSelect(el, selectedEl) {
+		const currentTargetMode = getMode(el);
+		let selectedElMode = "";
+		if (currentTargetMode === Mode.SORTABLE) return false;
+		if (this.targetList.length === 0 && selectedEl) selectedElMode = getMode(selectedEl);
+		else if (this.targetList.length > 0) selectedElMode = getMode(this.targetList[0]);
+		if (currentTargetMode !== selectedElMode) return false;
+		return true;
+	}
+	updateMoveable(eleList = this.targetList) {
+		if (!this.moveableForMulti) return;
+		if (!eleList) throw new Error("未选中任何节点");
+		this.targetList = eleList;
+		this.dragResizeHelper.setTargetList(eleList);
+		const options = this.getOptions(true, { target: this.dragResizeHelper.getShadowEls() });
+		Object.entries(options).forEach(([key, value]) => {
+			this.moveableForMulti[key] = value;
+		});
+		this.moveableForMulti.updateRect();
+	}
+	/**
+	* 清除多选状态
+	*/
+	clearSelectStatus() {
+		if (!this.moveableForMulti) return;
+		this.dragResizeHelper.clearMultiSelectStatus();
+		this.moveableForMulti.target = null;
+		this.moveableForMulti.updateTarget();
+		this.targetList = [];
+	}
+	/**
+	* 销毁实例
+	*/
+	destroy() {
+		this.moveableForMulti?.destroy();
+		this.dragResizeHelper.destroy();
+	}
+	on(eventName, listener) {
+		return super.on(eventName, listener);
+	}
+	emit(eventName, ...args) {
+		return super.emit(eventName, ...args);
+	}
+	/**
+	* 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
+	* @param isResize 是否进行大小缩放
+	*/
+	update(isResize = false, parentEl = null) {
+		if (this.targetList.length === 0) return;
+		const doc = this.getRenderDocument();
+		if (!doc) return;
+		const data = this.targetList.map((targetItem) => {
+			const rect = this.dragResizeHelper.getUpdatedElRect(targetItem, parentEl, doc);
+			return {
+				el: targetItem,
+				style: isResize ? rect : {
+					left: rect.left,
+					top: rect.top
+				}
+			};
+		});
+		this.emit("update", {
+			data,
+			parentEl
+		});
+	}
+};
+//#endregion
+export { StageMultiDragResize as default };

package/dist/es/StageRender.js

@@ -0,0 +1,186 @@
+import { RenderType } from "./const.js";
+import { addSelectedClassName, removeSelectedClassName } from "./util.js";
+import style_default from "./style.js";
+import { EventEmitter } from "events";
+import { getElById, getHost, guid, injectStyle, isSameDomain } from "@tmagic/core";
+//#region packages/stage/src/StageRender.ts
+var StageRender = class extends EventEmitter {
+	/** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
+	contentWindow = null;
+	runtime = null;
+	iframe;
+	nativeContainer;
+	runtimeUrl;
+	zoom = 1;
+	renderType;
+	customizedRender;
+	constructor({ runtimeUrl, zoom, customizedRender, renderType = RenderType.IFRAME }) {
+		super();
+		this.renderType = renderType;
+		this.runtimeUrl = runtimeUrl || "";
+		this.customizedRender = customizedRender;
+		this.setZoom(zoom);
+		if (this.renderType === RenderType.IFRAME) this.createIframe();
+		else if (this.renderType === RenderType.NATIVE) this.createNativeContainer();
+	}
+	getMagicApi = () => ({
+		id: guid(),
+		onPageElUpdate: (el) => {
+			this.emit("page-el-update", el);
+		},
+		onRuntimeReady: (runtime) => {
+			if (this.runtime) return;
+			this.runtime = runtime;
+			globalThis.runtime = runtime;
+			this.emit("runtime-ready", runtime);
+		}
+	});
+	async add(data) {
+		return (await this.getRuntime())?.add?.(data);
+	}
+	async remove(data) {
+		return (await this.getRuntime())?.remove?.(data);
+	}
+	async update(data) {
+		(await this.getRuntime())?.update?.(data);
+	}
+	async select(ids) {
+		const runtime = await this.getRuntime();
+		for (const id of ids) {
+			await runtime?.select?.(id);
+			this.flagSelectedEl(this.getTargetElement(id));
+		}
+	}
+	setZoom(zoom = 1) {
+		this.zoom = zoom;
+	}
+	/**
+	* 挂载Dom节点
+	* @param el 将页面挂载到该Dom节点上
+	*/
+	async mount(el) {
+		if (this.iframe) {
+			if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+				let html = await fetch(this.runtimeUrl).then((res) => res.text());
+				const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
+				html = html.replace("<head>", `<head>\n<base href="${base}">`);
+				this.iframe.srcdoc = html;
+			}
+			el.appendChild(this.iframe);
+			this.postTmagicRuntimeReady();
+		} else if (this.nativeContainer) el.appendChild(this.nativeContainer);
+	}
+	getRuntime = () => {
+		if (this.runtime) return Promise.resolve(this.runtime);
+		return new Promise((resolve) => {
+			const listener = (runtime) => {
+				this.off("runtime-ready", listener);
+				resolve(runtime);
+			};
+			this.on("runtime-ready", listener);
+		});
+	};
+	getDocument() {
+		return this.contentWindow?.document;
+	}
+	/**
+	* 通过坐标获得坐标下所有HTML元素数组
+	* @param point 坐标
+	* @returns 坐标下方所有HTML元素数组，会包含父元素直至html，元素层叠时返回顺序是从上到下
+	*/
+	getElementsFromPoint(point) {
+		let x = point.clientX;
+		let y = point.clientY;
+		if (this.iframe) {
+			const rect = this.iframe.getClientRects()[0];
+			if (rect) {
+				x = x - rect.left;
+				y = y - rect.top;
+			}
+		}
+		return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom);
+	}
+	getTargetElement(id) {
+		return getElById()(this.getDocument(), id);
+	}
+	postTmagicRuntimeReady() {
+		this.contentWindow = this.iframe?.contentWindow;
+		this.contentWindow.magic = this.getMagicApi();
+		this.contentWindow.postMessage({ tmagicRuntimeReady: true }, "*");
+	}
+	reloadIframe(url) {
+		if (this.renderType !== RenderType.IFRAME) return;
+		const el = this.iframe?.parentElement;
+		this.destroyIframe();
+		this.runtimeUrl = url;
+		this.createIframe();
+		this.mount(el);
+		this.runtime = null;
+	}
+	destroyIframe() {
+		this.iframe?.removeEventListener("load", this.iframeLoadHandler);
+		this.contentWindow = null;
+		this.iframe?.remove();
+		this.iframe = void 0;
+	}
+	/**
+	* 销毁实例
+	*/
+	destroy() {
+		this.destroyIframe();
+		globalThis.runtime = void 0;
+		this.removeAllListeners();
+	}
+	on(eventName, listener) {
+		return super.on(eventName, listener);
+	}
+	emit(eventName, ...args) {
+		return super.emit(eventName, ...args);
+	}
+	createIframe() {
+		this.iframe = globalThis.document.createElement("iframe");
+		this.iframe.src = this.runtimeUrl && isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
+		this.iframe.style.cssText = `
+      border: 0;
+      width: 100%;
+      height: 100%;
+    `;
+		this.iframe.addEventListener("load", this.iframeLoadHandler);
+		return this.iframe;
+	}
+	async createNativeContainer() {
+		this.contentWindow = globalThis;
+		this.nativeContainer = globalThis.document.createElement("div");
+		this.contentWindow.magic = this.getMagicApi();
+		if (this.customizedRender) {
+			const el = await this.customizedRender();
+			if (el) this.nativeContainer.appendChild(el);
+		}
+	}
+	/**
+	* 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
+	* @param el 被选中的元素
+	*/
+	flagSelectedEl(el) {
+		const doc = this.getDocument();
+		if (doc) {
+			removeSelectedClassName(doc);
+			el && addSelectedClassName(el, doc);
+		}
+	}
+	iframeLoadHandler = () => {
+		const handler = async () => {
+			if (!this.contentWindow?.magic) this.postTmagicRuntimeReady();
+			if (!this.contentWindow) return;
+			if (this.customizedRender) {
+				const el = await this.customizedRender();
+				if (el) this.contentWindow.document?.body?.appendChild(el);
+			}
+			this.emit("onload");
+			injectStyle(this.contentWindow.document, style_default);
+		};
+		handler();
+	};
+};
+//#endregion
+export { StageRender as default };

package/dist/es/TargetShadow.js

@@ -0,0 +1,68 @@
+import { Mode } from "./const.js";
+import { getTargetElStyle, isFixedParent } from "./util.js";
+import { getElById, getIdFromEl, guid, setIdToEl } from "@tmagic/core";
+//#region packages/stage/src/TargetShadow.ts
+/**
+* 将选中的节点修正定位后，添加一个操作节点到蒙层上
+*/
+var TargetShadow = class {
+	el;
+	els = [];
+	idPrefix = `target_calibrate_${guid()}`;
+	container;
+	scrollLeft = 0;
+	scrollTop = 0;
+	zIndex;
+	updateDragEl;
+	constructor(config) {
+		this.container = config.container;
+		if (config.updateDragEl) this.updateDragEl = config.updateDragEl;
+		if (typeof config.zIndex !== "undefined") this.zIndex = config.zIndex;
+		if (config.idPrefix) this.idPrefix = `${config.idPrefix}_${guid()}`;
+		this.container.addEventListener("customScroll", this.scrollHandler);
+	}
+	update(target) {
+		this.el = this.updateEl(target, this.el);
+		return this.el;
+	}
+	updateGroup(targetGroup) {
+		if (this.els.length > targetGroup.length) this.els.slice(targetGroup.length - 1).forEach((el) => {
+			el.remove();
+		});
+		this.els = targetGroup.map((target, index) => this.updateEl(target, this.els[index]));
+		return this.els;
+	}
+	destroyEl() {
+		this.el?.remove();
+		this.el = void 0;
+	}
+	destroyEls() {
+		this.els.forEach((el) => {
+			el.remove();
+		});
+		this.els = [];
+	}
+	destroy() {
+		this.container.removeEventListener("customScroll", this.scrollHandler);
+		this.destroyEl();
+		this.destroyEls();
+	}
+	updateEl(target, src) {
+		const el = src || globalThis.document.createElement("div");
+		setIdToEl()(el, `${this.idPrefix}_${getIdFromEl()(target)}`);
+		el.style.cssText = getTargetElStyle(target, this.zIndex);
+		if (typeof this.updateDragEl === "function") this.updateDragEl(el, target, this.container);
+		const isFixed = isFixedParent(target);
+		const mode = this.container.dataset.mode || Mode.ABSOLUTE;
+		if (isFixed && mode !== Mode.FIXED) el.style.transform = `translate3d(${this.scrollLeft}px, ${this.scrollTop}px, 0)`;
+		else if (!isFixed && mode === Mode.FIXED) el.style.transform = `translate3d(${-this.scrollLeft}px, ${-this.scrollTop}px, 0)`;
+		if (!getElById()(globalThis.document, getIdFromEl()(el))) this.container.append(el);
+		return el;
+	}
+	scrollHandler = (e) => {
+		this.scrollLeft = e.detail.scrollLeft;
+		this.scrollTop = e.detail.scrollTop;
+	};
+};
+//#endregion
+export { TargetShadow as default };