mountain-ui 1.0.170 → 1.0.172

package/src/lib/registry/webPageRegistry/registry.svelte.js

@@ -0,0 +1,106 @@
+import { writable, derived, get } from 'svelte/store';
+import { webComponentRegistry } from '../webComponentRegistry/registry.svelte';
+
+function createWebPageRegistry() {
+    const store = writable({});
+
+    const all = derived(store, ($webPages) => Object.values($webPages));
+
+    return {
+        subscribe: store.subscribe,
+
+        register(webPage) {
+            store.update((webPages) => ({
+                ...webPages,
+                [webPage.path]: webPage
+            }));
+        },
+
+        unregister(path) {
+            store.update((webPages) => {
+                const copy = { ...webPages };
+
+                delete copy[path];
+
+                return copy;
+            });
+        },
+
+        get(path) {
+            return get(store)[path];
+        },
+
+        select(path) {
+            return derived(store, ($webPages) => $webPages[path]);
+        },
+
+        getAll() {
+            return all;
+        },
+
+        update(path) {
+            store.update((webPages) => {
+                return webPages;
+            });
+        },
+
+        setRootChild(path, webComponent) {
+            store.update((webPages) => {
+                webComponent.id = webPages[path].AI
+                webPages[path].children = {
+                    id: webComponent.id,
+                    children: []
+                }
+                webPages[path].children_index[webComponent.id] = webComponent
+
+                // ajouter au registry
+                webComponentRegistry.register(webComponent)
+
+                webPages[path].AI++
+
+                return webPages;
+            });
+
+        },
+
+        addChildTo(path, id, newChild) {
+            store.update((webPages) => {
+                console.log(webPages[path]);
+
+                const el = webPages[path].children_index[id]
+
+                // trouver ou il est dans le three
+                let children = webPages[path].children
+
+                for (const parentId of el.path) {
+                    children = children.children.find(c => c.id = parentId)
+                }
+
+                newChild.id = webPages[path].AI
+                webPages[path].AI++
+
+                children.children.push({
+                    id: newChild.id,
+                    children: []
+                })
+                el.children.push(newChild.id)
+                webPages[path].children_index[newChild.id] = newChild
+
+                webComponentRegistry.register(newChild)
+
+                return webPages
+            })
+        },
+
+        getChildrenIds(path, id) {
+            return derived(store, ($webPages) => {
+                return $webPages[path]?.children_index[id]?.children ?? [];
+            });
+        },
+
+
+
+    };
+}
+
+export const webPageRegistry = createWebPageRegistry();

package/src/lib/registry/webSite/components/Editor.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { webComponentTypeRegistry } from "../registry.svelte";
+
+    let {
+        type
+    } = $props()
+
+    const webComponentType = $derived(webComponentTypeRegistry.get(type))
+</script>
+
+

package/src/lib/registry/webSite/createWebComponentType.js

@@ -0,0 +1,13 @@
+import { sendRequest } from "hamzus-ui";
+import { get } from "svelte/store";
+
+export function createWebComponentType(config = {}) {
+    const webSite = {
+        name: "",
+        pages:[]
+    };
+
+    Object.assign(webSite, config);
+
+    return webSite;
+}

package/src/lib/registry/webSite/registerWebComponentTypes.js

@@ -0,0 +1,12 @@
+import { sendRequest } from "hamzus-ui";
+import { webSiteRegistry } from "./registry.svelte";
+import { createWebSite } from "./createWebSite.js";
+
+import Page from "./webSites/Page/index.js";
+import Frame from "./webSites/Frame/index.js";
+
+
+export async function registerWebSites() {
+    webSiteRegistry.register(Page)
+    webSiteRegistry.register(Frame)
+}

package/src/lib/registry/webSite/registry.svelte.js

@@ -0,0 +1,42 @@
+import { writable, derived, get } from 'svelte/store';
+
+function createWebComponentTypeRegistry() {
+	const store = writable({});
+
+	const all = derived(store, ($webComponentTypes) => Object.values($webComponentTypes));
+
+	return {
+		subscribe: store.subscribe,
+
+		register(webComponentType) {
+			store.update((webComponentTypes) => ({
+				...webComponentTypes,
+				[webComponentType.type]: webComponentType
+			}));
+		},
+
+		unregister(type) {
+			store.update((webComponentTypes) => {
+				const copy = { ...webComponentTypes };
+
+				delete copy[type];
+
+				return copy;
+			});
+		},
+
+		get(type) {
+			return get(store)[type];
+		},
+
+		select(type) {
+			return derived(store, ($webComponentTypes) => $webComponentTypes[type]);
+		},
+
+		getAll() {
+			return all;
+		},
+	};
+}
+
+export const webComponentTypeRegistry = createWebComponentTypeRegistry();

package/src/routes/exemple/[project_normalized_name]/site-builder/+page.svelte

@@ -0,0 +1,391 @@
+<script>
+	import { updated } from '$app/state';
+	import { createWebComponent } from '$lib/registry/webComponentRegistry/createWebComponent';
+	import { webComponentRegistry } from '$lib/registry/webComponentRegistry/registry.svelte';
+	import { registerWebComponentTypes } from '$lib/registry/webComponentTypeRegistry/registerWebComponentTypes';
+	import { webComponentTypeRegistry } from '$lib/registry/webComponentTypeRegistry/registry.svelte';
+	import WebPage from '$lib/registry/webPageRegistry/components/WebPage.svelte';
+	import { createWebPage } from '$lib/registry/webPageRegistry/createWebPage';
+	import { webPageRegistry } from '$lib/registry/webPageRegistry/registry.svelte';
+	import { Button, IconButton } from 'hamzus-ui';
+	import { onMount } from 'svelte';
+
+	let isMounted = $state(false);
+
+	const activeWebComponent = $derived(webComponentRegistry.getActive());
+	const activeWebComponentType = $derived(webComponentTypeRegistry.select($activeWebComponent?.type));
+
+	onMount(() => {
+		registerWebComponentTypes();
+
+		const webPage = createWebPage({});
+
+		webPageRegistry.register(webPage);
+
+		webPageRegistry.setRootChild(
+			webPage.path,
+			createWebComponent({
+				id: null,
+				type: 'page',
+				children: [],
+				breakPoints: [
+					{
+						name: 'Default',
+						width: 1200
+					}
+				],
+				scrollSection: {
+					enable: false,
+					name: '',
+					offsetY: 0
+				},
+				layout: {
+					type: 'stack', // stack | grid | null
+					stack: {
+						direction: 'column', // row | column
+						distribution: 'start',
+						alignement: 'start',
+						wrap: false
+					},
+					grid: {
+						type: 'fixed', // fixed | auto
+						cols: 2,
+						rows: 2
+					},
+					gap: {
+						x: 0,
+						y: 0
+					},
+					padding: {
+						top: 0,
+						right: 0,
+						bottom: 0,
+						left: 0
+					}
+				},
+				typography: {
+					content: 'exemple',
+					weigth: 'Regular', // thin | thin-italic | extra-light | extra-light-italic | light | light-italic | regular | italic | medium | medium-italic | semi-bold | semi-bold-italic | bold | bold-italic | extra-bold | extra-bold-italic | black | black-italic
+					fontSize: 16,
+					fontSizeType: 'px', // px | rem
+					letterSpacing: 0,
+					lineHeight: 16,
+					alignement: 'left', // left | center | right | justify
+					tag: 'p' // left | center | right | justify
+				},
+				// overlay
+				overlay: [],
+				// styles
+				style: {
+					opacity: 1,
+					visibilty: true,
+					fill: {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 1
+					},
+					overflow: 'visible', // visible | clip | hidden | scroll
+					borderRadius: {
+						tl: 0,
+						tr: 0,
+						br: 0,
+						bl: 0
+					},
+					border: {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 1
+					},
+					ZIndex: 1
+				},
+				// link
+				link: {
+					enable: false,
+					href: '',
+					newTab: true
+				},
+				// position
+				position: {
+					type: 'absolute', // absolute | relative | fixed | sticky
+					absolute: {
+						top: null,
+						left: null,
+						right: null,
+						bottom: null
+					},
+					fixed: {
+						top: null,
+						left: null,
+						right: null,
+						bottom: null
+					},
+					sticky: {
+						top: 0
+					}
+				},
+				// size
+				size: {
+					widthType: 'relative', // relative | fill | fixed | fit-content | viewport
+					width: 100,
+					heightType: 'relative', // relative | fill | fixed | fit-content | viewport
+					height: 100,
+					minWidthType: 'relative', // relative | fill | fixed | fit-content | viewport
+					minWidth: null,
+					maxWidthType: 'relative', // relative | fill | fixed | fit-content | viewport
+					maxWidth: null,
+					minHeightType: 'relative', // relative | fill | fixed | fit-content | viewport
+					minHeight: null,
+					maxHeightType: 'relative', // relative | fill | fixed | fit-content | viewport
+					maxHeight: null
+				}
+			})
+		);
+
+		console.log(webPage);
+
+		isMounted = true;
+	});
+
+	let zoom = $state(1);
+
+	let posX = $state(0);
+	let posY = $state(0);
+
+	let isPanning = $state(false);
+	let startX = $state(0);
+	let startY = $state(0);
+	let startPosX = $state(0);
+	let startPosY = $state(0);
+
+	function handleMouseDown(e) {
+		// Molette
+		if (e.button !== 1) return;
+		console.log('dsas');
+
+		e.preventDefault();
+
+		isPanning = true;
+
+		startX = e.clientX;
+		startY = e.clientY;
+
+		startPosX = posX;
+		startPosY = posY;
+	}
+
+	function handleMouseMove(e) {
+		if (!isPanning) return;
+
+		posX = startPosX + (e.clientX - startX);
+		posY = startPosY + (e.clientY - startY);
+	}
+
+	function handleMouseUp(e) {
+		if (e.button !== 1) return;
+
+		isPanning = false;
+	}
+
+	function handleZoomIn() {
+		zoom += 0.1;
+	}
+	function handleZoomOut() {
+		if (zoom === 0.1) return;
+		zoom -= 0.1;
+	}
+	function handleWheel(e) {
+		if (!e.ctrlKey) return;
+
+		e.preventDefault();
+
+		const rect = e.currentTarget.getBoundingClientRect();
+
+		// Position de la souris dans l'éditeur
+		const mouseX = e.clientX - rect.left;
+		const mouseY = e.clientY - rect.top;
+
+		// Ancien zoom
+		const oldZoom = zoom;
+
+		// Sens du zoom
+		const direction = e.deltaY < 0 ? 1 : -1;
+
+		const newZoom = Math.min(3, Math.max(0.1, oldZoom + direction * 0.1));
+
+		if (newZoom === oldZoom) return;
+
+		// Position du point sous la souris avant le zoom
+		const contentX = (mouseX - posX) / oldZoom;
+		const contentY = (mouseY - posY) / oldZoom;
+
+		zoom = newZoom;
+
+		// On repositionne pour garder le même point sous la souris
+		posX = mouseX - contentX * newZoom;
+		posY = mouseY - contentY * newZoom;
+	}
+	function handleClickOnNothing(e) {
+        if (e.target.closest(".right-bar")) {
+            return
+        }
+		webComponentRegistry.unsetActive();
+	}
+
+    function update(callback) {
+        callback()
+
+        webPageRegistry.update("/")
+    }
+</script>
+
+{#if isMounted}
+	<div
+		class="editor"
+		class:panning={isPanning}
+		onmousedown={handleMouseDown}
+		onmousemove={handleMouseMove}
+		onmouseup={handleMouseUp}
+		onmouseleave={handleMouseUp}
+		onwheel={handleWheel}
+        onclick={handleClickOnNothing}
+	>
+		<div class="pages" style="--pos-x:{posX}px;--pos-y:{posY}px;--zoom:{zoom};">
+			<WebPage path="/"></WebPage>
+		</div>
+		<div class="top-bar">
+			<IconButton onClick={handleZoomOut} variant="ghost" size="24px">
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M14 12.45H9C8.59 12.45 8.25 12.11 8.25 11.7C8.25 11.29 8.59 10.95 9 10.95H14C14.41 10.95 14.75 11.29 14.75 11.7C14.75 12.11 14.41 12.45 14 12.45Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M11.5 21.75C5.85 21.75 1.25 17.15 1.25 11.5C1.25 5.85 5.85 1.25 11.5 1.25C17.15 1.25 21.75 5.85 21.75 11.5C21.75 17.15 17.15 21.75 11.5 21.75ZM11.5 2.75C6.67 2.75 2.75 6.68 2.75 11.5C2.75 16.32 6.67 20.25 11.5 20.25C16.33 20.25 20.25 16.32 20.25 11.5C20.25 6.68 16.33 2.75 11.5 2.75Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M22.0004 22.7499C21.8104 22.7499 21.6204 22.6799 21.4704 22.5299L19.4704 20.5299C19.1804 20.2399 19.1804 19.7599 19.4704 19.4699C19.7604 19.1799 20.2404 19.1799 20.5304 19.4699L22.5304 21.4699C22.8204 21.7599 22.8204 22.2399 22.5304 22.5299C22.3804 22.6799 22.1904 22.7499 22.0004 22.7499Z"
+						fill="#292D32"
+					/>
+				</svg>
+			</IconButton>
+			<h5>{(zoom * 100).toFixed(2)}%</h5>
+			<IconButton onClick={handleZoomIn} variant="ghost" size="24px">
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M14.2002 12.45H9.2002C8.7902 12.45 8.4502 12.11 8.4502 11.7C8.4502 11.29 8.7902 10.95 9.2002 10.95H14.2002C14.6102 10.95 14.9502 11.29 14.9502 11.7C14.9502 12.11 14.6102 12.45 14.2002 12.45Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M11.7002 14.95C11.2902 14.95 10.9502 14.61 10.9502 14.2V9.19995C10.9502 8.78995 11.2902 8.44995 11.7002 8.44995C12.1102 8.44995 12.4502 8.78995 12.4502 9.19995V14.2C12.4502 14.61 12.1102 14.95 11.7002 14.95Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M11.5 21.75C5.85 21.75 1.25 17.15 1.25 11.5C1.25 5.85 5.85 1.25 11.5 1.25C17.15 1.25 21.75 5.85 21.75 11.5C21.75 17.15 17.15 21.75 11.5 21.75ZM11.5 2.75C6.67 2.75 2.75 6.68 2.75 11.5C2.75 16.32 6.67 20.25 11.5 20.25C16.33 20.25 20.25 16.32 20.25 11.5C20.25 6.68 16.33 2.75 11.5 2.75Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M22.0004 22.7499C21.8104 22.7499 21.6204 22.6799 21.4704 22.5299L19.4704 20.5299C19.1804 20.2399 19.1804 19.7599 19.4704 19.4699C19.7604 19.1799 20.2404 19.1799 20.5304 19.4699L22.5304 21.4699C22.8204 21.7599 22.8204 22.2399 22.5304 22.5299C22.3804 22.6799 22.1904 22.7499 22.0004 22.7499Z"
+						fill="#292D32"
+					/>
+				</svg>
+			</IconButton>
+		</div>
+
+		{#if $activeWebComponent}
+			<div class="right-bar">
+                {#if $activeWebComponentType}
+                    {#if $activeWebComponentType.allowLayout}
+                        <h5 class="title">Layout</h5>
+                        <div class="grid-selector">
+                            <Button onClick={()=>{update(()=>{$activeWebComponent.setLayout("grid")})}} variant="{$activeWebComponent.layout.type === "grid" ? "secondary" : "ghost"}" style="width:1fr;flex:1;justify-content:center;">
+                                <h5>grille</h5>
+                            </Button>
+                            <Button onClick={()=>{update(()=>{$activeWebComponent.setLayout("stack")})}} variant="{$activeWebComponent.layout.type === "stack" ? "secondary" : "ghost"}" style="width:1fr;flex:1;justify-content:center;">
+                                <h5>pile</h5>
+                            </Button>
+                        </div>
+                    {/if}
+                {/if}
+            </div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.editor {
+		width: 100%;
+		height: calc(100dvh - 45px);
+		overflow: hidden;
+		position: relative;
+        background-image: repeating-linear-gradient(315deg,currentColor 0 1px,#0000 0 50%);
+            background-size: 8px 8px;
+            background-position: 0 0;
+        color: var(--bg-2);
+	}
+    .editor * {
+        color: initial;
+    }
+	.pages {
+		display: flex;
+		column-gap: calc(var(--pad-m) * var(--zoom));
+		position: absolute;
+		top: var(--pos-y);
+		left: var(--pos-x);
+		width: max-content;
+		height: max-content;
+		overflow: visible;
+	}
+
+	.top-bar {
+		display: flex;
+		align-items: center;
+		padding: var(--pad-xs);
+		column-gap: var(--pad-xs);
+		border-radius: var(--radius-xl);
+		background-color: var(--bg-1);
+		border: 1px solid var(--bg-2);
+		position: absolute;
+		top: var(--pad-xs);
+		left: var(--pad-xs);
+		max-width: calc(100% - var(--pad-xs) * 2);
+	}
+
+	.right-bar {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: min(100%, 250px);
+		height: 100%;
+		border-left: 1px solid var(--bg-2);
+		background-color: var(--bg-1);
+        z-index: 1;
+	}
+
+    .title {
+        padding: var(--pad-m);
+        border-bottom: 1px solid var(--bg-2);
+    }
+
+    .grid-selector {
+        display: flex;
+        width: 100%;
+        padding: var(--pad-xs);
+        border-radius: var(--radius-m);
+        background-color: var(--bg-blur);
+    }
+</style>