@component-hook/pdf-canvas 1.1.0-alpha.8 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @component-hook/pdf-canvas
 
-Rendering PDF documents onto a canvas with vue3 and react component ([DEMO](https://tzuyi0817.github.io/component-hook/#/component/vue-pdf-canvas))  
+Rendering PDF documents onto a canvas with `vue3` and `react` component.  
 Implementation depository: [PDF-signature](https://github.com/tzuyi0817/PDF-signature)
 
 <p>
@@ -18,28 +18,34 @@ Implementation depository: [PDF-signature](https://github.com/tzuyi0817/PDF-sign
 - 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
+- Full `TypeScript` support
+
+## Documentation
+
+For detailed documentation and usage examples, please visit: [Official Docs](https://tzuyi0817.github.io/component-hook/#/component/vue-pdf-canvas).
 
 ## Installation
 
 ```bash
+# Using npm
 $ npm install @component-hook/pdf-canvas
 
-# or use yarn
+# Using yarn
 $ yarn add @component-hook/pdf-canvas
 
-# or use pnpm
+# Using pnpm
 $ pnpm install @component-hook/pdf-canvas
 ```
 
-## Usage with Vue
+## Base Usage
+
+### Vue3
 
 ```vue
 <script setup lang="ts">
+import PdfCanvas, { loadFile, type PDF } from '@component-hook/pdf-canvas/vue';
 import { ref } from 'vue';
-import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas/vue';
 
-const { loadFile } = useFabric();
 const currentPdf = ref<PDF>();
 
 async function uploadFile(event: Event) {
@@ -82,14 +88,13 @@ async function uploadFile(event: Event) {
 </template>
 ```
 
-## Usage with React
+### React
 
 ```tsx
+import PdfCanvas, { loadFile, type PDF } from '@component-hook/pdf-canvas/react';
 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>) => {
@@ -122,34 +127,6 @@ export function DrawPdf() {
 }
 ```
 
-## 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/src/shared/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/src/shared/configs/index.ts) |
-| closeSvgOptions  | false    | `object`  | Setup close svg options                                                | [close options](https://github.com/tzuyi0817/component-hook/blob/master/packages/pdf-canvas/src/shared/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>` |
+## License
+
+This project is licensed under the MIT License.

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

@@ -26,9 +26,19 @@ declare interface CacheProperties {
 }
 
 export declare interface CloseSvgOptions {
-    stroke: string;
-    hoverStroke: string;
-    src: string;
+    stroke?: string;
+    hoverStroke?: string;
+    src?: string;
+}
+
+declare interface ComponentEmits {
+    onLoaded?: () => void;
+    onReload?: () => void;
+    onPointerDown?: (event: FabricPointerEvent) => void;
+    onPointerMove?: (event: FabricPointerEvent) => void;
+    onPointerUp?: (event: FabricPointerEvent) => void;
+    onSelectionCreated?: (event: FabricSelectionCreatedEvent) => void;
+    onSelectionCleared?: (event: FabricSelectionClearedEvent) => void;
 }
 
 export declare interface ComponentProps {
@@ -63,10 +73,28 @@ export declare interface FabricHookParams {
     pointerDown?: (event: FabricPointerEvent) => void;
     pointerMove?: (event: FabricPointerEvent) => void;
     pointerUp?: (event: FabricPointerEvent) => void;
+    selectionCreated?: (event: FabricSelectionCreatedEvent) => void;
+    selectionCleared?: (event: FabricSelectionClearedEvent) => void;
 }
 
 export declare type FabricPointerEvent = TPointerEventInfo<TPointerEvent>;
 
+export declare type FabricSelectionClearedEvent = Partial<TEvent<TPointerEvent>> & {
+    deselected: FabricObject[];
+};
+
+export declare type FabricSelectionCreatedEvent = Partial<TEvent<TPointerEvent>> & {
+    selected: FabricObject[];
+};
+
+export declare function loadFile(file: File, password?: string, id?: string): Promise<{
+    pages: number;
+    PDFId: string;
+    name: string;
+    updateDate: number;
+    PDFBase64: string;
+} | undefined>;
+
 export declare interface PDF {
     PDFId: string;
     name: string;
@@ -78,14 +106,17 @@ export declare interface PDF {
     isUpdate?: boolean;
 }
 
-declare const PdfCanvas: ForwardRefExoticComponent<ComponentProps & RefAttributes<PdfCanvasHandle>>;
+declare const PdfCanvas: ForwardRefExoticComponent<ComponentProps & ComponentEmits & RefAttributes<PdfCanvasHandle>>;
 export default PdfCanvas;
 
 export declare interface PdfCanvasHandle {
+    reload: () => Promise<void>;
     addImage: (src: string, options?: TOptions<ImageProps>) => void;
     addText: (text: string, options?: TOptions<TextProps>) => void;
     clearActive: () => void;
     deleteCanvas: () => void;
+    copyActiveFabric: () => Promise<void>;
+    deleteActiveFabric: () => void;
     canvasRef: React.RefObject<HTMLCanvasElement>;
 }
 
@@ -114,7 +145,9 @@ export declare interface TCornerPoint {
     br: Point;
 }
 
-export declare function useFabric(id?: string): {
+export declare function useFabric(params?: FabricHookParams & {
+    selectionOptions?: TOptions<FabricObjectProps>;
+}): {
     createCanvas: () => Canvas | undefined;
     loadFile: (file: File, password?: string) => Promise<{
         pages: number;
@@ -123,14 +156,16 @@ export declare function useFabric(id?: string): {
         updateDate: number;
         PDFBase64: string;
     } | undefined>;
-    specifyPage: ({ page, PDFBase64, scale, password }: SpecifyPageArgs) => Promise<void>;
+    specifyPage: (specifyPageParams: SpecifyPageArgs) => Promise<number>;
     renderImage: ({ url, scale }: RenderImageArgs) => Promise<void>;
-    addFabric: (src: string, options?: TOptions<ImageProps>) => Promise<void>;
-    addTextFabric: (text: string, options?: TOptions<TextProps>) => void;
+    addFabric: (src: string, options?: TOptions<ImageProps>, offset?: DropOffset) => Promise<void>;
+    addTextFabric: (text: string, options?: TOptions<TextProps>, offset?: DropOffset) => void;
     clearActive: () => void;
     deleteCanvas: () => void;
     scaleFabric: (scale: number, isCreate?: boolean) => void;
     setCloseSvgOptions: (options?: CloseSvgOptions) => void;
+    copyActiveFabric: () => Promise<void>;
+    deleteActiveFabric: () => void;
 };
 
 export { }