ngx-glassy-effect 1.0.0 → 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
|
@@ -1,3 +1,79 @@
|
|
|
1
|
-
#
|
|
1
|
+
# NGX Glassy Effect
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This project is an Angular directive that applies a glassy effect to your html elements.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```shell
|
|
8
|
+
npm install ngx-glassy-effect --save
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import { Component } from '@angular/core';
|
|
15
|
+
import { GlassyEffect } from 'ngx-glassy-effect';
|
|
16
|
+
|
|
17
|
+
@Component({
|
|
18
|
+
selector: 'app-root',
|
|
19
|
+
imports: [GlassyEffect], // Imported as directive into your standalone component
|
|
20
|
+
templateUrl: './app.html',
|
|
21
|
+
styleUrl: './app.css'
|
|
22
|
+
})
|
|
23
|
+
export class App {
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<!-- Use in your html element as a directive, & configure it as your wish -->
|
|
29
|
+
<div class="content"
|
|
30
|
+
ngxGlassyEffect
|
|
31
|
+
[blur]="1.5"
|
|
32
|
+
[scale]="50"
|
|
33
|
+
[bezel]="10"
|
|
34
|
+
[profile]="'squircle'"
|
|
35
|
+
[showBorder]="true"
|
|
36
|
+
[lensRange]="100"
|
|
37
|
+
[reflectionMidpoint]="0.2">
|
|
38
|
+
Hello - Bonjour - مرحبا
|
|
39
|
+
</div>
|
|
40
|
+
```
|
|
41
|
+
|
|
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.
|
|
43
|
+
|
|
44
|
+
```css
|
|
45
|
+
/* Tip 1 */
|
|
46
|
+
.content {
|
|
47
|
+
/* ... */
|
|
48
|
+
color: white;
|
|
49
|
+
background-color: rgb(52 52 52 / 0.2);
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
> Tip 2 : If the default borders & shadows aren't working for you, you can just remove [showBorder] or make it 'false', & give the element of ngxGlassyEffect the border & shadows you like using css.
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
/* Tip 2 */
|
|
57
|
+
.content {
|
|
58
|
+
/* ... */
|
|
59
|
+
border: turquoise 2px solid;
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Demo
|
|
64
|
+
|
|
65
|
+
> To see a visual Demo visit the git repository of this project : [Github Repository](https://github.com/anassmdi/ngx-glassy-effect)
|
|
66
|
+
|
|
67
|
+
## Configuration
|
|
68
|
+
|
|
69
|
+
- If you wish to customize the inputs values, here's a full description of all the variables :
|
|
70
|
+
|
|
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 };
|