Support show font item name and search font item.

cweijan · May 6, 2024 · 474fcbc · 474fcbc
1 parent 2759af2
commit 474fcbc
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/src/react/view/fontViewer/FontViewer.tsx b/src/react/view/fontViewer/FontViewer.tsx
@@ -1,4 +1,4 @@
-import { Card, Flex } from 'antd'
+import { Card, Flex, Input } from 'antd'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useWindowSize } from '../../util/reactUtils'
 import { handler } from '../../util/vscode'
@@ -10,6 +10,7 @@ import { FontInfo, formatUnicode, loadFont, renderGlyphItem } from './fontViewer
  */
 export default function FontViewer() {
     const [font, setFont] = useState(null)
+    const [search, setSearch] = useState(null)
     const fontInfoRef = useRef<FontInfo>(null)
     const [glyph, setGlyph] = useState(null)
     const [_, height] = useWindowSize();
@@ -23,32 +24,43 @@ export default function FontViewer() {
     }, [])
 
     const icons = useMemo(() => (
-        font ? Object.keys(font.glyphs.glyphs).map((i) => (
-            <canvas width="60p" height="70" key={i}
-                className="item" id={`g${i}`}
-                onClick={() => { setGlyph(font.glyphs.glyphs[i]) }}
-            ></canvas>
-        )) : null
-    ), [font])
+        font ? Object.keys(font.glyphs.glyphs)
+            .filter(i => {
+                if (!search) return true
+                const glyph = font.glyphs.glyphs[i]
+                return glyph.name.match(new RegExp(search, 'i'))
+            })
+            .map((i) => (
+                <canvas width="100" height="84" key={i}
+                    className="item" id={`g${i}`}
+                    onClick={() => { setGlyph(font.glyphs.glyphs[i]) }}
+                ></canvas>
+            )) : null
+    ), [font, search])
 
     useEffect(() => {
         if (!font) return;
         for (const key of Object.keys(font.glyphs.glyphs)) {
-            renderGlyphItem(fontInfoRef.current, document.getElementById(`g${key}`), key);
+            const ele = document.getElementById(`g${key}`);
+            if (!ele) continue;
+            renderGlyphItem(fontInfoRef.current, document.getElementById(`g${key}`) as HTMLCanvasElement, key);
         }
     }, [icons])
 
     return (
         <Flex>
             {/* 图标 */}
-            <div style={{ background: '#FFF', overflow: 'auto', height }}>
+            <div style={{ background: '#FFF', overflow: 'auto', height, flexGrow: 1 }}>
                 <div id="glyph-list-end" >
                     {icons}
                 </div>
             </div>
             {/* 字体信息 */}
             <Flex style={{ width: '280px', background: '#f0f2f5', flexShrink: 0, paddingTop: '20px', flexDirection: 'column', justifyContent: 'space-between' }}>
                 <div style={{ padding: '0 10px' }}>
+                    <Card title="Search" style={{ marginBottom: 15 }}>
+                        <Input placeholder="Name" size="middle" allowClear onChange={e => setSearch(e.target.value)} />
+                    </Card>
                     <Card title="Font" style={{ marginBottom: 15 }}>
                         <div className='info-card'>
                             {

diff --git a/src/react/view/fontViewer/fontViewerMain.ts b/src/react/view/fontViewer/fontViewerMain.ts
@@ -21,7 +21,7 @@ async function loadFontAsBuffer(uri: string): Promise<ArrayBuffer> {
     return fontBuffer;
 }
 
-const cellWidth = 60, cellHeight = 70;
+const cellWidth = 100, cellHeight = 84;
 
 export async function loadFont(uri: string): Promise<FontInfo> {
     const font = opentype.parse(await loadFontAsBuffer(uri))
@@ -40,20 +40,25 @@ export async function loadFont(uri: string): Promise<FontInfo> {
     }
 }
 
-export function renderGlyphItem(fontInfo: FontInfo, canvas, glyphIndex) {
+function limitLength(text: string, length: number = 11) {
+    if (text.length > length) return text.slice(0, length) + '...';
+    return text;
+}
+
+export function renderGlyphItem(fontInfo: FontInfo, canvas: HTMLCanvasElement, glyphIndex) {
     const { font, fontScale, fontSize, fontBaseline } = fontInfo;
     const ctx = canvas.getContext('2d');
     ctx.clearRect(0, 0, cellWidth, cellHeight);
     if (glyphIndex >= font.numGlyphs) return;
-    ctx.fillStyle = '#AAA';
-    ctx.font = '9px "Open Sans"';
-    ctx.fillText(glyphIndex, 2, cellHeight - 2);
     const glyph = font.glyphs.glyphs[glyphIndex],
         glyphWidth = glyph.advanceWidth * fontScale,
-        xmin = (cellWidth - glyphWidth) / 2,
-        x0 = xmin;
+        xCenter = (cellWidth - glyphWidth) / 2;
+    ctx.font = '14px Arial';
+    ctx.fillStyle = '#242424';
+    ctx.textAlign = 'center'; 
+    ctx.fillText(limitLength(glyph.name), cellWidth/2, cellHeight - 10);
     ctx.fillStyle = '#FFFFFF';
-    const path = glyph.getPath(x0, fontBaseline, fontSize);
+    const path = glyph.getPath(xCenter, fontBaseline-10, fontSize);
     path.fill = "#333";
     path.draw(ctx);
 }