windmill-components 1.89.1 → 1.103.1

package/dist/components/apps/components/display/AppMap.svelte

@@ -1,226 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { concatCustomCss } from '../../utils';
-import { InputValue } from '../helpers';
-import { twMerge } from 'tailwind-merge';
-import { Map, View, Feature } from 'ol';
-import { useGeographic } from 'ol/proj';
-import { OSM, Vector as VectorSource } from 'ol/source';
-import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer';
-import { Point } from 'ol/geom';
-import { defaults as defaultControls } from 'ol/control';
-import { findGridItem, initOutput } from '../../editor/appUtils';
-import InitializeComponent from '../helpers/InitializeComponent.svelte';
-const LAYER_NAME = {
-    MARKER: 'Marker'
-};
-export let id;
-export let configuration;
-export let customCss = undefined;
-export let render;
-const { app, worldStore, selectedComponent, connectingInput, focusedGrid, mode } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, id, {
-    mapRegion: {
-        topLeft: { lat: 0, lon: 0 },
-        bottomRight: { lat: 0, lon: 0 }
-    }
-});
-let map;
-let mapElement;
-let longitude = undefined;
-let latitude = undefined;
-let zoom = undefined;
-// If string, it's a JSON file read as text
-let markers = undefined;
-$: if (map && longitude && latitude) {
-    map.getView().setCenter([longitude, latitude]);
-}
-$: if (map && zoom) {
-    map.getView().setZoom(zoom);
-}
-$: if (map && markers) {
-    updateMarkers();
-}
-function selectComponent() {
-    if (!$connectingInput.opened) {
-        $selectedComponent = [id];
-        $focusedGrid = undefined;
-    }
-}
-function getLayersByName(name) {
-    return map
-        .getLayers()
-        .getArray()
-        .filter((l) => l.getProperties().name === LAYER_NAME[name]);
-}
-function getMarkerArray() {
-    let array = undefined;
-    try {
-        if (typeof markers === 'string') {
-            const json = JSON.parse(markers);
-            array = Array.isArray(json) ? json : [json];
-        }
-        else {
-            array = markers;
-        }
-        return array?.filter((m) => !isNaN(+m.lat) && !isNaN(+m.lon));
-    }
-    catch (error) {
-        console.log(error);
-        return undefined;
-    }
-}
-function createMarkerLayers() {
-    const markerArray = getMarkerArray();
-    return markerArray?.map((m) => {
-        return new VectorLayer({
-            properties: {
-                name: LAYER_NAME.MARKER
-            },
-            source: new VectorSource({
-                features: [
-                    new Feature({
-                        geometry: new Point([+m.lon, +m.lat]),
-                        name: m.title
-                    })
-                ]
-            }),
-            style: {
-                'circle-radius': m.radius ?? 7,
-                'circle-fill-color': m.color ?? '#dc2626',
-                'circle-stroke-width': m.strokeWidth ?? 3,
-                'circle-stroke-color': m.strokeColor ?? '#fca5a5'
-            }
-        });
-    });
-}
-function updateMarkers() {
-    const layers = getLayersByName('MARKER');
-    if (layers?.length) {
-        layers.forEach((l) => map.removeLayer(l));
-    }
-    createMarkerLayers()?.forEach((l) => map.addLayer(l));
-}
-$: if (!map && mapElement) {
-    useGeographic();
-    map = new Map({
-        target: mapElement,
-        layers: [
-            new TileLayer({
-                source: new OSM()
-            }),
-            ...(createMarkerLayers() || [])
-        ],
-        view: new View({
-            center: [longitude ?? 0, latitude ?? 0],
-            zoom: zoom ?? 2
-        }),
-        controls: defaultControls({
-            attribution: false
-        })
-    });
-    updateRegionOutput();
-}
-$: css = concatCustomCss($app.css?.mapcomponent, customCss);
-function updateRegionOutput() {
-    if (map) {
-        let extent = map.getView().calculateExtent(map.getSize());
-        const [left, bottom, right, top] = extent;
-        if (outputs?.mapRegion) {
-            outputs.mapRegion.set({
-                topLeft: { lat: top, lon: left },
-                bottomRight: { lat: bottom, lon: right }
-            });
-        }
-    }
-}
-function handleSyncRegion() {
-    const gridItem = findGridItem($app, id);
-    if (!map || !gridItem) {
-        return;
-    }
-    const z = map.getView().getZoom();
-    updateRegionOutput();
-    if (z) {
-        //@ts-ignore
-        gridItem.data.configuration.zoom.value = z;
-    }
-    const center = map.getView().getCenter();
-    if (!center) {
-        return;
-    }
-    if (gridItem) {
-        //@ts-ignore
-        gridItem.data.configuration.longitude.value = center[0];
-        //@ts-ignore
-        gridItem.data.configuration.latitude.value = center[1];
-    }
-}
-</script>
-
-<InputValue {id} input={configuration.longitude} bind:value={longitude} />
-<InputValue {id} input={configuration.latitude} bind:value={latitude} />
-<InputValue {id} input={configuration.zoom} bind:value={zoom} />
-<InputValue {id} input={configuration.markers} bind:value={markers} />
-
-<InitializeComponent {id} />
-
-{#if render}
-	<div class="relative h-full w-full">
-		<div
-			on:pointerdown|stopPropagation={selectComponent}
-			bind:this={mapElement}
-			class={twMerge(`w-full h-full`, css?.map?.class ?? '')}
-			style={css?.map?.style ?? ''}
-		/>
-
-		{#if $mode !== 'preview'}
-			<div
-				class="absolute bottom-0 left-0 px-1 py-0.5 bg-indigo-500 text-white text-2xs"
-				on:pointerdown={handleSyncRegion}
-			>
-				Set region
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style global>
-	:global(.ol-overlaycontainer-stopevent) {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    justify-content: flex-start
-}
-	:global(.ol-control) :global(button) {
-    margin-top: 0.25rem;
-    margin-right: 0.25rem;
-    height: 1.75rem;
-    width: 1.75rem;
-    border-radius: 0.25rem;
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(209 213 219 / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-    --tw-text-opacity: 1;
-    color: rgb(55 65 81 / var(--tw-text-opacity));
-    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    transition-duration: 200ms;
-    display: flex;
-    justify-content: center;
-    align-items: center
-}
-	:global(.ol-control) :global(button:hover) {
-    --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
-}
-	:global(.ol-control) :global(button:focus) {
-    --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
-}</style>

package/dist/components/apps/components/display/AppMap.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-declare const __propDef: {
-    props: {
-        id: string;
-        configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'mapcomponent'> | undefined;
-        render: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppMapProps = typeof __propDef.props;
-export type AppMapEvents = typeof __propDef.events;
-export type AppMapSlots = typeof __propDef.slots;
-export default class AppMap extends SvelteComponentTyped<AppMapProps, AppMapEvents, AppMapSlots> {
-}
-export {};

package/dist/components/apps/components/display/AppPdf.svelte

@@ -1,313 +0,0 @@
-<script>import { Download, Loader2, MoveHorizontal, ZoomIn, ZoomOut } from 'lucide-svelte';
-import { getDocument } from 'pdfjs-dist';
-import 'pdfjs-dist/build/pdf.worker.entry';
-import { getContext } from 'svelte';
-import { fade } from 'svelte/transition';
-import { twMerge } from 'tailwind-merge';
-import { throttle } from '../../../../utils';
-import { Button } from '../../../common';
-import { findGridItem, initOutput } from '../../editor/appUtils';
-import { concatCustomCss } from '../../utils';
-import InputValue from '../helpers/InputValue.svelte';
-import InitializeComponent from '../helpers/InitializeComponent.svelte';
-export let id;
-export let configuration;
-export let customCss = undefined;
-export let render;
-const { app, mode, worldStore, selectedComponent } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
-    loading: false
-});
-let source = undefined;
-let wrapper = undefined;
-let error = undefined;
-let doc = undefined;
-let pages = [];
-let zoom = undefined;
-let controlsWidth = undefined;
-let controlsHeight = undefined;
-let pageNumber = 1;
-$: if (source == '') {
-    resetDoc();
-    error = 'Set the "Source" attribute of the PDF component';
-}
-$: zoom && handleZoom();
-$: wrapper && loadDocument(source);
-$: wideView = controlsWidth && controlsWidth > 450;
-async function resetDoc() {
-    await doc?.destroy();
-    doc = undefined;
-}
-function handleZoom() {
-    if (zoom && wrapper) {
-        try {
-            renderPdf(false);
-        }
-        catch (err) {
-            error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF');
-        }
-    }
-}
-async function loadDocument(src) {
-    if (!src) {
-        return;
-    }
-    try {
-        outputs.loading.set(true);
-        await resetDoc();
-        doc = await getDocument(src).promise;
-        pageNumber = 1;
-        await renderPdf(false, false);
-        error = undefined;
-    }
-    catch (err) {
-        await resetDoc();
-        error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF');
-        console.log(err);
-    }
-    outputs.loading.set(false);
-}
-async function renderPdf(scaleToViewport = true, resizing = false) {
-    if (!(doc && wrapper && zoom)) {
-        return;
-    }
-    const scrollPosition = wrapper.scrollTop / wrapper.scrollHeight;
-    if (!resizing) {
-        pages = [];
-    }
-    const nextPages = [];
-    const nextChildren = [];
-    const { width } = wrapper.getBoundingClientRect();
-    let scale = zoom / 100;
-    if (scaleToViewport) {
-        const firstViewport = (await doc.getPage(1)).getViewport({ scale: 1 });
-        // Rounded to the first integer that is a multiple of 10 and is less than the viewport width
-        zoom = Math.floor((width / firstViewport.width) * 10) * 10;
-        scale = zoom / 100;
-    }
-    for (let i = 0; i < doc.numPages; i++) {
-        const canvas = document.createElement('canvas');
-        const canvasContext = canvas.getContext('2d');
-        if (!canvasContext) {
-            console.warn('Could not get canvas context for PDF page ' + i);
-            continue;
-        }
-        const page = await doc.getPage(i + 1);
-        nextPages.push(page);
-        const viewport = page.getViewport({ scale });
-        canvas.height = viewport.height;
-        canvas.width = viewport.width;
-        canvas.classList.add('mx-auto', 'my-4', 'shadow-sm');
-        await page.render({ canvasContext, viewport }).promise;
-        nextChildren.push(canvas);
-    }
-    while (wrapper.firstChild) {
-        wrapper.removeChild(wrapper.firstChild);
-    }
-    pages = [...nextPages];
-    wrapper.append(...nextChildren);
-    wrapper.scrollTo({
-        top: scrollPosition * wrapper.scrollHeight
-    });
-}
-function scrollToPage(page) {
-    page = pageNumber = minMax(page, 1, pages.length);
-    const offset = wrapper?.children.item(page - 1)?.offsetTop;
-    if (!offset) {
-        return;
-    }
-    //                       controlsHeight + 2px border + half of the top margin
-    const padding = (controlsHeight ? controlsHeight + 2 : 0) + 8;
-    wrapper?.scrollTo({
-        top: offset - padding
-    });
-}
-const throttledScroll = throttle(onScroll, 400);
-function onScroll() {
-    if (!wrapper) {
-        return;
-    }
-    const THRESHOLD = 50;
-    let scrollPosition = wrapper.scrollTop + THRESHOLD + (controlsHeight ?? 0);
-    let page = 1;
-    for (let i = 0; i < pages.length; i++) {
-        const canvas = wrapper.children.item(i);
-        if (scrollPosition < (canvas?.offsetTop ?? wrapper.scrollHeight)) {
-            break;
-        }
-        page = i + 1;
-    }
-    pageNumber = page;
-}
-function syncZoomValue() {
-    const gridItem = findGridItem($app, id);
-    //@ts-ignore
-    if (gridItem && gridItem.data.configuration.zoom.value !== zoom) {
-        //@ts-ignore
-        gridItem.data.configuration.zoom.value = zoom;
-    }
-    $app = $app;
-}
-async function downloadPdf() {
-    if (!doc) {
-        return;
-    }
-    const data = await doc.saveDocument();
-    const url = URL.createObjectURL(new Blob([data.buffer]));
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'document.pdf';
-    link.click();
-    URL.revokeObjectURL(url);
-}
-function minMax(value, min, max) {
-    if (value < min) {
-        return min;
-    }
-    else if (value > max) {
-        return max;
-    }
-    return value;
-}
-$: css = concatCustomCss($app.css?.pdfcomponent, customCss);
-</script>
-
-<InputValue {id} input={configuration.source} bind:value={source} />
-<InputValue {id} input={configuration.zoom} bind:value={zoom} />
-
-<InitializeComponent {id} />
-
-{#if render}
-	<div class="relative flex flex-col w-full h-full bg-gray-100">
-		{#if source && zoom}
-			{#if pages?.length}
-				<div
-					bind:clientWidth={controlsWidth}
-					bind:clientHeight={controlsHeight}
-					class="sticky flex {$mode !== 'preview'
-						? 'w-[calc(100%-2px)] top-[1px]'
-						: 'w-full top-0'} {wideView
-						? 'justify-center gap-14'
-						: '!justify-between'} overflow-x-auto bg-white border mx-auto py-1"
-				>
-					<div class="flex justify-start items-center px-2 text-gray-600 text-sm">
-						<Button
-							on:click={() => zoom && (zoom -= 10)}
-							disabled={!doc}
-							size="xs"
-							color="light"
-							variant="border"
-							title="Zoom out"
-							aria-label="Zoom out"
-							btnClasses="!rounded-r-none !px-2"
-						>
-							<ZoomOut size={16} />
-						</Button>
-						{#if wideView}
-							<Button
-								on:click={() => (zoom = 100)}
-								disabled={!doc}
-								size="xs"
-								color="light"
-								variant="border"
-								title="Reset zoom"
-								aria-label="Reset zoom"
-								btnClasses="!w-[50px] !font-medium !rounded-none !border-l-0 !px-1"
-							>
-								{zoom.toFixed(0)}%
-							</Button>
-						{/if}
-						<Button
-							on:click={() => renderPdf(true, true)}
-							disabled={!doc}
-							size="xs"
-							color="light"
-							variant="border"
-							title="Scale to viewport"
-							aria-label="Scale to viewport"
-							btnClasses="!rounded-none !border-l-0 !px-2"
-						>
-							<MoveHorizontal size={16} />
-						</Button>
-						<Button
-							on:click={() => zoom && (zoom += 10)}
-							disabled={!doc}
-							size="xs"
-							color="light"
-							variant="border"
-							title="Zoom in"
-							aria-label="Zoom in"
-							btnClasses="!rounded-l-none !px-2 !border-l-0"
-						>
-							<ZoomIn size={16} />
-						</Button>
-					</div>
-					<div class="center-center px-2 text-gray-600 text-sm">
-						<input
-							on:input={({ currentTarget }) => {
-								scrollToPage(currentTarget.valueAsNumber)
-							}}
-							min="1"
-							max={pages.length}
-							value={pageNumber}
-							disabled={!doc}
-							type="number"
-							class="!w-[45px] !px-1 !py-0"
-						/>
-						<span class="whitespace-nowrap pl-1">
-							/ {pages.length}
-						</span>
-					</div>
-					<div class="flex justify-end items-center px-2 text-gray-600 text-sm">
-						<Button
-							on:click={downloadPdf}
-							disabled={!doc}
-							size="xs"
-							color="light"
-							variant="border"
-							title="Download PDF"
-							aria-label="Download PDF"
-							btnClasses="!font-medium !px-2"
-						>
-							{#if wideView}
-								<span class="mr-1"> Download </span>
-							{/if}
-							<Download size={16} />
-						</Button>
-					</div>
-				</div>
-			{:else}
-				<div
-					out:fade={{ duration: 200 }}
-					class="absolute inset-0 center-center flex-col text-center text-sm bg-white text-gray-600"
-				>
-					<Loader2 class="animate-spin mb-2" />
-					Loading PDF
-				</div>
-			{/if}
-			<div
-				bind:this={wrapper}
-				on:scroll={throttledScroll}
-				class={twMerge('w-full h-full overflow-auto', css?.container?.class ?? '', 'bg-gray-100')}
-				style={css?.container?.style ?? ''}
-			/>
-		{/if}
-		{#if $mode !== 'preview' && $selectedComponent?.includes(id)}
-			<button
-				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90
-			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"
-				on:click={() => syncZoomValue()}
-			>
-				Sync zoom value
-			</button>
-		{/if}
-		{#if error}
-			<div
-				class="absolute inset-0 z-20 center-center
-		bg-gray-100 text-center text-gray-600 text-sm"
-			>
-				{error}
-			</div>
-		{/if}
-	</div>
-{/if}

package/dist/components/apps/components/display/AppPdf.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import 'pdfjs-dist/build/pdf.worker.entry';
-import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-declare const __propDef: {
-    props: {
-        id: string;
-        configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'pdfcomponent'> | undefined;
-        render: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppPdfProps = typeof __propDef.props;
-export type AppPdfEvents = typeof __propDef.events;
-export type AppPdfSlots = typeof __propDef.slots;
-export default class AppPdf extends SvelteComponentTyped<AppPdfProps, AppPdfEvents, AppPdfSlots> {
-}
-export {};

package/dist/components/apps/components/display/AppPieChart.svelte

@@ -1,60 +0,0 @@
-<script>import { Doughnut, Pie } from 'svelte-chartjs';
-import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement } from 'chart.js';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-import { concatCustomCss } from '../../utils';
-import { getContext } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
-export let id;
-export let componentInput;
-export let configuration;
-export let initializing = undefined;
-export let customCss = undefined;
-export let render;
-const { app, worldStore } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement);
-let result = undefined;
-let theme = 'theme1';
-let doughnut = false;
-$: backgroundColor = {
-    theme1: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
-    // blue theme
-    theme2: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
-    // red theme
-    theme3: ['#e74a3b', '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e']
-}[theme];
-const options = {
-    responsive: true,
-    animation: false,
-    maintainAspectRatio: false
-};
-$: data = {
-    labels: result?.labels ?? [],
-    datasets: [
-        {
-            data: result?.data ?? [],
-            backgroundColor: backgroundColor
-        }
-    ]
-};
-$: css = concatCustomCss($app.css?.piechartcomponent, customCss);
-</script>
-
-<InputValue {id} input={configuration.theme} bind:value={theme} />
-<InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
-
-<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
-	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
-		{#if result}
-			{#if doughnut}
-				<Doughnut {data} {options} />
-			{:else}
-				<Pie {data} {options} />
-			{/if}
-		{/if}
-	</div>
-</RunnableWrapper>

package/dist/components/apps/components/display/AppScatterChart.svelte

@@ -1,59 +0,0 @@
-<script>import zoomPlugin from 'chartjs-plugin-zoom';
-import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement } from 'chart.js';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import Scatter from 'svelte-chartjs/Scatter.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-import { concatCustomCss } from '../../utils';
-import { getContext } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
-export let id;
-export let componentInput;
-export let configuration;
-export let initializing = undefined;
-export let customCss = undefined;
-export let render;
-let zoomable = false;
-let pannable = false;
-const { app, worldStore } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement, zoomPlugin);
-let result = undefined;
-$: options = {
-    responsive: true,
-    animation: false,
-    maintainAspectRatio: false,
-    plugins: {
-        zoom: {
-            pan: {
-                enabled: pannable
-            },
-            zoom: {
-                drag: {
-                    enabled: false
-                },
-                wheel: {
-                    enabled: zoomable
-                }
-            }
-        }
-    }
-};
-$: data = {
-    datasets: result ?? []
-};
-$: css = concatCustomCss($app.css?.scatterchartcomponent, customCss);
-</script>
-
-<InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
-<InputValue {id} input={configuration.pannable} bind:value={pannable} />
-
-<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
-	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
-		{#if result}
-			<Scatter {data} {options} />
-		{/if}
-	</div>
-</RunnableWrapper>