Skip to content
GeoViewer 5

Source ZoomButtons

Source ZoomButtons

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/zoom-buttons/zoom-buttons.declaration.ts

packages/common/src/lib/widgets/zoom-buttons/zoom-buttons.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { type ZoomButtonsConfig, zoomButtonsConfig } from './zoom-buttons.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


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


export type ZoomButtonsProps = WidgetProps<ZoomButtonsConfig>;

packages/common/src/lib/widgets/zoom-buttons/zoom-buttons.config.ts

packages/common/src/lib/widgets/zoom-buttons/zoom-buttons.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 { i18nSchemaFrom } from '$lib/api/managers/i18n/i18n.schema';
import { hiddenContainerId } from '$lib/components/containers/hidden/hidden.schema';
import { z } from 'zod';
import type { TooltipSide } from '$lib/components/api-simple-tooltip';


const i18n = i18nSchemaFrom({
    'zoom-in': {
        fr: 'Zoom avant',
        nl: 'NL - Zoom avant',
    },
    'zoom-out': {
        fr: 'Zoom arrière',
        nl: 'NL - Zoom arrière',
    },
});


export const zoomButtonsConfig = defineWidgetConfig({
    title: {
        fr: 'Zoom',
        nl: 'Zoom',
    },
    container: hiddenContainerId,
    inToolbar: inToolbarSchemaFrom({
        type: 'integrated',
    }),
    i18n: i18n,
    active: true,
    config: z
        .object({
            vertical: z.boolean().optional(),
            tooltipSide: z.custom<TooltipSide>().default('left'),
        })
        .prefault({}),
});


export type ZoomButtonsConfig = z.infer<typeof zoomButtonsConfig>;

packages/common/src/lib/widgets/zoom-buttons/ZoomButtons.svelte

packages/common/src/lib/widgets/zoom-buttons/ZoomButtons.svelte
<script lang="ts">
    import { getMapManager } from '$lib/api/map';
    import { mapIconButtonVariants, mapIconVariants } from '$lib/components/icon/map-icon';
    import { cn } from '$lib/components/shadcn/utils';
    import Minus from 'lucide-svelte/icons/minus';
    import Plus from 'lucide-svelte/icons/plus';
    import { getI18n } from '$lib/api/managers/i18n';
    import { ApiSimpleTooltip } from '$lib/components/api-simple-tooltip';
    import type { ZoomButtonsProps } from './zoom-buttons.declaration';


    const { fullConfig }: ZoomButtonsProps = $props();


    const { config } = fullConfig;
    const mapManager = getMapManager();
    const i18n = getI18n(fullConfig.i18n);
    const zoom = mapManager.tools.zoom;
</script>


<div class={cn('gv-flex', fullConfig.config.vertical ? 'gv-divide-y gv-flex-col' : 'gv-divide-x')}>
    <div class="gv-bg-background gv-inline-block">
        <ApiSimpleTooltip text={i18n('zoom-in')} side={config.tooltipSide} openDelay={0}>
            <button onclick={() => zoom.zoomIn()} class={cn(mapIconButtonVariants())} data-test-id="ZoomButtons-Cortex">
                <Plus class={mapIconVariants()} />
            </button>
        </ApiSimpleTooltip>
    </div>
    <div class="gv-bg-background gv-inline-block">
        <ApiSimpleTooltip text={i18n('zoom-out')} side={config.tooltipSide} openDelay={0}>
            <button onclick={() => zoom.zoomOut()} class={cn(mapIconButtonVariants())} data-test-id="ZoomButtons-Minus">
                <Minus class={mapIconVariants()} />
            </button>
        </ApiSimpleTooltip>
    </div>
</div>

Aller plus loin