Add new zoom options (but they don't do anything yet)
This commit is contained in:
parent
5a0abb3595
commit
5c48747d0f
@ -78,9 +78,7 @@
|
||||
</Popup>
|
||||
<button class="flex-grow" @click="exportSettings()">Export settings</button>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
<ConfirmButton
|
||||
dialogType="danger"
|
||||
@onConfirmed="resetSettings"
|
||||
|
||||
@ -134,16 +134,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ShortcutButton from '../../../components/ShortcutButton.vue';
|
||||
import EditShortcutButton from '../../../components/EditShortcutButton';
|
||||
import EditModeMixin from '../../../utils/EditModeMixin';
|
||||
import KeyboardShortcutParserMixin from '../../../utils/KeyboardShortcutParserMixin';
|
||||
import CommsMixin from '../../../utils/CommsMixin';
|
||||
import AspectRatioType from '../../../../../common/enums/AspectRatioType.enum';
|
||||
import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
|
||||
import EditShortcutButton from '@csui/src/components/EditShortcutButton';
|
||||
import EditModeMixin from '@csui/src/utils/EditModeMixin';
|
||||
import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
|
||||
import CommsMixin from '@csui/src/utils/CommsMixin';
|
||||
import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ShortcutButton,
|
||||
EditShortcutButton,
|
||||
},
|
||||
mixins: [
|
||||
// ComputeActionsMixin,
|
||||
EditModeMixin,
|
||||
KeyboardShortcutParserMixin,
|
||||
CommsMixin
|
||||
],
|
||||
data() {
|
||||
|
||||
return {
|
||||
AspectRatioType: AspectRatioType,
|
||||
|
||||
@ -156,12 +165,6 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
// ComputeActionsMixin,
|
||||
EditModeMixin,
|
||||
KeyboardShortcutParserMixin,
|
||||
CommsMixin
|
||||
],
|
||||
props: [
|
||||
'settings', // required for buttons and actions, which are global
|
||||
'siteSettings',
|
||||
@ -169,10 +172,6 @@ export default {
|
||||
'isEditing',
|
||||
'allowSettingSiteDefault'
|
||||
],
|
||||
components: {
|
||||
ShortcutButton,
|
||||
EditShortcutButton,
|
||||
},
|
||||
computed: {
|
||||
siteDefaultCrop() {
|
||||
if (!this.siteSettings) {
|
||||
|
||||
@ -50,10 +50,10 @@
|
||||
v-model="editModeOptions.stretch.selected.arguments.limit"
|
||||
>
|
||||
</div>
|
||||
<div class="hint">
|
||||
If vertical borders would take up less than this much of screen width, the image will be stretched. If the borders are too thick, image will not be stretched.
|
||||
Value of 1 means 100%. Value of 0.1 means vertical black bars can take up 10% of the width at most. There's no validation on this, use common sense.
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
If vertical borders would take up less than this much of screen width, the image will be stretched. If the borders are too thick, image will not be stretched.
|
||||
Value of 1 means 100%. Value of 0.1 means vertical black bars can take up 10% of the width at most. There's no validation on this, use common sense.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -70,12 +70,12 @@
|
||||
@blur="editModeOptions.stretch.selected.label === 'Stretch to ...' ? editModeOptions.stretch.selected.label = `Stretch to ${editModeOptions.stretch.selected.arguments.ratio}` : null"
|
||||
>
|
||||
</div>
|
||||
<div class="hint">
|
||||
</div>
|
||||
<div class="hint">
|
||||
You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
|
||||
(in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
|
||||
your numbers without quote marks. Number will be converted to factor form on save.
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Label:
|
||||
@ -83,9 +83,9 @@
|
||||
<div class="input">
|
||||
<input v-model="editModeOptions.stretch.selected.label">
|
||||
</div>
|
||||
<div class="hint">
|
||||
Label for the button. You can make it say something other than ratio.
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
Label for the button. You can make it say something other than ratio.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -99,11 +99,11 @@
|
||||
>
|
||||
</EditShortcutButton>
|
||||
</div>
|
||||
<div class="hint">
|
||||
<b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
|
||||
The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
|
||||
any keyboard shortcuts defined by the site itself.
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
<b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
|
||||
The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
|
||||
any keyboard shortcuts defined by the site itself.
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-end">
|
||||
|
||||
@ -1,86 +1,232 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!--
|
||||
min, max and value need to be implemented in js as this slider
|
||||
should use logarithmic scale
|
||||
-->
|
||||
<div class="flex flex-row flex-end">
|
||||
<Button
|
||||
v-if="zoomAspectRatioLocked"
|
||||
label="Unlock aspect ratio"
|
||||
icon="lock-open"
|
||||
:fixedWidth="true"
|
||||
@click="toggleZoomAr()"
|
||||
|
||||
<div class="sub-panel-content flex flex-row flex-wrap">
|
||||
|
||||
<ShortcutButton
|
||||
v-for="(command, index) of settings?.active.commands.zoom"
|
||||
class="flex b3 button"
|
||||
:class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command)}"
|
||||
:key="index"
|
||||
:label="command.label"
|
||||
:shortcut="getKeyboardShortcutLabel(command)"
|
||||
@click="editMode ? editAction(command, index, 'zoom') : execAction(command)"
|
||||
>
|
||||
</Button>
|
||||
<Button
|
||||
v-else
|
||||
label="Lock aspect ratio"
|
||||
icon="lock"
|
||||
:fixedWidth="true"
|
||||
@click="toggleZoomAr()"
|
||||
>
|
||||
</Button>
|
||||
</ShortcutButton>
|
||||
|
||||
<!-- "Add new" button -->
|
||||
<ShortcutButton
|
||||
v-if="editMode"
|
||||
class="button b3"
|
||||
:class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
|
||||
label="Add new"
|
||||
@click="editAction(
|
||||
{action: 'set-ar-zoom', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
|
||||
null,
|
||||
'zoom'
|
||||
)"
|
||||
></ShortcutButton>
|
||||
</div>
|
||||
<template v-if="zoomAspectRatioLocked">
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="3"
|
||||
: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: {{getZoomForDisplay('x')}}
|
||||
|
||||
<template v-if="isEditing">
|
||||
<div v-if="editMode && editModeOptions?.zoom?.selected" class="sub-panel-content">
|
||||
<div class="edit-action-area-header">
|
||||
<span class="text-primary">Editing options for:</span> <b>{{editModeOptions?.zoom?.selected?.label}}</b>
|
||||
<template v-if="editModeOptions?.zoom?.selectedIndex === null && editModeOptions?.zoom?.selected?.label !== 'New aspect ratio'">(New ratio)</template>
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
<div class="edit-action-area">
|
||||
<!-- Some options are only shown for type 4 (fixed) zooms -->
|
||||
<template v-if="editModeOptions?.zoom?.selected?.arguments?.type === AspectRatioType.Fixed">
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Ratio:
|
||||
</div>
|
||||
<div class="input">
|
||||
<!-- We do an ugly in order to avoid spamming functions down at the bottom -->
|
||||
<input
|
||||
v-model="editModeOptions.zoom.selected.arguments.ratio"
|
||||
@blur="editModeOptions.zoom.selected.label === 'New aspect ratio' ? editModeOptions.zoom.selected.label = editModeOptions.zoom.selected.arguments.ratio : null"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
|
||||
(in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
|
||||
your numbers without quote marks. Number will be converted to factor form on save.
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Label:
|
||||
</div>
|
||||
<div class="input">
|
||||
<input v-model="editModeOptions.zoom.selected.label">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
Label for the button. You can make it say something other than ratio.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- editing keyboard shortcuts is always allowed -->
|
||||
<div class="field">
|
||||
<div class="label">Shortcut:</div>
|
||||
<div class="">
|
||||
<EditShortcutButton
|
||||
:shortcut="editModeOptions?.zoom?.selected?.shortcut"
|
||||
@shortcutChanged="updateSelectedShortcut($event, 'zoom')"
|
||||
>
|
||||
</EditShortcutButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
<b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
|
||||
The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
|
||||
any keyboard shortcuts defined by the site itself.
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-end">
|
||||
<div
|
||||
v-if="editModeOptions?.zoom?.selected?.arguments?.type === AspectRatioType.Fixed && editModeOptions?.zoom?.selectedIndex !== null"
|
||||
class="button"
|
||||
@click="deleteAction('zoom')"
|
||||
>
|
||||
<mdicon name="delete"></mdicon> Delete
|
||||
</div>
|
||||
<div class="flex-grow"></div>
|
||||
<div class="button" @click="cancelEdit('zoom')">Cancel</div>
|
||||
<div class="button" @click="saveShortcut('zoom')">
|
||||
<mdicon name="floppy"></mdicon>
|
||||
|
||||
<template v-if="editModeOptions?.zoom?.selectedIndex === null">Add</template>
|
||||
<template v-else>Save</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div v-if="siteSettings && allowSettingSiteDefault" class="edit-action-area">
|
||||
<div class="field">
|
||||
<div class="label">Default for this site</div>
|
||||
<div class="select">
|
||||
<select
|
||||
:value="siteDefaultZoom"
|
||||
@change="setDefaultZoom($event, 'site')"
|
||||
>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.zoom"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>Horizontal zoom</div>
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="zoom.x"
|
||||
@input="changeZoom($event.target.value, 'x')"
|
||||
/>
|
||||
|
||||
<div>Vertical zoom</div>
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="3"
|
||||
: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: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
</div>
|
||||
<!--
|
||||
min, max and value need to be implemented in js as this slider
|
||||
should use logarithmic scale
|
||||
-->
|
||||
<div class="flex flex-row flex-end">
|
||||
<Button
|
||||
v-if="zoomAspectRatioLocked"
|
||||
label="Unlock aspect ratio"
|
||||
icon="lock-open"
|
||||
:fixedWidth="true"
|
||||
@click="toggleZoomAr()"
|
||||
>
|
||||
</Button>
|
||||
<Button
|
||||
v-else
|
||||
label="Lock aspect ratio"
|
||||
icon="lock"
|
||||
:fixedWidth="true"
|
||||
@click="toggleZoomAr()"
|
||||
>
|
||||
</Button>
|
||||
</div>
|
||||
<template v-if="zoomAspectRatioLocked">
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="3"
|
||||
: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: {{getZoomForDisplay('x')}}
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>Horizontal zoom</div>
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="zoom.x"
|
||||
@input="changeZoom($event.target.value, 'x')"
|
||||
/>
|
||||
|
||||
<div>Vertical zoom</div>
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="3"
|
||||
: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: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
|
||||
import EditShortcutButton from '@csui/src/components/EditShortcutButton';
|
||||
import EditModeMixin from '@csui/src/utils/EditModeMixin';
|
||||
import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
|
||||
import CommsMixin from '@csui/src/utils/CommsMixin';
|
||||
import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ShortcutButton,
|
||||
EditShortcutButton,
|
||||
},
|
||||
mixins: [
|
||||
// ComputeActionsMixin,
|
||||
EditModeMixin,
|
||||
KeyboardShortcutParserMixin,
|
||||
CommsMixin
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
AspectRatioType,
|
||||
|
||||
zoomAspectRatioLocked: true,
|
||||
zoom: {
|
||||
x: 0,
|
||||
@ -96,15 +242,26 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
|
||||
],
|
||||
props: [
|
||||
'settings', // required for buttons and actions, which are global
|
||||
'siteSettings',
|
||||
'eventBus',
|
||||
'isEditing'
|
||||
],
|
||||
created() {
|
||||
if (this.isEditing) {
|
||||
this.enableEditMode();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isEditing(newValue, oldValue) {
|
||||
if (newValue) {
|
||||
this.enableEditMode();
|
||||
} else {
|
||||
this.disableEditMode();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getZoomForDisplay(axis) {
|
||||
// zoom is internally handled logarithmically, because we want to have x0.5, x1, x2, x4 ... magnifications
|
||||
@ -146,6 +303,9 @@ export default {
|
||||
this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: axis ?? 'x'});
|
||||
}
|
||||
},
|
||||
isActiveZoom(command) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -135,6 +135,19 @@
|
||||
:isEditing="true"
|
||||
></StretchOptionsPanel>
|
||||
</div>
|
||||
|
||||
<!-- ZOOM OPTIONS -->
|
||||
<div>
|
||||
<div class="flex flex-row">
|
||||
<h3 class="mth3">ZOOM OPTIONS</h3>
|
||||
</div>
|
||||
|
||||
<ZoomOptionsPanel
|
||||
:settings="settings"
|
||||
:eventBus="eventBus"
|
||||
:isEditing="true"
|
||||
></ZoomOptionsPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -142,16 +155,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '../components/Button.vue'
|
||||
import BrowserDetect from '../../../ext/conf/BrowserDetect';
|
||||
import CropOptionsPanel from './PanelComponents/VideoSettings/CropOptionsPanel.vue'
|
||||
import StretchOptionsPanel from './PanelComponents/VideoSettings/StretchOptionsPanel.vue'
|
||||
import Button from '@csui/src/components/Button.vue'
|
||||
import BrowserDetect from '@src/ext/conf/BrowserDetect';
|
||||
import CropOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue'
|
||||
import StretchOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue'
|
||||
import ZoomOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Button,
|
||||
CropOptionsPanel,
|
||||
StretchOptionsPanel
|
||||
StretchOptionsPanel,
|
||||
ZoomOptionsPanel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -267,7 +282,7 @@ export default {
|
||||
gap: 1rem;
|
||||
|
||||
> * {
|
||||
width: calc(50% - 0.5rem);
|
||||
width: calc(33% - 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ import CropModePersistence from '../../common/enums/CropModePersistence.enum';
|
||||
import AspectRatioType from '../../common/enums/AspectRatioType.enum';
|
||||
import { update } from 'lodash';
|
||||
|
||||
const ExtensionConfPatch = [
|
||||
const ExtensionConfPatch = Object.freeze([
|
||||
{
|
||||
forVersion: '6.2.4',
|
||||
updateFn: (userOptions: SettingsInterface, defaultOptions) => {
|
||||
@ -35,6 +35,19 @@ const ExtensionConfPatch = [
|
||||
}, {
|
||||
forVersion: '6.2.6',
|
||||
updateFn: (userOptions: SettingsInterface, defaultOptions) => {
|
||||
|
||||
console.warn('[ultrawidify] STARTING SETTINGS MIGRATION TO 6.2.6');
|
||||
|
||||
if (!userOptions.commands) {
|
||||
userOptions.commands = {
|
||||
zoom: [],
|
||||
crop: [],
|
||||
stretch: [],
|
||||
pan: [],
|
||||
internal: []
|
||||
};
|
||||
}
|
||||
|
||||
userOptions.commands.zoom = [{
|
||||
action: 'change-zoom',
|
||||
label: 'Zoom +5%',
|
||||
@ -92,9 +105,139 @@ const ExtensionConfPatch = [
|
||||
showDetectionDetails: true
|
||||
}
|
||||
}
|
||||
|
||||
const newZoomActions = [{
|
||||
action: 'set-zoom',
|
||||
label: 'Reset zoom',
|
||||
shortcut: {
|
||||
key: 'r',
|
||||
code: 'KeyR',
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: true,
|
||||
onKeyUp: true,
|
||||
onKeyDown: false,
|
||||
},
|
||||
internalOnly: true,
|
||||
actionId: 'set-zoom-reset'
|
||||
}, {
|
||||
action: 'set-ar-zoom',
|
||||
label: 'Automatic',
|
||||
comment: 'Automatically detect aspect ratio and zoom accordingly',
|
||||
arguments: {
|
||||
type: AspectRatioType.Automatic
|
||||
},
|
||||
shortcut: {
|
||||
key: 'a',
|
||||
code: 'KeyA',
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: true,
|
||||
onKeyUp: true,
|
||||
onKeyDown: false,
|
||||
}
|
||||
}, {
|
||||
action: 'set-ar-zoom',
|
||||
label: 'Cycle',
|
||||
comment: 'Cycle through zoom options',
|
||||
arguments: {
|
||||
type: AspectRatioType.Cycle
|
||||
},
|
||||
shortcut: {
|
||||
key: 'c',
|
||||
code: 'KeyC',
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: true,
|
||||
onKeyUp: true,
|
||||
onKeyDown: false,
|
||||
}
|
||||
}, {
|
||||
action: 'set-ar-zoom',
|
||||
label: '21:9',
|
||||
comment: 'Zoom for 21:9 aspect ratio (1:2.39)',
|
||||
arguments: {
|
||||
type: AspectRatioType.Fixed,
|
||||
ratio: 2.39
|
||||
},
|
||||
shortcut: {
|
||||
key: 'd',
|
||||
code: 'KeyD',
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: true,
|
||||
onKeyUp: false,
|
||||
onKeyDown: true,
|
||||
}
|
||||
}, {
|
||||
action: 'set-ar-zoom',
|
||||
label: '18:9',
|
||||
comment: 'Zoom for 18:9 aspect ratio (1:2)',
|
||||
arguments: {
|
||||
type: AspectRatioType.Fixed,
|
||||
ratio: 1.78
|
||||
},
|
||||
shortcut: {
|
||||
key: 's',
|
||||
code: 'KeyS',
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: true,
|
||||
onKeyUp: false,
|
||||
onKeyDown: true,
|
||||
}
|
||||
}, {
|
||||
action: 'set-ar-zoom',
|
||||
label: '32:9',
|
||||
comment: 'Zoom for 32:9 aspect ratio',
|
||||
arguments: {
|
||||
type: AspectRatioType.Fixed,
|
||||
ratio: 3.56
|
||||
},
|
||||
}];
|
||||
|
||||
const compareShortcuts = (a: any, b: any) => {
|
||||
if (!a || !b) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return a.key === b.key && b.code === b.code && a.ctrlKey == b.ctrlKey && a.shiftKey == b.shiftKey && a.metaKey == a.metaKey && a.altKey == b.altKey;
|
||||
}
|
||||
|
||||
const hasConflict = (shortcut: any) => {
|
||||
for (const ct in userOptions.commands) {
|
||||
for (const command of userOptions.commands[ct]) {
|
||||
if (compareShortcuts(shortcut, command.shortcut)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const zoomAction of newZoomActions) {
|
||||
if (
|
||||
!userOptions.commands.zoom.find(
|
||||
x => x.action === zoomAction.action
|
||||
&& x.arguments?.type === zoomAction.arguments?.type
|
||||
&& x.arguments?.ratio === zoomAction.arguments?.ratio
|
||||
)
|
||||
) {
|
||||
userOptions.commands.zoom.push({
|
||||
...zoomAction,
|
||||
shortcut: hasConflict(zoomAction.shortcut) ? undefined : zoomAction.shortcut
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
]);
|
||||
|
||||
|
||||
export default ExtensionConfPatch;
|
||||
|
||||
@ -401,11 +401,96 @@ const ExtensionConf: SettingsInterface = {
|
||||
}, {
|
||||
action: 'set-zoom',
|
||||
label: 'Reset zoom',
|
||||
arguments: {
|
||||
zoom: 1,
|
||||
shortcut: {
|
||||
key: 'r',
|
||||
code: 'KeyR',
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: true,
|
||||
onKeyUp: true,
|
||||
onKeyDown: false,
|
||||
},
|
||||
internalOnly: true,
|
||||
actionId: 'set-zoom-reset'
|
||||
}, {
|
||||
action: 'set-ar-zoom',
|
||||
label: 'Automatic',
|
||||
comment: 'Automatically detect aspect ratio',
|
||||
arguments: {
|
||||
type: AspectRatioType.Automatic
|
||||
},
|
||||
shortcut: {
|
||||
key: 'a',
|
||||
code: 'KeyA',
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: true,
|
||||
onKeyUp: true,
|
||||
onKeyDown: false,
|
||||
}
|
||||
}, {
|
||||
action: 'set-ar-zoom',
|
||||
label: 'Cycle',
|
||||
comment: 'Cycle through crop options',
|
||||
arguments: {
|
||||
type: AspectRatioType.Cycle
|
||||
},
|
||||
shortcut: {
|
||||
key: 'c',
|
||||
code: 'KeyC',
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: true,
|
||||
onKeyUp: true,
|
||||
onKeyDown: false,
|
||||
}
|
||||
}, {
|
||||
action: 'set-ar-zoom',
|
||||
label: '21:9',
|
||||
comment: 'Crop for 21:9 aspect ratio (1:2.39)',
|
||||
arguments: {
|
||||
type: AspectRatioType.Fixed,
|
||||
ratio: 2.39
|
||||
},
|
||||
shortcut: {
|
||||
key: 'd',
|
||||
code: 'KeyD',
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: true,
|
||||
onKeyUp: false,
|
||||
onKeyDown: true,
|
||||
}
|
||||
}, {
|
||||
action: 'set-ar-zoom',
|
||||
label: '18:9',
|
||||
comment: 'Crop for 18:9 aspect ratio (1:2)',
|
||||
arguments: {
|
||||
type: AspectRatioType.Fixed,
|
||||
ratio: 1.78
|
||||
},
|
||||
shortcut: {
|
||||
key: 's',
|
||||
code: 'KeyS',
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
shiftKey: true,
|
||||
onKeyUp: false,
|
||||
onKeyDown: true,
|
||||
}
|
||||
}, {
|
||||
action: 'set-ar-zoom',
|
||||
label: '32:9',
|
||||
comment: 'Crop for 32:9 aspect ratio',
|
||||
arguments: {
|
||||
type: AspectRatioType.Fixed,
|
||||
ratio: 3.56
|
||||
},
|
||||
}],
|
||||
pan: [{
|
||||
action: 'set-alignment',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user