@jbrowse/svgcanvas 6.5.0 → 7.0.0

package/dist/context.test.js

@@ -0,0 +1,67 @@
+// @vitest-environment jsdom
+import { beforeAll, expect, test } from 'vitest';
+import { Context } from './index.js';
+class Matrix {
+    m;
+    constructor(m = [1, 0, 0, 1, 0, 0]) {
+        this.m = m;
+    }
+    get a() {
+        return this.m[0];
+    }
+    get b() {
+        return this.m[1];
+    }
+    get c() {
+        return this.m[2];
+    }
+    get d() {
+        return this.m[3];
+    }
+    get e() {
+        return this.m[4];
+    }
+    get f() {
+        return this.m[5];
+    }
+    multiply(o) {
+        return new Matrix([
+            this.a * o.a + this.c * o.b,
+            this.b * o.a + this.d * o.b,
+            this.a * o.c + this.c * o.d,
+            this.b * o.c + this.d * o.d,
+            this.a * o.e + this.c * o.f + this.e,
+            this.b * o.e + this.d * o.f + this.f,
+        ]);
+    }
+    translate(x, y = 0) {
+        return this.multiply(new Matrix([1, 0, 0, 1, x, y]));
+    }
+    scale(x, y = x) {
+        return this.multiply(new Matrix([x, 0, 0, y, 0, 0]));
+    }
+}
+beforeAll(() => {
+    globalThis.DOMMatrix = Matrix;
+});
+test('a fill covering the whole context paints over, it does not clear', () => {
+    const ctx = new Context(100, 50);
+    ctx.fillStyle = '#123456';
+    ctx.fillRect(0, 0, 10, 10);
+    ctx.fillText('A', 1, 1);
+    // a full-width highlight band is exactly this call, and it used to throw the
+    // drawing away
+    ctx.fillStyle = 'rgba(255,140,0,0.28)';
+    ctx.fillRect(0, 0, 100, 50);
+    const svg = ctx.getSvg().innerHTML;
+    expect(svg).toContain('>A<');
+    expect(svg).toContain('#123456');
+    expect(svg).toContain('fill-opacity="0.28"');
+});
+test('clearRect over the whole context still clears it', () => {
+    const ctx = new Context(100, 50);
+    ctx.fillText('A', 1, 1);
+    ctx.clearRect(0, 0, 100, 50);
+    expect(ctx.getSvg().innerHTML).not.toContain('>A<');
+});
+//# sourceMappingURL=context.test.js.map

package/dist/context.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.test.js","sourceRoot":"","sources":["../src/context.test.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -9,33 +9,24 @@
  * Copyright (c) 2014 Gliffy Inc.
  * Copyright (c) 2021 Zeno Zeng
  *
- * Vendored and converted to ESM/TypeScript for pure ESM compatibility.
+ * Vendored and converted to ESM/TypeScript for pure ESM compatibility, and cut
+ * down to the drawing calls the renderers make: what a multiple sequence
+ * alignment needs is rectangles, paths, arcs and a great many glyphs. Gradients,
+ * patterns, clipping, rotation, bezier curves, stroked text, shadows and image
+ * drawing are gone with the state they carried.
  */
-declare class CanvasGradient {
-    __root: SVGElement;
-    __ctx: Context;
-    constructor(gradientNode: SVGElement, ctx: Context);
-    addColorStop(offset: number, color: string): void;
-}
 interface ContextOptions {
-    width?: number;
-    height?: number;
-    enableMirroring?: boolean;
     document?: Document;
     ctx?: CanvasRenderingContext2D;
-    debug?: boolean;
 }
 export declare class Context {
     width: number;
     height: number;
-    enableMirroring: boolean;
     canvas: Context;
     __document: Document;
     __ctx: CanvasRenderingContext2D;
     __canvas?: HTMLCanvasElement;
     __root: SVGSVGElement;
-    __ids: Record<string, string>;
-    __defs: SVGDefsElement;
     __currentElement: SVGElement;
     __styleStack: any[];
     __groupStack: SVGElement[];
@@ -46,38 +37,27 @@ export declare class Context {
     };
     __transformMatrix: DOMMatrix;
     __transformMatrixStack?: DOMMatrix[];
-    __currentElementsToStyle?: {
-        element: SVGElement;
-        children: SVGElement[];
-    };
-    __options: ContextOptions;
-    __id: string;
-    __fontUnderline?: string;
-    __fontHref?: string;
+    __fontCache: Map<string, CSSStyleDeclaration>;
     strokeStyle: any;
     fillStyle: any;
-    lineCap: any;
-    lineJoin: any;
-    miterLimit: any;
     lineWidth: any;
-    globalAlpha: any;
     font: any;
-    shadowColor: any;
-    shadowOffsetX: any;
-    shadowOffsetY: any;
-    shadowBlur: any;
     textAlign: any;
     textBaseline: any;
     lineDash: any;
-    constructor(o?: ContextOptions | number, height?: number);
+    constructor(width: number, height: number, options?: ContextOptions);
     __createElement(elementName: string, properties?: Record<string, any>, resetFill?: boolean): SVGElement;
     __setDefaultStyles(): void;
     __applyStyleState(styleState: Record<string, any>): void;
     __getStyleState(): Record<string, any>;
+    /**
+     * A translation is what an element's own x/y already say, and repeating it as
+     * a matrix costs ~35 bytes on every glyph of an alignment. Anything else --
+     * the scale a sequence-logo letter is stretched by -- still needs the matrix.
+     */
     __applyTransformation(element: SVGElement, matrix?: DOMMatrix): void;
     __applyStyleToCurrentElement(type: string): void;
     __closestGroupOrSvg(node?: SVGElement): SVGElement;
-    getSerializedSvg(fixNamedEntities?: boolean): string;
     getSvg(): SVGSVGElement;
     save(): void;
     restore(): void;
@@ -87,49 +67,28 @@ export declare class Context {
     moveTo(x: number, y: number): void;
     closePath(): void;
     lineTo(x: number, y: number): void;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
     quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+    __applyPaintOrder(order: string, other: string): void;
     stroke(): void;
     fill(): void;
-    rect(x: number, y: number, width: number, height: number): void;
-    __clearCanvas(): void;
     fillRect(x: number, y: number, width: number, height: number): void;
     strokeRect(x: number, y: number, width: number, height: number): void;
     clearRect(x: number, y: number, width: number, height: number): void;
-    createLinearGradient(x1: number, y1: number, x2: number, y2: number): CanvasGradient;
-    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
-    __applyText(text: string, x: number, y: number, action: string): void;
+    __clearCanvas(): void;
+    __parsedFont(): CSSStyleDeclaration;
     fillText(text: string, x: number, y: number): void;
-    strokeText(text: string, x: number, y: number): void;
     measureText(text: string): TextMetrics;
     arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterClockwise?: boolean): void;
-    clip(): void;
     setLineDash(dashArray: number[]): void;
     setTransform(a: number | DOMMatrix, b?: number, c?: number, d?: number, e?: number, f?: number): void;
     getTransform(): DOMMatrix;
     resetTransform(): void;
     scale(x: number, y?: number): void;
-    rotate(angle: number): void;
     translate(x: number, y: number): void;
-    transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
     __matrixTransform(x: number, y: number): DOMPoint;
     __getTransformScale(): {
         x: number;
         y: number;
     };
-    __getTransformRotation(): number;
-    /**
-     * An <image> of the source, cropped and scaled the way the canvas call asks:
-     * a nested <svg> whose viewBox is the source rectangle maps it onto the
-     * destination rectangle exactly. Throws rather than dropping the image, so a
-     * renderer that draws one into an export finds out.
-     */
-    drawImage(image: unknown, ...args: number[]): void;
-    imageSmoothingEnabled: boolean;
-    drawFocusRing(): void;
-    createImageData(): void;
-    putImageData(): void;
-    globalCompositeOperation(): void;
-    createPattern(): null;
 }
 export {};