windmill-components 1.85.0 → 1.87.0

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

@@ -1,221 +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';
-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;
-    if (typeof markers === 'string') {
-        try {
-            array = JSON.parse(markers);
-        }
-        catch (e) {
-            return undefined;
-        }
-    }
-    else {
-        array = markers;
-    }
-    return array?.filter((m) => !isNaN(+m.lat) && !isNaN(+m.lon));
-}
-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} />
-
-{#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/components/apps/components/display/AppPdf.svelte

@@ -1,310 +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';
-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} />
-
-{#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/components/apps/components/display/AppText.svelte

@@ -1,131 +0,0 @@
-<script>import { isCodeInjection } from '../../../flows/utils';
-import Tooltip from '../../../Tooltip.svelte';
-import { Clipboard } from 'lucide-svelte';
-import { getContext } from 'svelte';
-import { get } from 'svelte/store';
-import { twMerge } from 'tailwind-merge';
-import { copyToClipboard } from '../../../../utils';
-import Button from '../../../common/button/Button.svelte';
-import Popover from '../../../Popover.svelte';
-import { initConfig, initOutput } from '../../editor/appUtils';
-import { components } from '../../editor/component';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import ResolveConfig from '../helpers/ResolveConfig.svelte';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-export let id;
-export let componentInput;
-export let horizontalAlignment = 'left';
-export let verticalAlignment = undefined;
-export let configuration;
-export let initializing = undefined;
-export let customCss = undefined;
-export let render;
-let resolvedConfig = initConfig(components['textcomponent'].initialData.configuration, configuration);
-const { app, worldStore, mode } = getContext('AppViewerContext');
-const editorcontext = getContext('AppEditorContext');
-let result = undefined;
-if (componentInput?.type == 'template' && !isCodeInjection(componentInput.eval)) {
-    result = componentInput.eval;
-    initializing = false;
-}
-const outputs = initOutput($worldStore, id, {
-    result,
-    loading: initializing
-});
-function getComponent() {
-    switch (resolvedConfig.style) {
-        case 'Title':
-            return 'h1';
-        case 'Subtitle':
-            return 'h3';
-        case 'Body':
-            return 'p';
-        case 'Caption':
-            return 'p';
-        case 'Label':
-            return 'label';
-        default:
-            return 'p';
-    }
-}
-function getClasses() {
-    switch (resolvedConfig.style) {
-        case 'Caption':
-            return 'text-sm italic text-gray-500';
-        case 'Label':
-            return 'font-semibold text-sm';
-        default:
-            return '';
-    }
-}
-let component = 'p';
-let classes = '';
-$: resolvedConfig.style && (component = getComponent());
-$: resolvedConfig.style && (classes = getClasses());
-</script>
-
-{#each Object.keys(components['textcomponent'].initialData.configuration) as key (key)}
-	<ResolveConfig
-		{id}
-		{key}
-		bind:resolvedConfig={resolvedConfig[key]}
-		configuration={configuration[key]}
-	/>
-{/each}
-
-<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-	<div class="h-full w-full overflow-hidden">
-		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-			{#if !result || result === ''}
-				<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
-					No text
-				</div>
-			{:else}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<div
-					class="flex flex-wrap gap-2 pb-0.5 {$mode === 'dnd' && componentInput?.type == 'template'
-						? 'cursor-text'
-						: ''}"
-					on:click={() => {
-						if ($mode === 'dnd' && componentInput?.type == 'template') {
-							let ontextfocus = editorcontext?.ontextfocus
-							if (ontextfocus) {
-								get(ontextfocus)?.()
-							}
-						}
-					}}
-				>
-					<svelte:element
-						this={component}
-						class={twMerge(
-							'whitespace-pre-wrap',
-							$app.css?.['textcomponent']?.['text']?.class,
-							customCss?.text?.class,
-							classes
-						)}
-						style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
-					>
-						{String(result)}
-						{#if resolvedConfig.tooltip != ''}
-							<Tooltip>{resolvedConfig.tooltip}</Tooltip>
-						{/if}
-						{#if resolvedConfig.copyButton && result}
-							<Popover notClickable>
-								<Button
-									variant="border"
-									size="xs"
-									color="dark"
-									btnClasses="!p-1"
-									on:click={() => copyToClipboard(result)}
-								>
-									<Clipboard size={14} strokeWidth={2} />
-								</Button>
-								<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
-							</Popover>
-						{/if}
-					</svelte:element>
-				</div>
-			{/if}
-		</AlignWrapper>
-	</div>
-</RunnableWrapper>

package/components/apps/components/display/AppText.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-declare const __propDef: {
-    props: {
-        id: string;
-        componentInput: AppInput | undefined;
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        configuration: RichConfigurations;
-        initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'textcomponent'> | undefined;
-        render: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppTextProps = typeof __propDef.props;
-export type AppTextEvents = typeof __propDef.events;
-export type AppTextSlots = typeof __propDef.slots;
-export default class AppText extends SvelteComponentTyped<AppTextProps, AppTextEvents, AppTextSlots> {
-}
-export {};