Element

모든 편집용 Model의 부모 Class입니다.

아래와 같은 편집 API를 제공합니다.

/**
* id를 반환합니다.
* @returns {String}
*/
get id() {
return this.__id__;
}

/**
* type을 반환합니다.
* @returns {String}
*/
get type() {
return this.__getElement__().getType();
}

/**
* element를 반환합니다.
* @private
* @returns {Element} api 모델
*/
__getElement__() {
return this.__editor__.getSEModelManager().getElement(this.id);
}

/**
* 현재 인덱스를 반환합니다.
* @returns {Number}
*/
get index() {
return this.__getElement__().index();
}

/**
* 부모 api 모델을 반환합니다.
* @returns {Element} api 모델
*/
get parent() {
return this.__APIModel__.get(this.__getElement__().parent());
}

/**
* 다음 형제의 api 모델을 반환합니다.
* @returns {Element} api 모델
*/
get nextSibling() {
return this.__APIModel__.get(this.__getElement__().nextSibling());
}

/**
* 이전 형제의 api 모델을 반환합니다.
* @returns {Element} api 모델
*/
get previousSibling() {
return this.__APIModel__.get(this.__getElement__().previousSibling());
}

/**
* 첫번째 자식 api 모델을 반환합니다.
* @returns {Element} api 모델
*/
get firstChild() {
return this.__APIModel__.get(this.__getElement__().firstChild());
}

/**
* 마지막 자식 api 모델을 반환합니다.
* @returns {Element} api 모델
*/
get lastChild() {
return this.__APIModel__.get(this.__getElement__().lastChild());
}

/**
* 자식 api 모델을 배열로 반환합니다.
* @returns {Element[]} api 모델[]
*/
get children() {
return this.__getElement__().getChildren().map(el => this.__APIModel__.get(el));
}

/**
* 형제 api 모델을 배열로 반환합니다.
* @returns {Element[]} api 모델[]
*/
get siblings() {
return this.__getElement__().siblings().map(el => this.__APIModel__.get(el));
}

/**
* 다음 형제 api 모델을 배열로 반환합니다.
* @returns {Element[]} api 모델[]
*/
get nextSiblings() {
return this.__getElement__().nextSiblings().map(el => this.__APIModel__.get(el));
}

/**
* 이전 형제 api 모델을 배열로 반환합니다.
* @returns {Element[]} api 모델[]
*/
get previousSiblings() {
return this.__getElement__().previousSiblings().map(el => this.__APIModel__.get(el));
}

/**
* 조건에 맞는 api 모델을 반환합니다.
* @param {Function} condition
* @returns {Element} api 모델
*/
closest(condition) {
if (!util.isFunction(condition)) {
return null;
}
let elem = this;
while (elem && !condition(elem)) {
elem = elem.parent;
}
return elem;
}

/**
* id를 수정합니다.
* @param {String} id
*/
setId(id) {
const contentsManager = this.__editor__.getContentsManager();
const elElement = contentsManager.getHTMLElement(this.id);
if (!elElement || !elElement.id) {
throw new Error(`id를 설정 할 수 없습니다.`);
}

const element = this.__getElement__();
const renderTarget = this.__getRenderTarget__(element);
this.__preExcute__(this.setId.name, [renderTarget]);
elElement.setAttribute('id', id);
element.setId(id);
this.__setId__(id);
this.__postExcute__([renderTarget]);
}

/**
* 스타일을 설정합니다.
* @param {String} cssText
*/
setStyle(cssText) {
const element = this.__getElement__();
if (!element.setStyle) {
throw new Error(`style을 설정 할 수 없습니다.`);
}
const originStyle = element.getStyle();
const newStyle = util.getStyleFromCssText(cssText, this.type);
const renderTarget = this.__getRenderTarget__(element);

this.__preExcute__(this.setStyle.name, [renderTarget]);
element.setStyle(util.merge(originStyle, newStyle));
this.__postExcute__([renderTarget]);
}