!111 实现动态输入框相对坐标系输入.

Merge pull request !111 from ChenX/DynInput_Relative

src/Add-on/DrawRec.ts

@@ -10,7 +10,7 @@ export class DrawRect implements Command
 {
     async exec()
     {
-        let ptRes = await app.m_Editor.GetPoint();
+        let ptRes = await app.m_Editor.GetPoint({ Msg: "指定第一个角点:" });
         if (ptRes.Status != PromptStatus.OK)
             return;
 
@@ -41,7 +41,9 @@ export class DrawRect implements Command
         }
 
         ptRes = await app.m_Editor.GetPoint({
-            Callback: (p) => updateRect(p, p1)
+            Msg: "指定另一个角点:",
+            Callback: (p) => updateRect(p, p1),
+            RelativeBasePoint: p1
         });
 
         if (ptRes.Status === PromptStatus.OK)

src/Common/InputState.ts

@@ -42,6 +42,8 @@ export interface GetPointPrompt extends GetAnyPrompt
 {
     //基点
     BasePoint?: Vector3;
+    //相对坐标参考基点
+    RelativeBasePoint?: Vector3;
     //当鼠标移动时,回调该函数.
     Callback?: (pt: Vector3) => void;
     //绘制橡皮筋(必须指定基点)

src/Editor/GetPointServices.ts

@@ -80,17 +80,24 @@ export class GetPointServices implements EditorService
         this.returnStatus(v);
     }
 
-
     private curPoint: Vector3;
+    private curPointIsSnap = false;
+    private lastPoint: Vector3;
     //更新当前点事件,统一使用该方法注入其他服务的更新(aop在此方法中注入)
     UpdateCurPointEvent()
     {
         let wcs = app.m_Editor.m_MouseCtrl.m_CurMousePointWCS;
         let snapP = this.snapServices.GetSnapPoint(wcs);
         if (snapP)
+        {
             this.curPoint = snapP;
+            this.curPointIsSnap = true;
+        }
         else
+        {
             this.curPoint = wcs;
+            this.curPointIsSnap = false;
+        }
     }
 
     //初始化更新当前点的事件
@@ -196,6 +203,12 @@ export class GetPointServices implements EditorService
                 this._return(inputData);
                 return;
             }
+
+            let relative = inputData[0] === "@";
+            if (relative)
+            {
+                inputData = inputData.substr(1);
+            }
             //或者用户输入了一个点
             let strList = inputData.split(",");
             if (strList.length >= 2)
@@ -214,6 +227,10 @@ export class GetPointServices implements EditorService
                     vlist.push(0);
                     let p = new THREE.Vector3();
                     p.fromArray(vlist);
+
+                    if (relative)
+                        this.UpdatePointOfRelative(p, prompt);
+
                     this._return(p);
                 }
                 else if (vlist.length === 1)
@@ -299,10 +316,24 @@ export class GetPointServices implements EditorService
             }
             let p = dynPrompt.Value;
             if (p)
+            {
+                if (dynPrompt instanceof GetPointPromptBlock && dynPrompt.Relative)
+                    this.UpdatePointOfRelative(p, prompt);
                 this._return(p);
+            }
         }));
     }
 
+    private UpdatePointOfRelative(p: Vector3, prompt: GetPointPrompt)
+    {
+        if (prompt.RelativeBasePoint)
+            p.add(prompt.RelativeBasePoint);
+        else if (this.curPointIsSnap || !this.lastPoint)
+            p.add(this.curPoint);
+        else if (this.lastPoint)
+            p.add(this.lastPoint);
+    }
+
     //调用promis的回调.
     protected _return(v: THREE.Vector3 | string)
     {
@@ -311,6 +342,8 @@ export class GetPointServices implements EditorService
         {
             retValue.Status = PromptStatus.OK;
             retValue.Value = v;
+
+            this.lastPoint = v;
         }
         else
         {

src/UI/Components/commandLineInput/InputHint.tsx

@@ -304,6 +304,9 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
                         onKeyDown={(e) =>
                         {
                             if (e.ctrlKey || e.altKey) e.preventDefault();
+
+                            if (e.keyCode === KeyBoard.Comma)
+                                e.stopPropagation();
                         }}
                     />
                     <ul

src/UI/DynamicPrompt/DynamicInputBase.ts

@@ -17,6 +17,8 @@ export class DynamicInput
     //包装自身的容器.
     container: HTMLElement;
     UpdateWidth: Function;
+    //shift按键已经被按下
+    isShiftDown = false;
     constructor(container: HTMLElement)
     {
         this.container = document.createElement("div");
@@ -36,6 +38,11 @@ export class DynamicInput
         this.inputEl.style.minWidth = "15px";
         this.inputEl.addEventListener("input", () => { this.OnInput() });
         this.inputEl.addEventListener("keydown", e => { this.OnInputKeyDown(e) });
+        this.inputEl.addEventListener("keyup", e =>
+        {
+            if (e.keyCode === KeyBoard.Shift)
+                this.isShiftDown = false;
+        });
         this.inputEl.addEventListener("change", () => { this.Lock = true; });
         this.inputEl.style.border = "3px solid transparent";
         this.container.appendChild(this.inputEl);
@@ -78,6 +85,7 @@ export class DynamicInput
             case KeyBoard.Space:
             case KeyBoard.Enter:
             case KeyBoard.Tab:
+            case KeyBoard.Comma:
                 e.preventDefault();
                 return;
             case KeyBoard.Alt:
@@ -85,6 +93,20 @@ export class DynamicInput
                 e.preventDefault();
                 e.stopPropagation();
                 return;
+
+            //shift + 2 =>@ 切换成相对模式
+            case KeyBoard.Shift:
+                this.isShiftDown = true;
+                e.stopPropagation();
+                break;
+            case KeyBoard.Digit2:
+                if (this.isShiftDown)
+                {
+                    e.preventDefault();
+                    this.OnToggleRelativeEvent();
+                }
+                e.stopPropagation();
+                break;
             default:
                 e.stopPropagation();
                 break;
@@ -118,6 +140,8 @@ export class DynamicInput
         this.inputEl.style.backgroundColor = '#999';
         DynamicInputManage.GetManage().IsInputing = false;
 
+        this.isShiftDown = false;
+
         //当用户输入一样的数值时,不会触发Change事件,如果没触发,那么就没有hasLock.
         if (this.inputEl.selectionEnd - this.inputEl.selectionStart === 0)
             return;
@@ -142,4 +166,8 @@ export class DynamicInput
     {
         this.container.remove();
     }
+    //响应用户想切换相对模式的事件.
+    OnToggleRelativeEvent()
+    {
+    }
 }

src/UI/DynamicPrompt/DynamicInputManage.ts

@@ -109,7 +109,7 @@ export class DynamicInputManage
     //注册事件
     private RegisterEvent()
     {
-        document.addEventListener("keydown", (e) => { this.HandleDynamicInput(e) })
+        window.addEventListener("keydown", (e) => { this.HandleDynamicInput(e) })
     }
     //操作输入框，切换及确认
     private HandleDynamicInput = (e: KeyboardEvent) =>
@@ -130,6 +130,7 @@ export class DynamicInputManage
                     // dyn.Focus();
                 }
                 break;
+            case KeyBoard.Comma:
             case KeyBoard.Tab:
                 e.preventDefault();
                 e.stopPropagation();

src/UI/DynamicPrompt/GetPointPromptBlock.ts

@@ -1,7 +1,7 @@
 import { Vector3 } from 'three';
-
+import { end } from 'xaop';
 import { app } from '../../ApplicationServices/Application';
-import { midPoint, polar, midPtCir } from '../../Geometry/GeUtils';
+import { midPoint, midPtCir, polar } from '../../Geometry/GeUtils';
 import { AngleDynamicInput } from './AngleDynamicInput';
 import { DynamicInputManage } from './DynamicInputManage';
 import { PromptBlock } from './PromptBlock';
@@ -15,16 +15,42 @@ import { RealDynamicInput } from './RealDynamicInput';
  */
 export class GetPointPromptBlock extends PromptBlock
 {
-
     private pointValueDynInput: RealDynamicInput[] = [];
+    private relativeSpan: HTMLSpanElement;
+
+    //注册的注入函数
+    private regFunctions: Function[] = [];
     constructor(dynamicInputManage: DynamicInputManage)
     {
         super(dynamicInputManage);
+        //相对输入模式下显示的`@`
+        this.relativeSpan = document.createElement("span");
+        this.relativeSpan.innerText = "@";
+        this.relativeSpan.style.cssText = `
+            display:none;
+            background:#999;
+            color:#000;
+            border:3px solid transparent;`
+
+        this.promptContainer.appendChild(this.relativeSpan);
+
         this.pointValueDynInput.push(
             new RealDynamicInput(this.promptContainer),
             new RealDynamicInput(this.promptContainer),
             new RealDynamicInput(this.promptContainer)
-        )
+        );
+
+        //注入用户想切换成相对输入的事件.
+        this.pointValueDynInput.forEach(dyn =>
+        {
+            this.regFunctions.push(
+                end(dyn, dyn.OnToggleRelativeEvent, () =>
+                {
+                    this.Relative = !this.Relative;
+                })
+            )
+        })
+
         this.pointValueDynInput.forEach(o =>
         {
             this.AddDynamicInput(o);
@@ -33,6 +59,16 @@ export class GetPointPromptBlock extends PromptBlock
         dynamicInputManage.FocusIndex = 0;
     }
 
+    //设置相对坐标模式
+    set Relative(b)
+    {
+        this.relativeSpan.style.display = b ? "inline-block" : "none";
+    }
+    get Relative()
+    {
+        return this.relativeSpan.style.display === "inline-block";
+    }
+
     set Value(v: Vector3)
     {
         if (this.dynamicInputManage.IsInputing) return;
@@ -46,6 +82,14 @@ export class GetPointPromptBlock extends PromptBlock
         if (!arr.some(n => isNaN(n)))
             return new Vector3().fromArray(arr);
     }
+
+    Destroy()
+    {
+        super.Destroy();
+
+        this.regFunctions.forEach(f => f());
+        this.regFunctions.length = 0;
+    }
 }