fix(Label): wrong div translate.

iTowns · Apr 6, 2021 · 5ef7197 · 5ef7197
1 parent aafd37b
commit 5ef7197
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/Core/Label.js b/src/Core/Label.js
@@ -34,6 +34,7 @@ if (document.documentElement.style.transform !== undefined) {
  * correct string).
  * @property {THREE.Vector3} position - The position in the 3D world of the
  * label.
+ * @property {number} padding - sets the padding area on all four sides of an element at once.
  * @property {Coordinates} coordinates - The coordinates of the label.
  * @property {number} order - Order of the label that will be read from the
  * style. It helps sorting and prioritizing a Label during render.
@@ -104,6 +105,8 @@ class Label extends THREE.Object3D {
         };
 
         this.order = style.order || 0;
+        // Padding value, to avoid labels being too close to each other.
+        this.padding = 2;
     }
 
     /**
@@ -120,17 +123,15 @@ class Label extends THREE.Object3D {
             this.projectedPosition.x = X;
             this.projectedPosition.y = Y;
 
-            // 2 is a padding value, to avoid labels being too close to each
-            // other. This value has been choosen arbitrarily.
-            this.boundaries.left = x + this.offset.left - 2;
-            this.boundaries.right = x + this.offset.right + 2;
-            this.boundaries.top = y + this.offset.top - 2;
-            this.boundaries.bottom = y + this.offset.bottom + 2;
+            this.boundaries.left = x + this.offset.left - this.padding;
+            this.boundaries.right = x + this.offset.right + this.padding;
+            this.boundaries.top = y + this.offset.top - this.padding;
+            this.boundaries.bottom = y + this.offset.bottom + this.padding;
         }
     }
 
     updateCSSPosition() {
-        this.content.style[STYLE_TRANSFORM] = `translate(${this.boundaries.left}px, ${this.boundaries.top}px)`;
+        this.content.style[STYLE_TRANSFORM] = `translate(${this.boundaries.left + this.padding}px, ${this.boundaries.top + this.padding}px)`;
     }
 
     /**

diff --git a/test/unit/label.js b/test/unit/label.js
@@ -140,7 +140,7 @@ describe('Label', function () {
 
         label.updateProjectedPosition(10.4, 10.6);
         label.updateCSSPosition();
-        assert.equal(label.content.style.transform, 'translate(13.4px, 13.6px)');
+        assert.equal(label.content.style.transform, 'translate(15.4px, 15.6px)');
     });
 
     it('updates the horizon culling point', function () {