$('.blpn-nodeEditor-tab-click').click(

function(event) {

event.preventDefault();

$('.blpn-nodeEditor-left').css('width','100%');

$('.blpn-nodeEditor-right').animate({width:'toggle'});

}

);

$(`.blpn-panel-area-vertical-btn`).click(function() {

if ($(this).hasClass(`blpn-arrow-down`)) {

$(this).removeClass(`blpn-arrow-down`);

$(this).addClass(`blpn-arrow-up`);

$(this).parent().parent().removeClass(`blpn-minimize`);

} else {

$(this).removeClass(`blpn-arrow-up`);

$(this).addClass(`blpn-arrow-down`);

$(this).parent().parent().addClass(`blpn-minimize`);

}

});

// MOUSE SETUP

// =============

var mouse = {

currentLink: null,

createPath: function(a, b) {

var diff = {

x: b.x - a.x,

y: b.y - a.y

};

var pathStr = 'M' + a.x + ',' + a.y + ' ';

pathStr += 'C';

pathStr += a.x + diff.x / 3 * 2 + ',' + a.y + ' ';

pathStr += a.x + diff.x / 3 + ',' + b.y + ' ';

pathStr += b.x + ',' + b.y;

return pathStr;

}

};

// CLEAN UP AND ACTUAL CODE [WIP]

// ================================

var getFullOffset = function(element) {

var offset = {

top: element.offsetTop,

left: element.offsetLeft,

};

if (element.offsetParent) {

var po = getFullOffset(element.offsetParent);

offset.top += po.top;

offset.left += po.left;

return offset;

} else {

return offset;

}

}

var svg = document.getElementById('svg');

svg.ns = svg.namespaceURI;

window.onmousemove = function(event) {

if (mouse.currentLink) {

var p = mouse.currentLink.path;

var iP = mouse.currentLink.getAttachPoint();

var oP = { x: event.pageX

, y: event.pageY };

var s = mouse.createPath(iP, oP);

p.setAttributeNS(null, 'd', s);

}

};

window.onclick = function(e) {

if (mouse.currentLink) {

mouse.currentLink.path.removeAttribute('d');

if (mouse.currentLink.nextNode) {

mouse.currentLink.nextNode.detachLink(mouse.currentLink);

}

mouse.currentLink = null;

}

};

// commonApi

var getUUID = function() {

return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>

(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)

);

}

// stateApi

/** findStateValue 함수

* state를 while루프로 돌면서 돌면서 keyName과 일치하는 state의 value값을 찾아 리턴한다

* 없으면 null을 리턴한다.

* @param {object} state

* @param {string} keyName

* @returns {any | null} returnValueOrNull

*/

var findStateValue = function(state, keyName) {

var result = [];

var stack = [{ context: result

, key: 0

, value: state }];

var currContext;

var returnValueOrNull = null;

while (currContext = stack.pop()) {

var { context, key, value } = currContext;

if (!value || typeof value != 'object') {

if (key === keyName) {

returnValueOrNull = value;

break;

}

context[key] = value;

}

else if (Array.isArray(value)) {

if (key === keyName) {

returnValueOrNull = value;

break;

}

} else {

if (key === keyName) {

returnValueOrNull = value;

break;

}

context = context[key] = Object.create(null);

Object.entries(value).forEach(([ key,value ]) => {

stack.push({ context, key, value });

});

}

};

return returnValueOrNull;

};

/** changeOldToNewState 함수

* oldState(이전 state 데이터)와 newState(새로운 state 데이터)를 비교해서

newState로 들어온 새로운 값을 oldState에 덮어 씌운다.

* @param {Object} oldState

* @param {Object} newState

* @returns {Object}

*/

var changeOldToNewState = function(oldState, newState) {

var result = [];

var stack = [{ context: result

, key: 0

, value: oldState }];

var currContext;

while (currContext = stack.pop()) {

var { context, key, value } = currContext;

if (!value || typeof value != 'object') {

var newValue = findStateValue(newState, key);

if ( newValue === "") {

context[key] = "";

}

else if (newValue === false) {

context[key] = false;

}

else {

context[key] = newValue || value;

}

}

else if (Array.isArray(value)) {

var newValue = findStateValue(newState, key);

context[key] = newValue || value;

}

else {

context = context[key] = Object.create(null);

Object.entries(value).forEach(([ key, value ]) => {

stack.push({context, key, value});

});

}

};

return result[0];

};

/** updateOneArrayIndexValueAndGetNewArray

* 배열의 특정 인덱스 값을 업데이트하고 업데이트된 새로운 배열을 리턴한다

* @param {Array} array

* @param {number} index

* @param {number | string} newValue

* @returns {Array} New array

*/

var updateOneArrayIndexValueAndGetNewArray = function(array, index, newValue) {

return [ ...array.slice(0, index), newValue,

...array.slice(index+1, array.length) ]

}

/** deleteOneArrayIndexValueAndGetNewArray

* 배열의 특정 인덱스 값을 삭제하고 삭제된 새로운 배열을 리턴한다

* @param {Array} array

* @param {number} index

* @returns {Array} New array

*/

var deleteOneArrayIndexValueAndGetNewArray = function(array, index) {

return [ ...array.slice(0, index),

...array.slice(index+1, array.length) ]

}

/** updateTwoArrayIndexValueAndGetNewArray

* 2차원 배열의 특정 인덱스 값을 업데이트하고 업데이트된 새로운 배열을 리턴한다

* @param {Array} array

* @param {number} row

* @param {number} col

* @param {number | string} newValue

* @returns {Array} New array

*/

var updateTwoArrayIndexValueAndGetNewArray = function(twoarray, row, col, newValue) {

var newArray = [...twoarray[row].slice(0, col),newValue,

...twoarray[row].slice(col + 1, twoarray[row].length)]

return [ ...twoarray.slice(0, row), newArray,

...twoarray.slice(row+1, twoarray.length) ]

}

/** deleteTwoArrayIndexValueAndGetNewArray

* 2차원 배열의 특정 인덱스 값을 삭제하고 삭제된 새로운 배열을 리턴한다

* @param {Array} array

* @param {number} row

* @param {number} col

* @returns {Array} New array

*/

var deleteTwoArrayIndexValueAndGetNewArray = function(twoarray, row, col) {

var newArray = [...twoarray[row].slice(0, col),

...twoarray[row].slice(col + 1, twoarray[row].length)]

return [ ...twoarray.slice(0, row), newArray,

...twoarray.slice(row+1, twoarray.length) ]

}

const BLPN_NODE_EDITOR_LEFT = `.blpn-nodeEditor-left`;

const NODE_BLOCK_BTN_ENUM = {

CLASS: 1

, DEF: 2

, IF: 3

, FOR: 4

, WHILE: 5

, IMPORT: 6

, API: 7

, TRY: 8

, CODE: 9

}

const NODE_BLOCK_ENUM = {

CLASS: 1

, DEF: 2

, IF: 3

, FOR: 4

, WHILE: 5

, IMPORT: 6

, API: 7

, TRY: 8

, CODE: 9

}

const NODE_OPERATOR_ENUM = {

PLUS: 1

, MINUS: 2

, MULTIPLY: 3

, DIVIDE: 4

, ASSIGN: 5

, NOT_SAME: 6

, SAME:7

, LESS_THAN: 8

, LESS_THAN_OR_SAME: 9

, MORE_THAN: 10

, MORE_THAN_OR_SMAE: 11

, PLUS_ASSIGN: 12

, MINUS_ASSIGN: 13

, IN: 14

}

const NODE_ELEMENT_ENUM = {

CLASS: 1

, DEF: 2

, IF: 3

, FOR: 4

, WHILE: 5

, IMPORT: 6

, API: 7

, TRY: 8

, CODE: 9

, ELIF: 10

, ELSE: 11

}

var NodeCodeLine = function( nodeElementThis ) {

this.rootDomElement;

this.uuid = getUUID();

this.nodeElementThis = nodeElementThis;

this.codeTokenArray = [

];

this.render();

}

NodeCodeLine.prototype.render = function() {

var rootDomElement = $(`<div class='blpn-node-codeline'>

<span class='blpn-node-codeline-span'>Drop Here</span>

</div>`);

this.setRootDomElement(rootDomElement);

}

NodeCodeLine.prototype.setRootDomElement = function(element) {

this.rootDomElement = element;

}

NodeCodeLine.prototype.getRootDomElement = function() {

return this.rootDomElement;

}

var NodeLink = function( nodeElementThis ) {

this.rootDomElement;

this.uuid = getUUID();

this.nodeElementThis = nodeElementThis;

this.nextNode = null;

this.path;

this.render();

}

NodeLink.prototype.render = function() {

var nodeLinkDomElementContainer = $(`<div class='blpn-node-link-container

blpn-style-flex-column-center'>

</div>`);

var nodeNext = $(`<div class='blpn-node-next'>

Next

</div>`);

var nodeLinkDomElement = document.createElement('span');

nodeLinkDomElement.classList.add('blpn-node-link');

nodeNext.append(nodeLinkDomElement);

nodeLinkDomElementContainer.append(nodeNext);

this.setRootDomElement(nodeLinkDomElementContainer);

this.setNodeLinkDomElement(nodeLinkDomElement);

// SVG Connector

this.path = document.createElementNS(svg.ns, 'path');

this.path.setAttributeNS(null, 'stroke', '#545454');

this.path.setAttributeNS(null, 'stroke-width', '2');

this.path.setAttributeNS(null, 'fill', 'none');

svg.appendChild(this.path);

this.bindClickNodeLinkEventFunction();

}

NodeLink.prototype.getNodeThis = function() {

var nodeElementThis = this.getNodeElementThis();

var nodeThis = nodeElementThis.getNodeThis();

return nodeThis;

}

NodeLink.prototype.getNodeElementThis = function() {

return this.nodeElementThis;

}

NodeLink.prototype.setRootDomElement = function(element) {

this.rootDomElement = element;

}

NodeLink.prototype.getRootDomElement = function() {

return this.rootDomElement;

}

NodeLink.prototype.setNodeLinkDomElement = function(element) {

this.nodeLinkDomElement = element;

}

NodeLink.prototype.getNodeLinkDomElement = function() {

return this.nodeLinkDomElement;

}

NodeLink.prototype.getNextNode = function() {

return this.nextNode;

}

NodeLink.prototype.setNextNode = function(nextNode) {

this.nextNode = nextNode;

}

NodeLink.prototype.getAttachPoint = function() {

var offset = this.getNodeLinkDomElement().getBoundingClientRect();

return {

x: offset.left ,

y: offset.top

};

};

NodeLink.prototype.bindClickNodeLinkEventFunction = function() {

// DOM Event handlers

var that = this;

var nodeLinkDomElement = this.getNodeLinkDomElement();

nodeLinkDomElement.onclick = function(event) {

if (mouse.currentLink) {

if (mouse.currentLink.path.hasAttribute('d'))

mouse.currentLink.path.removeAttribute('d');

if (mouse.currentLink.nextNode) {

mouse.currentLink.nextNode.detachLink(mouse.currentLink);

mouse.currentLink.nextNode = null;

}

}

mouse.currentLink = that;

if (that.nextNode) {

that.nextNode.detachLink(that);

$(this).removeClass('filled');

$(this).addClass('empty');

}

event.stopPropagation();

};

}

/** option

* isCodeLine

* isNodeLink

*/

var NodeElement = function(nodeThis, subType, elementNum, option ) {

this.rootDomElement;

this.nodeLinkDomElement;

this.nodeCodeLineDomElement;

this.deleteButtonElement;

this.uuid = getUUID();

this.subType = subType;

this.nodeThis = nodeThis;

/** subtype이 class (1) 타입이면 코드라인을 생성하지 않는다 */

if (subType === 1) {

this.nodeCodeLine = null;

} else {

this.nodeCodeLine = new NodeCodeLine(this);

}

if (option && option.isNodeLink === false ) {

this.nodeLink = null;

} else {

this.nodeLink = new NodeLink(this);

}

var newNodeCodeLineDomElement = $(`<div class='blpn-node-codeline'>

<span class='blpn-node-codeline-span'>Drop Here</span>

</div>`);

this.setNodeCodeLineDomElement(newNodeCodeLineDomElement);

// if (subType === 1) {

// nodeThis.addClassState('init');

// }

//FIXME:

this.elementNum = elementNum;

}

NodeElement.prototype.getElementNum = function() {

return this.elementNum;

}

NodeElement.prototype.setElementNum = function(elementNum) {

this.elementNum = elementNum;

}

NodeElement.prototype.render = function(elementNum) {

var _rootDomElement = this.getRootDomElement();

$(_rootDomElement).empty();

$(_rootDomElement).remove();

this.setElementNum(elementNum);

var nodeThis = this.getNodeThis();

var subType = this.getSubType();

// var rootDomNodeElement = $(`<div class='blpn-node-element-container'>

// </div>`);

var rootDomNodeElement = document.createElement('div');

rootDomNodeElement.classList.add('blpn-node-element-container');

var nodeElementHeader;

switch (subType) {

// class

case 1: {

this.setRootDomElement(rootDomNodeElement);

this.renderClassState(elementNum);

break;

}

// def

case 2: {

var nodeElementRow = $(`<div class='blpn-style-flex-row'></div>`);

var nodeCodeLineRootDom = this.getNodeCodeLineDomElement();

var nodeLinkRootDom = this.nodeLink.getRootDomElement();

nodeElementRow.append(nodeCodeLineRootDom);

nodeElementRow.append(nodeLinkRootDom);

$(rootDomNodeElement).append(nodeElementRow);

this.setRootDomElement(rootDomNodeElement);

this.setNodeCodeLineDomElement(nodeCodeLineRootDom);

this.setNodeLinkDomElement(nodeLinkRootDom);

break;

}

// if

case 3: {

this.setRootDomElement(rootDomNodeElement);

this.renderIfState(elementNum);

break;

}

// for

case 4: {

var nodeElementRow = $(`<div class='blpn-style-flex-row'></div>`);

var nodeCodeLineRootDom = this.getNodeCodeLineDomElement();

var nodeLinkRootDom = this.nodeLink.getRootDomElement();

nodeElementRow.append(nodeCodeLineRootDom);

nodeElementRow.append(nodeLinkRootDom);

$(rootDomNodeElement).append(nodeElementRow);

this.setRootDomElement(rootDomNodeElement);

this.setNodeCodeLineDomElement(nodeCodeLineRootDom);

this.setNodeLinkDomElement(nodeLinkRootDom);

break;

}

// while

case 5: {

var nodeElementRow = $(`<div class='blpn-style-flex-row'></div>`);

var nodeCodeLineRootDom = this.getNodeCodeLineDomElement();

var nodeLinkRootDom = this.nodeLink.getRootDomElement();

nodeElementRow.append(nodeCodeLineRootDom);

nodeElementRow.append(nodeLinkRootDom);

$(rootDomNodeElement).append(nodeElementRow);

this.setRootDomElement(rootDomNodeElement);

this.setNodeCodeLineDomElement(nodeCodeLineRootDom);

this.setNodeLinkDomElement(nodeLinkRootDom);

break;

}

// code

case 9: {

this.setRootDomElement(rootDomNodeElement);

this.renderCodeState(elementNum);

break;

}

// elif

case 10: {

this.setRootDomElement(rootDomNodeElement);

this.renderIfState(elementNum);

break;

}

// else

case 11: {

this.setRootDomElement(rootDomNodeElement);

this.renderIfState(elementNum);

break;

}

default: {

break;

}

}

var nodeThis = this.getNodeThis();

var nodeRootDomElement = nodeThis.getRootDomElement();

$(nodeRootDomElement).append(rootDomNodeElement);

}

NodeElement.prototype.getSubType = function() {

return this.subType;

}

NodeElement.prototype.getNodeThis = function() {

return this.nodeThis;

}

NodeElement.prototype.getNodeCodeLine = function() {

return this.nodeCodeLine;

}

NodeElement.prototype.getNodeLink = function() {

return this.nodeLink;

}

NodeElement.prototype.setRootDomElement = function(element) {

this.rootDomElement = element;

}

NodeElement.prototype.getRootDomElement = function() {

return this.rootDomElement;

}

NodeElement.prototype.makeNodeCodeLineDomElement = function(operatorSubType) {

var nodeThis = this.getNodeThis();

var elementNum = this.getElementNum();

var nodeElementSubType = this.getSubType();

var reNewData = function(data) {

// console.log('elementNum', elementNum);

// console.log('operatorSubType', operatorSubType);

// console.log('nodeElementSubType', nodeElementSubType);

if ( nodeElementSubType === 3 || nodeElementSubType === 10 || nodeElementSubType === 11) {

nodeThis.getState('ifCodeLineList')[elementNum].codeTokenList.push(data);

// console.log('ifCodeLineList', nodeThis.getState('ifCodeLineList'));

} else if (nodeElementSubType === 9) {

nodeThis.getState('codeBlockLineList')[elementNum].codeTokenList.push(data);

// console.log('codeBlockLineList', nodeThis.getState('codeBlockLineList'));

}

}

var operatorName = ``;

switch (operatorSubType) {

case 1: {

var codeToken = { type: "CALCULATION_OPERATOR", data:"+" }

reNewData(codeToken);

operatorName = `+`;

break;

}

case 2: {

var codeToken = { type: "CALCULATION_OPERATOR", data:"-" }

reNewData(codeToken);

operatorName = `-`;

break;

}

case 3: {

var codeToken = { type: "CALCULATION_OPERATOR", data:"*" }

reNewData(codeToken);

operatorName = `x`;

break;

}

case 4: {

var codeToken = { type: "CALCULATION_OPERATOR", data:"/" }

reNewData(codeToken);

operatorName = `÷`;

break;

}

case 5: {

var codeToken = { type: "ASSIGN_OPERATOR", data:"=" }

reNewData(codeToken);

operatorName = `=`;

break;

}

case 6: {

var codeToken = { type: "CONDITION_OPERATOR", data:"!=" }

reNewData(codeToken);

operatorName = `≠≠`;

break;

}

case 7: {

var codeToken = { type: "CONDITION_OPERATOR", data:"==" }

reNewData(codeToken);

operatorName = `==`;

break;

}

case 8: {

var codeToken = { type: "CONDITION_OPERATOR", data:"<" }

reNewData(codeToken);

operatorName = `<`;

break;

}

case 9: {

var codeToken = { type: "CONDITION_OPERATOR", data:"<=" }

reNewData(codeToken);

operatorName = `≤`;

break;

}

case 10: {

var codeToken = { type: "CONDITION_OPERATOR", data:">" }

reNewData(codeToken);

operatorName = `＞`;

break;

}

case 11: {

var codeToken = { type: "CONDITION_OPERATOR", data:">=" }

reNewData(codeToken);

operatorName = `≥`;

break;

}

case 12: {

var codeToken = { type: "CALCULATION_OPERATOR", data:"+=" }

reNewData(codeToken);

operatorName = `+=`;

break;

}

case 13: {

var codeToken = { type: "CALCULATION_OPERATOR", data:"-=" }

reNewData(codeToken);

operatorName = `-=`;

break;

}

case 14: {

var codeToken = { type: "CONDITION_OPERATOR", data:"in" }

reNewData(codeToken);

operatorName = `in`;

break;

}

default :{

break;

}

}

var newNodeCodeLineDomElement = $(`<div class='blpn-node-codeline

blpn-style-flex-row-between'>

<span class='blpn-node-codeline-span'>Drop Here</span>

<span class='blpn-node-codeline-span-new'>

${operatorName}

</span>

<span class='blpn-node-codeline-span'>Drop Here</span>

</div>`);

this.setNodeCodeLineDomElement(newNodeCodeLineDomElement);

// this.render();

var nodeThis = this.getNodeThis();

nodeThis.renderNodeElementList();

}

NodeElement.prototype.setNodeCodeLineDomElement = function(element) {

this.nodeCodeLineDomElement = element;

}

NodeElement.prototype.getNodeCodeLineDomElement = function() {

return this.nodeCodeLineDomElement;

}

NodeElement.prototype.setNodeLinkDomElement = function(element) {

this.nodeLinkDomElement = element;

}

NodeElement.prototype.getNodeLinkDomElement = function() {

return this.nodeLinkDomElement;

}

NodeElement.prototype.setDeleteButtonElement = function(element) {

this.deleteButtonElement = element;

}

NodeElement.prototype.getDeleteButtonElement = function() {

return this.deleteButtonElement;

}

NodeElement.prototype.getUUID = function() {

return this.uuid;

}

NodeElement.prototype.setUUID = function(uuid) {

this.uuid = uuid;

}

NodeElement.prototype.getCodeLineDomPoint = function() {

var rootDomElement = this.getRootDomElement();

var offset = rootDomElement.getElementsByClassName("blpn-node-codeline")[0].getBoundingClientRect();

return {

x: offset.left

, y: offset.top

, width: offset.width

, height: offset.height

, dom: rootDomElement.getElementsByClassName("blpn-node-codeline")[0]

, nodeElementThis: this

, nodeThis : this.getNodeThis()

};

};

/** type에 따른 렌더링 */

NodeElement.prototype.renderClassState = function(index) {

var nodeThis = this.getNodeThis();

var rootDomNodeElement = this.getRootDomElement();

var methodName = nodeThis.getState(`methodList`)[index].name;

var nodeElementHeader = $(`<div style='position:relative;'>

</div>`);

if( methodName !== '_init_') {

var deleteButtonElement = $(`<button class='blpn-node-btn blpn-node-delete-btn'

style=' position:absolute;

right: 0px;

width: 20px;

height: 20px;

z-index: 1;'>

<span>x</span>

</button>`);

nodeElementHeader.append(deleteButtonElement);

this.setDeleteButtonElement(deleteButtonElement);

this.bindDeleteNodeElementEventFunction();

var flexRow = $(`<div class='blpn-style-flex-row'></div>`);

var methodNameElement = $(`<div style='font-weight:700;'> Method: </div>`);

var methodNameInput = $(`<input class='blpn-node-input'

style='margin-left:10px;'

value='${methodName}'

placeholder='input name'

type='text'></input>`);

flexRow.append(methodNameElement);

flexRow.append(methodNameInput);

$(methodNameInput).on("change keyup paste", function() {

nodeThis.getState('methodList')[index]['name'] = $(this).val()

});

$(rootDomNodeElement).append(flexRow);

} else {

var initName = $(`<strong>${ methodName || ''}</strong>`);

nodeElementHeader.append(initName);

}

var nodeElementRow = $(`<div class='blpn-style-flex-row'></div>`);

var nodeEmptyLineDom = $(`<div class='blpn-node-emptyline'>

</div>`);

var inParamDomeElement = $(`<div>In Param: </div>`);

nodeThis.getState(`methodList`)[index]['inParamList'].forEach( (inParam, paramIndex) => {

var inParamNode = $(`<div class='blpn-style-flex-row'>

<span style='margin-right:10px;'>${paramIndex}</span>

</div>`);

var input = $(`<input class='blpn-node-input'

type='text'

value='${inParam.name}'

placeholder='input'></input>`);

var deleteButton = $(`<button class='blpn-node-btn'>x</button>`);

$(input).on("change keyup paste", function() {

var newData = {

name: $(this).val()

}

nodeThis.getState('methodList')[index]['inParamList'][paramIndex] = newData;

});

$(deleteButton).on('click', function() {

nodeThis.getState('methodList')[index]['inParamList'].splice(paramIndex,1);

nodeThis.render();

});

inParamNode.append(input);

inParamNode.append(deleteButton);

inParamDomeElement.append(inParamNode);

});

var inParamPlusButton = $(`<button class='blpn-node-btn'

style='width:100%;'>

+</button>`);

$(inParamPlusButton).click(function() {

var newData = {

name: ''

}

nodeThis.getState('methodList')[index]['inParamList'].push(newData);

nodeThis.render();

});

nodeEmptyLineDom.append(inParamDomeElement);

nodeEmptyLineDom.append(inParamPlusButton);

var nodeLinkRootDom = this.nodeLink.getRootDomElement();

nodeElementRow.append(nodeEmptyLineDom);

nodeElementRow.append(nodeLinkRootDom);

$(rootDomNodeElement).append(nodeElementHeader);

$(rootDomNodeElement).append(nodeElementRow);

}

NodeElement.prototype.renderIfState = function(index) {

var nodeThis = this.getNodeThis();

var rootDomNodeElement = this.getRootDomElement();

var {name} = nodeThis.getState('ifCodeLineList')[index];

var nodeElementHeader = $(`<div style='position:relative;'>

<strong>${name}</strong>

</div>`);

if ( name !== 'IF') {

var deleteButtonElement = $(`<button class='blpn-node-btn blpn-node-delete-btn'

style=' position:absolute;

right: 0px;

width: 20px;

height: 20px;'>

<span>x</span>

</button>`);

nodeElementHeader.append(deleteButtonElement);

this.setDeleteButtonElement(deleteButtonElement);

this.bindDeleteNodeElementEventFunction();

$(rootDomNodeElement).append(nodeElementHeader);

}

var nodeElementRow = $(`<div class='blpn-style-flex-row'></div>`);

// var nodeCodeLineRootDom = this.nodeCodeLine.getRootDomElement();

var nodeCodeLineRootDom = this.getNodeCodeLineDomElement();

var nodeLinkRootDom = this.nodeLink.getRootDomElement();

nodeElementRow.append(nodeCodeLineRootDom);

nodeElementRow.append(nodeLinkRootDom);

$(rootDomNodeElement).append(nodeElementRow);

this.setNodeCodeLineDomElement(nodeCodeLineRootDom);

this.setNodeLinkDomElement(nodeLinkRootDom);

}

NodeElement.prototype.renderCodeState = function(index) {

var nodeThis = this.getNodeThis();

var rootDomNodeElement = this.getRootDomElement();

// console.log(nodeThis.getState('codeBlockLineList'), index);

var { codeTokenList } = nodeThis.getState('codeBlockLineList')[index];

var nodeElementHeader = $(`<div style='position:relative; height:25px;'>

</div>`);

var deleteButtonElement = $(`<button class='blpn-node-btn blpn-node-delete-btn'

style=' position:absolute;

right: 0px;

width: 20px;

height: 20px;'>

<span>x</span>

</button>`);

nodeElementHeader.append(deleteButtonElement);

this.setDeleteButtonElement(deleteButtonElement);

this.bindDeleteNodeElementEventFunction();

$(rootDomNodeElement).append(nodeElementHeader);

var nodeElementRow = $(`<div class='blpn-style-flex-row'></div>`);

// var nodeCodeLineRootDom = this.nodeCodeLine.getRootDomElement();

var nodeCodeLineRootDom = this.getNodeCodeLineDomElement();

var nodeLinkRootDom = this.nodeLink.getRootDomElement();

nodeElementRow.append(nodeCodeLineRootDom);

nodeElementRow.append(nodeLinkRootDom);

$(rootDomNodeElement).append(nodeElementRow);

this.setNodeCodeLineDomElement(nodeCodeLineRootDom);

this.setNodeLinkDomElement(nodeLinkRootDom);

}

/** 이벤트 함수 바인딩 */

NodeElement.prototype.bindDeleteNodeElementEventFunction = function() {

var that = this;

var deleteButtonElement = this.getDeleteButtonElement();

deleteButtonElement.click( function() {

var subType = that.getSubType();

var elementNum = that.getElementNum();

// console.log('삭제 subType, elementNum',subType, elementNum);

var nodeThis = that.getNodeThis();

/** node의 특정 elementNum의 class state 삭제*/

if ( subType === 1) {

nodeThis.deleteOneArrayIndexValue("methodList", elementNum);

}

/** node의 특정 elementNum의 if state 삭제*/

if ( subType === 10 || subType === 11) {

nodeThis.deleteOneArrayIndexValue("ifCodeLineList", elementNum);

}

/** node의 특정 elementNum의 codeBlock state 삭제*/

if ( subType === 9) {

nodeThis.deleteOneArrayIndexValue("codeBlockLineList", elementNum);

}

var rootDomElement = that.getRootDomElement();

var uuid = that.getUUID();

nodeThis.deleteNodeElement(uuid);

$(rootDomElement).empty();

$(rootDomElement).remove();

nodeThis.renderNodeElementList();

});

}

var Node = function(nodeContainerThis, subType, point) {

this.type = `NODE`;

this.subType = subType;

this.pointX = point.x;

this.pointY = point.y;

this.scrollNum = 1;

this.isConnected = false;

this.uuid = getUUID();

this.nodeContainerThis = nodeContainerThis; // nodeContainer에 push 될 때 할당

this.rootDomElement; // render 시점에 할당

this.deleteBtnDomElement; // render 시점에 할당

// this.nodeCodeLineList = [];

// this.nodeLinkList = [];

this.nodeElementList = [];

this.attachedLinkList = [];

/**

* subType에 따라 node의 state는 달라짐

*/

this.state = {

class: {

methodButton: null

, selfVariableList: []

, methodList: [

// {

// name:'_init_'

// , inParamList: []

// }

]

, inParamList: []

}

, def: {

defName: ''

, defInParamList: []