canvu-react 0.3.31 → 0.3.32
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 +18 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +18 -8
- package/dist/index.js.map +1 -1
- package/dist/native.cjs +18 -8
- package/dist/native.cjs.map +1 -1
- package/dist/native.js +18 -8
- package/dist/native.js.map +1 -1
- package/dist/react.cjs +20 -10
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +20 -10
- package/dist/react.js.map +1 -1
- package/dist/realtime.cjs +2 -2
- package/dist/realtime.cjs.map +1 -1
- package/dist/realtime.js +2 -2
- package/dist/realtime.js.map +1 -1
- package/dist/tldraw.cjs +18 -8
- package/dist/tldraw.cjs.map +1 -1
- package/dist/tldraw.js +18 -8
- package/dist/tldraw.js.map +1 -1
- package/package.json +1 -1
package/dist/react.cjs
CHANGED
|
@@ -302,6 +302,14 @@ function architecturalCloudScallopCount(rx, ry, amplitude) {
|
|
|
302
302
|
if (count % 2 === 1) count += 1;
|
|
303
303
|
return count;
|
|
304
304
|
}
|
|
305
|
+
function pointOnSuperellipse(centerX, centerY, radiusX, radiusY, theta, exponent) {
|
|
306
|
+
const cosTheta = Math.cos(theta);
|
|
307
|
+
const sinTheta = Math.sin(theta);
|
|
308
|
+
return [
|
|
309
|
+
centerX + Math.sign(cosTheta) * radiusX * Math.abs(cosTheta) ** (2 / exponent),
|
|
310
|
+
centerY + Math.sign(sinTheta) * radiusY * Math.abs(sinTheta) ** (2 / exponent)
|
|
311
|
+
];
|
|
312
|
+
}
|
|
305
313
|
function buildRectSvg(width, height, style = DEFAULT_STROKE_STYLE) {
|
|
306
314
|
return `<rect width="${width}" height="${height}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" rx="4"${strokeOpacityAttr(style)} />`;
|
|
307
315
|
}
|
|
@@ -318,10 +326,11 @@ function buildArchitecturalCloudPathD(width, height, strokeWidth = DEFAULT_STROK
|
|
|
318
326
|
const outerRx = Math.max(0, w / 2 - inset);
|
|
319
327
|
const outerRy = Math.max(0, h / 2 - inset);
|
|
320
328
|
if (outerRx <= 0 || outerRy <= 0) return "";
|
|
329
|
+
const baseExponent = 3.6;
|
|
321
330
|
const amplitude = Math.min(
|
|
322
331
|
outerRx * 0.45,
|
|
323
332
|
outerRy * 0.45,
|
|
324
|
-
Math.max(2, Math.min(
|
|
333
|
+
Math.max(2, Math.min(7, Math.min(w, h) * 0.035))
|
|
325
334
|
);
|
|
326
335
|
const innerRx = Math.max(0, outerRx - amplitude);
|
|
327
336
|
const innerRy = Math.max(0, outerRy - amplitude);
|
|
@@ -330,18 +339,19 @@ function buildArchitecturalCloudPathD(width, height, strokeWidth = DEFAULT_STROK
|
|
|
330
339
|
const cx = w / 2;
|
|
331
340
|
const cy = h / 2;
|
|
332
341
|
const startAngle = -Math.PI / 2;
|
|
333
|
-
const
|
|
334
|
-
|
|
335
|
-
cy + Math.sin(theta) * radiusY
|
|
336
|
-
];
|
|
337
|
-
const [startX, startY] = pointOnEllipse(startAngle, innerRx, innerRy);
|
|
342
|
+
const pointOnArchitecturalCloud = (theta, radiusX, radiusY) => pointOnSuperellipse(cx, cy, radiusX, radiusY, theta, baseExponent);
|
|
343
|
+
const [startX, startY] = pointOnArchitecturalCloud(startAngle, innerRx, innerRy);
|
|
338
344
|
const segments = [`M${svgNumber(startX)} ${svgNumber(startY)}`];
|
|
339
345
|
for (let index = 0; index < scallopCount; index += 1) {
|
|
340
346
|
const segmentStart = startAngle + index * angleStep;
|
|
341
347
|
const segmentMid = segmentStart + angleStep / 2;
|
|
342
348
|
const segmentEnd = segmentStart + angleStep;
|
|
343
|
-
const [controlX, controlY] =
|
|
344
|
-
|
|
349
|
+
const [controlX, controlY] = pointOnArchitecturalCloud(
|
|
350
|
+
segmentMid,
|
|
351
|
+
outerRx,
|
|
352
|
+
outerRy
|
|
353
|
+
);
|
|
354
|
+
const [endX, endY] = pointOnArchitecturalCloud(segmentEnd, innerRx, innerRy);
|
|
345
355
|
segments.push(
|
|
346
356
|
`Q${svgNumber(controlX)} ${svgNumber(controlY)} ${svgNumber(endX)} ${svgNumber(endY)}`
|
|
347
357
|
);
|
|
@@ -3103,7 +3113,7 @@ function ShapeContextMenu({
|
|
|
3103
3113
|
}
|
|
3104
3114
|
return reactDom.createPortal(menu, document.body);
|
|
3105
3115
|
}
|
|
3106
|
-
var architecturalCloudIconPath = "
|
|
3116
|
+
var architecturalCloudIconPath = "M11 3 Q15.72 1.11 16.44 3.31 Q19.25 2.05 18.39 4.28 Q20.81 4.17 19 7 Q20.81 9.83 18.39 9.72 Q19.25 11.95 16.44 10.69 Q15.72 12.89 11 11 Q6.28 12.89 5.56 10.69 Q2.75 11.95 3.61 9.72 Q1.19 9.83 3 7 Q1.19 4.17 3.61 4.28 Q2.75 2.05 5.56 3.31 Q6.28 1.11 11 3 Z";
|
|
3107
3117
|
var base = {
|
|
3108
3118
|
width: 20,
|
|
3109
3119
|
height: 20,
|
|
@@ -3135,7 +3145,7 @@ function IconEllipse(props) {
|
|
|
3135
3145
|
return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6" }) });
|
|
3136
3146
|
}
|
|
3137
3147
|
function IconArchitecturalCloud(props) {
|
|
3138
|
-
return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: architecturalCloudIconPath, transform: "translate(
|
|
3148
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: architecturalCloudIconPath, transform: "translate(1 5)" }) });
|
|
3139
3149
|
}
|
|
3140
3150
|
function IconLine(props) {
|
|
3141
3151
|
return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5" }) });
|