@nice2dev/ui-math 1.0.21 → 1.0.23
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.cjs +31 -5
- package/dist/index.d.ts +4 -1
- package/dist/index.mjs +2705 -929
- package/package.json +3 -1
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,1766 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
1
|
+
var R = Object.defineProperty;
|
|
2
|
+
var T = (e, r, t) => r in e ? R(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
|
|
3
|
+
var S = (e, r, t) => T(e, typeof r != "symbol" ? r + "" : r, t);
|
|
4
4
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
5
|
-
import
|
|
5
|
+
import xe, { useContext, createContext, memo, useState, useEffect, useMemo, useRef, useCallback } from "react";
|
|
6
|
+
const _e = (e, r) => r, te = createContext(_e);
|
|
7
|
+
function Zt() {
|
|
8
|
+
return { t: useContext(te) };
|
|
9
|
+
}
|
|
10
|
+
createContext({
|
|
11
|
+
dir: "ltr",
|
|
12
|
+
isRTL: !1,
|
|
13
|
+
flip: (e) => e,
|
|
14
|
+
value: (e) => e.ltr
|
|
15
|
+
});
|
|
16
|
+
createContext(null);
|
|
17
|
+
createContext(null);
|
|
18
|
+
const Z = {
|
|
19
|
+
radius: "md",
|
|
20
|
+
shadow: "md",
|
|
21
|
+
fill: "solid",
|
|
22
|
+
buttonStyle: "flat",
|
|
23
|
+
inputStyle: "bordered",
|
|
24
|
+
cardStyle: "elevated",
|
|
25
|
+
badgeStyle: "solid",
|
|
26
|
+
tabStyle: "underline",
|
|
27
|
+
toggleStyle: "default",
|
|
28
|
+
tooltipStyle: "dark",
|
|
29
|
+
modalStyle: "default",
|
|
30
|
+
tableStyle: "default",
|
|
31
|
+
menuStyle: "default",
|
|
32
|
+
animation: "normal",
|
|
33
|
+
density: "normal"
|
|
34
|
+
};
|
|
35
|
+
createContext({
|
|
36
|
+
displayStyle: "default",
|
|
37
|
+
variantConfig: Z,
|
|
38
|
+
setDisplayStyle: () => {
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
createContext({});
|
|
42
|
+
createContext({
|
|
43
|
+
direction: "ltr",
|
|
44
|
+
isRTL: !1,
|
|
45
|
+
flip: (e) => e,
|
|
46
|
+
flipStyle: (e, r) => ({ [e]: r })
|
|
47
|
+
});
|
|
48
|
+
createContext({
|
|
49
|
+
permissions: {},
|
|
50
|
+
getAccessMode: () => "full"
|
|
51
|
+
});
|
|
52
|
+
createContext(null);
|
|
53
|
+
const Vt = process.env.NODE_ENV === "development";
|
|
54
|
+
let O = {
|
|
55
|
+
enabled: Vt,
|
|
56
|
+
slowRenderThreshold: 16
|
|
57
|
+
};
|
|
58
|
+
const Ae = [], J = /* @__PURE__ */ new Map(), Ne = /* @__PURE__ */ new Map();
|
|
59
|
+
function jt() {
|
|
60
|
+
Ae.length = 0, J.clear(), Ne.clear();
|
|
61
|
+
}
|
|
62
|
+
function qt(e) {
|
|
63
|
+
const r = O.slowRenderThreshold;
|
|
64
|
+
return Ae.filter((t) => t.actualDuration > r);
|
|
65
|
+
}
|
|
66
|
+
function G(e) {
|
|
67
|
+
return e < 1 ? `${(e * 1e3).toFixed(0)}μs` : e < 1e3 ? `${e.toFixed(2)}ms` : `${(e / 1e3).toFixed(2)}s`;
|
|
68
|
+
}
|
|
69
|
+
function ya() {
|
|
70
|
+
const e = Array.from(J.values()), r = qt(), t = e.reduce((n, i) => n + i.renderCount, 0), a = e.length > 0 ? e.reduce((n, i) => n + i.avgRenderTime, 0) / e.length : 0, o = Array.from(Ne.values());
|
|
71
|
+
return { stats: e, slowRenders: r, totalRenders: t, avgRenderTime: a, marks: o };
|
|
72
|
+
}
|
|
73
|
+
function Ut() {
|
|
74
|
+
const e = ya();
|
|
75
|
+
console.group(
|
|
76
|
+
"%c[Nice2Dev Performance Report]",
|
|
77
|
+
"color: var(--nice-info, #6366f1); font-weight: bold; font-size: 14px"
|
|
78
|
+
), console.log(`Total renders: ${e.totalRenders}`), console.log(`Average render time: ${G(e.avgRenderTime)}`), console.log(`Slow renders: ${e.slowRenders.length}`), console.group("Component Stats"), console.table(
|
|
79
|
+
e.stats.sort((r, t) => t.totalRenderTime - r.totalRenderTime).map((r) => ({
|
|
80
|
+
Name: r.componentName,
|
|
81
|
+
Renders: r.renderCount,
|
|
82
|
+
"Avg Time": G(r.avgRenderTime),
|
|
83
|
+
"Max Time": G(r.maxRenderTime),
|
|
84
|
+
"Total Time": G(r.totalRenderTime),
|
|
85
|
+
"Slow Renders": r.slowRenderCount
|
|
86
|
+
}))
|
|
87
|
+
), console.groupEnd(), e.slowRenders.length > 0 && (console.group("Slow Renders (last 10)"), console.table(
|
|
88
|
+
e.slowRenders.slice(-10).map((r) => ({
|
|
89
|
+
Component: r.componentName,
|
|
90
|
+
Phase: r.phase,
|
|
91
|
+
Duration: G(r.actualDuration),
|
|
92
|
+
Time: new Date(r.timestamp).toLocaleTimeString()
|
|
93
|
+
}))
|
|
94
|
+
), console.groupEnd()), e.marks.length > 0 && (console.group("Custom Marks"), console.table(
|
|
95
|
+
e.marks.filter((r) => r.duration).map((r) => ({
|
|
96
|
+
Name: r.name,
|
|
97
|
+
Duration: G(r.duration)
|
|
98
|
+
}))
|
|
99
|
+
), console.groupEnd()), console.groupEnd();
|
|
100
|
+
}
|
|
101
|
+
const va = memo(
|
|
102
|
+
({ position: e = "bottom-right", defaultCollapsed: r = !0 }) => {
|
|
103
|
+
const [t, a] = useState(r), [o, n] = useState([]), [i, c] = useState({ used: 0, total: 0 });
|
|
104
|
+
if (useEffect(() => {
|
|
105
|
+
const s = () => {
|
|
106
|
+
const m = Array.from(J.values());
|
|
107
|
+
n(m.sort((g, w) => w.totalRenderTime - g.totalRenderTime).slice(0, 10));
|
|
108
|
+
const u = window.performance;
|
|
109
|
+
u.memory && c({
|
|
110
|
+
used: u.memory.usedJSHeapSize / 1024 / 1024,
|
|
111
|
+
total: u.memory.totalJSHeapSize / 1024 / 1024
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
s();
|
|
115
|
+
const d = setInterval(s, 2e3);
|
|
116
|
+
return () => clearInterval(d);
|
|
117
|
+
}, []), !O.enabled)
|
|
118
|
+
return null;
|
|
119
|
+
const f = {
|
|
120
|
+
position: "fixed",
|
|
121
|
+
zIndex: 99999,
|
|
122
|
+
...e.includes("top") ? { top: 8 } : { bottom: 8 },
|
|
123
|
+
...e.includes("left") ? { left: 8 } : { right: 8 }
|
|
124
|
+
};
|
|
125
|
+
return /* @__PURE__ */ jsxs(
|
|
126
|
+
"div",
|
|
127
|
+
{
|
|
128
|
+
style: {
|
|
129
|
+
...f,
|
|
130
|
+
background: "var(--nice-overlay-85, rgba(0, 0, 0, 0.85))",
|
|
131
|
+
color: "var(--bg-primary, #fff)",
|
|
132
|
+
borderRadius: 8,
|
|
133
|
+
fontSize: 11,
|
|
134
|
+
fontFamily: "Monaco, Consolas, monospace",
|
|
135
|
+
padding: t ? "4px 8px" : 8,
|
|
136
|
+
maxWidth: t ? "auto" : 300,
|
|
137
|
+
maxHeight: t ? "auto" : 400,
|
|
138
|
+
overflow: "auto"
|
|
139
|
+
},
|
|
140
|
+
children: [
|
|
141
|
+
/* @__PURE__ */ jsxs(
|
|
142
|
+
"div",
|
|
143
|
+
{
|
|
144
|
+
style: { cursor: "pointer", display: "flex", alignItems: "center", gap: 8 },
|
|
145
|
+
onClick: () => a((s) => !s),
|
|
146
|
+
children: [
|
|
147
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--color-success, #22c55e)" }, children: "●" }),
|
|
148
|
+
/* @__PURE__ */ jsx("span", { children: "Profiler" }),
|
|
149
|
+
i.used > 0 && /* @__PURE__ */ jsxs(
|
|
150
|
+
"span",
|
|
151
|
+
{
|
|
152
|
+
style: {
|
|
153
|
+
color: i.used > 100 ? "var(--color-warning, #f59e0b)" : "var(--text-muted, #64748b)"
|
|
154
|
+
},
|
|
155
|
+
children: [
|
|
156
|
+
i.used.toFixed(0),
|
|
157
|
+
"MB"
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
),
|
|
161
|
+
/* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", opacity: 0.5 }, children: t ? "▼" : "▲" })
|
|
162
|
+
]
|
|
163
|
+
}
|
|
164
|
+
),
|
|
165
|
+
!t && /* @__PURE__ */ jsxs("div", { style: { marginTop: 8 }, children: [
|
|
166
|
+
/* @__PURE__ */ jsx(
|
|
167
|
+
"div",
|
|
168
|
+
{
|
|
169
|
+
style: {
|
|
170
|
+
borderBottom: "1px solid var(--border-color, #333)",
|
|
171
|
+
paddingBottom: 4,
|
|
172
|
+
marginBottom: 8
|
|
173
|
+
},
|
|
174
|
+
children: /* @__PURE__ */ jsx("strong", { children: "Top Components" })
|
|
175
|
+
}
|
|
176
|
+
),
|
|
177
|
+
o.map((s) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 4, display: "flex", gap: 8 }, children: [
|
|
178
|
+
/* @__PURE__ */ jsx("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: s.componentName }),
|
|
179
|
+
/* @__PURE__ */ jsx(
|
|
180
|
+
"span",
|
|
181
|
+
{
|
|
182
|
+
style: {
|
|
183
|
+
color: s.avgRenderTime > 16 ? "var(--color-warning, #f59e0b)" : "var(--color-success, #22c55e)"
|
|
184
|
+
},
|
|
185
|
+
children: G(s.avgRenderTime)
|
|
186
|
+
}
|
|
187
|
+
),
|
|
188
|
+
/* @__PURE__ */ jsxs(
|
|
189
|
+
"span",
|
|
190
|
+
{
|
|
191
|
+
style: { color: "var(--text-muted, #64748b)", minWidth: 30, textAlign: "right" },
|
|
192
|
+
children: [
|
|
193
|
+
"x",
|
|
194
|
+
s.renderCount
|
|
195
|
+
]
|
|
196
|
+
}
|
|
197
|
+
)
|
|
198
|
+
] }, s.componentName)),
|
|
199
|
+
/* @__PURE__ */ jsxs("div", { style: { marginTop: 8, display: "flex", gap: 8 }, children: [
|
|
200
|
+
/* @__PURE__ */ jsx(
|
|
201
|
+
"button",
|
|
202
|
+
{
|
|
203
|
+
onClick: Ut,
|
|
204
|
+
style: {
|
|
205
|
+
flex: 1,
|
|
206
|
+
padding: "4px 8px",
|
|
207
|
+
background: "var(--bg-tertiary, #333)",
|
|
208
|
+
border: "none",
|
|
209
|
+
borderRadius: 4,
|
|
210
|
+
color: "var(--bg-primary, #fff)",
|
|
211
|
+
cursor: "pointer",
|
|
212
|
+
fontSize: 10
|
|
213
|
+
},
|
|
214
|
+
children: "Print Report"
|
|
215
|
+
}
|
|
216
|
+
),
|
|
217
|
+
/* @__PURE__ */ jsx(
|
|
218
|
+
"button",
|
|
219
|
+
{
|
|
220
|
+
onClick: jt,
|
|
221
|
+
style: {
|
|
222
|
+
flex: 1,
|
|
223
|
+
padding: "4px 8px",
|
|
224
|
+
background: "var(--bg-tertiary, #333)",
|
|
225
|
+
border: "none",
|
|
226
|
+
borderRadius: 4,
|
|
227
|
+
color: "var(--bg-primary, #fff)",
|
|
228
|
+
cursor: "pointer",
|
|
229
|
+
fontSize: 10
|
|
230
|
+
},
|
|
231
|
+
children: "Clear"
|
|
232
|
+
}
|
|
233
|
+
)
|
|
234
|
+
] })
|
|
235
|
+
] })
|
|
236
|
+
]
|
|
237
|
+
}
|
|
238
|
+
);
|
|
239
|
+
}
|
|
240
|
+
);
|
|
241
|
+
va.displayName = "ProfilerOverlay";
|
|
242
|
+
process.env.NODE_ENV;
|
|
243
|
+
createContext(null);
|
|
244
|
+
const st = createContext({
|
|
245
|
+
enabled: !0,
|
|
246
|
+
active: !1,
|
|
247
|
+
run: () => {
|
|
248
|
+
}
|
|
249
|
+
});
|
|
250
|
+
function Fa() {
|
|
251
|
+
return useContext(st);
|
|
252
|
+
}
|
|
253
|
+
function xl(e, r) {
|
|
254
|
+
if (!e)
|
|
255
|
+
return null;
|
|
256
|
+
if (e === !0)
|
|
257
|
+
return r && r.length > 0 ? r : null;
|
|
258
|
+
if (Array.isArray(e))
|
|
259
|
+
return e.length > 0 ? e : null;
|
|
260
|
+
const t = e.steps ?? r;
|
|
261
|
+
return t && t.length > 0 ? t : null;
|
|
262
|
+
}
|
|
263
|
+
function $a(e, r) {
|
|
264
|
+
return e.map((t) => ({
|
|
265
|
+
target: t.target,
|
|
266
|
+
title: t.titleKey ? r(t.titleKey, t.title ?? "") : t.title ?? "",
|
|
267
|
+
content: t.contentKey ? r(t.contentKey, t.content ?? "") : t.content ?? "",
|
|
268
|
+
placement: t.placement,
|
|
269
|
+
highlightPadding: t.highlightPadding,
|
|
270
|
+
showArrow: t.showArrow,
|
|
271
|
+
scrollIntoView: t.scrollIntoView,
|
|
272
|
+
disableInteraction: t.disableInteraction
|
|
273
|
+
}));
|
|
274
|
+
}
|
|
275
|
+
const wl = ({
|
|
276
|
+
steps: e,
|
|
277
|
+
autoStart: r,
|
|
278
|
+
label: t,
|
|
279
|
+
size: a = "md",
|
|
280
|
+
className: o,
|
|
281
|
+
style: n,
|
|
282
|
+
"data-testid": i
|
|
283
|
+
}) => {
|
|
284
|
+
const { enabled: c, run: f } = Fa(), { t: s } = Zt();
|
|
285
|
+
if (!c || !e || e.length === 0)
|
|
286
|
+
return null;
|
|
287
|
+
const d = t ?? s("tutorial.startAria", "Start tutorial");
|
|
288
|
+
return /* @__PURE__ */ jsx(
|
|
289
|
+
"button",
|
|
290
|
+
{
|
|
291
|
+
type: "button",
|
|
292
|
+
className: `nice-tutorial-button nice-tutorial-button--${a}` + (o ? ` ${o}` : ""),
|
|
293
|
+
style: n,
|
|
294
|
+
"data-testid": i,
|
|
295
|
+
"aria-label": d,
|
|
296
|
+
title: d,
|
|
297
|
+
onClick: () => f($a(e, s), { autoStart: r }),
|
|
298
|
+
children: "?"
|
|
299
|
+
}
|
|
300
|
+
);
|
|
301
|
+
}, vt = "nice-tutorial-button-styles";
|
|
302
|
+
if (typeof document < "u" && !document.getElementById(vt)) {
|
|
303
|
+
const e = document.createElement("style");
|
|
304
|
+
e.id = vt, e.textContent = `
|
|
305
|
+
.nice-tutorial-button {
|
|
306
|
+
display: inline-flex;
|
|
307
|
+
align-items: center;
|
|
308
|
+
justify-content: center;
|
|
309
|
+
border: 1px solid var(--nice-border, #cbd5e1);
|
|
310
|
+
background: var(--nice-bg, #fff);
|
|
311
|
+
color: var(--nice-text-secondary, #475569);
|
|
312
|
+
border-radius: var(--nice-radius-full, 9999px);
|
|
313
|
+
cursor: help;
|
|
314
|
+
font-weight: 700;
|
|
315
|
+
line-height: 1;
|
|
316
|
+
padding: 0;
|
|
317
|
+
transition: background var(--nice-transition, 200ms ease), color var(--nice-transition, 200ms ease), border-color var(--nice-transition, 200ms ease);
|
|
318
|
+
}
|
|
319
|
+
.nice-tutorial-button:hover {
|
|
320
|
+
background: var(--nice-primary, #2563eb);
|
|
321
|
+
border-color: var(--nice-primary, #2563eb);
|
|
322
|
+
color: var(--nice-text-inverse, #fff);
|
|
323
|
+
}
|
|
324
|
+
.nice-tutorial-button:focus-visible {
|
|
325
|
+
outline: none;
|
|
326
|
+
box-shadow: 0 0 0 2px var(--nice-bg, #fff), 0 0 0 4px var(--nice-primary, #2563eb);
|
|
327
|
+
}
|
|
328
|
+
.nice-tutorial-button--sm { width: 16px; height: 16px; font-size: 11px; }
|
|
329
|
+
.nice-tutorial-button--md { width: 20px; height: 20px; font-size: 12px; }
|
|
330
|
+
`, document.head.appendChild(e);
|
|
331
|
+
}
|
|
332
|
+
createContext(null);
|
|
333
|
+
createContext(null);
|
|
334
|
+
createContext(null);
|
|
335
|
+
const fe = {
|
|
336
|
+
space1: "4px",
|
|
337
|
+
space2: "8px",
|
|
338
|
+
space3: "12px",
|
|
339
|
+
space4: "16px",
|
|
340
|
+
space5: "20px",
|
|
341
|
+
space6: "24px",
|
|
342
|
+
space8: "32px"
|
|
343
|
+
}, ue = {
|
|
344
|
+
fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
|
|
345
|
+
fontSizeXs: "0.75rem",
|
|
346
|
+
fontSizeSm: "0.8125rem",
|
|
347
|
+
fontSizeMd: "0.875rem",
|
|
348
|
+
fontSizeLg: "1rem",
|
|
349
|
+
fontSizeXl: "1.125rem",
|
|
350
|
+
fontWeightNormal: 400,
|
|
351
|
+
fontWeightMedium: 500,
|
|
352
|
+
fontWeightSemibold: 600,
|
|
353
|
+
fontWeightBold: 700,
|
|
354
|
+
lineHeight: 1.5
|
|
355
|
+
}, me = { fast: "120ms ease", normal: "200ms ease", slow: "300ms ease" }, lt = (e) => ({
|
|
356
|
+
color: e,
|
|
357
|
+
radiusSm: "4px",
|
|
358
|
+
radiusMd: "6px",
|
|
359
|
+
radiusLg: "8px",
|
|
360
|
+
radiusXl: "12px",
|
|
361
|
+
radiusFull: "9999px"
|
|
362
|
+
}), mr = {
|
|
363
|
+
sm: "0 1px 2px rgba(0,0,0,0.05)",
|
|
364
|
+
md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
|
|
365
|
+
lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
|
|
366
|
+
xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)"
|
|
367
|
+
}, fn = {
|
|
368
|
+
sm: "0 1px 2px rgba(0,0,0,0.3)",
|
|
369
|
+
md: "0 4px 6px -1px rgba(0,0,0,0.4)",
|
|
370
|
+
lg: "0 10px 15px -3px rgba(0,0,0,0.4)",
|
|
371
|
+
xl: "0 20px 25px -5px rgba(0,0,0,0.4)"
|
|
372
|
+
};
|
|
373
|
+
function z(e, r, t, a, o) {
|
|
374
|
+
return {
|
|
375
|
+
name: e,
|
|
376
|
+
darkMode: "light",
|
|
377
|
+
colors: {
|
|
378
|
+
...r,
|
|
379
|
+
surface: r.surface ?? t.primary,
|
|
380
|
+
surfaceHover: r.surfaceHover ?? t.secondary
|
|
381
|
+
},
|
|
382
|
+
backgrounds: {
|
|
383
|
+
...t,
|
|
384
|
+
elevated: t.elevated ?? t.primary,
|
|
385
|
+
inset: t.inset ?? t.tertiary,
|
|
386
|
+
canvas: t.canvas ?? t.primary
|
|
387
|
+
},
|
|
388
|
+
text: { ...a, inverse: a.inverse ?? "#ffffff" },
|
|
389
|
+
borders: lt(o),
|
|
390
|
+
shadows: mr,
|
|
391
|
+
spacing: fe,
|
|
392
|
+
typography: ue,
|
|
393
|
+
transitions: me
|
|
394
|
+
};
|
|
395
|
+
}
|
|
396
|
+
function V(e, r, t, a, o) {
|
|
397
|
+
return {
|
|
398
|
+
name: e,
|
|
399
|
+
darkMode: "dark",
|
|
400
|
+
colors: {
|
|
401
|
+
...r,
|
|
402
|
+
surface: r.surface ?? t.secondary,
|
|
403
|
+
surfaceHover: r.surfaceHover ?? t.tertiary
|
|
404
|
+
},
|
|
405
|
+
backgrounds: {
|
|
406
|
+
...t,
|
|
407
|
+
elevated: t.elevated ?? t.secondary,
|
|
408
|
+
inset: t.inset ?? t.primary,
|
|
409
|
+
canvas: t.canvas ?? t.primary
|
|
410
|
+
},
|
|
411
|
+
text: { ...a, inverse: a.inverse ?? "#0f172a" },
|
|
412
|
+
borders: lt(o),
|
|
413
|
+
shadows: fn,
|
|
414
|
+
spacing: fe,
|
|
415
|
+
typography: ue,
|
|
416
|
+
transitions: me
|
|
417
|
+
};
|
|
418
|
+
}
|
|
419
|
+
z(
|
|
420
|
+
"Slate",
|
|
421
|
+
{
|
|
422
|
+
primary: "#64748b",
|
|
423
|
+
primaryHover: "#475569",
|
|
424
|
+
success: "#10b981",
|
|
425
|
+
warning: "#f59e0b",
|
|
426
|
+
error: "#ef4444",
|
|
427
|
+
info: "#06b6d4"
|
|
428
|
+
},
|
|
429
|
+
{ primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
|
|
430
|
+
{ primary: "#1e293b", secondary: "#475569", muted: "#94a3b8" },
|
|
431
|
+
"#cbd5e1"
|
|
432
|
+
);
|
|
433
|
+
z(
|
|
434
|
+
"Zinc",
|
|
435
|
+
{
|
|
436
|
+
primary: "#71717a",
|
|
437
|
+
primaryHover: "#52525b",
|
|
438
|
+
success: "#22c55e",
|
|
439
|
+
warning: "#eab308",
|
|
440
|
+
error: "#ef4444",
|
|
441
|
+
info: "#06b6d4"
|
|
442
|
+
},
|
|
443
|
+
{ primary: "#fafafa", secondary: "#f4f4f5", tertiary: "#e4e4e7", hover: "#e4e4e7" },
|
|
444
|
+
{ primary: "#18181b", secondary: "#3f3f46", muted: "#a1a1aa" },
|
|
445
|
+
"#d4d4d8"
|
|
446
|
+
);
|
|
447
|
+
z(
|
|
448
|
+
"Stone",
|
|
449
|
+
{
|
|
450
|
+
primary: "#78716c",
|
|
451
|
+
primaryHover: "#57534e",
|
|
452
|
+
success: "#16a34a",
|
|
453
|
+
warning: "#ca8a04",
|
|
454
|
+
error: "#dc2626",
|
|
455
|
+
info: "#0891b2"
|
|
456
|
+
},
|
|
457
|
+
{ primary: "#fafaf9", secondary: "#f5f5f4", tertiary: "#e7e5e4", hover: "#e7e5e4" },
|
|
458
|
+
{ primary: "#1c1917", secondary: "#44403c", muted: "#a8a29e" },
|
|
459
|
+
"#d6d3d1"
|
|
460
|
+
);
|
|
461
|
+
z(
|
|
462
|
+
"Cool Gray",
|
|
463
|
+
{
|
|
464
|
+
primary: "#6b7280",
|
|
465
|
+
primaryHover: "#4b5563",
|
|
466
|
+
success: "#10b981",
|
|
467
|
+
warning: "#f59e0b",
|
|
468
|
+
error: "#ef4444",
|
|
469
|
+
info: "#3b82f6"
|
|
470
|
+
},
|
|
471
|
+
{ primary: "#f9fafb", secondary: "#f3f4f6", tertiary: "#e5e7eb", hover: "#e5e7eb" },
|
|
472
|
+
{ primary: "#111827", secondary: "#374151", muted: "#9ca3af" },
|
|
473
|
+
"#d1d5db"
|
|
474
|
+
);
|
|
475
|
+
z(
|
|
476
|
+
"Warm Gray",
|
|
477
|
+
{
|
|
478
|
+
primary: "#7c7568",
|
|
479
|
+
primaryHover: "#5c564c",
|
|
480
|
+
success: "#4d7c0f",
|
|
481
|
+
warning: "#a16207",
|
|
482
|
+
error: "#b91c1c",
|
|
483
|
+
info: "#0e7490"
|
|
484
|
+
},
|
|
485
|
+
{ primary: "#faf9f7", secondary: "#f5f4f0", tertiary: "#e8e6e1", hover: "#e8e6e1" },
|
|
486
|
+
{ primary: "#1f1d19", secondary: "#4a463d", muted: "#a09888" },
|
|
487
|
+
"#d4d0c8"
|
|
488
|
+
);
|
|
489
|
+
z(
|
|
490
|
+
"Silver",
|
|
491
|
+
{
|
|
492
|
+
primary: "#94a3b8",
|
|
493
|
+
primaryHover: "#64748b",
|
|
494
|
+
success: "#10b981",
|
|
495
|
+
warning: "#f59e0b",
|
|
496
|
+
error: "#ef4444",
|
|
497
|
+
info: "#38bdf8"
|
|
498
|
+
},
|
|
499
|
+
{ primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
|
|
500
|
+
{ primary: "#334155", secondary: "#64748b", muted: "#94a3b8" },
|
|
501
|
+
"#cbd5e1"
|
|
502
|
+
);
|
|
503
|
+
z(
|
|
504
|
+
"Charcoal",
|
|
505
|
+
{
|
|
506
|
+
primary: "#374151",
|
|
507
|
+
primaryHover: "#1f2937",
|
|
508
|
+
success: "#059669",
|
|
509
|
+
warning: "#d97706",
|
|
510
|
+
error: "#dc2626",
|
|
511
|
+
info: "#0284c7"
|
|
512
|
+
},
|
|
513
|
+
{ primary: "#f9fafb", secondary: "#f3f4f6", tertiary: "#e5e7eb", hover: "#e5e7eb" },
|
|
514
|
+
{ primary: "#111827", secondary: "#374151", muted: "#6b7280" },
|
|
515
|
+
"#d1d5db"
|
|
516
|
+
);
|
|
517
|
+
z(
|
|
518
|
+
"Ivory",
|
|
519
|
+
{
|
|
520
|
+
primary: "#92876d",
|
|
521
|
+
primaryHover: "#7a6f55",
|
|
522
|
+
success: "#4d7c0f",
|
|
523
|
+
warning: "#a16207",
|
|
524
|
+
error: "#b91c1c",
|
|
525
|
+
info: "#0e7490"
|
|
526
|
+
},
|
|
527
|
+
{ primary: "#fffef7", secondary: "#faf6eb", tertiary: "#f0ead6", hover: "#f0ead6" },
|
|
528
|
+
{ primary: "#2b2517", secondary: "#5c5340", muted: "#9c9280" },
|
|
529
|
+
"#ddd8c4"
|
|
530
|
+
);
|
|
531
|
+
z(
|
|
532
|
+
"Rose",
|
|
533
|
+
{
|
|
534
|
+
primary: "#e11d48",
|
|
535
|
+
primaryHover: "#be123c",
|
|
536
|
+
success: "#16a34a",
|
|
537
|
+
warning: "#ea580c",
|
|
538
|
+
error: "#dc2626",
|
|
539
|
+
info: "#0891b2"
|
|
540
|
+
},
|
|
541
|
+
{ primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
|
|
542
|
+
{ primary: "#4c0519", secondary: "#881337", muted: "#f43f5e" },
|
|
543
|
+
"#fda4af"
|
|
544
|
+
);
|
|
545
|
+
z(
|
|
546
|
+
"Emerald",
|
|
547
|
+
{
|
|
548
|
+
primary: "#059669",
|
|
549
|
+
primaryHover: "#047857",
|
|
550
|
+
success: "#16a34a",
|
|
551
|
+
warning: "#d97706",
|
|
552
|
+
error: "#dc2626",
|
|
553
|
+
info: "#0891b2"
|
|
554
|
+
},
|
|
555
|
+
{ primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
|
|
556
|
+
{ primary: "#064e3b", secondary: "#065f46", muted: "#34d399" },
|
|
557
|
+
"#6ee7b7"
|
|
558
|
+
);
|
|
559
|
+
z(
|
|
560
|
+
"Amber",
|
|
561
|
+
{
|
|
562
|
+
primary: "#d97706",
|
|
563
|
+
primaryHover: "#b45309",
|
|
564
|
+
success: "#16a34a",
|
|
565
|
+
warning: "#ca8a04",
|
|
566
|
+
error: "#dc2626",
|
|
567
|
+
info: "#0284c7"
|
|
568
|
+
},
|
|
569
|
+
{ primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
|
|
570
|
+
{ primary: "#451a03", secondary: "#78350f", muted: "#f59e0b" },
|
|
571
|
+
"#fcd34d"
|
|
572
|
+
);
|
|
573
|
+
z(
|
|
574
|
+
"Violet",
|
|
575
|
+
{
|
|
576
|
+
primary: "#7c3aed",
|
|
577
|
+
primaryHover: "#6d28d9",
|
|
578
|
+
success: "#10b981",
|
|
579
|
+
warning: "#f59e0b",
|
|
580
|
+
error: "#ef4444",
|
|
581
|
+
info: "#06b6d4"
|
|
582
|
+
},
|
|
583
|
+
{ primary: "#f5f3ff", secondary: "#ede9fe", tertiary: "#ddd6fe", hover: "#ede9fe" },
|
|
584
|
+
{ primary: "#2e1065", secondary: "#4c1d95", muted: "#a78bfa" },
|
|
585
|
+
"#c4b5fd"
|
|
586
|
+
);
|
|
587
|
+
z(
|
|
588
|
+
"Teal",
|
|
589
|
+
{
|
|
590
|
+
primary: "#0d9488",
|
|
591
|
+
primaryHover: "#0f766e",
|
|
592
|
+
success: "#16a34a",
|
|
593
|
+
warning: "#d97706",
|
|
594
|
+
error: "#dc2626",
|
|
595
|
+
info: "#0284c7"
|
|
596
|
+
},
|
|
597
|
+
{ primary: "#f0fdfa", secondary: "#ccfbf1", tertiary: "#99f6e4", hover: "#ccfbf1" },
|
|
598
|
+
{ primary: "#134e4a", secondary: "#115e59", muted: "#2dd4bf" },
|
|
599
|
+
"#5eead4"
|
|
600
|
+
);
|
|
601
|
+
z(
|
|
602
|
+
"Indigo",
|
|
603
|
+
{
|
|
604
|
+
primary: "#4f46e5",
|
|
605
|
+
primaryHover: "#4338ca",
|
|
606
|
+
success: "#10b981",
|
|
607
|
+
warning: "#f59e0b",
|
|
608
|
+
error: "#ef4444",
|
|
609
|
+
info: "#06b6d4"
|
|
610
|
+
},
|
|
611
|
+
{ primary: "#eef2ff", secondary: "#e0e7ff", tertiary: "#c7d2fe", hover: "#e0e7ff" },
|
|
612
|
+
{ primary: "#1e1b4b", secondary: "#312e81", muted: "#818cf8" },
|
|
613
|
+
"#a5b4fc"
|
|
614
|
+
);
|
|
615
|
+
z(
|
|
616
|
+
"Cyan",
|
|
617
|
+
{
|
|
618
|
+
primary: "#0891b2",
|
|
619
|
+
primaryHover: "#0e7490",
|
|
620
|
+
success: "#10b981",
|
|
621
|
+
warning: "#f59e0b",
|
|
622
|
+
error: "#ef4444",
|
|
623
|
+
info: "#0284c7"
|
|
624
|
+
},
|
|
625
|
+
{ primary: "#ecfeff", secondary: "#cffafe", tertiary: "#a5f3fc", hover: "#cffafe" },
|
|
626
|
+
{ primary: "#164e63", secondary: "#155e75", muted: "#22d3ee" },
|
|
627
|
+
"#67e8f9"
|
|
628
|
+
);
|
|
629
|
+
z(
|
|
630
|
+
"Lime",
|
|
631
|
+
{
|
|
632
|
+
primary: "#65a30d",
|
|
633
|
+
primaryHover: "#4d7c0f",
|
|
634
|
+
success: "#16a34a",
|
|
635
|
+
warning: "#ca8a04",
|
|
636
|
+
error: "#dc2626",
|
|
637
|
+
info: "#0891b2"
|
|
638
|
+
},
|
|
639
|
+
{ primary: "#f7fee7", secondary: "#ecfccb", tertiary: "#d9f99d", hover: "#ecfccb" },
|
|
640
|
+
{ primary: "#1a2e05", secondary: "#365314", muted: "#84cc16" },
|
|
641
|
+
"#bef264"
|
|
642
|
+
);
|
|
643
|
+
z(
|
|
644
|
+
"Pink",
|
|
645
|
+
{
|
|
646
|
+
primary: "#db2777",
|
|
647
|
+
primaryHover: "#be185d",
|
|
648
|
+
success: "#10b981",
|
|
649
|
+
warning: "#f59e0b",
|
|
650
|
+
error: "#dc2626",
|
|
651
|
+
info: "#06b6d4"
|
|
652
|
+
},
|
|
653
|
+
{ primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
|
|
654
|
+
{ primary: "#500724", secondary: "#831843", muted: "#f472b6" },
|
|
655
|
+
"#f9a8d4"
|
|
656
|
+
);
|
|
657
|
+
z(
|
|
658
|
+
"Orange",
|
|
659
|
+
{
|
|
660
|
+
primary: "#ea580c",
|
|
661
|
+
primaryHover: "#c2410c",
|
|
662
|
+
success: "#16a34a",
|
|
663
|
+
warning: "#ca8a04",
|
|
664
|
+
error: "#dc2626",
|
|
665
|
+
info: "#0891b2"
|
|
666
|
+
},
|
|
667
|
+
{ primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
|
|
668
|
+
{ primary: "#431407", secondary: "#7c2d12", muted: "#fb923c" },
|
|
669
|
+
"#fdba74"
|
|
670
|
+
);
|
|
671
|
+
z(
|
|
672
|
+
"Fuchsia",
|
|
673
|
+
{
|
|
674
|
+
primary: "#c026d3",
|
|
675
|
+
primaryHover: "#a21caf",
|
|
676
|
+
success: "#10b981",
|
|
677
|
+
warning: "#eab308",
|
|
678
|
+
error: "#ef4444",
|
|
679
|
+
info: "#06b6d4"
|
|
680
|
+
},
|
|
681
|
+
{ primary: "#fdf4ff", secondary: "#fae8ff", tertiary: "#f5d0fe", hover: "#fae8ff" },
|
|
682
|
+
{ primary: "#4a044e", secondary: "#701a75", muted: "#d946ef" },
|
|
683
|
+
"#e879f9"
|
|
684
|
+
);
|
|
685
|
+
z(
|
|
686
|
+
"Sky",
|
|
687
|
+
{
|
|
688
|
+
primary: "#0284c7",
|
|
689
|
+
primaryHover: "#0369a1",
|
|
690
|
+
success: "#10b981",
|
|
691
|
+
warning: "#f59e0b",
|
|
692
|
+
error: "#ef4444",
|
|
693
|
+
info: "#06b6d4"
|
|
694
|
+
},
|
|
695
|
+
{ primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
|
|
696
|
+
{ primary: "#0c4a6e", secondary: "#075985", muted: "#38bdf8" },
|
|
697
|
+
"#7dd3fc"
|
|
698
|
+
);
|
|
699
|
+
z(
|
|
700
|
+
"Ruby",
|
|
701
|
+
{
|
|
702
|
+
primary: "#be123c",
|
|
703
|
+
primaryHover: "#9f1239",
|
|
704
|
+
success: "#059669",
|
|
705
|
+
warning: "#d97706",
|
|
706
|
+
error: "#dc2626",
|
|
707
|
+
info: "#0284c7"
|
|
708
|
+
},
|
|
709
|
+
{ primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
|
|
710
|
+
{ primary: "#4c0519", secondary: "#881337", muted: "#fb7185" },
|
|
711
|
+
"#fda4af"
|
|
712
|
+
);
|
|
713
|
+
z(
|
|
714
|
+
"Coral",
|
|
715
|
+
{
|
|
716
|
+
primary: "#f97316",
|
|
717
|
+
primaryHover: "#ea580c",
|
|
718
|
+
success: "#10b981",
|
|
719
|
+
warning: "#eab308",
|
|
720
|
+
error: "#ef4444",
|
|
721
|
+
info: "#06b6d4"
|
|
722
|
+
},
|
|
723
|
+
{ primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
|
|
724
|
+
{ primary: "#431407", secondary: "#9a3412", muted: "#fb923c" },
|
|
725
|
+
"#fdba74"
|
|
726
|
+
);
|
|
727
|
+
V(
|
|
728
|
+
"Midnight",
|
|
729
|
+
{
|
|
730
|
+
primary: "#818cf8",
|
|
731
|
+
primaryHover: "#6366f1",
|
|
732
|
+
success: "#34d399",
|
|
733
|
+
warning: "#fbbf24",
|
|
734
|
+
error: "#f87171",
|
|
735
|
+
info: "#22d3ee"
|
|
736
|
+
},
|
|
737
|
+
{ primary: "#020617", secondary: "#0f172a", tertiary: "#1e293b", hover: "#1e293b" },
|
|
738
|
+
{ primary: "#f1f5f9", secondary: "#94a3b8", muted: "#475569" },
|
|
739
|
+
"#1e293b"
|
|
740
|
+
);
|
|
741
|
+
V(
|
|
742
|
+
"Obsidian",
|
|
743
|
+
{
|
|
744
|
+
primary: "#a78bfa",
|
|
745
|
+
primaryHover: "#8b5cf6",
|
|
746
|
+
success: "#4ade80",
|
|
747
|
+
warning: "#facc15",
|
|
748
|
+
error: "#fb7185",
|
|
749
|
+
info: "#38bdf8"
|
|
750
|
+
},
|
|
751
|
+
{ primary: "#09090b", secondary: "#18181b", tertiary: "#27272a", hover: "#27272a" },
|
|
752
|
+
{ primary: "#fafafa", secondary: "#a1a1aa", muted: "#52525b" },
|
|
753
|
+
"#3f3f46"
|
|
754
|
+
);
|
|
755
|
+
V(
|
|
756
|
+
"Eclipse",
|
|
757
|
+
{
|
|
758
|
+
primary: "#c084fc",
|
|
759
|
+
primaryHover: "#a855f7",
|
|
760
|
+
success: "#34d399",
|
|
761
|
+
warning: "#fbbf24",
|
|
762
|
+
error: "#f87171",
|
|
763
|
+
info: "#67e8f9"
|
|
764
|
+
},
|
|
765
|
+
{ primary: "#0c0a1d", secondary: "#1a1533", tertiary: "#2a2248", hover: "#2a2248" },
|
|
766
|
+
{ primary: "#f5f3ff", secondary: "#a78bfa", muted: "#6d5eac" },
|
|
767
|
+
"#3b3266"
|
|
768
|
+
);
|
|
769
|
+
V(
|
|
770
|
+
"Onyx",
|
|
771
|
+
{
|
|
772
|
+
primary: "#60a5fa",
|
|
773
|
+
primaryHover: "#3b82f6",
|
|
774
|
+
success: "#4ade80",
|
|
775
|
+
warning: "#fbbf24",
|
|
776
|
+
error: "#f87171",
|
|
777
|
+
info: "#22d3ee"
|
|
778
|
+
},
|
|
779
|
+
{ primary: "#000000", secondary: "#0a0a0a", tertiary: "#171717", hover: "#171717" },
|
|
780
|
+
{ primary: "#ffffff", secondary: "#a3a3a3", muted: "#525252" },
|
|
781
|
+
"#262626"
|
|
782
|
+
);
|
|
783
|
+
V(
|
|
784
|
+
"Carbon",
|
|
785
|
+
{
|
|
786
|
+
primary: "#38bdf8",
|
|
787
|
+
primaryHover: "#0ea5e9",
|
|
788
|
+
success: "#4ade80",
|
|
789
|
+
warning: "#facc15",
|
|
790
|
+
error: "#f87171",
|
|
791
|
+
info: "#67e8f9"
|
|
792
|
+
},
|
|
793
|
+
{ primary: "#161616", secondary: "#262626", tertiary: "#393939", hover: "#393939" },
|
|
794
|
+
{ primary: "#f4f4f4", secondary: "#c6c6c6", muted: "#6f6f6f" },
|
|
795
|
+
"#525252"
|
|
796
|
+
);
|
|
797
|
+
V(
|
|
798
|
+
"Cosmos",
|
|
799
|
+
{
|
|
800
|
+
primary: "#6366f1",
|
|
801
|
+
primaryHover: "#4f46e5",
|
|
802
|
+
success: "#34d399",
|
|
803
|
+
warning: "#fbbf24",
|
|
804
|
+
error: "#f87171",
|
|
805
|
+
info: "#22d3ee"
|
|
806
|
+
},
|
|
807
|
+
{ primary: "#030712", secondary: "#111827", tertiary: "#1f2937", hover: "#1f2937" },
|
|
808
|
+
{ primary: "#e5e7eb", secondary: "#9ca3af", muted: "#4b5563" },
|
|
809
|
+
"#374151"
|
|
810
|
+
);
|
|
811
|
+
V(
|
|
812
|
+
"Nebula",
|
|
813
|
+
{
|
|
814
|
+
primary: "#e879f9",
|
|
815
|
+
primaryHover: "#d946ef",
|
|
816
|
+
success: "#4ade80",
|
|
817
|
+
warning: "#fbbf24",
|
|
818
|
+
error: "#fb7185",
|
|
819
|
+
info: "#67e8f9"
|
|
820
|
+
},
|
|
821
|
+
{ primary: "#0d0117", secondary: "#1a0533", tertiary: "#2d0a52", hover: "#2d0a52" },
|
|
822
|
+
{ primary: "#fae8ff", secondary: "#d8b4fe", muted: "#7c3aed" },
|
|
823
|
+
"#581c87"
|
|
824
|
+
);
|
|
825
|
+
V(
|
|
826
|
+
"Abyss",
|
|
827
|
+
{
|
|
828
|
+
primary: "#22d3ee",
|
|
829
|
+
primaryHover: "#06b6d4",
|
|
830
|
+
success: "#34d399",
|
|
831
|
+
warning: "#fbbf24",
|
|
832
|
+
error: "#f87171",
|
|
833
|
+
info: "#38bdf8"
|
|
834
|
+
},
|
|
835
|
+
{ primary: "#001219", secondary: "#002a3a", tertiary: "#003e54", hover: "#003e54" },
|
|
836
|
+
{ primary: "#e0f2fe", secondary: "#7dd3fc", muted: "#0369a1" },
|
|
837
|
+
"#075985"
|
|
838
|
+
);
|
|
839
|
+
V(
|
|
840
|
+
"Shadow",
|
|
841
|
+
{
|
|
842
|
+
primary: "#a3a3a3",
|
|
843
|
+
primaryHover: "#737373",
|
|
844
|
+
success: "#4ade80",
|
|
845
|
+
warning: "#facc15",
|
|
846
|
+
error: "#f87171",
|
|
847
|
+
info: "#38bdf8"
|
|
848
|
+
},
|
|
849
|
+
{ primary: "#171717", secondary: "#1f1f1f", tertiary: "#2a2a2a", hover: "#2a2a2a" },
|
|
850
|
+
{ primary: "#e5e5e5", secondary: "#a3a3a3", muted: "#525252" },
|
|
851
|
+
"#404040"
|
|
852
|
+
);
|
|
853
|
+
V(
|
|
854
|
+
"Emerald Dark",
|
|
855
|
+
{
|
|
856
|
+
primary: "#34d399",
|
|
857
|
+
primaryHover: "#10b981",
|
|
858
|
+
success: "#4ade80",
|
|
859
|
+
warning: "#fbbf24",
|
|
860
|
+
error: "#f87171",
|
|
861
|
+
info: "#22d3ee"
|
|
862
|
+
},
|
|
863
|
+
{ primary: "#022c22", secondary: "#064e3b", tertiary: "#065f46", hover: "#065f46" },
|
|
864
|
+
{ primary: "#ecfdf5", secondary: "#6ee7b7", muted: "#047857" },
|
|
865
|
+
"#047857"
|
|
866
|
+
);
|
|
867
|
+
z(
|
|
868
|
+
"Forest",
|
|
869
|
+
{
|
|
870
|
+
primary: "#166534",
|
|
871
|
+
primaryHover: "#14532d",
|
|
872
|
+
success: "#22c55e",
|
|
873
|
+
warning: "#ca8a04",
|
|
874
|
+
error: "#dc2626",
|
|
875
|
+
info: "#0891b2"
|
|
876
|
+
},
|
|
877
|
+
{ primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
|
|
878
|
+
{ primary: "#052e16", secondary: "#166534", muted: "#4ade80" },
|
|
879
|
+
"#86efac"
|
|
880
|
+
);
|
|
881
|
+
z(
|
|
882
|
+
"Ocean",
|
|
883
|
+
{
|
|
884
|
+
primary: "#0369a1",
|
|
885
|
+
primaryHover: "#075985",
|
|
886
|
+
success: "#059669",
|
|
887
|
+
warning: "#d97706",
|
|
888
|
+
error: "#dc2626",
|
|
889
|
+
info: "#0284c7"
|
|
890
|
+
},
|
|
891
|
+
{ primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
|
|
892
|
+
{ primary: "#0c4a6e", secondary: "#0369a1", muted: "#38bdf8" },
|
|
893
|
+
"#7dd3fc"
|
|
894
|
+
);
|
|
895
|
+
z(
|
|
896
|
+
"Desert",
|
|
897
|
+
{
|
|
898
|
+
primary: "#b45309",
|
|
899
|
+
primaryHover: "#92400e",
|
|
900
|
+
success: "#4d7c0f",
|
|
901
|
+
warning: "#a16207",
|
|
902
|
+
error: "#b91c1c",
|
|
903
|
+
info: "#0e7490"
|
|
904
|
+
},
|
|
905
|
+
{ primary: "#fefce8", secondary: "#fef9c3", tertiary: "#fef08a", hover: "#fef9c3" },
|
|
906
|
+
{ primary: "#422006", secondary: "#713f12", muted: "#ca8a04" },
|
|
907
|
+
"#fde047"
|
|
908
|
+
);
|
|
909
|
+
z(
|
|
910
|
+
"Sunset",
|
|
911
|
+
{
|
|
912
|
+
primary: "#ea580c",
|
|
913
|
+
primaryHover: "#c2410c",
|
|
914
|
+
success: "#16a34a",
|
|
915
|
+
warning: "#d97706",
|
|
916
|
+
error: "#dc2626",
|
|
917
|
+
info: "#0891b2"
|
|
918
|
+
},
|
|
919
|
+
{ primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
|
|
920
|
+
{ primary: "#431407", secondary: "#9a3412", muted: "#f97316" },
|
|
921
|
+
"#fdba74"
|
|
922
|
+
);
|
|
923
|
+
z(
|
|
924
|
+
"Aurora",
|
|
925
|
+
{
|
|
926
|
+
primary: "#0d9488",
|
|
927
|
+
primaryHover: "#0f766e",
|
|
928
|
+
success: "#22c55e",
|
|
929
|
+
warning: "#eab308",
|
|
930
|
+
error: "#ef4444",
|
|
931
|
+
info: "#06b6d4"
|
|
932
|
+
},
|
|
933
|
+
{ primary: "#f0fdfa", secondary: "#ccfbf1", tertiary: "#99f6e4", hover: "#ccfbf1" },
|
|
934
|
+
{ primary: "#134e4a", secondary: "#115e59", muted: "#2dd4bf" },
|
|
935
|
+
"#5eead4"
|
|
936
|
+
);
|
|
937
|
+
z(
|
|
938
|
+
"Lavender",
|
|
939
|
+
{
|
|
940
|
+
primary: "#7e22ce",
|
|
941
|
+
primaryHover: "#6b21a8",
|
|
942
|
+
success: "#16a34a",
|
|
943
|
+
warning: "#d97706",
|
|
944
|
+
error: "#dc2626",
|
|
945
|
+
info: "#0891b2"
|
|
946
|
+
},
|
|
947
|
+
{ primary: "#faf5ff", secondary: "#f3e8ff", tertiary: "#e9d5ff", hover: "#f3e8ff" },
|
|
948
|
+
{ primary: "#3b0764", secondary: "#581c87", muted: "#a855f7" },
|
|
949
|
+
"#d8b4fe"
|
|
950
|
+
);
|
|
951
|
+
z(
|
|
952
|
+
"Autumn",
|
|
953
|
+
{
|
|
954
|
+
primary: "#c2410c",
|
|
955
|
+
primaryHover: "#9a3412",
|
|
956
|
+
success: "#4d7c0f",
|
|
957
|
+
warning: "#a16207",
|
|
958
|
+
error: "#b91c1c",
|
|
959
|
+
info: "#0e7490"
|
|
960
|
+
},
|
|
961
|
+
{ primary: "#fef2f2", secondary: "#fee2e2", tertiary: "#fecaca", hover: "#fee2e2" },
|
|
962
|
+
{ primary: "#450a0a", secondary: "#7f1d1d", muted: "#f87171" },
|
|
963
|
+
"#fca5a5"
|
|
964
|
+
);
|
|
965
|
+
z(
|
|
966
|
+
"Spring",
|
|
967
|
+
{
|
|
968
|
+
primary: "#16a34a",
|
|
969
|
+
primaryHover: "#15803d",
|
|
970
|
+
success: "#22c55e",
|
|
971
|
+
warning: "#eab308",
|
|
972
|
+
error: "#ef4444",
|
|
973
|
+
info: "#06b6d4"
|
|
974
|
+
},
|
|
975
|
+
{ primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
|
|
976
|
+
{ primary: "#14532d", secondary: "#166534", muted: "#4ade80" },
|
|
977
|
+
"#86efac"
|
|
978
|
+
);
|
|
979
|
+
z(
|
|
980
|
+
"Arctic",
|
|
981
|
+
{
|
|
982
|
+
primary: "#0ea5e9",
|
|
983
|
+
primaryHover: "#0284c7",
|
|
984
|
+
success: "#10b981",
|
|
985
|
+
warning: "#f59e0b",
|
|
986
|
+
error: "#ef4444",
|
|
987
|
+
info: "#06b6d4"
|
|
988
|
+
},
|
|
989
|
+
{ primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
|
|
990
|
+
{ primary: "#0c4a6e", secondary: "#0369a1", muted: "#7dd3fc" },
|
|
991
|
+
"#bae6fd"
|
|
992
|
+
);
|
|
993
|
+
z(
|
|
994
|
+
"Tropical",
|
|
995
|
+
{
|
|
996
|
+
primary: "#0d9488",
|
|
997
|
+
primaryHover: "#0f766e",
|
|
998
|
+
success: "#16a34a",
|
|
999
|
+
warning: "#f59e0b",
|
|
1000
|
+
error: "#ef4444",
|
|
1001
|
+
info: "#06b6d4"
|
|
1002
|
+
},
|
|
1003
|
+
{ primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
|
|
1004
|
+
{ primary: "#064e3b", secondary: "#065f46", muted: "#6ee7b7" },
|
|
1005
|
+
"#a7f3d0"
|
|
1006
|
+
);
|
|
1007
|
+
z(
|
|
1008
|
+
"Pastel Rose",
|
|
1009
|
+
{
|
|
1010
|
+
primary: "#f472b6",
|
|
1011
|
+
primaryHover: "#ec4899",
|
|
1012
|
+
success: "#4ade80",
|
|
1013
|
+
warning: "#fcd34d",
|
|
1014
|
+
error: "#fb7185",
|
|
1015
|
+
info: "#67e8f9"
|
|
1016
|
+
},
|
|
1017
|
+
{ primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
|
|
1018
|
+
{ primary: "#831843", secondary: "#9d174d", muted: "#f9a8d4" },
|
|
1019
|
+
"#f9a8d4"
|
|
1020
|
+
);
|
|
1021
|
+
z(
|
|
1022
|
+
"Pastel Sky",
|
|
1023
|
+
{
|
|
1024
|
+
primary: "#38bdf8",
|
|
1025
|
+
primaryHover: "#0ea5e9",
|
|
1026
|
+
success: "#4ade80",
|
|
1027
|
+
warning: "#fcd34d",
|
|
1028
|
+
error: "#fb7185",
|
|
1029
|
+
info: "#67e8f9"
|
|
1030
|
+
},
|
|
1031
|
+
{ primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
|
|
1032
|
+
{ primary: "#075985", secondary: "#0369a1", muted: "#7dd3fc" },
|
|
1033
|
+
"#bae6fd"
|
|
1034
|
+
);
|
|
1035
|
+
z(
|
|
1036
|
+
"Pastel Mint",
|
|
1037
|
+
{
|
|
1038
|
+
primary: "#34d399",
|
|
1039
|
+
primaryHover: "#10b981",
|
|
1040
|
+
success: "#4ade80",
|
|
1041
|
+
warning: "#fcd34d",
|
|
1042
|
+
error: "#fb7185",
|
|
1043
|
+
info: "#67e8f9"
|
|
1044
|
+
},
|
|
1045
|
+
{ primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
|
|
1046
|
+
{ primary: "#065f46", secondary: "#047857", muted: "#6ee7b7" },
|
|
1047
|
+
"#a7f3d0"
|
|
1048
|
+
);
|
|
1049
|
+
z(
|
|
1050
|
+
"Pastel Peach",
|
|
1051
|
+
{
|
|
1052
|
+
primary: "#fb923c",
|
|
1053
|
+
primaryHover: "#f97316",
|
|
1054
|
+
success: "#4ade80",
|
|
1055
|
+
warning: "#fcd34d",
|
|
1056
|
+
error: "#fb7185",
|
|
1057
|
+
info: "#67e8f9"
|
|
1058
|
+
},
|
|
1059
|
+
{ primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
|
|
1060
|
+
{ primary: "#7c2d12", secondary: "#9a3412", muted: "#fdba74" },
|
|
1061
|
+
"#fed7aa"
|
|
1062
|
+
);
|
|
1063
|
+
z(
|
|
1064
|
+
"Pastel Lavender",
|
|
1065
|
+
{
|
|
1066
|
+
primary: "#a78bfa",
|
|
1067
|
+
primaryHover: "#8b5cf6",
|
|
1068
|
+
success: "#4ade80",
|
|
1069
|
+
warning: "#fcd34d",
|
|
1070
|
+
error: "#fb7185",
|
|
1071
|
+
info: "#67e8f9"
|
|
1072
|
+
},
|
|
1073
|
+
{ primary: "#f5f3ff", secondary: "#ede9fe", tertiary: "#ddd6fe", hover: "#ede9fe" },
|
|
1074
|
+
{ primary: "#4c1d95", secondary: "#5b21b6", muted: "#c4b5fd" },
|
|
1075
|
+
"#ddd6fe"
|
|
1076
|
+
);
|
|
1077
|
+
z(
|
|
1078
|
+
"Pastel Lemon",
|
|
1079
|
+
{
|
|
1080
|
+
primary: "#facc15",
|
|
1081
|
+
primaryHover: "#eab308",
|
|
1082
|
+
success: "#4ade80",
|
|
1083
|
+
warning: "#fcd34d",
|
|
1084
|
+
error: "#fb7185",
|
|
1085
|
+
info: "#67e8f9"
|
|
1086
|
+
},
|
|
1087
|
+
{ primary: "#fefce8", secondary: "#fef9c3", tertiary: "#fef08a", hover: "#fef9c3" },
|
|
1088
|
+
{ primary: "#713f12", secondary: "#854d0e", muted: "#fde047" },
|
|
1089
|
+
"#fef08a"
|
|
1090
|
+
);
|
|
1091
|
+
z(
|
|
1092
|
+
"Pastel Sage",
|
|
1093
|
+
{
|
|
1094
|
+
primary: "#86efac",
|
|
1095
|
+
primaryHover: "#4ade80",
|
|
1096
|
+
success: "#22c55e",
|
|
1097
|
+
warning: "#fcd34d",
|
|
1098
|
+
error: "#fb7185",
|
|
1099
|
+
info: "#67e8f9"
|
|
1100
|
+
},
|
|
1101
|
+
{ primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
|
|
1102
|
+
{ primary: "#166534", secondary: "#15803d", muted: "#86efac" },
|
|
1103
|
+
"#bbf7d0"
|
|
1104
|
+
);
|
|
1105
|
+
z(
|
|
1106
|
+
"Pastel Coral",
|
|
1107
|
+
{
|
|
1108
|
+
primary: "#fb7185",
|
|
1109
|
+
primaryHover: "#f43f5e",
|
|
1110
|
+
success: "#4ade80",
|
|
1111
|
+
warning: "#fcd34d",
|
|
1112
|
+
error: "#ef4444",
|
|
1113
|
+
info: "#67e8f9"
|
|
1114
|
+
},
|
|
1115
|
+
{ primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
|
|
1116
|
+
{ primary: "#881337", secondary: "#9f1239", muted: "#fda4af" },
|
|
1117
|
+
"#fecdd3"
|
|
1118
|
+
);
|
|
1119
|
+
z(
|
|
1120
|
+
"Banking",
|
|
1121
|
+
{
|
|
1122
|
+
primary: "#1e3a5f",
|
|
1123
|
+
primaryHover: "#152c4a",
|
|
1124
|
+
success: "#059669",
|
|
1125
|
+
warning: "#d97706",
|
|
1126
|
+
error: "#dc2626",
|
|
1127
|
+
info: "#0891b2"
|
|
1128
|
+
},
|
|
1129
|
+
{ primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
|
|
1130
|
+
{ primary: "#0f172a", secondary: "#334155", muted: "#94a3b8" },
|
|
1131
|
+
"#cbd5e1"
|
|
1132
|
+
);
|
|
1133
|
+
z(
|
|
1134
|
+
"Healthcare",
|
|
1135
|
+
{
|
|
1136
|
+
primary: "#0891b2",
|
|
1137
|
+
primaryHover: "#0e7490",
|
|
1138
|
+
success: "#059669",
|
|
1139
|
+
warning: "#d97706",
|
|
1140
|
+
error: "#dc2626",
|
|
1141
|
+
info: "#0284c7"
|
|
1142
|
+
},
|
|
1143
|
+
{ primary: "#f0fdfa", secondary: "#e0f7fa", tertiary: "#b2ebf2", hover: "#e0f7fa" },
|
|
1144
|
+
{ primary: "#134e4a", secondary: "#1a6b6a", muted: "#80cbc4" },
|
|
1145
|
+
"#b2dfdb"
|
|
1146
|
+
);
|
|
1147
|
+
z(
|
|
1148
|
+
"Legal",
|
|
1149
|
+
{
|
|
1150
|
+
primary: "#1e293b",
|
|
1151
|
+
primaryHover: "#0f172a",
|
|
1152
|
+
success: "#059669",
|
|
1153
|
+
warning: "#d97706",
|
|
1154
|
+
error: "#dc2626",
|
|
1155
|
+
info: "#0284c7"
|
|
1156
|
+
},
|
|
1157
|
+
{ primary: "#fafaf9", secondary: "#f5f5f4", tertiary: "#e7e5e4", hover: "#e7e5e4" },
|
|
1158
|
+
{ primary: "#0f172a", secondary: "#44403c", muted: "#a8a29e" },
|
|
1159
|
+
"#d6d3d1"
|
|
1160
|
+
);
|
|
1161
|
+
z(
|
|
1162
|
+
"Tech Startup",
|
|
1163
|
+
{
|
|
1164
|
+
primary: "#7c3aed",
|
|
1165
|
+
primaryHover: "#6d28d9",
|
|
1166
|
+
success: "#10b981",
|
|
1167
|
+
warning: "#f59e0b",
|
|
1168
|
+
error: "#ef4444",
|
|
1169
|
+
info: "#06b6d4"
|
|
1170
|
+
},
|
|
1171
|
+
{ primary: "#faf5ff", secondary: "#f3e8ff", tertiary: "#e9d5ff", hover: "#f3e8ff" },
|
|
1172
|
+
{ primary: "#1e1b4b", secondary: "#4c1d95", muted: "#a78bfa" },
|
|
1173
|
+
"#c4b5fd"
|
|
1174
|
+
);
|
|
1175
|
+
z(
|
|
1176
|
+
"Enterprise",
|
|
1177
|
+
{
|
|
1178
|
+
primary: "#1e40af",
|
|
1179
|
+
primaryHover: "#1e3a8a",
|
|
1180
|
+
success: "#059669",
|
|
1181
|
+
warning: "#d97706",
|
|
1182
|
+
error: "#dc2626",
|
|
1183
|
+
info: "#0891b2"
|
|
1184
|
+
},
|
|
1185
|
+
{ primary: "#eff6ff", secondary: "#dbeafe", tertiary: "#bfdbfe", hover: "#dbeafe" },
|
|
1186
|
+
{ primary: "#1e3a5f", secondary: "#1e40af", muted: "#60a5fa" },
|
|
1187
|
+
"#93c5fd"
|
|
1188
|
+
);
|
|
1189
|
+
z(
|
|
1190
|
+
"Government",
|
|
1191
|
+
{
|
|
1192
|
+
primary: "#1d4ed8",
|
|
1193
|
+
primaryHover: "#1e40af",
|
|
1194
|
+
success: "#059669",
|
|
1195
|
+
warning: "#d97706",
|
|
1196
|
+
error: "#dc2626",
|
|
1197
|
+
info: "#0891b2"
|
|
1198
|
+
},
|
|
1199
|
+
{ primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
|
|
1200
|
+
{ primary: "#0f172a", secondary: "#1e293b", muted: "#64748b" },
|
|
1201
|
+
"#cbd5e1"
|
|
1202
|
+
);
|
|
1203
|
+
z(
|
|
1204
|
+
"Education",
|
|
1205
|
+
{
|
|
1206
|
+
primary: "#059669",
|
|
1207
|
+
primaryHover: "#047857",
|
|
1208
|
+
success: "#16a34a",
|
|
1209
|
+
warning: "#f59e0b",
|
|
1210
|
+
error: "#ef4444",
|
|
1211
|
+
info: "#0891b2"
|
|
1212
|
+
},
|
|
1213
|
+
{ primary: "#f0fdf9", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
|
|
1214
|
+
{ primary: "#064e3b", secondary: "#065f46", muted: "#6ee7b7" },
|
|
1215
|
+
"#a7f3d0"
|
|
1216
|
+
);
|
|
1217
|
+
z(
|
|
1218
|
+
"Real Estate",
|
|
1219
|
+
{
|
|
1220
|
+
primary: "#92400e",
|
|
1221
|
+
primaryHover: "#78350f",
|
|
1222
|
+
success: "#059669",
|
|
1223
|
+
warning: "#b45309",
|
|
1224
|
+
error: "#dc2626",
|
|
1225
|
+
info: "#0891b2"
|
|
1226
|
+
},
|
|
1227
|
+
{ primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
|
|
1228
|
+
{ primary: "#422006", secondary: "#713f12", muted: "#d97706" },
|
|
1229
|
+
"#fcd34d"
|
|
1230
|
+
);
|
|
1231
|
+
z(
|
|
1232
|
+
"Nord",
|
|
1233
|
+
{
|
|
1234
|
+
primary: "#5e81ac",
|
|
1235
|
+
primaryHover: "#4c6b90",
|
|
1236
|
+
success: "#a3be8c",
|
|
1237
|
+
warning: "#ebcb8b",
|
|
1238
|
+
error: "#bf616a",
|
|
1239
|
+
info: "#88c0d0"
|
|
1240
|
+
},
|
|
1241
|
+
{ primary: "#eceff4", secondary: "#e5e9f0", tertiary: "#d8dee9", hover: "#d8dee9" },
|
|
1242
|
+
{ primary: "#2e3440", secondary: "#3b4252", muted: "#4c566a" },
|
|
1243
|
+
"#d8dee9"
|
|
1244
|
+
);
|
|
1245
|
+
V(
|
|
1246
|
+
"Dracula",
|
|
1247
|
+
{
|
|
1248
|
+
primary: "#bd93f9",
|
|
1249
|
+
primaryHover: "#9d79d9",
|
|
1250
|
+
success: "#50fa7b",
|
|
1251
|
+
warning: "#f1fa8c",
|
|
1252
|
+
error: "#ff5555",
|
|
1253
|
+
info: "#8be9fd"
|
|
1254
|
+
},
|
|
1255
|
+
{ primary: "#282a36", secondary: "#343746", tertiary: "#44475a", hover: "#44475a" },
|
|
1256
|
+
{ primary: "#f8f8f2", secondary: "#c0c0c0", muted: "#6272a4" },
|
|
1257
|
+
"#44475a"
|
|
1258
|
+
);
|
|
1259
|
+
z(
|
|
1260
|
+
"Solarized Light",
|
|
1261
|
+
{
|
|
1262
|
+
primary: "#268bd2",
|
|
1263
|
+
primaryHover: "#1a6da0",
|
|
1264
|
+
success: "#859900",
|
|
1265
|
+
warning: "#b58900",
|
|
1266
|
+
error: "#dc322f",
|
|
1267
|
+
info: "#2aa198"
|
|
1268
|
+
},
|
|
1269
|
+
{ primary: "#fdf6e3", secondary: "#eee8d5", tertiary: "#e0dbc7", hover: "#eee8d5" },
|
|
1270
|
+
{ primary: "#073642", secondary: "#586e75", muted: "#93a1a1" },
|
|
1271
|
+
"#eee8d5"
|
|
1272
|
+
);
|
|
1273
|
+
V(
|
|
1274
|
+
"Solarized Dark",
|
|
1275
|
+
{
|
|
1276
|
+
primary: "#268bd2",
|
|
1277
|
+
primaryHover: "#3d98db",
|
|
1278
|
+
success: "#859900",
|
|
1279
|
+
warning: "#b58900",
|
|
1280
|
+
error: "#dc322f",
|
|
1281
|
+
info: "#2aa198"
|
|
1282
|
+
},
|
|
1283
|
+
{ primary: "#002b36", secondary: "#073642", tertiary: "#0a4858", hover: "#073642" },
|
|
1284
|
+
{ primary: "#eee8d5", secondary: "#93a1a1", muted: "#586e75" },
|
|
1285
|
+
"#073642"
|
|
1286
|
+
);
|
|
1287
|
+
V(
|
|
1288
|
+
"Monokai",
|
|
1289
|
+
{
|
|
1290
|
+
primary: "#66d9ef",
|
|
1291
|
+
primaryHover: "#45c0d6",
|
|
1292
|
+
success: "#a6e22e",
|
|
1293
|
+
warning: "#e6db74",
|
|
1294
|
+
error: "#f92672",
|
|
1295
|
+
info: "#66d9ef"
|
|
1296
|
+
},
|
|
1297
|
+
{ primary: "#272822", secondary: "#34352e", tertiary: "#3e3d32", hover: "#3e3d32" },
|
|
1298
|
+
{ primary: "#f8f8f2", secondary: "#cfcfc2", muted: "#75715e" },
|
|
1299
|
+
"#3e3d32"
|
|
1300
|
+
);
|
|
1301
|
+
V(
|
|
1302
|
+
"One Dark",
|
|
1303
|
+
{
|
|
1304
|
+
primary: "#61afef",
|
|
1305
|
+
primaryHover: "#4b9ee0",
|
|
1306
|
+
success: "#98c379",
|
|
1307
|
+
warning: "#e5c07b",
|
|
1308
|
+
error: "#e06c75",
|
|
1309
|
+
info: "#56b6c2"
|
|
1310
|
+
},
|
|
1311
|
+
{ primary: "#282c34", secondary: "#2c313a", tertiary: "#353b45", hover: "#353b45" },
|
|
1312
|
+
{ primary: "#abb2bf", secondary: "#828997", muted: "#545862" },
|
|
1313
|
+
"#3e4452"
|
|
1314
|
+
);
|
|
1315
|
+
V(
|
|
1316
|
+
"Synthwave",
|
|
1317
|
+
{
|
|
1318
|
+
primary: "#ff7edb",
|
|
1319
|
+
primaryHover: "#e660c2",
|
|
1320
|
+
success: "#72f1b8",
|
|
1321
|
+
warning: "#fede5d",
|
|
1322
|
+
error: "#fe4450",
|
|
1323
|
+
info: "#36f9f6"
|
|
1324
|
+
},
|
|
1325
|
+
{ primary: "#241b2f", secondary: "#2d2140", tertiary: "#362a50", hover: "#362a50" },
|
|
1326
|
+
{ primary: "#f0e4fc", secondary: "#b4a0cc", muted: "#6c5c84" },
|
|
1327
|
+
"#4a3866"
|
|
1328
|
+
);
|
|
1329
|
+
z(
|
|
1330
|
+
"Vaporwave",
|
|
1331
|
+
{
|
|
1332
|
+
primary: "#ff71ce",
|
|
1333
|
+
primaryHover: "#e655b5",
|
|
1334
|
+
success: "#78dcca",
|
|
1335
|
+
warning: "#ffb86c",
|
|
1336
|
+
error: "#ff5555",
|
|
1337
|
+
info: "#76e8fc"
|
|
1338
|
+
},
|
|
1339
|
+
{ primary: "#fce4f7", secondary: "#e8d0f4", tertiary: "#d4bcf0", hover: "#e8d0f4" },
|
|
1340
|
+
{ primary: "#4a1a4e", secondary: "#7b3f7d", muted: "#c080c0" },
|
|
1341
|
+
"#d8a8e8"
|
|
1342
|
+
);
|
|
1343
|
+
V(
|
|
1344
|
+
"Terminal Green",
|
|
1345
|
+
{
|
|
1346
|
+
primary: "#00ff41",
|
|
1347
|
+
primaryHover: "#00cc34",
|
|
1348
|
+
success: "#00ff41",
|
|
1349
|
+
warning: "#ffff00",
|
|
1350
|
+
error: "#ff0000",
|
|
1351
|
+
info: "#00ffff"
|
|
1352
|
+
},
|
|
1353
|
+
{ primary: "#0a0a0a", secondary: "#0d1a0d", tertiary: "#1a2e1a", hover: "#1a2e1a" },
|
|
1354
|
+
{ primary: "#00ff41", secondary: "#00cc33", muted: "#008822" },
|
|
1355
|
+
"#003300"
|
|
1356
|
+
);
|
|
1357
|
+
z(
|
|
1358
|
+
"Sepia",
|
|
1359
|
+
{
|
|
1360
|
+
primary: "#8b6914",
|
|
1361
|
+
primaryHover: "#704f10",
|
|
1362
|
+
success: "#6b8e23",
|
|
1363
|
+
warning: "#cd853f",
|
|
1364
|
+
error: "#b22222",
|
|
1365
|
+
info: "#5f9ea0"
|
|
1366
|
+
},
|
|
1367
|
+
{ primary: "#faf0e6", secondary: "#f5e6d3", tertiary: "#eddcc7", hover: "#f5e6d3" },
|
|
1368
|
+
{ primary: "#3e2723", secondary: "#5d4037", muted: "#a1887f" },
|
|
1369
|
+
"#d7ccc8"
|
|
1370
|
+
);
|
|
1371
|
+
z(
|
|
1372
|
+
"Vintage",
|
|
1373
|
+
{
|
|
1374
|
+
primary: "#8d6e63",
|
|
1375
|
+
primaryHover: "#6d4c41",
|
|
1376
|
+
success: "#66bb6a",
|
|
1377
|
+
warning: "#ffb300",
|
|
1378
|
+
error: "#e53935",
|
|
1379
|
+
info: "#29b6f6"
|
|
1380
|
+
},
|
|
1381
|
+
{ primary: "#efebe9", secondary: "#d7ccc8", tertiary: "#bcaaa4", hover: "#d7ccc8" },
|
|
1382
|
+
{ primary: "#3e2723", secondary: "#5d4037", muted: "#a1887f" },
|
|
1383
|
+
"#bcaaa4"
|
|
1384
|
+
);
|
|
1385
|
+
V(
|
|
1386
|
+
"Cyberpunk",
|
|
1387
|
+
{
|
|
1388
|
+
primary: "#00f0ff",
|
|
1389
|
+
primaryHover: "#00c8d4",
|
|
1390
|
+
success: "#39ff14",
|
|
1391
|
+
warning: "#ffff00",
|
|
1392
|
+
error: "#ff003c",
|
|
1393
|
+
info: "#bf00ff"
|
|
1394
|
+
},
|
|
1395
|
+
{ primary: "#0a0e17", secondary: "#131824", tertiary: "#1c2333", hover: "#1c2333" },
|
|
1396
|
+
{ primary: "#e0fbfc", secondary: "#80d4dd", muted: "#3a6b72" },
|
|
1397
|
+
"#1c3a44"
|
|
1398
|
+
);
|
|
1399
|
+
V(
|
|
1400
|
+
"Neon",
|
|
1401
|
+
{
|
|
1402
|
+
primary: "#ff00ff",
|
|
1403
|
+
primaryHover: "#cc00cc",
|
|
1404
|
+
success: "#00ff00",
|
|
1405
|
+
warning: "#ffff00",
|
|
1406
|
+
error: "#ff0000",
|
|
1407
|
+
info: "#00ffff"
|
|
1408
|
+
},
|
|
1409
|
+
{ primary: "#0d0d0d", secondary: "#1a1a1a", tertiary: "#262626", hover: "#262626" },
|
|
1410
|
+
{ primary: "#ffffff", secondary: "#cccccc", muted: "#666666" },
|
|
1411
|
+
"#333333"
|
|
1412
|
+
);
|
|
1413
|
+
V(
|
|
1414
|
+
"Retrowave",
|
|
1415
|
+
{
|
|
1416
|
+
primary: "#f77fbe",
|
|
1417
|
+
primaryHover: "#e462a3",
|
|
1418
|
+
success: "#72f1b8",
|
|
1419
|
+
warning: "#ffe261",
|
|
1420
|
+
error: "#ff4444",
|
|
1421
|
+
info: "#79e8fb"
|
|
1422
|
+
},
|
|
1423
|
+
{ primary: "#1b0a2e", secondary: "#261440", tertiary: "#321e52", hover: "#321e52" },
|
|
1424
|
+
{ primary: "#ffe6f7", secondary: "#c9a0c9", muted: "#6b4c7a" },
|
|
1425
|
+
"#4a2d66"
|
|
1426
|
+
);
|
|
1427
|
+
z(
|
|
1428
|
+
"Christmas",
|
|
1429
|
+
{
|
|
1430
|
+
primary: "#c41e3a",
|
|
1431
|
+
primaryHover: "#a01830",
|
|
1432
|
+
success: "#228b22",
|
|
1433
|
+
warning: "#ffd700",
|
|
1434
|
+
error: "#dc2626",
|
|
1435
|
+
info: "#0891b2"
|
|
1436
|
+
},
|
|
1437
|
+
{ primary: "#fef2f2", secondary: "#fde8e8", tertiary: "#f8d0d0", hover: "#fde8e8" },
|
|
1438
|
+
{ primary: "#3b0a0a", secondary: "#7f1d1d", muted: "#dc6868" },
|
|
1439
|
+
"#e8a0a0"
|
|
1440
|
+
);
|
|
1441
|
+
V(
|
|
1442
|
+
"Halloween",
|
|
1443
|
+
{
|
|
1444
|
+
primary: "#ff6600",
|
|
1445
|
+
primaryHover: "#e05500",
|
|
1446
|
+
success: "#4ade80",
|
|
1447
|
+
warning: "#fbbf24",
|
|
1448
|
+
error: "#ff0000",
|
|
1449
|
+
info: "#9333ea"
|
|
1450
|
+
},
|
|
1451
|
+
{ primary: "#1a0a00", secondary: "#2d1500", tertiary: "#402000", hover: "#402000" },
|
|
1452
|
+
{ primary: "#ffedd5", secondary: "#fdba74", muted: "#9a5c28" },
|
|
1453
|
+
"#5c3400"
|
|
1454
|
+
);
|
|
1455
|
+
z(
|
|
1456
|
+
"Valentine",
|
|
1457
|
+
{
|
|
1458
|
+
primary: "#e11d48",
|
|
1459
|
+
primaryHover: "#be123c",
|
|
1460
|
+
success: "#10b981",
|
|
1461
|
+
warning: "#f59e0b",
|
|
1462
|
+
error: "#dc2626",
|
|
1463
|
+
info: "#ec4899"
|
|
1464
|
+
},
|
|
1465
|
+
{ primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
|
|
1466
|
+
{ primary: "#4c0519", secondary: "#881337", muted: "#f9a8d4" },
|
|
1467
|
+
"#fda4af"
|
|
1468
|
+
);
|
|
1469
|
+
z(
|
|
1470
|
+
"Easter",
|
|
1471
|
+
{
|
|
1472
|
+
primary: "#a78bfa",
|
|
1473
|
+
primaryHover: "#8b5cf6",
|
|
1474
|
+
success: "#4ade80",
|
|
1475
|
+
warning: "#fcd34d",
|
|
1476
|
+
error: "#fb7185",
|
|
1477
|
+
info: "#67e8f9"
|
|
1478
|
+
},
|
|
1479
|
+
{ primary: "#fef9ff", secondary: "#f3e8ff", tertiary: "#e8d5ff", hover: "#f3e8ff" },
|
|
1480
|
+
{ primary: "#581c87", secondary: "#6d28d9", muted: "#c4b5fd" },
|
|
1481
|
+
"#ddd6fe"
|
|
1482
|
+
);
|
|
1483
|
+
z(
|
|
1484
|
+
"Summer Beach",
|
|
1485
|
+
{
|
|
1486
|
+
primary: "#0ea5e9",
|
|
1487
|
+
primaryHover: "#0284c7",
|
|
1488
|
+
success: "#10b981",
|
|
1489
|
+
warning: "#f59e0b",
|
|
1490
|
+
error: "#ef4444",
|
|
1491
|
+
info: "#06b6d4"
|
|
1492
|
+
},
|
|
1493
|
+
{ primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
|
|
1494
|
+
{ primary: "#0c4a6e", secondary: "#0369a1", muted: "#7dd3fc" },
|
|
1495
|
+
"#fcd34d"
|
|
1496
|
+
);
|
|
1497
|
+
z(
|
|
1498
|
+
"Winter Frost",
|
|
1499
|
+
{
|
|
1500
|
+
primary: "#3b82f6",
|
|
1501
|
+
primaryHover: "#2563eb",
|
|
1502
|
+
success: "#10b981",
|
|
1503
|
+
warning: "#f59e0b",
|
|
1504
|
+
error: "#ef4444",
|
|
1505
|
+
info: "#06b6d4"
|
|
1506
|
+
},
|
|
1507
|
+
{ primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
|
|
1508
|
+
{ primary: "#1e3a5f", secondary: "#1e40af", muted: "#93c5fd" },
|
|
1509
|
+
"#bfdbfe"
|
|
1510
|
+
);
|
|
1511
|
+
z(
|
|
1512
|
+
"Cherry Blossom",
|
|
1513
|
+
{
|
|
1514
|
+
primary: "#ec4899",
|
|
1515
|
+
primaryHover: "#db2777",
|
|
1516
|
+
success: "#10b981",
|
|
1517
|
+
warning: "#f59e0b",
|
|
1518
|
+
error: "#ef4444",
|
|
1519
|
+
info: "#06b6d4"
|
|
1520
|
+
},
|
|
1521
|
+
{ primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
|
|
1522
|
+
{ primary: "#831843", secondary: "#9d174d", muted: "#f9a8d4" },
|
|
1523
|
+
"#fbcfe8"
|
|
1524
|
+
);
|
|
1525
|
+
z(
|
|
1526
|
+
"Harvest",
|
|
1527
|
+
{
|
|
1528
|
+
primary: "#b45309",
|
|
1529
|
+
primaryHover: "#92400e",
|
|
1530
|
+
success: "#4d7c0f",
|
|
1531
|
+
warning: "#a16207",
|
|
1532
|
+
error: "#b91c1c",
|
|
1533
|
+
info: "#0e7490"
|
|
1534
|
+
},
|
|
1535
|
+
{ primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
|
|
1536
|
+
{ primary: "#451a03", secondary: "#78350f", muted: "#d97706" },
|
|
1537
|
+
"#fcd34d"
|
|
1538
|
+
);
|
|
1539
|
+
z(
|
|
1540
|
+
"Japanese Zen",
|
|
1541
|
+
{
|
|
1542
|
+
primary: "#6b7280",
|
|
1543
|
+
primaryHover: "#4b5563",
|
|
1544
|
+
success: "#6b8e23",
|
|
1545
|
+
warning: "#d4a017",
|
|
1546
|
+
error: "#c0392b",
|
|
1547
|
+
info: "#5f9ea0"
|
|
1548
|
+
},
|
|
1549
|
+
{ primary: "#faf9f6", secondary: "#f0ece3", tertiary: "#e6e0d4", hover: "#f0ece3" },
|
|
1550
|
+
{ primary: "#2c2c2c", secondary: "#5c5c5c", muted: "#a0998a" },
|
|
1551
|
+
"#d5cec0"
|
|
1552
|
+
);
|
|
1553
|
+
z(
|
|
1554
|
+
"Moroccan",
|
|
1555
|
+
{
|
|
1556
|
+
primary: "#c2410c",
|
|
1557
|
+
primaryHover: "#9a3412",
|
|
1558
|
+
success: "#15803d",
|
|
1559
|
+
warning: "#ca8a04",
|
|
1560
|
+
error: "#b91c1c",
|
|
1561
|
+
info: "#0e7490"
|
|
1562
|
+
},
|
|
1563
|
+
{ primary: "#fffbf0", secondary: "#fef3e0", tertiary: "#fde6c4", hover: "#fef3e0" },
|
|
1564
|
+
{ primary: "#3a1a00", secondary: "#7c2d12", muted: "#d97706" },
|
|
1565
|
+
"#f5d0a0"
|
|
1566
|
+
);
|
|
1567
|
+
z(
|
|
1568
|
+
"Scandinavian",
|
|
1569
|
+
{
|
|
1570
|
+
primary: "#4b5563",
|
|
1571
|
+
primaryHover: "#374151",
|
|
1572
|
+
success: "#059669",
|
|
1573
|
+
warning: "#d97706",
|
|
1574
|
+
error: "#dc2626",
|
|
1575
|
+
info: "#0891b2"
|
|
1576
|
+
},
|
|
1577
|
+
{ primary: "#ffffff", secondary: "#f9fafb", tertiary: "#f3f4f6", hover: "#f3f4f6" },
|
|
1578
|
+
{ primary: "#111827", secondary: "#374151", muted: "#9ca3af" },
|
|
1579
|
+
"#e5e7eb"
|
|
1580
|
+
);
|
|
1581
|
+
z(
|
|
1582
|
+
"Mediterranean",
|
|
1583
|
+
{
|
|
1584
|
+
primary: "#1e40af",
|
|
1585
|
+
primaryHover: "#1e3a8a",
|
|
1586
|
+
success: "#059669",
|
|
1587
|
+
warning: "#d97706",
|
|
1588
|
+
error: "#dc2626",
|
|
1589
|
+
info: "#0891b2"
|
|
1590
|
+
},
|
|
1591
|
+
{ primary: "#eff6ff", secondary: "#dbeafe", tertiary: "#bfdbfe", hover: "#dbeafe" },
|
|
1592
|
+
{ primary: "#1e3a5f", secondary: "#2563eb", muted: "#93c5fd" },
|
|
1593
|
+
"#bfdbfe"
|
|
1594
|
+
);
|
|
1595
|
+
z(
|
|
1596
|
+
"Chinese New Year",
|
|
1597
|
+
{
|
|
1598
|
+
primary: "#dc2626",
|
|
1599
|
+
primaryHover: "#b91c1c",
|
|
1600
|
+
success: "#16a34a",
|
|
1601
|
+
warning: "#d4a017",
|
|
1602
|
+
error: "#ef4444",
|
|
1603
|
+
info: "#0891b2"
|
|
1604
|
+
},
|
|
1605
|
+
{ primary: "#fef2f2", secondary: "#fee2e2", tertiary: "#fecaca", hover: "#fee2e2" },
|
|
1606
|
+
{ primary: "#450a0a", secondary: "#991b1b", muted: "#f87171" },
|
|
1607
|
+
"#fca5a5"
|
|
1608
|
+
);
|
|
1609
|
+
z(
|
|
1610
|
+
"Indian Festive",
|
|
1611
|
+
{
|
|
1612
|
+
primary: "#d97706",
|
|
1613
|
+
primaryHover: "#b45309",
|
|
1614
|
+
success: "#16a34a",
|
|
1615
|
+
warning: "#ca8a04",
|
|
1616
|
+
error: "#dc2626",
|
|
1617
|
+
info: "#7c3aed"
|
|
1618
|
+
},
|
|
1619
|
+
{ primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
|
|
1620
|
+
{ primary: "#451a03", secondary: "#92400e", muted: "#f59e0b" },
|
|
1621
|
+
"#fcd34d"
|
|
1622
|
+
);
|
|
1623
|
+
z(
|
|
1624
|
+
"Brazilian Carnival",
|
|
1625
|
+
{
|
|
1626
|
+
primary: "#16a34a",
|
|
1627
|
+
primaryHover: "#15803d",
|
|
1628
|
+
success: "#22c55e",
|
|
1629
|
+
warning: "#facc15",
|
|
1630
|
+
error: "#ef4444",
|
|
1631
|
+
info: "#0ea5e9"
|
|
1632
|
+
},
|
|
1633
|
+
{ primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
|
|
1634
|
+
{ primary: "#052e16", secondary: "#166534", muted: "#4ade80" },
|
|
1635
|
+
"#86efac"
|
|
1636
|
+
);
|
|
1637
|
+
z(
|
|
1638
|
+
"African Earth",
|
|
1639
|
+
{
|
|
1640
|
+
primary: "#92400e",
|
|
1641
|
+
primaryHover: "#78350f",
|
|
1642
|
+
success: "#4d7c0f",
|
|
1643
|
+
warning: "#a16207",
|
|
1644
|
+
error: "#b91c1c",
|
|
1645
|
+
info: "#0e7490"
|
|
1646
|
+
},
|
|
1647
|
+
{ primary: "#faf5f0", secondary: "#f0e6d6", tertiary: "#e6d5bb", hover: "#f0e6d6" },
|
|
1648
|
+
{ primary: "#2b1a0e", secondary: "#5c3d1e", muted: "#a08060" },
|
|
1649
|
+
"#d4b896"
|
|
1650
|
+
);
|
|
1651
|
+
V(
|
|
1652
|
+
"High Contrast Dark",
|
|
1653
|
+
{
|
|
1654
|
+
primary: "#ffff00",
|
|
1655
|
+
primaryHover: "#cccc00",
|
|
1656
|
+
success: "#00ff00",
|
|
1657
|
+
warning: "#ff8c00",
|
|
1658
|
+
error: "#ff0000",
|
|
1659
|
+
info: "#00ffff"
|
|
1660
|
+
},
|
|
1661
|
+
{ primary: "#000000", secondary: "#1a1a1a", tertiary: "#333333", hover: "#333333" },
|
|
1662
|
+
{ primary: "#ffffff", secondary: "#ffffff", muted: "#cccccc" },
|
|
1663
|
+
"#ffffff"
|
|
1664
|
+
);
|
|
1665
|
+
z(
|
|
1666
|
+
"Monochrome",
|
|
1667
|
+
{
|
|
1668
|
+
primary: "#404040",
|
|
1669
|
+
primaryHover: "#262626",
|
|
1670
|
+
success: "#4d7c0f",
|
|
1671
|
+
warning: "#a16207",
|
|
1672
|
+
error: "#b91c1c",
|
|
1673
|
+
info: "#0e7490"
|
|
1674
|
+
},
|
|
1675
|
+
{ primary: "#fafafa", secondary: "#f0f0f0", tertiary: "#e0e0e0", hover: "#e0e0e0" },
|
|
1676
|
+
{ primary: "#1a1a1a", secondary: "#404040", muted: "#808080" },
|
|
1677
|
+
"#c0c0c0"
|
|
1678
|
+
);
|
|
1679
|
+
z(
|
|
1680
|
+
"Enhanced Contrast",
|
|
1681
|
+
{
|
|
1682
|
+
primary: "#0050b3",
|
|
1683
|
+
primaryHover: "#003d8c",
|
|
1684
|
+
success: "#006400",
|
|
1685
|
+
warning: "#cc7000",
|
|
1686
|
+
error: "#cc0000",
|
|
1687
|
+
info: "#006680"
|
|
1688
|
+
},
|
|
1689
|
+
{ primary: "#ffffff", secondary: "#f5f5f5", tertiary: "#ebebeb", hover: "#ebebeb" },
|
|
1690
|
+
{ primary: "#000000", secondary: "#1a1a1a", muted: "#595959" },
|
|
1691
|
+
"#8c8c8c"
|
|
1692
|
+
);
|
|
1693
|
+
z(
|
|
1694
|
+
"Minimalist",
|
|
1695
|
+
{
|
|
1696
|
+
primary: "#18181b",
|
|
1697
|
+
primaryHover: "#27272a",
|
|
1698
|
+
success: "#22c55e",
|
|
1699
|
+
warning: "#eab308",
|
|
1700
|
+
error: "#ef4444",
|
|
1701
|
+
info: "#3b82f6"
|
|
1702
|
+
},
|
|
1703
|
+
{ primary: "#ffffff", secondary: "#fafafa", tertiary: "#f5f5f5", hover: "#f5f5f5" },
|
|
1704
|
+
{ primary: "#0a0a0a", secondary: "#404040", muted: "#a3a3a3" },
|
|
1705
|
+
"#e5e5e5"
|
|
1706
|
+
);
|
|
1707
|
+
V(
|
|
1708
|
+
"Warm Dark",
|
|
1709
|
+
{
|
|
1710
|
+
primary: "#f59e0b",
|
|
1711
|
+
primaryHover: "#d97706",
|
|
1712
|
+
success: "#10b981",
|
|
1713
|
+
warning: "#fbbf24",
|
|
1714
|
+
error: "#f87171",
|
|
1715
|
+
info: "#38bdf8"
|
|
1716
|
+
},
|
|
1717
|
+
{ primary: "#1c1917", secondary: "#292524", tertiary: "#44403c", hover: "#44403c" },
|
|
1718
|
+
{ primary: "#fafaf9", secondary: "#d6d3d1", muted: "#78716c" },
|
|
1719
|
+
"#57534e"
|
|
1720
|
+
);
|
|
1721
|
+
V(
|
|
1722
|
+
"Soft Dark",
|
|
1723
|
+
{
|
|
1724
|
+
primary: "#a78bfa",
|
|
1725
|
+
primaryHover: "#8b5cf6",
|
|
1726
|
+
success: "#34d399",
|
|
1727
|
+
warning: "#fcd34d",
|
|
1728
|
+
error: "#fb7185",
|
|
1729
|
+
info: "#67e8f9"
|
|
1730
|
+
},
|
|
1731
|
+
{ primary: "#1e1e2e", secondary: "#262637", tertiary: "#313147", hover: "#313147" },
|
|
1732
|
+
{ primary: "#e8e8f0", secondary: "#a0a0b8", muted: "#5c5c74" },
|
|
1733
|
+
"#3e3e58"
|
|
1734
|
+
);
|
|
1735
|
+
z(
|
|
1736
|
+
"Coffee",
|
|
1737
|
+
{
|
|
1738
|
+
primary: "#6f4e37",
|
|
1739
|
+
primaryHover: "#5c3d28",
|
|
1740
|
+
success: "#4d7c0f",
|
|
1741
|
+
warning: "#a16207",
|
|
1742
|
+
error: "#b91c1c",
|
|
1743
|
+
info: "#0e7490"
|
|
1744
|
+
},
|
|
1745
|
+
{ primary: "#faf6f1", secondary: "#f0e8dc", tertiary: "#e6d8c6", hover: "#f0e8dc" },
|
|
1746
|
+
{ primary: "#2c1a0e", secondary: "#5c3d28", muted: "#a08868" },
|
|
1747
|
+
"#d4c4a8"
|
|
1748
|
+
);
|
|
1749
|
+
z(
|
|
1750
|
+
"Wine",
|
|
1751
|
+
{
|
|
1752
|
+
primary: "#7f1d1d",
|
|
1753
|
+
primaryHover: "#641717",
|
|
1754
|
+
success: "#059669",
|
|
1755
|
+
warning: "#d97706",
|
|
1756
|
+
error: "#dc2626",
|
|
1757
|
+
info: "#0891b2"
|
|
1758
|
+
},
|
|
1759
|
+
{ primary: "#fef2f2", secondary: "#fde8e8", tertiary: "#f8d0d0", hover: "#fde8e8" },
|
|
1760
|
+
{ primary: "#3b0a0a", secondary: "#7f1d1d", muted: "#dc6868" },
|
|
1761
|
+
"#e8a0a0"
|
|
1762
|
+
);
|
|
1763
|
+
createContext(null);
|
|
6
1764
|
const translations = {
|
|
7
1765
|
en: {
|
|
8
1766
|
"calculator.matrixA": "Matrix A",
|
|
@@ -159,19 +1917,28 @@ const translations = {
|
|
|
159
1917
|
}
|
|
160
1918
|
}, I18nContext = createContext({
|
|
161
1919
|
locale: "en",
|
|
162
|
-
t: (e,
|
|
1920
|
+
t: (e, r) => r ?? e
|
|
163
1921
|
});
|
|
164
|
-
function NiceI18nProvider({ locale: e = "en", overrides:
|
|
1922
|
+
function NiceI18nProvider({ locale: e = "en", overrides: r, children: t }) {
|
|
165
1923
|
const a = useMemo(() => {
|
|
166
|
-
const o = { ...translations.en, ...translations[e], ...
|
|
167
|
-
return { locale: e, t: (
|
|
168
|
-
}, [e,
|
|
169
|
-
return
|
|
1924
|
+
const o = { ...translations.en, ...translations[e], ...r };
|
|
1925
|
+
return { locale: e, t: (i, c) => o[i] ?? c ?? i };
|
|
1926
|
+
}, [e, r]);
|
|
1927
|
+
return xe.createElement(I18nContext.Provider, { value: a }, t);
|
|
170
1928
|
}
|
|
171
1929
|
function useNiceTranslation() {
|
|
172
1930
|
return useContext(I18nContext);
|
|
173
1931
|
}
|
|
174
|
-
const
|
|
1932
|
+
const MATH_EDITOR_TOUR = [
|
|
1933
|
+
{
|
|
1934
|
+
target: ".nice-math-editor",
|
|
1935
|
+
titleKey: "tutorial.mathEditor.intro.title",
|
|
1936
|
+
title: "Math editor",
|
|
1937
|
+
contentKey: "tutorial.mathEditor.intro.content",
|
|
1938
|
+
content: "Write equations as LaTeX or insert symbols from the palette; switch to handwriting input, and preview the rendered formula live.",
|
|
1939
|
+
placement: "auto"
|
|
1940
|
+
}
|
|
1941
|
+
], MATH_SYMBOLS = [
|
|
175
1942
|
// Greek lowercase
|
|
176
1943
|
{ name: "alpha", latex: "\\alpha", category: "greek", preview: "α" },
|
|
177
1944
|
{ name: "beta", latex: "\\beta", category: "greek", preview: "β" },
|
|
@@ -349,7 +2116,7 @@ const MATH_SYMBOLS = [
|
|
|
349
2116
|
}
|
|
350
2117
|
];
|
|
351
2118
|
function getSymbolsByCategory(e) {
|
|
352
|
-
return MATH_SYMBOLS.filter((
|
|
2119
|
+
return MATH_SYMBOLS.filter((r) => r.category === e);
|
|
353
2120
|
}
|
|
354
2121
|
const EQUATION_TEMPLATES = [
|
|
355
2122
|
// Basic
|
|
@@ -411,22 +2178,22 @@ const EQUATION_TEMPLATES = [
|
|
|
411
2178
|
}
|
|
412
2179
|
];
|
|
413
2180
|
class MathEditorService {
|
|
414
|
-
constructor(
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
2181
|
+
constructor(r = {}) {
|
|
2182
|
+
S(this, "equations", /* @__PURE__ */ new Map());
|
|
2183
|
+
S(this, "config");
|
|
2184
|
+
S(this, "nextNumber");
|
|
418
2185
|
this.config = {
|
|
419
|
-
enableNumbering:
|
|
420
|
-
startNumber:
|
|
421
|
-
renderDelay:
|
|
2186
|
+
enableNumbering: r.enableNumbering ?? !0,
|
|
2187
|
+
startNumber: r.startNumber ?? 1,
|
|
2188
|
+
renderDelay: r.renderDelay ?? 100
|
|
422
2189
|
}, this.nextNumber = this.config.startNumber;
|
|
423
2190
|
}
|
|
424
2191
|
/** Create new equation */
|
|
425
|
-
createEquation(
|
|
2192
|
+
createEquation(r, t) {
|
|
426
2193
|
const a = {
|
|
427
2194
|
id: this.generateId(),
|
|
428
|
-
latex:
|
|
429
|
-
label:
|
|
2195
|
+
latex: r,
|
|
2196
|
+
label: t,
|
|
430
2197
|
number: this.config.enableNumbering ? this.nextNumber++ : void 0,
|
|
431
2198
|
createdAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
432
2199
|
updatedAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
@@ -434,35 +2201,35 @@ class MathEditorService {
|
|
|
434
2201
|
return this.equations.set(a.id, a), a;
|
|
435
2202
|
}
|
|
436
2203
|
/** Update equation */
|
|
437
|
-
updateEquation(
|
|
438
|
-
const o = this.equations.get(
|
|
2204
|
+
updateEquation(r, t, a) {
|
|
2205
|
+
const o = this.equations.get(r);
|
|
439
2206
|
if (!o)
|
|
440
|
-
throw new Error(`Equation not found: ${
|
|
2207
|
+
throw new Error(`Equation not found: ${r}`);
|
|
441
2208
|
const n = {
|
|
442
2209
|
...o,
|
|
443
|
-
latex:
|
|
2210
|
+
latex: t,
|
|
444
2211
|
label: a ?? o.label,
|
|
445
2212
|
updatedAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
446
2213
|
};
|
|
447
|
-
return this.equations.set(
|
|
2214
|
+
return this.equations.set(r, n), n;
|
|
448
2215
|
}
|
|
449
2216
|
/** Delete equation */
|
|
450
|
-
deleteEquation(
|
|
451
|
-
this.equations.delete(
|
|
2217
|
+
deleteEquation(r) {
|
|
2218
|
+
this.equations.delete(r);
|
|
452
2219
|
}
|
|
453
2220
|
/** Get equation */
|
|
454
|
-
getEquation(
|
|
455
|
-
return this.equations.get(
|
|
2221
|
+
getEquation(r) {
|
|
2222
|
+
return this.equations.get(r);
|
|
456
2223
|
}
|
|
457
2224
|
/** List all equations */
|
|
458
2225
|
listEquations() {
|
|
459
2226
|
return Array.from(this.equations.values()).sort(
|
|
460
|
-
(
|
|
2227
|
+
(r, t) => new Date(r.createdAt).getTime() - new Date(t.createdAt).getTime()
|
|
461
2228
|
);
|
|
462
2229
|
}
|
|
463
2230
|
/** Export to LaTeX document */
|
|
464
2231
|
exportToLatex() {
|
|
465
|
-
const
|
|
2232
|
+
const r = [
|
|
466
2233
|
"\\documentclass{article}",
|
|
467
2234
|
"\\usepackage{amsmath}",
|
|
468
2235
|
"\\usepackage{amssymb}",
|
|
@@ -470,23 +2237,23 @@ class MathEditorService {
|
|
|
470
2237
|
"\\begin{document}",
|
|
471
2238
|
""
|
|
472
2239
|
];
|
|
473
|
-
for (const
|
|
474
|
-
|
|
475
|
-
return
|
|
2240
|
+
for (const t of this.listEquations())
|
|
2241
|
+
t.number !== void 0 ? (r.push("\\begin{equation}"), t.label && r.push(`\\label{${t.label}}`), r.push(t.latex), r.push("\\end{equation}")) : (r.push("\\["), r.push(t.latex), r.push("\\]")), r.push("");
|
|
2242
|
+
return r.push("\\end{document}"), r.join(`
|
|
476
2243
|
`);
|
|
477
2244
|
}
|
|
478
2245
|
/** Parse LaTeX and extract equations */
|
|
479
|
-
parseLatex(
|
|
480
|
-
const
|
|
2246
|
+
parseLatex(r) {
|
|
2247
|
+
const t = [], a = /\\\[([\s\S]*?)\\\]/g;
|
|
481
2248
|
let o;
|
|
482
|
-
for (; (o = a.exec(
|
|
483
|
-
|
|
2249
|
+
for (; (o = a.exec(r)) !== null; )
|
|
2250
|
+
t.push(this.createEquation(o[1].trim()));
|
|
484
2251
|
const n = /\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g;
|
|
485
|
-
for (; (o = n.exec(
|
|
486
|
-
const
|
|
487
|
-
|
|
2252
|
+
for (; (o = n.exec(r)) !== null; ) {
|
|
2253
|
+
const i = o[1].match(/\\label\{([^}]+)\}/), c = o[1].replace(/\\label\{[^}]+\}/, "").trim();
|
|
2254
|
+
t.push(this.createEquation(c, i == null ? void 0 : i[1]));
|
|
488
2255
|
}
|
|
489
|
-
return
|
|
2256
|
+
return t;
|
|
490
2257
|
}
|
|
491
2258
|
generateId() {
|
|
492
2259
|
return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
|
|
@@ -496,8 +2263,8 @@ function createMathEditorService(e) {
|
|
|
496
2263
|
return new MathEditorService(e);
|
|
497
2264
|
}
|
|
498
2265
|
async function recognizeHandwriting(e) {
|
|
499
|
-
return await new Promise((
|
|
500
|
-
latex: e.reduce((
|
|
2266
|
+
return await new Promise((t) => setTimeout(t, 500)), {
|
|
2267
|
+
latex: e.reduce((t, a) => t + a.points.length, 0) > 50 ? "\\sqrt{x^2 + y^2}" : "x",
|
|
501
2268
|
confidence: 0.85,
|
|
502
2269
|
alternatives: ["x", "X", "\\times"]
|
|
503
2270
|
};
|
|
@@ -606,70 +2373,79 @@ const styles$3 = {
|
|
|
606
2373
|
};
|
|
607
2374
|
function NiceMathEditor({
|
|
608
2375
|
service: e,
|
|
609
|
-
initialLatex:
|
|
610
|
-
onChange:
|
|
2376
|
+
initialLatex: r = "",
|
|
2377
|
+
onChange: t,
|
|
611
2378
|
className: a,
|
|
612
|
-
style: o
|
|
2379
|
+
style: o,
|
|
2380
|
+
tutorial: n
|
|
613
2381
|
}) {
|
|
614
|
-
const { t:
|
|
615
|
-
(
|
|
616
|
-
|
|
2382
|
+
const { t: i } = useNiceTranslation(), [c, f] = useState(r), [s, d] = useState("input"), m = useRef(null), u = useCallback(
|
|
2383
|
+
(b) => {
|
|
2384
|
+
f(b), t == null || t(b);
|
|
617
2385
|
},
|
|
618
|
-
[
|
|
619
|
-
),
|
|
620
|
-
(
|
|
621
|
-
const
|
|
622
|
-
if (!
|
|
623
|
-
|
|
2386
|
+
[t]
|
|
2387
|
+
), g = useCallback(
|
|
2388
|
+
(b) => {
|
|
2389
|
+
const l = m.current;
|
|
2390
|
+
if (!l) {
|
|
2391
|
+
u(c + b);
|
|
624
2392
|
return;
|
|
625
2393
|
}
|
|
626
|
-
const
|
|
627
|
-
|
|
628
|
-
|
|
2394
|
+
const p = l.selectionStart, h = l.selectionEnd, k = c.slice(0, p) + b + c.slice(h);
|
|
2395
|
+
u(k), setTimeout(() => {
|
|
2396
|
+
l.focus(), l.selectionStart = l.selectionEnd = p + b.length;
|
|
629
2397
|
}, 0);
|
|
630
2398
|
},
|
|
631
|
-
[
|
|
632
|
-
),
|
|
633
|
-
(
|
|
634
|
-
|
|
2399
|
+
[c, u]
|
|
2400
|
+
), w = useCallback(
|
|
2401
|
+
(b) => {
|
|
2402
|
+
g(b.latex);
|
|
635
2403
|
},
|
|
636
|
-
[
|
|
637
|
-
),
|
|
2404
|
+
[g]
|
|
2405
|
+
), y = {
|
|
638
2406
|
service: e,
|
|
639
|
-
latex:
|
|
640
|
-
setLatex:
|
|
641
|
-
insertSymbol:
|
|
642
|
-
insertTemplate:
|
|
643
|
-
mode:
|
|
644
|
-
setMode:
|
|
2407
|
+
latex: c,
|
|
2408
|
+
setLatex: u,
|
|
2409
|
+
insertSymbol: g,
|
|
2410
|
+
insertTemplate: w,
|
|
2411
|
+
mode: s,
|
|
2412
|
+
setMode: d
|
|
645
2413
|
};
|
|
646
|
-
return /* @__PURE__ */ jsx(MathEditorContext.Provider, { value:
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
2414
|
+
return /* @__PURE__ */ jsx(MathEditorContext.Provider, { value: y, children: /* @__PURE__ */ jsxs(
|
|
2415
|
+
"div",
|
|
2416
|
+
{
|
|
2417
|
+
className: `nice-math-editor ${a ?? ""}`,
|
|
2418
|
+
style: { position: "relative", ...styles$3.container, ...o },
|
|
2419
|
+
children: [
|
|
2420
|
+
/* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ jsx(wl, { steps: xl(n, MATH_EDITOR_TOUR) }) }),
|
|
2421
|
+
/* @__PURE__ */ jsx(Toolbar$1, {}),
|
|
2422
|
+
/* @__PURE__ */ jsxs("div", { style: styles$3.main, children: [
|
|
2423
|
+
/* @__PURE__ */ jsx(SymbolPalette, {}),
|
|
2424
|
+
/* @__PURE__ */ jsx("div", { style: styles$3.editor, children: s === "input" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2425
|
+
/* @__PURE__ */ jsx(
|
|
2426
|
+
"textarea",
|
|
2427
|
+
{
|
|
2428
|
+
ref: m,
|
|
2429
|
+
value: c,
|
|
2430
|
+
onChange: (b) => u(b.target.value),
|
|
2431
|
+
placeholder: i("editor.latexPlaceholder", "Enter LaTeX equation..."),
|
|
2432
|
+
style: styles$3.input
|
|
2433
|
+
}
|
|
2434
|
+
),
|
|
2435
|
+
/* @__PURE__ */ jsx(LatexPreview, { latex: c })
|
|
2436
|
+
] }) : /* @__PURE__ */ jsx(HandwritingCanvas, {}) })
|
|
2437
|
+
] })
|
|
2438
|
+
]
|
|
2439
|
+
}
|
|
2440
|
+
) });
|
|
665
2441
|
}
|
|
666
2442
|
function Toolbar$1() {
|
|
667
|
-
const { mode: e, setMode:
|
|
2443
|
+
const { mode: e, setMode: r, latex: t, insertTemplate: a } = useMathEditor(), [o, n] = useState(!1);
|
|
668
2444
|
return /* @__PURE__ */ jsxs("div", { style: styles$3.toolbar, children: [
|
|
669
2445
|
/* @__PURE__ */ jsx(
|
|
670
2446
|
"button",
|
|
671
2447
|
{
|
|
672
|
-
onClick: () =>
|
|
2448
|
+
onClick: () => r("input"),
|
|
673
2449
|
style: {
|
|
674
2450
|
...styles$3.button,
|
|
675
2451
|
backgroundColor: e === "input" ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-text-secondary, #9e9e9e)"
|
|
@@ -680,7 +2456,7 @@ function Toolbar$1() {
|
|
|
680
2456
|
/* @__PURE__ */ jsx(
|
|
681
2457
|
"button",
|
|
682
2458
|
{
|
|
683
|
-
onClick: () =>
|
|
2459
|
+
onClick: () => r("handwriting"),
|
|
684
2460
|
style: {
|
|
685
2461
|
...styles$3.button,
|
|
686
2462
|
backgroundColor: e === "handwriting" ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-text-secondary, #9e9e9e)"
|
|
@@ -717,23 +2493,23 @@ function Toolbar$1() {
|
|
|
717
2493
|
overflow: "auto"
|
|
718
2494
|
},
|
|
719
2495
|
children: ["basic", "calculus", "algebra", "geometry", "statistics", "physics"].map(
|
|
720
|
-
(
|
|
721
|
-
/* @__PURE__ */ jsx("div", { style: styles$3.categoryHeader, children:
|
|
722
|
-
EQUATION_TEMPLATES.filter((
|
|
2496
|
+
(i) => /* @__PURE__ */ jsxs("div", { children: [
|
|
2497
|
+
/* @__PURE__ */ jsx("div", { style: styles$3.categoryHeader, children: i }),
|
|
2498
|
+
EQUATION_TEMPLATES.filter((c) => c.category === i).map((c) => /* @__PURE__ */ jsxs(
|
|
723
2499
|
"div",
|
|
724
2500
|
{
|
|
725
2501
|
onClick: () => {
|
|
726
|
-
a(
|
|
2502
|
+
a(c), n(!1);
|
|
727
2503
|
},
|
|
728
2504
|
style: {
|
|
729
2505
|
padding: "8px 12px",
|
|
730
2506
|
cursor: "pointer",
|
|
731
2507
|
borderBottom: "1px solid var(--nice-border, #eee)"
|
|
732
2508
|
},
|
|
733
|
-
onMouseOver: (
|
|
734
|
-
onMouseOut: (
|
|
2509
|
+
onMouseOver: (f) => f.target.style.backgroundColor = "var(--nice-bg-secondary, #f5f5f5)",
|
|
2510
|
+
onMouseOut: (f) => f.target.style.backgroundColor = "transparent",
|
|
735
2511
|
children: [
|
|
736
|
-
/* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children:
|
|
2512
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: c.name }),
|
|
737
2513
|
/* @__PURE__ */ jsxs(
|
|
738
2514
|
"div",
|
|
739
2515
|
{
|
|
@@ -743,16 +2519,16 @@ function Toolbar$1() {
|
|
|
743
2519
|
fontFamily: "monospace"
|
|
744
2520
|
},
|
|
745
2521
|
children: [
|
|
746
|
-
|
|
747
|
-
|
|
2522
|
+
c.latex.substring(0, 40),
|
|
2523
|
+
c.latex.length > 40 ? "..." : ""
|
|
748
2524
|
]
|
|
749
2525
|
}
|
|
750
2526
|
)
|
|
751
2527
|
]
|
|
752
2528
|
},
|
|
753
|
-
|
|
2529
|
+
c.name
|
|
754
2530
|
))
|
|
755
|
-
] },
|
|
2531
|
+
] }, i)
|
|
756
2532
|
)
|
|
757
2533
|
}
|
|
758
2534
|
)
|
|
@@ -761,7 +2537,7 @@ function Toolbar$1() {
|
|
|
761
2537
|
/* @__PURE__ */ jsx(
|
|
762
2538
|
"button",
|
|
763
2539
|
{
|
|
764
|
-
onClick: () => navigator.clipboard.writeText(
|
|
2540
|
+
onClick: () => navigator.clipboard.writeText(t),
|
|
765
2541
|
style: { ...styles$3.button, backgroundColor: "var(--nice-success, #4caf50)" },
|
|
766
2542
|
children: "📋 Copy LaTeX"
|
|
767
2543
|
}
|
|
@@ -769,7 +2545,7 @@ function Toolbar$1() {
|
|
|
769
2545
|
] });
|
|
770
2546
|
}
|
|
771
2547
|
function SymbolPalette() {
|
|
772
|
-
const { insertSymbol: e } = useMathEditor(), [
|
|
2548
|
+
const { insertSymbol: e } = useMathEditor(), [r, t] = useState("greek"), a = [
|
|
773
2549
|
"greek",
|
|
774
2550
|
"operators",
|
|
775
2551
|
"relations",
|
|
@@ -781,19 +2557,19 @@ function SymbolPalette() {
|
|
|
781
2557
|
"logic",
|
|
782
2558
|
"calculus",
|
|
783
2559
|
"matrices"
|
|
784
|
-
], o = getSymbolsByCategory(
|
|
2560
|
+
], o = getSymbolsByCategory(r);
|
|
785
2561
|
return /* @__PURE__ */ jsxs("div", { style: styles$3.sidebar, children: [
|
|
786
2562
|
/* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", padding: "8px", gap: "4px" }, children: a.map((n) => /* @__PURE__ */ jsx(
|
|
787
2563
|
"button",
|
|
788
2564
|
{
|
|
789
|
-
onClick: () =>
|
|
2565
|
+
onClick: () => t(n),
|
|
790
2566
|
style: {
|
|
791
2567
|
padding: "4px 8px",
|
|
792
2568
|
fontSize: "11px",
|
|
793
2569
|
border: "1px solid var(--nice-border, #ddd)",
|
|
794
2570
|
borderRadius: "4px",
|
|
795
|
-
backgroundColor:
|
|
796
|
-
color:
|
|
2571
|
+
backgroundColor: r === n ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg, #fff)",
|
|
2572
|
+
color: r === n ? "var(--nice-bg, #fff)" : "var(--nice-text, #333)",
|
|
797
2573
|
cursor: "pointer"
|
|
798
2574
|
},
|
|
799
2575
|
children: n
|
|
@@ -825,72 +2601,72 @@ function LatexPreview({ latex: e }) {
|
|
|
825
2601
|
] });
|
|
826
2602
|
}
|
|
827
2603
|
function HandwritingCanvas() {
|
|
828
|
-
const { t: e } = useNiceTranslation(), { setLatex:
|
|
829
|
-
const
|
|
830
|
-
if (!
|
|
2604
|
+
const { t: e } = useNiceTranslation(), { setLatex: r, setMode: t } = useMathEditor(), a = useRef(null), [o, n] = useState([]), [i, c] = useState([]), [f, s] = useState(!1), [d, m] = useState(!1), u = (l) => {
|
|
2605
|
+
const p = a.current;
|
|
2606
|
+
if (!p)
|
|
831
2607
|
return;
|
|
832
|
-
|
|
833
|
-
const
|
|
834
|
-
|
|
2608
|
+
s(!0);
|
|
2609
|
+
const h = p.getBoundingClientRect();
|
|
2610
|
+
c([
|
|
835
2611
|
{
|
|
836
|
-
x:
|
|
837
|
-
y:
|
|
838
|
-
pressure:
|
|
2612
|
+
x: l.clientX - h.left,
|
|
2613
|
+
y: l.clientY - h.top,
|
|
2614
|
+
pressure: l.pressure,
|
|
839
2615
|
timestamp: Date.now()
|
|
840
2616
|
}
|
|
841
2617
|
]);
|
|
842
|
-
},
|
|
843
|
-
if (!
|
|
2618
|
+
}, g = (l) => {
|
|
2619
|
+
if (!f)
|
|
844
2620
|
return;
|
|
845
|
-
const
|
|
846
|
-
if (!
|
|
2621
|
+
const p = a.current, h = p == null ? void 0 : p.getContext("2d");
|
|
2622
|
+
if (!p || !h)
|
|
847
2623
|
return;
|
|
848
|
-
const k =
|
|
849
|
-
x:
|
|
850
|
-
y:
|
|
851
|
-
pressure:
|
|
2624
|
+
const k = p.getBoundingClientRect(), x = {
|
|
2625
|
+
x: l.clientX - k.left,
|
|
2626
|
+
y: l.clientY - k.top,
|
|
2627
|
+
pressure: l.pressure,
|
|
852
2628
|
timestamp: Date.now()
|
|
853
2629
|
};
|
|
854
|
-
if (
|
|
855
|
-
const v =
|
|
856
|
-
|
|
2630
|
+
if (c((v) => [...v, x]), i.length > 0) {
|
|
2631
|
+
const v = i[i.length - 1];
|
|
2632
|
+
h.beginPath(), h.moveTo(v.x, v.y), h.lineTo(x.x, x.y), h.strokeStyle = "var(--nice-text, #000)", h.lineWidth = 2, h.lineCap = "round", h.stroke();
|
|
857
2633
|
}
|
|
858
2634
|
}, w = () => {
|
|
859
|
-
if (
|
|
860
|
-
if (
|
|
861
|
-
const
|
|
2635
|
+
if (f) {
|
|
2636
|
+
if (s(!1), i.length > 1) {
|
|
2637
|
+
const l = {
|
|
862
2638
|
id: Date.now().toString(),
|
|
863
|
-
points: [...
|
|
2639
|
+
points: [...i]
|
|
864
2640
|
};
|
|
865
|
-
n((
|
|
2641
|
+
n((p) => [...p, l]);
|
|
866
2642
|
}
|
|
867
|
-
|
|
2643
|
+
c([]);
|
|
868
2644
|
}
|
|
869
|
-
},
|
|
870
|
-
const
|
|
871
|
-
|
|
872
|
-
},
|
|
2645
|
+
}, y = () => {
|
|
2646
|
+
const l = a.current, p = l == null ? void 0 : l.getContext("2d");
|
|
2647
|
+
p && l && p.clearRect(0, 0, l.width, l.height), n([]);
|
|
2648
|
+
}, b = async () => {
|
|
873
2649
|
if (o.length !== 0) {
|
|
874
|
-
|
|
2650
|
+
m(!0);
|
|
875
2651
|
try {
|
|
876
|
-
const
|
|
877
|
-
|
|
2652
|
+
const l = await recognizeHandwriting(o);
|
|
2653
|
+
r(l.latex), t("input");
|
|
878
2654
|
} finally {
|
|
879
|
-
|
|
2655
|
+
m(!1);
|
|
880
2656
|
}
|
|
881
2657
|
}
|
|
882
2658
|
};
|
|
883
2659
|
return useEffect(() => {
|
|
884
|
-
const
|
|
885
|
-
|
|
2660
|
+
const l = a.current;
|
|
2661
|
+
l && (l.width = l.offsetWidth, l.height = 200);
|
|
886
2662
|
}, []), /* @__PURE__ */ jsxs("div", { children: [
|
|
887
2663
|
/* @__PURE__ */ jsx(
|
|
888
2664
|
"canvas",
|
|
889
2665
|
{
|
|
890
2666
|
ref: a,
|
|
891
2667
|
style: styles$3.canvas,
|
|
892
|
-
onPointerDown:
|
|
893
|
-
onPointerMove:
|
|
2668
|
+
onPointerDown: u,
|
|
2669
|
+
onPointerMove: g,
|
|
894
2670
|
onPointerUp: w,
|
|
895
2671
|
onPointerLeave: w
|
|
896
2672
|
}
|
|
@@ -899,7 +2675,7 @@ function HandwritingCanvas() {
|
|
|
899
2675
|
/* @__PURE__ */ jsx(
|
|
900
2676
|
"button",
|
|
901
2677
|
{
|
|
902
|
-
onClick:
|
|
2678
|
+
onClick: y,
|
|
903
2679
|
style: { ...styles$3.button, backgroundColor: "var(--nice-danger, #f44336)" },
|
|
904
2680
|
children: e("editor.clear", "Clear")
|
|
905
2681
|
}
|
|
@@ -907,7 +2683,7 @@ function HandwritingCanvas() {
|
|
|
907
2683
|
/* @__PURE__ */ jsx(
|
|
908
2684
|
"button",
|
|
909
2685
|
{
|
|
910
|
-
onClick:
|
|
2686
|
+
onClick: b,
|
|
911
2687
|
disabled: o.length === 0 || d,
|
|
912
2688
|
style: styles$3.button,
|
|
913
2689
|
children: d ? e("editor.recognizing", "Recognizing...") : e("editor.recognize", "Recognize")
|
|
@@ -961,46 +2737,46 @@ const mathConstants = {
|
|
|
961
2737
|
};
|
|
962
2738
|
class ExpressionParser {
|
|
963
2739
|
constructor() {
|
|
964
|
-
|
|
965
|
-
|
|
2740
|
+
S(this, "pos", 0);
|
|
2741
|
+
S(this, "expr", "");
|
|
966
2742
|
}
|
|
967
|
-
parse(
|
|
968
|
-
this.expr =
|
|
969
|
-
const
|
|
970
|
-
return (a) => this.evaluate(
|
|
2743
|
+
parse(r) {
|
|
2744
|
+
this.expr = r.replace(/\s+/g, ""), this.pos = 0;
|
|
2745
|
+
const t = this.parseAddSub();
|
|
2746
|
+
return (a) => this.evaluate(t, { ...mathConstants, ...a });
|
|
971
2747
|
}
|
|
972
2748
|
parseAddSub() {
|
|
973
|
-
let
|
|
2749
|
+
let r = this.parseMulDiv();
|
|
974
2750
|
for (; this.pos < this.expr.length; ) {
|
|
975
|
-
const
|
|
976
|
-
if (
|
|
2751
|
+
const t = this.expr[this.pos];
|
|
2752
|
+
if (t !== "+" && t !== "-")
|
|
977
2753
|
break;
|
|
978
2754
|
this.pos++;
|
|
979
2755
|
const a = this.parseMulDiv();
|
|
980
|
-
|
|
2756
|
+
r = { type: "binary", op: t, left: r, right: a };
|
|
981
2757
|
}
|
|
982
|
-
return
|
|
2758
|
+
return r;
|
|
983
2759
|
}
|
|
984
2760
|
parseMulDiv() {
|
|
985
|
-
let
|
|
2761
|
+
let r = this.parsePower();
|
|
986
2762
|
for (; this.pos < this.expr.length; ) {
|
|
987
|
-
const
|
|
988
|
-
if (
|
|
2763
|
+
const t = this.expr[this.pos];
|
|
2764
|
+
if (t !== "*" && t !== "/")
|
|
989
2765
|
break;
|
|
990
2766
|
this.pos++;
|
|
991
2767
|
const a = this.parsePower();
|
|
992
|
-
|
|
2768
|
+
r = { type: "binary", op: t, left: r, right: a };
|
|
993
2769
|
}
|
|
994
|
-
return
|
|
2770
|
+
return r;
|
|
995
2771
|
}
|
|
996
2772
|
parsePower() {
|
|
997
|
-
let
|
|
2773
|
+
let r = this.parseUnary();
|
|
998
2774
|
for (; this.pos < this.expr.length && this.expr[this.pos] === "^"; ) {
|
|
999
2775
|
this.pos++;
|
|
1000
|
-
const
|
|
1001
|
-
|
|
2776
|
+
const t = this.parseUnary();
|
|
2777
|
+
r = { type: "binary", op: "^", left: r, right: t };
|
|
1002
2778
|
}
|
|
1003
|
-
return
|
|
2779
|
+
return r;
|
|
1004
2780
|
}
|
|
1005
2781
|
parseUnary() {
|
|
1006
2782
|
return this.expr[this.pos] === "-" ? (this.pos++, { type: "unary", op: "-", arg: this.parseUnary() }) : (this.expr[this.pos] === "+" && this.pos++, this.parsePrimary());
|
|
@@ -1011,12 +2787,12 @@ class ExpressionParser {
|
|
|
1011
2787
|
const a = this.parseAddSub();
|
|
1012
2788
|
return this.expr[this.pos] === ")" && this.pos++, a;
|
|
1013
2789
|
}
|
|
1014
|
-
const
|
|
1015
|
-
if (
|
|
1016
|
-
return this.pos +=
|
|
1017
|
-
const
|
|
1018
|
-
if (
|
|
1019
|
-
const a =
|
|
2790
|
+
const r = this.expr.slice(this.pos).match(/^(\d+\.?\d*)/);
|
|
2791
|
+
if (r)
|
|
2792
|
+
return this.pos += r[1].length, { type: "number", value: parseFloat(r[1]) };
|
|
2793
|
+
const t = this.expr.slice(this.pos).match(/^([a-zA-Z_][a-zA-Z0-9_]*)/);
|
|
2794
|
+
if (t) {
|
|
2795
|
+
const a = t[1];
|
|
1020
2796
|
if (this.pos += a.length, this.expr[this.pos] === "(") {
|
|
1021
2797
|
this.pos++;
|
|
1022
2798
|
const o = [];
|
|
@@ -1028,19 +2804,19 @@ class ExpressionParser {
|
|
|
1028
2804
|
}
|
|
1029
2805
|
return { type: "number", value: 0 };
|
|
1030
2806
|
}
|
|
1031
|
-
evaluate(
|
|
1032
|
-
switch (
|
|
2807
|
+
evaluate(r, t) {
|
|
2808
|
+
switch (r.type) {
|
|
1033
2809
|
case "number":
|
|
1034
|
-
return
|
|
2810
|
+
return r.value;
|
|
1035
2811
|
case "variable":
|
|
1036
|
-
if (
|
|
1037
|
-
return r
|
|
1038
|
-
throw new Error(`Unknown variable: ${
|
|
2812
|
+
if (r.name in t)
|
|
2813
|
+
return t[r.name];
|
|
2814
|
+
throw new Error(`Unknown variable: ${r.name}`);
|
|
1039
2815
|
case "unary":
|
|
1040
|
-
return
|
|
2816
|
+
return r.op === "-" ? -this.evaluate(r.arg, t) : this.evaluate(r.arg, t);
|
|
1041
2817
|
case "binary": {
|
|
1042
|
-
const a = this.evaluate(
|
|
1043
|
-
switch (
|
|
2818
|
+
const a = this.evaluate(r.left, t), o = this.evaluate(r.right, t);
|
|
2819
|
+
switch (r.op) {
|
|
1044
2820
|
case "+":
|
|
1045
2821
|
return a + o;
|
|
1046
2822
|
case "-":
|
|
@@ -1056,10 +2832,10 @@ class ExpressionParser {
|
|
|
1056
2832
|
}
|
|
1057
2833
|
}
|
|
1058
2834
|
case "call": {
|
|
1059
|
-
const a = mathFunctions[
|
|
2835
|
+
const a = mathFunctions[r.name];
|
|
1060
2836
|
if (!a)
|
|
1061
|
-
throw new Error(`Unknown function: ${
|
|
1062
|
-
const o =
|
|
2837
|
+
throw new Error(`Unknown function: ${r.name}`);
|
|
2838
|
+
const o = r.args.map((n) => this.evaluate(n, t));
|
|
1063
2839
|
return a(...o);
|
|
1064
2840
|
}
|
|
1065
2841
|
default:
|
|
@@ -1068,147 +2844,147 @@ class ExpressionParser {
|
|
|
1068
2844
|
}
|
|
1069
2845
|
}
|
|
1070
2846
|
class GraphService {
|
|
1071
|
-
constructor(
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
2847
|
+
constructor(r = {}) {
|
|
2848
|
+
S(this, "plots", /* @__PURE__ */ new Map());
|
|
2849
|
+
S(this, "parser", new ExpressionParser());
|
|
2850
|
+
S(this, "config");
|
|
1075
2851
|
this.config = {
|
|
1076
|
-
defaultResolution:
|
|
1077
|
-
maxResolution:
|
|
2852
|
+
defaultResolution: r.defaultResolution ?? 200,
|
|
2853
|
+
maxResolution: r.maxResolution ?? 1e3
|
|
1078
2854
|
};
|
|
1079
2855
|
}
|
|
1080
2856
|
/** Add a plot */
|
|
1081
|
-
addPlot(
|
|
1082
|
-
const
|
|
2857
|
+
addPlot(r) {
|
|
2858
|
+
const t = {
|
|
1083
2859
|
id: this.generateId(),
|
|
1084
|
-
type:
|
|
1085
|
-
expression:
|
|
1086
|
-
expressionY:
|
|
1087
|
-
expressionZ:
|
|
1088
|
-
label:
|
|
1089
|
-
color:
|
|
1090
|
-
lineWidth:
|
|
1091
|
-
visible:
|
|
1092
|
-
parameterRange:
|
|
1093
|
-
parameterRange2:
|
|
1094
|
-
resolution:
|
|
2860
|
+
type: r.type,
|
|
2861
|
+
expression: r.expression,
|
|
2862
|
+
expressionY: r.expressionY,
|
|
2863
|
+
expressionZ: r.expressionZ,
|
|
2864
|
+
label: r.label,
|
|
2865
|
+
color: r.color ?? { r: 66, g: 133, b: 244 },
|
|
2866
|
+
lineWidth: r.lineWidth ?? 2,
|
|
2867
|
+
visible: r.visible ?? !0,
|
|
2868
|
+
parameterRange: r.parameterRange ?? { min: -Math.PI, max: Math.PI },
|
|
2869
|
+
parameterRange2: r.parameterRange2 ?? { min: -Math.PI, max: Math.PI },
|
|
2870
|
+
resolution: r.resolution ?? this.config.defaultResolution
|
|
1095
2871
|
};
|
|
1096
|
-
return this.plots.set(
|
|
2872
|
+
return this.plots.set(t.id, t), t;
|
|
1097
2873
|
}
|
|
1098
2874
|
/** Update a plot */
|
|
1099
|
-
updatePlot(
|
|
1100
|
-
const a = this.plots.get(
|
|
2875
|
+
updatePlot(r, t) {
|
|
2876
|
+
const a = this.plots.get(r);
|
|
1101
2877
|
if (!a)
|
|
1102
|
-
throw new Error(`Plot not found: ${
|
|
1103
|
-
const o = { ...a, ...
|
|
1104
|
-
return this.plots.set(
|
|
2878
|
+
throw new Error(`Plot not found: ${r}`);
|
|
2879
|
+
const o = { ...a, ...t, id: a.id };
|
|
2880
|
+
return this.plots.set(r, o), o;
|
|
1105
2881
|
}
|
|
1106
2882
|
/** Remove a plot */
|
|
1107
|
-
removePlot(
|
|
1108
|
-
this.plots.delete(
|
|
2883
|
+
removePlot(r) {
|
|
2884
|
+
this.plots.delete(r);
|
|
1109
2885
|
}
|
|
1110
2886
|
/** Get all plots */
|
|
1111
2887
|
getPlots() {
|
|
1112
2888
|
return Array.from(this.plots.values());
|
|
1113
2889
|
}
|
|
1114
2890
|
/** Get plot by ID */
|
|
1115
|
-
getPlot(
|
|
1116
|
-
return this.plots.get(
|
|
2891
|
+
getPlot(r) {
|
|
2892
|
+
return this.plots.get(r);
|
|
1117
2893
|
}
|
|
1118
2894
|
/** Compute 2D function points */
|
|
1119
|
-
compute2DFunction(
|
|
1120
|
-
const n = this.parser.parse(
|
|
1121
|
-
for (let
|
|
1122
|
-
const
|
|
2895
|
+
compute2DFunction(r, t, a, o) {
|
|
2896
|
+
const n = this.parser.parse(r), i = [], c = (t.max - t.min) / a;
|
|
2897
|
+
for (let f = 0; f <= a; f++) {
|
|
2898
|
+
const s = t.min + f * c;
|
|
1123
2899
|
try {
|
|
1124
|
-
const d = n({ x:
|
|
1125
|
-
Number.isFinite(d) &&
|
|
2900
|
+
const d = n({ x: s, ...o });
|
|
2901
|
+
Number.isFinite(d) && i.push({ x: s, y: d });
|
|
1126
2902
|
} catch {
|
|
1127
2903
|
}
|
|
1128
2904
|
}
|
|
1129
|
-
return
|
|
2905
|
+
return i;
|
|
1130
2906
|
}
|
|
1131
2907
|
/** Compute 2D parametric curve */
|
|
1132
|
-
compute2DParametric(
|
|
1133
|
-
const
|
|
2908
|
+
compute2DParametric(r, t, a, o, n) {
|
|
2909
|
+
const i = this.parser.parse(r), c = this.parser.parse(t), f = [], s = (a.max - a.min) / o;
|
|
1134
2910
|
for (let d = 0; d <= o; d++) {
|
|
1135
|
-
const
|
|
2911
|
+
const m = a.min + d * s;
|
|
1136
2912
|
try {
|
|
1137
|
-
const
|
|
1138
|
-
Number.isFinite(
|
|
2913
|
+
const u = i({ t: m, ...n }), g = c({ t: m, ...n });
|
|
2914
|
+
Number.isFinite(u) && Number.isFinite(g) && f.push({ x: u, y: g });
|
|
1139
2915
|
} catch {
|
|
1140
2916
|
}
|
|
1141
2917
|
}
|
|
1142
|
-
return
|
|
2918
|
+
return f;
|
|
1143
2919
|
}
|
|
1144
2920
|
/** Compute 2D polar curve */
|
|
1145
|
-
compute2DPolar(
|
|
1146
|
-
const n = this.parser.parse(
|
|
1147
|
-
for (let
|
|
1148
|
-
const
|
|
2921
|
+
compute2DPolar(r, t, a, o) {
|
|
2922
|
+
const n = this.parser.parse(r), i = [], c = (t.max - t.min) / a;
|
|
2923
|
+
for (let f = 0; f <= a; f++) {
|
|
2924
|
+
const s = t.min + f * c;
|
|
1149
2925
|
try {
|
|
1150
|
-
const d = n({ theta:
|
|
2926
|
+
const d = n({ theta: s, t: s, ...o });
|
|
1151
2927
|
if (Number.isFinite(d)) {
|
|
1152
|
-
const
|
|
1153
|
-
|
|
2928
|
+
const m = d * Math.cos(s), u = d * Math.sin(s);
|
|
2929
|
+
i.push({ x: m, y: u });
|
|
1154
2930
|
}
|
|
1155
2931
|
} catch {
|
|
1156
2932
|
}
|
|
1157
2933
|
}
|
|
1158
|
-
return
|
|
2934
|
+
return i;
|
|
1159
2935
|
}
|
|
1160
2936
|
/** Compute 3D surface points */
|
|
1161
|
-
compute3DSurface(
|
|
1162
|
-
const
|
|
2937
|
+
compute3DSurface(r, t, a, o, n) {
|
|
2938
|
+
const i = this.parser.parse(r), c = [], f = (t.max - t.min) / o, s = (a.max - a.min) / o;
|
|
1163
2939
|
for (let d = 0; d <= o; d++) {
|
|
1164
|
-
const
|
|
1165
|
-
for (let
|
|
1166
|
-
const w = a.min +
|
|
2940
|
+
const m = [], u = t.min + d * f;
|
|
2941
|
+
for (let g = 0; g <= o; g++) {
|
|
2942
|
+
const w = a.min + g * s;
|
|
1167
2943
|
try {
|
|
1168
|
-
const
|
|
1169
|
-
Number.isFinite(
|
|
2944
|
+
const y = i({ x: u, y: w, ...n });
|
|
2945
|
+
Number.isFinite(y) ? m.push({ x: u, y: w, z: y }) : m.push({ x: u, y: w, z: 0 });
|
|
1170
2946
|
} catch {
|
|
1171
|
-
|
|
2947
|
+
m.push({ x: u, y: w, z: 0 });
|
|
1172
2948
|
}
|
|
1173
2949
|
}
|
|
1174
|
-
|
|
2950
|
+
c.push(m);
|
|
1175
2951
|
}
|
|
1176
|
-
return
|
|
2952
|
+
return c;
|
|
1177
2953
|
}
|
|
1178
2954
|
/** Export plot data as SVG */
|
|
1179
|
-
exportSVG(
|
|
1180
|
-
const
|
|
2955
|
+
exportSVG(r, t, a, o) {
|
|
2956
|
+
const i = a - 80, c = o - 40 * 2, f = (m) => 40 + (m - t.xRange.min) / (t.xRange.max - t.xRange.min) * i, s = (m) => o - 40 - (m - t.yRange.min) / (t.yRange.max - t.yRange.min) * c, d = [
|
|
1181
2957
|
`<svg xmlns="http://www.w3.org/2000/svg" width="${a}" height="${o}">`,
|
|
1182
|
-
`<rect width="100%" height="100%" fill="rgb(${
|
|
2958
|
+
`<rect width="100%" height="100%" fill="rgb(${t.backgroundColor.r},${t.backgroundColor.g},${t.backgroundColor.b})"/>`
|
|
1183
2959
|
];
|
|
1184
|
-
if (
|
|
2960
|
+
if (t.showGrid) {
|
|
1185
2961
|
d.push('<g stroke="var(--nice-border, #ddd)" stroke-width="0.5">');
|
|
1186
|
-
for (let
|
|
1187
|
-
const
|
|
1188
|
-
d.push(`<line x1="${
|
|
2962
|
+
for (let m = Math.ceil(t.xRange.min); m <= t.xRange.max; m++) {
|
|
2963
|
+
const u = f(m);
|
|
2964
|
+
d.push(`<line x1="${u}" y1="40" x2="${u}" y2="${o - 40}"/>`);
|
|
1189
2965
|
}
|
|
1190
|
-
for (let
|
|
1191
|
-
const
|
|
1192
|
-
d.push(`<line x1="40" y1="${
|
|
2966
|
+
for (let m = Math.ceil(t.yRange.min); m <= t.yRange.max; m++) {
|
|
2967
|
+
const u = s(m);
|
|
2968
|
+
d.push(`<line x1="40" y1="${u}" x2="${a - 40}" y2="${u}"/>`);
|
|
1193
2969
|
}
|
|
1194
2970
|
d.push("</g>");
|
|
1195
2971
|
}
|
|
1196
|
-
if (
|
|
2972
|
+
if (t.showAxes) {
|
|
1197
2973
|
d.push('<g stroke="var(--nice-text, #333)" stroke-width="1">');
|
|
1198
|
-
const
|
|
1199
|
-
d.push(`<line x1="40" y1="${
|
|
2974
|
+
const m = s(0), u = f(0);
|
|
2975
|
+
d.push(`<line x1="40" y1="${m}" x2="${a - 40}" y2="${m}"/>`), d.push(`<line x1="${u}" y1="40" x2="${u}" y2="${o - 40}"/>`), d.push("</g>");
|
|
1200
2976
|
}
|
|
1201
|
-
for (const
|
|
1202
|
-
if (
|
|
1203
|
-
const
|
|
1204
|
-
if (
|
|
1205
|
-
const
|
|
2977
|
+
for (const m of r.filter((u) => u.visible))
|
|
2978
|
+
if (m.type === "2d-function") {
|
|
2979
|
+
const u = this.compute2DFunction(m.expression, t.xRange, m.resolution || 200);
|
|
2980
|
+
if (u.length > 0) {
|
|
2981
|
+
const g = u.map((w, y) => `${y === 0 ? "M" : "L"}${f(w.x)},${s(w.y)}`).join(" ");
|
|
1206
2982
|
d.push(
|
|
1207
|
-
`<path d="${
|
|
2983
|
+
`<path d="${g}" fill="none" stroke="rgb(${m.color.r},${m.color.g},${m.color.b})" stroke-width="${m.lineWidth}"/>`
|
|
1208
2984
|
);
|
|
1209
2985
|
}
|
|
1210
2986
|
}
|
|
1211
|
-
return
|
|
2987
|
+
return t.showLabels && (d.push(
|
|
1212
2988
|
`<text x="${a / 2}" y="${o - 10}" text-anchor="middle" font-size="12">x</text>`
|
|
1213
2989
|
), d.push(
|
|
1214
2990
|
`<text x="10" y="${o / 2}" text-anchor="middle" font-size="12" transform="rotate(-90,10,${o / 2})">y</text>`
|
|
@@ -1216,20 +2992,20 @@ class GraphService {
|
|
|
1216
2992
|
`);
|
|
1217
2993
|
}
|
|
1218
2994
|
/** Export as PNG (data URL) */
|
|
1219
|
-
async exportPNG(
|
|
1220
|
-
const n = this.exportSVG(
|
|
1221
|
-
return new Promise((
|
|
1222
|
-
const
|
|
1223
|
-
|
|
1224
|
-
const
|
|
1225
|
-
|
|
1226
|
-
const d =
|
|
2995
|
+
async exportPNG(r, t, a, o) {
|
|
2996
|
+
const n = this.exportSVG(r, t, a, o);
|
|
2997
|
+
return new Promise((i, c) => {
|
|
2998
|
+
const f = new Image();
|
|
2999
|
+
f.onload = () => {
|
|
3000
|
+
const s = document.createElement("canvas");
|
|
3001
|
+
s.width = a, s.height = o;
|
|
3002
|
+
const d = s.getContext("2d");
|
|
1227
3003
|
if (!d) {
|
|
1228
|
-
|
|
3004
|
+
c(new Error("Could not get canvas context"));
|
|
1229
3005
|
return;
|
|
1230
3006
|
}
|
|
1231
|
-
d.drawImage(
|
|
1232
|
-
},
|
|
3007
|
+
d.drawImage(f, 0, 0), i(s.toDataURL("image/png"));
|
|
3008
|
+
}, f.onerror = c, f.src = "data:image/svg+xml;base64," + btoa(n);
|
|
1233
3009
|
});
|
|
1234
3010
|
}
|
|
1235
3011
|
generateId() {
|
|
@@ -1390,12 +3166,12 @@ const styles$2 = {
|
|
|
1390
3166
|
};
|
|
1391
3167
|
function NiceGraphPlotter({
|
|
1392
3168
|
service: e,
|
|
1393
|
-
width:
|
|
1394
|
-
height:
|
|
3169
|
+
width: r = 800,
|
|
3170
|
+
height: t = 600,
|
|
1395
3171
|
className: a,
|
|
1396
3172
|
style: o
|
|
1397
3173
|
}) {
|
|
1398
|
-
const [n,
|
|
3174
|
+
const [n, i] = useState([]), [c, f] = useState({
|
|
1399
3175
|
xRange: { min: -10, max: 10 },
|
|
1400
3176
|
yRange: { min: -10, max: 10 },
|
|
1401
3177
|
zRange: { min: -5, max: 5 },
|
|
@@ -1406,63 +3182,63 @@ function NiceGraphPlotter({
|
|
|
1406
3182
|
cameraRotationX: 30,
|
|
1407
3183
|
cameraRotationY: 45,
|
|
1408
3184
|
cameraDistance: 5
|
|
1409
|
-
}), [
|
|
3185
|
+
}), [s, d] = useState({
|
|
1410
3186
|
isPlaying: !1,
|
|
1411
3187
|
parameter: "a",
|
|
1412
3188
|
currentValue: 0,
|
|
1413
3189
|
minValue: -5,
|
|
1414
3190
|
maxValue: 5,
|
|
1415
3191
|
speed: 1
|
|
1416
|
-
}),
|
|
1417
|
-
|
|
1418
|
-
}, [e]),
|
|
1419
|
-
|
|
1420
|
-
}, []),
|
|
1421
|
-
d((
|
|
3192
|
+
}), m = useCallback(() => {
|
|
3193
|
+
i(e.getPlots());
|
|
3194
|
+
}, [e]), u = useCallback((p) => {
|
|
3195
|
+
f((h) => ({ ...h, ...p }));
|
|
3196
|
+
}, []), g = useCallback((p) => {
|
|
3197
|
+
d((h) => ({ ...h, ...p }));
|
|
1422
3198
|
}, []), w = useCallback(
|
|
1423
|
-
(
|
|
1424
|
-
e.addPlot(
|
|
3199
|
+
(p) => {
|
|
3200
|
+
e.addPlot(p), m();
|
|
1425
3201
|
},
|
|
1426
|
-
[e,
|
|
1427
|
-
),
|
|
1428
|
-
(
|
|
1429
|
-
e.removePlot(
|
|
3202
|
+
[e, m]
|
|
3203
|
+
), y = useCallback(
|
|
3204
|
+
(p) => {
|
|
3205
|
+
e.removePlot(p), m();
|
|
1430
3206
|
},
|
|
1431
|
-
[e,
|
|
1432
|
-
),
|
|
1433
|
-
(
|
|
1434
|
-
e.updatePlot(
|
|
3207
|
+
[e, m]
|
|
3208
|
+
), b = useCallback(
|
|
3209
|
+
(p, h) => {
|
|
3210
|
+
e.updatePlot(p, h), m();
|
|
1435
3211
|
},
|
|
1436
|
-
[e,
|
|
1437
|
-
),
|
|
3212
|
+
[e, m]
|
|
3213
|
+
), l = {
|
|
1438
3214
|
service: e,
|
|
1439
3215
|
plots: n,
|
|
1440
|
-
view:
|
|
1441
|
-
setView:
|
|
3216
|
+
view: c,
|
|
3217
|
+
setView: u,
|
|
1442
3218
|
addPlot: w,
|
|
1443
|
-
removePlot:
|
|
1444
|
-
updatePlot:
|
|
1445
|
-
animation:
|
|
1446
|
-
setAnimation:
|
|
1447
|
-
refresh:
|
|
3219
|
+
removePlot: y,
|
|
3220
|
+
updatePlot: b,
|
|
3221
|
+
animation: s,
|
|
3222
|
+
setAnimation: g,
|
|
3223
|
+
refresh: m
|
|
1448
3224
|
};
|
|
1449
|
-
return /* @__PURE__ */ jsx(GraphContext.Provider, { value:
|
|
3225
|
+
return /* @__PURE__ */ jsx(GraphContext.Provider, { value: l, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles$2.container, ...o }, children: [
|
|
1450
3226
|
/* @__PURE__ */ jsxs("div", { style: styles$2.sidebar, children: [
|
|
1451
3227
|
/* @__PURE__ */ jsx(PlotControls, {}),
|
|
1452
3228
|
/* @__PURE__ */ jsx(PlotList, {})
|
|
1453
3229
|
] }),
|
|
1454
3230
|
/* @__PURE__ */ jsxs("div", { style: styles$2.main, children: [
|
|
1455
|
-
/* @__PURE__ */ jsx(GraphToolbar, { width:
|
|
1456
|
-
/* @__PURE__ */ jsx(Canvas2D, { width:
|
|
3231
|
+
/* @__PURE__ */ jsx(GraphToolbar, { width: r, height: t }),
|
|
3232
|
+
/* @__PURE__ */ jsx(Canvas2D, { width: r, height: t })
|
|
1457
3233
|
] })
|
|
1458
3234
|
] }) });
|
|
1459
3235
|
}
|
|
1460
3236
|
function PlotControls() {
|
|
1461
|
-
const { t: e } = useNiceTranslation(), { addPlot:
|
|
1462
|
-
|
|
3237
|
+
const { t: e } = useNiceTranslation(), { addPlot: r } = useGraph(), [t, a] = useState("sin(x)"), [o, n] = useState("2d-function"), [i, c] = useState("cos(x)"), f = () => {
|
|
3238
|
+
r({
|
|
1463
3239
|
type: o,
|
|
1464
|
-
expression:
|
|
1465
|
-
expressionY: o === "2d-parametric" ?
|
|
3240
|
+
expression: t,
|
|
3241
|
+
expressionY: o === "2d-parametric" ? i : void 0,
|
|
1466
3242
|
color: {
|
|
1467
3243
|
r: Math.floor(Math.random() * 200),
|
|
1468
3244
|
g: Math.floor(Math.random() * 200),
|
|
@@ -1475,7 +3251,7 @@ function PlotControls() {
|
|
|
1475
3251
|
"select",
|
|
1476
3252
|
{
|
|
1477
3253
|
value: o,
|
|
1478
|
-
onChange: (
|
|
3254
|
+
onChange: (s) => n(s.target.value),
|
|
1479
3255
|
style: { ...styles$2.input, width: "100%" },
|
|
1480
3256
|
children: [
|
|
1481
3257
|
/* @__PURE__ */ jsx("option", { value: "2d-function", children: "y = f(x)" }),
|
|
@@ -1489,8 +3265,8 @@ function PlotControls() {
|
|
|
1489
3265
|
"input",
|
|
1490
3266
|
{
|
|
1491
3267
|
type: "text",
|
|
1492
|
-
value:
|
|
1493
|
-
onChange: (
|
|
3268
|
+
value: t,
|
|
3269
|
+
onChange: (s) => a(s.target.value),
|
|
1494
3270
|
placeholder: o === "2d-parametric" ? "x(t) = ..." : "Expression...",
|
|
1495
3271
|
style: { ...styles$2.input, width: "100%" }
|
|
1496
3272
|
}
|
|
@@ -1499,19 +3275,19 @@ function PlotControls() {
|
|
|
1499
3275
|
"input",
|
|
1500
3276
|
{
|
|
1501
3277
|
type: "text",
|
|
1502
|
-
value:
|
|
1503
|
-
onChange: (
|
|
3278
|
+
value: i,
|
|
3279
|
+
onChange: (s) => c(s.target.value),
|
|
1504
3280
|
placeholder: "y(t) = ...",
|
|
1505
3281
|
style: { ...styles$2.input, width: "100%" }
|
|
1506
3282
|
}
|
|
1507
3283
|
) }),
|
|
1508
|
-
/* @__PURE__ */ jsx("button", { onClick:
|
|
3284
|
+
/* @__PURE__ */ jsx("button", { onClick: f, style: { ...styles$2.button, width: "100%" }, children: "+ Add Plot" }),
|
|
1509
3285
|
/* @__PURE__ */ jsxs(
|
|
1510
3286
|
"select",
|
|
1511
3287
|
{
|
|
1512
|
-
onChange: (
|
|
1513
|
-
const d = FUNCTION_PRESETS.find((
|
|
1514
|
-
d &&
|
|
3288
|
+
onChange: (s) => {
|
|
3289
|
+
const d = FUNCTION_PRESETS.find((m) => m.name === s.target.value);
|
|
3290
|
+
d && r({
|
|
1515
3291
|
type: d.type,
|
|
1516
3292
|
expression: d.expression,
|
|
1517
3293
|
expressionY: d.expressionY,
|
|
@@ -1527,20 +3303,20 @@ function PlotControls() {
|
|
|
1527
3303
|
value: "",
|
|
1528
3304
|
children: [
|
|
1529
3305
|
/* @__PURE__ */ jsx("option", { value: "", disabled: !0, children: e("plotter.quickAdd", "Quick add preset...") }),
|
|
1530
|
-
["basic", "trigonometric", "exponential", "parametric", "polar", "3d"].map((
|
|
3306
|
+
["basic", "trigonometric", "exponential", "parametric", "polar", "3d"].map((s) => /* @__PURE__ */ jsx("optgroup", { label: s.charAt(0).toUpperCase() + s.slice(1), children: FUNCTION_PRESETS.filter((d) => d.category === s).map((d) => /* @__PURE__ */ jsxs("option", { value: d.name, children: [
|
|
1531
3307
|
d.name,
|
|
1532
3308
|
": ",
|
|
1533
3309
|
d.expression
|
|
1534
|
-
] }, d.name)) },
|
|
3310
|
+
] }, d.name)) }, s))
|
|
1535
3311
|
]
|
|
1536
3312
|
}
|
|
1537
3313
|
)
|
|
1538
3314
|
] });
|
|
1539
3315
|
}
|
|
1540
3316
|
function PlotList() {
|
|
1541
|
-
const { t: e } = useNiceTranslation(), { plots:
|
|
3317
|
+
const { t: e } = useNiceTranslation(), { plots: r, removePlot: t, updatePlot: a } = useGraph();
|
|
1542
3318
|
return /* @__PURE__ */ jsxs("div", { style: styles$2.plotList, children: [
|
|
1543
|
-
|
|
3319
|
+
r.length === 0 && /* @__PURE__ */ jsx(
|
|
1544
3320
|
"div",
|
|
1545
3321
|
{
|
|
1546
3322
|
style: {
|
|
@@ -1551,7 +3327,7 @@ function PlotList() {
|
|
|
1551
3327
|
children: e("plotter.noPlots", "No plots added yet")
|
|
1552
3328
|
}
|
|
1553
3329
|
),
|
|
1554
|
-
|
|
3330
|
+
r.map((o) => /* @__PURE__ */ jsxs("div", { style: styles$2.plotItem, children: [
|
|
1555
3331
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px" }, children: [
|
|
1556
3332
|
/* @__PURE__ */ jsx(
|
|
1557
3333
|
"input",
|
|
@@ -1576,7 +3352,7 @@ function PlotList() {
|
|
|
1576
3352
|
/* @__PURE__ */ jsx(
|
|
1577
3353
|
"button",
|
|
1578
3354
|
{
|
|
1579
|
-
onClick: () =>
|
|
3355
|
+
onClick: () => t(o.id),
|
|
1580
3356
|
style: {
|
|
1581
3357
|
padding: "2px 6px",
|
|
1582
3358
|
backgroundColor: "var(--nice-danger, #f44336)",
|
|
@@ -1610,13 +3386,13 @@ function PlotList() {
|
|
|
1610
3386
|
] }, o.id))
|
|
1611
3387
|
] });
|
|
1612
3388
|
}
|
|
1613
|
-
function GraphToolbar({ width: e, height:
|
|
1614
|
-
const { t
|
|
1615
|
-
const
|
|
1616
|
-
|
|
1617
|
-
},
|
|
1618
|
-
const
|
|
1619
|
-
d.href =
|
|
3389
|
+
function GraphToolbar({ width: e, height: r }) {
|
|
3390
|
+
const { t } = useNiceTranslation(), { service: a, plots: o, view: n, setView: i } = useGraph(), c = () => {
|
|
3391
|
+
const s = a.exportSVG(o, n, e, r), d = new Blob([s], { type: "image/svg+xml" }), m = URL.createObjectURL(d), u = document.createElement("a");
|
|
3392
|
+
u.href = m, u.download = "graph.svg", u.click(), URL.revokeObjectURL(m);
|
|
3393
|
+
}, f = async () => {
|
|
3394
|
+
const s = await a.exportPNG(o, n, e, r), d = document.createElement("a");
|
|
3395
|
+
d.href = s, d.download = "graph.png", d.click();
|
|
1620
3396
|
};
|
|
1621
3397
|
return /* @__PURE__ */ jsxs("div", { style: styles$2.toolbar, children: [
|
|
1622
3398
|
/* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
|
|
@@ -1627,7 +3403,7 @@ function GraphToolbar({ width: e, height: t }) {
|
|
|
1627
3403
|
{
|
|
1628
3404
|
type: "number",
|
|
1629
3405
|
value: n.xRange.min,
|
|
1630
|
-
onChange: (
|
|
3406
|
+
onChange: (s) => i({ xRange: { ...n.xRange, min: Number(s.target.value) } }),
|
|
1631
3407
|
style: { ...styles$2.input, width: "50px" }
|
|
1632
3408
|
}
|
|
1633
3409
|
),
|
|
@@ -1638,7 +3414,7 @@ function GraphToolbar({ width: e, height: t }) {
|
|
|
1638
3414
|
{
|
|
1639
3415
|
type: "number",
|
|
1640
3416
|
value: n.xRange.max,
|
|
1641
|
-
onChange: (
|
|
3417
|
+
onChange: (s) => i({ xRange: { ...n.xRange, max: Number(s.target.value) } }),
|
|
1642
3418
|
style: { ...styles$2.input, width: "50px" }
|
|
1643
3419
|
}
|
|
1644
3420
|
),
|
|
@@ -1652,7 +3428,7 @@ function GraphToolbar({ width: e, height: t }) {
|
|
|
1652
3428
|
{
|
|
1653
3429
|
type: "number",
|
|
1654
3430
|
value: n.yRange.min,
|
|
1655
|
-
onChange: (
|
|
3431
|
+
onChange: (s) => i({ yRange: { ...n.yRange, min: Number(s.target.value) } }),
|
|
1656
3432
|
style: { ...styles$2.input, width: "50px" }
|
|
1657
3433
|
}
|
|
1658
3434
|
),
|
|
@@ -1663,7 +3439,7 @@ function GraphToolbar({ width: e, height: t }) {
|
|
|
1663
3439
|
{
|
|
1664
3440
|
type: "number",
|
|
1665
3441
|
value: n.yRange.max,
|
|
1666
|
-
onChange: (
|
|
3442
|
+
onChange: (s) => i({ yRange: { ...n.yRange, max: Number(s.target.value) } }),
|
|
1667
3443
|
style: { ...styles$2.input, width: "50px" }
|
|
1668
3444
|
}
|
|
1669
3445
|
),
|
|
@@ -1675,10 +3451,10 @@ function GraphToolbar({ width: e, height: t }) {
|
|
|
1675
3451
|
{
|
|
1676
3452
|
type: "checkbox",
|
|
1677
3453
|
checked: n.showGrid,
|
|
1678
|
-
onChange: (
|
|
3454
|
+
onChange: (s) => i({ showGrid: s.target.checked })
|
|
1679
3455
|
}
|
|
1680
3456
|
),
|
|
1681
|
-
|
|
3457
|
+
t("plotter.grid", "Grid")
|
|
1682
3458
|
] }),
|
|
1683
3459
|
/* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
|
|
1684
3460
|
/* @__PURE__ */ jsx(
|
|
@@ -1686,16 +3462,16 @@ function GraphToolbar({ width: e, height: t }) {
|
|
|
1686
3462
|
{
|
|
1687
3463
|
type: "checkbox",
|
|
1688
3464
|
checked: n.showAxes,
|
|
1689
|
-
onChange: (
|
|
3465
|
+
onChange: (s) => i({ showAxes: s.target.checked })
|
|
1690
3466
|
}
|
|
1691
3467
|
),
|
|
1692
|
-
|
|
3468
|
+
t("plotter.axes", "Axes")
|
|
1693
3469
|
] }),
|
|
1694
3470
|
/* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
|
|
1695
3471
|
/* @__PURE__ */ jsx(
|
|
1696
3472
|
"button",
|
|
1697
3473
|
{
|
|
1698
|
-
onClick:
|
|
3474
|
+
onClick: c,
|
|
1699
3475
|
style: { ...styles$2.button, backgroundColor: "var(--nice-success, #4caf50)" },
|
|
1700
3476
|
children: "📥 SVG"
|
|
1701
3477
|
}
|
|
@@ -1703,92 +3479,92 @@ function GraphToolbar({ width: e, height: t }) {
|
|
|
1703
3479
|
/* @__PURE__ */ jsx(
|
|
1704
3480
|
"button",
|
|
1705
3481
|
{
|
|
1706
|
-
onClick:
|
|
3482
|
+
onClick: f,
|
|
1707
3483
|
style: { ...styles$2.button, backgroundColor: "var(--nice-warning, #ff9800)" },
|
|
1708
3484
|
children: "📥 PNG"
|
|
1709
3485
|
}
|
|
1710
3486
|
)
|
|
1711
3487
|
] });
|
|
1712
3488
|
}
|
|
1713
|
-
function Canvas2D({ width: e, height:
|
|
1714
|
-
const
|
|
3489
|
+
function Canvas2D({ width: e, height: r }) {
|
|
3490
|
+
const t = useRef(null), { service: a, plots: o, view: n, animation: i } = useGraph(), c = 40;
|
|
1715
3491
|
return useEffect(() => {
|
|
1716
|
-
const
|
|
1717
|
-
if (!
|
|
3492
|
+
const f = t.current, s = f == null ? void 0 : f.getContext("2d");
|
|
3493
|
+
if (!f || !s)
|
|
1718
3494
|
return;
|
|
1719
|
-
|
|
1720
|
-
const d = e -
|
|
3495
|
+
s.fillStyle = `rgb(${n.backgroundColor.r},${n.backgroundColor.g},${n.backgroundColor.b})`, s.fillRect(0, 0, e, r);
|
|
3496
|
+
const d = e - c * 2, m = r - c * 2, u = (y) => c + (y - n.xRange.min) / (n.xRange.max - n.xRange.min) * d, g = (y) => r - c - (y - n.yRange.min) / (n.yRange.max - n.yRange.min) * m;
|
|
1721
3497
|
if (n.showGrid) {
|
|
1722
|
-
|
|
1723
|
-
for (let
|
|
1724
|
-
const
|
|
1725
|
-
|
|
3498
|
+
s.strokeStyle = "var(--nice-border, #e0e0e0)", s.lineWidth = 0.5;
|
|
3499
|
+
for (let y = Math.ceil(n.xRange.min); y <= n.xRange.max; y++) {
|
|
3500
|
+
const b = u(y);
|
|
3501
|
+
s.beginPath(), s.moveTo(b, c), s.lineTo(b, r - c), s.stroke();
|
|
1726
3502
|
}
|
|
1727
|
-
for (let
|
|
1728
|
-
const
|
|
1729
|
-
|
|
3503
|
+
for (let y = Math.ceil(n.yRange.min); y <= n.yRange.max; y++) {
|
|
3504
|
+
const b = g(y);
|
|
3505
|
+
s.beginPath(), s.moveTo(c, b), s.lineTo(e - c, b), s.stroke();
|
|
1730
3506
|
}
|
|
1731
3507
|
}
|
|
1732
3508
|
if (n.showAxes) {
|
|
1733
|
-
|
|
1734
|
-
const
|
|
1735
|
-
|
|
1736
|
-
const
|
|
1737
|
-
if (
|
|
1738
|
-
|
|
1739
|
-
for (let
|
|
1740
|
-
|
|
1741
|
-
for (let
|
|
1742
|
-
|
|
3509
|
+
s.strokeStyle = "var(--nice-text, #333)", s.lineWidth = 1;
|
|
3510
|
+
const y = g(0);
|
|
3511
|
+
s.beginPath(), s.moveTo(c, y), s.lineTo(e - c, y), s.stroke();
|
|
3512
|
+
const b = u(0);
|
|
3513
|
+
if (s.beginPath(), s.moveTo(b, c), s.lineTo(b, r - c), s.stroke(), n.showLabels) {
|
|
3514
|
+
s.fillStyle = "var(--nice-text, #333)", s.font = "12px sans-serif", s.textAlign = "center", s.fillText("x", e - c + 15, y + 4), s.fillText("y", b, c - 10), s.font = "10px sans-serif";
|
|
3515
|
+
for (let l = Math.ceil(n.xRange.min); l <= n.xRange.max; l++)
|
|
3516
|
+
l !== 0 && s.fillText(String(l), u(l), y + 15);
|
|
3517
|
+
for (let l = Math.ceil(n.yRange.min); l <= n.yRange.max; l++)
|
|
3518
|
+
l !== 0 && (s.textAlign = "right", s.fillText(String(l), b - 5, g(l) + 4));
|
|
1743
3519
|
}
|
|
1744
3520
|
}
|
|
1745
|
-
const w =
|
|
1746
|
-
for (const
|
|
1747
|
-
const
|
|
1748
|
-
|
|
1749
|
-
let
|
|
1750
|
-
switch (
|
|
3521
|
+
const w = i.isPlaying ? { [i.parameter]: i.currentValue } : {};
|
|
3522
|
+
for (const y of o.filter((b) => b.visible)) {
|
|
3523
|
+
const b = `rgb(${y.color.r},${y.color.g},${y.color.b})`;
|
|
3524
|
+
s.strokeStyle = b, s.lineWidth = y.lineWidth || 2;
|
|
3525
|
+
let l = [];
|
|
3526
|
+
switch (y.type) {
|
|
1751
3527
|
case "2d-function":
|
|
1752
|
-
|
|
1753
|
-
|
|
3528
|
+
l = a.compute2DFunction(
|
|
3529
|
+
y.expression,
|
|
1754
3530
|
n.xRange,
|
|
1755
|
-
|
|
3531
|
+
y.resolution || 200,
|
|
1756
3532
|
w
|
|
1757
3533
|
);
|
|
1758
3534
|
break;
|
|
1759
3535
|
case "2d-parametric":
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
3536
|
+
l = a.compute2DParametric(
|
|
3537
|
+
y.expression,
|
|
3538
|
+
y.expressionY || "sin(t)",
|
|
3539
|
+
y.parameterRange || { min: 0, max: 2 * Math.PI },
|
|
3540
|
+
y.resolution || 200,
|
|
1765
3541
|
w
|
|
1766
3542
|
);
|
|
1767
3543
|
break;
|
|
1768
3544
|
case "2d-polar":
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
3545
|
+
l = a.compute2DPolar(
|
|
3546
|
+
y.expression,
|
|
3547
|
+
y.parameterRange || { min: 0, max: 2 * Math.PI },
|
|
3548
|
+
y.resolution || 200,
|
|
1773
3549
|
w
|
|
1774
3550
|
);
|
|
1775
3551
|
break;
|
|
1776
3552
|
}
|
|
1777
|
-
if (
|
|
1778
|
-
|
|
1779
|
-
let
|
|
1780
|
-
for (const
|
|
1781
|
-
const k =
|
|
1782
|
-
if (
|
|
1783
|
-
|
|
3553
|
+
if (l.length > 0) {
|
|
3554
|
+
s.beginPath();
|
|
3555
|
+
let p = !1;
|
|
3556
|
+
for (const h of l) {
|
|
3557
|
+
const k = u(h.x), x = g(h.y);
|
|
3558
|
+
if (x < 0 || x > r) {
|
|
3559
|
+
p = !1;
|
|
1784
3560
|
continue;
|
|
1785
3561
|
}
|
|
1786
|
-
|
|
3562
|
+
p ? s.lineTo(k, x) : (s.moveTo(k, x), p = !0);
|
|
1787
3563
|
}
|
|
1788
|
-
|
|
3564
|
+
s.stroke();
|
|
1789
3565
|
}
|
|
1790
3566
|
}
|
|
1791
|
-
}, [o, n,
|
|
3567
|
+
}, [o, n, i, a, e, r]), /* @__PURE__ */ jsx("canvas", { ref: t, width: e, height: r, style: styles$2.canvas });
|
|
1792
3568
|
}
|
|
1793
3569
|
const UNITS = [
|
|
1794
3570
|
// Length
|
|
@@ -2061,62 +3837,62 @@ const UNITS = [
|
|
|
2061
3837
|
},
|
|
2062
3838
|
{ name: "Bit", symbol: "bit", category: "Data", toBase: (e) => e / 8, fromBase: (e) => e * 8 }
|
|
2063
3839
|
], MatrixOps = {
|
|
2064
|
-
create(e,
|
|
3840
|
+
create(e, r, t = 0) {
|
|
2065
3841
|
const a = [];
|
|
2066
3842
|
for (let o = 0; o < e; o++)
|
|
2067
|
-
a.push(new Array(
|
|
2068
|
-
return { rows: e, cols:
|
|
3843
|
+
a.push(new Array(r).fill(t));
|
|
3844
|
+
return { rows: e, cols: r, data: a };
|
|
2069
3845
|
},
|
|
2070
3846
|
identity(e) {
|
|
2071
|
-
const
|
|
2072
|
-
for (let
|
|
2073
|
-
|
|
2074
|
-
return
|
|
3847
|
+
const r = this.create(e, e);
|
|
3848
|
+
for (let t = 0; t < e; t++)
|
|
3849
|
+
r.data[t][t] = 1;
|
|
3850
|
+
return r;
|
|
2075
3851
|
},
|
|
2076
|
-
add(e,
|
|
2077
|
-
if (e.rows !==
|
|
3852
|
+
add(e, r) {
|
|
3853
|
+
if (e.rows !== r.rows || e.cols !== r.cols)
|
|
2078
3854
|
throw new Error("Matrix dimensions must match for addition");
|
|
2079
|
-
const
|
|
3855
|
+
const t = this.create(e.rows, e.cols);
|
|
2080
3856
|
for (let a = 0; a < e.rows; a++)
|
|
2081
3857
|
for (let o = 0; o < e.cols; o++)
|
|
2082
|
-
|
|
2083
|
-
return
|
|
3858
|
+
t.data[a][o] = e.data[a][o] + r.data[a][o];
|
|
3859
|
+
return t;
|
|
2084
3860
|
},
|
|
2085
|
-
subtract(e,
|
|
2086
|
-
if (e.rows !==
|
|
3861
|
+
subtract(e, r) {
|
|
3862
|
+
if (e.rows !== r.rows || e.cols !== r.cols)
|
|
2087
3863
|
throw new Error("Matrix dimensions must match for subtraction");
|
|
2088
|
-
const
|
|
3864
|
+
const t = this.create(e.rows, e.cols);
|
|
2089
3865
|
for (let a = 0; a < e.rows; a++)
|
|
2090
3866
|
for (let o = 0; o < e.cols; o++)
|
|
2091
|
-
|
|
2092
|
-
return
|
|
3867
|
+
t.data[a][o] = e.data[a][o] - r.data[a][o];
|
|
3868
|
+
return t;
|
|
2093
3869
|
},
|
|
2094
|
-
multiply(e,
|
|
2095
|
-
if (e.cols !==
|
|
3870
|
+
multiply(e, r) {
|
|
3871
|
+
if (e.cols !== r.rows)
|
|
2096
3872
|
throw new Error("Matrix A columns must equal Matrix B rows for multiplication");
|
|
2097
|
-
const
|
|
3873
|
+
const t = this.create(e.rows, r.cols);
|
|
2098
3874
|
for (let a = 0; a < e.rows; a++)
|
|
2099
|
-
for (let o = 0; o <
|
|
3875
|
+
for (let o = 0; o < r.cols; o++) {
|
|
2100
3876
|
let n = 0;
|
|
2101
|
-
for (let
|
|
2102
|
-
n += e.data[a][
|
|
2103
|
-
|
|
3877
|
+
for (let i = 0; i < e.cols; i++)
|
|
3878
|
+
n += e.data[a][i] * r.data[i][o];
|
|
3879
|
+
t.data[a][o] = n;
|
|
2104
3880
|
}
|
|
2105
|
-
return
|
|
3881
|
+
return t;
|
|
2106
3882
|
},
|
|
2107
|
-
scalar(e,
|
|
2108
|
-
const
|
|
3883
|
+
scalar(e, r) {
|
|
3884
|
+
const t = this.create(e.rows, e.cols);
|
|
2109
3885
|
for (let a = 0; a < e.rows; a++)
|
|
2110
3886
|
for (let o = 0; o < e.cols; o++)
|
|
2111
|
-
|
|
2112
|
-
return
|
|
3887
|
+
t.data[a][o] = e.data[a][o] * r;
|
|
3888
|
+
return t;
|
|
2113
3889
|
},
|
|
2114
3890
|
transpose(e) {
|
|
2115
|
-
const
|
|
2116
|
-
for (let
|
|
3891
|
+
const r = this.create(e.cols, e.rows);
|
|
3892
|
+
for (let t = 0; t < e.rows; t++)
|
|
2117
3893
|
for (let a = 0; a < e.cols; a++)
|
|
2118
|
-
|
|
2119
|
-
return
|
|
3894
|
+
r.data[a][t] = e.data[t][a];
|
|
3895
|
+
return r;
|
|
2120
3896
|
},
|
|
2121
3897
|
determinant(e) {
|
|
2122
3898
|
if (e.rows !== e.cols)
|
|
@@ -2125,88 +3901,88 @@ const UNITS = [
|
|
|
2125
3901
|
return e.data[0][0];
|
|
2126
3902
|
if (e.rows === 2)
|
|
2127
3903
|
return e.data[0][0] * e.data[1][1] - e.data[0][1] * e.data[1][0];
|
|
2128
|
-
let
|
|
2129
|
-
for (let
|
|
2130
|
-
|
|
2131
|
-
return
|
|
3904
|
+
let r = 0;
|
|
3905
|
+
for (let t = 0; t < e.cols; t++)
|
|
3906
|
+
r += Math.pow(-1, t) * e.data[0][t] * this.determinant(this.minor(e, 0, t));
|
|
3907
|
+
return r;
|
|
2132
3908
|
},
|
|
2133
|
-
minor(e,
|
|
3909
|
+
minor(e, r, t) {
|
|
2134
3910
|
const a = this.create(e.rows - 1, e.cols - 1);
|
|
2135
3911
|
let o = 0;
|
|
2136
3912
|
for (let n = 0; n < e.rows; n++) {
|
|
2137
|
-
if (n ===
|
|
3913
|
+
if (n === r)
|
|
2138
3914
|
continue;
|
|
2139
|
-
let
|
|
2140
|
-
for (let
|
|
2141
|
-
|
|
3915
|
+
let i = 0;
|
|
3916
|
+
for (let c = 0; c < e.cols; c++)
|
|
3917
|
+
c !== t && (a.data[o][i] = e.data[n][c], i++);
|
|
2142
3918
|
o++;
|
|
2143
3919
|
}
|
|
2144
3920
|
return a;
|
|
2145
3921
|
},
|
|
2146
3922
|
inverse(e) {
|
|
2147
|
-
const
|
|
2148
|
-
if (
|
|
3923
|
+
const r = this.determinant(e);
|
|
3924
|
+
if (r === 0)
|
|
2149
3925
|
throw new Error("Matrix is singular, cannot compute inverse");
|
|
2150
|
-
const
|
|
2151
|
-
for (let o = 0; o <
|
|
2152
|
-
for (let n = 0; n <
|
|
2153
|
-
const
|
|
2154
|
-
a.data[n][o] =
|
|
3926
|
+
const t = e.rows, a = this.create(t, t);
|
|
3927
|
+
for (let o = 0; o < t; o++)
|
|
3928
|
+
for (let n = 0; n < t; n++) {
|
|
3929
|
+
const i = Math.pow(-1, o + n), c = this.determinant(this.minor(e, o, n));
|
|
3930
|
+
a.data[n][o] = i * c;
|
|
2155
3931
|
}
|
|
2156
|
-
return this.scalar(a, 1 /
|
|
3932
|
+
return this.scalar(a, 1 / r);
|
|
2157
3933
|
},
|
|
2158
3934
|
trace(e) {
|
|
2159
3935
|
if (e.rows !== e.cols)
|
|
2160
3936
|
throw new Error("Trace requires square matrix");
|
|
2161
|
-
let
|
|
2162
|
-
for (let
|
|
2163
|
-
|
|
2164
|
-
return
|
|
3937
|
+
let r = 0;
|
|
3938
|
+
for (let t = 0; t < e.rows; t++)
|
|
3939
|
+
r += e.data[t][t];
|
|
3940
|
+
return r;
|
|
2165
3941
|
},
|
|
2166
3942
|
eigenvalues2x2(e) {
|
|
2167
3943
|
if (e.rows !== 2 || e.cols !== 2)
|
|
2168
3944
|
throw new Error("Only 2x2 matrices supported for eigenvalues");
|
|
2169
|
-
const
|
|
2170
|
-
if (
|
|
3945
|
+
const r = e.data[0][0], t = e.data[0][1], a = e.data[1][0], o = e.data[1][1], n = r + o, i = r * o - t * a, c = n * n - 4 * i;
|
|
3946
|
+
if (c < 0)
|
|
2171
3947
|
throw new Error("Complex eigenvalues not supported");
|
|
2172
|
-
const
|
|
2173
|
-
return [(n +
|
|
3948
|
+
const f = Math.sqrt(c);
|
|
3949
|
+
return [(n + f) / 2, (n - f) / 2];
|
|
2174
3950
|
},
|
|
2175
|
-
toString(e,
|
|
2176
|
-
return e.data.map((
|
|
3951
|
+
toString(e, r = 4) {
|
|
3952
|
+
return e.data.map((t) => "[ " + t.map((a) => a.toFixed(r).padStart(10)).join(" ") + " ]").join(`
|
|
2177
3953
|
`);
|
|
2178
3954
|
}
|
|
2179
3955
|
}, CalculusOps = {
|
|
2180
3956
|
/** Numerical derivative at a point */
|
|
2181
|
-
derivative(e,
|
|
2182
|
-
return (e(
|
|
3957
|
+
derivative(e, r, t = 1e-7) {
|
|
3958
|
+
return (e(r + t) - e(r - t)) / (2 * t);
|
|
2183
3959
|
},
|
|
2184
3960
|
/** Second derivative at a point */
|
|
2185
|
-
secondDerivative(e,
|
|
2186
|
-
return (e(
|
|
3961
|
+
secondDerivative(e, r, t = 1e-5) {
|
|
3962
|
+
return (e(r + t) - 2 * e(r) + e(r - t)) / (t * t);
|
|
2187
3963
|
},
|
|
2188
3964
|
/** Numerical integration using Simpson's rule */
|
|
2189
|
-
integrate(e,
|
|
3965
|
+
integrate(e, r, t, a = 1e3) {
|
|
2190
3966
|
a % 2 !== 0 && a++;
|
|
2191
|
-
const o = (
|
|
2192
|
-
let n = e(
|
|
2193
|
-
for (let
|
|
2194
|
-
const
|
|
2195
|
-
n +=
|
|
3967
|
+
const o = (t - r) / a;
|
|
3968
|
+
let n = e(r) + e(t);
|
|
3969
|
+
for (let i = 1; i < a; i++) {
|
|
3970
|
+
const c = r + i * o;
|
|
3971
|
+
n += i % 2 === 0 ? 2 * e(c) : 4 * e(c);
|
|
2196
3972
|
}
|
|
2197
3973
|
return o / 3 * n;
|
|
2198
3974
|
},
|
|
2199
3975
|
/** Find root using Newton-Raphson method */
|
|
2200
|
-
findRoot(e,
|
|
2201
|
-
let o =
|
|
3976
|
+
findRoot(e, r, t = 1e-10, a = 100) {
|
|
3977
|
+
let o = r;
|
|
2202
3978
|
for (let n = 0; n < a; n++) {
|
|
2203
|
-
const
|
|
2204
|
-
if (Math.abs(
|
|
3979
|
+
const i = e(o);
|
|
3980
|
+
if (Math.abs(i) < t)
|
|
2205
3981
|
return o;
|
|
2206
|
-
const
|
|
2207
|
-
if (
|
|
3982
|
+
const c = this.derivative(e, o);
|
|
3983
|
+
if (c === 0)
|
|
2208
3984
|
throw new Error("Derivative is zero, Newton-Raphson failed");
|
|
2209
|
-
o = o -
|
|
3985
|
+
o = o - i / c;
|
|
2210
3986
|
}
|
|
2211
3987
|
throw new Error("Newton-Raphson did not converge");
|
|
2212
3988
|
},
|
|
@@ -2216,14 +3992,14 @@ const UNITS = [
|
|
|
2216
3992
|
return "0";
|
|
2217
3993
|
if (e === "x")
|
|
2218
3994
|
return "1";
|
|
2219
|
-
const
|
|
2220
|
-
if (
|
|
2221
|
-
const a = parseInt(
|
|
3995
|
+
const r = e.match(/^x\^(\d+)$/);
|
|
3996
|
+
if (r) {
|
|
3997
|
+
const a = parseInt(r[1], 10);
|
|
2222
3998
|
return a === 1 ? "1" : a === 2 ? "2*x" : `${a}*x^${a - 1}`;
|
|
2223
3999
|
}
|
|
2224
|
-
const
|
|
2225
|
-
if (
|
|
2226
|
-
const a = parseFloat(
|
|
4000
|
+
const t = e.match(/^(-?\d+\.?\d*)\*x\^(\d+)$/);
|
|
4001
|
+
if (t) {
|
|
4002
|
+
const a = parseFloat(t[1]), o = parseInt(t[2], 10), n = a * o;
|
|
2227
4003
|
return o === 1 ? String(n) : o === 2 ? `${n}*x` : `${n}*x^${o - 1}`;
|
|
2228
4004
|
}
|
|
2229
4005
|
return e === "sin(x)" ? "cos(x)" : e === "cos(x)" ? "-sin(x)" : e === "e^x" || e === "exp(x)" ? "e^x" : e === "ln(x)" ? "1/x" : `d/dx(${e})`;
|
|
@@ -2234,30 +4010,30 @@ const UNITS = [
|
|
|
2234
4010
|
return `${e}*x + C`;
|
|
2235
4011
|
if (e === "x")
|
|
2236
4012
|
return "x^2/2 + C";
|
|
2237
|
-
const
|
|
2238
|
-
if (
|
|
2239
|
-
const
|
|
2240
|
-
return `x^${
|
|
4013
|
+
const r = e.match(/^x\^(\d+)$/);
|
|
4014
|
+
if (r) {
|
|
4015
|
+
const t = parseInt(r[1], 10);
|
|
4016
|
+
return `x^${t + 1}/${t + 1} + C`;
|
|
2241
4017
|
}
|
|
2242
4018
|
return e === "sin(x)" ? "-cos(x) + C" : e === "cos(x)" ? "sin(x) + C" : e === "e^x" || e === "exp(x)" ? "e^x + C" : e === "1/x" ? "ln|x| + C" : `∫(${e})dx + C`;
|
|
2243
4019
|
},
|
|
2244
4020
|
/** Solve quadratic equation ax² + bx + c = 0 */
|
|
2245
|
-
solveQuadratic(e,
|
|
2246
|
-
const a =
|
|
4021
|
+
solveQuadratic(e, r, t) {
|
|
4022
|
+
const a = r * r - 4 * e * t;
|
|
2247
4023
|
if (a < 0)
|
|
2248
4024
|
throw new Error("No real solutions (complex roots)");
|
|
2249
4025
|
if (a === 0)
|
|
2250
|
-
return [-
|
|
4026
|
+
return [-r / (2 * e)];
|
|
2251
4027
|
const o = Math.sqrt(a);
|
|
2252
|
-
return [(-
|
|
4028
|
+
return [(-r + o) / (2 * e), (-r - o) / (2 * e)];
|
|
2253
4029
|
}
|
|
2254
4030
|
};
|
|
2255
4031
|
class CalculatorService {
|
|
2256
4032
|
constructor(e = {}) {
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
4033
|
+
S(this, "history", []);
|
|
4034
|
+
S(this, "memory", 0);
|
|
4035
|
+
S(this, "variables", /* @__PURE__ */ new Map());
|
|
4036
|
+
S(this, "config");
|
|
2261
4037
|
this.config = {
|
|
2262
4038
|
precision: e.precision ?? 12,
|
|
2263
4039
|
angleUnit: e.angleUnit ?? "rad"
|
|
@@ -2266,8 +4042,8 @@ class CalculatorService {
|
|
|
2266
4042
|
/** Evaluate expression */
|
|
2267
4043
|
evaluate(expression) {
|
|
2268
4044
|
let expr = expression.replace(/π|pi/gi, String(Math.PI)).replace(/e(?![xp])/gi, String(Math.E)).replace(/\^/g, "**").replace(/√/g, "Math.sqrt").replace(/sin/gi, "Math.sin").replace(/cos/gi, "Math.cos").replace(/tan/gi, "Math.tan").replace(/asin/gi, "Math.asin").replace(/acos/gi, "Math.acos").replace(/atan/gi, "Math.atan").replace(/sinh/gi, "Math.sinh").replace(/cosh/gi, "Math.cosh").replace(/tanh/gi, "Math.tanh").replace(/log10/gi, "Math.log10").replace(/log2/gi, "Math.log2").replace(/ln/gi, "Math.log").replace(/log\b/gi, "Math.log10").replace(/exp/gi, "Math.exp").replace(/sqrt/gi, "Math.sqrt").replace(/cbrt/gi, "Math.cbrt").replace(/abs/gi, "Math.abs").replace(/floor/gi, "Math.floor").replace(/ceil/gi, "Math.ceil").replace(/round/gi, "Math.round").replace(/pow/gi, "Math.pow").replace(/min/gi, "Math.min").replace(/max/gi, "Math.max");
|
|
2269
|
-
for (const [e,
|
|
2270
|
-
expr = expr.replace(new RegExp(`\\b${e}\\b`, "g"), String(
|
|
4045
|
+
for (const [e, r] of this.variables)
|
|
4046
|
+
expr = expr.replace(new RegExp(`\\b${e}\\b`, "g"), String(r));
|
|
2271
4047
|
try {
|
|
2272
4048
|
const result = eval(expr);
|
|
2273
4049
|
if (typeof result != "number" || !Number.isFinite(result))
|
|
@@ -2278,13 +4054,13 @@ class CalculatorService {
|
|
|
2278
4054
|
}
|
|
2279
4055
|
}
|
|
2280
4056
|
/** Add to history */
|
|
2281
|
-
addHistory(e,
|
|
4057
|
+
addHistory(e, r, t) {
|
|
2282
4058
|
this.history.unshift({
|
|
2283
4059
|
id: Date.now().toString(36),
|
|
2284
4060
|
expression: e,
|
|
2285
|
-
result:
|
|
4061
|
+
result: r,
|
|
2286
4062
|
timestamp: (/* @__PURE__ */ new Date()).toISOString(),
|
|
2287
|
-
mode:
|
|
4063
|
+
mode: t
|
|
2288
4064
|
}), this.history.length > 100 && this.history.pop();
|
|
2289
4065
|
}
|
|
2290
4066
|
/** Get history */
|
|
@@ -2309,22 +4085,22 @@ class CalculatorService {
|
|
|
2309
4085
|
this.memory = 0;
|
|
2310
4086
|
}
|
|
2311
4087
|
/** Variable operations */
|
|
2312
|
-
setVariable(e,
|
|
2313
|
-
this.variables.set(e,
|
|
4088
|
+
setVariable(e, r) {
|
|
4089
|
+
this.variables.set(e, r);
|
|
2314
4090
|
}
|
|
2315
4091
|
getVariable(e) {
|
|
2316
4092
|
return this.variables.get(e);
|
|
2317
4093
|
}
|
|
2318
4094
|
/** Convert between number bases */
|
|
2319
|
-
convertBase(e,
|
|
2320
|
-
const a = { BIN: 2, OCT: 8, DEC: 10, HEX: 16 }, o = parseInt(e, a[
|
|
4095
|
+
convertBase(e, r, t) {
|
|
4096
|
+
const a = { BIN: 2, OCT: 8, DEC: 10, HEX: 16 }, o = parseInt(e, a[r]);
|
|
2321
4097
|
if (isNaN(o))
|
|
2322
4098
|
throw new Error("Invalid number for base conversion");
|
|
2323
|
-
return o.toString(a[
|
|
4099
|
+
return o.toString(a[t]).toUpperCase();
|
|
2324
4100
|
}
|
|
2325
4101
|
/** Convert units */
|
|
2326
|
-
convertUnits(e,
|
|
2327
|
-
const a = UNITS.find((
|
|
4102
|
+
convertUnits(e, r, t) {
|
|
4103
|
+
const a = UNITS.find((i) => i.symbol === r), o = UNITS.find((i) => i.symbol === t);
|
|
2328
4104
|
if (!a || !o)
|
|
2329
4105
|
throw new Error("Unknown unit");
|
|
2330
4106
|
if (a.category !== o.category)
|
|
@@ -2334,7 +4110,7 @@ class CalculatorService {
|
|
|
2334
4110
|
}
|
|
2335
4111
|
/** Get units by category */
|
|
2336
4112
|
getUnitsByCategory(e) {
|
|
2337
|
-
return UNITS.filter((
|
|
4113
|
+
return UNITS.filter((r) => r.category === e);
|
|
2338
4114
|
}
|
|
2339
4115
|
/** Get all unit categories */
|
|
2340
4116
|
getUnitCategories() {
|
|
@@ -2342,8 +4118,8 @@ class CalculatorService {
|
|
|
2342
4118
|
}
|
|
2343
4119
|
/** Format number with precision */
|
|
2344
4120
|
format(e) {
|
|
2345
|
-
const
|
|
2346
|
-
return Math.abs(e) < 1e-10 ? "0" : Math.abs(e) > 1e10 || Math.abs(e) < 1e-6 ? e.toExponential(
|
|
4121
|
+
const r = this.config.precision;
|
|
4122
|
+
return Math.abs(e) < 1e-10 ? "0" : Math.abs(e) > 1e10 || Math.abs(e) < 1e-6 ? e.toExponential(r) : parseFloat(e.toPrecision(r)).toString();
|
|
2347
4123
|
}
|
|
2348
4124
|
}
|
|
2349
4125
|
function createCalculatorService(e) {
|
|
@@ -2416,20 +4192,20 @@ const styles$1 = {
|
|
|
2416
4192
|
};
|
|
2417
4193
|
function NiceCalculator({
|
|
2418
4194
|
service: e,
|
|
2419
|
-
className:
|
|
2420
|
-
style:
|
|
4195
|
+
className: r,
|
|
4196
|
+
style: t
|
|
2421
4197
|
}) {
|
|
2422
|
-
const [a, o] = useState("0"), [n,
|
|
2423
|
-
(
|
|
2424
|
-
|
|
4198
|
+
const [a, o] = useState("0"), [n, i] = useState("standard"), [c, f] = useState([]), [s, d] = useState(!1), m = useCallback(
|
|
4199
|
+
(y) => {
|
|
4200
|
+
s && /[0-9.]/.test(y) ? (o(y), d(!1)) : (o((b) => b === "0" && y !== "." ? y : b + y), d(!1));
|
|
2425
4201
|
},
|
|
2426
|
-
[
|
|
2427
|
-
),
|
|
4202
|
+
[s]
|
|
4203
|
+
), u = useCallback(() => {
|
|
2428
4204
|
o("0"), d(!1);
|
|
2429
|
-
}, []),
|
|
4205
|
+
}, []), g = useCallback(() => {
|
|
2430
4206
|
try {
|
|
2431
|
-
const
|
|
2432
|
-
e.addHistory(a,
|
|
4207
|
+
const y = e.evaluate(a), b = e.format(y);
|
|
4208
|
+
e.addHistory(a, b, n), f(e.getHistory()), o(b), d(!0);
|
|
2433
4209
|
} catch {
|
|
2434
4210
|
o("Error"), d(!0);
|
|
2435
4211
|
}
|
|
@@ -2438,13 +4214,13 @@ function NiceCalculator({
|
|
|
2438
4214
|
display: a,
|
|
2439
4215
|
setDisplay: o,
|
|
2440
4216
|
mode: n,
|
|
2441
|
-
setMode:
|
|
2442
|
-
history:
|
|
2443
|
-
calculate:
|
|
2444
|
-
appendDigit:
|
|
2445
|
-
clear:
|
|
4217
|
+
setMode: i,
|
|
4218
|
+
history: c,
|
|
4219
|
+
calculate: g,
|
|
4220
|
+
appendDigit: m,
|
|
4221
|
+
clear: u
|
|
2446
4222
|
};
|
|
2447
|
-
return /* @__PURE__ */ jsx(CalculatorContext.Provider, { value: w, children: /* @__PURE__ */ jsxs("div", { className:
|
|
4223
|
+
return /* @__PURE__ */ jsx(CalculatorContext.Provider, { value: w, children: /* @__PURE__ */ jsxs("div", { className: r, style: { ...styles$1.container, ...t }, children: [
|
|
2448
4224
|
/* @__PURE__ */ jsx(ModeSelector, {}),
|
|
2449
4225
|
/* @__PURE__ */ jsx(Display, {}),
|
|
2450
4226
|
n === "standard" && /* @__PURE__ */ jsx(StandardKeypad, {}),
|
|
@@ -2456,7 +4232,7 @@ function NiceCalculator({
|
|
|
2456
4232
|
] }) });
|
|
2457
4233
|
}
|
|
2458
4234
|
function ModeSelector() {
|
|
2459
|
-
const { mode: e, setMode:
|
|
4235
|
+
const { mode: e, setMode: r } = useCalculator(), t = [
|
|
2460
4236
|
{ id: "standard", label: "Standard" },
|
|
2461
4237
|
{ id: "scientific", label: "Scientific" },
|
|
2462
4238
|
{ id: "programmer", label: "Programmer" },
|
|
@@ -2464,10 +4240,10 @@ function ModeSelector() {
|
|
|
2464
4240
|
{ id: "calculus", label: "Calculus" },
|
|
2465
4241
|
{ id: "units", label: "Units" }
|
|
2466
4242
|
];
|
|
2467
|
-
return /* @__PURE__ */ jsx("div", { style: styles$1.modeSelector, children:
|
|
4243
|
+
return /* @__PURE__ */ jsx("div", { style: styles$1.modeSelector, children: t.map((a) => /* @__PURE__ */ jsx(
|
|
2468
4244
|
"button",
|
|
2469
4245
|
{
|
|
2470
|
-
onClick: () =>
|
|
4246
|
+
onClick: () => r(a.id),
|
|
2471
4247
|
style: {
|
|
2472
4248
|
...styles$1.modeButton,
|
|
2473
4249
|
backgroundColor: e === a.id ? "var(--nice-primary-hover, #1976d2)" : "transparent",
|
|
@@ -2483,8 +4259,8 @@ function Display() {
|
|
|
2483
4259
|
return /* @__PURE__ */ jsx("div", { style: styles$1.display, children: /* @__PURE__ */ jsx("div", { style: styles$1.displayText, children: e }) });
|
|
2484
4260
|
}
|
|
2485
4261
|
function StandardKeypad() {
|
|
2486
|
-
const { appendDigit: e, clear:
|
|
2487
|
-
{ label: "AC", action:
|
|
4262
|
+
const { appendDigit: e, clear: r, calculate: t, setDisplay: a, display: o } = useCalculator(), n = [
|
|
4263
|
+
{ label: "AC", action: r, style: styles$1.keyFunction },
|
|
2488
4264
|
{
|
|
2489
4265
|
label: "±",
|
|
2490
4266
|
action: () => a(o.startsWith("-") ? o.slice(1) : "-" + o),
|
|
@@ -2507,15 +4283,15 @@ function StandardKeypad() {
|
|
|
2507
4283
|
{ label: "0", action: () => e("0") },
|
|
2508
4284
|
{ label: ".", action: () => e(".") },
|
|
2509
4285
|
{ label: "⌫", action: () => a(o.length > 1 ? o.slice(0, -1) : "0") },
|
|
2510
|
-
{ label: "=", action:
|
|
4286
|
+
{ label: "=", action: t, style: styles$1.keyOperator }
|
|
2511
4287
|
];
|
|
2512
|
-
return /* @__PURE__ */ jsx("div", { style: styles$1.keypad, children: n.map((
|
|
4288
|
+
return /* @__PURE__ */ jsx("div", { style: styles$1.keypad, children: n.map((i, c) => /* @__PURE__ */ jsx("button", { onClick: i.action, style: { ...styles$1.key, ...i.style || {} }, children: i.label }, c)) });
|
|
2513
4289
|
}
|
|
2514
4290
|
function ScientificKeypad() {
|
|
2515
4291
|
const {
|
|
2516
4292
|
appendDigit: e,
|
|
2517
|
-
clear:
|
|
2518
|
-
calculate:
|
|
4293
|
+
clear: r,
|
|
4294
|
+
calculate: t,
|
|
2519
4295
|
setDisplay: a,
|
|
2520
4296
|
display: o
|
|
2521
4297
|
} = useCalculator(), n = [
|
|
@@ -2524,41 +4300,41 @@ function ScientificKeypad() {
|
|
|
2524
4300
|
{ label: "tan", action: () => e("tan(") },
|
|
2525
4301
|
{ label: "ln", action: () => e("ln(") },
|
|
2526
4302
|
{ label: "log", action: () => e("log10(") }
|
|
2527
|
-
],
|
|
4303
|
+
], i = [
|
|
2528
4304
|
{ label: "x²", action: () => e("^2") },
|
|
2529
4305
|
{ label: "x³", action: () => e("^3") },
|
|
2530
4306
|
{ label: "xʸ", action: () => e("^") },
|
|
2531
4307
|
{ label: "√", action: () => e("sqrt(") },
|
|
2532
4308
|
{ label: "eˣ", action: () => e("exp(") }
|
|
2533
|
-
],
|
|
4309
|
+
], c = [
|
|
2534
4310
|
{ label: "(", action: () => e("(") },
|
|
2535
4311
|
{ label: ")", action: () => e(")") },
|
|
2536
4312
|
{ label: "π", action: () => e("π") },
|
|
2537
4313
|
{ label: "e", action: () => e("e") },
|
|
2538
|
-
{ label: "AC", action:
|
|
4314
|
+
{ label: "AC", action: r }
|
|
2539
4315
|
];
|
|
2540
4316
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
2541
|
-
/* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(5, 1fr)" }, children: [...n, ...
|
|
4317
|
+
/* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(5, 1fr)" }, children: [...n, ...i, ...c].map((f, s) => /* @__PURE__ */ jsx(
|
|
2542
4318
|
"button",
|
|
2543
4319
|
{
|
|
2544
|
-
onClick:
|
|
4320
|
+
onClick: f.action,
|
|
2545
4321
|
style: { ...styles$1.key, ...styles$1.keyFunction, padding: "12px" },
|
|
2546
|
-
children:
|
|
4322
|
+
children: f.label
|
|
2547
4323
|
},
|
|
2548
|
-
|
|
4324
|
+
s
|
|
2549
4325
|
)) }),
|
|
2550
4326
|
/* @__PURE__ */ jsx(StandardKeypad, {})
|
|
2551
4327
|
] });
|
|
2552
4328
|
}
|
|
2553
4329
|
function ProgrammerKeypad() {
|
|
2554
|
-
const { display: e, setDisplay:
|
|
4330
|
+
const { display: e, setDisplay: r, service: t } = useCalculator(), [a, o] = useState("DEC"), n = (c) => {
|
|
2555
4331
|
try {
|
|
2556
|
-
const
|
|
2557
|
-
|
|
4332
|
+
const f = t.convertBase(e, a, c);
|
|
4333
|
+
r(f), o(c);
|
|
2558
4334
|
} catch {
|
|
2559
|
-
|
|
4335
|
+
r("Error");
|
|
2560
4336
|
}
|
|
2561
|
-
},
|
|
4337
|
+
}, i = a === "HEX" ? ["A", "B", "C", "D", "E", "F"] : [];
|
|
2562
4338
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
2563
4339
|
/* @__PURE__ */ jsx(
|
|
2564
4340
|
"div",
|
|
@@ -2569,33 +4345,33 @@ function ProgrammerKeypad() {
|
|
|
2569
4345
|
padding: "8px",
|
|
2570
4346
|
backgroundColor: "var(--nice-bg-secondary, #252525)"
|
|
2571
4347
|
},
|
|
2572
|
-
children: ["BIN", "OCT", "DEC", "HEX"].map((
|
|
4348
|
+
children: ["BIN", "OCT", "DEC", "HEX"].map((c) => /* @__PURE__ */ jsx(
|
|
2573
4349
|
"button",
|
|
2574
4350
|
{
|
|
2575
|
-
onClick: () => n(
|
|
4351
|
+
onClick: () => n(c),
|
|
2576
4352
|
style: {
|
|
2577
4353
|
flex: 1,
|
|
2578
4354
|
padding: "8px",
|
|
2579
4355
|
border: "none",
|
|
2580
4356
|
borderRadius: "4px",
|
|
2581
|
-
backgroundColor: a ===
|
|
4357
|
+
backgroundColor: a === c ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-border, #3c3c3c)",
|
|
2582
4358
|
color: "var(--nice-bg, #fff)",
|
|
2583
4359
|
cursor: "pointer"
|
|
2584
4360
|
},
|
|
2585
|
-
children:
|
|
4361
|
+
children: c
|
|
2586
4362
|
},
|
|
2587
|
-
|
|
4363
|
+
c
|
|
2588
4364
|
))
|
|
2589
4365
|
}
|
|
2590
4366
|
),
|
|
2591
|
-
|
|
4367
|
+
i.length > 0 && /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(6, 1fr)" }, children: i.map((c) => /* @__PURE__ */ jsx(
|
|
2592
4368
|
"button",
|
|
2593
4369
|
{
|
|
2594
|
-
onClick: () =>
|
|
4370
|
+
onClick: () => r(e === "0" ? c : e + c),
|
|
2595
4371
|
style: styles$1.key,
|
|
2596
|
-
children:
|
|
4372
|
+
children: c
|
|
2597
4373
|
},
|
|
2598
|
-
|
|
4374
|
+
c
|
|
2599
4375
|
)) }),
|
|
2600
4376
|
/* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(4, 1fr)" }, children: [
|
|
2601
4377
|
"7",
|
|
@@ -2614,31 +4390,31 @@ function ProgrammerKeypad() {
|
|
|
2614
4390
|
"NOT",
|
|
2615
4391
|
"<<",
|
|
2616
4392
|
">>"
|
|
2617
|
-
].map((
|
|
2618
|
-
const
|
|
4393
|
+
].map((c) => {
|
|
4394
|
+
const f = ["AND", "OR", "XOR", "NOT", "<<", ">>"].includes(c);
|
|
2619
4395
|
return /* @__PURE__ */ jsx(
|
|
2620
4396
|
"button",
|
|
2621
4397
|
{
|
|
2622
|
-
onClick: () =>
|
|
2623
|
-
style: { ...styles$1.key, ...
|
|
2624
|
-
children:
|
|
4398
|
+
onClick: () => r(e === "0" ? c : e + c),
|
|
4399
|
+
style: { ...styles$1.key, ...f ? styles$1.keyFunction : {} },
|
|
4400
|
+
children: c
|
|
2625
4401
|
},
|
|
2626
|
-
|
|
4402
|
+
c
|
|
2627
4403
|
);
|
|
2628
4404
|
}) })
|
|
2629
4405
|
] });
|
|
2630
4406
|
}
|
|
2631
4407
|
function MatrixMode() {
|
|
2632
|
-
const { t: e } = useNiceTranslation(), [
|
|
2633
|
-
const w = { ...
|
|
2634
|
-
w.data[
|
|
2635
|
-
},
|
|
2636
|
-
{ label: "A + B", fn: () => MatrixOps.toString(MatrixOps.add(
|
|
2637
|
-
{ label: "A - B", fn: () => MatrixOps.toString(MatrixOps.subtract(
|
|
2638
|
-
{ label: "A × B", fn: () => MatrixOps.toString(MatrixOps.multiply(
|
|
2639
|
-
{ label: "det(A)", fn: () => MatrixOps.determinant(
|
|
2640
|
-
{ label: "Aᵀ", fn: () => MatrixOps.toString(MatrixOps.transpose(
|
|
2641
|
-
{ label: "A⁻¹", fn: () => MatrixOps.toString(MatrixOps.inverse(
|
|
4408
|
+
const { t: e } = useNiceTranslation(), [r, t] = useState(MatrixOps.create(2, 2)), [a, o] = useState(MatrixOps.create(2, 2)), [n, i] = useState(""), c = (s, d, m, u, g) => {
|
|
4409
|
+
const w = { ...s, data: s.data.map((y) => [...y]) };
|
|
4410
|
+
w.data[m][u] = parseFloat(g) || 0, d(w);
|
|
4411
|
+
}, f = [
|
|
4412
|
+
{ label: "A + B", fn: () => MatrixOps.toString(MatrixOps.add(r, a)) },
|
|
4413
|
+
{ label: "A - B", fn: () => MatrixOps.toString(MatrixOps.subtract(r, a)) },
|
|
4414
|
+
{ label: "A × B", fn: () => MatrixOps.toString(MatrixOps.multiply(r, a)) },
|
|
4415
|
+
{ label: "det(A)", fn: () => MatrixOps.determinant(r).toFixed(4) },
|
|
4416
|
+
{ label: "Aᵀ", fn: () => MatrixOps.toString(MatrixOps.transpose(r)) },
|
|
4417
|
+
{ label: "A⁻¹", fn: () => MatrixOps.toString(MatrixOps.inverse(r)) }
|
|
2642
4418
|
];
|
|
2643
4419
|
return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
|
|
2644
4420
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px", marginBottom: "12px" }, children: [
|
|
@@ -2647,8 +4423,8 @@ function MatrixMode() {
|
|
|
2647
4423
|
/* @__PURE__ */ jsx(
|
|
2648
4424
|
MatrixInput,
|
|
2649
4425
|
{
|
|
2650
|
-
matrix:
|
|
2651
|
-
onChange: (
|
|
4426
|
+
matrix: r,
|
|
4427
|
+
onChange: (s, d, m) => c(r, t, s, d, m)
|
|
2652
4428
|
}
|
|
2653
4429
|
)
|
|
2654
4430
|
] }),
|
|
@@ -2658,19 +4434,19 @@ function MatrixMode() {
|
|
|
2658
4434
|
MatrixInput,
|
|
2659
4435
|
{
|
|
2660
4436
|
matrix: a,
|
|
2661
|
-
onChange: (
|
|
4437
|
+
onChange: (s, d, m) => c(a, o, s, d, m)
|
|
2662
4438
|
}
|
|
2663
4439
|
)
|
|
2664
4440
|
] })
|
|
2665
4441
|
] }),
|
|
2666
|
-
/* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "12px" }, children:
|
|
4442
|
+
/* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "12px" }, children: f.map((s) => /* @__PURE__ */ jsx(
|
|
2667
4443
|
"button",
|
|
2668
4444
|
{
|
|
2669
4445
|
onClick: () => {
|
|
2670
4446
|
try {
|
|
2671
|
-
s
|
|
4447
|
+
i(s.fn());
|
|
2672
4448
|
} catch (d) {
|
|
2673
|
-
|
|
4449
|
+
i(d.message);
|
|
2674
4450
|
}
|
|
2675
4451
|
},
|
|
2676
4452
|
style: {
|
|
@@ -2681,9 +4457,9 @@ function MatrixMode() {
|
|
|
2681
4457
|
borderRadius: "4px",
|
|
2682
4458
|
cursor: "pointer"
|
|
2683
4459
|
},
|
|
2684
|
-
children:
|
|
4460
|
+
children: s.label
|
|
2685
4461
|
},
|
|
2686
|
-
|
|
4462
|
+
s.label
|
|
2687
4463
|
)) }),
|
|
2688
4464
|
n && /* @__PURE__ */ jsx(
|
|
2689
4465
|
"pre",
|
|
@@ -2696,19 +4472,19 @@ function MatrixMode() {
|
|
|
2696
4472
|
}
|
|
2697
4473
|
function MatrixInput({
|
|
2698
4474
|
matrix: e,
|
|
2699
|
-
onChange:
|
|
4475
|
+
onChange: r
|
|
2700
4476
|
}) {
|
|
2701
4477
|
return /* @__PURE__ */ jsx(
|
|
2702
4478
|
"div",
|
|
2703
4479
|
{
|
|
2704
4480
|
style: { display: "grid", gridTemplateColumns: `repeat(${e.cols}, 50px)`, gap: "4px" },
|
|
2705
4481
|
children: e.data.map(
|
|
2706
|
-
(
|
|
4482
|
+
(t, a) => t.map((o, n) => /* @__PURE__ */ jsx(
|
|
2707
4483
|
"input",
|
|
2708
4484
|
{
|
|
2709
4485
|
type: "number",
|
|
2710
4486
|
value: o,
|
|
2711
|
-
onChange: (
|
|
4487
|
+
onChange: (i) => r(a, n, i.target.value),
|
|
2712
4488
|
style: {
|
|
2713
4489
|
width: "100%",
|
|
2714
4490
|
padding: "4px",
|
|
@@ -2726,14 +4502,14 @@ function MatrixInput({
|
|
|
2726
4502
|
);
|
|
2727
4503
|
}
|
|
2728
4504
|
function CalculusMode() {
|
|
2729
|
-
const { t: e } = useNiceTranslation(), [
|
|
4505
|
+
const { t: e } = useNiceTranslation(), [r, t] = useState("x^2"), [a, o] = useState("");
|
|
2730
4506
|
return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
|
|
2731
4507
|
/* @__PURE__ */ jsx(
|
|
2732
4508
|
"input",
|
|
2733
4509
|
{
|
|
2734
4510
|
type: "text",
|
|
2735
|
-
value:
|
|
2736
|
-
onChange: (n) =>
|
|
4511
|
+
value: r,
|
|
4512
|
+
onChange: (n) => t(n.target.value),
|
|
2737
4513
|
placeholder: e("calculator.exprPlaceholder", "Enter expression (e.g., x^2, sin(x))"),
|
|
2738
4514
|
style: {
|
|
2739
4515
|
width: "100%",
|
|
@@ -2750,7 +4526,7 @@ function CalculusMode() {
|
|
|
2750
4526
|
/* @__PURE__ */ jsx(
|
|
2751
4527
|
"button",
|
|
2752
4528
|
{
|
|
2753
|
-
onClick: () => o(`d/dx(${
|
|
4529
|
+
onClick: () => o(`d/dx(${r}) = ${CalculusOps.symbolicDerivative(r)}`),
|
|
2754
4530
|
style: {
|
|
2755
4531
|
padding: "8px 12px",
|
|
2756
4532
|
backgroundColor: "var(--nice-success, #4caf50)",
|
|
@@ -2765,7 +4541,7 @@ function CalculusMode() {
|
|
|
2765
4541
|
/* @__PURE__ */ jsx(
|
|
2766
4542
|
"button",
|
|
2767
4543
|
{
|
|
2768
|
-
onClick: () => o(`∫(${
|
|
4544
|
+
onClick: () => o(`∫(${r})dx = ${CalculusOps.symbolicIntegral(r)}`),
|
|
2769
4545
|
style: {
|
|
2770
4546
|
padding: "8px 12px",
|
|
2771
4547
|
backgroundColor: "var(--nice-primary, #2196f3)",
|
|
@@ -2794,23 +4570,23 @@ function CalculusMode() {
|
|
|
2794
4570
|
] });
|
|
2795
4571
|
}
|
|
2796
4572
|
function UnitsMode() {
|
|
2797
|
-
const { t: e } = useNiceTranslation(), { service:
|
|
4573
|
+
const { t: e } = useNiceTranslation(), { service: r } = useCalculator(), [t, a] = useState("1"), [o, n] = useState("m"), [i, c] = useState("ft"), [f, s] = useState("Length"), [d, m] = useState(""), u = r.getUnitCategories(), g = r.getUnitsByCategory(f), w = () => {
|
|
2798
4574
|
try {
|
|
2799
|
-
const
|
|
2800
|
-
|
|
2801
|
-
} catch (
|
|
2802
|
-
|
|
4575
|
+
const y = r.convertUnits(parseFloat(t), o, i);
|
|
4576
|
+
m(`${t} ${o} = ${r.format(y)} ${i}`);
|
|
4577
|
+
} catch (y) {
|
|
4578
|
+
m(y.message);
|
|
2803
4579
|
}
|
|
2804
4580
|
};
|
|
2805
4581
|
return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
|
|
2806
4582
|
/* @__PURE__ */ jsx(
|
|
2807
4583
|
"select",
|
|
2808
4584
|
{
|
|
2809
|
-
value:
|
|
2810
|
-
onChange: (
|
|
2811
|
-
|
|
2812
|
-
const
|
|
2813
|
-
|
|
4585
|
+
value: f,
|
|
4586
|
+
onChange: (y) => {
|
|
4587
|
+
s(y.target.value);
|
|
4588
|
+
const b = r.getUnitsByCategory(y.target.value);
|
|
4589
|
+
b.length >= 2 && (n(b[0].symbol), c(b[1].symbol));
|
|
2814
4590
|
},
|
|
2815
4591
|
style: {
|
|
2816
4592
|
width: "100%",
|
|
@@ -2821,7 +4597,7 @@ function UnitsMode() {
|
|
|
2821
4597
|
border: "1px solid var(--nice-text-secondary, #555)",
|
|
2822
4598
|
borderRadius: "4px"
|
|
2823
4599
|
},
|
|
2824
|
-
children:
|
|
4600
|
+
children: u.map((y) => /* @__PURE__ */ jsx("option", { value: y, children: y }, y))
|
|
2825
4601
|
}
|
|
2826
4602
|
),
|
|
2827
4603
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }, children: [
|
|
@@ -2829,8 +4605,8 @@ function UnitsMode() {
|
|
|
2829
4605
|
"input",
|
|
2830
4606
|
{
|
|
2831
4607
|
type: "number",
|
|
2832
|
-
value:
|
|
2833
|
-
onChange: (
|
|
4608
|
+
value: t,
|
|
4609
|
+
onChange: (y) => a(y.target.value),
|
|
2834
4610
|
style: {
|
|
2835
4611
|
flex: 1,
|
|
2836
4612
|
padding: "8px",
|
|
@@ -2845,7 +4621,7 @@ function UnitsMode() {
|
|
|
2845
4621
|
"select",
|
|
2846
4622
|
{
|
|
2847
4623
|
value: o,
|
|
2848
|
-
onChange: (
|
|
4624
|
+
onChange: (y) => n(y.target.value),
|
|
2849
4625
|
style: {
|
|
2850
4626
|
padding: "8px",
|
|
2851
4627
|
backgroundColor: "var(--nice-border, #3c3c3c)",
|
|
@@ -2853,12 +4629,12 @@ function UnitsMode() {
|
|
|
2853
4629
|
border: "1px solid var(--nice-text-secondary, #555)",
|
|
2854
4630
|
borderRadius: "4px"
|
|
2855
4631
|
},
|
|
2856
|
-
children:
|
|
2857
|
-
|
|
4632
|
+
children: g.map((y) => /* @__PURE__ */ jsxs("option", { value: y.symbol, children: [
|
|
4633
|
+
y.name,
|
|
2858
4634
|
" (",
|
|
2859
|
-
|
|
4635
|
+
y.symbol,
|
|
2860
4636
|
")"
|
|
2861
|
-
] },
|
|
4637
|
+
] }, y.symbol))
|
|
2862
4638
|
}
|
|
2863
4639
|
)
|
|
2864
4640
|
] }),
|
|
@@ -2867,8 +4643,8 @@ function UnitsMode() {
|
|
|
2867
4643
|
/* @__PURE__ */ jsx(
|
|
2868
4644
|
"select",
|
|
2869
4645
|
{
|
|
2870
|
-
value:
|
|
2871
|
-
onChange: (
|
|
4646
|
+
value: i,
|
|
4647
|
+
onChange: (y) => c(y.target.value),
|
|
2872
4648
|
style: {
|
|
2873
4649
|
flex: 1,
|
|
2874
4650
|
padding: "8px",
|
|
@@ -2877,12 +4653,12 @@ function UnitsMode() {
|
|
|
2877
4653
|
border: "1px solid var(--nice-text-secondary, #555)",
|
|
2878
4654
|
borderRadius: "4px"
|
|
2879
4655
|
},
|
|
2880
|
-
children:
|
|
2881
|
-
|
|
4656
|
+
children: g.map((y) => /* @__PURE__ */ jsxs("option", { value: y.symbol, children: [
|
|
4657
|
+
y.name,
|
|
2882
4658
|
" (",
|
|
2883
|
-
|
|
4659
|
+
y.symbol,
|
|
2884
4660
|
")"
|
|
2885
|
-
] },
|
|
4661
|
+
] }, y.symbol))
|
|
2886
4662
|
}
|
|
2887
4663
|
)
|
|
2888
4664
|
] }),
|
|
@@ -2919,201 +4695,201 @@ function UnitsMode() {
|
|
|
2919
4695
|
}
|
|
2920
4696
|
const GeoMath = {
|
|
2921
4697
|
/** Distance between two points */
|
|
2922
|
-
distance(e,
|
|
2923
|
-
return Math.sqrt((
|
|
4698
|
+
distance(e, r) {
|
|
4699
|
+
return Math.sqrt((r.x - e.x) ** 2 + (r.y - e.y) ** 2);
|
|
2924
4700
|
},
|
|
2925
4701
|
/** Midpoint of two points */
|
|
2926
|
-
midpoint(e,
|
|
2927
|
-
return { x: (e.x +
|
|
4702
|
+
midpoint(e, r) {
|
|
4703
|
+
return { x: (e.x + r.x) / 2, y: (e.y + r.y) / 2 };
|
|
2928
4704
|
},
|
|
2929
4705
|
/** Angle between three points (vertex at p2) */
|
|
2930
|
-
angle(e,
|
|
2931
|
-
const a = Math.atan2(e.y -
|
|
2932
|
-
let n = Math.atan2(
|
|
4706
|
+
angle(e, r, t) {
|
|
4707
|
+
const a = Math.atan2(e.y - r.y, e.x - r.x);
|
|
4708
|
+
let n = Math.atan2(t.y - r.y, t.x - r.x) - a;
|
|
2933
4709
|
return n < 0 && (n += 2 * Math.PI), n;
|
|
2934
4710
|
},
|
|
2935
4711
|
/** Angle in degrees */
|
|
2936
|
-
angleDegrees(e,
|
|
2937
|
-
return this.angle(e,
|
|
4712
|
+
angleDegrees(e, r, t) {
|
|
4713
|
+
return this.angle(e, r, t) * 180 / Math.PI;
|
|
2938
4714
|
},
|
|
2939
4715
|
/** Point on line closest to given point */
|
|
2940
|
-
closestPointOnLine(e,
|
|
2941
|
-
const a =
|
|
4716
|
+
closestPointOnLine(e, r, t) {
|
|
4717
|
+
const a = r.x - e.x, o = r.y - e.y, n = ((t.x - e.x) * a + (t.y - e.y) * o) / (a * a + o * o);
|
|
2942
4718
|
return { x: e.x + n * a, y: e.y + n * o };
|
|
2943
4719
|
},
|
|
2944
4720
|
/** Line-line intersection */
|
|
2945
|
-
lineIntersection(e,
|
|
2946
|
-
const o = (e.x -
|
|
4721
|
+
lineIntersection(e, r, t, a) {
|
|
4722
|
+
const o = (e.x - r.x) * (t.y - a.y) - (e.y - r.y) * (t.x - a.x);
|
|
2947
4723
|
if (Math.abs(o) < 1e-10)
|
|
2948
4724
|
return null;
|
|
2949
|
-
const n = ((e.x -
|
|
4725
|
+
const n = ((e.x - t.x) * (t.y - a.y) - (e.y - t.y) * (t.x - a.x)) / o;
|
|
2950
4726
|
return {
|
|
2951
|
-
x: e.x + n * (
|
|
2952
|
-
y: e.y + n * (
|
|
4727
|
+
x: e.x + n * (r.x - e.x),
|
|
4728
|
+
y: e.y + n * (r.y - e.y)
|
|
2953
4729
|
};
|
|
2954
4730
|
},
|
|
2955
4731
|
/** Circle-line intersection */
|
|
2956
|
-
circleLineIntersection(e,
|
|
2957
|
-
const o = a.x -
|
|
2958
|
-
if (
|
|
4732
|
+
circleLineIntersection(e, r, t, a) {
|
|
4733
|
+
const o = a.x - t.x, n = a.y - t.y, i = t.x - e.x, c = t.y - e.y, f = o * o + n * n, s = 2 * (i * o + c * n), d = i * i + c * c - r * r, m = s * s - 4 * f * d;
|
|
4734
|
+
if (m < 0)
|
|
2959
4735
|
return [];
|
|
2960
|
-
const
|
|
2961
|
-
return
|
|
4736
|
+
const u = Math.sqrt(m), g = (-s - u) / (2 * f), w = (-s + u) / (2 * f), y = [];
|
|
4737
|
+
return g >= 0 && g <= 1 && y.push({ x: t.x + g * o, y: t.y + g * n }), w >= 0 && w <= 1 && Math.abs(w - g) > 1e-10 && y.push({ x: t.x + w * o, y: t.y + w * n }), y;
|
|
2962
4738
|
},
|
|
2963
4739
|
/** Circle-circle intersection */
|
|
2964
|
-
circleCircleIntersection(e,
|
|
2965
|
-
const o = this.distance(e,
|
|
2966
|
-
if (o >
|
|
4740
|
+
circleCircleIntersection(e, r, t, a) {
|
|
4741
|
+
const o = this.distance(e, t);
|
|
4742
|
+
if (o > r + a || o < Math.abs(r - a) || o === 0)
|
|
2967
4743
|
return [];
|
|
2968
|
-
const n = (
|
|
4744
|
+
const n = (r * r - a * a + o * o) / (2 * o), i = Math.sqrt(r * r - n * n), c = e.x + n * (t.x - e.x) / o, f = e.y + n * (t.y - e.y) / o;
|
|
2969
4745
|
return [
|
|
2970
|
-
{ x:
|
|
2971
|
-
{ x:
|
|
4746
|
+
{ x: c + i * (t.y - e.y) / o, y: f - i * (t.x - e.x) / o },
|
|
4747
|
+
{ x: c - i * (t.y - e.y) / o, y: f + i * (t.x - e.x) / o }
|
|
2972
4748
|
];
|
|
2973
4749
|
},
|
|
2974
4750
|
/** Perpendicular line through point */
|
|
2975
|
-
perpendicularThrough(e,
|
|
2976
|
-
this.closestPointOnLine(e,
|
|
2977
|
-
const a =
|
|
4751
|
+
perpendicularThrough(e, r, t) {
|
|
4752
|
+
this.closestPointOnLine(e, r, t);
|
|
4753
|
+
const a = r.x - e.x, o = r.y - e.y;
|
|
2978
4754
|
return {
|
|
2979
|
-
p1:
|
|
2980
|
-
p2: { x:
|
|
4755
|
+
p1: t,
|
|
4756
|
+
p2: { x: t.x - o, y: t.y + a }
|
|
2981
4757
|
};
|
|
2982
4758
|
},
|
|
2983
4759
|
/** Parallel line through point */
|
|
2984
|
-
parallelThrough(e,
|
|
2985
|
-
const a =
|
|
4760
|
+
parallelThrough(e, r, t) {
|
|
4761
|
+
const a = r.x - e.x, o = r.y - e.y;
|
|
2986
4762
|
return {
|
|
2987
|
-
p1:
|
|
2988
|
-
p2: { x:
|
|
4763
|
+
p1: t,
|
|
4764
|
+
p2: { x: t.x + a, y: t.y + o }
|
|
2989
4765
|
};
|
|
2990
4766
|
},
|
|
2991
4767
|
/** Angle bisector */
|
|
2992
|
-
angleBisector(e,
|
|
2993
|
-
const a = Math.atan2(e.y -
|
|
4768
|
+
angleBisector(e, r, t) {
|
|
4769
|
+
const a = Math.atan2(e.y - r.y, e.x - r.x), o = Math.atan2(t.y - r.y, t.x - r.x);
|
|
2994
4770
|
let n = (a + o) / 2;
|
|
2995
4771
|
return Math.abs(o - a) > Math.PI && (n += Math.PI), {
|
|
2996
|
-
x:
|
|
2997
|
-
y:
|
|
4772
|
+
x: r.x + Math.cos(n),
|
|
4773
|
+
y: r.y + Math.sin(n)
|
|
2998
4774
|
};
|
|
2999
4775
|
},
|
|
3000
4776
|
/** Reflect point over line */
|
|
3001
|
-
reflect(e,
|
|
3002
|
-
const a = this.closestPointOnLine(
|
|
4777
|
+
reflect(e, r, t) {
|
|
4778
|
+
const a = this.closestPointOnLine(r, t, e);
|
|
3003
4779
|
return {
|
|
3004
4780
|
x: 2 * a.x - e.x,
|
|
3005
4781
|
y: 2 * a.y - e.y
|
|
3006
4782
|
};
|
|
3007
4783
|
},
|
|
3008
4784
|
/** Rotate point around center */
|
|
3009
|
-
rotate(e,
|
|
3010
|
-
const a = Math.cos(
|
|
4785
|
+
rotate(e, r, t) {
|
|
4786
|
+
const a = Math.cos(t), o = Math.sin(t), n = e.x - r.x, i = e.y - r.y;
|
|
3011
4787
|
return {
|
|
3012
|
-
x:
|
|
3013
|
-
y:
|
|
4788
|
+
x: r.x + n * a - i * o,
|
|
4789
|
+
y: r.y + n * o + i * a
|
|
3014
4790
|
};
|
|
3015
4791
|
},
|
|
3016
4792
|
/** Translate point */
|
|
3017
|
-
translate(e,
|
|
3018
|
-
return { x: e.x +
|
|
4793
|
+
translate(e, r, t) {
|
|
4794
|
+
return { x: e.x + r, y: e.y + t };
|
|
3019
4795
|
},
|
|
3020
4796
|
/** Dilate point from center */
|
|
3021
|
-
dilate(e,
|
|
4797
|
+
dilate(e, r, t) {
|
|
3022
4798
|
return {
|
|
3023
|
-
x:
|
|
3024
|
-
y:
|
|
4799
|
+
x: r.x + t * (e.x - r.x),
|
|
4800
|
+
y: r.y + t * (e.y - r.y)
|
|
3025
4801
|
};
|
|
3026
4802
|
},
|
|
3027
4803
|
/** Polygon area (shoelace formula) */
|
|
3028
4804
|
polygonArea(e) {
|
|
3029
|
-
let
|
|
3030
|
-
const
|
|
3031
|
-
for (let a = 0; a <
|
|
3032
|
-
const o = (a + 1) %
|
|
3033
|
-
|
|
4805
|
+
let r = 0;
|
|
4806
|
+
const t = e.length;
|
|
4807
|
+
for (let a = 0; a < t; a++) {
|
|
4808
|
+
const o = (a + 1) % t;
|
|
4809
|
+
r += e[a].x * e[o].y, r -= e[o].x * e[a].y;
|
|
3034
4810
|
}
|
|
3035
|
-
return Math.abs(
|
|
4811
|
+
return Math.abs(r) / 2;
|
|
3036
4812
|
},
|
|
3037
4813
|
/** Polygon perimeter */
|
|
3038
4814
|
polygonPerimeter(e) {
|
|
3039
|
-
let
|
|
3040
|
-
const
|
|
3041
|
-
for (let a = 0; a <
|
|
3042
|
-
const o = (a + 1) %
|
|
3043
|
-
|
|
4815
|
+
let r = 0;
|
|
4816
|
+
const t = e.length;
|
|
4817
|
+
for (let a = 0; a < t; a++) {
|
|
4818
|
+
const o = (a + 1) % t;
|
|
4819
|
+
r += this.distance(e[a], e[o]);
|
|
3044
4820
|
}
|
|
3045
|
-
return
|
|
4821
|
+
return r;
|
|
3046
4822
|
},
|
|
3047
4823
|
/** Triangle circumcenter */
|
|
3048
|
-
circumcenter(e,
|
|
3049
|
-
const a = 2 * (e.x * (
|
|
4824
|
+
circumcenter(e, r, t) {
|
|
4825
|
+
const a = 2 * (e.x * (r.y - t.y) + r.x * (t.y - e.y) + t.x * (e.y - r.y)), o = ((e.x ** 2 + e.y ** 2) * (r.y - t.y) + (r.x ** 2 + r.y ** 2) * (t.y - e.y) + (t.x ** 2 + t.y ** 2) * (e.y - r.y)) / a, n = ((e.x ** 2 + e.y ** 2) * (t.x - r.x) + (r.x ** 2 + r.y ** 2) * (e.x - t.x) + (t.x ** 2 + t.y ** 2) * (r.x - e.x)) / a;
|
|
3050
4826
|
return { x: o, y: n };
|
|
3051
4827
|
},
|
|
3052
4828
|
/** Triangle incenter */
|
|
3053
|
-
incenter(e,
|
|
3054
|
-
const a = this.distance(e,
|
|
4829
|
+
incenter(e, r, t) {
|
|
4830
|
+
const a = this.distance(e, r), o = this.distance(r, t), n = this.distance(t, e), i = a + o + n;
|
|
3055
4831
|
return {
|
|
3056
|
-
x: (o * e.x + n *
|
|
3057
|
-
y: (o * e.y + n *
|
|
4832
|
+
x: (o * e.x + n * r.x + a * t.x) / i,
|
|
4833
|
+
y: (o * e.y + n * r.y + a * t.y) / i
|
|
3058
4834
|
};
|
|
3059
4835
|
},
|
|
3060
4836
|
/** Triangle centroid */
|
|
3061
|
-
centroid(e,
|
|
4837
|
+
centroid(e, r, t) {
|
|
3062
4838
|
return {
|
|
3063
|
-
x: (e.x +
|
|
3064
|
-
y: (e.y +
|
|
4839
|
+
x: (e.x + r.x + t.x) / 3,
|
|
4840
|
+
y: (e.y + r.y + t.y) / 3
|
|
3065
4841
|
};
|
|
3066
4842
|
}
|
|
3067
4843
|
};
|
|
3068
4844
|
class GeometryService {
|
|
3069
4845
|
constructor() {
|
|
3070
|
-
|
|
3071
|
-
|
|
4846
|
+
S(this, "elements", /* @__PURE__ */ new Map());
|
|
4847
|
+
S(this, "nextLabel", 1);
|
|
3072
4848
|
}
|
|
3073
4849
|
/** Add element */
|
|
3074
|
-
addElement(
|
|
3075
|
-
const
|
|
3076
|
-
return this.elements.set(
|
|
4850
|
+
addElement(r) {
|
|
4851
|
+
const t = this.generateId(), a = { ...r, id: t };
|
|
4852
|
+
return this.elements.set(t, a), a;
|
|
3077
4853
|
}
|
|
3078
4854
|
/** Get element */
|
|
3079
|
-
getElement(
|
|
3080
|
-
return this.elements.get(
|
|
4855
|
+
getElement(r) {
|
|
4856
|
+
return this.elements.get(r);
|
|
3081
4857
|
}
|
|
3082
4858
|
/** Get point */
|
|
3083
|
-
getPoint(
|
|
3084
|
-
const
|
|
3085
|
-
return (
|
|
4859
|
+
getPoint(r) {
|
|
4860
|
+
const t = this.elements.get(r);
|
|
4861
|
+
return (t == null ? void 0 : t.type) === "point" ? t : void 0;
|
|
3086
4862
|
}
|
|
3087
4863
|
/** Update element */
|
|
3088
|
-
updateElement(
|
|
3089
|
-
const a = this.elements.get(
|
|
3090
|
-
a && this.elements.set(
|
|
4864
|
+
updateElement(r, t) {
|
|
4865
|
+
const a = this.elements.get(r);
|
|
4866
|
+
a && this.elements.set(r, { ...a, ...t, id: r, type: a.type });
|
|
3091
4867
|
}
|
|
3092
4868
|
/** Delete element */
|
|
3093
|
-
deleteElement(
|
|
3094
|
-
var
|
|
3095
|
-
this.elements.delete(
|
|
4869
|
+
deleteElement(r) {
|
|
4870
|
+
var t;
|
|
4871
|
+
this.elements.delete(r);
|
|
3096
4872
|
for (const [a, o] of this.elements)
|
|
3097
|
-
(
|
|
4873
|
+
(t = o.dependencies) != null && t.includes(r) && this.deleteElement(a);
|
|
3098
4874
|
}
|
|
3099
4875
|
/** Get all elements */
|
|
3100
4876
|
getAllElements() {
|
|
3101
4877
|
return Array.from(this.elements.values());
|
|
3102
4878
|
}
|
|
3103
4879
|
/** Get elements by type */
|
|
3104
|
-
getElementsByType(
|
|
3105
|
-
return Array.from(this.elements.values()).filter((
|
|
4880
|
+
getElementsByType(r) {
|
|
4881
|
+
return Array.from(this.elements.values()).filter((t) => t.type === r);
|
|
3106
4882
|
}
|
|
3107
4883
|
/** Clear all */
|
|
3108
4884
|
clear() {
|
|
3109
4885
|
this.elements.clear(), this.nextLabel = 1;
|
|
3110
4886
|
}
|
|
3111
4887
|
/** Create point */
|
|
3112
|
-
createPoint(
|
|
4888
|
+
createPoint(r, t, a) {
|
|
3113
4889
|
return this.addElement({
|
|
3114
4890
|
type: "point",
|
|
3115
|
-
x:
|
|
3116
|
-
y:
|
|
4891
|
+
x: r,
|
|
4892
|
+
y: t,
|
|
3117
4893
|
label: a ?? this.getNextLabel(),
|
|
3118
4894
|
color: { r: 0, g: 0, b: 0 },
|
|
3119
4895
|
visible: !0,
|
|
@@ -3123,70 +4899,70 @@ class GeometryService {
|
|
|
3123
4899
|
});
|
|
3124
4900
|
}
|
|
3125
4901
|
/** Create segment */
|
|
3126
|
-
createSegment(
|
|
4902
|
+
createSegment(r, t) {
|
|
3127
4903
|
return this.addElement({
|
|
3128
4904
|
type: "segment",
|
|
3129
|
-
point1Id:
|
|
3130
|
-
point2Id:
|
|
4905
|
+
point1Id: r,
|
|
4906
|
+
point2Id: t,
|
|
3131
4907
|
label: void 0,
|
|
3132
4908
|
color: { r: 50, g: 50, b: 50 },
|
|
3133
4909
|
visible: !0,
|
|
3134
4910
|
selected: !1,
|
|
3135
4911
|
locked: !1,
|
|
3136
4912
|
width: 2,
|
|
3137
|
-
dependencies: [
|
|
4913
|
+
dependencies: [r, t]
|
|
3138
4914
|
});
|
|
3139
4915
|
}
|
|
3140
4916
|
/** Create line */
|
|
3141
|
-
createLine(
|
|
4917
|
+
createLine(r, t) {
|
|
3142
4918
|
return this.addElement({
|
|
3143
4919
|
type: "line",
|
|
3144
|
-
point1Id:
|
|
3145
|
-
point2Id:
|
|
4920
|
+
point1Id: r,
|
|
4921
|
+
point2Id: t,
|
|
3146
4922
|
label: void 0,
|
|
3147
4923
|
color: { r: 50, g: 50, b: 200 },
|
|
3148
4924
|
visible: !0,
|
|
3149
4925
|
selected: !1,
|
|
3150
4926
|
locked: !1,
|
|
3151
4927
|
width: 1,
|
|
3152
|
-
dependencies: [
|
|
4928
|
+
dependencies: [r, t]
|
|
3153
4929
|
});
|
|
3154
4930
|
}
|
|
3155
4931
|
/** Create ray */
|
|
3156
|
-
createRay(
|
|
4932
|
+
createRay(r, t) {
|
|
3157
4933
|
return this.addElement({
|
|
3158
4934
|
type: "ray",
|
|
3159
|
-
originId:
|
|
3160
|
-
throughId:
|
|
4935
|
+
originId: r,
|
|
4936
|
+
throughId: t,
|
|
3161
4937
|
label: void 0,
|
|
3162
4938
|
color: { r: 50, g: 150, b: 50 },
|
|
3163
4939
|
visible: !0,
|
|
3164
4940
|
selected: !1,
|
|
3165
4941
|
locked: !1,
|
|
3166
4942
|
width: 1,
|
|
3167
|
-
dependencies: [
|
|
4943
|
+
dependencies: [r, t]
|
|
3168
4944
|
});
|
|
3169
4945
|
}
|
|
3170
4946
|
/** Create circle */
|
|
3171
|
-
createCircle(
|
|
4947
|
+
createCircle(r, t) {
|
|
3172
4948
|
return this.addElement({
|
|
3173
4949
|
type: "circle",
|
|
3174
|
-
centerId:
|
|
3175
|
-
radius:
|
|
4950
|
+
centerId: r,
|
|
4951
|
+
radius: t,
|
|
3176
4952
|
label: void 0,
|
|
3177
4953
|
color: { r: 200, g: 50, b: 50 },
|
|
3178
4954
|
visible: !0,
|
|
3179
4955
|
selected: !1,
|
|
3180
4956
|
locked: !1,
|
|
3181
4957
|
width: 2,
|
|
3182
|
-
dependencies: [
|
|
4958
|
+
dependencies: [r]
|
|
3183
4959
|
});
|
|
3184
4960
|
}
|
|
3185
4961
|
/** Create polygon */
|
|
3186
|
-
createPolygon(
|
|
4962
|
+
createPolygon(r) {
|
|
3187
4963
|
return this.addElement({
|
|
3188
4964
|
type: "polygon",
|
|
3189
|
-
pointIds:
|
|
4965
|
+
pointIds: r,
|
|
3190
4966
|
label: void 0,
|
|
3191
4967
|
color: { r: 100, g: 100, b: 200 },
|
|
3192
4968
|
visible: !0,
|
|
@@ -3194,96 +4970,96 @@ class GeometryService {
|
|
|
3194
4970
|
locked: !1,
|
|
3195
4971
|
width: 2,
|
|
3196
4972
|
fill: { r: 100, g: 100, b: 200, a: 0.2 },
|
|
3197
|
-
dependencies:
|
|
4973
|
+
dependencies: r
|
|
3198
4974
|
});
|
|
3199
4975
|
}
|
|
3200
4976
|
/** Create midpoint */
|
|
3201
|
-
createMidpoint(
|
|
3202
|
-
const a = this.getPoint(
|
|
4977
|
+
createMidpoint(r, t) {
|
|
4978
|
+
const a = this.getPoint(r), o = this.getPoint(t);
|
|
3203
4979
|
if (!a || !o)
|
|
3204
4980
|
return null;
|
|
3205
|
-
const n = GeoMath.midpoint(a, o),
|
|
3206
|
-
return
|
|
4981
|
+
const n = GeoMath.midpoint(a, o), i = this.createPoint(n.x, n.y);
|
|
4982
|
+
return i.dependencies = [r, t], i.color = { r: 0, g: 150, b: 0 }, i;
|
|
3207
4983
|
}
|
|
3208
4984
|
/** Create perpendicular */
|
|
3209
|
-
createPerpendicular(
|
|
3210
|
-
const o = this.getPoint(
|
|
3211
|
-
if (!o || !n || !
|
|
4985
|
+
createPerpendicular(r, t, a) {
|
|
4986
|
+
const o = this.getPoint(r), n = this.getPoint(t), i = this.getPoint(a);
|
|
4987
|
+
if (!o || !n || !i)
|
|
3212
4988
|
return null;
|
|
3213
|
-
const
|
|
3214
|
-
return
|
|
4989
|
+
const c = GeoMath.perpendicularThrough(o, n, i), f = this.createPoint(c.p2.x, c.p2.y), s = this.createLine(a, f.id);
|
|
4990
|
+
return s.dependencies = [r, t, a], s;
|
|
3215
4991
|
}
|
|
3216
4992
|
/** Create parallel */
|
|
3217
|
-
createParallel(
|
|
3218
|
-
const o = this.getPoint(
|
|
3219
|
-
if (!o || !n || !
|
|
4993
|
+
createParallel(r, t, a) {
|
|
4994
|
+
const o = this.getPoint(r), n = this.getPoint(t), i = this.getPoint(a);
|
|
4995
|
+
if (!o || !n || !i)
|
|
3220
4996
|
return null;
|
|
3221
|
-
const
|
|
3222
|
-
return
|
|
4997
|
+
const c = GeoMath.parallelThrough(o, n, i), f = this.createPoint(c.p2.x, c.p2.y), s = this.createLine(a, f.id);
|
|
4998
|
+
return s.dependencies = [r, t, a], s;
|
|
3223
4999
|
}
|
|
3224
5000
|
/** Create intersection point */
|
|
3225
|
-
createIntersection(
|
|
3226
|
-
const a = this.elements.get(
|
|
5001
|
+
createIntersection(r, t) {
|
|
5002
|
+
const a = this.elements.get(r), o = this.elements.get(t);
|
|
3227
5003
|
if (!a || !o)
|
|
3228
5004
|
return [];
|
|
3229
|
-
const n = [],
|
|
3230
|
-
if (
|
|
3231
|
-
const d =
|
|
3232
|
-
if (
|
|
3233
|
-
return [
|
|
5005
|
+
const n = [], i = (s) => {
|
|
5006
|
+
if (s.type === "line" || s.type === "segment" || s.type === "ray") {
|
|
5007
|
+
const d = s, m = this.getPoint(d.point1Id ?? d.originId), u = this.getPoint(d.point2Id ?? d.throughId);
|
|
5008
|
+
if (m && u)
|
|
5009
|
+
return [m, u];
|
|
3234
5010
|
}
|
|
3235
5011
|
return null;
|
|
3236
|
-
},
|
|
3237
|
-
if (
|
|
3238
|
-
const
|
|
3239
|
-
if (
|
|
3240
|
-
const d = this.createPoint(
|
|
3241
|
-
d.dependencies = [
|
|
5012
|
+
}, c = i(a), f = i(o);
|
|
5013
|
+
if (c && f) {
|
|
5014
|
+
const s = GeoMath.lineIntersection(c[0], c[1], f[0], f[1]);
|
|
5015
|
+
if (s) {
|
|
5016
|
+
const d = this.createPoint(s.x, s.y);
|
|
5017
|
+
d.dependencies = [r, t], d.color = { r: 255, g: 0, b: 0 }, n.push(d);
|
|
3242
5018
|
}
|
|
3243
5019
|
}
|
|
3244
|
-
if (a.type === "circle" &&
|
|
3245
|
-
const
|
|
5020
|
+
if (a.type === "circle" && f) {
|
|
5021
|
+
const s = a, d = this.getPoint(s.centerId);
|
|
3246
5022
|
if (d) {
|
|
3247
|
-
const
|
|
3248
|
-
for (const
|
|
3249
|
-
const
|
|
3250
|
-
|
|
5023
|
+
const m = GeoMath.circleLineIntersection(d, s.radius, f[0], f[1]);
|
|
5024
|
+
for (const u of m) {
|
|
5025
|
+
const g = this.createPoint(u.x, u.y);
|
|
5026
|
+
g.dependencies = [r, t], g.color = { r: 255, g: 0, b: 0 }, n.push(g);
|
|
3251
5027
|
}
|
|
3252
5028
|
}
|
|
3253
5029
|
}
|
|
3254
5030
|
if (a.type === "circle" && o.type === "circle") {
|
|
3255
|
-
const
|
|
3256
|
-
if (
|
|
3257
|
-
const
|
|
3258
|
-
for (const w of
|
|
3259
|
-
const
|
|
3260
|
-
|
|
5031
|
+
const s = a, d = o, m = this.getPoint(s.centerId), u = this.getPoint(d.centerId);
|
|
5032
|
+
if (m && u) {
|
|
5033
|
+
const g = GeoMath.circleCircleIntersection(m, s.radius, u, d.radius);
|
|
5034
|
+
for (const w of g) {
|
|
5035
|
+
const y = this.createPoint(w.x, w.y);
|
|
5036
|
+
y.dependencies = [r, t], y.color = { r: 255, g: 0, b: 0 }, n.push(y);
|
|
3261
5037
|
}
|
|
3262
5038
|
}
|
|
3263
5039
|
}
|
|
3264
5040
|
return n;
|
|
3265
5041
|
}
|
|
3266
5042
|
/** Calculate measurement */
|
|
3267
|
-
calculateMeasurement(
|
|
3268
|
-
switch (
|
|
5043
|
+
calculateMeasurement(r, t) {
|
|
5044
|
+
switch (r) {
|
|
3269
5045
|
case "distance": {
|
|
3270
|
-
const a = this.getPoint(
|
|
5046
|
+
const a = this.getPoint(t[0]), o = this.getPoint(t[1]);
|
|
3271
5047
|
if (a && o)
|
|
3272
5048
|
return GeoMath.distance(a, o);
|
|
3273
5049
|
break;
|
|
3274
5050
|
}
|
|
3275
5051
|
case "angle": {
|
|
3276
|
-
const a = this.getPoint(
|
|
5052
|
+
const a = this.getPoint(t[0]), o = this.getPoint(t[1]), n = this.getPoint(t[2]);
|
|
3277
5053
|
if (a && o && n)
|
|
3278
5054
|
return GeoMath.angleDegrees(a, o, n);
|
|
3279
5055
|
break;
|
|
3280
5056
|
}
|
|
3281
5057
|
case "area":
|
|
3282
5058
|
case "perimeter": {
|
|
3283
|
-
const a = this.elements.get(
|
|
5059
|
+
const a = this.elements.get(t[0]);
|
|
3284
5060
|
if ((a == null ? void 0 : a.type) === "polygon") {
|
|
3285
5061
|
const o = a.pointIds.map((n) => this.getPoint(n)).filter(Boolean);
|
|
3286
|
-
return
|
|
5062
|
+
return r === "area" ? GeoMath.polygonArea(o) : GeoMath.polygonPerimeter(o);
|
|
3287
5063
|
}
|
|
3288
5064
|
break;
|
|
3289
5065
|
}
|
|
@@ -3291,69 +5067,69 @@ class GeometryService {
|
|
|
3291
5067
|
return 0;
|
|
3292
5068
|
}
|
|
3293
5069
|
/** Export to SVG */
|
|
3294
|
-
exportSVG(
|
|
5070
|
+
exportSVG(r, t, a) {
|
|
3295
5071
|
const o = [
|
|
3296
|
-
`<svg xmlns="http://www.w3.org/2000/svg" width="${
|
|
5072
|
+
`<svg xmlns="http://www.w3.org/2000/svg" width="${r}" height="${t}" viewBox="0 0 ${r} ${t}">`
|
|
3297
5073
|
];
|
|
3298
5074
|
o.push(
|
|
3299
5075
|
`<rect width="100%" height="100%" fill="rgb(${a.backgroundColor.r},${a.backgroundColor.g},${a.backgroundColor.b})"/>`
|
|
3300
5076
|
);
|
|
3301
|
-
const n = (
|
|
3302
|
-
x:
|
|
3303
|
-
y:
|
|
5077
|
+
const n = (i, c) => ({
|
|
5078
|
+
x: r / 2 + (i - a.centerX) * a.scale,
|
|
5079
|
+
y: t / 2 - (c - a.centerY) * a.scale
|
|
3304
5080
|
});
|
|
3305
5081
|
if (a.showGrid) {
|
|
3306
5082
|
o.push('<g stroke="var(--nice-border, #ddd)" stroke-width="0.5">');
|
|
3307
|
-
for (let
|
|
3308
|
-
const
|
|
3309
|
-
o.push(`<line x1="${
|
|
5083
|
+
for (let i = Math.floor(-r / 2 / a.scale + a.centerX); i <= r / 2 / a.scale + a.centerX; i += a.gridSpacing) {
|
|
5084
|
+
const c = n(i, 0);
|
|
5085
|
+
o.push(`<line x1="${c.x}" y1="0" x2="${c.x}" y2="${t}"/>`);
|
|
3310
5086
|
}
|
|
3311
|
-
for (let
|
|
3312
|
-
const
|
|
3313
|
-
o.push(`<line x1="0" y1="${
|
|
5087
|
+
for (let i = Math.floor(-t / 2 / a.scale + a.centerY); i <= t / 2 / a.scale + a.centerY; i += a.gridSpacing) {
|
|
5088
|
+
const c = n(0, i);
|
|
5089
|
+
o.push(`<line x1="0" y1="${c.y}" x2="${r}" y2="${c.y}"/>`);
|
|
3314
5090
|
}
|
|
3315
5091
|
o.push("</g>");
|
|
3316
5092
|
}
|
|
3317
5093
|
if (a.showAxes) {
|
|
3318
|
-
const
|
|
3319
|
-
o.push('<g stroke="var(--nice-text, #333)" stroke-width="1">'), o.push(`<line x1="0" y1="${
|
|
5094
|
+
const i = n(0, 0);
|
|
5095
|
+
o.push('<g stroke="var(--nice-text, #333)" stroke-width="1">'), o.push(`<line x1="0" y1="${i.y}" x2="${r}" y2="${i.y}"/>`), o.push(`<line x1="${i.x}" y1="0" x2="${i.x}" y2="${t}"/>`), o.push("</g>");
|
|
3320
5096
|
}
|
|
3321
|
-
for (const
|
|
3322
|
-
if (!
|
|
5097
|
+
for (const i of this.getAllElements()) {
|
|
5098
|
+
if (!i.visible)
|
|
3323
5099
|
continue;
|
|
3324
|
-
const
|
|
3325
|
-
switch (
|
|
5100
|
+
const c = `rgb(${i.color.r},${i.color.g},${i.color.b})`;
|
|
5101
|
+
switch (i.type) {
|
|
3326
5102
|
case "point": {
|
|
3327
|
-
const
|
|
3328
|
-
o.push(`<circle cx="${
|
|
5103
|
+
const f = n(i.x, i.y);
|
|
5104
|
+
o.push(`<circle cx="${f.x}" cy="${f.y}" r="${i.size}" fill="${c}"/>`), i.label && o.push(`<text x="${f.x + 8}" y="${f.y - 8}" font-size="12">${i.label}</text>`);
|
|
3329
5105
|
break;
|
|
3330
5106
|
}
|
|
3331
5107
|
case "segment": {
|
|
3332
|
-
const
|
|
3333
|
-
if (
|
|
3334
|
-
const d = n(
|
|
5108
|
+
const f = this.getPoint(i.point1Id), s = this.getPoint(i.point2Id);
|
|
5109
|
+
if (f && s) {
|
|
5110
|
+
const d = n(f.x, f.y), m = n(s.x, s.y);
|
|
3335
5111
|
o.push(
|
|
3336
|
-
`<line x1="${d.x}" y1="${d.y}" x2="${
|
|
5112
|
+
`<line x1="${d.x}" y1="${d.y}" x2="${m.x}" y2="${m.y}" stroke="${c}" stroke-width="${i.width}"/>`
|
|
3337
5113
|
);
|
|
3338
5114
|
}
|
|
3339
5115
|
break;
|
|
3340
5116
|
}
|
|
3341
5117
|
case "circle": {
|
|
3342
|
-
const
|
|
3343
|
-
if (
|
|
3344
|
-
const
|
|
5118
|
+
const f = this.getPoint(i.centerId);
|
|
5119
|
+
if (f) {
|
|
5120
|
+
const s = n(f.x, f.y), d = i.radius * a.scale, m = i.fill ? `rgba(${i.fill.r},${i.fill.g},${i.fill.b},${i.fill.a ?? 0.2})` : "none";
|
|
3345
5121
|
o.push(
|
|
3346
|
-
`<circle cx="${
|
|
5122
|
+
`<circle cx="${s.x}" cy="${s.y}" r="${d}" fill="${m}" stroke="${c}" stroke-width="${i.width}"/>`
|
|
3347
5123
|
);
|
|
3348
5124
|
}
|
|
3349
5125
|
break;
|
|
3350
5126
|
}
|
|
3351
5127
|
case "polygon": {
|
|
3352
|
-
const
|
|
3353
|
-
if (
|
|
3354
|
-
const d =
|
|
5128
|
+
const f = i.pointIds.map((s) => this.getPoint(s)).filter(Boolean);
|
|
5129
|
+
if (f.length > 0) {
|
|
5130
|
+
const d = f.map((u) => n(u.x, u.y)).map((u, g) => `${g === 0 ? "M" : "L"}${u.x},${u.y}`).join(" ") + " Z", m = i.fill ? `rgba(${i.fill.r},${i.fill.g},${i.fill.b},${i.fill.a ?? 0.2})` : "none";
|
|
3355
5131
|
o.push(
|
|
3356
|
-
`<path d="${d}" fill="${
|
|
5132
|
+
`<path d="${d}" fill="${m}" stroke="${c}" stroke-width="${i.width}"/>`
|
|
3357
5133
|
);
|
|
3358
5134
|
}
|
|
3359
5135
|
break;
|
|
@@ -3367,8 +5143,8 @@ class GeometryService {
|
|
|
3367
5143
|
return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
|
|
3368
5144
|
}
|
|
3369
5145
|
getNextLabel() {
|
|
3370
|
-
const
|
|
3371
|
-
return this.nextLabel++,
|
|
5146
|
+
const r = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", t = this.nextLabel - 1;
|
|
5147
|
+
return this.nextLabel++, t < 26 ? r[t] : r[t % 26] + Math.floor(t / 26);
|
|
3372
5148
|
}
|
|
3373
5149
|
}
|
|
3374
5150
|
function createGeometryService() {
|
|
@@ -3432,12 +5208,12 @@ const styles = {
|
|
|
3432
5208
|
};
|
|
3433
5209
|
function NiceGeometry({
|
|
3434
5210
|
service: e,
|
|
3435
|
-
width:
|
|
3436
|
-
height:
|
|
5211
|
+
width: r = 800,
|
|
5212
|
+
height: t = 600,
|
|
3437
5213
|
className: a,
|
|
3438
5214
|
style: o
|
|
3439
5215
|
}) {
|
|
3440
|
-
const [n,
|
|
5216
|
+
const [n, i] = useState([]), [c, f] = useState("point"), [s, d] = useState([]), [m, u] = useState({
|
|
3441
5217
|
centerX: 0,
|
|
3442
5218
|
centerY: 0,
|
|
3443
5219
|
scale: 40,
|
|
@@ -3447,35 +5223,35 @@ function NiceGeometry({
|
|
|
3447
5223
|
snapToGrid: !0,
|
|
3448
5224
|
snapToPoints: !0,
|
|
3449
5225
|
backgroundColor: { r: 255, g: 255, b: 255 }
|
|
3450
|
-
}),
|
|
3451
|
-
|
|
3452
|
-
}, [e]), w = useCallback((
|
|
3453
|
-
|
|
5226
|
+
}), g = useCallback(() => {
|
|
5227
|
+
i(e.getAllElements());
|
|
5228
|
+
}, [e]), w = useCallback((b) => {
|
|
5229
|
+
u((l) => ({ ...l, ...b }));
|
|
3454
5230
|
}, []);
|
|
3455
5231
|
useEffect(() => {
|
|
3456
|
-
|
|
3457
|
-
}, [
|
|
3458
|
-
const
|
|
5232
|
+
g();
|
|
5233
|
+
}, [g]);
|
|
5234
|
+
const y = {
|
|
3459
5235
|
service: e,
|
|
3460
5236
|
elements: n,
|
|
3461
|
-
tool:
|
|
3462
|
-
setTool:
|
|
3463
|
-
view:
|
|
5237
|
+
tool: c,
|
|
5238
|
+
setTool: f,
|
|
5239
|
+
view: m,
|
|
3464
5240
|
setView: w,
|
|
3465
|
-
selectedIds:
|
|
5241
|
+
selectedIds: s,
|
|
3466
5242
|
setSelectedIds: d,
|
|
3467
|
-
refresh:
|
|
5243
|
+
refresh: g
|
|
3468
5244
|
};
|
|
3469
|
-
return /* @__PURE__ */ jsx(GeometryContext.Provider, { value:
|
|
5245
|
+
return /* @__PURE__ */ jsx(GeometryContext.Provider, { value: y, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles.container, ...o }, children: [
|
|
3470
5246
|
/* @__PURE__ */ jsx(Toolbar, {}),
|
|
3471
5247
|
/* @__PURE__ */ jsxs("div", { style: styles.main, children: [
|
|
3472
|
-
/* @__PURE__ */ jsx(Canvas, { width:
|
|
3473
|
-
/* @__PURE__ */ jsx(StatusBar, { width:
|
|
5248
|
+
/* @__PURE__ */ jsx(Canvas, { width: r, height: t }),
|
|
5249
|
+
/* @__PURE__ */ jsx(StatusBar, { width: r, height: t })
|
|
3474
5250
|
] })
|
|
3475
5251
|
] }) });
|
|
3476
5252
|
}
|
|
3477
5253
|
function Toolbar() {
|
|
3478
|
-
const { tool: e, setTool:
|
|
5254
|
+
const { tool: e, setTool: r } = useGeometry(), t = [
|
|
3479
5255
|
{ id: "select", icon: "⬚", title: "Select" },
|
|
3480
5256
|
{ id: "point", icon: "•", title: "Point" },
|
|
3481
5257
|
{ id: "segment", icon: "—", title: "Segment" },
|
|
@@ -3492,10 +5268,10 @@ function Toolbar() {
|
|
|
3492
5268
|
{ id: "rotate", icon: "↻", title: "Rotate" },
|
|
3493
5269
|
{ id: "measure", icon: "📏", title: "Measure" }
|
|
3494
5270
|
];
|
|
3495
|
-
return /* @__PURE__ */ jsx("div", { style: styles.toolbar, children:
|
|
5271
|
+
return /* @__PURE__ */ jsx("div", { style: styles.toolbar, children: t.map((a) => /* @__PURE__ */ jsx(
|
|
3496
5272
|
"button",
|
|
3497
5273
|
{
|
|
3498
|
-
onClick: () =>
|
|
5274
|
+
onClick: () => r(a.id),
|
|
3499
5275
|
title: a.title,
|
|
3500
5276
|
style: {
|
|
3501
5277
|
...styles.toolButton,
|
|
@@ -3507,187 +5283,187 @@ function Toolbar() {
|
|
|
3507
5283
|
a.id
|
|
3508
5284
|
)) });
|
|
3509
5285
|
}
|
|
3510
|
-
function Canvas({ width: e, height:
|
|
3511
|
-
const
|
|
3512
|
-
(
|
|
3513
|
-
const
|
|
3514
|
-
return
|
|
3515
|
-
x: Math.round(
|
|
3516
|
-
y: Math.round(
|
|
3517
|
-
} : { x:
|
|
5286
|
+
function Canvas({ width: e, height: r }) {
|
|
5287
|
+
const t = useRef(null), { service: a, elements: o, tool: n, view: i, selectedIds: c, setSelectedIds: f, refresh: s } = useGeometry(), [d, m] = useState([]), u = useCallback(
|
|
5288
|
+
(b, l) => {
|
|
5289
|
+
const p = (b - e / 2) / i.scale + i.centerX, h = -(l - r / 2) / i.scale + i.centerY;
|
|
5290
|
+
return i.snapToGrid ? {
|
|
5291
|
+
x: Math.round(p / i.gridSpacing) * i.gridSpacing,
|
|
5292
|
+
y: Math.round(h / i.gridSpacing) * i.gridSpacing
|
|
5293
|
+
} : { x: p, y: h };
|
|
3518
5294
|
},
|
|
3519
|
-
[e,
|
|
3520
|
-
),
|
|
3521
|
-
(
|
|
3522
|
-
x: e / 2 + (
|
|
3523
|
-
y:
|
|
5295
|
+
[e, r, i]
|
|
5296
|
+
), g = useCallback(
|
|
5297
|
+
(b, l) => ({
|
|
5298
|
+
x: e / 2 + (b - i.centerX) * i.scale,
|
|
5299
|
+
y: r / 2 - (l - i.centerY) * i.scale
|
|
3524
5300
|
}),
|
|
3525
|
-
[e,
|
|
5301
|
+
[e, r, i]
|
|
3526
5302
|
), w = useCallback(
|
|
3527
|
-
(
|
|
3528
|
-
var
|
|
3529
|
-
const
|
|
3530
|
-
if (!
|
|
5303
|
+
(b) => {
|
|
5304
|
+
var h;
|
|
5305
|
+
const l = (h = t.current) == null ? void 0 : h.getBoundingClientRect();
|
|
5306
|
+
if (!l)
|
|
3531
5307
|
return;
|
|
3532
|
-
const
|
|
5308
|
+
const p = u(b.clientX - l.left, b.clientY - l.top);
|
|
3533
5309
|
switch (n) {
|
|
3534
5310
|
case "point": {
|
|
3535
|
-
a.createPoint(
|
|
5311
|
+
a.createPoint(p.x, p.y), s();
|
|
3536
5312
|
break;
|
|
3537
5313
|
}
|
|
3538
5314
|
case "segment":
|
|
3539
5315
|
case "line":
|
|
3540
5316
|
case "ray": {
|
|
3541
|
-
const k = p
|
|
5317
|
+
const k = y(p);
|
|
3542
5318
|
if (k)
|
|
3543
|
-
|
|
3544
|
-
const v = [...
|
|
3545
|
-
return v.length === 2 ? (n === "segment" ? a.createSegment(v[0], v[1]) : n === "line" ? a.createLine(v[0], v[1]) : n === "ray" && a.createRay(v[0], v[1]),
|
|
5319
|
+
m((x) => {
|
|
5320
|
+
const v = [...x, k.id];
|
|
5321
|
+
return v.length === 2 ? (n === "segment" ? a.createSegment(v[0], v[1]) : n === "line" ? a.createLine(v[0], v[1]) : n === "ray" && a.createRay(v[0], v[1]), s(), []) : v;
|
|
3546
5322
|
});
|
|
3547
5323
|
else {
|
|
3548
|
-
const
|
|
3549
|
-
|
|
3550
|
-
const C = [...v,
|
|
3551
|
-
return C.length === 2 ? (n === "segment" ? a.createSegment(C[0], C[1]) : n === "line" ? a.createLine(C[0], C[1]) : n === "ray" && a.createRay(C[0], C[1]),
|
|
3552
|
-
}),
|
|
5324
|
+
const x = a.createPoint(p.x, p.y);
|
|
5325
|
+
m((v) => {
|
|
5326
|
+
const C = [...v, x.id];
|
|
5327
|
+
return C.length === 2 ? (n === "segment" ? a.createSegment(C[0], C[1]) : n === "line" ? a.createLine(C[0], C[1]) : n === "ray" && a.createRay(C[0], C[1]), s(), []) : C;
|
|
5328
|
+
}), s();
|
|
3553
5329
|
}
|
|
3554
5330
|
break;
|
|
3555
5331
|
}
|
|
3556
5332
|
case "circle": {
|
|
3557
|
-
const k = p
|
|
5333
|
+
const k = y(p);
|
|
3558
5334
|
if (k)
|
|
3559
|
-
|
|
3560
|
-
if (
|
|
5335
|
+
m((x) => {
|
|
5336
|
+
if (x.length === 0)
|
|
3561
5337
|
return [k.id];
|
|
3562
|
-
const v = a.getPoint(
|
|
5338
|
+
const v = a.getPoint(x[0]);
|
|
3563
5339
|
if (v) {
|
|
3564
|
-
const C = GeoMath.distance(v,
|
|
3565
|
-
a.createCircle(
|
|
5340
|
+
const C = GeoMath.distance(v, p);
|
|
5341
|
+
a.createCircle(x[0], C), s();
|
|
3566
5342
|
}
|
|
3567
5343
|
return [];
|
|
3568
5344
|
});
|
|
3569
5345
|
else if (d.length === 1) {
|
|
3570
|
-
const
|
|
3571
|
-
if (
|
|
3572
|
-
const v = GeoMath.distance(
|
|
3573
|
-
a.createCircle(d[0], v),
|
|
5346
|
+
const x = a.getPoint(d[0]);
|
|
5347
|
+
if (x) {
|
|
5348
|
+
const v = GeoMath.distance(x, p);
|
|
5349
|
+
a.createCircle(d[0], v), s(), m([]);
|
|
3574
5350
|
}
|
|
3575
5351
|
} else {
|
|
3576
|
-
const
|
|
3577
|
-
|
|
5352
|
+
const x = a.createPoint(p.x, p.y);
|
|
5353
|
+
m([x.id]), s();
|
|
3578
5354
|
}
|
|
3579
5355
|
break;
|
|
3580
5356
|
}
|
|
3581
5357
|
case "midpoint": {
|
|
3582
|
-
const k = p
|
|
3583
|
-
k &&
|
|
3584
|
-
const v = [...
|
|
3585
|
-
return v.length === 2 ? (a.createMidpoint(v[0], v[1]),
|
|
5358
|
+
const k = y(p);
|
|
5359
|
+
k && m((x) => {
|
|
5360
|
+
const v = [...x, k.id];
|
|
5361
|
+
return v.length === 2 ? (a.createMidpoint(v[0], v[1]), s(), []) : v;
|
|
3586
5362
|
});
|
|
3587
5363
|
break;
|
|
3588
5364
|
}
|
|
3589
5365
|
case "select": {
|
|
3590
|
-
const k = p
|
|
3591
|
-
|
|
5366
|
+
const k = y(p);
|
|
5367
|
+
f(k ? [k.id] : []);
|
|
3592
5368
|
break;
|
|
3593
5369
|
}
|
|
3594
5370
|
}
|
|
3595
5371
|
},
|
|
3596
|
-
[n, a,
|
|
3597
|
-
),
|
|
3598
|
-
for (const
|
|
3599
|
-
if (
|
|
3600
|
-
return
|
|
5372
|
+
[n, a, s, u, d, f]
|
|
5373
|
+
), y = (b) => {
|
|
5374
|
+
for (const p of o)
|
|
5375
|
+
if (p.type === "point" && GeoMath.distance(p, b) < 0.5)
|
|
5376
|
+
return p;
|
|
3601
5377
|
};
|
|
3602
5378
|
return useEffect(() => {
|
|
3603
|
-
const
|
|
3604
|
-
if (!(!
|
|
3605
|
-
if (
|
|
3606
|
-
|
|
3607
|
-
const
|
|
3608
|
-
for (let
|
|
3609
|
-
|
|
3610
|
-
for (let
|
|
3611
|
-
|
|
5379
|
+
const b = t.current, l = b == null ? void 0 : b.getContext("2d");
|
|
5380
|
+
if (!(!b || !l)) {
|
|
5381
|
+
if (l.fillStyle = `rgb(${i.backgroundColor.r},${i.backgroundColor.g},${i.backgroundColor.b})`, l.fillRect(0, 0, e, r), i.showGrid) {
|
|
5382
|
+
l.strokeStyle = "var(--nice-border, #e0e0e0)", l.lineWidth = 0.5;
|
|
5383
|
+
const p = i.gridSpacing * i.scale, h = (e / 2 - i.centerX * i.scale) % p, k = (r / 2 + i.centerY * i.scale) % p;
|
|
5384
|
+
for (let x = h; x < e; x += p)
|
|
5385
|
+
l.beginPath(), l.moveTo(x, 0), l.lineTo(x, r), l.stroke();
|
|
5386
|
+
for (let x = k; x < r; x += p)
|
|
5387
|
+
l.beginPath(), l.moveTo(0, x), l.lineTo(e, x), l.stroke();
|
|
3612
5388
|
}
|
|
3613
|
-
if (
|
|
3614
|
-
const
|
|
3615
|
-
|
|
5389
|
+
if (i.showAxes) {
|
|
5390
|
+
const p = g(0, 0);
|
|
5391
|
+
l.strokeStyle = "var(--nice-text, #333)", l.lineWidth = 1, l.beginPath(), l.moveTo(0, p.y), l.lineTo(e, p.y), l.stroke(), l.beginPath(), l.moveTo(p.x, 0), l.lineTo(p.x, r), l.stroke();
|
|
3616
5392
|
}
|
|
3617
|
-
for (const
|
|
3618
|
-
if (!
|
|
5393
|
+
for (const p of o) {
|
|
5394
|
+
if (!p.visible)
|
|
3619
5395
|
continue;
|
|
3620
|
-
const
|
|
3621
|
-
switch (
|
|
5396
|
+
const h = `rgb(${p.color.r},${p.color.g},${p.color.b})`, k = c.includes(p.id);
|
|
5397
|
+
switch (p.type) {
|
|
3622
5398
|
case "point": {
|
|
3623
|
-
const
|
|
3624
|
-
|
|
5399
|
+
const x = g(p.x, p.y);
|
|
5400
|
+
l.beginPath(), l.arc(x.x, x.y, k ? p.size + 2 : p.size, 0, 2 * Math.PI), l.fillStyle = k ? "var(--nice-primary-hover, #1976d2)" : h, l.fill(), p.label && (l.fillStyle = "var(--nice-text, #333)", l.font = "12px sans-serif", l.fillText(p.label, x.x + 8, x.y - 8));
|
|
3625
5401
|
break;
|
|
3626
5402
|
}
|
|
3627
5403
|
case "segment": {
|
|
3628
|
-
const
|
|
3629
|
-
if (
|
|
3630
|
-
const C =
|
|
3631
|
-
|
|
5404
|
+
const x = a.getPoint(p.point1Id), v = a.getPoint(p.point2Id);
|
|
5405
|
+
if (x && v) {
|
|
5406
|
+
const C = g(x.x, x.y), M = g(v.x, v.y);
|
|
5407
|
+
l.strokeStyle = h, l.lineWidth = p.width, l.beginPath(), l.moveTo(C.x, C.y), l.lineTo(M.x, M.y), l.stroke();
|
|
3632
5408
|
}
|
|
3633
5409
|
break;
|
|
3634
5410
|
}
|
|
3635
5411
|
case "line": {
|
|
3636
|
-
const
|
|
3637
|
-
if (
|
|
3638
|
-
const C = v.x -
|
|
3639
|
-
|
|
5412
|
+
const x = a.getPoint(p.point1Id), v = a.getPoint(p.point2Id);
|
|
5413
|
+
if (x && v) {
|
|
5414
|
+
const C = v.x - x.x, M = v.y - x.y, P = -1e3, j = 1e3, $ = g(x.x + P * C, x.y + P * M), B = g(x.x + j * C, x.y + j * M);
|
|
5415
|
+
l.strokeStyle = h, l.lineWidth = p.width, l.beginPath(), l.moveTo($.x, $.y), l.lineTo(B.x, B.y), l.stroke();
|
|
3640
5416
|
}
|
|
3641
5417
|
break;
|
|
3642
5418
|
}
|
|
3643
5419
|
case "circle": {
|
|
3644
|
-
const
|
|
3645
|
-
if (
|
|
3646
|
-
const v =
|
|
3647
|
-
|
|
5420
|
+
const x = a.getPoint(p.centerId);
|
|
5421
|
+
if (x) {
|
|
5422
|
+
const v = g(x.x, x.y), C = p.radius * i.scale;
|
|
5423
|
+
l.beginPath(), l.arc(v.x, v.y, C, 0, 2 * Math.PI), p.fill && (l.fillStyle = `rgba(${p.fill.r},${p.fill.g},${p.fill.b},${p.fill.a ?? 0.2})`, l.fill()), l.strokeStyle = h, l.lineWidth = p.width, l.stroke();
|
|
3648
5424
|
}
|
|
3649
5425
|
break;
|
|
3650
5426
|
}
|
|
3651
5427
|
case "polygon": {
|
|
3652
|
-
const
|
|
3653
|
-
if (
|
|
3654
|
-
|
|
3655
|
-
const v =
|
|
3656
|
-
|
|
3657
|
-
for (let C = 1; C <
|
|
3658
|
-
const
|
|
3659
|
-
|
|
5428
|
+
const x = p.pointIds.map((v) => a.getPoint(v)).filter(Boolean);
|
|
5429
|
+
if (x.length > 0) {
|
|
5430
|
+
l.beginPath();
|
|
5431
|
+
const v = g(x[0].x, x[0].y);
|
|
5432
|
+
l.moveTo(v.x, v.y);
|
|
5433
|
+
for (let C = 1; C < x.length; C++) {
|
|
5434
|
+
const M = g(x[C].x, x[C].y);
|
|
5435
|
+
l.lineTo(M.x, M.y);
|
|
3660
5436
|
}
|
|
3661
|
-
|
|
5437
|
+
l.closePath(), p.fill && (l.fillStyle = `rgba(${p.fill.r},${p.fill.g},${p.fill.b},${p.fill.a ?? 0.2})`, l.fill()), l.strokeStyle = h, l.lineWidth = p.width, l.stroke();
|
|
3662
5438
|
}
|
|
3663
5439
|
break;
|
|
3664
5440
|
}
|
|
3665
5441
|
}
|
|
3666
5442
|
}
|
|
3667
5443
|
if (d.length > 0) {
|
|
3668
|
-
|
|
3669
|
-
for (const
|
|
3670
|
-
const
|
|
3671
|
-
if (
|
|
3672
|
-
const k = h
|
|
3673
|
-
|
|
5444
|
+
l.fillStyle = "rgba(25, 118, 210, 0.3)";
|
|
5445
|
+
for (const p of d) {
|
|
5446
|
+
const h = a.getPoint(p);
|
|
5447
|
+
if (h) {
|
|
5448
|
+
const k = g(h.x, h.y);
|
|
5449
|
+
l.beginPath(), l.arc(k.x, k.y, 12, 0, 2 * Math.PI), l.fill();
|
|
3674
5450
|
}
|
|
3675
5451
|
}
|
|
3676
5452
|
}
|
|
3677
5453
|
}
|
|
3678
|
-
}, [o,
|
|
5454
|
+
}, [o, i, e, r, c, d, a, g]), /* @__PURE__ */ jsx(
|
|
3679
5455
|
"canvas",
|
|
3680
5456
|
{
|
|
3681
|
-
ref:
|
|
5457
|
+
ref: t,
|
|
3682
5458
|
width: e,
|
|
3683
|
-
height:
|
|
5459
|
+
height: r,
|
|
3684
5460
|
style: styles.canvas,
|
|
3685
5461
|
onClick: w
|
|
3686
5462
|
}
|
|
3687
5463
|
);
|
|
3688
5464
|
}
|
|
3689
|
-
function StatusBar({ width: e, height:
|
|
3690
|
-
const { tool:
|
|
5465
|
+
function StatusBar({ width: e, height: r }) {
|
|
5466
|
+
const { tool: t, elements: a, view: o, service: n } = useGeometry(), [i, c] = useState(null), f = {
|
|
3691
5467
|
select: "Select",
|
|
3692
5468
|
point: "Point",
|
|
3693
5469
|
line: "Line",
|
|
@@ -3709,11 +5485,11 @@ function StatusBar({ width: e, height: t }) {
|
|
|
3709
5485
|
dilate: "Dilate",
|
|
3710
5486
|
measure: "Measure",
|
|
3711
5487
|
text: "Text"
|
|
3712
|
-
},
|
|
5488
|
+
}, s = a.filter((d) => d.type === "point").length;
|
|
3713
5489
|
return /* @__PURE__ */ jsxs("div", { style: styles.statusBar, children: [
|
|
3714
5490
|
/* @__PURE__ */ jsxs("span", { children: [
|
|
3715
5491
|
"Tool: ",
|
|
3716
|
-
|
|
5492
|
+
f[t]
|
|
3717
5493
|
] }),
|
|
3718
5494
|
/* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
|
|
3719
5495
|
/* @__PURE__ */ jsxs("span", { children: [
|
|
@@ -3723,7 +5499,7 @@ function StatusBar({ width: e, height: t }) {
|
|
|
3723
5499
|
/* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
|
|
3724
5500
|
/* @__PURE__ */ jsxs("span", { children: [
|
|
3725
5501
|
"Points: ",
|
|
3726
|
-
|
|
5502
|
+
s
|
|
3727
5503
|
] }),
|
|
3728
5504
|
/* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
|
|
3729
5505
|
/* @__PURE__ */ jsxs("span", { children: [
|