magic-canvas-yonava 1.0.5 → 1.0.7

package/dist/localStorage.d.ts

@@ -1,35 +0,0 @@
-/**
- * a registry for all localStorage keys this application uses
- */
-export declare const localKeys: {
-    /** camera `panX` state in magic canvas - {@link Camera.state} */
-    readonly cameraPanX: (key: string) => `camera-pan-x-${string}`;
-    /** camera `panY` state in magic canvas - {@link Camera.state} */
-    readonly cameraPanY: (key: string) => `camera-pan-y-${string}`;
-    /** camera `zoom` state in magic canvas - {@link Camera.state} */
-    readonly cameraZoom: (key: string) => `camera-zoom-${string}`;
-};
-/**
- * all return values of localStorage are, by default, string.
- * this type allows string to be narrowed to types such as 'true' | 'false'
- */
-type TypeOverride = {};
-type LocalObj = typeof localKeys;
-/**
- * @example
- * type T = TypeOrReturnType<number> // number
- * type TFunc = TypeOrReturnType<() => number> // number
- */
-type TypeOrReturnType<T> = T extends (...args: any[]) => infer U ? U : T;
-type LocalKeys = TypeOrReturnType<LocalObj[keyof LocalObj]>;
-type LocalType<T extends LocalKeys> = T extends keyof TypeOverride ? TypeOverride[T] : string;
-/**
- * perform **type safe** localStorage actions
- */
-export declare const local: {
-    get: <T extends LocalKeys>(key: T) => string | null;
-    set: <T extends LocalKeys, K extends LocalType<T>>(key: T, value: K) => void;
-    remove: <T extends LocalKeys>(key: T) => void;
-    clear: () => void;
-};
-export {};

package/dist/localStorage.js

@@ -1,20 +0,0 @@
-/**
- * a registry for all localStorage keys this application uses
- */
-export const localKeys = {
-    /** camera `panX` state in magic canvas - {@link Camera.state} */
-    cameraPanX: (key) => `camera-pan-x-${key}`,
-    /** camera `panY` state in magic canvas - {@link Camera.state} */
-    cameraPanY: (key) => `camera-pan-y-${key}`,
-    /** camera `zoom` state in magic canvas - {@link Camera.state} */
-    cameraZoom: (key) => `camera-zoom-${key}`,
-};
-/**
- * perform **type safe** localStorage actions
- */
-export const local = {
-    get: (key) => localStorage.getItem(key),
-    set: (key, value) => localStorage.setItem(key, value),
-    remove: (key) => localStorage.removeItem(key),
-    clear: localStorage.clear,
-};

package/dist/types.d.ts

@@ -1,29 +0,0 @@
-import type { Ref } from 'vue';
-import type { DrawPattern } from './backgroundPattern';
-import type { Camera } from './camera';
-export type Coordinate = {
-    x: number;
-    y: number;
-};
-export type DrawContent = (ctx: CanvasRenderingContext2D) => void;
-export type DrawFns = {
-    content: Ref<DrawContent>;
-    backgroundPattern: Ref<DrawPattern>;
-};
-export type MagicCanvasProps = {
-    canvas: Ref<HTMLCanvasElement | undefined>;
-    camera: Omit<Camera, 'cleanup'>;
-    cursorCoordinates: Ref<Coordinate>;
-    ref: {
-        canvasRef: (canvas: HTMLCanvasElement) => void;
-        cleanup: (canvas: HTMLCanvasElement) => void;
-    };
-    draw: DrawFns;
-};
-export type MagicCanvasOptions = {
-    /**
-     * a key that is used to track the camera state in localStorage
-     */
-    storageKey?: string;
-};
-export type UseMagicCanvas = (options?: MagicCanvasOptions) => MagicCanvasProps;

package/dist/types.js

@@ -1 +0,0 @@
-export {};

package/dist/useMagicCanvas.d.ts

@@ -1,2 +0,0 @@
-import type { UseMagicCanvas } from "./types";
-export declare const useMagicCanvas: UseMagicCanvas;

package/dist/useMagicCanvas.js

@@ -1,54 +0,0 @@
-import { useElementSize } from "@vueuse/core";
-import { onMounted, ref, watch } from "vue";
-import { useBackgroundPattern } from "./backgroundPattern";
-import { useCamera } from "./camera";
-import { getDevicePixelRatio } from "./camera/utils";
-import { useMagicCoordinates } from "./coordinates";
-import { getCtx } from "magic-utils-yonava";
-const REPAINT_FPS = 60;
-const initCanvasWidthHeight = (canvas) => {
-    if (!canvas)
-        throw new Error("Canvas not found in DOM. Check ref link.");
-    const dpr = getDevicePixelRatio();
-    const rect = canvas.getBoundingClientRect();
-    canvas.width = rect.width * dpr;
-    canvas.height = rect.height * dpr;
-};
-export const useMagicCanvas = (options = {}) => {
-    const canvas = ref();
-    const canvasBoxSize = useElementSize(canvas);
-    const drawContent = ref(() => { });
-    const drawBackgroundPattern = ref(() => { });
-    let repaintInterval;
-    onMounted(() => {
-        initCanvasWidthHeight(canvas.value);
-        repaintInterval = setInterval(repaintCanvas, 1000 / REPAINT_FPS);
-    });
-    watch([canvasBoxSize.width, canvasBoxSize.height], () => initCanvasWidthHeight(canvas.value));
-    const { cleanup: cleanupCamera, ...camera } = useCamera(canvas, options?.storageKey ?? "[default-storage-key]");
-    const { coordinates: cursorCoordinates, cleanup: cleanupCoords } = useMagicCoordinates(canvas);
-    const pattern = useBackgroundPattern(camera.state, drawBackgroundPattern);
-    const repaintCanvas = () => {
-        const ctx = getCtx(canvas);
-        camera.transformAndClear(ctx);
-        pattern.draw(ctx);
-        drawContent.value(ctx);
-    };
-    return {
-        canvas,
-        camera,
-        cursorCoordinates,
-        ref: {
-            canvasRef: (ref) => (canvas.value = ref),
-            cleanup: (ref) => {
-                cleanupCoords(ref);
-                cleanupCamera(ref);
-                clearInterval(repaintInterval);
-            },
-        },
-        draw: {
-            content: drawContent,
-            backgroundPattern: drawBackgroundPattern,
-        },
-    };
-};