How to code CssRect borderEdge

Issue

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:

enter image description here

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:

enter image description here

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.

Solution

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

Answered By – Günter Zöchbauer

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *