@reffy/infinite-canvas 0.0.1

package/esm/serializer/serializer.d.ts

@@ -0,0 +1,54 @@
+import { ImageFileMetadata } from "storage";
+import { Canvas } from "../Canvas";
+import { Renderable } from "../shapes";
+export type SerializedTransform = {
+    x: number;
+    y: number;
+    sx: number;
+    sy: number;
+};
+export type SerializedNodeBase = {
+    id?: number;
+    type: string;
+    transform?: SerializedTransform;
+    children?: SerializedNode[];
+    layer?: number;
+    renderOrder?: number;
+};
+export type SerializedRect = SerializedNodeBase & {
+    type: "Rect";
+    width: number;
+    height: number;
+    color: [number, number, number, number];
+};
+export type SerializedImg = SerializedNodeBase & {
+    type: "Img";
+    width: number;
+    height: number;
+    fileId: number | string;
+};
+export type SerializedGrid = SerializedNodeBase & {
+    type: "Grid";
+    style?: number;
+};
+export type SerializedNode = SerializedRect | SerializedImg | SerializedGrid | SerializedNodeBase;
+export type SerializedCamera = {
+    zoom: number;
+    x: number;
+    y: number;
+};
+export type SerializedCanvas = {
+    version: 1;
+    canvas: {
+        width: number;
+        height: number;
+        dpr: number;
+    };
+    camera?: SerializedCamera;
+    root: SerializedNode;
+    files?: ImageFileMetadata[];
+};
+export declare function serializeNode(node: Renderable): SerializedNode;
+export declare function serializeCanvas(canvas: Canvas, files?: ImageFileMetadata[]): SerializedCanvas;
+export declare function deserializeCanvas(data: SerializedCanvas, canvas: Canvas, getFile: (id: string | number) => Promise<ImageFileMetadata>, writeFileToDatabase?: (data: string) => void): Promise<Canvas>;
+//# sourceMappingURL=serializer.d.ts.map

package/esm/serializer/serializer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serializer.d.ts","sourceRoot":"src/","sources":["serializer/serializer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAmBxD,MAAM,MAAM,mBAAmB,GAAG;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG;IAC/C,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,cAAc,GACtB,cAAc,GACd,aAAa,GACb,cAAc,GACd,kBAAkB,CAAC;AAEvB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,CAAC,CAAC;IACX,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC7B,CAAC;AAeF,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,CA0C9D;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,KAAK,CAAC,EAAE,iBAAiB,EAAE,GAC1B,gBAAgB,CAiBlB;AAED,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,gBAAgB,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,iBAAiB,CAAC,EAC5D,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,mBA6F7C"}

package/esm/serializer/serializer.js

@@ -0,0 +1,226 @@
+import { Canvas } from "../Canvas";
+import { Rect, Img, Grid } from "../shapes";
+import { hashStringToId } from "../util";
+/**
+ * What should be exposed?
+ * the images created - their position, scale and src - maintain the order they have been saved
+ *
+ * grid state should be tracked to decide if grid lines are there or not - TO BE IMPLEMENTED
+ *
+ * Should camera position be tracked
+ *
+ * How often should we write to the chosen method fo storage? When initialising the exporter, we can decide between indexdb and an actual db
+ * is there anyway to force a save when the app closes? In what circumstances will that not work? An ungraceful shutdown?
+ */
+const PLACEHOLDER_IMAGE_SRC = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjYjNiM2IzIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjUgNmEyLjI1IDIuMjUgMCAwIDEgMi4yNS0yLjI1aDE2LjVBMi4yNSAyLjI1IDAgMCAxIDIyLjUgNnYxMmEyLjI1IDIuMjUgMCAwIDEtMi4yNSAyLjI1SDMuNzVBMi4yNSAyLjI1IDAgMCAxIDEuNSAxOHpNMyAxNi4wNlYxOGMwIC40MTQuMzM2Ljc1Ljc1Ljc1aDE2LjVBLjc1Ljc1IDAgMCAwIDIxIDE4di0xLjk0bC0yLjY5LTIuNjg5YTEuNSAxLjUgMCAwIDAtMi4xMiAwbC0uODguODc5bC45Ny45N2EuNzUuNzUgMCAxIDEtMS4wNiAxLjA2bC01LjE2LTUuMTU5YTEuNSAxLjUgMCAwIDAtMi4xMiAwem0xMC4xMjUtNy44MWExLjEyNSAxLjEyNSAwIDEgMSAyLjI1IDBhMS4xMjUgMS4xMjUgMCAwIDEtMi4yNSAwIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=";
+const PLACEHOLDER_IMAGE_SIZE = 240;
+function transformOf(node) {
+    return {
+        x: node.x ?? 0,
+        y: node.y ?? 0,
+        sx: node.sx ?? 1,
+        sy: node.sy ?? 1,
+    };
+}
+function serializeChildren(node) {
+    return node.children.map(serializeNode);
+}
+export function serializeNode(node) {
+    if (node instanceof Img) {
+        const base = {
+            type: "Img",
+            id: node.seq,
+            renderOrder: node.renderOrder,
+            transform: transformOf(node),
+            width: node.width,
+            height: node.height,
+            fileId: node.fileId,
+            children: node.children?.length ? serializeChildren(node) : undefined,
+        };
+        return base;
+    }
+    if (node instanceof Rect) {
+        const base = {
+            type: "Rect",
+            id: node.seq,
+            renderOrder: node.renderOrder,
+            transform: transformOf(node),
+            width: node.width,
+            height: node.height,
+            color: node.color,
+            children: node.children?.length ? serializeChildren(node) : undefined,
+        };
+        return base;
+    }
+    if (node instanceof Grid) {
+        const base = {
+            type: "Grid",
+            style: node.gridType,
+        };
+        return base;
+    }
+    const generic = {
+        type: "Renderable",
+        children: node.children?.length ? serializeChildren(node) : undefined,
+    };
+    return generic;
+}
+export function serializeCanvas(canvas, files) {
+    const { gl } = canvas;
+    return {
+        version: 1,
+        canvas: {
+            width: gl.canvas.width,
+            height: gl.canvas.height,
+            dpr: window.devicePixelRatio || 1,
+        },
+        camera: {
+            x: canvas.camera.state.x,
+            y: canvas.camera.state.y,
+            zoom: canvas.camera.state.zoom,
+        },
+        root: serializeNode(canvas),
+        files,
+    };
+}
+export async function deserializeCanvas(data, canvas, getFile, writeFileToDatabase) {
+    canvas.children.length = 0;
+    if (data.camera) {
+        canvas.camera.state.setZoom(data.camera.zoom);
+        canvas.camera.state.setX(data.camera.x);
+        canvas.camera.state.setY(data.camera.y);
+    }
+    async function build(node, parent) {
+        let instance;
+        switch (node.type) {
+            case "Rect":
+                instance = new Rect({
+                    x: node.transform.x,
+                    y: node.transform.y,
+                    width: node.width,
+                    height: node.height,
+                });
+                instance.setScale(node.transform.sx, node.transform.sy);
+                canvas.appendChild(instance);
+                break;
+            case "Img":
+                let src;
+                try {
+                    src = (() => {
+                        if (data.files && Array.isArray(data.files)) {
+                            const fileMeta = data.files.find((e) => e.id === node.fileId);
+                            return fileMeta?.dataURL ?? PLACEHOLDER_IMAGE_SRC;
+                        }
+                        return PLACEHOLDER_IMAGE_SRC;
+                    })();
+                    if (writeFileToDatabase) {
+                        writeFileToDatabase(src);
+                    }
+                    const width = node.width;
+                    const height = node.height;
+                    const framedPlaceholder = await framePlaceholder(src, width * node.transform.sx, height * node.transform.sy);
+                    instance = new Img({
+                        x: node.transform.x,
+                        y: node.transform.y,
+                        src: framedPlaceholder,
+                        width,
+                        height,
+                    });
+                    getFile(node.fileId)
+                        .then((file) => {
+                        console.log("image loaded!");
+                        instance.src = file.dataURL;
+                    })
+                        .catch((err) => console.error("Image not loaded", err));
+                    //  skip hashing if it already has a file ID
+                    instance.fileId =
+                        node.fileId ?? (await hashStringToId(src));
+                    instance.setScale(node.transform.sx, node.transform.sy);
+                    canvas.appendChild(instance);
+                    if (typeof node.renderOrder === "number") {
+                        instance.renderOrder = node.renderOrder;
+                    }
+                }
+                catch (err) {
+                    // delete node from storage? It won't be saved in the next instance, so perhaps it's fine?
+                    console.error(`Failed to match image to restore with source: ${src}`);
+                }
+                finally {
+                    break;
+                }
+            case "Grid":
+                if (parent instanceof Canvas) {
+                    parent.grid.gridType = node.style;
+                }
+                break;
+            default:
+                break;
+        }
+        if (node.children) {
+            for (const child of node.children)
+                await build(child, instance);
+        }
+    }
+    await build(data.root, canvas);
+    return canvas;
+}
+async function loadImageElement(src) {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    return new Promise((resolve, reject) => {
+        img.onload = () => resolve(img);
+        img.onerror = (err) => reject(err);
+        img.src = src;
+    });
+}
+async function framePlaceholder(srcOrBlob, tw, th, bg = "#d6d6d6ff") {
+    let objectUrl = null;
+    let src;
+    if (srcOrBlob instanceof Blob) {
+        objectUrl = URL.createObjectURL(srcOrBlob);
+        src = objectUrl;
+    }
+    else {
+        src = srcOrBlob;
+    }
+    try {
+        let img = null;
+        try {
+            img = await loadImageElement(src);
+        }
+        catch (e) {
+            // Swallow in order to proceed with a background-only placeholder
+        }
+        const targetW = tw && tw > 0 ? tw : (img?.naturalWidth ?? PLACEHOLDER_IMAGE_SIZE);
+        const targetH = th && th > 0 ? th : (img?.naturalHeight ?? PLACEHOLDER_IMAGE_SIZE);
+        const canvas = document.createElement("canvas");
+        canvas.width = targetW;
+        canvas.height = targetH;
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = bg;
+        ctx.fillRect(0, 0, targetW, targetH);
+        if (img) {
+            // if any of the sides is less than the placeholder image size, then use the natural ratio
+            const ratio = Math.min(targetW / img.naturalWidth, targetH / img.naturalHeight);
+            const ratioedHeight = img.naturalHeight * ratio;
+            const ratioedWidth = img.naturalWidth * ratio;
+            let dw = PLACEHOLDER_IMAGE_SIZE;
+            let dh = PLACEHOLDER_IMAGE_SIZE;
+            if (PLACEHOLDER_IMAGE_SIZE > ratioedHeight ||
+                PLACEHOLDER_IMAGE_SIZE > ratioedWidth) {
+                dw = ratioedWidth;
+                dh = ratioedHeight;
+            }
+            const dx = Math.round((targetW - dw) / 2);
+            const dy = Math.round((targetH - dh) / 2);
+            ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, dx, dy, dw, dh);
+        }
+        return canvas.toDataURL("image/png");
+    }
+    finally {
+        if (objectUrl) {
+            URL.revokeObjectURL(objectUrl);
+        }
+    }
+}
+//# sourceMappingURL=serializer.js.map

package/esm/serializer/serializer.js.map

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

package/esm/shaders/grid.d.ts

@@ -0,0 +1,3 @@
+export declare const gridVert = "\n#extension GL_OES_standard_derivatives : enable\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\nprecision highp int;\n#else\nprecision mediump float;\nprecision mediump int;\n#endif\n\nuniform mat3 u_ViewProjectionInvMatrix;\nuniform float u_ZoomScale;\nuniform float u_CheckboardStyle;\nuniform float u_z;\n\nattribute vec2 a_Position;\n\nvarying vec2 v_Position;\n\nvec2 project_clipspace_to_world(vec2 p) {\n  return (u_ViewProjectionInvMatrix * vec3(p, 1.0)).xy;\n}\n\nvoid main() {\n  v_Position = project_clipspace_to_world(a_Position);\n  float z = mix(1.0, -1.0, u_z);\n  gl_Position = vec4(a_Position, z, 1.0);\n}\n";
+export declare const gridFrag = "\n#extension GL_OES_standard_derivatives : enable\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\nprecision highp int;\n#else\nprecision mediump float;\nprecision mediump int;\n#endif\n\nuniform mat3 u_ViewProjectionInvMatrix;\nuniform float u_ZoomScale;\nuniform float u_CheckboardStyle;\n\nvarying vec2 v_Position;\n\nconst vec4 GRID_COLOR = vec4(0.87, 0.87, 0.87, 1.0);\nconst vec4 PAGE_COLOR = vec4(0.986, 0.986, 0.986, 1.0);\nconst int CHECKERBOARD_STYLE_NONE = 0;\nconst int CHECKERBOARD_STYLE_GRID = 1;\nconst int CHECKERBOARD_STYLE_DOTS = 2;\nconst float BASE_GRID_PIXEL_SIZE = 100.0;\n\nvec2 scale_grid_size(float zoom) {\n  if (zoom < 0.125) return vec2(BASE_GRID_PIXEL_SIZE * 125.0, 0.125);\n  else if (zoom < 0.25) return vec2(BASE_GRID_PIXEL_SIZE * 25.0, 0.25);\n  else if (zoom < 0.5) return vec2(BASE_GRID_PIXEL_SIZE * 5.0, 0.5);\n  return vec2(BASE_GRID_PIXEL_SIZE, 4.0);\n}\n\nvec4 render_grid_checkerboard(vec2 coord) {\n  float alpha = 0.0;\n\n  vec2 size = scale_grid_size(u_ZoomScale);\n  float gridSize1 = size.x;\n  float gridSize2 = gridSize1 / 10.0;\n  float zoomStep = size.y;\n  int checkboardStyle = int(floor(u_CheckboardStyle + 0.5));\n\n  if (checkboardStyle == CHECKERBOARD_STYLE_GRID) {\n    vec2 grid1 = abs(fract(coord / gridSize1 - 0.5) - 0.5) / fwidth(coord) * gridSize1 / 2.0;\n    vec2 grid2 = abs(fract(coord / gridSize2 - 0.5) - 0.5) / fwidth(coord) * gridSize2;\n    float v1 = 1.0 - min(min(grid1.x, grid1.y), 1.0);\n    float v2 = 1.0 - min(min(grid2.x, grid2.y), 1.0);\n\n    if (v1 > 0.0) {\n      alpha = v1;\n    } else {\n      alpha = v2 * clamp(u_ZoomScale / zoomStep, 0.0, 1.0);\n    }\n  }\n    \n  return mix(PAGE_COLOR, GRID_COLOR, alpha);\n}\n\nvoid main() {\n  gl_FragColor = render_grid_checkerboard(v_Position);\n}\n";
+//# sourceMappingURL=grid.d.ts.map

package/esm/shaders/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"src/","sources":["shaders/grid.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,moBA4BpB,CAAC;AAEF,eAAO,MAAM,QAAQ,gwDA0DpB,CAAC"}

package/esm/shaders/grid.js

@@ -0,0 +1,89 @@
+export const gridVert = /* glsl */ `
+#extension GL_OES_standard_derivatives : enable
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+precision highp int;
+#else
+precision mediump float;
+precision mediump int;
+#endif
+
+uniform mat3 u_ViewProjectionInvMatrix;
+uniform float u_ZoomScale;
+uniform float u_CheckboardStyle;
+uniform float u_z;
+
+attribute vec2 a_Position;
+
+varying vec2 v_Position;
+
+vec2 project_clipspace_to_world(vec2 p) {
+  return (u_ViewProjectionInvMatrix * vec3(p, 1.0)).xy;
+}
+
+void main() {
+  v_Position = project_clipspace_to_world(a_Position);
+  float z = mix(1.0, -1.0, u_z);
+  gl_Position = vec4(a_Position, z, 1.0);
+}
+`;
+export const gridFrag = /* glsl */ `
+#extension GL_OES_standard_derivatives : enable
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+precision highp int;
+#else
+precision mediump float;
+precision mediump int;
+#endif
+
+uniform mat3 u_ViewProjectionInvMatrix;
+uniform float u_ZoomScale;
+uniform float u_CheckboardStyle;
+
+varying vec2 v_Position;
+
+const vec4 GRID_COLOR = vec4(0.87, 0.87, 0.87, 1.0);
+const vec4 PAGE_COLOR = vec4(0.986, 0.986, 0.986, 1.0);
+const int CHECKERBOARD_STYLE_NONE = 0;
+const int CHECKERBOARD_STYLE_GRID = 1;
+const int CHECKERBOARD_STYLE_DOTS = 2;
+const float BASE_GRID_PIXEL_SIZE = 100.0;
+
+vec2 scale_grid_size(float zoom) {
+  if (zoom < 0.125) return vec2(BASE_GRID_PIXEL_SIZE * 125.0, 0.125);
+  else if (zoom < 0.25) return vec2(BASE_GRID_PIXEL_SIZE * 25.0, 0.25);
+  else if (zoom < 0.5) return vec2(BASE_GRID_PIXEL_SIZE * 5.0, 0.5);
+  return vec2(BASE_GRID_PIXEL_SIZE, 4.0);
+}
+
+vec4 render_grid_checkerboard(vec2 coord) {
+  float alpha = 0.0;
+
+  vec2 size = scale_grid_size(u_ZoomScale);
+  float gridSize1 = size.x;
+  float gridSize2 = gridSize1 / 10.0;
+  float zoomStep = size.y;
+  int checkboardStyle = int(floor(u_CheckboardStyle + 0.5));
+
+  if (checkboardStyle == CHECKERBOARD_STYLE_GRID) {
+    vec2 grid1 = abs(fract(coord / gridSize1 - 0.5) - 0.5) / fwidth(coord) * gridSize1 / 2.0;
+    vec2 grid2 = abs(fract(coord / gridSize2 - 0.5) - 0.5) / fwidth(coord) * gridSize2;
+    float v1 = 1.0 - min(min(grid1.x, grid1.y), 1.0);
+    float v2 = 1.0 - min(min(grid2.x, grid2.y), 1.0);
+
+    if (v1 > 0.0) {
+      alpha = v1;
+    } else {
+      alpha = v2 * clamp(u_ZoomScale / zoomStep, 0.0, 1.0);
+    }
+  }
+    
+  return mix(PAGE_COLOR, GRID_COLOR, alpha);
+}
+
+void main() {
+  gl_FragColor = render_grid_checkerboard(v_Position);
+}
+`;
+//# sourceMappingURL=grid.js.map

package/esm/shaders/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"src/","sources":["shaders/grid.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BlC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DlC,CAAC"}

package/esm/shaders/img.d.ts

@@ -0,0 +1,4 @@
+declare const vert = "\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\n\nuniform vec2 u_resolution;\nuniform mat3 u_matrix;\nuniform float u_z;\n\nvarying vec2 v_texCoord;\n\nvoid main() {\n  vec2 position = (u_matrix * vec3(a_position, 1)).xy;\n  vec2 zeroToOne = position / u_resolution;\n  vec2 zeroToTwo = zeroToOne * 2.0;\n  vec2 clipSpace = zeroToTwo - 1.0;\n  float z = mix(1.0, -1.0, u_z);\n\n  gl_Position = vec4(clipSpace * vec2(1, -1), z, 1);\n\n  v_texCoord = a_texCoord;\n}\n";
+declare const frag = "\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n \nuniform sampler2D u_image;\n \nvarying vec2 v_texCoord;\n \nvoid main() {\n  gl_FragColor = texture2D(u_image, v_texCoord);\n}\n";
+export { vert as imageVert, frag as imageFrag };
+//# sourceMappingURL=img.d.ts.map

package/esm/shaders/img.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"img.d.ts","sourceRoot":"src/","sources":["shaders/img.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,geAqBT,CAAC;AAEF,QAAA,MAAM,IAAI,8OAcT,CAAC;AAEF,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,CAAC"}

package/esm/shaders/img.js

@@ -0,0 +1,39 @@
+const vert = `
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+
+uniform vec2 u_resolution;
+uniform mat3 u_matrix;
+uniform float u_z;
+
+varying vec2 v_texCoord;
+
+void main() {
+  vec2 position = (u_matrix * vec3(a_position, 1)).xy;
+  vec2 zeroToOne = position / u_resolution;
+  vec2 zeroToTwo = zeroToOne * 2.0;
+  vec2 clipSpace = zeroToTwo - 1.0;
+  float z = mix(1.0, -1.0, u_z);
+
+  gl_Position = vec4(clipSpace * vec2(1, -1), z, 1);
+
+  v_texCoord = a_texCoord;
+}
+`;
+const frag = `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+ 
+uniform sampler2D u_image;
+ 
+varying vec2 v_texCoord;
+ 
+void main() {
+  gl_FragColor = texture2D(u_image, v_texCoord);
+}
+`;
+export { vert as imageVert, frag as imageFrag };
+//# sourceMappingURL=img.js.map

package/esm/shaders/img.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"img.js","sourceRoot":"src/","sources":["shaders/img.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;;;;CAqBZ,CAAC;AAEF,MAAM,IAAI,GAAG;;;;;;;;;;;;;;CAcZ,CAAC;AAEF,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,CAAC"}

package/esm/shaders/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./shape";
+export * from "./grid";
+export * from "./img";
+//# sourceMappingURL=index.d.ts.map

package/esm/shaders/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"src/","sources":["shaders/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC"}

package/esm/shaders/index.js

@@ -0,0 +1,4 @@
+export * from "./shape";
+export * from "./grid";
+export * from "./img";
+//# sourceMappingURL=index.js.map

package/esm/shaders/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["shaders/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC"}

package/esm/shaders/shape.d.ts

@@ -0,0 +1,4 @@
+declare const vert = "\nattribute vec2 a_position;\n\nuniform vec2 u_resolution;\nuniform mat3 u_matrix;\nuniform float u_z;\n\n// all shaders have a main function\nvoid main() {\n  vec2 position = (u_matrix * vec3(a_position, 1)).xy;\n\n  vec2 zeroToOne = position / u_resolution;\n  vec2 zeroToTwo = zeroToOne * 2.0;\n  vec2 clipSpace = zeroToTwo - 1.0;\n  float z = mix(1.0, -1.0, u_z);\n\n  gl_Position = vec4(clipSpace * vec2(1, -1), z, 1);\n}\n";
+declare const frag = "\nprecision mediump float;\nuniform vec4 u_color;\n\nvoid main() {\n  gl_FragColor = u_color;\n}\n";
+export { vert as shapeVert, frag as shapeFrag };
+//# sourceMappingURL=shape.d.ts.map

package/esm/shaders/shape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.d.ts","sourceRoot":"src/","sources":["shaders/shape.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,ibAkBT,CAAC;AAEF,QAAA,MAAM,IAAI,uGAOT,CAAC;AAEF,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,CAAC"}

package/esm/shaders/shape.js

@@ -0,0 +1,29 @@
+const vert = `
+attribute vec2 a_position;
+
+uniform vec2 u_resolution;
+uniform mat3 u_matrix;
+uniform float u_z;
+
+// all shaders have a main function
+void main() {
+  vec2 position = (u_matrix * vec3(a_position, 1)).xy;
+
+  vec2 zeroToOne = position / u_resolution;
+  vec2 zeroToTwo = zeroToOne * 2.0;
+  vec2 clipSpace = zeroToTwo - 1.0;
+  float z = mix(1.0, -1.0, u_z);
+
+  gl_Position = vec4(clipSpace * vec2(1, -1), z, 1);
+}
+`;
+const frag = `
+precision mediump float;
+uniform vec4 u_color;
+
+void main() {
+  gl_FragColor = u_color;
+}
+`;
+export { vert as shapeVert, frag as shapeFrag };
+//# sourceMappingURL=shape.js.map

package/esm/shaders/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","sourceRoot":"src/","sources":["shaders/shape.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;CAkBZ,CAAC;AAEF,MAAM,IAAI,GAAG;;;;;;;CAOZ,CAAC;AAEF,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,CAAC"}

package/esm/shapes/Grid.d.ts

@@ -0,0 +1,21 @@
+import { WebGLRenderable } from "./Renderable";
+export declare enum GRID_TYPE {
+    NONE = 0,
+    GRID = 1
+}
+export declare class Grid extends WebGLRenderable {
+    private buffer;
+    private vertexCount;
+    viewProjectionInvLocation: WebGLUniformLocation;
+    zoomScaleLocation: WebGLUniformLocation;
+    checkboardStyleLocation: WebGLUniformLocation;
+    gridType: GRID_TYPE;
+    zoom: number;
+    getPositions(): Float32Array<ArrayBuffer>;
+    changeGridType(type: GRID_TYPE): void;
+    render(gl: WebGLRenderingContext, program: WebGLProgram): void;
+    destroy(): void;
+    hitTest(x: number, y: number): boolean;
+    protected setUpUniforms(gl: WebGLRenderingContext, program: WebGLProgram): void;
+}
+//# sourceMappingURL=Grid.d.ts.map

package/esm/shapes/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"src/","sources":["shapes/Grid.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,oBAAY,SAAS;IACnB,IAAI,IAAA;IACJ,IAAI,IAAA;CACL;AAED,qBAAa,IAAK,SAAQ,eAAe;IACvC,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,WAAW,CAAK;IAExB,yBAAyB,EAAE,oBAAoB,CAAC;IAChD,iBAAiB,EAAE,oBAAoB,CAAC;IACxC,uBAAuB,EAAE,oBAAoB,CAAC;IAE9C,QAAQ,EAAE,SAAS,CAAkB;IACrC,IAAI,EAAE,MAAM,CAAK;IAGjB,YAAY;IAKZ,cAAc,CAAC,IAAI,EAAE,SAAS;IAI9B,MAAM,CAAC,EAAE,EAAE,qBAAqB,EAAE,OAAO,EAAE,YAAY,GAAG,IAAI;IAwD9D,OAAO,IAAI,IAAI;IAMf,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO;IAItC,SAAS,CAAC,aAAa,CACrB,EAAE,EAAE,qBAAqB,EACzB,OAAO,EAAE,YAAY,GACpB,IAAI;CAgBR"}

package/esm/shapes/Grid.js

@@ -0,0 +1,86 @@
+import { m3 } from "../util";
+import { WebGLRenderable } from "./Renderable";
+export var GRID_TYPE;
+(function (GRID_TYPE) {
+    GRID_TYPE[GRID_TYPE["NONE"] = 0] = "NONE";
+    GRID_TYPE[GRID_TYPE["GRID"] = 1] = "GRID";
+})(GRID_TYPE || (GRID_TYPE = {}));
+export class Grid extends WebGLRenderable {
+    constructor() {
+        super(...arguments);
+        this.buffer = null;
+        this.vertexCount = 0;
+        this.gridType = GRID_TYPE.GRID;
+        this.zoom = 1;
+    }
+    // Fullscreen big-triangle in clip space: covers [-1,1] without seams
+    getPositions() {
+        // x,y pairs in clip space
+        return new Float32Array([-1.0, -1.0, 3.0, -1.0, -1.0, 3.0]);
+    }
+    changeGridType(type) {
+        this.gridType = type;
+    }
+    render(gl, program) {
+        if (!this.buffer) {
+            this.buffer = gl.createBuffer();
+            if (!this.buffer)
+                throw new Error("Failed to create grid buffer");
+            const data = this.getPositions();
+            this.vertexCount = data.length / 2;
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+        }
+        else {
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+        }
+        // Ensure program is current
+        gl.useProgram(program);
+        if (!this.initialized) {
+            this.setUpVertexData(gl, program);
+            this.setUpUniforms(gl, program);
+            this.initialized = true;
+        }
+        // Convert clip [-1,1] to pixel coords using the current drawing buffer size
+        const w = gl.drawingBufferWidth;
+        const h = gl.drawingBufferHeight;
+        const invP = m3.inverse(m3.projection(w, h)); // clip to pixel space
+        const invView = m3.inverse(this.worldMatrix); // camera/view -> world
+        const invVP = m3.multiply(invView, invP); // clip -> world
+        if (this.viewProjectionInvLocation)
+            gl.uniformMatrix3fv(this.viewProjectionInvLocation, false, new Float32Array(invVP));
+        if (this.zoomScaleLocation)
+            gl.uniform1f(this.zoomScaleLocation, this.zoom);
+        if (this.checkboardStyleLocation)
+            gl.uniform1f(this.checkboardStyleLocation, this.gridType);
+        // a_Position is clip-space position (vec2)
+        const loc = gl.getAttribLocation(program, "a_Position");
+        if (loc === -1) {
+            throw new Error("Attribute a_Position not found in grid program");
+        }
+        gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(loc);
+        // Draw the fullscreen triangle
+        gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
+        gl.disableVertexAttribArray(loc);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+    destroy() {
+        if (this.buffer) {
+            this.buffer = null;
+        }
+    }
+    hitTest(x, y) {
+        return false;
+    }
+    setUpUniforms(gl, program) {
+        const I3 = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+        this.viewProjectionInvLocation = gl.getUniformLocation(program, "u_ViewProjectionInvMatrix");
+        this.zoomScaleLocation = gl.getUniformLocation(program, "u_ZoomScale");
+        this.checkboardStyleLocation = gl.getUniformLocation(program, "u_CheckboardStyle");
+        gl.uniformMatrix3fv(this.viewProjectionInvLocation, false, I3);
+        gl.uniform1f(this.zoomScaleLocation, this.zoom);
+        gl.uniform1f(this.checkboardStyleLocation, 1.0);
+    }
+}
+//# sourceMappingURL=Grid.js.map

package/esm/shapes/Grid.js.map

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