mathlean-canvas 0.3.2 → 0.3.4

package/dist/MathCanvas/features/text/hooks/useTextBlockLayoutEffects.d.ts

@@ -0,0 +1,62 @@
+import { type Dispatch, type MutableRefObject, type SetStateAction } from "react";
+import { type InlineMathAtom } from "../../../../inlineMathModel";
+import type { RenderMode, TextBlock } from "../../../types";
+type InlineMathSession = {
+    start: number;
+} | null;
+type LatexPreview = {
+    start?: number;
+    fallback: string;
+    caretOffset?: number;
+} | null;
+type UseTextBlockLayoutEffectsOptions = {
+    activeInlineMathDraft: string;
+    activeInlineMathSession: InlineMathSession;
+    blockHeights: Record<string, number>;
+    blockWidths: Record<string, number>;
+    blocks: TextBlock[];
+    containerRef: MutableRefObject<HTMLDivElement | null>;
+    editableMirrorContentRef: MutableRefObject<HTMLDivElement | null>;
+    editableMirrorRef: MutableRefObject<HTMLDivElement | null>;
+    editingBlockId: string | null;
+    editingDisplayValue: string;
+    editingHeight: number;
+    editingSelection: number;
+    editingValue: string;
+    editingWidth: number;
+    inlineMathEditorRect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null;
+    inlineMathBubbleRef: MutableRefObject<HTMLDivElement | null>;
+    inlineMathFieldRef: MutableRefObject<HTMLElement | null>;
+    latexPreview: LatexPreview;
+    overlayRefs: MutableRefObject<Record<string, HTMLDivElement | null>>;
+    renderMode: RenderMode;
+    resetInlineMathState: () => void;
+    setBlockHeights: Dispatch<SetStateAction<Record<string, number>>>;
+    setBlockWidths: Dispatch<SetStateAction<Record<string, number>>>;
+    setEditingHeight: Dispatch<SetStateAction<number>>;
+    setEditingInlineMathAtoms: Dispatch<SetStateAction<InlineMathAtom[]>>;
+    setEditingWidth: Dispatch<SetStateAction<number>>;
+    setInlineMathEditorRect: Dispatch<SetStateAction<{
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null>>;
+    setMathOverlayCaret: Dispatch<SetStateAction<{
+        left: number;
+        top: number;
+        height: number;
+    } | null>>;
+    size: {
+        width: number;
+        height: number;
+    };
+    textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
+};
+export declare function useTextBlockLayoutEffects({ activeInlineMathDraft, activeInlineMathSession, blocks, containerRef, editableMirrorContentRef, editableMirrorRef, editingBlockId, editingDisplayValue, editingHeight, editingSelection, editingValue, editingWidth, inlineMathEditorRect, inlineMathBubbleRef, inlineMathFieldRef, latexPreview, overlayRefs, renderMode, resetInlineMathState, setBlockHeights, setBlockWidths, setEditingHeight, setEditingInlineMathAtoms, setEditingWidth, setInlineMathEditorRect, setMathOverlayCaret, size, textareaRef, }: UseTextBlockLayoutEffectsOptions): void;
+export {};

package/dist/MathCanvas/features/text/hooks/useTextBlockRenderHelpers.d.ts

@@ -0,0 +1,16 @@
+import type { TextBlock } from "../../../types";
+type UseTextBlockRenderHelpersOptions = {
+    blockHeights: Record<string, number>;
+    blockWidths: Record<string, number>;
+    blocks: TextBlock[];
+    size: {
+        width: number;
+        height: number;
+    };
+};
+export declare function useTextBlockRenderHelpers({ blockHeights, blockWidths, blocks, size, }: UseTextBlockRenderHelpersOptions): {
+    findTextBlockBlockingCreation: (x: number, y: number) => TextBlock | null;
+    findTextBlockNearPoint: (x: number, y: number) => TextBlock | null;
+    getTextMathAxisY: (block: TextBlock) => number | null;
+};
+export {};

package/dist/MathCanvas/features/text/hooks/useTextboxResize.d.ts

@@ -0,0 +1,19 @@
+import { type Dispatch, type SetStateAction } from "react";
+import type { TextBlock, TextboxResizeAnchor } from "../../../types";
+type UseTextboxResizeOptions = {
+    editingHeight: number;
+    editingWidth: number;
+    getBlockById: (id: string | null) => TextBlock | null;
+    pushHistoryState: () => void;
+    setEditingHeight: Dispatch<SetStateAction<number>>;
+    setEditingWidth: Dispatch<SetStateAction<number>>;
+    size: {
+        width: number;
+        height: number;
+    };
+    updateBlock: (id: string, updater: (block: TextBlock) => TextBlock) => void;
+};
+export declare function useTextboxResize({ editingHeight, editingWidth, getBlockById, pushHistoryState, setEditingHeight, setEditingWidth, size, updateBlock, }: UseTextboxResizeOptions): {
+    beginTextboxResize: (block: TextBlock, anchor: TextboxResizeAnchor, event: React.MouseEvent<HTMLDivElement>) => void;
+};
+export {};

package/dist/MathCanvas/features/text/index.d.ts

@@ -0,0 +1,12 @@
+export { default as InlineMathBubble } from "./components/InlineMathBubble";
+export { default as TextBlockEditor } from "./components/TextBlockEditor";
+export { default as TextBlockMenu } from "./components/TextBlockMenu";
+export { default as TextBlockView } from "./components/TextBlockView";
+export { default as TextInteractionLayer } from "./components/TextInteractionLayer";
+export { InlineKatex, RenderBlockContent, RenderEditableBlockContent, RenderKatexExpression, } from "./components/BlockRenderers";
+export { useTextBlockActions } from "./hooks/useTextBlockActions";
+export { useTextBlockEditingActions } from "./hooks/useTextBlockEditingActions";
+export { useTextBlockLayoutEffects } from "./hooks/useTextBlockLayoutEffects";
+export { useTextBlockRenderHelpers } from "./hooks/useTextBlockRenderHelpers";
+export { useTextboxResize } from "./hooks/useTextboxResize";
+export { canRenderLatex } from "./utils/textLayout";

package/dist/MathCanvas/features/text/utils/textLayout.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties } from "react";
+import type { TextBlock, TextStyleRange, TextboxResizeAnchor } from "../../../types";
+export declare function getBlockFontSize(block?: Pick<TextBlock, "fontSize"> | null): number;
+export declare function normalizeTextStyleRanges(ranges: TextStyleRange[] | undefined, contentLength: number): {
+    start: number;
+    end: number;
+    id: string;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    color?: string;
+}[];
+export declare function getStyleRangeCss(range: TextStyleRange): CSSProperties;
+export declare function mergeTextRangeStyles(ranges: TextStyleRange[]): CSSProperties;
+export declare function renderStyledText(value: string, absoluteStart: number, ranges: TextStyleRange[], keyPrefix: string): " " | import("react").DetailedReactHTMLElement<{
+    key: string;
+    style: CSSProperties | undefined;
+}, HTMLElement>[];
+export declare function measureEditorTextWidth(content: string, fontSize?: number): number;
+export declare function measureTextWidth(content: string, fontFamily: string, fontSize?: number): number;
+export declare function clampTextBlockWidth(width: number, maxWidth: number): number;
+export declare function getTextBlockWrapWidth(block: Pick<TextBlock, "width" | "manualWidth">, maxWidth: number): number;
+export declare function getAutoTextBlockWidth(contentWidth: number, maxWidth: number): number;
+export declare function clampTextFontSize(fontSize: number): number;
+export declare function isTextboxSideAnchor(anchor: TextboxResizeAnchor): anchor is "middle-left" | "middle-right";
+export declare function getTextboxResizeCursor(anchor: TextboxResizeAnchor): "ew-resize" | "nesw-resize" | "nwse-resize";
+export declare function shouldTextBlockWrap(block: Pick<TextBlock, "manualWidth" | "width">, maxWidth?: number): boolean;
+export declare function measureMirrorContentBounds(container: HTMLElement): {
+    width: number;
+    height: number;
+    overflowsInline: boolean;
+};
+export declare function canRenderLatex(value: string): boolean;

package/dist/MathCanvas/types.d.ts

@@ -0,0 +1,241 @@
+import type { Stage } from "react-konva";
+import type { MathJsonExpression } from "@cortex-js/compute-engine/math-json";
+export type Tool = "select" | "pan" | "pen" | "eraser" | "text" | "graph" | "plot" | "matrix" | "table" | "geometry";
+export type DrawingTool = "pen" | "eraser";
+export type RenderMode = "plain" | "latex";
+export type GeometryMode = "point" | "segment" | "angle" | "circle" | "label" | "midpoint" | "perpendicular" | "parallel" | "fixed" | "regular" | "rightAngle" | "equalSide";
+export type GeometryObjectKind = "point" | "segment" | "polygon" | "angle" | "circle";
+export type GeometryDirection = "left" | "right" | "up" | "down";
+export type GraphDirection = "upLeft" | "up" | "upRight" | "left" | "right" | "downLeft" | "down" | "downRight";
+export type CoordinatePlaneMode = "blank" | "grid" | "plane";
+export type GeometryLabelTarget = {
+    kind: "segment" | "angle" | "circle";
+    id: string;
+};
+export type GeometryLabelOffset = {
+    x: number;
+    y: number;
+};
+export type Stroke = {
+    id: string;
+    points: number[];
+    tool: DrawingTool;
+    strokeWidth?: number;
+    color?: string;
+};
+export type TextStyleRange = {
+    id: string;
+    start: number;
+    end: number;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    color?: string;
+};
+export type TextBlock = {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    content: string;
+    renderMode: RenderMode;
+    fontSize?: number;
+    manualWidth?: boolean;
+    styles?: TextStyleRange[];
+};
+export type GraphNode = {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    label: string;
+    shape: "circle";
+};
+export type GraphEdge = {
+    id: string;
+    sourceId: string;
+    targetId: string;
+    directed?: boolean;
+};
+export type PlotEquation = {
+    id: string;
+    latex: string;
+    mathJson: MathJsonExpression | null;
+    color: string;
+};
+export type PlotFunction = {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    latex: string;
+    mathJson: MathJsonExpression | null;
+    color: string;
+    scale?: number;
+    equations?: PlotEquation[];
+    equationPanelX?: number;
+    equationPanelY?: number;
+};
+export type GraphClipboard = {
+    nodes: Array<GraphNode & {
+        offsetX: number;
+        offsetY: number;
+    }>;
+    edges: GraphEdge[];
+    primaryNodeId: string;
+};
+export type TextboxResizeAnchor = "middle-left" | "middle-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type TextboxResizeDrag = {
+    blockId: string;
+    anchor: TextboxResizeAnchor;
+    startClientX: number;
+    startClientY: number;
+    startX: number;
+    startY: number;
+    startWidth: number;
+    startHeight: number;
+    startFontSize: number;
+    didPushHistory: boolean;
+};
+export type MatrixObject = {
+    id: string;
+    x: number;
+    y: number;
+    rows: number;
+    cols: number;
+    cells: string[][];
+    rowSeparators: MatrixSeparator[];
+    colSeparators: MatrixSeparator[];
+};
+export type MatrixSeparatorSegment = {
+    index: number;
+    start: number;
+    end: number;
+};
+export type MatrixSeparator = number | MatrixSeparatorSegment;
+export type TableObject = {
+    id: string;
+    x: number;
+    y: number;
+    rows: number;
+    cols: number;
+    cells: string[][];
+};
+export type GeoPoint = {
+    id: string;
+    x: number;
+    y: number;
+    label?: string;
+    derived?: {
+        kind: "midpoint";
+        a: string;
+        b: string;
+    };
+};
+export type GeoSegment = {
+    id: string;
+    a: string;
+    b: string;
+    label?: string;
+    showLength?: boolean;
+    labelOffset?: GeometryLabelOffset;
+    equalMarker?: number;
+};
+export type GeoPolygon = {
+    id: string;
+    pointIds: string[];
+    label?: string;
+};
+export type GeoAngle = {
+    id: string;
+    a: string;
+    b: string;
+    c: string;
+    label?: string;
+    showArc?: boolean;
+    labelOffset?: GeometryLabelOffset;
+};
+export type GeoCircle = {
+    id: string;
+    centerId: string;
+    radiusPointId?: string;
+    radiusValue?: string;
+    label?: string;
+    labelOffset?: GeometryLabelOffset;
+};
+export type GeoHelperSegment = {
+    id: string;
+    kind: "perpendicular" | "parallel";
+    baseA: string;
+    baseB: string;
+    through: string;
+    length: number;
+};
+export type GeoRightAngleMarker = {
+    id: string;
+    a: string;
+    b: string;
+    c: string;
+};
+export type GridSelection = {
+    kind: "matrix" | "table";
+    id: string;
+    startRow: number;
+    endRow: number;
+    startCol: number;
+    endCol: number;
+    mode: "cell" | "row" | "column" | "upperTriangle" | "lowerTriangle" | "diagonal" | "antiDiagonal";
+    excludedCells?: string[];
+};
+export type CanvasState = {
+    strokes: Stroke[];
+    blocks: TextBlock[];
+    graphNodes: GraphNode[];
+    graphEdges: GraphEdge[];
+    plots: PlotFunction[];
+    matrices: MatrixObject[];
+    tables: TableObject[];
+    geoPoints: GeoPoint[];
+    geoSegments: GeoSegment[];
+    geoPolygons: GeoPolygon[];
+    geoAngles: GeoAngle[];
+    geoCircles: GeoCircle[];
+    geoHelperSegments: GeoHelperSegment[];
+    geoRightAngleMarkers: GeoRightAngleMarker[];
+    coordinatePlaneMode: CoordinatePlaneMode;
+    renderMode: RenderMode;
+};
+export type StageMouseEvent = Parameters<NonNullable<React.ComponentProps<typeof Stage>["onMouseDown"]>>[0];
+export type StageTouchEvent = Parameters<NonNullable<React.ComponentProps<typeof Stage>["onTouchStart"]>>[0];
+export type StagePointerEvent = StageMouseEvent | StageTouchEvent;
+export type StageClickEvent = Parameters<NonNullable<React.ComponentProps<typeof Stage>["onClick"]>>[0];
+export type StageTapEvent = Parameters<NonNullable<React.ComponentProps<typeof Stage>["onTap"]>>[0];
+export type StageActivationEvent = StageClickEvent | StageTapEvent;
+export type MathCanvasTheme = {
+    bg: string;
+    bgAlt: string;
+    surface: string;
+    surfaceHover: string;
+    border: string;
+    text: string;
+    textMuted: string;
+    danger: string;
+    dangerBorder: string;
+    dangerBg: string;
+    edge: string;
+    edgeActive: string;
+    node: string;
+    nodeHover: string;
+    nodeActive: string;
+    eraser: string;
+};
+export type MathCanvasProps = {
+    darkMode?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    initialState?: CanvasState;
+    onStateChange?: (state: CanvasState) => void;
+};

package/dist/MathCanvas/utils/geometryMath.d.ts

@@ -0,0 +1,13 @@
+import type { GeoPoint } from "../types";
+export declare function getPointLabel(index: number): string;
+export declare function distanceToLineSegment(px: number, py: number, ax: number, ay: number, bx: number, by: number): number;
+export declare function getAngleBetweenPoints(a: GeoPoint, b: GeoPoint, c: GeoPoint): {
+    start: number;
+    end: number;
+    delta: number;
+};
+export declare function buildAngleArcPoints(a: GeoPoint, b: GeoPoint, c: GeoPoint, radius?: number): number[];
+export declare function getAngleLabelPoint(a: GeoPoint, b: GeoPoint, c: GeoPoint, radius?: number): {
+    x: number;
+    y: number;
+};

package/dist/MathCanvas/utils/graphDirection.d.ts

@@ -0,0 +1,3 @@
+import type { GraphDirection } from "../types";
+export declare const getGraphDirectionFromArrowKey: (key: string) => GraphDirection | null;
+export declare const getGraphDirectionFromArrowKeys: (keys: Set<string>, latestKey: string) => GraphDirection | null;

package/dist/MathCanvas/utils/latex.d.ts

@@ -0,0 +1,20 @@
+export declare function shouldPreferDisplayStyle(expression: string, displayMode: boolean): boolean;
+export declare function getPreferredRenderedLatex(expression: string, displayMode: boolean): string;
+export declare function canRenderLatex(value: string): boolean;
+export declare function parseLatexSegments(content: string): ({
+    id: string;
+    type: "math";
+    value: string;
+    fallback: string;
+    displayMode: boolean;
+    start: number;
+    end: number;
+} | {
+    id: string;
+    type: "text";
+    value: string;
+    start: number;
+    end: number;
+    fallback?: undefined;
+    displayMode?: undefined;
+})[];

package/dist/MathCanvas.d.ts

@@ -0,0 +1,7 @@
+import "katex/dist/katex.min.css";
+import "mathlive";
+import "mathlive/fonts.css";
+import "mathlive/static.css";
+export type { CanvasState, MathCanvasProps, GeoPoint, GeoSegment, GeoPolygon, GeoAngle, GeoCircle, GeoHelperSegment, GeoRightAngleMarker, } from "./MathCanvas/types";
+import type { MathCanvasProps } from "./MathCanvas/types";
+export default function MathCanvas({ darkMode, className, style, initialState, onStateChange }: MathCanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./MathCanvas";
+export { default as MathCanvas } from "./MathCanvas";
+export type { CanvasState, MathCanvasProps } from "./MathCanvas";