add inspector class

src/Main.ts

@@ -44,10 +44,16 @@ export class Main {
 		this.app.canvas.style.background = "#000";
 		this.app.width = 400;
 		this.app.height = 400;
-		this.app.canvas.style.width = "100%";
+		//this.app.canvas.style.width = "100%";
 		//this.app.canvas.width = document.body.clientWidth;
 		//this.app.canvas.height = document.body.clientHeight;
 
+		var parent = this.app.canvas.parentElement;
+		parent.style.display = "flex";
+		//parent.style.height = "100%";
+		parent.style.justifyContent = "center";
+		parent.style.alignItems = "center";
+
 		this.app.renderer.on("resize", () => {
 			//this.app.canvas.width = document.body.clientWidth;
 			//this.app.canvas.height = document.body.clientHeight;
@@ -674,36 +680,29 @@ export class Main {
 		console.log(v3.magnitude);
 		*/
 
-		var items = [];
-		var createItems = (items, child) => {
-			var item = {
-				text: child.name,
-				children: []
-			};
-			child.children.forEach((i) => {
-				createItems(item.children, i);
-			});
-			items.push(item);
-		};
-		for (var i = scene.children.length - 1; i >= 0; i--) {
-			var child = scene.children[i];
-			createItems(items, child);
-			/*
-			var item = {
-				text: child.name,
-				children: []
-			}
-			items.push({
-				text: child.name
-			});
-			*/
-		}
 
 		//var listView = editor.panes.left.getComponent() as Tea.Editor.ListView;
 		//listView.items = items;
 
 		editor.menu.$on("select", (item) => {
 			console.log("menu select", item.text);
+			if (item.text === "Delete") {
+				if (treeView.selectedItem == null) {
+					return;
+				}
+				var name = treeView.selectedItem.text;
+				var object3d = scene.findChildByName(name);
+				console.log(object3d);
+				object3d.destroy();
+				this.updateObjectList(scene, treeView);
+				return;
+			}
+			if (item.text === "Add Cube") {
+				var cube = Tea.Object3D.createPrimitive(this.app, Tea.PrimitiveType.Cube);
+				scene.addChild(cube);
+				this.updateObjectList(scene, treeView);
+				return;
+			}
 		});
 		/*
 		editor.layout.add("Label");
@@ -720,50 +719,57 @@ export class Main {
 		var treeView = editor.panels.left.$children[0] as TreeView;
 		treeView.$on("menu", (e) => {
 			editor.menu.items = [
-				{ text: "test1" },
+				{ text: "Delete" },
 				{ text: "-" },
-				{ text: "test2" },
+				{ text: "Add Cube" },
 				{ text: "test3" },
 				{ text: "test4" }
 			]
 			editor.menu.move(e.clientX, e.clientY);
 			editor.menu.show();
 		});
-		treeView.items = items;
-		/*
-		treeView.items = [
-			{
-				text: "test",
-				children: [
-					{
-						text: "test 2",
-						children: [
-							{
-								text: "test 3",
-							}
-						]
-					},
-					{ text: "test 3"}
-				]
-			}, {
-				text: "test 2"
-			}, {
-				text: "test 3",
-				children: [
-					{
-						text: "test 2",
-					}
-				]
-			}
-		];
-		*/
+		this.updateObjectList(scene, treeView);
+
+		type Inspector = Tea.Editor.Inspector;
+		var inspector = editor.panels.right.$children[0] as Inspector;
 		treeView.$on("select", () => {
-			console.log("select", treeView.selectedItem);
+			if (treeView.selectedItem == null) {
+				return;
+			}
+			console.log("select", treeView.selectedItem.text);
+			var name = treeView.selectedItem.text;
+			var object3d = scene.findChildByName(name);
+			//console.log(object3d);
+			inspector.name = object3d.name;
+			inspector.position = object3d.localPosition.clone();
+			inspector.rotation = object3d.localEulerAngles.clone();
+			inspector.scale = object3d.localScale.clone();
 		});
-		treeView.$nextTick(() => {
-			console.log(treeView.childCount);
-			treeView.expandAll();
-		})
+	}
+
+	updateObjectList(scene: Tea.Scene, treeView: Tea.Editor.TreeView): void {
+		setTimeout(() => {
+			var items = [];
+			var createItems = (items, child) => {
+				var item = {
+					text: child.name,
+					children: []
+				};
+				child.children.forEach((i) => {
+					createItems(item.children, i);
+				});
+				items.push(item);
+			};
+			for (var i = scene.children.length - 1; i >= 0; i--) {
+				var child = scene.children[i];
+				createItems(items, child);
+			}
+			treeView.items = items;
+			//treeView.$forceUpdate();
+			treeView.$nextTick(() => {
+				treeView.expandAll();
+			})
+		}, 32);
 	}
 }
 

src/tea/editor/Editor.ts

@@ -3,20 +3,24 @@ import Component from "vue-class-component";
 import { Button } from "./Button";
 import { ContextMenu } from "./ContextMenu";
 import { HLayout } from "./HLayout";
+import { Inspector } from "./Inspector";
 import { Label } from "./Label";
 import { ListView } from "./ListView";
 import { Panel } from "./Panel";
 import { TreeView } from "./TreeView";
+import { Vector3 } from "./Vector3";
 import { VLayout } from "./VLayout";
 
 //*
 Vue.component("Button", Button);
 Vue.component("ContextMenu", ContextMenu);
 Vue.component("HLayout", HLayout);
+Vue.component("Inspector", Inspector);
 Vue.component("Label", Label);
 Vue.component("ListView", ListView);
 Vue.component("Panel", Panel);
 Vue.component("TreeView", TreeView);
+Vue.component("Vector3", Vector3);
 Vue.component("VLayout", VLayout);
 //*/
 
@@ -33,10 +37,12 @@ Vue.component("VLayout", VLayout);
 					<TreeView></TreeView>
 				</Panel>
 				<Panel ref="main" class="MainPanel">
-					<canvas id="canvas"></canvas>
+					<div>
+						<canvas id="canvas"></canvas>
+					</div>
 				</Panel>
-				<Panel class="RightPanel">
-					<TreeView ref="right"></TreeView>
+				<Panel ref="right" class="RightPanel">
+					<Inspector></Inspector>
 				</Panel>
 			</HLayout>
 			<ContextMenu ref="menu"></ContextMenu>
@@ -94,6 +100,8 @@ var  _ContextMenu = ContextMenu;
 type _ContextMenu = ContextMenu;
 var  _HLayout = HLayout;
 type _HLayout = HLayout;
+var  _Inspector = Inspector;
+type _Inspector = Inspector;
 var  _Label = Label;
 type _Label = Label;
 var  _ListView = ListView;
@@ -102,6 +110,8 @@ var  _Panel = Panel;
 type _Panel = Panel;
 var  _TreeView = TreeView;
 type _TreeView = TreeView;
+var  _Vector3 = Vector3;
+type _Vector3 = Vector3;
 var  _VLayout = VLayout;
 type _VLayout = VLayout;
 
@@ -115,13 +125,23 @@ export module Editor {
 			var $refs = this.editor.$refs;
 			return $refs.left as Panel;
 		}
+		get main(): Panel {
+			var $refs = this.editor.$refs;
+			return $refs.main as Panel;
+		}
+		get right(): Panel {
+			var $refs = this.editor.$refs;
+			return $refs.right as Panel;
+		}
 	}
 	export var  Button = _Button;
 	export type Button = _Button;
 	export var  ContextMenu = _ContextMenu;
 	export type ContextMenu = _ContextMenu;
 	export var  HLayout = _HLayout;
 	export type HLayout = _HLayout;
+	export var  Inspector = _Inspector;
+	export type Inspector = _Inspector;
 	export var  Label = _Label;
 	export type Label = _Label;
 	export var  ListView = _ListView;
@@ -130,6 +150,8 @@ export module Editor {
 	export type Panel = _Panel;
 	export var  TreeView = _TreeView;
 	export type TreeView = _TreeView;
+	export var  Vector3 = _Vector3;
+	export type Vector3 = _Vector3;
 	export var  VLayout = _VLayout;
 	export type VLayout = _VLayout;
 }

src/tea/editor/Inspector.ts

@@ -0,0 +1,27 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import * as Tea from "../Tea";
+
+@Component({
+	template: `
+		<div
+			class="Inspector">
+			<div>{{ name }}</div>
+			<Vector3 text="Position" :value="position"></Vector3>
+			<Vector3 text="Rotation" :value="rotation"></Vector3>
+			<Vector3 text="Scale" :value="scale"></Vector3>
+		</div>
+	`,
+	data: () => { return {
+		name: "",
+		position: null,
+		rotation: null,
+		scale: null
+	}}
+})
+export class Inspector extends Vue {
+	name: string;
+	position: Tea.Vector3;
+	rotation: Tea.Vector3;
+	scale: Tea.Vector3;
+}

src/tea/editor/TreeView.ts

@@ -54,6 +54,10 @@ export class Item extends Vue {
 	title: string;
 	tag: any;
 
+	get text(): string {
+		return this.model.text;
+	}
+
 	get isFolder(): boolean {
 		return this.model.children &&
 			this.model.children.length;

src/tea/editor/Vector3.ts

@@ -0,0 +1,65 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import * as Tea from "../Tea";
+
+@Component({
+	template: `
+		<div class="Vector3">
+			<template v-if="value">
+				<div class="title">{{ text }}</div>
+				<div class="value">
+					X <input type="text" size="1" :value="x"></input>
+					Y <input type="text" size="1" :value="y"></input>
+					Z <input type="text" size="1" :value="z"></input>
+				</div>
+			</template>
+		</div>
+	`,
+	props: {
+		text: String,
+		value: Array
+	},
+	data: () => {
+		return {
+			//text: "",
+			//value: null
+		}
+	}
+})
+export class Vector3 extends Vue {
+	text: string;
+	value: Tea.Vector3;
+
+	get x(): string {
+		if (this.value == null) {
+			return "";
+		}
+		return this.toText(this.value[0]);
+	}
+
+	get y(): string {
+		if (this.value == null) {
+			return "";
+		}
+		return this.toText(this.value[1]);
+	}
+
+	get z(): string {
+		if (this.value == null) {
+			return "";
+		}
+		return this.toText(this.value[2]);
+	}
+
+	protected toText(value: number): string {
+		var text = value.toFixed(5).replace(/\.0+$/, "");
+		if (text.indexOf(".") < 0) {
+			if (text == "-0") {
+				return "0";
+			}
+			return text;
+		}
+		text = text.replace(/0+$/, "");
+		return text;
+	}
+}

src/tea/editor/css/Vector3.scss

@@ -0,0 +1,28 @@
+#{$parent} {
+	div.Vector3 {
+		position: relative;
+		width: 100%;
+		line-height: 1.5;
+		white-space: nowrap;
+		overflow: hidden;
+
+		.title {
+			display: inline-block;
+			width: 30%;
+		}
+
+		.value {
+			display: inline-block;
+			position: absolute;
+			right: 0;
+			width: 70%;
+			text-align: right;
+		}
+
+		input {
+			min-width: 3.5em;
+			width: auto;
+			height: 1em;
+		}
+	}
+}