ng-cw-v12
Version:
Angular UI Component Library
351 lines (342 loc) • 20.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('three'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/color-bends-background', ['exports', '@angular/core', 'three', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["color-bends-background"] = {}), global.ng.core, global.THREE, global.ng.common));
})(this, (function (exports, i0, THREE, 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 THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
var MAX_COLORS = 8;
var frag = "\n#define MAX_COLORS " + MAX_COLORS + "\nuniform vec2 uCanvas;\nuniform float uTime;\nuniform float uSpeed;\nuniform vec2 uRot;\nuniform int uColorCount;\nuniform vec3 uColors[MAX_COLORS];\nuniform int uTransparent;\nuniform float uScale;\nuniform float uFrequency;\nuniform float uWarpStrength;\nuniform vec2 uPointer; // in NDC [-1,1]\nuniform float uMouseInfluence;\nuniform float uParallax;\nuniform float uNoise;\nvarying vec2 vUv;\n\nvoid main() {\n float t = uTime * uSpeed;\n vec2 p = vUv * 2.0 - 1.0;\n p += uPointer * uParallax * 0.1;\n vec2 rp = vec2(p.x * uRot.x - p.y * uRot.y, p.x * uRot.y + p.y * uRot.x);\n vec2 q = vec2(rp.x * (uCanvas.x / uCanvas.y), rp.y);\n q /= max(uScale, 0.0001);\n q /= 0.5 + 0.2 * dot(q, q);\n q += 0.2 * cos(t) - 7.56;\n vec2 toward = (uPointer - rp);\n q += toward * uMouseInfluence * 0.2;\n\n vec3 col = vec3(0.0);\n float a = 1.0;\n\n if (uColorCount > 0) {\n vec2 s = q;\n vec3 sumCol = vec3(0.0);\n float cover = 0.0;\n for (int i = 0; i < MAX_COLORS; ++i) {\n if (i >= uColorCount) break;\n s -= 0.01;\n // Use uWarpStrength to directly scale the inner phase distortion\n vec2 r = sin(1.5 * (s.yx * uFrequency) + (2.0 * uWarpStrength) * cos(s * uFrequency));\n float m = length(r + sin(5.0 * r.y * uFrequency - 3.0 * t + float(i)) / 4.0);\n float w = 1.0 - exp(-6.0 / exp(6.0 * m));\n sumCol += uColors[i] * w;\n cover = max(cover, w);\n }\n col = clamp(sumCol, 0.0, 1.0);\n a = uTransparent > 0 ? cover : 1.0;\n } else {\n vec2 s = q;\n for (int k = 0; k < 3; ++k) {\n s -= 0.01;\n vec2 r = sin(1.5 * (s.yx * uFrequency) + (2.0 * uWarpStrength) * cos(s * uFrequency));\n float m = length(r + sin(5.0 * r.y * uFrequency - 3.0 * t + float(k)) / 4.0);\n col[k] = 1.0 - exp(-6.0 / exp(6.0 * m));\n }\n a = uTransparent > 0 ? max(max(col.r, col.g), col.b) : 1.0;\n }\n\n if (uNoise > 0.0001) {\n float n = fract(sin(dot(gl_FragCoord.xy + vec2(uTime), vec2(12.9898, 78.233))) * 43758.5453123);\n col += (n - 0.5) * uNoise;\n col = clamp(col, 0.0, 1.0);\n }\n\n vec3 rgb = (uTransparent > 0) ? col * a : col;\n gl_FragColor = vec4(rgb, a);\n}\n";
var vert = "\nvarying vec2 vUv;\nvoid main() {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n}\n";
var ColorBendsBackgroundComponent = /** @class */ (function () {
function ColorBendsBackgroundComponent(ngZone) {
var _this = this;
this.ngZone = ngZone;
/** 容器背景颜色 */
this.ncBgColor = 'black';
/** 旋转角度（deg -180 - 180） */
this.ncRotation = 0;
/** 动画速度（0-1）*/
this.ncSpeed = 0.2;
/** 用于混合弯曲部分的颜色（十六进制字符串数组，最大支持8个颜色） */
this.ncColors = [];
/** 是否开启透明背景 */
this._transparent = true;
/** 自动旋转速度（deg/s -5-5） */
this.ncAutoRotate = 0;
/** 缩放比例（0.2-5） */
this.ncScale = 1;
/** 频率（0-5） */
this.ncFrequency = 1;
/** 扭曲强度（0-1） */
this.ncWarpStrength = 1;
/** 鼠标影响力的强度（0-2） */
this.ncMouseInfluence = 1;
/** 视差效果强度，视差效果是指指针移动内容时产生的效果（0-2） */
this.ncParallax = 0.5;
/** 噪点强度（0-1） */
this.ncNoise = 0.1;
this.pointerTarget = new THREE__namespace.Vector2(0, 0);
this.pointerCurrent = new THREE__namespace.Vector2(0, 0);
this.pointerSmooth = 8;
this.isVisible = true;
this.rafId = null;
this.resizeRafId = null;
this.loop = function () {
_this.rafId = requestAnimationFrame(_this.loop);
// 只在可见窗口时渲染
if (!_this.isVisible || document.hidden) {
if (_this.clock)
_this.clock.getDelta(); // 防止重新唤醒时时间突变
return;
}
if (!_this.renderer || !_this.scene || !_this.camera)
return;
var dt = _this.clock.getDelta();
var elapsed = _this.clock.elapsedTime;
_this.material.uniforms['uTime'].value = elapsed;
var deg = (Number(_this.ncRotation) % 360) + Number(_this.ncAutoRotate) * elapsed;
var rad = (deg * Math.PI) / 180;
var c = Math.cos(rad);
var s = Math.sin(rad);
_this.material.uniforms['uRot'].value.set(c, s);
var amt = Math.min(1, dt * _this.pointerSmooth);
_this.pointerCurrent.lerp(_this.pointerTarget, amt);
_this.material.uniforms['uPointer'].value.copy(_this.pointerCurrent);
_this.renderer.render(_this.scene, _this.camera);
};
}
Object.defineProperty(ColorBendsBackgroundComponent.prototype, "ncTransparent", {
get: function () {
return this._transparent;
},
set: function (val) {
this._transparent = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
ColorBendsBackgroundComponent.prototype.ngOnInit = function () { };
ColorBendsBackgroundComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
_this.initScene();
});
};
ColorBendsBackgroundComponent.prototype.ngOnDestroy = function () {
this.cleanup();
};
ColorBendsBackgroundComponent.prototype.ngOnChanges = function (changes) {
if (!this.material)
return;
this.updateUniforms();
};
ColorBendsBackgroundComponent.prototype.initScene = function () {
var container = this.containerRef.nativeElement;
this.scene = new THREE__namespace.Scene();
this.camera = new THREE__namespace.OrthographicCamera(-1, 1, 1, -1, 0, 1);
this.geometry = new THREE__namespace.PlaneGeometry(2, 2);
var uColorsArray = Array.from({ length: MAX_COLORS }, function () { return new THREE__namespace.Vector3(0, 0, 0); });
this.material = new THREE__namespace.ShaderMaterial({
vertexShader: vert,
fragmentShader: frag,
uniforms: {
uCanvas: { value: new THREE__namespace.Vector2(1, 1) },
uTime: { value: 0 },
uSpeed: { value: Number(this.ncSpeed) },
uRot: { value: new THREE__namespace.Vector2(1, 0) },
uColorCount: { value: 0 },
uColors: { value: uColorsArray },
uTransparent: { value: this.ncTransparent ? 1 : 0 },
uScale: { value: Number(this.ncScale) },
uFrequency: { value: Number(this.ncFrequency) },
uWarpStrength: { value: Number(this.ncWarpStrength) },
uPointer: { value: new THREE__namespace.Vector2(0, 0) },
uMouseInfluence: { value: Number(this.ncMouseInfluence) },
uParallax: { value: Number(this.ncParallax) },
uNoise: { value: Number(this.ncNoise) }
},
premultipliedAlpha: true,
transparent: true
});
var mesh = new THREE__namespace.Mesh(this.geometry, this.material);
this.scene.add(mesh);
this.renderer = new THREE__namespace.WebGLRenderer({
antialias: false,
powerPreference: 'high-performance',
alpha: true
});
this.renderer.outputColorSpace = THREE__namespace.SRGBColorSpace;
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
this.renderer.setClearColor(0x000000, this.ncTransparent ? 0 : 1);
this.renderer.domElement.style.width = '100%';
this.renderer.domElement.style.height = '100%';
this.renderer.domElement.style.display = 'block';
container.appendChild(this.renderer.domElement);
this.clock = new THREE__namespace.Clock();
this.updateUniforms();
this.setupResizeObserver(container);
this.setupIntersectionObserver(container);
this.loop();
};
ColorBendsBackgroundComponent.prototype.updateUniforms = function () {
if (!this.material)
return;
this.material.uniforms['uSpeed'].value = Number(this.ncSpeed);
this.material.uniforms['uScale'].value = Number(this.ncScale);
this.material.uniforms['uFrequency'].value = Number(this.ncFrequency);
this.material.uniforms['uWarpStrength'].value = Number(this.ncWarpStrength);
this.material.uniforms['uMouseInfluence'].value = Number(this.ncMouseInfluence);
this.material.uniforms['uParallax'].value = Number(this.ncParallax);
this.material.uniforms['uNoise'].value = Number(this.ncNoise);
this.material.uniforms['uTransparent'].value = this.ncTransparent ? 1 : 0;
if (this.renderer) {
this.renderer.setClearColor(0x000000, this.ncTransparent ? 0 : 1);
}
var toVec3 = function (hex) {
var h = hex.replace('#', '').trim();
var v = h.length === 3
? [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)]
: [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
return new THREE__namespace.Vector3(v[0] / 255, v[1] / 255, v[2] / 255);
};
var arr = (this.ncColors || []).filter(Boolean).slice(0, MAX_COLORS).map(toVec3);
for (var i = 0; i < MAX_COLORS; i++) {
var vec = this.material.uniforms['uColors'].value[i];
if (i < arr.length)
vec.copy(arr[i]);
else
vec.set(0, 0, 0);
}
this.material.uniforms['uColorCount'].value = arr.length;
};
ColorBendsBackgroundComponent.prototype.onPointerMove = function (e) {
var _a;
if (!((_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement))
return;
var container = this.containerRef.nativeElement;
var rect = container.getBoundingClientRect();
var x = ((e.clientX - rect.left) / (rect.width || 1)) * 2 - 1;
var y = -(((e.clientY - rect.top) / (rect.height || 1)) * 2 - 1);
this.pointerTarget.set(x, y);
};
ColorBendsBackgroundComponent.prototype.resize = function (container) {
if (!this.renderer || !this.material)
return;
var w = container.clientWidth || 1;
var h = container.clientHeight || 1;
this.renderer.setSize(w, h, false);
this.material.uniforms['uCanvas'].value.set(w, h);
};
ColorBendsBackgroundComponent.prototype.setupResizeObserver = function (container) {
var _this = this;
this.resize(container);
this.resizeObserver = new ResizeObserver(function () {
if (!_this.renderer)
return;
if (_this.resizeRafId !== null)
cancelAnimationFrame(_this.resizeRafId);
_this.ngZone.runOutsideAngular(function () {
_this.resizeRafId = requestAnimationFrame(function () {
if (!_this.renderer)
return;
_this.resize(container);
_this.resizeRafId = null;
});
});
});
this.resizeObserver.observe(container);
};
ColorBendsBackgroundComponent.prototype.setupIntersectionObserver = function (container) {
var _this = this;
this.intersectionObserver = new IntersectionObserver(function (entries) {
var entry = entries[0];
_this.isVisible = entry.isIntersecting && entry.intersectionRatio > 0;
}, { threshold: [0, 0.01, 0.1] });
this.intersectionObserver.observe(container);
};
ColorBendsBackgroundComponent.prototype.cleanup = function () {
var _a, _b;
if (this.rafId !== null) {
cancelAnimationFrame(this.rafId);
this.rafId = null;
}
if (this.resizeRafId !== null) {
cancelAnimationFrame(this.resizeRafId);
this.resizeRafId = null;
}
try {
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
}
catch (e) {
void 0;
}
try {
(_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
}
catch (e) {
void 0;
}
if (this.geometry)
this.geometry.dispose();
if (this.material)
this.material.dispose();
if (this.renderer) {
var dom = this.renderer.domElement;
if (dom && dom.parentNode) {
dom.parentNode.removeChild(dom);
}
this.renderer.dispose();
}
};
return ColorBendsBackgroundComponent;
}());
ColorBendsBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ColorBendsBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
ColorBendsBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ColorBendsBackgroundComponent, selector: "nc-color-bends-background", inputs: { ncBgColor: "ncBgColor", ncRotation: "ncRotation", ncSpeed: "ncSpeed", ncColors: "ncColors", ncTransparent: "ncTransparent", ncAutoRotate: "ncAutoRotate", ncScale: "ncScale", ncFrequency: "ncFrequency", ncWarpStrength: "ncWarpStrength", ncMouseInfluence: "ncMouseInfluence", ncParallax: "ncParallax", ncNoise: "ncNoise" }, host: { listeners: { "pointermove": "onPointerMove($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #container class=\"nc-color-bends-canvas-container\" [style.background-color]=\"ncBgColor\"></div>\r\n<div class=\"nc-content-wrapper\">\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}.nc-color-bends-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: ColorBendsBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-color-bends-background',
templateUrl: './color-bends-background.component.html',
styleUrls: ['./color-bends-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], ncBgColor: [{
type: i0.Input
}], ncRotation: [{
type: i0.Input
}], ncSpeed: [{
type: i0.Input
}], ncColors: [{
type: i0.Input
}], ncTransparent: [{
type: i0.Input
}], ncAutoRotate: [{
type: i0.Input
}], ncScale: [{
type: i0.Input
}], ncFrequency: [{
type: i0.Input
}], ncWarpStrength: [{
type: i0.Input
}], ncMouseInfluence: [{
type: i0.Input
}], ncParallax: [{
type: i0.Input
}], ncNoise: [{
type: i0.Input
}], onPointerMove: [{
type: i0.HostListener,
args: ['pointermove', ['$event']]
}] } });
var NcColorBendsBackgroundModule = /** @class */ (function () {
function NcColorBendsBackgroundModule() {
}
return NcColorBendsBackgroundModule;
}());
NcColorBendsBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcColorBendsBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcColorBendsBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcColorBendsBackgroundModule, declarations: [ColorBendsBackgroundComponent], imports: [common.CommonModule], exports: [ColorBendsBackgroundComponent] });
NcColorBendsBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcColorBendsBackgroundModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcColorBendsBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
ColorBendsBackgroundComponent
],
imports: [
common.CommonModule
],
exports: [
ColorBendsBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.ColorBendsBackgroundComponent = ColorBendsBackgroundComponent;
exports.NcColorBendsBackgroundModule = NcColorBendsBackgroundModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-color-bends-background.umd.js.map