Visual Python 2.2.8 demo
\n", + " | sepal_length | \n", + "sepal_width | \n", + "petal_length | \n", + "petal_width | \n", + "variety | \n", + "
---|---|---|---|---|---|
0 | \n", + "5.1 | \n", + "3.5 | \n", + "1.4 | \n", + "0.2 | \n", + "Setosa | \n", + "
1 | \n", + "4.9 | \n", + "3.0 | \n", + "1.4 | \n", + "0.2 | \n", + "Setosa | \n", + "
2 | \n", + "4.7 | \n", + "3.2 | \n", + "1.3 | \n", + "0.2 | \n", + "Setosa | \n", + "
3 | \n", + "4.6 | \n", + "3.1 | \n", + "1.5 | \n", + "0.2 | \n", + "Setosa | \n", + "
4 | \n", + "5.0 | \n", + "3.6 | \n", + "1.4 | \n", + "0.2 | \n", + "Setosa | \n", + "
... | \n", + "... | \n", + "... | \n", + "... | \n", + "... | \n", + "... | \n", + "
145 | \n", + "6.7 | \n", + "3.0 | \n", + "5.2 | \n", + "2.3 | \n", + "Virginica | \n", + "
146 | \n", + "6.3 | \n", + "2.5 | \n", + "5.0 | \n", + "1.9 | \n", + "Virginica | \n", + "
147 | \n", + "6.5 | \n", + "3.0 | \n", + "5.2 | \n", + "2.0 | \n", + "Virginica | \n", + "
148 | \n", + "6.2 | \n", + "3.4 | \n", + "5.4 | \n", + "2.3 | \n", + "Virginica | \n", + "
149 | \n", + "5.9 | \n", + "3.0 | \n", + "5.1 | \n", + "1.8 | \n", + "Virginica | \n", + "
150 rows × 5 columns
\n", + "\n", + " | variety | \n", + "sepal_length | \n", + "sepal_width | \n", + "petal_length | \n", + "petal_width | \n", + "
---|---|---|---|---|---|
0 | \n", + "Setosa | \n", + "5.1 | \n", + "3.5 | \n", + "1.4 | \n", + "0.2 | \n", + "
1 | \n", + "Setosa | \n", + "4.9 | \n", + "3.0 | \n", + "1.4 | \n", + "0.2 | \n", + "
2 | \n", + "Setosa | \n", + "4.7 | \n", + "3.2 | \n", + "1.3 | \n", + "0.2 | \n", + "
3 | \n", + "Setosa | \n", + "4.6 | \n", + "3.1 | \n", + "1.5 | \n", + "0.2 | \n", + "
4 | \n", + "Setosa | \n", + "5.0 | \n", + "3.6 | \n", + "1.4 | \n", + "0.2 | \n", + "
... | \n", + "... | \n", + "... | \n", + "... | \n", + "... | \n", + "... | \n", + "
145 | \n", + "Virginica | \n", + "6.7 | \n", + "3.0 | \n", + "5.2 | \n", + "2.3 | \n", + "
146 | \n", + "Virginica | \n", + "6.3 | \n", + "2.5 | \n", + "5.0 | \n", + "1.9 | \n", + "
147 | \n", + "Virginica | \n", + "6.5 | \n", + "3.0 | \n", + "5.2 | \n", + "2.0 | \n", + "
148 | \n", + "Virginica | \n", + "6.2 | \n", + "3.4 | \n", + "5.4 | \n", + "2.3 | \n", + "
149 | \n", + "Virginica | \n", + "5.9 | \n", + "3.0 | \n", + "5.1 | \n", + "1.8 | \n", + "
150 rows × 5 columns
\n", + "${textCode}
`); - createdBlock.renderSelectedBlockBorderColor(true); - return createdBlock; - } - - /** - * @param {string} funcID xml에 적힌 API List의 funcID - * @param {string} naviInfo Common > Import 같은 naigation 정보 - */ - BlockContainer.prototype.createAPIListBlock = async function(funcID, naviInfo) { - this.resetBlockList(); - - var isFirstBlock = false; - const blockList = this.getBlockList(); - /** board에 블럭이 0개 일때 - * 즉 블럭이 처음으로 생성되는 경우 - */ - if (blockList.length == 0) { - isFirstBlock = true; - } - - var createdBlock_api = this.createBlock(BLOCK_CODELINE_TYPE.API, null, null, true, true); - createdBlock_api.setFuncID(funcID); - createdBlock_api.setOptionPageLoadCallback(optionPageLoadCallback_block); - createdBlock_api.setLoadOption(loadOption_block); - createdBlock_api.setState({ - [STATE_codeLine]: naviInfo - }); - - createdBlock_api.writeCode(naviInfo); - setClosureBlock(createdBlock_api); - loadOption_block(funcID, optionPageLoadCallback_block); - this.resetBlockListAndRenderThisBlock(createdBlock_api); - } - - BlockContainer.prototype.createAppsPage = function(appsKey, moduleFile, config={}, callback=undefined) { - var that = this; - - // var loadUrl = 'markdown/markdown.js'; - // var loadUrl = 'common/' + moduleFile; - var loadUrl = moduleFile; - requirejs([loadUrl], function (loaded) { - if (Object.keys(loaded).includes('initOption')) { - loaded.initOption(function(funcJS) { - // optionPage load callback - that.apps = appsKey; - that.appsMenu = new popupPage(funcJS, 'vp_appsCode'); - funcJS.wrapSelector = that.appsMenu.wrapSelector; - funcJS.loadMeta(funcJS, config.state); - // library page - $(vpCommon.wrapSelector(vpCommon.formatString("#{0}", vpConst.OPTION_GREEN_ROOM), vpCommon.formatString(".{0}", vpConst.API_OPTION_PAGE))).each(function() { - that.appsMenu.open({ - ...config, - pageDom: $(this) - }); - }); - if (callback) { - callback(funcJS); - } - }, config.state); - } else { - // save appsMenu object - that.apps = appsKey; - that.appsMenu = new loaded(null, 'vp_appsCode'); - that.appsMenu.open({ - ...config - }); - if (callback) { - callback(that.appsMenu); - } - } - - - }); - return this.appsMenu; - } - - /** 블럭을 이동할 때, - * shadow 블럭을 만드는 메소드 - * @param {ENUM} blockType - * @param {Block} thisBlock - */ - BlockContainer.prototype.createShadowBlock = function( blockType, thisBlock) { - var blockContainerThis = this; - var shadowBlock = new ShadowBlock(blockContainerThis, blockType, thisBlock); - var $shadowBlockContainerDom = $(shadowBlock.getBlockContainerDom()); - $shadowBlockContainerDom.css(STR_DISPLAY, STR_NONE); - - var containerDom = blockContainerThis.getBlockContainerDom(); - $(containerDom).append(shadowBlock.getBlockContainerDom()); - - return shadowBlock; - } - - - - - - - - - - - - - - - /** Block의 HTML 생성 - * 이동하는 block과 동일한 모양의 html tag 생성 - * @param {Block} thisBlock - */ - BlockContainer.prototype.makeBlockDom = function(thisBlock) { - var blockMainDom = document.createElement(STR_DIV); - blockMainDom.classList.add(VP_BLOCK); - blockMainDom.classList.add(`vp-block-${thisBlock.getUUID()}`); - - var blockType = thisBlock.getBlockType(); - /** node or text 블럭일 경우 */ - if ( IsNodeTextBlockType(blockType) == true - || thisBlock.isGroupBlock ) { - if (blockType == BLOCK_CODELINE_TYPE.NODE) { - $(blockMainDom).css(STR_BACKGROUND_COLOR, STR_TRANSPARENT); - } - $(blockMainDom).css(STR_MARGIN_TOP, NUM_NODE_OR_TEXT_BLOCK_MARGIN_TOP_PX); - /** shadow 블럭일 경우 */ - } else if (blockType == BLOCK_CODELINE_TYPE.SHADOW) { - blockMainDom.classList.add(VP_CLASS_BLOCK_BOTTOM_HOLDER); - } - - /** 이동하는 block의 header 생성 */ - - var classOrDefName; - /** class */ - if ( blockType == BLOCK_CODELINE_TYPE.CLASS ) { - classOrDefName = thisBlock.getState(STATE_className); - /** def 이름 */ - } else if ( blockType == BLOCK_CODELINE_TYPE.DEF ) { - classOrDefName = thisBlock.getState(STATE_defName); - } - - var codeLineStr = thisBlock.getNowCodeLine(); - - var blockName = thisBlock.getBlockName(); - if ( blockType == BLOCK_CODELINE_TYPE.CODE - || blockType == BLOCK_CODELINE_TYPE.PASS - || blockType == BLOCK_CODELINE_TYPE.CONTINUE - || blockType == BLOCK_CODELINE_TYPE.BREAK - || blockType == BLOCK_CODELINE_TYPE.LAMBDA - || blockType == BLOCK_CODELINE_TYPE.NODE - || blockType == BLOCK_CODELINE_TYPE.TEXT - || blockType == BLOCK_CODELINE_TYPE.API - || blockType == BLOCK_CODELINE_TYPE.APPS ) { - blockName = ''; - } else if (blockType == BLOCK_CODELINE_TYPE.PROPERTY) { - blockName = '@'; - } else if (blockType == BLOCK_CODELINE_TYPE.COMMENT) { - blockName = '#'; - } - - var sbMainHeader = new sb.StringBuilder(); - var blockUUID = thisBlock.getUUID(); - if (blockType == BLOCK_CODELINE_TYPE.NODE) { - sbMainHeader.appendFormatLine("Node
`) - $(nodePageDom).append(textareaDom); - nodeBlockOption.append(nodePageDom); - - var codemirrorCode = codemirror.fromTextArea(textareaDom, { - mode: { - name: 'python', - version: 3, - singleLineStringErrors: false - }, // text-cell(markdown cell) set to 'htmlmixed' - indentUnit: 4, - matchBrackets: true, - readOnly:true, - autoRefresh: true, - lineWrapping: false, // text-cell(markdown cell) set to true - indentWithTabs: true, - theme: "ipython", - extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"} - }); - - $(optionPageSelector).append(nodeBlockOption); - codemirrorCode.setValue($(textareaDom).val()); - - return nodeBlockOption; - } - return renderThisComponent(); - } - return InitNodeBlockOption; -}); \ No newline at end of file diff --git a/src/api_block/component/option/none_option.js b/src/api_block/component/option/none_option.js deleted file mode 100644 index abf71d13..00000000 --- a/src/api_block/component/option/none_option.js +++ /dev/null @@ -1,26 +0,0 @@ -define([ - 'jquery' - - - , '../base/index.js' -], function ( $ - , baseComponent ) { - - - const { MakeOptionContainer } = baseComponent; - var InitNoneOption = function(thisBlock, optionPageSelector) { - var renderThisComponent = function() { - var noneOption = MakeOptionContainer(thisBlock); - // noneOption.append('${code}
`); - // createdBlock.renderSelectedBlockBorderColor(true); - } else { - // add apps block - createdBlock = blockContainer.createBlock(BLOCK_CODELINE_TYPE.APPS, null, null, true, true); - createdBlock.setState({ - apps: { - menu: blockContainer.apps, - code: code, - state: state - } - }); - // set code - createdBlock.setState({ - [STATE_codeLine]: 'Apps > ' + title - }); - // createdBlock.writeCode(code); - createdBlock.apply(); - if (isFirstBlock == true) { - // if it is first block, set as ROOT - createdBlock.setDirection(BLOCK_DIRECTION.ROOT); - } else { - var lastBottomBlock = blockContainer.getRootToLastBottomBlock(); - lastBottomBlock.appendBlock(createdBlock, BLOCK_DIRECTION.DOWN); - } - blockContainer.addNodeBlock(createdBlock); - blockContainer.resetBlockList(); - blockContainer.reRenderAllBlock_asc(); - } - - } - - // 2. add cell and run cell - if (addCell) { - createdBlock.runThisBlock(runCell); - } - }); - - /** Logic, API, Data Analysis 의 > 버튼 클릭 */ - $(document).on(STR_CLICK,`.vp-apiblock-panel-area-vertical-btn`, function(){ - if ($(this).hasClass(`vp-apiblock-arrow-down`)) { - // 펼치기 - $(this).removeClass(`vp-apiblock-arrow-down`); - $(this).addClass(`vp-apiblock-arrow-up`); - $(this).parent().parent().removeClass(`vp-apiblock-minimize`); - } else { - // 닫기 - $(this).removeClass(`vp-apiblock-arrow-up`); - $(this).addClass(`vp-apiblock-arrow-down`); - $(this).parent().parent().addClass(`vp-apiblock-minimize`); - } - }); - - /** Logic, API, Data Analysis 의 이름 클릭*/ - $(document).on(STR_CLICK,`.vp-block-blocktab-name`, function(){ - var $arrowBtn = $(this).prev(); - if ($($arrowBtn).hasClass(`vp-apiblock-arrow-down`)) { - // 펼치기 - $($arrowBtn).removeClass(`vp-apiblock-arrow-down`); - $($arrowBtn).addClass(`vp-apiblock-arrow-up`); - $($arrowBtn).parent().parent().removeClass(`vp-apiblock-minimize`); - } else { - // 닫기 - $($arrowBtn).removeClass(`vp-apiblock-arrow-up`); - $($arrowBtn).addClass(`vp-apiblock-arrow-down`); - $($arrowBtn).parent().parent().addClass(`vp-apiblock-minimize`); - } - }); - - // 추가 : 대메뉴 접기/펼치기 - $('.vp-apiblock-category').on(STR_CLICK, function() { - var category = $(this).attr('data-category'); - // 해당 대메뉴 접기/펼치기 토글 - $('.vp-block-group-box-' + category).toggle(); - }); - - /** 2021-01-28 수정: 주피터쪽을 선택한다고 VisualPython의 포커스를 변경하지 않도록 수정 - * 2021-02-10 수정: 주피터쪽 선택 여부는 체크, 대신 VisualPython의 작업환경을 초기화하지 않도록 수정 - */ - /** visual python 화면 이외에 화면(jupyter header 영역 , jupyter cell 영역)을 클릭했을 때, - * page 포커스 해제 - * option (N/A) 처리 - * selected 된 블럭 해제 */ - $(vpCommon.wrapSelector(`${VP_ID_PREFIX}${STR_NOTEBOOK}, - ${VP_ID_PREFIX}${STR_HEADER}, - ${VP_CLASS_PREFIX}${STR_CELL}, - ${VP_CLASS_PREFIX}${STR_CODEMIRROR_LINES}, - div#notebook`)).click(function(event) { - // blockContainer.resetBlockList(); - // blockContainer.resetOptionPage(); - blockContainer.setFocusedPageType(FOCUSED_PAGE_TYPE.NULL); - }); - - $(vpCommon.wrapSelector('')) - - /** Create block buttons page를 클릭했을 때 */ - $(vpCommon.wrapSelector(VP_CLASS_PREFIX + VP_CLASS_APIBLOCK_BUTTONS)).click(function(event) { - blockContainer.setFocusedPageType(FOCUSED_PAGE_TYPE.BUTTONS); - }); - - /** Block Board page를 클릭했을 때 */ - $(vpCommon.wrapSelector(VP_CLASS_PREFIX + VP_CLASS_APIBLOCK_BOARD)).click(function(event) { - /** Board에서 Board page를 클릭하고, block을 클릭하지 않았을 때 */ - if ($(event.target).hasClass('vp-apiblock-board-body') - || $(event.target).hasClass('vp-block-container')) { - blockContainer.checkModified(); - blockContainer.checkSaveOptionPage(function(result) { - blockContainer.resetBlockList(); - blockContainer.resetOptionPage(); - }); - } - }); - - /** Block Board 위 Input 영역을 클릭했을 때 */ - $(vpCommon.wrapSelector(VP_ID_PREFIX + "vp_apiblock_board_main_title")).click(function(event) { - blockContainer.setFocusedPageType(FOCUSED_PAGE_TYPE.BOARD_TITLE); - }); - - /** Board Main Title에서 엔터키 눌렀을 때 */ - $(vpCommon.wrapSelector(VP_ID_PREFIX + "vp_apiblock_board_main_title")).keyup(function(event) { - var keyCode = event.keyCode ? event.keyCode : event.which; - if (keyCode == NUM_ENTER_KEY_EVENT_NUMBER) { - blockContainer.setFocusedPageType(FOCUSED_PAGE_TYPE.NULL); - $(this).find('input').blur(); - } - }); - - /** Board File Name changed */ - $(vpCommon.wrapSelector(VP_ID_PREFIX + VP_ID_APIBLOCK_BOARD_MAKE_NODE_BLOCK_INPUT)).change(function(event) { - // reset path - $(vpCommon.wrapSelector(VP_ID_PREFIX + VP_ID_APIBLOCK_BOARD_MAKE_NODE_PATH)).val(''); - }); - - /** API List를 클릭했을 때*/ - $(vpCommon.wrapSelector(VP_ID_PREFIX + VP_ID_APIBLOCK_LEFT_TAP_APILIST_PAGE)).click(function(event) { - blockContainer.setFocusedPageType(FOCUSED_PAGE_TYPE.API_LIST_TAB); - }); - - /** Option page를 클릭했을 때 */ - $(vpCommon.wrapSelector(VP_CLASS_PREFIX + VP_CLASS_APIBLOCK_OPTION_TAB)).click(function(event) { - blockContainer.setFocusedPageType(FOCUSED_PAGE_TYPE.OPTION); - }); - - /** GLOBAL keyBoardManager */ - window.vpKeyManager = { - keyCode : { - ctrlKey: 17, - cmdKey: 91, - shiftKey: 16, - altKey: 18, - enter: 13, - escKey: 27, - vKey: 86, - cKey: 67 - }, - keyCheck : { - ctrlKey: false, - shiftKey: false - } - }; - - /** 블럭 복사하고 붙여넣는 기능 이벤트 바인딩 */ - $(document).ready(function() { - var { ctrlKey, shiftKey, cmdKey, vKey, cKey, escKey } = vpKeyManager.keyCode; - - $(document).keydown(function(e) { - if (e.keyCode == ctrlKey || e.keyCode == cmdKey) { - vpKeyManager.keyCheck.ctrlKey = true; - } - if (e.keyCode == shiftKey) { - vpKeyManager.keyCheck.shiftKey = true; - } - }).keyup(function(e) { - if (e.keyCode == ctrlKey || e.keyCode == cmdKey) { - vpKeyManager.keyCheck.ctrlKey = false; - } - if (e.keyCode == shiftKey) { - vpKeyManager.keyCheck.shiftKey = false; - } - if (e.keyCode == escKey) { - // close popup on esc - if (blockContainer.getFocusedPageType() != FOCUSED_PAGE_TYPE.NULL - && blockContainer.appsMenu) { - blockContainer.appsMenu.close(); - } - } - }).click(function(e) { - // click event on jupyter side - if ($('#notebook').has(e.target).length > 0) { - blockContainer.setFocusedPageType(FOCUSED_PAGE_TYPE.NULL); - } - // click event on visual python menu tab & button box - if ($(vpCommon.wrapSelector('.vp-apiblock-tab-header')).has(e.target).length > 0 - || $(vpCommon.wrapSelector('.vp-apiblock-board-button-container')).has(e.target).length > 0) { - blockContainer.setFocusedPageType(FOCUSED_PAGE_TYPE.BUTTONS); - } - // click event on popup menu - if ($(vpCommon.wrapSelector('.vp-ds')).has(e.target).length > 0 - || $(vpCommon.wrapSelector('.vp-fe')).has(e.target).length > 0 - || $(vpCommon.wrapSelector('.vp-pp')).has(e.target).length > 0 - || $(vpCommon.wrapSelector('.vp-ds-btn-box')).has(e.target).length > 0 - || $(vpCommon.wrapSelector('.vp-fe-btn-box')).has(e.target).length > 0 - || $(vpCommon.wrapSelector('.vp-pp-btn-box')).has(e.target).length > 0) { - blockContainer.setFocusedPageType(FOCUSED_PAGE_TYPE.OPTION); - } - - // check modified - blockContainer.checkModified(); - }); - - // focus event on codemirror of jupyter side - $(document).on('focus', '#notebook .CodeMirror', function(e){ - blockContainer.setFocusedPageType(FOCUSED_PAGE_TYPE.NULL); - }); - - $(document).change($(vpCommon.wrapSelector('.vp-apiblock-option input')), function() { - // check modified - blockContainer.checkModified(); - }); - - // DEPRECATED: ctrl+c / ctrl+v 삭제 - // $(document).keydown(function(e) { - // /** board에 선택한 블럭 없거나 - // * TEXT 블럭인 경우에 ctrl + c , ctrl + v 금지 - // */ - // var selectedBlock = blockContainer.getSelectBlock(); - // if (!selectedBlock - // || selectedBlock.getBlockType() == BLOCK_CODELINE_TYPE.TEXT - // || IsCodeBlockType(selectedBlock.getBlockType()) == true ) { - // return; - // } - // // console.log('selectedBlock',selectedBlock); - - // /** ctrl + c */ - // if (ctrlDown - // && e.ctrlKey && (e.keyCode == cKey) - // && !e.shiftKey && !e.altKey ) { - // blockContainer.setCtrlSaveData(); - // } - - // /** ctrl + v */ - // if (ctrlDown - // && e.ctrlKey && (e.keyCode == vKey) - // && !e.shiftKey && !e.altKey ) { - // blockContainer.copyCtrlSaveData(); - // } - // }); - }); - - /** tab button click */ - $(document).on(STR_CLICK, VP_CLASS_PREFIX + 'vp-apiblock-tab-button', function() { - var type = $(this).data('type'); - $(VP_CLASS_PREFIX + 'vp-apiblock-tab-button').removeClass('selected'); - $(this).addClass('selected'); - if (type == 'menu') { - $(vpCommon.wrapSelector('.vp-apiblock-left')).show(); - $(vpCommon.wrapSelector('.vp-apiblock-right')).hide(); - } else if (type == 'board') { - $(vpCommon.wrapSelector('.vp-apiblock-left')).hide(); - $(vpCommon.wrapSelector('.vp-apiblock-right')).show(); - } - }); - - /** +code 블럭 생성 버튼 클릭 함수 바인딩 */ - $(document).on(STR_CLICK, VP_ID_PREFIX + VP_ID_APIBLOCK_NODE_BLOCK_PLUS_BUTTON, function() { - // blockContainer.createNodeBlock(true); - // +code 블럭 생성 - blockContainer.createCodeBlock(); - }); - - /** +text 블럭 생성 버튼 클릭 함수 바인딩 */ - $(document).on(STR_CLICK, VP_ID_PREFIX + VP_ID_APIBLOCK_TEXT_BLOCK_PLUS_BUTTON, function() { - blockContainer.createTextBlock(); - }); - - /** option page - preview 버튼 클릭 함수 바인딩 */ - $(document).on(STR_CLICK, VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_PREVIEW_BUTTON, function() { - var selectedBlock = blockContainer.getSelectBlock(); - if (selectedBlock == null) { - blockContainer.hideOptionPreviewBox(); - if ($(this).hasClass('enabled')) { - blockContainer.resetOptionPage(); - $(this).removeClass('enabled'); - } else { - blockContainer.showOptionPageWithPreview(); - $(this).addClass('enabled'); - } - } else { - if ($(this).hasClass('enabled')) { - blockContainer.hideOptionPreviewBox(); - $(this).removeClass('enabled'); - } else { - blockContainer.showOptionPreviewBox(); - $(this).addClass('enabled'); - } - } - }); - - /** option page - cancel button click */ - $(document).on(STR_CLICK, VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_CANCEL_BUTTON, function() { - blockContainer.cancelBlock(); - }); - - /** option page - run detail button click */ - $(document).on(STR_CLICK, VP_ID_PREFIX + 'vp_apiblock_board_option_detail_button', function(evt) { - evt.stopPropagation(); - $(VP_CLASS_PREFIX + 'vp-apiblock-option-detail-box').show(); - }); - - $(document).on(STR_CLICK, VP_CLASS_PREFIX + 'vp-apiblock-option-detail-item', function(evt) { - var type = $(this).data('type'); - if (type == 'add') { - // apply it and add cell - var appliedBlock = blockContainer.applyBlock(); - - if (appliedBlock) { - // #11 applied! popup - vpCommon.renderSuccessMessage('Applied!'); - - // #10 scroll to selected/applied block - var appliedBlockDom = appliedBlock.getBlockMainDom(); - $(VP_CLASS_PREFIX + VP_CLASS_APIBLOCK_BOARD).animate({scrollTop: $(appliedBlockDom).position().top}, "fast"); - - // add and not run - appliedBlock.runThisBlock(false); - } - } else if (type == 'apply') { - // apply it - var appliedBlock = blockContainer.applyBlock(); - - if (appliedBlock) { - // applied! popup - vpCommon.renderSuccessMessage('Applied!'); - - // scroll to applied block - var appliedBlockDom = appliedBlock.getBlockMainDom(); - $(VP_CLASS_PREFIX + VP_CLASS_APIBLOCK_BOARD).animate({scrollTop: $(appliedBlockDom).position().top}, "fast"); - } - } - }); - - /** option page - run button click */ - // $(document).on(STR_CLICK, VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_APPLY_BUTTON, function() { - $(document).on(STR_CLICK, VP_ID_PREFIX + 'vp_apiblock_board_option_run_button', function() { - var appliedBlock = blockContainer.applyBlock(); - - if (appliedBlock) { - // #11 applied! popup - vpCommon.renderSuccessMessage('Applied!'); - - // #10 scroll to selected/applied block - var appliedBlockDom = appliedBlock.getBlockMainDom(); - $(VP_CLASS_PREFIX + VP_CLASS_APIBLOCK_BOARD).animate({scrollTop: $(appliedBlockDom).position().top}, "fast"); - - appliedBlock.runThisBlock(); - } - }); - - /** - * API List item 클릭 이벤트 함수 바인딩 - * API List 목록의 함수에 대응되는 API List 블럭을 생성하기 위해서 - */ - $(document).off(STR_CLICK,VP_CLASS_PREFIX + vpConst.LIST_ITEM_LIBRARY + 'li'); - $(document).on(STR_CLICK, VP_CLASS_PREFIX + vpConst.LIST_ITEM_LIBRARY + 'li', function(event) { - event.stopPropagation(); - if ($(this).hasClass(vpConst.LIST_ITEM_LIBRARY_GROUP)) { - toggleApiListSubGroupShow($(this)); - } else if ($(this).hasClass(vpConst.LIST_ITEM_LIBRARY_FUNCTION)) { - const funcID = $(this).data(vpConst.LIBRARY_ITEM_DATA_ID.replace(vpConst.TAG_DATA_PREFIX, "")); - var naviInfo = getNavigationInfo(funcID); - - /** board에 선택한 API List 블럭 생성 */ - blockContainer.createAPIListBlock(funcID, naviInfo); - } - }); - - - /** API Block의 option을 화면 좌우로 resize하는 이벤트 함수 */ - $(vpCommon.wrapSelector(VP_CLASS_PREFIX + VP_CLASS_APIBLOCK_OPTION_TAB)).resizable({ - containment: STR_PARENT, // 부모 dom을 기준으로 resize -> 확실하진 않지만 'parent'라고 되어있어서 추정 - handles: 'w', // 'w'는 width 좌우 'h'는 상하 height - resizeHeight: false // height resize 금지 - // resize 할 경우 계속 실행 - ,resize:(function() { - blockContainer.setIsOptionPageResize(true); - blockContainer.resizeOptionPopup(); - }) - // resize 끝나면 멈춤 - ,stop: function(event, ui) { - blockContainer.setIsOptionPageResize(false); - } - }); - - /** 햄버거 메뉴 open 클릭 */ - $(document).on(STR_CLICK, vpCommon.wrapSelector(vpCommon.formatString("#{0}", vpConst.VP_NOTE_EXTRA_MENU_OPEN_NOTE)), function() { - var saveFileName = $(VP_ID_PREFIX + VP_ID_APIBLOCK_BOARD_MAKE_NODE_BLOCK_INPUT).val(); - /** 빈 string이거나 - * Untitled이면 File navigation을 open */ - if ( saveFileName == STR_EMPTY - || saveFileName == STR_UNTITLED) { - openNotePage(); - /** File navigation을 open하지 않고 alert창 띄움*/ - } else { - var saveFilePath = vpCommon.formatString("./{0}.{1}", saveFileName, vpConst.VP_NOTE_EXTENSION); - apiBlockPackage.openMultiBtnModal_new('Save As', `Save changes to '${saveFileName}.vp'`,['Yes', 'No', 'Cancel'], 3, [() => { - saveNotePageAction_newVersion(saveFileName, saveFilePath); - openNotePage(); - - },() => { - openNotePage(); - - },() => { - - }]); - } - }); - - /** 햄버거 메뉴 save 저장 클릭 */ - $(document).on(STR_CLICK, vpCommon.wrapSelector(vpCommon.formatString("#{0}", vpConst.VP_NOTE_EXTRA_MENU_SAVE_NOTE)), function() { - var saveFileName = $(VP_ID_PREFIX + VP_ID_APIBLOCK_BOARD_MAKE_NODE_BLOCK_INPUT).val(); - var saveFilePath = $(VP_ID_PREFIX + VP_ID_APIBLOCK_BOARD_MAKE_NODE_PATH).val(); // path - - // TEST: File Navigation - // var state = { - // fileType: FileNavigation.SAVE_FILE - - // }; - // var fileNavigation = new FileNavigation(FileNavigation.FILE_TYPE.SAVE_VP_NOTE, state); - // fileNavigation.open(); - // return; - - /** 빈 string이거나 - * Untitled이면 File navigation을 open */ - if ( saveFileName == STR_EMPTY - || saveFileName == STR_UNTITLED) { - saveAsNotePage(); - closeNoteExtraMenu(); - /** File navigation을 open하지 않고 alert창 띄움*/ - } else { - if (!saveFilePath.includes(saveFileName)) { - // 다른 파일이면 save as - saveAsNotePage(); - closeNoteExtraMenu(); - } else { - var saveFilePath = vpCommon.formatString("{0}", saveFilePath, vpConst.VP_NOTE_EXTENSION); - saveNotePageAction_newVersion(vpCommon.formatString("{0}.{1}", saveFileName, vpConst.VP_NOTE_EXTENSION), saveFilePath); - // apiBlockPackage.openMultiBtnModal_new('Save As', `Save changes to '${saveFileName}.vp'`,['Yes', 'No', 'Cancel'], [() => { - // },() => { - - // },() => { - - // }]); - } - } - }); - - /** 햄버거 메뉴 save as 다른 이름으로 저장 클릭 이벤트 함수 */ - $(document).on(STR_CLICK, vpCommon.wrapSelector(vpCommon.formatString("#{0}", vpConst.VP_NOTE_EXTRA_MENU_SAVE_AS_NOTE)), function() { - saveAsNotePage(); - closeNoteExtraMenu(); - }); - - /** - * 파일 브라우저 로드 파일 선택 - */ - $(document).on("fileReadSelected.fileNavigation", function(e) { - // 선택 파일 확장자가 노트 세이브 파일인 경우만 동작 - if (e.file.substring(e.file.lastIndexOf(".") + 1) === vpConst.VP_NOTE_EXTENSION) { - openNotePageAction_newVersion(); - } - }); - - /** - * 파일 브라우저 저장 파일 선택 - */ - $(document).on("fileSaveSelected.fileNavigation", function(e) { - // 선택 파일 확장자가 노트 세이브 파일인 경우만 동작 - if (e.file.substring(e.file.lastIndexOf(".") + 1) === vpConst.VP_NOTE_EXTENSION) { - var selectedPath = $(vpCommon.wrapSelector(vpCommon.formatString("#{0}", vpConst.VP_NOTE_REAL_FILE_PATH))).val(); - var saveFileName = selectedPath.substring(selectedPath.lastIndexOf("/") + 1); - - saveNotePageAction_newVersion(saveFileName, selectedPath); - } - }); - - $(document).on('click', function(evt) { - if (evt.target.id != 'vp_apiblock_menu_box') { - // close block menu - $(vpCommon.wrapSelector(vpCommon.formatString('#{0}', VP_ID_APIBLOCK_MENU_BOX))).hide(); - } - if (evt.target.id != 'vp_menuAppsContainer' - && evt.target.id != 'vp_menuApps') { - // close apps menu - $(vpCommon.wrapSelector('#vp_menuAppsContainer')).removeClass('show'); - } - if (!$(evt.target).hasClass('vp-temp-popup-menu')) { - $('.vp-temp-popup-menu').hide(); - } - if (evt.target.id != 'vp_apiblock_board_option_detail_button') { - $(VP_CLASS_PREFIX + 'vp-apiblock-option-detail-box').hide(); - } - if (evt.target.id != 'vp_apiblock_board_option_preview_button' - && $(vpCommon.wrapSelector('.vp-apiblock-option-preview-container')).has(evt.target).length === 0) { - blockContainer.hideOptionPreviewBox(); - $(VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_PREVIEW_BUTTON).removeClass('enabled'); - } - }); - - ControlToggleInput(); - return blockContainer; - } - - var apiLibariesToBtn = function(blockContainer, libObj, parentId = '') { - if (libObj._type == undefined // root - || libObj._type == 'package') { - // 패키지인 경우 그룹 생성 - if (libObj._name != undefined) { - if (libObj._level == 0) { - var open = false; - if (libObj._name == 'Common' - || libObj._name == 'Pandas') { - // Common은 처음에 열어놓고 시작 - open = true; - } - new CreateGroup(blockContainer, libObj._id, libObj._name, VP_CLASS_PREFIX + 'vp-block-group-box-api', libObj._level, open); - } else { - new CreateGroup(blockContainer, libObj._id, libObj._name, VP_CLASS_PREFIX + 'vp-apiblock-left-tab-' + parentId, libObj._level); - } - } - // 하위 아이템 있으면 다시 호출 - if (libObj.item) { - if (typeof libObj.item == "object") { - if (Array.isArray(libObj.item)) { - // item이 array일 경우 - libObj.item.forEach(obj => { - apiLibariesToBtn(blockContainer, obj, libObj._id); - }); - } else { - // 단일 항목일 경우 - apiLibariesToBtn(blockContainer, libObj.item, libObj._id); - } - } - } - } else if (libObj._type == 'function' && libObj.level != "0") { - // 함수인 경우 버튼 생성 (단, level은 0 이상) - // parentId 없는 경우 생성안함 - if (parentId != undefined && parentId !== STR_EMPTY) { - new CreateApiBtn(blockContainer, libObj._id, libObj._name, parentId); - } - } - } - - return init; -}); diff --git a/src/api_block/shadowBlock.js b/src/api_block/shadowBlock.js deleted file mode 100644 index 50fdc34b..00000000 --- a/src/api_block/shadowBlock.js +++ /dev/null @@ -1,229 +0,0 @@ -define([ - './api.js' - , './constData.js' -], function ( api, constData ) { - const { MapTypeToName } = api; - - const { BLOCK_DIRECTION - , BLOCK_CODELINE_TYPE - , NUM_INDENT_DEPTH_PX - , NUM_SHADOWBLOCK_OPACITY - - , STR_BLOCK - , STR_DIV - , STR_OPACITY - , STR_WIDTH - , STR_MARGIN_LEFT - , STR_DISPLAY - - , VP_CLASS_PREFIX - , VP_CLASS_BLOCK_SHADOWBLOCK_CONTAINER - , VP_CLASS_SELECTED_SHADOWBLOCK } = constData; - - var ShadowBlock = function(blockContainerThis, type, realBlock) { - - this.type = type; - this.name = MapTypeToName(type); - this.direction = -1; - this.rootBlockUuid = ''; - this.blockContainerThis = blockContainerThis; - this.width = blockContainerThis.getBlockMaxWidth(); - - this.realBlock = realBlock; - this.rootDepth = 0; - this.rootDom = null; - this.containerDom = null; - this.selectBlock = null; - this.childListDom = null; - this.childBlockList = []; - this.init(); - } - - ShadowBlock.prototype.init = function() { - var blockContainerThis = this.blockContainerThis; - - /** root container 생성 */ - var shadowContainerDom = document.createElement(STR_DIV); - $(shadowContainerDom).css(STR_DISPLAY,STR_BLOCK); - $(shadowContainerDom).addClass(VP_CLASS_BLOCK_SHADOWBLOCK_CONTAINER); - $(shadowContainerDom).addClass(VP_CLASS_SELECTED_SHADOWBLOCK); - - /** 블럭을 이동할 때 */ - if (this.realBlock) { - this.childListDom = []; - this.childBlockList = this.realBlock.getBlockList_thisBlockArea(); - /* 첫번째 블럭이 node 블럭이고 - * toggle 된 상태면 두번째 이후 블럭 생성 안함 - */ - if (this.realBlock.getBlockType() == BLOCK_CODELINE_TYPE.NODE - || this.realBlock.getBlockType() == BLOCK_CODELINE_TYPE.TEXT - || this.realBlock.isGroupBox) { - var blockMainDom = blockContainerThis.makeShadowBlockDom(this.realBlock); - - $(blockMainDom).css(STR_OPACITY, NUM_SHADOWBLOCK_OPACITY); - this.childListDom.push(blockMainDom); - $(shadowContainerDom).append(blockMainDom); - } else { - this.childBlockList.forEach(block => { - var blockMainDom = blockContainerThis.makeShadowBlockDom(block); - - $(blockMainDom).css(STR_OPACITY, NUM_SHADOWBLOCK_OPACITY); - this.childListDom.push(blockMainDom); - $(shadowContainerDom).append(blockMainDom); - }); - } - - /** Logic(Define, Control, Execute) 이동할 때 */ - } else { - this.childListDom = []; - - var blockMainDom = blockContainerThis.makeShadowBlockDom(this); - - $(blockMainDom).css(STR_OPACITY, NUM_SHADOWBLOCK_OPACITY); - this.childListDom.push(blockMainDom); - $(shadowContainerDom).append(blockMainDom); - } - - this.setBlockContainerDom(shadowContainerDom); - } - - ShadowBlock.prototype.reRender = function() { - var rootDepth = this.getRootDepth(); - var blockMaxWidth = this.blockContainerThis.getBlockMaxWidth(); - - /** 블럭을 이동할 때 */ - if (this.realBlock) { - var firstShadowDomDepth = this.childBlockList[0].getDepth(); - this.childListDom.forEach( (childDom, index) => { - var childBlockDepth = this.childBlockList[index].getDepth(); - var _childBlockDepth = childBlockDepth - firstShadowDomDepth + rootDepth; - var blockwidth = blockMaxWidth - (_childBlockDepth * NUM_INDENT_DEPTH_PX); - - $(childDom).css(STR_WIDTH, blockwidth ); - $(childDom).css(STR_MARGIN_LEFT, _childBlockDepth * NUM_INDENT_DEPTH_PX); - }); - - /** Logic(Define, Control, Execute) 이동할 때 */ - } else { - this.childListDom.forEach( (childDom) => { - var blockwidth = blockMaxWidth - (rootDepth * NUM_INDENT_DEPTH_PX); - $(childDom).css(STR_WIDTH, blockwidth); - $(childDom).css(STR_MARGIN_LEFT, rootDepth * NUM_INDENT_DEPTH_PX); - }); - } - } - - /** Logic(Define, Control, Execute)이나 블럭이 이동할 때, - * shadow를 생성하고 그 shadow를 block container dom에 insert하는 메소드 - */ - ShadowBlock.prototype.insertShadowDomToBlockDom = function( thisBlock, direction, asGroup=false) { - // var thisBlock = this; - // console.log('depth',depth); - var blockContainerThis = this.getBlockContainerThis(); - - var depth = thisBlock.getDepth(); - var indentPxNum = thisBlock.getIndentNumber(); - if (direction == BLOCK_DIRECTION.INDENT) { - indentPxNum += NUM_INDENT_DEPTH_PX; - depth++; - } - - var blockMaxWidth = blockContainerThis.getBlockMaxWidth() - indentPxNum; - - var shadowContainerDom = this.getBlockContainerDom(); - $(shadowContainerDom).css(STR_WIDTH, blockMaxWidth); - $(shadowContainerDom).css(STR_DISPLAY,STR_BLOCK); - // show line number for group block's shadow - // if (asGroup) { - // $(shadowContainerDom).first('.vp-block-num-info').css(STR_OPACITY, 1); - // } else { - // $(shadowContainerDom).first('.vp-block-num-info').css(STR_OPACITY, 0); - // } - - this.setSelectBlock(thisBlock); - this.setRootDepth(depth); - this.reRender(); - - var containerDom = blockContainerThis.getBlockContainerDom(); - containerDom.insertBefore(shadowContainerDom, thisBlock.getBlockMainDom().nextSibling); - } - - ShadowBlock.prototype.insertShadowDomToBlockDomAsGroup = function(thisBlock, direction) { - var blockContainerThis = this.getBlockContainerThis(); - - var depth = thisBlock.getDepth(); - var indentPxNum = thisBlock.getIndentNumber(); - if (direction == BLOCK_DIRECTION.INDENT) { - indentPxNum += NUM_INDENT_DEPTH_PX; - depth++; - } - - var blockMaxWidth = blockContainerThis.getBlockMaxWidth() - indentPxNum; - - var shadowContainerDom = this.getBlockContainerDom(); - $(shadowContainerDom).css(STR_WIDTH, blockMaxWidth); - $(shadowContainerDom).css(STR_DISPLAY, STR_BLOCK); - - // show line number for group block's shadow - $(shadowContainerDom).first('.vp-block-num-info').css(STR_OPACITY, 1); - - this.setSelectBlock(thisBlock); - this.setRootDepth(depth); - this.reRender(); - - var containerDom = blockContainerThis.getBlockContainerDom(); - containerDom.insertBefore(shadowContainerDom, thisBlock.getBlockMainDom().nextSibling); - } - - ShadowBlock.prototype.getBlockContainerThis = function() { - return this.blockContainerThis; - } - - ShadowBlock.prototype.setRootDepth = function(rootDepth) { - this.rootDepth = rootDepth; - } - ShadowBlock.prototype.getRootDepth = function() { - return this.rootDepth; - } - - ShadowBlock.prototype.getBlockName = function() { - return this.name; - } - ShadowBlock.prototype.setBlockName = function(name) { - this.name = name; - } - - ShadowBlock.prototype.getBlockType = function() { - return this.type; - } - - - ShadowBlock.prototype.getBlockContainerDom = function() { - return this.containerDom; - } - ShadowBlock.prototype.setBlockContainerDom = function(containerDom) { - this.containerDom = containerDom; - } - - - - - - - ShadowBlock.prototype.setSelectBlock = function(selectBlock) { - this.selectBlock = selectBlock; - } - ShadowBlock.prototype.getSelectBlock = function() { - return this.selectBlock; - } - - /** insertShadowDomToBlockDom메소드에서 - * block container dom에 insert된 Shadow 블럭 dom을 제거하는 메소드 */ - ShadowBlock.prototype.deleteShadowBlock = function() { - var blockContainerThis = this.blockContainerThis; - var rootBlockContainerDom = blockContainerThis.getBlockContainerDom(); - $(rootBlockContainerDom).find(VP_CLASS_PREFIX + VP_CLASS_BLOCK_SHADOWBLOCK_CONTAINER).remove(); - } - - return ShadowBlock; -}); diff --git a/src/common/StringBuilder.js b/src/common/StringBuilder.js deleted file mode 100644 index 44dcdd8e..00000000 --- a/src/common/StringBuilder.js +++ /dev/null @@ -1,66 +0,0 @@ -define ([ - 'require' -], function(requirejs) { - "use strict"; - - /** - * @class StringBuilder - * @constructor - */ - var StringBuilder = function() { - this.buffer = new Array(); - }; - - // 문자열 추가. - StringBuilder.prototype.append = function(str) { - this.buffer[this.buffer.length] = str; - } - - // 문자열 추가하고 줄바꿈. - StringBuilder.prototype.appendLine = function(str) { - this.append((str == null ? "" : str) + "\n"); - } - - // 문자열 포멧형 추가. - StringBuilder.prototype.appendFormat = function() { - 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; - } - - // 문자열 포멧형 추가하고 줄바꿈. - StringBuilder.prototype.appendFormatLine = function() { - 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"; - } - - // 문자열 변환. - StringBuilder.prototype.replace = function(from, to) { - for (var i = this.buffer.length - 1; i >= 0; i--) - this.buffer[i] = this.buffer[i].replace(new RegExp(from, "g"), to); - } - - // 문자열 반환. - StringBuilder.prototype.toString = function() { - return this.buffer.join(""); - } - - StringBuilder.prototype.clear = function() { - this.buffer = new Array(); - } - - return { - StringBuilder: StringBuilder - }; -}); \ No newline at end of file diff --git a/src/common/component/vpAccordionBox.js b/src/common/component/vpAccordionBox.js deleted file mode 100644 index c94be4e8..00000000 --- a/src/common/component/vpAccordionBox.js +++ /dev/null @@ -1,130 +0,0 @@ -define([ - 'require' - , 'jquery' - , 'nbextensions/visualpython/src/common/vpCommon' - , 'nbextensions/visualpython/src/common/constant' - , 'nbextensions/visualpython/src/common/StringBuilder' - , 'nbextensions/visualpython/src/common/component/vpComComponent' -], function (requirejs, $, vpCommon, vpConst, sb, vpComComponent) { - /** - * @class vpAccordionBox 아코디언 박스 객체 - * @constructor - * @param {String} caption 박스 캡션 - * @param {boolean} open 초기 오픈 상태 - * @param {boolean} uniqueness 동일레벨에서 한 박스만 오픈 허용 - */ - var vpAccordionBox = function(caption = " ", open = false, uniqueness = false) { - this.setUUID(); - if (caption == "") { - caption = " "; - } - this._contents = ""; - this._caption = caption; - this._isOpen = open; - this._uniqueness = uniqueness; - this._additionalClass = ""; - this._attributes = ""; - }; - - vpAccordionBox.prototype = Object.create(vpComComponent.vpComComponent.prototype); - - /** - * 박스 헤더 캡션 설정 - * @param {String} caption 박스 캡션 - */ - vpAccordionBox.prototype.setCaption = function(caption = " ") { - if (caption == "") { - caption = " "; - } - this._caption = caption; - } - - /** - * 박스 컨텐츠 내용 설정 - * @param {String} html contents - */ - vpAccordionBox.prototype.setContent = function(html = "") { - this._contents = html; - } - - /** - * 박스 컨텐츠 내용 append - * @param {String} html contents - */ - vpAccordionBox.prototype.appendContent = function(html = "") { - this._contents = vpCommon.formatString("{0}{1}", this._contents, html); - } - - /** - * 박스 컨텐츠 내용 preppend - * @param {String} html contents - */ - vpAccordionBox.prototype.prependContent = function(html = "") { - this._contents = vpCommon.formatString("{0}{1}", html, this._contents); - } - - /** - * 박스 생성시 오픈 여부 설정 - * @param {boolean} open 초기 오픈 상태 - * @param {boolean} uniqueness 동일레벨에서 한 박스만 오픈 허용 - */ - vpAccordionBox.prototype.setOpenBox = function(open = false) { - this._isOpen = open; - } - - /** - * 동일 레벨에서 한개만 오픈 허용여부 설정 - * @param {boolean} uniqueness 동일레벨에서 한 박스만 오픈 허용 - */ - vpAccordionBox.prototype.setUniqueness = function(uniqueness = false) { - this._uniqueness = uniqueness; - } - - /** - * 추가 클래스 설정 - * @param {String} additionalClass 추가 클래스 - */ - vpAccordionBox.prototype.addClass = function(additionalClass = "") { - if (additionalClass == "") return; - var that = this; - that._additionalClass = vpCommon.formatString("{0} {1}", that._additionalClass, additionalClass); - } - - /** - * 추가 속성 부여 - * @param {String} attrName 속성명 - * @param {String} attrValue 속성값 - */ - vpAccordionBox.prototype.addAttribute = function(attrName = "", attrValue = "") { - if (attrName == "") return; - var that = this; - that._attributes = vpCommon.formatString("{0} {1}='{2}'", that._attributes, attrName, attrValue); - } - - /** - * 아코디언 박스 태그 생성 - * @returns html accordion box tag string - */ - vpAccordionBox.prototype.toTagString = function() { - var sbTagString = new sb.StringBuilder(); - var that = this; - - sbTagString.appendFormatLine("