@figtreejs/core 0.0.1-alpha.0

package/src/components/baubles/types.ts

@@ -0,0 +1,99 @@
+import { SpringValue } from "@react-spring/web";
+import type { NodeRef } from "../../evo";
+
+// **Types for animated shapes that can accept either animated values or primitives */
+export type numerical = number | SpringValue<number>;
+export type stringy = string | SpringValue<string>;
+
+/** Helper functions for unspringing types so we only have to define possible types once */
+export type DeSpring<T> = T extends SpringValue<infer U> ? U : T;
+export type StripSprings<T> = { [K in keyof T]: DeSpring<T[K]> };
+
+/** Types of interactions that are accepted on rendered objects.
+ * These wrap functions provided by the users
+ */
+export type InternalInteractionType = {
+  onClick?: () => void;
+  OnMouseOver?: () => void;
+  onEnter?: () => void;
+  onExit?: () => void;
+};
+
+export type InteractionType = {
+  onClick?: (n: NodeRef) => void;
+  OnMouseOver?: (n: NodeRef) => void;
+  onEnter?: (n: NodeRef) => void;
+  onExit?: (n: NodeRef) => void;
+};
+
+/** Attributes as they enter rendered possibly animated svg elements */
+export type BaseAttrs = Record<string, numerical | stringy>;
+export type BasePos = Record<string, numerical | stringy>;
+/** Attribute as they are passed internally to possibly animated svg elements */
+export type Attrs = Record<string, number | string>;
+export type AttrsRecord<A extends object> = Record<string, A>;
+/** Attributes provided by the user. They will be applied to elements prior to rendering */
+export type UserAttrs = Record<
+  string,
+  number | string | ((n: NodeRef) => number | string)
+>;
+
+/** Strip x/y/d/attrs of their possible spring values
+ * This is used to infer the input types to animated values
+ */
+export type StripProps<P> = {
+  [K in keyof P]: K extends "attrs"
+    ? StripSprings<P[K]>
+    : K extends "pos"
+      ? StripSprings<P[K]>
+      : P[K];
+};
+
+export type XYAttrs = { x: numerical; y: numerical } & BaseAttrs;
+/** Wide type for all svg base baubles */
+export type BaseBaubleProps<A extends BaseAttrs> = {
+  interactions?: InternalInteractionType;
+  attrs: A;
+};
+
+export type BaseXYProps<A extends BaseAttrs> = {
+  interactions?: InternalInteractionType;
+  x: numerical;
+  y: numerical;
+  attrs: A;
+};
+
+/** props for baubles that need x,y for positioning */
+export type XYShape<A extends Attrs> = {
+  interactions?: InternalInteractionType;
+  attrs: A & { x: number; y: number };
+  animated?: boolean;
+};
+export type XYBaseShape<A extends BaseAttrs> = {
+  interactions?: InternalInteractionType;
+  attrs: A & { x: numerical; y: numerical };
+  animated?: boolean;
+};
+/** props for Baubles that need d for positioning */
+export type DShape<A extends Attrs> = {
+  interactions?: InternalInteractionType;
+  d: string;
+  attrs: A;
+  animated?: boolean;
+};
+
+export type AttrAndInteractionApplier<A extends Attrs> = (n: NodeRef) => {
+  attrs: A;
+  interactions?: Record<string, () => void>;
+};
+
+// possibly redundant
+export type Fn = (n: NodeRef) => number | string;
+// resolves functions -> return type, leaves literals as-is
+export const isSpringNumber = (v: numerical): v is SpringValue<number> =>
+  v instanceof SpringValue;
+type NodeFn<T> = (n: NodeRef) => T;
+/** A helper function map Attrs accepted by Baubles to those supplied by the user */
+export type LiftToUser<A extends Attrs> = {
+  [K in keyof A]: A[K] | NodeFn<A[K]>;
+};

package/src/components/decorations/axis/axis-types.ts

@@ -0,0 +1,123 @@
+import { format } from "d3-format";
+import type { ScaleContinuousNumeric } from "d3-scale";
+import type { Attrs } from "../../baubles/types";
+
+export type AxisOrientation = "horizontal" | "vertical" | "polar";
+
+export type AxisTicksOptions = {
+  number?: number;
+  format?: (value: number) => string;
+  padding?: number;
+  style?: { [key: string]: number | string };
+  length?: number;
+  values?: number[];
+};
+// export type fullAxisTickOptions =
+// optionals are filled by default below
+export interface AxisProps {
+  offsetBy?: number;
+  scaleBy?: number;
+  reverse?: boolean;
+  gap?: number;
+  title?: { text: string; padding: number; style: Attrs };
+  ticks?: AxisTicksOptions;
+  direction?: AxisOrientation;
+  scale?: ScaleContinuousNumeric<number, number>; // context figure scale
+  // x: number, // optional?
+  // y: number,
+  // children?: React.ReactNode,
+  attrs: Attrs;
+  type?: "Polar" | "Rectangular"; //yuck
+  bars?: AxisBarOptions;
+}
+
+export type DefaultAxisPropType = {
+  offsetBy: number;
+  scaleBy: number;
+  reverse: boolean;
+  gap: number;
+  title: { text: string; padding: number; style: Attrs };
+  ticks: {
+    number: number;
+    format: (n: number) => string;
+    padding: number;
+    style: Attrs;
+    length: number;
+  };
+  direction: AxisOrientation;
+  type: "Polar" | "Rectangular";
+  attrs: Record<string, number | string>;
+};
+
+export const defaultAxisProps: DefaultAxisPropType = {
+  offsetBy: 0,
+  scaleBy: 1,
+  reverse: false,
+  gap: 5,
+  title: { text: "", padding: 40, style: {} },
+  ticks: {
+    number: 5,
+    format: format(".1f"),
+    padding: 20,
+    style: {},
+    length: 6,
+  },
+  direction: "horizontal",
+  attrs: { strokeWidth: 1 },
+  type: "Rectangular",
+};
+
+export interface WorkingTipOptions extends AxisTicksOptions {
+  number: number;
+  format: (n: number) => string;
+  padding: number;
+  style: Attrs;
+  length: number;
+  values?: number[];
+}
+export interface WorkingAxisProps extends AxisProps {
+  offsetBy: number;
+  scaleBy: number;
+  reverse: boolean;
+  gap: number;
+  title: { text: string; padding: number; style: Attrs };
+  ticks: {
+    number: number;
+    format: (n: number) => string;
+    padding: number;
+    style: Attrs;
+    length: number;
+    values?: number[];
+  };
+  direction: AxisOrientation;
+  strokeWidth: number;
+  type: "Polar" | "Rectangular";
+}
+
+export const defaultAxisBarsProps = {
+  evenFill: "#EDEDED",
+  oddFill: "none",
+  attrs: {
+    rx: 2,
+    ry: 2,
+  },
+  lift: 5,
+};
+
+export interface AxisBarsProps {
+  evenFill?: string;
+  oddFill?: string;
+  attrs?: Attrs;
+  lift?: number;
+  type?: "Rectangular" | "Polar"; // type and layoutClass?
+  tickValues: number[];
+  scale: ScaleContinuousNumeric<number, number>;
+  // figureScale:scaleType, // context
+  axisY: number;
+  // layoutClass:layoutClass //context
+}
+//these are added by the axis
+export type AxisBarOptions = Omit<
+  AxisBarsProps,
+  "axisY" | "type" | "tickValues" | "scale" | "figureScale" | "layoutClass"
+>;

package/src/components/decorations/axis/axis.tsx

@@ -0,0 +1,21 @@
+import PolarAxis from "./polar-axis";
+import RectangularAxis from "./rectangular-axis";
+import type { AxisProps } from "./axis-types";
+import { layoutClass } from "../../../layouts";
+import { useContext } from "react";
+import { DimensionContext } from "../../../context/dimension-context";
+
+//TODO do things to scale and allow date as origin not maxD.
+
+export default function Axis(props: AxisProps) {
+  const dimensions = useContext(DimensionContext);
+  const { layoutClass: layoutType } = dimensions;
+  if (layoutType === layoutClass.Polar) {
+    return <PolarAxis {...props} />;
+  } else if (layoutType === layoutClass.Rectangular) {
+    return <RectangularAxis {...props} />;
+  } else {
+    console.warn(`Axis not supported for ${layoutType}`);
+    return null;
+  }
+}

package/src/components/decorations/axis/index.ts

@@ -0,0 +1,2 @@
+export { default as Axis } from "./axis";
+export type { AxisProps, AxisBarsProps } from "./axis-types";

package/src/components/decorations/axis/polar-axis-bars.tsx

@@ -0,0 +1,102 @@
+import type { AxisBarsProps } from "./axis-types";
+import { defaultAxisBarsProps } from "./axis-types";
+import type { PolarScaleType } from "../../../store/polar-scale";
+import { BasePath } from "../../baubles";
+
+/**
+ * This component adds vertical bars to the backgound of a figure. It is used a child of an Axis component and gets
+ * it's size and position attributes from it's parent.
+ * @param props
+ * @return {*}
+ * @constructor
+ */
+// we are already rotated by the axis parent
+export default function PolarAxisBars(props: AxisBarsProps) {
+  const {
+    attrs,
+    evenFill = defaultAxisBarsProps.evenFill,
+    oddFill = defaultAxisBarsProps.oddFill,
+    tickValues,
+    scale,
+    figureScale,
+    axisY,
+  } = props as { figureScale: PolarScaleType } & AxisBarsProps;
+
+  return (
+    <g className={"axisBars"}>
+      {tickValues
+        .filter((_t: number, i: number, all: number[]) => i < all.length - 1)
+        .map((t: number, i: number) => {
+          const start = figureScale({ x: scale(t), y: axisY });
+          const end = figureScale({ x: scale(t), y: 0 });
+
+          const secondStart = figureScale({
+            x: scale(tickValues[i + 1]),
+            y: 0,
+          });
+          const secondEnd = figureScale({
+            x: scale(tickValues[i + 1]),
+            y: axisY,
+          });
+
+          const arcBit =
+            start.theta === end.theta || start.r === 0
+              ? ""
+              : `A${start.r},${start.r} 0 1 0 ${end.x},${end.y}`;
+
+          const secondArcBit =
+            secondStart.theta === secondEnd.theta || secondStart.r === 0
+              ? ""
+              : `A${secondStart.r},${secondStart.r} 0 1 1 ${secondEnd.x},${secondEnd.y}`;
+
+          const shape = `M${start.x},${start.y} ${arcBit} L${end.x},${end.y} L${secondStart.x},${secondStart.y} ${secondArcBit} L ${start.x} ${start.y} Z`;
+          const fill = i % 2 === 0 ? evenFill : oddFill;
+
+          return (
+            <BasePath
+              key={i}
+              d={shape}
+              fill={fill}
+              {...attrs}
+              animated={false}
+            />
+          );
+        })}
+    </g>
+  );
+  // const {
+  //     attrs,
+  //     evenFill=defaultAxisBarsProps.evenFill,
+  //     oddFill=defaultAxisBarsProps.oddFill,
+  //     lift=defaultAxisBarsProps.lift} = props;
+
+  //     const {tickValues,scale,gap,direction} = useAxisContext();
+  //     const {theta} = useLayout();
+  //     //d3 starts with 0 at 12 o'clock and svg starts with 0 at 3 o'clock
+
+  //     const angleRange = theta![0]>theta![1]+0.1?2*Math.PI-(theta![0]-(theta![1]+0.1)):(theta![1]+0.1)-theta![0];
+
+  //     const startAngle = theta![0]+Math.PI/2 ;
+  //     const endAngle = angleRange+startAngle;
+
+  // return(
+  //     <g className={"axisBars"}>
+  //             {tickValues.reduce((acc:JSX.Element[],curr,i)=>{
+
+  //                 const shape = arc(
+  //                     {
+  //                         innerRadius:scale(tickValues[i]),
+  //                         outerRadius:scale(tickValues[i+1]),
+  //                         startAngle: startAngle,
+  //                         endAngle:endAngle
+  //                     }
+  //                 )!
+
+  //                 const fill = i%2===0?evenFill:oddFill;
+  //                 acc.push(<path key={i} d={shape} fill={fill} {...attrs} />);
+
+  //                 return acc;
+  //             },[])}
+  //     </g>
+  // )
+}

package/src/components/decorations/axis/polar-axis.tsx

@@ -0,0 +1,175 @@
+import { useContext } from "react";
+
+import { mean } from "d3-array";
+import { scaleLinear } from "d3-scale";
+import type { AxisProps, WorkingTipOptions } from "./axis-types";
+import { defaultAxisProps } from "./axis-types";
+
+import { normalizeAngle } from "../../../store/polar-scale";
+import type { dimensionType } from "../../figtree/figtree-types";
+import { unNullify } from "../../../utils";
+import { DimensionContext } from "../../../context/dimension-context";
+import { ScaleContext } from "../../../context/scale-context";
+import PolarAxisBars from "./polar-axis-bars";
+import type { PolarVertex } from "../../../layouts/types";
+
+//TODO do things to scale and allow date as origin not maxD.
+
+export default function PolarAxis(props: AxisProps) {
+  const dimensions = useContext(DimensionContext);
+  const figureScale = useContext(ScaleContext);
+  const { bars, attrs } = props;
+
+  const ticks: WorkingTipOptions = props.ticks
+    ? { ...defaultAxisProps.ticks, ...props.ticks }
+    : defaultAxisProps.ticks;
+  const title = props.title
+    ? { ...defaultAxisProps.title, ...props.title }
+    : defaultAxisProps.title;
+
+  // todo options to provide tick values so can specify breaks
+  // we make the scale and then move it to the origin.
+  const scale = makeAxisScale(props, dimensions);
+
+  let tickValues: number[];
+  if (ticks.values != undefined) {
+    tickValues = ticks.values;
+  } else {
+    // if (!scale.ticks) {
+    //     tickValues = range(ticks.number).map((i) =>
+    //     quantile(scale.domain(), i / (ticks.number - 1)),
+    //     ) as number[]
+    // } else {
+    tickValues = scale.ticks(ticks.number);
+    // }
+  }
+
+  // start at the root and go outwards
+
+  const theta = normalizeAngle(
+    figureScale({
+      x: dimensions.domainX[1],
+      y: dimensions.domainY[1],
+    } as PolarVertex).theta,
+  );
+  // const startAngle = figureScale({x:dimensions.domainX[1],y:dimensions.domainY[0]}).theta + Math.PI/2 ;
+  // const endAngle = startAngle + 0.05+ (figureScale({x:dimensions.domainX[1],y:dimensions.domainY[1]}).theta - figureScale({x:dimensions.domainX[1],y:dimensions.domainY[0]}).theta);
+
+  const axisY = dimensions.domainY[1] + dimensions.domainY[1] * 0.005;
+  const start = figureScale({ x: dimensions.domainX[0], y: axisY });
+  const end = figureScale({ x: dimensions.domainX[1], y: axisY });
+  const axisPath = `M${start.x},${start.y} L${end.x},${end.y}`;
+
+  // We draw the ticks in line with the axis then rotate them 90 degrees
+  const x2 = ticks.length * Math.cos(theta);
+  const y2 = ticks.length * Math.sin(theta);
+
+  const xPadding = ticks.padding * Math.cos(theta);
+  const yPadding = ticks.padding * Math.sin(theta);
+
+  //   const rawBars = props.children
+  // ? Array.isArray(props.children)
+  //   ? props.children
+  //   : [props.children]
+  // : null
+  // const bars = rawBars
+  //   ? rawBars.map((b: React.ReactElement,i:number) =>
+  //       React.cloneElement(b, {
+  //         key:i,
+  //         figureScale,
+  //         scale,
+  //         axisY,
+  //         direction,
+  //         layoutClass,
+  //         dimensions,
+  //         tickValues,
+  //         gap,
+  //         reverse:props.reverse,
+  //         startAngle,
+  //         endAngle
+  //       }),
+  //     )
+  //   : null
+
+  const xPos = unNullify(
+    mean(scale.range()),
+    `Error calculating x position for title`,
+  );
+  const titlePos = figureScale({ x: xPos, y: axisY });
+  const titleXPadding = title.padding * Math.cos(theta);
+  const titleYPadding = title.padding * Math.sin(theta);
+
+  return (
+    <g className={"axis"}>
+      <PolarAxisBars
+        {...bars}
+        tickValues={tickValues}
+        scale={scale}
+        axisY={axisY}
+      />
+      :
+      <path d={axisPath} stroke={"black"} {...attrs} />
+      <g>
+        {tickValues.map((t, i) => {
+          const point = figureScale({ x: scale(t), y: axisY });
+          return (
+            <g
+              key={`tick-${i}`}
+              transform={`translate(${point.x},${point.y}) rotate(90)`}
+            >
+              <line x1={x2} y1={y2} x2={0} y2={0} stroke={"black"} {...attrs} />
+              <text
+                transform={`translate(${xPadding},${yPadding}) rotate(-90)`}
+                textAnchor={"middle"}
+                dominantBaseline={"central"}
+                {...ticks.style}
+              >
+                {ticks.format(t)}
+              </text>
+            </g>
+          );
+        })}
+        {/*TODO sometimes scale doesn't have a range*/}
+        <g transform={`translate(${titlePos.x},${titlePos.y}) rotate(90)`}>
+          <text
+            textAnchor={"middle"}
+            transform={`translate(${titleXPadding},${titleYPadding}) rotate(-90)`}
+          >
+            {title.text}
+          </text>
+        </g>
+      </g>
+    </g>
+  );
+}
+
+//TODO can make maxR and height the same parameter and use this  all axes
+
+export function makeAxisScale(props: AxisProps, dimensions: dimensionType) {
+  const {
+    reverse = defaultAxisProps.reverse,
+    offsetBy = defaultAxisProps.offsetBy,
+    scaleBy = defaultAxisProps.scaleBy,
+    scale,
+  } = props;
+  const { domainX } = dimensions;
+
+  // just radius
+  // negative range to play nicely with transform above
+  const axisScale =
+    scale === undefined
+      ? scaleLinear().domain(domainX).range(domainX)
+      : scale.copy();
+  if (scale === undefined) {
+    // assume domain goes 0 to max divergence make adjustments on this scale and then update min if it is not 0
+    const offset = domainX.map((d) => d + offsetBy);
+    const newDomain = offset.map((d) => (d - offsetBy) * scaleBy + offsetBy);
+
+    axisScale.domain(newDomain);
+
+    if (reverse) {
+      axisScale.domain([offsetBy - (newDomain[1] - newDomain[0]), offsetBy]);
+    }
+  }
+  return axisScale.nice();
+}

package/src/components/decorations/axis/rectangular-axis-bars.tsx

@@ -0,0 +1,53 @@
+import { useContext } from "react";
+import { ScaleContext } from "../../../context/scale-context";
+import type { AxisBarsProps } from "./axis-types";
+import { defaultAxisBarsProps } from "./axis-types";
+import { BaseRectangle } from "../../baubles";
+
+/**
+ * This component adds vertical bars to the backgound of a figure. It is used a child of an Axis component and gets
+ * it's size and position attributes from it's parent.
+ */
+
+export default function AxisBars(props: AxisBarsProps) {
+  const {
+    attrs,
+    evenFill = defaultAxisBarsProps.evenFill,
+    oddFill = defaultAxisBarsProps.oddFill,
+    tickValues,
+    scale,
+    axisY,
+  } = props;
+
+  const figureScale = useContext(ScaleContext);
+
+  return (
+    <g className={"axisBars"} key="axisBars">
+      {tickValues
+        .filter((_t: number, i: number, all: number[]) => i < all.length - 1)
+        .map((t: number, i: number) => {
+          const start = figureScale({ x: scale(t), y: axisY });
+          const end = figureScale({ x: scale(t), y: -0.05 });
+
+          const secondStart = figureScale({
+            x: scale(tickValues[i + 1]),
+            y: 0,
+          });
+
+          const fill = i % 2 === 0 ? evenFill : oddFill;
+          return (
+            <BaseRectangle
+              key={`recBar-${i}`}
+              x={start.x}
+              width={secondStart.x - start.x} // to deal with negative scales
+              y={end.y}
+              height={start.y - end.y}
+              fill={fill}
+              {...{ rx: 2, ry: 2, ...attrs }}
+              animated={false} // animated can come from context in the shape not needed here
+            />
+          );
+        }, [])}
+    </g>
+  );
+}