diff --git a/src/engine/tools2d/ToolAngle.js b/src/engine/tools2d/ToolAngle.js index c8a0d03a..ab50f516 100644 --- a/src/engine/tools2d/ToolAngle.js +++ b/src/engine/tools2d/ToolAngle.js @@ -13,7 +13,7 @@ // Imports // ********************************************** -// import Modes2d from '../../store/Modes2d'; +import PointerChecker from '../utils/PointerChecker'; import ToolDistance from './ToolDistance'; // ********************************************** @@ -78,18 +78,19 @@ class ToolAngle { const vScr0 = ToolDistance.textureToScreen(objAngle.points[0].x, objAngle.points[0].y, this.m_wScreen, this.m_hScreen, store); const vScr1 = ToolDistance.textureToScreen(objAngle.points[1].x, objAngle.points[1].y, this.m_wScreen, this.m_hScreen, store); const vScr2 = ToolDistance.textureToScreen(objAngle.points[2].x, objAngle.points[2].y, this.m_wScreen, this.m_hScreen, store); - const MIN_DIST = 4.0; - if (this.getDistMm(vScr, vScr0) <= MIN_DIST) { - this.m_objEdit = objAngle; - return objAngle.points[0]; - } - if (this.getDistMm(vScr, vScr1) <= MIN_DIST) { + + const vScrLine1_S = vScr0; + const vScrLine1_E = vScr1; + const vScrLine2_S = vScr0; + const vScrLine2_E = vScr2; + + if (PointerChecker.isPointerOnLine(vScrLine1_S, vScrLine1_E, vScr)) { this.m_objEdit = objAngle; - return objAngle.points[1]; + return objAngle.points; } - if (this.getDistMm(vScr, vScr2) <= MIN_DIST) { + if (PointerChecker.isPointerOnLine(vScrLine2_S, vScrLine2_E, vScr)) { this.m_objEdit = objAngle; - return objAngle.points[2]; + return objAngle.points; } } return null; @@ -142,11 +143,9 @@ class ToolAngle { const M_180 = 180.0; const M_PI = 3.1415926535; if (cosAlp > 1.0) { - // console.log('get Angle > 1'); return 0.0; } if (cosAlp < -1.0) { - // console.log('get Angle < -1'); return 180.0; } const ang = (Math.acos(cosAlp) * M_180) / M_PI; @@ -163,10 +162,8 @@ class ToolAngle { } this.m_numClicks++; - // console.log('1st click: add 3 points'); } else if (this.m_numClicks === 1) { this.m_numClicks++; - // console.log(`2st click: points are: ${this.m_points[0].x}, ${this.m_points[0].y} -> ${this.m_points[1].x}, ${this.m_points[1].y}`); } else { console.log('3rd click: finalize angle'); // this.m_numClicks === 2 @@ -203,7 +200,6 @@ class ToolAngle { for (let idx = this.m_numClicks; idx < NUM_3; idx++) { this.m_points[idx].x = vTex.x; this.m_points[idx].y = vTex.y; - // console.log(`onMouseMove. modify point[${idx}]: now = ${vTex.x}, ${vTex.y}`); } // invoke redraw this.m_objGraphics2d.forceUpdate(); diff --git a/src/engine/tools2d/ToolArea.js b/src/engine/tools2d/ToolArea.js index ca6dfe00..9137d7ac 100644 --- a/src/engine/tools2d/ToolArea.js +++ b/src/engine/tools2d/ToolArea.js @@ -14,6 +14,7 @@ // ********************************************** import Modes2d from '../../store/Modes2d'; +import PointerChecker from '../utils/PointerChecker'; import ToolDistance from './ToolDistance'; // ********************************************** @@ -71,13 +72,27 @@ class ToolArea { const numAreas = this.m_areas.length; for (let i = 0; i < numAreas; i++) { const objArea = this.m_areas[i]; + const lastPoint = {}; for (let j = 0; j < objArea.m_points.length; j++) { - const vScrProj = ToolDistance.textureToScreen(objArea.m_points[j].x, objArea.m_points[j].y, this.m_wScreen, this.m_hScreen, store); - const MIN_DIST = 4.0; - if (this.getDistMm(vScr, vScrProj) <= MIN_DIST) { + const vScrProj_S = ToolDistance.textureToScreen( + objArea.m_points[j].x, + objArea.m_points[j].y, + this.m_wScreen, + this.m_hScreen, + store + ); + if (!j) { + lastPoint.x = vScrProj_S.x; + lastPoint.y = vScrProj_S.y; + } + const vScrProj_E = + j < objArea.m_points.length - 1 + ? ToolDistance.textureToScreen(objArea.m_points[j + 1].x, objArea.m_points[j + 1].y, this.m_wScreen, this.m_hScreen, store) + : lastPoint; + if (PointerChecker.isPointerOnLine(vScrProj_S, vScrProj_E, vScr)) { this.m_objEdit = objArea; return objArea.m_points[j]; - } // if too close pick + } } // for (j) all point in area } // for (i) all areas return null; @@ -94,11 +109,8 @@ class ToolArea { const y = vVolOld.y; vVolOld.x = vVolNew.x; vVolOld.y = vVolNew.y; - //const vObjSelfInters = ToolArea.getSelfIntersectPoint(this.m_objEdit.m_points); - //if (vObjSelfInters !== null) { const hasInters = ToolArea.hasSelfIntersection(this.m_objEdit.m_points); if (hasInters) { - // console.log('ToolArea. self inters found'); vVolOld.x = x; vVolOld.y = y; } @@ -242,7 +254,6 @@ class ToolArea { m_vIntersection: vInter, m_lineIndex: 0, }; - // console.log('getSelfIntersection: detect with start'); return objInter; } return null; @@ -444,7 +455,6 @@ class ToolArea { const objArea = this.m_areas[a]; const isClosed = objArea.m_isClosed; const numPoints = isClosed ? objArea.m_points.length + 1 : objArea.m_points.length; - // console.log(`ToolArea. render ${numPoints} points in poly`); // calc area centroid in screen let xScrCenter = 0.0; @@ -454,7 +464,6 @@ class ToolArea { for (let i = 0; i < numPoints; i++) { const iPoly = i < objArea.m_points.length ? i : 0; const vTex0 = objArea.m_points[iPoly]; - // console.log(`ToolArea. render point ${vTex0.x}, ${vTex0.y} `); const vScr = ToolDistance.textureToScreen(vTex0.x, vTex0.y, this.m_wScreen, this.m_hScreen, store); if (i === 0) { ctx.moveTo(vScr.x, vScr.y); @@ -474,13 +483,6 @@ class ToolArea { // draw area if (isClosed) { const strMsg = objArea.m_area.toFixed(2) + ' mm^2'; - // const SHIFT_UP = 8; - //const vTex0 = objArea.m_points[0]; - //const vs0 = ToolDistance.textureToScreen(vTex0.x, vTex0.y, this.m_wScreen, this.m_hScreen, store); - //const xText = vs0.x; - //const yText = vs0.y - SHIFT_UP; - // ctx.fillText(strMsg, xText, yText); - ctx.fillText(strMsg, xScrCenter, yScrCenter); } // if this poly closed } // for (a) all polys diff --git a/src/engine/tools2d/ToolDelete.js b/src/engine/tools2d/ToolDelete.js index 42c8a6e6..bf861718 100644 --- a/src/engine/tools2d/ToolDelete.js +++ b/src/engine/tools2d/ToolDelete.js @@ -13,8 +13,6 @@ // Imports // ********************************************** -import ToolDistance from './ToolDistance'; - // ********************************************** // Class // ********************************************** @@ -90,8 +88,7 @@ class ToolDelete { const objTool = tools[i]; const vDetect = objTool.getEditPoint(vScr, store); if (vDetect !== null) { - // console.log(`ToolEdit. point tracked: ${vDetect.x}, ${vDetect.y}`); - this.m_pointTracked = vDetect; + this.m_pointTracked = vScr; this.m_toolTracked = objTool; break; } @@ -101,15 +98,6 @@ class ToolDelete { // invoke forced 2d render this.m_objGraphics2d.forceUpdate(); } - } else { - /* - if (this.m_pointTracked !== null) { - const vTexNew = ToolDistance.screenToTexture(xScr, yScr, this.m_wScreen, this.m_hScreen, store); - this.m_toolTracked.moveEditPoint(this.m_pointTracked, vTexNew); - // invoke forced 2d render - this.m_objGraphics2d.forceUpdate(); - } // if we have tracked point - */ } } @@ -124,17 +112,24 @@ class ToolDelete { * @param {object} ctx - html5 canvas context * @param {object} store - global store with app parameters */ - render(ctx, store) { + render(ctx) { if (this.m_pointTracked !== null) { - const vScr = ToolDistance.textureToScreen(this.m_pointTracked.x, this.m_pointTracked.y, this.m_wScreen, this.m_hScreen, store); - const RAD_CIRCLE_EDIT = 4; - //ctx.lineWidth = 2; - //ctx.strokeStyle = 'green'; - ctx.fillStyle = 'rgb(250, 120, 120)'; + const vScr = this.m_pointTracked; ctx.beginPath(); - ctx.arc(vScr.x, vScr.y, RAD_CIRCLE_EDIT, 0.0, 2 * 3.1415962, false); - // ctx.stroke(); - ctx.fill(); + + // Set the line style + ctx.lineWidth = 4; + ctx.strokeStyle = 'red'; + + // Draw the "x" symbol + ctx.beginPath(); + ctx.moveTo(vScr.x - 15, vScr.y - 15); // Move to the starting point (x-15, y-15) + ctx.lineTo(vScr.x + 15, vScr.y + 15); // Draw a line to (x+15, y+15) + ctx.moveTo(vScr.x + 15, vScr.y - 15); // Move to (x+15, y-15) + ctx.lineTo(vScr.x - 15, vScr.y + 15); + + // Stroke the line to actually draw the lines + ctx.stroke(); } } // end render } // end class ToolText diff --git a/src/engine/tools2d/ToolDistance.js b/src/engine/tools2d/ToolDistance.js index 16e7a9cb..254832b5 100644 --- a/src/engine/tools2d/ToolDistance.js +++ b/src/engine/tools2d/ToolDistance.js @@ -14,6 +14,7 @@ // ********************************************** import Modes2d from '../../store/Modes2d'; +import PointerChecker from '../utils/PointerChecker'; // ********************************************** // Class @@ -64,15 +65,10 @@ class ToolDistance { const objLine = this.m_lines[i]; const vScrS = ToolDistance.textureToScreen(objLine.vs.x, objLine.vs.y, this.m_wScreen, this.m_hScreen, store); const vScrE = ToolDistance.textureToScreen(objLine.ve.x, objLine.ve.y, this.m_wScreen, this.m_hScreen, store); - const MIN_DIST = 4.0; - if (this.getDistMm(vScr, vScrS) <= MIN_DIST) { + if (PointerChecker.isPointerOnLine(vScrS, vScrE, vScr)) { this.m_objEdit = objLine; return objLine.vs; } - if (this.getDistMm(vScr, vScrE) <= MIN_DIST) { - this.m_objEdit = objLine; - return objLine.ve; - } } return null; } @@ -199,8 +195,6 @@ class ToolDistance { }; this.m_lines.push(objLine); this.m_mouseDown = true; - // this.m_pointStart = v; - // console.log(`onMouseDown: ${xScr}, ${yScr}`); } onMouseMove(xScr, yScr, store) { diff --git a/src/engine/tools2d/ToolRect.js b/src/engine/tools2d/ToolRect.js index 48f41311..4953a8e9 100644 --- a/src/engine/tools2d/ToolRect.js +++ b/src/engine/tools2d/ToolRect.js @@ -59,7 +59,10 @@ class ToolRect { getDistMm(vs, ve) { const dx = vs.x - ve.x; const dy = vs.y - ve.y; + console.log('dx', dx); + console.log('dy', dy); const dist = Math.sqrt(dx * dx * this.m_xPixelSize * this.m_xPixelSize + dy * dy * this.m_yPixelSize * this.m_yPixelSize); + console.log('dist', dist); return dist; } @@ -78,15 +81,26 @@ class ToolRect { const vScrMin = ToolDistance.textureToScreen(objRect.vMin.x, objRect.vMin.y, this.m_wScreen, this.m_hScreen, store); const vScrMax = ToolDistance.textureToScreen(objRect.vMax.x, objRect.vMax.y, this.m_wScreen, this.m_hScreen, store); - const MIN_DIST = 4.0; - if (this.getDistMm(vScr, vScrMin) <= MIN_DIST) { + // Check if the point is inside or on the border of the rectangle + if ( + (vScrMin.x < vScrMax.x && vScrMin.x <= vScr.x && vScr.x <= vScrMax.x && vScrMin.y <= vScr.y && vScr.y <= vScrMax.y) || + (vScrMin.x < vScrMax.x && + vScrMin.y > vScrMax.y && + vScrMin.x <= vScr.x && + vScr.x <= vScrMax.x && + vScrMin.y >= vScr.y && + vScr.y >= vScrMax.y) || + (vScrMin.x > vScrMax.x && vScrMin.x >= vScr.x && vScr.x >= vScrMax.x && vScrMin.y <= vScr.y && vScr.y <= vScrMax.y) || + (vScrMin.x > vScrMax.x && + vScrMin.y > vScrMax.y && + vScrMin.x >= vScr.x && + vScr.x >= vScrMax.x && + vScrMin.y >= vScr.y && + vScr.y >= vScrMax.y) + ) { this.m_objEdit = objRect; return objRect.vMin; } - if (this.getDistMm(vScr, vScrMax) <= MIN_DIST) { - this.m_objEdit = objRect; - return objRect.vMax; - } } return null; } diff --git a/src/engine/tools2d/ToolText.js b/src/engine/tools2d/ToolText.js index 8dc05f0d..19d7d5a5 100644 --- a/src/engine/tools2d/ToolText.js +++ b/src/engine/tools2d/ToolText.js @@ -15,7 +15,6 @@ import ToolDistance from './ToolDistance'; import StoreActionType from '../../store/ActionTypes'; -// import UiModalText from '../../ui/UiModalText'; // ********************************************** // Class @@ -65,8 +64,18 @@ class ToolText { for (let i = 0; i < numTexts; i++) { const objText = this.m_texts[i]; const vScrProj = ToolDistance.textureToScreen(objText.point.x, objText.point.y, this.m_wScreen, this.m_hScreen, store); - const MIN_DIST = 4.0; - if (this.getDistMm(vScr, vScrProj) <= MIN_DIST) { + + // Define the distance by "x" coordinate from the center of the text + const MIN_DIST_X = objText.text.length * 4; + // Define the distance by "y" coordinate from the text + const MIN_DIST_Y = 16; + // Check if the point is on the text + if ( + vScr.x >= vScrProj.x - MIN_DIST_X && + vScr.x <= vScrProj.x + MIN_DIST_X && + vScr.y >= vScrProj.y - MIN_DIST_Y && + vScr.y <= vScrProj.y + MIN_DIST_Y + ) { this.m_objEdit = objText; return objText.point; } @@ -178,29 +187,6 @@ class ToolText { ctx.fillText(lines[j], vScr.x, vScr.y + j * LINE_HEIGHT - ((lines.length - 1) * LINE_HEIGHT) / 2); } } // for (i) - - /* - const numRects = this.m_rects.length; - for (let i = 0; i < numRects; i++) { - const objRect = this.m_rects[i]; - const vTexMin = objRect.vMin; - const vTexMax = objRect.vMax; - const vScrMin = ToolDistance.textureToScreen(vTexMin.x, vTexMin.y, this.m_wScreen, this.m_hScreen, store); - const vScrMax = ToolDistance.textureToScreen(vTexMax.x, vTexMax.y, this.m_wScreen, this.m_hScreen, store); - ctx.beginPath(); - ctx.moveTo(vScrMin.x, vScrMin.y); - ctx.lineTo(vScrMax.x, vScrMin.y); - ctx.lineTo(vScrMax.x, vScrMax.y); - ctx.lineTo(vScrMin.x, vScrMax.y); - ctx.lineTo(vScrMin.x, vScrMin.y); - ctx.stroke(); - // draw text - const xText = Math.floor((vScrMin.x + vScrMax.x) * 0.5); - const yText = Math.floor((vScrMin.y + vScrMax.y) * 0.5); - const strMsg = objRect.area.toFixed(2) + ' mm^2'; - ctx.fillText(strMsg, xText, yText); - } // for (i) all rects - */ } // end render } // end class ToolText diff --git a/src/engine/utils/PointerChecker.js b/src/engine/utils/PointerChecker.js new file mode 100644 index 00000000..285f0d3f --- /dev/null +++ b/src/engine/utils/PointerChecker.js @@ -0,0 +1,48 @@ +/* + * Copyright 2021 EPAM Systems, Inc. (https://www.epam.com/) + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * This is a tool for checking whether a pointer is on the line + * @module demo/engine/utils/tool + */ +// absolute imports +/** + * Class PointerChecker to check if the point is on the line + * @class PointerChecker + */ +class PointerChecker { + static isPointerOnLine(vs, ve, vScr) { + // Define the center point of the line by "y" coordinate + const centerLineY = (vs.y + ve.y) / 2; + // Define the angle slope of the line + const m = (ve.y - vs.y) / (ve.x - vs.x); + // Define the intercept of the line + const b = vs.y - m * vs.x; + // Define the length of the line by "y" + const widthY = Math.abs(ve.y - vs.y); + // Define the distance to the line by "y" + const MIN_DIST_Y = 10; + // Check if the point is on the border of the line + if ( + vs.x != ve.x && + (vs.x < ve.x ? vScr.x >= vs.x && vScr.x <= ve.x : vScr.x <= vs.x && vScr.x >= ve.x) && + Math.floor(vScr.y) >= Math.floor(m * vScr.x + b) - MIN_DIST_Y && + Math.floor(vScr.y) <= Math.floor(m * vScr.x + b) + MIN_DIST_Y + ) { + return true; + } + // Check if the point is on the border of the vertical line + if ( + vs.x === ve.x && + vScr.x <= vs.x + 10 && + vScr.x >= vs.x - 10 && + vScr.y >= centerLineY - widthY / 2 && + vScr.y <= centerLineY + widthY / 2 + ) { + return true; + } + } +} + +export default PointerChecker;