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

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/fields/StyleSetter/Index.vue

@@ -74,7 +74,11 @@ const collapseValue = shallowRef(
 
 const change = (v: any, eventData: ContainerChangeEventData) => {
   eventData.changeRecords?.forEach((record) => {
-    record.propPath = `${props.name}.${record.propPath}`;
+    if (props.prop) {
+      record.propPath = `${props.prop}.${record.propPath}`;
+    } else if (props.name) {
+      record.propPath = `${props.name}.${record.propPath}`;
+    }
   });
   emit('change', v, eventData);
 };

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>

package/src/theme/nav-menu.scss

@@ -22,6 +22,10 @@
     height: 100%;
     z-index: 1;
     align-items: center;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    position: relative;
+    min-width: 0;
   }
 
   .menu-center {
@@ -32,8 +36,33 @@
     justify-content: flex-end;
   }
 
+  .m-editor-nav-menu-slot-hidden {
+    position: absolute;
+    left: -99999px;
+    top: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .m-editor-nav-menu-more-wrapper {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    &.m-editor-nav-menu-more-wrapper-hidden {
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  .m-editor-nav-menu-more {
+    flex: 0 0 auto;
+  }
+
   .menu-item {
     flex-direction: row;
+    flex: 0 0 auto;
     -webkit-box-align: center;
     align-items: center;
     vertical-align: middle;
@@ -47,6 +76,7 @@
     transition: all 0.3s ease 0s;
     border-bottom: 2px solid transparent;
     margin: 0;
+    white-space: nowrap;
 
     .is-disabled {
       opacity: 0.5;
@@ -70,6 +100,7 @@
 
     .menu-item-text {
       color: $nav-color;
+      white-space: nowrap;
     }
 
     &.rule {
@@ -84,3 +115,33 @@
     }
   }
 }
+
+.m-editor-nav-menu-popover {
+  .m-editor-nav-menu-overflow-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 4px 0;
+
+    .menu-item {
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      cursor: pointer;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      &.divider {
+        padding: 0;
+        cursor: default;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}

package/src/type.ts

@@ -143,6 +143,7 @@ export interface EditorInstallOptions {
   [key: string]: any;
 }
 
+// #region Services
 export interface Services {
   editorService: EditorService;
   historyService: HistoryService;
@@ -157,6 +158,7 @@ export interface Services {
   keybindingService: KeybindingService;
   stageOverlayService: StageOverlayService;
 }
+// #endregion Services
 
 export interface StageOptions {
   runtimeUrl?: string;
@@ -236,11 +238,13 @@ export interface ComponentGroupState {
   list: ComponentGroup[];
 }
 
+// #region ColumnLayout
 export enum ColumnLayout {
   LEFT = 'left',
   CENTER = 'center',
   RIGHT = 'right',
 }
+// #endregion ColumnLayout
 
 export interface SetColumnWidth {
   [ColumnLayout.LEFT]?: number;
@@ -309,11 +313,13 @@ export interface UiState {
   };
 }
 
+// #region EditorNodeInfo
 export interface EditorNodeInfo {
   node: MNode | null;
   parent: MContainer | null;
   page: MPage | MPageFragment | null;
 }
+// #endregion EditorNodeInfo
 
 export interface AddMNode {
   type: string;
@@ -322,6 +328,7 @@ export interface AddMNode {
   [key: string]: any;
 }
 
+// #region PastePosition
 export interface PastePosition {
   left?: number;
   top?: number;
@@ -334,7 +341,9 @@ export interface PastePosition {
    */
   offsetY?: number;
 }
+// #endregion PastePosition
 
+// #region MenuButton
 /**
  * 菜单按钮
  */
@@ -367,7 +376,9 @@ export interface MenuButton {
   /** 唯一标识，用于高亮 */
   id?: string | number;
 }
+// #endregion MenuButton
 
+// #region MenuComponent
 export interface MenuComponent {
   type: 'component';
   /** Vue3组件 */
@@ -382,6 +393,7 @@ export interface MenuComponent {
   display?: boolean | ((data: Services) => Promise<boolean> | boolean);
   [key: string]: any;
 }
+// #endregion MenuComponent
 
 /**
  * '/': 分隔符
@@ -396,6 +408,7 @@ export interface MenuComponent {
  * 'scale-to-original': 缩放到实际大小
  * 'scale-to-fit': 缩放以适应
  */
+// #region MenuItem
 export type MenuItem =
   | '/'
   | 'delete'
@@ -411,7 +424,9 @@ export type MenuItem =
   | MenuButton
   | MenuComponent
   | string;
+// #endregion MenuItem
 
+// #region MenuBarData
 /** 工具栏 */
 export interface MenuBarData {
   /** 顶部工具栏左边项 */
@@ -421,7 +436,9 @@ export interface MenuBarData {
   /** 顶部工具栏右边项 */
   [ColumnLayout.RIGHT]?: MenuItem[];
 }
+// #endregion MenuBarData
 
+// #region SideComponent
 export interface SideComponent extends MenuComponent {
   /** 显示文案 */
   text: string;
@@ -444,21 +461,27 @@ export interface SideComponent extends MenuComponent {
     props?: Record<string, any>;
   };
 }
+// #endregion SideComponent
 
+// #region SideItemKey
 export enum SideItemKey {
   COMPONENT_LIST = 'component-list',
   LAYER = 'layer',
   CODE_BLOCK = 'code-block',
   DATA_SOURCE = 'data-source',
 }
+// #endregion SideItemKey
 
+// #region SideItem
 /**
  * component-list: 组件列表
  * layer: 已选组件树
  * code-block: 代码块
  */
 export type SideItem = `${SideItemKey}` | SideComponent;
+// #endregion SideItem
 
+// #region SideBarData
 /** 工具栏 */
 export interface SideBarData {
   /** 容器类型 */
@@ -468,7 +491,9 @@ export interface SideBarData {
   /** panel列表 */
   items: SideItem[];
 }
+// #endregion SideBarData
 
+// #region ComponentItem
 export interface ComponentItem {
   /** 显示文案 */
   text: string;
@@ -483,19 +508,23 @@ export interface ComponentItem {
     [key: string]: any;
   };
 }
+// #endregion ComponentItem
 
+// #region ComponentGroup
 export interface ComponentGroup {
   /** 显示文案 */
   title: string;
   /** 组内列表 */
   items: ComponentItem[];
 }
+// #endregion ComponentGroup
 
 export enum LayerOffset {
   TOP = 'top',
   BOTTOM = 'bottom',
 }
 
+// #region Layout
 /** 容器布局 */
 export enum Layout {
   FLEX = 'flex',
@@ -503,6 +532,7 @@ export enum Layout {
   RELATIVE = 'relative',
   ABSOLUTE = 'absolute',
 }
+// #endregion Layout
 
 export enum Keys {
   ESCAPE = 'Space',
@@ -575,8 +605,11 @@ export interface CodeParamStatement {
   [key: string]: any;
 }
 
+// #region HistoryOpType
 export type HistoryOpType = 'add' | 'remove' | 'update';
+// #endregion HistoryOpType
 
+// #region StepValue
 export interface StepValue {
   /** 页面信息 */
   data: { name: string; id: Id };
@@ -597,6 +630,7 @@ export interface StepValue {
   /** opType 'update': 变更前后的节点快照 */
   updatedItems?: { oldNode: MNode; newNode: MNode }[];
 }
+// #endregion StepValue
 
 export interface HistoryState {
   pageId?: Id;
@@ -660,6 +694,7 @@ export interface KeyBindingCacheItem {
   bound: boolean;
 }
 
+// #region DatasourceTypeOption
 /** 可新增的数据源类型选项 */
 export interface DatasourceTypeOption {
   /** 数据源类型 */
@@ -667,6 +702,7 @@ export interface DatasourceTypeOption {
   /** 数据源名称 */
   text: string;
 }
+// #endregion DatasourceTypeOption
 
 /** 组件树节点状态 */
 export interface LayerNodeStatus {
@@ -688,12 +724,14 @@ export enum DragType {
   LAYER_TREE = 'layer-tree',
 }
 
+// #region TreeNodeData
 export interface TreeNodeData {
   id: Id;
   name?: string;
   items?: TreeNodeData[];
   [key: string]: any;
 }
+// #endregion TreeNodeData
 
 /** 判断组件树节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
 export type IsExpandableFunction = (_data: TreeNodeData, _nodeStatusMap: Map<Id, LayerNodeStatus>) => boolean;
@@ -775,9 +813,12 @@ export interface EventBus extends EventEmitter {
   emit<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, ...args: Param): boolean;
 }
 
+// #region PropsFormConfigFunction
 export type PropsFormConfigFunction = (data: { editorService: EditorService }) => FormConfig;
+// #endregion PropsFormConfigFunction
 export type PropsFormValueFunction = (data: { editorService: EditorService }) => Partial<MNode>;
 
+// #region PageBarSortOptions
 export type PartSortableOptions = Omit<Options, 'onStart' | 'onUpdate'>;
 export interface PageBarSortOptions extends PartSortableOptions {
   /** 在onUpdate之后调用 */
@@ -785,6 +826,7 @@ export interface PageBarSortOptions extends PartSortableOptions {
   /** 在onStart之前调用 */
   beforeStart?: (event: SortableEvent, sortable: Sortable) => void | Promise<void>;
 }
+// #endregion PageBarSortOptions
 
 export type CustomContentMenuFunction = (
   menus: (MenuButton | MenuComponent)[],