TPsoft.org/Mozaic
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zakladna implementacia by Codex

Browse Source
This commit is contained in:
Igor Miňo
2026-08-01 07:28:21 +02:00
parent 1b71803407
commit a5973a5168
21 changed files with 1629 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/src/components/SettingsPanel.vue Normal file
View File

@ -0,0 +1,65 @@
<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>