@figtreejs/core 0.0.1-alpha.0

package/src/layouts/layout-interface.ts

@@ -0,0 +1,90 @@
+import type { layoutOptions } from "../components/figtree/figtree-types";
+//TODO make tree
+
+// TODO caching
+
+//
+export interface Label {
+  x: number;
+  y: number;
+  alignmentBaseline: string;
+  textAnchor: string;
+  rotation: number;
+  alignedPos?: { x: number; y: number };
+}
+export interface Vertex {
+  number: number;
+  x: number;
+  y: number;
+  hidden: boolean | undefined;
+  labelHidden: boolean | undefined;
+  level: number;
+  branch?: {
+    d: string;
+    label: Label;
+  };
+  theta?: number; //angle
+  r?: number; //radius
+  nodeLabel: Label;
+}
+
+export interface ArbitraryVertex {
+  hidden: boolean;
+  labelHidden: boolean;
+  number: number;
+  x: number;
+  y: number;
+  level: number;
+  theta?: number; //angle
+  pathPoints: { x: number; y: number }[];
+  nodeLabel: {
+    dx: number;
+    dy: number;
+    alignmentBaseline: string;
+    textAnchor: string;
+    rotation?: number;
+  };
+}
+
+//ids match node ids
+export interface Vertices {
+  type: "Rectangular" | "Polar" | "Radial";
+  vertices: Vertex[];
+  origin?: { x: number; y: number }; // used by polar layout to denote the position of the root (or stem) which can change
+  theta?: [number, number]; // used by polar layout to denote the range of angles
+  axisLength?: number; // provided by layouts that support axis
+}
+
+export interface ArbitraryVertices {
+  vertices: ArbitraryVertex[];
+  extent: { x: [number, number]; y: [number, number] };
+}
+
+export interface internalLayoutOptions extends layoutOptions {
+  // all layout options plus width and height of drawable area
+  width?: number;
+  height?: number;
+}
+
+export interface CartoonData {
+  cartooned: boolean;
+  collapseFactor: number;
+}
+
+export const defaultInternalLayoutOptions = {
+  width: 1000,
+  height: 1000,
+  rootLength: 0,
+  rootAngle: 0,
+  angleRange: 2 * Math.PI - 0.3,
+  tipSpace: () => 1,
+  curvature: 0,
+  showRoot: false,
+  spread: 1,
+  fishEye: { x: 0, y: 0, scale: 0 },
+  cartoonedNodes: new Map(),
+  pollard: 0,
+  padding: 20,
+  invert: false,
+  minRadius: 0,
+};

package/src/layouts/types.ts

@@ -0,0 +1,32 @@
+export interface simpleVertex {
+  x: number;
+  y: number;
+}
+export interface simplePolarVertex extends simpleVertex {
+  theta: number;
+  r: number;
+}
+
+export interface FunctionalVertex extends simpleVertex {
+  layoutClass: layoutClass;
+  nodeLabel?: NodeLabelType;
+}
+
+export interface PolarVertex extends simplePolarVertex {
+  layoutClass: layoutClass.Polar;
+  nodeLabel?: NodeLabelType;
+}
+
+export enum layoutClass {
+  Rectangular = "Rectangular",
+  Polar = "Polar",
+  Radial = "Radial",
+}
+
+export type NodeLabelType = {
+  alignmentBaseline: React.SVGAttributes<SVGTextElement>["alignmentBaseline"];
+  textAnchor: React.SVGAttributes<SVGTextElement>["textAnchor"];
+  dxFactor: number;
+  dyFactor: number;
+  rotation: number;
+};

package/src/path.helpers.ts

@@ -0,0 +1,81 @@
+// Normalization of SVG path commands
+// 1. parse path to array of commands - parse-svg-path
+// 2. make all commands absolute - abs-svg-path
+// 3. convert all commands to Curves. normalize-svg-path //cubic bezier curves with 2 control points and the end point
+// 4. split path into n number of curves
+
+// curve splitting by https://pomax.github.io/bezierinfo/#introduction
+
+import abs from 'abs-svg-path'
+import normalize from 'normalize-svg-path'
+import parse from 'parse-svg-path'
+import type { NormalizedCommand } from './@custom-types/svg-path-types';
+import { unNullify } from './utils';
+
+class point{
+    x:number;
+    y:number;
+    constructor(x:number,y:number){
+        this.x=x
+        this.y=y
+    }
+}
+
+const NUMBER_OF_POINTS=6; // this should be more than needed by layouts 
+type curveArray = [string, number, number, number, number, number, number];
+export function normalizePath(path:string):string{ //TODO this might remove the fill on cartoons.
+    const parsedPath = parse(path) //as AnyCommand[]
+    const absPath = abs(parsedPath)
+    const normalizedPath = normalize(absPath) // normalized path is [M, x,y ] [C, x1,y1, x2,y2, x,y]....
+
+    let newPath = `${normalizedPath[0][0]} ${normalizedPath[0][1]} ${normalizedPath[0][2]} `
+    const curves = normalizedPath.filter((d:NormalizedCommand)=>d[0]==="C").map((curve:curveArray)=>{return [new point(curve[1], curve[2]),new point(curve[3], curve[4]),new point(curve[5], curve[6])]})
+
+    if(curves.length>NUMBER_OF_POINTS){
+        throw new Error(`Path must have no more than ${NUMBER_OF_POINTS} nodes (excluding start point) detected ${curves.length} nodes update layout or path.helpers` )
+    }
+    if(curves.length==0){
+        throw new Error('Path must have at least 1 node (excluding start point) update layout or path.helpers' )
+    }
+
+    while(curves.length<NUMBER_OF_POINTS){
+        const toSplit = unNullify(curves.pop(),`Internal error in normalization`);
+        const {left,right} = splitCubicB(toSplit,0.5);
+        curves.push(left);
+        curves.push(right.reverse());
+    }
+
+    for(let i = 0; i<curves.length; i++){
+        const curve = curves[i];
+        newPath+=`C${curve[0].x},${curve[0].y} ${curve[1].x},${curve[1].y} ${curve[2].x},${curve[2].y} `
+    }
+    return newPath;
+}
+
+function splitCubicB(curve:point[],t:number):{left:point[],right:point[]}{
+const left:point[]=[]
+const right:point[]=[]
+
+function getCurve(points:point[],t:number){
+    if(points.length==1){
+        left.push(points[0])
+        right.push(points[0])
+    }else{
+        const newPoints:point[] = Array(points.length-1) as point[]
+        for(let i =0; i<newPoints.length; i++){
+            if(i==0){
+                left.push(points[0])
+            }
+            if(i==newPoints.length-1){
+                right.push(points[i+1])
+            }
+            newPoints[i]=new point((1-t)*points[i].x+t*points[i+1].x,(1-t)*points[i].y+t*points[i+1].y)
+        }
+        getCurve(newPoints,t)
+    }
+}
+    getCurve(curve,t);
+    return {left,right}
+}
+
+

package/src/store/polar-scale.ts

@@ -0,0 +1,145 @@
+import { extent } from "d3-array";
+import { scaleLinear } from "d3-scale";
+import type { simplePolarVertex, simpleVertex } from "../layouts/types";
+
+export type PolarScaleType = <T extends simpleVertex>(
+  vertex: T,
+) => T & { x: number; y: number; r: number; theta: number };
+
+export function polarScaleMaker(
+  maxX: number,
+  maxY: number,
+  canvasWidth: number,
+  canvasHeight: number,
+  invert: boolean = false,
+  minRadius: number = 0,
+  angleRange: number = 1.7 * Math.PI,
+  rootAngle: number = 0,
+  pollard = 0,
+) {
+  const maxRadius = Math.min(canvasWidth, canvasHeight) / 2;
+
+  // These scales adjust the x and y values from arbitrary layout to polar coordinates with r within the svg and theta between 0 and 2pi
+
+  const safeAngleRange = normalizeAngle(angleRange);
+  const minX = maxX * pollard;
+  const rRange = invert
+    ? [minRadius * maxRadius, maxRadius].reverse()
+    : [minRadius * maxRadius, maxRadius];
+  const rScale = scaleLinear().domain([minX, maxX]).range(rRange);
+
+  const startAngle = rootAngle + (2 * 3.14 - safeAngleRange) / 2; //2pi - angle range  is what we ignore and we want to center this on the root angle
+  const endAngle = startAngle + safeAngleRange;
+
+  const thetaScale = scaleLinear()
+    .domain([0, maxY])
+    .range([startAngle, endAngle]); // rotated to match figtree orientation
+
+  // (x,y) =>polarToCartesian(rScale(x),thetaScale(y))=>(x,y)
+
+  // Once we have the polar coordinates we will convert back to cartesian coordinates
+  // But we need to adjust the aspect ratio to fit the circle
+
+  // center (0,0) polartoCartesian(maxRadius,startAngle) is top left of svg
+  const extremes = [
+    [0, 0],
+    polarToCartesian(maxRadius, startAngle),
+    polarToCartesian(maxRadius, endAngle),
+  ];
+
+  // Also need every pi/2 point we pass through.
+  //assumes range is <=2pi
+  const normlizedStart = normalizeAngle(startAngle);
+  const normlizedEnd = normalizeAngle(normlizedStart + safeAngleRange);
+
+  if (normlizedEnd > normlizedStart) {
+    for (const theta of [Math.PI / 2, Math.PI, (3 * Math.PI) / 2].filter(
+      (d) => d > normlizedStart && d < normlizedEnd,
+    )) {
+      const [x, y] = polarToCartesian(maxRadius, theta);
+      extremes.push([x, y]);
+    }
+  } else {
+    //we've crossed 0
+
+    for (const theta of [0, Math.PI / 2, Math.PI, (3 * Math.PI) / 2].filter(
+      (d) => d > normlizedStart || d < normlizedEnd,
+    )) {
+      const [x, y] = polarToCartesian(maxRadius, theta);
+      extremes.push([x, y]);
+    }
+  }
+
+  const xDomain = extent(extremes, (d) => d[0]) as [number, number];
+  const yDomain = extent(extremes, (d) => d[1]) as [number, number];
+
+  const ratio = (xDomain[1] - xDomain[0]) / (yDomain[1] - yDomain[0]);
+
+  const scaler = Math.min(canvasWidth, canvasHeight * ratio);
+  const width = scaler;
+  const height = scaler / ratio;
+
+  const xShift = (canvasWidth - width) / 2;
+  const yShift = (canvasHeight - height) / 2;
+
+  const yRange = [yShift, canvasHeight - yShift];
+  const xRange = [xShift, canvasWidth - xShift];
+
+  const x = scaleLinear().domain(xDomain).range(xRange);
+  const y = scaleLinear().domain(yDomain).range(yRange);
+
+  return function scale<T extends simpleVertex>(
+    vertex: T,
+  ): T & simplePolarVertex {
+    // const [r,theta] =[rScale(vertex.x),normalizeAngle(thetaScale(vertex.y))];
+    const [r, theta] = [rScale(vertex.x), thetaScale(vertex.y)]; // not normalized so we get branch length arc directions correct.
+    const [xcart, ycart] = polarToCartesian(r, theta);
+
+    const nTheta = normalizeAngle(theta); // normalized so we can think straight when doing things with text.
+
+    const nodeLabel = {
+      alignmentBaseline: "middle",
+      textAnchor:
+        nTheta > Math.PI / 2 && nTheta < (3 * Math.PI) / 2 ? "end" : " start",
+      dxFactor: Math.cos(nTheta),
+      dyFactor: Math.sin(nTheta),
+      rotation: textSafeDegrees(nTheta),
+    };
+
+    return {
+      ...vertex,
+      x: x(xcart),
+      y: y(ycart),
+      r,
+      theta,
+      nodeLabel: nodeLabel,
+    };
+  };
+}
+
+export function polarToCartesian(r: number, theta: number) {
+  return [r * Math.cos(theta), r * Math.sin(theta)];
+}
+
+export function normalizeAngle(theta: number) {
+  while (theta > 2 * Math.PI) {
+    theta -= 2 * Math.PI;
+  }
+  return theta;
+}
+
+export function degrees(theta: number) {
+  return (normalizeAngle(theta) * 180) / Math.PI;
+}
+
+//this function converts radians to degrees and adjusts degrees
+// so the text is not fliped
+export function textSafeDegrees(radians: number) {
+  const d = degrees(normalizeAngle(radians));
+
+  if (d > 90 && d < 270) {
+    return d - 180;
+  } else {
+    return d;
+  }
+}

package/src/store/store.ts

@@ -0,0 +1,144 @@
+import type { NodeRef } from "../evo/tree";
+import type { FunctionalVertex, NodeLabelType, simpleVertex } from "../layouts";
+import { layoutClass } from "../layouts";
+import { polarScaleMaker } from "./polar-scale";
+import type { ScaleLinear } from "d3-scale";
+import { scaleLinear } from "d3-scale";
+
+//todo remove props that are just the getting passed to children and use render props instead
+
+export type layoutType = (n: NodeRef) => FunctionalVertex;
+
+//Todo cache these
+export type scaleOptions = {
+  domainX: number[];
+  domainY: number[];
+  canvasWidth: number;
+  canvasHeight: number;
+  layoutClass: layoutClass;
+  invert?: boolean;
+  minRadius?: number;
+  angleRange?: number;
+  rootAngle?: number;
+  rootLength?: number;
+  pollard: number;
+  fishEye?: { x: number; y: number; scale: number };
+};
+
+export const defaultNodeLabelData: NodeLabelType = {
+  alignmentBaseline: "middle",
+  textAnchor: "middle",
+  dxFactor: 1,
+  dyFactor: 1,
+  rotation: 0,
+};
+// scale adds x and y to whatever comes in.
+export type scaleType = <T extends simpleVertex>(
+  vertex: T,
+) => T & { x: number; y: number };
+// export type scale = scaleType<simpleVertex>  // TODO use generics to clean up!
+
+export function getScale({
+  domainX,
+  domainY,
+  canvasWidth,
+  canvasHeight,
+  layoutClass: layoutType,
+  invert = false,
+  minRadius = 0,
+  angleRange = 2 * Math.PI,
+  rootAngle = 0,
+  pollard = 0,
+  fishEye = { x: 0, y: 0, scale: 0 },
+}: scaleOptions): scaleType {
+  let xScale: ScaleLinear<number, number>;
+  let yScale: ScaleLinear<number, number>;
+
+  switch (layoutType) {
+    case layoutClass.Rectangular: {
+      const minX = domainX[1] * pollard;
+      xScale = scaleLinear().domain([minX, domainX[1]]).range([0, canvasWidth]); // 0 to account for any root length
+      yScale = scaleLinear().domain(domainY).range([0, canvasHeight]);
+
+      let calcY = (n: number) => yScale(n);
+      if (fishEye.scale > 0) {
+        const y = yScale.invert(fishEye.y);
+        const transform = fishEyeTransform(fishEye.scale, y);
+        const newYScale = yScale.copy().domain(yScale.domain().map(transform));
+        calcY = (y: number) => newYScale(transform(y));
+      }
+
+      if (invert) {
+        xScale.range([canvasWidth, 0]);
+      }
+      return function scale<T extends simpleVertex>(
+        vertex: T,
+      ): T & { x: number; y: number } {
+        return { ...vertex, x: xScale(vertex.x), y: calcY(vertex.y) };
+      };
+    }
+    case layoutClass.Polar:
+      return polarScaleMaker(
+        domainX[1],
+        domainY[1],
+        canvasWidth,
+        canvasHeight,
+        invert,
+        minRadius,
+        angleRange,
+        rootAngle,
+        pollard,
+      );
+    case layoutClass.Radial: {
+      //TODO need to update so x and y scales are equal otherwise horizontal branches will have a different scale than vertical branches
+      // scale x and y to 0 1
+      // then scale to standard witdth height.
+      const normalizeX = scaleLinear().domain(domainX).range([0, 1]);
+      const normalizeY = scaleLinear().domain(domainY).range([0, 1]);
+      const maxRange = Math.min(canvasWidth, canvasHeight);
+      // const scaler = Math.min(canvasWidth,canvasHeight*ratio)
+      // const width = scaler;
+      // const height = scaler/ratio;
+      // center in window
+      const xShift = (canvasWidth - maxRange) / 2;
+      const yShift = (canvasHeight - maxRange) / 2;
+
+      const xRange = [xShift, maxRange + xShift];
+      const yRange = [yShift, maxRange + yShift];
+
+      yScale = scaleLinear().domain([0, 1]).range(yRange);
+      xScale = scaleLinear().domain([0, 1]).range(xRange);
+      return function scale<T extends simpleVertex>(
+        vertex: T,
+      ): T & { x: number; y: number } {
+        return {
+          ...vertex,
+          x: xScale(normalizeX(vertex.x)),
+          y: yScale(normalizeY(vertex.y)),
+        };
+      };
+    }
+    default:
+      throw new Error("Not implemented in calcX");
+  }
+}
+
+// Figtree cc Andrew Rambaut
+export const fishEyeTransform =
+  (fishEye: number, pointOfInterestY: number) => (y: number) => {
+    // point of interest is in layout scale.
+
+    if (fishEye === 0.0) {
+      return y;
+    }
+
+    const scale = 1.0 / fishEye;
+    const dist = pointOfInterestY - y;
+    const min = 1.0 - pointOfInterestY / (scale + pointOfInterestY);
+    const max =
+      1.0 - (pointOfInterestY - 1.0) / (scale - (pointOfInterestY - 1.0));
+
+    const c = 1.0 - (dist < 0 ? dist / (scale - dist) : dist / (scale + dist));
+
+    return (c - min) / (max - min);
+  };