import React from "react" ; import { ICoordinate } from "@fluid-example/multiview-coordinate-interface" ; import "./style.css" ; const renderTriangleToCanvas = ( ctx , c1 , c2 , c3 ) => { ctx . clearRect ( 0 , 0 , 100 , 100 ) ; ctx . fillStyle = "#ff0000" ; ctx . beginPath ( ) ; ctx . moveTo ( c1 . x , c1 . y ) ; ctx . lineTo ( c2 . x , c2 . y ) ; ctx . lineTo ( c3 . x , c3 . y ) ; ctx . fill ( ) ; } ; interface ITriangleViewProps { coordinate1 : ICoordinate ; coordinate2 : ICoordinate ; coordinate3 : ICoordinate ; } /**
 * TriangleView is a React component that renders a triangle using the given ICoordinates as the vertices.
 * For now, it only renders out the triangle, but we could enhance it to allow manipulating the coordinates.
 */ export const TriangleView = ( props ) => { const canvasRef = React . createRef < HTMLCanvasElement > ( ) ; const rerenderCanvas = ( ) => { if ( canvasRef . current !== null ) { const ctx = canvasRef . current . getContext ( "2d" ) ; if ( ctx !== null ) { renderTriangleToCanvas ( ctx , props . coordinate1 , props . coordinate2 , props . coordinate3 ) ; } } } ; React . useEffect ( ( ) => { if ( canvasRef . current !== null ) { canvasRef . current . width = 100 ; canvasRef . current . height = 100 ; } rerenderCanvas ( ) ; props . coordinate1 . on ( "coordinateChanged" , rerenderCanvas ) ; props . coordinate2 . on ( "coordinateChanged" , rerenderCanvas ) ; props . coordinate3 . on ( "coordinateChanged" , rerenderCanvas ) ; return ( ) => { props . coordinate1 . off ( "coordinateChanged" , rerenderCanvas ) ; props . coordinate2 . off ( "coordinateChanged" , rerenderCanvas ) ; props . coordinate3 . off ( "coordinateChanged" , rerenderCanvas ) ; } ; } ) ; return ( < canvas className = "triangle-canvas" ref = { canvasRef } > < /canvas>); } ;