diff --git a/build/scripts/release/geoportal-extensions-openlayers-3.4.2.tgz b/build/scripts/release/geoportal-extensions-openlayers-3.4.2.tgz
new file mode 100644
index 000000000..7e6ebb553
Binary files /dev/null and b/build/scripts/release/geoportal-extensions-openlayers-3.4.2.tgz differ
diff --git a/build/scripts/release/package-openlayers.json b/build/scripts/release/package-openlayers.json
index efa4f432f..e55a664fd 100644
--- a/build/scripts/release/package-openlayers.json
+++ b/build/scripts/release/package-openlayers.json
@@ -1,8 +1,28 @@
{
+ "keywords" : [
+ "geoportail",
+ "geoplateforme",
+ "plugin",
+ "javascript",
+ "OpenLayers"
+ ],
+ "version" : "3.4.2",
"types" : "src/OpenLayers/index.d.ts",
"license" : "CECILL-B",
"date" : "17/04/2024",
- "devDependencies" : {},
+ "dependencies" : {
+ "loglevel" : "1.6.6",
+ "@mapbox/mapbox-gl-style-spec" : "13.20.1",
+ "node-fetch" : "^2.6.1",
+ "eventbusjs" : "0.2.0",
+ "proj4" : "2.7.5",
+ "ol" : "6.9.0",
+ "sortablejs" : "1.14.0",
+ "geoportal-access-lib" : "3.4.1",
+ "xmldom" : "^0.1.27"
+ },
+ "bugs" : {},
+ "scripts" : {},
"files" : [
"dist/",
"src/",
@@ -14,29 +34,9 @@
"type" : "git",
"url" : "https://github.com/IGNF/geoportal-extensions.git"
},
+ "directories" : {},
"module" : "src/OpenLayers/index.js",
"peerDependencies" : {},
- "dependencies" : {
- "loglevel" : "1.6.6",
- "ol" : "6.9.0",
- "sortablejs" : "1.14.0",
- "node-fetch" : "^2.6.1",
- "xmldom" : "^0.1.27",
- "@mapbox/mapbox-gl-style-spec" : "13.20.1",
- "proj4" : "2.7.5",
- "eventbusjs" : "0.2.0",
- "geoportal-access-lib" : "3.4.1"
- },
- "name" : "geoportal-extensions-openlayers",
- "version" : "3.4.2",
- "bugs" : {},
- "scripts" : {},
- "keywords" : [
- "geoportail",
- "geoplateforme",
- "plugin",
- "javascript",
- "OpenLayers"
- ],
- "directories" : {}
+ "devDependencies" : {},
+ "name" : "geoportal-extensions-openlayers"
}
diff --git a/src/OpenLayers/Controls/Editor.js b/src/OpenLayers/Controls/Editor.js
index 8d43b5f2a..f2d6f35b7 100644
--- a/src/OpenLayers/Controls/Editor.js
+++ b/src/OpenLayers/Controls/Editor.js
@@ -141,862 +141,860 @@ var logger = Logger.getLogger("editor");
* // possibility to add listeners with globale variable : eventbus
* eventbus.addEventListener("editor:style:scale:onchangemin", function (e) {...});
*/
-function Editor (options) {
- logger.trace("[constructor] Editor", options);
+class Editor {
- // options
- this.options = options || {
- // TODO default...
- };
+ constructor (options) {
+ logger.trace("[constructor] Editor", options);
- if (!(this instanceof Editor)) {
- throw new TypeError("ERROR CLASS_CONSTRUCTOR");
- }
+ // options
+ this.options = options || {
+ // TODO default...
+ };
- this._initialize();
-};
+ if (!(this instanceof Editor)) {
+ throw new TypeError("ERROR CLASS_CONSTRUCTOR");
+ }
-// on récupère les méthodes de la classe DOM
-Utils.assign(Editor.prototype, EditorDOM);
+ this._initialize();
+ }
-/**
- * Constructor (alias)
- *
- * @private
- */
-Editor.prototype.constructor = Editor;
+ /**
+ * Initialize component
+ * (called by constructor)
+ *
+ * @private
+ */
+ _initialize () {
+ // gestion des options
+ if (!this.options.target) {
+ logger.info("La 'target' n'est pas renseignée (options.target).");
+ }
-/**
- * Initialize component
- * (called by constructor)
- *
- * @private
- */
-Editor.prototype._initialize = function () {
- // gestion des options
- if (!this.options.target) {
- logger.info("La 'target' n'est pas renseignée (options.target).");
- }
+ if (!this.options.style) {
+ logger.error("Le 'style' MapBox n'est pas renseigné (options.style) !");
+ return;
+ }
- if (!this.options.style) {
- logger.error("Le 'style' MapBox n'est pas renseigné (options.style) !");
- return;
- }
+ if (this.options.events) {
+ this._initEvents();
+ } else {
+ logger.warn("Les 'handlers' ne sont pas renseignés (options.events) !");
+ }
- if (this.options.events) {
- this._initEvents();
- } else {
- logger.warn("Les 'handlers' ne sont pas renseignés (options.events) !");
- }
+ if (!this.options.themes) {
+ logger.info("Les 'themes' MapBox ne sont pas renseignés (options.themes).");
+ }
- if (!this.options.themes) {
- logger.info("Les 'themes' MapBox ne sont pas renseignés (options.themes).");
- }
+ // options par defaut
+ var _toolsDefault = {
+ themes : false,
+ layers : true,
+ search : false,
+ style : false,
+ filter : false,
+ legend : false,
+ group : false,
+ groupAuto : false,
+ sort : true,
+ sortBy : "id",
+ sortOrder : "asc",
+ title : true,
+ collapse : undefined,
+ type : true,
+ pin : true,
+ visibility : true,
+ icon : {
+ image : true,
+ anchor : "end"
+ },
+ editable : true
+ };
+
+ if (!this.options.tools) {
+ logger.trace("Utilisation des outils MapBox par défaut (options.tools).");
+ this.options.tools = _toolsDefault;
+ }
- // options par defaut
- var _toolsDefault = {
- themes : false,
- layers : true,
- search : false,
- style : false,
- filter : false,
- legend : false,
- group : false,
- groupAuto : false,
- sort : true,
- sortBy : "id",
- sortOrder : "asc",
- title : true,
- collapse : undefined,
- type : true,
- pin : true,
- visibility : true,
- icon : {
- image : true,
- anchor : "end"
- },
- editable : true
- };
-
- if (!this.options.tools) {
- logger.trace("Utilisation des outils MapBox par défaut (options.tools).");
- this.options.tools = _toolsDefault;
+ Utils.mergeParams(this.options.tools, _toolsDefault, false);
+
+ // id unique
+ this.id = this.options.id || ID.generate();
+
+ // context
+ this.context = {};
+ // property layers
+ this.layers = [];
+ // dom container
+ this.container = null;
+ // dom name
+ this.name = {
+ target : "GPEditorMapBoxTarget",
+ container : "GPEditorMapBoxContainer",
+ containerID : "GPEditorMapBoxContainer_ID_",
+ containerLayers : "GPEditorMapBoxLayersContainer",
+ titleLayers : "GPEditorMapBoxLayersTitle",
+ titleLayersID : "GPEditorMapBoxLayersTitle_ID_",
+ titleThemes : "GPEditorMapBoxThemesTitle",
+ titleThemesID : "GPEditorMapBoxThemesTitle_ID_",
+ sep : "GPEditorMapBoxSep"
+ };
+ // style json
+ this.mapbox = {};
+ // INFO
+ // sprites :
+ // {
+ // url : null,
+ // size : {
+ // h : null,
+ // w : null
+ // },
+ // json : {}
+ // }
+ this.sprites = {};
}
- Utils.mergeParams(this.options.tools, _toolsDefault, false);
-
- // id unique
- this.id = this.options.id || ID.generate();
-
- // context
- this.context = {};
- // property layers
- this.layers = [];
- // dom container
- this.container = null;
- // dom name
- this.name = {
- target : "GPEditorMapBoxTarget",
- container : "GPEditorMapBoxContainer",
- containerID : "GPEditorMapBoxContainer_ID_",
- containerLayers : "GPEditorMapBoxLayersContainer",
- titleLayers : "GPEditorMapBoxLayersTitle",
- titleLayersID : "GPEditorMapBoxLayersTitle_ID_",
- titleThemes : "GPEditorMapBoxThemesTitle",
- titleThemesID : "GPEditorMapBoxThemesTitle_ID_",
- sep : "GPEditorMapBoxSep"
- };
- // style json
- this.mapbox = {};
- // INFO
- // sprites :
- // {
- // url : null,
- // size : {
- // h : null,
- // w : null
- // },
- // json : {}
- // }
- this.sprites = {};
-};
-
-/**
-* Initialize events with handlers
-* (called by constructor)
-*
-* List Events :
-* "editor:layer:visibility"
-* "editor:layer:clone"
-* "editor:layer:remove"
-* "editor:style:edit"
-* "editor:style:minScale"
-* "editor:style:maxScale"
-* "editor:filter:edit"
-* "editor:themes:image",
-* "editor:themes:title"
-* @private
-*/
-Editor.prototype._initEvents = function () {
- var ctx = this.options.scope || this;
- var events = this.options.events;
- if (events) {
- for (var event in events) {
- if (events.hasOwnProperty(event)) {
- var handler = events[event];
- // test sur les events disponibles !
- if (handler) {
- if (!EventBus.hasEventListener(event, handler, ctx)) {
- EventBus.addEventListener(event, handler, ctx);
+ /**
+ * Initialize events with handlers
+ * (called by constructor)
+ *
+ * List Events :
+ * "editor:layer:visibility"
+ * "editor:layer:clone"
+ * "editor:layer:remove"
+ * "editor:style:edit"
+ * "editor:style:minScale"
+ * "editor:style:maxScale"
+ * "editor:filter:edit"
+ * "editor:themes:image",
+ * "editor:themes:title"
+ * @private
+ */
+ _initEvents () {
+ var ctx = this.options.scope || this;
+ var events = this.options.events;
+ if (events) {
+ for (var event in events) {
+ if (events.hasOwnProperty(event)) {
+ var handler = events[event];
+ // test sur les events disponibles !
+ if (handler) {
+ if (!EventBus.hasEventListener(event, handler, ctx)) {
+ EventBus.addEventListener(event, handler, ctx);
+ }
}
}
}
}
}
-};
-/**
- * Graphical rendering of the component
- * (called by constructor)
- *
- * @example
- *
- *
Liste des 'thèmes'
- *
- * ...
- *
- *
Liste des 'couches'
- *
- *
- *
- *
- *
- *
- *
- *
- *
...
- *
...
- *
- *
+ *
Liste des 'thèmes'
+ *
+ * ...
+ *
+ *
Liste des 'couches'
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
...
+ *
...
+ *
+ *
+ *
+ *
+ *
...
+ *
+ *
+ *
- *
- *
- *
...
- *
- *
- *
...
- */
-Group.prototype._initContainer = function () {
- var div = document.createElement("div");
- div.className = this.name.container;
-
- // FIXME pas compatible IE !
- // https://caniuse.com/#search=details
- // cf. https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/
- var details = document.createElement("details");
- details.className = this.name.details;
- details.open = !this.options.collapse;
- div.appendChild(details);
-
- var summary = document.createElement("summary");
- summary.className = this.name.summary;
- summary.innerHTML = this.options.title;
- details.appendChild(summary);
-
- // main container
- this.container = div;
-};
+ // DOM : className or id
+ this.name = {
+ target : "GPEditorMapBoxGroupTarget",
+ container : "GPEditorMapBoxGroupContainer",
+ details : "GPEditorMapBoxGroupDetails",
+ summary : "GPEditorMapBoxGroupSummary"
+ };
+ }
-// ################################################################### //
-// ##################### public methods ############################## //
-// ################################################################### //
+ /**
+ * Graphical rendering of the component
+ * (called by constructor)
+ *
+ * @private
+ * @example
+ * ...
+ */
+ _initContainer () {
+ var div = document.createElement("div");
+ div.className = this.name.container;
+
+ // FIXME pas compatible IE !
+ // https://caniuse.com/#search=details
+ // cf. https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/
+ var details = document.createElement("details");
+ details.className = this.name.details;
+ details.open = !this.options.collapse;
+ div.appendChild(details);
+
+ var summary = document.createElement("summary");
+ summary.className = this.name.summary;
+ summary.innerHTML = this.options.title;
+ details.appendChild(summary);
+
+ // main container
+ this.container = div;
+ }
-/**
- * Add element into target DOM
- */
-Group.prototype.add = function () {
- if (!this.options.target) {
- if (!document.getElementById(this.name.target)) {
- var div = document.createElement("div");
- div.id = this.name.target;
- var node = document.documentElement ||
- document.getElementsByTagName("body")[0] ||
- document.getElementsByTagName("head")[0];
- node.appendChild(div);
+ // ################################################################### //
+ // ##################### public methods ############################## //
+ // ################################################################### //
+ /**
+ * Add element into target DOM
+ */
+ add () {
+ if (!this.options.target) {
+ if (!document.getElementById(this.name.target)) {
+ var div = document.createElement("div");
+ div.id = this.name.target;
+ var node = document.documentElement ||
+ document.getElementsByTagName("body")[0] ||
+ document.getElementsByTagName("head")[0];
+ node.appendChild(div);
+ }
+ this.options.target = document.getElementById(this.name.target);
+ }
+ if (this.container) {
+ this.options.target.appendChild(this.container);
}
- this.options.target = document.getElementById(this.name.target);
}
- if (this.container) {
- this.options.target.appendChild(this.container);
+
+ /**
+ * Set display container (DOM)
+ *
+ * @param {Boolean} display - show/hidden container
+ */
+ display (display) {
+ this.container.style.display = (display) ? "flex" : "none";
}
-};
-/**
- * Set display container (DOM)
- *
- * @param {Boolean} display - show/hidden container
- */
-Group.prototype.display = function (display) {
- this.container.style.display = (display) ? "flex" : "none";
-};
+ /**
+ * Get container (DOM)
+ *
+ * @returns {DOMElement} DOM element
+ */
+ getContainer () {
+ var nodes = this.container.childNodes;
+ if (nodes.length) {
+ // retourne le noeud "details" !
+ return nodes[0];
+ }
+ // sinon le container principal
+ return this.container;
+ }
-/**
- * Get container (DOM)
- *
- * @returns {DOMElement} DOM element
- */
-Group.prototype.getContainer = function () {
- var nodes = this.container.childNodes;
- if (nodes.length) {
- // retourne le noeud "details" !
- return nodes[0];
+ // ################################################################### //
+ // ####################### handlers events to dom #################### //
+ // ################################################################### //
+ /**
+ * this method is called by event '' on '' tag form
+ *
+ * NOT USED !
+ * @param {Object} e - HTMLElement
+ * @private
+ * @fires Group#editor:group:oncollapse
+ */
+ onCollapseGroupMapBox (e) {
+ logger.trace("onCollapseGroupMapBox", e);
+ e.editorID = this.id;
+ e.data = this.options;
+ EventBus.dispatch(EventEditor.group.oncollapse, e);
}
- // sinon le container principal
- return this.container;
-};
-// ################################################################### //
-// ####################### handlers events to dom #################### //
-// ################################################################### //
-/**
- * this method is called by event '' on '' tag form
- *
- * NOT USED !
- * @param {Object} e - HTMLElement
- * @private
- * @fires Group#editor:group:oncollapse
- */
-Group.prototype.onCollapseGroupMapBox = function (e) {
- logger.trace("onCollapseGroupMapBox", e);
- e.editorID = this.id;
- e.data = this.options;
- EventBus.dispatch(EventEditor.group.oncollapse, e);
};
export default Group;
diff --git a/src/OpenLayers/Controls/Editor/Layer.js b/src/OpenLayers/Controls/Editor/Layer.js
index 5fda791ef..666a53664 100644
--- a/src/OpenLayers/Controls/Editor/Layer.js
+++ b/src/OpenLayers/Controls/Editor/Layer.js
@@ -52,593 +52,587 @@ var logger = Logger.getLogger("editor-layer");
* // e.target.editorID : id or null
* }, this);
*/
-function Layer (options) {
- logger.trace("[constructor] Layer", options);
+class Layer {
- // options
- this.options = options || {};
+ constructor (options) {
+ logger.trace("[constructor] Layer", options);
- if (!(this instanceof Layer)) {
- throw new TypeError("ERROR CLASS_CONSTRUCTOR");
- }
+ // options
+ this.options = options || {};
- this._initialize();
+ if (!(this instanceof Layer)) {
+ throw new TypeError("ERROR CLASS_CONSTRUCTOR");
+ }
- this._initContainer();
-};
+ this._initialize();
-/**
- * Constructor (alias)
- *
- * @private
- */
-Layer.prototype.constructor = Layer;
+ this._initContainer();
+ }
-// ################################################################### //
-// ##################### private methods ############################# //
-// ################################################################### //
+ // ################################################################### //
+ // ##################### private methods ############################# //
+ // ################################################################### //
+ /**
+ * Initialize component
+ * (called by constructor)
+ *
+ * @private
+ */
+ _initialize () {
+ // unique editor id (optional!)
+ this.id = this.options.id || null; // null si le layer n'appartient pas à un editeur !
+
+ if (!this.options.target) {
+ // cf. add()
+ }
-/**
- * Initialize component
- * (called by constructor)
- *
- * @private
- */
-Layer.prototype._initialize = function () {
- // unique editor id (optional!)
- this.id = this.options.id || null; // null si le layer n'appartient pas à un editeur !
+ if (!this.options.position) {
+ this.options.position = 0;
+ }
- if (!this.options.target) {
- // cf. add()
- }
+ var _toolsDefault = {
+ visibility : true,
+ icon : {
+ image : true,
+ anchor : "end"
+ },
+ type : true,
+ pin : true,
+ remove : false, // TODO
+ clone : false // TODO
+ };
+
+ if (!this.options.tools) {
+ this.options.tools = _toolsDefault;
+ }
- if (!this.options.position) {
- this.options.position = 0;
- }
+ Utils.mergeParams(this.options.tools, _toolsDefault, false);
+
+ var _objDefault = {
+ id : "",
+ type : "", // icone sur le type de geometrie
+ source : "",
+ "source-layer" : ""
+ };
+
+ if (!this.options.obj) {
+ this.options.obj = _objDefault;
+ }
- var _toolsDefault = {
- visibility : true,
- icon : {
- image : true,
- anchor : "end"
- },
- type : true,
- pin : true,
- remove : false, // TODO
- clone : false // TODO
- };
-
- if (!this.options.tools) {
- this.options.tools = _toolsDefault;
+ Utils.mergeParams(this.options.obj, _objDefault, false);
+
+ // legende intégrée
+ this.bSlotLegend = false;
+
+ // obj
+ this.oFilter = null;
+ this.oStyle = null;
+ this.oLegend = null;
+
+ // dom
+ this.container = null;
+ this.DomVisibility = null;
+ this.DomToggle = null;
+
+ // DOM : className or id
+ this.name = {
+ target : "GPEditorMapBoxLayerTarget",
+ container : "GPEditorMapBoxLayerContainer",
+ containerlegend : "GPEditorMapBoxLayerLegendContainer",
+ containertitle : "GPEditorMapBoxLayerTitleContainer",
+ imagelabelinput : "GPEditorMapBoxLayerImageInput",
+ imagelabel : "GPEditorMapBoxLayerImageLabel",
+ typeimg : "GPEditorMapBoxLayerTypeImage",
+ titleinput : "GPEditorMapBoxLayerTitleInput",
+ titlelabel : "GPEditorMapBoxLayerTitleLabel",
+ containertools : "GPEditorMapBoxToolsContainer",
+ visibilityinput : "GPEditorMapBoxToolsVisibilityInput",
+ visibilitylabel : "GPEditorMapBoxToolsVisibilityLabel",
+ visibilityinputdisable : "GPEditorMapBoxToolsVisibilityInputDisable",
+ visibilitylabeldisable : "GPEditorMapBoxToolsVisibilityLabelDisable"
+ };
}
- Utils.mergeParams(this.options.tools, _toolsDefault, false);
+ /**
+ * Graphical rendering of the component
+ * (called by constructor)
+ *
+ * @private
+ * @example
+ * // >> Titre 1 |OOO| <- menu tools : visibility, clone, remove
+ * // >> Titre 2 |OXX| <- affichage configurable (cf. options.tools)
+ * // Event : clic sur le titre -> ex. affiche le menu des styles / filtres
+ * // : clic visibility, clone, remove
+ * // DOM :
+ *
+ */
+ _initContainer () {
+ // contexte
+ var self = this;
+
+ var obj = this.options.obj;
+
+ var div = document.createElement("div");
+ div.className = this.name.container;
+
+ // title
+ var divTitle = document.createElement("div");
+ divTitle.id = this.name.containertitle + "-" + this.options.position;
+ divTitle.className = this.name.containertitle;
- var _objDefault = {
- id : "",
- type : "", // icone sur le type de geometrie
- source : "",
- "source-layer" : ""
- };
+ // puce
+ if (this.options.tools.pin) { // Optionnel !
+ // input
+ var inputImage = document.createElement("input");
+ inputImage.id = this.name.imagelabelinput + "-" + this.options.position;
+ inputImage.className = this.name.imagelabelinput;
+ inputImage.type = "checkbox";
+ divTitle.appendChild(inputImage);
+ // puce
+ var labelImage = document.createElement("label");
+ labelImage.className = this.name.imagelabel;
+ labelImage.htmlFor = inputImage.id;
+ if (labelImage.addEventListener) {
+ labelImage.addEventListener("click", function (e) {
+ self.onClickLayerMapBox(e);
+ });
+ } else if (labelImage.attachEvent) {
+ labelImage.attachEvent("onclick", function (e) {
+ self.onClickLayerMapBox(e);
+ });
+ }
+ divTitle.appendChild(labelImage);
+ }
- if (!this.options.obj) {
- this.options.obj = _objDefault;
- }
+ // tools :
+ // visibility, (remove, clone)
+ var _addTools = function () {
+ var divTools = document.createElement("div");
+ divTools.id = this.name.containertools + "-" + this.options.position;
+ divTools.className = this.name.containertools;
+
+ // visibility
+ if (this.options.tools.visibility) {
+ var inputTools = document.createElement("input");
+ inputTools.id = this.name.visibilityinput + "-" + this.options.position;
+ inputTools.className = (this.options.tools.icon.image) ? this.name.visibilityinput : this.name.visibilityinputdisable;
+ inputTools.type = "checkbox";
+ inputTools.checked = "checked"; // par défaut, à modifier via visibility(true|false) !
+
+ // event for visibility change
+ if (inputTools.addEventListener) {
+ inputTools.addEventListener("click", function (e) {
+ self.onVisibilityLayerMapBox(e);
+ });
+ } else if (inputTools.attachEvent) {
+ // internet explorer
+ inputTools.attachEvent("onclick", function (e) {
+ self.onVisibilityLayerMapBox(e);
+ });
+ }
+ divTools.appendChild(inputTools);
+ // enregistrement utile pour la méthode : visibility()
+ this.DomVisibility = inputTools;
+
+ var labelTools = document.createElement("label");
+ labelTools.htmlFor = this.name.visibilityinput + "-" + this.options.position;
+ labelTools.id = this.name.visibilitylabel + "-" + this.options.position;
+ labelTools.className = (this.options.tools.icon.image) ? this.name.visibilitylabel : this.name.visibilitylabeldisable;
+ labelTools.title = "Afficher/masquer la couche";
+ divTools.appendChild(labelTools);
+
+ div.appendChild(divTools);
+ }
- Utils.mergeParams(this.options.obj, _objDefault, false);
-
- // legende intégrée
- this.bSlotLegend = false;
-
- // obj
- this.oFilter = null;
- this.oStyle = null;
- this.oLegend = null;
-
- // dom
- this.container = null;
- this.DomVisibility = null;
- this.DomToggle = null;
-
- // DOM : className or id
- this.name = {
- target : "GPEditorMapBoxLayerTarget",
- container : "GPEditorMapBoxLayerContainer",
- containerlegend : "GPEditorMapBoxLayerLegendContainer",
- containertitle : "GPEditorMapBoxLayerTitleContainer",
- imagelabelinput : "GPEditorMapBoxLayerImageInput",
- imagelabel : "GPEditorMapBoxLayerImageLabel",
- typeimg : "GPEditorMapBoxLayerTypeImage",
- titleinput : "GPEditorMapBoxLayerTitleInput",
- titlelabel : "GPEditorMapBoxLayerTitleLabel",
- containertools : "GPEditorMapBoxToolsContainer",
- visibilityinput : "GPEditorMapBoxToolsVisibilityInput",
- visibilitylabel : "GPEditorMapBoxToolsVisibilityLabel",
- visibilityinputdisable : "GPEditorMapBoxToolsVisibilityInputDisable",
- visibilitylabeldisable : "GPEditorMapBoxToolsVisibilityLabelDisable"
- };
-};
+ // clone
+ if (this.options.tools.clone) {
+ // TODO...
+ logger.warn("Dom for tools clone, it's not yet implemented !");
+ }
-/**
- * Graphical rendering of the component
- * (called by constructor)
- *
- * @private
- * @example
- * // >> Titre 1 |OOO| <- menu tools : visibility, clone, remove
- * // >> Titre 2 |OXX| <- affichage configurable (cf. options.tools)
- * // Event : clic sur le titre -> ex. affiche le menu des styles / filtres
- * // : clic visibility, clone, remove
- * // DOM :
- *
- */
-Layer.prototype._initContainer = function () {
- // contexte
- var self = this;
+ // remove
+ if (this.options.tools.remove) {
+ // TODO...
+ logger.warn("Dom for tools remove, it's not yet implemented !");
+ }
+ };
- var obj = this.options.obj;
+ // ajout des outils au debut du composant
+ if (this.options.tools.icon.anchor === "start") {
+ _addTools.apply(this);
+ }
- var div = document.createElement("div");
- div.className = this.name.container;
+ // type
+ if (this.options.tools.type && obj.type) { // Optionnel !
+ var imgType = document.createElement("img");
+ imgType.className = this.name.typeimg;
+ // FIXME il faudrait faire la difference entre :
+ // - icone uniquement : SYMBOL-ICON
+ // - texte uniquement : SYMBOL-TEXT
+ // - les 2 : SYMBOL
+ // Mais il nous faut les styles complets (paint & layout)
+ // pour determiner les 3 types !
+ switch (obj.type.toUpperCase()) {
+ case "SYMBOL-ICON": // not used !
+ imgType.style["background-position"] = "0px 0";
+ break;
+ case "SYMBOL-TEXT": // not used !
+ imgType.style["background-position"] = "-194px 0";
+ break;
+ case "SYMBOL":
+ imgType.style["background-position"] = "-84px 0";
+ break;
+ case "LINE":
+ imgType.style["background-position"] = "-28px 0";
+ break;
+ case "FILL":
+ imgType.style["background-position"] = "-56px 0";
+ break;
+ case "BACKGROUND":
+ imgType.style["background-position"] = "-140px 0";
+ break;
+ case "CIRCLE":
+ imgType.style["background-position"] = "-168px 0";
+ break;
+ default:
+ // type inconnu ou non pris en charge ou par defaut
+ imgType.style["background-position"] = "-112px 0";
+ }
+ divTitle.appendChild(imgType);
+ }
- // title
- var divTitle = document.createElement("div");
- divTitle.id = this.name.containertitle + "-" + this.options.position;
- divTitle.className = this.name.containertitle;
+ // container legend (empty)
+ var divLegend = document.createElement("div");
+ divLegend.id = this.name.containerlegend + "-" + this.options.position;
+ divLegend.className = this.name.containerlegend;
+ divTitle.appendChild(divLegend);
- // puce
- if (this.options.tools.pin) { // Optionnel !
// input
- var inputImage = document.createElement("input");
- inputImage.id = this.name.imagelabelinput + "-" + this.options.position;
- inputImage.className = this.name.imagelabelinput;
- inputImage.type = "checkbox";
- divTitle.appendChild(inputImage);
- // puce
- var labelImage = document.createElement("label");
- labelImage.className = this.name.imagelabel;
- labelImage.htmlFor = inputImage.id;
- if (labelImage.addEventListener) {
- labelImage.addEventListener("click", function (e) {
+ var inputTitle = document.createElement("input");
+ inputTitle.id = this.name.titleinput + "-" + this.options.position;
+ inputTitle.className = this.name.titleinput;
+ inputTitle.type = "checkbox";
+ divTitle.appendChild(inputTitle);
+
+ // label for
+ var labelTitle = document.createElement("label");
+ labelTitle.className = this.name.titlelabel;
+ labelTitle.htmlFor = inputTitle.id;
+ labelTitle.innerHTML = obj["id"] || obj["source-layer"] || obj["source"];
+ labelTitle.title = obj["source-layer"] || obj["source"] || obj["id"];
+ if (labelTitle.addEventListener) {
+ labelTitle.addEventListener("click", function (e) {
self.onClickLayerMapBox(e);
});
- } else if (labelImage.attachEvent) {
- labelImage.attachEvent("onclick", function (e) {
+ } else if (labelTitle.attachEvent) {
+ labelTitle.attachEvent("onclick", function (e) {
self.onClickLayerMapBox(e);
});
}
- divTitle.appendChild(labelImage);
- }
+ divTitle.appendChild(labelTitle);
+ // enregistrement utile pour la méthode : collapse()
+ this.DomToggle = labelTitle;
- // tools :
- // visibility, (remove, clone)
- var _addTools = function () {
- var divTools = document.createElement("div");
- divTools.id = this.name.containertools + "-" + this.options.position;
- divTools.className = this.name.containertools;
-
- // visibility
- if (this.options.tools.visibility) {
- var inputTools = document.createElement("input");
- inputTools.id = this.name.visibilityinput + "-" + this.options.position;
- inputTools.className = (this.options.tools.icon.image) ? this.name.visibilityinput : this.name.visibilityinputdisable;
- inputTools.type = "checkbox";
- inputTools.checked = "checked"; // par défaut, à modifier via visibility(true|false) !
- // event for visibility change
- if (inputTools.addEventListener) {
- inputTools.addEventListener("click", function (e) {
- self.onVisibilityLayerMapBox(e);
- });
- } else if (inputTools.attachEvent) {
- // internet explorer
- inputTools.attachEvent("onclick", function (e) {
- self.onVisibilityLayerMapBox(e);
- });
- }
- divTools.appendChild(inputTools);
- // enregistrement utile pour la méthode : visibility()
- this.DomVisibility = inputTools;
-
- var labelTools = document.createElement("label");
- labelTools.htmlFor = this.name.visibilityinput + "-" + this.options.position;
- labelTools.id = this.name.visibilitylabel + "-" + this.options.position;
- labelTools.className = (this.options.tools.icon.image) ? this.name.visibilitylabel : this.name.visibilitylabeldisable;
- labelTools.title = "Afficher/masquer la couche";
- divTools.appendChild(labelTools);
-
- div.appendChild(divTools);
- }
-
- // clone
- if (this.options.tools.clone) {
- // TODO...
- logger.warn("Dom for tools clone, it's not yet implemented !");
- }
+ div.appendChild(divTitle);
- // remove
- if (this.options.tools.remove) {
- // TODO...
- logger.warn("Dom for tools remove, it's not yet implemented !");
+ // ajout des outils au fin du composant
+ if (this.options.tools.icon.anchor === "end") {
+ _addTools.apply(this);
}
- };
- // ajout des outils au debut du composant
- if (this.options.tools.icon.anchor === "start") {
- _addTools.apply(this);
+ // main container
+ this.container = div;
}
- // type
- if (this.options.tools.type && obj.type) { // Optionnel !
- var imgType = document.createElement("img");
- imgType.className = this.name.typeimg;
- // FIXME il faudrait faire la difference entre :
- // - icone uniquement : SYMBOL-ICON
- // - texte uniquement : SYMBOL-TEXT
- // - les 2 : SYMBOL
- // Mais il nous faut les styles complets (paint & layout)
- // pour determiner les 3 types !
- switch (obj.type.toUpperCase()) {
- case "SYMBOL-ICON": // not used !
- imgType.style["background-position"] = "0px 0";
- break;
- case "SYMBOL-TEXT": // not used !
- imgType.style["background-position"] = "-194px 0";
- break;
- case "SYMBOL":
- imgType.style["background-position"] = "-84px 0";
- break;
- case "LINE":
- imgType.style["background-position"] = "-28px 0";
- break;
- case "FILL":
- imgType.style["background-position"] = "-56px 0";
- break;
- case "BACKGROUND":
- imgType.style["background-position"] = "-140px 0";
- break;
- case "CIRCLE":
- imgType.style["background-position"] = "-168px 0";
- break;
- default:
- // type inconnu ou non pris en charge ou par defaut
- imgType.style["background-position"] = "-112px 0";
+ // ################################################################### //
+ // ##################### public methods ############################## //
+ // ################################################################### //
+ /**
+ * Add element into target DOM
+ * @returns {Object} - Layer instance
+ */
+ add () {
+ logger.trace("add()");
+ if (!this.options.target) {
+ if (!document.getElementById(this.name.target)) {
+ var div = document.createElement("div");
+ div.id = this.name.target;
+ var node = document.documentElement ||
+ document.getElementsByTagName("body")[0] ||
+ document.getElementsByTagName("head")[0];
+ node.appendChild(div);
+ }
+ this.options.target = document.getElementById(this.name.target);
+ }
+ if (this.container) {
+ this.options.target.appendChild(this.container);
}
- divTitle.appendChild(imgType);
+ return this;
}
- // container legend (empty)
- var divLegend = document.createElement("div");
- divLegend.id = this.name.containerlegend + "-" + this.options.position;
- divLegend.className = this.name.containerlegend;
- divTitle.appendChild(divLegend);
-
- // input
- var inputTitle = document.createElement("input");
- inputTitle.id = this.name.titleinput + "-" + this.options.position;
- inputTitle.className = this.name.titleinput;
- inputTitle.type = "checkbox";
- divTitle.appendChild(inputTitle);
-
- // label for
- var labelTitle = document.createElement("label");
- labelTitle.className = this.name.titlelabel;
- labelTitle.htmlFor = inputTitle.id;
- labelTitle.innerHTML = obj["id"] || obj["source-layer"] || obj["source"];
- labelTitle.title = obj["source-layer"] || obj["source"] || obj["id"];
- if (labelTitle.addEventListener) {
- labelTitle.addEventListener("click", function (e) {
- self.onClickLayerMapBox(e);
- });
- } else if (labelTitle.attachEvent) {
- labelTitle.attachEvent("onclick", function (e) {
- self.onClickLayerMapBox(e);
- });
+ /**
+ * Add style in the submenu
+ *
+ * @param {Object} style - style object
+ */
+ addStyle (style) {
+ logger.trace("addStyle()", style);
+ if (style && typeof style === "object" && style instanceof Style) {
+ this.oStyle = style;
+ this.oStyle.display(false); // par defaut !
+ }
}
- divTitle.appendChild(labelTitle);
- // enregistrement utile pour la méthode : collapse()
- this.DomToggle = labelTitle;
-
- div.appendChild(divTitle);
- // ajout des outils au fin du composant
- if (this.options.tools.icon.anchor === "end") {
- _addTools.apply(this);
+ /**
+ * Add filter in the submenu
+ *
+ * @param {Object} filter - filter object
+ */
+ addFilter (filter) {
+ logger.trace("addFilter()", filter);
+ if (filter && typeof filter === "object" && filter instanceof Filter) {
+ this.oFilter = filter;
+ this.oFilter.display(false); // par defaut !
+ }
}
- // main container
- this.container = div;
-};
-
-// ################################################################### //
-// ##################### public methods ############################## //
-// ################################################################### //
-
-/**
- * Add element into target DOM
- * @returns {Object} - Layer instance
- */
-Layer.prototype.add = function () {
- logger.trace("add()");
- if (!this.options.target) {
- if (!document.getElementById(this.name.target)) {
- var div = document.createElement("div");
- div.id = this.name.target;
- var node = document.documentElement ||
- document.getElementsByTagName("body")[0] ||
- document.getElementsByTagName("head")[0];
- node.appendChild(div);
+ /**
+ * Add Legend in the submenu
+ *
+ * @param {Object} legend - legend object
+ */
+ addLegend (legend) {
+ logger.trace("addLegend()", legend);
+ if (legend && typeof legend === "object" && legend instanceof Legend) {
+ this.oLegend = legend;
+ this.oLegend.display(false); // par defaut !
}
- this.options.target = document.getElementById(this.name.target);
}
- if (this.container) {
- this.options.target.appendChild(this.container);
+
+ /**
+ * Integrate Legend to the layer container
+ */
+ slotLegend () {
+ // cas particulier :
+ // on souhaite intégrer une partie de la legende dans le container du layer.
+ var legend = this.oLegend;
+ if (legend) {
+ // FIXME c'est pourri...
+ var node = null;
+ var nodesLvl1 = this.container.childNodes;
+ if (nodesLvl1.length) {
+ // selon où se situe l'icone de visibilité : au debut ou à la fin...
+ var idx = (this.options.tools.icon.anchor === "start") ? 1 : 0;
+ var nodesLvl2 = nodesLvl1[idx].childNodes;
+ // on recherche le container de la legende
+ for (var i = 0; i < nodesLvl2.length; i++) {
+ var curnode = nodesLvl2[i];
+ if (curnode.id.indexOf(this.name.containerlegend) !== -1) {
+ node = curnode;
+ }
+ }
+ }
+ if (node) {
+ var render = legend.getRenderContainer();
+ if (render) {
+ node.appendChild(render);
+ // legende intégrée
+ this.bSlotLegend = true;
+ }
+ }
+ }
}
- return this;
-};
-/**
- * Add style in the submenu
- *
- * @param {Object} style - style object
- */
-Layer.prototype.addStyle = function (style) {
- logger.trace("addStyle()", style);
- if (style && typeof style === "object" && style instanceof Style) {
- this.oStyle = style;
- this.oStyle.display(false); // par defaut !
+ // ################################################################### //
+ // ##################### public methods ############################## //
+ // ################################################################### //
+ /**
+ * Set visibility or get
+ *
+ * @param {Boolean} display - set visibility or undefined to get status
+ * @returns {Boolean} - true/false
+ */
+ visibility (display) {
+ logger.trace("visibility()", display);
+ if (!this.options.tools.visibility) {
+ return;
+ }
+ if (typeof display !== "undefined") {
+ this.DomVisibility.checked = (display) ? "checked" : "";
+ }
+ return this.DomVisibility.checked;
}
-};
-/**
- * Add filter in the submenu
- *
- * @param {Object} filter - filter object
- */
-Layer.prototype.addFilter = function (filter) {
- logger.trace("addFilter()", filter);
- if (filter && typeof filter === "object" && filter instanceof Filter) {
- this.oFilter = filter;
- this.oFilter.display(false); // par defaut !
+ /**
+ * Collapse a layer panel (event)
+ */
+ collapse () {
+ logger.trace("collapse()");
+ this.DomToggle.click();
}
-};
-/**
- * Add Legend in the submenu
- *
- * @param {Object} legend - legend object
- */
-Layer.prototype.addLegend = function (legend) {
- logger.trace("addLegend()", legend);
- if (legend && typeof legend === "object" && legend instanceof Legend) {
- this.oLegend = legend;
- this.oLegend.display(false); // par defaut !
+ /**
+ * Click on visibility icon (event)
+ */
+ visible () {
+ logger.trace("visible()");
+ if (!this.options.tools.visibility) {
+ return;
+ }
+ this.DomVisibility.click();
}
-};
-/**
- * Integrate Legend to the layer container
- */
-Layer.prototype.slotLegend = function () {
- // cas particulier :
- // on souhaite intégrer une partie de la legende dans le container du layer.
- var legend = this.oLegend;
- if (legend) {
- // FIXME c'est pourri...
- var node = null;
- var nodesLvl1 = this.container.childNodes;
- if (nodesLvl1.length) {
- // selon où se situe l'icone de visibilité : au debut ou à la fin...
- var idx = (this.options.tools.icon.anchor === "start") ? 1 : 0;
- var nodesLvl2 = nodesLvl1[idx].childNodes;
- // on recherche le container de la legende
- for (var i = 0; i < nodesLvl2.length; i++) {
- var curnode = nodesLvl2[i];
- if (curnode.id.indexOf(this.name.containerlegend) !== -1) {
- node = curnode;
- }
+ /**
+ * Set collapse or get
+ *
+ * @param {Boolean} display - show/hidden container or get status
+ * @returns {Boolean} - true/false
+ */
+ display (display) {
+ logger.trace("display()", display);
+ var checked = document.getElementById(this.DomToggle.htmlFor).checked;
+ if (typeof display !== "undefined") {
+ this.container.style.display = (display) ? "inline-flex" : "none";
+ if (this.oStyle) {
+ this.oStyle.display(display && checked);
}
- }
- if (node) {
- var render = legend.getRenderContainer();
- if (render) {
- node.appendChild(render);
- // legende intégrée
- this.bSlotLegend = true;
+ if (this.oFilter) {
+ this.oFilter.display(display && checked);
+ }
+ if (this.oLegend) {
+ this.oLegend.display(display && checked);
}
}
+ return checked;
}
-};
-
-// ################################################################### //
-// ##################### public methods ############################## //
-// ################################################################### //
-/**
- * Set visibility or get
- *
- * @param {Boolean} display - set visibility or undefined to get status
- * @returns {Boolean} - true/false
- */
-Layer.prototype.visibility = function (display) {
- logger.trace("visibility()", display);
- if (!this.options.tools.visibility) {
- return;
- }
- if (typeof display !== "undefined") {
- this.DomVisibility.checked = (display) ? "checked" : "";
+ /**
+ * Set disabled/enabled status or get
+ *
+ * @param {Boolean} active - disable/enable layer interaction or get status
+ * @returns {Boolean} - true/false
+ */
+ active (active) {
+ logger.trace("active()", active);
+ if (typeof active !== "undefined") {
+ this.container.className = (active)
+ ? this.name.container
+ : this.name.container + " disabled";
+ }
+ return (this.container.className === this.name.container);
}
- return this.DomVisibility.checked;
-};
-
-/**
-* Collapse a layer panel (event)
-*/
-Layer.prototype.collapse = function () {
- logger.trace("collapse()");
- this.DomToggle.click();
-};
-/**
-* Click on visibility icon (event)
-*/
-Layer.prototype.visible = function () {
- logger.trace("visible()");
- if (!this.options.tools.visibility) {
- return;
+ /**
+ * Get container (DOM)
+ *
+ * @returns {DOMElement} DOM element
+ */
+ getContainer () {
+ return this.container;
}
- this.DomVisibility.click();
-};
-/**
- * Set collapse or get
- *
- * @param {Boolean} display - show/hidden container or get status
- * @returns {Boolean} - true/false
- */
-Layer.prototype.display = function (display) {
- logger.trace("display()", display);
- var checked = document.getElementById(this.DomToggle.htmlFor).checked;
- if (typeof display !== "undefined") {
- this.container.style.display = (display) ? "inline-flex" : "none";
+ // ################################################################### //
+ // ####################### handlers events to dom #################### //
+ // ################################################################### //
+ /**
+ * this method is called by event '' on '' tag form
+ *
+ * @param {Object} e - HTMLElement
+ * @private
+ */
+ onClickLayerMapBox (e) {
+ logger.trace("onClickLayerMapBox", e);
+
+ var id = e.target.htmlFor.substring(e.target.htmlFor.indexOf("-"));
+ var checked = document.getElementById(e.target.htmlFor).checked;
+
+ // gestion des inputs
+ if (e.target.htmlFor === this.name.imagelabelinput + id) {
+ document.getElementById(this.name.titleinput + id).checked = !checked;
+ }
+ if (e.target.htmlFor === this.name.titleinput + id) {
+ // si options.pin:false, ce DOM n'existe pas !
+ if (document.getElementById(this.name.imagelabelinput + id)) {
+ document.getElementById(this.name.imagelabelinput + id).checked = !checked;
+ }
+ }
+
+ // ouverture du panneau des styles / filtres
if (this.oStyle) {
- this.oStyle.display(display && checked);
+ this.oStyle.display(!checked);
}
if (this.oFilter) {
- this.oFilter.display(display && checked);
+ this.oFilter.display(!checked);
}
- if (this.oLegend) {
- this.oLegend.display(display && checked);
+ // attention,
+ // si la legende est non editable, elle ne se trouve pas dans le sous menu !
+ if (this.oLegend && this.oLegend.isEditable()) {
+ this.oLegend.display(!checked);
}
}
- return checked;
-};
-/**
- * Set disabled/enabled status or get
- *
- * @param {Boolean} active - disable/enable layer interaction or get status
- * @returns {Boolean} - true/false
- */
-Layer.prototype.active = function (active) {
- logger.trace("active()", active);
- if (typeof active !== "undefined") {
- this.container.className = (active)
- ? this.name.container
- : this.name.container + " disabled";
+ /**
+ * this method is called by event '' on '' tag form...
+ *
+ * 'e' contains the option object into 'e.target.data' !
+ * 'e' contains the id editor into 'e.target.editorID' !
+ *
+ * @param {Object} e - HTMLElement
+ * @private
+ * @fires Layer#editor:layer:onclickvisibility
+ */
+ onVisibilityLayerMapBox (e) {
+ logger.trace("onVisibilityLayerMapBox", e);
+ e.editorID = this.id;
+ e.data = this.options;
+ EventBus.dispatch(EventEditor.layer.onclickvisibility, e);
}
- return (this.container.className === this.name.container);
-};
-/**
- * Get container (DOM)
- *
- * @returns {DOMElement} DOM element
- */
-Layer.prototype.getContainer = function () {
- return this.container;
-};
-
-// ################################################################### //
-// ####################### handlers events to dom #################### //
-// ################################################################### //
-
-/**
- * this method is called by event '' on '' tag form
- *
- * @param {Object} e - HTMLElement
- * @private
- */
-Layer.prototype.onClickLayerMapBox = function (e) {
- logger.trace("onClickLayerMapBox", e);
-
- var id = e.target.htmlFor.substring(e.target.htmlFor.indexOf("-"));
- var checked = document.getElementById(e.target.htmlFor).checked;
-
- // gestion des inputs
- if (e.target.htmlFor === this.name.imagelabelinput + id) {
- document.getElementById(this.name.titleinput + id).checked = !checked;
- }
- if (e.target.htmlFor === this.name.titleinput + id) {
- // si options.pin:false, ce DOM n'existe pas !
- if (document.getElementById(this.name.imagelabelinput + id)) {
- document.getElementById(this.name.imagelabelinput + id).checked = !checked;
- }
+ /**
+ * this method is called by event '' on '' tag form...
+ *
+ * 'e' contains the option object into 'e.target.data' !
+ * 'e' contains the id editor into 'e.target.editorID' !
+ *
+ * @param {Object} e - HTMLElement
+ * @private
+ * @fires Layer#editor:layer:onclickclone
+ */
+ onCloneLayerMapBox (e) {
+ logger.trace("onCloneLayerMapBox", e);
+ e.editorID = this.id;
+ e.data = this.options;
+ EventBus.dispatch(EventEditor.layer.onclickclone, e);
}
- // ouverture du panneau des styles / filtres
- if (this.oStyle) {
- this.oStyle.display(!checked);
- }
- if (this.oFilter) {
- this.oFilter.display(!checked);
- }
- // attention,
- // si la legende est non editable, elle ne se trouve pas dans le sous menu !
- if (this.oLegend && this.oLegend.isEditable()) {
- this.oLegend.display(!checked);
+ /**
+ * this method is called by event '' on '' tag form...
+ *
+ * 'e' contains the option object into 'e.target.data' !
+ * 'e' contains the id editor into 'e.target.editorID' !
+ *
+ * @param {Object} e - HTMLElement
+ * @private
+ * @fires Layer#editor:layer:onclickremove
+ */
+ onRemoveLayerMapBox (e) {
+ logger.trace("onRemoveLayerMapBox", e);
+ e.editorID = this.id;
+ e.data = this.options;
+ EventBus.dispatch(EventEditor.layer.onclickremove, e);
}
-};
-/**
- * this method is called by event '' on '' tag form...
- *
- * 'e' contains the option object into 'e.target.data' !
- * 'e' contains the id editor into 'e.target.editorID' !
- *
- * @param {Object} e - HTMLElement
- * @private
- * @fires Layer#editor:layer:onclickvisibility
- */
-Layer.prototype.onVisibilityLayerMapBox = function (e) {
- logger.trace("onVisibilityLayerMapBox", e);
- e.editorID = this.id;
- e.data = this.options;
- EventBus.dispatch(EventEditor.layer.onclickvisibility, e);
-};
-
-/**
- * this method is called by event '' on '' tag form...
- *
- * 'e' contains the option object into 'e.target.data' !
- * 'e' contains the id editor into 'e.target.editorID' !
- *
- * @param {Object} e - HTMLElement
- * @private
- * @fires Layer#editor:layer:onclickclone
- */
-Layer.prototype.onCloneLayerMapBox = function (e) {
- logger.trace("onCloneLayerMapBox", e);
- e.editorID = this.id;
- e.data = this.options;
- EventBus.dispatch(EventEditor.layer.onclickclone, e);
-};
-
-/**
- * this method is called by event '' on '' tag form...
- *
- * 'e' contains the option object into 'e.target.data' !
- * 'e' contains the id editor into 'e.target.editorID' !
- *
- * @param {Object} e - HTMLElement
- * @private
- * @fires Layer#editor:layer:onclickremove
- */
-Layer.prototype.onRemoveLayerMapBox = function (e) {
- logger.trace("onRemoveLayerMapBox", e);
- e.editorID = this.id;
- e.data = this.options;
- EventBus.dispatch(EventEditor.layer.onclickremove, e);
};
export default Layer;
diff --git a/src/OpenLayers/Controls/Editor/Legend.js b/src/OpenLayers/Controls/Editor/Legend.js
index cf7bf504a..2c4ea2aae 100644
--- a/src/OpenLayers/Controls/Editor/Legend.js
+++ b/src/OpenLayers/Controls/Editor/Legend.js
@@ -51,998 +51,990 @@ var logger = Logger.getLogger("editor-legend");
* legend.getToolsContainer();
* legend.getContainer();
*/
-function Legend (options) {
- logger.trace("[constructor] Legend", options);
-
- // options
- this.options = options || {
- // default...
- target : null,
- position : 0,
- sprites : null,
- obj : null
- };
-
- if (!(this instanceof Legend)) {
- throw new TypeError("ERROR CLASS_CONSTRUCTOR");
- }
+class Legend {
+
+ constructor (options) {
+ logger.trace("[constructor] Legend", options);
+
+ // options
+ this.options = options || {
+ // default...
+ target : null,
+ position : 0,
+ sprites : null,
+ obj : null
+ };
- this._initialize();
+ if (!(this instanceof Legend)) {
+ throw new TypeError("ERROR CLASS_CONSTRUCTOR");
+ }
- this._initContainer();
-};
+ this._initialize();
-/**
- * Constructor (alias)
- *
- * @private
- */
-Legend.prototype.constructor = Legend;
-
-// ################################################################### //
-// ########################## CONSTANTES ############################# //
-// ################################################################### //
+ this._initContainer();
+ }
-/**
- * List of supported properties
- */
-Legend.PROPERTIES = {
- line : [
- "line-color",
- "line-dasharray",
- "line-opacity",
- "line-width"
- ],
- fill : [
- "fill-color",
- "fill-opacity",
- "fill-outline-color",
- "fill-pattern"
- ],
- background : [
- "background-color",
- "background-opacity",
- "background-pattern"
- ],
- circle : [
- "circle-color",
- "circle-opacity",
- "circle-stroke-color",
- "circle-stroke-opacity",
- "circle-stroke-width"
- ],
- icon : [
- "icon-color",
- "icon-image",
- "icon-opacity",
- "__icon-size"
- ],
- text : [
- "__text-anchor",
- "text-color",
- "text-field",
- "__text-font",
- "__text-opacity",
- "__text-size"
- ]
-};
+ // ################################################################### //
+ // ########################## init methods ########################### //
+ // ################################################################### //
+ /**
+ * Initialize component
+ * (called by constructor)
+ *
+ * @private
+ */
+ _initialize () {
+ // unique editor id (optional!)
+ this.id = this.options.id || null;
+
+ if (!this.options.target) {
+ // cf. add()
+ }
-// ################################################################### //
-// ########################## init methods ########################### //
-// ################################################################### //
+ // permet d'avoir un identifiant de position dans la liste des layers
+ if (!this.options.position) {
+ this.options.position = 0;
+ }
-/**
- * Initialize component
- * (called by constructor)
- *
- * @private
- */
-Legend.prototype._initialize = function () {
- // unique editor id (optional!)
- this.id = this.options.id || null;
+ if (!this.options.obj) {
+ // choix d'avoir un objet vide pour une edition...
+ this.options.obj = {
+ title : "vide...",
+ editable : true,
+ paint : {
+ "fill-color" : "#FFFFFF"
+ }
+ };
+ }
- if (!this.options.target) {
- // cf. add()
- }
+ // la legende est elle editable ?
+ // le tag 'editable' est à placer dans le fichier de style (dans le layer)...
+ var _editable = this.options.obj.editable;
+ this.editable = (typeof _editable !== "undefined") ? _editable : false;
+
+ // liste des caractéristiques de la legende par defaut
+ this.legendRender = {
+ type : "fill",
+ values : {
+ width : 1,
+ stroke : "#FFFFFF",
+ color : "#000000",
+ opacity : 1
+ }
+ };
- // permet d'avoir un identifiant de position dans la liste des layers
- if (!this.options.position) {
- this.options.position = 0;
- }
+ // DOM : pointer
+ this.container = null;
+ this.rendercontainer = null;
+ this.toolscontainer = null;
+
+ // DOM : className or id
+ this.name = {
+ target : "GPEditorMapBoxLegendTarget",
+ container : "GPEditorMapBoxLegendContainer",
+ containerlegendrender : "GPEditorMapBoxLegendRenderContainer",
+ legendrender : "GPEditorMapBoxLegendRender",
+ legendeditable : "GPEditorMapBoxLegendEditable",
+ legendtitle : "GPEditorMapBoxLegendTitle",
+ containerlegendtools : "GPEditorMapBoxLegendToolsContainer"
+ };
- if (!this.options.obj) {
- // choix d'avoir un objet vide pour une edition...
- this.options.obj = {
- title : "vide...",
- editable : true,
- paint : {
- "fill-color" : "#FFFFFF"
- }
+ // DOM : Label menu Edition
+ this.labels = {
+ "line-color" : "Couleur du trait",
+ "line-width" : "Epaisseur du trait",
+ "line-opacity" : "Opacité du trait",
+ "fill-color" : "Couleur de remplissage",
+ "fill-opacity" : "Opacité du remplissage"
};
}
- // la legende est elle editable ?
- // le tag 'editable' est à placer dans le fichier de style (dans le layer)...
- var _editable = this.options.obj.editable;
- this.editable = (typeof _editable !== "undefined") ? _editable : false;
-
- // liste des caractéristiques de la legende par defaut
- this.legendRender = {
- type : "fill",
- values : {
- width : 1,
- stroke : "#FFFFFF",
- color : "#000000",
- opacity : 1
+ /**
+ * Graphical rendering of the component
+ * (called by constructor)
+ *
+ * @private
+ * @example
+ *
+ *
+ *
+ *
test circle editable...
+ *
+ *
...
+ *
- *
- *
- *
test circle editable...
- *
- *
...
- *
...
+ */
+ getToolsContainer () {
+ return this.toolscontainer;
}
- return this;
-};
-/**
- * Set display container or get
- *
- * @param {Boolean} display - show/hidden container or get status
- * @returns {Boolean} - true/false
- */
-Legend.prototype.display = function (display) {
- logger.trace("display()", display);
- if (typeof display !== "undefined") {
- this.container.style.display = (display) ? "flex" : "none";
+ /**
+ * Get container (DOM)
+ *
+ * @returns {DOMElement} DOM element
+ */
+ getContainer () {
+ return this.container;
}
- return (this.container.style.display === "flex");
-};
-/**
- * Is editable
- *
- * @returns {Boolean} - true/false
- */
-Legend.prototype.isEditable = function () {
- return this.editable;
-};
+ // ################################################################### //
+ // ####################### handlers events to dom #################### //
+ // ################################################################### //
+ /**
+ * this method is called by event '' on '' tag form...
+ *
+ * 'e' contains the option object into 'e.target.data' !
+ * 'e' contains the id editor into 'e.target.editorID' !
+ *
+ * @param {Object} e - HTMLElement
+ * @private
+ * @fires Legend#editor:legend:onclickedition
+ */
+ onEditionLegendMapBox (e) {
+ logger.trace("onEditionLegendMapBox", e);
+ e.editorID = this.id;
+ e.data = this.options;
+ EventBus.dispatch(EventEditor.legend.onclickedition, e);
+ }
-/**
- * Get container Legend Render (DOM)
- *
- * @returns {DOMElement} DOM element
- * @see Layer.prototype.slotLegend()
- * @example
- *
- */
-Legend.prototype.getRenderContainer = function () {
- return this.rendercontainer;
-};
+ /**
+ * this method is called by event '' on '' tag form...
+ *
+ * 'e' contains the option object into 'e.target.data' !
+ * 'e' contains the id editor into 'e.target.editorID' !
+ *
+ * @param {Object} e - HTMLElement
+ * @private
+ * @fires Legend#editor:legend:onchangevalue
+ */
+ onChangeValueLegendMapBox (e) {
+ logger.trace("onChangeValueLegendMapBox", e);
+ e.editorID = this.id;
+ e.data = this.options;
+ EventBus.dispatch(EventEditor.legend.onchangevalue, e);
+ }
-/**
- * Get container Legend Tools (DOM)
- *
- * @returns {DOMElement} DOM element
- * @see Layer.prototype.slotLegend()
- * @example
- * ...
- */
-Legend.prototype.getToolsContainer = function () {
- return this.toolscontainer;
};
-/**
- * Get container (DOM)
- *
- * @returns {DOMElement} DOM element
- */
-Legend.prototype.getContainer = function () {
- return this.container;
-};
+;
// ################################################################### //
-// ####################### handlers events to dom #################### //
+// ########################## CONSTANTES ############################# //
// ################################################################### //
/**
- * this method is called by event '' on '' tag form...
- *
- * 'e' contains the option object into 'e.target.data' !
- * 'e' contains the id editor into 'e.target.editorID' !
- *
- * @param {Object} e - HTMLElement
- * @private
- * @fires Legend#editor:legend:onclickedition
+ * List of supported properties
*/
-Legend.prototype.onEditionLegendMapBox = function (e) {
- logger.trace("onEditionLegendMapBox", e);
- e.editorID = this.id;
- e.data = this.options;
- EventBus.dispatch(EventEditor.legend.onclickedition, e);
+Legend.PROPERTIES = {
+ line : [
+ "line-color",
+ "line-dasharray",
+ "line-opacity",
+ "line-width"
+ ],
+ fill : [
+ "fill-color",
+ "fill-opacity",
+ "fill-outline-color",
+ "fill-pattern"
+ ],
+ background : [
+ "background-color",
+ "background-opacity",
+ "background-pattern"
+ ],
+ circle : [
+ "circle-color",
+ "circle-opacity",
+ "circle-stroke-color",
+ "circle-stroke-opacity",
+ "circle-stroke-width"
+ ],
+ icon : [
+ "icon-color",
+ "icon-image",
+ "icon-opacity",
+ "__icon-size"
+ ],
+ text : [
+ "__text-anchor",
+ "text-color",
+ "text-field",
+ "__text-font",
+ "__text-opacity",
+ "__text-size"
+ ]
};
-/**
- * this method is called by event '' on '' tag form...
- *
- * 'e' contains the option object into 'e.target.data' !
- * 'e' contains the id editor into 'e.target.editorID' !
- *
- * @param {Object} e - HTMLElement
- * @private
- * @fires Legend#editor:legend:onchangevalue
- */
-Legend.prototype.onChangeValueLegendMapBox = function (e) {
- logger.trace("onChangeValueLegendMapBox", e);
- e.editorID = this.id;
- e.data = this.options;
- EventBus.dispatch(EventEditor.legend.onchangevalue, e);
-};
export default Legend;
diff --git a/src/OpenLayers/Controls/Editor/Search.js b/src/OpenLayers/Controls/Editor/Search.js
index ff5e18026..5eb597463 100644
--- a/src/OpenLayers/Controls/Editor/Search.js
+++ b/src/OpenLayers/Controls/Editor/Search.js
@@ -27,197 +27,191 @@ var logger = Logger.getLogger("editor-search");
* Search.display(true);
* Search.getContainer();
*/
-function Search (options) {
- logger.trace("[constructor] Search", options);
-
- // options
- this.options = options || {
- // default...
- target : null,
- tools : null,
- title : null,
- obj : null
- };
-
- if (!(this instanceof Search)) {
- throw new TypeError("ERROR CLASS_CONSTRUCTOR");
- }
-
- this._initialize();
-
- this._initContainer();
-};
-
-/**
- * Constructor (alias)
- *
- * @private
- */
-Search.prototype.constructor = Search;
-
-/**
- * Initialize component
- * (called by constructor)
- *
- * @private
- */
-Search.prototype._initialize = function () {
- // unique editor id (optional!)
- this.id = this.options.id || null;
-
- if (!this.options.target) {
- // cf. add()
- }
+class Search {
+
+ constructor (options) {
+ logger.trace("[constructor] Search", options);
+
+ // options
+ this.options = options || {
+ // default...
+ target : null,
+ tools : null,
+ title : null,
+ obj : null
+ };
+
+ if (!(this instanceof Search)) {
+ throw new TypeError("ERROR CLASS_CONSTRUCTOR");
+ }
- var _toolsDefault = {};
+ this._initialize();
- if (!this.options.tools) {
- this.options.tools = _toolsDefault;
+ this._initContainer();
}
- Utils.mergeParams(this.options.tools, _toolsDefault, false);
+ /**
+ * Initialize component
+ * (called by constructor)
+ *
+ * @private
+ */
+ _initialize () {
+ // unique editor id (optional!)
+ this.id = this.options.id || null;
+
+ if (!this.options.target) {
+ // cf. add()
+ }
- if (!this.options.obj) {
- // choix d'avoir un objet vide pour une edition futur...
- this.options.obj = {};
- }
+ var _toolsDefault = {};
- if (!this.options.title) {
- this.options.title = "Recherche de couches :";
- }
- this.container = null;
-
- // DOM : className or id
- this.name = {
- target : "GPEditorMapBoxSearchTarget",
- container : "GPEditorMapBoxSearchContainer"
- // TODO ...
- };
-};
+ if (!this.options.tools) {
+ this.options.tools = _toolsDefault;
+ }
-/**
- * Graphical rendering of the component
- * (called by constructor)
- *
- * @private
- * @example
- *
- * // ...
- *
- */
-Search.prototype._initContainer = function () {
- // contexte
- // var self = this;
+ Utils.mergeParams(this.options.tools, _toolsDefault, false);
- var _search = JSON.parse(JSON.stringify(this.options.obj)); // on manipule une copie !
+ if (!this.options.obj) {
+ // choix d'avoir un objet vide pour une edition futur...
+ this.options.obj = {};
+ }
- if (_search.layers) {
- if (_search.layers.length === 0) {
- logger.info("tag 'layers' is empty !");
+ if (!this.options.title) {
+ this.options.title = "Recherche de couches :";
}
+ this.container = null;
+
+ // DOM : className or id
+ this.name = {
+ target : "GPEditorMapBoxSearchTarget",
+ container : "GPEditorMapBoxSearchContainer"
+ // TODO ...
+ };
}
- var div = document.createElement("div");
- div.className = this.name.container;
-
- // TODO...
- // outil de recherche des couches mapbox.
- // 2 modes de recherches : exact ou par autocompletion
- // affichage des resultats directement dans la liste des couches
- // la recherche porte sur les champs suiavnts (options):
- // * id (par defaut)
- // * source-layer (par defaut)
- // * type (ex. Symbol)
- // * field (ex. HOPITAL_PONC) > recherche dans le champs filtre
-
- // main container
- this.container = div;
-};
+ /**
+ * Graphical rendering of the component
+ * (called by constructor)
+ *
+ * @private
+ * @example
+ *
+ * // ...
+ *
+ */
+ _initContainer () {
+ // contexte
+ // var self = this;
+ var _search = JSON.parse(JSON.stringify(this.options.obj)); // on manipule une copie !
+
+ if (_search.layers) {
+ if (_search.layers.length === 0) {
+ logger.info("tag 'layers' is empty !");
+ }
+ }
-// ################################################################### //
-// ##################### public methods ############################## //
-// ################################################################### //
+ var div = document.createElement("div");
+ div.className = this.name.container;
+
+ // TODO...
+ // outil de recherche des couches mapbox.
+ // 2 modes de recherches : exact ou par autocompletion
+ // affichage des resultats directement dans la liste des couches
+ // la recherche porte sur les champs suiavnts (options):
+ // * id (par defaut)
+ // * source-layer (par defaut)
+ // * type (ex. Symbol)
+ // * field (ex. HOPITAL_PONC) > recherche dans le champs filtre
+ // main container
+ this.container = div;
+ }
-/**
- * Add element into target DOM
- * @returns {Object} - Search instance
- */
-Search.prototype.add = function () {
- if (!this.options.target) {
- if (!document.getElementById(this.name.target)) {
- var div = document.createElement("div");
- div.id = this.name.target;
- var node = document.documentElement ||
- document.getElementsByTagName("body")[0] ||
- document.getElementsByTagName("head")[0];
- node.appendChild(div);
+ // ################################################################### //
+ // ##################### public methods ############################## //
+ // ################################################################### //
+ /**
+ * Add element into target DOM
+ * @returns {Object} - Search instance
+ */
+ add () {
+ if (!this.options.target) {
+ if (!document.getElementById(this.name.target)) {
+ var div = document.createElement("div");
+ div.id = this.name.target;
+ var node = document.documentElement ||
+ document.getElementsByTagName("body")[0] ||
+ document.getElementsByTagName("head")[0];
+ node.appendChild(div);
+ }
+ this.options.target = document.getElementById(this.name.target);
+ }
+ if (this.container) {
+ this.options.target.appendChild(this.container);
}
- this.options.target = document.getElementById(this.name.target);
+ return this;
}
- if (this.container) {
- this.options.target.appendChild(this.container);
+
+ /**
+ * Set display container or get
+ *
+ * @param {Boolean} display - show/hidden container or get status
+ * @returns {Boolean} - true/false
+ */
+ display (display) {
+ logger.trace("display()", display);
+ if (typeof display !== "undefined") {
+ this.container.style.display = (display) ? "flex" : "none";
+ }
+ return (this.container.style.display === "flex");
}
- return this;
-};
-/**
- * Set display container or get
- *
- * @param {Boolean} display - show/hidden container or get status
- * @returns {Boolean} - true/false
- */
-Search.prototype.display = function (display) {
- logger.trace("display()", display);
- if (typeof display !== "undefined") {
- this.container.style.display = (display) ? "flex" : "none";
+ /**
+ * Get container (DOM)
+ *
+ * @returns {DOMElement} DOM element
+ */
+ getContainer () {
+ return this.container;
}
- return (this.container.style.display === "flex");
-};
-/**
- * Get container (DOM)
- *
- * @returns {DOMElement} DOM element
- */
-Search.prototype.getContainer = function () {
- return this.container;
-};
-// ################################################################### //
-// ####################### handlers events to dom #################### //
-// ################################################################### //
+ // ################################################################### //
+ // ####################### handlers events to dom #################### //
+ // ################################################################### //
+ /**
+ * this method is called by event '' on '' tag form...
+ *
+ * 'e' contains the option object into 'e.target.data' !
+ * 'e' contains the id editor into 'e.target.editorID' !
+ *
+ * @param {Object} e - HTMLElement
+ * @private
+ * @fires Search#editor:search:onsubmit
+ */
+ onSubmitSearchLayersMapBox (e) {
+ logger.trace("onSubmitSearchLayersMapBox", e);
+ e.editorID = this.id;
+ e.data = this.options;
+ EventBus.dispatch(EventEditor.search.onsubmit, e);
+ }
-/**
- * this method is called by event '' on '' tag form...
- *
- * 'e' contains the option object into 'e.target.data' !
- * 'e' contains the id editor into 'e.target.editorID' !
- *
- * @param {Object} e - HTMLElement
- * @private
- * @fires Search#editor:search:onsubmit
- */
-Search.prototype.onSubmitSearchLayersMapBox = function (e) {
- logger.trace("onSubmitSearchLayersMapBox", e);
- e.editorID = this.id;
- e.data = this.options;
- EventBus.dispatch(EventEditor.search.onsubmit, e);
-};
+ /**
+ * this method is called by event '' on '' tag form...
+ *
+ * 'e' contains the option object into 'e.target.data' !
+ * 'e' contains the id editor into 'e.target.editorID' !
+ *
+ * @param {Object} e - HTMLElement
+ * @private
+ * @fires Search#editor:search:onautocomplete
+ */
+ onAutocompleteSearchLayersMapBox (e) {
+ logger.trace("onAutocompleteSearchLayersMapBox", e);
+ e.editorID = this.id;
+ e.data = this.options;
+ EventBus.dispatch(EventEditor.search.onautocomplete, e);
+ }
-/**
- * this method is called by event '' on '' tag form...
- *
- * 'e' contains the option object into 'e.target.data' !
- * 'e' contains the id editor into 'e.target.editorID' !
- *
- * @param {Object} e - HTMLElement
- * @private
- * @fires Search#editor:search:onautocomplete
- */
-Search.prototype.onAutocompleteSearchLayersMapBox = function (e) {
- logger.trace("onAutocompleteSearchLayersMapBox", e);
- e.editorID = this.id;
- e.data = this.options;
- EventBus.dispatch(EventEditor.search.onautocomplete, e);
};
export default Search;
diff --git a/src/OpenLayers/Controls/Editor/Style.js b/src/OpenLayers/Controls/Editor/Style.js
index 22fa776f3..5a8ecd55a 100644
--- a/src/OpenLayers/Controls/Editor/Style.js
+++ b/src/OpenLayers/Controls/Editor/Style.js
@@ -31,434 +31,428 @@ var logger = Logger.getLogger("editor-style");
* style.display(true);
* style.getContainer();
*/
-function Style (options) {
- logger.trace("[constructor] Style", options);
-
- // options
- this.options = options || {
- // default...
- target : null,
- position : 0,
- tools : null,
- title : null,
- obj : null
- };
-
- if (!(this instanceof Style)) {
- throw new TypeError("ERROR CLASS_CONSTRUCTOR");
- }
+class Style {
+
+ constructor (options) {
+ logger.trace("[constructor] Style", options);
+
+ // options
+ this.options = options || {
+ // default...
+ target : null,
+ position : 0,
+ tools : null,
+ title : null,
+ obj : null
+ };
- this._initialize();
+ if (!(this instanceof Style)) {
+ throw new TypeError("ERROR CLASS_CONSTRUCTOR");
+ }
- this._initContainer();
-};
+ this._initialize();
-/**
- * Constructor (alias)
- *
- * @private
- */
-Style.prototype.constructor = Style;
+ this._initContainer();
+ }
-/**
- * Initialize component
- * (called by constructor)
- *
- * @private
- */
-Style.prototype._initialize = function () {
- // unique editor id (optional!)
- this.id = this.options.id || null;
+ /**
+ * Initialize component
+ * (called by constructor)
+ *
+ * @private
+ */
+ _initialize () {
+ // unique editor id (optional!)
+ this.id = this.options.id || null;
+
+ if (!this.options.target) {
+ // cf. add()
+ }
- if (!this.options.target) {
- // cf. add()
- }
+ if (!this.options.position) {
+ this.options.position = 0;
+ }
- if (!this.options.position) {
- this.options.position = 0;
- }
+ var _toolsDefault = {
+ scale : true,
+ edition : false
+ };
- var _toolsDefault = {
- scale : true,
- edition : false
- };
+ if (!this.options.tools) {
+ this.options.tools = _toolsDefault;
+ }
- if (!this.options.tools) {
- this.options.tools = _toolsDefault;
- }
+ Utils.mergeParams(this.options.tools, _toolsDefault, false);
- Utils.mergeParams(this.options.tools, _toolsDefault, false);
+ if (!this.options.obj) {
+ // choix d'avoir un objet vide pour une edition futur...
+ this.options.obj = {
+ paint : {},
+ layout : {}
+ };
+ }
+
+ if (!this.options.title) {
+ this.options.title = "JSON Styles :";
+ }
- if (!this.options.obj) {
- // choix d'avoir un objet vide pour une edition futur...
- this.options.obj = {
- paint : {},
- layout : {}
+ this.container = null;
+
+ // DOM : className or id
+ this.name = {
+ target : "GPEditorMapBoxStyleTarget",
+ container : "GPEditorMapBoxStyleContainer",
+ containerjson : "GPEditorMapBoxStyleJsonContainer",
+ jsonlabel : "GPEditorMapBoxStyleJsonTitle",
+ jsondisplay : "GPEditorMapBoxStyleJsonDisplay",
+ containertoolsscale : "GPEditorMapBoxStyleToolsScaleContainer",
+ scaletitle : "GPEditorMapBoxStyleScaleTitle",
+ containertoolsminscale : "GPEditorMapBoxStyleToolsScaleMinContainer",
+ scalelabelmin : "GPEditorMapBoxStyleScaleLabelMin",
+ scaleinputmin : "GPEditorMapBoxStyleScaleInputMin",
+ containertoolsmaxscale : "GPEditorMapBoxStyleToolsScaleMaxContainer",
+ scalelabelmax : "GPEditorMapBoxStyleScaleLabelMax",
+ scaleinputmax : "GPEditorMapBoxStyleScaleInputMax",
+ containertoolsedit : "GPEditorMapBoxStyleToolsEditionContainer"
};
}
- if (!this.options.title) {
- this.options.title = "JSON Styles :";
- }
+ /**
+ * Graphical rendering of the component
+ * ie. this.container
+ * (called by constructor)
+ *
+ * @private
+ * @example
+ *
+ *
+ *
+ *
...
+ *
+ *
+ *
+ *
- *
- *
- *
...
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *