@tmagic/editor 1.7.13 → 1.7.14-beta.0

package/src/layouts/sidebar/layer/use-drag.ts

@@ -11,6 +11,8 @@ const dragState: {
   dropType: NodeDropType | '';
   container: HTMLElement | null;
   nodeId?: Id;
+  /** canDropIn 返回 Id 时记录的重定向目标 id，handleDragEnd 阶段会改用该 id 对应的节点作为 inner 拖入的父节点 */
+  redirectedTargetId?: Id;
 } = {
   dragOverNodeId: '',
   dropType: '',
@@ -37,12 +39,22 @@ const removeStatusClass = (el: HTMLElement | null) => {
   });
 };
 
+export interface UseDragOptions {
+  /**
+   * 用于判断某个节点是否能被拖动到另一个节点内部
+   * - 返回 `false`：阻止 inner 拖入（before/after 仍然可用）
+   * - 返回 `Id`：将 inner 拖入的目标重定向到该 id 对应的节点
+   * - 其他：按原 targetId 正常拖入
+   */
+  canDropIn?: (sourceIds: Id[], targetId: Id) => Id | boolean | void;
+}
+
 /**
  * dragstart/dragleave/dragend 属于源节点
  * dragover 属于目标节点
  * 这些方法并不是同一个dom事件触发的
  */
-export const useDrag = ({ editorService }: Services) => {
+export const useDrag = ({ editorService }: Services, options: UseDragOptions = {}) => {
   const handleDragStart = (event: DragEvent) => {
     if (!event.dataTransfer || !event.target || !event.currentTarget) return;
 
@@ -102,13 +114,43 @@ export const useDrag = ({ editorService }: Services) => {
       }
     }
 
-    if (distance < targetHeight / 3) {
+    // 通过用户配置的钩子判断当前拖动节点是否允许拖入目标节点内部
+    //   - false：禁止 inner 拖入
+    //   - Id   ：将 inner 拖入的父节点重定向为该 id 对应的节点
+    //   - 其他：按原 targetNodeId 正常拖入
+    let canDropInTarget = isContainer;
+    let redirectedTargetId: Id | undefined;
+    if (canDropInTarget && options.canDropIn && nodeId && targetNodeId !== nodeId) {
+      const result = options.canDropIn([nodeId], targetNodeId);
+      if (result === false) {
+        canDropInTarget = false;
+      } else if (typeof result === 'string' || typeof result === 'number') {
+        redirectedTargetId = result;
+      }
+    }
+
+    // before/after 模式下新节点会成为 target 的兄弟（即 target 的直接父节点的子节点），
+    // 所以应该用 target 的直接父节点 id 再次调用 canDropIn 校验。
+    // 若该父节点禁止拖入（false）或要求重定向（Id），都视为"不应放入此父节点"，
+    // 故对应的 before/after 也禁用——避免绕过 inner 限制。
+    let canDropAsSibling = true;
+    const directParentId = parentsId?.[parentsId.length - 1];
+    if (options.canDropIn && nodeId && directParentId && directParentId !== nodeId) {
+      const siblingResult = options.canDropIn([nodeId], directParentId);
+      if (siblingResult === false || typeof siblingResult === 'string' || typeof siblingResult === 'number') {
+        canDropAsSibling = false;
+      }
+    }
+
+    // 显式重置 dropType，避免上一次 dragover 的残留值影响本次判断
+    dragState.dropType = '';
+    if (distance < targetHeight / 3 && canDropAsSibling) {
       dragState.dropType = 'before';
       addClassName(labelEl, globalThis.document, 'drag-before');
-    } else if (distance > (targetHeight * 2) / 3) {
+    } else if (distance > (targetHeight * 2) / 3 && canDropAsSibling) {
       dragState.dropType = 'after';
       addClassName(labelEl, globalThis.document, 'drag-after');
-    } else if (isContainer) {
+    } else if (canDropInTarget) {
       dragState.dropType = 'inner';
       addClassName(labelEl, globalThis.document, 'drag-inner');
     }
@@ -119,6 +161,8 @@ export const useDrag = ({ editorService }: Services) => {
 
     dragState.dragOverNodeId = targetNodeId;
     dragState.container = event.currentTarget as HTMLElement;
+    // 仅 inner 时才使用重定向，before/after 是相对于 dragOverNodeId 的兄弟插入，重定向无意义
+    dragState.redirectedTargetId = dragState.dropType === 'inner' ? redirectedTargetId : undefined;
 
     event.preventDefault();
   };
@@ -158,8 +202,19 @@ export const useDrag = ({ editorService }: Services) => {
       let targetIndex = -1;
 
       if (Array.isArray(targetNode.items) && dragState.dropType === 'inner') {
-        targetIndex = targetNode.items.length;
-        targetParent = targetNode as MContainer;
+        // 优先使用 canDropIn 返回的重定向 id 对应的节点作为父节点
+        if (dragState.redirectedTargetId !== undefined) {
+          const redirectedNode = editorService.getNodeInfo(dragState.redirectedTargetId, false).node;
+          if (!redirectedNode || !Array.isArray((redirectedNode as MContainer).items)) {
+            // 重定向目标无效或不是容器，放弃此次拖入
+            return;
+          }
+          targetParent = redirectedNode as MContainer;
+          targetIndex = (redirectedNode as MContainer).items!.length;
+        } else {
+          targetIndex = targetNode.items.length;
+          targetParent = targetNode as MContainer;
+        }
       } else {
         targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
       }
@@ -180,6 +235,7 @@ export const useDrag = ({ editorService }: Services) => {
     dragState.dragOverNodeId = '';
     dragState.dropType = '';
     dragState.container = null;
+    dragState.redirectedTargetId = undefined;
   };
 
   return {

package/src/layouts/workspace/Breadcrumb.vue

@@ -1,17 +1,22 @@
 <template>
-  <div v-if="nodes.length === 1" class="m-editor-breadcrumb">
-    <template v-for="(item, index) in path" :key="item.id">
-      <TMagicButton link :disabled="item.id === node?.id" @click="select(item)">{{ item.name }}</TMagicButton
-      ><span v-if="index < path.length - 1">/</span>
+  <div v-if="nodes.length === 1" ref="containerRef" class="m-editor-breadcrumb">
+    <template v-for="(item, index) in displayPath" :key="item.isEllipsis ? `ellipsis-${index}` : item.id">
+      <span v-if="item.isEllipsis" class="m-editor-breadcrumb-ellipsis">...</span>
+      <TMagicTooltip v-else :content="item.name" placement="top" :show-after="500">
+        <TMagicButton class="m-editor-breadcrumb-item" link :disabled="item.id === node?.id" @click="select(item)">{{
+          item.name
+        }}</TMagicButton>
+      </TMagicTooltip>
+      <span v-if="index < displayPath.length - 1" class="m-editor-breadcrumb-separator">/</span>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import type { MNode } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { getNodePath } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
@@ -20,6 +25,8 @@ defineOptions({
   name: 'MEditorBreadcrumb',
 });
 
+type DisplayItem = (MNode & { isEllipsis?: false }) | { isEllipsis: true; id: string; name: string };
+
 const { editorService } = useServices();
 
 const node = computed(() => editorService.get('node'));
@@ -27,6 +34,80 @@ const nodes = computed(() => editorService.get('nodes'));
 const root = computed(() => editorService.get('root'));
 const path = computed(() => getNodePath(node.value?.id || '', root.value?.items || []));
 
+const containerRef = ref<HTMLElement | null>(null);
+// 当面包屑宽度超过父元素宽度的阈值时折叠
+const COLLAPSE_RATIO = 0.8;
+const collapsed = ref(false);
+
+const displayPath = computed<DisplayItem[]>(() => {
+  const list = path.value;
+  // 折叠后视觉元素数（first + ... + last2 = 4 个），所以只有路径 > 3 时折叠才能减少占位
+  if (!collapsed.value || list.length <= 3) {
+    return list as DisplayItem[];
+  }
+  return [
+    list[0],
+    { isEllipsis: true, id: '__ellipsis__', name: '...' },
+    list[list.length - 2],
+    list[list.length - 1],
+  ] as DisplayItem[];
+});
+
+const measureOverflow = async () => {
+  // 先恢复完整渲染再测量，避免折叠后误判
+  if (collapsed.value) {
+    collapsed.value = false;
+    await nextTick();
+  }
+  const el = containerRef.value;
+  const parent = el?.parentElement;
+  if (!el || !parent) return;
+  // scrollWidth 取内容自然宽度（不受自身 max-width 影响），与父容器宽度做比例判断
+  const contentWidth = el.scrollWidth;
+  const parentWidth = parent.clientWidth;
+  if (parentWidth <= 0) return;
+  collapsed.value = contentWidth > parentWidth * COLLAPSE_RATIO;
+};
+
+let resizeObserver: ResizeObserver | null = null;
+
+const observe = () => {
+  resizeObserver?.disconnect();
+  const el = containerRef.value;
+  if (!el || typeof ResizeObserver === 'undefined') return;
+  resizeObserver = new ResizeObserver(() => {
+    measureOverflow();
+  });
+  resizeObserver.observe(el);
+  if (el.parentElement) {
+    resizeObserver.observe(el.parentElement);
+  }
+};
+
+onMounted(() => {
+  observe();
+  measureOverflow();
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+});
+
+watch(
+  () => nodes.value.length,
+  async () => {
+    await nextTick();
+    observe();
+    measureOverflow();
+  },
+);
+
+watch(path, async () => {
+  await nextTick();
+  measureOverflow();
+});
+
 const select = async (node: MNode) => {
   await editorService.select(node);
   editorService.get('stage')?.select(node.id);

package/src/layouts/workspace/Workspace.vue

@@ -9,7 +9,9 @@
         :disabled-stage-overlay="disabledStageOverlay"
         :stage-content-menu="stageContentMenu"
         :custom-content-menu="customContentMenu"
-      ></MagicStage>
+      >
+        <template #stage-top><slot name="stage-top"></slot></template>
+      </MagicStage>
     </slot>
 
     <slot name="workspace-content"></slot>

package/src/layouts/workspace/viewer/Stage.vue

@@ -27,6 +27,10 @@
 
     <NodeListMenu></NodeListMenu>
 
+    <template #before>
+      <slot name="stage-top"></slot>
+    </template>
+
     <template #content>
       <StageOverlay v-if="!disabledStageOverlay"></StageOverlay>
 
@@ -52,7 +56,7 @@ import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useServices } from '@editor/hooks';
 import { useStage } from '@editor/hooks/use-stage';
-import type { CustomContentMenuFunction, MenuButton, MenuComponent, StageOptions } from '@editor/type';
+import type { CustomContentMenuFunction, MenuButton, MenuComponent, StageOptions, StageSlots } from '@editor/type';
 import { DragType, Layout } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
 import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
@@ -65,6 +69,8 @@ defineOptions({
   name: 'MEditorStage',
 });
 
+defineSlots<StageSlots>();
+
 const props = withDefaults(
   defineProps<{
     stageOptions: StageOptions;
@@ -311,12 +317,34 @@ const dropHandler = async (e: DragEvent) => {
   );
 
   let parent: MContainer | undefined | null = page.value;
+  let resolvedParentEl: HTMLElement | null | undefined = parentEl;
   const parentId = getIdFromEl()(parentEl);
   if (parentId) {
     parent = editorService.getNodeById(parentId, false) as MContainer;
   }
 
   if (parent && stageContainerEl.value && stage) {
+    // 通过用户配置的钩子再次确认当前拖入的新组件是否允许放入命中的高亮容器，
+    // 防止 delayedMarkContainer 的延迟/异步未生效或残留高亮导致命中错误容器
+    //   - 返回 false：取消此次拖入
+    //   - 返回 Id  ：将父节点重定向到该 id 对应的节点（layout 坐标也基于其 DOM 重新计算）
+    //   - 其他    ：使用原命中节点
+    // 从组件列表拖入新组件时 sourceIds 为空数组（尚无 id）
+    if (props.stageOptions.canDropIn) {
+      const result = props.stageOptions.canDropIn([], parent.id);
+      if (result === false) {
+        return;
+      }
+      if (typeof result === 'string' || typeof result === 'number') {
+        const redirectedNode = editorService.getNodeById(result, false) as MContainer | undefined;
+        if (!redirectedNode) {
+          return;
+        }
+        parent = redirectedNode;
+        resolvedParentEl = stage.renderer?.getTargetElement(result) ?? null;
+      }
+    }
+
     const layout = await editorService.getLayout(parent);
 
     const containerRect = stageContainerEl.value.getBoundingClientRect();
@@ -336,8 +364,8 @@ const dropHandler = async (e: DragEvent) => {
       top = e.clientY - containerRect.top + scrollTop;
       left = e.clientX - containerRect.left + scrollLeft;
 
-      if (parentEl) {
-        const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+      if (resolvedParentEl) {
+        const { left: parentLeft, top: parentTop } = getOffset(resolvedParentEl);
         left = left - parentLeft * zoom.value;
         top = top - parentTop * zoom.value;
       }

package/src/services/editor.ts

@@ -79,6 +79,7 @@ class Editor extends BaseService {
     pageLength: 0,
     pageFragmentLength: 0,
     disabledMultiSelect: false,
+    alwaysMultiSelect: false,
   });
   private isHistoryStateChange = false;
   private selectionBeforeOp: Id[] | null = null;

package/src/services/props.ts

@@ -93,6 +93,10 @@ class Props extends BaseService {
     this.emit('props-configs-change');
   }
 
+  public getPropsConfigs(): Record<string, FormConfig> {
+    return this.state.propsConfigMap;
+  }
+
   public async fillConfig(config: FormConfig, labelWidth?: string) {
     return fillConfig(config, {
       labelWidth: typeof labelWidth !== 'function' ? labelWidth : '80px',
@@ -117,20 +121,28 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件属性表单配置
    */
-  public async getPropsConfig(type: string): Promise<FormConfig> {
+  public async getPropsConfig(type: string, data?: { node?: MNode | null }): Promise<FormConfig> {
     if (type === 'area') {
-      return await this.getPropsConfig('button');
+      return await this.getPropsConfig('button', data);
     }
 
     return cloneDeep(this.state.propsConfigMap[toLine(type)] || (await this.fillConfig([])));
   }
 
+  public hasPropsConfig(type: string): boolean {
+    return !!this.state.propsConfigMap[toLine(type)];
+  }
+
   public setPropsValues(values: Record<string, Partial<MNode> | PropsFormValueFunction>) {
     Object.keys(values).forEach((type: string) => {
       this.setPropsValue(toLine(type), values[type]);
     });
   }
 
+  public getPropsValues(): Record<string, Partial<MNode>> {
+    return this.state.propsValueMap;
+  }
+
   /**
    * 为指点类型组件设置组件初始值
    * @param type 组件类型
@@ -178,6 +190,10 @@ class Props extends BaseService {
     };
   }
 
+  public hasPropsValue(type: string): boolean {
+    return !!this.state.propsValueMap[toLine(type)];
+  }
+
   public createId(type: string | number): string {
     return `${type}_${guid()}`;
   }

package/src/theme/breadcrumb.scss

@@ -3,4 +3,28 @@
   left: 5px;
   top: 5px;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+
+  .m-editor-breadcrumb-item {
+    max-width: 100px;
+    min-width: 0;
+    overflow: hidden;
+
+    // Element Plus button 内部文本节点
+    > span {
+      display: block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .m-editor-breadcrumb-separator,
+  .m-editor-breadcrumb-ellipsis {
+    margin: 0 4px;
+    flex-shrink: 0;
+  }
 }

package/src/type.ts

@@ -26,6 +26,7 @@ import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage
 import type { ChangeRecord, FormConfig, TableColumnConfig, TypeFunction } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
+  CanDropIn,
   ContainerHighlightType,
   CustomizeMoveableOptions,
   GuidesOptions,
@@ -73,7 +74,17 @@ export interface FrameworkSlots {
   'page-list-popover'(props: { list: (MPage | MPageFragment)[] }): any;
 }
 
-export interface WorkspaceSlots {
+export interface ScrollViewerSlots {
+  before(props: {}): any;
+  content(props: {}): any;
+  default(props: {}): any;
+}
+
+export interface StageSlots extends ScrollViewerSlots {
+  'stage-top'(props: {}): any;
+}
+
+export interface WorkspaceSlots extends StageSlots {
   stage(props: {}): any;
   'workspace-content'(props: {}): any;
 }
@@ -158,10 +169,23 @@ export interface StageOptions {
   moveableOptions?: CustomizeMoveableOptions;
   canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
   isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
+  /**
+   * 画布上拖入组件（包括从组件列表拖入新组件、画布上拖动已有组件）时，
+   * 对已通过 isContainer 命中的候选容器进行二次过滤；返回 false 时阻止该容器被高亮命中
+   * - 在画布上拖动已有组件时：sourceIds 为被拖动组件的 id 列表
+   * - 从组件列表拖入新组件时：sourceIds 为空数组（尚无 id，仅可依据 targetId 判断）
+   * 该选项会被透传给 StageCore 的 canDropIn
+   */
+  canDropIn?: CanDropIn;
   updateDragEl?: UpdateDragEl;
   renderType?: RenderType;
   guidesOptions?: Partial<GuidesOptions>;
   disabledMultiSelect?: boolean;
+  /**
+   * 始终启用多选模式（无需按住 Ctrl/Meta），默认 false。
+   * 当 `disabledMultiSelect` 为 true 时本配置失效。
+   */
+  alwaysMultiSelect?: boolean;
   disabledRule?: boolean;
   zoom?: number;
   /** 画布双击前的钩子函数，返回 false 则阻止默认的双击行为 */
@@ -181,6 +205,8 @@ export interface StoreState {
   pageLength: number;
   pageFragmentLength: number;
   disabledMultiSelect: boolean;
+  /** 是否始终启用多选模式（无需按住 Ctrl/Meta） */
+  alwaysMultiSelect: boolean;
 }
 
 export type StoreStateKey = keyof StoreState;
@@ -669,6 +695,37 @@ export interface TreeNodeData {
   [key: string]: any;
 }
 
+/** 判断组件树节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
+export type IsExpandableFunction = (_data: TreeNodeData, _nodeStatusMap: Map<Id, LayerNodeStatus>) => boolean;
+
+/** canDropIn 的调用场景 */
+export type CanDropInScene =
+  /** 在"已选组件"面板的组件树中拖动节点 */
+  | 'layer'
+  /** 在画布上拖动已有组件（被拖动组件本身已经存在于画布中，sourceIds 包含其 id） */
+  | 'stage-drag'
+  /** 从组件列表拖入新组件到画布（被拖入的组件尚不存在，sourceIds 为空数组） */
+  | 'stage-add';
+
+/**
+ * 判断当前正在拖动的源节点是否可以拖入目标节点内部的函数
+ * @param _sourceIds 当前正在拖动的源节点 id 列表
+ *   - `layer`：被拖动的组件树节点 id（单选时长度为 1）
+ *   - `stage-drag`：被拖动组件的 id 列表（多选拖动时为多个）
+ *   - `stage-add`：始终为空数组（从组件列表新增的组件尚无 id）
+ * @param _targetId 目标容器的节点 id
+ * @param _scene 调用场景：见 {@link CanDropInScene}
+ * @returns
+ *   - `false`：阻止该容器被视为合法拖入目标
+ *     - `layer`：禁用 inner 高亮（before/after 仍然可用）
+ *     - `stage-drag`：阻止该容器被高亮命中
+ *     - `stage-add`：阻止该容器被高亮命中并退化为放入当前页面
+ *   - `Id`（string | number）：将拖入目标重定向到该 id 对应的节点
+ *     （例如把命中的"卡片外壳"节点重定向到其内层"卡片内容"容器节点）
+ *   - 其他（`true` / `void` / `undefined`）：按原 targetId 正常拖入
+ */
+export type CanDropInFunction = (_sourceIds: Id[], _targetId: Id, _scene: CanDropInScene) => Id | boolean | void;
+
 export type AsyncBeforeHook<Value extends Array<string>, C extends Record<Value[number], (...args: any) => any>> = {
   [K in Value[number]]?: (...args: Parameters<C[K]>) => Promise<Parameters<C[K]>> | Parameters<C[K]>;
 };

package/src/utils/tree.ts

@@ -1,7 +1,7 @@
 import type { Id } from '@tmagic/core';
 import { getKeys } from '@tmagic/utils';
 
-import type { LayerNodeStatus } from '@editor/type';
+import type { IsExpandableFunction, LayerNodeStatus } from '@editor/type';
 
 export const updateStatus = (nodeStatusMap: Map<Id, LayerNodeStatus>, id: Id, status: Partial<LayerNodeStatus>) => {
   const nodeStatus = nodeStatusMap.get(id);
@@ -13,3 +13,7 @@ export const updateStatus = (nodeStatusMap: Map<Id, LayerNodeStatus>, id: Id, st
     }
   });
 };
+
+/** 默认的组件树节点是否可展开的判断函数：当节点的子项中至少存在一个可见节点时认为可展开 */
+export const defaultIsExpandable: IsExpandableFunction = (data, nodeStatusMap) =>
+  Array.isArray(data.items) && data.items.some((item) => nodeStatusMap.get(item.id)?.visible);