src_app_toolboxController.js
import {InteractionEventNames, getEventOffset} from '../gui/generic';
/**
* Toolbox controller.
*/
export class ToolboxController {
/**
* List of tools to control.
*
* @type {object}
*/
#toolList;
/**
* Selected tool.
*
* @type {object}
*/
#selectedTool = null;
/**
* Callback store to allow attach/detach.
*
* @type {Array}
*/
#callbackStore = [];
/**
* Current layers bound to tool.
*
* @type {object}
*/
#boundLayers = {};
/**
* @param {object} toolList The list of tool objects.
*/
constructor(toolList) {
this.#toolList = toolList;
}
/**
* Initialise.
*/
init() {
for (const key in this.#toolList) {
this.#toolList[key].init();
}
// keydown listener
window.addEventListener('keydown',
this.#getOnMouch('window', 'keydown'), true);
}
/**
* Get the tool list.
*
* @returns {Array} The list of tool objects.
*/
getToolList() {
return this.#toolList;
}
/**
* Check if a tool is in the tool list.
*
* @param {string} name The name to check.
* @returns {boolean} The tool list element for the given name.
*/
hasTool(name) {
return typeof this.getToolList()[name] !== 'undefined';
}
/**
* Get the selected tool.
*
* @returns {object} The selected tool.
*/
getSelectedTool() {
return this.#selectedTool;
}
/**
* Get the selected tool event handler.
*
* @param {string} eventType The event type, for example
* mousedown, touchstart...
* @returns {Function} The event handler.
*/
getSelectedToolEventHandler(eventType) {
return this.getSelectedTool()[eventType];
}
/**
* Set the selected tool.
*
* @param {string} name The name of the tool.
*/
setSelectedTool(name) {
// check if we have it
if (!this.hasTool(name)) {
throw new Error('Unknown tool: \'' + name + '\'');
}
// de-activate previous
if (this.#selectedTool) {
this.#selectedTool.activate(false);
}
// set internal var
this.#selectedTool = this.#toolList[name];
// activate new tool
this.#selectedTool.activate(true);
}
/**
* Set the selected tool live features.
*
* @param {object} list The list of features.
*/
setToolFeatures(list) {
if (this.getSelectedTool()) {
this.getSelectedTool().setFeatures(list);
}
}
/**
* Listen to layer interaction events.
*
* @param {object} layer The layer to listen to.
* @param {string} layerGroupDivId The associated layer group div id.
*/
bindLayer(layer, layerGroupDivId) {
if (typeof this.#boundLayers[layerGroupDivId] !== 'undefined') {
this.#unbindLayer(this.#boundLayers[layerGroupDivId]);
}
layer.bindInteraction();
// interaction events
const names = InteractionEventNames;
for (let i = 0; i < names.length; ++i) {
layer.addEventListener(names[i],
this.#getOnMouch(layer.getId(), names[i]));
}
// update class var
this.#boundLayers[layerGroupDivId] = layer;
}
/**
* Remove canvas mouse and touch listeners.
*
* @param {object} layer The layer to stop listening to.
*/
#unbindLayer(layer) {
layer.unbindInteraction();
// interaction events
const names = InteractionEventNames;
for (let i = 0; i < names.length; ++i) {
layer.removeEventListener(names[i],
this.#getOnMouch(layer.getId(), names[i]));
}
}
/**
* Mou(se) and (T)ouch event handler. This function just determines
* the mouse/touch position relative to the canvas element.
* It then passes it to the current tool.
*
* @param {string} layerId The layer id.
* @param {string} eventType The event type.
* @returns {object} A callback for the provided layer and event.
*/
#getOnMouch(layerId, eventType) {
// augment event with converted offsets
const augmentEventOffsets = function (event) {
// event offset(s)
const offsets = getEventOffset(event);
// should have at least one offset
event._x = offsets[0].x;
event._y = offsets[0].y;
// possible second
if (offsets.length === 2) {
event._x1 = offsets[1].x;
event._y1 = offsets[1].y;
}
};
const applySelectedTool = (event) => {
// make sure we have a tool
if (this.#selectedTool) {
const func = this.#selectedTool[event.type];
if (func) {
func(event);
}
}
};
if (typeof this.#callbackStore[layerId] === 'undefined') {
this.#callbackStore[layerId] = [];
}
if (typeof this.#callbackStore[layerId][eventType] === 'undefined') {
let callback = null;
if (eventType === 'keydown') {
callback = function (event) {
applySelectedTool(event);
};
} else if (eventType === 'touchend') {
callback = function (event) {
applySelectedTool(event);
};
} else {
// mouse or touch events
callback = function (event) {
augmentEventOffsets(event);
applySelectedTool(event);
};
}
// store callback
this.#callbackStore[layerId][eventType] = callback;
}
return this.#callbackStore[layerId][eventType];
}
} // class ToolboxController