Skip to content

Commit e272152

Browse files
author
minjk-bl
committed
Numpy 2darr component
1 parent 3300c4b commit e272152

File tree

2 files changed

+196
-5
lines changed

2 files changed

+196
-5
lines changed

‎css/m_library/numpyComponent.css

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,22 @@
118118
flex-direction: row;
119119
flex-flow: wrap;
120120
}
121+
.vp-numpy-style-flex-row {
122+
display: flex;
123+
flex-direction: row;
124+
}
121125
.vp-numpy-style-flex-column {
122126
display: flex;
123127
flex-direction: column;
124-
}
128+
}
129+
.vp-numpy-style-flex-column-center {
130+
display: flex;
131+
flex-direction: column;
132+
justify-content: center;
133+
}
134+
.vp-numpy-box-border {
135+
border: 1px solid #E4E4E4;
136+
border-radius: 5px;
137+
box-sizing: border-box;
138+
padding: 10px;
139+
}

‎js/com/com_generatorV2.js

Lines changed: 180 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -608,15 +608,15 @@ define([
608608
// Array Items
609609
let arrItems = $(`<div class="vp-numpy-style-flex-row-wrap vp-numpy-1darr-item-box"></div>`);
610610
arrState.forEach((item, idx) => {
611-
arrItems.append(render1dArrItem(pageThis, idx, item));
611+
arrItems.append(render1dArrItem(idx, item));
612612
});
613613
contentTag.append(arrItems);
614614
// add button
615615
contentTag.append($(`<button class="vp-button vp-numpy-1darr-add">+ Add</button>`));
616616
return contentTag;
617617
}
618618

619-
var render1dArrItem = function(pageThis, idx, value=0) {
619+
var render1dArrItem = function(idx, value=0) {
620620
return $(`<div class="vp-numpy-style-flex-column" style="margin-top:10px;;margin-bottom:10px;">
621621
<div class="text-center" style="margin-top:10px;;margin-bottom:10px;">
622622
${idx}
@@ -628,8 +628,85 @@ define([
628628
</div>`);
629629
}
630630

631-
var render2dArr = function(pageThis, obj, defaultValue) {
632-
return $('<input value="2darr"/>');
631+
var render2dArr = function(pageThis, obj, state) {
632+
let arrKey = obj.name + '_2darr';
633+
let arrState = [[0]];
634+
let value = `[[0]]`;
635+
if (state[arrKey] == undefined) {
636+
pageThis.setState({ [arrKey]: arrState });
637+
pageThis.setState({ [obj.name]: value});
638+
} else {
639+
arrState = state[arrKey];
640+
value = `[${arrState.map(ele => '[' + ele.join(',') + ']').join(',')}]`;
641+
}
642+
643+
let contentTag = $(`<div class="vp-numpy-2darr-box"></div>`);
644+
$(contentTag).attr({
645+
'data-id': obj.name
646+
});
647+
contentTag.data('obj', obj);
648+
// Length setting
649+
let rowLength = arrState.length;
650+
let colLength = 0;
651+
if (arrState.length > 0) {
652+
colLength = Math.max(...arrState.map(ele => ele.length));
653+
}
654+
contentTag.append(`<div class="vp-numpy-style-flex-row-center">
655+
<div style="margin:0 5px;">
656+
<span>Row : </span>
657+
<input class="vp-input vp-numpy-2darr-set-row" style="width:50px;" value="${rowLength}" type="text">
658+
</div>
659+
<div style="margin:0 5px;">
660+
<span>Col : </span>
661+
<input class="vp-input vp-numpy-2darr-set-col" style="width:50px;" value="${colLength}" type="text">
662+
</div>
663+
<button class="vp-button vp-numpy-2darr-set">Set</button>
664+
<input type="hidden" class="vp-state" id="${obj.name}" value="${value}">
665+
</div>`)
666+
// Array Items
667+
let arrItems = $(`<div class="vp-numpy-style-flex-column vp-numpy-2darr-item-box"></div>`);
668+
arrState.forEach((item, idx) => {
669+
arrItems.append(render2dArrItem(idx, item));
670+
});
671+
contentTag.append(arrItems);
672+
// row add button
673+
contentTag.append($(`<button class="vp-button vp-numpy-2darr-row-add" style="width: 100%;">+ Row</button>`));
674+
return contentTag;
675+
}
676+
677+
var render2dArrItem = function(rowIdx, item) {
678+
let arrRowBox = $(`<div class="vp-numpy-arrayEditor-row-block vp-numpy-style-flex-row vp-numpy-box-border"></div>`);
679+
let arrRows = $(`<div class="overflow-x-auto vp-numpy-style-flex-row vp-scrollbar" style="width: 80%; overflow: auto; margin-top:5px; margin-bottom:5px;"></div>`);
680+
// row index
681+
arrRows.append($(`<div class="vp-numpy-style-flex-column-center vp-bold vp-numpy-2darr-row" data-idx="${rowIdx}" style="width: 10%;">
682+
${rowIdx}
683+
</div>`))
684+
// columns
685+
let arrColBox = $(`<div class="vp-numpy-style-flex-column" style="width: 90%;"></div>`);
686+
let arrCols = $(`<div class="vp-numpy-array-row-container vp-numpy-style-flex-row-wrap" style="width:100%;"></div>`);
687+
item.forEach((col, idx) => {
688+
arrCols.append($(`<div class="vp-numpy-style-flex-column" style="margin-top:5px">
689+
<span class="vp-numpy-style-flex-row-center vp-bold">
690+
${idx}
691+
</span>
692+
<input class="vp-input vp-numpy-2darr-item" style="width:40px;" value="${col}" data-rowidx="${rowIdx}" data-idx="${idx}" type="text">
693+
<button class="vp-button vp-numpy-2darr-col-del" style="width:40px;" title="Delete column">
694+
x
695+
</button>
696+
</div>`));
697+
});
698+
arrColBox.append(arrCols);
699+
arrRows.append(arrColBox);
700+
arrRowBox.append(arrRows);
701+
// col add button
702+
arrRowBox.append($(`<div class="vp-numpy-style-flex-column-center" style="width:10%;">
703+
<button class="vp-button vp-numpy-2darr-col-add" style="width: 100%;height:40px;max-height:80px;" title="Add column">+</button>
704+
</div>`));
705+
// row delete button
706+
arrRowBox.append($(`<div class="vp-numpy-style-flex-column-center" style="width:10%;">
707+
<button class="vp-button vp-numpy-2darr-row-del" style="width: 100%;height:40px;max-height:80px;" title="Delete row">x</button>
708+
</div>`));
709+
return arrRowBox;
633710
}
634711

635712
var renderNdArr = function(pageThis, obj, defaultValue) {
@@ -750,7 +827,106 @@ define([
750827
//====================================================================
751828
// Event for 2dArr
752829
//====================================================================
830+
$(selector).on('click', '.vp-numpy-2darr-set', function() {
831+
let id = $(this).closest('.vp-numpy-2darr-box').data('id');
832+
let arrId = id + '_2darr';
833+
let row = $(this).parent().find('.vp-numpy-2darr-set-row').val();
834+
let col = $(this).parent().find('.vp-numpy-2darr-set-col').val();
835+
// update state
836+
let state = Array(parseInt(row)).fill(Array(parseInt(col)).fill(0));
837+
pageThis.setState({ [arrId]: state });
838+
pageThis.setState({ [id]: `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]` });
839+
// re-render
840+
let obj = $(this).closest('.vp-numpy-2darr-box').data('obj');
841+
$(this).closest('.vp-numpy-2darr-box').replaceWith(function() {
842+
return render2dArr(pageThis, obj, pageThis.getState());
843+
});
844+
});
753845

846+
$(selector).on('click', '.vp-numpy-2darr-row-del', function() {
847+
let id = $(this).closest('.vp-numpy-2darr-box').data('id');
848+
let arrId = id + '_2darr';
849+
let idx = $(this).parent().parent().find('.vp-numpy-2darr-row').data('idx');
850+
// update state
851+
let state = pageThis.getState(arrId);
852+
state.splice(idx, 1);
853+
pageThis.setState({ [arrId]: state });
854+
pageThis.setState({ [id]: `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]` });
855+
// re-render
856+
let obj = $(this).closest('.vp-numpy-2darr-box').data('obj');
857+
$(this).closest('.vp-numpy-2darr-box').replaceWith(function() {
858+
return render2dArr(pageThis, obj, pageThis.getState());
859+
});
860+
});
861+
862+
$(selector).on('click', '.vp-numpy-2darr-row-add', function() {
863+
let id = $(this).closest('.vp-numpy-2darr-box').data('id');
864+
let arrId = id + '_2darr';
865+
// update state
866+
let state = pageThis.getState(arrId);
867+
if (!state) {
868+
state = [];
869+
}
870+
state.push([0]);
871+
pageThis.setState({ [arrId]: state });
872+
pageThis.setState({ [id]: `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]` });
873+
// re-render
874+
let obj = $(this).closest('.vp-numpy-2darr-box').data('obj');
875+
$(this).closest('.vp-numpy-2darr-box').replaceWith(function() {
876+
return render2dArr(pageThis, obj, pageThis.getState());
877+
});
878+
});
879+
880+
$(selector).on('click', '.vp-numpy-2darr-col-del', function() {
881+
let id = $(this).closest('.vp-numpy-2darr-box').data('id');
882+
let arrId = id + '_2darr';
883+
let rowIdx = $(this).parent().parent().find('.vp-numpy-2darr-item').data('rowidx');
884+
let idx = $(this).parent().find('.vp-numpy-2darr-item').data('idx');
885+
// update state
886+
let state = pageThis.getState(arrId);
887+
state[rowIdx].splice(idx, 1);
888+
pageThis.setState({ [arrId]: state });
889+
pageThis.setState({ [id]: `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]` });
890+
// re-render
891+
let obj = $(this).closest('.vp-numpy-2darr-box').data('obj');
892+
$(this).closest('.vp-numpy-2darr-box').replaceWith(function() {
893+
return render2dArr(pageThis, obj, pageThis.getState());
894+
});
895+
});
896+
897+
$(selector).on('click', '.vp-numpy-2darr-col-add', function() {
898+
let id = $(this).closest('.vp-numpy-2darr-box').data('id');
899+
let arrId = id + '_2darr';
900+
let rowIdx = $(this).parent().parent().find('.vp-numpy-2darr-item').data('rowidx');
901+
// update state
902+
let state = pageThis.getState(arrId);
903+
if (!state) {
904+
state = Array(rowIdx + 1).fill([]);
905+
}
906+
state[rowIdx].push(0);
907+
pageThis.setState({ [arrId]: state });
908+
pageThis.setState({ [id]: `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]` });
909+
// re-render
910+
let obj = $(this).closest('.vp-numpy-2darr-box').data('obj');
911+
$(this).closest('.vp-numpy-2darr-box').replaceWith(function() {
912+
return render2dArr(pageThis, obj, pageThis.getState());
913+
});
914+
});
915+
916+
$(selector).on('change', '.vp-numpy-2darr-item', function() {
917+
let id = $(this).closest('.vp-numpy-2darr-box').data('id');
918+
let arrId = id + '_2darr';
919+
let rowIdx = $(this).data('rowidx');
920+
let idx = $(this).data('idx');
921+
let value = $(this).val();
922+
// update state
923+
let state = pageThis.getState(arrId);
924+
state[rowIdx][idx] = value;
925+
let code = `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]`;
926+
pageThis.setState({ [arrId]: state });
927+
pageThis.setState({ [id]: code });
928+
$(pageThis.wrapSelector('#'+id)).val(code);
929+
});
754930

755931
//====================================================================
756932
// Event for ndArr

0 commit comments

Comments
 (0)