manavagr1108 · manavagr1108 · Feb 9, 2024
diff --git a/src/classes/DrawChart.js b/src/classes/DrawChart.js
@@ -47,6 +47,7 @@ class DrawChart {
     // trend lines data;
     this.trendLinesData = signal([]);
     this.fibData = signal([]);
+    this.projectionData = signal([]);
   }
   #setData(data) {
     this.data.value = data;

diff --git a/src/components/toolbar/toolbarItems.jsx b/src/components/toolbar/toolbarItems.jsx
@@ -9,6 +9,7 @@ import { FaArrowPointer } from "react-icons/fa6";
 import { cursorConfig } from "../../signals/toolbarSignals";
 import { useOutsideClick } from "../navbar/navbar";
 import { PiLineSegmentFill } from "react-icons/pi";
+import { FaProjectDiagram } from "react-icons/fa";
 
 function ToolItems({
   toogleToolItemsIndex,
@@ -67,6 +68,11 @@ function ToolbarItems({ mode, ChartWindow }) {
     selectedTool.value = items[2].toolName;
     selectedToolItem.value = index;
   }
+  function projectionOnClickHandler(index) {
+    setToogleToolItemsIndex(-1);
+    selectedTool.value = items[3].toolName;
+    selectedToolItem.value = index;
+  }
   const items = [
     {
       toolName: "Cursor",
@@ -181,6 +187,19 @@ function ToolbarItems({ mode, ChartWindow }) {
       ],
       onClickFunction: fibOnClickHandler,
     },
+    {
+      toolName: "Projection",
+      toolItemsEle: [
+        <FaProjectDiagram
+          color={`${mode === "Light" ? "black" : "white"}`}
+          size={20}
+        />,
+      ],
+      toolLabels: [
+        "Long Position",
+      ],
+      onClickFunction: projectionOnClickHandler,
+    },
   ];
   return (
     <div className="flex flex-col w-full justify-start relative">

diff --git a/src/utility/chartUtils.js b/src/utility/chartUtils.js
@@ -34,6 +34,7 @@ import {
   drawTrendLines,
   drawVerticalLineUsingPoints,
 } from "./drawUtils/toolsDraw/lineTool";
+import { drawLongPositionUsingPoints } from "./drawUtils/toolsDraw/projectionTool";
 
 export async function getStockDataCallback(
   instrumentKey,
@@ -97,7 +98,7 @@ export function handleOnMouseMove(e, state) {
     }
     const firstIndex =
       dateConfig.peek().dateToIndex[
-        getObjtoStringTime(timeRange.peek().startTime)
+      getObjtoStringTime(timeRange.peek().startTime)
       ];
     const cursordata = data.peek()[0][firstIndex - dateIndex];
     if (cursordata === undefined) return;
@@ -294,6 +295,18 @@ export function handleOnMouseMove(e, state) {
               break;
           }
           break;
+        case "Projection":
+          switch (prevToolItemNo.peek()) {
+            case 0:
+              drawLongPositionUsingPoints(
+                state,
+                prevSelectedCanvas.peek(),
+                points,
+                false,
+                true
+              )
+              break;
+          }
       }
     }
   } else {
@@ -342,10 +355,10 @@ export function handleScroll(e, state) {
       Math.abs(pixelMovement) === 0 ||
       (pixelMovement > 0 &&
         getObjtoStringTime(timeRange.peek().startTime) ===
-          dateConfig.peek().indexToDate[data.peek()[0].length - 1]) ||
+        dateConfig.peek().indexToDate[data.peek()[0].length - 1]) ||
       (pixelMovement < 0 &&
         getObjtoStringTime(timeRange.peek().endTime) ===
-          dateConfig.peek().indexToDate[0])
+        dateConfig.peek().indexToDate[0])
     ) {
       return;
     }
@@ -415,7 +428,7 @@ export function updateCursorValue(state, mode) {
       yAxisRange.peek().minPrice +
       ((chartCanvasSize.peek().height - dateCursor.peek().y) *
         (yAxisRange.peek().maxPrice - yAxisRange.peek().minPrice)) /
-        chartCanvasSize.peek().height;
+      chartCanvasSize.peek().height;
     const priceText = price.toFixed(2);
     const yCoord1 = dateCursor.peek().y;
     if (isCanvas) {
@@ -565,6 +578,19 @@ export function updateCursorValue(state, mode) {
               );
               break;
           }
+        case "Projection":
+          switch (prevToolItemNo.peek()) {
+            case 0:
+              drawLongPositionUsingPoints(
+                drawChartobj,
+                canvas,
+                points,
+                false,
+                true,
+                ctx
+              )
+              break;
+          }
       }
     }
   });
@@ -595,7 +621,7 @@ export const removeCursor = (e, state) => {
 };
 
 export const chartMouseDown = (e, state) => {
-  const { chartMovement, ChartRef, trendLinesData, fibData } = state;
+  const { chartMovement, ChartRef, trendLinesData, fibData, projectionData } = state;
   const { selectedTool, selectedItem } = state.ChartWindow;
   const selectedEle = detectTrendLine(e, state);
   if (selectedTool.peek() !== "Cursor") {
@@ -608,6 +634,9 @@ export const chartMouseDown = (e, state) => {
       case "Fib":
         selectedItem.value = fibData.peek()[selectedEle.index];
         break;
+      case "Projection":
+        selectedItem.value = projectionData.peek()[selectedEle.index];
+        break;
     }
     if (selectedEle.selectedPoint !== selectedItem.peek().points.length) {
       prevToolItemNo.value = selectedEle.toolItemNo;
@@ -617,10 +646,10 @@ export const chartMouseDown = (e, state) => {
         case "Line": {
           prevLineData.value = trendLinesData
             .peek()
-            [selectedEle.index].points.map((_, i) => {
-              if (i !== selectedEle.selectedPoint) return _;
-              else return null;
-            });
+          [selectedEle.index].points.map((_, i) => {
+            if (i !== selectedEle.selectedPoint) return _;
+            else return null;
+          });
           trendLinesData.value = trendLinesData
             .peek()
             .filter((ele, i) => i !== selectedEle.index);
@@ -630,16 +659,29 @@ export const chartMouseDown = (e, state) => {
         case "Fib": {
           prevLineData.value = fibData
             .peek()
-            [selectedEle.index].points.map((_, i) => {
-              if (i !== selectedEle.selectedPoint) return _;
-              else return null;
-            });
+          [selectedEle.index].points.map((_, i) => {
+            if (i !== selectedEle.selectedPoint) return _;
+            else return null;
+          });
           fibData.value = fibData
             .peek()
             .filter((ele, i) => i !== selectedEle.index);
           drawFibs(state);
           break;
         }
+        case "Projection": {
+          prevLineData.value = projectionData
+            .peek()
+          [selectedEle.index].points.map((_, i) => {
+            if (i !== selectedEle.selectedPoint) return _;
+            else return null;
+          });
+          projectionData.value = projectionData
+            .peek()
+            .filter((ele, i) => i !== selectedEle.index);
+          drawProjections(state);
+          break;
+        }
       }
     } else {
       chartMovement.value.isItem = true;
@@ -731,7 +773,7 @@ export const chartMouseMove = (e, state) => {
       const points = getCoordsArray(state, lineData.points);
       chartMovement.value.mouseMove = true;
       drawChartObjects.peek().forEach((obj) => {
-        const { trendLinesData, fibData } = obj;
+        const { trendLinesData, fibData, projectionData } = obj;
         switch (chartMovement.peek().itemData.toolName) {
           case "Line":
             trendLinesData.peek().forEach((trendLine, i) => {
@@ -751,6 +793,14 @@ export const chartMouseMove = (e, state) => {
               }
             });
             break;
+          case "Projection":
+            projectionData.peek().forEach((projection, i) => {
+              if (projection === selectedItem.peek()) {
+                projectionData.value = projectionData.peek().filter((_, j) => i !== j);
+                return;
+              }
+            });
+            break;
         }
       });
       chartMovement.value.itemData = {
@@ -779,6 +829,7 @@ export const chartMouseUp = (e, state) => {
     yAxisRange,
     data,
     fibData,
+    projectionData,
   } = state;
   const { xAxisConfig, dateConfig, timeRange } = state.ChartWindow;
   if (!chartMovement.peek().mouseMove && chartMovement.peek().mouseDown) {
@@ -790,7 +841,7 @@ export const chartMouseUp = (e, state) => {
     const { points, toolItemNo, toolName } = chartMovement.peek().itemData;
     const firstIndex =
       dateConfig.peek().dateToIndex[
-        getObjtoStringTime(timeRange.peek().startTime)
+      getObjtoStringTime(timeRange.peek().startTime)
       ];
     const result = points.map((point, i) => {
       const x1 = point.x;
@@ -803,7 +854,7 @@ export const chartMouseUp = (e, state) => {
         yAxisRange.peek().minPrice +
         ((chartCanvasSize.peek().height - y1) *
           (yAxisRange.peek().maxPrice - yAxisRange.peek().minPrice)) /
-          chartCanvasSize.peek().height;
+        chartCanvasSize.peek().height;
       return {
         xLabel: cursordata1.Date,
         yLabel: price1.toFixed(2),
@@ -826,6 +877,13 @@ export const chartMouseUp = (e, state) => {
         });
         drawFibs(state, true);
       }
+      case "Projection": {
+        projectionData.value.push({
+          toolItemNo: toolItemNo,
+          points: result,
+        });
+        drawProjections(state, true);
+      }
     }
   }
   if (chartMovement.peek().mouseMove) {

diff --git a/src/utility/drawUtils/chartDraw.js b/src/utility/drawUtils/chartDraw.js
@@ -5,6 +5,7 @@ import { getYCoordinate } from "../yAxisUtils";
 import { drawIndicators } from "./indicatorDraw";
 import { drawFibs } from "./toolsDraw/fibTool";
 import { drawTrendLines } from "./toolsDraw/lineTool";
+import { drawProjections } from "./toolsDraw/projectionTool";
 export function drawChart(state, mode) {
   const { data, yAxisRange, ChartRef, yAxisRef, chartCanvasSize } = state;
   const {
@@ -185,6 +186,9 @@ export function drawChart(state, mode) {
   state.ChartWindow.drawChartObjects
     .peek()
     .forEach((obj) => drawFibs(obj, true));
+  state.ChartWindow.drawChartObjects
+    .peek()
+    .forEach((obj) => drawProjections(obj, true));
 }
 
 export const drawYAxis = (ctx, yAxisCtx, mode, state) => {

diff --git a/src/utility/drawUtils/toolsDraw/projectionTool.js b/src/utility/drawUtils/toolsDraw/projectionTool.js
@@ -0,0 +1,71 @@
+import { getCoordsArray } from "../../toolsUtils";
+import { drawPoint, drawTrendLineUsingPoints } from "./lineTool";
+
+export const drawProjection = (
+    state,
+    i,
+    lineSelected = false,
+    fromDrawChart = false
+) => {
+    const { projectionData, ChartRef } = state;
+    const canvas = ChartRef.current[0];
+    const canvas1 = ChartRef.current[1];
+    const ctx1 = canvas1.getContext("2d");
+    const projection = projectionData.peek()[i];
+    switch (projection.toolItemNo) {
+        case 0:
+            drawLongPositionUsingPoints(
+                state,
+                canvas,
+                projection.points,
+                lineSelected,
+                fromDrawChart,
+                ctx1
+            );
+            break;
+    }
+};
+
+export const drawLongPositionUsingPoints = (
+    state,
+    canvas,
+    points,
+    lineSelected = false,
+    fromDrawChart = false,
+    ctx1 = null
+) => {
+    if(!fromDrawChart) return;
+    const [midLeft, topLeft, bottomLeft, midRight] = getCoordsArray(state, points);
+    if(lineSelected){
+        drawPoint(ctx1, midLeft.x, midLeft.y);
+        drawPoint(ctx1, topLeft.x, topLeft.y);
+        drawPoint(ctx1, bottomLeft.x, bottomLeft.y);
+        drawPoint(ctx1, midRight.x, midRight.y);
+    } else {
+        const ctx = canvas.getContext("2d");
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(0,255,0,0.5)'
+        ctx.rect(topLeft.x, topLeft.y, Math.abs(midLeft.x - midRight.x), Math.abs(topLeft.y - midLeft.y));
+        ctx.fill();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(255,0,0,0.5)'
+        ctx.rect(midLeft.x, midLeft.y, Math.abs(midLeft.x - midRight.x), Math.abs(bottomLeft.y - midLeft.y));
+        ctx.fill();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.strokeStyle="black"
+        ctx.moveTo(midLeft.x,midLeft.y);
+        ctx.lineTo(midRight.x,midRight.y);
+        ctx.stroke();
+        ctx.closePath();
+    }
+}
+
+
+export const drawProjections = (state, fromDrawChart = false) => {
+    const { projectionData } = state;
+    projectionData.peek().forEach((lineData, i) => {
+        drawProjection(state, i, false, fromDrawChart);
+    });
+};