@lukekaalim/act-graphit 1.0.0

package/Axes.ts

@@ -0,0 +1,108 @@
+import { Component, Deps, h, Node, useEffect, useRef, useState } from "@lukekaalim/act"
+import { Vector } from "./vector"
+import { Group, Line, Rect } from "./elements"
+import { Vector2D } from "@lukekaalim/act-curve"
+import { assertRefs } from "./ResizingSpace"
+
+export type PositiveAxesProps = {
+  size: Vector<2>,
+  position: Vector<2>,
+  axes?: { x: Node, y: Node }
+}
+
+export const PositiveAxes: Component<PositiveAxesProps> = ({ size, position, children, axes }) => {
+  return [
+    !!axes && h(Group, { position }, [
+      h('text', { fill: 'red', x: 0, y: -30 }, axes.x),
+      h('text', { fill: 'blue', x: 0, y: -30, transform: `rotate(-90)`, 'text-anchor': 'end' }, axes.y),
+    ]),
+    h(Line, {
+      start: { x: position.x, y: position.y },
+      end: { x: size.x + position.x, y: position.y },
+      stroke: 'red',
+    }),
+    h(Line, {
+      start: { x: position.x, y: position.y },
+      end: { x: position.x, y: size.y + position.y },
+      stroke: 'blue',
+    }),
+    h(Rect, { position: { x: position.x + size.x - 3, y: position.y - 3 }, size: { x: 6, y: 6 }, fill: 'red', stroke: 'none' }),
+    h(Rect, { position: { x: position.x - 3, y: position.y + size.y - 3 }, size: { x: 6, y: 6 }, fill: 'blue', stroke: 'none' }),
+    h(Group, { position }, children)
+  ]
+}
+
+export type ZeroBasedAxesProps = {
+  size: Vector<2>,
+  position: Vector<2>,
+}
+
+export const ZeroBasedAxes: Component<ZeroBasedAxesProps> = ({
+  size,
+  position,
+  children,
+}) => {
+
+  
+  return [
+    h(Line, {
+      start: { x: position.x, y: position.y + (size.y / 2) },
+      end: { x: size.x + position.x, y: position.y + (size.y / 2) },
+      stroke: 'red',
+    }),
+    h(Line, {
+      start: { x: position.x + (size.x / 2), y: position.y },
+      end: { x: position.x + (size.x / 2), y: size.y + position.y },
+      stroke: 'blue',
+    }),
+
+    h('g', { transform: `translate(${position.x} ${position.y})` },
+      children
+    ),
+  ]
+}
+
+
+export type UnitSizeProps = {
+  size: Vector<2>,
+  deps?: Deps,
+}
+
+export const UnitSize: Component<UnitSizeProps> = ({ size, children, deps = [] }) => {
+  const ref = useRef<SVGGElement | null>(null);
+
+  useEffect(() => {
+    const { group } = assertRefs({ group: ref });
+    const svg = group.ownerSVGElement;
+    const parent = group.parentNode;
+    if (!svg || !(parent instanceof SVGElement))
+      return;
+
+
+    group.transform.baseVal.clear();
+
+    const parentSpace = parent.getBoundingClientRect();
+    const bounds = group.getBoundingClientRect();
+
+    const scale = svg.createSVGTransform();
+    const translate = svg.createSVGTransform();
+    
+    scale.setScale(
+      (1 / bounds.width) * size.x,
+      (1 / bounds.height) * size.y
+    )
+    translate.setTranslate(
+      bounds.x - parentSpace.x,
+      bounds.y - parentSpace.y
+    )
+    console.log(parent, {
+      x: bounds.x - parentSpace.x,
+      y: bounds.y - parentSpace.y
+    })
+    
+    group.transform.baseVal.appendItem(translate);
+    group.transform.baseVal.appendItem(scale);
+  }, deps)
+
+  return h('g', { ref }, children)
+}

package/Axis.ts

@@ -0,0 +1,58 @@
+import { Component, h, Ref, useMemo, useRef } from "@lukekaalim/act";
+import { Vector } from "./vector";
+import { assertRefs } from "./ResizingSpace";
+
+export type AxisProps = {
+  offset: number,
+
+  axis: Vector<2>,
+  size: Vector<2>,
+
+  ref?: Ref<null | SVGLineElement>,
+  controllerRef?: Ref<null | AxisController>,
+}
+
+export type AxisController = {
+  offset: number,
+  size: Vector<2>,
+  update(): void,
+}
+
+export const Axis: Component<AxisProps> = ({ axis, size, offset, ref, controllerRef }) => {
+  const localRef = useRef<SVGLineElement | null>(null);
+
+  const finalRef = ref || localRef;
+
+  const controller = useMemo(() => {
+    const controller = {
+      offset,
+      size,
+      update() {
+        const { line } = assertRefs({ line: finalRef });
+
+        line.x1.baseVal.value = (axis.y * controller.offset)
+        line.x2.baseVal.value = (axis.x * controller.size.x) + (axis.y * controller.offset)
+
+        line.y1.baseVal.value = (axis.x * controller.offset)
+        line.y2.baseVal.value = (axis.x * controller.offset) + (axis.y * controller.size.y)
+      }
+    }
+    
+    if (controllerRef)
+      controllerRef.current = controller;
+
+    return controller;
+  }, []);
+
+  return h('line', {
+    x1: (axis.y * controller.offset),
+    x2: (axis.x * controller.size.x) + (axis.y * controller.offset),
+
+    y1: (axis.x * controller.offset),
+    y2: (axis.x * controller.offset) + (axis.y * controller.size.y),
+
+    stroke: 'lightblue',
+    'stroke-width': '4px',
+    ref: finalRef,
+  })
+};

package/CartesianSpace.module.css

@@ -0,0 +1,13 @@
+.cartesianSpace {
+  flex: 1;
+
+  overflow: hidden;
+
+  border: 1px solid rgb(193, 193, 193);
+  border-radius: 4px;
+}
+
+
+.cartesianSpace.dragging {
+  cursor: grab;
+}

package/CartesianSpace.ts

@@ -0,0 +1,129 @@
+import { Component, h, Node, Ref, useEffect, useMemo, useRef, useState } from "@lukekaalim/act"
+import { SVG } from "@lukekaalim/act-web"
+import { useElementSize } from "./useElementSize";
+import { Axis, AxisController } from "./Axis";
+
+import classes from './CartesianSpace.module.css';
+import { Grid } from "./Grid";
+import { Vector } from "./vector";
+import { off } from "process";
+import { useDrag } from "./useDrag";
+import { Vector2D } from "@lukekaalim/act-curve";
+import { assertRefs } from "./ResizingSpace";
+
+export type CartesianSpaceController = {
+  position: Vector<2>,
+  size: Vector<2>,
+
+  update(): void,
+};
+
+export type CartesianSpaceProps = {
+  offset?: Vector<2>,
+
+  style?: unknown,
+  overlay?: Node,
+  initialPosition?: Vector<2>,
+  onDragComplete?: (position: Vector<2>) => void,
+
+  refs?: {
+    controller?: Ref<null | CartesianSpaceController>,
+    axisX?: Ref<null | SVGLineElement>,
+    axisY?: Ref<null | SVGLineElement>,
+    pattern?: Ref<null | SVGPatternElement>,
+  }
+}
+
+const createSpaceController = () => {
+
+};
+
+export const CartesianSpace: Component<CartesianSpaceProps> = ({
+  children, offset = Vector(2).create(), style, overlay,
+  onDragComplete, initialPosition,
+  refs: { controller: controllerRef } = {},
+  ...props
+}) => {
+  const ref = useRef<SVGSVGElement | null>(null);
+
+  const size = useElementSize(ref);
+
+  const onDrag = useMemo(() => {
+    return (delta: Vector<2>) => {
+      controller.position.x += delta.x;
+      controller.position.y += delta.y;
+      controller.update();
+    }
+  }, [onDragComplete])
+
+
+  const onFinishDrag = useMemo(() => () => {
+    if (onDragComplete)
+      onDragComplete(controller.position)
+  }, [onDragComplete])
+
+  const patternRef = useRef<SVGPatternElement | null>(null);
+  const groupRef = useRef<SVGGElement | null>(null);
+  const XAxisRef = useRef<AxisController | null>(null);
+  const YAxisRef = useRef<AxisController | null>(null);
+
+  useEffect(() => {
+      const { xAxis, yAxis } = assertRefs({ xAxis: XAxisRef, yAxis: YAxisRef });
+      xAxis.size = size;
+      yAxis.size = size;
+      xAxis.update();
+      yAxis.update();
+  }, [size])
+
+  const controller = useMemo(() => {
+    const controller = {
+      position: { ...(initialPosition || Vector2D.ZERO) },
+      size: { ...Vector2D.ZERO },
+      update() {
+        const { pattern, group, svg, xAxis, yAxis } = assertRefs({
+          pattern: patternRef, group: groupRef, svg: ref, xAxis: XAxisRef, yAxis: YAxisRef
+        });
+
+        pattern.x.baseVal.value = controller.position.x;
+        pattern.y.baseVal.value = controller.position.y;
+
+        const transform = svg.createSVGTransform()
+        transform.setTranslate(controller.position.x, controller.position.y);
+
+        group.transform.baseVal.initialize(transform);
+        xAxis.offset = controller.position.y;
+        yAxis.offset = controller.position.x;
+
+        xAxis.update();
+        yAxis.update();
+      },
+    }
+    if (controllerRef)
+      controllerRef.current = controller;
+
+    return controller;
+  }, [])
+
+  const dragging = useDrag(ref, onDrag, event => {
+    if (event.target instanceof HTMLElement)
+      switch (event.target.tagName) {
+        case 'BUTTON':
+        case 'INPUT':
+        case 'A':
+          return false;
+      }
+    return true;
+  }, { onFinishDrag })
+
+  //const combinedOffset = Vector(2).add(dragOffset, offset);
+
+  return h(SVG, {}, h('svg', { ...props, ref, class: [classes.cartesianSpace, dragging && classes.dragging].join(' '), style }, [
+    h(Grid, { offset: controller.position, strokeWidth: 1, scale: { x: 50, y: 50 }, refs: { pattern: patternRef } }),
+    h(Axis, { axis: { x: 1, y: 0 }, size, offset: 0, controllerRef: XAxisRef }),
+    h(Axis, { axis: { x: 0, y: 1 }, size, offset: 0, controllerRef: YAxisRef }),
+    h('g', { transform: `translate(${controller.position.x} ${controller.position.y})`, ref: groupRef }, [
+      children,
+    ]),
+    overlay || null,
+  ]))
+}

package/Defs.ts

@@ -0,0 +1,35 @@
+import { Node, h, useEffect, useState } from "@lukekaalim/act";
+import { SVG } from "@lukekaalim/act-web";
+
+export const globalDefs = new Set<Node>();
+
+const defSubscribers = new Set<() => void>();
+
+export const registerSVGDef = (def: Node) => {
+  globalDefs.add(def);
+  
+  for (const subscriber of defSubscribers)
+    subscriber();
+}
+
+const useGlobalSVGDefs = () => {
+  const [defs, setDefs] = useState(globalDefs);
+
+  useEffect(() => {
+    const subscription = () => {
+      setDefs(new Set(globalDefs))
+    };
+    defSubscribers.add(subscription);
+    return () => defSubscribers.delete(subscription);
+  }, []);
+
+  return defs;
+};
+
+export const DefProvider = () => {
+  const defs = useGlobalSVGDefs();
+
+  return h(SVG, {}, [
+    h('svg', {}, h('defs', {}, [...defs]))
+  ])
+}

package/EditablePoint.module.css

@@ -0,0 +1,7 @@
+.editablePointInput {
+
+}
+
+.editablePointDiv {
+  
+}

package/EditablePoint.ts

@@ -0,0 +1,87 @@
+import { Component, h, Node, useEffect, useMemo, useRef } from "@lukekaalim/act"
+import { Vector } from "./vector"
+import { HTML } from "@lukekaalim/act-web"
+import { useDrag } from "./useDrag"
+import { Animation1D, Animation2D, Curve2D, useAnimatedValue } from "@lukekaalim/act-curve"
+
+export type EditablePointProps = {
+  point: Vector<2>,
+  onPointEdit?: (updater: (prev: Vector<2>) => Vector<2>) => void,
+
+  fill?: string,
+}
+
+export const EditablePoint: Component<EditablePointProps> = ({
+  point,
+  onPointEdit = () => {},
+  children,
+  fill = 'black'
+}) => {
+  const ref = useRef<SVGCircleElement | null>(null);
+  const dottedRef = useRef<SVGCircleElement | null>(null);
+  const [value, setValue] = useAnimatedValue(5, 150);
+
+  const onDrag = useMemo(() => {
+    return (delta: Vector<2>) => {
+      onPointEdit(prev => Vector(2).add(prev, delta))
+    }
+  }, [])
+
+  // so stupid...
+  useDrag(ref, onDrag);
+
+  useEffect(() => {
+    const draggable = ref.current;
+    const dotted = dottedRef.current;
+    if (!dotted || !draggable)
+      return;
+
+    const onPointerEnter = () => {
+      setValue(15, performance.now())
+    }
+    const onPointerLeave = () => {
+      setValue(5, performance.now())
+    }
+
+    draggable.addEventListener('pointerenter', onPointerEnter)
+    draggable.addEventListener('pointerleave', onPointerLeave)
+    return () => {
+      draggable.removeEventListener('pointerenter', onPointerEnter)
+      draggable.removeEventListener('pointerleave', onPointerLeave)
+    }
+  }, [])
+
+  Animation1D.Bezier4.useAnimation(value, point => {
+    const dotted = dottedRef.current;
+    if (!dotted)
+      return;
+
+    dotted.setAttribute('r', Math.max(0, point.x).toFixed())
+  })
+
+  return [
+    h('circle', { cx: point.x, cy: point.y, ref: dottedRef, style:
+      { 'pointer-events': 'none' }, fill: 'none', stroke: 'black', 'stroke-dasharray': 4 }),
+    h('circle', { cx: point.x, cy: point.y, r: 15, ref, fill: 'none', stroke: 'none' }),
+    h('circle', { cx: point.x, cy: point.y, r: 6, fill, style: { 'pointer-events': 'none' } }),
+    isEmptyNode(children) && h('g', { transform: `translate(${point.x + 15} ${point.y - 15})` }, children)
+  ]
+}
+
+const isEmptyNode = (node: Node) => {
+  switch (typeof node) {
+    case 'object':
+      if (Array.isArray(node))
+        return node.length > 0;
+      return true;
+    default:
+      return true;
+    case 'boolean':
+      return node;
+    case 'string':
+    case 'number':
+      return !!node;
+    case 'undefined':
+      return false;
+  }
+}

package/Grid.ts

@@ -0,0 +1,48 @@
+import { Component, createId, h, ReadonlyRef, Ref, useMemo, useState } from "@lukekaalim/act";
+import { Vector } from "./vector";
+
+export type GridProps = {
+  offset?: Vector<2>,
+  scale?: Vector<2>,
+
+  stroke?: string,
+  strokeWidth?: number,
+
+  ref?: ReadonlyRef<SVGRectElement>,
+  refs?: {
+    pattern?: Ref<null | SVGPatternElement>
+  }
+};
+
+export const Grid: Component<GridProps> = ({
+  offset = Vector(2).create(),
+  scale = Vector(2).scalar.add(Vector(2).create(), 100),
+  stroke = "grey",
+  strokeWidth = 1,
+  ref = {},
+  refs = {}
+}) => {
+  const [gridId] = useState(createId());
+
+  return [
+    h('defs', {}, [
+      h('pattern', {
+        id: gridId,
+        width: `${scale.x}px`,
+        height: `${scale.y}px`,
+        x: offset.x,
+        y: offset.y,
+        patternUnits: 'userSpaceOnUse',
+        ref: refs.pattern || {},
+      }, [
+        h('path', {
+          d: `M ${scale.x} 0 L 0 0 0 ${scale.y}`,
+          fill: 'none',
+          stroke,
+          'stroke-width': strokeWidth
+        })
+      ])
+    ]),
+    h('rect', { ref, width: '100%', height: '100%', fill: `url(#${gridId})` })
+  ]
+}

package/LinePath.ts

@@ -0,0 +1,33 @@
+import { Component, h, useMemo } from "@lukekaalim/act"
+import { Vector } from "./vector"
+
+export type LinePathProps = {
+  calcPoint: (progress: number) => Vector<2>,
+  resolution?: number,
+
+  stroke?: string,
+  strokeWidth?: number,
+}
+
+export const LinePath: Component<LinePathProps> = ({
+  calcPoint,
+  resolution = 20,
+  stroke = 'black',
+  strokeWidth = 1,
+}) => {
+  const points = useMemo(() => {
+    const points = [];
+    for (let i = 0; i < resolution+1; i++) {
+      const progress = i/resolution;
+      points.push(calcPoint(progress));
+    }
+    return points;
+  }, [calcPoint]);
+
+  return h('polyline', {
+    points: points.map(({ x, y }) => `${x.toFixed(4)},${y.toFixed(4)}`).join(' '),
+    stroke,
+    'stroke-width': strokeWidth,
+    fill: 'none'
+  })
+}

package/ResizingSpace.ts

@@ -0,0 +1,52 @@
+import { Component, h, ReadonlyRef, Ref, useEffect, useRef } from "@lukekaalim/act";
+import { Grid } from "./Grid";
+
+type AssertRefsExtends =
+  { [key: string]: ReadonlyRef<unknown | null> };
+
+type AssertRefsReturn<T> =
+  { [K in keyof T]: T[K] extends Ref<infer X> ? NonNullable<X> : never };
+
+export const assertRefs = <T extends AssertRefsExtends>(
+  refs: T
+): AssertRefsReturn<T> => {
+  const values: Partial<AssertRefsReturn<T>> = {};
+  for (const key in refs) {
+    const value = refs[key].current;
+    if (!value)
+      throw new Error();
+
+    values[key] = value as any;
+  }
+
+  return values as AssertRefsReturn<T>;
+}
+export const assertSVGParent = <T extends SVGElement>(el: T): SVGSVGElement => {
+  const parent = el.ownerSVGElement;
+  if (!parent)
+    throw new Error();
+  return parent; 
+}
+
+export const ResizingSpace: Component = ({ children }) => {
+  const gRef = useRef<null | SVGGElement>(null);
+  const svgRef = useRef<null | SVGSVGElement>(null);
+
+  useEffect(() => {
+    const { group, svg } = assertRefs({ group: gRef, svg: svgRef });
+    
+    const rect = group.getBoundingClientRect();
+
+    svg.viewBox.baseVal.width = rect.width;
+    svg.viewBox.baseVal.height = rect.height;
+
+    svg.viewBox.baseVal.x = rect.x;
+    svg.viewBox.baseVal.y = rect.y;
+  }, []);
+
+  return h('svg', { ref: svgRef }, [
+    h('g', { ref: gRef }, children),
+    h(Grid, {  }),
+  ])
+};
+

package/dimensions.ts

@@ -0,0 +1,10 @@
+export type Dimension = 1 | 2 | 3 | 4 | 5;
+export namespace Dimension {
+  export type Name = {
+    [1]: 'x',
+    [2]: 'y',
+    [3]: 'z',
+    [4]: 'u',
+    [5]: 'v',
+  }
+}

package/elements.ts

@@ -0,0 +1,120 @@
+import { Component, h, Ref } from "@lukekaalim/act";
+import { Vector } from "./vector";
+
+export type SVGCoreProps<T extends SVGElement = SVGElement> = {
+  ref?: Ref<null | T>,
+  stroke?: string,
+  strokeWidth?: number,
+  strokeDashArray?: number[],
+
+  fill?: string,  
+}
+
+export const remapCoreProps = <T extends SVGElement>(props: SVGCoreProps<T>): Record<string, unknown> => {
+  const attributes: Record<string, unknown> = {};
+
+  if (props.stroke)
+    attributes['stroke'] = props.stroke;
+  else
+    attributes['stroke'] = 'black';
+  
+  if (props.strokeWidth)
+    attributes['stroke-width'] = props.strokeWidth.toString();
+  else
+    attributes['stroke-width'] = '1';
+
+  if (props.fill) {
+    attributes['fill'] = props.fill;
+  }
+  if (props.strokeDashArray) {
+    attributes['stroke-dasharray'] = props.strokeDashArray.join(' ');
+  }
+  if (props.ref)
+    attributes['ref'] = props.ref;
+
+  return attributes;
+}
+
+export type LineProps = (
+  | { x1: number, y1: number, x2: number, y2: number }
+  | { start: Vector<2>, end: Vector<2> }
+) & SVGCoreProps<SVGLineElement>;
+
+export const Line: Component<LineProps> = (props) => {
+  if ('x1' in props) {
+    const { x1, x2, y1, y2, ...extraProps } = props
+    return h('line', { x1, x2, y1, y2, ...remapCoreProps(extraProps) });
+  } else {
+    const { start, end, ...extraProps } = props
+    return h('line', { x1: start.x, x2: end.x, y1: start.y, y2: end.y, ...remapCoreProps(extraProps)  });
+  }
+}
+
+export type CircleProps = (
+  | { cx?: number, cy?: number, r?: number, }
+  | { center: Vector<2>, radius: number }
+) & SVGCoreProps<SVGCircleElement>
+
+export const Circle: Component<CircleProps> = (props) => {
+  if ("center" in props) {
+    const { center, radius, ...otherProps } = props;
+    return h('circle', {
+      cx: center.x,
+      cy: center.y,
+      r: radius,
+      ...remapCoreProps(otherProps),
+    })
+  } else {
+    const { cx, cy, r, ...otherProps } = props
+    return h('circle', { cx, cy, r, ...remapCoreProps(otherProps) })
+  }
+}
+
+export type RectProps = (
+  | { x?: number, y?: number, width?: number, height?: number }
+  | { position: Vector<2>, size: Vector<2> }
+) & SVGCoreProps<SVGRectElement>
+
+export const Rect: Component<RectProps> = (props) => {
+  if ("position" in props) {
+    const { position, size, ...otherProps } = props;
+    return h('rect', {
+      x: position.x,
+      y: position.y,
+      width: size.x,
+      height: size.y,
+      ...remapCoreProps(otherProps)
+    })
+  } else {
+    const { x, y, width, height, ...otherProps } = props
+    return h('circle', { x, y, width, height, ...remapCoreProps(otherProps) })
+  }
+}
+
+export type GroupProps = {
+  position?: Vector<2>,
+} & SVGCoreProps<SVGGElement>
+
+export const Group: Component<GroupProps> = ({ position,  children, ...extraProps }) => {
+  if (position)
+    return h('g', { transform: `translate(${position.x} ${position.y})`, ...extraProps }, children)
+
+  return h('g', { ...extraProps }, children)
+}
+
+
+export type ForeignObjectProps = (
+  | { position: Vector<2>, size: Vector<2> }
+  | { x: number, y: number, width: number, height: number }
+)
+
+export const ForeignObject: Component<ForeignObjectProps> = (props) => {
+  if ("position" in props) {
+    const { position, size, children } = props;
+    return h('foreignObject', { x: position.x, y: position.y, width: size.x, height: size.y }, children)
+  } else {
+    const { x, y, width, height, children } = props;
+    return h('foreignObject', { x, y, width, height }, children)
+  }
+
+}

package/index.ts

@@ -0,0 +1,15 @@
+export * from './EditablePoint';
+export * from './Defs';
+
+export * from './CartesianSpace';
+export * from './ResizingSpace';
+export * from './Axes';
+
+export * from './LinePath';
+
+export * from './structures';
+export * from './vector';
+
+export * from './elements';
+
+export * from './useDrag';

package/mod.doc.ts

@@ -0,0 +1,173 @@
+import { Component, h, Node, useEffect, useRef, useState } from "@lukekaalim/act";
+import { SVG } from '@lukekaalim/act-web';
+import { DocApp, MarkdownArticle, RAFBeat } from "@lukekaalim/grimoire";
+
+import { CartesianSpace, CartesianSpaceController } from "./CartesianSpace";
+import { LinePath } from "./LinePath";
+import { TypeDocPlugin } from "@lukekaalim/grimoire-ts";
+
+import readmeMd from './readme.md?raw';
+import structuresMd from './structures.md?raw';
+import projectJSON from 'typedoc:index.ts';
+import { Ring } from "./structures";
+import { Vector2D } from "@lukekaalim/act-curve";
+import { Circle } from "./elements";
+import { Vector } from "./vector";
+import { assertRefs } from "./ResizingSpace";
+
+const CartesianSpaceDemo: Component = () => {
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+
+  return [
+    h('div', { style: {
+      display: 'flex'
+    }}, [
+      h('input', { 
+        type: 'range',
+        min: 0,
+        max: 100,
+        value: x,
+        onInput: (e: InputEvent) => (setX((e.target as HTMLInputElement).valueAsNumber))
+      }),
+      h('input', { 
+        type: 'range',
+        min: 0,
+        max: 100,
+        value: y,
+        onInput: (e: InputEvent) => (setY((e.target as HTMLInputElement).valueAsNumber))
+      }),
+    ]),
+    h('div', { style: {
+      height: '400px',
+      display: 'flex'
+    }}, h(CartesianSpace, { offset: { x, y } }),)
+  ];
+}
+
+const LinePathDemo = () => {
+  return h('div', { style: {
+    height: '400px',
+    display: 'flex',
+  }}, h(CartesianSpace, { offset: { x: 0, y: 0 } }, [
+    h(LinePath, {
+      stroke: 'red',
+      strokeWidth: 2,
+      calcPoint(progress) {
+        return {
+          x: (Math.sin(progress * Math.PI * 2) * 100) + 150,
+          y: (Math.cos(progress * Math.PI * 2) * 100) + 150
+        }
+      },
+      resolution: 16
+    }),
+    h(LinePath, {
+      stroke: 'red',
+      strokeWidth: 2,
+      calcPoint(progress) {
+        return {
+          x: (progress * 300) + 300,
+          y: (Math.cos((progress + (1/8)) * Math.PI * 4) * 100) + 150
+        }
+      },
+      resolution: 32
+    }),
+  ]))
+}
+
+export default h(MarkdownArticle, {
+  content: await import('./readme.md?raw').then(m => m.default),
+  //options: {
+  //  components: {
+  //    CartesianSpaceDemo,
+  //    LinePathDemo
+  //  }
+  //}
+})
+
+export const buildGraphitDocs = (doc: DocApp<[TypeDocPlugin]>) => {
+  doc.typedoc.addProjectJSON('@lukekaalim/act-graphit', projectJSON);
+
+  doc.article.add('graphit.readme', readmeMd, '/packages/@lukekaalim/act-graphit')
+  doc.article.add('graphit.structs', structuresMd, '/packages/@lukekaalim/act-graphit/structures');
+
+  doc.demos.add('CartesianSpaceDemo', CartesianSpaceDemo)
+  doc.demos.add('LinePathDemo', LinePathDemo)
+  doc.demos.add('Ring', () => {
+    let output: Node[] = [];
+
+    const a = new Ring<number>(8);
+    const b = new Ring<number>(8);
+    const c = new Ring<number>(8);
+
+    for (let i = 1; i <= 12; i++) {
+      a.push(i)
+    }
+    b.index = 7
+    for (let i = 1; i <= 5; i++) {
+      b.push(i)
+    }
+    c.index = 1;
+    for (let i = 1; i <= 3; i++) {
+      c.push(i)
+    }
+
+    output.push(Array.from(a.map(v => h('span', { style: { padding: '2px' }}, v))));
+    output.push(Array.from(b.map(v => h('span', { style: { padding: '2px' }}, v))));
+    output.push(Array.from(c.map(v => h('span', { style: { padding: '2px' }}, v))));
+
+    return h('ol', {}, output.map(line => h('li', {}, line)))
+  });
+
+  doc.demos.add('Worm', () => {
+    const ringRef = useRef(new Ring<Vector2D>(128))
+    const [points, setPoints] = useState('')
+
+    const [start, setStart] = useState<Vector<2>>(Vector2D.ZERO);
+    const [end, setEnd] = useState<Vector<2>>(Vector2D.ZERO);
+
+    const controllerRef = useRef<CartesianSpaceController | null>(null)
+    const polylineRef = useRef<SVGPolylineElement | null>(null);
+
+    RAFBeat.useCallback(({ setCallback }) => {
+      let velocity = Vector2D.create(0, 0);
+      let position = Vector2D.create(0, 0);
+
+      const { controller, polyline } = assertRefs({ controller: controllerRef, polyline: polylineRef });
+      
+      const svg = polyline.ownerSVGElement;
+      if (!svg)
+        return;
+
+      setCallback(({ now, delta }) => {
+        velocity.x += (Math.random() * 8) - 4
+        velocity.y += (Math.random() * 8) - 4;
+
+        velocity = Vector2D.scalar.multiply(velocity, (1/Vector2D.ScalarAPI.length(velocity) * 5));
+
+        position.x += velocity.x;
+        position.y += velocity.y;
+
+        ringRef.current.push({ x: position.x, y: position.y });
+
+        controller.position = Vector2D.add(Vector2D.subtract(Vector2D.ZERO, position), { x: 256, y: 256 })
+        controller.update();
+        
+
+        polyline.points.clear();
+        for (const point of ringRef.current.values()) {
+          const svgPoint = svg.createSVGPoint();
+          svgPoint.x = point.x;
+          svgPoint.y = point.y;
+          polyline.points.appendItem(svgPoint);
+        }
+      })
+    }, [])
+
+    return h(CartesianSpace, { style: { width: '100%', height: '512px' }, refs: { controller: controllerRef } }, [
+      h('polyline', { ref: polylineRef, fill: 'none', stroke: 'black', 'stroke-width': '2px' }),
+      //h(Circle, { center: start, radius: 5 }),
+      //h(Circle, { center: end, radius: 5 }),
+    ])
+  });
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@lukekaalim/act-graphit",
+  "version": "1.0.0",
+  "description": "An Act-based graphing component library.",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@lukekaalim/act": "^3.2.1",
+    "@lukekaalim/act-web": "^3.4.0-alpha.2"
+  }
+}

package/readme.md

@@ -0,0 +1,28 @@
+# @lukekaalim/act-graphit
+
+An Act-based graphing component library.
+
+## Components
+
+<TypeDoc project="@lukekaalim/act-graphit" name="CartesianSpace" extras="CartesianSpaceProps" />
+Move around the space by clicking and dragging
+<Demo demo="CartesianSpaceDemo" />
+
+
+<TypeDoc project="@lukekaalim/act-graphit" name="LinePath" />
+
+Here we draw a circle and a sine wave.
+<Demo demo="LinePathDemo" />
+
+Draw a PolyLine using a progress function and a resolution.
+
+## Utils
+
+<TypeDoc project="@lukekaalim/act-graphit" name="subscribeMap" />
+
+<TypeDoc project="@lukekaalim/act-graphit" name="useDrag" />
+
+## Comments
+
+> Graphs have a `positive-y = up` display instead of the traditional
+> DOM `positive-y = down`.

package/rect.ts

@@ -0,0 +1,7 @@
+import { Dimension } from "./dimensions";
+import { Vector } from "./vector";
+
+export type Box<D extends Dimension> = {
+  position: Vector<D>,
+  size: Vector<D>,
+};

package/structures/index.ts

@@ -0,0 +1 @@
+export * from './ring';

package/structures/ring.ts

@@ -0,0 +1,73 @@
+/**
+ * Simple data structure that stores T
+ * in ring slots.
+ * 
+ * @example
+ * ```ts
+ * import { Ring } from '@lukekaalim/act-graphit';
+ * const my_ring = new Ring<string>(2);
+ * 
+ * my_ring.push("Hello");
+ * my_ring.push("World");
+ * 
+ * // after this push, "Hello" is dropped
+ * my_ring.push("Star");
+ * 
+ * // prints "World", "Star"
+ * console.log(Array.from(my_ring.values()))
+ * ```
+ */
+export class Ring<T> {
+  /** @private */
+  readonly backend: T[];
+
+  /** @private */
+  index: number;
+  /** @private */
+  size: number;
+
+  /**
+   * 
+   * @param capacity The maximum amount of items that can be
+   * inside the Ring at once. Once items are pushed beyond
+   * the capacity, the oldest one is removed.
+   */
+  constructor(capacity: number) {
+    this.backend = Array.from({ length: capacity });
+    this.index = 0;
+    this.size = 0;
+  }
+
+  push(item: T) {
+    this.backend[this.index] = item;
+    this.index = (this.index + 1) % this.backend.length;
+
+    if (this.size < this.backend.length)
+      this.size++;
+  }
+
+  *map<Output>(transformer: (item: T) => Output): Generator<Output, void, void> {
+    const { index, size, backend: { length: capacity }} = this;
+    const startIndex = (index + capacity - size) % capacity;
+
+    for (let i  = 0; i < this.size; i++) {
+      yield transformer(this.backend[(startIndex + i) % this.backend.length])
+    }
+    return;
+  }
+  values() {
+    return this.map(x => x);
+  }
+  item(itemIndex: number) {
+    const { index, size, backend: { length: capacity }} = this;
+    const mappedIndex = (itemIndex + index + capacity - size) % capacity;
+    
+    return this.backend[mappedIndex];
+  }
+  head() {
+    return this.item(this.index - 1);
+  }
+  tail() {
+    return this.item(0);
+  }
+}

package/structures.md

@@ -0,0 +1,24 @@
+# Structures
+
+Some common data structures to store/load data
+from and display them on graphs.
+
+More useful for a closer-to-realtime scenario, 
+as regular arrays will be fine for most data.
+
+`Graphit` has support for rendering each
+of these structures.
+
+<TypeDoc project="@lukekaalim/act-graphit" name="Ring" />
+
+> This "Worm" demo generates pairs of random numbers,
+> groups them into <Reference key="ts:@lukekaalim/act-curve.Vector2D">Vector2D</Reference>
+> pushes them to the <Reference key="ts:@lukekaalim/act-graphit.Ring">Ring</Reference>,
+> and then renders the Ring's contents
+> as a PolyLine.
+>
+> You can see the Ring "forgetting" older elements as the line generates
+> new ones, but still keeps the elements in the insertion order.
+
+
+<Demo demo="Worm" />

package/useDrag.ts

@@ -0,0 +1,105 @@
+import { ReadonlyRef, useEffect, useState } from "@lukekaalim/act";
+import { Vector } from "./vector";
+
+type EventMap = {
+  [K in keyof (HTMLElementEventMap & SVGElementEventMap)]?:
+    (event: (HTMLElementEventMap & HTMLElementEventMap)[K]) => void
+};
+
+/**
+ * Subscribe to a lot of events on an element,
+ * and then unsubscribe to them all at once
+ * when you are done.
+ * 
+ * @param element The element you want to subscribe to events for
+ * @param eventMap A object where every key is the "type" of event and the value is
+ * the event handler function itself
+ * @returns An object with an "unsubscribe" function attached. Call that function
+ * to remove all event listeners
+ * 
+ * @throws If the provided element is null
+ */
+export const subscribeMap = (
+  element: HTMLElement | SVGElement | null,
+  eventMap: EventMap
+) => {
+  type K = keyof EventMap;
+
+  if (!element)
+    throw new Error();
+  
+  for (const key in eventMap) {
+    element.addEventListener(key as K, eventMap[key as K] as any);
+  }
+  return {
+    unsubscribe() {
+      for (const key in eventMap) {
+        element.removeEventListener(key as K, eventMap[key as K] as any);
+      }
+    }
+  }
+};
+
+type DragOptions = {
+  onFinishDrag?: () => void
+}
+
+export const useDrag = (
+  ref: ReadonlyRef<null | HTMLElement | SVGElement>,
+  onElementMove: (positionDelta: Vector<2>) => void,
+  shouldStartDrag: (event: PointerEvent) => boolean = () => true,
+  { onFinishDrag }: DragOptions = {}
+) => {
+  const [dragging, setDragging] = useState(false);
+  
+  useEffect(() => {
+    const el = ref.current as HTMLElement;
+    if (!el)
+      return;
+    let dragging = false;
+
+    const sub = subscribeMap(ref.current, {
+      wheel(event) {
+        if (event.defaultPrevented)
+          return;
+        event.preventDefault();
+        onElementMove({ x: -event.deltaX, y: -event.deltaY });
+      },
+      pointerdown(event) {
+        if (event.defaultPrevented)
+          return;
+        if (!shouldStartDrag(event))
+          return;
+        if (event.button > 1)
+          return;
+        event.preventDefault();
+        setDragging(true);
+        dragging = true;
+        el.setPointerCapture(event.pointerId);
+      },
+      pointermove(event) {
+        if (!dragging || event.defaultPrevented)
+          return;
+  
+        event.preventDefault();
+        onElementMove({ x: event.movementX, y: event.movementY });
+      },
+      pointerup(event) {
+        onElementMove({ x: event.movementX, y: event.movementY });
+        setDragging(false);
+        dragging = false;
+        el.releasePointerCapture(event.pointerId);
+        console.log('finish drag')
+
+        if (onFinishDrag)
+          onFinishDrag()
+      },
+    })
+
+    return () => {
+      sub.unsubscribe();
+    }
+  }, [onElementMove, onFinishDrag]);
+
+  return dragging;
+}

package/useElementSize.ts

@@ -0,0 +1,27 @@
+import { ReadonlyRef, Ref, useEffect, useState } from "@lukekaalim/act";
+import { Vector } from "./vector";
+
+export const useElementSize = (ref: ReadonlyRef<Element | null>) => {
+  const [size, setSize] = useState(Vector(2).create());
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element)
+      return;
+
+    const observer = new ResizeObserver(() => {
+      const rect = element.getBoundingClientRect();
+      setSize(prev => {
+        if (prev.x !== rect.width && prev.y !== rect.height)
+          return { x: rect.width, y: rect.height };
+        return prev;
+      })
+    });
+    observer.observe(element, { });
+    return () => {
+      observer.disconnect()
+    }
+  }, []);
+
+  return size;
+};

package/vector.ts

@@ -0,0 +1,89 @@
+import { Dimension } from "./dimensions";
+
+// THESE VECTORS SUCK
+// YOU JUST NEED 2D VECTORS
+
+type VectorDimensions = {
+  [1]: 1,
+  [2]: 1 | 2,
+  [3]: 1 | 2 | 3,
+  [4]: 1 | 2 | 3 | 4,
+  [5]: 1 | 2 | 3 | 4 | 5,
+};
+
+export type Vector<D extends Dimension> = {
+  [key in Dimension.Name[VectorDimensions[D]]]: number
+};
+
+export type AnyVector = Vector<1> | Vector<2> | Vector<3> | Vector<4> | Vector<5>;
+
+export type VectorOps<D extends Dimension> = {
+  create(): Vector<D>,
+  operate(vector: Vector<D>, op: (value: number, field: Dimension.Name[VectorDimensions[D]]) => number): Vector<D>,
+
+  add(a: Vector<D>, b: Vector<D>): Vector<D>,
+  mult(a: Vector<D>, b: Vector<D>): Vector<D>,
+
+  scalar: {
+    add(a: Vector<D>, b: number): Vector<D>,
+    mult(a: Vector<D>, b: number): Vector<D>,
+  }
+}
+
+export const Vector = <D extends Dimension>(d: D): VectorOps<D> => {
+  const create = (): Vector<D> => {
+    switch (d) {
+      case 1:
+        return { x: 0 } as Vector<D>;
+      case 2:
+        return { x: 0, y: 0 } as Vector<D>;
+      case 3:
+        return { x: 0, y: 0, z: 0 } as Vector<D>;
+      case 4:
+        return { x: 0, y: 0, z: 0, u: 0 } as Vector<D>;
+      case 5:
+        return { x: 0, y: 0, z: 0, u: 0, v: 0 } as Vector<D>;
+      default:
+        const _: never = d;
+        throw new Error();
+    }
+  }
+  
+  const operate = (v: Vector<D>, op: (field: number, axis: Dimension.Name[VectorDimensions[D]]) => number): Vector<D> => {
+    const result = create();
+    switch (d) {
+      case 5:
+        (result as Vector<5>).v = op((v as Vector<5>).v, 'v' as Dimension.Name[VectorDimensions[D]]);
+      case 4:
+        (result as Vector<4>).u = op((v as Vector<4>).u, 'u' as Dimension.Name[VectorDimensions[D]]);
+      case 3:
+        (result as Vector<3>).z = op((v as Vector<3>).z, 'z' as Dimension.Name[VectorDimensions[D]]);
+      case 2:
+        (result as Vector<2>).y = op((v as Vector<2>).y, 'y' as Dimension.Name[VectorDimensions[D]]);
+      case 1:
+        (result as Vector<1>).x = op((v as Vector<1>).x, 'x' as Dimension.Name[VectorDimensions[D]]);
+        return result;
+      default:
+        const _: never = d;
+        throw new Error();
+    }
+  }
+  return {
+    create,
+    operate,
+    add(a, b) {
+      return operate(a, (v1, f) => v1 + b[f]);
+    },
+    mult(a, b) {
+      return operate(a, (v1, f) => v1 * b[f]);
+    },
+    scalar: {
+      add(a, b) {
+        return operate(a, (v1) => v1 + b);
+      },
+      mult(a, b) {
+        return operate(a, (v1) => v1 * b);
+      },
+    }
+  }
+}