Skip to content

Commit

Permalink
Merge pull request #714 from webgme/enhancement/refactor_rotate_button
Browse files Browse the repository at this point in the history 
Refactored the rotate button.
  • Loading branch information
Patrik Meijer committed Dec 3, 2015
2 parents 675a238 + 293465b commit c9449f0
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 46 deletions.
51 changes: 25 additions & 26 deletions src/client/css/webgme_bootstrap_overrides.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,14 @@
-o-user-select: all;
user-select: all;
}

.popover .popover-content.narrow {
padding: 5px 5px;
}

.popover.right>.arrow {
top: 27%;
}

/* Modals */

Expand All @@ -44,11 +48,11 @@
-moz-box-shadow: none;
box-shadow: none;

-moz-user-select:-moz-all;
-webkit-user-select:all;
-o-user-select:all;
user-select:all;
-ms-user-select:element;
-moz-user-select: -moz-all;
-webkit-user-select: all;
-o-user-select: all;
user-select: all;
-ms-user-select: element;
}

.modal-content .row {
Expand All @@ -60,24 +64,23 @@
max-height: 200px;
}

@media(min-height:700px) {
@media (min-height: 700px) {

.modal-body {
max-height: 400px;
}

}


@media(min-height:850px) {
@media (min-height: 850px) {

.modal-body {
max-height: 600px;
}

}

@media(min-height:1200px) {
@media (min-height: 1200px) {

.modal-body {
max-height: 900px;
Expand All @@ -103,7 +106,7 @@
line-height: 15px;
}

.btn-micro > i:empty{
.btn-micro > i:empty {
margin-right: .75ex;
}

Expand Down Expand Up @@ -135,8 +138,7 @@ input[type="submit"].btn.btn-micro {
top: 0;
}

.btn-gray.active
{
.btn-gray.active {
color: rgba(255, 255, 255, 0.75);
}

Expand Down Expand Up @@ -219,8 +221,7 @@ input[type="submit"].btn.btn-micro {
height: 16px;
}


.navbar-fixed-bottom .navbar-inner .iCheckBox .txt {
.navbar-fixed-bottom .navbar-inner .iCheckBox .txt {
height: 16px;
line-height: 16px;
}
Expand All @@ -234,23 +235,22 @@ input[type="submit"].btn.btn-micro {
margin-bottom: 1px;
}


.navbar {
margin-bottom: 0;
}

.nav-tabs>li>a {
.nav-tabs > li > a {
border-radius: 0;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border: 1px solid #C0C0C0;
border-bottom-color: transparent;
}

.nav-tabs>li>a>i:empty {
.nav-tabs > li > a > i:empty {
margin-left: .5ex;
font-size: 110%;
position: relative;
Expand All @@ -273,7 +273,6 @@ ul.dropdown-menu {
min-width: 0;
}


.input-append .add-on.add-on-mini,
.input-prepend .add-on.add-on-mini {
height: 12px;
Expand All @@ -293,11 +292,11 @@ input.no-focus-collapse:not(:focus) {
}

.flip-vertical {
-webkit-transform:scaleX(-1);
-moz-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}

.panel-base .drawing-canvas {
Expand Down
46 changes: 38 additions & 8 deletions src/client/js/Panels/ModelEditor/ModelEditorControl.DiagramDesignerWidgetEventHandlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -981,22 +981,52 @@ define(['js/logger',
selectedIds) {
var i = selectedIds.length,
regDegree,
newDegree,
ownDegree,
node,
setNewValue = true,
transaction = false,
gmeID;

this._client.startTransaction();
while (i--) {
gmeID = this._ComponentID2GmeID[selectedIds[i]];
regDegree = this._client.getNode(gmeID).getEditableRegistry(REGISTRY_KEYS.ROTATION);
node = this._client.getNode(gmeID);
if (node) {
regDegree = node.getEditableRegistry(REGISTRY_KEYS.ROTATION) || 0;
ownDegree = node.getOwnEditableRegistry(REGISTRY_KEYS.ROTATION);

if (degree === DiagramDesignerWidgetConstants.ROTATION_RESET) {
newDegree = 0;
} else if (degree === DiagramDesignerWidgetConstants.ROTATION_TOLEFT) {
newDegree = regDegree - (regDegree % 90);
} else if (degree === DiagramDesignerWidgetConstants.ROTATION_TORIGHT) {
newDegree = regDegree % 90 > 0 ? regDegree + 90 - (regDegree % 90) : regDegree;
} else if (degree === DiagramDesignerWidgetConstants.ROTATION_CLEAR) {
setNewValue = false;
} else {
newDegree = (regDegree + degree) % 360;
}

if (degree === DiagramDesignerWidgetConstants.ROTATION_RESET) {
regDegree = 0;
} else {
regDegree = ((regDegree || 0) + degree) % 360;
if (setNewValue && newDegree !== ownDegree) {
if (!transaction) {
transaction = true;
this._client.startTransaction();
}
this._client.setRegistry(gmeID, REGISTRY_KEYS.ROTATION, newDegree);
} else if (!setNewValue && ownDegree !== undefined) {
if (!transaction) {
transaction = true;
this._client.startTransaction();
}
this._client.delRegistry(gmeID, REGISTRY_KEYS.ROTATION);
}
}

this._client.setRegistry(gmeID, REGISTRY_KEYS.ROTATION, regDegree);
}
this._client.completeTransaction();

if (transaction) {
this._client.completeTransaction();
}
};

ModelEditorControlDiagramDesignerWidgetEventHandlers.prototype._onSetConnectionProperty = function (params) {
Expand Down
7 changes: 5 additions & 2 deletions src/client/js/Widgets/DiagramDesigner/DiagramDesignerWidget.Constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,11 @@ define(['js/Constants'], function (CONSTANTS) {
PATH_SHADOW_ARROW_END_ID_PREFIX: 'p_e_',

/*
* ROTATINO RESET CONSTANTS
* ROTATION CONSTANTS
*/
ROTATION_RESET: 'reset'
ROTATION_RESET: 'reset',
ROTATION_TOLEFT: 'toleft',
ROTATION_TORIGHT: 'toright',
ROTATION_CLEAR: 'clear'
};
});
40 changes: 30 additions & 10 deletions src/client/js/Widgets/DiagramDesigner/SelectionManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -644,13 +644,21 @@ define([
});

ROTATION_BUTTON_BASE.html('' +
'<i class="glyphicon glyphicon-repeat"><div class="popover right nowrap rotate-options">' +
'<i class="glyphicon glyphicon-repeat">' +
'<div class="popover right nowrap rotate-options">' +
'<div class="arrow"></div><div class="popover-content narrow"><div class="btn-group">' +
'<a class="btn btn-small" id="rotate-left" title="Rotate left">' +
'<i class="glyphicon glyphicon-repeat flip-vertical"></i></a>' +
'<a class="btn btn-small" id="rotate-right" title="Rotate right"><i class="glyphicon glyphicon-repeat"></i>' +
'</a><a class="btn btn-small" id="rotate-reset" title="Reset rotation">' +
'<i class="glyphicon glyphicon-remove"></i></a></div></div></div></i>');
'<a class="btn btn-small" id="rotate-left" title="Rotate left by 90°">' +
'<i class="glyphicon glyphicon-repeat flip-vertical" id="icon-rotate-left"></i></a>' +
'<a class="btn btn-small" id="rotate-right" title="Rotate right by 90°">' +
'<i class="glyphicon glyphicon-repeat" id="icon-rotate-right"></i></a>' +
'<a class="btn btn-small" id="rotate-toleft" title="Rotate left to the closest multiple of 90°">' +
'<i class="glyphicon glyphicon-retweet flip-vertical" id="icon-rotate-toleft"></i></a>' +
'<a class="btn btn-small" id="rotate-toright" title="Rotate right to the closest multiple of 90°">' +
'<i class="glyphicon glyphicon-retweet" id="icon-rotate-toright"></i></a>' +
'<a class="btn btn-small" id="rotate-reset" title="Set rotation to 0°">' +
'<i class="glyphicon glyphicon-minus" id="icon-rotate-reset"></i></a>' +
'<a class="btn btn-small" id="rotate-clear" title="Clear rotation information - reset to inherited">' +
'<i class="glyphicon glyphicon-remove" id="icon-rotate-clear"></i></a></div></div></div></i>');

var ROTATION_DEGREE_BASE = $('<div/>', {
class: 'rotation-deg'
Expand All @@ -672,12 +680,15 @@ define([
this._diagramDesigner.skinParts.$selectionOutline.on('mousedown.' + MOUSE_EVENT_POSTFIX, '.rotate',
function (event) {
var rotateBtn = $(this);
self.logger.debug('selection rotate button mousedown');
if ($(event.target).attr('id') === undefined) {
self.logger.debug('selection rotate button mousedown');

self._startSelectionRotate(rotateBtn, event);
self._startSelectionRotate(rotateBtn, event);

event.stopPropagation();
event.preventDefault();
}

event.stopPropagation();
event.preventDefault();
}
);

Expand All @@ -704,6 +715,15 @@ define([
case DiagramDesignerWidgetConstants.ROTATION_RESET:
deg = DiagramDesignerWidgetConstants.ROTATION_RESET;
break;
case DiagramDesignerWidgetConstants.ROTATION_TOLEFT:
deg = DiagramDesignerWidgetConstants.ROTATION_TOLEFT;
break;
case DiagramDesignerWidgetConstants.ROTATION_TORIGHT:
deg = DiagramDesignerWidgetConstants.ROTATION_TORIGHT;
break;
case DiagramDesignerWidgetConstants.ROTATION_CLEAR:
deg = DiagramDesignerWidgetConstants.ROTATION_CLEAR;
break;
}

self._rotateSelectionBy(deg);
Expand Down

0 comments on commit c9449f0

Please sign in to comment.