Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(progress-circular): correct rendering for diameter bigger than 60 #11896

Merged
merged 1 commit into from
May 11, 2020
Merged

fix(progress-circular): correct rendering for diameter bigger than 60 #11896

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 36 additions & 11 deletions src/components/progressCircular/js/progressCircularDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
diameter = getSize(scope.mdDiameter);
strokeWidth = getStroke(diameter);
path.attr('d', getSvgArc(diameter, strokeWidth, true));
path.attr('stroke-dasharray', (diameter - strokeWidth) * $window.Math.PI * 0.75);
path.attr('stroke-dasharray', getDashLength(diameter, strokeWidth, 75));
}
startIndeterminateAnimation();
} else {
Expand All @@ -172,7 +172,7 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
diameter = getSize(scope.mdDiameter);
strokeWidth = getStroke(diameter);
path.attr('d', getSvgArc(diameter, strokeWidth, false));
path.attr('stroke-dasharray', (diameter - strokeWidth) * $window.Math.PI);
path.attr('stroke-dasharray', getDashLength(diameter, strokeWidth, 100));
}

element.attr('aria-valuenow', newValue);
Expand Down Expand Up @@ -216,12 +216,12 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
path.attr('stroke-linecap', 'square');
if (scope.mdMode == MODE_INDETERMINATE) {
path.attr('d', getSvgArc(diameter, strokeWidth, true));
path.attr('stroke-dasharray', (diameter - strokeWidth) * $window.Math.PI * 0.75);
path.attr('stroke-dashoffset', getDashLength(diameter, strokeWidth, 1, 75));
path.attr('stroke-dasharray', getDashLength(diameter, strokeWidth, 75));
path.attr('stroke-dashoffset', getDashOffset(diameter, strokeWidth, 1, 75));
} else {
path.attr('d', getSvgArc(diameter, strokeWidth, false));
path.attr('stroke-dasharray', (diameter - strokeWidth) * $window.Math.PI);
path.attr('stroke-dashoffset', getDashLength(diameter, strokeWidth, 0, 100));
path.attr('stroke-dasharray', getDashLength(diameter, strokeWidth, 100));
path.attr('stroke-dashoffset', getDashOffset(diameter, strokeWidth, 0, 100));
renderCircle(value, value);
}

Expand Down Expand Up @@ -255,7 +255,7 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
}

function renderFrame(value) {
path.attr('stroke-dashoffset', getDashLength(diameter, strokeWidth, value, dashLimit));
path.attr('stroke-dashoffset', getDashOffset(diameter, strokeWidth, value, dashLimit));
path.attr('transform','rotate(' + (rotation) + ' ' + diameter/2 + ' ' + diameter/2 + ')');
}
}
Expand Down Expand Up @@ -330,12 +330,12 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
* @param {number} diameter Diameter of the container.
* @param {number} strokeWidth Stroke width to be used when drawing circle
* @param {number} value Percentage of circle (between 0 and 100)
* @param {number} limit Max percentage for circle
* @param {number} maxArcLength Maximum length of arc as a percentage of circle (between 0 and 100)
*
* @returns {number} Stroke length for progres circle
* @returns {number} Stroke length for progress circle
*/
function getDashLength(diameter, strokeWidth, value, limit) {
return (diameter - strokeWidth) * $window.Math.PI * ((3 * (limit || 100) / 100) - (value/100));
function getDashOffset(diameter, strokeWidth, value, maxArcLength) {
return getSpinnerCircumference(diameter, strokeWidth) * ((maxArcLength - value) / 100);
}

/**
Expand Down Expand Up @@ -373,4 +373,29 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
return $mdProgressCircular.strokeWidth / 100 * diameter;
}

/**
* Return length of the dash
*
* @param {number} diameter Diameter of the container.
* @param {number} strokeWidth Stroke width to be used when drawing circle
* @param {number} value Percentage of circle (between 0 and 100)
*
* @returns {number} Length of the dash
*/
function getDashLength(diameter, strokeWidth, value) {
return getSpinnerCircumference(diameter, strokeWidth) * (value / 100);
}

/**
* Return circumference of the spinner
*
* @param {number} diameter Diameter of the container.
* @param {number} strokeWidth Stroke width to be used when drawing circle
*
* @returns {number} Circumference of the spinner
*/
function getSpinnerCircumference(diameter, strokeWidth) {
return ((diameter - strokeWidth) * $window.Math.PI);
}

}