Source: classes/elements/branch.js

  1. /**
  2.  * @class
  3.  * @classdesc Represents the line connecting two nodes.
  4.  * @extends Syntree.Element
  5.  * @extends Syntree.SelectableElement
  6.  */
  7. Syntree.Branch = function(parent,child) {
  8.     parent = Syntree.Lib.checkArg(parent, 'node');
  9.     child = Syntree.Lib.checkArg(child, 'node');
  10.     child.parentBranch = this;
  11.     parent.childBranches.push(this);
  12.     this.parent = parent;
  13.     this.child = child;
  14.     this.triangle = false;
  16.     // Syntree.SelectableElement.call(this);
  17.     Syntree.Lib.extend(Syntree.SelectableElement,Syntree.Branch,this);
  18. }
  20. Syntree.Branch.prototype.createGraphic = function() {
  21.     this.startPoint = this.parent.getPosition();
  22.     this.endPoint = this.child.getPosition();
  24.     var shadowLine = Syntree.snap.line(
  25.         this.startPoint.x,
  26.         this.startPoint.y,
  27.         this.endPoint.x,
  28.         this.endPoint.y
  29.     );
  31.     shadowLine.attr({
  32.         stroke: 'lightgrey',
  33.         strokeWidth: '10px',
  34.         class: 'branch-shadow',
  35.         id: 'branch-shadow-'+this.id,
  36.     });
  38.     var line = Syntree.snap.line(
  39.     );
  41.     line.attr({
  42.         stroke:'black',
  43.         class: 'branch',
  44.         id: 'branch-'+this.id,
  45.     });
  47.     var triangle = Syntree.snap.path(this.getTrianglePath());
  48.     triangle.attr({
  49.         stroke: 'black',
  50.         fill: 'none',
  51.         class: 'triangle',
  52.         id: 'triangle-' + this.id,
  53.     })
  55.     var mid = this.getMidPoint();
  56.     var triangleButton = Syntree.snap.image(
  57.         '/resources/triangle_button_triangle.png',
  58.         mid.x,
  59.         mid.y,
  60.         15,
  61.         15
  62.     );
  63.     triangleButton.attr({
  64.         class: 'triangle-button',
  65.         id: 'triangle-button-'+this.id,
  66.     })
  68.     var config_matrix = {
  69.         elements_to_add: {
  70.             line: {
  71.                 el_obj: line,
  72.                 include_in_svg_string: true,
  73.             },
  74.             shadowLine: {
  75.                 el_obj: shadowLine,
  76.             },
  77.             triangle: {
  78.                 el_obj: triangle,
  79.             },
  80.             triangleButton: {
  81.                 el_obj: triangleButton,
  82.             },
  83.         },
  84.         states_synced: {
  85.             selected: false,
  86.             triangle: false,
  87.             parentPosition: false,
  88.             childPosition: false,
  89.         },
  90.         data_object: this,
  91.         update_map: {
  92.             triangle: {
  93.                 state_name: 'triangle',
  94.                 handler: function(d,g) {
  95.                     if (d.triangle) {
  96.                         g.getEl('triangle').attr({
  97.                             path: d.getTrianglePath(),
  98.                         });
  99.                         g.getEl('line').attr({
  100.                             strokeWidth: 0,
  101.                         });
  102.                         g.getEl('shadowLine').attr({
  103.                             strokeWidth: 0,
  104.                         });
  105.                         g.getEl('triangleButton').attr({
  106.                             href: '/resources/triangle_button_triangle.png',
  107.                         });
  108.                     } else {
  109.                         g.getEl('triangle').attr({
  110.                             path: '',
  111.                         });
  112.                         g.getEl('line').attr({
  113.                             strokeWidth: 1,
  114.                         });
  115.                         g.getEl('shadowLine').attr({
  116.                             strokeWidth: 10,
  117.                         });
  118.                         g.getEl('triangleButton').attr({
  119.                             href: '/resources/triangle_button_branch.png',
  120.                         });
  121.                     }
  122.                 }
  123.             },
  124.             selected: {
  125.                 state_name: 'selected',
  126.                 handler: 'boolean',
  127.                 elements: {
  128.                     shadowLine: {
  129.                         stateTrueAttrs: {
  130.                             opacity: 1,
  131.                         },
  132.                         stateFalseAttrs: {
  133.                             opacity: 0,
  134.                         },
  135.                     },
  136.                     triangle: {
  137.                         stateTrueAttrs: {
  138.                             fill: 'lightgrey',
  139.                         },
  140.                         stateFalseAttrs: {
  141.                             fill: 'white',
  142.                         }
  143.                     },
  144.                     triangleButton: {
  145.                         stateTrueAttrs: {
  146.                             visibility: 'visible',
  147.                         },
  148.                         stateFalseAttrs: {
  149.                             visibility: 'hidden',
  150.                         },
  151.                     },
  152.                 }
  153.             },
  154.             parentPosition: {
  155.                 state_name: 'parentPosition',
  156.                 handler: function(d,g) {
  157.                     d.startPoint = d.parent.getPosition();
  158.                     var pBBox = d.parent.getLabelBBox();
  159.                     g.getEl('line').attr({
  160.                         // x1: d.startPoint.x,
  161.                         x1: pBBox.cx,
  162.                         y1: pBBox.y2 + 5,
  163.                         // y1: d.startPoint.y + (pBBox.height/2),
  164.                     });
  165.                     g.getEl('shadowLine').attr({
  166.                         x1: pBBox.cx,
  167.                         y1: pBBox.y2 + 5,
  168.                         // x1: d.startPoint.x,
  169.                         // y1: d.startPoint.y + (pBBox.height/2),
  170.                     });
  171.                 }
  172.             },
  173.             childPosition: {
  174.                 state_name: 'childPosition',
  175.                 handler: function(d,g) {
  176.                     d.endPoint = d.child.getPosition();
  177.                     g.getEl('shadowLine').attr({
  178.                         // x2: d.endPoint.x,
  179.                         // x2: cBBox.x,
  180.                         // y2: d.endPoint.y - (cBBox.height/2),
  181.                         // y2: cBBox.y,
  182.                     });
  183.                 }
  184.             },
  185.             '#default': function(d,g) {
  186.                 var cBBox = d.child.getLabelBBox();
  187.                 if (Syntree.Lib.checkType(cBBox.cx, 'number')) {
  188.                     g.getEl('line').attr({
  189.                         // x2: d.endPoint.x,
  190.                         x2: cBBox.cx,
  191.                         y2: cBBox.y - 5,
  192.                         // y2: d.endPoint.y - (cBBox.height/2),
  193.                     });
  194.                     g.getEl('shadowLine').attr({
  195.                         // x2: d.endPoint.x,
  196.                         x2: cBBox.cx,
  197.                         // y2: d.endPoint.y - (cBBox.height/2),
  198.                         y2: cBBox.y - 5,
  199.                     });
  200.                 }
  201.                 if (d.triangle) {
  202.                     g.getEl('triangle').attr({
  203.                         path: d.getTrianglePath(),
  204.                     });
  205.                 }
  206.                 if (d.selected) {
  207.                     var mid = d.getMidPoint();
  208.                     g.getEl('triangleButton').attr({
  209.                         x: mid.x-7.5,
  210.                         y: mid.y-7.5,
  211.                     })
  212.                 }
  213.             }
  214.         }
  215.     }
  216.     this.graphic = new Syntree.Graphic(config_matrix);
  217. }
  219. Syntree.Branch.prototype.toString = function() {
  220.     return '[object Branch]'
  221. }
  223. Syntree.Branch.prototype.__delete = function() {
  224.     this.parent.childBranches.splice(this.parent.childBranches.indexOf(this), 1);
  225. }
  227. Syntree.Branch.prototype.getMidPoint = function() {
  228.     var s = this.getStartPoint();
  229.     var e = this.getEndPoint();
  231.     return {
  232.         x: (s.x + e.x)/2,
  233.         y: (s.y + e.y)/2,
  234.     }
  235. }
  237. Syntree.Branch.prototype.triangleToggle = function() {
  238.     if (this.triangle) {
  239.         this.triangle = false;
  240.         this.graphic.unsync('triangle');
  241.     } else {
  242.         this.triangle = true;
  243.         this.graphic.unsync('triangle');
  244.     }
  245.     this.updateGraphics();
  246. }
  248. Syntree.Branch.prototype.getStartPoint = function() {
  249.     return {
  250.         x: this.parent.getPosition().x,
  251.         y: this.parent.getLabelBBox().y2 + 5,
  252.     }
  253. }
  255. Syntree.Branch.prototype.getEndPoint = function() {
  256.     return {
  257.         x: this.child.getPosition().x,
  258.         y: this.child.getLabelBBox().y - 5,
  259.     }
  260. }
  262. Syntree.Branch.prototype.getTrianglePath = function() {
  263.     var start = this.startPoint;
  264.     start.y = this.parent.getLabelBBox().y2 + 5;
  265.     var cBBox = this.child.getLabelBBox();
  266.     var botLeft = {
  267.         x: cBBox.x,
  268.         y: cBBox.y,
  269.     }
  270.     var botRight = {
  271.         x: cBBox.x2,
  272.         y: cBBox.y,
  273.     }
  275.     s = 'M ' + start.x + ' ' + start.y + ', ';
  276.     s += 'L ' + botLeft.x + ' ' + (botLeft.y-5) + ', ';
  277.     s += 'L ' + botRight.x + ' ' + (botRight.y-5) + ', ';
  278.     s += 'L ' + start.x + ' ' + start.y + ', ';
  279.     return s;
  280. }