canvu-react 0.3.29 → 0.3.31

package/dist/react.cjs

@@ -181,6 +181,8 @@ __export(shape_builders_exports, {
   DEFAULT_TEXT_FONT_SIZE: () => DEFAULT_TEXT_FONT_SIZE,
   applyStrokeToItem: () => applyStrokeToItem,
   applyTextDraftWhileEditing: () => applyTextDraftWhileEditing,
+  buildArchitecturalCloudPathD: () => buildArchitecturalCloudPathD,
+  buildArchitecturalCloudSvg: () => buildArchitecturalCloudSvg,
   buildArrowSvg: () => buildArrowSvg,
   buildDrawDotSvg: () => buildDrawDotSvg,
   buildEllipseSvg: () => buildEllipseSvg,
@@ -192,6 +194,7 @@ __export(shape_builders_exports, {
   buildTextSvg: () => buildTextSvg,
   computeFreehandSvgPayload: () => computeFreehandSvgPayload,
   computeStraightArrowGeometry: () => computeStraightArrowGeometry,
+  createArchitecturalCloudItem: () => createArchitecturalCloudItem,
   createDrawDotItem: () => createDrawDotItem,
   createEllipseItem: () => createEllipseItem,
   createFreehandStrokeItem: () => createFreehandStrokeItem,
@@ -283,6 +286,22 @@ function resolveStrokeStyle(item) {
 function strokeOpacityAttr(style) {
   return style.strokeOpacity != null ? ` stroke-opacity="${style.strokeOpacity}"` : "";
 }
+function svgNumber(value) {
+  if (!Number.isFinite(value)) return "0";
+  const rounded = Math.round(value * 100) / 100;
+  return Number.isInteger(rounded) ? String(rounded) : String(rounded);
+}
+function approximateEllipsePerimeter(rx, ry) {
+  if (rx <= 0 || ry <= 0) return 0;
+  return Math.PI * (3 * (rx + ry) - Math.sqrt((3 * rx + ry) * (rx + 3 * ry)));
+}
+function architecturalCloudScallopCount(rx, ry, amplitude) {
+  const perimeter = approximateEllipsePerimeter(rx, ry);
+  const targetScallopLength = Math.max(10, amplitude * 2);
+  let count = Math.max(12, Math.round(perimeter / targetScallopLength));
+  if (count % 2 === 1) count += 1;
+  return count;
+}
 function buildRectSvg(width, height, style = DEFAULT_STROKE_STYLE) {
   return `<rect width="${width}" height="${height}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" rx="4"${strokeOpacityAttr(style)} />`;
 }
@@ -291,6 +310,49 @@ function buildEllipseSvg(width, height, style = DEFAULT_STROKE_STYLE) {
   const ry = height / 2;
   return `<ellipse cx="${rx}" cy="${ry}" rx="${rx}" ry="${ry}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}"${strokeOpacityAttr(style)} />`;
 }
+function buildArchitecturalCloudPathD(width, height, strokeWidth = DEFAULT_STROKE_STYLE.strokeWidth) {
+  const w = Math.max(0, width);
+  const h = Math.max(0, height);
+  if (w <= 0 || h <= 0) return "";
+  const inset = Math.max(0.5, strokeWidth / 2);
+  const outerRx = Math.max(0, w / 2 - inset);
+  const outerRy = Math.max(0, h / 2 - inset);
+  if (outerRx <= 0 || outerRy <= 0) return "";
+  const amplitude = Math.min(
+    outerRx * 0.45,
+    outerRy * 0.45,
+    Math.max(2, Math.min(8, Math.min(w, h) * 0.04))
+  );
+  const innerRx = Math.max(0, outerRx - amplitude);
+  const innerRy = Math.max(0, outerRy - amplitude);
+  const scallopCount = architecturalCloudScallopCount(innerRx, innerRy, amplitude);
+  const angleStep = Math.PI * 2 / scallopCount;
+  const cx = w / 2;
+  const cy = h / 2;
+  const startAngle = -Math.PI / 2;
+  const pointOnEllipse = (theta, radiusX, radiusY) => [
+    cx + Math.cos(theta) * radiusX,
+    cy + Math.sin(theta) * radiusY
+  ];
+  const [startX, startY] = pointOnEllipse(startAngle, innerRx, innerRy);
+  const segments = [`M${svgNumber(startX)} ${svgNumber(startY)}`];
+  for (let index = 0; index < scallopCount; index += 1) {
+    const segmentStart = startAngle + index * angleStep;
+    const segmentMid = segmentStart + angleStep / 2;
+    const segmentEnd = segmentStart + angleStep;
+    const [controlX, controlY] = pointOnEllipse(segmentMid, outerRx, outerRy);
+    const [endX, endY] = pointOnEllipse(segmentEnd, innerRx, innerRy);
+    segments.push(
+      `Q${svgNumber(controlX)} ${svgNumber(controlY)} ${svgNumber(endX)} ${svgNumber(endY)}`
+    );
+  }
+  segments.push("Z");
+  return segments.join(" ");
+}
+function buildArchitecturalCloudSvg(width, height, style = DEFAULT_STROKE_STYLE) {
+  const d = buildArchitecturalCloudPathD(width, height, style.strokeWidth);
+  return `<path d="${d}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" stroke-linecap="round" stroke-linejoin="round"${strokeOpacityAttr(style)} />`;
+}
 function buildLineSvg(line, style = DEFAULT_STROKE_STYLE) {
   return `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${style.stroke}" stroke-width="${style.strokeWidth}"${strokeOpacityAttr(style)} />`;
 }
@@ -433,6 +495,13 @@ function rebuildItemSvg(item) {
       childrenSvg: buildEllipseSvg(b.width, b.height, style)
     };
   }
+  if (k === "architectural-cloud") {
+    const b = normalizeRect(item.bounds);
+    return {
+      ...item,
+      childrenSvg: buildArchitecturalCloudSvg(b.width, b.height, style)
+    };
+  }
   if ((k === "line" || k === "arrow") && item.line) {
     const line = item.line;
     const childrenSvg = k === "arrow" ? buildArrowSvg(item.id, line, style) : buildLineSvg(line, style);
@@ -545,6 +614,21 @@ function createEllipseItem(id, bounds, style) {
     childrenSvg: ""
   });
 }
+function createArchitecturalCloudItem(id, bounds, style) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "architectural-cloud",
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
 function createLineItem(id, bounds, line, toolKind, style, arrowBind) {
   const r = normalizeRect(bounds);
   const s = { ...DEFAULT_STROKE_STYLE, ...style };
@@ -3019,6 +3103,7 @@ function ShapeContextMenu({
   }
   return reactDom.createPortal(menu, document.body);
 }
+var architecturalCloudIconPath = "M12 8.28 Q14.33 7.17 15.86 8.78 Q18.36 8.46 18.69 10.14 Q20.69 10.71 19.72 12 Q20.69 13.29 18.69 13.86 Q18.36 15.54 15.86 15.22 Q14.33 16.83 12 15.72 Q9.67 16.83 8.14 15.22 Q5.64 15.54 5.31 13.86 Q3.31 13.29 4.28 12 Q3.31 10.71 5.31 10.14 Q5.64 8.46 8.14 8.78 Q9.67 7.17 12 8.28 Z";
 var base = {
   width: 20,
   height: 20,
@@ -3049,6 +3134,9 @@ function IconRect(props) {
 function IconEllipse(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6" }) });
 }
+function IconArchitecturalCloud(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: architecturalCloudIconPath, transform: "translate(0 4)" }) });
+}
 function IconLine(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5" }) });
 }
@@ -3093,6 +3181,7 @@ var ic = { size: 20, strokeWidth: 2 };
 var DEFAULT_OVERFLOW_TOOL_IDS = [
   "rect",
   "ellipse",
+  "architectural-cloud",
   "line",
   "marker",
   "laser",
@@ -3123,6 +3212,13 @@ var DEFAULT_VECTOR_TOOLS = [
     icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { ...ic, "aria-hidden": true }),
     shortcutHint: "O"
   },
+  {
+    id: "architectural-cloud",
+    label: "Nuvem arquitetural",
+    tooltipLabel: "Architectural cloud",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(IconArchitecturalCloud, { "aria-hidden": true }),
+    shortcutHint: "C"
+  },
   {
     id: "line",
     label: "Line",
@@ -3200,7 +3296,7 @@ function normalizeHex(stroke) {
   return "#2563eb";
 }
 function isStylableKind(tk) {
-  return tk === "rect" || tk === "ellipse" || tk === "line" || tk === "arrow" || tk === "draw" || tk === "pencil" || tk === "brush" || tk === "marker" || tk === "text";
+  return tk === "rect" || tk === "ellipse" || tk === "architectural-cloud" || tk === "line" || tk === "arrow" || tk === "draw" || tk === "pencil" || tk === "brush" || tk === "marker" || tk === "text";
 }
 function VectorSelectionInspector({
   items: itemsProp,
@@ -4561,6 +4657,7 @@ var HandBinding = makeToolBinding("hand");
 var SelectBinding = makeToolBinding("select");
 var RectBinding = makeToolBinding("rect");
 var EllipseBinding = makeToolBinding("ellipse");
+var ArchitecturalCloudBinding = makeToolBinding("architectural-cloud");
 var LineBinding = makeToolBinding("line");
 var ArrowBinding = makeToolBinding("arrow");
 var DrawBinding = makeToolBinding("draw");
@@ -4580,6 +4677,7 @@ var VectorToolbar = Object.assign(
     Select: SelectBinding,
     Rect: RectBinding,
     Ellipse: EllipseBinding,
+    ArchitecturalCloud: ArchitecturalCloudBinding,
     Line: LineBinding,
     Arrow: ArrowBinding,
     Draw: DrawBinding,
@@ -5309,7 +5407,7 @@ function isArrowBindTarget(item) {
   if (item.locked) return false;
   const k = item.toolKind;
   if (!k) return false;
-  return k === "rect" || k === "ellipse" || k === "text" || k === "image" || k === "custom";
+  return k === "rect" || k === "ellipse" || k === "architectural-cloud" || k === "text" || k === "image" || k === "custom";
 }
 function closestPointOnShapeBoundaryLocal(item, lx, ly, w, h) {
   if (item.toolKind === "ellipse") {
@@ -5648,6 +5746,16 @@ function resizeItemByHandle(item, start, handle, currentWorld) {
       childrenSvg: buildEllipseSvg(nb.width, nb.height, style)
     };
   }
+  if (k === "architectural-cloud") {
+    const style = resolveStrokeStyle(item);
+    return {
+      ...item,
+      x: nb.x,
+      y: nb.y,
+      bounds: nb,
+      childrenSvg: buildArchitecturalCloudSvg(nb.width, nb.height, style)
+    };
+  }
   if (k === "text" && item.text !== void 0) {
     const sfw = Math.max(sb.width, 1e-6);
     const sfh = Math.max(sb.height, 1e-6);
@@ -6190,7 +6298,7 @@ function InteractionOverlay({
           vectorEffect: "non-scaling-stroke"
         }
       );
-    } else if (placementPreview.kind === "rect" || placementPreview.kind === "ellipse") {
+    } else if (placementPreview.kind === "rect" || placementPreview.kind === "ellipse" || placementPreview.kind === "architectural-cloud") {
       const r = normalizeRect(placementPreview.rect);
       preview = placementPreview.kind === "rect" ? /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
@@ -6205,7 +6313,7 @@ function InteractionOverlay({
           strokeDasharray: dashPattern,
           vectorEffect: "non-scaling-stroke"
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
+      ) : placementPreview.kind === "ellipse" ? /* @__PURE__ */ jsxRuntime.jsx(
         "ellipse",
         {
           cx: r.x + r.width / 2,
@@ -6218,7 +6326,19 @@ function InteractionOverlay({
           strokeDasharray: dashPattern,
           vectorEffect: "non-scaling-stroke"
         }
-      );
+      ) : /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${r.x}, ${r.y})`, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: buildArchitecturalCloudPathD(r.width, r.height, overlayStrokePx),
+          fill: "none",
+          stroke: "#64748b",
+          strokeWidth: overlayStrokePx,
+          strokeDasharray: dashPattern,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          vectorEffect: "non-scaling-stroke"
+        }
+      ) });
     } else if (placementPreview.kind === "line" || placementPreview.kind === "arrow") {
       const { start, end } = placementPreview;
       const geometry = placementPreview.kind === "arrow" ? computeStraightArrowGeometry(
@@ -6791,6 +6911,7 @@ function cursorForVectorToolId(toolId) {
       return "default";
     case "rect":
     case "ellipse":
+    case "architectural-cloud":
     case "line":
     case "arrow":
       return "crosshair";
@@ -6841,7 +6962,7 @@ function replaceItem(items, id, next) {
 }
 function supportsResizeHandles(item) {
   const k = item?.toolKind;
-  if (k === "rect" || k === "ellipse" || k === "line" || k === "arrow" || k === "image" || k === "text") {
+  if (k === "rect" || k === "ellipse" || k === "architectural-cloud" || k === "line" || k === "arrow" || k === "image" || k === "text") {
     return true;
   }
   if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item?.pathPointsLocal && item.pathPointsLocal.length > 0) {
@@ -6898,6 +7019,9 @@ function defaultPlacementWorld(tool, center) {
   if (tool === "ellipse") {
     return { raw: { x: cx - 70, y: cy - 45, width: 140, height: 90 } };
   }
+  if (tool === "architectural-cloud") {
+    return { raw: { x: cx - 90, y: cy - 50, width: 180, height: 100 } };
+  }
   const a = { x: cx - 50, y: cy };
   const b = { x: cx + 50, y: cy };
   return {
@@ -8801,7 +8925,7 @@ var VectorViewport = react.forwardRef(
           return;
         }
         const cp = customPlacementRef.current;
-        if (tool === "rect" || tool === "ellipse" || tool === "line" || tool === "arrow" || cp && tool === cp.toolId) {
+        if (tool === "rect" || tool === "ellipse" || tool === "architectural-cloud" || tool === "line" || tool === "arrow" || cp && tool === cp.toolId) {
           dragStateRef.current = {
             kind: "place",
             tool,
@@ -9221,6 +9345,11 @@ var VectorViewport = react.forwardRef(
             setPlacementPreview({ kind: "rect", rect: rectFromCorners(a, b) });
           } else if (st.tool === "ellipse") {
             setPlacementPreview({ kind: "ellipse", rect: rectFromCorners(a, b) });
+          } else if (st.tool === "architectural-cloud") {
+            setPlacementPreview({
+              kind: "architectural-cloud",
+              rect: rectFromCorners(a, b)
+            });
           } else if (st.tool === "line") {
             setPlacementPreview({
               kind: "line",
@@ -9479,6 +9608,12 @@ var VectorViewport = react.forwardRef(
           } else if (st.tool === "ellipse") {
             change([...itemsRef.current, createEllipseItem(id, raw, pen)]);
             setEffectiveSelectedIdsRef.current([id]);
+          } else if (st.tool === "architectural-cloud") {
+            change([
+              ...itemsRef.current,
+              createArchitecturalCloudItem(id, raw, pen)
+            ]);
+            setEffectiveSelectedIdsRef.current([id]);
           } else if (st.tool === "line" || st.tool === "arrow") {
             const line = lineEndpointsToLocal(raw, lineA, lineB);
             change([
@@ -9800,6 +9935,7 @@ exports.CanvuPluginContext = CanvuPluginContext;
 exports.DEFAULT_OVERFLOW_TOOL_IDS = DEFAULT_OVERFLOW_TOOL_IDS;
 exports.DEFAULT_VECTOR_CANVAS_STORAGE_KEY = DEFAULT_VECTOR_CANVAS_STORAGE_KEY;
 exports.DEFAULT_VECTOR_TOOLS = DEFAULT_VECTOR_TOOLS;
+exports.IconArchitecturalCloud = IconArchitecturalCloud;
 exports.IconArrow = IconArrow;
 exports.IconDraw = IconDraw;
 exports.IconEllipse = IconEllipse;