fix: clip and dpi issues

gleamy-js · Mar 6, 2023 · eb3081f · eb3081f
1 parent a0ace96
commit eb3081f
Show file tree

Hide file tree

Showing 14 changed files with 50 additions and 52 deletions.
diff --git a/src/lib/components/base-materials/GradientMaterial.tsx b/src/lib/components/base-materials/GradientMaterial.tsx
@@ -47,12 +47,6 @@ export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
 
       setDPI(canvas, (gleamyProvider?.devicePixelRatio || 1) * 96);
 
-      // Always set html element if not defined;
-      if (elementWidth && elementHeight && canvas) {
-        canvas.width = elementWidth;
-        canvas.height = elementHeight;
-      }
-
       return { canvas, context, elementWidth, elementHeight };
     },
     [gleamyProvider.devicePixelRatio],
@@ -91,8 +85,9 @@ export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
         return;
       }
 
-      context.lineWidth =
-        edgeThickness * ((gleamyProvider?.devicePixelRatio || 1) * 96);
+      context.lineWidth = Math.ceil(
+        edgeThickness * ((gleamyProvider?.devicePixelRatio || 1) / 96),
+      );
 
       context.save();
       context.beginPath();
@@ -204,12 +199,23 @@ export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
       context.lineWidth = edgeThickness;
 
       context.fillStyle = createdMaterialInversed;
-      context.rect(
-        edgeThickness / 2,
-        edgeThickness / 2,
-        elementWidth - edgeThickness,
-        elementHeight - edgeThickness,
-      );
+
+      if (edgeThickness === 1) {
+        context.rect(
+          edgeThickness / 2,
+          edgeThickness / 2,
+          elementWidth - edgeThickness,
+          elementHeight - edgeThickness,
+        );
+      } else {
+        context.rect(
+          edgeThickness,
+          edgeThickness,
+          elementWidth - edgeThickness * 2,
+          elementHeight - edgeThickness * 2,
+        );
+      }
+
       context.stroke();
       context.closePath();
       context.restore();

diff --git a/src/lib/components/base-materials/ParticleMaterial.tsx b/src/lib/components/base-materials/ParticleMaterial.tsx
@@ -93,6 +93,8 @@ export const ParticleMaterial: FC<TParticle> = ({
         willReadFrequently: true,
       });
       const position = canvasReference.getBoundingClientRect();
+      setDPI(canvas, (gleamyProvider?.devicePixelRatio || 1) * 96);
+
       const elementWidth = canvasReference.width;
       const elementHeight = canvasReference.height;
 
@@ -101,14 +103,6 @@ export const ParticleMaterial: FC<TParticle> = ({
         (maxParticleAmount / 100) *
         (particleCoverage > 100 ? 100 : particleCoverage);
 
-      setDPI(canvas, (gleamyProvider?.devicePixelRatio || 1) * 96);
-
-      // Always set html element if not defined;
-      if (elementWidth && elementHeight && canvas) {
-        canvas.width = elementWidth;
-        canvas.height = elementHeight;
-      }
-
       if (!particles.current.length) {
         const newParticles = createParticles({
           depth: particleDepthLayers,
@@ -140,13 +134,14 @@ export const ParticleMaterial: FC<TParticle> = ({
 
   const createClipPath = useCallback(
     (context: CanvasRenderingContext2D) => {
-      context.beginPath();
-      context.scale(clipPathScale, clipPathScale);
+      context.save();
       clipPaths.current.forEach((path) => {
+        context.beginPath();
+        context.scale(clipPathScale, clipPathScale);
         const p = new Path2D(path);
+        context.closePath();
         context.clip(p);
       });
-      context.closePath();
     },
     [clipPaths, clipPathScale],
   );
@@ -200,7 +195,6 @@ export const ParticleMaterial: FC<TParticle> = ({
     }
 
     particles.current.forEach((layer, index) => {
-      // console.log('rendering particle');
       const selectedParticleColor = Array.isArray(particleColor)
         ? particleColor[index % particleColor.length]
         : particleColor;
@@ -255,7 +249,6 @@ export const ParticleMaterial: FC<TParticle> = ({
     gleamyProvider,
   ]);
 
-  // init
   useEffect(() => {
     requestAnimationFrame(render);
   }, [render]);

diff --git a/src/lib/components/materials/compound/Holographic.tsx b/src/lib/components/materials/compound/Holographic.tsx
@@ -15,8 +15,8 @@ const StyledMetal = styled(Metal)`
 `;
 
 export const Holographic = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   edgeThickness = 1,

diff --git a/src/lib/components/materials/metals/BlueSteel.tsx b/src/lib/components/materials/metals/BlueSteel.tsx
@@ -3,8 +3,8 @@ import { blueSteel } from '../../../definitions';
 import { TBlueSteel } from '../../../../types';
 
 export const BlueSteel = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   clipPathRef = null,

diff --git a/src/lib/components/materials/metals/Cobalt.tsx b/src/lib/components/materials/metals/Cobalt.tsx
@@ -3,8 +3,8 @@ import { cobalt } from '../../../definitions';
 import { TCobalt } from '../../../../types';
 
 export const Cobalt = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   clipPathRef = null,

diff --git a/src/lib/components/materials/metals/Copper.tsx b/src/lib/components/materials/metals/Copper.tsx
@@ -3,8 +3,8 @@ import { copper } from '../../../definitions';
 import { TCopper } from '../../../../types';
 
 export const Copper = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   clipPathRef = null,

diff --git a/src/lib/components/materials/metals/Gold.tsx b/src/lib/components/materials/metals/Gold.tsx
@@ -3,8 +3,8 @@ import { gold } from '../../../definitions';
 import { TGold } from '../../../../types';
 
 export const Gold = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   clipPathRef = null,

diff --git a/src/lib/components/materials/metals/Gunmetal.tsx b/src/lib/components/materials/metals/Gunmetal.tsx
@@ -3,8 +3,8 @@ import { gunmetal } from '../../../definitions';
 import { TGunmetal } from '../../../../types';
 
 export const Gunmetal = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   clipPathRef = null,

diff --git a/src/lib/components/materials/metals/RoseGold.tsx b/src/lib/components/materials/metals/RoseGold.tsx
@@ -3,8 +3,8 @@ import { rosegold } from '../../../definitions';
 import { TRoseGold } from '../../../../types';
 
 export const RoseGold = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   clipPathRef = null,

diff --git a/src/lib/components/materials/metals/Silver.tsx b/src/lib/components/materials/metals/Silver.tsx
@@ -3,8 +3,8 @@ import { silver } from '../../../definitions';
 import { TSilver } from '../../../../types';
 
 export const Silver = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   clipPathRef = null,

diff --git a/src/lib/components/materials/metals/Steel.tsx b/src/lib/components/materials/metals/Steel.tsx
@@ -3,8 +3,8 @@ import { steel } from '../../../definitions';
 import { TSteel } from '../../../../types';
 
 export const Steel = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   clipPathRef = null,

diff --git a/src/lib/components/materials/plastics/Iridescent.tsx b/src/lib/components/materials/plastics/Iridescent.tsx
@@ -8,8 +8,8 @@ const Component = styled(Plastic)`
 `;
 
 export const Iridescent = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   clipPathRef = null,

diff --git a/src/lib/components/materials/plastics/Lacquer.tsx b/src/lib/components/materials/plastics/Lacquer.tsx
@@ -3,8 +3,8 @@ import { lacquer } from '../../../definitions';
 import { TLacquer } from '../../../../types';
 
 export const Lacquer = ({
-  width = '100%',
-  height = '100%',
+  width = 100,
+  height = 100,
   noFill = false,
   acceleration = 1,
   clipPathRef = null,

diff --git a/src/lib/utils/setDPI.ts b/src/lib/utils/setDPI.ts
@@ -1,12 +1,12 @@
-export const setDPI = (canvas: HTMLCanvasElement, dpi: number): void => {
+export const setDPI = (canvas: HTMLCanvasElement, dpr: number): void => {
   if (!canvas) {
     return;
   }
 
   canvas.style.width = canvas.style.width || `${canvas.width}px`;
   canvas.style.height = canvas.style.height || `${canvas.height}px`;
 
-  const scaleFactor = dpi / 96;
+  const scaleFactor = dpr / 96;
   const width = parseFloat(canvas.style.width);
   const height = parseFloat(canvas.style.height);
 
@@ -25,7 +25,6 @@ export const setDPI = (canvas: HTMLCanvasElement, dpi: number): void => {
     return;
   }
 
-  // All good? make adjust
   canvas.width = Math.ceil(width * scaleFactor);
   canvas.height = Math.ceil(height * scaleFactor);