Merge pull request #4 from different55/funnel

Split Funnel from Horn, improve Horn rendering.

dist/zdog.dist.js

···
   return isFirstHalf ? curve : 1 - curve;
 };
 
+Zdog.isColor = function(value) {
+  return (typeof value == 'string') || (value && value.isTexture);
+}
+Zdog.cloneColor = function(value) {
+  return (value && value.clone) ? value.clone() : value;
+}
+
+Zdog.exportGraph = function(model) {
+  return JSON.parse( JSON.stringify( model ) );
+};
+
 return Zdog;
 
 } ) );
···
   if ( !isStroke ) {
     return;
   }
-  ctx.strokeStyle = color;
   ctx.lineWidth = lineWidth;
-  ctx.stroke();
+  if (color && color.getCanvasFill) {
+    ctx.save();
+    ctx.strokeStyle = color.getCanvasFill(ctx);
+    ctx.stroke();
+    ctx.restore();
+  } else {
+    ctx.strokeStyle = color;
+    ctx.stroke();
+  }
 };
 
 CanvasRenderer.fill = function( ctx, elem, isFill, color ) {
   if ( !isFill ) {
     return;
   }
-  ctx.fillStyle = color;
-  ctx.fill();
+  if (color && color.getCanvasFill) {
+    ctx.save();
+    ctx.fillStyle = color.getCanvasFill(ctx);
+    ctx.fill();
+    ctx.restore();
+  } else {
+    ctx.fillStyle = color;
+    ctx.fill();
+  }
 };
 
 CanvasRenderer.end = function() {};
···
   if ( !isStroke ) {
     return;
   }
+  if (color && color.getSvgFill) {
+    color = color.getSvgFill(svg);
+  }
   elem.setAttribute( 'stroke', color );
   elem.setAttribute( 'stroke-width', lineWidth );
 };
 
 SvgRenderer.fill = function( svg, elem, isFill, color ) {
   var fillColor = isFill ? color : 'none';
+  if (fillColor && fillColor.getSvgFill) {
+    fillColor = fillColor.getSvgFill(svg);
+  }
   elem.setAttribute( 'fill', fillColor );
 };
 
···
   return new Vector( this );
 };
 
+function round( num ) {
+  return Math.round( num * 1000 ) / 1000;
+}
+
+Vector.prototype.toJSON = function() {
+  var x = this.x;
+  var y = this.y;
+  var z = this.z;
+
+  if ( x === y && y === z ) {
+    return x !== 0 ? round( x ) : undefined;
+  }
+
+  var obj = { x: x, y: y, z: z };
+  var result = {};
+
+  Object.keys( obj ).forEach( function( key ) {
+    var value = obj[ key ];
+    if ( value !== 0 ) {
+      result[ key ] = round( value );
+    }
+  });
+
+  return Object.keys( result ).length ? result : undefined;
+};
+
 return Vector;
 
 } ) );
···
 function Anchor( options ) {
   this.create( options || {} );
 }
+Anchor.type = 'Anchor';
 
 Anchor.prototype.create = function( options ) {
   this.children = [];
···
   if ( this.addTo ) {
     this.addTo.addChild( this );
   }
+  if ( options.importGraph ) {
+    this.importGraph( options.importGraph );
+  }
 };
 
 Anchor.defaults = {};
···
   'scale',
   'addTo',
 ]);
+
+Anchor.ignoreKeysJSON = [
+  'addTo',
+];
 
 Anchor.prototype.setOptions = function( options ) {
   var optionKeys = this.constructor.optionKeys;
···
   return clone;
 };
 
+Anchor.prototype.importGraph = function( model ) {
+  this.addChild( revive( model ) );
+
+  function revive( graph ) {
+    graph = utils.extend( {}, graph );
+    // quick hack to avoid nested Illustration items
+    var type = graph.type === 'Illustration' ? 'Anchor' : graph.type;
+    var children = (graph.children || []).slice( 0 );
+    delete graph.children;
+
+    var Item = utils[ type ];
+    var rootGraph;
+    if ( Item ) {
+      rootGraph = new Item( graph );
+      children.forEach( function( child ) {
+        revive( utils.extend( child, { addTo: rootGraph } ) );
+      } );
+    }
+    return rootGraph;
+  }
+};
+
 Anchor.prototype.normalizeRotate = function() {
   this.rotate.x = utils.modulo( this.rotate.x, TAU );
   this.rotate.y = utils.modulo( this.rotate.y, TAU );
   this.rotate.z = utils.modulo( this.rotate.z, TAU );
 };
 
+Anchor.prototype.toJSON = function() {
+  var type = this.constructor.type;
+  var result = { type: type };
+  var defaults = this.constructor.defaults;
+  var optionKeys = this.constructor.optionKeys.slice(0).concat('children');
+  var ignoreKeys = Anchor.ignoreKeysJSON
+    .slice(0)
+    .concat(this.constructor.ignoreKeysJSON || []);
+
+  optionKeys.forEach(function( key ) {
+    if (ignoreKeys.indexOf(key) > -1) {
+      return;
+    }
+    var value = this[key];
+
+    if (
+      ![ 'undefined', 'function' ].indexOf(typeof value) > -1 &&
+        value !== defaults[key]
+    ) {
+      if (Array.isArray(value) && value.length === 0) {
+        return;
+      }
+      if (value.toJSON) {
+        var serialized = value.toJSON();
+        if (typeof serialized !== 'undefined') {
+          if (key === 'scale' && serialized === 1) {
+            return;
+          }
+          result[key] = serialized;
+        }
+      } else {
+        result[key] = value;
+      }
+    }
+  }, this);
+
+  return result;
+};
+
 // ----- subclass ----- //
 
 function getSubclass( Super ) {
···
       if ( !Item.optionKeys.indexOf( key ) != 1 ) {
         Item.optionKeys.push( key );
       }
-    } );
+    });
+    // create ignoreKeysJSON
+    Item.ignoreKeysJSON = Super.ignoreKeysJSON.slice(0);
 
     Item.subclass = getSubclass( Item );
 
···
   onDragEnd: noop,
   onResize: noop,
 });
+Illustration.ignoreKeysJSON = [ 'dragRotate', 'element', 'resize' ];
+Illustration.type = 'Illustration';
 
 utils.extend( Illustration.prototype, Dragger.prototype );
 
···
   backface: true,
 });
 
+Shape.type = 'Shape';
+
 Shape.prototype.create = function( options ) {
   Anchor.prototype.create.call( this, options );
   this.updatePath();
···
   this.pathCommands.forEach( function( command ) {
     command.reset();
   } );
+
+  if (this.backface && this.backface.reset) {
+    this.backface.reset();
+  }
+  if (this.color && this.color.reset) {
+    this.color.reset();
+  }
 };
 
 Shape.prototype.transform = function( translation, rotation, scale ) {
···
   this.children.forEach( function( child ) {
     child.transform( translation, rotation, scale );
   } );
+  if (this.backface && this.backface.transform) {
+    this.backface.transform( translation, rotation, scale );
+  }
+  if (this.color && this.color.transform) {
+    this.color.transform( translation, rotation, scale );
+  }
 };
 
 Shape.prototype.updateSortValue = function() {
···
 
 var TAU = utils.TAU;
 // Safari does not render lines with no size, have to render circle instead
-Shape.prototype.renderCanvasDot = function( ctx ) {
+Shape.prototype.renderCanvasDot = function( ctx , renderer) {
   var lineWidth = this.getLineWidth();
   if ( !lineWidth ) {
     return;
   }
-  ctx.fillStyle = this.getRenderColor();
   var point = this.pathCommands[0].endRenderPoint;
   ctx.beginPath();
   var radius = lineWidth/2;
   ctx.arc( point.x, point.y, radius, 0, TAU );
-  ctx.fill();
+  renderer.fill(ctx, null, true, this.getRenderColor() );
 };
 
 Shape.prototype.getLineWidth = function() {
···
 
 Shape.prototype.getRenderColor = function() {
   // use backface color if applicable
-  var isBackfaceColor = typeof this.backface == 'string' && this.isFacingBack;
+  var isBackfaceColor = utils.isColor(this.backface) && this.isFacingBack;
   var color = isBackfaceColor ? this.backface : this.color;
   return color;
 };
···
   visible: true,
 });
 
+Group.type = 'Group';
+
+
 // ----- update ----- //
 
 Group.prototype.updateSortValue = function() {
···
   width: 1,
   height: 1,
 });
+
+Rect.type = 'Rect';
 
 Rect.prototype.setPath = function() {
   var x = this.width / 2;
···
   closed: false,
 });
 
+RoundedRect.type = 'RoundedRect';
+
 RoundedRect.prototype.setPath = function() {
   /* eslint
      id-length: [ "error", { "min": 2, "exceptions": [ "x", "y" ] }],
···
   closed: false,
 });
 
+Ellipse.type = 'Ellipse';
+
 Ellipse.prototype.setPath = function() {
   var width = this.width != undefined ? this.width : this.diameter;
   var height = this.height != undefined ? this.height : this.diameter;
···
   radius: 0.5,
 });
 
+Polygon.type = 'Polygon';
+
 var TAU = utils.TAU;
 
 Polygon.prototype.setPath = function() {
···
 var Hemisphere = Ellipse.subclass({
   fill: true,
 });
+
+Hemisphere.type = 'Hemisphere';
 
 var TAU = utils.TAU;
 
···
   color: '#333',
   updateSort: true,
 });
+
+CylinderGroup.type = 'CylinderGroup';
 
 CylinderGroup.prototype.create = function() {
   Group.prototype.create.apply( this, arguments );
···
   fill: true,
 });
 
+Cylinder.type = 'Cylinder';
+
+
 var TAU = utils.TAU;
 
 Cylinder.prototype.create = function( /* options */) {
···
     color: this.color,
     stroke: this.stroke,
     fill: this.fill,
-    backface: this.frontFace || baseColor,
+    backface: utils.cloneColor(this.frontFace || baseColor),
     visible: this.visible,
   });
   // back outside base
   this.rearBase = this.group.rearBase = this.frontBase.copy({
     translate: { z: -baseZ },
     rotate: { y: 0 },
-    backface: baseColor,
+    backface: utils.cloneColor(baseColor),
   });
 };
 
···
   length: 1,
   fill: true,
 });
+Cone.type = 'Cone';
 
 var TAU = utils.TAU;
 
···
 
 } ) );
 /**
+ * Horn composite shape
+ */
+
+( function( root, factory ) {
+  // module definition
+  if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory( require('./boilerplate'),
+        require('./path-command'), require('./shape'), require('./group'),
+        require('./vector') );
+  } else {
+    // browser global
+    var Zdog = root.Zdog;
+    Zdog.Horn = factory( Zdog, Zdog.PathCommand, Zdog.Shape,
+        Zdog.Group, Zdog.Vector );
+  }
+}( this, function factory( utils, PathCommand, Shape, Group, Vector ) {
+
+function noop() {}
+
+// ----- HornGroup ----- //
+
+var HornGroup = Group.subclass({
+  color: '#333',
+  fill: true,
+  stroke: true,
+  updateSort: true,
+});
+
+HornGroup.type = 'HornGroup';
+
+HornGroup.prototype.create = function() {
+  Group.prototype.create.apply( this, arguments );
+
+  // vectors used for calculation
+  this.renderApex = new Vector();
+
+  this.pathCommands = [
+    new PathCommand( 'move', [ {} ] ),
+    new PathCommand( 'line', [ {} ] ),
+    new PathCommand( 'line', [ {} ] ),
+    new PathCommand( 'line', [ {} ] ),
+  ];
+};
+
+HornGroup.prototype.render = function( ctx, renderer ) {
+  this.renderHornSurface( ctx, renderer );
+  Group.prototype.render.apply( this, arguments );
+};
+
+HornGroup.prototype.renderHornSurface = function( ctx, renderer ) {
+  if ( !this.visible ) {
+    return;
+  }
+  // render horn surface
+  var elem = this.getRenderElement( ctx, renderer );
+  var scale = this.addTo.renderNormal.magnitude();
+  var frontRadius = this.addTo.frontDiameter/2 * scale;
+  var rearRadius = this.addTo.rearDiameter/2 * scale;
+  this.renderApex.set( this.rearBase.renderOrigin )
+    .subtract( this.frontBase.renderOrigin );
+
+  var apexDistance = this.renderApex.magnitude2d();
+  if ( apexDistance <= Math.abs( rearRadius - frontRadius ) ) {
+    return;
+  }
+
+  var angle = Math.atan2( this.renderApex.y, this.renderApex.x );
+  var angle2 = Math.acos((frontRadius - rearRadius) / apexDistance);
+
+  var frontTangentA = this.pathCommands[0].renderPoints[0];
+  var rearTangentA = this.pathCommands[1].renderPoints[0];
+  var rearTangentB = this.pathCommands[2].renderPoints[0];
+  var frontTangentB = this.pathCommands[3].renderPoints[0];
+
+  frontTangentA.x = Math.cos( angle + angle2 ) * frontRadius;
+  frontTangentA.y = Math.sin( angle + angle2 ) * frontRadius;
+  rearTangentA.x = Math.cos( angle + angle2 ) * rearRadius;
+  rearTangentA.y = Math.sin( angle + angle2 ) * rearRadius;
+
+  frontTangentB.x = Math.cos( angle - angle2 ) * frontRadius;
+  frontTangentB.y = Math.sin( angle - angle2 ) * frontRadius;
+  rearTangentB.x = Math.cos( angle - angle2 ) * rearRadius;
+  rearTangentB.y = Math.sin( angle - angle2 ) * rearRadius;
+
+  frontTangentA.add( this.frontBase.renderOrigin );
+  frontTangentB.add( this.frontBase.renderOrigin );
+  rearTangentA.add( this.rearBase.renderOrigin );
+  rearTangentB.add( this.rearBase.renderOrigin );
+
+  if ( renderer.isCanvas ) {
+    ctx.lineCap = 'butt'; // nice
+  }
+  renderer.renderPath( ctx, elem, this.pathCommands );
+  renderer.stroke( ctx, elem, this.stroke, this.color, Shape.prototype.getLineWidth.apply(this) );
+  renderer.fill( ctx, elem, this.fill, this.color );
+  renderer.end( ctx, elem );
+
+  if ( renderer.isCanvas ) {
+    ctx.lineCap = 'round'; // reset
+  }
+};
+
+var svgURI = 'http://www.w3.org/2000/svg';
+
+HornGroup.prototype.getRenderElement = function( ctx, renderer ) {
+  if ( !renderer.isSvg ) {
+    return;
+  }
+  if ( !this.svgElement ) {
+    // create svgElement
+    this.svgElement = document.createElementNS( svgURI, 'path');
+    this.svgElement.setAttribute( 'stroke-linecap', 'round' );
+    this.svgElement.setAttribute( 'stroke-linejoin', 'round' );
+  }
+  return this.svgElement;
+};
+
+// prevent double-creation in parent.copyGraph()
+// only create in Horn.create()
+HornGroup.prototype.copyGraph = noop;
+
+// ----- HornCap ----- //
+
+var HornCap = Shape.subclass();
+
+HornCap.type = 'HornCap';
+
+HornCap.prototype.copyGraph = noop;
+
+// ----- Horn ----- //
+
+var Horn = Shape.subclass({
+  frontDiameter: 1,
+  rearDiameter: 1,
+  length: 1,
+  frontFace: undefined,
+  fill: true,
+});
+
+Horn.type = 'Horn';
+
+var TAU = utils.TAU;
+
+Horn.prototype.create = function(/* options */) {
+  // call super
+  Shape.prototype.create.apply( this, arguments );
+  // composite shape, create child shapes
+  // HornGroup to render horn surface then bases
+  this.group = new HornGroup({
+    addTo: this,
+    color: this.color,
+    fill: this.fill,
+    stroke: this.stroke,
+    visible: this.visible,
+  });
+  var baseZ = this.length/2;
+  var baseColor = this.backface || true;
+  // front outside base
+  this.frontBase = this.group.frontBase = new HornCap({
+    addTo: this.group,
+    translate: { z: (baseZ - this.frontDiameter/2) },
+    rotate: { y: TAU/2 },
+    color: this.color,
+    stroke: this.frontDiameter + this.stroke,
+    fill: this.fill,
+    backface: this.frontFace || baseColor,
+    visible: this.visible,
+  });
+  // back outside base
+  this.rearBase = this.group.rearBase = new HornCap({
+    addTo: this.group,
+    translate: { z: (-baseZ + this.rearDiameter/2) },
+    rotate: { y: 0 },
+    color: this.color,
+    stroke: this.rearDiameter + this.stroke,
+    fill: this.fill,
+    backface: baseColor,
+    visible: this.visible,
+  });
+
+};
+
+Horn.prototype.updateFrontCapDiameter = function(size) {
+	this.frontBase.stroke = size + this.stroke;
+	var baseZ = this.length/2;
+	this.frontBase.translate.z = (baseZ - size/2);
+}
+
+Horn.prototype.updateRearCapDiameter = function(size) {
+	this.rearBase.stroke = size + this.stroke;
+	var baseZ = this.length/2;
+	this.rearBase.translate.z = (-baseZ + size/2);
+}
+
+// Horn shape does not render anything
+Horn.prototype.render = function() {};
+
+// ----- set child properties ----- //
+
+var childProperties = [ 'stroke', 'fill', 'color', 'visible',
+                        'frontDiameter', 'rearDiameter' ];
+childProperties.forEach( function( property ) {
+  // use proxy property for custom getter & setter
+  var _prop = '_' + property;
+  Object.defineProperty( Horn.prototype, property, {
+    get: function() {
+      return this[ _prop ];
+    },
+    set: function( value ) {
+      this[ _prop ] = value;
+      // set property on children
+      if ( this.frontBase ) {
+		if (property === 'frontDiameter') {
+		  this.updateFrontCapDiameter(value);
+		}
+		if (property === 'rearDiameter') {
+		  this.updateRearCapDiameter(value);
+		}
+        this.frontBase[ property ] = value;
+        this.rearBase[ property ] = value;
+        this.group[ property ] = value;
+      }
+    },
+  });
+});
+
+// TODO child property setter for backface, frontBaseColor, & rearBaseColor
+
+return Horn;
+
+}));
+/**
+ * Funnel composite shape
+ */
+
+( function( root, factory ) {
+  // module definition
+  if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory( require('./boilerplate'),
+        require('./path-command'), require('./shape'), require('./group'),
+        require('./vector') );
+  } else {
+    // browser global
+    var Zdog = root.Zdog;
+    Zdog.Funnel = factory( Zdog, Zdog.PathCommand, Zdog.Shape, Zdog.Ellipse,
+        Zdog.Group, Zdog.Vector );
+  }
+}( this, function factory( utils, PathCommand, Shape, Ellipse, Group, Vector ) {
+
+function noop() {}
+
+// ----- FunnelGroup ----- //
+
+var FunnelGroup = Group.subclass({
+  color: '#333',
+  fill: true,
+  stroke: true,
+  updateSort: true,
+});
+
+FunnelGroup.type = 'FunnelGroup';
+
+FunnelGroup.prototype.create = function() {
+  Group.prototype.create.apply( this, arguments );
+
+  // vectors used for calculation
+  this.renderApex = new Vector();
+  this.tangentFrontA = new Vector();
+  this.tangentFrontB = new Vector();
+  this.tangentRearA = new Vector();
+  this.tangentRearB = new Vector();
+
+  this.pathCommands = [
+    new PathCommand( 'move', [ {} ] ),
+    new PathCommand( 'line', [ {} ] ),
+	new PathCommand( 'line', [ {} ] ),
+	new PathCommand( 'line', [ {} ] ),
+  ];
+};
+
+FunnelGroup.prototype.render = function( ctx, renderer ) {
+  this.renderFunnelSurface( ctx, renderer );
+  Group.prototype.render.apply( this, arguments );
+};
+
+FunnelGroup.prototype.renderFunnelSurface = function( ctx, renderer ) {
+  if ( !this.visible ) {
+    return;
+  }
+  // render funnel surface
+  var elem = this.getRenderElement( ctx, renderer );
+  var frontBase = this.frontBase;
+  var frontDiameter = frontBase.diameter;
+  var rearBase = this.rearBase;
+  var rearDiameter = rearBase.diameter;
+  var scale = frontBase.renderNormal.magnitude();
+  var frontRadius = frontDiameter/2 * scale;
+  var rearRadius = rearDiameter/2 * scale;
+
+  this.renderApex.set( rearBase.renderOrigin )
+    .subtract( frontBase.renderOrigin );
+
+  // calculate tangents.
+  var scale = frontBase.renderNormal.magnitude();
+  var apexDistance = this.renderApex.magnitude2d();
+  var normalDistance = frontBase.renderNormal.magnitude2d();
+  // eccentricity
+  var eccenAngle = Math.acos( normalDistance / scale );
+  var biggerRadius =  (frontRadius > rearRadius) ? frontRadius : rearRadius;
+  var eccenPercent;
+  if (frontRadius == 0 || rearRadius == 0) {
+	  eccenPercent = 1.0;
+  } else {
+	  eccenPercent = (Math.abs(frontRadius - rearRadius) / biggerRadius);
+  }
+  var eccen = Math.sin( eccenAngle ) * Math.sqrt(eccenPercent);
+  // does apex extend beyond eclipse of face
+  apexDistance = apexDistance + frontRadius/4 + rearRadius/4;
+  var isApexVisible = frontRadius * eccen < apexDistance &&
+                      rearRadius * eccen < apexDistance;
+  if ( !isApexVisible ) {
+    return;
+  }
+  // update tangents
+  // TODO: try something more like horn_old.js updateSortValue()
+  var apexAngle = Math.atan2( frontBase.renderNormal.y, frontBase.renderNormal.x ) +
+      TAU/2;
+  var projectFrontLength = (apexDistance + frontRadius) / eccen;
+  var projectRearLength = (apexDistance + rearRadius) / eccen;
+  var projectFrontAngle = Math.acos( frontRadius / projectFrontLength );
+  var projectRearAngle = Math.acos( rearRadius / -projectRearLength );
+  // set tangent points
+  var tangentFrontA = this.tangentFrontA;
+  var tangentFrontB = this.tangentFrontB;
+  var tangentRearA = this.tangentRearA;
+  var tangentRearB = this.tangentRearB;
+
+  tangentFrontA.x = Math.cos( projectFrontAngle ) * frontRadius * eccen;
+  tangentFrontA.y = Math.sin( projectFrontAngle ) * frontRadius;
+  tangentRearA.x = Math.cos( projectRearAngle ) * rearRadius * eccen;
+  tangentRearA.y = Math.sin( projectRearAngle ) * rearRadius;
+
+  tangentFrontB.set( this.tangentFrontA );
+  tangentFrontB.y *= -1;
+  tangentRearB.set( this.tangentRearA );
+  tangentRearB.y *= -1;
+
+  tangentFrontA.rotateZ( apexAngle);
+  tangentFrontB.rotateZ( apexAngle);
+  tangentFrontA.add( frontBase.renderOrigin );
+  tangentFrontB.add( frontBase.renderOrigin );
+  tangentRearA.rotateZ( apexAngle + TAU/2);
+  tangentRearB.rotateZ( apexAngle + TAU/2);
+  tangentRearA.add( rearBase.renderOrigin );
+  tangentRearB.add( rearBase.renderOrigin );
+
+
+  // set path command render points
+  this.pathCommands[0].renderPoints[0].set( tangentFrontA );
+  this.pathCommands[1].renderPoints[0].set( tangentRearB );
+  this.pathCommands[2].renderPoints[0].set( tangentRearA );
+  this.pathCommands[3].renderPoints[0].set( tangentFrontB );
+
+  if ( renderer.isCanvas ) {
+    ctx.lineCap = 'butt'; // nice
+  }
+  renderer.stroke(ctx, elem, this.stroke, this.color, Shape.prototype.getLineWidth.apply(this));
+  renderer.renderPath( ctx, elem, this.pathCommands );
+  //renderer.stroke( ctx, elem, true, '#333', 0.1 ); // remove once testing is done.
+  renderer.fill( ctx, elem, this.fill, this.color );
+  renderer.end( ctx, elem );
+
+  if ( renderer.isCanvas ) {
+    ctx.lineCap = 'round'; // reset
+  }
+};
+
+var svgURI = 'http://www.w3.org/2000/svg';
+
+FunnelGroup.prototype.getRenderElement = function( ctx, renderer ) {
+  if ( !renderer.isSvg ) {
+    return;
+  }
+  if ( !this.svgElement ) {
+    // create svgElement
+    this.svgElement = document.createElementNS( svgURI, 'path');
+    this.svgElement.setAttribute( 'stroke-linecap', 'round' );
+    this.svgElement.setAttribute( 'stroke-linejoin', 'round' );
+  }
+  return this.svgElement;
+};
+
+// prevent double-creation in parent.copyGraph()
+// only create in Funnel.create()
+FunnelGroup.prototype.copyGraph = noop;
+
+// ----- FunnelCap ----- //
+
+var FunnelCap = Ellipse.subclass();
+
+FunnelCap.type = 'FunnelCap';
+
+FunnelCap.prototype.copyGraph = noop;
+
+// ----- Funnel ----- //
+
+var Funnel = Shape.subclass({
+  frontDiameter: 1,
+  rearDiameter: 1,
+  length: 1,
+  frontFace: undefined,
+  fill: true,
+});
+
+Funnel.type = 'Funnel';
+
+var TAU = utils.TAU;
+
+Funnel.prototype.create = function(/* options */) {
+  // call super
+  Shape.prototype.create.apply( this, arguments );
+  // composite shape, create child shapes
+  // FunnelGroup to render funnel surface then bases
+  this.group = new FunnelGroup({
+    addTo: this,
+    color: this.color,
+    fill: this.fill,
+    stroke: this.stroke,
+    visible: this.visible,
+  });
+  var baseZ = this.length/2;
+  var baseColor = this.backface || true;
+  // front outside base
+  this.frontBase = this.group.frontBase = new FunnelCap({
+    addTo: this.group,
+    translate: { z: (baseZ - this.frontDiameter/2) },
+    rotate: { y: TAU/2 },
+    color: this.color,
+    diameter: this.frontDiameter,
+    fill: this.fill,
+    stroke: this.stroke,
+    backface: this.frontFace || baseColor,
+    visible: this.visible,
+  });
+  // back outside base
+  this.rearBase = this.group.rearBase = new FunnelCap({
+    addTo: this.group,
+    translate: { z: (-baseZ + this.rearDiameter/2) },
+    rotate: { y: 0 },
+    color: this.color,
+    diameter: this.rearDiameter,
+    fill: this.fill,
+    stroke: this.stroke,
+    backface: baseColor,
+    visible: this.visible,
+  });
+
+};
+
+Funnel.prototype.updateFrontCapDiameter = function(size) {
+	this.frontBase.diameter = size;
+	var baseZ = this.length/2;
+	this.frontBase.translate.z = (baseZ - size/2);
+}
+
+Funnel.prototype.updateRearCapDiameter = function(size) {
+	this.rearBase.diameter = size;
+	var baseZ = this.length/2;
+	this.rearBase.translate.z = (-baseZ + size/2);
+}
+
+// Funnel shape does not render anything
+Funnel.prototype.render = function() {};
+
+// ----- set child properties ----- //
+
+var childProperties = [ 'stroke', 'fill', 'color', 'visible',
+                        'frontDiameter', 'rearDiameter' ];
+childProperties.forEach( function( property ) {
+  // use proxy property for custom getter & setter
+  var _prop = '_' + property;
+  Object.defineProperty( Funnel.prototype, property, {
+    get: function() {
+      return this[ _prop ];
+    },
+    set: function( value ) {
+      this[ _prop ] = value;
+      // set property on children
+      if ( this.frontBase ) {
+		if (property === 'frontDiameter') {
+		  this.updateFrontCapDiameter(value);
+		}
+		if (property === 'rearDiameter') {
+		  this.updateRearCapDiameter(value);
+		}
+        this.frontBase[ property ] = value;
+        this.rearBase[ property ] = value;
+        this.group[ property ] = value;
+      }
+    },
+  });
+});
+
+// TODO child property setter for backface, frontBaseColor, & rearBaseColor
+
+return Funnel;
+
+}));
+/**
  * Box composite shape
  */
 
···
 // ----- BoxRect ----- //
 
 var BoxRect = Rect.subclass();
+
 // prevent double-creation in parent.copyGraph()
 // only create in Box.create()
-BoxRect.prototype.copyGraph = function() {};
+BoxRect.prototype.copyGraph = function() { };
 
 // ----- Box ----- //
 
···
   width: 1,
   height: 1,
   depth: 1,
-  fill: true,
-} );
+  fill: true
+}, Shape.defaults );
+delete boxDefaults.path;
 
 var Box = Anchor.subclass( boxDefaults );
+Box.ignoreKeysJSON = [ 'children' ];
+Box.type = 'Box';
 
 /* eslint-disable no-self-assign */
 Box.prototype.create = function( options ) {
···
   }
   // update & add face
   var options = this.getFaceOptions( faceName );
-  options.color = typeof value == 'string' ? value : this.color;
+  if (utils.isColor(value)) {
+    options.color = value;
+  } else {
+    options.color = utils.cloneColor(this.color);
+  }
 
   if ( rect ) {
     // update previous
···
 
 } ) );
 /**
+ * Texture
+ */
+( function( root, factory ) {
+    // module definition
+    if ( typeof module == 'object' && module.exports ) {
+      // CommonJS
+      module.exports = factory(require('./vector'));
+    } else {
+      // browser global
+      var Zdog = root.Zdog;
+      Zdog.Texture = factory(Zdog.Vector);
+    }
+  }( this, function factory(Vector) {
+
+  /**
+   * Calculates the inverse of the matrix:
+   *  | x1 x2 x3 |
+   *  | y1 y2 y3 |
+   *  |  1  1  1 |
+   */
+  function inverse(x1, y1, x2, y2, x3, y3) {
+    let tp = [
+      y2 - y3, x3 - x2, x2*y3 - x3*y2,
+      y3 - y1, x1 - x3, x3*y1 - x1*y3,
+      y1 - y2, x2 - x1, x1*y2 - x2*y1];
+    let det = tp[2] + tp[5] + tp[8];
+    return tp.map(function(x) { return x / det;});
+  }
+
+  function parsePointMap(size, map) {
+    if (!Array.isArray(map) || !map.length) {
+      map = [0, 0, size[0], size[1]];
+    }
+    if (typeof(map[0]) == "number") {
+      if (map.length < 4) {
+        let tmp = map;
+        map = [0, 0, size[0], size[1]];
+        for (let i = 0; i < tmp.length; i++) {
+          map[i] = tmp[i];
+        }
+      }
+      return [
+          new Vector({x:map[0], y:map[1], z:1}),
+          new Vector({x:map[0] + map[2], y:map[1], z:1}),
+          new Vector({x:map[0], y:map[1] + map[3], z:1})
+        ];
+    } else {
+      return [new Vector(map[0]), new Vector(map[1]), new Vector(map[2])];
+    }
+  }
+
+  var idCounter = 0;
+
+  const optionKeys = [
+    'img',
+    'linearGrad',
+    'radialGrad',
+    'colorStops',
+    'src',
+    'dst'
+  ]
+
+  /**
+   * Creates a tecture map. Possible options:
+   *    img: Image object to be used as texture
+   *    linearGrad: [x1, y1, x2, y2]  Array defining the linear gradient
+   *    radialGrad: [x0, y0, r0, x1, y1, r1] Array defining the radial gradient
+   *    colorStops: [offset1, color1, offset2, color2...] Array defining the color
+   *                stops for the gradient, offset must be in range [0, 1]
+   *
+   *    src: <surface definition> Represents the surface for the texture. Above
+   *         gradient definition should be represented in this coordinate space
+   *    dst: <surface definition> Represents the surface of the object. This allows
+   *         keeping the texture definition independent of the surface definition
+   *
+   *   <surface definition> Can be represented in one of the following ways:
+   *     [x, y, width, height] => We use 3 points top-left, top-right, bottom-left
+   *     [x, y] => image/gradient size is used for width and height with the above rule
+   *     [vector, vector, vector] => provided points are used
+   */
+  function Texture(options) {
+    this.id = idCounter++;
+    this.isTexture = true;
+
+    options = options || { }
+    for (var key in options ) {
+      if (optionKeys.indexOf( key ) != -1 ) {
+        this[key] = options[key];
+      }
+    }
+
+    var size;
+    if (options.img) {
+      size = [options.img.width, options.img.height];
+    } else if (options.linearGrad) {
+      size = [Math.abs(options.linearGrad[2] - options.linearGrad[0]), Math.abs(options.linearGrad[3] - options.linearGrad[1])];
+    } else if (options.radialGrad) {
+      size = [Math.abs(options.radialGrad[3] - options.radialGrad[0]), Math.abs(options.radialGrad[4] - options.radialGrad[1])];
+    } else {
+      throw "One of [img, linearGrad, radialGrad] is required";
+    }
+    if (size[0] == 0) size[0] = size[1];
+    if (size[1] == 0) size[1] = size[0];
+
+    this.src = parsePointMap(size, options.src);
+    this.dst = parsePointMap(size, options.dst);
+
+    this.srcInverse = inverse(
+      this.src[0].x, this.src[0].y,
+      this.src[1].x, this.src[1].y,
+      this.src[2].x, this.src[2].y);
+    this.p1 = new Vector();
+    this.p2 = new Vector();
+    this.p3 = new Vector();
+    this.matrix = [0, 0, 0, 0, 0, 0];
+  };
+
+  Texture.prototype.getMatrix = function() {
+    let m = this.matrix;
+    let inverse = this.srcInverse;
+    m[0] = this.p1.x * inverse[0] + this.p2.x * inverse[3] + this.p3.x * inverse[6];
+    m[1] = this.p1.y * inverse[0] + this.p2.y * inverse[3] + this.p3.y * inverse[6];
+    m[2] = this.p1.x * inverse[1] + this.p2.x * inverse[4] + this.p3.x * inverse[7];
+    m[3] = this.p1.y * inverse[1] + this.p2.y * inverse[4] + this.p3.y * inverse[7];
+    m[4] = this.p1.x * inverse[2] + this.p2.x * inverse[5] + this.p3.x * inverse[8];
+    m[5] = this.p1.y * inverse[2] + this.p2.y * inverse[5] + this.p3.y * inverse[8];
+    return m;
+  }
+
+  Texture.prototype.getCanvasFill = function(ctx) {
+    if (!this.pattern) {
+      if (this.img) {
+        this.pattern = ctx.createPattern(this.img, "repeat");
+      } else {
+        this.pattern = this.linearGrad
+          ? ctx.createLinearGradient.apply(ctx, this.linearGrad)
+          : ctx.createRadialGradient.apply(ctx, this.radialGrad);
+        if (this.colorStops) {
+          for (var i = 0; i < this.colorStops.length; i+=2) {
+            this.pattern.addColorStop(this.colorStops[i], this.colorStops[i+1]);
+          }
+        }
+      }
+    }
+    // pattern.setTransform is not supported in IE,
+    // so transform the context instead
+    ctx.transform.apply(ctx, this.getMatrix());
+    return this.pattern;
+  };
+
+  const svgURI = 'http://www.w3.org/2000/svg';
+  Texture.prototype.getSvgFill = function(svg) {
+    if (!this.svgPattern) {
+      if (this.img) {
+        this.svgPattern = document.createElementNS( svgURI, 'pattern');
+        this.svgPattern.setAttribute("width", this.img.width);
+        this.svgPattern.setAttribute("height", this.img.height);
+        this.svgPattern.setAttribute("patternUnits", "userSpaceOnUse");
+        this.attrTransform = "patternTransform";
+
+        let img = document.createElementNS( svgURI, 'image');
+        img.setAttribute("href", this.img.src);
+        this.svgPattern.appendChild(img);
+      } else {
+        var type, vals, keys;
+        if (this.linearGrad) {
+          type = "linearGradient";
+          vals = this.linearGrad;
+          keys = ["x1", "y1", "x2", "y2"]
+        } else {
+          type = "radialGradient";
+          vals = this.radialGrad;
+          keys = ["fx", "fy", "fr", "cx", "cy", "r"]
+        }
+        this.svgPattern = document.createElementNS( svgURI, type);
+        for (var i = 0; i < keys.length; i++) {
+          this.svgPattern.setAttribute(keys[i], vals[i]);
+        }
+
+        if (this.colorStops) {
+          for (var i = 0; i < this.colorStops.length; i+=2) {
+            let colorStop = document.createElementNS(svgURI, 'stop' );
+            colorStop.setAttribute("offset", this.colorStops[i]);
+            colorStop.setAttribute("style", "stop-color:" + this.colorStops[i+1]);
+            this.svgPattern.appendChild(colorStop);
+          }
+        }
+        this.svgPattern.setAttribute("gradientUnits", "userSpaceOnUse");
+        this.attrTransform = "gradientTransform";
+      }
+      this.svgPattern.setAttribute("id", "texture_" + this.id);
+      this._svgUrl = 'url(#texture_' + this.id + ')';
+
+      this.defs = document.createElementNS(svgURI, 'defs' );
+      this.defs.appendChild(this.svgPattern);
+    }
+
+    this.svgPattern.setAttribute(this.attrTransform, 'matrix(' + this.getMatrix().join(' ') + ')');
+    svg.appendChild( this.defs );
+    return this._svgUrl;
+  }
+
+  // ----- update ----- //
+  Texture.prototype.reset = function() {
+    this.p1.set(this.dst[0]);
+    this.p2.set(this.dst[1]);
+    this.p3.set(this.dst[2]);
+  };
+
+  Texture.prototype.transform = function( translation, rotation, scale ) {
+    this.p1.transform(translation, rotation, scale);
+    this.p2.transform(translation, rotation, scale);
+    this.p3.transform(translation, rotation, scale);
+  };
+
+  Texture.prototype.clone = function() {
+    return new Texture(this);
+  };
+
+  return Texture;
+} ) );
+/**
  * Index
  */
 
···
         require('./hemisphere'),
         require('./cylinder'),
         require('./cone'),
-        require('./box')
+        require('./horn'),
+        require('./funnel'),
+        require('./box'),
+        require('./texture')
     );
   } else if ( typeof define == 'function' && define.amd ) {
     /* globals define */ // AMD
···
 /* eslint-disable max-params */
 } )( this, function factory( Zdog, CanvasRenderer, SvgRenderer, Vector, Anchor,
     Dragger, Illustration, PathCommand, Shape, Group, Rect, RoundedRect,
-    Ellipse, Polygon, Hemisphere, Cylinder, Cone, Box ) {
+    Ellipse, Polygon, Hemisphere, Cylinder, Cone, Horn, Funnel, Box, Texture ) {
 /* eslint-enable max-params */
 
       Zdog.CanvasRenderer = CanvasRenderer;
···
       Zdog.Hemisphere = Hemisphere;
       Zdog.Cylinder = Cylinder;
       Zdog.Cone = Cone;
+      Zdog.Horn = Horn;
+      Zdog.Funnel = Funnel;
       Zdog.Box = Box;
+      Zdog.Texture = Texture;
 
       return Zdog;
 } );

dist/zdog.dist.min.js

···
  * https://zzz.dog
  * Copyright 2020 Metafizzy
  */
-(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog=e()}})(this,function t(){var e={};e.TAU=Math.PI*2;e.extend=function(t,e){for(var r in e){t[r]=e[r]}return t};e.lerp=function(t,e,r){return(e-t)*r+t};e.modulo=function(t,e){return(t%e+e)%e};var s={2:function(t){return t*t},3:function(t){return t*t*t},4:function(t){return t*t*t*t},5:function(t){return t*t*t*t*t}};e.easeInOut=function(t,e){if(e==1){return t}t=Math.max(0,Math.min(1,t));var r=t<.5;var i=r?t:1-t;i/=.5;var n=s[e]||s[2];var o=n(i);o/=2;return r?o:1-o};return e});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog.CanvasRenderer=e()}})(this,function t(){var n={isCanvas:true};n.begin=function(t){t.beginPath()};n.move=function(t,e,r){t.moveTo(r.x,r.y)};n.line=function(t,e,r){t.lineTo(r.x,r.y)};n.bezier=function(t,e,r,i,n){t.bezierCurveTo(r.x,r.y,i.x,i.y,n.x,n.y)};n.closePath=function(t){t.closePath()};n.setPath=function(){};n.renderPath=function(e,r,t,i){this.begin(e,r);t.forEach(function(t){t.render(e,r,n)});if(i){this.closePath(e,r)}};n.stroke=function(t,e,r,i,n){if(!r){return}t.strokeStyle=i;t.lineWidth=n;t.stroke()};n.fill=function(t,e,r,i){if(!r){return}t.fillStyle=i;t.fill()};n.end=function(){};return n});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog.SvgRenderer=e()}})(this,function t(){var o={isSvg:true};var e=o.round=function(t){return Math.round(t*1e3)/1e3};function s(t){return e(t.x)+","+e(t.y)+" "}o.begin=function(){};o.move=function(t,e,r){return"M"+s(r)};o.line=function(t,e,r){return"L"+s(r)};o.bezier=function(t,e,r,i,n){return"C"+s(r)+s(i)+s(n)};o.closePath=function(){return"Z"};o.setPath=function(t,e,r){e.setAttribute("d",r)};o.renderPath=function(e,r,t,i){var n="";t.forEach(function(t){n+=t.render(e,r,o)});if(i){n+=this.closePath(e,r)}this.setPath(e,r,n)};o.stroke=function(t,e,r,i,n){if(!r){return}e.setAttribute("stroke",i);e.setAttribute("stroke-width",n)};o.fill=function(t,e,r,i){var n=r?i:"none";e.setAttribute("fill",n)};o.end=function(t,e){t.appendChild(e)};return o});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"))}else{var r=t.Zdog;r.Vector=e(r)}})(this,function t(r){function e(t){this.set(t)}var h=r.TAU;e.prototype.set=function(t){this.x=t&&t.x||0;this.y=t&&t.y||0;this.z=t&&t.z||0;return this};e.prototype.write=function(t){if(!t){return this}this.x=t.x!=undefined?t.x:this.x;this.y=t.y!=undefined?t.y:this.y;this.z=t.z!=undefined?t.z:this.z;return this};e.prototype.rotate=function(t){if(!t){return}this.rotateZ(t.z);this.rotateY(t.y);this.rotateX(t.x);return this};e.prototype.rotateZ=function(t){i(this,t,"x","y")};e.prototype.rotateX=function(t){i(this,t,"y","z")};e.prototype.rotateY=function(t){i(this,t,"x","z")};function i(t,e,r,i){if(!e||e%h===0){return}var n=Math.cos(e);var o=Math.sin(e);var s=t[r];var a=t[i];t[r]=s*n-a*o;t[i]=a*n+s*o}e.prototype.isSame=function(t){if(!t){return false}return this.x===t.x&&this.y===t.y&&this.z===t.z};e.prototype.add=function(t){if(!t){return this}this.x+=t.x||0;this.y+=t.y||0;this.z+=t.z||0;return this};e.prototype.subtract=function(t){if(!t){return this}this.x-=t.x||0;this.y-=t.y||0;this.z-=t.z||0;return this};e.prototype.multiply=function(t){if(t==undefined){return this}if(typeof t=="number"){this.x*=t;this.y*=t;this.z*=t}else{this.x*=t.x!=undefined?t.x:1;this.y*=t.y!=undefined?t.y:1;this.z*=t.z!=undefined?t.z:1}return this};e.prototype.transform=function(t,e,r){this.multiply(r);this.rotate(e);this.add(t);return this};e.prototype.lerp=function(t,e){this.x=r.lerp(this.x,t.x||0,e);this.y=r.lerp(this.y,t.y||0,e);this.z=r.lerp(this.z,t.z||0,e);return this};e.prototype.magnitude=function(){var t=this.x*this.x+this.y*this.y+this.z*this.z;return n(t)};function n(t){if(Math.abs(t-1)<1e-8){return 1}return Math.sqrt(t)}e.prototype.magnitude2d=function(){var t=this.x*this.x+this.y*this.y;return n(t)};e.prototype.copy=function(){return new e(this)};return e});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./vector"),require("./canvas-renderer"),require("./svg-renderer"))}else{var r=t.Zdog;r.Anchor=e(r,r.Vector,r.CanvasRenderer,r.SvgRenderer)}})(this,function t(n,e,r,i){var o=n.TAU;var s={x:1,y:1,z:1};function a(t){this.create(t||{})}a.prototype.create=function(t){this.children=[];n.extend(this,this.constructor.defaults);this.setOptions(t);this.translate=new e(t.translate);this.rotate=new e(t.rotate);this.scale=new e(s).multiply(this.scale);this.origin=new e;this.renderOrigin=new e;if(this.addTo){this.addTo.addChild(this)}};a.defaults={};a.optionKeys=Object.keys(a.defaults).concat(["rotate","translate","scale","addTo"]);a.prototype.setOptions=function(t){var e=this.constructor.optionKeys;for(var r in t){if(e.indexOf(r)!=-1){this[r]=t[r]}}};a.prototype.addChild=function(t){if(this.children.indexOf(t)!=-1){return}t.remove();t.addTo=this;this.children.push(t)};a.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(e!=-1){this.children.splice(e,1)}};a.prototype.remove=function(){if(this.addTo){this.addTo.removeChild(this)}};a.prototype.update=function(){this.reset();this.children.forEach(function(t){t.update()});this.transform(this.translate,this.rotate,this.scale)};a.prototype.reset=function(){this.renderOrigin.set(this.origin)};a.prototype.transform=function(e,r,i){this.renderOrigin.transform(e,r,i);this.children.forEach(function(t){t.transform(e,r,i)})};a.prototype.updateGraph=function(){this.update();this.updateFlatGraph();this.flatGraph.forEach(function(t){t.updateSortValue()});this.flatGraph.sort(a.shapeSorter)};a.shapeSorter=function(t,e){return t.sortValue-e.sortValue};Object.defineProperty(a.prototype,"flatGraph",{get:function(){if(!this._flatGraph){this.updateFlatGraph()}return this._flatGraph},set:function(t){this._flatGraph=t}});a.prototype.updateFlatGraph=function(){this.flatGraph=this.getFlatGraph()};a.prototype.getFlatGraph=function(){var t=[this];return this.addChildFlatGraph(t)};a.prototype.addChildFlatGraph=function(r){this.children.forEach(function(t){var e=t.getFlatGraph();Array.prototype.push.apply(r,e)});return r};a.prototype.updateSortValue=function(){this.sortValue=this.renderOrigin.z};a.prototype.render=function(){};a.prototype.renderGraphCanvas=function(e){if(!e){throw new Error("ctx is "+e+". "+"Canvas context required for render. Check .renderGraphCanvas( ctx ).")}this.flatGraph.forEach(function(t){t.render(e,r)})};a.prototype.renderGraphSvg=function(e){if(!e){throw new Error("svg is "+e+". "+"SVG required for render. Check .renderGraphSvg( svg ).")}this.flatGraph.forEach(function(t){t.render(e,i)})};a.prototype.copy=function(t){var e={};var r=this.constructor.optionKeys;r.forEach(function(t){e[t]=this[t]},this);n.extend(e,t);var i=this.constructor;return new i(e)};a.prototype.copyGraph=function(t){var e=this.copy(t);this.children.forEach(function(t){t.copyGraph({addTo:e})});return e};a.prototype.normalizeRotate=function(){this.rotate.x=n.modulo(this.rotate.x,o);this.rotate.y=n.modulo(this.rotate.y,o);this.rotate.z=n.modulo(this.rotate.z,o)};function h(r){return function(t){function e(t){this.create(t||{})}e.prototype=Object.create(r.prototype);e.prototype.constructor=e;e.defaults=n.extend({},r.defaults);n.extend(e.defaults,t);e.optionKeys=r.optionKeys.slice(0);Object.keys(e.defaults).forEach(function(t){if(!e.optionKeys.indexOf(t)!=1){e.optionKeys.push(t)}});e.subclass=h(e);return e}}a.subclass=h(a);return a});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog.Dragger=e()}})(this,function t(){var r=typeof window!="undefined";var e="mousedown";var i="mousemove";var n="mouseup";if(r){if(window.PointerEvent){e="pointerdown";i="pointermove";n="pointerup"}else if("ontouchstart"in window){e="touchstart";i="touchmove";n="touchend"}}function o(){}function s(t){this.create(t||{})}s.prototype.create=function(t){this.onDragStart=t.onDragStart||o;this.onDragMove=t.onDragMove||o;this.onDragEnd=t.onDragEnd||o;this.bindDrag(t.startElement)};s.prototype.bindDrag=function(t){t=this.getQueryElement(t);if(!t){return}t.style.touchAction="none";t.addEventListener(e,this)};s.prototype.getQueryElement=function(t){if(typeof t=="string"){t=document.querySelector(t)}return t};s.prototype.handleEvent=function(t){var e=this["on"+t.type];if(e){e.call(this,t)}};s.prototype.onmousedown=s.prototype.onpointerdown=function(t){this.dragStart(t,t)};s.prototype.ontouchstart=function(t){this.dragStart(t,t.changedTouches[0])};s.prototype.dragStart=function(t,e){t.preventDefault();this.dragStartX=e.pageX;this.dragStartY=e.pageY;if(r){window.addEventListener(i,this);window.addEventListener(n,this)}this.onDragStart(e)};s.prototype.ontouchmove=function(t){this.dragMove(t,t.changedTouches[0])};s.prototype.onmousemove=s.prototype.onpointermove=function(t){this.dragMove(t,t)};s.prototype.dragMove=function(t,e){t.preventDefault();var r=e.pageX-this.dragStartX;var i=e.pageY-this.dragStartY;this.onDragMove(e,r,i)};s.prototype.onmouseup=s.prototype.onpointerup=s.prototype.ontouchend=s.prototype.dragEnd=function(){window.removeEventListener(i,this);window.removeEventListener(n,this);this.onDragEnd()};return s});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./anchor"),require("./dragger"))}else{var r=t.Zdog;r.Illustration=e(r,r.Anchor,r.Dragger)}})(this,function t(e,r,a){function i(){}var h=e.TAU;var n=r.subclass({element:undefined,centered:true,zoom:1,dragRotate:false,resize:false,onPrerender:i,onDragStart:i,onDragMove:i,onDragEnd:i,onResize:i});e.extend(n.prototype,a.prototype);n.prototype.create=function(t){r.prototype.create.call(this,t);a.prototype.create.call(this,t);this.setElement(this.element);this.setDragRotate(this.dragRotate);this.setResize(this.resize)};n.prototype.setElement=function(t){t=this.getQueryElement(t);if(!t){throw new Error("Zdog.Illustration element required. Set to "+t)}var e=t.nodeName.toLowerCase();if(e=="canvas"){this.setCanvas(t)}else if(e=="svg"){this.setSvg(t)}};n.prototype.setSize=function(t,e){t=Math.round(t);e=Math.round(e);if(this.isCanvas){this.setSizeCanvas(t,e)}else if(this.isSvg){this.setSizeSvg(t,e)}};n.prototype.setResize=function(t){this.resize=t;if(!this.resizeListener){this.resizeListener=this.onWindowResize.bind(this)}if(t){window.addEventListener("resize",this.resizeListener);this.onWindowResize()}else{window.removeEventListener("resize",this.resizeListener)}};n.prototype.onWindowResize=function(){this.setMeasuredSize();this.onResize(this.width,this.height)};n.prototype.setMeasuredSize=function(){var t,e;var r=this.resize=="fullscreen";if(r){t=window.innerWidth;e=window.innerHeight}else{var i=this.element.getBoundingClientRect();t=i.width;e=i.height}this.setSize(t,e)};n.prototype.renderGraph=function(t){if(this.isCanvas){this.renderGraphCanvas(t)}else if(this.isSvg){this.renderGraphSvg(t)}};n.prototype.updateRenderGraph=function(t){this.updateGraph();this.renderGraph(t)};n.prototype.setCanvas=function(t){this.element=t;this.isCanvas=true;this.ctx=this.element.getContext("2d");this.setSizeCanvas(t.width,t.height)};n.prototype.setSizeCanvas=function(t,e){this.width=t;this.height=e;var r=this.pixelRatio=window.devicePixelRatio||1;this.element.width=this.canvasWidth=t*r;this.element.height=this.canvasHeight=e*r;var i=r>1&&!this.resize;if(i){this.element.style.width=t+"px";this.element.style.height=e+"px"}};n.prototype.renderGraphCanvas=function(t){t=t||this;this.prerenderCanvas();r.prototype.renderGraphCanvas.call(t,this.ctx);this.postrenderCanvas()};n.prototype.prerenderCanvas=function(){var t=this.ctx;t.lineCap="round";t.lineJoin="round";t.clearRect(0,0,this.canvasWidth,this.canvasHeight);t.save();if(this.centered){var e=this.width/2*this.pixelRatio;var r=this.height/2*this.pixelRatio;t.translate(e,r)}var i=this.pixelRatio*this.zoom;t.scale(i,i);this.onPrerender(t)};n.prototype.postrenderCanvas=function(){this.ctx.restore()};n.prototype.setSvg=function(t){this.element=t;this.isSvg=true;this.pixelRatio=1;var e=t.getAttribute("width");var r=t.getAttribute("height");this.setSizeSvg(e,r)};n.prototype.setSizeSvg=function(t,e){this.width=t;this.height=e;var r=t/this.zoom;var i=e/this.zoom;var n=this.centered?-r/2:0;var o=this.centered?-i/2:0;this.element.setAttribute("viewBox",n+" "+o+" "+r+" "+i);if(this.resize){this.element.removeAttribute("width");this.element.removeAttribute("height")}else{this.element.setAttribute("width",t);this.element.setAttribute("height",e)}};n.prototype.renderGraphSvg=function(t){t=t||this;o(this.element);this.onPrerender(this.element);r.prototype.renderGraphSvg.call(t,this.element)};function o(t){while(t.firstChild){t.removeChild(t.firstChild)}}n.prototype.setDragRotate=function(t){if(!t){return}else if(t===true){t=this}this.dragRotate=t;this.bindDrag(this.element)};n.prototype.dragStart=function(){this.dragStartRX=this.dragRotate.rotate.x;this.dragStartRY=this.dragRotate.rotate.y;a.prototype.dragStart.apply(this,arguments)};n.prototype.dragMove=function(t,e){var r=e.pageX-this.dragStartX;var i=e.pageY-this.dragStartY;var n=Math.min(this.width,this.height);var o=r/n*h;var s=i/n*h;this.dragRotate.rotate.x=this.dragStartRX-s;this.dragRotate.rotate.y=this.dragStartRY-o;a.prototype.dragMove.apply(this,arguments)};return n});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./vector"))}else{var r=t.Zdog;r.PathCommand=e(r.Vector)}})(this,function t(i){function e(t,e,r){this.method=t;this.points=e.map(n);this.renderPoints=e.map(o);this.previousPoint=r;this.endRenderPoint=this.renderPoints[this.renderPoints.length-1];if(t=="arc"){this.controlPoints=[new i,new i]}}function n(t){if(t instanceof i){return t}else{return new i(t)}}function o(t){return new i(t)}e.prototype.reset=function(){var i=this.points;this.renderPoints.forEach(function(t,e){var r=i[e];t.set(r)})};e.prototype.transform=function(e,r,i){this.renderPoints.forEach(function(t){t.transform(e,r,i)})};e.prototype.render=function(t,e,r){return this[this.method](t,e,r)};e.prototype.move=function(t,e,r){return r.move(t,e,this.renderPoints[0])};e.prototype.line=function(t,e,r){return r.line(t,e,this.renderPoints[0])};e.prototype.bezier=function(t,e,r){var i=this.renderPoints[0];var n=this.renderPoints[1];var o=this.renderPoints[2];return r.bezier(t,e,i,n,o)};var h=9/16;e.prototype.arc=function(t,e,r){var i=this.previousPoint;var n=this.renderPoints[0];var o=this.renderPoints[1];var s=this.controlPoints[0];var a=this.controlPoints[1];s.set(i).lerp(n,h);a.set(o).lerp(n,h);return r.bezier(t,e,s,a,o)};return e});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./vector"),require("./path-command"),require("./anchor"))}else{var r=t.Zdog;r.Shape=e(r,r.Vector,r.PathCommand,r.Anchor)}})(this,function t(e,r,p,i){var n=i.subclass({stroke:1,fill:false,color:"#333",closed:true,visible:true,path:[{}],front:{z:1},backface:true});n.prototype.create=function(t){i.prototype.create.call(this,t);this.updatePath();this.front=new r(t.front||this.front);this.renderFront=new r(this.front);this.renderNormal=new r};var d=["move","line","bezier","arc"];n.prototype.updatePath=function(){this.setPath();this.updatePathCommands()};n.prototype.setPath=function(){};n.prototype.updatePathCommands=function(){var u;this.pathCommands=this.path.map(function(t,e){var r=Object.keys(t);var i=r[0];var n=t[i];var o=r.length==1&&d.indexOf(i)!=-1;if(!o){i="line";n=t}var s=i=="line"||i=="move";var a=Array.isArray(n);if(s&&!a){n=[n]}i=e===0?"move":i;var h=new p(i,n,u);u=h.endRenderPoint;return h})};n.prototype.reset=function(){this.renderOrigin.set(this.origin);this.renderFront.set(this.front);this.pathCommands.forEach(function(t){t.reset()})};n.prototype.transform=function(e,r,i){this.renderOrigin.transform(e,r,i);this.renderFront.transform(e,r,i);this.renderNormal.set(this.renderOrigin).subtract(this.renderFront);this.pathCommands.forEach(function(t){t.transform(e,r,i)});this.children.forEach(function(t){t.transform(e,r,i)})};n.prototype.updateSortValue=function(){var t=this.pathCommands.length;var e=this.pathCommands[0].endRenderPoint;var r=this.pathCommands[t-1].endRenderPoint;var i=t>2&&e.isSame(r);if(i){t-=1}var n=0;for(var o=0;o<t;o++){n+=this.pathCommands[o].endRenderPoint.z}this.sortValue=n/t};n.prototype.render=function(t,e){var r=this.pathCommands.length;if(!this.visible||!r){return}this.isFacingBack=this.renderNormal.z>0;if(!this.backface&&this.isFacingBack){return}if(!e){throw new Error("Zdog renderer required. Set to "+e)}var i=r==1;if(e.isCanvas&&i){this.renderCanvasDot(t,e)}else{this.renderPath(t,e)}};var o=e.TAU;n.prototype.renderCanvasDot=function(t){var e=this.getLineWidth();if(!e){return}t.fillStyle=this.getRenderColor();var r=this.pathCommands[0].endRenderPoint;t.beginPath();var i=e/2;t.arc(r.x,r.y,i,0,o);t.fill()};n.prototype.getLineWidth=function(){if(!this.stroke){return 0}if(this.stroke==true){return 1}return this.stroke};n.prototype.getRenderColor=function(){var t=typeof this.backface=="string"&&this.isFacingBack;var e=t?this.backface:this.color;return e};n.prototype.renderPath=function(t,e){var r=this.getRenderElement(t,e);var i=this.pathCommands.length==2&&this.pathCommands[1].method=="line";var n=!i&&this.closed;var o=this.getRenderColor();e.renderPath(t,r,this.pathCommands,n);e.stroke(t,r,this.stroke,o,this.getLineWidth());e.fill(t,r,this.fill,o);e.end(t,r)};var s="http://www.w3.org/2000/svg";n.prototype.getRenderElement=function(t,e){if(!e.isSvg){return}if(!this.svgElement){this.svgElement=document.createElementNS(s,"path");this.svgElement.setAttribute("stroke-linecap","round");this.svgElement.setAttribute("stroke-linejoin","round")}return this.svgElement};return n});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./anchor"))}else{var r=t.Zdog;r.Group=e(r.Anchor)}})(this,function t(r){var e=r.subclass({updateSort:false,visible:true});e.prototype.updateSortValue=function(){var e=0;this.flatGraph.forEach(function(t){t.updateSortValue();e+=t.sortValue});this.sortValue=e/this.flatGraph.length;if(this.updateSort){this.flatGraph.sort(r.shapeSorter)}};e.prototype.render=function(e,r){if(!this.visible){return}this.flatGraph.forEach(function(t){t.render(e,r)})};e.prototype.updateFlatGraph=function(){var t=[];this.flatGraph=this.addChildFlatGraph(t)};e.prototype.getFlatGraph=function(){return[this]};return e});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./shape"))}else{var r=t.Zdog;r.Rect=e(r.Shape)}})(this,function t(e){var r=e.subclass({width:1,height:1});r.prototype.setPath=function(){var t=this.width/2;var e=this.height/2;this.path=[{x:-t,y:-e},{x:t,y:-e},{x:t,y:e},{x:-t,y:e}]};return r});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./shape"))}else{var r=t.Zdog;r.RoundedRect=e(r.Shape)}})(this,function t(e){var r=e.subclass({width:1,height:1,cornerRadius:.25,closed:false});r.prototype.setPath=function(){var t=this.width/2;var e=this.height/2;var r=Math.min(t,e);var i=Math.min(this.cornerRadius,r);var n=t-i;var o=e-i;var s=[{x:n,y:-e},{arc:[{x:t,y:-e},{x:t,y:-o}]}];if(o){s.push({x:t,y:o})}s.push({arc:[{x:t,y:e},{x:n,y:e}]});if(n){s.push({x:-n,y:e})}s.push({arc:[{x:-t,y:e},{x:-t,y:o}]});if(o){s.push({x:-t,y:-o})}s.push({arc:[{x:-t,y:-e},{x:-n,y:-e}]});if(n){s.push({x:n,y:-e})}this.path=s};return r});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./shape"))}else{var r=t.Zdog;r.Ellipse=e(r.Shape)}})(this,function t(e){var r=e.subclass({diameter:1,width:undefined,height:undefined,quarters:4,closed:false});r.prototype.setPath=function(){var t=this.width!=undefined?this.width:this.diameter;var e=this.height!=undefined?this.height:this.diameter;var r=t/2;var i=e/2;this.path=[{x:0,y:-i},{arc:[{x:r,y:-i},{x:r,y:0}]}];if(this.quarters>1){this.path.push({arc:[{x:r,y:i},{x:0,y:i}]})}if(this.quarters>2){this.path.push({arc:[{x:-r,y:i},{x:-r,y:0}]})}if(this.quarters>3){this.path.push({arc:[{x:-r,y:-i},{x:0,y:-i}]})}};return r});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./shape"))}else{var r=t.Zdog;r.Polygon=e(r,r.Shape)}})(this,function t(e,r){var i=r.subclass({sides:3,radius:.5});var n=e.TAU;i.prototype.setPath=function(){this.path=[];for(var t=0;t<this.sides;t++){var e=t/this.sides*n-n/4;var r=Math.cos(e)*this.radius;var i=Math.sin(e)*this.radius;this.path.push({x:r,y:i})}};return i});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./vector"),require("./anchor"),require("./ellipse"))}else{var r=t.Zdog;r.Hemisphere=e(r,r.Vector,r.Anchor,r.Ellipse)}})(this,function t(e,r,i,n){var o=n.subclass({fill:true});var u=e.TAU;o.prototype.create=function(){n.prototype.create.apply(this,arguments);this.apex=new i({addTo:this,translate:{z:this.diameter/2}});this.renderCentroid=new r};o.prototype.updateSortValue=function(){this.renderCentroid.set(this.renderOrigin).lerp(this.apex.renderOrigin,3/8);this.sortValue=this.renderCentroid.z};o.prototype.render=function(t,e){this.renderDome(t,e);n.prototype.render.apply(this,arguments)};o.prototype.renderDome=function(t,e){if(!this.visible){return}var r=this.getDomeRenderElement(t,e);var i=Math.atan2(this.renderNormal.y,this.renderNormal.x);var n=this.diameter/2*this.renderNormal.magnitude();var o=this.renderOrigin.x;var s=this.renderOrigin.y;if(e.isCanvas){var a=i+u/4;var h=i-u/4;t.beginPath();t.arc(o,s,n,a,h)}else if(e.isSvg){i=(i-u/4)/u*360;this.domeSvgElement.setAttribute("d","M "+-n+",0 A "+n+","+n+" 0 0 1 "+n+",0");this.domeSvgElement.setAttribute("transform","translate("+o+","+s+" ) rotate("+i+")")}e.stroke(t,r,this.stroke,this.color,this.getLineWidth());e.fill(t,r,this.fill,this.color);e.end(t,r)};var s="http://www.w3.org/2000/svg";o.prototype.getDomeRenderElement=function(t,e){if(!e.isSvg){return}if(!this.domeSvgElement){this.domeSvgElement=document.createElementNS(s,"path");this.domeSvgElement.setAttribute("stroke-linecap","round");this.domeSvgElement.setAttribute("stroke-linejoin","round")}return this.domeSvgElement};return o});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./path-command"),require("./shape"),require("./group"),require("./ellipse"))}else{var r=t.Zdog;r.Cylinder=e(r,r.PathCommand,r.Shape,r.Group,r.Ellipse)}})(this,function t(e,r,i,n,o){function s(){}var a=n.subclass({color:"#333",updateSort:true});a.prototype.create=function(){n.prototype.create.apply(this,arguments);this.pathCommands=[new r("move",[{}]),new r("line",[{}])]};a.prototype.render=function(t,e){this.renderCylinderSurface(t,e);n.prototype.render.apply(this,arguments)};a.prototype.renderCylinderSurface=function(t,e){if(!this.visible){return}var r=this.getRenderElement(t,e);var i=this.frontBase;var n=this.rearBase;var o=i.renderNormal.magnitude();var s=i.diameter*o+i.getLineWidth();this.pathCommands[0].renderPoints[0].set(i.renderOrigin);this.pathCommands[1].renderPoints[0].set(n.renderOrigin);if(e.isCanvas){t.lineCap="butt"}e.renderPath(t,r,this.pathCommands);e.stroke(t,r,true,this.color,s);e.end(t,r);if(e.isCanvas){t.lineCap="round"}};var h="http://www.w3.org/2000/svg";a.prototype.getRenderElement=function(t,e){if(!e.isSvg){return}if(!this.svgElement){this.svgElement=document.createElementNS(h,"path")}return this.svgElement};a.prototype.copyGraph=s;var u=o.subclass();u.prototype.copyGraph=s;var p=i.subclass({diameter:1,length:1,frontFace:undefined,fill:true});var d=e.TAU;p.prototype.create=function(){i.prototype.create.apply(this,arguments);this.group=new a({addTo:this,color:this.color,visible:this.visible});var t=this.length/2;var e=this.backface||true;this.frontBase=this.group.frontBase=new o({addTo:this.group,diameter:this.diameter,translate:{z:t},rotate:{y:d/2},color:this.color,stroke:this.stroke,fill:this.fill,backface:this.frontFace||e,visible:this.visible});this.rearBase=this.group.rearBase=this.frontBase.copy({translate:{z:-t},rotate:{y:0},backface:e})};p.prototype.render=function(){};var c=["stroke","fill","color","visible"];c.forEach(function(e){var r="_"+e;Object.defineProperty(p.prototype,e,{get:function(){return this[r]},set:function(t){this[r]=t;if(this.frontBase){this.frontBase[e]=t;this.rearBase[e]=t;this.group[e]=t}}})});return p});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./vector"),require("./path-command"),require("./anchor"),require("./ellipse"))}else{var r=t.Zdog;r.Cone=e(r,r.Vector,r.PathCommand,r.Anchor,r.Ellipse)}})(this,function t(e,r,i,n,o){var s=o.subclass({length:1,fill:true});var v=e.TAU;s.prototype.create=function(){o.prototype.create.apply(this,arguments);this.apex=new n({addTo:this,translate:{z:this.length}});this.renderApex=new r;this.renderCentroid=new r;this.tangentA=new r;this.tangentB=new r;this.surfacePathCommands=[new i("move",[{}]),new i("line",[{}]),new i("line",[{}])]};s.prototype.updateSortValue=function(){this.renderCentroid.set(this.renderOrigin).lerp(this.apex.renderOrigin,1/3);this.sortValue=this.renderCentroid.z};s.prototype.render=function(t,e){this.renderConeSurface(t,e);o.prototype.render.apply(this,arguments)};s.prototype.renderConeSurface=function(t,e){if(!this.visible){return}this.renderApex.set(this.apex.renderOrigin).subtract(this.renderOrigin);var r=this.renderNormal.magnitude();var i=this.renderApex.magnitude2d();var n=this.renderNormal.magnitude2d();var o=Math.acos(n/r);var s=Math.sin(o);var a=this.diameter/2*r;var h=a*s<i;if(!h){return}var u=Math.atan2(this.renderNormal.y,this.renderNormal.x)+v/2;var p=i/s;var d=Math.acos(a/p);var c=this.tangentA;var f=this.tangentB;c.x=Math.cos(d)*a*s;c.y=Math.sin(d)*a;f.set(this.tangentA);f.y*=-1;c.rotateZ(u);f.rotateZ(u);c.add(this.renderOrigin);f.add(this.renderOrigin);this.setSurfaceRenderPoint(0,c);this.setSurfaceRenderPoint(1,this.apex.renderOrigin);this.setSurfaceRenderPoint(2,f);var l=this.getSurfaceRenderElement(t,e);e.renderPath(t,l,this.surfacePathCommands);e.stroke(t,l,this.stroke,this.color,this.getLineWidth());e.fill(t,l,this.fill,this.color);e.end(t,l)};var a="http://www.w3.org/2000/svg";s.prototype.getSurfaceRenderElement=function(t,e){if(!e.isSvg){return}if(!this.surfaceSvgElement){this.surfaceSvgElement=document.createElementNS(a,"path");this.surfaceSvgElement.setAttribute("stroke-linecap","round");this.surfaceSvgElement.setAttribute("stroke-linejoin","round")}return this.surfaceSvgElement};s.prototype.setSurfaceRenderPoint=function(t,e){var r=this.surfacePathCommands[t].renderPoints[0];r.set(e)};return s});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./anchor"),require("./shape"),require("./rect"))}else{var r=t.Zdog;r.Box=e(r,r.Anchor,r.Shape,r.Rect)}})(this,function t(e,r,i,n){var o=n.subclass();o.prototype.copyGraph=function(){};var s=e.TAU;var a=["frontFace","rearFace","leftFace","rightFace","topFace","bottomFace"];var h=e.extend({},i.defaults);delete h.path;a.forEach(function(t){h[t]=true});e.extend(h,{width:1,height:1,depth:1,fill:true});var u=r.subclass(h);u.prototype.create=function(t){r.prototype.create.call(this,t);this.updatePath();this.fill=this.fill};u.prototype.updatePath=function(){a.forEach(function(t){this[t]=this[t]},this)};a.forEach(function(e){var r="_"+e;Object.defineProperty(u.prototype,e,{get:function(){return this[r]},set:function(t){this[r]=t;this.setFace(e,t)}})});u.prototype.setFace=function(t,e){var r=t+"Rect";var i=this[r];if(!e){this.removeChild(i);return}var n=this.getFaceOptions(t);n.color=typeof e=="string"?e:this.color;if(i){i.setOptions(n)}else{i=this[r]=new o(n)}i.updatePath();this.addChild(i)};u.prototype.getFaceOptions=function(t){return{frontFace:{width:this.width,height:this.height,translate:{z:this.depth/2}},rearFace:{width:this.width,height:this.height,translate:{z:-this.depth/2},rotate:{y:s/2}},leftFace:{width:this.depth,height:this.height,translate:{x:-this.width/2},rotate:{y:-s/4}},rightFace:{width:this.depth,height:this.height,translate:{x:this.width/2},rotate:{y:s/4}},topFace:{width:this.width,height:this.depth,translate:{y:-this.height/2},rotate:{x:-s/4}},bottomFace:{width:this.width,height:this.depth,translate:{y:this.height/2},rotate:{x:s/4}}}[t]};var p=["color","stroke","fill","backface","front","visible"];p.forEach(function(o){var t="_"+o;Object.defineProperty(u.prototype,o,{get:function(){return this[t]},set:function(n){this[t]=n;a.forEach(function(t){var e=this[t+"Rect"];var r=typeof this[t]=="string";var i=o=="color"&&r;if(e&&!i){e[o]=n}},this)}})});return u});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./canvas-renderer"),require("./svg-renderer"),require("./vector"),require("./anchor"),require("./dragger"),require("./illustration"),require("./path-command"),require("./shape"),require("./group"),require("./rect"),require("./rounded-rect"),require("./ellipse"),require("./polygon"),require("./hemisphere"),require("./cylinder"),require("./cone"),require("./box"))}else if(typeof define=="function"&&define.amd){define("zdog",[],t.Zdog)}})(this,function t(e,r,i,n,o,s,a,h,u,p,d,c,f,l,v,y,m,g){e.CanvasRenderer=r;e.SvgRenderer=i;e.Vector=n;e.Anchor=o;e.Dragger=s;e.Illustration=a;e.PathCommand=h;e.Shape=u;e.Group=p;e.Rect=d;e.RoundedRect=c;e.Ellipse=f;e.Polygon=l;e.Hemisphere=v;e.Cylinder=y;e.Cone=m;e.Box=g;return e});
+(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog=e()}})(this,function t(){var e={};e.TAU=Math.PI*2;e.extend=function(t,e){for(var r in e){t[r]=e[r]}return t};e.lerp=function(t,e,r){return(e-t)*r+t};e.modulo=function(t,e){return(t%e+e)%e};var s={2:function(t){return t*t},3:function(t){return t*t*t},4:function(t){return t*t*t*t},5:function(t){return t*t*t*t*t}};e.easeInOut=function(t,e){if(e==1){return t}t=Math.max(0,Math.min(1,t));var r=t<.5;var i=r?t:1-t;i/=.5;var n=s[e]||s[2];var o=n(i);o/=2;return r?o:1-o};e.isColor=function(t){return typeof t=="string"||t&&t.isTexture};e.cloneColor=function(t){return t&&t.clone?t.clone():t};e.exportGraph=function(t){return JSON.parse(JSON.stringify(t))};return e});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog.CanvasRenderer=e()}})(this,function t(){var n={isCanvas:true};n.begin=function(t){t.beginPath()};n.move=function(t,e,r){t.moveTo(r.x,r.y)};n.line=function(t,e,r){t.lineTo(r.x,r.y)};n.bezier=function(t,e,r,i,n){t.bezierCurveTo(r.x,r.y,i.x,i.y,n.x,n.y)};n.closePath=function(t){t.closePath()};n.setPath=function(){};n.renderPath=function(e,r,t,i){this.begin(e,r);t.forEach(function(t){t.render(e,r,n)});if(i){this.closePath(e,r)}};n.stroke=function(t,e,r,i,n){if(!r){return}t.lineWidth=n;if(i&&i.getCanvasFill){t.save();t.strokeStyle=i.getCanvasFill(t);t.stroke();t.restore()}else{t.strokeStyle=i;t.stroke()}};n.fill=function(t,e,r,i){if(!r){return}if(i&&i.getCanvasFill){t.save();t.fillStyle=i.getCanvasFill(t);t.fill();t.restore()}else{t.fillStyle=i;t.fill()}};n.end=function(){};return n});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog.SvgRenderer=e()}})(this,function t(){var o={isSvg:true};var e=o.round=function(t){return Math.round(t*1e3)/1e3};function s(t){return e(t.x)+","+e(t.y)+" "}o.begin=function(){};o.move=function(t,e,r){return"M"+s(r)};o.line=function(t,e,r){return"L"+s(r)};o.bezier=function(t,e,r,i,n){return"C"+s(r)+s(i)+s(n)};o.closePath=function(){return"Z"};o.setPath=function(t,e,r){e.setAttribute("d",r)};o.renderPath=function(e,r,t,i){var n="";t.forEach(function(t){n+=t.render(e,r,o)});if(i){n+=this.closePath(e,r)}this.setPath(e,r,n)};o.stroke=function(t,e,r,i,n){if(!r){return}if(i&&i.getSvgFill){i=i.getSvgFill(t)}e.setAttribute("stroke",i);e.setAttribute("stroke-width",n)};o.fill=function(t,e,r,i){var n=r?i:"none";if(n&&n.getSvgFill){n=n.getSvgFill(t)}e.setAttribute("fill",n)};o.end=function(t,e){t.appendChild(e)};return o});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"))}else{var r=t.Zdog;r.Vector=e(r)}})(this,function t(r){function e(t){this.set(t)}var h=r.TAU;e.prototype.set=function(t){this.x=t&&t.x||0;this.y=t&&t.y||0;this.z=t&&t.z||0;return this};e.prototype.write=function(t){if(!t){return this}this.x=t.x!=undefined?t.x:this.x;this.y=t.y!=undefined?t.y:this.y;this.z=t.z!=undefined?t.z:this.z;return this};e.prototype.rotate=function(t){if(!t){return}this.rotateZ(t.z);this.rotateY(t.y);this.rotateX(t.x);return this};e.prototype.rotateZ=function(t){i(this,t,"x","y")};e.prototype.rotateX=function(t){i(this,t,"y","z")};e.prototype.rotateY=function(t){i(this,t,"x","z")};function i(t,e,r,i){if(!e||e%h===0){return}var n=Math.cos(e);var o=Math.sin(e);var s=t[r];var a=t[i];t[r]=s*n-a*o;t[i]=a*n+s*o}e.prototype.isSame=function(t){if(!t){return false}return this.x===t.x&&this.y===t.y&&this.z===t.z};e.prototype.add=function(t){if(!t){return this}this.x+=t.x||0;this.y+=t.y||0;this.z+=t.z||0;return this};e.prototype.subtract=function(t){if(!t){return this}this.x-=t.x||0;this.y-=t.y||0;this.z-=t.z||0;return this};e.prototype.multiply=function(t){if(t==undefined){return this}if(typeof t=="number"){this.x*=t;this.y*=t;this.z*=t}else{this.x*=t.x!=undefined?t.x:1;this.y*=t.y!=undefined?t.y:1;this.z*=t.z!=undefined?t.z:1}return this};e.prototype.transform=function(t,e,r){this.multiply(r);this.rotate(e);this.add(t);return this};e.prototype.lerp=function(t,e){this.x=r.lerp(this.x,t.x||0,e);this.y=r.lerp(this.y,t.y||0,e);this.z=r.lerp(this.z,t.z||0,e);return this};e.prototype.magnitude=function(){var t=this.x*this.x+this.y*this.y+this.z*this.z;return n(t)};function n(t){if(Math.abs(t-1)<1e-8){return 1}return Math.sqrt(t)}e.prototype.magnitude2d=function(){var t=this.x*this.x+this.y*this.y;return n(t)};e.prototype.copy=function(){return new e(this)};function o(t){return Math.round(t*1e3)/1e3}e.prototype.toJSON=function(){var t=this.x;var e=this.y;var r=this.z;if(t===e&&e===r){return t!==0?o(t):undefined}var i={x:t,y:e,z:r};var n={};Object.keys(i).forEach(function(t){var e=i[t];if(e!==0){n[t]=o(e)}});return Object.keys(n).length?n:undefined};return e});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./vector"),require("./canvas-renderer"),require("./svg-renderer"))}else{var r=t.Zdog;r.Anchor=e(r,r.Vector,r.CanvasRenderer,r.SvgRenderer)}})(this,function t(s,e,r,i){var n=s.TAU;var o={x:1,y:1,z:1};function a(t){this.create(t||{})}a.type="Anchor";a.prototype.create=function(t){this.children=[];s.extend(this,this.constructor.defaults);this.setOptions(t);this.translate=new e(t.translate);this.rotate=new e(t.rotate);this.scale=new e(o).multiply(this.scale);this.origin=new e;this.renderOrigin=new e;if(this.addTo){this.addTo.addChild(this)}if(t.importGraph){this.importGraph(t.importGraph)}};a.defaults={};a.optionKeys=Object.keys(a.defaults).concat(["rotate","translate","scale","addTo"]);a.ignoreKeysJSON=["addTo"];a.prototype.setOptions=function(t){var e=this.constructor.optionKeys;for(var r in t){if(e.indexOf(r)!=-1){this[r]=t[r]}}};a.prototype.addChild=function(t){if(this.children.indexOf(t)!=-1){return}t.remove();t.addTo=this;this.children.push(t)};a.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(e!=-1){this.children.splice(e,1)}};a.prototype.remove=function(){if(this.addTo){this.addTo.removeChild(this)}};a.prototype.update=function(){this.reset();this.children.forEach(function(t){t.update()});this.transform(this.translate,this.rotate,this.scale)};a.prototype.reset=function(){this.renderOrigin.set(this.origin)};a.prototype.transform=function(e,r,i){this.renderOrigin.transform(e,r,i);this.children.forEach(function(t){t.transform(e,r,i)})};a.prototype.updateGraph=function(){this.update();this.updateFlatGraph();this.flatGraph.forEach(function(t){t.updateSortValue()});this.flatGraph.sort(a.shapeSorter)};a.shapeSorter=function(t,e){return t.sortValue-e.sortValue};Object.defineProperty(a.prototype,"flatGraph",{get:function(){if(!this._flatGraph){this.updateFlatGraph()}return this._flatGraph},set:function(t){this._flatGraph=t}});a.prototype.updateFlatGraph=function(){this.flatGraph=this.getFlatGraph()};a.prototype.getFlatGraph=function(){var t=[this];return this.addChildFlatGraph(t)};a.prototype.addChildFlatGraph=function(r){this.children.forEach(function(t){var e=t.getFlatGraph();Array.prototype.push.apply(r,e)});return r};a.prototype.updateSortValue=function(){this.sortValue=this.renderOrigin.z};a.prototype.render=function(){};a.prototype.renderGraphCanvas=function(e){if(!e){throw new Error("ctx is "+e+". "+"Canvas context required for render. Check .renderGraphCanvas( ctx ).")}this.flatGraph.forEach(function(t){t.render(e,r)})};a.prototype.renderGraphSvg=function(e){if(!e){throw new Error("svg is "+e+". "+"SVG required for render. Check .renderGraphSvg( svg ).")}this.flatGraph.forEach(function(t){t.render(e,i)})};a.prototype.copy=function(t){var e={};var r=this.constructor.optionKeys;r.forEach(function(t){e[t]=this[t]},this);s.extend(e,t);var i=this.constructor;return new i(e)};a.prototype.copyGraph=function(t){var e=this.copy(t);this.children.forEach(function(t){t.copyGraph({addTo:e})});return e};a.prototype.importGraph=function(t){this.addChild(o(t));function o(t){t=s.extend({},t);var e=t.type==="Illustration"?"Anchor":t.type;var r=(t.children||[]).slice(0);delete t.children;var i=s[e];var n;if(i){n=new i(t);r.forEach(function(t){o(s.extend(t,{addTo:n}))})}return n}};a.prototype.normalizeRotate=function(){this.rotate.x=s.modulo(this.rotate.x,n);this.rotate.y=s.modulo(this.rotate.y,n);this.rotate.z=s.modulo(this.rotate.z,n)};a.prototype.toJSON=function(){var t=this.constructor.type;var i={type:t};var n=this.constructor.defaults;var e=this.constructor.optionKeys.slice(0).concat("children");var o=a.ignoreKeysJSON.slice(0).concat(this.constructor.ignoreKeysJSON||[]);e.forEach(function(t){if(o.indexOf(t)>-1){return}var e=this[t];if(!["undefined","function"].indexOf(typeof e)>-1&&e!==n[t]){if(Array.isArray(e)&&e.length===0){return}if(e.toJSON){var r=e.toJSON();if(typeof r!=="undefined"){if(t==="scale"&&r===1){return}i[t]=r}}else{i[t]=e}}},this);return i};function h(r){return function(t){function e(t){this.create(t||{})}e.prototype=Object.create(r.prototype);e.prototype.constructor=e;e.defaults=s.extend({},r.defaults);s.extend(e.defaults,t);e.optionKeys=r.optionKeys.slice(0);Object.keys(e.defaults).forEach(function(t){if(!e.optionKeys.indexOf(t)!=1){e.optionKeys.push(t)}});e.ignoreKeysJSON=r.ignoreKeysJSON.slice(0);e.subclass=h(e);return e}}a.subclass=h(a);return a});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog.Dragger=e()}})(this,function t(){var r=typeof window!="undefined";var e="mousedown";var i="mousemove";var n="mouseup";if(r){if(window.PointerEvent){e="pointerdown";i="pointermove";n="pointerup"}else if("ontouchstart"in window){e="touchstart";i="touchmove";n="touchend"}}function o(){}function s(t){this.create(t||{})}s.prototype.create=function(t){this.onDragStart=t.onDragStart||o;this.onDragMove=t.onDragMove||o;this.onDragEnd=t.onDragEnd||o;this.bindDrag(t.startElement)};s.prototype.bindDrag=function(t){t=this.getQueryElement(t);if(!t){return}t.style.touchAction="none";t.addEventListener(e,this)};s.prototype.getQueryElement=function(t){if(typeof t=="string"){t=document.querySelector(t)}return t};s.prototype.handleEvent=function(t){var e=this["on"+t.type];if(e){e.call(this,t)}};s.prototype.onmousedown=s.prototype.onpointerdown=function(t){this.dragStart(t,t)};s.prototype.ontouchstart=function(t){this.dragStart(t,t.changedTouches[0])};s.prototype.dragStart=function(t,e){t.preventDefault();this.dragStartX=e.pageX;this.dragStartY=e.pageY;if(r){window.addEventListener(i,this);window.addEventListener(n,this)}this.onDragStart(e)};s.prototype.ontouchmove=function(t){this.dragMove(t,t.changedTouches[0])};s.prototype.onmousemove=s.prototype.onpointermove=function(t){this.dragMove(t,t)};s.prototype.dragMove=function(t,e){t.preventDefault();var r=e.pageX-this.dragStartX;var i=e.pageY-this.dragStartY;this.onDragMove(e,r,i)};s.prototype.onmouseup=s.prototype.onpointerup=s.prototype.ontouchend=s.prototype.dragEnd=function(){window.removeEventListener(i,this);window.removeEventListener(n,this);this.onDragEnd()};return s});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./anchor"),require("./dragger"))}else{var r=t.Zdog;r.Illustration=e(r,r.Anchor,r.Dragger)}})(this,function t(e,r,a){function i(){}var h=e.TAU;var n=r.subclass({element:undefined,centered:true,zoom:1,dragRotate:false,resize:false,onPrerender:i,onDragStart:i,onDragMove:i,onDragEnd:i,onResize:i});n.ignoreKeysJSON=["dragRotate","element","resize"];n.type="Illustration";e.extend(n.prototype,a.prototype);n.prototype.create=function(t){r.prototype.create.call(this,t);a.prototype.create.call(this,t);this.setElement(this.element);this.setDragRotate(this.dragRotate);this.setResize(this.resize)};n.prototype.setElement=function(t){t=this.getQueryElement(t);if(!t){throw new Error("Zdog.Illustration element required. Set to "+t)}var e=t.nodeName.toLowerCase();if(e=="canvas"){this.setCanvas(t)}else if(e=="svg"){this.setSvg(t)}};n.prototype.setSize=function(t,e){t=Math.round(t);e=Math.round(e);if(this.isCanvas){this.setSizeCanvas(t,e)}else if(this.isSvg){this.setSizeSvg(t,e)}};n.prototype.setResize=function(t){this.resize=t;if(!this.resizeListener){this.resizeListener=this.onWindowResize.bind(this)}if(t){window.addEventListener("resize",this.resizeListener);this.onWindowResize()}else{window.removeEventListener("resize",this.resizeListener)}};n.prototype.onWindowResize=function(){this.setMeasuredSize();this.onResize(this.width,this.height)};n.prototype.setMeasuredSize=function(){var t,e;var r=this.resize=="fullscreen";if(r){t=window.innerWidth;e=window.innerHeight}else{var i=this.element.getBoundingClientRect();t=i.width;e=i.height}this.setSize(t,e)};n.prototype.renderGraph=function(t){if(this.isCanvas){this.renderGraphCanvas(t)}else if(this.isSvg){this.renderGraphSvg(t)}};n.prototype.updateRenderGraph=function(t){this.updateGraph();this.renderGraph(t)};n.prototype.setCanvas=function(t){this.element=t;this.isCanvas=true;this.ctx=this.element.getContext("2d");this.setSizeCanvas(t.width,t.height)};n.prototype.setSizeCanvas=function(t,e){this.width=t;this.height=e;var r=this.pixelRatio=window.devicePixelRatio||1;this.element.width=this.canvasWidth=t*r;this.element.height=this.canvasHeight=e*r;var i=r>1&&!this.resize;if(i){this.element.style.width=t+"px";this.element.style.height=e+"px"}};n.prototype.renderGraphCanvas=function(t){t=t||this;this.prerenderCanvas();r.prototype.renderGraphCanvas.call(t,this.ctx);this.postrenderCanvas()};n.prototype.prerenderCanvas=function(){var t=this.ctx;t.lineCap="round";t.lineJoin="round";t.clearRect(0,0,this.canvasWidth,this.canvasHeight);t.save();if(this.centered){var e=this.width/2*this.pixelRatio;var r=this.height/2*this.pixelRatio;t.translate(e,r)}var i=this.pixelRatio*this.zoom;t.scale(i,i);this.onPrerender(t)};n.prototype.postrenderCanvas=function(){this.ctx.restore()};n.prototype.setSvg=function(t){this.element=t;this.isSvg=true;this.pixelRatio=1;var e=t.getAttribute("width");var r=t.getAttribute("height");this.setSizeSvg(e,r)};n.prototype.setSizeSvg=function(t,e){this.width=t;this.height=e;var r=t/this.zoom;var i=e/this.zoom;var n=this.centered?-r/2:0;var o=this.centered?-i/2:0;this.element.setAttribute("viewBox",n+" "+o+" "+r+" "+i);if(this.resize){this.element.removeAttribute("width");this.element.removeAttribute("height")}else{this.element.setAttribute("width",t);this.element.setAttribute("height",e)}};n.prototype.renderGraphSvg=function(t){t=t||this;o(this.element);this.onPrerender(this.element);r.prototype.renderGraphSvg.call(t,this.element)};function o(t){while(t.firstChild){t.removeChild(t.firstChild)}}n.prototype.setDragRotate=function(t){if(!t){return}else if(t===true){t=this}this.dragRotate=t;this.bindDrag(this.element)};n.prototype.dragStart=function(){this.dragStartRX=this.dragRotate.rotate.x;this.dragStartRY=this.dragRotate.rotate.y;a.prototype.dragStart.apply(this,arguments)};n.prototype.dragMove=function(t,e){var r=e.pageX-this.dragStartX;var i=e.pageY-this.dragStartY;var n=Math.min(this.width,this.height);var o=r/n*h;var s=i/n*h;this.dragRotate.rotate.x=this.dragStartRX-s;this.dragRotate.rotate.y=this.dragStartRY-o;a.prototype.dragMove.apply(this,arguments)};return n});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./vector"))}else{var r=t.Zdog;r.PathCommand=e(r.Vector)}})(this,function t(i){function e(t,e,r){this.method=t;this.points=e.map(n);this.renderPoints=e.map(o);this.previousPoint=r;this.endRenderPoint=this.renderPoints[this.renderPoints.length-1];if(t=="arc"){this.controlPoints=[new i,new i]}}function n(t){if(t instanceof i){return t}else{return new i(t)}}function o(t){return new i(t)}e.prototype.reset=function(){var i=this.points;this.renderPoints.forEach(function(t,e){var r=i[e];t.set(r)})};e.prototype.transform=function(e,r,i){this.renderPoints.forEach(function(t){t.transform(e,r,i)})};e.prototype.render=function(t,e,r){return this[this.method](t,e,r)};e.prototype.move=function(t,e,r){return r.move(t,e,this.renderPoints[0])};e.prototype.line=function(t,e,r){return r.line(t,e,this.renderPoints[0])};e.prototype.bezier=function(t,e,r){var i=this.renderPoints[0];var n=this.renderPoints[1];var o=this.renderPoints[2];return r.bezier(t,e,i,n,o)};var h=9/16;e.prototype.arc=function(t,e,r){var i=this.previousPoint;var n=this.renderPoints[0];var o=this.renderPoints[1];var s=this.controlPoints[0];var a=this.controlPoints[1];s.set(i).lerp(n,h);a.set(o).lerp(n,h);return r.bezier(t,e,s,a,o)};return e});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./vector"),require("./path-command"),require("./anchor"))}else{var r=t.Zdog;r.Shape=e(r,r.Vector,r.PathCommand,r.Anchor)}})(this,function t(r,e,u,i){var n=i.subclass({stroke:1,fill:false,color:"#333",closed:true,visible:true,path:[{}],front:{z:1},backface:true});n.type="Shape";n.prototype.create=function(t){i.prototype.create.call(this,t);this.updatePath();this.front=new e(t.front||this.front);this.renderFront=new e(this.front);this.renderNormal=new e};var d=["move","line","bezier","arc"];n.prototype.updatePath=function(){this.setPath();this.updatePathCommands()};n.prototype.setPath=function(){};n.prototype.updatePathCommands=function(){var p;this.pathCommands=this.path.map(function(t,e){var r=Object.keys(t);var i=r[0];var n=t[i];var o=r.length==1&&d.indexOf(i)!=-1;if(!o){i="line";n=t}var s=i=="line"||i=="move";var a=Array.isArray(n);if(s&&!a){n=[n]}i=e===0?"move":i;var h=new u(i,n,p);p=h.endRenderPoint;return h})};n.prototype.reset=function(){this.renderOrigin.set(this.origin);this.renderFront.set(this.front);this.pathCommands.forEach(function(t){t.reset()});if(this.backface&&this.backface.reset){this.backface.reset()}if(this.color&&this.color.reset){this.color.reset()}};n.prototype.transform=function(e,r,i){this.renderOrigin.transform(e,r,i);this.renderFront.transform(e,r,i);this.renderNormal.set(this.renderOrigin).subtract(this.renderFront);this.pathCommands.forEach(function(t){t.transform(e,r,i)});this.children.forEach(function(t){t.transform(e,r,i)});if(this.backface&&this.backface.transform){this.backface.transform(e,r,i)}if(this.color&&this.color.transform){this.color.transform(e,r,i)}};n.prototype.updateSortValue=function(){var t=this.pathCommands.length;var e=this.pathCommands[0].endRenderPoint;var r=this.pathCommands[t-1].endRenderPoint;var i=t>2&&e.isSame(r);if(i){t-=1}var n=0;for(var o=0;o<t;o++){n+=this.pathCommands[o].endRenderPoint.z}this.sortValue=n/t};n.prototype.render=function(t,e){var r=this.pathCommands.length;if(!this.visible||!r){return}this.isFacingBack=this.renderNormal.z>0;if(!this.backface&&this.isFacingBack){return}if(!e){throw new Error("Zdog renderer required. Set to "+e)}var i=r==1;if(e.isCanvas&&i){this.renderCanvasDot(t,e)}else{this.renderPath(t,e)}};var o=r.TAU;n.prototype.renderCanvasDot=function(t,e){var r=this.getLineWidth();if(!r){return}var i=this.pathCommands[0].endRenderPoint;t.beginPath();var n=r/2;t.arc(i.x,i.y,n,0,o);e.fill(t,null,true,this.getRenderColor())};n.prototype.getLineWidth=function(){if(!this.stroke){return 0}if(this.stroke==true){return 1}return this.stroke};n.prototype.getRenderColor=function(){var t=r.isColor(this.backface)&&this.isFacingBack;var e=t?this.backface:this.color;return e};n.prototype.renderPath=function(t,e){var r=this.getRenderElement(t,e);var i=this.pathCommands.length==2&&this.pathCommands[1].method=="line";var n=!i&&this.closed;var o=this.getRenderColor();e.renderPath(t,r,this.pathCommands,n);e.stroke(t,r,this.stroke,o,this.getLineWidth());e.fill(t,r,this.fill,o);e.end(t,r)};var s="http://www.w3.org/2000/svg";n.prototype.getRenderElement=function(t,e){if(!e.isSvg){return}if(!this.svgElement){this.svgElement=document.createElementNS(s,"path");this.svgElement.setAttribute("stroke-linecap","round");this.svgElement.setAttribute("stroke-linejoin","round")}return this.svgElement};return n});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./anchor"))}else{var r=t.Zdog;r.Group=e(r.Anchor)}})(this,function t(r){var e=r.subclass({updateSort:false,visible:true});e.type="Group";e.prototype.updateSortValue=function(){var e=0;this.flatGraph.forEach(function(t){t.updateSortValue();e+=t.sortValue});this.sortValue=e/this.flatGraph.length;if(this.updateSort){this.flatGraph.sort(r.shapeSorter)}};e.prototype.render=function(e,r){if(!this.visible){return}this.flatGraph.forEach(function(t){t.render(e,r)})};e.prototype.updateFlatGraph=function(){var t=[];this.flatGraph=this.addChildFlatGraph(t)};e.prototype.getFlatGraph=function(){return[this]};return e});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./shape"))}else{var r=t.Zdog;r.Rect=e(r.Shape)}})(this,function t(e){var r=e.subclass({width:1,height:1});r.type="Rect";r.prototype.setPath=function(){var t=this.width/2;var e=this.height/2;this.path=[{x:-t,y:-e},{x:t,y:-e},{x:t,y:e},{x:-t,y:e}]};return r});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./shape"))}else{var r=t.Zdog;r.RoundedRect=e(r.Shape)}})(this,function t(e){var r=e.subclass({width:1,height:1,cornerRadius:.25,closed:false});r.type="RoundedRect";r.prototype.setPath=function(){var t=this.width/2;var e=this.height/2;var r=Math.min(t,e);var i=Math.min(this.cornerRadius,r);var n=t-i;var o=e-i;var s=[{x:n,y:-e},{arc:[{x:t,y:-e},{x:t,y:-o}]}];if(o){s.push({x:t,y:o})}s.push({arc:[{x:t,y:e},{x:n,y:e}]});if(n){s.push({x:-n,y:e})}s.push({arc:[{x:-t,y:e},{x:-t,y:o}]});if(o){s.push({x:-t,y:-o})}s.push({arc:[{x:-t,y:-e},{x:-n,y:-e}]});if(n){s.push({x:n,y:-e})}this.path=s};return r});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./shape"))}else{var r=t.Zdog;r.Ellipse=e(r.Shape)}})(this,function t(e){var r=e.subclass({diameter:1,width:undefined,height:undefined,quarters:4,closed:false});r.type="Ellipse";r.prototype.setPath=function(){var t=this.width!=undefined?this.width:this.diameter;var e=this.height!=undefined?this.height:this.diameter;var r=t/2;var i=e/2;this.path=[{x:0,y:-i},{arc:[{x:r,y:-i},{x:r,y:0}]}];if(this.quarters>1){this.path.push({arc:[{x:r,y:i},{x:0,y:i}]})}if(this.quarters>2){this.path.push({arc:[{x:-r,y:i},{x:-r,y:0}]})}if(this.quarters>3){this.path.push({arc:[{x:-r,y:-i},{x:0,y:-i}]})}};return r});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./shape"))}else{var r=t.Zdog;r.Polygon=e(r,r.Shape)}})(this,function t(e,r){var i=r.subclass({sides:3,radius:.5});i.type="Polygon";var n=e.TAU;i.prototype.setPath=function(){this.path=[];for(var t=0;t<this.sides;t++){var e=t/this.sides*n-n/4;var r=Math.cos(e)*this.radius;var i=Math.sin(e)*this.radius;this.path.push({x:r,y:i})}};return i});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./vector"),require("./anchor"),require("./ellipse"))}else{var r=t.Zdog;r.Hemisphere=e(r,r.Vector,r.Anchor,r.Ellipse)}})(this,function t(e,r,i,n){var o=n.subclass({fill:true});o.type="Hemisphere";var p=e.TAU;o.prototype.create=function(){n.prototype.create.apply(this,arguments);this.apex=new i({addTo:this,translate:{z:this.diameter/2}});this.renderCentroid=new r};o.prototype.updateSortValue=function(){this.renderCentroid.set(this.renderOrigin).lerp(this.apex.renderOrigin,3/8);this.sortValue=this.renderCentroid.z};o.prototype.render=function(t,e){this.renderDome(t,e);n.prototype.render.apply(this,arguments)};o.prototype.renderDome=function(t,e){if(!this.visible){return}var r=this.getDomeRenderElement(t,e);var i=Math.atan2(this.renderNormal.y,this.renderNormal.x);var n=this.diameter/2*this.renderNormal.magnitude();var o=this.renderOrigin.x;var s=this.renderOrigin.y;if(e.isCanvas){var a=i+p/4;var h=i-p/4;t.beginPath();t.arc(o,s,n,a,h)}else if(e.isSvg){i=(i-p/4)/p*360;this.domeSvgElement.setAttribute("d","M "+-n+",0 A "+n+","+n+" 0 0 1 "+n+",0");this.domeSvgElement.setAttribute("transform","translate("+o+","+s+" ) rotate("+i+")")}e.stroke(t,r,this.stroke,this.color,this.getLineWidth());e.fill(t,r,this.fill,this.color);e.end(t,r)};var s="http://www.w3.org/2000/svg";o.prototype.getDomeRenderElement=function(t,e){if(!e.isSvg){return}if(!this.domeSvgElement){this.domeSvgElement=document.createElementNS(s,"path");this.domeSvgElement.setAttribute("stroke-linecap","round");this.domeSvgElement.setAttribute("stroke-linejoin","round")}return this.domeSvgElement};return o});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./path-command"),require("./shape"),require("./group"),require("./ellipse"))}else{var r=t.Zdog;r.Cylinder=e(r,r.PathCommand,r.Shape,r.Group,r.Ellipse)}})(this,function t(r,e,i,n,o){function s(){}var a=n.subclass({color:"#333",updateSort:true});a.type="CylinderGroup";a.prototype.create=function(){n.prototype.create.apply(this,arguments);this.pathCommands=[new e("move",[{}]),new e("line",[{}])]};a.prototype.render=function(t,e){this.renderCylinderSurface(t,e);n.prototype.render.apply(this,arguments)};a.prototype.renderCylinderSurface=function(t,e){if(!this.visible){return}var r=this.getRenderElement(t,e);var i=this.frontBase;var n=this.rearBase;var o=i.renderNormal.magnitude();var s=i.diameter*o+i.getLineWidth();this.pathCommands[0].renderPoints[0].set(i.renderOrigin);this.pathCommands[1].renderPoints[0].set(n.renderOrigin);if(e.isCanvas){t.lineCap="butt"}e.renderPath(t,r,this.pathCommands);e.stroke(t,r,true,this.color,s);e.end(t,r);if(e.isCanvas){t.lineCap="round"}};var h="http://www.w3.org/2000/svg";a.prototype.getRenderElement=function(t,e){if(!e.isSvg){return}if(!this.svgElement){this.svgElement=document.createElementNS(h,"path")}return this.svgElement};a.prototype.copyGraph=s;var p=o.subclass();p.prototype.copyGraph=s;var u=i.subclass({diameter:1,length:1,frontFace:undefined,fill:true});u.type="Cylinder";var d=r.TAU;u.prototype.create=function(){i.prototype.create.apply(this,arguments);this.group=new a({addTo:this,color:this.color,visible:this.visible});var t=this.length/2;var e=this.backface||true;this.frontBase=this.group.frontBase=new o({addTo:this.group,diameter:this.diameter,translate:{z:t},rotate:{y:d/2},color:this.color,stroke:this.stroke,fill:this.fill,backface:r.cloneColor(this.frontFace||e),visible:this.visible});this.rearBase=this.group.rearBase=this.frontBase.copy({translate:{z:-t},rotate:{y:0},backface:r.cloneColor(e)})};u.prototype.render=function(){};var l=["stroke","fill","color","visible"];l.forEach(function(e){var r="_"+e;Object.defineProperty(u.prototype,e,{get:function(){return this[r]},set:function(t){this[r]=t;if(this.frontBase){this.frontBase[e]=t;this.rearBase[e]=t;this.group[e]=t}}})});return u});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./vector"),require("./path-command"),require("./anchor"),require("./ellipse"))}else{var r=t.Zdog;r.Cone=e(r,r.Vector,r.PathCommand,r.Anchor,r.Ellipse)}})(this,function t(e,r,i,n,o){var s=o.subclass({length:1,fill:true});s.type="Cone";var v=e.TAU;s.prototype.create=function(){o.prototype.create.apply(this,arguments);this.apex=new n({addTo:this,translate:{z:this.length}});this.renderApex=new r;this.renderCentroid=new r;this.tangentA=new r;this.tangentB=new r;this.surfacePathCommands=[new i("move",[{}]),new i("line",[{}]),new i("line",[{}])]};s.prototype.updateSortValue=function(){this.renderCentroid.set(this.renderOrigin).lerp(this.apex.renderOrigin,1/3);this.sortValue=this.renderCentroid.z};s.prototype.render=function(t,e){this.renderConeSurface(t,e);o.prototype.render.apply(this,arguments)};s.prototype.renderConeSurface=function(t,e){if(!this.visible){return}this.renderApex.set(this.apex.renderOrigin).subtract(this.renderOrigin);var r=this.renderNormal.magnitude();var i=this.renderApex.magnitude2d();var n=this.renderNormal.magnitude2d();var o=Math.acos(n/r);var s=Math.sin(o);var a=this.diameter/2*r;var h=a*s<i;if(!h){return}var p=Math.atan2(this.renderNormal.y,this.renderNormal.x)+v/2;var u=i/s;var d=Math.acos(a/u);var l=this.tangentA;var c=this.tangentB;l.x=Math.cos(d)*a*s;l.y=Math.sin(d)*a;c.set(this.tangentA);c.y*=-1;l.rotateZ(p);c.rotateZ(p);l.add(this.renderOrigin);c.add(this.renderOrigin);this.setSurfaceRenderPoint(0,l);this.setSurfaceRenderPoint(1,this.apex.renderOrigin);this.setSurfaceRenderPoint(2,c);var f=this.getSurfaceRenderElement(t,e);e.renderPath(t,f,this.surfacePathCommands);e.stroke(t,f,this.stroke,this.color,this.getLineWidth());e.fill(t,f,this.fill,this.color);e.end(t,f)};var a="http://www.w3.org/2000/svg";s.prototype.getSurfaceRenderElement=function(t,e){if(!e.isSvg){return}if(!this.surfaceSvgElement){this.surfaceSvgElement=document.createElementNS(a,"path");this.surfaceSvgElement.setAttribute("stroke-linecap","round");this.surfaceSvgElement.setAttribute("stroke-linejoin","round")}return this.surfaceSvgElement};s.prototype.setSurfaceRenderPoint=function(t,e){var r=this.surfacePathCommands[t].renderPoints[0];r.set(e)};return s});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./path-command"),require("./shape"),require("./group"),require("./vector"))}else{var r=t.Zdog;r.Horn=e(r,r.PathCommand,r.Shape,r.Group,r.Vector)}})(this,function t(e,r,c,i,n){function o(){}var s=i.subclass({color:"#333",fill:true,stroke:true,updateSort:true});s.type="HornGroup";s.prototype.create=function(){i.prototype.create.apply(this,arguments);this.renderApex=new n;this.pathCommands=[new r("move",[{}]),new r("line",[{}]),new r("line",[{}]),new r("line",[{}])]};s.prototype.render=function(t,e){this.renderHornSurface(t,e);i.prototype.render.apply(this,arguments)};s.prototype.renderHornSurface=function(t,e){if(!this.visible){return}var r=this.getRenderElement(t,e);var i=this.addTo.renderNormal.magnitude();var n=this.addTo.frontDiameter/2*i;var o=this.addTo.rearDiameter/2*i;this.renderApex.set(this.rearBase.renderOrigin).subtract(this.frontBase.renderOrigin);var s=this.renderApex.magnitude2d();if(s<=Math.abs(o-n)){return}var a=Math.atan2(this.renderApex.y,this.renderApex.x);var h=Math.acos((n-o)/s);var p=this.pathCommands[0].renderPoints[0];var u=this.pathCommands[1].renderPoints[0];var d=this.pathCommands[2].renderPoints[0];var l=this.pathCommands[3].renderPoints[0];p.x=Math.cos(a+h)*n;p.y=Math.sin(a+h)*n;u.x=Math.cos(a+h)*o;u.y=Math.sin(a+h)*o;l.x=Math.cos(a-h)*n;l.y=Math.sin(a-h)*n;d.x=Math.cos(a-h)*o;d.y=Math.sin(a-h)*o;p.add(this.frontBase.renderOrigin);l.add(this.frontBase.renderOrigin);u.add(this.rearBase.renderOrigin);d.add(this.rearBase.renderOrigin);if(e.isCanvas){t.lineCap="butt"}e.renderPath(t,r,this.pathCommands);e.stroke(t,r,this.stroke,this.color,c.prototype.getLineWidth.apply(this));e.fill(t,r,this.fill,this.color);e.end(t,r);if(e.isCanvas){t.lineCap="round"}};var a="http://www.w3.org/2000/svg";s.prototype.getRenderElement=function(t,e){if(!e.isSvg){return}if(!this.svgElement){this.svgElement=document.createElementNS(a,"path");this.svgElement.setAttribute("stroke-linecap","round");this.svgElement.setAttribute("stroke-linejoin","round")}return this.svgElement};s.prototype.copyGraph=o;var h=c.subclass();h.type="HornCap";h.prototype.copyGraph=o;var p=c.subclass({frontDiameter:1,rearDiameter:1,length:1,frontFace:undefined,fill:true});p.type="Horn";var u=e.TAU;p.prototype.create=function(){c.prototype.create.apply(this,arguments);this.group=new s({addTo:this,color:this.color,fill:this.fill,stroke:this.stroke,visible:this.visible});var t=this.length/2;var e=this.backface||true;this.frontBase=this.group.frontBase=new h({addTo:this.group,translate:{z:t-this.frontDiameter/2},rotate:{y:u/2},color:this.color,stroke:this.frontDiameter+this.stroke,fill:this.fill,backface:this.frontFace||e,visible:this.visible});this.rearBase=this.group.rearBase=new h({addTo:this.group,translate:{z:-t+this.rearDiameter/2},rotate:{y:0},color:this.color,stroke:this.rearDiameter+this.stroke,fill:this.fill,backface:e,visible:this.visible})};p.prototype.updateFrontCapDiameter=function(t){this.frontBase.stroke=t+this.stroke;var e=this.length/2;this.frontBase.translate.z=e-t/2};p.prototype.updateRearCapDiameter=function(t){this.rearBase.stroke=t+this.stroke;var e=this.length/2;this.rearBase.translate.z=-e+t/2};p.prototype.render=function(){};var d=["stroke","fill","color","visible","frontDiameter","rearDiameter"];d.forEach(function(e){var r="_"+e;Object.defineProperty(p.prototype,e,{get:function(){return this[r]},set:function(t){this[r]=t;if(this.frontBase){if(e==="frontDiameter"){this.updateFrontCapDiameter(t)}if(e==="rearDiameter"){this.updateRearCapDiameter(t)}this.frontBase[e]=t;this.rearBase[e]=t;this.group[e]=t}}})});return p});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./path-command"),require("./shape"),require("./group"),require("./vector"))}else{var r=t.Zdog;r.Funnel=e(r,r.PathCommand,r.Shape,r.Ellipse,r.Group,r.Vector)}})(this,function t(e,r,z,i,n,o){function s(){}var a=n.subclass({color:"#333",fill:true,stroke:true,updateSort:true});a.type="FunnelGroup";a.prototype.create=function(){n.prototype.create.apply(this,arguments);this.renderApex=new o;this.tangentFrontA=new o;this.tangentFrontB=new o;this.tangentRearA=new o;this.tangentRearB=new o;this.pathCommands=[new r("move",[{}]),new r("line",[{}]),new r("line",[{}]),new r("line",[{}])]};a.prototype.render=function(t,e){this.renderFunnelSurface(t,e);n.prototype.render.apply(this,arguments)};a.prototype.renderFunnelSurface=function(t,e){if(!this.visible){return}var r=this.getRenderElement(t,e);var i=this.frontBase;var n=i.diameter;var o=this.rearBase;var s=o.diameter;var a=i.renderNormal.magnitude();var h=n/2*a;var p=s/2*a;this.renderApex.set(o.renderOrigin).subtract(i.renderOrigin);var a=i.renderNormal.magnitude();var u=this.renderApex.magnitude2d();var d=i.renderNormal.magnitude2d();var l=Math.acos(d/a);var c=h>p?h:p;var f;if(h==0||p==0){f=1}else{f=Math.abs(h-p)/c}var v=Math.sin(l)*Math.sqrt(f);u=u+h/4+p/4;var m=h*v<u&&p*v<u;if(!m){return}var y=Math.atan2(i.renderNormal.y,i.renderNormal.x)+G/2;var g=(u+h)/v;var x=(u+p)/v;var b=Math.acos(h/g);var w=Math.acos(p/-x);var S=this.tangentFrontA;var C=this.tangentFrontB;var E=this.tangentRearA;var P=this.tangentRearB;S.x=Math.cos(b)*h*v;S.y=Math.sin(b)*h;E.x=Math.cos(w)*p*v;E.y=Math.sin(w)*p;C.set(this.tangentFrontA);C.y*=-1;P.set(this.tangentRearA);P.y*=-1;S.rotateZ(y);C.rotateZ(y);S.add(i.renderOrigin);C.add(i.renderOrigin);E.rotateZ(y+G/2);P.rotateZ(y+G/2);E.add(o.renderOrigin);P.add(o.renderOrigin);this.pathCommands[0].renderPoints[0].set(S);this.pathCommands[1].renderPoints[0].set(P);this.pathCommands[2].renderPoints[0].set(E);this.pathCommands[3].renderPoints[0].set(C);if(e.isCanvas){t.lineCap="butt"}e.stroke(t,r,this.stroke,this.color,z.prototype.getLineWidth.apply(this));e.renderPath(t,r,this.pathCommands);e.fill(t,r,this.fill,this.color);e.end(t,r);if(e.isCanvas){t.lineCap="round"}};var h="http://www.w3.org/2000/svg";a.prototype.getRenderElement=function(t,e){if(!e.isSvg){return}if(!this.svgElement){this.svgElement=document.createElementNS(h,"path");this.svgElement.setAttribute("stroke-linecap","round");this.svgElement.setAttribute("stroke-linejoin","round")}return this.svgElement};a.prototype.copyGraph=s;var p=i.subclass();p.type="FunnelCap";p.prototype.copyGraph=s;var u=z.subclass({frontDiameter:1,rearDiameter:1,length:1,frontFace:undefined,fill:true});u.type="Funnel";var G=e.TAU;u.prototype.create=function(){z.prototype.create.apply(this,arguments);this.group=new a({addTo:this,color:this.color,fill:this.fill,stroke:this.stroke,visible:this.visible});var t=this.length/2;var e=this.backface||true;this.frontBase=this.group.frontBase=new p({addTo:this.group,translate:{z:t-this.frontDiameter/2},rotate:{y:G/2},color:this.color,diameter:this.frontDiameter,fill:this.fill,stroke:this.stroke,backface:this.frontFace||e,visible:this.visible});this.rearBase=this.group.rearBase=new p({addTo:this.group,translate:{z:-t+this.rearDiameter/2},rotate:{y:0},color:this.color,diameter:this.rearDiameter,fill:this.fill,stroke:this.stroke,backface:e,visible:this.visible})};u.prototype.updateFrontCapDiameter=function(t){this.frontBase.diameter=t;var e=this.length/2;this.frontBase.translate.z=e-t/2};u.prototype.updateRearCapDiameter=function(t){this.rearBase.diameter=t;var e=this.length/2;this.rearBase.translate.z=-e+t/2};u.prototype.render=function(){};var d=["stroke","fill","color","visible","frontDiameter","rearDiameter"];d.forEach(function(e){var r="_"+e;Object.defineProperty(u.prototype,e,{get:function(){return this[r]},set:function(t){this[r]=t;if(this.frontBase){if(e==="frontDiameter"){this.updateFrontCapDiameter(t)}if(e==="rearDiameter"){this.updateRearCapDiameter(t)}this.frontBase[e]=t;this.rearBase[e]=t;this.group[e]=t}}})});return u});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./anchor"),require("./shape"),require("./rect"))}else{var r=t.Zdog;r.Box=e(r,r.Anchor,r.Shape,r.Rect)}})(this,function t(o,e,r,i){var s=i.subclass();s.prototype.copyGraph=function(){};var n=o.TAU;var a=["frontFace","rearFace","leftFace","rightFace","topFace","bottomFace"];var h=o.extend({},r.defaults);delete h.path;a.forEach(function(t){h[t]=true});o.extend(h,{width:1,height:1,depth:1,fill:true},r.defaults);delete h.path;var p=e.subclass(h);p.ignoreKeysJSON=["children"];p.type="Box";p.prototype.create=function(t){e.prototype.create.call(this,t);this.updatePath();this.fill=this.fill};p.prototype.updatePath=function(){a.forEach(function(t){this[t]=this[t]},this)};a.forEach(function(e){var r="_"+e;Object.defineProperty(p.prototype,e,{get:function(){return this[r]},set:function(t){this[r]=t;this.setFace(e,t)}})});p.prototype.setFace=function(t,e){var r=t+"Rect";var i=this[r];if(!e){this.removeChild(i);return}var n=this.getFaceOptions(t);if(o.isColor(e)){n.color=e}else{n.color=o.cloneColor(this.color)}if(i){i.setOptions(n)}else{i=this[r]=new s(n)}i.updatePath();this.addChild(i)};p.prototype.getFaceOptions=function(t){return{frontFace:{width:this.width,height:this.height,translate:{z:this.depth/2}},rearFace:{width:this.width,height:this.height,translate:{z:-this.depth/2},rotate:{y:n/2}},leftFace:{width:this.depth,height:this.height,translate:{x:-this.width/2},rotate:{y:-n/4}},rightFace:{width:this.depth,height:this.height,translate:{x:this.width/2},rotate:{y:n/4}},topFace:{width:this.width,height:this.depth,translate:{y:-this.height/2},rotate:{x:-n/4}},bottomFace:{width:this.width,height:this.depth,translate:{y:this.height/2},rotate:{x:n/4}}}[t]};var u=["color","stroke","fill","backface","front","visible"];u.forEach(function(o){var t="_"+o;Object.defineProperty(p.prototype,o,{get:function(){return this[t]},set:function(n){this[t]=n;a.forEach(function(t){var e=this[t+"Rect"];var r=typeof this[t]=="string";var i=o=="color"&&r;if(e&&!i){e[o]=n}},this)}})});return p});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./vector"))}else{var r=t.Zdog;r.Texture=e(r.Vector)}})(this,function t(i){function n(t,e,r,i,n,o){let s=[i-o,n-r,r*o-n*i,o-e,t-n,n*e-t*o,e-i,r-t,t*i-r*e];let a=s[2]+s[5]+s[8];return s.map(function(t){return t/a})}function o(t,r){if(!Array.isArray(r)||!r.length){r=[0,0,t[0],t[1]]}if(typeof r[0]=="number"){if(r.length<4){let e=r;r=[0,0,t[0],t[1]];for(let t=0;t<e.length;t++){r[t]=e[t]}}return[new i({x:r[0],y:r[1],z:1}),new i({x:r[0]+r[2],y:r[1],z:1}),new i({x:r[0],y:r[1]+r[3],z:1})]}else{return[new i(r[0]),new i(r[1]),new i(r[2])]}}var s=0;const a=["img","linearGrad","radialGrad","colorStops","src","dst"];function e(t){this.id=s++;this.isTexture=true;t=t||{};for(var e in t){if(a.indexOf(e)!=-1){this[e]=t[e]}}var r;if(t.img){r=[t.img.width,t.img.height]}else if(t.linearGrad){r=[Math.abs(t.linearGrad[2]-t.linearGrad[0]),Math.abs(t.linearGrad[3]-t.linearGrad[1])]}else if(t.radialGrad){r=[Math.abs(t.radialGrad[3]-t.radialGrad[0]),Math.abs(t.radialGrad[4]-t.radialGrad[1])]}else{throw"One of [img, linearGrad, radialGrad] is required"}if(r[0]==0)r[0]=r[1];if(r[1]==0)r[1]=r[0];this.src=o(r,t.src);this.dst=o(r,t.dst);this.srcInverse=n(this.src[0].x,this.src[0].y,this.src[1].x,this.src[1].y,this.src[2].x,this.src[2].y);this.p1=new i;this.p2=new i;this.p3=new i;this.matrix=[0,0,0,0,0,0]}e.prototype.getMatrix=function(){let t=this.matrix;let e=this.srcInverse;t[0]=this.p1.x*e[0]+this.p2.x*e[3]+this.p3.x*e[6];t[1]=this.p1.y*e[0]+this.p2.y*e[3]+this.p3.y*e[6];t[2]=this.p1.x*e[1]+this.p2.x*e[4]+this.p3.x*e[7];t[3]=this.p1.y*e[1]+this.p2.y*e[4]+this.p3.y*e[7];t[4]=this.p1.x*e[2]+this.p2.x*e[5]+this.p3.x*e[8];t[5]=this.p1.y*e[2]+this.p2.y*e[5]+this.p3.y*e[8];return t};e.prototype.getCanvasFill=function(t){if(!this.pattern){if(this.img){this.pattern=t.createPattern(this.img,"repeat")}else{this.pattern=this.linearGrad?t.createLinearGradient.apply(t,this.linearGrad):t.createRadialGradient.apply(t,this.radialGrad);if(this.colorStops){for(var e=0;e<this.colorStops.length;e+=2){this.pattern.addColorStop(this.colorStops[e],this.colorStops[e+1])}}}}t.transform.apply(t,this.getMatrix());return this.pattern};const h="http://www.w3.org/2000/svg";e.prototype.getSvgFill=function(t){if(!this.svgPattern){if(this.img){this.svgPattern=document.createElementNS(h,"pattern");this.svgPattern.setAttribute("width",this.img.width);this.svgPattern.setAttribute("height",this.img.height);this.svgPattern.setAttribute("patternUnits","userSpaceOnUse");this.attrTransform="patternTransform";let t=document.createElementNS(h,"image");t.setAttribute("href",this.img.src);this.svgPattern.appendChild(t)}else{var e,r,i;if(this.linearGrad){e="linearGradient";r=this.linearGrad;i=["x1","y1","x2","y2"]}else{e="radialGradient";r=this.radialGrad;i=["fx","fy","fr","cx","cy","r"]}this.svgPattern=document.createElementNS(h,e);for(var n=0;n<i.length;n++){this.svgPattern.setAttribute(i[n],r[n])}if(this.colorStops){for(var n=0;n<this.colorStops.length;n+=2){let t=document.createElementNS(h,"stop");t.setAttribute("offset",this.colorStops[n]);t.setAttribute("style","stop-color:"+this.colorStops[n+1]);this.svgPattern.appendChild(t)}}this.svgPattern.setAttribute("gradientUnits","userSpaceOnUse");this.attrTransform="gradientTransform"}this.svgPattern.setAttribute("id","texture_"+this.id);this._svgUrl="url(#texture_"+this.id+")";this.defs=document.createElementNS(h,"defs");this.defs.appendChild(this.svgPattern)}this.svgPattern.setAttribute(this.attrTransform,"matrix("+this.getMatrix().join(" ")+")");t.appendChild(this.defs);return this._svgUrl};e.prototype.reset=function(){this.p1.set(this.dst[0]);this.p2.set(this.dst[1]);this.p3.set(this.dst[2])};e.prototype.transform=function(t,e,r){this.p1.transform(t,e,r);this.p2.transform(t,e,r);this.p3.transform(t,e,r)};e.prototype.clone=function(){return new e(this)};return e});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e(require("./boilerplate"),require("./canvas-renderer"),require("./svg-renderer"),require("./vector"),require("./anchor"),require("./dragger"),require("./illustration"),require("./path-command"),require("./shape"),require("./group"),require("./rect"),require("./rounded-rect"),require("./ellipse"),require("./polygon"),require("./hemisphere"),require("./cylinder"),require("./cone"),require("./horn"),require("./funnel"),require("./box"),require("./texture"))}else if(typeof define=="function"&&define.amd){define("zdog",[],t.Zdog)}})(this,function t(e,r,i,n,o,s,a,h,p,u,d,l,c,f,v,m,y,g,x,b,w){e.CanvasRenderer=r;e.SvgRenderer=i;e.Vector=n;e.Anchor=o;e.Dragger=s;e.Illustration=a;e.PathCommand=h;e.Shape=p;e.Group=u;e.Rect=d;e.RoundedRect=l;e.Ellipse=c;e.Polygon=f;e.Hemisphere=v;e.Cylinder=m;e.Cone=y;e.Horn=g;e.Funnel=x;e.Box=b;e.Texture=w;return e});

js/funnel.js

···
+/**
+ * Funnel composite shape
+ */
+
+( function( root, factory ) {
+  // module definition
+  if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory( require('./boilerplate'),
+        require('./path-command'), require('./shape'), require('./group'),
+        require('./vector') );
+  } else {
+    // browser global
+    var Zdog = root.Zdog;
+    Zdog.Funnel = factory( Zdog, Zdog.PathCommand, Zdog.Shape, Zdog.Ellipse,
+        Zdog.Group, Zdog.Vector );
+  }
+}( this, function factory( utils, PathCommand, Shape, Ellipse, Group, Vector ) {
+
+function noop() {}
+
+// ----- FunnelGroup ----- //
+
+var FunnelGroup = Group.subclass({
+  color: '#333',
+  fill: true,
+  stroke: true,
+  updateSort: true,
+});
+
+FunnelGroup.type = 'FunnelGroup';
+
+FunnelGroup.prototype.create = function() {
+  Group.prototype.create.apply( this, arguments );
+
+  // vectors used for calculation
+  this.renderApex = new Vector();
+  this.tangentFrontA = new Vector();
+  this.tangentFrontB = new Vector();
+  this.tangentRearA = new Vector();
+  this.tangentRearB = new Vector();
+
+  this.pathCommands = [
+    new PathCommand( 'move', [ {} ] ),
+    new PathCommand( 'line', [ {} ] ),
+	new PathCommand( 'line', [ {} ] ),
+	new PathCommand( 'line', [ {} ] ),
+  ];
+};
+
+FunnelGroup.prototype.render = function( ctx, renderer ) {
+  this.renderFunnelSurface( ctx, renderer );
+  Group.prototype.render.apply( this, arguments );
+};
+
+FunnelGroup.prototype.renderFunnelSurface = function( ctx, renderer ) {
+  if ( !this.visible ) {
+    return;
+  }
+  // render funnel surface
+  var elem = this.getRenderElement( ctx, renderer );
+  var frontBase = this.frontBase;
+  var frontDiameter = frontBase.diameter;
+  var rearBase = this.rearBase;
+  var rearDiameter = rearBase.diameter;
+  var scale = frontBase.renderNormal.magnitude();
+  var frontRadius = frontDiameter/2 * scale;
+  var rearRadius = rearDiameter/2 * scale;
+
+  this.renderApex.set( rearBase.renderOrigin )
+    .subtract( frontBase.renderOrigin );
+
+  // calculate tangents.
+  var scale = frontBase.renderNormal.magnitude();
+  var apexDistance = this.renderApex.magnitude2d();
+  var normalDistance = frontBase.renderNormal.magnitude2d();
+  // eccentricity
+  var eccenAngle = Math.acos( normalDistance / scale );
+  var biggerRadius =  (frontRadius > rearRadius) ? frontRadius : rearRadius;
+  var eccenPercent;
+  if (frontRadius == 0 || rearRadius == 0) {
+	  eccenPercent = 1.0;
+  } else {
+	  eccenPercent = (Math.abs(frontRadius - rearRadius) / biggerRadius);
+  }
+  var eccen = Math.sin( eccenAngle ) * Math.sqrt(eccenPercent);
+  // does apex extend beyond eclipse of face
+  apexDistance = apexDistance + frontRadius/4 + rearRadius/4;
+  var isApexVisible = frontRadius * eccen < apexDistance &&
+                      rearRadius * eccen < apexDistance;
+  if ( !isApexVisible ) {
+    return;
+  }
+  // update tangents
+  // TODO: try something more like horn_old.js updateSortValue()
+  var apexAngle = Math.atan2( frontBase.renderNormal.y, frontBase.renderNormal.x ) +
+      TAU/2;
+  var projectFrontLength = (apexDistance + frontRadius) / eccen;
+  var projectRearLength = (apexDistance + rearRadius) / eccen;
+  var projectFrontAngle = Math.acos( frontRadius / projectFrontLength );
+  var projectRearAngle = Math.acos( rearRadius / -projectRearLength );
+  // set tangent points
+  var tangentFrontA = this.tangentFrontA;
+  var tangentFrontB = this.tangentFrontB;
+  var tangentRearA = this.tangentRearA;
+  var tangentRearB = this.tangentRearB;
+
+  tangentFrontA.x = Math.cos( projectFrontAngle ) * frontRadius * eccen;
+  tangentFrontA.y = Math.sin( projectFrontAngle ) * frontRadius;
+  tangentRearA.x = Math.cos( projectRearAngle ) * rearRadius * eccen;
+  tangentRearA.y = Math.sin( projectRearAngle ) * rearRadius;
+
+  tangentFrontB.set( this.tangentFrontA );
+  tangentFrontB.y *= -1;
+  tangentRearB.set( this.tangentRearA );
+  tangentRearB.y *= -1;
+
+  tangentFrontA.rotateZ( apexAngle);
+  tangentFrontB.rotateZ( apexAngle);
+  tangentFrontA.add( frontBase.renderOrigin );
+  tangentFrontB.add( frontBase.renderOrigin );
+  tangentRearA.rotateZ( apexAngle + TAU/2);
+  tangentRearB.rotateZ( apexAngle + TAU/2);
+  tangentRearA.add( rearBase.renderOrigin );
+  tangentRearB.add( rearBase.renderOrigin );
+
+
+  // set path command render points
+  this.pathCommands[0].renderPoints[0].set( tangentFrontA );
+  this.pathCommands[1].renderPoints[0].set( tangentRearB );
+  this.pathCommands[2].renderPoints[0].set( tangentRearA );
+  this.pathCommands[3].renderPoints[0].set( tangentFrontB );
+
+  if ( renderer.isCanvas ) {
+    ctx.lineCap = 'butt'; // nice
+  }
+  renderer.stroke(ctx, elem, this.stroke, this.color, Shape.prototype.getLineWidth.apply(this));
+  renderer.renderPath( ctx, elem, this.pathCommands );
+  //renderer.stroke( ctx, elem, true, '#333', 0.1 ); // remove once testing is done.
+  renderer.fill( ctx, elem, this.fill, this.color );
+  renderer.end( ctx, elem );
+
+  if ( renderer.isCanvas ) {
+    ctx.lineCap = 'round'; // reset
+  }
+};
+
+var svgURI = 'http://www.w3.org/2000/svg';
+
+FunnelGroup.prototype.getRenderElement = function( ctx, renderer ) {
+  if ( !renderer.isSvg ) {
+    return;
+  }
+  if ( !this.svgElement ) {
+    // create svgElement
+    this.svgElement = document.createElementNS( svgURI, 'path');
+    this.svgElement.setAttribute( 'stroke-linecap', 'round' );
+    this.svgElement.setAttribute( 'stroke-linejoin', 'round' );
+  }
+  return this.svgElement;
+};
+
+// prevent double-creation in parent.copyGraph()
+// only create in Funnel.create()
+FunnelGroup.prototype.copyGraph = noop;
+
+// ----- FunnelCap ----- //
+
+var FunnelCap = Ellipse.subclass();
+
+FunnelCap.type = 'FunnelCap';
+
+FunnelCap.prototype.copyGraph = noop;
+
+// ----- Funnel ----- //
+
+var Funnel = Shape.subclass({
+  frontDiameter: 1,
+  rearDiameter: 1,
+  length: 1,
+  frontFace: undefined,
+  fill: true,
+});
+
+Funnel.type = 'Funnel';
+
+var TAU = utils.TAU;
+
+Funnel.prototype.create = function(/* options */) {
+  // call super
+  Shape.prototype.create.apply( this, arguments );
+  // composite shape, create child shapes
+  // FunnelGroup to render funnel surface then bases
+  this.group = new FunnelGroup({
+    addTo: this,
+    color: this.color,
+    fill: this.fill,
+    stroke: this.stroke,
+    visible: this.visible,
+  });
+  var baseZ = this.length/2;
+  var baseColor = this.backface || true;
+  // front outside base
+  this.frontBase = this.group.frontBase = new FunnelCap({
+    addTo: this.group,
+    translate: { z: (baseZ - this.frontDiameter/2) },
+    rotate: { y: TAU/2 },
+    color: this.color,
+    diameter: this.frontDiameter,
+    fill: this.fill,
+    stroke: this.stroke,
+    backface: this.frontFace || baseColor,
+    visible: this.visible,
+  });
+  // back outside base
+  this.rearBase = this.group.rearBase = new FunnelCap({
+    addTo: this.group,
+    translate: { z: (-baseZ + this.rearDiameter/2) },
+    rotate: { y: 0 },
+    color: this.color,
+    diameter: this.rearDiameter,
+    fill: this.fill,
+    stroke: this.stroke,
+    backface: baseColor,
+    visible: this.visible,
+  });
+
+};
+
+Funnel.prototype.updateFrontCapDiameter = function(size) {
+	this.frontBase.diameter = size;
+	var baseZ = this.length/2;
+	this.frontBase.translate.z = (baseZ - size/2);
+}
+
+Funnel.prototype.updateRearCapDiameter = function(size) {
+	this.rearBase.diameter = size;
+	var baseZ = this.length/2;
+	this.rearBase.translate.z = (-baseZ + size/2);
+}
+
+// Funnel shape does not render anything
+Funnel.prototype.render = function() {};
+
+// ----- set child properties ----- //
+
+var childProperties = [ 'stroke', 'fill', 'color', 'visible',
+                        'frontDiameter', 'rearDiameter' ];
+childProperties.forEach( function( property ) {
+  // use proxy property for custom getter & setter
+  var _prop = '_' + property;
+  Object.defineProperty( Funnel.prototype, property, {
+    get: function() {
+      return this[ _prop ];
+    },
+    set: function( value ) {
+      this[ _prop ] = value;
+      // set property on children
+      if ( this.frontBase ) {
+		if (property === 'frontDiameter') {
+		  this.updateFrontCapDiameter(value);
+		}
+		if (property === 'rearDiameter') {
+		  this.updateRearCapDiameter(value);
+		}
+        this.frontBase[ property ] = value;
+        this.rearBase[ property ] = value;
+        this.group[ property ] = value;
+      }
+    },
+  });
+});
+
+// TODO child property setter for backface, frontBaseColor, & rearBaseColor
+
+return Funnel;
+
+}));

js/horn.js

···
 
 var HornGroup = Group.subclass({
   color: '#333',
+  fill: true,
+  stroke: true,
   updateSort: true,
 });
 
···
 
 HornGroup.prototype.create = function() {
   Group.prototype.create.apply( this, arguments );
-  
+
   // vectors used for calculation
   this.renderApex = new Vector();
-  this.tangentFrontA = new Vector();
-  this.tangentFrontB = new Vector();
-  this.tangentRearA = new Vector();
-  this.tangentRearB = new Vector();
-  
+
   this.pathCommands = [
     new PathCommand( 'move', [ {} ] ),
     new PathCommand( 'line', [ {} ] ),
-	new PathCommand( 'line', [ {} ] ),
-	new PathCommand( 'line', [ {} ] ),
+    new PathCommand( 'line', [ {} ] ),
+    new PathCommand( 'line', [ {} ] ),
   ];
 };
 
···
   }
   // render horn surface
   var elem = this.getRenderElement( ctx, renderer );
-  var frontBase = this.frontBase;
-  var frontDiameter = frontBase.stroke;
-  var rearBase = this.rearBase;
-  var rearDiameter = rearBase.stroke;
-  var scale = frontBase.renderNormal.magnitude();
-  var frontRadius = frontDiameter/2 * scale;
-  var rearRadius = rearDiameter/2 * scale;
-  
-  this.renderApex.set( rearBase.renderOrigin )
-    .subtract( frontBase.renderOrigin );
-  
-  // calculate tangents.
-  var scale = frontBase.renderNormal.magnitude();
+  var scale = this.addTo.renderNormal.magnitude();
+  var frontRadius = this.addTo.frontDiameter/2 * scale;
+  var rearRadius = this.addTo.rearDiameter/2 * scale;
+  this.renderApex.set( this.rearBase.renderOrigin )
+    .subtract( this.frontBase.renderOrigin );
+
   var apexDistance = this.renderApex.magnitude2d();
-  var normalDistance = frontBase.renderNormal.magnitude2d();
-  // eccentricity
-  var eccenAngle = Math.acos( normalDistance / scale );
-  var biggerRadius =  (frontRadius > rearRadius) ? frontRadius : rearRadius;
-  var eccenPercent;
-  if (frontRadius == 0 || rearRadius == 0) {
-	  eccenPercent = 1.0;
-  } else {
-	  eccenPercent = (Math.abs(frontRadius - rearRadius) / biggerRadius);
-  }
-  var eccen = Math.sin( eccenAngle ) * Math.sqrt(eccenPercent);
-  // does apex extend beyond eclipse of face
-  apexDistance = apexDistance + frontRadius/4 + rearRadius/4;
-  var isApexVisible = frontRadius * eccen < apexDistance &&
-                      rearRadius * eccen < apexDistance;
-  if ( !isApexVisible ) {
+  if ( apexDistance <= Math.abs( rearRadius - frontRadius ) ) {
     return;
   }
-  // update tangents
-  // TODO: try something more like horn_old.js updateSortValue()
-  var apexAngle = Math.atan2( frontBase.renderNormal.y, frontBase.renderNormal.x ) +
-      TAU/2;
-  var projectFrontLength = (apexDistance + frontRadius) / eccen;
-  var projectRearLength = (apexDistance + rearRadius) / eccen;
-  var projectFrontAngle = Math.acos( frontRadius / projectFrontLength );
-  var projectRearAngle = Math.acos( rearRadius / -projectRearLength );
-  // set tangent points
-  var tangentFrontA = this.tangentFrontA;
-  var tangentFrontB = this.tangentFrontB;
-  var tangentRearA = this.tangentRearA;
-  var tangentRearB = this.tangentRearB;
 
-  tangentFrontA.x = Math.cos( projectFrontAngle ) * frontRadius * eccen;
-  tangentFrontA.y = Math.sin( projectFrontAngle ) * frontRadius;
-  tangentRearA.x = Math.cos( projectRearAngle ) * rearRadius * eccen;
-  tangentRearA.y = Math.sin( projectRearAngle ) * rearRadius;
+  var angle = Math.atan2( this.renderApex.y, this.renderApex.x );
+  var angle2 = Math.acos((frontRadius - rearRadius) / apexDistance);
 
-  tangentFrontB.set( this.tangentFrontA );
-  tangentFrontB.y *= -1;
-  tangentRearB.set( this.tangentRearA );
-  tangentRearB.y *= -1;
+  var frontTangentA = this.pathCommands[0].renderPoints[0];
+  var rearTangentA = this.pathCommands[1].renderPoints[0];
+  var rearTangentB = this.pathCommands[2].renderPoints[0];
+  var frontTangentB = this.pathCommands[3].renderPoints[0];
 
-  tangentFrontA.rotateZ( apexAngle);
-  tangentFrontB.rotateZ( apexAngle);
-  tangentFrontA.add( frontBase.renderOrigin );
-  tangentFrontB.add( frontBase.renderOrigin );
-  tangentRearA.rotateZ( apexAngle + TAU/2);
-  tangentRearB.rotateZ( apexAngle + TAU/2);
-  tangentRearA.add( rearBase.renderOrigin );
-  tangentRearB.add( rearBase.renderOrigin );
-  
-  
-  // set path command render points
-  this.pathCommands[0].renderPoints[0].set( tangentFrontA );
-  this.pathCommands[1].renderPoints[0].set( tangentRearB );
-  this.pathCommands[2].renderPoints[0].set( tangentRearA );
-  this.pathCommands[3].renderPoints[0].set( tangentFrontB );
+  frontTangentA.x = Math.cos( angle + angle2 ) * frontRadius;
+  frontTangentA.y = Math.sin( angle + angle2 ) * frontRadius;
+  rearTangentA.x = Math.cos( angle + angle2 ) * rearRadius;
+  rearTangentA.y = Math.sin( angle + angle2 ) * rearRadius;
+
+  frontTangentB.x = Math.cos( angle - angle2 ) * frontRadius;
+  frontTangentB.y = Math.sin( angle - angle2 ) * frontRadius;
+  rearTangentB.x = Math.cos( angle - angle2 ) * rearRadius;
+  rearTangentB.y = Math.sin( angle - angle2 ) * rearRadius;
+
+  frontTangentA.add( this.frontBase.renderOrigin );
+  frontTangentB.add( this.frontBase.renderOrigin );
+  rearTangentA.add( this.rearBase.renderOrigin );
+  rearTangentB.add( this.rearBase.renderOrigin );
 
   if ( renderer.isCanvas ) {
     ctx.lineCap = 'butt'; // nice
   }
   renderer.renderPath( ctx, elem, this.pathCommands );
-  //renderer.stroke( ctx, elem, true, '#333', 0.1 ); // remove once testing is done.
-  renderer.fill( ctx, elem, true, this.color );
+  renderer.stroke( ctx, elem, this.stroke, this.color, Shape.prototype.getLineWidth.apply(this) );
+  renderer.fill( ctx, elem, this.fill, this.color );
   renderer.end( ctx, elem );
 
   if ( renderer.isCanvas ) {
···
   if ( !this.svgElement ) {
     // create svgElement
     this.svgElement = document.createElementNS( svgURI, 'path');
+    this.svgElement.setAttribute( 'stroke-linecap', 'round' );
+    this.svgElement.setAttribute( 'stroke-linejoin', 'round' );
   }
   return this.svgElement;
 };
···
   this.group = new HornGroup({
     addTo: this,
     color: this.color,
+    fill: this.fill,
+    stroke: this.stroke,
     visible: this.visible,
   });
   var baseZ = this.length/2;
···
     translate: { z: (baseZ - this.frontDiameter/2) },
     rotate: { y: TAU/2 },
     color: this.color,
-    stroke: this.frontDiameter,
+    stroke: this.frontDiameter + this.stroke,
     fill: this.fill,
     backface: this.frontFace || baseColor,
     visible: this.visible,
···
     translate: { z: (-baseZ + this.rearDiameter/2) },
     rotate: { y: 0 },
     color: this.color,
-    stroke: this.rearDiameter,
+    stroke: this.rearDiameter + this.stroke,
     fill: this.fill,
     backface: baseColor,
     visible: this.visible,
   });
-  
+
 };
 
 Horn.prototype.updateFrontCapDiameter = function(size) {
-	this.frontBase.stroke = size;
+	this.frontBase.stroke = size + this.stroke;
 	var baseZ = this.length/2;
 	this.frontBase.translate.z = (baseZ - size/2);
 }
 
 Horn.prototype.updateRearCapDiameter = function(size) {
-	this.rearBase.stroke = size;
+	this.rearBase.stroke = size + this.stroke;
 	var baseZ = this.length/2;
 	this.rearBase.translate.z = (-baseZ + size/2);
 }

js/index.js

···
         require('./hemisphere'),
         require('./cylinder'),
         require('./cone'),
-		    require('./horn'),
+        require('./horn'),
+        require('./funnel'),
         require('./box'),
         require('./texture')
     );
···
 /* eslint-disable max-params */
 } )( this, function factory( Zdog, CanvasRenderer, SvgRenderer, Vector, Anchor,
     Dragger, Illustration, PathCommand, Shape, Group, Rect, RoundedRect,
-    Ellipse, Polygon, Hemisphere, Cylinder, Cone, Horn, Box, Texture ) {
+    Ellipse, Polygon, Hemisphere, Cylinder, Cone, Horn, Funnel, Box, Texture ) {
 /* eslint-enable max-params */
 
       Zdog.CanvasRenderer = CanvasRenderer;
···
       Zdog.Hemisphere = Hemisphere;
       Zdog.Cylinder = Cylinder;
       Zdog.Cone = Cone;
-	  Zdog.Horn = Horn;
+      Zdog.Horn = Horn;
+      Zdog.Funnel = Funnel;
       Zdog.Box = Box;
       Zdog.Texture = Texture;