@tmagic/stage 1.7.7 → 1.7.8-beta.2

package/dist/es/const.js

@@ -0,0 +1,91 @@
+//#region packages/stage/src/const.ts
+/** 流式布局下拖动时需要clone一个镜像节点，镜像节点的id前缀 */
+var GHOST_EL_ID_PREFIX = "ghost_el_";
+/** 拖动的时候需要在蒙层中创建一个占位节点，该节点的id前缀 */
+var DRAG_EL_ID_PREFIX = "drag_el_";
+/** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
+var HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
+var CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
+var PAGE_CLASS = "magic-ui-page";
+/** 默认放到缩小倍数 */
+var DEFAULT_ZOOM = 1;
+/** 参考线类型 */
+var GuidesType = /* @__PURE__ */ function(GuidesType) {
+	/** 水平 */
+	GuidesType["HORIZONTAL"] = "horizontal";
+	/** 垂直 */
+	GuidesType["VERTICAL"] = "vertical";
+	return GuidesType;
+}({});
+/** css z-index */
+var ZIndex = /* @__PURE__ */ function(ZIndex) {
+	/** 蒙层，用于监听用户操作，需要置于顶层 */
+	ZIndex["MASK"] = "99999";
+	/** 选中的节点 */
+	ZIndex["SELECTED_EL"] = "666";
+	ZIndex["GHOST_EL"] = "700";
+	ZIndex["DRAG_EL"] = "9";
+	ZIndex["HIGHLIGHT_EL"] = "8";
+	return ZIndex;
+}({});
+/** 鼠标按键 */
+var MouseButton = /* @__PURE__ */ function(MouseButton) {
+	/** 左键 */
+	MouseButton[MouseButton["LEFT"] = 0] = "LEFT";
+	/** z中健 */
+	MouseButton[MouseButton["MIDDLE"] = 1] = "MIDDLE";
+	/** 右键 */
+	MouseButton[MouseButton["RIGHT"] = 2] = "RIGHT";
+	return MouseButton;
+}({});
+/** 布局方式 */
+var Mode = /* @__PURE__ */ function(Mode) {
+	/** 绝对定位布局 */
+	Mode["ABSOLUTE"] = "absolute";
+	/** 固定定位布局 */
+	Mode["FIXED"] = "fixed";
+	/** 流式布局 */
+	Mode["SORTABLE"] = "sortable";
+	return Mode;
+}({});
+/** 选中节点的class name */
+var SELECTED_CLASS = "tmagic-stage-selected-area";
+var AbleActionEventType = /* @__PURE__ */ function(AbleActionEventType) {
+	AbleActionEventType["SELECT_PARENT"] = "select-parent";
+	AbleActionEventType["REMOVE"] = "remove";
+	AbleActionEventType["RERENDER"] = "rerender";
+	return AbleActionEventType;
+}({});
+/** 将组件添加到容器的方式 */
+var ContainerHighlightType = /* @__PURE__ */ function(ContainerHighlightType) {
+	/** 默认方式：组件在容器上方悬停一段时间后加入 */
+	ContainerHighlightType["DEFAULT"] = "default";
+	/** 按住alt键，并在容器上方悬停一段时间后加入 */
+	ContainerHighlightType["ALT"] = "alt";
+	return ContainerHighlightType;
+}({});
+var RenderType = /* @__PURE__ */ function(RenderType) {
+	RenderType["IFRAME"] = "iframe";
+	RenderType["NATIVE"] = "native";
+	return RenderType;
+}({});
+/** 选择状态 */
+var SelectStatus = /* @__PURE__ */ function(SelectStatus) {
+	/** 单选 */
+	SelectStatus["SELECT"] = "select";
+	/** 多选 */
+	SelectStatus["MULTI_SELECT"] = "multiSelect";
+	return SelectStatus;
+}({});
+/** 拖动状态 */
+var StageDragStatus = /* @__PURE__ */ function(StageDragStatus) {
+	/** 开始拖动 */
+	StageDragStatus["START"] = "start";
+	/** 拖动中 */
+	StageDragStatus["ING"] = "ing";
+	/** 拖动结束 */
+	StageDragStatus["END"] = "end";
+	return StageDragStatus;
+}({});
+//#endregion
+export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragStatus, ZIndex };

package/dist/es/index.js

@@ -0,0 +1,12 @@
+import { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragStatus, ZIndex } from "./const.js";
+import { addSelectedClassName, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up } from "./util.js";
+import MoveableActionsAble_default from "./MoveableActionsAble.js";
+import StageDragResize from "./StageDragResize.js";
+import StageMask from "./StageMask.js";
+import StageRender from "./StageRender.js";
+import StageCore from "./StageCore.js";
+export * from "moveable";
+//#region packages/stage/src/index.ts
+var src_default = StageCore;
+//#endregion
+export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, MoveableActionsAble_default as MoveableActionsAble, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, src_default as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };

package/dist/es/moveable-able.js

@@ -0,0 +1,4 @@
+//#region packages/stage/src/moveable-able.css?raw
+var moveable_able_default = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n  cursor: pointer;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n.moveable-rerender-button img {\n  position: absolute;\n  left: 2px;\n  top: 2px;\n}\n";
+//#endregion
+export { moveable_able_default as default };

package/dist/es/style.js

@@ -0,0 +1,4 @@
+//#region packages/stage/src/style.css?raw
+var style_default = ".tmagic-stage-container-highlight::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background-color: #000;\n  opacity: .1;\n  pointer-events: none;\n}\n\n.magic-ui-container.magic-layout-relative {\n  min-height: 50px;\n}\n";
+//#endregion
+export { style_default as default };

package/dist/es/util.js

@@ -0,0 +1,192 @@
+import { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS } from "./const.js";
+import { getIdFromEl, removeClassName } from "@tmagic/core";
+//#region packages/stage/src/util.ts
+var getParents = (el, relative) => {
+	let cur = el.parentElement;
+	const parents = [];
+	while (cur && cur !== relative) {
+		parents.push(cur);
+		cur = cur.parentElement;
+	}
+	return parents;
+};
+var getOffset = (el) => {
+	const htmlEl = el;
+	const { offsetParent } = htmlEl;
+	const left = htmlEl.offsetLeft || 0;
+	const top = htmlEl.offsetTop || 0;
+	if (offsetParent) {
+		const parentOffset = getOffset(offsetParent);
+		return {
+			left: left + parentOffset.left,
+			top: top + parentOffset.top
+		};
+	}
+	return {
+		left,
+		top
+	};
+};
+var getTargetElStyle = (el, zIndex) => {
+	const offset = getOffset(el);
+	const { transform, border } = getComputedStyle(el);
+	return `
+    position: absolute;
+    transform: ${transform};
+    left: ${offset.left}px;
+    top: ${offset.top}px;
+    width: ${el.clientWidth}px;
+    height: ${el.clientHeight}px;
+    border: ${border};
+    opacity: 0;
+    ${typeof zIndex !== "undefined" ? `z-index: ${zIndex};` : ""}
+  `;
+};
+var getAbsolutePosition = (el, { top, left }) => {
+	const { offsetParent } = el;
+	if (offsetParent) {
+		const parentOffset = getOffset(offsetParent);
+		return {
+			left: left - parentOffset.left,
+			top: top - parentOffset.top
+		};
+	}
+	return {
+		left,
+		top
+	};
+};
+var isAbsolute = (style) => style.position === "absolute";
+var isRelative = (style) => style.position === "relative";
+var isStatic = (style) => style.position === "static";
+var isFixed = (style) => style.position === "fixed";
+var isFixedParent = (el) => {
+	let fixed = false;
+	let dom = el;
+	while (dom) {
+		fixed = isFixed(getComputedStyle(dom));
+		if (fixed) break;
+		const { parentElement } = dom;
+		if (!parentElement || parentElement.tagName === "BODY") break;
+		dom = parentElement;
+	}
+	return fixed;
+};
+var getMode = (el) => {
+	if (isFixedParent(el)) return Mode.FIXED;
+	const style = getComputedStyle(el);
+	if (isStatic(style) || isRelative(style)) return Mode.SORTABLE;
+	return Mode.ABSOLUTE;
+};
+var getScrollParent = (element, includeHidden = false) => {
+	let style = getComputedStyle(element);
+	const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+	if (isFixed(style)) return null;
+	for (let parent = element; parent.parentElement;) {
+		parent = parent.parentElement;
+		if (parent.tagName === "HTML") return parent;
+		style = getComputedStyle(parent);
+		if (isAbsolute(style) && isStatic(style)) continue;
+		if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
+	}
+	return null;
+};
+var removeSelectedClassName = (doc) => {
+	const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
+	if (oldEl) {
+		removeClassName(oldEl, SELECTED_CLASS);
+		if (oldEl.parentNode) removeClassName(oldEl.parentNode, `${SELECTED_CLASS}-parent`);
+		doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
+			removeClassName(item, `${SELECTED_CLASS}-parents`);
+		});
+	}
+};
+var addSelectedClassName = (el, doc) => {
+	el.classList.add(SELECTED_CLASS);
+	el.parentNode?.classList.add(`${SELECTED_CLASS}-parent`);
+	getParents(el, doc.body).forEach((item) => {
+		item.classList.add(`${SELECTED_CLASS}-parents`);
+	});
+};
+/**
+* 下移组件位置
+* @param {number} deltaTop 偏移量
+* @param {Object} detail 当前选中的组件配置
+*/
+var down = (deltaTop, target) => {
+	let swapIndex = 0;
+	let addUpH = target.clientHeight;
+	const brothers = Array.from(target.parentNode?.children || []).filter((child) => !getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX));
+	const index = brothers.indexOf(target);
+	const downEls = brothers.slice(index + 1);
+	for (let i = 0; i < downEls.length; i++) {
+		const ele = downEls[i];
+		if (ele.style?.position === "fixed") continue;
+		addUpH += ele.clientHeight / 2;
+		if (deltaTop <= addUpH) break;
+		addUpH += ele.clientHeight / 2;
+		swapIndex = i;
+	}
+	const src = getIdFromEl()(target) || "";
+	return {
+		src,
+		dist: downEls.length && swapIndex > -1 ? getIdFromEl()(downEls[swapIndex]) || "" : src
+	};
+};
+/**
+* 上移组件位置
+* @param {Array} brothers 处于同一容器下的所有子组件配置
+* @param {number} index 当前组件所处的位置
+* @param {number} deltaTop 偏移量
+* @param {Object} detail 当前选中的组件配置
+*/
+var up = (deltaTop, target) => {
+	const brothers = Array.from(target.parentNode?.children || []).filter((child) => !getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX));
+	const index = brothers.indexOf(target);
+	const upEls = brothers.slice(0, index);
+	let addUpH = target.clientHeight;
+	let swapIndex = upEls.length - 1;
+	for (let i = upEls.length - 1; i >= 0; i--) {
+		const ele = upEls[i];
+		if (!ele) continue;
+		if (ele.style.position === "fixed") continue;
+		addUpH += ele.clientHeight / 2;
+		if (-deltaTop <= addUpH) break;
+		addUpH += ele.clientHeight / 2;
+		swapIndex = i;
+	}
+	const src = getIdFromEl()(target) || "";
+	return {
+		src,
+		dist: upEls.length && swapIndex > -1 ? getIdFromEl()(upEls[swapIndex]) || "" : src
+	};
+};
+var isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
+var getMarginValue = (el) => {
+	if (!el) return {
+		marginLeft: 0,
+		marginTop: 0
+	};
+	const { marginLeft, marginTop } = getComputedStyle(el);
+	return {
+		marginLeft: parseFloat(marginLeft) || 0,
+		marginTop: parseFloat(marginTop) || 0
+	};
+};
+var getBorderWidth = (el) => {
+	if (!el) return {
+		borderLeftWidth: 0,
+		borderRightWidth: 0,
+		borderTopWidth: 0,
+		borderBottomWidth: 0
+	};
+	const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getComputedStyle(el);
+	return {
+		borderLeftWidth: parseFloat(borderLeftWidth) || 0,
+		borderRightWidth: parseFloat(borderRightWidth) || 0,
+		borderTopWidth: parseFloat(borderTopWidth) || 0,
+		borderBottomWidth: parseFloat(borderBottomWidth) || 0
+	};
+};
+//#endregion
+export { addSelectedClassName, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };