From ca35b6cf8b8c3cd92f393e0a6d5589a415ebf2eb Mon Sep 17 00:00:00 2001 From: HalukaMB Date: Tue, 7 Dec 2021 15:42:13 +0100 Subject: [PATCH 1/4] arrow pointer --- package-lock.json | 1 + .../_shared/BezierArrow/ArrowHead.tsx | 38 ++++++++++++++++--- .../_shared/BezierArrow/BezierArrow.tsx | 9 ++++- .../_shared/BezierArrow/BezierArrowEditor.tsx | 2 +- src/pages/index.tsx | 28 ++++++++------ 5 files changed, 57 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index a9d2245..f4c13df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "starter", "version": "0.1.0", "dependencies": { "@juggle/resize-observer": "^3.3.1", diff --git a/src/components/_shared/BezierArrow/ArrowHead.tsx b/src/components/_shared/BezierArrow/ArrowHead.tsx index 34d2fa0..3c5ce42 100644 --- a/src/components/_shared/BezierArrow/ArrowHead.tsx +++ b/src/components/_shared/BezierArrow/ArrowHead.tsx @@ -1,23 +1,49 @@ +import { number } from 'prop-types'; import React from 'react'; const LARGE_VALUE = 100000; interface Props { curvePath: string; - coords: [number, number]; + coordsforArrow: [number, number][]; rotation?: number; length?: number; } +let x_coord_plus: number; +let y_coord_plus: number; +let new_curvepath: string; +let arrowrotation: number; + +function ArrowHead({ curvePath, coordsforArrow, rotation = 30, length = 10 }: Props) { + console.log(coordsforArrow) + const inclination=((coordsforArrow[1][1]-coordsforArrow[0][1])/(coordsforArrow[1][0]-coordsforArrow[0][0])) + if(!isFinite(inclination)){ + x_coord_plus=0 + y_coord_plus=length +}else{ + x_coord_plus = inclination === 0 ? length : Math.sqrt(Math.pow(length, 2)*Math.pow(inclination, 2)/2); + y_coord_plus = inclination === 0 ? 0 : x_coord_plus*inclination +} +console.log(coordsforArrow[0],coordsforArrow[1]); +if (coordsforArrow[0][0]>=coordsforArrow[1][0]){ +} +if (coordsforArrow[0][0] - {[1, -1].map((direction) => ( + {[0].map((direction) => ( ))} diff --git a/src/components/_shared/BezierArrow/BezierArrow.tsx b/src/components/_shared/BezierArrow/BezierArrow.tsx index 29b3dc0..faded14 100644 --- a/src/components/_shared/BezierArrow/BezierArrow.tsx +++ b/src/components/_shared/BezierArrow/BezierArrow.tsx @@ -12,8 +12,10 @@ interface Props { endCoords: [number, number]; startBezierHandle: [number, number]; endBezierHandle: [number, number]; + }; drawArrowHead?: boolean; + /** Draw arrow heads on one end (`"start"` or `"end"`) or on both ends (`"both"`) */ arrowHeadAnchor?: 'start' | 'end' | 'both'; arrowHeadLength?: number; @@ -30,6 +32,9 @@ function BezierArrow({ className = '', }: Props) { const curve = constructCurve(coords); + console.log("these are your coords",coords) + console.log(curve) + const invertCurve = constructCurve({ startCoords: coords.endCoords, endCoords: coords.startCoords, @@ -46,7 +51,7 @@ function BezierArrow({ {drawArrowHead && ['start', 'both'].includes(arrowHeadAnchor) && ( @@ -54,7 +59,7 @@ function BezierArrow({ {drawArrowHead && ['end', 'both'].includes(arrowHeadAnchor) && ( diff --git a/src/components/_shared/BezierArrow/BezierArrowEditor.tsx b/src/components/_shared/BezierArrow/BezierArrowEditor.tsx index 874bfc2..abbdad8 100644 --- a/src/components/_shared/BezierArrow/BezierArrowEditor.tsx +++ b/src/components/_shared/BezierArrow/BezierArrowEditor.tsx @@ -71,7 +71,7 @@ function BezierArrowEditor({ initialStartCoords = [10, 10], initialEndCoords = [60, 60], initialStartBezierHandle = [10, 40], - initialEndBezierHandle = [20, 60], + initialEndBezierHandle = [60, 10], drawArrowHead = true, arrowHeadAnchor = 'end', arrowHeadLength = 10, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index aa340c4..35555ee 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,10 @@ import Link from 'next/link'; import React from 'react'; +import { useRef } from 'react'; +import { args } from 'react'; + +import BezierArrowEditor from 'components/_shared/BezierArrow/BezierArrowEditor'; function Index() { const PAGES = [ { url: '/graphic', title: 'Example of a complete graphic (Header+Chart)' }, @@ -8,20 +12,20 @@ function Index() { { url: '/map', title: 'Map example' }, ]; + + + const WIDTH = 400; + const HEIGHT = 120; + + const canvasRef = useRef(); + return ( - <> - Example pages: -
    - {PAGES.map(({ url, title }) => ( -
  • - - {title} - -
    • - ))} -
- + + + + ); } + export default Index; From f3b9065a0781b129044891fd49cb3c95a16e42ed Mon Sep 17 00:00:00 2001 From: HalukaMB Date: Tue, 7 Dec 2021 16:18:58 +0100 Subject: [PATCH 2/4] before cleaning but properly working --- .../_shared/BezierArrow/ArrowHead.tsx | 22 ++++++++++++------- .../_shared/BezierArrow/BezierArrowEditor.tsx | 4 ++-- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/components/_shared/BezierArrow/ArrowHead.tsx b/src/components/_shared/BezierArrow/ArrowHead.tsx index 3c5ce42..6d6522e 100644 --- a/src/components/_shared/BezierArrow/ArrowHead.tsx +++ b/src/components/_shared/BezierArrow/ArrowHead.tsx @@ -21,27 +21,33 @@ function ArrowHead({ curvePath, coordsforArrow, rotation = 30, length = 10 }: Pr x_coord_plus=0 y_coord_plus=length }else{ - x_coord_plus = inclination === 0 ? length : Math.sqrt(Math.pow(length, 2)*Math.pow(inclination, 2)/2); + x_coord_plus = inclination === 0 ? length : Math.sqrt(Math.pow(length, 2)/(1+Math.pow(inclination, 2))); y_coord_plus = inclination === 0 ? 0 : x_coord_plus*inclination } console.log(coordsforArrow[0],coordsforArrow[1]); -if (coordsforArrow[0][0]>=coordsforArrow[1][0]){ +if (coordsforArrow[0][0]>coordsforArrow[1][0]){ + new_curvepath=("M "+String(coordsforArrow[0][0]-x_coord_plus)+","+String(coordsforArrow[0][1]-y_coord_plus)+" L "+String(coordsforArrow[0][0])+","+String(coordsforArrow[0][1])); } if (coordsforArrow[0][0]=coordsforArrow[1][1]){ + new_curvepath=("M "+String(coordsforArrow[0][0]-x_coord_plus)+","+String(coordsforArrow[0][1]-y_coord_plus)+" L "+String(coordsforArrow[0][0])+","+String(coordsforArrow[0][1])) +}; +if (coordsforArrow[0][1] - {[0].map((direction) => ( + {[-1,0,1].map((direction) => ( diff --git a/src/components/_shared/BezierArrow/BezierArrowEditor.tsx b/src/components/_shared/BezierArrow/BezierArrowEditor.tsx index abbdad8..36c4417 100644 --- a/src/components/_shared/BezierArrow/BezierArrowEditor.tsx +++ b/src/components/_shared/BezierArrow/BezierArrowEditor.tsx @@ -69,9 +69,9 @@ interface Props { function BezierArrowEditor({ canvasRef, initialStartCoords = [10, 10], - initialEndCoords = [60, 60], + initialEndCoords = [60, 10], initialStartBezierHandle = [10, 40], - initialEndBezierHandle = [60, 10], + initialEndBezierHandle = [60, 60], drawArrowHead = true, arrowHeadAnchor = 'end', arrowHeadLength = 10, From 506335be51dc2924e87da43e2b9079dd9236111e Mon Sep 17 00:00:00 2001 From: HalukaMB Date: Tue, 7 Dec 2021 16:59:26 +0100 Subject: [PATCH 3/4] review request for implementation --- .../_shared/BezierArrow/ArrowHead.tsx | 30 ++++++++----------- .../_shared/BezierArrow/BezierArrow.tsx | 3 +- .../_shared/BezierArrow/BezierArrowEditor.tsx | 4 +-- 3 files changed, 16 insertions(+), 21 deletions(-) diff --git a/src/components/_shared/BezierArrow/ArrowHead.tsx b/src/components/_shared/BezierArrow/ArrowHead.tsx index 6d6522e..0174ca4 100644 --- a/src/components/_shared/BezierArrow/ArrowHead.tsx +++ b/src/components/_shared/BezierArrow/ArrowHead.tsx @@ -12,10 +12,9 @@ interface Props { let x_coord_plus: number; let y_coord_plus: number; let new_curvepath: string; -let arrowrotation: number; function ArrowHead({ curvePath, coordsforArrow, rotation = 30, length = 10 }: Props) { - console.log(coordsforArrow) + /*we calculate the inclination between bezierhandle and end of arrow to get for any x also y*/ const inclination=((coordsforArrow[1][1]-coordsforArrow[0][1])/(coordsforArrow[1][0]-coordsforArrow[0][0])) if(!isFinite(inclination)){ x_coord_plus=0 @@ -24,22 +23,19 @@ function ArrowHead({ curvePath, coordsforArrow, rotation = 30, length = 10 }: Pr x_coord_plus = inclination === 0 ? length : Math.sqrt(Math.pow(length, 2)/(1+Math.pow(inclination, 2))); y_coord_plus = inclination === 0 ? 0 : x_coord_plus*inclination } -console.log(coordsforArrow[0],coordsforArrow[1]); -if (coordsforArrow[0][0]>coordsforArrow[1][0]){ - new_curvepath=("M "+String(coordsforArrow[0][0]-x_coord_plus)+","+String(coordsforArrow[0][1]-y_coord_plus)+" L "+String(coordsforArrow[0][0])+","+String(coordsforArrow[0][1])); -} + /* as the above calculation involves a sqrt we have to add negative and positive inclination as possibilities*/ if (coordsforArrow[0][0]=coordsforArrow[1][1]){ - new_curvepath=("M "+String(coordsforArrow[0][0]-x_coord_plus)+","+String(coordsforArrow[0][1]-y_coord_plus)+" L "+String(coordsforArrow[0][0])+","+String(coordsforArrow[0][1])) -}; -if (coordsforArrow[0][1] @@ -47,8 +43,8 @@ if (coordsforArrow[0][1] ))} diff --git a/src/components/_shared/BezierArrow/BezierArrow.tsx b/src/components/_shared/BezierArrow/BezierArrow.tsx index faded14..1de6c7c 100644 --- a/src/components/_shared/BezierArrow/BezierArrow.tsx +++ b/src/components/_shared/BezierArrow/BezierArrow.tsx @@ -32,8 +32,7 @@ function BezierArrow({ className = '', }: Props) { const curve = constructCurve(coords); - console.log("these are your coords",coords) - console.log(curve) + const invertCurve = constructCurve({ startCoords: coords.endCoords, diff --git a/src/components/_shared/BezierArrow/BezierArrowEditor.tsx b/src/components/_shared/BezierArrow/BezierArrowEditor.tsx index 36c4417..abbdad8 100644 --- a/src/components/_shared/BezierArrow/BezierArrowEditor.tsx +++ b/src/components/_shared/BezierArrow/BezierArrowEditor.tsx @@ -69,9 +69,9 @@ interface Props { function BezierArrowEditor({ canvasRef, initialStartCoords = [10, 10], - initialEndCoords = [60, 10], + initialEndCoords = [60, 60], initialStartBezierHandle = [10, 40], - initialEndBezierHandle = [60, 60], + initialEndBezierHandle = [60, 10], drawArrowHead = true, arrowHeadAnchor = 'end', arrowHeadLength = 10, From 1df89c6b7ca08aac03307b493fb990f333308c87 Mon Sep 17 00:00:00 2001 From: HalukaMB Date: Tue, 7 Dec 2021 19:21:32 +0100 Subject: [PATCH 4/4] would this be acceptable? --- src/components/_shared/BezierArrow/ArrowHead.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/_shared/BezierArrow/ArrowHead.tsx b/src/components/_shared/BezierArrow/ArrowHead.tsx index 0174ca4..a52ff4b 100644 --- a/src/components/_shared/BezierArrow/ArrowHead.tsx +++ b/src/components/_shared/BezierArrow/ArrowHead.tsx @@ -42,9 +42,7 @@ new_curvepath=("M "+String(coordsforArrow[0][0]-x_coord_plus)+","+String(coordsf {[-1,0,1].map((direction) => ( ))}