@@ -39,29 +39,50 @@ function getBoundings(selector: string): DOMRect {
3939
4040function getClipPathByTwoRect ( rect : DOMRect , fullscreen : DOMRect ) {
4141 const rects = [
42- [ [ fullscreen . left , fullscreen . top ] , [ rect . left , fullscreen . bottom ] ] ,
43- [ [ rect . right , fullscreen . top ] , [ fullscreen . right , fullscreen . bottom ] ] ,
44- [ [ rect . left , fullscreen . top ] , [ rect . right , rect . top ] ] ,
45- [ [ rect . left , rect . bottom ] , [ rect . right , fullscreen . bottom ] ] ,
42+ [
43+ [ fullscreen . left , fullscreen . top ] ,
44+ [ rect . left , fullscreen . bottom ] ,
45+ ] ,
46+ [
47+ [ rect . right , fullscreen . top ] ,
48+ [ fullscreen . right , fullscreen . bottom ] ,
49+ ] ,
50+ [
51+ [ rect . left , fullscreen . top ] ,
52+ [ rect . right , rect . top ] ,
53+ ] ,
54+ [
55+ [ rect . left , rect . bottom ] ,
56+ [ rect . right , fullscreen . bottom ] ,
57+ ] ,
4658 ] ;
4759
4860 const points = rects . map ( ( [ p1 , p2 ] ) => {
49- return [ [ p1 [ 0 ] , p1 [ 1 ] ] , [ p2 [ 0 ] , p1 [ 1 ] ] , [ p2 [ 0 ] , p2 [ 1 ] ] , [ p1 [ 0 ] , p2 [ 1 ] ] ] ;
50- } )
61+ return [
62+ [ p1 [ 0 ] , p1 [ 1 ] ] ,
63+ [ p2 [ 0 ] , p1 [ 1 ] ] ,
64+ [ p2 [ 0 ] , p2 [ 1 ] ] ,
65+ [ p1 [ 0 ] , p2 [ 1 ] ] ,
66+ ] ;
67+ } ) ;
5168
52- const path = points . map ( point => (
53- point . map ( ( [ x , y ] , idx ) => idx === 0 ? `M${ x } ${ y } : `L${ x } ${ y } ) . join ( ' ' ) + 'Z'
54- ) ) ;
69+ const path = points . map (
70+ point =>
71+ point
72+ . map ( ( [ x , y ] , idx ) => ( idx === 0 ? `M${ x } ${ y } : `L${ x } ${ y } ) )
73+ . join ( ' ' ) + 'Z' ,
74+ ) ;
5575 return `path("${ path . join ( ' ' ) } ;
5676}
5777
5878/**
5979 * 新手引导组件
60- * @returns
80+ * @returns
6181 */
6282export const Guidance : React . FC = ( ) => {
6383 // localStorage 存储
64- const [ isGuidanceFinished , setGuidanceFinished ] = useLocalStorageState < string > ( LocalStorageKey ) ;
84+ const [ isGuidanceFinished , setGuidanceFinished ] =
85+ useLocalStorageState < string > ( LocalStorageKey ) ;
6586
6687 const [ step , setStep ] = useState < number > ( 0 ) ;
6788
@@ -90,47 +111,87 @@ export const Guidance: React.FC = () => {
90111 setStep ( - 1 ) ;
91112 setGuidanceFinished ( '1' ) ;
92113 } ,
93- }
114+ } ;
94115
95116 function getGuidanceUI ( ) {
96- if ( step === 0 ) return ( < Welcome { ...props } /> ) ;
117+ if ( step === 0 ) return < Welcome { ...props } /> ;
97118 if ( step === 1 ) {
98119 const rect = getBoundings ( SelectorSidebar ) ;
99- return ( < Query { ...props } x = { rect . right - 16 } y = { rect . top + 100 } /> ) ;
120+ return < Query { ...props } x = { rect . right - 16 } y = { rect . top + 100 } /> ;
100121 }
101122 if ( step === 2 ) {
102123 const rect = getBoundings ( SelectorCanvas ) ;
103- return ( < Spread { ...props } x = { rect . x + rect . width * 0.382 } y = { 300 } /> ) ;
124+ return < Spread { ...props } x = { rect . x + rect . width * 0.382 } y = { 300 } /> ;
104125 }
105126 if ( step === 3 ) {
106127 const rect = getBoundings ( SelectorStyle ) ;
107128 const canvasRect = getBoundings ( SelectorCanvas ) ;
108129 // 32px 是箭头的偏移
109- return ( < StyleBtn { ...props } x = { rect . x + rect . width / 2 - 32 } y = { rect . bottom } canvasX = { canvasRect . x + canvasRect . width * 0.382 } canvasY = { 300 } /> ) ;
130+ return (
131+ < StyleBtn
132+ { ...props }
133+ x = { rect . x + rect . width / 2 - 32 }
134+ y = { rect . bottom }
135+ canvasX = { canvasRect . x + canvasRect . width * 0.382 }
136+ canvasY = { 300 }
137+ />
138+ ) ;
110139 }
111140 if ( step === 4 ) {
112141 const rect = getBoundings ( SelectorSidebar ) ;
113142 const canvasRect = getBoundings ( SelectorCanvas ) ;
114- return ( < StylePanel { ...props } x = { rect . right - 16 } y = { rect . top + 200 } canvasX = { canvasRect . x + canvasRect . width * 0.382 } canvasY = { 300 } /> ) ;
143+ return (
144+ < StylePanel
145+ { ...props }
146+ x = { rect . right - 16 }
147+ y = { rect . top + 200 }
148+ canvasX = { canvasRect . x + canvasRect . width * 0.382 }
149+ canvasY = { 300 }
150+ />
151+ ) ;
115152 }
116153 if ( step === 5 ) {
117154 const rect = getBoundings ( SelectorFilter ) ;
118155 const canvasRect = getBoundings ( SelectorCanvas ) ;
119156 // 32px 是箭头的偏移
120- return ( < FilterBtn { ...props } x = { rect . x + rect . width / 2 - 32 } y = { rect . bottom } canvasX = { canvasRect . x + canvasRect . width * 0.382 } canvasY = { 300 } /> ) ;
157+ return (
158+ < FilterBtn
159+ { ...props }
160+ x = { rect . x + rect . width / 2 - 32 }
161+ y = { rect . bottom }
162+ canvasX = { canvasRect . x + canvasRect . width * 0.382 }
163+ canvasY = { 300 }
164+ />
165+ ) ;
121166 }
122167 if ( step === 6 ) {
123168 const rect = getBoundings ( SelectorSidebar ) ;
124169 const canvasRect = getBoundings ( SelectorCanvas ) ;
125- return ( < FilterPanel { ...props } x = { rect . right - 16 } y = { rect . top + 100 } canvasX = { canvasRect . x + canvasRect . width * 0.382 } canvasY = { 300 } /> ) ;
170+ return (
171+ < FilterPanel
172+ { ...props }
173+ x = { rect . right - 16 }
174+ y = { rect . top + 100 }
175+ canvasX = { canvasRect . x + canvasRect . width * 0.382 }
176+ canvasY = { 300 }
177+ />
178+ ) ;
126179 }
127180 if ( step === 7 ) {
128181 const rect = getBoundings ( SelectorDownload ) ;
129182 const canvasRect = getBoundings ( SelectorCanvas ) ;
130- return ( < Download { ...props } x = { rect . x + rect . width / 2 } y = { rect . bottom } canvasX = { canvasRect . x + canvasRect . width * 0.382 } canvasY = { 300 } /> ) ;
183+ return (
184+ < Download
185+ { ...props }
186+ x = { rect . x + rect . width / 2 }
187+ y = { rect . bottom }
188+ canvasX = { canvasRect . x + canvasRect . width * 0.382 }
189+ canvasY = { 300 }
190+ />
191+ ) ;
131192 }
132193 if ( step === 8 ) {
133- return ( < End { ...props } /> ) ;
194+ return < End { ...props } /> ;
134195 }
135196 return null ;
136197 }
@@ -157,9 +218,15 @@ export const Guidance: React.FC = () => {
157218 return 'none' ;
158219 }
159220
160- return ! isGuidanceFinished &&
161- < div className = { styles . guidance } style = { { display : step >= 0 && step <= 8 ? 'unset' : 'none' } } >
162- < div className = { styles . mask } style = { { clipPath : getClipPath ( ) } } />
163- { getGuidanceUI ( ) }
164- </ div > ;
221+ return (
222+ ! isGuidanceFinished && (
223+ < div
224+ className = { styles . guidance }
225+ style = { { display : step >= 0 && step <= 8 ? 'unset' : 'none' } }
226+ >
227+ < div className = { styles . mask } style = { { clipPath : getClipPath ( ) } } />
228+ { getGuidanceUI ( ) }
229+ </ div >
230+ )
231+ ) ;
165232} ;
0 commit comments