@tmagic/editor 1.7.14-beta.1 → 1.7.14-beta.2

package/dist/es/components/ToolButton.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useServices } from "../hooks/use-services.js";
 import Icon_default from "./Icon.js";
 import { TMagicButton, TMagicDivider, TMagicDropdown, TMagicDropdownItem, TMagicDropdownMenu, TMagicIcon, TMagicTooltip } from "@tmagic/design";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, resolveDynamicComponent, toDisplayString, toHandlers, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, resolveDynamicComponent, toDisplayString, toHandlers, unref, useTemplateRef, withCtx } from "vue";
 import { ArrowDown } from "@element-plus/icons-vue";
 //#region packages/editor/src/components/ToolButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -19,9 +19,11 @@ var ToolButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		}) },
 		eventType: { default: "click" }
 	},
-	setup(__props) {
+	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const services = useServices();
+		const rootElRef = useTemplateRef("rootEl");
+		const getElRef = () => rootElRef;
 		const disabled = computed(() => {
 			if (typeof props.data === "string") return false;
 			if (props.data.type === "component") return false;
@@ -53,9 +55,11 @@ var ToolButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			if (props.eventType !== "mouseup") return;
 			if (item.type === "button" && event.button === 0) buttonHandler(item, event);
 		};
+		__expose({ getElRef });
 		return (_ctx, _cache) => {
 			return display.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
+				ref: "rootEl",
 				class: normalizeClass(["menu-item", `${__props.data.type} ${__props.data.className || ""}`]),
 				onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(__props.data, $event)),
 				onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(__props.data, $event)),

package/dist/es/layouts/CodeEditor.vue_vue_type_script_setup_true_lang.js

@@ -124,23 +124,23 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			if (props.type === "diff") {
 				const originalModel = monaco.editor.createModel(values.value, "text/javascript");
 				const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
-				const position = vsDiffEditor?.getPosition();
+				const viewState = vsDiffEditor?.saveViewState();
 				const result = vsDiffEditor?.setModel({
 					original: originalModel,
 					modified: modifiedModel
 				});
-				if (position) {
-					vsDiffEditor?.setPosition(position);
+				if (viewState) nextTick(() => {
+					vsDiffEditor?.restoreViewState(viewState);
 					vsDiffEditor?.focus();
-				}
+				});
 				return result;
 			}
-			const position = vsEditor?.getPosition();
+			const viewState = vsEditor?.saveViewState();
 			const result = vsEditor?.setValue(values.value);
-			if (position) {
-				vsEditor?.setPosition(position);
+			if (viewState) nextTick(() => {
+				vsEditor?.restoreViewState(viewState);
 				vsEditor?.focus();
-			}
+			});
 			return result;
 		};
 		const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";

package/dist/es/layouts/NavMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { ColumnLayout } from "../type.js";
 import { useServices } from "../hooks/use-services.js";
-import ToolButton_default from "../components/ToolButton.js";
+import NavMenuColumn_default from "./NavMenuColumn.js";
 import { NodeType } from "@tmagic/core";
-import { Fragment, computed, createBlock, createElementBlock, defineComponent, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, unref, useTemplateRef } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, markRaw, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, unref, useTemplateRef } from "vue";
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/NavMenu.vue?vue&type=script&setup=true&lang.ts
 var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -165,16 +165,16 @@ var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				style: normalizeStyle({ height: `${__props.height}px` }),
 				ref: "navMenu"
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(keys), (key) => {
-				return openBlock(), createElementBlock("div", {
-					class: normalizeClass(`menu-${key}`),
+				return openBlock(), createBlock(NavMenuColumn_default, {
 					key,
-					style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-					return openBlock(), createBlock(ToolButton_default, {
-						data: item,
-						key: index
-					}, null, 8, ["data"]);
-				}), 128))], 6);
+					"column-key": key,
+					items: buttons.value[key],
+					width: columnWidth.value?.[key]
+				}, null, 8, [
+					"column-key",
+					"items",
+					"width"
+				]);
 			}), 128))], 4);
 		};
 	}

package/dist/es/layouts/NavMenuColumn.js

@@ -0,0 +1,5 @@
+import NavMenuColumn_vue_vue_type_script_setup_true_lang_default from "./NavMenuColumn.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/NavMenuColumn.vue
+var NavMenuColumn_default = NavMenuColumn_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { NavMenuColumn_default as default };

package/dist/es/layouts/NavMenuColumn.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,201 @@
+import ToolButton_default from "../components/ToolButton.js";
+import { TMagicButton, TMagicPopover } from "@tmagic/design";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, useTemplateRef, watch, withCtx } from "vue";
+import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/NavMenuColumn.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-editor-nav-menu-overflow-list" };
+var NavMenuColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorNavMenuColumn",
+	__name: "NavMenuColumn",
+	props: {
+		columnKey: {},
+		items: { default: () => [] },
+		width: {},
+		gap: { default: 3 },
+		popoverWidth: { default: 180 }
+	},
+	setup(__props) {
+		const props = __props;
+		const columnEl = useTemplateRef("columnEl");
+		const moreWrapperEl = useTemplateRef("moreWrapperEl");
+		const popoverVisible = ref(false);
+		const togglePopover = () => {
+			popoverVisible.value = !popoverVisible.value;
+		};
+		const itemInstances = ref([]);
+		let slotsRO;
+		const observedEls = /* @__PURE__ */ new Set();
+		const setItemRef = (inst, index) => {
+			itemInstances.value[index] = inst ?? null;
+		};
+		const itemEls = computed(() => itemInstances.value.map((inst) => inst?.getElRef?.().value ?? null));
+		const reobserveSlots = () => {
+			if (!slotsRO) return;
+			for (const el of observedEls) slotsRO.unobserve(el);
+			observedEls.clear();
+			for (const el of itemEls.value) if (el) {
+				slotsRO.observe(el);
+				observedEls.add(el);
+			}
+		};
+		const cachedWidths = ref(/* @__PURE__ */ new Map());
+		const moreWidth = ref(0);
+		const containerWidth = ref(0);
+		const hiddenIndexSet = ref(/* @__PURE__ */ new Set());
+		const hasOverflow = computed(() => hiddenIndexSet.value.size > 0);
+		const overflowItems = computed(() => props.items.filter((_, index) => hiddenIndexSet.value.has(index)));
+		const measureAndCompute = () => {
+			if (!columnEl.value) return;
+			containerWidth.value = columnEl.value.clientWidth;
+			const els = itemEls.value;
+			for (let i = 0; i < props.items.length; i++) {
+				const el = els[i];
+				if (!el) {
+					cachedWidths.value.delete(i);
+					continue;
+				}
+				const w = el.getBoundingClientRect().width;
+				if (w > 0) cachedWidths.value.set(i, w);
+				else cachedWidths.value.delete(i);
+			}
+			if (moreWrapperEl.value) {
+				const w = moreWrapperEl.value.getBoundingClientRect().width;
+				if (w > 0) moreWidth.value = w;
+			}
+			const total = props.items.length;
+			if (total === 0 || containerWidth.value <= 0) {
+				if (hiddenIndexSet.value.size > 0) hiddenIndexSet.value = /* @__PURE__ */ new Set();
+				return;
+			}
+			let fullSum = 0;
+			let positive = 0;
+			for (let i = 0; i < total; i++) {
+				const w = cachedWidths.value.get(i) ?? 0;
+				if (w > 0) {
+					fullSum += w;
+					positive += 1;
+				}
+			}
+			fullSum += props.gap * Math.max(0, positive - 1);
+			const effectiveMoreWidth = moreWidth.value > 0 ? moreWidth.value : 32;
+			const reservedMore = effectiveMoreWidth + (positive > 0 ? props.gap : 0);
+			let nextHidden = null;
+			if (fullSum + reservedMore <= containerWidth.value + .5) {
+				if (hiddenIndexSet.value.size > 0) nextHidden = /* @__PURE__ */ new Set();
+			} else {
+				const newHidden = /* @__PURE__ */ new Set();
+				let used = effectiveMoreWidth;
+				let cutoff = -1;
+				for (let i = 0; i < total; i++) {
+					const w = cachedWidths.value.get(i) ?? 0;
+					if (w === 0) continue;
+					const need = props.gap + w;
+					if (used + need > containerWidth.value) {
+						cutoff = i;
+						break;
+					}
+					used += need;
+				}
+				if (cutoff >= 0) for (let j = cutoff; j < total; j++) newHidden.add(j);
+				nextHidden = newHidden;
+			}
+			if (nextHidden) {
+				if (!(nextHidden.size === hiddenIndexSet.value.size && [...nextHidden].every((v) => hiddenIndexSet.value.has(v)))) hiddenIndexSet.value = nextHidden;
+			}
+		};
+		let raf = 0;
+		const scheduleMeasure = () => {
+			if (raf) cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(() => {
+				raf = 0;
+				measureAndCompute();
+				if (hasOverflow.value && moreWidth.value === 0) raf = requestAnimationFrame(() => {
+					raf = 0;
+					measureAndCompute();
+				});
+			});
+		};
+		watch(hasOverflow, (value) => {
+			if (!value) popoverVisible.value = false;
+		});
+		watch(() => props.items, () => {
+			cachedWidths.value = /* @__PURE__ */ new Map();
+			hiddenIndexSet.value = /* @__PURE__ */ new Set();
+		}, { deep: true });
+		watch(itemEls, () => {
+			cachedWidths.value = /* @__PURE__ */ new Map();
+			reobserveSlots();
+			scheduleMeasure();
+		});
+		watch(() => props.width, () => scheduleMeasure());
+		let ro;
+		onMounted(() => {
+			if (typeof ResizeObserver !== "undefined") {
+				if (columnEl.value) {
+					ro = new ResizeObserver(() => scheduleMeasure());
+					ro.observe(columnEl.value);
+				}
+				slotsRO = new ResizeObserver(() => scheduleMeasure());
+				reobserveSlots();
+			}
+			scheduleMeasure();
+		});
+		onBeforeUnmount(() => {
+			if (raf) cancelAnimationFrame(raf);
+			ro?.disconnect();
+			slotsRO?.disconnect();
+			slotsRO = void 0;
+			observedEls.clear();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(`menu-${__props.columnKey} m-editor-nav-menu-column`),
+				style: normalizeStyle(__props.width != null ? `width: ${__props.width}px` : ""),
+				ref_key: "columnEl",
+				ref: columnEl
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createBlock(ToolButton_default, {
+					data: item,
+					key: `item-${index}`,
+					class: normalizeClass({ "m-editor-nav-menu-slot-hidden": hiddenIndexSet.value.has(index) }),
+					ref_for: true,
+					ref: (comp) => setItemRef(comp, index)
+				}, null, 8, ["data", "class"]);
+			}), 128)), createElementVNode("div", {
+				class: normalizeClass(["m-editor-nav-menu-more-wrapper", { "m-editor-nav-menu-more-wrapper-hidden": !hasOverflow.value }]),
+				ref_key: "moreWrapperEl",
+				ref: moreWrapperEl
+			}, [createVNode(unref(TMagicPopover), {
+				placement: "bottom-end",
+				"popper-class": "m-editor-nav-menu-popover",
+				width: __props.popoverWidth,
+				visible: popoverVisible.value
+			}, {
+				reference: withCtx(() => [createElementVNode("div", {
+					class: "menu-item button m-editor-nav-menu-more",
+					ref: "referenceEl",
+					onClick: togglePopover
+				}, [createVNode(unref(TMagicButton), {
+					size: "small",
+					text: "",
+					icon: popoverVisible.value ? unref(ArrowUp) : unref(ArrowDown),
+					bg: popoverVisible.value,
+					type: popoverVisible.value ? "primary" : ""
+				}, null, 8, [
+					"icon",
+					"bg",
+					"type"
+				])], 512)]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(overflowItems.value, (item, index) => {
+					return openBlock(), createBlock(ToolButton_default, {
+						data: item,
+						key: `o-${index}`
+					}, null, 8, ["data"]);
+				}), 128))])]),
+				_: 1
+			}, 8, ["width", "visible"])], 2)], 6);
+		};
+	}
+});
+//#endregion
+export { NavMenuColumn_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/services/storage.js

@@ -64,10 +64,10 @@ var WebStorage = class extends BaseService_default {
 		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:
+			case "object": return getEditorConfig("parseDSL")(`(${item})`);
+			case "json": return JSON.parse(item);
+			case "number": return Number(item);
+			case "boolean":
 				if (item === "true") return true;
 				if (item === "false") return false;
 			default: return item;
@@ -95,7 +95,7 @@ var WebStorage = class extends BaseService_default {
 		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}`;
+		if (typeof value === "string" || typeof value === "number") item = `${protocol}${value}`;
 		else item = `${protocol}${serialize(value)}`;
 		storage.setItem(`${options.namespace || namespace}:${key}`, item);
 	}

package/dist/es/style.css

@@ -477,6 +477,10 @@ fieldset.m-fieldset .m-form-tip {
   height: 100%;
   z-index: 1;
   align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  position: relative;
+  min-width: 0;
 }
 .m-editor-nav-menu .menu-center {
   justify-content: center;
@@ -484,8 +488,29 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-nav-menu .menu-right {
   justify-content: flex-end;
 }
+.m-editor-nav-menu .m-editor-nav-menu-slot-hidden {
+  position: absolute;
+  left: -99999px;
+  top: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.m-editor-nav-menu .m-editor-nav-menu-more-wrapper {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.m-editor-nav-menu .m-editor-nav-menu-more-wrapper.m-editor-nav-menu-more-wrapper-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+.m-editor-nav-menu .m-editor-nav-menu-more {
+  flex: 0 0 auto;
+}
 .m-editor-nav-menu .menu-item {
   flex-direction: row;
+  flex: 0 0 auto;
   -webkit-box-align: center;
   align-items: center;
   vertical-align: middle;
@@ -499,6 +524,7 @@ fieldset.m-fieldset .m-form-tip {
   transition: all 0.3s ease 0s;
   border-bottom: 2px solid transparent;
   margin: 0;
+  white-space: nowrap;
 }
 .m-editor-nav-menu .menu-item .is-disabled {
   opacity: 0.5;
@@ -518,6 +544,7 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-editor-nav-menu .menu-item .menu-item-text {
   color: #313a40;
+  white-space: nowrap;
 }
 .m-editor-nav-menu .menu-item.rule .el-icon {
   transform: rotate(-90deg);
@@ -527,6 +554,30 @@ fieldset.m-fieldset .m-form-tip {
   padding-right: 1px;
 }
 
+.m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 0;
+}
+.m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item.divider {
+  padding: 0;
+  cursor: default;
+}
+.m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item.divider:hover {
+  background-color: transparent;
+}
+
 .m-editor {
   display: flex;
   flex-direction: column;

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

@@ -9,97 +9,97 @@ var keybinding_config_default = [
 	{
 		command: KeyBindingCommand.DELETE_NODE,
 		keybinding: ["delete", "backspace"],
-		when: [[KeyBindingContainerKey.STAGE, "keyup"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+		when: [["stage", "keyup"], ["layer-panel", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.COPY_NODE,
 		keybinding: "ctrl+c",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+		when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.PASTE_NODE,
 		keybinding: "ctrl+v",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+		when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.CUT_NODE,
 		keybinding: "ctrl+x",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+		when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.UNDO,
 		keybinding: "ctrl+z",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+		when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.REDO,
 		keybinding: "ctrl+shift+z",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+		when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.MOVE_UP_1,
 		keybinding: "up",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.MOVE_DOWN_1,
 		keybinding: "down",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.MOVE_LEFT_1,
 		keybinding: "left",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.MOVE_RIGHT_1,
 		keybinding: "right",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.MOVE_UP_10,
 		keybinding: "ctrl+up",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.MOVE_DOWN_10,
 		keybinding: "ctrl+down",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.MOVE_LEFT_10,
 		keybinding: "ctrl+left",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.MOVE_RIGHT_10,
 		keybinding: "ctrl+right",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.SWITCH_NODE,
 		keybinding: "tab",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+		when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.ZOOM_IN,
 		keybinding: ["ctrl+=", "ctrl+numpadplus"],
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.ZOOM_OUT,
 		keybinding: ["ctrl+-", "ctrl+numpad-"],
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.ZOOM_FIT,
 		keybinding: "ctrl+0",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	},
 	{
 		command: KeyBindingCommand.ZOOM_RESET,
 		keybinding: "ctrl+1",
-		when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+		when: [["stage", "keydown"]]
 	}
 ];
 //#endregion

package/dist/style.css

@@ -477,6 +477,10 @@ fieldset.m-fieldset .m-form-tip {
   height: 100%;
   z-index: 1;
   align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  position: relative;
+  min-width: 0;
 }
 .m-editor-nav-menu .menu-center {
   justify-content: center;
@@ -484,8 +488,29 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-nav-menu .menu-right {
   justify-content: flex-end;
 }
+.m-editor-nav-menu .m-editor-nav-menu-slot-hidden {
+  position: absolute;
+  left: -99999px;
+  top: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.m-editor-nav-menu .m-editor-nav-menu-more-wrapper {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.m-editor-nav-menu .m-editor-nav-menu-more-wrapper.m-editor-nav-menu-more-wrapper-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+.m-editor-nav-menu .m-editor-nav-menu-more {
+  flex: 0 0 auto;
+}
 .m-editor-nav-menu .menu-item {
   flex-direction: row;
+  flex: 0 0 auto;
   -webkit-box-align: center;
   align-items: center;
   vertical-align: middle;
@@ -499,6 +524,7 @@ fieldset.m-fieldset .m-form-tip {
   transition: all 0.3s ease 0s;
   border-bottom: 2px solid transparent;
   margin: 0;
+  white-space: nowrap;
 }
 .m-editor-nav-menu .menu-item .is-disabled {
   opacity: 0.5;
@@ -518,6 +544,7 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-editor-nav-menu .menu-item .menu-item-text {
   color: #313a40;
+  white-space: nowrap;
 }
 .m-editor-nav-menu .menu-item.rule .el-icon {
   transform: rotate(-90deg);
@@ -527,6 +554,30 @@ fieldset.m-fieldset .m-form-tip {
   padding-right: 1px;
 }
 
+.m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 0;
+}
+.m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item.divider {
+  padding: 0;
+  cursor: default;
+}
+.m-editor-nav-menu-popover .m-editor-nav-menu-overflow-list .menu-item.divider:hover {
+  background-color: transparent;
+}
+
 .m-editor {
   display: flex;
   flex-direction: column;