@tmagic/editor 1.7.6 → 1.7.8-beta.1

package/dist/es/utils/editor.js

@@ -0,0 +1,261 @@
+import { Layout } from "../type.js";
+import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop, isValueIncludeDataSource } from "@tmagic/utils";
+import { NODE_CONDS_KEY } from "@tmagic/core";
+import { isObject } from "lodash-es";
+import serialize from "serialize-javascript";
+import { detailedDiff } from "deep-object-diff";
+//#region packages/editor/src/utils/editor.ts
+var COPY_STORAGE_KEY = "$MagicEditorCopyData";
+var COPY_CODE_STORAGE_KEY = "$MagicEditorCopyCode";
+var COPY_DS_STORAGE_KEY = "$MagicEditorCopyDataSource";
+/**
+* 获取所有页面配置
+* @param root DSL跟节点
+* @returns 所有页面配置
+*/
+var getPageList = (root) => {
+	if (!root) return [];
+	if (!Array.isArray(root.items)) return [];
+	return root.items.filter((item) => isPage(item));
+};
+var getPageFragmentList = (root) => {
+	if (!root) return [];
+	if (!Array.isArray(root.items)) return [];
+	return root.items.filter((item) => isPageFragment(item));
+};
+/**
+* 获取所有页面名称
+* @param pages 所有页面配置
+* @returns 所有页面名称
+*/
+var getPageNameList = (pages) => pages.map((page) => page.name || "index");
+/**
+* 新增页面时，生成页面名称
+* @param {Object} pageNameList 所有页面名称
+* @returns {string}
+*/
+var generatePageName = (pageNameList, type) => {
+	let pageLength = pageNameList.length;
+	if (!pageLength) return `${type}_index`;
+	let pageName = `${type}_${pageLength}`;
+	while (pageNameList.includes(pageName)) {
+		pageLength += 1;
+		pageName = `${type}_${pageLength}`;
+	}
+	return pageName;
+};
+/**
+* 新增页面时，生成页面名称
+* @param {Object} app 所有页面配置
+* @returns {string}
+*/
+var generatePageNameByApp = (app, type) => generatePageName(getPageNameList(type === "page" ? getPageList(app) : getPageFragmentList(app)), type);
+var getNodeIndex = (id, parent) => {
+	return (parent?.items || []).findIndex((item) => `${item.id}` === `${id}`);
+};
+var getRelativeStyle = (style = {}) => ({
+	...style,
+	position: "relative",
+	top: 0,
+	left: 0
+});
+var getMiddleTop = (node, parentNode, stage) => {
+	let height = node.style?.height || 0;
+	if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style) return node.style?.top;
+	if (!isNumber(height)) height = 0;
+	const { height: parentHeight } = parentNode.style;
+	let wrapperHeightDeal = parentHeight;
+	if (stage.mask && stage.renderer) {
+		const { scrollTop = 0, wrapperHeight } = stage.mask;
+		wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+		const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
+		if (isPage(parentNode)) return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+	}
+	return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
+};
+var getInitPositionStyle = (style = {}, layout) => {
+	if (layout === Layout.ABSOLUTE) {
+		const newStyle = {
+			...style,
+			position: "absolute"
+		};
+		if (typeof newStyle.left === "undefined" && typeof newStyle.right === "undefined") newStyle.left = 0;
+		return newStyle;
+	}
+	if (layout === Layout.RELATIVE) return getRelativeStyle(style);
+	return style;
+};
+var setChildrenLayout = (node, layout) => {
+	node.items?.forEach((child) => {
+		setLayout(child, layout);
+	});
+	return node;
+};
+var setLayout = (node, layout) => {
+	if (isPop(node)) return;
+	const style = node.style || {};
+	if (style.position === "fixed") return;
+	if (layout !== Layout.RELATIVE) style.position = "absolute";
+	else {
+		node.style = getRelativeStyle(style);
+		node.style.right = "auto";
+		node.style.bottom = "auto";
+	}
+	return node;
+};
+var change2Fixed = (node, root) => {
+	const style = { ...node.style || {} };
+	const path = getNodePath(node.id, root.items);
+	const offset = {
+		left: 0,
+		top: 0
+	};
+	if (!node.style?.right && isNumber(node.style?.left || 0)) for (const value of path) {
+		if (value.style?.right || !isNumber(value.style?.left || 0)) {
+			offset.left = 0;
+			break;
+		}
+		offset.left = offset.left + Number(value.style?.left || 0);
+	}
+	if (!node.style?.bottom && isNumber(node.style?.top || 0)) for (const value of path) {
+		if (value.style?.bottom || !isNumber(value.style?.top || 0)) {
+			offset.top = 0;
+			break;
+		}
+		offset.top = offset.top + Number(value.style?.top || 0);
+	}
+	if (offset.left) style.left = offset.left;
+	if (offset.top) style.top = offset.top;
+	return style;
+};
+var Fixed2Other = async (node, root, getLayout) => {
+	const path = getNodePath(node.id, root.items);
+	const cur = path.pop();
+	const offset = {
+		left: cur?.style?.left || 0,
+		top: cur?.style?.top || 0
+	};
+	if (!node.style?.right && isNumber(node.style?.left || 0)) for (const value of path) {
+		if (value.style?.right || !isNumber(value.style?.left || 0)) {
+			offset.left = 0;
+			break;
+		}
+		offset.left = offset.left - Number(value.style?.left || 0);
+	}
+	if (!node.style?.bottom && isNumber(node.style?.top || 0)) for (const value of path) {
+		if (value.style?.bottom || !isNumber(value.style?.top || 0)) {
+			offset.top = 0;
+			break;
+		}
+		offset.top = offset.top - Number(value.style?.top || 0);
+	}
+	const style = node.style || {};
+	const parent = path.pop();
+	if (!parent) return getRelativeStyle(style);
+	if (await getLayout(parent) !== Layout.RELATIVE) {
+		if (offset.left) style.left = offset.left;
+		if (offset.top) style.top = offset.top;
+		return {
+			...style,
+			position: "absolute"
+		};
+	}
+	return getRelativeStyle(style);
+};
+var getGuideLineFromCache = (key) => {
+	if (!key) return [];
+	const guideLineCacheData = globalThis.localStorage.getItem(key);
+	if (guideLineCacheData) try {
+		return JSON.parse(guideLineCacheData) || [];
+	} catch (e) {
+		console.error(e);
+	}
+	return [];
+};
+var fixNodeLeft = (config, parent, doc) => {
+	if (!doc || !config.style || !isNumber(config.style.left)) return config.style?.left;
+	const el = getElById()(doc, `${config.id}`);
+	const parentEl = getElById()(doc, `${parent.id}`);
+	const left = Number(config.style?.left) || 0;
+	if (el && parentEl) {
+		const calcParentOffsetWidth = calcValueByFontsize(doc, parentEl.offsetWidth);
+		const calcElOffsetWidth = calcValueByFontsize(doc, el.offsetWidth);
+		if (calcElOffsetWidth + left > calcParentOffsetWidth) return calcParentOffsetWidth - calcElOffsetWidth;
+	}
+	return config.style.left;
+};
+var fixNodePosition = (config, parent, stage) => {
+	if (config.style?.position !== "absolute") return config.style;
+	return {
+		...config.style || {},
+		top: getMiddleTop(config, parent, stage),
+		left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document)
+	};
+};
+var serializeConfig = (config) => serialize(config, {
+	space: 2,
+	unsafe: true
+}).replace(/"(\w+)":\s/g, "$1: ");
+var moveItemsInContainer = (sourceIndices, parent, targetIndex) => {
+	sourceIndices.sort((a, b) => a - b);
+	for (let i = sourceIndices.length - 1; i >= 0; i--) {
+		const sourceIndex = sourceIndices[i];
+		if (sourceIndex === targetIndex) continue;
+		const [item] = parent.items.splice(sourceIndex, 1);
+		parent.items.splice(sourceIndex < targetIndex ? targetIndex - 1 : targetIndex, 0, item);
+		for (let j = i - 1; j >= 0; j--) if (sourceIndices[j] >= targetIndex) sourceIndices[j] += 1;
+	}
+};
+var isIncludeDataSourceByDiffAddResult = (diffResult) => {
+	for (const value of Object.values(diffResult)) {
+		if (isValueIncludeDataSource(value)) return true;
+		if (isObject(value)) return isIncludeDataSourceByDiffAddResult(value);
+	}
+	return false;
+};
+var isIncludeDataSourceByDiffUpdatedResult = (diffResult, oldNode) => {
+	for (const [key, value] of Object.entries(diffResult)) {
+		if (isValueIncludeDataSource(value)) return true;
+		if (isValueIncludeDataSource(oldNode[key])) return true;
+		if (isObject(value)) return isIncludeDataSourceByDiffUpdatedResult(value, oldNode[key]);
+	}
+	return false;
+};
+var isIncludeDataSource = (node, oldNode) => {
+	const diffResult = detailedDiff(oldNode, node);
+	let isIncludeDataSource = false;
+	if (diffResult.updated) {
+		if (diffResult.updated[NODE_CONDS_KEY]) return true;
+		isIncludeDataSource = isIncludeDataSourceByDiffUpdatedResult(diffResult.updated, oldNode);
+		if (isIncludeDataSource) return true;
+	}
+	if (diffResult.added) {
+		isIncludeDataSource = isIncludeDataSourceByDiffAddResult(diffResult.added);
+		if (isIncludeDataSource) return true;
+	}
+	if (diffResult.deleted) {
+		if (diffResult.deleted[NODE_CONDS_KEY]) return true;
+		isIncludeDataSource = isIncludeDataSourceByDiffAddResult(diffResult.deleted);
+		if (isIncludeDataSource) return true;
+	}
+	return isIncludeDataSource;
+};
+var buildChangeRecords = (value, basePath) => {
+	const changeRecords = [];
+	const buildChangeRecords = (obj, basePath) => {
+		Object.entries(obj).forEach(([key, value]) => {
+			if (value !== void 0) {
+				const currentPath = basePath ? `${basePath}.${key}` : key;
+				if (typeof value === "object" && value !== null && !Array.isArray(value)) buildChangeRecords(value, currentPath);
+				else changeRecords.push({
+					propPath: currentPath,
+					value
+				});
+			}
+		});
+	};
+	buildChangeRecords(value, basePath);
+	return changeRecords;
+};
+//#endregion
+export { COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, Fixed2Other, buildChangeRecords, change2Fixed, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getRelativeStyle, isIncludeDataSource, moveItemsInContainer, serializeConfig, setChildrenLayout, setLayout };

package/dist/es/utils/keybinding-config.js

@@ -0,0 +1,106 @@
+import { KeyBindingCommand } from "../type.js";
+//#region packages/editor/src/utils/keybinding-config.ts
+var KeyBindingContainerKey = /* @__PURE__ */ function(KeyBindingContainerKey) {
+	KeyBindingContainerKey["STAGE"] = "stage";
+	KeyBindingContainerKey["LAYER_PANEL"] = "layer-panel";
+	return KeyBindingContainerKey;
+}({});
+var keybinding_config_default = [
+	{
+		command: KeyBindingCommand.DELETE_NODE,
+		keybinding: ["delete", "backspace"],
+		when: [[KeyBindingContainerKey.STAGE, "keyup"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.COPY_NODE,
+		keybinding: "ctrl+c",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.PASTE_NODE,
+		keybinding: "ctrl+v",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.CUT_NODE,
+		keybinding: "ctrl+x",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.UNDO,
+		keybinding: "ctrl+z",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.REDO,
+		keybinding: "ctrl+shift+z",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.MOVE_UP_1,
+		keybinding: "up",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.MOVE_DOWN_1,
+		keybinding: "down",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.MOVE_LEFT_1,
+		keybinding: "left",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.MOVE_RIGHT_1,
+		keybinding: "right",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.MOVE_UP_10,
+		keybinding: "ctrl+up",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.MOVE_DOWN_10,
+		keybinding: "ctrl+down",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.MOVE_LEFT_10,
+		keybinding: "ctrl+left",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.MOVE_RIGHT_10,
+		keybinding: "ctrl+right",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.SWITCH_NODE,
+		keybinding: "tab",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.ZOOM_IN,
+		keybinding: ["ctrl+=", "ctrl+numpadplus"],
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.ZOOM_OUT,
+		keybinding: ["ctrl+-", "ctrl+numpad-"],
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.ZOOM_FIT,
+		keybinding: "ctrl+0",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	},
+	{
+		command: KeyBindingCommand.ZOOM_RESET,
+		keybinding: "ctrl+1",
+		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+	}
+];
+//#endregion
+export { KeyBindingContainerKey, keybinding_config_default as default };

package/dist/es/utils/logger.js

@@ -0,0 +1,18 @@
+//#region packages/editor/src/utils/logger.ts
+var log = (...args) => {
+	if (process.env.NODE_ENV === "development") console.log("magic editor: ", ...args);
+};
+var info = (...args) => {
+	if (process.env.NODE_ENV === "development") console.info("magic editor: ", ...args);
+};
+var warn = (...args) => {
+	if (process.env.NODE_ENV === "development") console.warn("magic editor: ", ...args);
+};
+var debug = (...args) => {
+	if (process.env.NODE_ENV === "development") console.debug("magic editor: ", ...args);
+};
+var error = (...args) => {
+	if (process.env.NODE_ENV === "development") console.error("magic editor: ", ...args);
+};
+//#endregion
+export { debug, error, info, log, warn };

package/dist/es/utils/monaco-editor.js

@@ -0,0 +1,13 @@
+//#region packages/editor/src/utils/monaco-editor.ts
+var cached;
+var monaco_editor_default = () => {
+	if (!cached) cached = Promise.all([import("emmet-monaco-es"), import("monaco-editor")]).then(([emmet, monaco]) => {
+		const { emmetHTML, emmetCSS } = emmet;
+		emmetHTML(monaco);
+		emmetCSS(monaco, ["css", "scss"]);
+		return monaco;
+	});
+	return cached;
+};
+//#endregion
+export { monaco_editor_default as default };

package/dist/es/utils/operator.js

@@ -0,0 +1,73 @@
+import props_default from "../services/props.js";
+import { generatePageNameByApp, getInitPositionStyle } from "./editor.js";
+import editor_default from "../services/editor.js";
+import { calcValueByFontsize, getElById, isPage, isPageFragment } from "@tmagic/utils";
+import { NodeType } from "@tmagic/core";
+import { toRaw } from "vue";
+import { isEmpty } from "lodash-es";
+//#region packages/editor/src/utils/operator.ts
+/**
+* 粘贴前置操作：返回分配了新id以及校准了坐标的配置
+* @param position 粘贴的坐标
+* @param config 待粘贴的元素配置(复制时保存的那份配置)
+* @returns
+*/
+var beforePaste = (position, config, doc) => {
+	if (!config[0]?.style) return config;
+	const curNode = editor_default.get("node");
+	const { left: referenceLeft, top: referenceTop } = config[0].style;
+	return config.map((configItem) => {
+		const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+		let pastePosition = positionClone;
+		if (!isEmpty(pastePosition) && curNode?.items) pastePosition = getPositionInContainer(pastePosition, curNode.id, doc);
+		if (pastePosition.left && configItem.style?.left) pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+		if (pastePosition.top && configItem.style?.top) pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+		const pasteConfig = props_default.setNewItemId(configItem, false);
+		if (pasteConfig.style) {
+			const { left, top } = pasteConfig.style;
+			if (typeof left === "number" || !!left && !isNaN(Number(left))) pasteConfig.style.left = Number(left) + offsetX;
+			if (typeof top === "number" || !!top && !isNaN(Number(top))) pasteConfig.style.top = Number(top) + offsetY;
+			pasteConfig.style = {
+				...pasteConfig.style,
+				...pastePosition
+			};
+		}
+		const root = editor_default.get("root");
+		if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
+		return pasteConfig;
+	});
+};
+/**
+* 将元素粘贴到容器内时，将相对于画布坐标转换为相对于容器的坐标
+* @param position PastePosition 粘贴时相对于画布的坐标
+* @param id 元素id
+* @returns PastePosition 转换后的坐标
+*/
+var getPositionInContainer = (position = {}, id, doc) => {
+	let { left = 0, top = 0 } = position;
+	const stageDoc = editor_default.get("stage")?.renderer?.contentWindow?.document;
+	const parentElRect = (stageDoc && getElById()(stageDoc, `${id}`))?.getBoundingClientRect();
+	left = left - calcValueByFontsize(doc, parentElRect?.left || 0);
+	top = top - calcValueByFontsize(doc, parentElRect?.top || 0);
+	return {
+		left,
+		top
+	};
+};
+var getAddParent = (node) => {
+	const curNode = editor_default.get("node");
+	let parentNode;
+	if (isPage(node)) parentNode = editor_default.get("root");
+	else if (curNode?.items) parentNode = curNode;
+	else if (curNode?.id) parentNode = editor_default.getParentById(curNode.id, false);
+	return parentNode;
+};
+var getDefaultConfig = async (addNode, parentNode) => {
+	const { type, inputEvent, ...config } = addNode;
+	const layout = await editor_default.getLayout(toRaw(parentNode), addNode);
+	const newNode = { ...toRaw(await props_default.getPropsValue(type, config)) };
+	newNode.style = getInitPositionStyle(newNode.style, layout);
+	return newNode;
+};
+//#endregion
+export { beforePaste, getAddParent, getDefaultConfig, getPositionInContainer };