zhangyuheng/ObjToSchematic
1
0
Fork 0
forked from mirror/ObjToSchematic
Code Pull Requests 1 Activity

Updated some UI elements to checkboxes

Browse Source
This commit is contained in:
Lucas Dower 2022-11-16 23:15:11 +00:00
parent 6e5924f7af
commit 81d221d27a
12 changed files with 179 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app_context.ts
View File

@ -375,9 +375,9 @@ export class AppContext {
params: {
voxeliser: uiElements.voxeliser.getCachedValue(),
desiredHeight: uiElements.desiredHeight.getCachedValue(),
useMultisampleColouring: uiElements.multisampleColouring.getCachedValue() === 'on',
useMultisampleColouring: uiElements.multisampleColouring.getCachedValue(),
textureFiltering: uiElements.textureFiltering.getCachedValue() === 'linear' ? TextureFiltering.Linear : TextureFiltering.Nearest,
enableAmbientOcclusion: uiElements.ambientOcclusion.getCachedValue() === 'on',
enableAmbientOcclusion: uiElements.ambientOcclusion.getCachedValue(),
voxelOverlapRule: uiElements.voxelOverlapRule.getCachedValue(),
},
};
@ -401,7 +401,7 @@ export class AppContext {
const payload: TToWorkerMessage = {
action: 'RenderNextVoxelMeshChunk',
params: {
enableAmbientOcclusion: uiElements.ambientOcclusion.getCachedValue() === 'on',
enableAmbientOcclusion: uiElements.ambientOcclusion.getCachedValue(),
desiredHeight: uiElements.desiredHeight.getCachedValue(),
},
};

2
src/block_mesh.ts
View File

@ -125,7 +125,7 @@ export class BlockMesh {
// Convert the voxel into a block
const voxel = voxels[voxelIndex];
const voxelColour = this._getFinalVoxelColour(voxel, blockMeshParams);
const faceVisibility = blockMeshParams.contextualAveraging === 'on' ?
const faceVisibility = blockMeshParams.contextualAveraging ?
this._voxelMesh.getFaceVisibility(voxel.position) :
VoxelMesh.getFullFaceVisibility();
let block = atlasPalette.getBlock(voxelColour, allBlockCollection, faceVisibility, blockMeshParams.errorWeight);

110
src/ui/elements/checkbox.ts Normal file
View File

@ -0,0 +1,110 @@
import { getRandomID } from '../../util';
import { ASSERT } from '../../util/error_util';
import { LabelledElement } from './labelled_element';
export class CheckboxElement extends LabelledElement<boolean> {
private _checkboxId: string;
private _checkboxPipId: string;
private _checkboxTextId: string;
private _onText: string;
private _offText: string;
public constructor(label: string, value: boolean, onText: string, offText: string) {
super(label);
this._checkboxId = getRandomID();
this._checkboxPipId = getRandomID();
this._checkboxTextId = getRandomID();
this._value = value;
this._onText = onText;
this._offText = offText;
}
protected generateInnerHTML(): string {
return `
<div class="checkbox" id="${this._checkboxId}">
<svg id="${this._checkboxPipId}" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M5 12l5 5l10 -10" />
</svg>
</div>
<div class="checkbox-text" id="${this._checkboxTextId}">${this.getValue() ? this._onText : this._offText}</div>
`;
}
public registerEvents(): void {
const checkboxElement = document.getElementById(this._checkboxId);
const checkboxPipElement = document.getElementById(this._checkboxPipId);
ASSERT(checkboxElement !== null && checkboxPipElement !== null);
checkboxElement?.addEventListener('mouseenter', () => {
if (this._isEnabled) {
checkboxElement.classList.add('checkbox-hover');
checkboxPipElement.classList.add('checkbox-pip-hover');
}
});
checkboxElement?.addEventListener('mouseleave', () => {
if (this._isEnabled) {
checkboxElement.classList.remove('checkbox-hover');
checkboxPipElement.classList.remove('checkbox-pip-hover');
}
});
checkboxElement.addEventListener('click', () => {
if (this._isEnabled) {
this._value = !this._value;
this._onValueChanged();
}
});
}
private _onValueChanged() {
const checkboxElement = document.getElementById(this._checkboxId);
const checkboxPipElement = document.getElementById(this._checkboxPipId);
ASSERT(checkboxElement !== null && checkboxPipElement !== null);
const checkboxTextElement = document.getElementById(this._checkboxTextId);
ASSERT(checkboxTextElement !== null);
checkboxTextElement.innerHTML = this.getValue() ? this._onText : this._offText;
checkboxPipElement.style.visibility = this.getValue() ? 'visible' : 'hidden';
if (this._isEnabled) {
checkboxElement.classList.remove('checkbox-disabled');
} else {
checkboxElement.classList.add('checkbox-disabled');
}
this._onValueChangedDelegate?.(this._value!);
}
protected _onEnabledChanged(): void {
super._onEnabledChanged();
const checkboxElement = document.getElementById(this._checkboxId);
const checkboxPipElement = document.getElementById(this._checkboxPipId);
ASSERT(checkboxElement !== null && checkboxPipElement !== null);
const checkboxTextElement = document.getElementById(this._checkboxTextId);
ASSERT(checkboxTextElement !== null);
checkboxTextElement.innerHTML = this.getValue() ? this._onText : this._offText;
checkboxPipElement.style.visibility = this.getValue() ? 'visible' : 'hidden';
if (this._isEnabled) {
checkboxElement.classList.remove('checkbox-disabled');
checkboxTextElement.classList.remove('checkbox-text-disabled');
checkboxPipElement.classList.remove('checkbox-pip-disabled');
} else {
checkboxElement.classList.add('checkbox-disabled');
checkboxTextElement.classList.add('checkbox-text-disabled');
checkboxPipElement.classList.add('checkbox-pip-disabled');
}
this._onValueChangedDelegate?.(this._value!);
}
private _onValueChangedDelegate?: (enabled: boolean) => void;
public onValueChanged(delegate: (enabled: boolean) => void) {
this._onValueChangedDelegate = delegate;
return this;
}
}

54
src/ui/layout.ts
View File

@ -10,11 +10,12 @@ import { EAction } from '../util';
import { ASSERT } from '../util/error_util';
import { LOG } from '../util/log_util';
import { AppPaths } from '../util/path_util';
import { TDithering, TToggle } from '../util/type_util';
import { TDithering } from '../util/type_util';
import { TVoxelOverlapRule } from '../voxel_mesh';
import { TVoxelisers } from '../voxelisers/voxelisers';
import { BaseUIElement } from './elements/base';
import { ButtonElement } from './elements/button';
import { CheckboxElement } from './elements/checkbox';
import { ComboBoxElement, ComboBoxItem } from './elements/combobox';
import { FileInputElement } from './elements/file_input';
import { OutputElement } from './elements/output';
@ -72,26 +73,8 @@ export class UI {
displayText: 'Ray-based (legacy)',
},
]),
'ambientOcclusion': new ComboBoxElement('Ambient occlusion', [
{
id: 'on',
displayText: 'On (recommended)',
},
{
id: 'off',
displayText: 'Off (faster)',
},
]),
'multisampleColouring': new ComboBoxElement('Multisampling', [
{
id: 'on',
displayText: 'On (recommended)',
},
{
id: 'off',
displayText: 'Off (faster)',
},
]),
'ambientOcclusion': new CheckboxElement('Ambient occlusion', true, 'On (recommended)', 'Off (faster)'),
'multisampleColouring': new CheckboxElement('Multisampling', true, 'On (recommended)', 'Off (faster)'),
'textureFiltering': new ComboBoxElement('Texture filtering', [
{
id: 'linear',
@ -156,27 +139,16 @@ export class UI {
},
]),
'colourAccuracy': new SliderElement('Colour accuracy', 1, 8, 1, 5, 0.1),
'contextualAveraging': new ComboBoxElement<TToggle>('Smart averaging', [
{
id: 'on',
displayText: 'On (recommended)',
},
{
id: 'off',
displayText: 'Off (faster)',
},
]),
'contextualAveraging': new CheckboxElement('Smart averaging', true, 'On (recommended)', 'Off (faster)'),
'errorWeight': new SliderElement('Smoothness', 0.0, AppConfig.Get.SMOOTHNESS_MAX, 2, 0.2, 0.01),
'calculateLighting': new ComboBoxElement<boolean>('Calculate lighting', [
{ id: false, displayText: 'Off' },
{ id: true, displayText: 'On' },
]).onValueChanged((value: any) => {
if (value === 'true') {
this._ui.assign.elements.lightThreshold.setEnabled(true, false);
} else {
this._ui.assign.elements.lightThreshold.setEnabled(false, false);
}
}),
'calculateLighting': new CheckboxElement('Calculate lighting', false, 'On', 'Off')
.onValueChanged((value: boolean) => {
if (value) {
this._ui.assign.elements.lightThreshold.setEnabled(true, false);
} else {
this._ui.assign.elements.lightThreshold.setEnabled(false, false);
}
}),
'lightThreshold': new SliderElement('Light threshold', 0, 14, 0, 0, 1)
.setObeyGroupEnables(false),
},

2
src/util/type_util.ts
View File

@ -3,5 +3,3 @@ export type TBrand<K, T> = K & { __brand: T };
export type Vector3Hash = TBrand<number, 'Vector3Hash'>;
export type TDithering = 'off' | 'random' | 'ordered';
export type TToggle = 'on' | 'off';

4
src/worker_types.ts
View File

@ -7,7 +7,7 @@ import { StatusMessage } from './status';
import { TextureFiltering } from './texture';
import { ColourSpace } from './util';
import { AppError } from './util/error_util';
import { TDithering, TToggle } from './util/type_util';
import { TDithering } from './util/type_util';
import { Vector3 } from './vector';
import { TVoxelOverlapRule } from './voxel_mesh';
import { TVoxelisers } from './voxelisers/voxelisers';
@ -110,7 +110,7 @@ export namespace AssignParams {
resolution: RGBAUtil.TColourAccuracy,
calculateLighting: boolean,
lightThreshold: number,
contextualAveraging: TToggle,
contextualAveraging: boolean,
errorWeight: number,
}

50
styles.css
View File

@ -148,7 +148,7 @@ input::-webkit-inner-spin-button {
select {
width: 100%;
height: 100%;
padding-left: 10px;
padding-left: 5px;
border-radius: var(--border-radius);
font-family: 'Lexend', sans-serif;
font-weight: 300;
@ -233,9 +233,6 @@ select:disabled {
color: #808080 !important;
}
.button-label {
}
.button-progress {
/*border: 1px solid green;*/
z-index: 5;
@ -402,6 +399,9 @@ select:disabled {
}
.toolbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0px 8px 0px 8px;
text-align: center;
@ -452,7 +452,6 @@ select:disabled {
svg {
width: 16px;
height: 16px;
padding-top: 7.5px;
stroke: var(--text-standard);
}
@ -688,4 +687,45 @@ a:hover {
.material-container {
border-left: 1px solid #8C8C8C80;
padding-left: 5px;
}
.checkbox {
height: 75%;
aspect-ratio: 1/1;
background-color: var(--prop-standard);
border-radius: 5px;
border: 1px solid var(--prop-standard);
display: flex;
align-items: center;
justify-content: center;
}
.checkbox-hover {
background-color: var(--prop-hovered) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
cursor: pointer;
}
.checkbox-disabled {
background-color: var(--prop-disabled) !important;
border: 1px solid var(--prop-disabled) !important;
}
.checkbox-text {
padding-left: 10px;
font-weight: 300;
color: var(--text-standard)
}
.checkbox-text-disabled {
color: var(--text-disabled);
}
.checkbox-pip {
width: 50%;
height: 50%;
border-radius: 3px;
}
.checkbox-pip-hover {
stroke: white;
}
.checkbox-pip-disabled {
stroke: var(--text-disabled);
}

2
tests/objlitematic.test.ts
View File

@ -25,7 +25,7 @@ const baseConfig: THeadlessConfig = {
resolution: 32,
calculateLighting: false,
lightThreshold: 0,
contextualAveraging: 'on',
contextualAveraging: true,
errorWeight: 0.0,
},
export: {

2
tests/objobj.test.ts
View File

@ -25,7 +25,7 @@ const baseConfig: THeadlessConfig = {
resolution: 32,
calculateLighting: false,
lightThreshold: 0,
contextualAveraging: 'on',
contextualAveraging: true,
errorWeight: 0.0,
},
export: {

2
tests/objschem.test.ts
View File

@ -25,7 +25,7 @@ const baseConfig: THeadlessConfig = {
resolution: 32,
calculateLighting: false,
lightThreshold: 0,
contextualAveraging: 'on',
contextualAveraging: true,
errorWeight: 0.0,
},
export: {

2
tests/objschematic.test.ts
View File

@ -25,7 +25,7 @@ const baseConfig: THeadlessConfig = {
resolution: 32,
calculateLighting: false,
lightThreshold: 0,
contextualAveraging: 'on',
contextualAveraging: true,
errorWeight: 0.0,
},
export: {

2
tools/headless-config.ts
View File

@ -23,7 +23,7 @@ export const headlessConfig: THeadlessConfig = {
resolution: 32,
calculateLighting: false,
lightThreshold: 0,
contextualAveraging: 'on',
contextualAveraging: true,
errorWeight: 0.0,
},
export: {