canvu-react 0.3.29 → 0.3.30

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,41 @@ function resolveStrokeStyle(item) {
 function strokeOpacityAttr(style) {
   return style.strokeOpacity != null ? ` stroke-opacity="${style.strokeOpacity}"` : "";
 }
+function clampNumber(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function svgNumber(value) {
+  if (!Number.isFinite(value)) return "0";
+  return Number(value.toFixed(3)).toString();
+}
+function architecturalCloudScallopCount(length, depth) {
+  if (length <= 1e-6) return 0;
+  return Math.max(1, Math.round(length / Math.max(depth * 2.05, 8)));
+}
+function appendHorizontalScallops(segments, startX, endX, y, controlY, count) {
+  if (count <= 0) return;
+  const step = (endX - startX) / count;
+  for (let index = 1; index <= count; index += 1) {
+    const x0 = startX + step * (index - 1);
+    const x1 = index === count ? endX : startX + step * index;
+    const cx = (x0 + x1) / 2;
+    segments.push(
+      `Q${svgNumber(cx)} ${svgNumber(controlY)} ${svgNumber(x1)} ${svgNumber(y)}`
+    );
+  }
+}
+function appendVerticalScallops(segments, startY, endY, x, controlX, count) {
+  if (count <= 0) return;
+  const step = (endY - startY) / count;
+  for (let index = 1; index <= count; index += 1) {
+    const y0 = startY + step * (index - 1);
+    const y1 = index === count ? endY : startY + step * index;
+    const cy = (y0 + y1) / 2;
+    segments.push(
+      `Q${svgNumber(controlX)} ${svgNumber(cy)} ${svgNumber(x)} ${svgNumber(y1)}`
+    );
+  }
+}
 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 +329,63 @@ 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.min(w / 2, h / 2, Math.max(0.5, strokeWidth / 2));
+  const x0 = inset;
+  const y0 = inset;
+  const x1 = Math.max(x0, w - inset);
+  const y1 = Math.max(y0, h - inset);
+  const innerW = Math.max(0, x1 - x0);
+  const innerH = Math.max(0, y1 - y0);
+  if (innerW <= 0 || innerH <= 0) return "";
+  const maxDepth = Math.max(0.5, Math.min(innerW, innerH) * 0.18);
+  const depth = clampNumber(Math.min(w, h) * 0.08, 2, Math.min(12, maxDepth));
+  const corner = Math.min(depth * 1.2, innerW / 2, innerH / 2);
+  const topStart = x0 + corner;
+  const topEnd = x1 - corner;
+  const rightStart = y0 + corner;
+  const rightEnd = y1 - corner;
+  const bottomStart = x1 - corner;
+  const bottomEnd = x0 + corner;
+  const leftStart = y1 - corner;
+  const leftEnd = y0 + corner;
+  const topCount = architecturalCloudScallopCount(topEnd - topStart, depth);
+  const rightCount = architecturalCloudScallopCount(rightEnd - rightStart, depth);
+  const bottomCount = architecturalCloudScallopCount(bottomStart - bottomEnd, depth);
+  const leftCount = architecturalCloudScallopCount(leftStart - leftEnd, depth);
+  const segments = [`M${svgNumber(topStart)} ${svgNumber(y0)}`];
+  appendHorizontalScallops(segments, topStart, topEnd, y0, y0 + depth, topCount);
+  segments.push(
+    `Q${svgNumber(x1)} ${svgNumber(y0)} ${svgNumber(x1)} ${svgNumber(rightStart)}`
+  );
+  appendVerticalScallops(segments, rightStart, rightEnd, x1, x1 - depth, rightCount);
+  segments.push(
+    `Q${svgNumber(x1)} ${svgNumber(y1)} ${svgNumber(bottomStart)} ${svgNumber(y1)}`
+  );
+  appendHorizontalScallops(
+    segments,
+    bottomStart,
+    bottomEnd,
+    y1,
+    y1 - depth,
+    bottomCount
+  );
+  segments.push(
+    `Q${svgNumber(x0)} ${svgNumber(y1)} ${svgNumber(x0)} ${svgNumber(leftStart)}`
+  );
+  appendVerticalScallops(segments, leftStart, leftEnd, x0, x0 + depth, leftCount);
+  segments.push(
+    `Q${svgNumber(x0)} ${svgNumber(y0)} ${svgNumber(topStart)} ${svgNumber(y0)} 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 +528,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 +647,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 };
@@ -3049,6 +3166,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: "M6.5 7.5Q4.4 7.5 4.4 9.4Q3 9.9 3 11.6Q3 13.5 5.2 13.5Q5.8 16 8.3 15.2Q9.2 17.2 11.3 15.7Q12.8 17 14.3 15.5Q16.5 16.4 17 14Q20.7 13.7 20.2 10.9Q21 8.5 18 8.3Q17.2 5.9 14.8 6.7Q13.2 5.2 11.5 6.5Q9.1 5.1 7.8 7.2Q7.2 7.2 6.5 7.5Z" }) });
+}
 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 +3213,7 @@ var ic = { size: 20, strokeWidth: 2 };
 var DEFAULT_OVERFLOW_TOOL_IDS = [
   "rect",
   "ellipse",
+  "architectural-cloud",
   "line",
   "marker",
   "laser",
@@ -3123,6 +3244,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 +3328,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 +4689,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 +4709,7 @@ var VectorToolbar = Object.assign(
     Select: SelectBinding,
     Rect: RectBinding,
     Ellipse: EllipseBinding,
+    ArchitecturalCloud: ArchitecturalCloudBinding,
     Line: LineBinding,
     Arrow: ArrowBinding,
     Draw: DrawBinding,
@@ -5309,7 +5439,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 +5778,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 +6330,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 +6345,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 +6358,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 +6943,7 @@ function cursorForVectorToolId(toolId) {
       return "default";
     case "rect":
     case "ellipse":
+    case "architectural-cloud":
     case "line":
     case "arrow":
       return "crosshair";
@@ -6841,7 +6994,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 +7051,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 +8957,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 +9377,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 +9640,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 +9967,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;