How to code CssRect borderEdge - dart

Question

I found just what I needed to determine the dimensions of a div in Dart here
In short, it says:
Experimental
CssRect get borderEdge
Access the dimensions and position of this element's content + padding + border box.
How do code this?
I'm trying to use it with this variable:
import 'dart:html' as dom;
dom.DivElement textSpan = new dom.DivElement()
I found this example:
CssRect get borderEdge => textSpan.borderEdge;
My IDE (PHPStorm) throws up on it. I'm a Dart noob so I may be missing something obvious. Here's a screen shot:
I also get a build error:
Compiling citation|web/main.dart...
[Error from Dart2JS on citation|web/main.dart]:
packages/citation/tooltip/tooltip.dart:68:5:
Expected ';' after this.
CssRect get borderEdge => textSpan.borderEdge;
^^^^^^^
[Info from Dart2JS]:
Took 0:00:04.330468 to compile citation|web/main.dart.
Build failed.
I installed the Dart Editor and open the program in it. It didn't like it either:
tooltip.dart
This started out as the tooltip component from the Angular Dart Chapter 4 Tutorial
library tooltip;
import 'dart:html' as dom;
import 'package:angular/angular.dart';
#Decorator(selector: '[tooltip]')
class Tooltip
{
final dom.Element element;
#NgOneWay('tooltip')
TooltipModel displayModel;
dom.Element tooltipElem;
dom.Element entry; // Bibliographic entry: div in the index.html
Tooltip(this.element)
{
element..onMouseEnter.listen((_) => _createTemplate())
..onMouseLeave.listen((_) => _destroyTemplate());
}
void _createTemplate()
{
assert(displayModel != null);
tooltipElem = new dom.DivElement();
// All entries have the id 'bex' where x is an integer
entry = dom.querySelector('#be${displayModel.entryRef.toString()}');
String htmlText = entry.innerHtml;
if (displayModel.entryRef != null)
{
dom.DivElement textSpan = new dom.DivElement()
..appendHtml('<hr>')
..appendHtml(htmlText)
..style.color = "black"
..style.fontSize = "smaller"
..style.paddingBottom = "5px";
tooltipElem.append(textSpan);
}
int entryWidth = 200;
tooltipElem.style
..padding = "5px"
..paddingBottom = "0px"
..backgroundColor = "#FFF5E0"
..borderRadius = "5px"
..width = "${entryWidth}px";
// position the tooltip.
int windowHeight = dom.window.innerHeight;
int windowWidth = dom.window.innerWidth;
var elTopRight = element.offset.topRight;
var elBottomLeft = element.offset.bottomLeft;
int height = 100;
int top = elTopRight.y;
int bottom = elBottomLeft.y;
int left = elBottomLeft.x;
int right = elTopRight.x;
CssRect get borderEdge => textSpan.borderEdge;
print('borderEdge:$borderEdge');
// See if it will fit above
int y = top - height - 10;
if (y < 0) y = bottom + 10; // If it doesn't fit, put it below
// Start with the left
int x = left;
tooltipElem.style
..position = "absolute"
..top = "${y}px"
..left = "${x}px";
// Add the tooltip to the document body. We add it here because we need to position it
// absolutely, without reference to its parent element.
dom.document.body.append(tooltipElem);
}
void _destroyTemplate()
{
tooltipElem.remove();
}
}
class TooltipModel
{
final int entryRef;
TooltipModel(this.entryRef);
}
Answer
This summarizes Günter Zöchbauer's answer in the comments and an answer of my own.
The first problem was that I was using the wrong syntax given the location of the code. The correct code for this location is:
CssRect borderEdge = tooltipElem.borderEdge;
The second problem unique to my situation was that my import statement was declared as:
import 'dart:html' as dom;
The 'as dom' requires me to prefix all html api references with dom. So in my case, I needed to code:
dom.CssRect borderEdge = tooltipElem.borderEdge;
I got this code from the Angular dart tutorial. My next step is to remove that prefix so it doesn't screw me up again. Also note the answer code uses tooltipElem instead of textSpan. That change has nothing to do with the fix to the problem.

Answer 1

I tried and it works just fine (I'm using Dart bleeding edge/nightly build)