From: Mathieu Baudier Date: Wed, 30 Aug 2023 06:16:21 +0000 (+0200) Subject: Improve JavaScript project structure X-Git-Tag: v2.3.16~51 X-Git-Url: https://git.argeo.org/?p=gpl%2Fargeo-suite.git;a=commitdiff_plain;h=78449dce988dbc690234d0508c6fd609feabe45a Improve JavaScript project structure --- diff --git a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/MapPart.js b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/MapPart.js new file mode 100644 index 0000000..fa4ba5c --- /dev/null +++ b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/MapPart.js @@ -0,0 +1,10 @@ +export default class MapPart { + + setZoom(zoom) { + throw new Error("Abstract method"); + } + + setCenter(lng, lat) { + throw new Error("Abstract method"); + } +} diff --git a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js new file mode 100644 index 0000000..df7dd96 --- /dev/null +++ b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js @@ -0,0 +1,31 @@ +import Map from 'ol/Map.js'; +import OSM from 'ol/source/OSM.js'; +import TileLayer from 'ol/layer/Tile.js'; +import View from 'ol/View.js'; +import { fromLonLat, toLonLat } from 'ol/proj.js'; + +import MapPart from './MapPart.js'; + +export default class OpenLayersMapPart extends MapPart { + #map; + // Constructor + constructor() { + super(); + this.#map = new Map({ + layers: [ + new TileLayer({ + source: new OSM(), + }), + ], + target: 'map', + }); + } + + setZoom(zoom) { + this.#map.getView().setZoom(zoom); + } + + setCenter(lng, lat) { + this.#map.getView().setCenter(fromLonLat([lng, lat])); + } +} diff --git a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.js b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.js index 108c5da..38bde7e 100644 --- a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.js +++ b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.js @@ -1,29 +1,6 @@ -import Map from 'ol/Map.js'; -import OSM from 'ol/source/OSM.js'; -import TileLayer from 'ol/layer/Tile.js'; -import View from 'ol/View.js'; -import { fromLonLat, toLonLat } from 'ol/proj.js'; - -import 'ol/ol.css'; - -//window.map = new Map({ -// layers: [ -// new TileLayer({ -// source: new OSM(), -// }), -// ], -// target: 'mapTarget', -// view: new View({ -// center: [0, 0], -// zoom: 2, -// }), -//}); -//window.map.on('rendercomplete', e => { -// console.log('Render completed.'); -// onRenderComplete(); -//}); -//map.getView().setZoom(4); +import OpenLayersMapPart from './OpenLayersMapPart.js'; +// PSEUDO PACKAGE if (typeof globalThis.argeo === 'undefined') globalThis.argeo = {}; if (typeof globalThis.argeo.app === 'undefined') @@ -32,92 +9,7 @@ if (typeof globalThis.argeo.app.geo === 'undefined') globalThis.argeo.app.geo = {}; +globalThis.argeo.app.geo.OpenLayersMapPart = OpenLayersMapPart; -//window.argeo.app.geo.ArgeoMap = { -// map: new Map({ -// layers: [ -// new TileLayer({ -// source: new OSM(), -// }), -// ], -// target: 'map', -// }), -// -// setZoom: function(zoom) { -// this.map.getView().setZoom(zoom); -// }, -// -// setCenter: function(lng, lat) { -// this.map.getView().setCenter(fromLonLat([lng, lat])); -// }, -// -//}; - -export class ArgeoMap { - #map; - // Constructor - constructor() { - this.#map = new Map({ - layers: [ - new TileLayer({ - source: new OSM(), - }), - ], - target: 'map', - }); - } - - setZoom(zoom) { - this.#map.getView().setZoom(zoom); - } - - setCenter(lng, lat) { - this.#map.getView().setCenter(fromLonLat([lng, lat])); - } -} - -globalThis.argeo.app.geo.ArgeoMap = ArgeoMap; - -//globalThis.argeoMap = new ArgeoMap(); - -//window.argeoMap = Object.create(argeo.app.geo.ArgeoMap); -//window.argeoMap.map.on('rendercomplete', e => { -// console.log('Render completed.'); -// onRenderComplete(); -//}); - - -//function argeo_app_geo_Map() { -// console.log('Entered constructor'); -// this.map = new Map({ -// layers: [ -// new TileLayer({ -// source: new OSM(), -// }), -// ], -// target: 'map', -// view: new View({ -// center: [0, 0], -// zoom: 2, -// }), -// }); -// this.map.on('rendercomplete', e => { -// console.log('Render completed.'); -// onRenderComplete(); -// }); -// -// this.setCenter = function(lng, lat) { -// console.log('Center set '); -// //this.map.getView().setCenter(ol.proj.fromLonLat([lng, lat])); -// } -// -// this.setZoom = function(zoom) { -// this.map.getView().setZoom(zoom); -// } -//} -// -//window.argeoMap = new argeo_app_geo_Map(); -//argeoMap.setCenter(13.404954, 52.520008); -//function setCenter(lng, lat) { -// map.getView().setCenter(lng, lat); -//} \ No newline at end of file +// webpack specific +import 'ol/ol.css'; \ No newline at end of file diff --git a/org.argeo.app.geo/src/org/argeo/app/geo/ux/JsImplementation.java b/org.argeo.app.geo/src/org/argeo/app/geo/ux/JsImplementation.java new file mode 100644 index 0000000..3242d68 --- /dev/null +++ b/org.argeo.app.geo/src/org/argeo/app/geo/ux/JsImplementation.java @@ -0,0 +1,16 @@ +package org.argeo.app.geo.ux; + +/** Known JavaScript implementations for this package. */ +public enum JsImplementation { + OPENLAYERS_MAP_PART("globalThis.argeo.app.geo.OpenLayersMapPart"); + + private String jsClass; + + JsImplementation(String jsClass) { + this.jsClass = jsClass; + } + + public String getJsClass() { + return jsClass; + } +} diff --git a/org.argeo.app.geo/src/org/argeo/app/geo/ux/MapPart.java b/org.argeo.app.geo/src/org/argeo/app/geo/ux/MapPart.java index 7926263..d9536a3 100644 --- a/org.argeo.app.geo/src/org/argeo/app/geo/ux/MapPart.java +++ b/org.argeo.app.geo/src/org/argeo/app/geo/ux/MapPart.java @@ -1,5 +1,6 @@ package org.argeo.app.geo.ux; +/** An UX part displaying a map. */ public interface MapPart { enum Format { GEOJSON, GPX; diff --git a/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/MapUiProvider.java b/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/MapUiProvider.java index 2edd0f1..1396686 100644 --- a/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/MapUiProvider.java +++ b/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/MapUiProvider.java @@ -1,7 +1,6 @@ package org.argeo.app.geo.swt; import org.argeo.api.acr.Content; -import org.argeo.app.geo.swt.openlayers.OLMap; import org.argeo.cms.swt.acr.SwtUiProvider; import org.eclipse.swt.widgets.Composite; import org.eclipse.swt.widgets.Control; @@ -11,7 +10,7 @@ public class MapUiProvider implements SwtUiProvider { @Override public Control createUiPart(Composite parent, Content context) { - OLMap map = new OLMap(parent, 0); + SwtMapPart map = new SwtMapPart(parent, 0); // map.setCenter(13.404954, 52.520008); // Berlin map.setCenter(-74.00597, 40.71427); // NYC map.setZoom(6); diff --git a/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/SwtMapPart.java b/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/SwtMapPart.java new file mode 100644 index 0000000..f063e5a --- /dev/null +++ b/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/SwtMapPart.java @@ -0,0 +1,100 @@ +package org.argeo.app.geo.swt; + +import java.util.concurrent.CompletableFuture; + +import org.argeo.app.geo.ux.JsImplementation; +import org.argeo.app.geo.ux.MapPart; +import org.argeo.cms.swt.CmsSwtUtils; +import org.eclipse.swt.SWT; +import org.eclipse.swt.browser.Browser; +import org.eclipse.swt.browser.ProgressEvent; +import org.eclipse.swt.browser.ProgressListener; +import org.eclipse.swt.layout.GridData; +import org.eclipse.swt.widgets.Composite; + +public class SwtMapPart extends Composite implements MapPart { + static final long serialVersionUID = 2713128477504858552L; + private Browser browser; + + // private CompletableFuture renderCompleted = new + // CompletableFuture<>(); + private CompletableFuture pageLoaded = new CompletableFuture<>(); + + private String jsImplementation = JsImplementation.OPENLAYERS_MAP_PART.getJsClass(); + private String mapVar = "globalThis.argeoMap"; + + public SwtMapPart(Composite parent, int style) { + super(parent, style); + parent.setLayout(CmsSwtUtils.noSpaceGridLayout()); + setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true)); + setLayout(CmsSwtUtils.noSpaceGridLayout()); + browser = new Browser(this, SWT.BORDER); + browser.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true)); + // functions exposed to JavaScript +// new onRenderComplete(); + browser.setUrl("/pkg/org.argeo.app.geo.js/index.html"); + browser.addProgressListener(new ProgressListener() { + static final long serialVersionUID = 1L; + + @Override + public void completed(ProgressEvent event) { + + // create map + browser.execute(mapVar + " = new " + jsImplementation + "();"); + + // browser.execute("console.log(myInstance.myField)"); + pageLoaded.complete(true); + } + + @Override + public void changed(ProgressEvent event) { + } + }); + } + + @Override + public void addPoint(Double lng, Double lat) { + // TODO Auto-generated method stub + + } + + @Override + public void addUrlLayer(String layer, Format format) { + // TODO Auto-generated method stub + + } + + @Override + public void setZoom(int zoom) { + pageLoaded.thenAccept((b) -> { + browser.evaluate(mapVar + ".setZoom(" + zoom + ")"); + }); + } + + @Override + public void setCenter(Double lng, Double lat) { + pageLoaded.thenAccept((b) -> { + browser.evaluate(mapVar + ".setCenter(" + lng + ", " + lat + ")"); + }); + + } + +// private void setRenderCompleted() { +// renderCompleted.complete(true); +// } +// +// private class onRenderComplete extends BrowserFunction { +// +// onRenderComplete() { +// super(browser, onRenderComplete.class.getSimpleName()); +// } +// +// @Override +// public Object function(Object[] arguments) { +// setRenderCompleted(); +// System.out.println("Render complete (Java)"); +// return null; +// } +// +// } +} diff --git a/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/openlayers/OLMap.java b/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/openlayers/OLMap.java deleted file mode 100644 index 0b704e6..0000000 --- a/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/openlayers/OLMap.java +++ /dev/null @@ -1,98 +0,0 @@ -package org.argeo.app.geo.swt.openlayers; - -import java.util.concurrent.CompletableFuture; - -import org.argeo.app.geo.ux.MapPart; -import org.argeo.cms.swt.CmsSwtUtils; -import org.eclipse.swt.SWT; -import org.eclipse.swt.browser.Browser; -import org.eclipse.swt.browser.ProgressEvent; -import org.eclipse.swt.browser.ProgressListener; -import org.eclipse.swt.layout.GridData; -import org.eclipse.swt.widgets.Composite; - -public class OLMap extends Composite implements MapPart { - static final long serialVersionUID = 2713128477504858552L; - private Browser browser; - - // private CompletableFuture renderCompleted = new - // CompletableFuture<>(); - private CompletableFuture pageLoaded = new CompletableFuture<>(); - - private String mapVar = "globalThis.argeoMap"; - - public OLMap(Composite parent, int style) { - super(parent, style); - parent.setLayout(CmsSwtUtils.noSpaceGridLayout()); - setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true)); - setLayout(CmsSwtUtils.noSpaceGridLayout()); - browser = new Browser(this, SWT.BORDER); - browser.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true)); - // functions exposed to JavaScript -// new onRenderComplete(); - browser.setUrl("/pkg/org.argeo.app.geo.js/index.html"); - browser.addProgressListener(new ProgressListener() { - static final long serialVersionUID = 1L; - - @Override - public void completed(ProgressEvent event) { - - // create map - browser.execute(mapVar + " = new globalThis.argeo.app.geo.ArgeoMap();"); - - // browser.execute("console.log(myInstance.myField)"); - pageLoaded.complete(true); - } - - @Override - public void changed(ProgressEvent event) { - } - }); - } - - @Override - public void addPoint(Double lng, Double lat) { - // TODO Auto-generated method stub - - } - - @Override - public void addUrlLayer(String layer, Format format) { - // TODO Auto-generated method stub - - } - - @Override - public void setZoom(int zoom) { - pageLoaded.thenAccept((b) -> { - browser.evaluate(mapVar + ".setZoom(" + zoom + ")"); - }); - } - - @Override - public void setCenter(Double lng, Double lat) { - pageLoaded.thenAccept((b) -> { - browser.evaluate(mapVar + ".setCenter(" + lng + ", " + lat + ")"); - }); - - } - -// private void setRenderCompleted() { -// renderCompleted.complete(true); -// } -// -// private class onRenderComplete extends BrowserFunction { -// -// onRenderComplete() { -// super(browser, onRenderComplete.class.getSimpleName()); -// } -// -// @Override -// public Object function(Object[] arguments) { -// setRenderCompleted(); -// System.out.println("Render complete (Java)"); -// return null; -// } -// -// } -}