!2202 优化：旋转角度表达式支持输入字符串

src/Common/Utils.ts

@@ -146,7 +146,6 @@ export function FixedNotZero(v: number | string, fractionDigits: number = 0)
  * To fixed
  * @param v
  * @param [fractionDigits]
- * @returns
  */
 export function ToFixed(v: number, fractionDigits: number = 5)
 {

src/UI/Components/RightPanel/TemplateParam.less

@@ -78,6 +78,29 @@
         .rotateExpress {
             display        : flex;
             justify-content: space-around;
+
+            .rotateStringInput{
+                display: flex;
+                align-items: center;
+
+                .rotateControlVertical{
+                    display: flex;
+                    flex-direction: column;
+
+                    button{
+                        min-width: 20px;
+                        min-height: 15px;
+                        width: 20px;
+                        height: 15px;
+                        padding: 0;
+                    }
+
+                    span{
+                        cursor: pointer;
+                        color: #5c7080;
+                    }
+                }
+            }
         }
 
         .bp3-numeric-input {

src/UI/Components/RightPanel/TemplateParamPanel.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox, Classes, ContextMenu, H5, Intent, ITreeNode, Menu, MenuItem, NumericInput, Tree } from "@blueprintjs/core";
+import { Button, Checkbox, Classes, ContextMenu, H5, Icon, Intent, ITreeNode, Menu, MenuItem, Tree } from "@blueprintjs/core";
 import { action } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
@@ -9,7 +9,7 @@ import { arrayRemoveOnce } from "../../../Common/ArrayExt";
 import { EBoardKeyList } from "../../../Common/BoardKeyList";
 import { CheckExpr, safeEval } from "../../../Common/eval";
 import { KeyBoard } from "../../../Common/KeyEnum";
-import { FixedNotZero, isNum } from "../../../Common/Utils";
+import { FixedNotZero, isNum, ToFixed } from "../../../Common/Utils";
 import { Board } from "../../../DatabaseServices/Entity/Board";
 import { Entity } from "../../../DatabaseServices/Entity/Entity";
 import { PositioningClampSpace } from "../../../DatabaseServices/Template/Positioning/PositioningClampSpace";
@@ -599,6 +599,44 @@ export class TemplateParamDetail extends React.Component<{}> {
         </ul>;
     }
 
+    //将旋转角度转换为字符串,并且将角度限制在0-360之间
+    private HandleRotateValue(rotateValue: string | number): string
+    {
+        let rotate = 0;
+        if (typeof rotateValue === "number")
+            rotate = rotateValue;
+        else
+        {
+            let value = safeEval(rotateValue);
+            if (!isNaN(value))
+                rotate = value;
+        }
+
+        rotate = rotate % 360;
+        if (rotate < 0) rotate += 360;
+
+        return ToFixed(rotate, 2);
+    }
+
+    //旋转角度增加90°或减少90°
+    private async ButtonClickHandleRotateValue(par: ITemplateParam, mode: "up" | "down")
+    {
+        let rotate = mode === "up" ? + 90 : -90;
+        if (typeof par.expr === "string")
+        {
+            const exprArray = par.expr.match(/(\-|\+)?\d+(\.\d+)?$/g);//筛选数字
+            if (!par.expr)
+                par.expr = this.HandleRotateValue(par.value as number + rotate);//输入框为空直接计算
+            else if (exprArray && exprArray.length > 0)//过滤表达式对数字计算，最后替换数字
+                par.expr = par.expr.replace(exprArray[0], `+${this.HandleRotateValue(safeEval(exprArray[0]) + rotate)}`);
+            else
+                par.expr += `+${this.HandleRotateValue(rotate)}`;//有表达式但无数字增加数字
+        }
+        else par.expr += rotate;
+
+        await this.ApplyParamExpr();
+    }
+
     private RenderPositionRotateionParams()
     {
         return <>
@@ -630,7 +668,7 @@ export class TemplateParamDetail extends React.Component<{}> {
                                         {
                                             par.expr = e.target.value;
                                         }}
-                                        onBlur={(e) => { this.ChangeInputUIClass(par); }}
+                                        onBlur={() => { this.ChangeInputUIClass(par); }}
                                     />
                                 </div>
                             );
@@ -655,43 +693,29 @@ export class TemplateParamDetail extends React.Component<{}> {
                                 <div key={index}>
                                     <div>
                                         <label style={{ margin: "0 5px" }} onKeyDown={e => e.stopPropagation()}>{par.name[1]}: </label>
-                                        <span>{par.value}</span>
+                                        <span>{this.HandleRotateValue(par.value)}</span>
                                     </div>
-                                    <NumericInput
-                                        min={-360}
-                                        max={360}
-                                        stepSize={90}
-                                        majorStepSize={90}
-                                        onKeyDown={(e) => { this.onKeydown(e, par); }}
-                                        className={Classes.INPUT}
-                                        value={inputValue}
-                                        selectAllOnFocus={true}
-                                        onValueChange={(valueAsNumber: number, valueAsString: string) =>
-                                        {
-                                            if (valueAsString === "360" || valueAsString === "-360") valueAsString = "0";
-                                            par.expr = valueAsString;
-                                        }}
-                                        onButtonClick={async (valueAsNumber: number, valueAsString: string) =>
-                                        {
-                                            if (inputValue === "")
+                                    <div className="rotateStringInput">
+                                        <input
+                                            onKeyDown={(e) => { this.onKeydown(e, par); }}
+                                            className={par.isValidExpr ? Classes.INPUT : `${Classes.INPUT} ${Classes.INTENT_DANGER}`}
+                                            value={inputValue}
+                                            onFocus={e => e.target.setSelectionRange(0, e.target.value.length)}
+                                            onChange={e =>
                                             {
-                                                par.expr = (par.value as number) + Math.sign(valueAsNumber) * 90;
-                                                if (par.expr <= -360)
-                                                    par.expr += 360;
-                                                else if (par.expr >= 360)
-                                                    par.expr -= 360;
-                                            }
-                                            else
-                                            {
-                                                //现在不会触发这里了
-                                                //点击后,会触发OnValueChange,此时避免js执行机制问题,下面直接设置变量值
-                                                if (valueAsString === "360" || valueAsString === "-360") valueAsString = "0";
-                                                par.expr = valueAsString;
-                                            }
-                                            await this.ApplyParamExpr();
-                                        }}
-                                        onBlur={(e) => { this.ChangeInputUIClass(par); }}
-                                    />
+                                                par.expr = e.target.value;
+                                            }}
+                                            onBlur={() => { this.ChangeInputUIClass(par); }}
+                                        />
+                                        <div className="rotateControlVertical">
+                                            <Button onClick={async () => this.ButtonClickHandleRotateValue(par, "up")}>
+                                                <Icon icon="chevron-up"></Icon>
+                                            </Button>
+                                            <Button onClick={async () => this.ButtonClickHandleRotateValue(par, "down")}>
+                                                <Icon icon="chevron-down"></Icon>
+                                            </Button>
+                                        </div>
+                                    </div>
                                 </div>
                             );
                         }