ElTreeEditor.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863
  1. // o2.widget = o2.widget || {};
  2. o2.require("o2.widget.Common", null, false);
  3. // o2.require("o2.widget.Tree", null, false);
  4. MWF.xApplication.process.FormDesigner.widget.ElTreeEditor = new Class({
  5. Implements: [Options, Events],
  6. Extends: o2.widget.Common,
  7. options: {
  8. "style": "default",
  9. "count": 0,
  10. "height": 500,
  11. "width": 500,
  12. "top": -1,
  13. "left": -1,
  14. "maxObj": document.body
  15. },
  16. initialize: function(node, options){
  17. this.setOptions(options);
  18. this.node = $(node);
  19. this.path = "../x_component_process_FormDesigner/widget/$ElTreeEditor/";
  20. this.cssPath = this.path+this.options.style+"/css.wcss";
  21. this._loadCss();
  22. this.container = new Element("div");
  23. },
  24. load: function(content){
  25. if (this.fireEvent("queryLoad")){
  26. this.container.set("styles", this.css.container);
  27. this.container.inject(this.node);
  28. this.createTitleNode();
  29. this.createContent(content);
  30. this.fireEvent("postLoad");
  31. }
  32. },
  33. createTitleNode: function(){
  34. this.titleNode = new Element("div", {
  35. "styles": this.css.titleNode,
  36. "events": {
  37. "dblclick": this.toggleSize.bind(this)
  38. }
  39. }).inject(this.container);
  40. this.titleActionNode = new Element("div", {
  41. "styles": this.css.titleActionNode,
  42. "events": {
  43. "click": this.addTreeNode.bind(this)
  44. }
  45. }).inject(this.titleNode);
  46. this.titleTextNode = new Element("div", {
  47. "styles": this.css.titleTextNode,
  48. "text": this.options.title
  49. }).inject(this.titleNode);
  50. },
  51. createContent: function(content){
  52. this.contentNode = new Element("div", {
  53. "styles": this.css.contentNode
  54. }).inject(this.container);
  55. this.data = content;
  56. this.resizeContentNodeSize();
  57. this.tree = new MWF.xApplication.process.FormDesigner.widget.ElTreeEditor.Tree(this, this.contentNode, {"style": "editor"});
  58. this.tree.data = this.data;
  59. this.tree.load();
  60. },
  61. resizeContentNodeSize: function(){
  62. var titleSize = this.titleNode.getSize();
  63. var size = this.container.getSize();
  64. var height = size.y-titleSize.y-2-6;
  65. this.contentNode.setStyle("min-height", ""+height+"px");
  66. },
  67. addTreeNode: function(){
  68. if (this.tree) {
  69. var obj = Object.clone(this.tree.nodejson);
  70. this.data.push(obj);
  71. var treeNode = this.tree.appendChild(obj);
  72. //if (!this.options.expand) this.tree.expandOrCollapseNode(this);
  73. treeNode.selectNode();
  74. treeNode.showItemAction();
  75. treeNode.editItemProperties();
  76. var textDivNode = treeNode.textNode.getElement("div");
  77. treeNode.editItem(textDivNode);
  78. this.fireEvent("change", [{
  79. compareName: " [addSub]",
  80. force: true
  81. }]);
  82. }
  83. },
  84. toggleSize: function(e){
  85. var status = this.titleActionNode.retrieve("status", "max");
  86. if (status=="max"){
  87. this.maxSize();
  88. }else{
  89. this.returnSize();
  90. }
  91. },
  92. toJson: function(){
  93. if (this.tree){
  94. return this.tree.toJson(this.tree);
  95. }else{
  96. return {};
  97. }
  98. }
  99. });
  100. MWF.xApplication.process.FormDesigner.widget.ElTreeEditor.Tree = new Class({
  101. Extends: o2.widget.Common,
  102. Implements: [Options, Events],
  103. children: [],
  104. options: {
  105. "style": "default",
  106. "expand": false
  107. },
  108. jsonMapping: {
  109. "id": "id",
  110. "label": "label",
  111. "children": "children"
  112. // "disabled": "disabled",
  113. // "isLeaf": "isLeaf"
  114. },
  115. nodejson: {
  116. "id": "",
  117. "label": "[none]",
  118. "children": []
  119. },
  120. initialize: function(editor, tree, options){
  121. this.setOptions(options);
  122. this.path = o2.session.path+"/widget/$Tree/";
  123. this.cssPath = o2.session.path+"/widget/$Tree/"+this.options.style+"/css.wcss";
  124. this._loadCss();
  125. this.container = $(tree);
  126. this.children = [];
  127. this.data = null;
  128. this.editor = editor;
  129. },
  130. load: function(data){
  131. if (this.fireEvent("queryLoad")){
  132. if (data) this.data = data;
  133. this.node = new Element("div",{
  134. "styles": this.css.areaNode
  135. });
  136. this.loadTree();
  137. this.node.inject(this.container);
  138. this.fireEvent("postLoad");
  139. }
  140. },
  141. empty: function(){
  142. this.children.each(function(o){
  143. o2.release(o);
  144. }.bind(this));
  145. this.node.empty();
  146. },
  147. reLoad: function(data){
  148. if (data) this.data = data;
  149. this.children = [];
  150. this.node.empty();
  151. this.loadTree();
  152. },
  153. loadTree: function(){
  154. if (this.data){
  155. this.loadJsonTree(this.data, this, this);
  156. }
  157. if (this.container) this.node.inject(this.container);
  158. },
  159. loadJsonTree: function(data, tree, node){
  160. data.each(function(item){
  161. var treeNode = node.appendChild(item);
  162. if (item.children && item.children.length){
  163. this.loadJsonTree(item.children, this, treeNode);
  164. }
  165. }.bind(tree));
  166. },
  167. appendChild: function(obj){
  168. var treeNode = new MWF.xApplication.process.FormDesigner.widget.ElTreeEditor.Tree.Node(this, obj);
  169. if (this.children.length){
  170. treeNode.previousSibling = this.children[this.children.length-1];
  171. treeNode.previousSibling.nextSibling = treeNode;
  172. }else{
  173. this.firstChild = treeNode;
  174. }
  175. treeNode.level = 0;
  176. treeNode.load();
  177. treeNode.node.inject(this.node);
  178. this.children.push(treeNode);
  179. return treeNode;
  180. },
  181. expandOrCollapseNode: function(treeNode){
  182. if (treeNode.options.expand){
  183. this.collapse(treeNode);
  184. treeNode.options.expand = false;
  185. }else{
  186. this.expand(treeNode);
  187. treeNode.options.expand = true;
  188. }
  189. treeNode.setOperateIcon();
  190. this.editor.fireEvent("change", [{
  191. compareName: "."+treeNode.getLevelName() + ".expand"
  192. }]);
  193. },
  194. expand: function(treeNode){
  195. if (this.fireEvent("queryExpand", [treeNode])){
  196. if(treeNode.childrenNode)treeNode.childrenNode.setStyle("display", "block");
  197. }
  198. this.fireEvent("postExpand", [treeNode]);
  199. },
  200. collapse: function(treeNode){
  201. if (this.fireEvent("queryCollapse", [treeNode])){
  202. if(treeNode.childrenNode)treeNode.childrenNode.setStyle("display", "none");
  203. }
  204. this.fireEvent("postCollapse", [treeNode]);
  205. },
  206. toJson: function(item){
  207. var json=null;
  208. var node = item.firstChild;
  209. json=[];
  210. while (node){
  211. json.push(node.data);
  212. json[json.length-1].children = this.toJson(node);
  213. node = node.nextSibling;
  214. }
  215. return json;
  216. }
  217. });
  218. MWF.xApplication.process.FormDesigner.widget.ElTreeEditor.Tree.Node = new Class({
  219. Implements: [Options, Events],
  220. options: {
  221. "expand": true
  222. // "label": "",
  223. // "default" : false,
  224. // "icon": ""
  225. },
  226. srciptOption: {
  227. "width": 300,
  228. "height": 300,
  229. "top": null,
  230. "left": null,
  231. },
  232. imgs: {
  233. "expand": "expand.gif",
  234. "collapse":"collapse.gif",
  235. "blank": "blank.gif"
  236. },
  237. initialize: function(tree, data){
  238. Object.each({
  239. // "expand": true,
  240. "label": ""
  241. // "default" : false,
  242. // "icon": ""
  243. }, function(value, key){
  244. if( !data.hasOwnProperty(key) ){
  245. data[key] = value;
  246. }
  247. });
  248. this.data = data;
  249. if (data.icon=="none") this.data.icon = "";
  250. this.tree = tree;
  251. this.levelNode = [];
  252. this.children = [];
  253. this.parentNode = null;
  254. this.previousSibling = null;
  255. this.nextSibling = null;
  256. this.firstChild = null;
  257. this.node = new Element("div",{
  258. "styles": this.tree.css.treeNode
  259. });
  260. this.itemNode = new Element("div", {
  261. "styles": this.tree.css.treeItemNode
  262. }).inject(this.node);
  263. this.childrenNode = new Element("div", {
  264. "styles": this.tree.css.treeChildrenNode
  265. }).inject(this.node);
  266. if (!this.options.expand){
  267. this.childrenNode.setStyle("display", "none");
  268. }
  269. this.itemNode.addEvents({
  270. "mouseover": function(){
  271. if (this.tree.currentEditNode!==this) {
  272. this.itemNode.setStyles(this.tree.css.treeItemNodeOver);
  273. this.showItemAction();
  274. }
  275. }.bind(this),
  276. "mouseout": function(){
  277. if (this.tree.currentEditNode!==this) {
  278. this.itemNode.setStyles(this.tree.css.treeItemNode);
  279. this.hideItemAction();
  280. }
  281. }.bind(this),
  282. "click": function () {
  283. this.editItemProperties();
  284. }.bind(this)
  285. });
  286. },
  287. load: function(){
  288. this.tree.fireEvent("beforeLoadTreeNode", [this]);
  289. this.nodeTable = new Element("table", {
  290. "border": "0",
  291. "cellpadding": "0",
  292. "cellspacing": "0",
  293. "styles": {"width": "fit-content", "table-layout": "fixed"}
  294. }).inject(this.itemNode);
  295. this.nodeTable.setStyles(this.tree.css.nodeTable);
  296. var tbody = new Element("tbody").inject(this.nodeTable);
  297. this.nodeArea = new Element("tr").inject(tbody);
  298. this.createLevelNode();
  299. this.createOperateNode();
  300. this.createIconNode();
  301. this.createTextNode();
  302. this.tree.fireEvent("afterLoadTreeNode", [this]);
  303. },
  304. createLevelNode: function(){
  305. for (var i=0; i<this.level; i++){
  306. var td = new Element("td",{
  307. "styles": this.tree.css.blankLevelNode
  308. }).inject(this.nodeArea);
  309. this.levelNode.push(td);
  310. }
  311. },
  312. createOperateNode: function(){
  313. this.operateNode = new Element("td",{
  314. "styles": this.tree.css.operateNode
  315. }).inject(this.nodeArea);
  316. this.operateNode.addEvent("click", function(){
  317. this.expandOrCollapse();
  318. }.bind(this));
  319. this.operateNode.setStyle("background", "url("+this.tree.path+this.tree.options.style+"/"+this.imgs.blank+") center center no-repeat");
  320. },
  321. createIconNode: function(){
  322. if (this.data.icon){
  323. this.iconNode = new Element("td",{
  324. "styles": this.tree.css.iconNode
  325. }).inject(this.nodeArea);
  326. this.iconNode.setStyle("background", "url("+this.tree.path+this.tree.options.style+"/"+this.data.icon+") center center no-repeat");
  327. }
  328. },
  329. createTextNode: function(){
  330. this.textNode = new Element("td",{
  331. "styles": this.tree.css.textNode
  332. }).inject(this.nodeArea);
  333. var textDivNode = new Element("div", {
  334. "styles": {"display": "inline-block"},
  335. "text": this.data.label
  336. });
  337. textDivNode.setStyles(this.tree.css.textDivNode);
  338. textDivNode.addEvent("click", function(e){
  339. this.clickNode(e);
  340. }.bind(this));
  341. textDivNode.inject(this.textNode);
  342. // if( this.data.default ){
  343. // textDivNode.click();
  344. // }
  345. },
  346. clickNode: function(e){
  347. this.selectNode(e);
  348. this.doAction(e);
  349. },
  350. selectNode: function(){
  351. this.tree.fireEvent("beforeSelect", [this]);
  352. if (this.tree.currentNode){
  353. this.tree.currentNode.fireEvent("unselect");
  354. var textDivNode = this.tree.currentNode.textNode.getElement("div");
  355. textDivNode.setStyles(this.tree.css.textDivNode);
  356. }
  357. var textDivNode = this.textNode.getElement("div");
  358. textDivNode.setStyles(this.tree.css.textDivNodeSelected);
  359. this.tree.currentNode = this;
  360. this.tree.fireEvent("afterSelect", [this]);
  361. },
  362. setOperateIcon: function(){
  363. var imgStr = (this.options.expand) ? this.imgs.expand : this.imgs.collapse;
  364. imgStr = this.tree.path+this.tree.options.style+"/"+imgStr;
  365. if (!this.firstChild) imgStr = this.tree.path+this.tree.options.style+"/"+this.imgs.blank;
  366. this.operateNode.setStyle("background", "url("+imgStr+") center center no-repeat");
  367. },
  368. // insertChild: function(obj){
  369. // var treeNode = new this.tree.$constructor.Node(this.tree, obj);
  370. //
  371. // var tmpTreeNode = this.previousSibling;
  372. //
  373. // this.previousSibling = treeNode;
  374. // treeNode.nextSibling = this;
  375. // treeNode.previousSibling = tmpTreeNode;
  376. // if (tmpTreeNode){
  377. // tmpTreeNode.nextSibling = treeNode;
  378. // }else{
  379. // this.parentNode.firstChild = treeNode;
  380. // }
  381. //
  382. // treeNode.parentNode = this.parentNode;
  383. // treeNode.level = this.level;
  384. //
  385. // treeNode.load();
  386. // treeNode.node.inject(this.node, "before");
  387. // this.parentNode.children.push(treeNode);
  388. //
  389. // return treeNode;
  390. // },
  391. appendChild: function(obj){
  392. // if (!this.data.children) this.data.children = [];
  393. // this.data.children.push(obj);
  394. var treeNode = new MWF.xApplication.process.FormDesigner.widget.ElTreeEditor.Tree.Node(this.tree, obj);
  395. if (this.children.length){
  396. treeNode.previousSibling = this.children[this.children.length-1];
  397. treeNode.previousSibling.nextSibling = treeNode;
  398. }else{
  399. this.firstChild = treeNode;
  400. this.setOperateIcon();
  401. }
  402. treeNode.level = this.level+1;
  403. treeNode.parentNode = this;
  404. treeNode.load();
  405. treeNode.node.inject(this.childrenNode);
  406. this.children.push(treeNode);
  407. return treeNode;
  408. },
  409. getLevelName: function(){
  410. var parentTextList = [];
  411. var parent = this;
  412. while (parent){
  413. parentTextList.push( parent.data.label );
  414. parent = parent.parentNode;
  415. }
  416. return parentTextList.reverse().join(".");
  417. },
  418. expandOrCollapse: function(){
  419. this.tree.expandOrCollapseNode(this);
  420. },
  421. destroy: function(){
  422. if (this.previousSibling) this.previousSibling.nextSibling = this.nextSibling;
  423. if (this.nextSibling) this.nextSibling.previousSibling = this.previousSibling;
  424. if (this.parentNode){
  425. if (this.parentNode.firstChild==this){
  426. this.parentNode.firstChild = this.nextSibling;
  427. }
  428. this.parentNode.children.erase(this);
  429. this.parentNode.data.children.erase(this.data);
  430. }else{
  431. this.tree.data.erase(this.data)
  432. }
  433. this.node.destroy();
  434. delete this;
  435. },
  436. doAction: function(e){
  437. var textNode = e.target;
  438. this.editItem(textNode);
  439. e.stopPropagation();
  440. },
  441. hideItemAction: function(){
  442. if (this.actionNode) this.actionNode.setStyle("display", "none");
  443. },
  444. setActionPosition: function(){
  445. if (this.actionNode){
  446. this.actionNode.position({
  447. relativeTo: this.itemNode,
  448. position: "rightCenter",
  449. edge: "rightCenter"
  450. });
  451. }
  452. },
  453. showItemAction: function(){
  454. if (!this.actionNode) this.createItemActionNode();
  455. this.setActionPosition();
  456. this.actionNode.setStyle("display", "block");
  457. },
  458. createItemActionNode: function(){
  459. this.actionNode = new Element("div", {
  460. "styles": this.tree.css.itemActionNode
  461. }).inject(this.itemNode);
  462. var deleteAction = new Element("div", {
  463. "styles": this.tree.css.itemDeleteActionNode,
  464. "title": o2.LP.process.formAction["delete"],
  465. "events": {
  466. "click": function(e){
  467. this.deleteItem(e);
  468. e.stopPropagation();
  469. }.bind(this)
  470. }
  471. }).inject(this.actionNode);
  472. // var propertyAction = new Element("div", {
  473. // "styles": this.tree.css.itemPropertyActionNode,
  474. // "title": o2.LP.process.formAction["property"],
  475. // "events": {
  476. // "click": function(e){
  477. // this.editItemProperties(e);
  478. // }.bind(this)
  479. // }
  480. // }).inject(this.actionNode);
  481. var addAction = new Element("div", {
  482. "styles": this.tree.css.itemAddActionNode,
  483. "title": o2.LP.process.formAction.add,
  484. "events": {
  485. "click": function(ev){
  486. this.addChild();
  487. ev.stopPropagation();
  488. }.bind(this)
  489. }
  490. }).inject(this.actionNode);
  491. },
  492. getScriptDefaultPosition: function(width, height){
  493. var ph = this.node.getPosition();
  494. var pw = this.tree.node.getPosition();
  495. var size = this.node.getSize();
  496. var bodySize = document.body.getSize();
  497. var x = pw.x-width-10;
  498. if (x+width>bodySize.x) x = bodySize.x-width;
  499. if (x<0) x = 0;
  500. var y = ph.y-(height/2)+(size.y/2);
  501. if (y+height>bodySize.y) y = bodySize.y-height;
  502. if (y<0) y = 0;
  503. return {"x": x, "y": y};
  504. },
  505. createScriptNode: function(){
  506. this.scriptNode = new Element("div", {
  507. "styles": this.tree.css.scriptNode
  508. });
  509. o2.require("o2.widget.ScriptEditor", null, false);
  510. this.scriptEditor = new o2.widget.ScriptEditor(this.scriptNode, {"style": "process"});
  511. },
  512. // completeScriptItem: function(){
  513. // this.itemNode.setStyles(this.tree.css.treeItemNode);
  514. // this.isEditScript = false;
  515. // this.tree.currentEditNode = null;
  516. //
  517. // if (this.scriptArea){
  518. // if (!this.scriptArea.treeEditorMorph){
  519. // this.scriptArea.treeEditorMorph = new Fx.Morph(this.scriptArea.container, {
  520. // "duration": 200
  521. // });
  522. // }
  523. // this.scriptArea.treeEditorMorph.start({
  524. // "height": "0",
  525. // "overflow": "auto"
  526. // }).chain(function(){
  527. // this.scriptArea.container.setStyle("display", "none");
  528. // }.bind(this));
  529. // }
  530. //
  531. //
  532. // },
  533. // editScriptItem: function(e){
  534. //
  535. // if (this.tree.currentEditNode!=this){
  536. // if (this.tree.currentEditNode) this.tree.currentEditNode.completeScriptItem();
  537. //
  538. // this.itemNode.setStyle("background", "#DDD");
  539. // if (!this.scriptArea){
  540. // var node = new Element("div").inject(this.itemNode, "after");
  541. // o2.require("o2.widget.ScriptArea", function(){
  542. // this.scriptArea = new o2.widget.ScriptArea(node, {
  543. // "title": o2.LP.process.formAction["script"],
  544. // "maxObj": this.tree.editor.options.maxObj,
  545. // "style": "treeEditor",
  546. // "onChange": function(){
  547. // this.data.action = this.scriptArea.toJson();
  548. // this.tree.editor.fireEvent("change");
  549. // }.bind(this)
  550. // });
  551. // if (!this.data.action) this.data.action = {};
  552. // this.scriptArea.load(this.data.action);
  553. //
  554. // this.scriptArea.container.setStyles({
  555. // "overflow": "hidden",
  556. // "height": "0px"
  557. // });
  558. //
  559. // }.bind(this));
  560. // }
  561. //
  562. // this.scriptArea.container.setStyle("display", "block");
  563. // if (!this.scriptArea.treeEditorMorph){
  564. // this.scriptArea.treeEditorMorph = new Fx.Morph(this.scriptArea.container, {
  565. // "duration": 200
  566. // });
  567. // }
  568. // this.scriptArea.treeEditorMorph.start({
  569. // "height": "200px",
  570. // "overflow": "auto"
  571. // }).chain(function(){
  572. // this.scriptArea.container.scrollIntoView();
  573. // this.scriptArea.focus();
  574. // this.setActionPosition();
  575. // }.bind(this));
  576. //
  577. // this.isEditScript = true;
  578. // this.tree.currentEditNode = this;
  579. // }else{
  580. // this.completeScriptItem();
  581. // }
  582. // },
  583. completeItemProperties: function(){
  584. this.hideItemAction();
  585. this.itemNode.setStyles(this.tree.css.treeItemNode);
  586. this.isEditProperty = false;
  587. this.tree.currentEditNode = null;
  588. this.propertyArea.hide();
  589. },
  590. editItemProperties: function(){
  591. if (this.tree.currentEditNode!=this){
  592. if (this.tree.currentEditNode) this.tree.currentEditNode.completeItemProperties();
  593. this.itemNode.setStyle("background", "#DDD");
  594. if (!this.propertyArea){
  595. this.propertyArea = new Element("div").inject(this.itemNode, "after");
  596. this.propertyTable = new Element("table", {
  597. "width": "100%",
  598. "border": "0",
  599. "cellpadding":"5",
  600. "cellspacing":"0",
  601. "class": "editTable"
  602. }).inject(this.propertyArea);
  603. var tr = new Element("tr").inject(this.propertyTable);
  604. var td = new Element("td", { text: "文本" }).inject(tr);
  605. td = new Element("td").inject(tr);
  606. this.labelInput = new Element("input", {
  607. value: this.data.label || "[none]",
  608. events: {
  609. blur: function () {
  610. this.data.label = this.labelInput.get("value");
  611. this.textNode.getElement("div").set("text", this.data.label);
  612. this.tree.editor.fireEvent("change", [{
  613. compareName: "."+this.getLevelName() + ".label"
  614. }]);
  615. }.bind(this)
  616. }
  617. }).inject(td);
  618. tr = new Element("tr").inject(this.propertyTable);
  619. td = new Element("td", { text: "id/key" }).inject(tr);
  620. td = new Element("td").inject(tr);
  621. this.idInput = new Element("input", {
  622. value: this.data.id || "",
  623. events: {
  624. blur: function () {
  625. this.data.id = this.idInput.get("value");
  626. this.tree.editor.fireEvent("change", [{
  627. compareName: "."+this.getLevelName() + ".id"
  628. }]);
  629. }.bind(this)
  630. }
  631. }).inject(td);
  632. tr = new Element("tr").inject(this.propertyTable);
  633. td = new Element("td", { "colspan": "2" }).inject(tr);
  634. MWF.require("MWF.widget.Maplist", function() {
  635. var maplist = new MWF.widget.Maplist(td, {
  636. "title": "其他属性",
  637. "collapse": false,
  638. "onChange": function () {
  639. // var oldData = this.data[name];
  640. var data = maplist.toJson();
  641. for (var key in data) {
  642. this.data[key] = data[key]
  643. }
  644. this.tree.editor.fireEvent("change", [{
  645. compareName: "."+this.getLevelName() + ".property"
  646. }]);
  647. }.bind(this),
  648. "onDelete": function (key) {
  649. if (this.data[key]) {
  650. delete this.data[key];
  651. }
  652. this.tree.editor.fireEvent("change", [{
  653. compareName: "."+this.getLevelName() + ".property"
  654. }]);
  655. }.bind(this),
  656. "isProperty": true
  657. });
  658. var data = {};
  659. for (var key in this.data) {
  660. if( !["id","label", "children"].contains(key) )data[key] = this.data[key]
  661. }
  662. maplist.load(data);
  663. }.bind(this))
  664. }
  665. this.propertyArea.setStyle("display", "block");
  666. this.propertyArea.scrollIntoView(false);
  667. this.setActionPosition();
  668. this.isEditProperty = true;
  669. this.tree.currentEditNode = this;
  670. }else{
  671. this.completeItemProperties();
  672. }
  673. },
  674. addChild: function(){
  675. var obj = Object.clone(this.tree.nodejson);
  676. if (!this.data.children) this.data.children = [];
  677. this.data.children.push(obj);
  678. var treeNode = this.appendChild(obj);
  679. if (!this.options.expand) this.tree.expandOrCollapseNode(this);
  680. treeNode.selectNode();
  681. treeNode.showItemAction();
  682. treeNode.editItemProperties();
  683. var textDivNode = treeNode.textNode.getElement("div");
  684. treeNode.editItem(textDivNode);
  685. this.tree.editor.fireEvent("change", [{
  686. compareName: "."+this.getLevelName() + " [addSub]",
  687. force: true
  688. }]);
  689. },
  690. deleteItem: function(e){
  691. var treeNode = this;
  692. var p = e.target.getPosition();
  693. var tmpe = {"event": {"x": p.x+40, "y": p.y}};
  694. MWF.xDesktop.confirm("warn", tmpe, o2.LP.process.notice.deleteTreeNodeTitle, o2.LP.process.notice.deleteTreeNode, 300, 120, function(){
  695. treeNode.destroy();
  696. treeNode.tree.editor.fireEvent("change", [{
  697. compareName: "."+treeNode.getLevelName() + " [delete]",
  698. force: true
  699. }]);
  700. this.close();
  701. }, function(){
  702. this.close();
  703. }, null, null, "o2");
  704. },
  705. editItem: function(node, okCallBack){
  706. var text = node.get("text");
  707. node.set("html", "");
  708. var div = new Element("div", {
  709. "styles": this.tree.css.editInputDiv,
  710. });
  711. var input = new Element("input", {
  712. "styles": this.tree.css.editInput,
  713. "type": "text",
  714. "value": text
  715. }).inject(div);
  716. var w = o2.getTextSize(text+"a").x;
  717. input.setStyle("width", w);
  718. div.setStyle("width", w);
  719. div.inject(node);
  720. input.select();
  721. input.addEvents({
  722. "keydown": function(e){
  723. var x = o2.getTextSize(input.get("value")+"a").x;
  724. e.target.setStyle("width", x);
  725. e.target.getParent().setStyle("width", x);
  726. if (e.code==13){
  727. this.isEnterKey = true;
  728. e.target.blur();
  729. }
  730. }.bind(this),
  731. "blur": function(e){
  732. var flag = this.editItemComplate(node, e.target);
  733. if (okCallBack) okCallBack(flag);
  734. }.bind(this),
  735. "click": function(e){
  736. e.stopPropagation();
  737. }.bind(this)
  738. });
  739. },
  740. editItemComplate: function(node, input){
  741. var text = input.get("value");
  742. // if (node == this.keyNode){
  743. if (!text){
  744. text = "[none]";
  745. }
  746. this.data.label = text;
  747. // }
  748. var addNewItem = false;
  749. if (this.isEnterKey){
  750. if (this.isNewItem){
  751. addNewItem = true;
  752. }
  753. this.editOkAddNewItem = false;
  754. }
  755. this.isNewItem = false;
  756. node.set("html", text);
  757. if( this.labelInput )this.labelInput.set("value", text);
  758. this.tree.editor.fireEvent("change", [{
  759. compareName: "."+this.getLevelName() + ".label"
  760. }]);
  761. return true;
  762. }
  763. });