ng-cw-v12
Version:
Angular UI Component Library
376 lines (367 loc) • 20 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/letter-glitch-background', ['exports', '@angular/core', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["letter-glitch-background"] = {}), global.ng.core, global.ng.common));
})(this, (function (exports, i0, i1) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var LetterGlitchBackgroundComponent = /** @class */ (function () {
function LetterGlitchBackgroundComponent(ngZone) {
var _this = this;
this.ngZone = ngZone;
/** 闪烁颜色数组 */
this.ncGlitchColors = ['#2b4539', '#61dca3', '#61b3dc'];
/** 闪烁频率（毫秒）（1-100） */
this.ncGlitchSpeed = 50;
/** 是否显示中心暗角 */
this._centerVignette = false;
/** 是否显示边缘暗角 */
this._outerVignette = true;
/** 是否开启平滑过渡 */
this._smooth = true;
/** 字符集 */
this.ncCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$&*()-_+=/[]{};:<>.,0123456789';
this.animationRef = null;
this.letters = [];
this.grid = { columns: 0, rows: 0 };
this.context = null;
this.lastGlitchTime = Date.now();
this.activeLetterIndices = new Set();
this.fontSize = 16;
this.charWidth = 10;
this.charHeight = 20;
this.animate = function () {
var now = Date.now();
if (now - _this.lastGlitchTime >= _this.ncGlitchSpeed) {
_this.updateLetters();
if (!_this.ncSmooth) {
_this.drawLetters(_this.activeLetterIndices);
_this.activeLetterIndices.clear();
}
_this.lastGlitchTime = now;
}
if (_this.ncSmooth) {
_this.handleSmoothTransitions();
}
_this.animationRef = requestAnimationFrame(_this.animate);
};
}
Object.defineProperty(LetterGlitchBackgroundComponent.prototype, "ncCenterVignette", {
get: function () {
return this._centerVignette;
},
set: function (val) {
this._centerVignette = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(LetterGlitchBackgroundComponent.prototype, "ncOuterVignette", {
get: function () {
return this._outerVignette;
},
set: function (val) {
this._outerVignette = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(LetterGlitchBackgroundComponent.prototype, "ncSmooth", {
get: function () {
return this._smooth;
},
set: function (val) {
this._smooth = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
LetterGlitchBackgroundComponent.prototype.ngOnInit = function () { };
LetterGlitchBackgroundComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
_this.initCanvas();
});
};
LetterGlitchBackgroundComponent.prototype.ngOnDestroy = function () {
if (this.animationRef !== null) {
cancelAnimationFrame(this.animationRef);
}
if (this.resizeTimeout) {
clearTimeout(this.resizeTimeout);
}
};
LetterGlitchBackgroundComponent.prototype.ngOnChanges = function (changes) {
// 处理参数变更，如果有需要可以通过此方法重建或直接影响下一帧渲染
if (changes['ncGlitchColors'] || changes['ncCharacters']) {
// 在下一次闪烁时自然会应用新参数
}
};
LetterGlitchBackgroundComponent.prototype.onResize = function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
clearTimeout(_this.resizeTimeout);
_this.resizeTimeout = setTimeout(function () {
if (_this.animationRef !== null) {
cancelAnimationFrame(_this.animationRef);
}
_this.resizeCanvas();
_this.animate();
}, 100);
});
};
LetterGlitchBackgroundComponent.prototype.initCanvas = function () {
var canvas = this.canvasRef.nativeElement;
if (!canvas)
return;
this.context = canvas.getContext('2d');
this.resizeCanvas();
this.animate();
};
LetterGlitchBackgroundComponent.prototype.getRandomChar = function () {
var lettersAndSymbols = Array.from(this.ncCharacters);
return lettersAndSymbols[Math.floor(Math.random() * lettersAndSymbols.length)];
};
LetterGlitchBackgroundComponent.prototype.getRandomColor = function () {
return this.ncGlitchColors[Math.floor(Math.random() * this.ncGlitchColors.length)];
};
LetterGlitchBackgroundComponent.prototype.parseColor = function (color) {
if (color.startsWith('rgb')) {
var match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
if (match) {
return {
r: parseInt(match[1], 10),
g: parseInt(match[2], 10),
b: parseInt(match[3], 10)
};
}
}
var hex = color;
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
}
: null;
};
LetterGlitchBackgroundComponent.prototype.interpolateColor = function (start, end, factor) {
var result = {
r: Math.round(start.r + (end.r - start.r) * factor),
g: Math.round(start.g + (end.g - start.g) * factor),
b: Math.round(start.b + (end.b - start.b) * factor)
};
return "rgb(" + result.r + ", " + result.g + ", " + result.b + ")";
};
LetterGlitchBackgroundComponent.prototype.calculateGrid = function (width, height) {
var columns = Math.ceil(width / this.charWidth);
var rows = Math.ceil(height / this.charHeight);
return { columns: columns, rows: rows };
};
LetterGlitchBackgroundComponent.prototype.initializeLetters = function (columns, rows) {
var _this = this;
this.grid = { columns: columns, rows: rows };
var totalLetters = columns * rows;
this.letters = Array.from({ length: totalLetters }, function () {
var color = _this.getRandomColor();
return {
char: _this.getRandomChar(),
color: color,
originalColor: color,
targetColor: color,
colorProgress: 1
};
});
};
LetterGlitchBackgroundComponent.prototype.resizeCanvas = function () {
var canvas = this.canvasRef.nativeElement;
if (!canvas)
return;
var parent = canvas.parentElement;
if (!parent)
return;
var dpr = window.devicePixelRatio || 1;
var rect = parent.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
canvas.style.width = rect.width + "px";
canvas.style.height = rect.height + "px";
if (this.context) {
this.context.setTransform(dpr, 0, 0, dpr, 0, 0);
}
var _a = this.calculateGrid(rect.width, rect.height), columns = _a.columns, rows = _a.rows;
this.initializeLetters(columns, rows);
this.drawLetters();
};
LetterGlitchBackgroundComponent.prototype.drawLetters = function (indicesToDraw) {
var _this = this;
if (!this.context || this.letters.length === 0)
return;
var ctx = this.context;
ctx.font = this.fontSize + "px monospace";
ctx.textBaseline = 'top';
if (!indicesToDraw) {
var _a = this.canvasRef.nativeElement.getBoundingClientRect(), width = _a.width, height = _a.height;
ctx.clearRect(0, 0, width, height);
this.letters.forEach(function (letter, index) {
var x = (index % _this.grid.columns) * _this.charWidth;
var y = Math.floor(index / _this.grid.columns) * _this.charHeight;
ctx.fillStyle = letter.color;
ctx.fillText(letter.char, x, y);
});
return;
}
indicesToDraw.forEach(function (index) {
var letter = _this.letters[index];
var x = (index % _this.grid.columns) * _this.charWidth;
var y = Math.floor(index / _this.grid.columns) * _this.charHeight;
ctx.clearRect(x, y, _this.charWidth, _this.charHeight);
ctx.fillStyle = letter.color;
ctx.fillText(letter.char, x, y);
});
};
LetterGlitchBackgroundComponent.prototype.updateLetters = function () {
if (!this.letters || this.letters.length === 0)
return;
var updateCount = Math.max(1, Math.floor(this.letters.length * 0.05));
for (var i = 0; i < updateCount; i++) {
var index = Math.floor(Math.random() * this.letters.length);
if (!this.letters[index])
continue;
this.letters[index].char = this.getRandomChar();
this.letters[index].targetColor = this.getRandomColor();
if (!this.ncSmooth) {
this.letters[index].color = this.letters[index].targetColor;
this.letters[index].originalColor = this.letters[index].targetColor;
this.letters[index].colorProgress = 1;
this.activeLetterIndices.add(index);
}
else {
this.letters[index].originalColor = this.letters[index].color;
this.letters[index].colorProgress = 0;
this.activeLetterIndices.add(index);
}
}
};
LetterGlitchBackgroundComponent.prototype.handleSmoothTransitions = function () {
var _this = this;
var needsRedraw = false;
var itemsToDraw = new Set();
this.activeLetterIndices.forEach(function (index) {
var letter = _this.letters[index];
if (letter.colorProgress < 1) {
letter.colorProgress += 0.015;
if (letter.colorProgress >= 1) {
letter.colorProgress = 1;
_this.activeLetterIndices.delete(index);
}
var startRgb = _this.parseColor(letter.originalColor);
var endRgb = _this.parseColor(letter.targetColor);
if (startRgb && endRgb) {
letter.color = _this.interpolateColor(startRgb, endRgb, letter.colorProgress);
needsRedraw = true;
itemsToDraw.add(index);
}
else {
letter.color = letter.targetColor;
letter.colorProgress = 1;
_this.activeLetterIndices.delete(index);
needsRedraw = true;
itemsToDraw.add(index);
}
}
else {
_this.activeLetterIndices.delete(index);
}
});
if (needsRedraw && itemsToDraw.size > 0) {
this.drawLetters(itemsToDraw);
}
};
return LetterGlitchBackgroundComponent;
}());
LetterGlitchBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LetterGlitchBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
LetterGlitchBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LetterGlitchBackgroundComponent, selector: "nc-letter-glitch-background", inputs: { ncGlitchColors: "ncGlitchColors", ncGlitchSpeed: "ncGlitchSpeed", ncCenterVignette: "ncCenterVignette", ncOuterVignette: "ncOuterVignette", ncSmooth: "ncSmooth", ncCharacters: "ncCharacters" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #container class=\"nc-letter-glitch-container\">\r\n <canvas #canvas class=\"nc-letter-glitch-canvas\"></canvas>\r\n <div *ngIf=\"ncOuterVignette\" class=\"nc-outer-vignette\"></div>\r\n <div *ngIf=\"ncCenterVignette\" class=\"nc-center-vignette\"></div>\r\n</div>\r\n<div class=\"nc-content-wrapper\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}.nc-letter-glitch-container{position:absolute;inset:0;z-index:0;width:100%;height:100%;background-color:#000;overflow:hidden}.nc-letter-glitch-canvas{display:block;width:100%;height:100%}.nc-outer-vignette{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(circle,rgba(0,0,0,0) 60%,#000000 100%)}.nc-center-vignette{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(circle,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 60%)}.nc-content-wrapper{position:relative;z-index:1;width:100%;height:100%}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LetterGlitchBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-letter-glitch-background',
templateUrl: './letter-glitch-background.component.html',
styleUrls: ['./letter-glitch-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], canvasRef: [{
type: i0.ViewChild,
args: ['canvas', { static: true }]
}], ncGlitchColors: [{
type: i0.Input
}], ncGlitchSpeed: [{
type: i0.Input
}], ncCenterVignette: [{
type: i0.Input
}], ncOuterVignette: [{
type: i0.Input
}], ncSmooth: [{
type: i0.Input
}], ncCharacters: [{
type: i0.Input
}], onResize: [{
type: i0.HostListener,
args: ['window:resize']
}] } });
var NcLetterGlitchBackgroundModule = /** @class */ (function () {
function NcLetterGlitchBackgroundModule() {
}
return NcLetterGlitchBackgroundModule;
}());
NcLetterGlitchBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLetterGlitchBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcLetterGlitchBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLetterGlitchBackgroundModule, declarations: [LetterGlitchBackgroundComponent], imports: [i1.CommonModule], exports: [LetterGlitchBackgroundComponent] });
NcLetterGlitchBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLetterGlitchBackgroundModule, imports: [[
i1.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLetterGlitchBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
LetterGlitchBackgroundComponent
],
imports: [
i1.CommonModule
],
exports: [
LetterGlitchBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.LetterGlitchBackgroundComponent = LetterGlitchBackgroundComponent;
exports.NcLetterGlitchBackgroundModule = NcLetterGlitchBackgroundModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-letter-glitch-background.umd.js.map