windmill-components 1.85.0 → 1.87.0

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

@@ -0,0 +1,226 @@
+<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/AppPdf.svelte

@@ -0,0 +1,313 @@
+<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}