ngx-glassy-effect 1.0.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -24,7 +24,7 @@ export class App {
|
|
|
24
24
|
}
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
```
|
|
27
|
+
```html
|
|
28
28
|
<!-- Use in your html element as a directive, & configure it as your wish -->
|
|
29
29
|
<div class="content"
|
|
30
30
|
ngxGlassyEffect
|
|
@@ -32,12 +32,14 @@ export class App {
|
|
|
32
32
|
[scale]="50"
|
|
33
33
|
[bezel]="10"
|
|
34
34
|
[profile]="'squircle'"
|
|
35
|
-
[showBorder]="true"
|
|
35
|
+
[showBorder]="true"
|
|
36
|
+
[lensRange]="100"
|
|
37
|
+
[reflectionMidpoint]="0.2">
|
|
36
38
|
Hello - Bonjour - مرحبا
|
|
37
39
|
</div>
|
|
38
40
|
```
|
|
39
41
|
|
|
40
|
-
> Tip 1 **: If your div (.content for
|
|
42
|
+
> Tip 1 **: If your div (.content for example) text is white & the background behind the div is light, give your div a semi-transparent background, like rgba(0, 0, 0, 0.35), to keep your text visible & readable, all without losing the glassy effect.
|
|
41
43
|
|
|
42
44
|
```css
|
|
43
45
|
/* Tip 1 */
|
|
@@ -66,12 +68,12 @@ export class App {
|
|
|
66
68
|
|
|
67
69
|
- If you wish to customize the inputs values, here's a full description of all the variables :
|
|
68
70
|
|
|
69
|
-
| Input
|
|
70
|
-
|
|
71
|
-
| bezel
|
|
72
|
-
| scale
|
|
73
|
-
| blur
|
|
74
|
-
| profile
|
|
75
|
-
| showBorder
|
|
76
|
-
|
|
77
|
-
|
|
71
|
+
| Input | Type | Default | Description |
|
|
72
|
+
|--------------------|-----------------------|-----------|-----------------------------------------------------------------------------------------------------|
|
|
73
|
+
| bezel | number | 10 | The width of the refractive edge bevel in pixels. |
|
|
74
|
+
| scale | number | 50 | The intensity of the glass refraction distortion map. |
|
|
75
|
+
| blur | number | 1.5 | The backdrop blur intensity factor applied to the substrate. |
|
|
76
|
+
| profile | 'circle' / 'squircle' | 'squircle | The geometric falloff curve used to generate the edge normals. |
|
|
77
|
+
| showBorder | boolean | false | Dynamically injects an anti-aliased pseudo-border running a dynamic light-angle alignment gradient. |
|
|
78
|
+
| lensRange | number | 100 | The spatial scope/influence bounding box of the border lens effect. |
|
|
79
|
+
| reflectionMidpoint | number | 0.2 | The turning midpoint ratio where edge glare achieves peak reflection values. |
|
|
@@ -3,9 +3,6 @@ import { inject, ElementRef, DestroyRef, PLATFORM_ID, input, signal, effect, Dir
|
|
|
3
3
|
import { isPlatformBrowser } from '@angular/common';
|
|
4
4
|
|
|
5
5
|
class GlassyEffect {
|
|
6
|
-
/**
|
|
7
|
-
* This class has been generator with the help of AI.
|
|
8
|
-
**/
|
|
9
6
|
el = inject((ElementRef));
|
|
10
7
|
destroyRef = inject(DestroyRef);
|
|
11
8
|
platformId = inject(PLATFORM_ID);
|
|
@@ -20,6 +17,10 @@ class GlassyEffect {
|
|
|
20
17
|
...(ngDevMode ? [{ debugName: "profile" }] : /* istanbul ignore next */ []));
|
|
21
18
|
showBorder = input(false, /* @ts-ignore */
|
|
22
19
|
...(ngDevMode ? [{ debugName: "showBorder" }] : /* istanbul ignore next */ []));
|
|
20
|
+
lensRange = input(100, /* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [{ debugName: "lensRange" }] : /* istanbul ignore next */ []));
|
|
22
|
+
reflectionMidpoint = input(0.2, /* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [{ debugName: "reflectionMidpoint" }] : /* istanbul ignore next */ []));
|
|
23
24
|
width = signal(0, /* @ts-ignore */
|
|
24
25
|
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
25
26
|
height = signal(0, /* @ts-ignore */
|
|
@@ -36,10 +37,11 @@ class GlassyEffect {
|
|
|
36
37
|
effect(() => {
|
|
37
38
|
const w = Math.floor(this.width());
|
|
38
39
|
const h = Math.floor(this.height());
|
|
39
|
-
const bezel = this.bezel();
|
|
40
40
|
const scale = this.scale();
|
|
41
41
|
const blur = this.blur();
|
|
42
42
|
const profile = this.profile();
|
|
43
|
+
const lensRange = this.lensRange();
|
|
44
|
+
const reflectionMidpoint = this.reflectionMidpoint();
|
|
43
45
|
if (w === 0 || h === 0)
|
|
44
46
|
return;
|
|
45
47
|
const nativeEl = this.el.nativeElement;
|
|
@@ -47,11 +49,11 @@ class GlassyEffect {
|
|
|
47
49
|
const maxPossibleRadius = Math.min(w / 2, h / 2);
|
|
48
50
|
const rawRadius = parseFloat(computedStyle.borderRadius) || 0;
|
|
49
51
|
const borderRadius = Math.min(rawRadius, maxPossibleRadius);
|
|
50
|
-
const dataUrl = this.generateDisplacementMap(w, h,
|
|
52
|
+
const dataUrl = this.generateDisplacementMap(w, h, profile, borderRadius, lensRange, reflectionMidpoint);
|
|
51
53
|
this.syncSvgFilter(dataUrl, w, h, scale, blur);
|
|
52
54
|
nativeEl.style.backdropFilter = `url(#${this.filterId})`;
|
|
53
55
|
if (this.showBorder()) {
|
|
54
|
-
this.applyBorderLighting();
|
|
56
|
+
this.applyBorderLighting(w, h, borderRadius);
|
|
55
57
|
}
|
|
56
58
|
else if (this.borderLayer) {
|
|
57
59
|
this.borderLayer.remove();
|
|
@@ -68,40 +70,42 @@ class GlassyEffect {
|
|
|
68
70
|
svgEl.remove();
|
|
69
71
|
});
|
|
70
72
|
}
|
|
71
|
-
applyBorderLighting() {
|
|
73
|
+
applyBorderLighting(w, h, r) {
|
|
72
74
|
const nativeEl = this.el.nativeElement;
|
|
73
75
|
const computedStyle = window.getComputedStyle(nativeEl);
|
|
74
76
|
if (computedStyle.position === 'static') {
|
|
75
77
|
nativeEl.style.position = 'relative';
|
|
76
78
|
}
|
|
77
79
|
nativeEl.style.border = 'none';
|
|
78
|
-
nativeEl.style.boxShadow =
|
|
79
|
-
0 4px 20px -2px rgba(0, 0, 0, 0.4),
|
|
80
|
-
0 1px 3px 0 rgba(0, 0, 0, 0.2)
|
|
81
|
-
`;
|
|
80
|
+
nativeEl.style.boxShadow = 'none';
|
|
82
81
|
if (!this.borderLayer) {
|
|
83
82
|
this.borderLayer = document.createElement('div');
|
|
84
83
|
this.borderLayer.style.position = 'absolute';
|
|
85
84
|
this.borderLayer.style.inset = '0px';
|
|
86
85
|
this.borderLayer.style.pointerEvents = 'none';
|
|
87
86
|
this.borderLayer.style.zIndex = '1';
|
|
88
|
-
this.borderLayer.style.webkitMask =
|
|
87
|
+
this.borderLayer.style.webkitMask =
|
|
88
|
+
'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)';
|
|
89
89
|
this.borderLayer.style.webkitMaskComposite = 'xor';
|
|
90
90
|
this.borderLayer.style.maskComposite = 'exclude';
|
|
91
91
|
this.borderLayer.style.padding = '1px';
|
|
92
92
|
nativeEl.appendChild(this.borderLayer);
|
|
93
93
|
}
|
|
94
94
|
this.borderLayer.style.borderRadius = computedStyle.borderRadius || 'inherit';
|
|
95
|
-
this.borderLayer.style.opacity = '
|
|
95
|
+
this.borderLayer.style.opacity = '1';
|
|
96
|
+
const dx = w - 2 * r + r * Math.sqrt(2);
|
|
97
|
+
const dy = h - 2 * r + r * Math.sqrt(2);
|
|
98
|
+
const angle = 90 + (Math.atan2(dx, dy) * 180) / Math.PI;
|
|
96
99
|
this.borderLayer.style.background = `
|
|
97
|
-
linear-gradient(
|
|
98
|
-
rgba(255, 255, 255, 0.
|
|
99
|
-
rgba(255, 255, 255, 0.
|
|
100
|
-
rgba(
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
rgba(255, 255, 255, 0.
|
|
104
|
-
rgba(
|
|
100
|
+
linear-gradient(${angle}deg,
|
|
101
|
+
rgba(255, 255, 255, 0.22) 0%,
|
|
102
|
+
rgba(255, 255, 255, 0.18) 20%,
|
|
103
|
+
rgba(255, 255, 255, 0.12) 35%,
|
|
104
|
+
rgba(255, 255, 255, 0.07) 45%,
|
|
105
|
+
rgba(255, 255, 255, 0.07) 55%,
|
|
106
|
+
rgba(255, 255, 255, 0.12) 65%,
|
|
107
|
+
rgba(255, 255, 255, 0.18) 80%,
|
|
108
|
+
rgba(255, 255, 255, 0.22) 100%
|
|
105
109
|
)
|
|
106
110
|
`;
|
|
107
111
|
}
|
|
@@ -117,7 +121,7 @@ class GlassyEffect {
|
|
|
117
121
|
});
|
|
118
122
|
this.resizeObserver.observe(this.el.nativeElement);
|
|
119
123
|
}
|
|
120
|
-
generateDisplacementMap(w, h,
|
|
124
|
+
generateDisplacementMap(w, h, profile, borderRadius, lensRange, reflectionMidpoint) {
|
|
121
125
|
const canvas = this.sharedCanvas;
|
|
122
126
|
if (!canvas)
|
|
123
127
|
return '';
|
|
@@ -128,6 +132,7 @@ class GlassyEffect {
|
|
|
128
132
|
return '';
|
|
129
133
|
const imgData = ctx.createImageData(w, h);
|
|
130
134
|
const data = imgData.data;
|
|
135
|
+
const activeRange = lensRange * reflectionMidpoint;
|
|
131
136
|
for (let y = 0; y < h; y++) {
|
|
132
137
|
for (let x = 0; x < w; x++) {
|
|
133
138
|
const distL = x;
|
|
@@ -177,22 +182,25 @@ class GlassyEffect {
|
|
|
177
182
|
ny = -(y - (h - borderRadius)) / dist;
|
|
178
183
|
}
|
|
179
184
|
}
|
|
180
|
-
let
|
|
181
|
-
if (minDist
|
|
182
|
-
const
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
185
|
+
let magnitude = 0;
|
|
186
|
+
if (minDist >= 0 && minDist < activeRange) {
|
|
187
|
+
const tActive = minDist / activeRange;
|
|
188
|
+
magnitude = Math.pow(1 - tActive, 2);
|
|
189
|
+
}
|
|
190
|
+
else {
|
|
191
|
+
magnitude = 0;
|
|
192
|
+
}
|
|
193
|
+
let finalMagX = nx * magnitude;
|
|
194
|
+
let finalMagY = ny * magnitude;
|
|
195
|
+
if (profile === 'squircle') {
|
|
196
|
+
finalMagX *= 0.95;
|
|
197
|
+
finalMagY *= 0.95;
|
|
190
198
|
}
|
|
191
|
-
const rVal = Math.floor(128 +
|
|
192
|
-
const gVal = Math.floor(128 +
|
|
199
|
+
const rVal = Math.floor(128 + finalMagX * 127);
|
|
200
|
+
const gVal = Math.floor(128 + finalMagY * 127);
|
|
193
201
|
const idx = (y * w + x) * 4;
|
|
194
|
-
data[idx] = rVal;
|
|
195
|
-
data[idx + 1] = gVal;
|
|
202
|
+
data[idx] = Math.max(0, Math.min(255, rVal));
|
|
203
|
+
data[idx + 1] = Math.max(0, Math.min(255, gVal));
|
|
196
204
|
data[idx + 2] = 128;
|
|
197
205
|
data[idx + 3] = 255;
|
|
198
206
|
}
|
|
@@ -210,7 +218,7 @@ class GlassyEffect {
|
|
|
210
218
|
}
|
|
211
219
|
container.innerHTML = `
|
|
212
220
|
<filter id="${this.filterId}"
|
|
213
|
-
x="-
|
|
221
|
+
x="-30%" y="-30%" width="160%" height="160%"
|
|
214
222
|
primitiveUnits="userSpaceOnUse"
|
|
215
223
|
color-interpolation-filters="sRGB">
|
|
216
224
|
|
|
@@ -228,7 +236,7 @@ class GlassyEffect {
|
|
|
228
236
|
`;
|
|
229
237
|
}
|
|
230
238
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GlassyEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
231
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: GlassyEffect, isStandalone: true, selector: "[ngxGlassyEffect]", inputs: { bezel: { classPropertyName: "bezel", publicName: "bezel", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
239
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: GlassyEffect, isStandalone: true, selector: "[ngxGlassyEffect]", inputs: { bezel: { classPropertyName: "bezel", publicName: "bezel", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, lensRange: { classPropertyName: "lensRange", publicName: "lensRange", isSignal: true, isRequired: false, transformFunction: null }, reflectionMidpoint: { classPropertyName: "reflectionMidpoint", publicName: "reflectionMidpoint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
232
240
|
}
|
|
233
241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GlassyEffect, decorators: [{
|
|
234
242
|
type: Directive,
|
|
@@ -236,7 +244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
236
244
|
selector: '[ngxGlassyEffect]',
|
|
237
245
|
standalone: true
|
|
238
246
|
}]
|
|
239
|
-
}], ctorParameters: () => [], propDecorators: { bezel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bezel", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], blur: [{ type: i0.Input, args: [{ isSignal: true, alias: "blur", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }] } });
|
|
247
|
+
}], ctorParameters: () => [], propDecorators: { bezel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bezel", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], blur: [{ type: i0.Input, args: [{ isSignal: true, alias: "blur", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }], lensRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "lensRange", required: false }] }], reflectionMidpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "reflectionMidpoint", required: false }] }] } });
|
|
240
248
|
|
|
241
249
|
/*
|
|
242
250
|
* Public API Surface of ngx-glassy-effect
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngx-glassy-effect.mjs","sources":["../../../projects/ngx-glassy-effect/src/lib/glassy-effect.ts","../../../projects/ngx-glassy-effect/src/public-api.ts","../../../projects/ngx-glassy-effect/src/ngx-glassy-effect.ts"],"sourcesContent":["import { DestroyRef, Directive, ElementRef, inject, input, signal, effect, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\n@Directive({\n selector: '[ngxGlassyEffect]',\n standalone: true\n})\nexport class GlassyEffect {\n\n /**\n * This class has been generator with the help of AI.\n **/\n\n private el = inject(ElementRef<HTMLElement>);\n private destroyRef = inject(DestroyRef);\n private platformId = inject(PLATFORM_ID);\n private isBrowser = isPlatformBrowser(this.platformId);\n\n bezel = input<number>(10);\n scale = input<number>(50);\n blur = input<number>(1.5);\n profile = input<'circle' | 'squircle'>('squircle');\n showBorder = input<boolean>(false);\n\n private width = signal<number>(0);\n private height = signal<number>(0);\n\n private filterId = `glassy-effect-${Math.random().toString(36).substring(2, 9)}`;\n private resizeObserver!: ResizeObserver;\n\n private sharedCanvas = this.isBrowser ? document.createElement('canvas') : null;\n private borderLayer: HTMLDivElement | null = null;\n private animationFrameId: number | null = null;\n\n constructor() {\n if (!this.isBrowser) return;\n\n this.setupResizeObserver();\n\n effect(() => {\n const w = Math.floor(this.width());\n const h = Math.floor(this.height());\n const bezel = this.bezel();\n const scale = this.scale();\n const blur = this.blur();\n const profile = this.profile();\n\n if (w === 0 || h === 0) return;\n\n const nativeEl = this.el.nativeElement;\n const computedStyle = window.getComputedStyle(nativeEl);\n\n const maxPossibleRadius = Math.min(w / 2, h / 2);\n const rawRadius = parseFloat(computedStyle.borderRadius) || 0;\n const borderRadius = Math.min(rawRadius, maxPossibleRadius);\n\n const dataUrl = this.generateDisplacementMap(w, h, bezel, profile, borderRadius);\n this.syncSvgFilter(dataUrl, w, h, scale, blur);\n\n nativeEl.style.backdropFilter = `url(#${this.filterId})`;\n\n if (this.showBorder()) {\n this.applyBorderLighting();\n } else if (this.borderLayer) {\n this.borderLayer.remove();\n this.borderLayer = null;\n }\n });\n\n this.destroyRef.onDestroy(() => {\n if (this.resizeObserver) this.resizeObserver.disconnect();\n if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);\n\n const svgEl = document.getElementById(`svg-container-${this.filterId}`);\n if (svgEl) svgEl.remove();\n });\n }\n\n private applyBorderLighting(): void {\n const nativeEl = this.el.nativeElement;\n\n const computedStyle = window.getComputedStyle(nativeEl);\n if (computedStyle.position === 'static') {\n nativeEl.style.position = 'relative';\n }\n\n nativeEl.style.border = 'none';\n nativeEl.style.boxShadow = `\n 0 4px 20px -2px rgba(0, 0, 0, 0.4),\n 0 1px 3px 0 rgba(0, 0, 0, 0.2)\n `;\n\n if (!this.borderLayer) {\n this.borderLayer = document.createElement('div');\n this.borderLayer.style.position = 'absolute';\n this.borderLayer.style.inset = '0px';\n this.borderLayer.style.pointerEvents = 'none';\n this.borderLayer.style.zIndex = '1';\n this.borderLayer.style.webkitMask = 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)';\n this.borderLayer.style.webkitMaskComposite = 'xor';\n this.borderLayer.style.maskComposite = 'exclude';\n this.borderLayer.style.padding = '1px';\n nativeEl.appendChild(this.borderLayer);\n }\n\n this.borderLayer.style.borderRadius = computedStyle.borderRadius || 'inherit';\n this.borderLayer.style.opacity = '0.85';\n this.borderLayer.style.background = `\n linear-gradient(135deg,\n rgba(255, 255, 255, 0.45) 0%,\n rgba(255, 255, 255, 0.05) 45%,\n rgba(0, 0, 0, 0) 60%\n ),\n linear-gradient(to bottom,\n rgba(255, 255, 255, 0.1) 0%,\n rgba(0, 0, 0, 0.35) 100%\n )\n `;\n }\n\n private setupResizeObserver(): void {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);\n\n this.animationFrameId = requestAnimationFrame(() => {\n const rect = this.el.nativeElement.getBoundingClientRect();\n this.width.set(rect.width);\n this.height.set(rect.height);\n });\n });\n this.resizeObserver.observe(this.el.nativeElement);\n }\n\n private generateDisplacementMap(\n w: number,\n h: number,\n bezel: number,\n profile: 'circle' | 'squircle',\n borderRadius: number\n ): string {\n const canvas = this.sharedCanvas;\n if (!canvas) return '';\n\n canvas.width = w;\n canvas.height = h;\n const ctx = canvas.getContext('2d');\n if (!ctx) return '';\n\n const imgData = ctx.createImageData(w, h);\n const data = imgData.data;\n\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const distL = x;\n const distR = w - x;\n const distT = y;\n const distB = h - y;\n\n let minDist = Math.min(distL, distR, distT, distB);\n let nx = 0;\n let ny = 0;\n\n if (minDist === distL) nx = 1;\n else if (minDist === distR) nx = -1;\n else if (minDist === distT) ny = 1;\n else if (minDist === distB) ny = -1;\n\n if (x < borderRadius && y < borderRadius) {\n const dist = Math.sqrt(Math.pow(borderRadius - x, 2) + Math.pow(borderRadius - y, 2));\n minDist = borderRadius - dist;\n if (dist > 0) {\n nx = (borderRadius - x) / dist;\n ny = (borderRadius - y) / dist;\n }\n } else if (x > w - borderRadius && y < borderRadius) {\n const dist = Math.sqrt(Math.pow(x - (w - borderRadius), 2) + Math.pow(borderRadius - y, 2));\n minDist = borderRadius - dist;\n if (dist > 0) {\n nx = -(x - (w - borderRadius)) / dist;\n ny = (borderRadius - y) / dist;\n }\n } else if (x < borderRadius && y > h - borderRadius) {\n const dist = Math.sqrt(Math.pow(borderRadius - x, 2) + Math.pow(y - (h - borderRadius), 2));\n minDist = borderRadius - dist;\n if (dist > 0) {\n nx = (borderRadius - x) / dist;\n ny = -(y - (h - borderRadius)) / dist;\n }\n } else if (x > w - borderRadius && y > h - borderRadius) {\n const dist = Math.sqrt(Math.pow(x - (w - borderRadius), 2) + Math.pow(y - (h - borderRadius), 2));\n minDist = borderRadius - dist;\n if (dist > 0) {\n nx = -(x - (w - borderRadius)) / dist;\n ny = -(y - (h - borderRadius)) / dist;\n }\n }\n\n let magnitudeClamp = 0;\n\n if (minDist > 0 && minDist < bezel) {\n const t = minDist / bezel;\n const factor = 1 - t;\n\n if (profile === 'circle') {\n magnitudeClamp = Math.sin(factor * Math.PI / 2) * 0.45;\n } else {\n magnitudeClamp = Math.pow(Math.sin(factor * Math.PI / 2), 2) * 0.45;\n }\n }\n\n const rVal = Math.floor(128 + nx * magnitudeClamp * 127);\n const gVal = Math.floor(128 + ny * magnitudeClamp * 127);\n\n const idx = (y * w + x) * 4;\n data[idx] = rVal;\n data[idx + 1] = gVal;\n data[idx + 2] = 128;\n data[idx + 3] = 255;\n }\n }\n\n ctx.putImageData(imgData, 0, 0);\n return canvas.toDataURL();\n }\n\n private syncSvgFilter(dataUrl: string, w: number, h: number, scale: number, blur: number): void {\n let container: Element | null = document.getElementById(`svg-container-${this.filterId}`);\n\n if (!container) {\n container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n container.id = `svg-container-${this.filterId}`;\n container.setAttribute('style', 'position: absolute; width: 0; height: 0; pointer-events: none;');\n document.body.appendChild(container);\n }\n\n container.innerHTML = `\n <filter id=\"${this.filterId}\"\n x=\"-10%\" y=\"-10%\" width=\"120%\" height=\"120%\"\n primitiveUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\">\n\n <feImage href=\"${dataUrl}\" x=\"0\" y=\"0\" width=\"${w}\" height=\"${h}\" preserveAspectRatio=\"none\" result=\"glass_map\" />\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"${blur}\" result=\"blurred_substrate\" />\n\n <feDisplacementMap\n in=\"blurred_substrate\"\n in2=\"glass_map\"\n scale=\"${scale}\"\n xChannelSelector=\"R\"\n yChannelSelector=\"G\"\n />\n </filter>\n `;\n }\n}\n","/*\n * Public API Surface of ngx-glassy-effect\n */\n\nexport * from './lib/glassy-effect';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ngx-glassy-effect.mjs","sources":["../../../projects/ngx-glassy-effect/src/lib/glassy-effect.ts","../../../projects/ngx-glassy-effect/src/public-api.ts","../../../projects/ngx-glassy-effect/src/ngx-glassy-effect.ts"],"sourcesContent":["import { DestroyRef, Directive, ElementRef, inject, input, signal, effect, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\n@Directive({\n selector: '[ngxGlassyEffect]',\n standalone: true\n})\nexport class GlassyEffect {\n private el = inject(ElementRef<HTMLElement>);\n private destroyRef = inject(DestroyRef);\n private platformId = inject(PLATFORM_ID);\n private isBrowser = isPlatformBrowser(this.platformId);\n\n bezel = input<number>(10);\n scale = input<number>(50);\n blur = input<number>(1.5);\n profile = input<'circle' | 'squircle'>('squircle');\n showBorder = input<boolean>(false);\n\n lensRange = input<number>(100);\n reflectionMidpoint = input<number>(0.2);\n\n private width = signal<number>(0);\n private height = signal<number>(0);\n\n private filterId = `glassy-effect-${Math.random().toString(36).substring(2, 9)}`;\n private resizeObserver!: ResizeObserver;\n\n private sharedCanvas = this.isBrowser ? document.createElement('canvas') : null;\n private borderLayer: HTMLDivElement | null = null;\n private animationFrameId: number | null = null;\n\n constructor() {\n if (!this.isBrowser) return;\n\n this.setupResizeObserver();\n\n effect(() => {\n const w = Math.floor(this.width());\n const h = Math.floor(this.height());\n const scale = this.scale();\n const blur = this.blur();\n const profile = this.profile();\n const lensRange = this.lensRange();\n const reflectionMidpoint = this.reflectionMidpoint();\n\n if (w === 0 || h === 0) return;\n\n const nativeEl = this.el.nativeElement;\n const computedStyle = window.getComputedStyle(nativeEl);\n\n const maxPossibleRadius = Math.min(w / 2, h / 2);\n const rawRadius = parseFloat(computedStyle.borderRadius) || 0;\n const borderRadius = Math.min(rawRadius, maxPossibleRadius);\n\n const dataUrl = this.generateDisplacementMap(w, h, profile, borderRadius, lensRange, reflectionMidpoint);\n this.syncSvgFilter(dataUrl, w, h, scale, blur);\n\n nativeEl.style.backdropFilter = `url(#${this.filterId})`;\n\n if (this.showBorder()) {\n this.applyBorderLighting(w, h, borderRadius);\n } else if (this.borderLayer) {\n this.borderLayer.remove();\n this.borderLayer = null;\n }\n });\n\n this.destroyRef.onDestroy(() => {\n if (this.resizeObserver) this.resizeObserver.disconnect();\n if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);\n\n const svgEl = document.getElementById(`svg-container-${this.filterId}`);\n if (svgEl) svgEl.remove();\n });\n }\n\n private applyBorderLighting(w: number, h: number, r: number): void {\n const nativeEl = this.el.nativeElement;\n const computedStyle = window.getComputedStyle(nativeEl);\n\n if (computedStyle.position === 'static') {\n nativeEl.style.position = 'relative';\n }\n\n nativeEl.style.border = 'none';\n nativeEl.style.boxShadow = 'none';\n\n if (!this.borderLayer) {\n this.borderLayer = document.createElement('div');\n this.borderLayer.style.position = 'absolute';\n this.borderLayer.style.inset = '0px';\n this.borderLayer.style.pointerEvents = 'none';\n this.borderLayer.style.zIndex = '1';\n this.borderLayer.style.webkitMask =\n 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)';\n this.borderLayer.style.webkitMaskComposite = 'xor';\n this.borderLayer.style.maskComposite = 'exclude';\n this.borderLayer.style.padding = '1px';\n nativeEl.appendChild(this.borderLayer);\n }\n\n this.borderLayer.style.borderRadius = computedStyle.borderRadius || 'inherit';\n this.borderLayer.style.opacity = '1';\n\n const dx = w - 2 * r + r * Math.sqrt(2);\n const dy = h - 2 * r + r * Math.sqrt(2);\n const angle = 90 + (Math.atan2(dx, dy) * 180) / Math.PI;\n\n this.borderLayer.style.background = `\n linear-gradient(${angle}deg,\n rgba(255, 255, 255, 0.22) 0%,\n rgba(255, 255, 255, 0.18) 20%,\n rgba(255, 255, 255, 0.12) 35%,\n rgba(255, 255, 255, 0.07) 45%,\n rgba(255, 255, 255, 0.07) 55%,\n rgba(255, 255, 255, 0.12) 65%,\n rgba(255, 255, 255, 0.18) 80%,\n rgba(255, 255, 255, 0.22) 100%\n )\n `;\n }\n\n private setupResizeObserver(): void {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);\n\n this.animationFrameId = requestAnimationFrame(() => {\n const rect = this.el.nativeElement.getBoundingClientRect();\n this.width.set(rect.width);\n this.height.set(rect.height);\n });\n });\n this.resizeObserver.observe(this.el.nativeElement);\n }\n\n private generateDisplacementMap(\n w: number,\n h: number,\n profile: 'circle' | 'squircle',\n borderRadius: number,\n lensRange: number,\n reflectionMidpoint: number\n ): string {\n const canvas = this.sharedCanvas;\n if (!canvas) return '';\n\n canvas.width = w;\n canvas.height = h;\n const ctx = canvas.getContext('2d');\n if (!ctx) return '';\n\n const imgData = ctx.createImageData(w, h);\n const data = imgData.data;\n\n const activeRange = lensRange * reflectionMidpoint;\n\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const distL = x;\n const distR = w - x;\n const distT = y;\n const distB = h - y;\n\n let minDist = Math.min(distL, distR, distT, distB);\n let nx = 0;\n let ny = 0;\n\n if (minDist === distL) nx = 1;\n else if (minDist === distR) nx = -1;\n else if (minDist === distT) ny = 1;\n else if (minDist === distB) ny = -1;\n\n if (x < borderRadius && y < borderRadius) {\n const dist = Math.sqrt(Math.pow(borderRadius - x, 2) + Math.pow(borderRadius - y, 2));\n minDist = borderRadius - dist;\n if (dist > 0) {\n nx = (borderRadius - x) / dist;\n ny = (borderRadius - y) / dist;\n }\n } else if (x > w - borderRadius && y < borderRadius) {\n const dist = Math.sqrt(\n Math.pow(x - (w - borderRadius), 2) + Math.pow(borderRadius - y, 2),\n );\n minDist = borderRadius - dist;\n if (dist > 0) {\n nx = -(x - (w - borderRadius)) / dist;\n ny = (borderRadius - y) / dist;\n }\n } else if (x < borderRadius && y > h - borderRadius) {\n const dist = Math.sqrt(\n Math.pow(borderRadius - x, 2) + Math.pow(y - (h - borderRadius), 2),\n );\n minDist = borderRadius - dist;\n if (dist > 0) {\n nx = (borderRadius - x) / dist;\n ny = -(y - (h - borderRadius)) / dist;\n }\n } else if (x > w - borderRadius && y > h - borderRadius) {\n const dist = Math.sqrt(\n Math.pow(x - (w - borderRadius), 2) + Math.pow(y - (h - borderRadius), 2),\n );\n minDist = borderRadius - dist;\n if (dist > 0) {\n nx = -(x - (w - borderRadius)) / dist;\n ny = -(y - (h - borderRadius)) / dist;\n }\n }\n\n let magnitude = 0;\n\n if (minDist >= 0 && minDist < activeRange) {\n const tActive = minDist / activeRange;\n magnitude = Math.pow(1 - tActive, 2);\n } else {\n magnitude = 0;\n }\n\n let finalMagX = nx * magnitude;\n let finalMagY = ny * magnitude;\n\n if (profile === 'squircle') {\n finalMagX *= 0.95;\n finalMagY *= 0.95;\n }\n\n const rVal = Math.floor(128 + finalMagX * 127);\n const gVal = Math.floor(128 + finalMagY * 127);\n\n const idx = (y * w + x) * 4;\n data[idx] = Math.max(0, Math.min(255, rVal));\n data[idx + 1] = Math.max(0, Math.min(255, gVal));\n data[idx + 2] = 128;\n data[idx + 3] = 255;\n }\n }\n\n ctx.putImageData(imgData, 0, 0);\n return canvas.toDataURL();\n }\n\n private syncSvgFilter(dataUrl: string, w: number, h: number, scale: number, blur: number): void {\n let container: Element | null = document.getElementById(`svg-container-${this.filterId}`);\n\n if (!container) {\n container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n container.id = `svg-container-${this.filterId}`;\n container.setAttribute(\n 'style',\n 'position: absolute; width: 0; height: 0; pointer-events: none;',\n );\n document.body.appendChild(container);\n }\n\n container.innerHTML = `\n <filter id=\"${this.filterId}\"\n x=\"-30%\" y=\"-30%\" width=\"160%\" height=\"160%\"\n primitiveUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\">\n\n <feImage href=\"${dataUrl}\" x=\"0\" y=\"0\" width=\"${w}\" height=\"${h}\" preserveAspectRatio=\"none\" result=\"glass_map\" />\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"${blur}\" result=\"blurred_substrate\" />\n\n <feDisplacementMap\n in=\"blurred_substrate\"\n in2=\"glass_map\"\n scale=\"${scale}\"\n xChannelSelector=\"R\"\n yChannelSelector=\"G\"\n />\n </filter>\n `;\n }\n}\n","/*\n * Public API Surface of ngx-glassy-effect\n */\n\nexport * from './lib/glassy-effect';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
|
|
3
3
|
declare class GlassyEffect {
|
|
4
|
-
/**
|
|
5
|
-
* This class has been generator with the help of AI.
|
|
6
|
-
**/
|
|
7
4
|
private el;
|
|
8
5
|
private destroyRef;
|
|
9
6
|
private platformId;
|
|
@@ -13,6 +10,8 @@ declare class GlassyEffect {
|
|
|
13
10
|
blur: _angular_core.InputSignal<number>;
|
|
14
11
|
profile: _angular_core.InputSignal<"circle" | "squircle">;
|
|
15
12
|
showBorder: _angular_core.InputSignal<boolean>;
|
|
13
|
+
lensRange: _angular_core.InputSignal<number>;
|
|
14
|
+
reflectionMidpoint: _angular_core.InputSignal<number>;
|
|
16
15
|
private width;
|
|
17
16
|
private height;
|
|
18
17
|
private filterId;
|
|
@@ -26,7 +25,7 @@ declare class GlassyEffect {
|
|
|
26
25
|
private generateDisplacementMap;
|
|
27
26
|
private syncSvgFilter;
|
|
28
27
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GlassyEffect, never>;
|
|
29
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GlassyEffect, "[ngxGlassyEffect]", never, { "bezel": { "alias": "bezel"; "required": false; "isSignal": true; }; "scale": { "alias": "scale"; "required": false; "isSignal": true; }; "blur": { "alias": "blur"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "showBorder": { "alias": "showBorder"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
28
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GlassyEffect, "[ngxGlassyEffect]", never, { "bezel": { "alias": "bezel"; "required": false; "isSignal": true; }; "scale": { "alias": "scale"; "required": false; "isSignal": true; }; "blur": { "alias": "blur"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "showBorder": { "alias": "showBorder"; "required": false; "isSignal": true; }; "lensRange": { "alias": "lensRange"; "required": false; "isSignal": true; }; "reflectionMidpoint": { "alias": "reflectionMidpoint"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
export { GlassyEffect };
|