yveskalume/yvcodesnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add avatar upload and optimization features in branding panel, update branding store and canvas store for avatar handling

Browse Source
This commit is contained in:
Yves Kalume
2026-01-07 21:00:21 +02:00
parent b9da4dd56b
commit 5588fdb989
6 changed files with 396 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Canvas.tsx
+76 -18
View File
@@ -1,5 +1,5 @@
import React, { useRef, useState, useEffect, useCallback, useMemo, memo } from 'react';
import { Stage, Layer, Rect, Line, Text, Group, Path } from 'react-konva';
import { Stage, Layer, Rect, Line, Text, Group, Path, Circle } from 'react-konva';
import type Konva from 'konva';
import { useCanvasStore, createCodeElement, createTextElement, createArrowElement } from '../store/canvasStore';
import CodeBlock from './elements/CodeBlock';
@@ -28,6 +28,7 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
const { width, height } = snap.meta;
const { background } = snap;
const [brandingAvatar, setBrandingAvatar] = useState<HTMLImageElement | null>(null);
// Handle resize
useEffect(() => {
@@ -45,6 +46,25 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
return () => window.removeEventListener('resize', updateDimensions);
}, []);
useEffect(() => {
const url = background.branding?.avatarUrl || '';
if (!url) {
setBrandingAvatar(null);
return;
}
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => setBrandingAvatar(img);
img.onerror = () => setBrandingAvatar(null);
img.src = url;
return () => {
img.onload = null;
img.onerror = null;
};
}, [background.branding?.avatarUrl]);
// Calculate stage position to center the canvas
const getStagePosition = useCallback(() => {
const scaledWidth = width * zoom;
@@ -193,6 +213,9 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
const socialLayout = branding.socialLayout || 'horizontal';
const iconGap = 16;
const iconTextGap = 6; // Gap between icon and its text
const avatarSize = branding.avatarSize || 56;
const avatarGap = 14;
const hasAvatar = Boolean(branding.showAvatar && branding.avatarUrl && brandingAvatar);
// Build branding text lines
const lines: string[] = [];
@@ -204,7 +227,7 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
}
// Get active social platforms with their values
const activeSocialPlatforms = branding.showSocial && branding.social
const activeSocialPlatforms = branding.showSocial && branding.social
? SOCIAL_PLATFORMS_CONFIG.filter(p => branding.social[p.key as keyof typeof branding.social])
.map(p => ({
...p,
@@ -215,10 +238,10 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
const hasTextContent = lines.length > 0;
const hasSocialIcons = activeSocialPlatforms.length > 0;
if (!hasTextContent && !hasSocialIcons) return null;
if (!hasTextContent && !hasSocialIcons && !hasAvatar) return null;
const textHeight = lines.length * lineHeight;
// Calculate social section dimensions (icon + text for each platform)
const socialItemHeight = Math.max(iconSize, fontSize);
const socialHeight = socialLayout === 'vertical'
@@ -226,7 +249,10 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
: socialItemHeight;
// Calculate total content height
const contentHeight = textHeight + (hasTextContent && hasSocialIcons ? 16 : 0) + (hasSocialIcons ? socialHeight : 0);
const contentHeight = (hasTextContent || hasSocialIcons)
? textHeight + (hasTextContent && hasSocialIcons ? 16 : 0) + (hasSocialIcons ? socialHeight : 0)
: 0;
const blockHeight = Math.max(contentHeight, hasAvatar ? avatarSize : 0);
// Calculate position based on setting
let x = padding;
@@ -246,28 +272,60 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
break;
case 'bottom-left':
x = padding;
y = height - padding - contentHeight;
y = height - padding - blockHeight;
align = 'left';
break;
case 'bottom-right':
x = width - padding;
y = height - padding - contentHeight;
y = height - padding - blockHeight;
align = 'right';
break;
}
const totalHeight = blockHeight;
const contentTop = contentHeight > 0 ? y + (totalHeight - contentHeight) / 2 : y;
const avatarY = hasAvatar ? y + (totalHeight - avatarSize) / 2 : 0;
const avatarCenterX = align === 'right' ? x - avatarSize / 2 : x + avatarSize / 2;
const avatarCenterY = avatarY + avatarSize / 2;
const avatarPatternScale = hasAvatar && brandingAvatar && brandingAvatar.width && brandingAvatar.height
? Math.max(avatarSize / brandingAvatar.width, avatarSize / brandingAvatar.height)
: 1;
const avatarOffset = hasAvatar ? avatarSize + avatarGap : 0;
const textStartXBase = align === 'right' ? x - avatarOffset : x + avatarOffset;
const textX = align === 'right' ? 0 : textStartXBase;
const textWidth = align === 'right'
? Math.max(textStartXBase, 0)
: Math.max(width - padding - textStartXBase, 0);
// Calculate icon positions
const iconScale = iconSize / 24; // SVG viewBox is 24x24
const socialStartY = y + textHeight + (hasTextContent ? 16 : 0);
const socialStartY = contentTop + textHeight + (hasTextContent ? 16 : 0);
const anchorX = textStartXBase;
return (
<Group opacity={branding.opacity || 0.8}>
{/* Avatar */}
{hasAvatar && brandingAvatar && (
<Circle
x={avatarCenterX}
y={avatarCenterY}
radius={avatarSize / 2}
fillPatternImage={brandingAvatar}
fillPatternScaleX={avatarPatternScale}
fillPatternScaleY={avatarPatternScale}
fillPatternOffsetX={brandingAvatar.width / 2}
fillPatternOffsetY={brandingAvatar.height / 2}
listening={false}
/>
)}
{/* Text content */}
{hasTextContent && (
<Text
x={align === 'right' ? 0 : x}
y={y}
width={align === 'right' ? x : width - padding}
x={textX}
y={contentTop}
width={textWidth}
text={lines.join('\n')}
fontSize={fontSize}
fontFamily={branding.fontFamily || 'Inter'}
@@ -288,16 +346,16 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
if (socialLayout === 'vertical') {
itemY = socialStartY + index * (socialItemHeight + iconGap - 4);
itemX = align === 'right' ? x : x;
itemX = anchorX;
} else {
itemY = socialStartY;
// For horizontal layout, we need to calculate cumulative width
// This is simplified - for perfect alignment we'd need to measure text
const prevItemsWidth = activeSocialPlatforms.slice(0, index).reduce((acc, p) => {
const textWidth = (p.value.length * fontSize * 0.5); // Approximate text width
return acc + iconSize + iconTextGap + textWidth + iconGap;
const textWidthEstimate = (p.value.length * fontSize * 0.5); // Approximate text width
return acc + iconSize + iconTextGap + textWidthEstimate + iconGap;
}, 0);
itemX = align === 'right' ? x - prevItemsWidth : x + prevItemsWidth;
itemX = align === 'right' ? anchorX - prevItemsWidth : anchorX + prevItemsWidth;
}
// Icon vertical centering within item
@@ -307,7 +365,7 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
if (align === 'right') {
// For right alignment: text first, then icon
const textWidth = platform.value.length * fontSize * 0.5; // Approximate
const textWidthEstimate = platform.value.length * fontSize * 0.5; // Approximate
return (
<Group key={platform.key}>
<Path
@@ -319,7 +377,7 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
scaleY={iconScale}
/>
<Text
x={itemX - iconSize - iconTextGap - textWidth}
x={itemX - iconSize - iconTextGap - textWidthEstimate}
y={textY}
text={platform.value}
fontSize={fontSize}
@@ -354,7 +412,7 @@ const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
})}
</Group>
);
}, [background.branding, width, height]);
}, [background.branding, width, height, brandingAvatar]);
const stagePosition = useMemo(() => getStagePosition(), [getStagePosition]);
src/components/Inspector.tsx
+70 -3
View File
@@ -1,4 +1,4 @@
import React, { memo, useMemo, useCallback } from 'react';
import React, { memo, useMemo, useCallback, useState, useRef, useEffect } from 'react';
import { useCanvasStore } from '../store/canvasStore';
import type { CodeElement, TextElement, ArrowElement } from '../types';
import BackgroundPanel from './inspector/BackgroundPanel';
@@ -7,7 +7,13 @@ import CodeInspector from './inspector/CodeInspector';
import TextInspector from './inspector/TextInspector';
import ArrowInspector from './inspector/ArrowInspector';
const DEFAULT_WIDTH = 320;
const MIN_WIDTH = 260;
const MAX_WIDTH = 520;
const EXPANDED_WIDTH = 420;
const Inspector: React.FC = () => {
const [width, setWidth] = useState<number>(DEFAULT_WIDTH);
const {
snap,
selectedElementId,
@@ -17,10 +23,58 @@ const Inspector: React.FC = () => {
moveElementDown,
} = useCanvasStore();
const dragStateRef = useRef({
startX: 0,
startWidth: DEFAULT_WIDTH,
isDragging: false,
});
const selectedElement = useMemo(
() => snap.elements.find(el => el.id === selectedElementId),
[snap.elements, selectedElementId]
);
const handleResizeMove = useCallback((event: MouseEvent) => {
if (!dragStateRef.current.isDragging) return;
const delta = dragStateRef.current.startX - event.clientX;
const nextWidth = Math.min(
Math.max(dragStateRef.current.startWidth + delta, MIN_WIDTH),
MAX_WIDTH
);
setWidth(nextWidth);
}, []);
const stopDragging = useCallback(() => {
if (!dragStateRef.current.isDragging) return;
dragStateRef.current.isDragging = false;
window.removeEventListener('mousemove', handleResizeMove);
window.removeEventListener('mouseup', stopDragging);
}, [handleResizeMove]);
const handleResizeStart = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
dragStateRef.current = {
startX: event.clientX,
startWidth: width,
isDragging: true,
};
window.addEventListener('mousemove', handleResizeMove);
window.addEventListener('mouseup', stopDragging);
}, [width, handleResizeMove, stopDragging]);
const handleHandleDoubleClick = useCallback(() => {
setWidth(prev => (prev < EXPANDED_WIDTH ? EXPANDED_WIDTH : DEFAULT_WIDTH));
}, []);
useEffect(() => (
() => {
stopDragging();
}
), [stopDragging]);
const handleDelete = useCallback(() => {
if (selectedElement) {
@@ -47,8 +101,21 @@ const Inspector: React.FC = () => {
}, [selectedElement, moveElementDown]);
return (
<div className="w-80 bg-[#09090b] border-l border-white/5 overflow-y-auto h-full">
<div className="p-6">
<div
className="relative flex-shrink-0 h-full bg-[#09090b] border-l border-white/5 transition-[width] duration-150 ease-out"
style={{ width }}
>
<div
className="absolute left-0 top-0 h-full w-2 cursor-col-resize group"
onMouseDown={handleResizeStart}
onDoubleClick={handleHandleDoubleClick}
role="separator"
aria-orientation="vertical"
aria-label="Resize inspector"
>
<div className="mx-auto mt-1 h-full w-0.5 rounded-full bg-white/5 transition-all group-hover:bg-white/20" />
</div>
<div className="p-6 overflow-y-auto h-full">
{selectedElement ? (
<div className="space-y-6">
{/* Header with Title and Element Actions */}
src/components/inspector/BrandingPanel.tsx
+171 -1
View File
@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React, { useEffect, useCallback } from 'react';
import { useCanvasStore } from '../../store/canvasStore';
import { useBrandingStore } from '../../store/brandingStore';
import { FONT_FAMILIES } from '../../types';
@@ -20,6 +20,78 @@ const SOCIAL_PLATFORMS = [
{ key: 'tiktok', label: 'TikTok', placeholder: '@username' },
] as const;
const MAX_AVATAR_DIMENSION = 192;
const MAX_EMBEDDED_AVATAR_LENGTH = 350000;
const readFileAsDataUrl = (file: File) => new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
if (typeof reader.result === 'string') {
resolve(reader.result);
} else {
reject(new Error('Could not read file contents.'));
}
};
reader.onerror = () => reject(reader.error ?? new Error('Avatar read failed.'));
reader.readAsDataURL(file);
});
const loadImage = (src: string) => new Promise<HTMLImageElement>((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error('Avatar image could not be loaded.'));
img.src = src;
});
const optimiseAvatarFile = async (file: File): Promise<string> => {
const rawDataUrl = await readFileAsDataUrl(file);
if (rawDataUrl.length <= MAX_EMBEDDED_AVATAR_LENGTH) {
return rawDataUrl;
}
try {
const image = await loadImage(rawDataUrl);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
return rawDataUrl;
}
let targetSize = MAX_AVATAR_DIMENSION;
let optimised = rawDataUrl;
while (targetSize >= 96) {
const maxSide = Math.max(image.width, image.height);
const scale = maxSide > targetSize ? targetSize / maxSide : 1;
const width = Math.max(1, Math.round(image.width * scale));
const height = Math.max(1, Math.round(image.height * scale));
canvas.width = width;
canvas.height = height;
ctx.clearRect(0, 0, width, height);
ctx.drawImage(image, 0, 0, width, height);
optimised = canvas.toDataURL('image/png');
if (optimised.length <= MAX_EMBEDDED_AVATAR_LENGTH) {
break;
}
optimised = canvas.toDataURL('image/jpeg', 0.82);
if (optimised.length <= MAX_EMBEDDED_AVATAR_LENGTH) {
break;
}
targetSize = Math.floor(targetSize * 0.75);
}
return optimised.length <= MAX_EMBEDDED_AVATAR_LENGTH ? optimised : rawDataUrl;
} catch (error) {
console.warn('Avatar optimisation failed, keeping the original image.', error);
return rawDataUrl;
}
};
const BrandingPanel: React.FC = () => {
const { setBackground } = useCanvasStore();
const { info, preferences, updateInfo, updateSocial, updatePreferences } = useBrandingStore();
@@ -32,6 +104,7 @@ const BrandingPanel: React.FC = () => {
name: info.name,
website: info.website,
social: info.social,
avatarUrl: info.avatarUrl,
},
});
}, [info, preferences, setBackground]);
@@ -48,6 +121,35 @@ const BrandingPanel: React.FC = () => {
updateSocial(platform, value);
};
const handleAvatarUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
const resetInput = () => {
if (event.target) {
event.target.value = '';
}
};
if (!file || !file.type.startsWith('image/')) {
resetInput();
return;
}
void optimiseAvatarFile(file)
.then((dataUrl) => {
handleUpdateInfo({ avatarUrl: dataUrl });
handleUpdatePreferences({ showAvatar: true });
})
.catch((error) => {
console.warn('Avatar upload cancelled.', error);
})
.finally(resetInput);
}, [handleUpdateInfo, handleUpdatePreferences]);
const handleAvatarClear = useCallback(() => {
handleUpdateInfo({ avatarUrl: '' });
}, [handleUpdateInfo]);
return (
<div className="space-y-6">
{/* Enable Branding */}
@@ -93,6 +195,74 @@ const BrandingPanel: React.FC = () => {
</div>
</div>
{/* Avatar */}
<div>
<div className="flex items-center justify-between mb-2">
<label className="block text-xs font-medium text-neutral-500 uppercase tracking-wider">
Avatar
</label>
<button
onClick={() => handleUpdatePreferences({ showAvatar: !preferences.showAvatar })}
className={`text-xs px-2 py-0.5 rounded ${
preferences.showAvatar
? 'bg-blue-600/20 text-blue-400'
: 'bg-white/5 text-neutral-500'
}`}
>
{preferences.showAvatar ? 'Hide' : 'Show'}
</button>
</div>
<div className="flex items-center gap-3">
<label className="relative w-16 h-16 rounded-full border border-white/10 bg-white/5 overflow-hidden cursor-pointer group">
{info.avatarUrl ? (
<img
src={info.avatarUrl}
alt="Brand avatar"
className="w-full h-full object-cover"
/>
) : (
<div className="absolute inset-0 flex flex-col items-center justify-center text-[10px] text-neutral-500 group-hover:text-neutral-300">
<span>Upload</span>
<span className="text-[9px] text-neutral-600">PNG/JPG</span>
</div>
)}
<input
type="file"
accept="image/*"
onChange={handleAvatarUpload}
className="absolute inset-0 opacity-0 cursor-pointer"
aria-label="Upload avatar"
/>
</label>
<div className="flex-1 text-[11px] text-neutral-500 space-y-1">
<p>Use a square image for best results. Supported formats: PNG, JPG, SVG.</p>
{info.avatarUrl && (
<button
onClick={handleAvatarClear}
className="text-xs text-neutral-400 hover:text-red-400 transition-colors"
>
Remove avatar
</button>
)}
</div>
</div>
{preferences.showAvatar && (
<div className="mt-3">
<label className="block text-xs text-neutral-500 mb-2">
Size: {preferences.avatarSize}px
</label>
<input
type="range"
min={32}
max={120}
value={preferences.avatarSize}
onChange={(e) => handleUpdatePreferences({ avatarSize: parseInt(e.target.value) })}
className="w-full h-1.5 bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-600"
/>
</div>
)}
</div>
{/* Name */}
<div>
<div className="flex items-center justify-between mb-2">
src/store/brandingStore.ts
+39 -1
View File
@@ -1,5 +1,5 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { persist, createJSONStorage } from 'zustand/middleware';
interface BrandingInfo {
name: string;
@@ -12,6 +12,7 @@ interface BrandingInfo {
youtube?: string;
tiktok?: string;
};
avatarUrl?: string;
}
interface BrandingPreferences {
@@ -20,6 +21,7 @@ interface BrandingPreferences {
showName: boolean;
showWebsite: boolean;
showSocial: boolean;
showAvatar: boolean;
fontSize: number;
fontFamily: string;
color: string;
@@ -27,6 +29,7 @@ interface BrandingPreferences {
padding: number;
socialIconSize: number;
socialLayout: 'horizontal' | 'vertical';
avatarSize: number;
}
interface BrandingStore {
@@ -44,14 +47,18 @@ const defaultInfo: BrandingInfo = {
name: '',
website: '',
social: {},
avatarUrl: '',
};
const MAX_PERSISTED_AVATAR_LENGTH = 350000;
const defaultPreferences: BrandingPreferences = {
enabled: false,
position: 'bottom-right',
showName: true,
showWebsite: true,
showSocial: true,
showAvatar: false,
fontSize: 14,
fontFamily: 'Inter',
color: '#ffffff',
@@ -59,6 +66,7 @@ const defaultPreferences: BrandingPreferences = {
padding: 24,
socialIconSize: 20,
socialLayout: 'horizontal',
avatarSize: 56,
};
export const useBrandingStore = create<BrandingStore>()(
@@ -89,6 +97,36 @@ export const useBrandingStore = create<BrandingStore>()(
}),
{
name: 'yvcode-branding',
storage: createJSONStorage(() => {
if (typeof window === 'undefined') {
return {
getItem: () => null,
setItem: () => {},
removeItem: () => {},
};
}
return {
getItem: (name: string) => window.localStorage.getItem(name),
setItem: (name: string, value: string) => {
try {
window.localStorage.setItem(name, value);
} catch (error) {
console.warn('Failed to persist branding preferences (quota exceeded).', error);
}
},
removeItem: (name: string) => window.localStorage.removeItem(name),
};
}),
partialize: (state) => ({
info: {
...state.info,
avatarUrl: state.info.avatarUrl && state.info.avatarUrl.length > MAX_PERSISTED_AVATAR_LENGTH
? ''
: state.info.avatarUrl,
},
preferences: state.preferences,
}),
}
)
);
src/store/canvasStore.ts
+37 -2
View File
@@ -1,6 +1,6 @@
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
import { persist } from 'zustand/middleware';
import { persist, createJSONStorage } from 'zustand/middleware';
import { v4 as uuidv4 } from 'uuid';
import type {
Snap,
@@ -52,6 +52,8 @@ interface CanvasState {
importSnap: (json: string) => void;
}
const MAX_PERSISTED_AVATAR_LENGTH = 350000;
const defaultSnap: Snap = {
version: '1.0.0',
meta: {
@@ -80,14 +82,19 @@ const defaultSnap: Snap = {
name: '',
website: '',
social: {},
avatarUrl: '',
showName: true,
showWebsite: true,
showSocial: true,
showAvatar: false,
fontSize: 14,
fontFamily: 'Inter',
color: '#ffffff',
opacity: 0.8,
padding: 24,
socialIconSize: 20,
socialLayout: 'horizontal',
avatarSize: 56,
},
},
elements: [],
@@ -243,7 +250,35 @@ export const useCanvasStore = create<CanvasState>()(
})),
{
name: 'code-canvas-storage',
partialize: (state) => ({ snap: state.snap }),
storage: createJSONStorage(() => {
if (typeof window === 'undefined') {
return {
getItem: () => null,
setItem: () => {},
removeItem: () => {},
};
}
return {
getItem: (name: string) => window.localStorage.getItem(name),
setItem: (name: string, value: string) => {
try {
window.localStorage.setItem(name, value);
} catch (error) {
console.warn('Failed to persist canvas state (quota exceeded).', error);
}
},
removeItem: (name: string) => window.localStorage.removeItem(name),
};
}),
partialize: (state) => {
const snap = JSON.parse(JSON.stringify(state.snap)) as Snap;
if (snap.background?.branding?.avatarUrl && snap.background.branding.avatarUrl.length > MAX_PERSISTED_AVATAR_LENGTH) {
snap.background.branding.avatarUrl = '';
snap.background.branding.showAvatar = false;
}
return { snap };
},
}
)
);
src/types/index.ts
+3
View File
@@ -25,9 +25,11 @@ export interface Branding {
name: string;
website: string;
social: SocialMedia;
avatarUrl?: string;
showName: boolean;
showWebsite: boolean;
showSocial: boolean;
showAvatar?: boolean;
fontSize: number;
fontFamily: string;
color: string;
@@ -35,6 +37,7 @@ export interface Branding {
padding: number;
socialIconSize?: number;
socialLayout?: 'horizontal' | 'vertical';
avatarSize?: number;
}
export interface BrandStrip {