@2gis/mapgl-terra-draw
Version:
TerraDraw adapter for MapGL JS API
814 lines (813 loc) • 27 kB
JavaScript
var R = Object.defineProperty;
var F = (o, t, e) => t in o ? R(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var g = (o, t, e) => F(o, typeof t != "symbol" ? t + "" : t, e);
import { TerraDrawExtend as z, TerraDrawSelectMode as q, TerraDrawPointMode as G, TerraDrawLineStringMode as U, TerraDrawPolygonMode as V, TerraDrawRectangleMode as X, TerraDrawCircleMode as Y, TerraDrawFreehandMode as J, TerraDrawRenderMode as Z, TerraDrawAngledRectangleMode as K, TerraDrawSectorMode as Q, TerraDrawSensorMode as ee, ValidateNotSelfIntersecting as te, TerraDraw as oe } from "terra-draw";
const y = {
fillColor: "#3388ff33",
outlineColor: "#3388ff",
outlineWidth: 3,
pointCap: "round"
};
function ne(o, t = "33") {
const e = o.replace("#", "");
return e.length === 3 ? `#${e.split("").map((r) => r + r).join("")}${t}` : e.length === 6 ? `#${e}${t}` : o;
}
const re = (o, t, e = "round") => {
let n = "";
return e === "round" ? n = `<circle cx="3.5" cy="3.5" r="2.5" fill="${t}" stroke="${o}" stroke-width="1.2"/>` : e === "square" ? n = `<rect x="1" y="1" width="5" height="5" fill="${t}" stroke="${o}" stroke-width="1.2"/>` : n = `<circle cx="3.5" cy="3.5" r="1" fill="${o}"/>`, "data:image/svg+xml;base64," + btoa(`<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
${n}
</svg>`);
};
class ie extends z.TerraDrawBaseAdapter {
constructor(e) {
super(e);
g(this, "_map");
g(this, "_mapgl");
g(this, "_container");
g(this, "_dynamicObjects");
g(this, "_style");
g(this, "_drawingStyle");
g(this, "featureStyles");
this._mapgl = e.mapgl, this._map = e.map, this._container = this._map.getContainer(), this._dynamicObjects = {}, this._style = { ...y, ...e.style }, this._drawingStyle = { ...this._style, ...e.drawingStyle }, this.featureStyles = {};
}
/**
* Returns the longitude and latitude coordinates from a given PointerEvent on the map.
* @param event The PointerEvent or MouseEvent containing the screen coordinates of the pointer.
* @returns An object with 'lng' and 'lat' properties representing the longitude and latitude, or null if the conversion is not possible.
*/
getLngLatFromEvent(e) {
const { left: n, top: r } = this._container.getBoundingClientRect(), s = e.clientX - n, i = e.clientY - r;
return this.unproject(s, i);
}
/**
*Retrieves the HTML element of the Mapbox element that handles interaction events
* @returns The HTMLElement representing the map container.
*/
getMapEventElement() {
return this._map.getCanvas();
}
/**
* Enables or disables the draggable functionality of the map.
* @param enabled Set to true to enable map dragging, or false to disable it.
*/
setDraggability(e) {
const n = this._map._impl;
e ? n.modules.handler.unblock() : n.modules.handler.block();
}
/**
* Converts longitude and latitude coordinates to pixel coordinates in the map container.
* @param lng The longitude coordinate to project.
* @param lat The latitude coordinate to project.
* @returns An object with 'x' and 'y' properties representing the pixel coordinates within the map container.
*/
project(e, n) {
const [r, s] = this._map.project([e, n]);
return { x: r, y: s };
}
/**
* Converts pixel coordinates in the map container to longitude and latitude coordinates.
* @param x The x-coordinate in the map container to unproject.
* @param y The y-coordinate in the map container to unproject.
* @returns An object with 'lng' and 'lat' properties representing the longitude and latitude coordinates.
*/
unproject(e, n) {
const [r, s] = this._map.unproject([e, n]);
return { lng: r, lat: s };
}
/**
* Sets the cursor style for the map container.
* @param cursor The CSS cursor style to apply, or 'unset' to remove any previously applied cursor style.
*/
setCursor(e) {
const n = this._map.getCanvas();
e === "unset" ? n.style.removeProperty("cursor") : n.style.cursor = e;
}
/**
* Enables or disables the double-click to zoom functionality on the map.
* @param enabled Set to true to enable double-click to zoom, or false to disable it.
*/
setDoubleClickToZoom(e) {
const n = this._map._impl;
e ? n.modules.handler.unblock() : n.modules.handler.block();
}
/**
* Updates the current style settings
*/
updateStyle(e) {
this._style = { ...this._style, ...e };
}
/**
* Updates the current drawing style settings
*/
updateDrawingStyle(e) {
this._drawingStyle = { ...this._drawingStyle, ...e };
}
updateFeature(e) {
const n = e.id;
if (!n) {
console.warn("Refusing attempt to process a feature without id.");
return;
}
let r = n;
e.properties.selectionPoint && (r = String(e.properties.selectionPointFeatureId)), e.properties.midPoint && (r = String(e.properties.midPointFeatureId)), this.featureStyles[r] || (this.featureStyles[r] = { ...this._style });
const s = e.properties.mode !== void 0, i = this.featureStyles[r] ?? (s ? this._drawingStyle : this._style);
switch (e.geometry.type) {
case "Polygon": {
const l = this._dynamicObjects[n];
l && l.destroy(), e.properties.color || (e.properties.color = i.fillColor, e.properties.outlineColor = i.outlineColor, e.properties.outlineWidth = i.outlineWidth), this._dynamicObjects[n] = new this._mapgl.Polygon(this._map, {
coordinates: e.geometry.coordinates,
color: String(e.properties.color),
strokeColor: String(e.properties.outlineColor),
strokeWidth: Number(e.properties.outlineWidth)
});
break;
}
case "LineString": {
const l = this._dynamicObjects[n];
l && l.destroy(), e.properties.color || (e.properties.color = i.outlineColor, e.properties.width = i.outlineWidth), this._dynamicObjects[n] = new this._mapgl.Polyline(this._map, {
coordinates: e.geometry.coordinates,
color: String(e.properties.color),
width: Number(e.properties.width)
});
break;
}
case "Point": {
const l = this._dynamicObjects[n];
l && l.destroy(), this._dynamicObjects[n] = new this._mapgl.Marker(this._map, {
coordinates: e.geometry.coordinates,
icon: re(
i.outlineColor,
e.properties.midPoint ? "#ffffff" : i.fillColor,
i.pointCap
),
size: [16, 16],
anchor: [8, 8]
});
break;
}
}
}
/**
* Renders GeoJSON features on the map using the provided styling configuration.
* @param changes An object containing arrays of created, updated, and unchanged features to render.
* @param styling An object mapping draw modes to feature styling functions
*/
render(e, n) {
for (const r of e.created)
this.updateFeature(r);
for (const r of e.updated)
this.updateFeature(r);
for (const r of e.deletedIds)
this._dynamicObjects[r] && (this._dynamicObjects[r].destroy(), delete this._dynamicObjects[r]);
}
/**
* Clears the map and store of all rendered data layers
* @returns void
* */
clear() {
this._currentModeCallbacks && this._currentModeCallbacks.onClear();
for (const e in this._dynamicObjects) {
const n = this._dynamicObjects[e];
n && n.destroy(), delete this._dynamicObjects[e];
}
}
getCoordinatePrecision() {
return super.getCoordinatePrecision();
}
unregister() {
super.unregister();
}
register(e) {
var n;
super.register(e), (n = this._currentModeCallbacks) != null && n.onReady && this._currentModeCallbacks.onReady();
}
}
function se() {
return [
new q({
projection: "web-mercator",
flags: {
arbitrary: {
feature: {}
},
polygon: {
feature: {
draggable: !0,
rotateable: !0,
scaleable: !0,
coordinates: {
snappable: !0,
midpoints: !0,
draggable: !0,
deletable: !0
}
}
},
freehand: {
feature: { draggable: !0, coordinates: {} }
},
linestring: {
feature: {
draggable: !0,
rotateable: !0,
scaleable: !0,
coordinates: {
midpoints: !0,
draggable: !0,
deletable: !0
}
}
},
rectangle: {
feature: {
draggable: !0,
coordinates: {
midpoints: !1,
draggable: !0,
resizable: "center",
deletable: !0
}
}
},
circle: {
feature: {
draggable: !0,
coordinates: {
midpoints: !1,
draggable: !0,
resizable: "center-fixed",
deletable: !0
}
}
},
point: {
feature: {
draggable: !0
}
}
}
}),
new G({ editable: !0 }),
new U({
snapping: {
toCoordinate: !0
},
editable: !0
}),
new V({
pointerDistance: 20,
snapping: {
toLine: !1,
toCoordinate: !1
},
editable: !0,
validation: (o, { updateType: t }) => t === "finish" || t === "commit" ? te(o) : { valid: !0 },
styles: {
snappingPointColor: "#ffff00"
}
}),
new X(),
new Y(),
new J({
autoClose: !0,
minDistance: 10,
pointerDistance: 10
}),
new Z({
modeName: "arbitrary",
styles: {
polygonFillColor: "#4357AD",
polygonOutlineColor: "#48A9A6",
polygonOutlineWidth: 2
}
}),
new K(),
new Q({}),
new ee()
];
}
const C = (o, t = 0, e = 1) => o > e ? e : o < t ? t : o, u = (o, t = 0, e = Math.pow(10, t)) => Math.round(e * o) / e, ae = (o) => pe(M(o)), M = (o) => (o[0] === "#" && (o = o.substring(1)), o.length < 6 ? {
r: parseInt(o[0] + o[0], 16),
g: parseInt(o[1] + o[1], 16),
b: parseInt(o[2] + o[2], 16),
a: o.length === 4 ? u(parseInt(o[3] + o[3], 16) / 255, 2) : 1
} : {
r: parseInt(o.substring(0, 2), 16),
g: parseInt(o.substring(2, 4), 16),
b: parseInt(o.substring(4, 6), 16),
a: o.length === 8 ? u(parseInt(o.substring(6, 8), 16) / 255, 2) : 1
}), le = (o) => ue(de(o)), ce = ({ h: o, s: t, v: e, a: n }) => {
const r = (200 - t) * e / 100;
return {
h: u(o),
s: u(r > 0 && r < 200 ? t * e / 100 / (r <= 100 ? r : 200 - r) * 100 : 0),
l: u(r / 2),
a: u(n, 2)
};
}, L = (o) => {
const { h: t, s: e, l: n } = ce(o);
return `hsl(${t}, ${e}%, ${n}%)`;
}, de = ({ h: o, s: t, v: e, a: n }) => {
o = o / 360 * 6, t = t / 100, e = e / 100;
const r = Math.floor(o), s = e * (1 - t), i = e * (1 - (o - r) * t), l = e * (1 - (1 - o + r) * t), a = r % 6;
return {
r: u([e, i, s, s, l, e][a] * 255),
g: u([l, e, e, i, s, s][a] * 255),
b: u([s, s, l, e, e, i][a] * 255),
a: u(n, 2)
};
}, w = (o) => {
const t = o.toString(16);
return t.length < 2 ? "0" + t : t;
}, ue = ({ r: o, g: t, b: e, a: n }) => {
const r = n < 1 ? w(u(n * 255)) : "";
return "#" + w(o) + w(t) + w(e) + r;
}, pe = ({ r: o, g: t, b: e, a: n }) => {
const r = Math.max(o, t, e), s = r - Math.min(o, t, e), i = s ? r === o ? (t - e) / s : r === t ? 2 + (e - o) / s : 4 + (o - t) / s : 0;
return {
h: u(60 * (i < 0 ? i + 6 : i)),
s: u(r ? s / r * 100 : 0),
v: u(r / 255 * 100),
a: n
};
}, A = (o, t) => {
if (o === t)
return !0;
for (const e in o)
if (o[e] !== t[e])
return !1;
return !0;
}, he = (o, t) => o.toLowerCase() === t.toLowerCase() ? !0 : A(M(o), M(t)), O = {}, B = (o) => {
let t = O[o];
return t || (t = document.createElement("template"), t.innerHTML = o, O[o] = t), t;
}, D = (o, t, e) => {
o.dispatchEvent(new CustomEvent(t, {
bubbles: !0,
detail: e
}));
};
let b = !1;
const T = (o) => "touches" in o, me = (o) => b && !T(o) ? !1 : (b || (b = T(o)), !0), j = (o, t) => {
const e = T(t) ? t.touches[0] : t, n = o.el.getBoundingClientRect();
D(o.el, "move", o.getMove({
x: C((e.pageX - (n.left + window.pageXOffset)) / n.width),
y: C((e.pageY - (n.top + window.pageYOffset)) / n.height)
}));
}, ge = (o, t) => {
const e = t.keyCode;
e > 40 || o.xy && e < 37 || e < 33 || (t.preventDefault(), D(o.el, "move", o.getMove({
x: e === 39 ? 0.01 : e === 37 ? -0.01 : e === 34 ? 0.05 : e === 33 ? -0.05 : e === 35 ? 1 : e === 36 ? -1 : 0,
y: e === 40 ? 0.01 : e === 38 ? -0.01 : 0
}, !0)));
};
class W {
constructor(t, e, n, r) {
const s = B(`<div role="slider" tabindex="0" part="${e}" ${n}><div part="${e}-pointer"></div></div>`);
t.appendChild(s.content.cloneNode(!0));
const i = t.querySelector(`[part=${e}]`);
i.addEventListener("mousedown", this), i.addEventListener("touchstart", this), i.addEventListener("keydown", this), this.el = i, this.xy = r, this.nodes = [i.firstChild, i];
}
set dragging(t) {
const e = t ? document.addEventListener : document.removeEventListener;
e(b ? "touchmove" : "mousemove", this), e(b ? "touchend" : "mouseup", this);
}
handleEvent(t) {
switch (t.type) {
case "mousedown":
case "touchstart":
if (t.preventDefault(), !me(t) || !b && t.button != 0)
return;
this.el.focus(), j(this, t), this.dragging = !0;
break;
case "mousemove":
case "touchmove":
t.preventDefault(), j(this, t);
break;
case "mouseup":
case "touchend":
this.dragging = !1;
break;
case "keydown":
ge(this, t);
break;
}
}
style(t) {
t.forEach((e, n) => {
for (const r in e)
this.nodes[n].style.setProperty(r, e[r]);
});
}
}
class fe extends W {
constructor(t) {
super(t, "hue", 'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"', !1);
}
update({ h: t }) {
this.h = t, this.style([
{
left: `${t / 360 * 100}%`,
color: L({ h: t, s: 100, v: 100, a: 1 })
}
]), this.el.setAttribute("aria-valuenow", `${u(t)}`);
}
getMove(t, e) {
return { h: e ? C(this.h + t.x * 360, 0, 360) : 360 * t.x };
}
}
class be extends W {
constructor(t) {
super(t, "saturation", 'aria-label="Color"', !0);
}
update(t) {
this.hsva = t, this.style([
{
top: `${100 - t.v}%`,
left: `${t.s}%`,
color: L(t)
},
{
"background-color": L({ h: t.h, s: 100, v: 100, a: 1 })
}
]), this.el.setAttribute("aria-valuetext", `Saturation ${u(t.s)}%, Brightness ${u(t.v)}%`);
}
getMove(t, e) {
return {
s: e ? C(this.hsva.s + t.x * 100, 0, 100) : t.x * 100,
v: e ? C(this.hsva.v - t.y * 100, 0, 100) : Math.round(100 - t.y * 100)
};
}
}
const ye = ':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}', Ce = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", we = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", v = Symbol("same"), E = Symbol("color"), I = Symbol("hsva"), k = Symbol("update"), P = Symbol("parts"), H = Symbol("css"), N = Symbol("sliders");
class ve extends HTMLElement {
static get observedAttributes() {
return ["color"];
}
get [H]() {
return [ye, Ce, we];
}
get [N]() {
return [be, fe];
}
get color() {
return this[E];
}
set color(t) {
if (!this[v](t)) {
const e = this.colorModel.toHsva(t);
this[k](e), this[E] = t;
}
}
constructor() {
super();
const t = B(`<style>${this[H].join("")}</style>`), e = this.attachShadow({ mode: "open" });
e.appendChild(t.content.cloneNode(!0)), e.addEventListener("move", this), this[P] = this[N].map((n) => new n(e));
}
connectedCallback() {
if (this.hasOwnProperty("color")) {
const t = this.color;
delete this.color, this.color = t;
} else this.color || (this.color = this.colorModel.defaultColor);
}
attributeChangedCallback(t, e, n) {
const r = this.colorModel.fromAttr(n);
this[v](r) || (this.color = r);
}
handleEvent(t) {
const e = this[I], n = { ...e, ...t.detail };
this[k](n);
let r;
!A(n, e) && !this[v](r = this.colorModel.fromHsva(n)) && (this[E] = r, D(this, "color-changed", { value: r }));
}
[v](t) {
return this.color && this.colorModel.equal(t, this.color);
}
[k](t) {
this[I] = t, this[P].forEach((e) => e.update(t));
}
}
const xe = {
defaultColor: "#000",
toHsva: ae,
fromHsva: ({ h: o, s: t, v: e }) => le({ h: o, s: t, v: e, a: 1 }),
equal: he,
fromAttr: (o) => o
};
class Ee extends ve {
get colorModel() {
return xe;
}
}
class ke extends Ee {
}
customElements.define("hex-color-picker", ke);
const S = {
select: {
label: "Select",
icon: "select"
},
point: {
label: "Point",
icon: "place"
// маркер точки
},
linestring: {
label: "LineString",
icon: "timeline"
// линия
},
polygon: {
label: "Polygon",
icon: "pentagon"
// многоугольник
},
freehand: {
label: "Freehand",
icon: "gesture"
// свободное рисование
},
circle: {
label: "Circle",
icon: "radio_button_unchecked"
// круг
},
rectangle: {
label: "Rectangle",
icon: "crop_din"
// прямоугольник
},
"angled-rectangle": {
label: "Angled Rectangle",
icon: "thermostat_carbon"
// повернутый прямоугольник
},
sector: {
label: "Sector",
icon: "pie_chart"
// сектор
},
sensor: {
label: "Sensor",
icon: "sensors"
// сенсор
},
download: {
label: "Download GeoJSON",
icon: "download"
// скачивание
},
clear: {
label: "Delete All",
icon: "delete"
},
color: {
label: "Color",
icon: "palette"
// цвет
},
"stroke-width": {
label: "Stroke Width",
icon: "line_weight"
// толщина линии
},
"point-cap": {
label: "Point Cap",
icon: "adjust"
// тип точки
}
}, Se = [
"select",
"point",
"linestring",
"polygon",
"freehand",
"circle",
"angled-rectangle",
"color",
"stroke-width",
"point-cap",
"download",
"clear"
];
function _e(o, t, e = y) {
const n = document.createElement("div");
n.className = "terra-draw-controls";
const r = t.filter(
(a) => ["download", "clear", "color", "stroke-width", "point-cap"].indexOf(a) === -1
), s = t.filter(
(a) => ["color", "stroke-width", "point-cap"].indexOf(a) !== -1
), i = t.filter((a) => a === "download"), l = t.filter((a) => a === "clear");
if (s.length > 0) {
const a = x("row");
s.forEach((c) => {
if (c === "color") {
const p = Me(e ?? y);
a.appendChild(p);
} else if (c === "stroke-width") {
const p = Le();
a.appendChild(p);
} else if (c === "point-cap") {
const p = Te();
a.appendChild(p);
}
}), n.appendChild(a);
}
if (r.length > 0) {
const a = x();
n.appendChild(a), r.forEach((c) => {
const p = S[c], f = _(p.label, p.icon, c);
a.appendChild(f);
});
}
if (i.length > 0) {
const a = x();
i.forEach((c) => {
const p = S[c], f = _(p.label, p.icon, c);
a.appendChild(f);
}), n.appendChild(a);
}
if (l.length > 0) {
const a = x();
l.forEach((c) => {
const p = S[c], f = _(p.label, p.icon, c);
a.appendChild(f);
}), n.appendChild(a);
}
return o.appendChild(n), n;
}
function x(o = "column") {
const t = document.createElement("div");
return t.classList.add("group"), t.classList.add(o), t;
}
function _(o, t, e) {
const n = document.createElement("div");
n.id = e, n.title = o, n.className = "item";
const r = document.createElement("span");
return r.className = "material-symbols-outlined", r.textContent = t, r.style.cssText = `
font-size: 18px;
line-height: 1;
`, n.appendChild(r), n;
}
function Me(o) {
const t = document.createElement("div");
t.id = "color", t.className = "item color-control", t.id = "color", t.title = "Color";
const e = document.createElement("span");
return e.className = "color-indicator", e.style.backgroundColor = o.outlineColor, e.addEventListener("click", () => {
const n = document.createElement("div");
n.classList.add("color-picker");
const r = document.createElement("hex-color-picker");
r.setAttribute("color", o.outlineColor), n.appendChild(r);
const s = document.createElement("div");
s.classList.add("color-picker-buttons"), n.appendChild(s);
const i = document.createElement("button");
i.textContent = "Close", s.appendChild(i);
const l = document.createElement("button");
l.classList.add("primary"), l.textContent = "Save", s.appendChild(l);
let a;
r.addEventListener("color-changed", (c) => {
a = c.detail.value;
}), i.addEventListener("click", () => {
document.body.removeChild(n);
}), l.addEventListener("click", () => {
a && (t.dispatchEvent(
new CustomEvent("colorchange", {
detail: { color: a }
})
), e.style.backgroundColor = a, r.setAttribute("color", o.outlineColor)), document.body.removeChild(n);
}), document.body.appendChild(n);
}), t.appendChild(e), t;
}
function Le() {
const o = document.createElement("div");
o.className = "item stroke-width-control", o.id = "stroke-width", o.title = "Stroke Width";
const t = document.createElement("span");
t.className = "material-symbols-outlined", t.textContent = "line_weight", t.style.cssText = `
font-size: 18px;
line-height: 1;
`;
const e = document.createElement("input");
return e.type = "range", e.min = "1", e.max = "10", e.value = y.outlineWidth.toString(), e.style.cssText = `
width: 60px;
margin-left: 5px;
`, o.appendChild(t), o.appendChild(e), e.addEventListener("input", () => {
o.dispatchEvent(
new CustomEvent("strokewidthchange", {
detail: { width: parseInt(e.value) }
})
);
}), o;
}
function Te() {
const o = document.createElement("div");
o.className = "item point-cap-control", o.id = "point-cap", o.title = "Point Cap";
const t = document.createElement("span");
t.className = "material-symbols-outlined", t.textContent = "adjust", t.style.cssText = `
font-size: 18px;
line-height: 1;
`;
const e = document.createElement("select");
return e.style.cssText = `
margin-left: 5px;
border: 1px solid #ccc;
border-radius: 2px;
padding: 2px;
`, [
{ value: "round", label: "Round" },
{ value: "square", label: "Square" },
{ value: "none", label: "None" }
].forEach((r) => {
const s = document.createElement("option");
s.value = r.value, s.textContent = r.label, r.value === y.pointCap && (s.selected = !0), e.appendChild(s);
}), o.appendChild(t), o.appendChild(e), e.addEventListener("change", () => {
o.dispatchEvent(
new CustomEvent("pointcapchange", {
detail: { cap: e.value }
})
);
}), o;
}
function De(o, t) {
const e = document.createElement("a");
e.setAttribute("href", "data:application/json;charset=utf-8," + encodeURIComponent(t)), e.setAttribute("download", o), e.style.display = "none", document.body.appendChild(e), e.click(), document.body.removeChild(e);
}
function je({
map: o,
mapgl: t,
container: e = o.getContainer(),
controls: n = Se,
style: r
}) {
const s = { ...y, ...r }, i = new ie({
map: o,
mapgl: t,
coordinatePrecision: 9,
style: s
}), l = new oe({
adapter: i,
modes: se()
}), a = _e(e, n, s), c = {
button: void 0,
mode: "static"
};
if (n.filter(
(d) => ["download", "clear", "color", "stroke-width", "point-cap"].indexOf(d) === -1
).forEach((d) => {
const h = document.getElementById(d);
h && h.addEventListener("click", () => {
c.mode = d, l.setMode(c.mode), c.button && c.button.classList.remove("active"), c.button = h, c.button.classList.add("active");
});
}), n.indexOf("color") !== -1) {
const d = document.getElementById("color");
d && d.addEventListener("colorchange", (h) => {
const m = h.detail.color, $ = ne(m);
i.updateStyle({
outlineColor: m,
fillColor: $
}), i.updateDrawingStyle({
outlineColor: m,
fillColor: $
});
});
}
if (n.indexOf("stroke-width") !== -1) {
const d = document.getElementById("stroke-width");
d && d.addEventListener("strokewidthchange", (h) => {
const m = h.detail.width;
i.updateStyle({ outlineWidth: m }), i.updateDrawingStyle({ outlineWidth: m });
});
}
if (n.indexOf("point-cap") !== -1) {
const d = document.getElementById("point-cap");
d && d.addEventListener("pointcapchange", (h) => {
const m = h.detail.cap;
i.updateStyle({ pointCap: m }), i.updateDrawingStyle({ pointCap: m });
});
}
if (n.indexOf("download") !== -1) {
const d = document.getElementById("download");
d && d.addEventListener("click", () => {
const h = {
type: "FeatureCollection",
features: l.getSnapshot()
};
De("features.json", JSON.stringify(h, null, 2));
});
}
if (n.indexOf("clear") !== -1) {
const d = document.getElementById("clear");
d && d.addEventListener("click", () => {
confirm("Are you sure want to clear all features?") && l.clear();
});
}
return l.start(), { draw: l, cleanup: () => {
l.stop(), a.parentNode && a.parentNode.removeChild(a);
} };
}
export {
S as CONTROL_CONFIGS,
ie as TerraDrawMapGlAdapter,
se as createDefaultModes,
je as createTerraDrawWithUI,
y as defaultStyle,
ne as makeTransparent
};