ng-cw-v12
Version:
Angular UI Component Library
229 lines (220 loc) • 14.3 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/lightning-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"]["lightning-background"] = {}), global.ng.core, global.ng.common));
})(this, (function (exports, i0, common) { '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 LightningBackgroundComponent = /** @class */ (function () {
function LightningBackgroundComponent(ngZone) {
var _this = this;
this.ngZone = ngZone;
/** 闪电的色调（度数，0到360） */
this.ncHue = 230;
/** 闪电水平偏移量（-2~2） */
this.ncXOffset = 0;
/** 闪电动画速度倍率（0.5-2） */
this.ncSpeed = 1;
/** 闪电强度（0.1-2） */
this.ncIntensity = 1;
/** 闪电密集程度（0.1-3） */
this.ncSize = 1;
this.gl = null;
this.program = null;
this.rafId = null;
this.startTime = 0;
// WebGL Uniform locations
this.locResolution = null;
this.locTime = null;
this.locHue = null;
this.locXOffset = null;
this.locSpeed = null;
this.locIntensity = null;
this.locSize = null;
this.vertexShaderSource = "\n attribute vec2 aPosition;\n void main() {\n gl_Position = vec4(aPosition, 0.0, 1.0);\n }\n ";
this.fragmentShaderSource = "\n precision mediump float;\n uniform vec2 iResolution;\n uniform float iTime;\n uniform float uHue;\n uniform float uXOffset;\n uniform float uSpeed;\n uniform float uIntensity;\n uniform float uSize;\n \n #define OCTAVE_COUNT 10\n\n vec3 hsv2rgb(vec3 c) {\n vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0,4.0,2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);\n return c.z * mix(vec3(1.0), rgb, c.y);\n }\n\n float hash11(float p) {\n p = fract(p * .1031);\n p *= p + 33.33;\n p *= p + p;\n return fract(p);\n }\n\n float hash12(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n }\n\n mat2 rotate2d(float theta) {\n float c = cos(theta);\n float s = sin(theta);\n return mat2(c, -s, s, c);\n }\n\n float noise(vec2 p) {\n vec2 ip = floor(p);\n vec2 fp = fract(p);\n float a = hash12(ip);\n float b = hash12(ip + vec2(1.0, 0.0));\n float c = hash12(ip + vec2(0.0, 1.0));\n float d = hash12(ip + vec2(1.0, 1.0));\n \n vec2 t = smoothstep(0.0, 1.0, fp);\n return mix(mix(a, b, t.x), mix(c, d, t.x), t.y);\n }\n\n float fbm(vec2 p) {\n float value = 0.0;\n float amplitude = 0.5;\n for (int i = 0; i < OCTAVE_COUNT; ++i) {\n value += amplitude * noise(p);\n p *= rotate2d(0.45);\n p *= 2.0;\n amplitude *= 0.5;\n }\n return value;\n }\n\n void mainImage( out vec4 fragColor, in vec2 fragCoord ) {\n vec2 uv = fragCoord / iResolution.xy;\n uv = 2.0 * uv - 1.0;\n uv.x *= iResolution.x / iResolution.y;\n uv.x += uXOffset;\n \n uv += 2.0 * fbm(uv * uSize + 0.8 * iTime * uSpeed) - 1.0;\n \n float dist = abs(uv.x);\n vec3 baseColor = hsv2rgb(vec3(uHue / 360.0, 0.7, 0.8));\n vec3 col = baseColor * pow(mix(0.0, 0.07, hash11(iTime * uSpeed)) / dist, 1.0) * uIntensity;\n col = pow(col, vec3(1.0));\n fragColor = vec4(col, 1.0);\n }\n\n void main() {\n mainImage(gl_FragColor, gl_FragCoord.xy);\n }\n ";
this.render = function () {
if (!_this.gl || !_this.program)
return;
_this.gl.viewport(0, 0, _this.canvas.width, _this.canvas.height);
_this.gl.uniform2f(_this.locResolution, _this.canvas.width, _this.canvas.height);
var currentTime = performance.now();
_this.gl.uniform1f(_this.locTime, (currentTime - _this.startTime) / 1000.0);
_this.gl.uniform1f(_this.locHue, _this.ncHue);
_this.gl.uniform1f(_this.locXOffset, _this.ncXOffset);
_this.gl.uniform1f(_this.locSpeed, _this.ncSpeed);
_this.gl.uniform1f(_this.locIntensity, _this.ncIntensity);
_this.gl.uniform1f(_this.locSize, _this.ncSize);
_this.gl.drawArrays(_this.gl.TRIANGLES, 0, 6);
_this.rafId = requestAnimationFrame(_this.render);
};
}
LightningBackgroundComponent.prototype.ngOnInit = function () {
};
LightningBackgroundComponent.prototype.ngAfterViewInit = function () {
this.initWebGL();
};
LightningBackgroundComponent.prototype.ngOnChanges = function (changes) {
// WebGL loops read parameters dynamically, no need for extra updates unless structural or texture-based changing.
};
LightningBackgroundComponent.prototype.ngOnDestroy = function () {
if (this.rafId !== null) {
cancelAnimationFrame(this.rafId);
}
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
if (this.gl && this.program) {
this.gl.deleteProgram(this.program);
}
};
LightningBackgroundComponent.prototype.initWebGL = function () {
var _this = this;
var container = this.containerRef.nativeElement;
this.canvas = document.createElement('canvas');
this.canvas.style.width = '100%';
this.canvas.style.height = '100%';
this.canvas.style.display = 'block';
container.appendChild(this.canvas);
this.gl = this.canvas.getContext('webgl');
if (!this.gl) {
console.error('WebGL not supported');
return;
}
var vertexShader = this.compileShader(this.vertexShaderSource, this.gl.VERTEX_SHADER);
var fragmentShader = this.compileShader(this.fragmentShaderSource, this.gl.FRAGMENT_SHADER);
if (!vertexShader || !fragmentShader)
return;
this.program = this.gl.createProgram();
if (!this.program)
return;
this.gl.attachShader(this.program, vertexShader);
this.gl.attachShader(this.program, fragmentShader);
this.gl.linkProgram(this.program);
if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
console.error('Program linking error:', this.gl.getProgramInfoLog(this.program));
return;
}
this.gl.useProgram(this.program);
var vertices = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
var vertexBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);
this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
var aPosition = this.gl.getAttribLocation(this.program, 'aPosition');
this.gl.enableVertexAttribArray(aPosition);
this.gl.vertexAttribPointer(aPosition, 2, this.gl.FLOAT, false, 0, 0);
this.locResolution = this.gl.getUniformLocation(this.program, 'iResolution');
this.locTime = this.gl.getUniformLocation(this.program, 'iTime');
this.locHue = this.gl.getUniformLocation(this.program, 'uHue');
this.locXOffset = this.gl.getUniformLocation(this.program, 'uXOffset');
this.locSpeed = this.gl.getUniformLocation(this.program, 'uSpeed');
this.locIntensity = this.gl.getUniformLocation(this.program, 'uIntensity');
this.locSize = this.gl.getUniformLocation(this.program, 'uSize');
this.startTime = performance.now();
this.resizeObserver = new ResizeObserver(function () {
_this.resizeCanvas();
});
this.resizeObserver.observe(container);
this.resizeCanvas();
this.ngZone.runOutsideAngular(function () {
_this.render();
});
};
LightningBackgroundComponent.prototype.compileShader = function (source, type) {
if (!this.gl)
return null;
var shader = this.gl.createShader(type);
if (!shader)
return null;
this.gl.shaderSource(shader, source);
this.gl.compileShader(shader);
if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
console.error('Shader compile error:', this.gl.getShaderInfoLog(shader));
this.gl.deleteShader(shader);
return null;
}
return shader;
};
LightningBackgroundComponent.prototype.resizeCanvas = function () {
if (!this.canvas)
return;
var width = this.canvas.clientWidth;
var height = this.canvas.clientHeight;
if (this.canvas.width !== width || this.canvas.height !== height) {
this.canvas.width = width;
this.canvas.height = height;
}
};
return LightningBackgroundComponent;
}());
LightningBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LightningBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
LightningBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LightningBackgroundComponent, selector: "nc-lightning-background", inputs: { ncHue: "ncHue", ncXOffset: "ncXOffset", ncSpeed: "ncSpeed", ncIntensity: "ncIntensity", ncSize: "ncSize" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #container class=\"nc-lightning-canvas-container\"></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-lightning-canvas-container{position:absolute;inset:0;z-index:0}.nc-content-wrapper{position:relative;z-index:1;width:100%;height:100%}\n"] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LightningBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-lightning-background',
templateUrl: './lightning-background.component.html',
styleUrls: ['./lightning-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], ncHue: [{
type: i0.Input
}], ncXOffset: [{
type: i0.Input
}], ncSpeed: [{
type: i0.Input
}], ncIntensity: [{
type: i0.Input
}], ncSize: [{
type: i0.Input
}] } });
var NcLightningBackgroundModule = /** @class */ (function () {
function NcLightningBackgroundModule() {
}
return NcLightningBackgroundModule;
}());
NcLightningBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLightningBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcLightningBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLightningBackgroundModule, declarations: [LightningBackgroundComponent], imports: [common.CommonModule], exports: [LightningBackgroundComponent] });
NcLightningBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLightningBackgroundModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLightningBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
LightningBackgroundComponent
],
imports: [
common.CommonModule
],
exports: [
LightningBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.LightningBackgroundComponent = LightningBackgroundComponent;
exports.NcLightningBackgroundModule = NcLightningBackgroundModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-lightning-background.umd.js.map