@component-hook/pdf-canvas 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Tzuyi 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,115 @@
+# @component-hook/pdf-canvas
+
+Rendering PDF documents onto a canvas with vue3 component ([DEMO](https://tzuyi0817.github.io/component-hook/#/pdf-canvas))  
+Implementation depository: [PDF-signature](https://github.com/tzuyi0817/PDF-signature)
+
+<p>
+  <a href="https://npm-stat.com/charts.html?package=@component-hook/pdf-canvas">
+    <img src="https://img.shields.io/npm/dm/@component-hook/pdf-canvas.svg" alt="npm"/>
+  </a>
+  <a href="https://www.npmjs.com/package/@component-hook/pdf-canvas">
+    <img src="https://img.shields.io/npm/v/@component-hook/pdf-canvas.svg" alt="npm"/>
+  </a>
+</p>
+
+## Features
+
+- Rendering PDF documents onto a canvas
+- Open encrypted PDF files
+- Drag and drop the images and text onto the canvas
+- Manually add the images and text onto the canvas
+- Supports typescript
+
+## Installation
+
+```bash
+npm install @component-hook/pdf-canvas
+
+# or use yarn
+yarn add @component-hook/pdf-canvas
+
+# or use pnpm
+pnpm install @component-hook/pdf-canvas
+```
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas';
+
+const { loadFile } = useFabric();
+const currentPdf = ref<PDF>();
+
+async function uploadFile(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const { files } = target;
+
+  if (!files) return;
+  const file = files[0];
+  const content = await loadFile(file);
+
+  currentPdf.value = content;
+  target.value = '';
+}
+</script>
+
+<template>
+  <div class="w-fit flex flex-col items-center gap-3">
+    <pdf-canvas
+      v-if="currentPdf"
+      :file="currentPdf"
+    />
+
+    <p
+      v-else
+      class="font-mono text-sm"
+    >
+      Please select a PDF file or image.
+    </p>
+
+    <button class="relative">
+      <input
+        type="file"
+        accept="application/pdf, .jpg, .png"
+        class="opacity-0 top-0 left-0 absolute w-[94px] h-[36px] cursor-pointer"
+        @change="uploadFile"
+      />
+      select file
+    </button>
+  </div>
+</template>
+```
+
+## Attributes
+
+| Name             | Required | Type      | Description                                                            | Default                                                                                                       |
+| ---------------- | -------- | --------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| file             | true     | `PDF`     | The data is generated by loadFile of useFabric hook                    | —                                                                                                             |
+| page             | false    | `number`  | The page number you want to display                                    | 1                                                                                                             |
+| canvasId         | false    | `string`  | Canvas dom prefix id selector - `${canvasId}-${page - 1}`              | PDF-canvas                                                                                                    |
+| fileZoom         | false    | `number`  | Zoom in and out of the displayed canvas                                | 1                                                                                                             |
+| fileScale        | false    | `number`  | The actual size of the canvas will affect the display clarity          | 1                                                                                                             |
+| canvasClass      | false    | `string`  | Canvas dom class selector                                              | —                                                                                                             |
+| isDrop           | false    | `boolean` | Control whether to drag and drop images and text onto the canvas       | false                                                                                                         |
+| password         | false    | `string`  | Open password for encrypted PDF files                                  | -                                                                                                             |
+| dropTextOptions  | false    | `object`  | [fabric.js FabricText options](https://github.com/fabricjs/fabric.js)  | [text options](https://github.com/tzuyi0817/component-hook/blob/master/packages/pdf-canvas/configs/index.ts)  |
+| dropImageOptions | false    | `object`  | [fabric.js FabricImage options](https://github.com/fabricjs/fabric.js) | [image options](https://github.com/tzuyi0817/component-hook/blob/master/packages/pdf-canvas/configs/index.ts) |
+| closeSvgOptions  | false    | `object`  | Setup close svg options                                                | [close options](https://github.com/tzuyi0817/component-hook/blob/master/packages/pdf-canvas/configs/index.ts) |
+
+## Exposes
+
+| Event        | Description                             | Type                                                             |
+| :----------- | :-------------------------------------- | :--------------------------------------------------------------- |
+| addImage     | Manually add the images onto the canvas | `Function (src: string, options?: TOptions<ImageProps>) => void` |
+| addText      | Manually add the text onto the canvas   | `Function (text: string, options?: TOptions<TextProps>) => void` |
+| clearActive  | Manually deactivate status              | `Function () => void`                                            |
+| deleteCanvas | Delete the current canvas               | `Function () => void`                                            |
+| canvasRef    | The current canvas dom ref              | `object Ref<HTMLCanvasElement>`                                  |
+
+## UseFabric
+
+| Event    | Description            | Type                                                     |
+| :------- | :--------------------- | :------------------------------------------------------- |
+| loadFile | Load PDF file or image | `Function (file: File, password?: string): Promise<PDF>` |

package/dist/chunks/__vite-browser-external-DYxpcVy9.js

@@ -0,0 +1,4 @@
+const e = {};
+export {
+  e as default
+};

package/dist/index.d.ts

@@ -0,0 +1,161 @@
+import { Canvas } from 'fabric';
+import { ComponentOptionsMixin } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { FabricObject } from 'fabric';
+import { FabricObjectProps } from 'fabric';
+import { ImageProps } from 'fabric';
+import { ObjectEvents } from 'fabric';
+import { Point } from 'fabric';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { SerializedObjectProps } from 'fabric';
+import { TEvent } from 'fabric';
+import { TextProps } from 'fabric';
+import { TOptions } from 'fabric';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare function addImage(src: string, options?: TOptions<ImageProps>): void;
+
+declare function addText(text: string, options?: TOptions<TextProps>): void;
+
+export declare interface CloseSvgOptions {
+    stroke: string;
+    hoverStroke: string;
+    src: string;
+}
+
+export declare interface CreateCloseFabricArgs {
+    canvas: Canvas;
+    target: FabricObject;
+    stroke?: string;
+    uuid?: number;
+}
+
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+canvasId: string;
+class: string;
+canvasClass: string;
+canvasScale: number;
+page: number;
+fileZoom: number;
+fileScale: number;
+isDrop: boolean;
+}>, {
+addImage: typeof addImage;
+addText: typeof addText;
+clearActive: () => void;
+deleteCanvas: () => void;
+canvasRef: Ref<HTMLCanvasElement | null>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+canvasId: string;
+class: string;
+canvasClass: string;
+canvasScale: number;
+page: number;
+fileZoom: number;
+fileScale: number;
+isDrop: boolean;
+}>>>, {
+page: number;
+canvasId: string;
+fileZoom: number;
+fileScale: number;
+canvasScale: number;
+canvasClass: string;
+isDrop: boolean;
+}, {}>;
+export default _default;
+
+export declare interface PDF {
+    PDFId: string;
+    name: string;
+    updateDate: number;
+    PDFBase64: string;
+    pages: number;
+    canvas?: string[];
+    trashDate?: number;
+    isUpdate?: boolean;
+}
+
+declare interface Props {
+    file: PDF;
+    page?: number;
+    canvasId?: string;
+    fileZoom?: number;
+    fileScale?: number;
+    canvasScale?: number;
+    canvasClass?: string;
+    isDrop?: boolean;
+    password?: string;
+    dropTextOptions?: TOptions<TextProps>;
+    dropImageOptions?: TOptions<ImageProps>;
+    closeSvgOptions?: CloseSvgOptions;
+}
+
+export declare interface RenderImageArgs {
+    url: string;
+    scale?: number;
+}
+
+export declare type SelectedEvent = Partial<TEvent> & {
+    target: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>;
+};
+
+export declare interface SpecifyPageArgs {
+    page: number;
+    PDFBase64: string;
+    scale: number;
+    password?: string;
+}
+
+export declare type SupportFileType = 'application/pdf' | 'image/png' | 'image/jpeg';
+
+export declare interface TCornerPoint {
+    tl: Point;
+    tr: Point;
+    bl: Point;
+    br: Point;
+}
+
+export declare function useFabric(id?: string): {
+    createCanvas: () => Canvas | undefined;
+    loadFile: (file: File, password?: string) => Promise<{
+        pages: number;
+        PDFId: string;
+        name: string;
+        updateDate: number;
+        PDFBase64: string;
+    } | undefined>;
+    specifyPage: ({ page, PDFBase64, scale, password }: SpecifyPageArgs) => Promise<void>;
+    renderImage: ({ url, scale }: RenderImageArgs) => Promise<void>;
+    addFabric: (src: string, options?: TOptions<ImageProps>) => Promise<void>;
+    addTextFabric: (text: string, options?: TOptions<TextProps>) => void;
+    clearActive: () => void;
+    deleteCanvas: () => void;
+    scaleCloseFabric: (scale: number, isCreate?: boolean) => void;
+    setCloseSvgOptions: (options?: CloseSvgOptions) => void;
+};
+
+export { }