@component-hook/pdf-canvas 1.0.4 → 1.0.5-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +155 -155
  3. package/dist/react/pdf-canvas.es.d.ts +1 -0
  4. package/dist/react/pdf-canvas.es.js +4091 -4118
  5. package/dist/react/pdf-canvas.umd.js +70 -70
  6. package/dist/vue/pdf-canvas.es.d.ts +7 -1
  7. package/dist/vue/pdf-canvas.es.js +4858 -4883
  8. package/dist/vue/pdf-canvas.umd.js +56 -56
  9. package/package.json +1 -1
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2023 Tzuyi
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2023 Tzuyi
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,155 +1,155 @@
1
- # @component-hook/pdf-canvas
2
-
3
- Rendering PDF documents onto a canvas with vue3 and react component ([DEMO](https://tzuyi0817.github.io/component-hook/#/component/vue-pdf-canvas))
4
- Implementation depository: [PDF-signature](https://github.com/tzuyi0817/PDF-signature)
5
-
6
- <p>
7
- <a href="https://npm-stat.com/charts.html?package=@component-hook/pdf-canvas">
8
- <img src="https://img.shields.io/npm/dm/@component-hook/pdf-canvas.svg" alt="npm"/>
9
- </a>
10
- <a href="https://www.npmjs.com/package/@component-hook/pdf-canvas">
11
- <img src="https://img.shields.io/npm/v/@component-hook/pdf-canvas.svg" alt="npm"/>
12
- </a>
13
- </p>
14
-
15
- ## Features
16
-
17
- - Rendering PDF documents onto a canvas
18
- - Open encrypted PDF files
19
- - Drag and drop the images and text onto the canvas
20
- - Manually add the images and text onto the canvas
21
- - Supports typescript
22
-
23
- ## Installation
24
-
25
- ```bash
26
- $ npm install @component-hook/pdf-canvas
27
-
28
- # or use yarn
29
- $ yarn add @component-hook/pdf-canvas
30
-
31
- # or use pnpm
32
- $ pnpm install @component-hook/pdf-canvas
33
- ```
34
-
35
- ## Usage with Vue
36
-
37
- ```vue
38
- <script setup lang="ts">
39
- import { ref } from 'vue';
40
- import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas/vue';
41
-
42
- const { loadFile } = useFabric();
43
- const currentPdf = ref<PDF>();
44
-
45
- async function uploadFile(event: Event) {
46
- const target = event.target as HTMLInputElement;
47
- const { files } = target;
48
-
49
- if (!files) return;
50
- const file = files[0];
51
- const content = await loadFile(file);
52
-
53
- currentPdf.value = content;
54
- target.value = '';
55
- }
56
- </script>
57
-
58
- <template>
59
- <div class="w-fit flex flex-col items-center gap-3">
60
- <pdf-canvas
61
- v-if="currentPdf"
62
- :file="currentPdf"
63
- />
64
-
65
- <p
66
- v-else
67
- class="font-mono text-sm"
68
- >
69
- Please select a PDF file or image.
70
- </p>
71
-
72
- <button class="relative">
73
- <input
74
- type="file"
75
- accept="application/pdf, .jpg, .png"
76
- class="opacity-0 top-0 left-0 absolute w-[94px] h-[36px] cursor-pointer"
77
- @change="uploadFile"
78
- />
79
- select file
80
- </button>
81
- </div>
82
- </template>
83
- ```
84
-
85
- ## Usage with React
86
-
87
- ```tsx
88
- import { useState, type ChangeEvent } from 'react';
89
- import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas/react';
90
-
91
- export function DrawPdf() {
92
- const { loadFile } = useFabric();
93
- const [currentPdf, setCurrentPdf] = useState<PDF>();
94
-
95
- const uploadFile = async (event: ChangeEvent<HTMLInputElement>) => {
96
- const target = event.target;
97
- const { files } = target;
98
-
99
- if (!files || files.length === 0) return;
100
-
101
- const file = files[0];
102
- const content = await loadFile(file);
103
-
104
- setCurrentPdf(content);
105
- target.value = '';
106
- };
107
-
108
- return (
109
- <div>
110
- {currentPdf ? <PdfCanvas file={currentPdf} /> : <p>Please select a PDF file or image.</p>}
111
-
112
- <button>
113
- <input
114
- type="file"
115
- accept="application/pdf, .jpg, .png"
116
- onChange={uploadFile}
117
- />
118
- select file
119
- </button>
120
- </div>
121
- );
122
- }
123
- ```
124
-
125
- ## Attributes
126
-
127
- | Name | Required | Type | Description | Default |
128
- | ---------------- | -------- | --------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
129
- | file | true | `PDF` | The data is generated by loadFile of useFabric hook | — |
130
- | page | false | `number` | The page number you want to display | 1 |
131
- | canvasId | false | `string` | Canvas dom prefix id selector - `${canvasId}-${page - 1}` | PDF-canvas |
132
- | fileZoom | false | `number` | Zoom in and out of the displayed canvas | 1 |
133
- | fileScale | false | `number` | The actual size of the canvas will affect the display clarity | 1 |
134
- | canvasClass | false | `string` | Canvas dom class selector | — |
135
- | isDrop | false | `boolean` | Control whether to drag and drop images and text onto the canvas | false |
136
- | password | false | `string` | Open password for encrypted PDF files | — |
137
- | 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) |
138
- | 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) |
139
- | 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) |
140
-
141
- ## Exposes
142
-
143
- | Event | Description | Type |
144
- | :----------- | :-------------------------------------- | :--------------------------------------------------------------- |
145
- | addImage | Manually add the images onto the canvas | `Function (src: string, options?: TOptions<ImageProps>) => void` |
146
- | addText | Manually add the text onto the canvas | `Function (text: string, options?: TOptions<TextProps>) => void` |
147
- | clearActive | Manually deactivate status | `Function () => void` |
148
- | deleteCanvas | Delete the current canvas | `Function () => void` |
149
- | canvasRef | The current canvas dom ref | `object Ref<HTMLCanvasElement>` |
150
-
151
- ## UseFabric
152
-
153
- | Event | Description | Type |
154
- | :------- | :--------------------- | :------------------------------------------------------- |
155
- | loadFile | Load PDF file or image | `Function (file: File, password?: string): Promise<PDF>` |
1
+ # @component-hook/pdf-canvas
2
+
3
+ Rendering PDF documents onto a canvas with vue3 and react component ([DEMO](https://tzuyi0817.github.io/component-hook/#/component/vue-pdf-canvas))
4
+ Implementation depository: [PDF-signature](https://github.com/tzuyi0817/PDF-signature)
5
+
6
+ <p>
7
+ <a href="https://npm-stat.com/charts.html?package=@component-hook/pdf-canvas">
8
+ <img src="https://img.shields.io/npm/dm/@component-hook/pdf-canvas.svg" alt="npm"/>
9
+ </a>
10
+ <a href="https://www.npmjs.com/package/@component-hook/pdf-canvas">
11
+ <img src="https://img.shields.io/npm/v/@component-hook/pdf-canvas.svg" alt="npm"/>
12
+ </a>
13
+ </p>
14
+
15
+ ## Features
16
+
17
+ - Rendering PDF documents onto a canvas
18
+ - Open encrypted PDF files
19
+ - Drag and drop the images and text onto the canvas
20
+ - Manually add the images and text onto the canvas
21
+ - Supports typescript
22
+
23
+ ## Installation
24
+
25
+ ```bash
26
+ $ npm install @component-hook/pdf-canvas
27
+
28
+ # or use yarn
29
+ $ yarn add @component-hook/pdf-canvas
30
+
31
+ # or use pnpm
32
+ $ pnpm install @component-hook/pdf-canvas
33
+ ```
34
+
35
+ ## Usage with Vue
36
+
37
+ ```vue
38
+ <script setup lang="ts">
39
+ import { ref } from 'vue';
40
+ import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas/vue';
41
+
42
+ const { loadFile } = useFabric();
43
+ const currentPdf = ref<PDF>();
44
+
45
+ async function uploadFile(event: Event) {
46
+ const target = event.target as HTMLInputElement;
47
+ const { files } = target;
48
+
49
+ if (!files) return;
50
+ const file = files[0];
51
+ const content = await loadFile(file);
52
+
53
+ currentPdf.value = content;
54
+ target.value = '';
55
+ }
56
+ </script>
57
+
58
+ <template>
59
+ <div class="w-fit flex flex-col items-center gap-3">
60
+ <pdf-canvas
61
+ v-if="currentPdf"
62
+ :file="currentPdf"
63
+ />
64
+
65
+ <p
66
+ v-else
67
+ class="font-mono text-sm"
68
+ >
69
+ Please select a PDF file or image.
70
+ </p>
71
+
72
+ <button class="relative">
73
+ <input
74
+ type="file"
75
+ accept="application/pdf, .jpg, .png"
76
+ class="opacity-0 top-0 left-0 absolute w-[94px] h-[36px] cursor-pointer"
77
+ @change="uploadFile"
78
+ />
79
+ select file
80
+ </button>
81
+ </div>
82
+ </template>
83
+ ```
84
+
85
+ ## Usage with React
86
+
87
+ ```tsx
88
+ import { useState, type ChangeEvent } from 'react';
89
+ import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas/react';
90
+
91
+ export function DrawPdf() {
92
+ const { loadFile } = useFabric();
93
+ const [currentPdf, setCurrentPdf] = useState<PDF>();
94
+
95
+ const uploadFile = async (event: ChangeEvent<HTMLInputElement>) => {
96
+ const target = event.target;
97
+ const { files } = target;
98
+
99
+ if (!files || files.length === 0) return;
100
+
101
+ const file = files[0];
102
+ const content = await loadFile(file);
103
+
104
+ setCurrentPdf(content);
105
+ target.value = '';
106
+ };
107
+
108
+ return (
109
+ <div>
110
+ {currentPdf ? <PdfCanvas file={currentPdf} /> : <p>Please select a PDF file or image.</p>}
111
+
112
+ <button>
113
+ <input
114
+ type="file"
115
+ accept="application/pdf, .jpg, .png"
116
+ onChange={uploadFile}
117
+ />
118
+ select file
119
+ </button>
120
+ </div>
121
+ );
122
+ }
123
+ ```
124
+
125
+ ## Attributes
126
+
127
+ | Name | Required | Type | Description | Default |
128
+ | ---------------- | -------- | --------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
129
+ | file | true | `PDF` | The data is generated by loadFile of useFabric hook | — |
130
+ | page | false | `number` | The page number you want to display | 1 |
131
+ | canvasId | false | `string` | Canvas dom prefix id selector - `${canvasId}-${page - 1}` | PDF-canvas |
132
+ | fileZoom | false | `number` | Zoom in and out of the displayed canvas | 1 |
133
+ | fileScale | false | `number` | The actual size of the canvas will affect the display clarity | 1 |
134
+ | canvasClass | false | `string` | Canvas dom class selector | — |
135
+ | isDrop | false | `boolean` | Control whether to drag and drop images and text onto the canvas | false |
136
+ | password | false | `string` | Open password for encrypted PDF files | — |
137
+ | 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) |
138
+ | 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) |
139
+ | 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) |
140
+
141
+ ## Exposes
142
+
143
+ | Event | Description | Type |
144
+ | :----------- | :-------------------------------------- | :--------------------------------------------------------------- |
145
+ | addImage | Manually add the images onto the canvas | `Function (src: string, options?: TOptions<ImageProps>) => void` |
146
+ | addText | Manually add the text onto the canvas | `Function (text: string, options?: TOptions<TextProps>) => void` |
147
+ | clearActive | Manually deactivate status | `Function () => void` |
148
+ | deleteCanvas | Delete the current canvas | `Function () => void` |
149
+ | canvasRef | The current canvas dom ref | `object Ref<HTMLCanvasElement>` |
150
+
151
+ ## UseFabric
152
+
153
+ | Event | Description | Type |
154
+ | :------- | :--------------------- | :------------------------------------------------------- |
155
+ | loadFile | Load PDF file or image | `Function (file: File, password?: string): Promise<PDF>` |
package/dist/react/pdf-canvas.es.d.ts CHANGED
@@ -30,6 +30,7 @@ export declare interface ComponentProps {
30
30
  dropTextOptions?: TOptions<TextProps>;
31
31
  dropImageOptions?: TOptions<ImageProps>;
32
32
  closeSvgOptions?: CloseSvgOptions;
33
+ onDestroy?: (callback: () => void) => void;
33
34
  }
34
35
 
35
36
  export declare interface CreateCloseFabricArgs {