leaflet-draw-tooltips 1.0.0 → 1.0.2

package/dist/{leaflet-draw-tooltip.js → leaflet-draw-tooltips.js}

@@ -1,5 +1,5 @@
 /*!
- * leaflet-draw-tooltips v1.0.0
+ * leaflet-draw-tooltips v1.0.2
  * External tooltip plugin for Leaflet.draw - move drawing hints outside the map
  * @license MIT
  * @copyright (c) 2025
@@ -88,23 +88,31 @@ class ExternalCardTooltip {
    * 创建内部 DOM 结构
    */
   _setupDOM() {
-    // 清空容器
-    this.containerEl.innerHTML = '';
-    
-    // 创建主文本元素
-    this.textEl = document.createElement('div');
-    this.textEl.className = 'leaflet-draw-hint-text';
-    
-    // 创建副文本元素
-    this.subtextEl = document.createElement('div');
-    this.subtextEl.className = 'leaflet-draw-hint-subtext';
-    
-    // 添加到容器
-    this.containerEl.appendChild(this.textEl);
-    this.containerEl.appendChild(this.subtextEl);
-    
-    // 初始隐藏
-    this.containerEl.style.display = 'none';
+    // 如果容器中已有预期的元素，则重用它们（避免被其它实例清空）
+    const existingText = this.containerEl.querySelector('.leaflet-draw-hint-text');
+    const existingSubtext = this.containerEl.querySelector('.leaflet-draw-hint-subtext');
+
+    if (existingText && existingSubtext) {
+      this.textEl = existingText;
+      this.subtextEl = existingSubtext;
+    } else {
+      // 创建主文本元素
+      this.textEl = document.createElement('div');
+      this.textEl.className = 'leaflet-draw-hint-text';
+
+      // 创建副文本元素
+      this.subtextEl = document.createElement('div');
+      this.subtextEl.className = 'leaflet-draw-hint-subtext';
+
+      // 如果容器为空或没有结构，则追加元素（但不盲目清空已有内容）
+      this.containerEl.appendChild(this.textEl);
+      this.containerEl.appendChild(this.subtextEl);
+    }
+
+    // 初始隐藏（如果尚未设置）
+    if (!this.containerEl.style.display) {
+      this.containerEl.style.display = 'none';
+    }
   }
   
   /**
@@ -182,14 +190,11 @@ class ExternalCardTooltip {
     // 清空 DOM 内容但不删除元素（外部容器需要保留）
     if (this.textEl) this.textEl.textContent = '';
     if (this.subtextEl) this.subtextEl.textContent = '';
-    
+
     this._notifyUpdate();
-    
-    // 注意：不删除 DOM 元素，只清空引用
-    // DOM 元素（containerEl）是外部传入的，应该保留在页面上
-    this.containerEl = null;
-    this.textEl = null;
-    this.subtextEl = null;
+
+    // 注意：不删除 DOM 元素，也不清空对 DOM 的引用。
+    // containerEl 是外部传入的共享容器，保留引用以便其它实例或返回的 tooltip 继续可用。
     this.onUpdate = null;
   }
   
@@ -274,23 +279,28 @@ class ExternalCardTooltip {
  * @param {boolean} config.sanitize - 是否转义 HTML
  * @param {Function} config.onUpdate - 状态更新回调
  */
-function patchDrawTooltip(config) {
+function patchDrawTooltip(configOrInstance) {
   if (typeof L === 'undefined' || !L.Draw || !L.Draw.Tooltip) {
     throw new Error('[leaflet-draw-tooltip] Leaflet.draw 未加载，请确保在加载 leaflet-draw 之后调用');
   }
-  
+
+  // 如果传入的是已有的 ExternalCardTooltip 实例，则复用；否则根据 config 创建一个共享实例
+  const sharedExternalTooltip =
+    configOrInstance && configOrInstance instanceof ExternalCardTooltip
+      ? configOrInstance
+      : new ExternalCardTooltip(configOrInstance || {});
+
   // 保存原始类（可选，用于调试）
   const OriginalTooltip = L.Draw.Tooltip;
-  
+
   /**
    * 新的 L.Draw.Tooltip 适配器
-   * 每次实例化时创建新的 ExternalCardTooltip
+   * 所有实例都共享同一个 ExternalCardTooltip
    */
   L.Draw.Tooltip = L.Class.extend({
     initialize: function(map) {
-      // console.log('🆕 L.Draw.Tooltip 实例化，创建新的 ExternalCardTooltip');
-      // 每次都创建新的实例
-      this._externalTooltip = new ExternalCardTooltip(config);
+      // 复用共享实例
+      this._externalTooltip = sharedExternalTooltip;
     },
     
     /**
@@ -329,14 +339,25 @@ function patchDrawTooltip(config) {
      * 销毁
      */
     dispose: function() {
-      this._externalTooltip.dispose();
+      // 不在此处 dispose 共享实例（以免被局部销毁）。
       return this;
+    },
+
+    /**
+     * 空实现，避免调用时报错
+     */
+    _onMouseOut: function() {
+      return;
     }
   });
   
   // 标记已替换（可用于调试）
   L.Draw.Tooltip._isPatched = true;
   L.Draw.Tooltip._originalClass = OriginalTooltip;
+  // 暴露共享实例以便调试或外部访问
+  L.Draw.Tooltip._sharedExternalTooltip = sharedExternalTooltip;
+
+  return sharedExternalTooltip;
 }
 
 /**
@@ -406,26 +427,24 @@ function installLeafletDrawExternalTooltip(options = {}) {
     }
   }
   
-  // 4. 准备配置对象（不创建实例）
+  // 4. 准备配置对象并创建共享 ExternalCardTooltip 实例
   const tooltipConfig = {
     containerEl,
     sanitize,
     onUpdate
   };
-  
-  // 5. Runtime 替换 L.Draw.Tooltip（传递配置而非实例）
-  patchDrawTooltip(tooltipConfig);
-  
-  // 6. 创建一个初始实例用于返回（供用户手动控制）
-  const externalTooltip = new ExternalCardTooltip(tooltipConfig);
+
+  // 5. 创建共享实例并让 patch 使用该实例（避免绘制期间产生命名冲突/覆盖）
+  const sharedExternalTooltip = new ExternalCardTooltip(tooltipConfig);
+  patchDrawTooltip(sharedExternalTooltip);
   
   // 8. 返回清理函数和 tooltip 实例
   const cleanup = function() {
-    // 清理用户手动控制的实例
-    if (externalTooltip) {
-      externalTooltip.dispose();
+    // 仅在卸载插件时彻底 dispose 共享实例
+    if (sharedExternalTooltip) {
+      sharedExternalTooltip.dispose();
     }
-    
+
     if (hideMapTooltip) {
       const mapContainer = map.getContainer();
       if (mapContainer) {
@@ -433,10 +452,10 @@ function installLeafletDrawExternalTooltip(options = {}) {
       }
     }
   };
-  
+
   return {
     cleanup,
-    tooltip: externalTooltip
+    tooltip: sharedExternalTooltip
   };
 }
 

package/dist/leaflet-draw-tooltips.min.js

@@ -0,0 +1 @@
+function t(t,e,i=!0){t&&(i?t.textContent=e||"":t.innerHTML=e||"")}class e{constructor({containerEl:t,sanitize:e=!0,onUpdate:i=null}){this.containerEl=t,this.sanitize=e,this.onUpdate=i,this._visible=!1,this._isError=!1,this._currentContent={text:"",subtext:""},this._setupDOM()}_setupDOM(){const t=this.containerEl.querySelector(".leaflet-draw-hint-text"),e=this.containerEl.querySelector(".leaflet-draw-hint-subtext");t&&e?(this.textEl=t,this.subtextEl=e):(this.textEl=document.createElement("div"),this.textEl.className="leaflet-draw-hint-text",this.subtextEl=document.createElement("div"),this.subtextEl.className="leaflet-draw-hint-subtext",this.containerEl.appendChild(this.textEl),this.containerEl.appendChild(this.subtextEl)),this.containerEl.style.display||(this.containerEl.style.display="none")}updateContent(e){if(!this.containerEl)return this;const{text:i="",subtext:n=""}=e||{};return this._currentContent={text:i,subtext:n},i||n?(t(this.textEl,i,this.sanitize),t(this.subtextEl,n,this.sanitize),this._show()):this._hide(),this._notifyUpdate(),this}updatePosition(t){return this}showAsError(){return this.containerEl?(this._isError=!0,this.containerEl.classList.add("is-error"),this._notifyUpdate(),this):this}removeError(){return this.containerEl?(this._isError=!1,this.containerEl.classList.remove("is-error"),this._notifyUpdate(),this):this}dispose(){this._hide(),this._currentContent={text:"",subtext:""},this.textEl&&(this.textEl.textContent=""),this.subtextEl&&(this.subtextEl.textContent=""),this._notifyUpdate(),this.onUpdate=null}_show(){this.containerEl&&(this._visible||(this._visible=!0,this.containerEl.style.display="block"))}_hide(){this.containerEl&&this._visible&&(this._visible=!1,this.containerEl.style.display="none",this.removeError())}_notifyUpdate(){"function"==typeof this.onUpdate&&this.onUpdate({...this._currentContent},{visible:this._visible,isError:this._isError})}}function i(t={}){const{map:i,el:n,hideMapTooltip:o=!0,sanitize:s=!0,onUpdate:r=null}=t;if(!i||"function"!=typeof i.on)throw new Error("[leaflet-draw-tooltip] options.map 必须是有效的 Leaflet Map 实例");if(!n)throw new Error("[leaflet-draw-tooltip] options.el 必须提供（HTMLElement 或选择器）");const l=function(t){if(t instanceof HTMLElement)return t;if("string"==typeof t){const e=document.querySelector(t);if(!e)throw new Error(`[leaflet-draw-tooltip] 找不到元素: ${t}`);return e}throw new Error("[leaflet-draw-tooltip] el 必须是 HTMLElement 或选择器字符串")}(n);if(o){const t=i.getContainer();t&&t.classList.add("leaflet-draw-tooltip-hide")}const a=new e({containerEl:l,sanitize:s,onUpdate:r});return function(t){if("undefined"==typeof L||!L.Draw||!L.Draw.Tooltip)throw new Error("[leaflet-draw-tooltip] Leaflet.draw 未加载，请确保在加载 leaflet-draw 之后调用");const i=t&&t instanceof e?t:new e(t||{}),n=L.Draw.Tooltip;L.Draw.Tooltip=L.Class.extend({initialize:function(t){this._externalTooltip=i},updateContent:function(t){return this._externalTooltip.updateContent(t),this},updatePosition:function(t){return this._externalTooltip.updatePosition(t),this},showAsError:function(){return this._externalTooltip.showAsError(),this},removeError:function(){return this._externalTooltip.removeError(),this},dispose:function(){return this},_onMouseOut:function(){}}),L.Draw.Tooltip._isPatched=!0,L.Draw.Tooltip._originalClass=n,L.Draw.Tooltip._sharedExternalTooltip=i}(a),{cleanup:function(){if(a&&a.dispose(),o){const t=i.getContainer();t&&t.classList.remove("leaflet-draw-tooltip-hide")}},tooltip:a}}export{i as installLeafletDrawExternalTooltip};

package/dist/leaflet-draw-tooltips.min.umd.cjs

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).LeafletDrawTooltip={})}(this,function(t){"use strict";function e(t,e,i=!0){t&&(i?t.textContent=e||"":t.innerHTML=e||"")}class i{constructor({containerEl:t,sanitize:e=!0,onUpdate:i=null}){this.containerEl=t,this.sanitize=e,this.onUpdate=i,this._visible=!1,this._isError=!1,this._currentContent={text:"",subtext:""},this._setupDOM()}_setupDOM(){const t=this.containerEl.querySelector(".leaflet-draw-hint-text"),e=this.containerEl.querySelector(".leaflet-draw-hint-subtext");t&&e?(this.textEl=t,this.subtextEl=e):(this.textEl=document.createElement("div"),this.textEl.className="leaflet-draw-hint-text",this.subtextEl=document.createElement("div"),this.subtextEl.className="leaflet-draw-hint-subtext",this.containerEl.appendChild(this.textEl),this.containerEl.appendChild(this.subtextEl)),this.containerEl.style.display||(this.containerEl.style.display="none")}updateContent(t){if(!this.containerEl)return this;const{text:i="",subtext:n=""}=t||{};return this._currentContent={text:i,subtext:n},i||n?(e(this.textEl,i,this.sanitize),e(this.subtextEl,n,this.sanitize),this._show()):this._hide(),this._notifyUpdate(),this}updatePosition(t){return this}showAsError(){return this.containerEl?(this._isError=!0,this.containerEl.classList.add("is-error"),this._notifyUpdate(),this):this}removeError(){return this.containerEl?(this._isError=!1,this.containerEl.classList.remove("is-error"),this._notifyUpdate(),this):this}dispose(){this._hide(),this._currentContent={text:"",subtext:""},this.textEl&&(this.textEl.textContent=""),this.subtextEl&&(this.subtextEl.textContent=""),this._notifyUpdate(),this.onUpdate=null}_show(){this.containerEl&&(this._visible||(this._visible=!0,this.containerEl.style.display="block"))}_hide(){this.containerEl&&this._visible&&(this._visible=!1,this.containerEl.style.display="none",this.removeError())}_notifyUpdate(){"function"==typeof this.onUpdate&&this.onUpdate({...this._currentContent},{visible:this._visible,isError:this._isError})}}t.installLeafletDrawExternalTooltip=function(t={}){const{map:e,el:n,hideMapTooltip:o=!0,sanitize:s=!0,onUpdate:r=null}=t;if(!e||"function"!=typeof e.on)throw new Error("[leaflet-draw-tooltip] options.map 必须是有效的 Leaflet Map 实例");if(!n)throw new Error("[leaflet-draw-tooltip] options.el 必须提供（HTMLElement 或选择器）");const l=function(t){if(t instanceof HTMLElement)return t;if("string"==typeof t){const e=document.querySelector(t);if(!e)throw new Error(`[leaflet-draw-tooltip] 找不到元素: ${t}`);return e}throw new Error("[leaflet-draw-tooltip] el 必须是 HTMLElement 或选择器字符串")}(n);if(o){const t=e.getContainer();t&&t.classList.add("leaflet-draw-tooltip-hide")}const a=new i({containerEl:l,sanitize:s,onUpdate:r});return function(t){if("undefined"==typeof L||!L.Draw||!L.Draw.Tooltip)throw new Error("[leaflet-draw-tooltip] Leaflet.draw 未加载，请确保在加载 leaflet-draw 之后调用");const e=t&&t instanceof i?t:new i(t||{}),n=L.Draw.Tooltip;L.Draw.Tooltip=L.Class.extend({initialize:function(t){this._externalTooltip=e},updateContent:function(t){return this._externalTooltip.updateContent(t),this},updatePosition:function(t){return this._externalTooltip.updatePosition(t),this},showAsError:function(){return this._externalTooltip.showAsError(),this},removeError:function(){return this._externalTooltip.removeError(),this},dispose:function(){return this},_onMouseOut:function(){}}),L.Draw.Tooltip._isPatched=!0,L.Draw.Tooltip._originalClass=n,L.Draw.Tooltip._sharedExternalTooltip=e}(a),{cleanup:function(){if(a&&a.dispose(),o){const t=e.getContainer();t&&t.classList.remove("leaflet-draw-tooltip-hide")}},tooltip:a}}});

package/dist/{leaflet-draw-tooltip.umd.cjs → leaflet-draw-tooltips.umd.cjs}

@@ -1,5 +1,5 @@
 /*!
- * leaflet-draw-tooltips v1.0.0
+ * leaflet-draw-tooltips v1.0.2
  * External tooltip plugin for Leaflet.draw - move drawing hints outside the map
  * @license MIT
  * @copyright (c) 2025
@@ -94,23 +94,31 @@
      * 创建内部 DOM 结构
      */
     _setupDOM() {
-      // 清空容器
-      this.containerEl.innerHTML = '';
-      
-      // 创建主文本元素
-      this.textEl = document.createElement('div');
-      this.textEl.className = 'leaflet-draw-hint-text';
-      
-      // 创建副文本元素
-      this.subtextEl = document.createElement('div');
-      this.subtextEl.className = 'leaflet-draw-hint-subtext';
-      
-      // 添加到容器
-      this.containerEl.appendChild(this.textEl);
-      this.containerEl.appendChild(this.subtextEl);
-      
-      // 初始隐藏
-      this.containerEl.style.display = 'none';
+      // 如果容器中已有预期的元素，则重用它们（避免被其它实例清空）
+      const existingText = this.containerEl.querySelector('.leaflet-draw-hint-text');
+      const existingSubtext = this.containerEl.querySelector('.leaflet-draw-hint-subtext');
+
+      if (existingText && existingSubtext) {
+        this.textEl = existingText;
+        this.subtextEl = existingSubtext;
+      } else {
+        // 创建主文本元素
+        this.textEl = document.createElement('div');
+        this.textEl.className = 'leaflet-draw-hint-text';
+
+        // 创建副文本元素
+        this.subtextEl = document.createElement('div');
+        this.subtextEl.className = 'leaflet-draw-hint-subtext';
+
+        // 如果容器为空或没有结构，则追加元素（但不盲目清空已有内容）
+        this.containerEl.appendChild(this.textEl);
+        this.containerEl.appendChild(this.subtextEl);
+      }
+
+      // 初始隐藏（如果尚未设置）
+      if (!this.containerEl.style.display) {
+        this.containerEl.style.display = 'none';
+      }
     }
     
     /**
@@ -188,14 +196,11 @@
       // 清空 DOM 内容但不删除元素（外部容器需要保留）
       if (this.textEl) this.textEl.textContent = '';
       if (this.subtextEl) this.subtextEl.textContent = '';
-      
+
       this._notifyUpdate();
-      
-      // 注意：不删除 DOM 元素，只清空引用
-      // DOM 元素（containerEl）是外部传入的，应该保留在页面上
-      this.containerEl = null;
-      this.textEl = null;
-      this.subtextEl = null;
+
+      // 注意：不删除 DOM 元素，也不清空对 DOM 的引用。
+      // containerEl 是外部传入的共享容器，保留引用以便其它实例或返回的 tooltip 继续可用。
       this.onUpdate = null;
     }
     
@@ -280,23 +285,28 @@
    * @param {boolean} config.sanitize - 是否转义 HTML
    * @param {Function} config.onUpdate - 状态更新回调
    */
-  function patchDrawTooltip(config) {
+  function patchDrawTooltip(configOrInstance) {
     if (typeof L === 'undefined' || !L.Draw || !L.Draw.Tooltip) {
       throw new Error('[leaflet-draw-tooltip] Leaflet.draw 未加载，请确保在加载 leaflet-draw 之后调用');
     }
-    
+
+    // 如果传入的是已有的 ExternalCardTooltip 实例，则复用；否则根据 config 创建一个共享实例
+    const sharedExternalTooltip =
+      configOrInstance && configOrInstance instanceof ExternalCardTooltip
+        ? configOrInstance
+        : new ExternalCardTooltip(configOrInstance || {});
+
     // 保存原始类（可选，用于调试）
     const OriginalTooltip = L.Draw.Tooltip;
-    
+
     /**
      * 新的 L.Draw.Tooltip 适配器
-     * 每次实例化时创建新的 ExternalCardTooltip
+     * 所有实例都共享同一个 ExternalCardTooltip
      */
     L.Draw.Tooltip = L.Class.extend({
       initialize: function(map) {
-        // console.log('🆕 L.Draw.Tooltip 实例化，创建新的 ExternalCardTooltip');
-        // 每次都创建新的实例
-        this._externalTooltip = new ExternalCardTooltip(config);
+        // 复用共享实例
+        this._externalTooltip = sharedExternalTooltip;
       },
       
       /**
@@ -335,14 +345,25 @@
        * 销毁
        */
       dispose: function() {
-        this._externalTooltip.dispose();
+        // 不在此处 dispose 共享实例（以免被局部销毁）。
         return this;
+      },
+
+      /**
+       * 空实现，避免调用时报错
+       */
+      _onMouseOut: function() {
+        return;
       }
     });
     
     // 标记已替换（可用于调试）
     L.Draw.Tooltip._isPatched = true;
     L.Draw.Tooltip._originalClass = OriginalTooltip;
+    // 暴露共享实例以便调试或外部访问
+    L.Draw.Tooltip._sharedExternalTooltip = sharedExternalTooltip;
+
+    return sharedExternalTooltip;
   }
 
   /**
@@ -412,26 +433,24 @@
       }
     }
     
-    // 4. 准备配置对象（不创建实例）
+    // 4. 准备配置对象并创建共享 ExternalCardTooltip 实例
     const tooltipConfig = {
       containerEl,
       sanitize,
       onUpdate
     };
-    
-    // 5. Runtime 替换 L.Draw.Tooltip（传递配置而非实例）
-    patchDrawTooltip(tooltipConfig);
-    
-    // 6. 创建一个初始实例用于返回（供用户手动控制）
-    const externalTooltip = new ExternalCardTooltip(tooltipConfig);
+
+    // 5. 创建共享实例并让 patch 使用该实例（避免绘制期间产生命名冲突/覆盖）
+    const sharedExternalTooltip = new ExternalCardTooltip(tooltipConfig);
+    patchDrawTooltip(sharedExternalTooltip);
     
     // 8. 返回清理函数和 tooltip 实例
     const cleanup = function() {
-      // 清理用户手动控制的实例
-      if (externalTooltip) {
-        externalTooltip.dispose();
+      // 仅在卸载插件时彻底 dispose 共享实例
+      if (sharedExternalTooltip) {
+        sharedExternalTooltip.dispose();
       }
-      
+
       if (hideMapTooltip) {
         const mapContainer = map.getContainer();
         if (mapContainer) {
@@ -439,10 +458,10 @@
         }
       }
     };
-    
+
     return {
       cleanup,
-      tooltip: externalTooltip
+      tooltip: sharedExternalTooltip
     };
   }
 

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "leaflet-draw-tooltips",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "External tooltip plugin for Leaflet.draw - move drawing hints outside the map",
-  "main": "dist/leaflet-draw-tooltip.umd.cjs",
-  "module": "dist/leaflet-draw-tooltip.js",
+  "main": "dist/leaflet-draw-tooltips.umd.cjs",
+  "module": "dist/leaflet-draw-tooltips.js",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/leaflet-draw-tooltip.js",
-      "require": "./dist/leaflet-draw-tooltip.umd.cjs"
+      "import": "./dist/leaflet-draw-tooltips.js",
+      "require": "./dist/leaflet-draw-tooltips.umd.cjs"
     }
   },
   "files": [
@@ -21,7 +21,7 @@
   "keywords": [
     "leaflet",
     "leaflet-draw",
-    "tooltip",
+    "tooltips",
     "external",
     "plugin"
   ],
@@ -29,12 +29,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Qun88/leaflet-draw-tooltip.git"
+    "url": "https://github.com/Qun88/leaflet-draw-tooltips.git"
   },
   "bugs": {
-    "url": "https://github.com/Qun88/leaflet-draw-tooltip/issues"
+    "url": "https://github.com/Qun88/leaflet-draw-tooltips/issues"
   },
-  "homepage": "https://github.com/Qun88/leaflet-draw-tooltip#readme",
+  "homepage": "https://github.com/Qun88/leaflet-draw-tooltips#readme",
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
     "rollup": "^4.54.0",

package/src/ExternalCardTooltip.js

@@ -37,23 +37,31 @@ export class ExternalCardTooltip {
    * 创建内部 DOM 结构
    */
   _setupDOM() {
-    // 清空容器
-    this.containerEl.innerHTML = '';
-    
-    // 创建主文本元素
-    this.textEl = document.createElement('div');
-    this.textEl.className = 'leaflet-draw-hint-text';
-    
-    // 创建副文本元素
-    this.subtextEl = document.createElement('div');
-    this.subtextEl.className = 'leaflet-draw-hint-subtext';
-    
-    // 添加到容器
-    this.containerEl.appendChild(this.textEl);
-    this.containerEl.appendChild(this.subtextEl);
-    
-    // 初始隐藏
-    this.containerEl.style.display = 'none';
+    // 如果容器中已有预期的元素，则重用它们（避免被其它实例清空）
+    const existingText = this.containerEl.querySelector('.leaflet-draw-hint-text');
+    const existingSubtext = this.containerEl.querySelector('.leaflet-draw-hint-subtext');
+
+    if (existingText && existingSubtext) {
+      this.textEl = existingText;
+      this.subtextEl = existingSubtext;
+    } else {
+      // 创建主文本元素
+      this.textEl = document.createElement('div');
+      this.textEl.className = 'leaflet-draw-hint-text';
+
+      // 创建副文本元素
+      this.subtextEl = document.createElement('div');
+      this.subtextEl.className = 'leaflet-draw-hint-subtext';
+
+      // 如果容器为空或没有结构，则追加元素（但不盲目清空已有内容）
+      this.containerEl.appendChild(this.textEl);
+      this.containerEl.appendChild(this.subtextEl);
+    }
+
+    // 初始隐藏（如果尚未设置）
+    if (!this.containerEl.style.display) {
+      this.containerEl.style.display = 'none';
+    }
   }
   
   /**
@@ -131,14 +139,11 @@ export class ExternalCardTooltip {
     // 清空 DOM 内容但不删除元素（外部容器需要保留）
     if (this.textEl) this.textEl.textContent = '';
     if (this.subtextEl) this.subtextEl.textContent = '';
-    
+
     this._notifyUpdate();
-    
-    // 注意：不删除 DOM 元素，只清空引用
-    // DOM 元素（containerEl）是外部传入的，应该保留在页面上
-    this.containerEl = null;
-    this.textEl = null;
-    this.subtextEl = null;
+
+    // 注意：不删除 DOM 元素，也不清空对 DOM 的引用。
+    // containerEl 是外部传入的共享容器，保留引用以便其它实例或返回的 tooltip 继续可用。
     this.onUpdate = null;
   }
   

package/src/index.js

@@ -73,26 +73,24 @@ export function installLeafletDrawExternalTooltip(options = {}) {
     }
   }
   
-  // 4. 准备配置对象（不创建实例）
+  // 4. 准备配置对象并创建共享 ExternalCardTooltip 实例
   const tooltipConfig = {
     containerEl,
     sanitize,
     onUpdate
   };
-  
-  // 5. Runtime 替换 L.Draw.Tooltip（传递配置而非实例）
-  patchDrawTooltip(tooltipConfig);
-  
-  // 6. 创建一个初始实例用于返回（供用户手动控制）
-  const externalTooltip = new ExternalCardTooltip(tooltipConfig);
+
+  // 5. 创建共享实例并让 patch 使用该实例（避免绘制期间产生命名冲突/覆盖）
+  const sharedExternalTooltip = new ExternalCardTooltip(tooltipConfig);
+  patchDrawTooltip(sharedExternalTooltip);
   
   // 8. 返回清理函数和 tooltip 实例
   const cleanup = function() {
-    // 清理用户手动控制的实例
-    if (externalTooltip) {
-      externalTooltip.dispose();
+    // 仅在卸载插件时彻底 dispose 共享实例
+    if (sharedExternalTooltip) {
+      sharedExternalTooltip.dispose();
     }
-    
+
     if (hideMapTooltip) {
       const mapContainer = map.getContainer();
       if (mapContainer) {
@@ -100,9 +98,9 @@ export function installLeafletDrawExternalTooltip(options = {}) {
       }
     }
   };
-  
+
   return {
     cleanup,
-    tooltip: externalTooltip
+    tooltip: sharedExternalTooltip
   };
 }

package/src/patchDrawTooltip.js

@@ -19,23 +19,28 @@ import { ExternalCardTooltip } from './ExternalCardTooltip.js';
  * @param {boolean} config.sanitize - 是否转义 HTML
  * @param {Function} config.onUpdate - 状态更新回调
  */
-export function patchDrawTooltip(config) {
+export function patchDrawTooltip(configOrInstance) {
   if (typeof L === 'undefined' || !L.Draw || !L.Draw.Tooltip) {
     throw new Error('[leaflet-draw-tooltip] Leaflet.draw 未加载，请确保在加载 leaflet-draw 之后调用');
   }
-  
+
+  // 如果传入的是已有的 ExternalCardTooltip 实例，则复用；否则根据 config 创建一个共享实例
+  const sharedExternalTooltip =
+    configOrInstance && configOrInstance instanceof ExternalCardTooltip
+      ? configOrInstance
+      : new ExternalCardTooltip(configOrInstance || {});
+
   // 保存原始类（可选，用于调试）
   const OriginalTooltip = L.Draw.Tooltip;
-  
+
   /**
    * 新的 L.Draw.Tooltip 适配器
-   * 每次实例化时创建新的 ExternalCardTooltip
+   * 所有实例都共享同一个 ExternalCardTooltip
    */
   L.Draw.Tooltip = L.Class.extend({
     initialize: function(map) {
-      // console.log('🆕 L.Draw.Tooltip 实例化，创建新的 ExternalCardTooltip');
-      // 每次都创建新的实例
-      this._externalTooltip = new ExternalCardTooltip(config);
+      // 复用共享实例
+      this._externalTooltip = sharedExternalTooltip;
     },
     
     /**
@@ -74,12 +79,23 @@ export function patchDrawTooltip(config) {
      * 销毁
      */
     dispose: function() {
-      this._externalTooltip.dispose();
+      // 不在此处 dispose 共享实例（以免被局部销毁）。
       return this;
+    },
+
+    /**
+     * 空实现，避免调用时报错
+     */
+    _onMouseOut: function() {
+      return;
     }
   });
   
   // 标记已替换（可用于调试）
   L.Draw.Tooltip._isPatched = true;
   L.Draw.Tooltip._originalClass = OriginalTooltip;
+  // 暴露共享实例以便调试或外部访问
+  L.Draw.Tooltip._sharedExternalTooltip = sharedExternalTooltip;
+
+  return sharedExternalTooltip;
 }

package/dist/leaflet-draw-tooltip.min.js

@@ -1 +0,0 @@
-function t(t,e,i=!0){t&&(i?t.textContent=e||"":t.innerHTML=e||"")}class e{constructor({containerEl:t,sanitize:e=!0,onUpdate:i=null}){this.containerEl=t,this.sanitize=e,this.onUpdate=i,this._visible=!1,this._isError=!1,this._currentContent={text:"",subtext:""},this._setupDOM()}_setupDOM(){this.containerEl.innerHTML="",this.textEl=document.createElement("div"),this.textEl.className="leaflet-draw-hint-text",this.subtextEl=document.createElement("div"),this.subtextEl.className="leaflet-draw-hint-subtext",this.containerEl.appendChild(this.textEl),this.containerEl.appendChild(this.subtextEl),this.containerEl.style.display="none"}updateContent(e){if(!this.containerEl)return this;const{text:i="",subtext:n=""}=e||{};return this._currentContent={text:i,subtext:n},i||n?(t(this.textEl,i,this.sanitize),t(this.subtextEl,n,this.sanitize),this._show()):this._hide(),this._notifyUpdate(),this}updatePosition(t){return this}showAsError(){return this.containerEl?(this._isError=!0,this.containerEl.classList.add("is-error"),this._notifyUpdate(),this):this}removeError(){return this.containerEl?(this._isError=!1,this.containerEl.classList.remove("is-error"),this._notifyUpdate(),this):this}dispose(){this._hide(),this._currentContent={text:"",subtext:""},this.textEl&&(this.textEl.textContent=""),this.subtextEl&&(this.subtextEl.textContent=""),this._notifyUpdate(),this.containerEl=null,this.textEl=null,this.subtextEl=null,this.onUpdate=null}_show(){this.containerEl&&(this._visible||(this._visible=!0,this.containerEl.style.display="block"))}_hide(){this.containerEl&&this._visible&&(this._visible=!1,this.containerEl.style.display="none",this.removeError())}_notifyUpdate(){"function"==typeof this.onUpdate&&this.onUpdate({...this._currentContent},{visible:this._visible,isError:this._isError})}}function i(t={}){const{map:i,el:n,hideMapTooltip:s=!0,sanitize:o=!0,onUpdate:r=null}=t;if(!i||"function"!=typeof i.on)throw new Error("[leaflet-draw-tooltip] options.map 必须是有效的 Leaflet Map 实例");if(!n)throw new Error("[leaflet-draw-tooltip] options.el 必须提供（HTMLElement 或选择器）");const l=function(t){if(t instanceof HTMLElement)return t;if("string"==typeof t){const e=document.querySelector(t);if(!e)throw new Error(`[leaflet-draw-tooltip] 找不到元素: ${t}`);return e}throw new Error("[leaflet-draw-tooltip] el 必须是 HTMLElement 或选择器字符串")}(n);if(s){const t=i.getContainer();t&&t.classList.add("leaflet-draw-tooltip-hide")}const a={containerEl:l,sanitize:o,onUpdate:r};!function(t){if("undefined"==typeof L||!L.Draw||!L.Draw.Tooltip)throw new Error("[leaflet-draw-tooltip] Leaflet.draw 未加载，请确保在加载 leaflet-draw 之后调用");const i=L.Draw.Tooltip;L.Draw.Tooltip=L.Class.extend({initialize:function(i){this._externalTooltip=new e(t)},updateContent:function(t){return this._externalTooltip.updateContent(t),this},updatePosition:function(t){return this._externalTooltip.updatePosition(t),this},showAsError:function(){return this._externalTooltip.showAsError(),this},removeError:function(){return this._externalTooltip.removeError(),this},dispose:function(){return this._externalTooltip.dispose(),this}}),L.Draw.Tooltip._isPatched=!0,L.Draw.Tooltip._originalClass=i}(a);const h=new e(a);return{cleanup:function(){if(h&&h.dispose(),s){const t=i.getContainer();t&&t.classList.remove("leaflet-draw-tooltip-hide")}},tooltip:h}}export{i as installLeafletDrawExternalTooltip};

package/dist/leaflet-draw-tooltip.min.umd.cjs

@@ -1 +0,0 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).LeafletDrawTooltip={})}(this,function(t){"use strict";function e(t,e,i=!0){t&&(i?t.textContent=e||"":t.innerHTML=e||"")}class i{constructor({containerEl:t,sanitize:e=!0,onUpdate:i=null}){this.containerEl=t,this.sanitize=e,this.onUpdate=i,this._visible=!1,this._isError=!1,this._currentContent={text:"",subtext:""},this._setupDOM()}_setupDOM(){this.containerEl.innerHTML="",this.textEl=document.createElement("div"),this.textEl.className="leaflet-draw-hint-text",this.subtextEl=document.createElement("div"),this.subtextEl.className="leaflet-draw-hint-subtext",this.containerEl.appendChild(this.textEl),this.containerEl.appendChild(this.subtextEl),this.containerEl.style.display="none"}updateContent(t){if(!this.containerEl)return this;const{text:i="",subtext:n=""}=t||{};return this._currentContent={text:i,subtext:n},i||n?(e(this.textEl,i,this.sanitize),e(this.subtextEl,n,this.sanitize),this._show()):this._hide(),this._notifyUpdate(),this}updatePosition(t){return this}showAsError(){return this.containerEl?(this._isError=!0,this.containerEl.classList.add("is-error"),this._notifyUpdate(),this):this}removeError(){return this.containerEl?(this._isError=!1,this.containerEl.classList.remove("is-error"),this._notifyUpdate(),this):this}dispose(){this._hide(),this._currentContent={text:"",subtext:""},this.textEl&&(this.textEl.textContent=""),this.subtextEl&&(this.subtextEl.textContent=""),this._notifyUpdate(),this.containerEl=null,this.textEl=null,this.subtextEl=null,this.onUpdate=null}_show(){this.containerEl&&(this._visible||(this._visible=!0,this.containerEl.style.display="block"))}_hide(){this.containerEl&&this._visible&&(this._visible=!1,this.containerEl.style.display="none",this.removeError())}_notifyUpdate(){"function"==typeof this.onUpdate&&this.onUpdate({...this._currentContent},{visible:this._visible,isError:this._isError})}}t.installLeafletDrawExternalTooltip=function(t={}){const{map:e,el:n,hideMapTooltip:o=!0,sanitize:s=!0,onUpdate:r=null}=t;if(!e||"function"!=typeof e.on)throw new Error("[leaflet-draw-tooltip] options.map 必须是有效的 Leaflet Map 实例");if(!n)throw new Error("[leaflet-draw-tooltip] options.el 必须提供（HTMLElement 或选择器）");const l=function(t){if(t instanceof HTMLElement)return t;if("string"==typeof t){const e=document.querySelector(t);if(!e)throw new Error(`[leaflet-draw-tooltip] 找不到元素: ${t}`);return e}throw new Error("[leaflet-draw-tooltip] el 必须是 HTMLElement 或选择器字符串")}(n);if(o){const t=e.getContainer();t&&t.classList.add("leaflet-draw-tooltip-hide")}const a={containerEl:l,sanitize:s,onUpdate:r};!function(t){if("undefined"==typeof L||!L.Draw||!L.Draw.Tooltip)throw new Error("[leaflet-draw-tooltip] Leaflet.draw 未加载，请确保在加载 leaflet-draw 之后调用");const e=L.Draw.Tooltip;L.Draw.Tooltip=L.Class.extend({initialize:function(e){this._externalTooltip=new i(t)},updateContent:function(t){return this._externalTooltip.updateContent(t),this},updatePosition:function(t){return this._externalTooltip.updatePosition(t),this},showAsError:function(){return this._externalTooltip.showAsError(),this},removeError:function(){return this._externalTooltip.removeError(),this},dispose:function(){return this._externalTooltip.dispose(),this}}),L.Draw.Tooltip._isPatched=!0,L.Draw.Tooltip._originalClass=e}(a);const h=new i(a);return{cleanup:function(){if(h&&h.dispose(),o){const t=e.getContainer();t&&t.classList.remove("leaflet-draw-tooltip-hide")}},tooltip:h}}});