From 350ae884e897bef4c7af527455df45c1f50d1b3e Mon Sep 17 00:00:00 2001 From: Daan Vanden Bosch Date: Tue, 23 Jul 2019 18:39:47 +0200 Subject: [PATCH] Now using golden-layout in quest editor. --- antd.customize.less | 41 ++++-- craco.config.js | 12 ++ package.json | 1 + src/index.tsx | 2 + src/rendering/Renderer.ts | 2 +- src/stores/QuestEditorStore.ts | 7 + src/ui/BigSelect.less | 6 +- src/ui/quest_editor/EntityInfoComponent.css | 5 +- src/ui/quest_editor/EntityInfoComponent.tsx | 9 +- src/ui/quest_editor/QuestEditorComponent.less | 21 --- src/ui/quest_editor/QuestEditorComponent.tsx | 125 ++++++++++++------ src/ui/quest_editor/QuestInfoComponent.css | 5 +- src/ui/quest_editor/QuestInfoComponent.tsx | 117 ++++++++-------- .../quest_editor/QuestRendererComponent.tsx | 24 ++++ .../quest_editor/ScriptEditorComponent.less | 4 + src/ui/quest_editor/ScriptEditorComponent.tsx | 13 +- src/ui/quest_editor/Toolbar.less | 4 +- src/ui/quest_editor/Toolbar.tsx | 36 ++--- src/ui/theme.less | 23 ++++ yarn.lock | 12 ++ 20 files changed, 303 insertions(+), 166 deletions(-) create mode 100644 src/ui/quest_editor/QuestRendererComponent.tsx diff --git a/antd.customize.less b/antd.customize.less index f49507cb..a6eb3cf1 100644 --- a/antd.customize.less +++ b/antd.customize.less @@ -8,20 +8,26 @@ @primary-1: fade(@primary-color, 50%); @primary-2: fade(@primary-color, 40%); -@body-background: hsl(200, 10%, 20%); +@body-background: hsl(200, 0%, 20%); @component-background: @body-background; -@text-color: hsl(200, 10%, 90%); -@text-color-secondary: hsl(200, 20%, 80%); +@text-color: hsl(200, 0%, 90%); +@text-color-secondary: hsl(200, 0%, 80%); @text-color-dark: fade(white, 85%); @text-color-secondary-dark: fade(white, 65%); @heading-color: fade(@black, 85%); -@border-radius-base: 2px; +@border-radius-base: 0px; @border-radius-sm: 0px; +// vertical paddings +@padding-lg: 12px; // containers +@padding-md: 8px; // small containers and buttons +@padding-sm: 6px; // Form controls and items +@padding-xs: 4px; // small items + @background-color-light: lighten(@component-background, 20%); // background of header and selected item -@background-color-base: fade(@primary-color, 20%); // Default grey background color +@background-color-base: @component-background; // Default grey background color @item-active-bg: fade(@primary-color, 20%); @item-hover-bg: fade(@primary-color, 10%); @@ -33,16 +39,24 @@ @disabled-color: fade(#fff, 50%); // Animation -@animation-duration-slow: 0.1s; // Modal -@animation-duration-base: 0.066s; -@animation-duration-fast: 0.033s; // Tooltip +@animation-duration-slow: 0s; // Modal +@animation-duration-base: 0s; +@animation-duration-fast: 0s; // Tooltip // Input @input-bg: darken(@component-background, 5%); +@input-height-base: 28px; +@input-height-lg: 34px; +@input-height-sm: 24px; + // Buttons @btn-default-bg: lighten(@component-background, 10%); +@btn-height-base: 28px; +@btn-height-lg: 34px; +@btn-height-sm: 24px; + // Modal @modal-mask-bg: fade(black, 80%); @@ -52,3 +66,14 @@ // Menu @menu-dark-bg: @component-background; + + +// Tabs +// --- +@tabs-card-head-background: darken(@background-color-base, 5%); +@tabs-card-height: 28px; +@tabs-card-active-color: white; +@tabs-highlight-color: white; +@tabs-hover-color: white; +@tabs-card-active-color: white; +@tabs-ink-bar-color: white; diff --git a/craco.config.js b/craco.config.js index 5b7e371e..357232dd 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,5 +1,6 @@ const CracoAntDesignPlugin = require("craco-antd"); const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); +const webpack = require("webpack") module.exports = { plugins: [ @@ -15,13 +16,24 @@ module.exports = { }, webpack: { configure: config => { + // golden-layout config. + config.plugins.push(new webpack.ProvidePlugin({ + React: "react", + ReactDOM: "react-dom", + $: "jquery", + jQuery: "jquery", + })); + + // worker-loader config. config.module.rules.push({ test: /\.worker\.js$/, use: { loader: 'worker-loader' } }); + // Work-around until create-react-app uses webpack-dev-server 4. // See https://github.com/webpack/webpack/issues/6642 config.output.globalObject = "this"; + return config; } } diff --git a/package.json b/package.json index 24c6d20e..da82cb2c 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@types/text-encoding": "^0.0.35", "antd": "^3.20.1", "craco-antd": "^1.11.0", + "golden-layout": "^1.5.9", "javascript-lp-solver": "^0.4.5", "js-logger": "^1.6.0", "lodash": "^4.17.14", diff --git a/src/index.tsx b/src/index.tsx index 3857fca4..1d067ca8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,6 +6,8 @@ import { ApplicationComponent } from "./ui/ApplicationComponent"; import "react-virtualized/styles.css"; import "react-select/dist/react-select.css"; import "react-virtualized-select/styles.css"; +import "golden-layout/src/css/goldenlayout-base.css"; +import "golden-layout/src/css/goldenlayout-dark-theme.css"; Logger.useDefaults({ defaultLevel: (Logger as any)[process.env["REACT_APP_LOG_LEVEL"] || "OFF"], diff --git a/src/rendering/Renderer.ts b/src/rendering/Renderer.ts index a26337c3..b52f8e4f 100644 --- a/src/rendering/Renderer.ts +++ b/src/rendering/Renderer.ts @@ -42,7 +42,7 @@ export class Renderer { this.controls.mouseButtons.PAN = MOUSE.LEFT; this.controls.addEventListener("change", this.schedule_render); - this.scene.background = new Color(0x151c21); + this.scene.background = new Color(0x181818); this.light_holder.add(this.light); this.scene.add(this.light_holder); diff --git a/src/stores/QuestEditorStore.ts b/src/stores/QuestEditorStore.ts index 338f8d09..e087c687 100644 --- a/src/stores/QuestEditorStore.ts +++ b/src/stores/QuestEditorStore.ts @@ -13,6 +13,8 @@ import { create_new_quest } from "./quest_creation"; const logger = Logger.get("stores/QuestEditorStore"); class QuestEditorStore { + @observable debug = false; + readonly undo_stack = new UndoStack(); @observable current_quest_filename?: string; @@ -24,6 +26,11 @@ class QuestEditorStore { @observable save_dialog_filename?: string; @observable save_dialog_open: boolean = false; + @action + toggle_debug = () => { + this.debug = !this.debug; + }; + @action set_selected_entity = (entity?: QuestEntity) => { if (entity) { diff --git a/src/ui/BigSelect.less b/src/ui/BigSelect.less index d136a2e9..e79d0a9b 100644 --- a/src/ui/BigSelect.less +++ b/src/ui/BigSelect.less @@ -3,7 +3,7 @@ cursor: pointer; background-color: @component-background; color: @text-color; - height: 32px; + height: 28px; border-color: @border-color-base; border-radius: @border-radius-base; } @@ -13,11 +13,11 @@ } & .Select-placeholder, & .Select--single > .Select-control .Select-value { - line-height: 32px; + line-height: 28px; } & .Select-input { - height: 30px; + height: 26px; } &:hover > .Select-control { diff --git a/src/ui/quest_editor/EntityInfoComponent.css b/src/ui/quest_editor/EntityInfoComponent.css index e601e002..5d548ec2 100644 --- a/src/ui/quest_editor/EntityInfoComponent.css +++ b/src/ui/quest_editor/EntityInfoComponent.css @@ -1,6 +1,7 @@ .EntityInfoComponent-container { - width: 200px; - padding: 10px; + width: 100%; + height: 100%; + padding: 2px 10px 10px 10px; display: flex; flex-direction: column; } diff --git a/src/ui/quest_editor/EntityInfoComponent.tsx b/src/ui/quest_editor/EntityInfoComponent.tsx index f5c8666a..0ef96d36 100644 --- a/src/ui/quest_editor/EntityInfoComponent.tsx +++ b/src/ui/quest_editor/EntityInfoComponent.tsx @@ -3,16 +3,13 @@ import { autorun, IReactionDisposer } from "mobx"; import { observer } from "mobx-react"; import React, { Component, PureComponent, ReactNode } from "react"; import { QuestEntity, QuestNpc, QuestObject } from "../../domain"; +import { quest_editor_store } from "../../stores/QuestEditorStore"; import "./EntityInfoComponent.css"; -export type Props = { - entity?: QuestEntity; -}; - @observer -export class EntityInfoComponent extends Component { +export class EntityInfoComponent extends Component { render(): ReactNode { - const entity = this.props.entity; + const entity = quest_editor_store.selected_entity; if (entity) { const section_id = entity.section ? entity.section.id : entity.section_id; diff --git a/src/ui/quest_editor/QuestEditorComponent.less b/src/ui/quest_editor/QuestEditorComponent.less index 72f08f89..dd12b004 100644 --- a/src/ui/quest_editor/QuestEditorComponent.less +++ b/src/ui/quest_editor/QuestEditorComponent.less @@ -8,24 +8,3 @@ display: flex; overflow: hidden; } - -.qe-QuestEditorComponent-tabcontainer { - flex: 1; - display: flex; - flex-direction: column; - - & > .ant-tabs-content { - flex: 1; - display: flex; - flex-direction: column; - } -} - -.qe-QuestEditorComponent-tab.ant-tabs-tabpane-active { - flex: 1; - display: flex; -} - -.qe-QuestEditorComponent-tab-main { - flex: 1; -} diff --git a/src/ui/quest_editor/QuestEditorComponent.tsx b/src/ui/quest_editor/QuestEditorComponent.tsx index eff4fe87..ac519bca 100644 --- a/src/ui/quest_editor/QuestEditorComponent.tsx +++ b/src/ui/quest_editor/QuestEditorComponent.tsx @@ -1,62 +1,97 @@ +import GoldenLayout from "golden-layout"; import { observer } from "mobx-react"; -import React, { Component, ReactNode } from "react"; -import { get_quest_renderer } from "../../rendering/QuestRenderer"; +import React, { Component, createRef, ReactNode } from "react"; import { application_store } from "../../stores/ApplicationStore"; import { quest_editor_store } from "../../stores/QuestEditorStore"; -import { RendererComponent } from "../RendererComponent"; import { EntityInfoComponent } from "./EntityInfoComponent"; import "./QuestEditorComponent.less"; import { QuestInfoComponent } from "./QuestInfoComponent"; -import { Toolbar } from "./Toolbar"; -import { Tabs } from "antd"; +import { QuestRendererComponent } from "./QuestRendererComponent"; import { ScriptEditorComponent } from "./ScriptEditorComponent"; -import { AutoSizer } from "react-virtualized"; +import { Toolbar } from "./Toolbar"; @observer -export class QuestEditorComponent extends Component<{}, { debug: boolean }> { - state = { debug: false }; +export class QuestEditorComponent extends Component { + private layout_element = createRef(); + private layout?: GoldenLayout; componentDidMount(): void { application_store.on_global_keyup("quest_editor", this.keyup); + + window.addEventListener("resize", this.resize); + + setTimeout(() => { + if (this.layout_element.current && !this.layout) { + this.layout = new GoldenLayout( + { + settings: { + showPopoutIcon: false, + }, + content: [ + { + type: "row", + content: [ + { + title: "Info", + type: "react-component", + component: "QuestInfoComponent", + isClosable: false, + width: 3, + }, + { + type: "stack", + width: 9, + content: [ + { + title: "3D View", + type: "react-component", + component: "QuestRendererComponent", + isClosable: false, + }, + { + title: "Script", + type: "react-component", + component: "ScriptEditorComponent", + isClosable: false, + }, + ], + }, + { + title: "Entity", + type: "react-component", + component: "EntityInfoComponent", + isClosable: false, + width: 2, + }, + ], + }, + ], + }, + this.layout_element.current + ); + this.layout.registerComponent("QuestInfoComponent", QuestInfoComponent); + this.layout.registerComponent("QuestRendererComponent", QuestRendererComponent); + this.layout.registerComponent("EntityInfoComponent", EntityInfoComponent); + this.layout.registerComponent("ScriptEditorComponent", ScriptEditorComponent); + this.layout.init(); + } + }, 0); + } + + componentWillUnmount(): void { + window.removeEventListener("resize", this.resize); + + if (this.layout) { + this.layout.destroy(); + this.layout = undefined; + } } render(): ReactNode { - const quest = quest_editor_store.current_quest; - return (
-
- - - -
- - {({ width, height }) => ( - - )} - -
- - - - - - -
+
); } @@ -67,7 +102,13 @@ export class QuestEditorComponent extends Component<{}, { debug: boolean }> { } else if (e.ctrlKey && e.key === "Z" && !e.altKey) { quest_editor_store.undo_stack.redo(); } else if (e.ctrlKey && e.altKey && e.key === "d") { - this.setState(state => ({ debug: !state.debug })); + quest_editor_store.toggle_debug(); + } + }; + + private resize = () => { + if (this.layout) { + this.layout.updateSize(); } }; } diff --git a/src/ui/quest_editor/QuestInfoComponent.css b/src/ui/quest_editor/QuestInfoComponent.css index 08aca7ce..c96931d9 100644 --- a/src/ui/quest_editor/QuestInfoComponent.css +++ b/src/ui/quest_editor/QuestInfoComponent.css @@ -1,6 +1,7 @@ .qe-QuestInfoComponent { - width: 280px; - padding: 10px; + height: 100%; + width: 100%; + padding: 2px 10px 10px 10px; display: flex; flex-direction: column; } diff --git a/src/ui/quest_editor/QuestInfoComponent.tsx b/src/ui/quest_editor/QuestInfoComponent.tsx index 83de7ffa..ba93e117 100644 --- a/src/ui/quest_editor/QuestInfoComponent.tsx +++ b/src/ui/quest_editor/QuestInfoComponent.tsx @@ -1,69 +1,76 @@ -import React from "react"; -import { NpcType, Quest } from "../../domain"; +import { observer } from "mobx-react"; +import React, { Component, ReactNode } from "react"; +import { NpcType } from "../../domain"; +import { quest_editor_store } from "../../stores/QuestEditorStore"; import "./QuestInfoComponent.css"; -export function QuestInfoComponent({ quest }: { quest?: Quest }): JSX.Element { - if (quest) { - const episode = quest.episode === 4 ? "IV" : quest.episode === 2 ? "II" : "I"; - const npc_counts = new Map(); +@observer +export class QuestInfoComponent extends Component { + render(): ReactNode { + const quest = quest_editor_store.current_quest; - for (const npc of quest.npcs) { - const val = npc_counts.get(npc.type) || 0; - npc_counts.set(npc.type, val + 1); - } + if (quest) { + const episode = quest.episode === 4 ? "IV" : quest.episode === 2 ? "II" : "I"; + const npc_counts = new Map(); - const extra_canadines = (npc_counts.get(NpcType.Canane) || 0) * 8; + for (const npc of quest.npcs) { + const val = npc_counts.get(npc.type) || 0; + npc_counts.set(npc.type, val + 1); + } - // Sort by type ID. - const sorted_npc_counts = [...npc_counts].sort((a, b) => a[0].id - b[0].id); + const extra_canadines = (npc_counts.get(NpcType.Canane) || 0) * 8; + + // Sort by type ID. + const sorted_npc_counts = [...npc_counts].sort((a, b) => a[0].id - b[0].id); + + const npc_count_rows = sorted_npc_counts.map(([npc_type, count]) => { + const extra = npc_type === NpcType.Canadine ? extra_canadines : 0; + return ( + + {npc_type.name}: + {count + extra} + + ); + }); - const npc_count_rows = sorted_npc_counts.map(([npc_type, count]) => { - const extra = npc_type === NpcType.Canadine ? extra_canadines : 0; return ( - - {npc_type.name}: - {count + extra} - - ); - }); - - return ( -
- - - - - - - - - - - - - - - - - -
Name:{quest.name}
Episode:{episode}
- 
{quest.short_description}
-
- 
{quest.long_description}
-
-
+
- + - + + - - {npc_count_rows} + + + + + + + + + + +
NPC CountsName:{quest.name}
Episode:{episode}
+ 
{quest.short_description}
+
+ 
{quest.long_description}
+
+
+ + + + + + + {npc_count_rows} +
NPC Counts
+
-
- ); - } else { - return
; + ); + } else { + return
; + } } } diff --git a/src/ui/quest_editor/QuestRendererComponent.tsx b/src/ui/quest_editor/QuestRendererComponent.tsx new file mode 100644 index 00000000..46b408bd --- /dev/null +++ b/src/ui/quest_editor/QuestRendererComponent.tsx @@ -0,0 +1,24 @@ +import { observer } from "mobx-react"; +import React, { Component, ReactNode } from "react"; +import { AutoSizer } from "react-virtualized"; +import { get_quest_renderer } from "../../rendering/QuestRenderer"; +import { quest_editor_store } from "../../stores/QuestEditorStore"; +import { RendererComponent } from "../RendererComponent"; + +@observer +export class QuestRendererComponent extends Component { + render(): ReactNode { + return ( + + {({ width, height }) => ( + + )} + + ); + } +} diff --git a/src/ui/quest_editor/ScriptEditorComponent.less b/src/ui/quest_editor/ScriptEditorComponent.less index e69de29b..61b57712 100644 --- a/src/ui/quest_editor/ScriptEditorComponent.less +++ b/src/ui/quest_editor/ScriptEditorComponent.less @@ -0,0 +1,4 @@ +.qe-ScriptEditorComponent { + width: 100%; + height: 100%; +} diff --git a/src/ui/quest_editor/ScriptEditorComponent.tsx b/src/ui/quest_editor/ScriptEditorComponent.tsx index 1a30a7d4..507d32d5 100644 --- a/src/ui/quest_editor/ScriptEditorComponent.tsx +++ b/src/ui/quest_editor/ScriptEditorComponent.tsx @@ -96,7 +96,7 @@ editor.defineTheme("phantasmal-world", { base: "vs-dark", inherit: true, rules: [ - { token: "", foreground: "e0e0e0", background: "151c21" }, + { token: "", foreground: "e0e0e0", background: "#181818" }, { token: "tag", foreground: "99bbff" }, { token: "predefined", foreground: "bbffbb" }, { token: "number", foreground: "ffffaa" }, @@ -104,18 +104,15 @@ editor.defineTheme("phantasmal-world", { { token: "string.escape", foreground: "8888ff" }, ], colors: { - "editor.background": "#151c21", - "editor.lineHighlightBackground": "#1a2228", + "editor.background": "#181818", + "editor.lineHighlightBackground": "#202020", }, }); -export class ScriptEditorComponent extends Component<{ className?: string }> { +export class ScriptEditorComponent extends Component { render(): ReactNode { - let className = "qe-ScriptEditorComponent"; - if (this.props.className) className += " " + this.props.className; - return ( -
+
{({ width, height }) => } diff --git a/src/ui/quest_editor/Toolbar.less b/src/ui/quest_editor/Toolbar.less index cc8a6596..2b67ed05 100644 --- a/src/ui/quest_editor/Toolbar.less +++ b/src/ui/quest_editor/Toolbar.less @@ -1,8 +1,8 @@ .qe-Toolbar { display: flex; - padding: 10px 5px; + padding: 6px 3px; } .qe-Toolbar > * { - margin: 0 5px; + margin: 0 3px; } diff --git a/src/ui/quest_editor/Toolbar.tsx b/src/ui/quest_editor/Toolbar.tsx index a0f2fddd..1ade66f2 100644 --- a/src/ui/quest_editor/Toolbar.tsx +++ b/src/ui/quest_editor/Toolbar.tsx @@ -1,11 +1,11 @@ import { Button, Dropdown, Form, Icon, Input, Menu, Modal, Select, Upload } from "antd"; +import { ClickParam } from "antd/lib/menu"; import { UploadChangeParam, UploadFile } from "antd/lib/upload/interface"; import { observer } from "mobx-react"; import React, { ChangeEvent, Component, ReactNode } from "react"; import { Episode } from "../../domain"; import { quest_editor_store } from "../../stores/QuestEditorStore"; import "./Toolbar.less"; -import { ClickParam } from "antd/lib/menu"; @observer export class Toolbar extends Component { @@ -42,6 +42,25 @@ export class Toolbar extends Component { > + + + - -
); diff --git a/src/ui/theme.less b/src/ui/theme.less index b950e528..6719d572 100644 --- a/src/ui/theme.less +++ b/src/ui/theme.less @@ -3,3 +3,26 @@ @table-scrollbar-color: lighten(@scrollbar-color, 1%); @table-scrollbar-thumb-color: lighten(@scrollbar-thumb-color, 5%); + +#phantasmal-world-root { + & .lm_header { + background: darken(@component-background, 5%); + } + + & .lm_goldenlayout { + background: darken(@component-background, 5%); + } + + & .lm_content { + background: @component-background; + } + + & .lm_tab { + background: darken(@component-background, 5%); + box-shadow: none; + + &.lm_active { + background: @component-background; + } + } +} diff --git a/yarn.lock b/yarn.lock index ce4c9278..101728e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4781,6 +4781,13 @@ globby@^6.1.0: pify "^2.0.0" pinkie-promise "^2.0.0" +golden-layout@^1.5.9: + version "1.5.9" + resolved "https://registry.yarnpkg.com/golden-layout/-/golden-layout-1.5.9.tgz#a39bc1f6a67e6f886b797c016dd924e9426ba77f" + integrity sha1-o5vB9qZ+b4hreXwBbdkk6UJrp38= + dependencies: + jquery "*" + graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6: version "4.2.0" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.0.tgz#8d8fdc73977cb04104721cb53666c1ca64cd328b" @@ -6090,6 +6097,11 @@ jest@24.7.1: import-local "^2.0.0" jest-cli "^24.7.1" +jquery@*: + version "3.4.1" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2" + integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw== + js-levenshtein@^1.1.3: version "1.1.6" resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"