visualpython · Minku-Koo · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022 · Aug 5, 2022
diff --git a/data/m_library/pythonLibrary.js b/data/m_library/pythonLibrary.js
@@ -279,7 +279,8 @@ define([
                 {
                     name: 'i0',
                     label: 'Input Data',
-                    component: ['var_select']
+                    component: ['key_value']
+                    // component: ['var_select']
                 },
                 {
                     name: 'o0',

diff --git a/js/com/com_generatorV2.js b/js/com/com_generatorV2.js
@@ -30,6 +30,7 @@ define([
         'scalar': 'Scalar Value',
         'param': 'Param Value',
         'dtype': 'Dtype',
+        'key_val': 'Key Value',
         'bool_checkbox': 'Boolean',
         'bool_select': 'Select Boolean',
         'option_select': 'Select option',
@@ -256,6 +257,9 @@ define([
             case 'dtype':
                 content = renderDtypeSelector(pageThis, obj, state);
                 break;
+            case 'key_value':
+                content = renderKeyValue(pageThis, obj, state);
+                break;
             case 'tabblock':
                 content = renderTabBlock(pageThis, obj, state);
                 break;
@@ -635,10 +639,13 @@ define([
      */
     var vp_codeGenerator = function(pageThis, package, state = {}, etcOptions = '') {
         var code = package.code;
-
+        console.log("code is " + code);
         try {
             package.options && package.options.forEach(function(v, i) {
                 var val = state[v.name];
+                console.log("v.name is " + v.name);
+                console.log("v is " , v);
+                console.log("val is " + val);
                 if (val == undefined || val == '' || val == v.default) {
                     val = vp_getTagValue(pageThis, v);
                 }
@@ -649,6 +656,7 @@ define([
                     }
                     // if no value, replace it
                     code = code.split(id).join('');
+                    console.log("code2 is " + code);
                 } else {
                     // text quotation
                     if (v.type == 'text') {
@@ -675,6 +683,7 @@ define([
                         }
                     }
                     code = code.split(id).join(val);
+                    console.log("code3 is " + code);
                 }
             });
 
@@ -1101,6 +1110,43 @@ define([
         return slctTag;
     }
 
+    // (pageThis, obj, state)
+    var renderKeyValue = function(pageThis, obj, state) {
+        let arrKey = obj.name + '_key_val';
+        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 = $(`<div class="vp-key-val-box"></div>`);
+        $(contentTag).attr({
+            'data-id': obj.name
+        });
+        contentTag.data('obj', obj);
+        // Array Items
+        let arrItems = $(`<div class="vp-numpy-style-flex-row-between-wrap vp-scrollbar" style="max-height: 200px; overflow: auto;"></div>`);
+        arrState.forEach((item, idx) => {
+            arrItems.append($(`<div class="vp-numpy-style-flex-row">
+                <div class="vp-numpy-style-flex-column-center vp-bold mr5 w10">
+                    ${idx + 1}
+                </div>
+                <input class="vp-numpy-input vp-key-val-item" data-idx="${idx}" value="${item}" type="text" placeholder="Value">
+                <input class="vp-numpy-input vp-key-val-item" data-idx="${idx}" value="${item}" type="text" placeholder="Value">
+
+                <button class="vp-button vp-key-val-del w30">x</button>
+            </div>`));
+        });
+        contentTag.append(arrItems);
+        // add button
+        contentTag.append($(`<button class="vp-button vp-key-val-add w30">+</button>`));
+        return contentTag;
+    }
+
     var renderTabBlock = function(pageThis, obj, defaultValue) {
         return $('<input value="tabblock"/>');
     }
@@ -1313,7 +1359,7 @@ define([
             pageThis.setState({ [id]: code });
             $(pageThis.wrapSelector('#'+id)).val(code);
         });
-
+        
         //====================================================================
         // Event for ndArr
         //====================================================================
@@ -1367,6 +1413,61 @@ define([
             pageThis.setState({ [id]: code });
             $(pageThis.wrapSelector('#'+id)).val(code);
         });
+        //====================================================================
+        // Event for ndArr
+        //====================================================================
+        $(selector).on('click', '.vp-key-val-del', function() {
+            let id = $(this).closest('.vp-key-val-box').data('id');
+            let arrId = id + '_key_val';
+            let idx = $(this).parent().find('.vp-key-val-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-key-val-box').data('obj');
+            $(this).closest('.vp-key-val-box').replaceWith(function() {
+                return renderKeyValue(pageThis, obj, pageThis.getState());
+            });
+        });
+
+        $(selector).on('click', '.vp-key-val-add', function() {
+            //alert("press key val add");
+            let id = $(this).closest('.vp-key-val-box').data('id');
+            let arrId = id + '_key_val';
+            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-key-val-box').data('obj');
+            $(this).closest('.vp-key-val-box').replaceWith(function() {
+                return renderKeyValue(pageThis, obj, pageThis.getState());
+            });
+        });
+
+        $(selector).on('change', '.vp-key-val-item', function() {
+            //alert("change key val");
+            let id = $(this).closest('.vp-key-val-box').data('id');
+            let arrId = id + '_key_val';
+            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);
+        });
 
 
         //====================================================================

diff --git a/js/com/component/NumpyComponent.js b/js/com/component/NumpyComponent.js
@@ -39,8 +39,10 @@ define([
                 let findPackage = null;
                 if (packageName == 'numpy') {
                     findPackage = numpyLibrary.NUMPY_LIBRARIES[this.packageId];
+                    console.log("packge numpy");
                 } else if (packageName == 'python') {
                     findPackage = pythonLibrary.PYTHON_LIBRARIES[this.packageId];
+                    console.log("packge python !!");
                 }
                 if (findPackage) {
                     this.package = JSON.parse(JSON.stringify(findPackage)); // deep copy of package
@@ -159,6 +161,7 @@ define([
         }
 
         generateCode() {
+            alert("this is numpy component");
             let code = com_generatorV2.vp_codeGenerator(this, this.package, this.state);
             return code;
         }

diff --git a/js/m_logic/Comment.js b/js/m_logic/Comment.js
@@ -6,7 +6,7 @@
  *    Note            : Logic > comment
  *    License         : GNU GPLv3 with Visual Python special exception
  *    Date            : 2021. 11. 18
- *    Change Date     :
+ *    Change Date     : 2022. 08. 02
  */
 
 //============================================================================
@@ -18,6 +18,67 @@ define([
 ], function(com_String, PopupComponent) {
 
     const COMMENT_DEFAULT_CODE = '# Write down comments'
+    // Templates from NumPy Style Python Docstrings.
+    const COMMENT_CLASS_TEMPLATE = 
+`
+"""Summarize the class in one line.
+
+Several sentences ...
+providing an extended description.
+
+Note
+----------
+Note about this class.
+
+Parameters
+----------
+param1 : param_type
+    Parameter description.
+param2 : param_type
+    Parameter description.
+
+Attributes
+----------
+attr1 : attr_type
+    Attibute description.
+attr2 : attr_type
+    Attibute description.
+
+Examples
+----------
+
+References
+----------
+
+"""
+`
+    const COMMENT_METHOD_TEMPLATE = 
+`
+"""Summarize the function in one line.
+
+Several sentences ...
+providing an extended description.
+
+Parameters
+----------
+param1 : param_type
+    Parameter description.
+param2 : param_type
+    Parameter description.
+
+Returns
+-------
+return_type
+    Return description.
+
+Note
+----------
+
+Examples
+----------
+
+"""
+`
 
     /**
      * Comment
@@ -29,45 +90,87 @@ define([
             this.config.dataview = false;
             this.config.codeview = false;
             this.config.saveOnly = true;
+
+            this.cmKey = 'code'; // Code Mirror Key
+            this.selectBoxClassName = 'vp-ct-option'; // Select Box ClassName
 
             this.state = {
                 code: COMMENT_DEFAULT_CODE,
                 ...this.state
+            };
+
+            this.cmTemplates = { // a kind of templates
+                Template : COMMENT_DEFAULT_CODE,
+                Class : COMMENT_CLASS_TEMPLATE,
+                Method : COMMENT_METHOD_TEMPLATE
             }
 
-            this._addCodemirror('code', this.wrapSelector('#code'));
+            this._addCodemirror(this.cmKey, this.wrapSelector('#code'));
         }
 
         _bindEvent() {
             super._bindEvent();
-            /** Implement binding events */
+
+            var commentTemplates = this.cmTemplates;
+            var cm_key = this.cmKey;
+            let cmCodeListTemp = this.cmCodeList;
+
+            // Select box change Event
+            $('.' + this.selectBoxClassName).on('change', function(){
+                // get code mirror object
+                let targetCmObj = cmCodeListTemp.filter(obj => obj.key == cm_key);
+                var templateOption = $(this).val();
+                let cm = targetCmObj[0].cm;
+
+                // Change Code Mirror Text
+                if(templateOption == 'vp_template_class'){
+                    cm.setValue(commentTemplates.Class);
+                }else if(templateOption == 'vp_template_method'){
+                    cm.setValue(commentTemplates.Method);
+                }else if(templateOption == 'vp_template_template'){
+                    cm.setValue(commentTemplates.Template);
+                }
+
+                cm.save();
+            });
+
         }
 
+
         templateForBody() {
             /** Implement generating template */
             var page = new com_String();
             page.appendFormatLine('<textarea name="code" class="code vp-state" id="code">{0}</textarea>'
                                 , this.state.code);
+            // add select box
+            page.appendFormatLine('<select class="vp-select w100 {0}" >', this.selectBoxClassName);
+            // add options
+            Object.entries(this.cmTemplates).forEach(([opt, t_code]) => {
+                page.appendFormatLine('<option value="{0}">{1}</option>',
+                                        'vp_template_' + opt.toLowerCase(), opt);
+            });
+            page.appendFormatLine('</select>');
+
             return page.toString();
         }
 
         open() {
             super.open();
 
             if (this.state.code === COMMENT_DEFAULT_CODE) {
-                // set default selection
-                let cmObj = this.getCodemirror('code');
+
+                let cmObj = this.getCodemirror(this.cmKey);
                 if (cmObj && cmObj.cm) {
                     cmObj.cm.setSelection({ line: 0, ch: 2 }, { line: 0 });
                     cmObj.cm.focus();
                 }
             }
         }
-
+        
         generateCode() {
             return this.state.code;
         }
-
+        
     }
 
     return Comment;