Skip to content
Browse files

Implement rendering of groove, ridge, inset, and outset border styles…

…. Completes issue #10
  • Loading branch information...
1 parent 098df06 commit 7e0f6a84df22c5c19fed83b30513991139750b27 Jason Johnston committed Nov 24, 2011
Showing with 70 additions and 13 deletions.
  1. +48 −11 sources/BorderRenderer.js
  2. +22 −2 tests/border-radius-tests.html
View
59 sources/BorderRenderer.js
@@ -25,6 +25,18 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
'dotted': 1,
'dashed': 1
},
+ colorManipStyles: {
+ 'groove': 1,
+ 'ridge': 1,
+ 'inset': 1,
+ 'outset': 1
+ },
+ doubleStyles: {
+ 'groove': 1,
+ 'ridge': 1,
+ 'double': 1
+ },
+
needsUpdate: function() {
var si = this.styleInfos;
@@ -43,7 +55,6 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
*/
draw: function() {
var me = this,
- el = me.targetElement,
props = me.styleInfos.borderInfo.getProps(),
bounds = me.boundsInfo.getBounds(),
shape, segmentsInfo, i, len;
@@ -59,7 +70,7 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
'path', segmentsInfo[ i ]
);
shape.setFillAttrs(
- 'color', segmentsInfo[ i + 1 ].colorValue( el )
+ 'color', segmentsInfo[ i + 1 ]
);
}
@@ -143,11 +154,11 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
side,
deg = 65535,
dashedStyles = me.dashedStyles,
- style;
+ style, color;
// When the border has uniform color and style all the way around, we can get
// away with a single VML path shape, otherwise we need four separate shapes.
- if ( borderProps.stylesSame && borderProps.colorsSame ) {
+ if ( borderProps.stylesSame && borderProps.colorsSame && !( styles[ 't' ] in me.colorManipStyles ) ) {
if( colors['t'].alpha() > 0 ) {
// Outer path
path[ 0 ] = me.getBoxPath( 0, 0, 0, 0, mult );
@@ -191,7 +202,8 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
centerY2 = args[ 5 ],
outerX2 = args[ 6 ],
outerY2 = args[ 7 ],
- baseAngle = args[ 8 ];
+ baseAngle = args[ 8 ],
+ isTopLeft = side === 't' || side === 'l';
style = styles[ side ];
@@ -205,11 +217,15 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
abs( outerCoords[ outerY2 ] - outerCoords[ centerY2 ] ) + ',' +
baseAngle * deg + ',' + -45 * deg;
- // If double style, add the middle cutout sub-paths
- if( style === 'double' ) {
+ // If double style, add the middle sub-paths
+ if( style in me.doubleStyles ) {
if( !doubleOuterCoords ) {
- doubleOuterCoords = me.getBoxPathCoords( wT / 3, wR / 3, wB / 3, wL / 3, mult );
- doubleInnerCoords = me.getBoxPathCoords( wT * 2 / 3, wR * 2 / 3, wB * 2 / 3, wL * 2 / 3, mult );
+ if ( style === 'double' ) {
+ doubleOuterCoords = me.getBoxPathCoords( wT / 3, wR / 3, wB / 3, wL / 3, mult );
+ doubleInnerCoords = me.getBoxPathCoords( wT * 2 / 3, wR * 2 / 3, wB * 2 / 3, wL * 2 / 3, mult );
+ } else {
+ doubleOuterCoords = doubleInnerCoords = me.getBoxPathCoords( wT / 2, wR / 2, wB / 2, wL / 2, mult );
+ }
}
path.push(
'ae' + doubleOuterCoords[ centerX2 ] + ',' + doubleOuterCoords[ centerY2 ] + ',' +
@@ -220,7 +236,20 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
abs( doubleOuterCoords[ outerX1 ] - doubleOuterCoords[ centerX1 ] ) + ',' +
abs( doubleOuterCoords[ outerY1 ] - doubleOuterCoords[ centerY1 ] ) + ',' +
baseAngle * deg + ',' + 45 * deg +
- 'x' +
+ 'x'
+ );
+
+ // Actual 'double' style with have both paths as a single shape, but 'ridge' and
+ // 'groove' need separate shapes for the different colors
+ if( style !== 'double' ) {
+ color = colors[ side ].colorValue( el ) + (
+ ( style === 'groove' ? isTopLeft : !isTopLeft ) ? ' darken(128)' : ' lighten(128)'
+ );
+ segmentsInfo.push( path.join( '' ), color );
+ path.length = 0; //reuse same array for next loop
+ }
+
+ path.push(
'al' + doubleInnerCoords[ centerX1 ] + ',' + doubleInnerCoords[ centerY1 ] + ',' +
abs( doubleInnerCoords[ outerX1 ] - doubleInnerCoords[ centerX1 ] ) + ',' +
abs( doubleInnerCoords[ outerY1 ] - doubleInnerCoords[ centerY1 ] ) + ',' +
@@ -257,7 +286,15 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
me.dashify( path, innerCoords[ 1 ], innerCoords[ 15 ], wL * mult, 0, 1, style );
}
- segmentsInfo.push( path.join( '' ), colors[ side ] );
+ color = colors[ side ].colorValue( el );
+ if ( style in me.colorManipStyles ) {
+ // lighten or darken as appropriate
+ color += (
+ ( ( style === 'groove' || style === 'outset' ) ? isTopLeft : !isTopLeft ) ?
+ ' lighten(128)' : ' darken(128)'
+ );
+ }
+ segmentsInfo.push( path.join( '' ), color );
path.length = 0; //reuse same array for next loop
}
}
View
24 tests/border-radius-tests.html
@@ -62,18 +62,20 @@
<div>border-radius: 10px; border: 5px dotted #000;</div>
<div>border-radius: 10px; border: 5px dashed #000;</div>
<div>border-radius: 10px; border: 5px double #000;</div>
-<!--
<div>border-radius: 10px; border: 5px groove #000;</div>
<div>border-radius: 10px; border: 5px ridge #000;</div>
<div>border-radius: 10px; border: 5px inset #000;</div>
<div>border-radius: 10px; border: 5px outset #000;</div>
--->
<h2>Differing border widths</h2>
<div>border-radius: 10px; border: solid #000; border-width: 6px 9px 6px 3px;</div>
<div>border-radius: 10px; border: dotted #000; border-width: 6px 9px 6px 3px;</div>
<div>border-radius: 10px; border: dashed #000; border-width: 6px 9px 6px 3px;</div>
<div>border-radius: 10px; border: double #000; border-width: 6px 9px 6px 3px;</div>
+ <div>border-radius: 10px; border: groove #000; border-width: 6px 9px 6px 3px;</div>
+ <div>border-radius: 10px; border: ridge #000; border-width: 6px 9px 6px 3px;</div>
+ <div>border-radius: 10px; border: inset #000; border-width: 6px 9px 6px 3px;</div>
+ <div>border-radius: 10px; border: outset #000; border-width: 6px 9px 6px 3px;</div>
<h2>Border thicker than radius</h2>
<div>border-radius: 10px; border: 20px solid #000;</div>
@@ -84,30 +86,48 @@
<div>border-radius: 10px; border: dotted #000; border-width: 3px 20px 9px 15px;</div>
<div>border-radius: 10px; border: dashed #000; border-width: 3px 20px 9px 15px;</div>
<div>border-radius: 10px; border: double #000; border-width: 3px 20px 9px 15px;</div>
+ <div>border-radius: 10px; border: groove #000; border-width: 3px 20px 9px 15px;</div>
+ <div>border-radius: 10px; border: ridge #000; border-width: 3px 20px 9px 15px;</div>
+ <div>border-radius: 10px; border: inset #000; border-width: 3px 20px 9px 15px;</div>
+ <div>border-radius: 10px; border: outset #000; border-width: 3px 20px 9px 15px;</div>
<h2>Zero-width borders</h2>
<div>border-radius: 10px; border: 20px solid #000; border-top-width: 0;</div>
<div>border-radius: 10px; border: 20px dotted #000; border-right-width: 0;</div>
<div>border-radius: 10px; border: 20px dashed #000; border-bottom-width: 0;</div>
<div>border-radius: 10px; border: 20px double #000; border-left-width: 0;</div>
+ <div>border-radius: 10px; border: 20px groove #000; border-top-width: 0;</div>
+ <div>border-radius: 10px; border: 20px ridge #000; border-right-width: 0;</div>
+ <div>border-radius: 10px; border: 20px inset #000; border-bottom-width: 0;</div>
+ <div>border-radius: 10px; border: 20px outset #000; border-left-width: 0;</div>
<h2>Differing border colors</h2>
<div>border-radius: 10px; border: 20px solid; border-color: red green blue orange;</div>
<div>border-radius: 10px; border: 20px dotted; border-color: red green blue orange;</div>
<div>border-radius: 10px; border: 20px dashed; border-color: red green blue orange;</div>
<div>border-radius: 10px; border: 20px double; border-color: red green blue orange;</div>
+ <div>border-radius: 10px; border: 20px groove; border-color: red green blue orange;</div>
+ <div>border-radius: 10px; border: 20px ridge; border-color: red green blue orange;</div>
+ <div>border-radius: 10px; border: 20px inset; border-color: red green blue orange;</div>
+ <div>border-radius: 10px; border: 20px outset; border-color: red green blue orange;</div>
<h2>Differing border colors and styles</h2>
<div>border-radius: 10px; border: 20px; border-color: red green blue orange; border-style: solid dotted dashed double;</div>
+ <div>border-radius: 10px; border: 20px; border-color: red green blue orange; border-style: groove ridge inset outset;</div>
<h2>Differing border colors and widths</h2>
<div>border-radius: 10px; border: solid; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
<div>border-radius: 10px; border: dotted; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
<div>border-radius: 10px; border: dashed; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
<div>border-radius: 10px; border: double; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+ <div>border-radius: 10px; border: groove; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+ <div>border-radius: 10px; border: ridge; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+ <div>border-radius: 10px; border: inset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+ <div>border-radius: 10px; border: outset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
<h2>Differing border colors, styles, and widths</h2>
<div>border-radius: 10px; border-style: solid dotted dashed double; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+ <div>border-radius: 10px; border-style: groove ridge inset outset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
</div>
<script type="text/javascript">

0 comments on commit 7e0f6a8

Please sign in to comment.
Something went wrong with that request. Please try again.