Testing improved DOM bounds measurement, see #491

phetsims · Dec 10, 2015 · 98ea2ee · 98ea2ee
1 parent a2043ed
commit 98ea2ee
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 19 deletions.
diff --git a/js/nodes/Text.js b/js/nodes/Text.js
@@ -273,6 +273,21 @@ define( function( require ) {
      * Bounds
      *----------------------------------------------------------------------------*/
 
+    getVerticalBounds: function() {
+      if ( !hybridTextNode ) {
+        return Bounds2.NOTHING; // we are the hybridTextNode, ignore us
+      }
+
+      var css = this._font.toCSS();
+      var verticalBounds = hybridFontVerticalCache[ css ];
+      if ( !verticalBounds ) {
+        hybridTextNode.setFont( this._font );
+        verticalBounds = hybridFontVerticalCache[ css ] = hybridTextNode.getBounds().copy();
+      }
+
+      return verticalBounds;
+    },
+
     accurateCanvasBounds: function() {
       var node = this;
       var svgBounds = this.approximateSVGBounds(); // this seems to be slower than expected, mostly due to Font getters
@@ -331,16 +346,7 @@ define( function( require ) {
 
     // NOTE: should return new instance, so that it can be mutated later
     approximateHybridBounds: function() {
-      if ( !hybridTextNode ) {
-        return Bounds2.NOTHING; // we are the hybridTextNode, ignore us
-      }
-
-      var css = this._font.toCSS();
-      var verticalBounds = hybridFontVerticalCache[ css ];
-      if ( !verticalBounds ) {
-        hybridTextNode.setFont( this._font );
-        verticalBounds = hybridFontVerticalCache[ css ] = hybridTextNode.getBounds().copy();
-      }
+      var verticalBounds = this.getVerticalBounds();
 
       var canvasWidth = this.approximateCanvasWidth();
 
@@ -395,6 +401,29 @@ define( function( require ) {
       return result.shiftedX( isRTL ? -width : 0 ); // should we even swap here?
     },
 
+    approximateImprovedDOMBounds: function() {
+      // TODO: reuse this div?
+      var div = document.createElement( 'div' );
+      div.style.display = 'inline-block';
+      div.style.font = this.getFont();
+      div.style.color = 'transparent';
+      div.style.padding = '0 !important';
+      div.style.margin = '0 !important';
+      div.style.position = 'absolute';
+      div.style.left = '0';
+      div.style.top = '0';
+      div.setAttribute( 'direction', this._direction );
+      div.appendChild( this.getDOMTextNode() );
+
+      document.body.appendChild( div );
+      var bounds = new Bounds2( div.offsetLeft, div.offsetTop, div.offsetLeft + div.offsetWidth + 1, div.offsetTop + div.offsetHeight + 1 );
+      document.body.removeChild( div );
+
+      // Compensate for the baseline alignment
+      var verticalBounds = this.getVerticalBounds();
+      return bounds.shiftedY( verticalBounds.minY );
+    },
+
     // @override from Node
     getSafeSelfBounds: function() {
       var expansionFactor = 1; // we use a new bounding box with a new size of size * ( 1 + 2 * expansionFactor )

diff --git a/tests/text-bounds-comparison.html b/tests/text-bounds-comparison.html
@@ -31,6 +31,7 @@
     .scene {
       position: relative;
       float: left;
+      display: 'inline-block';
     }
 
   </style>
@@ -42,17 +43,17 @@
 
 <script type="text/javascript">
 
-  var scene = new scenery.Scene( $( '#main' ) );
   var padding = 2;
 
   function boundsSnapshot( textNode ) {
 
     var canvasBounds = textNode.accurateCanvasBounds();
     var svgBounds = textNode.approximateSVGBounds();
     var domBounds = textNode.approximateDOMBounds();
+    var domImprovedBounds = textNode.approximateImprovedDOMBounds();
     var width = textNode.approximateCanvasWidth();
 
-    var unionBounds = canvasBounds.union( svgBounds ).union( domBounds );
+    var unionBounds = canvasBounds.union( svgBounds ).union( domBounds ).union( domImprovedBounds );
 
     // align the container so that our upper-left corner of the union bounds is at 0,0
     var container = new scenery.Node( {
@@ -67,7 +68,10 @@
       fill: 'rgba(255,0,0,0.4)'
     } ) );
     container.addChild( new scenery.Path( kite.Shape.bounds( domBounds ), {
-      fill: 'rgba(0,0,255,0.4)'
+      fill: 'rgba(0,0,255,0.3)'
+    } ) );
+    container.addChild( new scenery.Path( kite.Shape.bounds( domImprovedBounds ), {
+      fill: 'rgba(0,255,0,0.2)'
     } ) );
     container.addChild( new scenery.Path( kite.Shape.lineSegment( new dot.Vector2( domBounds.minX + width, domBounds.minY ), new dot.Vector2( domBounds.minX + width, domBounds.maxY ) ), {
       stroke: '#00ff00'
@@ -95,16 +99,18 @@
 
   function wrapScene( node ) {
     var $main = $( '<div>' );
-    $main.width( Math.ceil( node.width + 2 * padding ) );
-    $main.height( Math.ceil( node.height + 2 * padding ) );
+    var width = Math.ceil( node.width + 2 * padding );
+    var height = Math.ceil( node.height + 2 * padding );
+    $main.width( width );
+    $main.height( height );
 
-    var scene = new scenery.Scene( $main, {
-      // preferredSceneLayerType: scenery.SVGDefaultLayerType
-    } );
+    var scene = new scenery.Node();
+    var display = new scenery.Display( scene, { container: $main[ 0 ], width: width, height: height } );
     scene.addChild( node );
     node.x += padding;
     node.y += padding;
-    scene.updateScene();
+    display.updateDisplay();
+
     return $main.addClass( 'scene' )[ 0 ];
   }