@peter.prib/renderengine 0.14.0 → 0.15.1

package/src/CanvasRenderer.js

@@ -1,201 +1,226 @@
-import { BaseRenderer } from './BaseRenderer.js';
-
-/**
- * @class CanvasRenderer
- * Renders shapes by drawing on a 2D canvas context.
- */
-export class CanvasRenderer extends BaseRenderer {
-    get type() { return 'canvas'; }
-    get centerTextAnchor() { return 'center'; }
-
-    constructor(container, width, height) {
-        super(container, width, height);
-        this.canvas = document.createElement('canvas');
-        this.canvas.width = width;
-        this.canvas.height = height;
-        // Inline elements (the default for <canvas>) leave a few px of baseline
-        // whitespace below them inside a block container, making the
-        // container's scrollHeight exceed its clientHeight for every chart.
-        this.canvas.style.display = 'block';
-        this._shapes = [];
-        this.container.appendChild(this.canvas);
-        this.ctx = this.canvas.getContext('2d');
-    }
-
-    /** Resize the canvas. Setting a canvas's size clears it, so redraw after. */
-    resize(width, height) {
-        super.resize(width, height);
-        this.canvas.width = width;
-        this.canvas.height = height;
-    }
-
-    clear() {
-        this.ctx.clearRect(0, 0, this.width, this.height);
-        this._shapes = [];
-    }
-
-    // Always returns an isolated Path2D — used by hitTest() to test one
-    // shape's geometry at a time. Previously rect/circle called this.ctx.rect()/
-    // .arc() directly onto the canvas's own current path without resetting it
-    // first, so each hitTest() loop iteration kept accumulating geometry from
-    // every shape checked before it, corrupting hit results for anything but
-    // the very first shape tested (tooltips/clicks/hover on Canvas charts
-    // could resolve to the wrong shape).
-    _drawPath(shape) {
-        const p = new Path2D();
-        switch (shape.type) {
-            case 'rect':
-                p.rect(shape.x, shape.y, shape.width, shape.height);
-                return p;
-            case 'circle':
-                p.arc(shape.cx, shape.cy, shape.r, 0, 2 * Math.PI);
-                return p;
-            case 'path':
-                return new Path2D(shape.d);
-            default:
-                return p; // empty — no geometry to hit-test
-        }
-    }
-    _setShapeType={
-        rect:(shape)=>this.ctx.rect(shape.x, shape.y, shape.width, shape.height),
-        circle:(shape)=>this.ctx.arc(shape.cx, shape.cy, shape.r, 0, 2 * Math.PI),
-        path:(shape,fill,stroke)=>{
-            const p = new Path2D(shape.d);
-            if (fill && fill !== 'none') { this.ctx.fillStyle = fill; this.ctx.fill(p); }
-            if (stroke && stroke.color !== 'none') {
-                this.ctx.strokeStyle = stroke.color;
-                this.ctx.lineWidth = stroke.width || 1;
-                // Used by the gauge arcs' rounded end-caps ({cap: 'round'}).
-                this.ctx.lineCap = stroke.cap || 'butt';
-                this.ctx.stroke(p);
-            }
-        }
-    }
-    // Shared by text() (initial draw) and _draw()'s 'text' case (redraw on
-    // hover enter/leave) so rotation/alignment logic isn't duplicated.
-    _paintText(shape) {
-        const hoverStyle = shape._hoverStyle;
-        const fill = hoverStyle?.fill ?? shape.fill;
-        this.ctx.fillStyle = fill || 'black';
-        this.ctx.font = `${shape.fontStyle || ''} ${shape.fontWeight || ''} ${shape.fontSize || '12px'} ${shape.fontFamily || 'sans-serif'}`.trim().replace(/\s+/g, ' ');
-        let textAlign = shape.textAnchor || 'start';
-        if (textAlign === 'middle') textAlign = 'center';
-        this.ctx.textAlign = textAlign;
-        this.ctx.textBaseline = 'middle';
-        if (shape.rotation) {
-            this.ctx.save();
-            this.ctx.translate(shape.x, shape.y);
-            this.ctx.rotate(shape.rotation);
-            this.ctx.fillText(shape.text, 0, 0);
-            this.ctx.restore();
-        } else {
-            this.ctx.fillText(shape.text, shape.x, shape.y);
-        }
-    }
-    _draw(shape) {
-        if (shape.type === 'text') { this._paintText(shape); return; }
-
-        const hoverStyle = shape._hoverStyle;
-        const fill = hoverStyle?.fill ?? shape.fill;
-        const stroke = hoverStyle?.stroke ?? shape.stroke;
-
-        // For path, we need to handle fill and stroke separately inside the case.
-        const isPath = shape.type === 'path';
-
-        this.ctx.beginPath();
-        this._setShapeType[shape.type](shape, fill, stroke);
-        if (isPath) return
-        if (fill && fill !== 'none') {
-            this.ctx.fillStyle = fill;
-            this.ctx.fill();
-        }
-        if (stroke) {
-            this.ctx.strokeStyle = stroke.color || 'none';
-            this.ctx.lineWidth = stroke.width || 1;
-            this.ctx.stroke();
-        }
-    }
-
-    _redraw() {
-        this.ctx.clearRect(0, 0, this.width, this.height);
-        this._shapes.forEach(shape => this._draw(shape));
-    }
-
-    rect(x, y, width, height, fill, stroke, extra = {}) {
-        const shape = { type: 'rect', x, y, width, height, fill, stroke, id: `shape_${this._shapes.length}`, ...extra };
-        this._shapes.push(shape);
-        this._draw(shape);
-    }
-
-    circle(cx, cy, r, fill, stroke, extra = {}) {
-        const shape = { type: 'circle', cx, cy, r, fill, stroke, id: `shape_${this._shapes.length}`, ...extra };
-        this._shapes.push(shape);
-        this._draw(shape);
-    }
-
-    path(d, fill, stroke, extra = {}) {
-        const shape = { type: 'path', d, fill, stroke, id: `shape_${this._shapes.length}`, ...extra };
-        this._shapes.push(shape);
-        this._draw(shape);
-    }
-
-    /** Text width measured by this renderer's own 2D context. */
-    measureText(text, font = {}) {
-        if (!this.ctx?.measureText) return super.measureText(text, font);
-        this.ctx.save();
-        this.ctx.font = BaseRenderer.cssFont(font);
-        const width = this.ctx.measureText(String(text)).width;
-        this.ctx.restore();
-        return width;
-    }
-
-    text(text, x, y, options = {}) {
-        const shape = { type: 'text', text, x, y, ...options, id: `shape_${this._shapes.length}` };
-        this._shapes.push(shape);
-        this._paintText(shape);
-    }
-
-    hitTest(x, y) {
-        for (let i = this._shapes.length - 1; i >= 0; i--) {
-            const shape = this._shapes[i];
-            const path2d = this._drawPath(shape);
-
-            // 1. Check for a fill hit first.
-            if (shape.fill && shape.fill !== 'none') {
-                if (path2d ? this.ctx.isPointInPath(path2d, x, y) : this.ctx.isPointInPath(x, y)) {
-                    return shape;
-                }
-            }
-
-            // 2. If no fill hit, check for a stroke hit.
-            if (shape.stroke && shape.stroke.color !== 'none') {
-                this.ctx.lineWidth = shape.stroke.width || 1;
-                if (path2d ? this.ctx.isPointInStroke(path2d, x, y) : this.ctx.isPointInStroke(x, y)) {
-                    return shape;
-                }
-            }
-        }
-        return null;
-    }
-
-    enterState(shape, stateName) {
-        const targetShape = this._shapes.find(s => s.id === shape.id);
-        if (targetShape) {
-            targetShape._hoverStyle = { fill: 'orange', stroke: { color: '#333', width: 2 } };
-            this._redraw();
-        }
-    }
-
-    leaveState(shape, stateName) {
-        const targetShape = this._shapes.find(s => s.id === shape.id);
-        if (targetShape) {
-            delete targetShape._hoverStyle;
-            this._redraw();
-        }
-    }
-
-    renderDiagram(diagram) {
-        // Draw the diagram directly onto the canvas context.
-        diagram.drawOn(this.ctx);
-    }
+import { BaseRenderer } from './BaseRenderer.js';
+
+/**
+ * @class CanvasRenderer
+ * Renders shapes by drawing on a 2D canvas context.
+ */
+export class CanvasRenderer extends BaseRenderer {
+    get type() { return 'canvas'; }
+    get centerTextAnchor() { return 'center'; }
+
+    constructor(container, width, height) {
+        super(container, width, height);
+        const doc = typeof document !== 'undefined' ? document : container?.ownerDocument;
+        this.canvas = doc?.createElement ? doc.createElement('canvas') : (container?.canvas || {
+            style: {}, width, height,
+            getContext: () => ({ fillRect: () => {}, measureText: () => ({ width: 10 }), clearRect: () => {}, beginPath: () => {}, arc: () => {}, fill: () => {}, stroke: () => {} }),
+        });
+        this.canvas.width = width;
+        this.canvas.height = height;
+        // Inline elements (the default for <canvas>) leave a few px of baseline
+        // whitespace below them inside a block container, making the
+        // container's scrollHeight exceed its clientHeight for every chart.
+        if (this.canvas?.style) this.canvas.style.display = 'block';
+        this._shapes = [];
+        this.container?.appendChild?.(this.canvas);
+        this.ctx = this.canvas?.getContext?.('2d') || null;
+    }
+
+    /** Resize the canvas. Setting a canvas's size clears it, so redraw after. */
+    resize(width, height) {
+        super.resize(width, height);
+        this.canvas.width = width;
+        this.canvas.height = height;
+    }
+
+    clear() {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+        this._shapes = [];
+    }
+
+    // Always returns an isolated Path2D — used by hitTest() to test one
+    // shape's geometry at a time. Previously rect/circle called this.ctx.rect()/
+    // .arc() directly onto the canvas's own current path without resetting it
+    // first, so each hitTest() loop iteration kept accumulating geometry from
+    // every shape checked before it, corrupting hit results for anything but
+    // the very first shape tested (tooltips/clicks/hover on Canvas charts
+    // could resolve to the wrong shape).
+    _drawPath(shape) {
+        const p = new Path2D();
+        switch (shape.type) {
+            case 'rect':
+                p.rect(shape.x, shape.y, shape.width, shape.height);
+                return p;
+            case 'circle':
+                p.arc(shape.cx, shape.cy, shape.r, 0, 2 * Math.PI);
+                return p;
+            case 'path':
+                return new Path2D(shape.d);
+            default:
+                return p; // empty — no geometry to hit-test
+        }
+    }
+    _setShapeType={
+        rect:(shape)=>this.ctx.rect(shape.x, shape.y, shape.width, shape.height),
+        circle:(shape)=>this.ctx.arc(shape.cx, shape.cy, shape.r, 0, 2 * Math.PI),
+        path:(shape,fill,stroke)=>{
+            const p = new Path2D(shape.d);
+            if (fill && fill !== 'none') { this.ctx.fillStyle = fill; this.ctx.fill(p); }
+            if (stroke && stroke.color !== 'none') {
+                this.ctx.strokeStyle = stroke.color;
+                this.ctx.lineWidth = stroke.width || 1;
+                // Used by the gauge arcs' rounded end-caps ({cap: 'round'}).
+                this.ctx.lineCap = stroke.cap || 'butt';
+                this.ctx.stroke(p);
+            }
+        }
+    }
+    // Shared by text() (initial draw) and _draw()'s 'text' case (redraw on
+    // hover enter/leave) so rotation/alignment logic isn't duplicated.
+    _paintText(shape) {
+        const hoverStyle = shape._hoverStyle;
+        const fill = hoverStyle?.fill ?? shape.fill;
+        this.ctx.fillStyle = fill || 'black';
+        this.ctx.font = `${shape.fontStyle || ''} ${shape.fontWeight || ''} ${shape.fontSize || '12px'} ${shape.fontFamily || 'sans-serif'}`.trim().replace(/\s+/g, ' ');
+        let textAlign = shape.textAnchor || 'start';
+        if (textAlign === 'middle') textAlign = 'center';
+        this.ctx.textAlign = textAlign;
+        this.ctx.textBaseline = 'middle';
+        if (shape.rotation) {
+            this.ctx.save();
+            this.ctx.translate(shape.x, shape.y);
+            this.ctx.rotate(shape.rotation);
+            this.ctx.fillText(shape.text, 0, 0);
+            this.ctx.restore();
+        } else {
+            this.ctx.fillText(shape.text, shape.x, shape.y);
+        }
+    }
+    _draw(shape) {
+        if (shape.type === 'text') { this._paintText(shape); return; }
+
+        const hoverStyle = shape._hoverStyle;
+        const fill = hoverStyle?.fill ?? shape.fill;
+        const stroke = hoverStyle?.stroke ?? shape.stroke;
+
+        // For path, we need to handle fill and stroke separately inside the case.
+        const isPath = shape.type === 'path';
+
+        this.ctx.beginPath();
+        this._setShapeType[shape.type](shape, fill, stroke);
+        if (isPath) return
+        if (fill && fill !== 'none') {
+            this.ctx.fillStyle = fill;
+            this.ctx.fill();
+        }
+        if (stroke) {
+            this.ctx.strokeStyle = stroke.color || 'none';
+            this.ctx.lineWidth = stroke.width || 1;
+            this.ctx.stroke();
+        }
+    }
+
+    _redraw() {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+        this._shapes.forEach(shape => this._draw(shape));
+    }
+
+    rect(x, y, width, height, fill, stroke, extra = {}) {
+        const shape = { type: 'rect', x, y, width, height, fill, stroke, id: `shape_${this._shapes.length}`, ...extra };
+        this._shapes.push(shape);
+        this._draw(shape);
+        return shape;
+    }
+
+    circle(cx, cy, r, fill, stroke, extra = {}) {
+        const shape = { type: 'circle', cx, cy, r, fill, stroke, id: `shape_${this._shapes.length}`, ...extra };
+        this._shapes.push(shape);
+        this._draw(shape);
+        return shape;
+    }
+
+    path(d, fill, stroke, extra = {}) {
+        const shape = { type: 'path', d, fill, stroke, id: `shape_${this._shapes.length}`, ...extra };
+        this._shapes.push(shape);
+        this._draw(shape);
+        return shape;
+    }
+
+    /** Text width measured by this renderer's own 2D context. */
+    measureText(text, font = {}) {
+        if (!this.ctx?.measureText) return super.measureText(text, font);
+        this.ctx.save();
+        this.ctx.font = BaseRenderer.cssFont(font);
+        const width = this.ctx.measureText(String(text)).width;
+        this.ctx.restore();
+        return width;
+    }
+
+    text(text, x, y, options = {}) {
+        const shape = { type: 'text', text, x, y, ...options, id: `shape_${this._shapes.length}` };
+        this._shapes.push(shape);
+        this._paintText(shape);
+        return shape;
+    }
+
+    hitTest(x, y) {
+        for (let i = this._shapes.length - 1; i >= 0; i--) {
+            const shape = this._shapes[i];
+            const path2d = this._drawPath(shape);
+
+            // 1. Check for a fill hit first.
+            if (shape.fill && shape.fill !== 'none') {
+                if (path2d ? this.ctx.isPointInPath(path2d, x, y) : this.ctx.isPointInPath(x, y)) {
+                    return shape;
+                }
+            }
+
+            // 2. If no fill hit, check for a stroke hit.
+            if (shape.stroke && shape.stroke.color !== 'none') {
+                this.ctx.lineWidth = shape.stroke.width || 1;
+                if (path2d ? this.ctx.isPointInStroke(path2d, x, y) : this.ctx.isPointInStroke(x, y)) {
+                    return shape;
+                }
+            }
+        }
+        return null;
+    }
+
+    enterState(shape, stateName) {
+        const targetShape = this._shapes.find(s => s.id === shape.id);
+        if (targetShape) {
+            targetShape._hoverStyle = { fill: 'orange', stroke: { color: '#333', width: 2 } };
+            this._redraw();
+        }
+    }
+
+    leaveState(shape, stateName) {
+        const targetShape = this._shapes.find(s => s.id === shape.id);
+        if (targetShape) {
+            delete targetShape._hoverStyle;
+            this._redraw();
+        }
+    }
+
+    renderDiagram(diagram) {
+        // Draw the diagram directly onto the canvas context.
+        diagram.drawOn(this.ctx);
+    }
+
+    /**
+     * Create a linear gradient on this canvas context.
+     * @param {string} _id
+     * @param {Array<{offset: string|number, color: string}>} stops
+     * @param {{x0?: number, y0?: number, x1?: number, y1?: number}} [coords]
+     * @returns {CanvasGradient|null}
+     */
+    linearGradient(_id, stops = [], { x0 = 0, y0 = 0, x1 = 0, y1 = 100 } = {}) {
+        if (!this.ctx?.createLinearGradient) return null;
+        const grad = this.ctx.createLinearGradient(x0, y0, x1, y1);
+        for (const stop of stops) {
+            const offset = typeof stop.offset === 'number' ? stop.offset : (parseFloat(stop.offset) || 0) / 100;
+            grad.addColorStop(offset, stop.color);
+        }
+        return grad;
+    }
 }