Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-15 17:21:41 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: single-player-mode-polish (#435)

Browse Source
This commit is contained in:
David Nguyen
2023-10-12 18:10:52 +11:00
committed by GitHub
parent eb5f5f7a90
commit c803d2c4ba
10 changed files with 27 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/lib/client-only/hooks/use-element-scale-size.ts
View File

@ -60,26 +60,17 @@ export const calculateTextScaleSize = (
*/
export function useElementScaleSize(
container: { width: number; height: number },
child: RefObject<HTMLElement | null>,
text: string,
fontSize: number,
fontFamily: string,
) {
const [scalingFactor, setScalingFactor] = useState(1);
useEffect(() => {
if (!child.current) {
return;
}
const scaleSize = calculateTextScaleSize(
container,
child.current.innerText,
`${fontSize}px`,
fontFamily,
);
const scaleSize = calculateTextScaleSize(container, text, `${fontSize}px`, fontFamily);
setScalingFactor(scaleSize);
}, [child, container, fontFamily, fontSize]);
}, [text, container, fontFamily, fontSize]);
return scalingFactor;
}

7
packages/ui/components/signing-card.tsx
View File

@ -56,7 +56,7 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
const sheenGradient = useMotionTemplate`linear-gradient(
30deg,
transparent,
rgba(var(--sheen-color) / ${trackMouse ? sheenOpacity : 0}) ${sheenPosition}%,
rgba(var(--sheen-color) / ${sheenOpacity}) ${sheenPosition}%,
transparent)`;
const cardRef = useRef<HTMLDivElement>(null);
@ -98,10 +98,12 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
void animate(cardX, 0, { duration: 2, ease: 'backInOut' });
void animate(cardY, 0, { duration: 2, ease: 'backInOut' });
void animate(sheenOpacity, 0, { duration: 2, ease: 'backInOut' });
setTrackMouse(false);
}, 1000);
},
[cardX, cardY, cardCenterPosition, trackMouse],
[cardX, cardY, cardCenterPosition, trackMouse, sheenOpacity],
);
useEffect(() => {
@ -126,7 +128,6 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
transformStyle: 'preserve-3d',
rotateX,
rotateY,
// willChange: 'transform background-image',
}}
>
<SigningCardContent className="bg-transparent" name={name} />

13
packages/ui/primitives/document-flow/single-player-mode-fields.tsx
View File

@ -70,25 +70,23 @@ export function SinglePlayerModeSignatureField({
throw new Error('Invalid field type');
}
const $paragraphEl = useRef<HTMLParagraphElement>(null);
const { height, width } = useFieldPageCoords(field);
const insertedBase64Signature = field.inserted && field.Signature?.signatureImageAsBase64;
const insertedTypeSignature = field.inserted && field.Signature?.typedSignature;
const scalingFactor = useElementScaleSize(
{
height,
width,
},
$paragraphEl,
insertedTypeSignature || '',
maxFontSize,
fontVariableValue,
);
const fontSize = maxFontSize * scalingFactor;
const insertedBase64Signature = field.inserted && field.Signature?.signatureImageAsBase64;
const insertedTypeSignature = field.inserted && field.Signature?.typedSignature;
return (
<SinglePlayerModeFieldCardContainer field={field}>
{insertedBase64Signature ? (
@ -99,7 +97,6 @@ export function SinglePlayerModeSignatureField({
/>
) : insertedTypeSignature ? (
<p
ref={$paragraphEl}
style={{
fontSize: `clamp(${minFontSize}px, ${fontSize}px, ${maxFontSize}px)`,
fontFamily: `var(${fontVariable})`,
@ -145,7 +142,7 @@ export function SinglePlayerModeCustomTextField({
height,
width,
},
$paragraphEl,
field.customText,
maxFontSize,
fontVariableValue,
);