#도형만들기 ##Shape Loader Revisited
- Host Object를 extends 하지 말 것
- load -> parse -> ready까지의 chain에 대한 고민
const shapeLoader = {
load: url => {
return new Promse((resolve, reject) =>{
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.addEventListener('load', _ => xhr.status==200? resolve(xhrresponseXML) : reject(xhr.statusText));
xhr.addEventListener('error', _ => reject(xhr.statusText));
xhr.send(null);
});
},
parse: xml => {
return new Promise((resolve, reject) => {
const root = xml.firstElementChild;
if(!root || root,tagNmae!='presetShapeDefinitons') reject('root tag <presetShapeDefinitons> not found!');
resolve(Array.from(root.children).filter(node => node.nodeType==1).forEach(def => ShapeDefinition.add(def));
});
}
}
class ShapeDefinition {
static add(def){
const type = def.tagName,
shape = this[type] = { formula: {}, path: {}};
Array.from(def.getElementsByTagName('gd')).forEach(gd => {
let name = gd.getAttribute('name'), fmla = gd.getAttribute('fmla').split(' ');
shape.formula[name] = {
cmd: fmla.shift(1);
params: fmla
}
});
}
}
//this에 대한 사용법
https://github.com/FEDevelopers/tech.description/wiki/%EB%B2%88%EC%97%AD-%EB%AC%B8%EC%84%9C
Array-like Object : length같이 배열의 특징을 가지고 있으나 foreach가 안된다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from
if~else, switch보단 map을 이용하자.
##DrawML
<shape>
<avLst ... /> //조절점 기본값
<gdLst ... /> //guide formula
<ahLst ... /> //조절점 핸들
<cxnLst ... /> //연결점
<rect ... /> //글상자 Geometry
<pathLst ... /> //도형 Vector path
</shape>
##Guide Formula
- 도형의 path를 그릴 떄 참조할 값(좌표)을 계산하는 수식
- 도형의 geometry(top,lfet,width,height) 및 adj value만이 변수로 참여
<gd name="x3" fmla="+- x1 wd2 0" />
- x3 : guide name
- +- : function
- x1 wd 0 : parameter(space로 구분됨, 최대 4개)
##Getter method
- 객체의 property를 함수로 바인딩
- 정보 은닉
- argument를 가져서는 안됨(ES5부터 정의되어있음)