windmill-components 1.87.0 → 1.89.0

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

@@ -0,0 +1,179 @@
+<script>import { getContainerHeight } from './utils/container';
+import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
+import { onMount, createEventDispatcher } from 'svelte';
+import { getColumn, throttle } from './utils/other';
+import MoveResize from './MoveResize.svelte';
+import { sortGridItemsPosition } from '../editor/appUtils';
+const dispatch = createEventDispatcher();
+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 selectedIds;
+export let allIdsInPath;
+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 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 sortedItems = [];
+$: sortedItems = JSON.parse(JSON.stringify(items)).sort((a, b) => a.id.localeCompare(b.id));
+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(sortedItems));
+        }
+        initItems = undefined;
+    }
+    else {
+        if (initItems == undefined) {
+            initItems = JSON.parse(JSON.stringify(sortedItems));
+        }
+        citems = JSON.parse(JSON.stringify(initItems));
+    }
+    let nselectedIds = selectedIds ?? [];
+    if (detail.id && !selectedIds?.includes(detail.id)) {
+        nselectedIds = [detail.id, ...(selectedIds ?? [])];
+    }
+    sortedItems = citems;
+    for (let id of nselectedIds) {
+        let activeItem = getItemById(id, sortedItems);
+        if (activeItem) {
+            activeItem = {
+                ...activeItem,
+                [getComputedCols]: {
+                    ...activeItem[getComputedCols],
+                    ...shadows[id]
+                }
+            };
+            sortedItems = moveItem(activeItem, sortedItems, getComputedCols, getItemById(id, sortedItems));
+        }
+    }
+    for (let id of nselectedIds ?? []) {
+        if (detail.activate) {
+            moveResizes?.[id]?.inActivate();
+        }
+    }
+    if (isPointerUp) {
+        dispatch('redraw', sortGridItemsPosition(JSON.parse(JSON.stringify(sortedItems)), getComputedCols));
+    }
+};
+const throttleMatrix = throttle(updateMatrix, throttleResize);
+const handleRepaint = ({ detail }) => {
+    if (!detail.isPointerUp) {
+        throttleMatrix({ detail });
+    }
+    else {
+        updateMatrix({ detail });
+    }
+};
+let moveResizes = {};
+let shadows = {};
+export function handleMove({ detail }) {
+    Object.entries(moveResizes).forEach(([id, moveResize]) => {
+        if (selectedIds?.includes(id)) {
+            moveResize?.updateMove(JSON.parse(JSON.stringify(detail.cordDiff)), detail.eventY);
+        }
+    });
+    throttleMatrix({ detail: { isPointerUp: false, activate: false } });
+}
+export function handleInitMove({ detail }) {
+    Object.entries(moveResizes).forEach(([id, moveResize]) => {
+        if (selectedIds?.includes(id)) {
+            moveResize?.initmove();
+        }
+    });
+}
+</script>
+
+<div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
+	{#if xPerPx || !fastStart}
+		{#each sortedItems as item (item.id)}
+			<MoveResize
+				on:initmove={handleInitMove}
+				on:move={handleMove}
+				bind:shadow={shadows[item.id]}
+				bind:this={moveResizes[item.id]}
+				on:repaint={handleRepaint}
+				onTop={Boolean(allIdsInPath?.includes(item.id))}
+				id={item.id}
+				{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]}
+				cols={getComputedCols}
+				{gapX}
+				{gapY}
+				{sensor}
+				container={scroller}
+				nativeContainer={container}
+			>
+				{#if item[getComputedCols]}
+					<slot dataItem={item} item={item[getComputedCols]} />
+				{/if}
+			</MoveResize>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.svlt-grid-container {
+		position: relative;
+		width: 100%;
+		-webkit-user-select: none;
+		   -moz-user-select: none;
+		        user-select: none;
+	}</style>

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

@@ -0,0 +1,50 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FilledItem } from './types';
+declare class __sveltets_Render<T> {
+    props(): {
+        items: FilledItem<T>[];
+        rowHeight: number;
+        cols: [number, number][];
+        gap?: number[] | undefined;
+        fastStart?: boolean | undefined;
+        throttleUpdate?: number | undefined;
+        throttleResize?: number | undefined;
+        selectedIds: string[] | undefined;
+        allIdsInPath: string[] | undefined;
+        containerWidth?: number | undefined;
+        scroller?: HTMLElement | undefined;
+        sensor?: number | undefined;
+        parentWidth?: number | undefined;
+        handleMove?: (({ detail }: {
+            detail: any;
+        }) => void) | undefined;
+        handleInitMove?: (({ detail }: {
+            detail: any;
+        }) => void) | undefined;
+    };
+    events(): {
+        resize: CustomEvent<any>;
+        mount: CustomEvent<any>;
+        redraw: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            dataItem: FilledItem<T>;
+            item: Required<import("./types").ItemLayout>;
+        };
+    };
+}
+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>> {
+    get handleMove(): ({ detail }: {
+        detail: any;
+    }) => void;
+    get handleInitMove(): ({ detail }: {
+        detail: any;
+    }) => void;
+}
+export {};

package/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/package/components/apps/svelte-grid/MoveResize.svelte

@@ -0,0 +1,343 @@
+<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 id;
+export let container;
+export let xPerPx;
+export let yPerPx;
+export let gapX;
+export let gapY;
+export let item;
+export let cols;
+export let nativeContainer;
+export let onTop;
+export let shadow = undefined;
+const divId = `component-${id}`;
+let shadowElement;
+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;
+export function 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;
+        }, 50);
+    }
+}
+let repaint = (activate, isPointerUp) => {
+    dispatch('repaint', {
+        id,
+        isPointerUp,
+        activate
+    });
+};
+// Autoscroll
+let _scrollTop = 0;
+let containerFrame;
+let rect;
+let scrollElement;
+const getContainerFrame = (element) => {
+    if (element === document.documentElement || !element) {
+        const { top, bottom } = 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() {
+    let gridItem = document.getElementById(divId);
+    if (!gridItem)
+        return;
+    let subgrid = gridItem.closest('.subgrid');
+    let irect = gridItem.getBoundingClientRect();
+    if (subgrid && subgrid.parentElement) {
+        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;
+    }
+}
+let dragClosure = undefined;
+const pointerdown = ({ clientX, clientY }) => {
+    dragClosure = () => {
+        dragClosure = undefined;
+        initX = clientX;
+        initY = clientY;
+        dispatch('initmove');
+    };
+    window.addEventListener('pointermove', pointermove);
+    window.addEventListener('pointerup', pointerup);
+};
+export function initmove() {
+    computeRect();
+    newSize = { width, height };
+    capturePos = { x: left, y: top };
+    shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
+    cordDiff = { x: 0, y: 0 };
+    active = true;
+    trans = false;
+    containerFrame = getContainerFrame(container);
+    scrollElement = getScroller(container);
+    _scrollTop = scrollElement.scrollTop;
+}
+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 boundX = capturePos.x + cordDiff.x;
+    const _newScrollTop = (scrollElement?.scrollTop ?? 0) - (_scrollTop ?? 0);
+    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);
+    }
+};
+const pointermove = (event) => {
+    dragClosure && dragClosure();
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    const { clientX, clientY } = event;
+    const cordDiff = { x: clientX - initX, y: clientY - initY };
+    dispatch('move', { cordDiff, clientY });
+};
+export function updateMove(newCoordDiff, clientY) {
+    if (!active) {
+        active = true;
+    }
+    if (trans) {
+        trans = false;
+    }
+    cordDiff = newCoordDiff;
+    // console.log(cordDiff, id, 'B')
+    const Y_SENSOR = sensor;
+    if (containerFrame) {
+        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();
+        }
+    }
+    else {
+        update();
+    }
+}
+const pointerup = (e) => {
+    stopAutoscroll();
+    window.removeEventListener('pointerdown', pointerdown);
+    window.removeEventListener('pointermove', pointermove);
+    window.removeEventListener('pointerup', pointerup);
+    if (!dragClosure) {
+        repaint(true, true);
+    }
+    else {
+        dragClosure = undefined;
+    }
+};
+let resizeInitPos = { x: 0, y: 0 };
+let initSize = { width: 0, height: 0 };
+const resizePointerDown = (e) => {
+    e.stopPropagation();
+    const { pageX, pageY } = e;
+    resizeInitPos = { x: pageX, y: pageY };
+    initSize = { width, height };
+    cordDiff = { x: 0, y: 0 };
+    computeRect();
+    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 = maxWidth;
+        // Limit bound
+        newSize.width = Math.min(newSize.width, maxWidth * xPerPx - gapX * 2);
+        // Limit col & row
+        shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx);
+        shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx);
+        repaint(false, false);
+    }
+};
+const resizePointerUp = (e) => {
+    e.stopPropagation();
+    repaint(true, true);
+    window.removeEventListener('pointermove', resizePointerMove);
+    window.removeEventListener('pointerup', resizePointerUp);
+};
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	draggable="false"
+	on:pointerdown|stopPropagation|preventDefault={pointerdown}
+	id={divId}
+	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: 1000;' : ''}
+  {active && rect
+		? `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 />
+	<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
+</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/package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -0,0 +1,48 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        sensor: any;
+        width: any;
+        height: any;
+        left: any;
+        top: any;
+        id: any;
+        container: any;
+        xPerPx: any;
+        yPerPx: any;
+        gapX: any;
+        gapY: any;
+        item: any;
+        cols: any;
+        nativeContainer: any;
+        onTop: any;
+        shadow?: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        } | undefined;
+        inActivate?: (() => void) | undefined;
+        initmove?: (() => void) | undefined;
+        updateMove?: ((newCoordDiff: any, clientY: any) => void) | undefined;
+    };
+    events: {
+        repaint: CustomEvent<any>;
+        initmove: CustomEvent<any>;
+        move: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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> {
+    get inActivate(): () => void;
+    get initmove(): () => void;
+    get updateMove(): (newCoordDiff: any, clientY: any) => void;
+}
+export {};

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

@@ -0,0 +1,15 @@
+export interface Size {
+	w: number
+	h: number
+}
+
+export interface Positon {
+	x: number
+	y: number
+}
+
+interface ItemLayout extends Size, Positon {
+	fixed: boolean
+}
+
+export type FilledItem<T> = { [width: number]: Required<ItemLayout>; data: T; id: string }

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

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

package/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/package/components/apps/svelte-grid/utils/helper.d.ts

@@ -0,0 +1,9 @@
+declare const gridHelp: {
+    adjust(items: any, col: any): import("../types").FilledItem<unknown>[];
+    item(obj: any): any;
+    findSpace(item: any, items: any, cols: any): {
+        x: number;
+        y: number;
+    };
+};
+export default gridHelp;