@xrn07/figure-renderer 0.1.0

package/dist/renderers/coordinatePlane.js

@@ -0,0 +1,142 @@
+// Coordinate plane renderer
+import { svgTag } from '../utils/svgTag';
+import { gridLines, axes } from '../utils/gridLines';
+import { createCoordTransform } from '../utils/coordTransform';
+import { circle, line, path, text } from '../utils/shapes';
+export function renderCoordinatePlane(dsl) {
+    const { width, height, xRange, yRange, showGrid = true, showLabels = true, elements, title } = dsl;
+    const svgElements = [];
+    // Add arrow markers
+    svgElements.push(createAxisMarkers());
+    // Draw grid
+    if (showGrid) {
+        svgElements.push(gridLines({
+            xRange,
+            yRange,
+            width,
+            height,
+            xSteps: 10,
+            ySteps: 10,
+            stroke: '#e0e0e0',
+            strokeWidth: 1,
+        }));
+    }
+    // Draw axes
+    svgElements.push(axes({
+        xRange,
+        yRange,
+        width,
+        height,
+        showLabels,
+    }));
+    // Create coordinate transform
+    const transform = createCoordTransform({ xRange, yRange, width, height });
+    // Render elements
+    elements.forEach(element => {
+        svgElements.push(renderElement(element, transform));
+    });
+    const svg = svgTag('svg', {
+        viewBox: `0 0 ${width} ${height}`,
+        xmlns: 'http://www.w3.org/2000/svg',
+    }, svgElements.join(''));
+    return svg;
+}
+function renderElement(element, transform) {
+    switch (element.type) {
+        case 'point':
+            return renderPoint(element, transform);
+        case 'line':
+            return renderPlaneLine(element, transform);
+        case 'curve':
+            return renderCurve(element, transform);
+        case 'label':
+            return renderPlaneLabel(element, transform);
+        default:
+            return '';
+    }
+}
+function renderPoint(element, transform) {
+    const data = element.data;
+    const { x, y, label, color = '#e53e3e' } = data;
+    const svgX = transform.x(x);
+    const svgY = transform.y(y);
+    const elements = [];
+    // Draw point
+    elements.push(circle(svgX, svgY, 5, {
+        fill: color,
+        stroke: '#fff',
+        'stroke-width': 2,
+    }));
+    // Add label
+    if (label) {
+        elements.push(text(svgX + 8, svgY - 8, label, {
+            'text-anchor': 'start',
+            'font-size': 12,
+            'font-weight': 'bold',
+            fill: color,
+        }));
+    }
+    return svgTag('g', { class: 'point' }, elements.join(''));
+}
+function renderPlaneLine(element, transform) {
+    const data = element.data;
+    const { x1, y1, x2, y2, color = '#333', style = 'solid' } = data;
+    const svgX1 = transform.x(x1);
+    const svgY1 = transform.y(y1);
+    const svgX2 = transform.x(x2);
+    const svgY2 = transform.y(y2);
+    const strokeDasharray = style === 'dashed' ? '8,4' : style === 'dotted' ? '2,2' : 'none';
+    return svgTag('g', { class: 'line' }, line(svgX1, svgY1, svgX2, svgY2, {
+        stroke: color,
+        'stroke-width': 2,
+        'stroke-dasharray': strokeDasharray,
+    }));
+}
+function renderCurve(element, transform) {
+    const data = element.data;
+    const { points, color = '#3182ce', style = 'solid' } = data;
+    // Transform all points
+    const svgPoints = points.map(([x, y]) => {
+        const sx = transform.x(x);
+        const sy = transform.y(y);
+        return [sx, sy];
+    });
+    // Create smooth path through points
+    let d = '';
+    if (svgPoints.length > 0) {
+        d = `M ${svgPoints[0][0]} ${svgPoints[0][1]}`;
+        for (let i = 1; i < svgPoints.length; i++) {
+            d += ` L ${svgPoints[i][0]} ${svgPoints[i][1]}`;
+        }
+    }
+    const strokeDasharray = style === 'dashed' ? '8,4' : style === 'dotted' ? '2,2' : 'none';
+    return svgTag('g', { class: 'curve' }, path(d, {
+        fill: 'none',
+        stroke: color,
+        'stroke-width': 2.5,
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-dasharray': strokeDasharray,
+    }));
+}
+function renderPlaneLabel(element, transform) {
+    const data = element.data;
+    const { x, y, text: labelText, align = 'center' } = data;
+    const svgX = transform.x(x);
+    const svgY = transform.y(y);
+    return text(svgX, svgY, labelText, {
+        'text-anchor': align,
+        'dominant-baseline': 'middle',
+        'font-size': 14,
+        fill: '#333',
+    });
+}
+function createAxisMarkers() {
+    return `
+    <defs>
+      <marker id="axis-arrow" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
+        <path d="M0,0 L10,5 L0,10" fill="#333" />
+      </marker>
+    </defs>
+  `;
+}

package/dist/renderers/forceDiagram.d.ts

@@ -0,0 +1,3 @@
+import type { ForceDiagramDSL } from '../types';
+export declare function renderForceDiagram(dsl: ForceDiagramDSL): string;
+//# sourceMappingURL=forceDiagram.d.ts.map

package/dist/renderers/forceDiagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forceDiagram.d.ts","sourceRoot":"","sources":["../../src/renderers/forceDiagram.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AAKvE,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CAsB/D"}

package/dist/renderers/forceDiagram.js

@@ -0,0 +1,130 @@
+// Force diagram renderer
+import { svgTag } from '../utils/svgTag';
+import { rect, circle, text, line } from '../utils/shapes';
+export function renderForceDiagram(dsl) {
+    const { width, height, object, forces, title } = dsl;
+    const elements = [];
+    // Add arrow markers
+    elements.push(createForceMarkers());
+    // Render object
+    elements.push(renderObject(object));
+    // Render forces
+    forces.forEach(force => {
+        elements.push(renderForce(force));
+    });
+    const svg = svgTag('svg', {
+        viewBox: `0 0 ${width} ${height}`,
+        xmlns: 'http://www.w3.org/2000/svg',
+    }, elements.join(''));
+    return svg;
+}
+function renderObject(obj) {
+    const elements = [];
+    switch (obj.type) {
+        case 'box': {
+            const { x, y, width: w = 60, height: h = 60, label } = obj;
+            elements.push(rect(x - w / 2, y - h / 2, w, h, {
+                fill: '#f0f0f0',
+                stroke: '#333',
+                'stroke-width': 2,
+            }));
+            if (label) {
+                elements.push(text(x, y, label, {
+                    'text-anchor': 'middle',
+                    'dominant-baseline': 'middle',
+                    'font-size': 14,
+                    fill: '#333',
+                }));
+            }
+            break;
+        }
+        case 'sphere': {
+            const { x, y, label } = obj;
+            const radius = 30;
+            elements.push(circle(x, y, radius, {
+                fill: '#e6f7ff',
+                stroke: '#333',
+                'stroke-width': 2,
+            }));
+            if (label) {
+                elements.push(text(x, y, label, {
+                    'text-anchor': 'middle',
+                    'dominant-baseline': 'middle',
+                    'font-size': 12,
+                    fill: '#333',
+                }));
+            }
+            break;
+        }
+        case 'point': {
+            const { x, y, label } = obj;
+            elements.push(circle(x, y, 5, {
+                fill: '#333',
+            }));
+            if (label) {
+                elements.push(text(x + 10, y, label, {
+                    'text-anchor': 'start',
+                    'dominant-baseline': 'middle',
+                    'font-size': 12,
+                    fill: '#333',
+                }));
+            }
+            break;
+        }
+    }
+    return svgTag('g', { class: 'object' }, elements.join(''));
+}
+function renderForce(force) {
+    const { originX, originY, magnitude, angle, label, color = '#e53e3e' } = force;
+    const elements = [];
+    // Convert angle to radians and calculate endpoint
+    const angleRad = (angle * Math.PI) / 180;
+    const scale = 2; // Scale factor for visibility
+    const endX = originX + magnitude * Math.cos(angleRad) * scale;
+    const endY = originY - magnitude * Math.sin(angleRad) * scale; // SVG y is inverted
+    // Draw force vector with arrow
+    elements.push(line(originX, originY, endX, endY, {
+        stroke: color,
+        'stroke-width': 3,
+        'marker-end': `url(#arrow-${color})`,
+    }));
+    // Draw label
+    if (label) {
+        // Position label slightly offset from the arrow
+        const labelOffset = 15;
+        const labelX = endX + labelOffset * Math.cos(angleRad);
+        const labelY = endY - labelOffset * Math.sin(angleRad);
+        elements.push(text(labelX, labelY, label, {
+            'text-anchor': 'start',
+            'dominant-baseline': 'middle',
+            'font-size': 14,
+            'font-weight': 'bold',
+            fill: color,
+        }));
+    }
+    return svgTag('g', { class: 'force' }, elements.join(''));
+}
+function createForceMarkers() {
+    return `
+    <defs>
+      <marker id="arrow-#e53e3e" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
+        <path d="M0,0 L10,5 L0,10" fill="#e53e3e" />
+      </marker>
+      <marker id="arrow-#3182ce" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
+        <path d="M0,0 L10,5 L0,10" fill="#3182ce" />
+      </marker>
+      <marker id="arrow-#38a169" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
+        <path d="M0,0 L10,5 L0,10" fill="#38a169" />
+      </marker>
+      <marker id="arrow-#d69e2e" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
+        <path d="M0,0 L10,5 L0,10" fill="#d69e2e" />
+      </marker>
+      <marker id="arrow-#805ad5" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
+        <path d="M0,0 L10,5 L0,10" fill="#805ad5" />
+      </marker>
+      <marker id="arrow-#333" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
+        <path d="M0,0 L10,5 L0,10" fill="#333" />
+      </marker>
+    </defs>
+  `;
+}

package/dist/renderers/geometry.d.ts

@@ -0,0 +1,3 @@
+import type { GeometryDSL } from '../types';
+export declare function renderGeometry(dsl: GeometryDSL): string;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/renderers/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/renderers/geometry.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,UAAU,CAAC;AAK3D,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,GAAG,MAAM,CAgBvD"}

package/dist/renderers/geometry.js

@@ -0,0 +1,173 @@
+// Geometry figure renderer
+import { svgTag } from '../utils/svgTag';
+import { line, circle, rect, polygon, path, text } from '../utils/shapes';
+import { arcPath } from '../utils/path';
+export function renderGeometry(dsl) {
+    const { width, height, shapes, title } = dsl;
+    const elements = [];
+    // Render shapes
+    shapes.forEach(shape => {
+        elements.push(renderShape(shape));
+    });
+    const svg = svgTag('svg', {
+        viewBox: `0 0 ${width} ${height}`,
+        xmlns: 'http://www.w3.org/2000/svg',
+    }, elements.join(''));
+    return svg;
+}
+function renderShape(shape) {
+    switch (shape.type) {
+        case 'line':
+            return renderLine(shape);
+        case 'circle':
+            return renderCircle(shape);
+        case 'rect':
+            return renderRect(shape);
+        case 'triangle':
+            return renderTriangle(shape);
+        case 'angle':
+            return renderAngle(shape);
+        default:
+            return '';
+    }
+}
+function renderLine(shape) {
+    const { x1, y1, x2, y2, label } = shape;
+    const elements = [];
+    // Draw line
+    elements.push(line(x1, y1, x2, y2, {
+        stroke: '#333',
+        'stroke-width': 2,
+    }));
+    // Add endpoints
+    elements.push(circle(x1, y1, 3, { fill: '#333' }));
+    elements.push(circle(x2, y2, 3, { fill: '#333' }));
+    // Add label if provided
+    if (label) {
+        const midX = (x1 + x2) / 2;
+        const midY = (y1 + y2) / 2;
+        elements.push(text(midX + 5, midY - 5, label, {
+            'text-anchor': 'start',
+            'font-size': 12,
+            fill: '#333',
+        }));
+    }
+    return svgTag('g', { class: 'line' }, elements.join(''));
+}
+function renderCircle(shape) {
+    const { cx, cy, r, label } = shape;
+    const elements = [];
+    // Draw circle
+    elements.push(circle(cx, cy, r, {
+        fill: 'none',
+        stroke: '#333',
+        'stroke-width': 2,
+    }));
+    // Draw center point
+    elements.push(circle(cx, cy, 3, { fill: '#333' }));
+    // Add label if provided
+    if (label) {
+        elements.push(text(cx, cy - r - 10, label, {
+            'text-anchor': 'middle',
+            'font-size': 12,
+            fill: '#333',
+        }));
+    }
+    return svgTag('g', { class: 'circle' }, elements.join(''));
+}
+function renderRect(shape) {
+    const { x, y, width, height, label } = shape;
+    const elements = [];
+    // Draw rectangle
+    elements.push(rect(x, y, width, height, {
+        fill: 'none',
+        stroke: '#333',
+        'stroke-width': 2,
+    }));
+    // Add corner points
+    elements.push(circle(x, y, 3, { fill: '#333' }));
+    elements.push(circle(x + width, y, 3, { fill: '#333' }));
+    elements.push(circle(x + width, y + height, 3, { fill: '#333' }));
+    elements.push(circle(x, y + height, 3, { fill: '#333' }));
+    // Add label if provided
+    if (label) {
+        elements.push(text(x + width / 2, y - 10, label, {
+            'text-anchor': 'middle',
+            'font-size': 12,
+            fill: '#333',
+        }));
+    }
+    return svgTag('g', { class: 'rectangle' }, elements.join(''));
+}
+function renderTriangle(shape) {
+    const { points, label } = shape;
+    const elements = [];
+    // Draw triangle
+    elements.push(polygon(points, {
+        fill: 'none',
+        stroke: '#333',
+        'stroke-width': 2,
+    }));
+    // Add vertices
+    points.forEach(([px, py]) => {
+        elements.push(circle(px, py, 3, { fill: '#333' }));
+    });
+    // Add label if provided
+    if (label) {
+        // Calculate centroid
+        const cx = points.reduce((sum, [x]) => sum + x, 0) / points.length;
+        const cy = points.reduce((sum, [, y]) => sum + y, 0) / points.length;
+        elements.push(text(cx, cy, label, {
+            'text-anchor': 'middle',
+            'dominant-baseline': 'middle',
+            'font-size': 12,
+            fill: '#333',
+        }));
+    }
+    return svgTag('g', { class: 'triangle' }, elements.join(''));
+}
+function renderAngle(shape) {
+    const { vertex, rays, label } = shape;
+    const [vx, vy] = vertex;
+    const [[r1x, r1y], [r2x, r2y]] = rays;
+    const elements = [];
+    // Calculate angle
+    const angle1 = Math.atan2(vy - r1y, r1x - vx) * 180 / Math.PI;
+    const angle2 = Math.atan2(vy - r2y, r2x - vx) * 180 / Math.PI;
+    // Draw rays
+    const rayLength = 50;
+    elements.push(line(vx, vy, r1x, r1y, {
+        stroke: '#333',
+        'stroke-width': 2,
+    }));
+    elements.push(line(vx, vy, r2x, r2y, {
+        stroke: '#333',
+        'stroke-width': 2,
+    }));
+    // Draw angle arc
+    const arcRadius = 20;
+    const startAngle = Math.atan2(r1y - vy, r1x - vx) * 180 / Math.PI;
+    const endAngle = Math.atan2(r2y - vy, r2x - vx) * 180 / Math.PI;
+    elements.push(path(arcPath(vx, vy, arcRadius, startAngle, endAngle), {
+        fill: 'rgba(100, 149, 237, 0.2)',
+        stroke: '#6495ED',
+        'stroke-width': 1.5,
+    }));
+    // Add vertex point
+    elements.push(circle(vx, vy, 4, { fill: '#333' }));
+    // Add label if provided
+    if (label) {
+        // Position label at middle of angle
+        const midAngle = ((startAngle + endAngle) / 2) * Math.PI / 180;
+        const labelRadius = arcRadius + 15;
+        const labelX = vx + labelRadius * Math.cos(midAngle);
+        const labelY = vy - labelRadius * Math.sin(midAngle);
+        elements.push(text(labelX, labelY, label, {
+            'text-anchor': 'middle',
+            'dominant-baseline': 'middle',
+            'font-size': 14,
+            fill: '#333',
+        }));
+    }
+    return svgTag('g', { class: 'angle' }, elements.join(''));
+}

package/dist/renderers/graph.d.ts

@@ -0,0 +1,3 @@
+import type { GraphDSL } from '../types';
+export declare function renderGraph(dsl: GraphDSL): string;
+//# sourceMappingURL=graph.d.ts.map

package/dist/renderers/graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/renderers/graph.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAiB,MAAM,UAAU,CAAC;AAMxD,wBAAgB,WAAW,CAAC,GAAG,EAAE,QAAQ,GAAG,MAAM,CA2CjD"}

package/dist/renderers/graph.js

@@ -0,0 +1,137 @@
+// Graph renderer
+import { svgTag } from '../utils/svgTag';
+import { gridLines, axes } from '../utils/gridLines';
+import { createCoordTransform } from '../utils/coordTransform';
+import { path } from '../utils/shapes';
+export function renderGraph(dsl) {
+    const { width, height, xRange, yRange, functions, title } = dsl;
+    const elements = [];
+    // Add arrow markers
+    elements.push(createGraphMarkers());
+    // Draw grid
+    elements.push(gridLines({
+        xRange,
+        yRange,
+        width,
+        height,
+        xSteps: 10,
+        ySteps: 10,
+        stroke: '#e0e0e0',
+        strokeWidth: 1,
+    }));
+    // Draw axes
+    elements.push(axes({
+        xRange,
+        yRange,
+        width,
+        height,
+        showLabels: true,
+    }));
+    // Create coordinate transform
+    const transform = createCoordTransform({ xRange, yRange, width, height });
+    // Render functions
+    functions.forEach(fn => {
+        elements.push(renderFunction(fn, transform, xRange));
+    });
+    const svg = svgTag('svg', {
+        viewBox: `0 0 ${width} ${height}`,
+        xmlns: 'http://www.w3.org/2000/svg',
+    }, elements.join(''));
+    return svg;
+}
+function renderFunction(fn, transform, xRange) {
+    const { equation, color, style = 'solid' } = fn;
+    // Generate points along the curve
+    const step = (xRange[1] - xRange[0]) / 100;
+    const points = [];
+    for (let x = xRange[0]; x <= xRange[1]; x += step) {
+        try {
+            // Safely evaluate the function
+            const y = evaluateFunction(equation, x);
+            // Check if y is finite and within reasonable bounds
+            if (isFinite(y) && Math.abs(y) < 1e6) {
+                points.push([x, y]);
+            }
+            else {
+                // Break the path if we hit infinity or NaN
+                if (points.length > 1) {
+                    // We'll handle discontinuities by creating separate paths
+                }
+            }
+        }
+        catch (e) {
+            // Skip invalid points
+        }
+    }
+    // Transform points to SVG coordinates
+    const svgPoints = points.map(([x, y]) => {
+        const sx = transform.x(x);
+        const sy = transform.y(y);
+        return [sx, sy];
+    });
+    // Create path data
+    let d = '';
+    if (svgPoints.length > 0) {
+        d = `M ${svgPoints[0][0]} ${svgPoints[0][1]}`;
+        for (let i = 1; i < svgPoints.length; i++) {
+            d += ` L ${svgPoints[i][0]} ${svgPoints[i][1]}`;
+        }
+    }
+    const strokeDasharray = style === 'dashed' ? '8,4' : style === 'dotted' ? '2,2' : 'none';
+    return path(d, {
+        fill: 'none',
+        stroke: color,
+        'stroke-width': 2.5,
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-dasharray': strokeDasharray,
+    });
+}
+/**
+ * Safely evaluate a mathematical function
+ * Supports: basic arithmetic, Math functions, powers
+ */
+function evaluateFunction(equation, x) {
+    // Create a safe evaluation context
+    const safeMath = {
+        sin: Math.sin,
+        cos: Math.cos,
+        tan: Math.tan,
+        asin: Math.asin,
+        acos: Math.acos,
+        atan: Math.atan,
+        sqrt: Math.sqrt,
+        abs: Math.abs,
+        log: Math.log,
+        exp: Math.exp,
+        pow: Math.pow,
+        PI: Math.PI,
+        E: Math.E,
+    };
+    // Replace common notation with JavaScript equivalents
+    let expr = equation
+        .replace(/\^/g, '**') // x^2 -> x**2
+        .replace(/ln/g, 'log') // ln -> log
+        .replace(/(\d)([a-zA-Z])/g, '$1*$2'); // 2x -> 2*x
+    // Create a function with x as parameter
+    try {
+        const func = new Function('x', 'Math', `
+      with (Math) {
+        return ${expr};
+      }
+    `);
+        return func(x, safeMath);
+    }
+    catch (e) {
+        return NaN;
+    }
+}
+function createGraphMarkers() {
+    return `
+    <defs>
+      <marker id="graph-arrow" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
+        <path d="M0,0 L10,5 L0,10" fill="#333" />
+      </marker>
+    </defs>
+  `;
+}

package/dist/renderers/numberLine.d.ts

@@ -0,0 +1,3 @@
+import type { NumberLineDSL } from '../types';
+export declare function renderNumberLine(dsl: NumberLineDSL): string;
+//# sourceMappingURL=numberLine.d.ts.map

package/dist/renderers/numberLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberLine.d.ts","sourceRoot":"","sources":["../../src/renderers/numberLine.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,UAAU,CAAC;AAI9D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CA+F3D"}