forked from mirror/ObjToSchematic
Added support for resizing the sidebar
This commit is contained in:
Lucas Dower
parent
f5a33746a1
commit
49fb86e991
13
package-lock.json
generated
13
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
import { BaseUIElement } from './base_element';
|
||||
import { LabelElement } from './label';
|
||||
|
||||
export abstract class LabelledElement<Type> extends BaseUIElement<Type> {
|
||||
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()}
|
||||
<div class="prop-value-container">
|
||||
${this.generateInnerHTML()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected abstract generateInnerHTML(): string;
|
||||
|
||||
protected _onEnabledChanged() {
|
||||
this._labelElement.setEnabled(this.getEnabled());
|
||||
}
|
||||
|
||||
public addDescription(text: string) {
|
||||
this._labelElement = new LabelElement(this._label, text);
|
||||
}
|
||||
}
|
||||
@ -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 = `<div class='gutter-line'></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
56
styles.css
56
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;
|
||||
|
||||
@ -2,34 +2,47 @@
|
||||
<html>
|
||||
<head>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-W0SCWQ7HGJ"></script>
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-W0SCWQ7HGJ"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag('config', 'G-W0SCWQ7HGJ');
|
||||
gtag("config", "G-W0SCWQ7HGJ");
|
||||
</script>
|
||||
<meta charset="utf8" />
|
||||
<title>ObjToSchematic Web</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A tool to convert 3D models into Minecraft formats such as .schematic, .litematic, .schem and .nbt."
|
||||
/>
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta property="og:title" content="ObjToSchematic" />
|
||||
<meta property="og:description" content="A tool to convert 3D models into Minecraft formats such as .schematic, .litematic, .schem and .nbt." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A tool to convert 3D models into Minecraft formats such as .schematic, .litematic, .schem and .nbt."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://objtoschematic.com/" />
|
||||
<meta property="og:image" content="https://i.imgur.com/TwdIpyb.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="column-properties" id="properties"></div>
|
||||
<div class="column-canvas">
|
||||
<canvas id="canvas"></canvas>
|
||||
<div class="toolbar" id="toolbar"></div>
|
||||
<div class="content">
|
||||
<div class="split column-properties" id="properties"></div>
|
||||
<div class="split column-canvas">
|
||||
<canvas id="canvas"></canvas>
|
||||
<div class="toolbar" id="toolbar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9188679203215896"
|
||||
crossorigin="anonymous"></script>
|
||||
<script
|
||||
async
|
||||
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9188679203215896"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user