Skip to content

Commit bede7d5

Browse files
spartan-vutrannguyenspartan-vutrannguyen
committed
add default font
1 parent 8309b6a commit bede7d5

File tree

8 files changed

+642
-230
lines changed

8 files changed

+642
-230
lines changed

‎apps/studio/electron/main/assets/fonts.ts

+490-138
Large diffs are not rendered by default.

‎apps/studio/electron/main/events/code.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
updateTailwindColorConfig,
1818
deleteTailwindColorGroup,
1919
} from '../assets/styles';
20-
import { addFont, removeFont, scanFonts } from '../assets/fonts';
20+
import { addFont, removeFont, scanFonts, setDefaultFont, getDefaultFont } from '../assets/fonts';
2121

2222
export function listenForCodeMessages() {
2323
ipcMain.handle(MainChannels.VIEW_SOURCE_CODE, (e: Electron.IpcMainInvokeEvent, args) => {
@@ -152,7 +152,6 @@ export function listenForCodeMessages() {
152152

153153
ipcMain.handle(MainChannels.SCAN_FONTS, async (_, args) => {
154154
const { projectRoot } = args;
155-
console.log('scanFonts in main', projectRoot);
156155

157156
return scanFonts(projectRoot);
158157
});
@@ -166,4 +165,14 @@ export function listenForCodeMessages() {
166165
const { projectRoot, font } = args;
167166
return removeFont(projectRoot, font);
168167
});
168+
169+
ipcMain.handle(MainChannels.SET_FONT, async (_, args) => {
170+
const { projectRoot, font } = args;
171+
return setDefaultFont(projectRoot, font);
172+
});
173+
174+
ipcMain.handle(MainChannels.GET_DEFAULT_FONT, async (_, args) => {
175+
const { projectRoot } = args;
176+
return getDefaultFont(projectRoot);
177+
});
169178
}

‎apps/studio/src/lib/editor/engine/font/index.ts

+41-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { makeAutoObservable } from 'mobx';
1+
import { get, makeAutoObservable } from 'mobx';
22
import type { EditorEngine } from '..';
33
import { invokeMainChannel } from '@/lib/utils';
44
import { fontFamilies, MainChannels } from '@onlook/models';
@@ -8,6 +8,7 @@ import type { Font } from '@onlook/models/assets';
88
export class FontManager {
99
private _fonts: Font[] = [];
1010
private _fontFamilies: Font[] = [];
11+
private _defaultFont: string | null = null;
1112

1213
constructor(
1314
private editorEngine: EditorEngine,
@@ -52,7 +53,7 @@ export class FontManager {
5253
font,
5354
});
5455

55-
this.scanFonts();
56+
await this.scanFonts();
5657
} catch (error) {
5758
console.error('Error adding font:', error);
5859
}
@@ -70,12 +71,45 @@ export class FontManager {
7071
font,
7172
});
7273

73-
this.scanFonts();
74+
await this.scanFonts();
7475
} catch (error) {
7576
console.error('Error removing font:', error);
7677
}
7778
}
7879

80+
async setDefaultFont(font: Font) {
81+
const projectRoot = this.projectsManager.project?.folderPath;
82+
if (!projectRoot) {
83+
return;
84+
}
85+
86+
try {
87+
await invokeMainChannel(MainChannels.SET_FONT, {
88+
projectRoot,
89+
font,
90+
});
91+
await this.getDefaultFont();
92+
} catch (error) {
93+
console.error('Error setting font:', error);
94+
}
95+
}
96+
97+
async getDefaultFont() {
98+
const projectRoot = this.projectsManager.project?.folderPath;
99+
if (!projectRoot) {
100+
return;
101+
}
102+
103+
try {
104+
const defaultFont = await invokeMainChannel(MainChannels.GET_DEFAULT_FONT, {
105+
projectRoot,
106+
});
107+
this._defaultFont = defaultFont as string;
108+
} catch (error) {
109+
console.error('Error getting current font:', error);
110+
}
111+
}
112+
79113
get fonts() {
80114
return this._fonts;
81115
}
@@ -84,6 +118,10 @@ export class FontManager {
84118
return this._fontFamilies;
85119
}
86120

121+
get defaultFont() {
122+
return this._defaultFont;
123+
}
124+
87125
dispose() {
88126
this._fonts = [];
89127
}

‎apps/studio/src/routes/editor/LayersPanel/BrandTab/FontPanel/FontFamily.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -21,33 +21,34 @@ const FontVariant = ({ name, isActive = false }: FontVariantProps) => (
2121
export interface FontFamilyProps {
2222
name: string;
2323
variants: string[];
24-
onRemoveFont: () => void;
24+
onRemoveFont?: () => void;
2525
onAddFont?: () => void;
26+
onSetFont?: () => void;
2627
isExpanded?: boolean; // Kept for API compatibility but not used for initial state
2728
isLast?: boolean;
2829
showDropdown?: boolean;
2930
showAddButton?: boolean; // New property to control Add button visibility
31+
isDefault?: boolean;
3032
}
3133

3234
export const FontFamily = ({
3335
name,
3436
variants = [],
3537
onAddFont,
3638
onRemoveFont,
39+
onSetFont,
3740
isExpanded = false, // This prop is kept for API compatibility but not used for initial state
3841
isLast = false,
3942
showDropdown = false,
4043
showAddButton = true, // Default to false
44+
isDefault = false,
4145
}: FontFamilyProps) => {
4246
// Always initialize to false, ensuring all font families start closed regardless of isExpanded prop
4347
const [expanded, setExpanded] = useState(false);
44-
// State to track if this font is set as default
45-
const [isDefault, setIsDefault] = useState(false);
4648

4749
// Toggle default font status
4850
const handleToggleDefault = () => {
49-
setIsDefault(!isDefault);
50-
// Here you would typically also update this in your global state or backend
51+
onSetFont?.();
5152
};
5253

5354
return (
@@ -97,7 +98,7 @@ export const FontFamily = ({
9798
</DropdownMenuCheckboxItem>
9899
<DropdownMenuItem
99100
className="flex items-center"
100-
onClick={() => onRemoveFont()}
101+
onClick={() => onRemoveFont?.()}
101102
>
102103
<Icons.Trash className="h-4 w-4 mr-2" />
103104
<span>Remove</span>

‎apps/studio/src/routes/editor/LayersPanel/BrandTab/FontPanel/SystemFont.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { useEditorEngine } from '@/components/Context';
2+
import { FontFamily } from './FontFamily';
3+
import { observer } from 'mobx-react-lite';
4+
import { FONT_VARIANTS } from '.';
5+
import { useEffect } from 'react';
6+
7+
const SystemFont = observer(() => {
8+
const editorEngine = useEditorEngine();
9+
const fontManager = editorEngine.font;
10+
11+
useEffect(() => {
12+
fontManager.scanFonts();
13+
fontManager.getDefaultFont();
14+
}, []);
15+
16+
return (
17+
<div className="flex flex-col divide-y divide-border">
18+
{fontManager.fonts.map((font, index) => (
19+
<div key={`system-${font.family}-${index}`}>
20+
<div className="flex justify-between items-center">
21+
<FontFamily
22+
name={font.family}
23+
variants={
24+
font.weight?.map(
25+
(weight) => FONT_VARIANTS.find((v) => v.value === weight)?.name,
26+
) as string[]
27+
}
28+
isLast={index === fontManager.fonts.length - 1}
29+
showDropdown={true}
30+
showAddButton={false}
31+
isDefault={font.id === fontManager.defaultFont}
32+
onRemoveFont={() => fontManager.removeFont(font)}
33+
onSetFont={() => fontManager.setDefaultFont(font)}
34+
/>
35+
</div>
36+
</div>
37+
))}
38+
</div>
39+
);
40+
});
41+
42+
export default SystemFont;

‎apps/studio/src/routes/editor/LayersPanel/BrandTab/FontPanel/index.tsx

+47-53
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,51 @@ import { useEffect, useRef, useState } from 'react';
66
import { FontFamily } from './FontFamily';
77
import UploadModal from './UploadModal';
88
import { useEditorEngine } from '@/components/Context';
9-
import type { Font } from '@onlook/models/assets';
109

1110
interface FontVariantProps {
1211
name: string;
1312
isActive?: boolean;
1413
}
1514

15+
export const FONT_VARIANTS = [
16+
{
17+
name: 'Thin',
18+
value: '100',
19+
},
20+
{
21+
name: 'Extra Light',
22+
value: '200',
23+
},
24+
{
25+
name: 'Light',
26+
value: '300',
27+
},
28+
{
29+
name: 'Regular',
30+
value: '400',
31+
},
32+
{
33+
name: 'Medium',
34+
value: '500',
35+
},
36+
{
37+
name: 'SemiBold',
38+
value: '600',
39+
},
40+
{
41+
name: 'Bold',
42+
value: '700',
43+
},
44+
{
45+
name: 'Extra Bold',
46+
value: '800',
47+
},
48+
{
49+
name: 'Black',
50+
value: '900',
51+
},
52+
];
53+
1654
const FontVariant = ({ name, isActive = false }: FontVariantProps) => (
1755
<div
1856
className={`py-2 text-sm ${isActive ? 'text-foreground font-semibold' : 'text-muted-foreground'}`}
@@ -33,13 +71,6 @@ const FontPanel = observer(({ onClose }: FontPanelProps) => {
3371
const editorEngine = useEditorEngine();
3472
const fontManager = editorEngine.font;
3573

36-
console.log(fontManager.fonts);
37-
console.log(fontManager.fontFamilies);
38-
39-
useEffect(() => {
40-
fontManager.scanFonts();
41-
}, []);
42-
4374
const handleClose = () => {
4475
if (onClose) {
4576
onClose();
@@ -64,46 +95,6 @@ const FontPanel = observer(({ onClose }: FontPanelProps) => {
6495
inputRef.current?.blur();
6596
}
6697
};
67-
68-
const variants = [
69-
{
70-
name: 'Thin',
71-
value: '100',
72-
},
73-
{
74-
name: 'Extra Light',
75-
value: '200',
76-
},
77-
{
78-
name: 'Light',
79-
value: '300',
80-
},
81-
{
82-
name: 'Regular',
83-
value: '400',
84-
},
85-
{
86-
name: 'Medium',
87-
value: '500',
88-
},
89-
{
90-
name: 'SemiBold',
91-
value: '600',
92-
},
93-
{
94-
name: 'Bold',
95-
value: '700',
96-
},
97-
{
98-
name: 'Extra Bold',
99-
value: '800',
100-
},
101-
{
102-
name: 'Black',
103-
value: '900',
104-
},
105-
];
106-
10798
// Filter only site fonts based on search query
10899
const filteredSiteFonts = fontManager.fontFamilies.filter(
109100
(font) =>
@@ -180,14 +171,17 @@ const FontPanel = observer(({ onClose }: FontPanelProps) => {
180171
variants={
181172
font.weight?.map(
182173
(weight) =>
183-
variants.find((v) => v.value === weight)
184-
?.name,
174+
FONT_VARIANTS.find(
175+
(v) => v.value === weight,
176+
)?.name,
185177
) as string[]
186178
}
187179
isLast={index === fontManager.fonts.length - 1}
188180
showDropdown={true}
189181
showAddButton={false}
182+
isDefault={font.id === fontManager.defaultFont}
190183
onRemoveFont={() => fontManager.removeFont(font)}
184+
onSetFont={() => fontManager.setDefaultFont(font)}
191185
/>
192186
</div>
193187
</div>
@@ -217,15 +211,15 @@ const FontPanel = observer(({ onClose }: FontPanelProps) => {
217211
variants={
218212
font.weight?.map(
219213
(weight) =>
220-
variants.find((v) => v.value === weight)
221-
?.name,
214+
FONT_VARIANTS.find(
215+
(v) => v.value === weight,
216+
)?.name,
222217
) as string[]
223218
}
224219
isLast={index === uniqueSiteFonts.length - 1}
225220
showDropdown={false}
226221
showAddButton={true}
227222
onAddFont={() => fontManager.addFont(font)}
228-
onRemoveFont={() => fontManager.removeFont(font)}
229223
/>
230224
</div>
231225
</div>

0 commit comments

Comments
 (0)