feat: optimize starInnerScale input (close #185)

F-star · Oct 14, 2024 · b866845 · b866845
1 parent 0f422a7
commit b866845
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 16 deletions.
diff --git a/packages/core/src/graphics/star.ts b/packages/core/src/graphics/star.ts
@@ -166,9 +166,9 @@ export class SuikaStar extends SuikaGraphics<StarAttrs> {
         label: 'T',
         key: 'starInnerScale',
         value: this.attrs.starInnerScale,
-        min: 0.0010000000474974513,
+        min: 0.001,
         max: 1,
-        uiType: 'number',
+        uiType: 'percent',
       },
     ];
   }

diff --git a/packages/suika/src/components/Cards/ElementsInfoCard/ElementsInfoCard.tsx b/packages/suika/src/components/Cards/ElementsInfoCard/ElementsInfoCard.tsx
@@ -8,6 +8,7 @@ import { useIntl } from 'react-intl';
 
 import { EditorContext } from '../../../context';
 import NumberInput from '../../input/NumberInput';
+import { PercentInput } from '../../input/PercentInput';
 import { BaseCard } from '../BaseCard';
 
 /**
@@ -41,7 +42,6 @@ export const ElementsInfoCards: FC = () => {
         for (const el of items) {
           const attrs = el.getInfoPanelAttrs();
           for (const attr of attrs) {
-            attr.value = remainDecimal(attr.value, 2);
             const label = attr.label;
             if (!map.has(label)) {
               map.set(label, attr);
@@ -156,15 +156,28 @@ const NumAttrInput: FC<{
   value: string | number;
   onBlur: (newValue: number) => void;
   suffixValue?: string;
+  uiType: string;
 }> = (props) => {
-  return (
-    <NumberInput
-      prefix={<span className="suika-info-attrs-label">{props.label}</span>}
-      value={props.value}
-      min={props.min}
-      max={props.max}
-      onBlur={props.onBlur}
-      suffixValue={props.suffixValue}
-    />
-  );
+  if (props.uiType === 'percent') {
+    return (
+      <PercentInput
+        prefix={<span className="suika-info-attrs-label">{props.label}</span>}
+        value={props.value}
+        min={props.min}
+        max={props.max}
+        onBlur={props.onBlur}
+      />
+    );
+  } else {
+    return (
+      <NumberInput
+        prefix={<span className="suika-info-attrs-label">{props.label}</span>}
+        value={props.value}
+        min={props.min}
+        max={props.max}
+        onBlur={props.onBlur}
+        suffixValue={props.suffixValue}
+      />
+    );
+  }
 };
diff --git a/packages/suika/src/components/Cards/LayerInfoCard/LayerInfoCard.tsx b/packages/suika/src/components/Cards/LayerInfoCard/LayerInfoCard.tsx
@@ -59,7 +59,12 @@ export const LayerInfoCard: FC = () => {
   return (
     <BaseCard title={intl.formatMessage({ id: 'layer' })}>
       <div className="suika-layer-info-card">
-        <PercentInput value={opacity} onBlur={recordOpacityChange} />
+        <PercentInput
+          value={opacity}
+          min={0}
+          max={1}
+          onBlur={recordOpacityChange}
+        />
       </div>
     </BaseCard>
   );

diff --git a/packages/suika/src/components/input/PercentInput.tsx b/packages/suika/src/components/input/PercentInput.tsx
@@ -3,7 +3,10 @@ import { type FC } from 'react';
 import NumberInput from './NumberInput';
 
 interface Props {
+  prefix?: React.ReactNode;
   value: string | number;
+  min?: number;
+  max?: number;
   onBlur: (value: number) => void;
 }
 
@@ -14,13 +17,17 @@ export const PercentInput: FC<Props> = (props) => {
       : props.value;
   const onBlur = (value: number) => props.onBlur(value / 100);
 
+  const min = props.min === undefined ? undefined : props.min * 100;
+  const max = props.max === undefined ? undefined : props.max * 100;
+
   return (
     <NumberInput
       value={value}
-      min={0}
-      max={100}
+      min={min}
+      max={max}
       suffixValue="%"
       onBlur={onBlur}
+      prefix={props.prefix}
     />
   );
 };