+98 -94

dist/zdog.dist.js

reviewed

··· 1 1 /*! 2 2 - * Zdog v1.1.2 2 2 + * Zdog v1.1.3 3 3 * Round, flat, designer-friendly pseudo-3D engine 4 4 * Licensed MIT 5 5 * https://zzz.dog ··· 72 72 73 73 return Zdog; 74 74 75 75 - })); 75 75 + } ) ); 76 76 /** 77 77 * CanvasRenderer 78 78 */ ··· 116 116 this.begin( ctx, elem ); 117 117 pathCommands.forEach( function( command ) { 118 118 command.render( ctx, elem, CanvasRenderer ); 119 119 - }); 119 119 + } ); 120 120 if ( isClosed ) { 121 121 this.closePath( ctx, elem ); 122 122 } ··· 143 143 144 144 return CanvasRenderer; 145 145 146 146 - })); 146 146 + } ) ); 147 147 /** 148 148 * SvgRenderer 149 149 */ ··· 185 185 getPointString( end ); 186 186 }; 187 187 188 188 - SvgRenderer.closePath = function(/* elem */) { 188 188 + SvgRenderer.closePath = function( /* elem */) { 189 189 return 'Z'; 190 190 }; 191 191 ··· 197 197 var pathValue = ''; 198 198 pathCommands.forEach( function( command ) { 199 199 pathValue += command.render( svg, elem, SvgRenderer ); 200 200 - }); 200 200 + } ); 201 201 if ( isClosed ) { 202 202 pathValue += this.closePath( svg, elem ); 203 203 } ··· 223 223 224 224 return SvgRenderer; 225 225 226 226 - })); 226 226 + } ) ); 227 227 /** 228 228 * Vector 229 229 */ ··· 297 297 var sin = Math.sin( angle ); 298 298 var a = vec[ propA ]; 299 299 var b = vec[ propB ]; 300 300 - vec[ propA ] = a*cos - b*sin; 301 301 - vec[ propB ] = b*cos + a*sin; 300 300 + vec[ propA ] = a * cos - b * sin; 301 301 + vec[ propB ] = b * cos + a * sin; 302 302 } 303 303 304 304 Vector.prototype.isSame = function( pos ) { ··· 361 361 }; 362 362 363 363 Vector.prototype.magnitude = function() { 364 364 - var sum = this.x*this.x + this.y*this.y + this.z*this.z; 364 364 + var sum = this.x * this.x + this.y * this.y + this.z * this.z; 365 365 return getMagnitudeSqrt( sum ); 366 366 }; 367 367 ··· 374 374 } 375 375 376 376 Vector.prototype.magnitude2d = function() { 377 377 - var sum = this.x*this.x + this.y*this.y; 377 377 + var sum = this.x * this.x + this.y * this.y; 378 378 return getMagnitudeSqrt( sum ); 379 379 }; 380 380 ··· 384 384 385 385 return Vector; 386 386 387 387 - })); 387 387 + } ) ); 388 388 /** 389 389 * Anchor 390 390 */ ··· 478 478 // update children 479 479 this.children.forEach( function( child ) { 480 480 child.update(); 481 481 - }); 481 481 + } ); 482 482 this.transform( this.translate, this.rotate, this.scale ); 483 483 }; 484 484 ··· 491 491 // transform children 492 492 this.children.forEach( function( child ) { 493 493 child.transform( translation, rotation, scale ); 494 494 - }); 494 494 + } ); 495 495 }; 496 496 497 497 Anchor.prototype.updateGraph = function() { ··· 499 499 this.updateFlatGraph(); 500 500 this.flatGraph.forEach( function( item ) { 501 501 item.updateSortValue(); 502 502 - }); 502 502 + } ); 503 503 // z-sort 504 504 this.flatGraph.sort( Anchor.shapeSorter ); 505 505 }; ··· 519 519 set: function( graph ) { 520 520 this._flatGraph = graph; 521 521 }, 522 522 - }); 522 522 + } ); 523 523 524 524 Anchor.prototype.updateFlatGraph = function() { 525 525 this.flatGraph = this.getFlatGraph(); ··· 535 535 this.children.forEach( function( child ) { 536 536 var childFlatGraph = child.getFlatGraph(); 537 537 Array.prototype.push.apply( flatGraph, childFlatGraph ); 538 538 - }); 538 538 + } ); 539 539 return flatGraph; 540 540 }; 541 541 ··· 555 555 } 556 556 this.flatGraph.forEach( function( item ) { 557 557 item.render( ctx, CanvasRenderer ); 558 558 - }); 558 558 + } ); 559 559 }; 560 560 561 561 Anchor.prototype.renderGraphSvg = function( svg ) { ··· 565 565 } 566 566 this.flatGraph.forEach( function( item ) { 567 567 item.render( svg, SvgRenderer ); 568 568 - }); 568 568 + } ); 569 569 }; 570 570 571 571 // ----- misc ----- // ··· 589 589 child.copyGraph({ 590 590 addTo: clone, 591 591 }); 592 592 - }); 592 592 + } ); 593 593 return clone; 594 594 }; 595 595 ··· 614 614 Item.defaults = utils.extend( {}, Super.defaults ); 615 615 utils.extend( Item.defaults, defaults ); 616 616 // create optionKeys 617 617 - Item.optionKeys = Super.optionKeys.slice(0); 617 617 + Item.optionKeys = Super.optionKeys.slice( 0 ); 618 618 // add defaults keys to optionKeys, dedupe 619 619 Object.keys( Item.defaults ).forEach( function( key ) { 620 620 if ( !Item.optionKeys.indexOf( key ) != 1 ) { 621 621 Item.optionKeys.push( key ); 622 622 } 623 623 - }); 623 623 + } ); 624 624 625 625 Item.subclass = getSubclass( Item ); 626 626 ··· 632 632 633 633 return Anchor; 634 634 635 635 - })); 635 635 + } ) ); 636 636 /** 637 637 * Dragger 638 638 */ ··· 750 750 Dragger.prototype.onmouseup = 751 751 Dragger.prototype.onpointerup = 752 752 Dragger.prototype.ontouchend = 753 753 - Dragger.prototype.dragEnd = function(/* event */) { 753 753 + Dragger.prototype.dragEnd = function( /* event */) { 754 754 window.removeEventListener( moveEvent, this ); 755 755 window.removeEventListener( upEvent, this ); 756 756 this.onDragEnd(); ··· 758 758 759 759 return Dragger; 760 760 761 761 - })); 761 761 + } ) ); 762 762 /** 763 763 * Illustration 764 764 */ ··· 916 916 ctx.clearRect( 0, 0, this.canvasWidth, this.canvasHeight ); 917 917 ctx.save(); 918 918 if ( this.centered ) { 919 919 - var centerX = this.width/2 * this.pixelRatio; 920 920 - var centerY = this.height/2 * this.pixelRatio; 919 919 + var centerX = this.width / 2 * this.pixelRatio; 920 920 + var centerY = this.height / 2 * this.pixelRatio; 921 921 ctx.translate( centerX, centerY ); 922 922 } 923 923 var scale = this.pixelRatio * this.zoom; ··· 987 987 this.bindDrag( this.element ); 988 988 }; 989 989 990 990 - Illustration.prototype.dragStart = function(/* event, pointer */) { 990 990 + Illustration.prototype.dragStart = function( /* event, pointer */) { 991 991 this.dragStartRX = this.dragRotate.rotate.x; 992 992 this.dragStartRY = this.dragRotate.rotate.y; 993 993 Dragger.prototype.dragStart.apply( this, arguments ); ··· 997 997 var moveX = pointer.pageX - this.dragStartX; 998 998 var moveY = pointer.pageY - this.dragStartY; 999 999 var displaySize = Math.min( this.width, this.height ); 1000 1000 - var moveRY = moveX / displaySize * TAU; 1001 1001 - var moveRX = moveY / displaySize * TAU; 1000 1000 + var moveRY = moveX/displaySize * TAU; 1001 1001 + var moveRX = moveY/displaySize * TAU; 1002 1002 this.dragRotate.rotate.x = this.dragStartRX - moveRX; 1003 1003 this.dragRotate.rotate.y = this.dragStartRY - moveRY; 1004 1004 Dragger.prototype.dragMove.apply( this, arguments ); ··· 1006 1006 1007 1007 return Illustration; 1008 1008 1009 1009 - })); 1009 1009 + } ) ); 1010 1010 /** 1011 1011 * PathCommand 1012 1012 */ ··· 1054 1054 this.renderPoints.forEach( function( renderPoint, i ) { 1055 1055 var point = points[i]; 1056 1056 renderPoint.set( point ); 1057 1057 - }); 1057 1057 + } ); 1058 1058 }; 1059 1059 1060 1060 PathCommand.prototype.transform = function( translation, rotation, scale ) { 1061 1061 this.renderPoints.forEach( function( renderPoint ) { 1062 1062 renderPoint.transform( translation, rotation, scale ); 1063 1063 - }); 1063 1063 + } ); 1064 1064 }; 1065 1065 1066 1066 PathCommand.prototype.render = function( ctx, elem, renderer ) { ··· 1097 1097 1098 1098 return PathCommand; 1099 1099 1100 1100 - })); 1100 1100 + } ) ); 1101 1101 /** 1102 1102 * Shape 1103 1103 */ ··· 1179 1179 // update previousLastPoint 1180 1180 previousPoint = command.endRenderPoint; 1181 1181 return command; 1182 1182 - }); 1182 1182 + } ); 1183 1183 }; 1184 1184 1185 1185 // ----- update ----- // ··· 1190 1190 // reset command render points 1191 1191 this.pathCommands.forEach( function( command ) { 1192 1192 command.reset(); 1193 1193 - }); 1193 1193 + } ); 1194 1194 }; 1195 1195 1196 1196 Shape.prototype.transform = function( translation, rotation, scale ) { ··· 1201 1201 // transform points 1202 1202 this.pathCommands.forEach( function( command ) { 1203 1203 command.transform( translation, rotation, scale ); 1204 1204 - }); 1204 1204 + } ); 1205 1205 // transform children 1206 1206 this.children.forEach( function( child ) { 1207 1207 child.transform( translation, rotation, scale ); 1208 1208 - }); 1208 1208 + } ); 1209 1209 }; 1210 1210 1211 1211 Shape.prototype.updateSortValue = function() { ··· 1224 1224 for ( var i = 0; i < pointCount; i++ ) { 1225 1225 sortValueTotal += this.pathCommands[i].endRenderPoint.z; 1226 1226 } 1227 1227 - this.sortValue = sortValueTotal / pointCount; 1227 1227 + this.sortValue = sortValueTotal/pointCount; 1228 1228 }; 1229 1229 1230 1230 // ----- render ----- // ··· 1304 1304 } 1305 1305 if ( !this.svgElement ) { 1306 1306 // create svgElement 1307 1307 - this.svgElement = document.createElementNS( svgURI, 'path'); 1307 1307 + this.svgElement = document.createElementNS( svgURI, 'path' ); 1308 1308 this.svgElement.setAttribute( 'stroke-linecap', 'round' ); 1309 1309 this.svgElement.setAttribute( 'stroke-linejoin', 'round' ); 1310 1310 } ··· 1313 1313 1314 1314 return Shape; 1315 1315 1316 1316 - })); 1316 1316 + } ) ); 1317 1317 /** 1318 1318 * Group 1319 1319 */ ··· 1342 1342 this.flatGraph.forEach( function( item ) { 1343 1343 item.updateSortValue(); 1344 1344 sortValueTotal += item.sortValue; 1345 1345 - }); 1345 1345 + } ); 1346 1346 // average sort value of all points 1347 1347 // def not geometrically correct, but works for me 1348 1348 this.sortValue = sortValueTotal / this.flatGraph.length; ··· 1361 1361 1362 1362 this.flatGraph.forEach( function( item ) { 1363 1363 item.render( ctx, renderer ); 1364 1364 - }); 1364 1364 + } ); 1365 1365 }; 1366 1366 1367 1367 // actual group flatGraph only used inside group ··· 1378 1378 1379 1379 return Group; 1380 1380 1381 1381 - })); 1381 1381 + } ) ); 1382 1382 /** 1383 1383 * Rect 1384 1384 */ ··· 1414 1414 1415 1415 return Rect; 1416 1416 1417 1417 - })); 1417 1417 + } ) ); 1418 1418 /** 1419 1419 * RoundedRect 1420 1420 */ ··· 1454 1454 { arc: [ 1455 1455 { x: xA, y: -yA }, 1456 1456 { x: xA, y: -yB }, 1457 1457 - ]}, 1457 1457 + ] }, 1458 1458 ]; 1459 1459 // bottom right corner 1460 1460 if ( yB ) { ··· 1463 1463 path.push({ arc: [ 1464 1464 { x: xA, y: yA }, 1465 1465 { x: xB, y: yA }, 1466 1466 - ]}); 1466 1466 + ] }); 1467 1467 // bottom left corner 1468 1468 if ( xB ) { 1469 1469 path.push({ x: -xB, y: yA }); ··· 1471 1471 path.push({ arc: [ 1472 1472 { x: -xA, y: yA }, 1473 1473 { x: -xA, y: yB }, 1474 1474 - ]}); 1474 1474 + ] }); 1475 1475 // top left corner 1476 1476 if ( yB ) { 1477 1477 path.push({ x: -xA, y: -yB }); ··· 1479 1479 path.push({ arc: [ 1480 1480 { x: -xA, y: -yA }, 1481 1481 { x: -xB, y: -yA }, 1482 1482 - ]}); 1482 1482 + ] }); 1483 1483 1484 1484 // back to top right corner 1485 1485 if ( xB ) { ··· 1491 1491 1492 1492 return RoundedRect; 1493 1493 1494 1494 - })); 1494 1494 + } ) ); 1495 1495 /** 1496 1496 * Ellipse 1497 1497 */ ··· 1520 1520 Ellipse.prototype.setPath = function() { 1521 1521 var width = this.width != undefined ? this.width : this.diameter; 1522 1522 var height = this.height != undefined ? this.height : this.diameter; 1523 1523 - var x = width / 2; 1524 1524 - var y = height / 2; 1523 1523 + var x = width/2; 1524 1524 + var y = height/2; 1525 1525 this.path = [ 1526 1526 { x: 0, y: -y }, 1527 1527 { arc: [ // top right 1528 1528 { x: x, y: -y }, 1529 1529 { x: x, y: 0 }, 1530 1530 - ]}, 1530 1530 + ] }, 1531 1531 ]; 1532 1532 // bottom right 1533 1533 if ( this.quarters > 1 ) { 1534 1534 this.path.push({ arc: [ 1535 1535 { x: x, y: y }, 1536 1536 { x: 0, y: y }, 1537 1537 - ]}); 1537 1537 + ] }); 1538 1538 } 1539 1539 // bottom left 1540 1540 if ( this.quarters > 2 ) { 1541 1541 this.path.push({ arc: [ 1542 1542 { x: -x, y: y }, 1543 1543 { x: -x, y: 0 }, 1544 1544 - ]}); 1544 1544 + ] }); 1545 1545 } 1546 1546 // top left 1547 1547 if ( this.quarters > 3 ) { 1548 1548 this.path.push({ arc: [ 1549 1549 { x: -x, y: -y }, 1550 1550 { x: 0, y: -y }, 1551 1551 - ]}); 1551 1551 + ] }); 1552 1552 } 1553 1553 }; 1554 1554 1555 1555 return Ellipse; 1556 1556 1557 1557 - })); 1557 1557 + } ) ); 1558 1558 /** 1559 1559 * Shape 1560 1560 */ ··· 1580 1580 1581 1581 Polygon.prototype.setPath = function() { 1582 1582 this.path = []; 1583 1583 - for ( var i=0; i < this.sides; i++ ) { 1584 1584 - var theta = i/this.sides * TAU - TAU/4; 1583 1583 + for ( var i = 0; i < this.sides; i++ ) { 1584 1584 + var theta = i / this.sides * TAU - TAU/4; 1585 1585 var x = Math.cos( theta ) * this.radius; 1586 1586 var y = Math.sin( theta ) * this.radius; 1587 1587 this.path.push({ x: x, y: y }); ··· 1590 1590 1591 1591 return Polygon; 1592 1592 1593 1593 - })); 1593 1593 + } ) ); 1594 1594 /** 1595 1595 * Hemisphere composite shape 1596 1596 */ ··· 1614 1614 1615 1615 var TAU = utils.TAU; 1616 1616 1617 1617 - Hemisphere.prototype.create = function(/* options */) { 1617 1617 + Hemisphere.prototype.create = function( /* options */) { 1618 1618 // call super 1619 1619 Ellipse.prototype.create.apply( this, arguments ); 1620 1620 // composite shape, create child shapes 1621 1621 this.apex = new Anchor({ 1622 1622 addTo: this, 1623 1623 - translate: { z: this.diameter/2 }, 1623 1623 + translate: { z: this.diameter / 2 }, 1624 1624 }); 1625 1625 // vector used for calculation 1626 1626 this.renderCentroid = new Vector(); ··· 1645 1645 } 1646 1646 var elem = this.getDomeRenderElement( ctx, renderer ); 1647 1647 var contourAngle = Math.atan2( this.renderNormal.y, this.renderNormal.x ); 1648 1648 - var domeRadius = this.diameter/2 * this.renderNormal.magnitude(); 1648 1648 + var domeRadius = this.diameter / 2 * this.renderNormal.magnitude(); 1649 1649 var x = this.renderOrigin.x; 1650 1650 var y = this.renderOrigin.y; 1651 1651 ··· 1657 1657 ctx.arc( x, y, domeRadius, startAngle, endAngle ); 1658 1658 } else if ( renderer.isSvg ) { 1659 1659 // svg 1660 1660 - contourAngle = (contourAngle - TAU/4) / TAU * 360; 1660 1660 + contourAngle = ( contourAngle - TAU/4 ) / TAU * 360; 1661 1661 this.domeSvgElement.setAttribute( 'd', 'M ' + -domeRadius + ',0 A ' + 1662 1662 domeRadius + ',' + domeRadius + ' 0 0 1 ' + domeRadius + ',0' ); 1663 1663 this.domeSvgElement.setAttribute( 'transform', ··· 1677 1677 } 1678 1678 if ( !this.domeSvgElement ) { 1679 1679 // create svgElement 1680 1680 - this.domeSvgElement = document.createElementNS( svgURI, 'path'); 1680 1680 + this.domeSvgElement = document.createElementNS( svgURI, 'path' ); 1681 1681 this.domeSvgElement.setAttribute( 'stroke-linecap', 'round' ); 1682 1682 this.domeSvgElement.setAttribute( 'stroke-linejoin', 'round' ); 1683 1683 } ··· 1686 1686 1687 1687 return Hemisphere; 1688 1688 1689 1689 - })); 1689 1689 + } ) ); 1690 1690 /** 1691 1691 * Cylinder composite shape 1692 1692 */ ··· 1762 1762 } 1763 1763 if ( !this.svgElement ) { 1764 1764 // create svgElement 1765 1765 - this.svgElement = document.createElementNS( svgURI, 'path'); 1765 1765 + this.svgElement = document.createElementNS( svgURI, 'path' ); 1766 1766 } 1767 1767 return this.svgElement; 1768 1768 }; ··· 1788 1788 1789 1789 var TAU = utils.TAU; 1790 1790 1791 1791 - Cylinder.prototype.create = function(/* options */) { 1791 1791 + Cylinder.prototype.create = function( /* options */) { 1792 1792 // call super 1793 1793 Shape.prototype.create.apply( this, arguments ); 1794 1794 // composite shape, create child shapes ··· 1798 1798 color: this.color, 1799 1799 visible: this.visible, 1800 1800 }); 1801 1801 - var baseZ = this.length/2; 1801 1801 + var baseZ = this.length / 2; 1802 1802 var baseColor = this.backface || true; 1803 1803 // front outside base 1804 1804 this.frontBase = this.group.frontBase = new Ellipse({ ··· 1842 1842 this.group[ property ] = value; 1843 1843 } 1844 1844 }, 1845 1845 - }); 1846 1846 - }); 1845 1845 + } ); 1846 1846 + } ); 1847 1847 1848 1848 // TODO child property setter for backface, frontBaseColor, & rearBaseColor 1849 1849 1850 1850 return Cylinder; 1851 1851 1852 1852 - })); 1852 1852 + } ) ); 1853 1853 /** 1854 1854 * Cone composite shape 1855 1855 */ ··· 1875 1875 1876 1876 var TAU = utils.TAU; 1877 1877 1878 1878 - Cone.prototype.create = function(/* options */) { 1878 1878 + Cone.prototype.create = function( /* options */) { 1879 1879 // call super 1880 1880 Ellipse.prototype.create.apply( this, arguments ); 1881 1881 // composite shape, create child shapes ··· 1920 1920 var apexDistance = this.renderApex.magnitude2d(); 1921 1921 var normalDistance = this.renderNormal.magnitude2d(); 1922 1922 // eccentricity 1923 1923 - var eccenAngle = Math.acos( normalDistance / scale ); 1923 1923 + var eccenAngle = Math.acos( normalDistance/scale ); 1924 1924 var eccen = Math.sin( eccenAngle ); 1925 1925 - var radius = this.diameter/2 * scale; 1925 1925 + var radius = this.diameter / 2 * scale; 1926 1926 // does apex extend beyond eclipse of face 1927 1927 var isApexVisible = radius * eccen < apexDistance; 1928 1928 if ( !isApexVisible ) { ··· 1931 1931 // update tangents 1932 1932 var apexAngle = Math.atan2( this.renderNormal.y, this.renderNormal.x ) + 1933 1933 TAU/2; 1934 1934 - var projectLength = apexDistance / eccen; 1935 1935 - var projectAngle = Math.acos( radius / projectLength ); 1934 1934 + var projectLength = apexDistance/eccen; 1935 1935 + var projectAngle = Math.acos( radius/projectLength ); 1936 1936 // set tangent points 1937 1937 var tangentA = this.tangentA; 1938 1938 var tangentB = this.tangentB; ··· 1968 1968 } 1969 1969 if ( !this.surfaceSvgElement ) { 1970 1970 // create svgElement 1971 1971 - this.surfaceSvgElement = document.createElementNS( svgURI, 'path'); 1971 1971 + this.surfaceSvgElement = document.createElementNS( svgURI, 'path' ); 1972 1972 this.surfaceSvgElement.setAttribute( 'stroke-linecap', 'round' ); 1973 1973 this.surfaceSvgElement.setAttribute( 'stroke-linejoin', 'round' ); 1974 1974 } ··· 1982 1982 1983 1983 return Cone; 1984 1984 1985 1985 - })); 1985 1985 + } ) ); 1986 1986 /** 1987 1987 * Box composite shape 1988 1988 */ ··· 2023 2023 delete boxDefaults.path; 2024 2024 faceNames.forEach( function( faceName ) { 2025 2025 boxDefaults[ faceName ] = true; 2026 2026 - }); 2026 2026 + } ); 2027 2027 utils.extend( boxDefaults, { 2028 2028 width: 1, 2029 2029 height: 1, 2030 2030 depth: 1, 2031 2031 fill: true, 2032 2032 - }); 2032 2032 + } ); 2033 2033 2034 2034 var Box = Anchor.subclass( boxDefaults ); 2035 2035 2036 2036 + /* eslint-disable no-self-assign */ 2036 2037 Box.prototype.create = function( options ) { 2037 2038 Anchor.prototype.create.call( this, options ); 2038 2039 this.updatePath(); ··· 2046 2047 this[ faceName ] = this[ faceName ]; 2047 2048 }, this ); 2048 2049 }; 2050 2050 + /* eslint-enable no-self-assign */ 2049 2051 2050 2052 faceNames.forEach( function( faceName ) { 2051 2053 var _faceName = '_' + faceName; ··· 2057 2059 this[ _faceName ] = value; 2058 2060 this.setFace( faceName, value ); 2059 2061 }, 2060 2060 - }); 2061 2061 - }); 2062 2062 + } ); 2063 2063 + } ); 2062 2064 2063 2065 Box.prototype.setFace = function( faceName, value ) { 2064 2066 var rectProperty = faceName + 'Rect'; ··· 2088 2090 frontFace: { 2089 2091 width: this.width, 2090 2092 height: this.height, 2091 2091 - translate: { z: this.depth/2 }, 2093 2093 + translate: { z: this.depth / 2 }, 2092 2094 }, 2093 2095 rearFace: { 2094 2096 width: this.width, 2095 2097 height: this.height, 2096 2096 - translate: { z: -this.depth/2 }, 2098 2098 + translate: { z: -this.depth / 2 }, 2097 2099 rotate: { y: TAU/2 }, 2098 2100 }, 2099 2101 leftFace: { 2100 2102 width: this.depth, 2101 2103 height: this.height, 2102 2102 - translate: { x: -this.width/2 }, 2104 2104 + translate: { x: -this.width / 2 }, 2103 2105 rotate: { y: -TAU/4 }, 2104 2106 }, 2105 2107 rightFace: { 2106 2108 width: this.depth, 2107 2109 height: this.height, 2108 2108 - translate: { x: this.width/2 }, 2110 2110 + translate: { x: this.width / 2 }, 2109 2111 rotate: { y: TAU/4 }, 2110 2112 }, 2111 2113 topFace: { 2112 2114 width: this.width, 2113 2115 height: this.depth, 2114 2114 - translate: { y: -this.height/2 }, 2116 2116 + translate: { y: -this.height / 2 }, 2115 2117 rotate: { x: -TAU/4 }, 2116 2118 }, 2117 2119 bottomFace: { 2118 2120 width: this.width, 2119 2121 height: this.depth, 2120 2120 - translate: { y: this.height/2 }, 2122 2122 + translate: { y: this.height / 2 }, 2121 2123 rotate: { x: TAU/4 }, 2122 2124 }, 2123 2125 }[ faceName ]; ··· 2145 2147 } 2146 2148 }, this ); 2147 2149 }, 2148 2148 - }); 2149 2149 - }); 2150 2150 + } ); 2151 2151 + } ); 2150 2152 2151 2153 return Box; 2152 2154 2153 2153 - })); 2155 2155 + } ) ); 2154 2156 /** 2155 2157 * Index 2156 2158 */ ··· 2183 2185 /* globals define */ // AMD 2184 2186 define( 'zdog', [], root.Zdog ); 2185 2187 } 2186 2186 - })( this, function factory( Zdog, CanvasRenderer, SvgRenderer, Vector, Anchor, 2188 2188 + /* eslint-disable max-params */ 2189 2189 + } )( this, function factory( Zdog, CanvasRenderer, SvgRenderer, Vector, Anchor, 2187 2190 Dragger, Illustration, PathCommand, Shape, Group, Rect, RoundedRect, 2188 2191 Ellipse, Polygon, Hemisphere, Cylinder, Cone, Box ) { 2192 2192 + /* eslint-enable max-params */ 2189 2193 2190 2194 Zdog.CanvasRenderer = CanvasRenderer; 2191 2195 Zdog.SvgRenderer = SvgRenderer; ··· 2206 2210 Zdog.Box = Box; 2207 2211 2208 2212 return Zdog; 2209 2209 - }); 2213 2213 + } );

+1 -1

dist/zdog.dist.min.js

reviewed

··· 1 1 /*! 2 2 - * Zdog v1.1.2 2 2 + * Zdog v1.1.3 3 3 * Round, flat, designer-friendly pseudo-3D engine 4 4 * Licensed MIT 5 5 * https://zzz.dog

+1 -1

js/boilerplate.js

reviewed

··· 1 1 /*! 2 2 - * Zdog v1.1.2 2 2 + * Zdog v1.1.3 3 3 * Round, flat, designer-friendly pseudo-3D engine 4 4 * Licensed MIT 5 5 * https://zzz.dog

+2 -2

package-lock.json

reviewed

··· 1 1 { 2 2 "name": "zdog", 3 3 - "version": "1.1.2", 3 3 + "version": "1.1.3", 4 4 "lockfileVersion": 2, 5 5 "requires": true, 6 6 "packages": { 7 7 "": { 8 8 - "version": "1.1.2", 8 8 + "version": "1.1.3", 9 9 "license": "MIT", 10 10 "devDependencies": { 11 11 "eslint": "^8.7.0",

+1 -1

package.json

reviewed

··· 1 1 { 2 2 "name": "zdog", 3 3 - "version": "1.1.2", 3 3 + "version": "1.1.3", 4 4 "description": "Round, flat, designer-friendly pseudo-3D engine", 5 5 "main": "js/index.js", 6 6 "unpkg": "dist/zdog.dist.min.js",