cds-ui/client/JointJS-POC-In-Progress/app.component.ts

declare var require: any
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import * as _ from 'lodash';
const joint = require('../../node_modules/jointjs/dist/joint.js');


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'jointJS-designer';

  public graph: any;
  public paper: any;
  public rect: any;
  public rect2: any;
  public link: any;

  public stencilGraph: any;
  public stencilPaper: any;

  public selectedElement = {
    attributes: {
      attrs: {
        label: {
          text: 'abc'
        }
      }
    }
  };

  grapJson: any;
  sourceMode = false;

  constructor() {

  }

  ngOnInit() {
    // this.creatElementWithPorts();
    // this.dragCopyPlainElements();
    this.sourceMode = false;
    this.dragCopyElementsWithPort();
    // this.newDragCopy();

    this.createContainerElements();
  }

  creatElementWithPorts() {
    // working code

    // create graph
    let elementList: any[] = [];
    // this.graph = new joint.dia.Graph;

    // // create paper
    // this.paper = new joint.dia.Paper({
    //   el: document.getElementById('paper'),
    //   width: 1000,
    //   height: 1000,
    //   model: this.graph,
    //   gridSize: 2,
    //   drawGrid: true
    // });

    // this.paper.setGrid({
    //   name: 'dot',
    //   args:
    //     { color: 'black', thickness: 2, scaleFactor: 8 }

    // }).drawGrid();

    // create element
    this.rect = new joint.shapes.basic.Rect({
      position: { x: 100, y: 30 },
      size: { width: 100, height: 100 },
      attrs: { rect: { fill: 'white' }, text: { text: 'my box', fill: 'white' } }
    });
    this.rect.translate(100, 50);
    elementList.push(this.rect);

    this.rect.position(10, 10);
    // clone element
    // this.rect2 = this.rect.clone();
    // this.rect2.translate(180);
    // elementList.push(this.rect2);

    // Create link
    // this.link = new joint.dia.Link({
    //   source: { id: this.rect.id },
    //   target: { id: this.rect2.id }
    // });


    // create circle
    var circle = new joint.shapes.standard.Circle();
    circle.resize(100, 100);
    circle.position(180, 10);
    circle.attr('root/title', 'joint.shapes.standard.Circle');
    circle.attr('label/text', 'Circle');
    circle.attr('body/fill', 'lightblue');
    elementList.push(circle);

    // create link
    var ellipse = new joint.shapes.standard.Ellipse();
    ellipse.resize(150, 100);
    ellipse.position(180, 150);
    ellipse.attr('root/title', 'joint.shapes.standard.Ellipse');
    ellipse.attr('label/text', 'Ellipse');
    ellipse.attr('body/fill', 'lightblue');
    elementList.push(ellipse);

    // rectangle with header
    var headeredRectangle = new joint.shapes.standard.HeaderedRectangle();
    headeredRectangle.resize(150, 100);
    headeredRectangle.position(10, 280);
    headeredRectangle.attr('root/title', 'joint.shapes.standard.HeaderedRectangle');
    headeredRectangle.attr('header/fill', 'lightgray');
    headeredRectangle.attr('headerText/text', 'Header');
    headeredRectangle.attr('bodyText/text', 'Headered\nRectangle');
    elementList.push(headeredRectangle);

    let m1 = new joint.shapes.devs.Model({
      position: { x: 200, y: 280 },
      size: { width: 90, height: 90 },
      inPorts: ['in1', 'in2'],
      outPorts: ['out', 'out2'],
      ports: {
        groups: {
          'in': {
            attrs: {
              '.port-body': {
                fill: '#16A085'
              }
            }
          },
          'out': {
            attrs: {
              '.port-body': {
                fill: '#E74C3C'
              }
            }
          }
        }
      },
      attrs: {
        '.label': { text: 'Model', 'ref-x': .5, 'ref-y': .2 },
        rect: { fill: 'white' }
      }
    });
    elementList.push(m1);

    //container element
    let c1 = new joint.shapes.devs.Coupled({
      position: {
          x: 150,
          y: 470
      },
      size: {
          width: 200,
          height: 200
      }
    });

    c1.set('inPorts', ['in']);
  c1.set('outPorts', ['out 1', 'out 2']);
  c1.attr({
    '.body': {
        'rx': 6,
        'ry': 6
    }
});
  elementList.push(c1);
  // circle.position(10, 150);
  var a1 = new joint.shapes.devs.Atomic({
    position: {
        x: 10,
        y: 150
    },
    inPorts: ['xy'],
    outPorts: ['x', 'y']
  });

  a1.attr({
    '.body': {
        'rx': 6,
        'ry': 6
    }
  });

  elementList.push(a1);

    
    return elementList;
  }

  dragCopyPlainElements() {
    // Canvas where sape are dropped
    this.graph = new joint.dia.Graph,
      this.paper = new joint.dia.Paper({
        el: $('#paper'),
        model: this.graph
      });

    // Canvas from which you take shapes
    this.stencilGraph = new joint.dia.Graph,
      this.stencilPaper = new joint.dia.Paper({
        el: $('#stencil'),
        height: 60,
        model: this.stencilGraph,
        interactive: false
      });

    var r1 = new joint.shapes.basic.Rect({
      position: {
        x: 10,
        y: 10
      },
      size: {
        width: 100,
        height: 40
      },
      attrs: {
        text: {
          text: 'Rect1'
        }
      }
    });
    var r2 = new joint.shapes.basic.Rect({
      position: {
        x: 120,
        y: 10
      },
      size: {
        width: 100,
        height: 40
      },
      attrs: {
        text: {
          text: 'Rect2'
        }
      }
    });
    this.stencilGraph.addCells([r1, r2]);

    let _this = this;

    this.stencilPaper.on('cell:pointerdown', function (cellView, e, x, y) {
      $('body').append('<div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>');
      var flyGraph = new joint.dia.Graph,
        flyPaper = new joint.dia.Paper({
          el: $('#flyPaper'),
          model: flyGraph,
          interactive: false
        }),
        flyShape = cellView.model.clone(),
        pos = cellView.model.position(),
        offset = {
          x: x - pos.x,
          y: y - pos.y
        };

      flyShape.position(0, 0);
      flyGraph.addCell(flyShape);
      $("#flyPaper").offset({
        left: e.pageX - offset.x,
        top: e.pageY - offset.y
      });
      $('body').on('mousemove.fly', function (e) {
        $("#flyPaper").offset({
          left: e.pageX - offset.x,
          top: e.pageY - offset.y
        });
      });
      $('body').on('mouseup.fly', function (e) {
        var x = e.pageX,
          y = e.pageY,
          target = _this.paper.$el.offset();

        // Dropped over paper ?
        if (x > target.left && x < target.left + _this.paper.$el.width() && y > target.top && y < target.top + _this.paper.$el.height()) {
          var s = flyShape.clone();
          s.position(x - target.left - offset.x, y - target.top - offset.y);
          _this.graph.addCell(s);
        }
        $('body').off('mousemove.fly').off('mouseup.fly');
        flyShape.remove();
        $('#flyPaper').remove();
      });
    })
  }

  dragCopyElementsWithPort() {
    // Canvas where sape are dropped
    
    this.graph = new joint.dia.Graph,
      this.paper = new joint.dia.Paper({
        el: $('#paper'),
        model: this.graph,
        height: 700,
        width: 1000,
        gridSize: 2,
        drawGrid: true
      });

    // create paper
    // this.paper = new joint.dia.Paper({
    //   el: document.getElementById('paper'),
    //   width: 1000,
    //   height: 1000,
    //   model: this.graph,
    //   gridSize: 2,
    //   drawGrid: true
    // });

    this.paper.setGrid({
      name: 'dot',
      args:
        { color: 'black', thickness: 2, scaleFactor: 8 }

    }).drawGrid();

    // Canvas from which you take shapes
    this.stencilGraph = new joint.dia.Graph,
      this.stencilPaper = new joint.dia.Paper({
        el: $('#stencil'),
        height: 700,
        width: 382,
        model: this.stencilGraph,
        interactive: false
      });      
    
      let elementWithPort = this.creatElementWithPorts();
      // let elementWithPort = this.createCustomElement();
      // let elementWithPort = this.myCustomElementGenerator();

      
    
    elementWithPort.forEach(element => {
      this.stencilGraph.addCell(element);
    });
    
    let _this = this;
    this.stencilPaperEventListeners(_this);
    this.drawAreapaperEventListerners();
  }

  resetAll(paper) {
    this.paper.drawBackground({
      color: 'white'
    })

    var elements = this.paper.model.getElements();
    for (var i = 0, ii = elements.length; i < ii; i++) {
      var currentElement = elements[i];
      currentElement.attr('body/stroke', 'black');
    }

    var links = this.paper.model.getLinks();
    for (var j = 0, jj = links.length; j < jj; j++) {
      var currentLink = links[j];
      currentLink.attr('line/stroke', 'black');
      currentLink.label(0, {
        attrs: {
          body: {
            stroke: 'black'
          }
        }
      })
    }
  }

  onDrag(evt) {
    // transform client to paper coordinates
    var p = evt.data.paper.snapToGrid({
      x: evt.clientX,
      y: evt.clientY
    });
    // manually execute the linkView mousemove handler
    evt.data.view.pointermove(evt, p.x, p.y);
  }

  onDragEnd(evt) {
    // manually execute the linkView mouseup handler
    evt.data.view.pointerup(evt);
    $(document).off('.example');
  }

  stencilPaperEventListeners(_this) {
    this.stencilPaper.on('cell:pointerdown', function (cellView, e, x, y) {
      $('body').append('<div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>');
      var flyGraph = new joint.dia.Graph,
        flyPaper = new joint.dia.Paper({
          el: $('#flyPaper'),
          model: flyGraph,
          interactive: true
        }),
        flyShape = cellView.model.clone(),
        pos = cellView.model.position(),
        offset = {
          x: x - pos.x,
          y: y - pos.y
        };

      flyShape.position(0, 0);
      flyGraph.addCell(flyShape);
      $("#flyPaper").offset({
        left: e.pageX - offset.x,
        top: e.pageY - offset.y
      });
      $('body').on('mousemove.fly', function (e) {
        $("#flyPaper").offset({
          left: e.pageX - offset.x,
          top: e.pageY - offset.y
        });
      });
      let elementabove, elementBelow;
      $('body').on('mouseup.fly', function (e) {
        console.log(this);        
        var x = e.pageX,
          y = e.pageY,
          target = _this.paper.$el.offset();

        // Dropped over paper ?
        if (x > target.left && x < target.left + _this.paper.$el.width() && y > target.top && y < target.top + _this.paper.$el.height()) {
          var s = flyShape.clone();

          // var coordinates = new g.Point(x, y);
          // elementabove = s;
          // elementBelow =  _this.paper.model.findModelsFromPoint(coordinates).find(function(el) {
          //   return (el.id !== elementabove.id);
          // });
          // elementBelow =_this.paper.findModelsFromPoint(coordinates).find(function(el) {
          //     return (el.id !== elementabove.id);
          //   });
          // elementBelow.embed(elementabove);

          s.position(x - target.left - offset.x, y - target.top - offset.y);
          _this.graph.addCell(s);
          // let elementssss = (_this.graph.getElements());
          // console.log("elementsss", elementssss);
          // let elementBelow = elementssss[0];
          // let elementAbove;
          // if(elementssss[1]) {
          //   elementAbove = elementssss[1];
          //   elementBelow.embed(elementabove);
          // }
        }
        $('body').off('mousemove.fly').off('mouseup.fly');
        flyShape.remove();
        $('#flyPaper').remove();
      });
      _this.paper.on('mouse')
    })
  }

  drawAreapaperEventListerners() {
    // create event listerners
    let _this = this;
    this.paper.on('element:pointerdblclick', function (elementView) {
      _this.resetAll(this);
      _this.selectedElement = elementView.model;
      var currentElement = elementView.model;
      currentElement.attr('body/stroke', 'orange');
      // currentElement.attr('label/text', "abc");
    });

    this.paper.on('blank:pointerdblclick', function () {
      _this.resetAll(this);

      this.drawBackground({
        color: 'orange'
      });
    });

    this.paper.on('link:pointerclick', function (linkView) {
      _this.resetAll(this);
      let currentElement = linkView.model;
      currentElement.appendLabel({
        attrs: {
          text: {
            text: "Hello to new link!"
          }
        }
      });

    });


    this.paper.on('blank:pointerdown', function (evt, x, y) {
      let linkView = this.getDefaultLink()
        .set({
          'source': { x: x, y: y },
          'target': { x: x, y: y }
        })
        .addTo(this.model)
        .findView(this);
      linkView.startArrowheadMove('target');

      $(document).on({
        'mousemove.example': _this.onDrag,
        'mouseup.example': _this.onDragEnd
      }, {
          // shared data between listeners
          view: linkView,
          paper: this
        });
    });

    this.paper.on({
      // 'element:pointerdown': function(elementView, evt) {

      //   evt.data = elementView.model.position();
      // },
      'element:pointerup': function(elementView, evt, x, y) {
        var coordinates = new g.Point(x, y);
        var elementAbove = elementView.model;
        var elementBelow = this.model.findModelsFromPoint(coordinates).find(function(el) {
                return (el.id !== elementAbove.id);
            });
        if(elementBelow) elementBelow.embed(elementAbove);
      }

    }); //end of my event
  }

  createCustomElement() {
    joint.shapes.html = {};
    joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
      defaults: joint.util.deepSupplement({
          type: 'html.Element',
          attrs: {
              rect: { stroke: 'none', 'fill-opacity': 0 }
          }
      }, joint.shapes.basic.Rect.prototype.defaults)
    });

    // / Create a custom view for that element that displays an HTML div above it.
    // -------------------------------------------------------------------------

    joint.shapes.html.ElementView = joint.dia.ElementView.extend({

          template: [
            '<div class="html-element">',
            '<button class="delete">x</button>',
            '<label></label>',
            '<span></span>', '<br/>',
            '<select><option>--</option><option>one</option><option>two</option></select>',
            '<input type="text" value="I\'m HTML input" />',
            '</div>'
        ].join(''),

        initialize: function() {
          _.bindAll(this, 'updateBox');
          joint.dia.ElementView.prototype.initialize.apply(this, arguments);

          this.$box = $(_.template(this.template)());
          // Prevent paper from handling pointerdown.
          this.$box.find('input,select').on('mousedown click', function(evt) {
              evt.stopPropagation();
          });
          // This is an example of reacting on the input change and storing the input data in the cell model.
          this.$box.find('input').on('change', _.bind(function(evt) {
              this.model.set('input', $(evt.target).val());
          }, this));
          this.$box.find('select').on('change', _.bind(function(evt) {
              this.model.set('select', $(evt.target).val());
          }, this));
          this.$box.find('select').val(this.model.get('select'));
          this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
          // Update the box position whenever the underlying model changes.
          this.model.on('change', this.updateBox, this);
          // Remove the box when the model gets removed from the graph.
          this.model.on('remove', this.removeBox, this);

          this.updateBox();
        },

        render: function() {
          joint.dia.ElementView.prototype.render.apply(this, arguments);
          this.paper.$el.prepend(this.$box);
          this.updateBox();
          return this;
        },

      updateBox: function() {
        // Set the position and dimension of the box so that it covers the JointJS element.
        var bbox = this.model.getBBox();
        // Example of updating the HTML with a data stored in the cell model.
        this.$box.find('label').text(this.model.get('label'));
        this.$box.find('span').text(this.model.get('select'));
        this.$box.css({
            width: bbox.width,
            height: bbox.height,
            left: bbox.x,
            top: bbox.y,
            transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
        });
      },

      removeBox: function(evt) {
        this.$box.remove();
      }
    });

    // Create JointJS elements and add them to the graph as usual.
        // -----------------------------------------------------------

        var el1 = new joint.shapes.html.Element({
          position: { x: 10, y: 10 },
          size: { width: 170, height: 100 },
          label: 'I am HTML',
          select: 'one'
      });

      var el2 = new joint.shapes.html.Element({
        position: { x: 370, y: 160 },
        size: { width: 170, height: 100 },
        label: 'Me too',
        select: 'two'
    });
    var l = new joint.dia.Link({
        source: { id: el1.id },
        target: { id: el2.id },
        attrs: { '.connection': { 'stroke-width': 5, stroke: '#34495E' }}
    });

    let elementArray : any[] = [];
    elementArray.push(el1, el2);
    return elementArray;
  }

  myCustomElementGenerator() {
    var Ellipse = joint.dia.Element.define('examples.Ellipse', {
      // default attributes
      markup: [{
          tagName: 'ellipse',
          selector: 'ellipse' // not necessary but faster
      }],
      attrs: {
          ellipse: {
              fill: 'white',
              stroke: 'black',
              strokeWidth: 4,
              refRx: .5,
              refRy: .5,
              refCx: .5,
              refCy: .5
          }
      }
  });

    var Rectangle = joint.shapes.standard.Rectangle.define('examples.CustomRectangle', {
      markup: [{
        tagName: 'body',
        selector: 'body' // not necessary but faster
      },
      {
        tagName: 'label',
        selector: 'label'
      }],
      attrs: {
        body: {
          rx: 10, // add a corner radius
          ry: 10,
          strokeWidth: 1,
          fill: 'cornflowerblue'
        },
        label: {
          textAnchor: 'left', // align text to left
          refX: 10, // offset text from right edge of model bbox
          fill: 'white',
          fontSize: 18,
          text: 'mad mad mad'
        }
      }
    })
  

  var customElement = (new joint.dia.Element.examples.Ellipse()).position(100, 100).size(120, 50);
    let elementsArray = [];
    elementsArray.push(customElement);

  var customRect = new Rectangle().position(100, 200).size(120, 120);
  elementsArray.push(customRect);
    return elementsArray;
  }

  convertGraphToJson() {
    this.grapJson = JSON.stringify(this.graph.toJSON());
    // this.grapJson = this.graph.toJSON();
    console.log(this.graph.toJSON());
    console.log(this.grapJson);
    this.sourceMode = true;
  }

  setNewValue(event) {
    // this.selectedElement.attr('label/text', event.currentTarget.value);
  }

  convertJsonToGraph() {
    this.sourceMode = false;
  }

  zoomIn() {
    var graphScale = 1;
    graphScale += 0.1;
    this.paper.scale(graphScale, graphScale);
  }

  zoomOut() {
    var graphScale = 1;
    graphScale -= 0.1;
    this.paper.scale(graphScale, graphScale);
  }

  createContainerElements() {
    this.graph = new joint.dia.Graph;

    this.paper = new joint.dia.Paper({

      el: document.getElementById('paper'),
      width: 800,
      height: 400,
      gridSize: 1,
      model: this.graph,
      snapLinks: true,
      linkPinning: false,
      embeddingMode: true,
      clickThreshold: 5,
      defaultConnectionPoint: { name: 'boundary' },
      highlighting: {
          'default': {
              name: 'stroke',
              options: {
                  padding: 6
              }
          },
          'embedding': {
              name: 'addClass',
              options: {
                  className: 'highlighted-parent'
              }
          }
      },
  
      validateEmbedding: function(childView, parentView) {
          return parentView.model instanceof joint.shapes.devs.Coupled;
      },
  
      validateConnection: function(sourceView, sourceMagnet, targetView, targetMagnet) {
          return sourceMagnet != targetMagnet;
      }
  });

  let c1 = new joint.shapes.devs.Coupled({
    position: {
        x: 230,
        y: 50
    },
    size: {
        width: 300,
        height: 300
    }
});

c1.set('inPorts', ['in']);
c1.set('outPorts', ['out 1', 'out 2']);

var a1 = new joint.shapes.devs.Atomic({
  position: {
      x: 360,
      y: 260
  },
  inPorts: ['xy'],
  outPorts: ['x', 'y']
});

var a2 = new joint.shapes.devs.Atomic({
  position: {
      x: 50,
      y: 160
  },
  outPorts: ['out']
});

var a3 = new joint.shapes.devs.Atomic({
  position: {
      x: 650,
      y: 50
  },
  size: {
      width: 100,
      height: 300
  },
  inPorts: ['a', 'b']
});

[c1, a1, a2, a3].forEach(function(element) {
  element.attr({
      '.body': {
          'rx': 6,
          'ry': 6
      }
  });
});



this.graph.addCells([c1, a1, a2, a3]);

c1.embed(a1);

this.connect(a2, 'out', c1, 'in');
this.connect(c1, 'in', a1, 'xy');
this.connect(a1, 'x', c1, 'out 1');
this.connect(a1, 'y', c1, 'out 2');
this.connect(c1, 'out 1', a3, 'a');
this.connect(c1, 'out 2', a3, 'b');

var strokeDasharrayPath = '.body/strokeDasharray';
let _this = this;

this.paper.on('element:pointerdblclick', function(elementView) {
    var element = elementView.model;
    if (element.get('type') === 'devs.Atomic') {
      _this.toggleDelegation(element);
    }
});

this.paper.setInteractivity(function(elementView) {
    return {
        stopDelegation: !elementView.model.attr(strokeDasharrayPath)
    };
});

  
} // function end

  // function
  connect(source, sourcePort, target, targetPort) {

    var link = new joint.shapes.devs.Link({
        source: {
            id: source.id,
            port: sourcePort
        },
        target: {
            id: target.id,
            port: targetPort
        }
    });

    link.addTo(this.graph).reparent();
  }

  toggleDelegation(element) {
    var strokeDasharrayPath = '.body/strokeDasharray';
    element.attr(strokeDasharrayPath, element.attr(strokeDasharrayPath) ? '' : '15,1');
}

createContainerElemnetsByDragDrop() {
  

}
}