1414//============================================================================
1515define ( [
1616'vp_base/js/com/component/LibraryComponent' ,
17- 'vp_base/js/com/component/DataSelector'
18- ] , function ( LibraryComponent , DataSelector ) {
17+ 'vp_base/js/com/component/DataSelector' ,
18+ 'vp_base/js/com/com_util'
19+ ] , function ( LibraryComponent , DataSelector , com_util ) {
1920/**
2021 * PandasPlot
2122 */
@@ -26,15 +27,52 @@ define([
2627this . state = {
2728i0 :'' ,
2829o0 :'' ,
30+ figWidth :'' ,
31+ figHeight :'' ,
2932 ...this . state
3033}
3134}
35+
36+ _bindEventAfterRender ( ) {
37+ let that = this ;
38+
39+ $ ( this . wrapSelector ( '#figWidth' ) ) . on ( 'blur' , function ( ) {
40+ let width = $ ( this ) . val ( ) ;
41+ let height = $ ( that . wrapSelector ( '#figHeight' ) ) . val ( ) ;
42+
43+ if ( width !== '' || height !== '' ) {
44+ $ ( that . wrapSelector ( '#figsize' ) ) . val ( com_util . formatString ( '({0},{1})' , width , height ) ) ;
45+ } else {
46+ $ ( that . wrapSelector ( '#figsize' ) ) . val ( '' ) ;
47+ }
48+ } ) ;
49+ $ ( this . wrapSelector ( '#figHeight' ) ) . on ( 'blur' , function ( ) {
50+ let width = $ ( that . wrapSelector ( '#figWidth' ) ) . val ( ) ;
51+ let height = $ ( this ) . val ( ) ;
52+
53+ if ( width !== '' || height !== '' ) {
54+ $ ( that . wrapSelector ( '#figsize' ) ) . val ( com_util . formatString ( '({0},{1})' , width , height ) ) ;
55+ } else {
56+ $ ( that . wrapSelector ( '#figsize' ) ) . val ( '' ) ;
57+ }
58+ } ) ;
59+ }
60+
3261render ( ) {
3362super . render ( ) ;
3463
3564// add data selector
3665let dataSelector = new DataSelector ( { pageThis :this , id :'i0' , value :this . state . i0 , required :true } ) ;
3766$ ( this . wrapSelector ( '#i0' ) ) . replaceWith ( dataSelector . toTagString ( ) ) ;
67+
68+ // divide figure size option to width / height
69+ let figSizeTemplate = `
70+ <input type="number" class="vp-input m vp-state" id="figWidth" placeholder="Width" value="${ this . state . figWidth }
71+ <input type="number" class="vp-input m vp-state" id="figHeight" placeholder="Height" value="${ this . state . figHeight }
72+ $ ( this . wrapSelector ( '#figsize' ) ) . hide ( ) ;
73+ $ ( this . wrapSelector ( '#figsize' ) ) . parent ( ) . append ( figSizeTemplate ) ;
74+
75+ this . _bindEventAfterRender ( ) ;
3876}
3977}
4078
