vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
116 lines • 4.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CursorPath = void 0;
var isFiniteNumber_1 = require("../../../internal/isFiniteNumber");
var utils_1 = require("../../../utils");
var constants_1 = require("../constants");
var svgQuadraticCurvePath_1 = require("./svgQuadraticCurvePath");
var CursorPath = /** @class */ (function () {
function CursorPath(_isEnabled) {
this._isEnabled = _isEnabled;
/** Cursor SVG Path Points */
this._points = [];
/** Cursor SVG Path Line */
this._line = { current: 0, target: 0 };
this._path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
var path = this._path;
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'round');
path.setAttribute('fill', 'transparent');
path.setAttribute('stroke', '#f00');
}
Object.defineProperty(CursorPath.prototype, "path", {
/** Cursor SVG Path */
get: function () {
return this._path;
},
enumerable: false,
configurable: true
});
/** Update SVG Path */
CursorPath.prototype.addPoint = function (coords, isInstant) {
if (isInstant === void 0) { isInstant = false; }
if (!this._isEnabled) {
return;
}
var points = this._points;
var path = this._path;
var line = this._line;
// Add point
var newPoint = { x: coords.x, y: coords.y, length: 0 };
points.push(newPoint);
// Update path
path.setAttribute('d', (0, svgQuadraticCurvePath_1.svgQuadraticCurvePath)(points));
// Update total length
var totalLength = path.getTotalLength();
newPoint.length = totalLength;
line.target = totalLength;
// Instant update of line
if (isInstant) {
line.current = line.target;
}
};
/** Minimize SVG Path */
CursorPath.prototype.minimize = function () {
if (!this._isEnabled) {
return;
}
var points = this._points;
var line = this._line;
if (points.length < 3) {
return;
}
var accumulated = 0;
var removeCount = 0;
for (var i = 1; i < points.length; i += 1) {
var dx = points[i].x - points[i - 1].x;
var dy = points[i].y - points[i - 1].y;
var segLength = Math.hypot(dx, dy);
if (accumulated + segLength < line.current) {
accumulated += segLength;
removeCount += 1;
}
else {
break;
}
}
if ((0, isFiniteNumber_1.isFiniteNumber)(removeCount) && removeCount > 0) {
var removedLength = 0;
for (var i = 1; i <= removeCount; i += 1) {
var dx = points[i].x - points[i - 1].x;
var dy = points[i].y - points[i - 1].y;
removedLength += Math.hypot(dx, dy);
}
points.splice(0, removeCount);
// Fix line after points removed
line.current = Math.max(0, line.current - removedLength);
line.target = Math.max(0, line.target - removedLength);
// Update path
this._path.setAttribute('d', (0, svgQuadraticCurvePath_1.svgQuadraticCurvePath)(points));
}
};
Object.defineProperty(CursorPath.prototype, "isInterpolated", {
/** Check if the path is interpolated */
get: function () {
return this._line.current === this._line.target;
},
enumerable: false,
configurable: true
});
/** Interpolate line */
CursorPath.prototype.lerp = function (factor) {
var line = this._line;
line.current = (0, utils_1.lerp)(line.current, line.target, factor, constants_1.LERP_APPROXIMATION);
};
Object.defineProperty(CursorPath.prototype, "coord", {
/** Get current coordinate */
get: function () {
return this._path.getPointAtLength(this._line.current);
},
enumerable: false,
configurable: true
});
return CursorPath;
}());
exports.CursorPath = CursorPath;
//# sourceMappingURL=index.js.map