chrono-phylo-tree 1.0.16 → 1.1.1

package/src/components/LanguageSelector.tsx

@@ -0,0 +1,29 @@
+import { codeText } from "../utils/translate";
+
+export const LanguageSelector = ({className = "", languages, language, setLanguage}: LanguageSelectorProps) => {
+    return (
+      <tr className={"text-start " + className}>
+        <td>{codeText("nvlbl05", language)}:</td>
+        <td>
+          <select
+            value={language}
+            onChange={(e) => setLanguage(e.target.value)}
+            className="bg-white dark:bg-[#242424] rounded"
+          >
+            {Array.from(languages).map(([key, value], index) => (
+              <option value={key} key={index}>
+                {value}
+              </option>
+            ))}
+          </select>
+        </td>
+      </tr>
+    );
+  };
+
+interface LanguageSelectorProps {
+  className?: string;
+  languages: Map<string, string>;
+  language: string;
+  setLanguage: (language: string) => void;
+}

package/src/components/Menu.tsx

@@ -0,0 +1,348 @@
+import { useState } from "react";
+import { Species } from "../classes/Species";
+import { between } from "../utils/between";
+import { codeText } from "../utils/translate";
+
+interface MenuProps {
+    species: Species;
+    language?: string;
+    open?: boolean;
+    onClose?: () => void;
+    saveSpecies?: (
+        s: Species,
+        name: string,
+        apparition: number,
+        duration: number,
+        description: string,
+        image: string
+    ) => Promise<void>;
+    createDescendant?: (
+        s: Species,
+        name: string,
+        afterApparition: number,
+        duration: number,
+        description: string,
+        image: string
+    ) => Promise<void>;
+    createAncestor?: (
+        s: Species,
+        name: string,
+        previousApparition: number,
+        duration: number,
+        description: string,
+        image: string
+    ) => Promise<void>;
+    deleteAncestor?: () => Promise<void>;
+    deleteSpecies?: () => Promise<void>;
+}
+
+export const Menu = ({species, language, open, onClose, saveSpecies, createDescendant, createAncestor, deleteAncestor, deleteSpecies}: MenuProps) => {
+    const [name, setName] = useState(species.name);
+    const [apparition, setApparition] = useState(species.apparition);
+    const [duration, setDuration] = useState(species.duration);
+    const [description, setDescription] = useState(species.description ?? "");
+    const [addDescendant, setAddDescendant] = useState(false);
+    const [addAncestor, setAddAncestor] = useState(false);
+    const [image, setImage] = useState(species.image ?? "");
+
+    const toggleAddDescendant = () => {
+        setAddDescendant(!addDescendant);
+    };
+
+    const toggleAddAncestor = () => {
+        setAddAncestor(!addAncestor);
+    };
+
+    const uniqueDescendant = (s: Species): boolean => {
+        return s.ancestor ? s.ancestor.descendants.length === 1 && uniqueDescendant(s.ancestor) : true;
+    }
+
+    return(
+        <Modal open={open} onClose={onClose}>
+            <form style={{backgroundColor: "grey"}} className="flex flex-col text-start w-auto fixed p-2.5">
+                <Data
+                    name={name}
+                    setName={setName}
+                    apparition={apparition}
+                    setApparition={(n) => {
+                        setApparition(species.ancestor ? between(n, species.ancestor.apparition, species.ancestor.extinction()) : n);
+                        setDuration(species.descendants.length > 0 ? Math.max(Math.max(...species.descendants.map(desc => desc.apparition)) - apparition, duration) : duration);
+                    }}
+                    minApparition={species.ancestor ? species.ancestor.apparition : undefined}
+                    maxApparition={species.ancestor ? species.ancestor.extinction() : undefined}
+                    duration={duration}
+                    setDuration={setDuration}
+                    minDuration={species.descendants.length > 0 ? Math.max(...species.descendants.map(desc => desc.apparition)) - apparition : undefined}
+                    maxDuration={species.descendants.length > 0 ? Math.max(...species.descendants.map(desc => desc.apparition)) - apparition : undefined}
+                    description={description}
+                    setDescription={setDescription}
+                    image={image}
+                    setImage={setImage}
+                    language={language}
+                >
+                    <button onClick={async () => {
+                        try{
+                            await saveSpecies?.(species, name, apparition, duration, description, image);
+                            onClose?.();
+                        } catch(e) {
+                            console.error(e);
+                        }
+                    }}>
+                        {codeText("spbtn00", language ?? "")}
+                    </button>
+                    <button type="button" onClick={deleteSpecies}>
+                        {codeText("spbtn01", language ?? "")}
+                    </button>
+                    <button type="button" onClick={toggleAddDescendant}>
+                        {codeText("spbtn02", language ?? "")}
+                    </button>
+                    {addDescendant &&
+                        <AddDescendant
+                            species={species}
+                            language={language}
+                            onClose={onClose}
+                            createDescendant={createDescendant}
+                        />}
+                    {species.ancestor ?
+                        uniqueDescendant(species) &&
+                        <button type="button" onClick={async () => {
+                            try {
+                                await deleteAncestor?.();
+                                onClose?.();
+                            } catch(e){
+                                console.error(e);
+                            }
+                        }}>
+                            {codeText("spbtn04" + (species.ancestor.ancestor ? "_0" : ""), language ?? "")}
+                        </button> :
+                        <button type="button" onClick={toggleAddAncestor}>
+                            {codeText("spbtn03", language ?? "")}
+                        </button>}
+                    {addAncestor &&
+                        <AddAncestor
+                            species={species}
+                            language={language}
+                            onClose={onClose}
+                            createAncestor={createAncestor}
+                        />}
+                    <button type="button" onClick={onClose}>
+                        {codeText("spbtn05", language ?? "")}
+                    </button>
+                </Data>
+            </form>
+        </Modal>
+    );
+};
+
+interface DataProps {
+    name: string;
+    setName: (name: string) => void;
+    apparition: number;
+    setApparition: (apparition: number) => void;
+    minApparition?: number;
+    maxApparition?: number;
+    duration: number;
+    setDuration: (duration: number) => void;
+    minDuration?: number;
+    maxDuration?: number;
+    description?: string;
+    setDescription: (description: string) => void;
+    image: string;
+    setImage: (image: string) => void;
+    language?: string;
+    children?: any;
+}
+
+const Data = ({
+    name,
+    setName,
+    apparition,
+    setApparition,
+    minApparition,
+    maxApparition,
+    duration,
+    setDuration,
+    minDuration,
+    maxDuration,
+    description,
+    setDescription,
+    language,
+    image,
+    setImage,
+    children
+}: DataProps) => {
+    return (
+        <>
+            <table>
+                <tbody>
+                    <tr>
+                        <td>{codeText("splbl00", language ?? "")}:</td>
+                        <td>
+                            <input
+                            type="text"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{codeText("splbl01", language ?? "")}:</td>
+                        <td>
+                            <input
+                                type="number"
+                                min={minApparition}
+                                max={maxApparition}
+                                value={apparition}
+                                onChange={(e) => setApparition(Number(e.target.value))}
+                            />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{codeText("splbl02", language ?? "")}:</td>
+                        <td>
+                            <input
+                                type="number"
+                                min={minDuration}
+                                max={maxDuration}
+                                value={duration}
+                                onChange={(e) => setDuration(Number(e.target.value))}
+                            />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{codeText("splbl03", language ?? "")}:</td>
+                        <td>
+                            <textarea
+                                value={description}
+                                onChange={(e) => setDescription(e.target.value)}
+                            />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{codeText("splbl04", language ?? "")}:</td>
+                        <td>
+                            <input
+                                type="text"
+                                value={image}
+                                onChange={(e) => setImage(e.target.value)}
+                            />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colSpan={2}>
+                            <img
+                                src={image}
+                                style={{height: "100px"}}
+                            />
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            {children}
+        </>
+    );
+};
+
+const AddDescendant = ({species, language, onClose, createDescendant}: MenuProps) => {
+    const [name, setName] = useState('');
+    const [afterApparition, setAfterApparition] = useState(species.duration);
+    const [duration, setDuration] = useState(species.duration);
+    const [description, setDescription] = useState('');
+    const [image, setImage] = useState('');
+
+    return(
+        <>
+            <Data
+                name={name}
+                setName={setName}
+                apparition={species.apparition + afterApparition}
+                setApparition={(n) => setAfterApparition(n - species.apparition)}
+                minApparition={species.apparition}
+                maxApparition={species.extinction()}
+                duration={duration}
+                setDuration={setDuration}
+                description={description}
+                setDescription={setDescription}
+                image={image}
+                setImage={setImage}
+                language={language}
+            >
+                <button type="button" onClick={async () => {
+                    try{
+                        await createDescendant?.(species, name, afterApparition, duration, description, image);
+                        onClose?.();
+                    } catch(e) {
+                        console.error(e);
+                    }
+                }}>
+                    {codeText("cdbtn00", language ?? "")}
+                </button>
+            </Data>
+        </>
+    );
+};
+
+const AddAncestor = ({species, language, onClose, createAncestor}: MenuProps) => {
+    const [name, setName] = useState('');
+    const [previousApparition, setPreviousApparition] = useState(species.duration);
+    const [duration, setDuration] = useState(species.duration);
+    const [description, setDescription] = useState('');
+    const [image, setImage] = useState('');
+
+    return(
+        <>
+            <Data
+                name={name}
+                setName={setName}
+                apparition={species.apparition - previousApparition}
+                setApparition={(n) => {
+                    setPreviousApparition(species.apparition - n);
+                    setDuration(Math.max(species.apparition - n, duration));
+                }}
+                maxApparition={species.apparition}
+                duration={duration}
+                setDuration={setDuration}
+                minDuration={previousApparition}
+                description={description}
+                setDescription={setDescription}
+                image={image}
+                setImage={setImage}
+                language={language}
+            >
+                <button type="button" onClick={async () => {
+                    try {
+                        await createAncestor?.(species, name, previousApparition, duration, description, image);
+                        onClose?.();
+                    } catch (e) {
+                        console.error(e);
+                    }
+                }}>
+                    {codeText("cdbtn00", language ?? "")}
+                </button>
+            </Data>
+        </>
+    );
+};
+
+interface ModalProps {
+    open?: boolean;
+    onClose?: () => void;
+    children: any;
+}
+
+const Modal = ({open, onClose, children}: ModalProps) => {
+    return (
+        <div
+            style={{backgroundColor: open ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0)',}}
+            className={`flex fixed inset-0 justify-center items-center transition-colors duration-300 ease-in-out ${open ? "visible" : "hidden"}`}
+            onClick={onClose}
+        >
+            <div
+                onClick={(e) => e.stopPropagation()}
+                className="flex justify-center items-center"
+            >
+                {children}
+            </div>
+        </div>
+    );
+};

package/src/components/NavBar.tsx

@@ -0,0 +1,234 @@
+import { Species } from "../classes/Species";
+import { codeText } from "../utils/translate";
+import { LanguageSelector } from "./LanguageSelector";
+
+export const NavBar = ({
+    species,
+    color,
+    lineColor,
+    setLineColor,
+    language,
+    languages,
+    setLanguage,
+    minScale = 1e-12,
+    maxScale,
+    scale,
+    setScale,
+    showScaleNumber,
+    chronoScale,
+    setChronoScale,
+    showHover,
+    setShowHover,
+    showImages,
+    setShowImages,
+    presentTime,
+    presentTimeBoolean,
+    setPresentTimeBoolean,
+    changePresentTime,
+    setFromJson,
+    deleteAllSpecies,
+    createEmptySpecies,
+    showExample
+}: NavBarProps) => {
+    return (
+        <nav style={{
+            backgroundColor: color,
+            maxWidth: window.screen.width - 64,
+            }}
+            className={`flex flex-col sm:flex-row w-auto ${species ? "fixed" : "static"} p-2.5 box-border ${species ? "transform translate-z-0" : "transform-none"}`}
+        >
+            <table className="flex flex-col justify-start text-start">
+                <tbody>
+                    <LanguageSelector
+                        className="block sm:hidden"
+                        languages={languages}
+                        language={language}
+                        setLanguage={setLanguage}
+                    />
+                    <tr className="block sm:hidden h-2.5"/>
+                    <tr>
+                        <td>{codeText("nvlbl00", language)}: </td>
+                        <td>
+                            <input
+                                type="range"
+                                min={minScale}
+                                max={maxScale}
+                                step={minScale}
+                                value={maxScale - scale + minScale}
+                                onChange={(e) => setScale(maxScale - Number(e.target.value) + minScale)}
+                            /> {showScaleNumber && <input
+                                type="number"
+                                min={1}
+                                max={maxScale}
+                                value={scale}
+                                onChange={(e) => setScale(Number(e.target.value))}
+                            />}
+                        </td>
+                    </tr>
+                    <tr className="h-2.5"/>
+                    <tr>
+                        <td>{codeText("nvlbl06", language)}: </td>
+                        <td>
+                            <input
+                                type="checkbox"
+                                checked={chronoScale}
+                                onChange={(e) => setChronoScale(e.target.checked)}
+                            />
+                        </td>
+                    </tr>
+                    <tr className="h-2.5"/>
+                    <tr>
+                        <td>{codeText("nvlbl07", language)}: </td>
+                        <td>
+                            <input
+                                type="checkbox"
+                                checked={showHover}
+                                onChange={(e) => setShowHover(e.target.checked)}
+                            />
+                        </td>
+                    </tr>
+                    <tr className="h-2.5"/>
+                    <tr>
+                        <td>{codeText("nvlbl08", language)}</td>
+                        <td>
+                            <input
+                                type="checkbox"
+                                checked={showImages}
+                                onChange={(e) => setShowImages(e.target.checked)}
+                            />
+                        </td>
+                    </tr>
+                    <tr className="h-2.5"/>
+                    <tr>
+                        <td>{codeText("nvlbl01", language)}: </td>
+                        <td>
+                            <input
+                                type="range"
+                                min={species ? species.apparition : 0}
+                                max={species ? species.absoluteExtinction() : 1}
+                                value={presentTime}
+                                onChange={(e) => changePresentTime(Number(e.target.value))}
+                                disabled={!presentTimeBoolean || !chronoScale}
+                            /> <input
+                                type="number"
+                                min={species ? species.apparition : 0}
+                                max={species ? species.absoluteExtinction() : 1}
+                                value={presentTime}
+                                onChange={(e) => changePresentTime(Number(e.target.value))}
+                                disabled={!presentTimeBoolean || !chronoScale}
+                            /> <input
+                                type="checkbox"
+                                checked={presentTimeBoolean}
+                                onChange={(e) => setPresentTimeBoolean(e.target.checked)}
+                                disabled={!chronoScale}
+                            />
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div className="h-2.5 sm:w-2.5 sm:h-auto"/>
+            <table className="flex flex-col justify-start text-start">
+                <tbody>
+                    <tr>
+                        <td>{codeText("nvlbl03", language)}: </td>
+                        <td>
+                            <a href="https://github.com/LUCHER4321/chrono-phylo-tree" target="_blank" className="ml-1.25 flex items-center">
+                                <img style={{maxHeight: 25}} src="https://img.logo.dev/github.com?token=pk_VXzZR_o_QTelazRSvSRkNw&format=png"/>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr className="h-2.5"/>
+                    <tr>
+                        <td>{codeText("nvlbl04", language)}: </td>
+                        <td>
+                            <input
+                                type="file"
+                                accept=".json"
+                                value={undefined}
+                                onChange={async (e) => await setFromJson(e.target.files?.[0])}
+                            />
+                        </td>
+                    </tr>
+                    <tr className="h-2.5"/>
+                    <tr className="block sm:hidden">
+                        <td>{codeText("nvlbl02", language)}: </td>
+                        <td>
+                            <input
+                                type="color"
+                                value={lineColor}
+                                onChange={(e) => setLineColor(e.target.value)}
+                            />
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody>
+                    <tr className="h-2.5 sm:h-auto"/>
+                    <tr className="flex flex-col sm:flex-row">
+                        <button type="button" onClick={async () => species ? deleteAllSpecies() : await createEmptySpecies()}>
+                            {codeText("nvbtn00" + (species ? "_0" : ""), language)}
+                        </button>
+                        <div className="h-2.5 sm:w-2.5 sm:h-auto"/>
+                        <button type="button" onClick={showExample}>
+                            {codeText("nvbtn01", language)}
+                        </button>
+                        <div className="h-2.5 sm:w-2.5 sm:h-auto"/>
+                        <button onClick={async () => await species?.saveJSON()} disabled={!species}>
+                            {codeText("nvbtn02", language)}
+                        </button>
+                    </tr>
+                </tbody>
+            </table>
+            <div className="h-2.5 sm:w-2.5 sm:h-auto"/>
+            <table className="flex flex-col justify-start text-start hidden sm:block">
+                <tbody>
+                    <LanguageSelector
+                        languages={languages}
+                        language={language}
+                        setLanguage={setLanguage}
+                    />
+                    <tr className="h-2.5"/>
+                    <tr>
+                        <td>{codeText("nvlbl02", language)}:</td>
+                        <td>
+                            <input
+                                type="color"
+                                value={lineColor}
+                                onChange={(e) => setLineColor(e.target.value)}
+                            />
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </nav>
+    );
+}
+
+interface NavBarProps {
+    species?: Species;
+    color: string;
+    lineColor: string;
+    setLineColor: (lineColor: string) => void;
+    language: string;
+    languages: Map<string, string>;
+    setLanguage: (language: string) => void;
+    minScale?: number;
+    maxScale: number;
+    scale: number;
+    setScale: (scale: number) => void;
+    showScaleNumber: boolean;
+    chronoScale: boolean;
+    setChronoScale: (chronoScale: boolean) => void;
+    showHover: boolean;
+    setShowHover: (showHover: boolean) => void;
+    showImages: boolean;
+    setShowImages: (showImages: boolean) => void;
+    presentTime: number;
+    setPresentTime: (presentTime: number) => void;
+    presentTimeBoolean: boolean;
+    setPresentTimeBoolean: (presentTimeBoolean: boolean) => void;
+    changePresentTime: (presentTime: number) => void;
+    setFromJson: (file: File | undefined) => Promise<void>;
+    deleteAllSpecies: () => void;
+    createEmptySpecies: () => Promise<void>;
+    showExample: () => void;
+}