src/element.js
/**
  * Get defaults for the config frames section
  *
  * @param object The incomplete user specified cfg
  * @return a complete frames cfg
  */
Get defaults for the config frames section
@param object The incomplete user specified cfg
@return a complete frames cfg
Get defaults for the config frames section @param object The incomplete user specified cfg @return a complete frames cfg
entry(cfg) {
      this.cfg = cfg;
      let drawableElement;
      this.container = document.querySelector(cfg.selector);
      this.container.style.position = 'relative';
      if (cfg.style)
        Object.keys(cfg.style).forEach((item, i) => {
          this.container.style[item] = cfg.style[item];
        });
      if (cfg.attrs)
        Object.keys(cfg.attrs).forEach((item, i) => {
          this.container[item] = cfg.attrs[item];
        });
      if (cfg.renderer.name == 'paperjs') {
        this.renderer = new Hive.Renderer.paperjs(this.container, cfg);
      }
      if (cfg.renderer.name == 'svg') {
        this.drawableObject = this.container;
        this.renderer = new Hive.Renderer.svg(this.container, cfg);
      }
      if (cfg.renderer.name == 'three') {
        this.drawableObject = this.container;
        this.renderer = new Hive.Renderer.three(this.container, cfg, this.h.sendStateChange);
      }
      this.renderer.messagePub = this.messagePub;
      this.renderer.setRendererSize(this.container.clientWidth, this.container.clientHeight);
      let ts = this.renderer.getTargetSize();
      this.viewBox = [0, 0, ts.w, ts.h];
      this.elSize = {w:500, h:500}
      if (cfg.renderer.name != 'three'){
        if (cfg.zoom) {
          this.container.addEventListener("wheel", function (event) {
            let sz = this.container.getBoundingClientRect();
            let delta = Math.sign(event.deltaY);
            let vb = this.viewBox;
            vb[2] += delta * (sz.width * .1);
            vb[3] += delta * (sz.height * .1);
            if(vb[2]< sz.width*.1) vb[2] = sz.width*.1;
            if(vb[2]> sz.width) vb[2] = sz.width;
            if(vb[3]< sz.height*.1) vb[3] = sz.height*.1;
            if(vb[3]> sz.height) vb[3] = sz.height;
            this.renderer.setViewBox(vb);
            event.preventDefault(); 
          }.bind(this), false);
        }
        if (cfg.drag){ 
          var dragHandler = d3.drag(event)
            .on("drag", function () {
              let sz = this.container.getBoundingClientRect();
              let vb = this.viewBox;
              vb[0] -= d3.event.dx * (vb[2]/sz.width);
              vb[1] -= d3.event.dy * (vb[3]/sz.height);
              this.renderer.setViewBox(vb);
            }.bind(this));
          dragHandler(d3.select(this.container));
        }
      }
      this.rdb = this.resizeDebounce.bind(this);
      window.addEventListener('resize', this.rdb, true);
      let handlers = {
        getElementPosition:(function(a){return this.getPosition(...arguments)}).bind(this.renderer),
      }
      if (cfg.popup.enabled){
        this.popup = new Hive.popup(handlers, cfg.selector, this.events, cfg.popup);
      }
  }
entry ( cfg ) { this . cfg = cfg ; let drawableElement ; this . container = document . querySelector ( cfg . selector ) ; this . container . style . position = 'relative' ; if ( cfg . style ) Object . keys ( cfg . style ) . forEach ( ( item , i ) => { this . container . style [ item ] = cfg . style [ item ] ; } ) ; if ( cfg . attrs ) Object . keys ( cfg . attrs ) . forEach ( ( item , i ) => { this . container [ item ] = cfg . attrs [ item ] ; } ) ; if ( cfg . renderer . name == 'paperjs' ) { this . renderer = new Hive . Renderer . paperjs ( this . container , cfg ) ; } if ( cfg . renderer . name == 'svg' ) { this . drawableObject = this . container ; this . renderer = new Hive . Renderer . svg ( this . container , cfg ) ; } if ( cfg . renderer . name == 'three' ) { this . drawableObject = this . container ; this . renderer = new Hive . Renderer . three ( this . container , cfg , this . h . sendStateChange ) ; } this . renderer . messagePub = this . messagePub ; this . renderer . setRendererSize ( this . container . clientWidth , this . container . clientHeight ) ; let ts = this . renderer . getTargetSize ( ) ; this . viewBox = [ 0 , 0 , ts . w , ts . h ] ; this . elSize = { w : 500 , h : 500 } if ( cfg . renderer . name != 'three' ) { if ( cfg . zoom ) { this . container . addEventListener ( "wheel" , function ( event ) { let sz = this . container . getBoundingClientRect ( ) ; let delta = Math . sign ( event . deltaY ) ; let vb = this . viewBox ; vb [ 2 ] += delta * ( sz . width * .1 ) ; vb [ 3 ] += delta * ( sz . height * .1 ) ; if ( vb [ 2 ] < sz . width * .1 ) vb [ 2 ] = sz . width * .1 ; if ( vb [ 2 ] > sz . width ) vb [ 2 ] = sz . width ; if ( vb [ 3 ] < sz . height * .1 ) vb [ 3 ] = sz . height * .1 ; if ( vb [ 3 ] > sz . height ) vb [ 3 ] = sz . height ; this . renderer . setViewBox ( vb ) ; event . preventDefault ( ) ; } . bind ( this ) , false ) ; } if ( cfg . drag ) { var dragHandler = d3 . drag ( event ) . on ( "drag" , function ( ) { let sz = this . container . getBoundingClientRect ( ) ; let vb = this . viewBox ; vb [ 0 ] -= d3 . event . dx * ( vb [ 2 ] / sz . width ) ; vb [ 1 ] -= d3 . event . dy * ( vb [ 3 ] / sz . height ) ; this . renderer . setViewBox ( vb ) ; } . bind ( this ) ) ; dragHandler ( d3 . select ( this . container ) ) ; } } this . rdb = this . resizeDebounce . bind ( this ) ; window . addEventListener ( 'resize' , this . rdb , true ) ; let handlers = { getElementPosition : ( function ( a ) { return this . getPosition ( ... arguments ) } ) . bind ( this . renderer ) , } if ( cfg . popup . enabled ) { this . popup = new Hive . popup ( handlers , cfg . selector , this . events , cfg . popup ) ; } }
Get defaults for the config frames section
 @param object The incomplete user specified cfg
 @return a complete frames cfg
Get defaults for the config frames section @param object The incomplete user specified cfg @return a complete frames cfg
// style node // attrs node // if (cfg.renderer.name == 'threesvg') { //   this.drawableObject = this.container; //   this.renderer = new Hive.Renderer.threesvg(this.container, cfg); // } // wheel handler // sanity check sizes // don't scroll when in div // drag handler