mapboxgl-tools
Version:
基于mapboxgl的一些实用工具
1,337 lines • 185 kB
JavaScript
import "@wbiokr/css-class";
import { coordListByStr } from "@wbiokr/geo";
var style$2 = "";
class CommonCtrol {
_onOpen() {
this._container.className += " wbiokr-ctrl-active";
}
_onClose() {
this._container.className = this._container.className.replaceAll("wbiokr-ctrl-active", "");
}
}
var xhtml = "http://www.w3.org/1999/xhtml";
var namespaces = {
svg: "http://www.w3.org/2000/svg",
xhtml,
xlink: "http://www.w3.org/1999/xlink",
xml: "http://www.w3.org/XML/1998/namespace",
xmlns: "http://www.w3.org/2000/xmlns/"
};
function namespace(name) {
var prefix = name += "", i2 = prefix.indexOf(":");
if (i2 >= 0 && (prefix = name.slice(0, i2)) !== "xmlns")
name = name.slice(i2 + 1);
return namespaces.hasOwnProperty(prefix) ? { space: namespaces[prefix], local: name } : name;
}
function creatorInherit(name) {
return function() {
var document2 = this.ownerDocument, uri = this.namespaceURI;
return uri === xhtml && document2.documentElement.namespaceURI === xhtml ? document2.createElement(name) : document2.createElementNS(uri, name);
};
}
function creatorFixed(fullname) {
return function() {
return this.ownerDocument.createElementNS(fullname.space, fullname.local);
};
}
function creator(name) {
var fullname = namespace(name);
return (fullname.local ? creatorFixed : creatorInherit)(fullname);
}
function none() {
}
function selector(selector2) {
return selector2 == null ? none : function() {
return this.querySelector(selector2);
};
}
function selection_select(select) {
if (typeof select !== "function")
select = selector(select);
for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
for (var group = groups[j], n2 = group.length, subgroup = subgroups[j] = new Array(n2), node, subnode, i2 = 0; i2 < n2; ++i2) {
if ((node = group[i2]) && (subnode = select.call(node, node.__data__, i2, group))) {
if ("__data__" in node)
subnode.__data__ = node.__data__;
subgroup[i2] = subnode;
}
}
}
return new Selection(subgroups, this._parents);
}
function array(x) {
return x == null ? [] : Array.isArray(x) ? x : Array.from(x);
}
function empty() {
return [];
}
function selectorAll(selector2) {
return selector2 == null ? empty : function() {
return this.querySelectorAll(selector2);
};
}
function arrayAll(select) {
return function() {
return array(select.apply(this, arguments));
};
}
function selection_selectAll(select) {
if (typeof select === "function")
select = arrayAll(select);
else
select = selectorAll(select);
for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
for (var group = groups[j], n2 = group.length, node, i2 = 0; i2 < n2; ++i2) {
if (node = group[i2]) {
subgroups.push(select.call(node, node.__data__, i2, group));
parents.push(node);
}
}
}
return new Selection(subgroups, parents);
}
function matcher(selector2) {
return function() {
return this.matches(selector2);
};
}
function childMatcher(selector2) {
return function(node) {
return node.matches(selector2);
};
}
var find = Array.prototype.find;
function childFind(match) {
return function() {
return find.call(this.children, match);
};
}
function childFirst() {
return this.firstElementChild;
}
function selection_selectChild(match) {
return this.select(match == null ? childFirst : childFind(typeof match === "function" ? match : childMatcher(match)));
}
var filter = Array.prototype.filter;
function children() {
return Array.from(this.children);
}
function childrenFilter(match) {
return function() {
return filter.call(this.children, match);
};
}
function selection_selectChildren(match) {
return this.selectAll(match == null ? children : childrenFilter(typeof match === "function" ? match : childMatcher(match)));
}
function selection_filter(match) {
if (typeof match !== "function")
match = matcher(match);
for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
for (var group = groups[j], n2 = group.length, subgroup = subgroups[j] = [], node, i2 = 0; i2 < n2; ++i2) {
if ((node = group[i2]) && match.call(node, node.__data__, i2, group)) {
subgroup.push(node);
}
}
}
return new Selection(subgroups, this._parents);
}
function sparse(update) {
return new Array(update.length);
}
function selection_enter() {
return new Selection(this._enter || this._groups.map(sparse), this._parents);
}
function EnterNode(parent, datum2) {
this.ownerDocument = parent.ownerDocument;
this.namespaceURI = parent.namespaceURI;
this._next = null;
this._parent = parent;
this.__data__ = datum2;
}
EnterNode.prototype = {
constructor: EnterNode,
appendChild: function(child) {
return this._parent.insertBefore(child, this._next);
},
insertBefore: function(child, next) {
return this._parent.insertBefore(child, next);
},
querySelector: function(selector2) {
return this._parent.querySelector(selector2);
},
querySelectorAll: function(selector2) {
return this._parent.querySelectorAll(selector2);
}
};
function constant(x) {
return function() {
return x;
};
}
function bindIndex(parent, group, enter, update, exit, data) {
var i2 = 0, node, groupLength = group.length, dataLength = data.length;
for (; i2 < dataLength; ++i2) {
if (node = group[i2]) {
node.__data__ = data[i2];
update[i2] = node;
} else {
enter[i2] = new EnterNode(parent, data[i2]);
}
}
for (; i2 < groupLength; ++i2) {
if (node = group[i2]) {
exit[i2] = node;
}
}
}
function bindKey(parent, group, enter, update, exit, data, key) {
var i2, node, nodeByKeyValue = /* @__PURE__ */ new Map(), groupLength = group.length, dataLength = data.length, keyValues = new Array(groupLength), keyValue;
for (i2 = 0; i2 < groupLength; ++i2) {
if (node = group[i2]) {
keyValues[i2] = keyValue = key.call(node, node.__data__, i2, group) + "";
if (nodeByKeyValue.has(keyValue)) {
exit[i2] = node;
} else {
nodeByKeyValue.set(keyValue, node);
}
}
}
for (i2 = 0; i2 < dataLength; ++i2) {
keyValue = key.call(parent, data[i2], i2, data) + "";
if (node = nodeByKeyValue.get(keyValue)) {
update[i2] = node;
node.__data__ = data[i2];
nodeByKeyValue.delete(keyValue);
} else {
enter[i2] = new EnterNode(parent, data[i2]);
}
}
for (i2 = 0; i2 < groupLength; ++i2) {
if ((node = group[i2]) && nodeByKeyValue.get(keyValues[i2]) === node) {
exit[i2] = node;
}
}
}
function datum(node) {
return node.__data__;
}
function selection_data(value, key) {
if (!arguments.length)
return Array.from(this, datum);
var bind = key ? bindKey : bindIndex, parents = this._parents, groups = this._groups;
if (typeof value !== "function")
value = constant(value);
for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
var parent = parents[j], group = groups[j], groupLength = group.length, data = arraylike(value.call(parent, parent && parent.__data__, j, parents)), dataLength = data.length, enterGroup = enter[j] = new Array(dataLength), updateGroup = update[j] = new Array(dataLength), exitGroup = exit[j] = new Array(groupLength);
bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
if (previous = enterGroup[i0]) {
if (i0 >= i1)
i1 = i0 + 1;
while (!(next = updateGroup[i1]) && ++i1 < dataLength)
;
previous._next = next || null;
}
}
}
update = new Selection(update, parents);
update._enter = enter;
update._exit = exit;
return update;
}
function arraylike(data) {
return typeof data === "object" && "length" in data ? data : Array.from(data);
}
function selection_exit() {
return new Selection(this._exit || this._groups.map(sparse), this._parents);
}
function selection_join(onenter, onupdate, onexit) {
var enter = this.enter(), update = this, exit = this.exit();
if (typeof onenter === "function") {
enter = onenter(enter);
if (enter)
enter = enter.selection();
} else {
enter = enter.append(onenter + "");
}
if (onupdate != null) {
update = onupdate(update);
if (update)
update = update.selection();
}
if (onexit == null)
exit.remove();
else
onexit(exit);
return enter && update ? enter.merge(update).order() : update;
}
function selection_merge(context) {
var selection = context.selection ? context.selection() : context;
for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
for (var group0 = groups0[j], group1 = groups1[j], n2 = group0.length, merge = merges[j] = new Array(n2), node, i2 = 0; i2 < n2; ++i2) {
if (node = group0[i2] || group1[i2]) {
merge[i2] = node;
}
}
}
for (; j < m0; ++j) {
merges[j] = groups0[j];
}
return new Selection(merges, this._parents);
}
function selection_order() {
for (var groups = this._groups, j = -1, m = groups.length; ++j < m; ) {
for (var group = groups[j], i2 = group.length - 1, next = group[i2], node; --i2 >= 0; ) {
if (node = group[i2]) {
if (next && node.compareDocumentPosition(next) ^ 4)
next.parentNode.insertBefore(node, next);
next = node;
}
}
}
return this;
}
function selection_sort(compare) {
if (!compare)
compare = ascending;
function compareNode(a2, b) {
return a2 && b ? compare(a2.__data__, b.__data__) : !a2 - !b;
}
for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
for (var group = groups[j], n2 = group.length, sortgroup = sortgroups[j] = new Array(n2), node, i2 = 0; i2 < n2; ++i2) {
if (node = group[i2]) {
sortgroup[i2] = node;
}
}
sortgroup.sort(compareNode);
}
return new Selection(sortgroups, this._parents).order();
}
function ascending(a2, b) {
return a2 < b ? -1 : a2 > b ? 1 : a2 >= b ? 0 : NaN;
}
function selection_call() {
var callback = arguments[0];
arguments[0] = this;
callback.apply(null, arguments);
return this;
}
function selection_nodes() {
return Array.from(this);
}
function selection_node() {
for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
for (var group = groups[j], i2 = 0, n2 = group.length; i2 < n2; ++i2) {
var node = group[i2];
if (node)
return node;
}
}
return null;
}
function selection_size() {
let size = 0;
for (const node of this)
++size;
return size;
}
function selection_empty() {
return !this.node();
}
function selection_each(callback) {
for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
for (var group = groups[j], i2 = 0, n2 = group.length, node; i2 < n2; ++i2) {
if (node = group[i2])
callback.call(node, node.__data__, i2, group);
}
}
return this;
}
function attrRemove(name) {
return function() {
this.removeAttribute(name);
};
}
function attrRemoveNS(fullname) {
return function() {
this.removeAttributeNS(fullname.space, fullname.local);
};
}
function attrConstant(name, value) {
return function() {
this.setAttribute(name, value);
};
}
function attrConstantNS(fullname, value) {
return function() {
this.setAttributeNS(fullname.space, fullname.local, value);
};
}
function attrFunction(name, value) {
return function() {
var v = value.apply(this, arguments);
if (v == null)
this.removeAttribute(name);
else
this.setAttribute(name, v);
};
}
function attrFunctionNS(fullname, value) {
return function() {
var v = value.apply(this, arguments);
if (v == null)
this.removeAttributeNS(fullname.space, fullname.local);
else
this.setAttributeNS(fullname.space, fullname.local, v);
};
}
function selection_attr(name, value) {
var fullname = namespace(name);
if (arguments.length < 2) {
var node = this.node();
return fullname.local ? node.getAttributeNS(fullname.space, fullname.local) : node.getAttribute(fullname);
}
return this.each((value == null ? fullname.local ? attrRemoveNS : attrRemove : typeof value === "function" ? fullname.local ? attrFunctionNS : attrFunction : fullname.local ? attrConstantNS : attrConstant)(fullname, value));
}
function defaultView(node) {
return node.ownerDocument && node.ownerDocument.defaultView || node.document && node || node.defaultView;
}
function styleRemove(name) {
return function() {
this.style.removeProperty(name);
};
}
function styleConstant(name, value, priority) {
return function() {
this.style.setProperty(name, value, priority);
};
}
function styleFunction(name, value, priority) {
return function() {
var v = value.apply(this, arguments);
if (v == null)
this.style.removeProperty(name);
else
this.style.setProperty(name, v, priority);
};
}
function selection_style(name, value, priority) {
return arguments.length > 1 ? this.each((value == null ? styleRemove : typeof value === "function" ? styleFunction : styleConstant)(name, value, priority == null ? "" : priority)) : styleValue(this.node(), name);
}
function styleValue(node, name) {
return node.style.getPropertyValue(name) || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
}
function propertyRemove(name) {
return function() {
delete this[name];
};
}
function propertyConstant(name, value) {
return function() {
this[name] = value;
};
}
function propertyFunction(name, value) {
return function() {
var v = value.apply(this, arguments);
if (v == null)
delete this[name];
else
this[name] = v;
};
}
function selection_property(name, value) {
return arguments.length > 1 ? this.each((value == null ? propertyRemove : typeof value === "function" ? propertyFunction : propertyConstant)(name, value)) : this.node()[name];
}
function classArray(string) {
return string.trim().split(/^|\s+/);
}
function classList(node) {
return node.classList || new ClassList(node);
}
function ClassList(node) {
this._node = node;
this._names = classArray(node.getAttribute("class") || "");
}
ClassList.prototype = {
add: function(name) {
var i2 = this._names.indexOf(name);
if (i2 < 0) {
this._names.push(name);
this._node.setAttribute("class", this._names.join(" "));
}
},
remove: function(name) {
var i2 = this._names.indexOf(name);
if (i2 >= 0) {
this._names.splice(i2, 1);
this._node.setAttribute("class", this._names.join(" "));
}
},
contains: function(name) {
return this._names.indexOf(name) >= 0;
}
};
function classedAdd(node, names) {
var list = classList(node), i2 = -1, n2 = names.length;
while (++i2 < n2)
list.add(names[i2]);
}
function classedRemove(node, names) {
var list = classList(node), i2 = -1, n2 = names.length;
while (++i2 < n2)
list.remove(names[i2]);
}
function classedTrue(names) {
return function() {
classedAdd(this, names);
};
}
function classedFalse(names) {
return function() {
classedRemove(this, names);
};
}
function classedFunction(names, value) {
return function() {
(value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
};
}
function selection_classed(name, value) {
var names = classArray(name + "");
if (arguments.length < 2) {
var list = classList(this.node()), i2 = -1, n2 = names.length;
while (++i2 < n2)
if (!list.contains(names[i2]))
return false;
return true;
}
return this.each((typeof value === "function" ? classedFunction : value ? classedTrue : classedFalse)(names, value));
}
function textRemove() {
this.textContent = "";
}
function textConstant(value) {
return function() {
this.textContent = value;
};
}
function textFunction(value) {
return function() {
var v = value.apply(this, arguments);
this.textContent = v == null ? "" : v;
};
}
function selection_text(value) {
return arguments.length ? this.each(value == null ? textRemove : (typeof value === "function" ? textFunction : textConstant)(value)) : this.node().textContent;
}
function htmlRemove() {
this.innerHTML = "";
}
function htmlConstant(value) {
return function() {
this.innerHTML = value;
};
}
function htmlFunction(value) {
return function() {
var v = value.apply(this, arguments);
this.innerHTML = v == null ? "" : v;
};
}
function selection_html(value) {
return arguments.length ? this.each(value == null ? htmlRemove : (typeof value === "function" ? htmlFunction : htmlConstant)(value)) : this.node().innerHTML;
}
function raise() {
if (this.nextSibling)
this.parentNode.appendChild(this);
}
function selection_raise() {
return this.each(raise);
}
function lower() {
if (this.previousSibling)
this.parentNode.insertBefore(this, this.parentNode.firstChild);
}
function selection_lower() {
return this.each(lower);
}
function selection_append(name) {
var create = typeof name === "function" ? name : creator(name);
return this.select(function() {
return this.appendChild(create.apply(this, arguments));
});
}
function constantNull() {
return null;
}
function selection_insert(name, before) {
var create = typeof name === "function" ? name : creator(name), select = before == null ? constantNull : typeof before === "function" ? before : selector(before);
return this.select(function() {
return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
});
}
function remove() {
var parent = this.parentNode;
if (parent)
parent.removeChild(this);
}
function selection_remove() {
return this.each(remove);
}
function selection_cloneShallow() {
var clone = this.cloneNode(false), parent = this.parentNode;
return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
}
function selection_cloneDeep() {
var clone = this.cloneNode(true), parent = this.parentNode;
return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
}
function selection_clone(deep) {
return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
}
function selection_datum(value) {
return arguments.length ? this.property("__data__", value) : this.node().__data__;
}
function contextListener(listener) {
return function(event) {
listener.call(this, event, this.__data__);
};
}
function parseTypenames(typenames) {
return typenames.trim().split(/^|\s+/).map(function(t2) {
var name = "", i2 = t2.indexOf(".");
if (i2 >= 0)
name = t2.slice(i2 + 1), t2 = t2.slice(0, i2);
return { type: t2, name };
});
}
function onRemove(typename) {
return function() {
var on = this.__on;
if (!on)
return;
for (var j = 0, i2 = -1, m = on.length, o; j < m; ++j) {
if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
this.removeEventListener(o.type, o.listener, o.options);
} else {
on[++i2] = o;
}
}
if (++i2)
on.length = i2;
else
delete this.__on;
};
}
function onAdd(typename, value, options2) {
return function() {
var on = this.__on, o, listener = contextListener(value);
if (on)
for (var j = 0, m = on.length; j < m; ++j) {
if ((o = on[j]).type === typename.type && o.name === typename.name) {
this.removeEventListener(o.type, o.listener, o.options);
this.addEventListener(o.type, o.listener = listener, o.options = options2);
o.value = value;
return;
}
}
this.addEventListener(typename.type, listener, options2);
o = { type: typename.type, name: typename.name, value, listener, options: options2 };
if (!on)
this.__on = [o];
else
on.push(o);
};
}
function selection_on(typename, value, options2) {
var typenames = parseTypenames(typename + ""), i2, n2 = typenames.length, t2;
if (arguments.length < 2) {
var on = this.node().__on;
if (on)
for (var j = 0, m = on.length, o; j < m; ++j) {
for (i2 = 0, o = on[j]; i2 < n2; ++i2) {
if ((t2 = typenames[i2]).type === o.type && t2.name === o.name) {
return o.value;
}
}
}
return;
}
on = value ? onAdd : onRemove;
for (i2 = 0; i2 < n2; ++i2)
this.each(on(typenames[i2], value, options2));
return this;
}
function dispatchEvent(node, type, params) {
var window2 = defaultView(node), event = window2.CustomEvent;
if (typeof event === "function") {
event = new event(type, params);
} else {
event = window2.document.createEvent("Event");
if (params)
event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
else
event.initEvent(type, false, false);
}
node.dispatchEvent(event);
}
function dispatchConstant(type, params) {
return function() {
return dispatchEvent(this, type, params);
};
}
function dispatchFunction(type, params) {
return function() {
return dispatchEvent(this, type, params.apply(this, arguments));
};
}
function selection_dispatch(type, params) {
return this.each((typeof params === "function" ? dispatchFunction : dispatchConstant)(type, params));
}
function* selection_iterator() {
for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
for (var group = groups[j], i2 = 0, n2 = group.length, node; i2 < n2; ++i2) {
if (node = group[i2])
yield node;
}
}
}
var root$1 = [null];
function Selection(groups, parents) {
this._groups = groups;
this._parents = parents;
}
function selection_selection() {
return this;
}
Selection.prototype = {
constructor: Selection,
select: selection_select,
selectAll: selection_selectAll,
selectChild: selection_selectChild,
selectChildren: selection_selectChildren,
filter: selection_filter,
data: selection_data,
enter: selection_enter,
exit: selection_exit,
join: selection_join,
merge: selection_merge,
selection: selection_selection,
order: selection_order,
sort: selection_sort,
call: selection_call,
nodes: selection_nodes,
node: selection_node,
size: selection_size,
empty: selection_empty,
each: selection_each,
attr: selection_attr,
style: selection_style,
property: selection_property,
classed: selection_classed,
text: selection_text,
html: selection_html,
raise: selection_raise,
lower: selection_lower,
append: selection_append,
insert: selection_insert,
remove: selection_remove,
clone: selection_clone,
datum: selection_datum,
on: selection_on,
dispatch: selection_dispatch,
[Symbol.iterator]: selection_iterator
};
function e$1(selector2) {
return typeof selector2 === "string" ? new Selection([[document.querySelector(selector2)]], [document.documentElement]) : new Selection([[selector2]], root$1);
}
const t = { "\u21E7": 16, shift: 16, "\u2303": 17, ctrl: 17, "\u2325": 18, alt: 18, option: 18, "\u2318": 91, meta: 91, cmd: 91, super: 91, win: 91 }, r = { 16: "shiftKey", 17: "ctrlKey", 18: "altKey", 91: "metaKey" }, n = { "\u232B": "Backspace", backspace: "Backspace", "\u21E5": "Tab", "\u21C6": "Tab", tab: "Tab", "\u21A9": "Enter", "\u21B5": "Enter", "\u23CE": "Enter", return: "Enter", enter: "Enter", "\u2305": "Enter", pause: "Pause", "pause-break": "Pause", "\u21EA": "CapsLock", caps: "CapsLock", "caps-lock": "CapsLock", "\u238B": ["Escape", "Esc"], escape: ["Escape", "Esc"], esc: ["Escape", "Esc"], space: [" ", "Spacebar"], "": "PageUp", pgup: "PageUp", "page-up": "PageUp", "": "PageDown", pgdown: "PageDown", "page-down": "PageDown", "\u21DF": "End", end: "End", "\u21DE": "Home", home: "Home", ins: "Insert", insert: "Insert", "\u2326": ["Delete", "Del"], del: ["Delete", "Del"], delete: ["Delete", "Del"], "\u2190": ["ArrowLeft", "Left"], left: ["ArrowLeft", "Left"], "arrow-left": ["ArrowLeft", "Left"], "\u2191": ["ArrowUp", "Up"], up: ["ArrowUp", "Up"], "arrow-up": ["ArrowUp", "Up"], "\u2192": ["ArrowRight", "Right"], right: ["ArrowRight", "Right"], "arrow-right": ["ArrowRight", "Right"], "\u2193": ["ArrowDown", "Down"], down: ["ArrowDown", "Down"], "arrow-down": ["ArrowDown", "Down"], "*": ["*", "Multiply"], star: ["*", "Multiply"], asterisk: ["*", "Multiply"], multiply: ["*", "Multiply"], "+": ["+", "Add"], plus: ["+", "Add"], "-": ["-", "Subtract"], subtract: ["-", "Subtract"], dash: ["-", "Subtract"], semicolon: ";", equals: "=", comma: ",", period: ".", "full-stop": ".", slash: "/", "forward-slash": "/", tick: "`", "back-quote": "`", "open-bracket": "[", "back-slash": "\\", "close-bracket": "]", quote: "'", apostrophe: "'", "num-0": "0", "num-1": "1", "num-2": "2", "num-3": "3", "num-4": "4", "num-5": "5", "num-6": "6", "num-7": "7", "num-8": "8", "num-9": "9", f1: "F1", f2: "F2", f3: "F3", f4: "F4", f5: "F5", f6: "F6", f7: "F7", f8: "F8", f9: "F9", f10: "F10", f11: "F11", f12: "F12", f13: "F13", f14: "F14", f15: "F15", f16: "F16", f17: "F17", f18: "F18", f19: "F19", f20: "F20", f21: "F21", f22: "F22", f23: "F23", f24: "F24", f25: "F25" }, s = { "\u232B": 8, backspace: 8, "\u21E5": 9, "\u21C6": 9, tab: 9, "\u21A9": 13, "\u21B5": 13, "\u23CE": 13, return: 13, enter: 13, "\u2305": 13, pause: 19, "pause-break": 19, "\u21EA": 20, caps: 20, "caps-lock": 20, "\u238B": 27, escape: 27, esc: 27, space: 32, "": 33, pgup: 33, "page-up": 33, "": 34, pgdown: 34, "page-down": 34, "\u21DF": 35, end: 35, "\u21DE": 36, home: 36, ins: 45, insert: 45, "\u2326": 46, del: 46, delete: 46, "\u2190": 37, left: 37, "arrow-left": 37, "\u2191": 38, up: 38, "arrow-up": 38, "\u2192": 39, right: 39, "arrow-right": 39, "\u2193": 40, down: 40, "arrow-down": 40, ffequals: 61, "*": 106, star: 106, asterisk: 106, multiply: 106, "+": 107, plus: 107, "-": 109, subtract: 109, "|": 124, ffplus: 171, ffminus: 173, ";": 186, semicolon: 186, "=": 187, equals: 187, ",": 188, comma: 188, dash: 189, ".": 190, period: 190, "full-stop": 190, "/": 191, slash: 191, "forward-slash": 191, "`": 192, tick: 192, "back-quote": 192, "[": 219, "open-bracket": 219, "\\": 220, "back-slash": 220, "]": 221, "close-bracket": 221, "'": 222, quote: 222, apostrophe: 222 };
function a(e2) {
return Array.from(new Set(e2));
}
class i {
constructor(t2 = "global", r2 = document, n2 = "keydown") {
if ("keydown" !== n2 && "keyup" !== n2)
throw new Error(n2, "\u4E8B\u4EF6\u7C7B\u578B\u4EC5\u652F\u6301keydown\u3001keyup");
this.eventType = n2, this.namespace = t2, this.selection = e$1(r2), this.bindedKeys = [], this.bindings = this.bindings.bind(this), this.capture = this.capture.bind(this), this.bubble = this.bubble.bind(this), this.init();
}
init() {
return this.selection.on(`${this.eventType}.capture.${this.namespace}`, this.capture, true), this.selection.on(`${this.eventType}.bubble.${this.namespace}`, this.bubble, false), this;
}
bindings(e2, t2) {
var r2, n2, s2 = false, a2 = Object.keys(this.bindedKeys).map(function(e3) {
return this.bindedKeys[e3];
}.bind(this));
for (r2 = 0; r2 < a2.length; r2++)
if ((n2 = a2[r2]).event.modifiers.shiftKey && !!n2.capture === t2 && i2(e2, n2, true)) {
n2.callback(e2), s2 = true, e2.preventDefault();
break;
}
if (!s2) {
for (r2 = 0; r2 < a2.length; r2++)
if (!(n2 = a2[r2]).event.modifiers.shiftKey && !!n2.capture === t2 && i2(e2, n2, false)) {
n2.callback(e2), e2.preventDefault();
break;
}
}
function i2(e3, t3, r3) {
var n3 = e3, s3 = false, a3 = true;
if (void 0 !== n3.key && (a3 = n3.key.charCodeAt(0) > 255, s3 = true, void 0 === t3.event.key ? s3 = false : Array.isArray(t3.event.key) ? -1 === t3.event.key.map(function(e4) {
return e4.toLowerCase();
}).indexOf(n3.key.toLowerCase()) && (s3 = false) : n3.key.toLowerCase() !== t3.event.key.toLowerCase() && (s3 = false)), s3 || !a3 && !t3.event.modifiers.shiftKey || (s3 = n3.keyCode === t3.event.keyCode), !s3)
return false;
if (!n3.ctrlKey || !n3.altKey) {
if (n3.ctrlKey !== t3.event.modifiers.ctrlKey)
return false;
if (n3.altKey !== t3.event.modifiers.altKey)
return false;
}
return n3.metaKey === t3.event.modifiers.metaKey && (!r3 || n3.shiftKey === t3.event.modifiers.shiftKey);
}
}
capture(e2) {
this.bindings(e2, true);
}
bubble(t2) {
var r2 = e$1(t2.target).node().tagName;
"INPUT" !== r2 && "SELECT" !== r2 && "TEXTAREA" !== r2 && "true" !== String(t2.target.getAttribute("contenteditable")) && this.bindings(t2, false);
}
on(e2, i2, o2) {
if ("function" != typeof i2)
return this.off(e2, o2);
for (var c2 = a([].concat(e2)), l = 0; l < c2.length; l++) {
var u = c2[l] + (o2 ? "-capture" : "-bubble"), p = { id: u, capture: o2, callback: i2, event: { key: void 0, keyCode: 0, modifiers: { shiftKey: false, ctrlKey: false, altKey: false, metaKey: false } } };
this.bindedKeys[u] && console.warn('warning: duplicate keybinding for "' + u + '"'), this.bindedKeys[u] = p;
for (var f = c2[l].toLowerCase().match(/(?:(?:[^+⇧⌃⌥⌘])+|[⇧⌃⌥⌘]|\+\+|^\+$)/g), d = 0; d < f.length; d++)
if ("++" === f[d] && (f[d] = "+"), f[d] in t) {
var h = r[t[f[d]]];
p.event.modifiers[h] = true;
} else
p.event.key = n[f[d]] || f[d], f[d] in s && (p.event.keyCode = s[f[d]]);
}
return this;
}
unbind() {
return this.selection.on(`${this.eventType}.capture.${this.namespace}`, null), this.selection.on(`${this.eventType}.bubble.${this.namespace}`, null), this;
}
clear() {
return this.bindedKeys = {}, this;
}
off(e2, t2) {
for (var r2 = a([].concat(e2)), n2 = 0; n2 < r2.length; n2++) {
var s2 = r2[n2] + (true === t2 ? "-capture" : "-bubble");
delete this.bindedKeys[s2];
}
return this;
}
}
new i("global", document, "keydown");
new i("global", document, "keyup");
class KeyboardControl extends CommonCtrol {
_onBindKeyboards(actions, namespace2) {
this.keybinding = new i(namespace2);
actions.forEach((o) => {
this.keybinding.on(o.code, o.action);
});
}
_onUnbindKeyboards() {
this.keybinding.clear();
}
}
function getChildNodes(menus) {
let subNodes = [];
menus.forEach((menu) => {
if (menu.children && menu.children.length > 0) {
menu.children.forEach((subMenu) => {
subMenu.code && subNodes.push(subMenu);
});
} else {
menu.code && subNodes.push(menu);
}
});
return subNodes;
}
class ContextMenu extends KeyboardControl {
constructor(container, props) {
super();
this.container = container;
this.props = props;
this.tempMenuElement = null;
this.onEvents();
}
onEvents() {
document.addEventListener("mouseup", () => {
this.onEmpty();
});
const menus = getChildNodes(this.props.menus);
this._onBindKeyboards([
...menus.map((o) => ({
code: o.code,
action: () => {
o.click();
this.onEmpty();
}
})),
{
code: "Escape",
action: () => {
this.onEmpty();
}
}
]);
this.container.addEventListener("contextmenu", (e2) => {
e2.preventDefault();
this.props.left = e2.clientX;
this.props.top = e2.clientY;
this.render({ left: e2.clientX, top: e2.clientY });
});
}
onEmpty() {
if (this.tempMenuElement) {
this.tempMenuElement.remove();
this.tempMenuElement = null;
}
}
renderChild(fatherEle, record) {
const menuItem = document.createElement("div");
menuItem.classList.add("wbk-menu-item", "w-per-100", "f-s-c");
menuItem.addEventListener("click", () => record.click());
if (record.icons) {
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.classList.add("icon");
svg.setAttribute("viewBox", "0 0 1024 1024");
svg.setAttribute("version", "1.1");
svg.setAttribute("width", "13");
svg.setAttribute("height", "13");
record.icons.forEach((d) => {
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", d);
svg.appendChild(path);
});
menuItem.appendChild(svg);
}
const span = document.createElement("span");
span.textContent = record.name;
menuItem.appendChild(span);
fatherEle.appendChild(menuItem);
}
render({ left, top }) {
this.onEmpty();
if (this.props.menus.length > 0) {
const { x, y } = this.container.getBoundingClientRect();
const menuElement = document.createElement("aside");
menuElement.classList.add(
"wbk-contextmenus",
"z-1000",
"o-v",
"p-tb-5",
"p-lr-0",
"bg-color-fff",
"p-a",
"d-b",
"c-auto"
);
menuElement.style.left = `${left - x}px`;
menuElement.style.top = `${top - y}px`;
menuElement.style.display = "block";
this.props.menus.forEach((item) => {
const itemElement = document.createElement("div");
itemElement.classList.add("wbk-contextmenus-item", "p-r", "o-v");
itemElement.dataset.id = item.id;
if (!item.children || item.children.length === 0) {
this.renderChild(itemElement, item);
} else {
const section = document.createElement("section");
section.classList.add("wbk-menu-item", "f-s-c", "w-per-100", "h-30", "f-s-c", "c-p", "ease-400");
section.addEventListener("click", (e2) => e2.stopPropagation());
if (item.icons) {
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.classList.add("icon");
svg.setAttribute("viewBox", "0 0 1024 1024");
svg.setAttribute("version", "1.1");
svg.setAttribute("width", "13");
svg.setAttribute("height", "13");
item.icons.forEach((d) => {
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", d);
svg.appendChild(path);
});
section.appendChild(svg);
}
const span = document.createElement("span");
span.textContent = item.name;
section.appendChild(span);
itemElement.appendChild(section);
const subMenuElement = document.createElement("aside");
subMenuElement.setAttribute(
"class",
"wbk-contextmenus-submenu p-a-xr-yt translateX-100 bg-color-fff shadow-gray animate fadeIn ease-400 p-tb-5 p-lr-0"
);
subMenuElement.style.display = "none";
item.children.forEach((subItem) => {
const itemElement2 = document.createElement("div");
itemElement2.classList.add("wbk-contextmenus-item", "p-r", "o-v");
subMenuElement.appendChild(itemElement2);
this.renderChild(itemElement2, subItem);
});
itemElement.appendChild(subMenuElement);
}
menuElement.appendChild(itemElement);
});
this.container.appendChild(menuElement);
this.tempMenuElement = menuElement;
}
}
}
var style$1 = "";
var style = "";
function e(e2 = "WBIOKR-DB", t2 = 1, n2 = "WBIOKR-STORE", r2 = "id") {
let o;
const s2 = window.indexedDB || window.webikitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
if (!s2)
return u;
const c = s2 == null ? void 0 : s2.open(e2, t2);
function u(e3, t3) {
try {
return 0 === arguments.length ? new Promise((e4, t4) => {
const r3 = o.transaction([n2]).objectStore(n2).getAll();
r3.onsuccess = () => {
r3.result ? e4(r3.result) : t4("\u83B7\u53D6\u5931\u8D25");
}, r3.onerror = (e5) => {
t4(e5);
};
}) : 1 === arguments.length ? function(e4) {
return new Promise((t4, r3) => {
const s3 = o.transaction([n2]).objectStore(n2).get(e4);
s3.onsuccess = (e5) => {
s3.result ? t4(s3.result) : r3(null);
}, s3.onerror = (e5) => {
r3(e5);
};
});
}(e3) : 2 === arguments.length ? function(e4, t4) {
return new Promise((e5, r3) => {
const s3 = o.transaction([n2], "readwrite").objectStore(n2).put(t4);
s3.onsuccess = (t5) => {
e5(t5);
}, s3.onerror = (e6) => {
r3(e6);
};
});
}(0, t3) : Promise.reject("\u53C2\u6570\u6709\u95EE\u9898");
} catch (e4) {
return Promise.reject(e4);
}
}
return c.onsuccess = function(e3) {
o = e3.target.result;
}, c.onerror = function(e3) {
console.error(e3);
}, c.onupgradeneeded = function(e3) {
o = e3.target.result, o.objectStoreNames.contains(n2) || o.createObjectStore(n2, { keyPath: r2 });
}, u;
}
const myDb = new e("WBIOKR-MAPBOX-TOOLS", 1, "WBIOKR-STORE", "id");
function createUuid(num) {
function S4() {
return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
}
var uuid = S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4();
if (!num) {
return uuid;
} else {
return uuid.substr(0, num);
}
}
function mercatorToLnglat(mercatorX, mercatorY) {
let x = mercatorX / 2003750834e-2 * 180;
let y = mercatorY / 2003750834e-2 * 180;
y = 180 / Math.PI * (2 * Math.atan(Math.exp(y * Math.PI / 180)) - Math.PI / 2);
return [x, y];
}
function transformRequest4326(url) {
if (url.includes("4326")) {
url = url.toLowerCase().replace(/(bbox=)([^&]+)/, ($0, $1, $2) => {
let points = $2.split(",");
let leftLngLat = mercatorToLnglat(points[0], points[1]);
let rightLngLat = mercatorToLnglat(points[2], points[3]);
return `${$1}${leftLngLat[0]},${leftLngLat[1]},${rightLngLat[0]},${rightLngLat[1]}`;
});
}
return {
url
};
}
function copyContent(text) {
const input = document.createElement("input");
input.value = text;
document.body.appendChild(input);
input.select();
document.execCommand("copy");
document.body.removeChild(input);
}
const initForm = {
id: "",
name: "",
url: "",
checked: false
};
class Tile extends KeyboardControl {
constructor(container, props) {
super();
this.container = container;
this.type = "";
this.tempDom = null;
this.cacheUrls = [];
this.form = { ...initForm };
this.props = {
confirm() {
},
...props
};
this._onBindKeyboards([{ code: "esc", action: this.onClose.bind(this) }], "geoservers");
}
render() {
const html = `
<div class="wbiokr-geoserver-modal-wrappper w-700 bg-color-fff b-r-6 ">
<div class="modal-content">
<div class="modal-header h-50 f-b-c b-eee b-no-lr b-no-t p-lr-20">
<span class='f-s-16 f-w-600'>${this.type === "add" ? "\u65B0\u589E" : "\u8BBE\u7F6E"}\u81EA\u5B9A\u4E49\u56FE\u5C42\u5730\u5740</span>
<svg class="close-btn c-red o-hover-70 c-p ease-400" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2011" width="14" height="14"><path d="M585.412525 512.594747L973.601616 124.418586c19.600808-19.600808 19.600808-51.898182 0-71.49899l-2.120404-2.120404c-19.600808-19.600808-51.898182-19.600808-71.49899 0L511.793131 439.518384 123.61697 50.799192c-19.600808-19.600808-51.898182-19.600808-71.49899 0l-2.120404 2.120404c-20.11798 19.600808-20.11798 51.898182 0 71.49899l388.189091 388.189091L49.997576 900.783838c-19.587879 19.600808-19.587879 51.898182 0 71.49899l2.120404 2.120404c19.600808 19.600808 51.898182 19.600808 71.49899 0L511.793131 586.214141l388.189091 388.176162c19.600808 19.600808 51.898182 19.600808 71.49899 0l2.120404-2.120404c19.600808-19.600808 19.600808-51.898182 0-71.49899L585.412525 512.594747z m0 0"></path></svg>
</div>
<div class="modal-body p-20">
<section class='p-b-20 b-eee b-no-lr b-no-t'>
<div class='f-b-c'>
<span class='f-s-c f-s-14 c-999'>\u56FE\u5C42\u4FE1\u606F\uFF1A</span>
<div>
<button class="template-btn h-30 p-lr-10 b-r-4 o-hover-70 ease-300 c-app b-eee b-c-app f-s-14 c-p m-l-10">\u6A21\u677F</button>
<button class="confirm-btn h-30 p-lr-40 b-r-4 o-hover-70 ease-300 c-fff bg-color-app f-s-14 c-p m-l-10">\u786E\u5B9A</button>
<button class="clear-btn h-30 p-lr-40 b-r-4 o-hover-70 ease-300 c-fff bg-color-danger f-s-14 c-p m-l-10">\u6E05\u7A7A</button>
</div>
</div>
<div class='p-t-15 f-column'>
<input type="text" class="name-input w-per-100 h-30 b-eee b-r-4 p-lr-15 border-focus-app border-hover-app shadow-focus-app ease-300" placeholder="\u8BF7\u8F93\u5165\u540D\u79F0" value="${this.form.name}">
<textarea class="url-input w-per-100 h-120 b-eee b-r-4 p-lr-15 border-focus-app border-hover-app shadow-focus-app ease-300 l-h-25 m-t-10" placeholder="\u8BF7\u8F93\u5165\u5730\u5740" rows="3">${this.form.url}</textarea>
<div class="warning c-aaa f-s-14 m-t-5">\u6CE8\u610F\uFF1A\u8BF7\u52A1\u5FC5\u8F93\u5165\u5408\u6CD5URL\uFF0C\u5426\u5219\u53EF\u80FD\u5F15\u53D1\u9875\u9762\u5D29\u6E83\uFF01</div>
</div>
</section>
<section class="modal-main p-tb-20">
${this.cacheUrls.length === 0 ? '<div class="empty h-100 w-per-100 f-c c-ccc f-s-16">\u6682\u65E0\u6570\u636E</div>' : ""}
<ul>
${this.cacheUrls.map(
(item) => `
<li class="custom-url-item f-b-c p-lr-10 p-tb-5 m-b-5 ease-300 ${this.form.url === item.url ? "bg-color-f6f6f6" : ""}" title="${item.url}" >
<div class='f-1 f-s-c white-1 o-h'>
<h5 class='c-333 f-w-600'>${item.name}</h5>
<div class='white-1 f-s-12 c-666 m-l-5'>${item.url}</div>
</div>
<div class='p-l-10'>
<button class="select-btn c-app c-p">\u9009\u62E9</button>
<button class="remove-btn c-danger c-p m-l-5">\u79FB\u9664</button>
</div>
</li>
`
).join("")}
</ul>
</section>
</div>
</div>
</div>
`;
const dom = document.createElement("div");
dom.innerHTML = html;
dom.className = "wbiokr-geoserver-modal p-f-xl-yt z-1000 w-per-100 h-per-100 animated fadeIn f-c";
this.tempDom = dom;
this.container.appendChild(dom);
this.bindEvents();
}
bindEvents() {
this.tempDom.querySelector(".close-btn").onclick = () => this.onClose();
this.tempDom.querySelector(".template-btn").onclick = () => this.onCase();
this.tempDom.querySelector(".confirm-btn").onclick = () => this.onConfirm();
this.tempDom.querySelector(".clear-btn").onclick = () => this.onClearCustom();
this.tempDom.querySelector(".name-input").onblur = (e2) => {
this.form.name = e2.target.value;
};
this.tempDom.querySelector(".url-input").onblur = (e2) => {
this.form.url = e2.target.value;
};
this.tempDom.querySelectorAll(".select-btn").forEach((btn, index2) => {
btn.onclick = () => this.onSelect(index2);
});
this.tempDom.querySelectorAll(".remove-btn").forEach((btn, index2) => {
btn.onclick = () => this.onRemoveUrl(index2);
});
}
onAddModal() {
this.onReset();
this.type = "add";
this.form = {
...initForm,
id: createUuid()
};
this.render();
}
async onEditModal(item) {
this.type = "edit";
this.form = { ...item };
try {
const data = await myDb(this.id);
this.cacheUrls = data.data || [];
} catch (error) {
this.cacheUrls = [];
}
this.render();
}
onCase() {
this.form.url = "http://xx.com/?tiled=true&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=xx&SRS=EPSG:4326&bbox={bbox-epsg-3857}&WIDTH=256&HEIGHT=256";
this.tempDom.querySelector(".url-input").value = this.form.url;
}
onReset() {
this.type = "";
this.cacheUrls = [];
this.form = {
id: "",
name: "",
url: "",
checked: false
};
}
onClose() {
this.tempDom.remove();
this.onReset();
}
onConfirm() {
const url = this.form.url;
const lowerUrl = url.toLowerCase();
if (!lowerUrl.startsWith("http") || !((lowerUrl.includes("x={-x}") || lowerUrl.includes("x={x}")) && lowerUrl.includes("y=") && lowerUrl.includes("z=") || lowerUrl.includes("bbox={") && lowerUrl.includes("service=") && lowerUrl.includes("width=256") && lowerUrl.includes("height=256") || lowerUrl.includes("{x}") && lowerUrl.includes("{y}") && lowerUrl.includes("{z}"))) {
alert("\u8BF7\u8F93\u5165\u5408\u6CD5URL");
return false;
}
const historyItem = this.cacheUrls.find((o) => o.url === url);
if (!historyItem) {
this.cacheUrls.push({ ...this.form });
myDb(this.id, {
id: this.id,
data: this.cacheUrls
});
}
this.props.confirm({ ...this.form }, historyItem, this.type);
this.onClose();
}
onClearCustom() {
this.form.url = "";
this.form.name = "";
this.tempDom.querySelector(".url-input").value = this.form.url;
this.tempDom.querySelector(".name-input").value = this.form.name;
}
onSelect(index2) {
this.form = this.cacheUrls[index2];
this.tempDom.querySelector(".url-input").value = this.form.url;
this.tempDom.querySelector(".name-input").value = this.form.name;
this.tempDom.querySelectorAll(".custom-url-item").forEach((item, i2) => {
item.className = `custom-url-item f-b-c p-lr-10 p-tb-5 m-b-5 ease-300 ${i2 === index2 ? "bg-color-f6f6f6" : ""}`;
});
}
onRemoveUrl(idx) {
this.cacheUrls.splice(idx, 1);
myDb(this.id, {
id: this.id,
data: this.cacheUrls
});
}
get id() {
return `WBIOKR_ML_GEO_HIS_${this.form.id}`;
}
}
class Geoservers {
constructor(container, map, itemClass = "", addClass = "", addBtnProps = {}) {
this.container = container;
this.map = map;
this.tempDom = null;
this.itemClass = itemClass;
this.addClass = addClass;
this.addBtnProps = addBtnProps;
this.tiles = [];
}
async init() {
if (this.tempDom) {
this.tempDom.remove();
}
await this.loadTiles();
this.render();
this.refTile = new Tile(document.body, {
confirm: this.onConfirm.bind(this)
});
this.initializeCheckedTiles();
}
async loadTiles() {
try {
const allTiles = await myDb("WBIOKR_GEOSERVERS_LIST_ALL");
this.tiles = allTiles.data || [];
} catch (error) {
this.tiles = [];
}
}
render() {
const html = `
<div>
${this.tiles.map(
(item, index2) => `
<section class="w-per-100 f-b-c p-tb-5 ${this.itemClass}">
<label class="d-f-t white-1 f-s-c">
<input type="checkbox" ${item.checked ? "checked" : ""} data-id="${item.id}" />
<div class="white-1 h-15 m-l-5" style="max-width: 150px" title="${item.name || `\u81EA\u5B9A\u4E49\u56FE\u5C42${index2 + 1}`}">
${item.name || `\u81EA\u5B9A\u4E49\u56FE\u5C42${index2 + 1}`}
</div>
</label>
<div class="f-s-c p-l-10">
<a class="m-l-10 w-nowrap c-app c-p f-s-12" data-id="${item.id}">Edit</a>
<span class="c-red c-p o-hover-70 m-l-10 w-nowrap f-s-12" data-id="${item.id}">Delete</span>
</div>
</section>
`
).join("")}
<section class="m-t-10 ${this.addClass}">
<button
class="bg-color-app f-c f-s-12 c-fff b-r-4 ease-400 o-hover-70 w-nowrap p-lr-10 h-20"
>
${this.addBtnProps.text || "\u65B0\u589E\u56FE\u5C42"}
</button>
</section>
</div>
`;
const dom = document.createElement("div");
dom.innerHTML = html;
this.tempDom = dom;
this.container.appendChild(dom);
this.bindEvents();
}
bindEvents() {
this.container.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
checkbox.onchange = (e2) => {
this.onChangeGeo(checkbox);
};
});
this.tempDom.querySelectorAll("a[data-id]").forEach((link) => {
link.onclick = () => this.onEdit(link);
});
this.tempDom.querySelectorAll("span[data-id]").forEach((span) => {
span.onclick = () => this.onDelete(span);
});
this.tempDom.querySelector("button").onclick = () => this.onAdd();
}
onAdd() {
this.refTile.onAddModal();
}
onEdit(element) {
const id = element.getAttribute("data-id");
const item = this.tiles.find((o) => o.id === id);
if (item) {
this.refTile.onEditModal(item);
}
}
onDelete(element) {
con