@tmagic/editor 1.7.6 → 1.7.8-beta.1

package/dist/es/utils/props.js

@@ -0,0 +1,232 @@
+import { tMagicMessage } from "@tmagic/design";
+import { NODE_CONDS_KEY, NODE_CONDS_RESULT_KEY, NODE_DISABLE_CODE_BLOCK_KEY, NODE_DISABLE_DATA_SOURCE_KEY } from "@tmagic/core";
+//#region packages/editor/src/utils/props.ts
+var arrayOptions = [{
+	text: "包含",
+	value: "include"
+}, {
+	text: "不包含",
+	value: "not_include"
+}];
+var eqOptions = [{
+	text: "等于",
+	value: "="
+}, {
+	text: "不等于",
+	value: "!="
+}];
+var numberOptions = [
+	{
+		text: "大于",
+		value: ">"
+	},
+	{
+		text: "大于等于",
+		value: ">="
+	},
+	{
+		text: "小于",
+		value: "<"
+	},
+	{
+		text: "小于等于",
+		value: "<="
+	},
+	{
+		text: "在范围内",
+		value: "between"
+	},
+	{
+		text: "不在范围内",
+		value: "not_between"
+	}
+];
+var styleTabConfig = {
+	title: "样式",
+	lazy: true,
+	display: ({ services }) => !(services.uiService.get("showStylePanel") ?? true),
+	items: [{
+		name: "style",
+		labelWidth: "100px",
+		type: "style-setter",
+		items: [{ names: [
+			"display",
+			"flexDirection",
+			"justifyContent",
+			"alignItems",
+			"flexWrap",
+			"marginTop",
+			"marginRight",
+			"marginBottom",
+			"marginLeft",
+			"paddingTop",
+			"paddingRight",
+			"paddingBottom",
+			"paddingLeft",
+			"width",
+			"height",
+			"overflow",
+			"fontSize",
+			"lineHeight",
+			"fontWeight",
+			"color",
+			"textAlign",
+			"backgroundColor",
+			"backgroundImage",
+			"backgroundSize",
+			"backgroundPosition",
+			"backgroundRepeat",
+			"position",
+			"zIndex",
+			"top",
+			"right",
+			"bottom",
+			"left",
+			"borderRadius",
+			"borderTopWidth",
+			"borderTopStyle",
+			"borderTopColor",
+			"borderRightColor",
+			"borderRightWidth",
+			"borderRightStyle",
+			"borderRightColor",
+			"borderBottomWidth",
+			"borderBottomStyle",
+			"borderBottomColor",
+			"borderLeftStyle",
+			"borderLeftWidth",
+			"borderLeftColor",
+			"borderWidth",
+			"borderStyle",
+			"borderColor"
+		] }]
+	}]
+};
+var eventTabConfig = {
+	title: "事件",
+	lazy: true,
+	items: [{
+		name: "events",
+		src: "component",
+		labelWidth: "100px",
+		type: "event-select"
+	}]
+};
+var advancedTabConfig = {
+	title: "高级",
+	lazy: true,
+	items: [
+		{
+			name: NODE_DISABLE_CODE_BLOCK_KEY,
+			text: "禁用代码块",
+			type: "switch",
+			defaultValue: false,
+			extra: "开启后，配置的代码块将不会被执行"
+		},
+		{
+			name: NODE_DISABLE_DATA_SOURCE_KEY,
+			text: "禁用数据源",
+			type: "switch",
+			defaultValue: false,
+			extra: "开启后，组件内配置的数据源相关配置将不会被编译，显隐条件将失效"
+		},
+		{
+			name: "created",
+			text: "created",
+			labelPosition: "top",
+			type: "code-select",
+			extra: "组件初始化时执行"
+		},
+		{
+			name: "mounted",
+			text: "mounted",
+			labelPosition: "top",
+			type: "code-select",
+			extra: "组件挂载到dom时执行"
+		},
+		{
+			name: "display",
+			text: "display",
+			extra: "控制组件是否渲染，关系的代码块返回值为false时不渲染",
+			labelPosition: "top",
+			type: "code-select"
+		}
+	]
+};
+var displayTabConfig = {
+	title: "显示条件",
+	display: (_state, { model }) => model.type !== "page",
+	items: [{
+		name: NODE_CONDS_RESULT_KEY,
+		type: "select",
+		text: "条件成立时",
+		defaultValue: false,
+		options: [{
+			text: "显示",
+			value: false
+		}, {
+			text: "隐藏",
+			value: true
+		}],
+		extra: (_state, { model }) => `条件成立时${model[NODE_CONDS_RESULT_KEY] ? "隐藏" : "显示"}，不成立时${model[NODE_CONDS_RESULT_KEY] ? "显示" : "隐藏"}；<br />同一条件组内的所有条件配置同时成立时表示该条件组成立，任意一个条件组成立时表示条件成立(条件组内为且的关系，条件组间为或的关系)；<br />条件为空时表示成立；`
+	}, {
+		type: "display-conds",
+		name: NODE_CONDS_KEY,
+		titlePrefix: "条件组",
+		defaultValue: []
+	}]
+};
+/**
+* 统一为组件属性表单加上事件、高级、样式配置
+* @param config 组件属性配置
+* @returns Object
+*/
+var fillConfig = (config = [], { labelWidth = "80px", disabledDataSource = false, disabledCodeBlock = false } = {}) => {
+	const propsConfig = [];
+	if (!config.find((item) => item.name === "type")) propsConfig.push({
+		text: "type",
+		name: "type",
+		type: "hidden"
+	});
+	if (!config.find((item) => item.name === "id")) propsConfig.push({
+		name: "id",
+		text: "ID",
+		type: "text",
+		disabled: true,
+		append: {
+			type: "button",
+			text: "复制",
+			handler: (vm, { model }) => {
+				navigator.clipboard.writeText(`${model.id}`).then(() => {
+					tMagicMessage.success("已复制");
+				}).catch(() => {
+					tMagicMessage.error("复制失败");
+				});
+			}
+		}
+	});
+	if (!config.find((item) => item.name === "name")) propsConfig.push({
+		name: "name",
+		text: "组件名称"
+	});
+	const noCodeAdvancedTabItems = advancedTabConfig.items.filter((item) => item.type !== "code-select");
+	if (noCodeAdvancedTabItems.length > 0 && disabledCodeBlock) advancedTabConfig.items = noCodeAdvancedTabItems;
+	const tabConfig = {
+		type: "tab",
+		labelWidth,
+		items: [
+			{
+				title: "属性",
+				items: [...propsConfig, ...config]
+			},
+			{ ...styleTabConfig },
+			{ ...eventTabConfig }
+		]
+	};
+	if (!disabledCodeBlock) tabConfig.items.push({ ...advancedTabConfig });
+	else if (noCodeAdvancedTabItems.length > 0) tabConfig.items.push({ ...advancedTabConfig });
+	if (!disabledDataSource) tabConfig.items.push({ ...displayTabConfig });
+	return [tabConfig];
+};
+//#endregion
+export { advancedTabConfig, arrayOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, numberOptions, styleTabConfig };

package/dist/es/utils/scroll-viewer.js

@@ -0,0 +1,115 @@
+import { EventEmitter } from "events";
+//#region packages/editor/src/utils/scroll-viewer.ts
+var ScrollViewer = class extends EventEmitter {
+	container;
+	target;
+	zoom = 1;
+	scrollLeft = 0;
+	scrollTop = 0;
+	scrollHeight = 0;
+	scrollWidth = 0;
+	width = 0;
+	height = 0;
+	translateXCorrectionValue = 0;
+	translateYCorrectionValue = 0;
+	correctionScrollSize = {
+		width: 0,
+		height: 0
+	};
+	resizeObserver = new ResizeObserver(() => {
+		this.setSize();
+		this.setScrollSize();
+	});
+	constructor(options) {
+		super();
+		this.container = options.container;
+		this.target = options.target;
+		this.zoom = options.zoom;
+		if (this.correctionScrollSize) this.correctionScrollSize = {
+			...this.correctionScrollSize,
+			...options.correctionScrollSize
+		};
+		this.container.addEventListener("wheel", this.wheelHandler, false);
+		this.setSize();
+		this.setScrollSize();
+		this.resizeObserver.observe(this.container);
+		this.resizeObserver.observe(this.target);
+	}
+	destroy() {
+		this.resizeObserver.disconnect();
+		this.container.removeEventListener("wheel", this.wheelHandler, false);
+		this.removeAllListeners();
+	}
+	setZoom(zoom) {
+		this.zoom = zoom;
+		this.setScrollSize();
+	}
+	scrollTo({ left, top }) {
+		if (typeof left !== "undefined") this.scrollLeft = left;
+		if (typeof top !== "undefined") this.scrollTop = top;
+		const translateX = -this.scrollLeft + this.translateXCorrectionValue;
+		const translateY = -this.scrollTop + this.translateYCorrectionValue;
+		this.target.style.transform = `translate(${translateX}px, ${translateY}px)`;
+	}
+	wheelHandler = (event) => {
+		const { deltaX, deltaY, currentTarget } = event;
+		if (currentTarget !== this.container) return;
+		let top;
+		if (this.scrollHeight > this.height) top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
+		let left;
+		if (this.scrollWidth > this.width) left = this.scrollLeft + this.getPos(deltaX, this.scrollLeft, this.scrollWidth, this.width);
+		this.scrollTo({
+			left,
+			top
+		});
+		this.emit("scroll", {
+			scrollLeft: this.scrollLeft,
+			scrollTop: this.scrollTop,
+			scrollHeight: this.scrollHeight,
+			scrollWidth: this.scrollWidth
+		});
+	};
+	getPos(delta, scrollPos, scrollSize, size) {
+		let pos = 0;
+		if (delta < 0) {
+			if (scrollPos > 0) pos = Math.max(delta, -scrollPos);
+		} else {
+			const leftPos = scrollSize - size - scrollPos;
+			if (leftPos > 0) pos = Math.min(delta, leftPos);
+		}
+		return pos;
+	}
+	setScrollSize = () => {
+		const targetRect = this.target.getBoundingClientRect();
+		this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
+		const targetMarginTop = Number(this.target.style.marginTop) || 0;
+		this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
+		let left;
+		let top;
+		if (this.scrollWidth < this.width) {
+			left = 0;
+			this.translateXCorrectionValue = 0;
+		} else this.translateXCorrectionValue = (this.scrollWidth - this.width) / 2;
+		if (this.scrollHeight < this.height) {
+			top = 0;
+			this.translateYCorrectionValue = 0;
+		} else this.translateYCorrectionValue = (this.scrollHeight - this.height) / 2;
+		this.scrollTo({
+			left,
+			top
+		});
+		this.emit("scroll", {
+			scrollLeft: this.scrollLeft,
+			scrollTop: this.scrollTop,
+			scrollHeight: this.scrollHeight,
+			scrollWidth: this.scrollWidth
+		});
+	};
+	setSize = () => {
+		const { width, height } = this.container.getBoundingClientRect();
+		this.width = width;
+		this.height = height;
+	};
+};
+//#endregion
+export { ScrollViewer };

package/dist/es/utils/tree.js

@@ -0,0 +1,11 @@
+import { getKeys } from "@tmagic/utils";
+//#region packages/editor/src/utils/tree.ts
+var updateStatus = (nodeStatusMap, id, status) => {
+	const nodeStatus = nodeStatusMap.get(id);
+	if (!nodeStatus) return;
+	getKeys(status).forEach((key) => {
+		if (nodeStatus[key] !== void 0 && status[key] !== void 0) nodeStatus[key] = Boolean(status[key]);
+	});
+};
+//#endregion
+export { updateStatus };

package/dist/es/utils/undo-redo.js

@@ -0,0 +1,43 @@
+import { cloneDeep } from "lodash-es";
+//#region packages/editor/src/utils/undo-redo.ts
+var UndoRedo = class {
+	elementList;
+	listCursor;
+	listMaxSize;
+	constructor(listMaxSize = 20) {
+		const minListMaxSize = 2;
+		this.elementList = [];
+		this.listCursor = 0;
+		this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
+	}
+	pushElement(element) {
+		this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, cloneDeep(element));
+		this.listCursor += 1;
+		if (this.elementList.length > this.listMaxSize) {
+			this.elementList.shift();
+			this.listCursor -= 1;
+		}
+	}
+	canUndo() {
+		return this.listCursor > 1;
+	}
+	undo() {
+		if (!this.canUndo()) return null;
+		this.listCursor -= 1;
+		return this.getCurrentElement();
+	}
+	canRedo() {
+		return this.elementList.length > this.listCursor;
+	}
+	redo() {
+		if (!this.canRedo()) return null;
+		this.listCursor += 1;
+		return this.getCurrentElement();
+	}
+	getCurrentElement() {
+		if (this.listCursor < 1) return null;
+		return cloneDeep(this.elementList[this.listCursor - 1]);
+	}
+};
+//#endregion
+export { UndoRedo };

package/dist/style.css

@@ -1,12 +1,4 @@
-@charset "UTF-8";.m-fields-ui-select {
-  cursor: pointer;
-}
-.m-fields-ui-select i {
-  margin-right: 3px;
-}
-.m-fields-ui-select span {
-  color: #2882e0;
-}.m-editor-scroll-bar {
+@charset "UTF-8";.m-editor-scroll-bar {
   position: absolute;
   background-color: transparent;
   opacity: 0.3;
@@ -49,6 +41,14 @@
 }
 .m-editor-scroll-bar:hover.vertical .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.vertical .m-editor-scroll-bar-thumb {
   width: 11px;
+}.m-fields-ui-select {
+  cursor: pointer;
+}
+.m-fields-ui-select i {
+  margin-right: 3px;
+}
+.m-fields-ui-select span {
+  color: #2882e0;
 }
 .tmagic-design-popper {
   min-width: 150px;
@@ -1934,4 +1934,4 @@ fieldset.m-fieldset .m-form-tip {
 
 .fade-enter, .fade-leave-to {
   opacity: 0;
-}
+}/*$vite$:1*/