Add identifier as prop #9

README.md

@@ -27,7 +27,7 @@ Then you'll be able to use Editor component.
 
 You must give your editor component ```ref```,which will help you to call the functions to set editor mode,clean objects or undo/redo your changes.
 ```vue
-<Editor :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" ref="editor"/>
+<Editor :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" ref="editor" :editorId="1"/>
 
 mounted() {
     $this.$refs.editor.set(this.editor.mode,this.editor.options);
@@ -41,6 +41,7 @@ mounted() {
 
 `ref` with the help of ref, you will control the editor
 
+`editorId (optional)` will set editor id, allowing the use of multiple editors in the same component
 ## Function set(`type`,`params`)
 ##### With the set() function you choose editor's mode,which should get two parameters `type` and `params`
 Editor have 6 modes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-image-markup",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "vue-image-markup will provide you to edit uploaded image easily and save it.",
   "main": "src/Editor.vue",
   "repository": {

src/Editor.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="custom-editor">
-        <canvas id="c">
-        </canvas>
+        <canvas :id="editorId"></canvas>
     </div>
 </template>
 
@@ -15,7 +14,18 @@
 
     export default {
         name: 'Editor',
-        props: ['canvasWidth', 'canvasHeight'],
+        props: {
+            canvasWidth: {
+                type: [String,Number]
+            },
+            canvasHeight: {
+                type: [String,Number]
+            },
+            editorId: {
+                type: [String,Number],
+                default: 'c'
+            }
+        },
         data() {
             return {
                 canvas: null,
@@ -42,14 +52,18 @@
 
         },
         mounted() {
-            this.canvas = new fabric.Canvas('c');
+            this.canvas = new fabric.Canvas(this.editorId);
             this.canvas.setDimensions({width: this.canvasWidth, height: this.canvasHeight});
             this.canvas.backgroundColor = "#fff";
             let canvasProperties = {width: this.canvas.width, height: this.canvas.height}
             let currentCanvas = {json: this.canvas.toJSON(), canvas: canvasProperties};
             new CanvasHistory(this.canvas, currentCanvas);
         },
         methods: {
+            changeColor(colorProperty) {
+                this.color = colorProperty;
+                this.set(this.currentActiveTool)
+            },
             setBackgroundImage(imageUrl, backgroundColor = "#fff") {
                 let img = new Image();
                 this.toDataUrl(imageUrl, (dataUri) => {