chrono-phylo-tree 1.1.8 → 1.1.10

package/src/classes/Species.tsx

@@ -1,267 +0,0 @@
-import { sortArray } from "multiple-sorting-array";
-import { SpeciesJSON } from "../types";
-
-export class Species {
-  name = "";
-  apparition = 0;
-  duration = 0;
-  ancestor?: Species = undefined;
-  descendants: Species[] = [];
-  description?: string = undefined;
-  display = true;
-  image?: string = undefined;
-
-  private onPosition(ret = true) {
-    if(!ret) return ret;
-    return this.firstAncestor().stepsUntil(this)! % 2 === 0;
-  }
-
-  constructor(
-    name = '',
-    apparition = 0,
-    duration = 0,
-    ancestor: Species | undefined = undefined,
-    descendants: Species[] = [],
-    description: string | undefined = undefined,
-    image: string | undefined = undefined,
-  ) {
-    if(duration <= 0){
-      throw new Error("The duration of the species must be greater than 0");
-    }
-    this.name = name;
-    this.apparition = apparition;
-    this.duration = duration;
-    this.ancestor = ancestor;
-    this.descendants = descendants;
-    this.description = description === "" ? undefined : description;
-    this.image = image === "" ? undefined : image;
-  }
-
-  copy() : Species {
-    const fa = this.firstAncestor();
-    const n = fa.allDescendants(false).indexOf(this)
-    const sp = Species.fromJSON(fa.toJSON());
-    return sp.allDescendants(false)[n];
-  }
-
-  unlinkAncestor(): [Species, Species] | undefined {
-    if(!this.ancestor) {
-      return;
-    }
-    this.ancestor.descendants = this.ancestor.descendants.filter((d) => d !== this);
-    const exAncestor = this.ancestor;
-    this.ancestor = undefined;
-    return [exAncestor.firstAncestor(), this];
-  }
-
-  unlinkDescendant(descendant: Species): [Species, Species] | undefined {
-    if(!this.descendants.includes(descendant)) {
-      return;
-    }
-    this.descendants = this.descendants.filter((d) => d !== descendant);
-    descendant.ancestor = undefined;
-    return [this.firstAncestor(), descendant];
-  }
-
-  linkAncestor(ancestor: Species) {
-    if(this.ancestor === ancestor && ancestor.descendants.includes(this)) {
-      return;
-    }
-    if(ancestor.apparition > this.apparition) {
-      throw new Error(`The ancestor's apparition (${ancestor.apparition}) must be before or equal the descendant's apparition (${this.apparition})`);
-    }
-    if(ancestor.extinction() < this.apparition) {
-      throw new Error(`The ancestor's extinction (${ancestor.extinction()}) must be after or equal the descendant's apparition (${this.apparition})`);
-    }
-    if(this.ancestor !== ancestor) {
-      this.unlinkAncestor();
-    }
-    this.ancestor = ancestor;
-    ancestor.descendants.push(this);
-  }
-
-  linkDescendant(descendant: Species) {
-    if(descendant.ancestor === this && this.descendants.includes(descendant)) {
-      return;
-    }
-    if(descendant.apparition < this.apparition) {
-      throw new Error(`The descendant's apparition (${descendant.apparition}) must be after or equal the ancestor's apparition (${this.apparition})`);
-    }
-    if(descendant.extinction() > this.extinction()) {
-      throw new Error(`The descendant's extinction (${descendant.extinction()}) must be before or equal the ancestor's extinction (${this.extinction()})`);
-    }
-    if(this.descendants.includes(descendant)) {
-      return;
-    }
-    if(descendant.ancestor) {
-      descendant.unlinkAncestor();
-    }
-    this.descendants.push(descendant);
-    descendant.ancestor = this;
-  }
-
-  linkDescendants(descendants: Species[]) {
-    for(const desc of descendants) {
-      try {
-        this.linkDescendant(desc);
-      } catch (error) {
-        console.error(`Error linking descendant ${desc.name} to ancestor ${this.name}:`, error);
-      }
-    }
-  }
-
-  addDescendant(
-    name = '',
-    afterApparition = 0,
-    duration = 0,
-    description: string | undefined = undefined,
-    image: string | undefined = undefined,
-    copy = false
-  ) {
-    if(afterApparition < 0 || afterApparition > this.duration) {
-      throw new Error(`The apparition of the descendant must be between the apparition (${this.apparition}) and the extinction (${this.extinction()}) of the ancestor`);
-    }
-    const sp = copy ? this.copy() : this;
-    const desc = new Species(
-      name,
-      sp.apparition + Math.max(afterApparition, 0),
-      Math.max(duration, 0),
-      undefined,
-      [],
-      description,
-      image
-    );
-    desc.linkAncestor(sp);
-    return copy ? sp : desc;
-  }
-
-  removeDescendant(desc: Species) {
-    this.descendants = this.descendants.filter((d) => d !== desc);
-  }
-
-  addAncestor(
-    name = '',
-    previousApparition = 0,
-    duration = 0,
-    description: string | undefined = undefined,
-    image: string | undefined = undefined,
-    display = true,
-    copy = false
-  ) {
-    if(previousApparition < 0) {
-      throw new Error(`The apparition of the ancestor must be before or equal the apparition (${this.apparition}) of the descendant`);
-    }
-    if(duration < previousApparition){
-      throw new Error(`The extiction of the ancestor must be after or equal the apparition (${this.apparition}) of the descendant`);
-    }
-    const sp = copy ? this.copy() : this;
-    const anc = new Species(
-      name,
-      sp.apparition - Math.max(previousApparition, 0),
-      duration,
-      undefined,
-      [],
-      description,
-      image
-    );
-    anc.display = display;
-    sp.linkAncestor(anc);
-    return copy ? sp : anc;
-  }
-
-  extinction() {
-    return this.apparition + this.duration;
-  }
-
-  absoluteExtinction(): number {
-    return this.descendants.length > 0
-        ? Math.max(...this.allDescendants(false).map((desc) => desc.extinction()))
-        : this.extinction();
-  }
-
-  absoluteDuration() {
-    return this.absoluteExtinction() - this.apparition;
-  }
-
-  firstAncestor(includeNotDisplay = false): Species {
-    return this.ancestor ? ((this.ancestor.display || includeNotDisplay) ? this.ancestor.firstAncestor() : this) : this;
-  }
-
-  cousinsExtinction() {
-    return this.firstAncestor().absoluteExtinction();
-  }
-
-  allDescendants(sort = true): Species[] {
-    const desc = sort ? sortArray(this.descendants, s => -s.apparition, s => -s.absoluteExtinction()) : this.descendants;
-    if (desc.length === 0) {
-      return [this];
-    }
-    const limitDesc = desc.filter(desc => desc.apparition >= this.extinction());
-    const prevDesc = desc.filter(desc => limitDesc.indexOf(desc) === -1);
-    const halfFunc = this.onPosition(sort) ? Math.ceil : Math.floor;
-    const half = halfFunc(limitDesc.length / 2);
-    const lim0 = limitDesc.slice(0, half);
-    const lim1 = limitDesc.slice(half);
-    return lim0.flatMap((d) => d.allDescendants(sort)).concat([this]).concat(lim1.flatMap((d) => d.allDescendants(sort))).concat(prevDesc.flatMap((d) => d.allDescendants(sort)));
-  }
-
-  stepsChain(desc: Species, includeNotDisplay = false): Species[] {
-    if(!this.allDescendants(false).includes(desc)) {
-      return [];
-    }
-    return [this as Species].concat(this.descendants.find(d => d.allDescendants(false).includes(desc))?.stepsChain(desc) ?? []).filter(d => d.display || includeNotDisplay);
-  }
-
-  stepsUntil(desc: Species, includeNotDisplay = false): number | undefined {
-    if(!this.allDescendants(false).includes(desc)) {
-      return;
-    }
-    return this.stepsChain(desc, includeNotDisplay).length - 1;
-  }
-
-  stepsUntilLastDescendant(icludeNotDisplay = false): number{
-    if(this.descendants.length === 0) {
-      return 0;
-    }
-    return Math.max(...this.allDescendants(false).filter(d => d.descendants.length === 0).map(d => this.stepsUntil(d, icludeNotDisplay) ?? 0));
-  }
-
-  toJSON(): SpeciesJSON {
-    return {
-      name: this.name,
-      apparition: !this.ancestor ? this.apparition : undefined,
-      afterApparition: this.ancestor ? this.apparition - this.ancestor.apparition : undefined,
-      description: this.description,
-      duration: this.duration,
-      descendants: this.descendants.length > 0 ? this.descendants.map((desc) => desc.toJSON()) : undefined,
-      image: this.image,
-    };
-  }
-
-  async saveJSON(filename: string | undefined = undefined) {
-    try{
-      const jsonString = JSON.stringify(this.toJSON(), null, 2);
-      const blob = new Blob([jsonString], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename ?? `${this.name}.json`;
-      a.click();
-      URL.revokeObjectURL(url);
-    } catch(errror) {
-      console.error("Error saving file:", errror);
-    }
-  }
-
-  static fromJSON(json: SpeciesJSON, ancestor?: Species): Species {
-    const afterApparition = json.afterApparition ?? 0;
-    const apparition = ancestor ? ancestor.apparition : json.apparition ?? 0;
-    const sp = new Species(json.name ?? "", apparition + afterApparition, json.duration ?? 0, ancestor, [], json.description, json.image);
-    if(json.descendants) {
-      for (const desc of json.descendants) {
-        sp.descendants.push(Species.fromJSON(desc, sp));
-      }
-    }
-    return sp
-  }
-}

package/src/components/HoverDescription.tsx

@@ -1,27 +0,0 @@
-import { Species } from "../classes/Species";
-import { scientificNotation } from "../utils/scientificNotation";
-
-export const HoverDescription = ({
-    hoverPosition,
-    hoverSpecies,
-    offset = { x: 0, y: 50 }
-} : HoverDescriptionProps) => {
-    return (
-        <nav
-            style={{
-                left: hoverPosition.x + offset.x,
-                top: hoverPosition.y - offset.y,
-            }}
-            className="absolute bg-gray-500 p-2.5"
-        >
-            <p>{hoverSpecies.name} ({scientificNotation(hoverSpecies.apparition)} — {scientificNotation(hoverSpecies.extinction())}):</p>
-            <p>{hoverSpecies.description}</p>
-        </nav>
-    );
-};
-
-interface HoverDescriptionProps {
-    hoverPosition: { x: number; y: number };
-    hoverSpecies: Species;
-    offset?: { x: number; y: number };
-}

package/src/components/LanguageSelector.tsx

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

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