From ed2cfa2013793fc78d75737560c8030a8a14467b Mon Sep 17 00:00:00 2001 From: "maxime.batista" Date: Wed, 3 Jan 2024 15:37:12 +0100 Subject: [PATCH] apply suggestions --- front/components/arrows/BendableArrow.tsx | 30 +++++++++++------------ front/components/arrows/Pos.ts | 22 ++++++++--------- front/components/editor/BallPiece.tsx | 2 -- front/components/editor/CourtPlayer.tsx | 4 +-- front/components/editor/PlayerPiece.tsx | 1 - front/views/Editor.tsx | 4 +-- package.json | 2 -- 7 files changed, 30 insertions(+), 35 deletions(-) diff --git a/front/components/arrows/BendableArrow.tsx b/front/components/arrows/BendableArrow.tsx index 88680b6..8dc057c 100644 --- a/front/components/arrows/BendableArrow.tsx +++ b/front/components/arrows/BendableArrow.tsx @@ -11,7 +11,7 @@ import { import { add, angle, - between, + middle, distance, middlePos, minus, @@ -20,7 +20,7 @@ import { posWithinBase, ratioWithinBase, relativeTo, - size, + norm, } from "./Pos" import "../../style/bendable_arrows.css" @@ -137,14 +137,14 @@ export default function BendableArrow({ if (idx == 0) { return { start: startPos, - controlPoint: segment.controlPoint, + controlPoint: segment.controlPoint ?? null, end: segment.next, } } const start = segments[idx - 1].next return { start, - controlPoint: segment.controlPoint, + controlPoint: segment.controlPoint ?? null, end: segment.next, } }) @@ -164,15 +164,15 @@ export default function BendableArrow({ const cpPos = controlPoint || ratioWithinBase( - add(between(prevRelative, nextRelative), parentBase), + add(middle(prevRelative, nextRelative), parentBase), parentBase, ) - const setControlPointPos = (newPos: Pos | undefined) => { + const setControlPointPos = (newPos: Pos | null) => { const segment = segments[i] const newSegments = segments.toSpliced(i, 1, { ...segment, - controlPoint: newPos, + controlPoint: newPos ?? undefined, }) onSegmentsChanges(newSegments) } @@ -185,7 +185,7 @@ export default function BendableArrow({ posRatio={cpPos} parentBase={parentBase} onPosValidated={setControlPointPos} - onRemove={() => setControlPointPos(undefined)} + onRemove={() => setControlPointPos(null)} onMoves={(controlPoint) => { setInternalSegments((is) => { return is.toSpliced(i, 1, { @@ -322,7 +322,7 @@ export default function BendableArrow({ posWithinBase(controlPoint, parentBase), svgPosRelativeToBase, ) - : between(startRelative, nextRelative) + : middle(startRelative, nextRelative) return { start: startRelative, @@ -344,7 +344,7 @@ export default function BendableArrow({ const previousSegmentCpAndCurrentPosVector = minus( start, - previousSegment?.cp ?? between(start, end), + previousSegment?.cp ?? middle(start, end), ) const smoothCp = previousSegment @@ -422,7 +422,7 @@ export default function BendableArrow({ const nextPos = segment.next const segmentCp = segment.controlPoint ? segment.controlPoint - : between(currentPos, nextPos) + : middle(currentPos, nextPos) const smoothCp = beforeSegment ? add( @@ -430,7 +430,7 @@ export default function BendableArrow({ minus( currentPos, beforeSegment.controlPoint ?? - between(beforeSegmentPos, currentPos), + middle(beforeSegmentPos, currentPos), ), ) : segmentCp @@ -549,7 +549,7 @@ enum PointSegmentSearchResult { interface FullSegment { start: Pos - controlPoint: Pos | undefined + controlPoint: Pos | null end: Pos } @@ -573,9 +573,9 @@ function wavyBezier( ): string { function getVerticalAmplification(t: number): Pos { const velocity = cubicBeziersDerivative(start, cp1, cp2, end, t) - const velocityLength = size(velocity) + const velocityLength = norm(velocity) //rotate the velocity by 90 deg - const projection = { x: velocity.y, y: -velocity.x } + const projection = { x: (velocity.y), y: -velocity.x } return { x: (projection.x / velocityLength) * amplitude, diff --git a/front/components/arrows/Pos.ts b/front/components/arrows/Pos.ts index 5c651cc..8ad1cb8 100644 --- a/front/components/arrows/Pos.ts +++ b/front/components/arrows/Pos.ts @@ -3,7 +3,7 @@ export interface Pos { y: number } -export const NULL_POS: Pos = { x: 0, y: 0 } +export const NULL_POS: Pos = {x: 0, y: 0} /** * Returns position of a relative to b @@ -11,7 +11,7 @@ export const NULL_POS: Pos = { x: 0, y: 0 } * @param b */ export function relativeTo(a: Pos, b: Pos): Pos { - return { x: a.x - b.x, y: a.y - b.y } + return {x: a.x - b.x, y: a.y - b.y} } /** @@ -19,26 +19,26 @@ export function relativeTo(a: Pos, b: Pos): Pos { * @param rect */ export function middlePos(rect: DOMRect): Pos { - return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 } + return {x: rect.x + rect.width / 2, y: rect.y + rect.height / 2} } export function add(a: Pos, b: Pos): Pos { - return { x: a.x + b.x, y: a.y + b.y } + return {x: a.x + b.x, y: a.y + b.y} } export function minus(a: Pos, b: Pos): Pos { - return { x: a.x - b.x, y: a.y - b.y } + return {x: a.x - b.x, y: a.y - b.y} } export function mul(a: Pos, t: number): Pos { - return { x: a.x * t, y: a.y * t } + return {x: a.x * t, y: a.y * t} } export function distance(a: Pos, b: Pos): number { return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2) } -export function size(vector: Pos): number { +export function norm(vector: Pos): number { return distance(NULL_POS, vector) } @@ -66,16 +66,16 @@ export function posWithinBase(ratio: Pos, base: DOMRect): Pos { } } -export function between(a: Pos, b: Pos): Pos { +export function middle(a: Pos, b: Pos): Pos { return { x: a.x / 2 + b.x / 2, y: a.y / 2 + b.y / 2, } } -export function rotate(vec: Pos, deg: number): Pos { +export function rotate(vec: Pos, rad: number): Pos { return { - x: Math.cos(deg * vec.x) - Math.sin(deg * vec.y), - y: Math.sin(deg * vec.x) + Math.cos(deg * vec.y), + x: Math.cos(rad) * vec.x - Math.sin(rad) * vec.y, + y: Math.sin(rad) * vec.x + Math.cos(rad) * vec.y, } } diff --git a/front/components/editor/BallPiece.tsx b/front/components/editor/BallPiece.tsx index c28b71b..2741249 100644 --- a/front/components/editor/BallPiece.tsx +++ b/front/components/editor/BallPiece.tsx @@ -1,5 +1,3 @@ -import React from "react" - import "../../style/ball.css" import BallSvg from "../../assets/icon/ball.svg?react" diff --git a/front/components/editor/CourtPlayer.tsx b/front/components/editor/CourtPlayer.tsx index 2cda286..4cc4ffe 100644 --- a/front/components/editor/CourtPlayer.tsx +++ b/front/components/editor/CourtPlayer.tsx @@ -5,13 +5,13 @@ import { PlayerPiece } from "./PlayerPiece" import { Player } from "../../tactic/Player" import { NULL_POS, ratioWithinBase } from "../arrows/Pos" -export interface PlayerProps { +export interface PlayerProps { player: Player onDrag: () => void onChange: (p: Player) => void onRemove: () => void courtRef: RefObject - availableActions: (ro: HTMLElement) => A[] + availableActions: (ro: HTMLElement) => ReactNode[] } /** diff --git a/front/components/editor/PlayerPiece.tsx b/front/components/editor/PlayerPiece.tsx index e725d31..a1b5e74 100644 --- a/front/components/editor/PlayerPiece.tsx +++ b/front/components/editor/PlayerPiece.tsx @@ -1,4 +1,3 @@ -import React from "react" import "../../style/player.css" import { Team } from "../../tactic/Team" diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx index 930c99a..69c1eca 100644 --- a/front/views/Editor.tsx +++ b/front/views/Editor.tsx @@ -571,8 +571,8 @@ function debounceAsync( let task = 0 return (args: A) => { clearTimeout(task) - return new Promise((resolve) => { - task = setTimeout(() => f(args).then(resolve), delay) + return new Promise((resolve, reject) => { + task = setTimeout(() => f(args).then(resolve).catch(reject), delay) }) } } diff --git a/package.json b/package.json index 9c3a9d8..1380d59 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-draggable": "^4.4.6", - "react-xarrows": "^2.0.2", "typescript": "^5.2.2", "vite": "^4.5.0", "vite-plugin-css-injected-by-js": "^3.3.0" @@ -33,7 +32,6 @@ }, "devDependencies": { "@vitejs/plugin-react": "^4.1.0", - "eslint-plugin-react-hooks": "^4.6.0", "prettier": "^3.1.0", "typescript": "^5.2.2", "vite-plugin-svgr": "^4.1.0"