@delta10/atlas-sdk 0.1.12 → 0.2.1

package/README.md

@@ -28,7 +28,11 @@ const layers: LayerConfig[] = [
       features: [
         {
           type: 'Point',
-          coordinates: [120000, 487000]
+          coordinates: [120000, 487000],
+          properties: {
+            id: '123482',
+            geplaatst: false
+          }
         }
       ],
       style: {
@@ -83,13 +87,17 @@ const onFeatureSelected = (event: any) => {
   console.log('Features selected:', event.selected)
 }
 
-const onFeatureDrawn = (event: any) => {
-  console.log('Feature drawn:', event.feature)
-}
-
 const onFeatureModified = (event: any) => {
   console.log('Features modified:', event.features)
 }
+
+const onModifyCancelled = (event: any) => {
+  console.log('Modification cancelled:', event.features)
+}
+
+const onMapClicked = (event: any) => {
+  console.log('Map clicked:', event.coordinate, event.pixel)
+}
 </script>
 
 <template>
@@ -101,8 +109,9 @@ const onFeatureModified = (event: any) => {
       :baseLayers="baseLayers"
       :interactions="interactions"
       @featureSelected="onFeatureSelected"
-      @featureDrawn="onFeatureDrawn"
       @featureModified="onFeatureModified"
+      @modifyCancelled="onModifyCancelled"
+      @mapClicked="onMapClicked"
     />
   </div>
 </template>
@@ -117,16 +126,16 @@ The `Map` component is the main component of the SDK, providing an interactive m
 - **`layers`** `LayerConfig[]` - Array of regular layers to display
 - **`baseLayers`** `LayerConfig[]` - Array of base layers (only one can be active)
 - **`toggleableLayers`** `LayerConfig[]` - Array of toggleable layers (users can show/hide)
-- **`interactions`** `InteractionsConfig` - Configuration for map interactions (select, draw, modify, snap)
+- **`interactions`** `InteractionsConfig` - Configuration for map interactions (select, modify, snap)
 - **`zoom`** `number` (default: `10`) - Initial zoom level
 - **`center`** `[number, number]` (default: `[120000, 487000]`) - Initial center coordinates
 
 ### Events
 
 - **`@featureSelected`** - Emitted when features are selected. Payload: `{ selected: Feature[] }`
-- **`@featureDrawn`** - Emitted when a new feature is drawn. Payload: `{ feature: Feature }`
 - **`@featureModified`** - Emitted when features are modified. Payload: `{ features: Feature[] }`
-- **`@baseLayerChanged`** - Emitted when the active base layer changes. Payload: `layerId: string | null`
+- **`@modifyCancelled`** - Emitted when a pending modification is cancelled. Payload: `{ features: Feature[] }`
+- **`@mapClicked`** - Emitted when the map is clicked. Payload: `{ coordinate: [number, number]; pixel: [number, number] }`
 
 ### Methods
 
@@ -225,7 +234,11 @@ onMounted(() => {
     features: [
       {
         type: 'Point',
-        coordinates: [120000, 487000]
+        coordinates: [120000, 487000],
+        properties: {
+          id: '123482',
+          geplaatst: false
+        }
       }
     ],
     style: {
@@ -303,13 +316,55 @@ This example checks if the `geplaatst` property equals `true`:
 - If true: circle fill color is `blue`
 - If false: circle fill color is `lightblue`
 
-You can use other comparison operators:
+Supported expression operators:
+- `'get'` - Read a feature property
+- `'case'` - Choose a value based on conditions
 - `'=='` - Equal to
-- `'!='` - Not equal to  
-- `'>'` - Greater than
-- `'<'` - Less than
-- `'>='` - Greater than or equal
-- `'<='` - Less than or equal
+- `'coalesce'` - Use the first non-null value
+
+### OpenLayers Style Functions
+
+For more control, vector layers can also use an OpenLayers style function. This is useful for resolution-dependent styling, feature labels, or logic that is easier to express in TypeScript:
+
+```typescript
+import { Style, Stroke, Fill, Circle as CircleStyle, Text } from 'ol/style'
+
+{
+  type: 'vector',
+  options: {
+    identifier: 'meetbouten',
+    title: 'Meetbouten',
+    features: meetboutenFeatures,
+    styleFunction: (feature, _currentStyle, resolution) => {
+      if (resolution > 0.2) {
+        return []
+      }
+
+      const properties = feature.getProperties()
+      const isGeplaatst = properties.geplaatst === true
+      const featureId = properties.id || ''
+
+      return [new Style({
+        image: new CircleStyle({
+          radius: 20,
+          fill: new Fill({ color: 'white' }),
+          stroke: new Stroke({
+            color: isGeplaatst ? 'green' : 'red',
+            width: 2
+          })
+        }),
+        text: featureId ? new Text({
+          text: String(featureId),
+          fill: new Fill({ color: '#000' }),
+          stroke: new Stroke({ color: '#fff', width: 2 })
+        }) : undefined
+      })]
+    }
+  }
+}
+```
+
+Returning an empty array hides the feature for that render pass.
 
 ## Interactions Configuration
 
@@ -330,31 +385,22 @@ Allow users to select features from specific layers:
 }
 ```
 
-### Draw Interaction
-Allow users to draw new geometries:
-```typescript
-{
-  draw: {
-    enabled: true,
-    layer: 'meetbouten',
-    type: 'Point' // 'Point' | 'LineString' | 'Polygon'
-  }
-}
-```
-
 ### Modify Interaction
 Allow users to edit existing geometries:
 ```typescript
 {
   modify: {
     enabled: true,
-    layer: 'meetbouten'
+    layer: 'meetbouten',
+    labelProperty: 'meetboutnummer' // Optional: feature property shown in the confirm/cancel overlay
   }
 }
 ```
 
+The `labelProperty` value is read from the selected feature's `properties`. For example, if a feature has `properties: { id: '123482' }`, use `labelProperty: 'id'` to show that value in the confirmation overlay.
+
 ### Snap Interaction
-Snap drawn/modified features to existing features:
+Snap modified features to existing features:
 ```typescript
 {
   snap: {
@@ -382,14 +428,10 @@ const interactions: InteractionsConfig = {
       'circle-stroke-width': 2
     }
   },
-  draw: {
-    enabled: true,
-    layer: 'meetbouten',
-    type: 'Point'
-  },
   modify: {
     enabled: true,
-    layer: 'meetbouten'
+    layer: 'meetbouten',
+    labelProperty: 'meetboutnummer'
   },
   snap: {
     enabled: true,
@@ -398,6 +440,41 @@ const interactions: InteractionsConfig = {
 }
 ```
 
+## Reactive Data
+
+Layer configuration can be reactive. Use `computed` when feature arrays are loaded or replaced after mount:
+
+```typescript
+const pandenFeatures = ref<any[]>([])
+const meetboutenFeatures = ref<any[]>([])
+
+const layers = computed<LayerConfig[]>(() => [
+  {
+    type: 'vector',
+    options: {
+      identifier: 'panden',
+      title: 'Panden',
+      features: pandenFeatures.value
+    }
+  },
+  {
+    type: 'vector',
+    options: {
+      identifier: 'meetbouten',
+      title: 'Meetbouten',
+      features: meetboutenFeatures.value
+    }
+  }
+])
+
+onMounted(() => {
+  pandenFeatures.value = loadedPandenFeatures
+  meetboutenFeatures.value = loadedMeetboutenFeatures
+
+  mapRef.value?.fitToFeatures(loadedPandenFeatures)
+})
+```
+
 ## Development
 
 ### Install dependencies

package/dist/components/Map.vue.d.ts

@@ -7,6 +7,7 @@ export interface SelectableConfig {
 export interface ModifyConfig {
     enabled: boolean;
     layer: string;
+    labelProperty?: string;
     style?: StyleConfig;
 }
 export interface SnapConfig {

package/dist/components/Map.vue.js

@@ -1,7 +1,7 @@
 import o from "./Map.vue2.js";
 /* empty css         */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-67707055"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-00ea6e03"]]);
 export {
-  m as default
+  e as default
 };

package/dist/components/Map.vue2.js

@@ -1,31 +1,35 @@
-import { defineComponent as he, ref as c, computed as h, onMounted as ke, openBlock as a, createElementBlock as F, createVNode as d, unref as s, withCtx as b, createBlock as f, normalizeStyle as Se, createCommentVNode as p, Fragment as W, renderList as H, mergeProps as _e, createElementVNode as g, normalizeClass as J, Transition as Q } from "vue";
-import { OlMap as Oe, OlProjectionRegister as Fe, OlView as Ie, OlFeature as Ce, OlOverlay as Me } from "vue3-openlayers/map";
-import { OlTileLayer as X, OlVectorLayer as Te } from "vue3-openlayers/layers";
-import { OlSourceTileWMS as ze, OlSourceWMTS as xe, OlSourceVector as Pe } from "vue3-openlayers/sources";
-import { OlGeomPoint as Be, OlGeomPolygon as je } from "vue3-openlayers/geometries";
-import { OlStyle as Ae } from "vue3-openlayers/styles";
-import { OlInteractionSelect as Ne, OlInteractionModify as Ve, OlInteractionSnap as Ze } from "vue3-openlayers/interactions";
-import { epsg28992 as A } from "../utils/projections.js";
-import { optionsFromCapabilities as Re } from "ol/source/WMTS";
-import Ge from "ol/format/WMTSCapabilities";
-import { Style as $, Fill as D, Stroke as U, Circle as We, Text as $e } from "ol/style";
-import { boundingExtent as De } from "ol/extent";
-import { unByKey as Ue } from "ol/Observable";
-import { Collection as Ke } from "ol";
+import { defineComponent as Oe, ref as c, shallowRef as ie, computed as b, onMounted as ze, openBlock as l, createElementBlock as L, createVNode as g, unref as r, withCtx as k, createBlock as f, normalizeStyle as xe, createCommentVNode as d, Fragment as K, renderList as se, createElementVNode as m, toDisplayString as Pe, normalizeClass as re, Transition as le } from "vue";
+import { OlMap as Be, OlProjectionRegister as Ae, OlView as We, OlFeature as je, OlOverlay as Re } from "vue3-openlayers/map";
+import { OlTileLayer as ae, OlVectorLayer as Ve } from "vue3-openlayers/layers";
+import { OlSourceVector as Ze } from "vue3-openlayers/sources";
+import { OlGeomPoint as $e, OlGeomPolygon as Ge } from "vue3-openlayers/geometries";
+import { OlStyle as Ne } from "vue3-openlayers/styles";
+import { OlInteractionSelect as De, OlInteractionModify as Ue, OlInteractionSnap as Ke } from "vue3-openlayers/interactions";
+import { epsg28992 as j } from "../utils/projections.js";
+import Ye, { optionsFromCapabilities as qe } from "ol/source/WMTS";
+import He from "ol/format/WMTSCapabilities";
+import Je from "ol/source/TileWMS";
+import { Style as Y, Fill as q, Stroke as H, Circle as Qe, Text as Xe } from "ol/style";
+import { boundingExtent as Ee } from "ol/extent";
+import { unByKey as et } from "ol/Observable";
+import { Collection as tt } from "ol";
 import "ol/geom";
-import Ye from "../assets/icons/map.svg.js";
-import qe from "../assets/icons/layers.svg.js";
-import He from "../assets/icons/plus.svg.js";
-import Je from "../assets/icons/minus.svg.js";
-import Qe from "./panels/BaseLayers.vue.js";
-import Xe from "./panels/Layers.vue.js";
-const Ee = { class: "map-container" }, et = { class: "bottom-left-panels" }, tt = {
+import ot from "../assets/icons/map.svg.js";
+import nt from "../assets/icons/layers.svg.js";
+import it from "../assets/icons/plus.svg.js";
+import st from "../assets/icons/minus.svg.js";
+import rt from "./panels/BaseLayers.vue.js";
+import lt from "./panels/Layers.vue.js";
+const at = { class: "map-container" }, ct = { class: "modify-overlay" }, ut = {
+  key: 0,
+  class: "modify-overlay-label"
+}, ft = { class: "bottom-left-panels" }, dt = {
   key: 0,
   class: "layers-control"
-}, ot = ["aria-expanded"], nt = { class: "bottom-right-panels" }, it = {
+}, pt = ["aria-expanded"], mt = { class: "bottom-right-panels" }, yt = {
   key: 0,
   class: "base-layers-control"
-}, st = ["aria-expanded"], rt = { class: "zoom-panel" }, Ct = /* @__PURE__ */ he({
+}, vt = ["aria-expanded"], gt = { class: "zoom-panel" }, Zt = /* @__PURE__ */ Oe({
   __name: "Map",
   props: {
     layers: { default: () => [] },
@@ -36,74 +40,104 @@ const Ee = { class: "map-container" }, et = { class: "bottom-left-panels" }, tt
     center: { default: () => [12e4, 487e3] }
   },
   emits: ["featureSelected", "featureDeselected", "featureModified", "mapClicked", "modifyCancelled"],
-  setup(_, { expose: E, emit: ee }) {
-    const i = _, z = ee, x = c(), w = c(), N = c(), te = c({}), V = c({}), I = c(!1), C = c(!1), O = c(null), M = c(/* @__PURE__ */ new Set()), Z = c(!1), T = c(null), L = c(null), P = c(null), B = c(null), k = c(null), K = h(() => k.value), S = c(
+  setup(S, { expose: ce, emit: ue }) {
+    const i = S, x = ue, P = c(), w = c(), J = c(), fe = c({}), R = c({}), F = c(!1), I = c(!1), _ = c(null), O = c(/* @__PURE__ */ new Set()), V = c(!1), z = c(null), h = c(null), M = c(null), B = c(null), A = c(null), C = ie(new tt([])), Z = b(() => C.value), Q = b(() => {
+      const e = i.interactions?.modify?.labelProperty;
+      if (!e || !M.value) return "";
+      const t = M.value.get?.(e);
+      return t == null ? "" : String(t);
+    }), T = ie(
       new globalThis.Map()
-    ), Y = (e, o, t, n) => {
+    ), X = new globalThis.Map(), E = /* @__PURE__ */ new WeakMap(), $ = (e, t) => {
+      if (!e || !t) return null;
+      const o = `${e}|${t}`, n = X.get(o);
+      if (n) return n;
+      const s = new Je({
+        url: e,
+        params: { LAYERS: t, TILED: !0 },
+        serverType: "geoserver",
+        crossOrigin: "anonymous"
+      });
+      return X.set(o, s), s;
+    }, G = (e) => {
+      if (!e) return null;
+      const t = E.get(e);
+      if (t) return t;
+      const o = new Ye({
+        ...e,
+        style: e.style || "default"
+      });
+      return E.set(e, o), o;
+    }, N = (e, t) => {
+      const o = new globalThis.Map(T.value);
+      o.set(e, t), T.value = o;
+    }, ee = (e, t, o, n) => {
       if (!e) return;
-      if (e instanceof $ || typeof e == "function")
+      if (e instanceof Y || typeof e == "function")
         return e;
-      const r = {}, l = (m) => {
-        if (Array.isArray(m)) {
-          const [y, ...u] = m;
+      const s = {}, a = (p) => {
+        if (Array.isArray(p)) {
+          const [y, ...u] = p;
           switch (y) {
             case "get":
-              return o?.getProperties()?.[u[0]] ?? null;
+              return t?.getProperties()?.[u[0]] ?? null;
             case "case":
               for (let v = 0; v < u.length - 1; v += 2)
-                if (l(u[v]))
-                  return l(u[v + 1]);
-              return l(u[u.length - 1]);
+                if (a(u[v]))
+                  return a(u[v + 1]);
+              return a(u[u.length - 1]);
             case "==":
-              return l(u[0]) === l(u[1]);
+              return a(u[0]) === a(u[1]);
             case "coalesce":
               for (const v of u) {
-                const G = l(v);
-                if (G != null) return G;
+                const U = a(v);
+                if (U != null) return U;
               }
               return null;
             default:
-              return m;
+              return p;
           }
         }
-        return m;
+        return p;
       };
-      if (e["fill-color"] && (r.fill = new D({ color: l(e["fill-color"]) })), (e["stroke-color"] || e["stroke-width"]) && (r.stroke = new U({
-        color: l(e["stroke-color"]) || "#3399CC",
-        width: l(e["stroke-width"]) || 1.25
+      if (e["fill-color"] && (s.fill = new q({ color: a(e["fill-color"]) })), (e["stroke-color"] || e["stroke-width"]) && (s.stroke = new H({
+        color: a(e["stroke-color"]) || "#3399CC",
+        width: a(e["stroke-width"]) || 1.25
       })), e["circle-radius"] || e["circle-fill-color"] || e["circle-stroke-color"]) {
-        const m = l(e["circle-radius"]) || 5, y = l(e["circle-fill-color"]), u = l(e["circle-stroke-color"]) || "#3399CC", v = l(e["circle-stroke-width"]) || 1.25;
-        r.image = new We({
-          radius: m,
-          fill: y ? new D({ color: y }) : void 0,
-          stroke: new U({ color: u, width: v })
+        const p = a(e["circle-radius"]) || 5, y = a(e["circle-fill-color"]), u = a(e["circle-stroke-color"]) || "#3399CC", v = a(e["circle-stroke-width"]) || 1.25;
+        s.image = new Qe({
+          radius: p,
+          fill: y ? new q({ color: y }) : void 0,
+          stroke: new H({ color: u, width: v })
         });
       }
       if (e["text-value"]) {
-        const m = l(e["text-value"]);
-        m && (r.text = new $e({
-          text: String(m),
-          fill: new D({ color: "#000" }),
-          stroke: new U({ color: "#fff", width: 2 })
+        const p = a(e["text-value"]);
+        p && (s.text = new Xe({
+          text: String(p),
+          fill: new q({ color: "#000" }),
+          stroke: new H({ color: "#fff", width: 2 })
         }));
       }
-      return new $(r);
-    }, oe = (e) => typeof e == "function" ? e : e instanceof $ ? (o, t, n) => [e] : (o, t, n) => {
-      const r = Y(e, o);
-      return r ? [r] : void 0;
-    }, ne = h(() => i.layers.map((e) => {
+      return new Y(s);
+    }, de = (e) => typeof e == "function" ? e : e instanceof Y ? (t, o, n) => [e] : (t, o, n) => {
+      const s = ee(e, t);
+      return s ? [s] : void 0;
+    }, pe = b(() => i.layers.map((e) => {
       if (e.type === "wmts") {
-        const o = S.value.get(e.options.identifier);
+        const t = T.value.get(e.options.identifier);
         return {
           type: "wmts",
           identifier: e.options.identifier,
-          options: o || null
+          options: t || null,
+          source: G(t)
         };
       } else return e.type === "wms" ? {
         type: "wms",
         identifier: e.options.identifier,
         wmsUrl: e.options.url,
-        layerName: e.options.layer
+        layerName: e.options.layer,
+        source: $(e.options.url, e.options.layer)
       } : {
         type: "vector",
         identifier: e.options.identifier,
@@ -111,47 +145,60 @@ const Ee = { class: "map-container" }, et = { class: "bottom-left-panels" }, tt
         style: e.options.style,
         styleFunction: e.options.styleFunction
       };
-    })), j = h(() => {
-      if (!O.value || !i.baseLayers)
+    })), W = b(() => {
+      if (!_.value || !i.baseLayers)
         return null;
       const e = i.baseLayers.find(
-        (o) => o.options.identifier === O.value
+        (t) => t.options.identifier === _.value
       );
-      return !e || e.type === "wmts" && !S.value.get(e.options.identifier) ? null : e;
-    }), ie = h(() => j.value && S.value.get(j.value.options.identifier) || null), se = h(() => (i.toggleableLayers || []).filter(
-      (e) => M.value.has(e.options.identifier)
-    ).map((e) => e.type === "wms" ? {
-      type: "wms",
-      identifier: e.options.identifier,
-      wmsUrl: e.options.url,
-      layerName: e.options.layer
-    } : e.type === "wmts" ? {
-      type: "wmts",
-      identifier: e.options.identifier,
-      wmtsOptions: S.value.get(e.options.identifier)
-    } : e.type === "vector" ? {
-      type: "vector",
-      identifier: e.options.identifier,
-      options: e.options,
-      style: e.options.style,
-      styleFunction: e.options.styleFunction
-    } : {
-      ...e,
-      identifier: e.options.identifier
-    })), re = h(() => {
+      return !e || e.type === "wmts" && !T.value.get(e.options.identifier) ? null : e;
+    }), te = b(() => W.value && T.value.get(W.value.options.identifier) || null), me = b(() => (i.toggleableLayers || []).filter(
+      (e) => O.value.has(e.options.identifier)
+    ).map((e) => {
+      if (e.type === "wms")
+        return {
+          type: "wms",
+          identifier: e.options.identifier,
+          wmsUrl: e.options.url,
+          layerName: e.options.layer,
+          source: $(e.options.url, e.options.layer)
+        };
+      if (e.type === "wmts") {
+        const t = T.value.get(e.options.identifier);
+        return {
+          type: "wmts",
+          identifier: e.options.identifier,
+          wmtsOptions: t,
+          source: G(t)
+        };
+      } else if (e.type === "vector")
+        return {
+          type: "vector",
+          identifier: e.options.identifier,
+          options: e.options,
+          style: e.options.style,
+          styleFunction: e.options.styleFunction
+        };
+      return {
+        ...e,
+        identifier: e.options.identifier
+      };
+    })), ye = b(() => {
       const e = [];
-      if (j.value) {
-        const n = j.value;
+      if (W.value) {
+        const n = W.value;
         n.type === "wmts" ? e.push({
           type: "wmts",
           identifier: n.options.identifier,
-          wmtsOptions: ie.value,
+          wmtsOptions: te.value,
+          source: G(te.value),
           zIndex: 0
         }) : n.type === "wms" ? e.push({
           type: "wms",
           identifier: n.options.identifier,
           wmsUrl: n.options.url,
           layerName: n.options.layer,
+          source: $(n.options.url, n.options.layer),
           zIndex: 0
         }) : n.type === "vector" && e.push({
           type: "vector",
@@ -162,40 +209,40 @@ const Ee = { class: "map-container" }, et = { class: "bottom-left-panels" }, tt
           zIndex: 0
         });
       }
-      const o = se.value.map((n, r) => ({
+      const t = me.value.map((n, s) => ({
         ...n,
-        zIndex: r + 10
-      })), t = ne.value.map((n, r) => ({
+        zIndex: s + 10
+      })), o = pe.value.map((n, s) => ({
         ...n,
-        zIndex: o.length + r + 20
+        zIndex: t.length + s + 20
       }));
-      return [...e, ...o, ...t];
-    }), ae = () => {
+      return [...e, ...t, ...o];
+    }), ve = () => {
+      F.value = !F.value;
+    }, ge = () => {
       I.value = !I.value;
-    }, le = () => {
-      C.value = !C.value;
-    }, ce = (e) => {
-      M.value.has(e) ? M.value.delete(e) : M.value.add(e);
-    }, ue = (e) => {
-      O.value = e;
-    }, fe = () => {
+    }, be = (e) => {
+      O.value.has(e) ? O.value.delete(e) : O.value.add(e);
+    }, we = (e) => {
+      _.value = e;
+    }, he = () => {
       if (w.value?.view) {
-        const e = w.value.view, o = e.getZoom(), t = e.getMaxZoom();
-        typeof o == "number" && o < t && e.animate({ zoom: o + 1, duration: 250 });
+        const e = w.value.view, t = e.getZoom(), o = e.getMaxZoom();
+        typeof t == "number" && t < o && e.animate({ zoom: t + 1, duration: 250 });
       }
-    }, de = () => {
+    }, Le = () => {
       if (w.value?.view) {
-        const e = w.value.view, o = e.getZoom(), t = e.getMinZoom();
-        typeof o == "number" && o > t && e.animate({ zoom: o - 1, duration: 250 });
+        const e = w.value.view, t = e.getZoom(), o = e.getMinZoom();
+        typeof t == "number" && t > o && e.animate({ zoom: t - 1, duration: 250 });
       }
-    }, R = async (e, o, t) => {
+    }, D = async (e, t, o) => {
       try {
-        const r = await (await fetch(e)).text(), l = new Ge().read(r), m = t ? [t, "image/jpeg", "image/png"] : ["image/png", "image/jpeg"];
+        const s = await (await fetch(e)).text(), a = new He().read(s), p = o ? [o, "image/jpeg", "image/png"] : ["image/png", "image/jpeg"];
         let y = null;
-        for (const u of m)
+        for (const u of p)
           try {
-            if (y = Re(l, {
-              layer: o,
+            if (y = qe(a, {
+              layer: t,
               matrixSet: "EPSG:28992",
               projection: "EPSG:28992",
               format: u,
@@ -203,314 +250,304 @@ const Ee = { class: "map-container" }, et = { class: "bottom-left-panels" }, tt
               style: "default"
             }), y) break;
           } catch (v) {
-            console.warn(`Format ${u} failed for layer ${o}:`, v);
+            console.warn(`Format ${u} failed for layer ${t}:`, v);
           }
         return y && (y.style = "default"), y;
       } catch (n) {
         return console.error("Failed to fetch WMTS capabilities:", n), null;
       }
-    }, pe = (e) => {
+    }, ke = (e) => {
       if (!e || e.length === 0 || !w.value?.view) return;
-      const o = [];
-      for (const t of e)
-        if (t.type === "Point")
-          o.push(t.coordinates);
-        else if (t.type === "Polygon") {
-          const n = t.coordinates;
-          for (const r of n)
-            for (const l of r)
-              o.push(l);
+      const t = [];
+      for (const o of e)
+        if (o.type === "Point")
+          t.push(o.coordinates);
+        else if (o.type === "Polygon") {
+          const n = o.coordinates;
+          for (const s of n)
+            for (const a of s)
+              t.push(a);
         }
-      if (o.length > 0) {
-        const t = De(o);
-        w.value.view.fit(t, {
+      if (t.length > 0) {
+        const o = Ee(t);
+        w.value.view.fit(o, {
           padding: [50, 50, 50, 50]
         });
       }
     };
-    ke(async () => {
-      if (k.value = new Ke([]), !O.value && i.baseLayers && i.baseLayers.length > 0) {
+    ze(async () => {
+      if (!_.value && i.baseLayers && i.baseLayers.length > 0) {
         const e = i.baseLayers[0];
-        e?.options.identifier && (O.value = e.options.identifier);
+        e?.options.identifier && (_.value = e.options.identifier);
       }
-      await new Promise((e) => setTimeout(e, 100)), x.value?.map && x.value.map.on("singleclick", (e) => {
-        z("mapClicked", {
+      await new Promise((e) => setTimeout(e, 100)), P.value?.map && P.value.map.on("singleclick", (e) => {
+        x("mapClicked", {
           coordinate: e.coordinate,
           pixel: e.pixel
         });
       });
-      for (const e of i.layers.filter((o) => o.type === "wmts"))
+      for (const e of i.layers.filter((t) => t.type === "wmts"))
         if (e.options.url) {
-          const o = await R(
+          const t = await D(
             e.options.url,
             e.options.identifier,
             e.options.format
           );
-          S.value.set(e.options.identifier, o);
+          N(e.options.identifier, t);
         }
       if (i.baseLayers) {
-        for (const e of i.baseLayers.filter((o) => o.type === "wmts"))
+        for (const e of i.baseLayers.filter((t) => t.type === "wmts"))
           if (e.options.url) {
-            const o = await R(
+            const t = await D(
               e.options.url,
               e.options.identifier,
               e.options.format
             );
-            S.value.set(e.options.identifier, o);
+            N(e.options.identifier, t);
           }
       }
       if (i.toggleableLayers) {
         for (const e of i.toggleableLayers.filter(
-          (o) => o.type === "wmts"
+          (t) => t.type === "wmts"
         ))
           if (e.options.url) {
-            const o = await R(
+            const t = await D(
               e.options.url,
               e.options.identifier,
               e.options.format
             );
-            S.value.set(e.options.identifier, o);
+            N(e.options.identifier, t);
           }
       }
     });
-    const me = h(() => {
+    const Se = b(() => {
       if (!i.interactions?.selectable?.layers || i.interactions.selectable.layers.length === 0)
         return;
       const e = i.interactions.selectable.layers;
-      return (o, t) => {
-        if (!t) return !1;
-        const n = t.get("name");
+      return (t, o) => {
+        if (!o) return !1;
+        const n = o.get("name");
         return e.includes(n);
       };
-    }), ye = h(() => Y(i.interactions?.selectable?.style, void 0)), ve = (e) => {
-      k.value && (k.value.clear(), e.selected && e.selected.length > 0 && k.value.push(e.selected[0])), z("featureSelected", e);
-    }, ge = (e) => {
-      L.value = e;
-      const o = e.features.getArray()[0];
-      if (o) {
-        const t = o.getGeometry();
-        P.value = t.clone();
-        const n = t.getCoordinates();
-        T.value = n, Z.value = !0, B.value = t.on("change", () => {
-          const r = t.getCoordinates();
-          T.value = r;
+    }), _e = b(() => ee(i.interactions?.selectable?.style, void 0)), Me = (e) => {
+      C.value && (C.value.clear(), e.selected && e.selected.length > 0 && C.value.push(e.selected[0])), x("featureSelected", e);
+    }, Ce = (e) => {
+      h.value = e;
+      const t = e.features.getArray()[0];
+      if (M.value = t || null, t) {
+        const o = t.getGeometry();
+        B.value = o.clone();
+        const n = o.getCoordinates();
+        z.value = n, V.value = !0, A.value = o.on("change", () => {
+          const s = o.getCoordinates();
+          z.value = s;
         });
       }
-    }, be = (e) => {
-      L.value = e;
-    }, we = () => {
-      if (L.value) {
-        const e = L.value.features.getArray();
-        z("featureModified", { features: e }), k.value && k.value.clear(), N.value?.selectInteraction && N.value.selectInteraction.getFeatures().clear();
+    }, Te = (e) => {
+      h.value = e, M.value = e.features.getArray()[0] || M.value;
+    }, oe = () => {
+      C.value && C.value.clear();
+      const e = J.value?.select;
+      (e?.value || e)?.getFeatures?.().clear();
+    }, Fe = () => {
+      if (h.value) {
+        const e = h.value.features.getArray();
+        x("featureModified", { features: e });
       }
-      q();
-    }, Le = () => {
-      if (L.value && P.value) {
-        const e = L.value.features.getArray()[0];
-        e && e.setGeometry(P.value);
-        const o = L.value.features.getArray();
-        z("modifyCancelled", { features: o });
+      oe(), ne();
+    }, Ie = () => {
+      if (h.value && B.value) {
+        const e = h.value.features.getArray()[0];
+        e && e.setGeometry(B.value);
+        const t = h.value.features.getArray();
+        x("modifyCancelled", { features: t });
       }
-      q();
-    }, q = () => {
-      Z.value = !1, T.value = null, L.value = null, P.value = null, B.value && (Ue(B.value), B.value = null);
+      oe(), ne();
+    }, ne = () => {
+      V.value = !1, z.value = null, h.value = null, M.value = null, B.value = null, A.value && (et(A.value), A.value = null);
     };
-    return E({ map: x, view: w, fitToFeatures: pe }), (e, o) => (a(), F("div", Ee, [
-      d(s(Oe), {
+    return ce({ map: P, view: w, fitToFeatures: ke }), (e, t) => (l(), L("div", at, [
+      g(r(Be), {
         ref_key: "mapRef",
-        ref: x,
+        ref: P,
         style: { width: "100%", height: "100%" },
         controls: []
       }, {
-        default: b(() => [
-          d(s(Fe), {
-            projectionName: s(A).name,
-            projectionDef: s(A).def,
-            extent: s(A).extent
+        default: k(() => [
+          g(r(Ae), {
+            projectionName: r(j).name,
+            projectionDef: r(j).def,
+            extent: r(j).extent
           }, null, 8, ["projectionName", "projectionDef", "extent"]),
-          d(s(Ie), {
+          g(r(We), {
             ref_key: "viewRef",
             ref: w,
-            center: _.center,
-            zoom: _.zoom,
-            projection: s(A).name
+            center: S.center,
+            zoom: S.zoom,
+            projection: r(j).name
           }, null, 8, ["center", "zoom", "projection"]),
-          i.interactions?.selectable?.enabled ? (a(), f(s(Ne), {
+          i.interactions?.selectable?.enabled ? (l(), f(r(De), {
             key: 0,
             ref_key: "selectInteractionRef",
-            ref: N,
+            ref: J,
             multi: !1,
-            filter: me.value,
-            style: Se(ye.value),
-            onSelect: ve
-          }, null, 8, ["filter", "style"])) : p("", !0),
-          (a(!0), F(W, null, H(re.value, (t) => (a(), F(W, {
-            key: t.identifier
+            features: Z.value,
+            filter: Se.value,
+            style: xe(_e.value),
+            onSelect: Me
+          }, null, 8, ["features", "filter", "style"])) : d("", !0),
+          (l(!0), L(K, null, se(ye.value, (o) => (l(), L(K, {
+            key: o.identifier
           }, [
-            t.type === "wms" ? (a(), f(s(X), {
+            o.type === "wms" && o.source ? (l(), f(r(ae), {
               key: 0,
-              zIndex: t.zIndex
-            }, {
-              default: b(() => [
-                d(s(ze), {
-                  url: t.wmsUrl,
-                  layers: t.layerName || "",
-                  params: { LAYERS: t.layerName || "", TILED: !0 },
-                  serverType: "geoserver",
-                  crossOrigin: "anonymous"
-                }, null, 8, ["url", "layers", "params"])
-              ]),
-              _: 2
-            }, 1032, ["zIndex"])) : t.type === "wmts" && (t.wmtsOptions || t.options) ? (a(), f(s(X), {
+              zIndex: o.zIndex,
+              source: o.source
+            }, null, 8, ["zIndex", "source"])) : o.type === "wmts" && o.source ? (l(), f(r(ae), {
               key: 1,
-              zIndex: t.zIndex
-            }, {
-              default: b(() => [
-                d(s(xe), _e(
-                  { ref_for: !0 },
-                  t.wmtsOptions || t.options,
-                  { styles: "default" }
-                ), null, 16)
-              ]),
-              _: 2
-            }, 1032, ["zIndex"])) : t.type === "vector" ? (a(), f(s(Te), {
+              zIndex: o.zIndex,
+              source: o.source
+            }, null, 8, ["zIndex", "source"])) : o.type === "vector" ? (l(), f(r(Ve), {
               key: 2,
-              zIndex: t.zIndex,
-              properties: { name: t.identifier },
+              zIndex: o.zIndex,
+              properties: { name: o.identifier },
               ref_for: !0,
               ref: (n) => {
-                n && (te.value[t.identifier] = n);
+                n && (fe.value[o.identifier] = n);
               }
             }, {
-              default: b(() => [
-                t.styleFunction || t.options?.styleFunction || t.style || t.options?.style ? (a(), f(s(Ae), {
+              default: k(() => [
+                o.styleFunction || o.options?.styleFunction || o.style || o.options?.style ? (l(), f(r(Ne), {
                   key: 0,
-                  overrideStyleFunction: t.styleFunction || t.options?.styleFunction || oe(t.style || t.options?.style)
-                }, null, 8, ["overrideStyleFunction"])) : p("", !0),
-                d(s(Pe), {
+                  overrideStyleFunction: o.styleFunction || o.options?.styleFunction || de(o.style || o.options?.style)
+                }, null, 8, ["overrideStyleFunction"])) : d("", !0),
+                g(r(Ze), {
                   ref_for: !0,
                   ref: (n) => {
-                    n && (V.value[t.identifier] = n);
+                    n && (R.value[o.identifier] = n);
                   }
                 }, {
-                  default: b(() => [
-                    (a(!0), F(W, null, H(t.options?.features, (n, r) => (a(), f(s(Ce), {
-                      key: `${t.identifier}-${r}`,
+                  default: k(() => [
+                    (l(!0), L(K, null, se(o.options?.features, (n, s) => (l(), f(r(je), {
+                      key: `${o.identifier}-${s}`,
                       properties: n.properties || {}
                     }, {
-                      default: b(() => [
-                        n.type === "Point" ? (a(), f(s(Be), {
+                      default: k(() => [
+                        n.type === "Point" ? (l(), f(r($e), {
                           key: 0,
                           coordinates: n.coordinates
-                        }, null, 8, ["coordinates"])) : p("", !0),
-                        n.type === "Polygon" ? (a(), f(s(je), {
+                        }, null, 8, ["coordinates"])) : d("", !0),
+                        n.type === "Polygon" ? (l(), f(r(Ge), {
                           key: 1,
                           coordinates: n.coordinates
-                        }, null, 8, ["coordinates"])) : p("", !0)
+                        }, null, 8, ["coordinates"])) : d("", !0)
                       ]),
                       _: 2
                     }, 1032, ["properties"]))), 128)),
-                    i.interactions?.modify?.enabled && i.interactions.modify.layer === t.identifier && K.value ? (a(), f(s(Ve), {
+                    i.interactions?.modify?.enabled && i.interactions.modify.layer === o.identifier && Z.value ? (l(), f(r(Ue), {
                       key: 0,
-                      features: K.value,
-                      onModifystart: ge,
-                      onModifyend: be
-                    }, null, 8, ["features"])) : p("", !0),
-                    i.interactions?.snap?.enabled && i.interactions?.modify?.enabled && i.interactions?.modify?.layer === t.identifier && V.value[i.interactions.snap.targetLayer]?.source ? (a(), f(s(Ze), {
-                      key: `snap-${t.identifier}-${i.interactions?.snap?.enabled}-${i.interactions?.modify?.enabled}`,
-                      source: V.value[i.interactions.snap.targetLayer]?.source,
+                      features: Z.value,
+                      onModifystart: Ce,
+                      onModifyend: Te
+                    }, null, 8, ["features"])) : d("", !0),
+                    i.interactions?.snap?.enabled && i.interactions?.modify?.enabled && i.interactions?.modify?.layer === o.identifier && R.value[i.interactions.snap.targetLayer]?.source ? (l(), f(r(Ke), {
+                      key: `snap-${o.identifier}-${i.interactions?.snap?.enabled}-${i.interactions?.modify?.enabled}`,
+                      source: R.value[i.interactions.snap.targetLayer]?.source,
                       pixelTolerance: i.interactions?.snap?.pixelTolerance || 8
-                    }, null, 8, ["source", "pixelTolerance"])) : p("", !0)
+                    }, null, 8, ["source", "pixelTolerance"])) : d("", !0)
                   ]),
                   _: 2
                 }, 1536)
               ]),
               _: 2
-            }, 1032, ["zIndex", "properties"])) : p("", !0)
+            }, 1032, ["zIndex", "properties"])) : d("", !0)
           ], 64))), 128)),
-          Z.value && T.value ? (a(), f(s(Me), {
+          V.value && z.value ? (l(), f(r(Re), {
             key: 1,
-            position: T.value,
+            position: z.value,
             positioning: "bottom-left",
             offset: [10, -10],
             stopEvent: !0
           }, {
-            default: b(() => [
-              g("div", { class: "modify-overlay" }, [
-                g("button", {
-                  class: "modify-btn modify-btn-ok",
-                  onClick: we
-                }, " Bevestig "),
-                g("button", {
-                  class: "modify-btn modify-btn-cancel",
-                  onClick: Le
-                }, " Annuleer ")
+            default: k(() => [
+              m("div", ct, [
+                Q.value ? (l(), L("div", ut, Pe(Q.value), 1)) : d("", !0),
+                m("div", { class: "modify-overlay-actions" }, [
+                  m("button", {
+                    class: "modify-btn modify-btn-cancel",
+                    onClick: Ie
+                  }, " Annuleer "),
+                  m("button", {
+                    class: "modify-btn modify-btn-ok",
+                    onClick: Fe
+                  }, " Bevestig ")
+                ])
               ])
             ]),
             _: 1
-          }, 8, ["position"])) : p("", !0)
+          }, 8, ["position"])) : d("", !0)
         ]),
         _: 1
       }, 512),
-      g("div", et, [
-        _.toggleableLayers && _.toggleableLayers.length > 0 ? (a(), F("div", tt, [
-          g("button", {
-            class: J(["iconbutton", { isActive: C.value }]),
+      m("div", ft, [
+        S.toggleableLayers && S.toggleableLayers.length > 0 ? (l(), L("div", dt, [
+          m("button", {
+            class: re(["iconbutton", { isActive: I.value }]),
             "aria-label": "Toon lagen",
-            "aria-expanded": C.value,
-            onClick: le
+            "aria-expanded": I.value,
+            onClick: ge
           }, [
-            d(s(qe))
-          ], 10, ot),
-          d(Q, { name: "fade" }, {
-            default: b(() => [
-              C.value ? (a(), f(Xe, {
+            g(r(nt))
+          ], 10, pt),
+          g(le, { name: "fade" }, {
+            default: k(() => [
+              I.value ? (l(), f(lt, {
                 key: 0,
-                toggleableLayers: _.toggleableLayers || [],
-                visibleToggleableLayers: M.value,
-                onToggleLayer: ce
-              }, null, 8, ["toggleableLayers", "visibleToggleableLayers"])) : p("", !0)
+                toggleableLayers: S.toggleableLayers || [],
+                visibleToggleableLayers: O.value,
+                onToggleLayer: be
+              }, null, 8, ["toggleableLayers", "visibleToggleableLayers"])) : d("", !0)
             ]),
             _: 1
           })
-        ])) : p("", !0)
+        ])) : d("", !0)
       ]),
-      g("div", nt, [
-        i.baseLayers && i.baseLayers.length > 0 ? (a(), F("div", it, [
-          g("button", {
-            class: J(["iconbutton", { isActive: I.value }]),
+      m("div", mt, [
+        i.baseLayers && i.baseLayers.length > 0 ? (l(), L("div", yt, [
+          m("button", {
+            class: re(["iconbutton", { isActive: F.value }]),
             "aria-label": "Toon basislagen",
-            "aria-expanded": I.value,
-            onClick: ae
+            "aria-expanded": F.value,
+            onClick: ve
           }, [
-            d(s(Ye))
-          ], 10, st),
-          d(Q, { name: "fade" }, {
-            default: b(() => [
-              I.value ? (a(), f(Qe, {
+            g(r(ot))
+          ], 10, vt),
+          g(le, { name: "fade" }, {
+            default: k(() => [
+              F.value ? (l(), f(rt, {
                 key: 0,
                 baseLayers: i.baseLayers,
-                selectedBaseLayerId: O.value,
-                onSelectBaseLayer: ue
-              }, null, 8, ["baseLayers", "selectedBaseLayerId"])) : p("", !0)
+                selectedBaseLayerId: _.value,
+                onSelectBaseLayer: we
+              }, null, 8, ["baseLayers", "selectedBaseLayerId"])) : d("", !0)
             ]),
             _: 1
           })
-        ])) : p("", !0),
-        g("div", rt, [
-          g("button", {
+        ])) : d("", !0),
+        m("div", gt, [
+          m("button", {
             class: "iconbutton",
             "aria-label": "Zoom in",
-            onClick: fe
+            onClick: he
           }, [
-            d(s(He))
+            g(r(it))
           ]),
-          g("button", {
+          m("button", {
             class: "iconbutton",
             "aria-label": "Zoom out",
-            onClick: de
+            onClick: Le
           }, [
-            d(s(Je))
+            g(r(st))
           ])
         ])
       ])
@@ -518,5 +555,5 @@ const Ee = { class: "map-container" }, et = { class: "bottom-left-panels" }, tt
   }
 });
 export {
-  Ct as default
+  Zt as default
 };

package/dist/style.css

@@ -1 +1 @@
-.wrapper[data-v-7a503b81]{position:absolute;bottom:100%;right:0;padding:8px 12px;background:#fff;border-radius:4px 4px 0;box-shadow:0 2px 8px #00000026;min-width:150px;z-index:1000;margin-bottom:8px}ul[data-v-7a503b81]{list-style:none;margin:0;padding:0}.layer[data-v-7a503b81]{position:relative;display:flex;margin-bottom:4px}.layer[data-v-7a503b81]:last-child{margin-bottom:0}.layer>input[data-v-7a503b81]{position:absolute;top:6px;left:0;width:12px;height:12px;margin:0;cursor:pointer}.layer>label[data-v-7a503b81]{display:block;position:relative;width:100%;cursor:pointer;padding:3px 0 3px 18px;-webkit-user-select:none;user-select:none;font-size:14px;white-space:nowrap}.wrapper[data-v-16f7d1b3]{position:absolute;bottom:100%;left:0;padding:12px;background:#fff;border-radius:4px 4px 4px 0;box-shadow:0 2px 8px #00000026;min-width:200px;z-index:1000;margin-bottom:8px}ul[data-v-16f7d1b3]{list-style:none;margin:0;padding:0}.layer[data-v-16f7d1b3]{margin-bottom:8px}.layer[data-v-16f7d1b3]:last-child{margin-bottom:0}.layer-control[data-v-16f7d1b3]{display:flex;align-items:center;cursor:pointer;gap:8px}.layer-checkbox[data-v-16f7d1b3]{flex-shrink:0}.layer-title[data-v-16f7d1b3]{font-size:14px;font-weight:500;color:#333;line-height:1.3}.map-container[data-v-67707055]{position:relative;width:100%;height:100%}.bottom-right-panels[data-v-67707055]{position:absolute;z-index:1;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px}.bottom-left-panels[data-v-67707055]{position:absolute;z-index:1;bottom:20px;left:20px;display:flex;flex-direction:column;gap:8px}.zoom-panel[data-v-67707055],.base-layers-control[data-v-67707055],.layers-control[data-v-67707055]{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 1px 4px #0003;overflow:visible;position:relative}.iconbutton[data-v-67707055]{width:30px;height:30px;border:none;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s;padding:0}.iconbutton[data-v-67707055]:hover{background:#f0f0f0}.iconbutton.isActive[data-v-67707055]{background:#e6f3ff}.iconbutton[data-v-67707055]:not(:last-child){border-bottom:1px solid #ddd}.fade-enter-active[data-v-67707055],.fade-leave-active[data-v-67707055]{transition:opacity .2s ease}.fade-enter-from[data-v-67707055],.fade-leave-to[data-v-67707055]{opacity:0}.modify-overlay[data-v-67707055]{display:flex;gap:4px;background:#fff;padding:6px;border-radius:4px;box-shadow:0 2px 8px #0003;border:1px solid #ccc}.modify-btn[data-v-67707055]{padding:6px 12px;border:none;border-radius:3px;cursor:pointer;font-size:12px;font-weight:500;transition:background-color .2s}.modify-btn-ok[data-v-67707055]{background:#4caf50;color:#fff}.modify-btn-ok[data-v-67707055]:hover{background:#45a049}.modify-btn-cancel[data-v-67707055]{background:#f44336;color:#fff}.modify-btn-cancel[data-v-67707055]:hover{background:#da190b}
+.wrapper[data-v-7a503b81]{position:absolute;bottom:100%;right:0;padding:8px 12px;background:#fff;border-radius:4px 4px 0;box-shadow:0 2px 8px #00000026;min-width:150px;z-index:1000;margin-bottom:8px}ul[data-v-7a503b81]{list-style:none;margin:0;padding:0}.layer[data-v-7a503b81]{position:relative;display:flex;margin-bottom:4px}.layer[data-v-7a503b81]:last-child{margin-bottom:0}.layer>input[data-v-7a503b81]{position:absolute;top:6px;left:0;width:12px;height:12px;margin:0;cursor:pointer}.layer>label[data-v-7a503b81]{display:block;position:relative;width:100%;cursor:pointer;padding:3px 0 3px 18px;-webkit-user-select:none;user-select:none;font-size:14px;white-space:nowrap}.wrapper[data-v-16f7d1b3]{position:absolute;bottom:100%;left:0;padding:12px;background:#fff;border-radius:4px 4px 4px 0;box-shadow:0 2px 8px #00000026;min-width:200px;z-index:1000;margin-bottom:8px}ul[data-v-16f7d1b3]{list-style:none;margin:0;padding:0}.layer[data-v-16f7d1b3]{margin-bottom:8px}.layer[data-v-16f7d1b3]:last-child{margin-bottom:0}.layer-control[data-v-16f7d1b3]{display:flex;align-items:center;cursor:pointer;gap:8px}.layer-checkbox[data-v-16f7d1b3]{flex-shrink:0}.layer-title[data-v-16f7d1b3]{font-size:14px;font-weight:500;color:#333;line-height:1.3}.map-container[data-v-00ea6e03]{position:relative;width:100%;height:100%}.bottom-right-panels[data-v-00ea6e03]{position:absolute;z-index:1;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px}.bottom-left-panels[data-v-00ea6e03]{position:absolute;z-index:1;bottom:20px;left:20px;display:flex;flex-direction:column;gap:8px}.zoom-panel[data-v-00ea6e03],.base-layers-control[data-v-00ea6e03],.layers-control[data-v-00ea6e03]{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 1px 4px #0003;overflow:visible;position:relative}.iconbutton[data-v-00ea6e03]{width:30px;height:30px;border:none;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s;padding:0}.iconbutton[data-v-00ea6e03]:hover{background:#f0f0f0}.iconbutton.isActive[data-v-00ea6e03]{background:#e6f3ff}.iconbutton[data-v-00ea6e03]:not(:last-child){border-bottom:1px solid #ddd}.fade-enter-active[data-v-00ea6e03],.fade-leave-active[data-v-00ea6e03]{transition:opacity .2s ease}.fade-enter-from[data-v-00ea6e03],.fade-leave-to[data-v-00ea6e03]{opacity:0}.modify-overlay[data-v-00ea6e03]{display:flex;flex-direction:column;align-items:stretch;gap:6px;background:#fff;padding:6px;border-radius:4px;box-shadow:0 2px 8px #0003;border:1px solid #ccc}.modify-overlay-label[data-v-00ea6e03]{max-width:220px;padding:0 6px;color:#333;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modify-overlay-actions[data-v-00ea6e03]{display:flex;gap:4px}.modify-btn[data-v-00ea6e03]{padding:6px 12px;border:none;border-radius:3px;cursor:pointer;font-size:12px;font-weight:500;transition:background-color .2s}.modify-btn-ok[data-v-00ea6e03]{background:#4caf50;color:#fff}.modify-btn-ok[data-v-00ea6e03]:hover{background:#45a049}.modify-btn-cancel[data-v-00ea6e03]{background:#f44336;color:#fff}.modify-btn-cancel[data-v-00ea6e03]:hover{background:#da190b}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@delta10/atlas-sdk",
   "private": false,
-  "version": "0.1.12",
+  "version": "0.2.1",
   "type": "module",
   "publishConfig": {
     "access": "public"