@component-hook/pdf-canvas 0.1.5 → 0.2.0-alpha.0

package/README.md

@@ -1,6 +1,6 @@
 # @component-hook/pdf-canvas
 
-Rendering PDF documents onto a canvas with vue3 component ([DEMO](https://tzuyi0817.github.io/component-hook/#/component/pdf-canvas))  
+Rendering PDF documents onto a canvas with vue3 and react component ([DEMO](https://tzuyi0817.github.io/component-hook/#/component/pdf-canvas))  
 Implementation depository: [PDF-signature](https://github.com/tzuyi0817/PDF-signature)
 
 <p>
@@ -32,12 +32,12 @@ $ yarn add @component-hook/pdf-canvas
 $ pnpm install @component-hook/pdf-canvas
 ```
 
-## Basic Usage
+## Usage with Vue
 
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';
-import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas';
+import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas/vue';
 
 const { loadFile } = useFabric();
 const currentPdf = ref<PDF>();
@@ -82,6 +82,47 @@ async function uploadFile(event: Event) {
 </template>
 ```
 
+## Usage with React
+
+```jsx
+import { useState, type ChangeEvent } from 'react';
+import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas/react';
+
+export function DrawPdf() {
+  const { loadFile } = useFabric();
+  const [currentPdf, setCurrentPdf] = useState<PDF>();
+
+  const uploadFile = async (event: ChangeEvent<HTMLInputElement>) => {
+    const target = event.target;
+    const { files } = target;
+
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    const content = await loadFile(file);
+
+    setCurrentPdf(content);
+    target.value = '';
+  };
+
+  return (
+    <div>
+      {currentPdf ? <PdfCanvas file={currentPdf} /> : <p>Please select a PDF file or image.</p>}
+
+      <button>
+        <input
+          type="file"
+          accept="application/pdf, .jpg, .png"
+          onChange={uploadFile}
+        />
+        select file
+      </button>
+    </div>
+  );
+}
+
+```
+
 ## Attributes
 
 | Name             | Required | Type      | Description                                                            | Default                                                                                                       |

package/dist/react/pdf-canvas.es.d.ts

@@ -0,0 +1,108 @@
+import { Canvas } from 'fabric';
+import { FabricObject } from 'fabric';
+import { FabricObjectProps } from 'fabric';
+import { ForwardRefExoticComponent } from 'react';
+import { ImageProps } from 'fabric';
+import { ObjectEvents } from 'fabric';
+import { Point } from 'fabric';
+import { RefAttributes } from 'react';
+import { SerializedObjectProps } from 'fabric';
+import { TEvent } from 'fabric';
+import { TextProps } from 'fabric';
+import { TOptions } from 'fabric';
+
+export declare interface CloseSvgOptions {
+    stroke: string;
+    hoverStroke: string;
+    src: string;
+}
+
+export declare interface ComponentProps {
+    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 CreateCloseFabricArgs {
+    canvas: Canvas;
+    target: FabricObject;
+    stroke?: string;
+    uuid?: number;
+}
+
+export declare interface PDF {
+    PDFId: string;
+    name: string;
+    updateDate: number;
+    PDFBase64: string;
+    pages: number;
+    canvas?: string[];
+    trashDate?: number;
+    isUpdate?: boolean;
+}
+
+declare const PdfCanvas: ForwardRefExoticComponent<ComponentProps & RefAttributes<PdfCanvasHandle>>;
+export default PdfCanvas;
+
+export declare interface PdfCanvasHandle {
+    addImage: (src: string, options?: TOptions<ImageProps>) => void;
+    addText: (text: string, options?: TOptions<TextProps>) => void;
+    clearActive: () => void;
+    deleteCanvas: () => void;
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+}
+
+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;
+    scaleFabric: (scale: number, isCreate?: boolean) => void;
+    setCloseSvgOptions: (options?: CloseSvgOptions) => void;
+};
+
+export { }