declarative-ui-core 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +142 -139
- package/package.json +9 -9
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs as v, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as
|
|
3
|
-
import
|
|
2
|
+
import { useRef as A, useState as G, useEffect as C, useMemo as S } from "react";
|
|
3
|
+
import P from "maplibre-gl";
|
|
4
4
|
import J from "react-markdown";
|
|
5
5
|
import F from "mermaid";
|
|
6
|
-
import { VegaLite as
|
|
6
|
+
import { VegaLite as K } from "react-vega";
|
|
7
7
|
const o = {
|
|
8
8
|
canvas: {
|
|
9
9
|
display: "grid",
|
|
@@ -54,7 +54,7 @@ const o = {
|
|
|
54
54
|
muted: { fontSize: 13, color: "#666" },
|
|
55
55
|
error: { padding: 10, border: "1px solid #f2c", borderRadius: 12, background: "#fff7fb", fontSize: 12 }
|
|
56
56
|
};
|
|
57
|
-
function
|
|
57
|
+
function X({ componentId: i, component: t }) {
|
|
58
58
|
const e = t.config?.columns;
|
|
59
59
|
return /* @__PURE__ */ v("div", { style: o.panel, children: [
|
|
60
60
|
/* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: t.title ?? i }) }),
|
|
@@ -73,34 +73,34 @@ function T(i, t) {
|
|
|
73
73
|
if (!(!n || n.source !== "inline"))
|
|
74
74
|
return n.rows;
|
|
75
75
|
}
|
|
76
|
-
function
|
|
77
|
-
const n = T(i, e.dataRef) ?? [], l = e.config?.mode, s = e.config?.displayFields,
|
|
76
|
+
function Y({ page: i, componentId: t, component: e }) {
|
|
77
|
+
const n = T(i, e.dataRef) ?? [], l = e.config?.mode, s = e.config?.displayFields, p = s && s.length > 0 ? s : n.length > 0 ? Object.keys(n[0]) : [];
|
|
78
78
|
return /* @__PURE__ */ v("div", { style: o.panel, children: [
|
|
79
79
|
/* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: e.title ?? t }) }),
|
|
80
80
|
/* @__PURE__ */ r("div", { style: o.panelBody, children: l === "kv" && n.length === 1 ? /* @__PURE__ */ r("div", { style: o.kvList, children: Object.entries(n[0]).map(([y, m]) => /* @__PURE__ */ v("div", { style: o.kvRow, children: [
|
|
81
81
|
/* @__PURE__ */ r("div", { style: o.kvKey, children: y }),
|
|
82
82
|
/* @__PURE__ */ r("div", { style: o.kvValue, children: String(m) })
|
|
83
|
-
] }, y)) }) :
|
|
83
|
+
] }, y)) }) : p.length > 0 ? /* @__PURE__ */ r("div", { style: o.listCards, children: n.map((y, m) => /* @__PURE__ */ r("div", { style: o.listCard, children: p.map((b) => /* @__PURE__ */ v("div", { style: o.listCardRow, children: [
|
|
84
84
|
/* @__PURE__ */ r("div", { style: o.listCardLabel, children: b }),
|
|
85
85
|
/* @__PURE__ */ r("div", { style: o.listCardValue, children: String(y[b] ?? "") })
|
|
86
86
|
] }, b)) }, m)) }) : /* @__PURE__ */ r("pre", { style: o.pre, children: JSON.stringify(n, null, 2) }) })
|
|
87
87
|
] });
|
|
88
88
|
}
|
|
89
|
-
function
|
|
90
|
-
const i =
|
|
91
|
-
return
|
|
89
|
+
function I() {
|
|
90
|
+
const i = A(null), [t, e] = G({ width: 0, height: 0 });
|
|
91
|
+
return C(() => {
|
|
92
92
|
const n = i.current;
|
|
93
93
|
if (!n) return;
|
|
94
94
|
const l = new ResizeObserver((s) => {
|
|
95
|
-
const
|
|
96
|
-
if (!
|
|
97
|
-
const y =
|
|
95
|
+
const p = s[0];
|
|
96
|
+
if (!p) return;
|
|
97
|
+
const y = p.contentRect, m = { width: Math.round(y.width), height: Math.round(y.height) };
|
|
98
98
|
e((b) => Math.abs(b.width - m.width) <= 1 && Math.abs(b.height - m.height) <= 1 ? b : m);
|
|
99
99
|
});
|
|
100
100
|
return l.observe(n), () => l.disconnect();
|
|
101
101
|
}, []), { ref: i, size: t };
|
|
102
102
|
}
|
|
103
|
-
function
|
|
103
|
+
function q(i, t) {
|
|
104
104
|
if (!t) return;
|
|
105
105
|
const e = i.setProjection;
|
|
106
106
|
if (typeof e != "function") return;
|
|
@@ -112,16 +112,16 @@ function B(i, t) {
|
|
|
112
112
|
} catch {
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
|
-
function
|
|
115
|
+
function _(i) {
|
|
116
116
|
if (!i || typeof i != "object") return {};
|
|
117
117
|
const t = i, e = Array.isArray(t.markers) ? t.markers : void 0, n = e ? e.map((l) => {
|
|
118
118
|
if (!l) return null;
|
|
119
119
|
if ("lngLat" in l) {
|
|
120
|
-
const s = l,
|
|
121
|
-
if (Array.isArray(
|
|
120
|
+
const s = l, p = s.lngLat;
|
|
121
|
+
if (Array.isArray(p) && p.length === 2)
|
|
122
122
|
return {
|
|
123
123
|
name: typeof s.name == "string" ? s.name : void 0,
|
|
124
|
-
lngLat: [Number(
|
|
124
|
+
lngLat: [Number(p[0]), Number(p[1])],
|
|
125
125
|
popup: typeof s.popup == "string" ? s.popup : void 0,
|
|
126
126
|
shape: typeof s.shape == "string" ? s.shape : void 0,
|
|
127
127
|
color: typeof s.color == "string" ? s.color : void 0,
|
|
@@ -131,9 +131,9 @@ function Y(i) {
|
|
|
131
131
|
if ("longitude" in l && "latitude" in l) {
|
|
132
132
|
const s = l;
|
|
133
133
|
if (typeof s.longitude == "number" && typeof s.latitude == "number") {
|
|
134
|
-
const
|
|
134
|
+
const p = typeof s.title == "string" ? s.title : void 0, y = typeof s.description == "string" ? s.description : void 0;
|
|
135
135
|
return {
|
|
136
|
-
name:
|
|
136
|
+
name: p,
|
|
137
137
|
lngLat: [Number(s.longitude), Number(s.latitude)],
|
|
138
138
|
popup: y,
|
|
139
139
|
shape: typeof s.shape == "string" ? s.shape : void 0,
|
|
@@ -169,13 +169,13 @@ function W(i) {
|
|
|
169
169
|
function V(i, t) {
|
|
170
170
|
return (Array.isArray(i?.layers) ? i.layers : []).some((n) => n && typeof n == "object" && n.source === t);
|
|
171
171
|
}
|
|
172
|
-
function
|
|
172
|
+
function H(i, t) {
|
|
173
173
|
const e = "data", n = "circle-data", l = W(t), s = { ...i.sources ?? {} };
|
|
174
174
|
s[e] = {
|
|
175
175
|
type: "geojson",
|
|
176
176
|
data: l
|
|
177
177
|
};
|
|
178
|
-
const
|
|
178
|
+
const p = Array.isArray(i.layers) ? [...i.layers] : [], y = !V(i, e), m = p.filter((b) => b && typeof b == "object" && b.id !== n);
|
|
179
179
|
return y && m.push({
|
|
180
180
|
id: n,
|
|
181
181
|
type: "circle",
|
|
@@ -193,16 +193,18 @@ function A(i, t) {
|
|
|
193
193
|
layers: m
|
|
194
194
|
};
|
|
195
195
|
}
|
|
196
|
-
function
|
|
196
|
+
function E(i, t) {
|
|
197
197
|
const e = "data", n = "circle-data", l = W(t);
|
|
198
|
+
console.log("[MapLibreGL] ensureDataSourceAndLayer called with", t.length, "rows"), console.log("[MapLibreGL] GeoJSON features:", l.features.length);
|
|
198
199
|
try {
|
|
199
200
|
const s = i.getSource(e) ?? null;
|
|
200
|
-
s && typeof s.setData == "function" ? s.setData(l) : i.addSource(e, { type: "geojson", data: l });
|
|
201
|
-
} catch {
|
|
201
|
+
s && typeof s.setData == "function" ? (console.log("[MapLibreGL] Updating existing source"), s.setData(l)) : (console.log("[MapLibreGL] Adding new source"), i.addSource(e, { type: "geojson", data: l }));
|
|
202
|
+
} catch (s) {
|
|
203
|
+
console.error("[MapLibreGL] Error adding/updating source:", s);
|
|
202
204
|
}
|
|
203
205
|
try {
|
|
204
|
-
const s = i.getStyle();
|
|
205
|
-
|
|
206
|
+
const s = i.getStyle(), p = V(s, e);
|
|
207
|
+
console.log("[MapLibreGL] hasAnyLayerUsingSource:", p, "hasLayer:", !!i.getLayer(n)), !p && !i.getLayer(n) && (console.log("[MapLibreGL] Adding circle layer"), i.addLayer({
|
|
206
208
|
id: n,
|
|
207
209
|
type: "circle",
|
|
208
210
|
source: e,
|
|
@@ -213,27 +215,28 @@ function q(i, t) {
|
|
|
213
215
|
"circle-stroke-width": 2,
|
|
214
216
|
"circle-opacity": 1
|
|
215
217
|
}
|
|
216
|
-
});
|
|
217
|
-
} catch {
|
|
218
|
+
}), console.log("[MapLibreGL] Circle layer added successfully"));
|
|
219
|
+
} catch (s) {
|
|
220
|
+
console.error("[MapLibreGL] Error adding layer:", s);
|
|
218
221
|
}
|
|
219
222
|
}
|
|
220
|
-
function
|
|
221
|
-
const n = e.title ?? t, l = "circle-data", { ref: s, size:
|
|
223
|
+
function Q({ page: i, componentId: t, component: e }) {
|
|
224
|
+
const n = e.title ?? t, l = "circle-data", { ref: s, size: p } = I(), y = A(null), m = A([]), b = A(/* @__PURE__ */ new Map()), c = S(() => _(e.config), [e.config]), u = S(() => T(i, e.dataRef), [i, e.dataRef]), w = S(() => {
|
|
222
225
|
if (!u || u.length === 0) return null;
|
|
223
|
-
let d = 1 / 0, a = 1 / 0,
|
|
226
|
+
let d = 1 / 0, a = 1 / 0, L = -1 / 0, f = -1 / 0;
|
|
224
227
|
for (const h of u) {
|
|
225
|
-
const
|
|
226
|
-
typeof
|
|
228
|
+
const k = typeof h.longitude == "number" ? h.longitude : typeof h.lng == "number" ? h.lng : typeof h.lon == "number" ? h.lon : void 0, j = typeof h.latitude == "number" ? h.latitude : typeof h.lat == "number" ? h.lat : void 0;
|
|
229
|
+
typeof k != "number" || typeof j != "number" || !Number.isFinite(k) || !Number.isFinite(j) || (d = Math.min(d, k), a = Math.min(a, j), L = Math.max(L, k), f = Math.max(f, j));
|
|
227
230
|
}
|
|
228
|
-
return !Number.isFinite(d) || !Number.isFinite(a) || !Number.isFinite(
|
|
231
|
+
return !Number.isFinite(d) || !Number.isFinite(a) || !Number.isFinite(L) || !Number.isFinite(f) ? null : [
|
|
229
232
|
[d, a],
|
|
230
|
-
[
|
|
233
|
+
[L, f]
|
|
231
234
|
];
|
|
232
|
-
}, [u]), g =
|
|
235
|
+
}, [u]), g = S(() => {
|
|
233
236
|
if (!c.options) return;
|
|
234
237
|
const { projection: d, ...a } = c.options;
|
|
235
238
|
return a;
|
|
236
|
-
}, [c.options]), x =
|
|
239
|
+
}, [c.options]), x = S(() => {
|
|
237
240
|
const d = c.options?.projection;
|
|
238
241
|
if (typeof d == "string") return d;
|
|
239
242
|
if (d && typeof d == "object" && typeof d.name == "string") return d.name;
|
|
@@ -242,127 +245,127 @@ function _({ page: i, componentId: t, component: e }) {
|
|
|
242
245
|
if (typeof a == "string") return a;
|
|
243
246
|
if (a && typeof a == "object" && typeof a.name == "string") return a.name;
|
|
244
247
|
if (a && typeof a == "object" && typeof a.type == "string") return a.type;
|
|
245
|
-
}, [c.options, c.style]),
|
|
248
|
+
}, [c.options, c.style]), M = typeof c.style == "string" && typeof x == "string", R = typeof c.style == "string" && Array.isArray(u) && u.length > 0, U = S(
|
|
246
249
|
() => ({
|
|
247
250
|
version: 8,
|
|
248
251
|
sources: {},
|
|
249
252
|
layers: []
|
|
250
253
|
}),
|
|
251
254
|
[]
|
|
252
|
-
),
|
|
253
|
-
if (!
|
|
254
|
-
const a = c.style,
|
|
255
|
-
if (
|
|
255
|
+
), N = (d) => {
|
|
256
|
+
if (!M && !R) return;
|
|
257
|
+
const a = c.style, L = b.current.get(a);
|
|
258
|
+
if (L) {
|
|
256
259
|
try {
|
|
257
|
-
let
|
|
258
|
-
|
|
260
|
+
let f = L;
|
|
261
|
+
M && (f = { ...f ?? {}, projection: { type: x } }), R && e.dataRef && u && (f = H(f, u) ?? f), d.setStyle(f);
|
|
259
262
|
} catch {
|
|
260
263
|
}
|
|
261
264
|
return;
|
|
262
265
|
}
|
|
263
|
-
fetch(a).then((
|
|
264
|
-
b.current.set(a,
|
|
265
|
-
let h =
|
|
266
|
-
|
|
266
|
+
fetch(a).then((f) => f.json()).then((f) => {
|
|
267
|
+
b.current.set(a, f);
|
|
268
|
+
let h = f ?? {};
|
|
269
|
+
M && (h = { ...h, projection: { type: x } }), R && e.dataRef && u && (h = H(h, u) ?? h);
|
|
267
270
|
try {
|
|
268
271
|
d.setStyle(h);
|
|
269
272
|
} catch {
|
|
270
273
|
}
|
|
271
274
|
}).catch(() => {
|
|
272
275
|
});
|
|
273
|
-
}, z =
|
|
276
|
+
}, z = S(() => {
|
|
274
277
|
if (c.style)
|
|
275
|
-
return typeof c.style == "object" && c.style && e.dataRef && Array.isArray(u) && u.length > 0 ?
|
|
278
|
+
return typeof c.style == "object" && c.style && e.dataRef && Array.isArray(u) && u.length > 0 ? H(c.style, u) ?? c.style : c.style;
|
|
276
279
|
}, [c.style, e.dataRef, u]);
|
|
277
|
-
return
|
|
280
|
+
return C(() => {
|
|
278
281
|
const d = s.current;
|
|
279
282
|
if (!d || !z) return;
|
|
280
283
|
if (!y.current) {
|
|
281
|
-
const
|
|
284
|
+
const L = {
|
|
282
285
|
container: d,
|
|
283
|
-
style: typeof z == "string" && (
|
|
286
|
+
style: typeof z == "string" && (M || R) ? U : z,
|
|
284
287
|
attributionControl: {},
|
|
285
288
|
...g ?? {}
|
|
286
|
-
},
|
|
287
|
-
|
|
288
|
-
const h = () =>
|
|
289
|
-
|
|
290
|
-
const
|
|
291
|
-
if (u && u.length > 0 && (
|
|
289
|
+
}, f = new P.Map(L);
|
|
290
|
+
N(f);
|
|
291
|
+
const h = () => q(f, x);
|
|
292
|
+
f.once("load", h), f.once("style.load", h), f.addControl(new P.NavigationControl({ visualizePitch: !0 }), "top-right");
|
|
293
|
+
const k = () => {
|
|
294
|
+
if (u && u.length > 0 && (E(f, u), !c.options?.center && c.options?.zoom === void 0 && w))
|
|
292
295
|
try {
|
|
293
|
-
|
|
296
|
+
f.fitBounds(w, { padding: 30, duration: 0, maxZoom: 12 });
|
|
294
297
|
} catch {
|
|
295
298
|
}
|
|
296
299
|
};
|
|
297
|
-
return
|
|
298
|
-
m.current.forEach((j) => j.remove()), m.current = [], y.current = null,
|
|
300
|
+
return f.once("style.load", k), y.current = f, () => {
|
|
301
|
+
m.current.forEach((j) => j.remove()), m.current = [], y.current = null, f.remove();
|
|
299
302
|
};
|
|
300
303
|
}
|
|
301
304
|
const a = y.current;
|
|
302
|
-
if (
|
|
303
|
-
|
|
305
|
+
if (M || R)
|
|
306
|
+
N(a);
|
|
304
307
|
else
|
|
305
308
|
try {
|
|
306
309
|
a.setStyle(z);
|
|
307
310
|
} catch {
|
|
308
311
|
}
|
|
309
312
|
if (x) {
|
|
310
|
-
const
|
|
311
|
-
a.once("style.load",
|
|
313
|
+
const L = () => q(a, x);
|
|
314
|
+
a.once("style.load", L), a.once("render", L);
|
|
312
315
|
}
|
|
313
316
|
if (c.options?.center && c.options?.zoom !== void 0)
|
|
314
317
|
try {
|
|
315
318
|
a.jumpTo({ center: c.options.center, zoom: c.options.zoom });
|
|
316
319
|
} catch {
|
|
317
320
|
}
|
|
318
|
-
}, [z, g, s, x, R,
|
|
321
|
+
}, [z, g, s, x, R, M, u, w, c.options?.center, c.options?.zoom]), C(() => {
|
|
319
322
|
const d = y.current;
|
|
320
323
|
if (!d || !u || u.length === 0) return;
|
|
321
324
|
const a = () => {
|
|
322
|
-
if (
|
|
325
|
+
if (E(d, u), !c.options?.center && c.options?.zoom === void 0 && w)
|
|
323
326
|
try {
|
|
324
327
|
d.fitBounds(w, { padding: 30, duration: 0, maxZoom: 12 });
|
|
325
328
|
} catch {
|
|
326
329
|
}
|
|
327
330
|
};
|
|
328
|
-
d.once("style.load", a), d.once("load", a);
|
|
329
|
-
}, [u, w, c.options?.center, c.options?.zoom]),
|
|
331
|
+
d.isStyleLoaded() ? a() : (d.once("style.load", a), d.once("load", a));
|
|
332
|
+
}, [u, w, c.options?.center, c.options?.zoom]), C(() => {
|
|
330
333
|
const d = y.current;
|
|
331
|
-
d && (
|
|
332
|
-
}, [
|
|
334
|
+
d && (p.width <= 0 || p.height <= 0 || d.resize());
|
|
335
|
+
}, [p.width, p.height]), C(() => {
|
|
333
336
|
const d = y.current;
|
|
334
337
|
if (!d || !u || u.length === 0) return;
|
|
335
|
-
const a = new
|
|
338
|
+
const a = new P.Popup({
|
|
336
339
|
closeButton: !1,
|
|
337
340
|
closeOnClick: !1
|
|
338
|
-
}),
|
|
339
|
-
if (!
|
|
340
|
-
const j =
|
|
341
|
-
if (
|
|
341
|
+
}), L = (k) => {
|
|
342
|
+
if (!k.features || k.features.length === 0) return;
|
|
343
|
+
const j = k.features[0], $ = j.properties ?? {}, B = $.name ?? $.region ?? $.title ?? $.label ?? $.description;
|
|
344
|
+
if (B) {
|
|
342
345
|
d.getCanvas().style.cursor = "pointer";
|
|
343
|
-
const
|
|
344
|
-
a.setLngLat(
|
|
346
|
+
const Z = j.geometry.coordinates.slice();
|
|
347
|
+
a.setLngLat(Z).setHTML(`<div style="padding: 4px 8px; font-size: 13px;">${B}</div>`).addTo(d);
|
|
345
348
|
}
|
|
346
|
-
},
|
|
349
|
+
}, f = () => {
|
|
347
350
|
d.getCanvas().style.cursor = "", a.remove();
|
|
348
351
|
}, h = () => {
|
|
349
|
-
d.getLayer(l) ? (d.on("mouseenter", l,
|
|
352
|
+
d.getLayer(l) ? (d.on("mouseenter", l, L), d.on("mouseleave", l, f)) : d.once("styledata", h);
|
|
350
353
|
};
|
|
351
354
|
return h(), () => {
|
|
352
|
-
a.remove(), d && !d._removed && d.getLayer(l) && (d.off("mouseenter", l,
|
|
355
|
+
a.remove(), d && !d._removed && d.getLayer(l) && (d.off("mouseenter", l, L), d.off("mouseleave", l, f));
|
|
353
356
|
};
|
|
354
|
-
}, [u, l]),
|
|
357
|
+
}, [u, l]), C(() => {
|
|
355
358
|
const d = y.current;
|
|
356
359
|
d && (m.current.forEach((a) => a.remove()), m.current = [], (c.markers ?? []).forEach((a) => {
|
|
357
|
-
const
|
|
358
|
-
if (
|
|
359
|
-
const
|
|
360
|
-
|
|
360
|
+
const f = a.shape === "circle" || typeof a.radius == "number" || typeof a.color == "string" ? document.createElement("div") : null;
|
|
361
|
+
if (f) {
|
|
362
|
+
const k = typeof a.radius == "number" && Number.isFinite(a.radius) ? Math.max(2, a.radius) : 8;
|
|
363
|
+
f.style.width = `${k * 2}px`, f.style.height = `${k * 2}px`, f.style.borderRadius = "999px", f.style.background = typeof a.color == "string" ? a.color : "#2563eb", f.style.border = "2px solid #ffffff", f.style.boxShadow = "0 2px 10px rgba(0,0,0,0.25)";
|
|
361
364
|
}
|
|
362
|
-
const h = new
|
|
365
|
+
const h = new P.Marker(f ? { element: f } : void 0).setLngLat(a.lngLat);
|
|
363
366
|
if (a.popup || a.name) {
|
|
364
|
-
const
|
|
365
|
-
h.setPopup(new
|
|
367
|
+
const k = a.popup ?? `<div style="font-size:12px"><strong>${a.name ?? ""}</strong></div>`;
|
|
368
|
+
h.setPopup(new P.Popup({ offset: 20 }).setHTML(k));
|
|
366
369
|
}
|
|
367
370
|
h.addTo(d), m.current.push(h);
|
|
368
371
|
}));
|
|
@@ -374,7 +377,7 @@ function _({ page: i, componentId: t, component: e }) {
|
|
|
374
377
|
] }) })
|
|
375
378
|
] });
|
|
376
379
|
}
|
|
377
|
-
function
|
|
380
|
+
function ee({ page: i, componentId: t, component: e }) {
|
|
378
381
|
const n = e.title ?? t, l = typeof e.config?.md == "string" ? e.config.md : "";
|
|
379
382
|
return l ? /* @__PURE__ */ v("div", { style: o.panel, children: [
|
|
380
383
|
/* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: n }) }),
|
|
@@ -393,9 +396,9 @@ F.initialize({
|
|
|
393
396
|
theme: "default",
|
|
394
397
|
securityLevel: "loose"
|
|
395
398
|
});
|
|
396
|
-
function
|
|
397
|
-
const n = e.title ?? t, l = typeof e.config?.mermaid == "string" ? e.config.mermaid : "", s =
|
|
398
|
-
|
|
399
|
+
function te({ page: i, componentId: t, component: e }) {
|
|
400
|
+
const n = e.title ?? t, l = typeof e.config?.mermaid == "string" ? e.config.mermaid : "", s = A(null), [p, y] = G(1);
|
|
401
|
+
C(() => {
|
|
399
402
|
if (!l || !s.current) return;
|
|
400
403
|
(async () => {
|
|
401
404
|
try {
|
|
@@ -445,7 +448,7 @@ function ee({ page: i, componentId: t, component: e }) {
|
|
|
445
448
|
},
|
|
446
449
|
title: "Reset zoom",
|
|
447
450
|
children: [
|
|
448
|
-
Math.round(
|
|
451
|
+
Math.round(p * 100),
|
|
449
452
|
"%"
|
|
450
453
|
]
|
|
451
454
|
}
|
|
@@ -478,7 +481,7 @@ function ee({ page: i, componentId: t, component: e }) {
|
|
|
478
481
|
{
|
|
479
482
|
ref: s,
|
|
480
483
|
style: {
|
|
481
|
-
transform: `scale(${
|
|
484
|
+
transform: `scale(${p})`,
|
|
482
485
|
transformOrigin: "center center",
|
|
483
486
|
transition: "transform 0.2s ease"
|
|
484
487
|
}
|
|
@@ -489,23 +492,23 @@ function ee({ page: i, componentId: t, component: e }) {
|
|
|
489
492
|
/* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("div", { style: o.muted, children: 'No mermaid diagram provided. Add a "mermaid" field to config.' }) })
|
|
490
493
|
] });
|
|
491
494
|
}
|
|
492
|
-
function
|
|
493
|
-
const n = T(i, e.dataRef) ?? [], l = e.config?.columns, s = l && l.length ? l : Object.keys(n[0] ?? {}).map((
|
|
495
|
+
function re({ page: i, componentId: t, component: e }) {
|
|
496
|
+
const n = T(i, e.dataRef) ?? [], l = e.config?.columns, s = l && l.length ? l : Object.keys(n[0] ?? {}).map((p) => ({ key: p, label: p }));
|
|
494
497
|
return /* @__PURE__ */ v("div", { style: o.panel, children: [
|
|
495
498
|
/* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: e.title ?? t }) }),
|
|
496
499
|
/* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("div", { style: o.tableWrap, children: /* @__PURE__ */ v("table", { style: o.table, children: [
|
|
497
|
-
/* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: s.map((
|
|
498
|
-
/* @__PURE__ */ r("tbody", { children: n.map((
|
|
500
|
+
/* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: s.map((p) => /* @__PURE__ */ r("th", { style: o.th, children: p.label }, p.key)) }) }),
|
|
501
|
+
/* @__PURE__ */ r("tbody", { children: n.map((p, y) => /* @__PURE__ */ r("tr", { children: s.map((m) => /* @__PURE__ */ r("td", { style: o.td, children: String(p[m.key] ?? "") }, m.key)) }, y)) })
|
|
499
502
|
] }) }) })
|
|
500
503
|
] });
|
|
501
504
|
}
|
|
502
|
-
function
|
|
505
|
+
function ie({ componentId: i, component: t }) {
|
|
503
506
|
return /* @__PURE__ */ v("div", { style: o.panel, children: [
|
|
504
507
|
/* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: t.title ?? i }) }),
|
|
505
508
|
/* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("pre", { style: o.pre, children: JSON.stringify(t, null, 2) }) })
|
|
506
509
|
] });
|
|
507
510
|
}
|
|
508
|
-
function
|
|
511
|
+
function ne(i) {
|
|
509
512
|
if (!i || typeof i != "object") return !1;
|
|
510
513
|
const t = (e) => {
|
|
511
514
|
if (!e || typeof e != "object") return !1;
|
|
@@ -514,65 +517,65 @@ function ie(i) {
|
|
|
514
517
|
};
|
|
515
518
|
return t(i);
|
|
516
519
|
}
|
|
517
|
-
function
|
|
518
|
-
const n = T(i, e.dataRef), { ref: l, size: s } =
|
|
520
|
+
function oe({ page: i, componentId: t, component: e }) {
|
|
521
|
+
const n = T(i, e.dataRef), { ref: l, size: s } = I(), p = e.spec ?? {}, y = p.config ?? {}, m = {
|
|
519
522
|
...y,
|
|
520
523
|
axis: { ...y.axis, grid: !1 },
|
|
521
524
|
axisX: { ...y.axisX, grid: !1 },
|
|
522
525
|
axisY: { ...y.axisY, grid: !1 },
|
|
523
526
|
view: { ...y.view, stroke: null }
|
|
524
|
-
}, b = { ...
|
|
527
|
+
}, b = { ...p, config: m }, c = s.width > 0 && s.height > 0 ? {
|
|
525
528
|
...b,
|
|
526
529
|
autosize: { type: "fit", contains: "padding" },
|
|
527
530
|
width: Math.floor(s.width),
|
|
528
531
|
height: Math.floor(s.height)
|
|
529
|
-
} : b, u = n ? { ...c, data: { values: n } } :
|
|
532
|
+
} : b, u = n ? { ...c, data: { values: n } } : ne(c) ? { ...c, data: { values: [{}] } } : c, w = e.title === "" ? "" : e.title ?? t;
|
|
530
533
|
return /* @__PURE__ */ v("div", { style: o.panel, children: [
|
|
531
534
|
w ? /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: w }) }) : null,
|
|
532
|
-
/* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("div", { ref: l, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ r(
|
|
535
|
+
/* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("div", { ref: l, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ r(K, { spec: u, actions: !1 }) }) })
|
|
533
536
|
] });
|
|
534
537
|
}
|
|
535
|
-
function
|
|
538
|
+
function O({ page: i, componentId: t, component: e }) {
|
|
536
539
|
switch (e.type) {
|
|
537
540
|
case "vegalite5":
|
|
538
|
-
return /* @__PURE__ */ r(
|
|
541
|
+
return /* @__PURE__ */ r(oe, { page: i, componentId: t, component: e });
|
|
539
542
|
case "table":
|
|
540
|
-
return /* @__PURE__ */ r(
|
|
543
|
+
return /* @__PURE__ */ r(re, { page: i, componentId: t, component: e });
|
|
541
544
|
case "form":
|
|
542
|
-
return /* @__PURE__ */ r(K, { page: i, componentId: t, component: e });
|
|
543
|
-
case "list":
|
|
544
545
|
return /* @__PURE__ */ r(X, { page: i, componentId: t, component: e });
|
|
546
|
+
case "list":
|
|
547
|
+
return /* @__PURE__ */ r(Y, { page: i, componentId: t, component: e });
|
|
545
548
|
case "map":
|
|
546
|
-
return /* @__PURE__ */ r(_, { page: i, componentId: t, component: e });
|
|
547
|
-
case "markdown":
|
|
548
549
|
return /* @__PURE__ */ r(Q, { page: i, componentId: t, component: e });
|
|
549
|
-
case "
|
|
550
|
+
case "markdown":
|
|
550
551
|
return /* @__PURE__ */ r(ee, { page: i, componentId: t, component: e });
|
|
552
|
+
case "mermaid":
|
|
553
|
+
return /* @__PURE__ */ r(te, { page: i, componentId: t, component: e });
|
|
551
554
|
default:
|
|
552
|
-
return /* @__PURE__ */ r(
|
|
555
|
+
return /* @__PURE__ */ r(ie, { page: i, componentId: t, component: e });
|
|
553
556
|
}
|
|
554
557
|
}
|
|
555
|
-
function
|
|
558
|
+
function D(i, t, e) {
|
|
556
559
|
return Math.min(e, Math.max(t, i));
|
|
557
560
|
}
|
|
558
|
-
function
|
|
561
|
+
function se(i) {
|
|
559
562
|
const t = i.reduce((n, l) => Math.max(n, l.y + l.h), 0), e = i.reduce((n, l) => Math.max(n, l.x + l.w), 0);
|
|
560
563
|
return { maxBottom: t, maxRight: e };
|
|
561
564
|
}
|
|
562
|
-
function
|
|
563
|
-
const { ref: t, size: e } =
|
|
565
|
+
function we({ page: i }) {
|
|
566
|
+
const { ref: t, size: e } = I(), n = i.layout.cols ?? 24, l = i.layout.rowHeight ?? 30, s = i.layout.margin?.[0] ?? 10, p = i.layout.margin?.[1] ?? 10, y = i.layout.containerPadding?.[0] ?? 0, m = i.layout.containerPadding?.[1] ?? 0, { maxBottom: b } = se(i.layout.items), c = b * l + Math.max(0, b - 1) * p + m * 2, u = e.width > 0 ? e.width < 768 : !1, w = [...i.layout.items].sort((g, x) => g.y - x.y || g.x - x.x);
|
|
564
567
|
return /* @__PURE__ */ r("div", { ref: t, children: u ? /* @__PURE__ */ r(
|
|
565
568
|
"div",
|
|
566
569
|
{
|
|
567
570
|
style: {
|
|
568
571
|
display: "flex",
|
|
569
572
|
flexDirection: "column",
|
|
570
|
-
gap:
|
|
573
|
+
gap: p,
|
|
571
574
|
padding: `${m}px ${y}px`
|
|
572
575
|
},
|
|
573
576
|
children: w.map((g) => {
|
|
574
|
-
const x = i.components[g.i],
|
|
575
|
-
return /* @__PURE__ */ r("div", { style: { width: "100%", height:
|
|
577
|
+
const x = i.components[g.i], M = g.h * l + Math.max(0, g.h - 1) * p;
|
|
578
|
+
return /* @__PURE__ */ r("div", { style: { width: "100%", height: M }, children: x ? /* @__PURE__ */ r(O, { page: i, componentId: g.i, component: x }) : /* @__PURE__ */ v("div", { style: o.panel, children: [
|
|
576
579
|
/* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: g.i }) }),
|
|
577
580
|
/* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ v("div", { style: o.error, children: [
|
|
578
581
|
"No entry in components for id: ",
|
|
@@ -589,7 +592,7 @@ function xe({ page: i }) {
|
|
|
589
592
|
padding: `${m}px ${y}px`,
|
|
590
593
|
gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))`,
|
|
591
594
|
gridAutoRows: `${l}px`,
|
|
592
|
-
gap: `${
|
|
595
|
+
gap: `${p}px ${s}px`,
|
|
593
596
|
minHeight: c
|
|
594
597
|
},
|
|
595
598
|
children: i.layout.items.map((g) => {
|
|
@@ -598,12 +601,12 @@ function xe({ page: i }) {
|
|
|
598
601
|
"div",
|
|
599
602
|
{
|
|
600
603
|
style: {
|
|
601
|
-
gridColumnStart:
|
|
602
|
-
gridColumnEnd: `span ${
|
|
604
|
+
gridColumnStart: D(g.x + 1, 1, n + 1),
|
|
605
|
+
gridColumnEnd: `span ${D(g.w, 1, n)}`,
|
|
603
606
|
gridRowStart: Math.max(1, g.y + 1),
|
|
604
607
|
gridRowEnd: `span ${Math.max(1, g.h)}`
|
|
605
608
|
},
|
|
606
|
-
children: x ? /* @__PURE__ */ r(
|
|
609
|
+
children: x ? /* @__PURE__ */ r(O, { page: i, componentId: g.i, component: x }) : /* @__PURE__ */ v("div", { style: o.panel, children: [
|
|
607
610
|
/* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: g.i }) }),
|
|
608
611
|
/* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ v("div", { style: o.error, children: [
|
|
609
612
|
"No entry in components for id: ",
|
|
@@ -617,15 +620,15 @@ function xe({ page: i }) {
|
|
|
617
620
|
}
|
|
618
621
|
) });
|
|
619
622
|
}
|
|
620
|
-
const
|
|
621
|
-
$schema:
|
|
622
|
-
$id:
|
|
623
|
-
title:
|
|
624
|
-
type:
|
|
625
|
-
additionalProperties:
|
|
626
|
-
required:
|
|
627
|
-
properties:
|
|
628
|
-
$defs:
|
|
623
|
+
const le = "https://json-schema.org/draft/2020-12/schema", ae = "https://example.com/ai-canvas/page.schema.json", de = "AI Canvas Page", ce = "object", pe = !1, fe = ["layout", "components", "data"], ye = { meta: { $ref: "#/$defs/Meta" }, layout: { $ref: "#/$defs/Layout" }, components: { $ref: "#/$defs/Components" }, data: { $ref: "#/$defs/Data" } }, ue = { Meta: { type: "object", additionalProperties: !1, properties: { title: { type: "string", minLength: 1 }, description: { type: "string" }, version: { type: "string" } } }, Layout: { type: "object", additionalProperties: !1, required: ["engine", "items"], properties: { engine: { type: "string", enum: ["rgl"] }, cols: { type: "integer", minimum: 1, default: 24 }, rowHeight: { type: "integer", minimum: 1, default: 30 }, margin: { type: "array", items: { type: "integer", minimum: 0 }, minItems: 2, maxItems: 2, default: [10, 10] }, containerPadding: { type: "array", items: { type: "integer", minimum: 0 }, minItems: 2, maxItems: 2, default: [0, 0] }, items: { type: "array", minItems: 1, items: { $ref: "#/$defs/RglItem" } } } }, RglItem: { type: "object", additionalProperties: !1, required: ["i", "x", "y", "w", "h"], properties: { i: { type: "string", minLength: 1 }, x: { type: "integer", minimum: 0 }, y: { type: "integer", minimum: 0 }, w: { type: "integer", minimum: 1 }, h: { type: "integer", minimum: 1 }, static: { type: "boolean", default: !1 } } }, Components: { type: "object", description: "Map of componentId -> component config. Keys should match layout.items[*].i.", additionalProperties: { $ref: "#/$defs/Component" } }, Component: { type: "object", additionalProperties: !1, required: ["type"], properties: { type: { type: "string", enum: ["vegalite5", "map", "list", "form", "table", "markdown", "mermaid"] }, title: { type: "string" }, dataRef: { type: "string", minLength: 1 }, config: { type: "object", description: "Component-specific configuration (non-Vega-Lite components). Keep flexible for now.", additionalProperties: !0, default: {} }, spec: { type: "object", description: "Vega-Lite spec (only for type=vegalite5).", additionalProperties: !0 } }, allOf: [{ if: { properties: { type: { const: "vegalite5" } }, required: ["type"] }, then: { required: ["spec"] }, else: { properties: { spec: !1 } } }, { if: { properties: { type: { const: "map" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, description: "MapLibre GL JS configuration. Provide either a MapLibre Style Specification object (Mapbox style spec v8) directly, or an object like { style: <style-spec-or-url>, options: <map options> }." } } } }, { if: { properties: { type: { const: "table" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["columns"], properties: { columns: { type: "array", minItems: 1, items: { $ref: "#/$defs/Column" } } } } } } }, { if: { properties: { type: { const: "form" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["columns"], properties: { columns: { type: "array", minItems: 1, items: { $ref: "#/$defs/Column" } } } } } } }, { if: { properties: { type: { const: "list" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0 } } } }, { if: { properties: { type: { const: "markdown" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["md"], properties: { md: { type: "string", minLength: 1, description: "Markdown content to render" } } } } } }, { if: { properties: { type: { const: "mermaid" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["mermaid"], properties: { mermaid: { type: "string", minLength: 1, description: "Mermaid diagram definition" } } } } } }] }, Column: { type: "object", additionalProperties: !1, required: ["key", "label"], properties: { key: { type: "string", minLength: 1 }, label: { type: "string", minLength: 1 } } }, Data: { type: "object", description: "Map of datasetName -> inline dataset.", additionalProperties: { $ref: "#/$defs/InlineDataset" } }, InlineDataset: { type: "object", additionalProperties: !1, required: ["source", "rows"], properties: { source: { type: "string", enum: ["inline"] }, rows: { type: "array", items: { type: "object", additionalProperties: !0 } } } } }, Le = {
|
|
624
|
+
$schema: le,
|
|
625
|
+
$id: ae,
|
|
626
|
+
title: de,
|
|
627
|
+
type: ce,
|
|
628
|
+
additionalProperties: pe,
|
|
629
|
+
required: fe,
|
|
630
|
+
properties: ye,
|
|
631
|
+
$defs: ue
|
|
629
632
|
};
|
|
630
633
|
function ke(i) {
|
|
631
634
|
const t = JSON.parse(JSON.stringify(i));
|
|
@@ -648,8 +651,8 @@ function ke(i) {
|
|
|
648
651
|
return e(t), t;
|
|
649
652
|
}
|
|
650
653
|
export {
|
|
651
|
-
|
|
652
|
-
|
|
654
|
+
we as CanvasRenderer,
|
|
655
|
+
Le as PAGE_SCHEMA,
|
|
653
656
|
ke as schemaWithoutRemoteVegaLiteRef,
|
|
654
657
|
o as styles
|
|
655
658
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "declarative-ui-core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -21,18 +21,18 @@
|
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": "^18.2.0",
|
|
24
|
-
"react-dom": "^18.2.0"
|
|
25
|
-
"mermaid": "^11.12.2",
|
|
26
|
-
"vega": "^6.0.0",
|
|
27
|
-
"vega-lite": "^6.4.1",
|
|
28
|
-
"vega-embed": "^7.1.0",
|
|
29
|
-
"react-vega": "^7.6.0",
|
|
30
|
-
"maplibre-gl": "^5.0.0"
|
|
24
|
+
"react-dom": "^18.2.0"
|
|
31
25
|
},
|
|
32
26
|
"dependencies": {
|
|
33
27
|
"ajv": "^8.17.1",
|
|
28
|
+
"maplibre-gl": "^5.0.0",
|
|
29
|
+
"mermaid": "^11.12.2",
|
|
34
30
|
"react-grid-layout": "^1.4.4",
|
|
35
|
-
"react-markdown": "^10.1.0"
|
|
31
|
+
"react-markdown": "^10.1.0",
|
|
32
|
+
"react-vega": "^7.6.0",
|
|
33
|
+
"vega": "^6.0.0",
|
|
34
|
+
"vega-embed": "^7.1.0",
|
|
35
|
+
"vega-lite": "^6.4.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@eslint/js": "^9.39.1",
|