src/draw.js
/**
  * Configures single HTML elements in the plugins
  *
  * @param object Draw directive config
  * @return Object including the attributes and element
  */
Configures single HTML elements in the plugins
@param object Draw directive config
@return Object including the attributes and element
Configures single HTML elements in the plugins @param object Draw directive config @return Object including the attributes and element
configElement(cfg) {
    let id = cfg.layerState.genID();
    let attr = {id:id.str};
    if (cfg.d) attr.d = cfg.d;
    let cfgAttr = Object.keys(cfg.cfg.attr||{}).filter(a => typeof cfg.cfg.attr[a] != 'object' || Array.isArray(cfg.cfg.attr[a]));
    cfgAttr.forEach((a, i) => { 
      attr[a] = cfg.layerState.sa['attr.'+a](cfg.data);
      if (Array.isArray(attr[a])) { 
        let group =  cfg.layerState.g;
        let gType = this.getObjPath(cfg.cfg, `opt.gradient-type-${a}`);
        let args = [0,0,0,-cfg.layerState.rk['bbox.h']] 
        if (gType == 'linear') { 
          let path = cfg.d.split(/([\d\.-]+)/).map(d=>parseFloat(d)).filter(d=>d);
          args = [...path.slice(0, 2), ...path.slice(-2)]
        }
        attr[a] = this.parseCfgColor(attr[a], `${attr.id}_c-${a}`, group, ...args);
      }
    });
    let e = this.createElement(attr, cfg.target, cfg.layerState.g);
    if (this.guide) {
      let ev = this.getObjPath(cfg.cfg, `opt.ev`);
      let title = this.getObjPath(cfg.cfg, `opt.title`)||'Values';
      if (ev)
        this.h.eventRegister(attr.id, cfg.layerState.g.id, ev,
          {popup:{attr:attr, idx:id.idx, title:title, data:cfg.layerState.d}});
    }
    return {attr, e}
  }
configElement ( cfg ) { let id = cfg . layerState . genID ( ) ; let attr = { id : id . str } ; if ( cfg . d ) attr . d = cfg . d ; let cfgAttr = Object . keys ( cfg . cfg . attr || { } ) . filter ( a => typeof cfg . cfg . attr [ a ] != 'object' || Array . isArray ( cfg . cfg . attr [ a ] ) ) ; cfgAttr . forEach ( ( a , i ) => { attr [ a ] = cfg . layerState . sa [ 'attr.' + a ] ( cfg . data ) ; if ( Array . isArray ( attr [ a ] ) ) { let group = cfg . layerState . g ; let gType = this . getObjPath ( cfg . cfg , ` ${ a } ` ) ; let args = [ 0 , 0 , 0 , - cfg . layerState . rk [ 'bbox.h' ] ] if ( gType == 'linear' ) { let path = cfg . d . split ( / ([\d\.-]+) / ) . map ( d => parseFloat ( d ) ) . filter ( d => d ) ; args = [ ... path . slice ( 0 , 2 ) , ... path . slice ( - 2 ) ] } attr [ a ] = this . parseCfgColor ( attr [ a ] , ` ${ attr . id } ${ a } ` , group , ... args ) ; } } ) ; let e = this . createElement ( attr , cfg . target , cfg . layerState . g ) ; if ( this . guide ) { let ev = this . getObjPath ( cfg . cfg , ` ` ) ; let title = this . getObjPath ( cfg . cfg , ` ` ) || 'Values' ; if ( ev ) this . h . eventRegister ( attr . id , cfg . layerState . g . id , ev , { popup : { attr : attr , idx : id . idx , title : title , data : cfg . layerState . d } } ) ; } return { attr , e } }
Configures single HTML elements in the plugins
 @param object Draw directive config
 @return Object including the attributes and element
Configures single HTML elements in the plugins @param object Draw directive config @return Object including the attributes and element
// adapt here for scss // is gradient color def // default vertical // get start and end from path // don't register events on first pass