@watergis/maplibre-gl-terradraw 0.0.4 → 0.0.5

package/README.md

@@ -7,69 +7,15 @@
 
 This plugin is to add controls to your MapLibre for sketching powered by [Terra Draw](https://github.com/JamesLMilner/terra-draw) library.
 
-## Usage
-
-### NPM
-
-- install
+## Install
 
 ```shell
 npm i -D @watergis/maplibre-gl-terradraw
 ```
 
-Then,
-
-```ts
-import { MaplibreTerradrawControl } from '@watergis/maplibre-gl-terradraw';
-import '@watergis/maplibre-gl-terradraw/dist/maplibre-gl-terradraw.css';
-
-map.addControl(
-	new MaplibreTerradrawControl({
-		point: true,
-		line: true,
-		polygon: true,
-		rectangle: true,
-		circle: true,
-		freehand: true,
-		angledRectangle: true,
-		select: true
-	}),
-	'top-left'
-);
-```
-
-As default, all Terra Draw modes are enabled, you can disable options if you don't want to use them.
-
-You can get Terra Draw instance by the following function.
-
-```ts
-const drawControl = new MaplibreTerradrawControl();
-const drawInstance = drawControl.getTerraDrawInstance();
-```
-
-You can add event listener to subscribe Terra Draw event as you wish. The below example is to subscribe `select` event of Terra Draw.
-
-```ts
-drawInstance.on('select', (id: string) => {
-	const snapshot = drawInstance.getSnapshot();
-	const polygon = snapshot?.find((feature) => feature.id === id);
-	console.log(polygon);
-});
-```
-
-### CDN
-
-Include CSS and umd.js from CDN as follows.
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-terradraw@latest/dist/maplibre-gl-terradraw.umd.js"></script>
-<link
-	rel="stylesheet"
-	href="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-terradraw@latest/dist/maplibre-gl-terradraw.css"
-/>
-```
+## Usage
 
-For CDN example, please refer to [index_cdn.html](./static/index_cdn.html).
+See the [documentation](https://terradraw.water-gis.com/).
 
 ## Contribution
 

package/dist/maplibre-gl-terradraw.es.js

@@ -2747,7 +2747,8 @@ const si = {
   circle: !0,
   freehand: !0,
   angledRectangle: !0,
-  select: !0
+  select: !0,
+  open: !1
 }, ni = (s) => {
   const t = [];
   return t.push(
@@ -2843,6 +2844,10 @@ const si = {
   ), t;
 };
 class ai {
+  /**
+   * Constructor
+   * @param options Plugin control options
+   */
   constructor(t) {
     k(this, "controlContainer");
     k(this, "map");
@@ -2863,21 +2868,12 @@ class ai {
     const e = ni(this.options);
     if (e.length === 0)
       throw new Error("At least a mode must be enabled.");
-    return this.terradraw = new oi({
+    return this.isExpanded = this.options.open === !0, this.terradraw = new oi({
       adapter: new pe({ map: t }),
       modes: e
-    }), this.terradraw.start(), this.controlContainer = document.createElement("div"), this.controlContainer.classList.add("maplibregl-ctrl"), this.controlContainer.classList.add("maplibregl-ctrl-group"), this.addButton = document.createElement("button"), this.addButton.classList.add("maplibregl-terradraw-add-button"), this.addButton.type = "button", this.addButton.addEventListener("click", () => {
-      var o, n;
-      if (!this.terradraw) return;
-      const i = document.getElementsByClassName("maplibregl-terradraw-add-control");
-      for (let r = 0; r < i.length; r++) {
-        const a = i.item(r);
-        a && (this.isExpanded ? (a.classList.add("hidden"), (o = this.addButton) == null || o.classList.remove("enabled"), this.resetActiveMode()) : (a.classList.remove("hidden"), (n = this.addButton) == null || n.classList.add("enabled")));
-      }
-      this.isExpanded = !this.isExpanded;
-    }), e.forEach((i) => {
+    }), this.terradraw.start(), this.controlContainer = document.createElement("div"), this.controlContainer.classList.add("maplibregl-ctrl"), this.controlContainer.classList.add("maplibregl-ctrl-group"), this.addButton = document.createElement("button"), this.addButton.classList.add("maplibregl-terradraw-add-button"), this.isExpanded && this.addButton.classList.add("enabled"), this.addButton.type = "button", this.addButton.addEventListener("click", this.toggleEditor.bind(this)), e.forEach((i) => {
       i.mode !== "render" && this.addTerradrawButton(i.mode);
-    }), this.deleteButton = document.createElement("button"), this.deleteButton.classList.add("maplibregl-terradraw-add-control"), this.deleteButton.classList.add("maplibregl-terradraw-delete-button"), this.deleteButton.classList.add("hidden"), this.deleteButton.type = "button", this.deleteButton.addEventListener("click", () => {
+    }), this.deleteButton = document.createElement("button"), this.deleteButton.classList.add("maplibregl-terradraw-add-control"), this.deleteButton.classList.add("maplibregl-terradraw-delete-button"), this.isExpanded || this.deleteButton.classList.add("hidden"), this.deleteButton.type = "button", this.deleteButton.addEventListener("click", () => {
       this.terradraw && this.terradraw.enabled && (this.terradraw.clear(), this.deactivate());
     }), this.controlContainer.appendChild(this.addButton), Object.values(this.modeButtons).forEach((i) => {
       var o;
@@ -2887,15 +2883,42 @@ class ai {
   onRemove() {
     !this.controlContainer || !this.controlContainer.parentNode || !this.map || !this.addButton || (this.modeButtons = {}, this.terradraw = void 0, this.map = void 0);
   }
+  /**
+   * Activate Terra Draw to start drawing
+   */
   activate() {
     this.terradraw && (this.terradraw.enabled || this.terradraw.start());
   }
+  /**
+   * Deactivate Terra Draw to stop drawing
+   */
   deactivate() {
     this.terradraw && this.terradraw.enabled && (this.resetActiveMode(), this.terradraw.stop());
   }
+  /**
+   * Get the Terra Draw instance.
+   * For the Terra Draw API, please refer to https://terradraw.io/#/api
+   * @returns Terra Draw instance
+   */
   getTerraDrawInstance() {
     return this.terradraw;
   }
+  /**
+   * Toggle editor control
+   */
+  toggleEditor() {
+    var e, i;
+    if (!this.terradraw) return;
+    const t = document.getElementsByClassName("maplibregl-terradraw-add-control");
+    for (let o = 0; o < t.length; o++) {
+      const n = t.item(o);
+      n && (this.isExpanded ? n.classList.add("hidden") : n.classList.remove("hidden"));
+    }
+    this.isExpanded ? ((e = this.addButton) == null || e.classList.remove("enabled"), this.resetActiveMode()) : (i = this.addButton) == null || i.classList.add("enabled"), this.isExpanded = !this.isExpanded;
+  }
+  /**
+   * Reset active mode to back to render mode
+   */
   resetActiveMode() {
     var e;
     if (!this.terradraw) return;
@@ -2907,9 +2930,13 @@ class ai {
     }
     this.activeMode = "render", (e = this.terradraw) == null || e.setMode("render");
   }
+  /**
+   * Add Terra Draw drawing mode button
+   * @param mode Terra Draw mode name
+   */
   addTerradrawButton(t) {
     const e = document.createElement("button");
-    e.classList.add("maplibregl-terradraw-add-control"), e.classList.add(`maplibregl-terradraw-add-${t}-button`), e.classList.add("hidden"), e.type = "button", e.addEventListener("click", () => {
+    e.classList.add("maplibregl-terradraw-add-control"), e.classList.add(`maplibregl-terradraw-add-${t}-button`), this.isExpanded || e.classList.add("hidden"), e.type = "button", e.addEventListener("click", () => {
       if (!this.terradraw) return;
       const i = e.classList.contains("active");
       this.activate(), this.resetActiveMode(), i || (this.terradraw.setMode(t), this.activeMode = t, e.classList.add("active"));