11// @flow
22
3- import React , { useState , useEffect , useMemo } from "react"
3+ import React , { useState , useEffect , useMemo , useRef } from "react"
44
55import mmgc from "mmgc1-cpp"
66
7+ console . log ( mmgc )
8+
79export default ( {
810 classPoints,
9- imageData,
11+ regionClsList,
12+ imageSrc,
1013 imagePosition,
11- videoPlaying,
12- maskVersion,
13- pointerEvents = "none" ,
1414 opacity = 0.5 ,
1515 zIndex = 999 ,
1616 position = "absolute" ,
1717} ) => {
1818 const [ canvasRef , setCanvasRef ] = useState ( null )
19+
20+ const lastTimeMMGCRun = useRef ( Date . now ( ) ) ;
21+ const superPixelsGenerated = useRef ( false )
22+ const [ sampleImageData , setSampleImageData ] = useState ( )
23+
24+ useEffect ( ( ) => {
25+ if ( ! imageSrc ) return ;
26+ const canvas = document . querySelector ( "canvas" ) ;
27+ const ctx = canvas . getContext ( "2d" ) ;
28+
29+ const image = new Image ( ) ;
30+ image . src = imageSrc ;
31+ image . onload = ( ) => {
32+ ctx . width = image . naturalWidth
33+ ctx . height = image . naturalHeight
34+ ctx . drawImage ( image , 0 , 0 ) ;
35+ const imageData = ctx . getImageData ( 0 , 0 , image . naturalWidth , image . naturalHeight )
36+ superPixelsGenerated . current = false ;
37+ setSampleImageData ( imageData )
38+ }
39+ } , [ imageSrc ] )
40+
1941
2042 useEffect ( ( ) => {
2143 if ( ! canvasRef ) return
44+ if ( ! sampleImageData ) return
45+ if ( ! mmgc . setImage ) return
46+ if ( Date . now ( ) < lastTimeMMGCRun . current + 5000 ) return
2247 const context = canvasRef . getContext ( "2d" )
23- context . putImageData ( imageData , 0 , 0 )
24- } , [ canvasRef , imageData , maskVersion ] )
48+
49+ console . log ( "got the sample image data and ready to mmgc!" )
50+
51+ if ( ! superPixelsGenerated . current ) {
52+ console . log ( "generating super pixels..." )
53+ mmgc . setImage ( sampleImageData . data , sampleImageData . width , sampleImageData . height ) ;
54+ mmgc . computeSuperPixels ( )
55+ superPixelsGenerated . current = true
56+ }
57+
58+ // mmgc.setClassColor(0, 0xffffffff)
59+ // mmgc.setClassColor(1, 0x00000000)
60+ console . log ( "generating mask..." )
61+ mmgc . clearClassPoints ( )
62+ for ( const classPoint of classPoints ) {
63+ if ( ! classPoint . cls ) continue
64+ if ( classPoint . x < 0 ) continue
65+ ///etc...
66+ console . log (
67+ regionClsList . indexOf ( classPoint . cls ) , Math . floor (
68+ classPoint . y * sampleImageData . height
69+ ) , Math . floor ( classPoint . x * sampleImageData . width
70+ )
71+ )
72+ mmgc . addClassPoint ( regionClsList . indexOf ( classPoint . cls ) , Math . floor (
73+ classPoint . y * sampleImageData . height
74+ ) , Math . floor ( classPoint . x * sampleImageData . width
75+ ) )
76+ }
77+ // mmgc.addClassPoint(0, 100, 125)
78+ // mmgc.addClassPoint(1, 10, 10)
79+ // mmgc.addClassPoint(1, 240, 300)
80+ mmgc . computeMasks ( )
81+ const maskAddress = mmgc . getColoredMask ( )
82+ const cppImDataUint8 = new Uint8ClampedArray (
83+ mmgc . HEAPU8 . buffer ,
84+ maskAddress ,
85+ sampleImageData . width * sampleImageData . height * 4
86+ )
87+
88+ const maskImageData = new ImageData ( cppImDataUint8 , sampleImageData . width , sampleImageData . height )
89+
90+ // for (const i = 0; i < cppImDataUint8.length;i++){
91+ // sampleImageData.data[i] = cppImDataUint8[i]
92+ // }
93+ context . clearRect ( 0 , 0 , sampleImageData . width , sampleImageData . height )
94+ context . putImageData ( maskImageData , 0 , 0 )
95+ } , [ canvasRef , sampleImageData , JSON . stringify ( classPoints . map ( c => [ c . x , c . y , c . cls ] ) ) ] )
2596
2697 const style = useMemo ( ( ) => {
2798 let width = imagePosition . bottomRight . x - imagePosition . topLeft . x
@@ -34,7 +105,7 @@ export default ({
34105 zIndex,
35106 position,
36107 opacity,
37- pointerEvents,
108+ pointerEvents : "none" ,
38109 }
39110 } , [
40111 imagePosition . topLeft . x ,
@@ -44,14 +115,13 @@ export default ({
44115 zIndex ,
45116 position ,
46117 opacity ,
47- pointerEvents ,
48118 ] )
49-
119+
50120 return (
51121 < canvas
52122 style = { style }
53- width = { imageData . width }
54- height = { imageData . height }
123+ width = { sampleImageData ? sampleImageData . width : 0 }
124+ height = { sampleImageData ? sampleImageData . height : 0 }
55125 ref = { setCanvasRef }
56126 />
57127 )
0 commit comments