const { now } = require("jquery");

define([

'nbextensions/visualpython/src/common/vpCommon'

, 'nbextensions/visualpython/src/common/vpFuncJS'

, 'nbextensions/visualpython/src/common/metaDataHandler'

, 'nbextensions/visualpython/src/common/constant'

, 'nbextensions/visualpython/src/common/StringBuilder'

, './shadowBlock.js'

, './api.js'

, './api_list.js'

, './constData.js'

, './block.js'

, './component/blockMenu.js'

, 'codemirror/lib/codemirror'

], function ( vpCommon, vpFuncJS, md, vpConst, sb,

shadowBlock, api, api_list, constData, block, BlockMenu

, codemirror) {

const { RemoveSomeBlockAndGetBlockList

, IsCodeBlockType

, IsDefineBlockType

, IsCanHaveIndentBlock

, IsNodeTextBlockType

, RenderHTMLDomColor

, GenerateClassInParamList

, GenerateDefCode

, GenerateReturnCode

, GenerateIfCode

, GenerateExceptCode

, GenerateForCode

, GenerateLambdaCode

, GenerateWhileCode

, ShowImportListAtBlock } = api;

const { BLOCK_CODELINE_TYPE

, BLOCK_DIRECTION

, FOCUSED_PAGE_TYPE

, DEF_BLOCK_ARG6_TYPE

, VP_CLASS_PREFIX

, VP_CLASS_BLOCK_NUM_INFO

, VP_CLASS_BLOCK_CONTAINER

, VP_CLASS_APIBLOCK_MAIN

, VP_CLASS_APIBLOCK_BOARD

, VP_CLASS_APIBLOCK_BOARD_CONTAINER

, VP_CLASS_APIBLOCK_BUTTONS

, VP_CLASS_APIBLOCK_OPTION_TAB

, VP_CLASS_APIBLOCK_OPTION_TAB_SELECTOR

, VP_CLASS_BLOCK_SUB_BTN_CONTAINER

, VP_CLASS_BLOCK_BOTTOM_HOLDER

, VP_BLOCK_BLOCKCODELINETYPE_CLASS_DEF

, VP_APIBLOCK_BOARD_OPTION_PREVIEW_BUTTON

, VP_APIBLOCK_BOARD_OPTION_CANCEL_BUTTON

, VP_APIBLOCK_BOARD_OPTION_APPLY_BUTTON

, VP_ID_PREFIX

, VP_ID_WRAPPER

, NUM_INDENT_DEPTH_PX

, NUM_DEFAULT_POS_Y

, NUM_DEFAULT_POS_X

, NUM_NODE_OR_TEXT_BLOCK_MARGIN_TOP_PX

, NUM_BLOCK_MAX_WIDTH

, NUM_TEXT_BLOCK_WIDTH

, NUM_OPTION_PAGE_WIDTH

, NUM_BUTTONS_PAGE_WIDTH

, NUM_API_BOARD_CENTER_PAGE_MIN_WIDTH

, VP_BLOCK

, NUM_SHADOWBLOCK_OPACITY

, STR_CLICK

, STR_EMPTY

, STR_TOP

, STR_LEFT

, STR_DIV

, STR_PX

, STR_HEIGHT

, STR_WIDTH

, STR_MARGIN_LEFT

, STR_MAX_WIDTH

, STR_MIN_WIDTH

, STR_KEYWORD_NEW_LINE

, STR_COLOR

, STR_BOX_SHADOW

, STR_BACKGROUND_COLOR

, STR_TRANSPARENT

, STR_OPACITY

, STR_MARGIN_TOP

, STR_TEXT_BLOCK_MARKDOWN_FUNCID

, STR_DISPLAY

, STR_BLOCK

, STR_NONE

, STR_SAMPLE_TEXT

, STATE_className

, STATE_defInParamList

, STATE_codeLine

, STATE_defName

, COLOR_CLASS_DEF

, STR_BORDER } = constData;

const { Block } = block;

const ShadowBlock = shadowBlock;

const { setClosureBlock

, loadOption_block

, loadOption_textBlock

, optionPageLoadCallback_block

, makeUpGreenRoomHTML

, getNavigationInfo } = api_list;

var BlockContainer = function() {

this.importPackageThis = null;

/** 현재 블럭 list */

this.blockList = [];

/** 이전 블럭 list */

this.prevBlockList = [];

/** node 블럭 list */

this.nodeBlockList = [];

/** text 블럭 list */

this.textBlockList = [];

this.loadedVariableList = [];

// API Block 햄버거 메뉴바를 open하면 true, close하면 false

this.isMenubarOpen = false;

/** API Block 햄버거 메뉴에서 depth를 보여줄지 말지 결정 가능

* true면 보여주고 false면 안 보여줌

*/

this.isShowDepth = true;

/** API List를 보여줄지 말지 결정

* true면 보여주고 false면 안 보여줌

*/

this.isAPIListPageOpen = true;

/** option popup을 resize하면 true

* resize가 끝나면 false

*

* option popup이 끝난 상태(isOptionPageResize = false) 이어야

* visual python 전체 resize 기능 가능

*/

this.isOptionPageResize = false;

this.classNum = 1;

this.defNum = 1;

this.nodeBlockNumber = 1;

/** 현재 작업하고 있는 API Block 영역의 데이터를 저장

* 영역은 총 4가지 FOCUSED_PAGE_TYPE

*/

this.focusedPageType = null;

/** option popup의 width값 지정

* 이후 resize를 통해 늘어나거나 줄어들 수 있음

*/

this.optionPageWidth = NUM_OPTION_PAGE_WIDTH;

/** block의 width 값. 기본은 300.

* 이후 resize를 통해 늘어나거나 줄어들 수 있음 */

this.blockMaxWidth = NUM_BLOCK_MAX_WIDTH;

this.scrollHeight = 0;

/** 현재 작업 중이거나, 클릭한 블럭을 selectedBlock에 저장함

* 현재 작업 중이거나, 클릭한 블럭이 무엇인지 알기 위해서 필요

*/

this.selectedBlock = null;

this.prevSelectedBlock = null;

this.copyBlock_last = null;

this.copyBlock_first = null;

this.blockContainerDom = null;

/** generateCode를 실행하면 이 데이터로 실행 */

this.code = STR_EMPTY;

this.mdHandler = null;

this.domPool = new Map();

var cmReadonlyConfig = {

mode: {

name: 'python',

version: 3,

singleLineStringErrors: false

}, // text-cell(markdown cell) set to 'htmlmixed'

height: '100%',

width: '100%',

indentUnit: 4,

matchBrackets: true,

readOnly:true,

autoRefresh: true,

// lineWrapping: false, // text-cell(markdown cell) set to true

// indentWithTabs: true,

theme: "ipython",

extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"},

scrollbarStyle: "null"

};

this.cmOverallPreview = codemirror.fromTextArea($('#vp_overallCodePreview')[0], cmReadonlyConfig);

this.cmOptionPreview = codemirror.fromTextArea($('#vp_optionCodePreview')[0], cmReadonlyConfig);

// blockmenu

this.blockMenu = new BlockMenu(this);

}

/** Apply not saved block */

BlockContainer.prototype.applyBlock = function() {

var isFirstBlock = false;

const blockList = this.getBlockList();

/** board에 블럭이 0개 일때

* 즉 블럭이 처음으로 생성되는 경우

*/

if (blockList.length == 0) {

isFirstBlock = true;

}

var block = this.getSelectBlock();

if (block) {

// blockList에 있는 블럭이면, 값 적용

if (blockList.some(blockEle => {

if (blockEle.getUUID() == block.getUUID()) {

return true;

} else {

return false;

}

})) {

block.saveState();

} else {

// blockList에 없으면, 추가

block.apply();

block.saveState();

if (isFirstBlock == true) {

block.setDirection(BLOCK_DIRECTION.ROOT);

this.addNodeBlock(block);

// this.reNewContainerDom();

} else {

this.addNodeBlock(block);

var lastBottomBlock = this.getRootToLastBottomBlock();

lastBottomBlock.appendBlock(block, BLOCK_DIRECTION.DOWN);

}

this.reRenderAllBlock_asc();

this.resetBlockListAndRenderThisBlock(block);

}

}

}

BlockContainer.prototype.cancelBlock = function() {

const blockList = this.getBlockList();

var block = this.getSelectBlock();

if (block) {

// blockList에 있는 블럭이면, 값 되돌리기

if (blockList.some(blockEle => {

if (blockEle.getUUID() == block.getUUID()) {

return true;

} else {

return false;

}

})) {

block.loadState();

// re-render block name

// re-render block header

var codeLineStr = block.getNowCodeLine();

block.writeCode(codeLineStr);

} else {

// blockList에 없으면, 삭제

block.deleteBlock_childBlockList();

this.resetBlockList();

this.resetOptionPage();

this.reRenderAllBlock_asc();

}

}

}

BlockContainer.prototype.checkModified = function() {

var block = this.getSelectBlock();

var passChecking = false;

if (block) {

if (block.isModified) {

// set apply button enabled

$(VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_APPLY_BUTTON).removeClass('disabled');

// show title alert

$(VP_CLASS_PREFIX + 'vp-apiblock-option-new-to-save').css('display', 'block');

} else {

var nowState = block.state;

var blockType = block.getBlockType();

if (blockType == BLOCK_CODELINE_TYPE.API

|| blockType == BLOCK_CODELINE_TYPE.TEXT) {

var importPackage = block.getImportPakage();

// get generatedCode and save as metadata

if (importPackage) {

var code = importPackage.generateCode(false, false);

importPackage.metaGenerate();

// importPackage.metadata.code = code;

importPackage['metadata'] = {

...importPackage['metadata'],

code : code

}

nowState = {

...nowState,

metadata: importPackage.metadata

};

}

// for api, if metadata is not loaded yet for state_backup

if (!importPackage || !block.state_backup || block.state_backup.metadata == null) {

passChecking = true;

block.state_backup = {

...nowState

};

}

}

// ignore isIfElse, isFinally state (toggle state of else/finally option)

if (blockType == BLOCK_CODELINE_TYPE.IF

|| blockType == BLOCK_CODELINE_TYPE.TRY) {

block.state_backup['isIfElse'] = nowState['isIfElse'];

block.state_backup['isFinally'] = nowState['isFinally'];

}

if (!passChecking && JSON.stringify(nowState) != JSON.stringify(block.state_backup)) {

// set apply button enabled

$(VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_APPLY_BUTTON).removeClass('disabled');

// show title alert

$(VP_CLASS_PREFIX + 'vp-apiblock-option-new-to-save').css('display', 'block');

// set this block to isModified = true

block.isModified = true;

} else {

$(VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_APPLY_BUTTON).addClass('disabled');

$(VP_CLASS_PREFIX + 'vp-apiblock-option-new-to-save').css('display', 'none');

}

}

} else {

$(VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_APPLY_BUTTON).addClass('disabled');

$(VP_CLASS_PREFIX + 'vp-apiblock-option-new-to-save').css('display', 'none');

}

}

BlockContainer.prototype.setMetahandler = function(funcID) {

this.mdHandler = new md.MdHandler(funcID);

}

BlockContainer.prototype.setImportPackageThis = function(importPackageThis) {

this.importPackageThis = importPackageThis;

}

BlockContainer.prototype.getImportPackageThis = function() {

return this.importPackageThis;

}

BlockContainer.prototype.setIsMenubarOpen = function(isMenubarOpen) {

this.isMenubarOpen = isMenubarOpen;

}

BlockContainer.prototype.getIsMenubarOpen = function() {

return this.isMenubarOpen;

}

BlockContainer.prototype.setIsShowDepth = function(isShowDepth) {

this.isShowDepth = isShowDepth;

}

BlockContainer.prototype.getIsShowDepth = function() {

return this.isShowDepth;

}

BlockContainer.prototype.setIsAPIListPageOpen = function(isAPIListPageOpen) {

this.isAPIListPageOpen = isAPIListPageOpen;

}

BlockContainer.prototype.getIsAPIListPageOpen = function() {

return this.isAPIListPageOpen;

}

BlockContainer.prototype.setIsOptionPageResize = function(isOptionPageResize) {

this.isOptionPageResize = isOptionPageResize;

}

BlockContainer.prototype.getIsOptionPageResize = function() {

return this.isOptionPageResize;

}

BlockContainer.prototype.setBlockMaxWidth = function(blockMaxWidth) {

this.blockMaxWidth = blockMaxWidth;

}

BlockContainer.prototype.getBlockMaxWidth = function() {

return this.blockMaxWidth;

}

/** block을 blockList에 add */

BlockContainer.prototype.addBlock = function(block) {

this.blockList = [...this.blockList, block];

}

/** blockList를 가져옴*/

BlockContainer.prototype.getBlockList = function() {

return this.blockList;

}

/** blockList를 파라미터로 받은 blockList로 덮어 씌움*/

BlockContainer.prototype.setBlockList = function(blockList) {

this.blockList = blockList;

}

/**

* node 블럭 리스트를 가져옴

*/

BlockContainer.prototype.getNodeBlockList = function() {

return this.nodeBlockList;

}

/**

* node 블럭 리스트를 오름차순으로 가져옴

* board에서의 오름차순

*/

BlockContainer.prototype.getNodeBlockList_asc = function() {

var rootBlock = this.getRootBlock();

var blockChildList = rootBlock.getThisToLastBlockList();

var nodeBlockList = [];

var blockContainerThis = this;

blockChildList.forEach((block, index) => {

if (block.getBlockType() == BLOCK_CODELINE_TYPE.NODE

|| block.isGroupBlock) {

nodeBlockList.push(block);

}

});

return nodeBlockList;

}

/**

* node text 블럭의 리스트를 오름차순으로 가져옴

* board에서의 오름차순

*/

BlockContainer.prototype.getNodeBlockAndTextBlockList_asc = function() {

var rootBlock = this.getRootBlock();

var blockChildList = rootBlock.getThisToLastBlockList();

var nodeBlockList = [];

var blockContainerThis = this;

blockChildList.forEach((block, index) => {

if (block.getBlockType() == BLOCK_CODELINE_TYPE.NODE

|| block.getBlockType() == BLOCK_CODELINE_TYPE.TEXT

|| block.isGroupBlock) {

nodeBlockList.push(block);

}

});

return nodeBlockList;

}

BlockContainer.prototype.setNodeBlockList = function(nodeBlockList) {

this.nodeBlockList = nodeBlockList;

}

/** block을 blockList에 add */

BlockContainer.prototype.addNodeBlock = function(block) {

this.addNodeBlockNumber();

this.nodeBlockList = [...this.nodeBlockList, block];

}

BlockContainer.prototype.removeNodeBlock = function(block) {

this.decNodeBlockNumber();

this.nodeBlockList = this.nodeBlockList.filter(b => b.getUUID() != block.getUUID());

}

BlockContainer.prototype.getTextBlockList = function() {

return this.textBlockList;

}

BlockContainer.prototype.setTextBlockList = function(textBlockList) {

this.textBlockList = textBlockList;

}

/** block을 blockList에 add */

BlockContainer.prototype.addTextBlock = function(block) {

this.textBlockList = [...this.textBlockList, block];

}

/** prevBlockList를 가져옴*/

BlockContainer.prototype.getPrevBlockList = function() {

return this.prevBlockList;

}

/** prevBlockList를 파라미터로 받은 prevBlockList로 덮어 씌움*/

BlockContainer.prototype.setPrevBlockList = function(prevBlockList) {

this.prevBlockList = prevBlockList;

}

/** root block을 get */

BlockContainer.prototype.getRootBlock = function() {

var blockList = this.getBlockList();

var rootBlock = null;

blockList.some(block => {

if (block.getDirection() == BLOCK_DIRECTION.ROOT) {

rootBlock = block;

return true;

}

});

return rootBlock;

}

BlockContainer.prototype.setClassNum = function(classNum) {

this.classNum = classNum;

}

BlockContainer.prototype.addClassNum = function() {

this.classNum += 1;

}

BlockContainer.prototype.getClassNum = function() {

return this.classNum;

}

BlockContainer.prototype.setDefNum = function(defNum) {

this.defNum = defNum;

}

BlockContainer.prototype.addDefNum = function() {

this.defNum += 1;

}

BlockContainer.prototype.getDefNum = function() {

return this.defNum;

}

BlockContainer.prototype.setNodeBlockNumber = function(nodeBlockNumber) {

this.nodeBlockNumber = nodeBlockNumber;

}

BlockContainer.prototype.addNodeBlockNumber = function() {

this.nodeBlockNumber += 1;

}

BlockContainer.prototype.decNodeBlockNumber = function() {

this.nodeBlockNumber -= 1;

}

BlockContainer.prototype.getNodeBlockNumber = function() {

return this.nodeBlockNumber;

}

BlockContainer.prototype.getMaxWidth = function() {

var maxWidth = $(vpCommon.wrapSelector(VP_CLASS_PREFIX + VP_CLASS_APIBLOCK_BOARD_CONTAINER)).width();

return maxWidth;

}

BlockContainer.prototype.getMaxHeight = function() {

var maxHeight = $(vpCommon.wrapSelector(VP_CLASS_PREFIX + VP_CLASS_APIBLOCK_BOARD_CONTAINER)).height();

return maxHeight;

}

BlockContainer.prototype.getScrollHeight = function() {

return this.scrollHeight;

}

BlockContainer.prototype.setScrollHeight = function(scrollHeight) {

this.scrollHeight = scrollHeight;

}

BlockContainer.prototype.setBlockContainerDom = function(blockContainerDom) {

this.blockContainerDom = blockContainerDom;

}

BlockContainer.prototype.getBlockContainerDom = function() {

return this.blockContainerDom;

}

BlockContainer.prototype.setSelectBlock = function(selectedBlock) {

this.selectedBlock = selectedBlock;

this.setOptionPreviewBox(selectedBlock);

}

BlockContainer.prototype.getSelectBlock = function() {

return this.selectedBlock;

}

BlockContainer.prototype.setPrevSelectBlock = function(prevSelectedBlock) {

this.prevSelectedBlock = prevSelectedBlock;

}

BlockContainer.prototype.getPrevSelectBlock = function() {

return this.prevSelectedBlock;

}

BlockContainer.prototype.getAPIBlockCode = function() {

return this.code;

}

BlockContainer.prototype.setAPIBlockCode = function(code) {

this.code = code;

}

/**

* API Block은 크게 4가지 영역으로 나뉨

* 1. Logic

* 2. Board

* 3. - Board 위에 node 블럭 생성 input 칸

* 4. Option popup

*

* 각 영역에서 작업을 할 때,

* 내부적으로 focus해서 어느 영역에서 작업하는지 알고 있기 위해 FocusedPageType 지정

* 예전에는 초록색 border로 영역을 지정했으니 현재는 삭제하여 보여지지는 않음

* @param {ENUM} focusedPageType

*/

BlockContainer.prototype.setFocusedPageType = function(focusedPageType) {

// 추가: FOCUSED_PAGE_TYPE = NULL일 경우 주피터 단축키 활성화 / 아닐 경우 비활성화

if (focusedPageType == FOCUSED_PAGE_TYPE.NULL) {

// Jupyter.notebook.keyboard_manager.enable();

} else {

// Jupyter.notebook.keyboard_manager.disable();

}

this.focusedPageType = focusedPageType;

}

BlockContainer.prototype.getFocusedPageType = function() {

return this.focusedPageType;

}

/** blockList에서 특정 block을 삭제

* @param {string} blockUUID

*/

BlockContainer.prototype.deleteBlock = function(blockUUID) {

/** blockList를 돌며 삭제하고자 하는 block을 찾아 제거

*/

var blockList = this.getBlockList();

blockList.some((block, index) => {

if (block.getUUID() == blockUUID) {

delectedIndex = index;

blockList.splice(index, 1);

return true;

} else {

return false;

}

});

}

/** Blocklist의 block들 전부삭제 */

BlockContainer.prototype.deleteAllBlock = function() {

var rootBlock = this.getRootBlock();

if (rootBlock) {

var blockList = this.getBlockList();

blockList.forEach(block => {

block.reConnectPrevBlock();

block.deleteBlockDomAndData();

});

this.setBlockList([]);

this.setPrevBlockList([]);

this.resetOptionPage();

this.setFocusedPageType(FOCUSED_PAGE_TYPE.EDITOR);

this.reNewContainerDom();

this.reRenderAllBlock_asc();

}

}

/** nodeBlockList에서 특정 block을 삭제

* @param {string} blockUUID

*/

BlockContainer.prototype.deleteNodeBlock = function(blockUUID) {

var nodeBlockList = this.getNodeBlockList();

nodeBlockList.some((block, index) => {

if (block.getUUID() == blockUUID) {

nodeBlockList.splice(index, 1);

return true;

} else {

return false;

}

});

}

/** 블럭 데이터 복사 */

BlockContainer.prototype.setCtrlSaveData = function() {

var selectedBlock = this.getSelectBlock();

var childBlockList = selectedBlock.getBlockList_thisBlockArea();

var blockList_cloned = this.copyBlockList(childBlockList);

this.copyBlock_before = selectedBlock.getLastBlock_from_thisBlockArea();

this.copyBlock_first = blockList_cloned[0];

selectedBlock.renderSelectedBlockBorderColor(true);

}

/** 복사한 블럭 데이터 copy해서 board에 렌더링 */

BlockContainer.prototype.copyCtrlSaveData = function() {

this.copyBlock_before.appendBlock(this.copyBlock_first, BLOCK_DIRECTION.DOWN);

this.reRenderAllBlock_metadata();

vpCommon.renderSuccessMessage('Blocks copy success!');

this.copyBlock_first.renderSelectedBlockBorderColor(true)

}

/** 인자로 받은 블럭 데이터 list 복사 */

BlockContainer.prototype.copyBlockList = function(copyedBlockList) {

var apiBlockJsonDataList = this.blockToJson(copyedBlockList);

var uuid_hable = [];

apiBlockJsonDataList.forEach((blockData,index) => {

const { UUID } = blockData;

uuid_hable[UUID] = {

oldUUID: UUID

, newUUID: vpCommon.getUUID()

}

});

apiBlockJsonDataList.forEach((blockData,index) => {

var newChildBlockUUIDList = [];

blockData.childBlockUUIDList.forEach(uuid => {

if (uuid_hable[uuid] != undefined) {

newChildBlockUUIDList.push(uuid_hable[uuid].newUUID);

}

});

blockData.childBlockUUIDList = newChildBlockUUIDList;

blockData.UUID = uuid_hable[blockData.UUID].newUUID;

});

var createdBlockList = this.jsonToBlock(apiBlockJsonDataList);

return createdBlockList;

}

BlockContainer.prototype.makeAPIBlockMetadata = function() {

var rootBlock = this.getRootBlock();

if (!rootBlock) {

return [];

}

var childBlockList = rootBlock.getThisToLastBlockList();

var apiBlockJsonDataList = this.blockToJson(childBlockList);

return apiBlockJsonDataList;

}

/** Block list을 json 데이터로 변환

* @param {Array<Block>} blockList

*/

BlockContainer.prototype.blockToJson = function(blockList) {

var apiBlockJsonDataList = [];

blockList.forEach( (block, index) => {

if (block.getBlockType() == BLOCK_CODELINE_TYPE.API) {

// FIXME: Text 블럭 Metadata load/save 검증 필요

//|| block.getBlockType() == BLOCK_CODELINE_TYPE.TEXT) {

block.setMetadata();

}

/** 자식 블럭 리스트 중에 uuid만 뽑아서 리턴 */

var childBlockUUIDList = block.getChildBlockList().map(childBlock => {

return childBlock.getUUID();

});

apiBlockJsonDataList[index] = {

UUID: block.getUUID()

, childBlockUUIDList

, blockType: block.getBlockType()

, blockName: block.getBlockName()

, blockOptionState: block.state

, blockDepth: block.getDepth()

, blockDirection: block.getDirection()

, isGroupBlock: block.isGroupBlock

}

});

return apiBlockJsonDataList;

}

/** 인자로 들어온 json list을 Block 데이터로 변환

* @param {Array<JSON>} apiBlockJsonDataList

*/

BlockContainer.prototype.jsonToBlock = function(apiBlockJsonDataList) {

var createdBlockList = [];

var createdBlock = null;

apiBlockJsonDataList.forEach( (blockData, index) => {

const { UUID

, childBlockUUIDList // 새 버전

, nextBlockUUIDList // childBlockUUIDList변수가 쓰이지 않은 기존 버전 호환을 위한 변수

, blockType

, blockName

, blockOptionState

, blockDepth

, blockDirection

, isGroupBlock } = blockData;

createdBlock = this.createBlock(blockType, blockData, null, isGroupBlock);

createdBlock.apply();

createdBlock.setUUID(UUID);

createdBlock.setDepth(blockDepth);

createdBlock.setDirection(blockDirection);

createdBlock.setBlockName(blockName);

createdBlock.state = {

...createdBlock.state

, blockOptionState

}

createdBlock.setChildBlockUUIDList(childBlockUUIDList || nextBlockUUIDList);

createdBlockList.push(createdBlock);

});

var childBlockUUIDList = [];

createdBlockList.forEach((createdBlock,index) => {

childBlockUUIDList = createdBlock.getChildBlockUUIDList();

childBlockUUIDList.forEach(uuid => {

createdBlockList.forEach(nextCreatedBlock => {

if (uuid == nextCreatedBlock.getUUID()) {

nextCreatedBlock.setPrevBlock(createdBlock);

createdBlock.addChildBlockList(nextCreatedBlock);

}

});

});

});

return createdBlockList;

}

/** 블럭 이동시 모든 블럭의 left shadow 계산 */

BlockContainer.prototype.reLoadBlockListLeftHolderHeight = function() {

const blockContainerThis = this;

const blockList = blockContainerThis.getBlockList();

blockList.forEach(block => {

const blockType = block.getBlockType();

if ( IsCanHaveIndentBlock(blockType) == true ) {

block.calculateLeftHolderHeightAndSet();

const distance = block.getBlockLeftShadowHeight();

$(block.getBlockLeftShadowDom()).css(STR_HEIGHT, distance);

}

});

}

/**

* board에 있는 블럭들 다시 렌더링

*/

BlockContainer.prototype.reRenderAllBlock = function() {

this.reRenderBlockList_prefix();

this.reRenderBlockList();

}

/**

* board에 있는 블럭들 다시 렌더링 (오름차순으로)

*/

BlockContainer.prototype.reRenderAllBlock_asc = function() {

this.reRenderBlockList_prefix(true);

this.reRenderBlockList();

}

/**

* board에 있는 블럭들 다시 렌더링 - vpnote 데이터(metadata)를 기반으로

*/

BlockContainer.prototype.reRenderAllBlock_metadata = function() {

this.reRenderBlockList_prefix(true);

this.reRenderBlockList(true);

}

/**

* block의 depth를 계산하고 block 앞에 depth 를 보여주는 함수

** Block 앞에 line number를 정렬

* isAsc true면 오름차순 정렬

*

*/

BlockContainer.prototype.reRenderBlockList_prefix = function(isAsc) {

var blockContainerThis = this;

const rootBlock = this.getRootBlock();

if (rootBlock) {

//** rootBlock의 아래에 있는 블럭들을 순서대로 가져옴 */

const childBlockList = rootBlock.getThisToLastBlockList();

childBlockList.forEach((block) => {

/** 블럭 depth 계산하고 저장 */

var depth = block.calculateDepthAndGet();

block.setDepth(depth);

var indentPxNum = block.getIndentNumber();

var numWidth = 0;

var blockType = block.getBlockType();

/** 블럭의 WIDTH값을 계산 */

// DEPRECATED : TEXT Block도 일반 블럭과 동일하게 너비 계산

// if (blockType == BLOCK_CODELINE_TYPE.TEXT) {

// numWidth = NUM_TEXT_BLOCK_WIDTH;

// } else {

numWidth = this.getBlockMaxWidth() - indentPxNum;

// }

var blockMainDom = block.getBlockMainDom();

$(blockMainDom).css(STR_MARGIN_LEFT, indentPxNum);

$(blockMainDom).css(STR_WIDTH, numWidth);

/** 0 depth는 opacity 0으로 처리

* 1 이상의 depth는 opacity 1로 처리

*/

var blockDepthInfoDom = block.getBlockDepthInfoDom();

blockDepthInfoDom.text(depth);

if (block.getDepth() == 0) {

$(blockDepthInfoDom).css(STR_OPACITY,0);

} else {

$(blockDepthInfoDom).css(STR_OPACITY,1);

}

/** node 블럭과 text 블럭일 경우

* block LineNumberInfo Dom 보여줌

*/

if (IsNodeTextBlockType(blockType) == true

|| block.isGroupBlock) {

var $blockLineNumberInfoDom = $(block.getBlockLineNumberInfoDom());

$blockLineNumberInfoDom.css( STR_LEFT, -NUM_DEFAULT_POS_X );

$blockLineNumberInfoDom.css( STR_OPACITY, 1);

}

});

//** node 블럭 list들을 순서대로 가져옴 */

var nodeBlockList = this.getNodeBlockList_asc();

nodeBlockList.forEach(async (block, index) => {

/** toggle 된 것과 안 된 것 구분해서 box shadow 처리 */

if (block.getIsNodeBlockToggled() == true){

$(block.getBlockMainDom()).css(STR_BOX_SHADOW,'0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)');

} else {

$(block.getBlockMainDom()).css(STR_BOX_SHADOW, STR_NONE);

}

var $blockLineNumberInfoDom = $(block.getBlockLineNumberInfoDom());

var blockLineNumber = 0;

/** Line number 오름차순 정렬의 경우 */

if (isAsc == true) {

$blockLineNumberInfoDom.css(STR_COLOR, '#828282');

blockLineNumber = index + 1;

/** 처음 생성한 Line number를 그대로 보여줄 경우 */

} else {

blockLineNumber = block.getBlockNumber();

}

block.setBlockNumber(blockLineNumber);

$blockLineNumberInfoDom.text(block.getBlockNumber());

});

}

}

/**

* @async

* Block editor에 존재하는 블럭들을

* (이전) prevBlockList 데이터와

* (현재) blockList 데이터를 기반으로

* 전부 다시 렌더링한다

*/

BlockContainer.prototype.reRenderBlockList = async function(isMetaData) {

var blockContainerThis = this;

var rootBlock = this.getRootBlock();

if (rootBlock == null) {

return;

}

var scrollTop = $(VP_CLASS_PREFIX + VP_CLASS_APIBLOCK_BOARD).scrollTop();

var blockList = rootBlock.getThisToLastBlockList();

var prevBlockList = this.getPrevBlockList();

/** metadata를 받아서 reRender */

if (isMetaData == true) {

var containerDom = this.reNewContainerDom();

for await (var block of blockList) {

new Promise( (resolve) => resolve( $(containerDom).append(block.getBlockMainDom())));

block.bindEventAll();

}

/** blockList 길이 < prevBlockList 길이 */

} else if ( blockList < prevBlockList ) {

// console.log('blockList < prevBlockList');

var deletedBlockList = RemoveSomeBlockAndGetBlockList(prevBlockList, blockList);

deletedBlockList.forEach(block => {

var blockMainDom = block.getBlockMainDom();

$(blockMainDom).remove();

});

/** blockList 길이 > prevBlockList 길이 */

} else if (blockList > prevBlockList) {

// console.log('blockList > prevBlockList');

var containerDom = this.getBlockContainerDom();

var addedBlockList = RemoveSomeBlockAndGetBlockList(blockList, prevBlockList);

var prevBlock = addedBlockList[0].getPrevBlock();

if (prevBlock === null) {

addedBlockList.forEach((addedBlock,index) => {

$(containerDom).append(addedBlock.getBlockMainDom() );

addedBlock.bindEventAll();

});

} else {

addedBlockList.forEach(addedBlock => {

$( addedBlock.getBlockMainDom() ).insertAfter(prevBlock.getBlockMainDom());

addedBlock.bindEventAll();

prevBlock = addedBlock;

});

}

/** 그외 */

} else {

var containerDom = this.reNewContainerDom();

for await (var block of blockList) {

new Promise( (resolve) => resolve(

$(containerDom).append(block.getBlockMainDom())

));

block.bindEventAll();

}

}

/** node 블럭

* code 블럭

* write code */