Get sliders to update with values from aspect ratio options
This commit is contained in:
parent
829047585a
commit
bd5befc18c
@ -61,41 +61,18 @@
|
||||
</Button>
|
||||
</div>
|
||||
<template v-if="zoomAspectRatioLocked">
|
||||
<!-- <div class="flex flex-row">
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<div class="flex-grow"></div>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
</div> -->
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="logarithmicZoom"
|
||||
:value="zoom.x"
|
||||
@input="changeZoom($event.target.value)"
|
||||
/>
|
||||
<div style="overflow: auto" class="flex flex-row">
|
||||
<div class="flex flex-grow medium-small x-pad-1em">
|
||||
Zoom: {{(zoom * 100).toFixed()}}%
|
||||
Zoom: {{(zoom.x * 100).toFixed()}}%
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
@ -104,76 +81,30 @@
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>Horizontal zoom</div>
|
||||
<!-- <div class="flex flex-row">
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<div class="flex-grow"></div>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
</div> -->
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="logarithmicZoom"
|
||||
:value="zoom.x"
|
||||
@input="changeZoom($event.target.value, 'x')"
|
||||
/>
|
||||
|
||||
<div>Vertical zoom</div>
|
||||
<div class="flex flex-row">
|
||||
<!-- <ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<div class="flex-grow"></div>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+5 %"
|
||||
>
|
||||
</ShortcutButton> -->
|
||||
</div>
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="logarithmicZoom"
|
||||
:value="zoom.y"
|
||||
@input="changeZoom($event.target.value, 'y')"
|
||||
/>
|
||||
|
||||
<div style="overflow: auto" class="flex flex-row">
|
||||
<div class="flex flex-grow medium-small x-pad-1em">
|
||||
Zoom: {{(zoomX * 100).toFixed()}}% x {{(zoomY * 100).toFixed()}}%
|
||||
Zoom: {{(zoom.x * 100).toFixed()}}% x {{(zoom.y * 100).toFixed()}}%
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
@ -222,7 +153,11 @@ export default {
|
||||
exec: null,
|
||||
scope: 'page',
|
||||
CropModePersistence: CropModePersistence,
|
||||
zoomAspectRatioLocked: true
|
||||
zoomAspectRatioLocked: true,
|
||||
zoom: {
|
||||
x: 1,
|
||||
y: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
@ -236,6 +171,15 @@ export default {
|
||||
],
|
||||
created() {
|
||||
this.exec = new ExecAction(this.settings, window.location.hostname);
|
||||
this.eventBus.subscribe('announce-zoom', {
|
||||
function: (config) => {
|
||||
this.zoom = {
|
||||
x: Math.log2(config.x),
|
||||
y: Math.log2(config.y)
|
||||
};
|
||||
}
|
||||
});
|
||||
// this.eventBus.send('get-current-config');
|
||||
},
|
||||
components: {
|
||||
ShortcutButton,
|
||||
@ -243,9 +187,6 @@ export default {
|
||||
AlignmentOptionsControlComponent
|
||||
},
|
||||
computed: {
|
||||
logarithmicZoom: function(){
|
||||
return Math.log2(this.zoom || 1);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async openOptionsPage() {
|
||||
@ -276,7 +217,9 @@ export default {
|
||||
newZoom = Math.pow(2, newZoom);
|
||||
console.log('new zoom:', newZoom);
|
||||
|
||||
this.eventBus.send('set-zoom', {zoom: newZoom, axis: axis});
|
||||
this.eventBus.send('set-zoom', {zoom: newZoom, axis: axis, noAnnounce: true});
|
||||
|
||||
// this.zoom = newZoom;
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -552,9 +552,6 @@ const ExtensionConf: SettingsInterface = {
|
||||
// -----------------------------------------
|
||||
// ::: ACTIONS :::
|
||||
// -----------------------------------------
|
||||
// Nastavitve za ukaze. Zamenja stare nastavitve za bližnične tipke.
|
||||
//
|
||||
// Polje 'shortcut' je tabela, če se slučajno lotimo kdaj delati choordov.
|
||||
actions: [{
|
||||
name: 'Trigger automatic detection', // name displayed in settings
|
||||
label: 'Automatic', // name displayed in ui (can be overridden in scope/playerUi)
|
||||
@ -1353,7 +1350,6 @@ const ExtensionConf: SettingsInterface = {
|
||||
// -----------------------------------------
|
||||
// ::: SITE CONFIGURATION :::
|
||||
// -----------------------------------------
|
||||
// Nastavitve za posamezno stran
|
||||
// Config for a given page:
|
||||
//
|
||||
// <hostname> : {
|
||||
@ -1370,7 +1366,6 @@ const ExtensionConf: SettingsInterface = {
|
||||
// override: <true|false> // override user settings for this site on update
|
||||
// }
|
||||
//
|
||||
// Veljavne vrednosti za možnosti
|
||||
// Valid values for options:
|
||||
//
|
||||
// status, arStatus, statusEmbedded:
|
||||
|
||||
@ -74,7 +74,7 @@ class Resizer {
|
||||
}
|
||||
}],
|
||||
'set-zoom': [{
|
||||
function: (config: any) => this.setZoom(config.zoom, config.axis)
|
||||
function: (config: any) => this.setZoom(config.zoom, config.axis, config.noAnnounce)
|
||||
}],
|
||||
'change-zoom': [{
|
||||
function: (config: any) => this.zoomStep(config.step)
|
||||
@ -331,13 +331,15 @@ class Resizer {
|
||||
this.applyScaling(stretchFactors);
|
||||
}
|
||||
|
||||
private applyScaling(stretchFactors) {
|
||||
console.log('applying scaling factors:', stretchFactors);
|
||||
|
||||
applyScaling(stretchFactors, options?: {noAnnounce?: boolean}) {
|
||||
this.stretcher.chromeBugMitigation(stretchFactors);
|
||||
|
||||
let translate = this.computeOffsets(stretchFactors);
|
||||
// let the UI know
|
||||
if(!options?.noAnnounce) {
|
||||
this.conf.eventBus.send('announce-zoom', {x: stretchFactors.xFactor, y: stretchFactors.yFactor});
|
||||
}
|
||||
|
||||
let translate = this.computeOffsets(stretchFactors);
|
||||
this.applyCss(stretchFactors, translate);
|
||||
}
|
||||
|
||||
@ -459,10 +461,10 @@ class Resizer {
|
||||
}
|
||||
}
|
||||
|
||||
setZoom(zoomLevel: number, axis?: 'x' | 'y', no_announce?) {
|
||||
setZoom(zoomLevel: number, axis?: 'x' | 'y', noAnnounce?) {
|
||||
this.manualZoom = true;
|
||||
console.log('setting zoom:', zoomLevel);
|
||||
this.zoom.setZoom(zoomLevel, axis, no_announce);
|
||||
this.zoom.setZoom(zoomLevel, axis, noAnnounce);
|
||||
}
|
||||
|
||||
zoomStep(step){
|
||||
|
||||
@ -59,7 +59,7 @@ class Zoom {
|
||||
this.processZoom();
|
||||
}
|
||||
|
||||
setZoom(scale: number, axis?: 'x' |'y', no_announce?){
|
||||
setZoom(scale: number, axis?: 'x' |'y', noAnnounce?){
|
||||
this.logger.log('info', 'debug', "[Zoom::setZoom] Setting zoom to", scale, "!");
|
||||
|
||||
// NOTE: SCALE IS NOT LOGARITHMIC
|
||||
@ -87,9 +87,7 @@ class Zoom {
|
||||
processZoom() {
|
||||
// this.conf.resizer.toFixedAr();
|
||||
|
||||
this.conf.restoreAr();
|
||||
this.conf.announceZoom(this.scale);
|
||||
|
||||
this.conf.resizer.applyScaling({xFactor: this.scale, yFactor: this.scaleY}, {noAnnounce: true});
|
||||
}
|
||||
|
||||
applyZoom(stretchFactors){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user