ngx-glassy-effect 0.0.23 → 1.0.1
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,77 @@
|
|
|
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
|
+
```angular20html
|
|
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
|
+
Hello - Bonjour - مرحبا
|
|
37
|
+
</div>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
> Tip 1 **: If your div (.content for exmp) 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
|
+
|
|
42
|
+
```css
|
|
43
|
+
/* Tip 1 */
|
|
44
|
+
.content {
|
|
45
|
+
/* ... */
|
|
46
|
+
color: white;
|
|
47
|
+
background-color: rgb(52 52 52 / 0.2);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
> 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.
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
/* Tip 2 */
|
|
55
|
+
.content {
|
|
56
|
+
/* ... */
|
|
57
|
+
border: turquoise 2px solid;
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Demo
|
|
62
|
+
|
|
63
|
+
> To see a visual Demo visit the git repository of this project : [Github Repository](https://github.com/anassmdi/ngx-glassy-effect)
|
|
64
|
+
|
|
65
|
+
## Configuration
|
|
66
|
+
|
|
67
|
+
- If you wish to customize the inputs values, here's a full description of all the variables :
|
|
68
|
+
|
|
69
|
+
| Input | Type | Default | Description |
|
|
70
|
+
|------------|-----------------------|-----------|--------------------------------------------------------------------------------------------------------------|
|
|
71
|
+
| bezel | number | 10 | The width of the refractive edge bevel in pixels. |
|
|
72
|
+
| scale | number | 50 | The intensity of the glass refraction distortion map. |
|
|
73
|
+
| blur | number | 1.5 | The backdrop blur intensity factor applied to the substrate. |
|
|
74
|
+
| profile | 'circle' / 'squircle' | 'squircle | The geometric falloff curve used to generate the edge normals. |
|
|
75
|
+
| showBorder | boolean | false | When true, renders an integrated semi-transparent pseudo-border with a realistic top-down lighting gradient. |
|
|
76
|
+
|
|
77
|
+
> Read Tip 1 ** if your ngxGlassyEffect div's text is not showing.
|
|
@@ -3,6 +3,9 @@ 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
|
+
**/
|
|
6
9
|
el = inject((ElementRef));
|
|
7
10
|
destroyRef = inject(DestroyRef);
|
|
8
11
|
platformId = inject(PLATFORM_ID);
|
|
@@ -11,10 +14,12 @@ class GlassyEffect {
|
|
|
11
14
|
...(ngDevMode ? [{ debugName: "bezel" }] : /* istanbul ignore next */ []));
|
|
12
15
|
scale = input(50, /* @ts-ignore */
|
|
13
16
|
...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
|
|
14
|
-
blur = input(1, /* @ts-ignore */
|
|
17
|
+
blur = input(1.5, /* @ts-ignore */
|
|
15
18
|
...(ngDevMode ? [{ debugName: "blur" }] : /* istanbul ignore next */ []));
|
|
16
19
|
profile = input('squircle', /* @ts-ignore */
|
|
17
20
|
...(ngDevMode ? [{ debugName: "profile" }] : /* istanbul ignore next */ []));
|
|
21
|
+
showBorder = input(false, /* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [{ debugName: "showBorder" }] : /* istanbul ignore next */ []));
|
|
18
23
|
width = signal(0, /* @ts-ignore */
|
|
19
24
|
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
20
25
|
height = signal(0, /* @ts-ignore */
|
|
@@ -37,11 +42,21 @@ class GlassyEffect {
|
|
|
37
42
|
const profile = this.profile();
|
|
38
43
|
if (w === 0 || h === 0)
|
|
39
44
|
return;
|
|
40
|
-
const dataUrl = this.generateDisplacementMap(w, h, bezel, profile);
|
|
41
|
-
this.syncSvgFilter(dataUrl, w, h, scale, blur);
|
|
42
45
|
const nativeEl = this.el.nativeElement;
|
|
46
|
+
const computedStyle = window.getComputedStyle(nativeEl);
|
|
47
|
+
const maxPossibleRadius = Math.min(w / 2, h / 2);
|
|
48
|
+
const rawRadius = parseFloat(computedStyle.borderRadius) || 0;
|
|
49
|
+
const borderRadius = Math.min(rawRadius, maxPossibleRadius);
|
|
50
|
+
const dataUrl = this.generateDisplacementMap(w, h, bezel, profile, borderRadius);
|
|
51
|
+
this.syncSvgFilter(dataUrl, w, h, scale, blur);
|
|
43
52
|
nativeEl.style.backdropFilter = `url(#${this.filterId})`;
|
|
44
|
-
this.
|
|
53
|
+
if (this.showBorder()) {
|
|
54
|
+
this.applyBorderLighting();
|
|
55
|
+
}
|
|
56
|
+
else if (this.borderLayer) {
|
|
57
|
+
this.borderLayer.remove();
|
|
58
|
+
this.borderLayer = null;
|
|
59
|
+
}
|
|
45
60
|
});
|
|
46
61
|
this.destroyRef.onDestroy(() => {
|
|
47
62
|
if (this.resizeObserver)
|
|
@@ -53,9 +68,8 @@ class GlassyEffect {
|
|
|
53
68
|
svgEl.remove();
|
|
54
69
|
});
|
|
55
70
|
}
|
|
56
|
-
|
|
71
|
+
applyBorderLighting() {
|
|
57
72
|
const nativeEl = this.el.nativeElement;
|
|
58
|
-
// Ensure containment context for the absolute border layer
|
|
59
73
|
const computedStyle = window.getComputedStyle(nativeEl);
|
|
60
74
|
if (computedStyle.position === 'static') {
|
|
61
75
|
nativeEl.style.position = 'relative';
|
|
@@ -103,7 +117,7 @@ class GlassyEffect {
|
|
|
103
117
|
});
|
|
104
118
|
this.resizeObserver.observe(this.el.nativeElement);
|
|
105
119
|
}
|
|
106
|
-
generateDisplacementMap(w, h, bezel, profile) {
|
|
120
|
+
generateDisplacementMap(w, h, bezel, profile, borderRadius) {
|
|
107
121
|
const canvas = this.sharedCanvas;
|
|
108
122
|
if (!canvas)
|
|
109
123
|
return '';
|
|
@@ -123,62 +137,57 @@ class GlassyEffect {
|
|
|
123
137
|
let minDist = Math.min(distL, distR, distT, distB);
|
|
124
138
|
let nx = 0;
|
|
125
139
|
let ny = 0;
|
|
126
|
-
if (minDist
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
ny = (bezel - y) / dist;
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
else if (x > w - bezel && y < bezel) {
|
|
144
|
-
const dist = Math.sqrt(Math.pow(x - (w - bezel), 2) + Math.pow(bezel - y, 2));
|
|
145
|
-
minDist = bezel - dist;
|
|
146
|
-
if (dist > 0) {
|
|
147
|
-
nx = -(x - (w - bezel)) / dist;
|
|
148
|
-
ny = (bezel - y) / dist;
|
|
149
|
-
}
|
|
140
|
+
if (minDist === distL)
|
|
141
|
+
nx = 1;
|
|
142
|
+
else if (minDist === distR)
|
|
143
|
+
nx = -1;
|
|
144
|
+
else if (minDist === distT)
|
|
145
|
+
ny = 1;
|
|
146
|
+
else if (minDist === distB)
|
|
147
|
+
ny = -1;
|
|
148
|
+
if (x < borderRadius && y < borderRadius) {
|
|
149
|
+
const dist = Math.sqrt(Math.pow(borderRadius - x, 2) + Math.pow(borderRadius - y, 2));
|
|
150
|
+
minDist = borderRadius - dist;
|
|
151
|
+
if (dist > 0) {
|
|
152
|
+
nx = (borderRadius - x) / dist;
|
|
153
|
+
ny = (borderRadius - y) / dist;
|
|
150
154
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
}
|
|
156
|
+
else if (x > w - borderRadius && y < borderRadius) {
|
|
157
|
+
const dist = Math.sqrt(Math.pow(x - (w - borderRadius), 2) + Math.pow(borderRadius - y, 2));
|
|
158
|
+
minDist = borderRadius - dist;
|
|
159
|
+
if (dist > 0) {
|
|
160
|
+
nx = -(x - (w - borderRadius)) / dist;
|
|
161
|
+
ny = (borderRadius - y) / dist;
|
|
158
162
|
}
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
163
|
+
}
|
|
164
|
+
else if (x < borderRadius && y > h - borderRadius) {
|
|
165
|
+
const dist = Math.sqrt(Math.pow(borderRadius - x, 2) + Math.pow(y - (h - borderRadius), 2));
|
|
166
|
+
minDist = borderRadius - dist;
|
|
167
|
+
if (dist > 0) {
|
|
168
|
+
nx = (borderRadius - x) / dist;
|
|
169
|
+
ny = -(y - (h - borderRadius)) / dist;
|
|
166
170
|
}
|
|
167
171
|
}
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
slope = heightVal > 0 ? om_t / heightVal : 0;
|
|
172
|
+
else if (x > w - borderRadius && y > h - borderRadius) {
|
|
173
|
+
const dist = Math.sqrt(Math.pow(x - (w - borderRadius), 2) + Math.pow(y - (h - borderRadius), 2));
|
|
174
|
+
minDist = borderRadius - dist;
|
|
175
|
+
if (dist > 0) {
|
|
176
|
+
nx = -(x - (w - borderRadius)) / dist;
|
|
177
|
+
ny = -(y - (h - borderRadius)) / dist;
|
|
178
|
+
}
|
|
176
179
|
}
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
+
let magnitudeClamp = 0;
|
|
181
|
+
if (minDist > 0 && minDist < bezel) {
|
|
182
|
+
const t = minDist / bezel;
|
|
183
|
+
const factor = 1 - t;
|
|
184
|
+
if (profile === 'circle') {
|
|
185
|
+
magnitudeClamp = Math.sin(factor * Math.PI / 2) * 0.45;
|
|
186
|
+
}
|
|
187
|
+
else {
|
|
188
|
+
magnitudeClamp = Math.pow(Math.sin(factor * Math.PI / 2), 2) * 0.45;
|
|
189
|
+
}
|
|
180
190
|
}
|
|
181
|
-
const magnitudeClamp = Math.min(1, slope * 0.45);
|
|
182
191
|
const rVal = Math.floor(128 + nx * magnitudeClamp * 127);
|
|
183
192
|
const gVal = Math.floor(128 + ny * magnitudeClamp * 127);
|
|
184
193
|
const idx = (y * w + x) * 4;
|
|
@@ -219,7 +228,7 @@ class GlassyEffect {
|
|
|
219
228
|
`;
|
|
220
229
|
}
|
|
221
230
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GlassyEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
222
|
-
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 } }, ngImport: i0 });
|
|
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 });
|
|
223
232
|
}
|
|
224
233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GlassyEffect, decorators: [{
|
|
225
234
|
type: Directive,
|
|
@@ -227,7 +236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
227
236
|
selector: '[ngxGlassyEffect]',
|
|
228
237
|
standalone: true
|
|
229
238
|
}]
|
|
230
|
-
}], 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 }] }] } });
|
|
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 }] }] } });
|
|
231
240
|
|
|
232
241
|
/*
|
|
233
242
|
* 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 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);\n profile = input<'circle' | 'squircle'>('squircle');\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 dataUrl = this.generateDisplacementMap(w, h, bezel, profile);\n this.syncSvgFilter(dataUrl, w, h, scale, blur);\n\n const nativeEl = this.el.nativeElement;\n nativeEl.style.backdropFilter = `url(#${this.filterId})`;\n this.applyAppleGlassLighting();\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 applyAppleGlassLighting(): void {\n const nativeEl = this.el.nativeElement;\n\n // Ensure containment context for the absolute border layer\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 ): 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 < bezel) {\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 < bezel && y < bezel) {\n const dist = Math.sqrt(Math.pow(bezel - x, 2) + Math.pow(bezel - y, 2));\n minDist = bezel - dist;\n if (dist > 0) {\n nx = (bezel - x) / dist;\n ny = (bezel - y) / dist;\n }\n } else if (x > w - bezel && y < bezel) {\n const dist = Math.sqrt(Math.pow(x - (w - bezel), 2) + Math.pow(bezel - y, 2));\n minDist = bezel - dist;\n if (dist > 0) {\n nx = -(x - (w - bezel)) / dist;\n ny = (bezel - y) / dist;\n }\n } else if (x < bezel && y > h - bezel) {\n const dist = Math.sqrt(Math.pow(bezel - x, 2) + Math.pow(y - (h - bezel), 2));\n minDist = bezel - dist;\n if (dist > 0) {\n nx = (bezel - x) / dist;\n ny = -(y - (h - bezel)) / dist;\n }\n } else if (x > w - bezel && y > h - bezel) {\n const dist = Math.sqrt(Math.pow(x - (w - bezel), 2) + Math.pow(y - (h - bezel), 2));\n minDist = bezel - dist;\n if (dist > 0) {\n nx = -(x - (w - bezel)) / dist;\n ny = -(y - (h - bezel)) / dist;\n }\n }\n }\n\n let t = Math.max(0, Math.min(1, minDist / bezel));\n if (minDist < 0) t = 0;\n\n let slope = 0;\n const om_t = 1 - t;\n\n if (profile === 'circle') {\n const heightVal = Math.sqrt(1 - om_t * om_t);\n slope = heightVal > 0 ? om_t / heightVal : 0;\n } else {\n const heightVal = Math.pow(1 - Math.pow(om_t, 4), 0.25);\n slope = heightVal > 0 ? Math.pow(om_t, 3) / Math.pow(heightVal, 3) : 0;\n }\n\n const magnitudeClamp = Math.min(1, slope * 0.45);\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\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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
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
|
+
**/
|
|
4
7
|
private el;
|
|
5
8
|
private destroyRef;
|
|
6
9
|
private platformId;
|
|
@@ -9,6 +12,7 @@ declare class GlassyEffect {
|
|
|
9
12
|
scale: _angular_core.InputSignal<number>;
|
|
10
13
|
blur: _angular_core.InputSignal<number>;
|
|
11
14
|
profile: _angular_core.InputSignal<"circle" | "squircle">;
|
|
15
|
+
showBorder: _angular_core.InputSignal<boolean>;
|
|
12
16
|
private width;
|
|
13
17
|
private height;
|
|
14
18
|
private filterId;
|
|
@@ -17,12 +21,12 @@ declare class GlassyEffect {
|
|
|
17
21
|
private borderLayer;
|
|
18
22
|
private animationFrameId;
|
|
19
23
|
constructor();
|
|
20
|
-
private
|
|
24
|
+
private applyBorderLighting;
|
|
21
25
|
private setupResizeObserver;
|
|
22
26
|
private generateDisplacementMap;
|
|
23
27
|
private syncSvgFilter;
|
|
24
28
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GlassyEffect, never>;
|
|
25
|
-
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; }; }, {}, never, never, true, 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>;
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
export { GlassyEffect };
|