Perf/vue custom render

packages/vue-vtable/src/components/custom/vtable-vue-attribute-plugin.ts

@@ -2,7 +2,7 @@
  * @Author: lym
  * @Date: 2025-02-24 09:32:53
  * @LastEditors: lym
- * @LastEditTime: 2025-03-21 14:22:18
+ * @LastEditTime: 2025-03-21 19:38:26
  * @Description:
  */
 import type {
@@ -33,6 +33,7 @@ import { render } from 'vue';
  * 表格自定义组件集成插件
  */
 export class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPlugin {
+  name: string = 'VTableVueAttributePlugin';
   declare htmlMap: Record<
     string,
     {
@@ -125,20 +126,12 @@ export class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPl
       targetMap = null;
     }
     // 校验并传递上下文
-    this.checkToPassAppContext(element);
+    this.checkToPassAppContext(element, graphic);
     // 渲染或更新 Vue 组件
     if (!targetMap || !this.checkDom(targetMap.wrapContainer)) {
       const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, actualContainer, { id, options });
       if (wrapContainer) {
-        // 检查历史渲染节点
-        const historyWrapContainer = document.getElementById(id);
         const dataRenderId = `${this.renderId}`;
-        if (historyWrapContainer && historyWrapContainer.getAttribute('data-vue-renderId') !== dataRenderId) {
-          // 历史渲染节点清除
-          render(null, historyWrapContainer);
-          historyWrapContainer.remove();
-          this.removeWrapContainerEventListener(historyWrapContainer);
-        }
         wrapContainer.id = id;
         wrapContainer.setAttribute('data-vue-renderId', dataRenderId);
         render(element, wrapContainer);
@@ -183,14 +176,19 @@ export class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPl
   /**
    * @description: 校验并传递上下文
    * @param {VNode} vnode
+   * @param {IGraphic} graphic
    * @return {*}
    */
-  checkToPassAppContext(vnode: VNode) {
-    if (this.currentContext) {
-      try {
-        vnode.appContext = this.currentContext;
-      } catch (error) {}
-    }
+  checkToPassAppContext(vnode: VNode, graphic: IGraphic) {
+    try {
+      const { stage } = getTargetGroup(graphic);
+      const { table } = stage || {};
+      const userAppContext = table?.options?.customConfig?.getVueUserAppContext?.() ?? this.currentContext;
+      // 简单校验合法性
+      if (!!userAppContext?.components && !!userAppContext?.directives) {
+        vnode.appContext = userAppContext;
+      }
+    } catch (error) {}
   }
   /**
    * @description: 检查是否需要渲染

packages/vue-vtable/src/edit/editor.ts

@@ -161,7 +161,7 @@ export class DynamicRenderEditor {
     if (!vnode || !isVNode(vnode)) {
       return false;
     }
-    this.checkToPassAppContext(vnode);
+    this.checkToPassAppContext(vnode, table);
     // 创建包裹容器
     const wrapContainer = document.createElement('div');
     wrapContainer.style.position = 'absolute';
@@ -183,12 +183,17 @@ export class DynamicRenderEditor {
   /**
    * @description: 校验并传递上下文
    * @param {VNode} vnode
+   * @param {any} table
    * @return {*}
    */
-  checkToPassAppContext(vnode: VNode) {
-    if (this.currentContext) {
-      vnode.appContext = this.currentContext;
-    }
+  checkToPassAppContext(vnode: VNode, table: any) {
+    try {
+      const userAppContext = table.options?.customConfig?.getVueUserAppContext?.() ?? this.currentContext;
+      // 简单校验合法性
+      if (!!userAppContext?.components && !!userAppContext?.directives) {
+        vnode.appContext = userAppContext;
+      }
+    } catch (error) {}
   }
   /**
    * @description: 获取渲染式编辑器的列配置主键

packages/vue-vtable/src/hooks/useCellRender.ts

@@ -1,6 +1,7 @@
 import type { Ref } from 'vue';
 import { getCurrentInstance, watchEffect } from 'vue';
 import { VTableVueAttributePlugin } from '../components/custom/vtable-vue-attribute-plugin';
+import { isArray } from '@visactor/vutils';
 
 /**
  * 自定义单元格渲染器
@@ -10,15 +11,23 @@ import { VTableVueAttributePlugin } from '../components/custom/vtable-vue-attrib
 export function useCellRender(props: any, tableRef: Ref) {
   /** 当前实例 */
   const instance = getCurrentInstance();
+  /** 自定义 dom 开关 */
+  const createReactContainer = props?.options?.customConfig?.createReactContainer;
+
   watchEffect(() => {
-    if (!props?.options?.customConfig?.createReactContainer) {
-      // 未开启自定义容器
+    if (!createReactContainer) {
+      return;
+    }
+    const pluginService = tableRef.value?.scenegraph?.stage?.pluginService;
+    if (!pluginService) {
       return;
     }
-    if (!tableRef.value) {
+
+    const exist = pluginService.findPluginsByName('VTableVueAttributePlugin');
+    if (isArray(exist) && !!exist.length) {
       return;
     }
-    // 注册 vtable-vue 自定义组件集成插件
-    tableRef.value.scenegraph.stage.pluginService.register(new VTableVueAttributePlugin(instance?.appContext));
+    const plugin = new VTableVueAttributePlugin(instance?.appContext);
+    pluginService.register(plugin);
   });
 }