585 lines
22 KiB
TypeScript
585 lines
22 KiB
TypeScript
/*
|
|
* Copyright (C) 2026 Fluxer Contributors
|
|
*
|
|
* This file is part of Fluxer.
|
|
*
|
|
* Fluxer is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Fluxer is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import fs from 'node:fs';
|
|
import path from 'node:path';
|
|
import {fileURLToPath} from 'node:url';
|
|
import {TYPING_BRIDGE_RIGHT_SHIFT_RATIO, TYPING_WIDTH_MULTIPLIER} from '@app/components/uikit/TypingConstants';
|
|
|
|
const __filename = fileURLToPath(import.meta.url);
|
|
const __dirname = path.dirname(__filename);
|
|
|
|
type AvatarSize = 16 | 20 | 24 | 32 | 36 | 40 | 44 | 48 | 56 | 80 | 120;
|
|
|
|
interface StatusConfig {
|
|
statusSize: number;
|
|
cutoutRadius: number;
|
|
cutoutCenter: number;
|
|
}
|
|
|
|
const STATUS_CONFIG: Record<number, StatusConfig> = {
|
|
16: {statusSize: 10, cutoutRadius: 5, cutoutCenter: 13},
|
|
20: {statusSize: 10, cutoutRadius: 5, cutoutCenter: 17},
|
|
24: {statusSize: 10, cutoutRadius: 7, cutoutCenter: 20},
|
|
32: {statusSize: 10, cutoutRadius: 8, cutoutCenter: 27},
|
|
36: {statusSize: 10, cutoutRadius: 8, cutoutCenter: 30},
|
|
40: {statusSize: 12, cutoutRadius: 9, cutoutCenter: 34},
|
|
44: {statusSize: 14, cutoutRadius: 10, cutoutCenter: 38},
|
|
48: {statusSize: 14, cutoutRadius: 10, cutoutCenter: 42},
|
|
56: {statusSize: 16, cutoutRadius: 11, cutoutCenter: 49},
|
|
80: {statusSize: 16, cutoutRadius: 14, cutoutCenter: 68},
|
|
120: {statusSize: 24, cutoutRadius: 20, cutoutCenter: 100},
|
|
};
|
|
|
|
const DESIGN_RULES = {
|
|
mobileAspectRatio: 0.75,
|
|
mobileCornerRadius: 0.12,
|
|
mobileScreenWidth: 0.72,
|
|
mobileScreenHeight: 0.7,
|
|
mobileScreenY: 0.06,
|
|
mobileWheelRadius: 0.13,
|
|
mobileWheelY: 0.83,
|
|
|
|
mobilePhoneExtraHeight: 2,
|
|
mobileDisplayExtraHeight: 2,
|
|
mobileDisplayExtraWidthPerSide: 2,
|
|
|
|
idle: {
|
|
cutoutRadiusRatio: 0.7,
|
|
cutoutOffsetRatio: 0.35,
|
|
},
|
|
dnd: {
|
|
barWidthRatio: 1.3,
|
|
barHeightRatio: 0.4,
|
|
minBarHeight: 2,
|
|
},
|
|
offline: {
|
|
innerRingRatio: 0.6,
|
|
},
|
|
} as const;
|
|
|
|
const MOBILE_SCREEN_WIDTH_TRIM_PX = 4;
|
|
const MOBILE_SCREEN_HEIGHT_TRIM_PX = 2;
|
|
const MOBILE_SCREEN_X_OFFSET_PX = 0;
|
|
const MOBILE_SCREEN_Y_OFFSET_PX = 3;
|
|
|
|
function getStatusConfig(avatarSize: number): StatusConfig {
|
|
if (STATUS_CONFIG[avatarSize]) {
|
|
return STATUS_CONFIG[avatarSize];
|
|
}
|
|
const sizes = Object.keys(STATUS_CONFIG)
|
|
.map(Number)
|
|
.sort((a, b) => a - b);
|
|
const closest = sizes.reduce((prev, curr) =>
|
|
Math.abs(curr - avatarSize) < Math.abs(prev - avatarSize) ? curr : prev,
|
|
);
|
|
return STATUS_CONFIG[closest];
|
|
}
|
|
|
|
interface StatusGeometry {
|
|
size: number;
|
|
cx: number;
|
|
cy: number;
|
|
innerRadius: number;
|
|
outerRadius: number;
|
|
borderWidth: number;
|
|
}
|
|
|
|
interface MobileStatusGeometry extends StatusGeometry {
|
|
phoneWidth: number;
|
|
phoneHeight: number;
|
|
phoneX: number;
|
|
phoneY: number;
|
|
phoneRx: number;
|
|
bezelHeight: number;
|
|
}
|
|
|
|
function calculateStatusGeometry(avatarSize: number, isMobile: boolean = false): StatusGeometry | MobileStatusGeometry {
|
|
const config = getStatusConfig(avatarSize);
|
|
|
|
const statusSize = config.statusSize;
|
|
const cutoutCenter = config.cutoutCenter;
|
|
const cutoutRadius = config.cutoutRadius;
|
|
|
|
const innerRadius = statusSize / 2;
|
|
const outerRadius = cutoutRadius;
|
|
const borderWidth = cutoutRadius - innerRadius;
|
|
|
|
const baseGeometry = {
|
|
size: statusSize,
|
|
cx: cutoutCenter,
|
|
cy: cutoutCenter,
|
|
innerRadius,
|
|
outerRadius,
|
|
borderWidth,
|
|
};
|
|
|
|
if (!isMobile) {
|
|
return baseGeometry;
|
|
}
|
|
|
|
const phoneWidth = statusSize;
|
|
const phoneHeight = Math.round(phoneWidth / DESIGN_RULES.mobileAspectRatio) + DESIGN_RULES.mobilePhoneExtraHeight;
|
|
const phoneRx = Math.round(phoneWidth * DESIGN_RULES.mobileCornerRadius);
|
|
const bezelHeight = Math.max(1, Math.round(phoneHeight * 0.05));
|
|
|
|
const phoneX = cutoutCenter - phoneWidth / 2;
|
|
const phoneY = cutoutCenter - phoneHeight / 2;
|
|
|
|
return {
|
|
...baseGeometry,
|
|
phoneWidth,
|
|
phoneHeight,
|
|
phoneX,
|
|
phoneY,
|
|
phoneRx,
|
|
bezelHeight,
|
|
};
|
|
}
|
|
|
|
function generateAvatarMaskDefault(size: number): string {
|
|
const r = size / 2;
|
|
return `<circle fill="white" cx="${r}" cy="${r}" r="${r}" />`;
|
|
}
|
|
|
|
function generateAvatarMaskStatusRound(size: number): string {
|
|
const r = size / 2;
|
|
const status = calculateStatusGeometry(size);
|
|
|
|
return `(
|
|
<>
|
|
<circle fill="white" cx="${r}" cy="${r}" r="${r}" />
|
|
<circle fill="black" cx="${status.cx}" cy="${status.cy}" r="${status.outerRadius}" />
|
|
</>
|
|
)`;
|
|
}
|
|
|
|
function generateAvatarMaskStatusTyping(size: number): string {
|
|
const r = size / 2;
|
|
const status = calculateStatusGeometry(size);
|
|
|
|
const typingWidth = Math.round(status.size * TYPING_WIDTH_MULTIPLIER);
|
|
const typingHeight = status.size;
|
|
const typingRx = status.outerRadius;
|
|
|
|
const typingExtension = Math.max(0, typingWidth - status.size);
|
|
const typingBridgeShift = typingExtension * TYPING_BRIDGE_RIGHT_SHIFT_RATIO;
|
|
|
|
const x = status.cx - typingWidth / 2 + typingBridgeShift;
|
|
const y = status.cy - typingHeight / 2;
|
|
|
|
return `(
|
|
<>
|
|
<circle fill="white" cx="${r}" cy="${r}" r="${r}" />
|
|
<rect fill="black" x="${x}" y="${y}" width="${typingWidth}" height="${typingHeight}" rx="${typingRx}" ry="${typingRx}" />
|
|
</>
|
|
)`;
|
|
}
|
|
|
|
function generateMobilePhoneMask(mobileStatus: MobileStatusGeometry): string {
|
|
const displayExtraHeight = DESIGN_RULES.mobileDisplayExtraHeight;
|
|
const displayExtraWidthPerSide = DESIGN_RULES.mobileDisplayExtraWidthPerSide;
|
|
|
|
const screenWidth =
|
|
mobileStatus.phoneWidth * DESIGN_RULES.mobileScreenWidth +
|
|
displayExtraWidthPerSide * 2 -
|
|
MOBILE_SCREEN_WIDTH_TRIM_PX;
|
|
const screenHeight =
|
|
mobileStatus.phoneHeight * DESIGN_RULES.mobileScreenHeight + displayExtraHeight - MOBILE_SCREEN_HEIGHT_TRIM_PX;
|
|
const screenX = mobileStatus.phoneX + (mobileStatus.phoneWidth - screenWidth) / 2 + MOBILE_SCREEN_X_OFFSET_PX;
|
|
const screenY =
|
|
mobileStatus.phoneY +
|
|
mobileStatus.phoneHeight * DESIGN_RULES.mobileScreenY -
|
|
displayExtraHeight / 2 +
|
|
MOBILE_SCREEN_Y_OFFSET_PX;
|
|
const screenRx = Math.min(screenWidth, screenHeight) * 0.1;
|
|
|
|
const wheelRadius = mobileStatus.phoneWidth * DESIGN_RULES.mobileWheelRadius;
|
|
const wheelCx = mobileStatus.phoneX + mobileStatus.phoneWidth / 2;
|
|
const wheelCy = mobileStatus.phoneY + mobileStatus.phoneHeight * DESIGN_RULES.mobileWheelY;
|
|
|
|
return `(
|
|
<>
|
|
<rect fill="white" x="${mobileStatus.phoneX}" y="${mobileStatus.phoneY}" width="${mobileStatus.phoneWidth}" height="${mobileStatus.phoneHeight}" rx="${mobileStatus.phoneRx}" ry="${mobileStatus.phoneRx}" />
|
|
<rect fill="black" x="${screenX}" y="${screenY}" width="${screenWidth}" height="${screenHeight}" rx="${screenRx}" ry="${screenRx}" />
|
|
<circle fill="black" cx="${wheelCx}" cy="${wheelCy}" r="${wheelRadius}" />
|
|
</>
|
|
)`;
|
|
}
|
|
|
|
function generateStatusOnline(size: number, isMobile: boolean = false): string {
|
|
const status = calculateStatusGeometry(size, isMobile);
|
|
|
|
if (!isMobile) {
|
|
return `<circle fill="white" cx="${status.cx}" cy="${status.cy}" r="${status.outerRadius}" />`;
|
|
}
|
|
|
|
return generateMobilePhoneMask(status as MobileStatusGeometry);
|
|
}
|
|
|
|
function generateStatusIdle(size: number, isMobile: boolean = false): string {
|
|
const status = calculateStatusGeometry(size, isMobile);
|
|
|
|
if (!isMobile) {
|
|
const cutoutRadius = Math.round(status.outerRadius * DESIGN_RULES.idle.cutoutRadiusRatio);
|
|
const cutoutOffsetDistance = Math.round(status.outerRadius * DESIGN_RULES.idle.cutoutOffsetRatio);
|
|
const cutoutCx = status.cx - cutoutOffsetDistance;
|
|
const cutoutCy = status.cy - cutoutOffsetDistance;
|
|
|
|
return `(
|
|
<>
|
|
<circle fill="white" cx="${status.cx}" cy="${status.cy}" r="${status.outerRadius}" />
|
|
<circle fill="black" cx="${cutoutCx}" cy="${cutoutCy}" r="${cutoutRadius}" />
|
|
</>
|
|
)`;
|
|
}
|
|
|
|
return generateMobilePhoneMask(status as MobileStatusGeometry);
|
|
}
|
|
|
|
function generateStatusDnd(size: number, isMobile: boolean = false): string {
|
|
const status = calculateStatusGeometry(size, isMobile);
|
|
|
|
if (!isMobile) {
|
|
const barWidth = Math.round(status.outerRadius * DESIGN_RULES.dnd.barWidthRatio);
|
|
const rawBarHeight = status.outerRadius * DESIGN_RULES.dnd.barHeightRatio;
|
|
const barHeight = Math.max(DESIGN_RULES.dnd.minBarHeight, Math.round(rawBarHeight));
|
|
const barX = status.cx - barWidth / 2;
|
|
const barY = status.cy - barHeight / 2;
|
|
const barRx = barHeight / 2;
|
|
|
|
return `(
|
|
<>
|
|
<circle fill="white" cx="${status.cx}" cy="${status.cy}" r="${status.outerRadius}" />
|
|
<rect fill="black" x="${barX}" y="${barY}" width="${barWidth}" height="${barHeight}" rx="${barRx}" ry="${barRx}" />
|
|
</>
|
|
)`;
|
|
}
|
|
|
|
return generateMobilePhoneMask(status as MobileStatusGeometry);
|
|
}
|
|
|
|
function generateStatusOffline(size: number): string {
|
|
const status = calculateStatusGeometry(size);
|
|
const innerRadius = Math.round(status.innerRadius * DESIGN_RULES.offline.innerRingRatio);
|
|
|
|
return `(
|
|
<>
|
|
<circle fill="white" cx="${status.cx}" cy="${status.cy}" r="${status.outerRadius}" />
|
|
<circle fill="black" cx="${status.cx}" cy="${status.cy}" r="${innerRadius}" />
|
|
</>
|
|
)`;
|
|
}
|
|
|
|
function generateStatusTyping(size: number): string {
|
|
const status = calculateStatusGeometry(size);
|
|
const typingWidth = Math.round(status.size * TYPING_WIDTH_MULTIPLIER);
|
|
const typingHeight = status.size;
|
|
const rx = status.outerRadius;
|
|
const typingExtension = Math.max(0, typingWidth - status.size);
|
|
const typingBridgeShift = typingExtension * TYPING_BRIDGE_RIGHT_SHIFT_RATIO;
|
|
const x = status.cx - typingWidth / 2 + typingBridgeShift;
|
|
const y = status.cy - typingHeight / 2;
|
|
|
|
return `<rect fill="white" x="${x}" y="${y}" width="${typingWidth}" height="${typingHeight}" rx="${rx}" ry="${rx}" />`;
|
|
}
|
|
|
|
const SIZES: Array<AvatarSize> = [16, 20, 24, 32, 36, 40, 44, 48, 56, 80, 120];
|
|
|
|
let output = `// @generated - DO NOT EDIT MANUALLY
|
|
// Run: pnpm generate:masks
|
|
|
|
type AvatarSize = ${SIZES.join(' | ')};
|
|
|
|
interface MaskDefinition {
|
|
viewBox: string;
|
|
content: React.ReactElement;
|
|
}
|
|
|
|
interface MaskSet {
|
|
avatarDefault: MaskDefinition;
|
|
avatarStatusRound: MaskDefinition;
|
|
avatarStatusTyping: MaskDefinition;
|
|
statusOnline: MaskDefinition;
|
|
statusOnlineMobile: MaskDefinition;
|
|
statusIdle: MaskDefinition;
|
|
statusIdleMobile: MaskDefinition;
|
|
statusDnd: MaskDefinition;
|
|
statusDndMobile: MaskDefinition;
|
|
statusOffline: MaskDefinition;
|
|
statusTyping: MaskDefinition;
|
|
}
|
|
|
|
export const AVATAR_MASKS: Record<AvatarSize, MaskSet> = {
|
|
`;
|
|
|
|
for (const size of SIZES) {
|
|
output += ` ${size}: {
|
|
avatarDefault: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateAvatarMaskDefault(size)},
|
|
},
|
|
avatarStatusRound: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateAvatarMaskStatusRound(size)},
|
|
},
|
|
avatarStatusTyping: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateAvatarMaskStatusTyping(size)},
|
|
},
|
|
statusOnline: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateStatusOnline(size, false)},
|
|
},
|
|
statusOnlineMobile: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateStatusOnline(size, true)},
|
|
},
|
|
statusIdle: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateStatusIdle(size, false)},
|
|
},
|
|
statusIdleMobile: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateStatusIdle(size, true)},
|
|
},
|
|
statusDnd: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateStatusDnd(size, false)},
|
|
},
|
|
statusDndMobile: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateStatusDnd(size, true)},
|
|
},
|
|
statusOffline: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateStatusOffline(size)},
|
|
},
|
|
statusTyping: {
|
|
viewBox: '0 0 ${size} ${size}',
|
|
content: ${generateStatusTyping(size)},
|
|
},
|
|
},
|
|
`;
|
|
}
|
|
|
|
output += `} as const;
|
|
|
|
export const SVGMasks = () => (
|
|
<svg
|
|
viewBox="0 0 1 1"
|
|
aria-hidden={true}
|
|
style={{
|
|
position: 'absolute',
|
|
pointerEvents: 'none',
|
|
top: '-1px',
|
|
left: '-1px',
|
|
width: 1,
|
|
height: 1,
|
|
}}
|
|
>
|
|
<defs>
|
|
`;
|
|
|
|
for (const size of SIZES) {
|
|
const status = calculateStatusGeometry(size, false);
|
|
const mobileStatus = calculateStatusGeometry(size, true) as MobileStatusGeometry;
|
|
|
|
const cx = status.cx / size;
|
|
const cy = status.cy / size;
|
|
const r = status.outerRadius / size;
|
|
|
|
const idleCutoutR = Math.round(status.outerRadius * DESIGN_RULES.idle.cutoutRadiusRatio) / size;
|
|
const idleCutoutOffset = Math.round(status.outerRadius * DESIGN_RULES.idle.cutoutOffsetRatio) / size;
|
|
const idleCutoutCx = cx - idleCutoutOffset;
|
|
const idleCutoutCy = cy - idleCutoutOffset;
|
|
|
|
const dndBarWidth = Math.round(status.outerRadius * DESIGN_RULES.dnd.barWidthRatio) / size;
|
|
const dndBarHeight =
|
|
Math.max(DESIGN_RULES.dnd.minBarHeight, Math.round(status.outerRadius * DESIGN_RULES.dnd.barHeightRatio)) / size;
|
|
const dndBarX = cx - dndBarWidth / 2;
|
|
const dndBarY = cy - dndBarHeight / 2;
|
|
const dndBarRx = dndBarHeight / 2;
|
|
|
|
const offlineInnerR = Math.round(status.innerRadius * DESIGN_RULES.offline.innerRingRatio) / size;
|
|
|
|
const typingWidthPx = Math.round(status.size * TYPING_WIDTH_MULTIPLIER);
|
|
const typingExtensionPx = Math.max(0, typingWidthPx - status.size);
|
|
const typingBridgeShift = (typingExtensionPx * TYPING_BRIDGE_RIGHT_SHIFT_RATIO) / size;
|
|
const typingWidth = typingWidthPx / size;
|
|
const typingHeight = status.size / size;
|
|
const typingX = cx - typingWidth / 2 + typingBridgeShift;
|
|
const typingY = cy - typingHeight / 2;
|
|
const typingRx = status.outerRadius / size;
|
|
|
|
const cutoutPhoneWidth = (mobileStatus.phoneWidth + mobileStatus.borderWidth * 2) / size;
|
|
const cutoutPhoneHeight = (mobileStatus.phoneHeight + mobileStatus.borderWidth * 2) / size;
|
|
const cutoutPhoneX = (mobileStatus.phoneX - mobileStatus.borderWidth) / size;
|
|
const cutoutPhoneY = (mobileStatus.phoneY - mobileStatus.borderWidth) / size;
|
|
const cutoutPhoneRx = (mobileStatus.phoneRx + mobileStatus.borderWidth) / size;
|
|
|
|
const displayExtraHeight = DESIGN_RULES.mobileDisplayExtraHeight;
|
|
const displayExtraWidthPerSide = DESIGN_RULES.mobileDisplayExtraWidthPerSide;
|
|
|
|
const screenWidthPx =
|
|
mobileStatus.phoneWidth * DESIGN_RULES.mobileScreenWidth +
|
|
displayExtraWidthPerSide * 2 -
|
|
MOBILE_SCREEN_WIDTH_TRIM_PX;
|
|
const screenHeightPx =
|
|
mobileStatus.phoneHeight * DESIGN_RULES.mobileScreenHeight + displayExtraHeight - MOBILE_SCREEN_HEIGHT_TRIM_PX;
|
|
const screenXpx = mobileStatus.phoneX + (mobileStatus.phoneWidth - screenWidthPx) / 2 + MOBILE_SCREEN_X_OFFSET_PX;
|
|
const screenYpx =
|
|
mobileStatus.phoneY +
|
|
mobileStatus.phoneHeight * DESIGN_RULES.mobileScreenY -
|
|
displayExtraHeight / 2 +
|
|
MOBILE_SCREEN_Y_OFFSET_PX;
|
|
|
|
const screenRxPx = Math.min(screenWidthPx, screenHeightPx) * 0.1;
|
|
|
|
const mobileScreenX = ((screenXpx - mobileStatus.phoneX) / mobileStatus.phoneWidth).toFixed(4);
|
|
const mobileScreenY = ((screenYpx - mobileStatus.phoneY) / mobileStatus.phoneHeight).toFixed(4);
|
|
const mobileScreenWidth = (screenWidthPx / mobileStatus.phoneWidth).toFixed(4);
|
|
const mobileScreenHeight = ((screenHeightPx / mobileStatus.phoneHeight) * DESIGN_RULES.mobileAspectRatio).toFixed(4);
|
|
const mobileScreenRx = (screenRxPx / mobileStatus.phoneWidth).toFixed(4);
|
|
const mobileScreenRy = ((screenRxPx / mobileStatus.phoneWidth) * DESIGN_RULES.mobileAspectRatio).toFixed(4);
|
|
|
|
output += ` <mask id="svg-mask-avatar-default-${size}" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="0.5" cy="0.5" r="0.5" />
|
|
</mask>
|
|
<mask id="svg-mask-avatar-status-round-${size}" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="0.5" cy="0.5" r="0.5" />
|
|
<circle fill="black" cx="${cx}" cy="${cy}" r="${r}" />
|
|
</mask>
|
|
<mask id="svg-mask-avatar-status-mobile-${size}" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="0.5" cy="0.5" r="0.5" />
|
|
<rect fill="black" x="${cutoutPhoneX}" y="${cutoutPhoneY}" width="${cutoutPhoneWidth}" height="${cutoutPhoneHeight}" rx="${cutoutPhoneRx}" ry="${cutoutPhoneRx}" />
|
|
</mask>
|
|
<mask id="svg-mask-avatar-status-typing-${size}" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="0.5" cy="0.5" r="0.5" />
|
|
<rect fill="black" x="${typingX}" y="${typingY}" width="${typingWidth}" height="${typingHeight}" rx="${typingRx}" ry="${typingRx}" />
|
|
</mask>
|
|
<mask id="svg-mask-status-online-${size}" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="${cx}" cy="${cy}" r="${r}" />
|
|
</mask>
|
|
<mask id="svg-mask-status-online-mobile-${size}" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<rect fill="white" x="0" y="0" width="1" height="1" rx="${DESIGN_RULES.mobileCornerRadius}" ry="${(DESIGN_RULES.mobileCornerRadius * DESIGN_RULES.mobileAspectRatio).toFixed(4)}" />
|
|
<rect fill="black" x="${mobileScreenX}" y="${mobileScreenY}" width="${mobileScreenWidth}" height="${mobileScreenHeight}" rx="${mobileScreenRx}" ry="${mobileScreenRy}" />
|
|
<ellipse fill="black" cx="0.5" cy="${DESIGN_RULES.mobileWheelY}" rx="${DESIGN_RULES.mobileWheelRadius}" ry="${(DESIGN_RULES.mobileWheelRadius * DESIGN_RULES.mobileAspectRatio).toFixed(4)}" />
|
|
</mask>
|
|
<mask id="svg-mask-status-idle-${size}" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="${cx}" cy="${cy}" r="${r}" />
|
|
<circle fill="black" cx="${idleCutoutCx}" cy="${idleCutoutCy}" r="${idleCutoutR}" />
|
|
</mask>
|
|
<mask id="svg-mask-status-dnd-${size}" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="${cx}" cy="${cy}" r="${r}" />
|
|
<rect fill="black" x="${dndBarX}" y="${dndBarY}" width="${dndBarWidth}" height="${dndBarHeight}" rx="${dndBarRx}" ry="${dndBarRx}" />
|
|
</mask>
|
|
<mask id="svg-mask-status-offline-${size}" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="${cx}" cy="${cy}" r="${r}" />
|
|
<circle fill="black" cx="${cx}" cy="${cy}" r="${offlineInnerR}" />
|
|
</mask>
|
|
<mask id="svg-mask-status-typing-${size}" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<rect fill="white" x="${typingX}" y="${typingY}" width="${typingWidth}" height="${typingHeight}" rx="${typingRx}" ry="${typingRx}" />
|
|
</mask>
|
|
|
|
`;
|
|
}
|
|
|
|
output += ` <mask id="svg-mask-status-online" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="0.5" cy="0.5" r="0.5" />
|
|
</mask>
|
|
<mask id="svg-mask-status-idle" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="0.5" cy="0.5" r="0.5" />
|
|
<circle fill="black" cx="0.25" cy="0.25" r="0.375" />
|
|
</mask>
|
|
<mask id="svg-mask-status-dnd" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="0.5" cy="0.5" r="0.5" />
|
|
<rect fill="black" x="0.125" y="0.375" width="0.75" height="0.25" rx="0.125" ry="0.125" />
|
|
</mask>
|
|
<mask id="svg-mask-status-offline" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="0.5" cy="0.5" r="0.5" />
|
|
<circle fill="black" cx="0.5" cy="0.5" r="0.25" />
|
|
</mask>
|
|
<mask id="svg-mask-status-typing" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<rect fill="white" x="0" y="0" width="1" height="1" rx="0.5" ry="0.5" />
|
|
</mask>
|
|
<mask id="svg-mask-status-online-mobile" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<rect fill="white" x="0" y="0" width="1" height="1" rx="${DESIGN_RULES.mobileCornerRadius}" ry="${(DESIGN_RULES.mobileCornerRadius * DESIGN_RULES.mobileAspectRatio).toFixed(2)}" />
|
|
<rect fill="black" x="${((1 - DESIGN_RULES.mobileScreenWidth) / 2).toFixed(4)}" y="${DESIGN_RULES.mobileScreenY}" width="${DESIGN_RULES.mobileScreenWidth}" height="${(DESIGN_RULES.mobileScreenHeight * DESIGN_RULES.mobileAspectRatio).toFixed(4)}" rx="0.04" ry="${(0.04 * DESIGN_RULES.mobileAspectRatio).toFixed(2)}" />
|
|
<ellipse fill="black" cx="0.5" cy="${DESIGN_RULES.mobileWheelY}" rx="${DESIGN_RULES.mobileWheelRadius}" ry="${(DESIGN_RULES.mobileWheelRadius * DESIGN_RULES.mobileAspectRatio).toFixed(3)}" />
|
|
</mask>
|
|
<mask id="svg-mask-avatar-default" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1">
|
|
<circle fill="white" cx="0.5" cy="0.5" r="0.5" />
|
|
</mask>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
`;
|
|
|
|
const outputPath = path.join(__dirname, '../src/components/uikit/SVGMasks.tsx');
|
|
fs.writeFileSync(outputPath, output);
|
|
|
|
console.log(`Generated ${outputPath}`);
|
|
|
|
const layoutOutput = `// @generated - DO NOT EDIT MANUALLY
|
|
// Run: pnpm generate:masks
|
|
|
|
export interface StatusGeometry {
|
|
size: number;
|
|
cx: number;
|
|
cy: number;
|
|
radius: number;
|
|
borderWidth: number;
|
|
isMobile?: boolean;
|
|
phoneWidth?: number;
|
|
phoneHeight?: number;
|
|
}
|
|
|
|
const STATUS_GEOMETRY: Record<number, StatusGeometry> = {
|
|
${SIZES.map((size) => {
|
|
const geom = calculateStatusGeometry(size, false);
|
|
return ` ${size}: {size: ${geom.size}, cx: ${geom.cx}, cy: ${geom.cy}, radius: ${geom.outerRadius}, borderWidth: ${geom.borderWidth}, isMobile: false}`;
|
|
}).join(',\n')},
|
|
};
|
|
|
|
const STATUS_GEOMETRY_MOBILE: Record<number, StatusGeometry> = {
|
|
${SIZES.map((size) => {
|
|
const geom = calculateStatusGeometry(size, true) as MobileStatusGeometry;
|
|
return ` ${size}: {size: ${geom.size}, cx: ${geom.cx}, cy: ${geom.cy}, radius: ${geom.outerRadius}, borderWidth: ${geom.borderWidth}, isMobile: true, phoneWidth: ${geom.phoneWidth}, phoneHeight: ${geom.phoneHeight}}`;
|
|
}).join(',\n')},
|
|
};
|
|
|
|
export function getStatusGeometry(avatarSize: number, isMobile: boolean = false): StatusGeometry {
|
|
const map = isMobile ? STATUS_GEOMETRY_MOBILE : STATUS_GEOMETRY;
|
|
|
|
if (map[avatarSize]) {
|
|
return map[avatarSize];
|
|
}
|
|
|
|
const closestSize = Object.keys(map)
|
|
.map(Number)
|
|
.reduce((prev, curr) => (Math.abs(curr - avatarSize) < Math.abs(prev - avatarSize) ? curr : prev));
|
|
|
|
return map[closestSize];
|
|
}
|
|
`;
|
|
|
|
const layoutPath = path.join(__dirname, '../src/components/uikit/AvatarStatusGeometry.ts');
|
|
fs.writeFileSync(layoutPath, layoutOutput);
|