Skip to content

Commit

Permalink
Merge pull request #1036 from SirmaITT/feature/rotation-icon-to-rect-…
Browse files Browse the repository at this point in the history 
…ellipse

Rotation Icons
  • Loading branch information
@rsinghal
rsinghal committed Aug 6, 2016
2 parents f124d02 + e12d5f1 commit b752046
Show file tree
Hide file tree
Showing 5 changed files with 233 additions and 159 deletions.
79 changes: 55 additions & 24 deletions js/src/annotations/annotation-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,66 +97,97 @@

PointText.constructor = PointText;

function DeleteActionIcon(paperScope,opts){
function PointTextIcon(paperScope,opts){
this.paperScope = paperScope;
opts.justification = 'center';
opts.font = 'FontAwesome';
opts.fillColor = opts.fillColor || 'black';
opts.fontSize = opts.size || (24 * 1 / paperScope.view.zoom);
opts.content = '\uf014';
this.content = opts.content;
PointText.call(this,paperScope,opts);

this.rasterMask = new Icon(paperScope,{
name: opts.name.replace('delete','Delete_mask'),
size: new paperScope.Size(opts.fontSize ,opts.fontSize)
});

this.rasterMask.addData('self',this);
}

DeleteActionIcon.prototype = Object.create(PointText.prototype, {});
DeleteActionIcon.prototype.setPosition = function(point){
PointTextIcon.prototype = Object.create(PointText.prototype, {});

PointTextIcon.prototype.setPosition = function(point){
this.rasterMask.setPosition(point);
PointText.prototype.setPosition.call(this,point);
};
DeleteActionIcon.prototype.setOnMouseDownListener = function (overlay) {
this.mouseDown = function () {
overlay.eventEmitter.publish('deleteShape.' + overlay.windowId, [this.getData('parent')]);
};
};
DeleteActionIcon.prototype.rotate = function(angle,pivot){

PointTextIcon.prototype.rotate = function(angle,pivot){
this.rasterMask.rotate(angle,pivot);
PointText.prototype.rotate.call(this,angle,pivot);
};
DeleteActionIcon.prototype.translateByPoint = function (point) {
PointTextIcon.prototype.translateByPoint = function (point) {
this.rasterMask.translateByPoint(point);
PointText.prototype.translateByPoint.call(this,point);
};
DeleteActionIcon.prototype.translateByXY = function (x,y){
PointTextIcon.prototype.translateByXY = function (x,y){
this.rasterMask.translateByXY(x,y);
PointText.prototype.translateByXY.call(this,x,y);
};
DeleteActionIcon.prototype.remove = function () {
PointTextIcon.prototype.remove = function () {
this.rasterMask.remove();
PointText.prototype.remove.call(this);
};
DeleteActionIcon.prototype.resize = function (size) {
PointTextIcon.prototype.resize = function (size) {
this.rasterMask.resize(new this.paperScope.Size(size,size));
PointText.prototype.resize.call(this,size);
};

DeleteActionIcon.prototype.getMask = function () {
PointTextIcon.prototype.getMask = function () {
return this.rasterMask;
};

DeleteActionIcon.prototype.constructor = DeleteActionIcon;

PointTextIcon.prototype.constructor = PointTextIcon;

function DeleteActionIcon(paperScope,opts){
this.paperScope = paperScope;
opts.fillColor = opts.fillColor || 'black';
opts.fontSize = opts.size || (24 * 1 / paperScope.view.zoom);
opts.content = '\uf014';
this.rasterMask = new Icon(paperScope,{
name: opts.name.replace('delete','Delete_mask'),
size: new paperScope.Size(opts.fontSize ,opts.fontSize)
});
PointTextIcon.call(this,paperScope,opts);
}

DeleteActionIcon.prototype = Object.create(PointTextIcon.prototype, {});

DeleteActionIcon.prototype.setOnMouseDownListener = function (overlay) {
this.mouseDown = function () {
overlay.eventEmitter.publish('deleteShape.' + overlay.windowId, [this.getData('parent')]);
};
};

function RotationIcon(paperScope,opts){
this.paperScope = paperScope;
opts.justification = 'center';
opts.fillColor = opts.fillColor || 'black';
opts.fontSize = opts.size || (16 * 1 / paperScope.view.zoom);
opts.content = '\uf01e';
this.rasterMask = new Icon(paperScope,{
name: opts.name.replace('rotation','Rotation_mask'),
size: new paperScope.Size(opts.fontSize ,opts.fontSize)
});
PointTextIcon.call(this,paperScope,opts);
}

RotationIcon.prototype = Object.create(PointTextIcon.prototype, {});

RotationIcon.prototype.setOnMouseDownListener = function (overlay) {
this.mouseDown = function () {
overlay.mode = 'rotate';
};
};


$.AnnotationUtils.prototype = {
Icon:Icon,
PointText:PointText,
DeleteActionIcon:DeleteActionIcon,
RotationIcon:RotationIcon,
Group:Group
};

Expand Down
107 changes: 58 additions & 49 deletions js/src/annotations/osd-svg-ellipse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@
item.segments[3].handleOut = outHandle;

if (selected) {
item.segments[2].handleOut = new overlay.paperScope.Point(0, 21 / overlay.paperScope.view.zoom);
item.segments[2].data = 'rotation_handle';
item.segments[2].handleOut = item.segments[2].handleOut.rotate(item.data.rotation, item.segments[2]);
// item.segments[2].handleOut = new overlay.paperScope.Point(0, 21 / overlay.paperScope.view.zoom);
// item.segments[2].data = 'rotation_handle';
// item.segments[2].handleOut = item.segments[2].handleOut.rotate(item.data.rotation, item.segments[2]);
var point = item.segments[2].point.clone();
point = point.add(item.segments[2].handleOut);
if (item.contains(point)) {
Expand All @@ -97,54 +97,46 @@
item.data.deleteIcon.addData('type', 'deleteIcon');
item.data.deleteIcon.addData('self', item.data.deleteIcon);


item.data.deleteIcon.setPosition(item.data.deleteIcon.getData('pivot').add(new overlay.paperScope.Point(0, 21 / overlay.paperScope.view.zoom).rotate(item.data.rotation)));
item.data.deleteIcon.setOnMouseDownListener(overlay);

}

if (!item.data.group) {
item.data.group = new overlay.annotationUtils.Group(overlay.paperScope,[item,item.data.deleteIcon.getItem(),item.data.deleteIcon.getMask().getItem()]);
}
if (!item.data.rotationIcon) {

item.data.rotationIcon = new overlay.annotationUtils.RotationIcon(overlay.paperScope, {
name: item.name + this.partOfPrefix + 'rotation',
fillColor: item.selectedColor
});

// if (!item.data.rotationIcon) {
// item.data.rotationIcon = new overlay.annotationUtils.Icon(overlay.paperScope, {
// source: overlay.state.getStateProperty('buildPath') + overlay.state.getStateProperty('imagesPath') + 'rotate_icon.png',
// position: point,
// name: item.name + this.partOfPrefix + 'rotate',
// onLoad: function () {
// item.data.rotationIcon.setSize(item.data.rotationIcon.getWidth() / 2 * (1 / overlay.paperScope.view.zoom), item.data.rotationIcon.getHeight() / 2 * (1 / overlay.paperScope.view.zoom));
// item.data.rotationIcon.rotate(item.data.rotation);
// }
// });
//
// item.data.rotationIcon.addData('type', 'rotationIcon');
// item.data.rotationIcon.addData('self', item.data.rotationIcon);
// item.data.rotationIcon.addData('parent', item);
// item.data.rotationIcon.setOnMouseDownListener(function (rotateIconRaster) {
// overlay.mode = 'rotate';
// overlay.path = rotateIconRaster.data.parent;
//
// jQuery('body').awesomeCursor('repeat', {
// color: 'white',
// hotspot: 'center'
// });
// });
// }
item.data.rotationIcon.addData('pivot',item.segments[3].point);
item.data.rotationIcon.addData('type', 'rotationIcon');
item.data.rotationIcon.addData('self', item.data.rotationIcon);
item.data.rotationIcon.addData('parent', item);

item.data.rotationIcon.setPosition(item.data.rotationIcon.getData('pivot').add(new overlay.paperScope.Point(0, 21 / overlay.paperScope.view.zoom).rotate(item.data.rotation)));

item.data.rotationIcon.setOnMouseDownListener(overlay);

}

if (!item.data.group) {
item.data.group = new overlay.annotationUtils.Group(overlay.paperScope,[item,item.data.deleteIcon.getItem(),item.data.deleteIcon.getMask().getItem(),item.data.rotationIcon.getItem(),item.data.rotationIcon.getMask().getItem()]);
}

if(item.contains(item.data.deleteIcon.getItem().position)){
item.data.deleteIcon.setPosition(item.data.deleteIcon.getData('pivot').add(new overlay.paperScope.Point(0, 21 / overlay.paperScope.view.zoom).rotate(item.data.rotation)));
item.data.deleteIcon.rotate(180,item.data.deleteIcon.getData('pivot'));
item.data.deleteIcon.rotate(180);
}

} else {
// if (item.data.rotationIcon) {
// item.data.rotationIcon.remove();
// item.data.rotationIcon = null;
// }
if(item.contains(item.data.rotationIcon.getItem().position)){
item.data.rotationIcon.setPosition(item.data.rotationIcon.getData('pivot').add(new overlay.paperScope.Point(0, 21 / overlay.paperScope.view.zoom).rotate(item.data.rotation)));
item.data.rotationIcon.rotate(180,item.data.rotationIcon.getData('pivot'));
item.data.rotationIcon.rotate(180);
}

} else {
if(item.data.group){
item.data.group.remove();
item.data.group = null;
Expand All @@ -156,6 +148,11 @@
item.data.deleteIcon = null;
}

if(item.data.rotationIcon){
item.data.rotationIcon.remove();
item.data.rotationIcon = null;
}

item.segments[2].handleOut = new overlay.paperScope.Point(0, 0);
}
}
Expand All @@ -173,6 +170,18 @@

item.data.self.resize(24 * 1 / overlay.paperScope.view.zoom);
}

if(item._name.toString().indexOf('rotation') !== -1){
item.data.self.setPosition(item.data.self.getData('pivot').add(new overlay.paperScope.Point(0, 21 / overlay.paperScope.view.zoom).rotate(item.data.parent.data.rotation)));

if(item.data.parent.contains(item.position)){
item.data.self.rotate(180,item.data.self.getData('pivot'));
item.data.self.rotate(180);
}

item.data.self.resize(16 * 1 / overlay.paperScope.view.zoom);
}

}
},

Expand Down Expand Up @@ -204,7 +213,8 @@
overlay.path.segments[i].point.x += event.delta.x;
overlay.path.segments[i].point.y += event.delta.y;
}
//overlay.path.data.rotationIcon.translateByXY(event.delta.x, event.delta.y);

overlay.path.data.rotationIcon.translateByXY(event.delta.x, event.delta.y);
overlay.path.data.deleteIcon.translateByXY(event.delta.x,event.delta.y);
},

Expand All @@ -213,12 +223,11 @@
var rotation = Math.atan2(event.point.y - center.y + event.delta.y, event.point.x - center.x + event.delta.x) - Math.atan2(event.point.y - center.y, event.point.x - center.x);
rotation = rotation * (180 / Math.PI);

//overlay.path.rotate(rotation, overlay.path.position);

overlay.path.data.group.rotate(rotation,overlay.path.position);

overlay.path.data.deleteIcon.rotate(-rotation);
// overlay.path.data.rotationIcon.rotate(rotation, overlay.path.position);
overlay.path.data.rotationIcon.rotate(-rotation);

overlay.path.data.rotation += rotation;
},
Expand Down Expand Up @@ -259,7 +268,7 @@
var moveRightSize = idx === 4 || idx === 5 || idx === 6;
var moveLeftSize = idx === 0 || idx === 8 || idx === 9;
if (moveTopSize) {
//overlay.path.data.rotationIcon.translateByPoint(translationY);
overlay.path.data.rotationIcon.translateByPoint(translationY);
overlay.path.segments[1].point = overlay.path.segments[1].point.add(translationY);
overlay.path.segments[2].point = overlay.path.segments[2].point.add(translationY);
overlay.path.segments[3].point = overlay.path.segments[3].point.add(translationY);
Expand Down Expand Up @@ -311,7 +320,7 @@
}
if (moveRightSize || moveLeftSize) {
translationX = translationX.multiply(0.5);
//overlay.path.data.rotationIcon.translateByPoint(translationX);
overlay.path.data.rotationIcon.translateByPoint(translationX);
overlay.path.data.deleteIcon.translateByPoint(translationX);
overlay.path.segments[1].point = overlay.path.segments[1].point.add(translationX);
overlay.path.segments[2].point = overlay.path.segments[2].point.add(translationX);
Expand All @@ -330,6 +339,11 @@
overlay.path.data.deleteIcon.rotate(180);
}

if(overlay.path.contains(overlay.path.data.rotationIcon.getItem().position)){
overlay.path.data.rotationIcon.rotate(180,overlay.path.data.rotationIcon.getData('pivot'));
overlay.path.data.rotationIcon.rotate(180);
}

if (overlay.path.segments.length > 10) {
overlay.path.removeSegment(10);
}
Expand Down Expand Up @@ -425,6 +439,9 @@

if (hitResult.item._name.toString().indexOf(this.partOfPrefix) !== -1) {
hitResult.item.data.self.onMouseDown();
if(overlay.mode === 'rotate'){
overlay.path = hitResult.item.data.self.getItem().data.parent;
}
return;
}

Expand All @@ -435,14 +452,6 @@
this.setCursor(hitResult, overlay);
}

if(hitResult.type === 'handle-out' && hitResult.segment.data === 'rotation_handle'){
overlay.mode = 'rotate';
overlay.segment = null;
overlay.path = hitResult.item;
this.setCursor(hitResult,overlay);
return;
}

if (hitResult.type === 'stroke' || hitResult.type === 'handle-in' || hitResult.type === 'handle-out') {
overlay.mode = 'translate';
overlay.segment = null;
Expand Down
Loading

0 comments on commit b752046

Please sign in to comment.