Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactored the rotate button. #714

Merged
merged 2 commits into from
Dec 3, 2015
Merged

Refactored the rotate button. #714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1eb80c
Refactored the rotate button.
kecso Dec 1, 2015
293465b
#714 review comment fixes
kecso Dec 3, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 25 additions & 26 deletions src/client/css/webgme_bootstrap_overrides.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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