Merge pull request #188 from epam/EPMUII-8314-Plain-drawinf-tool-for-2D

EPMUII-8314-Plain-drawinf-tool-for-2D

package.json

@@ -39,6 +39,7 @@
     "daikon": "^1.2.42",
     "jszip": "^3.10.1",
     "react": "^17.0.2",
+    "react-color": "^2.19.3",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.2",

src/engine/Graphics2d.js

@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 import Modes2d from '../store/Modes2d';
 import StoreActionType from '../store/ActionTypes';
 import ToolPick from './tools2d/ToolPick';
+import ToolPaint from './tools2d/ToolPaint';
 import ToolDistance from './tools2d/ToolDistance';
 import ToolAngle from './tools2d/ToolAngle';
 import ToolArea from './tools2d/ToolArea';
@@ -72,6 +73,7 @@ class Graphics2d extends React.Component {
 
     // tools2d
     this.m_toolPick = new ToolPick(this);
+    this.m_toolPaint = new ToolPaint(this);
     this.m_toolDistance = new ToolDistance(this);
     this.m_toolAngle = new ToolAngle(this);
     this.m_toolArea = new ToolArea(this);
@@ -206,6 +208,7 @@ class Graphics2d extends React.Component {
       // console.log(`gra2d. render: wScreen*hScreen = ${wScreen} * ${hScreen}, but w*h=${w}*${h} `);
 
       this.m_toolPick.setScreenDim(wScreen, hScreen);
+      this.m_toolPaint.setScreenDim(wScreen, hScreen);
       this.m_toolDistance.setScreenDim(wScreen, hScreen);
       this.m_toolAngle.setScreenDim(wScreen, hScreen);
       this.m_toolArea.setScreenDim(wScreen, hScreen);
@@ -297,6 +300,7 @@ class Graphics2d extends React.Component {
       // console.log(`gra2d. render: wScreen*hScreen = ${wScreen} * ${hScreen}, but w*h=${w}*${h} `);
 
       this.m_toolPick.setScreenDim(wScreen, hScreen);
+      this.m_toolPaint.setScreenDim(wScreen, hScreen);
       this.m_toolDistance.setScreenDim(wScreen, hScreen);
       this.m_toolAngle.setScreenDim(wScreen, hScreen);
       this.m_toolArea.setScreenDim(wScreen, hScreen);
@@ -391,6 +395,7 @@ class Graphics2d extends React.Component {
       // console.log(`gra2d. render: wScreen*hScreen = ${wScreen} * ${hScreen}, but w*h=${w}*${h} `);
 
       this.m_toolPick.setScreenDim(wScreen, hScreen);
+      this.m_toolPaint.setScreenDim(wScreen, hScreen);
       this.m_toolDistance.setScreenDim(wScreen, hScreen);
       this.m_toolAngle.setScreenDim(wScreen, hScreen);
       this.m_toolArea.setScreenDim(wScreen, hScreen);
@@ -540,6 +545,7 @@ class Graphics2d extends React.Component {
         })
         .then(() => {
           this.m_toolPick.render(ctx);
+          this.m_toolPaint.render(ctx, store);
           this.m_toolDistance.render(ctx, store);
           this.m_toolAngle.render(ctx, store);
           this.m_toolArea.render(ctx, store);
@@ -567,10 +573,10 @@ class Graphics2d extends React.Component {
       xPosNew = mouseX - (mouseX - store.render2dxPos) * (newZoom / zoom);
       yPosNew = mouseY - (mouseY - store.render2dyPos) * (newZoom / zoom);
     } else {
-      const initialX = canvasRect.width * zoom + store.render2dxPos;
-      const initialY = canvasRect.height * zoom + store.render2dyPos;
-      xPosNew = initialX - (initialX - store.render2dxPos) * (newZoom / zoom);
-      yPosNew = initialY - (initialY - store.render2dyPos) * (newZoom / zoom);
+      const centerX = (canvasRect.width * newZoom) / 2 + store.render2dxPos;
+      const centerY = (canvasRect.height * newZoom) / 2 + store.render2dyPos;
+      xPosNew = centerX - (centerX - store.render2dxPos) * (newZoom / zoom);
+      yPosNew = centerY - (centerY - store.render2dyPos) * (newZoom / zoom);
     }
 
     if (xPosNew < 0) {
@@ -601,6 +607,13 @@ class Graphics2d extends React.Component {
 
     this.setState({ stateMouseDown: false });
 
+    if (indexTools2d === Tools2dType.PAINT) {
+      const store = this.props;
+      const box = this.m_mount.current.getBoundingClientRect();
+      const xScr = evt.clientX - box.left;
+      const yScr = evt.clientY - box.top;
+      this.m_toolPaint.onMouseUp(xScr, yScr, store);
+    }
     if (indexTools2d === Tools2dType.DISTANCE) {
       const store = this.props;
       const box = this.m_mount.current.getBoundingClientRect();
@@ -661,6 +674,9 @@ class Graphics2d extends React.Component {
     const xScr = xContainer;
     const yScr = yContainer;
 
+    if (indexTools2d === Tools2dType.PAINT) {
+      this.m_toolPaint.onMouseMove(xScr, yScr, store);
+    }
     if (indexTools2d === Tools2dType.DISTANCE) {
       this.m_toolDistance.onMouseMove(xScr, yScr, store);
     }
@@ -725,6 +741,9 @@ class Graphics2d extends React.Component {
       case Tools2dType.INTENSITY:
         this.m_toolPick.onMouseDown(xScr, yScr, store);
         break;
+      case Tools2dType.PAINT:
+        this.m_toolPaint.onMouseDown(xScr, yScr, store);
+        break;
       case Tools2dType.DISTANCE:
         this.m_toolDistance.onMouseDown(xScr, yScr, store);
         break;
@@ -761,6 +780,7 @@ class Graphics2d extends React.Component {
    * Invoke clear all tools
    */
   clear() {
+    this.m_toolPaint.clear();
     this.m_toolDistance.clear();
     this.m_toolAngle.clear();
     this.m_toolArea.clear();

src/engine/tools2d/ToolDelete.js

@@ -75,12 +75,13 @@ class ToolDelete {
         y: yScr,
       };
 
+      const toolPaint = this.m_objGraphics2d.m_toolPaint;
       const toolDist = this.m_objGraphics2d.m_toolDistance;
       const toolAngle = this.m_objGraphics2d.m_toolAngle;
       const toolArea = this.m_objGraphics2d.m_toolArea;
       const toolRect = this.m_objGraphics2d.m_toolRect;
       const toolText = this.m_objGraphics2d.m_toolText;
-      const tools = [toolDist, toolAngle, toolArea, toolRect, toolText];
+      const tools = [toolPaint, toolDist, toolAngle, toolArea, toolRect, toolText];
       const trackedBefore = this.m_pointTracked !== null;
       this.m_pointTracked = null;
       const numTools = tools.length;