ElTreeEditor.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865
  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. debugger;
  239. Object.each({
  240. // "expand": true,
  241. "label": ""
  242. // "default" : false,
  243. // "icon": ""
  244. }, function(value, key){
  245. if( !data.hasOwnProperty(key) ){
  246. data[key] = value;
  247. }
  248. });
  249. this.data = data;
  250. if (data.icon=="none") this.data.icon = "";
  251. this.tree = tree;
  252. this.levelNode = [];
  253. this.children = [];
  254. this.parentNode = null;
  255. this.previousSibling = null;
  256. this.nextSibling = null;
  257. this.firstChild = null;
  258. this.node = new Element("div",{
  259. "styles": this.tree.css.treeNode
  260. });
  261. this.itemNode = new Element("div", {
  262. "styles": this.tree.css.treeItemNode
  263. }).inject(this.node);
  264. this.childrenNode = new Element("div", {
  265. "styles": this.tree.css.treeChildrenNode
  266. }).inject(this.node);
  267. if (!this.options.expand){
  268. this.childrenNode.setStyle("display", "none");
  269. }
  270. this.itemNode.addEvents({
  271. "mouseover": function(){
  272. if (this.tree.currentEditNode!==this) {
  273. this.itemNode.setStyles(this.tree.css.treeItemNodeOver);
  274. this.showItemAction();
  275. }
  276. }.bind(this),
  277. "mouseout": function(){
  278. if (this.tree.currentEditNode!==this) {
  279. this.itemNode.setStyles(this.tree.css.treeItemNode);
  280. this.hideItemAction();
  281. }
  282. }.bind(this),
  283. "click": function () {
  284. this.editItemProperties();
  285. }.bind(this)
  286. });
  287. },
  288. load: function(){
  289. this.tree.fireEvent("beforeLoadTreeNode", [this]);
  290. this.nodeTable = new Element("table", {
  291. "border": "0",
  292. "cellpadding": "0",
  293. "cellspacing": "0",
  294. "styles": {"width": "fit-content", "table-layout": "fixed"}
  295. }).inject(this.itemNode);
  296. this.nodeTable.setStyles(this.tree.css.nodeTable);
  297. var tbody = new Element("tbody").inject(this.nodeTable);
  298. this.nodeArea = new Element("tr").inject(tbody);
  299. this.createLevelNode();
  300. this.createOperateNode();
  301. this.createIconNode();
  302. this.createTextNode();
  303. this.tree.fireEvent("afterLoadTreeNode", [this]);
  304. },
  305. createLevelNode: function(){
  306. for (var i=0; i<this.level; i++){
  307. var td = new Element("td",{
  308. "styles": this.tree.css.blankLevelNode
  309. }).inject(this.nodeArea);
  310. this.levelNode.push(td);
  311. }
  312. },
  313. createOperateNode: function(){
  314. this.operateNode = new Element("td",{
  315. "styles": this.tree.css.operateNode
  316. }).inject(this.nodeArea);
  317. this.operateNode.addEvent("click", function(){
  318. this.expandOrCollapse();
  319. }.bind(this));
  320. this.operateNode.setStyle("background", "url("+this.tree.path+this.tree.options.style+"/"+this.imgs.blank+") center center no-repeat");
  321. },
  322. createIconNode: function(){
  323. if (this.data.icon){
  324. this.iconNode = new Element("td",{
  325. "styles": this.tree.css.iconNode
  326. }).inject(this.nodeArea);
  327. this.iconNode.setStyle("background", "url("+this.tree.path+this.tree.options.style+"/"+this.data.icon+") center center no-repeat");
  328. }
  329. },
  330. createTextNode: function(){
  331. this.textNode = new Element("td",{
  332. "styles": this.tree.css.textNode
  333. }).inject(this.nodeArea);
  334. var textDivNode = new Element("div", {
  335. "styles": {"display": "inline-block"},
  336. "text": this.data.label
  337. });
  338. textDivNode.setStyles(this.tree.css.textDivNode);
  339. textDivNode.addEvent("click", function(e){
  340. this.clickNode(e);
  341. }.bind(this));
  342. textDivNode.inject(this.textNode);
  343. // if( this.data.default ){
  344. // textDivNode.click();
  345. // }
  346. },
  347. clickNode: function(e){
  348. this.selectNode(e);
  349. this.doAction(e);
  350. },
  351. selectNode: function(){
  352. this.tree.fireEvent("beforeSelect", [this]);
  353. if (this.tree.currentNode){
  354. this.tree.currentNode.fireEvent("unselect");
  355. var textDivNode = this.tree.currentNode.textNode.getElement("div");
  356. textDivNode.setStyles(this.tree.css.textDivNode);
  357. }
  358. var textDivNode = this.textNode.getElement("div");
  359. textDivNode.setStyles(this.tree.css.textDivNodeSelected);
  360. this.tree.currentNode = this;
  361. this.tree.fireEvent("afterSelect", [this]);
  362. },
  363. setOperateIcon: function(){
  364. var imgStr = (this.options.expand) ? this.imgs.expand : this.imgs.collapse;
  365. imgStr = this.tree.path+this.tree.options.style+"/"+imgStr;
  366. if (!this.firstChild) imgStr = this.tree.path+this.tree.options.style+"/"+this.imgs.blank;
  367. this.operateNode.setStyle("background", "url("+imgStr+") center center no-repeat");
  368. },
  369. // insertChild: function(obj){
  370. // var treeNode = new this.tree.$constructor.Node(this.tree, obj);
  371. //
  372. // var tmpTreeNode = this.previousSibling;
  373. //
  374. // this.previousSibling = treeNode;
  375. // treeNode.nextSibling = this;
  376. // treeNode.previousSibling = tmpTreeNode;
  377. // if (tmpTreeNode){
  378. // tmpTreeNode.nextSibling = treeNode;
  379. // }else{
  380. // this.parentNode.firstChild = treeNode;
  381. // }
  382. //
  383. // treeNode.parentNode = this.parentNode;
  384. // treeNode.level = this.level;
  385. //
  386. // treeNode.load();
  387. // treeNode.node.inject(this.node, "before");
  388. // this.parentNode.children.push(treeNode);
  389. //
  390. // return treeNode;
  391. // },
  392. appendChild: function(obj){
  393. // if (!this.data.children) this.data.children = [];
  394. // this.data.children.push(obj);
  395. var treeNode = new MWF.xApplication.process.FormDesigner.widget.ElTreeEditor.Tree.Node(this.tree, obj);
  396. if (this.children.length){
  397. treeNode.previousSibling = this.children[this.children.length-1];
  398. treeNode.previousSibling.nextSibling = treeNode;
  399. }else{
  400. this.firstChild = treeNode;
  401. this.setOperateIcon();
  402. }
  403. treeNode.level = this.level+1;
  404. treeNode.parentNode = this;
  405. treeNode.load();
  406. treeNode.node.inject(this.childrenNode);
  407. this.children.push(treeNode);
  408. return treeNode;
  409. },
  410. getLevelName: function(){
  411. var parentTextList = [];
  412. var parent = this;
  413. while (parent){
  414. parentTextList.push( parent.data.label );
  415. parent = parent.parentNode;
  416. }
  417. return parentTextList.reverse().join(".");
  418. },
  419. expandOrCollapse: function(){
  420. this.tree.expandOrCollapseNode(this);
  421. },
  422. destroy: function(){
  423. if (this.previousSibling) this.previousSibling.nextSibling = this.nextSibling;
  424. if (this.nextSibling) this.nextSibling.previousSibling = this.previousSibling;
  425. if (this.parentNode){
  426. if (this.parentNode.firstChild==this){
  427. this.parentNode.firstChild = this.nextSibling;
  428. }
  429. this.parentNode.children.erase(this);
  430. this.parentNode.data.children.erase(this.data);
  431. }else{
  432. this.tree.data.erase(this.data)
  433. }
  434. this.node.destroy();
  435. delete this;
  436. },
  437. doAction: function(e){
  438. var textNode = e.target;
  439. this.editItem(textNode);
  440. e.stopPropagation();
  441. },
  442. hideItemAction: function(){
  443. if (this.actionNode) this.actionNode.setStyle("display", "none");
  444. },
  445. setActionPosition: function(){
  446. if (this.actionNode){
  447. this.actionNode.position({
  448. relativeTo: this.itemNode,
  449. position: "rightCenter",
  450. edge: "rightCenter"
  451. });
  452. }
  453. },
  454. showItemAction: function(){
  455. if (!this.actionNode) this.createItemActionNode();
  456. this.setActionPosition();
  457. this.actionNode.setStyle("display", "block");
  458. },
  459. createItemActionNode: function(){
  460. this.actionNode = new Element("div", {
  461. "styles": this.tree.css.itemActionNode
  462. }).inject(this.itemNode);
  463. var deleteAction = new Element("div", {
  464. "styles": this.tree.css.itemDeleteActionNode,
  465. "title": o2.LP.process.formAction["delete"],
  466. "events": {
  467. "click": function(e){
  468. this.deleteItem(e);
  469. e.stopPropagation();
  470. }.bind(this)
  471. }
  472. }).inject(this.actionNode);
  473. // var propertyAction = new Element("div", {
  474. // "styles": this.tree.css.itemPropertyActionNode,
  475. // "title": o2.LP.process.formAction["property"],
  476. // "events": {
  477. // "click": function(e){
  478. // this.editItemProperties(e);
  479. // }.bind(this)
  480. // }
  481. // }).inject(this.actionNode);
  482. var addAction = new Element("div", {
  483. "styles": this.tree.css.itemAddActionNode,
  484. "title": o2.LP.process.formAction.add,
  485. "events": {
  486. "click": function(ev){
  487. this.addChild();
  488. ev.stopPropagation();
  489. }.bind(this)
  490. }
  491. }).inject(this.actionNode);
  492. },
  493. getScriptDefaultPosition: function(width, height){
  494. var ph = this.node.getPosition();
  495. var pw = this.tree.node.getPosition();
  496. var size = this.node.getSize();
  497. var bodySize = document.body.getSize();
  498. var x = pw.x-width-10;
  499. if (x+width>bodySize.x) x = bodySize.x-width;
  500. if (x<0) x = 0;
  501. var y = ph.y-(height/2)+(size.y/2);
  502. if (y+height>bodySize.y) y = bodySize.y-height;
  503. if (y<0) y = 0;
  504. return {"x": x, "y": y};
  505. },
  506. createScriptNode: function(){
  507. this.scriptNode = new Element("div", {
  508. "styles": this.tree.css.scriptNode
  509. });
  510. o2.require("o2.widget.ScriptEditor", null, false);
  511. this.scriptEditor = new o2.widget.ScriptEditor(this.scriptNode, {"style": "process"});
  512. },
  513. // completeScriptItem: function(){
  514. // this.itemNode.setStyles(this.tree.css.treeItemNode);
  515. // this.isEditScript = false;
  516. // this.tree.currentEditNode = null;
  517. //
  518. // if (this.scriptArea){
  519. // if (!this.scriptArea.treeEditorMorph){
  520. // this.scriptArea.treeEditorMorph = new Fx.Morph(this.scriptArea.container, {
  521. // "duration": 200
  522. // });
  523. // }
  524. // this.scriptArea.treeEditorMorph.start({
  525. // "height": "0",
  526. // "overflow": "auto"
  527. // }).chain(function(){
  528. // this.scriptArea.container.setStyle("display", "none");
  529. // }.bind(this));
  530. // }
  531. //
  532. //
  533. // },
  534. // editScriptItem: function(e){
  535. //
  536. // if (this.tree.currentEditNode!=this){
  537. // if (this.tree.currentEditNode) this.tree.currentEditNode.completeScriptItem();
  538. //
  539. // this.itemNode.setStyle("background", "#DDD");
  540. // if (!this.scriptArea){
  541. // var node = new Element("div").inject(this.itemNode, "after");
  542. // o2.require("o2.widget.ScriptArea", function(){
  543. // this.scriptArea = new o2.widget.ScriptArea(node, {
  544. // "title": o2.LP.process.formAction["script"],
  545. // "maxObj": this.tree.editor.options.maxObj,
  546. // "style": "treeEditor",
  547. // "onChange": function(){
  548. // this.data.action = this.scriptArea.toJson();
  549. // this.tree.editor.fireEvent("change");
  550. // }.bind(this)
  551. // });
  552. // if (!this.data.action) this.data.action = {};
  553. // this.scriptArea.load(this.data.action);
  554. //
  555. // this.scriptArea.container.setStyles({
  556. // "overflow": "hidden",
  557. // "height": "0px"
  558. // });
  559. //
  560. // }.bind(this));
  561. // }
  562. //
  563. // this.scriptArea.container.setStyle("display", "block");
  564. // if (!this.scriptArea.treeEditorMorph){
  565. // this.scriptArea.treeEditorMorph = new Fx.Morph(this.scriptArea.container, {
  566. // "duration": 200
  567. // });
  568. // }
  569. // this.scriptArea.treeEditorMorph.start({
  570. // "height": "200px",
  571. // "overflow": "auto"
  572. // }).chain(function(){
  573. // this.scriptArea.container.scrollIntoView();
  574. // this.scriptArea.focus();
  575. // this.setActionPosition();
  576. // }.bind(this));
  577. //
  578. // this.isEditScript = true;
  579. // this.tree.currentEditNode = this;
  580. // }else{
  581. // this.completeScriptItem();
  582. // }
  583. // },
  584. completeItemProperties: function(){
  585. this.hideItemAction();
  586. this.itemNode.setStyles(this.tree.css.treeItemNode);
  587. this.isEditProperty = false;
  588. this.tree.currentEditNode = null;
  589. this.propertyArea.hide();
  590. },
  591. editItemProperties: function(){
  592. if (this.tree.currentEditNode!=this){
  593. if (this.tree.currentEditNode) this.tree.currentEditNode.completeItemProperties();
  594. this.itemNode.setStyle("background", "#DDD");
  595. if (!this.propertyArea){
  596. this.propertyArea = new Element("div").inject(this.itemNode, "after");
  597. this.propertyTable = new Element("table", {
  598. "width": "100%",
  599. "border": "0",
  600. "cellpadding":"5",
  601. "cellspacing":"0",
  602. "class": "editTable"
  603. }).inject(this.propertyArea);
  604. var tr = new Element("tr").inject(this.propertyTable);
  605. var td = new Element("td", { text: "文本" }).inject(tr);
  606. td = new Element("td").inject(tr);
  607. this.labelInput = new Element("input", {
  608. value: this.data.label || "[none]",
  609. events: {
  610. blur: function () {
  611. this.data.label = this.labelInput.get("value");
  612. this.textNode.getElement("div").set("text", this.data.label);
  613. this.tree.editor.fireEvent("change", [{
  614. compareName: "."+this.getLevelName() + ".label"
  615. }]);
  616. }.bind(this)
  617. }
  618. }).inject(td);
  619. tr = new Element("tr").inject(this.propertyTable);
  620. td = new Element("td", { text: "id/key" }).inject(tr);
  621. td = new Element("td").inject(tr);
  622. this.idInput = new Element("input", {
  623. value: this.data.id || "",
  624. events: {
  625. blur: function () {
  626. this.data.id = this.idInput.get("value");
  627. this.tree.editor.fireEvent("change", [{
  628. compareName: "."+this.getLevelName() + ".id"
  629. }]);
  630. }.bind(this)
  631. }
  632. }).inject(td);
  633. tr = new Element("tr").inject(this.propertyTable);
  634. td = new Element("td", { "colspan": "2" }).inject(tr);
  635. MWF.require("MWF.widget.Maplist", function() {
  636. var maplist = new MWF.widget.Maplist(td, {
  637. "title": "其他属性",
  638. "collapse": false,
  639. "onChange": function () {
  640. // var oldData = this.data[name];
  641. var data = maplist.toJson();
  642. for (var key in data) {
  643. this.data[key] = data[key]
  644. }
  645. this.tree.editor.fireEvent("change", [{
  646. compareName: "."+this.getLevelName() + ".property"
  647. }]);
  648. }.bind(this),
  649. "onDelete": function (key) {
  650. if (this.data[key]) {
  651. delete this.data[key];
  652. }
  653. this.tree.editor.fireEvent("change", [{
  654. compareName: "."+this.getLevelName() + ".property"
  655. }]);
  656. }.bind(this),
  657. "isProperty": true
  658. });
  659. var data = {};
  660. for (var key in this.data) {
  661. if( !["id","label", "children"].contains(key) )data[key] = this.data[key]
  662. }
  663. maplist.load(data);
  664. }.bind(this))
  665. }
  666. this.propertyArea.setStyle("display", "block");
  667. this.propertyArea.scrollIntoView(false);
  668. this.setActionPosition();
  669. this.isEditProperty = true;
  670. this.tree.currentEditNode = this;
  671. }else{
  672. this.completeItemProperties();
  673. }
  674. },
  675. addChild: function(){
  676. debugger;
  677. var obj = Object.clone(this.tree.nodejson);
  678. if (!this.data.children) this.data.children = [];
  679. this.data.children.push(obj);
  680. var treeNode = this.appendChild(obj);
  681. if (!this.options.expand) this.tree.expandOrCollapseNode(this);
  682. treeNode.selectNode();
  683. treeNode.showItemAction();
  684. treeNode.editItemProperties();
  685. var textDivNode = treeNode.textNode.getElement("div");
  686. treeNode.editItem(textDivNode);
  687. this.tree.editor.fireEvent("change", [{
  688. compareName: "."+this.getLevelName() + " [addSub]",
  689. force: true
  690. }]);
  691. },
  692. deleteItem: function(e){
  693. var treeNode = this;
  694. var p = e.target.getPosition();
  695. var tmpe = {"event": {"x": p.x+40, "y": p.y}};
  696. MWF.xDesktop.confirm("warn", tmpe, o2.LP.process.notice.deleteTreeNodeTitle, o2.LP.process.notice.deleteTreeNode, 300, 120, function(){
  697. treeNode.destroy();
  698. treeNode.tree.editor.fireEvent("change", [{
  699. compareName: "."+treeNode.getLevelName() + " [delete]",
  700. force: true
  701. }]);
  702. this.close();
  703. }, function(){
  704. this.close();
  705. }, null, null, "o2");
  706. },
  707. editItem: function(node, okCallBack){
  708. var text = node.get("text");
  709. node.set("html", "");
  710. var div = new Element("div", {
  711. "styles": this.tree.css.editInputDiv,
  712. });
  713. var input = new Element("input", {
  714. "styles": this.tree.css.editInput,
  715. "type": "text",
  716. "value": text
  717. }).inject(div);
  718. var w = o2.getTextSize(text+"a").x;
  719. input.setStyle("width", w);
  720. div.setStyle("width", w);
  721. div.inject(node);
  722. input.select();
  723. input.addEvents({
  724. "keydown": function(e){
  725. var x = o2.getTextSize(input.get("value")+"a").x;
  726. e.target.setStyle("width", x);
  727. e.target.getParent().setStyle("width", x);
  728. if (e.code==13){
  729. this.isEnterKey = true;
  730. e.target.blur();
  731. }
  732. }.bind(this),
  733. "blur": function(e){
  734. var flag = this.editItemComplate(node, e.target);
  735. if (okCallBack) okCallBack(flag);
  736. }.bind(this),
  737. "click": function(e){
  738. e.stopPropagation();
  739. }.bind(this)
  740. });
  741. },
  742. editItemComplate: function(node, input){
  743. var text = input.get("value");
  744. // if (node == this.keyNode){
  745. if (!text){
  746. text = "[none]";
  747. }
  748. this.data.label = text;
  749. // }
  750. var addNewItem = false;
  751. if (this.isEnterKey){
  752. if (this.isNewItem){
  753. addNewItem = true;
  754. }
  755. this.editOkAddNewItem = false;
  756. }
  757. this.isNewItem = false;
  758. node.set("html", text);
  759. if( this.labelInput )this.labelInput.set("value", text);
  760. this.tree.editor.fireEvent("change", [{
  761. compareName: "."+this.getLevelName() + ".label"
  762. }]);
  763. return true;
  764. }
  765. });