From 49fb86e9916d73774b78c857f8768551f68d6213 Mon Sep 17 00:00:00 2001 From: Lucas Dower Date: Thu, 2 Mar 2023 19:51:53 +0000 Subject: [PATCH] Added support for resizing the sidebar --- package-lock.json | 13 +++++++ package.json | 4 +++ src/ui/elements/labelled_element.ts | 32 ----------------- src/ui/layout.ts | 17 +++++++-- src/util/ui_util.ts | 2 +- styles.css | 56 ++++++++++++++++++++--------- template.html | 37 ++++++++++++------- 7 files changed, 97 insertions(+), 64 deletions(-) delete mode 100644 src/ui/elements/labelled_element.ts diff --git a/package-lock.json b/package-lock.json index 082c68d..651b08c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "objtoschematic", "version": "0.7.4", "license": "BSD-3-Clause", + "dependencies": { + "split.js": "^1.6.5" + }, "devDependencies": { "@types/adm-zip": "^0.5.0", "@types/jest": "^27.4.1", @@ -8814,6 +8817,11 @@ "node": ">= 6" } }, + "node_modules/split.js": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz", + "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw==" + }, "node_modules/stack-trace": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz", @@ -17270,6 +17278,11 @@ } } }, + "split.js": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz", + "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw==" + }, "stack-trace": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz", diff --git a/package.json b/package.json index 36db977..37f1bb1 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "scripts": { "lint": "eslint --fix src tools tests --ext .ts", + "lint-src": "eslint --fix src --ext .ts", "test": "jest --config jestconfig.json", "start": "webpack serve --config ./webpack.dev.js", "dist": "webpack --config ./webpack.prod.js", @@ -72,5 +73,8 @@ "webpack-merge": "^5.8.0", "webpack-strip-block": "^0.3.0", "worker-loader": "^3.0.8" + }, + "dependencies": { + "split.js": "^1.6.5" } } diff --git a/src/ui/elements/labelled_element.ts b/src/ui/elements/labelled_element.ts deleted file mode 100644 index e2b3696..0000000 --- a/src/ui/elements/labelled_element.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { BaseUIElement } from './base_element'; -import { LabelElement } from './label'; - -export abstract class LabelledElement extends BaseUIElement { - private _label: string; - private _labelElement: LabelElement; - - public constructor(label: string) { - super(); - this._label = label; - this._labelElement = new LabelElement(label); - } - - public generateHTML() { - return ` - ${this._labelElement.generateHTML()} -
- ${this.generateInnerHTML()} -
- `; - } - - protected abstract generateInnerHTML(): string; - - protected _onEnabledChanged() { - this._labelElement.setEnabled(this.getEnabled()); - } - - public addDescription(text: string) { - this._labelElement = new LabelElement(this._label, text); - } -} diff --git a/src/ui/layout.ts b/src/ui/layout.ts index 20598e9..7a6d548 100644 --- a/src/ui/layout.ts +++ b/src/ui/layout.ts @@ -1,3 +1,5 @@ +import Split from 'split.js'; + import { AppContext } from '../app_context'; import { FallableBehaviour } from '../block_mesh'; import { ArcballCamera } from '../camera'; @@ -7,7 +9,6 @@ import { MeshType, Renderer } from '../renderer'; import { EAction } from '../util'; import { ASSERT } from '../util/error_util'; import { LOG } from '../util/log_util'; -import { AppPaths } from '../util/path_util'; import { TAxis } from '../util/type_util'; import { TDithering } from '../util/type_util'; import { TVoxelOverlapRule } from '../voxel_mesh'; @@ -312,7 +313,7 @@ export class UI { .isEnabled(() => { return Renderer.Get.getModelsAvailable() >= MeshType.VoxelMesh; }), - 'blockMesh': new ToolbarItemElement({ id: 'blockMesh', iconSVG: AppIcons.BLOCK }) + 'blockMesh': new ToolbarItemElement({ id: 'blockMesh', iconSVG: AppIcons.BLOCK }) .onClick(() => { Renderer.Get.setModelToUse(MeshType.BlockMesh); }) @@ -487,6 +488,16 @@ export class UI { toolbarHTML.placeInto('toolbar'); } + + Split(['.column-properties', '.column-canvas'], { + sizes: [20, 80], + minSize: [400, 500], + }); + + const item = document.getElementsByClassName('gutter').item(0); + if (item !== null) { + item.innerHTML = `
`; + } } public cacheValues(action: EAction) { @@ -657,7 +668,7 @@ export class UI { } }); */ - textureAtlases.push({ payload: 'vanilla', displayText: 'Vanilla '}); + textureAtlases.push({ payload: 'vanilla', displayText: 'Vanilla ' }); return textureAtlases; } diff --git a/src/util/ui_util.ts b/src/util/ui_util.ts index b5cc33b..29aa512 100644 --- a/src/util/ui_util.ts +++ b/src/util/ui_util.ts @@ -3,7 +3,7 @@ import { ASSERT } from './error_util'; export namespace UIUtil { export function getElementById(id: string) { const element = document.getElementById(id); - //ASSERT(element !== null, `Attempting to getElement of nonexistent element: ${id}`); + ASSERT(element !== null, `Attempting to getElement of nonexistent element: ${id}`); return element as HTMLElement; } } diff --git a/styles.css b/styles.css index 5605657..72a7ae4 100644 --- a/styles.css +++ b/styles.css @@ -1,9 +1,8 @@ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400&display=swap'); :root { - --properties-width: max(400px, 20%); --pill-radius: 5px; - --prop-bg: hsl(0, 0%, 10%); + --prop-bg: rgb(26, 26, 26); --prop-alt: hsl(0, 0%, 15%); --prop-accent-border-hovered: #33AAC2; @@ -32,32 +31,56 @@ body { margin: 0px; - background: rgb(25, 25, 25); font-family: 'Lexend', sans-serif; overflow: hidden; user-select: none; } canvas { - position: absolute; width: 100%; height: 100%; } +.content { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; +} + +.split { + width: 100%; + height: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.gutter { + cursor: col-resize; + height: 100%; + background: rgb(20, 20, 20); + border-left: 1px solid rgb(15, 15, 15); + display: flex; + justify-content: center; + align-items: center; +} + +.gutter-line { + background-color: hsl(0, 0%, 20%); + width: 2px; + height: 20%; + border-radius: 2px; +} .column-properties { background: var(--prop-bg); - position: absolute; - width: var(--properties-width); - height: 100%; overflow: auto; } .column-canvas { - position: absolute; - margin-left: var(--properties-width); - width: calc(100% - var(--properties-width)); - height: 100%; cursor: crosshair; } @@ -378,16 +401,16 @@ select:disabled { } ::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.2); + background: rgb(20, 20, 20); } ::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.1); + background: rgb(50, 50, 50); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.2); + background: rgb(60, 60, 60); } .message-builder-item { @@ -457,9 +480,10 @@ select:disabled { .toolbar { display: flex; - position: inherit; - flex-direction: row; + position: relative; + top: -100vh; width: 100%; + flex-direction: row; justify-content: space-between; cursor: inherit; pointer-events: none; diff --git a/template.html b/template.html index b72465c..9e6a13a 100644 --- a/template.html +++ b/template.html @@ -2,34 +2,47 @@ - + ObjToSchematic Web + /> - + -
-
- -
+
+
+
+ +
+
- +