fragment-tools 0.1.0

package/src/client/app/ui/LayoutResizer.svelte

@@ -0,0 +1,218 @@
+<script context="module">
+export const MIN_HEIGHT_ROW = 25;
+export const MIN_WIDTH_COL = 25;
+export const DIRECTIONS = {
+    HORIZONTAL: "horizontal",
+    VERTICAL: "vertical",
+}; 
+</script>
+
+<script>
+import { layout, resize, traverse, tree } from "../stores/layout.js";
+import { clamp, map } from "../utils/math.utils.js";
+
+export let direction = DIRECTIONS.HORIZONTAL;
+export let current;
+export let parent = {};
+
+const { children } = parent;
+
+let visible = false;
+let isDragging = false;
+let next;
+
+function findNext() {
+	if (children && current.node && current.node) {
+		const { parentNode } = current.node;
+		const childNodes = [...parentNode.children]
+
+		const index = childNodes.findIndex(c => c === current.node);
+		const nextNode = childNodes[index+2];
+
+		next = $children.find(c => c.node === nextNode);
+
+		traverse((c) => {
+			if (c.id === next.id) {
+				nextSize = c.size;
+			}
+
+			if (c.id === current.id) {
+				currentSize = c.size;
+			}
+		}, $tree);
+	}
+}
+
+let currentRect, nextRect;
+let currentSize, nextSize, totalSize;
+
+function handleMouseDown() {
+	findNext();
+
+    if (!isDragging && next) {
+        isDragging = true;
+
+        document.body.style.userSelect = "none";
+        document.body.style.cursor = direction === DIRECTIONS.HORIZONTAL ? "ns-resize" : "ew-resize";
+
+		totalSize = currentSize + nextSize;
+
+		currentRect = current.node.getBoundingClientRect();
+		nextRect = next.node.getBoundingClientRect();
+
+		visible = currentSize === nextSize;
+    }
+}
+
+function handleMouseUp(event) {
+    if (isDragging) {
+        isDragging = false;
+        visible = false;
+        document.body.style.userSelect = null;
+        document.body.style.cursor = null;
+    }
+}
+
+function handleMouseMove(event) {
+	if (!isDragging) return;
+	let prevFlex, nextFlex;
+
+	if (direction === DIRECTIONS.HORIZONTAL) {
+		const top = currentRect.top;
+		const bottom = nextRect.bottom;
+
+		const y = clamp(event.clientY, top, bottom);
+
+		prevFlex = Math.round(map(y, top, bottom, 0, totalSize) * 10000) / 10000;
+		nextFlex = Math.round(map(y, bottom, top, 0, totalSize) * 10000) / 10000;
+	} else if (direction === DIRECTIONS.VERTICAL) {
+		const left = currentRect.left;
+		const right = nextRect.right;
+
+		const x = clamp(event.clientX, left + MIN_WIDTH_COL, right - MIN_WIDTH_COL);
+		prevFlex = Math.round(map(x, left, right, 0, totalSize) * 10000) / 10000;
+		nextFlex = Math.round(map(x, right, left, 0, totalSize) * 10000) / 10000;
+	}
+
+	let totalWidth = currentRect.width + nextRect.width;
+	let totalHeight = currentRect.height + nextRect.height;
+	
+
+
+	if (Math.abs(nextFlex - prevFlex) < 0.05) {
+		prevFlex = totalSize * 0.5;
+		nextFlex = totalSize * 0.5;
+	}
+
+	let ratioWidth = totalWidth / totalSize;
+	let ratioHeight = totalHeight / totalSize;
+	
+	visible = prevFlex === nextFlex;
+
+	function isMinimized(size) {
+		return size * (direction === DIRECTIONS.HORIZONTAL ? ratioHeight : ratioWidth) <= 25;
+	}
+
+	if (isMinimized(prevFlex)) {
+		nextFlex = totalSize;
+		prevFlex = 0;
+	} else if (isMinimized(nextFlex)) {
+		prevFlex = totalSize;
+		nextFlex = 0;
+	}
+
+	resize([
+		{ id: current.id, size: prevFlex },
+		{ id: next.id, size: nextFlex }
+	]);
+}
+
+</script>
+
+<div class="resizer resizer--{direction}" class:dragging={isDragging} class:editing={$layout.editing}>
+	<div class="resizer-hover" class:visible={visible} on:mousedown={handleMouseDown}></div>
+</div>
+<svelte:window on:mouseup={handleMouseUp} on:mousemove={handleMouseMove} />
+
+<style>
+.resizer {
+	--area-size: 10px;
+	--thickness: 2px;
+
+    position: relative;
+}
+
+[class~='resizer']:last-of-type {
+	display: none;
+}
+
+.resizer-hover {
+    position: absolute;
+    z-index: 100;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;	
+}
+
+.resizer-hover:before {
+    content: '';
+
+    width: var(--thickness);
+    height: 100%;
+    
+    background-color: white;
+    opacity: 0;
+}
+
+.resizer.editing .resizer-hover:before {
+    opacity: 0.1;
+}
+
+.resizer .resizer-hover:hover:before {
+    opacity: 0.25;
+}
+
+.resizer.dragging .resizer-hover:before {
+    opacity: 0.5;
+}
+
+.resizer.dragging .resizer-hover.visible:before {
+    opacity: 1;
+    background-color: #177bd0;
+}
+
+.resizer--horizontal {
+    height: 0;
+}
+
+.resizer--horizontal .resizer-hover {
+    top: calc(-0.5 * var(--area-size));
+    right: 0;
+    bottom: calc(-0.5 * var(--area-size));
+    left: 0;
+
+    cursor: row-resize;
+}
+
+.resizer--horizontal .resizer-hover:before {
+    width: 100%;
+    height: var(--thickness);
+}
+
+.resizer--vertical {
+    width: 0;
+}
+
+.resizer--vertical .resizer-hover {
+    top: 0;
+    right: calc(-0.5 * var(--area-size));
+    bottom: 0;
+    left: calc(-0.5 * var(--area-size));
+
+    cursor: col-resize;
+
+    /* background: rgba(0, 255, 0, 0.5); */
+}
+
+</style>

package/src/client/app/ui/LayoutRoot.svelte

@@ -0,0 +1,11 @@
+<script>
+import { tree } from "../stores/layout";
+import LayoutComponent from "./LayoutComponent.svelte";
+
+$: type = $tree.type;
+$: size = $tree.size;
+</script>
+
+<LayoutComponent tree={$tree} type={type} size={size}>
+	<slot></slot>
+</LayoutComponent>

package/src/client/app/ui/LayoutRow.svelte

@@ -0,0 +1,9 @@
+<script>
+import LayoutComponent from "./LayoutComponent.svelte";
+
+export let size = 1;
+</script>
+
+<LayoutComponent size={size} type="row">
+	<slot></slot>
+</LayoutComponent>

package/src/client/app/ui/LayoutToolbar.svelte

@@ -0,0 +1,264 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import IconCross from "../components/IconCross.svelte";
+import ButtonInput from "./fields/ButtonInput.svelte";
+import Select from "./fields/Select.svelte";
+import { moduleNames } from "./ModuleRenderer.svelte";
+
+const defaultValue = "Select a module";
+
+export let moduleName = undefined;
+export let isRoot = false;
+export let vertical = false;
+
+const dispatch = createEventDispatcher();
+
+let splitColumns = false;
+let splitRows = false;
+
+function handleAddRow() {
+	dispatch('add-row');
+}
+
+function handleAddColumn() {
+	dispatch('add-column');
+}
+
+function handleDelete() {
+	dispatch('delete');
+}
+
+const options = [
+	{ value: undefined, label: defaultValue, disabled: true },
+	...moduleNames.map((name) => ({ value: name, label: name }))
+]
+
+</script>
+
+<div
+	class="toolbar"
+	class:root={isRoot}
+	class:split-columns={splitColumns}
+	class:split-rows={splitRows}
+	
+>
+	<div class="content" class:vertical={vertical}>
+		{#if !isRoot}
+			<div class="module">
+				<Select
+					value={moduleName}
+					options={options}
+					on:change
+					title="Switch module"
+				/>
+			</div>
+			<div class="separator"></div>
+		{/if}
+		<div class="layout-actions">
+			<ButtonInput
+				label="Split in columns"
+				showLabel={false}
+				title="Split in columns"
+				on:mouseenter={() => splitColumns = true}
+				on:mouseleave={() => splitColumns = false}
+				on:click={handleAddColumn}
+			>
+				<div class="icon-layout">
+					<div class="icon-box"></div>
+					<div class="icon-box"></div>
+				</div>
+			</ButtonInput>
+			<ButtonInput
+				label="Split in rows"
+				showLabel={false}
+				title="Split in rows"
+				on:mouseenter={() => splitRows = true}
+				on:mouseleave={() => splitRows = false}
+				on:click={handleAddRow}
+			>
+				<div class="icon-layout row">
+					<div class="icon-box"></div>
+					<div class="icon-box"></div>
+				</div>
+			</ButtonInput>
+			{#if !isRoot}
+				<div class="layout-delete">
+					<ButtonInput
+						label="Delete"
+						showLabel={false}
+						on:click={handleDelete}
+						--color-text="white"
+						--background-color="var(--color-red)"
+						--box-shadow-color-active="var(--color-lightred)"
+					>
+						<IconCross />
+					</ButtonInput>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+.toolbar {
+	position: absolute;
+	top: 0;
+	left: 0;
+	/* z-index: 200; */
+
+	display: grid;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	padding: 6px;
+}
+
+.toolbar:not(.root) {
+	background: rgba(0, 0, 0, 0.8);
+}
+
+.toolbar:after {
+	content: '';
+
+	position: absolute;
+	right: 0;
+	z-index: 100;
+
+	width: 6px;
+	height: 100%;
+
+	background-color: rgba(255, 255, 255, 0.2);
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 100ms ease;
+}
+
+.toolbar.split-columns:after {
+	opacity: 1;
+}
+
+.toolbar:before {
+	content: '';
+
+	position: absolute;
+	left: 0;
+	bottom: 0;
+
+	width: 100%;
+	height: 6px;
+
+	background-color: rgba(255, 255, 255, 0.2);
+	opacity: 0;
+	transition: opacity 100ms ease;
+}
+
+.toolbar.split-rows:before {
+	opacity: 1;
+}
+
+.toolbar.root {
+	align-items: flex-start;
+
+	pointer-events: none;
+}
+
+.module {
+	min-width: 130px;
+	width: 100%;
+}
+
+.icon-layout {
+	display: grid;
+	gap: 2px;
+	grid-template-columns: 1fr 1fr;
+	align-content: stretch;
+}
+
+.icon-box {
+	width: 4px;
+	height: 10px;
+	border: 1px solid rgba(255, 255, 255, 0.5);
+	border-radius: 1px;
+}
+
+:global(.button:hover) .icon-box {
+	border-color: rgba(255, 255, 255, 1);
+}
+
+.icon-layout.row {
+	transform: rotate(90deg);
+}
+
+.separator {
+	--size: 20px;
+
+	position: relative;
+
+	width: var(--size);
+	height: 100%;
+	flex-shrink: 0;
+}
+
+.content.vertical .separator {
+	width: 100%;
+	height: calc(var(--size) * 0.25);
+	opacity: 0;
+}
+
+.separator:after {
+	--size: 10px; 
+	content: "";
+
+	position: absolute;
+	top: calc(50% - var(--size) * 0.5);
+	left: calc(50% - 1px);
+
+	width: 1px;
+	height: var(--size);
+
+	background-color: var(--color-border-input);
+}
+
+
+.content.vertical .separator:after {
+	top: calc(50% - 1px);
+	left: calc(50% - var(--size) * 0.5);
+
+	width: var(--size);
+	height: 1px;
+}
+
+.content {
+	position: relative;
+	z-index: 200;
+
+	display: flex;
+	align-items: center;
+	padding: 6px;
+	border-radius: var(--border-radius-input); 
+	background-color: var(--color-background);
+	border: 1px solid #555;
+	/* background: rgba(0, 0, 0, 0.8); */
+
+	pointer-events: auto;
+}
+
+.content.vertical {
+	flex-direction: column-reverse;
+}
+
+.toolbar.root .content {
+	margin-top: 25px;
+	border-style: dashed;
+}
+
+.content:hover {
+	border-color: #666;
+}
+
+.layout-actions {
+	display: flex;
+	gap: 5px;
+}
+</style>

package/src/client/app/ui/Module.svelte

@@ -0,0 +1,154 @@
+<script context="module">
+let MODULE_ID = 0; 
+
+export let getModuleID = () => {
+    return MODULE_ID++;
+};
+</script>
+
+<script>
+import { getContext } from "svelte";
+import { layout } from "../stores/layout.js";
+
+export let mID = undefined;
+export let name;
+export let slug = name;
+export let scrollable = true;
+export let hasHeader = true;
+
+const parent = getContext('parent');
+
+const current = {
+    mID: !isNaN(mID) ? mID : MODULE_ID++,
+    type: "module",
+    name: slug,
+    hasHeader,
+};
+
+MODULE_ID = Math.max(MODULE_ID, !isNaN(current.mID) ? current.mID + 1 : 0);
+
+parent.registerChild(current);
+
+const m = getContext('module');
+m.set(current);
+
+</script>
+
+<div
+    class="module module--{slug}"
+    class:scrollable={scrollable}
+    class:no-header={!hasHeader}
+    class:editing={$layout.editing}
+>
+    {#if hasHeader && name}
+        <header class="module__header" >
+            <div class="header__col">
+                <div class="slot slot--left">
+                    <slot name="header-left"></slot>
+                </div>
+            </div>
+            <div class="header__col">
+                <h2 class="module__title">{name}</h2>
+            </div>
+            <div class="header__col">
+                <div class="slot slot--right">
+                    <slot name="header-right"></slot>
+                </div>
+            </div>
+        </header>
+    {/if}
+    <div class="module__container">
+        <slot></slot>
+    </div>
+</div>
+
+<style>
+.module {
+    --header-height: 25px;
+
+    display: grid;
+    grid-template-rows: 25px minmax(0px, auto);
+    grid-template-columns: minmax(0, 1fr);
+    align-items: stretch;
+}
+
+.module.no-header {
+    --header-height: 0px;
+    grid-template-rows: minmax(0px, auto);
+}
+
+.module__header {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    height: var(--header-height);
+    flex-shrink: 0;
+    align-items: center;
+
+    background-color: var(--color-lightblack);
+}
+
+.slot {
+    display: flex;
+    align-items: center;
+}
+
+.header__col {
+    display: flex;
+    padding: 0 6px;
+    justify-content: center;
+    align-items: center;
+}
+
+.header__col:first-child {
+    justify-content: flex-start;
+}
+
+.header__col:last-child {
+    justify-content: flex-end;
+}
+
+.module__title {
+    user-select: none;
+
+    color: white;
+    font-size: 10px;
+    text-transform: capitalize;
+    background-color: transparent;
+}
+
+.module__container {
+    position: relative;
+
+    background-color: var(--color-background);
+}
+
+.module.scrollable .module__container {
+    overflow-y: auto;
+}
+
+.module.editing.scrollable .module__container {
+    overflow-y: hidden;
+}
+
+.module__container::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+.module__container::-webkit-scrollbar-track {
+    background: transparent;        /* color of the tracking area */
+}
+
+.module__container::-webkit-scrollbar-thumb {
+    background-color: var(--color-active);    /* color of the scroll thumb */
+    border-radius: 20px;/*       roundness of the scroll thumb*/
+}
+
+.module.minimized .module__container {
+    display: none;
+}
+
+.footer {
+    height: var(--height-input);
+}
+</style>