@eodash/eodash 5.0.0-alpha.2.6 → 5.0.0-alpha.2.8

package/dist/client/{transition-DCePIwYR.js → transition-D3a4tiJv.js}

@@ -1,5 +1,5 @@
-import { p as m, aw as d, d as l, av as u, ab as b } from "./asWebComponent-CpQUVi2N.js";
-const j = m({
+import { p as f, ay as m, d, bb as l, ab as u } from "./asWebComponent-zuKR9I1w.js";
+const j = f({
   transition: {
     type: [Boolean, String, Object],
     default: "fade-transition",
@@ -15,17 +15,17 @@ const j = m({
     group: r,
     ...a
   } = o, {
-    component: i = r ? u : b,
+    component: i = r ? l : u,
     ...p
   } = typeof t == "object" ? t : {};
-  return d(i, l(typeof t == "string" ? {
+  return m(i, d(typeof t == "string" ? {
     name: n ? "" : t
   } : p, typeof t == "string" ? {} : Object.fromEntries(Object.entries({
     disabled: n,
     group: r
   }).filter((c) => {
-    let [y, f] = c;
-    return f !== void 0;
+    let [y, b] = c;
+    return b !== void 0;
   })), a), e);
 };
 export {

package/dist/node/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import{createLogger as P,defineConfig as C,searchForWorkspaceRoot as x,createServer as k,preview as S,build as F}from"vite";import{readFileSync as U,existsSync as u}from"fs";import t from"path";import{Command as E}from"commander";import{readFile as W,writeFile as I,rm as $,cp as N}from"fs/promises";import O from"@vitejs/plugin-vue";import T,{transformAssetUrls as A}from"vite-plugin-vuetify";const s=v(process.cwd()),b=new E("eodash"),H=JSON.parse(U(t.join(s,"package.json"),"utf-8"));b.version(H.version,"-v, --version","output the current version").option("--publicDir <path>","path to statically served assets folder").option("--no-publicDir","stop serving static assets").option("--outDir <path>","minified output folder").option("-e, --entryPoint <path>","file exporting `createEodash`").option("-w, --widgets <path>","folder that contains vue components as internal widgets").option("--cacheDir <path>","cache folder").option("-r, --runtime <path>","file exporting eodash client runtime config").option("-b, --base <path>","base public path").option("-p, --port <port>","serving  port").option("-o, --open","open default browser when the server starts").option("-c, --config <path>","path to eodash server and build configuration file").option("--host [IP address]","specify which IP addresses the server should listen on").option("-l, --lib","builds eodash as a web component library").option("--no-lib","builds eodash as an SPA").option("--no-host","do not expose server to the network").parse(process.argv);const i=await z(b.opts(),process.argv?.[2]),c=v(),L=i.publicDir?t.resolve(s,i.publicDir):t.join(s,"./public"),h=t.join(s,"/src"),l=i.runtime?t.resolve(s,i.runtime):t.join(h,"./runtime.js"),g=i.entryPoint?t.resolve(s,i.entryPoint):t.join(h,"/main.js"),w=i.widgets?t.resolve(s,i.widgets):t.join(h,"widgets"),j=t.join(s,"/.eodash"),f=i.outDir?t.resolve(s,i.outDir):t.join(j,"/dist"),R=i.cacheDir?t.resolve(s,i.cacheDir):t.join(j,"cache"),m=P(void 0,{prefix:"[eodash]"});async function z(e,n){let a=e.config?t.resolve(s,e.config):t.join(s,"eodash.config.js"),o={};return u(a)?o=await import(a).then(r=>r.default instanceof Function?r.default():r.default).catch(r=>{console.error(r)}):a=null,{base:e.base??o?.base,port:Number(e.port??o?.[n]?.port),host:e.host??o?.[n]?.host,open:e.open??o?.[n]?.open,cacheDir:e.cacheDir??o?.cacheDir,entryPoint:e.entryPoint??o?.entryPoint,outDir:e.outDir??o?.outDir,publicDir:e.publicDir??o?.publicDir,runtime:e.runtime??o?.runtime,widgets:e.widgets??o?.widgets,lib:e.lib??o?.lib}}function v(e=import.meta.dirname){if(e.split("/").length)return u(t.resolve(e,"package.json"))?e:v(t.resolve(e,".."));throw new Error("no package root found")}const y=`
+import{createLogger as P,defineConfig as C,searchForWorkspaceRoot as x,createServer as k,preview as S,build as F}from"vite";import{readFileSync as U,existsSync as u}from"fs";import t from"path";import{Command as E}from"commander";import{readFile as W,writeFile as I,rm as $,cp as N}from"fs/promises";import O from"@vitejs/plugin-vue";import T,{transformAssetUrls as A}from"vite-plugin-vuetify";const s=b(process.cwd()),h=new E("eodash"),H=JSON.parse(U(t.join(s,"package.json"),"utf-8"));h.version(H.version,"-v, --version","output the current version"),h.option("--publicDir <path>","path to statically served assets folder").option("--no-publicDir","stop serving static assets").option("--outDir <path>","minified output folder").option("-e, --entryPoint <path>","file exporting `createEodash`").option("-w, --widgets <path>","folder that contains vue components as internal widgets").option("--cacheDir <path>","cache folder").option("-r, --runtime <path>","file exporting eodash client runtime config").option("-b, --base <path>","base public path").option("-p, --port <port>","serving  port").option("-o, --open","open default browser when the server starts").option("-c, --config <path>","path to eodash server and build configuration file").option("--host [IP address]","specify which IP addresses the server should listen on").option("-l, --lib","builds eodash as a web component library").option("--no-lib","builds eodash as an SPA").option("--no-host","do not expose server to the network").parse(process.argv);const i=await z(h.opts(),process.argv?.[2]),c=b(),L=i.publicDir?t.resolve(s,i.publicDir):t.join(s,"./public"),f=t.join(s,"/src"),l=i.runtime?t.resolve(s,i.runtime):t.join(f,"./runtime.js"),g=i.entryPoint?t.resolve(s,i.entryPoint):t.join(f,"/main.js"),w=i.widgets?t.resolve(s,i.widgets):t.join(f,"widgets"),j=t.join(s,"/.eodash"),m=i.outDir?t.resolve(s,i.outDir):t.join(j,"/dist"),R=i.cacheDir?t.resolve(s,i.cacheDir):t.join(j,"cache"),v=P(void 0,{prefix:"[eodash]"});async function z(e,n){let a=e.config?t.resolve(s,e.config):t.join(s,"eodash.config.js"),o={};return u(a)?o=await import(a).then(r=>r.default instanceof Function?r.default():r.default).catch(r=>{console.error(r)}):a=null,{base:e.base??o?.base,port:Number(e.port??o?.[n]?.port),host:e.host??o?.[n]?.host,open:e.open??o?.[n]?.open,cacheDir:e.cacheDir??o?.cacheDir,entryPoint:e.entryPoint??o?.entryPoint,outDir:e.outDir??o?.outDir,publicDir:e.publicDir??o?.publicDir,runtime:e.runtime??o?.runtime,widgets:e.widgets??o?.widgets,lib:e.lib??o?.lib}}function b(e=import.meta.dirname){if(e.split("/").length>0)return u(t.resolve(e,"package.json"))?e:b(t.resolve(e,".."));throw new Error("no package root found from "+e)}const y=`
 <!DOCTYPE html>
 <html lang="en">
 
@@ -17,4 +17,4 @@ ${i.lib?`<eo-dash style="height:100dvh;"/>
 <script type="module" src="${t.resolve(`/@fs/${c}`,"core/client/render.js")}"><\/script>
 `}
 </body>
-</html>`,D=C(({mode:e,command:n})=>({base:i.base??"",cacheDir:R,plugins:[O({customElement:!1,template:{transformAssetUrls:A,compilerOptions:{isCustomElement:a=>!a.includes("v-")&&a.includes("-")}}}),T({autoImport:!0}),e==="development"&&{name:"inject-html",configureServer:J}],customLogger:m,define:{"process.env":{}},resolve:{alias:{"@":t.join(c,"core/client"),"^":t.join(c,"widgets"),"user:config":g,"user:widgets":w},extensions:[".js",".json",".jsx",".mjs",".ts",".tsx",".vue"]},server:{warmup:{clientFiles:[t.join(c,"core/client/**")]},port:i.port??3e3,open:i.open,fs:{allow:[x(process.cwd())]},host:i.host},root:c,optimizeDeps:e==="development"?{include:["webfontloader","vuetify","vue","pinia","stac-js","urijs"],noDiscovery:!0}:{},publicDir:i.publicDir===!1?!1:L,build:{lib:i.lib&&n==="build"&&{entry:t.join(c,"core/client/asWebComponent.js"),fileName:"eo-dash",formats:["es"],name:"@eodash/eodash"},outDir:f,emptyOutDir:!0,rollupOptions:i.lib&&n==="build"?{input:t.join(c,"core/client/asWebComponent.js")}:void 0,target:"esnext"}}));async function J(e){e.watcher.add([g,l,t.join(w,"**/*.vue")]);let n="";const a=m.info;return m.info=(o,r)=>{if(o.includes("core")){const d=o.split("/")[0].split(" ");d.pop();const p=d.join(" ")+" "+n.replace(s,"");return a(p,r)}return a(o,r)},e.watcher.on("change",async o=>{n=o,o===l&&e.hot.send({type:"full-reload",path:o})}),()=>{e.middlewares.use(async(o,r,d)=>{if(o.originalUrl==="/@fs/config.js"||o.originalUrl==="/config.js"){r.statusCode=200,r.setHeader("Content-Type","text/javascript"),u(l)&&await W(l).then(p=>{r.write(p)}),r.end();return}if(o.url?.endsWith(".html")){r.statusCode=200,r.setHeader("Content-Type","text/html");const p=await e.transformIndexHtml(o.url,y,o.originalUrl);r.end(p);return}d()})}}const M=async()=>{const e=await k(await D({mode:"development",command:"serve"}));await e.listen(),e.printUrls(),e.bindCLIShortcuts({print:!0})},Y=async()=>{const e=async()=>{const n=await D({mode:"production",command:"build"});await F(n),u(l)&&await N(l,t.join(f,"config.js"),{recursive:!0}).catch(a=>{console.error(a)})};if(i.lib)await e();else{const n=t.join(c,"/index.html");await I(n,y).then(async()=>{await e(),await $(n).catch(()=>{console.error("failed to remove index.html")})})}};async function B(){(await S({root:s,base:i.base??"",preview:{port:isNaN(i.port)?8080:i.port,open:i.open,host:i.host},build:{outDir:f}})).printUrls()}const G=process.argv?.[2];(async()=>{switch(G){case"dev":await M();break;case"build":await Y();break;case"preview":await B();break;default:console.error("command not found");break}})();
+</html>`,D=C(({mode:e,command:n})=>({base:i.base??"",cacheDir:R,plugins:[O({customElement:!1,template:{transformAssetUrls:A,compilerOptions:{isCustomElement:a=>!a.includes("v-")&&a.includes("-")}}}),T({autoImport:!0}),e==="development"&&{name:"inject-html",configureServer:J}],customLogger:v,define:{"process.env":{}},resolve:{alias:{"@":t.join(c,"core/client"),"^":t.join(c,"widgets"),"user:config":g,"user:widgets":w},extensions:[".js",".json",".jsx",".mjs",".ts",".tsx",".vue"]},server:{warmup:{clientFiles:[t.join(c,"core/client/**")]},port:i.port??3e3,open:i.open,fs:{allow:[x(process.cwd())]},host:i.host},root:c,optimizeDeps:e==="development"?{include:["webfontloader","vuetify","vue","pinia","stac-js","urijs"],noDiscovery:!0}:{},publicDir:i.publicDir===!1?!1:L,build:{lib:i.lib&&n==="build"&&{entry:t.join(c,"core/client/asWebComponent.js"),fileName:"eo-dash",formats:["es"],name:"@eodash/eodash"},outDir:m,emptyOutDir:!0,rollupOptions:i.lib&&n==="build"?{input:t.join(c,"core/client/asWebComponent.js")}:void 0,target:"esnext"}}));async function J(e){e.watcher.add([g,l,t.join(w,"**/*.vue")]);let n="";const a=v.info;return v.info=(o,r)=>{if(o.includes("core")){const d=o.split("/")[0].split(" ");d.pop();const p=d.join(" ")+" "+n.replace(s,"");return a(p,r)}return a(o,r)},e.watcher.on("change",async o=>{n=o,o===l&&e.hot.send({type:"full-reload",path:o})}),()=>{e.middlewares.use(async(o,r,d)=>{if(o.originalUrl==="/@fs/config.js"||o.originalUrl==="/config.js"){r.statusCode=200,r.setHeader("Content-Type","text/javascript"),u(l)&&await W(l).then(p=>{r.write(p)}),r.end();return}if(o.url?.endsWith(".html")){r.statusCode=200,r.setHeader("Content-Type","text/html");const p=await e.transformIndexHtml(o.url,y,o.originalUrl);r.end(p);return}d()})}}const M=async()=>{const e=await k(await D({mode:"development",command:"serve"}));await e.listen(),e.printUrls(),e.bindCLIShortcuts({print:!0})},Y=async()=>{const e=async()=>{const n=await D({mode:"production",command:"build"});await F(n),u(l)&&await N(l,t.join(m,"config.js"),{recursive:!0}).catch(a=>{console.error(a)})};if(i.lib)await e();else{const n=t.join(c,"/index.html");await I(n,y).then(async()=>{await e(),await $(n).catch(()=>{console.error("failed to remove index.html")})})}};async function B(){(await S({root:s,base:i.base??"",preview:{port:isNaN(i.port)?8080:i.port,open:i.open,host:i.host},build:{outDir:m}})).printUrls()}const G=process.argv?.[2];(async()=>{switch(G){case"dev":await M();break;case"build":await Y();break;case"preview":await B();break;default:console.error("command not found");break}})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.2.6",
+  "version": "5.0.0-alpha.2.8",
   "type": "module",
   "types": "./core/client/types.d.ts",
   "files": [
@@ -74,7 +74,7 @@
     "@types/node": "latest",
     "@types/openlayers": "^4.6.23",
     "@types/webfontloader": "^1.6.38",
-    "cypress": "^13.6.6",
+    "cypress": "^13.13.0",
     "eslint": "^9.4.0",
     "eslint-plugin-vue": "^9.26.0",
     "prettier": "^3.3.2",

package/widgets/EodashMap.vue

@@ -1,28 +1,32 @@
 <template>
-  <DynamicWebComponent
-    :link="link"
-    tag-name="eox-map"
-    :properties="properties"
-    :on-mounted="onMounted"
-    :on-unmounted="onUnmounted"
+  <eox-map
+    class="fill-height fill-width overflow-none"
+    ref="eoxMap"
+    :config="eoxMapConfig"
   />
 </template>
 <script setup>
-import { inject, watch } from "vue";
+import { inject, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { toAbsolute } from "stac-js/src/http.js";
 import { EodashCollection, extractCollectionUrls } from "@/utils/eodashSTAC";
 import { eodashKey } from "@/utils/keys";
 import { datetime, mapPosition } from "@/store/States";
-import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
 import { storeToRefs } from "pinia";
+import { useSTAcStore } from "@/store/stac";
+import "@eox/map";
 import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
 
-const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey);
+const eodashConfig = /** @type {import("@/types").Eodash} */ (
+  inject(eodashKey)
+);
 
-/** @type {Record<string, unknown>} */
-const properties = {
-  class: "fill-height fill-width overflow-none",
+/** @type {import("vue").Ref<(HTMLElement & Record<string,unknown>) | null>} */
+const eoxMap = ref(null);
+
+const eoxMapConfig = reactive({
+  /** @type {(number|undefined)[] | undefined} */
   center: [15, 48],
+  /** @type {number | undefined} */
   zoom: 4,
   // TODO: we should probably introduce some way of defining
   layers: [
@@ -45,17 +49,16 @@ const properties = {
       },
     },
   ],
-};
+});
+
 // Check if selected indicator was already set in store
 if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
   // TODO: do further checks for invalid values?
   // TODO: can we expect the values to be in a specific projection
-  properties.center = [mapPosition.value?.[0], mapPosition.value[1]];
-  properties.zoom = mapPosition.value[2];
+  eoxMapConfig.center = [mapPosition.value?.[0], mapPosition.value[1]];
+  eoxMapConfig.zoom = mapPosition.value[2];
 }
 
-const link = () => import("@eox/map");
-
 /** @type {import("openlayers").EventsListenerFunctionType} */
 const handleMoveEnd = (evt) => {
   const map = /** @type {import("openlayers").Map | undefined} */ (
@@ -73,10 +76,12 @@ const handleMoveEnd = (evt) => {
   }
 };
 
-/** @type {import("@/types").WebComponentProps["onMounted"]} */
-const onMounted = (el, store) => {
-  /** @type {any} */
-  (el)?.map?.on("moveend", handleMoveEnd);
+const store = useSTAcStore();
+
+onMounted(() => {
+  /** @type {import('ol/Map').default} */
+  (eoxMap.value?.map)?.on("moveend", handleMoveEnd);
+
   const { selectedStac } = storeToRefs(store);
 
   watch(
@@ -126,7 +131,7 @@ const onMounted = (el, store) => {
         // TODO: we can check if the collection / indicator has a specific
         //       projection it wants to be displayed in the map we can register
         //       and set the attribute here, e.g. like following
-        /* 
+        /*
         (el)?.registerProjection(
           'EPSG:3031','+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs'
         );
@@ -134,16 +139,15 @@ const onMounted = (el, store) => {
         */
 
         /** @type {any} */
-        (el).layers = layersCollection;
+        (eoxMap.value).layers = layersCollection;
       }
     },
     { immediate: true },
   );
-};
+});
 
-/** @type {import("@/types").WebComponentProps["onUnmounted"]} */
-const onUnmounted = (el, _store) => {
-  /** @type {any} */
-  (el)?.map?.un("moveend", handleMoveEnd);
-};
+onUnmounted(() => {
+  /** @type {import('ol/Map').default} */
+  (eoxMap.value?.map)?.un("moveend", handleMoveEnd);
+});
 </script>

package/widgets/EodashMapBtns.vue

@@ -0,0 +1,33 @@
+<template>
+  <div ref="rootRef" class="d-flex align-end justify-end my-3 pa-2">
+    <v-btn
+      class="map-btn"
+      :icon="[mdiMapPlus]"
+      @click="showMapState = !showMapState"
+    />
+    <ExportState :header="header" :code="code" v-model="showMapState" />
+  </div>
+</template>
+<script setup>
+import { makePanelTransparent } from "@/composables";
+import { mdiMapPlus } from "@mdi/js";
+import ExportState from "^/ExportState.vue";
+import { ref } from "vue";
+const header = "Export Map";
+const code = `<h2>
+           code example
+         </h2>`;
+
+const showMapState = ref(false);
+
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+makePanelTransparent(rootRef);
+</script>
+<style scoped>
+.map-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 25%;
+}
+</style>

package/widgets/ExportState.vue

@@ -0,0 +1,112 @@
+<template>
+  <PopUp v-model="dialog">
+    <v-card>
+      <v-card-title class="bg-primary">
+        <h5 class="text-h5">Storytelling map configuration</h5>
+      </v-card-title>
+
+      <v-card-text class="py-5">
+        <p class="text-body-2">
+          Copy and paste this code into the map layers field of the storytelling
+          editor:
+        </p>
+        <div class="pa-3 code-block">
+          {{ getLayers() }}
+        </div>
+
+        <div style="position: absolute; bottom: 15px">
+          <v-expand-transition>
+            <div v-if="copySuccess" class="text-success mr-3">
+              <v-icon color="success" left :icon="[mdiClipboardCheckOutline]" />
+              <small>copied!</small>
+            </div>
+          </v-expand-transition>
+        </div>
+        <v-row class="d-flex pt-3 justify-end">
+          <v-col cols="6" class="flex-column align-center text-end">
+            <v-btn
+              v-for="btn in copyBtns"
+              class="text-body-2"
+              @click="btn.copyFn"
+              :key="btn.id"
+              small
+              variant="text"
+              :prepend-icon="[mdiContentCopy]"
+            >
+              copy as {{ btn.copyAs }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+
+      <v-divider></v-divider>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn variant="text" @click="dialog = !dialog"> Close </v-btn>
+      </v-card-actions>
+    </v-card>
+  </PopUp>
+</template>
+<script setup>
+import { mdiClipboardCheckOutline, mdiContentCopy } from "@mdi/js";
+import PopUp from "./PopUp.vue";
+import { copyToClipBoard } from "@/utils";
+import { computed, ref } from "vue";
+import { getLayers as getLayerAction } from "@/store/Actions";
+import { mapPosition } from "@/store/States";
+
+const dialog = defineModel({ type: Boolean, required: true, default: false });
+
+const props = defineProps({
+  getLayers: {
+    type: Function,
+    default: getLayerAction,
+  },
+});
+
+const copySuccess = ref(false);
+
+const copyBtns = [
+  {
+    id: Symbol(),
+    copyFn: async () => await copyToClipBoard(mapEntryCode.value, copySuccess),
+    copyAs: "simple map",
+  },
+  {
+    id: Symbol(),
+    copyFn: async () =>
+      await copyToClipBoard(JSON.stringify(props.getLayers()), copySuccess),
+    copyAs: "layers configuration",
+  },
+  {
+    id: Symbol(),
+    copyFn: async () => await copyToClipBoard(mapStepCode.value, copySuccess),
+    copyAs: "map tour section",
+  },
+];
+
+const mapStepCode = computed(() => {
+  const [x, y, z] = mapPosition.value;
+  const preTag = "### <!--{ layers=";
+  const endTag = `zoom="${z}" center=[${[x, y]}] animationOptions={duration:500}}-->
+#### Tour step title
+Text describing the current step of the tour and why it is interesting what the map shows currently
+`;
+  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+});
+const mapEntryCode = computed(() => {
+  const [x, y, z] = mapPosition.value;
+  const preTag =
+    '## Map Example <!--{as="eox-map" style="width: 100%; height: 500px;" layers=';
+  const endTag = `zoom="${z}" center=[${[x, y]}] }-->`;
+  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+});
+</script>
+<style scoped>
+.code-block {
+  background-color: #ddd;
+  font-family: monospace;
+  font-size: small;
+}
+</style>

package/widgets/PopUp.vue

@@ -0,0 +1,40 @@
+<template>
+  <span>
+    <v-dialog
+      max-width="500px"
+      max-height="500px"
+      absolute
+      scrollable
+      scroll-strategy="block"
+      close-on-back
+      v-model="dialog"
+    >
+      <v-sheet>
+        <component
+          v-if="widget"
+          :is="definedWidget.component"
+          :key="definedWidget.id"
+          v-bind="definedWidget.props"
+        />
+        <span v-if="$slots.default">
+          <slot />
+        </span>
+      </v-sheet>
+    </v-dialog>
+  </span>
+</template>
+<script setup>
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+
+const dialog = defineModel({ type: Boolean, required: true, default: false });
+
+const props = defineProps({
+  widget: {
+    /** @type {import("vue").PropType<import("@/types").Widget>} */
+    type: Object,
+    default: undefined,
+  },
+});
+
+const [definedWidget] = useDefineWidgets([props?.widget]);
+</script>