@@ -19,6 +19,8 @@ define([
19
19
var _VP_SHOW_RESULT = true ;
20
20
21
21
const _VP_COMP_TYPE_LABEL = {
22
+ '1dlen' : '1D Length' ,
23
+ '2dlen' : '2D Length' ,
22
24
'1darr' : '1D Array' ,
23
25
'2darr' : '2D Array' ,
24
26
'ndarr' : 'ND Array' ,
@@ -192,6 +194,12 @@ define([
192
194
}
193
195
// create as component type
194
196
switch ( componentType ) {
197
+ case '1dlen' :
198
+ content = render1dLen ( pageThis , obj , state ) ;
199
+ break ;
200
+ case '2dlen' :
201
+ content = render2dLen ( pageThis , obj , state ) ;
202
+ break ;
195
203
case '1darr' :
196
204
content = render1dArr ( pageThis , obj , state ) ;
197
205
break ;
@@ -576,6 +584,44 @@ define([
576
584
//========================================================================
577
585
// Render components
578
586
//========================================================================
587
+ var render1dLen = function ( pageThis , obj , state ) {
588
+ state = {
589
+ [ obj . name ] : '' ,
590
+ ...state
591
+ } ;
592
+ return $ ( `<div class="vp-numpy-style-flex-row">
593
+ <div class="vp-numpy-style-flex-row" style="margin-right:10px;">
594
+ <span class="vp-numpy-style-flex-column-center mr5">
595
+ Length
596
+ </span>
597
+ <input type="text" id="${ obj . name } " value="${ state [ obj . name ] } " class="vp-input vp-state" style="width:200px;" placeholder="Input Number">
598
+ </div>
599
+ </div>` )
600
+ }
601
+
602
+ var render2dLen = function ( pageThis , obj , state ) {
603
+ state = {
604
+ [ obj . name + '_row' ] : '' ,
605
+ [ obj . name + '_col' ] : '' ,
606
+ ...state
607
+ }
608
+ return $ ( `<div class="vp-numpy-style-flex-row">
609
+ <div class="vp-numpy-style-flex-row" style="margin-right:10px;">
610
+ <span class="vp-numpy-style-flex-column-center" style="margin-right:5px;">
611
+ Row
612
+ </span>
613
+ <input type="text" id="${ obj . name } _row" data-id="${ obj . name } " value="${ state [ obj . name + '_row' ] } " class="vp-input vp-state vp-numpy-2dlen-item" style="width:150px;" placeholder="Number">
614
+ </div>
615
+ <div class="vp-numpy-style-flex-row" style="margin-right:10px;">
616
+ <span class="vp-numpy-style-flex-column-center" style="margin-right:5px;">
617
+ Col
618
+ </span>
619
+ <input type="text" id="${ obj . name } _col" data-id="${ obj . name } " value="${ state [ obj . name + '_col' ] } " class="vp-input vp-state vp-numpy-2dlen-item" style="width:150px;" placeholder="Number">
620
+ </div>
621
+ <input type="hidden" class="vp-state" id="${ obj . name } " value="${ state [ obj . name ] } ">
622
+ </div>` ) ;
623
+ }
624
+
579
625
var render1dArr = function ( pageThis , obj , state ) {
580
626
let arrKey = obj . name + '_1darr' ;
581
627
let arrState = [ 0 ] ;
@@ -730,16 +776,16 @@ define([
730
776
let arrItems = $ ( `<div class="vp-numpy-style-flex-row-between-wrap"></div>` ) ;
731
777
arrState . forEach ( ( item , idx ) => {
732
778
arrItems . append ( $ ( `<div class="vp-numpy-style-flex-row">
733
- <div class="vp-numpy-style-flex-column-center vp-bold mr5">
779
+ <div class="vp-numpy-style-flex-column-center vp-bold mr5 w10 ">
734
780
${ idx + 1 }
735
781
</div>
736
782
<input class="vp-numpy-input vp-numpy-ndarr-item" data-idx="${ idx } " value="${ item } " type="text" placeholder="Value">
737
- <button class="vp-button vp-numpy-ndarr-del">x</button>
783
+ <button class="vp-button vp-numpy-ndarr-del w30 ">x</button>
738
784
</div>` ) ) ;
739
785
} ) ;
740
786
contentTag . append ( arrItems ) ;
741
787
// add button
742
- contentTag . append ( $ ( `<button class="vp-button vp-numpy-ndarr-add">+</button>` ) ) ;
788
+ contentTag . append ( $ ( `<button class="vp-button vp-numpy-ndarr-add w30 ">+</button>` ) ) ;
743
789
return contentTag ;
744
790
}
745
791
@@ -790,9 +836,21 @@ define([
790
836
let contentTag = $ ( this ) . parent ( ) . find ( '.vp-auto-component-content' ) ;
791
837
let newType = $ ( this ) . val ( ) ;
792
838
let obj = $ ( this ) . data ( 'obj' ) ;
839
+ // reset state
840
+ pageThis . setState ( { [ obj . name ] : '' } ) ;
793
841
$ ( contentTag ) . html ( renderContent ( pageThis , newType , obj , pageThis . getState ( ) ) ) ;
794
842
} ) ;
795
843
844
+ //====================================================================
845
+ // Event for 2dLen
846
+ //====================================================================
847
+ $ ( selector ) . on ( 'change' , '.vp-numpy-2dlen-item' , function ( ) {
848
+ let id = $ ( this ) . data ( 'id' ) ;
849
+ let newValue = pageThis . getState ( id + '_row' ) + ',' + pageThis . getState ( id + '_col' ) ;
850
+ $ ( pageThis . wrapSelector ( '#' + id ) ) . val ( newValue ) ;
851
+ $ ( pageThis . wrapSelector ( '#' + id ) ) . trigger ( 'change' ) ;
852
+ } ) ;
853
+
796
854
//====================================================================
797
855
// Event for 1dArr
798
856
//====================================================================
0 commit comments