66 lines
2.7 KiB
Vue
66 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
import { useMosaicStore } from '@/stores/mosaic'
|
|
|
|
const store = useMosaicStore()
|
|
const { settings } = storeToRefs(store)
|
|
|
|
function updateColorTolerance(event: Event): void {
|
|
store.setColorTolerance(Number((event.target as HTMLInputElement).value))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="panel-section">
|
|
<h2>Nastavenia analýzy</h2>
|
|
<label class="range-field">
|
|
<span><b>Tolerancia výberu</b><output>{{ settings.floodTolerance }}</output></span>
|
|
<input v-model.number="settings.floodTolerance" type="range" min="2" max="100" step="1" />
|
|
<small>Vyššia hodnota spojí väčšie farebné odchýlky v jednej ploche.</small>
|
|
</label>
|
|
<label class="range-field">
|
|
<span><b>Podobnosť farieb (ΔE)</b><output>{{ settings.colorTolerance }}</output></span>
|
|
<input :value="settings.colorTolerance" type="range" min="1" max="40" step="1" @change="updateColorTolerance" />
|
|
<small>Po zmene sa farebné skupiny automaticky prepočítajú.</small>
|
|
</label>
|
|
<div class="field-row">
|
|
<label>
|
|
<span>Susednosť</span>
|
|
<select v-model.number="settings.connectivity">
|
|
<option :value="4">4-smery</option>
|
|
<option :value="8">8-smerov</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>Ostatné skupiny</span>
|
|
<select v-model="settings.otherGroupsMode">
|
|
<option value="normal">Normálne</option>
|
|
<option value="dim">Stlmiť</option>
|
|
<option value="hidden">Skryť</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<details>
|
|
<summary>Rozšírené</summary>
|
|
<label class="range-field compact">
|
|
<span><b>Prahová tmavosť obrysu</b><output>{{ settings.darkBoundaryThreshold.toFixed(3) }}</output></span>
|
|
<input v-model.number="settings.darkBoundaryThreshold" type="range" min="0" max="0.2" step="0.005" />
|
|
</label>
|
|
</details>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.range-field { display: grid; gap: 7px; margin-top: 14px; }
|
|
.range-field > span { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; }
|
|
.range-field b { font-weight: 650; }
|
|
.range-field output { min-width: 34px; padding: 1px 6px; border-radius: 5px; background: #e8edf3; color: #334155; text-align: center; font-variant-numeric: tabular-nums; }
|
|
.range-field small { color: #718096; font-size: .69rem; line-height: 1.35; }
|
|
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
|
|
.field-row label { display: grid; gap: 5px; color: #475569; font-size: .72rem; }
|
|
select { width: 100%; }
|
|
details { margin-top: 13px; color: #475569; font-size: .76rem; }
|
|
summary { cursor: pointer; }
|
|
.compact { margin-bottom: 4px; }
|
|
</style>
|