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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.14-beta.1",
+  "version": "1.7.14-beta.3",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.14-beta.1",
-    "@tmagic/form": "1.7.14-beta.1",
-    "@tmagic/table": "1.7.14-beta.1",
-    "@tmagic/stage": "1.7.14-beta.1",
-    "@tmagic/utils": "1.7.14-beta.1"
+    "@tmagic/design": "1.7.14-beta.3",
+    "@tmagic/form": "1.7.14-beta.3",
+    "@tmagic/stage": "1.7.14-beta.3",
+    "@tmagic/table": "1.7.14-beta.3",
+    "@tmagic/utils": "1.7.14-beta.3"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -75,8 +75,8 @@
     "monaco-editor": "^0.55.1 ",
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
-    "vue": "^3.5.33",
-    "@tmagic/core": "1.7.14-beta.1"
+    "vue": "^3.5.34",
+    "@tmagic/core": "1.7.14-beta.3"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/ToolButton.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="display"
+    ref="rootEl"
     class="menu-item"
     :class="`${data.type} ${data.className || ''}`"
     @click="clickHandler(data, $event)"
@@ -56,7 +57,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 
 import {
@@ -93,6 +94,9 @@ const props = withDefaults(
 );
 const services = useServices();
 
+const rootElRef = useTemplateRef<HTMLDivElement>('rootEl');
+const getElRef = () => rootElRef;
+
 const disabled = computed(() => {
   if (typeof props.data === 'string') return false;
   if (props.data.type === 'component') return false;
@@ -145,4 +149,6 @@ const mouseupHandler = (item: MenuButton | MenuComponent, event: MouseEvent) =>
     buttonHandler(item, event);
   }
 };
+
+defineExpose({ getElRef });
 </script>

package/src/layouts/CodeEditor.vue

@@ -214,24 +214,32 @@ const setEditorValue = (v: string | any, m: string | any) => {
   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);
-      vsDiffEditor?.focus();
+    // setAutoHeight 内部会在 nextTick 中将 scrollTop 重置为 0，这里也放到 nextTick 中
+    // 利用 Vue nextTick 队列的 FIFO 特性，保证恢复在重置之后执行
+    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);
-    vsEditor?.focus();
+  // setAutoHeight 内部会在 nextTick 中将 scrollTop 重置为 0，这里也放到 nextTick 中
+  // 利用 Vue nextTick 队列的 FIFO 特性，保证恢复在重置之后执行
+  if (viewState) {
+    nextTick(() => {
+      vsEditor?.restoreViewState(viewState);
+      vsEditor?.focus();
+    });
   }
   return result;
 };

package/src/layouts/NavMenu.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }" ref="navMenu">
-    <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
-      <ToolButton :data="item" v-for="(item, index) in buttons[key]" :key="index"></ToolButton>
-    </div>
+    <NavMenuColumn
+      v-for="key in keys"
+      :key="key"
+      :column-key="key"
+      :items="buttons[key]"
+      :width="columnWidth?.[key]"
+    ></NavMenuColumn>
   </div>
 </template>
 
@@ -12,10 +16,11 @@ import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, Z
 
 import { NodeType } from '@tmagic/core';
 
-import ToolButton from '@editor/components/ToolButton.vue';
 import { useServices } from '@editor/hooks/use-services';
 import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem } from '@editor/type';
 
+import NavMenuColumn from './NavMenuColumn.vue';
+
 defineOptions({
   name: 'MEditorNavMenu',
 });

package/src/layouts/NavMenuColumn.vue

@@ -0,0 +1,252 @@
+<template>
+  <div
+    :class="`menu-${columnKey} m-editor-nav-menu-column`"
+    :style="width != null ? `width: ${width}px` : ''"
+    ref="columnEl"
+  >
+    <ToolButton
+      v-for="(item, index) in items"
+      :data="item"
+      :key="`item-${index}`"
+      :class="{ 'm-editor-nav-menu-slot-hidden': hiddenIndexSet.has(index) }"
+      :ref="(comp: any) => setItemRef(comp, index)"
+    ></ToolButton>
+
+    <div
+      class="m-editor-nav-menu-more-wrapper"
+      :class="{ 'm-editor-nav-menu-more-wrapper-hidden': !hasOverflow }"
+      ref="moreWrapperEl"
+    >
+      <TMagicPopover
+        placement="bottom-end"
+        popper-class="m-editor-nav-menu-popover"
+        :width="popoverWidth"
+        :visible="popoverVisible"
+      >
+        <div class="m-editor-nav-menu-overflow-list">
+          <ToolButton v-for="(item, index) in overflowItems" :data="item" :key="`o-${index}`"></ToolButton>
+        </div>
+        <template #reference>
+          <div class="menu-item button m-editor-nav-menu-more" ref="referenceEl" @click="togglePopover">
+            <TMagicButton
+              size="small"
+              text
+              :icon="popoverVisible ? ArrowUp : ArrowDown"
+              :bg="popoverVisible"
+              :type="popoverVisible ? 'primary' : ''"
+            ></TMagicButton>
+          </div>
+        </template>
+      </TMagicPopover>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicPopover } from '@tmagic/design';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+import { MenuButton, MenuComponent } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorNavMenuColumn',
+});
+
+const props = withDefaults(
+  defineProps<{
+    columnKey: string;
+    items: (MenuButton | MenuComponent)[];
+    width?: number;
+    /** 子元素之间的间距，需与 SCSS gap 保持一致 */
+    gap?: number;
+    /** Popover 内容宽度 */
+    popoverWidth?: number;
+  }>(),
+  {
+    items: () => [],
+    gap: 3,
+    popoverWidth: 180,
+  },
+);
+
+const columnEl = useTemplateRef<HTMLDivElement>('columnEl');
+const moreWrapperEl = useTemplateRef<HTMLDivElement>('moreWrapperEl');
+
+const popoverVisible = ref(false);
+const togglePopover = () => {
+  popoverVisible.value = !popoverVisible.value;
+};
+
+const itemInstances = ref<(InstanceType<typeof ToolButton> | null)[]>([]);
+let slotsRO: ResizeObserver | undefined;
+const observedEls = new Set<HTMLElement>();
+
+const setItemRef = (inst: InstanceType<typeof ToolButton> | null, index: number) => {
+  itemInstances.value[index] = inst ?? null;
+};
+
+const itemEls = computed<(HTMLElement | null)[]>(() =>
+  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<Map<number, number>>(new Map());
+const moreWidth = ref(0);
+const containerWidth = ref(0);
+const hiddenIndexSet = ref<Set<number>>(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 = 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);
+
+  // more 按钮位置始终保留，参与"是否放得下"的判断，避免出现时再次挤压
+  const effectiveMoreWidth = moreWidth.value > 0 ? moreWidth.value : 32;
+  const reservedMore = effectiveMoreWidth + (positive > 0 ? props.gap : 0);
+
+  let nextHidden: Set<number> | null = null;
+  if (fullSum + reservedMore <= containerWidth.value + 0.5) {
+    if (hiddenIndexSet.value.size > 0) nextHidden = new Set();
+  } else {
+    const newHidden = new Set<number>();
+    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) {
+    const same =
+      nextHidden.size === hiddenIndexSet.value.size && [...nextHidden].every((v) => hiddenIndexSet.value.has(v));
+    if (!same) 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 = new Map();
+    hiddenIndexSet.value = new Set();
+  },
+  { deep: true },
+);
+
+watch(itemEls, () => {
+  cachedWidths.value = new Map();
+  reobserveSlots();
+  scheduleMeasure();
+});
+
+watch(
+  () => props.width,
+  () => scheduleMeasure(),
+);
+
+let ro: ResizeObserver | undefined;
+
+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 = undefined;
+  observedEls.clear();
+});
+</script>