fix: arreglar que el núcleo de una etiqueta no pueda entrar en el soporte de sus etiquetas adyacentes
This commit is contained in:
@@ -1,19 +1,23 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function MembershipFunctionControls({ selectedTerm, currentMf, selectedColor, baseScale, updateCurrentMf }) {
|
||||
export default function Controls({ selectedTerm, currentMf, selectedColor, baseScale, mfDefinitions, updateCurrentMf }) {
|
||||
if (!selectedTerm || !currentMf) return null;
|
||||
|
||||
const scaleKeys = Object.keys(baseScale);
|
||||
const selectedIndex = scaleKeys.indexOf(selectedTerm);
|
||||
|
||||
let minBound = 0;
|
||||
let maxBound = 1;
|
||||
let prevCoreEnd = 0;
|
||||
let prevSupportEnd = 0;
|
||||
let nextCoreStart = 1;
|
||||
let nextSupportStart = 1;
|
||||
|
||||
if (selectedIndex > 0) {
|
||||
minBound = baseScale[scaleKeys[selectedIndex - 1]];
|
||||
const prevTerm = scaleKeys[selectedIndex - 1];
|
||||
prevCoreEnd = mfDefinitions[prevTerm].coreEnd;
|
||||
prevSupportEnd = mfDefinitions[prevTerm].supportEnd;
|
||||
}
|
||||
if (selectedIndex >= 0 && selectedIndex < scaleKeys.length - 1) {
|
||||
maxBound = baseScale[scaleKeys[selectedIndex + 1]];
|
||||
if (selectedIndex < scaleKeys.length - 1) {
|
||||
const nextTerm = scaleKeys[selectedIndex + 1];
|
||||
nextCoreStart = mfDefinitions[nextTerm].coreStart;
|
||||
nextSupportStart = mfDefinitions[nextTerm].supportStart;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -25,35 +29,41 @@ export default function MembershipFunctionControls({ selectedTerm, currentMf, se
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
|
||||
{/* Columna izquierda: Inicios */}
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
|
||||
<span>Inicio del Núcleo</span><span style={{ color: selectedColor }}>{currentMf.coreStart.toFixed(3)}</span>
|
||||
<span>Inicio del Núcleo (Límite: {prevSupportEnd.toFixed(2)})</span>
|
||||
<span style={{ color: selectedColor }}>{currentMf.coreStart.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={minBound} max={maxBound} step="0.001" value={currentMf.coreStart} onChange={(e) => updateCurrentMf('coreStart', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor }} />
|
||||
<input type="range" min={prevSupportEnd} max={nextCoreStart} step="0.001" value={currentMf.coreStart} onChange={(e) => updateCurrentMf('coreStart', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor }} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
|
||||
<span>Inicio del Soporte (Límite: {minBound.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.supportStart.toFixed(3)}</span>
|
||||
<span>Inicio del Soporte (Límite: {prevCoreEnd.toFixed(2)})</span>
|
||||
<span style={{ color: selectedColor }}>{currentMf.supportStart.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={minBound} max={maxBound} step="0.001" value={currentMf.supportStart} onChange={(e) => updateCurrentMf('supportStart', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor, opacity: 0.7 }} />
|
||||
<input type="range" min={prevCoreEnd} max={nextCoreStart} step="0.001" value={currentMf.supportStart} onChange={(e) => updateCurrentMf('supportStart', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor, opacity: 0.7 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Columna derecha: Fines */}
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
|
||||
<span>Fin del Núcleo</span><span style={{ color: selectedColor }}>{currentMf.coreEnd.toFixed(3)}</span>
|
||||
<span>Fin del Núcleo (Límite: {nextSupportStart.toFixed(2)})</span>
|
||||
<span style={{ color: selectedColor }}>{currentMf.coreEnd.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={minBound} max={maxBound} step="0.001" value={currentMf.coreEnd} onChange={(e) => updateCurrentMf('coreEnd', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor }} />
|
||||
<input type="range" min={prevCoreEnd} max={nextSupportStart} step="0.001" value={currentMf.coreEnd} onChange={(e) => updateCurrentMf('coreEnd', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor }} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
|
||||
<span>Fin del Soporte (Límite: {maxBound.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.supportEnd.toFixed(3)}</span>
|
||||
<span>Fin del Soporte (Límite: {nextCoreStart.toFixed(2)})</span>
|
||||
<span style={{ color: selectedColor }}>{currentMf.supportEnd.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={minBound} max={maxBound} step="0.001" value={currentMf.supportEnd} onChange={(e) => updateCurrentMf('supportEnd', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor, opacity: 0.7 }} />
|
||||
<input type="range" min={prevCoreEnd} max={nextCoreStart} step="0.001" value={currentMf.supportEnd} onChange={(e) => updateCurrentMf('supportEnd', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor, opacity: 0.7 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user