更好的选择overlay的交互

EaseCation · Dec 29, 2024 · c4651c2 · c4651c2
1 parent 4651c6f
commit c4651c2
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 13 deletions.
diff --git a/public/overlay-preview/glass.png b/public/overlay-preview/glass.png
diff --git a/public/overlay-preview/highlight-bottom.png b/public/overlay-preview/highlight-bottom.png
diff --git a/public/overlay-preview/highlight-top-bottom.png b/public/overlay-preview/highlight-top-bottom.png
diff --git a/public/overlay-preview/highlight-top.png b/public/overlay-preview/highlight-top.png
diff --git a/public/overlay-preview/inner-stroke.png b/public/overlay-preview/inner-stroke.png
diff --git a/public/overlay-preview/shine.png b/public/overlay-preview/shine.png
diff --git a/src/components/Text3D.tsx b/src/components/Text3D.tsx
@@ -150,7 +150,7 @@ const Text3D = forwardRef<THREE.Group, Text3DProps>(({
         const grp = new THREE.Group();
         grp.add(mainMesh);
         // overlayMesh，用于实现overlay的材质
-        if (opts.overlay) {
+        if (content.length > 0 && opts.overlay) {
             const overlayMesh = mainMesh.clone();
             overlayMesh.geometry = mainMesh.geometry.clone();
             if (overlayMaterial) overlayMesh.material = overlayMaterial;
@@ -162,7 +162,7 @@ const Text3D = forwardRef<THREE.Group, Text3DProps>(({
         grp.position.set(...position);
         grp.rotation.set(...rotation);
         return grp;
-    }, [mainMesh, opts.overlay, outlineMesh, overlayMaterial, position, rotation]);
+    }, [content.length, mainMesh, opts.overlay, outlineMesh, overlayMaterial, position, rotation]);
 
     return <>
         <primitive object={group} ref={ref} />

diff --git a/src/components/TextSettingsOverlayPanel.tsx b/src/components/TextSettingsOverlayPanel.tsx
@@ -14,23 +14,33 @@ const TextSettingsOverlayPanel: React.FC<TextSettingsOverlayPanelProps> = (props
 
     return (
         <Card size={'small'}>
-            <Flex gap={'small'} vertical>
+            <Flex gap={'small'} wrap>
                 <Button
                     block
                     type={overlay === undefined ? 'primary' : undefined}
                     ghost={overlay === undefined}
+                    style={{
+                        height: 'auto'
+                    }}
                     onClick={() => setOverlay(undefined)}
                 >
                     {gLang('overlay.none')}
                 </Button>
                 {builtinOverlayRenderers.map((info) => (
                     <Button
-                        block
                         type={overlay && overlay.name === info.name ? 'primary' : undefined}
                         ghost={overlay && overlay.name === info.name}
                         onClick={() => setOverlay(info)}
+                        style={{
+                            height: 'auto',
+                            minWidth: '120px',
+                            flex: '1 1 auto'
+                        }}
                     >
-                        {gLang(info.name)}
+                        <Flex gap={'small'} vertical>
+                            <img src={info.preview} alt={info.name} height={32} width="auto" style={{ marginTop: 8, marginBottom: 0 }} />
+                            {gLang(info.name)}
+                        </Flex>
                     </Button>
                 ))}
             </Flex>

diff --git a/src/components/ThreeCanvas.tsx b/src/components/ThreeCanvas.tsx
@@ -250,6 +250,7 @@ const ThreeCanvas = forwardRef<ThreeCanvasHandle, ThreeCanvasProps>((props, ref)
             resetCamera: () => {
                 orbitRef.current?.reset();
                 camera.position.set(0, -20, 50);
+                //camera.position.set(0, 0, 50);
                 camera.lookAt(0, 0, 0);
                 camera.updateProjectionMatrix();
             },

diff --git a/src/language.tsx b/src/language.tsx
@@ -94,9 +94,9 @@ export const languageConfig: Readonly<LanguageConfig> = {
         overlay: {
             title: "叠加效果",
             none: "无",
-            highlightButtom: "底部高亮",
+            highlightBottom: "底部高亮",
             highlightTop: "顶部高亮",
-            highlightTopButtom: "上下高亮",
+            highlightTopBottom: "上下高亮",
             highlightInnerStroke: "内描边",
             highlightShine: "光泽",
             highlightGlass: "玻璃(温和)"
@@ -182,9 +182,9 @@ export const languageConfig: Readonly<LanguageConfig> = {
         overlay: {
             title: "Overlay Effect",
             none: "None",
-            highlightButtom: "Highlight Buttom",
+            highlightBottom: "Highlight Buttom",
             highlightTop: "Highlight Top",
-            highlightTopButtom: "Highlight Top Buttom",
+            highlightTopBottom: "Highlight Top Buttom",
             highlightInnerStroke: "Inner Stroke",
             highlightShine: "Shine",
             highlightGlass: "Glass (Tempered)"
@@ -270,9 +270,9 @@ export const languageConfig: Readonly<LanguageConfig> = {
         overlay: {
             title: "オーバーレイ効果",
             none: "なし",
-            highlightButtom: "下部ハイライト",
+            highlightBottom: "下部ハイライト",
             highlightTop: "上部ハイライト",
-            highlightTopButtom: "上部下部ハイライト",
+            highlightTopBottom: "上部下部ハイライト",
             highlightInnerStroke: "内部ストローク",
             highlightShine: "輝き",
             highlightGlass: "ガラス（強化）"

diff --git a/src/utils/overlay.ts b/src/utils/overlay.ts
@@ -140,32 +140,39 @@ export const overlayRendererShine: OverlayRenderer = (ctx, _, width, height) =>
 export interface OverlayRendererInfo {
     name: string;
     renderer: OverlayRenderer;
+    preview: string;
 };
 
 export const builtinOverlayRenderers: OverlayRendererInfo[] = [
     {
         name: "overlay.highlightTop",
         renderer: overlayRendererHighlightUp,
+        preview: "/overlay-preview/highlight-top.png",
     },
     {
-        name: "overlay.highlightButtom",
+        name: "overlay.highlightBottom",
         renderer: overlayRendererHighlightDown,
+        preview: "/overlay-preview/highlight-bottom.png",
     },
     {
-        name: "overlay.highlightTopButtom",
+        name: "overlay.highlightTopBottom",
         renderer: overlayRendererHighlightUpDown,
+        preview: "/overlay-preview/highlight-top-bottom.png",
     },
     {
         name: "overlay.highlightInnerStroke",
         renderer: overlayRendererInnerStroke,
+        preview: "/overlay-preview/inner-stroke.png",
     },
     {
         name: "overlay.highlightShine",
         renderer: overlayRendererShine,
+        preview: "/overlay-preview/shine.png",
     },
     {
         name: "overlay.highlightGlass",
         renderer: overlayRendererGlass,
+        preview: "/overlay-preview/glass.png",
     }
 ];