-
+
| Variable | Data Type |
|---|
| Column | +Method | |
|---|---|---|
|
-
+
+ |
+ + | @@ -39,7 +46,7 @@ @@ -263,11 +270,19 @@|
| X Limit | -+ | + + + + |
| Y Limit | -+ | + + + + |
| diff --git a/html/m_apps/file.html b/html/m_apps/file.html index 9b9e9098..3c607df2 100644 --- a/html/m_apps/file.html +++ b/html/m_apps/file.html @@ -14,7 +14,8 @@ |
Additional Options
Required Input & Output
Additional Options
-
+
Required Input & Output
-
+
-
+
Additional Options
-
+
diff --git a/html/m_library/numpyComponent.html b/html/m_library/numpyComponent.html
new file mode 100644
index 00000000..90d3cc62
--- /dev/null
+++ b/html/m_library/numpyComponent.html
@@ -0,0 +1,22 @@
+
+
+
+
(Latest version: {0} / Your version: {1})', + latestVersion, nowVersion); + // show version update icon + $('#vp_versionUpdater').attr('title', msg); + $('#vp_versionUpdater').data('version', latestVersion); + $('#vp_versionUpdater').show(); + if (background) { + ; + } else { + // render update modal (same as menu/MenuFrame.js:_bindEvent()-Click version updater) + com_util.renderModal({ + title: 'Update version', + message: msg, + buttons: ['Cancel', 'Update'], + defaultButtonIdx: 0, + buttonClass: ['cancel', 'activated'], + finish: function(clickedBtnIdx) { + switch (clickedBtnIdx) { + case 0: + // cancel + break; + case 1: + // update + let info = [ + '## Visual Python Upgrade', + 'NOTE: ', + '- Refresh your web browser to start a new version.', + '- Save VP Note before refreshing the page.' + ]; + com_interface.insertCell('markdown', info.join('\n')); + com_interface.insertCell('code', '!pip install visualpython --upgrade'); + com_interface.insertCell('code', '!visualpy install'); + + // update version_timestamp + that.setData({ 'version_timestamp': new Date().getTime() }, 'vpcfg'); + // hide updater + $('#vp_versionUpdater').hide(); + break; + } + } + }) + } + } + }).catch(function(err) { + if (background) { + vpLog.display(VP_LOG_TYPE.ERROR, 'Version Checker - ' + err); + } else { + com_util.renderAlertModal(err); + } + }) + } + } //======================================================================== @@ -288,6 +449,11 @@ define([], function() { // Config.serverMode = _MODE_TYPE.DEVELOP; Config.serverMode = _MODE_TYPE.RELEASE; + /** + * Version + */ + Config.version = "2.0.2"; + /** * Type of mode */ diff --git a/js/com/com_Const.js b/js/com/com_Const.js index 1adc6b4d..8ee5118b 100644 --- a/js/com/com_Const.js +++ b/js/com/com_Const.js @@ -19,7 +19,7 @@ define ([ class Constants { } Constants.TOOLBAR_BTN_INFO = { - HELP: "Visual Python 2.0.1" + HELP: "Visual Python 2.0.2" , ICON: "vp-main-icon" , ID: "vpBtnToggle" , NAME: "toggle-vp" diff --git a/js/com/com_XML.js b/js/com/com_XML.js deleted file mode 100644 index 0c25e781..00000000 --- a/js/com/com_XML.js +++ /dev/null @@ -1,484 +0,0 @@ -/* - * Project Name : Visual Python - * Description : GUI-based Python code generator - * File Name : com_XML.js - * Author : Black Logic - * Note : [CLASS] XML handler - * License : GPLv3 (GNU General Public License v3.0) - * Date : 2021. 08. 14 - * Change Date : - */ - -//============================================================================ -// [CLASS] XML handler -//============================================================================ -define([ -], function () { - 'use strict'; - - //======================================================================== - // [CLASS] com_XML - //======================================================================== - class com_XML { - - /** - * constructor - * @param {String} path xml path - */ - constructor(path) { - this.xmlPath = path; - this.loadedXML = undefined; - this.xmlSerialize = new XMLSerializer(); - } - - /** - * load xml - * @param {function} callback execute function at load finished - * @param {object} callbackParam parameter of execute function at load finished - */ - loadFile(callback, callbackParam) { - var that = this; - this.xmlRequest = new XMLHttpRequest(); - this.xmlRequest.open('GET', this.xmlPath); - this.xmlRequest.setRequestHeader('Content-Type', 'test/xml'); - this.xmlRequest.onreadystatechange = function () { - // readyState : 4 > 데이터 전부 받은 상태, status : 200 요청 성공 - if (that.xmlRequest.readyState === 4 && that.xmlRequest.status === 200) { - that.loadedXML = that.xmlRequest.responseXML; - that.xmlString = that.xmlSerialize.serializeToString(that.xmlRequest.responseXML); - callback(callbackParam); - } - }; - this.xmlRequest.send(); - } - - /** - * return serializeString - * @returns serializeString - */ - toString() { - return this.xmlString; - } - - /** - * return loaded xml data - * @returns xml data - */ - getXML() { - return this.loadedXML; - } - - /** - * xml data parse to json - * @returns json data - */ - getJson() { - return xmlToJson(this.loadedXML); - } - - /** - * xml data parse to array - * @returns array data - */ - getArray() { - return xmlToArray(this.xmlString); - } - - /** - * json data parse to xml - * @param {json or Array} json json string or Array to parse xml - */ - parseToXml(json) { - return jsonToXml(json); - } - - } // class - - //======================================================================== - // Internal call function - //======================================================================== - /** - * Parse to xml from json or Array - * @param {json or Array} obj json or Array data for parse - * @param {number} depth xml depth - */ - function OBJtoXML(obj, depth = 0) { - var xml = '', idx; - - for (var prop in obj) { - switch (typeof obj[prop]) { - case 'object': - if(obj[prop] instanceof Array) { - for (var instance in obj[prop]) { - xml += `\n\t<${prop}>\n${OBJtoXML(new Object(obj[prop][instance]))}\t`; - } - } else { - for (idx = 0; idx < depth; idx++) { - xml += `\t`; - } - xml += `<${prop}>\n${OBJtoXML(new Object(obj[prop]), depth + 1)}`; - - for (idx = 0; idx < depth; idx++) { - xml += `\t`; - } - xml += `\n`; - } - break; - - case 'number': - case 'string': - for (idx = 0; idx < depth; idx++) { - xml += `\t`; - } - xml += `<${prop}>${obj[prop]}\n`; - break; - } - - } - return xml; - } - - /** - * Parse to json from xml - * @param {xml} xml xml data for parse - * @returns json data - */ - var xmlToJson = function(xml) { - try { - var obj = {}; - - if (xml.children.length > 0) { - for (var i = 0; i < xml.children.length; i++) { - var item = xml.children.item(i); - var nodeName = item.nodeName; - - if (typeof (obj[nodeName]) == 'undefined') { - obj[nodeName] = xmlToJson(item); - - for (var j = 0; j < item.attributes.length; j++) { - if (typeof (obj[nodeName]) == 'string') { - var old = obj[nodeName]; - var tmp = {}; - tmp['@text'] = old; - obj[nodeName] = tmp; - } - obj[nodeName]['_' + item.attributes[j].nodeName] = item.attributes[j].nodeValue; - } - } else { - if (typeof (obj[nodeName].length) == 'undefined') { - var old = obj[nodeName]; - - obj[nodeName] = new Array(); - obj[nodeName][obj[nodeName].length] = old; - - } - obj[nodeName][obj[nodeName].length] = xmlToJson(item); - for (var j = 0; j < item.attributes.length; j++) { - obj[nodeName][obj[nodeName].length - 1]['_' + item.attributes[j].nodeName] = item.attributes[j].nodeValue; - } - } - } - } else { - obj = xml.textContent; - } - return obj; - } catch (err) { - console.log('[vp] Error occurred during parse xml to json.'); - console.warn(err.message); - } - }; - - /** - *} types
+ * @param {string} defaultValue
+ */
+ var vp_generateVarSelect = function(tag, types, defaultValue = '') {
+ // Include various index types for Index type
+ var INDEX_TYPES = ['RangeIndex', 'CategoricalIndex', 'MultiIndex', 'IntervalIndex', 'DatetimeIndex', 'TimedeltaIndex', 'PeriodIndex', 'Int64Index', 'UInt64Index', 'Float64Index'];
+ // Include various groupby types for Groupby type
+ var GROUPBY_TYPES = ['DataFrameGroupBy', 'SeriesGroupBy']
+ if (types.indexOf('Index') >= 0) {
+ types = types.concat(INDEX_TYPES);
+ }
+ if (types.indexOf('GroupBy') >= 0) {
+ types = types.concat(GROUPBY_TYPES);
+ }
+
+ vpKernel.getDataList(types).then(function(resultObj) {
+ let { result, type, msg } = resultObj;
+ var jsonVars = result.replace(/'/gi, `"`);
+ var varList = JSON.parse(jsonVars);
+
+ // option tags
+ varList.forEach(listVar => {
+ if (types.includes(listVar.varType) && listVar.varName[0] !== '_') {
+ var option = document.createElement('option');
+ $(option).attr({
+ 'value':listVar.varName,
+ 'text':listVar.varName,
+ 'data-type':listVar.varType
+ });
+ // cell metadata test : defaultValue as selected
+ if (listVar.varName == defaultValue) {
+ $(option).prop('selected', true);
+ }
+ option.append(document.createTextNode(listVar.varName));
+ $(tag).append(option);
+ }
+ });
+
+ // val-multi(select multiple) value list registration
+ var classname = $(tag).attr('class');
+ if (classname == 'var-multi') {
+ $(tag).val(defaultValue);
+ }
+
+ // trigger change
+ $(tag).trigger('change');
+ }).catch(err => {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'Error on generating var selector', err);
+ });
+ }
+
+ /**
+ * Get tag value
+ * @param {Object} pageThis
+ * @param {*} obj
+ * @returns {string} tag's value
+ */
+ var vp_getTagValue = function(pageThis, obj) {
+ var value = '';
+ switch (obj.component) {
+ case 'option_radio':
+ var input = $(pageThis.wrapSelector("input[name='"+obj.name+"']:checked")).val();
+ // same as default
+ if (input == obj.default) break;
+ value = input;
+ break;
+ case 'option_checkbox':
+ var checked = $(pageThis.wrapSelector("input[name='"+obj.name+"']:checked")).val();
+
+ for (var i = 0; i < checked.length; i++) {
+ value += "'" + $(checked[i]).val() + "',";
+ }
+ value = value.substr(0, value.length-1);
+ break;
+ case 'input_multi':
+ case 'input_number':
+ case 'option_suggest':
+ case 'bool_select':
+ case 'var_select':
+ case 'var_multi':
+ case 'col_select':
+ case 'dtype':
+ value = $(pageThis.wrapSelector('#'+obj.name)).val();
+ break;
+ case 'table':
+ case 'file':
+ case 'option_select':
+ default:
+ var input = $(pageThis.wrapSelector('#'+obj.name)).val();
+ // same as default
+ if (input == obj.default) break;
+ value = input;
+ }
+ return value;
+ }
+
+ /**
+ * Generate code
+ * @param {Object} pageThis
+ * @param {Object} package
+ * @param {string} etcOptions [optional] userOptionCode addition ex) ", test='TEST'"
+ * @returns {string} generated code / if error, null
+ */
+ var vp_codeGenerator = function(pageThis, package, state = {}, etcOptions = '') {
+ var code = package.code;
+
+ try {
+ package.options && package.options.forEach(function(v, i) {
+ var val = state[v.name];
+ if (val == undefined || val == '') {
+ val = vp_getTagValue(pageThis, v);
+ }
+ var id = '${' + v.name + '}';
+ if (val == undefined || val.trim() == ''){
+ if (v.required == true) {
+ // throw new Error("'" + v.label + "' is required.");
+ }
+ // if no value, replace it
+ code = code.split(id).join('');
+ } else {
+ // text quotation
+ if (v.type == 'text') {
+ val = "'"+val+"'";
+ }
+ // code completion
+ if (v.code != undefined) {
+ val = v.code.split(id).join(val);
+ }
+ // code completion 2
+ if (v.usePair == true) {
+ val = ', ' + v.name + '=' + val;
+ }
+ // code completion 3
+ if (v.component != undefined && v.componentCode != undefined) {
+ let autoSelector = state[v.name + '_type'];
+ let compIdx = v.component.indexOf(autoSelector);
+ if (compIdx < 0) {
+ compIdx = 0;
+ }
+ let compCode = v.componentCode[compIdx];
+ if (compCode != '') {
+ val = compCode.split(id).join(val);
+ }
+ }
+ code = code.split(id).join(val);
+ }
+ });
+
+ // additional userOptionCode
+ code = code.split('${etc}').join(etcOptions);
+
+ // () prevent code: (, ${v})
+ code = code.split('(, ').join('(');
+
+ // prevent code: no allocation variable ( = pd.DataFrame())
+ if (code.startsWith(' = ')) {
+ code = code.substr(3);
+ }
+
+ // show_result
+ if (_VP_SHOW_RESULT && package.output && package.output.length > 0) {
+ var outputVariable = vp_getTagValue(pageThis, package.output[0]);
+ if (outputVariable != '') {
+ code += '\n'+ outputVariable
+ }
+ }
+
+ } catch (e) {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'com_generator v2 code generation error ' + e.message);
+ return null;
+ }
+ return code;
+ }
+
+ /**
+ * Bind columns source function
+ * @param {string} selector thisWrapSelector
+ * @param {object} target
+ * @param {array} columnInputIdList
+ * Usage :
+ * $(document).on('change', this.wrapSelector('#dataframe_tag_id'), function() {
+ * pdGen.vp_bindColumnSource(that.wrapSelector(), this, ['column_input_id']);
+ * });
+ */
+ var vp_bindColumnSource = function(selector, target, columnInputIdList) {
+ var varName = '';
+ if ($(target).length > 0) {
+ varName = $(target).val();
+ }
+ if (varName === '') {
+ // reset with no source
+ columnInputIdList && columnInputIdList.forEach(columnInputId => {
+ var suggestInputX = new SuggestInput();
+ suggestInputX.setComponentID(columnInputId);
+ suggestInputX.addClass('vp-input vp-state');
+ suggestInputX.setNormalFilter(false);
+ suggestInputX.setValue($(selector + ' #' + columnInputId).val());
+ $(selector + ' #' + columnInputId).replaceWith(function() {
+ return suggestInputX.toTagString();
+ });
+ });
+ return ;
+ }
+ // get result and show on detail box
+ vpKernel.getColumnList(varName).then(function(resultObj) {
+ try {
+ let { result, type, msg } = resultObj;
+ var varResult = JSON.parse(result);
+
+ // columns using suggestInput
+ columnInputIdList && columnInputIdList.forEach(columnInputId => {
+ var suggestInputX = new SuggestInput();
+ suggestInputX.setComponentID(columnInputId);
+ suggestInputX.addClass('vp-input vp-state');
+ suggestInputX.setPlaceholder("column name");
+ suggestInputX.setSuggestList(function() { return varResult; }); //FIXME:
+ suggestInputX.setNormalFilter(false);
+ suggestInputX.setValue($(selector + ' #' + columnInputId).val());
+ $(selector + ' #' + columnInputId).replaceWith(function() {
+ return suggestInputX.toTagString();
+ });
+ });
+ } catch (e) {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'com_generator - bindColumnSource: not supported data type. ', e);
+ }
+ });
+ }
+
+ //========================================================================
+ // Render components
+ //========================================================================
+ var render1dLen = function(pageThis, obj, state) {
+ state = {
+ [obj.name]: '',
+ ...state
+ };
+ return $(`{4} ',
VP_INS_SELECT_ITEM, obj.name + '()', obj.type, obj.type, obj.name);
@@ -349,10 +349,6 @@ define([
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({
@@ -360,7 +356,6 @@ define([
value: obj.name,
type: obj.type
});
- // }
}
});
$(that.wrapSelector('.' + VP_INS_SELECT_LIST + '.attr')).html(attrListTag.toString());
diff --git a/js/com/component/LibraryComponent.js b/js/com/component/LibraryComponent.js
index 5c549d30..97b66247 100644
--- a/js/com/component/LibraryComponent.js
+++ b/js/com/component/LibraryComponent.js
@@ -15,14 +15,10 @@
define([
'text!vp_base/html/m_library/libraryComponent.html!strip',
'css!vp_base/css/m_library/libraryComponent.css',
- 'vp_base/js/com/com_util',
- 'vp_base/js/com/com_Const',
- 'vp_base/js/com/com_String',
- 'vp_base/js/com/com_interface',
'vp_base/js/com/component/PopupComponent',
'vp_base/js/com/com_generator',
'vp_base/data/m_library/pandasLibrary'
-], function(libHtml, libCss, com_util, com_Const, com_String, com_interface, PopupComponent, com_generator, pandasLibrary) {
+], function(libHtml, libCss, PopupComponent, com_generator, pandasLibrary) {
/**
* LibraryComponent
@@ -134,6 +130,11 @@ define([
// show interface
com_generator.vp_showInterfaceOnPage(this.wrapSelector(), this.package);
+
+ // hide optional page if no options
+ if ($.trim($(this.wrapSelector('#vp_optionBox table tbody')).html())=='') {
+ $(this.wrapSelector('.vp-option-box')).hide();
+ }
}
generateCode() {
diff --git a/js/com/component/Modal.js b/js/com/component/Modal.js
index 7873f069..b59b7e7a 100644
--- a/js/com/component/Modal.js
+++ b/js/com/component/Modal.js
@@ -29,8 +29,10 @@ define([
* - title : string / modal title
* - message : string / modal message
* - buttons : list / at least 1 button needed
- * - defaultButtonIdx : int
+ * [optional]
+ * - defaultButtonIdx : int (default: 1)
* - finish : callback function when modal button clicked (result:button idx 0~n)
+ * - buttonClass : list / same length as buttons, define classes for buttons
*/
constructor(state) {
super($('body'), state);
@@ -42,7 +44,10 @@ define([
message: '',
buttons: [],
defaultButtonIdx: 1,
- finish: null,
+ finish: function(modalIdx) {
+ /* Implementation needed */
+ },
+ buttonClass: [],
...this.state
}
/** Write codes executed before rendering */
@@ -72,7 +77,7 @@ define([
template() {
/** Implement generating template */
- let { title, message, buttons, defaultButtonIdx } = this.state;
+ let { title, message, buttons, defaultButtonIdx, buttonClass } = this.state;
var sbTagString = new com_String();
sbTagString.appendLine("
+
+
\ No newline at end of file
diff --git a/html/menuFrame.html b/html/menuFrame.html
index b6b357ea..01173bd8 100644
--- a/html/menuFrame.html
+++ b/html/menuFrame.html
@@ -19,13 +19,20 @@
+
+ Required Input & Output
+
+
+
+
+
+
+ Additional Options
+
+
+
+
+ -
-
- +
- + Restart visualpython + +
- + Check version + +
-
About Visual Python
- - +
-
VP Note
@@ -34,6 +41,10 @@
+
+
+
');
return sbBlockMenu.toString();
}
@@ -89,13 +125,37 @@ define([
left: left,
top: top
};
+
+ // handling menu box to show inside visible area
+ let docWidth = $(document).width();
+ let docHeight = $(document).height();
+ let menuWidth = $(this.wrapSelector()).outerWidth();
+ let menuHeight = $(this.wrapSelector()).outerHeight();
+ if (docWidth < left + menuWidth) {
+ // horizontally out of view
+ this.position.left -= menuWidth;
+ }
+ if (docHeight < top + menuHeight) {
+ // vertically out of view
+ this.position.top -= menuHeight;
+ }
$(this.wrapSelector()).css(this.position);
+ // show items
+ $(this.wrapSelector('.vp-block-menu-item')).show();
+ $(this.wrapSelector('.vp-extra-menu-line')).show();
$(this.wrapSelector()).show();
+
// filter menu depends on block
+ let noContentBlocks = ['lgCtrl_try', 'lgCtrl_else', 'lgCtrl_finally'];
if (this.block.isSubBlock) {
// no duplicate
$(this.wrapSelector('#vp_block_menu_duplicate')).hide();
+ }
+ if (noContentBlocks.includes(this.block.id)) {
+ // no edit mode
+ $(this.wrapSelector('#vp_block_menu_edit')).hide();
+ $(this.wrapSelector('#vp_block_menu_line_1')).hide();
}
}
diff --git a/js/board/BoardFrame.js b/js/board/BoardFrame.js
index bab5e8ff..ac9c3420 100644
--- a/js/board/BoardFrame.js
+++ b/js/board/BoardFrame.js
@@ -22,8 +22,10 @@ define([
'../com/component/Component',
'../com/component/FileNavigation',
'./Block',
- './BlockMenu'
-], function(boardFrameHtml, boardFrameCss, com_Config, com_String, com_util, com_interface, Component, FileNavigation, Block, BlockMenu) {
+ './BlockMenu',
+ './CodeView'
+], function(boardFrameHtml, boardFrameCss, com_Config, com_String, com_util, com_interface,
+ Component, FileNavigation, Block, BlockMenu, CodeView) {
'use strict';
//========================================================================
// Define Variable
@@ -102,15 +104,15 @@ define([
case 'run-all':
that.runAll();
break;
- case 'view-depth':
- that.viewDepthInfo();
+ case 'code-view':
+ that.viewCode();
+ break;
+ case 'code-export':
+ that.exportCode();
break;
case 'clear':
that.clearBoard();
break;
- case 'close':
- that.closeBoard();
- break;
}
});
// footer +code, +text button
@@ -525,21 +527,27 @@ define([
});
fileNavi.open();
}
- runBlock(block, execute=true) {
+ runBlock(block, execute=true, addcell=true) {
if (block.id == 'apps_markdown') {
// if markdown, run single
- block.popup.run();
- return;
+ return block.popup.run(execute, addcell);
}
+ let rootBlockDepth = block.depth;
let groupedBlocks = block.getGroupedBlocks();
let code = new com_String();
let indentCount = this.state.indentCount;
groupedBlocks.forEach((groupBlock, idx) => {
let prevNewLine = idx > 0?'\n':'';
- let indent = ' '.repeat(groupBlock.depth * indentCount);
- code.appendFormat('{0}{1}{2}', prevNewLine, indent, groupBlock.popup.generateCode());
+ let indent = ' '.repeat((groupBlock.depth - rootBlockDepth) * indentCount);
+ let thisBlockCode = groupBlock.popup.generateCode();
+ // set indent to every line of thisblockcode
+ thisBlockCode = thisBlockCode.replaceAll('\n', '\n' + indent);
+ code.appendFormat('{0}{1}{2}', prevNewLine, indent, thisBlockCode);
});
- com_interface.insertCell('code', code.toString(), execute, block.blockNumber);
+ if (addcell) {
+ com_interface.insertCell('code', code.toString(), execute, block.blockNumber);
+ }
+ return code.toString();
}
runAll() {
let that = this;
@@ -549,18 +557,72 @@ define([
}
})
}
- viewDepthInfo() {
- this.state.viewDepthNumber = !this.state.viewDepthNumber;
-
- if (this.state.viewDepthNumber) {
- $(this.wrapSelector('.vp-board-header-button-inner li[data-menu="view-depth"]')).text('Hide Depth Number');
- } else {
- $(this.wrapSelector('.vp-board-header-button-inner li[data-menu="view-depth"]')).text('View Depth Number');
- }
+ getOverallCode() {
+ let overallCode = new com_String();
+ let that = this;
+ this.blockList.forEach((block) => {
+ if (block.isGroup) {
+ if (overallCode.toString() != '') {
+ overallCode.appendLine();
+ overallCode.appendLine();
+ }
+ let groupCode = that.runBlock(block, false, false);
+ if (block.id == 'apps_markdown') {
+ // if markdown, add #
+ groupCode = '#' + groupCode.replaceAll('\n', '\n# ');
+ }
+ overallCode.appendFormatLine('# VisualPython [{0}]{1}', block.blockNumber,
+ block.id == 'apps_markdown'? ' - Markdown':'');
+ overallCode.append(groupCode);
+ }
+ });
+ return overallCode.toString();
+ }
+ viewCode() {
+ let overallCode = this.getOverallCode();
+ let codeview = new CodeView({
+ codeview: overallCode,
+ config: {
+ id: 'boardCodeview',
+ name: 'Overall Codeview',
+ path: ''
+ }
+ });
+ codeview.open();
+ }
+ exportCode() {
+ let that = this;
+ // save .py file
+ let fileNavi = new FileNavigation({
+ type: 'save',
+ fileName: this.tmpState.boardTitle,
+ extensions: ['py'],
+ finish: function(filesPath, status, error) {
+ let fileName = filesPath[0].file;
+ let filePath = filesPath[0].path;
- // reloadBlockList
- this.reloadBlockList();
+ // save py file
+ let overallCode = that.getOverallCode();
+ vpKernel.saveFile(fileName, filePath, overallCode);
+ }
+ });
+ fileNavi.open();
}
+ /**
+ * Deprecated on v2.0.2.
+ */
+ // viewDepthInfo() {
+ // this.state.viewDepthNumber = !this.state.viewDepthNumber;
+
+ // if (this.state.viewDepthNumber) {
+ // $(this.wrapSelector('.vp-board-header-button-inner li[data-menu="view-depth"]')).text('Hide Depth Number');
+ // } else {
+ // $(this.wrapSelector('.vp-board-header-button-inner li[data-menu="view-depth"]')).text('View Depth Number');
+ // }
+
+ // // reloadBlockList
+ // this.reloadBlockList();
+ // }
clearBoard() {
// TODO: alert before clearing
let that = this;
@@ -573,9 +635,12 @@ define([
// render block list
this.reloadBlockList();
}
- closeBoard() {
- this.createNewNote();
- }
+ /**
+ * Deprecated on v2.0.2.
+ */
+ // closeBoard() {
+ // this.createNewNote();
+ // }
//========================================================================
// Block control
//========================================================================
@@ -768,6 +833,10 @@ define([
if (elseBlock.length > 0) {
this.removeBlock(elseBlock[0]);
}
+ // focus it
+ setTimeout(function() {
+ block.focusItem();
+ }, 100);
}
}
@@ -800,6 +869,10 @@ define([
if (finallyBlock) {
this.removeBlock(finallyBlock);
}
+ // focus it
+ setTimeout(function() {
+ block.focusItem();
+ }, 100);
}
}
diff --git a/js/board/CodeView.js b/js/board/CodeView.js
new file mode 100644
index 00000000..8ba2b33d
--- /dev/null
+++ b/js/board/CodeView.js
@@ -0,0 +1,46 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : CodeView.js
+ * Author : Black Logic
+ * Note : Render Code view
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 09. 13
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] CodeView
+//============================================================================
+define([
+ '../com/component/PopupComponent'
+], function(PopupComponent) {
+ 'use strict';
+
+ /**
+ * @class CodeView
+ * @constructor
+ */
+ class CodeView extends PopupComponent {
+ _init() {
+ super._init();
+
+ this.config.footer = false;
+ this.config.sizeLevel = 1;
+
+ this.state = {
+ codeview: '',
+ ...this.state
+ }
+
+ this._addCodemirror('codeview', this.wrapSelector('#codeview'), "readonly");
+ }
+
+ templateForBody() {
+ return ``;
+ }
+ }
+
+ return CodeView;
+
+});
\ No newline at end of file
diff --git a/js/com/com_Config.js b/js/com/com_Config.js
index af94bf6f..198ba05c 100644
--- a/js/com/com_Config.js
+++ b/js/com/com_Config.js
@@ -11,7 +11,11 @@
//============================================================================
// [CLASS] Configuration
//============================================================================
-define([], function() {
+define([
+ './com_Const',
+ './com_util',
+ './com_interface'
+], function(com_Const, com_util, com_interface) {
'use strict';
//========================================================================
// Define Inner Variable
@@ -127,7 +131,7 @@ define([], function() {
vp_config_version: '1.0.0',
vp_signature: 'VisualPython',
vp_position: {},
- vp_section_display: true,
+ vp_section_display: false,
vp_note_display: true,
vp_menu_width: Config.MENU_MIN_WIDTH,
vp_note_width: Config.BOARD_MIN_WIDTH
@@ -146,6 +150,43 @@ define([], function() {
$.extend(true, this.defaultConfig, this.metadataSettings);
}
+ /**
+ * Read kernel functions for using visualpython
+ * - manually click restart menu (MenuFrame.js)
+ * - automatically restart on jupyter kernel restart (loadVisualpython.js)
+ */
+ readKernelFunction() {
+ var libraryList = [
+ 'printCommand.py',
+ 'fileNaviCommand.py',
+ 'pandasCommand.py',
+ 'variableCommand.py'
+ ];
+ let promiseList = [];
+ libraryList.forEach(libName => {
+ var libPath = com_Const.PYTHON_PATH + libName
+ $.get(libPath).done(function(data) {
+ var code_init = data;
+ promiseList.push(vpKernel.execute(code_init));
+ }).fail(function() {
+ console.log('visualpython - failed to read library file', libName);
+ });
+ });
+ // run all promises
+ let failed = false;
+ Promise.all(promiseList).then(function(resultObj) {
+ }).catch(function(resultObj) {
+ failed = true;
+ console.log('visualpython - failed to load library', resultObj);
+ }).finally(function() {
+ if (!failed) {
+ console.log('visualpython - loaded libraries', libraryList);
+ } else {
+ console.log('visualpython - failed to load libraries');
+ }
+ });
+ }
+
getMode() {
return Config.serverMode;
}
@@ -175,7 +216,7 @@ define([], function() {
Jupyter.notebook.config.loaded.then(function() {
var data = Jupyter.notebook.config.data[configKey];
if (data == undefined) {
- reject('No data available.');
+ resolve(data);
return;
}
if (dataKey == '') {
@@ -277,6 +318,126 @@ define([], function() {
Jupyter.notebook.metadata[configKey] = {};
}
+ /**
+ * Check vp pypi package version (Promise)
+ * usage:
+ * vpConfig.getPackageVersion('visualpython').then(function(version) {
+ * // do something after loading version
+ * ...
+ * }).catch(function(err) {
+ * // error handling
+ * ...
+ * })
+ */
+ getPackageVersion(packName='visualpython') {
+ let url = `https://pypi.org/pypi/${packName}/json`;
+ // using the Fetch API
+ return new Promise(function(resolve, reject) {
+ try {
+ fetch(url).then(function (response) {
+ // if (response.statusCode === 200) {
+ // return response.json();
+ // } else if (response.statusCode === 204) {
+ // throw new Error('No Contents', response);
+ // } else if (response.statusCode === 404) {
+ // throw new Error('Page Not Found', response);
+ // } else if (response.statusCode === 500) {
+ // throw new Error('Internal Server Error', response);
+ // } else {
+ // throw new Error('Unexpected Http Status Code', response);
+ // }
+ if (response.ok) {
+ return response.json();
+ } else {
+ throw new Error('Error', response);
+ }
+ }).then(function (data) {
+ resolve(data.info.version);
+ }).catch(function(err) {
+ let errMsg = err.message;
+ if (errMsg.includes('Failed to fetch')) {
+ errMsg = 'Network connection error';
+ }
+ reject(errMsg);
+ });
+ } catch (err) {
+ reject(err);
+ }
+ });
+ }
+
+ getVpInstalledVersion() {
+ return Config.version;
+ }
+
+ checkVpVersion(background=false) {
+ let that = this;
+ let nowVersion = this.getVpInstalledVersion();
+ this.getPackageVersion().then(function(latestVersion) {
+ if (nowVersion === latestVersion) {
+ // if it's already up to date
+ if (background) {
+ // hide version update icon
+ $('#vp_versionUpdater').hide();
+ } else {
+ let msg = com_util.formatString('Visualpython is up to date. ({0})', latestVersion);
+ com_util.renderInfoModal(msg);
+ }
+ // update version_timestamp
+ that.setData({ 'version_timestamp': new Date().getTime() }, 'vpcfg');
+ } else {
+ let msg = com_util.formatString('Visualpython updates are available.(Latest version: {0} / Your version: {1})', + latestVersion, nowVersion); + // show version update icon + $('#vp_versionUpdater').attr('title', msg); + $('#vp_versionUpdater').data('version', latestVersion); + $('#vp_versionUpdater').show(); + if (background) { + ; + } else { + // render update modal (same as menu/MenuFrame.js:_bindEvent()-Click version updater) + com_util.renderModal({ + title: 'Update version', + message: msg, + buttons: ['Cancel', 'Update'], + defaultButtonIdx: 0, + buttonClass: ['cancel', 'activated'], + finish: function(clickedBtnIdx) { + switch (clickedBtnIdx) { + case 0: + // cancel + break; + case 1: + // update + let info = [ + '## Visual Python Upgrade', + 'NOTE: ', + '- Refresh your web browser to start a new version.', + '- Save VP Note before refreshing the page.' + ]; + com_interface.insertCell('markdown', info.join('\n')); + com_interface.insertCell('code', '!pip install visualpython --upgrade'); + com_interface.insertCell('code', '!visualpy install'); + + // update version_timestamp + that.setData({ 'version_timestamp': new Date().getTime() }, 'vpcfg'); + // hide updater + $('#vp_versionUpdater').hide(); + break; + } + } + }) + } + } + }).catch(function(err) { + if (background) { + vpLog.display(VP_LOG_TYPE.ERROR, 'Version Checker - ' + err); + } else { + com_util.renderAlertModal(err); + } + }) + } + } //======================================================================== @@ -288,6 +449,11 @@ define([], function() { // Config.serverMode = _MODE_TYPE.DEVELOP; Config.serverMode = _MODE_TYPE.RELEASE; + /** + * Version + */ + Config.version = "2.0.2"; + /** * Type of mode */ diff --git a/js/com/com_Const.js b/js/com/com_Const.js index 1adc6b4d..8ee5118b 100644 --- a/js/com/com_Const.js +++ b/js/com/com_Const.js @@ -19,7 +19,7 @@ define ([ class Constants { } Constants.TOOLBAR_BTN_INFO = { - HELP: "Visual Python 2.0.1" + HELP: "Visual Python 2.0.2" , ICON: "vp-main-icon" , ID: "vpBtnToggle" , NAME: "toggle-vp" diff --git a/js/com/com_XML.js b/js/com/com_XML.js deleted file mode 100644 index 0c25e781..00000000 --- a/js/com/com_XML.js +++ /dev/null @@ -1,484 +0,0 @@ -/* - * Project Name : Visual Python - * Description : GUI-based Python code generator - * File Name : com_XML.js - * Author : Black Logic - * Note : [CLASS] XML handler - * License : GPLv3 (GNU General Public License v3.0) - * Date : 2021. 08. 14 - * Change Date : - */ - -//============================================================================ -// [CLASS] XML handler -//============================================================================ -define([ -], function () { - 'use strict'; - - //======================================================================== - // [CLASS] com_XML - //======================================================================== - class com_XML { - - /** - * constructor - * @param {String} path xml path - */ - constructor(path) { - this.xmlPath = path; - this.loadedXML = undefined; - this.xmlSerialize = new XMLSerializer(); - } - - /** - * load xml - * @param {function} callback execute function at load finished - * @param {object} callbackParam parameter of execute function at load finished - */ - loadFile(callback, callbackParam) { - var that = this; - this.xmlRequest = new XMLHttpRequest(); - this.xmlRequest.open('GET', this.xmlPath); - this.xmlRequest.setRequestHeader('Content-Type', 'test/xml'); - this.xmlRequest.onreadystatechange = function () { - // readyState : 4 > 데이터 전부 받은 상태, status : 200 요청 성공 - if (that.xmlRequest.readyState === 4 && that.xmlRequest.status === 200) { - that.loadedXML = that.xmlRequest.responseXML; - that.xmlString = that.xmlSerialize.serializeToString(that.xmlRequest.responseXML); - callback(callbackParam); - } - }; - this.xmlRequest.send(); - } - - /** - * return serializeString - * @returns serializeString - */ - toString() { - return this.xmlString; - } - - /** - * return loaded xml data - * @returns xml data - */ - getXML() { - return this.loadedXML; - } - - /** - * xml data parse to json - * @returns json data - */ - getJson() { - return xmlToJson(this.loadedXML); - } - - /** - * xml data parse to array - * @returns array data - */ - getArray() { - return xmlToArray(this.xmlString); - } - - /** - * json data parse to xml - * @param {json or Array} json json string or Array to parse xml - */ - parseToXml(json) { - return jsonToXml(json); - } - - } // class - - //======================================================================== - // Internal call function - //======================================================================== - /** - * Parse to xml from json or Array - * @param {json or Array} obj json or Array data for parse - * @param {number} depth xml depth - */ - function OBJtoXML(obj, depth = 0) { - var xml = '', idx; - - for (var prop in obj) { - switch (typeof obj[prop]) { - case 'object': - if(obj[prop] instanceof Array) { - for (var instance in obj[prop]) { - xml += `\n\t<${prop}>\n${OBJtoXML(new Object(obj[prop][instance]))}\t`; - } - } else { - for (idx = 0; idx < depth; idx++) { - xml += `\t`; - } - xml += `<${prop}>\n${OBJtoXML(new Object(obj[prop]), depth + 1)}`; - - for (idx = 0; idx < depth; idx++) { - xml += `\t`; - } - xml += `\n`; - } - break; - - case 'number': - case 'string': - for (idx = 0; idx < depth; idx++) { - xml += `\t`; - } - xml += `<${prop}>${obj[prop]}\n`; - break; - } - - } - return xml; - } - - /** - * Parse to json from xml - * @param {xml} xml xml data for parse - * @returns json data - */ - var xmlToJson = function(xml) { - try { - var obj = {}; - - if (xml.children.length > 0) { - for (var i = 0; i < xml.children.length; i++) { - var item = xml.children.item(i); - var nodeName = item.nodeName; - - if (typeof (obj[nodeName]) == 'undefined') { - obj[nodeName] = xmlToJson(item); - - for (var j = 0; j < item.attributes.length; j++) { - if (typeof (obj[nodeName]) == 'string') { - var old = obj[nodeName]; - var tmp = {}; - tmp['@text'] = old; - obj[nodeName] = tmp; - } - obj[nodeName]['_' + item.attributes[j].nodeName] = item.attributes[j].nodeValue; - } - } else { - if (typeof (obj[nodeName].length) == 'undefined') { - var old = obj[nodeName]; - - obj[nodeName] = new Array(); - obj[nodeName][obj[nodeName].length] = old; - - } - obj[nodeName][obj[nodeName].length] = xmlToJson(item); - for (var j = 0; j < item.attributes.length; j++) { - obj[nodeName][obj[nodeName].length - 1]['_' + item.attributes[j].nodeName] = item.attributes[j].nodeValue; - } - } - } - } else { - obj = xml.textContent; - } - return obj; - } catch (err) { - console.log('[vp] Error occurred during parse xml to json.'); - console.warn(err.message); - } - }; - - /** - *
visualpython
에 text인 'visualpython' 정보 를 만드는 함수
- */
- var makeTextNode = (text, target, prev, identityNumber) => {
- if (text.trim().length !== 0) {
- target.push({type:'TEXT',
- text,
- prev,
- identityNumber});
- }
- return '';
- };
-
- /**
- * 에서 value인 id="value" 정보를 만드는 함수
- */
- var makeAttributeNode = (value, target, prev, identityNumber) => {
- target.push({type:'ATTRIBUTE',
- key: value[0],
- value: value[1],
- prev,
- identityNumber});
- }
-
- /**
- * 에서 태그 이름인 main에 대한 정보를 만드는 함수
- */
- var makeElementNode = (input, cursor, text, stack, stacks) => {
- var char = input[cursor++];
- var isBreak = false;
- if(char === '<'){
-
- text = makeTextNode(text, stack.tag.children, stack.tag, cursor);
- if(input[cursor++] !== '/'){
- var name = input.substring(cursor - 1, cursor = input.indexOf('>', cursor));
-
- var isClose = input[cursor - 1] === '/';
- if(isClose) {
- name = name.substr(0, name.length - 1);
- }
-
- var tag = {
- name,
- type:'NODE',
- children: [],
- identityNumber: cursor
- };
-
- if(name.includes(`="`) === true){
- var valueLength = name.split(' ').length;
- tag.name = name.split(' ')[0];
- while(valueLength-- > 1){
- var splitedValue = name.split(' ')[valueLength].replace(/"/gi,``).split('=');
- makeAttributeNode(splitedValue, tag.children, tag, cursor);
- }
- }
- cursor++;
- tag.prev = stack.tag;
- stack.tag.children.push(tag);
- if(!isClose){
- stacks.push({tag, back:stack});
- isBreak = true;
- }
- } else if(stack.tag.name == input.substring(cursor, input.indexOf('>', cursor))){
- for(var i = 0; i <= stack.tag.name.length; i++){
- cursor += 1;
- }
- text = '';
- stack = stack.back;
- }
- }
- else {
- text += char
- };
- return {cursor, text, isBreak, stack};
- };
-
- /**
- * json을 받아서 자바스크립트 xml로 바꾸는 함수
- */
- var xmlToJson2 = input => {
- var result = { tag: {
- type:'ROOT',
- children:[]
- }
- };
- var stacks = [];
- var cursor = 0;
- var stack = result;
- var isBreak = false;
- do {
- var text = '';
- while(cursor < input.length){
- var element = makeElementNode(input, cursor, text, stack, stacks);
- ({cursor, text, isBreak, stack} = element);
- if(isBreak) {
- break;
- }
- }
- } while(stack = stacks.pop());
-
- return result.tag.children[0];
- };
-
- /**
- * XML string을 받아서 자바스크립트 Array로 바꾸는 함수
- * 위의 구현한 xmlToJson을 이용
- */
- var xmlToArray = function(xmlstring) {
- var json = xmlToJson2(xmlstring);
- var dataArray = [];
- var stacks = [];
- stacks.push(json);
-
- // identityNumber 값으로 특정 위치의 JSON값을 불러오는 함수
- var findNode = (identityNumber) => {
- var findedNode = dataArray.find(element => {
- if(element.identityNumber === identityNumber){
- return element;
- }
- });
- return findedNode;
- }
-
- var context;
- while(context = stacks.shift()){
- if(Array.isArray(context.children)){
- context.children.forEach((childrenElement,index) => {
- console.log('childrenElement',childrenElement);
- if(childrenElement.type === 'NODE'){
- var isHaveTEXTorVALUE = childrenElement.children.some(element => {
- if(element.type === 'TEXT' || element.type === 'ATTRIBUTE'){
- return true;
- } else {
- return false;
- }
- });
- // 자식(children) 중에 TEXT type이나 ATTRIBUTE type 데이터가 있을 경우
- if(isHaveTEXTorVALUE === true){
- stacks.push(childrenElement);
- // 자식(children) 중에 TEXT type이나 ATTRIBUTE type 데이터가 없을 경우
- } else {
- dataArray.push({
- name: childrenElement.name,
- identityNumber: childrenElement.identityNumber,
- prevname: childrenElement.prev.name
- });
- stacks.push(childrenElement);
- }
- } else if(childrenElement.type === 'TEXT'){
- dataArray.push({
- name: childrenElement.prev.name,
- text: childrenElement.text,
- identityNumber: childrenElement.identityNumber,
- prevname: childrenElement.prev.prev.name
- });
- } else {
- var findedNode = findNode(childrenElement.identityNumber);
-
- if(findedNode && findedNode.attributes){
- findedNode.attributes.push({
- key: childrenElement.key,
- value: childrenElement.value
- });
- } else {
- dataArray.push({
- name: childrenElement.prev.name,
- attributes: [
- {
- key: childrenElement.key,
- value: childrenElement.value
- }
- ],
- identityNumber: childrenElement.identityNumber,
- prevname: childrenElement.prev.prev.name
- });
- stacks.push(childrenElement);
- }
- }
- });
- }
- }
- return dataArray.map(element=> {
- delete element.identityNumber;
- return element;
- });
- }
-
- /**
- * json을 받아서 자바스크립트 xml로 바꾸는 함수
- */
- var jsonToXml = json => {
-
- var stack = [];
- var domarr = [];
-
- var context;
- var rootDom;
- var currentDom;
- stack.push(json);
-
- var makeDom = (tagSelector) => {
- return document.createElement(tagSelector);
- }
- var pushDom = function(dom, context) {
- domarr.push({
- dom,
- name: context.name,
- identityNumber: context.identityNumber
- });
- };
-
- var findDom = function(context) {
- var returndom;
- domarr.some(element => {
- if(element.name === context.prev.name
- && element.identityNumber === context.prev.identityNumber){
- returndom = element.dom;
- return true;
- } else {
- return false;
- }
- });
-
- return returndom;
- };
-
- var pushAndFindDom = function(context) {
- var tempDom = makeDom(`${context.name}`);
- pushDom(tempDom, context);
- var retdom;
- if(findDom(context)){
- retdom = findDom(context).appendChild(tempDom);
- } else {
- retdom = currentDom.appendChild(tempDom);
- }
- return retdom;
- }
-
- var deleteGarbageDom = function(domArr){
- domArr = null;
- }
-
- while(context = stack.shift()){
- if(context.children){
- if(context.children.length !== 0){
- var isTypeNode = context.children.every(element => {
- if(element.type === 'TEXT' || element.type === 'ATTRIBUTE'){
- return true;
- } else {
- return false;
- }
- });
- stack.push(context.children);
-
- if(isTypeNode === true){
- currentDom = pushAndFindDom(context);
- continue;
- }
- } else if(context.children.length === 0){
- currentDom = findDom(context);
- continue;
- }
- } else if(Array.isArray(context)) {
- context.forEach(element => {
- stack.push(element);
- });
- } else {
- if(context.type === 'TEXT'){
- findDom(context).innerHTML = context.text;
- } else { // context.type === 'ATTRIBUTE'
- findDom(context).setAttribute(context.key, context.value || ' ');
- }
- continue;
- }
-
- if(currentDom){
- if(context.name !== undefined){
- currentDom = pushAndFindDom(context);
- }
- } else {
- rootDom = currentDom = makeDom(`${context.name}`);
- pushDom(currentDom, context);
- }
- }
- deleteGarbageDom(domarr);
- return rootDom;
- }
-
- return com_XML; // class
-
-}); /* function, define */
-
-/* End of file */
diff --git a/js/com/com_generator.js b/js/com/com_generator.js
index 51d849ad..c3ec004c 100644
--- a/js/com/com_generator.js
+++ b/js/com/com_generator.js
@@ -24,26 +24,60 @@ define([
*/
var vp_showInterfaceOnPage = function(selector, package) {
+ let autoCols = {};
+
// generate input variable tag
- var tblInput = $(selector+' #vp_inputOutputBox table');
+ var tblInput = $(selector+' #vp_inputOutputBox table tbody');
package.input && package.input.forEach(function(o, i) {
var obj = JSON.parse(JSON.stringify(o));
tblInput.append(vp_createTag(selector, obj, true, (obj.required == false? false: true)));
+ if (obj.component === 'col_select') {
+ if (autoCols[obj.target] != undefined) {
+ autoCols[obj.target].push(obj.name);
+ } else {
+ autoCols[obj.target] = [ obj.name ];
+ }
+ }
});
// generate option variable tag
- var tblOption = $(selector+' #vp_optionBox table');
+ var tblOption = $(selector+' #vp_optionBox table tbody');
package.variable && package.variable.forEach(function(o, i) {
// cell metadata test
var obj = JSON.parse(JSON.stringify(o)); // deep copy
tblOption.append(vp_createTag(selector, obj, true, (obj.required == true)));
+ if (obj.component === 'col_select') {
+ if (autoCols[obj.target] != undefined) {
+ autoCols[obj.target].push(obj.name);
+ } else {
+ autoCols[obj.target] = [ obj.name ];
+ }
+ }
});
// generate output variable tag
- var tblOutput = $(selector+' #vp_inputOutputBox table');
+ var tblOutput = $(selector+' #vp_inputOutputBox table tbody');
package.output && package.output.forEach(function(o, i) {
var obj = JSON.parse(JSON.stringify(o)); // deep copy
tblOutput.append(vp_createTag(selector, obj, true, (obj.required == true)));
+ if (obj.component === 'col_select') {
+ if (autoCols[obj.target] != undefined) {
+ autoCols[obj.target].push(obj.name);
+ } else {
+ autoCols[obj.target] = [ obj.name ];
+ }
+ }
+ });
+
+ // bind column list FIXME: change event not triggered on changing df input
+ Object.keys(autoCols).forEach(target => {
+ let targetSelector = selector + ' #' + target;
+ vp_bindColumnSource(selector, targetSelector, autoCols[target]);
+ // on change event
+ $(targetSelector).on('change', function() {
+ console.log('change event ', selector, targetSelector, autoCols[target]);
+ vp_bindColumnSource(selector, this, autoCols[target]);
+ });
});
}
@@ -135,6 +169,15 @@ define([
vp_generateVarSelect(tag, obj.var_type, obj.value);
tblInput.appendChild(tag);
break;
+ case 'col_select':
+ var tag = document.createElement('input');
+ $(tag).attr({
+ 'type': 'text',
+ 'id': obj.name,
+ 'class': 'vp-input vp-state'
+ });
+ tblInput.appendChild(tag);
+ break;
case 'textarea':
var textarea = $(``);
// cell metadata test
@@ -209,7 +252,7 @@ define([
suggestInput.setSelectEvent(function(selectedValue) {
// trigger change
$(divTag + ' #' + obj.name).val(selectedValue);
- $(divTag + ' #' + obj.name).trigger('select_suggestvalue');
+ $(divTag + ' #' + obj.name).trigger('change');
});
$(divTag + ' #' + obj.name).replaceWith(function() {
return suggestInput.toTagString();
@@ -275,7 +318,7 @@ define([
/**
* pageId wrap selector
- * @param {string} pageId vp-option-page의 uuid값
+ * @param {string} pageId vp-option-page uuid
* @param {string} query
*/
var vp_wrapSelector = function(pageId, query) {
@@ -320,6 +363,9 @@ define([
case 'var_multi':
value = $(vp_wrapSelector(pageId, '#'+obj.name)).val();
break;
+ case 'col_select':
+ value = $(vp_wrapSelector(pageId, '#'+obj.name)).val();
+ break;
case 'table':
case 'file':
default:
@@ -424,26 +470,28 @@ define([
/**
* Bind columns source function
- * @param {object} pageThis
+ * @param {string} selector thisWrapSelector
* @param {object} target
* @param {array} columnInputIdList
* Usage :
* $(document).on('change', this.wrapSelector('#dataframe_tag_id'), function() {
- * pdGen.vp_bindColumnSource(that, this, ['column_input_id']);
+ * pdGen.vp_bindColumnSource(that.wrapSelector(), this, ['column_input_id']);
* });
*/
- var vp_bindColumnSource = function(pageThis, target, columnInputIdList) {
- var varName = $(target).val();
-
+ var vp_bindColumnSource = function(selector, target, columnInputIdList) {
+ var varName = '';
+ if ($(target).length > 0) {
+ varName = $(target).val();
+ }
if (varName === '') {
// reset with no source
columnInputIdList && columnInputIdList.forEach(columnInputId => {
var suggestInputX = new SuggestInput();
suggestInputX.setComponentID(columnInputId);
- suggestInputX.addClass('vp-input');
+ suggestInputX.addClass('vp-input vp-state');
suggestInputX.setNormalFilter(false);
- suggestInputX.setValue($(pageThis.wrapSelector('#' + columnInputId)).val());
- $(pageThis.wrapSelector('#' + columnInputId)).replaceWith(function() {
+ suggestInputX.setValue($(selector + ' #' + columnInputId).val());
+ $(selector + ' #' + columnInputId).replaceWith(function() {
return suggestInputX.toTagString();
});
});
@@ -454,22 +502,20 @@ define([
try {
let { result, type, msg } = resultObj;
var varResult = JSON.parse(result);
-
- if (varResult.length > 0) {
- // columns using suggestInput
- columnInputIdList && columnInputIdList.forEach(columnInputId => {
- var suggestInputX = new SuggestInput();
- suggestInputX.setComponentID(columnInputId);
- suggestInputX.addClass('vp-input');
- suggestInputX.setPlaceholder("column name");
- suggestInputX.setSuggestList(function() { return varResult; }); //FIXME:
- suggestInputX.setNormalFilter(false);
- suggestInputX.setValue($(pageThis.wrapSelector('#' + columnInputId)).val());
- $(pageThis.wrapSelector('#' + columnInputId)).replaceWith(function() {
- return suggestInputX.toTagString();
- });
+
+ // columns using suggestInput
+ columnInputIdList && columnInputIdList.forEach(columnInputId => {
+ var suggestInputX = new SuggestInput();
+ suggestInputX.setComponentID(columnInputId);
+ suggestInputX.addClass('vp-input vp-state');
+ suggestInputX.setPlaceholder("column name");
+ suggestInputX.setSuggestList(function() { return varResult; }); //FIXME:
+ suggestInputX.setNormalFilter(false);
+ suggestInputX.setValue($(selector + ' #' + columnInputId).val());
+ $(selector + ' #' + columnInputId).replaceWith(function() {
+ return suggestInputX.toTagString();
});
- }
+ });
} catch (e) {
vpLog.display(VP_LOG_TYPE.ERROR, 'com_generator - bindColumnSource: not supported data type. ', e);
}
diff --git a/js/com/com_generatorV2.js b/js/com/com_generatorV2.js
new file mode 100644
index 00000000..3a753fbf
--- /dev/null
+++ b/js/com/com_generatorV2.js
@@ -0,0 +1,1254 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_generator_v2.js
+ * Author : Black Logic
+ * Note : Generator for library options
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 12. 17
+ * Change Date :
+ */
+define([
+ 'vp_base/js/com/com_util',
+ 'vp_base/js/com/com_makeDom',
+ 'vp_base/js/com/component/SuggestInput'
+], function (com_util, com_makeDom, SuggestInput) {
+ /**
+ * show result after code executed
+ */
+ var _VP_SHOW_RESULT = true;
+
+ const _VP_COMP_TYPE_LABEL = {
+ '1dlen': '1D Length',
+ '2dlen': '2D Length',
+ '3dlen': '3D Length',
+ '1darr': '1D Array',
+ '2darr': '2D Array',
+ 'ndarr': 'ND Array',
+ 'scalar': 'Scalar Value',
+ 'param': 'Param Value',
+ 'dtype': 'Dtype',
+ 'bool_checkbox': 'Boolean',
+ 'bool_select': 'Select Boolean',
+ 'option_select': 'Select option',
+ 'option_suggest': 'Input option',
+ 'var_select': 'Select Variable',
+ 'var_multi': 'Select N-Variables',
+ 'col_select': 'Select Column',
+ 'textarea': 'Input textarea',
+ 'input_number': 'Input number',
+ 'input': 'Input text'
+ }
+
+ const _VP_BOOL_OPTIONS = [
+ { name: 'Default', value: '' },
+ { name: 'True', value: 'True' },
+ { name: 'False', value: 'False' }
+ ]
+
+ const _VP_NP_DTYPES = [
+ {
+ name: 'Default',
+ value: ''
+ },
+ {
+ name: 'None',
+ value: 'None'
+ },
+ {
+ name: 'Int8',
+ value: 'np.int8'
+ },
+ {
+ name: 'Int16',
+ value: 'np.int16'
+ },
+ {
+ name: 'Int32',
+ value: 'np.int32'
+ },
+ {
+ name: 'Int64',
+ value: 'np.int64'
+ },
+ {
+ name: 'Intp',
+ value: 'np.intp'
+ },
+ {
+ name: 'uInt8',
+ value: 'np.uint8'
+ },
+ {
+ name: 'uInt16',
+ value: 'np.uint16'
+ },
+ {
+ name: 'uInt32',
+ value: 'np.uint32'
+ },
+ {
+ name: 'uInt64',
+ value: 'np.uint64'
+ },
+ {
+ name: 'Float16',
+ value: 'np.float16'
+ },
+ {
+ name: 'Float32',
+ value: 'np.float32'
+ },
+ {
+ name: 'Float64',
+ value: 'np.float64'
+ },
+ {
+ name: 'Bool',
+ value: 'np.bool'
+ },
+ {
+ name: 'String',
+ value: 'np.string_'
+ }
+ ];
+
+ /**
+ * Generate page interface based on package configuration
+ * @param {Component} pageThis
+ * @param {*} package
+ */
+ var vp_showInterfaceOnPage = function(pageThis, package, state={}) {
+
+ // generate input variable tag
+ var tblInput = $(pageThis.wrapSelector()+' #vp_inputOutputBox table tbody');
+ // generate option variable tag
+ var tblOption = $(pageThis.wrapSelector()+' #vp_optionBox table tbody');
+
+ package.options && package.options.forEach(function(o, i) {
+ var obj = JSON.parse(JSON.stringify(o));
+ let newTag = vp_createTag(pageThis, obj, state);
+ if (obj.required) {
+ tblInput.append(newTag);
+ } else {
+ tblOption.append(newTag);
+ }
+ });
+
+ // TODO: userOption
+
+ bindAutoComponentEvent(pageThis);
+ }
+
+ /**
+ * Generate tag using type
+ * @param {String} selector
+ * @param {Object} obj
+ * @param {Object} state
+ */
+ var vp_createTag = function(pageThis, obj, state) {
+ // TR tag & TD label tag
+ var tblRow = $('
+
`)
+ }
+
+ var render2dLen = function(pageThis, obj, state) {
+ state = {
+ [obj.name + '_row']: '',
+ [obj.name + '_col']: '',
+ ...state
+ }
+ return $(`
+
+ Length
+
+
+
+
+
`);
+ }
+
+ var render3dLen = function(pageThis, obj, state) {
+ state = {
+ [obj.name + '_plane']: '',
+ [obj.name + '_row']: '',
+ [obj.name + '_col']: '',
+ ...state
+ }
+ return $(`
+
+ Row
+
+
+
+
+
+ Col
+
+
+
+
+
+
`);
+ }
+
+ var render1dArr = function(pageThis, obj, state) {
+ let arrKey = obj.name + '_1darr';
+ let arrState = [ 0 ];
+ let value = `[${arrState.join(',')}]`;
+ if (state[arrKey] == undefined) {
+ pageThis.setState({ [arrKey]: arrState });
+ pageThis.setState({ [obj.name]: value});
+ } else {
+ arrState = state[arrKey];
+ value = `[${arrState.join(',')}]`;
+ }
+
+ let contentTag = $(``);
+ $(contentTag).attr({
+ 'data-id': obj.name
+ });
+ contentTag.data('obj', obj);
+ // Length setting
+ contentTag.append($(`
+
+ Plane
+
+
+
+
+
+ Row
+
+
+
+
+
+ Col
+
+
+
+
+
+
`));
+ // Array Items
+ let arrItems = $(``);
+ arrState.forEach((item, idx) => {
+ arrItems.append(render1dArrItem(idx, item));
+ });
+ contentTag.append(arrItems);
+ // add button
+ contentTag.append($(``));
+ return contentTag;
+ }
+
+ var render1dArrItem = function(idx, value=0) {
+ return $(`
+ Length :
+
+
+
+
+
+
`);
+ }
+
+ var render2dArr = function(pageThis, obj, state) {
+ let arrKey = obj.name + '_2darr';
+ let arrState = [[0]];
+ let value = `[[0]]`;
+ if (state[arrKey] == undefined) {
+ pageThis.setState({ [arrKey]: arrState });
+ pageThis.setState({ [obj.name]: value});
+ } else {
+ arrState = state[arrKey];
+ value = `[${arrState.map(ele => '[' + ele.join(',') + ']').join(',')}]`;
+ }
+
+ let contentTag = $(``);
+ $(contentTag).attr({
+ 'data-id': obj.name
+ });
+ contentTag.data('obj', obj);
+ // Length setting
+ let rowLength = arrState.length;
+ let colLength = 0;
+ if (arrState.length > 0) {
+ colLength = Math.max(...arrState.map(ele => ele.length));
+ }
+ contentTag.append(`
+ ${idx}
+
+
+
+
+
`)
+ // Array Items
+ let arrItems = $(``);
+ arrState.forEach((item, idx) => {
+ arrItems.append(render2dArrItem(idx, item));
+ });
+ contentTag.append(arrItems);
+ // row add button
+ contentTag.append($(``));
+ return contentTag;
+ }
+
+ var render2dArrItem = function(rowIdx, item) {
+ let arrRowBox = $(``);
+ let arrRows = $(``);
+ // row index
+ arrRows.append($(`
+ Row :
+
+
+
+ Col :
+
+
+
+
+
+ ${rowIdx}
+
`))
+ // columns
+ let arrColBox = $(``);
+ let arrCols = $(``);
+ item.forEach((col, idx) => {
+ arrCols.append($(`
+
+ ${idx}
+
+
+
+
`));
+ });
+ arrColBox.append(arrCols);
+ arrRows.append(arrColBox);
+ arrRowBox.append(arrRows);
+ // col add button
+ arrRowBox.append($(`
+
+
`));
+ // row delete button
+ arrRowBox.append($(`
+
+
`));
+ return arrRowBox;
+ }
+
+ var renderNdArr = function(pageThis, obj, state) {
+ let arrKey = obj.name + '_ndarr';
+ let arrState = [ '' ];
+ let value = `${arrState.join(',')}`;
+ if (state[arrKey] == undefined) {
+ pageThis.setState({ [arrKey]: arrState });
+ pageThis.setState({ [obj.name]: value});
+ } else {
+ arrState = state[arrKey];
+ value = `${arrState.join(',')}`;
+ }
+
+ let contentTag = $(``);
+ $(contentTag).attr({
+ 'data-id': obj.name
+ });
+ contentTag.data('obj', obj);
+ // Array Items
+ let arrItems = $(``);
+ arrState.forEach((item, idx) => {
+ arrItems.append($(`
+
`));
+ });
+ contentTag.append(arrItems);
+ // add button
+ contentTag.append($(``));
+ return contentTag;
+ }
+
+ var renderScalar = function(pageThis, obj, state) {
+ let placeholder = 'Input Scalar';
+ if (obj.placeholder) {
+ placeholder = obj.placeholder;
+ }
+ return $(``);
+ }
+
+ var renderParam = function(pageThis, obj, defaultValue) {
+ let placeholder = 'Input Param';
+ if (obj.placeholder) {
+ placeholder = obj.placeholder;
+ }
+ return $(``);
+ }
+
+ var renderDtypeSelector = function(pageThis, obj, defaultValue) {
+ let slctTag = $('').attr({
+ class: 'vp-select vp-state',
+ id: obj.name
+ });
+ _VP_NP_DTYPES.forEach(dtypeObj => {
+ let { name, value } = dtypeObj;
+ let option = $(``).attr({
+ 'value': value
+ });
+ if (value != undefined && value == defaultValue) {
+ $(option).attr({
+ 'selected':'selected'
+ });
+ }
+ slctTag.append(option);
+ });
+ return slctTag;
+ }
+
+ var renderTabBlock = function(pageThis, obj, defaultValue) {
+ return $('');
+ }
+
+ var bindAutoComponentEvent = function(pageThis) {
+ let selector = pageThis.wrapSelector();
+ // Auto-component selector
+ $(selector).on('change', '.vp-auto-component-selector', function() {
+ let contentTag = $(this).parent().find('.vp-auto-component-content');
+ let newType = $(this).val();
+ let obj = $(this).data('obj');
+ $(contentTag).html(renderContent(pageThis, newType, obj, pageThis.getState()));
+ });
+
+ //====================================================================
+ // Event for 2dLen
+ //====================================================================
+ $(selector).on('change', '.vp-numpy-2dlen-item', function() {
+ let id = $(this).data('id');
+ let newValue = pageThis.getState(id+'_row') + ',' + pageThis.getState(id+'_col');
+ $(pageThis.wrapSelector('#' + id)).val(newValue);
+ $(pageThis.wrapSelector('#' + id)).trigger('change');
+ });
+
+ //====================================================================
+ // Event for 3dLen
+ //====================================================================
+ $(selector).on('change', '.vp-numpy-3dlen-item', function() {
+ let id = $(this).data('id');
+ let newValue = pageThis.getState(id+'_plane') + ',' + pageThis.getState(id+'_row') + ',' + pageThis.getState(id+'_col');
+ $(pageThis.wrapSelector('#' + id)).val(newValue);
+ $(pageThis.wrapSelector('#' + id)).trigger('change');
+ });
+
+ //====================================================================
+ // Event for 1dArr
+ //====================================================================
+ $(selector).on('click', '.vp-numpy-1darr-set', function() {
+ let id = $(this).closest('.vp-numpy-1darr-box').data('id');
+ let arrId = id + '_1darr';
+ let len = $(this).parent().find('.vp-numpy-1darr-set-num').val();
+ // update state
+ let state = Array(parseInt(len)).fill(0);
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: `[${state.join(',')}]` });
+ // re-render
+ let obj = $(this).closest('.vp-numpy-1darr-box').data('obj');
+ $(this).closest('.vp-numpy-1darr-box').replaceWith(function() {
+ return render1dArr(pageThis, obj, pageThis.getState());
+ });
+ });
+
+ $(selector).on('click', '.vp-numpy-1darr-del', function() {
+ let id = $(this).closest('.vp-numpy-1darr-box').data('id');
+ let arrId = id + '_1darr';
+ let idx = $(this).parent().find('.vp-numpy-1darr-item').data('idx');
+ // update state
+ let state = pageThis.getState(arrId);
+ state.splice(idx, 1);
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: `[${state.join(',')}]` });
+ // re-render
+ let obj = $(this).closest('.vp-numpy-1darr-box').data('obj');
+ $(this).closest('.vp-numpy-1darr-box').replaceWith(function() {
+ return render1dArr(pageThis, obj, pageThis.getState());
+ });
+ });
+
+ $(selector).on('click', '.vp-numpy-1darr-add', function() {
+ let id = $(this).closest('.vp-numpy-1darr-box').data('id');
+ let arrId = id + '_1darr';
+ let idx = 0;
+ // update state
+ let state = pageThis.getState(arrId);
+ if (!state) {
+ state = [];
+ } else {
+ idx = state.length;
+ }
+ state.push(0);
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: `[${state.join(',')}]` });
+ // re-render
+ let obj = $(this).closest('.vp-numpy-1darr-box').data('obj');
+ $(this).closest('.vp-numpy-1darr-box').replaceWith(function() {
+ return render1dArr(pageThis, obj, pageThis.getState());
+ });
+ });
+
+ $(selector).on('change', '.vp-numpy-1darr-item', function() {
+ let id = $(this).closest('.vp-numpy-1darr-box').data('id');
+ let arrId = id + '_1darr';
+ let idx = $(this).data('idx');
+ let value = $(this).val();
+ // update state
+ let state = pageThis.getState(arrId);
+ state[idx] = value;
+ let code = `[${state.join(',')}]`;
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: code });
+ $(pageThis.wrapSelector('#'+id)).val(code);
+ });
+
+ //====================================================================
+ // Event for 2dArr
+ //====================================================================
+ $(selector).on('click', '.vp-numpy-2darr-set', function() {
+ let id = $(this).closest('.vp-numpy-2darr-box').data('id');
+ let arrId = id + '_2darr';
+ let row = $(this).parent().find('.vp-numpy-2darr-set-row').val();
+ let col = $(this).parent().find('.vp-numpy-2darr-set-col').val();
+ // update state
+ let state = Array(parseInt(row));
+ for (let i = 0; i < state.length; i++) {
+ state[i] = Array(parseInt(col)).fill(0);
+ }
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]` });
+ // re-render
+ let obj = $(this).closest('.vp-numpy-2darr-box').data('obj');
+ $(this).closest('.vp-numpy-2darr-box').replaceWith(function() {
+ return render2dArr(pageThis, obj, pageThis.getState());
+ });
+ });
+
+ $(selector).on('click', '.vp-numpy-2darr-row-del', function() {
+ let id = $(this).closest('.vp-numpy-2darr-box').data('id');
+ let arrId = id + '_2darr';
+ let idx = $(this).parent().parent().find('.vp-numpy-2darr-row').data('idx');
+ // update state
+ let state = pageThis.getState(arrId);
+ state.splice(idx, 1);
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]` });
+ // re-render
+ let obj = $(this).closest('.vp-numpy-2darr-box').data('obj');
+ $(this).closest('.vp-numpy-2darr-box').replaceWith(function() {
+ return render2dArr(pageThis, obj, pageThis.getState());
+ });
+ });
+
+ $(selector).on('click', '.vp-numpy-2darr-row-add', function() {
+ let id = $(this).closest('.vp-numpy-2darr-box').data('id');
+ let arrId = id + '_2darr';
+ // update state
+ let state = pageThis.getState(arrId);
+ if (!state) {
+ state = [];
+ }
+ state.push([0]);
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]` });
+ // re-render
+ let obj = $(this).closest('.vp-numpy-2darr-box').data('obj');
+ $(this).closest('.vp-numpy-2darr-box').replaceWith(function() {
+ return render2dArr(pageThis, obj, pageThis.getState());
+ });
+ });
+
+ $(selector).on('click', '.vp-numpy-2darr-col-del', function() {
+ let id = $(this).closest('.vp-numpy-2darr-box').data('id');
+ let arrId = id + '_2darr';
+ let rowIdx = $(this).parent().parent().find('.vp-numpy-2darr-item').data('rowidx');
+ let idx = $(this).parent().find('.vp-numpy-2darr-item').data('idx');
+ // update state
+ let state = pageThis.getState(arrId);
+ state[rowIdx].splice(idx, 1);
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]` });
+ // re-render
+ let obj = $(this).closest('.vp-numpy-2darr-box').data('obj');
+ $(this).closest('.vp-numpy-2darr-box').replaceWith(function() {
+ return render2dArr(pageThis, obj, pageThis.getState());
+ });
+ });
+
+ $(selector).on('click', '.vp-numpy-2darr-col-add', function() {
+ let id = $(this).closest('.vp-numpy-2darr-box').data('id');
+ let arrId = id + '_2darr';
+ let rowIdx = $(this).parent().parent().find('.vp-numpy-2darr-item').data('rowidx');
+ // update state
+ let state = pageThis.getState(arrId);
+ if (!state) {
+ state = Array(rowIdx + 1);
+ for (let i = 0; i < state.length; i++) {
+ state[i] = [];
+ }
+ }
+ state[rowIdx].push(0);
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]` });
+ // re-render
+ let obj = $(this).closest('.vp-numpy-2darr-box').data('obj');
+ $(this).closest('.vp-numpy-2darr-box').replaceWith(function() {
+ return render2dArr(pageThis, obj, pageThis.getState());
+ });
+ });
+
+ $(selector).on('change', '.vp-numpy-2darr-item', function() {
+ let id = $(this).closest('.vp-numpy-2darr-box').data('id');
+ let arrId = id + '_2darr';
+ let rowIdx = $(this).data('rowidx');
+ let idx = $(this).data('idx');
+ let value = $(this).val();
+ // update state
+ let state = pageThis.getState(arrId);
+ state[rowIdx][idx] = value;
+ let code = `[${state.map(ele => '[' + ele.join(',') + ']').join(',')}]`;
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: code });
+ $(pageThis.wrapSelector('#'+id)).val(code);
+ });
+
+ //====================================================================
+ // Event for ndArr
+ //====================================================================
+ $(selector).on('click', '.vp-numpy-ndarr-del', function() {
+ let id = $(this).closest('.vp-numpy-ndarr-box').data('id');
+ let arrId = id + '_ndarr';
+ let idx = $(this).parent().find('.vp-numpy-ndarr-item').data('idx');
+ // update state
+ let state = pageThis.getState(arrId);
+ state.splice(idx, 1);
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: `${state.join(',')}` });
+ // re-render
+ let obj = $(this).closest('.vp-numpy-ndarr-box').data('obj');
+ $(this).closest('.vp-numpy-ndarr-box').replaceWith(function() {
+ return renderNdArr(pageThis, obj, pageThis.getState());
+ });
+ });
+
+ $(selector).on('click', '.vp-numpy-ndarr-add', function() {
+ let id = $(this).closest('.vp-numpy-ndarr-box').data('id');
+ let arrId = id + '_ndarr';
+ let idx = 0;
+ // update state
+ let state = pageThis.getState(arrId);
+ if (!state) {
+ state = [ ];
+ } else {
+ idx = state.length;
+ }
+ state.push(0);
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: `${state.join(',')}` });
+ // re-render
+ let obj = $(this).closest('.vp-numpy-ndarr-box').data('obj');
+ $(this).closest('.vp-numpy-ndarr-box').replaceWith(function() {
+ return renderNdArr(pageThis, obj, pageThis.getState());
+ });
+ });
+
+ $(selector).on('change', '.vp-numpy-ndarr-item', function() {
+ let id = $(this).closest('.vp-numpy-ndarr-box').data('id');
+ let arrId = id + '_ndarr';
+ let idx = $(this).data('idx');
+ let value = $(this).val();
+ // update state
+ let state = pageThis.getState(arrId);
+ state[idx] = value;
+ let code = `${state.join(',')}`;
+ pageThis.setState({ [arrId]: state });
+ pageThis.setState({ [id]: code });
+ $(pageThis.wrapSelector('#'+id)).val(code);
+ });
+
+
+ //====================================================================
+ // Event for tabBlock
+ //====================================================================
+ }
+
+ return {
+ vp_showInterfaceOnPage: vp_showInterfaceOnPage,
+ vp_codeGenerator: vp_codeGenerator,
+ vp_generateVarSelect: vp_generateVarSelect,
+ vp_getTagValue: vp_getTagValue,
+ vp_bindColumnSource: vp_bindColumnSource
+ };
+});
\ No newline at end of file
diff --git a/js/com/com_interface.js b/js/com/com_interface.js
index e13bf9db..e19e6167 100644
--- a/js/com/com_interface.js
+++ b/js/com/com_interface.js
@@ -17,6 +17,13 @@ define([
return Jupyter.notebook.get_selected_index();
}
+ /**
+ *
+ * @param {String} type code / markdown
+ * @param {String} command
+ * @param {boolean} exec true(default) / false
+ * @param {int} sigNum
+ */
var insertCell = function(type, command, exec=true, sigNum=-1) {
var selectedIndex = getSelectedCell();
var targetCell = Jupyter.notebook.insert_cell_below(type, selectedIndex);
diff --git a/js/com/com_util.js b/js/com/com_util.js
index 2088cfcb..8533d38b 100644
--- a/js/com/com_util.js
+++ b/js/com/com_util.js
@@ -146,9 +146,29 @@ define([
}
}
+ /**
+ * Modal
+ * @param {Object} config { title, message, buttons(list), final(function), defaultIdx(int) }
+ */
+ var renderModal = function(config={title:'', message:'', buttons:['Ok']}) {
+ require(['vp_base/js/com/component/Modal'], function(Modal) {
+ let modal = new Modal(config);
+ modal.open();
+ });
+ }
+
+ /**
+ * InfoModal
+ * @param {string} titleStr
+ */
+ var renderInfoModal = function(titleStr) {
+ require(['vp_base/js/com/component/InfoModal'], function(InfoModal) {
+ new InfoModal(titleStr);
+ });
+ }
+
/**
- * alertModal html과 css를 load하는 함수
- * alertModal은 주로 코드 생성 validation message로 사용한다
+ * AlertModal
* @param {string} titleStr
*/
var renderAlertModal = function(titleStr) {
@@ -220,6 +240,8 @@ define([
convertToStr: convertToStr,
removeHeadScript: removeHeadScript,
+ renderModal: renderModal,
+ renderInfoModal: renderInfoModal,
renderAlertModal: renderAlertModal,
renderSuccessMessage: renderSuccessMessage,
diff --git a/js/com/component/Component.js b/js/com/component/Component.js
index de66b443..0f49e19a 100644
--- a/js/com/component/Component.js
+++ b/js/com/component/Component.js
@@ -125,6 +125,20 @@ define([
getTag() {
return $(this.wrapSelector());
}
+
+ setState(stateObj) {
+ this.state = {
+ ...this.state,
+ ...stateObj
+ }
+ }
+
+ getState(stateKey=undefined) {
+ if (stateKey == undefined) {
+ return this.state;
+ }
+ return this.state[stateKey];
+ }
}
return Component;
diff --git a/js/com/component/FileNavigation.js b/js/com/component/FileNavigation.js
index 719c4361..671ed9d7 100644
--- a/js/com/component/FileNavigation.js
+++ b/js/com/component/FileNavigation.js
@@ -222,7 +222,7 @@ define([
that.getFileList(dirObj);
} else {
- let dirPath = that.makeNewCurrRelativePath();
+ let dirPath = that.getRelativePath(that.pathState.baseDir, that.pathState.currentPath);
let extension = name.substring(name.lastIndexOf('.') + 1);
let allowExtensionList = that.state.extensions;
// if it is not allowed extension
@@ -313,9 +313,17 @@ define([
// if it's outside of notebookPath, ignore notebookPath
var prevLength = notebookPathStrLength;
var useSidebar = false;
- if (currentRelativePathStrArray.includes('..')) {
- prevLength = 0;
- useSidebar = true;
+ if (currentRelativePathStr.includes('..')) {
+ var upperList = currentRelativePathStr.match(/(\.\.\/)/g);
+ if (upperList && upperList.length > 0) {
+ // in case, currentRelativePathStr = ../../somePathHere
+ prevLength -= upperList.length * 3; // 3 = length of '../' upper path string
+ useSidebar = true;
+ } else {
+ // in case, currentRelativePathStr = ..
+ prevLength = 0;
+ useSidebar = true;
+ }
}
let slashStr = '/';
currentRelativePathStrArray.forEach((pathToken,index) => {
@@ -447,54 +455,7 @@ define([
var fileNavigationState = this.pathState;
var baseFolder = fileNavigationState.baseFolder;
- var baseDirStr = fileNavigationState.baseDir;
- var noteBookPathStr = fileNavigationState.notebookPath;
var currentDirStr = fileNavigationState.currentPath;
- var noteBookPathStrLength = noteBookPathStr.length;
-
- var baseDirStrLength = baseDirStr.length;
-
- /** upDirectoryCount:
- * count how many times went up to the parent path, since file navigation opened
- */
- var upDirectoryCount = 0;
- var _upDirectoryCount = 0;
-
- var splitedNoteBookPathStrArray = noteBookPathStr.split('/');
- var splitedBaseDirArray = baseDirStr.split('/');
- var splitedCurrentDirArray = currentDirStr.split('/');
-
- var relativeBaseDirArray = splitedBaseDirArray.slice(splitedNoteBookPathStrArray.length, splitedBaseDirArray.length);
- var relativeCurrentDirArray = splitedCurrentDirArray.slice(splitedNoteBookPathStrArray.length, splitedCurrentDirArray.length);
-
- /**
- * compare base path and notebook path, increase upDirectoryCount
- */
- var _baseDirStrLength = baseDirStrLength;
- while ( noteBookPathStrLength < _baseDirStrLength ) {
- _baseDirStrLength--;
- if ( baseDirStr[_baseDirStrLength] === '/') {
- upDirectoryCount += 1;
- }
- }
-
- /**
- * Compare notebook path and current relative path, decrease upDirectoryCount
- */
- relativeCurrentDirArray.forEach((forderName,index) => {
- if ( forderName === relativeBaseDirArray[index] ) {
- upDirectoryCount -= 1;
- }
- });
-
- /**
- * Add ../ based on upDirectoryCount
- */
- _upDirectoryCount = upDirectoryCount;
- var prefixUpDirectory = ``;
- while (_upDirectoryCount-- > 0) {
- prefixUpDirectory += `../`;
- }
var slashstr = `/`;
if (relativeDirPath === '') {
@@ -504,10 +465,9 @@ define([
var pathInput = '';
var fileInput = `${filePathStr}`;
// if baseFolder doesn't exist in current path
- if (upDirectoryCount > 0
- && currentDirStr.indexOf(baseFolder) === -1) {
+ if (currentDirStr.indexOf(baseFolder) === -1) {
- pathInput = `${prefixUpDirectory}${relativeDirPath}${slashstr}${filePathStr}`;
+ pathInput = `${relativeDirPath}${slashstr}${filePathStr}`;
} else {
// if baseFolder exists in current path
pathInput = `./${relativeDirPath}${slashstr}${filePathStr}`;
@@ -682,49 +642,6 @@ define([
}
}
- /**
- * Make relative path using current path
- * @returns
- */
- makeNewCurrRelativePath() {
- var pathState = this.pathState;
- var dirPath = pathState.relativeDir;
- /**
- * current path on opening file navigation
- * ex) if current path is 'C:/Users/VP/Desktop/Test'
- * baseFolder = 'Test'
- */
- var baseFolder = pathState.baseFolder;
- /**
- * base folder for jupyter notebook
- * ex) if current path is 'C:/Users/VP/Desktop/Test'
- * Jupyter.notebook.notebook_path = 'Desktop/Test/Untitled.ipynb'
- * notebookFolder = 'Desktop'
- */
- var noteBookFolder = pathState.notebookFolder;
-
-
- /** if baseFolder is included in current relative path */
- if (dirPath.indexOf(baseFolder) !== -1) {
- var baseFolderIndex = dirPath.indexOf(baseFolder);
- dirPath = dirPath.substring(baseFolderIndex,dirPath.length);
- dirPath = dirPath.replace(baseFolder, '');
- }
-
- /**
- * if baseFolder is same with noteBookFolder,
- * not replacing notebookFolder inside dirPath
- * */
- if (baseFolder !== noteBookFolder) {
- dirPath = dirPath.replace(noteBookFolder, '');
- }
-
- if (dirPath[0] === '/') {
- dirPath = dirPath.substring(1, dirPath.length);
- }
- return dirPath;
- }
-
splitPathStrAndSetStack(dirObj, resultInfoArr){
var currentDirStr = resultInfoArr[0].current.split('//').join('/');
var splitedDirStrArr = currentDirStr.split('/');
diff --git a/js/com/component/InfoModal.js b/js/com/component/InfoModal.js
new file mode 100644
index 00000000..9b0c8919
--- /dev/null
+++ b/js/com/component/InfoModal.js
@@ -0,0 +1,55 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : InfoModal.js
+ * Author : Black Logic
+ * Note : InfoModal
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 18
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] InfoModal
+//============================================================================
+define([
+ 'text!vp_base/html/component/infoModal.html!strip',
+ 'css!vp_base/css/component/infoModal.css',
+ 'vp_base/js/com/component/Component'
+], function(msgHtml, msgCss, Component) {
+
+ /**
+ * InfoModal
+ */
+ class InfoModal extends Component {
+ constructor(title) {
+ super($('body'), { title: title });
+ }
+
+ _bindEvent() {
+ let that = this;
+ // click ok button
+ $(this.wrapSelector('.vp-infoModal-yes')).click( function() {
+ that.remove();
+ });
+ }
+
+ template() {
+ return msgHtml;
+ }
+
+ render() {
+ super.render();
+
+ // set title
+ $(this.wrapSelector('.vp-infoModal-titleStr')).text(this.state.title);
+ }
+
+ remove() {
+ $(this.wrapSelector()).remove();
+ }
+
+ }
+
+ return InfoModal;
+});
\ No newline at end of file
diff --git a/js/com/component/InstanceEditor.js b/js/com/component/InstanceEditor.js
index 626ba0c4..3d11e313 100644
--- a/js/com/component/InstanceEditor.js
+++ b/js/com/component/InstanceEditor.js
@@ -339,7 +339,7 @@ define([
});
}
- // Method/Function... 이면 Method 항목에 표시
+ // Method/Function... -> Method
else if (_METHOD_TYPES.includes(obj.type)) {
methodListTag.appendFormatLine('
+ ${idx + 1}
+
+
+
+ ");
sbTagString.appendLine("