From 04ad36b9d8a769f8c8561640c56c78dcf0fd8f4a Mon Sep 17 00:00:00 2001 From: ivmartel Date: Thu, 18 Feb 2021 14:25:59 +0100 Subject: [PATCH] Use style for more consistent label placement. Relates to #151. --- src/gui/style.js | 11 ++++++++++- src/tools/arrow.js | 21 ++++++++++++--------- src/tools/drawCommands.js | 7 ++++--- src/tools/editor.js | 5 +++-- src/tools/ellipse.js | 3 ++- src/tools/freeHand.js | 12 ++++++++---- src/tools/protractor.js | 12 ++++++++---- src/tools/rectangle.js | 9 +++++---- src/tools/roi.js | 9 +++++---- src/tools/ruler.js | 18 ++++++++++-------- 10 files changed, 67 insertions(+), 40 deletions(-) diff --git a/src/gui/style.js b/src/gui/style.js index ec55e82255..13d9711df6 100644 --- a/src/gui/style.js +++ b/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. * diff --git a/src/tools/arrow.js b/src/tools/arrow.js index 5e786f1642..45c513e541 100644 --- a/src/tools/arrow.js +++ b/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); }; diff --git a/src/tools/drawCommands.js b/src/tools/drawCommands.js index 8d33a060c4..2a9f48cfcd 100644 --- a/src/tools/drawCommands.js +++ b/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 diff --git a/src/tools/editor.js b/src/tools/editor.js index 5682f96037..9c4099b6ad 100644 --- a/src/tools/editor.js +++ b/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; diff --git a/src/tools/ellipse.js b/src/tools/ellipse.js index f0c085ab84..1c2806d030 100644 --- a/src/tools/ellipse.js +++ b/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 diff --git a/src/tools/freeHand.js b/src/tools/freeHand.js index 2fdf53d0fd..f3072e29c9 100644 --- a/src/tools/freeHand.js +++ b/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); }; diff --git a/src/tools/protractor.js b/src/tools/protractor.js index df3d89eae2..562b491697 100644 --- a/src/tools/protractor.js +++ b/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 diff --git a/src/tools/rectangle.js b/src/tools/rectangle.js index abf7fb57f9..21f2e6d80f 100644 --- a/src/tools/rectangle.js +++ b/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); }; diff --git a/src/tools/roi.js b/src/tools/roi.js index 7502c796d0..c80581d882 100644 --- a/src/tools/roi.js +++ b/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); diff --git a/src/tools/ruler.js b/src/tools/ruler.js index 1a543c83e8..ac3cc197a6 100644 --- a/src/tools/ruler.js +++ b/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); };