mxCell.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827
  1. /**
  2. * Copyright (c) 2006-2015, JGraph Ltd
  3. * Copyright (c) 2006-2015, Gaudenz Alder
  4. */
  5. /**
  6. * Class: mxCell
  7. *
  8. * Cells are the elements of the graph model. They represent the state
  9. * of the groups, vertices and edges in a graph.
  10. *
  11. * Custom attributes:
  12. *
  13. * For custom attributes we recommend using an XML node as the value of a cell.
  14. * The following code can be used to create a cell with an XML node as the
  15. * value:
  16. *
  17. * (code)
  18. * var doc = mxUtils.createXmlDocument();
  19. * var node = doc.createElement('MyNode')
  20. * node.setAttribute('label', 'MyLabel');
  21. * node.setAttribute('attribute1', 'value1');
  22. * graph.insertVertex(graph.getDefaultParent(), null, node, 40, 40, 80, 30);
  23. * (end)
  24. *
  25. * For the label to work, <mxGraph.convertValueToString> and
  26. * <mxGraph.cellLabelChanged> should be overridden as follows:
  27. *
  28. * (code)
  29. * graph.convertValueToString = function(cell)
  30. * {
  31. * if (mxUtils.isNode(cell.value))
  32. * {
  33. * return cell.getAttribute('label', '')
  34. * }
  35. * };
  36. *
  37. * var cellLabelChanged = graph.cellLabelChanged;
  38. * graph.cellLabelChanged = function(cell, newValue, autoSize)
  39. * {
  40. * if (mxUtils.isNode(cell.value))
  41. * {
  42. * // Clones the value for correct undo/redo
  43. * var elt = cell.value.cloneNode(true);
  44. * elt.setAttribute('label', newValue);
  45. * newValue = elt;
  46. * }
  47. *
  48. * cellLabelChanged.apply(this, arguments);
  49. * };
  50. * (end)
  51. *
  52. * Callback: onInit
  53. *
  54. * Called from within the constructor.
  55. *
  56. * Constructor: mxCell
  57. *
  58. * Constructs a new cell to be used in a graph model.
  59. * This method invokes <onInit> upon completion.
  60. *
  61. * Parameters:
  62. *
  63. * value - Optional object that represents the cell value.
  64. * geometry - Optional <mxGeometry> that specifies the geometry.
  65. * style - Optional formatted string that defines the style.
  66. */
  67. function mxCell(value, geometry, style)
  68. {
  69. this.value = value;
  70. this.setGeometry(geometry);
  71. this.setStyle(style);
  72. if (this.onInit != null)
  73. {
  74. this.onInit();
  75. }
  76. };
  77. /**
  78. * Variable: id
  79. *
  80. * Holds the Id. Default is null.
  81. */
  82. mxCell.prototype.id = null;
  83. /**
  84. * Variable: value
  85. *
  86. * Holds the user object. Default is null.
  87. */
  88. mxCell.prototype.value = null;
  89. /**
  90. * Variable: geometry
  91. *
  92. * Holds the <mxGeometry>. Default is null.
  93. */
  94. mxCell.prototype.geometry = null;
  95. /**
  96. * Variable: style
  97. *
  98. * Holds the style as a string of the form [(stylename|key=value);]. Default is
  99. * null.
  100. */
  101. mxCell.prototype.style = null;
  102. /**
  103. * Variable: vertex
  104. *
  105. * Specifies whether the cell is a vertex. Default is false.
  106. */
  107. mxCell.prototype.vertex = false;
  108. /**
  109. * Variable: edge
  110. *
  111. * Specifies whether the cell is an edge. Default is false.
  112. */
  113. mxCell.prototype.edge = false;
  114. /**
  115. * Variable: connectable
  116. *
  117. * Specifies whether the cell is connectable. Default is true.
  118. */
  119. mxCell.prototype.connectable = true;
  120. /**
  121. * Variable: visible
  122. *
  123. * Specifies whether the cell is visible. Default is true.
  124. */
  125. mxCell.prototype.visible = true;
  126. /**
  127. * Variable: collapsed
  128. *
  129. * Specifies whether the cell is collapsed. Default is false.
  130. */
  131. mxCell.prototype.collapsed = false;
  132. /**
  133. * Variable: parent
  134. *
  135. * Reference to the parent cell.
  136. */
  137. mxCell.prototype.parent = null;
  138. /**
  139. * Variable: source
  140. *
  141. * Reference to the source terminal.
  142. */
  143. mxCell.prototype.source = null;
  144. /**
  145. * Variable: target
  146. *
  147. * Reference to the target terminal.
  148. */
  149. mxCell.prototype.target = null;
  150. /**
  151. * Variable: children
  152. *
  153. * Holds the child cells.
  154. */
  155. mxCell.prototype.children = null;
  156. /**
  157. * Variable: edges
  158. *
  159. * Holds the edges.
  160. */
  161. mxCell.prototype.edges = null;
  162. /**
  163. * Variable: mxTransient
  164. *
  165. * List of members that should not be cloned inside <clone>. This field is
  166. * passed to <mxUtils.clone> and is not made persistent in <mxCellCodec>.
  167. * This is not a convention for all classes, it is only used in this class
  168. * to mark transient fields since transient modifiers are not supported by
  169. * the language.
  170. */
  171. mxCell.prototype.mxTransient = ['id', 'value', 'parent', 'source',
  172. 'target', 'children', 'edges'];
  173. /**
  174. * Function: getId
  175. *
  176. * Returns the Id of the cell as a string.
  177. */
  178. mxCell.prototype.getId = function()
  179. {
  180. return this.id;
  181. };
  182. /**
  183. * Function: setId
  184. *
  185. * Sets the Id of the cell to the given string.
  186. */
  187. mxCell.prototype.setId = function(id)
  188. {
  189. this.id = id;
  190. };
  191. /**
  192. * Function: getValue
  193. *
  194. * Returns the user object of the cell. The user
  195. * object is stored in <value>.
  196. */
  197. mxCell.prototype.getValue = function()
  198. {
  199. return this.value;
  200. };
  201. /**
  202. * Function: setValue
  203. *
  204. * Sets the user object of the cell. The user object
  205. * is stored in <value>.
  206. */
  207. mxCell.prototype.setValue = function(value)
  208. {
  209. this.value = value;
  210. };
  211. /**
  212. * Function: valueChanged
  213. *
  214. * Changes the user object after an in-place edit
  215. * and returns the previous value. This implementation
  216. * replaces the user object with the given value and
  217. * returns the old user object.
  218. */
  219. mxCell.prototype.valueChanged = function(newValue)
  220. {
  221. var previous = this.getValue();
  222. this.setValue(newValue);
  223. return previous;
  224. };
  225. /**
  226. * Function: getGeometry
  227. *
  228. * Returns the <mxGeometry> that describes the <geometry>.
  229. */
  230. mxCell.prototype.getGeometry = function()
  231. {
  232. return this.geometry;
  233. };
  234. /**
  235. * Function: setGeometry
  236. *
  237. * Sets the <mxGeometry> to be used as the <geometry>.
  238. */
  239. mxCell.prototype.setGeometry = function(geometry)
  240. {
  241. this.geometry = geometry;
  242. };
  243. /**
  244. * Function: getStyle
  245. *
  246. * Returns a string that describes the <style>.
  247. */
  248. mxCell.prototype.getStyle = function()
  249. {
  250. return this.style;
  251. };
  252. /**
  253. * Function: setStyle
  254. *
  255. * Sets the string to be used as the <style>.
  256. */
  257. mxCell.prototype.setStyle = function(style)
  258. {
  259. this.style = style;
  260. };
  261. /**
  262. * Function: isVertex
  263. *
  264. * Returns true if the cell is a vertex.
  265. */
  266. mxCell.prototype.isVertex = function()
  267. {
  268. return this.vertex != 0;
  269. };
  270. /**
  271. * Function: setVertex
  272. *
  273. * Specifies if the cell is a vertex. This should only be assigned at
  274. * construction of the cell and not be changed during its lifecycle.
  275. *
  276. * Parameters:
  277. *
  278. * vertex - Boolean that specifies if the cell is a vertex.
  279. */
  280. mxCell.prototype.setVertex = function(vertex)
  281. {
  282. this.vertex = vertex;
  283. };
  284. /**
  285. * Function: isEdge
  286. *
  287. * Returns true if the cell is an edge.
  288. */
  289. mxCell.prototype.isEdge = function()
  290. {
  291. return this.edge != 0;
  292. };
  293. /**
  294. * Function: setEdge
  295. *
  296. * Specifies if the cell is an edge. This should only be assigned at
  297. * construction of the cell and not be changed during its lifecycle.
  298. *
  299. * Parameters:
  300. *
  301. * edge - Boolean that specifies if the cell is an edge.
  302. */
  303. mxCell.prototype.setEdge = function(edge)
  304. {
  305. this.edge = edge;
  306. };
  307. /**
  308. * Function: isConnectable
  309. *
  310. * Returns true if the cell is connectable.
  311. */
  312. mxCell.prototype.isConnectable = function()
  313. {
  314. return this.connectable != 0;
  315. };
  316. /**
  317. * Function: setConnectable
  318. *
  319. * Sets the connectable state.
  320. *
  321. * Parameters:
  322. *
  323. * connectable - Boolean that specifies the new connectable state.
  324. */
  325. mxCell.prototype.setConnectable = function(connectable)
  326. {
  327. this.connectable = connectable;
  328. };
  329. /**
  330. * Function: isVisible
  331. *
  332. * Returns true if the cell is visibile.
  333. */
  334. mxCell.prototype.isVisible = function()
  335. {
  336. return this.visible != 0;
  337. };
  338. /**
  339. * Function: setVisible
  340. *
  341. * Specifies if the cell is visible.
  342. *
  343. * Parameters:
  344. *
  345. * visible - Boolean that specifies the new visible state.
  346. */
  347. mxCell.prototype.setVisible = function(visible)
  348. {
  349. this.visible = visible;
  350. };
  351. /**
  352. * Function: isCollapsed
  353. *
  354. * Returns true if the cell is collapsed.
  355. */
  356. mxCell.prototype.isCollapsed = function()
  357. {
  358. return this.collapsed != 0;
  359. };
  360. /**
  361. * Function: setCollapsed
  362. *
  363. * Sets the collapsed state.
  364. *
  365. * Parameters:
  366. *
  367. * collapsed - Boolean that specifies the new collapsed state.
  368. */
  369. mxCell.prototype.setCollapsed = function(collapsed)
  370. {
  371. this.collapsed = collapsed;
  372. };
  373. /**
  374. * Function: getParent
  375. *
  376. * Returns the cell's parent.
  377. */
  378. mxCell.prototype.getParent = function()
  379. {
  380. return this.parent;
  381. };
  382. /**
  383. * Function: setParent
  384. *
  385. * Sets the parent cell.
  386. *
  387. * Parameters:
  388. *
  389. * parent - <mxCell> that represents the new parent.
  390. */
  391. mxCell.prototype.setParent = function(parent)
  392. {
  393. this.parent = parent;
  394. };
  395. /**
  396. * Function: getTerminal
  397. *
  398. * Returns the source or target terminal.
  399. *
  400. * Parameters:
  401. *
  402. * source - Boolean that specifies if the source terminal should be
  403. * returned.
  404. */
  405. mxCell.prototype.getTerminal = function(source)
  406. {
  407. return (source) ? this.source : this.target;
  408. };
  409. /**
  410. * Function: setTerminal
  411. *
  412. * Sets the source or target terminal and returns the new terminal.
  413. *
  414. * Parameters:
  415. *
  416. * terminal - <mxCell> that represents the new source or target terminal.
  417. * isSource - Boolean that specifies if the source or target terminal
  418. * should be set.
  419. */
  420. mxCell.prototype.setTerminal = function(terminal, isSource)
  421. {
  422. if (isSource)
  423. {
  424. this.source = terminal;
  425. }
  426. else
  427. {
  428. this.target = terminal;
  429. }
  430. return terminal;
  431. };
  432. /**
  433. * Function: getChildCount
  434. *
  435. * Returns the number of child cells.
  436. */
  437. mxCell.prototype.getChildCount = function()
  438. {
  439. return (this.children == null) ? 0 : this.children.length;
  440. };
  441. /**
  442. * Function: getIndex
  443. *
  444. * Returns the index of the specified child in the child array.
  445. *
  446. * Parameters:
  447. *
  448. * child - Child whose index should be returned.
  449. */
  450. mxCell.prototype.getIndex = function(child)
  451. {
  452. return mxUtils.indexOf(this.children, child);
  453. };
  454. /**
  455. * Function: getChildAt
  456. *
  457. * Returns the child at the specified index.
  458. *
  459. * Parameters:
  460. *
  461. * index - Integer that specifies the child to be returned.
  462. */
  463. mxCell.prototype.getChildAt = function(index)
  464. {
  465. return (this.children == null) ? null : this.children[index];
  466. };
  467. /**
  468. * Function: insert
  469. *
  470. * Inserts the specified child into the child array at the specified index
  471. * and updates the parent reference of the child. If not childIndex is
  472. * specified then the child is appended to the child array. Returns the
  473. * inserted child.
  474. *
  475. * Parameters:
  476. *
  477. * child - <mxCell> to be inserted or appended to the child array.
  478. * index - Optional integer that specifies the index at which the child
  479. * should be inserted into the child array.
  480. */
  481. mxCell.prototype.insert = function(child, index)
  482. {
  483. if (child != null)
  484. {
  485. if (index == null)
  486. {
  487. index = this.getChildCount();
  488. if (child.getParent() == this)
  489. {
  490. index--;
  491. }
  492. }
  493. child.removeFromParent();
  494. child.setParent(this);
  495. if (this.children == null)
  496. {
  497. this.children = [];
  498. this.children.push(child);
  499. }
  500. else
  501. {
  502. this.children.splice(index, 0, child);
  503. }
  504. }
  505. return child;
  506. };
  507. /**
  508. * Function: remove
  509. *
  510. * Removes the child at the specified index from the child array and
  511. * returns the child that was removed. Will remove the parent reference of
  512. * the child.
  513. *
  514. * Parameters:
  515. *
  516. * index - Integer that specifies the index of the child to be
  517. * removed.
  518. */
  519. mxCell.prototype.remove = function(index)
  520. {
  521. var child = null;
  522. if (this.children != null && index >= 0)
  523. {
  524. child = this.getChildAt(index);
  525. if (child != null)
  526. {
  527. this.children.splice(index, 1);
  528. child.setParent(null);
  529. }
  530. }
  531. return child;
  532. };
  533. /**
  534. * Function: removeFromParent
  535. *
  536. * Removes the cell from its parent.
  537. */
  538. mxCell.prototype.removeFromParent = function()
  539. {
  540. if (this.parent != null)
  541. {
  542. var index = this.parent.getIndex(this);
  543. this.parent.remove(index);
  544. }
  545. };
  546. /**
  547. * Function: getEdgeCount
  548. *
  549. * Returns the number of edges in the edge array.
  550. */
  551. mxCell.prototype.getEdgeCount = function()
  552. {
  553. return (this.edges == null) ? 0 : this.edges.length;
  554. };
  555. /**
  556. * Function: getEdgeIndex
  557. *
  558. * Returns the index of the specified edge in <edges>.
  559. *
  560. * Parameters:
  561. *
  562. * edge - <mxCell> whose index in <edges> should be returned.
  563. */
  564. mxCell.prototype.getEdgeIndex = function(edge)
  565. {
  566. return mxUtils.indexOf(this.edges, edge);
  567. };
  568. /**
  569. * Function: getEdgeAt
  570. *
  571. * Returns the edge at the specified index in <edges>.
  572. *
  573. * Parameters:
  574. *
  575. * index - Integer that specifies the index of the edge to be returned.
  576. */
  577. mxCell.prototype.getEdgeAt = function(index)
  578. {
  579. return (this.edges == null) ? null : this.edges[index];
  580. };
  581. /**
  582. * Function: insertEdge
  583. *
  584. * Inserts the specified edge into the edge array and returns the edge.
  585. * Will update the respective terminal reference of the edge.
  586. *
  587. * Parameters:
  588. *
  589. * edge - <mxCell> to be inserted into the edge array.
  590. * isOutgoing - Boolean that specifies if the edge is outgoing.
  591. */
  592. mxCell.prototype.insertEdge = function(edge, isOutgoing)
  593. {
  594. if (edge != null)
  595. {
  596. edge.removeFromTerminal(isOutgoing);
  597. edge.setTerminal(this, isOutgoing);
  598. if (this.edges == null ||
  599. edge.getTerminal(!isOutgoing) != this ||
  600. mxUtils.indexOf(this.edges, edge) < 0)
  601. {
  602. if (this.edges == null)
  603. {
  604. this.edges = [];
  605. }
  606. this.edges.push(edge);
  607. }
  608. }
  609. return edge;
  610. };
  611. /**
  612. * Function: removeEdge
  613. *
  614. * Removes the specified edge from the edge array and returns the edge.
  615. * Will remove the respective terminal reference from the edge.
  616. *
  617. * Parameters:
  618. *
  619. * edge - <mxCell> to be removed from the edge array.
  620. * isOutgoing - Boolean that specifies if the edge is outgoing.
  621. */
  622. mxCell.prototype.removeEdge = function(edge, isOutgoing)
  623. {
  624. if (edge != null)
  625. {
  626. if (edge.getTerminal(!isOutgoing) != this &&
  627. this.edges != null)
  628. {
  629. var index = this.getEdgeIndex(edge);
  630. if (index >= 0)
  631. {
  632. this.edges.splice(index, 1);
  633. }
  634. }
  635. edge.setTerminal(null, isOutgoing);
  636. }
  637. return edge;
  638. };
  639. /**
  640. * Function: removeFromTerminal
  641. *
  642. * Removes the edge from its source or target terminal.
  643. *
  644. * Parameters:
  645. *
  646. * isSource - Boolean that specifies if the edge should be removed from its
  647. * source or target terminal.
  648. */
  649. mxCell.prototype.removeFromTerminal = function(isSource)
  650. {
  651. var terminal = this.getTerminal(isSource);
  652. if (terminal != null)
  653. {
  654. terminal.removeEdge(this, isSource);
  655. }
  656. };
  657. /**
  658. * Function: hasAttribute
  659. *
  660. * Returns true if the user object is an XML node that contains the given
  661. * attribute.
  662. *
  663. * Parameters:
  664. *
  665. * name - Name of the attribute.
  666. */
  667. mxCell.prototype.hasAttribute = function(name)
  668. {
  669. var userObject = this.getValue();
  670. return (userObject != null &&
  671. userObject.nodeType == mxConstants.NODETYPE_ELEMENT && userObject.hasAttribute) ?
  672. userObject.hasAttribute(name) : userObject.getAttribute(name) != null;
  673. };
  674. /**
  675. * Function: getAttribute
  676. *
  677. * Returns the specified attribute from the user object if it is an XML
  678. * node.
  679. *
  680. * Parameters:
  681. *
  682. * name - Name of the attribute whose value should be returned.
  683. * defaultValue - Optional default value to use if the attribute has no
  684. * value.
  685. */
  686. mxCell.prototype.getAttribute = function(name, defaultValue)
  687. {
  688. var userObject = this.getValue();
  689. var val = (userObject != null &&
  690. userObject.nodeType == mxConstants.NODETYPE_ELEMENT) ?
  691. userObject.getAttribute(name) : null;
  692. return (val != null) ? val : defaultValue;
  693. };
  694. /**
  695. * Function: setAttribute
  696. *
  697. * Sets the specified attribute on the user object if it is an XML node.
  698. *
  699. * Parameters:
  700. *
  701. * name - Name of the attribute whose value should be set.
  702. * value - New value of the attribute.
  703. */
  704. mxCell.prototype.setAttribute = function(name, value)
  705. {
  706. var userObject = this.getValue();
  707. if (userObject != null &&
  708. userObject.nodeType == mxConstants.NODETYPE_ELEMENT)
  709. {
  710. userObject.setAttribute(name, value);
  711. }
  712. };
  713. /**
  714. * Function: clone
  715. *
  716. * Returns a clone of the cell. Uses <cloneValue> to clone
  717. * the user object. All fields in <mxTransient> are ignored
  718. * during the cloning.
  719. */
  720. mxCell.prototype.clone = function()
  721. {
  722. var clone = mxUtils.clone(this, this.mxTransient);
  723. clone.setValue(this.cloneValue());
  724. return clone;
  725. };
  726. /**
  727. * Function: cloneValue
  728. *
  729. * Returns a clone of the cell's user object.
  730. */
  731. mxCell.prototype.cloneValue = function()
  732. {
  733. var value = this.getValue();
  734. if (value != null)
  735. {
  736. if (typeof(value.clone) == 'function')
  737. {
  738. value = value.clone();
  739. }
  740. else if (!isNaN(value.nodeType))
  741. {
  742. value = value.cloneNode(true);
  743. }
  744. }
  745. return value;
  746. };
  747. __mxOutput.mxCell = typeof mxCell !== 'undefined' ? mxCell : undefined;