From 616a933f9f9777cd05a33773a63cb4ef1e9deaf5 Mon Sep 17 00:00:00 2001 From: Lilit Date: Thu, 6 Aug 2020 15:53:41 +0400 Subject: [PATCH] Id for each markup #6 --- README.md | 14 +++++++++++--- package.json | 2 +- src/Editor.vue | 10 ++++++++++ src/assets/js/arrow.js | 4 ++++ src/assets/js/shape.js | 9 +++++++-- src/assets/js/text.js | 9 ++++++--- 6 files changed, 39 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 9e66a18..5544975 100644 --- a/README.md +++ b/README.md @@ -68,9 +68,11 @@ fontSize | `32` | font-size fontWeight | `100` | font-weight(`100`,`200`,`300`,`400`,`500`,`600`,`700`,`bold`,`normal`) fontStyle | `normal` | font-style(`normal`,`italic`,`oblique`) placeholder | `Add Text` | default text placeholder when the text will be added +id | `''` | text id + or you can customize your editor text mode styles by overwriting default values. ```javascript - let textModeOptions = { fill: 'red', fontFamily: 'Verdana',fontSize: 16, placeholder: 'Type something'} + let textModeOptions = { id: 'title', fill: 'red', fontFamily: 'Verdana',fontSize: 16, placeholder: 'Type something'} this.$refs.editor.set('text',textModeOptions) ``` #### Circle Mode @@ -89,6 +91,7 @@ left | `0` |Left position of an object radius | `20` | Radius of the circle strokeUniform | `true` | When `false`, the stoke width will scale with the object. When `true`, the stroke will always match the exact pixel size entered for stroke width noScaleCache | `false` |When `true`, cache does not get updated during scaling. The picture will get block if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant +id | `''` | Circle id or you can customize your editor circle mode styles by overwriting default values. ```javascript @@ -113,7 +116,7 @@ left | `0` |Left position of rectangle opacity | `1` | Opacity of rectangle strokeUniform | `true` | When `false`, the stoke width will scale with the object. When `true`, the stroke will always match the exact pixel size entered for stroke width noScaleCache | `false` |When `true`, cache does not get updated during scaling. The picture will get block if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant - +id | `''` | Rectangle id or you can customize your editor rectangle mode styles by overwriting default values. ```javascript let customizeRectangle = { fill: 'blue',stroke: 'white',strokeWidth: "5" } @@ -136,7 +139,7 @@ stroke | `black` | Arrow is rendered via stroke and th strokeWidth | `7` | Arrow border width strokeUniform | `true` | When `false`, the stroke width will scale with the object. When `true`, the stroke will always match the exact pixel size entered for stroke width noScaleCache | `false` |When `true`, cache does not get updated during scaling. The picture will get blocky if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant - +id | `''` | Arrow id or you can customize your editor's arrow mode styles by overwriting default values. ```javascript let customizeArrow = { stroke: 'red',strokeWidth: "3" } @@ -227,6 +230,11 @@ mounted:{ this.$refs.editor.redo() ``` +## Function getObjectsById(id) +##### With the help of getObjectsById(id) method you will be able to get object by id +```javascript + this.$refs.editor.getObjectsById('title') +``` ## Credits diff --git a/package.json b/package.json index 42be7a2..1414e06 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-image-markup", - "version": "3.1.5", + "version": "3.1.6", "description": "vue-image-markup will provide you to edit uploaded image easily and save it.", "main": "src/Editor.vue", "repository": { diff --git a/src/Editor.vue b/src/Editor.vue index df48545..be0675e 100644 --- a/src/Editor.vue +++ b/src/Editor.vue @@ -60,6 +60,16 @@ new CanvasHistory(this.canvas, currentCanvas); }, methods: { + getObjectsById(objectId){ + let objects = this.canvas.getObjects(); + let findedObject = []; + objects.map((object) => { + if(object.id && object.id == objectId) { + findedObject.push(object); + } + }) + return findedObject; + }, changeColor(colorProperty) { this.color = colorProperty; this.set(this.currentActiveTool) diff --git a/src/assets/js/arrow.js b/src/assets/js/arrow.js index 3ef79a1..5f76f17 100644 --- a/src/assets/js/arrow.js +++ b/src/assets/js/arrow.js @@ -65,6 +65,7 @@ export default (function () { let lineWidth; let fillArrow; let strokeDashArray; + let arrowId; let properties; function Arrow(canvas, draggable = false, params) { @@ -86,6 +87,7 @@ export default (function () { color = params.stroke; lineWidth = params.strokeWidth; strokeDashArray = params.strokeDashArray; + arrowId = params.id; } this.canvas = canvas; this.className = 'Arrow'; @@ -200,6 +202,8 @@ export default (function () { objectCaching: false, perPixelTargetFind: true, heads: [1, 0], + id: arrowId ? arrowId : 'arrow' + }); inst.canvas.add(this.line).setActiveObject(this.line); diff --git a/src/assets/js/shape.js b/src/assets/js/shape.js index 66eb14c..e721000 100644 --- a/src/assets/js/shape.js +++ b/src/assets/js/shape.js @@ -5,7 +5,7 @@ export default (function () { let drag; let shape; let color; - let lineWidth, fillCircle, angle; + let lineWidth, fillCircle, angle,shapeId; let strokeDashArray; let borderRadius; let properties; @@ -36,6 +36,7 @@ export default (function () { angle = properties.angle; strokeDashArray = properties.strokeDashArray; borderRadius = properties.borderRadius; + shapeId = properties.id } this.canvas = canvas; this.className = 'Shape'; @@ -119,6 +120,7 @@ export default (function () { activeObj = inst.canvas.getActiveObject(); activeObj.stroke = color; activeObj.strokeWidth = lineWidth; + activeObj.id = shapeId; activeObj.fill = fillCircle; activeObj.noScaleCache = false; activeObj.strokeUniform = true; @@ -206,6 +208,7 @@ export default (function () { strokeDashArray: strokeDashArray, rx: borderRadius, ry: borderRadius, + id: shapeId }); inst.canvas.add(rect).setActiveObject(rect); } @@ -225,6 +228,7 @@ export default (function () { strokeDashArray: strokeDashArray, rx: borderRadius, ry: borderRadius, + id: shapeId }); inst.canvas.add(comment).setActiveObject(comment); } @@ -240,7 +244,8 @@ export default (function () { fill: fillCircle, stroke: color, strokeWidth: lineWidth, - strokeDashArray: strokeDashArray + strokeDashArray: strokeDashArray, + id: shapeId }); inst.canvas.add(circle).setActiveObject(circle); } diff --git a/src/assets/js/text.js b/src/assets/js/text.js index 9b6c0d9..8e2c14b 100644 --- a/src/assets/js/text.js +++ b/src/assets/js/text.js @@ -3,7 +3,7 @@ import CanvasHistory from "./canvasHistory.js"; export default (function () { let activeObject = false; - let drag, textColor, textFontFamily, textFontSize, customText, color, textFontStyle, textFontWeight; + let drag, textColor, textFontFamily, textFontSize, customText, color, textFontStyle, textFontWeight,textId; function Text(canvas, draggable = false, params) { this.canvas = canvas; @@ -23,13 +23,15 @@ export default (function () { textFontStyle = params.fontStyle; textFontWeight = params.fontWeight; customText = params.placeholder; + textId = params.id; if (canvas.getActiveObject() && canvas.getActiveObject().hasOwnProperty('text')) { canvas.getActiveObject().set({ fill: textColor, fontFamily: textFontFamily, fontSize: textFontSize, fontStyle: textFontStyle, - fontWeight: textFontWeight + fontWeight: textFontWeight, + id: textId }); canvas.renderAll(); } @@ -81,7 +83,8 @@ export default (function () { fontStyle: textFontStyle ? textFontStyle : '', fontWeight: textFontWeight, hasBorders: false, - hasControls: false + hasControls: false, + id: textId }); text.selectionStart = 0;