leafer-x-tooltip-canvas 1.0.2 → 1.0.3

package/README.en.md

@@ -55,6 +55,12 @@ The specific config options are as follows. Click on the field name to jump to [
     </tr>
   </thead>
   <tbody>
+    <tr>
+      <td>debug</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>Enable debug mode to output target element, parent, position, size, style info</td>
+    </tr>
     <tr>
       <td><a href="#display-information">info</a></td>
       <td>Array&lt;string&gt;</td>

package/README.md

@@ -55,6 +55,12 @@ new TooltipPlugin(app, {
     </tr>
   </thead>
   <tbody>
+    <tr>
+      <td>debug</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>开启调试模式，输出目标元素、父级、位置、尺寸、样式等信息</td>
+    </tr>
     <tr>
       <td><a href="#显示信息">info</a></td>
       <td>Array&lt;string&gt;</td>

package/dev/bundle.js

@@ -136,11 +136,35 @@ let Tooltip = class Tooltip extends di$1 {
         this.config = data.config;
         this.show();
     }
+    log(...args) {
+        var _a;
+        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.debug) {
+            console.log('[Tooltip]', ...args);
+        }
+    }
     createShapes(pos = this.__.pointerPos) {
+        var _a, _b, _c, _d, _e, _f, _g;
         this.clear();
         const { width, height, text } = handleTextStyle(this.target, this.config);
         const { backgroundColor, stroke, color, padding, borderRadius, fontSize, fontWeight, fontFamily, } = this.config.style;
         let offset = this.config.offset;
+        this.log('createShapes', {
+            target: {
+                tag: (_a = this.target) === null || _a === void 0 ? void 0 : _a.tag,
+                id: (_b = this.target) === null || _b === void 0 ? void 0 : _b.id,
+                className: (_c = this.target) === null || _c === void 0 ? void 0 : _c.className,
+                parent: {
+                    tag: (_e = (_d = this.target) === null || _d === void 0 ? void 0 : _d.parent) === null || _e === void 0 ? void 0 : _e.tag,
+                    id: (_g = (_f = this.target) === null || _f === void 0 ? void 0 : _f.parent) === null || _g === void 0 ? void 0 : _g.id,
+                },
+            },
+            pointer: pos,
+            offset,
+            renderPos: { x: pos.x + offset[0], y: pos.y + offset[1] },
+            size: { width, height },
+            style: { backgroundColor, stroke, color, padding, borderRadius, fontSize },
+            text,
+        });
         this.setStyle({
             fill: backgroundColor,
             stroke,
@@ -171,6 +195,7 @@ let Tooltip = class Tooltip extends di$1 {
     }
     show(pos = this.__.pointerPos) {
         this.clearShowHideTimers();
+        this.log('show', { pos, delay: this.config.showDelay, isShow: this.isShow });
         this.showTimerId = setTimeout(() => {
             this.createShapes(pos);
             this.showTimerId = null;
@@ -178,6 +203,7 @@ let Tooltip = class Tooltip extends di$1 {
     }
     hide(immediate = false) {
         this.clearShowHideTimers();
+        this.log('hide', { immediate, delay: this.config.hideDelay, isShow: this.isShow });
         if (immediate) {
             this.destroy();
         }
@@ -190,6 +216,7 @@ let Tooltip = class Tooltip extends di$1 {
     }
     update(pos) {
         this.clearShowHideTimers();
+        this.log('update', { pos, isShow: this.isShow });
         if (this.isShow) {
             this.createShapes(pos);
         }
@@ -230,6 +257,7 @@ Tooltip = __decorate([
 ], Tooltip);
 
 const defaultConfig = {
+    debug: false,
     reference: 'pointer',
     info: ['tag'],
     showType: 'value',
@@ -258,6 +286,11 @@ const defaultConfig = {
 };
 
 class TooltipPlugin {
+    log(...args) {
+        if (this.config.debug) {
+            console.log('[TooltipPlugin]', ...args);
+        }
+    }
     constructor(instance, config) {
         this.tooltipCache = new Map();
         this.includesTypeSet = new Set();
@@ -317,7 +350,8 @@ class TooltipPlugin {
             this.hideTooltip();
             return;
         }
-        if (!this.handleAllowed(target)) {
+        const allowed = this.handleAllowed(target);
+        if (!allowed) {
             this.hideTooltip();
             return;
         }
@@ -344,16 +378,24 @@ class TooltipPlugin {
         const hasIncludesRule = this.includesTypeSet.size > 0;
         const hasExcludesRule = this.excludesTypeSet.size > 0;
         if (!hasIncludesRule && !hasExcludesRule) {
+            this.log('allowed', { target: target.tag, result: true, reason: 'no rules' });
             return true;
         }
         const matchesInclude = targetIdentifiers.some((id) => this.includesTypeSet.has(id));
         const matchesExclude = targetIdentifiers.some((id) => this.excludesTypeSet.has(id));
-        if (matchesInclude)
+        if (matchesInclude) {
+            this.log('allowed', { target: target.tag, result: true, reason: 'matches include' });
             return true;
-        if (matchesExclude)
+        }
+        if (matchesExclude) {
+            this.log('allowed', { target: target.tag, result: false, reason: 'matches exclude' });
             return false;
-        if (hasIncludesRule)
+        }
+        if (hasIncludesRule) {
+            this.log('allowed', { target: target.tag, result: false, reason: 'has include rule but not matched' });
             return false;
+        }
+        this.log('allowed', { target: target.tag, result: true, reason: 'only exclude rule, not matched' });
         return true;
     }
     hideTooltip() {
@@ -377,12 +419,14 @@ class TooltipPlugin {
         });
         const cachedTooltip = this.tooltipCache.get(id);
         if (cachedTooltip && cachedTooltip.parent) {
+            this.log('tooltip update', { id, x: event.x, y: event.y });
             cachedTooltip.update({ x: event.x, y: event.y });
         }
         else {
             if (cachedTooltip) {
                 this.tooltipCache.delete(id);
             }
+            this.log('tooltip create', { id, x: event.x, y: event.y, target: target.tag });
             const tooltip = new Tooltip({
                 id,
                 pointerPos: { x: event.x, y: event.y },
@@ -462,5 +506,5 @@ const flow = new m({
     height: 100,
 });
 app.tree.add(flow);
-new TooltipPlugin(app, { excludesType: ['Ellipse'], throughExcludes: true });
+new TooltipPlugin(app, { excludesType: ['Ellipse'], throughExcludes: true, debug: true });
 console.log(app);

package/dist/index.cjs

@@ -136,11 +136,35 @@ let Tooltip = class Tooltip extends di$1 {
         this.config = data.config;
         this.show();
     }
+    log(...args) {
+        var _a;
+        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.debug) {
+            console.log('[Tooltip]', ...args);
+        }
+    }
     createShapes(pos = this.__.pointerPos) {
+        var _a, _b, _c, _d, _e, _f, _g;
         this.clear();
         const { width, height, text } = handleTextStyle(this.target, this.config);
         const { backgroundColor, stroke, color, padding, borderRadius, fontSize, fontWeight, fontFamily, } = this.config.style;
         let offset = this.config.offset;
+        this.log('createShapes', {
+            target: {
+                tag: (_a = this.target) === null || _a === void 0 ? void 0 : _a.tag,
+                id: (_b = this.target) === null || _b === void 0 ? void 0 : _b.id,
+                className: (_c = this.target) === null || _c === void 0 ? void 0 : _c.className,
+                parent: {
+                    tag: (_e = (_d = this.target) === null || _d === void 0 ? void 0 : _d.parent) === null || _e === void 0 ? void 0 : _e.tag,
+                    id: (_g = (_f = this.target) === null || _f === void 0 ? void 0 : _f.parent) === null || _g === void 0 ? void 0 : _g.id,
+                },
+            },
+            pointer: pos,
+            offset,
+            renderPos: { x: pos.x + offset[0], y: pos.y + offset[1] },
+            size: { width, height },
+            style: { backgroundColor, stroke, color, padding, borderRadius, fontSize },
+            text,
+        });
         this.setStyle({
             fill: backgroundColor,
             stroke,
@@ -171,6 +195,7 @@ let Tooltip = class Tooltip extends di$1 {
     }
     show(pos = this.__.pointerPos) {
         this.clearShowHideTimers();
+        this.log('show', { pos, delay: this.config.showDelay, isShow: this.isShow });
         this.showTimerId = setTimeout(() => {
             this.createShapes(pos);
             this.showTimerId = null;
@@ -178,6 +203,7 @@ let Tooltip = class Tooltip extends di$1 {
     }
     hide(immediate = false) {
         this.clearShowHideTimers();
+        this.log('hide', { immediate, delay: this.config.hideDelay, isShow: this.isShow });
         if (immediate) {
             this.destroy();
         }
@@ -190,6 +216,7 @@ let Tooltip = class Tooltip extends di$1 {
     }
     update(pos) {
         this.clearShowHideTimers();
+        this.log('update', { pos, isShow: this.isShow });
         if (this.isShow) {
             this.createShapes(pos);
         }
@@ -230,6 +257,7 @@ Tooltip = __decorate([
 ], Tooltip);
 
 const defaultConfig = {
+    debug: false,
     reference: 'pointer',
     info: ['tag'],
     showType: 'value',
@@ -258,6 +286,11 @@ const defaultConfig = {
 };
 
 class TooltipPlugin {
+    log(...args) {
+        if (this.config.debug) {
+            console.log('[TooltipPlugin]', ...args);
+        }
+    }
     constructor(instance, config) {
         this.tooltipCache = new Map();
         this.includesTypeSet = new Set();
@@ -317,7 +350,8 @@ class TooltipPlugin {
             this.hideTooltip();
             return;
         }
-        if (!this.handleAllowed(target)) {
+        const allowed = this.handleAllowed(target);
+        if (!allowed) {
             this.hideTooltip();
             return;
         }
@@ -344,16 +378,24 @@ class TooltipPlugin {
         const hasIncludesRule = this.includesTypeSet.size > 0;
         const hasExcludesRule = this.excludesTypeSet.size > 0;
         if (!hasIncludesRule && !hasExcludesRule) {
+            this.log('allowed', { target: target.tag, result: true, reason: 'no rules' });
             return true;
         }
         const matchesInclude = targetIdentifiers.some((id) => this.includesTypeSet.has(id));
         const matchesExclude = targetIdentifiers.some((id) => this.excludesTypeSet.has(id));
-        if (matchesInclude)
+        if (matchesInclude) {
+            this.log('allowed', { target: target.tag, result: true, reason: 'matches include' });
             return true;
-        if (matchesExclude)
+        }
+        if (matchesExclude) {
+            this.log('allowed', { target: target.tag, result: false, reason: 'matches exclude' });
             return false;
-        if (hasIncludesRule)
+        }
+        if (hasIncludesRule) {
+            this.log('allowed', { target: target.tag, result: false, reason: 'has include rule but not matched' });
             return false;
+        }
+        this.log('allowed', { target: target.tag, result: true, reason: 'only exclude rule, not matched' });
         return true;
     }
     hideTooltip() {
@@ -377,12 +419,14 @@ class TooltipPlugin {
         });
         const cachedTooltip = this.tooltipCache.get(id);
         if (cachedTooltip && cachedTooltip.parent) {
+            this.log('tooltip update', { id, x: event.x, y: event.y });
             cachedTooltip.update({ x: event.x, y: event.y });
         }
         else {
             if (cachedTooltip) {
                 this.tooltipCache.delete(id);
             }
+            this.log('tooltip create', { id, x: event.x, y: event.y, target: target.tag });
             const tooltip = new Tooltip({
                 id,
                 pointerPos: { x: event.x, y: event.y },

package/dist/index.esm.js

@@ -134,11 +134,35 @@ let Tooltip = class Tooltip extends di$1 {
         this.config = data.config;
         this.show();
     }
+    log(...args) {
+        var _a;
+        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.debug) {
+            console.log('[Tooltip]', ...args);
+        }
+    }
     createShapes(pos = this.__.pointerPos) {
+        var _a, _b, _c, _d, _e, _f, _g;
         this.clear();
         const { width, height, text } = handleTextStyle(this.target, this.config);
         const { backgroundColor, stroke, color, padding, borderRadius, fontSize, fontWeight, fontFamily, } = this.config.style;
         let offset = this.config.offset;
+        this.log('createShapes', {
+            target: {
+                tag: (_a = this.target) === null || _a === void 0 ? void 0 : _a.tag,
+                id: (_b = this.target) === null || _b === void 0 ? void 0 : _b.id,
+                className: (_c = this.target) === null || _c === void 0 ? void 0 : _c.className,
+                parent: {
+                    tag: (_e = (_d = this.target) === null || _d === void 0 ? void 0 : _d.parent) === null || _e === void 0 ? void 0 : _e.tag,
+                    id: (_g = (_f = this.target) === null || _f === void 0 ? void 0 : _f.parent) === null || _g === void 0 ? void 0 : _g.id,
+                },
+            },
+            pointer: pos,
+            offset,
+            renderPos: { x: pos.x + offset[0], y: pos.y + offset[1] },
+            size: { width, height },
+            style: { backgroundColor, stroke, color, padding, borderRadius, fontSize },
+            text,
+        });
         this.setStyle({
             fill: backgroundColor,
             stroke,
@@ -169,6 +193,7 @@ let Tooltip = class Tooltip extends di$1 {
     }
     show(pos = this.__.pointerPos) {
         this.clearShowHideTimers();
+        this.log('show', { pos, delay: this.config.showDelay, isShow: this.isShow });
         this.showTimerId = setTimeout(() => {
             this.createShapes(pos);
             this.showTimerId = null;
@@ -176,6 +201,7 @@ let Tooltip = class Tooltip extends di$1 {
     }
     hide(immediate = false) {
         this.clearShowHideTimers();
+        this.log('hide', { immediate, delay: this.config.hideDelay, isShow: this.isShow });
         if (immediate) {
             this.destroy();
         }
@@ -188,6 +214,7 @@ let Tooltip = class Tooltip extends di$1 {
     }
     update(pos) {
         this.clearShowHideTimers();
+        this.log('update', { pos, isShow: this.isShow });
         if (this.isShow) {
             this.createShapes(pos);
         }
@@ -228,6 +255,7 @@ Tooltip = __decorate([
 ], Tooltip);
 
 const defaultConfig = {
+    debug: false,
     reference: 'pointer',
     info: ['tag'],
     showType: 'value',
@@ -256,6 +284,11 @@ const defaultConfig = {
 };
 
 class TooltipPlugin {
+    log(...args) {
+        if (this.config.debug) {
+            console.log('[TooltipPlugin]', ...args);
+        }
+    }
     constructor(instance, config) {
         this.tooltipCache = new Map();
         this.includesTypeSet = new Set();
@@ -315,7 +348,8 @@ class TooltipPlugin {
             this.hideTooltip();
             return;
         }
-        if (!this.handleAllowed(target)) {
+        const allowed = this.handleAllowed(target);
+        if (!allowed) {
             this.hideTooltip();
             return;
         }
@@ -342,16 +376,24 @@ class TooltipPlugin {
         const hasIncludesRule = this.includesTypeSet.size > 0;
         const hasExcludesRule = this.excludesTypeSet.size > 0;
         if (!hasIncludesRule && !hasExcludesRule) {
+            this.log('allowed', { target: target.tag, result: true, reason: 'no rules' });
             return true;
         }
         const matchesInclude = targetIdentifiers.some((id) => this.includesTypeSet.has(id));
         const matchesExclude = targetIdentifiers.some((id) => this.excludesTypeSet.has(id));
-        if (matchesInclude)
+        if (matchesInclude) {
+            this.log('allowed', { target: target.tag, result: true, reason: 'matches include' });
             return true;
-        if (matchesExclude)
+        }
+        if (matchesExclude) {
+            this.log('allowed', { target: target.tag, result: false, reason: 'matches exclude' });
             return false;
-        if (hasIncludesRule)
+        }
+        if (hasIncludesRule) {
+            this.log('allowed', { target: target.tag, result: false, reason: 'has include rule but not matched' });
             return false;
+        }
+        this.log('allowed', { target: target.tag, result: true, reason: 'only exclude rule, not matched' });
         return true;
     }
     hideTooltip() {
@@ -375,12 +417,14 @@ class TooltipPlugin {
         });
         const cachedTooltip = this.tooltipCache.get(id);
         if (cachedTooltip && cachedTooltip.parent) {
+            this.log('tooltip update', { id, x: event.x, y: event.y });
             cachedTooltip.update({ x: event.x, y: event.y });
         }
         else {
             if (cachedTooltip) {
                 this.tooltipCache.delete(id);
             }
+            this.log('tooltip create', { id, x: event.x, y: event.y, target: target.tag });
             const tooltip = new Tooltip({
                 id,
                 pointerPos: { x: event.x, y: event.y },