支持画线命令..demo

src/Add-on/DrawLine.ts

@@ -0,0 +1,18 @@
+import { Command } from '../Editor/CommandMachine';
+import { app } from '../ApplicationServices/Application';
+import { commandStore } from '../UI/Store/CommandStore';
+import * as THREE from 'three';
+import { Line } from '../DatabaseServices/Entity';
+export class DrawLine implements Command
+{
+    async exec()
+    {
+        commandStore.Prompt("请输入一个点:");
+        var p1 = await app.m_Editor.GetPoint();
+        commandStore.Prompt("请输入点2:");
+        var p2 = await app.m_Editor.GetPoint({ BasePoint: p1 });
+
+        let line = new Line(p1, p2);
+        app.m_Database.appendEntity(line);
+    }
+}

src/Common/InputState.ts

@@ -1,7 +1,14 @@
+import * as THREE from 'three';
+import { Vector3 } from 'three';
 export enum InputState
 {
     None = 0,
     Select = 1,
     GetPoint = 2,
     Entsel = 4,
+}
+export interface GetPointPrompt
+{
+    Msg?: string
+    BasePoint?: Vector3
 }

src/DatabaseServices/Database.ts

@@ -1,8 +1,9 @@
 
 import * as THREE from 'three'
 import { Viewer } from "../GraphicsSystem/Viewer";
-import { Entity } from "./Entity";
+import { Entity } from './Entity';
 import { ed } from '../ApplicationServices/Application';
+import * as _ from "lodash";
 export enum SceneType
 {
     Wireframe = 0
@@ -22,10 +23,16 @@ export class Database
     //添加图元到数据对象    
     appendEntity(ent: Entity)
     {
+        ent.m_Db = this;
         this.m_EntityCollection.push(ent);
         this.m_Scene.add(ent.m_ThreeObj);
         ed.UpdateScreen()
     }
+    removeEntity(ent: Entity)
+    {
+        this.m_Scene.remove(ent.m_ThreeObj);
+        _.remove(this.m_EntityCollection, ent);
+    }
     getScene(type: SceneType): THREE.Scene
     {
         //TODO: 返回指定类型的场景

src/DatabaseServices/Entity.ts

@@ -1,15 +1,22 @@
 import * as THREE from "three"
 import { OBB } from '../Geometry/OBB/obb';
+import { Database } from './Database';
 var baseColor = 0x333333;
 var foundColor = 0x12C0E3;
 var intersectColor = 0x00D66B;
 
 export class Entity
 {
+    m_Db: Database;
     m_ThreeObj: THREE.Object3D;
 
     m_Size: THREE.Vector3 = new THREE.Vector3();
 
+    Erase()
+    {
+        this.m_Db.removeEntity(this);
+    }
+
     GetBox(): THREE.Box3
     {
         let box = new THREE.Box3();
@@ -80,8 +87,8 @@ export class Line extends Curve
         this.m_EndPoint.copy(endPt);
 
         var geometry = new THREE.Geometry();
-        geometry.vertices.push(startPt);
+        geometry.vertices.push(this.m_StartPoint);
-        geometry.vertices.push(endPt);
+        geometry.vertices.push(this.m_EndPoint);
         //create a blue LineBasicMaterial
         var material = new THREE.LineBasicMaterial();
         this.m_ThreeObj = new THREE.Line(geometry, material);

src/Editor/CommandMachine.ts

@@ -1,7 +1,17 @@
-
+export interface Command
+{
+    exec: Function;
+}
 
 //命令状态机.
 export class CommandMachine
 {
-
+    //命令表
+    m_CommandList: Map<string, Command> = new Map<string, Command>();
+    async execCommand(cmdName: string)
+    {
+        if (this.m_CommandList.has(cmdName)) {
+            await this.m_CommandList.get(cmdName).exec();
+        }
+    }
 }

src/Editor/Editor.ts

@@ -1,22 +1,27 @@
 //用户交互编辑工具
 
 import * as THREE from "three";
-import { Entity, Solid3d } from '../DatabaseServices/Entity';
+import { Entity, Solid3d, Line } from '../DatabaseServices/Entity';
 import { CoordinateSystem } from '../Geometry/CoordinateSystem';
 import { OBB } from '../Geometry/OBB/obb';
 import { Viewer } from '../GraphicsSystem/Viewer';
 import { SelectMarquee } from '../UI/JsPlugin/SelectMarquee';
 import { ApplicationService, app, db } from '../ApplicationServices/Application';
-import { InputState } from '../Common/InputState';
+import { InputState, GetPointPrompt } from '../Common/InputState';
 import { MouseControls } from './MouseControls';
 import { SelectControls } from './SelectControls';
+import * as xaop from 'xaop';
+import { CommandMachine } from './CommandMachine';
+import { end } from 'xaop';
+import { Vector3 } from 'three';
 //TODO: 增加鼠标状态. 鼠标位置.
 export class Editor
 {
     m_MouseCtrl: MouseControls
     m_SelectCtrl: SelectControls
     m_App: ApplicationService;
-    m_InputState: InputState
+    m_InputState: InputState = InputState.None;
+    m_CommandMachine: CommandMachine;
     private m_SelectList: Array<Entity> = [];
 
     constructor(app: ApplicationService)
@@ -24,10 +29,37 @@ export class Editor
         this.m_App = app;
         this.m_MouseCtrl = new MouseControls(app.m_Viewer)
         this.m_SelectCtrl = new SelectControls(null, this)
+        this.m_CommandMachine = new CommandMachine();
     }
-    GetPoint(callback: (pt: THREE.Vector3) => any)
+    GetPoint(prompt?: GetPointPrompt): Promise<Vector3>
     {
+        this.m_InputState = InputState.GetPoint;
+        let res = new Promise<Vector3>((resolve, reject) =>
+        {
+            let line: Line, removeDrag;
+            if (prompt) {
+                line = new Line(prompt.BasePoint, prompt.BasePoint);
+                app.m_Database.appendEntity(line);
+                removeDrag = xaop.end(this.m_MouseCtrl, this.m_MouseCtrl.onMouseMove, () =>
+                {
+                    line.setEndPoint(this.m_MouseCtrl.m_CurMousePointWCS);
+                    this.UpdateScreen();
+                })
+            }
+            let remove = xaop.end(this.m_MouseCtrl, this.m_MouseCtrl.onMouseDown, () =>
+            {
+                resolve(this.m_MouseCtrl.m_CurMousePointWCS);
+                console.log('this.m_MouseCtrl.m_CurMousePointWCS: ', this.m_MouseCtrl.m_CurMousePointWCS);
 
+                this.m_InputState = InputState.None;
+                remove();
+                if (prompt) {
+                    removeDrag();
+                    line.Erase();
+                }
+            });
+        })
+        return res;
     }
 
     Snap(

src/Editor/MouseControls.ts

@@ -31,8 +31,10 @@ export class MouseControls
     updateWordPoint = (e: MouseEvent) =>
     {
         this.m_CurMousePointVCS.set(e.clientX, e.clientY, 0)
-        this.m_CurMousePointWCS.copy(this.m_CurMousePointVCS);
+        this.m_CurMousePointWCS.set(e.offsetX, e.offsetY, 0)
+        console.log('this.m_CurMousePointVCS: ', this.m_CurMousePointVCS);
         this.m_View.ScreenToWorld(this.m_CurMousePointWCS);
+        // console.log('m_CurMousePointWCS: ', this.m_CurMousePointWCS);
         //变换和求交点
         let plan = new PlaneExt(new Vector3(0, 0, 1));
         let rs = new Vector3();

src/Editor/SelectControls.ts

@@ -23,18 +23,21 @@ export class SelectControls
     {
         if (e.button === MouseKey.Left)
         {
-            let mouseData = this.m_Editor.m_MouseCtrl;
+            if (this.m_Editor.m_InputState <= 1)
-            this.m_SelectIng = !this.m_SelectIng;
-            if (this.m_SelectIng)
             {
-                let pt = mouseData.m_CurMousePointVCS;
+                let mouseData = this.m_Editor.m_MouseCtrl;
-                this.m_SelectCss.SetStart(pt.x, pt.y)
+                this.m_SelectIng = !this.m_SelectIng;
-                this.m_SelectCss.SetEnd(pt.x, pt.y)
+                if (this.m_SelectIng)
-                this.m_SelectCss.Show()
+                {
-            }
+                    let pt = mouseData.m_CurMousePointVCS;
-            else
+                    this.m_SelectCss.SetStart(pt.x, pt.y)
-            {
+                    this.m_SelectCss.SetEnd(pt.x, pt.y)
-                this.m_SelectCss.Hide()
+                    this.m_SelectCss.Show()
+                }
+                else
+                {
+                    this.m_SelectCss.Hide()
+                }
             }
         }
     }

src/UI/Store/CommandStore.ts

@@ -1,4 +1,5 @@
 import { observable, runInAction, autorun } from 'mobx';
+import { app } from '../../ApplicationServices/Application';
 
 export interface CommandMsg
 {
@@ -67,6 +68,7 @@ export class CommandStore
             case 32:
                 if (inpValue != "")
                 {
+                    app.m_Editor.m_CommandMachine.execCommand(inpValue);
                     this.Prompt(inpValue)
                     this.elInput.value = ""
                 }
@@ -91,8 +93,6 @@ function IsChar(keyCode: number)
 {
     return keyCode >= 65 && keyCode <= 90
 }
-
-
 export var commandStore = new CommandStore()
 
 //个数永远补大于n.

src/index.tsx

@@ -12,6 +12,7 @@ import { Provider } from "mobx-react";
 import { ApplicationService, app } from './ApplicationServices/Application';
 import { DownPanel } from './UI/Components/Panel';
 import { DownPanelStore } from './UI/Store/DownPanelStore';
+import { DrawLine } from './Add-on/DrawLine';
 function createRootElement()
 {
     var root = document.createElement('div');
@@ -47,6 +48,8 @@ function renderDownPanel()
 function initApp()
 {
     new ApplicationService();
+
+    app.m_Editor.m_CommandMachine.m_CommandList.set("line", new DrawLine())
 }
 
 window.onload = function ()