windmill-components 1.70.0 → 1.77.0

package/components/apps/svelte-grid/Grid.svelte

@@ -0,0 +1,171 @@
+<script>import { getContainerHeight } from './utils/container';
+import { moveItemsAroundItem, moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
+import { onMount, createEventDispatcher } from 'svelte';
+import { getColumn, throttle } from './utils/other';
+import MoveResize from './MoveResize.svelte';
+const dispatch = createEventDispatcher();
+export let fillSpace = false;
+export let items;
+export let rowHeight;
+export let cols;
+export let gap = [10, 10];
+export let fastStart = false;
+export let throttleUpdate = 100;
+export let throttleResize = 100;
+export let onTopId = undefined;
+export let containerWidth = undefined;
+export let scroller = undefined;
+export let sensor = 20;
+export let parentWidth = undefined;
+let getComputedCols;
+let container;
+$: [gapX, gapY] = gap;
+let xPerPx = 0;
+let yPerPx = rowHeight;
+$: containerHeight = getContainerHeight(items, yPerPx, getComputedCols);
+const pointerup = (ev) => {
+    dispatch('pointerup', {
+        id: ev.detail.id,
+        cols: getComputedCols
+    });
+};
+const onResize = throttle(() => {
+    items = specifyUndefinedColumns(items, getComputedCols, cols);
+    dispatch('resize', {
+        cols: getComputedCols,
+        xPerPx,
+        yPerPx,
+        width: containerWidth
+    });
+}, throttleUpdate);
+onMount(() => {
+    const sizeObserver = new ResizeObserver((entries) => {
+        requestAnimationFrame(() => {
+            let width = entries[0].contentRect.width;
+            if (width === containerWidth)
+                return;
+            getComputedCols = getColumn(parentWidth ?? width, cols);
+            xPerPx = width / getComputedCols;
+            if (!containerWidth) {
+                items = specifyUndefinedColumns(items, getComputedCols, cols);
+                dispatch('mount', {
+                    cols: getComputedCols,
+                    xPerPx,
+                    yPerPx // same as rowHeight
+                });
+            }
+            else {
+                onResize();
+            }
+            containerWidth = width;
+        });
+    });
+    sizeObserver.observe(container);
+    return () => sizeObserver.disconnect();
+});
+let initItems = undefined;
+const updateMatrix = ({ detail }) => {
+    let isPointerUp = detail.isPointerUp;
+    let citems;
+    if (isPointerUp) {
+        try {
+            citems = JSON.parse(JSON.stringify(initItems));
+        }
+        catch (e) {
+            citems = JSON.parse(JSON.stringify(items));
+        }
+        initItems = undefined;
+    }
+    else {
+        if (initItems == undefined) {
+            initItems = JSON.parse(JSON.stringify(items));
+        }
+        citems = JSON.parse(JSON.stringify(initItems));
+    }
+    let activeItem = getItemById(detail.id, citems);
+    if (activeItem) {
+        activeItem = {
+            ...activeItem,
+            [getComputedCols]: {
+                ...activeItem[getComputedCols],
+                ...detail.shadow
+            }
+        };
+        if (fillSpace) {
+            items = moveItemsAroundItem(activeItem, citems, getComputedCols, getItemById(detail.id, citems));
+        }
+        else {
+            items = moveItem(activeItem, citems, getComputedCols, getItemById(detail.id, citems));
+        }
+        if (detail.onUpdate)
+            detail.onUpdate();
+        dispatch('change', {
+            unsafeItem: activeItem,
+            id: activeItem.id,
+            cols: getComputedCols
+        });
+    }
+    if (isPointerUp) {
+        dispatch('redraw', items);
+    }
+};
+const throttleMatrix = throttle(updateMatrix, throttleResize);
+const handleRepaint = ({ detail }) => {
+    if (!detail.isPointerUp) {
+        throttleMatrix({ detail });
+    }
+    else {
+        updateMatrix({ detail });
+    }
+};
+</script>
+
+<div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
+	{#if xPerPx || !fastStart}
+		{#each items as item, i (item.id)}
+			<MoveResize
+				on:repaint={handleRepaint}
+				on:pointerup={pointerup}
+				onTop={item.id == onTopId}
+				id={item.id}
+				resizable={item[getComputedCols] && item[getComputedCols].resizable}
+				draggable={item[getComputedCols] && item[getComputedCols].draggable}
+				{xPerPx}
+				{yPerPx}
+				width={Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) *
+					xPerPx -
+					gapX * 2}
+				height={(item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
+				top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
+				left={(item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
+				item={item[getComputedCols]}
+				min={item[getComputedCols] && item[getComputedCols].min}
+				max={item[getComputedCols] && item[getComputedCols].max}
+				cols={getComputedCols}
+				{gapX}
+				{gapY}
+				{sensor}
+				container={scroller}
+				nativeContainer={container}
+				let:resizePointerDown
+				let:movePointerDown
+			>
+				{#if item[getComputedCols]}
+					<slot
+						{movePointerDown}
+						{resizePointerDown}
+						dataItem={item}
+						item={item[getComputedCols]}
+						index={i}
+					/>
+				{/if}
+			</MoveResize>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.svlt-grid-container {
+		position: relative;
+		width: 100%;
+	}</style>

package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -0,0 +1,47 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FilledItem } from './types';
+declare class __sveltets_Render<T> {
+    props(): {
+        fillSpace?: boolean | undefined;
+        items: FilledItem<T>[];
+        rowHeight: number;
+        cols: [number, number][];
+        gap?: number[] | undefined;
+        fastStart?: boolean | undefined;
+        throttleUpdate?: number | undefined;
+        throttleResize?: number | undefined;
+        onTopId?: string | undefined;
+        containerWidth?: number | undefined;
+        scroller?: undefined;
+        sensor?: number | undefined;
+        parentWidth?: number | undefined;
+    };
+    events(): {
+        pointerup: CustomEvent<any>;
+        resize: CustomEvent<any>;
+        mount: CustomEvent<any>;
+        change: CustomEvent<any>;
+        redraw: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            movePointerDown: ({ clientX, clientY, target }: {
+                clientX: any;
+                clientY: any;
+                target: any;
+            }) => void;
+            resizePointerDown: (e: any) => void;
+            dataItem: FilledItem<T>;
+            item: Required<import("./types").ItemLayout>;
+            index: any;
+        };
+    };
+}
+export type GridProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type GridEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type GridSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Grid<T> extends SvelteComponentTyped<GridProps<T>, GridEvents<T>, GridSlots<T>> {
+}
+export {};

package/components/apps/svelte-grid/LICENSE

@@ -0,0 +1,23 @@
+Anything under this repo was initially forked from svelte-grid whose LICENSE is below
+
+MIT License
+
+Copyright (c) 2019 Vahe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/apps/svelte-grid/MoveResize.svelte

@@ -0,0 +1,328 @@
+<script>import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+export let sensor;
+export let width;
+export let height;
+export let left;
+export let top;
+export let resizable;
+export let draggable;
+export let id;
+export let container;
+export let xPerPx;
+export let yPerPx;
+export let gapX;
+export let gapY;
+export let item;
+export let max;
+export let min;
+export let cols;
+export let nativeContainer;
+export let onTop;
+let shadowElement;
+let shadow = undefined;
+let active = false;
+let initX, initY;
+let capturePos = {
+    x: 0,
+    y: 0
+};
+let cordDiff = { x: 0, y: 0 };
+let newSize = { width, height };
+let trans = false;
+let anima;
+const inActivate = () => {
+    if (shadowElement && shadow != undefined) {
+        let subgrid = shadowElement.closest('.subgrid');
+        let irect = shadowElement.getBoundingClientRect();
+        let shadowBound;
+        if (subgrid) {
+            let subGridParent = subgrid.parentElement;
+            let subGridParentRect = subGridParent.getBoundingClientRect();
+            let prect = subgrid.getBoundingClientRect();
+            const subGridOffset = {
+                x: subGridParentRect.x - prect.x,
+                y: subGridParentRect.y - prect.y
+            };
+            shadowBound = {
+                x: irect.x - prect.left - subGridOffset.x,
+                y: irect.y - prect.top - subGridOffset.y
+            };
+        }
+        else {
+            shadowBound = irect;
+        }
+        const xdragBound = rect.left + cordDiff.x;
+        const ydragBound = rect.top + cordDiff.y;
+        cordDiff.x = shadow.x * xPerPx + gapX - (shadowBound.x - xdragBound);
+        cordDiff.y = shadow.y * yPerPx + gapY - (shadowBound.y - ydragBound);
+        active = false;
+        trans = true;
+        clearTimeout(anima);
+        anima = setTimeout(() => {
+            trans = false;
+        }, 100);
+        dispatch('pointerup', {
+            id
+        });
+    }
+};
+let repaint = (cb, isPointerUp) => {
+    dispatch('repaint', {
+        id,
+        shadow,
+        isPointerUp,
+        onUpdate: cb
+    });
+};
+// Autoscroll
+let _scrollTop = 0;
+let containerFrame;
+let rect;
+let scrollElement;
+const getContainerFrame = (element) => {
+    if (element === document.documentElement || !element) {
+        const { height, top, right, bottom, left } = nativeContainer.getBoundingClientRect();
+        return {
+            top: Math.max(0, top),
+            bottom: Math.min(window.innerHeight, bottom)
+        };
+    }
+    return element.getBoundingClientRect();
+};
+const getScroller = (element) => (!element ? document.documentElement : element);
+function computeRect(target) {
+    let gridItem = target.closest('.svlt-grid-item');
+    let subgrid = gridItem.closest('.subgrid');
+    let irect = gridItem.getBoundingClientRect();
+    if (subgrid) {
+        let subGridParent = subgrid.parentElement;
+        let subGridParentRect = subGridParent.getBoundingClientRect();
+        let prect = subgrid.getBoundingClientRect();
+        const subGridOffset = {
+            x: subGridParentRect.x - prect.x,
+            y: subGridParentRect.y - prect.y
+        };
+        rect = {
+            top: irect.top - prect.top - subGridOffset.y,
+            left: irect.left - prect.left - subGridOffset.x
+        };
+    }
+    else {
+        rect = irect;
+    }
+}
+const pointerdown = ({ clientX, clientY, target }) => {
+    initX = clientX;
+    initY = clientY;
+    capturePos = { x: left, y: top };
+    shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
+    newSize = { width, height };
+    containerFrame = getContainerFrame(container);
+    scrollElement = getScroller(container);
+    cordDiff = { x: 0, y: 0 };
+    computeRect(target);
+    active = true;
+    trans = false;
+    _scrollTop = scrollElement.scrollTop;
+    window.addEventListener('pointermove', pointermove);
+    window.addEventListener('pointerup', pointerup);
+};
+let sign = { x: 0, y: 0 };
+let vel = { x: 0, y: 0 };
+let intervalId = undefined;
+const stopAutoscroll = () => {
+    intervalId && clearInterval(intervalId);
+    intervalId = undefined;
+    sign = { x: 0, y: 0 };
+    vel = { x: 0, y: 0 };
+};
+const update = () => {
+    const _newScrollTop = scrollElement.scrollTop - _scrollTop;
+    const boundX = capturePos.x + cordDiff.x;
+    const boundY = capturePos.y + (cordDiff.y + _newScrollTop);
+    let gridX = Math.round(boundX / xPerPx);
+    let gridY = Math.round(boundY / yPerPx);
+    if (shadow) {
+        shadow.x = Math.max(Math.min(gridX, cols - shadow.w), 0);
+        shadow.y = Math.max(gridY, 0);
+        if (max.y) {
+            shadow.y = Math.min(shadow.y, max.y);
+        }
+    }
+    repaint(undefined, false);
+};
+const pointermove = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    const { clientX, clientY } = event;
+    cordDiff = { x: clientX - initX, y: clientY - initY };
+    const Y_SENSOR = sensor;
+    let velocityTop = Math.max(0, (containerFrame.top + Y_SENSOR - clientY) / Y_SENSOR);
+    let velocityBottom = Math.max(0, (clientY - (containerFrame.bottom - Y_SENSOR)) / Y_SENSOR);
+    const topSensor = velocityTop > 0 && velocityBottom === 0;
+    const bottomSensor = velocityBottom > 0 && velocityTop === 0;
+    sign.y = topSensor ? -1 : bottomSensor ? 1 : 0;
+    vel.y = sign.y === -1 ? velocityTop : velocityBottom;
+    if (vel.y > 0) {
+        if (!intervalId) {
+            // Start scrolling
+            // TODO Use requestAnimationFrame
+            intervalId = setInterval(() => {
+                scrollElement.scrollTop += 2 * (vel.y + Math.sign(vel.y)) * sign.y;
+                update();
+            }, 10);
+        }
+    }
+    else if (intervalId) {
+        stopAutoscroll();
+    }
+    else {
+        update();
+    }
+};
+const pointerup = (e) => {
+    stopAutoscroll();
+    window.removeEventListener('pointerdown', pointerdown);
+    window.removeEventListener('pointermove', pointermove);
+    window.removeEventListener('pointerup', pointerup);
+    repaint(inActivate, true);
+};
+// Resize
+let resizeInitPos = { x: 0, y: 0 };
+let initSize = { width: 0, height: 0 };
+const resizePointerDown = (e) => {
+    e.stopPropagation();
+    const { pageX, pageY, target } = e;
+    resizeInitPos = { x: pageX, y: pageY };
+    initSize = { width, height };
+    cordDiff = { x: 0, y: 0 };
+    computeRect(target);
+    newSize = { width, height };
+    active = true;
+    trans = false;
+    shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
+    containerFrame = getContainerFrame(container);
+    scrollElement = getScroller(container);
+    window.addEventListener('pointermove', resizePointerMove);
+    window.addEventListener('pointerup', resizePointerUp);
+};
+const resizePointerMove = ({ pageX, pageY }) => {
+    if (shadow) {
+        newSize.width = initSize.width + pageX - resizeInitPos.x;
+        newSize.height = initSize.height + pageY - resizeInitPos.y;
+        // Get max col number
+        let maxWidth = cols - shadow.x;
+        maxWidth = Math.min(max.w, maxWidth) || maxWidth;
+        // Limit bound
+        newSize.width = Math.max(Math.min(newSize.width, maxWidth * xPerPx - gapX * 2), min.w * xPerPx - gapX * 2);
+        newSize.height = Math.max(newSize.height, min.h * yPerPx - gapY * 2);
+        if (max.h) {
+            newSize.height = Math.min(newSize.height, max.h * yPerPx - gapY * 2);
+        }
+        // Limit col & row
+        shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx);
+        shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx);
+        repaint(undefined, false);
+    }
+};
+const resizePointerUp = (e) => {
+    e.stopPropagation();
+    repaint(inActivate, true);
+    window.removeEventListener('pointermove', resizePointerMove);
+    window.removeEventListener('pointerup', resizePointerUp);
+};
+</script>
+
+<div
+	draggable={false}
+	on:pointerdown={item && item.customDragger ? null : draggable && pointerdown}
+	class="svlt-grid-item"
+	class:svlt-grid-active={active || (trans && rect)}
+	style="width: {active ? newSize.width : width}px; height:{active
+		? newSize.height
+		: height}px; {onTop ? 'z-index: 100;' : ''}
+  {active
+		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;`
+		: trans
+		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;`
+		: `transition: transform 0.1s, opacity 0.1s; transform: translate(${left}px, ${top}px); `} "
+>
+	<slot movePointerDown={pointerdown} {resizePointerDown} />
+	{#if resizable && !item.customResizer}
+		<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
+	{/if}
+</div>
+
+{#if (active || trans) && shadow}
+	<div
+		class="svlt-grid-shadow shadow-active"
+		style="width: {shadow.w * xPerPx - gapX * 2}px; height: {shadow.h * yPerPx -
+			gapY * 2}px; transform: translate({shadow.x * xPerPx + gapX}px, {shadow.y * yPerPx +
+			gapY}px); "
+		bind:this={shadowElement}
+	/>
+{/if}
+
+<style>
+	.svlt-grid-item {
+		touch-action: none;
+		position: absolute;
+		will-change: auto;
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	.svlt-grid-resizer {
+		-webkit-user-select: none;
+		   -moz-user-select: none;
+		        user-select: none;
+		width: 20px;
+		height: 20px;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		cursor: se-resize;
+	}
+	.svlt-grid-resizer::after {
+		content: '';
+		position: absolute;
+		right: 3px;
+		bottom: 3px;
+		width: 5px;
+		height: 5px;
+		border-right: 2px solid rgba(0, 0, 0, 0.4);
+		border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+	}
+
+	.svlt-grid-active {
+		z-index: 3;
+		cursor: grabbing;
+		position: fixed;
+		opacity: 0.5;
+
+		/*No user*/
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+		-moz-backface-visibility: hidden;
+		-o-backface-visibility: hidden;
+		-ms-backface-visibility: hidden;
+		-webkit-user-select: none;
+		   -moz-user-select: none;
+		        user-select: none;
+	}
+
+	.shadow-active {
+		z-index: 2;
+		transition: all 0.2s;
+	}
+
+	.svlt-grid-shadow {
+		position: absolute;
+		background: red;
+		will-change: transform;
+		background: pink;
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}</style>

package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -0,0 +1,46 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        sensor: any;
+        width: any;
+        height: any;
+        left: any;
+        top: any;
+        resizable: any;
+        draggable: any;
+        id: any;
+        container: any;
+        xPerPx: any;
+        yPerPx: any;
+        gapX: any;
+        gapY: any;
+        item: any;
+        max: any;
+        min: any;
+        cols: any;
+        nativeContainer: any;
+        onTop: any;
+    };
+    events: {
+        pointerup: CustomEvent<any>;
+        repaint: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            movePointerDown: ({ clientX, clientY, target }: {
+                clientX: any;
+                clientY: any;
+                target: any;
+            }) => void;
+            resizePointerDown: (e: any) => void;
+        };
+    };
+};
+export type MoveResizeProps = typeof __propDef.props;
+export type MoveResizeEvents = typeof __propDef.events;
+export type MoveResizeSlots = typeof __propDef.slots;
+export default class MoveResize extends SvelteComponentTyped<MoveResizeProps, MoveResizeEvents, MoveResizeSlots> {
+}
+export {};

package/components/apps/svelte-grid/types.d.ts

@@ -0,0 +1,25 @@
+
+export interface Size {
+    w: number
+    h: number
+}
+
+export interface Positon {
+    x: number
+    y: number
+}
+
+interface ItemLayout extends Size, Positon {
+    fixed?: boolean
+    resizable?: boolean
+    draggable?: boolean
+    customDragger?: boolean
+    customResizer?: boolean
+    min?: Size
+    max?: Size
+}
+
+export type FilledItem<T> = T & { [width: number]: Required<ItemLayout>; data: any, id: string }
+
+
+

package/components/apps/svelte-grid/utils/container.d.ts

@@ -0,0 +1 @@
+export declare function getContainerHeight(items: any, yPerPx: any, cols: any): number;

package/components/apps/svelte-grid/utils/container.js

@@ -0,0 +1,4 @@
+import { getRowsCount } from "./other";
+export function getContainerHeight(items, yPerPx, cols) {
+    return getRowsCount(items, cols) * yPerPx;
+}

package/components/apps/svelte-grid/utils/helper.d.ts

@@ -0,0 +1,14 @@
+declare const gridHelp: {
+    normalize(items: any, col: any): any;
+    adjust(items: any, col: any): {
+        [width: number]: Required<import("../types").ItemLayout>;
+        data: any;
+        id: string;
+    }[];
+    item(obj: any): any;
+    findSpace(item: any, items: any, cols: any): {
+        x: number;
+        y: number;
+    };
+};
+export default gridHelp;

package/components/apps/svelte-grid/utils/helper.js

@@ -0,0 +1,36 @@
+import { makeMatrixFromItems } from "./matrix";
+import { findFreeSpaceForItem, normalize, adjust } from "./item";
+import { getRowsCount } from "./other";
+function makeItem(item) {
+    const { min = { w: 1, h: 1 }, max } = item;
+    return {
+        fixed: false,
+        resizable: !item.fixed,
+        draggable: !item.fixed,
+        customDragger: false,
+        customResizer: false,
+        min: {
+            w: Math.max(1, min.w),
+            h: Math.max(1, min.h),
+        },
+        max: { ...max },
+        ...item,
+    };
+}
+const gridHelp = {
+    normalize(items, col) {
+        return normalize(items, col);
+    },
+    adjust(items, col) {
+        return adjust(items, col);
+    },
+    item(obj) {
+        return makeItem(obj);
+    },
+    findSpace(item, items, cols) {
+        let matrix = makeMatrixFromItems(items, getRowsCount(items, cols), cols);
+        let position = findFreeSpaceForItem(matrix, item[cols]);
+        return position;
+    },
+};
+export default gridHelp;