Skip to content

Commit da0aab0

Browse files
author
Courtney Bracefield
committed
resolved conflicts.
2 parents 7154077 + b9f3b68 commit da0aab0

File tree

6 files changed

+198
-59
lines changed

6 files changed

+198
-59
lines changed

‎karma.conf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ module.exports = function(config) {
2323
'tools/internal-scope.js',
2424
],
2525
require('fs').readFileSync('src/fileOrder.txt', 'utf8').split('\n'),
26-
['test/*.js']
26+
['test/testFunctions.js', 'test/basicShapePolygonTest.js']
2727
),
2828

2929
// list of files to exclude

‎src/offsetPath.js‎

Lines changed: 123 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -34,65 +34,138 @@
3434
return {type: 'path', path: path};
3535
}
3636

37-
function offsetPathParse (input) {
38-
var parseAngleAsDegrees = internalScope.parseAngleAsDegrees;
39-
var isInArray = internalScope.isInArray;
40-
// https://drafts.fxtf.org/motion-1/#offset-path-property
37+
function basicShapeCircleParse (input) {
38+
// TODO: Need element as an argument to this function
39+
var radius;
40+
var position = /at (.*?)$/.exec(input);
4141

42+
// TODO: Need to support other positions as currently this only supports positions in which both x and y are specified and are in px
43+
if (position === null) {
44+
// TODO: Set default position to the center of the reference box
45+
position = '0px 0px';
46+
if (input !== '') {
47+
radius = input;
48+
}
49+
} else {
50+
position = position[1].split(/\s+/);
51+
radius = (/^(.*?) at/.exec(input));
52+
if (radius === null) {
53+
radius = 'closest-side';
54+
} else {
55+
radius = radius[1];
56+
}
57+
}
58+
59+
radius = Number(radius.substring(0, radius.length - 2));
60+
61+
var positionX = Number(position[0].substring(0, position[0].length - 2));
62+
var positionY = Number(position[1].substring(0, position[1].length - 2));
63+
64+
var pathString = 'M ' + positionX + ' ' + positionY +
65+
' m 0,' + (-radius) +
66+
' a ' + radius + ',' + radius + ' 0 0,1 ' + radius + ',' + radius +
67+
' a ' + radius + ',' + radius + ' 0 1,1 ' + (-radius) + ',' + (-radius) + ' z';
68+
69+
return {type: 'path', path: pathString};
70+
}
71+
72+
function basicShapeInsetParse (input) {
73+
// WIP
74+
return null;
75+
}
76+
77+
function basicShapeEllipseParse (input) {
78+
// WIP
79+
return null;
80+
}
81+
82+
function parseNone (input) {
4283
if (input === 'none') {
4384
return {type: null, angle: null, path: null};
4485
}
86+
}
4587

88+
function parseRay (input) {
89+
var isInArray = internalScope.isInArray;
90+
var parseAngleAsDegrees = internalScope.parseAngleAsDegrees;
4691
var ray = /^ray\((.*)\)$/.exec(input);
47-
var path = /^path\(['"](.*)['"]\)$/.exec(input);
48-
// TODO: For basic shape check for closing brackets
49-
var shapeType = /^[^\(]*/.exec(input);
5092

51-
if (ray !== null) {
52-
var rayInput = ray[1].split(/\s+/);
53-
if (rayInput.length > 3) {
54-
return undefined;
55-
}
56-
var result = {type: 'ray', angle: null, path: null, contain: false, size: null};
57-
var validSizes = ['closest-side', 'farthest-side', 'closest-corner', 'farthest-corner'];
58-
59-
for (var i = 0; i < rayInput.length; i++) {
60-
if (rayInput[i] === 'contain') {
61-
if (result.contain) {
62-
return undefined;
63-
}
64-
result.contain = true;
65-
} else if (isInArray(validSizes, rayInput[i])) {
66-
if (result.size) {
67-
return undefined;
68-
}
69-
result.size = rayInput[i];
70-
} else {
71-
if (result.angle) {
72-
return undefined;
73-
}
74-
var rayInputDegrees = parseAngleAsDegrees(rayInput[i]);
75-
if (rayInputDegrees === null) {
76-
return undefined;
77-
}
78-
result.angle = rayInputDegrees;
93+
if (ray === null) {
94+
return undefined;
95+
}
96+
var rayInput = ray[1].split(/\s+/);
97+
if (rayInput.length > 3) {
98+
return undefined;
99+
}
100+
var result = {type: 'ray', angle: null, path: null, contain: false, size: null};
101+
var validSizes = ['closest-side', 'farthest-side', 'closest-corner', 'farthest-corner'];
102+
103+
for (var i = 0; i < rayInput.length; i++) {
104+
if (rayInput[i] === 'contain') {
105+
if (result.contain) {
106+
return undefined;
79107
}
108+
result.contain = true;
109+
} else if (isInArray(validSizes, rayInput[i])) {
110+
if (result.size) {
111+
return undefined;
112+
}
113+
result.size = rayInput[i];
114+
} else {
115+
if (result.angle) {
116+
return undefined;
117+
}
118+
var rayInputDegrees = parseAngleAsDegrees(rayInput[i]);
119+
if (rayInputDegrees === null) {
120+
return undefined;
121+
}
122+
result.angle = rayInputDegrees;
80123
}
81-
return result;
82-
} else if (path !== null) {
83-
var pathInput = path[1];
84-
return {type: 'path', path: pathInput};
85-
} else if (shapeType !== null) {
86-
var basicShapes = ['inset', 'circle', 'ellipse', 'polygon'];
87-
if (!isInArray(basicShapes, shapeType[0])) {
88-
return undefined;
89-
}
90-
var shapeArguments = /\(([^)]+)\)/.exec(input);
91-
if (shapeArguments === null) {
92-
return undefined;
124+
}
125+
return result;
126+
}
127+
128+
function parsePath (input) {
129+
var path = /^path\(['"](.*)['"]\)$/.exec(input);
130+
if (path === null) {
131+
return undefined;
132+
}
133+
var pathInput = path[1];
134+
return {type: 'path', path: pathInput};
135+
}
136+
137+
function parseShape (input) {
138+
var isInArray = internalScope.isInArray;
139+
var shapeType = /^[^\(]*/.exec(input);
140+
if (shapeType == null) {
141+
return undefined;
142+
}
143+
var basicShapes = ['inset', 'circle', 'ellipse', 'polygon'];
144+
if (!isInArray(basicShapes, shapeType[0])) {
145+
return undefined;
146+
}
147+
// TODO: For basic shape check for closing brackets
148+
var shapeArguments = /\(([^)]+)\)/.exec(input);
149+
if (shapeArguments === null) {
150+
return undefined;
151+
}
152+
var toParse = [basicShapePolygonParse, basicShapeCircleParse, basicShapeInsetParse, basicShapeEllipseParse];
153+
for (var i = 0; i < toParse.length; i++) {
154+
var result = toParse[i](shapeArguments[1]);
155+
if (result) {
156+
return result;
93157
}
94-
if (shapeType[0] === 'polygon') {
95-
return basicShapePolygonParse(shapeArguments[1]);
158+
}
159+
return undefined;
160+
}
161+
162+
function offsetPathParse (input) {
163+
// https://drafts.fxtf.org/motion-1/#offset-path-property
164+
var toParse = [parseNone, parseRay, parsePath, parseShape];
165+
for (var i = 0; i < toParse.length; i++) {
166+
var result = toParse[i](input);
167+
if (result) {
168+
return result;
96169
}
97170
}
98171
return undefined;
@@ -114,6 +187,7 @@
114187
if (input.type === 'path') {
115188
return "path('" + input.path + "')";
116189
}
190+
117191
if (input.type === null) {
118192
return 'none';
119193
}

‎src/toTransform.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106

107107
var currentOffsetDistance = getPathStringOffsetDistance(offsetPath, pathElement, offsetDistance, 0);
108108

109-
var epsilon = 0.001;
109+
var epsilon = 0.0001;
110110
var rotateFlip = false;
111111
if (!closedLoop && (currentOffsetDistance + epsilon) > totalPathLength) {
112112
epsilon *= -1;

‎test/basicShapePolygonTest.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@
4545
{'offsetPath': 'polygon(0px 0px, 250px 0px, 400px 200px, 250px 400px, 0px 400px, -150px 200px)', 'offsetDistance': '100%'}],
4646
[
4747
{at: 0, is: 'translate3d(0px, 0px, 0px)'},
48-
{at: 1 / 3, is: 'translate3d(400px, 200px, 0px) rotate(127.04deg)'},
48+
{at: 1 / 3, is: 'translate3d(400px, 200px, 0px) rotate(128.66deg)'},
4949
{at: 0.5, is: 'translate3d(250px, 400px, 0px) rotate(180deg)'},
50-
{at: 2 / 3, is: 'translate3d(0px, 400px, 0px) rotate(-126.44deg)'},
50+
{at: 2 / 3, is: 'translate3d(0px, 400px, 0px) rotate(-128.66deg)'},
5151
{at: 1, is: 'translate3d(0px, 0px, 0px)'}
5252
]
5353
);

‎test/offsetPathDistanceTest.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* global suite test internalScope */
22

33
(function () {
4-
suite('transforms', function () {
4+
suite('offsetPath', function () {
55
test('offsetPathDistance', function () {
66
var assertTransformInterpolation = internalScope.assertTransformInterpolation;
77

@@ -170,10 +170,10 @@
170170
{'offsetPath': "path('M 0, 100 L 50, 150 L -50, 150 L 0, 100')", 'offsetDistance': '0%'},
171171
{'offsetPath': "path('M 0, 100 L 50, 150 L -50, 150 L 0, 100')", 'offsetDistance': '100%'}],
172172
[
173-
{at: 0, is: 'translate3d(0px, 100px, 0px) rotate(45.1deg)'},
173+
{at: 0, is: 'translate3d(0px, 100px, 0px) rotate(44.16deg)'},
174174
{at: 1 / 3, is: 'translate3d(40.24px, 150px, 0px) rotate(180deg)'},
175175
{at: 2 / 3, is: 'translate3d(-40.24px, 150px, 0px) rotate(180deg)'},
176-
{at: 1, is: 'translate3d(0px, 100px, 0px) rotate(314.85deg)'}
176+
{at: 1, is: 'translate3d(0px, 100px, 0px) rotate(315deg)'}
177177
]
178178
);
179179

@@ -182,9 +182,9 @@
182182
{'offsetPath': "path('M 0, 0 L -50, 86.6 150 L 50, 86.6 L 0, 0')", 'offsetDistance': '100%'}],
183183
[
184184
{at: 0, is: 'translate3d(0px, 0px, 0px) rotate(120deg)'},
185-
{at: 1 / 3, is: 'translate3d(-16.67px, 28.87px, 0px) rotate(119.99deg)'},
186-
{at: 2 / 3, is: 'translate3d(-33.33px, 57.73px, 0px) rotate(119.99deg)'},
187-
{at: 1, is: 'translate3d(-50px, 86.6px, 0px) rotate(119.88deg)'}
185+
{at: 1 / 3, is: 'translate3d(-16.67px, 28.87px, 0px) rotate(120.02deg)'},
186+
{at: 2 / 3, is: 'translate3d(-33.33px, 57.73px, 0px) rotate(119.48deg)'},
187+
{at: 1, is: 'translate3d(-50px, 86.6px, 0px) rotate(120.58deg)'}
188188
]
189189
);
190190

‎test/pathBasicShapeCircleTest.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/* global suite test internalScope */
2+
3+
(function () {
4+
suite('offsetPath', function () {
5+
test('basicShapeCircle', function () {
6+
var assertTransformInterpolation = internalScope.assertTransformInterpolation;
7+
8+
assertTransformInterpolation([
9+
{'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '0%'},
10+
{'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '100%'}],
11+
[
12+
{at: 0, is: 'translate3d(0px, -10px, 0px)'},
13+
{at: 0.25, is: 'translate3d(10px, 0px, 0px) rotate(90deg)'},
14+
{at: 0.5, is: 'translate3d(0px, 10px, 0px) rotate(180deg)'},
15+
{at: 0.75, is: 'translate3d(-10px, 0px, 0px) rotate(-90deg)'},
16+
{at: 1, is: 'translate3d(0px, -10px, 0px)'}
17+
]
18+
);
19+
20+
assertTransformInterpolation([
21+
{'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '0px'},
22+
{'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '62.83px'}],
23+
[
24+
{at: 0, is: 'translate3d(0px, -10px, 0px)'},
25+
{at: 0.25, is: 'translate3d(10px, 0px, 0px) rotate(89.45deg)'},
26+
{at: 0.5, is: 'translate3d(0.01px, 10px, 0px) rotate(180deg)'},
27+
{at: 0.75, is: 'translate3d(-10px, 0.01px, 0px) rotate(-90deg)'},
28+
{at: 1, is: 'translate3d(-0.01px, -10px, 0px) rotate(-0.55deg)'}
29+
]
30+
);
31+
32+
assertTransformInterpolation([
33+
{'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '0%'},
34+
{'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '50%'}],
35+
[
36+
{at: 0, is: 'translate3d(0px, -10px, 0px)'},
37+
{at: 0.5, is: 'translate3d(10px, 0px, 0px) rotate(90deg)'},
38+
{at: 1, is: 'translate3d(0px, 10px, 0px) rotate(180deg)'}
39+
]
40+
);
41+
42+
assertTransformInterpolation([
43+
{'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '0px'},
44+
{'offsetPath': 'circle(10px at 0px 0px)', 'offsetDistance': '31.42px'}],
45+
[
46+
{at: 0, is: 'translate3d(0px, -10px, 0px)'},
47+
{at: 0.5, is: 'translate3d(10px, 0px, 0px) rotate(90deg)'},
48+
{at: 1, is: 'translate3d(0px, 10px, 0px) rotate(179.45deg)'}
49+
]
50+
);
51+
52+
assertTransformInterpolation([
53+
{'offsetPath': 'circle(10px at 100px 100px)', 'offsetDistance': '0%'},
54+
{'offsetPath': 'circle(10px at 100px 100px)', 'offsetDistance': '100%'}],
55+
[
56+
{at: 0, is: 'translate3d(100px, 90px, 0px)'},
57+
{at: 0.25, is: 'translate3d(110px, 100px, 0px) rotate(90deg)'},
58+
{at: 0.5, is: 'translate3d(100px, 110px, 0px) rotate(180deg)'},
59+
{at: 0.75, is: 'translate3d(90px, 100px, 0px) rotate(-90deg)'},
60+
{at: 1, is: 'translate3d(100px, 90px, 0px)'}
61+
]
62+
);
63+
});
64+
});
65+
})();

0 commit comments

Comments
 (0)