Merge pull request #1129 from AlitaBernachot/icon-edit-code-in-sandbo…

…x-vite Icon edit code in sandbox
openlayers · Oct 4, 2024 · 398ed48 · 398ed48
2 parents 9a5997c + f44a4b2
commit 398ed48
Show file tree

Hide file tree

Showing 54 changed files with 1,286 additions and 721 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## v 2.22.0
+
+* Changes
+  * Port to CesiumJS 1.122.
+  * Allow to live edit examples.
+
 ## v 2.21.0
 
 * Changes

diff --git a/examples/3dtiles.html b/examples/3dtiles.html
@@ -1,15 +1,25 @@
-<?xml version='1.0' encoding='UTF-8'?>
 <!DOCTYPE HTML>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="robots" content="index, all" />
-    <title>olcesium 3d tiles example</title>
+    <title>Ol-Cesium | 3d tiles example</title>
     <link rel="stylesheet" href="../node_modules/ol/ol.css" type="text/css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" crossorigin="anonymous">
   </head>
   <body>
-    <div id="map" style="width:600px;height:400px;"></div>
-    <input id="enable" type="button" value="Enable/disable" />
+    <div style="text-align: right;">
+      <button id="sandbox-button"><i class="fab fa-codepen fa-lg"></i> Edit in sandbox</button>
+      <form method="POST" id="sandbox-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
+        <input id="sandbox-params" type="hidden" name="parameters">
+      </form>
+    </div>
+    <div id="example-html-source">
+      <div>
+        <div class="clear-map-sandbox" id="mapCesium" style="width:600px;height:400px;float:left;"></div>
+      </div>
+      <input id="enable" type="button" value="Enable/disable" />
+    </div>
     <script src="./inject_ol_cesium.js"></script>
     <script type="module" src="./3dtiles.js"></script>
   </body>

diff --git a/examples/3dtiles.js b/examples/3dtiles.js
@@ -5,9 +5,9 @@ import {defaults as olControlDefaults} from 'ol/control.js';
 import olSourceOSM from 'ol/source/OSM.js';
 import olLayerTile from 'ol/layer/Tile.js';
 import olMap from 'ol/Map.js';
-import {OLCS_ION_TOKEN} from './_common.js';
 
-Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN;
+const Cesium = window.Cesium;
+
 const ol2d = new olMap({
   layers: [
     new olLayerTile({
@@ -39,3 +39,8 @@ document.getElementById('enable').addEventListener('click', () => ol3d.setEnable
 scene.camera.flyTo({
   destination: Cesium.Cartesian3.fromDegrees(6.54254, 46.50802, 1000.0)
 });
+
+//##REMOVE## Keep this tag, split code here for code sandbox
+
+import {initCodeSandbox} from './_code-sandbox.js';
+initCodeSandbox('rawjs/3dtiles.js', 'rawjs/_proj21781.js');
diff --git a/examples/_code-sandbox.js b/examples/_code-sandbox.js
@@ -0,0 +1,178 @@
+const lzScript = document.createElement('script');
+lzScript.src = 'https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js';
+document.head.appendChild(lzScript);
+
+function compress(json) {
+  return window.LZString.compressToBase64(JSON.stringify(json))
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+      .replace(/=+$/, '');
+}
+
+export async function initCodeSandbox(indexJsPath, ...filesPathes) {
+  const response = await fetch(indexJsPath);
+  const txtData = await response.text();
+  const indexJsContent = txtData.split('//##REMOVE##')[0];
+  const additionalJsFiles = {};
+  const resourcesFiles = filesPathes
+      .filter(path => path.indexOf('data/') === 0)
+      // eslint-disable-next-line arrow-body-style
+      .map(path => ({
+        [path]: {
+          'isBinary': true,
+          content: `https://openlayers.org/ol-cesium/examples/${path}`
+        }
+      }));
+  const jsFiles = filesPathes.filter(path => !path.startsWith('data/'));
+
+  for (const filePath of jsFiles) {
+    const responseFile = await fetch(filePath);
+    const txtDataFile = await responseFile.text();
+
+    additionalJsFiles[filePath.replace('./', '').replace('rawjs', '')] = {content: txtDataFile};
+  }
+
+  initCodeSandboxButton({indexJsContent, additionalJsFiles, resourcesFiles});
+}
+
+function initCodeSandboxButton(options) {
+  const {indexJsContent, additionalJsFiles, resourcesFiles} = options;
+
+  let indexHtmlContent = '';
+  const button = document.getElementById('sandbox-button');
+  const form = document.querySelector('#sandbox-form');
+
+  if (!button || !form) {
+    return;
+  }
+
+  const divExampleCodeSource = document.createElement('div');
+  divExampleCodeSource.innerHTML = document.getElementById('example-html-source').innerHTML;
+  divExampleCodeSource.querySelectorAll('.clear-map-sandbox').forEach(map => map.innerHTML = '');
+  indexHtmlContent = divExampleCodeSource.innerHTML;
+
+  const indexHtml = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ol-Cesium example in sandbox</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="node_modules/ol/ol.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <script src="https://cesium.com/downloads/cesiumjs/releases/1.122/Build/Cesium/Cesium.js"></script>
+    <style>
+      .ol-popup {
+        position: absolute;
+        background-color: white;
+        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+        padding: 15px;
+        border-radius: 10px;
+        border: 1px solid #cccccc;
+        bottom: 12px;
+        left: -50px;
+        min-width: 280px;
+      }
+      .ol-popup:after, .ol-popup:before {
+        top: 100%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+      .ol-popup:after {
+        border-top-color: white;
+        border-width: 10px;
+        left: 48px;
+        margin-left: -10px;
+      }
+      .ol-popup:before {
+        border-top-color: #cccccc;
+        border-width: 11px;
+        left: 48px;
+        margin-left: -11px;
+      }
+      .ol-popup-closer {
+        text-decoration: none;
+        position: absolute;
+        top: 2px;
+        right: 8px;
+      }
+      .ol-popup-closer:after {
+        content: "✖";
+      }
+      .popover-content {
+        min-width: 180px;
+      }
+      code {
+        padding: 2px 4px;
+        font-size: 90%;
+        color: #c7254e;
+        background-color: #f9f2f4;
+        border-radius: 4px;
+      }
+    </style>
+  </head>
+  <body>
+  ${indexHtmlContent}
+  </body>
+  <script type="module" src="/index.js"></script>  
+  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+</html>`;
+  const parameters = {
+    template: 'parcel',
+    files: {
+      'package.json': {
+        content: {
+          'source': 'index.html',
+          'main': 'index.html',
+          'scripts': {
+            'build': 'vite build',
+            'start': 'npm run build && serve dist',
+          },
+          'devDependencies': {
+            'serve': '14.2.3',
+            'vite': '^3.2.3',
+            '@babel/core': '^7.24.4',
+            '@babel/plugin-proposal-class-properties': '^7.18.6'
+          },
+          'dependencies': {
+            'olcs': '2.20.0',
+            'proj4': '2.11.0',
+            'cesium': '1.122.0',
+            'ol': '10.1.0'
+          }
+        },
+      },
+      '.babelrc': {
+        content: '{ "plugins": ["@babel/plugin-proposal-class-properties"] }'
+      },
+      'index.js': {
+        content: indexJsContent,
+      },
+      'index.html': {
+        content: indexHtml
+      },
+      ...resourcesFiles.reduce((acc, curr) => {
+        const key = Object.keys(curr)[0]; // Récupérer la clé de l'objet
+        acc[key] = curr[key]; // Ajouter la propriété à l'objet accumulé
+        return acc;
+      }, {}),
+      ...additionalJsFiles
+    }
+  };
+
+  button.onclick = function(event) {
+    event.preventDefault();
+    form.parameters.value = compress(parameters);
+    form.submit();
+  };
+}
+
+// dans npm prepare : extraire les versions à utiliser et faire un fichier json avec ces versions
+// Ce fichier json doit etre lu, faire un fetch de ce fichier
+// ce fichier ne peut pas etre commit
+// à rajouter dans gitinore
diff --git a/examples/_common.js b/examples/_common.js
diff --git a/examples/buildings.html b/examples/buildings.html
@@ -1,18 +1,32 @@
-<?xml version='1.0' encoding='UTF-8'?>
 <!DOCTYPE HTML>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="robots" content="index, all" />
-    <title>olcesium buildings example</title>
+    <title>Ol-Cesium | Buildings example</title>
     <link rel="stylesheet" href="../node_modules/ol/ol.css" type="text/css"></link>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" crossorigin="anonymous">
   </head>
+
   <body>
-    <div id="map2d" style="width:600px;height:400px;float:left;"></div>
-    <div id="map3d" style="width:600px;height:400px;float:left;position:relative;"></div>
-    <div>A building may be highlighted by clicking it on the OpenLayers map.
-      <br/>It gets automatically selected in Cesium.
-      <br/>If you see flickering in Cesium, please check your graphic card drivers.</div>
-      <script src="./inject_ol_cesium.js"></script>
-      <script type="module" src="./buildings.js"></script>  </body>
+    <div style="text-align: right;">
+      <button id="sandbox-button"><i class="fab fa-codepen fa-lg"></i> Edit in sandbox</button>
+      <form method="POST" id="sandbox-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
+        <input id="sandbox-params" type="hidden" name="parameters">
+      </form>
+    </div>
+
+    <div id="example-html-source">
+      <div class="clear-map-sandbox" id="map2d" style="width:600px;height:400px;float:left;"></div>
+      <div class="clear-map-sandbox" id="mapCesium" style="width:600px;height:400px;float:left;position:relative;"></div>
+      <div>
+        A building may be highlighted by clicking it on the OpenLayers map.
+        <br/>It gets automatically selected in Cesium.
+        <br/>If you see flickering in Cesium, please check your graphic card drivers.
+      </div>
+    </div>
+
+    <script src="./inject_ol_cesium.js"></script>
+    <script type="module" src="./buildings.js"></script>
+  </body>
 </html>
diff --git a/examples/buildings.js b/examples/buildings.js
@@ -47,7 +47,7 @@ const map = new olMap({
 vector.set('olcs_shadows', true);
 
 
-const ol3d = new OLCesium({map, target: 'map3d'});
+const ol3d = new OLCesium({map, target: 'mapCesium'});
 ol3d.setEnabled(true);
 
 // Be aware that enabling the following properties can impact performance
@@ -89,3 +89,8 @@ map.on('click', (e) => {
     selectedFeature.setStyle(selectionStyle);
   }
 });
+
+//##REMOVE## Keep this tag, split code here for code sandbox
+
+import {initCodeSandbox} from './_code-sandbox.js';
+initCodeSandbox('rawjs/buildings.js', 'data/geojson/buildings.geojson');
diff --git a/examples/customProj.html b/examples/customProj.html
@@ -1,16 +1,28 @@
-<?xml version='1.0' encoding='UTF-8'?>
-<!DOCTYPE HTML>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="robots" content="index, all" />
-    <title>Custom projection example</title>
+    <title>Ol-Cesium | Custom projection example</title>
     <link rel="stylesheet" href="../node_modules/ol/ol.css" type="text/css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" crossorigin="anonymous">
   </head>
+
   <body>
-    <div id="map" style="width:600px;height:400px;"></div>
-    <input id="enable" type="button" value="Enable/disable" />
+    <div style="text-align: right;">
+      <button id="sandbox-button"><i class="fab fa-codepen fa-lg"></i> Edit in sandbox</button>
+      <form method="POST" id="sandbox-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
+        <input id="sandbox-params" type="hidden" name="parameters">
+      </form>
+    </div>
+
+    <div id="example-html-source">
+      <div class="clear-map-sandbox" id="mapCesium" style="width:600px;height:400px;"></div>
+      <input id="enable" type="button" value="Enable/disable" />
+    </div>
 
     <script src="./inject_ol_cesium.js"></script>
-    <script type="module" src="./customProj.js"></script>  </body>
+    <script type="module" src="./customProj.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js"></script>
+  </body>
 </html>
diff --git a/examples/customProj.js b/examples/customProj.js
@@ -7,7 +7,6 @@ import olLayerTile from 'ol/layer/Tile.js';
 import olMap from 'ol/Map.js';
 import {get as getProjection} from 'ol/proj.js';
 import './_proj21781.js';
-import {OLCS_ION_TOKEN} from './_common.js';
 
 const customProjSource = new olSourceImageWMS({
   attributions: '© <a href="http://www.geo.admin.ch/internet/geoportal/' +
@@ -20,7 +19,7 @@ const customProjSource = new olSourceImageWMS({
 
 customProjSource.set('olcs_projection', getProjection('EPSG:3857'));
 
-Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN;
+const Cesium = window.Cesium;
 const ol2d = new olMap({
   layers: [
     new olLayerTile({
@@ -30,7 +29,7 @@ const ol2d = new olMap({
       source: customProjSource
     })
   ],
-  target: 'map',
+  target: 'mapCesium',
   view: new olView({
     center: [860434.6266531206, 6029479.0044273855],
     zoom: 6
@@ -43,8 +42,12 @@ const ol3d = new OLCesium({
     return Cesium.JulianDate.now();
   }
 });
-const scene = ol3d.getCesiumScene();
-Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp);
+ol3d.getCesiumScene();
 ol3d.setEnabled(true);
 
 document.getElementById('enable').addEventListener('click', () => ol3d.setEnabled(!ol3d.getEnabled()));
+
+//##REMOVE## Keep this tag, split code here for code sandbox
+
+import {initCodeSandbox} from './_code-sandbox.js';
+initCodeSandbox('rawjs/customProj.js', 'rawjs/_proj21781.js');