diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index b65f47451..71ad8e441 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -282,15 +282,14 @@ export default {
* @private
* */
updateBadge(el, pos) {
- var $el = $(el);
- var canvas = this.canvas;
- var config = canvas.getConfig();
+ const { canvas } = this;
+ const config = canvas.getConfig();
const ppfx = config.pStylePrefix || '';
- var customeLabel = config.customBadgeLabel;
+ const customeLabel = config.customBadgeLabel;
+ const model = $(el).data('model');
this.cacheEl = el;
- var model = $el.data('model');
if (!model || !model.get('badgable')) return;
- var badge = this.getBadge();
+ const badge = this.getBadge();
const icon = model.getIcon();
const clsBadge = `${ppfx}badge`;
let badgeLabel = `${
@@ -299,21 +298,19 @@ export default {
${model.getName()}
`;
badgeLabel = customeLabel ? customeLabel(model) : badgeLabel;
badge.innerHTML = badgeLabel;
- var bStyle = badge.style;
- var u = 'px';
+
+ const u = 'px';
+ const bStyle = badge.style;
bStyle.display = 'block';
- var canvasPos = this.getCanvasPosition();
-
- if (canvasPos) {
- const canvasTop = canvasPos.top;
- const canvasLeft = canvasPos.left;
- const posTop = pos.top - (badge ? badge.offsetHeight : 0);
- const badgeW = badge ? badge.offsetWidth : 0;
- var top = posTop < canvasTop ? canvasTop : posTop;
- var left = pos.left + badgeW < canvasLeft ? canvasLeft : pos.left;
- bStyle.top = top + u;
- bStyle.left = left + u;
- }
+ const badgeH = badge ? badge.offsetHeight : 0;
+ const posTop = this.frameRect(el, 1, pos) - badgeH;
+ const badgeW = badge ? badge.offsetWidth : 0;
+ const top = posTop < 0 ? 0 : posTop;
+ const posLeft = this.frameRect(el, 0, pos);
+ const left = posLeft + badgeW < 0 ? 0 : posLeft;
+
+ bStyle.top = top + u;
+ bStyle.left = left + u;
},
frameRect(el, top = 1, pos) {