magic-canvas-yonava 1.0.7 → 1.0.9

package/dist/MagicCanvas.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import('vue').DefineComponent<{
+    canvasRef: (canvas: HTMLCanvasElement) => void;
+    cleanup: (canvas: HTMLCanvasElement) => void;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    canvasRef: (canvas: HTMLCanvasElement) => void;
+    cleanup: (canvas: HTMLCanvasElement) => void;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    canvas: HTMLCanvasElement;
+}, HTMLCanvasElement>;
+export default _default;

package/dist/backgroundPattern.d.ts

@@ -0,0 +1,6 @@
+import { Camera } from './camera';
+import { Coordinate, DrawFns } from './types';
+export type DrawPattern = (ctx: CanvasRenderingContext2D, at: Coordinate, alpha: string) => void;
+export declare const useBackgroundPattern: ({ panX, panY, zoom }: Camera["state"], drawPattern: DrawFns["backgroundPattern"]) => {
+    draw: (ctx: CanvasRenderingContext2D) => void;
+};

package/dist/camera/index.d.ts

@@ -0,0 +1,15 @@
+import { Ref } from 'vue';
+export declare const useCamera: (canvas: Ref<HTMLCanvasElement | undefined>, storageKey: string) => {
+    transformAndClear: (ctx: CanvasRenderingContext2D) => void;
+    actions: {
+        zoomIn: (increment?: number) => void;
+        zoomOut: (decrement?: number) => void;
+    };
+    state: {
+        panX: import('@vueuse/shared').RemovableRef<number>;
+        panY: import('@vueuse/shared').RemovableRef<number>;
+        zoom: import('@vueuse/shared').RemovableRef<number>;
+    };
+    cleanup: (ref: HTMLCanvasElement) => void;
+};
+export type Camera = ReturnType<typeof useCamera>;

package/dist/camera/panZoom.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from 'vue';
+export declare const MIN_ZOOM = 0.2;
+export declare const MAX_ZOOM = 10;
+export declare const ZOOM_SENSITIVITY = 0.02;
+export declare const PAN_SENSITIVITY = 1;
+export declare const usePanAndZoom: (canvas: Ref<HTMLCanvasElement | undefined>, storageKey: string) => {
+    actions: {
+        zoomIn: (increment?: number) => void;
+        zoomOut: (decrement?: number) => void;
+    };
+    state: {
+        panX: import('@vueuse/shared').RemovableRef<number>;
+        panY: import('@vueuse/shared').RemovableRef<number>;
+        zoom: import('@vueuse/shared').RemovableRef<number>;
+    };
+    getTransform: () => {
+        scaleX: number;
+        scaleY: number;
+        translateX: number;
+        translateY: number;
+    };
+    cleanup: (ref: HTMLCanvasElement) => void;
+};

package/dist/camera/utils.d.ts

@@ -0,0 +1,17 @@
+export type TransformProps = {
+    /** corresponds to `a` in {@link CanvasRenderingContext2D.setTransform} */
+    scaleX: number;
+    /** corresponds to `b` in {@link CanvasRenderingContext2D.setTransform} */
+    skewY: number;
+    /** corresponds to `c` in {@link CanvasRenderingContext2D.setTransform} */
+    skewX: number;
+    /** corresponds to `d` in {@link CanvasRenderingContext2D.setTransform} */
+    scaleY: number;
+    /** corresponds to `e` in {@link CanvasRenderingContext2D.setTransform} */
+    translateX: number;
+    /** corresponds to `f` in {@link CanvasRenderingContext2D.setTransform} */
+    translateY: number;
+};
+export type TransformOptions = Partial<TransformProps>;
+export declare const getDevicePixelRatio: () => number;
+export declare const addTransform: (ctx: CanvasRenderingContext2D, t: TransformOptions) => void;

package/dist/coordinates/index.d.ts

@@ -0,0 +1,44 @@
+import { Ref } from 'vue';
+import { Coordinate } from '../types';
+export declare const getCanvasTransform: (ctx: CanvasRenderingContext2D) => {
+    panX: number;
+    panY: number;
+    zoom: number;
+};
+/**
+ * the coordinates in the real world. aka the browser
+ */
+export type ClientCoords = Pick<MouseEvent, "clientX" | "clientY">;
+/**
+ * the coordinates in the magic canvas world
+ */
+export type MagicCoords = Coordinate;
+export type WithZoom<T> = T & {
+    /**
+     * the scale factor of the canvas
+     */
+    zoom: number;
+};
+/**
+ * magic coordinates are coordinates transformed by the pan and zoom of the camera.
+ *
+ * if the user has panned their camera 10px to the left, running this function with
+ * `clientCoords` set to (0, 0) will return (-10, 0, 1)
+ */
+export declare const getMagicCoordinates: (clientCoords: ClientCoords, ctx: CanvasRenderingContext2D) => WithZoom<MagicCoords>;
+/**
+ * client coordinates are the raw coordinates corresponding to the clients physical screen.
+ *
+ * the top left corner is (0, 0) and bottom right corner is (window.innerWidth, window.innerHeight).
+ */
+export declare const getClientCoordinates: (magicCoords: MagicCoords, ctx: CanvasRenderingContext2D) => WithZoom<ClientCoords>;
+export declare const useMagicCoordinates: (canvas: Ref<HTMLCanvasElement | undefined>) => {
+    coordinates: Ref<{
+        x: number;
+        y: number;
+    }, Coordinate | {
+        x: number;
+        y: number;
+    }>;
+    cleanup: (ref: HTMLCanvasElement) => void;
+};

package/dist/localStorage.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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/types.d.ts

@@ -0,0 +1,29 @@
+import { Ref } from 'vue';
+import { DrawPattern } from './backgroundPattern';
+import { 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/useMagicCanvas.d.ts

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "magic-canvas-yonava",
-  "version": "1.0.7",
-  "main": "dist/index.js",
+  "version": "1.0.9",
+  "main": "dist/index.es.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js",
       "types": "./dist/index.d.ts"
     }

package/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
     vue(),
     dts({
       insertTypesEntry: true,
-      include: ["src/index.ts"],
+      include: ["src/**/*.ts", "src/**/*.vue"],
     }),
   ],
   build: {