Skip to content

Commit

Permalink
fix some ui problems
Browse files Browse the repository at this point in the history
  • Loading branch information
@hikipuro
hikipuro committed Oct 6, 2018
1 parent 485b6bf commit faec8fa
Show file tree
Hide file tree
Showing 15 changed files with 384 additions and 107 deletions.
27 changes: 19 additions & 8 deletions src/Main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ export class Main {
//console.log(Tea.Screen.fullscreen);

editor = Editor.instance;
editor.panes.left.component = "TreeView";
editor.panes.main.content = `<canvas id="canvas"></canvas>`;
editor.nextTick(() => {
//editor.panes.left.component = "TreeView";
//editor.panes.main.content = `<canvas id="canvas"></canvas>`;
editor.$nextTick(() => {
this.init();
});
}
Expand All @@ -45,12 +45,12 @@ export class Main {
this.app.width = 400;
this.app.height = 400;
this.app.canvas.style.width = "100%";
this.app.canvas.width = document.body.clientWidth;
this.app.canvas.height = document.body.clientHeight;
//this.app.canvas.width = document.body.clientWidth;
//this.app.canvas.height = document.body.clientHeight;

this.app.renderer.on("resize", () => {
this.app.canvas.width = document.body.clientWidth;
this.app.canvas.height = document.body.clientHeight;
//this.app.canvas.width = document.body.clientWidth;
//this.app.canvas.height = document.body.clientHeight;
});

//console.log("aspectRatio", this.app.aspectRatio);
Expand Down Expand Up @@ -705,8 +705,19 @@ export class Main {
editor.menu.$on("select", (item) => {
console.log("menu select", item.text);
});
/*
editor.layout.add("Label");
editor.layout.add("Label");
editor.layout.add("Label");
editor.layout.$nextTick(() => {
//editor.layout.panel(0).width = "100px";
console.log("editor.layout", editor.layout.panelCount);
editor.layout.panel(0).padding = "10px";
//editor.layout.panel(0).paddingBottom = "10px";
});
*/
type TreeView = Tea.Editor.TreeView;
var treeView = editor.panes.left.getComponent() as TreeView;
var treeView = editor.panels.left.$children[0] as TreeView;
treeView.$on("menu", (e) => {
editor.menu.items = [
{ text: "test1" },
Expand Down
80 changes: 52 additions & 28 deletions src/tea/editor/ContextMenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,31 +53,33 @@ export class Item extends Vue {
}, 50);
setTimeout(() => {
this.isSelectedAfter = false;
}, 100);
setTimeout(() => {
this.$emit("select", this);
}, 150);
}, 100);
}
}

@Component({
template: `
<div
class="ContextMenu"
:style="{
left: x + 'px',
top: y + 'px',
display: isVisible ? 'block' : 'none'
}">
<item
v-for="(model, index) in items"
:key="index"
:model="model"
:depth="0"
@beforeSelect="onBeforeSelect"
@select="onSelect">
</item>
</div>
<transition
name="fadeout"
@after-leave="onFadeoutComplete">
<div
class="ContextMenu"
v-if="isVisible"
:style="{
left: x + 'px',
top: y + 'px'
}">
<item
v-for="(model, index) in items"
:key="index"
:model="model"
:depth="0"
@beforeSelect="onBeforeSelect"
@select="onSelect">
</item>
</div>
</transition>
`,
data: () => { return {
x: 0,
Expand All @@ -97,28 +99,47 @@ export class ContextMenu extends Vue {
protected _isSelectStart: boolean = false;

move(x: number, y: number): void {
if (this._isSelectStart) {
return;
}
this.x = x;
this.y = y;
}

show(): void {
if (this._isSelectStart) {
return;
}
this.isVisible = true;
this.$nextTick(() => {
var screenWidth = document.body.clientWidth;
var screenHeight = document.body.clientHeight;
var width = this.$el.clientWidth;
var height = this.$el.clientHeight;
var xMax = this.x + width;
var yMax = this.y + height;
if (xMax > screenWidth) {
this.x = screenWidth - width;
}
if (yMax > screenHeight) {
this.y = screenHeight - height;
}
});
}

hide(): void {
if (this._isSelectStart) {
return;
}
this.isVisible = false;
}

protected onClick(): void {
console.log("onClick", this);
}

protected onBeforeSelect(item: Item): void {
if (this._isSelectStart) {
return;
}
this._isSelectStart = true;
this.forEachChildren((i) => {
this.forEachChild((i) => {
if (i == item) {
return;
}
Expand All @@ -130,15 +151,18 @@ export class ContextMenu extends Vue {
if (this._isSelectStart === false) {
return;
}
this.hide();
this._isSelectStart = false;
this.forEachChildren((item) => {
this.forEachChild((item) => {
item.isUnselected = false;
});
this.isVisible = false;
this.$emit("select", item);
}

protected forEachChildren(callback: (item: Item) => void) {
protected onFadeoutComplete(): void {
this._isSelectStart = false;
}

protected forEachChild(callback: (item: Item) => void) {
var forEach = (item: Item) => {
callback(item);
item.$children.forEach((item: Item) => {
Expand Down
69 changes: 44 additions & 25 deletions src/tea/editor/Editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,43 @@ import Vue from "vue";
import Component from "vue-class-component";
import { Button } from "./Button";
import { ContextMenu } from "./ContextMenu";
import { HLayout } from "./HLayout";
import { Label } from "./Label";
import { ListView } from "./ListView";
import { Pane } from "./Pane";
import { Panel } from "./Panel";
import { TreeView } from "./TreeView";
import { VLayout } from "./VLayout";

//*
Vue.component("Button", Button);
Vue.component("ContextMenu", ContextMenu);
Vue.component("HLayout", HLayout);
Vue.component("Label", Label);
Vue.component("ListView", ListView);
Vue.component("Pane", Pane);
Vue.component("Panel", Panel);
Vue.component("TreeView", TreeView);
Vue.component("VLayout", VLayout);
//*/

@Component({
template: `
<div
id="editor"
@mousedown="onMouseDown">
<Pane ref="left" class="LeftPane"></Pane>
<Pane ref="main" class="MainPane"></Pane>
<HLayout
:style="{
height: '100%'
}">
<Panel ref="left" class="LeftPanel">
<TreeView></TreeView>
</Panel>
<Panel ref="main" class="MainPanel">
<canvas id="canvas"></canvas>
</Panel>
<Panel class="RightPanel">
<TreeView ref="right"></TreeView>
</Panel>
</HLayout>
<ContextMenu ref="menu"></ContextMenu>
</div>
`,
Expand All @@ -41,28 +57,27 @@ export class Editor extends Vue {
static instance: Editor;
static readonly el = "#editor";
current: string = "Label";
panes: Editor.Panes;
panels: Editor.Panels;

constructor(obj: any) {
super(obj);
this.panes = new Editor.Panes(this);
this.panels = new Editor.Panels(this);
this.$nextTick(() => {
this.panels.left.isResizableX = true;
});
}

get layout(): HLayout {
return this.$refs.layout as HLayout;
}

get menu(): ContextMenu {
return this.$refs.menu as ContextMenu;
}

nextTick(callback: () => void): void {
this.$nextTick(callback);
}
children(index: number): Vue {
return this.$children[index];
}
debug(): void {
for (var i of this.$children) {
console.log(i);
}
}

protected onMouseDown(e: MouseEvent): void {
var parent = e.srcElement.parentElement;
Expand All @@ -77,42 +92,46 @@ var _Button = Button;
type _Button = Button;
var _ContextMenu = ContextMenu;
type _ContextMenu = ContextMenu;
var _HLayout = HLayout;
type _HLayout = HLayout;
var _Label = Label;
type _Label = Label;
var _ListView = ListView;
type _ListView = ListView;
var _Pane = Pane;
type _Pane = Pane;
var _Panel = Panel;
type _Panel = Panel;
var _TreeView = TreeView;
type _TreeView = TreeView;
var _VLayout = VLayout;
type _VLayout = VLayout;

export module Editor {
export class Panes {
export class Panels {
editor: Editor;
constructor(editor: Editor) {
this.editor = editor;
}
get left(): Pane {
var $refs = this.editor.$refs;
return $refs.left as Pane;
}
get main(): Pane {
get left(): Panel {
var $refs = this.editor.$refs;
return $refs.main as Pane;
return $refs.left 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 Label = _Label;
export type Label = _Label;
export var ListView = _ListView;
export type ListView = _ListView;
export var Pane = _Pane;
export type Pane = _Pane;
export var Panel = _Panel;
export type Panel = _Panel;
export var TreeView = _TreeView;
export type TreeView = _TreeView;
export var VLayout = _VLayout;
export type VLayout = _VLayout;
}

var loaded = () => {
Expand Down
39 changes: 39 additions & 0 deletions src/tea/editor/HLayout.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import Vue from "vue";
import Component from "vue-class-component";
import * as Tea from "../Tea";

type Panel = Tea.Editor.Panel;

@Component({
template: `
<div
class="HLayout">
<Panel
v-for="(child, index) in children"
:key="index">
<component :is="child"></component>
</Panel>
<slot></slot>
</div>
`,
data: () => {
return {
children: []
}
}
})
export class HLayout extends Vue {
protected children: Array<string>;

get panelCount(): number {
return this.$children.length;
}

add(componentName: string): void {
this.children.push(componentName);
}

panel(index: number): Panel {
return this.$children[index] as Panel;
}
}
23 changes: 0 additions & 23 deletions src/tea/editor/Pane.ts
View file

This file was deleted.

0 comments on commit faec8fa

Please sign in to comment.