hamzus-ui 0.0.193 → 0.0.194

package/index.d.ts

@@ -64,6 +64,7 @@ export * as Sidebar from "./src/layout/Sidebar"
 
 // special
 export { default as Portal } from "./src/components/hamzus-ui/Portal/Portal.svelte"
+export { default as SvgLine } from "./src/components/hamzus-ui/SvgLine/SvgLine.svelte"
 
 // utils
 export { config, init } from "./src/utils/hamzus.config.js";

package/index.js

@@ -61,6 +61,7 @@ export * as Sidebar from "./src/layout/Sidebar"
 
 // special
 export { default as Portal } from "./src/components/hamzus-ui/Portal/Portal.svelte"
+export { default as SvgLine } from "./src/components/hamzus-ui/SvgLine/SvgLine.svelte"
 
 // utils
 export { config, init } from "./src/utils/hamzus.config.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.193",
+	"version": "0.0.194",
 	"type": "module",
 	"main": "index.js",
 	"svelte": "index.js",

package/src/components/hamzus-ui/SvgLine/SvgLine.svelte

@@ -0,0 +1,31 @@
+<script>
+    import { generatePathWithRoundedCorners } from "../../../utils/svg";
+
+    export let steps = {
+        dir: "up" | "down" | "left" | "right",
+        distance: 0
+    }
+    export let radius = 10
+    export let strokeWidth = 5
+    export let startX = 0
+    export let startY = 0
+    export let color = "var(--accent-b)"
+
+    $: data = generatePathWithRoundedCorners(steps, radius, strokeWidth, startX, startY)
+</script>
+
+<svg
+	width={data.width}
+	height={data.height}
+	viewBox="0 0 {data.width} {data.height}"
+	style="transform:translate({data.startX}px, {data.startY}px);"
+>
+	<path
+		d={data.d}
+		stroke="{color}"
+		fill="transparent"
+		stroke-width={data.strokeWidth}
+		stroke-linecap="butt"
+		stroke-linejoin="round"
+	/>
+</svg>

package/src/utils/svg.js

@@ -0,0 +1,105 @@
+
+
+
+export function generatePathWithRoundedCorners(
+    steps = {
+        dir: "up" | "down" | "left" | "right",
+        distance: 0
+    },
+    radius = 10,
+    strokeWidth = 5,
+    startX = 0,
+    startY = 0
+) {
+    if (!steps || steps.length === 0) return "";
+
+    const halfStroke = strokeWidth / 2;
+
+    // --- Génération des points ---
+    let x = startX;
+    let y = startY;
+    const points = [{ x, y }];
+
+    for (const step of steps) {
+        switch (step.dir.toLowerCase()) {
+            case "right": x += step.distance; break;
+            case "left": x -= step.distance; break;
+            case "down": y += step.distance; break;
+            case "up": y -= step.distance; break;
+        }
+        points.push({ x, y });
+    }
+
+    // --- Bounding box ---
+    const xs = points.map(p => p.x);
+    const ys = points.map(p => p.y);
+    const minX = Math.min(...xs) - halfStroke;
+    const minY = Math.min(...ys) - halfStroke;
+    const maxX = Math.max(...xs) + halfStroke;
+    const maxY = Math.max(...ys) + halfStroke;
+    const width = maxX - minX;
+    const height = maxY - minY;
+
+    // --- Transformation SVG ---
+    const transformed = points.map(p => ({ x: p.x - minX, y: p.y - minY }));
+
+    // --- Path avec arrondis ---
+    let d = `M ${transformed[0].x} ${transformed[0].y} `;
+
+    for (let i = 1; i < transformed.length - 1; i++) {
+        const p0 = transformed[i - 1];
+        const p1 = transformed[i];
+        const p2 = transformed[i + 1];
+
+        // Si coin
+        const isCorner =
+            (p0.x !== p1.x || p0.y !== p1.y) &&
+            (p1.x !== p2.x || p1.y !== p2.y) &&
+            !(p0.x === p2.x && p0.y === p2.y);
+
+        if (isCorner) {
+            // Vecteur p0->p1
+            let dx1 = p1.x - p0.x;
+            let dy1 = p1.y - p0.y;
+            const len1 = Math.hypot(dx1, dy1);
+            dx1 /= len1;
+            dy1 /= len1;
+
+            // Vecteur p1->p2
+            let dx2 = p2.x - p1.x;
+            let dy2 = p2.y - p1.y;
+            const len2 = Math.hypot(dx2, dy2);
+            dx2 /= len2;
+            dy2 /= len2;
+
+            const r = Math.min(radius, len1 / 2, len2 / 2);
+
+            const startX = p1.x - dx1 * r;
+            const startY = p1.y - dy1 * r;
+            const endX = p1.x + dx2 * r;
+            const endY = p1.y + dy2 * r;
+
+            d += `L ${startX} ${startY} `;
+            d += `Q ${p1.x} ${p1.y} ${endX} ${endY} `;
+        } else {
+            d += `L ${p1.x} ${p1.y} `;
+        }
+    }
+
+    // Dernier point
+    const last = transformed[transformed.length - 1];
+    d += `L ${last.x} ${last.y}`;
+
+    // calculer la position du svg en fonction du point de depart
+    let posX = transformed[0].x
+    let posY = transformed[0].y
+
+    return {
+        width,
+        height,
+        d,
+        strokeWidth,
+        startX: -posX,
+        startY: -posY
+    };
+}