Use style for more consistent label placement. Relates to #151.

src/gui/style.js

@@ -108,12 +108,21 @@ dwv.html.Style = function () {
   /**
    * Set the display scale.
    *
-   * @param {string} scale The display scale.
+   * @param {number} scale The display scale.
    */
   this.setScale = function (scale) {
     displayScale = scale;
   };
 
+  /**
+   * Get the display scale.
+   *
+   * @returns {number} scale The display scale.
+   */
+  this.getScale = function () {
+    return displayScale;
+  };
+
   /**
    * Scale an input value.
    *

src/tools/arrow.js

@@ -64,9 +64,11 @@ dwv.tool.draw.ArrowFactory.prototype.create = function (
     strokeScaleEnabled: false,
     name: 'shape'
   });
-    // larger hitfunc
-  var linePerp0 = dwv.math.getPerpendicularLine(line, points[0], 10);
-  var linePerp1 = dwv.math.getPerpendicularLine(line, points[1], 10);
+  // larger hitfunc
+  var linePerp0 = dwv.math.getPerpendicularLine(
+    line, points[0], style.scale(10));
+  var linePerp1 = dwv.math.getPerpendicularLine(
+    line, points[1], style.scale(10));
   kshape.hitFunc(function (context) {
     context.beginPath();
     context.moveTo(linePerp0.getBegin().getX(), linePerp0.getBegin().getY());
@@ -114,8 +116,8 @@ dwv.tool.draw.ArrowFactory.prototype.create = function (
   var dX = line.getBegin().getX() > line.getEnd().getX() ? 0 : -1;
   var dY = line.getBegin().getY() > line.getEnd().getY() ? -1 : 0.5;
   var klabel = new Konva.Label({
-    x: line.getEnd().getX() + dX * 25,
-    y: line.getEnd().getY() + dY * 15,
+    x: line.getEnd().getX() + dX * ktext.width(),
+    y: line.getEnd().getY() + dY * style.scale(15),
     name: 'label'
   });
   klabel.add(ktext);
@@ -135,9 +137,10 @@ dwv.tool.draw.ArrowFactory.prototype.create = function (
  * Update an arrow shape.
  *
  * @param {object} anchor The active anchor.
- * @param {object} _image The associated image.
+ * @param {object} style The app style.
+ * @param {object} _viewController The associated view controller.
  */
-dwv.tool.draw.UpdateArrow = function (anchor, _image) {
+dwv.tool.draw.UpdateArrow = function (anchor, style, _viewController) {
   // parent group
   var group = anchor.getParent();
   // associated shape
@@ -213,8 +216,8 @@ dwv.tool.draw.UpdateArrow = function (anchor, _image) {
   var dX = line.getBegin().getX() > line.getEnd().getX() ? 0 : -1;
   var dY = line.getBegin().getY() > line.getEnd().getY() ? -1 : 0.5;
   var textPos = {
-    x: line.getEnd().getX() + dX * 25,
-    y: line.getEnd().getY() + dY * 15
+    x: line.getEnd().getX() + dX * ktext.width(),
+    y: line.getEnd().getY() + dY * style.scale(15)
   };
   klabel.position(textPos);
 };

src/tools/drawCommands.js

@@ -204,10 +204,11 @@ dwv.tool.MoveGroupCommand.prototype.onUndo = function (_event) {
  * @param {object} endAnchor The anchor that ends the change.
  * @param {object} layer The layer where to change the group.
  * @param {object} viewController The associated viewController.
+ * @param {object} style The app style.
  * @class
  */
 dwv.tool.ChangeGroupCommand = function (
-  name, func, startAnchor, endAnchor, layer, viewController) {
+  name, func, startAnchor, endAnchor, layer, viewController, style) {
   /**
    * Get the command name.
    *
@@ -224,7 +225,7 @@ dwv.tool.ChangeGroupCommand = function (
    */
   this.execute = function () {
     // change shape
-    func(endAnchor, viewController);
+    func(endAnchor, style, viewController);
     // draw
     layer.draw();
     // callback
@@ -245,7 +246,7 @@ dwv.tool.ChangeGroupCommand = function (
    */
   this.undo = function () {
     // invert change shape
-    func(startAnchor, viewController);
+    func(startAnchor, style, viewController);
     // draw
     layer.draw();
     // callback

src/tools/editor.js

@@ -356,7 +356,7 @@ dwv.tool.ShapeEditor = function (app) {
     anchor.on('dragmove.edit', function (evt) {
       // update shape
       if (updateFunction) {
-        updateFunction(this, viewController);
+        updateFunction(this, app.getStyle(), viewController);
       } else {
         dwv.logger.warn('No update function!');
       }
@@ -379,7 +379,8 @@ dwv.tool.ShapeEditor = function (app) {
         startAnchor,
         endAnchor,
         this.getLayer(),
-        viewController
+        viewController,
+        app.getStyle()
       );
       chgcmd.onExecute = drawEventCallback;
       chgcmd.onUndo = drawEventCallback;

src/tools/ellipse.js

@@ -102,9 +102,10 @@ dwv.tool.draw.EllipseFactory.prototype.create = function (
  * Update an ellipse shape.
  *
  * @param {object} anchor The active anchor.
+ * @param {object} _style The app style.
  * @param {object} viewController The associated view controller.
  */
-dwv.tool.draw.UpdateEllipse = function (anchor, viewController) {
+dwv.tool.draw.UpdateEllipse = function (anchor, _style, viewController) {
   // parent group
   var group = anchor.getParent();
   // associated shape

src/tools/freeHand.js

@@ -84,7 +84,7 @@ dwv.tool.draw.FreeHandFactory.prototype.create = function (
   // label
   var klabel = new Konva.Label({
     x: points[0].getX(),
-    y: points[0].getY() + 10,
+    y: points[0].getY() + style.scale(10),
     name: 'label'
   });
   klabel.add(ktext);
@@ -103,9 +103,10 @@ dwv.tool.draw.FreeHandFactory.prototype.create = function (
  * Update a FreeHand shape.
  *
  * @param {object} anchor The active anchor.
- * @param {object} _image The associated image.
+ * @param {object} style The app style.
+ * @param {object} _viewController The associated view controller.
  */
-dwv.tool.draw.UpdateFreeHand = function (anchor, _image) {
+dwv.tool.draw.UpdateFreeHand = function (anchor, style, _viewController) {
   // parent group
   var group = anchor.getParent();
   // associated shape
@@ -136,6 +137,9 @@ dwv.tool.draw.UpdateFreeHand = function (anchor, _image) {
   ktext.quant = null;
   ktext.setText(dwv.utils.replaceFlags(ktext.textExpr, ktext.quant));
   // update position
-  var textPos = {x: points[0] + kline.x(), y: points[1] + kline.y() + 10};
+  var textPos = {
+    x: points[0] + kline.x(),
+    y: points[1] + kline.y() + style.scale(10)
+  };
   klabel.position(textPos);
 };

src/tools/protractor.js

@@ -116,7 +116,7 @@ dwv.tool.draw.ProtractorFactory.prototype.create = function (
     var midY = (line0.getMidpoint().getY() + line1.getMidpoint().getY()) / 2;
     var klabel = new Konva.Label({
       x: midX,
-      y: midY - 15,
+      y: midY - style.scale(15),
       name: 'label'
     });
     klabel.add(ktext);
@@ -148,9 +148,10 @@ dwv.tool.draw.ProtractorFactory.prototype.create = function (
  * Update a protractor shape.
  *
  * @param {object} anchor The active anchor.
- * @param {object} _image The associated image.
+ * @param {object} style The app style.
+ * @param {object} _viewController The associated view controller.
  */
-dwv.tool.draw.UpdateProtractor = function (anchor, _image) {
+dwv.tool.draw.UpdateProtractor = function (anchor, style, _viewController) {
   // parent group
   var group = anchor.getParent();
   // associated shape
@@ -229,7 +230,10 @@ dwv.tool.draw.UpdateProtractor = function (anchor, _image) {
   // update position
   var midX = (line0.getMidpoint().getX() + line1.getMidpoint().getX()) / 2;
   var midY = (line0.getMidpoint().getY() + line1.getMidpoint().getY()) / 2;
-  var textPos = {x: midX, y: midY - 15};
+  var textPos = {
+    x: midX,
+    y: midY - style.scale(15)
+  };
   klabel.position(textPos);
 
   // arc

src/tools/rectangle.js

@@ -82,7 +82,7 @@ dwv.tool.draw.RectangleFactory.prototype.create = function (
   // label
   var klabel = new Konva.Label({
     x: rectangle.getBegin().getX(),
-    y: rectangle.getEnd().getY() + 10,
+    y: rectangle.getEnd().getY() + style.scale(10),
     name: 'label'
   });
   klabel.add(ktext);
@@ -101,9 +101,10 @@ dwv.tool.draw.RectangleFactory.prototype.create = function (
  * Update a rectangle shape.
  *
  * @param {object} anchor The active anchor.
+ * @param {object} style The app style.
  * @param {object} viewController The associated view controller.
  */
-dwv.tool.draw.UpdateRect = function (anchor, viewController) {
+dwv.tool.draw.UpdateRect = function (anchor, style, viewController) {
   // parent group
   var group = anchor.getParent();
   // associated shape
@@ -182,8 +183,8 @@ dwv.tool.draw.UpdateRect = function (anchor, viewController) {
   ktext.setText(dwv.utils.replaceFlags(ktext.textExpr, ktext.quant));
   // update position
   var textPos = {
-    x: rect.getBegin().getX(),
-    y: rect.getEnd().getY() + 10
+    x: rect.getBegin().getX() - group.x(),
+    y: rect.getEnd().getY() - group.y() + style.scale(10)
   };
   klabel.position(textPos);
 };

src/tools/roi.js

@@ -88,7 +88,7 @@ dwv.tool.draw.RoiFactory.prototype.create = function (
   // label
   var klabel = new Konva.Label({
     x: roi.getPoint(0).getX(),
-    y: roi.getPoint(0).getY() + 10,
+    y: roi.getPoint(0).getY() + style.scale(10),
     name: 'label'
   });
   klabel.add(ktext);
@@ -107,9 +107,10 @@ dwv.tool.draw.RoiFactory.prototype.create = function (
  * Update a roi shape.
  *
  * @param {object} anchor The active anchor.
- * @param {object} _image The associated image.
+ * @param {object} style The app style.
+ * @param {object} _viewController The associated view controller.
  */
-dwv.tool.draw.UpdateRoi = function (anchor, _image) {
+dwv.tool.draw.UpdateRoi = function (anchor, style, _viewController) {
   // parent group
   var group = anchor.getParent();
   // associated shape
@@ -141,7 +142,7 @@ dwv.tool.draw.UpdateRoi = function (anchor, _image) {
   // update position
   var textPos = {
     x: points[0] + kroi.x(),
-    y: points[1] + kroi.y() + 10
+    y: points[1] + kroi.y() + style.scale(10)
   };
   klabel.position(textPos);
 

src/tools/ruler.js

@@ -63,7 +63,7 @@ dwv.tool.draw.RulerFactory.prototype.create = function (
     name: 'shape'
   });
 
-  var tickLen = 10 * style.getScaledStrokeWidth();
+  var tickLen = style.scale(10);
 
   // tick begin
   var linePerp0 = dwv.math.getPerpendicularLine(line, points[0], tickLen);
@@ -118,12 +118,13 @@ dwv.tool.draw.RulerFactory.prototype.create = function (
   ktext.longText = '';
   ktext.quant = quant;
   ktext.setText(dwv.utils.replaceFlags(ktext.textExpr, ktext.quant));
+
   // label
   var dX = line.getBegin().getX() > line.getEnd().getX() ? 0 : -1;
   var dY = line.getBegin().getY() > line.getEnd().getY() ? -1 : 0.5;
   var klabel = new Konva.Label({
-    x: line.getEnd().getX() + dX * 25,
-    y: line.getEnd().getY() + dY * 15,
+    x: line.getEnd().getX() + dX * ktext.width(),
+    y: line.getEnd().getY() + dY * style.scale(15),
     name: 'label'
   });
   klabel.add(ktext);
@@ -144,9 +145,10 @@ dwv.tool.draw.RulerFactory.prototype.create = function (
  * Update a ruler shape.
  *
  * @param {object} anchor The active anchor.
+ * @param {object} style The app style.
  * @param {object} viewController The associated view controller.
  */
-dwv.tool.draw.UpdateRuler = function (anchor, viewController) {
+dwv.tool.draw.UpdateRuler = function (anchor, style, viewController) {
   // parent group
   var group = anchor.getParent();
   // associated shape
@@ -197,12 +199,12 @@ dwv.tool.draw.UpdateRuler = function (anchor, viewController) {
   // tick
   var p2b = new dwv.math.Point2D(bx, by);
   var p2e = new dwv.math.Point2D(ex, ey);
-  var linePerp0 = dwv.math.getPerpendicularLine(line, p2b, 10);
+  var linePerp0 = dwv.math.getPerpendicularLine(line, p2b, style.scale(10));
   ktick0.points([linePerp0.getBegin().getX(),
     linePerp0.getBegin().getY(),
     linePerp0.getEnd().getX(),
     linePerp0.getEnd().getY()]);
-  var linePerp1 = dwv.math.getPerpendicularLine(line, p2e, 10);
+  var linePerp1 = dwv.math.getPerpendicularLine(line, p2e, style.scale(10));
   ktick1.points([linePerp1.getBegin().getX(),
     linePerp1.getBegin().getY(),
     linePerp1.getEnd().getX(),
@@ -226,8 +228,8 @@ dwv.tool.draw.UpdateRuler = function (anchor, viewController) {
   var dX = line.getBegin().getX() > line.getEnd().getX() ? 0 : -1;
   var dY = line.getBegin().getY() > line.getEnd().getY() ? -1 : 0.5;
   var textPos = {
-    x: line.getEnd().getX() + dX * 25,
-    y: line.getEnd().getY() + dY * 15
+    x: line.getEnd().getX() + dX * ktext.width(),
+    y: line.getEnd().getY() + dY * style.scale(15)
   };
   klabel.position(textPos);
 };