@tmagic/editor 1.7.6 → 1.7.8-beta.1

package/dist/es/services/storage.js

@@ -0,0 +1,127 @@
+import BaseService_default from "./BaseService.js";
+import { getEditorConfig } from "../utils/config.js";
+import serialize from "serialize-javascript";
+//#region packages/editor/src/services/storage.ts
+var Protocol = /* @__PURE__ */ function(Protocol) {
+	Protocol["OBJECT"] = "object";
+	Protocol["JSON"] = "json";
+	Protocol["STRING"] = "string";
+	Protocol["NUMBER"] = "number";
+	Protocol["BOOLEAN"] = "boolean";
+	return Protocol;
+}({});
+var canUsePluginMethods = {
+	async: [],
+	sync: [
+		"getStorage",
+		"getNamespace",
+		"clear",
+		"getItem",
+		"removeItem",
+		"setItem"
+	]
+};
+/**
+* 数据存储服务
+*/
+var WebStorage = class extends BaseService_default {
+	storage = globalThis.localStorage;
+	namespace = "tmagic";
+	constructor() {
+		super(canUsePluginMethods.sync.map((methodName) => ({
+			name: methodName,
+			isAsync: false
+		})));
+	}
+	/**
+	* 获取数据存储对象，可以通过
+	* const storageService = new StorageService();
+	* storageService.usePlugin({
+	*    // 替换存储对象为 sessionStorage
+	*    async afterGetStorage(): Promise<Storage> {
+	*      return window.sessionStorage;
+	*    },
+	* });
+	*/
+	getStorage() {
+		return this.storage;
+	}
+	getNamespace() {
+		return this.namespace;
+	}
+	/**
+	* 清理，支持storageService.usePlugin
+	*/
+	clear() {
+		this.getStorage().clear();
+	}
+	/**
+	* 获取存储项，支持storageService.usePlugin
+	*/
+	getItem(key, options = {}) {
+		const storage = this.getStorage();
+		const namespace = this.getNamespace();
+		const { protocol = options.protocol, item } = this.getValueAndProtocol(storage.getItem(`${options.namespace || namespace}:${key}`));
+		if (item === null) return null;
+		switch (protocol) {
+			case Protocol.OBJECT: return getEditorConfig("parseDSL")(`(${item})`);
+			case Protocol.JSON: return JSON.parse(item);
+			case Protocol.NUMBER: return Number(item);
+			case Protocol.BOOLEAN:
+				if (item === "true") return true;
+				if (item === "false") return false;
+			default: return item;
+		}
+	}
+	/**
+	* 获取指定索引位置的key
+	*/
+	key(index) {
+		return this.getStorage().key(index);
+	}
+	/**
+	* 移除存储项，支持storageService.usePlugin
+	*/
+	removeItem(key, options = {}) {
+		const storage = this.getStorage();
+		const namespace = this.getNamespace();
+		storage.removeItem(`${options.namespace || namespace}:${key}`);
+	}
+	/**
+	* 设置存储项，支持storageService.usePlugin
+	*/
+	setItem(key, value, options = {}) {
+		const storage = this.getStorage();
+		const namespace = this.getNamespace();
+		let item = value;
+		const protocol = options.protocol ? `${options.protocol}:` : "";
+		if (typeof value === Protocol.STRING || typeof value === Protocol.NUMBER) item = `${protocol}${value}`;
+		else item = `${protocol}${serialize(value)}`;
+		storage.setItem(`${options.namespace || namespace}:${key}`, item);
+	}
+	destroy() {
+		this.removeAllListeners();
+		this.removeAllPlugins();
+	}
+	usePlugin(options) {
+		super.usePlugin(options);
+	}
+	getValueAndProtocol(value) {
+		let protocol = "";
+		if (value === null) return {
+			item: value,
+			protocol
+		};
+		const item = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
+			protocol = $1;
+			return $3;
+		});
+		return {
+			protocol,
+			item
+		};
+	}
+};
+var storage_default = new WebStorage();
+//#endregion
+export { Protocol, storage_default as default };

package/dist/es/services/ui.js

@@ -0,0 +1,112 @@
+import BaseService_default from "./BaseService.js";
+import storage_default, { Protocol } from "./storage.js";
+import editor_default from "./editor.js";
+import "../utils/const.js";
+import { convertToNumber } from "@tmagic/utils";
+import { shallowReactive } from "vue";
+//#region packages/editor/src/services/ui.ts
+var state = shallowReactive({
+	uiSelectMode: false,
+	showSrc: false,
+	showStylePanel: true,
+	zoom: 1,
+	stageContainerRect: {
+		width: 0,
+		height: 0
+	},
+	stageRect: {
+		width: 375,
+		height: 817
+	},
+	columnWidth: {
+		left: storage_default.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 310,
+		center: 0,
+		right: storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480
+	},
+	showGuides: true,
+	showRule: true,
+	propsPanelSize: "small",
+	showAddPageButton: true,
+	showPageListButton: true,
+	hideSlideBar: false,
+	sideBarItems: [],
+	navMenuRect: {
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	},
+	frameworkRect: {
+		width: 0,
+		height: 0,
+		left: 0,
+		top: 0
+	}
+});
+var canUsePluginMethods = {
+	async: ["zoom", "calcZoom"],
+	sync: []
+};
+var Ui = class extends BaseService_default {
+	constructor() {
+		super(canUsePluginMethods.async.map((methodName) => ({
+			name: methodName,
+			isAsync: true
+		})));
+	}
+	set(name, value) {
+		const mask = editor_default.get("stage")?.mask;
+		if (name === "stageRect") {
+			this.setStageRect(value);
+			return;
+		}
+		if (name === "showGuides") mask?.showGuides(value);
+		if (name === "showRule") mask?.showRule(value);
+		state[name] = value;
+	}
+	get(name) {
+		return state[name];
+	}
+	async zoom(zoom) {
+		this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
+		if (this.get("zoom") < .1) this.set("zoom", .1);
+	}
+	async calcZoom() {
+		const { stageRect, stageContainerRect } = state;
+		const { height, width } = stageContainerRect;
+		if (!width || !height) return 1;
+		let stageWidth = convertToNumber(stageRect.width, width);
+		let stageHeight = convertToNumber(stageRect.height, height);
+		stageWidth = stageWidth + 30;
+		stageHeight = stageHeight + 30;
+		if (width > stageWidth && height > stageHeight) return 1;
+		return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
+	}
+	resetState() {
+		this.set("showSrc", false);
+		this.set("uiSelectMode", false);
+		this.set("zoom", 1);
+		this.set("stageContainerRect", {
+			width: 0,
+			height: 0
+		});
+	}
+	destroy() {
+		this.resetState();
+		this.removeAllListeners();
+		this.removeAllPlugins();
+	}
+	usePlugin(options) {
+		super.usePlugin(options);
+	}
+	async setStageRect(value) {
+		state.stageRect = {
+			...state.stageRect,
+			...value
+		};
+		state.zoom = await this.calcZoom();
+	}
+};
+var ui_default = new Ui();
+//#endregion
+export { ui_default as default };