Added additionalImages props and fix ts type declaration

razztyfication · Feb 12, 2022 · d727d1e · d727d1e
1 parent d497dbc
commit d727d1e
Show file tree

Hide file tree

Showing 13 changed files with 743 additions and 1,262 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+scripts-prepend-node-path=true
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,13 @@
-# [v1.0.8](https://github.com/razztyfication/vue-drawing-canvas)
+# [v1.0.9](https://github.com/razztyfication/vue-drawing-canvas)
+
+- BUG FIX redraw function with wrong stroke type
+- BUG FIX typescript type declaration not compatible with `noImplicitAny`
+- Added new prop **additionalImages** will accept Array of `watermark` Object to draw either text or insert multiple image on canvas
+- Remove build for `ssr` and `unpkg`
+
+<br>
+
+# [v1.0.8](https://github.com/razztyfication/vue-drawing-canvas/tree/v1.0.8)
 
 - BUG FIX not working on drawing tablet and stylus
 

diff --git a/README.md b/README.md
@@ -20,6 +20,9 @@ Support for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/co
 
 [![vue-drawing-canvas](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-drawing-canvas-p4slb)
 
+> Note:
+> If you're using nuxt.js and receive error `Object(...) is not a function` please refer to this [issue](https://github.com/razztyfication/vue-drawing-canvas/issues/13)
+
 <br><br>
 
 <h1>Table of Contents</h1>
@@ -89,6 +92,7 @@ export default {
 | backgroundColor | String                | `"#FFFFFF"`        | Set background color on your canvas                                                                                              |
 | backgroundImage | String                |                    | Set background image on your canvas<br><br>***Be carefull for performance issue when using this props !!***                      |
 | initialImage    | Array                 | `[]`               | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy)      |
+| additionalImages | Array                | `[]`               | Accept Array of [watermark](#watermark-object) Object to draw either text or insert multiple image on canvas<br><br>***Be carefull for performance issue when using this props !!*** |
 | classes         | Array, String, Object |                    | Specifies your own classes to canvas                                                                                             |
 | styles          | Array, String, Object |                    | Specifies your own styles to canvas                                                                                              |
 | watermark       | Object                |                    | Put watermark text/image on your image output<br><br>(see details in the next section below)                                     |

diff --git a/TODO.md b/TODO.md
diff --git a/dev/serve.vue b/dev/serve.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent } from 'vue';
 import VueDrawingCanvas from '@/entry';
 
@@ -9,7 +10,172 @@ export default defineComponent({
   },
   data() {
     return {
-      initialImage: [],
+      initialImage: [
+        {
+          "type": "dash",
+          "from": {
+            "x": 262,
+            "y": 154
+          },
+          "coordinates": [
+            {
+              "x": 263,
+              "y": 156
+            },
+            {
+              "x": 263,
+              "y": 156
+            },
+            {
+              "x": 280,
+              "y": 177
+            },
+            {
+              "x": 280,
+              "y": 177
+            },
+            {
+              "x": 296,
+              "y": 195
+            },
+            {
+              "x": 296,
+              "y": 195
+            },
+            {
+              "x": 305,
+              "y": 204
+            },
+            {
+              "x": 305,
+              "y": 204
+            },
+            {
+              "x": 314,
+              "y": 213
+            },
+            {
+              "x": 314,
+              "y": 213
+            },
+            {
+              "x": 320,
+              "y": 220
+            },
+            {
+              "x": 320,
+              "y": 220
+            },
+            {
+              "x": 327,
+              "y": 226
+            },
+            {
+              "x": 327,
+              "y": 226
+            },
+            {
+              "x": 333,
+              "y": 233
+            },
+            {
+              "x": 333,
+              "y": 233
+            },
+            {
+              "x": 336,
+              "y": 236
+            },
+            {
+              "x": 336,
+              "y": 236
+            },
+            {
+              "x": 341,
+              "y": 241
+            },
+            {
+              "x": 341,
+              "y": 241
+            },
+            {
+              "x": 344,
+              "y": 245
+            },
+            {
+              "x": 344,
+              "y": 245
+            },
+            {
+              "x": 346,
+              "y": 248
+            },
+            {
+              "x": 346,
+              "y": 248
+            },
+            {
+              "x": 349,
+              "y": 250
+            },
+            {
+              "x": 349,
+              "y": 250
+            },
+            {
+              "x": 350,
+              "y": 253
+            },
+            {
+              "x": 350,
+              "y": 253
+            },
+            {
+              "x": 352,
+              "y": 254
+            },
+            {
+              "x": 352,
+              "y": 254
+            },
+            {
+              "x": 353,
+              "y": 256
+            },
+            {
+              "x": 353,
+              "y": 256
+            },
+            {
+              "x": 355,
+              "y": 258
+            },
+            {
+              "x": 355,
+              "y": 258
+            },
+            {
+              "x": 356,
+              "y": 259
+            },
+            {
+              "x": 356,
+              "y": 259
+            },
+            {
+              "x": 358,
+              "y": 261
+            },
+            {
+              "x": 358,
+              "y": 261
+            }
+          ],
+          "color": "#000000",
+          "width": 5,
+          "fill": false
+        }
+      ],
       x: 0,
       y: 0,
       image: '',
@@ -21,27 +187,29 @@ export default defineComponent({
       strokeType: 'dash',
       backgroundColor: '#FFFFFF',
       backgroundImage: null,
-      watermark: null
-      // watermark: {
-      //   type: "Text", // "Text" or "Image"
-      //   source: "Watermark", // either Text or Image URL
-      //   x: 200,
-      //   y: 180,
-      //   imageStyle: {
-      //     width: 600,
-      //     height: 400
-      //   },
-      //   fontStyle: {
-      //     width: 200,
-      //     lineHeight: 48,
-      //     color: '#FF0000',
-      //     font: 'bold 48px roboto',
-      //     drawType: 'fill', // "fill" or "stroke"
-      //     textAlign: 'left',
-      //     textBaseline: 'top',
-      //     rotate: 0
-      //   }
-      // }
+      watermark: null,
+      additionalImages: [
+        {
+          type: "Text", // "Text" or "Image"
+          source: "Watermark", // either Text or Image URL
+          x: 200,
+          y: 180,
+          imageStyle: {
+            width: 600,
+            height: 400
+          },
+          fontStyle: {
+            width: 200,
+            lineHeight: 48,
+            color: '#FF0000',
+            font: 'bold 48px roboto',
+            drawType: 'fill', // "fill" or "stroke"
+            textAlign: 'left',
+            textBaseline: 'top',
+            rotate: 0
+          }
+        }
+      ]
     }
   },
   mounted() {
@@ -50,16 +218,16 @@ export default defineComponent({
     }
   },
   methods: {
-    async setImage(event) {
+    async setImage(event: Event) {
       let URL = window.URL;
-      this.backgroundImage = URL.createObjectURL(event.target.files[0]);
+      this.backgroundImage = URL.createObjectURL((<HTMLInputElement>event.target).files[0]);
       await this.$refs.VueCanvasDrawing.redraw();
     },
-    async setWatermarkImage(event) {
+    async setWatermarkImage(event: Event) {
       let URL = window.URL;
       this.watermark = {
         type: "Image",
-        source: URL.createObjectURL(event.target.files[0]),
+        source: URL.createObjectURL((<HTMLInputElement>event.target).files[0]),
         x: 0,
         y: 0,
         imageStyle: {
@@ -69,7 +237,7 @@ export default defineComponent({
       }
       await this.$refs.VueCanvasDrawing.redraw();
     },
-    getCoordinate(event) {
+    getCoordinate(event: Event) {
       let coordinates = this.$refs.VueCanvasDrawing.getCoordinates(event);
       this.x = coordinates.x;
       this.y = coordinates.y;
@@ -109,6 +277,7 @@ export default defineComponent({
           }"
           :lock="disabled"
           @mousemove="getCoordinate($event)"
+          :additional-images="additionalImages"
         />
         <p>
           x-axis: <strong>{{ x }}</strong>, y-axis: <strong>{{ y }}</strong>