lenses-freeform.html

<link rel="import" href="../polymer/polymer.html">


<link rel="import" href="../lens-data-table/lens-data-table.html">


<link rel="import" href="../lenses-component-list/lenses-component-list.html">


<polymer-element name="lenses-freeform" attributes="">
  <template>
    <link rel="stylesheet" href="lenses-freeform.css">

    <core-icon-button id="showDataBtn" class="active" icon="view-module" on-click="{{showDataBtn}}" alt="show component data">
      <span>show component input/output</span>
    </core-icon-button>


    <label class="component-list-label">Drag components into canvas:</label>
    <lenses-component-list id="component_list"></lenses-component-list>

    <div id="input_preview" class="data-preview {{{visible: _showDataTable && _selElement.input && _selElement.input.length>0 } | tokenList }}">
      <template if="{{_showDataTable && _selElement.input && _selElement.input.length>0}}">
        <label>INPUT</label>
        <lens-data-table id="input_table" input="{{_selElement.input}}" class="table"  minimal="true"></lens-data-table>
      </template>
    </div>

    <div id="container"  on-drop="{{droppedInContainer}}" on-dragover="{{draggedOverContainer}}">
      <svg id="svg"></svg>


      <!-- Components and connector dots --> 
      <!--<template if="{{_positioned}}">-->

        <template repeat="{{el, index in _elements}}">
          <div class="wrapper {{el.name}}" id="wrapper-{{el.element.id}}" component-id="{{el.element.id}}" on-click="{{wrapperClicked}}" 
          style="top: {{el.top}}px; left: {{el.left}}px; transform: {{el.transform}}; width: {{el.width}}px; height: {{el.height}}px" 
          on-click="{{wrapperClicked}}" on-dragStart="{{dragStartWrapper}}" on-drag="{{dragWrapper}}" on-dragend="{{dragEndWrapper}}" draggable="true"><!-- on-drop="{{droppedOnInArrow}}" needed? -->

          
            <label>{{el.name}}</label>
            <!--<core-icon-button icon="clear" class="deleteEl {{el.element.id}}" on-click="{{_deleteElement}}"></core-icon-button> -->
            <div  class="deleteEl" component_id="{{el.element.id}}" on-click="{{_deleteElement}}">X</div>
             
            <div class="connectors-in" >
              <!-- Input -->
              
              <ul>
                <template repeat="{{ins in el.element.publish | _checkForInputAttr}}">
                     
                    <li class="{{el.element.id}}-{{ins}} arrow in-arrow" on-dragover="{{dragOverInArrow}}" 
                    on-drop="{{droppedOnInArrow}}" on-dragenter="{{dragEnterInArrow}}" on-dragleave="{{dragLeaveInArrow}}" on-click="{{arrowClicked}}">
                      <div class="inputMarker">
                        <div class="delete" on-click="{{deleteConnection}}">x</div>
                        <span class="drop-zone">{{ins}}</span>
                      </div>
                      <!--{{ins}}-->
                    </li>
                </template>
              </ul>

              <!-- Output -->
            </div>
            <content select="#{{el.id}}"></content>
            <div class="connectors-out" >
              <template if="{{el.element.publish | _checkForOutputAttr}}">
                <div id="{{index}}"  class="{{el.element.id}} arrow out-arrow" 
                  on-drag="{{dragOutArrow}}" on-dragstart="{{dragOutArrowStart}}" on-dragend="{{dragOutArrowEnd}}"  
                   on-click="{{arrowClicked}}" draggable="true">
                  <div class="outputMarker"></div>
                </div>
              </template>
              
            </div>
            <template if="{{el.resizable}}">
              <div class="resize" draggable="true" on-dragStart="{{dragStartResize}}" on-drag="{{dragResize}}" on-dragend="{{dragEndResize}}"></div>
            </template>
          
          </div>
        </template>
    </div> 

    <div id="output_preview" class="data-preview {{{visible: _showDataTable && _selElement.output && _selElement.output.length>0 } | tokenList }}">
      <template if="{{_showDataTable && _selElement.output && _selElement.output.length>0}}">
        <label>OUTPUT</label>
        <lens-data-table id="output_table" input="{{_selElement.output}}" class="table"  minimal="true"></lens-data-table>
      </template>
    </div>       

    
  </template>
  <script>
    Polymer({

      _elements: [],
      _connections: [],

      _selElement: null,

      _snapX: 10,
      _snapY: 10,
      _showDataTable: true,


      domReady: function() {


          this.addEventListener('core-resize', function() {
            this._drawConnections();
          });
      },


      addNewElToConnector: function(newElName, left, top){


        var newEl = document.createElement(newElName);

        this.$.component_list.checkAndImport(newEl, function() {

          newEl.style.width = '100%';
          newEl.style.height = '100%';



          this.appendChild(newEl);

          this._processNewElement(newEl, top, left);

        }.bind(this));


      }, 

      _processNewElement: function(newEl, top, left) {

        newEl.id = this._generateUniqueId(newEl.tagName.toLowerCase());

        var elItem = {  element: newEl, 
                                      id: newEl.id,
                                      name: newEl.tagName.toLowerCase(), 
                                      top: top,
                                      left: left
                                  };


        var info = this.$.component_list.getComponentInfo(newEl.tagName.toLowerCase());

        if(info.resizable || info.category==='visualize') {
          elItem.resizable = true;
        }

        this._elements.push(elItem);

      },

      _deleteElement: function(e) {

        if(confirm('Do you want to remove this element from the sketch?')) {

          var self = this;
          var compId = e.target.getAttribute('component_id');
          var ebmededEl = self.querySelector('#'+compId);
          var elInArray = self.findElById(compId);

          //remove all connections
          self.removeAllConnectionsFromElement(compId)

          // remove element from elements array (which removes it from the shadowDOM)
          var filteredEls = self._elements.filter(function(el) {
              return el.element.id!==compId;
          });
          self._elements = filteredEls;

          // remove elements from th-connector 
          self.removeChild(ebmededEl);
        }


      },

      removeAllConnectionsFromElement: function(elId) {

        var goodConnections = this._connections.filter(function (conn, index) {
          
          //filter if element is source or target of a connection
          return !(conn.source.id===elId || conn.target.id === elId)
           
        });

        this._connections = goodConnections;

        this._drawConnections();


      },


      /********************** Event Handlers Start ********************************/

      draggedOverContainer: function(e) {
        // Needed to enable droppedInContainer
        e.preventDefault();
      },

      droppedInContainer: function(e, detail, selection){
        console.log('droppedInContainer....');
        console.log(e);
        var self = this;

        //dont know why this method is being called instead of resizedragend?!
        if(e.path && e.path.length>0 &&  e.path[0].classList.contains('resize')>0) {
          self.dragResizeEnd(e, detail, selection);

        }

        var dataTransfer = e.dataTransfer.getData('text/plain');

        //data added by lenses-component-list //TODO make better
        if(dataTransfer && dataTransfer.length>0) {
          var dataSeg = dataTransfer.split(',');


          if(dataSeg.length==1) {
            self.addNewElToConnector(dataSeg[0], Math.round(e.offsetX/10)*10, Math.round(e.offsetY/10)*10);

            return;
          } 

        }

      },

      dragStartResize: function(e, details, selection) {
         e.stopPropagation();
      },

      dragResize: function(e, details, selection) {

          var self = this;

          var wrapper = selection.parentNode;
          //var styles = window.getComputedStyle(wrapper);
          // var wrapperTop = parseInt(styles.top.replace('px',''));
          // var wrapperLeft = parseInt(styles.left.replace('px',''));

          // var w =  e.x - wrapperLeft - 65,
          //     h = e.y - wrapperTop - 172;

          var wrapperTop = parseInt(wrapper.getBoundingClientRect().top),
              wrapperLeft = parseInt(wrapper.getBoundingClientRect().left);
          

          var w =  e.x - wrapperLeft,
              h = e.y - wrapperTop;


          // wrapper.style.width = w +'px';
          // wrapper.style.height = h +'px';

          var elementInsideId = wrapper.getAttribute('component-id');//wrapper.id.replace('wrapper-','');
          var elementInside = this.querySelector('#'+elementInsideId);

          var element = this.findElById(elementInsideId);

          element.width = w; 
          element.height = h; 


          self._drawConnections();

          e.stopPropagation();
          e.preventDefault();


        },

        dragResizeEnd: function(e, details, selection) {

          var wrapper = null;

          if(e.path && e.path.length>0 &&  e.path[0].classList.contains('resize')>0) {
            
            wrapper = e.path[0].parentNode;

          }

          var elementInsideId = wrapper.id.replace('wrapper-','');
          var elementInside = this.querySelector('#'+elementInsideId);

          if(typeof elementInside.resize ==='function') {
            elementInside.resize();
          }

        },


        dragStartWrapper: function(e, details, selection) {

          var target = e.target;
          target.setAttribute('start-x', e.x);
          target.setAttribute('start-y', e.y);

          var dragImgEl = document.createElement('span');
          dragImgEl.setAttribute('style','opacity: 0' );
          dragImgEl.textContent = 'a';

          // add it to the document
          document.body.appendChild(dragImgEl);
          e.dataTransfer.setDragImage(dragImgEl,-200,-200);          
          
        },                            

        dragWrapper: function(e, details, selection) {

          if(e.path[0].classList && e.path[0].classList.length>0 && 
            (e.path[0].classList.contains('resize') || e.path[0].classList.contains('arrow'))) {
            return false;
          }

          var target = e.target,
              dx = e.x - (target.getAttribute('start-x') || 0),
              dy = e.y - (target.getAttribute('start-y') || 0);


              // keep the dragged position in the data-x/data-y attributes, add snap residue from previous drag
              var x = (parseFloat(target.getAttribute('data-x')) || 0) + dx + (parseFloat(target.getAttribute('residue-x')) || 0);
              var y = (parseFloat(target.getAttribute('data-y')) || 0) + dy + (parseFloat(target.getAttribute('residue-y')) || 0);

              sx = Math.round(x/this._snapX)*this._snapX;
              sy = Math.round(y/this._snapY)*this._snapY;

              target.setAttribute('residue-x', x - sx );
              target.setAttribute('residue-y', y - sy);


              // translate the element. 
              // last dragMove call passes e.x=0 and e.y=0 which causes neg x,y values. this if avoids that
              if(e.x!==0 ||  e.y!==0)
              {
              /*
                target.style.webkitTransform =
                      target.style.transform = 'translate(' + sx + 'px, ' + sy + 'px)';
              */

                var componentId = target.getAttribute('component-id');

                this.findElById(componentId).transform = 'translate(' + sx + 'px, ' + sy + 'px)';

                // update the posiion attributes
                // 
                target.setAttribute('data-x', sx);
                target.setAttribute('data-y', sy);
                

                target.setAttribute('start-x', e.x);
                target.setAttribute('start-y', e.y);

                this._drawConnections();

              }
                
            
        }, 

        dragEndWrapper: function(e, details, selection) {
          
          
          //if resize is being dragged don't do anything (stopPropagation is not doing anything)
          // if(e.path[0].classList && e.path[0].classList.length>0 && e.path[0].classList.contains('resize')) {
          //   return false;
          // }

          var target = e.target;
          target.setAttribute('residue-x', 0 );
          target.setAttribute('residue-y', 0);

          
        }, 

        wrapperClicked: function(e, detail, selection) {
          var wrapperEl = selection;
          if(this._selWrapper) {
            this._selWrapper.classList.remove('selected-element');
          }
          this._selWrapper = wrapperEl;
          this._selWrapper.classList.add('selected-element');

          var elementId = wrapperEl.id;
          elementId = elementId.substring(8, elementId.length);

          this._selElement = this.findElById(elementId).element;

          // if(this.$.input_table) {
          //   this.$.input_table.input = this._selElement.input;
          // }
          // if(this.$.output_table) {
          //   this.$.output_table.input = this._selElement.output;
          // }

        },         

        dragOutArrowStart: function(e, details, selection) {

          this.draggedEl = selection;
          //to stop wrapper drag to be called
          e.stopPropagation();

          if(!this.svgTop || !this.svgLeft) {

            var svgRect = this.$.svg.getBoundingClientRect();
            this.svgTop = svgRect.top;
            this.svgLeft = svgRect.left;

          }


          this.startPointX = e.x - this.svgLeft;
          this.startPointY = e.y - this.svgTop;

          // create temp bezier
          this._addBezierPath( this.startPointX , this.startPointY , this.startPointX , this.startPointY , 70, 'temp_path');
          //this._addBezierPath( event.x0 , event.y0 , event.x0 , event.y0 , 70, 'temp_path');

        },

        dragOutArrow: function(e, details, selection) {

          var tempPath = this.shadowRoot.querySelector('#temp_path');

          // the last dragMove call passes e.x=0 and e.y=0 which causes neg x,y values. this if avoids that
          if(e.x!==0 ||  e.y!==0)
          {

            var newPath = this._createBezierPath( this.startPointX, this.startPointY , e.x - this.svgLeft  , e.y - this.svgTop  , 70);
            tempPath.setAttribute('d',newPath);
          }               

        },

        dragOutArrowEnd: function(e, details, selection) {

          var tempPath = this.shadowRoot.querySelector('#temp_path');
          if(tempPath) {
            tempPath.parentNode.removeChild(tempPath);
          }
               

        },

        dragOverInArrow: function(e, details, selection) {

          //important! needed to allow drop
          e.preventDefault();

        },  

        dragEnterInArrow: function(e, details, selection) {
          e.target.classList.add('drag-over');
        },                  

        dragLeaveInArrow: function(e, details, selection) {
          e.target.classList.remove('drag-over');
        },                  

        droppedOnInArrow: function(e, details, selection) {

          var self = this;

          e.target.classList.remove('drag-over');

          var className = selection.classList[0],
              targetElementId = className.substring(0, className.lastIndexOf('-') ),   
              targetField = className.substring(className.lastIndexOf('-') + 1, className.length ),      
              source = self.findElById(self.draggedEl.classList[0]),
              target = self.findElById(targetElementId);


          this._connectAttributes(source, 'output', target, targetField);

          self._drawConnections();

          e.stopPropagation();          

        }, 

        arrowClicked: function(e, details, selection) {
          //e.stopPropagation();

          var wrapper = null;
          for(var i = 0; i< e.path.length && !wrapper; i++) {
            if(e.path[i].classList.contains('wrapper')) {
              wrapper = e.path[i];
            }
          } 
          var sourceTarget = e.path[0].classList.contains('inputMarker') ? 'target' : 'source';
          var elementInsideId = wrapper.getAttribute('component-id');

          //var elementInside = this.findElById(elementInsideId);


          var connection = this._connections.filter(function(conn) {
            if(conn[sourceTarget].id===elementInsideId) {
              return true;
            }

          });


          if(connection.length>0) {

            var marker = e.path[0];
            var bezierCssPath = '#container #svg #'+connection[0].source.id+'-'+connection[0].target.id;
            var bezier = this.shadowRoot.querySelector(bezierCssPath);

            if(connection[0].highlighted) {
              connection[0].highlighted = false;

              marker.classList.remove('highlighted');
              bezier.classList.remove('highlighted');

            }
            else {

              connection[0].highlighted = true;

              marker.classList.add('highlighted');
              bezier.classList.add('highlighted');

            }

          }


        },

        deleteConnection: function(e, details, selection) {
          e.stopPropagation();
          if(confirm('Are you sure you want to delete the highlighted connection?')) {

            var wrapper = null;
            for(var i = 0; i< e.path.length && !wrapper; i++) {
              if(e.path[i].classList.contains('wrapper')) {
                wrapper = e.path[i];
              }
            } 
            var elementInsideId = wrapper.getAttribute('component-id');
            this._connections = this._connections.filter(function(connection) {
              return connection.target.id!==elementInsideId;
            });

            var marker = e.path[1]; 
            marker.classList.remove('highlighted');



            this._drawConnections();


          }
        },




      /********************** Event Handlers End ********************************/


        showDataBtn: function() {
            this._showDataTable = !this._showDataTable;
            this.$.showDataBtn.classList.toggle('active');
            [].forEach.call(this.shadowRoot.querySelectorAll('.data-preview'), function(el) {
              el.style.maxHeight = el.style.maxHeight=='0px' ? '100px' : '0px';
            });
        },







      /**
       * The functions which sets the connection (two way binging) between two element attrubutes
       * There is not really a sourc/target distinction in the observer since it is a two way binging (in theory)
       * but the distinction is conceptual and in UI.
       * @param  {[type]} source      Source element
       * @param  {[type]} sourceField The attribute to connect from source element
       * @param  {[type]} target      Target element
       * @param  {[type]} targetField The attribute to connect from target element
       * @return {None}             
       */
      _connectAttributes: function(source, sourceField, target, targetField) {
        var self = this;

        //find the index of connection which has the same target
        var connWithSameTargetIndex = self._connections.reduce(function(value, conn, index) {
            if (conn.target.id===target.id && conn.target.field===targetField) {
              return index;
            }

        }, -1);
        // and remove it from connections array
        if(connWithSameTargetIndex>-1) {
          self._connections.splice(connWithSameTargetIndex,1);
        }


        if (source === target){ //if a bubble was dropped on itself
          alert('You cannot make a connection within the same element');
          return false;
        } else { 

          // make the connection in the elements array
          //target.inputConnectedTo = source;  // not needed
            
          var observer = new PathObserver(source.element, sourceField);  
            
          observer.open(function(newValue, oldValue) {
             target.element[targetField] = newValue;
          });

          var srcClone = {id: source.id, name: source.name, element: source.element};
          var targetClone = {id: target.id, name: target.name, element: target.element};


          
          target.element[targetField] = source.element[sourceField]; 

          targetClone.field = targetField;

          //self.updateConnections();
          
          //push the connections anyways because it will be deleted above.
          self._connections.push({source: srcClone, target: targetClone});

          
          return true;
        }

      },

      _drawConnections: function() {

        var self = this;


        var arrowOffsetY = 7;
        var arrowOffsetX = 7;
        var bezierCurveX = 70;  // the larger the value the smoother the curve


        //clear all paths. since it is not done offten it is fine to do it in a not optimized way
        self.$.svg.innerHTML = '';

        for (var i = 0; i < self._connections.length; i++) {


          var conn = self._connections[i];

          var srcEl = conn.source.element || self.querySelector('#'+conn.source.id); //TODO do this in initialization method
          var targetEl = conn.target.element || self.querySelector('#'+conn.target.id);


          var srcWrapper = self.shadowRoot.querySelector('#wrapper-'+srcEl.id);
          var targetWrapper = self.shadowRoot.querySelector('#wrapper-'+targetEl.id);


          // var srcRect = srcEl.getBoundingClientRect();
          // var targetRect = targetEl.getBoundingClientRect();

          var srcRect = srcWrapper.getBoundingClientRect();
          var targetRect = targetWrapper.getBoundingClientRect();


          var svgRect = self.$.svg.getBoundingClientRect();

          var otherInputOffset = (conn.target.field==='input') ? 0 : 16;

          var startX = srcRect.right - svgRect.left + arrowOffsetX; //srcRect.left + srcRect.width + 30 - containerOffsetX;
          var startY = srcRect.top - svgRect.top + arrowOffsetY;
          var endX = targetRect.left  - svgRect.left - arrowOffsetX;
          var endY = targetRect.top  - svgRect.top + arrowOffsetY + otherInputOffset;


          self._addBezierPath(startX, startY, endX, endY , bezierCurveX, srcEl.id + '-' + targetEl.id, conn.highlighted);
          
        }        

      },


      /**
       * Sacffold a new th-connector from state data. Usage: 
       *  var newConnector = document.createElement('th-connector');
       *  newConnector.scaffoldFromData(elements, connections)
       *  where elements and connections are parsed json files coming form dumpStateDataAsString
       * @param  {Object} elements    elements state data
       * @param  {Object} connections connections
       * @return {None}             
       */
      
      scaffoldFromData: function(elements, connections) {

        //this._elements = elements;

         elements.forEach(function(el) {
            var alreadyExist = this.querySelector('#'+el.id);
            if(!alreadyExist) {
              var domEl =  document.createElement(el.name);

              this.$.component_list.checkAndImport(domEl, function() {

                domEl.style.width = '100%';
                domEl.style.height = '100%';

                domEl.id = el.id;
                
                if(el.name==='th-table-data') {
                  domEl.output = el.output;
                }
                else {
                  Object.keys(domEl.publish).forEach(function(attr) {


                    if(attr!=='input' && attr!=='output' && el[attr]) {
                      domEl[attr] = el[attr]; 
                    }

                               


                  });
                }
                this.appendChild(domEl);
                //this._elements.push(el);

             }.bind(this));

            }

          }.bind(this));

         //delay to make sure position of elements are final
         setTimeout(function() {

          this.setConnections(connections);         

         }.bind(this),500);


        //newConnector._drawConnections()

      },

      setConnections: function(connections) {
        this._connections = connections;


        this._connections.forEach(function(connection) {
          if(!connection.source.element) {
            connection.source.element = this.querySelector('#'+connection.source.id);
          }
          if(!connection.target.element) {
            connection.target.element = this.querySelector('#'+connection.target.id);
          }
          this._connectAttributes(connection.source, 'output', connection.target, 'input');
        }.bind(this));

        this._drawConnections();
      },      

      dumpStateDataAsString: function() {
        var self = this;

        var toDumpEls = _.map(this._elements, function(el) {
          var domObject = el.element;
          var cloned = _.clone(el);  
          Object.keys(domObject.publish).forEach(function(attr) {

            //ignore input attribute and output (except where the component is th-table-data)
            if(attr==='chartData' || attr==='input' || (attr==='output' && el.name!=='th-table-data')) {
              return;
            }
           
            cloned[attr] = domObject[attr];


          });
          return cloned;

        });

        var retObj = {elements: toDumpEls, connections: this._connections};

        var ret = JSON.stringify(retObj, this.removeDomObjects);

        //var connectionsJSON = JSON.stringify(this._connections , this.removeDomObjects);

         

        return ret;

      }, 


      removeDomObjects: function(key, value) {


          if(value instanceof HTMLElement) 
            return undefined;
          else
            return value;

      },              


      findElById: function(id){

        var self = this;
        element = self._elements.filter(function(el){
          return el.id === id;
        })[0];

        return element;
      },



      /**
       * Checks if a componenet has output attributes (any attribute which is named input*)
       * @param  {Object} published Object containing all published attributes
       * @return {Object}           list of attributes that are input.
       */
      _checkForInputAttr: function(published){
        if(!published) {
          return false;
        }
        var attrs = Object.keys(published).filter(function(item) {
          return item.indexOf("input") > -1;

        })
        return attrs;
      },
     
      /**
       * Checks if a componenet has output attributes.
       * @param  {Object} published Object containing all published attributes
       * @return {boolean}       True if component has output attribute (only one)
       */
      _checkForOutputAttr: function(published){
        if(!published) {
          return false;
        }

        return Object.keys(published).indexOf("output") > -1 ? true : false;
      },

      /**
       * Generates unique ids for components
       * @param  {String} elName Component name
       * @return {[type]}        Unique component id
       */
      _generateUniqueId: function(elName){
          var self = this;
          var num = 0;
          var tagsWithSameName = self._elements.filter(function(elem){return elem.name == elName});
          
          if(tagsWithSameName){
            num+= tagsWithSameName.length;
          } 
          
          var uniqueId = elName + '-' + num;
          
          return uniqueId;
      }, 





      _createBezierPath: function(startX, startY, endX, endY, handleOffsetX) {

          // make handleOffsetX larger when source element is on the right side of target
          if(startX > endX) {
            handleOffsetX *= 2;
          }
          var distance = Math.sqrt(Math.pow(endX-startX, 2) + Math.pow(endY-startY,2));
          // decrease handleOffsetX when too close...
          if(distance<100) {
             handleOffsetX /= 2;
          }
          if(distance<50) {
             handleOffsetX /= 4;
          }
          var path = "M"+parseInt(startX)+","+parseInt(startY)+
                     " C"+parseInt(startX + handleOffsetX)+","+parseInt(startY)+
                     " "+parseInt(endX - handleOffsetX)+","+parseInt(endY)+
                     " "+parseInt(endX)+","+parseInt(endY);
          return path;
      },

      _addBezierPath: function(startX, startY, endX, endY, handleOffsetX, id, highlighted) {

          var aLine = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
          var path = this._createBezierPath(startX, startY, endX, endY, handleOffsetX);

          aLine.setAttribute('d',path);
          aLine.setAttribute('stroke', '#555');// conn.source.color);
          aLine.setAttribute('fill', 'none');
          if(id) {
            aLine.setAttribute('id', id);
          }

          if(highlighted) {
            aLine.classList.add('highlighted');
          }
          

          this.$.svg.appendChild(aLine);

      }

     
    });
  </script>
</polymer-element>