Add existing to tracked
This commit is contained in:
Generated
Vendored
+114
@@ -0,0 +1,114 @@
|
||||
.cesium-navigationHelpButton-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cesium-navigation-help {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
right: 2px;
|
||||
width: 250px;
|
||||
border-radius: 10px;
|
||||
transform: scale(0.01);
|
||||
transform-origin: 234px -10px;
|
||||
transition:
|
||||
visibility 0s 0.25s,
|
||||
transform 0.25s ease-in;
|
||||
}
|
||||
|
||||
.cesium-navigation-help-visible {
|
||||
visibility: visible;
|
||||
transform: scale(1);
|
||||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
.cesium-navigation-help-instructions {
|
||||
border: 1px solid #444;
|
||||
background-color: rgba(38, 38, 38, 0.75);
|
||||
padding-bottom: 5px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.cesium-click-navigation-help {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cesium-touch-navigation-help {
|
||||
display: none;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.cesium-click-navigation-help-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cesium-touch-navigation-help-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cesium-navigation-help-pan {
|
||||
color: #66ccff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cesium-navigation-help-zoom {
|
||||
color: #65fd00;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cesium-navigation-help-rotate {
|
||||
color: #ffd800;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cesium-navigation-help-tilt {
|
||||
color: #d800d8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cesium-navigation-help-details {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.cesium-navigation-button {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border-bottom: none;
|
||||
border-top: 1px solid #444;
|
||||
border-right: 1px solid #444;
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cesium-navigation-button-icon {
|
||||
vertical-align: middle;
|
||||
padding: 5px 1px;
|
||||
}
|
||||
|
||||
.cesium-navigation-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cesium-navigation-button-left {
|
||||
border-radius: 10px 0 0 0;
|
||||
border-left: 1px solid #444;
|
||||
}
|
||||
|
||||
.cesium-navigation-button-right {
|
||||
border-radius: 0 10px 0 0;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.cesium-navigation-button-selected {
|
||||
background-color: rgba(38, 38, 38, 0.75);
|
||||
}
|
||||
|
||||
.cesium-navigation-button-unselected {
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cesium-navigation-button-unselected:hover {
|
||||
background-color: rgba(76, 76, 76, 0.75);
|
||||
}
|
||||
+271
@@ -0,0 +1,271 @@
|
||||
import {
|
||||
buildModuleUrl,
|
||||
defined,
|
||||
destroyObject,
|
||||
DeveloperError,
|
||||
FeatureDetection,
|
||||
getElement,
|
||||
} from "@cesium/engine";
|
||||
import knockout from "../ThirdParty/knockout.js";
|
||||
import NavigationHelpButtonViewModel from "./NavigationHelpButtonViewModel.js";
|
||||
|
||||
/**
|
||||
* <p>The NavigationHelpButton is a single button widget for displaying instructions for
|
||||
* navigating the globe with the mouse.</p><p style="clear: both;"></p><br/>
|
||||
*
|
||||
* @alias NavigationHelpButton
|
||||
* @constructor
|
||||
*
|
||||
* @param {object} options Object with the following properties:
|
||||
* @param {Element|string} options.container The DOM element or ID that will contain the widget.
|
||||
* @param {boolean} [options.instructionsInitiallyVisible=false] True if the navigation instructions should initially be visible; otherwise, false.
|
||||
*
|
||||
* @exception {DeveloperError} Element with id "container" does not exist in the document.
|
||||
*
|
||||
* @example
|
||||
* // In HTML head, include a link to the NavigationHelpButton.css stylesheet,
|
||||
* // and in the body, include: <div id="navigationHelpButtonContainer"></div>
|
||||
*
|
||||
* const navigationHelpButton = new Cesium.NavigationHelpButton({
|
||||
* container : 'navigationHelpButtonContainer'
|
||||
* });
|
||||
*/
|
||||
function NavigationHelpButton(options) {
|
||||
//>>includeStart('debug', pragmas.debug);
|
||||
if (!defined(options) || !defined(options.container)) {
|
||||
throw new DeveloperError("options.container is required.");
|
||||
}
|
||||
//>>includeEnd('debug');
|
||||
|
||||
const container = getElement(options.container);
|
||||
|
||||
const viewModel = new NavigationHelpButtonViewModel();
|
||||
|
||||
const showInsructionsDefault = options.instructionsInitiallyVisible ?? false;
|
||||
viewModel.showInstructions = showInsructionsDefault;
|
||||
|
||||
viewModel._svgPath =
|
||||
"M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466z M17.328,24.371h-2.707v-2.596h2.707V24.371zM17.328,19.003v0.858h-2.707v-1.057c0-3.19,3.63-3.696,3.63-5.963c0-1.034-0.924-1.826-2.134-1.826c-1.254,0-2.354,0.924-2.354,0.924l-1.541-1.915c0,0,1.519-1.584,4.137-1.584c2.487,0,4.796,1.54,4.796,4.136C21.156,16.208,17.328,16.627,17.328,19.003z";
|
||||
|
||||
const wrapper = document.createElement("span");
|
||||
wrapper.className = "cesium-navigationHelpButton-wrapper";
|
||||
container.appendChild(wrapper);
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.type = "button";
|
||||
button.className =
|
||||
"cesium-button cesium-toolbar-button cesium-navigation-help-button";
|
||||
button.setAttribute(
|
||||
"data-bind",
|
||||
"\
|
||||
attr: { title: tooltip },\
|
||||
click: command,\
|
||||
cesiumSvgPath: { path: _svgPath, width: 32, height: 32 }",
|
||||
);
|
||||
wrapper.appendChild(button);
|
||||
|
||||
const instructionContainer = document.createElement("div");
|
||||
instructionContainer.className = "cesium-navigation-help";
|
||||
instructionContainer.setAttribute(
|
||||
"data-bind",
|
||||
'css: { "cesium-navigation-help-visible" : showInstructions}',
|
||||
);
|
||||
wrapper.appendChild(instructionContainer);
|
||||
|
||||
const mouseButton = document.createElement("button");
|
||||
mouseButton.type = "button";
|
||||
mouseButton.className =
|
||||
"cesium-navigation-button cesium-navigation-button-left";
|
||||
mouseButton.setAttribute(
|
||||
"data-bind",
|
||||
'click: showClick, css: {"cesium-navigation-button-selected": !_touch, "cesium-navigation-button-unselected": _touch}',
|
||||
);
|
||||
const mouseIcon = document.createElement("img");
|
||||
mouseIcon.src = buildModuleUrl("Widgets/Images/NavigationHelp/Mouse.svg");
|
||||
mouseIcon.className = "cesium-navigation-button-icon";
|
||||
mouseIcon.style.width = "25px";
|
||||
mouseIcon.style.height = "25px";
|
||||
mouseButton.appendChild(mouseIcon);
|
||||
mouseButton.appendChild(document.createTextNode("Mouse"));
|
||||
|
||||
const touchButton = document.createElement("button");
|
||||
touchButton.type = "button";
|
||||
touchButton.className =
|
||||
"cesium-navigation-button cesium-navigation-button-right";
|
||||
touchButton.setAttribute(
|
||||
"data-bind",
|
||||
'click: showTouch, css: {"cesium-navigation-button-selected": _touch, "cesium-navigation-button-unselected": !_touch}',
|
||||
);
|
||||
const touchIcon = document.createElement("img");
|
||||
touchIcon.src = buildModuleUrl("Widgets/Images/NavigationHelp/Touch.svg");
|
||||
touchIcon.className = "cesium-navigation-button-icon";
|
||||
touchIcon.style.width = "25px";
|
||||
touchIcon.style.height = "25px";
|
||||
touchButton.appendChild(touchIcon);
|
||||
touchButton.appendChild(document.createTextNode("Touch"));
|
||||
|
||||
instructionContainer.appendChild(mouseButton);
|
||||
instructionContainer.appendChild(touchButton);
|
||||
|
||||
const clickInstructions = document.createElement("div");
|
||||
clickInstructions.className =
|
||||
"cesium-click-navigation-help cesium-navigation-help-instructions";
|
||||
clickInstructions.setAttribute(
|
||||
"data-bind",
|
||||
'css: { "cesium-click-navigation-help-visible" : !_touch}',
|
||||
);
|
||||
clickInstructions.innerHTML = `\
|
||||
<table>\
|
||||
<tr>\
|
||||
<td><img src="${buildModuleUrl(
|
||||
"Widgets/Images/NavigationHelp/MouseLeft.svg",
|
||||
)}" width="48" height="48" /></td>\
|
||||
<td>\
|
||||
<div class="cesium-navigation-help-pan">Pan view</div>\
|
||||
<div class="cesium-navigation-help-details">Left click + drag</div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td><img src="${buildModuleUrl(
|
||||
"Widgets/Images/NavigationHelp/MouseRight.svg",
|
||||
)}" width="48" height="48" /></td>\
|
||||
<td>\
|
||||
<div class="cesium-navigation-help-zoom">Zoom view</div>\
|
||||
<div class="cesium-navigation-help-details">Right click + drag, or</div>\
|
||||
<div class="cesium-navigation-help-details">Mouse wheel scroll</div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td><img src="${buildModuleUrl(
|
||||
"Widgets/Images/NavigationHelp/MouseMiddle.svg",
|
||||
)}" width="48" height="48" /></td>\
|
||||
<td>\
|
||||
<div class="cesium-navigation-help-rotate">Rotate view</div>\
|
||||
<div class="cesium-navigation-help-details">Middle click + drag, or</div>\
|
||||
<div class="cesium-navigation-help-details">CTRL + Left/Right click + drag</div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
</table>`;
|
||||
|
||||
instructionContainer.appendChild(clickInstructions);
|
||||
|
||||
const touchInstructions = document.createElement("div");
|
||||
touchInstructions.className =
|
||||
"cesium-touch-navigation-help cesium-navigation-help-instructions";
|
||||
touchInstructions.setAttribute(
|
||||
"data-bind",
|
||||
'css: { "cesium-touch-navigation-help-visible" : _touch}',
|
||||
);
|
||||
touchInstructions.innerHTML = `\
|
||||
<table>\
|
||||
<tr>\
|
||||
<td><img src="${buildModuleUrl(
|
||||
"Widgets/Images/NavigationHelp/TouchDrag.svg",
|
||||
)}" width="70" height="48" /></td>\
|
||||
<td>\
|
||||
<div class="cesium-navigation-help-pan">Pan view</div>\
|
||||
<div class="cesium-navigation-help-details">One finger drag</div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td><img src="${buildModuleUrl(
|
||||
"Widgets/Images/NavigationHelp/TouchZoom.svg",
|
||||
)}" width="70" height="48" /></td>\
|
||||
<td>\
|
||||
<div class="cesium-navigation-help-zoom">Zoom view</div>\
|
||||
<div class="cesium-navigation-help-details">Two finger pinch</div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td><img src="${buildModuleUrl(
|
||||
"Widgets/Images/NavigationHelp/TouchTilt.svg",
|
||||
)}" width="70" height="48" /></td>\
|
||||
<td>\
|
||||
<div class="cesium-navigation-help-rotate">Tilt view</div>\
|
||||
<div class="cesium-navigation-help-details">Two finger drag, same direction</div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td><img src="${buildModuleUrl(
|
||||
"Widgets/Images/NavigationHelp/TouchRotate.svg",
|
||||
)}" width="70" height="48" /></td>\
|
||||
<td>\
|
||||
<div class="cesium-navigation-help-tilt">Rotate view</div>\
|
||||
<div class="cesium-navigation-help-details">Two finger drag, opposite direction</div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
</table>`;
|
||||
|
||||
instructionContainer.appendChild(touchInstructions);
|
||||
|
||||
knockout.applyBindings(viewModel, wrapper);
|
||||
|
||||
this._container = container;
|
||||
this._viewModel = viewModel;
|
||||
this._wrapper = wrapper;
|
||||
|
||||
this._closeInstructions = function (e) {
|
||||
if (!wrapper.contains(e.target)) {
|
||||
viewModel.showInstructions = false;
|
||||
}
|
||||
};
|
||||
|
||||
if (FeatureDetection.supportsPointerEvents()) {
|
||||
document.addEventListener("pointerdown", this._closeInstructions, true);
|
||||
} else {
|
||||
document.addEventListener("mousedown", this._closeInstructions, true);
|
||||
document.addEventListener("touchstart", this._closeInstructions, true);
|
||||
}
|
||||
}
|
||||
|
||||
Object.defineProperties(NavigationHelpButton.prototype, {
|
||||
/**
|
||||
* Gets the parent container.
|
||||
* @memberof NavigationHelpButton.prototype
|
||||
*
|
||||
* @type {Element}
|
||||
*/
|
||||
container: {
|
||||
get: function () {
|
||||
return this._container;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the view model.
|
||||
* @memberof NavigationHelpButton.prototype
|
||||
*
|
||||
* @type {NavigationHelpButtonViewModel}
|
||||
*/
|
||||
viewModel: {
|
||||
get: function () {
|
||||
return this._viewModel;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* @returns {boolean} true if the object has been destroyed, false otherwise.
|
||||
*/
|
||||
NavigationHelpButton.prototype.isDestroyed = function () {
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroys the widget. Should be called if permanently
|
||||
* removing the widget from layout.
|
||||
*/
|
||||
NavigationHelpButton.prototype.destroy = function () {
|
||||
if (FeatureDetection.supportsPointerEvents()) {
|
||||
document.removeEventListener("pointerdown", this._closeInstructions, true);
|
||||
} else {
|
||||
document.removeEventListener("mousedown", this._closeInstructions, true);
|
||||
document.removeEventListener("touchstart", this._closeInstructions, true);
|
||||
}
|
||||
|
||||
knockout.cleanNode(this._wrapper);
|
||||
this._container.removeChild(this._wrapper);
|
||||
|
||||
return destroyObject(this);
|
||||
};
|
||||
export default NavigationHelpButton;
|
||||
Generated
Vendored
+77
@@ -0,0 +1,77 @@
|
||||
import knockout from "../ThirdParty/knockout.js";
|
||||
import createCommand from "../createCommand.js";
|
||||
|
||||
/**
|
||||
* The view model for {@link NavigationHelpButton}.
|
||||
* @alias NavigationHelpButtonViewModel
|
||||
* @constructor
|
||||
*/
|
||||
function NavigationHelpButtonViewModel() {
|
||||
/**
|
||||
* Gets or sets whether the instructions are currently shown. This property is observable.
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
*/
|
||||
this.showInstructions = false;
|
||||
|
||||
const that = this;
|
||||
this._command = createCommand(function () {
|
||||
that.showInstructions = !that.showInstructions;
|
||||
});
|
||||
this._showClick = createCommand(function () {
|
||||
that._touch = false;
|
||||
});
|
||||
this._showTouch = createCommand(function () {
|
||||
that._touch = true;
|
||||
});
|
||||
|
||||
this._touch = false;
|
||||
|
||||
/**
|
||||
* Gets or sets the tooltip. This property is observable.
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
this.tooltip = "Navigation Instructions";
|
||||
|
||||
knockout.track(this, ["tooltip", "showInstructions", "_touch"]);
|
||||
}
|
||||
|
||||
Object.defineProperties(NavigationHelpButtonViewModel.prototype, {
|
||||
/**
|
||||
* Gets the Command that is executed when the button is clicked.
|
||||
* @memberof NavigationHelpButtonViewModel.prototype
|
||||
*
|
||||
* @type {Command}
|
||||
*/
|
||||
command: {
|
||||
get: function () {
|
||||
return this._command;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the Command that is executed when the mouse instructions should be shown.
|
||||
* @memberof NavigationHelpButtonViewModel.prototype
|
||||
*
|
||||
* @type {Command}
|
||||
*/
|
||||
showClick: {
|
||||
get: function () {
|
||||
return this._showClick;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the Command that is executed when the touch instructions should be shown.
|
||||
* @memberof NavigationHelpButtonViewModel.prototype
|
||||
*
|
||||
* @type {Command}
|
||||
*/
|
||||
showTouch: {
|
||||
get: function () {
|
||||
return this._showTouch;
|
||||
},
|
||||
},
|
||||
});
|
||||
export default NavigationHelpButtonViewModel;
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
.cesium-lighter .cesium-navigation-help-instructions {
|
||||
border: 1px solid #759dc0;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.cesium-lighter .cesium-navigation-help-pan {
|
||||
color: #66ccee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cesium-lighter .cesium-navigation-help-zoom {
|
||||
color: #65ec00;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cesium-lighter .cesium-navigation-help-rotate {
|
||||
color: #eec722;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cesium-lighter .cesium-navigation-help-tilt {
|
||||
color: #d800d8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cesium-lighter .cesium-navigation-help-details {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.cesium-lighter .cesium-navigation-button {
|
||||
color: #222222;
|
||||
border-top: 1px solid #759dc0;
|
||||
border-right: 1px solid #759dc0;
|
||||
}
|
||||
|
||||
.cesium-lighter .cesium-navigation-button-selected {
|
||||
background-color: rgba(196, 225, 255, 0.9);
|
||||
}
|
||||
|
||||
.cesium-lighter .cesium-navigation-button-unselected {
|
||||
background-color: rgba(226, 240, 255, 0.9);
|
||||
}
|
||||
|
||||
.cesium-lighter .cesium-navigation-button-unselected:hover {
|
||||
background-color: rgba(166, 210, 255, 0.9);
|
||||
}
|
||||
Reference in New Issue
Block a user