XFormsShape.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. XFormsShape.prototype = new XFormsControl;
  2. function XFormsShape (strParentId, strAlert, strHelp, strHint, strAccesskey, strAppearance, strClass, bDisabled, strEllipseheight, strEllipsewidth, strId, nNavindex, strStyle, strTag, strVisibility, strUserDefineAttrib)
  3. {
  4. if (!strId)
  5. {
  6. return;
  7. }
  8. XFormsControl.call(this, strParentId, strAlert, strHelp, strHint, strAccesskey, strClass, bDisabled, strId, nNavindex, strStyle, strTag, strVisibility, strUserDefineAttrib);
  9. this.m_ObjChildDiv = document.getElementById("HE_" + strId + "_ChildDiv");
  10. /**
  11. * Attribute
  12. */
  13. this.attribute["appearance"] = strAppearance;
  14. this.attribute["ellipseheight"] = strEllipseheight;
  15. this.attribute["ellipsewidth"] = strEllipsewidth;
  16. /**
  17. * Property
  18. */
  19. };
  20. /**
  21. * TF System Method
  22. */
  23. XFormsShape.prototype.init = function ()
  24. {
  25. XFormsControl.prototype.init.call(this);
  26. if (this.attribute["appearance"] != "rectangle")
  27. {
  28. this.m_heControl.style.borderColor = "";
  29. this.m_heControl.style.borderWidth = "";
  30. this.m_heControl.style.borderStyle = "";
  31. this.m_heControl.style.backgroundColor = "";
  32. this.m_heControl.style.backgroundImage = "";
  33. this.m_heControl.style.backgroundRepeat = "";
  34. this.m_heControl.style.backgroundStretch = "";
  35. this.m_heControl.style.backgroundPosition = "";
  36. this.draw();
  37. }
  38. this.resizeControl();
  39. };
  40. XFormsShape.prototype.setAttribute = function (strAttribute, strValue)
  41. {
  42. XFormsControl.prototype.setAttribute.call(this, strAttribute, strValue);
  43. };
  44. XFormsShape.prototype.draw = function ()
  45. {
  46. if (this.attribute["appearance"] == "ellipse")
  47. {
  48. var strCurrentWidth = this.attribute["width"];
  49. var strCurrentHeight = this.attribute["height"];
  50. var nCurrentWidth;
  51. var nCurrentHeight;
  52. if (strCurrentWidth.substring(strCurrentWidth.length-1, strCurrentWidth.length) == "%")
  53. {
  54. var nParentWidth = this.m_heControl.parentNode.clientWidth;
  55. nCurrentWidth = nParentWidth * parseInt(strCurrentWidth.replace("%","")) / 100;
  56. }
  57. else
  58. {
  59. nCurrentWidth = parseInt(this.attribute["width"].replace("px",""));
  60. }
  61. if (strCurrentHeight.substring(strCurrentHeight.length-1, strCurrentHeight.length) == "%")
  62. {
  63. var nParentHeight = this.m_heControl.parentNode.clientHeight;
  64. nCurrentHeight = nParentHeight * parseInt(strCurrentHeight.replace("%","")) / 100;
  65. }
  66. else
  67. {
  68. nCurrentHeight = parseInt(this.attribute["height"].replace("px",""));
  69. }
  70. var strBorderColor = this.attribute["border-color"];
  71. if (!strBorderColor)
  72. {
  73. strBorderColor = "#000000";
  74. }
  75. var strBorderWidth = this.attribute["border-width"];
  76. if (!strBorderWidth)
  77. {
  78. strBorderWidth = "1";
  79. }
  80. var strBorderStyle = this.attribute["border-style"];
  81. if (!strBorderStyle)
  82. {
  83. strBorderStyle = "solid";
  84. }
  85. this.m_ObjChildDiv.parentNode.removeChild(this.m_ObjChildDiv);
  86. this.m_ObjChildDiv = document.createElement("div");
  87. this.m_ObjChildDiv.id = "HE_" + this.attribute["id"] + "_ChildDiv";
  88. this.m_heControl.appendChild(this.m_ObjChildDiv);
  89. var objGraphics = new jsGraphics("HE_" + this.attribute["id"] + "_ChildDiv");
  90. if (this.attribute["background-color"] && this.attribute["background-color"] != "" && this.attribute["background-color"] != "transparent")
  91. {
  92. // TODO 임시 테스트
  93. objGraphics.setColor(this.attribute["background-color"]);
  94. objGraphics.fillEllipse(0, 0, nCurrentWidth, nCurrentHeight);
  95. }
  96. if (strBorderStyle != "none")
  97. {
  98. var nBorderWidth = parseInt(strBorderWidth.replace("px",""));
  99. if (nBorderWidth == 1 && (strBorderStyle == "dotted" || strBorderStyle == "dashed"))
  100. {
  101. objGraphics.setStroke();
  102. }
  103. else
  104. {
  105. objGraphics.setStroke(nBorderWidth);
  106. }
  107. var nStartPosition = Math.floor(nBorderWidth / 2) * -1;
  108. objGraphics.setColor(strBorderColor);
  109. objGraphics.drawEllipse(nStartPosition, nStartPosition, nCurrentWidth-1, nCurrentHeight-1);
  110. }
  111. objGraphics.paint();
  112. if (this.attribute["visibility"] != "hidden")
  113. {
  114. this.setAttribute("visibility", "visible");
  115. }
  116. }
  117. else if (this.attribute["appearance"] == "roundrect")
  118. {
  119. var strCurrentWidth = this.attribute["width"];
  120. var strCurrentHeight = this.attribute["height"];
  121. var nCurrentWidth;
  122. var nCurrentHeight;
  123. if (strCurrentWidth.substring(strCurrentWidth.length-1, strCurrentWidth.length) == "%")
  124. {
  125. var nParentWidth = this.m_heControl.parentNode.clientWidth;
  126. nCurrentWidth = nParentWidth * parseInt(strCurrentWidth.replace("%","")) / 100;
  127. }
  128. else
  129. {
  130. nCurrentWidth = parseInt(this.attribute["width"].replace("px",""));
  131. }
  132. if (strCurrentHeight.substring(strCurrentHeight.length-1, strCurrentHeight.length) == "%")
  133. {
  134. var nParentHeight = this.m_heControl.parentNode.clientHeight;
  135. nCurrentHeight = nParentHeight * parseInt(strCurrentHeight.replace("%","")) / 100;
  136. }
  137. else
  138. {
  139. nCurrentHeight = parseInt(this.attribute["height"].replace("px",""));
  140. }
  141. var strBorderColor = this.attribute["border-color"];
  142. if (!strBorderColor)
  143. {
  144. strBorderColor = "#000000";
  145. }
  146. var strBorderWidth = this.attribute["border-width"];
  147. if (!strBorderWidth)
  148. {
  149. strBorderWidth = "1";
  150. }
  151. var strBorderStyle = this.attribute["border-style"];
  152. if (!strBorderStyle)
  153. {
  154. strBorderStyle = "solid";
  155. }
  156. this.m_ObjChildDiv.parentNode.removeChild(this.m_ObjChildDiv);
  157. this.m_ObjChildDiv = document.createElement("div");
  158. this.m_ObjChildDiv.id = "HE_" + this.attribute["id"] + "_ChildDiv";
  159. this.m_heControl.appendChild(this.m_ObjChildDiv);
  160. var objGraphics = new jsGraphics("HE_" + this.attribute["id"] + "_ChildDiv");
  161. var nEllipseWidth = parseInt(this.attribute["ellipsewidth"]);
  162. var nEllipseHeight = parseInt(this.attribute["ellipseheight"]);
  163. if (this.attribute["background-color"] && this.attribute["background-color"] != "" && this.attribute["background-color"] != "transparent")
  164. {
  165. objGraphics.setColor(this.attribute["background-color"]);
  166. objGraphics.fillRoundrect(0, 0, nCurrentWidth, nCurrentHeight, nEllipseWidth, nEllipseHeight);
  167. }
  168. if (strBorderStyle != "none")
  169. {
  170. var nBorderWidth = parseInt(strBorderWidth.replace("px",""));
  171. if (nBorderWidth == 1 && (strBorderStyle == "dotted" || strBorderStyle == "dashed"))
  172. {
  173. objGraphics.setStroke();
  174. }
  175. else
  176. {
  177. objGraphics.setStroke(nBorderWidth);
  178. }
  179. var nStartPosition = Math.floor(nBorderWidth / 2) * -1;
  180. objGraphics.setColor(strBorderColor);
  181. objGraphics.drawRoundrect(nStartPosition, nStartPosition, nCurrentWidth, nCurrentHeight, nEllipseWidth, nEllipseHeight);
  182. }
  183. objGraphics.paint();
  184. if (this.attribute["visibility"] != "hidden")
  185. {
  186. this.setAttribute("visibility", "visible");
  187. }
  188. }
  189. };
  190. XFormsShape.prototype.resize = function ()
  191. {
  192. if (this.attribute["appearance"] != "rectangle")
  193. {
  194. var strWidth = this.attribute["width"];
  195. var strHeight = this.attribute["height"];
  196. if (null != strWidth && null != strHeight)
  197. {
  198. if (strWidth.substring(strWidth.length-1,strWidth.length) == "%" || strHeight.substring(strHeight.length-1,strHeight.length) == "%")
  199. {
  200. this.draw();
  201. }
  202. }
  203. }
  204. };
  205. XFormsShape.create = function (strParentId, clAttribute, strStyle)
  206. {
  207. // 메인노드 생성
  208. var xnShape = XFormsShape.createMainNode(clAttribute);
  209. var xnParent = document.getElementById("HE_"+strParentId);
  210. xnParent.appendChild(xnShape);
  211. // 하위노드 생성
  212. xnShape = XFormsShape.createSubNodes(xnShape, clAttribute);
  213. // object 생성
  214. return XFormsShape.createObject(strParentId, xnShape, clAttribute, strStyle);
  215. };
  216. XFormsShape.createMainNode = function (clAttribute)
  217. {
  218. var xnShape = document.createElement("div");
  219. xnShape = XFormsShape.createAttribute(xnShape, clAttribute);
  220. var strAppearance = clAttribute.exists("appearance") ? clAttribute.item("appearance") : "";
  221. if (strAppearance != "rectangle" && strAppearance != "ellipse" && strAppearance != "roundrect")
  222. {
  223. xnShape.setAttribute("appearance", "rectangle");
  224. }
  225. else
  226. {
  227. xnShape.setAttribute("appearance", strAppearance);
  228. }
  229. if (clAttribute.exists("ellipsewidth") != "")
  230. {
  231. xnShape.setAttribute("ellipsewidth", clAttribute.item("ellipsewidth"));
  232. }
  233. else
  234. {
  235. xnShape.setAttribute("ellipsewidth", "");
  236. }
  237. if (clAttribute.exists("ellipseheight"))
  238. {
  239. xnShape.setAttribute("ellipseheight", clAttribute.item("ellipseheight"));
  240. }
  241. else
  242. {
  243. xnShape.setAttribute("ellipseheight", "");
  244. }
  245. if (xnShape.getAttribute("appearance", "rectangle"))
  246. {
  247. HtmlLib.setStyle(xnShape, "visibility", "hidden");
  248. }
  249. xnShape = XFormsShape.createStyle(xnShape, clAttribute);
  250. return xnShape;
  251. };
  252. XFormsShape.createSubNodes = function (xnShape, clAttribute)
  253. {
  254. // 상위의 아이디를 가져온다.
  255. var strId = clAttribute.item("id");
  256. // 생성/삭제시 활용할 Child DIV
  257. var xnShapeChild = document.createElement("div");
  258. xnShapeChild.id = "HE_" + strId + "_ChildDiv";
  259. xnShape.appendChild(xnShapeChild);
  260. return xnShape;
  261. };
  262. XFormsShape.createObject = function (strParentId, xnShape, clAttribute, strStyle)
  263. {
  264. var strClass = "";
  265. var bDisabled = false;
  266. var strEllipseHeight = xnShape.getAttribute("ellipseheight");
  267. var strEllipseWidth = xnShape.getAttribute("ellipsewidth");
  268. var strId = "";
  269. var nNavindex = 9007199254740992;
  270. var strVisibility = "visible";
  271. var strObjType = xnShape.getAttribute("appearance");
  272. var strUserDefineAttrib = "";
  273. for (var i=0; i<clAttribute.count(); i++)
  274. {
  275. var strAttributeName = clAttribute.keys()[i];
  276. switch (strAttributeName)
  277. {
  278. case "class" :
  279. {
  280. strClass = clAttribute.item(strAttributeName);
  281. break;
  282. }
  283. case "disabled" :
  284. {
  285. break;
  286. }
  287. case "id" :
  288. {
  289. strId = clAttribute.item(strAttributeName);
  290. break;
  291. }
  292. case "navindex" :
  293. {
  294. nNavindex = parseInt(clAttribute.item(strAttributeName));
  295. break;
  296. }
  297. case "visibility" :
  298. {
  299. strVisibility = clAttribute.item(strAttributeName);
  300. break;
  301. }
  302. // roundRect attribute
  303. case "ellipseheight" :
  304. {
  305. break;
  306. }
  307. case "ellipsewidth" :
  308. {
  309. break;
  310. }
  311. case "appearance" :
  312. {
  313. // 변수 선언부에 strObjType으로 선언되어 있음. 통과.
  314. break;
  315. }
  316. default :
  317. {
  318. if (!STYLE_LIST[strAttributeName])
  319. {
  320. strUserDefineAttrib += strAttributeName + ":" + clAttribute.item(strAttributeName) + "; ";
  321. }
  322. break;
  323. }
  324. }
  325. }
  326. var objShape = new XFormsShape(strParentId, "", "", "", "", strObjType, strClass, bDisabled, strEllipseHeight, strEllipseWidth, strId, nNavindex, strStyle, "xforms:shape", strVisibility, strUserDefineAttrib);
  327. return objShape;
  328. };
  329. XFormsShape.createAttribute = function (xnHtmlNode, clAttribute)
  330. {
  331. xnHtmlNode = XFormsControl.createAttribute(xnHtmlNode, clAttribute);
  332. return xnHtmlNode;
  333. };
  334. XFormsShape.createStyle = function (xnHtmlNode, clAttribute)
  335. {
  336. if (!clAttribute.exists("left"))
  337. {
  338. HtmlLib.setStyle(xnHtmlNode, "left", "0px");
  339. }
  340. if (!clAttribute.exists("top"))
  341. {
  342. HtmlLib.setStyle(xnHtmlNode, "top", "0px");
  343. }
  344. if (!clAttribute.exists("width"))
  345. {
  346. HtmlLib.setStyle(xnHtmlNode, "width", "0px");
  347. }
  348. if (!clAttribute.exists("height"))
  349. {
  350. HtmlLib.setStyle(xnHtmlNode, "height", "0px");
  351. }
  352. if (!clAttribute.exists("border-color"))
  353. {
  354. HtmlLib.setStyle(xnHtmlNode, "border-color", "#000000");
  355. }
  356. if (!clAttribute.exists("border-width"))
  357. {
  358. HtmlLib.setStyle(xnHtmlNode, "border-width", "1px");
  359. }
  360. if (!clAttribute.exists("border-style"))
  361. {
  362. HtmlLib.setStyle(xnHtmlNode, "border-style", "solid");
  363. }
  364. return xnHtmlNode;
  365. };