@tmagic/editor 1.7.7 → 1.7.8-beta.2

package/dist/es/services/events.js

@@ -0,0 +1,64 @@
+import BaseService_default from "./BaseService.js";
+import { toLine } from "@tmagic/utils";
+import { reactive } from "vue";
+import { cloneDeep } from "lodash-es";
+//#region packages/editor/src/services/events.ts
+var canUsePluginMethods = {
+	async: [],
+	sync: [
+		"setEvent",
+		"getEvent",
+		"setMethod",
+		"getMethod"
+	]
+};
+var eventMap = reactive({});
+var methodMap = reactive({});
+var Events = class extends BaseService_default {
+	constructor() {
+		super([...canUsePluginMethods.async.map((methodName) => ({
+			name: methodName,
+			isAsync: true
+		})), ...canUsePluginMethods.sync.map((methodName) => ({
+			name: methodName,
+			isAsync: false
+		}))]);
+	}
+	setEvents(events) {
+		Object.keys(events).forEach((type) => {
+			this.setEvent(toLine(type), events[type] || []);
+		});
+	}
+	setEvent(type, events) {
+		eventMap[toLine(type)] = [...events];
+	}
+	getEvent(type) {
+		return cloneDeep(eventMap[toLine(type)]) || [];
+	}
+	setMethods(methods) {
+		Object.keys(methods).forEach((type) => {
+			this.setMethod(toLine(type), methods[type] || []);
+		});
+	}
+	setMethod(type, method) {
+		methodMap[toLine(type)] = [...method];
+	}
+	getMethod(type, _targetId) {
+		return cloneDeep(methodMap[toLine(type)]) || [];
+	}
+	resetState() {
+		eventMap = reactive({});
+		methodMap = reactive({});
+	}
+	destroy() {
+		this.resetState();
+		this.removeAllListeners();
+		this.removeAllPlugins();
+	}
+	usePlugin(options) {
+		super.usePlugin(options);
+	}
+};
+var events_default = new Events();
+//#endregion
+export { events_default as default };

package/dist/es/services/history.js

@@ -0,0 +1,84 @@
+import BaseService_default from "./BaseService.js";
+import { UndoRedo } from "../utils/undo-redo.js";
+import { reactive } from "vue";
+//#region packages/editor/src/services/history.ts
+var History = class extends BaseService_default {
+	state = reactive({
+		pageSteps: {},
+		pageId: void 0,
+		canRedo: false,
+		canUndo: false
+	});
+	constructor() {
+		super([]);
+		this.on("change", this.setCanUndoRedo);
+	}
+	reset() {
+		this.state.pageSteps = {};
+		this.resetPage();
+	}
+	resetPage() {
+		this.state.pageId = void 0;
+		this.state.canRedo = false;
+		this.state.canUndo = false;
+	}
+	changePage(page) {
+		if (!page) return;
+		this.state.pageId = page.id;
+		if (!this.state.pageSteps[this.state.pageId]) {
+			const undoRedo = new UndoRedo();
+			undoRedo.pushElement({
+				data: page,
+				modifiedNodeIds: /* @__PURE__ */ new Map(),
+				nodeId: page.id
+			});
+			this.state.pageSteps[this.state.pageId] = undoRedo;
+		}
+		this.setCanUndoRedo();
+		this.emit("page-change", this.state.pageSteps[this.state.pageId]);
+	}
+	resetState() {
+		this.state.pageId = void 0;
+		this.state.pageSteps = {};
+		this.state.canRedo = false;
+		this.state.canUndo = false;
+	}
+	push(state) {
+		const undoRedo = this.getUndoRedo();
+		if (!undoRedo) return null;
+		undoRedo.pushElement(state);
+		this.emit("change", state);
+		return state;
+	}
+	undo() {
+		const undoRedo = this.getUndoRedo();
+		if (!undoRedo) return null;
+		const state = undoRedo.undo();
+		this.emit("change", state);
+		return state;
+	}
+	redo() {
+		const undoRedo = this.getUndoRedo();
+		if (!undoRedo) return null;
+		const state = undoRedo.redo();
+		this.emit("change", state);
+		return state;
+	}
+	destroy() {
+		this.resetState();
+		this.removeAllListeners();
+		this.removeAllPlugins();
+	}
+	getUndoRedo() {
+		if (!this.state.pageId) return null;
+		return this.state.pageSteps[this.state.pageId];
+	}
+	setCanUndoRedo() {
+		const undoRedo = this.getUndoRedo();
+		this.state.canRedo = undoRedo?.canRedo() || false;
+		this.state.canUndo = undoRedo?.canUndo() || false;
+	}
+};
+var history_default = new History();
+//#endregion
+export { history_default as default };

package/dist/es/services/keybinding.js

@@ -0,0 +1,182 @@
+import { KeyBindingCommand } from "../type.js";
+import BaseService_default from "./BaseService.js";
+import editor_default from "./editor.js";
+import ui_default from "./ui.js";
+import { isPage, isPageFragment } from "@tmagic/utils";
+import KeyController from "keycon";
+//#region packages/editor/src/services/keybinding.ts
+var Keybinding = class extends BaseService_default {
+	ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "meta" : "ctrl";
+	controllers = /* @__PURE__ */ new Map();
+	bindingList = [];
+	commands = {
+		[KeyBindingCommand.DELETE_NODE]: () => {
+			const nodes = editor_default.get("nodes");
+			if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
+			editor_default.remove(nodes);
+		},
+		[KeyBindingCommand.COPY_NODE]: () => {
+			const nodes = editor_default.get("nodes");
+			nodes && editor_default.copy(nodes);
+		},
+		[KeyBindingCommand.CUT_NODE]: () => {
+			const nodes = editor_default.get("nodes");
+			if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
+			editor_default.copy(nodes);
+			editor_default.remove(nodes);
+		},
+		[KeyBindingCommand.PASTE_NODE]: () => {
+			editor_default.get("nodes") && editor_default.paste({
+				offsetX: 10,
+				offsetY: 10
+			});
+		},
+		[KeyBindingCommand.UNDO]: () => {
+			editor_default.undo();
+		},
+		[KeyBindingCommand.REDO]: () => {
+			editor_default.redo();
+		},
+		[KeyBindingCommand.ZOOM_IN]: () => {
+			ui_default.zoom(.1);
+		},
+		[KeyBindingCommand.ZOOM_OUT]: () => {
+			ui_default.zoom(-.1);
+		},
+		[KeyBindingCommand.ZOOM_RESET]: () => {
+			ui_default.set("zoom", 1);
+		},
+		[KeyBindingCommand.ZOOM_FIT]: async () => {
+			ui_default.set("zoom", await ui_default.calcZoom());
+		},
+		[KeyBindingCommand.MOVE_UP_1]: () => {
+			editor_default.move(0, -1);
+		},
+		[KeyBindingCommand.MOVE_DOWN_1]: () => {
+			editor_default.move(0, 1);
+		},
+		[KeyBindingCommand.MOVE_LEFT_1]: () => {
+			editor_default.move(-1, 0);
+		},
+		[KeyBindingCommand.MOVE_RIGHT_1]: () => {
+			editor_default.move(1, 0);
+		},
+		[KeyBindingCommand.MOVE_UP_10]: () => {
+			editor_default.move(0, -10);
+		},
+		[KeyBindingCommand.MOVE_DOWN_10]: () => {
+			editor_default.move(0, 10);
+		},
+		[KeyBindingCommand.MOVE_LEFT_10]: () => {
+			editor_default.move(-10, 0);
+		},
+		[KeyBindingCommand.MOVE_RIGHT_10]: () => {
+			editor_default.move(10, 0);
+		},
+		[KeyBindingCommand.SWITCH_NODE]: () => {
+			editor_default.selectNextNode();
+		}
+	};
+	registerCommand(command, handler) {
+		this.commands[command] = handler;
+	}
+	/**
+	* @deprecated
+	*/
+	registeCommand(command, handler) {
+		this.registerCommand(command, handler);
+	}
+	unregisterCommand(command) {
+		delete this.commands[command];
+	}
+	/**
+	* @deprecated
+	*/
+	unregisteCommand(command) {
+		this.unregisterCommand(command);
+	}
+	registerEl(name, el) {
+		if (name !== "global" && !el) throw new Error("只有name为global可以不传el");
+		const keycon = new KeyController(el);
+		this.controllers.set(name, keycon);
+		this.bind(name);
+	}
+	/**
+	* @deprecated
+	*/
+	registeEl(name, el) {
+		this.registerEl(name, el);
+	}
+	unregisterEl(name) {
+		this.controllers.get(name)?.destroy();
+		this.controllers.delete(name);
+		this.bindingList.forEach((item) => {
+			item.bound = false;
+		});
+	}
+	/**
+	* @deprecated
+	*/
+	unregisteEl(name) {
+		this.unregisterEl(name);
+	}
+	register(maps) {
+		for (const keybindingItem of maps) {
+			const { command, keybinding, when } = keybindingItem;
+			for (const [type = "", eventType = "keydown"] of when) {
+				const cacheItem = {
+					type,
+					command,
+					keybinding,
+					eventType,
+					bound: false
+				};
+				if (this.bindingList.find((item) => item.command === command && item.eventType === eventType && item.type === type && item.keybinding === keybinding)) continue;
+				this.bindingList.push(cacheItem);
+			}
+		}
+		this.bind();
+	}
+	/**
+	* @deprecated
+	*/
+	registe(map) {
+		this.register(map);
+	}
+	reset() {
+		this.controllers.forEach((keycon) => {
+			keycon.destroy();
+		});
+		this.controllers.clear();
+		this.bindingList = [];
+	}
+	destroy() {
+		this.reset();
+	}
+	bind(name) {
+		for (const item of this.bindingList) {
+			const { type, eventType, command, keybinding, bound } = item;
+			if (name && name !== type) continue;
+			if (bound) continue;
+			const keycon = this.controllers.get(type);
+			if (!keycon) continue;
+			const handler = (e) => {
+				e.inputEvent.preventDefault();
+				this.commands[command]?.(e.inputEvent);
+			};
+			this.getKeyconKeys(keybinding).forEach((keys) => {
+				if (keys[0]) keycon[eventType](keys, handler);
+				else keycon[eventType](handler);
+			});
+			item.bound = true;
+		}
+	}
+	getKeyconKeys(keybinding = "") {
+		const splitKey = (key) => key.split("+").map((k) => k === "ctrl" ? this.ctrlKey : k);
+		if (Array.isArray(keybinding)) return keybinding.map((key) => splitKey(key));
+		return [splitKey(keybinding)];
+	}
+};
+var keybinding_default = new Keybinding();
+//#endregion
+export { keybinding_default as default };

package/dist/es/services/props.js

@@ -0,0 +1,216 @@
+import BaseService_default from "./BaseService.js";
+import { fillConfig } from "../utils/props.js";
+import editor_default from "./editor.js";
+import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from "@tmagic/utils";
+import { Target, Watcher } from "@tmagic/core";
+import { reactive } from "vue";
+import { cloneDeep, mergeWith } from "lodash-es";
+//#region packages/editor/src/services/props.ts
+var canUsePluginMethods = {
+	async: [
+		"setPropsConfig",
+		"getPropsConfig",
+		"setPropsValue",
+		"getPropsValue",
+		"fillConfig",
+		"getDefaultPropsValue"
+	],
+	sync: ["createId", "setNewItemId"]
+};
+var Props = class extends BaseService_default {
+	state = reactive({
+		propsConfigMap: {},
+		propsValueMap: {},
+		relateIdMap: {},
+		disabledDataSource: false,
+		disabledCodeBlock: false
+	});
+	constructor() {
+		super([...canUsePluginMethods.async.map((methodName) => ({
+			name: methodName,
+			isAsync: true
+		})), ...canUsePluginMethods.sync.map((methodName) => ({
+			name: methodName,
+			isAsync: false
+		}))]);
+	}
+	setDisabledDataSource(disabled) {
+		this.state.disabledDataSource = disabled;
+	}
+	setDisabledCodeBlock(disabled) {
+		this.state.disabledCodeBlock = disabled;
+	}
+	getDisabledDataSource() {
+		return this.state.disabledDataSource;
+	}
+	getDisabledCodeBlock() {
+		return this.state.disabledCodeBlock;
+	}
+	setPropsConfigs(configs) {
+		Object.keys(configs).forEach((type) => {
+			this.setPropsConfig(toLine(type), configs[type]);
+		});
+		this.emit("props-configs-change");
+	}
+	async fillConfig(config, labelWidth) {
+		return fillConfig(config, {
+			labelWidth: typeof labelWidth !== "function" ? labelWidth : "80px",
+			disabledDataSource: this.getDisabledDataSource(),
+			disabledCodeBlock: this.getDisabledCodeBlock()
+		});
+	}
+	async setPropsConfig(type, config) {
+		let c;
+		if (typeof config === "function") c = config({ editorService: editor_default });
+		else c = config;
+		this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(c) ? c : [c]);
+	}
+	/**
+	* 获取指点类型的组件属性表单配置
+	* @param type 组件类型
+	* @returns 组件属性表单配置
+	*/
+	async getPropsConfig(type) {
+		if (type === "area") return await this.getPropsConfig("button");
+		return cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
+	}
+	setPropsValues(values) {
+		Object.keys(values).forEach((type) => {
+			this.setPropsValue(toLine(type), values[type]);
+		});
+	}
+	/**
+	* 为指点类型组件设置组件初始值
+	* @param type 组件类型
+	* @param value 组件初始值
+	*/
+	async setPropsValue(type, value) {
+		let v = value;
+		if (typeof value === "function") v = value({ editorService: editor_default });
+		this.state.propsValueMap[toLine(type)] = v;
+	}
+	/**
+	* 获取指定类型的组件初始值
+	* @param type 组件类型
+	* @returns 组件初始值
+	*/
+	async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
+		const type = toLine(componentType);
+		if (type === "area") {
+			const value = await this.getPropsValue("button");
+			value.className = "action-area";
+			value.text = "";
+			if (value.style) value.style.backgroundColor = "rgba(255, 255, 255, 0)";
+			return value;
+		}
+		const id = this.createId(type);
+		const defaultPropsValue = this.getDefaultPropsValue(type);
+		const data = this.setNewItemId(cloneDeep({
+			type,
+			...defaultValue
+		}));
+		return {
+			id,
+			...defaultPropsValue,
+			...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
+		};
+	}
+	createId(type) {
+		return `${type}_${guid()}`;
+	}
+	/**
+	* 将组件与组件的子元素配置中的id都设置成一个新的ID
+	* 如果没有相同ID并且force为false则保持不变
+	* @param {Object} config 组件配置
+	* @param {Boolean} force 是否强制设置新的ID
+	*/
+	setNewItemId(config, force = true) {
+		if (force || editor_default.getNodeById(config.id)) {
+			const newId = this.createId(config.type || "component");
+			this.setRelateId(config.id, newId);
+			config.id = newId;
+		}
+		if (config.items && Array.isArray(config.items)) for (const item of config.items) this.setNewItemId(item);
+		return config;
+	}
+	/**
+	* 获取默认属性配置
+	* @param type 组件类型
+	* @returns Object
+	*/
+	getDefaultPropsValue(type) {
+		return ["page", "container"].includes(type) ? {
+			type,
+			layout: "absolute",
+			style: {},
+			name: type,
+			items: []
+		} : {
+			type,
+			style: {},
+			name: type
+		};
+	}
+	resetState() {
+		this.state.propsConfigMap = {};
+		this.state.propsValueMap = {};
+	}
+	/**
+	* 替换关联ID
+	* @param originConfigs 原组件配置
+	* @param targetConfigs 待替换的组件配置
+	*/
+	replaceRelateId(originConfigs, targetConfigs, collectorOptions) {
+		const relateIdMap = this.getRelateIdMap();
+		if (Object.keys(relateIdMap).length === 0) return;
+		const target = new Target({ ...collectorOptions });
+		const coperWatcher = new Watcher();
+		coperWatcher.addTarget(target);
+		coperWatcher.collect(originConfigs, {}, true, collectorOptions.type);
+		originConfigs.forEach((config) => {
+			const newId = relateIdMap[config.id];
+			const path = getNodePath(newId, targetConfigs);
+			const targetConfig = path[path.length - 1];
+			if (!targetConfig) return;
+			target.deps[config.id]?.keys?.forEach((fullKey) => {
+				const relateTargetId = relateIdMap[getValueByKeyPath(fullKey, config)];
+				if (!relateTargetId) return;
+				setValueByKeyPath(fullKey, relateTargetId, targetConfig);
+			});
+			if (config.items && Array.isArray(config.items)) this.replaceRelateId(config.items, targetConfigs, collectorOptions);
+		});
+	}
+	/**
+	* 清除setNewItemId前后映射关系
+	*/
+	clearRelateId() {
+		this.state.relateIdMap = {};
+	}
+	destroy() {
+		this.resetState();
+		this.removeAllListeners();
+		this.removeAllPlugins();
+	}
+	usePlugin(options) {
+		super.usePlugin(options);
+	}
+	/**
+	* 获取setNewItemId前后映射关系
+	* @param oldId 原组件ID
+	* @returns 新旧ID映射
+	*/
+	getRelateIdMap() {
+		return this.state.relateIdMap;
+	}
+	/**
+	* 记录setNewItemId前后映射关系
+	* @param oldId 原组件ID
+	* @param newId 分配的新ID
+	*/
+	setRelateId(oldId, newId) {
+		this.state.relateIdMap[oldId] = newId;
+	}
+};
+var props_default = new Props();
+//#endregion
+export { props_default as default };

package/dist/es/services/stageOverlay.js

@@ -0,0 +1,161 @@
+import BaseService_default from "./BaseService.js";
+import editor_default from "./editor.js";
+import { useStage } from "../hooks/use-stage.js";
+import { getIdFromEl } from "@tmagic/utils";
+import { shallowReactive } from "vue";
+//#region packages/editor/src/services/stageOverlay.ts
+var canUsePluginMethods = {
+	async: [],
+	sync: [
+		"openOverlay",
+		"closeOverlay",
+		"updateOverlay",
+		"createStage"
+	]
+};
+var StageOverlay = class extends BaseService_default {
+	state = shallowReactive({
+		wrapDiv: document.createElement("div"),
+		sourceEl: null,
+		contentEl: null,
+		stage: null,
+		stageOptions: null,
+		wrapWidth: 0,
+		wrapHeight: 0,
+		stageOverlayVisible: false
+	});
+	constructor() {
+		super(canUsePluginMethods.sync.map((methodName) => ({
+			name: methodName,
+			isAsync: false
+		})));
+		this.get("wrapDiv").classList.add("tmagic-editor-sub-stage-wrap");
+	}
+	get(name) {
+		return this.state[name];
+	}
+	set(name, value) {
+		this.state[name] = value;
+	}
+	openOverlay(el) {
+		const stageOptions = this.get("stageOptions");
+		if (!el || !stageOptions) return;
+		this.set("sourceEl", el);
+		this.createContentEl();
+		this.set("stageOverlayVisible", true);
+		editor_default.on("update", this.updateHandler);
+		editor_default.on("add", this.addHandler);
+		editor_default.on("remove", this.removeHandler);
+		editor_default.on("drag-to", this.updateHandler);
+		editor_default.on("move-layer", this.updateHandler);
+	}
+	closeOverlay() {
+		this.set("stageOverlayVisible", false);
+		const subStage = this.get("stage");
+		const wrapDiv = this.get("wrapDiv");
+		subStage?.destroy();
+		for (let i = 0, l = wrapDiv.children.length; i < l; i++) wrapDiv.children[i].remove();
+		wrapDiv.remove();
+		this.set("stage", null);
+		this.set("sourceEl", null);
+		this.set("contentEl", null);
+		editor_default.off("update", this.updateHandler);
+		editor_default.off("add", this.addHandler);
+		editor_default.off("remove", this.removeHandler);
+		editor_default.off("drag-to", this.updateHandler);
+		editor_default.off("move-layer", this.updateHandler);
+	}
+	updateOverlay() {
+		const sourceEl = this.get("sourceEl");
+		if (!sourceEl) return;
+		const { scrollWidth, scrollHeight } = sourceEl;
+		this.set("wrapWidth", scrollWidth);
+		this.set("wrapHeight", scrollHeight);
+	}
+	createStage(stageOptions = {}) {
+		return useStage({
+			...stageOptions,
+			runtimeUrl: "",
+			autoScrollIntoView: false,
+			disabledRule: true,
+			render: async (stage) => {
+				this.copyDocumentElement();
+				const rootEls = stage.renderer?.getDocument()?.body.children;
+				if (rootEls) Array.from(rootEls).forEach((element) => {
+					if (["SCRIPT", "STYLE"].includes(element.tagName)) return;
+					element.remove();
+				});
+				const wrapDiv = this.get("wrapDiv");
+				await this.render();
+				return wrapDiv;
+			}
+		});
+	}
+	usePlugin(options) {
+		super.usePlugin(options);
+	}
+	createContentEl() {
+		const sourceEl = this.get("sourceEl");
+		if (!sourceEl) return;
+		const contentEl = sourceEl.cloneNode(true);
+		this.set("contentEl", contentEl);
+		contentEl.style.position = "static";
+		contentEl.style.overflow = "visible";
+	}
+	copyDocumentElement() {
+		const subStage = this.get("stage");
+		const stage = editor_default.get("stage");
+		const doc = subStage?.renderer?.getDocument();
+		const documentElement = stage?.renderer?.getDocument()?.documentElement;
+		if (doc && documentElement) doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
+	}
+	async render() {
+		this.createContentEl();
+		const contentEl = this.get("contentEl");
+		const sourceEl = this.get("sourceEl");
+		const wrapDiv = this.get("wrapDiv");
+		const subStage = this.get("stage");
+		const stageOptions = this.get("stageOptions");
+		if (!contentEl) return;
+		wrapDiv.style.cssText = `
+      width: ${sourceEl?.scrollWidth}px;
+      height: ${sourceEl?.scrollHeight}px;
+      background-color: #fff;
+    `;
+		for (let i = 0, l = wrapDiv.children.length; i < l; i++) wrapDiv.children[i].remove();
+		wrapDiv.appendChild(contentEl);
+		setTimeout(() => {
+			subStage?.renderer?.contentWindow?.magic.onPageElUpdate(wrapDiv);
+		});
+		if (await stageOptions?.canSelect?.(contentEl)) {
+			const id = getIdFromEl()(contentEl);
+			id && subStage?.select(id);
+		}
+	}
+	updateHandler = () => {
+		setTimeout(() => {
+			this.render();
+			this.updateOverlay();
+			this.updateSelectStatus();
+		});
+	};
+	addHandler = () => {
+		this.render();
+		this.updateOverlay();
+		this.updateSelectStatus();
+	};
+	removeHandler = () => {
+		this.render();
+		this.updateOverlay();
+		this.updateSelectStatus();
+	};
+	updateSelectStatus() {
+		const subStage = this.get("stage");
+		const nodes = editor_default.get("nodes");
+		if (nodes.length > 1) subStage?.multiSelect(nodes.map((n) => n.id));
+		else subStage?.select(nodes[0].id);
+	}
+};
+var stageOverlay_default = new StageOverlay();
+//#endregion
+export { stageOverlay_default as default };