From 6fc96bfa3c487112dcf9388bbe06a8c26a4cf8f5 Mon Sep 17 00:00:00 2001 From: dcore94 Date: Wed, 24 Apr 2024 13:02:54 +0200 Subject: [PATCH 01/15] minor visual improvements --- ccp/js/executionformcontroller.js | 1 + ccp/js/inputwidgetcontroller.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/ccp/js/executionformcontroller.js b/ccp/js/executionformcontroller.js index 1c8cd1b..b4dd34d 100644 --- a/ccp/js/executionformcontroller.js +++ b/ccp/js/executionformcontroller.js @@ -58,6 +58,7 @@ class CCPExecutionForm extends HTMLElement{ + +
+ + + + ` + + // Init map + this.init() + + this.rootdoc.querySelector("div[name=maptoolbar]").addEventListener("click", ev=>{ + const type = ev.target.getAttribute("name") + if(type === "closebtn"){ + this.#widget.classList.add("d-none") + ev.preventDefault() + ev.stopPropagation() + }if(type === "selectbtn"){ + this.#widget.classList.add("d-none") + this.#format_dialog.style.display = "block" + this.#format_dialog.classList.add("show") + this.#index = this.value.length - 1 + const alltargets = this.#target = this.rootdoc.querySelectorAll("textarea") + for(let i=0; i < alltargets.length;i++){ + if(!alltargets.item(i).value[i]){ + this.#index = i + break; + } + } + this.#target = this.rootdoc.querySelectorAll("textarea").item(this.#index) + ev.preventDefault() + ev.stopPropagation() + }else if(["Circle", "Point", "Polygon"].indexOf(type) !== -1){ + ev.stopPropagation(); + ev.preventDefault(); + if(this.#draw != null && this.#draw.type === type) return; + if(this.#draw != null) this.#map.removeInteraction(this.#draw); + this.#draw = new ol.interaction.Draw({source: this.#source, type : type}) + this.#map.addInteraction(this.#draw) + }else if(type === "deletebtn"){ + this.undoAllDrawings() + ev.preventDefault() + ev.stopPropagation() + } + }) + + document.addEventListener("keydown", ev=>{ + if (ev.ctrlKey && ev.key === 'z') { + this.undoDrawing() + }else if(ev.key === "Escape"){ + this.stopDrawing() + } + }) + + this.#format_dialog = this.rootdoc.querySelector("div.modal[name=format]") + this.#format_dialog.addEventListener("click", ev => { + ev.stopPropagation() + ev.preventDefault() + const features = this.#source.getFeatures() + if( features.length && this.#index != null && this.#target != null){ + const name = ev.target.getAttribute("name") + var format + if(name === "wkt") { + format = new ol.format.WKT() + }else if(name === "geojson"){ + format = new ol.format.GeoJSON() + }else if(name === "gml"){ + format = new ol.format.GML() + } + const result = features.map(f=>{ + const geom = f.getGeometry().getType() === "Circle" ? ol.geom.Polygon.fromCircle(f.getGeometry(), 50) : f.getGeometry() + return format.writeGeometry(geom) + }).join("\n") + + this.#target.value = this.value[this.#index] = result + const newev = new Event("input", { bubbles : true}) + this.dispatchEvent(newev) + } + + this.#format_dialog.style.display = "none" + this.#format_dialog.classList.remove("show") + }) + + this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev => { + this.#widget.classList.toggle("d-none") + ev.preventDefault() + ev.stopPropagation() + }) + } + + init(){ + this.#widget = this.rootdoc.querySelector("div[name=map]") + this.#draw = null + this.#raster = new ol.layer.Tile({source: new ol.source.OSM()}); + this.#source = new ol.source.Vector({wrapX: false}); + this.#vector = new ol.layer.Vector({source: this.#source}); + + this.#map = new ol.Map({ + layers: [this.#raster, this.#vector], + target: this.rootdoc.querySelector("div[name=internalmap]"), + view: new ol.View({center: [0, 0], zoom: 4 }), + controls :[] + }) + } + + undoAllDrawings(){ + this.#source.clear() + } + + undoDrawing(){ + const features = this.#source.getFeatures() + if(features.length){ + this.#source.removeFeature(features[features.length-1]) + } + } + + stopDrawing(){ + if(this.#draw){ + this.#draw.abortDrawing() + this.#map.removeInteraction(this.#draw); + this.#draw = null + } + } + + content() { + if(!this.readonly && !this.querySelector("div[name=map]")) this.addToolContent(); + if (this.value.length <= 1) { + return ` + + ` + } + var out = + this.value.map((c, i) => { + return ` + + ` + }).join("\n") + return out + } +} +window.customElements.define('d4s-ccp-input-geo', CCPGeoInputWidgetController); diff --git a/ccp/js/inputwidgeteditorcontroller.js b/ccp/js/inputwidgeteditorcontroller.js index 6ecab23..9f16669 100644 --- a/ccp/js/inputwidgeteditorcontroller.js +++ b/ccp/js/inputwidgeteditorcontroller.js @@ -127,6 +127,7 @@ class CCPInputWidgetEditorController extends HTMLElement{ + -- 2.17.1 From 56949384855012414c234502f426a49ab6cfd1b5 Mon Sep 17 00:00:00 2001 From: dcore94 Date: Mon, 3 Jun 2024 16:27:55 +0200 Subject: [PATCH 05/15] fixed css rule --- ccp/js/inputwidgetcontroller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ccp/js/inputwidgetcontroller.js b/ccp/js/inputwidgetcontroller.js index 4acb64b..fcc678c 100644 --- a/ccp/js/inputwidgetcontroller.js +++ b/ccp/js/inputwidgetcontroller.js @@ -826,7 +826,7 @@ class CCPGeoInputWidgetController extends CCPBaseInputWidgetController {