@tmagic/editor 1.1.0-beta.6 → 1.1.0-beta.9

package/src/services/editor.ts

@@ -32,14 +32,16 @@ import {
   change2Fixed,
   COPY_STORAGE_KEY,
   Fixed2Other,
+  fixNodePosition,
   getInitPositionStyle,
   getNodeIndex,
   isFixed,
   setLayout,
 } from '../utils/editor';
-import { beforeAdd, beforePaste, beforeRemove, notifyAddToStage } from '../utils/operator';
+import { beforePaste, getAddParent } from '../utils/operator';
 
 import BaseService from './BaseService';
+import propsService from './props';
 
 class Editor extends BaseService {
   public state: StoreState = reactive({
@@ -60,12 +62,16 @@ class Editor extends BaseService {
       [
         'getLayout',
         'select',
+        'doAdd',
         'add',
+        'doRemove',
         'remove',
+        'doUpdate',
         'update',
         'sort',
         'copy',
         'paste',
+        'duAlignCenter',
         'alignCenter',
         'moveLayer',
         'moveToContainer',
@@ -281,34 +287,30 @@ class Editor extends BaseService {
     this.set('nodes', nodes);
   }
 
-  /**
-   * 批量向容器添加节点
-   * @param configs 将要添加的节点数组
-   * @returns 添加后的节点
-   */
-  public async multiAdd(configs: MNode[]): Promise<MNode[]> {
+  public async doAdd(node: MNode, parent: MContainer): Promise<MNode> {
+    const root = this.get<MApp>('root');
+    const curNode = this.get<MNode>('node');
     const stage = this.get<StageCore | null>('stage');
-    const newNodes: MNode[] = await Promise.all(
-      configs.map(async (configItem: MNode): Promise<MNode> => {
-        // 新增元素到配置
-        const { parentNode, newNode, layout } = await beforeAdd(configItem as AddMNode);
-        // 将新增元素事件通知到stage以更新渲染
-        await notifyAddToStage(parentNode, newNode, layout);
-        return newNode;
-      }),
-    );
-    const newNodeIds: Id[] = newNodes.map((node) => node.id);
 
-    // 增加历史记录 多选不可能选中page
-    this.addModifiedNodeId(newNodeIds.join('-'));
-    this.pushHistoryState();
+    if ((parent?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
+      throw new Error('app下不能添加组件');
+    }
 
-    // 触发选中样式
-    stage?.multiSelect(newNodeIds);
+    const layout = await this.getLayout(toRaw(parent), node as MNode);
+    node.style = getInitPositionStyle(node.style, layout);
 
-    this.emit('multiAdd', newNodes);
+    await stage?.add({ config: cloneDeep(node), parent: cloneDeep(parent), root: cloneDeep(root) });
 
-    return newNodes;
+    node.style = fixNodePosition(node, parent, stage);
+
+    await stage?.update({ config: cloneDeep(node), root: cloneDeep(root) });
+
+    // 新增节点添加到配置中
+    parent?.items?.push(node);
+
+    this.addModifiedNodeId(node.id);
+
+    return node;
   }
 
   /**
@@ -317,30 +319,89 @@ class Editor extends BaseService {
    * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
    * @returns 添加后的节点
    */
-  public async add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode> {
+  public async add(addNode: AddMNode | MNode[], parent?: MContainer | null): Promise<MNode | MNode[]> {
     const stage = this.get<StageCore | null>('stage');
-    // 新增元素到配置
-    const { parentNode, newNode, layout, isPage } = await beforeAdd(addNode, parent);
-    // 将新增元素事件通知到stage以更新渲染
-    await notifyAddToStage(parentNode, newNode, layout);
-    // 更新编辑器选中元素
-    await this.select(newNode);
-    // 增加历史记录
-    this.addModifiedNodeId(newNode.id);
-    if (!isPage) {
-      this.pushHistoryState();
+
+    const parentNode = parent && typeof parent !== 'function' ? parent : getAddParent(addNode);
+    if (!parentNode) throw new Error('未找到父元素');
+
+    // 新增多个组件只存在于粘贴多个组件,粘贴的是一个完整的config,所以不再需要getPropsValue
+    const addNodes = [];
+    if (!Array.isArray(addNode)) {
+      const { type, inputEvent, ...config } = addNode;
+
+      if (!type) throw new Error('组件类型不能为空');
+
+      addNodes.push({ ...toRaw(await propsService.getPropsValue(type, config)) });
+    } else {
+      addNodes.push(...addNode);
     }
 
-    if (isPage) {
-      this.state.pageLength += 1;
+    const newNodes = await Promise.all(addNodes.map((node) => this.doAdd(node, parentNode)));
+
+    if (newNodes.length > 1) {
+      const newNodeIds = newNodes.map((node) => node.id);
+      // 触发选中样式
+      stage?.multiSelect(newNodeIds);
+      await this.multiSelect(newNodeIds);
     } else {
-      // 新增页面，这个时候页面还有渲染出来，此时select会出错，在runtime-ready的时候回去select
-      stage?.select(newNode.id);
+      await this.select(newNodes[0]);
+
+      if (isPage(newNodes[0])) {
+        this.state.pageLength += 1;
+      } else {
+        // 新增页面，这个时候页面还有渲染出来，此时select会出错，在runtime-ready的时候回去select
+        stage?.select(newNodes[0].id);
+      }
     }
 
-    this.emit('add', newNode);
+    this.pushHistoryState();
 
-    return newNode;
+    this.emit('add', newNodes);
+
+    return newNodes.length > 1 ? newNodes[0] : newNodes;
+  }
+
+  public async doRemove(node: MNode): Promise<void> {
+    const root = this.get<MApp | null>('root');
+
+    if (!root) throw new Error('没有root');
+
+    const { parent, node: curNode } = this.getNodeInfo(node.id);
+
+    if (!parent || !curNode) throw new Error('找不要删除的节点');
+
+    const index = getNodeIndex(curNode, parent);
+
+    if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
+
+    parent.items?.splice(index, 1);
+    const stage = this.get<StageCore | null>('stage');
+    stage?.remove({ id: node.id, root: this.get('root') });
+
+    if (node.type === NodeType.PAGE) {
+      this.state.pageLength -= 1;
+
+      if (root.items[0]) {
+        await this.select(root.items[0]);
+        stage?.select(root.items[0].id);
+      } else {
+        this.set('node', null);
+        this.set('parent', null);
+        this.set('page', null);
+        this.set('stage', null);
+        this.set('highlightNode', null);
+        this.resetModifiedNodeId();
+        historyService.reset();
+
+        return;
+      }
+    } else {
+      await this.select(parent);
+      stage?.select(parent.id);
+    }
+
+    this.addModifiedNodeId(parent.id);
   }
 
   /**
@@ -348,50 +409,18 @@ class Editor extends BaseService {
    * @param {Object} node
    * @return {Object} 删除的组件配置
    */
-  public async remove(nodeOrNodeList: MNode | MNode[]): Promise<MNode | MNode[]> {
-    if (Array.isArray(nodeOrNodeList)) {
-      // 多选批量删除
-      const nodes = nodeOrNodeList;
-      return this.multiRemove(nodes);
-    }
-    const node = nodeOrNodeList;
-    const removeParent = await beforeRemove(node);
-    // 删除的是页面
-    if (!removeParent) return node;
-    // 更新历史记录
-    this.addModifiedNodeId(removeParent.id);
-    this.pushHistoryState();
+  public async remove(nodeOrNodeList: MNode | MNode[]): Promise<void> {
+    const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
 
-    this.emit('remove', node);
+    await Promise.all(nodes.map((node) => this.doRemove(node)));
 
-    return node;
-  }
-
-  /**
-   * 批量删除
-   * @param nodes 批量删除的节点
-   * @returns 批量删除的节点
-   */
-  public async multiRemove(nodes: MNode[]): Promise<MNode[]> {
-    await Promise.all(
-      nodes.map(async (removeNode) => {
-        await beforeRemove(removeNode);
-      }),
-    );
-    const nodeIds = nodes.map((node) => node.id);
-    this.addModifiedNodeId(nodeIds.join('-'));
+    // 更新历史记录
     this.pushHistoryState();
 
-    this.emit('multiRemove', nodes);
-    return nodes;
+    this.emit('remove');
   }
 
-  /**
-   * 更新节点
-   * @param config 新的节点配置，配置中需要有id信息
-   * @returns 更新后的节点配置
-   */
-  public async update(config: MNode): Promise<MNode> {
+  public async doUpdate(config: MNode) {
     if (!config?.id) throw new Error('没有配置或者配置缺少id值');
 
     const info = this.getNodeInfo(config.id, false);
@@ -444,11 +473,25 @@ class Editor extends BaseService {
     }
 
     this.addModifiedNodeId(newConfig.id);
+
+    return newConfig;
+  }
+
+  /**
+   * 更新节点
+   * @param config 新的节点配置，配置中需要有id信息
+   * @returns 更新后的节点配置
+   */
+  public async update(config: MNode | MNode[]): Promise<MNode | MNode[]> {
+    const nodes = Array.isArray(config) ? config : [config];
+
+    const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
+
     this.pushHistoryState();
 
-    this.emit('update', newConfig);
+    this.emit('update', newNodes);
 
-    return newConfig;
+    return newNodes.length > 1 ? newNodes[0] : newNodes;
   }
 
   /**
@@ -492,30 +535,28 @@ class Editor extends BaseService {
    * @param position 粘贴的坐标
    * @returns 添加后的组件节点配置
    */
-  public async paste(position: PastePosition = {}): Promise<MNode[] | void> {
-    const config = await storageService.getItem(COPY_STORAGE_KEY);
+  public async paste(position: PastePosition = {}): Promise<MNode | MNode[] | void> {
+    const config: MNode[] = await storageService.getItem(COPY_STORAGE_KEY);
 
-    if (!config) return;
+    if (!Array.isArray(config)) return;
 
     const pasteConfigs = await beforePaste(position, config);
 
-    return await this.multiAdd(pasteConfigs);
+    return this.add(pasteConfigs);
   }
 
-  /**
-   * 将指点节点设置居中
-   * @param config 组件节点配置
-   * @returns 当前组件节点配置
-   */
-  public async alignCenter(config: MNode): Promise<MNode | void> {
-    const parent = this.get<MContainer>('parent');
-    const node = this.get<MNode>('node');
-    const layout = await this.getLayout(toRaw(parent), toRaw(node));
+  public async doAlignCenter(config: MNode): Promise<MNode> {
+    const parent = this.getParentById(config.id);
+
+    if (!parent) throw new Error('找不到父节点');
+
+    const node = cloneDeep(toRaw(config));
+    const layout = await this.getLayout(parent, node);
     if (layout === Layout.RELATIVE) {
-      return;
+      return config;
     }
 
-    if (!node.style) return;
+    if (!node.style) return config;
 
     const stage = this.get<StageCore>('stage');
     const doc = stage?.renderer.contentWindow?.document;
@@ -530,15 +571,25 @@ class Editor extends BaseService {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
 
-    await this.update(node);
-    this.get<StageCore | null>('stage')?.update({
-      config: cloneDeep(toRaw(node)),
-      root: cloneDeep(this.get<MApp>('root')),
-    });
-    this.addModifiedNodeId(config.id);
-    this.pushHistoryState();
+    return node;
+  }
 
-    return config;
+  /**
+   * 将指点节点设置居中
+   * @param config 组件节点配置
+   * @returns 当前组件节点配置
+   */
+  public async alignCenter(config: MNode | MNode[]): Promise<MNode | MNode[]> {
+    const nodes = Array.isArray(config) ? config : [config];
+    const stage = this.get<StageCore | null>('stage');
+
+    const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
+
+    const newNode = await this.update(newNodes);
+
+    await stage?.multiSelect(newNodes.map((node) => node.id));
+
+    return newNode;
   }
 
   /**
@@ -590,7 +641,7 @@ class Editor extends BaseService {
           return srcValue;
         }
       });
-      newConfig.style = getInitPositionStyle(newConfig.style, layout, target, stage);
+      newConfig.style = getInitPositionStyle(newConfig.style, layout);
 
       target.items.push(newConfig);
 
@@ -633,7 +684,7 @@ class Editor extends BaseService {
     const node = toRaw(this.get('node'));
     if (!node || isPage(node)) return;
 
-    const { style, id } = node;
+    const { style, id, type } = node;
     if (!style || style.position !== 'absolute') return;
 
     if (top && !isNumber(style.top)) return;
@@ -641,6 +692,7 @@ class Editor extends BaseService {
 
     this.update({
       id,
+      type,
       style: {
         ...style,
         left: Number(style.left) + left,

package/src/theme/component-list-panel.scss

@@ -86,6 +86,11 @@
         }
       }
 
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+
       span {
         font-size: 12px;
         text-align: center;

package/src/type.ts

@@ -21,7 +21,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { MoveableOptions } from '@tmagic/stage';
+import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
@@ -53,6 +53,7 @@ export interface StageOptions {
   autoScrollIntoView: boolean;
   containerHighlightClassName: string;
   containerHighlightDuration: number;
+  containerHighlightType: ContainerHighlightType;
   render: () => HTMLDivElement;
   moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;

package/src/utils/editor.ts

@@ -88,10 +88,10 @@ export const getRelativeStyle = (style: Record<string, any> = {}): Record<string
   left: 0,
 });
 
-const getMiddleTop = (style: Record<string, any> = {}, parentNode: MNode, stage: StageCore) => {
-  let height = style.height || 0;
+const getMiddleTop = (node: MNode, parentNode: MNode, stage: StageCore | null) => {
+  let height = node.style?.height || 0;
 
-  if (!stage || typeof style.top !== 'undefined' || !parentNode.style) return style.top;
+  if (!stage || typeof node.style?.top !== 'undefined' || !parentNode.style) return node.style?.top;
 
   if (!isNumber(height)) {
     height = 0;
@@ -103,20 +103,15 @@ const getMiddleTop = (style: Record<string, any> = {}, parentNode: MNode, stage:
     const { scrollTop = 0, wrapperHeight } = stage.mask;
     return (wrapperHeight - height) / 2 + scrollTop;
   }
+
   return (parentHeight - height) / 2;
 };
 
-export const getInitPositionStyle = (
-  style: Record<string, any> = {},
-  layout: Layout,
-  parentNode: MNode,
-  stage: StageCore,
-) => {
+export const getInitPositionStyle = (style: Record<string, any> = {}, layout: Layout) => {
   if (layout === Layout.ABSOLUTE) {
     return {
       ...style,
       position: 'absolute',
-      top: getMiddleTop(style, parentNode, stage),
     };
   }
 
@@ -230,3 +225,15 @@ export const fixNodeLeft = (config: MNode, parent: MContainer, doc?: Document) =
 
   return config.style.left;
 };
+
+export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageCore | null) => {
+  if (config.style?.position !== 'absolute') {
+    return config.style;
+  }
+
+  return {
+    ...(config.style || {}),
+    top: getMiddleTop(config, parent, stage),
+    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document),
+  };
+};

package/src/utils/operator.ts

@@ -1,15 +1,14 @@
 import { toRaw } from 'vue';
-import { cloneDeep, isEmpty } from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 
-import { Id, MApp, MContainer, MNode, NodeType } from '@tmagic/schema';
+import { Id, MApp, MContainer, MNode } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { isPage } from '@tmagic/utils';
 
 import editorService from '../services/editor';
-import historyService from '../services/history';
 import propsService from '../services/props';
-import { AddMNode, Layout, PastePosition } from '../type';
-import { fixNodeLeft, generatePageNameByApp, getInitPositionStyle, getNodeIndex } from '../utils/editor';
+import { AddMNode, PastePosition } from '../type';
+import { generatePageNameByApp, getInitPositionStyle } from '../utils/editor';
 
 /**
  * 粘贴前置操作：返回分配了新id以及校准了坐标的配置
@@ -17,7 +16,7 @@ import { fixNodeLeft, generatePageNameByApp, getInitPositionStyle, getNodeIndex
  * @param config 待粘贴的元素配置(复制时保存的那份配置)
  * @returns
  */
-export const beforePaste = async (position: PastePosition, config: MNode[]) => {
+export const beforePaste = async (position: PastePosition, config: MNode[]): Promise<MNode[]> => {
   if (!config[0]?.style) return config;
   const curNode = editorService.get<MContainer>('node');
   // 将数组中第一个元素的坐标作为参照点
@@ -69,54 +68,6 @@ export const beforePaste = async (position: PastePosition, config: MNode[]) => {
   return pasteConfigs;
 };
 
-/**
- * 新增元素前置操作，实现了在编辑器中新增元素节点，并返回新增元素信息以供stage更新
- * @param addNode 待添加元素的配置
- * @param parent 父级容器（可选）
- * @returns 新增的元素，父级元素，布局方式，是否为根页面
- */
-export const beforeAdd = async (
-  addNode: AddMNode,
-  parent?: MContainer | null,
-): Promise<{ parentNode: MContainer; newNode: MNode; layout: Layout; isPage: boolean }> => {
-  // 加入inputEvent是为给业务扩展时可以获取到更多的信息，只有在使用拖拽添加组件时才有改对象
-  const { type, inputEvent, ...config } = addNode;
-  const curNode = editorService.get<MContainer>('node');
-
-  let parentNode: MContainer | undefined;
-  const isPage = type === NodeType.PAGE;
-
-  if (isPage) {
-    parentNode = editorService.get<MApp>('root');
-    // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
-  } else if (parent && typeof parent !== 'function') {
-    parentNode = parent;
-  } else if (curNode.items) {
-    parentNode = curNode;
-  } else {
-    parentNode = editorService.getParentById(curNode.id, false);
-  }
-
-  if (!parentNode) throw new Error('未找到父元素');
-
-  const layout = await editorService.getLayout(toRaw(parentNode), addNode as MNode);
-  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
-  newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, editorService.get<StageCore>('stage'));
-
-  if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
-    throw new Error('app下不能添加组件');
-  }
-  // 新增节点添加到配置中
-  parentNode?.items?.push(newNode);
-  // 返回新增信息以供stage更新
-  return {
-    parentNode,
-    newNode,
-    layout,
-    isPage,
-  };
-};
-
 /**
  * 将元素粘贴到容器内时，将相对于画布坐标转换为相对于容器的坐标
  * @param position PastePosition 粘贴时相对于画布的坐标
@@ -135,76 +86,24 @@ export const getPositionInContainer = (position: PastePosition = {}, id: Id) =>
   };
 };
 
-/**
- * 将新增元素事件通知到stage以更新渲染
- * @param parentNode 父元素
- * @param newNode 当前新增元素
- * @param layout 布局方式
- */
-export const notifyAddToStage = async (parentNode: MContainer, newNode: MNode, layout: Layout) => {
-  const stage = editorService.get<StageCore | null>('stage');
-  const root = editorService.get<MApp>('root');
-
-  await stage?.add({ config: cloneDeep(newNode), parent: cloneDeep(parentNode), root: cloneDeep(root) });
+export const getAddParent = (addNode: AddMNode | MNode[]) => {
+  const curNode = editorService.get<MContainer>('node');
 
-  if (layout === Layout.ABSOLUTE) {
-    const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
-    if (typeof fixedLeft !== 'undefined' && newNode.style) {
-      newNode.style.left = fixedLeft;
-      await stage?.update({ config: cloneDeep(newNode), root: cloneDeep(root) });
-    }
+  let parentNode;
+  if (!Array.isArray(addNode) && isPage(addNode as MNode)) {
+    parentNode = editorService.get<MApp>('root');
+  } else if (curNode.items) {
+    parentNode = curNode;
+  } else {
+    parentNode = editorService.getParentById(curNode.id, false);
   }
+  return parentNode;
 };
 
-/**
- * 删除前置操作：实现了在编辑器中删除元素节点，并返回父级元素信息以供stage更新
- * @param node 待删除的节点
- * @returns 父级元素，root根元素
- */
-export const beforeRemove = async (node: MNode): Promise<MContainer | void> => {
-  if (!node?.id) return;
-
-  const stage = editorService.get<StageCore | null>('stage');
-  const root = editorService.get<MApp | null>('root');
-
-  if (!root) throw new Error('没有root');
-
-  const { parent, node: curNode } = editorService.getNodeInfo(node.id, false);
-
-  if (!parent || !curNode) throw new Error('找不要删除的节点');
-
-  const index = getNodeIndex(curNode, parent);
-
-  if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
-  // 从配置中删除元素
-  parent.items?.splice(index, 1);
-
-  // 通知stage更新
-  stage?.remove({ id: node.id, root: cloneDeep(root) });
-
-  if (node.type === NodeType.PAGE) {
-    editorService.state.pageLength -= 1;
-
-    if (root.items[0]) {
-      await editorService.select(root.items[0]);
-      stage?.select(root.items[0].id);
-    } else {
-      editorService.set('node', null);
-      editorService.set('nodes', []);
-      editorService.set('parent', null);
-      editorService.set('page', null);
-      editorService.set('stage', null);
-      editorService.set('highlightNode', null);
-      editorService.resetModifiedNodeId();
-      historyService.reset();
-
-      editorService.emit('remove', node);
-
-      return;
-    }
-  } else {
-    await editorService.select(parent);
-    stage?.select(parent.id);
-  }
-  return parent;
+export const getDefaultConfig = async (addNode: AddMNode, parentNode: MContainer) => {
+  const { type, inputEvent, ...config } = addNode;
+  const layout = await editorService.getLayout(toRaw(parentNode), addNode as MNode);
+  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
+  newNode.style = getInitPositionStyle(newNode.style, layout);
+  return newNode;
 };

package/types/Editor.vue.d.ts

@@ -2,7 +2,7 @@ import { PropType } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { MoveableOptions } from '@tmagic/stage';
+import { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
 declare const _default: import("vue").DefineComponent<{
     /** 页面初始值 */
@@ -83,6 +83,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    containerHighlightType: {
+        type: PropType<ContainerHighlightType>;
+        default: ContainerHighlightType;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -172,6 +176,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    containerHighlightType: {
+        type: PropType<ContainerHighlightType>;
+        default: ContainerHighlightType;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -200,5 +208,6 @@ declare const _default: import("vue").DefineComponent<{
     isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
     containerHighlightClassName: string;
     containerHighlightDuration: number;
+    containerHighlightType: ContainerHighlightType;
 }>;
 export default _default;