src/entities/environment/model/useEnvironmentDock.ts - dev - 45case/ptable

src/entities/environment/model/useEnvironmentDock.ts
204 строки5 KB
Olya
Страница Электроны + сайдбар с характеритстиками (Степень окисления, Конфигурация, Развёрнутая, Уровни энергии, ВЗМО)
24 июл 2026, 11:54
24 июл 2026, 11:543cf1d48
import { computed, ref } from "vue";

import { useTemperatureStore } from "@/entities/temperature";

export type EnvironmentPanel = "pressure" | "ph";
export type TemperatureReadoutUnit = "C" | "F" | "K";

export type EnvironmentReadout = {
  unit: string;
  value: number | string;
};

export type TemperatureReadout = {
  atMax: boolean;
  atMin: boolean;
  key: TemperatureReadoutUnit;
  label: string;
  max: number;
  min: number;
  value: number;
};

export const environmentPanels: ReadonlyArray<{ key: EnvironmentPanel; label: string }> = [
  { key: "pressure", label: "Давление" },
  { key: "ph", label: "pH" },
];

function clamp(value: number, min: number, max: number) {
  return Math.min(max, Math.max(min, value));
}

const isExpanded = ref(false);
const activePanel = ref<EnvironmentPanel>("pressure");

const pressureAtm = ref(1);
const ph = ref(7);

export function useEnvironmentDock() {
  const {
    currentTemperatureK,
    kelvinToCelsius,
    kelvinToFahrenheit,
    maxTemperatureK,
    minTemperatureK,
    setCurrentTemperatureK,
    setTemperatureFromCelsius,
    setTemperatureFromFahrenheit,
  } = useTemperatureStore();

  // Display bounds from rounded °C (ptable slider scale): -273…5727°C → -459…10341°F, 0…6000 K
  const minTemperatureC = Math.round(kelvinToCelsius(minTemperatureK));
  const maxTemperatureC = Math.round(kelvinToCelsius(maxTemperatureK));
  const minTemperatureF = Math.round((minTemperatureC * 9) / 5 + 32);
  const maxTemperatureF = Math.round((maxTemperatureC * 9) / 5 + 32);

  const temperatureC = computed({
    get: () => Math.round(kelvinToCelsius(currentTemperatureK.value)),
    set: (value: number) => {
      if (!Number.isFinite(value)) {
        return;
      }
      setTemperatureFromCelsius(clamp(value, minTemperatureC, maxTemperatureC));
    },
  });

  const temperatureF = computed({
    get: () => {
      // Keep °F in sync with the rounded °C readout at both ends of the slider.
      if (temperatureC.value >= maxTemperatureC) {
        return maxTemperatureF;
      }
      if (temperatureC.value <= minTemperatureC) {
        return minTemperatureF;
      }

      return Math.round(kelvinToFahrenheit(currentTemperatureK.value));
    },
    set: (value: number) => {
      if (!Number.isFinite(value)) {
        return;
      }
      setTemperatureFromFahrenheit(clamp(value, minTemperatureF, maxTemperatureF));
    },
  });

  const temperatureK = computed({
    get: () => Math.round(currentTemperatureK.value),
    set: (value: number) => {
      if (!Number.isFinite(value)) {
        return;
      }
      setCurrentTemperatureK(clamp(value, minTemperatureK, maxTemperatureK));
    },
  });

  const pressureBar = computed(() => (pressureAtm.value * 1.01325).toFixed(2));
  const pressureKpa = computed(() => Math.round(pressureAtm.value * 101.325));
  const phLabel = computed(() => ph.value.toFixed(1));

  const temperatureReadouts = computed<TemperatureReadout[]>(() => [
    {
      key: "C",
      label: "°C",
      min: minTemperatureC,
      max: maxTemperatureC,
      value: temperatureC.value,
      atMin: temperatureC.value <= minTemperatureC,
      atMax: temperatureC.value >= maxTemperatureC,
    },
    {
      key: "F",
      label: "°F",
      min: minTemperatureF,
      max: maxTemperatureF,
      value: temperatureF.value,
      atMin: temperatureF.value <= minTemperatureF,
      atMax: temperatureF.value >= maxTemperatureF,
    },
    {
      key: "K",
      label: "K",
      min: minTemperatureK,
      max: maxTemperatureK,
      value: temperatureK.value,
      atMin: temperatureK.value <= minTemperatureK,
      atMax: temperatureK.value >= maxTemperatureK,
    },
  ]);

  const pressureReadouts = computed<EnvironmentReadout[]>(() => [
    { value: pressureAtm.value, unit: "atm" },
    { value: pressureBar.value, unit: "bar" },
    { value: pressureKpa.value, unit: "kPa" },
  ]);

  function toggleExpanded() {
    isExpanded.value = !isExpanded.value;
  }

  function openPanel(panel: EnvironmentPanel) {
    activePanel.value = panel;
    isExpanded.value = true;
  }

  function stepTemperature(delta: number) {
    temperatureC.value = temperatureC.value + delta;
  }

  function setTemperatureByUnit(unit: TemperatureReadoutUnit, value: number) {
    if (unit === "C") {
      temperatureC.value = value;
      return;
    }
    if (unit === "F") {
      temperatureF.value = value;
      return;
    }
    temperatureK.value = value;
  }

  function stepTemperatureByUnit(unit: TemperatureReadoutUnit, delta: number) {
    if (unit === "C") {
      temperatureC.value = temperatureC.value + delta;
      return;
    }
    if (unit === "F") {
      temperatureF.value = temperatureF.value + delta;
      return;
    }
    temperatureK.value = temperatureK.value + delta;
  }

  function stepPressure(delta: number) {
    pressureAtm.value = clamp(pressureAtm.value + delta, 0, 500);
  }

  function stepPh(delta: number) {
    ph.value = Number(clamp(ph.value + delta, 0, 14).toFixed(1));
  }

  return {
    activePanel,
    isExpanded,
    maxTemperatureC,
    minTemperatureC,
    openPanel,
    ph,
    phLabel,
    pressureAtm,
    pressureBar,
    pressureKpa,
    pressureReadouts,
    setTemperatureByUnit,
    stepPh,
    stepPressure,
    stepTemperature,
    stepTemperatureByUnit,
    temperatureC,
    temperatureF,
    temperatureK,
    temperatureReadouts,
    toggleExpanded,
  };
}