diff --git a/Doc/ui.md b/Doc/ui.md index 9e0196e42..f6f69d881 100644 --- a/Doc/ui.md +++ b/Doc/ui.md @@ -21,4 +21,8 @@ UI/Layout/Layout.ts定义了绘图界面和命令行的容器,使用户可以拽 2.容器大小变化事件. 目前使用 库来检测大小.也可以通过注册容器的"resize"事件来检测. #使用css-element-queries 监测容器大小变化 -说明:在操作Layout容器时,遇到了监听容器大小变化的问题,于是找到该库. \ No newline at end of file +说明:在操作Layout容器时,遇到了监听容器大小变化的问题,于是找到该库. + + +#禁止页面选中 +document.onselectstart = () => false \ No newline at end of file diff --git a/src/UI/Components/Command.tsx b/src/UI/Components/Command.tsx index 12fec0ce5..6ad82733e 100644 --- a/src/UI/Components/Command.tsx +++ b/src/UI/Components/Command.tsx @@ -1,14 +1,31 @@ import * as React from "React"; - -export class CommandComponent extends React.Component<{}, null> +import { observer } from "mobx-react"; +import { CommandStore, commandStore } from '../Store/CommandStore'; +import { autorun } from 'mobx'; +import * as ReactDOM from "react-dom"; +@observer +export class CommandComponent extends React.Component<{ commandStore: CommandStore }, null> { + outputEl: HTMLElement + commandListEl: HTMLElement + inputEl: HTMLInputElement + constructor() + { + super() + + } + componentDidUpdate() + { + this.outputEl.scrollTop = this.commandListEl.offsetHeight; + } render() { return ( -
-
+
{ this.outputEl = o }} + >
-
+
{ this.commandListEl = o }} + > + { + this.props.commandStore.commands.map(c => +
{c}
+ ) + } +
{ this.inputEl = o }} + placeholder="(请输入命令:)" + onKeyDown={this.inputKeyDown} />
); } + + inputKeyDown = (e: React.KeyboardEvent) => + { + console.log(this.inputEl); + console.log(this.inputEl.value === ""); + switch (e.keyCode) + { + case 13: + case 32: + this.props.commandStore.commands.push(this.inputEl.value) + this.inputEl.value = "" + break; + case 27: + this.inputEl.value = "" + this.props.commandStore.commands.push("取消.") + default: + break; + } + console.log(e.keyCode); + } } \ No newline at end of file diff --git a/src/UI/Store/CommandStore.ts b/src/UI/Store/CommandStore.ts new file mode 100644 index 000000000..715dad0ce --- /dev/null +++ b/src/UI/Store/CommandStore.ts @@ -0,0 +1,38 @@ +import { observable, runInAction, autorun } from 'mobx'; +export class CommandStore +{ + @observable commands = ["测试第一条命令!"]; + @observable scrollTop: number = 0; +} + + +export var commandStore = new CommandStore() +autorun(() => +{ + if (commandStore.commands.length > 10) + { + commandStore.commands.splice(0, 5); + } +}) + + +// import * as THREE from 'three'; + // static setMouseCoord(p: THREE.Vector3): void + // { + // let norm = new THREE.Vector3(0, 0, 1); + // let plan = new THREE.Plane(norm); + // // plan.setFromNormalAndCoplanarPoint + + // // let p2 = p.clone().add(app.m_Viewer.m_Direction.clone().multiplyScalar(1000)); + // let p2; + // let p3 = plan.intersectLine(new THREE.Line3(p, p2)); + // if (p3) + // { + // let strarr = []; + // p3.toArray().forEach(o => + // { + // strarr.push(o.toFixed(3)); + // }) + // document.getElementById("MouseCoordinates").innerText = strarr.join(",") + // } + // } \ No newline at end of file diff --git a/src/UI/UIManage.ts b/src/UI/UIManage.ts deleted file mode 100644 index 6d89f6d8c..000000000 --- a/src/UI/UIManage.ts +++ /dev/null @@ -1,25 +0,0 @@ -import * as THREE from 'three'; -import { Line } from '../DatabaseServices/Entity'; -export class UiManage -{ - - static setMouseCoord(p: THREE.Vector3): void - { - let norm = new THREE.Vector3(0, 0, 1); - let plan = new THREE.Plane(norm); - // plan.setFromNormalAndCoplanarPoint - - // let p2 = p.clone().add(app.m_Viewer.m_Direction.clone().multiplyScalar(1000)); - let p2; - let p3 = plan.intersectLine(new THREE.Line3(p, p2)); - if (p3) - { - let strarr = []; - p3.toArray().forEach(o => - { - strarr.push(o.toFixed(3)); - }) - document.getElementById("MouseCoordinates").innerText = strarr.join(",") - } - } -} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 6971ecc84..f449e95b3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,6 +6,8 @@ import "./UI/Css/style.less" import { LoadLayoutNotHead } from './UI/Layout/Layout'; import { CommandComponent } from "./UI/Components/Command"; import { App } from './UI/App'; +import { commandStore } from './UI/Store/CommandStore'; +import { autorun } from 'mobx'; function createRootElement() { @@ -19,22 +21,17 @@ function renderCommand() { let commandEl = document.getElementById("commandContainer") ReactDOM.render( - - , + , commandEl ) } - window.onload = function () { createRootElement(); - document.onselectstart = () => - { - return false; - } + LoadLayoutNotHead(); renderCommand(); }; - +window["tt"] = commandStore; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index cb6105860..cb3880eb2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,8 @@ "jquery" ], "module": "commonjs", - "jsx": "react" + "jsx": "react", + "experimentalDecorators": true }, "include": [ "./src/**/*",