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

Rework olcs Manager #3178

Merged
merged 2 commits into from
Nov 28, 2017
Merged

Rework olcs Manager #3178

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
8e1e495
Rework olcs Manager
gberaudo Nov 28, 2017
446c91b
Fix externs
gberaudo Nov 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/simple3d.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@
</style>
</head>
<body ng-controller="MainController as $ctrl">
<input type="button" value="Enable/disable 3D" ng-click="$ctrl.manager.toggle3d()" />
<input type="button" value="Enable/disable 3D" ng-click="$ctrl.ol3dm.toggle3d()" />

<div id="map-container">
<div id="map" ngeo-map="$ctrl.map"></div>
<ngeo-olcs-controls3d ng-if="$ctrl.manager && $ctrl.manager.is3dEnabled()"></ngeo-olcs-controls3d>
<ngeo-olcs-controls3d ng-if="$ctrl.ol3dm && $ctrl.ol3dm.is3dEnabled()" ol3dm="$ctrl.ol3dm"></ngeo-olcs-controls3d>
</div>
<p id="desc">
This example shows how to use <code>ngeo.olcs.Manager</code> and the
Expand Down
8 changes: 4 additions & 4 deletions examples/simple3d.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ app.module = angular.module('app', [
/**
* @constructor
* @ngInject
* @param {angular.Scope} $rootScope Angular root scope.
* @param {angular.Scope} $rootScope Root scope.
* @param {ngeo.olcs.Service} ngeoOlcsService The service.
*/
app.MainController = function($rootScope, ngeoOlcsService) {
Expand Down Expand Up @@ -51,12 +51,12 @@ app.MainController = function($rootScope, ngeoOlcsService) {
* @export
* @type {olcs.contrib.Manager}
*/
this.manager = new ngeo.olcs.Manager(cesiumUrl, {
this.ol3dm = new ngeo.olcs.Manager(cesiumUrl, $rootScope, {
map: this.map
});
this.manager.setRootScope($rootScope);

ngeoOlcsService.initialize(this.manager);
// Optionally, the manager can be registered into the olcs service
ngeoOlcsService.initialize(this.ol3dm);
};

app.module.controller('MainController', app.MainController);
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
"moment": "2.18.1",
"nomnom": "1.8.1",
"openlayers": "openlayers/openlayers#4a6317d",
"ol-cesium": "openlayers/ol-cesium#632423bd",
"ol-cesium": "openlayers/ol-cesium#3014d02de4",
"@camptocamp/cesium": "1.39",
"phantomjs-prebuilt": "2.1.14",
"proj4": "2.4.3",
Expand Down
24 changes: 12 additions & 12 deletions src/modules/olcs/Manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,30 @@ goog.require('olcs.contrib.Manager');

const Manager = class extends olcs.contrib.Manager {
/**
* @override
* @param {string} url .
* @param {angular.Scope} $rootScope .
* @param {olcsx.contrib.ManagerOptions} options .
*/
constructor(...args) {
super(...args);
constructor(url, $rootScope, options) {
super(url, options);
/**
* @type {angular.Scope}
* @private
*/
this.rootScope_;
}

/**
* @param {angular.Scope} $rootScope Angular root scope.
*/
setRootScope($rootScope) {
this.rootScope_ = $rootScope;
}


/**
* @override
* @export
*/
toggle3d() {
return super.toggle3d().then(() => {
this.rootScope_.$apply(() => {});
// The transition is asynchronous and at the end of it the state of OLCesium is changed.
// In order to have all code dependent on OLCesium state updated, we kick an Angular digest cycle.
const promise = super.toggle3d();
return promise.then(() => {
this.rootScope_.$apply();
});
}
};
Expand Down
17 changes: 0 additions & 17 deletions src/modules/olcs/Service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,6 @@ const Service = class {
getManager() {
return this.manager_;
}

/**
* @export
* @return {number} the min tilt.
*/
getMinTilt() {
return 0;
}

/**
* @export
* Almost Pi / 2
* @return {number} the max tilt.
*/
getMaxTilt() {
return 7 * Math.PI / 16;
}
};

const name = 'ngeoOlcsService';
Expand Down
56 changes: 38 additions & 18 deletions src/modules/olcs/controls3d.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,21 @@ const Controller = class {

/**
* @type {olcs.contrib.Manager}
* @private
* @export
*/
this.manager_ = goog.asserts.assert(ngeoOlcsService.getManager());
this.ol3dm;

/**
* @type {number}
* @private
* @export
*/
this.minTilt_ = ngeoOlcsService.getMinTilt();
this.minTilt;

/**
* @type {number}
* @private
*/
this.maxTilt_ = ngeoOlcsService.getMaxTilt();
this.maxTilt;

/**
* @type {jQuery}
Expand Down Expand Up @@ -83,30 +83,36 @@ const Controller = class {
* @private
*/
this.animationFrameRequestId_;

/**
* @type {ngeo.olcs.Service}
* @private
*/
this.olcsService_ = ngeoOlcsService;
}

updateWidget_() {
const newRotation = this.manager_.getOl3d().getOlView().getRotation();
const newRotation = this.ol3dm.getOl3d().getOlView().getRotation();
if (shouldUpdate(this.previousRotation_, newRotation)) {
this.rotateElement_(this.rotation3dEl_, newRotation);
this.previousRotation_ = newRotation;
}

const newViewMatrix = this.manager_.getCesiumViewMatrix();
const newViewMatrix = this.ol3dm.getCesiumViewMatrix();
if (!Cesium.Matrix4.equalsEpsilon(this.previousViewMatrix_, newViewMatrix, 1e-5)) {
const newTilt = this.manager_.getTiltOnGlobe(); // this is expensive!!
const newTilt = this.ol3dm.getTiltOnGlobe(); // this is expensive!!
if (Number.isFinite(newTilt || 0)) { // Workaround https://github.com/google/closure-compiler/pull/2712
this.rotateElement_(this.angle3dEl_, newTilt);
this.previousViewMatrix_ = Cesium.Matrix4.clone(newViewMatrix);

// if min or max tilt is reached, disable the tilting buttons
const buffer = 0.01; // rad
if (newTilt - this.minTilt_ < buffer) {
if (newTilt - this.minTilt < buffer) {
this.tiltRightEl_.addClass('ngeo-right-inactive');
} else if (this.tiltRightEl_.hasClass('ngeo-right-inactive')) {
this.tiltRightEl_.removeClass('ngeo-right-inactive');
}
if (this.maxTilt_ - newTilt < buffer) {
if (this.maxTilt - newTilt < buffer) {
this.tiltLeftEl_.addClass('ngeo-left-inactive');
} else if (this.tiltLeftEl_.hasClass('ngeo-left-inactive')) {
this.tiltLeftEl_.removeClass('ngeo-left-inactive');
Expand All @@ -124,6 +130,15 @@ const Controller = class {
}

$onInit() {
if (this.minTilt === undefined) {
this.minTilt = 0;
}
if (this.maxTilt === undefined) {
this.maxTilt = 7 * Math.PI / 16;
}
if (!this.ol3dm) {
this.ol3dm = goog.asserts.assert(this.olcsService_.getManager());
}
this.tiltRightEl_ = this.element_.find('.ngeo-tilt-right');
this.tiltLeftEl_ = this.element_.find('.ngeo-tilt-left');
this.rotation3dEl_ = this.element_.find('.ngeo-rotation3d');
Expand Down Expand Up @@ -155,7 +170,7 @@ const Controller = class {
*/
rotate(angle) {
angle = Cesium.Math.toRadians(angle);
this.manager_.setHeading(angle);
this.ol3dm.setHeading(angle);
}


Expand All @@ -165,13 +180,13 @@ const Controller = class {
*/
tilt(angle) {
angle = Cesium.Math.toRadians(angle);
const tiltOnGlobe = this.manager_.getTiltOnGlobe();
if (tiltOnGlobe + angle < this.minTilt_) {
angle = this.minTilt_ - tiltOnGlobe;
} else if (tiltOnGlobe + angle > this.maxTilt_) {
angle = this.maxTilt_ - tiltOnGlobe;
const tiltOnGlobe = this.ol3dm.getTiltOnGlobe();
if (tiltOnGlobe + angle < this.minTilt) {
angle = this.minTilt - tiltOnGlobe;
} else if (tiltOnGlobe + angle > this.maxTilt) {
angle = this.maxTilt - tiltOnGlobe;
}
const scene = this.manager_.getCesiumScene();
const scene = this.ol3dm.getCesiumScene();
olcs.core.rotateAroundBottomCenter(scene, angle);
}

Expand All @@ -181,7 +196,7 @@ const Controller = class {
* @export
*/
zoom(delta) {
const view = this.manager_.getOlView();
const view = this.ol3dm.getOlView();
const cur = view.getResolution();
const newResolution = view.constrainResolution(cur, delta);
if (view.getAnimating()) {
Expand Down Expand Up @@ -233,6 +248,11 @@ function ngeoOlcsControls3dTemplateUrlInjectable($attrs, ngeoOlcsControls3dTempl
* @ngname ngeoOlcsControls3d
*/
const component = {
bindings: {
'minTilt': '<?',
'maxTilt': '<?',
'ol3dm': '<?'
},
controller: Controller,
templateUrl: ngeoOlcsControls3dTemplateUrlInjectable
};
Expand Down