Skip to content

Commit

Permalink
Implement rendering of groove, ridge, inset, and outset border styles…
Browse files Browse the repository at this point in the history 
…. Completes issue lojjic#10
  • Loading branch information
Jason Johnston committed Nov 24, 2011
1 parent 098df06 commit 7e0f6a8
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 13 deletions.
59 changes: 48 additions & 11 deletions sources/BorderRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -59,7 +70,7 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
'path', segmentsInfo[ i ]
);
shape.setFillAttrs(
'color', segmentsInfo[ i + 1 ].colorValue( el )
'color', segmentsInfo[ i + 1 ]
);
}

Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -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 ];

Expand All @@ -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 ] + ',' +
Expand All @@ -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 ] ) + ',' +
Expand Down Expand Up @@ -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
}
}
Expand Down
24 changes: 22 additions & 2 deletions tests/border-radius-tests.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,18 +62,20 @@ <h2>Uniform with border</h2>
<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>
Expand All @@ -84,30 +86,48 @@ <h2>Border thicker than radius</h2>
<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">
Expand Down

0 comments on commit 7e0f6a8

Please sign in to comment.