tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix sliders, but for real this time (pt 2)

Browse Source
This commit is contained in:
Tamius Han 2024-12-28 03:41:23 +01:00
parent 8602b53260
commit b2bfde4426
3 changed files with 79 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/csui/PlayerOverlay.vue
View File

@ -88,17 +88,13 @@
v-if="settings.active.newFeatureTracker?.['uw6.ui-popup']?.show > 0" v-if="settings.active.newFeatureTracker?.['uw6.ui-popup']?.show > 0"
@click="showUwWindow('playerUiSettings')" @click="showUwWindow('playerUiSettings')"
> >
<span style="color: #fa6;">I hate this popup<br/></span> <span style="color: #fa6;">Change when and if<br/>this popup appears</span>
<span style="font-size: 0.8em"> <span style="font-size: 0.8rem">
<span style="text-transform: uppercase; font-size: 0.8em"> <span style="font-size: 0.8rem; opacity: 0.5">This menu option will show {{settings.active.newFeatureTracker?.['uw6.ui-popup']?.show}} more<br/> times; or until clicked or dismissed.<br/>
<a @click="showUwWindow('playerUiSettings')"> Also accessible via:<br/> <span style="font-size: 0.85em">EXTENSION SETTINGS > UI AND KEYBOARD</span>.
Do something about it
</a> × <a @click="acknowledgeNewFeature('uw6.ui-popup')">keep the popup</a>
</span> </span>
<br/> <br/>
<span style="opacity: 0.5">This menu option will show {{settings.active.newFeatureTracker?.['uw6.ui-popup']?.show}} more<br/> times; or until clicked or dismissed.<br/> <a style="color: #fa6; cursor: pointer;" @click="() => acknowledgeNewFeature('uw6.ui-popup')">Dismiss this option</a>
Also accessible via <span style="font-variant: small-caps">extension settings</span>.
</span>
</span> </span>
</GhettoContextMenuOption> </GhettoContextMenuOption>

32
src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
View File

@ -67,18 +67,18 @@
</div> </div>
<div class="input range-input"> <div class="input range-input">
<input <input
:value="settings.active.ui.inPlayer.maxEnabledWidth" :value="settings.active.ui.inPlayer.minEnabledWidth"
class="slider" class="slider"
type="range" type="range"
min="0" min="0"
max="1" max="1"
step="0.01" step="0.01"
@input="(event) => setPlayerRestrictions('maxEnabledWidth', event.target.value)" @input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value)"
@change="(event) => saveSettings()" @change="(event) => saveSettings()"
> >
<input <input
:value="maxEnabledWidth" :value="ghettoComputed.minEnabledWidth"
@input="(event) => setPlayerRestrictions('maxEnabledWidth', event.target.value, true)" @input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value, true)"
@change="(event) => saveSettings(true)" @change="(event) => saveSettings(true)"
> >
</div> </div>
@ -100,7 +100,7 @@
@change="(event) => saveSettings()" @change="(event) => saveSettings()"
> >
<input <input
:value="minEnabledHeight" :value="ghettoComputed.minEnabledHeight"
@input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value, true)" @input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value, true)"
@change="(event) => saveSettings(true)" @change="(event) => saveSettings(true)"
> >
@ -160,7 +160,7 @@ export default {
}, },
data() { data() {
return { return {
ghettoComputed: { }
} }
}, },
mixins: [ mixins: [
@ -169,16 +169,10 @@ export default {
'settings', // required for buttons and actions, which are global 'settings', // required for buttons and actions, which are global
'eventBus', 'eventBus',
], ],
created() { mounted() {
}, this.ghettoComputed = {
computed: { minEnabledWidth: this.optionalToFixed(this.settings.active.ui.inPlayer.minEnabledWidth * 100, 0),
maxEnabledWidth() { minEnabledHeight: this.optionalToFixed(this.settings.active.ui.inPlayer.minEnabledHeight * 100, 0),
const v = this.settings.active.ui.inPlayer.maxEnabledWidth * 100;
return this.optionalToFixed(v, 0);
},
minEnabledHeight() {
const v = this.settings.active.ui.inPlayer.minEnabledHeight * 100;
return this.optionalToFixed(v, 0);
} }
}, },
methods: { methods: {
@ -204,6 +198,12 @@ export default {
} }
this.settings.active.ui.inPlayer[key] = value; this.settings.active.ui.inPlayer[key] = value;
if (isTextInput) {
this.ghettoComputed[key] = this.optionalToFixed(value, 0);
} else {
this.ghettoComputed[key] = this.optionalToFixed(value * 100, 0);
}
}, },
saveSettings(forceRefresh) { saveSettings(forceRefresh) {
this.settings.saveWithoutReload(); this.settings.saveWithoutReload();

101
src/csui/src/components/TriggerZoneEditor.vue
View File

@ -64,12 +64,13 @@
min="0.1" min="0.1"
max="1" max="1"
step="0.01" step="0.01"
@input="(event) => setTriggerZoneOffset('width', event.target.value, true)" @input="(event) => setValue('width', event.target.value)"
@change="(event) => updateSettings(true)"
> >
<input <input
:value="triggerZoneWidth" :value="ghettoComputed.width"
@input="(event) => setTriggerZoneSize('width', event.target.value)" @input="(event) => setValue('width', event.target.value, true)"
@change="(event) => updateSettings()" @change="(event) => updateSettings(true)"
> >
</div> </div>
<div class="hint"> <div class="hint">
@ -85,12 +86,13 @@
min="0.1" min="0.1"
max="1" max="1"
step="0.01" step="0.01"
@input="(event) => setTriggerZoneOffset('height', event.target.value, true)" @input="(event) => setValue('height', event.target.value)"
@change="(event) => updateSettings(true)"
> >
<input <input
:value="triggerZoneHeight" :value="ghettoComputed.height"
@input="(event) => setTriggerZoneSize('height', event.target.value)" @input="(event) => setValue('height', event.target.value, true)"
@change="(event) => updateSettings()" @change="(event) => updateSettings(true)"
> >
</div> </div>
<div class="hint"> <div class="hint">
@ -105,12 +107,13 @@
type="range" type="range"
min="-100" min="-100"
max="100" max="100"
@input="(event) => setTriggerZoneOffset('offsetX', event.target.value, true)" @input="(event) => setValue('offsetX', event.target.value)"
@change="(event) => updateSettings(true)"
> >
<input <input
:value="settings.active.ui.inPlayer.triggerZoneDimensions.offsetX" :value="settings.active.ui.inPlayer.triggerZoneDimensions.offsetX"
@input="(event) => setTriggerZoneOffset('offsetX', event.target.value)" @input="(event) => setValue('offsetX', event.target.value)"
@change="(event) => updateSettings()" @change="(event) => updateSettings(true)"
> >
</div> </div>
<div class="hint"> <div class="hint">
@ -125,12 +128,13 @@
type="range" type="range"
min="-100" min="-100"
max="100" max="100"
@input="(event) => setTriggerZoneOffset('offsetY', event.target.value, true)" @input="(event) => setValue('offsetY', event.target.value)"
@change="(event) => updateSettings(true)"
> >
<input <input
:value="settings.active.ui.inPlayer.triggerZoneDimensions.offsetY" :value="settings.active.ui.inPlayer.triggerZoneDimensions.offsetY"
@input="(event) => setTriggerZoneOffset('offsetY', event.target.value)" @input="(event) => setValue('offsetY', event.target.value)"
@change="(event) => updateSettings()" @change="(event) => updateSettings(true)"
> >
</div> </div>
<div class="hint"> <div class="hint">
@ -164,27 +168,26 @@ export default {
activeCornerDrag: undefined, activeCornerDrag: undefined,
dragStartPosition: undefined, dragStartPosition: undefined,
dragStartConfiguration: undefined, dragStartConfiguration: undefined,
ghettoComputed: { }
} }
}, },
created() { created() {
document.addEventListener("mouseup", this.handleMouseUp); document.addEventListener("mouseup", this.handleMouseUp);
document.addEventListener("mousemove", this.handleMouseMove); document.addEventListener("mousemove", this.handleMouseMove);
this.ghettoComputed = {
width: this.optionalToFixed(this.settings.active.ui.inPlayer.triggerZoneDimensions.width * 100, 0),
height: this.optionalToFixed(this.settings.active.ui.inPlayer.triggerZoneDimensions.height * 100, 0)
};
this.updateTriggerZones(false); this.updateTriggerZones(false);
}, },
computed: {
triggerZoneWidth() {
const v = this.settings.active.ui.inPlayer.triggerZoneDimensions.width * 100;
return this.optionalToFixed(v, 2);
},
triggerZoneHeight() {
const v = this.settings.active.ui.inPlayer.triggerZoneDimensions.height * 100;
return this.optionalToFixed(v, 2);
}
},
methods: { methods: {
optionalToFixed(v, n) { optionalToFixed(v, n) {
if ((`${v}`.split('.')[1]?.length ?? 0) > n) { try {
return v.toFixed(n); if ((`${v}`.split('.')[1]?.length ?? 0) > n) {
return v.toFixed(n);
}
} catch (e) {
} }
return v; return v;
}, },
@ -229,7 +232,6 @@ export default {
this.handleResize(event); this.handleResize(event);
} }
this.updateTriggerZones(); this.updateTriggerZones();
}, },
handleResize(event) { handleResize(event) {
@ -300,31 +302,38 @@ export default {
// | | | | // | | | |
return value.replaceAll(',', '.').split('.', 2).join('.').replace(/[^0-9.\-]/g, ''); return value.replaceAll(',', '.').split('.', 2).join('.').replace(/[^0-9.\-]/g, '');
}, },
setTriggerZoneSize(key, value, instantUpdate) { setValue(key, originalValue, isTextInput) {
let size = (+this.forceNumber(value) / 100); console.log('trying to set value:', key, value, isTextInput);
if (isNaN(+size)) { let value = originalValue;
size = 0.5; if (isTextInput) {
value = (+this.forceNumber(value) / 100);
} else {
value = +this.forceNumber(value);
} }
this.settings.active.ui.inPlayer.triggerZoneDimensions[key] = size; console.log('rocessed value:', value);
if (instantUpdate) { if (isNaN(+value)) {
this.updateSettings(); value = 0.5;
} }
this.settings.active.ui.inPlayer.triggerZoneDimensions[key] = value;
if (isTextInput) {
this.ghettoComputed[key] = this.optionalToFixed(originalValue, 0);
} else {
this.ghettoComputed[key] = this.optionalToFixed(originalValue * 100, 0);
}
this.updateSettings();
}, },
setTriggerZoneOffset(key, value, instantUpdate) {
let offset = +this.forceNumber(value);
this.settings.active.ui.inPlayer.triggerZoneDimensions[key] = offset; updateSettings(forceRefresh) {
if (instantUpdate) {
this.updateSettings();
}
},
updateSettings() {
this.settings.saveWithoutReload(); this.settings.saveWithoutReload();
this.updateTriggerZones(); this.updateTriggerZones();
if (forceRefresh) {
this.$nextTick( () => this.$forceUpdate() );
}
}, },
//#endregion //#endregion
@ -454,4 +463,10 @@ export default {
} }
} }
.action-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
</style> </style>