Skip to content

Commit

Permalink
Id for each markup #6
Browse files Browse the repository at this point in the history
  • Loading branch information
@lilitsimonyan98
lilitsimonyan98 committed Aug 6, 2020
1 parent fd14816 commit 616a933
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 9 deletions.
14 changes: 11 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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" }
Expand All @@ -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" }
Expand Down Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
10 changes: 10 additions & 0 deletions src/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 4 additions & 0 deletions src/assets/js/arrow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export default (function () {
let lineWidth;
let fillArrow;
let strokeDashArray;
let arrowId;
let properties;

function Arrow(canvas, draggable = false, params) {
Expand All @@ -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';
Expand Down Expand Up @@ -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);

Expand Down
9 changes: 7 additions & 2 deletions src/assets/js/shape.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -206,6 +208,7 @@ export default (function () {
strokeDashArray: strokeDashArray,
rx: borderRadius,
ry: borderRadius,
id: shapeId
});
inst.canvas.add(rect).setActiveObject(rect);
}
Expand All @@ -225,6 +228,7 @@ export default (function () {
strokeDashArray: strokeDashArray,
rx: borderRadius,
ry: borderRadius,
id: shapeId
});
inst.canvas.add(comment).setActiveObject(comment);
}
Expand All @@ -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);
}
Expand Down
9 changes: 6 additions & 3 deletions src/assets/js/text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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();
}
Expand Down Expand Up @@ -81,7 +83,8 @@ export default (function () {
fontStyle: textFontStyle ? textFontStyle : '',
fontWeight: textFontWeight,
hasBorders: false,
hasControls: false
hasControls: false,
id: textId
});

text.selectionStart = 0;
Expand Down

0 comments on commit 616a933

Please sign in to comment.