From e5fde5f9aad77a6619880ec818e0ee50db1f25c1 Mon Sep 17 00:00:00 2001 From: Divyanshi Vashist Date: Thu, 9 Feb 2017 15:10:07 +1100 Subject: [PATCH 1/3] Added support for % --- src/offsetPath.js | 140 ++++++++++++++++++++++++++----- src/toTransform.js | 6 +- test/pathBasicShapeCircleTest.js | 45 ++++++++-- 3 files changed, 160 insertions(+), 31 deletions(-) diff --git a/src/offsetPath.js b/src/offsetPath.js index c6a1a12..c56703a 100644 --- a/src/offsetPath.js +++ b/src/offsetPath.js @@ -2,7 +2,13 @@ 'use strict'; (function () { - function basicShapePolygonParse (input, element) { + var isNumeric = internalScope.isNumeric; + + function roundToHundredth (number) { + return Math.round(number * 100) / 100; + } + + function basicShapePolygonParse (input) { // TODO: Support the fill-rule option and % var argumentList = input.split(','); var coordinate = null; @@ -50,37 +56,127 @@ return {type: 'path', path: path}; } - function basicShapeCircleParse (input, element) { - // TODO: Need element as an argument to this function - var radius; - var position = /at (.*?)$/.exec(input); + function getCirclePathPosition (parentProperties, position) { + var analysedPosition = []; + + if (position !== null) { + var positionList = position[1].split(/\s+/); + + // If only one value is specified, the second value is assumed to be 'center' + // https://drafts.csswg.org/css-backgrounds-3/#position + for (var index in positionList) { + var aPosition = positionList[index]; + + var aPositionUnit = /(%|px)$/.exec(aPosition)[1]; + if (aPositionUnit === null) { + return null; + } + + var aPositionValueString = aPosition.substring(0, aPosition.length - aPositionUnit.length); + if (!isNumeric(aPositionValueString) || aPositionValueString === '') { + return null; + } + + var aPositionValue = Number(aPositionValueString); + if (aPositionUnit === '%') { + if (Number(index) === 0) { + if (!parentProperties || !parentProperties.width) { + return null; + } + aPositionValue *= (parentProperties.width / 100); + } + if (Number(index) === 1) { + if (!parentProperties || !parentProperties.height) { + return null; + } + aPositionValue *= (parentProperties.height / 100); + } + } + analysedPosition[index] = aPositionValue; + } + } - // TODO: Need to support other positions as currently this only supports positions in which both x and y are specified and are in px + if (analysedPosition.length < 2) { + for (var i = analysedPosition.length; i < 2; i++) { + if (Number(i) === 0) { + if (!parentProperties || !parentProperties.width) { + return null; + } + analysedPosition[i] = parentProperties.width / 2; + } else if (Number(i) === 1) { + if (!parentProperties || !parentProperties.height) { + return null; + } + analysedPosition[i] = parentProperties.height / 2; + } + } + } + + return analysedPosition; + } + + function getCirclePathRadius (parentProperties, position, input) { + var radiusString; if (position === null) { - // TODO: Set default position to the center of the reference box - position = '0px 0px'; if (input !== '') { - radius = input; + radiusString = input; } } else { - position = position[1].split(/\s+/); - radius = (/^(.*?) at/.exec(input)); - if (radius === null) { - radius = 'closest-side'; + radiusString = (/^(.*?) at/.exec(input)); + // TODO: Add support for when a radius had not been specified + if (radiusString === null) { + radiusString = 'closest-side'; } else { - radius = radius[1]; + radiusString = radiusString[1]; } } - radius = Number(radius.substring(0, radius.length - 2)); + var radiusUnit = /(%|px)$/.exec(radiusString); + if (radiusUnit === null) { + return null; + } + + var radiusValueString = radiusString.substring(0, radiusString.length - radiusUnit[1].length); + if (!isNumeric(radiusValueString)) { + return null; + } + var radiusValue = Number(radiusValueString); + + if (radiusUnit[1] === '%') { + var height = parentProperties.height; + var width = parentProperties.width; + if (!height || !width) { + return null; + } - var positionX = Number(position[0].substring(0, position[0].length - 2)); - var positionY = Number(position[1].substring(0, position[1].length - 2)); + return roundToHundredth((Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) / Math.sqrt(2)) * radiusValue / 100); + } + + return Number(radiusValueString); + } + + function basicShapeCircleParse (input, element) { + var parentProperties = null; + if (element) { + parentProperties = element.offsetParent ? element.offsetParent.getBoundingClientRect() : null; + } + + var position = /at (.*?)$/.exec(input); + + var radiusValue = getCirclePathRadius(parentProperties, position, input); + if (!radiusValue) { + return undefined; + } + + var analysedPosition = getCirclePathPosition(parentProperties, position); + if (!analysedPosition) { + return undefined; + } - var pathString = 'M ' + positionX + ' ' + positionY + - ' m 0,' + (-radius) + - ' a ' + radius + ',' + radius + ' 0 0,1 ' + radius + ',' + radius + - ' a ' + radius + ',' + radius + ' 0 1,1 ' + (-radius) + ',' + (-radius) + ' z'; + var pathString = 'M ' + analysedPosition[0] + ' ' + analysedPosition[1] + + ' m 0,' + (-radiusValue) + + ' a ' + radiusValue + ',' + radiusValue + ' 0 0,1 ' + radiusValue + ',' + radiusValue + + ' a ' + radiusValue + ',' + radiusValue + ' 0 1,1 ' + (-radiusValue) + ',' + (-radiusValue) + ' z'; return {type: 'path', path: pathString}; } @@ -166,6 +262,7 @@ return undefined; } var toParse = [basicShapePolygonParse, basicShapeCircleParse, basicShapeInsetParse, basicShapeEllipseParse]; + // var toParse = [basicShapeCircleParse]; for (var i = 0; i < toParse.length; i++) { var result = toParse[i](shapeArguments[1], element); if (result) { @@ -228,4 +325,5 @@ internalScope.offsetPathParse = offsetPathParse; internalScope.offsetPathMerge = offsetPathMerge; + internalScope.roundToHundredth = roundToHundredth; })(); diff --git a/src/toTransform.js b/src/toTransform.js index fe4ec3e..5f3a76c 100644 --- a/src/toTransform.js +++ b/src/toTransform.js @@ -2,6 +2,8 @@ 'use strict'; (function () { + var roundToHundredth = internalScope.roundToHundredth; + function convertTranslate (input) { var valuesArray = internalScope.translateParse(input); @@ -88,10 +90,6 @@ return offsetDistanceLength; } - function roundToHundredth (number) { - return Math.round(number * 100) / 100; - } - function convertPathString (properties) { var offsetPath = internalScope.offsetPathParse(properties['offsetPath']); var closedLoop = isClosedLoop(offsetPath); diff --git a/test/pathBasicShapeCircleTest.js b/test/pathBasicShapeCircleTest.js index 6d50fae..91f2732 100644 --- a/test/pathBasicShapeCircleTest.js +++ b/test/pathBasicShapeCircleTest.js @@ -1,11 +1,44 @@ -/* global suite test internalScope */ +/* global assert suite test internalScope */ - (function () { - suite('offsetPath', function () { - test('basicShapeCircle', function () { - var assertTransformInterpolation = internalScope.assertTransformInterpolation; - assertTransformInterpolation([ +(function () { + suite('offsetPath', function () { + test('basicShapeCircle', function () { + var assertTransformInterpolation = internalScope.assertTransformInterpolation; + var offsetPathParse = internalScope.offsetPathParse; + + var containerStyle = { + position: 'absolute', + height: '100px', + width: '200px' + }; + + var container = document.createElement('div'); + + for (var property in containerStyle) { + container.style[property] = containerStyle[property]; + } + + var target = document.createElement('div'); + container.appendChild(target); + document.body.appendChild(container); + + var circlePathString = offsetPathParse('circle(50%)', target).path; + assert.equal(circlePathString, 'M 100 50 m 0,-79.06 a 79.06,79.06 0 0,1 79.06,79.06 a 79.06,79.06 0 1,1 -79.06,-79.06 z'); + + circlePathString = offsetPathParse('circle(10px)', target).path; + assert.equal(circlePathString, 'M 100 50 m 0,-10 a 10,10 0 0,1 10,10 a 10,10 0 1,1 -10,-10 z'); + + circlePathString = offsetPathParse('circle(10px at 50%)', target).path; + assert.equal(circlePathString, 'M 100 50 m 0,-10 a 10,10 0 0,1 10,10 a 10,10 0 1,1 -10,-10 z'); + + circlePathString = offsetPathParse('circle(50% at 100px 200px)', target).path; + assert.equal(circlePathString, 'M 100 200 m 0,-79.06 a 79.06,79.06 0 0,1 79.06,79.06 a 79.06,79.06 0 1,1 -79.06,-79.06 z'); + + circlePathString = offsetPathParse('circle(10px at 50% 50%)', target).path; + assert.equal(circlePathString, 'M 100 50 m 0,-10 a 10,10 0 0,1 10,10 a 10,10 0 1,1 -10,-10 z'); + + assertTransformInterpolation([ {'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '0%'}, {'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '100%'}], [ From 8c0b3e2e3985d17a7f2c95fde45204a6fe778533 Mon Sep 17 00:00:00 2001 From: Divyanshi Vashist Date: Thu, 9 Feb 2017 15:10:31 +1100 Subject: [PATCH 2/3] Added support for % --- examples/Nyancat.png | Bin 0 -> 11654 bytes examples/basicShapeCirclePath.html | 31 +++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 examples/Nyancat.png create mode 100644 examples/basicShapeCirclePath.html diff --git a/examples/Nyancat.png b/examples/Nyancat.png new file mode 100644 index 0000000000000000000000000000000000000000..9c071f173e7ea1f2aae7d89dc617064f626e1da6 GIT binary patch literal 11654 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 CNJ+y0 literal 0 HcmV?d00001 diff --git a/examples/basicShapeCirclePath.html b/examples/basicShapeCirclePath.html new file mode 100644 index 0000000..c26e31d --- /dev/null +++ b/examples/basicShapeCirclePath.html @@ -0,0 +1,31 @@ + \ No newline at end of file From 56ea25f9ea2d81918cdbdf30211ec6ffabfcb542 Mon Sep 17 00:00:00 2001 From: Divyanshi Vashist Date: Thu, 9 Feb 2017 15:18:48 +1100 Subject: [PATCH 3/3] Resolved merge conflicts --- src/offsetPath.js | 2 +- test/pathBasicShapeCircleTest.js | 77 ++++++++++++++++---------------- 2 files changed, 39 insertions(+), 40 deletions(-) diff --git a/src/offsetPath.js b/src/offsetPath.js index c56703a..49d8a50 100644 --- a/src/offsetPath.js +++ b/src/offsetPath.js @@ -8,7 +8,7 @@ return Math.round(number * 100) / 100; } - function basicShapePolygonParse (input) { + function basicShapePolygonParse (input, element) { // TODO: Support the fill-rule option and % var argumentList = input.split(','); var coordinate = null; diff --git a/test/pathBasicShapeCircleTest.js b/test/pathBasicShapeCircleTest.js index 91f2732..57b2dd0 100644 --- a/test/pathBasicShapeCircleTest.js +++ b/test/pathBasicShapeCircleTest.js @@ -1,98 +1,97 @@ /* global assert suite test internalScope */ - (function () { suite('offsetPath', function () { test('basicShapeCircle', function () { - var assertTransformInterpolation = internalScope.assertTransformInterpolation; - var offsetPathParse = internalScope.offsetPathParse; + var assertTransformInterpolation = internalScope.assertTransformInterpolation; + var offsetPathParse = internalScope.offsetPathParse; - var containerStyle = { + var containerStyle = { position: 'absolute', height: '100px', width: '200px' - }; + }; - var container = document.createElement('div'); + var container = document.createElement('div'); - for (var property in containerStyle) { + for (var property in containerStyle) { container.style[property] = containerStyle[property]; - } + } - var target = document.createElement('div'); - container.appendChild(target); - document.body.appendChild(container); + var target = document.createElement('div'); + container.appendChild(target); + document.body.appendChild(container); - var circlePathString = offsetPathParse('circle(50%)', target).path; - assert.equal(circlePathString, 'M 100 50 m 0,-79.06 a 79.06,79.06 0 0,1 79.06,79.06 a 79.06,79.06 0 1,1 -79.06,-79.06 z'); + var circlePathString = offsetPathParse('circle(50%)', target).path; + assert.equal(circlePathString, 'M 100 50 m 0,-79.06 a 79.06,79.06 0 0,1 79.06,79.06 a 79.06,79.06 0 1,1 -79.06,-79.06 z'); - circlePathString = offsetPathParse('circle(10px)', target).path; - assert.equal(circlePathString, 'M 100 50 m 0,-10 a 10,10 0 0,1 10,10 a 10,10 0 1,1 -10,-10 z'); + circlePathString = offsetPathParse('circle(10px)', target).path; + assert.equal(circlePathString, 'M 100 50 m 0,-10 a 10,10 0 0,1 10,10 a 10,10 0 1,1 -10,-10 z'); - circlePathString = offsetPathParse('circle(10px at 50%)', target).path; - assert.equal(circlePathString, 'M 100 50 m 0,-10 a 10,10 0 0,1 10,10 a 10,10 0 1,1 -10,-10 z'); + circlePathString = offsetPathParse('circle(10px at 50%)', target).path; + assert.equal(circlePathString, 'M 100 50 m 0,-10 a 10,10 0 0,1 10,10 a 10,10 0 1,1 -10,-10 z'); - circlePathString = offsetPathParse('circle(50% at 100px 200px)', target).path; - assert.equal(circlePathString, 'M 100 200 m 0,-79.06 a 79.06,79.06 0 0,1 79.06,79.06 a 79.06,79.06 0 1,1 -79.06,-79.06 z'); + circlePathString = offsetPathParse('circle(50% at 100px 200px)', target).path; + assert.equal(circlePathString, 'M 100 200 m 0,-79.06 a 79.06,79.06 0 0,1 79.06,79.06 a 79.06,79.06 0 1,1 -79.06,-79.06 z'); - circlePathString = offsetPathParse('circle(10px at 50% 50%)', target).path; - assert.equal(circlePathString, 'M 100 50 m 0,-10 a 10,10 0 0,1 10,10 a 10,10 0 1,1 -10,-10 z'); + circlePathString = offsetPathParse('circle(10px at 50% 50%)', target).path; + assert.equal(circlePathString, 'M 100 50 m 0,-10 a 10,10 0 0,1 10,10 a 10,10 0 1,1 -10,-10 z'); - assertTransformInterpolation([ + assertTransformInterpolation([ {'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '0%'}, {'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '100%'}], - [ + [ {at: 0, is: 'translate3d(0px, -10px, 0px)'}, {at: 0.25, is: 'translate3d(10px, 0px, 0px) rotate(90deg)'}, {at: 0.5, is: 'translate3d(0px, 10px, 0px) rotate(180deg)'}, {at: 0.75, is: 'translate3d(-10px, 0px, 0px) rotate(-90deg)'}, {at: 1, is: 'translate3d(0px, -10px, 0px)'} - ] + ] ); - assertTransformInterpolation([ + assertTransformInterpolation([ {'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '0px'}, {'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '62.83px'}], - [ + [ {at: 0, is: 'translate3d(0px, -10px, 0px)'}, {at: 0.25, is: 'translate3d(10px, 0px, 0px) rotate(89.45deg)'}, {at: 0.5, is: 'translate3d(0.01px, 10px, 0px) rotate(180deg)'}, {at: 0.75, is: 'translate3d(-10px, 0.01px, 0px) rotate(-90deg)'}, {at: 1, is: 'translate3d(-0.01px, -10px, 0px) rotate(-0.55deg)'} - ] + ] ); - assertTransformInterpolation([ + assertTransformInterpolation([ {'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '0%'}, {'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '50%'}], - [ + [ {at: 0, is: 'translate3d(0px, -10px, 0px)'}, {at: 0.5, is: 'translate3d(10px, 0px, 0px) rotate(90deg)'}, {at: 1, is: 'translate3d(0px, 10px, 0px) rotate(180deg)'} - ] + ] ); - assertTransformInterpolation([ + assertTransformInterpolation([ {'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '0px'}, {'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '31.42px'}], - [ + [ {at: 0, is: 'translate3d(0px, -10px, 0px)'}, {at: 0.5, is: 'translate3d(10px, 0px, 0px) rotate(90deg)'}, {at: 1, is: 'translate3d(0px, 10px, 0px) rotate(179.45deg)'} - ] + ] ); - assertTransformInterpolation([ + assertTransformInterpolation([ {'offsetPath': 'circle(10px at 100px 100px)', 'offsetDistance': '0%'}, {'offsetPath': 'circle(10px at 100px 100px)', 'offsetDistance': '100%'}], - [ + [ {at: 0, is: 'translate3d(100px, 90px, 0px)'}, {at: 0.25, is: 'translate3d(110px, 100px, 0px) rotate(90deg)'}, {at: 0.5, is: 'translate3d(100px, 110px, 0px) rotate(180deg)'}, {at: 0.75, is: 'translate3d(90px, 100px, 0px) rotate(-90deg)'}, {at: 1, is: 'translate3d(100px, 90px, 0px)'} - ] + ] ); - }); - }); - })(); + }); + }); +})();