From c6165f0f50c322cfbf35786dde6e79c5cd08edbe Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 3 Jun 2019 21:00:00 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=B6=20v1.0.2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/zdog.dist.js | 222 ++++++++++++++++++++++++------------------ dist/zdog.dist.min.js | 4 +- js/boilerplate.js | 2 +- package-lock.json | 2 +- package.json | 2 +- 5 files changed, 133 insertions(+), 99 deletions(-) diff --git a/dist/zdog.dist.js b/dist/zdog.dist.js index 978ceaf..b9fefbf 100644 --- a/dist/zdog.dist.js +++ b/dist/zdog.dist.js @@ -1,5 +1,5 @@ /*! - * Zdog v1.0.1 + * Zdog v1.0.2 * Round, flat, designer-friendly pseudo-3D engine * Licensed MIT * https://zzz.dog @@ -13,7 +13,7 @@ ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module */ // CommonJS + // CommonJS module.exports = factory(); } else { // browser global @@ -32,8 +32,8 @@ Zdog.extend = function( a, b ) { return a; }; -Zdog.lerp = function( a, b, t ) { - return ( b - a ) * t + a; +Zdog.lerp = function( a, b, alpha ) { + return ( b - a ) * alpha + a; }; Zdog.modulo = function( num, div ) { @@ -52,7 +52,7 @@ var powerMultipliers = { }, 5: function( a ) { return a * a * a * a * a; - } + }, }; Zdog.easeInOut = function( alpha, power ) { @@ -62,11 +62,11 @@ Zdog.easeInOut = function( alpha, power ) { alpha = Math.max( 0, Math.min( 1, alpha ) ); var isFirstHalf = alpha < 0.5; var slope = isFirstHalf ? alpha : 1 - alpha; - slope = slope / 0.5; + slope /= 0.5; // make easing steeper with more multiples var powerMultiplier = powerMultipliers[ power ] || powerMultipliers[2]; var curve = powerMultiplier( slope ); - curve = curve / 2; + curve /= 2; return isFirstHalf ? curve : 1 - curve; }; @@ -80,7 +80,7 @@ return Zdog; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module */ // CommonJS + // CommonJS module.exports = factory(); } else { // browser global @@ -151,7 +151,7 @@ return CanvasRenderer; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module */ // CommonJS + // CommonJS module.exports = factory(); } else { // browser global @@ -231,7 +231,7 @@ return SvgRenderer; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./boilerplate') ); } else { // browser global @@ -346,10 +346,10 @@ Vector.prototype.transform = function( translation, rotation, scale ) { return this; }; -Vector.prototype.lerp = function( pos, t ) { - this.x = utils.lerp( this.x, pos.x || 0, t ); - this.y = utils.lerp( this.y, pos.y || 0, t ); - this.z = utils.lerp( this.z, pos.z || 0, t ); +Vector.prototype.lerp = function( pos, alpha ) { + this.x = utils.lerp( this.x, pos.x || 0, alpha ); + this.y = utils.lerp( this.y, pos.y || 0, alpha ); + this.z = utils.lerp( this.z, pos.z || 0, alpha ); return this; }; @@ -385,14 +385,16 @@ return Vector; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS - module.exports = factory( require('./boilerplate'), require('./vector') ); + // CommonJS + module.exports = factory( require('./boilerplate'), require('./vector'), + require('./canvas-renderer'), require('./svg-renderer') ); } else { // browser global var Zdog = root.Zdog; - Zdog.Anchor = factory( Zdog, Zdog.Vector ); + Zdog.Anchor = factory( Zdog, Zdog.Vector, Zdog.CanvasRenderer, + Zdog.SvgRenderer ); } -}( this, function factory( utils, Vector ) { +}( this, function factory( utils, Vector, CanvasRenderer, SvgRenderer ) { var TAU = utils.TAU; var onePoint = { x: 1, y: 1, z: 1 }; @@ -488,7 +490,7 @@ Anchor.prototype.transform = function( translation, rotation, scale ) { Anchor.prototype.updateGraph = function() { this.update(); - this.checkFlatGraph(); + this.updateFlatGraph(); this.flatGraph.forEach( function( item ) { item.updateSortValue(); }); @@ -500,11 +502,18 @@ Anchor.shapeSorter = function( a, b ) { return a.sortValue - b.sortValue; }; -Anchor.prototype.checkFlatGraph = function() { - if ( !this.flatGraph ) { - this.updateFlatGraph(); - } -}; +// custom getter to check for flatGraph before using it +Object.defineProperty( Anchor.prototype, 'flatGraph', { + get: function() { + if ( !this._flatGraph ) { + this.updateFlatGraph(); + } + return this._flatGraph; + }, + set: function( graph ) { + this._flatGraph = graph; + }, +}); Anchor.prototype.updateFlatGraph = function() { this.flatGraph = this.getFlatGraph(); @@ -513,9 +522,13 @@ Anchor.prototype.updateFlatGraph = function() { // return Array of self & all child graph items Anchor.prototype.getFlatGraph = function() { var flatGraph = [ this ]; + return this.addChildFlatGraph( flatGraph ); +}; + +Anchor.prototype.addChildFlatGraph = function( flatGraph ) { this.children.forEach( function( child ) { var childFlatGraph = child.getFlatGraph(); - flatGraph = flatGraph.concat( childFlatGraph ); + Array.prototype.push.apply( flatGraph, childFlatGraph ); }); return flatGraph; }; @@ -528,14 +541,14 @@ Anchor.prototype.updateSortValue = function() { Anchor.prototype.render = function() {}; +// TODO refactor out CanvasRenderer so its not a dependency within anchor.js Anchor.prototype.renderGraphCanvas = function( ctx ) { if ( !ctx ) { throw new Error( 'ctx is ' + ctx + '. ' + 'Canvas context required for render. Check .renderGraphCanvas( ctx ).' ); } - this.checkFlatGraph(); this.flatGraph.forEach( function( item ) { - item.render( ctx, Zdog.CanvasRenderer ); + item.render( ctx, CanvasRenderer ); }); }; @@ -546,7 +559,7 @@ Anchor.prototype.renderGraphSvg = function( svg ) { } this.checkFlatGraph(); this.flatGraph.forEach( function( item ) { - item.render( svg, Zdog.SvgRenderer ); + item.render( svg, SvgRenderer ); }); }; @@ -622,13 +635,13 @@ return Anchor; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module */ // CommonJS - module.exports = factory(); + // CommonJS + module.exports = factory( root ); } else { // browser global - root.Zdog.Dragger = factory(); + root.Zdog.Dragger = factory( root ); } -}( this, function factory() { +}( this, function factory( window ) { // quick & dirty drag event stuff // messes up if multiple pointers/touches @@ -666,7 +679,7 @@ Dragger.prototype.create = function( options ) { Dragger.prototype.bindDrag = function( element ) { element = this.getQueryElement( element ); if ( element ) { - element.addEventListener( downEvent , this ); + element.addEventListener( downEvent, this ); } }; @@ -739,7 +752,7 @@ return Dragger; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./boilerplate'), require('./anchor'), require('./dragger') ); } else { @@ -782,7 +795,7 @@ Illustration.prototype.setElement = function( element ) { } var nodeName = element.nodeName.toLowerCase(); - if ( nodeName == 'canvas' ) { + if ( nodeName == 'canvas' ) { this.setCanvas( element ); } else if ( nodeName == 'svg' ) { this.setSvg( element ); @@ -868,7 +881,8 @@ Illustration.prototype.setSizeCanvas = function( width, height ) { var pixelRatio = this.pixelRatio = window.devicePixelRatio || 1; this.element.width = this.canvasWidth = width * pixelRatio; this.element.height = this.canvasHeight = height * pixelRatio; - if ( pixelRatio > 1 ) { + var needsHighPixelRatioSizing = pixelRatio > 1 && !this.resize; + if ( needsHighPixelRatioSizing ) { this.element.style.width = width + 'px'; this.element.style.height = height + 'px'; } @@ -897,7 +911,7 @@ Illustration.prototype.prerenderCanvas = function() { this.onPrerender( ctx ); }; -Illustration.prototype.postrenderCanvas = function () { +Illustration.prototype.postrenderCanvas = function() { this.ctx.restore(); }; @@ -951,6 +965,7 @@ Illustration.prototype.setDragRotate = function( item ) { if ( !item ) { return; } else if ( item === true ) { + /* eslint consistent-this: "off" */ item = this; } this.dragRotate = item; @@ -985,7 +1000,7 @@ return Illustration; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./vector') ); } else { // browser global @@ -1053,14 +1068,16 @@ PathCommand.prototype.bezier = function( ctx, elem, renderer ) { return renderer.bezier( ctx, elem, cp0, cp1, end ); }; +var arcHandleLength = 9/16; + PathCommand.prototype.arc = function( ctx, elem, renderer ) { var prev = this.previousPoint; var corner = this.renderPoints[0]; var end = this.renderPoints[1]; var cp0 = this.controlPoints[0]; var cp1 = this.controlPoints[1]; - cp0.set( prev ).lerp( corner, 9/16 ); - cp1.set( end ).lerp( corner, 9/16 ); + cp0.set( prev ).lerp( corner, arcHandleLength ); + cp1.set( end ).lerp( corner, arcHandleLength ); return renderer.bezier( ctx, elem, cp0, cp1, end ); }; @@ -1074,8 +1091,8 @@ return PathCommand; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS - module.exports = factory( require('./boilerplate'), require('./vector'), + // CommonJS + module.exports = factory( require('./boilerplate'), require('./vector'), require('./path-command'), require('./anchor') ); } else { // browser global @@ -1282,7 +1299,7 @@ return Shape; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./anchor') ); } else { // browser global @@ -1300,7 +1317,6 @@ var Group = Anchor.subclass({ Group.prototype.updateSortValue = function() { var sortValueTotal = 0; - this.checkFlatGraph(); this.flatGraph.forEach( function( item ) { item.updateSortValue(); sortValueTotal += item.sortValue; @@ -1321,27 +1337,21 @@ Group.prototype.render = function( ctx, renderer ) { return; } - this.checkFlatGraph(); this.flatGraph.forEach( function( item ) { item.render( ctx, renderer ); }); }; -// do not include children, group handles rendering & sorting internally -Group.prototype.getFlatGraph = function() { - return [ this ]; -}; - -// get flat graph only used for group -// do not include in parent flatGraphs +// actual group flatGraph only used inside group Group.prototype.updateFlatGraph = function() { // do not include self var flatGraph = []; - this.children.forEach( function( child ) { - var childFlatGraph = child.getFlatGraph(); - flatGraph = flatGraph.concat( childFlatGraph ); - }); - this.flatGraph = flatGraph; + this.flatGraph = this.addChildFlatGraph( flatGraph ); +}; + +// do not include children, group handles rendering & sorting internally +Group.prototype.getFlatGraph = function() { + return [ this ]; }; return Group; @@ -1354,7 +1364,7 @@ return Group; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */// CommonJS + // CommonJS module.exports = factory( require('./shape') ); } else { // browser global @@ -1371,6 +1381,7 @@ var Rect = Shape.subclass({ Rect.prototype.setPath = function() { var x = this.width / 2; var y = this.height / 2; + /* eslint key-spacing: "off" */ this.path = [ { x: -x, y: -y }, { x: x, y: -y }, @@ -1389,7 +1400,7 @@ return Rect; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./shape') ); } else { // browser global @@ -1406,6 +1417,9 @@ var RoundedRect = Shape.subclass({ }); RoundedRect.prototype.setPath = function() { + /* eslint + id-length: [ "error", { "min": 2, "exceptions": [ "x", "y" ] }], + key-spacing: "off" */ var xA = this.width / 2; var yA = this.height / 2; var shortSide = Math.min( xA, yA ); @@ -1471,7 +1485,7 @@ return RoundedRect; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./shape') ); } else { // browser global @@ -1499,7 +1513,7 @@ Ellipse.prototype.setPath = function() { { arc: [ // top right { x: x, y: -y }, { x: x, y: 0 }, - ]} + ]}, ]; // bottom right if ( this.quarters > 1 ) { @@ -1545,7 +1559,7 @@ return Ellipse; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./boilerplate'), require('./shape') ); } else { // browser global @@ -1581,7 +1595,7 @@ return Polygon; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./boilerplate'), require('./ellipse') ); } else { // browser global @@ -1621,10 +1635,10 @@ Hemisphere.prototype.renderDome = function( ctx, renderer ) { } else if ( renderer.isSvg ) { // svg contourAngle = (contourAngle - TAU/4) / TAU * 360; - this.domeSvgElement.setAttribute( 'd', 'M ' + (-domeRadius) + ',0 A ' + - domeRadius + ',' + domeRadius + ' 0 0 1 ' + domeRadius + ',0' ); + this.domeSvgElement.setAttribute( 'd', 'M ' + -domeRadius + ',0 A ' + + domeRadius + ',' + domeRadius + ' 0 0 1 ' + domeRadius + ',0' ); this.domeSvgElement.setAttribute( 'transform', - 'translate(' + x + ',' + y + ' ) rotate(' + contourAngle + ')' ); + 'translate(' + x + ',' + y + ' ) rotate(' + contourAngle + ')' ); } renderer.stroke( ctx, elem, this.stroke, this.color, this.getLineWidth() ); @@ -1657,7 +1671,7 @@ return Hemisphere; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./boilerplate'), require('./path-command'), require('./shape'), require('./group'), require('./ellipse') ); @@ -1672,7 +1686,7 @@ return Hemisphere; function noop() {} // ----- CylinderGroup ----- // - + var CylinderGroup = Group.subclass({ color: '#333', updateSort: true, @@ -1820,7 +1834,7 @@ return Cylinder; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./boilerplate'), require('./vector'), require('./path-command'), require('./anchor'), require('./ellipse') ); } else { @@ -1884,7 +1898,8 @@ Cone.prototype.renderConeSurface = function( ctx, renderer ) { return; } // update tangents - var apexAngle = Math.atan2( this.renderNormal.y, this.renderNormal.x ) + TAU/2; + var apexAngle = Math.atan2( this.renderNormal.y, this.renderNormal.x ) + + TAU/2; var projectLength = apexDistance / eccen; var projectAngle = Math.acos( radius / projectLength ); // set tangent points @@ -1944,7 +1959,7 @@ return Cone; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( require('./boilerplate'), require('./anchor'), require('./shape'), require('./rect') ); } else { @@ -2065,33 +2080,52 @@ return Box; ( function( root, factory ) { // module definition if ( typeof module == 'object' && module.exports ) { - /* globals module, require */ // CommonJS + // CommonJS module.exports = factory( - 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') + 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 ) { /* globals define */ // AMD define( 'zdog', [], root.Zdog ); } -})( this, function factory( Zdog ) { - - return Zdog; - +})( this, function factory( Zdog, CanvasRenderer, SvgRenderer, Vector, Anchor, + Dragger, Illustration, PathCommand, Shape, Group, Rect, RoundedRect, + Ellipse, Polygon, Hemisphere, Cylinder, Cone, Box ) { + + Zdog.CanvasRenderer = CanvasRenderer; + Zdog.SvgRenderer = SvgRenderer; + Zdog.Vector = Vector; + Zdog.Anchor = Anchor; + Zdog.Dragger = Dragger; + Zdog.Illustration = Illustration; + Zdog.PathCommand = PathCommand; + Zdog.Shape = Shape; + Zdog.Group = Group; + Zdog.Rect = Rect; + Zdog.RoundedRect = RoundedRect; + Zdog.Ellipse = Ellipse; + Zdog.Polygon = Polygon; + Zdog.Hemisphere = Hemisphere; + Zdog.Cylinder = Cylinder; + Zdog.Cone = Cone; + Zdog.Box = Box; + + return Zdog; }); diff --git a/dist/zdog.dist.min.js b/dist/zdog.dist.min.js index 634b2e8..2d6e406 100644 --- a/dist/zdog.dist.min.js +++ b/dist/zdog.dist.min.js @@ -1,8 +1,8 @@ /*! - * Zdog v1.0.1 + * Zdog v1.0.2 * Round, flat, designer-friendly pseudo-3D engine * Licensed MIT * https://zzz.dog * Copyright 2019 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=i/.5;var o=s[e]||s[2];var n=o(i);n=n/2;return r?n:1-n};return e});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog.CanvasRenderer=e()}})(this,function t(){var o={isCanvas:true};o.begin=function(t){t.beginPath()};o.move=function(t,e,r){t.moveTo(r.x,r.y)};o.line=function(t,e,r){t.lineTo(r.x,r.y)};o.bezier=function(t,e,r,i,o){t.bezierCurveTo(r.x,r.y,i.x,i.y,o.x,o.y)};o.closePath=function(t){t.closePath()};o.setPath=function(){};o.renderPath=function(e,r,t,i){this.begin(e,r);t.forEach(function(t){t.render(e,r,o)});if(i){this.closePath(e,r)}};o.stroke=function(t,e,r,i,o){if(!r){return}t.strokeStyle=i;t.lineWidth=o;t.stroke()};o.fill=function(t,e,r,i){if(!r){return}t.fillStyle=i;t.fill()};o.end=function(){};return o});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog.SvgRenderer=e()}})(this,function t(){var n={isSvg:true};var e=n.round=function(t){return Math.round(t*1e3)/1e3};function s(t){return e(t.x)+","+e(t.y)+" "}n.begin=function(){};n.move=function(t,e,r){return"M"+s(r)};n.line=function(t,e,r){return"L"+s(r)};n.bezier=function(t,e,r,i,o){return"C"+s(r)+s(i)+s(o)};n.closePath=function(){return"Z"};n.setPath=function(t,e,r){e.setAttribute("d",r)};n.renderPath=function(e,r,t,i){var o="";t.forEach(function(t){o+=t.render(e,r,n)});if(i){o+=this.closePath(e,r)}this.setPath(e,r,o)};n.stroke=function(t,e,r,i,o){if(!r){return}e.setAttribute("stroke",i);e.setAttribute("stroke-width",o)};n.fill=function(t,e,r,i){var o=r?i:"none";e.setAttribute("fill",o)};n.end=function(t,e){t.appendChild(e)};return n});(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 o=Math.cos(e);var n=Math.sin(e);var s=t[r];var a=t[i];t[r]=s*o-a*n;t[i]=a*o+s*n}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 o(t)};function o(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 o(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"))}else{var r=t.Zdog;r.Anchor=e(r,r.Vector)}})(this,function t(o,e){var r=o.TAU;var i={x:1,y:1,z:1};function n(t){this.create(t||{})}n.prototype.create=function(t){o.extend(this,this.constructor.defaults);this.setOptions(t);this.translate=new e(t.translate);this.rotate=new e(t.rotate);this.scale=new e(i).multiply(this.scale);this.origin=new e;this.renderOrigin=new e;this.children=[];if(this.addTo){this.addTo.addChild(this)}};n.defaults={};n.optionKeys=Object.keys(n.defaults).concat(["rotate","translate","scale","addTo"]);n.prototype.setOptions=function(t){var e=this.constructor.optionKeys;for(var r in t){if(e.includes(r)){this[r]=t[r]}}};n.prototype.addChild=function(t){var e=this.children.indexOf(t);if(e!=-1){return}t.remove();t.addTo=this;this.children.push(t)};n.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(e!=-1){this.children.splice(e,1)}};n.prototype.remove=function(){if(this.addTo){this.addTo.removeChild(this)}};n.prototype.update=function(){this.reset();this.children.forEach(function(t){t.update()});this.transform(this.translate,this.rotate,this.scale)};n.prototype.reset=function(){this.renderOrigin.set(this.origin)};n.prototype.transform=function(e,r,i){this.renderOrigin.transform(e,r,i);this.children.forEach(function(t){t.transform(e,r,i)})};n.prototype.updateGraph=function(){this.update();this.checkFlatGraph();this.flatGraph.forEach(function(t){t.updateSortValue()});this.flatGraph.sort(n.shapeSorter)};n.shapeSorter=function(t,e){return t.sortValue-e.sortValue};n.prototype.checkFlatGraph=function(){if(!this.flatGraph){this.updateFlatGraph()}};n.prototype.updateFlatGraph=function(){this.flatGraph=this.getFlatGraph()};n.prototype.getFlatGraph=function(){var r=[this];this.children.forEach(function(t){var e=t.getFlatGraph();r=r.concat(e)});return r};n.prototype.updateSortValue=function(){this.sortValue=this.renderOrigin.z};n.prototype.render=function(){};n.prototype.renderGraphCanvas=function(e){if(!e){throw new Error("ctx is "+e+". "+"Canvas context required for render. Check .renderGraphCanvas( ctx ).")}this.checkFlatGraph();this.flatGraph.forEach(function(t){t.render(e,Zdog.CanvasRenderer)})};n.prototype.renderGraphSvg=function(e){if(!e){throw new Error("svg is "+e+". "+"SVG required for render. Check .renderGraphSvg( svg ).")}this.checkFlatGraph();this.flatGraph.forEach(function(t){t.render(e,Zdog.SvgRenderer)})};n.prototype.copy=function(t){var e={};var r=this.constructor.optionKeys;r.forEach(function(t){e[t]=this[t]},this);o.extend(e,t);var i=this.constructor;return new i(e)};n.prototype.copyGraph=function(t){var e=this.copy(t);this.children.forEach(function(t){t.copyGraph({addTo:e})});return e};n.prototype.normalizeRotate=function(){this.rotate.x=o.modulo(this.rotate.x,r);this.rotate.y=o.modulo(this.rotate.y,r);this.rotate.z=o.modulo(this.rotate.z,r)};function s(r){return function(t){function e(t){this.create(t||{})}e.prototype=Object.create(r.prototype);e.prototype.constructor=e;e.defaults=o.extend({},r.defaults);o.extend(e.defaults,t);e.optionKeys=r.optionKeys.slice(0);Object.keys(e.defaults).forEach(function(t){if(!e.optionKeys.includes(t)){e.optionKeys.push(t)}});e.subclass=s(e);return e}}n.subclass=s(n);return n});(function(t,e){if(typeof module=="object"&&module.exports){module.exports=e()}else{t.Zdog.Dragger=e()}})(this,function t(){var e="mousedown";var r="mousemove";var i="mouseup";if(window.PointerEvent){e="pointerdown";r="pointermove";i="pointerup"}else if("ontouchstart"in window){e="touchstart";r="touchmove";i="touchend"}function o(){}function n(t){this.create(t||{})}n.prototype.create=function(t){this.onDragStart=t.onDragStart||o;this.onDragMove=t.onDragMove||o;this.onDragEnd=t.onDragEnd||o;this.bindDrag(t.startElement)};n.prototype.bindDrag=function(t){t=this.getQueryElement(t);if(t){t.addEventListener(e,this)}};n.prototype.getQueryElement=function(t){if(typeof t=="string"){t=document.querySelector(t)}return t};n.prototype.handleEvent=function(t){var e=this["on"+t.type];if(e){e.call(this,t)}};n.prototype.onmousedown=n.prototype.onpointerdown=function(t){this.dragStart(t,t)};n.prototype.ontouchstart=function(t){this.dragStart(t,t.changedTouches[0])};n.prototype.dragStart=function(t,e){t.preventDefault();this.dragStartX=e.pageX;this.dragStartY=e.pageY;window.addEventListener(r,this);window.addEventListener(i,this);this.onDragStart(e)};n.prototype.ontouchmove=function(t){this.dragMove(t,t.changedTouches[0])};n.prototype.onmousemove=n.prototype.onpointermove=function(t){this.dragMove(t,t)};n.prototype.dragMove=function(t,e){t.preventDefault();var r=e.pageX-this.dragStartX;var i=e.pageY-this.dragStartY;this.onDragMove(e,r,i)};n.prototype.onmouseup=n.prototype.onpointerup=n.prototype.ontouchend=n.prototype.dragEnd=function(){window.removeEventListener(r,this);window.removeEventListener(i,this);this.onDragEnd()};return n});(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 o=r.subclass({element:undefined,centered:true,zoom:1,dragRotate:false,resize:false,onPrerender:i,onDragStart:i,onDragMove:i,onDragEnd:i,onResize:i});e.extend(o.prototype,a.prototype);o.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)};o.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)}};o.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)}};o.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)}};o.prototype.onWindowResize=function(){this.setMeasuredSize();this.onResize(this.width,this.height)};o.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)};o.prototype.renderGraph=function(t){if(this.isCanvas){this.renderGraphCanvas(t)}else if(this.isSvg){this.renderGraphSvg(t)}};o.prototype.updateRenderGraph=function(t){this.updateGraph();this.renderGraph(t)};o.prototype.setCanvas=function(t){this.element=t;this.isCanvas=true;this.ctx=this.element.getContext("2d");this.setSizeCanvas(t.width,t.height)};o.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;if(r>1){this.element.style.width=t+"px";this.element.style.height=e+"px"}};o.prototype.renderGraphCanvas=function(t){t=t||this;this.prerenderCanvas();r.prototype.renderGraphCanvas.call(t,this.ctx);this.postrenderCanvas()};o.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)};o.prototype.postrenderCanvas=function(){this.ctx.restore()};o.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)};o.prototype.setSizeSvg=function(t,e){this.width=t;this.height=e;var r=t/this.zoom;var i=e/this.zoom;var o=this.centered?-r/2:0;var n=this.centered?-i/2:0;this.element.setAttribute("viewBox",o+" "+n+" "+r+" "+i);if(this.resize){this.element.removeAttribute("width");this.element.removeAttribute("height")}else{this.element.setAttribute("width",t);this.element.setAttribute("height",e)}};o.prototype.renderGraphSvg=function(t){t=t||this;n(this.element);this.onPrerender(this.element);r.prototype.renderGraphSvg.call(t,this.element)};function n(t){while(t.firstChild){t.removeChild(t.firstChild)}}o.prototype.setDragRotate=function(t){if(!t){return}else if(t===true){t=this}this.dragRotate=t;this.bindDrag(this.element)};o.prototype.dragStart=function(){this.dragStartRX=this.dragRotate.rotate.x;this.dragStartRY=this.dragRotate.rotate.y;a.prototype.dragStart.apply(this,arguments)};o.prototype.dragMove=function(t,e){var r=e.pageX-this.dragStartX;var i=e.pageY-this.dragStartY;var o=Math.min(this.width,this.height);var n=r/o*h;var s=i/o*h;this.dragRotate.rotate.x=this.dragStartRX-s;this.dragRotate.rotate.y=this.dragStartRY-n;a.prototype.dragMove.apply(this,arguments)};return o});(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(o);this.renderPoints=e.map(n);this.previousPoint=r;this.endRenderPoint=this.renderPoints[this.renderPoints.length-1];if(t=="arc"){this.controlPoints=[new i,new i]}}function o(t){if(t instanceof i){return t}else{return new i(t)}}function n(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 o=this.renderPoints[1];var n=this.renderPoints[2];return r.bezier(t,e,i,o,n)};e.prototype.arc=function(t,e,r){var i=this.previousPoint;var o=this.renderPoints[0];var n=this.renderPoints[1];var s=this.controlPoints[0];var a=this.controlPoints[1];s.set(i).lerp(o,9/16);a.set(n).lerp(o,9/16);return r.bezier(t,e,s,a,n)};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 o=i.subclass({stroke:1,fill:false,color:"#333",closed:true,visible:true,path:[{}],front:{z:1},backface:true});o.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"];o.prototype.updatePath=function(){this.setPath();this.updatePathCommands()};o.prototype.setPath=function(){};o.prototype.updatePathCommands=function(){var u;this.pathCommands=this.path.map(function(t,e){var r=Object.keys(t);var i=r[0];var o=t[i];var n=r.length==1&&d.includes(i);if(!n){i="line";o=t}var s=i=="line"||i=="move";var a=Array.isArray(o);if(s&&!a){o=[o]}i=e===0?"move":i;var h=new p(i,o,u);u=h.endRenderPoint;return h})};o.prototype.reset=function(){this.renderOrigin.set(this.origin);this.renderFront.set(this.front);this.pathCommands.forEach(function(t){t.reset()})};o.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)})};o.prototype.updateSortValue=function(){var e=0;this.pathCommands.forEach(function(t){e+=t.endRenderPoint.z});this.sortValue=e/this.pathCommands.length};o.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 n=e.TAU;o.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,n);t.fill()};o.prototype.getLineWidth=function(){if(!this.stroke){return 0}if(this.stroke==true){return 1}return this.stroke};o.prototype.getRenderColor=function(){var t=typeof this.backface=="string"&&this.isFacingBack;var e=t?this.backface:this.color;return e};o.prototype.renderPath=function(t,e){var r=this.getRenderElement(t,e);var i=this.pathCommands.length==2&&this.pathCommands[1].method=="line";var o=!i&&this.closed;var n=this.getRenderColor();e.renderPath(t,r,this.pathCommands,o);e.stroke(t,r,this.stroke,n,this.getLineWidth());e.fill(t,r,this.fill,n);e.end(t,r)};var s="http://www.w3.org/2000/svg";o.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 o});(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.checkFlatGraph();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.checkFlatGraph();this.flatGraph.forEach(function(t){t.render(e,r)})};e.prototype.getFlatGraph=function(){return[this]};e.prototype.updateFlatGraph=function(){var r=[];this.children.forEach(function(t){var e=t.getFlatGraph();r=r.concat(e)});this.flatGraph=r};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(r){var e=r.subclass({width:1,height:1,cornerRadius:.25,closed:false});e.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 o=t-i;var n=e-i;var s=[{x:o,y:-e},{arc:[{x:t,y:-e},{x:t,y:-n}]}];if(n){s.push({x:t,y:n})}s.push({arc:[{x:t,y:e},{x:o,y:e}]});if(o){s.push({x:-o,y:e})}s.push({arc:[{x:-t,y:e},{x:-t,y:n}]});if(n){s.push({x:-t,y:-n})}s.push({arc:[{x:-t,y:-e},{x:-o,y:-e}]});if(o){s.push({x:o,y:-e})}this.path=s};e.prototype.updateSortValue=function(){r.prototype.updateSortValue.apply(this,arguments);var t=this.pathCommands.length;var e=this.pathCommands[t-1].endRenderPoint;this.sortValue-=e.z/t};return e});(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(r){var e=r.subclass({diameter:1,width:undefined,height:undefined,quarters:4,closed:false});e.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}]})}};e.prototype.updateSortValue=function(){r.prototype.updateSortValue.apply(this,arguments);if(this.quarters!=4){return}var t=this.pathCommands.length;var e=this.pathCommands[t-1].endRenderPoint;this.sortValue-=e.z/t};return e});(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 o=e.TAU;i.prototype.setPath=function(){this.path=[];for(var t=0;t1&&!this.resize;if(i){this.element.style.width=t+"px";this.element.style.height=e+"px"}};o.prototype.renderGraphCanvas=function(t){t=t||this;this.prerenderCanvas();r.prototype.renderGraphCanvas.call(t,this.ctx);this.postrenderCanvas()};o.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)};o.prototype.postrenderCanvas=function(){this.ctx.restore()};o.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)};o.prototype.setSizeSvg=function(t,e){this.width=t;this.height=e;var r=t/this.zoom;var i=e/this.zoom;var o=this.centered?-r/2:0;var n=this.centered?-i/2:0;this.element.setAttribute("viewBox",o+" "+n+" "+r+" "+i);if(this.resize){this.element.removeAttribute("width");this.element.removeAttribute("height")}else{this.element.setAttribute("width",t);this.element.setAttribute("height",e)}};o.prototype.renderGraphSvg=function(t){t=t||this;n(this.element);this.onPrerender(this.element);r.prototype.renderGraphSvg.call(t,this.element)};function n(t){while(t.firstChild){t.removeChild(t.firstChild)}}o.prototype.setDragRotate=function(t){if(!t){return}else if(t===true){t=this}this.dragRotate=t;this.bindDrag(this.element)};o.prototype.dragStart=function(){this.dragStartRX=this.dragRotate.rotate.x;this.dragStartRY=this.dragRotate.rotate.y;a.prototype.dragStart.apply(this,arguments)};o.prototype.dragMove=function(t,e){var r=e.pageX-this.dragStartX;var i=e.pageY-this.dragStartY;var o=Math.min(this.width,this.height);var n=r/o*h;var s=i/o*h;this.dragRotate.rotate.x=this.dragStartRX-s;this.dragRotate.rotate.y=this.dragStartRY-n;a.prototype.dragMove.apply(this,arguments)};return o});(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(o);this.renderPoints=e.map(n);this.previousPoint=r;this.endRenderPoint=this.renderPoints[this.renderPoints.length-1];if(t=="arc"){this.controlPoints=[new i,new i]}}function o(t){if(t instanceof i){return t}else{return new i(t)}}function n(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 o=this.renderPoints[1];var n=this.renderPoints[2];return r.bezier(t,e,i,o,n)};var h=9/16;e.prototype.arc=function(t,e,r){var i=this.previousPoint;var o=this.renderPoints[0];var n=this.renderPoints[1];var s=this.controlPoints[0];var a=this.controlPoints[1];s.set(i).lerp(o,h);a.set(n).lerp(o,h);return r.bezier(t,e,s,a,n)};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 o=i.subclass({stroke:1,fill:false,color:"#333",closed:true,visible:true,path:[{}],front:{z:1},backface:true});o.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"];o.prototype.updatePath=function(){this.setPath();this.updatePathCommands()};o.prototype.setPath=function(){};o.prototype.updatePathCommands=function(){var u;this.pathCommands=this.path.map(function(t,e){var r=Object.keys(t);var i=r[0];var o=t[i];var n=r.length==1&&d.includes(i);if(!n){i="line";o=t}var s=i=="line"||i=="move";var a=Array.isArray(o);if(s&&!a){o=[o]}i=e===0?"move":i;var h=new p(i,o,u);u=h.endRenderPoint;return h})};o.prototype.reset=function(){this.renderOrigin.set(this.origin);this.renderFront.set(this.front);this.pathCommands.forEach(function(t){t.reset()})};o.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)})};o.prototype.updateSortValue=function(){var e=0;this.pathCommands.forEach(function(t){e+=t.endRenderPoint.z});this.sortValue=e/this.pathCommands.length};o.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 n=e.TAU;o.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,n);t.fill()};o.prototype.getLineWidth=function(){if(!this.stroke){return 0}if(this.stroke==true){return 1}return this.stroke};o.prototype.getRenderColor=function(){var t=typeof this.backface=="string"&&this.isFacingBack;var e=t?this.backface:this.color;return e};o.prototype.renderPath=function(t,e){var r=this.getRenderElement(t,e);var i=this.pathCommands.length==2&&this.pathCommands[1].method=="line";var o=!i&&this.closed;var n=this.getRenderColor();e.renderPath(t,r,this.pathCommands,o);e.stroke(t,r,this.stroke,n,this.getLineWidth());e.fill(t,r,this.fill,n);e.end(t,r)};var s="http://www.w3.org/2000/svg";o.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 o});(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(r){var e=r.subclass({width:1,height:1,cornerRadius:.25,closed:false});e.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 o=t-i;var n=e-i;var s=[{x:o,y:-e},{arc:[{x:t,y:-e},{x:t,y:-n}]}];if(n){s.push({x:t,y:n})}s.push({arc:[{x:t,y:e},{x:o,y:e}]});if(o){s.push({x:-o,y:e})}s.push({arc:[{x:-t,y:e},{x:-t,y:n}]});if(n){s.push({x:-t,y:-n})}s.push({arc:[{x:-t,y:-e},{x:-o,y:-e}]});if(o){s.push({x:o,y:-e})}this.path=s};e.prototype.updateSortValue=function(){r.prototype.updateSortValue.apply(this,arguments);var t=this.pathCommands.length;var e=this.pathCommands[t-1].endRenderPoint;this.sortValue-=e.z/t};return e});(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(r){var e=r.subclass({diameter:1,width:undefined,height:undefined,quarters:4,closed:false});e.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}]})}};e.prototype.updateSortValue=function(){r.prototype.updateSortValue.apply(this,arguments);if(this.quarters!=4){return}var t=this.pathCommands.length;var e=this.pathCommands[t-1].endRenderPoint;this.sortValue-=e.z/t};return e});(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 o=e.TAU;i.prototype.setPath=function(){this.path=[];for(var t=0;t