Skip to content

Commit

Permalink
move renderers to separate file and do some refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@stellarator
stellarator committed Mar 7, 2016
1 parent 965abfe commit 00d4280
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 134 deletions.
4 changes: 3 additions & 1 deletion gulp/deps/deps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,9 @@ var deps = {
'DGEntrance/src/ArrowSvgAnimationOptions.js',
'DGEntrance/src/EventHandler.js',
'DGEntrance/src/DGVertexTransform.js',
'DGEntrance/src/DGEntrance2.js'
'DGEntrance/src/DGAnimation.js',
'DGEntrance/src/DGEntrance2.js',
'DGEntrance/src/DGRenderer.js'
],
deps: ['DGCore', 'DGWkt', 'DGProjectDetector']
},
Expand Down
1 change: 1 addition & 0 deletions src/DGEntrance/src/DGAnimation.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

144 changes: 21 additions & 123 deletions src/DGEntrance/src/DGEntrance2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,9 +257,9 @@ DG.Entrance.Arrow2 = DG.Polyline.extend({
_endings = this.options.shape.endings[zoom],
_drawings = this.options.shape.drawings[zoom],
_transform = this._transform,
path, points, angles, width,
drawings = [],
i, ls, lp;
transform = DG.ShapeTransform.transform,
path, points, angles, width, drawings = [],
i, len, x, dx, ls, lp;

path = _transform.getTranslatedPath(zoom);

Expand All @@ -268,50 +268,33 @@ DG.Entrance.Arrow2 = DG.Polyline.extend({
lp = _points[_points.length - 1];
width = Math.abs(lp[1]);

points = _transform.getEmptyPoints();
points = this._getStrokePoints(path, angles, width, points, _endings);

i = points.length / 2 - 1;
while (i--) {
drawings.push('L');
}
this._shape.drawings[zoom] = [_drawings.concat(drawings).concat('C').concat(drawings)];

ls = Math.abs(lp[0]) + width + 5 - Math.abs(path[1][0]);
ls = ls > 0 ? ls : 0;
points = _transform.translate(_points, [ls, 0]).concat(points);
this._shape.points[zoom] = _transform.rotate(points);
},

_getStrokePoints: function (path, angles, width, points, endings) {
var i, len, x, dx, end = points.length - 1,
transform = DG.ShapeTransform.transform;

points = [path, [], []];
for (i = 0, len = angles.length; i < len; i++) {
x = path[i + 1][0];
dx = width * angles[i].cot;
points[i][0] = x - dx;
points[i][1] = -width;
points[end - i][0] = x + dx;
points[end - i][1] = width;

path = transform(path, angles[i], [x, 0]);
points = transform(points, angles[i], [x, 0]);
points[1].push([x - dx, -width]);
points[2].push([x + dx, +width]);
transform(points, angles[i], [x, 0]);
drawings.push('L');
}

dx = path[i + 1][0];
points[i][0] = dx;
points[i][1] = -width;
points[end - i][0] = dx;
points[end - i][1] = width;

i++;
points[i][0] = endings[0][0] + dx;
points[i][1] = endings[0][1];
points[end - i][0] = endings[1][0] + dx;
points[end - i][1] = endings[1][1];

return transform(points, angles.fullAngle, path[0]);
points[1].push([dx, -width]);
points[2].push([dx, +width]);
points[1].push([_endings[0][0] + dx, _endings[0][1]]);
points[2].push([_endings[1][0] + dx, _endings[1][1]]);
drawings.push('L'); // Middle 'C' will be added at final array construction time

points = points[1].concat(points[2].reverse());
transform([points], angles.fullAngle, path[0]);

points = _transform.translate(_points, [ls, 0]).concat(points);
this._shape.points[zoom] = _transform.rotate(points);

this._shape.drawings[zoom] = [_drawings.concat(drawings).concat('C').concat(drawings)];
}
});

Expand All @@ -326,91 +309,6 @@ DG.Entrance.arrow2 = function (latlngs, options) {


// --------------------------------------------------------------------------------------------------------------------
DG.extend(L.SVG.prototype, {
_updateComplexShape: function (layer, closed) {
this._setPath(layer, L.SVG.complexPointsToPath(layer._rings, layer._drawings, closed));
}
});

DG.extend(L.Canvas.prototype, {
_updateComplexShape: function (layer, closed) {
var i, j, k, len, len2, points, d, x, y, _x, _y,
drawings = layer._drawings,
rings = layer._rings,
ctx = this._ctx;

this._drawnLayers[layer._leaflet_id] = layer;

ctx.beginPath();

for (i = 0, len = rings.length; i < len; i++) {
points = rings[i];
x = y = 0;

for (j = 0, k = 0, len2 = points.length; j < len2; /* j++, k++ */) {
d = drawings[i][k++];
_x = points[j].x;
_y = points[j++].y;
switch (d) {
case 'M': ctx.moveTo(x = _x, y = _y); break;
case 'm': ctx.moveTo(x += _x, y += _y); break;
case 'L': ctx.lineTo(x = _x, y = _y); break;
case 'l': ctx.lineTo(x += _x, y += _y); break;
case 'C':
ctx.bezierCurveTo(_x, _y,
points[j].x, points[j++].y,
x = points[j].x, y = points[j++].y);
break;
case 'c':
ctx.bezierCurveTo(x + _x, y + _y,
x + points[j].x, y + points[j++].y,
x += points[j].x, y += points[j++].y);
break;
}
}
if (closed) {
ctx.closePath();
}
}

this._fillStroke(ctx, layer);
}
});

DG.extend(L.SVG, {
complexPointsToPath: function (rings, drawings, closed) {
var str = '',
svg = DG.Browser.svg,
i, j, k, l, n, len, len2, points, d;

for (i = 0, len = rings.length; i < len; i++) {
points = rings[i];

for (j = 0, k = 0, len2 = points.length; j < len2; /* j++, k++ */) {
d = drawings[i][k++];
switch (d) {
case 'M': l = svg ? d : 'm'; n = 1; break;
case 'm': l = svg ? d : 't'; n = 1; break;
case 'L': l = svg ? d : 'l'; n = 1; break;
case 'l': l = svg ? d : 'r'; n = 1; break;
case 'C': l = svg ? d : 'c'; n = 3; break;
case 'c': l = svg ? d : 'v'; n = 3; break;
default: l = d; n = 1;
}
str += l;
while (n-- > 0) {
str += ' ' + points[j].x + ',' + points[j++].y;
}
}

str += closed ? (svg ? 'z' : 'x') : '';
}

// SVG complains about empty path strings
return str || 'M0,0';
}
});

//DG.Entrance.Arrow.memory = {};
DG.Entrance.SHOW_FROM_ZOOM = 16;
DG.Entrance.Arrow.SHAPE_ZOOM = 19;
Expand Down
129 changes: 129 additions & 0 deletions src/DGEntrance/src/DGRenderer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
DG.extend(L.Canvas.prototype, {
_updateComplexShape: function (layer, closed) {
var i, j, k, len, len2, points, d, x, y, _x, _y,
drawings = layer._drawings,
rings = layer._rings,
ctx = this._ctx;

this._drawnLayers[layer._leaflet_id] = layer;

// TODO: Do we need to do a 'beginPath()' and possible 'closePath()' per ring?!
ctx.beginPath();

for (i = 0, len = rings.length; i < len; i++) {
points = rings[i];
x = y = 0;

for (j = 0, k = 0, len2 = points.length; j < len2; /* j++, k++ */) {
d = drawings[i][k++];
_x = points[j].x; _y = points[j++].y;
switch (d) {
case 'M': ctx.moveTo(x = _x, y = _y); break;
case 'm': ctx.moveTo(x += _x, y += _y); break;
case 'L': ctx.lineTo(x = _x, y = _y); break;
case 'l': ctx.lineTo(x += _x, y += _y); break;
case 'C':
ctx.bezierCurveTo(_x, _y,
points[j].x, points[j++].y,
x = points[j].x, y = points[j++].y);
break;
case 'c':
ctx.bezierCurveTo(x + _x, y + _y,
x + points[j].x, y + points[j++].y,
x += points[j].x, y += points[j++].y);
break;
case 'Q':
ctx.quadraticCurveTo(_x, _y,
x = points[j].x, y = points[j++].y);
break;
case 'q':
ctx.quadraticCurveTo(x + _x, y + _y,
x += points[j].x, y += points[j++].y);
break;
}
}
if (closed) {
ctx.closePath();
}
}

this._fillStroke(ctx, layer);
}
});


DG.extend(L.SVG.prototype, {
_updateComplexShape: function (layer, closed) {
this._setPath(layer, L.SVG.complexPointsToPath(layer._rings, layer._drawings, closed));
}
});


DG.extend(L.SVG, {
complexPointsToPath: function (rings, drawings, closed) {
var str = '',
svg = DG.Browser.svg,
i, j, k, n, len, len2, points, d;

for (i = 0, len = rings.length; i < len; i++) {
points = rings[i];

// Speedup hot path by removing if/ternary condition checks but duplicating loops
if (svg) {
for (j = 0, k = 0, len2 = points.length; j < len2; /* j++, k++ */) {
d = drawings[i][k++];
switch (d) {
case 'C':
case 'c': n = 3; break;
case 'Q':
case 'q': n = 2; break;

default: n = 1; // 'M', 'm', 'L', 'l', ...
}
str += d;
while (n--) {
str += points[j].x + ',' + points[j++].y + ' ';
}
}
} else {
for (j = 0, k = 0, len2 = points.length; j < len2; /* j++, k++ */) {
d = drawings[i][k++];
switch (d) {
case 'M': d = 'm'; n = 1; break;
case 'm': d = 't'; n = 1; break;
case 'L': d = 'l'; n = 1; break;
case 'l': d = 'r'; n = 1; break;
case 'C': d = 'c'; n = 3; break;
case 'c': d = 'v'; n = 3; break;
case 'Q':
// VML spec has 'qb' command in 'v' attribute string but no 'relativeTo' compliment
// So we'll emulate Cubic Bézier curve by applying Quadratic variant in both cases
// Both control points will use the same value
str += 'C' +
points[j].x + ',' + points[ j ].y + ' ' +
points[j].x + ',' + points[j++].y + ' ' +
points[j].x + ',' + points[j++].y + ' ';
d = ''; n = 0; break;
case 'q':
str += 'c' +
points[j].x + ',' + points[ j ].y + ' ' +
points[j].x + ',' + points[j++].y + ' ' +
points[j].x + ',' + points[j++].y + ' ';
d = ''; n = 0; break;

default: n = 1;
}
str += d;
while (n--) {
str += points[j].x + ',' + points[j++].y + ' ';
}
}
}

str += closed ? (svg ? 'z' : 'x') : '';
}

// SVG complains about empty path strings
return str || 'm0,0';
}
});
22 changes: 12 additions & 10 deletions src/DGEntrance/src/DGVertexTransform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,17 +254,19 @@ DG.extend(DG.ShapeTransform.prototype, {
}
});

DG.ShapeTransform.transform = function (ring, angle, vector) {
DG.ShapeTransform.transform = function (rings, angle, vector) {
var cos = angle.cos, sin = angle.sin,
dx = vector[0], dy = vector[1],
x, y, rx, ry, _ring = [];

for (var j = 0, len = ring.length; j < len; j++) {
rx = ring[j][0] - dx;
ry = ring[j][1] - dy;
x = rx * cos - ry * sin;
y = rx * sin + ry * cos;
_ring.push([x, y]);
ring, x, y, j, i = rings.length;

while (i--) {
ring = rings[i];
j = ring.length;
while (j--) {
x = ring[j][0] - dx;
y = ring[j][1] - dy;
ring[j][0] = x * cos - y * sin;
ring[j][1] = x * sin + y * cos;
}
}
return _ring;
};

0 comments on commit 00d4280

Please sign in to comment.