ayrisdev/menulio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): do not mutate SVG attributes, only replace qr-placeholder group

Browse Source
This commit is contained in:
AyrisAI
2026-08-20 23:58:21 +03:00
parent fa50e73198
commit c7e4832441
1 changed files with 3 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/src/app/menu/qr.tsx
+3 -6
View File
@@ -45,22 +45,19 @@ export default function QrScreen() {
const currentSvgRaw = MOBILE_SVG_TEMPLATES[selectedKey] || MOBILE_SVG_TEMPLATES["qr-4"] || Object.values(MOBILE_SVG_TEMPLATES)[0] || ""; const currentSvgRaw = MOBILE_SVG_TEMPLATES[selectedKey] || MOBILE_SVG_TEMPLATES["qr-4"] || Object.values(MOBILE_SVG_TEMPLATES)[0] || "";
// Inject the live QR code image directly into the SVG's #qr-placeholder group // Inject the live QR code image directly into the SVG's #qr-placeholder group
// SVG içeriğine başka hiçbir şey dokunulmaz, sadece #qr-placeholder replace edilir
function buildSvgWithQr(svgRaw: string, pngBase64: string): string { function buildSvgWithQr(svgRaw: string, pngBase64: string): string {
const qrImgTag = `<g id="qr-placeholder" transform="translate(90, 215)"> const qrImgTag = `<g id="qr-placeholder" transform="translate(90, 215)">
<rect width="220" height="220" rx="20" fill="#FFFFFF"/> <rect width="220" height="220" rx="20" fill="#FFFFFF"/>
<image href="data:image/png;base64,${pngBase64}" x="10" y="10" width="200" height="200" preserveAspectRatio="xMidYMid meet"/> <image href="data:image/png;base64,${pngBase64}" x="10" y="10" width="200" height="200" preserveAspectRatio="xMidYMid meet"/>
</g>`; </g>`;
// Replace the entire qr-placeholder group return svgRaw.replace(
const replaced = svgRaw.replace(
/<g id="qr-placeholder"[\s\S]*?<\/g>/, /<g id="qr-placeholder"[\s\S]*?<\/g>/,
qrImgTag qrImgTag
); );
// Also ensure the SVG scales properly by setting width/height to 100%
return replaced
.replace(/width="400"/, 'width="100%"')
.replace(/height="650"/, 'height="100%"');
} }
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const activeRest = await getActiveRestaurant(); const activeRest = await getActiveRestaurant();