chrono-phylo-tree 1.1.9 → 1.1.11

package/src/components/NavBar.tsx

@@ -1,234 +0,0 @@
-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;
-}

package/src/components/PhTree.tsx

@@ -1,362 +0,0 @@
-import { useEffect, useState } from "react";
-import { Species } from "../classes/Species";
-
-interface MultiplePhTreesProps {
-    speciesList: Species[];
-    width?: number;
-    height?: number;
-    padding?: number;
-    stroke?: string;
-    format?: (n: number) => string;
-    chronoScale?: boolean;
-    showImages?: boolean;
-    presentTime?: number;
-    handleMouseMove?: (x: number, y: number) => void;
-    children?: (
-        species: Species | undefined,
-        showMenu: boolean,
-        toggleShowMenu: (species: Species) => void,
-        hoverSpecies: Species | undefined
-    ) => any;
-}
-
-export const MultiplePhTrees = (
-    {
-        speciesList,
-        width = 1000,
-        height = 50,
-        padding = 0,
-        stroke = "grey",
-        format = (n) => n.toString(),
-        chronoScale = true,
-        showImages = true,
-        presentTime,
-        handleMouseMove,
-        children
-    }: MultiplePhTreesProps
-) => {
-    const copies = speciesList.map(sp => sp.copy());
-    const lifeApparition = Math.min(...copies.map(sp => sp.apparition));
-    const lifeApparitionDuration = Math.max(...copies.map(sp => sp.apparition - lifeApparition));
-    const life = new Species(
-        "",
-        lifeApparition,
-        lifeApparitionDuration,
-        undefined,
-        []
-    );
-    life.display = false;
-    life.linkDescendants(copies);
-    return (
-        <PhTree
-            commonAncestor={life}
-            width={width}
-            height={height}
-            padding={padding}
-            stroke={stroke}
-            format={format}
-            chronoScale={chronoScale}
-            showImages={showImages}
-            presentTime={presentTime}
-            handleMouseMove={handleMouseMove}
-        >
-            {(species, showMenu, toggleShowMenu, hoverSpecies) => children?.(species, showMenu, toggleShowMenu, hoverSpecies)}
-        </PhTree>
-    );
-};
-
-interface PhTreeProps {
-    commonAncestor: Species;
-    width?: number;
-    height?: number;
-    padding?: number;
-    stroke?: string;
-    format?: (n: number) => string;
-    chronoScale?: boolean;
-    showImages?: boolean;
-    presentTime?: number;
-    handleMouseMove?: (x: number, y: number) => void;
-    children?: (
-        species: Species | undefined,
-        showMenu: boolean,
-        toggleShowMenu: (species: Species) => void,
-        hoverSpecies: Species | undefined
-    ) => any;
-}
-
-export const PhTree = (
-    {
-        commonAncestor,
-        width = 1000,
-        height = 50,
-        padding = 0,
-        stroke = "grey",
-        format = (n) => n.toString(),
-        chronoScale = true,
-        showImages = true,
-        presentTime,
-        handleMouseMove,
-        children
-    }: PhTreeProps
-) => {
-    const [showMenu, setShowMenu] = useState(false);
-    const [species, setSpecies] = useState<Species | undefined>(undefined);
-    const [hoverSpecies, setHoverSpecies] = useState<Species | undefined>(undefined);
-    const [showDesc, setShowDesc] = useState<Map<Species, boolean>>(commonAncestor.allDescendants().reduce((acc, desc) => acc.set(desc, true), new Map()));
-
-    useEffect(() => {
-        setShowDesc(commonAncestor.allDescendants().reduce((acc, desc) => acc.set(desc, true), new Map()));
-    }, [commonAncestor]);
-
-    const toggleShowMenu = (sp: Species) => {
-        setSpecies(showMenu ? undefined : sp);
-        setShowMenu(!showMenu);
-    };
-
-    const toggleShowDesc = (sp: Species) => {
-        const newShowDesc = new Map(showDesc);
-        newShowDesc.set(sp, !showDesc.get(sp));
-        setShowDesc(newShowDesc);
-    };
-
-    const hoverShowMenu = (sp: Species | undefined) => {
-        setHoverSpecies(sp);
-    };
-
-    const isPresentTimeDefined = presentTime !== undefined && chronoScale;
-    const heightFactor = (ad: Species[]) => showImages ? ad.map<number>(sp => sp.image ? 2 : 1).reduce((a, b) => a + b) : ad.length;
-
-    return (
-        <>
-            <svg
-                width={width * (isPresentTimeDefined ? (Math.min(presentTime, commonAncestor.absoluteExtinction()) - commonAncestor.apparition) / commonAncestor.absoluteDuration() : 1)}
-                height={height * heightFactor(isPresentTimeDefined ? commonAncestor.allDescendants().filter(desc => desc.apparition < presentTime) : commonAncestor.allDescendants())}
-                onMouseMove={(event) => {handleMouseMove?.(event.clientX, event.clientY)}}
-            >
-                <DrawTree
-                    commonAncestor={commonAncestor}
-                    species={commonAncestor}
-                    y={-1}
-                    scaleX={width / (chronoScale ? commonAncestor.absoluteDuration() : (Math.max(0, commonAncestor.stepsUntilLastDescendant()) + 1))}
-                    scaleY={height}
-                    padding={padding}
-                    stroke={stroke}
-                    format={format}
-                    chronoScale={chronoScale}
-                    showImages={showImages}
-                    presentTime={presentTime}
-                    toggleShowMenu={toggleShowMenu}
-                    hoverShowMenu={hoverShowMenu}
-                    showDesc={showDesc}
-                    changeShowDesc={toggleShowDesc}
-                />
-            </svg>
-            {children?.(species, showMenu, toggleShowMenu, hoverSpecies)}
-        </>
-    );
-};
-
-interface DrawTreeProps {
-    commonAncestor: Species;
-    species: Species;
-    y: number;
-    scaleX: number;
-    scaleY: number;
-    padding?: number;
-    stroke?: string;
-    format?: (n: number) => string;
-    chronoScale?: boolean;
-    showImages?: boolean;
-    presentTime?: number;
-    toggleShowMenu: (s: Species) => void;
-    hoverShowMenu: (s: Species | undefined) => void;
-    showDesc: Map<Species, boolean>;
-    changeShowDesc: (s: Species) => void;
-}
-
-const DrawTree = ({
-    commonAncestor,
-    species,
-    y,
-    scaleX,
-    scaleY,
-    padding = 0,
-    stroke = "grey",
-    format = (n: number) => n.toString(),
-    chronoScale = true,
-    showImages = true,
-    presentTime = undefined,
-    toggleShowMenu,
-    hoverShowMenu,
-    showDesc,
-    changeShowDesc
-}: DrawTreeProps) => {
-    const isPresentTimeDefined = presentTime !== undefined && chronoScale;
-    const all = commonAncestor.allDescendants().filter(desc => isPresentTimeDefined ? desc.apparition < presentTime : true);
-    const spIndex = all.indexOf(species);
-    const startX = (chronoScale ? species.apparition - commonAncestor.apparition : (commonAncestor.stepsUntil(species) ?? 0)) * scaleX;
-    const endX = startX + (chronoScale ? Math.min(showDesc.get(species) ? species.duration : species.absoluteDuration(), isPresentTimeDefined ? presentTime - species.apparition : species.absoluteDuration()) : 1) * scaleX;
-    const endY = (showImages && spIndex > 0) ? [...Array(spIndex).keys()].map(i => all[i]).map(sp => (sp.image ? 2 : 1) * scaleY).reduce((a, b) => a + b) : (spIndex * scaleY);
-    const descendants = species.descendants.filter(desc => isPresentTimeDefined ? desc.apparition < presentTime : true);
-    const branchX = descendants.length > 0 ? startX + (Math.min(...descendants.map(desc => desc.apparition)) - species.apparition) * scaleX : endX;
-    
-    return (
-        <g key={spIndex}>
-            {y >= 0 && (
-                <line
-                    x1={startX}
-                    y1={y}
-                    x2={startX}
-                    y2={endY}
-                    stroke={stroke}
-                />
-            )}
-            {species.display && <HorizontalLine
-                commonAncestor={commonAncestor}
-                species={species}
-                height={scaleY}
-                x1={startX}
-                x2={endX}
-                x0={branchX}
-                y={endY}
-                stroke={stroke}
-                changeShowDesc={() => changeShowDesc(species)}
-                showDesc={showDesc.get(species)}
-                padding={padding}
-                format={format}
-                chronoScale={chronoScale}
-                showImages={showImages}
-                presentTime={presentTime}
-                toggleShowMenu={toggleShowMenu}
-                hoverShowMenu={hoverShowMenu}
-            />}
-            {species.descendants.map((desc, index) => (
-                <g className={(showDesc.get(species) && descendants.includes(desc)) ? "block" : "hidden"} key={all.length + index}>
-                    <DrawTree
-                        commonAncestor={commonAncestor}
-                        species={desc}
-                        y={desc.display ? endY : -1}
-                        scaleX={scaleX}
-                        scaleY={scaleY}
-                        padding={padding}
-                        stroke={stroke}
-                        format={format}
-                        chronoScale={chronoScale}
-                        showImages={showImages}
-                        presentTime={presentTime}
-                        toggleShowMenu={toggleShowMenu}
-                        showDesc={showDesc}
-                        changeShowDesc={changeShowDesc}
-                        hoverShowMenu={hoverShowMenu}
-                    />
-                </g>
-            ))}
-        </g>
-    );
-};
-
-interface HorizontalLineProps {
-    commonAncestor: Species;
-    species: Species;
-    height: number;
-    x1: number;
-    x2: number;
-    x0?: number;
-    y: number;
-    stroke: string;
-    showDesc?: boolean;
-    changeShowDesc?: () => void;
-    padding?: number;
-    format?: (n: number) => string;
-    chronoScale?: boolean;
-    showImages?: boolean;
-    presentTime?: number;
-    toggleShowMenu: (s: Species) => void;
-    hoverShowMenu: (s: Species | undefined) => void;
-    className?: string;
-    buttonClassName?: string;
-}
-
-const HorizontalLine = ({
-    commonAncestor,
-    species,
-    height,
-    x1, x2, x0, y,
-    stroke,
-    showDesc = true,
-    changeShowDesc = () => {},
-    padding = 0,
-    format = (n) => n.toString(),
-    chronoScale = true,
-    showImages = true,
-    presentTime,
-    toggleShowMenu,
-    hoverShowMenu,
-    className,
-    buttonClassName
-}: HorizontalLineProps) => {
-    const isPresentTimeDefined = presentTime !== undefined;
-    const all = commonAncestor.allDescendants().filter(desc => isPresentTimeDefined ? desc.apparition < presentTime : true);
-    const index = (s: Species) => all.indexOf(s);
-    const orientation = species.ancestor ? (index(species) > index(species.ancestor) ? -3 : 1) : 1;
-    const descendants = species.descendants.filter(desc => isPresentTimeDefined ? desc.apparition < presentTime : true);
-    const lastOne = descendants.filter(desc => desc.apparition === species.extinction()).length === 0;
-    const extinction = format(Math.min(showDesc ? species.extinction() : species.absoluteExtinction(), isPresentTimeDefined ? presentTime : species.absoluteExtinction()));
-    return (
-        <g>
-            <line
-                x1={x1}
-                y1={y}
-                x2={x2}
-                y2={y}
-                stroke={stroke}
-            />
-            <foreignObject
-                x={x1 + padding}
-                y={y + (padding) * orientation}
-                width={(chronoScale ? x0 ?? x2 : x2) - x1 - 2 * padding}
-                height={height + (showImages && species.image ? height : 0)}
-            >
-                <div className={`flex flex-row justify-between w-full ${className ?? ""}`}>
-                    <div>
-                        {chronoScale ? format(species.apparition) : ""}
-                    </div>
-                    <button
-                        className={`p-0.625 justify-center flex flex-col items-center ${buttonClassName ?? ""}`}
-                        onClick={() => toggleShowMenu(species)}
-                        onMouseEnter={() => hoverShowMenu(species)}
-                        onMouseLeave={() => hoverShowMenu(undefined)}
-                    >
-                        {species.name}
-                        {species.image && showImages && (
-                            <img
-                                src={species.image}
-                                alt={species.name}
-                                style={{ height: height }}
-                            />
-                        )}
-                    </button>
-                    {descendants.length > 0 ?
-                        <button onClick={changeShowDesc} className="h-1" style={{maxWidth: 4}}>
-                            {((lastOne || !showDesc) && (!x0 || x0 === x2)) ? extinction : ""}
-                        </button> :
-                        <div>
-                            {chronoScale ? extinction : ""}
-                        </div>
-                    }
-                </div>
-            </foreignObject>
-            {chronoScale && x0 && x0 < x2 && (
-                <foreignObject
-                    x={x0 + padding}
-                    y={y + padding * orientation}
-                    width={x2 - x0 - 2 * padding}
-                    height={height}
-                >
-                    <div className="flex flex-row justify-end w-full">
-                        {(lastOne || !showDesc) && chronoScale ? extinction : ""}
-                    </div>
-                </foreignObject>)}
-        </g>
-    );
-}

package/src/index.css

@@ -1,68 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export { Species } from "./classes/Species";
-export { PhTree, MultiplePhTrees } from "./components/PhTree";
-export { Menu } from "./components/Menu";
-export { codeText, codeTextAlt, getLanguageOptions } from "./utils/translate";

package/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/src/types.d.ts

@@ -1,9 +0,0 @@
-export interface SpeciesJSON {
-    name: string;
-    apparition?: number;
-    duration?: number;
-    description?: string;
-    descendants?: SpeciesJSON[];
-    afterApparition?: number;
-    image?: string;
-}

package/src/utils/between.tsx

@@ -1,3 +0,0 @@
-export const between = (n: number, min: number, max: number) => {
-    return n < min ? min : n > max ? max : n;
-};