Skip to content

Commit 45cbd11

Browse files
author
minjk-bl
committed
Numpy ndarr component
1 parent e272152 commit 45cbd11

File tree

2 files changed

+100
-6
lines changed

2 files changed

+100
-6
lines changed

‎css/root.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -310,6 +310,9 @@ hr.vp-extra-menu-line {
310310
.mb5 {
311311
margin-bottom: 5px;
312312
}
313+
.mr5 {
314+
margin-right: 5px;
315+
}
313316
/* table style */
314317
.vp-tbl-gap5 {
315318
border-spacing: 5px;

‎js/com/com_generatorV2.js

Lines changed: 97 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -676,7 +676,7 @@ define([
676676

677677
var render2dArrItem = function(rowIdx, item) {
678678
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>`);
679+
let arrRows = $(`<div class="vp-numpy-style-flex-row" style="width: 80%; margin-top:5px; margin-bottom:5px;"></div>`);
680680
// row index
681681
arrRows.append($(`<div class="vp-numpy-style-flex-column-center vp-bold vp-numpy-2darr-row" data-idx="${rowIdx}" style="width: 10%;">
682682
${rowIdx}
@@ -709,16 +709,54 @@ define([
709709
return arrRowBox;
710710
}
711711

712-
var renderNdArr = function(pageThis, obj, defaultValue) {
713-
return $('<input value="ndarr"/>');
712+
var renderNdArr = function(pageThis, obj, state) {
713+
let arrKey = obj.name + '_ndarr';
714+
let arrState = [ '' ];
715+
let value = `${arrState.join(',')}`;
716+
if (state[arrKey] == undefined) {
717+
pageThis.setState({ [arrKey]: arrState });
718+
pageThis.setState({ [obj.name]: value});
719+
} else {
720+
arrState = state[arrKey];
721+
value = `${arrState.join(',')}`;
722+
}
723+
724+
let contentTag = $(`<div class="vp-numpy-ndarr-box"></div>`);
725+
$(contentTag).attr({
726+
'data-id': obj.name
727+
});
728+
contentTag.data('obj', obj);
729+
// Array Items
730+
let arrItems = $(`<div class="vp-numpy-style-flex-row-between-wrap"></div>`);
731+
arrState.forEach((item, idx) => {
732+
arrItems.append($(`<div class="vp-numpy-style-flex-row">
733+
<div class="vp-numpy-style-flex-column-center vp-bold mr5">
734+
${idx + 1}
735+
</div>
736+
<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>
738+
</div>`));
739+
});
740+
contentTag.append(arrItems);
741+
// add button
742+
contentTag.append($(`<button class="vp-button vp-numpy-ndarr-add">+</button>`));
743+
return contentTag;
714744
}
715745

716-
var renderScalar = function(pageThis, obj, defaultValue) {
717-
return $('<input value="scalar"/>');
746+
var renderScalar = function(pageThis, obj, state) {
747+
let placeholder = 'Input Scalar';
748+
if (obj.placeholder) {
749+
placeholder = obj.placeholder;
750+
}
751+
return $(`<input class="vp-input vp-state" placeholder="${placeholder}" value="${state[obj.name]}"/>`);
718752
}
719753

720754
var renderParam = function(pageThis, obj, defaultValue) {
721-
return $('<input value="param"/>');
755+
let placeholder = 'Input Param';
756+
if (obj.placeholder) {
757+
placeholder = obj.placeholder;
758+
}
759+
return $(`<input class="vp-input vp-state" placeholder="${placeholder}" value="${state[obj.name]}"/>`);
722760
}
723761

724762
var renderDtypeSelector = function(pageThis, obj, defaultValue) {
@@ -931,8 +969,61 @@ define([
931969
//====================================================================
932970
// Event for ndArr
933971
//====================================================================
972+
$(selector).on('click', '.vp-numpy-ndarr-del', function() {
973+
let id = $(this).closest('.vp-numpy-ndarr-box').data('id');
974+
let arrId = id + '_ndarr';
975+
let idx = $(this).parent().find('.vp-numpy-ndarr-item').data('idx');
976+
// update state
977+
let state = pageThis.getState(arrId);
978+
state.splice(idx, 1);
979+
pageThis.setState({ [arrId]: state });
980+
pageThis.setState({ [id]: `${state.join(',')}` });
981+
// re-render
982+
let obj = $(this).closest('.vp-numpy-ndarr-box').data('obj');
983+
$(this).closest('.vp-numpy-ndarr-box').replaceWith(function() {
984+
return renderNdArr(pageThis, obj, pageThis.getState());
985+
});
986+
});
987+
988+
$(selector).on('click', '.vp-numpy-ndarr-add', function() {
989+
let id = $(this).closest('.vp-numpy-ndarr-box').data('id');
990+
let arrId = id + '_ndarr';
991+
let idx = 0;
992+
// update state
993+
let state = pageThis.getState(arrId);
994+
if (!state) {
995+
state = [ ];
996+
} else {
997+
idx = state.length;
998+
}
999+
state.push(0);
1000+
pageThis.setState({ [arrId]: state });
1001+
pageThis.setState({ [id]: `${state.join(',')}` });
1002+
// re-render
1003+
let obj = $(this).closest('.vp-numpy-ndarr-box').data('obj');
1004+
$(this).closest('.vp-numpy-ndarr-box').replaceWith(function() {
1005+
return renderNdArr(pageThis, obj, pageThis.getState());
1006+
});
1007+
});
9341008

1009+
$(selector).on('change', '.vp-numpy-ndarr-item', function() {
1010+
let id = $(this).closest('.vp-numpy-ndarr-box').data('id');
1011+
let arrId = id + '_ndarr';
1012+
let idx = $(this).data('idx');
1013+
let value = $(this).val();
1014+
// update state
1015+
let state = pageThis.getState(arrId);
1016+
state[idx] = value;
1017+
let code = `${state.join(',')}`;
1018+
pageThis.setState({ [arrId]: state });
1019+
pageThis.setState({ [id]: code });
1020+
$(pageThis.wrapSelector('#'+id)).val(code);
1021+
});
9351022

1023+
1024+
//====================================================================
1025+
// Event for tabBlock
1026+
//====================================================================
9361027
}
9371028

9381029
return {

0 commit comments

Comments
 (0)