@buoy-gg/floating-tools-core 2.1.4-beta.2 → 2.1.4
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/lib/commonjs/FloatingToolsStore.js +1 -501
- package/lib/commonjs/colors.js +1 -54
- package/lib/commonjs/constants.js +1 -31
- package/lib/commonjs/devToolsState.js +1 -325
- package/lib/commonjs/dial.js +1 -617
- package/lib/commonjs/easing.js +1 -69
- package/lib/commonjs/icons/benchmark-icon.js +1 -24
- package/lib/commonjs/icons/env-icon.js +1 -24
- package/lib/commonjs/icons/events-icon.js +1 -24
- package/lib/commonjs/icons/highlight-icon.js +1 -24
- package/lib/commonjs/icons/icon-data.js +1 -2268
- package/lib/commonjs/icons/icon-factories.js +1 -173
- package/lib/commonjs/icons/icon-primitives.js +1 -559
- package/lib/commonjs/icons/icon-primitives.native.js +1 -779
- package/lib/commonjs/icons/icon-renderer.js +1 -260
- package/lib/commonjs/icons/network-icon.js +1 -24
- package/lib/commonjs/icons/query-icon.js +1 -24
- package/lib/commonjs/icons/redux-icon.js +1 -85
- package/lib/commonjs/icons/renders-icon.js +1 -33
- package/lib/commonjs/icons/routes-icon.js +1 -49
- package/lib/commonjs/icons/sentry-icon.js +1 -24
- package/lib/commonjs/icons/storage-icon.js +1 -24
- package/lib/commonjs/icons/wifi-icon.js +1 -24
- package/lib/commonjs/index.js +1 -723
- package/lib/commonjs/settings.js +1 -588
- package/lib/commonjs/utils.js +1 -72
- package/lib/module/FloatingToolsStore.js +1 -496
- package/lib/module/colors.js +1 -49
- package/lib/module/constants.js +1 -27
- package/lib/module/devToolsState.js +1 -318
- package/lib/module/dial.js +1 -603
- package/lib/module/easing.js +1 -62
- package/lib/module/icons/benchmark-icon.js +1 -15
- package/lib/module/icons/env-icon.js +1 -15
- package/lib/module/icons/events-icon.js +1 -15
- package/lib/module/icons/highlight-icon.js +1 -15
- package/lib/module/icons/icon-data.js +1 -2264
- package/lib/module/icons/icon-factories.js +1 -163
- package/lib/module/icons/icon-primitives.js +1 -547
- package/lib/module/icons/icon-primitives.native.js +1 -767
- package/lib/module/icons/icon-renderer.js +1 -255
- package/lib/module/icons/network-icon.js +1 -15
- package/lib/module/icons/query-icon.js +1 -15
- package/lib/module/icons/redux-icon.js +1 -81
- package/lib/module/icons/renders-icon.js +1 -17
- package/lib/module/icons/routes-icon.js +1 -41
- package/lib/module/icons/sentry-icon.js +1 -15
- package/lib/module/icons/storage-icon.js +1 -15
- package/lib/module/icons/wifi-icon.js +1 -15
- package/lib/module/index.js +1 -103
- package/lib/module/settings.js +1 -576
- package/lib/module/utils.js +1 -66
- package/package.json +1 -1
- package/lib/typescript/commonjs/FloatingToolsStore.d.ts.map +0 -1
- package/lib/typescript/commonjs/colors.d.ts.map +0 -1
- package/lib/typescript/commonjs/constants.d.ts.map +0 -1
- package/lib/typescript/commonjs/devToolsState.d.ts.map +0 -1
- package/lib/typescript/commonjs/dial.d.ts.map +0 -1
- package/lib/typescript/commonjs/easing.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/benchmark-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/env-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/events-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/highlight-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/icon-data.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/icon-factories.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/icon-primitives.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/icon-primitives.native.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/icon-renderer.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/network-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/query-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/redux-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/renders-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/routes-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/sentry-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/storage-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/icons/wifi-icon.d.ts.map +0 -1
- package/lib/typescript/commonjs/index.d.ts.map +0 -1
- package/lib/typescript/commonjs/settings.d.ts.map +0 -1
- package/lib/typescript/commonjs/types.d.ts.map +0 -1
- package/lib/typescript/commonjs/utils.d.ts.map +0 -1
- package/lib/typescript/module/FloatingToolsStore.d.ts.map +0 -1
- package/lib/typescript/module/colors.d.ts.map +0 -1
- package/lib/typescript/module/constants.d.ts.map +0 -1
- package/lib/typescript/module/devToolsState.d.ts.map +0 -1
- package/lib/typescript/module/dial.d.ts.map +0 -1
- package/lib/typescript/module/easing.d.ts.map +0 -1
- package/lib/typescript/module/icons/benchmark-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/env-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/events-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/highlight-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/icon-data.d.ts.map +0 -1
- package/lib/typescript/module/icons/icon-factories.d.ts.map +0 -1
- package/lib/typescript/module/icons/icon-primitives.d.ts.map +0 -1
- package/lib/typescript/module/icons/icon-primitives.native.d.ts.map +0 -1
- package/lib/typescript/module/icons/icon-renderer.d.ts.map +0 -1
- package/lib/typescript/module/icons/network-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/query-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/redux-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/renders-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/routes-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/sentry-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/storage-icon.d.ts.map +0 -1
- package/lib/typescript/module/icons/wifi-icon.d.ts.map +0 -1
- package/lib/typescript/module/index.d.ts.map +0 -1
- package/lib/typescript/module/settings.d.ts.map +0 -1
- package/lib/typescript/module/types.d.ts.map +0 -1
- package/lib/typescript/module/utils.d.ts.map +0 -1
|
@@ -1,779 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.IconTriangle = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
|
|
7
|
-
var _reactNative = require("react-native");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
/**
|
|
10
|
-
* Icon Primitives - MOBILE (React Native)
|
|
11
|
-
*
|
|
12
|
-
* This file is auto-picked by Metro (React Native bundler).
|
|
13
|
-
* Web bundlers pick icon-primitives.tsx instead.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
// ===========================================
|
|
17
|
-
// Types
|
|
18
|
-
// ===========================================
|
|
19
|
-
|
|
20
|
-
// ===========================================
|
|
21
|
-
// Mobile Primitives (React Native Views)
|
|
22
|
-
// ===========================================
|
|
23
|
-
|
|
24
|
-
const IconContainer = ({
|
|
25
|
-
size,
|
|
26
|
-
children
|
|
27
|
-
}) => {
|
|
28
|
-
const style = {
|
|
29
|
-
position: 'relative',
|
|
30
|
-
width: size,
|
|
31
|
-
height: size
|
|
32
|
-
};
|
|
33
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
34
|
-
style: style,
|
|
35
|
-
children: children
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
exports.IconContainer = IconContainer;
|
|
39
|
-
const IconCircle = ({
|
|
40
|
-
cx,
|
|
41
|
-
cy,
|
|
42
|
-
r,
|
|
43
|
-
fill,
|
|
44
|
-
borderColor,
|
|
45
|
-
borderWidth = 0,
|
|
46
|
-
opacity = 1,
|
|
47
|
-
scaleX = 1,
|
|
48
|
-
scaleY = 1,
|
|
49
|
-
glowColor,
|
|
50
|
-
glowRadius = 0
|
|
51
|
-
}) => {
|
|
52
|
-
const diameter = r * 2;
|
|
53
|
-
|
|
54
|
-
// Build transforms array
|
|
55
|
-
const transforms = [];
|
|
56
|
-
if (scaleX !== 1) transforms.push({
|
|
57
|
-
scaleX
|
|
58
|
-
});
|
|
59
|
-
if (scaleY !== 1) transforms.push({
|
|
60
|
-
scaleY
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
// Check if this is a "transparent" element (border-only ring)
|
|
64
|
-
// RN shadows require backgroundColor, so we need a separate glow layer
|
|
65
|
-
const needsSeparateGlow = glowColor && glowRadius > 0 && (!fill || fill === 'transparent');
|
|
66
|
-
const hasFillForShadow = fill && fill !== 'transparent';
|
|
67
|
-
const style = {
|
|
68
|
-
position: 'absolute',
|
|
69
|
-
left: cx - r,
|
|
70
|
-
top: cy - r,
|
|
71
|
-
width: diameter,
|
|
72
|
-
height: diameter,
|
|
73
|
-
borderRadius: r,
|
|
74
|
-
backgroundColor: fill,
|
|
75
|
-
borderColor,
|
|
76
|
-
borderWidth,
|
|
77
|
-
opacity,
|
|
78
|
-
transform: transforms.length > 0 ? transforms : undefined,
|
|
79
|
-
// Only apply shadow if we have a fill (RN shadows need backgroundColor)
|
|
80
|
-
...(glowColor && glowRadius > 0 && hasFillForShadow && {
|
|
81
|
-
shadowColor: glowColor,
|
|
82
|
-
shadowOffset: {
|
|
83
|
-
width: 0,
|
|
84
|
-
height: 0
|
|
85
|
-
},
|
|
86
|
-
shadowOpacity: 0.9,
|
|
87
|
-
shadowRadius: glowRadius * 0.8
|
|
88
|
-
})
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
// For border-only elements (rings), create glow using a filled circle with shadow
|
|
92
|
-
// The trick: use backgroundColor:'#000' (matches icon bg) so shadow renders,
|
|
93
|
-
// with glowColor on the border for the visible glow effect
|
|
94
|
-
if (needsSeparateGlow) {
|
|
95
|
-
const strokeW = borderWidth || 1;
|
|
96
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
97
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
98
|
-
style: {
|
|
99
|
-
position: 'absolute',
|
|
100
|
-
left: cx - r,
|
|
101
|
-
top: cy - r,
|
|
102
|
-
width: r * 2,
|
|
103
|
-
height: r * 2,
|
|
104
|
-
borderRadius: r,
|
|
105
|
-
backgroundColor: '#000',
|
|
106
|
-
// Matches icon bg - enables shadow
|
|
107
|
-
borderWidth: strokeW,
|
|
108
|
-
borderColor: glowColor,
|
|
109
|
-
opacity: 0.5,
|
|
110
|
-
transform: transforms.length > 0 ? transforms : undefined,
|
|
111
|
-
shadowColor: glowColor,
|
|
112
|
-
shadowOffset: {
|
|
113
|
-
width: 0,
|
|
114
|
-
height: 0
|
|
115
|
-
},
|
|
116
|
-
shadowOpacity: 0.9,
|
|
117
|
-
shadowRadius: 8
|
|
118
|
-
}
|
|
119
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
120
|
-
style: style
|
|
121
|
-
})]
|
|
122
|
-
});
|
|
123
|
-
}
|
|
124
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
125
|
-
style: style
|
|
126
|
-
});
|
|
127
|
-
};
|
|
128
|
-
exports.IconCircle = IconCircle;
|
|
129
|
-
const IconRect = ({
|
|
130
|
-
x,
|
|
131
|
-
y,
|
|
132
|
-
width,
|
|
133
|
-
height,
|
|
134
|
-
fill,
|
|
135
|
-
borderColor,
|
|
136
|
-
borderWidth = 0,
|
|
137
|
-
borderRadius = 0,
|
|
138
|
-
opacity = 1,
|
|
139
|
-
glowColor,
|
|
140
|
-
glowRadius = 0,
|
|
141
|
-
rotation,
|
|
142
|
-
originX = 0.5,
|
|
143
|
-
// default center
|
|
144
|
-
originY = 0.5 // default center
|
|
145
|
-
}) => {
|
|
146
|
-
// Build transform array
|
|
147
|
-
// React Native rotates around center by default.
|
|
148
|
-
// To rotate around a custom origin, we:
|
|
149
|
-
// 1. Translate so the origin point moves to center
|
|
150
|
-
// 2. Rotate
|
|
151
|
-
// 3. Translate back
|
|
152
|
-
|
|
153
|
-
const transforms = [];
|
|
154
|
-
if (rotation !== undefined) {
|
|
155
|
-
// Calculate offset from center to desired origin
|
|
156
|
-
// originX/originY are 0-1 values (0=left/top, 0.5=center, 1=right/bottom)
|
|
157
|
-
const offsetX = (0.5 - originX) * width;
|
|
158
|
-
const offsetY = (0.5 - originY) * height;
|
|
159
|
-
|
|
160
|
-
// Apply transforms: translate to origin, rotate, translate back
|
|
161
|
-
if (offsetX !== 0 || offsetY !== 0) {
|
|
162
|
-
transforms.push({
|
|
163
|
-
translateX: -offsetX
|
|
164
|
-
});
|
|
165
|
-
transforms.push({
|
|
166
|
-
translateY: -offsetY
|
|
167
|
-
});
|
|
168
|
-
}
|
|
169
|
-
transforms.push({
|
|
170
|
-
rotate: `${rotation}deg`
|
|
171
|
-
});
|
|
172
|
-
if (offsetX !== 0 || offsetY !== 0) {
|
|
173
|
-
transforms.push({
|
|
174
|
-
translateX: offsetX
|
|
175
|
-
});
|
|
176
|
-
transforms.push({
|
|
177
|
-
translateY: offsetY
|
|
178
|
-
});
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
// Check if this is a "transparent" element (border-only)
|
|
183
|
-
// RN shadows require backgroundColor, so we need a separate glow layer
|
|
184
|
-
const hasGlow = glowColor && glowRadius > 0;
|
|
185
|
-
const needsSeparateGlow = hasGlow && (!fill || fill === 'transparent');
|
|
186
|
-
const hasFillForShadow = fill && fill !== 'transparent';
|
|
187
|
-
const style = {
|
|
188
|
-
position: 'absolute',
|
|
189
|
-
left: x,
|
|
190
|
-
top: y,
|
|
191
|
-
width,
|
|
192
|
-
height,
|
|
193
|
-
borderRadius,
|
|
194
|
-
backgroundColor: fill,
|
|
195
|
-
borderColor,
|
|
196
|
-
borderWidth,
|
|
197
|
-
opacity,
|
|
198
|
-
transform: transforms.length > 0 ? transforms : undefined,
|
|
199
|
-
// Only apply shadow if we have a fill (RN shadows need backgroundColor)
|
|
200
|
-
...(hasGlow && hasFillForShadow && {
|
|
201
|
-
shadowColor: glowColor,
|
|
202
|
-
shadowOffset: {
|
|
203
|
-
width: 0,
|
|
204
|
-
height: 0
|
|
205
|
-
},
|
|
206
|
-
shadowOpacity: 0.9,
|
|
207
|
-
shadowRadius: glowRadius * 0.8
|
|
208
|
-
})
|
|
209
|
-
};
|
|
210
|
-
|
|
211
|
-
// For border-only elements, render a glow rect with shadow
|
|
212
|
-
if (needsSeparateGlow) {
|
|
213
|
-
const strokeW = borderWidth || 1;
|
|
214
|
-
const glowExpand = strokeW;
|
|
215
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
216
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
217
|
-
style: {
|
|
218
|
-
position: 'absolute',
|
|
219
|
-
left: x - glowExpand,
|
|
220
|
-
top: y - glowExpand,
|
|
221
|
-
width: width + glowExpand * 2,
|
|
222
|
-
height: height + glowExpand * 2,
|
|
223
|
-
borderRadius: borderRadius + glowExpand,
|
|
224
|
-
borderWidth: strokeW * 2,
|
|
225
|
-
borderColor: glowColor,
|
|
226
|
-
opacity: 0.4,
|
|
227
|
-
transform: transforms.length > 0 ? transforms : undefined,
|
|
228
|
-
shadowColor: glowColor,
|
|
229
|
-
shadowOffset: {
|
|
230
|
-
width: 0,
|
|
231
|
-
height: 0
|
|
232
|
-
},
|
|
233
|
-
shadowOpacity: 0.8,
|
|
234
|
-
shadowRadius: strokeW * 4
|
|
235
|
-
}
|
|
236
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
237
|
-
style: style
|
|
238
|
-
})]
|
|
239
|
-
});
|
|
240
|
-
}
|
|
241
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
242
|
-
style: style
|
|
243
|
-
});
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
/**
|
|
247
|
-
* Calculates a point on a quadratic Bezier curve (1 control point)
|
|
248
|
-
* B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2
|
|
249
|
-
*/
|
|
250
|
-
exports.IconRect = IconRect;
|
|
251
|
-
function getQuadraticBezierPoint(t, p0x, p0y, p1x, p1y, p2x, p2y) {
|
|
252
|
-
const mt = 1 - t;
|
|
253
|
-
return {
|
|
254
|
-
x: mt * mt * p0x + 2 * mt * t * p1x + t * t * p2x,
|
|
255
|
-
y: mt * mt * p0y + 2 * mt * t * p1y + t * t * p2y
|
|
256
|
-
};
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
/**
|
|
260
|
-
* Calculates a point on a cubic Bezier curve (2 control points)
|
|
261
|
-
* B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
|
|
262
|
-
*/
|
|
263
|
-
function getCubicBezierPoint(t, p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
|
|
264
|
-
const mt = 1 - t;
|
|
265
|
-
const mt2 = mt * mt;
|
|
266
|
-
const mt3 = mt2 * mt;
|
|
267
|
-
const t2 = t * t;
|
|
268
|
-
const t3 = t2 * t;
|
|
269
|
-
return {
|
|
270
|
-
x: mt3 * p0x + 3 * mt2 * t * p1x + 3 * mt * t2 * p2x + t3 * p3x,
|
|
271
|
-
y: mt3 * p0y + 3 * mt2 * t * p1y + 3 * mt * t2 * p2y + t3 * p3y
|
|
272
|
-
};
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
/**
|
|
276
|
-
* IconLine - draws a line between two points
|
|
277
|
-
* Auto-calculates length and rotation from coordinates!
|
|
278
|
-
* Supports curved lines via cubic Bezier (2 control points) or quadratic (1 control point).
|
|
279
|
-
*/
|
|
280
|
-
const IconLine = ({
|
|
281
|
-
x1,
|
|
282
|
-
y1,
|
|
283
|
-
x2,
|
|
284
|
-
y2,
|
|
285
|
-
stroke,
|
|
286
|
-
strokeWidth = 1,
|
|
287
|
-
opacity = 1,
|
|
288
|
-
glowColor,
|
|
289
|
-
glowRadius = 0,
|
|
290
|
-
rotation = 0,
|
|
291
|
-
curveX,
|
|
292
|
-
curveY,
|
|
293
|
-
curve2X,
|
|
294
|
-
curve2Y
|
|
295
|
-
}) => {
|
|
296
|
-
// Check if this is a curved line (either control point set)
|
|
297
|
-
const hasCurve1 = curveX !== undefined && curveX !== 0 || curveY !== undefined && curveY !== 0;
|
|
298
|
-
const hasCurve2 = curve2X !== undefined && curve2X !== 0 || curve2Y !== undefined && curve2Y !== 0;
|
|
299
|
-
const isCurved = hasCurve1 || hasCurve2;
|
|
300
|
-
if (isCurved) {
|
|
301
|
-
const midX = (x1 + x2) / 2;
|
|
302
|
-
const midY = (y1 + y2) / 2;
|
|
303
|
-
|
|
304
|
-
// Control points: offset from line midpoint
|
|
305
|
-
const control1X = midX + (curveX ?? 0);
|
|
306
|
-
const control1Y = midY + (curveY ?? 0);
|
|
307
|
-
const control2X = midX + (curve2X ?? 0);
|
|
308
|
-
const control2Y = midY + (curve2Y ?? 0);
|
|
309
|
-
|
|
310
|
-
// Determine if cubic (2 distinct control points) or quadratic (1 control point)
|
|
311
|
-
const isCubic = hasCurve1 && hasCurve2;
|
|
312
|
-
|
|
313
|
-
// Estimate curve length using samples
|
|
314
|
-
let approxLength = 0;
|
|
315
|
-
const sampleCount = 20;
|
|
316
|
-
let prevPt = {
|
|
317
|
-
x: x1,
|
|
318
|
-
y: y1
|
|
319
|
-
};
|
|
320
|
-
for (let i = 1; i <= sampleCount; i++) {
|
|
321
|
-
const t = i / sampleCount;
|
|
322
|
-
const pt = isCubic ? getCubicBezierPoint(t, x1, y1, control1X, control1Y, control2X, control2Y, x2, y2) : getQuadraticBezierPoint(t, x1, y1, hasCurve1 ? control1X : control2X, hasCurve1 ? control1Y : control2Y, x2, y2);
|
|
323
|
-
approxLength += Math.sqrt((pt.x - prevPt.x) ** 2 + (pt.y - prevPt.y) ** 2);
|
|
324
|
-
prevPt = pt;
|
|
325
|
-
}
|
|
326
|
-
const elements = [];
|
|
327
|
-
|
|
328
|
-
// Dense circles for smooth body
|
|
329
|
-
const circleSpacing = Math.max(0.05, strokeWidth * 0.02);
|
|
330
|
-
const numCircles = Math.max(100, Math.ceil(approxLength / circleSpacing));
|
|
331
|
-
for (let i = 0; i <= numCircles; i++) {
|
|
332
|
-
const t = i / numCircles;
|
|
333
|
-
const pt = isCubic ? getCubicBezierPoint(t, x1, y1, control1X, control1Y, control2X, control2Y, x2, y2) : getQuadraticBezierPoint(t, x1, y1, hasCurve1 ? control1X : control2X, hasCurve1 ? control1Y : control2Y, x2, y2);
|
|
334
|
-
const circleStyle = {
|
|
335
|
-
position: 'absolute',
|
|
336
|
-
left: pt.x - strokeWidth / 2,
|
|
337
|
-
top: pt.y - strokeWidth / 2,
|
|
338
|
-
width: strokeWidth,
|
|
339
|
-
height: strokeWidth,
|
|
340
|
-
borderRadius: strokeWidth / 2,
|
|
341
|
-
backgroundColor: stroke,
|
|
342
|
-
opacity
|
|
343
|
-
};
|
|
344
|
-
elements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
345
|
-
style: circleStyle
|
|
346
|
-
}, `c${i}`));
|
|
347
|
-
}
|
|
348
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
349
|
-
children: elements
|
|
350
|
-
});
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
// Straight line (original logic)
|
|
354
|
-
const dx = x2 - x1;
|
|
355
|
-
const dy = y2 - y1;
|
|
356
|
-
const length = Math.sqrt(dx * dx + dy * dy);
|
|
357
|
-
const angle = Math.atan2(dy, dx) * (180 / Math.PI);
|
|
358
|
-
|
|
359
|
-
// Position at midpoint of line
|
|
360
|
-
const centerX = (x1 + x2) / 2;
|
|
361
|
-
const centerY = (y1 + y2) / 2;
|
|
362
|
-
|
|
363
|
-
// Total rotation = line angle + additional rotation
|
|
364
|
-
const totalRotation = angle + rotation;
|
|
365
|
-
const hasGlow = glowColor && glowRadius > 0;
|
|
366
|
-
const style = {
|
|
367
|
-
position: 'absolute',
|
|
368
|
-
left: centerX - length / 2,
|
|
369
|
-
top: centerY - strokeWidth / 2,
|
|
370
|
-
width: length,
|
|
371
|
-
height: strokeWidth,
|
|
372
|
-
backgroundColor: stroke,
|
|
373
|
-
opacity,
|
|
374
|
-
transform: [{
|
|
375
|
-
rotate: `${totalRotation}deg`
|
|
376
|
-
}],
|
|
377
|
-
borderRadius: strokeWidth / 2
|
|
378
|
-
};
|
|
379
|
-
|
|
380
|
-
// For neon glow effect, render a glow line with shadow
|
|
381
|
-
if (hasGlow) {
|
|
382
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
383
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
384
|
-
style: {
|
|
385
|
-
position: 'absolute',
|
|
386
|
-
left: centerX - length / 2,
|
|
387
|
-
top: centerY - strokeWidth / 2,
|
|
388
|
-
width: length,
|
|
389
|
-
height: strokeWidth,
|
|
390
|
-
backgroundColor: glowColor,
|
|
391
|
-
opacity: 0.5,
|
|
392
|
-
transform: [{
|
|
393
|
-
rotate: `${totalRotation}deg`
|
|
394
|
-
}],
|
|
395
|
-
borderRadius: strokeWidth / 2,
|
|
396
|
-
// Shadow creates the glow
|
|
397
|
-
shadowColor: glowColor,
|
|
398
|
-
shadowOffset: {
|
|
399
|
-
width: 0,
|
|
400
|
-
height: 0
|
|
401
|
-
},
|
|
402
|
-
shadowOpacity: 0.9,
|
|
403
|
-
shadowRadius: 8
|
|
404
|
-
}
|
|
405
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
406
|
-
style: style
|
|
407
|
-
})]
|
|
408
|
-
});
|
|
409
|
-
}
|
|
410
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
411
|
-
style: style
|
|
412
|
-
});
|
|
413
|
-
};
|
|
414
|
-
|
|
415
|
-
/**
|
|
416
|
-
* IconTriangle - creates triangles using CSS border trick
|
|
417
|
-
* Works in pure React Native!
|
|
418
|
-
*/
|
|
419
|
-
exports.IconLine = IconLine;
|
|
420
|
-
const IconTriangle = ({
|
|
421
|
-
x,
|
|
422
|
-
y,
|
|
423
|
-
size,
|
|
424
|
-
direction,
|
|
425
|
-
fill,
|
|
426
|
-
opacity = 1,
|
|
427
|
-
rotation
|
|
428
|
-
}) => {
|
|
429
|
-
// CSS border trick: use transparent borders to create triangle
|
|
430
|
-
// The size is the height of the triangle
|
|
431
|
-
const halfWidth = size * 0.577; // size / sqrt(3) for equilateral-ish triangle
|
|
432
|
-
|
|
433
|
-
// Build border styles based on direction
|
|
434
|
-
let borderStyles = {};
|
|
435
|
-
let offsetX = 0;
|
|
436
|
-
let offsetY = 0;
|
|
437
|
-
switch (direction) {
|
|
438
|
-
case 'down':
|
|
439
|
-
borderStyles = {
|
|
440
|
-
borderLeftWidth: halfWidth,
|
|
441
|
-
borderRightWidth: halfWidth,
|
|
442
|
-
borderTopWidth: size,
|
|
443
|
-
borderLeftColor: 'transparent',
|
|
444
|
-
borderRightColor: 'transparent',
|
|
445
|
-
borderTopColor: fill
|
|
446
|
-
};
|
|
447
|
-
offsetX = -halfWidth;
|
|
448
|
-
offsetY = 0;
|
|
449
|
-
break;
|
|
450
|
-
case 'up':
|
|
451
|
-
borderStyles = {
|
|
452
|
-
borderLeftWidth: halfWidth,
|
|
453
|
-
borderRightWidth: halfWidth,
|
|
454
|
-
borderBottomWidth: size,
|
|
455
|
-
borderLeftColor: 'transparent',
|
|
456
|
-
borderRightColor: 'transparent',
|
|
457
|
-
borderBottomColor: fill
|
|
458
|
-
};
|
|
459
|
-
offsetX = -halfWidth;
|
|
460
|
-
offsetY = -size;
|
|
461
|
-
break;
|
|
462
|
-
case 'left':
|
|
463
|
-
borderStyles = {
|
|
464
|
-
borderTopWidth: halfWidth,
|
|
465
|
-
borderBottomWidth: halfWidth,
|
|
466
|
-
borderRightWidth: size,
|
|
467
|
-
borderTopColor: 'transparent',
|
|
468
|
-
borderBottomColor: 'transparent',
|
|
469
|
-
borderRightColor: fill
|
|
470
|
-
};
|
|
471
|
-
offsetX = -size;
|
|
472
|
-
offsetY = -halfWidth;
|
|
473
|
-
break;
|
|
474
|
-
case 'right':
|
|
475
|
-
borderStyles = {
|
|
476
|
-
borderTopWidth: halfWidth,
|
|
477
|
-
borderBottomWidth: halfWidth,
|
|
478
|
-
borderLeftWidth: size,
|
|
479
|
-
borderTopColor: 'transparent',
|
|
480
|
-
borderBottomColor: 'transparent',
|
|
481
|
-
borderLeftColor: fill
|
|
482
|
-
};
|
|
483
|
-
offsetX = 0;
|
|
484
|
-
offsetY = -halfWidth;
|
|
485
|
-
break;
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
// Build transforms
|
|
489
|
-
const transforms = [];
|
|
490
|
-
if (rotation !== undefined) {
|
|
491
|
-
transforms.push({
|
|
492
|
-
rotate: `${rotation}deg`
|
|
493
|
-
});
|
|
494
|
-
}
|
|
495
|
-
const style = {
|
|
496
|
-
position: 'absolute',
|
|
497
|
-
left: x + offsetX,
|
|
498
|
-
top: y + offsetY,
|
|
499
|
-
width: 0,
|
|
500
|
-
height: 0,
|
|
501
|
-
opacity,
|
|
502
|
-
...borderStyles,
|
|
503
|
-
transform: transforms.length > 0 ? transforms : undefined
|
|
504
|
-
};
|
|
505
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
506
|
-
style: style
|
|
507
|
-
});
|
|
508
|
-
};
|
|
509
|
-
|
|
510
|
-
/**
|
|
511
|
-
* IconArc - draws an arc using multiple line segments
|
|
512
|
-
* Creates smooth curves in pure React Native!
|
|
513
|
-
*/
|
|
514
|
-
exports.IconTriangle = IconTriangle;
|
|
515
|
-
const IconArc = ({
|
|
516
|
-
cx,
|
|
517
|
-
cy,
|
|
518
|
-
r,
|
|
519
|
-
startAngle,
|
|
520
|
-
endAngle,
|
|
521
|
-
stroke,
|
|
522
|
-
strokeWidth = 1.5,
|
|
523
|
-
opacity = 1,
|
|
524
|
-
segments
|
|
525
|
-
}) => {
|
|
526
|
-
// Calculate number of segments based on arc length
|
|
527
|
-
const arcLength = Math.abs(endAngle - startAngle);
|
|
528
|
-
const autoSegments = Math.max(8, Math.ceil(arcLength / 10)); // ~10 degrees per segment
|
|
529
|
-
const numSegments = segments ?? autoSegments;
|
|
530
|
-
|
|
531
|
-
// Generate line segments
|
|
532
|
-
const lines = [];
|
|
533
|
-
const angleStep = (endAngle - startAngle) / numSegments;
|
|
534
|
-
for (let i = 0; i < numSegments; i++) {
|
|
535
|
-
const angle1 = startAngle + i * angleStep;
|
|
536
|
-
const angle2 = startAngle + (i + 1) * angleStep;
|
|
537
|
-
|
|
538
|
-
// Convert to radians
|
|
539
|
-
const rad1 = angle1 * Math.PI / 180;
|
|
540
|
-
const rad2 = angle2 * Math.PI / 180;
|
|
541
|
-
|
|
542
|
-
// Calculate segment endpoints
|
|
543
|
-
const x1 = cx + r * Math.cos(rad1);
|
|
544
|
-
const y1 = cy + r * Math.sin(rad1);
|
|
545
|
-
const x2 = cx + r * Math.cos(rad2);
|
|
546
|
-
const y2 = cy + r * Math.sin(rad2);
|
|
547
|
-
|
|
548
|
-
// Calculate segment geometry
|
|
549
|
-
const dx = x2 - x1;
|
|
550
|
-
const dy = y2 - y1;
|
|
551
|
-
const length = Math.sqrt(dx * dx + dy * dy);
|
|
552
|
-
const angle = Math.atan2(dy, dx) * (180 / Math.PI);
|
|
553
|
-
const midX = (x1 + x2) / 2;
|
|
554
|
-
const midY = (y1 + y2) / 2;
|
|
555
|
-
const style = {
|
|
556
|
-
position: 'absolute',
|
|
557
|
-
left: midX - length / 2,
|
|
558
|
-
top: midY - strokeWidth / 2,
|
|
559
|
-
width: length,
|
|
560
|
-
height: strokeWidth,
|
|
561
|
-
backgroundColor: stroke,
|
|
562
|
-
opacity,
|
|
563
|
-
transform: [{
|
|
564
|
-
rotate: `${angle}deg`
|
|
565
|
-
}],
|
|
566
|
-
borderRadius: strokeWidth / 2
|
|
567
|
-
};
|
|
568
|
-
lines.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
569
|
-
style: style
|
|
570
|
-
}, i));
|
|
571
|
-
}
|
|
572
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
573
|
-
children: lines
|
|
574
|
-
});
|
|
575
|
-
};
|
|
576
|
-
|
|
577
|
-
/**
|
|
578
|
-
* IconSemicircle - creates a half circle (filled)
|
|
579
|
-
* Perfect for pokeball-style split designs!
|
|
580
|
-
*/
|
|
581
|
-
exports.IconArc = IconArc;
|
|
582
|
-
const IconSemicircle = ({
|
|
583
|
-
cx,
|
|
584
|
-
cy,
|
|
585
|
-
r,
|
|
586
|
-
half,
|
|
587
|
-
fill,
|
|
588
|
-
borderColor,
|
|
589
|
-
borderWidth = 0,
|
|
590
|
-
opacity = 1,
|
|
591
|
-
glowColor,
|
|
592
|
-
glowRadius = 0
|
|
593
|
-
}) => {
|
|
594
|
-
const diameter = r * 2;
|
|
595
|
-
|
|
596
|
-
// Calculate position and border radii based on which half
|
|
597
|
-
let left;
|
|
598
|
-
let top;
|
|
599
|
-
let width;
|
|
600
|
-
let height;
|
|
601
|
-
let borderTopLeftRadius = 0;
|
|
602
|
-
let borderTopRightRadius = 0;
|
|
603
|
-
let borderBottomLeftRadius = 0;
|
|
604
|
-
let borderBottomRightRadius = 0;
|
|
605
|
-
switch (half) {
|
|
606
|
-
case 'top':
|
|
607
|
-
left = cx - r;
|
|
608
|
-
top = cy - r;
|
|
609
|
-
width = diameter;
|
|
610
|
-
height = r;
|
|
611
|
-
borderTopLeftRadius = r;
|
|
612
|
-
borderTopRightRadius = r;
|
|
613
|
-
break;
|
|
614
|
-
case 'bottom':
|
|
615
|
-
left = cx - r;
|
|
616
|
-
top = cy;
|
|
617
|
-
width = diameter;
|
|
618
|
-
height = r;
|
|
619
|
-
borderBottomLeftRadius = r;
|
|
620
|
-
borderBottomRightRadius = r;
|
|
621
|
-
break;
|
|
622
|
-
case 'left':
|
|
623
|
-
left = cx - r;
|
|
624
|
-
top = cy - r;
|
|
625
|
-
width = r;
|
|
626
|
-
height = diameter;
|
|
627
|
-
borderTopLeftRadius = r;
|
|
628
|
-
borderBottomLeftRadius = r;
|
|
629
|
-
break;
|
|
630
|
-
case 'right':
|
|
631
|
-
left = cx;
|
|
632
|
-
top = cy - r;
|
|
633
|
-
width = r;
|
|
634
|
-
height = diameter;
|
|
635
|
-
borderTopRightRadius = r;
|
|
636
|
-
borderBottomRightRadius = r;
|
|
637
|
-
break;
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
// Check if this is a "transparent" element (border-only)
|
|
641
|
-
// RN shadows require backgroundColor, so we need a separate glow layer
|
|
642
|
-
const hasGlow = glowColor && glowRadius > 0;
|
|
643
|
-
const needsSeparateGlow = hasGlow && (!fill || fill === 'transparent');
|
|
644
|
-
const hasFillForShadow = fill && fill !== 'transparent';
|
|
645
|
-
const style = {
|
|
646
|
-
position: 'absolute',
|
|
647
|
-
left,
|
|
648
|
-
top,
|
|
649
|
-
width,
|
|
650
|
-
height,
|
|
651
|
-
borderTopLeftRadius,
|
|
652
|
-
borderTopRightRadius,
|
|
653
|
-
borderBottomLeftRadius,
|
|
654
|
-
borderBottomRightRadius,
|
|
655
|
-
backgroundColor: fill,
|
|
656
|
-
borderColor,
|
|
657
|
-
borderWidth,
|
|
658
|
-
opacity,
|
|
659
|
-
// Only apply shadow if we have a fill (RN shadows need backgroundColor)
|
|
660
|
-
...(hasGlow && hasFillForShadow && {
|
|
661
|
-
shadowColor: glowColor,
|
|
662
|
-
shadowOffset: {
|
|
663
|
-
width: 0,
|
|
664
|
-
height: 0
|
|
665
|
-
},
|
|
666
|
-
shadowOpacity: 0.9,
|
|
667
|
-
shadowRadius: glowRadius * 0.8
|
|
668
|
-
})
|
|
669
|
-
};
|
|
670
|
-
|
|
671
|
-
// For border-only elements, render a glow semicircle with shadow
|
|
672
|
-
if (needsSeparateGlow) {
|
|
673
|
-
const strokeW = borderWidth || 1;
|
|
674
|
-
const glowExpand = strokeW;
|
|
675
|
-
const glowR = r + glowExpand;
|
|
676
|
-
const glowWidth = half === 'left' || half === 'right' ? glowR : glowR * 2;
|
|
677
|
-
const glowHeight = half === 'top' || half === 'bottom' ? glowR : glowR * 2;
|
|
678
|
-
const glowLeft = cx - (half === 'right' ? 0 : glowR);
|
|
679
|
-
const glowTop = cy - (half === 'bottom' ? 0 : glowR);
|
|
680
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
681
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
682
|
-
style: {
|
|
683
|
-
position: 'absolute',
|
|
684
|
-
left: glowLeft,
|
|
685
|
-
top: glowTop,
|
|
686
|
-
width: glowWidth,
|
|
687
|
-
height: glowHeight,
|
|
688
|
-
borderTopLeftRadius: half === 'top' || half === 'left' ? glowR : 0,
|
|
689
|
-
borderTopRightRadius: half === 'top' || half === 'right' ? glowR : 0,
|
|
690
|
-
borderBottomLeftRadius: half === 'bottom' || half === 'left' ? glowR : 0,
|
|
691
|
-
borderBottomRightRadius: half === 'bottom' || half === 'right' ? glowR : 0,
|
|
692
|
-
borderWidth: strokeW * 2,
|
|
693
|
-
borderColor: glowColor,
|
|
694
|
-
opacity: 0.4,
|
|
695
|
-
shadowColor: glowColor,
|
|
696
|
-
shadowOffset: {
|
|
697
|
-
width: 0,
|
|
698
|
-
height: 0
|
|
699
|
-
},
|
|
700
|
-
shadowOpacity: 0.8,
|
|
701
|
-
shadowRadius: strokeW * 4
|
|
702
|
-
}
|
|
703
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
704
|
-
style: style
|
|
705
|
-
})]
|
|
706
|
-
});
|
|
707
|
-
}
|
|
708
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
709
|
-
style: style
|
|
710
|
-
});
|
|
711
|
-
};
|
|
712
|
-
|
|
713
|
-
/**
|
|
714
|
-
* IconSmoothArc - creates a smooth arc using the border trick
|
|
715
|
-
* Uses bordered circles with partial borders hidden - gives perfect anti-aliased curves!
|
|
716
|
-
* This is how the WiFi icon achieves smooth lines without dots.
|
|
717
|
-
*/
|
|
718
|
-
exports.IconSemicircle = IconSemicircle;
|
|
719
|
-
const IconSmoothArc = ({
|
|
720
|
-
cx,
|
|
721
|
-
cy,
|
|
722
|
-
r,
|
|
723
|
-
stroke,
|
|
724
|
-
strokeWidth = 2,
|
|
725
|
-
opacity = 1,
|
|
726
|
-
portion = 'bottom'
|
|
727
|
-
}) => {
|
|
728
|
-
const diameter = r * 2;
|
|
729
|
-
|
|
730
|
-
// Build border colors based on which portion to show
|
|
731
|
-
let borderTopColor = stroke;
|
|
732
|
-
let borderBottomColor = stroke;
|
|
733
|
-
let borderLeftColor = stroke;
|
|
734
|
-
let borderRightColor = stroke;
|
|
735
|
-
switch (portion) {
|
|
736
|
-
case 'bottom':
|
|
737
|
-
// Show bottom arc (hide top, left, right)
|
|
738
|
-
borderTopColor = 'transparent';
|
|
739
|
-
borderLeftColor = 'transparent';
|
|
740
|
-
borderRightColor = 'transparent';
|
|
741
|
-
break;
|
|
742
|
-
case 'top':
|
|
743
|
-
// Show top arc (hide bottom, left, right)
|
|
744
|
-
borderBottomColor = 'transparent';
|
|
745
|
-
borderLeftColor = 'transparent';
|
|
746
|
-
borderRightColor = 'transparent';
|
|
747
|
-
break;
|
|
748
|
-
case 'left':
|
|
749
|
-
// Show left arc (hide top, bottom, right)
|
|
750
|
-
borderTopColor = 'transparent';
|
|
751
|
-
borderBottomColor = 'transparent';
|
|
752
|
-
borderRightColor = 'transparent';
|
|
753
|
-
break;
|
|
754
|
-
case 'right':
|
|
755
|
-
// Show right arc (hide top, bottom, left)
|
|
756
|
-
borderTopColor = 'transparent';
|
|
757
|
-
borderBottomColor = 'transparent';
|
|
758
|
-
borderLeftColor = 'transparent';
|
|
759
|
-
break;
|
|
760
|
-
}
|
|
761
|
-
const style = {
|
|
762
|
-
position: 'absolute',
|
|
763
|
-
left: cx - r,
|
|
764
|
-
top: cy - r,
|
|
765
|
-
width: diameter,
|
|
766
|
-
height: diameter,
|
|
767
|
-
borderRadius: r,
|
|
768
|
-
borderWidth: strokeWidth,
|
|
769
|
-
borderTopColor,
|
|
770
|
-
borderBottomColor,
|
|
771
|
-
borderLeftColor,
|
|
772
|
-
borderRightColor,
|
|
773
|
-
opacity
|
|
774
|
-
};
|
|
775
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
776
|
-
style: style
|
|
777
|
-
});
|
|
778
|
-
};
|
|
779
|
-
exports.IconSmoothArc = IconSmoothArc;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.IconTriangle=exports.IconSmoothArc=exports.IconSemicircle=exports.IconRect=exports.IconLine=exports.IconContainer=exports.IconCircle=exports.IconArc=void 0;var _reactNative=require("react-native"),_jsxRuntime=require("react/jsx-runtime");const IconContainer=({size:t,children:o})=>{const e={position:"relative",width:t,height:t};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:e,children:o})};exports.IconContainer=IconContainer;const IconCircle=({cx:t,cy:o,r:e,fill:r,borderColor:i,borderWidth:s=0,opacity:a=1,scaleX:n=1,scaleY:d=1,glowColor:c,glowRadius:h=0})=>{const l=2*e,p=[];1!==n&&p.push({scaleX:n}),1!==d&&p.push({scaleY:d});const u=c&&h>0&&(!r||"transparent"===r),b=r&&"transparent"!==r,x={position:"absolute",left:t-e,top:o-e,width:l,height:l,borderRadius:e,backgroundColor:r,borderColor:i,borderWidth:s,opacity:a,transform:p.length>0?p:void 0,...c&&h>0&&b&&{shadowColor:c,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:.8*h}};if(u){const r=s||1;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:t-e,top:o-e,width:2*e,height:2*e,borderRadius:e,backgroundColor:"#000",borderWidth:r,borderColor:c,opacity:.5,transform:p.length>0?p:void 0,shadowColor:c,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:8}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:x})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:x})};exports.IconCircle=IconCircle;const IconRect=({x:t,y:o,width:e,height:r,fill:i,borderColor:s,borderWidth:a=0,borderRadius:n=0,opacity:d=1,glowColor:c,glowRadius:h=0,rotation:l,originX:p=.5,originY:u=.5})=>{const b=[];if(void 0!==l){const t=(.5-p)*e,o=(.5-u)*r;0===t&&0===o||(b.push({translateX:-t}),b.push({translateY:-o})),b.push({rotate:`${l}deg`}),0===t&&0===o||(b.push({translateX:t}),b.push({translateY:o}))}const x=c&&h>0,g=x&&(!i||"transparent"===i),w=i&&"transparent"!==i,m={position:"absolute",left:t,top:o,width:e,height:r,borderRadius:n,backgroundColor:i,borderColor:s,borderWidth:a,opacity:d,transform:b.length>0?b:void 0,...x&&w&&{shadowColor:c,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:.8*h}};if(g){const i=a||1,s=i;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:t-s,top:o-s,width:e+2*s,height:r+2*s,borderRadius:n+s,borderWidth:2*i,borderColor:c,opacity:.4,transform:b.length>0?b:void 0,shadowColor:c,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4*i}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:m})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:m})};function getQuadraticBezierPoint(t,o,e,r,i,s,a){const n=1-t;return{x:n*n*o+2*n*t*r+t*t*s,y:n*n*e+2*n*t*i+t*t*a}}function getCubicBezierPoint(t,o,e,r,i,s,a,n,d){const c=1-t,h=c*c,l=h*c,p=t*t,u=p*t;return{x:l*o+3*h*t*r+3*c*p*s+u*n,y:l*e+3*h*t*i+3*c*p*a+u*d}}exports.IconRect=IconRect;const IconLine=({x1:t,y1:o,x2:e,y2:r,stroke:i,strokeWidth:s=1,opacity:a=1,glowColor:n,glowRadius:d=0,rotation:c=0,curveX:h,curveY:l,curve2X:p,curve2Y:u})=>{const b=void 0!==h&&0!==h||void 0!==l&&0!==l,x=void 0!==p&&0!==p||void 0!==u&&0!==u;if(b||x){const n=(t+e)/2,d=(o+r)/2,c=n+(h??0),g=d+(l??0),w=n+(p??0),m=d+(u??0),R=b&&x;let f=0;const y=20;let j={x:t,y:o};for(let i=1;i<=y;i++){const s=i/y,a=R?getCubicBezierPoint(s,t,o,c,g,w,m,e,r):getQuadraticBezierPoint(s,t,o,b?c:w,b?g:m,e,r);f+=Math.sqrt((a.x-j.x)**2+(a.y-j.y)**2),j=a}const C=[],_=Math.max(.05,.02*s),v=Math.max(100,Math.ceil(f/_));for(let n=0;n<=v;n++){const d=n/v,h=R?getCubicBezierPoint(d,t,o,c,g,w,m,e,r):getQuadraticBezierPoint(d,t,o,b?c:w,b?g:m,e,r),l={position:"absolute",left:h.x-s/2,top:h.y-s/2,width:s,height:s,borderRadius:s/2,backgroundColor:i,opacity:a};C.push((0,_jsxRuntime.jsx)(_reactNative.View,{style:l},`c${n}`))}return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:C})}const g=e-t,w=r-o,m=Math.sqrt(g*g+w*w),R=(t+e)/2,f=(o+r)/2,y=Math.atan2(w,g)*(180/Math.PI)+c,j={position:"absolute",left:R-m/2,top:f-s/2,width:m,height:s,backgroundColor:i,opacity:a,transform:[{rotate:`${y}deg`}],borderRadius:s/2};return n&&d>0?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:R-m/2,top:f-s/2,width:m,height:s,backgroundColor:n,opacity:.5,transform:[{rotate:`${y}deg`}],borderRadius:s/2,shadowColor:n,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:8}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:j})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:j})};exports.IconLine=IconLine;const IconTriangle=({x:t,y:o,size:e,direction:r,fill:i,opacity:s=1,rotation:a})=>{const n=.577*e;let d={},c=0,h=0;switch(r){case"down":d={borderLeftWidth:n,borderRightWidth:n,borderTopWidth:e,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:i},c=-n,h=0;break;case"up":d={borderLeftWidth:n,borderRightWidth:n,borderBottomWidth:e,borderLeftColor:"transparent",borderRightColor:"transparent",borderBottomColor:i},c=-n,h=-e;break;case"left":d={borderTopWidth:n,borderBottomWidth:n,borderRightWidth:e,borderTopColor:"transparent",borderBottomColor:"transparent",borderRightColor:i},c=-e,h=-n;break;case"right":d={borderTopWidth:n,borderBottomWidth:n,borderLeftWidth:e,borderTopColor:"transparent",borderBottomColor:"transparent",borderLeftColor:i},c=0,h=-n}const l=[];void 0!==a&&l.push({rotate:`${a}deg`});const p={position:"absolute",left:t+c,top:o+h,width:0,height:0,opacity:s,...d,transform:l.length>0?l:void 0};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:p})};exports.IconTriangle=IconTriangle;const IconArc=({cx:t,cy:o,r:e,startAngle:r,endAngle:i,stroke:s,strokeWidth:a=1.5,opacity:n=1,segments:d})=>{const c=Math.abs(i-r),h=Math.max(8,Math.ceil(c/10)),l=d??h,p=[],u=(i-r)/l;for(let i=0;i<l;i++){const d=r+(i+1)*u,c=(r+i*u)*Math.PI/180,h=d*Math.PI/180,l=t+e*Math.cos(c),b=o+e*Math.sin(c),x=t+e*Math.cos(h),g=o+e*Math.sin(h),w=x-l,m=g-b,R=Math.sqrt(w*w+m*m),f={position:"absolute",left:(l+x)/2-R/2,top:(b+g)/2-a/2,width:R,height:a,backgroundColor:s,opacity:n,transform:[{rotate:Math.atan2(m,w)*(180/Math.PI)+"deg"}],borderRadius:a/2};p.push((0,_jsxRuntime.jsx)(_reactNative.View,{style:f},i))}return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:p})};exports.IconArc=IconArc;const IconSemicircle=({cx:t,cy:o,r:e,half:r,fill:i,borderColor:s,borderWidth:a=0,opacity:n=1,glowColor:d,glowRadius:c=0})=>{const h=2*e;let l,p,u,b,x=0,g=0,w=0,m=0;switch(r){case"top":l=t-e,p=o-e,u=h,b=e,x=e,g=e;break;case"bottom":l=t-e,p=o,u=h,b=e,w=e,m=e;break;case"left":l=t-e,p=o-e,u=e,b=h,x=e,w=e;break;case"right":l=t,p=o-e,u=e,b=h,g=e,m=e}const R=d&&c>0,f={position:"absolute",left:l,top:p,width:u,height:b,borderTopLeftRadius:x,borderTopRightRadius:g,borderBottomLeftRadius:w,borderBottomRightRadius:m,backgroundColor:i,borderColor:s,borderWidth:a,opacity:n,...R&&i&&"transparent"!==i&&{shadowColor:d,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:.8*c}};if(R&&(!i||"transparent"===i)){const i=a||1,s=e+i,n="left"===r||"right"===r?s:2*s,c="top"===r||"bottom"===r?s:2*s,h=t-("right"===r?0:s),l=o-("bottom"===r?0:s);return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:h,top:l,width:n,height:c,borderTopLeftRadius:"top"===r||"left"===r?s:0,borderTopRightRadius:"top"===r||"right"===r?s:0,borderBottomLeftRadius:"bottom"===r||"left"===r?s:0,borderBottomRightRadius:"bottom"===r||"right"===r?s:0,borderWidth:2*i,borderColor:d,opacity:.4,shadowColor:d,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4*i}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:f})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:f})};exports.IconSemicircle=IconSemicircle;const IconSmoothArc=({cx:t,cy:o,r:e,stroke:r,strokeWidth:i=2,opacity:s=1,portion:a="bottom"})=>{const n=2*e;let d=r,c=r,h=r,l=r;switch(a){case"bottom":d="transparent",h="transparent",l="transparent";break;case"top":c="transparent",h="transparent",l="transparent";break;case"left":d="transparent",c="transparent",l="transparent";break;case"right":d="transparent",c="transparent",h="transparent"}const p={position:"absolute",left:t-e,top:o-e,width:n,height:n,borderRadius:e,borderWidth:i,borderTopColor:d,borderBottomColor:c,borderLeftColor:h,borderRightColor:l,opacity:s};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:p})};exports.IconSmoothArc=IconSmoothArc;
|