mathlean-canvas 0.3.1 → 0.3.3

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,219 @@
+import type { Stage } from "react-konva";
+export type Tool = "select" | "pan" | "pen" | "eraser" | "text" | "graph" | "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 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[];
+    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";