Skip to content
GeoViewer 5

Source CenterExtent

Source CenterExtent

Cette page est générée automatiquement à partir du dépôt local au moment de la génération de la documentation.

Fichiers inclus

packages/common/src/lib/widgets/center-extent/center-extent.declaration.ts

packages/common/src/lib/widgets/center-extent/center-extent.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { type CenterExtentConfig, centerExtentConfigSchema } from './center-extent.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


export const declaration = {
    factory: () => import('./CenterExtent.svelte').then((Fullscreen) => widgetFactorySvelte(Fullscreen)),
    schema: () => centerExtentConfigSchema,
} satisfies WidgetDeclaration;


export type CenterExtentProps = WidgetProps<CenterExtentConfig>;

packages/common/src/lib/widgets/center-extent/center-extent.config.ts

packages/common/src/lib/widgets/center-extent/center-extent.config.ts
import { defineWidgetConfig } from '$lib/api/managers/configuration/models/widget/widget-configuration.schema';
import { inToolbarSchemaFrom } from '$lib/api/managers/configuration/models/widget/widget-in-toolbar.schema';
import { hiddenContainerId } from '$lib/components/containers/hidden/hidden.schema';
import { z } from 'zod';
import { extentSchema } from '$lib/api/domain';


export const centerExtentConfigSchema = defineWidgetConfig({
    container: hiddenContainerId,
    inToolbar: inToolbarSchemaFrom({
        type: 'button',
        label: {
            fr: 'Zone initiale',
            nl: 'NL - Zone initiale',
        },
        icon: {
            lucide: 'House',
        },
    }),
    config: z
        .object({
            extent: extentSchema.optional(),
            duration: z.number().optional(),
        })
        .prefault({}),
});


export type CenterExtentConfig = z.infer<typeof centerExtentConfigSchema>;

packages/common/src/lib/widgets/center-extent/CenterExtent.svelte

packages/common/src/lib/widgets/center-extent/CenterExtent.svelte
<script lang="ts">
    import { onMount } from 'svelte';
    import type { CenterExtentProps } from './center-extent.declaration';
    import { getMapManager } from '$lib/api/map';
    import { getConfigurationManager } from '$lib/api/managers/configuration';


    let { fullConfig, reference }: CenterExtentProps = $props();


    const mapManager = getMapManager();
    const configManager = getConfigurationManager();


    onMount(() => {
        const extent = fullConfig.config.extent ?? configManager.viewerConfiguration?.initialExtent;
        if (extent) {
            void mapManager.tools.zoom.zoomToExtent(extent, { duration: fullConfig.config.duration, buffer: 0 });
            reference.deactivate();
        }
    });
</script>

Aller plus loin