From 48b2d58585c3ed3c8fa83febb2ce656807d588c6 Mon Sep 17 00:00:00 2001 From: minjk-bl Date: Thu, 13 May 2021 17:38:50 +0900 Subject: [PATCH 1/4] #12 - instance design changed --- css/common/instanceEditor.css | 8 +++++--- css/common/subsetEditor.css | 4 ++++ css/file_io/instance.css | 16 +++++++++++++--- src/common/vpSubsetEditor.js | 19 ++++++++++++++++--- src/file_io/instance.html | 20 +++++++++----------- src/file_io/instance.js | 34 +++++++++++++++++----------------- 6 files changed, 64 insertions(+), 37 deletions(-) diff --git a/css/common/instanceEditor.css b/css/common/instanceEditor.css index 81d9ae57..c603fa12 100644 --- a/css/common/instanceEditor.css +++ b/css/common/instanceEditor.css @@ -4,13 +4,15 @@ display: grid; grid-template-columns: 50% 50%; grid-gap: 10px; - padding: 5px 14px 0px 14px; + /* padding: 5px 14px 0px 14px; */ + padding-right: 14px; } .vp-ins-select-container { } .vp-ins-select-title { - font-weight: bold; + font-weight: 700; + color: var(--hightlight-color); padding: 5px 5px 5px 0px; } #vp-wrapper .vp-ins-select-container input.vp-ins-search { @@ -21,7 +23,7 @@ border: 0.25px solid #C4C4C4; } .vp-ins-select-list { - height: 200px; + height: 145px; width: 100%; list-style: none; diff --git a/css/common/subsetEditor.css b/css/common/subsetEditor.css index dba75d4b..fdbc95b1 100644 --- a/css/common/subsetEditor.css +++ b/css/common/subsetEditor.css @@ -12,6 +12,10 @@ background-color: rgba(0,0,0,.4); } +.vp-ds-button { + width: 45px; +} + .vp-ds-container { position: relative; left: 50%; diff --git a/css/file_io/instance.css b/css/file_io/instance.css index f23b350e..67ce9fe9 100644 --- a/css/file_io/instance.css +++ b/css/file_io/instance.css @@ -9,6 +9,7 @@ vertical-align: top; } .vp-instance-toolbar { + /* display: none; */ grid-column: 2/3; } .vp-instance-toolbar .vp-toolbar-button { @@ -20,9 +21,15 @@ border-radius: 2px; } - .vp-instance-label { grid-column: 1/2; + font-weight: 700; + margin: 0px; +} + +.vp-instance-box { + grid-column-start: 1; + grid-column-end: 3; } .vp-instance-base > hr { @@ -31,9 +38,12 @@ grid-column: 1/3; } -.vp-ins-container { +.vp-ins-container.variable { + grid-column: 1/3; +} + +.vp-ins-container.allocate { grid-column: 1/3; - grid-row: 5; } /* udf editor - CodeMirror */ diff --git a/src/common/vpSubsetEditor.js b/src/common/vpSubsetEditor.js index 981b6912..3351d051 100644 --- a/src/common/vpSubsetEditor.js +++ b/src/common/vpSubsetEditor.js @@ -192,8 +192,8 @@ define([ // set button next to input tag var buttonTag = new sb.StringBuilder(); - buttonTag.appendFormat('' - , VP_DS_BTN, this.uuid, '...'); + buttonTag.appendFormat('' + , VP_DS_BTN, this.uuid, 'vp-button', 'Edit'); $(this.pageThis.wrapSelector('#' + this.targetId)).parent().append(buttonTag.toString()); // add popup div @@ -1144,7 +1144,9 @@ define([ var that = this; // open popup $(document).on('click', vpCommon.formatString('.{0}.{1}', VP_DS_BTN, this.uuid), function(event) { - that.open(); + if (!$(this).hasClass('disabled')) { + that.open(); + } }); // close popup @@ -1659,6 +1661,17 @@ define([ $(this.pageThis.wrapSelector('.' + VP_DS_BTN + '.' + this.uuid)).hide(); } + SubsetEditor.prototype.disableButton = function() { + var buttonEle = $(this.pageThis.wrapSelector('.' + VP_DS_BTN + '.' + this.uuid)); + if (!buttonEle.hasClass('disabled')) { + buttonEle.addClass('disabled'); + } + } + + SubsetEditor.prototype.enableButton = function() { + $(this.pageThis.wrapSelector('.' + VP_DS_BTN + '.' + this.uuid)).removeClass('disabled'); + } + SubsetEditor.prototype.showButton = function() { $(this.pageThis.wrapSelector('.' + VP_DS_BTN + '.' + this.uuid)).show(); } diff --git a/src/file_io/instance.html b/src/file_io/instance.html index 88238ee3..0a7f4acd 100644 --- a/src/file_io/instance.html +++ b/src/file_io/instance.html @@ -1,28 +1,26 @@
-
+
- - -
- +
+
- +
-
- + +
+
- -
+
diff --git a/src/file_io/instance.js b/src/file_io/instance.js index 44354e32..7491e4a3 100644 --- a/src/file_io/instance.js +++ b/src/file_io/instance.js @@ -201,8 +201,8 @@ define([ // vpSubsetEditor this.state.variable.subsetEditor = new vpSubsetEditor(this, "vp_instanceVariable", true); this.state.allocate.subsetEditor = new vpSubsetEditor(this, "vp_instanceAllocate", true); - this.state.variable.subsetEditor.hideButton(); - this.state.allocate.subsetEditor.hideButton(); + this.state.variable.subsetEditor.disableButton(); + this.state.allocate.subsetEditor.disableButton(); this.ALLOW_SUBSET_TYPES = that.pointer.subsetEditor.getAllowSubsetTypes(); @@ -213,7 +213,7 @@ define([ this.state.allocate.insEditor = new vpInstanceEditor(this, "vp_instanceAllocate", 'vp_allocateInsEditContainer'); that.state.variable.insEditor.show(); - that.state.allocate.insEditor.hide(); + that.state.allocate.insEditor.show(); // variable load that.reloadInsEditor(); @@ -241,19 +241,19 @@ define([ $(that.wrapSelector('.CodeMirror')).removeClass('selected'); if (insEditorType == 'variable') { // variable - that.state.variable.insEditor.show(); - that.state.allocate.insEditor.hide(); + // that.state.variable.insEditor.show(); + // that.state.allocate.insEditor.hide(); that.pointer = that.state.variable; $(that.wrapSelector('.variable .CodeMirror')).addClass('selected'); } else if (insEditorType == 'allocate'){ // allocate - that.state.variable.insEditor.hide(); - that.state.allocate.insEditor.show(); + // that.state.variable.insEditor.hide(); + // that.state.allocate.insEditor.show(); that.pointer = that.state.allocate; $(that.wrapSelector('.allocate .CodeMirror')).addClass('selected'); } else { - that.state.variable.insEditor.hide(); - that.state.allocate.insEditor.hide(); + // that.state.variable.insEditor.hide(); + // that.state.allocate.insEditor.hide(); } }); @@ -281,20 +281,20 @@ define([ if (insEditorType == 'variable') { // variable - that.state.variable.insEditor.show(); - that.state.allocate.insEditor.hide(); + // that.state.variable.insEditor.show(); + // that.state.allocate.insEditor.hide(); that.state.selectedBox = 'variable'; that.pointer = that.state.variable; } else if (insEditorType == 'allocate'){ // allocate - that.state.variable.insEditor.hide(); - that.state.allocate.insEditor.show(); + // that.state.variable.insEditor.hide(); + // that.state.allocate.insEditor.show(); that.state.selectedBox = 'allocate'; that.pointer = that.state.allocate; } else { that.state.selectedBox = ''; - that.state.variable.insEditor.hide(); - that.state.allocate.insEditor.hide(); + // that.state.variable.insEditor.hide(); + // that.state.allocate.insEditor.hide(); } }); @@ -388,9 +388,9 @@ define([ var varType = varObj.type; if (that.ALLOW_SUBSET_TYPES.includes(varType)) { - tempPointer.subsetEditor.showButton(); + tempPointer.subsetEditor.enableButton(); } else { - tempPointer.subsetEditor.hideButton(); + tempPointer.subsetEditor.disableButton(); } }; From 73a8795bb54ffdd0611add378d1d1e72d0dad380 Mon Sep 17 00:00:00 2001 From: minjk-bl Date: Fri, 14 May 2021 17:16:18 +0900 Subject: [PATCH 2/4] #12 - instance first page added, variable creation added --- css/common/instanceEditor.css | 34 +++- css/file_io/instance.css | 2 +- src/common/vpInstanceEditor.js | 334 +++++++++++++++++++++++---------- 3 files changed, 267 insertions(+), 103 deletions(-) diff --git a/css/common/instanceEditor.css b/css/common/instanceEditor.css index c603fa12..e8a5ff8f 100644 --- a/css/common/instanceEditor.css +++ b/css/common/instanceEditor.css @@ -18,6 +18,12 @@ #vp-wrapper .vp-ins-select-container input.vp-ins-search { width: 100%; } +#vp-wrapper .vp-ins-select-container .vp-ins-search-icon { + position: absolute; + color: #C4C4C4; + right: 7px; + top: 7px; +} .vp-ins-select-box { margin-top: 5px; border: 0.25px solid #C4C4C4; @@ -47,9 +53,14 @@ background: #b0b0b0; } .vp-ins-select-item { - margin-top: 3px; - margin-bottom: 3px; + padding-top: 3px; + padding-bottom: 3px; cursor: pointer; + border-bottom: 0.25px solid var(--light-gray-color); +} +.vp-ins-select-item.selected { + color : var(--hightlight-color); + background: var(--light-gray-color); } .vp-ins-select-item span { background: #e0e0e0; @@ -58,10 +69,10 @@ margin-right: 5px; } .vp-ins-select-item:hover { - color: #F37704; + background: var(--light-gray-color); } .vp-ins-select-item:hover span { - background: #F37704; + background: var(--hightlight-color); color: #FFFFFF; } .vp-ins-option-box.api { @@ -73,4 +84,19 @@ } .vp-ins-parameter { width: 100% !important; +} + +.vp-create-var-box { + position: relative; + margin-top: 5px; +} +#vp-wrapper .vp-ins-select-container .vp-create-var { + width: 100%; +} +#vp-wrapper .vp-ins-select-container .vp-create-var-btn { + position: absolute; + color: #C4C4C4; + right: 5px; + top: 5px; + cursor: pointer; } \ No newline at end of file diff --git a/css/file_io/instance.css b/css/file_io/instance.css index 67ce9fe9..b2cd4de0 100644 --- a/css/file_io/instance.css +++ b/css/file_io/instance.css @@ -49,7 +49,7 @@ /* udf editor - CodeMirror */ #vp-wrapper .vp-option-page .vp-instance-box .CodeMirror { display: inline-block; - width: calc(100% - 60px); + width: calc(100% - 55px); height: 30px; border: 1px solid silver; overflow: hidden; diff --git a/src/common/vpInstanceEditor.js b/src/common/vpInstanceEditor.js index 43e800e0..ed283352 100644 --- a/src/common/vpInstanceEditor.js +++ b/src/common/vpInstanceEditor.js @@ -24,6 +24,10 @@ define([ const VP_INS_PARAMETER_BOX = 'vp-ins-parameter-box'; const VP_INS_PARAMETER = 'vp-ins-parameter'; + const VP_CREATE_VAR_BOX = 'vp-create-var-box'; + const VP_CREATE_VAR = 'vp-create-var'; + const VP_CREATE_VAR_BTN = 'vp-create-var-btn'; + // function/method types var _METHOD_TYPES = ['function', 'method', 'type', 'builtin_function_or_method', 'PlotAccessor']; @@ -44,9 +48,20 @@ define([ this.state = { code: '', type: '', - list: [] + list: [], } + this.isFirstPage = false; + this.dataTypeInfo = [ + { label: 'DataFrame', type: 'DataFrame', assign: ' = pd.DataFrame()'}, + { label: 'Series', type: 'Series', assign: ' = pd.Series()' }, + { label: 'Dict', type: 'dict', assign: ' = {}' }, + { label: 'List', type: 'list', assign: ' = []' }, + { label: 'Integer', type: 'int', assign: ' = 0' }, + { label: 'Others', type: '' } + ] + this.dataTypeList = ['DataFrame', 'Series', 'dict', 'list', 'int']; + this.bindEvent(); this.init(); @@ -64,7 +79,6 @@ define([ // load css this.pageThis.loadCss(Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + "common/instanceEditor.css"); - this.renderThis(); this.reload(); } @@ -72,13 +86,68 @@ define([ return vpCommon.formatString('.{0} {1}', this.uuid, selector); } - InstanceEditor.prototype.renderThis = function(replace=true) { + InstanceEditor.prototype.renderFirstPage = function() { + var tag = new sb.StringBuilder(); + tag.appendFormatLine('
', VP_INS_BOX, this.uuid); // vp-select-base + + tag.appendFormatLine('
', VP_INS_SELECT_CONTAINER, 'datatype'); + tag.appendFormatLine('
Data Type
', VP_INS_SELECT_TITLE); + tag.appendFormatLine('', VP_INS_TYPE, 'datatype'); + tag.appendFormatLine('
', VP_INS_SELECT_BOX, 'datatype'); + tag.appendFormatLine('
    ', VP_INS_SELECT_LIST, 'datatype'); + this.dataTypeInfo.forEach((obj, idx) => { + tag.appendFormatLine('
  • {4}
    • ' + , VP_INS_SELECT_ITEM + (idx==0?' selected':''), obj.label, obj.type, obj.assign, obj.label); + }); + tag.appendLine('
'); + tag.appendLine('
'); // VP_INS_SELECT_BOX + tag.appendLine('
'); // VP_INS_SELECT_CONTAINER + + tag.appendFormatLine('
', VP_INS_SELECT_CONTAINER, 'variable'); + tag.appendFormatLine('
Variable
', VP_INS_SELECT_TITLE); + tag.appendFormatLine('', VP_INS_TYPE, 'variable'); + tag.appendFormatLine('
', VP_INS_SELECT_BOX, 'variable'); + tag.appendFormatLine('
    ', VP_INS_SELECT_LIST, 'variable'); + tag.appendLine('
'); + tag.appendLine('
'); // VP_INS_SELECT_BOX + + // create variable input + tag.appendFormatLine('
', VP_CREATE_VAR_BOX); + tag.appendFormatLine('', VP_CREATE_VAR); + tag.appendFormatLine('', 'fa fa-plus', VP_CREATE_VAR_BTN); + tag.appendLine('
'); + + tag.appendLine('
'); // VP_INS_SELECT_CONTAINER + + tag.appendLine('
'); // VP_INS_BOX END + + // TODO: if this.popup == true + + $(this.pageThis.wrapSelector('#' + this.containerId)).html(tag.toString()); + + return tag.toString(); + } + + InstanceEditor.prototype.renderVarList = function(varType, varList) { + var varListTag = new sb.StringBuilder(); + varList != undefined && varList.forEach(obj => { + if ((varType == '' && !this.dataTypeList.includes(obj.type)) + || obj.type == varType) { + varListTag.appendFormatLine('
  • {4}
    • ' + , VP_INS_SELECT_ITEM, obj.name, obj.type, obj.type, obj.name); + } + }); + $(this.wrapSelector('.' + VP_INS_SELECT_LIST + '.variable')).html(varListTag.toString()); + } + + InstanceEditor.prototype.renderPage = function(replace=true) { var tag = new sb.StringBuilder(); tag.appendFormatLine('
    ', VP_INS_BOX, this.uuid); // vp-select-base tag.appendFormatLine('
    ', VP_INS_SELECT_CONTAINER, 'attr'); tag.appendFormatLine('
    Attribute
    ', VP_INS_SELECT_TITLE); tag.appendFormatLine('', VP_INS_SEARCH, 'attr'); + tag.appendFormatLine('', 'fa fa-search', 'vp-ins-search-icon'); tag.appendFormatLine('', VP_INS_TYPE, 'attr'); tag.appendFormatLine('
    ', VP_INS_SELECT_BOX, 'attr'); tag.appendFormatLine('
      ', VP_INS_SELECT_LIST, 'attr'); @@ -90,6 +159,7 @@ define([ tag.appendFormatLine('
      Method
      ', VP_INS_SELECT_TITLE); tag.appendFormatLine('', VP_INS_SEARCH, 'method'); tag.appendFormatLine('', VP_INS_TYPE, 'method'); + tag.appendFormatLine('', 'fa fa-search', 'vp-ins-search-icon'); tag.appendFormatLine('
      ', VP_INS_SELECT_BOX, 'method'); tag.appendFormatLine('
        ', VP_INS_SELECT_LIST, 'method'); tag.appendLine('
      '); @@ -112,12 +182,64 @@ define([ InstanceEditor.prototype.bindEvent = function() { var that = this; + + // select datatype + $(document).on('click', this.wrapSelector('.' + VP_INS_SELECT_LIST + '.datatype .' + VP_INS_SELECT_ITEM), function(event) { + var varType = $(this).attr('data-var-type'); + $(that.wrapSelector('.' + VP_INS_SELECT_LIST + '.datatype .' + VP_INS_SELECT_ITEM)).removeClass('selected'); + $(this).addClass('selected'); + + // if others selected, cannot create variable + if (varType == '') { + $(that.wrapSelector('.' + VP_CREATE_VAR_BOX)).hide(); + } else { + $(that.wrapSelector('.' + VP_CREATE_VAR_BOX)).show(); + } + + that.reload(); + }); + + // select variable + $(document).on('click', this.wrapSelector('.' + VP_INS_SELECT_LIST + '.variable .' + VP_INS_SELECT_ITEM), function(event) { + var varName = $(this).attr('data-var-name'); + var varType = $(this).attr('data-var-type'); + + // console.log('clicked', varName, varType, that.state); + $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({ + type:"instance_editor_selected", + varName: varName, + varType: varType, + isMethod: false + }); + }); + + // create variable + $(document).on('click', this.wrapSelector('.' + VP_CREATE_VAR_BTN), function(event) { + var varName = $(that.wrapSelector('.' + VP_CREATE_VAR)).val(); + var selectedType = $(that.wrapSelector('.' + VP_INS_SELECT_LIST + '.datatype .' + VP_INS_SELECT_ITEM + '.selected')); + var varType = selectedType.attr('data-var-type'); + var assignCode = selectedType.attr('data-var-assign'); + + if (varName == '') { + ; // no variable name entered + } else { + var code = vpCommon.formatString('{0}{1}\n{2}', varName, assignCode, 'type(' + varName + ').__name__'); + kernelApi.executePython(code, function(result) { + if (result.includes(varType)) { + vpCommon.renderSuccessMessage('Variable Created!'); + that.reload(); + } + $(that.wrapSelector('.' + VP_CREATE_VAR)).val(''); + }); + } + }); + // select attribute $(document).on('click', this.wrapSelector('.' + VP_INS_SELECT_LIST + '.attr .' + VP_INS_SELECT_ITEM), function(event) { var varName = $(this).attr('data-var-name'); var varType = $(this).attr('data-var-type'); - console.log('clicked', varName, varType); + // console.log('clicked', varName, varType, that.state); $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({ type:"instance_editor_selected", varName: varName, @@ -130,7 +252,7 @@ define([ $(document).on('click', this.wrapSelector('.' + VP_INS_SELECT_LIST + '.method .' + VP_INS_SELECT_ITEM), function(event) { var varName = $(this).attr('data-var-name'); var varType = $(this).attr('data-var-type'); - console.log('clicked', varName, varType); + // console.log('clicked', varName, varType, that.state); $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({ type:"instance_editor_selected", varName: varName, @@ -166,6 +288,16 @@ define([ var that = this; var variable = $(this.pageThis.wrapSelector('#' + this.targetId)).val(); this.state.code = variable; + + if (variable == '') { + if (!this.isFirstPage) { + this.renderFirstPage(); + this.isFirstPage = true; + } + } else { + this.isFirstPage = false; + this.renderPage(); + } var code = vpCommon.formatString('_vp_print(_vp_load_instance("{0}"))', variable); @@ -190,107 +322,113 @@ define([ // $(that.wrapSelector('#vp_instanceType')).text(varType); // set dir list - var attrListTag = new sb.StringBuilder(); - var methodListTag = new sb.StringBuilder(); - var attrList = []; - var methodList = []; - varList != undefined && varList.forEach(obj => { - if (obj.type.includes('Indexer')) { - methodListTag.appendFormatLine('
    • {3}{4}
      • ' - , VP_INS_SELECT_ITEM, obj.name + '[]', obj.type, obj.type, obj.name); - methodList.push({ - label: obj.name + '[]' + ' (' + obj.type + ')', - value: obj.name + '[]', - type: obj.type - }); - } - // Method/Function... 이면 Method 항목에 표시 - else if (_METHOD_TYPES.includes(obj.type)) { - methodListTag.appendFormatLine('
    • {3}{4}
      • ' - , VP_INS_SELECT_ITEM, obj.name + '()', obj.type, obj.type, obj.name); - methodList.push({ - label: obj.name + '()' + ' (' + obj.type + ')', - value: obj.name + '()' , - type: obj.type + + if (that.isFirstPage) { + varType = $(that.wrapSelector('.' + VP_INS_SELECT_LIST + '.datatype .' + VP_INS_SELECT_ITEM + '.selected')).attr('data-var-type'); + that.renderVarList(varType, varList); + } else { + var attrListTag = new sb.StringBuilder(); + var methodListTag = new sb.StringBuilder(); + var attrList = []; + var methodList = []; + varList != undefined && varList.forEach(obj => { + if (obj.type.includes('Indexer')) { + methodListTag.appendFormatLine('
    • {4}
      • ' + , VP_INS_SELECT_ITEM, obj.name + '[]', obj.type, obj.type, obj.name); + methodList.push({ + label: obj.name + '[]' + ' (' + obj.type + ')', + value: obj.name + '[]', + type: obj.type + }); + } + // Method/Function... 이면 Method 항목에 표시 + else if (_METHOD_TYPES.includes(obj.type)) { + methodListTag.appendFormatLine('
    • {4}
      • ' + , VP_INS_SELECT_ITEM, obj.name + '()', obj.type, obj.type, obj.name); + methodList.push({ + label: obj.name + '()' + ' (' + obj.type + ')', + value: obj.name + '()' , + type: obj.type + }); + } else { + // FIXME: type이 module일 경우엔 pd(pandas) module만 표시 + // if (obj.type == 'module' && obj.name != 'pd') { + // ; + // } else { + attrListTag.appendFormatLine('
    • {4}
      • ' + , VP_INS_SELECT_ITEM, obj.name, obj.type, obj.type, obj.name); + attrList.push({ + label: obj.name + ' (' + obj.type + ')', + value: obj.name, + type: obj.type + }); + // } + } + }); + $(that.wrapSelector('.' + VP_INS_SELECT_LIST + '.attr')).html(attrListTag.toString()); + $(that.wrapSelector('.' + VP_INS_SELECT_LIST + '.method')).html(methodListTag.toString()); + + // attribute search suggest + var suggestInput = new vpSuggestInputText.vpSuggestInputText(); + suggestInput.addClass('vp-input attr'); + suggestInput.addClass(VP_INS_SEARCH); + suggestInput.setPlaceholder("search attribute"); + suggestInput.setSuggestList(function() { return attrList; }); + suggestInput.setSelectEvent(function(value, item) { + $(this.wrapSelector()).val(value); + $(that.wrapSelector('.' + VP_INS_TYPE + '.attr')).val(item.type); + + $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({ + type:"instance_editor_selected", + varName: value, + varType: item.type, + isMethod: false }); - } else { - // FIXME: type이 module일 경우엔 pd(pandas) module만 표시 - // if (obj.type == 'module' && obj.name != 'pd') { - // ; - // } else { - attrListTag.appendFormatLine('
    • {3}{4}
      • ' - , VP_INS_SELECT_ITEM, obj.name, obj.type, obj.type, obj.name); - attrList.push({ - label: obj.name + ' (' + obj.type + ')', - value: obj.name, - type: obj.type + }); + $(that.wrapSelector('.' + VP_INS_SEARCH + '.attr')).replaceWith(function() { + return suggestInput.toTagString(); + }); + + // method search suggest + suggestInput = new vpSuggestInputText.vpSuggestInputText(); + suggestInput.addClass('vp-input method'); + suggestInput.addClass(VP_INS_SEARCH); + suggestInput.setPlaceholder("search method"); + suggestInput.setSuggestList(function() { return methodList; }); + suggestInput.setSelectEvent(function(value, item) { + $(this.wrapSelector()).val(value); + $(that.wrapSelector('.' + VP_INS_TYPE + '.method')).val(item.type); + + $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({ + type:"instance_editor_selected", + varName: value, + varType: item.type, + isMethod: true }); - // } - } - }); - $(that.wrapSelector('.' + VP_INS_SELECT_LIST + '.attr')).html(attrListTag.toString()); - $(that.wrapSelector('.' + VP_INS_SELECT_LIST + '.method')).html(methodListTag.toString()); - - // attribute search suggest - var suggestInput = new vpSuggestInputText.vpSuggestInputText(); - suggestInput.addClass('vp-input attr'); - suggestInput.addClass(VP_INS_SEARCH); - suggestInput.setPlaceholder("search attribute"); - suggestInput.setSuggestList(function() { return attrList; }); - suggestInput.setSelectEvent(function(value, item) { - $(this.wrapSelector()).val(value); - $(that.wrapSelector('.' + VP_INS_TYPE + '.attr')).val(item.type); - - $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({ - type:"instance_editor_selected", - varName: value, - varType: item.type, - isMethod: false }); - }); - $(that.wrapSelector('.' + VP_INS_SEARCH + '.attr')).replaceWith(function() { - return suggestInput.toTagString(); - }); - - // method search suggest - suggestInput = new vpSuggestInputText.vpSuggestInputText(); - suggestInput.addClass('vp-input method'); - suggestInput.addClass(VP_INS_SEARCH); - suggestInput.setPlaceholder("search method"); - suggestInput.setSuggestList(function() { return methodList; }); - suggestInput.setSelectEvent(function(value, item) { - $(this.wrapSelector()).val(value); - $(that.wrapSelector('.' + VP_INS_TYPE + '.method')).val(item.type); - - $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({ - type:"instance_editor_selected", - varName: value, - varType: item.type, - isMethod: true + $(that.wrapSelector('.' + VP_INS_SEARCH + '.method')).replaceWith(function() { + return suggestInput.toTagString(); }); - }); - $(that.wrapSelector('.' + VP_INS_SEARCH + '.method')).replaceWith(function() { - return suggestInput.toTagString(); - }); - // get parameter - var splitList = variable.split('.'); - if (splitList && splitList.length > 0) { - var lastSplit = splitList[splitList.length - 1]; - // if bracket is at the end of code - var matchList = lastSplit.match(/\(.*?\)$/gi); - if (matchList != null && matchList.length > 0) { - var lastBracket = matchList[matchList.length - 1]; - // remove first/last brackets - var parameter = lastBracket.substr(1, lastBracket.length - 2); - $(that.wrapSelector('.' + VP_INS_PARAMETER)).val(parameter); - $(that.wrapSelector('.' + VP_INS_PARAMETER)).show(); + // get parameter + var splitList = variable.split('.'); + if (splitList && splitList.length > 0) { + var lastSplit = splitList[splitList.length - 1]; + // if bracket is at the end of code + var matchList = lastSplit.match(/\(.*?\)$/gi); + if (matchList != null && matchList.length > 0) { + var lastBracket = matchList[matchList.length - 1]; + // remove first/last brackets + var parameter = lastBracket.substr(1, lastBracket.length - 2); + $(that.wrapSelector('.' + VP_INS_PARAMETER)).val(parameter); + $(that.wrapSelector('.' + VP_INS_PARAMETER)).show(); + } else { + $(that.wrapSelector('.' + VP_INS_PARAMETER)).val(''); + $(that.wrapSelector('.' + VP_INS_PARAMETER)).hide(); + } } else { - $(that.wrapSelector('.' + VP_INS_PARAMETER)).val(''); $(that.wrapSelector('.' + VP_INS_PARAMETER)).hide(); } - } else { - $(that.wrapSelector('.' + VP_INS_PARAMETER)).hide(); } // callback From 67508fb9dde9cd953db3d9dbb19b02df0b692520 Mon Sep 17 00:00:00 2001 From: minjk-bl Date: Fri, 14 May 2021 17:20:11 +0900 Subject: [PATCH 3/4] #12 - instance search box icon changed --- css/common/instanceEditor.css | 4 ++-- src/common/vpInstanceEditor.js | 10 +++++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/css/common/instanceEditor.css b/css/common/instanceEditor.css index e8a5ff8f..d381a8fe 100644 --- a/css/common/instanceEditor.css +++ b/css/common/instanceEditor.css @@ -21,8 +21,8 @@ #vp-wrapper .vp-ins-select-container .vp-ins-search-icon { position: absolute; color: #C4C4C4; - right: 7px; - top: 7px; + right: 5px; + top: 5px; } .vp-ins-select-box { margin-top: 5px; diff --git a/src/common/vpInstanceEditor.js b/src/common/vpInstanceEditor.js index ed283352..56b805d6 100644 --- a/src/common/vpInstanceEditor.js +++ b/src/common/vpInstanceEditor.js @@ -146,9 +146,13 @@ define([ tag.appendFormatLine('
      ', VP_INS_SELECT_CONTAINER, 'attr'); tag.appendFormatLine('
      Attribute
      ', VP_INS_SELECT_TITLE); + + tag.appendFormatLine('
      ', 'position: relative;'); tag.appendFormatLine('', VP_INS_SEARCH, 'attr'); - tag.appendFormatLine('', 'fa fa-search', 'vp-ins-search-icon'); tag.appendFormatLine('', VP_INS_TYPE, 'attr'); + tag.appendFormatLine('', 'fa fa-search', 'vp-ins-search-icon'); + tag.appendLine('
      '); + tag.appendFormatLine('
      ', VP_INS_SELECT_BOX, 'attr'); tag.appendFormatLine('
        ', VP_INS_SELECT_LIST, 'attr'); tag.appendLine('
      '); @@ -157,9 +161,13 @@ define([ tag.appendFormatLine('
      ', VP_INS_SELECT_CONTAINER, 'method'); tag.appendFormatLine('
      Method
      ', VP_INS_SELECT_TITLE); + + tag.appendFormatLine('
      ', 'position: relative;'); tag.appendFormatLine('', VP_INS_SEARCH, 'method'); tag.appendFormatLine('', VP_INS_TYPE, 'method'); tag.appendFormatLine('', 'fa fa-search', 'vp-ins-search-icon'); + tag.appendLine('
      '); + tag.appendFormatLine('
      ', VP_INS_SELECT_BOX, 'method'); tag.appendFormatLine('
        ', VP_INS_SELECT_LIST, 'method'); tag.appendLine('
      '); From c5d6276498932075a0aec71a74d4fef15ee845cb Mon Sep 17 00:00:00 2001 From: minjk-bl Date: Fri, 14 May 2021 17:35:07 +0900 Subject: [PATCH 4/4] #12 - instance undo with backspace. This closed #12 --- src/common/vpInstanceEditor.js | 1 - src/file_io/instance.js | 19 +++++++++++++++---- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/common/vpInstanceEditor.js b/src/common/vpInstanceEditor.js index 56b805d6..43c13cf9 100644 --- a/src/common/vpInstanceEditor.js +++ b/src/common/vpInstanceEditor.js @@ -288,7 +288,6 @@ define([ }); } } - }); } diff --git a/src/file_io/instance.js b/src/file_io/instance.js index 7491e4a3..93865c4f 100644 --- a/src/file_io/instance.js +++ b/src/file_io/instance.js @@ -235,6 +235,18 @@ define([ that.reloadInsEditor(); }); + // backspace + $(document).on('keyup', this.wrapSelector('.CodeMirror'), function(event) { + var keycode = event.keyCode + ? event.keyCode + : event.which; + if (keycode == 8) { + // backspace + that.popStack(); + that.reloadInsEditor(); + } + }); + // subset button clicked $(document).on('click', this.wrapSelector('.vp-ds-button'), function(event) { var insEditorType = $(this).closest('.vp-instance-box').hasClass('variable')? 'variable': 'allocate'; @@ -369,11 +381,10 @@ define([ } VariablePackage.prototype.popStack = function(replace=true) { - if (this.pointer.stack.length <= 0) { - return ''; - } - var lastValue = this.pointer.stack.pop(); + if (!lastValue) { + lastValue = ''; + } if (replace) { this.updateValue('', lastValue); }