Skip to content

Instantly share code, notes, and snippets.

@sungjaeHong
Created October 5, 2016 08:27
Show Gist options
  • Save sungjaeHong/2e9162ea550e419614c006b8747b85e5 to your computer and use it in GitHub Desktop.
Save sungjaeHong/2e9162ea550e419614c006b8747b85e5 to your computer and use it in GitHub Desktop.

#도형만들기 ##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부터 정의되어있음)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment