From 11c37cb8b9765fc0b528d1d9bc64c34cbfaa63e2 Mon Sep 17 00:00:00 2001 From: "Val Erastov (xibyte)" Date: Wed, 25 Mar 2020 14:37:11 -0700 Subject: [PATCH] improving dimensions --- test/coreTests/utils/sketcherUtils.js | 12 +++- web/app/sketcher/shapes/dim.js | 99 +++++++++++++++++++-------- web/app/sketcher/viewer2d.js | 19 ++--- 3 files changed, 89 insertions(+), 41 deletions(-) diff --git a/test/coreTests/utils/sketcherUtils.js b/test/coreTests/utils/sketcherUtils.js index dda49319..138e4229 100644 --- a/test/coreTests/utils/sketcherUtils.js +++ b/test/coreTests/utils/sketcherUtils.js @@ -166,6 +166,12 @@ export class TestSegment { } } -export function modelToScreen(viewer, x, y) { - return viewer.modelToScreen(x, y); -} +export function modelToScreen(x, y) { + if (this.screenToModelMatrix) { + let modelToScreenMx = this.screenToModelMatrix.invert(); + [x, y] = modelToScreenMx.apply3([x, y, 0]); + } + x /= this.retinaPxielRatio; + y = (this.canvas.height - y) / this.retinaPxielRatio; + return [x, y]; +} \ No newline at end of file diff --git a/web/app/sketcher/shapes/dim.js b/web/app/sketcher/shapes/dim.js index bc8e9332..f481c0fc 100644 --- a/web/app/sketcher/shapes/dim.js +++ b/web/app/sketcher/shapes/dim.js @@ -26,9 +26,12 @@ class LinearDimension extends SketchObject { getB() { return this.b } drawImpl(ctx, scale, viewer) { - - var off = 30 * viewer.dimScale; - var textOff = getTextOff(viewer.dimScale); + + const dimScale = viewer.dimScale; + + const unscale = 1 /scale; + const off = unscale * 15; + const textOff = unscale * 3; // getTextOff(dimScale); var a, b, startA, startB; if (this.flip) { @@ -43,7 +46,7 @@ class LinearDimension extends SketchObject { startB = this.b; } - var d = math.distanceAB(a, b); + const d = math.distanceAB(a, b); var _vx = - (b.y - a.y); var _vy = b.x - a.x; @@ -69,7 +72,7 @@ class LinearDimension extends SketchObject { function drawRef(start, x, y) { var vec = new Vector(x - start.x, y - start.y); vec._normalize(); - vec._multiply(7 * viewer.dimScale); + vec._multiply(7 * unscale); ctx.moveTo(start.x, start.y ); ctx.lineTo(x, y); @@ -81,35 +84,69 @@ class LinearDimension extends SketchObject { ctx.closePath(); ctx.stroke(); - - function drawArrow(x, y) { - var s1 = 50; - var s2 = 20; - ctx.lineCap = 'round'; + + const arrowWpx = 15; + const arrowW = arrowWpx * unscale; + const arrowH = 4 * unscale; + + function drawArrow(x, y, nx, ny) { ctx.beginPath(); - ctx.moveTo(x, y); - ctx.lineTo(x - s1, y - s2); + ctx.moveTo(x, y, 0); + ctx.lineTo(x + ny * arrowW + nx * arrowH, y + -nx * arrowW + ny * arrowH ); + ctx.lineTo(x + ny * arrowW - nx * arrowH, y + -nx * arrowW - ny * arrowH); + ctx.closePath(); + ctx.fill(); + } + + function drawExtensionLine(x, y, nx, ny, width) { + ctx.beginPath(); + ctx.moveTo(x + ny * arrowW, y + -nx * arrowW); + ctx.lineTo(x + ny * (arrowW + width), y + -nx * (arrowW + width)); ctx.closePath(); ctx.stroke(); } - - // drawArrow(_ax, _ay); - // drawArrow(_bx, _by); - - ctx.font= (12 * viewer.dimScale) + "px Arial"; - var txt = d.toFixed(2); - var h = d / 2 - ctx.measureText(txt).width / 2; - - if (h > 0) { - var tx = (_ax + _vxn * textOff) - (- _vyn) * h; - var ty = (_ay + _vyn * textOff) - ( _vxn) * h; - ctx.save(); - ctx.translate(tx, ty); - ctx.rotate( - Math.atan2(_vxn, _vyn)); - ctx.scale(1, -1); - ctx.fillText(txt, 0, 0); - ctx.restore(); + + ctx.font = (12) + "px Arial"; + const txt = d.toFixed(2); + const textMetrics = ctx.measureText(txt); + + const arrowToTextPaddingPx = 2; + const takenByArrow = viewer.screenToModelDistance(2 * (arrowWpx + arrowToTextPaddingPx)); + + const availableArea = d - takenByArrow; + + const modelTextWidth = viewer.screenToModelDistance(textMetrics.width); + + const innerMode = modelTextWidth <= availableArea; + + let tx, ty; + + if (innerMode) { + drawArrow(_ax, _ay, _vxn, _vyn); + drawArrow(_bx, _by, -_vxn, -_vyn); + + const h = d/2 - modelTextWidth/2; + tx = (_ax + _vxn * textOff) - (- _vyn) * h; + ty = (_ay + _vyn * textOff) - ( _vxn) * h; + } else { + drawArrow(_ax, _ay, -_vxn, -_vyn); + drawArrow(_bx, _by, _vxn, _vyn); + const outerArrowToTextPaddingPx = 6; + + drawExtensionLine(_bx, _by, _vxn, _vyn, modelTextWidth + 2 * outerArrowToTextPaddingPx * unscale); + drawExtensionLine(_ax, _ay, -_vxn, -_vyn, outerArrowToTextPaddingPx * unscale); + + + tx = (_bx + _vxn * textOff) - (- _vyn) * (arrowWpx + outerArrowToTextPaddingPx) * unscale; + ty = (_by + _vyn * textOff) - ( _vxn) * (arrowWpx + outerArrowToTextPaddingPx) * unscale; } + ctx.save(); + ctx.translate(tx, ty); + ctx.rotate( - Math.atan2(_vxn, _vyn)); + ctx.scale(unscale, -unscale); + ctx.fillText(txt, 0, 0); + ctx.restore(); + } normalDistance(aim) { @@ -117,6 +154,10 @@ class LinearDimension extends SketchObject { } } + + + + export class Dimension extends LinearDimension { constructor(a, b) { super(a, b); diff --git a/web/app/sketcher/viewer2d.js b/web/app/sketcher/viewer2d.js index 46b9aea9..232cc696 100644 --- a/web/app/sketcher/viewer2d.js +++ b/web/app/sketcher/viewer2d.js @@ -327,7 +327,7 @@ class Viewer { const bounds = bbox.bbox; this.showBounds(bounds[0], bounds[1], bounds[2], bounds[3]); - bbox.inc(20 / this.viewer.scale); + bbox.inc(20 / this.scale); this.showBounds(bounds[0], bounds[1], bounds[2], bounds[3]); } @@ -357,14 +357,13 @@ class Viewer { return out; }; - modelToScreen(x, y) { - if (this.screenToModelMatrix) { - let modelToScreenMx = this.screenToModelMatrix.invert(); - [x, y] = modelToScreenMx.apply3([x, y, 0]); - } - x /= this.retinaPxielRatio; - y = (this.canvas.height - y) / this.retinaPxielRatio; - return [x, y]; + screenToModelDistance(dist) { + measurer.x = 0; + measurer.y = 0; + this.screenToModel2(0,0,measurer); + const x0 = measurer.x; + this.screenToModel2(dist,0,measurer); + return Math.abs(measurer.x - x0); } accept = visitor => { @@ -633,4 +632,6 @@ const CAPTURES = { }, }; +const measurer = {x: 0, y: 0, z: 0}; + export {Viewer, Styles} \ No newline at end of file