+
+
+
\ No newline at end of file
diff --git a/css/matplotlib/__init__.py b/html/component/__init__.py
similarity index 100%
rename from css/matplotlib/__init__.py
rename to html/component/__init__.py
diff --git a/html/component/alertModal.html b/html/component/alertModal.html
new file mode 100644
index 00000000..3c34787a
--- /dev/null
+++ b/html/component/alertModal.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/component/successMessage.html b/html/component/successMessage.html
new file mode 100644
index 00000000..c3422ad0
--- /dev/null
+++ b/html/component/successMessage.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/component/fileNavigation/index.html b/html/fileNavigation.html
similarity index 82%
rename from src/component/fileNavigation/index.html
rename to html/fileNavigation.html
index 5711059a..fe9a1af0 100644
--- a/src/component/fileNavigation/index.html
+++ b/html/fileNavigation.html
@@ -1,4 +1,16 @@
-
+
+
+
+
-
+
+
+
+ 
+
+
+
+
\ No newline at end of file
diff --git a/html/m_apps/chart.html b/html/m_apps/chart.html
new file mode 100644
index 00000000..f04c4092
--- /dev/null
+++ b/html/m_apps/chart.html
@@ -0,0 +1,321 @@
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/m_apps/file.html b/html/m_apps/file.html
new file mode 100644
index 00000000..9b9e9098
--- /dev/null
+++ b/html/m_apps/file.html
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+
+ | Variable | Data Type |
|---|---|
+
+
+
+
+
+ | Column | +
|---|
|
+
+
+
+ |
+
+
+
+
+
+ Import Options
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Required Input
+
+
+
+
+
+
+
+ Chart Type
+
+
+
+
+
+ Line
+
+
+
+ Bar 1
+
+
+
+ Bar 2
+
+
+
+ Histogram
+
+
+
+
+ Box
+
+
+
+ Stack
+
+
+
+
+ Pie
+
+
+
+
+ Scatter
+
+
+
+ Hexbin
+
+
+
+
+ Contour
+
+
+
+
+ Image
+
+
+
+ Error
+ Bar
+ | X Value | ++ | +
|---|---|
| Y Value | ++ | +
| Z Value | ++ |
| Bins | ++ |
| X, Y Extent | ++ |
| Origin | ++ |
| Color Map | +
+
+
+ none
+
+ |
+
| Chart Label | ++ |
| Color | +|
| Marker | ++ |
+
| Line Style | ++ |
| User Option | ++ | +
+
+
+
+ Additional Options
+
+
+
+
+
+ | Title | ++ |
|---|---|
| X Label | ++ |
| Y Label | ++ |
| X Limit | ++ |
| Y Limit | ++ |
| + |
+ + |
+
| Legend Title | ++ |
| Legend Labels | ++ |
| Legend Position | ++ |
| + |
+ + |
+
| Save Figure | ++ + | +
+
+
+
+
\ No newline at end of file
diff --git a/html/m_apps/frame.html b/html/m_apps/frame.html
new file mode 100644
index 00000000..25ddb568
--- /dev/null
+++ b/html/m_apps/frame.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/m_apps/groupby.html b/html/m_apps/groupby.html
new file mode 100644
index 00000000..7afed63d
--- /dev/null
+++ b/html/m_apps/groupby.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/file_io/instance.html b/html/m_apps/instance.html
similarity index 92%
rename from src/file_io/instance.html
rename to html/m_apps/instance.html
index d8a69310..6860d2db 100644
--- a/src/file_io/instance.html
+++ b/html/m_apps/instance.html
@@ -1,4 +1,4 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
\ No newline at end of file
+
\ No newline at end of file
diff --git a/html/m_apps/pdf.html b/html/m_apps/pdf.html
new file mode 100644
index 00000000..d54f7a5c
--- /dev/null
+++ b/html/m_apps/pdf.html
@@ -0,0 +1,25 @@
+
+
@@ -13,4 +13,4 @@
-
+
+
\ No newline at end of file
diff --git a/html/m_apps/profiling.html b/html/m_apps/profiling.html
new file mode 100644
index 00000000..af6bf5df
--- /dev/null
+++ b/html/m_apps/profiling.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/m_apps/reshape.html b/html/m_apps/reshape.html
new file mode 100644
index 00000000..875d03f2
--- /dev/null
+++ b/html/m_apps/reshape.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/file_io/udf.html b/html/m_apps/snippets.html
similarity index 50%
rename from src/file_io/udf.html
rename to html/m_apps/snippets.html
index 22e35b98..7a006e6b 100644
--- a/src/file_io/udf.html
+++ b/html/m_apps/snippets.html
@@ -1,15 +1,14 @@
-
-
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
-
+
+
- 
-
{
+ if (popupState.hasOwnProperty(key) && popupState[key] != undefined) {
+ tmpState[key] = popupState[key];
+ } else {
+ tmpState[key] = defaultPopupState[key];
+ }
+ });
+ tmpState = {
+ ...tmpState,
+ file: fileName, // set fileName
+ argIdx: menuArgIdx,
+ menuConfig: menuConfig
+ }
+ loadStateList.push(tmpState);
+ // if createChild, get childStateInfo
+ if (tmpState.blockType == 'block' && tmpState.createChild) {
+ let childStates = this.getChildState(tmpState.menuId, tmpState.position);
+ popupStateList.splice(i+1, 0, ...childStates);
+ }
+ } else {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'Menu is not found (menu id: '+popupState.menuId+')');
+ }
+ }
+
+ try {
+ // loading bar enable
+ this.boardFrame.showLoadingBar();
+ // create components
+ require(loadMenuList, function() {
+ let parentBlock = null;
+ let prevBlock = null;
+ loadStateList.forEach(obj => {
+ let { blockType, menuId, menuState, menuConfig, argIdx, position, afterAction } = obj;
+ // get OptionComponent Object
+ let OptionComponent = arguments[argIdx];
+ if (OptionComponent) {
+ let taskState = menuState.taskState;
+ let blockState = menuState.blockState;
+ let state = {
+ ...taskState,
+ config: menuConfig
+ };
+ // create popup instance
+ let popup = new OptionComponent(state);
+ let newBlock = null;
+ if (blockType === 'block') {
+ // add to block list
+ newBlock = that.addBlock(popup, position, blockState);
+ if (parentBlock == null) {
+ parentBlock = newBlock; // set parent block of created block
+ } else {
+ if (prevBlock != null && !newBlock.isGroup) {
+ newBlock.setDepth(prevBlock.getChildDepth());
+ }
+ }
+ prevBlock = newBlock;
+ } else {
+ // add to task list
+ that.addTask(popup);
+ }
+ // after action
+ if (afterAction && afterAction != '') {
+ switch (afterAction) {
+ case 'run':
+ popup.run();
+ break;
+ case 'add':
+ popup.run(false);
+ break;
+ case 'open':
+ that.openPopup(popup);
+ break;
+ }
+ }
+ } else {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'Not implemented or available menu. (menu id: '+menuConfig.id+')');
+ }
+ });
+ // focus created popup
+ if (parentBlock && parentBlock.isGroup) {
+ parentBlock.focusItem();
+ // scroll to new block
+ that.boardFrame.scrollToBlock(parentBlock);
+ }
+ that.boardFrame.hideLoadingBar();
+ that.boardFrame.reloadBlockList();
+ }, function (err) {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'Error on creating popup (' + err.message + ')');
+ that.boardFrame.hideLoadingBar();
+ });
+ } catch(err) {
+ that.boardFrame.hideLoadingBar();
+ }
+ }
+
+ getChildState(parentId, position) {
+ let menuId = parentId;
+ let childBlocks = [];
+ switch (menuId) {
+ case 'lgDef_class':
+ childBlocks = [
+ {
+ menuId: 'lgDef_def',
+ menuState: {
+ blockState: {
+ isGroup: false
+ },
+ taskState: {
+ v1: '__init__',
+ v2: [{ param: 'self' }]
+ }
+ }
+ },
+ {
+ menuId: 'lgExe_code',
+ menuState: {
+ blockState: {
+ isGroup: false
+ }
+ }
+ },
+ {
+ menuId: 'lgCtrl_return',
+ menuState: {
+ blockState: {
+ isGroup: false
+ }
+ }
+ }
+ ]
+ break;
+ case 'lgDef_def':
+ childBlocks = [
+ {
+ menuId: 'lgExe_code',
+ menuState: {
+ blockState: {
+ isGroup: false
+ }
+ }
+ },
+ {
+ menuId: 'lgCtrl_return',
+ menuState: {
+ blockState: {
+ isGroup: false
+ }
+ }
+ }
+ ]
+ break;
+ case 'lgCtrl_for':
+ case 'lgCtrl_while':
+ case 'lgCtrl_if':
+ case 'lgCtrl_try':
+ case 'lgCtrl_elif':
+ case 'lgCtrl_except':
+ case 'lgCtrl_else':
+ case 'lgCtrl_finally':
+ childBlocks = [
+ {
+ menuId: 'lgCtrl_pass',
+ menuState: {
+ blockState: {
+ isGroup: false
+ }
+ }
+ }
+ ];
+ break;
+ }
+
+ for (let i = 0; i < childBlocks.length; i++) {
+ childBlocks[i]['blockType'] = 'block';
+ childBlocks[i]['position'] = position + i + 1;
+ childBlocks[i]['createChild'] = false;
+ }
+ return childBlocks;
+ }
+
+ /**
+ * Open Popupcomponent
+ * @param {PopupComponent} component
+ */
+ openPopup(component) {
+ if (component && component.isHidden()) {
+ // hide other tasks
+ this.hideAllPopup();
+
+ // open it and focus it
+ this._nowTask = component;
+ component.open();
+ }
+ }
+
+ /**
+ * Close PopupComponent
+ * @param {PopupComponent} component
+ */
+ closePopup(component) {
+ if (component) {
+ component.close();
+ }
+ }
+
+ /**
+ * Apply task to board block
+ * - remove from taskList
+ * - add to blockList
+ * - close component
+ * @param {PopupComponent} component
+ */
+ applyPopup(component) {
+ let taskType = component.getTaskType();
+ if (taskType == 'task') {
+ // remove from taskBlockList
+ this.removeTask(component);
+ component.close();
+
+ this.createPopup([{
+ menuId: component.id,
+ menuState: {
+ taskState: component.state
+ },
+ blockType: 'block'
+ }]);
+ // close and focus block (sequence is important)
+ // newBlock.focusItem();
+ } else {
+ component.close();
+ }
+ // render board frame
+ this.boardFrame.reloadBlockList();
+ }
+
+ /**
+ * Remove PopupComponent
+ * @param {PopupComponent} component
+ */
+ removePopup(component) {
+ if (component) {
+ if (component.getTaskType() === 'block') {
+ // block
+ this.boardFrame.removeBlock(component);
+ } else {
+ // task
+ this.removeTask(component);
+ }
+ component.remove();
+ } else {
+ vpLog.display(VP_LOG_TYPE.WARN, 'Component to remove is not available.');
+ }
+ }
+
+ /**
+ * Focus on PopupComponent
+ * @param {PopupComponent} component
+ */
+ focusPopup(component) {
+ component.focus();
+ this.setFocusedPage(component);
+ }
+
+ /**
+ * Blur PopupComponent
+ * @param {PopupComponent} component
+ */
+ blurPopup(component=null) {
+ if (component && (component instanceof PopupComponent)) {
+ component.blur();
+ } else {
+ // blur all
+ $('.vp-popup-frame').removeClass('vp-focused');
+ }
+ this.setFocusedPage(null);
+ }
+
+ /**
+ * Hide all PopupComponent
+ */
+ hideAllPopup() {
+ this.taskPopupList.forEach(task => {
+ task.hide();
+ });
+ this.blockPopupList.forEach(task => {
+ task.hide();
+ });
+ }
+
+ /**
+ * Focus popup page using its object
+ * @param {PopupComponent} focusedPage
+ */
+ setFocusedPage(focusedPage) {
+ this.focusedPage = focusedPage;
+ }
+
+ checkDuplicatedTask(menuId) {
+ // find on task list
+ let dupTask = this._taskPopupList.filter(t => t && menuId === t.id);
+ if (dupTask.length > 0) {
+ return dupTask[0];
+ }
+ // not available
+ return null;
+ }
+
+ addBlock(option, position=-1, blockState={}) {
+ this._blockPopupList.push(option);
+ let newBlock = this.boardFrame.addBlock(option, position, blockState);
+ // render board frame
+ this.boardFrame.reloadBlockList();
+ return newBlock;
+ }
+
+ /**
+ * Add task to task list and render TaskBar
+ * @param {PopupComponent} option
+ */
+ addTask(option) {
+ this._taskPopupList.push(option);
+
+ // render task bar
+ this.menuFrame.renderTaskBar(this._taskPopupList);
+ }
+
+ /**
+ * Remove task from task list and render TaskBar
+ * @param {PopupComponent} option
+ */
+ removeTask(option) {
+ const taskToRemove = this._taskPopupList.find(function(item) { return item.uuid === option.uuid });
+ const taskIdx = this._taskPopupList.indexOf(taskToRemove);
+ if (taskIdx > -1) {
+ taskToRemove.removeBlock();
+ this._taskPopupList.splice(taskIdx, 1);
+ // render task bar
+ this.menuFrame.renderTaskBar(this._taskPopupList);
+ } else {
+ vpLog.display(VP_LOG_TYPE.WARN, 'No option task to remove');
+ }
+ }
+
+ //========================================================================
+ // Getter Setter
+ //========================================================================
+ get menuFrame() {
+ return this._menuFrame;
+ }
+
+ get boardFrame() {
+ return this._boardFrame;
+ }
+
+ get focusedPage() {
+ return this._focusedPage;
+ }
+
+ set focusedPage(component) {
+ this._focusedPage = component;
+ }
+
+ get taskPopupList() {
+ return this._taskPopupList;
+ }
+
+ get blockPopupList() {
+ return this._blockPopupList;
+ }
+
+
+ }
+
+
+
+ return MainFrame;
+});
+
+/* End of file */
\ No newline at end of file
diff --git a/resource/matplotlib/plot/__init__.py b/js/__init__.py
similarity index 100%
rename from resource/matplotlib/plot/__init__.py
rename to js/__init__.py
diff --git a/js/board/Block.js b/js/board/Block.js
new file mode 100644
index 00000000..2f773934
--- /dev/null
+++ b/js/board/Block.js
@@ -0,0 +1,440 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : Block.js
+ * Author : Black Logic
+ * Note : Render block
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 09. 13
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] Block
+//============================================================================
+define([
+ '../com/component/Component',
+ '../com/com_String'
+], function(Component, com_String) {
+ 'use strict';
+
+ const BLOCK_PADDING = 20;
+
+ /**
+ * @class Block
+ * @constructor
+ */
+ class Block extends Component {
+ constructor(parent, state) {
+ super($('.vp-board-body'), state, { parent: parent });
+ /**
+ * state.task: PopupComponent
+ * prop.parent : BoardFrame
+ */
+ }
+
+ _getMenuGroupRootType(idx=1) {
+ // ex) visualpython - apps - frame -> apps
+ let path = this.state.task.path;
+ let pathList = path.split(' - ');
+ return pathList[idx];
+ }
+
+ _getMenuGroupType() {
+ // ex) visualpython - apps - frame -> apps-frame
+ let path = this.state.task.path;
+ let pathList = path.split(' - ');
+ return pathList.slice(1, pathList.length - 1).join('-');
+ }
+
+ _init() {
+ this.state = {
+ isGroup: true,
+ leftHolderHeight: 0,
+ depth: 0,
+ blockNumber: $('.vp-block.vp-block-group').length + 1,
+ elseFlag: false,
+ finallyFlag: false,
+ ...this.state
+ }
+
+ this.task = this.state.task;
+ this.task.setTaskItem(this);
+
+ this.classes = [];
+ }
+
+ _bindEvent() {
+ let that = this;
+ // hover run button click event
+ $(this.wrapSelector('.vp-block-num-info')).on('click', function(evt) {
+ // run popup
+ that.prop.parent.runBlock(that);
+ });
+ // click event - emphasize TaskItem & open/hide PopupComponent
+ $(this.wrapSelector('.vp-block-header')).single_double_click(function(evt) {
+ /** single click */
+ let isFocused = $(that.wrapSelector()).hasClass('vp-focus');
+ if (isFocused) {
+ that.blurItem();
+ } else {
+ that.focusItem();
+ }
+ evt.stopPropagation();
+ }, function(evt) {
+ /** double click */
+ let isSorting = $(that.wrapSelector()).hasClass('ui-sortable-helper');
+ if (isSorting) {
+ return;
+ }
+ let isHidden = that.task.isHidden();
+ if (isHidden) {
+ that.openPopup();
+ } else {
+ that.closePopup();
+ }
+ });
+ // right click event - blockMenu
+ $(this.wrapSelector()).on('contextmenu', function(evt) {
+ that.prop.parent.showMenu(that, evt.pageX, evt.pageY);
+ evt.preventDefault();
+ });
+
+ // click event - block button
+ $(this.wrapSelector('.vp-block-button')).on('click', function(evt) {
+ let menu = $(this).data('menu');
+ switch (menu) {
+ case 'else':
+ that.prop.parent.toggleElseBlock(that);
+ break;
+ case 'elif':
+ that.prop.parent.addElifBlock(that);
+ break;
+ case 'except':
+ that.prop.parent.addExceptBlock(that);
+ break;
+ case 'finally':
+ that.prop.parent.toggleFinallyBlock(that);
+ break;
+ }
+ that.focusItem();
+ })
+ }
+
+ checkTaskAvailable() {
+ return this.task != undefined;
+ }
+
+ getColorLabel() {
+ let root = this._getMenuGroupRootType();
+ let label = root;
+ switch(root) {
+ case 'logic':
+ let subRoot = this._getMenuGroupRootType(2);
+ label = 'logic-' + subRoot;
+ break;
+ case 'library':
+ break;
+ }
+
+ return label;
+ }
+
+ /**
+ * Generate template
+ */
+ template() {
+ let blockType = this.blockType;
+ let taskId = this.id;
+ let header = this.header;
+ let isGroup = this.isGroup;
+ let depth = this.depth;
+ let blockNumber = this.blockNumber;
+ let addedClass = this.classes.join(' ');
+
+ var page = new com_String();
+ page.appendFormatLine('} 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);
+ });
+ }
+
+ /**
+ * pageId wrap selector
+ * @param {string} pageId vp-option-page의 uuid값
+ * @param {string} query
+ */
+ var vp_wrapSelector = function(pageId, query) {
+ return '.'+pageId+' '+query;
+ }
+
+ /**
+ * Get tag value
+ * @param {string} pageId vp-option-page uuid
+ * @param {*} obj
+ * @returns {string} tag's value
+ */
+ var vp_getTagValue = function(pageId, obj) {
+ var value = '';
+ switch (obj.component) {
+ case 'input_multi':
+ value = $(vp_wrapSelector(pageId, '#'+obj.name)).val();
+ break;
+ case 'option_radio':
+ var input = $(vp_wrapSelector(pageId, "input[name='"+obj.name+"']:checked")).val();
+ // same as default
+ if (input == obj.default) break;
+ value = input;
+ break;
+ case 'option_checkbox':
+ var checked = $(vp_wrapSelector(pageId, "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 'option_select':
+ var input = $(vp_wrapSelector(pageId, '#'+obj.name)).val();
+ // same as default
+ if (input == obj.default) break;
+ value = input;
+ break;
+ case 'var_select':
+ value = $(vp_wrapSelector(pageId, '#'+obj.name)).val();
+ break;
+ case 'var_multi':
+ value = $(vp_wrapSelector(pageId, '#'+obj.name)).val();
+ break;
+ case 'table':
+ case 'file':
+ default:
+ var input = $(vp_wrapSelector(pageId, '#'+obj.name)).val();
+ // same as default
+ if (input == obj.default) break;
+ value = input;
+ }
+ return value;
+ }
+
+ /**
+ * Generate code
+ * @param {string} pageId vp-option-page uuid
+ * @param {Object} package
+ * @param {string} etcOptions [optional] userOptionCode addition ex) ", test='TEST'"
+ * @returns {string} generated code / if error, null
+ */
+ var vp_codeGenerator = function(pageId, package, etcOptions = '') {
+ var code = package.code;
+
+ try {
+ // input codes
+ package.input && package.input.forEach(function(v, i) {
+ var val = vp_getTagValue(pageId, v);
+ var id = '${' + v.name + '}';
+ if (val == undefined || val == ''){
+ if (v.required == undefined || 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 = code.split(id).join(val);
+ }
+ });
+
+ // option codes
+ var opt_params = ``;
+ package.variable && package.variable.forEach(function(v, i) {
+ var val = vp_getTagValue(pageId, v);
+ // if required
+ if (val == undefined || val == ''){
+ if (v.required == true) {
+ // throw new Error("'" + v.label + "' is required.");
+ }
+ }
+ else {
+ // text quotation
+ if (v.type == 'text') {
+ val = "'"+val+"'";
+ }
+ opt_params += ', '+v.name+'='+val;
+ }
+ })
+ code = code.split('${v}').join(opt_params);
+
+ // output codes
+ package.output && package.output.forEach(function(v, i) {
+ var val = vp_getTagValue(pageId, v);
+ var id = '${' + v.name + '}'
+ if (val == undefined || val == ''){
+ if (v.required == true) {
+ // throw new Error("'" + v.label + "' is required.");
+ }
+ // if no output exists, replace it
+ code = code.split(id).join('');
+ code = code.split(' = ').join('');
+ } else {
+ // text quotation
+ if (v.type == 'text') {
+ val = "'"+val+"'";
+ }
+ code = code.split(id).join(val);
+ }
+ });
+
+ // additional userOptionCode
+ code = code.split('${etc}').join(etcOptions);
+
+ // () prevent code: (, ${v})
+ code = code.split('(, ').join('(');
+
+ // show_result
+ if (_VP_SHOW_RESULT && package.output && package.output.length > 0) {
+ var outputVariable = vp_getTagValue(pageId, package.output[0]);
+ if (outputVariable != '') {
+ code += '\n'+ outputVariable
+ }
+ }
+
+ } catch (e) {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'com_generator code generation error ' + e.message);
+ return null;
+ }
+ return code;
+ }
+
+ /**
+ * Bind columns source function
+ * @param {object} pageThis
+ * @param {object} target
+ * @param {array} columnInputIdList
+ * Usage :
+ * $(document).on('change', this.wrapSelector('#dataframe_tag_id'), function() {
+ * pdGen.vp_bindColumnSource(that, this, ['column_input_id']);
+ * });
+ */
+ var vp_bindColumnSource = function(pageThis, target, columnInputIdList) {
+ var 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.setNormalFilter(false);
+ suggestInputX.setValue($(pageThis.wrapSelector('#' + columnInputId)).val());
+ $(pageThis.wrapSelector('#' + 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);
+
+ 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();
+ });
+ });
+ }
+ } catch (e) {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'com_generator - bindColumnSource: not supported data type. ', e);
+ }
+ });
+
+ }
+
+ 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
new file mode 100644
index 00000000..e13bf9db
--- /dev/null
+++ b/js/com/com_interface.js
@@ -0,0 +1,62 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_interface.js
+ * Author : Black Logic
+ * Note : Interface for jupyter
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 09. 16
+ * Change Date :
+ */
+define([
+ './com_util',
+ './com_String'
+], function(com_util, com_String) {
+
+ var getSelectedCell = function() {
+ return Jupyter.notebook.get_selected_index();
+ }
+
+ var insertCell = function(type, command, exec=true, sigNum=-1) {
+ var selectedIndex = getSelectedCell();
+ var targetCell = Jupyter.notebook.insert_cell_below(type, selectedIndex);
+
+ // Add signature
+ if (type == 'code' && sigNum >= 0) {
+ command = com_util.formatString('# VisualPython [{0}]\n', sigNum) + command
+ }
+ targetCell.set_text(command);
+ Jupyter.notebook.select_next();
+ if (exec) {
+ switch (type) {
+ case "markdown":
+ targetCell.render();
+ break;
+ case "code":
+ default:
+ targetCell.execute();
+ }
+ }
+ // move to executed cell
+ Jupyter.notebook.scroll_to_cell(Jupyter.notebook.get_selected_index());
+
+ com_util.renderSuccessMessage('Your code has been executed');
+ }
+
+ var enableOtherShortcut = function() {
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'enable short cut');
+ Jupyter.notebook.keyboard_manager.enable();
+ }
+
+ var disableOtherShortcut = function() {
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'disable short cut');
+ Jupyter.notebook.keyboard_manager.disable();
+ }
+
+ return {
+ insertCell: insertCell,
+ enableOtherShortcut: enableOtherShortcut,
+ disableOtherShortcut: disableOtherShortcut,
+
+ };
+});
\ No newline at end of file
diff --git a/src/common/vpMakeDom.js b/js/com/com_makeDom.js
similarity index 75%
rename from src/common/vpMakeDom.js
rename to js/com/com_makeDom.js
index 9e194cf3..3bdb27cd 100644
--- a/src/common/vpMakeDom.js
+++ b/js/com/com_makeDom.js
@@ -1,40 +1,54 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_makeDom.js
+ * Author : Black Logic
+ * Note : Make DOM data
+ * License : GPLv3 (GNU General Public License v3.0)
+ * Date : 2021. 08. 14
+ * Change Date :
+ */
+
+//============================================================================
+// Make DOM data
+//============================================================================
define([
- 'require'
- , 'jquery'
- , 'nbextensions/visualpython/src/common/constant'
- , 'nbextensions/visualpython/src/common/StringBuilder'
- , 'nbextensions/visualpython/src/common/vpCommon'
-], function (requirejs, $, vpConst, sb, vpCommon) {
-
- /** @private
- @param {object} attribute
- */
+ 'vp_base/js/com/com_Const',
+ 'vp_base/js/com/com_util'
+], function (com_Const, com_util) {
+ 'use strict'
+
+ //========================================================================
+ // External call function
+ //========================================================================
+ /**
+ * Parse attributes
+ * @param {object} attribute
+ */
var parseAttributes = function( attribute ) {
var attributeStr = ``;
var attributes = Object.entries(attribute);
var text = ``;
for ( var i = 0; i < attributes.length; i++ ) {
- /**validation
- * attribute 속성의 key 값이 반드시 style, class, id, text, value, type, placeholder이거나 data_ 로 시작해야만 파싱한다
- */
- if ( attributes[i][0] !== "style" || attributes[i][0] !== "class" ||
- attributes[i][0] !== "id" || attributes[i][0] !== "text"|| attributes[i][0] !== "type"
- || attributes[i][0] !== "placeholder"
- || attributes[i][0] !== "value"
- || attributes[i][0].indexOf("data") === -1) {
-
+ // validation
+ // attribute(key): style, class, id, text, value, type, placeholder, data_
+ if ( attributes[i][0] !== 'style' || attributes[i][0] !== 'class' ||
+ attributes[i][0] !== 'id' || attributes[i][0] !== 'text' ||
+ attributes[i][0] !== 'type' || attributes[i][0] !== 'placeholder' ||
+ attributes[i][0] !== 'value' || attributes[i][0].indexOf('data') === -1) {
} else {
continue;
}
- /** attributes가 text일 경우 */
- if (attributes[i][0] === "text") {
+
+ // text
+ if (attributes[i][0] === 'text') {
text = attributes[i][1];
continue;
}
- /** attributes가 style일 경우 */
- if ( attributes[i][0] === "style") {
+ // style
+ if ( attributes[i][0] === 'style') {
/** color: black 의 경우 처럼
* style을 지정하고 뒤에 ;을 붙이지 않는 경우,
@@ -90,7 +104,7 @@ define([
if (attributes[i][0].indexOf('_') !== -1) {
var cursor = 0;
while (attributes[i][0][cursor] !== undefined ) {
- if(attributes[i][0][cursor] === "_") {
+ if(attributes[i][0][cursor] === '_') {
attributes[i][0] = attributes[i][0].slice(0,cursor) + '-' + attributes[i][0].slice(cursor + 1,attributes[i][0].length);
}
cursor++;
@@ -102,40 +116,43 @@ define([
attributeStr += `'${attributes[i][1]}'`;
}
return {
- attributeStr
- , text
+ attributeStr, text
}
}
/**
* 이하 attribute를 파라미터로 받는 함수 사용 예제
- var input = renderInput({
- class: `vp vp-label`
- , id: `vp_label`
- , style: `width: 90%;
- min-width: 50px; max-width: 100px;
- margin: 8px; position: relative; display: block; font-size: 12px;
- overflow: hidden; border-width: 0; outline: none; border-radius: 2px;
- box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
- color: black; transition: background-color .3s`;
- , text:"Lavel"
- , placeholder:"입력 바랍니다"
- , type: "text"
- , data_input_id:"3"
- , data_capations_id: "lang"
- });
- */
+ * var input = renderInput({
+ * class: `vp vp-label`
+ * , id: `vp_label`
+ * , style: `width: 90%;
+ * min-width: 50px; max-width: 100px;
+ * margin: 8px; position: relative; display: block; font-size: 12px;
+ * overflow: hidden; border-width: 0; outline: none; border-radius: 2px;
+ * box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+ * color: black; transition: background-color .3s`;
+ * , text:"Lavel"
+ * , placeholder:"입력 바랍니다"
+ * , type: "text"
+ * , data_input_id:"3"
+ * , data_capations_id: "lang"
+ * });
+ */
+
/**
- @param {object} attribute
- */
+ * Rendering input
+ * @param {object} attribute
+ */
var renderInput = function(attribute) {
var { attributeStr } = parseAttributes(attribute);
return $(`
`);
}
+
/**
- @param {object} attribute
- */
+ * Renderig button
+ * @param {object} attribute
+ */
var renderButton = function(attribute) {
var { attributeStr, text } = parseAttributes(attribute);
return $(` `);
}
+ /**
+ * Rendering Li
+ * @param {object} attribute
+ */
var renderLi = function(attribute) {
var { attributeStr, text } = parseAttributes(attribute);
return $(`
@@ -228,6 +260,7 @@ define([
}
/**
+ * Rendering custom confirm modal
* @param {Object} option
* title : CustomConfirmModal창의 타이틀 제목을 정한다. 정하지 않을시 default는 `선택 하시겠습니까?`
* confirm_text : 예스 버튼의 text를 정한다. 정하지 않을시 default는 '예'
@@ -239,7 +272,7 @@ define([
*/
var renderCustomConfirmModal = function(option, confirmFunction, cancelFunction) {
// load css
- vpCommon.loadCss( Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + "common/customConfirm.css" );
+ com_util.loadCss( com_Const.STYLE_PATH + 'common/customConfirm.css' );
var title = `Would you like to choose?`;
var confirm = `Yes`;
var cancel = `No`;
@@ -322,17 +355,19 @@ define([
});
}
-
return {
- renderInput: renderInput
- , renderSelectBox: renderSelectBox
- , renderButton: renderButton
- , renderOption: renderOption
- , renderSpan: renderSpan
- , renderLabel: renderLabel
- , renderDiv: renderDiv
- , renderUi: renderUi
- , renderLi: renderLi
- , renderCustomConfirmModal: renderCustomConfirmModal
+ renderInput: renderInput,
+ renderSelectBox: renderSelectBox,
+ renderButton: renderButton,
+ renderOption: renderOption,
+ renderSpan: renderSpan,
+ renderLabel: renderLabel,
+ renderDiv: renderDiv,
+ renderUi: renderUi,
+ renderLi: renderLi,
+ renderCustomConfirmModal: renderCustomConfirmModal
}
-});
\ No newline at end of file
+
+}); /* function, define */
+
+/* End of file */
diff --git a/js/com/com_util.js b/js/com/com_util.js
new file mode 100644
index 00000000..2088cfcb
--- /dev/null
+++ b/js/com/com_util.js
@@ -0,0 +1,234 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_util.js
+ * Author : Black Logic
+ * Note : Common utility function
+ * License : GPLv3 (GNU General Public License v3.0)
+ * Date : 2021. 08. 14
+ * Change Date :
+ */
+
+//============================================================================
+// Common utility function
+//============================================================================
+define([
+ 'vp_base/js/com/com_String'
+], function (com_String) {
+ 'use strict'
+
+ //========================================================================
+ // Define variable
+ //========================================================================
+ let isAPIListRunCode = true;
+
+ //========================================================================
+ // Internal call function
+ //========================================================================
+ /**
+ * check duplicate variable name
+ * @param {string} varName
+ */
+ var _checkVariableNameDuplicate = function(varName) {
+ // TODO: varName duplicate check
+ return true;
+ }
+
+ //========================================================================
+ // External call function
+ //========================================================================
+ /**
+ * Generate uuid
+ * @returns {String} uuid
+ */
+ var getUUID = function() {
+ return 'u' + ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
+ (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+ );
+ }
+
+ /**
+ * append css on global
+ * @param {String} url style url
+ */
+ var loadCss = function(url) {
+ var link = document.createElement('link');
+ link.type = 'text/css';
+ link.rel = 'stylesheet';
+ link.href = require.toUrl(url);
+ document.getElementsByTagName('head')[0].appendChild(link);
+ }
+
+ /**
+ * VisualPython container selector (jquery selector)
+ * @returns vp top container selector
+ */
+ var getVPContainer = function() {
+ return '#vp_wrapper';
+ }
+
+ /**
+ * wrap selector
+ * @param {String} selector selector
+ * @returns wraped selecotr
+ */
+ var wrapSelector = function(selector = '') {
+ var sbSelector = new com_String();
+ var cnt = arguments.length;
+ // no more selector
+ if (cnt < 2) {
+ sbSelector.appendFormat('{0} {1}', getVPContainer(), selector);
+ } else {
+ sbSelector.appendFormat('{0}', getVPContainer());
+ for (var idx = 0; idx < cnt; idx++) {
+ sbSelector.appendFormat(' {0}', arguments[idx]);
+ }
+ }
+ return sbSelector.toString();
+ }
+
+ /**
+ * add variable and trigger event
+ * @param {string} varName variable name
+ * @param {string} varType variable type
+ * @returns if return 0 when success, -1 when variable name duplicate
+ */
+ var addVariable = function(varName, varType) {
+ // varName check duplicate
+ if (_checkVariableNameDuplicate) {
+ return -1;
+ } else {
+ events.trigger('add-variable.vp-wrapper', {'varName': varName, 'varType': varType});
+ return 0;
+ }
+ }
+
+ /**
+ * format simple string
+ */
+ var formatString = function() {
+ var cnt = arguments.length;
+ if (cnt < 2)
+ return arguments[0];
+
+ var str = arguments[0];
+ for (var idx = 1; idx < cnt; idx++)
+ str = str.replace('{' + (idx - 1) + '}', arguments[idx]);
+
+ return str;
+ }
+
+ /**
+ * Convert to string format if not numeric
+ * @param {*} code
+ * @returns
+ */
+ var convertToStr = function(code) {
+ if (!$.isNumeric(code)) {
+ if (code.includes("'")) {
+ code = `"${code}"`;
+ } else {
+ code = `'${code}'`;
+ }
+ }
+ return code;
+ }
+
+ /**
+ * Remove head's script(css, js)
+ * @param {string} scriptName
+ */
+ var removeHeadScript = function(scriptName) {
+ for (let i = 0; i < document.querySelector('head').children.length; i++){
+ if (document.querySelector('head').children[i].outerHTML.includes(scriptName)) {
+ document.querySelector('head').removeChild(document.querySelector('head').children[i]);
+ }
+ }
+ }
+
+ /**
+ * alertModal html과 css를 load하는 함수
+ * alertModal은 주로 코드 생성 validation message로 사용한다
+ * @param {string} titleStr
+ */
+ var renderAlertModal = function(titleStr) {
+ require(['vp_base/js/com/component/AlertModal'], function(AlertModal) {
+ new AlertModal(titleStr);
+ });
+ }
+
+ /**
+ * Show success message on the top right of the screen
+ * @param {string} titleStr
+ */
+ var renderSuccessMessage = function(titleStr) {
+ require(['vp_base/js/com/component/SuccessMessage'], function(SuccessMessage) {
+ new SuccessMessage(titleStr);
+ });
+ }
+
+ /**
+ * setIsAPIListRunCode
+ */
+ var setIsAPIListRunCode = function(isAPIListRunCode_param) {
+ isAPIListRunCode = isAPIListRunCode_param;
+ }
+
+ /**
+ * getIsAPIListRunCode
+ */
+ var getIsAPIListRunCode = function() {
+ return isAPIListRunCode;
+ }
+
+ /**
+ * kernelExecute
+ */
+ var kernelExecute = function(command, isSilent = false, isStoreHistory = !isSilent, isStopOnError = true) {
+ return new Promise((resolve, reject) => {
+ Jupyter.notebook.kernel.execute(
+ command,
+ {
+ iopub: {
+ output: function(msg) {
+ // msg.content.data['text/plain']
+ resolve(msg.content.data);
+ }
+ }
+ },
+ { silent: isSilent, store_history: isStoreHistory, stop_on_error: isStopOnError }
+ );
+ });
+ }
+
+ /**
+ * Convert string(include html text) to safe string to display
+ * @param {String} text
+ * @returns
+ */
+ var safeString = function(text) {
+ return String(text).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
+ }
+
+ return {
+ getUUID: getUUID,
+ loadCss: loadCss,
+ getVPContainer: getVPContainer,
+ wrapSelector: wrapSelector,
+ addVariable: addVariable,
+ formatString: formatString,
+ convertToStr: convertToStr,
+
+ removeHeadScript: removeHeadScript,
+ renderAlertModal: renderAlertModal,
+ renderSuccessMessage: renderSuccessMessage,
+
+ setIsAPIListRunCode: setIsAPIListRunCode,
+ getIsAPIListRunCode: getIsAPIListRunCode,
+ kernelExecute: kernelExecute,
+ safeString: safeString
+ }
+
+}); /* function, define */
+
+/* End of file */
diff --git a/js/com/component/AlertModal.js b/js/com/component/AlertModal.js
new file mode 100644
index 00000000..4321fa47
--- /dev/null
+++ b/js/com/component/AlertModal.js
@@ -0,0 +1,55 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : AlertModal.js
+ * Author : Black Logic
+ * Note : AlertModal
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 18
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] AlertModal
+//============================================================================
+define([
+ 'text!vp_base/html/component/alertModal.html!strip',
+ 'css!vp_base/css/component/alertModal.css',
+ 'vp_base/js/com/component/Component'
+], function(msgHtml, msgCss, Component) {
+
+ /**
+ * AlertModal
+ */
+ class AlertModal extends Component {
+ constructor(title) {
+ super($('body'), { title: title });
+ }
+
+ _bindEvent() {
+ let that = this;
+ // click ok button
+ $(this.wrapSelector('.vp-alertModal-yes')).click( function() {
+ that.remove();
+ });
+ }
+
+ template() {
+ return msgHtml;
+ }
+
+ render() {
+ super.render();
+
+ // set title
+ $(this.wrapSelector('.vp-alertModal-titleStr')).text(this.state.title);
+ }
+
+ remove() {
+ $(this.wrapSelector()).remove();
+ }
+
+ }
+
+ return AlertModal;
+});
\ No newline at end of file
diff --git a/js/com/component/Component.js b/js/com/component/Component.js
new file mode 100644
index 00000000..de66b443
--- /dev/null
+++ b/js/com/component/Component.js
@@ -0,0 +1,134 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : Component.js
+ * Author : Black Logic
+ * Note : Base Components for rendering objects
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 18
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] Component
+//============================================================================
+define([
+ '../com_util',
+ '../com_String'
+], function(com_util, com_String) {
+ 'use strict';
+
+ //========================================================================
+ // Declare class
+ //========================================================================
+ /**
+ * Component
+ */
+ class Component {
+ constructor($target, state, prop={}) {
+ // get uuid
+ this._uuid = com_util.getUUID();
+ // target, pageDom query objects
+ this.$target = $target;
+ this.$pageDom = '';
+ // save state
+ this.state = state;
+ // save propagation from parent
+ this.prop = prop;
+
+ this._init();
+ this.load();
+ this.render();
+ }
+
+ wrapSelector(selector='') {
+ var sbSelector = new com_String();
+ var cnt = arguments.length;
+ if (cnt < 2) {
+ // if there's no more arguments
+ sbSelector.appendFormat(".{0} {1}", this.uuid, selector);
+ } else {
+ // if there's more arguments
+ sbSelector.appendFormat(".{0}", this.uuid);
+ for (var idx = 0; idx < cnt; idx++) {
+ sbSelector.appendFormat(" {0}", arguments[idx]);
+ }
+ }
+ return sbSelector.toString();
+ }
+
+ _init() {
+ /** Implementation needed */
+ }
+
+ _unbindEvent() {
+ /** Implementation needed */
+ }
+
+ _bindEvent() {
+ /** Implementation needed */
+ }
+
+ /**
+ * Load data
+ */
+ load() {
+ /** Implementation needed */
+ }
+
+ /**
+ * Generate template using states and return
+ * @returns template DOM
+ */
+ template() {
+ /** Implementation needed */
+ return '';
+ }
+
+ /**
+ * Render component under $target
+ * @param {*} inplace overwrite under $target
+ */
+ render(inplace=false) {
+ this.$pageDom = $(this.template());
+ this.$pageDom.addClass(this.uuid);
+
+ let $page = this.$target.find('.' + this.uuid);
+ if ($page.length > 0) {
+ // if exists, replace it
+ $page.replaceWith(this.$pageDom);
+ } else {
+ // if not exists...
+ if (inplace) {
+ // replace under $target
+ this.$target.html(this.$pageDom);
+ } else {
+ // append under $target
+ this.$target.append(this.$pageDom);
+ }
+ }
+
+ this._bindEvent();
+ }
+
+ equals(component) {
+ if (!component) {
+ return false;
+ }
+ return component.uuid === this.uuid;
+ }
+
+ get uuid() {
+ return this._uuid;
+ }
+
+ getTag() {
+ return $(this.wrapSelector());
+ }
+ }
+
+ return Component;
+
+});
+
+/* End of file */
\ No newline at end of file
diff --git a/js/com/component/FileNavigation.js b/js/com/component/FileNavigation.js
new file mode 100644
index 00000000..719c4361
--- /dev/null
+++ b/js/com/component/FileNavigation.js
@@ -0,0 +1,825 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : FileNavigation.js
+ * Author : Black Logic
+ * Note : File navigation
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 18
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] FileNavigation
+//============================================================================
+define([
+ 'text!vp_base/html/fileNavigation.html!strip',
+ 'css!vp_base/css/fileNavigation.css',
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/com_util',
+ 'vp_base/js/com/component/Component'
+], function(fileNaviHtml, fileNaviCss, com_String, com_util, Component) {
+ // Temporary constant data
+ const NAVIGATION_DIRECTION_TYPE = {
+ TOP: 0,
+ TO: 1,
+ PREV: 2,
+ INIT: 3
+ }
+
+ /**
+ * FileNavigation
+ * ------------------------------------------------------
+ * How to use:
+ * // create file navigation
+ * let fileNavigation = new FileNavigation({
+ * type: 'open',
+ * extensions: ['vp'],
+ * finish: function(filesPath, status, error) {
+ * // Do something after selecting file
+ * }});
+ * // open file navigation
+ * fileNavigation.open();
+ */
+ class FileNavigation extends Component {
+ /**
+ * Constructor
+ * @param {Object} state { type, extensions, finish ... }
+ */
+ constructor(state) {
+ super($('#site'), state);
+ /**
+ * state.type open / save
+ * state.extensions extensions list
+ * state.finish callback function after selection
+ * - example form : function (filesPath, status, error) { }
+ * - filesPath : list => list of Object [ { file: '', path: '' } ]
+ * - status : boolean => true for success / false for error
+ * - error : if there's error, return its content
+ * ---------------------------------------------------------------
+ * state.fileName (optional on save type) pre-defined fileName
+ * state.multiSelect (optional)
+ * state.showAll (optional)
+ */
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'FileNavigation created', state);
+ }
+ _init() {
+ super._init();
+ /** Write codes executed before rendering */
+ // state types
+ this.state = {
+ direction: '',
+ type: '', // open / save
+ filePath: '',
+ fileName: '',
+ extensions: [], // extensions list ex) png, jpg, gif
+ multiSelect: false, // multi selection
+ showAll: false, // show other extension files also
+ finsh: null, // callback after selection
+ ...this.state
+ };
+
+ this.pathStackPointer = -1;
+ this.pathStack = [];
+ this.currentFileList = [];
+
+ this.pathState = {
+ currentPath: '',
+ baseFolder: '', // root folder name
+ relativeDir: '', // root folder name
+ baseDir: '', // sliced current dir
+ notebookFolder: '', // base folder of jupyter notebook path
+ notebookPath: '' // jupyter notebook path
+ }
+ }
+
+ _bindEvent() {
+ var that = this;
+ // Close file navigation
+ $(this.wrapSelector('.fileNavigationPage-closedBtn')).on('click', function() {
+ that.close();
+ });
+
+ // Click sidebar
+ $(this.wrapSelector('.fnp-sidebar-menu')).click(function(event) {
+ $('.fnp-sidebar-menu').removeClass('selected');
+ $(this).addClass('selected');
+
+ var pathType = $(this).attr('data-path');
+ var dirObj = {
+ direction: NAVIGATION_DIRECTION_TYPE.TO,
+ destDir: '/'
+ }
+ switch (pathType) {
+ case '/':
+ dirObj.direction = NAVIGATION_DIRECTION_TYPE.TOP;
+ break;
+ case 'desktop':
+ dirObj.destDir = "_vp_get_desktop_path()";
+ dirObj.useFunction = true;
+ break;
+ case 'documents':
+ dirObj.destDir = "_vp_get_documents_path()";
+ dirObj.useFunction = true;
+ break;
+ case 'downloads':
+ dirObj.destDir = "_vp_get_downloads_path()";
+ dirObj.useFunction = true;
+ break;
+ case 'userid':
+ dirObj.destDir = "_vp_get_userprofile_path()";
+ dirObj.useFunction = true;
+ break;
+ }
+ that.getFileList(dirObj);
+ });
+
+ // Click next(>) directory
+ $(this.wrapSelector('.fileNavigationPage-btn-next')).click(() => {
+ if (that.pathStackPointer + 1 == that.pathStack.length) {
+ com_util.renderAlertModal('No next directory');
+ return;
+ }
+
+ // initialize sidebar-menu selection
+ $('.fnp-sidebar-menu').removeClass('selected');
+
+ // get next path stack
+ that.pathStackPointer++;
+ var nextData = that.pathStack[that.pathStackPointer];
+
+ var dirObj = {
+ direction: NAVIGATION_DIRECTION_TYPE.PREV,
+ destDir: nextData
+ }
+ that.getFileList(dirObj);
+ });
+
+ // Click prev(<) directory
+ $(this.wrapSelector('.fileNavigationPage-btn-prev')).click(() => {
+ if (that.pathStackPointer <= 0) {
+ com_util.renderAlertModal('No previous directory');
+ return;
+ }
+
+ // initialize sidebar-menu selection
+ $('.fnp-sidebar-menu').removeClass('selected');
+
+ // get prev path stack
+ that.pathStackPointer--;
+ var popedData = that.pathStack[that.pathStackPointer];
+
+ var dirObj = {
+ direction: NAVIGATION_DIRECTION_TYPE.PREV,
+ destDir: popedData
+ }
+ that.getFileList(dirObj);
+ });
+ }
+
+ template() {
+ /** Implement generating template */
+ return fileNaviHtml;
+ }
+
+ /**
+ * Render file item
+ * @param {*} fileState { name, type, path, size, atime, mtime }
+ * - name : file name
+ * - type : file type (dir / file)
+ * - path : file absolute path
+ * - size : size (format: 0.0{B,KB,MB,...})
+ * - atime : created time (format: YYYY-MM-DD HH:mm)
+ * - mtime : modified time (format: YYYY-MM-DD HH:mm)
+ */
+ renderFileItem(fileState) {
+ let {
+ name, type, path, size, atime, mtime
+ } = fileState;
+ let that = this;
+
+ let directoryLi = $(' ');
+ let directoryI = $(`
+ ${name}
+ `);
+ directoryI.click(function() {
+ if (type == 'dir') {
+ var dirObj = {
+ direction: NAVIGATION_DIRECTION_TYPE.TO,
+ destDir: path
+ }
+
+ // initialize sidebar-menu selection
+ $('.fnp-sidebar-menu').removeClass('selected');
+
+ that.getFileList(dirObj);
+ } else {
+ let dirPath = that.makeNewCurrRelativePath();
+ let extension = name.substring(name.lastIndexOf('.') + 1);
+ let allowExtensionList = that.state.extensions;
+ // if it is not allowed extension
+ if (!allowExtensionList.includes(extension)) {
+ // TODO: alert
+ //vpCommon.renderAlertModal('Not supported file type');
+ return;
+ }
+
+ that.handleSelectFile(dirPath, name);
+ }
+ });
+
+ directoryLi.append(directoryI);
+ return directoryLi;
+ }
+
+ /**
+ * render file list based on currentFileList
+ */
+ renderFileList() {
+ let that = this;
+ let fileList = this.currentFileList;
+ // clear body
+ $(this.wrapSelector('.fileNavigationPage-body')).html('');
+ // render file items
+ let dirArr = [];
+ let fileArr = [];
+ fileList && fileList.forEach((file, idx) => {
+ if (idx == 0) return;
+ let fileTag = that.renderFileItem(file);
+ if (file.type == 'dir') {
+ dirArr.push(fileTag);
+ } else {
+ fileArr.push(fileTag);
+ }
+ });
+
+ var fileNavigationPageUl = $(``);
+ // render folder first
+ dirArr.forEach(dirTag => {
+ fileNavigationPageUl.append(dirTag);
+ });
+
+ fileArr.forEach(fileTag => {
+ fileNavigationPageUl.append(fileTag);
+ });
+
+ $(this.wrapSelector('.fileNavigationPage-body')).append(fileNavigationPageUl);
+
+ }
+
+ renderNowLocation() {
+ let that = this;
+ let currentRelativePathStr = this.pathState.relativeDir;
+ let currentDirStr = this.pathState.currentPath;
+ var notebookPathStr = this.pathState.notebookPath;
+ var notebookPathStrLength = notebookPathStr.length;
+ var baseFolder = this.pathState.baseFolder;
+ var notebookFolder = this.pathState.notebookFolder;
+ /** render current path */
+ var currentRelativePathStrArray = currentRelativePathStr.split('/');
+
+ if (baseFolder === notebookFolder && Jupyter.notebook.notebook_path.indexOf('/') === -1) {
+ var index = currentRelativePathStrArray.indexOf(baseFolder)
+ if (index >= 0) {
+ currentRelativePathStrArray.splice(index,1);
+ }
+ }
+
+ var currentRelativePathDomElement = $(`
-
+ 
+
@@ -17,15 +16,15 @@
+
Export
- 
+ 
+
@@ -17,15 +16,15 @@
-
-
+
+ 
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/html/m_apps/subset.html b/html/m_apps/subset.html
new file mode 100644
index 00000000..a4adff2b
--- /dev/null
+++ b/html/m_apps/subset.html
@@ -0,0 +1,92 @@
+
+
+
\ No newline at end of file
diff --git a/src/file_io/variables.html b/html/m_apps/variable.html
similarity index 53%
rename from src/file_io/variables.html
rename to html/m_apps/variable.html
index a6a45dc1..d87006f3 100644
--- a/src/file_io/variables.html
+++ b/html/m_apps/variable.html
@@ -1,4 +1,15 @@
-
- 
+
-
-
-
+
+ 
-
+
+
+
+
Variable Detail - -
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/css/pandas/__init__.py b/html/m_library/__init__.py
similarity index 100%
rename from css/pandas/__init__.py
rename to html/m_library/__init__.py
diff --git a/html/m_library/libraryComponent.html b/html/m_library/libraryComponent.html
new file mode 100644
index 00000000..91c98eb4
--- /dev/null
+++ b/html/m_library/libraryComponent.html
@@ -0,0 +1,21 @@
+
+
Variable Name
- 
+
|
Data Type |
|---|
Variable Detail - -
+
+
\ No newline at end of file
diff --git a/html/mainFrame.html b/html/mainFrame.html
new file mode 100644
index 00000000..fc355cd6
--- /dev/null
+++ b/html/mainFrame.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+ Required Input & Output
+
+
+
+
+
+
+ Additional Options
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/menuFrame.html b/html/menuFrame.html
new file mode 100644
index 00000000..b6b357ea
--- /dev/null
+++ b/html/menuFrame.html
@@ -0,0 +1,51 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/html/popupComponent.html b/html/popupComponent.html
new file mode 100644
index 00000000..503efe92
--- /dev/null
+++ b/html/popupComponent.html
@@ -0,0 +1,67 @@
+
+
+
+ 
+
+
+
+
+
\ No newline at end of file
diff --git a/resource/VisualPython_Logo.svg b/img/VisualPython_Logo.svg
similarity index 100%
rename from resource/VisualPython_Logo.svg
rename to img/VisualPython_Logo.svg
diff --git a/css/python/__init__.py b/img/__init__.py
similarity index 100%
rename from css/python/__init__.py
rename to img/__init__.py
diff --git a/css/python_common/__init__.py b/img/apps/__init__.py
similarity index 100%
rename from css/python_common/__init__.py
rename to img/apps/__init__.py
diff --git a/resource/apps/apps.svg b/img/apps/apps.svg
similarity index 100%
rename from resource/apps/apps.svg
rename to img/apps/apps.svg
diff --git a/resource/apps/apps_bind.svg b/img/apps/apps_bind.svg
similarity index 100%
rename from resource/apps/apps_bind.svg
rename to img/apps/apps_bind.svg
diff --git a/resource/apps/apps_chart.svg b/img/apps/apps_chart.svg
similarity index 100%
rename from resource/apps/apps_chart.svg
rename to img/apps/apps_chart.svg
diff --git a/resource/apps/apps_file.svg b/img/apps/apps_file.svg
similarity index 100%
rename from resource/apps/apps_file.svg
rename to img/apps/apps_file.svg
diff --git a/resource/apps/apps_frame.svg b/img/apps/apps_frame.svg
similarity index 100%
rename from resource/apps/apps_frame.svg
rename to img/apps/apps_frame.svg
diff --git a/resource/apps/apps_groupby.svg b/img/apps/apps_groupby.svg
similarity index 100%
rename from resource/apps/apps_groupby.svg
rename to img/apps/apps_groupby.svg
diff --git a/resource/apps/apps_import.svg b/img/apps/apps_import.svg
similarity index 100%
rename from resource/apps/apps_import.svg
rename to img/apps/apps_import.svg
diff --git a/resource/apps/apps_instance.svg b/img/apps/apps_instance.svg
similarity index 100%
rename from resource/apps/apps_instance.svg
rename to img/apps/apps_instance.svg
diff --git a/resource/apps/apps_markdown.svg b/img/apps/apps_markdown.svg
similarity index 100%
rename from resource/apps/apps_markdown.svg
rename to img/apps/apps_markdown.svg
diff --git a/resource/apps/apps_profiling.svg b/img/apps/apps_profiling.svg
similarity index 100%
rename from resource/apps/apps_profiling.svg
rename to img/apps/apps_profiling.svg
diff --git a/resource/apps/apps_pymupdf.svg b/img/apps/apps_pymupdf.svg
similarity index 100%
rename from resource/apps/apps_pymupdf.svg
rename to img/apps/apps_pymupdf.svg
diff --git a/resource/apps/apps_reshape.svg b/img/apps/apps_reshape.svg
similarity index 100%
rename from resource/apps/apps_reshape.svg
rename to img/apps/apps_reshape.svg
diff --git a/resource/apps/apps_snippets.svg b/img/apps/apps_snippets.svg
similarity index 100%
rename from resource/apps/apps_snippets.svg
rename to img/apps/apps_snippets.svg
diff --git a/resource/apps/apps_subset.svg b/img/apps/apps_subset.svg
similarity index 100%
rename from resource/apps/apps_subset.svg
rename to img/apps/apps_subset.svg
diff --git a/resource/apps/apps_timeseries.svg b/img/apps/apps_timeseries.svg
similarity index 100%
rename from resource/apps/apps_timeseries.svg
rename to img/apps/apps_timeseries.svg
diff --git a/resource/apps/apps_variable.svg b/img/apps/apps_variable.svg
similarity index 100%
rename from resource/apps/apps_variable.svg
rename to img/apps/apps_variable.svg
diff --git a/resource/apps/apps_white.svg b/img/apps/apps_white.svg
similarity index 100%
rename from resource/apps/apps_white.svg
rename to img/apps/apps_white.svg
diff --git a/resource/arrow_left.svg b/img/arrow_left.svg
similarity index 100%
rename from resource/arrow_left.svg
rename to img/arrow_left.svg
diff --git a/resource/arrow_left_double.svg b/img/arrow_left_double.svg
similarity index 100%
rename from resource/arrow_left_double.svg
rename to img/arrow_left_double.svg
diff --git a/resource/arrow_right.svg b/img/arrow_right.svg
similarity index 100%
rename from resource/arrow_right.svg
rename to img/arrow_right.svg
diff --git a/resource/arrow_right_double.svg b/img/arrow_right_double.svg
similarity index 100%
rename from resource/arrow_right_double.svg
rename to img/arrow_right_double.svg
diff --git a/resource/arrow_short_up.svg b/img/arrow_short_up.svg
similarity index 100%
rename from resource/arrow_short_up.svg
rename to img/arrow_short_up.svg
diff --git a/resource/bold.svg b/img/bold.svg
similarity index 100%
rename from resource/bold.svg
rename to img/bold.svg
diff --git a/resource/__init__.py b/img/chart/__init__.py
similarity index 100%
rename from resource/__init__.py
rename to img/chart/__init__.py
diff --git a/resource/matplotlib/plot/bar.png b/img/chart/bar.png
similarity index 100%
rename from resource/matplotlib/plot/bar.png
rename to img/chart/bar.png
diff --git a/resource/matplotlib/plot/barh.png b/img/chart/barh.png
similarity index 100%
rename from resource/matplotlib/plot/barh.png
rename to img/chart/barh.png
diff --git a/resource/matplotlib/plot/boxplot.png b/img/chart/boxplot.png
similarity index 100%
rename from resource/matplotlib/plot/boxplot.png
rename to img/chart/boxplot.png
diff --git a/resource/pandas/cmap/Accent.JPG b/img/chart/cmap/Accent.JPG
similarity index 100%
rename from resource/pandas/cmap/Accent.JPG
rename to img/chart/cmap/Accent.JPG
diff --git a/resource/pandas/cmap/Dark2.JPG b/img/chart/cmap/Dark2.JPG
similarity index 100%
rename from resource/pandas/cmap/Dark2.JPG
rename to img/chart/cmap/Dark2.JPG
diff --git a/resource/pandas/cmap/Paired.JPG b/img/chart/cmap/Paired.JPG
similarity index 100%
rename from resource/pandas/cmap/Paired.JPG
rename to img/chart/cmap/Paired.JPG
diff --git a/resource/pandas/cmap/Pastel1.JPG b/img/chart/cmap/Pastel1.JPG
similarity index 100%
rename from resource/pandas/cmap/Pastel1.JPG
rename to img/chart/cmap/Pastel1.JPG
diff --git a/resource/pandas/cmap/Pastel2.JPG b/img/chart/cmap/Pastel2.JPG
similarity index 100%
rename from resource/pandas/cmap/Pastel2.JPG
rename to img/chart/cmap/Pastel2.JPG
diff --git a/resource/pandas/cmap/Set1.JPG b/img/chart/cmap/Set1.JPG
similarity index 100%
rename from resource/pandas/cmap/Set1.JPG
rename to img/chart/cmap/Set1.JPG
diff --git a/resource/pandas/cmap/Set2.JPG b/img/chart/cmap/Set2.JPG
similarity index 100%
rename from resource/pandas/cmap/Set2.JPG
rename to img/chart/cmap/Set2.JPG
diff --git a/resource/pandas/cmap/Set3.JPG b/img/chart/cmap/Set3.JPG
similarity index 100%
rename from resource/pandas/cmap/Set3.JPG
rename to img/chart/cmap/Set3.JPG
diff --git a/resource/api_block/__init__.py b/img/chart/cmap/__init__.py
similarity index 100%
rename from resource/api_block/__init__.py
rename to img/chart/cmap/__init__.py
diff --git a/resource/pandas/cmap/cividis.JPG b/img/chart/cmap/cividis.JPG
similarity index 100%
rename from resource/pandas/cmap/cividis.JPG
rename to img/chart/cmap/cividis.JPG
diff --git a/resource/pandas/cmap/inferno.JPG b/img/chart/cmap/inferno.JPG
similarity index 100%
rename from resource/pandas/cmap/inferno.JPG
rename to img/chart/cmap/inferno.JPG
diff --git a/resource/pandas/cmap/magma.JPG b/img/chart/cmap/magma.JPG
similarity index 100%
rename from resource/pandas/cmap/magma.JPG
rename to img/chart/cmap/magma.JPG
diff --git a/resource/pandas/cmap/plasma.JPG b/img/chart/cmap/plasma.JPG
similarity index 100%
rename from resource/pandas/cmap/plasma.JPG
rename to img/chart/cmap/plasma.JPG
diff --git a/resource/pandas/cmap/tab10.JPG b/img/chart/cmap/tab10.JPG
similarity index 100%
rename from resource/pandas/cmap/tab10.JPG
rename to img/chart/cmap/tab10.JPG
diff --git a/resource/pandas/cmap/tab20.JPG b/img/chart/cmap/tab20.JPG
similarity index 100%
rename from resource/pandas/cmap/tab20.JPG
rename to img/chart/cmap/tab20.JPG
diff --git a/resource/pandas/cmap/tab20b.JPG b/img/chart/cmap/tab20b.JPG
similarity index 100%
rename from resource/pandas/cmap/tab20b.JPG
rename to img/chart/cmap/tab20b.JPG
diff --git a/resource/pandas/cmap/tab20c.JPG b/img/chart/cmap/tab20c.JPG
similarity index 100%
rename from resource/pandas/cmap/tab20c.JPG
rename to img/chart/cmap/tab20c.JPG
diff --git a/resource/pandas/cmap/viridis.JPG b/img/chart/cmap/viridis.JPG
similarity index 100%
rename from resource/pandas/cmap/viridis.JPG
rename to img/chart/cmap/viridis.JPG
diff --git a/resource/matplotlib/plot/contour.png b/img/chart/contour.png
similarity index 100%
rename from resource/matplotlib/plot/contour.png
rename to img/chart/contour.png
diff --git a/resource/matplotlib/plot/errorbar.png b/img/chart/errorbar.png
similarity index 100%
rename from resource/matplotlib/plot/errorbar.png
rename to img/chart/errorbar.png
diff --git a/resource/matplotlib/plot/hexbin.png b/img/chart/hexbin.png
similarity index 100%
rename from resource/matplotlib/plot/hexbin.png
rename to img/chart/hexbin.png
diff --git a/resource/matplotlib/plot/hist.png b/img/chart/hist.png
similarity index 100%
rename from resource/matplotlib/plot/hist.png
rename to img/chart/hist.png
diff --git a/resource/matplotlib/plot/imshow.png b/img/chart/imshow.png
similarity index 100%
rename from resource/matplotlib/plot/imshow.png
rename to img/chart/imshow.png
diff --git a/resource/apps/__init__.py b/img/chart/marker/__init__.py
similarity index 100%
rename from resource/apps/__init__.py
rename to img/chart/marker/__init__.py
diff --git a/resource/matplotlib/m00.png b/img/chart/marker/m00.png
similarity index 100%
rename from resource/matplotlib/m00.png
rename to img/chart/marker/m00.png
diff --git a/resource/matplotlib/m01.png b/img/chart/marker/m01.png
similarity index 100%
rename from resource/matplotlib/m01.png
rename to img/chart/marker/m01.png
diff --git a/resource/matplotlib/m02.png b/img/chart/marker/m02.png
similarity index 100%
rename from resource/matplotlib/m02.png
rename to img/chart/marker/m02.png
diff --git a/resource/matplotlib/m03.png b/img/chart/marker/m03.png
similarity index 100%
rename from resource/matplotlib/m03.png
rename to img/chart/marker/m03.png
diff --git a/resource/matplotlib/m04.png b/img/chart/marker/m04.png
similarity index 100%
rename from resource/matplotlib/m04.png
rename to img/chart/marker/m04.png
diff --git a/resource/matplotlib/m05.png b/img/chart/marker/m05.png
similarity index 100%
rename from resource/matplotlib/m05.png
rename to img/chart/marker/m05.png
diff --git a/resource/matplotlib/m06.png b/img/chart/marker/m06.png
similarity index 100%
rename from resource/matplotlib/m06.png
rename to img/chart/marker/m06.png
diff --git a/resource/matplotlib/m07.png b/img/chart/marker/m07.png
similarity index 100%
rename from resource/matplotlib/m07.png
rename to img/chart/marker/m07.png
diff --git a/resource/matplotlib/m08.png b/img/chart/marker/m08.png
similarity index 100%
rename from resource/matplotlib/m08.png
rename to img/chart/marker/m08.png
diff --git a/resource/matplotlib/m09.png b/img/chart/marker/m09.png
similarity index 100%
rename from resource/matplotlib/m09.png
rename to img/chart/marker/m09.png
diff --git a/resource/matplotlib/m10.png b/img/chart/marker/m10.png
similarity index 100%
rename from resource/matplotlib/m10.png
rename to img/chart/marker/m10.png
diff --git a/resource/matplotlib/m11.png b/img/chart/marker/m11.png
similarity index 100%
rename from resource/matplotlib/m11.png
rename to img/chart/marker/m11.png
diff --git a/resource/matplotlib/m12.png b/img/chart/marker/m12.png
similarity index 100%
rename from resource/matplotlib/m12.png
rename to img/chart/marker/m12.png
diff --git a/resource/matplotlib/m13.png b/img/chart/marker/m13.png
similarity index 100%
rename from resource/matplotlib/m13.png
rename to img/chart/marker/m13.png
diff --git a/resource/matplotlib/m14.png b/img/chart/marker/m14.png
similarity index 100%
rename from resource/matplotlib/m14.png
rename to img/chart/marker/m14.png
diff --git a/resource/matplotlib/m15.png b/img/chart/marker/m15.png
similarity index 100%
rename from resource/matplotlib/m15.png
rename to img/chart/marker/m15.png
diff --git a/resource/matplotlib/m16.png b/img/chart/marker/m16.png
similarity index 100%
rename from resource/matplotlib/m16.png
rename to img/chart/marker/m16.png
diff --git a/resource/matplotlib/m17.png b/img/chart/marker/m17.png
similarity index 100%
rename from resource/matplotlib/m17.png
rename to img/chart/marker/m17.png
diff --git a/resource/matplotlib/m18.png b/img/chart/marker/m18.png
similarity index 100%
rename from resource/matplotlib/m18.png
rename to img/chart/marker/m18.png
diff --git a/resource/matplotlib/m19.png b/img/chart/marker/m19.png
similarity index 100%
rename from resource/matplotlib/m19.png
rename to img/chart/marker/m19.png
diff --git a/resource/matplotlib/m20.png b/img/chart/marker/m20.png
similarity index 100%
rename from resource/matplotlib/m20.png
rename to img/chart/marker/m20.png
diff --git a/resource/matplotlib/m23.png b/img/chart/marker/m23.png
similarity index 100%
rename from resource/matplotlib/m23.png
rename to img/chart/marker/m23.png
diff --git a/resource/matplotlib/m24.png b/img/chart/marker/m24.png
similarity index 100%
rename from resource/matplotlib/m24.png
rename to img/chart/marker/m24.png
diff --git a/resource/matplotlib/plot/pie.png b/img/chart/pie.png
similarity index 100%
rename from resource/matplotlib/plot/pie.png
rename to img/chart/pie.png
diff --git a/resource/matplotlib/plot/plot.png b/img/chart/plot.png
similarity index 100%
rename from resource/matplotlib/plot/plot.png
rename to img/chart/plot.png
diff --git a/resource/matplotlib/plot/scatter.png b/img/chart/scatter.png
similarity index 100%
rename from resource/matplotlib/plot/scatter.png
rename to img/chart/scatter.png
diff --git a/resource/matplotlib/plot/stackplot.png b/img/chart/stackplot.png
similarity index 100%
rename from resource/matplotlib/plot/stackplot.png
rename to img/chart/stackplot.png
diff --git a/resource/checkbox.svg b/img/checkbox.svg
similarity index 100%
rename from resource/checkbox.svg
rename to img/checkbox.svg
diff --git a/resource/checkbox_gray.svg b/img/checkbox_gray.svg
similarity index 100%
rename from resource/checkbox_gray.svg
rename to img/checkbox_gray.svg
diff --git a/resource/checkbox_square.svg b/img/checkbox_square.svg
similarity index 100%
rename from resource/checkbox_square.svg
rename to img/checkbox_square.svg
diff --git a/resource/chevron_big_down.svg b/img/chevron_big_down.svg
similarity index 100%
rename from resource/chevron_big_down.svg
rename to img/chevron_big_down.svg
diff --git a/resource/chevron_big_right.svg b/img/chevron_big_right.svg
similarity index 100%
rename from resource/chevron_big_right.svg
rename to img/chevron_big_right.svg
diff --git a/img/circle_play(actived).svg b/img/circle_play(actived).svg
new file mode 100644
index 00000000..766658e7
--- /dev/null
+++ b/img/circle_play(actived).svg
@@ -0,0 +1,5 @@
+
diff --git a/img/circle_play(unactived).svg b/img/circle_play(unactived).svg
new file mode 100644
index 00000000..2bc8c83d
--- /dev/null
+++ b/img/circle_play(unactived).svg
@@ -0,0 +1,5 @@
+
diff --git a/resource/close_big.svg b/img/close_big.svg
similarity index 100%
rename from resource/close_big.svg
rename to img/close_big.svg
diff --git a/resource/close_small.svg b/img/close_small.svg
similarity index 100%
rename from resource/close_small.svg
rename to img/close_small.svg
diff --git a/resource/code-fill.svg b/img/code-fill.svg
similarity index 100%
rename from resource/code-fill.svg
rename to img/code-fill.svg
diff --git a/resource/delete.svg b/img/delete.svg
similarity index 100%
rename from resource/delete.svg
rename to img/delete.svg
diff --git a/resource/dot_menu.svg b/img/dot_menu.svg
similarity index 100%
rename from resource/dot_menu.svg
rename to img/dot_menu.svg
diff --git a/img/folder_open.svg b/img/folder_open.svg
new file mode 100644
index 00000000..368a0c54
--- /dev/null
+++ b/img/folder_open.svg
@@ -0,0 +1,5 @@
+
diff --git a/resource/font-size-2.svg b/img/font-size-2.svg
similarity index 100%
rename from resource/font-size-2.svg
rename to img/font-size-2.svg
diff --git a/img/hamburger.svg b/img/hamburger.svg
new file mode 100644
index 00000000..9f12a088
--- /dev/null
+++ b/img/hamburger.svg
@@ -0,0 +1,5 @@
+
diff --git a/resource/symbol.png b/img/icon.png
similarity index 100%
rename from resource/symbol.png
rename to img/icon.png
diff --git a/resource/image-line.svg b/img/image-line.svg
similarity index 100%
rename from resource/image-line.svg
rename to img/image-line.svg
diff --git a/resource/indent-increase.svg b/img/indent-increase.svg
similarity index 100%
rename from resource/indent-increase.svg
rename to img/indent-increase.svg
diff --git a/resource/italic.svg b/img/italic.svg
similarity index 100%
rename from resource/italic.svg
rename to img/italic.svg
diff --git a/resource/link-m.svg b/img/link-m.svg
similarity index 100%
rename from resource/link-m.svg
rename to img/link-m.svg
diff --git a/resource/list-ordered.svg b/img/list-ordered.svg
similarity index 100%
rename from resource/list-ordered.svg
rename to img/list-ordered.svg
diff --git a/resource/list-unordered.svg b/img/list-unordered.svg
similarity index 100%
rename from resource/list-unordered.svg
rename to img/list-unordered.svg
diff --git a/resource/logo.png b/img/logo.png
similarity index 100%
rename from resource/logo.png
rename to img/logo.png
diff --git a/img/minimize.svg b/img/minimize.svg
new file mode 100644
index 00000000..9981fb5b
--- /dev/null
+++ b/img/minimize.svg
@@ -0,0 +1,3 @@
+
diff --git a/resource/plus.svg b/img/plus.svg
similarity index 100%
rename from resource/plus.svg
rename to img/plus.svg
diff --git a/resource/refresh.svg b/img/refresh.svg
similarity index 100%
rename from resource/refresh.svg
rename to img/refresh.svg
diff --git a/img/search.svg b/img/search.svg
new file mode 100644
index 00000000..578250de
--- /dev/null
+++ b/img/search.svg
@@ -0,0 +1,5 @@
+
diff --git a/resource/separator.svg b/img/separator.svg
similarity index 100%
rename from resource/separator.svg
rename to img/separator.svg
diff --git a/resource/matplotlib/__init__.py b/img/snippets/__init__.py
similarity index 100%
rename from resource/matplotlib/__init__.py
rename to img/snippets/__init__.py
diff --git a/resource/snippets/checked.svg b/img/snippets/checked.svg
similarity index 100%
rename from resource/snippets/checked.svg
rename to img/snippets/checked.svg
diff --git a/resource/snippets/duplicate.svg b/img/snippets/duplicate.svg
similarity index 100%
rename from resource/snippets/duplicate.svg
rename to img/snippets/duplicate.svg
diff --git a/resource/snippets/export.svg b/img/snippets/export.svg
similarity index 100%
rename from resource/snippets/export.svg
rename to img/snippets/export.svg
diff --git a/resource/snippets/more.svg b/img/snippets/more.svg
similarity index 100%
rename from resource/snippets/more.svg
rename to img/snippets/more.svg
diff --git a/resource/snippets/run.svg b/img/snippets/run.svg
similarity index 100%
rename from resource/snippets/run.svg
rename to img/snippets/run.svg
diff --git a/img/snippets/save_gray.svg b/img/snippets/save_gray.svg
new file mode 100644
index 00000000..28b15d6f
--- /dev/null
+++ b/img/snippets/save_gray.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/resource/snippets/save_orange.svg b/img/snippets/save_orange.svg
similarity index 100%
rename from resource/snippets/save_orange.svg
rename to img/snippets/save_orange.svg
diff --git a/resource/snippets/sort.svg b/img/snippets/sort.svg
similarity index 100%
rename from resource/snippets/sort.svg
rename to img/snippets/sort.svg
diff --git a/resource/snippets/unchecked.svg b/img/snippets/unchecked.svg
similarity index 100%
rename from resource/snippets/unchecked.svg
rename to img/snippets/unchecked.svg
diff --git a/img/toggleNote.svg b/img/toggleNote.svg
new file mode 100644
index 00000000..658906bf
--- /dev/null
+++ b/img/toggleNote.svg
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/img/toggleNote_hide.svg b/img/toggleNote_hide.svg
new file mode 100644
index 00000000..e59fc6f6
--- /dev/null
+++ b/img/toggleNote_hide.svg
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/resource/play-mini-fill(dark grey).svg b/img/tri_down_fill_dark.svg
similarity index 100%
rename from resource/play-mini-fill(dark grey).svg
rename to img/tri_down_fill_dark.svg
diff --git a/resource/play-mini-fill-1(dark grey).svg b/img/tri_right_fill_dark.svg
similarity index 100%
rename from resource/play-mini-fill-1(dark grey).svg
rename to img/tri_right_fill_dark.svg
diff --git a/resource/unfold_more.svg b/img/unfold_more.svg
similarity index 100%
rename from resource/unfold_more.svg
rename to img/unfold_more.svg
diff --git a/js/MainFrame.js b/js/MainFrame.js
new file mode 100644
index 00000000..d380397f
--- /dev/null
+++ b/js/MainFrame.js
@@ -0,0 +1,715 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : MainFrame.js
+ * Author : Black Logic
+ * Note : Render and load main frame
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 09. 13
+ * Change Date :
+ */
+
+//============================================================================
+// Load main frame
+//============================================================================
+define([
+ 'text!vp_base/html/mainFrame.html!strip',
+ 'css!vp_base/css/mainFrame.css',
+
+ // load module
+ './com/com_Config',
+ './com/com_Const',
+ './com/com_Event',
+ './com/component/PopupComponent',
+ './menu/MenuFrame',
+ './board/BoardFrame'
+], function(vpHtml, vpCss, com_Config, com_Const, com_Event, PopupComponent,
+ MenuFrame, BoardFrame) {
+ 'use strict';
+
+ // visualpython minimum width
+ const {
+ JUPYTER_HEADER_SPACING,
+ VP_MIN_WIDTH,
+ MENU_MIN_WIDTH,
+ BOARD_MIN_WIDTH,
+ MENU_BOARD_SPACING
+ } = com_Config;
+
+ const {
+ TOOLBAR_BTN_INFO,
+ JUPYTER_NOTEBOOK_ID,
+ JUPYTER_HEADER_ID
+ } = com_Const;
+
+ class MainFrame {
+ constructor() {
+ this.$pageDom = null;
+ this._menuFrame = null;
+ this._boardFrame = null;
+ this._nowTask = null;
+ this._focusedPage = null;
+
+ // Task bar options list
+ this._taskPopupList = [];
+ this._blockPopupList = [];
+
+ // page info
+ this.minWidth = VP_MIN_WIDTH;
+ this.width = VP_MIN_WIDTH;
+ }
+ //========================================================================
+ // Internal call function
+ //========================================================================
+ /**
+ * Bind event for inner components under vp_wrapper
+ */
+ _bindEvent() {
+ var that = this;
+
+ // window resize event
+ $(window).resize(function(evt){
+ let jupyterHeadHeight = $('#' + JUPYTER_HEADER_ID).height();
+ let jupyterBodyHeight = $('#' + JUPYTER_NOTEBOOK_ID).height();
+
+ let vpWidth = $('#vp_wrapper')[0].getBoundingClientRect().width;
+ let vpHeight = $(window).height() - jupyterHeadHeight;
+
+ // $('#vp_wrapper').css( { height: vpHeight + 'px' });
+ that._resizeNotebook(vpWidth);
+ });
+
+ window.vpEvent = new com_Event(this);
+ }
+
+ /**
+ * Bind $.resizable event
+ * // TODO: get a param to re-position vp_wrapper to the left or right
+ */
+ _bindResizable() {
+ var that = this;
+
+ // get visualpython minimum width
+ // resizable setting
+ // $('#vp_wrapper').resizable('disable');
+ $('#vp_wrapper').resizable({
+ // alsoResize: '#vp_menuFrame',
+ helper: 'vp-wrapper-resizer',
+ handles: 'w',
+ // resizeHeight: false,
+ minWidth: this.minWidth,
+ // maxWidth: 0,
+ start: function(event, ui) {
+
+ },
+ resize: function(event, ui) {
+ // resize #vp_wrapper with currentWidth and resize jupyter area
+ var currentWidth = ui.size.width;
+ that._resizeVp(currentWidth);
+ },
+ stop: function(event, ui) {
+ $('#vp_wrapper').css({'left': '', 'height': ''});
+ }
+ });
+ }
+
+ _resizeVp(currentWidth) {
+ // calculate inner frame width
+ var menuWidth = $('#vp_menuFrame').width();
+ var boardWidth = 0;
+ var showBoard = $('#vp_boardFrame').is(':visible');
+ if (showBoard) {
+ boardWidth = currentWidth - menuWidth - MENU_BOARD_SPACING;
+ if (boardWidth < BOARD_MIN_WIDTH + MENU_BOARD_SPACING) {
+ boardWidth = BOARD_MIN_WIDTH;
+ menuWidth = currentWidth - (BOARD_MIN_WIDTH + MENU_BOARD_SPACING);
+ }
+ } else {
+ // resize menuWidth if board is hidden
+ menuWidth = currentWidth - MENU_BOARD_SPACING;
+ }
+ $('#vp_menuFrame').width(menuWidth);
+ $('#vp_boardFrame').width(boardWidth);
+
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'resizing wrapper to ', currentWidth, 'with', menuWidth, boardWidth);
+
+ $('#vp_wrapper').width(currentWidth);
+
+ // save current page info
+ vpConfig.setMetadata({
+ vp_position: { width: currentWidth },
+ vp_menu_width: menuWidth,
+ vp_note_width: boardWidth
+ });
+
+ this._resizeNotebook(currentWidth);
+ }
+
+ /**
+ * Resize jupyternotebook
+ */
+ _resizeNotebook(vpWidth) {
+ let baseWidth = $(window).width();
+
+ // manual padding between notebook and visualpython area
+ const DIV_PADDING = 2;
+ // if vp area is available, add padding
+ if (vpWidth > 0) {
+ vpWidth += DIV_PADDING;
+ }
+ // calculate notebook resizing width
+ let nbWidth = baseWidth - vpWidth;
+ let nbContainerWidth = nbWidth - 60;
+ // apply resized width
+ $('#' + JUPYTER_NOTEBOOK_ID).css({ 'width': nbWidth + 'px' });
+ $('#notebook-container').css({ 'width': nbContainerWidth + 'px' });
+ }
+
+ _getMenuGroupRootType(menu) {
+ // ex) visualpython - apps - frame
+ let path = menu.path;
+ let pathList = path.split(' - ');
+ return pathList[1];
+ }
+
+ //========================================================================
+ // External call function
+ //========================================================================
+ /**
+ * Load main frame
+ */
+ loadMainFrame() {
+ // load vp_wrapper into jupyter base
+ this.$pageDom = $(vpHtml);
+ $(this.$pageDom).prependTo(document.body);
+
+ // set vp width using metadata
+ let metadata = vpConfig.getMetadata();
+ let { vp_position, vp_note_display, vp_menu_width, vp_note_width } = metadata;
+ if (vp_position) {
+ $('#vp_wrapper').width(vp_position.width);
+ }
+
+ if (!vp_note_display) {
+ this.minWidth = MENU_MIN_WIDTH + MENU_BOARD_SPACING;
+ }
+
+ // resize jupyterNotebook area
+ let vpWidth = $('#vp_wrapper')[0].getBoundingClientRect().width;
+
+ // load menu & board
+ this._menuFrame = new MenuFrame($('#vp_wrapper'),
+ { vp_menu_width: vp_menu_width },
+ { parent: this }
+ );
+ this._boardFrame = new BoardFrame($('#vp_wrapper'),
+ { vp_note_display: vp_note_display, vp_note_width: vp_note_width },
+ { parent: this }
+ );
+
+ this._resizeNotebook(vpWidth);
+
+ // bind event
+ this._bindEvent();
+ this._bindResizable();
+
+ return this.$pageDom;
+ }
+
+ toggleVp() {
+ let vpDisplay = $('#vp_wrapper').is(':visible');
+ let vpWidth = $('#vp_wrapper')[0].clientWidth;
+
+ let metadata = vpConfig.getMetadata();
+ let { vp_position, vp_menu_width, vp_note_width } = metadata;
+ let newMetadata = { vp_section_display: !vpDisplay };
+ if (vpDisplay) {
+ // hide
+ vpWidth = 0;
+ $('#vp_wrapper').hide();
+ } else {
+ // show
+ vpWidth = vp_position.width;
+ if (vp_position.width == 0) {
+ vpWidth = (vp_menu_width + vp_note_width + MENU_BOARD_SPACING) + 'px';
+ newMetadata['vp_position'] = { width: vpWidth };
+ $('#vp_wrapper').css({ width: vpWidth });
+ }
+ $('#vp_wrapper').show();
+ }
+
+ // set current width
+ vpConfig.setMetadata(newMetadata);
+
+ this._resizeNotebook(vpWidth);
+
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'vp toggled');
+ }
+
+ openVp() {
+ $('#vp_wrapper').show();
+
+ let vpWidth = $('#vp_wrapper')[0].clientWidth;
+ this._resizeNotebook(vpWidth);
+
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'vp opened');
+ }
+
+ //========================================================================
+ // Child components control function
+ //========================================================================
+
+ toggleNote() {
+ let vpWidth = $('#vp_wrapper')[0].getBoundingClientRect().width;
+ let newVpWidth = vpWidth;
+ let menuWidth = $('#vp_menuFrame')[0].getBoundingClientRect().width;
+
+ let isNoteVisible = $('#vp_boardFrame').is(':visible');
+ if (isNoteVisible) {
+ // hide note
+ this.boardFrame.hide();
+ newVpWidth = menuWidth + MENU_BOARD_SPACING;
+ $('#vp_wrapper').width(newVpWidth);
+ $('#vp_wrapper').resizable({ minWidth: MENU_MIN_WIDTH + MENU_BOARD_SPACING });
+ this.menuFrame._unbindResizable();
+
+ } else {
+ // show note
+ this.boardFrame.show();
+ newVpWidth = vpWidth + BOARD_MIN_WIDTH + MENU_BOARD_SPACING;
+ $('#vp_wrapper').width(newVpWidth);
+ $('#vp_wrapper').resizable({ minWidth: VP_MIN_WIDTH });
+ this.menuFrame._bindResizable();
+ }
+ // save current page info
+ vpConfig.setMetadata({
+ // vp_note_display: !isNoteVisible, // save in boardFrame.show/hide()
+ vp_position: { width: newVpWidth },
+ vp_menu_width: menuWidth
+ });
+
+ // $('#vp_wrapper').trigger('resize');
+ this._resizeVp(newVpWidth);
+ }
+
+ /**
+ * Create popup
+ * @param {Array} popupStateList [{ menuId, menuState, blockType, position, createChild, afterAction }]
+ * - {String} menuId
+ * - {Object} menuState : { blockState, taskState }
+ * -------- optional parameters ---------------------------
+ * - {String} blockType : task / block
+ * - {int} position : 0 ~ n
+ * - {bool} createChild : true / false
+ * - {String} afterAction : run / add / open
+ */
+ createPopup(popupStateList) {
+ // set popup state's default values
+ let defaultPopupState = {
+ blockType: 'task',
+ position: this.blockPopupList.length,
+ createChild: true,
+ menuId: '',
+ menuState: {}, // taskState, blockState
+ afterAction: ''
+ };
+ let that = this;
+ let loadMenuList = []; // menu list to require
+ let loadStateList = []; // menu state list
+ // get menu configurations
+ for (let i=0; i
+
+ 
+
+
+
+
+
+
+ '
+ , isGroup?'vp-block-group':'', blockType, addedClass, depth*BLOCK_PADDING);
+ page.appendFormatLine('
');
+ return page.toString();
+ }
+
+ render() {
+ super.render();
+
+ $(this.wrapSelector()).data('block', this);
+ $(this.wrapSelector()).data('color', this.blockType);
+ $(this.wrapSelector()).data('name', this.name);
+ $(this.wrapSelector()).data('menu', this.id);
+
+ // emphasize it if its task is visible
+ if (!this.task.isHidden()) {
+ this.focusItem();
+ }
+
+ // if markdown, set its height to fit-content
+ if (this.id == 'apps_markdown') {
+ $(this.wrapSelector()).addClass('vp-block-markdown');
+ }
+
+ // if viewDepthNumber, show it
+ let viewDepthNumber = this.prop.parent.state.viewDepthNumber;
+ if (this.depth > 0 && viewDepthNumber) {
+ $(this.wrapSelector('.vp-block-depth-info')).css({ opacity: 1 });
+ }
+ }
+
+ //========================================================================
+ // Block control
+ //========================================================================
+
+ show() {
+ $(this.wrapSelector()).show();
+ }
+
+ hide() {
+ $(this.wrapSelector()).hide();
+ }
+
+ focusItem() {
+ this.prop.parent.blurAllblock();
+ $(this.wrapSelector()).addClass('vp-focus');
+ this.addClass('vp-focus');
+
+ this.getGroupedBlocks().forEach(block => {
+ block.focusChild();
+ });
+ }
+
+ blurItem() {
+ this.classes = [];
+ $(this.wrapSelector()).removeClass('vp-focus');
+ this.removeClass('vp-focus');
+
+ this.getGroupedBlocks().forEach(block => {
+ block.blurChild();
+ });
+ }
+
+ focusChild() {
+ $(this.wrapSelector()).addClass('vp-focus-child');
+ this.addClass('vp-focus-child');
+ }
+
+ blurChild() {
+ $(this.wrapSelector()).removeClass('vp-focus-child');
+ this.removeClass('vp-focus-child');
+ }
+
+ removeItem() {
+ $(this.wrapSelector()).remove();
+ }
+
+ addClass(className) {
+ this.classes.push(className);
+ }
+
+ removeClass(className) {
+ let idx = this.classes.indexOf(className);
+ this.classes.splice(idx, 1);
+ }
+
+ //========================================================================
+ // Popup control
+ //========================================================================
+ openPopup() {
+ // open task
+ this.focusItem();
+ $('#vp_wrapper').trigger({
+ type: 'open_option_page',
+ component: this.task
+ });
+ }
+
+ closePopup() {
+ // hide task if it's already opened
+ this.blurItem();
+ // close task
+ $('#vp_wrapper').trigger({
+ type: 'close_option_page'
+ });
+ }
+ //========================================================================
+ // Get Set methods
+ //========================================================================
+ get id() {
+ return this.task.id;
+ }
+ get name() {
+ return this.task.name;
+ }
+ get blockType() {
+ return this.getColorLabel();
+ }
+ get header() {
+ let header = this.name;
+ // if logic, show code
+ if (this._getMenuGroupRootType() == 'logic') {
+ header = this.task.generateCode();
+ }
+ if (this.id == 'apps_markdown') {
+ header = this.task.getPreview();
+ }
+ this.state.header = header;
+ return header;
+ }
+ get isGroup() {
+ return this.state.isGroup;
+ }
+ get isHeadBlock() {
+ return this.prop.parent.headBlocks.includes(this.id);
+ }
+ get isSubBlock() {
+ return this.prop.parent.subBlocks.includes(this.id);
+ }
+ get blockNumber() {
+ return this.state.blockNumber;
+ }
+ get depth() {
+ return this.state.depth;
+ }
+ get popup() {
+ return this.task;
+ }
+ canMakeChild() {
+ let innerList = [
+ 'lgDef_class', 'lgDef_def',
+ 'lgCtrl_for', 'lgCtrl_while', 'lgCtrl_if', 'lgCtrl_try',
+ 'lgCtrl_elif', 'lgCtrl_else', 'lgCtrl_except', 'lgCtrl_finally'
+ ];
+ if (innerList.includes(this.id)) {
+ return true;
+ }
+ return false;
+ }
+ getChildDepth() {
+ let depth = this.depth;
+ if (this.canMakeChild()) {
+ return depth + 1;
+ }
+ return depth;
+ }
+ /**
+ * Get head group block of this group
+ */
+ getGroupBlock() {
+ return this.prop.parent.getGroupBlock(this);
+ }
+ getGroupedBlocks() {
+ return this.prop.parent.getGroupedBlocks(this);
+ }
+ setHeader(text) {
+ this.state.header = text;
+ }
+ /**
+ * Set block's blockNumber
+ * @param {int} blockNumber
+ */
+ setNumber(blockNumber) {
+ this.state.blockNumber = blockNumber;
+ }
+ /**
+ * Set block's depth
+ * @param {int} depth
+ */
+ setDepth(depth) {
+ this.state.depth = depth;
+ }
+ /**
+ * Set block as group block
+ */
+ setGroupBlock() {
+ let depthDiff = 0 - this.state.depth;
+ this.state.isGroup = true;
+
+ // change grouped block's depth ( depth + 1 )
+ this.setGroupedBlocksState(block => { block.setDepth(block.depth + depthDiff)});
+ }
+ /**
+ * Set block as child block of given block
+ */
+ setChildBlock(newDepth) {
+ let depthDiff = newDepth - this.state.depth;
+ this.state.isGroup = false;
+
+ // change grouped block's depth ( depth + 1 )
+ this.setGroupedBlocksState(block => { block.setDepth(block.depth + depthDiff)});
+ }
+
+ /**
+ * Set grouped blocks state using setter function
+ * Example:
+ * block.setGroupedBlocksState(block => { block.setDepth(block.depth + 1)})
+ * @param {Function} setter
+ */
+ setGroupedBlocksState(setter) {
+ let groupedBlocks = this.getGroupedBlocks();
+ groupedBlocks.forEach(block => {
+ setter(block);
+ });
+ }
+
+ //========================================================================
+ // Block load/save
+ //========================================================================
+ toJson() {
+ let state = this.task.getState();
+ // delete config info
+ delete state['config'];
+ let jsonBlock = {
+ isGroup: this.isGroup,
+ depth: this.depth,
+ blockNumber: this.blockNumber,
+ taskId: this.id,
+ taskState: state
+ };
+ return jsonBlock;
+ }
+
+ fromJson(jsonObject) {
+ let {
+ isGroup, depth, blockNumber, taskId, taskState
+ } = obj;
+ this.state = {
+ isGroup: isGroup,
+ depth: depth,
+ blockNumber: blockNumber,
+ ...taskState
+ };
+ }
+ }
+
+ return Block;
+});
\ No newline at end of file
diff --git a/js/board/BlockMenu.js b/js/board/BlockMenu.js
new file mode 100644
index 00000000..3b414b07
--- /dev/null
+++ b/js/board/BlockMenu.js
@@ -0,0 +1,111 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : BlockMenu.js
+ * Author : Black Logic
+ * Note : Render block menu
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 12. 13
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] Block
+//============================================================================
+define([
+ 'vp_base/js/com/com_util',
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/component/Component',
+], function (com_util, com_String, Component) {
+ 'use strict';
+
+ class BlockMenu extends Component {
+ constructor(boardFrame) {
+ super($('#vp_boardFrame'), {}, {boardFrame: boardFrame});
+ }
+
+ _init() {
+ this.boardFrame = this.prop.boardFrame;
+ this.block = undefined;
+
+ this.position = {
+ left: 0,
+ top: 0
+ };
+ }
+
+ _bindEvent() {
+ var that = this;
+ /** edit block */
+ $(this.wrapSelector('#vp_block_menu_edit')).on('click', function () {
+ that.block.openPopup();
+ that.close();
+ });
+ /** run block */
+ $(this.wrapSelector('#vp_block_menu_run')).on('click', function () {
+ that.boardFrame.runBlock(that.block);
+ that.close();
+ });
+ /** add block */
+ $(this.wrapSelector('#vp_block_menu_add')).on('click', function () {
+ that.boardFrame.runBlock(that.block, false);
+ that.close();
+ });
+ /** duplicate block */
+ $(this.wrapSelector('#vp_block_menu_duplicate')).on('click', function () {
+ // duplicate block
+ that.boardFrame.copyBlock(that.block);
+ that.close();
+ });
+ /** delete block */
+ $(this.wrapSelector('#vp_block_menu_delete')).on('click', function () {
+ that.boardFrame.removeBlock(that.block);
+ that.close();
+ });
+ }
+
+ template() {
+ var sbBlockMenu = new com_String();
+ sbBlockMenu.appendFormatLine('');
+ return sbBlockMenu.toString();
+ }
+
+ open(block, left, top) {
+ this.block = block;
+ this.position = {
+ left: left,
+ top: top
+ };
+
+ $(this.wrapSelector()).css(this.position);
+ $(this.wrapSelector()).show();
+ // filter menu depends on block
+ if (this.block.isSubBlock) {
+ // no duplicate
+ $(this.wrapSelector('#vp_block_menu_duplicate')).hide();
+ }
+ }
+
+ close() {
+ this.block = undefined;
+ $(this.wrapSelector()).hide();
+ }
+
+ }
+
+ return BlockMenu;
+
+});
\ No newline at end of file
diff --git a/js/board/BoardFrame.js b/js/board/BoardFrame.js
new file mode 100644
index 00000000..bab5e8ff
--- /dev/null
+++ b/js/board/BoardFrame.js
@@ -0,0 +1,905 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : BoardFrame.js
+ * Author : Black Logic
+ * Note : Render and load board frame
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 09. 13
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] BoardFrame
+//============================================================================
+define([
+ 'text!../../html/boardFrame.html!strip',
+ 'css!../../css/boardFrame.css',
+ '../com/com_Config',
+ '../com/com_String',
+ '../com/com_util',
+ '../com/com_interface',
+ '../com/component/Component',
+ '../com/component/FileNavigation',
+ './Block',
+ './BlockMenu'
+], function(boardFrameHtml, boardFrameCss, com_Config, com_String, com_util, com_interface, Component, FileNavigation, Block, BlockMenu) {
+ 'use strict';
+ //========================================================================
+ // Define Variable
+ //========================================================================
+ const BLOCK_PADDING = 20;
+
+ /**
+ * BoardFrame
+ */
+ class BoardFrame extends Component{
+ //========================================================================
+ // Constructor
+ //========================================================================
+ constructor($target, state, prop) {
+ super($target, state, prop);
+ /*
+ * state.vp_note_display
+ * state.vp_note_width
+ * prop.parent: MainFrame
+ */
+ }
+
+ //========================================================================
+ // Internal call function
+ //========================================================================
+ _init() {
+ // selected block
+ this.selectedBlock = null;
+ this.blockList = [];
+
+ // state
+ this.state = {
+ vp_note_display: true,
+ viewDepthNumber: false,
+ indentCount: 4,
+ ...this.state
+ };
+
+ // temporary state
+ this.tmpState = {
+ boardTitle: 'Untitled',
+ boardPath: null,
+ copy: {
+ start: 0,
+ end: 0
+ }
+ }
+
+ this.headBlocks = ['lgCtrl_if', 'lgCtrl_for', 'lgCtrl_try'];
+ this.subBlocks = ['lgCtrl_elif', 'lgCtrl_else', 'lgCtrl_except', 'lgCtrl_finally'];
+ }
+
+ _bindEvent() {
+ let that = this;
+ // board menu toggle button
+ $(this.wrapSelector('.vp-board-header-button')).on('click', function(evt) {
+ $(that.wrapSelector('.vp-board-header-button-inner')).toggle();
+ evt.stopPropagation();
+ });
+ // board menu button click
+ $(this.wrapSelector('.vp-board-header-button-inner ul li')).on('click', function() {
+ let menu = $(this).data('menu');
+ switch (menu) {
+ case 'new':
+ that.createNewNote();
+ break;
+ case 'open':
+ that.openNote();
+ break;
+ case 'save':
+ that.saveNote();
+ break;
+ case 'save-as':
+ that.saveAsNote();
+ break;
+ case 'run-all':
+ that.runAll();
+ break;
+ case 'view-depth':
+ that.viewDepthInfo();
+ break;
+ case 'clear':
+ that.clearBoard();
+ break;
+ case 'close':
+ that.closeBoard();
+ break;
+ }
+ });
+ // footer +code, +text button
+ $('.vp-board-footer-buttons button').on('click', function() {
+ let menu = $(this).data('menu');
+ if (menu === 'code') {
+ // code
+ $('#vp_wrapper').trigger({
+ type: 'create_option_page',
+ blockType: 'block',
+ menuId: 'lgExe_code',
+ menuState: {}
+ });
+ } else if (menu === 'text') {
+ // text
+ $('#vp_wrapper').trigger({
+ type: 'create_option_page',
+ blockType: 'block',
+ menuId: 'apps_markdown',
+ menuState: {}
+ });
+ }
+ });
+ // change of boardTitle
+ $(this.wrapSelector('#vp_boardTitle')).on('change', function() {
+ let fileName = $(this).val();
+ that.tmpState.boardTitle = fileName;
+ that.tmpState.boardPath = null;
+ });
+ // click board - blur block
+ $(this.wrapSelector()).on('click', function() {
+ that.blurAllblock();
+ });
+ }
+
+ _bindSortable() {
+ let that = this;
+ let parent = this.prop.parent;
+ let position = -1;
+ let targetBlock = null;
+ let targetId = '';
+ let groupedBlocks = null;
+ let parentBlock = null;
+ let depth = 0;
+ let revert = false;
+ $('.vp-board-body').sortable({
+ items: '> .vp-block',
+ axis: 'y',
+ scroll: true,
+ revert: false,
+ cursor: 'move',
+ handle: '.vp-block-header',
+ helper: function(evt, currentItem) {
+ let header = currentItem.data('name');
+ let tag = new com_String();
+ tag.appendLine('{0}
', header);
+ page.appendFormatLine('');
+ page.appendFormatLine('{1}
'
+ , depth*BLOCK_PADDING + BLOCK_PADDING, depth);
+ page.appendFormatLine('{2}
'
+ , isGroup?'':'style="display:none;"', 'Run this group', blockNumber);
+
+ // template for block button
+ let { elseFlag, finallyFlag } = this.state;
+ if (taskId == 'lgCtrl_for') {
+ page.appendLine('');
+ }
+ if (taskId == 'lgCtrl_if') {
+ page.appendLine('');
+ }
+ if (taskId == 'lgCtrl_try') {
+ page.appendLine('');
+ }
+ page.appendLine('');
+ tag.appendFormatLine('
');
+ return tag.toString();
+ },
+ placeholder: {
+ element: function(currentItem) {
+ let block = currentItem.data('block');
+ let color = currentItem.data('color');
+ targetId = currentItem.data('menu');
+ if (block) {
+ let tag = new com_String();
+ tag.appendFormatLine('{0}
', header);
+ tag.appendLine('', block.getColorLabel());
+ tag.appendFormatLine('
');
+ return tag.toString();
+ } else {
+ let header = currentItem.find('.vp-block-header').text();
+ let tag = new com_String();
+ tag.appendFormatLine('{0}
', block.name);
+ tag.appendLine('', color);
+ tag.appendFormatLine('
');
+ return tag.toString();
+ }
+ },
+ update: function(container, p) {
+ // container: container
+ // p: placeholder object
+ return;
+ }
+ },
+ start: function(evt, ui) {
+ position = ui.item.index();
+ targetBlock = that.blockList[position];
+ if (targetBlock) {
+ if (targetBlock.isSubBlock) {
+ revert = true;
+ return;
+ }
+ // hide grouped item
+ groupedBlocks = targetBlock.getGroupedBlocks();
+ groupedBlocks.forEach(block => {
+ block.hide();
+ });
+ } else {
+ // hide original item
+ ui.item.hide();
+ }
+ },
+ sort: function(evt, ui) {
+ let tmpPos = ui.placeholder.index();
+ let currCursorX = evt.clientX;
+ let currCursorY = evt.clientY;
+
+ if (position < tmpPos && groupedBlocks) {
+ tmpPos += (1 - groupedBlocks.length);
+ }
+
+ // sorting is not allowed for sub blocks (elif, else, except, finally)
+ if (revert) {
+ ui.placeholder.removeClass('vp-block-group');
+ ui.placeholder.insertAfter($('.vp-block:not(.vp-draggable-helper):not(.vp-sortable-placeholder):nth('+(position - 1)+')'));
+ return;
+ }
+
+ let befBlockTag = $('.vp-block:not(.vp-draggable-helper):not(.vp-sortable-placeholder):nth('+(tmpPos - 1)+')');
+ if (befBlockTag && befBlockTag.length > 0) {
+ let befBlock = befBlockTag.data('block');
+ let befGroupBlock = befBlock.getGroupBlock();
+ let rect = befBlockTag[0].getBoundingClientRect();
+ let befStart = rect.y;
+ let befRange = rect.y + rect.height;
+ let befGroupRange = befRange + (rect.height/2);
+ let befDepth = befBlock.getChildDepth();
+
+ let isMarkdown = false; // if befBlock or thisBlock is markdown
+ // check if thisBlock is markdown block or befBlock is markdown block
+ if (targetId == 'apps_markdown' || (befBlock && befBlock.id == 'apps_markdown')) {
+ isMarkdown = true;
+ }
+
+ if (isMarkdown) {
+ let befGroupedBlocks = befGroupBlock.getGroupedBlocks();
+ let befGroupLastBlock = befGroupedBlocks[befGroupedBlocks.length - 1]; // last block of previous group
+ if (!befBlock.equals(befGroupLastBlock)) {
+ ui.placeholder.insertAfter(befGroupLastBlock.getTag());
+ return;
+ }
+ }
+
+ if (!isMarkdown) {
+ if (befBlock.isSubBlock || (befStart < currCursorY && currCursorY < befRange)) {
+ // sort as child of befBlock (except Markdown)
+ // - if befBlock is subBlock, no group block is allowed
+ parentBlock = befBlock;
+ depth = befDepth;
+ ui.placeholder.removeClass('vp-block-group');
+ ui.placeholder.css({ 'padding-left': depth*BLOCK_PADDING + 'px'});
+ return;
+ }
+ if (befRange <= currCursorY && currCursorY < befGroupRange) {
+ // sort as child of befGroupBlock (except Markdown)
+ parentBlock = befGroupBlock;
+ depth = befGroupBlock.getChildDepth();
+ ui.placeholder.removeClass('vp-block-group');
+ ui.placeholder.css({ 'padding-left': depth*BLOCK_PADDING + 'px'});
+ return;
+ }
+ }
+ // sort after befBlock
+ parentBlock = null;
+ if (!ui.placeholder.hasClass('vp-block-group')) {
+ ui.placeholder.addClass('vp-block-group');
+ }
+ ui.placeholder.css({ 'padding-left': 0});
+ depth = 0;
+ }
+ },
+ stop: function(evt, ui) {
+ var spos = position;
+ var epos = ui.item.index();
+
+ if (revert) {
+ revert = false;
+ return;
+ }
+
+ if (spos < epos && groupedBlocks) {
+ epos += (1 - groupedBlocks.length);
+ }
+
+ if (epos > -1) {
+ // move list element
+ if (parentBlock) {
+ that.moveBlock(spos, epos, parentBlock);
+ } else {
+ that.moveBlock(spos, epos);
+ }
+ }
+
+ if (targetBlock && groupedBlocks) {
+ // show grouped block
+ groupedBlocks.forEach(block => {
+ block.show();
+ });
+ } else {
+ // show original item
+ ui.item.show();
+ }
+ }
+ }).disableSelection();
+ }
+
+ //========================================================================
+ // External call function
+ //========================================================================
+ /**
+ * Make template
+ */
+ template() {
+ return boardFrameHtml;
+ }
+
+ /**
+ * Render and load on parentDom, bind events
+ */
+ render() {
+ super.render();
+
+ // display note
+ if (!this.state.vp_note_display) {
+ this.hide();
+ }
+
+ // set width using metadata
+ $(this.wrapSelector()).width(this.state.vp_note_width);
+
+ // render taskBar
+ this.renderBlockList([]);
+ this._bindSortable();
+
+ this.blockMenu = new BlockMenu(this);
+ }
+
+ /**
+ * Render block list
+ */
+ renderBlockList(blockPopupList) {
+ let that = this;
+ let parent = this.prop.parent;
+ $('.vp-board-body').html('');
+ blockPopupList && blockPopupList.forEach(task => {
+ let block = new Block(this, { task: task });
+ that.blockList.push(block);
+ });
+ }
+
+ /**
+ * Reload block list on the board
+ */
+ reloadBlockList() {
+ let num = 1;
+ // init boardframe body
+ $(this.wrapSelector('.vp-board-body')).html('');
+ // render block list
+ this.blockList.forEach(block => {
+ // if it's already rendered and block
+ if (block && block instanceof Block) {
+ if (block.isGroup) {
+ block.setNumber(num++);
+ }
+ block.render();
+ }
+ })
+ this.renderInfo();
+ }
+
+ renderInfo() {
+ let num = 1;
+ $('.vp-block.vp-block-group').each(function(i, block) {
+ let numInfo = $(block).find('.vp-block-num-info');
+ $(numInfo).html(num++);
+ });
+ }
+
+ show() {
+ // show note area
+ $(this.wrapSelector()).show();
+ $('#vp_toggleBoard').removeClass('vp-hide');
+ // set width
+ let boardWidth = com_Config.BOARD_MIN_WIDTH;
+ $(this.wrapSelector()).width(boardWidth);
+ // save as metadata
+ vpConfig.setMetadata({ vp_note_display: true, vp_note_width: boardWidth });
+ }
+
+ hide() {
+ // hide note area
+ $(this.wrapSelector()).hide();
+ if (!$('#vp_toggleBoard').hasClass('vp-hide')) {
+ $('#vp_toggleBoard').addClass('vp-hide');
+ }
+ // set width
+ let boardWidth = 0;
+ $(this.wrapSelector()).width(boardWidth);
+ // save as metadata
+ vpConfig.setMetadata({ vp_note_display: false, vp_note_width: boardWidth });
+ }
+
+ showLoadingBar() {
+ $(this.wrapSelector('#vp_boardLoading')).show();
+ }
+
+ hideLoadingBar() {
+ $(this.wrapSelector('#vp_boardLoading')).hide();
+ }
+ //========================================================================
+ // Note control
+ //========================================================================
+ createNewNote() {
+ // TODO: alert before closing
+
+ // clear board before create new note
+ this.clearBoard();
+
+ // set title to Untitled
+ this.tmpState.boardTitle = 'Untitled';
+ // set path to empty
+ this.tmpState.boardPath = null;
+
+ // set title
+ $(this.wrapSelector('#vp_boardTitle')).val('Untitled');
+ }
+ openNote() {
+ // TODO: check save as
+
+ let that = this;
+ // open file navigation
+ let fileNavi = new FileNavigation({
+ type: 'open',
+ extensions: ['vp'],
+ finish: function(filesPath, status, error) {
+ // clear board before open note
+ that.clearBoard();
+
+ let vpFilePath = filesPath[0].path;
+ let vpFileName = filesPath[0].file;
+ // read file
+ fetch(vpFilePath).then(function(file) {
+ if (file.status != 200) {
+ com_util.renderAlertModal('The file format is not valid. (file: '+file+')');
+ return;
+ }
+
+ file.text().then(function(data) {
+ // var parsedData = decodeURIComponent(data);
+ var jsonList = JSON.parse(data);
+ // load blocks
+ that.jsonToBlock(jsonList);
+
+ var indexVp = vpFileName.indexOf('.vp');
+ var saveFileName = vpFileName.slice(0,indexVp);
+
+ // show title of board and path
+ $('#vp_boardTitle').val(saveFileName);
+ that.tmpState.boardTitle = saveFileName;
+ that.tmpState.boardPath = vpFilePath;
+
+ com_util.renderSuccessMessage('Successfully opened file. (' + vpFileName + ')');
+ });
+ });
+ }
+ });
+ fileNavi.open();
+ }
+ saveNote() {
+ let { boardPath, boardTitle } = this.tmpState;
+ // if path exists, save note
+ if (boardPath && boardPath != '') {
+ // save vp file
+ let idx = boardTitle.lastIndexOf('.vp');
+ if (idx < 0) {
+ boardTitle += '.vp';
+ }
+ let saveData = this.blockToJson(this.blockList);
+ let saveDataStr = JSON.stringify(saveData);
+ vpKernel.saveFile(boardTitle, boardPath, saveDataStr);
+ return;
+ }
+
+ this.saveAsNote();
+ }
+ saveAsNote() {
+ let that = this;
+ // save file navigation
+ let fileNavi = new FileNavigation({
+ type: 'save',
+ fileName: this.tmpState.boardTitle,
+ extensions: ['vp'],
+ finish: function(filesPath, status, error) {
+ let boardTitle = filesPath[0].file;
+ let boardPath = filesPath[0].path;
+
+ // save vp file
+ let saveData = that.blockToJson(that.blockList);
+ let saveDataStr = JSON.stringify(saveData);
+ vpKernel.saveFile(boardTitle, boardPath, saveDataStr);
+
+ // save it in tmpState
+ // detach extension
+ let idx = boardTitle.lastIndexOf('.vp');
+ boardTitle = boardTitle.substring(0, idx);
+ that.tmpState.boardTitle = boardTitle;
+ that.tmpState.boardPath = boardPath;
+ $('#vp_boardTitle').val(boardTitle);
+ }
+ });
+ fileNavi.open();
+ }
+ runBlock(block, execute=true) {
+ if (block.id == 'apps_markdown') {
+ // if markdown, run single
+ block.popup.run();
+ return;
+ }
+ 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());
+ });
+ com_interface.insertCell('code', code.toString(), execute, block.blockNumber);
+ }
+ runAll() {
+ let that = this;
+ this.blockList.forEach(block => {
+ if (block.isGroup) {
+ that.runBlock(block);
+ }
+ })
+ }
+ 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;
+
+ // clear board
+ this.blockList.forEach(block => {
+ block.popup.remove();
+ })
+ this.blockList = [];
+ // render block list
+ this.reloadBlockList();
+ }
+ closeBoard() {
+ this.createNewNote();
+ }
+ //========================================================================
+ // Block control
+ //========================================================================
+ createBlock(component, state) {
+ let createdBlock = new Block(this, state);
+ component.setTaskItem(createdBlock);
+
+ return createdBlock;
+ }
+
+ addBlock(option, position=-1, blockState={}) {
+ let block = new Block(this, { task: option, ...blockState });
+ option.setTaskItem(block);
+ if (position < 0) {
+ // add to the end
+ this.blockList.push(block);
+ position = this.blockList.length;
+ } else {
+ // add to specific position
+ this.blockList.splice(position, 0, block);
+ }
+ return block;
+ }
+
+ removeBlock(blockToRemove) {
+ let that = this;
+ // if sub block, change group block's state
+ let groupBlock = blockToRemove.getGroupBlock();
+ if (blockToRemove.id === 'lgCtrl_else') {
+ groupBlock.state.elseFlag = false;
+ }
+ if (blockToRemove.id === 'lgCtrl_finally') {
+ groupBlock.state.finallyFlag = false;
+ }
+
+ // remove grouped blocks (under this depth)
+ let groupedBlocks = blockToRemove.getGroupedBlocks();
+ groupedBlocks.forEach(block => {
+ // remove block
+ if (blockToRemove.isGroup || blockToRemove.equals(block) || block.depth > blockToRemove.depth) {
+ const blockIdx = that.blockList.indexOf(block);
+ block.popup.remove();
+ that.blockList.splice(blockIdx, 1);
+ }
+ });
+ // render block list
+ this.reloadBlockList();
+ }
+
+ /**
+ * Change position of task in blockPopupList
+ * @param {int} startIdx
+ * @param {int} endIdx
+ */
+ moveBlock(startIdx, endIdx, parentBlock=null) {
+ var movingBlock = this.blockList[startIdx];
+ if (movingBlock) {
+ let groupBlocks = this.getGroupedBlocks(movingBlock);
+ this.blockList.splice(startIdx, groupBlocks.length);
+ this.blockList.splice(endIdx, 0, ...groupBlocks);
+ // move tag
+ if (parentBlock != null) {
+ // set this movingBlock as child of parentBlock
+ movingBlock.setChildBlock(parentBlock.getChildDepth());
+ } else {
+ // set group block
+ movingBlock.setGroupBlock();
+ }
+ this.reloadBlockList();
+ }
+ }
+
+ copyBlock(block) {
+ const blockIdx = this.blockList.indexOf(block);
+ let groupedBlocks = block.getGroupedBlocks();
+ let dupPosition = blockIdx + groupedBlocks.length;
+ let groupedBlockStateList = [];
+ groupedBlocks.forEach((groupBlock, idx) => {
+ let menuId = groupBlock.id;
+ let popupState = groupBlock.popup.state;
+ groupedBlockStateList.push({
+ blockType: 'block',
+ menuId: menuId,
+ menuState: {
+ taskState: JSON.parse(JSON.stringify(popupState)),
+ blockState: {
+ isGroup: groupBlock.isGroup,
+ depth: groupBlock.depth
+ }
+ },
+ position: dupPosition + idx,
+ createChild: false
+ });
+ });
+ this.prop.parent.createPopup(groupedBlockStateList);
+ }
+
+ showMenu(block, left, top) {
+ this.blockMenu.open(block, left, top);
+ }
+
+ getGroupedBlocks(parentBlock) {
+ const parentIdx = this.blockList.indexOf(parentBlock);
+ let nextGroupIdx = parentIdx + 1;
+ if (parentBlock.canMakeChild()) {
+ while (nextGroupIdx < this.blockList.length) {
+ let block = this.blockList[nextGroupIdx];
+ let isGroup = block.isGroup;
+ if (isGroup) {
+ // find next group block
+ break;
+ }
+ let isSubBlock = (this.headBlocks.includes(parentBlock.id) && block.depth == parentBlock.depth && this.subBlocks.includes(block.id));
+ if (!parentBlock.isGroup && !isSubBlock && block.depth <= parentBlock.depth) {
+ break;
+ }
+ nextGroupIdx++;
+ }
+ }
+ // grouped blocks (include this parentBlock)
+ let groupedBlocks = this.blockList.slice(parentIdx, nextGroupIdx);
+ return groupedBlocks;
+ }
+
+ getGroupBlock(thisBlock) {
+ if (thisBlock.isGroup) {
+ return thisBlock;
+ }
+
+ let groupBlockIdx = this.blockList.indexOf(thisBlock) - 1;
+ while (groupBlockIdx > 0) {
+ if (this.blockList[groupBlockIdx].isGroup) {
+ break;
+ }
+ groupBlockIdx--;
+ }
+ return this.blockList[groupBlockIdx];
+ }
+
+ blurAllblock() {
+ this.blockList.forEach(block => {
+ block.blurItem();
+ });
+ }
+
+ scrollToBlock(block) {
+ $(this.wrapSelector('#vp_boardBody')).animate({scrollTop: $(block.getTag()).position().top}, "fast");
+ }
+ //========================================================================
+ // Block sub block control
+ //========================================================================
+ checkFlag(block) {
+ let groupedBlocks = block.getGroupedBlocks();
+ let elseBlock = groupedBlocks.filter(obj => (obj.id === 'lgCtrl_else' && obj.depth === block.depth));
+ let finallyBlock = groupedBlocks.find(obj => (obj.id === 'lgCtrl_finally' && obj.depth === block.depth));
+ block.state.elseFlag = elseBlock!=undefined?true:false;
+ block.state.finallyFlag = finallyBlock!=undefined?true:false;
+ }
+ toggleElseBlock(block) {
+ const blockIdx = this.blockList.indexOf(block);
+ let groupedBlocks = block.getGroupedBlocks();
+ let position = blockIdx + groupedBlocks.length; // add position
+ // check if it has else block
+ let elseFlag = block.state.elseFlag;
+ if (!elseFlag) {
+ // if finally is available, change add position
+ if (block.state.finallyFlag) {
+ let finallyBlock = groupedBlocks.find(obj => (obj.id === 'lgCtrl_finally' && obj.depth === block.depth));
+ let finallyPosition = this.blockList.indexOf(finallyBlock);
+ position = finallyPosition;
+ }
+ // add else
+ let blockState = {
+ isGroup: false,
+ depth: block.depth
+ }
+ this.prop.parent.createPopup([{
+ blockType: 'block',
+ menuId: 'lgCtrl_else',
+ menuState: { blockState: blockState },
+ position: position
+ }]);
+ block.state.elseFlag = true;
+ setTimeout(function() {
+ block.focusItem();
+ }, 100);
+ } else {
+ // remove else
+ let elseBlock = groupedBlocks.filter(obj => (obj.id === 'lgCtrl_else' && obj.depth === block.depth));
+ if (elseBlock.length > 0) {
+ this.removeBlock(elseBlock[0]);
+ }
+ }
+ }
+
+ toggleFinallyBlock(block) {
+ const blockIdx = this.blockList.indexOf(block);
+ let groupedBlocks = block.getGroupedBlocks();
+ let position = blockIdx + groupedBlocks.length; // add position
+
+ // check if it has finally block
+ let finallyFlag = block.state.finallyFlag;
+ if (!finallyFlag) {
+ // add finally
+ let blockState = {
+ isGroup: false,
+ depth: block.depth
+ }
+ this.prop.parent.createPopup([{
+ blockType: 'block',
+ menuId: 'lgCtrl_finally',
+ menuState: { blockState: blockState },
+ position: position
+ }]);
+ block.state.finallyFlag = true;
+ setTimeout(function() {
+ block.focusItem();
+ }, 100);
+ } else {
+ // remove finally
+ let finallyBlock = groupedBlocks.find(obj => (obj.id === 'lgCtrl_finally' && obj.depth === block.depth));
+ if (finallyBlock) {
+ this.removeBlock(finallyBlock);
+ }
+ }
+ }
+
+ addElifBlock(block) {
+ const blockIdx = this.blockList.indexOf(block);
+ let groupedBlocks = block.getGroupedBlocks();
+ let position = blockIdx + groupedBlocks.length; // add position
+ // if else is available, change add position
+ if (block.state.elseFlag) {
+ let elseBlock = groupedBlocks.find(obj => (obj.id === 'lgCtrl_else' && obj.depth === block.depth));
+ let elsePosition = this.blockList.indexOf(elseBlock);
+ position = elsePosition;
+ }
+ // add elif
+ let blockState = {
+ isGroup: false,
+ depth: block.depth
+ }
+ this.prop.parent.createPopup([{
+ blockType: 'block',
+ menuId: 'lgCtrl_elif',
+ menuState: { blockState: blockState },
+ position: position
+ }]);
+ setTimeout(function() {
+ block.focusItem();
+ }, 100);
+ }
+
+ addExceptBlock(block) {
+ const blockIdx = this.blockList.indexOf(block);
+ let groupedBlocks = block.getGroupedBlocks();
+ let position = blockIdx + groupedBlocks.length; // add position
+ // if finally is available, change add position
+ if (block.state.finallyFlag) {
+ let finallyBlock = groupedBlocks.find(obj => (obj.id === 'lgCtrl_finally' && obj.depth === block.depth));
+ let finallyPosition = this.blockList.indexOf(finallyBlock);
+ position = finallyPosition;
+ }
+ // if else is available, change add position
+ if (block.state.elseFlag) {
+ let elseBlock = groupedBlocks.find(obj => (obj.id === 'lgCtrl_else' && obj.depth === block.depth));
+ let elsePosition = this.blockList.indexOf(elseBlock);
+ position = elsePosition;
+ }
+ // add except
+ let blockState = {
+ isGroup: false,
+ depth: block.depth
+ }
+ this.prop.parent.createPopup([{
+ blockType: 'block',
+ menuId: 'lgCtrl_except',
+ menuState: { blockState: blockState },
+ position: position
+ }]);
+ setTimeout(function() {
+ block.focusItem();
+ }, 100);
+ }
+
+ //========================================================================
+ // Block save/load
+ //========================================================================
+ blockToJson(blockList) {
+ let result = [];
+ blockList && blockList.forEach(block => {
+ let jsonBlock = block.toJson();
+ result.push(jsonBlock);
+ });
+ return result;
+ }
+
+ jsonToBlock(jsonList) {
+ let parent = this.prop.parent; // MainFrame
+ let blockList = [];
+ jsonList && jsonList.forEach((obj, idx) => {
+ let {
+ isGroup, depth, blockNumber, taskId, taskState
+ } = obj;
+ let state = {
+ taskState: taskState,
+ blockState: {
+ isGroup: isGroup,
+ depth: depth,
+ blockNumber: blockNumber
+ }
+ };
+ blockList.push({
+ blockType: 'block',
+ menuId: taskId,
+ menuState: state,
+ position: idx,
+ createChild: false
+ });
+ });
+ parent.createPopup(blockList);
+ }
+ } // class
+
+ return BoardFrame;
+});
+/* End of file */
\ No newline at end of file
diff --git a/resource/pandas/__init__.py b/js/board/__init__.py
similarity index 100%
rename from resource/pandas/__init__.py
rename to js/board/__init__.py
diff --git a/resource/pandas/cmap/__init__.py b/js/com/__init__.py
similarity index 100%
rename from resource/pandas/cmap/__init__.py
rename to js/com/__init__.py
diff --git a/js/com/com_Config.js b/js/com/com_Config.js
new file mode 100644
index 00000000..472227df
--- /dev/null
+++ b/js/com/com_Config.js
@@ -0,0 +1,297 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_Config.js
+ * Author : Black Logic
+ * Note : Configuration and settings control
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 09. 16
+ * Change Date :
+ */
+//============================================================================
+// [CLASS] Configuration
+//============================================================================
+define([], function() {
+ 'use strict';
+ //========================================================================
+ // Define Inner Variable
+ //========================================================================
+ /**
+ * Type of mode
+ */
+ const _MODE_TYPE = {
+ DEVELOP : 0,
+ RELEASE : 1
+ }
+
+ //========================================================================
+ // Declare Class
+ //========================================================================
+ /**
+ * Configuration and settings
+ */
+ class Config {
+ //========================================================================
+ // Constructor
+ //========================================================================
+ constructor(initialData) {
+ // initial configuration
+ this.data = {
+ // Configuration
+ 'vpcfg': {
+
+ },
+ // User defined code for Snippets
+ 'vpudf': {
+ 'default import': [
+ 'import numpy as np',
+ 'import pandas as pd',
+ 'import matplotlib.pyplot as plt',
+ '%matplotlib inline',
+ 'import seaborn as sns',
+ 'import plotly.express as px'
+ ],
+ 'matplotlib customizing': [
+ 'import matplotlib.pyplot as plt',
+ '%matplotlib inline',
+ '',
+ "plt.rc('figure', figsize=(12, 8))",
+ '',
+ 'from matplotlib import rcParams',
+ "rcParams['font.family'] = 'New Gulim'",
+ "rcParams['font.size'] = 10",
+ "rcParams['axes.unicode_minus'] = False"
+ ],
+ 'as_float': [
+ 'def as_float(x):',
+ ' """',
+ " usage: df['col'] = df['col'].apply(as_float)",
+ ' """',
+ ' if not isinstance(x, str):',
+ ' return 0.0',
+ ' else:',
+ ' try:',
+ ' result = float(x)',
+ ' return result',
+ ' except ValueError:',
+ ' return 0.0'
+ ],
+ 'as_int': [
+ 'def as_int(x):',
+ ' """',
+ " usage: df['col'] = df['col'].apply(as_int)",
+ ' """',
+ ' if not isinstance(x, str):',
+ ' return 0',
+ ' else:',
+ ' try:',
+ ' result = int(x)',
+ ' return result',
+ ' except ValueError:',
+ ' return 0.0'
+ ]
+ }
+ }
+
+ this.data = {
+ ...this.data,
+ ...initialData
+ }
+
+ this.defaultConfig = {};
+ this.metadataSettings = {};
+
+ this._readDefaultConfig();
+ }
+
+ /**
+ * Read dejault config
+ */
+ _readDefaultConfig() {
+ // default values for system-wide configurable parameters
+ this.defaultConfig = {
+ indent: 4
+ };
+ // default values for per-notebook configurable parameters
+ this.metadataSettings = {
+ vp_config_version: '1.0.0',
+ vp_signature: 'VisualPython',
+ vp_position: {},
+ vp_section_display: true,
+ vp_note_display: true,
+ vp_menu_width: Config.MENU_MIN_WIDTH,
+ vp_note_width: Config.BOARD_MIN_WIDTH
+ };
+
+ let vp_width = Config.MENU_MIN_WIDTH + (this.metadataSettings.vp_note_display? Config.BOARD_MIN_WIDTH: 0) + Config.MENU_BOARD_SPACING;
+ this.metadataSettings['vp_position'] = {
+ // height: 'calc(100% - 110px)',
+ // width: vp_width + 'px',
+ // right: '0px',
+ // top: '110px',
+ width: vp_width
+ }
+
+ // merge default config
+ $.extend(true, this.defaultConfig, this.metadataSettings);
+ }
+
+ getMode() {
+ return Config.serverMode;
+ }
+
+ loadData(configKey = 'vpudf') {
+ return new Promise(function(resolve, reject) {
+ Jupyter.notebook.config.load();
+ Jupyter.notebook.config.loaded.then(function() {
+ var data = Jupyter.notebook.config.data[configKey];
+ if (data == undefined) {
+ data = {};
+ }
+ resolve(data);
+ });
+ });
+ };
+
+ /**
+ * Get configuration data (on server)
+ * @param {String} dataKey
+ * @param {String} configKey
+ * @returns
+ */
+ getData(dataKey='', configKey='vpudf') {
+ return new Promise(function(resolve, reject) {
+ Jupyter.notebook.config.load();
+ Jupyter.notebook.config.loaded.then(function() {
+ var data = Jupyter.notebook.config.data[configKey];
+ if (data == undefined) {
+ data = {};
+ }
+ if (dataKey == '') {
+ resolve(data);
+ return;
+ }
+ if (Object.keys(data).length > 0) {
+ resolve(data[dataKey]);
+ return;
+ }
+ reject('No data available.');
+ });
+ });
+ }
+
+ getDataSimple(dataKey='', configKey='vpudf') {
+ Jupyter.notebook.config.load();
+ var data = Jupyter.notebook.config.data[configKey];
+ if (data == undefined) {
+ data = {};
+ }
+ if (dataKey == '') {
+ return data;
+ }
+ if (Object.keys(data).length > 0) {
+ return data[dataKey];
+ }
+
+ return undefined;
+ }
+
+ /**
+ * Set configuration data (on server)
+ * @param {Object} dataObj
+ * @param {String} configKey
+ */
+ setData(dataObj, configKey='vpudf') {
+ // set data using key
+ Jupyter.notebook.config.loaded.then(function() {
+ Jupyter.notebook.config.update({[configKey]: dataObj});
+ });
+ }
+
+ removeData(key, configKey = 'vpudf') {
+ // if set value to null, it removes from config data
+ Jupyter.notebook.config.loaded.then(function() {
+ Jupyter.notebook.config.update({[configKey]: {[key]: null}});
+ });
+ }
+
+ /**
+ * Get metadata (on jupyter file)
+ * @param {String} dataKey
+ * @param {String} configKey
+ */
+ getMetadata(dataKey='', configKey='vp') {
+ let metadata = Jupyter.notebook.metadata[configKey];
+ if (metadata) {
+ // update this metadataSetting
+ this.metadataSettings = {
+ ...this.metadataSettings,
+ ...metadata
+ };
+ // no datakey, return all metadata
+ if (dataKey == '') {
+ return metadata;
+ }
+ return metadata[dataKey];
+ }
+ return {};
+ }
+
+ /**
+ * Set metadata (on jupyter file)
+ * @param {Object} dataObj
+ * @param {String} configKey
+ */
+ setMetadata(dataObj, configKey='vp') {
+ let oldData = Jupyter.notebook.metadata[configKey];
+ Jupyter.notebook.metadata[configKey] = {
+ ...oldData,
+ ...dataObj
+ };
+ Jupyter.notebook.set_dirty();
+
+ // update this metadataSetting
+ this.metadataSettings = {
+ ...this.metadataSettings,
+ ...dataObj
+ };
+
+ }
+
+ /**
+ * Reset metadata (on jupyter file)
+ * @param {String} configKey
+ */
+ resetMetadata(configKey='vp') {
+ Jupyter.notebook.metadata[configKey] = {};
+ }
+
+ }
+
+ //========================================================================
+ // Define static variable
+ //========================================================================
+ /**
+ * FIXME: before release, change it to _MODE_TYPE.RELEASE
+ */
+ // Config.serverMode = _MODE_TYPE.DEVELOP;
+ Config.serverMode = _MODE_TYPE.RELEASE;
+
+ /**
+ * Type of mode
+ */
+ Config.MODE_TYPE = _MODE_TYPE;
+
+ /**
+ * Frame size settings
+ */
+ Config.JUPYTER_HEADER_SPACING = 110;
+ Config.MENU_MIN_WIDTH = 273;
+ Config.BOARD_MIN_WIDTH = 263;
+ Config.MENU_BOARD_SPACING = 5;
+ Config.VP_MIN_WIDTH = Config.MENU_MIN_WIDTH + Config.BOARD_MIN_WIDTH + Config.MENU_BOARD_SPACING; // = MENU_MIN_WIDTH + BOARD_MIN_WIDTH + MENU_BOARD_SPACING
+
+ return Config;
+});
+
+/* End of file */
\ No newline at end of file
diff --git a/js/com/com_Const.js b/js/com/com_Const.js
new file mode 100644
index 00000000..3bd578ab
--- /dev/null
+++ b/js/com/com_Const.js
@@ -0,0 +1,53 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_Const.js
+ * Author : Black Logic
+ * Note : Define constant value
+ * License : GPLv3 (GNU General Public License v3.0)
+ * Date : 2021. 08. 14
+ * Change Date :
+ */
+
+//============================================================================
+// Define constant
+//============================================================================
+define ([
+], function() {
+ "use strict";
+
+ class Constants { }
+
+ Constants.TOOLBAR_BTN_INFO = {
+ HELP: "Visual Python 2.0.0"
+ , ICON: "vp-main-icon"
+ , ID: "vpBtnToggle"
+ , NAME: "toggle-vp"
+ , PREFIX: "vp"
+ , ICON_CONTAINER: ""
+ }
+
+ //========================================================================
+ // Base Path Constants
+ //========================================================================
+ Constants.PATH_SEPARATOR = "/";
+ Constants.BASE_PATH = Jupyter.notebook.base_url + "nbextensions" + Constants.PATH_SEPARATOR + "visualpython" + Constants.PATH_SEPARATOR;
+ Constants.SOURCE_PATH = Constants.BASE_PATH + "js" + Constants.PATH_SEPARATOR;
+ Constants.IMAGE_PATH = Constants.BASE_PATH + "img" + Constants.PATH_SEPARATOR;
+ Constants.STYLE_PATH = Constants.BASE_PATH + "css" + Constants.PATH_SEPARATOR;
+ Constants.DATA_PATH = Constants.BASE_PATH + "data" + Constants.PATH_SEPARATOR;
+ Constants.PYTHON_PATH = Constants.BASE_PATH + "python" + Constants.PATH_SEPARATOR;
+
+ Constants.MAIN_CSS_URL = Constants.STYLE_PATH + "index.css";
+ Constants.VP_LIBRARIES_JSON_URL = Constants.DATA_PATH + "libraries.json";
+
+ //========================================================================
+ // HTML selectors
+ //========================================================================
+ Constants.VP_CONTAINER_ID = 'vp_wrapper';
+ Constants.JUPYTER_NOTEBOOK_ID = 'site';
+ Constants.JUPYTER_HEADER_ID = 'header';
+
+ return Constants;
+
+});
\ No newline at end of file
diff --git a/js/com/com_Event.js b/js/com/com_Event.js
new file mode 100644
index 00000000..161ded49
--- /dev/null
+++ b/js/com/com_Event.js
@@ -0,0 +1,278 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_Event.js
+ * Author : Black Logic
+ * Note : Manage global trigger events
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 10
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] Event
+//============================================================================
+define([], function() {
+ 'use strict';
+
+ //========================================================================
+ // Declare Class
+ //========================================================================
+ class Event {
+
+ constructor(mainFrame) {
+ this.mainFrame = mainFrame;
+ this.useHotkey = true;
+
+ var that = this;
+
+ /** GLOBAL keyBoardManager */
+ this.keyManager = {
+ keyCode : {
+ ctrlKey: 17,
+ cmdKey: 91,
+ shiftKey: 16,
+ altKey: 18,
+ enter: 13,
+ escKey: 27,
+ vKey: 86,
+ cKey: 67
+ },
+ keyCheck : {
+ ctrlKey: false,
+ shiftKey: false
+ }
+ };
+
+ this._globalEvent = [
+ {
+ method: 'click focus',
+ operation: (evt) => {
+ var target = evt.target;
+ // Focus recognization
+ // blurred on popup frame
+ if ($('.vp-popup-frame').has(target).length <= 0) {
+ $('#vp_wrapper').trigger({
+ type: 'blur_option_page'
+ });
+ }
+ // Close on blur
+ // if (!$(target).hasClass('vp-close-on-blur-btn') && !$(target).hasClass('vp-close-on-blur')) {
+ if ($('.vp-close-on-blur-btn').find(target).length == 0
+ && !$(target).hasClass('vp-close-on-blur')
+ && $('.vp-close-on-blur').find(target).length == 0) {
+ $('.vp-close-on-blur').hide();
+ }
+ }
+ },
+ {
+ method: 'click',
+ selector: '.vp-accordian',
+ operation: (evt) => {
+ var target = evt.currentTarget;
+ if ($(target).hasClass('vp-open')) {
+ // open -> close
+ $(target).removeClass('vp-open');
+ $(target).addClass('vp-close');
+
+ } else {
+ // close -> open
+ $(target).removeClass('vp-close');
+ $(target).addClass('vp-open');
+ }
+ }
+ },
+ {
+ method: 'create_option_page',
+ selector: '#vp_wrapper',
+ operation: (evt) => {
+ // blockType: block/task / menuItem: menu id / menuState: saved state
+ let { blockType, menuId, menuState, position, createChild, afterAction } = evt;
+ let dupTask = that.mainFrame.checkDuplicatedTask(menuId);
+ if (blockType == 'task' && dupTask) {
+ // if duplicated, open its task
+ that.mainFrame.openPopup(dupTask);
+ } else {
+ that.mainFrame.createPopup([{
+ blockType: blockType,
+ menuId: menuId,
+ menuState: menuState,
+ position: position,
+ createChild: createChild,
+ afterAction: afterAction
+ }]);
+ }
+ }
+ },
+ {
+ method: 'open_option_page',
+ selector: '#vp_wrapper',
+ operation: (evt) => {
+ var { component } = evt;
+ that.mainFrame.openPopup(component);
+ }
+ },
+ {
+ method: 'close_option_page',
+ selector: '#vp_wrapper',
+ operation: (evt) => {
+ var { component } = evt;
+ that.mainFrame.closePopup(component);
+ }
+ },
+ {
+ method: 'apply_option_page',
+ selector: '#vp_wrapper',
+ operation: (evt) => {
+ var { component } = evt;
+ that.mainFrame.applyPopup(component);
+ }
+ },
+ {
+ method: 'focus_option_page',
+ selector: '#vp_wrapper',
+ operation: (evt) => {
+ var { component } = evt;
+ that.mainFrame.focusPopup(component);
+ }
+ },
+ {
+ method: 'blur_option_page',
+ selector: '#vp_wrapper',
+ operation: (evt) => {
+ var { component } = evt;
+ that.mainFrame.blurPopup(component);
+ }
+ },
+ {
+ method: 'blur_all_option_page',
+ selector: '#vp_wrapper',
+ operation: (evt) => {
+ that.mainFrame.blurPopup();
+ }
+ },
+ {
+ method: 'remove_option_page',
+ selector: '#vp_wrapper',
+ operation: (evt) => {
+ var { component } = evt;
+ that.mainFrame.removePopup(component);
+ }
+ },
+ {
+ method: 'disable_vp_hotkey',
+ selector: '#vp_wrapper',
+ operation: (evt) => {
+ // disable vp hotkey
+ that.disableHotkey();
+ }
+ },
+ {
+ method: 'enable_vp_hotkey',
+ selector: '#vp_wrapper',
+ operation: (evt) => {
+ // enable vp hotkey
+ that.enableHotkey();
+ }
+ }
+ ]
+
+ this._keyEvent = [
+ {
+ method: 'keydown',
+ selector: document,
+ operation: (evt) => {
+ if (evt.keyCode == that.keyManager.keyCode.ctrlKey || evt.keyCode == that.keyManager.keyCode.cmdKey) {
+ that.keyManager.keyCheck.ctrlKey = true;
+ }
+ if (evt.keyCode == that.keyManager.keyCode.shiftKey) {
+ that.keyManager.keyCheck.shiftKey = true;
+ }
+ }
+ },
+ {
+ method: 'keyup',
+ selector: document,
+ operation: (evt) => {
+ if (evt.keyCode == that.keyManager.keyCode.ctrlKey || evt.keyCode == that.keyManager.keyCode.cmdKey) {
+ that.keyManager.keyCheck.ctrlKey = false;
+ }
+ if (evt.keyCode == that.keyManager.keyCode.shiftKey) {
+ that.keyManager.keyCheck.shiftKey = false;
+ }
+ if (evt.keyCode == that.keyManager.keyCode.escKey) {
+ // close popup on esc
+ $('#vp_wrapper').trigger({
+ type: 'close_option_page',
+ component: that.mainFrame.focusedPage
+ });
+ }
+ if (evt.keyCode == that.keyManager.keyCode.enter) {
+ // blur on enter
+ var target = evt.target;
+ if ($(target).hasClass('vp-blur-on-enter')) {
+ $(target).blur();
+ }
+ }
+ }
+ }
+ ]
+
+ this._loadKeyEvent();
+ this._loadGlobalEvent();
+
+ // jquery custom method : single double click event
+ $.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
+ return this.each(function(){
+ var clicks = 0,
+ self = this;
+ $(this).click(function(event){
+ clicks++;
+ if (clicks == 1) {
+ setTimeout(function(){
+ if(clicks == 1) {
+ single_click_callback.call(self, event);
+ } else {
+ double_click_callback.call(self, event);
+ }
+ clicks = 0;
+ }, timeout || 300);
+ }
+ });
+ });
+ }
+ }
+
+ _loadGlobalEvent() {
+ var globalEvent = this._globalEvent;
+ globalEvent.forEach(event => {
+ let { method, selector, operation } = event;
+ if (selector != undefined) {
+ $(document).on(method, selector, operation);
+ } else {
+ $(document).on(method, operation);
+ }
+ });
+ }
+
+ _loadKeyEvent() {
+ var keyEvent = this._keyEvent;
+ keyEvent.forEach(event => {
+ let { method, selector, operation } = event;
+ $(document).on(method, operation);
+ });
+ }
+
+ enableHotkey() {
+ this.useHotkey = true;
+ }
+
+ disableHotkey() {
+ this.useHotkey = false;
+ }
+ }
+
+ return Event;
+});
+
+/* End of file */
diff --git a/js/com/com_Kernel.js b/js/com/com_Kernel.js
new file mode 100644
index 00000000..59878799
--- /dev/null
+++ b/js/com/com_Kernel.js
@@ -0,0 +1,267 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_Kernel.js
+ * Author : Black Logic
+ * Note : Interface between vp and jupyter
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 09. 16
+ * Change Date :
+ */
+//============================================================================
+// [CLASS] Kernel
+//============================================================================
+define([
+ './com_util',
+ './com_String'
+], function(com_util, com_String) {
+
+ /**
+ * Kernel interface class
+ */
+ class Kernel {
+ /** constructor */
+ constructor() {
+ this.data = [
+ { varName: 'df1', varType: 'DataFrame' },
+ { varName: 'df2', varType: 'DataFrame' },
+ { varName: 'df3', varType: 'DataFrame' },
+ { varName: 's1', varType: 'Series' },
+ { varName: 's2', varType: 'Series' },
+ { varName: 's3', varType: 'Series' },
+ { varName: 'l1', varType: 'List' },
+ { varName: 'l2', varType: 'List' },
+ { varName: 'l3', varType: 'List' }
+ ]
+
+ this.config = {
+ 'vpcfg': {
+
+ },
+ 'vpudf': {
+
+ }
+ }
+ }
+
+ //====================================================================
+ // Executing command api
+ //====================================================================
+ execute(command, isSilent = false) {
+ return new Promise(function(resolve, reject) {
+ Jupyter.notebook.kernel.execute(
+ command,
+ {
+ iopub: {
+ output: function (msg) {
+ var result = '';
+ var type = '';
+ if (msg.msg_type == 'error') {
+ reject({result: msg.content, type: 'error', msg: msg});
+ } else {
+ if (msg.content) {
+ try {
+ if (msg.content['name'] == 'stderr') {
+ reject(msg);
+ } else {
+ if (msg.content['text']) {
+ result = String(msg.content['text']);
+ type = 'text';
+ } else if (msg.content.data) {
+ if (msg.content.data['text/plain']) {
+ result = String(msg.content.data['text/plain']);
+ type = 'text/plain';
+ } else if (msg.content.data['text/html']) {
+ result = String(msg.content.data['text/html']);
+ type = 'text/html';
+ } else if (msg.content.data['image/png']) {
+ result = String(msg.content.data['image/png']);
+ type = 'image/png';
+ }
+ }
+ resolve({result: result, type: type, msg: msg});
+ }
+ } catch(ex) {
+ reject(ex);
+ }
+ } else {
+ resolve({result: result, type: type, msg: msg});
+ }
+ }
+ }
+ }
+ },
+ { silent: isSilent }
+ );
+ });
+ }
+
+ getDataList(dataTypeList=[]) {
+ // use function command to get variable list of selected data types
+ var cmdSB = '_vp_print(_vp_get_variables_list(None))';
+ if (dataTypeList && dataTypeList.length > 0) {
+ cmdSB = com_util.formatString('_vp_print(_vp_get_variables_list({0}))', JSON.stringify(dataTypeList));
+ }
+
+ var that = this;
+ return new Promise(function(resolve, reject) {
+ that.execute(cmdSB.toString()).then(function(resultObj) {
+ // resolve
+ resolve(resultObj);
+ }).catch(function(err) {
+ // reject
+ reject(err);
+ })
+ })
+ }
+
+ getColumnList(dataframe) {
+ var that = this;
+ return new Promise(function(resolve, reject) {
+ that.execute(com_util.formatString('_vp_print(_vp_get_columns_list({0}))', dataframe))
+ .then(function(resultObj) {
+ resolve(resultObj);
+ }).catch(function(err) {
+ // reject
+ reject(err);
+ })
+ });
+ }
+
+ getCommonColumnList(dataframeList) {
+ var that = this;
+ return new Promise(function(resolve, reject) {
+ that.execute(com_util.formatString('_vp_print(_vp_get_multi_columns_list([{0}]))', dataframeList.join(',')))
+ .then(function(resultObj) {
+ resolve(resultObj);
+ }).catch(function(err) {
+ // reject
+ reject(err);
+ })
+ });
+ }
+
+ getRowList(dataframe) {
+ var that = this;
+ return new Promise(function(resolve, reject) {
+ that.execute(com_util.formatString('_vp_print(_vp_get_rows_list({0}))', dataframe))
+ .then(function(resultObj) {
+ resolve(resultObj);
+ }).catch(function(err) {
+ // reject
+ reject(err);
+ })
+ });
+ }
+
+ getProfilingList() {
+ var that = this;
+ return new Promise(function(resolve, reject) {
+ that.execute('_vp_print(_vp_get_profiling_list())')
+ .then(function(resultObj) {
+ resolve(resultObj);
+ }).catch(function(err) {
+ // reject
+ reject(err);
+ })
+ });
+ }
+
+ //====================================================================
+ // FileNavigation
+ //====================================================================
+ getCurrentDirectory() {
+ var that = this;
+ return new Promise(function(resolve, reject) {
+ that.execute('%pwd')
+ .then(function(resultObj) {
+ resolve(resultObj.result);
+ }).catch(function(err) {
+ // reject
+ reject(err);
+ })
+ });
+ }
+
+ getFileList(path, useFunction=false) {
+ var that = this;
+ if (path === '') {
+ path = '.';
+ }
+ if (!useFunction) {
+ path = "'" + path + "'";
+ }
+ var cmd = com_util.formatString('_vp_print(_vp_search_path({0}))', path);
+ return new Promise(function(resolve, reject) {
+ that.execute(cmd)
+ .then(function(resultObj) {
+ resolve(resultObj.result);
+ }).catch(function(err) {
+ // reject
+ reject(err);
+ })
+ });
+ }
+ //====================================================================
+ // Image data
+ //====================================================================
+ getImageFile(path) {
+ var that = this;
+ let code = com_util.formatString("_vp_get_image_by_path('{0}')", path);
+ return new Promise(function(resolve, reject) {
+ that.execute(code)
+ .then(function(resultObj) {
+ resolve(resultObj);
+ }).catch(function(err) {
+ // reject
+ reject(err);
+ })
+ });
+ }
+
+ //====================================================================
+ // Write File
+ //====================================================================
+ saveFile(fileName, filePath, saveData) {
+ let that = this;
+ fetch(filePath).then(function(data) {
+ // overwrite confirmation
+ if (data.status == 200) {
+ if (!confirm(com_util.formatString("{0} already exists.\nDo you want to replace it?", fileName))) {
+ return false;
+ }
+ }
+
+ // write file
+ var sbfileSaveCmd = new com_String();
+ sbfileSaveCmd.appendFormatLine('%%writefile "{0}"', filePath);
+ sbfileSaveCmd.appendLine(saveData);
+
+ that.execute(sbfileSaveCmd.toString()).then(function(resultObj) {
+ com_util.renderSuccessMessage('Successfully saved file. (' + fileName + ')');
+ }).catch(function(err) {
+ com_util.renderAlertModal("Couldn't save file. "+err.message);
+ vpLog.display(VP_LOG_TYPE.ERROR, err);
+ });
+ });
+ }
+
+ //====================================================================
+ // Configuration api
+ //====================================================================
+ loadConfig() {
+
+ }
+
+ getConfig() {
+
+ }
+
+ setConfig() {
+
+ }
+
+ }
+
+ return Kernel;
+});
\ No newline at end of file
diff --git a/js/com/com_Log.js b/js/com/com_Log.js
new file mode 100644
index 00000000..95a9225c
--- /dev/null
+++ b/js/com/com_Log.js
@@ -0,0 +1,105 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_Log.js
+ * Author : Black Logic
+ * Note : Log control
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 09. 13
+ * Change Date :
+ */
+
+//============================================================================
+// Load extension
+//============================================================================
+define([
+ './com_Config'
+], function(com_Config) {
+ 'use strict';
+ //========================================================================
+ // Define Inner Variable
+ //========================================================================
+ /**
+ * Type of log
+ * DEVELOP 0 : log for developing/testing. if mode
+ */
+ const _LOG_TYPE = {
+ ERROR : -1,
+ DEVELOP : 0,
+ LOG : 1,
+ WARN : 4
+ }
+ /**
+ * Log label
+ */
+ const _LOG_LABEL = {
+ [_LOG_TYPE.DEVELOP] : 'VP_Test',
+ [_LOG_TYPE.LOG] : 'VP_Log',
+
+ [_LOG_TYPE.ERROR] : 'VP_ERROR',
+ [_LOG_TYPE.WARN] : 'VP_WARN'
+ }
+
+ //========================================================================
+ // Declare Class
+ //========================================================================
+ /**
+ * Log util class
+ */
+ class Log {
+ //========================================================================
+ // Constructor
+ //========================================================================
+ constructor() {
+ this.currentMode = com_Config.serverMode;
+ }
+
+ //========================================================================
+ // Internal call function
+ //========================================================================
+ /**
+ * Get current mode
+ */
+ get _mode() {
+ return this.currentMode;
+ }
+
+ //========================================================================
+ // External call function
+ //========================================================================
+ /**
+ * Display logs
+ * @param {Log.LOG_TYPE} logType Log type : DEVELOP 0/LOG 1/ERROR -1
+ * @param {String} displayArgs Log string text
+ */
+ display(logType, ...displayArgs) {
+ // on RELEASE mode, do not show develop/test logs
+ if (this._mode == com_Config.MODE_TYPE.RELEASE) {
+ if (logType == _LOG_TYPE.DEVELOP) {
+ return;
+ }
+ }
+ if (displayArgs.length == 1) {
+ console.log('[' + _LOG_LABEL[logType] + ']', displayArgs[0]);
+ } else {
+ console.log('[' + _LOG_LABEL[logType] + ']', displayArgs);
+ }
+ }
+ }
+
+ //========================================================================
+ // Define Static Variable
+ //========================================================================
+ /**
+ * Type of log
+ * DEVELOP 0 : log for developing/testing. if mode
+ */
+ Log.LOG_TYPE = _LOG_TYPE;
+ /**
+ * Log label
+ */
+ Log.LOG_LABEL = _LOG_LABEL;
+
+
+ return Log;
+});
\ No newline at end of file
diff --git a/js/com/com_Popup.js b/js/com/com_Popup.js
new file mode 100644
index 00000000..50ec1236
--- /dev/null
+++ b/js/com/com_Popup.js
@@ -0,0 +1,353 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_Popup.js
+ * Author : Black Logic
+ * Note : [CLASS] Popup page
+ * License : GPLv3 (GNU General Public License v3.0)
+ * Date : 2021. 08. 14
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] Popup page
+//============================================================================
+define([
+ 'vp_base/js/com/com_Const',
+ 'vp_base/js/com/com_util',
+ 'codemirror/lib/codemirror'
+], function(com_Const, com_util, codemirror) {
+ 'use strict';
+
+ //========================================================================
+ // Define variable
+ //========================================================================
+ const VP_PP = 'vp-pp';
+ const VP_PP_CONTAINER = 'vp-pp-container';
+ const VP_PP_TITLE = 'vp-pp-title';
+ const VP_PP_CLOSE = 'vp-pp-close';
+ const VP_PP_BODY = 'vp-pp-body';
+
+ const VP_PP_PREVIEW_BOX = 'vp-pp-preview-box';
+ const VP_PP_BUTTON_BOX = 'vp-pp-btn-box';
+ const VP_PP_BUTTON_PREVIEW = 'vp-pp-btn-preview';
+ const VP_PP_BUTTON_CANCEL = 'vp-pp-btn-cancel';
+ const VP_PP_BUTTON_RUNADD = 'vp-pp-btn-runadd';
+ const VP_PP_BUTTON_RUN = 'vp-pp-btn-run';
+ const VP_PP_BUTTON_DETAIL = 'vp-pp-btn-detail';
+ const VP_PP_DETAIL_BOX = 'vp-pp-detail-box';
+ const VP_PP_DETAIL_ITEM = 'vp-pp-detail-item';
+
+ //========================================================================
+ // [CLASS] com_Popup
+ //========================================================================
+ class com_Popup {
+
+ /**
+ * constructor
+ * @param {object} pageThis
+ * @param {string} targetId
+ */
+ constructor(pageThis, targetId) {
+ this.pageThis = pageThis;
+ this.targetId = targetId;
+ this.uuid = 'u' + com_util.getUUID();
+
+ this.config = {
+ title: '',
+ width: '95%',
+ height: '95%',
+ pageDom: $('{0}
', header);
+ tag.appendLine('Empty
')
+ };
+
+ this.cmReadonlyConfig = {
+ mode: {
+ name: 'python',
+ version: 3,
+ singleLineStringErrors: false
+ },
+ height: '100%',
+ width: '100%',
+ indentUnit: 4,
+ matchBrackets: true,
+ readOnly: true,
+ autoRefresh: true,
+ theme: 'ipython',
+ extraKeys: { 'Enter': 'newlineAndIndentContinueMarkdownList' },
+ scrollbarStyle: 'null'
+ };
+ this.previewOpened = false;
+ }
+
+ /**
+ * Wrap selector
+ */
+ wrapSelector(selector = '') {
+ return com_util.formatString('.{0} {1}', this.uuid, selector);
+ }
+
+ /**
+ * Initialize
+ */
+ init() {
+ com_util.loadCss(com_Const.STYLE_PATH + 'common/popupPage.css');
+ this.renderPopup();
+ this.bindEvent();
+ }
+
+ /**
+ * Render popup page
+ */
+ renderPopup() {
+ var { title, width, height, pageDom } = this.config;
+
+ var page = new MakeString();
+ page.appendFormatLine('', VP_PP, this.uuid);
+ page.appendFormatLine('
'); // VP_PP end
+
+ $('#vp-wrapper').append(page.toString());
+
+ $(pageDom).appendTo($(this.wrapSelector('.' + VP_PP_BODY)));
+ $(this.wrapSelector()).hide();
+
+ return page.toString();
+ }
+
+ /**
+ * Open
+ */
+ open(config) {
+ this.config = {
+ ...this.config,
+ ...config
+ };
+
+ this.init();
+ $(this.wrapSelector()).show();
+
+ if (!this.cmpreview) {
+ // codemirror setting
+ this.cmpreview = codemirror.fromTextArea($('#vp_codePreview')[0], this.cmReadonlyConfig);
+ } else {
+ this.cmpreview.refresh();
+ }
+ }
+
+ /**
+ * Close
+ */
+ close() {
+ this.unbindEvent();
+ $(this.wrapSelector()).remove();
+ }
+
+ /**
+ * Apply
+ */
+ apply(addCell = false, runCell = false) {
+ if (this.pageThis) {
+ var code = this.pageThis.generateCode(false, false);
+ $(com_util.wrapSelector('#' + this.targetId)).val(code);
+ $(com_util.wrapSelector('#' + this.targetId)).trigger({
+ type: 'popup_run',
+ title: this.config.title,
+ code: code,
+ addCell: addCell,
+ runCell: runCell
+ });
+ }
+ }
+
+ /**
+ * Open preview
+ */
+ openPreview() {
+ if (this.pageThis) {
+ var code = this.pageThis.generateCode(false, false);
+ this.cmpreview.setValue(code);
+ this.cmpreview.save();
+ this.cmpreview.focus();
+
+ var that = this;
+ setTimeout(function () {
+ that.cmpreview.refresh();
+ }, 1);
+
+ this.previewOpened = true;
+ $(this.wrapSelector('.' + VP_PP_PREVIEW_BOX)).show();
+ }
+ }
+
+ /**
+ * Close preview
+ */
+ closePreview() {
+ this.previewOpened = false;
+ $(this.wrapSelector('.' + VP_PP_PREVIEW_BOX)).hide();
+ }
+
+ /**
+ * Bind event
+ */
+ bindEvent() {
+ var that = this;
+
+ // close popup
+ $(document).on('click', this.wrapSelector('.' + VP_PP_CLOSE), function (event) {
+ that.close();
+ });
+
+ // click preview
+ $(document).on('click', this.wrapSelector('.' + VP_PP_BUTTON_PREVIEW), function (evt) {
+ evt.stopPropagation();
+ if (that.previewOpened) {
+ that.closePreview();
+ } else {
+ that.openPreview();
+ }
+ });
+
+ // click cancel
+ $(document).on('click', this.wrapSelector('.' + VP_PP_BUTTON_CANCEL), function () {
+ that.close();
+ });
+
+ // click run
+ $(document).on('click', this.wrapSelector('.' + VP_PP_BUTTON_RUN), function () {
+ that.apply(true, true);
+ that.close();
+ });
+
+ // click detail button
+ $(document).on('click', this.wrapSelector('.' + VP_PP_BUTTON_DETAIL), function (evt) {
+ evt.stopPropagation();
+ $(that.wrapSelector('.' + VP_PP_DETAIL_BOX)).show();
+ });
+
+ // click add / apply
+ $(document).on('click', this.wrapSelector('.' + VP_PP_DETAIL_ITEM), function () {
+ var type = $(this).data('type');
+ if (type == 'add') {
+ that.apply(true);
+ that.close();
+ } else if (type == 'apply') {
+ that.apply();
+ that.close();
+ }
+ });
+
+ // click other
+ $(document).on('click.' + this.uuid, function (evt) {
+ if (!$(evt.target).hasClass('.' + VP_PP_BUTTON_DETAIL)) {
+ $(that.wrapSelector('.' + VP_PP_DETAIL_BOX)).hide();
+ }
+ if (!$(evt.target).hasClass('.' + VP_PP_BUTTON_PREVIEW)
+ && $(that.wrapSelector('.' + VP_PP_PREVIEW_BOX)).has(evt.target).length === 0) {
+ that.closePreview();
+ }
+ });
+
+ this.keyboardManager = {
+ keyCode: {
+ ctrlKey: 17,
+ cmdKey: 91,
+ shiftKey: 16,
+ altKey: 18,
+ enter: 13,
+ escKey: 27
+ },
+ keyCheck: {
+ ctrlKey: false,
+ shiftKey: false
+ }
+ };
+ $(document).on('keydown.' + this.uuid, function (e) {
+ var keyCode = that.keyboardManager.keyCode;
+ if (e.keyCode == keyCode.ctrlKey || e.keyCode == keyCode.cmdKey) {
+ that.keyboardManager.keyCheck.ctrlKey = true;
+ }
+ if (e.keyCode == keyCode.shiftKey) {
+ that.keyboardManager.keyCheck.shiftKey = true;
+ }
+ }).on('keyup.' + this.uuid, function (e) {
+ var keyCode = that.keyboardManager.keyCode;
+ if (e.keyCode == keyCode.ctrlKey || e.keyCode == keyCode.cmdKey) {
+ that.keyboardManager.keyCheck.ctrlKey = false;
+ }
+ if (e.keyCode == keyCode.shiftKey) {
+ that.keyboardManager.keyCheck.shiftKey = false;
+ }
+ if (e.keyCode == keyCode.escKey) {
+ // close on esc
+ that.close();
+ }
+ });
+ }
+
+ /**
+ * Unbind event
+ */
+ unbindEvent() {
+ $(document).unbind(com_util.formatString(".{0} .{1}", this.uuid, VP_PP_BODY));
+ $(document).off('click', this.wrapSelector('.' + VP_PP_CLOSE));
+ $(document).off('click', this.wrapSelector('.' + VP_PP_BUTTON_PREVIEW));
+ $(document).off('click', this.wrapSelector('.' + VP_PP_BUTTON_CANCEL));
+ $(document).off('click', this.wrapSelector('.' + VP_PP_BUTTON_RUN));
+ $(document).off('click', this.wrapSelector('.' + VP_PP_BUTTON_DETAIL));
+ $(document).off('click', this.wrapSelector('.' + VP_PP_DETAIL_ITEM));
+ $(document).off('click.' + this.uuid);
+
+ $(document).off('keydown.' + this.uuid);
+ $(document).off('keyup.' + this.uuid);
+ }
+ }
+
+ return com_Popup;
+
+}); /* function, define */
+
+/* End of file */
diff --git a/js/com/com_String.js b/js/com/com_String.js
new file mode 100644
index 00000000..f677d057
--- /dev/null
+++ b/js/com/com_String.js
@@ -0,0 +1,84 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_String.js
+ * Author : Black Logic
+ * Note : [CLASS] Make string
+ * License : GPLv3 (GNU General Public License v3.0)
+ * Date : 2021. 08. 14
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] Make string
+//============================================================================
+define ([
+], function () {
+ 'use strict';
+
+ //========================================================================
+ // [CLASS] com_String
+ //========================================================================
+ class com_String {
+
+ // constructor
+ constructor() {
+ this.buffer = new Array();
+ }
+
+ // Append string
+ append(str) {
+ this.buffer[this.buffer.length] = str;
+ }
+
+ // Append string & newline
+ appendLine(str) {
+ this.append((str == null ? '' : str) + '\n');
+ }
+
+ // Append format string: appendFormat('str_base {0} {1}','str0','str1')
+ appendFormat() {
+ var cnt = arguments.length;
+ if (cnt < 2)
+ return '';
+
+ var str = arguments[0];
+ for (var idx = 1; idx < cnt; idx++)
+ str = str.replace('{' + (idx - 1) + '}', arguments[idx]);
+ this.buffer[this.buffer.length] = str;
+ }
+
+ // Append format string & newline: appendFormatLine('str_base {0} {1}','str0','str1')
+ appendFormatLine() {
+ var cnt = arguments.length;
+ if (cnt < 2)
+ return '';
+
+ var str = arguments[0];
+ for (var idx = 1; idx < cnt; idx++)
+ str = str.replace('{' + (idx - 1) + '}', arguments[idx]);
+ this.buffer[this.buffer.length] = str + '\n';
+ }
+
+ // Replace string
+ replace(from, to) {
+ for (var i = this.buffer.length - 1; i >= 0; i--)
+ this.buffer[i] = this.buffer[i].replace(new RegExp(from, 'g'), to);
+ }
+
+ // Get string
+ toString() {
+ return this.buffer.join('');
+ }
+
+ // Clear string
+ clear() {
+ this.buffer = new Array();
+ }
+ }
+
+ return com_String;
+
+}); /* function, define */
+
+/* End of file */
diff --git a/src/common/vpXMLHandler.js b/js/com/com_XML.js
similarity index 71%
rename from src/common/vpXMLHandler.js
rename to js/com/com_XML.js
index dbffe2ca..0c25e781 100644
--- a/src/common/vpXMLHandler.js
+++ b/js/com/com_XML.js
@@ -1,85 +1,104 @@
+/*
+ * 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([
- 'require'
- , 'jquery'
- , 'nbextensions/visualpython/src/common/constant'
- , 'nbextensions/visualpython/src/common/StringBuilder'
-], function (requirejs, $, vpConst, sb) {
- "use strict";
+], 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();
+ }
- /**
- * @class VpXMLHandler
- * @constructor
- * @param {String} path xml path
- */
- var VpXMLHandler = function(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();
+ }
- /**
- * load xml
- * @param {function} callback execute function at load finished
- * @param {object} callbackParam parameter of execute function at load finished
- */
- VpXMLHandler.prototype.loadFile = function(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);
- }
+ /**
+ * return serializeString
+ * @returns serializeString
+ */
+ toString() {
+ return this.xmlString;
}
- this.xmlRequest.send();
- }
- /**
- * return serializeString
- * @returns serializeString
- */
- VpXMLHandler.prototype.toString = function() {
- return this.xmlString
- }
+ /**
+ * return loaded xml data
+ * @returns xml data
+ */
+ getXML() {
+ return this.loadedXML;
+ }
- /**
- * return loaded xml data
- * @returns xml data
- */
- VpXMLHandler.prototype.getXML = function() {
- return this.loadedXML;
- }
+ /**
+ * xml data parse to json
+ * @returns json data
+ */
+ getJson() {
+ return xmlToJson(this.loadedXML);
+ }
- /**
- * xml data parse to json
- * @returns json data
- */
- VpXMLHandler.prototype.getJson = function() {
- return xmlToJson(this.loadedXML);
- }
+ /**
+ * xml data parse to array
+ * @returns array data
+ */
+ getArray() {
+ return xmlToArray(this.xmlString);
+ }
- /**
- * xml data parse to array
- * @returns array data
- */
- VpXMLHandler.prototype.getArray = function() {
- return xmlToArray(this.xmlString);
- }
-
- /**
- * json data parse to xml
- * @param {json or Array} json json string or Array to parse xml
- */
- VpXMLHandler.prototype.parseToXml = function(json) {
- return jsonToXml(json);
- }
+ /**
+ * 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
+ * Parse to xml from json or Array
* @param {json or Array} obj json or Array data for parse
* @param {number} depth xml depth
*/
@@ -120,7 +139,7 @@ define([
}
/**
- * parse to json from xml
+ * Parse to json from xml
* @param {xml} xml xml data for parse
* @returns json data
*/
@@ -133,20 +152,20 @@ define([
var item = xml.children.item(i);
var nodeName = item.nodeName;
- if (typeof (obj[nodeName]) == "undefined") {
+ if (typeof (obj[nodeName]) == 'undefined') {
obj[nodeName] = xmlToJson(item);
for (var j = 0; j < item.attributes.length; j++) {
- if (typeof (obj[nodeName]) == "string") {
+ if (typeof (obj[nodeName]) == 'string') {
var old = obj[nodeName];
var tmp = {};
- tmp["@text"] = old;
+ tmp['@text'] = old;
obj[nodeName] = tmp;
}
- obj[nodeName]["_" + item.attributes[j].nodeName] = item.attributes[j].nodeValue;
+ obj[nodeName]['_' + item.attributes[j].nodeName] = item.attributes[j].nodeValue;
}
} else {
- if (typeof (obj[nodeName].length) == "undefined") {
+ if (typeof (obj[nodeName].length) == 'undefined') {
var old = obj[nodeName];
obj[nodeName] = new Array();
@@ -155,7 +174,7 @@ define([
}
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;
+ obj[nodeName][obj[nodeName].length - 1]['_' + item.attributes[j].nodeName] = item.attributes[j].nodeValue;
}
}
}
@@ -164,77 +183,14 @@ define([
}
return obj;
} catch (err) {
- console.log("[vp] Error occurred during parse xml to json.");
+ console.log('[vp] Error occurred during parse xml to json.');
console.warn(err.message);
}
};
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- // ', VP_PP_CONTAINER, width, height);
+
+ // title
+ page.appendFormat('
'); // container end
+ page.appendLine('{1}
',
+ VP_PP_TITLE,
+ title);
+
+ // close button
+ page.appendFormatLine('',
+ VP_PP_CLOSE, 'fa fa-close');
+
+ // body start
+ page.appendFormatLine('
', VP_PP_BODY, 'vp-apiblock-scrollbar');
+ page.appendLine('
'); // body end
+
+
+ // Snippets menu don't use buttons
+ if (title != 'Snippets') {
+
+ // preview box
+ page.appendFormatLine('', VP_PP_PREVIEW_BOX, 'vp-apiblock-scrollbar');
+ page.appendFormatLine('', 'vp_codePreview');
+ page.appendLine('
');
+
+ // button box
+ page.appendFormatLine('', VP_PP_BUTTON_BOX);
+ page.appendFormatLine('',
+ 'vp-button', 'vp-pp-btn', VP_PP_BUTTON_PREVIEW, 'Code view');
+ page.appendFormatLine('',
+ 'vp-button cancel', 'vp-pp-btn', VP_PP_BUTTON_CANCEL, 'Cancel');
+ page.appendFormatLine('
'); // VP_PP_BUTTON_BOX
+ }
+
+ page.appendLine('', VP_PP_BUTTON_RUNADD);
+ page.appendFormatLine('',
+ 'vp-button activated', VP_PP_BUTTON_RUN, 'Apply to Board & Run Cell', 'Run');
+ page.appendFormatLine('',
+ 'vp-button activated', VP_PP_BUTTON_DETAIL, 'fa fa-sort-up');
+ page.appendFormatLine('
'); // VP_PP_BUTTON_RUNADD
+ page.appendLine('', VP_PP_DETAIL_BOX, 'vp-cursor');
+ page.appendFormatLine('
'); // VP_PP_DETAIL_BOX
+ page.appendLine('{3}
', VP_PP_DETAIL_ITEM, 'apply', 'Apply to Board', 'Apply');
+ page.appendFormatLine('{3}
', VP_PP_DETAIL_ITEM, 'add', 'Apply to Board & Add Cell', 'Add');
+ page.appendLine('visualpython
에 text인 "visualpython" 정보 를 만드는 함수
+ /**
+ * visualpython
에 text인 'visualpython' 정보 를 만드는 함수
+ */
var makeTextNode = (text, target, prev, identityNumber) => {
if (text.trim().length !== 0) {
target.push({type:'TEXT',
@@ -245,7 +201,9 @@ define([
return '';
};
- // 에서 value인 id="value" 정보를 만드는 함수
+ /**
+ * 에서 value인 id="value" 정보를 만드는 함수
+ */
var makeAttributeNode = (value, target, prev, identityNumber) => {
target.push({type:'ATTRIBUTE',
key: value[0],
@@ -254,9 +212,9 @@ define([
identityNumber});
}
-
-
- // 에서 태그 이름인 main에 대한 정보를 만드는 함수
+ /**
+ * 에서 태그 이름인 main에 대한 정보를 만드는 함수
+ */
var makeElementNode = (input, cursor, text, stack, stacks) => {
var char = input[cursor++];
var isBreak = false;
@@ -279,10 +237,10 @@ define([
};
if(name.includes(`="`) === true){
- var valueLength = name.split(" ").length;
- tag.name = name.split(" ")[0];
+ var valueLength = name.split(' ').length;
+ tag.name = name.split(' ')[0];
while(valueLength-- > 1){
- var splitedValue = name.split(" ")[valueLength].replace(/"/gi,``).split("=");
+ var splitedValue = name.split(' ')[valueLength].replace(/"/gi,``).split('=');
makeAttributeNode(splitedValue, tag.children, tag, cursor);
}
}
@@ -307,7 +265,9 @@ define([
return {cursor, text, isBreak, stack};
};
- // json을 받아서 자바스크립트 xml로 바꾸는 함수
+ /**
+ * json을 받아서 자바스크립트 xml로 바꾸는 함수
+ */
var xmlToJson2 = input => {
var result = { tag: {
type:'ROOT',
@@ -332,9 +292,11 @@ define([
return result.tag.children[0];
};
- // XML string을 받아서 자바스크립트 Array로 바꾸는 함수
- // 위의 구현한 xmlToJson을 이용
- var xmlToArray = function(xmlstring){
+ /**
+ * XML string을 받아서 자바스크립트 Array로 바꾸는 함수
+ * 위의 구현한 xmlToJson을 이용
+ */
+ var xmlToArray = function(xmlstring) {
var json = xmlToJson2(xmlstring);
var dataArray = [];
var stacks = [];
@@ -355,9 +317,9 @@ define([
if(Array.isArray(context.children)){
context.children.forEach((childrenElement,index) => {
console.log('childrenElement',childrenElement);
- if(childrenElement.type === "NODE"){
+ if(childrenElement.type === 'NODE'){
var isHaveTEXTorVALUE = childrenElement.children.some(element => {
- if(element.type === "TEXT" || element.type === "ATTRIBUTE"){
+ if(element.type === 'TEXT' || element.type === 'ATTRIBUTE'){
return true;
} else {
return false;
@@ -375,7 +337,7 @@ define([
});
stacks.push(childrenElement);
}
- } else if(childrenElement.type === "TEXT"){
+ } else if(childrenElement.type === 'TEXT'){
dataArray.push({
name: childrenElement.prev.name,
text: childrenElement.text,
@@ -414,7 +376,9 @@ define([
});
}
- // json을 받아서 자바스크립트 xml로 바꾸는 함수
+ /**
+ * json을 받아서 자바스크립트 xml로 바꾸는 함수
+ */
var jsonToXml = json => {
var stack = [];
@@ -471,7 +435,7 @@ define([
if(context.children){
if(context.children.length !== 0){
var isTypeNode = context.children.every(element => {
- if(element.type === "TEXT" || element.type === "ATTRIBUTE"){
+ if(element.type === 'TEXT' || element.type === 'ATTRIBUTE'){
return true;
} else {
return false;
@@ -492,10 +456,10 @@ define([
stack.push(element);
});
} else {
- if(context.type === "TEXT"){
+ if(context.type === 'TEXT'){
findDom(context).innerHTML = context.text;
- } else { // context.type === "ATTRIBUTE"
- findDom(context).setAttribute(context.key, context.value || " ");
+ } else { // context.type === 'ATTRIBUTE'
+ findDom(context).setAttribute(context.key, context.value || ' ');
}
continue;
}
@@ -513,5 +477,8 @@ define([
return rootDom;
}
- return { VpXMLHandler: VpXMLHandler };
-});
\ No newline at end of file
+ return com_XML; // class
+
+}); /* function, define */
+
+/* End of file */
diff --git a/js/com/com_generator.js b/js/com/com_generator.js
new file mode 100644
index 00000000..51d849ad
--- /dev/null
+++ b/js/com/com_generator.js
@@ -0,0 +1,487 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : com_generator.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;
+
+ /**
+ * Generate page interface based on package configuration
+ * @param {*} package
+ */
+ var vp_showInterfaceOnPage = function(selector, package) {
+
+ // generate input variable tag
+ var tblInput = $(selector+' #vp_inputOutputBox table');
+ 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)));
+ });
+
+ // generate option variable tag
+ var tblOption = $(selector+' #vp_optionBox table');
+ 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)));
+ });
+
+ // generate output variable tag
+ var tblOutput = $(selector+' #vp_inputOutputBox table');
+ 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)));
+ });
+ }
+
+ /**
+ * Generate tag using type
+ * @param {object} divTag
+ * @param {*} obj
+ * @param {boolean} getValue
+ * @returns {HTMLTableRowElement} tblRow (tr tag)
+ */
+ var vp_createTag = function(divTag, obj, getValue=false, required=false) {
+ // TR tag & TD label tag
+ var tblRow = document.createElement('tr');
+ var tblLabel = document.createElement('td');
+ var tblInput = document.createElement('td');
+
+ var lbl = document.createElement('label');
+ var requiredFontStyle = required? 'vp-orange-text' : '';
+ $(lbl).attr({
+ 'for': obj.name,
+ 'class': requiredFontStyle,
+ 'title': '(' + obj.name + ')'
+ });
+ lbl.innerText = obj.label;
+ tblLabel.appendChild(lbl);
+
+ // create as component type
+ switch (obj.component) {
+ case 'bool_checkbox':
+ // FIXME: True False select box
+ var select = $(``);
+ select.append($(''))
+ .append($(''));
+ $(tblInput).append(select);
+ break;
+ case 'option_select':
+ var optSlct = document.createElement('select');
+ $(optSlct).attr({
+ 'class':'vp-select option-select vp-state',
+ 'id':obj.name
+ });
+ // if required, no default option
+ if (required != true) {
+ $(optSlct).append($(''));
+ }
+ obj.options.forEach((opt, idx, arr) => {
+ var label = (obj.options_label != undefined? obj.options_label[idx]:opt);
+ var option = document.createElement('option');
+ $(option).attr({
+ // 'id':opt,
+ 'index':obj.index,
+ 'name':obj.name,
+ 'value':opt
+ });
+ // cell metadata test
+ if (getValue && obj.value != undefined) {
+ // set as saved value
+ if (obj.value == opt) {
+ $(option).attr({
+ 'selected':'selected'
+ });
+ }
+ }
+ option.append(document.createTextNode(label));
+ optSlct.appendChild(option);
+ });
+ tblInput.appendChild(optSlct);
+ break;
+ case 'var_select':
+ // suggest input tag
+ var tag = document.createElement('input');
+ $(tag).attr({
+ 'type': 'text',
+ 'id': obj.name,
+ 'class': 'vp-input vp-state'
+ });
+ vp_generateVarSuggestInput(divTag, obj);
+ tblInput.appendChild(tag);
+ break;
+ case 'var_multi':
+ // select tag with multiple selection
+ var tag = document.createElement('select');
+ $(tag).attr({
+ 'id': obj.name,
+ 'class': 'vp-select var-multi vp-state',
+ // multiple selection true
+ 'multiple': true
+ });
+ vp_generateVarSelect(tag, obj.var_type, obj.value);
+ tblInput.appendChild(tag);
+ break;
+ case 'textarea':
+ var textarea = $(``);
+ // cell metadata test
+ if (getValue && obj.value != undefined) {
+ // set as saved value
+ textarea.val(obj.value);
+ }
+ $(tblInput).append(textarea);
+ break;
+ case 'table':
+ // break;
+ case 'file':
+ // break;
+ // default : input_single
+ default:
+ // FIXME: use makedom
+ var input = com_makeDom.renderInput({
+ 'type':'text',
+ 'class':'vp-input input-single vp-state',
+ 'id':obj.name,
+ 'placeholder':(obj.placeholder==undefined?'':obj.placeholder),
+ 'value':(obj.default==undefined?'':obj.default),
+ 'title':(obj.help==undefined?'':obj.help)
+ });
+ // cell metadata test
+ if (getValue && obj.value != undefined) {
+ // set as saved value
+ input.attr({
+ 'value': obj.value
+ });
+ }
+ $(tblInput).append(input);
+ }
+ tblRow.appendChild(tblLabel);
+ tblRow.appendChild(tblInput);
+
+ return tblRow;
+ }
+
+ /**
+ * Generate suggest input
+ * @param {object} obj
+ */
+ var vp_generateVarSuggestInput = function(divTag, obj) {
+ var types = obj.var_type;
+ var defaultValue = obj.value;
+
+ // 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((resultObj) => {
+ let { result, type, msg } = resultObj;
+ var varList = JSON.parse(result);
+ varList = varList.map(function(v) {
+ return { label: v.varName + ' (' + v.varType + ')', value: v.varName, dtype: v.varType };
+ });
+ // 1. Target Variable
+ var suggestInput = new SuggestInput();
+ suggestInput.setComponentID(obj.name);
+ suggestInput.addClass('vp-input vp-state');
+ suggestInput.setSuggestList(function() { return varList; });
+ suggestInput.setNormalFilter(false);
+ suggestInput.setValue($(divTag + ' #' + obj.name).val());
+ suggestInput.setSelectEvent(function(selectedValue) {
+ // trigger change
+ $(divTag + ' #' + obj.name).val(selectedValue);
+ $(divTag + ' #' + obj.name).trigger('select_suggestvalue');
+ });
+ $(divTag + ' #' + obj.name).replaceWith(function() {
+ return suggestInput.toTagString();
+ });
+ }).catch(err => {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'Error on generating var suggest input', err);
+ });
+ }
+
+ /**
+ * Generate variable select tag
+ * @param {object} tag
+ * @param {Array`);
+ var basePathDomElement = $(``);
+ currentRelativePathDomElement.append(basePathDomElement);
+ basePathDomElement.click(function() {
+ var dirObj = {
+ direction: NAVIGATION_DIRECTION_TYPE.TO,
+ destDir: notebookPathStr
+ }
+
+ // initialize sidebar-menu selection
+ $('.fnp-sidebar-menu').removeClass('selected');
+
+ // render current file/dir list in fileNavigation body
+ that.getFileList(dirObj, this);
+ });
+
+ var nestedLength = 0;
+ // if it's outside of notebookPath, ignore notebookPath
+ var prevLength = notebookPathStrLength;
+ var useSidebar = false;
+ if (currentRelativePathStrArray.includes('..')) {
+ prevLength = 0;
+ useSidebar = true;
+ }
+ let slashStr = '/';
+ currentRelativePathStrArray.forEach((pathToken,index) => {
+ if (index === 0) {
+ slashStr = '';
+ } else {
+ slashStr = '/';
+ }
+
+ var spanElement = $(``);
+
+ var pathLength = prevLength + pathToken.length + 1 + nestedLength;
+ spanElement.click(function() {
+ var currentRelativePathStr = `${currentDirStr.substring(0, pathLength)}`;
+
+ var dirObj = {
+ direction: NAVIGATION_DIRECTION_TYPE.TO,
+ destDir: currentRelativePathStr
+ }
+
+ // initialize sidebar-menu selection
+ $('.fnp-sidebar-menu').removeClass('selected');
+
+ // render current file/dir list in fileNavigation body
+ that.getFileList(dirObj, this);
+ });
+ currentRelativePathDomElement.append(spanElement);
+ nestedLength += pathToken.length + 1;
+ });
+
+ $('.fileNavigationPage-directory-nowLocation').empty();
+ $('.fileNavigationPage-directory-nowLocation').append(currentRelativePathDomElement);
+ }
+
+ renderSaveBox() {
+ let page = new com_String();
+ page.appendFormatLine(''
+ , 'vp_fileNavigationInput', 'Input file name', this.state.fileName);
+ page.appendFormatLine('');
+ page.appendFormatLine('', 'vp-filenavi-btn', 'select', 'Select');
+ $('.fileNavigationPage-button').html(page.toString());
+
+ let that = this;
+ // bind filename change event
+ $(this.wrapSelector('#vp_fileNavigationInput')).on('change', function() {
+ let fileName = $(this).val();
+ let filePath = that.getRelativePath(that.pathState.baseDir, that.pathState.currentPath);
+ if (filePath == '') {
+ filePath = './' + fileName;
+ }
+ that.setSelectedFile(fileName, filePath);
+ });
+ // bind save cancel event
+ $(this.wrapSelector('.vp-filenavi-btn')).on('click', function() {
+ let menu = $(this).data('menu');
+ if (menu == 'select') {
+ // select file
+ let { fileName, filePath } = that.state;
+ let selectedExt = $(that.wrapSelector('#vp_fileNavigationExt')).val();
+ let fileExtIdx = fileName.lastIndexOf('.');
+ // if no extension, add it
+ if (fileExtIdx < 0 || fileName.substring(fileExtIdx + 1) != selectedExt) {
+ fileName += '.' + selectedExt;
+ }
+ // no path, set it
+ if (filePath == '') {
+ filePath = './' + fileName;
+ }
+ fileExtIdx = filePath.lastIndexOf('.');
+ if (fileExtIdx < 0 || filePath.substring(fileExtIdx + 1) != selectedExt) {
+ filePath += '.' + selectedExt;
+ }
+
+ // Manage result using finish function
+ let filesPath = [{ file: fileName, path: filePath }]; //FIXME: fix it if multiple selection implemented
+ let status = true;
+ let error = null;
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'fileNavigation finished saving', filesPath, status, error);
+ that.state.finish(filesPath, status, error);
+
+ // cancel file navigation
+ that.close();
+ }
+ });
+ }
+
+ loadFileList() {
+ this.renderNowLocation();
+ this.renderFileList();
+ }
+
+ render() {
+ super.render();
+ let that = this;
+ /** Implement after rendering */
+ // if save mode
+ if (this.state.type == 'save') {
+ // render saving box
+ this.renderSaveBox();
+ }
+
+ // get current path
+ this.getCurrentDirectory().then(function(currentPath) {
+ that.pathState.currentPath = currentPath;
+ that.makePaths(currentPath);
+ // get file list of current path
+ that.getFileList({ direction: NAVIGATION_DIRECTION_TYPE.INIT, destDir: currentPath});
+ })
+ }
+
+ open() {
+ $(this.wrapSelector()).show();
+ }
+
+ close() {
+ $(this.wrapSelector()).remove();
+ }
+
+ //============================================================================
+ // File & Path control
+ //============================================================================
+ handleSelectFile(relativeDirPath, filePathStr) {
+ 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 === '') {
+ slashstr = '';
+ }
+
+ var pathInput = '';
+ var fileInput = `${filePathStr}`;
+ // if baseFolder doesn't exist in current path
+ if (upDirectoryCount > 0
+ && currentDirStr.indexOf(baseFolder) === -1) {
+
+ pathInput = `${prefixUpDirectory}${relativeDirPath}${slashstr}${filePathStr}`;
+ } else {
+ // if baseFolder exists in current path
+ pathInput = `./${relativeDirPath}${slashstr}${filePathStr}`;
+ }
+
+ //============================================================================
+ // Set selection result
+ //============================================================================
+ if (this.state.type == 'save') {
+ // add as saving file
+ this.setSelectedFile(fileInput, pathInput);
+ } else {
+ // Manage result using finish function
+ let filesPath = [{ file: fileInput, path: pathInput }]; //FIXME: fix it if multiple selection implemented
+ let status = true;
+ let error = null;
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'fileNavigation finished', filesPath, status, error);
+ this.state.finish(filesPath, status, error);
+
+ // remove and close file navigation
+ this.close();
+ }
+ }
+ getCurrentDirectory() {
+ return vpKernel.getCurrentDirectory();
+ }
+
+ /**
+ * Get File/Dir list
+ * @param {Object} dirObj { direction, destDir, useFunction }
+ * - direction : TO, PREV, TOP, INIT
+ * - destDir : path to search
+ * - useFunction : boolean (true if use given path (Desktop, Downloads, User, ...))
+ * @returns Promise(result)
+ */
+ getFileList(dirObj) {
+ let that = this;
+ let { direction, destDir, useFunction } = dirObj;
+ if (direction === NAVIGATION_DIRECTION_TYPE.TO
+ || direction === NAVIGATION_DIRECTION_TYPE.PREV) {
+ ;
+ }
+ else if (direction === NAVIGATION_DIRECTION_TYPE.TOP) {
+ destDir = '..';
+ } else {
+ destDir = '.';
+ }
+ // get file list using kernel
+ return vpKernel.getFileList(destDir, useFunction).then(function(result) {
+ /** Caution : if change code "$1" to '$1' as single quote, json parsing error occurs */
+ var jsonVars = result.replace(/'([^']+)': /g, `"$1": `); // object front
+ jsonVars = jsonVars.replace(/: '([^']+)'([,}])/g, `: "$1"$2`); // object back
+ jsonVars = jsonVars.replace(/\\/g, `/`);
+ var varList = JSON.parse(jsonVars);
+
+ /** remove file/dir which starts with . */
+ var filtered_varList = varList.filter(data => {
+ if (data.name && data.name[0] == '.') {
+ return false;
+ } else {
+ return true;
+ }
+ }).sort((a,b) => {
+ /** sort ascending */
+ return a - b;
+ });
+
+ /**
+ * Filter file/dir which included in this.state.extensions
+ */
+ if (Array.isArray(that.state.extensions)) {
+ filtered_varList = filtered_varList.filter((data, index) => {
+ if (index == 0) {
+ return true;
+ }
+
+ if (data.type && data.type == 'dir') {
+ // if file, just show
+ return true;
+ } else if (data.name) {
+ var extension = data.name.substring(data.name.lastIndexOf('.') + 1);
+ if (that.state.extensions.includes(extension)) {
+ return true;
+ } else {
+ return false;
+ }
+ } else {
+ return false;
+ }
+ });
+ }
+
+
+ var { currentDirStr, currentRelativePathStr } = that.splitPathStrAndSetStack(dirObj, filtered_varList);
+ that.pathState.relativeDir = currentRelativePathStr;
+ that.pathState.currentPath = currentDirStr;
+ that.currentFileList = filtered_varList;
+
+ that.loadFileList();
+ });;
+ }
+
+ /**
+ * Get current path and set pathStates
+ * @param {String} currentDirStr
+ */
+ makePaths(currentDirStr) {
+ var slicedCurrentDirStr = currentDirStr.slice(1, currentDirStr.length -1);
+ slicedCurrentDirStr = slicedCurrentDirStr.replace(/\\/g, `/`);
+
+ // slicedCurrentDirStr = slicedCurrentDirStr.replaceAll("//","/"); // replace with codes below
+ var cursor = 0;
+ while (slicedCurrentDirStr[cursor] !== undefined ) {
+ if(slicedCurrentDirStr[cursor] === "/" && slicedCurrentDirStr[cursor + 1] === "/") {
+ slicedCurrentDirStr = slicedCurrentDirStr.slice(0,cursor) + slicedCurrentDirStr.slice(cursor + 1,slicedCurrentDirStr.length);
+ }
+ cursor++;
+ }
+
+ var splitedDirStrArr = slicedCurrentDirStr.split('/');
+ /**
+ * ex) if current path is 'C:/Users/VP/Desktop/Test'
+ * BaseFolderStr = 'Test'
+ * BaseDirStr = 'C:/Users/VP/Desktop/Test'
+ * RelativePathStr = 'Test'
+ * RelativePathStr changes when moving through paths
+ */
+ var rootFolderName = splitedDirStrArr[splitedDirStrArr.length - 1];
+ var notebookPath = Jupyter.notebook.notebook_path;
+
+ this.pathState.baseFolder = rootFolderName;
+ this.pathState.relativeDir = rootFolderName;
+ this.pathState.baseDir = slicedCurrentDirStr;
+
+ var baseDirStr = slicedCurrentDirStr;
+
+ /**
+ * Generate notebookFolder, notebookPathStr using Jupyter.notebook.notebook_path
+ * ex) if current path is 'C:/Users/VP/Desktop/Test'
+ * Jupyter.notebook.notebook_path = 'Desktop/Test'
+ * notebookFolder = 'Desktop'
+ * notebookPathStr = 'Desktop/Test'
+ * Very root folder is 'VP'
+ */
+ if (notebookPath.indexOf("/") !== -1) {
+ var index = 0;
+ while ( notebookPath[index] !== "/" ) {
+ if ( notebookPath[index] === undefined ) {
+ break;
+ }
+ index++;
+ }
+
+ var notebookFolder = notebookPath.substring(0, index);
+ var index2 = baseDirStr.indexOf(notebookFolder);
+ while (baseDirStr[index2] !== "/") {
+ if ( baseDirStr[index2] === undefined ) {
+ break;
+ }
+ index2++;
+ }
+
+ var notebookFullPathStr = baseDirStr.substring(0, index2);
+ var index3 = notebookFullPathStr.indexOf(notebookFolder);
+ var notebookPathStr = baseDirStr.substring(0, index3 - 1);
+
+ this.pathState.notebookFolder = notebookFolder;
+ this.pathState.notebookPath = notebookPathStr;
+ } else {
+ this.pathState.notebookFolder = rootFolderName;
+ this.pathState.notebookPath = slicedCurrentDirStr;
+ }
+ }
+
+ /**
+ * 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('/');
+ var rootFolderName = splitedDirStrArr[splitedDirStrArr.length - 1];
+
+ var firstIndex = currentDirStr.indexOf( this.pathState.notebookFolder );
+
+ var currentRelativePathStr = '';
+ if ( firstIndex === -1 ) {
+ var notebookDir = this.pathState.notebookPath; //TEST:
+ // FIXME: if current path is upper than Jupyter Home, send no permission?
+ // currentRelativePathStr = currentDirStr.substring(this.getNotebookDir().length + 1, currentDirStr.length);
+ // currentRelativePathStr = this.getRelativePath(notebookDir, currentDirStr);
+ var baseDir = this.pathState.baseDir;
+ currentRelativePathStr = this.getRelativePath(baseDir, currentDirStr);
+ } else {
+ currentRelativePathStr = currentDirStr.substring(firstIndex, currentDirStr.length);
+ }
+
+ if ( dirObj.direction === NAVIGATION_DIRECTION_TYPE.TOP
+ || dirObj.direction === NAVIGATION_DIRECTION_TYPE.TO ) {
+ this.pushPath(currentDirStr);
+ }
+
+ return {
+ currentDirStr,
+ currentRelativePathStr,
+ rootFolderName
+ }
+ }
+
+ /**
+ * Get relative path based on start path
+ * - referred python os.path.relpath()
+ * @param {string} start start path (base path)
+ * @param {string} path current path
+ * @returns current relative path
+ */
+ getRelativePath(start, path) {
+ const sep = '/';
+ const curdir = '.';
+ const pardir = '..';
+
+ var startSplit = start.split(sep);
+ var pathSplit = path.split(sep);
+
+ // TODO: check drive: startSplit[0] == pathSplit[0]
+
+ var startList = startSplit.slice(1);
+ var pathList = pathSplit.slice(1);
+
+ var stopIdx = 0;
+ while (stopIdx < startList.length) {
+ var e1 = startList[stopIdx];
+ var e2 = pathList[stopIdx];
+ if (e1 != e2) {
+ break;
+ }
+ stopIdx++;
+ }
+ var parList = Array(startList.length - stopIdx).fill(pardir);
+ var relList = parList.concat(pathList.slice(stopIdx));
+ if (!relList || relList.length == 0) {
+ return ''; // curdir
+ }
+ return relList.join(sep);
+ }
+
+ pushPath = function(path) {
+ this.pathStack.push(path);
+ return true;
+ }
+
+ popPath = function() {
+ if (this.pathStack.length <= 0) {
+ return undefined;
+ }
+ return this.pathStack.pop();
+ }
+
+ //============================================================================
+ // Set states
+ //============================================================================
+
+ setExtensions(arr) {
+ this.state.extensions = arr;
+ }
+
+ setSelectedFile(fileName, filePath) {
+ this.state.fileName = fileName;
+ this.state.filePath = filePath;
+
+ $(this.wrapSelector('#vp_fileNavigationInput')).val(fileName);
+ }
+ }
+
+ return FileNavigation;
+});
\ No newline at end of file
diff --git a/js/com/component/InstanceEditor.js b/js/com/component/InstanceEditor.js
new file mode 100644
index 00000000..251b9eab
--- /dev/null
+++ b/js/com/component/InstanceEditor.js
@@ -0,0 +1,461 @@
+const { param } = require("jquery");
+
+define([
+ 'css!vp_base/css/component/instanceEditor.css',
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/com_util',
+ 'vp_base/js/com/component/SuggestInput'
+], function(insCss, com_String, com_util, SuggestInput) {
+
+
+ // temporary const
+ const VP_INS_BOX = 'vp-ins-box';
+ const VP_INS_SELECT_CONTAINER = 'vp-ins-select-container';
+ const VP_INS_SELECT_TITLE = 'vp-ins-select-title';
+ const VP_INS_SEARCH = 'vp-ins-search';
+ const VP_INS_TYPE = 'vp-ins-type';
+ const VP_INS_SELECT_BOX = 'vp-ins-select-box';
+ const VP_INS_SELECT_LIST = 'vp-ins-select-list';
+ const VP_INS_SELECT_ITEM = 'vp-ins-select-item';
+
+ 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'];
+
+ /**
+ * @class InstanceEditor
+ * @param {object} pageThis
+ * @param {string} targetId
+ * @param {boolean} popup
+ * @constructor
+ */
+ class InstanceEditor {
+ constructor(pageThis, targetId, containerId = 'vp_wrapper', popup = false) {
+ this.pageThis = pageThis;
+ this.targetId = targetId;
+ this.uuid = 'u' + com_util.getUUID();
+ this.containerId = containerId;
+ this.popup = popup;
+
+ this.state = {
+ code: '',
+ type: '',
+ 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();
+
+ }
+ getVarType() {
+ return this.state.type;
+ }
+ getVarList() {
+ return this.state.list;
+ }
+ init() {
+
+ this.reload();
+ }
+ wrapSelector(selector = '') {
+ return com_util.formatString('.{0} {1}', this.uuid, selector);
+ }
+ renderFirstPage() {
+ var tag = new com_String();
+ tag.appendFormatLine('{4} ',
+ VP_INS_SELECT_ITEM, obj.name, obj.type, obj.type, obj.name);
+ }
+ });
+ $(this.wrapSelector('.' + VP_INS_SELECT_LIST + '.variable')).html(varListTag.toString());
+ }
+ renderPage(replace = true) {
+ var tag = new com_String();
+ tag.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 SuggestInput();
+ 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 SuggestInput();
+ 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();
+ });
+
+ // 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)).hide();
+ }
+ }
+
+ // callback
+ if (callback) {
+ callback(varObj);
+ }
+ });
+
+
+ }
+ show() {
+ $(this.wrapSelector()).show();
+ this.reload();
+ }
+ hide() {
+ $(this.wrapSelector()).hide();
+ }
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+ return InstanceEditor;
+})
\ No newline at end of file
diff --git a/js/com/component/LibraryComponent.js b/js/com/component/LibraryComponent.js
new file mode 100644
index 00000000..5c549d30
--- /dev/null
+++ b/js/com/component/LibraryComponent.js
@@ -0,0 +1,146 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : LibraryComponent.js
+ * Author : Black Logic
+ * Note : Library Component
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 18
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] LibraryComponent
+//============================================================================
+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) {
+
+ /**
+ * LibraryComponent
+ */
+ class LibraryComponent extends PopupComponent {
+ _init() {
+ super._init();
+ /** Write codes executed before rendering */
+ this.config.dataview = false;
+ this.config.sizeLevel = 1;
+
+ this.packageId = this.state.config.id;
+ // deep copy package info
+ this.package = null;
+ try {
+ let findPackage = pandasLibrary.PANDAS_FUNCTION[this.packageId];
+ if (findPackage) {
+ this.package = JSON.parse(JSON.stringify(findPackage)); // deep copy of package
+ } else {
+ throw 'Cannot find package';
+ }
+ } catch(err) {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'Cannot find package id from library: ' + this.packageId);
+ return;
+ }
+
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'loading state', this.state);
+ }
+
+ _bindEvent() {
+ super._bindEvent();
+ /** Implement binding events */
+ var that = this;
+ // save change of vp-state component
+ $(this.wrapSelector('.vp-state')).on('change', function() {
+ let id = $(this)[0].id;
+ let val = $(this).val();
+ that.state[id] = val;
+ });
+ }
+
+ loadState() {
+ vpLog.display(VP_LOG_TYPE.DEVELOP, this.state);
+
+ let that = this;
+ Object.keys(this.state).forEach(key => {
+ if (key !== 'config') {
+ let tag = $(that.wrapSelector('#' + key));
+ let tagName = $(tag).prop('tagName');
+ let savedValue = that.state[key];
+ switch(tagName) {
+ case 'INPUT':
+ let inputType = $(tag).prop('type');
+ if (inputType == 'text' || inputType == 'number') {
+ $(tag).val(savedValue);
+ break;
+ }
+ if (inputType == 'checkbox') {
+ $(tag).prop('checked', savedValue);
+ break;
+ }
+ break;
+ case 'TEXTAREA':
+ case 'SELECT':
+ default:
+ $(tag).val(savedValue);
+ break;
+ }
+ }
+ });
+ }
+
+ saveState() {
+ let that = this;
+ $(this.wrapSelector('.vp-state')).each((idx, tag) => {
+ let id = tag.id;
+ let tagName = $(tag).prop('tagName');
+ let newValue = '';
+ switch(tagName) {
+ case 'INPUT':
+ let inputType = $(tag).prop('type');
+ if (inputType == 'text' || inputType == 'number') {
+ newValue = $(tag).val();
+ break;
+ }
+ if (inputType == 'checkbox') {
+ newValue = $(tag).prop('checked');
+ break;
+ }
+ break;
+ case 'TEXTAREA':
+ case 'SELECT':
+ default:
+ newValue = $(tag).val();
+ break;
+ }
+
+ that.state[id] = newValue;
+ });
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'savedState', that.state);
+ }
+
+ templateForBody() {
+ return libHtml;
+ }
+
+ render() {
+ super.render();
+
+ // show interface
+ com_generator.vp_showInterfaceOnPage(this.wrapSelector(), this.package);
+ }
+
+ generateCode() {
+ return com_generator.vp_codeGenerator(this.uuid, this.package);
+ }
+
+ }
+
+ return LibraryComponent;
+});
\ No newline at end of file
diff --git a/js/com/component/Modal.js b/js/com/component/Modal.js
new file mode 100644
index 00000000..7873f069
--- /dev/null
+++ b/js/com/component/Modal.js
@@ -0,0 +1,153 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : Modal.js
+ * Author : Black Logic
+ * Note : Modal
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 18
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] Modal
+//============================================================================
+define([
+ 'css!vp_base/css/component/modal.css',
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/component/Component',
+ 'vp_base/js/com/com_util'
+], function(modalCss, com_String, Component, com_util) {
+
+ /**
+ * Modal
+ */
+ class Modal extends Component {
+ /**
+ *
+ * @param {Object} state {title, message, buttons, defaultButtonIdx, finish}
+ * - title : string / modal title
+ * - message : string / modal message
+ * - buttons : list / at least 1 button needed
+ * - defaultButtonIdx : int
+ * - finish : callback function when modal button clicked (result:button idx 0~n)
+ */
+ constructor(state) {
+ super($('body'), state);
+ }
+ _init() {
+ super._init();
+ this.state = {
+ title: '',
+ message: '',
+ buttons: [],
+ defaultButtonIdx: 1,
+ finish: null,
+ ...this.state
+ }
+ /** Write codes executed before rendering */
+ if (this.state.buttons.length == 0) {
+ this.state.buttons.push("OK");
+ }
+ }
+
+ _bindEvent() {
+ /** Implement binding events */
+ let that = this;
+ // button click event
+ $(this.wrapSelector('.vp-modal-button')).on('click', function () {
+ if (typeof that.state.finish == "function") {
+ let modalIdx = parseInt($(this).data('idx'));
+ that.state.finish(modalIdx);
+ }
+ that.close();
+ });
+
+ // esc key to close, enter key to select
+ $(document).bind(com_util.formatString('keydown.{0}', this.uuid), function (event) {
+ that.handleEscToExit(event);
+ that.handleEnterToClickButton(event);
+ });
+ }
+
+ template() {
+ /** Implement generating template */
+ let { title, message, buttons, defaultButtonIdx } = this.state;
+ var sbTagString = new com_String();
+ sbTagString.appendLine("
");
+ return sbTagString.toString();
+ }
+
+ render() {
+ /** Implement after rendering */
+
+ }
+
+ //============================================================================
+ // Settings
+ //============================================================================
+ /**
+ * Open modal tag
+ * @param {function} callBackList
+ */
+ open() {
+ // render on open
+ super.render();
+ /** focus on default button */
+ $(this.wrapSelector('.vp-modal-button[data-idx="' + this.state.defaultButtonIdx + '"]')).focus();
+ // show
+ $(this.wrapSelector()).show();
+ }
+ close() {
+ $(document).unbind(com_util.formatString(".{0}", this.uuid));
+ $(document).unbind(com_util.formatString("keydown.{0}", this.uuid));
+ $(this.wrapSelector()).remove();
+ }
+ /**
+ * close using esc
+ * @param {Event} event
+ */
+ handleEscToExit(event) {
+ var keyCode = event.keyCode ? event.keyCode : event.which;
+ // esc
+ if (keyCode == 27) {
+ this.close();
+ }
+ }
+ /**
+ * select using enter
+ * @param {Event} event
+ */
+ handleEnterToClickButton(event) {
+ var keyCode = event.keyCode ? event.keyCode : event.which;
+ // enter
+ if (keyCode == 13) {
+ $(this.wrapSelector('.vp-modal-button[data-idx="' + this.state.defaultButtonIdx + '"]')).click();
+ this.close();
+ }
+ }
+
+ }
+
+ return Modal;
+});
\ No newline at end of file
diff --git a/src/common/component/vpMultiSelector.js b/js/com/component/MultiSelector.js
similarity index 78%
rename from src/common/component/vpMultiSelector.js
rename to js/com/component/MultiSelector.js
index 636e25da..df296162 100644
--- a/src/common/component/vpMultiSelector.js
+++ b/js/com/component/MultiSelector.js
@@ -1,20 +1,20 @@
/*
* Project Name : Visual Python
* Description : GUI-based Python code generator
- * File Name : vpMultiSelector.js
+ * File Name : MultiSelector.js
* Author : Black Logic
- * Note : Groupby app
+ * Note : Multi Selector
* License : GNU GPLv3 with Visual Python special exception
* Date : 2021. 10. 05
* Change Date :
*/
define([
- 'nbextensions/visualpython/src/common/constant',
- 'nbextensions/visualpython/src/common/StringBuilder',
- 'nbextensions/visualpython/src/common/vpCommon',
- 'nbextensions/visualpython/src/common/component/vpSuggestInputText',
- 'nbextensions/visualpython/src/common/kernelApi'
-], function(vpConst, sb, vpCommon, vpSuggestInputText, kernelApi) {
+ 'css!vp_base/css/component/multiSelector.css',
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/com_util',
+ 'vp_base/js/com/component/Component',
+ 'vp_base/js/com/component/SuggestInput'
+], function(multiCss, com_String, com_util, Component, SuggestInput) {
//========================================================================
// Define variable
@@ -44,7 +44,7 @@ define([
//========================================================================
// [CLASS] MultiSelector
//========================================================================
- class MultiSelector {
+ class MultiSelector extends Component {
/**
*
@@ -52,13 +52,16 @@ define([
* @param {Object} config parent:[], selectedList=[], includeList=[]
*/
constructor(frameSelector, config) {
- this.uuid = 'u' + vpCommon.getUUID();
- this.frameSelector = frameSelector;
+ super(frameSelector, config, {});
+ }
+
+ _init() {
+ this.frameSelector = this.$target;
// configuration
- this.config = config;
+ this.config = this.state;
- var { mode, type, parent, selectedList=[], includeList=[], excludeList=[] } = config;
+ var { mode, type, parent, selectedList=[], includeList=[], excludeList=[] } = this.config;
this.mode = mode;
this.parent = parent;
this.selectedList = selectedList;
@@ -84,6 +87,10 @@ define([
}
}
+ // render() {
+ // ;
+ // }
+
_executeCallback(dataList) {
if (this.includeList && this.includeList.length > 0) {
dataList = dataList.filter(data => this.includeList.includes(data.code));
@@ -98,7 +105,8 @@ define([
}
_getVariableList(type, callback) {
- kernelApi.searchVarList(type, function(result) {
+ vpKernel.getDataList(type).then(function(resultObj) {
+ let { result } = resultObj;
try {
var dataList = JSON.parse(result);
dataList = dataList.map(function(x, idx) {
@@ -119,7 +127,8 @@ define([
_getColumnList(parent, callback) {
if (parent && parent.length > 1) {
- kernelApi.getCommonColumnList(parent, function(result) {
+ vpKernel.getColumnList(parent).then(function(resultObj) {
+ let { result } = resultObj;
try {
var colList = JSON.parse(result);
colList = colList.map(function(x) {
@@ -136,7 +145,8 @@ define([
}
});
} else {
- kernelApi.getColumnList(parent, function(result) {
+ vpKernel.getColumnList(parent).then(function(resultObj) {
+ let { result } = resultObj;
try {
var colList = JSON.parse(result);
colList = colList.map(function(x) {
@@ -155,19 +165,14 @@ define([
}
}
- _wrapSelector(query='') {
- return vpCommon.formatString('.{0} {1}', this.uuid, query);
- }
-
load() {
- $(vpCommon.wrapSelector(this.frameSelector)).html(this.render());
- vpCommon.loadCssForDiv(this._wrapSelector(), Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + 'common/component/multiSelector.css');
+ $(this.frameSelector).html(this.render());
this.bindEvent();
this.bindDraggable();
}
getDataList() {
- var colTags = $(this._wrapSelector('.' + APP_SELECT_ITEM + '.added:not(.moving)'));
+ var colTags = $(this.wrapSelector('.' + APP_SELECT_ITEM + '.added:not(.moving)'));
var dataList = [];
if (colTags.length > 0) {
for (var i = 0; i < colTags.length; i++) {
@@ -185,13 +190,13 @@ define([
render() {
var that = this;
- var tag = new sb.StringBuilder();
+ var tag = new com_String();
tag.appendFormatLine('', VP_INS_BOX, this.uuid); // vp-select-base
+
+ tag.appendFormatLine('
'); // VP_INS_BOX END
+
+
+
+ // TODO: if this.popup == true
+ $(this.pageThis.wrapSelector('#' + this.containerId)).html(tag.toString());
+
+ return tag.toString();
+ }
+ renderVarList(varType, varList) {
+ var varListTag = new com_String();
+ varList != undefined && varList.forEach(obj => {
+ if ((varType == '' && !this.dataTypeList.includes(obj.type))
+ || obj.type == varType) {
+ varListTag.appendFormatLine('', VP_INS_SELECT_CONTAINER, 'datatype');
+ tag.appendFormatLine('
'); // VP_INS_SELECT_CONTAINER
+
+ 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_BOX
+ tag.appendLine('- ', 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('
', VP_INS_SELECT_CONTAINER, 'variable');
+ tag.appendFormatLine('
'); // VP_INS_SELECT_CONTAINER
+
+ tag.appendLine('Variable
', VP_INS_SELECT_TITLE);
+ tag.appendFormatLine('', VP_INS_TYPE, 'variable');
+ tag.appendFormatLine('', VP_INS_SELECT_BOX, 'variable');
+ tag.appendFormatLine('
'); // VP_INS_SELECT_BOX
+
+
+ // create variable input
+ tag.appendFormatLine('- ', VP_INS_SELECT_LIST, 'variable');
+ tag.appendLine('
', VP_CREATE_VAR_BOX);
+ tag.appendFormatLine('', VP_CREATE_VAR);
+ tag.appendFormatLine('
', VP_CREATE_VAR_BTN, '/nbextensions/visualpython/img/plus.svg');
+ tag.appendLine('
');
+
+ tag.appendLine('', VP_INS_BOX, this.uuid); // vp-select-base
+
+ tag.appendFormatLine('
'); // VP_INS_BOX END
+
+
+
+ // TODO: if this.popup == true
+ $(this.pageThis.wrapSelector('#' + this.containerId)).html(tag.toString());
+
+ return tag.toString();
+ }
+ bindEvent() {
+ 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 = com_util.formatString('{0}{1}\n{2}', varName, assignCode, 'type(' + varName + ').__name__');
+ vpKernel.execute(code).then(function (resultObj) {
+ let { result } = resultObj;
+ if (result.includes(varType)) {
+ com_util.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, that.state);
+ $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({
+ type: "instance_editor_selected",
+ varName: varName,
+ varType: varType,
+ isMethod: false
+ });
+ });
+
+ // select method
+ $(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, that.state);
+ $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({
+ type: "instance_editor_selected",
+ varName: varName,
+ varType: varType,
+ isMethod: true
+ });
+ });
+
+ // parameter input
+ $(document).on('change', this.wrapSelector('.' + VP_INS_PARAMETER), function (event) {
+ var parameter = $(this).val();
+ var variable = $(that.pageThis.wrapSelector('#' + that.targetId)).val();
+ var splitList = variable.split('.');
+ if (splitList && splitList.length > 0) {
+ var lastSplit = splitList[splitList.length - 1];
+ var matchList = lastSplit.match(/\(.*?\)$/gi);
+ if (matchList && matchList.length > 0) {
+ var lastBracket = matchList[matchList.length - 1];
+ splitList[splitList.length - 1] = lastSplit.replace(lastBracket, com_util.formatString('({0})', parameter));
+ var newCode = splitList.join('.');
+ $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({
+ type: "instance_editor_replaced",
+ originCode: variable,
+ newCode: newCode
+ });
+ }
+ }
+ });
+ }
+ reload(callback = undefined) {
+ 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 = com_util.formatString('_vp_print(_vp_load_instance("{0}"))', variable);
+
+ vpKernel.execute(code).then(function (resultObj) {
+ let { result } = resultObj;
+ var varObj = {
+ type: 'None',
+ list: []
+ };
+ try {
+ varObj = JSON.parse(result);
+ } catch {
+ ; // command error
+ }
+
+ var varType = varObj.type;
+ var varList = varObj.list;
+
+ that.state.type = varType;
+ that.state.list = varList;
+
+ // set variable type
+ // $(that.wrapSelector('#vp_instanceType')).text(varType);
+ // set dir list
+ 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 com_String();
+ var methodListTag = new com_String();
+ var attrList = [];
+ var methodList = [];
+ varList != undefined && varList.forEach(obj => {
+ if (obj.type.includes('Indexer')) {
+ methodListTag.appendFormatLine('', VP_INS_SELECT_CONTAINER, 'attr');
+ tag.appendFormatLine('
'); // VP_INS_SELECT_CONTAINER
+
+ tag.appendFormatLine('Attribute
', VP_INS_SELECT_TITLE);
+
+ tag.appendFormatLine('', 'position: relative;');
+ tag.appendFormatLine('', VP_INS_SEARCH, 'attr');
+ 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_BOX
+ tag.appendLine('- ', VP_INS_SELECT_LIST, 'attr');
+ tag.appendLine('
', VP_INS_SELECT_CONTAINER, 'method');
+ tag.appendFormatLine('
'); // VP_INS_SELECT_CONTAINER
+
+ 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_BOX
+ tag.appendLine('- ', VP_INS_SELECT_LIST, 'method');
+ tag.appendLine('
', VP_INS_PARAMETER_BOX);
+ tag.appendFormatLine('',
+ VP_INS_PARAMETER, 'input parameter');
+ tag.appendLine('
'); // VP_INS_PARAMETER
+
+ tag.appendLine('");
+ sbTagString.appendLine("");
+ sbTagString.appendLine("
");
+ sbTagString.appendLine("', APP_SELECT_CONTAINER, this.uuid);
// select - left
tag.appendFormatLine('
', APP_SELECT_LEFT);
// tag.appendFormatLine(''
// , APP_SELECT_SEARCH, 'Search Column');
- var vpSearchSuggest = new vpSuggestInputText.vpSuggestInputText();
+ var vpSearchSuggest = new SuggestInput();
vpSearchSuggest.addClass(APP_SELECT_SEARCH);
vpSearchSuggest.setPlaceholder('Search ' + this.mode);
vpSearchSuggest.setSuggestList(function() { return that.dataList; });
@@ -209,13 +214,13 @@ define([
// select - buttons
tag.appendFormatLine('
', APP_SELECT_BTN_BOX);
tag.appendFormatLine(''
- , APP_SELECT_ADD_ALL_BTN, 'Add all items', '
');
+ , APP_SELECT_ADD_ALL_BTN, 'Add all items', '
');
tag.appendFormatLine(''
- , APP_SELECT_ADD_BTN, 'Add selected items', '
');
+ , APP_SELECT_ADD_BTN, 'Add selected items', '
');
tag.appendFormatLine(''
- , APP_SELECT_DEL_BTN, 'Remove selected items', '
');
+ , APP_SELECT_DEL_BTN, 'Remove selected items', '
');
tag.appendFormatLine(''
- , APP_SELECT_DEL_ALL_BTN, 'Remove all items', '
');
+ , APP_SELECT_DEL_ALL_BTN, 'Remove all items', '
');
tag.appendLine('
'); // APP_SELECT_BTNS
// select - right
tag.appendFormatLine('');
+ , APP_SELECT_ADD_ALL_BTN, 'Add all items', '');
tag.appendFormatLine(''
- , APP_SELECT_ADD_BTN, 'Add selected items', '');
+ , APP_SELECT_ADD_BTN, 'Add selected items', '');
tag.appendFormatLine(''
- , APP_SELECT_DEL_BTN, 'Remove selected items', '');
+ , APP_SELECT_DEL_BTN, 'Remove selected items', '');
tag.appendFormatLine(''
- , APP_SELECT_DEL_ALL_BTN, 'Remove all items', '');
+ , APP_SELECT_DEL_ALL_BTN, 'Remove all items', '');
tag.appendLine('', APP_SELECT_RIGHT);
@@ -227,12 +232,12 @@ define([
}
renderSelectionBox(dataList) {
- var tag = new sb.StringBuilder();
+ var tag = new com_String();
tag.appendFormatLine('
', APP_SELECT_BOX, 'left', APP_DROPPABLE, 'no-selection');
// get data and make draggable items
dataList && dataList.forEach((data, idx) => {
// for column : data.array parsing
- var info = vpCommon.safeString(data.array);
+ var info = com_util.safeString(data.array);
if (info && info != 'undefined') {
info = data.value + ':\n' + info;
} else {
@@ -247,12 +252,12 @@ define([
}
renderSelectedBox(dataList) {
- var tag = new sb.StringBuilder();
+ var tag = new com_String();
tag.appendFormatLine('
', APP_SELECT_BOX, 'right', APP_DROPPABLE, 'no-selection');
// get data and make draggable items
dataList && dataList.forEach((data, idx) => {
// for column : data.array parsing
- var info = vpCommon.safeString(data.array);
+ var info = com_util.safeString(data.array);
if (info) {
info = data.value + ':\n';
} else {
@@ -269,11 +274,11 @@ define([
bindEvent() {
var that = this;
// item indexing - search
- $(this._wrapSelector('.' + APP_SELECT_SEARCH)).on('change', function(event) {
+ $(this.wrapSelector('.' + APP_SELECT_SEARCH)).on('change', function(event) {
var searchValue = $(this).val();
// filter added items
- var addedTags = $(that._wrapSelector('.' + APP_SELECT_RIGHT + ' .' + APP_SELECT_ITEM + '.added'));
+ var addedTags = $(that.wrapSelector('.' + APP_SELECT_RIGHT + ' .' + APP_SELECT_ITEM + '.added'));
var addedList = [];
for (var i = 0; i < addedTags.length; i++) {
var value = $(addedTags[i]).attr('data-colname');
@@ -282,7 +287,7 @@ define([
var filteredList = that.dataList.filter(x => x.value.includes(searchValue) && !addedList.includes(x.value));
// items indexing
- $(that._wrapSelector('.' + APP_SELECT_BOX + '.left')).replaceWith(function() {
+ $(that.wrapSelector('.' + APP_SELECT_BOX + '.left')).replaceWith(function() {
return that.renderSelectionBox(filteredList);
});
@@ -291,7 +296,7 @@ define([
});
// item indexing
- $(this._wrapSelector('.' + APP_SELECT_ITEM)).on('click', function(event) {
+ $(this.wrapSelector('.' + APP_SELECT_ITEM)).on('click', function(event) {
var dataIdx = $(this).attr('data-idx');
var idx = $(this).index();
var added = $(this).hasClass('added'); // right side added item?
@@ -300,21 +305,21 @@ define([
// remove selection for select box on the other side
if (added) {
// remove selection for left side
- $(that._wrapSelector('.' + APP_SELECT_ITEM + ':not(.added)')).removeClass('selected');
+ $(that.wrapSelector('.' + APP_SELECT_ITEM + ':not(.added)')).removeClass('selected');
// set selector
selector = '.added';
} else {
// remove selection for right(added) side
- $(that._wrapSelector('.' + APP_SELECT_ITEM + '.added')).removeClass('selected');
+ $(that.wrapSelector('.' + APP_SELECT_ITEM + '.added')).removeClass('selected');
// set selector
selector = ':not(.added)';
}
- if (vpKeyManager.keyCheck.ctrlKey) {
+ if (vpEvent.keyManager.keyCheck.ctrlKey) {
// multi-select
that.pointer = { start: idx, end: -1 };
$(this).toggleClass('selected');
- } else if (vpKeyManager.keyCheck.shiftKey) {
+ } else if (vpEvent.keyManager.keyCheck.shiftKey) {
// slicing
var startIdx = that.pointer.start;
@@ -323,14 +328,14 @@ define([
that.pointer = { start: idx, end: -1 };
} else if (startIdx > idx) {
// add selection from idx to startIdx
- var tags = $(that._wrapSelector('.' + APP_SELECT_ITEM + selector));
+ var tags = $(that.wrapSelector('.' + APP_SELECT_ITEM + selector));
for (var i = idx; i <= startIdx; i++) {
$(tags[i]).addClass('selected');
}
that.pointer = { start: startIdx, end: idx };
} else if (startIdx <= idx) {
// add selection from startIdx to idx
- var tags = $(that._wrapSelector('.' + APP_SELECT_ITEM + selector));
+ var tags = $(that.wrapSelector('.' + APP_SELECT_ITEM + selector));
for (var i = startIdx; i <= idx; i++) {
$(tags[i]).addClass('selected');
}
@@ -340,40 +345,40 @@ define([
// single-select
that.pointer = { start: idx, end: -1 };
// un-select others
- $(that._wrapSelector('.' + APP_SELECT_ITEM + selector)).removeClass('selected');
+ $(that.wrapSelector('.' + APP_SELECT_ITEM + selector)).removeClass('selected');
// select this
$(this).addClass('selected');
}
});
// item indexing - add all
- $(this._wrapSelector('.' + APP_SELECT_ADD_ALL_BTN)).on('click', function(event) {
- $(that._wrapSelector('.' + APP_SELECT_BOX + '.left .' + APP_SELECT_ITEM)).appendTo(
- $(that._wrapSelector('.' + APP_SELECT_BOX + '.right'))
+ $(this.wrapSelector('.' + APP_SELECT_ADD_ALL_BTN)).on('click', function(event) {
+ $(that.wrapSelector('.' + APP_SELECT_BOX + '.left .' + APP_SELECT_ITEM)).appendTo(
+ $(that.wrapSelector('.' + APP_SELECT_BOX + '.right'))
);
- $(that._wrapSelector('.' + APP_SELECT_ITEM)).addClass('added');
- $(that._wrapSelector('.' + APP_SELECT_ITEM + '.selected')).removeClass('selected');
+ $(that.wrapSelector('.' + APP_SELECT_ITEM)).addClass('added');
+ $(that.wrapSelector('.' + APP_SELECT_ITEM + '.selected')).removeClass('selected');
that.pointer = { start: -1, end: -1 };
});
// item indexing - add
- $(this._wrapSelector('.' + APP_SELECT_ADD_BTN)).on('click', function(event) {
+ $(this.wrapSelector('.' + APP_SELECT_ADD_BTN)).on('click', function(event) {
var selector = '.selected';
- $(that._wrapSelector('.' + APP_SELECT_ITEM + selector)).appendTo(
- $(that._wrapSelector('.' + APP_SELECT_BOX + '.right'))
+ $(that.wrapSelector('.' + APP_SELECT_ITEM + selector)).appendTo(
+ $(that.wrapSelector('.' + APP_SELECT_BOX + '.right'))
);
- $(that._wrapSelector('.' + APP_SELECT_ITEM + selector)).addClass('added');
- $(that._wrapSelector('.' + APP_SELECT_ITEM + selector)).removeClass('selected');
+ $(that.wrapSelector('.' + APP_SELECT_ITEM + selector)).addClass('added');
+ $(that.wrapSelector('.' + APP_SELECT_ITEM + selector)).removeClass('selected');
that.pointer = { start: -1, end: -1 };
});
// item indexing - del
- $(this._wrapSelector('.' + APP_SELECT_DEL_BTN)).on('click', function(event) {
+ $(this.wrapSelector('.' + APP_SELECT_DEL_BTN)).on('click', function(event) {
var selector = '.selected';
- var targetBoxQuery = that._wrapSelector('.' + APP_SELECT_BOX + '.left');
+ var targetBoxQuery = that.wrapSelector('.' + APP_SELECT_BOX + '.left');
- var selectedTag = $(that._wrapSelector('.' + APP_SELECT_ITEM + selector));
+ var selectedTag = $(that.wrapSelector('.' + APP_SELECT_ITEM + selector));
selectedTag.appendTo(
$(targetBoxQuery)
);
@@ -389,9 +394,9 @@ define([
});
// item indexing - delete all
- $(this._wrapSelector('.' + APP_SELECT_DEL_ALL_BTN)).on('click', function(event) {
- var targetBoxQuery = that._wrapSelector('.' + APP_SELECT_BOX + '.left');
- $(that._wrapSelector('.' + APP_SELECT_BOX + '.right .' + APP_SELECT_ITEM)).appendTo(
+ $(this.wrapSelector('.' + APP_SELECT_DEL_ALL_BTN)).on('click', function(event) {
+ var targetBoxQuery = that.wrapSelector('.' + APP_SELECT_BOX + '.left');
+ $(that.wrapSelector('.' + APP_SELECT_BOX + '.right .' + APP_SELECT_ITEM)).appendTo(
$(targetBoxQuery)
);
// sort
@@ -400,16 +405,16 @@ define([
}).appendTo(
$(targetBoxQuery)
);
- $(that._wrapSelector('.' + APP_SELECT_ITEM)).removeClass('added');
- $(that._wrapSelector('.' + APP_SELECT_ITEM + '.selected')).removeClass('selected');
+ $(that.wrapSelector('.' + APP_SELECT_ITEM)).removeClass('added');
+ $(that.wrapSelector('.' + APP_SELECT_ITEM + '.selected')).removeClass('selected');
that.pointer = { start: -1, end: -1 };
});
}
bindDraggable() {
var that = this;
- var draggableQuery = this._wrapSelector('.' + APP_DRAGGABLE);
- var droppableQuery = this._wrapSelector('.' + APP_DROPPABLE);
+ var draggableQuery = this.wrapSelector('.' + APP_DRAGGABLE);
+ var droppableQuery = this.wrapSelector('.' + APP_DROPPABLE);
$(draggableQuery).draggable({
// containment: '.select-' + type + ' .' + APP_DROPPABLE,
diff --git a/js/com/component/PopupComponent.js b/js/com/component/PopupComponent.js
new file mode 100644
index 00000000..aa975997
--- /dev/null
+++ b/js/com/component/PopupComponent.js
@@ -0,0 +1,755 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : PopupComponent.js
+ * Author : Black Logic
+ * Note : Popup Components for rendering objects
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 18
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] PopupComponent
+//============================================================================
+define([
+ 'text!vp_base/html/popupComponent.html!strip',
+ 'css!vp_base/css/popupComponent.css',
+ '../com_util',
+ '../com_Const',
+ '../com_String',
+ '../com_interface',
+ './Component',
+
+ /** codemirror */
+ 'codemirror/lib/codemirror',
+ 'codemirror/mode/python/python',
+ 'notebook/js/codemirror-ipython',
+ 'codemirror/addon/display/placeholder',
+ 'codemirror/addon/display/autorefresh'
+], function(popupComponentHtml, popupComponentCss
+ , com_util, com_Const, com_String, com_interface, Component, codemirror
+) {
+ 'use strict';
+
+ //========================================================================
+ // Declare class
+ //========================================================================
+ /**
+ * Component
+ */
+ class PopupComponent extends Component {
+ constructor(state={}, prop={}) {
+ super($('#site'), state, prop);
+ }
+
+ _init() {
+ this.eventTarget = '#vp_wrapper';
+ this.id = this.state.config.id;
+ this.name = this.state.config.name;
+ this.path = this.state.config.path;
+
+ this.config = {
+ sizeLevel: 0, // 0: 400x400 / 1: 500x500 / 2: 600x500 / 3: 750x500
+ executeMode: 'code', // cell execute mode
+ // show view box
+ codeview: true,
+ dataview: true,
+ // show footer
+ footer: true,
+ position: { right: 10, top: 120 },
+ size: { width: 400, height: 550 },
+ saveOnly: false
+ };
+
+ // check BoardFrame width and set initial position of popup
+ let boardWidth = $('#vp_boardFrame').width();
+ this.config.position.right = boardWidth + 10;
+
+ this.cmPythonConfig = {
+ mode: {
+ name: 'python',
+ version: 3,
+ singleLineStringErrors: false
+ },
+ height: '100%',
+ width: '100%',
+ indentUnit: 4,
+ lineNumbers: true,
+ matchBrackets: true,
+ autoRefresh: true,
+ theme: "ipython",
+ extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
+ }
+ this.cmReadonlyConfig = {
+ ...this.cmPythonConfig,
+ readOnly: true,
+ lineNumbers: false,
+ scrollbarStyle: "null"
+ }
+
+ this.cmCodeview = null;
+
+ this.cmCodeList = [];
+ }
+
+ wrapSelector(selector='') {
+ var sbSelector = new com_String();
+ var cnt = arguments.length;
+ if (cnt < 2) {
+ // if there's no more arguments
+ sbSelector.appendFormat(".vp-popup-frame.{0} {1}", this.uuid, selector);
+ } else {
+ // if there's more arguments
+ sbSelector.appendFormat(".vp-popup-frame.{0}", this.uuid);
+ for (var idx = 0; idx < cnt; idx++) {
+ sbSelector.appendFormat(" {0}", arguments[idx]);
+ }
+ }
+ return sbSelector.toString();
+ }
+
+ /**
+ * Add codemirror object
+ * @param {String} key stateKey
+ * @param {String} selector textarea class name
+ * @param {boolean} type code(python)/readonly/markdown
+ * @param {Object} etcOpt { events:[{key, callback}, ...] }
+ * @returns Object { key, selector, type, cm, ... }
+ */
+ _addCodemirror(key, selector, type='code', etcOpt={}) {
+ this.cmCodeList.push({ key: key, selector: selector, type: type, cm: null, ...etcOpt });
+ return this.cmCodeList[this.cmCodeList.length - 1];
+ }
+
+ /**
+ * bind codemirror
+ * @param {string} selector
+ */
+ _bindCodemirror() {
+ // codemirror editor (if available)
+ for (let i = 0; i < this.cmCodeList.length; i++) {
+ let cmObj = this.cmCodeList[i];
+ if (cmObj.cm == null) {
+ let cm = this.initCodemirror(cmObj);
+ cmObj.cm = cm;
+ }
+ }
+
+ // code view
+ if (this.config.codeview) {
+ if (!this.cmCodeview) {
+ // codemirror setting
+ let selector = this.wrapSelector('.vp-popup-codeview-box textarea');
+ let textarea = $(selector);
+ if (textarea && textarea.length > 0) {
+ this.cmCodeview = codemirror.fromTextArea(textarea[0], this.cmReadonlyConfig);
+ } else {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'No text area to create codemirror. (selector: '+selector+')');
+ }
+ } else {
+ this.cmCodeview.refresh();
+ }
+ }
+ }
+
+ /**
+ * Initialize codemirror
+ * @param {Object} cmObj { key, selector, type, ... }
+ */
+ initCodemirror(cmObj) {
+ let {key, selector, type, events} = cmObj;
+ let that = this;
+
+ let cmCode = null;
+ let targetTag = $(selector);
+ let cmConfig = this.cmPythonConfig;
+ if (type == 'readonly') {
+ cmConfig = {
+ ...cmConfig,
+ readOnly: true,
+ lineNumbers: false,
+ scrollbarStyle: "null"
+ }
+ } else if (type == 'markdown') {
+ cmConfig = {
+ ...cmConfig,
+ mode: 'markdown'
+ }
+ }
+
+ if (targetTag && targetTag.length > 0) {
+ cmCode = codemirror.fromTextArea(targetTag[0], cmConfig);
+ if (cmCode) {
+ // add class on text area
+ if (type != 'readonly') {
+ $(selector).parent().find('.CodeMirror').addClass('vp-writable-codemirror');
+ }
+ cmCode.on('focus', function() {
+ // disable other shortcuts
+ com_interface.disableOtherShortcut();
+ });
+ cmCode.on('blur', function(instance, evt) {
+ // enable other shortcuts
+ com_interface.enableOtherShortcut();
+ // instance = codemirror
+ // save its code to textarea component
+ instance.save();
+ that.state[key] = targetTag.val();
+ });
+ // bind events
+ events && events.forEach(evObj => {
+ cmCode.on(evObj.key, evObj.callback);
+ });
+ vpLog.display(VP_LOG_TYPE.DEVELOP, key, cmCode);
+ }
+ } else {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'No text area to bind codemirror. (selector: '+selector+')');
+ }
+
+ return cmCode;
+ }
+
+ setCmValue(key, value) {
+ let targetCmObj = this.cmCodeList.filter(obj => obj.key == key);
+ if (targetCmObj.length > 0) {
+ let cm = targetCmObj[0].cm;
+ if (cm) {
+ cm.setValue(value);
+ cm.save();
+ setTimeout(function () {
+ cm.refresh();
+ }, 1);
+ }
+ }
+ }
+
+ _bindEvent() {
+ var that = this;
+ // Close popup event
+ $(this.wrapSelector('.vp-popup-close')).on('click', function(evt) {
+ if (that.getTaskType() === 'task') {
+ $(that.eventTarget).trigger({
+ type: 'remove_option_page',
+ component: that
+ });
+ } else {
+ // if it's block, just hide it
+ $(that.eventTarget).trigger({
+ type: 'close_option_page',
+ component: that
+ });
+ }
+ });
+ // Toggle operation (minimize)
+ $(this.wrapSelector('.vp-popup-toggle')).on('click', function(evt) {
+ // that.toggle();
+ $(that.eventTarget).trigger({
+ type: 'close_option_page',
+ component: that
+ });
+ });
+ // Focus recognization
+ $(this.wrapSelector()).on('click', function() {
+ $(that.eventTarget).trigger({
+ type: 'focus_option_page',
+ component: that
+ });
+ });
+
+ // save state values
+ $(document).on('change', this.wrapSelector('.vp-state'), function() {
+ let id = $(this)[0].id;
+ let customKey = $(this).data('key');
+ let tagName = $(this).prop('tagName'); // returns with UpperCase
+ let newValue = '';
+ switch(tagName) {
+ case 'INPUT':
+ let inputType = $(this).prop('type');
+ if (inputType == 'text' || inputType == 'number') {
+ newValue = $(this).val();
+ break;
+ }
+ if (inputType == 'checkbox') {
+ newValue = $(this).prop('checked');
+ break;
+ }
+ break;
+ case 'TEXTAREA':
+ case 'SELECT':
+ default:
+ newValue = $(this).val();
+ break;
+ }
+
+ // if custom key is available, use it
+ if (customKey && customKey != '') {
+ // allow custom key until level 2
+ let customKeys = customKey.split('.');
+ if (customKeys.length == 2) {
+ that.state[customKeys[0]][customKeys[1]] = newValue;
+ } else {
+ that.state[customKey] = newValue;
+ }
+ } else {
+ that.state[id] = newValue;
+ }
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'saved state : ' + id+ '/'+tagName+'/'+newValue);
+ });
+
+ // Click buttons
+ $(this.wrapSelector('.vp-popup-button')).on('click', function(evt) {
+ var btnType = $(this).data('type');
+ switch(btnType) {
+ case 'code':
+ if ($(that.wrapSelector('.vp-popup-codeview-box')).is(':hidden')) {
+ that.openView('code');
+ } else {
+ that.closeView('code');
+ }
+ evt.stopPropagation();
+ break;
+ case 'data':
+ if ($(that.wrapSelector('.vp-popup-dataview-box')).is(':hidden')) {
+ that.openView('data');
+ } else {
+ that.closeView('data');
+ }
+ evt.stopPropagation();
+ break;
+ case 'cancel':
+ if (that.getTaskType() === 'task') {
+ $(that.eventTarget).trigger({
+ type: 'remove_option_page',
+ component: that
+ });
+ } else {
+ // if it's block, just hide it
+ $(that.eventTarget).trigger({
+ type: 'close_option_page',
+ component: that
+ });
+ }
+ break;
+ case 'run':
+ that.save();
+ that.run();
+ break;
+ case 'show-detail':
+ $(that.wrapSelector('.vp-popup-run-detailbox')).show();
+ evt.stopPropagation();
+ break;
+ case 'save':
+ that.save();
+ break;
+ }
+ });
+ // Click detail buttons
+ $(this.wrapSelector('.vp-popup-detail-button')).on('click', function(evt) {
+ var btnType = $(this).data('type');
+ switch(btnType) {
+ case 'apply':
+ that.save();
+ break;
+ case 'add':
+ that.save();
+ that.run(false);
+ break;
+ }
+ });
+ // Close event for inner popup
+ $(this.wrapSelector('.vp-inner-popup-close')).on('click', function(evt) {
+ that.handleInnerCancel();
+ that.closeInnerPopup();
+ });
+ // Click button event for inner popup
+ $(this.wrapSelector('.vp-inner-popup-button')).on('click', function(evt) {
+ let btnType = $(this).data('type');
+ switch(btnType) {
+ case 'cancel':
+ that.handleInnerCancel();
+ that.closeInnerPopup();
+ break;
+ case 'ok':
+ that.handleInnerOk();
+ break;
+ }
+ });
+ }
+
+ _unbindEvent() {
+ $(document).off('change', this.wrapSelector('.vp-state'));
+ }
+
+ _bindDraggable() {
+ var that = this;
+ $(this.wrapSelector()).draggable({
+ handle: '.vp-popup-title',
+ containment: 'body',
+ start: function(evt, ui) {
+ // check focused
+ $(that.eventTarget).trigger({
+ type: 'focus_option_page',
+ component: that
+ });
+ }
+ });
+ }
+
+ _unbindResizable() {
+ $(this.wrapSelector()).resizable('disable');
+ }
+
+ _bindResizable() {
+ $(this.wrapSelector()).resizable({
+ handles: 'all'
+ });
+ }
+
+ templateForBody() {
+ /** Implementation needed */
+ return '';
+ }
+
+ template() {
+ this.$pageDom = $(popupComponentHtml);
+ // set title
+ this.$pageDom.find('.vp-popup-title').text(this.state.config.name);
+ // set body
+ this.$pageDom.find('.vp-popup-body').html(this.templateForBody());
+ return this.$pageDom;
+ }
+
+ /**
+ * Render page
+ * @param {Object} config configure whether to use buttons or not
+ */
+ render(inplace=false) {
+ super.render(inplace);
+
+ let {codeview, dataview, footer, sizeLevel, position} = this.config;
+
+ // codeview & dataview button hide/show
+ if (!codeview) {
+ $(this.wrapSelector('.vp-popup-button[data-type="code"]')).hide();
+ }
+ if (!dataview) {
+ $(this.wrapSelector('.vp-popup-button[data-type="data"]')).hide();
+ } else {
+ if (!codeview) {
+ $(this.wrapSelector('.vp-popup-button[data-type="data"]')).css({left: '15px', top: '9px'});
+ }
+ }
+
+ // footer
+ if(!footer) {
+ $(this.wrapSelector('.vp-popup-footer')).hide();
+ // set body wider
+ $(this.wrapSelector('.vp-popup-body')).css({
+ 'height': 'calc(100% - 30px)'
+ })
+ }
+
+ // popup-frame size
+ switch (sizeLevel) {
+ case 1:
+ this.config.size = { width: 500, height: 550 };
+ break;
+ case 2:
+ this.config.size = { width: 600, height: 550 };
+ break;
+ case 3:
+ this.config.size = { width: 760, height: 550 };
+ break;
+ }
+
+ // set detailed size
+ $(this.wrapSelector()).css({
+ width: this.config.size.width + 'px',
+ height: this.config.size.height + 'px'
+ });
+
+ // position
+ $(this.wrapSelector()).css({ top: position.top, right: position.right });
+
+ // set apply mode
+ if (this.config.saveOnly) {
+ this.setSaveOnlyMode();
+ }
+
+ this._bindDraggable();
+ this._bindResizable();
+ }
+
+ templateForInnerPopup() {
+ /** Implementation needed */
+ return '';
+ }
+
+ /**
+ * Render inner popup for selecting columns
+ * @returns Inner popup page dom
+ */
+ renderInnerPopup() {
+ $(this.wrapSelector('.vp-inner-popup-body')).html(this.templateForInnerPopup());
+ }
+
+ templateForDataView() {
+ /** Implementation needed */
+ return '';
+ }
+
+ renderDataView() {
+ $('.vp-popup-dataview-box').html('');
+ $('.vp-popup-dataview-box').html(this.templateForDataView());
+ }
+
+ generateCode() {
+ /** Implementation needed */
+ return '';
+ }
+
+ load() {
+
+ }
+
+ loadState() {
+ /** Implementation needed */
+ }
+
+ saveState() {
+ /** Implementation needed */
+ let that = this;
+ $(this.wrapSelector('.vp-state')).each((idx, tag) => {
+ let id = tag.id;
+ let customKey = $(tag).data('key');
+ let tagName = $(tag).prop('tagName'); // returns with UpperCase
+ let newValue = '';
+ switch(tagName) {
+ case 'INPUT':
+ let inputType = $(tag).prop('type');
+ if (inputType == 'text' || inputType == 'number') {
+ newValue = $(tag).val();
+ break;
+ }
+ if (inputType == 'checkbox') {
+ newValue = $(tag).prop('checked');
+ break;
+ }
+ break;
+ case 'TEXTAREA':
+ case 'SELECT':
+ default:
+ newValue = $(tag).val();
+ break;
+ }
+
+ // if custom key is available, use it
+ if (customKey && customKey != '') {
+ // allow custom key until level 2
+ let customKeys = customKey.split('.');
+ if (customKeys.length == 2) {
+ that.state[customKeys[0]][customKeys[1]] = newValue;
+ } else {
+ that.state[customKey] = newValue;
+ }
+ } else {
+ that.state[id] = newValue;
+ }
+ });
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'savedState', that.state);
+ }
+
+ run(execute=true) {
+ let mode = this.config.executeMode;
+ let blockNumber = -1;
+ // check if it's block
+ if (this.getTaskType() == 'block') {
+ let block = this.taskItem;
+ blockNumber = block.blockNumber;
+ }
+ com_interface.insertCell(mode, this.generateCode(), execute, blockNumber);
+ }
+
+ /**
+ * Open popup
+ * - show popup
+ * - focus popup
+ * - bind codemirror
+ */
+ open() {
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'open popup', this);
+ this.loadState();
+ this.show();
+ this._bindCodemirror();
+
+ $(this.eventTarget).trigger({
+ type: 'focus_option_page',
+ component: this
+ });
+ }
+
+ setSaveOnlyMode() {
+ // show save button only
+ $(this.wrapSelector('.vp-popup-runadd-box')).hide();
+ $(this.wrapSelector('.vp-popup-save-button')).show();
+ }
+
+ /**
+ * Close popup
+ * - remove popup
+ * - unbind event
+ */
+ close() {
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'close popup', this);
+ this.saveState();
+ this.hide();
+ }
+
+ save() {
+ $(this.eventTarget).trigger({
+ type: 'apply_option_page',
+ blockType: 'block',
+ component: this
+ });
+ }
+
+ remove() {
+ vpLog.display(VP_LOG_TYPE.DEVELOP, 'remove popup', this);
+ this._unbindEvent();
+ $(this.wrapSelector()).remove();
+ }
+
+ focus() {
+ $('.vp-popup-frame').removeClass('vp-focused');
+ $('.vp-popup-frame').css({ 'z-index': 200 });
+ $(this.wrapSelector()).addClass('vp-focused');
+ $(this.wrapSelector()).css({ 'z-index': 205 }); // move forward
+ }
+
+ blur() {
+ $(this.wrapSelector()).removeClass('vp-focused');
+ }
+
+ show() {
+ this.taskItem && this.taskItem.focusItem();
+ $(this.wrapSelector()).show();
+ }
+
+ hide() {
+ this.taskItem && this.taskItem.blurItem();
+ $(this.wrapSelector()).hide();
+ }
+
+ isHidden() {
+ return !$(this.wrapSelector()).is(':visible');
+ }
+
+ /**
+ * minimize and maximize
+ */
+ toggle() {
+ let $this = $(this.wrapSelector());
+ let isClosed = $this.hasClass('vp-close');
+ if (isClosed) {
+ // show
+ $this.removeClass('vp-close');
+ $(this.wrapSelector('.vp-popup-toggle')).attr('src', '/nbextensions/visualpython/img/tri_down_fill_dark.svg');
+ } else {
+ // hide
+ $this.addClass('vp-close');
+ $(this.wrapSelector('.vp-popup-toggle')).attr('src', '/nbextensions/visualpython/img/tri_right_fill_dark.svg');
+ }
+ }
+
+ /**
+ * Open view
+ * @param {*} viewType code / data
+ */
+ openView(viewType) {
+ if (viewType == 'code') {
+ var code = this.generateCode();
+ this.cmCodeview.setValue(code);
+ this.cmCodeview.save();
+
+ var that = this;
+ setTimeout(function() {
+ that.cmCodeview.refresh();
+ }, 1);
+ $(this.wrapSelector('.vp-popup-dataview-box')).hide();
+ } else {
+ this.renderDataView();
+ $(this.wrapSelector('.vp-popup-codeview-box')).hide();
+ }
+
+ $(this.wrapSelector('.vp-popup-'+viewType+'view-box')).show();
+ }
+
+ closeView(viewType) {
+ $(this.wrapSelector('.vp-popup-'+viewType+'view-box')).hide();
+ }
+
+ /**
+ * Open inner popup box
+ */
+ openInnerPopup(title) {
+ $(this.wrapSelector('.vp-inner-popup-title')).text(title);
+ $(this.wrapSelector('.vp-inner-popup-box')).show();
+ }
+
+ /**
+ * Close inner popup box
+ */
+ closeInnerPopup() {
+ $(this.wrapSelector('.vp-inner-popup-box')).hide();
+ }
+
+ handleInnerCancel() {
+ /** Implementation needed */
+ }
+
+ handleInnerOk() {
+ /** Implementation needed */
+ }
+
+ //========================================================================
+ // Get / set
+ //========================================================================
+ getState() {
+ return this.state;
+ }
+
+ getCodemirror(key) {
+ let filteredCm = this.cmCodeList.find(cmObj => cmObj.key == key);
+ return filteredCm;
+ }
+
+ //========================================================================
+ // Control task item
+ //========================================================================
+ setTaskItem(taskItem) {
+ this.taskItem = taskItem;
+ }
+
+ getTaskType() {
+ if (this.taskItem) {
+ if (this.taskItem.constructor.name == 'Block') {
+ return 'block';
+ }
+ if (this.taskItem.constructor.name == 'TaskItem') {
+ return 'task';
+ }
+ }
+ return null;
+ }
+
+ removeBlock() {
+ this.taskItem && this.taskItem.removeItem();
+ }
+ }
+
+ return PopupComponent;
+
+});
+
+/* End of file */
\ No newline at end of file
diff --git a/js/com/component/SampleComponent.js b/js/com/component/SampleComponent.js
new file mode 100644
index 00000000..588372cd
--- /dev/null
+++ b/js/com/component/SampleComponent.js
@@ -0,0 +1,66 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : SampleComponent.js
+ * Author : Black Logic
+ * Note : Sample Component
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 18
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] SampleComponent
+//============================================================================
+define([
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/component/Component'
+], function(com_String, Component) {
+
+ /**
+ * SampleComponent
+ * Add below code in /data/libraries.json
+ {
+ "id" : "apps_sample",
+ "type" : "function",
+ "level": 1,
+ "name" : "Sample",
+ "tag" : "SAMPLE,APPS",
+ "path" : "visualpython - apps - sample",
+ "desc" : "Sample app for testing",
+ "file" : "m_apps/SampleApp",
+ "apps" : {
+ "color": 4,
+ "icon": "apps/apps_white.svg"
+ }
+ }
+ */
+ class SampleComponent extends Component {
+ _init() {
+ super._init();
+ /** Write codes executed before rendering */
+
+ }
+
+ _bindEvent() {
+ /** Implement binding events */
+
+ }
+
+ template() {
+ /** Implement generating template */
+ var page = new com_String();
+
+ return page.toString();
+ }
+
+ render() {
+ super.render();
+ /** Implement after rendering */
+
+ }
+
+ }
+
+ return SampleComponent;
+});
\ No newline at end of file
diff --git a/js/com/component/SuccessMessage.js b/js/com/component/SuccessMessage.js
new file mode 100644
index 00000000..439d9490
--- /dev/null
+++ b/js/com/component/SuccessMessage.js
@@ -0,0 +1,49 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : SuccessMessage.js
+ * Author : Black Logic
+ * Note : SuccessMessage
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 18
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] SuccessMessage
+//============================================================================
+define([
+ 'text!vp_base/html/component/successMessage.html!strip',
+ 'css!vp_base/css/component/successMessage.css',
+ 'vp_base/js/com/component/Component'
+], function(msgHtml, msgCss, Component) {
+
+ /**
+ * SuccessMessage
+ */
+ class SuccessMessage extends Component {
+ constructor(title, timeout=1500) {
+ super($('#header'), { title: title, timeout: timeout });
+ }
+
+ template() {
+ return msgHtml;
+ }
+
+ render() {
+ super.render();
+
+ // set title
+ $(this.wrapSelector('.vp-successMessage-title')).text(this.state.title);
+
+ let that = this;
+ // remove after timeout
+ setTimeout( function() {
+ $(that.wrapSelector()).remove();
+ }, this.state.timeout);
+ }
+
+ }
+
+ return SuccessMessage;
+});
\ No newline at end of file
diff --git a/js/com/component/SuggestInput.js b/js/com/component/SuggestInput.js
new file mode 100644
index 00000000..fe5fa11f
--- /dev/null
+++ b/js/com/component/SuggestInput.js
@@ -0,0 +1,163 @@
+define([
+ 'vp_base/js/com/com_util',
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/component/Component',
+], function (com_util, com_String, Component) {
+ /**
+ * @class SuggestInput
+ * @constructor
+ */
+ class SuggestInput extends Component{
+ constructor() {
+ super(null, {});
+ }
+
+ _init() {
+ this._value = "";
+ this._placeholder = "";
+ this._compID = "";
+ this._additionalClass = "";
+ this._normalFilter = true;
+ this._suggestList = new Array();
+ this._selectEvent = undefined;
+ this._attributes = {};
+ this._minLength = 0;
+ }
+
+ render() {
+ ;
+ }
+ /**
+ * value
+ * @param {String} value value
+ */
+ setValue(value = "") {
+ this._value = value;
+ }
+ /**
+ * placeholder
+ * @param {String} placeholder placeholder
+ */
+ setPlaceholder(placeholder = "") {
+ this._placeholder = placeholder;
+ }
+ /**
+ * Component id
+ * @param {String} compID
+ */
+ setComponentID(compID = "") {
+ this._compID = compID;
+ }
+ /**
+ * normal filter usage
+ * @param {String} normalFilter
+ */
+ setNormalFilter(normalFilter = true) {
+ this._normalFilter = normalFilter;
+ }
+ /**
+ * suggest list
+ * @param {Array or Function} suggestList
+ */
+ setSuggestList(suggestList = new Array()) {
+ this._suggestList = suggestList;
+ }
+ /**
+ * show default list
+ * - true: autocomplete.minLength to 0
+ * - false: autocomplete.minLength to 1
+ * @param {bool} showDefaultList
+ */
+ setMinSearchLength(minLength) {
+ this._minLength = minLength;
+ }
+ /**
+ * Additional Class
+ * @param {String} additionalClass
+ */
+ addClass(additionalClass = "") {
+ if (additionalClass == "")
+ return;
+ this._additionalClass = com_util.formatString("{0} {1}", this._additionalClass, additionalClass);
+ }
+ addAttribute(key, value) {
+ this._attributes = {
+ ...this._attributes,
+ [key]: value
+ };
+ }
+ /**
+ * selection event
+ * @param {function} selectEvent
+ */
+ setSelectEvent(selectEvent) {
+ if (typeof selectEvent != "function") {
+ selectEvent = undefined;
+ }
+ this._selectEvent = selectEvent;
+ }
+ /**
+ * icon input box tag
+ * @returns html icon input text tag string
+ */
+ toTagString() {
+ var sbTagString = new com_String();
+ var that = this;
+
+ let minLength = this._minLength;
+
+ // make attributes
+ var attributes = Object.keys(this._attributes).map(key => key + '="' + this._attributes[key] + '"').join(" ");
+
+ sbTagString.appendFormatLine(``,
+ that.uuid, 'suggest-input-uninit', that._additionalClass, that._compID == "" ? "" : com_util.formatString("id='{0}'", that._compID), that._placeholder, that._value, attributes);
+
+ $(document).on(com_util.formatString("focus.init-{0}", that.uuid), com_util.formatString(".{0}.{1}", that.uuid, 'suggest-input-uninit'), function () {
+ $(document).unbind(com_util.formatString(".init-{0}", that.uuid));
+
+ $(com_util.formatString(".{0}", that.uuid)).removeClass('suggest-input-uninit').addClass('suggest-input');
+
+ $(com_util.formatString(".{0}", that.uuid)).autocomplete({
+ autoFocus: true,
+ minLength: minLength,
+ source: function (req, res) {
+ var srcList = typeof that._suggestList == "function" ? that._suggestList() : that._suggestList;
+ var returlList = new Array();
+ if (that._normalFilter) {
+ for (var idx = 0; idx < srcList.length; idx++) {
+ // srcList as object array
+ if (typeof srcList[idx] == "object") {
+ // { label: string, value: string } format
+ if (srcList[idx].label.toString().toLowerCase().includes(req.term.trim().toLowerCase())) {
+ returlList.push(srcList[idx]);
+ }
+ } else if (srcList[idx].toString().toLowerCase().includes(req.term.trim().toLowerCase()))
+ returlList.push(srcList[idx]);
+ }
+ } else {
+ returlList = srcList;
+ }
+ res(returlList);
+ },
+ select: function (evt, ui) {
+ let result = true;
+ if (typeof that._selectEvent == "function")
+ result = that._selectEvent(ui.item.value, ui.item);
+ if (result != undefined) {
+ return result;
+ }
+ return true;
+ }
+ }).focus(function () {
+ $(com_util.formatString(".{0}", that.uuid)).autocomplete('search', $(com_util.formatString(".{0}", that.uuid)).val());
+ }).click(function () {
+ $(com_util.formatString(".{0}", that.uuid)).autocomplete('search', $(com_util.formatString(".{0}", that.uuid)).val());
+ });
+ });
+
+ return sbTagString.toString();
+ }
+ }
+
+ return SuggestInput;
+});
\ No newline at end of file
diff --git a/js/com/component/VarSelector.js b/js/com/component/VarSelector.js
new file mode 100644
index 00000000..c4d89bef
--- /dev/null
+++ b/js/com/component/VarSelector.js
@@ -0,0 +1,219 @@
+define([
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/com_util',
+], function(com_String, com_util) {
+
+ const VP_VS_BOX = 'vp-vs-box';
+ const VP_VS_DATA_TYPE = 'vp-vs-data-type';
+ const VP_VS_VARIABLES = 'vp-vs-variables';
+ const VP_VS_TYPING_INPUT = 'vp-vs-typing-input';
+
+ /**
+ * @class VarSelector
+ * @param {Array} dataTypes
+ * @param {String} defaultType
+ * @constructor
+ *
+ * using sample:
+ var varSelector = new vpVarSelector(this, ['DataFrame', 'Series'], 'DataFrame');
+ $(this.wrapSelector('.vp-vs-tester')).html(varSelector.render());
+ */
+ class VarSelector {
+ constructor(dataTypes, defaultType = '', showOthers = true, useTyping = true) {
+ this.uuid = 'u' + com_util.getUUID();
+ this.label = {
+ 'others': 'Others',
+ 'typing': 'Typing'
+ };
+
+ this.boxClass = [];
+
+ this.id = '';
+ this.class = [];
+ this.attributes = {};
+
+ this.typeClass = [];
+ this.varClass = [];
+
+ this.dataTypes = dataTypes;
+ if (defaultType == '') {
+ if (dataTypes.length > 0) {
+ defaultType = dataTypes[0];
+ } else {
+ }
+ }
+ this.state = {
+ selectedType: defaultType,
+ varList: []
+ };
+
+ this.defaultType = defaultType;
+ this.defaultValue = '';
+
+ this.showOthers = showOthers;
+ this.useTyping = useTyping;
+
+ this.reload();
+ this.bindEvent();
+ }
+ setComponentId(id) {
+ this.id = id;
+ }
+ addBoxClass(classname) {
+ this.boxClass.push(classname);
+ }
+ addClass(classname) {
+ this.class.push(classname);
+ }
+ addTypeClass(classname) {
+ this.typeClass.push(classname);
+ }
+ addVarClass(classname) {
+ this.varClass.push(classname);
+ }
+ addAttribute(key, value) {
+ this.attributes.push({ [key]: value });
+ }
+ setValue(value) {
+ this.defaultValue = value;
+ }
+ wrapSelector(selector = '') {
+ return com_util.formatString('.{0} {1}', this.uuid, selector);
+ }
+ render(defaultType = this.defaultType, defaultValue = this.defaultValue) {
+ var tag = new com_String();
+
+ // var selector box
+ tag.appendFormatLine('
', VP_VS_BOX, this.uuid, this.boxClass.join(' '));
+
+ // // hidden input value
+ // tag.appendFormatLine('',
+ // this.attributes.id? 'id="' + this.attributes.id + '"': '');
+ // data type selector
+ tag.appendFormatLine(''); // VP_VS_DATA_TYPE
+
+
+ // variable selctor
+ tag.appendLine(this.renderVariableList(this.state.varList));
+
+ var attrStr = Object.keys(this.attributes).map(key => key + '="' + this.attributes[key] + '"').join(' ');
+
+ // typing
+ tag.appendFormatLine('',
+ VP_VS_TYPING_INPUT, 'vp-input m', this.class.join(' '),
+ 'Type your code',
+ this.id ? 'id="' + this.id + '"' : '',
+ defaultValue,
+ defaultType,
+ attrStr);
+
+
+ tag.appendLine('
'); // VP_VS_BOX
+ return tag.toString();
+ }
+ reload() {
+ var that = this;
+ // load using kernel
+ var dataTypes = this.showOthers ? [] : this.dataTypes;
+ vpKernel.getDataList(dataTypes).then(function (resultObj) {
+ try {
+ let { result, type, msg } = resultObj;
+ var varList = JSON.parse(result);
+ that.state.varList = varList;
+ // render variable list
+ that.loadVariableList(varList);
+ } catch (ex) {
+ // console.log(ex);
+ }
+ });
+ }
+ renderVariableList(varList) {
+ var tag = new com_String();
+ tag.appendFormatLine(''); // VP_VS_VARIABLES
+ return tag.toString();
+ }
+ loadVariableList(varList) {
+ var filteredList = varList;
+ var that = this;
+ if (this.state.selectedType == 'others') {
+ filteredList = varList.filter(v => !this.dataTypes.includes(v.varType));
+ } else if (this.state.selectedType == 'typing') {
+ filteredList = [];
+ } else {
+ filteredList = varList.filter(v => v.varType == this.state.selectedType);
+ }
+
+ // replace
+ $(this.wrapSelector('.' + VP_VS_VARIABLES)).replaceWith(function () {
+ return that.renderVariableList(filteredList);
+ });
+ $(this.wrapSelector('.' + VP_VS_VARIABLES)).trigger('change');
+ }
+ bindEvent() {
+ var that = this;
+ // data type selection
+ $(document).on('change', this.wrapSelector('.' + VP_VS_DATA_TYPE), function (event) {
+ // re-renderVariableList
+ var dataType = $(this).val();
+ that.state.selectedType = dataType;
+ if (dataType == 'typing') {
+ $(that.wrapSelector('.' + VP_VS_TYPING_INPUT)).val('');
+ $(that.wrapSelector('.' + VP_VS_TYPING_INPUT)).attr('data-type', '');
+ $(that.wrapSelector('.' + VP_VS_TYPING_INPUT)).show();
+ $(that.wrapSelector('.' + VP_VS_VARIABLES)).hide();
+ $(that.wrapSelector('.' + VP_VS_TYPING_INPUT)).trigger({
+ type: 'var_changed',
+ value: '',
+ dataType: ''
+ });
+ } else {
+ $(that.wrapSelector('.' + VP_VS_VARIABLES)).show();
+ $(that.wrapSelector('.' + VP_VS_TYPING_INPUT)).hide();
+ // 1) load variable once
+ that.loadVariableList(that.state.varList);
+ // 2) load on every selection of data types
+ // that.reload();
+ }
+ });
+
+ // variable selection
+ $(document).on('change', this.wrapSelector('.' + VP_VS_VARIABLES), function (event) {
+ var value = $(this).val();
+ var dataType = $(this).find('option:selected').attr('data-type');
+ $(that.wrapSelector('.' + VP_VS_TYPING_INPUT)).val(value);
+ $(that.wrapSelector('.' + VP_VS_TYPING_INPUT)).attr('data-type', dataType);
+ $(that.wrapSelector('.' + VP_VS_TYPING_INPUT)).trigger({
+ type: 'var_changed',
+ value: value,
+ dataType: dataType
+ });
+ });
+ }
+ }
+
+ return VarSelector;
+})
\ No newline at end of file
diff --git a/resource/pandas/plot/__init__.py b/js/com/component/__init__.py
similarity index 100%
rename from resource/pandas/plot/__init__.py
rename to js/com/component/__init__.py
diff --git a/resource/snippets/__init__.py b/js/com/lib/__init__.py
similarity index 100%
rename from resource/snippets/__init__.py
rename to js/com/lib/__init__.py
diff --git a/src/__init__.py b/js/com/template/__init__.py
similarity index 100%
rename from src/__init__.py
rename to js/com/template/__init__.py
diff --git a/js/loadVisualpython.js b/js/loadVisualpython.js
new file mode 100644
index 00000000..7ecf9025
--- /dev/null
+++ b/js/loadVisualpython.js
@@ -0,0 +1,247 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : loadVisualpython.js
+ * Author : Black Logic
+ * Note : Load Visual Python
+ * License : GPLv3 (GNU General Public License v3.0)
+ * Date : 2021. 08. 14
+ * Change Date :
+ */
+
+//============================================================================
+// Load Visual Python
+//============================================================================
+(
+ require.specified('base/js/namespace')
+ ? define
+ : function (deps, callback) {
+ 'use strict';
+ // if here, the Jupyter namespace hasn't been specified to be loaded.
+ // This means that we're probably embedded in a page,
+ // so we need to make our definition with a specific module name
+ return define('vp_base/js/loadVisualpython', deps, callback);
+ }
+)([
+ 'css!vp_base/css/root.css',
+ 'vp_base/js/com/com_Const',
+ 'vp_base/js/com/com_util',
+ 'vp_base/js/com/com_Config',
+ 'vp_base/js/com/com_Log',
+ 'vp_base/js/com/com_Kernel',
+ 'vp_base/js/com/com_interface',
+ 'vp_base/js/MainFrame'
+], function (rootCss, com_Const, com_util, com_Config, com_Log, com_Kernel, com_interface, MainFrame) {
+ 'use strict';
+
+ //========================================================================
+ // Define variable
+ //========================================================================
+ var Jupyter;
+ var events;
+ var liveNotebook = false;
+
+ var metadataSettings;
+ var vpPosition;
+ var vpFrame;
+
+ //========================================================================
+ // Require: Jupyter & events
+ //========================================================================
+ try {
+ // namespace's specified checking. events exception can occur
+ // this will work in a live notebook because nbextensions & custom.js are loaded
+ // by/after notebook.js, which requires base/js/namespace
+ Jupyter = require('base/js/namespace');
+ events = require('base/js/events');
+ liveNotebook = true;
+ } catch (err) {
+ // We *are* theoretically in a non-live notebook
+ console.log('[vp] working in non-live notebook'); //, err);
+ // in non-live notebook, there's no event structure, so we make our own
+ if (window.events === undefined) {
+ var Events = function () { };
+ window.events = $([new Events()]);
+ }
+ events = window.events;
+ }
+
+ //========================================================================
+ // Internal call function
+ //========================================================================
+
+ /**
+ * Add toolbar button
+ */
+ var _addToolBarVpButton = function () {
+ // Call notebookApp initialize event, if toolbar is not yet ready
+ if (!Jupyter.toolbar) {
+ events.on('app_initialized.NotebookApp', function (evt) {
+ _addToolBarVpButton();
+ });
+ return;
+ }
+
+ // Add toolbar button, if it's not existing
+ if ($('#' + com_Const.TOOLBAR_BTN_INFO.ID).length === 0) {
+ $(Jupyter.toolbar.add_buttons_group([
+ Jupyter.keyboard_manager.actions.register({
+ 'help': com_Const.TOOLBAR_BTN_INFO.HELP
+ , 'icon': com_Const.TOOLBAR_BTN_INFO.ICON
+ , 'handler': function () {
+ // Extension 버튼 클릭 시 실행
+ // _toggleVp(cfg);
+ vpFrame.toggleVp();
+ }
+ }, com_Const.TOOLBAR_BTN_INFO.NAME, com_Const.TOOLBAR_BTN_INFO.PREFIX)
+ ])).find('.btn').attr('id', com_Const.TOOLBAR_BTN_INFO.ID).addClass(com_Const.TOOLBAR_BTN_INFO.ICON_CONTAINER);
+ }
+ };
+
+ /**
+ * Create vp
+ * @param {Object} cfg configuration
+ * @param {*} st
+ */
+ var _loadVpResource = function (cfg, st) {
+ if (!liveNotebook)
+ cfg = $.extend(true, {}, vpConfig.defaultConfig, cfg);
+
+ vpFrame = new MainFrame();
+ vpFrame.loadMainFrame();
+
+ // TODO: hotkey control -> Implement under InputComponent or Event class
+ // input:text - hotkey control
+ $(document).on('focus', com_util.wrapSelector('input'), function() {
+ com_interface.disableOtherShortcut();
+ });
+ $(document).on('blur', com_util.wrapSelector('input'), function() {
+ com_interface.enableOtherShortcut();
+ });
+ $(document).on('focus', '.vp-popup-frame input', function() {
+ com_interface.disableOtherShortcut();
+ });
+ $(document).on('blur', '.vp-popup-frame input', function() {
+ com_interface.enableOtherShortcut();
+ });
+ $(document).on('focus', '#vp_fileNavigation input', function() {
+ com_interface.disableOtherShortcut();
+ });
+ $(document).on('blur', '#vp_fileNavigation input', function() {
+ com_interface.enableOtherShortcut();
+ });
+ // textarea - hotkey control
+ $(document).on('focus', com_util.wrapSelector('.vp-popup-frame textarea'), function() {
+ com_interface.disableOtherShortcut();
+ });
+ $(document).on('blur', com_util.wrapSelector('.vp-popup-frame textarea'), function() {
+ com_interface.enableOtherShortcut();
+ });
+ };
+
+ /**
+ * Declare background vp functions
+ */
+ var _readKernelFunction = function() {
+ var libraryList = [
+ 'printCommand.py',
+ 'fileNaviCommand.py',
+ 'pandasCommand.py',
+ 'variableCommand.py'
+ ];
+ libraryList.forEach(libName => {
+ var libPath = com_Const.PYTHON_PATH + libName
+ $.get(libPath).done(function(data) {
+ var code_init = data;
+ Jupyter.notebook.kernel.execute(code_init, { iopub: { output: function(data) {
+ console.log('visualpython - loaded library', data);
+ } } }, { silent: false });
+ }).fail(function() {
+ console.log('visualpython - failed to load getPath library');
+ });
+ })
+ }
+
+ var _setGlobalVariables = function() {
+ /**
+ * visualpython log util
+ * - use it instead of console.log
+ * ex) vpLog.display(VP_LOG_TYPE.LOG, 'log text');
+ */
+ window.vpLog = new com_Log();
+ /**
+ * visualpython log util types
+ * DEVELOP, LOG, ERROR
+ */
+ window.VP_LOG_TYPE = com_Log.LOG_TYPE;
+ /**
+ * visualpython config util
+ */
+ window.vpConfig = new com_Config();
+ window.VP_MODE_TYPE = com_Config.MODE_TYPE;
+ /**
+ * visualpython kernel
+ */
+ window.vpKernel = new com_Kernel();
+ }
+
+ //========================================================================
+ // External call function
+ //========================================================================
+ /**
+ * Read our config from server config & notebook metadata
+ * This function should only be called when both:
+ * 1. the notebook (and its metadata) has fully loaded
+ * AND
+ * 2. Jupyter.notebook.config.loaded has resolved
+ */
+ var readConfig = function () {
+ var cfg = vpConfig.defaultConfig;
+
+ if (!liveNotebook) {
+ return cfg;
+ }
+
+ // config may be specified at system level or at document level. first, update
+ // defaults with config loaded from server
+ let defaultMetadata = JSON.parse(JSON.stringify(vpConfig.metadataSettings));
+ let metadata = vpConfig.getMetadata();
+
+ vpConfig.resetMetadata();
+
+ if (metadata && defaultMetadata.vp_config_version == metadata.vp_config_version) {
+ Object.keys(defaultMetadata).forEach(key => {
+ let value = (metadata && metadata.hasOwnProperty(key) ? metadata : defaultMetadata)[key];
+ vpConfig.setMetadata({ [key]: value });
+ cfg[key] = value;
+ });
+ } else {
+ // if config version is different, overwrite config
+ vpConfig.setMetadata(defaultMetadata);
+ }
+
+ return cfg;
+ };
+
+ /**
+ * Initialize Visual Python
+ */
+ var initVisualpython = function () {
+ _setGlobalVariables();
+
+ let cfg = readConfig();
+
+ _readKernelFunction();
+ _addToolBarVpButton();
+ _loadVpResource(cfg);
+
+ if (cfg.vp_section_display && vpFrame) {
+ vpFrame.openVp();
+ }
+ }
+
+ return { initVisualpython: initVisualpython, readConfig: readConfig };
+
+}); /* function, define */
+
+/* End of file */
diff --git a/js/m_apps/Bind.js b/js/m_apps/Bind.js
new file mode 100644
index 00000000..21a59979
--- /dev/null
+++ b/js/m_apps/Bind.js
@@ -0,0 +1,661 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : Bind.js
+ * Author : Black Logic
+ * Note : Apps > Bind
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 11. 18
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] Bind
+//============================================================================
+define([
+ 'text!vp_base/html/m_apps/bind.html!strip',
+ 'css!vp_base/css/m_apps/bind.css',
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/component/PopupComponent',
+ 'vp_base/js/com/component/MultiSelector'
+], function(bindHtml, bindCss, com_String, PopupComponent, MultiSelector) {
+
+ /**
+ * Bind
+ */
+ class Bind extends PopupComponent {
+ _init() {
+ super._init();
+ /** Write codes executed before rendering */
+ this.config.sizeLevel = 1;
+
+ this.howList = [
+ { label: 'Inner', value: 'inner', desc: 'Inner join' },
+ { label: 'Full outer', value: 'outer', desc: 'Full outer join' },
+ { label: 'Left outer', value: 'left', desc: 'Left outer join' },
+ { label: 'Right outer', value: 'right', desc: 'Right outer join' },
+ { label: 'Cross', value: 'cross', desc: 'Cartesian product' },
+ ]
+
+ this.state = {
+ type: 'concat',
+ concat: {
+ variable: [], // DataFrame, Series
+ join: 'outer',
+ axis: 0, // 0: index, 1: column
+ sort: false
+ },
+ merge: {
+ left: {
+ variable: '',
+ on: [],
+ useIndex: false,
+ suffix: ''
+ },
+ right: {
+ variable: '',
+ on: [],
+ useIndex: false,
+ suffix: ''
+ },
+ on: [],
+ how: 'inner',
+ },
+ userOption: '',
+ allocateTo: '',
+ resetIndex: false,
+ ...this.state
+ }
+ this.popup = {
+ type: '',
+ targetSelector: '',
+ MultiSelector: undefined
+ }
+ }
+
+ _unbindEvent() {
+ super._unbindEvent();
+ $(document).off('change', this.wrapSelector('#vp_bdType'));
+
+ $(document).off('change', this.wrapSelector('#vp_bdVariable'));
+ $(document).off('click', this.wrapSelector('#vp_bdVariableSelect'));
+ $(document).off('change', this.wrapSelector('#vp_bdJoin'));
+ $(document).off('change', this.wrapSelector('#vp_bdAxis'));
+ $(document).off('change', this.wrapSelector('#vp_bdSort'));
+
+ $(document).off('change', this.wrapSelector('#vp_bdLeftDataframe'));
+ $(document).off('change', this.wrapSelector('#vp_bdRightDataframe'));
+ $(document).off('click', this.wrapSelector('.vp-bd-df-refresh'));
+ $(document).off('change', this.wrapSelector('#vp_bdHow'));
+ $(document).off('change', this.wrapSelector('#vp_bdOn'));
+ $(document).off('click', this.wrapSelector('#vp_bdOnSelect'));
+ $(document).off('change', this.wrapSelector('#vp_bdLeftOn'));
+ $(document).off('click', this.wrapSelector('#vp_bdLeftOnSelect'));
+ $(document).off('change', this.wrapSelector('#vp_gbLeftIndex'));
+ $(document).off('change', this.wrapSelector('#vp_bdRightOn'));
+ $(document).off('click', this.wrapSelector('#vp_bdRightOnSelect'));
+ $(document).off('change', this.wrapSelector('#vp_gbRightIndex'));
+ $(document).off('change', this.wrapSelector('#vp_bdLeftSuffix'));
+ $(document).off('change', this.wrapSelector('#vp_bdRightSuffix'));
+ $(document).off('change', this.wrapSelector('#vp_bdUserOption'));
+ $(document).off('change', this.wrapSelector('#vp_bdAllocateTo'));
+ $(document).off('change', this.wrapSelector('#vp_bdResetIndex'));
+ }
+
+ _bindEvent() {
+ super._bindEvent();
+ var that = this;
+ //====================================================================
+ // User operation Events
+ //====================================================================
+ $(document).on('change', this.wrapSelector('#vp_bdType'), function() {
+ var type = $(this).val();
+ that.state.type = type;
+ if (type == 'concat') {
+ $(that.wrapSelector('.vp-bd-type-box.concat')).show();
+ $(that.wrapSelector('.vp-bd-type-box.merge')).hide();
+ } else {
+ $(that.wrapSelector('.vp-bd-type-box.merge')).show();
+ $(that.wrapSelector('.vp-bd-type-box.concat')).hide();
+ }
+ // clear user option
+ $(that.wrapSelector('#vp_bdUserOption')).val('');
+ that.state.userOption = '';
+ });
+
+ //====================================================================
+ // Concat box Events
+ //====================================================================\
+ // variable change event
+ $(document).on('change', this.wrapSelector('#vp_bdVariable'), function(event) {
+ var varList = event.dataList;
+ that.state.concat.variable = varList;
+ });
+
+ // variable select button event
+ $(document).on('click', this.wrapSelector('#vp_bdVariableSelect'), function() {
+ that.openVariablePopup($(that.wrapSelector('#vp_bdVariable')));
+ });
+
+ // join
+ $(document).on('change', this.wrapSelector('#vp_bdJoin'), function() {
+ that.state.concat.join = $(this).val();
+ });
+
+ // axis
+ $(document).on('change', this.wrapSelector('#vp_bdAxis'), function() {
+ that.state.concat.axis = $(this).val();
+ });
+
+ // sort
+ $(document).on('change', this.wrapSelector('#vp_bdSort'), function() {
+ that.state.concat.sort = $(this).val() == 'yes';
+ });
+
+ //====================================================================
+ // Merge box Events
+ //====================================================================
+ // Left variable change event
+ $(document).on('change', this.wrapSelector('#vp_bdLeftDataframe'), function() {
+ // if variable changed, clear groupby, display
+ var newVal = $(this).val();
+ if (newVal != that.state.merge.left.variable) {
+ $(that.wrapSelector('#vp_bdOn')).val('');
+ $(that.wrapSelector('#vp_bdLeftOn')).val('');
+ that.state.merge.left.variable = newVal;
+ that.state.merge.left.on = [];
+ that.state.merge.on = [];
+ }
+ });
+ // Right variable change event
+ $(document).on('change', this.wrapSelector('#vp_bdRightDataframe'), function() {
+ // if variable changed, clear groupby, display
+ var newVal = $(this).val();
+ if (newVal != that.state.merge.right.variable) {
+ $(that.wrapSelector('#vp_bdOn')).val('');
+ $(that.wrapSelector('#vp_bdRightOn')).val('');
+ that.state.merge.right.variable = newVal;
+ that.state.merge.right.on = [];
+ that.state.merge.on = [];
+ }
+ });
+
+ // variable refresh event
+ $(document).on('click', this.wrapSelector('.vp-bd-df-refresh'), function() {
+ that.loadVariableList();
+ });
+
+ // how
+ $(document).on('change', this.wrapSelector('#vp_bdHow'), function() {
+ that.state.merge.how = $(this).val();
+ });
+
+ // on change event
+ $(document).on('change', this.wrapSelector('#vp_bdOn'), function(event) {
+ var colList = event.dataList;
+ that.state.merge.on = colList;
+
+ if (colList && colList.length > 0) {
+ $(that.wrapSelector('#vp_bdLeftOnSelect')).attr('disabled', true);
+ $(that.wrapSelector('#vp_bdRightOnSelect')).attr('disabled', true);
+ $(that.wrapSelector('#vp_bdLeftIndex')).attr('disabled', true);
+ $(that.wrapSelector('#vp_bdRightIndex')).attr('disabled', true);
+ } else {
+ $(that.wrapSelector('#vp_bdLeftOnSelect')).attr('disabled', false);
+ $(that.wrapSelector('#vp_bdRightOnSelect')).attr('disabled', false);
+ $(that.wrapSelector('#vp_bdLeftIndex')).attr('disabled', false);
+ $(that.wrapSelector('#vp_bdRightIndex')).attr('disabled', false);
+ }
+ });
+
+ // on select button event
+ $(document).on('click', this.wrapSelector('#vp_bdOnSelect'), function() {
+ var targetVariable = [ that.state.merge.left.variable, that.state.merge.right.variable ];
+ that.openColumnPopup(targetVariable, $(that.wrapSelector('#vp_bdOn')), 'Select columns from both dataframe');
+ });
+
+ // Left on change event
+ $(document).on('change', this.wrapSelector('#vp_bdLeftOn'), function(event) {
+ var colList = event.dataList;
+ that.state.merge.left.on = colList;
+
+ if ((colList && colList.length > 0)
+ || that.state.merge.right.on && that.state.merge.right.on.length > 0) {
+ $(that.wrapSelector('#vp_bdOnSelect')).attr('disabled', true);
+ } else {
+ $(that.wrapSelector('#vp_bdOnSelect')).attr('disabled', false);
+ }
+ });
+
+ // Left on select button event
+ $(document).on('click', this.wrapSelector('#vp_bdLeftOnSelect'), function() {
+ var targetVariable = [ that.state.merge.left.variable ];
+ that.openColumnPopup(targetVariable, $(that.wrapSelector('#vp_bdLeftOn')), 'Select columns from left dataframe');
+ });
+
+ // Left use index
+ $(document).on('change', this.wrapSelector('#vp_bdLeftIndex'), function() {
+ var useIndex = $(this).prop('checked');
+ that.state.merge.left.useIndex = useIndex;
+
+ if (useIndex || that.state.merge.right.useIndex) {
+ $(that.wrapSelector('#vp_bdOnSelect')).attr('disabled', true);
+ } else {
+ $(that.wrapSelector('#vp_bdOnSelect')).attr('disabled', false);
+ }
+ });
+
+ // Right on change event
+ $(document).on('change', this.wrapSelector('#vp_bdRightOn'), function(event) {
+ var colList = event.dataList;
+ that.state.merge.right.on = colList;
+
+ if ((colList && colList.length > 0)
+ || that.state.merge.left.on && that.state.merge.left.on.length > 0) {
+ $(that.wrapSelector('#vp_bdOnSelect')).attr('disabled', true);
+ } else {
+ $(that.wrapSelector('#vp_bdOnSelect')).attr('disabled', false);
+ }
+ });
+
+ // Right on select button event
+ $(document).on('click', this.wrapSelector('#vp_bdRightOnSelect'), function() {
+ var targetVariable = [ that.state.merge.right.variable ];
+ that.openColumnPopup(targetVariable, $(that.wrapSelector('#vp_bdRightOn')), 'Select columns from right dataframe');
+ });
+
+ // Right use index
+ $(document).on('change', this.wrapSelector('#vp_bdRightIndex'), function() {
+ var useIndex = $(this).prop('checked');
+ that.state.merge.right.useIndex = useIndex;
+
+ if (useIndex || that.state.merge.left.useIndex) {
+ $(that.wrapSelector('#vp_bdOnSelect')).attr('disabled', true);
+ } else {
+ $(that.wrapSelector('#vp_bdOnSelect')).attr('disabled', false);
+ }
+ });
+
+ // Left suffix change event
+ $(document).on('change', this.wrapSelector('#vp_bdLeftSuffix'), function() {
+ that.state.merge.left.suffix = $(this).val();
+ });
+
+ // Right suffix change event
+ $(document).on('change', this.wrapSelector('#vp_bdRightSuffix'), function() {
+ that.state.merge.right.suffix = $(this).val();
+ });
+
+ // userOption event
+ $(document).on('change', this.wrapSelector('#vp_bdUserOption'), function() {
+ that.state.userOption = $(this).val();
+ });
+
+ // allocateTo event
+ $(document).on('change', this.wrapSelector('#vp_bdAllocateTo'), function() {
+ that.state.allocateTo = $(this).val();
+ });
+
+ // reset index checkbox event
+ $(document).on('change', this.wrapSelector('#vp_bdResetIndex'), function() {
+ that.state.resetIndex = $(this).prop('checked');
+ });
+ }
+
+ templateForBody() {
+ return bindHtml;
+ }
+
+ templateForDataView() {
+ return '';
+ }
+
+ renderDataView() {
+ super.renderDataView();
+
+ this.loadDataPage();
+ $(this.wrapSelector('.vp-popup-dataview-box')).css('height', '300px');
+ }
+
+ renderDataPage(renderedText, isHtml = true) {
+ var tag = new com_String();
+ tag.appendFormatLine('');
+ $(this.wrapSelector('.vp-popup-dataview-box')).html(tag.toString());
+ }
+
+ loadDataPage() {
+ var that = this;
+ var code = this.generateCode();
+ // if not, get output of all data in selected pandasObject
+ vpKernel.execute(code).then(function(resultObj) {
+ let { msg } = resultObj;
+ if (msg.content.data) {
+ var htmlText = String(msg.content.data["text/html"]);
+ var codeText = String(msg.content.data["text/plain"]);
+ if (htmlText != 'undefined') {
+ that.renderDataPage(htmlText);
+ } else if (codeText != 'undefined') {
+ // plain text as code
+ that.renderDataPage(codeText, false);
+ } else {
+ that.renderDataPage('');
+ }
+ } else {
+ var errorContent = new com_String();
+ if (msg.content.ename) {
+ errorContent.appendFormatLine('', 'vp-popup-data-error-box');
+ errorContent.appendLine('');
+ errorContent.appendFormatLine('',
+ 'vp-popup-data-error-box-title', msg.content.ename);
+ if (msg.content.evalue) {
+ // errorContent.appendLine('
'); + errorContent.appendFormatLine('
')); + } + errorContent.appendLine('
');
+ }
+ that.renderDataPage(errorContent);
+ }
+ }).catch(function(resultObj) {
+ let { msg } = resultObj;
+ var errorContent = new com_String();
+ if (msg.content.ename) {
+ errorContent.appendFormatLine(''); + errorContent.appendFormatLine('
{0}', msg.content.evalue.split('\\n').join('')); + } + errorContent.appendLine('
', 'vp-popup-data-error-box');
+ errorContent.appendLine('');
+ errorContent.appendFormatLine('',
+ 'vp-popup-data-error-box-title', msg.content.ename);
+ if (msg.content.evalue) {
+ // errorContent.appendLine('
'); + errorContent.appendFormatLine('
')); + } + errorContent.appendLine('
');
+ }
+ that.renderDataPage(errorContent);
+ });
+ }
+
+ render() {
+ super.render();
+
+ this.loadVariableList();
+ }
+
+ /**
+ * Render variable list (for dataframe)
+ * @param {Array'); + errorContent.appendFormatLine('
{0}', msg.content.evalue.split('\\n').join('')); + } + errorContent.appendLine('